/* ==========================================================================
   İPEK KAMERA — izleme istasyonu · sinematik tema
   --------------------------------------------------------------------------
   Sayfa akışı yok. Masaüstünde sabit bölgeler (üst / sol / gövde / şerit);
   mobilde tek sütun akış: sahne üstte sabit, kamera listesi ANA içerik.
   Renkler tek kaynaktan (:root) gelir; zaman çizgisi tuvali de buradan okur.
   ========================================================================== */

:root{
  /* --- yüzey katmanları: sayfadan yükselen 5 kademe --- */
  --video:#000;
  --z0:#05080A;            /* sayfa dibi   */
  --z1:#090E12;            /* panel        */
  --z2:#0E151A;            /* yükseltilmiş */
  --z3:#151F26;            /* girinti/alan */
  --z4:#1D2A33;            /* seçili       */
  --zemin:var(--z0); --panel:var(--z1); --panel2:var(--z2);

  --cam:rgba(14,21,26,.82);         /* cam panel dolgusu */
  --cam-kenar:rgba(255,255,255,.07);

  --cizgi:rgba(255,255,255,.07);
  --cizgi2:rgba(255,255,255,.13);

  /* --yazi3 eskiden #5E717C idi: koyu zeminde kontrast 3,3:1 (AA esigi 4,5).
     Alt menu etiketleri ve ikincil bilgiler parlak isikta okunmuyordu. */
  --yazi:#E4EDF1; --yazi2:#93A7B1; --yazi3:#8296A1; --yazi-aktif:#fff;

  /* --- vurgu: ışıyan turkuaz + ikincil elektrik mavi --- */
  --vurgu:#2FE0BE; --vurgu-koyu:#12856F; --vurgu-sis:rgba(47,224,190,.16);
  --vurgu-zit:#00201A;
  --vurgu2:#5B8DEF;
  --isik:0 0 0 1px rgba(47,224,190,.34), 0 0 20px rgba(47,224,190,.14);

  --secim:#F0B429; --ok:#4ED07F; --uyari:#F0A93B; --tehlike:#F2645A; --bilgi:#5B8DEF;
  --ust-hover:rgba(255,255,255,.06); --ust-aktif:rgba(255,255,255,.12);
  --ust-secili:rgba(47,224,190,.14); --zebra:rgba(255,255,255,.028);

  /* --- zaman çizgisi tuvali --- */
  --zc-zemin:#0A1216; --zc-surekli:#27526E; --zc-hareket:#1E7A63; --zc-yogun:#2FBF9C;
  --zc-alarm:#F2645A; --zc-yerimi:#F0B429; --zc-gelecek:#140F22; --zc-buffer:#5B8DEF;
  --zc-yukleniyor:#1B242A; --zc-kafa:#F2FAFC; --zc-simdi:#2FE0BE; --zc-cetvel:#93A7B1;
  --zc-cizgi:rgba(255,255,255,.09);

  --f:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-mono:ui-monospace,"SF Mono",Consolas,Menlo,monospace;
  --t-xs:11px; --t-sm:12px; --t-md:13px; --t-lg:15px; --t-xl:18px; --t-saat:20px;
  --b1:4px; --b2:8px; --b3:12px; --b4:16px; --b5:24px;

  --ust-y:56px; --sol-g:288px; --arac-y:44px; --zc-y:0px; --karo-bosluk:2px;
  --r-sm:5px; --r:8px; --r-lg:13px; --r-xl:18px;
  --golge:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.5);
  --golge-menu:0 12px 40px rgba(0,0,0,.62), 0 2px 8px rgba(0,0,0,.5);
  --gecis:.18s cubic-bezier(.2,.7,.3,1);
  --dokun:34px;                     /* dokunma hedefi — mobilde büyür */
  --guv-alt:env(safe-area-inset-bottom,0px);
  --guv-ust:env(safe-area-inset-top,0px);

  /* --- degiskene baglanan literaller: koyu temada BUGUNKU degerlerin aynisi,
         acik temada override edilebilmeleri icin ayrildilar --- */
  --btn-a:#4CEBCC; --btn-b:#1FC0A2;
  --oyuk:rgba(0,0,0,.3);
  --kaydirici:rgba(255,255,255,.16);
  --izgara:rgba(255,255,255,.028);
  --sheen:rgba(255,255,255,.22);
  --katman:rgba(14,21,26,.94);
  --amb-a:47,224,190; --amb-b:91,141,239;

  /* --- VIDEO USTU katmanlar: HER TEMADA KOYU KALIR ---
     Altlarinda video var. Acik temada bunlari beyaza cevirmek goruntuyu
     okunmaz yapardi; bu yuzden --ov-* ailesi ASLA override edilmez. --- */
  --ov-vurgu:#2FE0BE; --ov-vurgu-zit:#00201A; --ov-vurgu-koyu:#12856F;
  --ov-yazi:#fff; --ov-yazi2:#B9C6CC;
  --ov-kenar:rgba(255,255,255,.12); --ov-hover:rgba(255,255,255,.10);
  --ov-menu:rgba(8,13,16,.96);
  --ov-canli:#F2645A; --ov-bekle:#F0A93B; --ov-ok:#4ED07F;

  color-scheme:dark;
}

/* ==========================================================================
   AÇIK (BEYAZ) TEMA
   Kontrast oranlari hesaplandi; etkin normal metin ciftlerinin HEPSI
   WCAG AA (4,5:1) uzerinde. Video alani ve video USTU katmanlar (--ov-*)
   bilerek koyu kalir: altlarinda goruntu var.
   ========================================================================== */
:root[data-tema="acik"]{
  --video:#000;                  /* DEGISMEZ - video alani her temada siyah */
  --z0:#F2F5F7;                  /* sayfa dibi   · yazi 15,70:1 */
  --z1:#FFFFFF;                  /* panel/kart   · yazi 17,19:1 */
  --z2:#F7F9FB;                  /* yukseltilmis · yazi3 5,31:1 */
  --z3:#E9EEF2;                  /* alan/dugme   · yazi 14,72:1 */
  --z4:#DCE4EA;                  /* secili/hover · yazi 13,37:1 */

  --cam:rgba(255,255,255,.82);
  --cam-kenar:rgba(15,29,36,.10);
  --cizgi:rgba(15,29,36,.12);
  --cizgi2:rgba(15,29,36,.22);

  --yazi:#0F1D24; --yazi2:#485964; --yazi3:#5A6A73; --yazi-aktif:#05121A;

  --vurgu:#0B7566;               /* beyazda 5,60:1 okunur teal */
  --vurgu-zit:#FFFFFF;
  --vurgu-sis:rgba(11,117,102,.13);
  --btn-a:#075A4C; --btn-b:#095A4C;
  --isik:0 0 0 1px rgba(11,117,102,.55), 0 0 0 4px rgba(11,117,102,.14);

  --ok:#0D6B3C; --uyari:#8F5100; --tehlike:#B32517; --bilgi:#1F57B5; --secim:#96690A;

  --ust-hover:rgba(15,29,36,.055);
  --ust-aktif:rgba(15,29,36,.10);
  --ust-secili:rgba(11,117,102,.12);
  --zebra:rgba(15,29,36,.035);
  --oyuk:rgba(15,29,36,.045);
  --kaydirici:rgba(15,29,36,.22);
  --izgara:rgba(15,29,36,.05);
  --sheen:rgba(15,29,36,.10);
  --katman:rgba(255,255,255,.96);
  --amb-a:15,140,116; --amb-b:37,99,201;

  /* zaman cizgisi tuvali - zamancizgisi.js bu degiskenleri okur */
  --zc-zemin:#E8EDF0; --zc-surekli:#3C7FA8; --zc-hareket:#157A64; --zc-yogun:#12876F;
  --zc-alarm:#B32517; --zc-yerimi:#96690A; --zc-gelecek:#DCD9E6; --zc-buffer:#0A2C57;
  --zc-yukleniyor:#D6DEE3; --zc-kafa:#0B1D26; --zc-simdi:#0B7566; --zc-cetvel:#465661;
  --zc-cizgi:rgba(15,29,36,.38);

  --golge:0 1px 2px rgba(15,29,36,.06), 0 8px 28px rgba(15,29,36,.10);
  --golge-menu:0 12px 40px rgba(15,29,36,.16), 0 2px 8px rgba(15,29,36,.10);

  color-scheme:light;
}

/* --- degiskene baglanamayan yerler --- */
:root[data-tema="acik"] .rozet.hazir{background:rgba(13,107,60,.10);color:var(--ok);
  border-color:rgba(13,107,60,.30)}
:root[data-tema="acik"] .rozet.isleniyor{background:rgba(143,81,0,.10);color:var(--uyari);
  border-color:rgba(143,81,0,.30)}
:root[data-tema="acik"] .rozet.hata{background:rgba(179,37,23,.10);color:var(--tehlike);
  border-color:rgba(179,37,23,.30)}
:root[data-tema="acik"] .rozet.kuyrukta{background:rgba(31,87,181,.10);color:var(--bilgi);
  border-color:rgba(31,87,181,.30)}
:root[data-tema="acik"] .hata{color:var(--tehlike);background:rgba(179,37,23,.09);
  border-color:rgba(179,37,23,.28)}
:root[data-tema="acik"] .btn.tehlike{border-color:rgba(179,37,23,.38);color:var(--tehlike)}
:root[data-tema="acik"] .btn.tehlike:hover{background:rgba(179,37,23,.10)}
:root[data-tema="acik"] .ilerleme{background:rgba(15,29,36,.10)}
:root[data-tema="acik"] .akis-rozet.dusuk{border-color:rgba(143,81,0,.6);color:var(--uyari)}

