/* ==========================================================================
   v198 — UYGULAMA KABUGU (UYG) ek stilleri. stil.css'ten SONRA yuklenir
   (index.html: v198-kayit.css, v198-zc.css, v198-uyg.css). Yalniz ekleme;
   stil.css'teki kurallar degismedi.
   ========================================================================== */

/* ---------- 1) Canli tam ekran: duvar karosundan ODUNC ONIZLEME (madde 7) ----------
   tamAc, duvarda calisan karonun akisini (MediaStream) #tamVideo'nun USTUNDE ayri bir videoda
   oynatir; #tamVideo ilk kareyi verince kaldirilir. Olcusu #tamVideo ile ayni (anamorfik alt
   akim icin .oran-bilinir kutusu + Doldur). Dokunuslar alttaki kabuga gecer. */
#tamKabuk .tam-onizleme{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:100%;height:100%;object-fit:contain;background:#000;z-index:1;pointer-events:none}
@supports (width:1cqw){
  #tamEkran.oran-bilinir #tamKabuk .tam-onizleme{object-fit:fill;
    width:min(100cqw, 100cqh * var(--kam-oran));height:min(100cqh, 100cqw / var(--kam-oran))}
  body.tam-doldur #tamEkran.oran-bilinir #tamKabuk .tam-onizleme{
    width:max(100cqw, 100cqh * var(--kam-oran));height:max(100cqh, 100cqw / var(--kam-oran))}
}
@supports not (width:1cqw){ body.tam-doldur #tamKabuk .tam-onizleme{object-fit:cover} }
body.tam-doldur #tamEkran:not(.oran-bilinir) #tamKabuk .tam-onizleme{object-fit:cover}
/* onizleme oynarken "Baglaniyor" tam perde degil: alt ortada kucuk rozet (goruntu ortulmesin) */
#tamEkran.onizleme-var #tamYukleniyor{inset:auto auto calc(96px + var(--guv-alt)) 50%;
  transform:translateX(-50%);flex-direction:row;gap:8px;padding:6px 12px;border-radius:20px;
  background:rgba(4,8,10,.66);font-size:var(--t-xs);white-space:nowrap}
#tamEkran.onizleme-var #tamYukleniyor .halka{width:14px;height:14px}

/* ---------- 2) Ana ekran: karoda "Kayittan izle" dugmesi (madde 4) ----------
   Kayda canliyi ACMADAN girilir; yalniz kayit yetkisi olan kamera da kullanilabilir. Karo bir
   <button> oldugu icin kayit dugmesi yanindaki sarmalayicida, sag ustte durur (44 px hedef). */
.ana-kam-sar{position:relative;min-width:0}
.ana-kam-sar > .ana-kam{width:100%}
.ana-kam-kayit{position:absolute;top:0;right:0;z-index:2;width:44px;height:44px;padding:0;border:none;
  background:none;cursor:pointer;display:grid;place-items:center;color:var(--ov-vurgu)}
.ana-kam-kayit > span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  background:rgba(4,8,10,.70);border:1px solid rgba(47,224,190,.55);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ana-kam-kayit:active > span{background:var(--ov-vurgu);color:var(--ov-vurgu-zit)}
.ana-kam-kayit:focus-visible{outline:2px solid var(--ov-vurgu);outline-offset:-4px;border-radius:12px}
/* anlik goruntusu olmayan (yalniz kayit yetkili / goruntu alinamayan) karo: kirik resim yerine duz zemin */
.ana-kam-im.yok{visibility:hidden}
.ana-kam.sadece-kayit{background:var(--z3)}

/* ---------- 3) "Yeni surum hazir" cubugu izlerken kontrollerin ustune binmesin (madde 2) ----------
   Izlerken artik otomatik yenileme yok, cubuk cikiyor: kayitta zaman cizgisi/alt dugmeler,
   tam ekranda alt cubuk ORTULMESIN diye ustte durur. */
