/* 20.1/20.2 · Uzak kontrol arayuzu. Pixel-art: sert kose, keskin kenarlik. */

/* ---------- KONTROL SERIDI (20.1 oda duzlemi) ---------- */
/* KAPATILAMAZ · en ust katman · sayfa kaydirilsa bile ekranda kalir */
.asv-uk-serit {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 2147483000;
  display: flex; align-items: center; gap: var(--asv-space-sm);
  flex-wrap: wrap;
  padding: var(--asv-space-sm) var(--asv-space-md);
  background: rgba(0, 229, 212, .1);
  border-bottom: 2px solid var(--asv-cyan);
  box-shadow: 0 0 20px rgba(0, 229, 212, .2);
  font-family: var(--asv-font-mono);
  font-size: var(--asv-text-xs);
  color: var(--asv-cyan);
}
.asv-uk-serit.duraklatildi {
  background: rgba(28, 85, 168, .12);
  border-bottom-color: #3b82f6;
  color: #9dc4f5;
}
.asv-uk-serit.kontrol-eden {
  background: rgba(46, 224, 106, .1);
  border-bottom-color: var(--asv-green);
  color: var(--asv-green);
}

.asv-uk-nokta {
  width: 9px; height: 9px; flex-shrink: 0;
  background: var(--asv-green);
  box-shadow: 0 0 9px var(--asv-green);
  animation: asv-uk-nabiz 2s steps(4) infinite;
}
.asv-uk-nokta.duraklatildi { background: #3b82f6; box-shadow: none; animation: none; }
@keyframes asv-uk-nabiz { 0%,100% { opacity: 1 } 50% { opacity: .35 } }

.asv-uk-mesaj { flex: 1; min-width: 200px; font-weight: 700; }

.asv-uk-rozetler { display: flex; gap: 4px; flex-wrap: wrap; }
.asv-uk-rozet {
  padding: 2px 6px; font-size: 11px; letter-spacing: .5px;
  border: 1px solid var(--asv-tx-faint); color: var(--asv-tx-faint);
}
.asv-uk-rozet.acik {
  border-color: var(--asv-cyan); color: var(--asv-cyan);
  background: rgba(0, 229, 212, .12);
}

.asv-uk-sayac {
  font-family: var(--asv-font-pixel); font-size: 13px;
  color: var(--asv-amber); min-width: 68px; text-align: right;
}
.asv-uk-sayac.uyari  { color: var(--asv-amber); }
.asv-uk-sayac.kritik { color: var(--asv-red); animation: asv-uk-nabiz 1s steps(2) infinite; }

.asv-uk-serit-butonlar { display: flex; gap: 6px; flex-wrap: wrap; }
.asv-uk-serit-btn {
  /* WCAG 2.5.8 · dokunmatik taban */
  min-height: var(--asv-target-touch);
  padding: 0 var(--asv-space-sm);
  background: transparent; border: 1px solid currentColor; color: inherit;
  border-radius: 0; font-family: var(--asv-font-mono); font-size: var(--asv-text-xs);
  letter-spacing: .5px; cursor: pointer;
}
/* Yikici islemler: daha buyuk ve etrafinda bosluk (Erisilebilirlik raporu §12.2) */
.asv-uk-serit-btn.tehlike {
  border-color: var(--asv-red); color: var(--asv-red);
  background: rgba(224, 52, 74, .12);
  min-width: var(--asv-target-danger);
  margin-left: var(--asv-space-sm);
}
.asv-uk-serit-btn:focus-visible {
  outline: var(--asv-focus-width) solid var(--asv-focus-color); outline-offset: 2px;
}

/* ---------- SAHNE VE DUGMELER ---------- */
.asv-uk-sahne { display: flex; flex-direction: column; gap: var(--asv-space-md); }
.asv-uk-cubuk { display: flex; gap: var(--asv-space-sm); flex-wrap: wrap; }
.asv-uk-cubuk-btn {
  min-height: var(--asv-target-touch); padding: 0 var(--asv-space-md);
  background: var(--asv-bg-elev); border: 1px solid var(--asv-line-bright);
  color: var(--asv-tx); border-radius: 0;
  font-family: var(--asv-font-mono); font-size: var(--asv-text-xs); cursor: pointer;
}
.asv-uk-cubuk-btn:disabled { opacity: .35; cursor: not-allowed; }
.asv-uk-cubuk-btn.tehlike {
  border-color: var(--asv-red); color: var(--asv-red);
  background: rgba(224, 52, 74, .12);
  min-width: var(--asv-target-danger);
}
.asv-uk-cubuk-btn:focus-visible {
  outline: var(--asv-focus-width) solid var(--asv-focus-color); outline-offset: 2px;
}

/* =====================================================================
   20.2 · CIHAZ DUZLEMI (gercek Windows masaustu)

   SIMULASYON STILLERI KALDIRILDI: `.asv-uk-demo` (sahte klavye alani),
   `.asv-uk-imlec*` (sahte uzak imlec), `.asv-uk-tik` (sahte tiklama
   efekti) ve izin modali stilleri. Karsiliklari olan JS dosyalari
   silindi; kalan CSS "bir yerlerde hala simulasyon var" izlenimi
   birakirdi.
   ===================================================================== */

/* ---------- CIHAZ PANELI ---------- */
.asv-uk-panel {
  background: var(--asv-bg-panel);
  border: 1px solid var(--asv-line);
  padding: var(--asv-space-md);
}
.asv-uk-panel-baslik {
  display: flex; align-items: center; gap: var(--asv-space-sm);
  flex-wrap: wrap; margin-bottom: var(--asv-space-sm);
}
.asv-uk-panel-baslik h2 {
  flex: 1; min-width: 180px; margin: 0;
  font-family: var(--asv-font-pixel); font-size: 13px;
  letter-spacing: 1px; color: var(--asv-tx);
}

.asv-uk-cihaz-listesi { list-style: none; margin: 0; padding: 0; }
.asv-uk-cihaz {
  display: flex; align-items: center; gap: var(--asv-space-sm);
  flex-wrap: wrap;
  padding: var(--asv-space-sm);
  border: 1px solid var(--asv-line);
  border-left: 3px solid var(--asv-tx-faint);
  margin-bottom: 6px;
  font-family: var(--asv-font-mono); font-size: var(--asv-text-xs);
}
/* Cevrimici durumu RENKLE degil, once METINLE anlatilir (WCAG 1.4.1);
   renk yalnizca destekleyicidir. */
.asv-uk-cihaz.cevrimici { border-left-color: var(--asv-green); }
.asv-uk-cihaz.bos { color: var(--asv-tx-faint); justify-content: center; }
.asv-uk-cihaz-ad { font-weight: 700; color: var(--asv-tx); min-width: 140px; }
.asv-uk-cihaz-bilgi { flex: 1; min-width: 200px; color: var(--asv-tx-dim); }

/* ---------- ESLESTIRME KODU ---------- */
.asv-uk-kod {
  margin: var(--asv-space-sm) 0;
  padding: var(--asv-space-md);
  background: var(--asv-bg-elev);
  border: 1px dashed var(--asv-amber);
  color: var(--asv-tx-dim); font-size: var(--asv-text-xs);
}
.asv-uk-kod p { margin: 0 0 var(--asv-space-sm); }
.asv-uk-kod-deger {
  display: inline-block;
  font-family: var(--asv-font-pixel); font-size: 26px; letter-spacing: 6px;
  color: var(--asv-amber);
  /* Elle yazilacak bir kod: secilebilir olmali. */
  user-select: all;
}
.asv-uk-kod-sayac { display: block; margin-top: 6px; color: var(--asv-tx-faint); }

/* ---------- DURUM SATIRLARI ---------- */
.asv-uk-durum {
  margin: 0; padding: var(--asv-space-sm);
  border-left: 3px solid var(--asv-cyan);
  background: var(--asv-bg-elev);
  font-family: var(--asv-font-mono); font-size: var(--asv-text-xs);
  color: var(--asv-tx-dim);
}
.asv-uk-durum[data-tur="uyari"] { border-left-color: var(--asv-amber); color: var(--asv-amber); }
.asv-uk-durum[data-tur="hata"]  { border-left-color: var(--asv-red);   color: var(--asv-red); }

.asv-uk-kalite {
  margin: 0; font-family: var(--asv-font-mono);
  font-size: 11px; color: var(--asv-tx-faint); letter-spacing: .5px;
}

/* ---------- GERCEK EKRAN GORUNTUSU ---------- */
.asv-uk-goruntu {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 320px;
  background: var(--asv-bg-deep);
  border: 1px solid var(--asv-line);
  padding: var(--asv-space-sm);
}
/* Odaktayken cerceve degisir: girdinin NEREYE gittigi gorunur olmali. */
.asv-uk-goruntu[data-odak="var"] {
  outline: 3px solid var(--asv-cyan); outline-offset: -3px;
  box-shadow: 0 0 0 1px #000, 0 0 24px rgba(0, 229, 212, .35);
}

.asv-uk-tuval {
  display: block;
  max-width: 100%; max-height: 72vh;
  /* Piksel piksel buyutme: uzak masaustu metni bulanik olmamali. */
  image-rendering: pixelated;
  background: #000;
  cursor: crosshair;
}
.asv-uk-tuval:focus-visible {
  outline: var(--asv-focus-width) solid var(--asv-focus-color); outline-offset: 2px;
}

/* ---------- TAM EKRAN ----------
   Sayfa duzenindeki `max-height: 72vh` siniri, 1920x1080 bir masaustunu
   ~922 CSS pikseline sikistiriyor ve uzak makinedeki metin okunamiyor.
   Tam ekranda o sinir KALKAR; goruntu ekranin tamamini kaplar.

   ⚠ `object-fit: contain` YERINE `max-*` KULLANILIYOR: tuvalin kendi
   piksel olculeri kare boyutundan geliyor ve oran zaten dogru. `contain`
   eklemek ikinci bir olcekleme katmani olurdu; koordinat donusumu
   `getBoundingClientRect()` okudugu icin bozulmazdi ama goruntu iki kez
   yeniden orneklenirdi. */
.asv-uk-goruntu:fullscreen {
  padding: 0;
  border: 0;
  background: #000;
  width: 100%; height: 100%;
}
.asv-uk-goruntu:fullscreen .asv-uk-tuval {
  max-width: 100vw; max-height: 100vh;
  width: auto; height: auto;
}

/* Goruntu yoksa SAHTE MASAUSTU CIZILMEZ - bu katman acik mesaj gosterir. */
.asv-uk-goruntu-katman {
  position: absolute; inset: var(--asv-space-sm);
  display: flex; align-items: center; justify-content: center;
  padding: var(--asv-space-md);
  background: rgba(5, 9, 26, .82);
  color: var(--asv-tx-dim);
  font-family: var(--asv-font-mono); font-size: var(--asv-text-xs);
  text-align: center;
}
.asv-uk-goruntu-katman[data-tur="uyari"] { color: var(--asv-amber); }
.asv-uk-goruntu-katman[data-tur="hata"]  { color: var(--asv-red); }
.asv-uk-goruntu-katman[hidden] { display: none; }

/* Mobil: serit dikeye yigilir, butonlar buyur (Mobil raporu §6) */
@media (max-width: 640px) {
  .asv-uk-serit { flex-direction: column; align-items: flex-start; }
  .asv-uk-serit-butonlar { width: 100%; }
  .asv-uk-serit-btn { flex: 1; }
  .asv-uk-cihaz { flex-direction: column; align-items: flex-start; }
}