/* turkuaz halolar acik zeminde isimaz, leke birakir - kaldirildi */
:root[data-tema="acik"] .marka > svg{filter:none}
:root[data-tema="acik"] .sekme.etkin::after,
:root[data-tema="acik"] .sol-sekme button.etkin::after,
:root[data-tema="acik"] .alt-sekme button.etkin::after,
:root[data-tema="acik"] .ag-kanal.secili::before,
:root[data-tema="acik"] .ag-durum,
:root[data-tema="acik"] .rozet-sayi,
:root[data-tema="acik"] .duzen.etkin,
:root[data-tema="acik"] .ilerleme > i,
:root[data-tema="acik"] [data-yogunluk="kucuk"] .alt-menu button.etkin::before{box-shadow:none}
:root[data-tema="acik"] .btn.birincil{box-shadow:0 4px 12px rgba(11,117,102,.22)}
:root[data-tema="acik"] .btn.birincil:hover{box-shadow:0 6px 16px rgba(11,117,102,.28)}
:root[data-tema="acik"] .giris-logo,
:root[data-tema="acik"] .acilis-mark{
  background:radial-gradient(circle at 50% 30%,rgba(11,117,102,.14),rgba(11,117,102,.04));
  box-shadow:inset 0 0 0 1px rgba(11,117,102,.22), 0 8px 26px rgba(15,29,36,.10)}
/* govde vinyeti acik temada gereksiz koyuluk yapar */
:root[data-tema="acik"] .govde::after{box-shadow:inset 0 0 100px 18px rgba(0,0,0,.35)}

/* MOBIL YATAY: arac cubugu VIDEONUN USTUNE biner - o kapsayicinin icinde
   degiskenleri koyu temaya geri cevir (tek kural, alt secici yok). */
:root[data-tema="acik"] body.yatay[data-yogunluk="kucuk"] .arac-alt{
  --yazi:var(--ov-yazi); --yazi2:rgba(255,255,255,.80); --yazi3:rgba(255,255,255,.68);
  --z3:rgba(4,8,10,.62); --z4:rgba(4,8,10,.80);
  --cizgi:var(--ov-kenar); --cizgi2:var(--ov-kenar); --oyuk:rgba(0,0,0,.35);
  --ust-hover:var(--ov-hover); --ust-aktif:rgba(255,255,255,.16);
  --vurgu:var(--ov-vurgu); --vurgu-zit:var(--ov-vurgu-zit)}

[data-yogunluk="orta"]{ --sol-g:224px; --t-md:12px }
[data-yogunluk="kucuk"]{ --sol-g:0px; --ust-y:52px; --arac-y:46px; --dokun:40px;
  --karo-bosluk:1px }
body.mod-kayit{ --zc-y:116px }
body[data-yogunluk="kucuk"].mod-kayit{ --zc-y:118px }
body.sol-gizli{ --sol-g:0px }

/* ===================== TEMEL ===================== */
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;overflow:hidden}
body{margin:0;color:var(--yazi);font-family:var(--f);font-size:var(--t-md);line-height:1.45;
  -webkit-font-smoothing:antialiased;overscroll-behavior:none;
  background:var(--z0);
  /* ortam ışığı: iki geniş radyal — düz siyah yerine derinlik */
  background-image:
    radial-gradient(1100px 620px at 12% -8%,  rgba(var(--amb-a),.07), transparent 62%),
    radial-gradient(900px 560px at 96% 108%, rgba(var(--amb-b),.06), transparent 60%);
  background-attachment:fixed}
button,input,select,textarea{font:inherit;color:inherit}
/* cift dokunusla sayfa yakinlastirmasi kapali: yakinlastirma videoya ait */
body{touch-action:manipulation}
.dil-sec{height:32px;padding:0 26px 0 9px;font-size:var(--t-xs);font-weight:700;
  font-family:var(--f-mono);letter-spacing:.04em;background-size:9px 6px;
  background-position:right 8px center;min-width:0;width:auto}
[data-yogunluk="kucuk"] .dil-sec{height:34px}
/* mobilde baslik 3 oge: marka, indirme, "..." — surum/dil/tema/cikis menude.
   "s41" rozeti patrona "test surumu" diyor; Yonetim > Durum'da kalir. */
[data-yogunluk="kucuk"] .surum-rozet,[data-yogunluk="kucuk"] #dilSec,
[data-yogunluk="kucuk"] #temaBtn,[data-yogunluk="kucuk"] #cikisBtn{display:none}
[data-yogunluk="kucuk"] .marka span{font-size:16px;font-weight:650}
.ust-acilir{position:absolute;top:calc(var(--ust-y) + var(--guv-ust) - 4px);right:8px;z-index:120;
  background:var(--z2);border:1px solid var(--cizgi2);border-radius:var(--r-lg);
  box-shadow:var(--golge-menu);padding:10px;min-width:210px;display:flex;flex-direction:column;gap:6px}
.ua-baslik{font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:var(--yazi3);
  font-weight:700;padding:4px 4px 0}
.ua-satir{display:flex;gap:6px}
.ua-satir button{flex:1;height:40px;border-radius:var(--r);border:1px solid var(--cizgi);
  background:var(--z3);color:var(--yazi);font-weight:600;cursor:pointer}
.ua-satir button.etkin{background:var(--vurgu);color:var(--vurgu-zit);border-color:transparent}
.ua-cikis{height:44px;border-radius:var(--r);border:1px solid rgba(242,100,90,.4);
  background:none;color:var(--tehlike);font-weight:600;cursor:pointer;margin-top:4px}
.surum-rozet{font-family:var(--f-mono);font-size:10px;color:var(--yazi3);
  border:1px solid var(--cizgi);border-radius:10px;padding:1px 7px;flex:none}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.01em}
.mono,.sayi{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
::selection{background:var(--vurgu-sis);color:var(--yazi-aktif)}
:focus-visible{outline:2px solid var(--vurgu);outline-offset:2px}

/* kaydırma çubukları — ince, sessiz */
*{scrollbar-width:thin;scrollbar-color:var(--kaydirici) transparent}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:var(--kaydirici);border-radius:5px;
  border:2px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.24);background-clip:content-box}
::-webkit-scrollbar-track{background:transparent}

/* ===================== DÜĞMELER ===================== */
.btn{background:var(--z3);border:1px solid var(--cizgi);color:var(--yazi);
  padding:0 14px;height:var(--dokun);border-radius:var(--r);cursor:pointer;font-size:var(--t-sm);
  font-weight:550;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  transition:background var(--gecis),border-color var(--gecis),transform .1s}
.btn:hover{background:var(--z4);border-color:var(--cizgi2)}
.btn:active{transform:scale(.975)}
.btn.kucuk{height:30px;padding:0 11px;font-size:var(--t-xs)}
.btn.tam{width:100%}
.btn.birincil{background:linear-gradient(180deg,var(--vurgu),var(--btn-b));color:var(--vurgu-zit);
  border-color:transparent;font-weight:700;box-shadow:0 6px 18px rgba(47,224,190,.22)}
.btn.birincil:hover{background:linear-gradient(180deg,var(--btn-a),var(--vurgu));
  box-shadow:0 8px 24px rgba(47,224,190,.3)}
.btn.tehlike{border-color:rgba(242,100,90,.4);color:#FFB0A7}
.btn.tehlike:hover{background:rgba(242,100,90,.14)}
.ikon-d{background:none;border:none;color:var(--yazi2);width:var(--dokun);height:var(--dokun);
  border-radius:var(--r);cursor:pointer;display:grid;place-items:center;flex:none;position:relative;
  transition:background var(--gecis),color var(--gecis)}
.ikon-d:hover{background:var(--ust-hover);color:var(--yazi)}
.ikon-d.etkin{background:var(--vurgu-sis);color:var(--vurgu)}
svg{stroke:currentColor;stroke-width:1.75;fill:none;stroke-linecap:round;stroke-linejoin:round;
  display:block}

/* ===================== AÇILIŞ PERDESİ ===================== */
.acilis-sar{position:fixed;inset:0;z-index:300;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:var(--b4);background:var(--z0);
  background-image:radial-gradient(700px 480px at 50% 38%,rgba(47,224,190,.09),transparent 66%)}
.acilis-mark{width:66px;height:66px;border-radius:var(--r-lg);display:grid;place-items:center;
  color:var(--vurgu);
  background:radial-gradient(circle at 50% 30%,rgba(47,224,190,.2),rgba(47,224,190,.05));
  box-shadow:inset 0 0 0 1px rgba(47,224,190,.25),0 8px 26px rgba(47,224,190,.14)}
.acilis-sar .halka{width:20px;height:20px}

/* ===================== GİRİŞ ===================== */
.giris-sar{position:fixed;inset:0;display:grid;place-items:center;padding:var(--b4);z-index:200;
  background:
    radial-gradient(760px 520px at 50% 0%, rgba(var(--amb-a),.10), transparent 66%),
    radial-gradient(620px 460px at 82% 100%, rgba(var(--amb-b),.09), transparent 62%),
    var(--z0);
  overflow:auto}
/* arka planda sessiz izleme ızgarası — sinematik doku */
.giris-sar::before{content:"";position:absolute;inset:-20%;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--izgara) 1px,transparent 1px),
                   linear-gradient(90deg,var(--izgara) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%);
          mask-image:radial-gradient(circle at 50% 42%,#000,transparent 72%)}
.giris-kart{position:relative;width:100%;max-width:392px;background:var(--cam);
  border:1px solid var(--cam-kenar);border-radius:var(--r-xl);padding:32px 28px 26px;
  display:flex;flex-direction:column;gap:var(--b3);box-shadow:var(--golge-menu);
  -webkit-backdrop-filter:blur(24px) saturate(140%);backdrop-filter:blur(24px) saturate(140%)}
.giris-kart::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:inherit;
  background:linear-gradient(90deg,transparent,var(--sheen),transparent)}
.giris-logo{width:66px;height:66px;border-radius:var(--r-lg);display:grid;place-items:center;
  color:var(--vurgu);margin:0 auto 2px;
  background:radial-gradient(circle at 50% 30%,rgba(47,224,190,.2),rgba(47,224,190,.05));
  box-shadow:inset 0 0 0 1px rgba(47,224,190,.25), 0 8px 26px rgba(47,224,190,.14)}
.giris-marka{text-align:center;font-size:11px;letter-spacing:.22em;color:var(--vurgu);
  font-weight:800;margin-top:2px}
.giris-kart h1{text-align:center;font-size:21px;letter-spacing:-.02em}
.parola-sar{position:relative;display:flex}
.parola-sar input{flex:1;padding-right:46px}
.parola-goz{position:absolute;right:2px;top:2px;bottom:2px;width:40px;border:none;background:none;
  color:var(--yazi3);cursor:pointer;border-radius:var(--r);display:grid;place-items:center}