body.mod-kayit .guncelle-cubugu{top:calc(var(--ust-y) + var(--guv-ust) + 8px);bottom:auto}
body.tam-canli-acik .guncelle-cubugu{top:calc(64px + var(--guv-ust));bottom:auto}
body.yatay[data-yogunluk="kucuk"].mod-kayit .guncelle-cubugu{top:calc(8px + var(--guv-ust));
  left:calc(60px + env(safe-area-inset-left,0px));right:calc(64px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"].tam-canli-acik .guncelle-cubugu{top:calc(8px + var(--guv-ust));
  left:calc(8px + env(safe-area-inset-left,0px));right:calc(72px + env(safe-area-inset-right,0px))}

/* ---------- 4) PWA "Ana ekrana ekle" cubugu oynaticiyi ortmesin (madde 11) ----------
   v172 yalniz tam ekranlarda gizliyordu; kayit ekraninda 24 saat seridini ve alt menuyu,
   klip oynaticida alt kontrolleri ortuyordu. */
body.mod-kayit .pwa-kur-bar,
#klipOynatici:not([hidden]) ~ .pwa-kur-bar{display:none}

/* ---------- 5) Dokunmatik cihazda ikincil kontroller >= 44 px (madde 11) ----------
   (pointer:coarse) = birincil girdi parmak. Telefonun (kucuk) ortak --dokun'u zaten 44; tablet
   (orta) de 44'e cikar. Genis NOC duzeni (buyuk monitor) bilerek DISARIDA: ince seritleri tasardi. */
@media (pointer:coarse){
  body[data-yogunluk="orta"]{--dokun:44px}
  body:not([data-yogunluk="genis"]) .btn.kucuk{min-height:44px}
  .karo .karo-kat .btn.kucuk{min-height:34px}     /* kucuk karoda hata yazisi + dugme sigsin */
  .oyn-hiz-menu button{min-height:44px;min-width:64px}
  .ss-yon{min-height:44px}
  .ua-satir button{min-height:44px}
  .ben-secenek button{min-height:44px}
  .ana-oyn,.ana-ust .ikon-d{width:44px;height:44px}
  .ana-genislet{min-height:44px}
  .ana-ara-sar .ara-kutu{height:44px}
  .klip-cubuk{height:44px}
  body:not([data-yogunluk="genis"]) .sekme{min-height:44px}
  [data-yogunluk="kucuk"] #tamAlt .oyn-d{width:44px;height:44px}
  [data-yogunluk="kucuk"] .duzen{min-width:44px}
  [data-yogunluk="kucuk"] select#kaliteSec,[data-yogunluk="kucuk"] .oyn-secim,
  [data-yogunluk="orta"] select#kaliteSec,[data-yogunluk="orta"] .oyn-secim{min-height:44px}
  /* (zaman cizgisi basligindaki gun oklari / Bugun / olcek cipleri ve +/- : v198-zc.css) */
}

/* ---------- 6) YATAY telefonda centik / kamera deligi payi (madde 11) ----------
   viewport-fit=cover acik; env(safe-area-inset-*) yalniz canli tam ekranin sag sutununda
   kullaniliyordu. Ust serit, arac cubugu, alt menu, oynatici kontrolleri, zaman cizgisi ve
   yuzen ☰ kenara yapisip centigin altina giriyordu. Insetler 0 iken olculer DEGISMEZ. */
body.yatay[data-yogunluk="kucuk"] .ust{
  padding-left:max(var(--b2), env(safe-area-inset-left,0px));
  padding-right:max(var(--b2), env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"] .arac-alt{
  padding-left:max(var(--b3), env(safe-area-inset-left,0px));
  padding-right:max(var(--b3), env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"] .alt-menu{
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.yatay-menu) #yatayMenuBtn{
  left:calc(8px + env(safe-area-inset-left,0px));top:calc(8px + var(--guv-ust))}
/* kayit oynaticisi (yatay)
   v198 (inceleme): :not(.pb-sozde-tam) — KAYIT'in sozde tam ekrani (v198-kayit.css) #pbKabuk.pb-tam ve
   .zc-blok kutusunu ZATEN centik payi kadar iceri aliyor; bu kurallar o kutunun icindeki dugmelere ve
   zaman cizgisine payi IKINCI kez ekliyordu (yatay iPhone'da ⛶ ile yanlarda ~47-59 px fazla bosluk). */
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbAlt{
  padding-left:calc(10px + env(safe-area-inset-left,0px));
  padding-right:calc(10px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbYan{right:calc(10px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbRozet{right:calc(64px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbHizMenu{
  right:calc(var(--dokun) + 18px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) .zc-blok{
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
@media (max-height:340px){
  body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbRozet{
    right:calc(20px + 4 * var(--dokun) + 18px + env(safe-area-inset-right,0px))}
  body.yatay[data-yogunluk="kucuk"].mod-kayit:not(.pb-sozde-tam) #pbHizMenu{
    right:calc(10px + 3 * var(--dokun) + 18px + env(safe-area-inset-right,0px))}
}
/* yakinlastirma seridi (kayit + canli tam ekran, yatay); sozde tam ekranda kutu zaten iceride (yukari) */
body.yatay[data-yogunluk="kucuk"]:not(.pb-sozde-tam) .zoom-serit{left:calc(6px + env(safe-area-inset-left,0px))}
/* canli tam ekran + klip oynatici (yatay) */
body.yatay[data-yogunluk="kucuk"] .tam-ust{
  padding-left:calc(12px + env(safe-area-inset-left,0px));
  padding-right:calc(12px + env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"] :is(#tamAlt,#klipAlt){
  padding-left:calc(10px + env(safe-area-inset-left,0px));
  padding-right:calc(10px + env(safe-area-inset-right,0px));
  padding-bottom:calc(10px + var(--guv-alt))}
body.yatay[data-yogunluk="kucuk"] .tam-kabuk .oyn-durum{left:calc(12px + env(safe-area-inset-left,0px))}
/* bildirimler ve PWA cubugu */
body.yatay[data-yogunluk="kucuk"] .bildirim-sar{
  left:max(var(--b3), env(safe-area-inset-left,0px));right:max(var(--b3), env(safe-area-inset-right,0px))}
body.yatay[data-yogunluk="kucuk"] .pwa-kur-bar{
  left:max(12px, env(safe-area-inset-left,0px));right:max(12px, env(safe-area-inset-right,0px))}