.parola-goz:hover,.parola-goz.etkin{color:var(--vurgu)}
.giris-kart .btn.birincil.tam{height:46px;font-size:var(--t-md)}
.giris-alt{text-align:center;color:var(--yazi3);font-size:var(--t-sm);margin:-8px 0 6px;
  letter-spacing:.02em}
.giris-kart label{display:flex;flex-direction:column;gap:6px;font-size:var(--t-xs);
  color:var(--yazi2);letter-spacing:.05em;text-transform:uppercase;font-weight:600}
.giris-kart input{background:var(--oyuk);border:1px solid var(--cizgi2);border-radius:var(--r);
  padding:11px 13px;font-size:var(--t-lg);color:var(--yazi);letter-spacing:normal;
  text-transform:none;font-weight:400;transition:border-color var(--gecis),box-shadow var(--gecis)}
.giris-kart input:focus{outline:none;border-color:var(--vurgu);box-shadow:var(--isik)}
.cap-sar{display:flex;flex-direction:column;gap:var(--b2)}
.cap-satir{display:flex;gap:var(--b2);align-items:center}
.cap-satir img{border-radius:var(--r-sm);border:1px solid var(--cizgi2);background:#fff;
  flex:none;max-width:100%;height:auto}
.hata{color:#FFB0A7;background:rgba(242,100,90,.1);border:1px solid rgba(242,100,90,.3);
  border-radius:var(--r);padding:9px 12px;font-size:var(--t-sm)}

/* ===================== ÜST ŞERİT ===================== */
.ust{position:absolute;top:0;left:0;right:0;height:var(--ust-y);z-index:100;
  display:flex;align-items:center;gap:var(--b3);padding:0 var(--b3);
  background:var(--cam);border-bottom:1px solid var(--cizgi);
  -webkit-backdrop-filter:blur(20px) saturate(150%);backdrop-filter:blur(20px) saturate(150%)}
.marka{display:flex;align-items:center;gap:9px;flex:none;font-weight:650;letter-spacing:-.01em}
.marka > svg{color:var(--vurgu);filter:drop-shadow(0 0 8px rgba(47,224,190,.4))}
.marka span{color:var(--yazi);font-size:var(--t-md)}
.ust-menu{display:flex;gap:2px;flex:1;margin-left:var(--b2)}
.sekme{background:none;border:none;padding:9px 15px;border-radius:var(--r);cursor:pointer;
  color:var(--yazi2);font-size:var(--t-md);font-weight:550;position:relative;
  transition:color var(--gecis),background var(--gecis)}
.sekme:hover{background:var(--ust-hover);color:var(--yazi)}
.sekme.etkin{color:var(--yazi-aktif)}
.sekme.etkin::after{content:"";position:absolute;left:13px;right:13px;bottom:-9px;height:2px;
  border-radius:2px;background:var(--vurgu);box-shadow:0 0 12px var(--vurgu)}
.ust-sag{display:flex;align-items:center;gap:var(--b1);flex:none}
.kullanici-ad{font-size:var(--t-sm);color:var(--yazi2);white-space:nowrap}
.rozet-sayi{position:absolute;top:3px;right:3px;background:var(--vurgu);color:var(--vurgu-zit);
  border-radius:9px;min-width:16px;height:16px;font-size:9px;font-weight:800;
  display:grid;place-items:center;padding:0 4px;box-shadow:0 0 10px rgba(47,224,190,.5)}

/* ===================== SOL PANEL ===================== */
/* bottom:0 iken sol panel zaman cizgisinin sol 288 pikselini ORTUYORDU:
   tarih gezinme ve yakinlastirma dugmeleri gorunmuyordu. Panel serit
   basladigi yerde biter, zaman cizgisi tam genislikte kalir. */
.sol{position:absolute;top:var(--ust-y);bottom:var(--zc-y);left:0;width:var(--sol-g);z-index:50;
  background:var(--cam);border-right:1px solid var(--cizgi);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;flex-direction:column;overflow:hidden;
  transition:width var(--gecis),transform .24s cubic-bezier(.2,.7,.3,1)}
.sol-sekme{display:flex;height:36px;flex:none;border-bottom:1px solid var(--cizgi);
  padding:0 var(--b1)}
.sol-sekme button{flex:1;background:none;border:none;color:var(--yazi3);font-size:var(--t-sm);
  cursor:pointer;position:relative;padding:0;font-weight:550;transition:color var(--gecis)}
.sol-sekme button:hover{color:var(--yazi2)}
.sol-sekme button.etkin{color:var(--vurgu)}
.sol-sekme button.etkin::after{content:"";position:absolute;left:14%;right:14%;bottom:0;height:2px;
  border-radius:2px 2px 0 0;background:var(--vurgu);box-shadow:0 0 10px var(--vurgu)}
.sol-panel{display:none;flex:1;min-height:0;flex-direction:column}
.sol-panel.etkin{display:flex}
.ara-sar{padding:var(--b2);flex:none}
.ara-kutu{width:100%;background:var(--oyuk);border:1px solid var(--cizgi);
  border-radius:var(--r);padding:9px 12px;font-size:var(--t-sm);
  transition:border-color var(--gecis),box-shadow var(--gecis)}
.ara-kutu::placeholder{color:var(--yazi3)}
.ara-kutu:focus{outline:none;border-color:var(--vurgu);box-shadow:var(--isik)}
.agac{flex:1;overflow-y:auto;overscroll-behavior:contain;padding-bottom:var(--b5)}

.ag-tesis{display:flex;align-items:center;gap:7px;height:32px;padding:0 var(--b2);
  font-size:var(--t-xs);font-weight:750;letter-spacing:.1em;text-transform:uppercase;
  color:var(--yazi3);cursor:pointer;-webkit-user-select:none;user-select:none;
  transition:color var(--gecis)}
.ag-tesis:hover{color:var(--yazi2)}
.ag-tesis .adet,.ag-cihaz .adet{margin-left:auto;font-family:var(--f-mono);font-weight:500;
  letter-spacing:0;font-size:var(--t-xs);color:var(--yazi3);flex:none}
.ag-cihaz{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 var(--b2) 0 17px;
  font-size:var(--t-sm);color:var(--yazi2);cursor:pointer;-webkit-user-select:none;user-select:none;
  border-radius:var(--r-sm);margin:0 var(--b1);transition:background var(--gecis),color var(--gecis)}
.ag-cihaz:hover{background:var(--ust-hover);color:var(--yazi)}
.ag-ok{width:12px;height:12px;flex:none;transition:transform var(--gecis);color:var(--yazi3)}
.ag-tesis.acik .ag-ok,.ag-cihaz.acik .ag-ok{transform:rotate(90deg)}
.ag-govde{display:none}
.acik + .ag-govde{display:block}
.ag-kanal{display:flex;align-items:center;gap:8px;min-height:30px;padding:3px var(--b2) 3px 28px;
  font-size:var(--t-sm);color:var(--yazi2);cursor:pointer;position:relative;
  transition:background var(--gecis),color var(--gecis)}
.ag-kanal::before{content:"";position:absolute;left:0;top:3px;bottom:3px;width:2px;
  border-radius:0 2px 2px 0;background:transparent;transition:background var(--gecis)}
.ag-kanal:hover{background:var(--ust-hover);color:var(--yazi)}
.ag-kanal.duvarda{color:var(--vurgu)}
.ag-kanal.secili{background:var(--ust-secili);color:var(--yazi)}
.ag-kanal.secili::before{background:var(--vurgu);box-shadow:0 0 10px var(--vurgu)}
.ag-kanal .no{font-family:var(--f-mono);font-size:var(--t-xs);color:var(--yazi3);
  width:20px;flex:none;text-align:right}
.ag-kanal .ad{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ag-kanal .kirinti{font-size:10px;color:var(--yazi3);display:block;line-height:1.35;
  overflow:hidden;text-overflow:ellipsis}
.ag-durum{width:7px;height:7px;border-radius:50%;flex:none;background:var(--ok);
  box-shadow:0 0 7px rgba(78,208,127,.6)}
.ag-durum.d-izleniyor{background:var(--vurgu);box-shadow:0 0 8px var(--vurgu)}
.ag-durum.d-cevrimdisi{background:var(--uyari);box-shadow:none}
.ag-durum.d-yetkisiz{background:var(--yazi3);box-shadow:none}
.ag-eylem{display:none;gap:1px;margin-left:auto;flex:none}
.ag-kanal:hover .ag-eylem{display:flex}
/* Cihaz satirindaki "tumunu ac" dugmesi HER ZAMAN gorunur: hover'a
   baglaninca ne dokunmatikte ne masaustunde kesfedilebiliyordu. */
.ag-cihaz .ag-eylem{display:flex;opacity:.5;transition:opacity var(--gecis)}
.ag-cihaz:hover .ag-eylem{opacity:1}
.ag-eylem button{background:none;border:none;color:var(--yazi3);width:26px;height:26px;
  border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;
  transition:background var(--gecis),color var(--gecis)}
.ag-eylem button:hover{background:var(--ust-aktif);color:var(--vurgu)}
.ag-kanal.gorunum{padding-left:var(--b3)}
.ag-kanal.gorunum .ag-durum{background:var(--vurgu);box-shadow:0 0 7px var(--vurgu)}
.ag-bos{padding:30px 16px;text-align:center;color:var(--yazi3);font-size:var(--t-sm);
  line-height:1.6}
.ag-bolum{height:28px;display:flex;align-items:center;padding:0 var(--b2);font-size:var(--t-xs);
  font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--yazi3)}
.sol-ortu{display:none}

/* ===================== GÖVDE / SAHNE ===================== */
/* Izgara: satir 1 = duvar (ortali), satir 2 = sayfa noktalari seridi.
   Noktalar onceden duvarin USTUNE (bottom:8px) biniyordu: alt sira karolarin
   ad/rozet seridiyle ayni bantta kaliyor, "Kamera4 DV[1/8]" gibi kirik
   okunuyordu (4 inceleme gozu bagimsiz gordu). Artik kendi 18px satirinda. */
.govde{position:absolute;top:var(--ust-y);left:var(--sol-g);right:0;
  bottom:calc(var(--arac-y) + var(--zc-y));background:var(--video);overflow:hidden;
  display:grid;grid-template-rows:1fr auto;place-items:center;
  transition:left var(--gecis),bottom var(--gecis)}
/* sinematik vinyet — kenarlarda hafif karartma, görüntüyü öne çıkarır */
.govde::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 140px 26px rgba(0,0,0,.55)}

/* Duvarın PİKSEL ölçüsü JS'ten gelir (duvarBoyutla). CSS aspect-ratio
   yükseklikten büyümüyordu: 2560px ekranda duvar ortada minik kalıyordu. */
.duvar{--oran:1.7778;display:grid;gap:var(--karo-bosluk);background:#000;
  grid-template-columns:repeat(var(--kol),1fr);
  grid-template-rows:repeat(var(--sat),1fr)}
.d-1{--kol:1;--sat:1}
.d-4{--kol:2;--sat:2}
.d-9{--kol:3;--sat:3}
.d-16{--kol:4;--sat:4}
.d-1p5{--kol:3;--sat:3}
.d-1p5 .karo:first-child{grid-area:span 2 / span 2}
.d-32{--kol:8;--sat:4}
body.duvar-doldur .karo video,body.duvar-doldur .karo img{object-fit:cover}
body.duvar-doldur #pbKabuk video{object-fit:cover}

.karo{position:relative;background:#000;overflow:hidden;min-width:0;min-height:0;cursor:pointer;
  border-radius:2px}
.karo video,.karo img{width:100%;height:100%;object-fit:contain;display:block;background:#000;
  transform-origin:center center}
/* On izleme: anlik goruntu altta durur, video hazir olunca ustu kapatir.
   Karo asla bos siyah kalmaz. */
.karo img.on-izleme{position:absolute;inset:0;z-index:0;filter:saturate(.92)}
.karo video{position:relative;z-index:1;opacity:0;transition:opacity .22s ease-out}
.karo.video-hazir video{opacity:1}
.karo:not(.on-izlemeli) video{opacity:1}
/* yukleniyor katmani: on izleme varken saydam, yoksa dolu */
.karo-kat.ince{background:rgba(4,7,9,.55);gap:8px}
.kat-yazi{font-size:var(--t-xs);color:var(--ov-yazi2);letter-spacing:.02em}
/* kucuk karoda yazi sigmaz, yalniz halka kalsin */
@container (max-width: 190px){ .kat-yazi{display:none} }
.karo{container-type:inline-size}
.karo.on-izlemeli .karo-kat.ince{background:transparent}
.karo.on-izlemeli .karo-kat.ince .halka{width:26px;height:26px;
  border-color:rgba(255,255,255,.25);border-top-color:var(--vurgu)}
/* inset box-shadow videonun (z-index:1) ALTINDA kaliyordu, secim hic gorunmuyordu */
.karo.secili{z-index:3}
.karo.secili::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;
  box-shadow:inset 0 0 0 2px var(--ov-vurgu), inset 0 0 18px rgba(47,224,190,.18)}
.karo-bos{background:
  repeating-linear-gradient(45deg,rgba(255,255,255,.016) 0 9px,transparent 9px 18px),#040709;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.035)}
.karo-no{position:absolute;top:4px;left:6px;font-family:var(--f-mono);font-size:10px;
  color:rgba(255,255,255,.4);z-index:2;pointer-events:none;letter-spacing:.04em}
.karo-etiket{position:absolute;left:0;right:0;bottom:0;min-height:30px;display:flex;
  align-items:flex-end;gap:6px;padding:0 7px 5px;font-size:var(--t-xs);color:#fff;z-index:2;
  pointer-events:none;background:linear-gradient(transparent,rgba(0,0,0,.8))}
.karo-etiket .ad{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:550}
.karo-etiket .cihaz{color:rgba(255,255,255,.5);flex:none}
.karo-etiket .sag{margin-left:auto;display:flex;align-items:center;gap:5px;flex:none}
.akis-rozet{font-family:var(--f-mono);font-size:9px;font-weight:800;letter-spacing:.07em;
  background:rgba(0,0,0,.55);border:1px solid rgba(255,255,255,.12);border-radius:3px;
  padding:1px 4px}
.akis-rozet.dusuk{border-color:rgba(240,169,59,.6);color:#F5C97C}
.karo-nokta{width:6px;height:6px;border-radius:50%;background:var(--ov-ok);
  box-shadow:0 0 7px rgba(78,208,127,.7)}
body.etiket-gizli .karo-etiket{display:none}
.karo-eylem{position:absolute;top:5px;right:5px;z-index:3;display:none;gap:3px}
.karo:hover .karo-eylem{display:flex}
.karo-eylem button{background:rgba(4,8,10,.72);border:1px solid rgba(255,255,255,.1);color:#fff;
  width:29px;height:29px;border-radius:var(--r-sm);cursor:pointer;display:grid;place-items:center;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:.12s}
.karo-eylem button:hover{background:var(--ov-vurgu);color:var(--ov-vurgu-zit);border-color:transparent}
/* bos karo eylem dugmesi (Hik-Connect deseni: bos pencerede buyuk +) */
.karo-ekle{position:absolute;inset:0;width:100%;height:100%;background:none;border:none;
  cursor:pointer;display:grid;place-items:center;color:rgba(255,255,255,.34);
  transition:color var(--gecis),background var(--gecis)}
.karo-ekle span{font-size:clamp(20px,7cqw,40px);font-weight:200;line-height:1;
  width:1.9em;height:1.9em;border-radius:50%;display:grid;place-items:center;
  border:1px solid currentColor}
.karo-ekle:hover{color:var(--ov-vurgu);background:rgba(47,224,190,.06)}
.karo-bos{container-type:inline-size}
/* anlik bit hizi - baglanti sagligi gostergesi */
.karo-etiket .hiz{font-size:9px;color:rgba(255,255,255,.62);letter-spacing:.02em;
  white-space:nowrap}
[data-yogunluk="kucuk"] .karo-etiket .hiz{display:none}
/* kucuk karoda (3x3/4x4) yalniz kamera adi: "Ka... DVR7 SM[1/4]" yerine tek satir ad */
@container (max-width:190px){
  .karo-etiket .cihaz,.karo-etiket .hiz,.karo-etiket .akis-rozet{display:none}
  .karo-etiket{min-height:24px;padding:0 5px 3px}
  .karo-eylem{display:none!important}
}
body.etiket-gizli .karo-etiket .hiz{display:none}

.karo-kat{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:9px;background:rgba(4,7,9,.82);color:var(--ov-yazi2);
  font-size:var(--t-sm);text-align:center;padding:14px;z-index:5}
.karo-kat.hata{color:#FFB0A7}
.karo-kat div{max-width:280px;line-height:1.4}
.halka{width:22px;height:22px;border-radius:50%;border:2px solid rgba(255,255,255,.14);
  border-top-color:var(--ov-vurgu);animation:don .8s linear infinite}
@keyframes don{to{transform:rotate(360deg)}}

/* ---- sayfa gostergesi (duvar penceresi) ---- */
.sayfa-nokta{position:static;width:100%;height:18px;z-index:6;display:flex;
  align-items:center;justify-content:center;gap:13px;pointer-events:none;
  justify-self:stretch;background:#000}
.sayfa-nokta > *{pointer-events:auto}
.s-nokta{width:8px;height:8px;padding:0;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.34);transition:background .15s,transform .15s;
  position:relative}
/* Gorsel 8px, dokunma hedefi 20px. ONCEDEN inset:-9px (25px hedef) ile 13px
   adimda diziliydi: KOMSU NOKTALARIN hedefleri ust uste biniyordu ve 4. noktaya
   basinca 5. nokta yakaliyordu (Playwright "intercepts pointer events" dedi). */
/* gorsel 8px, DOKUNMA alani 24px: parmakla isabet ettirilemiyordu */
.s-nokta::after{content:"";position:absolute;inset:-8px}
.s-nokta.etkin{background:var(--ov-vurgu);transform:scale(1.35);
  box-shadow:0 0 8px rgba(47,224,190,.7)}
.s-yazi{font-family:var(--f-mono);font-size:10px;color:#fff;margin-left:6px;
  background:rgba(4,8,10,.7);border:1px solid var(--ov-kenar);border-radius:10px;
  padding:1px 7px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.duvar{will-change:transform}

/* ===================== ALT ARAÇ ÇUBUĞU ===================== */
.arac-alt{position:absolute;left:var(--sol-g);right:0;bottom:var(--zc-y);height:var(--arac-y);
  z-index:40;display:flex;align-items:center;gap:var(--b2);padding:0 var(--b3);
  background:var(--cam);border-top:1px solid var(--cizgi);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:left var(--gecis),bottom var(--gecis)}
/* Orta bolum KAYAR (sag kenarda solma = kaydirilabilir isareti), sag ikon
   grubu SABIT. Onceden hepsi tek siradaydi: 393px telefonda icerik 555px
   oldugu icin TAM EKRAN dugmesi ekran DISINDA kaliyordu; 768px tablette de
   sayfa 45px yatay tasiyordu. */
.arac-kaydir{display:flex;align-items:center;gap:var(--b2);min-width:0;flex:1;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent)}
.arac-kaydir::-webkit-scrollbar{display:none}
.arac-kaydir > *{flex:none}
.arac-sabit{display:flex;align-items:center;gap:var(--b1);flex:none}
.duzen-sec{display:flex;gap:2px;background:var(--oyuk);padding:3px;border-radius:var(--r);
  border:1px solid var(--cizgi);flex:none}
.duzen{background:none;border:none;color:var(--yazi3);height:28px;min-width:34px;padding:0 8px;
  border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-xs);font-weight:650;
  font-family:var(--f-mono);transition:background var(--gecis),color var(--gecis)}
.duzen:hover{background:var(--ust-hover);color:var(--yazi)}
.duzen.etkin{background:var(--vurgu);color:var(--vurgu-zit);box-shadow:0 0 14px rgba(47,224,190,.3)}
/* Yerel <select> her platformda farkli ciziliyordu (mobilde devasa, koyu
   temada beyaz ok). Kendi kabugumuzu veriyoruz: ok SVG olarak arka planda,
   yerel gorunum kapali. */
select#kaliteSec,.oyn-secim{background-color:var(--z3);border:1px solid var(--cizgi);
  color:var(--yazi);border-radius:var(--r);padding:0 30px 0 10px;height:34px;
  font-size:var(--t-sm);cursor:pointer;-webkit-appearance:none;appearance:none;
  background-repeat:no-repeat;background-position:right 9px center;
  background-size:11px 7px;font-weight:550;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%2393A7B1' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
select#kaliteSec:focus,.oyn-secim:focus{outline:none;border-color:var(--vurgu);
  box-shadow:var(--isik)}
:root[data-tema="acik"] select#kaliteSec,:root[data-tema="acik"] .oyn-secim{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='11' height='7' viewBox='0 0 11 7'><path d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23485964' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/></svg>")}
select#kaliteSec option,.oyn-secim option{background:var(--z1);color:var(--yazi)}
[data-yogunluk="kucuk"] select#kaliteSec{height:36px;font-size:var(--t-md)}
.ayirac{flex:1}
.arac-alt > .ayirac{flex:none;width:var(--b2)}
.durum-yazi{font-size:var(--t-xs);color:var(--yazi3);font-family:var(--f-mono);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}

/* ===================== ZAMAN ÇİZGİSİ ===================== */
.zc-blok{position:absolute;left:0;right:0;bottom:0;height:var(--zc-y);z-index:41;
  background:var(--cam);border-top:1px solid var(--cizgi);overflow:hidden;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  transition:height var(--gecis)}
body:not(.mod-kayit) .zc-blok{border-top:none}
.zc-ust{height:40px;display:flex;align-items:center;gap:var(--b2);padding:0 var(--b3);
  border-bottom:1px solid var(--cizgi);overflow-x:auto;overflow-y:hidden;scrollbar-width:none}
.zc-ust::-webkit-scrollbar{display:none}
.tarih-gez{display:flex;align-items:center;background:var(--oyuk);border:1px solid var(--cizgi);
  border-radius:var(--r);overflow:hidden;flex:none}
.tarih-gez button{background:none;border:none;color:var(--yazi2);height:30px;padding:0 11px;
  cursor:pointer;font-size:var(--t-sm);transition:background var(--gecis)}
.tarih-gez button:hover:not(:disabled){background:var(--ust-hover);color:var(--yazi)}
.tarih-gez button:disabled{opacity:.35;cursor:default}
.tarih-gez button:nth-child(2){font-weight:600;min-width:90px;color:var(--yazi);
  display:inline-flex;align-items:center;gap:6px;justify-content:center}
.zc-yakin{display:flex;align-items:center;gap:2px;background:var(--oyuk);
  border:1px solid var(--cizgi);border-radius:var(--r);padding:0 3px;flex:none}
.zc-yakin button{background:none;border:none;color:var(--yazi2);width:26px;height:28px;
  cursor:pointer;font-size:15px;border-radius:var(--r-sm)}
.zc-yakin button:hover{background:var(--ust-hover);color:var(--vurgu)}
.zc-yakin span{font-size:var(--t-xs);color:var(--yazi3);font-family:var(--f-mono);min-width:48px;
  text-align:center}
.cip{background:none;border:1px solid transparent;color:var(--yazi3);height:28px;padding:0 11px;
  border-radius:14px;cursor:pointer;font-size:var(--t-xs);white-space:nowrap;flex:none;
  transition:all var(--gecis)}
.cip:hover{color:var(--yazi);background:var(--ust-hover)}
.cip.etkin{color:var(--vurgu);border-color:rgba(47,224,190,.34);background:var(--vurgu-sis)}
.zc-tuval{display:block;width:100%;height:calc(var(--zc-y) - 40px);touch-action:none;
  cursor:crosshair}
.zc-anahtar{display:flex;gap:var(--b3);font-size:var(--t-xs);color:var(--yazi3);flex:none;
  white-space:nowrap}
.zc-anahtar i{width:9px;height:9px;border-radius:2px;display:inline-block;margin-right:5px;
  vertical-align:-1px}

/* ===================== OYNATICI KATMANI ===================== */
.oyn-kabuk{position:absolute;inset:0;background:#000;display:flex;align-items:center;
  justify-content:center;overflow:hidden}
.oyn-kabuk video{width:100%;height:100%;object-fit:contain;background:#000;
  transform-origin:center center}
/* Rozet SAG ustte: NVR'in yaktigi tarih damgasi hep sol ustte, pili oraya
   koymak damgayi kapatiyordu ("...95" kaliyordu). Tam ekranda ust serit var,
   orada seridin altina iner. */
.oyn-durum{position:absolute;top:10px;left:auto;right:12px;z-index:6;display:flex;align-items:center;gap:7px;
  background:rgba(4,8,10,.7);border:1px solid rgba(255,255,255,.09);border-radius:20px;
  padding:4px 11px;font-size:10px;color:#e9f2f4;font-weight:700;letter-spacing:.09em;
  pointer-events:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.oyn-durum .nokta{width:6px;height:6px;border-radius:50%;background:var(--ov-bekle)}
.oyn-durum.canli .nokta{background:var(--ov-canli);box-shadow:0 0 9px var(--ov-canli);
  animation:nabiz 2s infinite}
@keyframes nabiz{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.82)}}
.oyn-yan{position:absolute;right:10px;top:50%;transform:translateY(-50%);z-index:6;
  display:flex;flex-direction:column;gap:5px;transition:opacity .22s}
.oyn-d{background:rgba(4,8,10,.62);border:1px solid rgba(255,255,255,.1);color:#e9f2f4;
  width:var(--dokun);height:var(--dokun);border-radius:var(--r);display:grid;place-items:center;
  cursor:pointer;flex:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:.14s}
.oyn-d:hover{background:var(--ov-vurgu);color:var(--ov-vurgu-zit);border-color:transparent}
.oyn-d.etkin{background:var(--ov-vurgu-koyu);color:#eafffb;border-color:rgba(47,224,190,.5)}
.oyn-d.etiketli{font-size:var(--t-xs);font-weight:800;font-family:var(--f-mono)}
.oyn-alt{position:absolute;left:0;right:0;bottom:0;z-index:6;display:flex;align-items:center;
  gap:var(--b2);padding:30px 14px calc(12px + var(--guv-alt));transition:opacity .22s;
  background:linear-gradient(transparent,rgba(2,5,7,.9))}
.oyn-bosluk{flex:1}
.atla-d{position:relative;background:rgba(4,8,10,.62);border:1px solid rgba(255,255,255,.1);
  color:#e9f2f4;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  cursor:pointer;flex:none;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:.14s}
.atla-d:hover{background:var(--ov-vurgu);color:var(--ov-vurgu-zit);border-color:transparent}
.atla-d b{position:absolute;font-size:9px;font-weight:800;bottom:9px}
.takvim-ikon{opacity:.8}
.anlik-saat{cursor:pointer}
.anlik-saat{font-family:var(--f-mono);font-size:var(--t-saat);font-weight:650;color:#fff;
  background:rgba(4,8,10,.74);border:1px solid rgba(255,255,255,.1);border-radius:22px;
  padding:6px 16px;font-variant-numeric:tabular-nums;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.oyn-kamera-ad{color:#fff;font-size:var(--t-sm);font-weight:600;background:rgba(4,8,10,.66);
  border:1px solid rgba(255,255,255,.09);border-radius:var(--r);padding:6px 12px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32vw;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.gizli-kontrol .oyn-yan,.gizli-kontrol .oyn-alt,.gizli-kontrol .tam-ust{opacity:0;
  pointer-events:none}
.gizli-kontrol{cursor:none}
.oyn-hiz-menu{position:absolute;right:calc(var(--dokun) + 18px);top:50%;
  transform:translateY(-50%);z-index:8;background:var(--ov-menu);border:1px solid var(--ov-kenar);
  border-radius:var(--r);padding:5px;display:flex;flex-direction:column;gap:2px;min-width:74px;
  box-shadow:var(--golge-menu);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.oyn-hiz-menu button{background:none;border:none;color:var(--ov-yazi);padding:7px 12px;
  border-radius:var(--r-sm);cursor:pointer;font-size:var(--t-sm);text-align:left;
  font-family:var(--f-mono)}
.oyn-hiz-menu button:hover{background:var(--ov-hover)}
.oyn-hiz-menu button.etkin{background:var(--ov-vurgu-koyu);color:#eafffb;font-weight:700}
.oyn-buyuk{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;
  background:rgba(6,11,14,.7);border:1px solid rgba(255,255,255,.18);color:#fff;display:grid;
  place-items:center;cursor:pointer;z-index:5;-webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);transition:.16s}
.oyn-buyuk:hover{background:var(--ov-vurgu);color:var(--ov-vurgu-zit);transform:scale(1.06)}

/* yakınlaştırma göstergesi (canlı + kayıt ortak) */
.zoom-rozet{position:absolute;top:44px;right:10px;z-index:7;font-family:var(--f-mono);
  font-size:var(--t-xs);font-weight:700;color:#fff;background:rgba(4,8,10,.74);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:3px 10px;pointer-events:none;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}

/* ===================== TAM EKRAN ===================== */
.tam-ekran{position:fixed;inset:0;z-index:120;background:#000;display:flex;flex-direction:column}
.tam-kabuk{position:relative;flex:1;display:flex;align-items:center;justify-content:center;
  min-height:0;overflow:hidden}
/* mobil dikey: video ust seridin altina yaslanir, ipucu alttaki bosluga */
body:not(.yatay)[data-yogunluk="kucuk"] .tam-kabuk{align-items:flex-start;
  padding-top:calc(60px + var(--guv-ust))}
body:not(.yatay)[data-yogunluk="kucuk"] .tam-kabuk video{height:auto;max-height:100%}
body:not(.yatay)[data-yogunluk="kucuk"] .tam-kabuk .oyn-durum{top:calc(68px + var(--guv-ust))}
.tam-ipucu{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);z-index:8;
  display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:var(--r-lg);
  background:rgba(4,8,10,.78);border:1px solid var(--ov-kenar);color:#fff;font-size:var(--t-sm);
  max-width:86%;text-align:left;animation:gir .25s ease-out}
.tam-ipucu svg{flex:none;color:var(--ov-vurgu)}
/* mobil dikeyde kontroller (Kapat dahil) HIC gizlenmez */
body:not(.yatay)[data-yogunluk="kucuk"] .gizli-kontrol .tam-ust{opacity:1;pointer-events:auto}
.tam-kabuk video{width:100%;height:100%;object-fit:contain;background:#000;
  transform-origin:center center}
.tam-ust{position:absolute;top:0;left:0;right:0;z-index:6;display:flex;
  justify-content:space-between;align-items:center;gap:10px;
  padding:calc(11px + var(--guv-ust)) 12px 11px;transition:opacity .22s;
  background:linear-gradient(rgba(2,5,7,.9),transparent)}
.tam-baslik-sar{display:flex;align-items:center;gap:9px;color:#fff;font-size:var(--t-md);
  font-weight:600;min-width:0}
.tam-baslik-sar > span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tam-ust-sag{display:flex;align-items:center;gap:5px;flex:none}
/* Kalite/durum yazisi tum alt seridi kapliyor; pointer-events:none SART -
   yoksa uzerine denk gelen dugmelerin (canli duraklat) tiklamasini YUTAR
   (olculdu: elementFromPoint -> tamDurum, dugme calismiyordu). */
.tam-alt{position:absolute;left:0;right:0;bottom:0;z-index:6;pointer-events:none;
  padding:8px 12px calc(8px + var(--guv-alt));font-size:var(--t-xs);
  color:rgba(233,242,244,.55);text-align:center;font-family:var(--f-mono);
  background:linear-gradient(transparent,rgba(2,5,7,.82))}
.tam-alt button,.tam-alt a{pointer-events:auto}     /* icindeki "yeniden dene" tiklanabilir kalsin */

/* tam ekranda ust serit basligi solda; rozet seridin altinda solda */
.tam-kabuk .oyn-durum{top:calc(56px + var(--guv-ust));left:12px;right:auto}
/* mobil kayit: sag sutun 4 dugme, ustten hizali (240px videoya 7x45 sigmiyordu) */
[data-yogunluk="kucuk"] #pbZoom,[data-yogunluk="kucuk"] #pbDoldur{display:none}
[data-yogunluk="kucuk"] #pbKabuk .oyn-yan{top:8px;transform:none;gap:6px}
[data-yogunluk="kucuk"] #pbKabuk .oyn-d{width:36px;height:36px}
[data-yogunluk="kucuk"] #pbKabuk .oyn-kamera-ad{display:none}
[data-yogunluk="kucuk"] .zc-kamera{display:inline-block}
[data-yogunluk="kucuk"] .zc-yakin{display:none}
[data-yogunluk="kucuk"] .cip{flex:1;height:36px;text-align:center;padding:0 4px}
[data-yogunluk="kucuk"] .tarih-gez button{height:36px}
[data-yogunluk="kucuk"] .tarih-gez button:first-child,
[data-yogunluk="kucuk"] .tarih-gez button:last-child{min-width:40px;font-size:20px}
.zc-kamera{display:none;font-weight:600;font-size:var(--t-sm);color:var(--yazi);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:38vw;flex:none}

/* ---- klip oynatici: VOD oldugu icin sarma cubugu var ---- */
.klip-saat{color:#fff;font-size:var(--t-sm);font-weight:600;background:rgba(4,8,10,.7);
  border:1px solid var(--ov-kenar);border-radius:var(--r);padding:5px 10px;white-space:nowrap;
  flex:none}
.klip-cubuk{flex:1;min-width:80px;height:26px;background:none;-webkit-appearance:none;
  appearance:none;cursor:pointer;margin:0}
.klip-cubuk::-webkit-slider-runnable-track{height:5px;border-radius:3px;
  background:rgba(255,255,255,.24)}
.klip-cubuk::-moz-range-track{height:5px;border-radius:3px;background:rgba(255,255,255,.24)}
.klip-cubuk::-webkit-slider-thumb{-webkit-appearance:none;width:15px;height:15px;
  border-radius:50%;background:var(--ov-vurgu);margin-top:-5px;
  box-shadow:0 0 10px rgba(47,224,190,.6)}
.klip-cubuk::-moz-range-thumb{width:15px;height:15px;border:none;border-radius:50%;
  background:var(--ov-vurgu);box-shadow:0 0 10px rgba(47,224,190,.6)}
.klip-cubuk:focus{outline:none}
.klip-cubuk:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px rgba(47,224,190,.4)}
[data-yogunluk="kucuk"] .klip-saat{font-size:var(--t-xs);padding:4px 8px}
[data-yogunluk="kucuk"] #klipAlt{flex-wrap:wrap}
[data-yogunluk="kucuk"] #klipAlt .klip-cubuk{order:-1;flex-basis:100%;min-width:0}

/* ===================== TAM SAYFA / KART / TABLO ===================== */
/* z-index 55 > .sol(50): mobilde kamera listesi tam sayfanin USTUNE ciziliyordu */
.tam-sayfa{position:absolute;top:var(--ust-y);left:var(--sol-g);right:0;bottom:0;z-index:55;
  background:var(--z0);overflow:auto;padding:var(--b4)}
.alt-sekme{display:flex;gap:2px;border-bottom:1px solid var(--cizgi);margin-bottom:var(--b4);
  overflow-x:auto;scrollbar-width:none}
.alt-sekme::-webkit-scrollbar{display:none}
.alt-sekme button{background:none;border:none;color:var(--yazi3);padding:10px 15px;cursor:pointer;
  font-size:var(--t-sm);font-weight:550;position:relative;white-space:nowrap;
  transition:color var(--gecis)}
.alt-sekme button:hover{color:var(--yazi2)}
.alt-sekme button.etkin{color:var(--vurgu)}
.alt-sekme button.etkin::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;
  height:2px;background:var(--vurgu);border-radius:2px;box-shadow:0 0 10px var(--vurgu)}
.y-panel{display:none}
.y-panel.etkin{display:block}
.arac-cubugu{display:flex;align-items:center;gap:var(--b2);margin-bottom:var(--b3);flex-wrap:wrap}
.bolum-baslik{font-size:var(--t-xl);flex:1;letter-spacing:-.02em}
.kart-liste{display:grid;gap:var(--b2)}
.kart{background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r-lg);
  padding:13px 15px;display:flex;gap:13px;align-items:center;flex-wrap:wrap;
  transition:border-color var(--gecis),background var(--gecis)}
.kart:hover{border-color:var(--cizgi2);background:var(--z2)}
.kart .bilgi{flex:1;min-width:180px}
.kart .baslik{font-weight:600}
.kart .alt{font-size:var(--t-xs);color:var(--yazi3);margin-top:3px;font-family:var(--f-mono)}
.rozet{display:inline-block;padding:3px 10px;border-radius:11px;font-size:var(--t-xs);
  font-weight:650;white-space:nowrap}
.rozet.hazir{background:rgba(78,208,127,.13);color:#8CE8AE;border:1px solid rgba(78,208,127,.32)}
.rozet.isleniyor{background:rgba(240,169,59,.13);color:#F5C97C;border:1px solid rgba(240,169,59,.32)}
.rozet.hata{background:rgba(242,100,90,.13);color:#FFB0A7;border:1px solid rgba(242,100,90,.32)}
.rozet.kuyrukta{background:rgba(91,141,239,.13);color:#A9C3F7;border:1px solid rgba(91,141,239,.32)}
.ilerleme{height:4px;background:rgba(255,255,255,.08);border-radius:2px;overflow:hidden;
  width:100%;margin-top:7px}
.ilerleme > i{display:block;height:100%;background:var(--vurgu);border-radius:2px;
  transition:width .3s;box-shadow:0 0 10px var(--vurgu)}
.bos-durum{padding:56px 20px;text-align:center;color:var(--yazi3)}
.tablo-sar{overflow-x:auto;border:1px solid var(--cizgi);border-radius:var(--r-lg);
  background:var(--z1)}
table{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:520px}
th{text-align:left;padding:11px 13px;color:var(--yazi3);font-weight:650;font-size:var(--t-xs);
  letter-spacing:.09em;text-transform:uppercase;border-bottom:1px solid var(--cizgi);
  white-space:nowrap;position:sticky;top:0;background:var(--z2);z-index:1}
td{padding:10px 13px;border-bottom:1px solid var(--cizgi);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:var(--zebra)}
.soluk{color:var(--yazi3)}
.kucuk-yazi{font-size:var(--t-xs)}
.olcum{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:var(--b2);
  margin-bottom:var(--b4)}
.kutu{background:var(--z1);border:1px solid var(--cizgi);border-radius:var(--r-lg);padding:14px}
.kutu .etiket{font-size:var(--t-xs);color:var(--yazi3);letter-spacing:.07em;
  text-transform:uppercase;font-weight:600}
.kutu .deger{font-size:23px;font-weight:650;margin-top:5px;font-family:var(--f-mono);
  letter-spacing:-.02em}
.giris-alan{background:var(--z3);border:1px solid var(--cizgi);border-radius:var(--r);
  padding:8px 11px;font-size:var(--t-sm);width:100%}
.giris-alan:focus{outline:none;border-color:var(--vurgu);box-shadow:var(--isik)}

/* ===================== BİLDİRİM ===================== */
.bildirim-sar{position:fixed;right:var(--b4);bottom:var(--b4);z-index:300;display:flex;
  flex-direction:column;gap:var(--b2);align-items:flex-end;pointer-events:none}
.bildirim{background:var(--katman);border:1px solid var(--cizgi2);border-radius:var(--r);
  padding:11px 16px;box-shadow:var(--golge-menu);max-width:360px;font-size:var(--t-sm);
  animation:gir .22s cubic-bezier(.2,.7,.3,1);transition:opacity .25s;
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
@keyframes gir{from{opacity:0;transform:translateY(10px) scale(.97)}}
.bildirim.iyi{border-color:rgba(78,208,127,.45)}
.bildirim.kotu{border-color:rgba(242,100,90,.45)}

/* ==========================================================================
   DOKUNMATİK — hover yok. Gizli düğmeler burada KALICI olarak açılır.
   Bu blok olmadan telefonda karo düğmelerine (tam ekran, resim, kayıt,
   kapat) ve ağaç eylemlerine ulaşmanın HİÇBİR yolu yoktu.
   ========================================================================== */
@media (hover:none){
  /* Karo dugmelerini TUM karolarda acmak kucuk ekranda goruntuyu tamamen
     kapatiyordu. Yalniz SECILI karoda gorunur: bir kez dokun -> secilir ve
     dugmeler cikar; cift dokun -> tam ekran. */
  .karo.secili .karo-eylem{display:flex}
  .ag-eylem{display:flex}
  .ag-eylem button{width:34px;height:34px}
  .karo-eylem{gap:8px;top:5px;right:5px}
  .karo-eylem button{width:40px;height:40px}
  .karo-eylem button[data-e="kapat"]{margin-left:8px}
  .karo.secili{box-shadow:inset 0 0 0 2px var(--vurgu)}
  .oyn-d:hover,.atla-d:hover,.karo-eylem button:hover,.btn:hover,.ikon-d:hover,
  .duzen:hover,.cip:hover,.kart:hover{background:none;color:inherit;border-color:inherit}
  .btn:hover{background:var(--z3)}
  .duzen.etkin:hover{background:var(--vurgu);color:var(--vurgu-zit)}
  .oyn-d:active,.atla-d:active,.karo-eylem button:active{background:var(--ov-vurgu);
    color:var(--ov-vurgu-zit)}
  .btn:active,.ikon-d:active,.duzen:active,.cip:active{background:var(--ust-aktif)}
}

/* ==========================================================================
   MOBİL — masaüstü düzeninin sıkıştırılmışı DEĞİL, ayrı bir yerleşim.
   Tek sütun akış: sahne üstte oranına oturmuş, kamera listesi ANA içerik,
   altta gezinme. Sol panel çekmece olmaktan çıkar.
   ========================================================================== */
.alt-menu{display:none}

[data-yogunluk="kucuk"] #uygulama{position:absolute;inset:0;display:flex;flex-direction:column;
  overflow:hidden}
[data-yogunluk="kucuk"] .ust{position:relative;order:1;flex:none;height:auto;
  min-height:calc(var(--ust-y) + var(--guv-ust));padding:var(--guv-ust) var(--b2) 0;gap:var(--b2)}
[data-yogunluk="kucuk"] .ust-menu{display:none}
/* .ust-menu'nun flex:1'i kaybolunca sag taraf sola yapisiyordu. */
[data-yogunluk="kucuk"] .marka{flex:1;min-width:0}
[data-yogunluk="kucuk"] .marka span{display:block;font-size:var(--t-md);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-yogunluk="kucuk"] .kullanici-ad{display:none}
[data-yogunluk="kucuk"] #solAcKapat{display:none}

[data-yogunluk="kucuk"] .govde{position:relative;order:2;flex:none;inset:auto;
  height:var(--sahne-y,211px);width:100%}
[data-yogunluk="kucuk"] .govde::after{box-shadow:inset 0 0 70px 12px rgba(0,0,0,.5)}
[data-yogunluk="kucuk"] .arac-alt{position:relative;order:3;flex:none;inset:auto;
  height:var(--arac-y);overflow:hidden;border-bottom:1px solid var(--cizgi)}
[data-yogunluk="kucuk"] .arac-alt::-webkit-scrollbar{display:none}
/* .arac-kaydir HARIC: onu dondurursak icerik 547px kalip tasiyor ve
   tam ekran dugmesi ekran disina cikiyor. */
[data-yogunluk="kucuk"] .arac-alt > *:not(.arac-kaydir){flex:none}
[data-yogunluk="kucuk"] .arac-kaydir > *{flex:none}
[data-yogunluk="kucuk"] .ayirac{flex:1;min-width:var(--b2)}
[data-yogunluk="kucuk"] .durum-yazi{display:none}
/* 393px'e sigdirma: "Kalite: C" diye kesiliyordu. Kisa etiket + ikon duraklat +
   etiket-gizle mobilde yok -> kaydirma gerekmez. */
.yalniz-mobil{display:none}
[data-yogunluk="kucuk"] .yalniz-mobil{display:grid}
[data-yogunluk="kucuk"] #duraklatBtn,[data-yogunluk="kucuk"] #etiketGizle{display:none}
[data-yogunluk="kucuk"] .arac-sabit .ikon-d{width:36px;height:36px}
[data-yogunluk="kucuk"] select#kaliteSec{height:36px;width:76px;padding:0 24px 0 9px;
  background-position:right 7px center}
[data-yogunluk="kucuk"] .duzen{min-width:32px;padding:0 6px}
[data-yogunluk="orta"] .durum-yazi{max-width:170px}
[data-yogunluk="kucuk"] .zc-blok{position:relative;order:4;flex:none;inset:auto}
[data-yogunluk="kucuk"] .sol{position:relative;order:5;flex:1;min-height:0;inset:auto;
  width:100%;transform:none;border-right:none;border-top:1px solid var(--cizgi);
  background:var(--z0);-webkit-backdrop-filter:none;backdrop-filter:none}
/* margin-top:auto ZORUNLU: kolondaki bosluğu #solPanel (flex:1) dolduruyordu;
   Indirmeler/Yonetim tam sayfa acilinca o panel display:none oluyor ve alt menu
   sayfanin ORTASINA cikiyordu (820x1180 tablette olculdu: y=606, olmasi gereken
   y=1122). Otomatik ust bosluk, hangi ogenin gizlendiginden bagimsiz calisir. */
[data-yogunluk="kucuk"] .alt-menu{order:6;flex:none;display:flex;margin-top:auto;
  height:calc(58px + var(--guv-alt));padding-bottom:var(--guv-alt);background:var(--cam);
  border-top:1px solid var(--cizgi);z-index:60;
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px)}
[data-yogunluk="kucuk"] .alt-menu button{flex:1;background:none;border:none;color:var(--yazi3);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  font-size:10px;cursor:pointer;font-weight:600;position:relative;transition:color var(--gecis)}
[data-yogunluk="kucuk"] .alt-menu button.etkin{color:var(--vurgu)}
[data-yogunluk="kucuk"] .alt-menu button.etkin::before{content:"";position:absolute;top:0;
  left:26%;right:26%;height:2px;border-radius:0 0 2px 2px;background:var(--vurgu);
  box-shadow:0 0 10px var(--vurgu)}
[data-yogunluk="kucuk"] .alt-menu button svg{width:21px;height:21px}
[data-yogunluk="kucuk"] body.mod-tamsayfa .sol,body.mod-tamsayfa[data-yogunluk="kucuk"] .sol,
[data-yogunluk="kucuk"] #klipKapat{display:none}

/* TAM SAYFA (Yonetim / Indirmeler) MASAUSTUNDE DE TEK BASINA OLMALI.
   Onceden yalniz mobilde sol panel gizleniyordu: webte yonetime girince kamera
   agaci solda, kayit modundan kalan zaman cizgisi ve arac cubugu altta
   duruyordu (kullanici bildirdi). Bunlar o ekranin isi degil; ustelik
   tiklanabilir kaliyor ve kafa karistiriyorlardi. */
body.mod-tamsayfa .sol,
body.mod-tamsayfa .sol-ortu,
body.mod-tamsayfa .zc-blok,
body.mod-tamsayfa .arac-alt,
body.mod-tamsayfa .sayfa-nokta{display:none!important}
body.mod-tamsayfa .tam-sayfa{left:0}
[data-yogunluk="kucuk"] .alt-sekme{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(90deg,#000 calc(100% - 28px),transparent)}
a.btn{text-decoration:none}
[data-yogunluk="kucuk"] .kart{padding:12px 13px}
[data-yogunluk="kucuk"] .kart .bilgi{flex-basis:100%}
[data-yogunluk="kucuk"] .kart .btn{height:38px;flex:1}
[data-yogunluk="kucuk"] .tam-sayfa{position:absolute;
  top:calc(var(--ust-y) + var(--guv-ust));left:0;right:0;bottom:calc(58px + var(--guv-alt));
  padding:var(--b3)}
[data-yogunluk="kucuk"] .sol-sekme{height:42px}
[data-yogunluk="kucuk"] .ag-kanal{min-height:44px;padding-left:30px}
[data-yogunluk="kucuk"] .ag-cihaz{min-height:44px}
[data-yogunluk="kucuk"] .ag-tesis{height:40px}
[data-yogunluk="kucuk"] .ara-kutu{padding:11px 13px;font-size:var(--t-md)}
[data-yogunluk="kucuk"] .atla-d{width:48px;height:48px}
[data-yogunluk="kucuk"] .anlik-saat{font-size:17px;padding:6px 13px}
[data-yogunluk="kucuk"] .oyn-kamera-ad{max-width:40vw}
[data-yogunluk="kucuk"] .oyn-alt{padding:26px 10px 10px;gap:6px}
[data-yogunluk="kucuk"] .zc-anahtar{display:none}
[data-yogunluk="kucuk"] .bildirim-sar{left:var(--b3);right:var(--b3);
  bottom:calc(68px + var(--guv-alt));align-items:stretch}
[data-yogunluk="kucuk"] .bildirim{max-width:none}
/* mobilde 16 / 32 / 1+5 ızgarasında karo 60px altına düşer — kullanılamaz */
/* 16'lik telefonda da acik (kullanici istedi). 32 ve 1+5 kapali: karo 50px
   altina duser ve sayfalama zaten daha fazlasini geziyor. */
[data-yogunluk="kucuk"] .duzen[data-n="32"],
[data-yogunluk="kucuk"] .duzen[data-n="1p5"]{display:none}
[data-yogunluk="kucuk"] .sayfa-nokta{height:16px}

/* Arac cubugu tasiyor: kaydirilabilir oldugu GORUNSUN (gizli kaydirma
   cubugu yuzunden kullanicilar sagdaki dugmeleri bulamiyordu). */
[data-yogunluk="kucuk"] .zc-ust{
  -webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent);
          mask-image:linear-gradient(90deg,#000 calc(100% - 22px),transparent)}

/* --- mobil yatay: sinematik tam ekran. Çerçeve videoyu yemez. ---
   ONEMLI: yatayda ust serit ve alt menu gizlenince mod degistirme, cikis ve
   indirmeler ERISILEMEZ kaliyordu. `yatay-menu` sinifi bunlari geri getirir;
   arac cubugundaki menu dugmesi ac/kapa yapar. */
body.yatay[data-yogunluk="kucuk"] .ust,
body.yatay[data-yogunluk="kucuk"] .sol,
body.yatay[data-yogunluk="kucuk"] .alt-menu{display:none}
body.yatay[data-yogunluk="kucuk"].yatay-menu .ust{display:flex;position:absolute;
  top:0;left:0;right:0;z-index:70;min-height:48px}
body.yatay[data-yogunluk="kucuk"].yatay-menu .alt-menu{display:flex;position:absolute;
  bottom:0;left:0;right:0;z-index:70;height:52px;padding-bottom:0;
  background:rgba(9,14,18,.97);-webkit-backdrop-filter:none;backdrop-filter:none}
/* cubuk acikken alt sira karo etiketleri cubugun arkasindan hayalet gibi
   okunuyordu -> cubuk gorunurken etiketler gizli */
body.yatay[data-yogunluk="kucuk"]:not(.arac-gizli) .karo-etiket{opacity:0}
body.yatay[data-yogunluk="kucuk"] .karo-etiket{transition:opacity .2s}
body.yatay[data-yogunluk="kucuk"] #yatayMenuBtn{width:44px;height:44px}
body.yatay[data-yogunluk="kucuk"].yatay-menu .arac-alt{bottom:52px}
#yatayMenuBtn{display:none}
body.yatay[data-yogunluk="kucuk"] #yatayMenuBtn{display:grid}
body.yatay[data-yogunluk="kucuk"] .govde{flex:1;height:auto;min-height:0}
body.yatay[data-yogunluk="kucuk"] .arac-alt{position:absolute;bottom:0;left:0;right:0;z-index:45;
  background:rgba(9,14,18,.94);border:none;
  -webkit-backdrop-filter:none;backdrop-filter:none;transition:opacity .22s}
body.yatay[data-yogunluk="kucuk"].arac-gizli .arac-alt{opacity:0;pointer-events:none}
body.yatay[data-yogunluk="kucuk"].mod-kayit .zc-blok{position:absolute;bottom:0;left:0;right:0;
  z-index:46}
body.yatay[data-yogunluk="kucuk"].mod-kayit .arac-alt{bottom:var(--zc-y)}

/* ==========================================================================
   MOD KURALLARI — dosyanın SONUNDA ve yüksek özgüllükte.
   Önceki sürümde `.yalniz-kayit{display:none}` 168. satırdaydı ama
   `.oyn-alt{display:flex}` 284. satırda geliyordu: aynı özgüllük, sonraki
   kazanıyordu. Bu yüzden CANLI izlerken kayıt kontrolleri (10 sn ileri/geri,
   `--:--:--` saat, hız menüsü) ekranda duruyordu.
   ========================================================================== */
body:not(.mod-kayit) .yalniz-kayit{display:none!important}
body.mod-kayit .yalniz-canli{display:none!important}
body.mod-kayit #duvar{display:none}
body.mod-kayit .sayfa-nokta{display:none!important}
body.mod-kayit .duzen-sec{display:none}
body:not(.mod-kayit) #pbKabuk{display:none!important}
body.mod-kayit #pbKabuk{display:flex}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* cihazin veremedigi oynatma hizi */
.oyn-hiz-menu button.kapali{opacity:.35;cursor:not-allowed}

/* ---------- yetki ekrani (NVR bazli, mobil uyumlu) ---------- */
.yetki-ust{position:sticky;top:0;z-index:3;background:var(--panel);gap:var(--b2)}
.yetki-ust #yAra{max-width:240px}
.yetki-sayac{color:var(--yazi3);font-size:12px;white-space:nowrap}
.yetki-liste{display:flex;flex-direction:column;gap:2px}
.yetki-satir{display:grid;grid-template-columns:1fr 74px 74px 74px 92px;align-items:center;
  gap:4px;padding:7px 10px;border-radius:8px;background:var(--z2)}
.yetki-satir .ysut{text-align:center}
.yetki-satir .ygun{text-align:right}
.yetki-satir .ygun input{width:76px;text-align:center}
.yetki-baslik{background:none;color:var(--yazi3);font-size:11px;letter-spacing:.4px;
  text-transform:uppercase;padding:2px 10px}
.yetki-tesis{background:var(--z3);font-weight:600}
.yetki-cihaz{background:var(--z3);cursor:pointer}
.yetki-cihaz .yad{display:flex;align-items:center;gap:6px}
.yetki-cihaz .yad i{color:var(--yazi3);font-style:normal;font-size:11px}
.yetki-cihaz .yac{background:none;border:0;color:var(--yazi);padding:2px;cursor:pointer;
  display:flex;transition:transform .15s}
.yetki-grup.acik .yac{transform:rotate(90deg)}
.yetki-kanal{padding-left:26px}
.yetki-kanallar{display:flex;flex-direction:column;gap:2px;margin:2px 0 6px}
/* dokunmasi kolay kutu (mobilde 24px hedef) */
.yk{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:4px}
.yk input{width:20px;height:20px;accent-color:var(--vurgu);cursor:pointer}
[data-yogunluk="kucuk"] .yetki-baslik{display:none}
[data-yogunluk="kucuk"] .yetki-satir{grid-template-columns:1fr;gap:6px;padding:9px 10px}
[data-yogunluk="kucuk"] .yetki-satir .ysut{display:flex;align-items:center;justify-content:space-between;
  text-align:left;border-top:1px solid var(--cizgi);padding-top:5px}
[data-yogunluk="kucuk"] .yetki-satir .ysut::before{content:attr(data-e);color:var(--yazi3);font-size:12px}
[data-yogunluk="kucuk"] .yetki-satir .ygun{text-align:left}
[data-yogunluk="kucuk"] .yetki-satir .ygun input{width:100%}
[data-yogunluk="kucuk"] .yetki-ust{flex-wrap:wrap}
[data-yogunluk="kucuk"] .yetki-ust #yAra{max-width:none;flex:1 1 140px}

/* ---------- dikey yakinlastirma seridi (yukari cek = yakinlas) ----------
   SOL kenarda: sag kenarda .oyn-yan dikey arac cubugu var, serit oraya
   konunca hiz/resim dugmelerinin uzerine biniyordu. */
.zoom-serit{--p:0%;position:absolute;left:10px;top:50%;transform:translateY(-50%);
  z-index:8;display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:8px 6px;border-radius:16px;background:rgba(4,8,10,.62);
  border:1px solid var(--ov-kenar);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  transition:opacity .18s}
.zoom-serit .zs-d{width:30px;height:30px;border-radius:9px;border:1px solid var(--ov-kenar);
  background:rgba(255,255,255,.06);color:var(--ov-yazi);font-size:17px;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
.zoom-serit .zs-d:hover{background:var(--ov-hover)}
.zoom-serit .zs-yol{position:relative;width:26px;height:126px;cursor:ns-resize;
  touch-action:none;display:flex;justify-content:center}
/* ince cizgi (yol) */
.zoom-serit .zs-yol::before{content:"";position:absolute;top:0;bottom:0;width:4px;
  border-radius:3px;background:rgba(255,255,255,.18)}
.zoom-serit .zs-dolgu{position:absolute;bottom:0;width:4px;height:var(--p);
  border-radius:3px;background:var(--ov-vurgu);opacity:.85}
.zoom-serit .zs-tut{position:absolute;bottom:calc(var(--p) - 7px);width:18px;height:14px;
  border-radius:7px;background:var(--ov-yazi);box-shadow:0 1px 4px rgba(0,0,0,.5);
  pointer-events:none}
.zoom-serit .zs-yol:focus-visible{outline:2px solid var(--ov-vurgu);outline-offset:3px;border-radius:8px}
/* kontroller gizlenince serit de gizlensin */
.gizli-kontrol .zoom-serit{opacity:0;pointer-events:none}
/* mobilde daha genis dokunma alani, rozetle cakismasin */
/* MOBIL: kayit oynaticinin govdesi kisa (~290px). Ortalanan serit alttaki
   oynat/duraklat cubuguna, saga alininca da sagdaki dikey arac cubuguna
   biniyordu (ortusme_testi.py yakaladi) -> SOL UST kose, kompakt. */
[data-yogunluk="kucuk"] .zoom-serit{left:6px;right:auto;top:8px;transform:none;
  padding:6px 5px;gap:4px}
[data-yogunluk="kucuk"] .zoom-serit .zs-yol{width:30px;height:78px}
[data-yogunluk="kucuk"] .zoom-serit .zs-d{width:32px;height:32px}
/* karo icindeki kucuk oynaticilarda serit gosterilmez (yer yok) */
.karo .zoom-serit{display:none}

/* acilis perdesinde ag hatasi */
.acilis-durum{margin-top:18px;display:flex;flex-direction:column;align-items:center;gap:10px;
  color:var(--yazi2);font-size:var(--t-s);text-align:center}
.acilis-durum p{margin:0}
/* yonetim > kullanici ekleme formu: etiketli alanlar */
.kul-ekle{flex-wrap:wrap;align-items:flex-end}
.kul-ekle .alan{display:flex;flex-direction:column;gap:3px}
.kul-ekle .alan>span{font-size:var(--t-xs);color:var(--yazi3)}
[data-yogunluk="kucuk"] .kul-ekle .alan{flex:1 1 46%}
[data-yogunluk="kucuk"] .kul-ekle .alan input,[data-yogunluk="kucuk"] .kul-ekle .alan select{width:100%}

/* canli tam ekranda duraklatilmis durum: yesil nabiz yerine sari sabit nokta */
.oyn-durum.durdu{color:var(--ov-bekle)}
.oyn-durum.durdu .nokta{background:var(--ov-bekle);animation:none}

/* --- kopan yayin: sessizce "calisiyor" gorunmesin --- */
.karo.akis-bozuk .karo-nokta{background:var(--ov-canli);box-shadow:0 0 8px var(--ov-canli)}
.karo.akis-bozuk .akis-rozet{opacity:.45;text-decoration:line-through}
.karo.akis-bozuk video{filter:grayscale(.7) brightness(.7)}
.oyn-durum.bozuk{color:var(--ov-canli)}
.oyn-durum.bozuk .nokta{background:var(--ov-canli);animation:none}

/* klip sahibi (yalniz yoneticinin listesinde gorunur) */
.klip-sahip{color:var(--vurgu);font-weight:600}