/* MADDE 69 — BUNDLE AYRISTIRMASI (2026-08-23): bu dosya SITE ekranlarina servis
   edilir (layouts/site.blade.php + layouts/bare.blade.php). Admin-ekrani-ozel
   kurallar + onlarin gerekce yorumlari admin-ek.css'e TASINDI (yalniz
   admin.blade.php yukler) — anonim site ziyaretcisine artik /admin/* rota
   adlarini, ekran gerekcelerini ve ic mimari notlarini anlatan yorumlar
   SIZMAZ. Tasima sinifca YUKSEK GUVEN gerektirdi: bir kural yalniz admin
   ekranlarinda (pages/admin/*.blade.php) KULLANILDIGI DOGRULANMIS bir class'a
   gore secildiyse tasindi; belirsiz/karisik kurallar guvenlik icin BURADA
   birakildi (admin.blade.php bu dosyayi da yukler, kirilma riski yok). */

/* ek.css — theme.css DOKUNULMAZ (KURALLAR §1). Zorunlu eklemeler burada durur
   ve her kuralin var olma gerekcesi yazilidir. */
/* GEREKCE — KURALLAR §8 "dis CDN varligi yasak" + SKILL-GUVENLIK §25 CSP "default-src 'self'":
   React index.html'i uc font ailesini fonts.googleapis.com'dan cekiyordu. Ayni aileler
   self-host'a alindi. Dosyalar DEGISKEN (variable) font olarak kaldi; yalnizca theme.css'in
   gercekten surdugu eksen araliklarina ve Turkce karakter kumesine indirgendi
   (3 dosya / 149 KB — sayfa basi 150 KB butcesi icinde). opsz ekseni korundu,
   boylece tarayicinin otomatik optik boyutlamasi React referansiyla ayni calisir. */

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/fonts/bricolage-var.woff2") format("woff2");
  font-weight: 700 800;  /* --f-display yalnizca 700 ve 800 kullaniyor (81 kural tarandi) */
  font-stretch: 100%;    /* wdth ekseni CSS'te hic surulmuyor -> 100'e sabitlendi */
  font-style: normal;
  font-display: swap;    /* index.html'deki &display=swap ile ayni yukleme davranisi */
}

@font-face {
  font-family: "Manrope";
  src: url("/fonts/manrope-var.woff2") format("woff2");
  font-weight: 400 800;  /* --f-body 400/500/600/700/800 kullaniyor */
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/jetbrainsmono-var.woff2") format("woff2");
  font-weight: 400 700;  /* --f-mono yalnizca 400 ve 700 kullaniyor (106 kural tarandi) */
  font-style: normal;
  font-display: swap;
}

/* ════════ ASAMA-UI1 — kabuk cilasi (uye deneyimi + mobil native his) ════════
   theme.css DOKUNULMAZ; asagidaki her kural ya UYE varyantina ozel yeni markup'i
   giydirir ya da kaynak demoda olmayan olculebilir mobil iyilestirmedir.
   Renk/olcu degerleri theme.css degiskenlerinden turer. */
/* GEREKCE — BILINCLI-SAPMA-UI3: uye avatar menusundeki "Çıkış yap" POST formu.
   Kaynak menude cikis satiri yok (demo hep misafir); satir hd__menufoot ile ayni
   dil: ust cizgi, ayni tipografi, tam genislik dokunma alani. */

.hd__menuout{border-top:1px solid var(--line)}

.hd__menuout button{
  display:flex;align-items:center;width:100%;padding:11px 15px;
  font-size:12px;font-weight:700;color:var(--muted);transition:color .13s;
}

.hd__menuout button:hover{color:#fff}

/* GEREKCE — BILINCLI-SAPMA-UI2: uyede hd__cta dugme degil baglantidir (aria-pressed
   dugmeye ozgu). theme.css yalnizca .hd__cta[aria-pressed="true"] secicisini bilir;
   premium gorunumu baglanti varyantina .is-prem ile verilir (deger birebir kopya,
   theme.css satir 303). */

.hd__cta.is-prem{background:var(--surface);box-shadow:inset 0 0 0 1px var(--o40);color:var(--orange)}

/* GEREKCE — MOBIL-UI1: cekmece acikken arka plan kaydirma kilidi. Kaynak demo
   kilitlemiyor (React'te sayfa degisince menu kapaniyordu); tam sunucu render'da
   acik cekmece altinda govde kaymasi native hisse aykiri. Yalniz cekmecenin var
   oldugu kirilimda (theme.css ≤900 blogu ile ayni sinir). */

@media (max-width:900px){
  body.nav-open{overflow:hidden}
  /* cekmece ici kaydirma sona gelince govdeye zincirlenmesin */
  .rail__scroll{overscroll-behavior:contain}
  /* centikli cihaz: cekmece alt kenari home-bar'in altina tasmasin */
  .rail{padding-bottom:env(safe-area-inset-bottom)}
}

/* GEREKCE — MOBIL-UI2: dokunma hedefi ≥44px. Gorunumu buyutmeden ::after ile
   vurus alani genisletilir (WCAG 2.5.8 / iOS HIG 44pt). Yalniz kaba isaretcide;
   fare kullaniciminda tiklama alani gorselle esit kalir. inset degerleri her
   kontrolun mevcut boyutunu 44'e tamamlar (hd 38'likler -3, hnav/.pv .b 38 -5,
   .pv .chip 34 dikeyde -9, hd__qx 22 -11). Komsu kontrol bosluklari (gap 3-7px)
   asilmayacak sekilde secildi. (.pv .b/.pv .chip: onayli player kontrolleri.) */

@media (pointer:coarse){
  .hd__burger,.hd__cta,.hnav,.pv .b,.pv .chip,.chap,.hd__qx,
  .reels__x,.reels__mute,.hd__menufoot a{position:relative}
  .hd__burger::after,.hd__ic::after,.hd__ava::after,
  .reels__x::after,.reels__mute::after{content:"";position:absolute;inset:-3px}
  .hd__cta::after{content:"";position:absolute;top:-3px;bottom:-3px;left:0;right:0}
  .hnav::after,.pv .b::after{content:"";position:absolute;inset:-5px}
  .pv .chip::after{content:"";position:absolute;top:-9px;bottom:-9px;left:-2px;right:-2px}
  .chap::after{content:"";position:absolute;top:-6px;bottom:-6px;left:0;right:0}
  .hd__qx::after{content:"";position:absolute;inset:-11px}
  .top-btn::after{content:"";position:absolute;inset:-2px}
  .hd__menufoot a::after{content:"";position:absolute;top:-10px;bottom:-10px;left:-4px;right:-4px}
  /* satir yuksekligi 36px'te kalan menu satirlari: dolgu ile 44'e (satirlar bitisik,
     ::after komsuya tasardi — burada dolgu dogru arac) */
  .hd__menulist a{padding:13px 10px}
  .hd__menuout button{padding:14px 15px}
}

/* GEREKCE — MOBIL-UI3: basma geri bildirimi. theme.css (hover:none) blogu btn/chip/
   navlink'i kapsiyor; kabuk ikon dugmeleri ve oynatici kontrolleri disarida kalmisti.
   Yalniz transform/opacity (60fps, layout tetiklemez); sureler theme ile ayni dil. */

@media (hover:none){
  .hd__burger:active,.hd__ic:active,.hd__ava:active,.hnav:active,.pv .b:active,
  .top-btn:active,.reels__x:active,.reels__mute:active{transform:scale(.92);transition-duration:.06s}
  .hd__cta:active,.chap:active,.pv .chip:active{transform:scale(.96);transition-duration:.06s}
  .hd__menulist a:active,.hd__menufoot a:active,.hd__menuout button:active{background:var(--raised)}
  .rail__foot:active .me{background:var(--o08)}
}

/* GEREKCE — MOBIL-UI4: avatar menusu telefonda sabit panel (theme ≤700 blogu);
   uye menusune eklenen cikis satiriyla uzadi — kucuk ekranda tasarsa panel ici
   kayar, govde tasmaz (dvh + safe-area). */

@media (max-width:700px){
  .hd__menu{
    max-height:calc(100dvh - 118px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    overflow-y:auto;overscroll-behavior:contain;
  }
}

/* GEREKCE — DUZELTME TURU-1: KURALLAR §8 statik inline style yasagi. Asagidaki
   uc kural, Blade'de style="" olarak yazilmis SABIT (veri-sursuz) degerlerin
   sinif karsiligidir — gorsel sonuc birebir ayni, yalniz stil markup'tan CSS'e
   tasindi. Veri-surumlu inline'lar (style="width:{{$pct}}%") ve mail/* DISARIDA. */

.auth__go--ek{margin-top:9px}

/* krediler "kaydedilmedi" rozeti */

.sr__chips--ortala{justify-content:center;margin-top:6px}

/* aramada sonucsuz oneri cipleri */
/* GEREKCE — MISAFIR/UYE AYRIMI (SAPMA-UI6) + HIYERARSI (SAPMA-UI7): misafir kabugu
   uye-ozel ogeleri basmaz; yerine topbar sag kumesinde 3-kademeli CTA hiyerarsisi ve
   sidebar alt kartinda davetkar kayit/giris. hd__cta govdesi (turuncu dolgu) theme.css'ten
   gelir; asagidaki 3 varyant YALNIZ theme token'lariyla giydirilir (uydurma hex YOK).

   Neden bu hiyerarsi (denetci bulgulari): (a) onceki beyaz kayit varyanti uydurma hex idi
   (temada metin rolundeki acik ton yuzey yapilmisti = rol tersine); koyu+turuncu temada
   beyaz solid yabanci duruyordu. (b) Iki solid CTA (turuncu premium + beyaz kayit) gorsel
   hiyerarsi icin YARISIYORDU. (c) Ghost kenarligi --line (near-black)
   topbar'da gorunmuyordu = "Giriş yap" afordanssiz. (d) Kayit sidebar'da turuncu ama
   topbar'da beyazdi = ayni eylem iki farkli birincil renk. Cozum: kayit = TEK turuncu
   dolgu birincil (sidebar ile tutarli), premium = turuncu hayalet ikincil, giris = notr
   gorunur hayalet ucuncul. */
/* BIRINCIL — Ücretsiz üye ol: govde theme'den turuncu dolgu; burada yalniz zengin hover
   (btn--orange idiomu: yukselme + turuncu golge, theme.css:584) eklenir. */

.hd__cta--join:hover{filter:brightness(1.1);transform:translateY(-2px);box-shadow:0 14px 30px -14px var(--orange)}

/* IKINCIL — Premium ol: turuncu HAYALET (is-prem / hd__cta[aria-pressed=true] gorunumunun
   birebir kopyasi — theme.css:303) — kayit dolgusuyla yarismaz, VIP tonu. */

.hd__cta--soft{background:var(--surface);box-shadow:inset 0 0 0 1px var(--o40);color:var(--orange)}

.hd__cta--soft:hover{filter:none;background:var(--o08);transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--o40),0 10px 24px -16px var(--orange)}

/* UCUNCUL — Giriş yap: notr GORUNUR hayalet. Kenarlik --dim (#6F6E6C) near-black topbar'da
   nettir (eski --line gorunmezdi); hover'da turuncuya doner. */

.hd__cta--ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--dim);font-weight:600}

.hd__cta--ghost:hover{filter:none;color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40);transform:translateY(-1px)}

/* misafir topbar'i darda: giris ghost'u drawer + /kayit sayfasindan da erisilir */

@media (max-width:700px){ .hd__cta--ghost{display:none} }

.rail__foot--guest{display:flex;flex-direction:column;gap:8px}

.rail__foot--guest .rail__join{width:100%;height:40px;padding:0}

.rail__login{display:block;text-align:center;font-size:12.5px;font-weight:600;color:var(--dim)}

.rail__login:hover{color:var(--orange)}

/* ── FAZ B1: yönetici (admin_users) yönetim ekranı + admin çıkış menüsü ──
   Ekran kaynak-DIŞI; mevcut admin sınıfları (atbl/adraw/afld/nact__cred) yeniden
   kullanıldı, yalnız aşağıdaki yapısal boşluklar eklendi (theme.css'e dokunulmadı). */
/* Topbar hesap bloğu artık açılır menü tetikleyicisi: hd__menu absolute olarak
   .admtop__acc'a tutunur; buton UA stili sıfırlanır (görsel .admtop__me korunur). */

.admtop__acc{position:relative}

button.admtop__me{appearance:none;-webkit-appearance:none;border:0;background:none;font:inherit;color:inherit;cursor:pointer;text-align:inherit}

/* Yöneticiler tablosu: 5 kolon (Yönetici/Rol/2FA/Son giriş/İşlem). */

.atbl--y .atbl__h,.atbl--y .atbl__r{grid-template-columns:minmax(0,2fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.9fr)}

.yon__cred{margin-bottom:16px}

/* Mobil: satır kart olur, yatay taşma yok (KURALLAR §2.5) — atbl--m emsali. */

@media (max-width:760px){
  .atbl--y{background:none;box-shadow:none;overflow:visible}
  .atbl--y .atbl__h{display:none}
  .atbl--y .atbl__r{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:13px 14px;margin-bottom:8px;border-radius:11px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  .atbl--y .atbl__vid{grid-column:1/2;grid-row:1}
  .atbl--y .atbl__acts{grid-column:2;grid-row:1;justify-self:end}
  .atbl--y .atbl__r > span:nth-child(n+2):not(.atbl__acts){grid-column:1/-1}
}

/* GEREKCE — SİTE geneli core toast() (resources/js/core/ui.js) `.toast` sınıfını basıyor;
   bu sınıf theme.css'te STİLLENMEMİŞTİ (yalnız admin `.sctoast`/`.atoast` vardı) → üye/model
   tarafında favori/mesaj/ayar/yorum/model-içerik gibi işlemlerin başarı/hata bildirimi GÖRÜNMÜYORDU
   (backend 200 ama kullanıcı "çalışmıyor" görüyordu). `.sctoast` emsali (theme.css:1696 — aynı konum/
   arka plan/gölge/tipografi). ui.js `.show` sınıfını rAF ile ekler ve opacity transition'ında temizler
   → `.sctoast` gibi transform+opacity geçişli (`.atoast`'tan farklı: o `hidden` ile anında gösterilir).
   pointer-events:none — toast kendi altındaki tıklanabilir öğeleri engellemesin. */

.toast{
  position:fixed;left:50%;bottom:24px;z-index:80;display:inline-flex;align-items:center;gap:10px;
  padding:12px 18px;border-radius:11px;background:rgba(9,9,9,.96);backdrop-filter:blur(14px);
  box-shadow:inset 0 0 0 1px var(--line),0 20px 50px -20px #000;
  font-size:13px;font-weight:600;color:#E9E8E6;white-space:nowrap;
  transform:translate(-50%,90px);opacity:0;transition:.3s var(--ease);pointer-events:none;
}

.toast.show{transform:translate(-50%,0);opacity:1}

/* ── FAZ B3b: topbar bildirim zili açılır listesi ──
   Zil kendi dropdown kapsayıcısına (.admtop__notif) tutunur; panel .hd__pop'u
   yeniden kullanır (theme.css:275) ama site sağ-offset'i (right:120px) admin
   topbar'a uymaz → admin varyantında sağ kenara hizalanır. Satırlar sade
   (avatarsız) kategori bağlantıları; .hd__note yerine küçük .admnote. */

.admtop__notif{position:relative;display:flex}

.hd__pop--adm{right:0;width:300px}

.admnote{display:flex;align-items:center;gap:11px;padding:12px 15px;border-bottom:1px solid var(--line);transition:background .12s}

.admnote:last-child{border-bottom:0}

.admnote:hover{background:var(--raised)}

.admnote svg{width:17px;height:17px;flex:none;stroke:var(--orange);fill:none;stroke-width:1.7}

.admnote p{margin:0;font-size:12.5px;color:#CDCCCA;line-height:1.4}

.admnote p b{color:#fff;font-weight:800;font-variant-numeric:tabular-nums}

.admnote--bos{margin:0;padding:16px 15px;font-size:12.5px;color:var(--dim);text-align:center}

/* O4 (model self-service) — SAHİP araç çubuğu: yalnız kendi profiline giriş yapmış model
   görür ($sahip). Misafir/normal üye bu markup'ı HİÇ görmez (E06 korunur).
   O4 DEĞİŞİMİ: eski prominent "Bu senin profilin" orange note bandı + gönderi drawer'ı
   KALDIRILDI — gönderi paylaşımı artık akış üstünde inline composer (theme .composer).
   Kalan: İNCE ikincil çubuk (profili düzenle / galeri foto ekle → mevcut drawer). */

.mp__own{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 12px;padding:9px 14px;border-radius:12px;
  background:var(--raised);border:1px solid var(--line);
}

.mp__ownt{font-size:12.5px;font-weight:700;color:var(--muted)}

.mp__owntools{display:flex;gap:8px;flex-wrap:wrap;margin-left:auto}

.mp__ownbtn{
  font-weight:700;font-size:13px;padding:7px 13px;border-radius:10px;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  transition:border-color .15s var(--ease),background .15s var(--ease);
}

.mp__ownbtn:hover{border-color:var(--o40);background:var(--o08)}

@media (max-width:620px){ .mp__own{margin:10px 14px 12px} .mp__owntools{margin-left:0;width:100%} }

/* O4: inline composer feed diliyle hizalanır — görsel stil theme.css `.composer*`ten gelir
   (kart yüzeyi + textarea + medya/kilit/paylaş satırı, DOKUNULMADI). Burada YALNIZ feed
   genişliği (600px, ortalı) + posts-grid'den ayıran alt boşluk. Sahip-only. */

.mp__pane .composer{max-width:600px;margin:0 auto 16px}

/* Yönetim çekmecesi (profil düzenle / gönderi / foto ekle / sil onayı). Sahip-only
   olduğundan misafir CSS'i etkilenmez; kaynak-dışı öğe (sahip görünümü kaynakta yok). */

.mmscrim{
  position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(0,0,0,.62);
}

.mmpanel{
  width:100%;max-width:460px;max-height:90vh;overflow:auto;
  background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
}

.mmf{display:flex;flex-direction:column;gap:13px}

.mmf__t{font-size:17px;font-weight:800;color:var(--text);margin:0}

.mmf__ct{font-size:13.5px;color:var(--muted);margin:0}

.mmf__row{display:flex;flex-direction:column;gap:6px;font-size:13px;color:var(--muted)}

.mmf__row textarea,.mmf__row input[type=text],.mmf__row input[type=number]{
  width:100%;padding:9px 11px;border-radius:10px;font:inherit;
  background:var(--surface);border:1px solid var(--line);color:var(--text);resize:vertical;
}

.mmf__row input[type=file]{font-size:12.5px;color:var(--muted)}

.mmf__check{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text);cursor:pointer}

.mmf__err{font-size:13px;color:#ff6b6b;margin:0}

.mmf__acts{display:flex;justify-content:flex-end;gap:10px;margin-top:4px}

.mmf__acts .is-busy{opacity:.6;pointer-events:none}

/* Karo/foto sil düğmesi (buton içi span). Sahip-only; misafir tile/mph aynı kalır. */

.tile__del,.mph__del{
  position:absolute;top:7px;right:7px;z-index:3;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;color:#fff;
  background:rgba(10,10,12,.66);border:1px solid rgba(255,255,255,.16);
  transition:background .15s var(--ease);
}

.tile__del:hover,.mph__del:hover{background:#c0392b}

.tile__del svg,.mph__del svg{width:15px;height:15px}

/* O5: owner "düzenle" düğmesi — sil'in solunda (26px + 4px boşluk). Sil ile aynı kabuk;
   hover'da kırmızı yerine turuncu (yıkıcı-değil ayrımı). Sahip-only; misafir tile aynı. */

.tile__edit{
  position:absolute;top:7px;right:37px;z-index:3;
  width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border-radius:8px;cursor:pointer;color:#fff;
  background:rgba(10,10,12,.66);border:1px solid rgba(255,255,255,.16);
  transition:background .15s var(--ease),border-color .15s var(--ease);
}

.tile__edit:hover{background:var(--orange);border-color:var(--orange)}

.tile__edit svg{width:15px;height:15px}

/* O5: zarif boş-durum (gönderi/foto sekmesi veri yoksa). İkon halkası + başlık + alt. */

.mp__empty{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:48px 20px;text-align:center;color:var(--muted);
}

.mp__emptyico{
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;margin-bottom:6px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);color:var(--muted);
}

.mp__emptyico svg{width:26px;height:26px}

.mp__empty b{font-size:15px;font-weight:700;color:var(--text)}

.mp__empty small{font-size:13px;color:var(--muted)}

/* GEREKCE — KURALLAR §8 "inline style YASAK": admin/ayarlar-govde.blade.php'deki
   CDN durumu degeri kaynakta inline style={{color:"#7BE39A"}} tasiyordu. Renk
   theme.css'in yerlesik pozitif/success yesili (#7BE39A — .hrow__done/.kpi__diff.up/
   .stat--yayinda ile ayni token); palet-disi degil. Inline yerine gerekceli sinif. */

.ayar__ok{color:#7BE39A}

/* GEREKCE — ODEME PASIF durumu (SiteAyar::odeme_aktif=false, proje sahibi karari).
   Satin alma butonlari gizlendiginde yerine basilan "yakinda" bilgi kutusu. Kaynakta
   karsiligi yok; notr yuzey token'lariyla (theme.css paleti) cizilir, palet-disi renk yok. */

.odeme-soon{
  margin:14px 0 0;padding:13px 15px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  color:var(--muted,#a9adbb);font-size:14px;line-height:1.5;
}

.odeme-soon b{display:block;color:var(--fg,#fff);margin-bottom:2px}

/* GEREKCE — CMS FAZ 2 /admin/icerik: statik sayfa icerik editorunde her legal bolumu /
   faq grubu bir <fieldset class="admcard__sec">. Kaynakta karsiligi yok (kaynak-disi admin
   ekrani); tarayici varsayilan fieldset cercevesi panelle uyumsuz -> notr yuzey token'lariyla
   sade cerceve. Palet-disi renk yok (theme.css degiskenleri). */

.admcard__sec{
  margin:14px 0 0;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line,rgba(255,255,255,.12));background:var(--o08,rgba(255,255,255,.04));
}

.admcard__sec legend{padding:0 6px;font-size:13px;font-weight:700;color:var(--muted,#a9adbb)}

.admcard__sec legend small{font-weight:500;opacity:.75}

/* GEREKCE — CMS FAZ 3 /admin/seo + /admin/slider gorsel upload: dosya secici + mevcut
   gorsel onizlemesi bir satirda. Kaynakta karsiligi yok (kaynak-disi admin ekrani);
   notr yuzey token'lariyla (theme.css paleti) hizalanir, palet-disi renk yok. */

.field__up{display:flex;align-items:center;gap:12px;margin-top:8px;flex-wrap:wrap}

.field__prev{
  border-radius:10px;object-fit:cover;
  border:1px solid var(--line,rgba(255,255,255,.12));background:var(--o08,rgba(255,255,255,.04));
}

.field__up input[type=file]{min-width:0;flex:1;font-size:13px;color:var(--muted,#a9adbb)}

/* GEREKCE — CMS /admin/eposta (e-posta sablonlari, kaynak-disi admin ekrani): yer
   tutucu listesi + HTML govde alani. Kaynakta karsiligi yok; notr token'larla hizalanir. */

.ept__vars{margin:2px 0 14px;font-size:12.5px;color:var(--muted,#a9adbb);line-height:1.9}

.ept__vars code{
  background:var(--o08,rgba(255,255,255,.06));border:1px solid var(--line,rgba(255,255,255,.12));
  border-radius:6px;padding:1px 6px;font-size:12px;color:var(--ink-2,#e7e9f2)
}

.ept__vars span{opacity:.7}

.ept__body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6;resize:vertical}

/* ════════ ADMIN FORM CSS — cipçlak (sinifsiz/baglamsiz) form ogeleri icin tema tabani ════════
   GEREKCE (denetci gercek tarayicida computed CSS ile buldu): admin panelindeki bazi form
   ogeleri theme.css'te stillenmemis -> tarayici varsayilanina dusuyordu. En net kanit:
   `.field textarea` (ayarlar SEO, /admin/seo, /admin/icerik, /admin/duyurular). theme.css
   yalnizca `.field input` (satir 4424), `.sp .field textarea` (1842) ve `.avnew__card .field
   textarea` (4978) tanimliyor; GENEL `.field textarea` YOK -> koyu temada BEYAZ kutu / siyah
   metin / gri tarayici cercevesi. Input/select tarafi ise zaten stilli (.field input,
   .tariff__in input, .afld input/select, .ast__sel, .sort select, .avnew__card .field *).

   TASARIM — iki katman, ikisi de SIZINTI-GUVENLI (mevcut stilli ogeleri EZMEZ):
   (1) TABAN yuzey katmani: `:where(.adm) :where(...)` sarmasi -> ozgulluk 0,0,0. Boylece
       yalniz tarayici-varsayilani (UA) ogeleri boyar; theme.css'in HERHANGI sinif kurali
       (.field input=0,1,1 ; .ast__sel=0,1,0 ; .sort select=0,1,0 ; .afld select=0,1,1 vb)
       DAHA YUKSEK ozgullukle bunu ezer -> stilli ogeler dokunulmaz kalir. Borderless topbar
       arama / .sort select gibi kismi-stilli ogeler background:none + border:0'i KENDI beyan
       ettiginden onlar da korunur (yalniz gorunmez border-radius sizabilir). color-scheme:dark
       native select oku + number spin + tarih secici + kaydirma cubugunu koyu temaya ceker.
   (2) KUTU-MODELI: yalniz `.field textarea` icin (asil bug) -> `:where(.adm .field) textarea`
       ozgulluk 0,0,1. `.avnew__card .field textarea` (0,2,1) bunu ezer -> avnew textarea kendi
       olcusunu korur; yalniz cipçlak `.field textarea` tam genislik + dolgu + min-yukseklik alir.

   KAPSAM — `.adm` YALNIZCA admin-shell kok sarmalayicisidir (components/admin-shell.blade.php:14
   `<div class="adm">`). SITE (uye) sayfalari `.adm` ICERMEZ -> uye formlari HIC etkilenmez.
   Admin login `.adm` disindadir ama tum girdileri zaten stillidir (.field input / .admlogin__otp).
   DISLAMA — toggle/switch `<button class="tgl" role="switch">` (buton) ve onay kutusu `.ack`
   (input[type=checkbox]) secici listesinde DEGIL -> bozulmaz. Renkler theme.css TOKEN'lari
   (--surface/--text/--line/--o40/--dim); uydurma hex YOK. */

:where(.adm) :where(
  input[type=text],input[type=email],input[type=url],
  input[type=number],input[type=search],input[type=password],
  textarea,select
){
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:9px;
  font:inherit;font-size:13px;color-scheme:dark;
  transition:border-color .15s var(--ease);
}

:where(.adm) :where(
  input[type=text],input[type=email],input[type=url],
  input[type=number],input[type=search],input[type=password],
  textarea,select
):focus{outline:none;border-color:var(--o40)}

:where(.adm) :where(
  input[type=text],input[type=email],input[type=url],
  input[type=number],input[type=search],input[type=password],textarea
)::placeholder{color:var(--dim)}

/* cipçlak .field textarea kutu-modeli (avnew__card kendi olcusuyle bunu ezer) */

:where(.adm .field) textarea{
  width:100%;padding:9px 12px;min-height:80px;line-height:1.55;resize:vertical;
}

/* ════════ MODAL/ÇEKMECE/PANEL KAPANMA — [hidden] display OVERRIDE düzeltmesi ════════
   KÖK NEDEN (denetçi gerçek tarayıcıda computed CSS ile kanıtladı — .modal örneği):
   JS bir öğeyi `el.hidden = true` / setAttribute("hidden") ile gizliyor; UA taslak kuralı
   `[hidden]{display:none}` bunu gizlemeli AMA theme.css'te öğenin AUTHOR `display:grid|flex|
   block|inline-flex` kuralı, kaynak-önceliği (author > UA) gereği UA `[hidden]`'ı EZİYOR →
   öğe hidden=true olmasına rağmen GÖRÜNÜR kalıyor (admuyeler/auvqueue X butonu modalı
   kapatmıyordu). Çözüm: her EZİLEN öğe için `[hidden]` durumunu author önceliğinde geri
   kazandır. `!important` gerekçeli: `[hidden]` DAİMA gizlemeli; hiçbir öğe hidden iken görünür
   olmamalı → responsive/özgül hiçbir display kuralı bunu ezmesin (belt-and-suspenders, güvenli
   çünkü yalnız hidden ÖZNİTELİĞİ TAŞIYAN öğeyi etkiler; açık durumda hidden yok → kural eşleşmez).
   P8 KARARI (2026-08-22, KULLANICI-BUGLAR madde 17 önerisi uygulandı): eski 20 SELEKTÖRLÜK
   BEYAZ-LİSTE KALDIRILDI → tek GLOBAL kural. Gerekçe: beyaz-liste her yeni `hidden` kullanan
   bileşende sessizce tekrar kırılıyordu; P5 denetimi 5 yeni kırık daha buldu (.composer__bar/
   __media/__price → composer KAPALI durumu hiç yoktu, "Yayınla" barı hep açıktı · .mmf__row
   (ek:297 flex) · .hd__qk (theme:217) → arama `/` rozeti × düğmesiyle üst üste biniyordu).
   Global kural GÜVENLİDİR: yalnız `hidden` ÖZNİTELİĞİ TAŞIYAN öğeyi seçer; öznitelik yokken
   hiçbir kural eşleşmez (açık durumdaki hiçbir öğe etkilenmez). `<input type="hidden">` bu
   seçiciye GİRMEZ (öznitelik değil, tip değeri). Projede `hidden` iken öğeyi inline
   `style.display` ile açan tek satır YOK (tarama: resources/js genelinde `style.display` hiç
   kullanılmıyor) → `!important` kimsenin işini bozmaz. Kapsanan eski liste (kayıt için):
   .modal · .adraw · .load-more · .pmodal__dots/__nav/__lock · .field__err · .nact__cred ·
   .adraw__acts/__kv · .drop · .hrow · .mrow · .ntrow · .fav__x · .hp__pop · .castsel ·
   .frame--add · .studcheck li · .btn — hepsi artık tek kuralla kapsanıyor; ayrıca theme'in
   kendi `.vid[hidden]`/`.model[hidden]` kuralları da aynı sonucu verdiği için çakışma yok. */

[hidden]{display:none!important}

/* ── KAYNAK-DIŞI: /admin/islemler (payments + credit_txs birleşik işlem defteri) ──
   Ekran mevcut admin sınıflarını (atbl/atb/seg/apag/admcard) yeniden kullanır;
   yalnız aşağıdaki yapısal boşluklar eklenir (theme.css'e dokunulmaz).

   Tarih aralığı girdileri: `.adm` taban seçicisi input[type=date]'i kapsamaz
   (whitelist'te yok) → çıplak tarih girdileri stilsiz kalırdı. Aynı yüzeyle
   (surface/line/o40, color-scheme:dark native seçici oku) hizalanır. */

:where(.adm) input[type=date]{
  background:var(--surface);color:var(--text);
  border:1px solid var(--line);border-radius:9px;
  padding:8px 10px;font:inherit;font-size:13px;color-scheme:dark;
  transition:border-color .15s var(--ease);
}

:where(.adm) input[type=date]:focus{outline:none;border-color:var(--o40)}

/* Tarih aralığı sarmalayıcı: arama+çipler ile aynı satırda akar (atb esnek). */

.atb__dates{display:flex;align-items:center;gap:8px;flex-wrap:wrap}

.atb__dates .adm-datesep{color:var(--dim);font-size:12.5px}

/* İşlemler tablosu: 6 kolon (İşlem/Üye/Tutar/Durum/Referans/Tarih). atbl--y emsali. */

.atbl--i .atbl__h,.atbl--i .atbl__r{grid-template-columns:minmax(0,1.7fr) minmax(0,1.4fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,.8fr)}

/* Negatif (iade/harcama) tutar kaynak neg rengiyle; pozitif nötr metin. */

.atbl--i .atbl__amt{font-weight:700;text-align:right;white-space:nowrap}

/* txtbl__amt.neg ile aynı (theme:5467) */

.atbl--i .pilltag{white-space:nowrap}

/* Üye avatarı yuvarlak 34px (gelir txtbl__ava finans görünümü). `.atbl__vid > img`
   (theme:4893, 58×33 video küçük resmi) yalnız BU tabloda ezilir; başka tablo etkilenmez. */

.atbl--i .atbl__vid > img{width:34px;height:34px;border-radius:50%}

/* Mobil: satır kart olur, yatay taşma yok (KURALLAR §2.5) — atbl--y emsali. */

@media (max-width:820px){
  .atbl--i{background:none;box-shadow:none;overflow:visible}
  .atbl--i .atbl__h{display:none}
  .atbl--i .atbl__r{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;padding:13px 14px;margin-bottom:8px;border-radius:11px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  .atbl--i .atbl__vid{grid-column:1/2;grid-row:1}
  .atbl--i .atbl__amt{grid-column:2;grid-row:1;justify-self:end}
  .atbl--i .atbl__r > span:nth-child(n+3):not(.atbl__amt){grid-column:1/-1}
}

/* ════════════ CMS DENETİM TASARIM SİSTEMİ — modern · kompakt · sekmeli ════════════
   GEREKÇE: Denetim grubu ekranları (/admin/seo PİLOT; sonra içerik/marka/eposta/işlemler)
   kaynak React'ta YOK → uzun "alt-alta form listesi" mirasıydı (10 sayfa × 5 alan = çok
   uzun kaydırma). Bu tasarım dili SOL DİKEY sekme rayı + sağ TEK panel ile 10+ yönetilebilir
   öğeyi KOMPAKT sunar; her sekme kendi formu + kendi Kaydet'i. Tekrar kullanılabilir: aynı
   .cms-* bileşenleri diğer Denetim ekranlarına yayılacak.
   TOKEN DİSİPLİNİ: tüm renk/ölçü theme.css değişkenlerinden (--panel/--surface/--text/--muted/
   --dim/--line/--orange/--orange-hi/--o08/--o14/--o40/--ink/--ease/--f-mono/--f-body); UYDURMA
   HEX YOK (tek istisna: .cms-lbl metin tonu #B6B4B1 — theme.css .lbl:4419 ile BİREBİR aynı,
   yeni renk değil mevcut label tonunun eşi). KAPSAM: yalnız .adm (admin-shell) altı → site
   formları etkilenmez. Panel görünürlüğü SINIF-toggle (.is-active) ile — [hidden] display
   override tuzağına (bkz. MODAL KAPANMA CSS turu) hiç girmez. */
/* Yerleşim: sol sekme rayı (sabit genişlik) + sağ akışkan panel; dar ekranda tek kolona iner. */

.cms{display:grid;grid-template-columns:216px minmax(0,1fr);gap:14px;align-items:start}

/* ── SEKME NAVİGASYONU (sol dikey liste; 10+ öğe için yatay yerine dikey = kompakt) ── */

.cms-tabs{
  display:flex;flex-direction:column;gap:2px;padding:6px;
  background:var(--panel);border-radius:13px;box-shadow:inset 0 0 0 1px var(--line);
  position:sticky;top:14px;
}

.cms-tab{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:1px 8px;
  padding:8px 11px;border-radius:9px;text-align:left;
  color:var(--muted);transition:background .16s var(--ease),color .16s var(--ease);
}

.cms-tab__label{grid-column:1;font-size:13px;font-weight:600;line-height:1.25}

.cms-tab__path{
  grid-column:1;font-family:var(--f-mono);font-size:10px;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.cms-tab:hover{background:var(--o08);color:var(--text)}

.cms-tab.is-active{background:var(--o14);color:var(--orange-hi)}

.cms-tab.is-active .cms-tab__path{color:var(--o40)}

/* Özel SEO tanımlı (override dolu) sayfa rozeti: küçük turuncu nokta, dikeyde sağ hizalı. */

.cms-tab__badge{
  grid-column:2;grid-row:1/3;align-self:center;
  width:7px;height:7px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 3px var(--o14);
}

/* ── PANEL (aktif sekmenin içeriği) — sınıf-toggle görünürlük ── */

.cms-panel{
  display:none;
  background:var(--panel);border-radius:13px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden;
}

.cms-panel.is-active{display:block;animation:cmsFade .2s var(--ease)}

@keyframes cmsFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.cms-panel__h{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 18px;border-bottom:1px solid var(--line);
}

.cms-panel__h b{font-size:14px;font-weight:700;color:var(--text)}

.cms-panel__h small{display:block;font-family:var(--f-mono);font-size:11px;color:var(--dim);margin-top:2px}

.cms-panel__ext{font-size:12px;font-weight:600;color:var(--dim);white-space:nowrap;transition:color .15s}

.cms-panel__ext:hover{color:var(--orange)}

/* ── GÖVDE + ALAN GRUPLARI (kompakt, hizalı, nefes alan) ── */

.cms-body{padding:16px 18px}

.cms-field{margin-bottom:14px}

.cms-field:last-child{margin-bottom:0}

.cms-lbl{display:block;font-size:12px;font-weight:700;color:#B6B4B1;margin:0 0 6px}

/* theme .lbl (4419) eşi */
/* Metin/textarea/select yüzeyi: .adm tabanını (surface/line/radius) kompakt ölçüyle netleştirir.
   file input HARİÇ (kendi .field__up düzeni var). */

.cms-field input[type=text],.cms-field textarea,.cms-field select{
  width:100%;padding:0 12px;height:42px;border-radius:9px;
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:13.5px;color-scheme:dark;transition:border-color .15s var(--ease);
}

.cms-field textarea{height:auto;min-height:74px;padding:9px 12px;line-height:1.55;resize:vertical}

.cms-field input[type=text]:focus,.cms-field textarea:focus,.cms-field select:focus{outline:none;border-color:var(--o40)}

.cms-field input[type=text]::placeholder,.cms-field textarea::placeholder{color:var(--dim)}

.cms-hint{margin:6px 0 0;font-size:11.5px;color:var(--dim)}

/* MEVCUT EFEKTIF deger gostergesi (override yokken sayfanin urettigi title/desc/og):
   admin "su an kullanilan" degeri gorur. Notr token'lar; palet-disi renk yok. */

.cms-eff{margin:5px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}

.cms-eff span{color:var(--text)}

/* Efektif (override'siz) OG onizlemesi soluk: gercek override gorseliyle karismasin. */

.field__prev--eff{opacity:.55}

/* İki alanı yan-yana (kompakt); dar ekranda tek kolon. */

.cms-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* ── AKSİYON ÇUBUĞU (panel altı; Kaydet + durum) ── */

.cms-actions{
  display:flex;align-items:center;gap:12px;
  padding:13px 18px;border-top:1px solid var(--line);background:var(--surface);
}

.cms-actions .btn{height:40px;padding:0 20px;font-size:13px}

.cms-actions .btn.is-busy{opacity:.6;pointer-events:none}

/* kaydediliyor: çift-tık koruması (SKILL-VANILLA §2) */

.cms-note{font-size:11.5px;color:var(--dim)}

/* Boş durum (yönetilebilir öğe yoksa) — tasarım dili tamlığı için. */

.cms-empty{padding:44px 18px;text-align:center;color:var(--dim);font-size:13px}

/* ── Responsive: sekmeler üstte yatay kayan şerit olur, panel altında (KURALLAR §2.5) ── */

@media (max-width:860px){
  .cms{grid-template-columns:1fr}
  .cms-tabs{flex-direction:row;overflow-x:auto;position:static;gap:6px;scrollbar-width:none}
  .cms-tabs::-webkit-scrollbar{display:none}
  .cms-tab{grid-template-columns:auto;flex:0 0 auto}
  .cms-tab__path{display:none}   /* dar şeritte yalnız etiket */
  .cms-tab__badge{grid-row:auto}
  .cms-row{grid-template-columns:1fr}
}

/* ════════ CMS TASARIM SİSTEMİ — YAYILIM (içerik / marka / e-posta) ════════
   GEREKÇE: SEO PİLOTU onaylandı; aynı .cms-* dili diğer Denetim ekranlarına yayıldı.
   Aşağıdaki bileşenler PİLOTUN eksik bıraktığı iki deseni tamamlar: (1) panel İÇİ bölüm/grup
   gruplaması (legal bölümleri · SSS grupları), (2) görsel ekran için SOL tab yerine kompakt
   KART IZGARASI + önizleme (marka: tüm slotlar aynı anda görünür). TOKEN DİSİPLİNİ aynen:
   tüm renk/ölçü theme.css değişkenlerinden; UYDURMA HEX YOK. KAPSAM yalnız .adm altı. */
/* ── İçerik: panel içi bölüm/grup kutusu (legal section · faq grup). .adm fieldset UA
   çerçevesi panelle uyumsuz -> nötr yüzey token'larıyla sade kutu. ── */

.cms-sec{margin:0 0 12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface)}

.cms-sec:last-child{margin-bottom:0}

.cms-sec>legend{padding:0;margin:0 0 10px;font-size:12px;font-weight:700;color:var(--orange-hi)}

.cms-sec>legend small{font-family:var(--f-mono);font-weight:500;color:var(--dim);margin-left:6px}

/* ── Marka: kompakt görsel kart ızgarası (tab DEĞİL — görsel karşılaştırma için tüm
   slotların önizlemesi aynı anda görünür). Kart yüzeyi .cms-panel emsali (aynı token'lar). ── */

.cms-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(256px,1fr));gap:14px}

.cms-card{display:flex;flex-direction:column;background:var(--panel);border-radius:13px;box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}

.cms-card .cms-body{flex:1}

/* Önizleme yüzeyi: nötr zeminde ortalanmış görsel (şeffaf logo/favicon görünür kalsın). */

.cms-shot{display:flex;align-items:center;justify-content:center;min-height:108px;padding:12px;margin-bottom:10px;border-radius:9px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}

.cms-shot img{max-width:100%;max-height:148px;width:auto;height:auto;object-fit:contain}

.cms-shot--sm img{max-height:64px}

/* favicon: küçük ikon büyütülmez */
/* Dosya seçici (marka upload) — CMS alan diliyle uyumlu; koyu tema (color-scheme). */

.cms-field input[type=file]{width:100%;font-size:12.5px;color:var(--muted);color-scheme:dark}

/* E-posta HTML gövde alanı monospace kalsın (.cms-field textarea proportional font'unu ezer). */

.cms-field textarea.ept__body{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:12.5px;line-height:1.6}

/* ════════════ LİSTE İMZASI (.lst-*) — ADMIN LİSTE EKRANLARI YENİ GÖRSEL KİMLİĞİ ════════════
   BAĞLAM (proje sahibi kararı): Admin liste ekranları panelin ortak .atbl/.dash__head token
   dilinde ve tutarlıydı AMA "yeterli" bulunmadı → liste ailesine AYRI, daha modern/minimal/
   belirgin bir GÖRSEL İMZA isteniyor. Bu, YENİ ve İZOLE bir sınıf katmanıdır (.lst-*): mevcut
   GLOBAL .atbl'a DOKUNULMAZ → diğer ~14 liste ekranı (videolar/oyuncular/işlemler/yöneticiler…)
   bu pilot turda AYNEN kalır. Yalnız /admin/uyeler bu imzayı taşır (PİLOT: onaylanınca yayılır).

   İZOLASYON MEKANİĞİ: Üyeler tablosu artık `.atbl atbl--u` DEĞİL `.lst-tbl` sarmalayıcıdır →
   theme.css'in `.atbl--u .atbl__r` (özgüllük 0,2,0) kuralı ARTIK EŞLEŞMEZ (atbl--u ata yok).
   Satır/hücre sınıfları (.atbl__r/.atbl__vid/.atbl__vb/.atbl__num/.atbl__dim/.atbl__acts/.ack/
   .aicon/.ondot) admuyeler.js seçicileri + custom-checkbox/ikon dili için KORUNUR; görünümleri
   `.lst-tbl <sınıf>` (0,2,0) ile çıplak `.atbl__r` (0,1,0) ezilerek yeni imzaya boyanır.
   FONKSİYON: hiçbir data-uye-* / .atbl__r / .seg / .abulk / .modal / .adraw seçicisi değişmedi
   → bulk seçim / kredi modalı / çekmece / filtre-GET / arama-Enter / plan segment BOZULMAZ.

   TOKEN DİSİPLİNİ: renk/ölçü theme.css var() token'larından (--panel/--surface/--raised/--line/
   --text/--muted/--dim/--orange/--orange-hi/--o08/--o14/--o40/--f-display/--f-mono/--ease).
   İSTİSNA — durum rozet/tile renkleri: yeşil #7BE39A + rgba(76,194,107,.1) ve kırmızı #FF6A80 +
   rgba(255,31,61,.10-.25) UYDURMA DEĞİL; theme.css'in yerleşik pozitif/negatif tonlarıdır
   (.stat--yayinda:4920 yeşili · .aicon--del:4940 / .atbl--i .atbl__amt.neg / ek.css .ayar__ok:321
   ile BİREBİR aynı) — mevcut palet emsali, palet-dışı yeni renk yok. */
/* ── İSTATİSTİK BANDI: 4 KPI tile (Toplam/Aktif/Premium/Banlı) — liste imzasının başlığı ── */

.lst-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 18px}

/* yayma turu: 3'lü/2'li KPI bandı (ekranın gerçek sayım sayısına göre) — ≤920 yine 2 kolona iner */

.lst-stats--3{grid-template-columns:repeat(3,minmax(0,1fr))}

.lst-stats--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.lst-stat{
  position:relative;overflow:hidden;display:flex;align-items:center;gap:13px;
  padding:14px 16px;border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s var(--ease),transform .18s var(--ease);
}

/* sol vurgu rayı — hover'da turuncuya döner (imza dokunuşu) */

.lst-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line);transition:background .18s var(--ease)}

.lst-stat:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--o40)}

.lst-stat:hover::before{background:var(--orange)}

.lst-stat__ico{flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}

.lst-stat__ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8}

.lst-stat__b{display:flex;flex-direction:column;gap:3px;min-width:0}

.lst-stat__n{font-family:var(--f-display);font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--text);font-variant-numeric:tabular-nums}

.lst-stat__l{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);white-space:nowrap}

/* tür-renkli ikon çipi (durum kimliği tile'a taşınır) — theme yerleşik tonları */

.lst-stat--live .lst-stat__ico{color:#7BE39A;background:rgba(76,194,107,.1);box-shadow:inset 0 0 0 1px rgba(76,194,107,.25)}

.lst-stat--prem .lst-stat__ico{color:var(--orange);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40)}

.lst-stat--ban .lst-stat__ico{color:#FF6A80;background:rgba(255,31,61,.1);box-shadow:inset 0 0 0 1px rgba(255,31,61,.25)}

/* ── FİLTRE ÇUBUĞU: kabuk yüzeyinde arama + plan segmenti (rafine, kompakt) ──
   .atb tabanı flex/gap verir; .lst-bar onu panel yüzeyli bir şeride sarar. JS .seg/[name=q]
   seçicileri değişmez; yalnız görünüm zenginleşir. */

.lst-bar{padding:8px;border-radius:13px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px}

.lst-bar .atb__q{flex:1;min-width:220px;max-width:none;height:42px;background:var(--surface)}

.lst-bar .seg{margin-left:auto;background:var(--surface)}

/* ── TABLO YÜZEYİ ── */

.lst-tbl{border-radius:14px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);overflow:hidden}

/* satır ızgarası — GÖRSEL katman (padding/gap/hizalama) TÜM lst tablolarına ORTAK; KOLON
   SAYISI ekranın YAPISAL sınıfından gelir (theme .atbl/.atbl--m/--i/--y/--u grid'i) → çift
   sınıf: .lst-tbl görseli belirler, yapısal sınıf kolonları verir (ekran-özel korunur). */

.lst-tbl .atbl__h,.lst-tbl .atbl__r{gap:12px;align-items:center;padding:12px 16px}

/* üyeler 8 kolon — çift sınıf .atbl--u.lst-tbl (0,3,0) ekrana özel oran (pilot onaylı) */

.lst-tbl.atbl--u .atbl__h,.lst-tbl.atbl--u .atbl__r{
  grid-template-columns:34px minmax(0,2.3fr) minmax(0,.95fr) minmax(0,.7fr) minmax(0,.8fr) minmax(0,.85fr) minmax(0,.9fr) minmax(0,.85fr);
}

/* başlık: mono mikro-etiketler, ince ayraç */

.lst-tbl .atbl__h{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dim);background:var(--surface);border-bottom:1px solid var(--line);padding-top:11px;padding-bottom:11px;
}

.lst-tbl .atbl__ha{text-align:right}

/* satır: sol vurgu rayı (hover/seçim'de yanar) + ince ayraç + hover zemini */

.lst-tbl .atbl__r{position:relative;font-size:12.5px;border-bottom:1px solid var(--line);transition:background .14s var(--ease)}

.lst-tbl .atbl__r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .14s var(--ease)}

.lst-tbl .atbl__r:last-child{border-bottom:0}

.lst-tbl .atbl__r:hover{background:rgba(255,255,255,.02)}

.lst-tbl .atbl__r:hover::before{background:var(--o40)}

.lst-tbl .atbl__r.sel{background:var(--o08)}

.lst-tbl .atbl__r.sel::before{background:var(--orange)}

.lst-tbl .atbl__r.off{opacity:.5}

.lst-tbl .atbl__r.off:hover{opacity:.82}

/* kimlik hücresi: köşeli-yuvarlak avatar + halka (jenerik yuvarlaktan ayrışan imza) */

.lst-tbl .atbl__vid{display:flex;align-items:center;gap:11px;min-width:0}

.lst-tbl .atbl__open{text-align:left;transition:opacity .13s}

.lst-tbl .atbl__ava{width:36px;height:36px;border-radius:10px;box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .14s var(--ease)}

.lst-tbl .atbl__open:hover .atbl__ava{box-shadow:inset 0 0 0 1px var(--o40)}

.lst-tbl .atbl__vb{min-width:0}

.lst-tbl .atbl__vb b{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.lst-tbl .atbl__open:hover .atbl__vb b{color:var(--orange)}

.lst-tbl .atbl__vb small{display:block;font-family:var(--f-mono);font-size:10px;color:var(--dim);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* sayısal + tarih hücreleri: mono, tabular */

.lst-tbl .atbl__num{font-family:var(--f-mono);font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}

.lst-tbl .atbl__dim{font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* aksiyon ikonları: sağ hizalı; base .aicon dili korunur */

.lst-tbl .atbl__acts{display:flex;gap:5px;justify-content:flex-end}

/* boş durum */

.lst-tbl .atbl__empty{margin:0;padding:40px 18px;font-size:13px;color:var(--dim);text-align:center}

/* ── DURUM ROZETLERİ (.lst-badge) — aktif/premium/banlı ayrı renk-token, nokta göstergeli ──
   Satır plan hücresinde .pilltag yerine kullanılır (metin AYNI: 'Banlı'/'Premium'/'VIP'/
   'Ücretsiz' → AdmUyeTest assertSee korunur). Çekmece başlığındaki .pilltag DOKUNULMADI. */

.lst-badge{
  display:inline-flex;align-items:center;gap:6px;padding:3px 10px 3px 9px;border-radius:999px;
  font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.01em;
  background:var(--raised);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
}

.lst-badge::before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor;flex:none}

.lst-badge--free{color:var(--muted)}

.lst-badge--prem{color:var(--orange);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40)}

.lst-badge--ban{color:#FF6A80;background:rgba(255,31,61,.1);box-shadow:inset 0 0 0 1px rgba(255,31,61,.25)}

/* --live: yeşil pozitif/aktif ton (yayma turu — işlem/rol/durum ekran-özel rozetleri);
   theme yerleşik pozitif yeşili (.stat--yayinda / .lst-stat--live ile birebir). */

.lst-badge--live{color:#7BE39A;background:rgba(76,194,107,.1);box-shadow:inset 0 0 0 1px rgba(76,194,107,.25)}

/* ── RESPONSIVE: stat 2×2, tablo satırı KART olur (yatay taşma yok · KURALLAR §2.5) ──
   .atbl'ın kart reflow'unu (theme:5149) .lst-tbl kapsamında yeniden kurar; global .atbl
   mobil kuralları .lst-tbl satırlarını da hedefler ama .lst-tbl (0,2,0) çıplağı (0,1,0) ezer. */

@media (max-width:920px){
  .lst-stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
  .lst-bar .seg{margin-left:0;width:100%}
}

/* KART yüzeyi TÜM lst tablolarına ORTAK (theme 960 kırılımıyla hizalı); satır-içi hücre
   YERLEŞİMİ yapısal sınıfın theme reflow'undan gelir (.atbl/.atbl--m/--i/--y) — ekran-özel. */

@media (max-width:960px){
  .lst-tbl{background:none;box-shadow:none;overflow:visible}
  .lst-tbl .atbl__h{display:none}
  .lst-tbl .atbl__r{
    padding:14px 15px 13px;margin-bottom:9px;border-radius:13px;border-bottom:0;
    background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  }
  .lst-tbl .atbl__r.sel{box-shadow:inset 0 0 0 1px var(--o40)}
  .lst-tbl .atbl__r::before{border-radius:13px 0 0 13px}
}

/* üyeler kart yerleşimi (ekran-özel; çift sınıf .atbl--u.lst-tbl 0,3,0) — pilot onaylı düzen:
   satır-1 [seç][kimlik][aksiyon], kalan hücreler tam-genişlik alt satırlara iner */

@media (max-width:960px){
  .lst-tbl.atbl--u .atbl__r{grid-template-columns:auto minmax(0,1fr) auto;grid-auto-rows:auto;gap:7px 12px}
  .lst-tbl.atbl--u .atbl__r > .ack{grid-column:1;grid-row:1;align-self:center}
  .lst-tbl.atbl--u .atbl__vid{grid-column:2;grid-row:1;min-width:0}
  .lst-tbl.atbl--u .atbl__acts{grid-column:3;grid-row:1;justify-self:end}
  .lst-tbl.atbl--u .atbl__r > span:nth-child(n+3):not(.atbl__acts){grid-column:1/-1}
}

/* ════════════ YAYMA TUR-2: KUYRUK AİLESİ (.lst-tk) — .tklist/.tkrow FLEX-satır imzası ════════════
   BAĞLAM: A-grubu kuyruk ekranları (destek · kaldırma · başvurular · ortaklık · kayıtlar ·
   yönlendirmeler) `.tklist`(grid gap) sarmalayıcı + `.tkrow` FLEX satır kullanır (grid DEĞİL) →
   `.lst-tbl` grid kuralları BURAYA UYGULANMAZ. Görsel imza-ailesi (yüzey/sol-vurgu-rayı/rafine
   hover/kare-yuvarlak avatar) `.lst-tk` ATA sınıfı altında hizalanır (çift sınıf: `.tklist`/`.tkrow`
   yapısal+envanter sınıfları ve `data-qk-*`/`data-dt-*` JS seçicileri KORUNUR — yalnız görünüm ekler).
   İZOLASYON: tüm kurallar `.lst-tk` atası gerektirir → başka ekran hedeflenmez; ek.css theme'den
   SONRA yüklenir, `.lst-tk .tkrow`(0,3,0) theme `.tkrow`(0,1,0)/`.tkrow:hover`(0,2,0)'yi ezer.
   KARAR — DURUM PİLLERİ `.stat` AYNEN KORUNDU: `.stat` zaten `<i></i>` nokta göstergesi taşır;
   `.lst-badge::before` de nokta üretir → çift-sınıf ÇİFT-NOKTA çakışması olurdu (tur-1'de videolar/
   oyuncular/yöneticiler'de `.stat` aynen korunmuştu — AYNI karar, EKRAN-UYGUN). `.stat` theme'in
   pozitif/negatif/nötr tonlarını taşır; imza rengi rozete değil satır rayına + araç çubuğuna verildi. */

.lst-tk{gap:9px}

.lst-tk .tkrow{position:relative;overflow:hidden;padding-left:17px;transition:box-shadow .14s var(--ease),background .14s var(--ease)}

/* sol vurgu rayı — hover'da turuncuya döner (.lst-tbl satır imzasıyla birebir dil) */

.lst-tk .tkrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .14s var(--ease)}

/* rafine hover: theme'in translateX kaymasını RAY imzasıyla değiştir (lst ailesi kaydırmaz) */

.lst-tk .tkrow:hover{box-shadow:inset 0 0 0 1px var(--o40);transform:none;background:rgba(255,255,255,.02)}

.lst-tk .tkrow:hover::before{background:var(--o40)}

/* öncelikli satır (.hi): theme kırmızı halkası KORUNUR + kırmızı ray imza diline eklenir */

.lst-tk .tkrow.hi::before{background:#FF6A80}

.lst-tk .tkrow.hi:hover{box-shadow:inset 0 0 0 1px rgba(255,31,61,.4)}

/* kimlik avatarı: köşeli-yuvarlak + halka (jenerik yuvarlaktan ayrışan .lst-tbl imzasıyla hizalı) */

.lst-tk .tkrow img{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}

/* ════════════ YAYMA TUR-3: KART/ÖZEL LİSTELER (B grubu) — grid VARSAYMAYAN imza ataları ════════════
   BAĞLAM: B-grubu ekranları TABLO DEĞİL → `.lst-tbl` grid kuralları UYGULANAMAZ. Üç ayrı yapı
   (gelen-videolar `.auvc` kart-grid · kategoriler `.acrow` FLEX sıralanabilir satır · duyurular
   `.txtbl` grid satır) için üç YENİ, grid-varsaymayan ATA sınıfı (`.lst-card`/`.lst-ac`/`.lst-tx`)
   eklenir. Hepsi `.lst-tk`/`.lst-tbl` satır imzasıyla AYNI DİL: sol-vurgu rayı (hover'da yanar) +
   rafine hover (theme kaymasını RAY imzasıyla değiştirir). İZOLASYON: her kural kendi `.lst-*`
   atasını gerektirir → başka ekran hedeflenmez; ek.css theme'den SONRA yüklenir, ata bileşenli
   seçici (0,2,0)/(0,3,0) theme çıplağını (0,1,0)/(0,2,0) ezer. MEVCUT `.lst-*` kuralları BOZULMADI
   (yalnız EKLE). `.stat` durum pilleri A/B kararıyla AYNEN KORUNDU (çift-nokta çakışması önlemi);
   imza rengi rozete değil KART/SATIR sol-rayına verildi. `::before` DAİMA position:absolute →
   flex/grid akışından çıkar (grid'de spurious hücre üretmez). Token: theme var()'ları + yerleşik
   turuncu/pozitif/negatif tonları (palet-dışı yeni renk YOK). */
/* ── gelen-videolar: `.auvc` kart-grid (`.lst-card` atası) ──
   Kart yapısı (foto+gövde flex) KORUNUR; yalnız görsel imza-ailesi biner: sol-vurgu rayı +
   hover lift. `.auvc` flex → `::before` absolute güvenli. Toolbar bu ekranda `.atb`→`.atb lst-bar`
   ile giydirilir; DİKKAT (tur-2 devir notu): bu ekranda toolbar SIRASI `.seg` ÖNCE `.atb__q` SONRA
   (grid-tablo ailesinden TERS). `.lst-bar .atb__q{flex:1}` boş alanı yutar → sonraki `.lst-bar
   .seg{margin-left:auto}` çözümlemede 0 kalır (flex-grow serbest alanı auto-margin'den ÖNCE tüketir)
   → seg SOLDA, arama sağı doldurur; layout SAĞLAM (yatay taşma yok), ekran-özel override GEREKMEDİ. */

.lst-card .auvc{position:relative;overflow:hidden;padding-left:15px;transition:box-shadow .18s var(--ease),transform .18s var(--ease),background .18s var(--ease)}

.lst-card .auvc::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .18s var(--ease)}

.lst-card .auvc:hover{transform:translateY(-1px);box-shadow:inset 0 0 0 1px var(--o40)}

.lst-card .auvc:hover::before{background:var(--orange)}

/* kart küçük-resmi köşeli-yuvarlak halka (`.lst-tbl .atbl__ava` imzasıyla hizalı — jenerik köşeden ayrışır) */

.lst-card .auvc__ph{border-radius:10px;box-shadow:inset 0 0 0 1px var(--line)}

/* ── kategoriler: `.acrow` sıralanabilir FLEX satır (`.lst-ac` atası) ──
   Bu ekranda `.atb` YOK (araç çubuğu `.acadd` formu — dokunulmadı). Sıralama okları (.acrow__ord)
   + bayraklar (.acflag) + aksiyonlar (.atbl__acts) FONKSİYON olarak KORUNUR (yalnız satır yüzeyi
   imzalanır). `.acrow` flex → `::before` absolute güvenli. Özgüllük: `.lst-ac .acrow:hover`(0,3,0) >
   theme `.acrow:hover`(0,2,0). */

.lst-ac{gap:9px}

.lst-ac .acrow{position:relative;overflow:hidden;padding-left:17px;transition:box-shadow .15s var(--ease),background .15s var(--ease)}

.lst-ac .acrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .15s var(--ease)}

.lst-ac .acrow:hover{box-shadow:inset 0 0 0 1px var(--o40);background:rgba(255,255,255,.02)}

.lst-ac .acrow:hover::before{background:var(--o40)}

/* ── duyurular: geçmiş `.txtbl` (grid satır) (`.lst-tx` atası) ──
   `.txtbl__r` GRID → `::before` position:absolute ZORUNLU (yoksa grid'e sahte hücre eklerdi).
   Sol-vurgu rayı + hizalı sol dolgu (başlık+satır aynı padding-left → kolonlar hizalı). Grid
   `grid-template-columns` `.aan__h/.aan__r`'den GELİR (dokunulmadı). Hedef hücresindeki `.pilltag`
   çift-sınıf `.lst-badge` alır (nötr rozet, nokta göstergeli — tur-1 işlemler/yöneticiler emsali;
   `.pilltag` KORUNDU → envanter sağlam; `.stat` DEĞİL → çift-nokta yok). */

.lst-tx .txtbl__h,.lst-tx .txtbl__r{padding-left:19px}

.lst-tx .txtbl__r{position:relative;overflow:hidden;transition:box-shadow .14s var(--ease),background .14s var(--ease)}

.lst-tx .txtbl__r::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:transparent;transition:background .14s var(--ease)}

.lst-tx .txtbl__r:hover::before{background:var(--o40)}

/* ── O2 (OYUNCU): gönderi bahşiş tutar şeridi (.pmodal__tips) ──
   Kaynakta gönderi bahşişi İNERT bir butondu (tutar seçici yoktu); O2'de gerçek
   bahşiş uçlarına bağlandı ve tutarlar (CreditService::BAHSIS) whitelist şeridi
   olarak açılır. theme.css'te karşılığı yok → yalnız bu YENİ öğe için minimal kural.
   Sohbet .chat__tips görsel diliyle hizalı (turuncu çerçeveli kredi çipleri). */

.pmodal__tips{display:flex;flex-wrap:wrap;gap:6px;padding:8px 12px 0}

.pmodal__tips button{padding:5px 11px;border:1px solid var(--o40);border-radius:999px;background:transparent;color:var(--muted);font-size:12px;cursor:pointer;transition:background .15s var(--ease),color .15s var(--ease)}

.pmodal__tips button:hover{background:var(--orange);color:#fff;border-color:var(--orange)}

.pmodal__tips button:disabled{opacity:.6;cursor:default}

/* ════════════════ O3 (OYUNCU): GÖNDERİ FEED'İ ════════════════
   BUG (denetçi kanıtı): theme.css:3129 `.tiles{grid-template-columns:repeat(3,1fr)}` — text
   gönderi de foto gönderi de aynı KAREYE sıkışıyordu ("hepsi fotoğraf gibi"). theme.css
   DOKUNULMAZ (KURALLAR §1); yapısal `.tiles/.tile/.tilewrap/.tile__*` sınıfları E06
   envanteri + postsgrid.js selektörleri için KORUNUR. Görsel akış (feed) yalnız blade'e
   eklenen `.feed`/`.feed-card*` sınıflarıyla BU katmandan gelir. `.feed` özgüllüğü theme
   `.tiles`(0,1,0) kurallarını (0,2,0)+ ile geçer; başka `.tiles` kullanımı yok (yalnız
   gönderi ızgarası) → yayılım riski yok. Mobil-öncelikli, tek kolon, yatay taşma yok (§2.5). */

.tiles.feed{display:flex;flex-direction:column;grid-template-columns:none;gap:14px;max-width:600px;margin-inline:auto}

/* Kart kabuğu — kare karo yerine tam-genişlik sosyal-medya kartı. tilewrap zaten
   position:relative; kart kenarlığı+radyusu BURADA, iç .tile kenarlığı nötrlenir. */

.feed .tilewrap{
  background:var(--surface);border-radius:14px;overflow:hidden;
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s var(--ease);
}

.feed .tilewrap:hover{box-shadow:inset 0 0 0 1px var(--o40)}

/* Karo düğmesi: kareyi (aspect-ratio) + kendi kenarlığını + hover-zıplamasını bırak,
   dikey akışa geç. position:relative KORUNUR (rozet/kilit absolute çocukları için). */

.feed .tile{
  aspect-ratio:auto;display:flex;flex-direction:column;width:100%;
  border-radius:0;overflow:visible;box-shadow:none;background:transparent;text-align:left;
}

.feed .tile:hover{transform:none}

/* ── FOTO/VIDEO KARTI: görsel + altyazı + sayaç çubuğu ── */

.feed-card--photo .tile>img,.feed-card--video .tile>img{
  width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;order:-1;
}

.feed .tile:hover>img{transform:none}

/* feed'de zoom yok (kare karo davranışı iptal) */
/* Kilitli kartta bulanık örtü tüm görseli kaplar (theme .tile.locked img blur korunur). */
/* Altyazı — foto/video kartında görsel altında; .tile__txt hook'u korunur (modal metni
   buradan okunur), feed-card__cap yalnız metin-karosu tipografisinden ayırır. */

.feed-card__cap{
  padding:11px 14px 0;font-size:13.5px;line-height:1.5;color:#CDCCCA;text-align:left;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}

/* ── TEXT KARTI: medyasız, tam-genişlik, büyük tipografi, metin öne çıkar ── */

.feed-card--text .tile{padding:18px 18px 4px}

.feed-card--text .tile__txt{
  font-size:17px;line-height:1.55;color:#EDECEA;text-align:left;
  -webkit-line-clamp:8;   /* metin karosunda daha çok satır (kare 5 idi) */
}

/* ── SAYAÇ ÇUBUĞU (beğeni/yorum) — hover örtüsü değil, daima görünür alt çubuk ──
   .tile__hover hook'u + iç <span>'ler KORUNUR (postsgrid.js modal sayaçlarını buradan
   okur). Bahşiş/paylaş GERÇEK sayaç TAŞIMAZ (uydurma yasak, KURALLAR §8) → tam aksiyon
   çubuğu (bahşiş/paylaş dahil) modalda çalışır; kartta gerçek beğeni+yorum sayısı durur. */

.feed .tile__hover{
  position:static;inset:auto;opacity:1;background:transparent;
  justify-content:flex-start;gap:20px;padding:11px 14px;margin-top:auto;
  border-top:1px solid var(--line);color:var(--muted);font-size:12.5px;font-weight:700;
}

.feed .tile:hover .tile__hover{opacity:1}

.feed .tile__hover svg{width:15px;height:15px}

/* Kilitli kart: kilit örtüsü görsel üstünde ortalı kalır (theme .tile__lock inset:0);
   feed'de görsel kart yüksekliğini verdiği için örtü görseli kaplar. "krediyle aç"
   akışı modaldan aynen sürer (data-unlock). Ek kural gerekmiyor. */
/* Rozet/pin görselin üst köşesinde kalır (theme absolute top:7px); kart üstü = görsel. */
/* İskelet: JS `<div class="tile skel">` doğrudan .feed'e ekler → tam-genişlik kart iskeleti. */

.feed>.tile.skel{aspect-ratio:auto;min-height:280px;border-radius:14px}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM SAYFASI — SIFIRDAN v3 · TEMA-UYUMLU (proje sahibi onayı, 2026-08-21)
   ──────────────────────────────────────────────────────────────────────────
   Önceki iki deneme reddedildi: (1) .px-* React iskeletini/düzenini korumuştu,
   (2) mockup AYRI tasarım diliydi (Bodoni serif / tema-dışı renk). Bu blok
   projenin MEVCUT görsel dilini kullanır: sinematik .hero ailesi, .section/
   .eyebrow/.section__title, .btn varyantları, .plan kart hissi ve .actors
   slider'ı AYNEN yeniden kullanılır. Buradaki .pm2-* sınıflar YALNIZ theme.css
   token'larıyla (--orange/--orange-hi/--panel/--surface/--line/--o08/--o14/
   --o40/--text/--muted/--dim/--ink/--f-display/--f-mono/--r/--ease) ve theme'in
   zaten kullandığı nötr siyahlarla (#0C0C0C, rgba(0,0,0,*)) boyanır. UYDURMA
   marka rengi ya da yabancı font YOK; theme.css'e DOKUNULMADI.
   ══════════════════════════════════════════════════════════════════════════ */
/* ── ince duyuru şeridi + kampanya sayacı (koyu ticker; .house/.pill zemin ritmi) ── */

.pm2-ann{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 16px;padding:11px 16px;border-radius:var(--r-sm);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.pm2-ann__tag{
  flex:none;font:800 10.5px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;
  background:var(--orange);color:var(--ink);border-radius:4px;padding:5px 9px;
}

.pm2-ann__txt{font-size:13px;color:var(--muted)}

.pm2-ann__txt em{font-style:normal;font-family:var(--f-mono);font-weight:700;color:var(--text)}

.pm2-ann__go{margin-left:auto;font-size:12.5px;font-weight:700;color:var(--orange);white-space:nowrap;transition:color .15s}

.pm2-ann__go:hover{color:var(--orange-hi)}

/* ── hero: projenin .hero ailesini miras alır; yalnız premium görselinin kadrajı
      (center 36% — arşiv sahnesi ortalanır) + aktiflik şeridi eklenir ── */

.pm2-hero .hslide__main{object-position:center 36%}

.pm2-live{
  display:inline-flex;align-items:center;gap:8px;margin:18px 0 0;
  font-size:13px;font-weight:600;color:var(--text);
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);border-radius:999px;padding:7px 14px;
}

.pm2-live svg{width:15px;height:15px;stroke:var(--orange);fill:none;stroke-width:2.4}

/* ── değer şeridi: 4 metrik, panel yüzeyinde ince ayraçlı ── */

.pm2-stats{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin:16px 0 0;
  border-radius:var(--r);overflow:hidden;background:var(--line);box-shadow:inset 0 0 0 1px var(--line);
}

.pm2-stats__i{background:var(--panel);padding:18px 16px;text-align:center}

.pm2-stats__i b{display:block;font-family:var(--f-display);font-weight:800;font-size:clamp(19px,2.4vw,26px);letter-spacing:-.02em;color:var(--text)}

.pm2-stats__i span{display:block;margin-top:4px;font-size:11.5px;color:var(--dim)}

/* MADDE 74 + 75 (2026-08-22, proje sahibi): burada duran ÜÇ kural grubu SİLİNDİ.
   (a) .pm2-lock* — "Şu an göremediğin arşiv" kilitli arşiv slider'ı kaldırıldı;
   (b) .pm2-cmp*  — "Ücretsiz ile Premium arasındaki fark" matrisi kaldırıldı
       (aşağıda, karşılaştırma başlığının olduğu yerde);
   (c) .pm2 .plans + .pm2-plan* — plan kartları theme .plan bileşenini miras
       alıyordu; "Uzun seç, daha az öde" bölümü baştan yazıldığı için yeni
       kurallar dosyanın SONUNDAKİ "PREMIUM · FİYAT + SADELEŞTİRME" bölümünde.
   Ölü seçici bırakılmadı. */
/* ── plan bölümü başlık notu ── */

.pm2-note{margin:0;max-width:34ch;text-align:right;font-size:13px;color:var(--muted)}

/* ── seçili plan özeti + satın alma satırı ── */

.pm2-checkout{margin-top:24px;display:grid;gap:14px}

.pm2-pick{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:16px 20px;border-radius:var(--r);
  background:linear-gradient(180deg,var(--o08),var(--panel) 70%);box-shadow:inset 0 0 0 1px var(--o40);
}

.pm2-pick__price{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:0}

.pm2-pick__price s{font-size:14px;color:var(--dim);text-decoration-thickness:1.5px}

.pm2-pick__price b{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);font-weight:800;letter-spacing:-.03em;color:var(--text)}

.pm2-pick__off{font:700 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--orange);background:var(--surface);border-radius:4px;padding:5px 9px}

.pm2-pick__day{margin:0;font-size:12.5px;color:var(--muted)}

.pm2-buy{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:20px 22px;border-radius:var(--r);background:linear-gradient(180deg,var(--panel),rgba(9,9,9,.4));box-shadow:inset 0 0 0 1px var(--line)}

.pm2-buy .btn{padding:15px 32px;font-size:15px;box-shadow:0 16px 34px -14px var(--orange)}

.pm2-buy [data-day-note]{font-size:12px;color:var(--dim);max-width:42ch}

.pm2 .odeme-soon{margin:0;padding:16px 20px;border-radius:var(--r);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);color:var(--muted);font-size:13.5px}

.pm2 .odeme-soon b{display:block;color:var(--orange-hi);font-size:14.5px;margin-bottom:2px}

.pm2-alt{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:2px 0 0;font-size:13px;color:var(--dim)}

.pm2-alt .btn{padding:9px 18px;font-size:13px}

/* ── güvence şeridi ── */

.pm2-trust{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:22px}

.pm2-trust__i{
  display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:background .2s,transform .2s;
}

.pm2-trust__i:hover{background:var(--surface);transform:translateY(-2px)}

.pm2-trust__i svg{width:20px;height:20px;stroke:var(--orange-hi);fill:none;stroke-width:1.8}

.pm2-trust__i b{font-size:14px;font-weight:700;color:var(--text)}

.pm2-trust__i small{font-size:12px;color:var(--muted);line-height:1.45}

/* MADDE 74: karşılaştırma tablosu (.pm2-cmp* + .mx__*) bölümüyle birlikte silindi. */
/* ── SSS: tek-açık akordeon, açık maddede ince altın sol vurgu ── */

.pm2-faq{display:flex;flex-direction:column;gap:10px}

.pm2-faq__item{border-radius:13px;overflow:hidden;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s}

.pm2-faq__item.open{box-shadow:inset 0 0 0 1px var(--o40),inset 3px 0 0 var(--orange)}

.pm2-faq__q{display:flex;align-items:center;gap:14px;width:100%;padding:17px 20px;text-align:left;font-size:14.5px;font-weight:600;color:var(--text);cursor:pointer}

.pm2-faq__n{font:700 12px/1 var(--f-mono);color:var(--dim);flex:none}

.pm2-faq__item.open .pm2-faq__n{color:var(--orange-hi)}

.pm2-faq__q>i{margin-left:auto;width:12px;height:12px;flex:none;position:relative}

.pm2-faq__q>i::before,.pm2-faq__q>i::after{content:"";position:absolute;background:var(--muted);transition:.2s var(--ease)}

.pm2-faq__q>i::before{left:0;right:0;top:5px;height:2px}

.pm2-faq__q>i::after{top:0;bottom:0;left:5px;width:2px}

.pm2-faq__item.open .pm2-faq__q>i::before{background:var(--orange-hi)}

.pm2-faq__item.open .pm2-faq__q>i::after{transform:scaleY(0)}

.pm2-faq__a{max-height:0;overflow:hidden;padding:0 20px;font-size:13.5px;line-height:1.6;color:var(--muted);transition:max-height .28s var(--ease),padding .28s var(--ease)}

.pm2-faq__item.open .pm2-faq__a{max-height:280px;padding:0 20px 18px}

/* ── mobil sabit satın alma çubuğu (masaüstünde gizli) ── */

.pm2-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;display:none;align-items:center;gap:14px;
  padding:10px var(--pad);padding-bottom:calc(10px + env(safe-area-inset-bottom));
  background:rgba(9,9,9,.96);border-top:1px solid var(--o14);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
}

.pm2-bar__info{display:flex;flex-direction:column;min-width:0;flex:1}

.pm2-bar__info b{font-family:var(--f-display);font-weight:800;font-size:16px;color:var(--orange-hi)}

.pm2-bar__info small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.pm2-bar .btn{padding:12px 22px;min-width:128px;justify-content:center}

/* ══ RESPONSIVE (375 + 1280, yatay taşma yok) ══ */

@media (max-width:900px){
  .pm2-note{text-align:left;max-width:none}
}

@media (max-width:700px){
  .pm2-ann{flex-direction:column;gap:6px;text-align:center}
  .pm2-ann__go{margin-left:0}
  .pm2-stats{grid-template-columns:1fr 1fr}
  .pm2-pick{flex-direction:column;align-items:flex-start;gap:8px}
  .pm2-buy{display:none}
  .pm2-trust{grid-template-columns:1fr 1fr}
  .pm2-bar{display:flex}
}

/* ── ANASAYFA · 3. HERO SLAYTI · DIKEY TANITIM VIDEOSU ──────────────────────
   GEREKCE: 3. slaytin (index 2) `.hslide__main` gorseli yerine dikey 9:16
   (720x1280) "Coming soon" videosu render edilir. Video, gorselle AYNI konumu
   (`.hslide__main`: sag panel, sol-kenar mask, ken-burns) miras alir; bu blok
   yalnizca dikey videonun YATAY hero'da estetik durmasi icin gereken ekleri
   koyar. theme.css'e DOKUNULMADI; katman/okunurluk (grade z1 / grain z2)
   videonun USTUNDE kaldigi icin hero metni (.hcontent) gorseldeki kadar okunur. */

.hslide__video {
  /* Dikey video yatay panelde: cover + merkez => sinematik orta kadraj, yanlar
     zarif kirpilir (object-position inline `pos` ile kaynaktan gelir). */
  object-fit: cover;
  /* Poster/ilk-kare boyanana dek beyaz parlama olmasin. */
  background: #050505;
  /* Dekoratif katman: dokunma/kaydirma slider'a gitsin, native video jesti
     araya girmesin (gorseller de tiklamayi yutmaz — ayni davranis). */
  pointer-events: none;
}

/* Mobil (§2.5): .hslide__main mobil kurali (width:100% + alt-kenar mask) miras
   alinir; object-fit:cover kisa seride de merkezden kirptigi icin yatay tasma
   olmaz, muted+playsinline mobilde autoplay'e izin verir — ek kural gerekmez. */
/* ── VIDEO PLAYER · ONAYLI MOCKUP (.pv/.ctl/.seek/.menu) ────────────────────
   GEREKCE: proje sahibi onayli player-mockup.html BIREBIR canliya tasindi
   (2026-08-21 karari, BILINCLI-SAPMA). Eski .pl__* iskeleti terk edildi; bu blok
   mockup'in TUM gorsel dilini (gradient overlay, orange progress glow, big-play
   pulse, buffering spinner, smooth transitions) tema token'lariyla kurar. theme.css'e
   DOKUNULMADI (KURALLAR §1). Mockup somut hex'leri -> token: #FF9000 var(--orange),
   #FFB13D var(--orange-hi), rgba(255,144,0,.22) var(--o40), #F2F0F5 var(--text),
   #9E9AA6 var(--muted), #65616E var(--dim), 14px var(--r), --shadow/--ease token.
   Video ustundeki notr beyaz/siyah cizgiler ISLEVSEL overlay rengidir (kaynak
   deseni). Jenerik sinif adlari (.b/.row/.chip/.sp/.menu/.time/.seek/.vol/.ctl)
   yalniz .pv icinde SCOPED yazilir -> site geneli .chip/.sp ile CAKISMAZ. */
/* kok: 16:9 sahne, gercek video + kontroller ustte */

.pv{position:relative;width:100%;background:#000;border-radius:var(--r);aspect-ratio:16/9;
  overflow:hidden;box-shadow:var(--shadow);user-select:none;isolation:isolate}

.pv.-fs{max-width:none;width:100vw;height:100vh;border-radius:0;aspect-ratio:auto;position:fixed;inset:0;z-index:130}

.pv video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000;cursor:pointer;z-index:1}

/* gradient overlay (kontrol/rozet gorununce) */

.pv__grad{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .3s var(--ease);z-index:2;
  background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,transparent 22%,transparent 62%,rgba(0,0,0,.72) 100%)}

.pv.-show .pv__grad,.pv.-paused .pv__grad{opacity:1}

/* buyuk oynat (pulse efekti) */

.pv__big{position:absolute;inset:0;margin:auto;width:78px;height:78px;border:0;border-radius:50%;z-index:4;
  background:rgba(20,20,24,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.12),0 14px 40px -12px rgba(0,0,0,.8);
  transition:transform .3s var(--ease),opacity .3s var(--ease),background .2s}

.pv__big:hover{transform:scale(1.07);background:var(--orange)}

.pv__big svg{width:34px;height:34px;margin-left:3px}

.pv:not(.-paused) .pv__big{opacity:0;transform:scale(.6);pointer-events:none}

.pv__big.-pulse{animation:pv-pulse .5s var(--ease)}

@keyframes pv-pulse{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.6);opacity:0}}

/* buffering spinner */

.pv__buf{position:absolute;inset:0;margin:auto;width:46px;height:46px;z-index:4;pointer-events:none;opacity:0;
  border:3px solid rgba(255,255,255,.18);border-top-color:var(--orange);border-radius:50%}

.pv.-buffering .pv__buf{opacity:1;animation:pv-spin .8s linear infinite}

@keyframes pv-spin{to{transform:rotate(360deg)}}

@media (prefers-reduced-motion:reduce){.pv.-buffering .pv__buf{animation-duration:1.6s}}

/* rozetler */

.pv__tag{position:absolute;top:14px;left:14px;z-index:3;display:flex;gap:7px;transition:opacity .3s}

.pv:not(.-show):not(.-paused) .pv__tag{opacity:0}

.pv__tag span{font-size:11px;font-weight:700;letter-spacing:.04em;padding:5px 9px;border-radius:6px;color:var(--text);
  background:rgba(9,9,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12)}

.pv__tag .-q{color:var(--orange-hi)}

.pv__tag .-new{color:var(--orange-hi)}

/* Dikey mod (reels) butonu */

.pv__reels{position:absolute;top:14px;right:14px;z-index:3;display:flex;align-items:center;gap:6px;
  font-size:12px;font-weight:700;color:var(--text);padding:6px 11px;border-radius:99px;cursor:pointer;
  background:rgba(9,9,11,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.12);
  transition:border-color .15s,color .15s}

.pv__reels svg{width:16px;height:16px}

.pv__reels:hover{border-color:var(--orange);color:var(--orange-hi)}

.pv:not(.-show):not(.-paused) .pv__reels{opacity:0;pointer-events:none}

/* kilit (premium) overlay */

.pv__lock{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;padding:20px;background:radial-gradient(circle at 50% 42%,rgba(0,0,0,.35),rgba(0,0,0,.78));
  transition:opacity .3s}

.pv__lock svg{width:34px;height:34px;color:var(--orange)}

.pv__lock b{font-size:16px;font-weight:800;color:var(--text)}

.pv__lock p{font-size:12.5px;color:var(--muted)}

.pv__lockcta{display:flex;gap:8px;margin-top:6px;flex-wrap:wrap;justify-content:center}

.pv.-paused.-locked .pv__big{display:none}

/* cift-dokun ileri/geri geri bildirimi (mobil) */

.pv__tap{position:absolute;top:50%;translate:0 -50%;z-index:6;width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;font-size:12px;font-weight:800;color:#fff;background:rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .18s}

.pv__tap--l{left:8%}

.pv__tap--r{right:8%}

.pv__tap.on{opacity:1}

.pv__tap::before{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,255,255,.35)}

/* kontrol cubugu */

.pv .ctl{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 12px 10px;
  transition:opacity .3s var(--ease),transform .3s var(--ease)}

.pv:not(.-show):not(.-paused) .ctl{opacity:0;transform:translateY(8px);pointer-events:none}

/* seek */

.pv .seek{position:relative;height:16px;display:flex;align-items:center;cursor:pointer;margin-bottom:2px;touch-action:none}

.pv .seek__track{position:relative;width:100%;height:4px;border-radius:3px;background:rgba(255,255,255,.22);transition:height .15s}

.pv .seek:hover .seek__track{height:6px}

.pv .seek__buf{position:absolute;left:0;top:0;height:100%;border-radius:3px;background:rgba(255,255,255,.30)}

.pv .seek__fill{position:absolute;left:0;top:0;height:100%;border-radius:3px;
  background:linear-gradient(90deg,var(--orange),var(--orange-hi));box-shadow:0 0 10px var(--o40)}

.pv .seek__dot{position:absolute;top:50%;width:13px;height:13px;border-radius:50%;background:var(--orange-hi);
  transform:translate(-50%,-50%) scale(0);transition:transform .15s var(--ease);box-shadow:0 0 0 4px var(--o40)}

.pv .seek:hover .seek__dot{transform:translate(-50%,-50%) scale(1)}

.pv .seek__mark{position:absolute;top:50%;transform:translateY(-50%);width:3px;height:10px;border-radius:2px;background:rgba(255,255,255,.6)}

.pv .seek__tip{position:absolute;bottom:20px;transform:translateX(-50%);background:#000;border:1px solid rgba(255,255,255,.12);
  color:#fff;font-size:11px;font-weight:600;font-variant-numeric:tabular-nums;padding:4px 7px;border-radius:5px;opacity:0;
  transition:opacity .12s;pointer-events:none;white-space:nowrap}

.pv .seek:hover .seek__tip{opacity:1}

/* hover thumbnail onizleme (kare snapshot) */

.pv .seek__thumb{position:absolute;bottom:22px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;
  gap:4px;pointer-events:none;z-index:8}

.pv .seek__thumb.on{display:flex}

.pv .seek__thumbc{width:160px;height:90px;border-radius:var(--r-sm);background:#000;object-fit:cover;
  box-shadow:0 8px 24px -8px #000,0 0 0 1px rgba(255,255,255,.12)}

.pv .seek__thumbt{font-size:11px;font-weight:700;color:#fff;font-variant-numeric:tabular-nums;background:rgba(0,0,0,.72);padding:1px 7px;border-radius:99px}

/* kontrol satiri */

.pv .row{display:flex;align-items:center;gap:5px}

.pv .b{width:38px;height:38px;border:0;background:transparent;color:var(--text);cursor:pointer;border-radius:9px;
  display:grid;place-items:center;transition:background .15s,color .15s,transform .1s}

.pv .b:hover{background:rgba(255,255,255,.12);color:#fff}

.pv .b:active{transform:scale(.92)}

.pv .b svg{width:22px;height:22px}

.pv .b.-big svg{width:26px;height:26px}

.pv .time{font-size:12.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--text);padding:0 6px;white-space:nowrap}

.pv .time i{color:var(--dim);font-style:normal;margin:0 3px}

.pv .sp{flex:1;display:block;min-width:0}

/* ── CHIP · P2 #7 SIFIRDAN (proje sahibi: "css kaymis, secenekler cikmiyor") ──
   KOK NEDENLER (olculdu, 2026-08-22):
   (a) Kalite chip'i <span> — inline akista height/padding tutmuyordu; ustelik theme.css:595
       genel `.chip` (padding 8px 15px / radius 5 / raised zemin) ve theme:3934 mobil ezmesi
       siziyor, iki chip farkli kutu modeline duserek satirda KAYIYORDU.
   (b) Satir hicbir yerde daralmiyor (`flex:none`) → 401-520px arasi son buton (tam ekran)
       `.pv{overflow:hidden}` tarafindan KIRPILIYORDU (414px'te 28px tasma olculdu).
   Cozum: her iki chip TEK kutu modeli (inline-flex, sabit yukseklik, dikey ortali,
   satir yuksekligiyle hizali) + agresif ve TUTARLI gizleme esikleri (asagida). */

.pv .chip{display:inline-flex;align-items:center;justify-content:center;flex:none;box-sizing:border-box;
  height:34px;min-width:0;padding:0 12px;line-height:1;white-space:nowrap;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);
  color:var(--text);border-radius:8px;font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .15s,background .15s,color .15s}

.pv .chip:hover{border-color:var(--orange);color:var(--orange-hi)}

.pv .chip:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--o40)}

/* Menu ACIK durumu: chip turuncu yanar (player.js artik aria-expanded'i gercekten surer). */

.pv .chip[aria-expanded="true"]{border-color:var(--orange);color:var(--orange-hi);background:var(--o08)}

/* Sag grup sirasi DOM'dan gelir (hiz -> kalite -> pip -> theater -> fs); .row
   sarmaz, butonlar sikismaz — dar ende kural: once vol slider, sonra ±10, sonra kalite chip. */

.pv .row{flex-wrap:nowrap;min-width:0}

.pv .row > *:not(.sp){flex:none}

/* Sure etiketi son care olarak daralabilsin (kirpilma yerine ellipsis): dar aralarda
   butonlarin sahne disina tasmasini engelleyen emniyet supabi. */

.pv .time{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* ses */

.pv .vol{display:flex;align-items:center}

.pv .vol__s{width:0;overflow:hidden;transition:width .2s var(--ease);display:flex;align-items:center}

.pv .vol:hover .vol__s,.pv .vol:focus-within .vol__s{width:78px}

.pv .vol__s input{width:70px;margin:0 6px;accent-color:var(--orange);cursor:pointer}

/* ── HIZ MENUSU · P2 #7 SIFIRDAN ──
   KOK NEDEN: 7 satirlik dusey liste (~277px) oynaticinin `overflow:hidden` sahnesinden
   TASIYOR, `.pv` onu KIRPIYORDU. 390px telefonda menuye kalan yukseklik 99px olculdu —
   7 secenekten yalnizca 2'si goruluyordu (proje sahibi: "secenekler cikmiyor").
   COZUM: menu DAIMA kontrol cubugunun USTUNDE ve sahne icinde kalir; masaustunde sag
   hizali dusey liste (mockup gorunumu birebir), <768'de 4 kolonlu IZGARA — 7 secenek
   iki satira sigar, kirpilma YOK, her hucre >=40px dokunma hedefi.
   Menu z-index (9) rozet/reels butonlarinin (3) uzerinde; sahne yuksekligi asla asilmaz. */

.pv .menu{position:absolute;right:12px;bottom:76px;z-index:9;width:210px;max-width:calc(100% - 24px);
  max-height:calc(100% - 92px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;
  /* .96 idi: altindaki "Dikey mod" butonunun kenarligi menunun icinden siziyordu. */
  background:rgba(18,18,22,.985);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:6px;opacity:0;transform:translateY(8px) scale(.97);
  pointer-events:none;transition:opacity .2s var(--ease),transform .2s var(--ease);box-shadow:var(--shadow)}

.pv .menu.-on{opacity:1;transform:none;pointer-events:auto}

.pv .menu__t{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--dim);padding:6px 10px 4px}

/* Satirlar artik <button> (player.js): UA dugme kabugunu sifirla, mockup gorunumu kalsin. */

.pv .menu__i{display:flex;align-items:center;justify-content:space-between;gap:8px;width:100%;
  min-height:34px;padding:6px 10px;border:0;background:transparent;border-radius:8px;cursor:pointer;
  font:inherit;font-size:13px;font-weight:600;color:var(--text);text-align:left;
  -webkit-tap-highlight-color:transparent;transition:background .12s}

.pv .menu__i:hover{background:rgba(255,255,255,.08)}

.pv .menu__i:focus-visible{outline:none;background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1px var(--o40)}

.pv .menu__i.-act{color:var(--orange-hi)}

.pv .menu__lbl{white-space:nowrap}

.pv .menu__n{font-style:normal;color:var(--dim);font-weight:600}

.pv .menu__i.-act .menu__n{color:var(--orange-hi)}

.pv .menu__i .-v{font-size:12.5px;color:var(--muted);font-weight:600}

.pv .menu__i.-act .-v{color:var(--orange-hi)}

.pv .menu hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:4px 0}

/* Genis (theater) mod: ana sutun genisler, sag sutun asagi akar */

body.pv-theater .vp__grid{grid-template-columns:1fr}

body.pv-theater .vp__side{max-width:none}

.pv.-theater{border-radius:0}

/* ═══ RESPONSIVE — MOBIL (proje sahibi sarti: dokunma-dostu, yatay tasma YOK) ═══ */

@media (max-width:767px){
  /* Dokunma hedefleri ≥44px (§2.5 / WCAG). */
  .pv .b{width:44px;height:44px;border-radius:11px}
  .pv .b svg{width:24px;height:24px}
  .pv .row{gap:2px}
  /* dar en: kontrol cubugu dolgusu + sure etiketi kucultulur (yatay tasma YOK) */
  .pv .ctl{padding-left:8px;padding-right:8px}
  .pv .time{padding:0 3px;font-size:12px}
  /* Seek kalin + dokunmaya uygun (hover yok). */
  .pv .seek{height:24px}
  .pv .seek__track{height:5px}
  .pv .seek__dot{transform:translate(-50%,-50%) scale(1)}
  /* Ses slider'i dokunmada gizli (mute + cihaz sesi). Ayarlar ikonu KALDIRILDIGI icin
     (2026-08-21) hiz/kalite chip'leri mobilde GORUNUR kalir — tek erisim yolu bunlar. */
  .pv .vol__s{display:none}
  /* Chip'ler dokunma-dostu: >=40px ve buton satiriyla ayni dikey eksende. */
  .pv .chip{height:40px;padding:0 12px;font-size:12.5px;border-radius:10px}
  .pv .-theateronly,.pv [data-pip]{display:none}
  /* MENU MOBILDE IZGARA: 4 kolon x 2 satir = 7 secenek TAMAMEN gorunur (kaydirma/
     kirpilma yok). Kontrol cubugunun ustunde, sahne genisligine yayilir. */
  .pv .menu{left:8px;right:8px;bottom:88px;width:auto;max-width:none;max-height:calc(100% - 96px);
    display:grid;grid-template-columns:repeat(4,1fr);gap:4px;padding:8px;
    transform:translateY(10px) scale(.98)}
  .pv .menu.-on{transform:none}
  .pv .menu__t{grid-column:1/-1;padding:0 2px 2px}
  .pv .menu__i{justify-content:center;gap:4px;min-height:40px;padding:6px 4px;font-size:13px}
  /* "(Normal)" eki izgara hucresine sigmaz — hiz degeri + secim isareti kalir. */
  .pv .menu__n{display:none}
  .pv .menu__i .-v{font-size:12px}
  .pv .seek__thumbc{width:120px;height:68px}
  .pv .seek__tip{font-size:12px}
  /* Dikey mod butonu: dokunma hedefi ≥44px, kosede duzgun, tasma YOK (proje sahibi #2). */
  .pv__reels{top:calc(10px + env(safe-area-inset-top));right:10px;min-height:44px;padding:0 14px;
    font-size:12.5px;max-width:calc(100% - 20px)}
  .pv__reels svg{width:18px;height:18px;flex:none}
  /* Tam ekranda centik/safe-area guvenli alan. */
  .pv.-fs .ctl{padding-bottom:calc(10px + env(safe-area-inset-bottom));
    padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}

  /* ── KILITLI (premium) VIDEO · P2 #7 (olculdu) ──
     16:9 sahne telefonda ~200px. `.pv__lock` dikey ORTALANDIGI icin CTA'lar kontrol
     cubugunun UZERINE biniyor, rozetler de baslik metnine giriyordu ("css kaymis").
     Duraklatilmis+kilitli durumda sahneyi PANEL sahiplenir (henuz oynayan bir sey
     yok); "Teaser'ı izle" ile -paused kalkar, kontroller aynen geri doner. */
  .pv.-locked.-paused .ctl,
  .pv.-locked.-paused .pv__tag,
  .pv.-locked.-paused .pv__reels{opacity:0;pointer-events:none}
  .pv__lock{padding:14px;gap:6px}
  .pv__lock svg{width:26px;height:26px}
  .pv__lock b{font-size:14.5px;line-height:1.3}
  .pv__lock p{font-size:11.5px;line-height:1.35;margin:0}
  .pv__lockcta{margin-top:2px;width:100%;gap:6px;flex-wrap:nowrap}
  .pv__lockcta .btn{flex:1;min-width:0;height:42px;padding:0 10px;font-size:13px;justify-content:center}
}

/* 400px altinda sahne 155-175px'e iner: kilit ikonu cikar (★ Premium zaten metinde). */

@media (max-width:400px){
  .pv__lock svg{display:none}
  .pv__lock b{font-size:13.5px}
}

/* ── DAR EKRAN GIZLEME ESIKLERI (P2 #7: olculmus, TUTARLI) ──
   Kontrol satirinin gercek genisligi (mobil olculeri): oynat 44 + ±10 88 + ses 44 +
   sure ~84 + hiz chip ~33 + kalite chip ~40 + tam ekran 44 + 8 bosluk = ~393px.
   Sahne genisligi = viewport - 48 (ana dolgu 32 + ctl dolgu 16). Yani TUM set ancak
   ~441px'ten sonra sigar; onceki esik 400px oldugu icin 401-520 arasinda TAM EKRAN
   BUTONU sahne disina tasip kirpiliyordu (414px'te 28px olculdu).
   Yeni esikler emniyet payli: ±10 butonlari <=520px, kalite bilgi chip'i <=440px'te
   cikar. Kaybolan islev yok — ileri/geri cift-dokunmayla, kalite `.pv__tag` rozetinde. */

@media (max-width:520px){
  .pv .b[data-skip]{display:none}
}

@media (max-width:440px){
  .pv .chip--info{display:none}
  /* COK KISA SAHNE: 16:9 oynatici 440px'in altinda ~220px'e iner; menu kontrol
     cubugunun ustune sigmaz (olculdu: 390px'te 105px yer var, izgara 123px).
     Bu esikten sonra menu sahneyi KAPLAYAN dikey-ortali bir katman olur — hicbir
     secenek kirpilmaz, dokunma hedefleri buyuk kalir. */
  .pv .menu{top:8px;bottom:8px;left:8px;right:8px;max-height:none;align-content:center;
    background:rgba(12,12,15,.95)}
}

/* ═══ DIKEY MOD (reels) GERCEK VIDEO — minimal tiktok tarzi kontroller (2026-08-21) ═══
   reel__* iskeleti theme.css'te (ENVANTER E03); asagidakiler ADDITIVE yeni siniflar
   (video katmani + oynat gostergesi + ince ilerleme). Guvenlik: kaynak blob (player gibi).
   reel__acts/info/lock theme.css'te z-index:10 -> video (z:2) altinda kalir, ustte gorunur. */

.reel__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000;z-index:2}

.reel__play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:8;
  width:74px;height:74px;border-radius:50%;display:grid;place-items:center;border:0;cursor:pointer;color:#fff;
  background:rgba(0,0,0,.42);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;pointer-events:none;transition:opacity .18s var(--ease)}

.reel__play svg{width:34px;height:34px;margin-left:2px}

/* Duraklatinca (video oynamıyorken) buyuk oynat gostergesi belirir. */

.reel:not(.-playing) .reel__play{opacity:1}

/* Ince ilerleme cubugu (altta) — dokunmayi engellemez. */

.reel__seek{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:9;
  background:rgba(255,255,255,.18);pointer-events:none}

.reel__seek i{display:block;height:100%;width:0;background:var(--orange);transition:width .12s linear}

/* Ses ac/kapa aktif durum rengi. */

.reels__mute.on{background:var(--orange);color:var(--ink)}

/* ═══ VIDEO ETKİLEŞİM · A-Z BACKEND (2026-08-21) — hepsi ADDITIVE, theme.css DOKUNULMADI ═══ */
/* ── Kalite chip PASİF BİLGİ (secici kaldirildi): tiklanmaz, kaynak kalitesini gosterir.
   P2 #7: `pointer-events:none` KALDIRILDI — <span> zaten tiklanamaz/odaklanamaz, ama o
   kural `title` ipucunu da olduruyordu (aria-disabled ile birlikte pasifligi anlatan tek
   gorunur isaret oydu). Hover/aktif tepkisi notr kalir: pasif oldugu bakinca anlasilir. ── */

.pv .chip--info{cursor:default;color:var(--muted);background:transparent;border-style:dashed;
  letter-spacing:.04em;user-select:none}

.pv .chip--info:hover,.pv .chip--info:active{border-color:rgba(255,255,255,.12);color:var(--muted);background:transparent}

/* ── Yorum yanitlari (video detay + reels paneli ORTAK) ── */
/* Yanit kabi: sol turuncu cizgi ile girintili; 1 seviye ic ice. */

.cmt__replies{margin:10px 0 0;padding-left:14px;border-left:2px solid var(--line);display:grid;gap:14px}

.cmt__replies[hidden]{display:none}

.cmt__item--reply img{width:30px;height:30px}

/* "N yanıt" goster/gizle dugmesi. */

.cmt__toggle{margin-top:6px;padding:4px 2px;font-size:12px;font-weight:700;color:var(--orange);
  background:transparent;border:0;cursor:pointer;border-radius:6px}

.cmt__toggle[hidden]{display:none}

.cmt__toggle:hover{color:var(--orange-hi)}

/* Yanit yazma formu (ana formun kompakt hali). */

.cmt__form--reply{margin:10px 0 2px}

.cmt__form--reply img{width:30px;height:30px}

/* ── Dikey mod (reels) YORUM PANELİ — mobil bottom-sheet / masaustu yan panel ── */
/* .reels position:fixed z:100 (theme); panel + scrim onun icinde absolute. */

.reels__cmtscrim{position:absolute;inset:0;z-index:40;background:rgba(0,0,0,.55);
  opacity:0;transition:opacity .2s var(--ease)}

.reels__cmtscrim.-on{opacity:1}

.reels__cmtscrim[hidden]{display:none}

.reels__cmt{position:absolute;z-index:41;display:flex;flex-direction:column;
  background:var(--surface);box-shadow:var(--shadow);
  /* masaustu: sag yan panel */
  top:0;bottom:0;right:0;width:min(420px,42vw);border-left:1px solid var(--line);
  transform:translateX(100%);transition:transform .26s var(--ease)}

.reels__cmt.-on{transform:none}

.reels__cmt[hidden]{display:none}

.reels__cmthead{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line);flex:none}

.reels__cmthead b{font-family:var(--f-display);font-size:16px;font-weight:800;letter-spacing:-.015em;color:var(--text)}

.reels__cmtx{margin-left:auto;width:34px;height:34px;border:0;border-radius:50%;background:var(--raised);
  color:var(--text);cursor:pointer;display:grid;place-items:center}

.reels__cmtx svg{width:18px;height:18px}

.reels__cmtx:hover{background:var(--line)}

.reels__cmtbody{flex:1;min-height:0;overflow-y:auto;padding:16px 18px calc(18px + env(safe-area-inset-bottom))}

/* Panel icindeki .cmt ust boslugunu sifirla (theme .cmt margin-top:30px). */

.reels__cmtbody .cmt{margin-top:0}

@media (max-width:767px){
  /* Bottom-sheet: alttan yukselir, dokunma-dostu, safe-area. */
  .reels__cmt{top:auto;left:0;right:0;bottom:0;width:auto;height:74vh;max-height:74vh;
    border-left:0;border-top:1px solid var(--line);border-radius:16px 16px 0 0;
    transform:translateY(100%)}
  .reels__cmt.-on{transform:none}
  .reels__cmtx{width:40px;height:40px}
}

/* ── Bildir (rapor) modali — video detay sayfasi ── */

.rprt{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:20px;
  opacity:0;transition:opacity .18s var(--ease)}

.rprt.-on{opacity:1}

.rprt__scrim{position:absolute;inset:0;background:rgba(0,0,0,.6)}

.rprt__box{position:relative;width:min(440px,100%);background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);box-shadow:var(--shadow);padding:20px;transform:translateY(8px);transition:transform .2s var(--ease)}

.rprt.-on .rprt__box{transform:none}

.rprt__box header{display:flex;align-items:center;margin-bottom:14px}

.rprt__box header b{font-family:var(--f-display);font-size:17px;font-weight:800;letter-spacing:-.015em;color:var(--text)}

.rprt__box header button{margin-left:auto;width:32px;height:32px;border:0;border-radius:50%;background:var(--raised);
  color:var(--text);font-size:20px;line-height:1;cursor:pointer}

.rprt__box header button:hover{background:var(--line)}

.rprt__lead{margin:0 0 12px;font-size:13px;color:var(--muted)}

.rprt__opt{display:flex;align-items:center;gap:10px;padding:10px 12px;margin-bottom:8px;font-size:13.5px;color:var(--text);
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;transition:.14s}

.rprt__opt:hover{border-color:var(--o40)}

.rprt__opt input{accent-color:var(--orange);width:16px;height:16px;flex:none}

.rprt__box textarea{width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:var(--raised);color:var(--text);font:inherit;font-size:13.5px;resize:vertical;min-height:64px}

.rprt__box textarea:focus{border-color:var(--o40);outline:none}

.rprt__acts{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}

@media (max-width:767px){
  .rprt__box textarea{font-size:16px}   /* iOS zoom onler */
  .rprt__opt{padding:12px 13px}
}

/* ════════════ STORIES — header alti serit + tam ekran hikaye izleyici ════════════
   ONAYLI MOCKUP birebir (proje sahibi 2026-08-21; onceki surum reddedildi, mockup
   gorulup denenip onaylandi). ADDITIVE; theme.css DOKUNULMADI.
   HEX→TOKEN eslemesi (mockup → theme.css): #FF9000→var(--orange) [birebir] ·
   #FFB13D→var(--orange-hi) [#FFB443 en yakin] · #D96E00→var(--orange-deep)
   [#C96A00 en yakin] · #09090B→var(--bg) · rgba(255,255,255,.10)→var(--line) ·
   #F2F0F5→var(--text) · #9E9AA6(mockup --dim)→var(--muted) · #65616E(mockup
   --faint)→var(--dim) · ease→var(--ease). Video USTU beyaz/siyah rgba'lar tema
   token'i DEGIL: izleyici her temada video uzerinde koyu zemindir, mockup'tan aynen.
   SINIF SAPMASI (gerekce): mockup'in `.sv` on eki theme.css'in .sv bileseniyle
   (parental/removal/submit-video sayfalari) CAKISIYOR — ayni ad o sayfalari bozar
   (onceki surumun bug kaynagi). Izleyici `.stv` on ekine tasindi; yapi/stil birebir. */
/* ── SERIT ── mockup .stories tabani + proje sahibi REVIZYONU (2026-08-21):
   (1) ORTALAMA: dis .stories flex+center, ic .stories__in gercek scroll konteyneri
       (max-width:100%) — sigarsa ortada, sigmazsa soldan baslayip kayar. `safe
       center` yerine sarmalayici deseni: scroll konteynerinde `safe` Safari'de
       degisken destekli, bu desen her tarayicida ayni davranir.
   (2) BIR KADEME KUCUK: halka 52-64px (58-74 idi), oge 60-72px, dikey ritim
       hafifletildi — header altinda ince zarif bant.
   (3) PIKSEL DISIPLINI: halka kalinligi 2.5px, ic bosluk halkasi 2px, halka-etiket
       6px, etiket 10.5-11.5px +.01em, altta 1px var(--line) ayirici (hero ayri,
       kendi margin'li bolum — cakisma yok). Yatay padding YOK: canlida main zaten
       `padding:24px var(--pad)` uyguluyor (mockup bagimsiz sayfaydi). */
/* REVIZYON-2 (proje sahibi ekran goruntusu, 2026-08-21): "cizgiye cok yakin, margin
   kotu, kaba, premium degil" → NEFES ALANI: header cizgisinden 18px uzak, altta sert
   border yerine ortadan sonen HAIRLINE (gradient), halka 2px ince + yumusak turuncu
   glow, daha kucuk (50-58px), ogeler arasi daha genis hava, etiket 8px asagida ve
   daha hafif. Izlenmis: halka --line, gorsel grayscale — sessiz ama okunur. */
/* REVIZYON-3 (proje sahibi 2026-08-21): "cok yer kapliyor, ustte/altta bosluk fazla,
   daha minimal, dikkat cekmeyen ozel alan" → dikey ritim SIKILASTI (10/6), halka
   46-52px, glow hafif, etiket 10px; hairline daha soluk. Sessiz, ince bir bant. */

.stories{
  display:flex;justify-content:center;
  padding:10px 0 6px;margin:0 0 4px;
  background:linear-gradient(90deg,transparent 12%,var(--line) 50%,transparent 88%) bottom/100% 1px no-repeat;
}

.stories__in{
  display:flex;gap:clamp(12px,2.4vw,18px);max-width:100%;
  padding:2px 6px 6px;
  overflow-x:auto;overscroll-behavior-x:contain;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
  scroll-snap-type:x proximity;
}

.stories__in::-webkit-scrollbar{display:none}

.story{
  flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:6px;
  background:none;border:0;padding:0;cursor:pointer;scroll-snap-align:start;
  width:clamp(58px,13.5vw,70px);-webkit-tap-highlight-color:transparent;
}

.story__ring{
  /* Yukseklik ACIKCA (aspect-ratio degil — img attr'lari halkayi oval yapiyordu). */
  position:relative;width:clamp(46px,11.5vw,52px);height:clamp(46px,11.5vw,52px);
  border-radius:50%;padding:2px;
  background:conic-gradient(from 200deg,var(--orange-hi),var(--orange) 40%,var(--orange-deep) 70%,var(--orange-hi));
  box-shadow:0 4px 12px -8px rgba(255,144,0,.4);
  transition:transform .25s var(--ease),box-shadow .25s var(--ease),filter .25s;
}

.story:hover .story__ring{transform:translateY(-2px);box-shadow:0 8px 18px -8px rgba(255,144,0,.6)}

.story:active .story__ring{transform:scale(.96)}

.story:focus-visible{outline:none}

.story:focus-visible .story__ring{box-shadow:0 0 0 3px var(--o40)}

.story.-seen .story__ring{background:var(--line);box-shadow:none}

.story.-seen img{filter:grayscale(.6);opacity:.55}

.story__ring::after{ /* ic bosluk halkasi 2px — gorsel zeminden ayrilsin */
  content:"";position:absolute;inset:2px;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--bg);pointer-events:none;
}

.story__ring img{
  width:100%;height:100%;object-fit:cover;border-radius:50%;display:block;
  transition:filter .25s,opacity .25s;
}

.story__lbl{
  font-size:clamp(10px,2.2vw,10.5px);font-weight:600;letter-spacing:.02em;color:var(--muted);
  /* Etiket ogeden 6px+6px tasabilir (gap ≥12px): uzun isimler ellipsis'e dusmesin. */
  max-width:calc(100% + 12px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.story.-seen .story__lbl{color:var(--dim)}

@media(max-width:560px){
  .stories{padding:8px 0 4px;margin-bottom:2px;justify-content:flex-start}
  .stories__in{gap:12px;padding:2px 4px 6px}
}

/* Mobil tasma savunmasi (proje sahibi: telefonda sayfa yatay tasiyor):
   - .stories/.stories__in flex cocugu parent'i genisletmesin (min-width:0 + width:100%)
   - theme.css:42 body `overflow-x:clip` iOS Safari ≤15'te DESTEKLENMEZ → sayfa yatay kayar.
     @supports not: yalniz clip bilmeyen tarayicilarda hidden fallback (clip bilenlerde
     sticky/scroll davranisi degismez). */

.stories{min-width:0;width:100%}

.stories__in{min-width:0;width:100%}

@supports not (overflow-x:clip){ html,body{overflow-x:hidden} }

/* ── IZLEYICI .stv (mockup .sv birebir, on ek sapmasi yukarida gerekceli) ── */

.stv{
  position:fixed;inset:0;z-index:200;display:none;
  align-items:center;justify-content:center;
  background:rgba(5,5,6,.92);backdrop-filter:blur(14px);
}

.stv.-on{display:flex}

.stv__panel{
  position:relative;background:#000;overflow:hidden;
  width:min(100vw,calc((100vh - 32px) * 9/16));
  height:min(100vh,calc(100vh - 32px));
  max-height:100vh;border-radius:16px;
  display:flex;align-items:center;justify-content:center;
  touch-action:none;user-select:none;
}

.stv__panel video{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none;background:#000}

.stv__poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;transition:opacity .3s}

.stv.-playing .stv__poster{opacity:0;pointer-events:none}

/* ust degrade + segmentler + baslik satiri (mockup) */

.stv__top{
  position:absolute;top:0;left:0;right:0;z-index:5;
  padding:calc(10px + env(safe-area-inset-top)) 12px 24px;
  background:linear-gradient(180deg,rgba(0,0,0,.62),transparent);
}

.stv__bars{display:flex;gap:5px;margin-bottom:12px}

.stv__bars i{
  flex:1;height:3px;border-radius:2px;background:rgba(255,255,255,.28);
  overflow:hidden;position:relative;
}

.stv__bars i::after{
  content:"";position:absolute;inset:0;background:var(--orange-hi);
  transform:scaleX(0);transform-origin:left;
}

.stv__bars i.-done::after{transform:scaleX(1)}

.stv__bars i.-act::after{transform:scaleX(var(--p,0))}

.stv__row{display:flex;align-items:center;gap:10px}

.stv__who{display:flex;align-items:center;gap:9px;flex:1;min-width:0}

.stv__who img{width:34px;height:34px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--orange)}

.stv__who b{font-size:13.5px;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ust sag butonlar — HER ZAMAN gorunur, 44px dokunma hedefi (mockup) */

.stv__btn{
  width:44px;height:44px;flex:none;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.35);color:#fff;display:grid;place-items:center;
  transition:background .15s,transform .1s;
}

.stv__btn:hover{background:rgba(255,255,255,.18)}

.stv__btn:active{transform:scale(.9)}

.stv__btn svg{width:21px;height:21px}

/* yan navigasyon oklari — YALNIZ hover destekli cihazda (mockup) */

.stv__nav{
  position:absolute;top:50%;transform:translateY(-50%);z-index:6;
  width:44px;height:44px;border:0;border-radius:50%;cursor:pointer;
  background:rgba(0,0,0,.4);color:#fff;display:none;place-items:center;
  transition:background .15s;
}

.stv__nav:hover{background:var(--orange)}

.stv__nav svg{width:20px;height:20px}

.stv__nav.-prev{left:calc(50% - min(50vw,(100vh - 32px)*9/32) - 60px)}

.stv__nav.-next{right:calc(50% - min(50vw,(100vh - 32px)*9/32) - 60px)}

@media(hover:hover) and (pointer:fine){ .stv__nav{display:grid} }

/* dokunma bolgeleri (gorunmez; sol %30 onceki, sag %70 sonraki — mockup) */

.stv__tapL,.stv__tapR{position:absolute;top:15%;bottom:12%;z-index:4}

.stv__tapL{left:0;width:30%}

.stv__tapR{right:0;width:70%}

/* alt ipucu */

.stv__hint{
  position:absolute;left:0;right:0;bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;
  text-align:center;font-size:11px;color:rgba(255,255,255,.5);font-weight:600;
  pointer-events:none;
}

/* duraklatildi gostergesi */

.stv__paused{
  position:absolute;inset:0;margin:auto;width:64px;height:64px;z-index:5;pointer-events:none;
  background:rgba(0,0,0,.5);border-radius:50%;display:grid;place-items:center;opacity:0;transition:opacity .2s;
}

.stv.-paused .stv__paused{opacity:1}

.stv__paused svg{width:26px;height:26px;color:#fff}

/* ── MOBIL: tam ekran, kose yok, saf siyah zemin (mockup ≤560px) ── */

@media(max-width:560px){
  .stv__panel{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .stv{background:#000}
}

@media(prefers-reduced-motion:reduce){
  .story__ring,.stv__poster{transition:none}
}

/* ── STORIES · MISAFIR KILIDI (2026-08-21, proje sahibi: kaynaklar misafire kapali) ──
   APPEND: serit blogu DOKUNULMADI. Yalniz iki yeni sinif ailesi:
   .story__lock  — seritte 2+ halkanin sag-alt kosesinde kucuk kilit rozeti (misafir).
   .stv__gate*   — izleyici ici kilit overlay'i: poster blur arkada (stv.-gate),
                   ortada kart (kilit ikonu + baslik + metin + btn--orange/btn--line).
   Tum renkler theme token (--orange/--ink/--bg/--line/--text/--muted/--r/--ease).
   Kilitli segmentler (.-lock) soluk. Dokunma bolgeleri (z4) gate'in altinda kalir;
   ust bar (z5: kapat/ses) uste — X/Esc/asagi-kaydir calismaya devam eder. */

.story__lock{
  position:absolute;right:-1px;bottom:-1px;z-index:2;
  width:17px;height:17px;border-radius:50%;
  background:var(--orange);color:var(--ink);
  box-shadow:0 0 0 2px var(--bg);
  display:grid;place-items:center;
}

.story__lock svg{width:10px;height:10px}

.story.-seen .story__lock{background:var(--dim)}

.stv__bars i.-lock{opacity:.35}

.stv.-gate .stv__poster{opacity:1;filter:blur(16px) brightness(.45);transform:scale(1.08)}

.stv__gate{
  position:absolute;inset:0;z-index:4;display:none;
  align-items:center;justify-content:center;
  padding:64px 22px calc(36px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.55));
}

.stv.-gate .stv__gate{display:flex}

.stv__gate-card{
  width:100%;max-width:300px;text-align:center;
  padding:26px 22px 22px;border-radius:var(--r);
  background:rgba(9,9,11,.78);border:1px solid var(--line);
  backdrop-filter:blur(10px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.8);
}

.stv__gate-ico{
  width:52px;height:52px;margin:0 auto 14px;border-radius:50%;
  display:grid;place-items:center;color:var(--orange);
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);
}

.stv__gate-ico svg{width:24px;height:24px}

.stv__gate-ttl{font-family:var(--f-display);font-size:19px;font-weight:800;color:#fff;letter-spacing:-.01em;margin:0 0 8px}

.stv__gate-txt{font-size:13px;line-height:1.55;color:var(--muted);margin:0 0 18px}

.stv__gate-act{display:flex;flex-direction:column;gap:9px}

.stv__gate-act .btn{width:100%;padding:12px 18px;font-size:13.5px}

.stv__gate-act .btn--line{color:var(--text);border-color:rgba(255,255,255,.22)}

@media(prefers-reduced-motion:reduce){
  .stv.-gate .stv__poster{transform:none}
}

/* Ses butonu ikon swap'i: stories.js `hidden` ile iki svg'yi degistirir; author
   display kurali UA [hidden]'i eziyordu (iki ikon ust uste — ek.css:443 deseni). */

.stv__btn svg[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   P2 — YORUM LİSTESİ (madde 10-CSS) + LİSTELERİM (madde 11)   2026-08-22
   ADDITIVE. theme.css DOKUNULMADI; buradaki her kural ya theme'de HİÇ olmayan
   bir sınıfı kurar ya da ölçülmüş bir kırığı onarır (gerekçe kural başında).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── 10.1 · AVATAR (madde 5'in görsel tarafı) ──
   theme.css yalnız `.cmt__item img` / `.cmt__form img` seçicileriyle boyut veriyordu:
   `.cmt__ava` başka bir kapta (reels paneli, yanıt formu klonu, ileride başka bir
   sarmalayıcı) kullanılınca img 64×64 ATTRIBUTE ölçüsüne düşüyor ve satırı bozuyordu.
   Sınıfın KENDİSİ artık kendi kutusunu taşır — ölçüler theme ile BİREBİR (38/34),
   yani onaylı görünüm değişmez; yalnız bağlamdan bağımsız hale gelir. */

.cmt__ava{width:38px;height:38px;flex:none;aspect-ratio:1;object-fit:cover;border-radius:50%;
  background:var(--raised);display:block}

/* ── 10.2 · UZUN METİN ──
   Boşluksuz uzun dize (URL, "aaaa…", yapıştırılan hash) satırı yatay taşırıyordu.
   `anywhere`: sözcük bütünlüğünü koru, mecbur kalınca kır. */

.cmt__text{overflow-wrap:anywhere;word-break:normal;min-width:0}

/* Çok uzun yorum kırpma (comments.js karakter eşiğiyle `-clamp` verir). */

.cmt__text.-clamp{display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}

/* "Devamını gör" — tema bağlantı-buton dili (.cmt__toggle emsali), dokunma hedefi ≥38px. */

.cmt__xp{display:inline-flex;align-items:center;min-height:38px;margin-top:2px;padding:4px 2px;
  border:0;background:transparent;cursor:pointer;font:inherit;font-size:12.5px;font-weight:700;
  color:var(--orange);border-radius:6px}

.cmt__xp:hover{color:var(--orange-hi)}

.cmt__xp:focus-visible{outline:none;box-shadow:0 0 0 2px var(--o40)}

/* ── 10.3 · BİNLERCE YORUM: liste performansı ──
   `content-visibility:auto` görünüm alanı dışındaki satırların düzen/boyama işini
   atlar; `contain-intrinsic-size` kaydırma çubuğunun zıplamaması için tahmini yükseklik
   verir (auto = bir kez ölçülen gerçek değeri hatırlar). Satır kabı `contain` ile
   komşularının düzenini etkilemez. Yanıt kabı hariç tutulmaz: iç içe tek seviye. */

.cmt__list{contain:layout style}

.cmt__list > .cmt__item{content-visibility:auto;contain-intrinsic-size:auto 92px}

/* Satır kompaktlığı: theme 18px grid boşluğu binlerce satırda çok uzuyor. */

.cmt__list{gap:16px}

.cmt__item{min-width:0}

.cmt__item > div{min-width:0;flex:1}

/* ── 10.4 · "Daha fazla yorum göster" ──
   Blade artık `.btn.btn--line` taşıyor (tema düğme dili). Konum/genişlik burada;
   `is-busy` yüklenirken GÖRÜNÜR olsun (önceden hiçbir görsel karşılığı yoktu). */

.cmt__more{margin-top:18px;width:100%;height:44px;padding:0 18px;font-size:13px}

.cmt__more[hidden]{display:none}

.cmt__more.is-busy{opacity:.6;cursor:progress;pointer-events:none}

.cmt .btn.is-busy{opacity:.6;pointer-events:none}

/* ── 10.5 · Dikey mod (reels) yorum paneli: kendi kaydırması + safe-area ──
   `.reels__cmtbody` zaten flex:1/min-height:0/overflow-y:auto. Eksik olan: panelin
   dibindeki "Daha fazla" düğmesi safe-area'ya giriyordu ve panel içi kaydırma
   sayfayı da sürüklüyordu (overscroll zinciri). */

.reels__cmtbody{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

.reels__cmtbody .cmt__more{margin-bottom:calc(4px + env(safe-area-inset-bottom))}

/* Panelde yorum formu üstte sabit kalmaz (kaynak akışı korunur); yalnız dar kapta
   düğme tam genişlik + satır sarmasın. */

.reels__cmtbody .cmt__form{flex-wrap:wrap}

/* Panel başlığı zaten "N yorum" yazıyor; bileşenin kendi sayacı ÇİFT görünüyordu.
   Sıralama sekmeleri kalır (margin-left:auto ile sağda). */

.reels__cmtbody .cmt__head > b{display:none}

/* ── 10.6 · Responsive (390 / 768 / 1366) ── */

@media (max-width:960px){
  /* theme mobil bloğu `.cmt__item img` 34px veriyor; sınıf da aynı ölçüye iner. */
  .cmt__ava{width:34px;height:34px}
  .cmt__list{gap:14px}
  .cmt__list > .cmt__item{contain-intrinsic-size:auto 104px}
  .cmt__text.-clamp{-webkit-line-clamp:5}
  .cmt__xp{min-height:40px}
  .cmt__more{height:46px}
}

/* ── 11 · LİSTELERİM (/listelerim + /listelerim/{id}) ──
   Kaynak React'ta karşılığı YOK (sıfırdan sayfa). Görsel dil hesap sayfalarından
   ödünç alınır: kart yüzeyi `--surface/--line/--r`, tipografi `--f-display`,
   izgara `.vids` ritmi. Yeni sınıflar `.pls*` — hiçbir theme sınıfı ezilmez. */
/* Liste kartları ızgarası — .vids ile aynı auto-fill ritmi (site geneli his). */

.pls{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));gap:18px 14px}

.pls__card{display:flex;flex-direction:column;gap:10px;border-radius:var(--r);
  transition:transform .18s var(--ease)}

.pls__card:hover{transform:translateY(-3px)}

.pls__card:focus-visible{outline:none}

.pls__card:focus-visible .pls__cov{box-shadow:0 0 0 3px var(--o40)}

/* Kapak kolajı: 2x2 poster (az videoda kalanları boşluk değil, ilk poster doldurur:
   grid auto-flow ile son görsel kalan alanı kaplar). 16:9 kadraj korunur. */

.pls__cov{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:2px;
  aspect-ratio:16/9;border-radius:var(--r-sm);overflow:hidden;background:var(--raised);
  border:1px solid var(--line);transition:border-color .18s}

.pls__card:hover .pls__cov{border-color:var(--o40)}

.pls__cov img{width:100%;height:100%;object-fit:cover;display:block;min-width:0}

/* Tek görsel varsa iki kolonu birden kaplasın (yarım boş kapak olmasın). */

.pls__cov img:first-child:last-child{grid-column:1/-1}

.pls__cov img:nth-child(3):last-child{grid-column:1/-1}

.pls__cov--bos{place-items:center}

.pls__cov--bos svg{width:34px;height:34px;stroke:var(--dim);fill:none;stroke-width:1.6}

/* Video sayısı rozeti — .badge-time diliyle hizalı (poster üstü koyu hap). */

.pls__n{position:absolute;right:8px;bottom:8px;z-index:2;padding:3px 9px;border-radius:99px;
  font-size:11.5px;font-weight:800;color:#fff;background:rgba(8,8,8,.78);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

.pls__body{display:flex;flex-direction:column;gap:3px;min-width:0}

.pls__nm{font-family:var(--f-display);font-size:14.5px;font-weight:800;letter-spacing:-.01em;
  color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.pls__card:hover .pls__nm{color:var(--orange-hi)}

.pls__meta{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--dim)}

.pls__meta i{width:3px;height:3px;border-radius:50%;background:var(--dim);flex:none}

/* ── Detay üst çubuğu: geri · ad düzenle · sil ── */

.pls__top{display:flex;align-items:center;flex-wrap:wrap;gap:10px;margin-bottom:20px;
  padding-bottom:16px;border-bottom:1px solid var(--line)}

.pls__back{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 12px;
  border-radius:var(--r-sm);font-size:13px;font-weight:700;color:var(--muted);
  border:1px solid var(--line);transition:.15s}

.pls__back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.pls__back:hover{color:var(--orange);border-color:var(--o40)}

.pls__rn{display:flex;align-items:center;gap:8px;flex:1;min-width:220px}

.pls__rn input{flex:1;min-width:0;height:40px;padding:0 13px;border-radius:var(--r-sm);
  border:1px solid var(--line);background:var(--raised);color:var(--text);font:inherit;font-size:13.5px}

.pls__rn input:focus{border-color:var(--o40);outline:none}

.pls__rn .btn{height:40px;padding:0 16px;font-size:13px}

/* Silme: iki adımlı açılır (JS'siz onay). Kapalıyken yalnız özet görünür. */

.pls__dng{position:relative}

.pls__dng summary{display:inline-flex;align-items:center;gap:7px;min-height:40px;padding:0 14px;
  border-radius:var(--r-sm);border:1px solid var(--line);color:var(--muted);
  font-size:13px;font-weight:700;cursor:pointer;list-style:none;transition:.15s}

.pls__dng summary::-webkit-details-marker{display:none}

.pls__dng summary svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.8}

.pls__dng summary:hover{color:var(--red);border-color:var(--red)}

.pls__dng[open] summary{color:var(--red);border-color:var(--red)}

.pls__dng form{position:absolute;right:0;top:calc(100% + 8px);z-index:20;width:264px;
  padding:14px;border-radius:var(--r);background:var(--surface);border:1px solid var(--line);
  box-shadow:var(--shadow)}

.pls__dng p{margin:0 0 12px;font-size:12.5px;line-height:1.55;color:var(--muted)}

.pls__dng .btn{width:100%;height:40px;font-size:13px}

/* Kart üzerindeki "listeden kaldır" formu, .fav__x konumunu bozmadan sarmalar. */

.pls__xf{position:absolute;top:0;right:0;z-index:2}

.pls__xf .fav__x{position:static}

@media (max-width:767px){
  .pls{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px 10px}
  .pls__nm{font-size:13.5px}
  .pls__top{gap:8px}
  .pls__back,.pls__dng summary{min-height:44px}
  .pls__rn{order:3;flex-basis:100%}
  .pls__rn input{height:44px;font-size:16px}   /* 16px: iOS zoom önler */
  .pls__rn .btn{height:44px}
  /* Dar ekranda onay kutusu POPOVER OLMAKTAN ÇIKAR: kendi satırında akışa girer.
     (Ölçüldü: konumlandırılmış hâli 390px'te sağdan taşıyordu.) */
  .pls__dng{flex:1 1 100%;order:2}
  .pls__dng form{position:static;width:auto;margin-top:10px}
  .pls__dng .btn{height:44px}
}

/* ═══════════ P1-CSS · ADMIN MESAJ TAKIBI + SERBEST BAHSIS GIRISI ═══════════
   P1 isçisi backend/JS'i yazdi ama ek.css o sirada P2'de kilitliydi; asagidaki
   siniflar TANIMSIZ kalmisti (ekran stilsiz, bahsis girisi UA varsayilaninda).
   Tamami mevcut tema token'lari + `.lst-*`/`.atbl` dilinden turetildi. */
/* ── Liste: 6 kolon (Taraflar · Son mesaj · Mesaj · Kredi · Bahsis · Aktivite) ── */

.atbl--msg .atbl__h,.atbl--msg .atbl__r{
  grid-template-columns:minmax(0,2.1fr) minmax(0,2fr) minmax(0,.6fr) minmax(0,.7fr) minmax(0,.7fr) minmax(0,.95fr);
}

/* Model avatari yuvarlak 34px (atbl--i emsali; baska tablo etkilenmez). */

.atbl--msg .atbl__vid > img{width:34px;height:34px;border-radius:50%;object-fit:cover;flex:none}

/* Taraf ayraci: iki ad arasinda sessiz ok. */

.lst-arrow{font-style:normal;color:var(--dim);margin:0 5px;font-weight:600}

/* Son mesaj onizlemesi: TEK satir, tasma yok (uzun mesaj satiri bozmaz). */

.lst-msg-prev{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lst-who{font-style:normal;font-weight:700;color:var(--muted);margin-right:6px}

/* ── Detay: salt-okuma konusma akisi ── */

.amsg{display:flex;flex-direction:column;gap:14px}

.amsg__taraf{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  padding:12px 16px;border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.amsg__kim{display:inline-flex;align-items:center;gap:9px;color:var(--text);font-weight:600;font-size:13px;min-width:0}

.amsg__kim:hover{color:var(--orange)}

.amsg__kim img{width:30px;height:30px;border-radius:50%;object-fit:cover;flex:none}

/* Ad ve alt etiket ALT ALTA (markup <span><b>ad</b><small>etiket</small></span> —
   ikisi de satir-ici oldugu icin "Selin ArasModel" gibi bitisik cikiyordu). */

.amsg__kim > span{display:flex;flex-direction:column;line-height:1.28;min-width:0}

.amsg__kim small{
  font-size:11px;font-weight:500;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.amsg__akis{
  display:flex;flex-direction:column;gap:10px;
  padding:16px;border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

/* Balon: modelin mesaji SAG, uyenin mesaji SOL (uye sohbetiyle ayni perspektif). */

.amsg__m{max-width:min(560px,78%);display:flex;flex-direction:column;gap:4px}

.amsg__m.-uye{align-self:flex-start}

.amsg__m.-model{align-self:flex-end;text-align:right}

.amsg__meta{font-size:11px;color:var(--dim);font-family:var(--f-mono);letter-spacing:.02em}

.amsg__govde{
  padding:9px 13px;border-radius:12px;font-size:13.5px;line-height:1.55;
  color:var(--text);overflow-wrap:anywhere;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.amsg__m.-model .amsg__govde{background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14)}

.amsg__govde .lst-badge{margin-top:2px}

@media(max-width:640px){
  .amsg__m{max-width:88%}
  .amsg__taraf{gap:8px 12px;padding:10px 12px}
}

/* ── Serbest bahsis girisi (madde 4): dokunma hedefi ≥44px ──
   Sohbet ve gonderi modali AYNI kaliba oturur; tek kural bloku (tekrar yok). */

.chat__tipc,.pmodal__tipc{display:flex;align-items:center;gap:8px;margin-top:8px}

.chat__tipc input,.pmodal__tipc input{
  flex:1;min-width:0;height:44px;padding:0 12px;
  border-radius:10px;border:0;box-shadow:inset 0 0 0 1px var(--line);
  background:var(--surface);color:var(--text);font:inherit;font-size:14px;
  -moz-appearance:textfield;appearance:textfield;
}

/* Sayi okunu gizle: dar alanda metni kirpiyordu (yukari/asagi ok yerine klavye). */

.chat__tipc input::-webkit-outer-spin-button,.pmodal__tipc input::-webkit-outer-spin-button,
.chat__tipc input::-webkit-inner-spin-button,.pmodal__tipc input::-webkit-inner-spin-button{
  -webkit-appearance:none;margin:0;
}

.chat__tipc input:focus-visible,.pmodal__tipc input:focus-visible{
  outline:none;box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o40);
}

.chat__tipc button,.pmodal__tipc button{
  flex:none;width:44px;height:44px;border:0;border-radius:10px;cursor:pointer;
  display:grid;place-items:center;
  background:linear-gradient(180deg,var(--orange-hi),var(--orange));color:#1A0F02;
  transition:transform .12s var(--ease),filter .15s;
}

.chat__tipc button:hover,.pmodal__tipc button:hover{filter:brightness(1.06)}

.chat__tipc button:active,.pmodal__tipc button:active{transform:scale(.94)}

.chat__tipc button svg,.pmodal__tipc button svg{width:20px;height:20px}

/* ╔══════════════════════════════════════════════════════════════════════════════════╗
   ║  P8 · ADMIN FORM ELEMENT KÜTÜPHANESİ (.f-*) + İDİOM KÖPRÜLEME + P5 CSS KIRIKLARI ║
   ╚══════════════════════════════════════════════════════════════════════════════════╝
   BAĞLAM (proje sahibi, madde 40): "Admin panelinin input ve element CSS eksiklikleri var.
   Form ile alakalı ne kadar element CSS varsa hepsini ekle. Birçok eksik var React orijinal
   çıkışından dolayı." Statik denetim doğruladı: panelde SIX çakışan form idiomu yan yana
   yaşıyor — `.field`/`.lbl` (site/legacy) · `.cms-field`/`.cms-lbl` (CMS ekranları) · `.afld`
   (çekmece) · `.opt`+`.tgl` (toggle satırı) · `.tariff__in` (sayı+birim) · sahte-select'ler
   (`.radioset`/`.catpill`/`.seg`/`.acflag`). Gerçek `<select>` neredeyse hiç yok; checkbox/
   radio için ORTAK TABAN hiç yoktu.

   STRATEJİ (envanter riski sıfır): mevcut ekranların MARKUP'I DEĞİŞMEZ.
   (1) Tek, tutarlı `.f-*` katmanı yazılır (yeni ekranlar doğrudan bunu kullanır).
   (2) Mevcut idiomlar `.f-*` ile AYNI ÖLÇÜ/RENK DİLİNE köprülenir — sınıf adları DEĞİŞMEZ,
       yalnız EKSİK görsel özellikler `.adm` (admin kabuğu) kapsamında tamamlanır.
       KAPSAM DİSİPLİNİ: köprüler daima `.adm` altında → SİTE (üye) formları etkilenmez,
       admin login (.adm dışı) etkilenmez, DOM-diff/ENVANTER sözleşmeleri korunur.
   (3) Yeni /admin/slider ekranı doğrudan `.f-*` kullanır.

   TOKEN DİSİPLİNİ: tüm renk/ölçü theme.css değişkenlerinden (--surface/--raised/--panel/--text/
   --muted/--dim/--line/--orange/--orange-hi/--o08/--o14/--o40/--ink/--r-sm/--ease/--f-mono).
   UYDURMA HEX YOK; tek istisnalar theme.css'in KENDİ yerleşik tonlarının birebir kopyaları:
   #B6B4B1 (theme .lbl:4419 etiket tonu) · #FF6A80 / rgba(255,31,61,*) (theme .field__err:4443
   + .field.has-err:4442 hata tonu) · #CDCCCA (theme .btn--dark:585) · #1E1E1E (theme hover
   yüzeyi) · #1C1C1B / #FF1F3D / #2ED573 (theme .pwr:4470-4478 güç çubuğu tonları) ·
   #131313 (theme .model--skel:1248) · #A3A19E (= --muted; select oku SVG'sinde var() geçmez).

   DOKUNMA HEDEFİ: kontrol yüksekliği masaüstünde 42px (≥40 şartı; mevcut `.cms-field`
   ölçüsüyle BİREBİR → CMS ekranlarında görsel regresyon yok), ≤700px'te 44px (KURALLAR §2.5). */

:root{
  --f-ctl-h:42px;    /* ortak kontrol yüksekliği */
  --f-ctl-r:9px;     /* ortak köşe yarıçapı (.adm taban + .cms-field ile aynı) */
  --f-ctl-fs:13.5px; /* ortak kontrol yazı boyu */
}

@media (max-width:700px){ :root{ --f-ctl-h:44px } }

/* ── SARMALAYICI + METİNLER ───────────────────────────────────────────────── */

.f-field{display:block;margin:0 0 14px;min-width:0}

.f-field:last-child{margin-bottom:0}

.f-label{display:block;font-size:12px;font-weight:700;color:#B6B4B1;margin:0 0 6px}

.f-label--row{display:flex;align-items:baseline;justify-content:space-between;gap:10px}

.f-label em{font-style:normal;font-weight:600;color:var(--dim)}

.f-req{color:var(--orange);margin-left:3px}

.f-hint{margin:6px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}

.f-hint code{font-family:var(--f-mono);font-size:11px;color:var(--muted)}

.f-err{display:block;margin:6px 0 0;font-size:11.5px;color:#FF6A80}

/* ── ORTAK KONTROL YÜZEYİ (input · textarea · select) ─────────────────────── */

.f-input,.f-textarea,.f-select{
  display:block;width:100%;min-width:0;
  height:var(--f-ctl-h);padding:0 12px;
  border-radius:var(--f-ctl-r);
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:var(--f-ctl-fs);line-height:normal;
  color-scheme:dark;   /* native takvim/sayı okları + kaydırma çubuğu koyu temada */
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease),background .15s;
}

.f-input::placeholder,.f-textarea::placeholder{color:var(--dim)}

.f-textarea{height:auto;min-height:88px;padding:10px 12px;line-height:1.55;resize:vertical}

/* sayı alanında UA artırma okları gizli (dar alanda metni kırpıyordu — .tariff__in emsali) */

.f-input[type=number]{-moz-appearance:textfield;appearance:textfield;font-variant-numeric:tabular-nums}

.f-input[type=number]::-webkit-outer-spin-button,
.f-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* arama alanında UA temizle düğmesi koyu temada beyaz kalıyordu */

.f-input[type=search]::-webkit-search-cancel-button{filter:invert(.6)}

/* native <select> giydirme: UA oku kapatılır, kendi chevron'umuz basılır (CSP img-src data: açık) */

.f-select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A19E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
}

.f-select:hover{border-color:#2A2A2A}

/* açılır liste satırları (Windows/Chrome kendi paletini kullanır; yine de hizala) */

.f-select option,.f-select optgroup{background:var(--raised);color:var(--text)}

/* ── DURUMLAR: odak · pasif · salt-okunur · hatalı · meşgul ───────────────── */

.f-input:focus,.f-textarea:focus,.f-select:focus{outline:none;border-color:var(--o40)}

.f-input:focus-visible,.f-textarea:focus-visible,.f-select:focus-visible{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--o14);
}

.f-input:disabled,.f-textarea:disabled,.f-select:disabled{
  opacity:.55;cursor:not-allowed;background:var(--panel);color:var(--muted);
}

.f-input[readonly],.f-textarea[readonly]{
  background:var(--panel);color:var(--muted);cursor:default;border-style:dashed;
}

.f-input[readonly]:focus,.f-textarea[readonly]:focus{border-color:var(--line)}

.f-input[aria-invalid="true"],.f-textarea[aria-invalid="true"],.f-select[aria-invalid="true"]{
  border-color:rgba(255,31,61,.55);background:rgba(255,31,61,.05);
}

.f-field.is-busy{opacity:.6;pointer-events:none}

.f-field.is-busy .f-input,.f-field.is-busy .f-textarea{cursor:progress}

/* ── ONAY KUTUSU + RADYO (özel kutu; native input erişilebilir kalır) ─────── */

.f-check,.f-radio{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  min-height:var(--f-ctl-h);padding:6px 0;cursor:pointer;
  font-size:13px;line-height:1.5;color:var(--text);
}

/* native kontrol GÖRÜNMEZ ama DOM'da ve odak sırasında kalır (ekran okuyucu + klavye) */

.f-check > input,.f-radio > input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

.f-check > i,.f-radio > i{
  flex:none;width:20px;height:20px;margin-top:1px;
  display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .15s var(--ease),box-shadow .15s var(--ease);
}

.f-check > i{border-radius:6px}

.f-radio > i{border-radius:50%}

/* tik: iki kenarlı kare 45° döndürülür (ikon dosyası/paket gerektirmez) */

.f-check > i::after{
  content:"";width:10px;height:6px;margin-top:-2px;
  border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);
  transform:rotate(-45deg) scale(.4);opacity:0;
  transition:transform .16s var(--ease),opacity .12s;
}

.f-check > input:checked + i{background:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}

.f-check > input:checked + i::after{opacity:1;transform:rotate(-45deg) scale(1)}

.f-radio > input:checked + i{background:var(--surface);box-shadow:inset 0 0 0 5px var(--orange)}

.f-check > input:indeterminate + i{background:var(--o14);box-shadow:inset 0 0 0 1px var(--o40)}

.f-check > input:focus-visible + i,.f-radio > input:focus-visible + i{
  box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o14);
}

.f-check > input:disabled ~ *,.f-radio > input:disabled ~ *{opacity:.45}

.f-check > input:disabled,.f-radio > input:disabled{cursor:not-allowed}

.f-check b,.f-radio b{display:block;font-size:13px;font-weight:700;color:#E9E8E6}

.f-check small,.f-radio small{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}

/* ── ANAHTAR (toggle) — mevcut `.tgl` ile GÖRSEL OLARAK BİREBİR ────────────
   `.f-toggle` tek başına da çalışır; `class="tgl f-toggle"` yazılırsa iki kural
   aynı değerleri verdiği için çakışma olmaz (theme .tgl:2545 ölçüleri kopyalandı). */

.f-toggle{
  width:42px;height:24px;flex:none;border-radius:12px;background:#242423;position:relative;
  transition:background .18s;cursor:pointer;
}

.f-toggle > i{
  position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#8E8D8B;
  transition:.18s var(--ease);
}

.f-toggle.on,.f-toggle[aria-checked="true"]{background:var(--orange)}

.f-toggle.on > i,.f-toggle[aria-checked="true"] > i{left:21px;background:var(--ink)}

.f-toggle:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

.f-toggle:disabled,.f-toggle[aria-disabled="true"]{opacity:.45;cursor:not-allowed}

/* dokunma hedefi ≥44px — görünümü büyütmeden (MOBIL-UI2 deseniyle aynı yöntem) */

@media (pointer:coarse){
  .tgl,.f-toggle{position:relative}
  .tgl::after,.f-toggle::after{content:"";position:absolute;top:-10px;bottom:-10px;left:-4px;right:-4px}
  .tgl--sm::after{top:-12px;bottom:-12px}
}

/* ── SAYI + BİRİM (.tariff__in emsali; spin okları gizli) ─────────────────── */

.f-num{
  display:inline-flex;align-items:center;gap:7px;
  height:var(--f-ctl-h);padding:0 12px;border-radius:var(--f-ctl-r);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .15s var(--ease);
}

.f-num > input{
  width:64px;min-width:0;background:none;border:0;outline:none;
  color:var(--orange);font-family:var(--f-mono);font-size:14px;font-weight:700;text-align:right;
  -moz-appearance:textfield;appearance:textfield;
}

.f-num > input::-webkit-outer-spin-button,.f-num > input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

.f-num > small{flex:none;font-size:10.5px;color:var(--dim)}

.f-num:focus-within{box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o14)}

.f-num:has(> input:disabled){opacity:.55}

.f-num[aria-invalid="true"],.f-num:has(> input[aria-invalid="true"]){box-shadow:inset 0 0 0 1px rgba(255,31,61,.55)}

/* ── DOSYA YÜKLEME + ÖNİZLEME ─────────────────────────────────────────────
   `::file-selector-button` ile native girdinin KENDİ düğmesi giydirilir → ekstra JS
   ya da gizli-input hilesi gerekmez (dosya adı da UA'dan gelir, erişilebilir kalır). */

.f-file{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.f-file__prev{
  flex:none;border-radius:10px;object-fit:cover;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}

.f-file__in{
  flex:1;min-width:180px;height:var(--f-ctl-h);
  display:flex;align-items:center;padding:0 12px 0 0;
  border-radius:var(--f-ctl-r);background:var(--surface);border:1px solid var(--line);
  color:var(--muted);font:inherit;font-size:12.5px;color-scheme:dark;cursor:pointer;
  transition:border-color .15s var(--ease),box-shadow .15s var(--ease);
}

.f-file__in::file-selector-button{
  height:calc(var(--f-ctl-h) - 12px);margin:0 11px;padding:0 14px;
  border:0;border-radius:7px;background:var(--raised);color:#CDCCCA;
  font:inherit;font-size:12.5px;font-weight:700;cursor:pointer;
  transition:background .15s,color .15s;
}

.f-file__in:hover::file-selector-button{background:#1E1E1E;color:#fff}

.f-file__in:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--o14)}

.f-file__in:disabled{opacity:.55;cursor:not-allowed}

.f-file__in[aria-invalid="true"]{border-color:rgba(255,31,61,.55)}

/* ── YERLEŞİM + AKSİYON ÇUBUĞU ────────────────────────────────────────────── */

.f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:14px}

.f-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}

.f-actions .btn{height:40px;padding:0 20px;font-size:13px}

.f-actions__end{margin-left:auto}

.f-note{font-size:11.5px;color:var(--dim)}

@media (max-width:700px){
  .f-row{grid-template-columns:1fr}
  .f-actions .btn{height:44px}   /* dokunma hedefi */
}

/* ╌╌╌╌╌ KÖPRÜLEME: MEVCUT İDİOMLAR → AYNI ÖLÇÜ/RENK DİLİ (yalnız `.adm` altında) ╌╌╌╌╌
   Sınıf adları DEĞİŞMEZ (ENVANTER korunur); yalnız EKSİK görsel özellikler tamamlanır.
   Özgüllük notu: `:where(.adm)` 0 puan katar → `.adm .field input` = (0,1,1), theme'in
   `.field input` (0,1,1) ile eşit; ek.css theme.css'ten SONRA yüklendiği için (layouts/
   admin.blade.php:14-15) kaynak sırası kazanır. Daha özgül theme kuralları
   (`.avnew__card .field textarea` = 0,2,1) DOKUNULMADAN kalır. */
/* (a) `.field` / `.lbl` — site/legacy idiomu; panelde /admin/seo · slider · duyurular · kaldırma */

:where(.adm) .field input,
:where(.adm) .field select{height:var(--f-ctl-h);font-size:var(--f-ctl-fs);border-radius:var(--f-ctl-r)}

:where(.adm) .field input,
:where(.adm) .field textarea,
:where(.adm) .field select{border:1px solid var(--line);background:var(--surface);color-scheme:dark}

:where(.adm) .field input:focus-visible,
:where(.adm) .field textarea:focus-visible,
:where(.adm) .field select:focus-visible{outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--o14)}

:where(.adm) .field input:disabled,
:where(.adm) .field textarea:disabled,
:where(.adm) .field select:disabled{opacity:.55;cursor:not-allowed;background:var(--panel);color:var(--muted)}

:where(.adm) .field input[aria-invalid="true"],
:where(.adm) .field textarea[aria-invalid="true"],
:where(.adm) .field select[aria-invalid="true"]{border-color:rgba(255,31,61,.55);background:rgba(255,31,61,.05)}

:where(.adm) .field input[type=number]{-moz-appearance:textfield;appearance:textfield}

:where(.adm) .field input[type=number]::-webkit-outer-spin-button,
:where(.adm) .field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

:where(.adm) .field__pre,:where(.adm) .field__eye{height:var(--f-ctl-h)}

/* .f-label ile aynı etiket dili */
/* (c) `.opt` — anahtar/sayaç satırı; satır yüksekliği yeni kontrol ölçüsüyle hizalanır */

:where(.adm) .opt{min-height:calc(var(--f-ctl-h) + 18px)}

:where(.adm) .opt:focus-within{background:var(--o08)}

:where(.adm) .opt .f-num,:where(.adm) .opt .tariff__in{flex:none}

/* (d) `.tariff__in` — sayı+birim; `.f-num` ile birebir ölçü/odak dili */

:where(.adm) .tariff__in{height:var(--f-ctl-h);border-radius:var(--f-ctl-r)}

:where(.adm) .tariff__in input{-moz-appearance:textfield;appearance:textfield}

:where(.adm) .tariff__in:focus-within{box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o14)}

/* (e) `.cms-field` — CMS ekranları; tip beyaz-listesi text'ten TÜM metin tiplerine genişletildi
   (eskiden yalnız input[type=text] stilliydi → email/url/number/search/date çıplak kalıyordu) */

.cms-field input[type=email],.cms-field input[type=url],.cms-field input[type=number],
.cms-field input[type=search],.cms-field input[type=password],.cms-field input[type=date]{
  width:100%;padding:0 12px;height:var(--f-ctl-h);border-radius:var(--f-ctl-r);
  background:var(--surface);border:1px solid var(--line);color:var(--text);
  font:inherit;font-size:var(--f-ctl-fs);color-scheme:dark;transition:border-color .15s var(--ease);
}

.cms-field input[type=text],.cms-field select{height:var(--f-ctl-h)}

.cms-field select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:34px;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A3A19E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px 12px;
}

.cms-field input:focus-visible,.cms-field textarea:focus-visible,.cms-field select:focus-visible{
  outline:none;border-color:var(--orange);box-shadow:0 0 0 3px var(--o14);
}

.cms-field input:disabled,.cms-field textarea:disabled,.cms-field select:disabled{
  opacity:.55;cursor:not-allowed;background:var(--panel);color:var(--muted);
}

.cms-field input[aria-invalid="true"],.cms-field textarea[aria-invalid="true"],.cms-field select[aria-invalid="true"]{
  border-color:rgba(255,31,61,.55);background:rgba(255,31,61,.05);
}

.cms-field input[type=number]{-moz-appearance:textfield;appearance:textfield}

.cms-field input[type=number]::-webkit-outer-spin-button,
.cms-field input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* (f) `.adm` ÇIPLAK taban (yukarıdaki 0,0,0 katman) — eksik tipler tamamlandı + ölçü verildi.
   Özgüllük yine 0 → herhangi bir sınıf kuralı (.field/.afld/.cms-field/.tariff__in) ezer. */

:where(.adm) :where(input[type=tel],input[type=time],input[type=datetime-local],input[type=month]){
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:var(--f-ctl-r);
  font:inherit;font-size:13px;color-scheme:dark;transition:border-color .15s var(--ease);
}

:where(.adm) :where(
  input[type=text],input[type=email],input[type=url],input[type=number],input[type=search],
  input[type=password],input[type=tel],input[type=date],input[type=time],input[type=datetime-local],
  input[type=month],select
){height:var(--f-ctl-h);padding:0 12px}

:where(.adm) :where(textarea){padding:10px 12px;line-height:1.55}

/* ╌╌╌╌╌ P5 CSS SÖZLEŞME KIRIKLARI (madde 14 · 16 · 18 · 19) ╌╌╌╌╌ */
/* [P5-16] `.btn--ghost` HİÇBİR YERDE TANIMLI DEĞİLDİ → 4 CTA arka plansız/çerçevesiz çıplak
   metin olarak basılıyordu (admin/eposta-govde:70 "Varsayılana dön" · category:61 "Daha fazla
   göster" · pay-result:51,54 "Cüzdanım"/"Desteğe yaz"). Hayalet dili: dolgu YOK, ince çizgi +
   soluk metin; hover'da turuncu vurgu. `.btn--line`den ayrışır (o, tam kontrast metin taşır). */

.btn--ghost{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1px var(--line)}

.btn--ghost:hover{background:var(--o08);color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40)}

.btn--ghost:active{background:var(--o14)}

/* [P5-18] GLOBAL pasif buton durumu YOKTU: theme yalnız `.dash__acts .btn.is-off{opacity:.55}`
   tanımlıyordu → 5 admin butonu (ayarlar:34 · krediler:14 · duyurular:55 · talep-cekmece:49 ·
   video-form:33) PASİFKEN parlak turuncu görünüyor, tıklanabilir sanılıyordu.
   NOT: `pointer-events:none` BİLEREK YOK — avnewform.js:358 `is-off` butona tıklamayı yakalayıp
   "eksik maddeler" uyarısını gösteriyor; kapatmak o davranışı öldürürdü. `:disabled` zaten
   tarayıcı düzeyinde tıklamayı engeller. `.lp__stage.is-off` (theme:2916) etkilenmez. */

.btn:disabled,.btn[disabled],.btn[aria-disabled="true"],.btn.is-off{
  opacity:.5;filter:grayscale(.55);cursor:not-allowed;box-shadow:none;
}

.btn:disabled:hover,.btn[disabled]:hover,.btn[aria-disabled="true"]:hover,.btn.is-off:hover{
  filter:grayscale(.55);transform:none;box-shadow:none;
}

/* "kaydediliyor" durumu — çift gönderim koruması (.cms-actions .btn.is-busy ile aynı dil) */

.btn.is-busy{opacity:.6;pointer-events:none;cursor:progress}

/* [P5-19a] `.pw` / `.pw__bar` / `.sN` — şifre gücü çubuğu GÖRÜNMEZ durumdaydı
   (auth/reset:85 template, auth.js:62 `<i class="on sN">` basıyor). theme yalnız `.pwr`
   (data-level'lı kardeş biçim, 4469-4478) tanımlıyordu; ton/ölçü ORADAN birebir alındı. */

.pw{display:flex;align-items:center;gap:6px;margin:-9px 0 15px}

.pw__bar{display:flex;align-items:center;gap:4px;flex:1;min-width:0}

.pw__bar i{height:3px;flex:1;border-radius:2px;background:#1C1C1B;transition:background .25s}

.pw__bar i.s1,.pw__bar i.s2{background:#FF1F3D}

.pw__bar i.s3{background:var(--orange)}

.pw__bar i.s4{background:#2ED573}

.pw small{flex:none;font-size:10.5px;font-weight:700;color:var(--dim);min-width:56px;text-align:right}

/* etiket rengi seviyeyle birlikte döner (`.pwr[data-level] small` karşılığı) */

.pw:has(.s1) small,.pw:has(.s2) small{color:#FF6A80}

.pw:has(.s3) small{color:var(--orange)}

.pw:has(.s4) small{color:#2ED573}

/* [P5-19b] `.steps` / `.step` — ortaklık sayfası "Üç adımda kazanmaya başla" (affiliate:145)
   ızgarası YOKTU → 3 kutu alt alta çıplak metin akıyordu. */

.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:fstep}

.step{
  position:relative;padding:18px;border-radius:var(--r);counter-increment:fstep;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.step::before{
  content:counter(fstep,decimal-leading-zero);position:absolute;top:14px;right:16px;
  font-family:var(--f-mono);font-size:11px;font-weight:700;color:var(--o40);
}

.step b{display:block;font-family:var(--f-display);font-size:15.5px;font-weight:700;color:var(--text);margin:0 0 7px;padding-right:26px}

.step p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

@media (max-width:860px){ .steps{grid-template-columns:1fr} }

/* [P5-19c] `.admcard__ext` — admcard başlığındaki dış bağlantı (slider "Anasayfada gör").
   `.admcard__go` (theme:4683) emsali; dış-link olduğu için nötr tondan turuncuya döner. */

.admcard__ext{font-size:12px;font-weight:600;color:var(--dim);white-space:nowrap;transition:color .15s}

.admcard__ext:hover{color:var(--orange)}

/* [P5-19d] `.wcard__split` (cüzdan: satın alınan/hediye kırılımı) + `.wcard__cancelled`
   (plan kartı: otomatik yenileme kapatıldı uyarısı) — ikisi de tanımsızdı. */

.wcard__split{display:block;margin-top:5px;font-size:11.5px;color:var(--dim);font-variant-numeric:tabular-nums}

.wcard__cancelled{
  display:block;margin-top:9px;padding:8px 11px;border-radius:9px;line-height:1.5;
  background:rgba(255,31,61,.07);box-shadow:inset 0 0 0 1px rgba(255,31,61,.24);color:#FF6A80;
}

.wcard__cancelled b{color:var(--text);font-weight:700}

/* [P5-14] `.oyuncu` / `.oyuncu--skel` ALIAS — theme'in `.model*` kuralları (676-732, 1243-1249,
   2293, 4315) ile KOPUKTU: kart hover/zoom/iskelet ölüydü.
   ⚠️ BLADE SINIFI DEĞİŞTİRİLMEDİ: `ENVANTER/E06-oyuncular.md:145,150` `oyuncu` + `oyuncu--skel`
   sınıflarını ZORUNLU tutuyor (components/model-card.blade:5, actors.blade:143) → `.model`'e
   çevirmek taramayı kırardı. Doğru çözüm: theme'in ATA-BAĞIMLI kurallarının `.oyuncu`
   karşılığını burada vermek. Ata-bağımsız kurallar (.model__ph/__go/__name/__rank…) zaten
   sınıf adından bağımsız çalıştığı için TEKRARLANMAZ. */

.oyuncu{display:block;transition:transform .25s var(--ease)}

.oyuncu:hover{transform:translateY(-3px)}

.oyuncu:hover .model__ph img{transform:scale(1.04)}

.oyuncu:hover .model__name{color:var(--orange)}

.is-edit .oyuncu{opacity:.9}

@media (hover:hover){
  .oyuncu:hover .model__go{opacity:1;translate:0 0}
  .oyuncu:hover .model__ph::after{opacity:1}
}

@media (hover:none){ .oyuncu:active{transform:scale(.98)} }

.oyuncu--skel{pointer-events:none}

.oyuncu--skel .model__ph{
  background:linear-gradient(100deg,#0E0E0E 30%,#161616 50%,#0E0E0E 70%);
  background-size:200% 100%;animation:shimmer 1.2s linear infinite;
}

.oyuncu--skel i{display:block;height:11px;border-radius:4px;margin-top:10px;background:#131313}

.oyuncu--skel i.short{width:52%;height:9px;margin-top:6px}

/* ╌╌╌╌╌ P8 · /admin/slider — SEKMELİ SLAYT YÖNETİMİ (madde 39) ╌╌╌╌╌
   Ekran `.cms` tasarım dilini (sol sekme rayı + sağ tek panel) yeniden kullanır; aşağıdakiler
   YALNIZCA bu ekranın ihtiyacı olan EK parçalardır (sekme küçük-resmi + hero önizleme sahnesi).
   Kaynak-dışı ekran → ENVANTER sözleşmesi yok. */
/* sekme rayında slaytın küçük-resmi (hangi slayt olduğu metinden önce GÖRSELDEN anlaşılsın) */

.cms-tab--slide{grid-template-columns:auto 1fr auto;gap:1px 10px}

.cms-tab--slide .cms-tab__thumb{
  grid-column:1;grid-row:1/3;align-self:center;
  width:44px;height:26px;border-radius:6px;object-fit:cover;flex:none;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.cms-tab--slide .cms-tab__label,.cms-tab--slide .cms-tab__path{grid-column:2}

.cms-tab--slide .cms-tab__badge{grid-column:3}

/* hero önizleme sahnesi — anasayfadaki oranla (16/7) ve gerçek `pos` kadrajıyla basılır */

.slide-stage{
  position:relative;aspect-ratio:16/7;border-radius:12px;overflow:hidden;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.slide-stage img{width:100%;height:100%;object-fit:cover;display:block}

.slide-stage::after{   /* hero'nun alt karartması — metin okunurluğunu temsil eder */
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 34%,rgba(4,4,4,.72) 100%);
}

.slide-stage__empty{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:12.5px;color:var(--dim);text-align:center;padding:12px;
}

.slide-stage__tag{
  position:absolute;left:10px;top:10px;z-index:2;
  padding:3px 9px;border-radius:999px;background:rgba(0,0,0,.62);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);
}

.slide-meta{display:grid;gap:8px;margin:12px 0 0}

.slide-meta__r{display:flex;align-items:baseline;gap:10px;font-size:12.5px;line-height:1.5}

.slide-meta__r > span{flex:none;min-width:82px;font-size:11.5px;font-weight:700;color:var(--dim)}

.slide-meta__r > b{min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}

.slide-meta__r > b:empty::before{content:"—";color:var(--dim)}

@media (max-width:520px){
  .slide-meta__r{flex-direction:column;gap:2px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ÜYE DETAY · /admin/uyeler/{id}  (2026-08-22 · KULLANICI-BUGLAR #45)
   ───────────────────────────────────────────────────────────────────────────
   Proje sahibi: "üye detay sayfası AYRI LİNKTE açılsın, çekmece kalksın; üyeye
   ait ne kadar detay bilgi varsa hepsi CMS kalitesinde". Çekmece (.adraw) dar bir
   yan panel dilidir; tam sayfada aynı yoğunlukta veri okunmaz. Bu katman ekranın
   YALNIZ eksik parçalarını verir; sekme rayı/panel (.cms-*), form öğeleri (.f-*),
   KPI bandı (.lst-stats) ve rozetler (.lst-badge) MEVCUT dillerden gelir — yeni
   kopya YOK (KURALLAR §0).
   Token disiplini: renk/ölçü theme.css değişkenlerinden. Uydurma hex YOK; tek
   istisnalar theme'in KENDİ tonlarının birebir kopyalarıdır (#7BE39A / #FF6A80 =
   .lst-stat--live / --ban ikon renkleri, ek.css:685-687).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── KİMLİK KARTI: avatar + ad + durum rozetleri + hızlı bilgiler ── */

.udet-id{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;
  padding:16px 18px;margin:0 0 14px;border-radius:14px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.udet-id__ava{
  width:64px;height:64px;border-radius:16px;object-fit:cover;display:block;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.udet-id__b{min-width:0;display:flex;flex-direction:column;gap:8px}

.udet-id__name{
  display:flex;align-items:center;gap:9px;flex-wrap:wrap;
  font-family:var(--f-display);font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);
}

.udet-id__mail{
  font-family:var(--f-mono);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere;
}

.udet-id__mail b{color:var(--dim);font-weight:500}

.udet-id__tags{display:flex;gap:6px;flex-wrap:wrap}

/* ── PANEL İÇİ BÖLÜM (başlık + gövde) — .cms-body içinde tekrar eden birim ── */

.udet-sec{margin:0 0 16px}

.udet-sec:last-child{margin-bottom:0}

.udet-sec__t{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;
  margin:0 0 9px;font-size:12px;font-weight:700;color:var(--orange-hi);
}

.udet-sec__t small{font-family:var(--f-mono);font-weight:500;font-size:10.5px;color:var(--dim)}

.udet-sec__t a{color:var(--dim);font-weight:600;font-size:11.5px;transition:color .15s}

.udet-sec__t a:hover{color:var(--orange)}

/* ── ANAHTAR/DEĞER ŞERİDİ (salt-gösterim gerçek veriler) ── */

.udet-kv{display:grid;gap:1px;border-radius:10px;overflow:hidden;background:var(--line)}

.udet-kv__r{
  display:grid;grid-template-columns:minmax(120px,150px) minmax(0,1fr);gap:12px;
  padding:9px 12px;background:var(--surface);font-size:12.5px;line-height:1.5;
}

.udet-kv__r > span{font-size:11.5px;font-weight:700;color:var(--dim)}

.udet-kv__r > b{min-width:0;font-weight:600;color:var(--text);overflow-wrap:anywhere}

.udet-kv__r > b:empty::before{content:"—";color:var(--dim)}

/* ── KOMPAKT VERİ TABLOSU (defterler/oturumlar/denetim) ──
   Kapsayıcı BLOK + `overflow-x:auto`; satırlar kendi içinde grid. Kapsayıcı grid
   OLAMAZ: dar ekranda satırlara verilen `min-width` grid'in min-content genişliğini
   büyütür ve taşma SAYFAYA çıkar (ölçüldü: 390px'te 180px yatay taşma). Blok
   kapsayıcıda taşma tablonun KENDİ kaydırmasında kalır. Satır ayracı 1px gap yerine
   alt çizgi — blok akışta gap yok. */

.udet-tbl{
  overflow-x:auto;border-radius:10px;background:var(--line);
  -webkit-overflow-scrolling:touch;
}

.udet-tbl__h,.udet-tbl__r{
  display:grid;gap:10px;align-items:center;padding:9px 12px;
  background:var(--surface);font-size:12.5px;line-height:1.45;
  border-bottom:1px solid var(--line);
}

.udet-tbl > :last-child{border-bottom:0}

.udet-tbl--3 .udet-tbl__h,.udet-tbl--3 .udet-tbl__r{grid-template-columns:132px minmax(0,1fr) 132px}

.udet-tbl--4 .udet-tbl__h,.udet-tbl--4 .udet-tbl__r{grid-template-columns:132px minmax(0,1fr) 108px 108px}

.udet-tbl__h{
  background:var(--panel);font-family:var(--f-mono);font-size:9.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--dim);
}

.udet-tbl__r > span{min-width:0;overflow-wrap:anywhere;color:var(--muted)}

.udet-tbl__r > span:first-child{font-family:var(--f-mono);font-size:11px;color:var(--dim)}

.udet-tbl__r b{font-weight:600;color:var(--text)}

.udet-tbl__num{font-variant-numeric:tabular-nums;text-align:right}

/* Artı/eksi kredi hareketi — yön rengi (theme .lst-stat--live/--ban tonları). */

.udet-delta{font-variant-numeric:tabular-nums;font-weight:700}

.udet-delta--up{color:#7BE39A}

.udet-delta--down{color:#FF6A80}

/* ── MİNİ LİSTE (izleme/favori/yorum önizlemeleri) ── */

.udet-list{display:grid;gap:1px;border-radius:10px;overflow:hidden;background:var(--line)}

.udet-row{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:12px;align-items:center;
  padding:9px 12px;background:var(--surface);
}

.udet-row__b{min-width:0;display:flex;flex-direction:column;gap:2px}

.udet-row__t{
  font-size:12.5px;font-weight:600;color:var(--text);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.udet-row__t:hover{color:var(--orange)}

.udet-row__s{font-size:11px;color:var(--dim);overflow-wrap:anywhere}

.udet-row__x{flex:none;font-family:var(--f-mono);font-size:11px;color:var(--muted);white-space:nowrap}

/* ── PLAN ÇİP GRUBU (theme .catpill dilini sarar; eski .adraw__plans CSS'siz bir
   çekmece kalıntısıydı — o gitti, sarmalayıcı burada gerçekten dizim yapıyor) ── */

.udet-plans{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 0}

/* ── SAYAÇ ÇİPLERİ (içerik sekmesinin özet satırı) ── */

.udet-chips{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 14px}

.udet-chip{
  display:flex;align-items:baseline;gap:7px;padding:8px 12px;border-radius:11px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.udet-chip b{font-family:var(--f-display);font-size:16px;font-weight:800;color:var(--text);font-variant-numeric:tabular-nums}

.udet-chip span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}

/* ── BOŞ DURUM (her bölüm zarif kapanır) ── */

.udet-empty{
  padding:20px 14px;border-radius:10px;text-align:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px;color:var(--dim);
}

/* ── TEHLİKELİ EYLEM ŞERİDİ (ban / oturum kapatma) ── */

.udet-danger{
  display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:12px 14px;border-radius:11px;
  background:rgba(255,31,61,.06);box-shadow:inset 0 0 0 1px rgba(255,31,61,.22);
}

.udet-danger p{margin:0;font-size:11.5px;color:var(--muted);max-width:46ch}

/* ── GERİ BAĞLANTISI (liste ekranına dönüş) ── */

.udet-back{
  display:inline-flex;align-items:center;gap:6px;
  font-size:12px;font-weight:600;color:var(--dim);transition:color .15s;
}

.udet-back:hover{color:var(--orange)}

.udet-back svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2}

@media (max-width:860px){
  .udet-tbl--3 .udet-tbl__h,.udet-tbl--3 .udet-tbl__r,
  .udet-tbl--4 .udet-tbl__h,.udet-tbl--4 .udet-tbl__r{min-width:520px}
}

@media (max-width:560px){
  .udet-id{grid-template-columns:1fr;gap:12px}
  .udet-id__ava{width:56px;height:56px}
  .udet-id__name{font-size:18px}
  .udet-kv__r{grid-template-columns:1fr;gap:2px}
  .udet-danger{flex-direction:column;align-items:stretch}
  .udet-danger .btn{width:100%}
}

/* ════════ P8-ORTAKLIK (madde 43) — KALDIRILDI · 2026-08-22 (madde 67) ════════
   `/admin/ortaklik` ekrani proje sahibi karariyla BASTAN yazildi; v1'in `.ortset`
   (ayar karti) · `.ortrow` (satir) · `.reflink` (link+kopyala) kurallari ARTIK
   HICBIR SABLONDA kullanilmiyor (tarama: resources/ genelinde tek gecis yoktu).
   Olu kural birakmamak icin blok silindi; yerine gecen katman bu dosyanin SONUNDAKI
   "ADMIN · ORTAKLIK v2" bolumudur (`.ort2-*`). */
/* ════════════ P8 (#41) — DENETİM KAYITLARI (.dnt-*) · /admin/kayitlar BAŞTAN ════════════
   BAĞLAM (proje sahibi): "Denetim kayıtları sayfasını baştan dizayn et. CSS, HTML, JS,
   AJAX her şeyini." Eski ekran `.tklist/.tkrow` kuyruk imzasını ödünç alıyordu ve HAM
   `action` kodunu basıyordu (uye.ban) → okunamıyordu. Yeni ekran KENDİ imzasına sahip:
   ton-renkli sol ray (eylemin ciddiyeti) + grup ikonu + Türkçe başlık + ham kod rozeti.

   İZOLASYON: her kural `.dnt-` ile başlar → başka hiçbir ekranı hedeflemez; `.lst-*`
   ailesi (stat bandı) AYNEN yeniden kullanılır (yeni KPI stili YAZILMADI). Filtre alanları
   P8 `.f-*` kütüphanesinden gelir (yeni girdi CSS'i yok — kütüphanenin ilk gerçek tüketicisi
   bu ekran).
   TOKEN: renk/ölçü theme var() değişkenlerinden. İSTİSNA — ton renkleri: yeşil #7BE39A +
   rgba(76,194,107,.10-.25) ve kırmızı #FF6A80 + rgba(255,31,61,.10-.25) UYDURMA DEĞİL,
   `.lst-badge--live/--ban` (ek.css:749-753) ile BİREBİR aynı yerleşik tonlar. */
/* ── filtre paneli ── */

.dnt-filt{
  padding:12px;border-radius:14px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);margin-bottom:16px;
}

.dnt-filt__q{display:flex;align-items:center;gap:10px;margin-bottom:11px}

.dnt-filt__q .atb__q{flex:1;min-width:0;max-width:none;height:42px;background:var(--surface)}

.dnt-filt__go{height:42px;padding:0 18px;flex:none}

/* theme'de GLOBAL `.btn svg` ölçüsü YOK (her ekran kendi ölçüsünü verir: .lv__act 14px ·
   .auvc__acts 13px …). Verilmezse ikon viewBox'ından esneyip butonu taşırır — mobilde
   251px ölçüldü (ölçülmüş kusur). Bu ekranın ölçüsü .lv__act ile hizalı 14px. */

.dnt-filt__go svg{width:14px;height:14px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}

/* 5 filtre alanı: geniş ekranda tek satır, daraldıkça 3→2→1 kolona iner */

.dnt-filt__grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}

.dnt-filt__grid .f-field{min-width:0}

/* ── uygulanan filtre çipleri (her biri tek tıkla kalkar) ── */

.dnt-chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:11px;padding-top:11px;border-top:1px solid var(--line)}

.dnt-chip{
  display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 10px;
  border:0;border-radius:8px;cursor:pointer;
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);color:var(--orange);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.02em;
  transition:background .14s var(--ease),box-shadow .14s var(--ease);
}

.dnt-chip i{font-style:normal;font-size:14px;line-height:1;opacity:.8}

.dnt-chip:hover{background:var(--o14)}

.dnt-chip:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o14)}

/* "tümünü temizle" nötr tonda kalır (yıkıcı değil, filtre sıfırlama) */

.dnt-chip--all{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted)}

.dnt-chip--all:hover{background:var(--raised);color:var(--text)}

/* ── kayıt listesi ── */

.dnt-list{display:grid;gap:8px}

/* satır: [ikon] [gövde] [ham kod] [zaman] — tıklanabilir <button>, tam genişlik */

.dnt-row{
  position:relative;overflow:hidden;display:grid;align-items:center;
  grid-template-columns:38px minmax(0,1fr) auto auto;gap:13px;
  width:100%;padding:12px 15px 12px 17px;text-align:left;cursor:pointer;
  border:0;border-radius:13px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  color:inherit;font:inherit;
  transition:box-shadow .14s var(--ease),background .14s var(--ease);
}

/* sol ton rayı — eylemin ciddiyeti (lst ailesinin ray imzasıyla aynı dil) */

.dnt-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--line);transition:background .14s var(--ease)}

.dnt-row:hover{background:rgba(255,255,255,.02);box-shadow:inset 0 0 0 1px var(--o40)}

.dnt-row:focus-visible{outline:none;box-shadow:inset 0 0 0 1px var(--orange),0 0 0 3px var(--o14)}

.dnt-row__ico{
  flex:none;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);
}

.dnt-row__ico svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.8}

.dnt-row__b{display:flex;flex-direction:column;gap:4px;min-width:0}

.dnt-row__t{
  display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.dnt-row__m{
  font-family:var(--f-mono);font-size:10.5px;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.dnt-who{color:var(--muted)}

.dnt-sep{padding:0 5px;opacity:.55}

/* ham eylem kodu — Türkçe etiketin yanında ikinci sınıf bilgi olarak durur */

.dnt-code{
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.02em;color:var(--dim);
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  padding:3px 8px;border-radius:7px;white-space:nowrap;
}

.dnt-row__t2{display:flex;flex-direction:column;gap:3px;align-items:flex-end;text-align:right}

.dnt-row__t2 b{font-family:var(--f-mono);font-size:11.5px;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}

.dnt-row__t2 small{font-family:var(--f-mono);font-size:10px;color:var(--dim);white-space:nowrap}

/* sözlükte olmayan eylem: ham değer basılır + bu rozet (testte de yakalanır) */

.dnt-tag{
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;
  text-transform:uppercase;padding:2px 7px;border-radius:6px;
  color:#FF6A80;background:rgba(255,31,61,.1);box-shadow:inset 0 0 0 1px rgba(255,31,61,.25);
}

/* ── ton renkleri: ray + ikon çipi (ok / uyarı / tehlike; nötr taban rengi kullanır) ── */

.dnt-row--ok::before{background:rgba(76,194,107,.45)}

.dnt-row--ok .dnt-row__ico{color:#7BE39A;background:rgba(76,194,107,.1);box-shadow:inset 0 0 0 1px rgba(76,194,107,.25)}

.dnt-row--uyari::before{background:var(--o40)}

.dnt-row--uyari .dnt-row__ico{color:var(--orange);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40)}

.dnt-row--tehlike::before{background:#FF6A80}

.dnt-row--tehlike .dnt-row__ico{color:#FF6A80;background:rgba(255,31,61,.1);box-shadow:inset 0 0 0 1px rgba(255,31,61,.25)}

.dnt-row--tehlike:hover{box-shadow:inset 0 0 0 1px rgba(255,31,61,.4)}

/* ── boş durum (zarif): ikon + başlık + açıklama + filtre sıfırlama ── */

.dnt-empty{
  display:flex;flex-direction:column;align-items:center;gap:9px;
  padding:52px 22px;border-radius:14px;text-align:center;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.dnt-empty__ico{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);color:var(--dim);margin-bottom:3px;
}

.dnt-empty__ico svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8}

.dnt-empty b{font-family:var(--f-display);font-size:15px;color:var(--text)}

.dnt-empty p{margin:0;max-width:420px;font-size:12.5px;line-height:1.6;color:var(--dim)}

.dnt-empty .btn{margin-top:6px}

/* ── ÇEKMECE: meta anahtar/değer tablosu + katlanır ham JSON ── */

.dnt-draw .adraw__h{border-left:2px solid transparent}

.dnt-draw--ok .adraw__h{border-left-color:rgba(76,194,107,.45)}

.dnt-draw--uyari .adraw__h{border-left-color:var(--o40)}

.dnt-draw--tehlike .adraw__h{border-left-color:#FF6A80}

/* UA uzun olduğu için tek satıra sıkışmasın — alt alta ve sarmalı */

.dnt-kv--ua{flex-direction:column;align-items:flex-start;gap:4px}

.dnt-kv--ua b{white-space:normal;word-break:break-word;line-height:1.5}

.dnt-link{color:var(--orange);text-decoration:none}

.dnt-link:hover{text-decoration:underline}

.dnt-meta{display:grid;gap:1px;border-radius:11px;overflow:hidden;background:var(--line)}

.dnt-meta__r{display:grid;grid-template-columns:minmax(0,40%) minmax(0,60%);gap:10px;padding:9px 12px;background:var(--surface)}

.dnt-meta__k{font-size:11.5px;color:var(--muted);line-height:1.5}

.dnt-meta__v{font-family:var(--f-mono);font-size:11.5px;color:#E9E8E6;line-height:1.5;word-break:break-word}

.dnt-meta__v--mask{color:var(--dim);letter-spacing:.12em}

.dnt-ham summary{
  cursor:pointer;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding:4px 0;
}

.dnt-ham summary:hover{color:var(--orange)}

.dnt-ham summary:focus-visible{outline:none;color:var(--orange)}

/* ham JSON: yatay taşma KENDİ kutusunda kaydırılır (sayfa gövdesi asla kaymaz) */

.dnt-ham__pre{
  margin:9px 0 6px;padding:11px 13px;border-radius:11px;overflow-x:auto;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11px;line-height:1.65;color:#CDCCCA;white-space:pre;
}

/* ── RESPONSIVE (KURALLAR §2.5: 375/1280'de yatay taşma 0, hedef >=38px) ── */

@media (max-width:1100px){
  .dnt-filt__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (max-width:820px){
  .dnt-filt__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* satır kart olur: ikon+başlık üst satır, kod ve zaman alt satıra iner */
  .dnt-row{grid-template-columns:38px minmax(0,1fr);grid-auto-rows:auto;gap:9px 12px;padding:13px 14px 13px 16px}
  .dnt-row .dnt-code{grid-column:2;justify-self:start}
  .dnt-row__t2{grid-column:2;flex-direction:row;align-items:baseline;gap:8px;justify-self:start;text-align:left}
  .dnt-row__t{white-space:normal}
}

@media (max-width:700px){
  .dnt-filt{padding:10px}
  .dnt-filt__grid{grid-template-columns:1fr}
  .dnt-filt__q{flex-wrap:wrap}
  .dnt-filt__q .atb__q{height:44px;flex:1 1 100%}
  .dnt-filt__go{height:44px;flex:1 1 100%;justify-content:center}
  .dnt-chip{height:32px}                 /* dokunma hedefi */
  .dnt-meta__r{grid-template-columns:1fr;gap:3px}
  .dnt-empty{padding:40px 16px}
}

/* ══ QA 2026-08-22 · /kayit · /giris onay kutusu hata satiri ═══════════════════
   .check flex satirinin ALTINA dusen serbest hata metni (.field__err--free)
   kutu genisligi + gap kadar icerlek olmali ki etiket metniyle ayni sutunda
   baslasin. Mobilde .check gap 11px + kutu 20px = 31px (masaustunde 10+18=28,
   temada zaten dogru). Cerez cubugu sabit oldugundan formun dibine, cubuk
   yuksekligi kadar nefes payi birakilir (orta kaydirmada onay satirinin
   ustune biniyordu). :has destegi yoksa kural sessizce dusar. */

@media (max-width:560px){
  .field__err--free{margin-left:31px}
  body:has(.cookiebar) .auth__form{padding-bottom:104px}
}

/* ╌╌╌╌╌ P8 · SLIDER DÜZENLEME  (KULLANICI-BUGLAR 39b · 2026-08-22) ╌╌╌╌╌
   Proje sahibi kararı: /admin/slider'daki kadraj/başlık/spot/süre/hedef yol alanları
   SALT-GÖSTERİM olmaktan çıkıp DÜZENLENEBİLİR oldu. Ekranın tasarım dili DEĞİŞMEDİ:
   form kontrollerinin tamamı MEVCUT `.f-*` kütüphanesinden (`.f-field` · `.f-label` ·
   `.f-label--row` · `.f-input` · `.f-textarea` · `.f-select` · `.f-num` · `.f-row` ·
   `.f-hint` · `.f-req`), sekme rayı/panel `.cms-*`'ten, önizleme sahnesi bu dosyadaki
   MEVCUT `.slide-stage` bloğundan gelir. Aşağısı YALNIZCA o parçaların bu ekranda
   ihtiyaç duyduğu iki küçük düzeltmedir — yeni idiom UYDURULMADI.
   Kaynak-dışı admin ekranı → ENVANTER sözleşmesi yok. */
/* `.f-row` hücresi içinde etiket+kontrol ikilisi: `.f-field` sarmalayıcı KULLANILMAZ
   (satır aralığı iki kere binerdi), bu yüzden hücre kendi min-width:0'ını taşır. */

.slide-kadraj__c{min-width:0}

/* `.f-num` satır içi öğedir; kadraj hücresinde `.f-select` ile aynı genişlikte durmalı. */

.slide-kadraj__c .f-num{display:flex;width:100%}

.slide-kadraj__c .f-num > input{width:56px;flex:none}

.slide-kadraj__c .f-num > small{min-width:0;overflow-wrap:anywhere}

/* Kadrajın YÜRÜRLÜKTEKİ CSS değeri, etiketin sağ ucunda canlı okunur (JS tazeler). */

.f-label--row em b{font-family:var(--f-mono);font-weight:700;color:var(--muted)}

@media (max-width:700px){
  /* dar ende etiketin sağ ucundaki teknik değer alt satıra insin, taşma yapmasın */
  .f-label--row{flex-wrap:wrap}
}

/* ─── 39c (2026-08-22) · SLAYT EKLE / SİL / SIRALA + kicker/alt ────────────────
   Proje sahibi 2. tur kararı: panel artık slayt EKLİYOR, SİLİYOR ve SIRALIYOR.
   Yine yeni idiom UYDURULMADI — "yeni slayt" sekmesi `.cms-tab--slide`in bir
   varyantı, düğmeler `.btn`/`.btn--ghost`, uyarı satırı `.f-hint`in modifier'ı.
   Yıkıcı eylem tonu #FF6A80 theme'in KENDİ tonunun birebir kopyası (ek.css:685). */
/* Uyarı tonlu ipucu: `.f-hint` ile AYNI ölçü/ritim, yalnız zemini + rengi farklı.
   Hata DEĞİL — `.f-err` kırmızısı "kaydedilmedi" demektir; buradakiler
   ("görselsiz slayt yayında değil" / "alt metin boş") bilgilendirici uyarılardır. */

.f-hint--uyari{
  display:flex;gap:7px;padding:7px 10px;margin-top:8px;border-radius:8px;
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);color:var(--muted);
}

.f-hint--uyari b{color:var(--orange-hi);font-weight:700}

/* "Yeni slayt" sekmesi: küçük-resim yerine artı kutusu (aynı 44×26 ölçü;
   ray hizası bozulmasın diye `.cms-tab--slide` ızgarası aynen kullanılır). */

.cms-tab--yeni{margin-top:4px;box-shadow:inset 0 0 0 1px var(--line)}

.cms-tab__thumb--art{
  display:grid;place-items:center;background:var(--surface);
  color:var(--orange);font-size:15px;font-weight:700;line-height:1;
}

/* Panel başlığındaki sıra kapıları (↑ ↓) + "Anasayfada gör" bağlantısı.
   Sürükle-bırak YOK: iki düğme hem klavyeyle hem dokunmatikte çalışır. */

.slide-sira{display:flex;align-items:center;gap:8px;flex:none}

.slide-sira__b{
  width:32px;height:32px;flex:none;border:0;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}

.slide-sira__b:hover:not(:disabled){background:var(--o08);color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40)}

.slide-sira__b:disabled{opacity:.4;cursor:not-allowed}

.slide-sira__b:focus-visible{outline:2px solid var(--o40);outline-offset:2px}

/* Silme düğmesi: hayalet tabanı (`.btn--ghost`) korunur, YALNIZ hover tonu
   yıkıcıya döner — kaydet düğmesinin yanında kazara tıklanmasın diye ayrışır. */

.slide-sil{margin-left:auto}

.slide-sil:hover:not(:disabled){background:rgba(255,106,128,.10);color:#FF6A80;box-shadow:inset 0 0 0 1px rgba(255,106,128,.42)}

/* Not, sağa yaslanan sil düğmesinin SOLUNDA kalmalı (aksi hâlde arasına girerdi). */

.cms-actions .cms-note{order:-1}

@media (max-width:700px){
  /* Dar ende başlık iki satıra iner; sıra kapıları sola hizalanıp dokunma
     hedeflerini 38px'e çıkarır (KURALLAR §2.5). */
  .cms-panel__h{flex-wrap:wrap}
  .slide-sira{width:100%;justify-content:flex-start}
  .slide-sira__b{width:38px;height:38px}
  .slide-sil{margin-left:0}
  .cms-actions{flex-wrap:wrap}
  .cms-actions .cms-note{order:0;flex:1 0 100%}
}

/* ═══════════════════════════════════════════════════════════════════════════
   P4 · FERGIOHOUSE — YAYINCI (yapım evi) profili + panel yönetimi
   ───────────────────────────────────────────────────────────────────────────
   KULLANICI-BUGLAR madde 8. İki ekran:
     (a) /yayinci/{slug}   — sitenin kendi profil dilini (.mp*, .vid*, .btn)
         YENİDEN KULLANIR; burada yalnız kuruma özgü parçalar var: sekme
         BAĞLANTILARI (theme yalnız button biçimlendirir), sayaç şeridi,
         alt yazılı foto ızgarası, künye kartı ve kadro şeridi.
     (b) /admin/yayinci    — panelin CMS dili (.cms-*) + form kütüphanesi (.f-*)
         zaten var; burada yalnız özet şeridi + galeri ızgarası.
   Token disiplini: renk/ölçü DAİMA theme.css değişkenlerinden. Tek istisna
   #FF6A80 — theme'in KENDİ yıkıcı-eylem tonunun birebir kopyası (ek.css:685).
   Kaynak-dışı ekranlar → ENVANTER sözleşmesi yok.
   KURALLAR §2.5: 375/1280'de yatay taşma 0, dokunma hedefi >=38px.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── kimlik rozeti: "Yapım evi" (kişi profilinden ayırt eder) ── */

.yh-kind{
  height:22px;padding:0 9px;border-radius:4px;display:inline-flex;align-items:center;
  background:var(--o14);color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40);
  font-family:var(--f-body);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

/* ── sekmeler: GERÇEK bağlantı (JS'siz çalışsın diye). Ölçüler .mp__tabs ile
      aynı ritimde; aktif sekmenin altında turuncu çizgi. ── */

.yh-tabs{
  display:flex;gap:22px;overflow-x:auto;scrollbar-width:none;
  margin:0 0 18px;box-shadow:inset 0 -1px 0 var(--line);
}

.yh-tabs::-webkit-scrollbar{display:none}

.yh-tab{
  position:relative;flex:none;padding:12px 2px;
  font-size:13.5px;font-weight:700;color:var(--dim);white-space:nowrap;
  transition:color .18s var(--ease);
}

.yh-tab:hover{color:var(--muted)}

.yh-tab.on{color:var(--text)}

.yh-tab.on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:2px;background:var(--orange);
}

.yh-tab:focus-visible{outline:2px solid var(--o40);outline-offset:3px;border-radius:4px}

/* ── panel başlığı (sekme gövdesinin üstündeki iki satırlık künye) ── */

.yh-panehead{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin:0 0 14px;padding-bottom:10px;box-shadow:inset 0 -1px 0 var(--line-soft);
}

.yh-panehead--sub{margin-top:26px}

.yh-panehead b{font-family:var(--f-display);font-size:17px;font-weight:800;letter-spacing:-.02em}

.yh-panehead small{font-size:11.5px;color:var(--dim);white-space:nowrap}

/* ── "Hakkında" metni ── */

.yh-about{
  margin:0 0 16px;font-size:14.5px;line-height:1.75;color:var(--muted);
  overflow-wrap:anywhere;max-width:70ch;
}

/* ── set/yapım kareleri: 16/9 ızgara + alt yazı ── */

.yh-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(228px,1fr));gap:12px}

.yh-shot{
  margin:0;border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}

.yh-shot img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.yh-shot figcaption{
  padding:9px 11px;font-size:12px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;
}

/* ── künyedeki oyuncu şeridi ── */

.yh-cast{display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}

.yh-castchip{
  display:flex;align-items:center;gap:11px;padding:9px 11px;min-height:56px;
  border-radius:12px;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s var(--ease),background .18s var(--ease);
}

.yh-castchip:hover{background:var(--raised);box-shadow:inset 0 0 0 1px var(--o40)}

.yh-castchip img{width:38px;height:38px;border-radius:10px;object-fit:cover;flex:none}

.yh-castchip span{min-width:0}

.yh-castchip b{
  display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.yh-castchip .verif{width:13px;height:13px;flex:none}

.yh-castchip small{display:block;font-size:11px;color:var(--dim);margin-top:1px}

.yh-contact{margin:18px 0 0;font-size:13px;color:var(--dim)}

.yh-contact a{color:var(--orange);font-weight:700}

.yh-contact a:hover{text-decoration:underline}

/* ── sağ sütun: kanal künyesi kartı (.talk ile aynı dil, parasal parça yok) ── */

.yh-card{
  padding:18px;border-radius:14px;position:relative;overflow:hidden;
  background:linear-gradient(168deg,rgba(255,144,0,.09),var(--panel) 46%);
  box-shadow:inset 0 0 0 1px var(--o40);
}

.yh-card__top{display:flex;align-items:center;gap:11px}

.yh-card__ava{flex:none}

.yh-card__ava img{width:44px;height:44px;border-radius:12px;object-fit:cover}

.yh-card__who{min-width:0}

.yh-card__who b{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:800;letter-spacing:-.015em}

.yh-card__who .verif{width:14px;height:14px;flex:none}

.yh-card__who small{display:block;font-size:11.5px;color:var(--dim);margin-top:2px}

.yh-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:16px 0 0;
  background:var(--line);border-radius:9px;overflow:hidden;
}

.yh-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;padding:11px 6px;
  background:var(--panel);text-align:center;
}

.yh-stat b{font-size:16px;font-weight:800;color:var(--orange);letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.yh-stat small{font-size:10.5px;font-weight:600;color:var(--dim);line-height:1.3}

.yh-card__note{margin:14px 0 0;font-size:12px;line-height:1.6;color:var(--dim)}

.yh-card__go{
  display:flex;align-items:center;justify-content:center;gap:8px;height:44px;margin-top:14px;
  border-radius:11px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);
  font-size:13.5px;font-weight:700;color:var(--text);
  transition:background .18s var(--ease),box-shadow .18s var(--ease),color .18s var(--ease);
}

.yh-card__go:hover{background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40);color:var(--orange)}

.yh-card__go svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── /admin/yayinci: özet şeridi (dördü de canlı sorgu) ── */

.yad-ozet{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;
  margin:0 0 16px;background:var(--line);border-radius:12px;overflow:hidden;
}

.yad-ozet__k{display:flex;flex-direction:column;gap:3px;padding:13px 14px;background:var(--panel)}

.yad-ozet__k b{font-size:19px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.yad-ozet__k small{font-size:11px;color:var(--dim);line-height:1.35}

/* ── /admin/yayinci: adres (slug) alanı — "/yayinci/" ön eki alanın DIŞINDA bir
      etiket. Ölçüler .f-input ile aynı ritimde; ön ek küçüldüğünde alan büzülmesin
      diye min-width:0 (KURALLAR §2.5: 375'te yatay taşma 0). ── */

.yad-slug{display:flex;align-items:center;gap:8px;min-width:0}

.yad-slug__on{
  flex:none;font-family:var(--f-mono);font-size:12px;color:var(--dim);
  white-space:nowrap;user-select:all;
}

.yad-slug .f-input{min-width:0;font-family:var(--f-mono);font-size:12.5px}

/* ── /admin/yayinci: avatar önizlemesi ── */

.yad-ava{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin:0 0 12px}

.yad-ava img{
  width:96px;height:96px;border-radius:16px;object-fit:cover;flex:none;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.yad-ava > div{min-width:0;flex:1 1 220px}

.yad-ava .f-hint{margin-top:0}

/* ── /admin/yayinci: galeri ızgarası + kaldır düğmesi ── */

.yad-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(196px,1fr));gap:12px;margin-top:14px}

.yad-kare{
  position:relative;margin:0;border-radius:12px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}

.yad-kare img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}

.yad-kare figcaption{padding:8px 10px;font-size:11.5px;line-height:1.45;color:var(--muted);overflow-wrap:anywhere}

.yad-kare__sil{
  position:absolute;right:8px;top:8px;width:38px;height:38px;border:0;border-radius:10px;
  display:grid;place-items:center;cursor:pointer;
  background:rgba(0,0,0,.66);color:var(--text);
  transition:background .18s var(--ease),color .18s var(--ease);
}

.yad-kare__sil:hover{background:#FF6A80;color:#000}

.yad-kare__sil svg{width:16px;height:16px}

.yad-kare__sil:focus-visible{outline:2px solid var(--o40);outline-offset:2px}

/* ── RESPONSIVE ── */

@media (max-width:900px){
  .yad-ozet{grid-template-columns:repeat(2,minmax(0,1fr))}
}

@media (max-width:700px){
  .yh-shots{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:10px}
  .yh-cast{grid-template-columns:1fr}
  .yh-panehead{flex-direction:column;align-items:flex-start;gap:3px}
  .yh-panehead small{white-space:normal}
  .yh-tabs{gap:16px}
  .yh-tab{padding:13px 2px}          /* dokunma hedefi */
  .yad-grid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:10px}
}

@media (max-width:520px){
  .yad-ozet{grid-template-columns:1fr}
  .yad-ava img{width:72px;height:72px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN · JS-KAPALI ERİŞİM               (2026-08-22 · ilerici geliştirme)
   ═══════════════════════════════════════════════════════════════════════════
   Admin listelerindeki filtre/sıralama/sayfalama denetimleri <button> idi:
   JS kapalıyken hepsi ÖLÜYDÜ. Site tarafındaki çözümle aynı ilkeye geçildi —
   denetim artık GERÇEK <a href> (ya da <form method="GET">), JS yalnız üstüne
   AJAX bindiriyor (core/sayfa.js `sefBagla`).

   BU BÖLÜM YALNIZ KÖPRÜLEMEDİR: theme.css'teki ölçüler ELEMENT'e bağlı
   yazılmış (`.seg button`, `.apag__b button`, `.atb__q button`); <a>/<span>
   aynı kuralı almadığı için birebir aynı ölçüler burada tekrarlanır.
   theme.css SALT-OKUNUR; `.f-*` / `.lst-*` / `.dnt-*` idiomlarına DOKUNULMADI
   (.cms-tab ve .dnt-chip zaten element'siz seçici → <a> ile aynen çalışır).
   GÖRÜNÜM DEĞİŞMEZ: değerler theme.css 2153-2163 / 4849-4853 / 4946-4953
   satırlarından birebir kopyadır. ══════════════════════════════════════════ */
/* ── durum çipleri (.seg) — theme.css `.seg button` birebir ── */

.seg a{
  display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:7px;
  font-size:13px;font-weight:700;color:#B6B4B1;transition:.16s;white-space:nowrap;
  cursor:pointer;
}

.seg a:hover{color:#fff}

.seg a.on{background:var(--orange);color:var(--ink)}

.seg a i{font-style:normal;font-family:var(--f-mono);font-size:10.5px;opacity:.75}

.seg--sm a{padding:6px 11px;font-size:12px}

/* ── arama kutusundaki "×" (.atb__q) — theme.css `.atb__q button` birebir ── */

.atb__q a{
  width:24px;height:24px;flex:none;border-radius:50%;background:#242424;color:var(--muted);
  font-size:14px;line-height:1;transition:.15s;
  display:grid;place-items:center;cursor:pointer;
}

.atb__q a:hover{background:var(--orange);color:var(--ink)}

/* ── sayfalama (.apag__b) — theme.css `.apag__b button` birebir.
      Aktif sayfa artık <span class="on"> (bağlantı değil: kendine link olmaz). ── */

.apag__b a,
.apag__b span{
  min-width:32px;height:32px;padding:0 6px;border-radius:7px;background:var(--surface);
  color:#C5C4C2;font-family:var(--f-mono);font-size:12px;display:grid;place-items:center;transition:.14s;
}

.apag__b a:hover{background:var(--raised);color:#fff}

.apag__b span.on{background:var(--orange);color:var(--ink)}

/* ── klavye erişimi: <a> denetimleri görünür odak halkası alsın (button'da
      tarayıcı varsayılanı vardı; burada tek dilde tanımlanır). ── */

.seg a:focus-visible,
.atb__q a:focus-visible,
.apag__b a:focus-visible{outline:2px solid var(--o40);outline-offset:2px}

/* ── JS kapalıyken görünen "Uygula" düğmesi (<noscript>) araç çubuğunda
      diğer denetimlerle aynı yükseklikte dursun. ── */

.atb noscript .btn{height:40px}

/* ── P4 · FERGIOHOUSE — kapak kadrajı (denetçi, 2026-08-22) ─────────────────
   Kurum kapağı KARE bir anahtar görsel (1024×1024). Tema `.mp__cover>img`e
   `object-position:center 32%` veriyor; bu oran oyuncu portrelerine göre
   ayarlı ve kare kurum görselinde figürün BAŞINI üstten kesiyordu (ölçüm:
   1366'da görünen pencere kaynağın y≈213-570 aralığı, başın tepesi y≈170).
   %26 pencereyi yukarı alır, maske + kulaklar tam girer; mobilde (390×450
   dikey alan) de kadraj yüzlerde kalır.

   `.mp__coverblur` kapak altına AYNALANMIŞ bulanık bir ışık serer. Bu görsel
   yüksek kontrastlı olduğu için 58px blur'da ters duran bir gövde olarak
   OKUNUYORDU (hata gibi görünüyor). Yalnız bu sayfada blur artırılıp opaklık
   düşürülür — efekt "ışık" olarak kalır, figür okunmaz. Kapsam `.yh` ile
   yayıncı sayfasına kilitli; oyuncu profilleri ETKİLENMEZ. */

.yh .mp__cover > img{ object-position:center 26%; }

.yh .mp__coverblur{ filter:blur(86px) saturate(1.6) brightness(.42); opacity:.55; }

/* ╔══════════════════════════════════════════════════════════════════════════════════╗
   ║  ADMIN · SEKME/ÇEKMECE DÜZELTME  (proje sahibi: "Ajax ile açılan tab desktop ve  ║
   ║  mobilde bozuk; yarı açılıyor, butonları her şeyi sağlam değil")                 ║
   ╚══════════════════════════════════════════════════════════════════════════════════╝

   ── KÖK NEDEN 1: position:fixed KATMANLAR VIEWPORT'A DEĞİL GÖVDEYE YAPIŞIYORDU ──
   theme.css:378 `main > *{animation:pageIn .24s var(--ease) both}` ve theme.css:4587
   `.adm__main{animation:pageIn .22s var(--ease) both}`. `pageIn` (theme.css:377)
   `transform`i canlandırır; `fill-mode: both` animasyon BİTTİKTEN SONRA DA son kareyi
   uygulamaya devam eder. Sonuç: bu iki katmanın hesaplanan `transform` değeri `none`
   DEĞİL `matrix(1,0,0,1,0,0)` olarak KALIR. CSS Transforms kuralı: transform'u none
   OLMAYAN her öğe, position:fixed torunları için CONTAINING BLOCK üretir. Yani admin
   gövdesinin içine basılan HER sabit katman viewport yerine gövde kutusuna hapsoluyordu.
   ÖLÇÜM (390 dokunma, /admin/kayitlar çekmecesi): .adraw → top:76 yükseklik:3130px,
   ekranda görünen %26, iç kaydırma YOK, 1 düğmeden 0'ı tıklanabilir; /admin/gelen-videolar
   çekmecesi 3 düğmeden 1'i; sayfa mobilde 390→417 zoom-out oluyordu. Aynı tuzağa
   `.adraw__scrim` (yarım perde → arkaya tıklanabiliyor), `.sctoast` (toast) ve `.abulk`
   (toplu eylem çubuğu) ile site tarafında `/premium` `.pm2-bar` de düşüyordu.
   DÜZELTME: admin kabuğunda giriş animasyonu transform YERİNE yalnız opaklık kullanır
   (sabit katman hiçbir an hapsolmaz); site tarafında ise animasyon AYNEN kalır, yalnız
   dolgusu `backwards`a çekilir → animasyon bitince transform gerçekten `none` olur.
   GÖRSEL FARK: admin ekranlarında 9px'lik giriş kayması gider, solma kalır. */

@keyframes fhAdmIn{from{opacity:0}to{opacity:1}}

main.adm__main,main.adm__main > *{animation-name:fhAdmIn}

main > *{animation-fill-mode:backwards}

/* ── KÖK NEDEN 2: SEKME RAYI YAPIŞKAN ÜST BAR'IN ALTINDA KALIYORDU ──
   `.admtop` (theme.css:4590) position:sticky · top:0 · height:58px · z-index:40.
   `.cms-tabs` (ek.css:528) position:sticky · top:14px · z-index yok. Sayfa kaydırılınca
   ray y=14'e park ediyor, İLK sekmenin merkezi y≈44 → üst bar'ın ALTINDA kalıyor.
   `elementFromPoint(x,44)` `.admtop` döndürüyor: GERÇEK fare tıklaması sekmeye ULAŞMIYOR
   (programatik element.click() ulaşır — hata bu yüzden testte görünmüyordu).
   ÖLÇÜM 1366: /admin/icerik · /admin/slider · /admin/yayinci · /admin/uyeler/{id} —
   dördünde de ilk sekme ULAŞILAMAZ. DÜZELTME: ray üst bar'ın ALTINDAN başlar; uzun ray
   (11 sekmeli /admin/seo) ekranı taşırmasın diye kendi içinde kaydırılır. */

:root{ --adm-bar:58px }

/* = theme.css:4592 .admtop yüksekliği */

:where(.adm) .cms-tabs{
  top:calc(var(--adm-bar) + 14px);
  max-height:calc(100vh - var(--adm-bar) - 28px);overflow-y:auto;scrollbar-width:none;
}

:where(.adm) .cms-tabs::-webkit-scrollbar{display:none}

/* Klavye/çapa kaynaklı kaydırmalar da bar'ın altına insin (odaklanan sekme gizlenmesin). */

:where(.adm) .cms,:where(.adm) .cms-tabs,:where(.adm) .cms-tab,:where(.adm) .cms-panel{
  scroll-margin-top:calc(var(--adm-bar) + 14px);
}

/* ── KÖK NEDEN 3: MOBİLDE SEKME RAYI EKRAN DIŞINDA KALIYORDU ──
   ≤860px'te ray `position:static` yatay şeride dönüyor ve sayfanın EN ÜSTÜNDE kalıyor.
   Paneller mobilde 1.4k–3.6k px: kullanıcı paneli okurken ray ekranda YOK; sekme
   değiştirmek için tüm paneli geri kaydırması gerekiyor. ÖLÇÜM 390 (sayfa yarısına
   kaydırılmış): 7/7 ekranda rayın konumu ekran dışı (top −52px … −1769px).
   DÜZELTME: mobilde de yapışkan — üst bar'ın hemen altında kalır, her an ulaşılabilir. */

@media (max-width:860px){
  :where(.adm) .cms-tabs{
    position:sticky;top:var(--adm-bar);z-index:30;
    max-height:none;overflow-y:visible;overflow-x:auto;
    box-shadow:inset 0 0 0 1px var(--line),0 10px 20px -18px #000;
  }
}

/* ── ÇEKMECE: kaydırma zinciri ──
   `.adraw` viewport'a yapıştıktan sonra içeriği kendi içinde kaydırılır; sonuna
   gelindiğinde kaydırma ARKADAKİ listeye zincirlenmesin (mobilde çekmece "kayıyor"
   hissi veriyordu). Yalnız zincir kesilir; çekmecenin kendi kaydırması aynen kalır. */

:where(.adm) .adraw{overscroll-behavior:contain}

/* ═══════════════════════════════════════════════════════════════════════════
   STORIES · MOBİL TAM EKRAN   (proje sahibi bug bildirimi, 2026-08-22)
   Bildirim: "Stories detay mobilde tam sayfa kaplamıyor, daha fazla yer kaplıyor
   ve sayfa çubuğu aşağı iniyor · ileri-geri butonları mobilde yok."

   ÖLÇÜM (puppeteer, dokunma emülasyonlu, 5 cihaz × dikey/yatay — hepsi ÖNCE):
     · YATAY'da izleyici paneli 844×390 ekranda 201×358 PX'lik küçük bir kutu.
       Kök neden: tam ekran kuralı `@media(max-width:560px)` idi; telefon YATAY'da
       viewport GENİŞLİĞİ 640-932px olur → kural HİÇ eşleşmez, masaüstü çerçeveli
       görünüm devreye girer. 5/5 cihazda yeniden üretildi.
     · İleri/geri düğmeleri 10/10 ölçümde "DÜĞME YOK". Kök neden: `.stv__nav`
       taban kuralı `display:none` + yalnız `@media(hover:hover) and
       (pointer:fine)` içinde `grid`. Dokunmatik cihaz `hover:none` +
       `pointer:coarse` bildirir (ölçüldü) → düğmeler HİÇ boyanmadı.
     · YÜKSEKLİK KAYNAK ÇATIŞMASI: `.stv` `position:fixed;inset:0` ile yüksekliğini
       ICB'den alıyordu; ICB mobil tarayıcılarda BÜYÜK viewport'tur (vh == lvh,
       adres çubuğu HARİÇ TUTULMAZ). Panel ise `100dvh` (DİNAMİK viewport)
       kullanıyordu. Adres çubuğu görünürken lvh − dvh ≈ 60-120px: kapsayıcı
       ekranın altına taşar, panel ortalanıp iki uçta boşluk bırakır — "tam
       kaplamıyor + daha fazla yer kaplıyor" tam olarak budur. Headless Chrome'da
       çubuk simüle edilemediği için bu kalem STATİK ölçüldü (bkz. rapor); çözüm
       iki kaynağı TEKE indirir, dolayısıyla fark hangi cihazda olursa olsun sıfırdır.

   ÇÖZÜM: yükseklik TEK kaynaktan → JS `visualViewport` ölçümünü `--stv-vh`e
   yazar, CSS `height:var(--stv-vh,100dvh)` (kademeli yedek: dvh bilmeyen
   tarayıcıda 100vh). Panel artık kendi ölçüsünü değil KAPSAYICISINI (%100)
   doldurur — iki kaynak kalmadığı için sapma da kalmaz.
   theme.css DOKUNULMADI; burası ek.css'in kendi bölümü. ═══════════════════ */
/* ── 1) İZLEYİCİ KAPSAYICI: tek yükseklik kaynağı + jest yalıtımı ─────────── */

.stv{
  /* `inset:0`ın `bottom`u yüksekliği ICB'ye çiviliyordu — serbest bırakılır. */
  bottom:auto;
  height:100vh;                    /* yedek: dvh/var bilmeyen eski tarayıcı */
  height:100dvh;                   /* dinamik viewport: çubuk açık/kapalı doğru */
  height:var(--stv-vh,100dvh);     /* JS ölçümü varsa o kazanır (en kesin) */
  -webkit-backdrop-filter:blur(14px);   /* taban kuralda ön ek eksikti (Safari) */
  /* Arka plan kaydırma kaçağına ikinci savunma: overlay üstünde pan/zoom yok. */
  touch-action:none;
  overscroll-behavior:none;
}

/* ── 2) ARKA PLAN KAYDIRMA KİLİDİ (iOS) ───────────────────────────────────
   Proje deseni `body.no-scroll` (theme.css:6091) KORUNUR — yeni kilit icat
   edilmedi. Ancak iOS Safari'de `overflow:hidden` DOKUNMATİK kaydırmayı
   durdurmaz; tek çare `position:fixed`. Bu ek yalnız izleyicinin kendi
   yardımcı sınıfına (`.stv-lock`) bağlanır ki gate.js/plw.js'in `no-scroll`
   kullanımı AYNEN kalsın. Konum stories.js'te `top:-Ypx` ile taşınır ve
   kapanışta `scrollTo` ile AYNEN geri verilir. */

body.no-scroll.stv-lock{
  position:fixed;left:0;right:0;width:100%;
  overscroll-behavior:none;
}

/* ── 3) ÜST BAR · güvenli alan (çentik/ada) yatayda da hesaba katılsın ────── */

.stv__top{
  padding-left:max(12px,env(safe-area-inset-left));
  padding-right:max(12px,env(safe-area-inset-right));
}

/* ── 4) YAN OKLAR HER CİHAZDA ─────────────────────────────────────────────
   `hover:hover and pointer:fine` kapısı KALKTI (mobilde düğme yokluğunun kök
   nedeni). Taban görünüm masaüstündeki konumlandırmayı bozmaz; mobil konum
   aşağıdaki telefon sorgusunda verilir. */

.stv__nav{display:grid;-webkit-tap-highlight-color:transparent}

/* ── 5) TELEFON (dikey ≤560px · yatay ≤560px yükseklik) ────────────────────
   Genişlik yerine YÖNE göre eşleşir: telefon yatayken genişlik 640-932px olur,
   eski `max-width:560px` bu yüzden ıskalıyordu. Tablet (kısa kenarı >560px)
   bilinçli olarak DIŞARIDA: 9:16 klip iPad'de tam kanama ile aşırı kırpılırdı,
   orada mevcut çerçeveli görünüm zaten doğru. */

@media (max-width:560px) and (orientation:portrait),
       (max-height:560px) and (orientation:landscape){

  .stv{background:#000;-webkit-backdrop-filter:none;backdrop-filter:none}

  /* Panel artık KENDİ yüksekliğini hesaplamaz; kapsayıcıyı doldurur. */
  .stv__panel{
    width:100%;height:100%;max-width:none;max-height:none;
    border-radius:0;flex:0 0 auto;
  }

  /* Yan oklar: ekran kenarına 10px + güvenli alan, dikey ortada, 46px dokunma
     hedefi (≥44px). z-index 7 → dokunma bölgelerinin (z4) ve kilit kartının
     (z4) ÜSTÜNDE; panel pointerdown'ı basılı-tut'a girmez çünkü düğmeler
     panelin DIŞINDA, doğrudan .stv çocuğudur — mevcut tap-to-advance bozulmaz. */
  .stv__nav{
    width:46px;height:46px;z-index:7;
    /* Parlak kare ustunde de okunsun: koyu zemin + hafif blur + ince kenar. */
    background:rgba(0,0,0,.52);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.2);
    box-shadow:0 6px 18px -8px rgba(0,0,0,.9);
  }
  .stv__nav.-prev{left:max(10px,env(safe-area-inset-left));right:auto}
  .stv__nav.-next{right:max(10px,env(safe-area-inset-right));left:auto}
  /* Dokunmatikte `:hover` tap sonrası TAKILI kalır (turuncu düğme ekranda asılı
     kalırdı) — telefonda hover görünümü nötrlenir, geri bildirim `:active`te. */
  .stv__nav:hover{background:rgba(0,0,0,.52)}
  .stv__nav:active{
    background:var(--orange);color:var(--ink);border-color:var(--orange);
    transform:translateY(-50%) scale(.92);
  }
  .stv__nav:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

  /* Oklar kilit kartının köşelerini yalıyordu (ölçüm: 390px'te 11px bindirme).
     Kart okların koridorunu boş bırakacak kadar daraltılır — metin merkezde
     kaldığı için okunurluk düşmez, düğmeler içeriği KAPATMAZ. */
  .stv__gate-card{max-width:min(300px,calc(100vw - 130px))}
}

/* ── 6) TELEFON · YATAY ────────────────────────────────────────────────────
   Ekran 9:16'dan çok daha geniş: panel tam kanama yapsaydı dikey klip yatayda
   ~%24'üne kırpılırdı. Panel TAM YÜKSEKLİK + 9:16 oranında ortalanır (siyah
   yan bantlar); kaplamayı .stv'nin kendisi %100 yapar. Kısa ekranda dikey
   ritim de sıkışır. */

@media (max-height:560px) and (orientation:landscape){
  .stv__panel{height:100%;width:auto;aspect-ratio:9/16;max-width:100%;margin:0 auto}
  .stv__top{padding-top:calc(8px + env(safe-area-inset-top));padding-bottom:16px}
  .stv__bars{margin-bottom:9px}
  .stv__who img{width:30px;height:30px}
  .stv__btn{width:44px;height:44px}
  /* Uzun ipucu dar panelde 3 satıra sarıyordu: küçültülür, iki satırda oturur. */
  .stv__hint{font-size:9.5px;line-height:1.35;padding:0 8px;bottom:calc(7px + env(safe-area-inset-bottom))}
  .stv__paused{width:54px;height:54px}
  /* Misafir kilidi kartı kısa ekranda kompakt. Butonlar ALT ALTA kalır: yatayda
     panel yalnız ~220px geniş (9:16), yan yana dizilince "Ücretsiz üye ol"
     paneli taşırıyordu (ilk denemede ölçüldü, stv-gate-yatay.png). Onun yerine
     dikey ritim kısaltıldı — kart 390px yükseklikte rahat oturuyor. */
  .stv__gate{padding:78px 14px calc(12px + env(safe-area-inset-bottom))}
  .stv__gate-card{max-width:none;padding:15px 14px 14px}
  .stv__gate-ico{width:38px;height:38px;margin-bottom:8px}
  .stv__gate-ico svg{width:18px;height:18px}
  .stv__gate-ttl{font-size:15.5px;margin-bottom:5px}
  .stv__gate-txt{font-size:11.5px;line-height:1.45;margin-bottom:11px}
  .stv__gate-act{gap:7px}
  .stv__gate-act .btn{padding:9px 12px;font-size:12px}
}

/* ── 7) KISA DİKEY EKRAN (ör. 360×640) · kilit kartı taşmasın ─────────────── */

@media (max-width:560px) and (orientation:portrait) and (max-height:680px){
  .stv__gate{padding:56px 18px calc(24px + env(safe-area-inset-bottom))}
  .stv__gate-card{padding:20px 18px 18px}
  .stv__gate-ttl{font-size:17px}
}

KÖK NEDEN 1b: ÇEKMECE, ÜST BAR'IN ALTINDA KALIYORDU (z-index 76 > 40 OLMASINA RAĞMEN) ──
   Aynı `pageIn` animasyonunun İKİNCİ etkisi: animasyon `opacity`yi de canlandırır ve
   `fill-mode: both` yüzünden bitmiş animasyon UYGULANMAYA DEVAM eder → `main.adm__main`
   ile `main > *` (ör. div.asp) YIĞIN BAĞLAMI (stacking context) üretir. Bu bağlam
   `z-index:auto` olduğundan `.admtop`un (z-index:40) ALTINDA boyanır; içindeki .adraw
   z-index'i 76 da olsa 999 da olsa bağlamın DIŞINA çıkamaz.
   ÖLÇÜM: çekmecenin kapat (×) düğmesinin merkezinde `elementFromPoint` → HEADER.admtop;
   yani × TIKLANAMIYOR ve çekmece başlığı (avatar + talep no) üst bar'ın altında kayboluyor
   — ekran görüntüsüyle doğrulandı. z-index denemeleri (admtop:1 · adraw:999) hiçbir şey
   değiştirmedi; çekmece <body> altına TAŞININCA düzeldi → sorun z-index değil, YIĞIN BAĞLAMI.
   DÜZELTME: çekmece AÇIKKEN bu iki düzeyde animasyon kalkar → yığın bağlamı oluşmaz,
   çekmece/perde gerçek z-index'iyle üst bar'ın ÜSTÜNE çıkar. Çekmece kapanınca giriş
   animasyonu aynen geri gelir (kalıcı görsel kayıp yok). */

main.adm__main:has(.adraw:not([hidden])),main.adm__main:has(.adraw:not([hidden])) > *{animation:none}

/* ── MOBİLDE SAYFA ZOOM-OUT: `.seg` filtre şeridi düzen viewport'unu genişletiyordu ──
   ÖLÇÜM (390 dokunma, sekme/çekmece taramasında yakalandı): /admin/basvurular'da
   `innerWidth` 390 değil 524, /admin/kaldirma-talepleri 461, /admin/gelen-videolar 401
   — yani Chrome sayfayı KÜÇÜLTEREK sığdırıyor, tüm arayüz ufalıyor ve çekmece de o
   ölçekte açılıyor. Taşıran öğe: `.seg`/`.seg--sm` durum çipi şeridi (theme.css:2153
   `display:inline-flex`, sarma YOK) — "Onaylı 1 · Reddedildi 1" çipleri 390'ı aşıyor
   (ölçüm: sağ kenar 524px). DÜZELTME: dar ekranda şerit KENDİ İÇİNDE yatay kayar
   (`.cms-tabs` mobil deseninin aynısı); sayfa artık taşmaz, ölçek 1:1 kalır.
   Kapsam yalnız `.adm` + ≤860px → site segment denetimleri etkilenmez. */

@media (max-width:860px){
  :where(.adm) .seg{
    display:flex;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
  }
  :where(.adm) .seg::-webkit-scrollbar{display:none}
  :where(.adm) .seg > *{flex:0 0 auto}
}

/* Üye detayının kompakt defterine BEŞİNCİ kolon (Not) — `.udet-tbl--3/--4` ile aynı
   aile, aynı ölçü dili. Yeni bir tablo dili açılmadı; iki ekran da bunu kullanır. */

.udet-tbl--5 .udet-tbl__h,.udet-tbl--5 .udet-tbl__r{
  grid-template-columns:124px minmax(0,1fr) minmax(0,1.1fr) 96px 96px;
}

@media (max-width:960px){
  .udet-tbl--5 .udet-tbl__h,.udet-tbl--5 .udet-tbl__r{min-width:620px}
}

/* ── KİMLİK AFİŞİ: gerçek kapak görseli + üstüne binen avatar ───────────────
   Kapak `background-image` ile basılır (dekoratif; <img> olsaydı ekran okuyucuya
   anlamsız bir öğe eklerdi — aria-hidden ile birlikte doğru tercih budur). */

.oyd-hero{
  position:relative;margin:0 0 14px;border-radius:14px;overflow:hidden;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.oyd-hero__cover{
  position:relative;height:104px;
  background:linear-gradient(120deg,var(--o08),transparent 60%),var(--surface);
  background-size:cover;background-position:center;
}

/* Okunabilirlik perdesi: kapağın parlak alanına düşen ad/rozet kaybolmasın. */

.oyd-hero__cover::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.10),var(--panel));
}

.oyd-hero__b{
  position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;
  align-items:end;padding:0 18px 16px;margin-top:-34px;
}

.oyd-hero__ava{
  width:72px;height:72px;border-radius:18px;object-fit:cover;display:block;
  background:var(--surface);box-shadow:0 0 0 3px var(--panel),inset 0 0 0 1px var(--line);
}

.oyd-hero__id{min-width:0;display:flex;flex-direction:column;gap:8px;padding-bottom:2px}

/* Kapak GERÇEK <img> (inline background-image DEĞİL — KURALLAR §8). Okunabilirlik
   perdesi `.oyd-hero__cover::after` üretilen SON kutu olduğu için görselin ÜSTÜNE boyanır. */

.oyd-hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* ── MEDYA IZGARASI: önizleme + gerçek dosya girdisi yan yana ── */

.oyd-media{display:grid;grid-template-columns:1fr 1fr;gap:14px}

.oyd-media__k{
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start;
  padding:12px;border-radius:12px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.oyd-media__ava{
  width:88px;height:88px;border-radius:14px;object-fit:cover;display:block;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

/* Kapak önizlemesi 3:1 — üretilen görselin (1200×400) GERÇEK oranı.
   GERÇEK <img> (inline background-image kullanılmadı — KURALLAR §8 inline style
   yasağı + CSS enjeksiyon yüzeyi bırakmamak). Kapak yokken aynı kutu, yer tutucu
   metinle basılır; JS dosya seçilince yerine <img> koyar. */

.oyd-media__prev{display:block}

.oyd-media__cap{
  display:block;width:132px;height:44px;border-radius:10px;object-fit:cover;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.oyd-media__cap--bos{display:grid;place-items:center}

.oyd-media__cap em{font-style:normal;font-size:10px;color:var(--dim)}

.oyd-media__f{min-width:0}

.oyd-media__f .f-file__in{width:100%}

.oyd-media__f .f-label{margin-bottom:6px}

/* ── GÖRÜNÜRLÜK ANAHTARLARI: açıklamalı satırlar (ne yaptığı yanında yazar) ── */

.oyd-switches{display:grid;gap:1px;border-radius:11px;overflow:hidden;background:var(--line)}

.oyd-switch{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px;align-items:center;
  padding:11px 13px;background:var(--surface);
}

.oyd-switch__b{min-width:0;display:block}

.oyd-switch__b b{display:block;font-size:13px;font-weight:700;color:var(--text)}

.oyd-switch__b small{display:block;margin-top:2px;font-size:11.5px;color:var(--dim);line-height:1.5}

/* ── BİLGİ / UYARI NOTU: kuralı ekranda söyler (aldatıcı kontrol bırakmamak için) ── */

.oyd-note{
  margin:0 0 12px;padding:11px 13px;border-radius:11px;
  font-size:12px;line-height:1.6;color:var(--muted);
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);
}

.oyd-note b{color:var(--text);font-weight:700}

.oyd-note--uyari{background:rgba(255,31,61,.05);box-shadow:inset 0 0 0 1px rgba(255,31,61,.20)}

.oyd-note--uyari b{color:#FF6A80}

/* ── SÜRE SEÇİCİ: GERÇEK plans satırlarından beslenen radyo kartları ────────
   Native <input type=radio> DOM'da KALIR (klavye + ekran okuyucu çalışır), görsel
   olarak gizlenir; kart `:has(:checked)` ile boyanır. `:has` desteklenmeyen çok
   eski tarayıcıda kart yine tıklanır ve seçim çalışır — yalnız vurgu düşer. */

.oyd-plans{
  border:0;padding:0;margin:0 0 14px;min-width:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:10px;
}

.oyd-plans > legend{grid-column:1/-1;padding:0;margin:0 0 2px;float:none}

.oyd-plan{position:relative;display:block;cursor:pointer;min-width:0}

.oyd-plan > input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

.oyd-plan__b{
  display:block;padding:12px;border-radius:12px;min-height:44px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease);
}

.oyd-plan__b b{display:block;font-family:var(--f-display);font-size:17px;font-weight:800;color:var(--text)}

.oyd-plan__b small{display:block;margin-top:1px;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;color:var(--dim)}

.oyd-plan__b em{display:block;margin-top:7px;font-style:normal;font-size:13px;font-weight:700;color:var(--orange-hi);font-variant-numeric:tabular-nums}

.oyd-plan__b i{display:block;font-style:normal;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}

.oyd-plan:hover .oyd-plan__b{background:var(--raised)}

.oyd-plan:active .oyd-plan__b{transform:scale(.985)}

.oyd-plan:has(> input:checked) .oyd-plan__b{background:var(--o08);box-shadow:inset 0 0 0 2px var(--orange)}

.oyd-plan:has(> input:focus-visible) .oyd-plan__b{box-shadow:inset 0 0 0 2px var(--orange),0 0 0 3px var(--o14)}

/* ── HEDİYE / ÜCRETLİ SEGMENTİ (aynı radyo-kart dili, iki seçenek) ── */

.oyd-seg{display:grid;grid-template-columns:1fr 1fr;gap:8px}

.oyd-seg__i{position:relative;display:block;cursor:pointer;min-width:0}

.oyd-seg__i > input{position:absolute;width:1px;height:1px;opacity:0;margin:0;pointer-events:none}

.oyd-seg__i > span{
  display:block;padding:9px 11px;border-radius:10px;min-height:44px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s var(--ease),box-shadow .16s var(--ease);
}

.oyd-seg__i b{display:block;font-size:12.5px;font-weight:700;color:var(--text)}

.oyd-seg__i small{display:block;margin-top:1px;font-size:10.5px;color:var(--dim);line-height:1.45}

.oyd-seg__i:hover > span{background:var(--raised)}

.oyd-seg__i:has(> input:checked) > span{background:var(--o08);box-shadow:inset 0 0 0 2px var(--orange)}

.oyd-seg__i:has(> input:focus-visible) > span{box-shadow:inset 0 0 0 2px var(--orange),0 0 0 3px var(--o14)}

/* ── KAYDET ÇUBUĞU: masaüstünde akışta, mobilde panele YAPIŞIR ─────────────
   `.cms-actions` KULLANILMADI: o, panel gövdesinin DIŞINDA duran kardeş bir
   şerittir; buradaki çubuk formun İÇİNDE olmalı ki `type=submit` ve Enter doğal
   çalışsın, durum metni (kaydedildi/hata/bekliyor) forma yakın kalsın. */

.oyd-bar{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 0;padding:12px 0 0;border-top:1px solid var(--line);
}

.oyd-bar .btn{height:40px;padding:0 20px;font-size:13px}

.oyd-bar .btn.is-busy{opacity:.6;pointer-events:none}

@media (max-width:900px){
  .oyd-media{grid-template-columns:1fr}
}

@media (max-width:700px){
  .oyd-hero__cover{height:88px}
  .oyd-bar{
    position:sticky;bottom:0;z-index:5;
    margin:16px -18px -16px;padding:12px 18px;
    background:var(--surface);border-top:1px solid var(--line);
  }
  .oyd-bar .btn{flex:1 1 auto;min-height:44px}
  .oyd-bar .f-note{flex:1 0 100%;order:2}
  .oyd-plans{grid-template-columns:repeat(auto-fit,minmax(132px,1fr))}
}

@media (max-width:480px){
  .oyd-hero__b{grid-template-columns:1fr;gap:10px;margin-top:-28px}
  .oyd-hero__ava{width:60px;height:60px;border-radius:15px}
  .oyd-media__k{grid-template-columns:1fr}
  .oyd-media__ava{width:72px;height:72px}
  .oyd-media__cap{width:100%;height:56px}
  /* 360'ta iki sütunluk ızgara 132px'e sığmıyor → tek sütun (taşma 0). */
  .oyd-plans{grid-template-columns:1fr}
  .oyd-seg{grid-template-columns:1fr}
  .oyd-switch{gap:10px}
}

/* ══ HERO · MOBİL BİNDİRMELİ DÜZEN (proje sahibi, 2026-08-22) ══════════════════
   SORUN (ölçüldü, 390×844): tema mobilde "üstte görsel (310px), ALTINDA metin"
   akış düzeni kuruyordu. Rozet + kicker + başlık + spot + 3 çip + 2 buton alt
   alta dizilince hero 658px'e çıkıyor, birincil CTA y=747'ye düşüp katlamanın
   ve çerez çubuğunun arkasında kalıyordu. 360×640'ta durum daha kötü (693px).

   ÇÖZÜM: masaüstündeki gibi BİNDİRMELİ sahne. Görsel sahnenin tamamını kaplar,
   metin bloğu alt kenara oturur ve okunabilirliği ARTAN bir perde sağlar
   (üst %100 şeffaf → alt %94 opak) + metin gölgesi. Böylece hem görsel hem
   metin aynı anda görünür ve hero sabit yükseklikte kalır.

   Yükseklik: clamp(408px, 66vh, 556px) — 390×844'te 556, 360×640'ta 422; her
   ikisinde de hero katlamanın içinde bitiyor (üstündeki başlık+arama+stories
   ~206px). Perk çipleri GİZLENMİYOR; tek satıra alınıp taşarsa yatay kayıyor,
   yani içerik kaybı yok, yalnız bir satır yer tutuyor.

   Slayt kontrolleri akıştan çıkıp sahnenin sağ ÜST köşesine alındı: ileri/geri
   düğmeleri metnin üstüne binmez, dokunma hedefi 40px korunur.
   theme.css'e DOKUNULMADI; bu blok yalnız ≤900px'te ve yalnız hero'yu hedefler. */

@media (max-width:900px){
  .hero{ height:clamp(408px,66vh,556px); min-height:0; display:block; position:relative; }

  /* görsel: sahnenin tamamı (tema akışta 310px'e sabitliyordu) */
  .hero__bg{ position:absolute; inset:0; height:100%; width:100%; }
  .hslide__main{
    width:100%; height:100%; object-fit:cover; transform:none;
    -webkit-mask-image:none; mask-image:none;      /* alt kenar maskesi perdeyle çakışıyordu */
  }
  .hero__grain{ height:100%; inset:0 -40% auto -40%; }

  /* okunabilirlik perdesi — "her şartta okunsun" şartı bunun üzerinden karşılanır */
  .hero__grade,
  .hero__grade.is-soft{
    height:100%; top:auto; bottom:0;
    /* Ramp, metnin OTURDUGU bantta (alt ~%45) belirgin sekilde opak; ust yari
       neredeyse serbest kalir ki gorsel nefes alsin. Alev gibi parlak zeminlerde
       de kontrast yeterli olsun diye 26-45 araligi sertlestirildi. */
    background:linear-gradient(0deg,
      rgba(3,3,3,.96) 0%, rgba(3,3,3,.93) 22%, rgba(3,3,3,.84) 36%,
      rgba(3,3,3,.62) 50%, rgba(3,3,3,.32) 66%, rgba(3,3,3,.10) 82%, transparent 100%);
  }

  /* metin bloğu: alt kenara bindirme */
  .hero__body{ position:absolute; inset:auto 0 0 0; margin-top:0; padding:0; z-index:4; }
  .hcontent{ position:relative; padding:0 16px 14px; }
  .hero__title{ margin-top:8px; text-shadow:0 2px 16px rgba(0,0,0,.7); }
  .hero__text{ color:#D8D7D5; text-shadow:0 1px 10px rgba(0,0,0,.65); margin-top:7px; }
  .hero__kicker{ background:rgba(10,10,10,.72); backdrop-filter:blur(6px); }

  /* perk çipleri: tek satır, taşarsa yatay kayar (içerik gizlenmiyor) */
  .hero__perks{
    display:flex; flex-wrap:nowrap; gap:6px; margin-top:9px;
    overflow-x:auto; scrollbar-width:none; -ms-overflow-style:none;
  }
  .hero__perks::-webkit-scrollbar{ display:none; }
  .hero__perks span{ flex:0 0 auto; background:rgba(10,10,10,.66); }

  .hero__cta{ margin-top:12px; }

  /* slayt kontrolleri: akıştan çık, sağ üst köşeye */
  .hero__ctl{
    position:absolute; inset:10px 10px auto auto; z-index:5;
    padding:0; width:auto; display:flex; align-items:center; gap:8px;
  }
  .hero__bars{ display:none; }                     /* barlar dar ekranda okunmuyordu */
  .hero__nav{ gap:6px; }
  .hnav{
    width:40px; height:40px; border-radius:12px;
    background:rgba(8,8,8,.62); backdrop-filter:blur(8px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM · FİYAT + SADELEŞTİRME  (madde 73/74/75 — proje sahibi, 2026-08-22)
   ───────────────────────────────────────────────────────────────────────────
   Üç iş tek blokta toplandı, çünkü üçü de aynı ekranların (/premium ve
   /admin/krediler) fiyat yüzeyine dokunuyor:
     73 — fiyat/paket yönetimi panele bağlandı → /admin/krediler'e eklenen
          "Premium planları", "Premium kampanyası" kartları ve paket satırındaki
          kredi/bonus girişleri için `.prc-*` imzası.
     74 — /premium'daki "Şu an göremediğin arşiv" ve "Ücretsiz ile Premium
          arasındaki fark" bölümleri kaldırıldı → kuralları yukarıdaki v3
          bloğundan SİLİNDİ (burada yeni kural yok, kayıt amaçlı not).
     75 — "Uzun seç, daha az öde" bölümü BAŞTAN: plan kartları artık theme'in
          .plan bileşenini miras almıyor, kendi minimal kimliği var.
   Renk/ölçü/geçiş değerlerinin tamamı theme.css token'larıyla (--orange,
   --orange-hi, --panel, --surface, --line, --o08, --o14, --o40, --text,
   --muted, --dim, --ink, --f-display, --f-mono, --r, --r-sm, --ease). Uydurma
   marka rengi ya da yabancı font YOK; theme.css'e DOKUNULMADI (KURALLAR §1).
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── /premium · plan rayı ────────────────────────────────────────────────────
   Masaüstünde eşit genişlikte kartlar (4 tarife dar içerik alanında da sığsın
   diye auto-fit eşiği 190px), mobilde tek kolon + sağda sabit seçim düğmesi. */

.pm2-plans{
  display:grid;gap:12px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
}

/* Kart bir <button>: UA görünümü sıfırlanır, kutu modeli burada kurulur. */

.pm2-plan{
  position:relative;display:flex;flex-direction:column;gap:8px;
  width:100%;min-width:0;padding:18px 18px 14px;
  text-align:left;font:inherit;color:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;border:0;border-radius:var(--r);
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .18s var(--ease),box-shadow .18s var(--ease),transform .18s var(--ease);
}

.pm2-plan:hover{background:var(--surface);transform:translateY(-2px)}

.pm2-plan:focus-visible{outline:2px solid var(--orange-hi);outline-offset:3px}

.pm2-plan.on{
  background:linear-gradient(180deg,var(--o08),var(--panel) 68%);
  box-shadow:inset 0 0 0 1.5px var(--orange),0 18px 46px -28px var(--orange);
}

.pm2-plan__head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:18px}

.pm2-plan__len{font:700 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

.pm2-plan.on .pm2-plan__len{color:var(--orange-hi)}

.pm2-plan__flag{
  font:700 9.5px/1 var(--f-mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink);background:var(--orange);border-radius:4px;padding:4px 7px;
}

/* Aylık karşılık = kartın başlığı; "ilk ay · sonra ₺999/ay" gibi uzun
   varyantta da taşmaması için sarma serbest. */

.pm2-plan__per{
  font-family:var(--f-display);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  font-size:clamp(17px,2.1vw,21px);color:var(--text);overflow-wrap:anywhere;
}

.pm2-plan__tot{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px}

.pm2-plan__tot s{color:var(--dim);text-decoration-thickness:1.5px}

.pm2-plan__tot b{font-weight:700;color:var(--muted)}

.pm2-plan__off{
  align-self:flex-start;font:700 10.5px/1 var(--f-mono);letter-spacing:.05em;
  color:var(--orange);background:var(--o08);border-radius:4px;padding:5px 8px;
}

.pm2-plan__note{font-size:12px;line-height:1.45;color:var(--dim)}

/* Seçim düğmesi: dokunma hedefi ≥44px (mobil şart). */

.pm2-plan__pick{
  margin-top:auto;display:flex;align-items:center;justify-content:center;gap:9px;
  min-height:44px;padding:0 14px;border-radius:var(--r-sm);
  font-weight:700;font-size:13.5px;color:var(--text);
  box-shadow:inset 0 0 0 1px var(--line);transition:.18s var(--ease);
}

.pm2-plan__pick i{
  width:16px;height:16px;flex:none;border-radius:50%;
  box-shadow:inset 0 0 0 2px var(--dim);transition:.18s;
}

.pm2-plan:hover .pm2-plan__pick{box-shadow:inset 0 0 0 1px var(--o40);color:var(--orange)}

.pm2-plan.on .pm2-plan__pick{background:var(--orange);color:var(--ink);box-shadow:none}

.pm2-plan.on .pm2-plan__pick i{background:var(--ink);box-shadow:inset 0 0 0 5px var(--ink)}

/* Mobil (%100 native his): kart tek satırlık bir seçim satırına dönüşür —
   solda bilgi yığını, sağda tam yükseklikte seçim düğmesi. Yatay taşma 0
   (grid `minmax(0,1fr)` + `min-width:0`), dokunma hedefi 44px. */

@media (max-width:700px){
  .pm2-plans{grid-template-columns:1fr;gap:8px}
  .pm2-plan{
    display:grid;grid-template-columns:minmax(0,1fr) auto;
    column-gap:12px;row-gap:3px;align-items:center;padding:13px 14px;
  }
  .pm2-plan__head,.pm2-plan__per,.pm2-plan__tot,.pm2-plan__off,.pm2-plan__note{grid-column:1;min-width:0}
  .pm2-plan__per{font-size:17px}
  .pm2-plan__off{justify-self:start;margin-top:2px}
  .pm2-plan__pick{grid-column:2;grid-row:1 / -1;margin-top:0;align-self:center;min-width:84px}
  .pm2-plan:hover{transform:none}
}

/* ── /admin/krediler · fiyatlandırma satırları (.prc-*) ──────────────────────
   Plan satırı çok alanlı olduğu için tabloya değil, sarmalayan bir alan
   ızgarasına oturur: dar panelde alt alta, geniş panelde yan yana. Ölçüler
   theme'in .tariff__in yüksekliğiyle (38px) hizalı. */

.prc{padding:4px 0}

.prc__r{
  display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;
  padding:14px 17px;border-bottom:1px solid var(--line);
}

.prc__r:last-child{border-bottom:0}

.prc__f{display:flex;flex-direction:column;gap:5px;min-width:0}

.prc__f--ad{flex:1 1 150px}

.prc__f--gen{flex:1 1 100%}

.prc__f--sec{flex-direction:row;align-items:center;gap:14px;flex-wrap:wrap;padding-bottom:4px}

.prc__lbl{font:600 9.5px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:var(--dim)}

/* Metin alanları: .tariff__in yüzeyini paylaşır ama tam genişlik ister. */

.prc__f input[type="text"]{
  width:100%;height:38px;padding:0 11px;border:0;outline:none;border-radius:8px;
  background:var(--surface);color:var(--text);font-size:13px;font-weight:600;
  transition:box-shadow .15s;
}

.prc__f input[type="text"]:focus{box-shadow:inset 0 0 0 1.5px var(--o40)}

.prc__f input[type="text"]::placeholder{color:var(--dim);font-weight:500}

/* Onay kutusu / radyo: dokunma hedefi 44px (panel mobilde de kullanılıyor). */

.prc__chk{display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}

.prc__chk input{width:17px;height:17px;flex:none;accent-color:var(--orange);cursor:pointer}

.prc__chk span{font-size:12.5px;font-weight:600;color:var(--muted)}

.prc__chk input:checked + span{color:var(--orange-hi)}

/* Sayı alanları: theme'in .tariff__in girişi 52px (kredi bedeli 3 hane için
   yeterli) — fiyat/süre/sayaç 4-7 hane olabildiğinden bu ekranda KIRPILIYORDU
   (₺2.697 "269'" görünüyordu). Genişletme yalnız fiyatlandırma alanlarına
   scope'lanır; "İşlem tarifesi" kartının kendi ölçüsü değişmez. */

.prc .tariff__in input,
.tariff__in input[name^="kampanya"]{width:84px}

/* Paket satırındaki "Paket" hücresi artık üç kontrol taşıyor. */

.prc__pack{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}

@media (max-width:900px){
  .prc__r{gap:10px}
  .prc__f--ad{flex:1 1 100%}
}

/* ╔══════════════════════════════════════════════════════════════════════════════════╗
   ║  ADMIN · ORTAKLIK v2   —  /admin/ortaklik BAŞTAN (madde 67)                      ║
   ╚══════════════════════════════════════════════════════════════════════════════════╝
   PROJE SAHİBİ: "Adminde ortaklık sayfası ve alt sayfalarını ve bütün HTML elementleri
   sil baştan, yeni CSS ile yapmalıyız; daha kaliteli CSS, premium temamıza yakışır
   modern bir şey." + "Ortak eklerken kişinin mailini yazıyoruz; oluştururken ortaklık
   id/pass'ını da panel versin otomatik olarak."

   NE KALKTI: v1'in `.ortset` (ayar kartı) · `.ortrow` (satır) · `.reflink` (link+kopyala)
   bloğu bu dosyadan SİLİNDİ. Üç sınıf da YALNIZ iki ortaklık partial'ında kullanılıyordu
   (tarama: resources/ genelinde başka geçiş yok), ikisi de baştan yazıldı → ölü kural
   bırakılmadı. Yerine bu `.ort2-*` katmanı geldi.

   DİL DİSİPLİNİ (yeni idiom UYDURULMADI — mevcut dilin en iyi hâli):
     · sekme rayı/panel  → `.cms` / `.cms-tabs` / `.cms-tab` / `.cms-panel` / `.cms-body`
     · form öğeleri      → `.f-field` / `.f-label` / `.f-input` / `.f-textarea` / `.f-check`
                            / `.f-grid` / `.f-actions` / `.f-hint` / `.f-err` / `.f-note`
     · liste imzası      → `.lst-stats` / `.lst-stat*` (KPI) + `.lst-bar` (filtre şeridi)
     · rozet/segment/düğme/sayfalama → `.stat` / `.seg` / `.btn` / `.apag`
     · çekmece           → `.adraw` (SEKME/ÇEKMECE DÜZELTMESİ'nin dayandığı idiom KORUNDU)
     · tek-seferlik kimlik penceresi → `.modal` / `.modal__box` (panelin KENDİ overlay'i,
       /admin/uyeler kredi modalı emsali; yeni sabit-katman idiomu açılmadı)
   `.ort2-*` yalnız GERÇEKTEN eksik olan birimleri tanımlar: ortak kartı ve metrik
   üçlüsü, kopyalanabilir link/sır alanı, ayar afişi, bilgi/uyarı notu, boş durum,
   çekmece anahtar-değer/özet/komisyon satırı, kimlik penceresinin iç düzeni.

   TOKEN DİSİPLİNİ: renk/ölçü theme.css var() token'larından (--panel/--surface/--raised/
   --bg-2/--line/--text/--muted/--dim/--orange/--orange-hi/--o08/--o14/--o40/--f-display/
   --f-mono/--ease/--f-ctl-h). UYDURMA HEX YOK; tek istisnalar theme'in KENDİ yerleşik
   pozitif/negatif tonlarının birebir kopyaları: #7BE39A + rgba(76,194,107,.10/.25)
   (theme `.stat--yayinda` yeşili · ek.css `.lst-stat--live` ile aynı) ve #FF6A80 +
   rgba(255,31,61,.08/.28) (theme `.field__err` · ek.css `.f-err` kırmızısı).

   KAPSAM: tüm kurallar `.ort2-*` sınıflarına bağlı → başka hiçbir ekran etkilenmez.
   MOBİL: 360/375/390'da yatay taşma 0 (her esnek kutuda `min-width:0` + `overflow:hidden`),
   dokunma hedefleri ≤900px'te ≥44px (KURALLAR §2.5). */
/* ── EKRAN-GENELİ AYAR AFİŞİ (sekme rayının ÜSTÜNDE; global oran üç sekmenin de
      anlamını belirlediği için 4. sekme açılmadı, afiş rayın dışına alındı) ── */

.ort2-set{
  display:grid;grid-template-columns:minmax(0,1fr) auto;gap:14px 22px;align-items:center;
  padding:16px 18px;margin:0 0 18px;border-radius:16px;
  background:linear-gradient(180deg,var(--panel),var(--surface));
  box-shadow:inset 0 0 0 1px var(--line);
}

.ort2-set__t{display:flex;align-items:flex-start;gap:12px;min-width:0}

.ort2-set__ico{
  flex:none;width:38px;height:38px;border-radius:12px;display:grid;place-items:center;
  background:var(--o14);color:var(--orange);
}

.ort2-set__ico svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.9}

.ort2-set__t b{display:block;font-size:13.5px;font-weight:700;color:var(--text)}

.ort2-set__t small{display:block;margin-top:3px;max-width:580px;font-size:11.5px;line-height:1.55;color:var(--dim)}

.ort2-set__t small b{display:inline;color:var(--orange-hi)}

.ort2-set__f{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;justify-self:end}

/* Etiket ("Global oran (%) net kârdan") TEK SATIR kalmalı: iki satıra kırılınca
   alan kutusu etiketten kopuk görünüyordu (ölçüldü 1366). */

.ort2-set__f .f-field{width:172px;margin:0}

.ort2-set__f .f-label{white-space:nowrap}

.ort2-set__chk{margin-bottom:9px}

.ort2-set__go{height:var(--f-ctl-h);padding:0 18px;font-size:13px}

.ort2-set__off{grid-column:1/-1;margin:0}

/* ── LİSTE (ortak + başvuru kartları) ── */

.ort2-list{display:flex;flex-direction:column;gap:10px;margin:0 0 16px}

/* Kart: mobilde tek kolon yığın, genişledikçe 2 → 3 kolonlu ızgaraya açılır.
   Alan adları markup sırasından BAĞIMSIZ yerleşim verir (aynı HTML, üç düzen). */

.ort2-card{
  display:grid;gap:12px 16px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:"id" "flags" "metr" "copy" "acts";
  padding:14px;border-radius:14px;background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s var(--ease);
}

.ort2-card:hover{box-shadow:inset 0 0 0 1px var(--o40)}

.ort2-card--bas{grid-template-areas:"id" "flags" "acts"}

.ort2-card__id{
  grid-area:id;display:flex;align-items:center;gap:12px;min-width:0;
  padding:0;border:0;background:none;text-align:left;color:inherit;cursor:pointer;
}

.ort2-card__id:focus-visible{outline:none;border-radius:12px;box-shadow:0 0 0 3px var(--o14)}

.ort2-mono{
  flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-family:var(--f-display);font-size:14px;font-weight:800;
  background:var(--o08);color:var(--orange-hi);box-shadow:inset 0 0 0 1px var(--o14);
}

.ort2-card__t{display:flex;flex-direction:column;gap:2px;min-width:0}

.ort2-card__t > b{
  font-size:14px;font-weight:700;color:var(--text);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:color .15s var(--ease);
}

.ort2-card__t > small{
  font-size:11.5px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ort2-card__id:hover .ort2-card__t > b{color:var(--orange-hi)}

.ort2-card__flags{grid-area:flags;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

.ort2-card__acts{grid-area:acts;display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0}

/* Metrik üçlüsü: getirilen üye · kazanç · oran (global/özel ayrımı görünür) */

.ort2-metr{grid-area:metr;display:flex;gap:16px;flex-wrap:wrap;margin:0;min-width:0}

.ort2-metr__i{min-width:0}

.ort2-metr dt{
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}

.ort2-metr dd{
  margin:2px 0 0;font-size:14px;font-weight:700;color:var(--text);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}

.ort2-metr dd > i{
  font-style:normal;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);margin-left:5px;
}

/* ── DURUM ÇİPİ (panel açık/kapalı · model · oran kaynağı) ── */

.ort2-chip{
  display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;
  font-family:var(--f-mono);font-size:9.5px;font-style:normal;letter-spacing:.1em;
  text-transform:uppercase;white-space:nowrap;
  background:var(--surface);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);
}

.ort2-chip--ok{color:#7BE39A;background:rgba(76,194,107,.1);box-shadow:inset 0 0 0 1px rgba(76,194,107,.25)}

/* ── KOPYALANABİLİR ALAN (takip linki · ref kodu · tek seferlik parola) ── */

.ort2-copy{
  grid-area:copy;display:flex;align-items:center;gap:8px;min-width:0;
  padding:5px 5px 5px 12px;border-radius:11px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.ort2-copy--wide{width:100%}

.ort2-copy__k{
  flex:none;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);
}

.ort2-copy__v{
  flex:1;min-width:0;font-family:var(--f-mono);font-size:11.5px;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ort2-copy__v--big{font-size:15px;font-weight:700;letter-spacing:.06em;color:var(--text)}

.ort2-copy__b{
  flex:none;display:inline-flex;align-items:center;justify-content:center;
  height:32px;padding:0 13px;border:0;border-radius:8px;cursor:pointer;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  background:var(--raised);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
  transition:color .14s var(--ease),box-shadow .14s var(--ease);
}

.ort2-copy__b:hover{color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40)}

.ort2-copy__b:focus-visible{outline:none;box-shadow:0 0 0 3px var(--o14)}

.ort2-copy__b--on{background:var(--o14);color:var(--orange-hi);box-shadow:inset 0 0 0 1px var(--o40)}

/* SIR alanı: omuz-üstü okumaya karşı bulanıklaştırılabilir; kopyalama yine çalışır. */

.ort2-copy--secret{background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40)}

.ort2-copy--secret.is-hidden .ort2-copy__v{filter:blur(6px);user-select:none}

/* ── BİLGİ / UYARI NOTU ── */

.ort2-note,.ort2-warn{
  display:flex;align-items:flex-start;gap:10px;margin:0 0 16px;
  padding:12px 14px;border-radius:12px;font-size:12.5px;line-height:1.6;
}

.ort2-note svg,.ort2-warn svg{flex:none;width:16px;height:16px;margin-top:2px;stroke:currentColor;fill:none;stroke-width:1.9}

.ort2-note{background:var(--o08);color:var(--muted);box-shadow:inset 0 0 0 1px var(--o14)}

.ort2-note b{color:var(--orange-hi)}

.ort2-note svg{color:var(--orange)}

.ort2-warn{background:rgba(255,31,61,.08);color:var(--muted);box-shadow:inset 0 0 0 1px rgba(255,31,61,.28)}

.ort2-warn b{color:#FF6A80}

.ort2-warn svg{color:#FF6A80}

/* ── BOŞ DURUM ── */

.ort2-empty{
  display:flex;flex-direction:column;align-items:center;gap:5px;margin:0;
  padding:46px 20px;text-align:center;border-radius:14px;
  background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}

.ort2-empty svg{width:26px;height:26px;margin-bottom:5px;color:var(--dim);stroke:currentColor;fill:none;stroke-width:1.6}

.ort2-empty > b{font-size:13.5px;font-weight:700;color:var(--text)}

.ort2-empty > span{max-width:440px;font-size:12px;line-height:1.6;color:var(--dim)}

/* Ortak ekle ızgarasında tam genişlik isteyen öğeler (.f-grid auto-fit kolonları) */

.ort2-span{grid-column:1/-1}

.ort2-btn{height:38px;padding:0 15px;font-size:12.5px}

/* ── ÇEKMECE İÇİ (satır detayı) ── */

.ort2-h{
  margin:0 0 10px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim);
}

.ort2-kv{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;
}

.ort2-kv:last-child{border-bottom:0}

.ort2-kv > span{flex:none;color:var(--dim)}

.ort2-kv > b{min-width:0;font-weight:700;color:var(--text);text-align:right;overflow-wrap:anywhere}

.ort2-kv a{color:var(--orange-hi)}

.ort2-sum{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0 0 10px}

.ort2-sum__i{padding:10px 12px;border-radius:11px;background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);min-width:0}

.ort2-sum__i > b{
  display:block;font-family:var(--f-display);font-size:17px;font-weight:800;
  letter-spacing:-.02em;color:var(--text);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.ort2-sum__i > span{
  display:block;margin-top:2px;font-family:var(--f-mono);font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
}

.ort2-fine{margin:10px 0 0;font-size:11.5px;line-height:1.6;color:var(--dim)}

.ort2-draw__acts{margin-top:12px}

.ort2-list--kom{gap:8px;margin-bottom:0}

.ort2-kom{
  display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  padding:10px 12px;border-radius:11px;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);min-width:0;
}

.ort2-kom__t{display:flex;flex-direction:column;gap:2px;min-width:0}

.ort2-kom__t > b{font-size:13.5px;font-weight:700;color:var(--text)}

.ort2-kom__t > small{font-size:11px;color:var(--dim);overflow-wrap:anywhere}

.ort2-kom__seg{margin-left:auto}

/* ── TEK SEFERLİK KİMLİK PENCERESİ ────────────────────────────────────────────
   `.modal` (theme:3509) tabanı: position:fixed · inset:0 · z-index:110 · perde.
   KRİTİK: `.adraw` çekmecesiyle AYNI containing-block tuzağına düşmesin diye
   `main.adm__main` giriş animasyonu bu pencere DOM'dayken de kapatılır — bkz.
   ek.css "ADMIN · SEKME/ÇEKMECE DÜZELTME" KÖK NEDEN 1/1b. O bölümün `.adraw`
   kuralına DOKUNULMADI; burada AYNI mantık ikinci sabit katman için tekrarlanır
   (AdminSekmeCekmeceTest'in kilitlediği metin bozulmaz). */

main.adm__main:has(.ort2-cred),main.adm__main:has(.ort2-cred) > *{animation:none}

.ort2-cred__box{width:min(560px,100%);padding:26px 24px 22px;text-align:left}

.ort2-cred .modal__ico{margin:0 0 12px}

.ort2-cred .modal__sub{margin:8px 0 18px}

.ort2-cred__eyebrow{
  margin:0 0 4px;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);
}

.ort2-cred__rows{display:flex;flex-direction:column;gap:9px}

.ort2-cred__warn{margin:16px 0 0}

.ort2-cred__go{display:flex;gap:10px;margin-top:18px}

.ort2-cred__go .btn{flex:1;justify-content:center}

/* ── GENİŞLEDİKÇE AÇILAN KART DÜZENİ ── */

@media (min-width:760px){
  .ort2-card{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);
             grid-template-areas:"id flags" "metr metr" "copy copy" "acts acts"}
  .ort2-card--bas{grid-template-areas:"id flags" "acts acts"}
  .ort2-card__flags{justify-self:end}
  .ort2-card__acts{justify-content:flex-end}
}

@media (min-width:1180px){
  /* Metrik üçlüsü TEK SATIRDA kalsın diye orta kolona taban genişlik verilir
     (ölçüldü 1366: 1fr ile "Oran" alt satıra kırılıyordu). */
  .ort2-card{grid-template-columns:minmax(0,1fr) minmax(300px,.9fr) auto;
             grid-template-areas:"id metr flags" "copy copy acts";align-items:center}
  .ort2-card--bas{grid-template-columns:minmax(0,1fr) auto auto;
                  grid-template-areas:"id flags acts"}
}

/* ── MOBİL: dokunma hedefi ≥44px + yatay taşma 0 (KURALLAR §2.5) ── */

@media (max-width:900px){
.ort2-set{grid-template-columns:minmax(0,1fr)}
.ort2-set__f{justify-self:stretch;flex-direction:column;align-items:stretch}
.ort2-set__f .f-field{width:auto}
.ort2-set__chk{margin-bottom:0;min-height:44px}
.ort2-set__go{height:44px;width:100%}
.ort2-btn{height:44px}
.ort2-card__acts .ort2-btn{flex:1 1 150px;justify-content:center}
.ort2-copy__b{height:44px;padding:0 15px}
.ort2-kom__seg{margin-left:0;width:100%}
.ort2-card__id{min-height:44px}
}

@media (max-width:560px){
  .ort2-card{padding:13px}
  .ort2-copy{flex-wrap:wrap;padding:10px 12px;gap:8px}
  .ort2-copy__k{flex:1 1 100%}
  .ort2-copy__v{flex:1 1 100%;font-size:11px}
  .ort2-copy__b{flex:1 1 120px;height:44px}
  .ort2-metr{gap:14px}
  /* Dar kartta iki aksiyon ALT ALTA düşüyordu (ölçüldü 360: kart iç genişliği 266px,
     150px taban iki düğmeyi sığdırmıyor) → kart 8 satırda çok uzuyordu. Eşit paylaşım
     + kompakt yazı ile tek satıra iner; yükseklik 44px KORUNUR. */
  .ort2-card__acts .ort2-btn{flex:1 1 0;min-width:0;padding:0 8px;font-size:12px}
  .ort2-sum{grid-template-columns:minmax(0,1fr)}
  .ort2-cred__box{padding:22px 16px 18px}
  .ort2-cred__go{flex-direction:column}
  .ort2-cred__go .btn{width:100%;height:46px}
  .ort2-kv{flex-direction:column;align-items:flex-start;gap:3px}
  .ort2-kv > b{text-align:left}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN · HİKÂYELER  (/admin/hikayeler — 2026-08-22, proje sahibi)
   ───────────────────────────────────────────────────────────────────────────
   BAĞLAM: "Anasayfa stories kısmı da admin panelinden %100 kontrol edilebilir
   olsun." Ekran anasayfa hikâye şeridini yönetir: ekle · sil · sırala · ad ·
   aktif/pasif · misafire açık hikâye sayısı.

   DİL DİSİPLİNİ (yeni idiom UYDURULMADI): sekme rayı + panel `.cms-*`ten, form
   kontrollerinin TAMAMI mevcut `.f-*` kütüphanesinden (`.f-field` · `.f-label` ·
   `.f-input` · `.f-file` · `.f-check` · `.f-num` · `.f-hint` · `.f-hint--uyari` ·
   `.f-req`), üstteki dört sayaç `.lst-stat*` liste imzasından, düğmeler
   `.btn`/`.btn--ghost`ten geliyor. Aşağısı YALNIZCA bu ekrana özgü iki şey:
   (a) hikâyenin DİKEY (9/16) sahnesi — slider'ın 16/7 `.slide-stage`i buraya
   uymaz — ve (b) durum rozetleri. Sıra kapıları `.slide-sira__b` ile AYNI
   ölçü/etkileşim dilinde ama AYRI sınıf: ortak ata çıkarmak `.slide-*` bloğunu
   düzenlemek olurdu (o blok şu an başka bir işçinin alanı).

   TOKEN DİSİPLİNİ: renk/ölçünün tamamı theme.css değişkenlerinden. UYDURMA HEX
   YOK; tek istisnalar theme'in KENDİ tonlarının birebir kopyaları: #FF6A80 +
   rgba(255,106,128,*) (yıkıcı eylem tonu — ek.css `.slide-sil` ile aynı) ve
   #7BE39A + rgba(76,194,107,*) (canlı/yayında tonu — ek.css `.lst-stat--live`).

   MOBİL: 390 · 375 · 360'ta yatay taşma 0 (sahne max-width yüzde/vw, ray yatay
   kayar, rozetler sarar), dokunma hedefleri ≥44px (KURALLAR §2.5).
   Kaynak-dışı admin ekranı → ENVANTER sözleşmesi yok. */
/* ── SEKME: dikey küçük-resim (hikâye 9/16'dır; slaytın 44×26'sı yanıltıcı olurdu) ── */

.cms-tab--stry{grid-template-columns:auto 1fr auto;gap:1px 10px;align-items:center}

.cms-tab--stry .cms-tab__thumb{
  grid-row:1/3;width:26px;height:40px;border-radius:5px;object-fit:cover;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
}

.cms-tab--stry .cms-tab__label,.cms-tab--stry .cms-tab__path{grid-column:2}

.cms-tab--stry .cms-tab__badge{grid-column:3}

/* Pasif hikâye rayda da SESSİZ görünür — yönetici hangisinin yayında olmadığını
   panele girmeden görür (yalnız opaklık: metin okunabilirliği korunur). */

.cms-tab--stry.is-off .cms-tab__thumb{opacity:.38}

.cms-tab--stry.is-off .cms-tab__label{color:var(--dim)}

/* "Misafir erişimi" sekmesi bir HİKÂYE değil, site ayarı: ince payla ayrılır. */

.cms-tab--ayar{margin-top:2px}

.cms-tab--ayar .cms-tab__thumb--art svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9}

/* ── PANEL GÖVDESİ: solda dikey sahne, sağda alanlar ───────────────────────── */

.stry-edit{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:18px;align-items:start}

.stry-edit__prev{margin-bottom:0}

.stry-edit__form{min-width:0}

/* ── DİKEY (9/16) HİKÂYE SAHNESİ ────────────────────────────────────────────
   Anasayfadaki izleyicinin oranı: kapak bu kadrajda nasıl duruyorsa şeritte ve
   izleyicide de öyle durur. `overflow:hidden` + `object-fit:cover` → yüklenen
   dosyanın oranı ne olursa olsun panel düzeni BOZULMAZ. */

.stry-stage{
  position:relative;width:100%;max-width:220px;aspect-ratio:9/16;
  border-radius:14px;overflow:hidden;background:var(--surface);
  box-shadow:inset 0 0 0 1px var(--line);
}

.stry-stage img,.stry-stage__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* İzleyicinin üst/alt karartması — kapak üstündeki metnin okunurluğunu temsil eder. */

.stry-stage::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.42),transparent 26%,transparent 62%,rgba(0,0,0,.55));
}

.stry-stage__tag{
  position:absolute;left:8px;top:8px;z-index:2;
  padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.55);
  font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:#fff;
}

.stry-stage__empty{
  position:absolute;inset:0;display:grid;place-items:center;padding:16px;
  text-align:center;font-size:12px;line-height:1.5;color:var(--dim);
}

/* ── DURUM ROZETLERİ: sahnenin altında, tek bakışta okunur ─────────────────── */

.stry-rozet{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}

.stry-rozet__i{
  padding:4px 9px;border-radius:999px;font-size:11px;font-weight:700;line-height:1.4;
  background:var(--surface);color:var(--dim);box-shadow:inset 0 0 0 1px var(--line);
}

.stry-rozet__i.-on{color:#7BE39A;background:rgba(76,194,107,.1);box-shadow:inset 0 0 0 1px rgba(76,194,107,.25)}

.stry-rozet__i.-off{color:var(--muted)}

.stry-rozet__i.-free{color:var(--orange-hi);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o40)}

.stry-rozet__i.-lock{color:var(--muted)}

/* Kimlik rozeti: uid stream ucunun parametresidir — teknik değer, monospace. */

.stry-rozet__i.-id{font-family:var(--f-mono);font-weight:500;font-size:10.5px;color:var(--dim)}

/* ── SIRA KAPILARI (↑ ↓) + "Anasayfada gör" ────────────────────────────────
   Sürükle-bırak YOK: iki düğme hem klavyeyle hem dokunmatikte çalışır; sunucu
   TÜM sıranın permütasyonunu doğrular, istemci hatası hikâye düşüremez. */

.stry-sira{display:flex;align-items:center;gap:8px;flex:none}

.stry-sira__b{
  width:32px;height:32px;flex:none;border:0;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;font-size:14px;line-height:1;
  background:var(--surface);color:var(--muted);box-shadow:inset 0 0 0 1px var(--line);
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease);
}

.stry-sira__b:hover:not(:disabled){background:var(--o08);color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40)}

.stry-sira__b:disabled{opacity:.4;cursor:not-allowed}

.stry-sira__b:focus-visible{outline:2px solid var(--o40);outline-offset:2px}

/* Silme düğmesi: hayalet tabanı korunur, YALNIZ hover tonu yıkıcıya döner —
   kaydet düğmesinin yanında kazara tıklanmasın diye ayrışır (.slide-sil emsali). */

.stry-sil{margin-left:auto}

.stry-sil:hover:not(:disabled){background:rgba(255,106,128,.10);color:#FF6A80;box-shadow:inset 0 0 0 1px rgba(255,106,128,.42)}

/* ── "Şu anda misafire açık olanlar" listesi (ayar panelinin canlı sonucu) ─── */

.stry-acik{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}

.stry-acik li{
  display:flex;align-items:center;gap:7px;padding:5px 11px 5px 6px;border-radius:999px;
  background:var(--surface);box-shadow:inset 0 0 0 1px var(--line);
  font-size:12.5px;font-weight:600;color:var(--text);
}

.stry-acik li > span{
  display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border-radius:999px;
  background:var(--o08);color:var(--orange-hi);
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;
}

/* ── MOBİL / DAR EKRAN: tek sütun, sahne ortalanır, hedefler ≥44px ─────────── */

@media (max-width:860px){
  .stry-edit{grid-template-columns:minmax(0,1fr);gap:14px}
  .stry-stage{max-width:190px;margin-inline:auto}
  .stry-rozet{justify-content:center}
}

@media (max-width:700px){
  /* Panel başlığı iki satıra iner (.cms-panel__h{flex-wrap:wrap} zaten tanımlı);
     sıra kapıları sola hizalanıp dokunma hedefine büyür. */
  .stry-sira{width:100%;justify-content:flex-start}
  .stry-sira__b{width:44px;height:44px;font-size:16px}
  .stry-sil{margin-left:0}
  .cms-actions .btn{flex:1 1 auto;min-height:44px}
  /* Dosya girdisi ve onay kutusu satırı da ≥44px. */
  .stry-edit .f-file__in{min-height:44px}
  .stry-edit .f-check{min-height:44px}
}

@media (max-width:420px){
  /* 390/375/360: sahne ekrana göre daralır (SABİT px verilmez → yatay taşma 0). */
  .stry-stage{max-width:min(170px,54vw)}
  .stry-acik li{font-size:12px}
  /* Dört sayaç dar ende ikişerli iner — `.lst-stats` 4 sütunu 360'ta taşardı. */
  .lst-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ANASAYFA · PREMIUM BANNER  (#uyelik — madde 87, proje sahibi 2026-08-22)
   ───────────────────────────────────────────────────────────────────────────
   BAĞLAM: plan matrisindeki VIP satırı kaldırıldı (plans tablosunda VIP planı
   YOK; ₺1.499 / ₺7.194 / ₺12.588 uydurma rakamlardı, panele bağlanamıyordu).
   Yerine bölümün kapanışı olan tek bir banner geldi: kartlar "planını seç" der,
   banner "kilidi aç" der ve /premium'a götürür. Kartlar ikiye indiği için
   `.plans` auto-fit ızgarası kendiliğinden iki kolona oturur — theme'e
   DOKUNULMADI (o dosya salt-okunur).

   DİL DİSİPLİNİ (yeni idiom UYDURULMADI): rozet `.hero__flag`/`.hero__kicker`
   ölçüsünde, özellik hapları `.hero__perks` ritminde (4px turuncu nokta + cam
   hap), başlık `.cta h2`nin display puntosu + `em` turuncu vurgusunda, düğme
   `.btn--orange`ın ölçü/gölge davranışında, dev filigran `.hero__mark`ın
   kontur tekniğinde. Yalnız BU bölüme özgü olan üç şey: iki kolonlu banner
   kabı, fiyat bloğunun taban hizası (rakam · üstü çizili liste · birim) ve üst
   kenardaki ışık taraması.

   TOKEN DİSİPLİNİ: renklerin tamamı theme.css değişkenlerinden (--orange,
   --orange-hi, --o08/--o14/--o40, --line, --dim, --muted, --ink, --r, --r-sm,
   --ease, --shadow, --f-display, --f-mono). UYDURMA HEX YOK; tek istisnalar
   theme'in kendi metin tonlarının birebir kopyaları (#F7F6F4 · #D8D7D5 · #fff)
   ve turuncunun şeffaf türevleri (rgba(255,144,0,*) = --orange'ın kendisi).

   HAREKET: üst kenarda 5,2 sn'lik TEK bir ışık taraması + hover'da 3px kalkış
   ve okun 3px kayması. Başka hiçbir şey oynamıyor (abartı yok). Kullanıcı
   reduced-motion isterse tarama da geçişler de tamamen kapanır.

   MOBİL: 760'ın altında tek kolon, fiyat bloğu sola döner, düğme tam genişlik
   ve ≥48px (kartın TAMAMI zaten tek bağlantı → dokunma hedefi kart boyunda).
   390/375/360'ta yatay taşma 0: kapta `overflow:hidden`, tüm punto clamp(),
   hiçbir yerde sabit px genişlik yok.

   ENVANTER: kaynak-dışı EK bölüm (React'te karşılığı yok) → E01 sözleşmesine
   sınıf eklemez, sözleşmeden sınıf DÜŞÜRMEZ: VIP kartı `.plan*` ailesini
   Ziyaretçi/Premium kartlarıyla paylaşıyordu, o ailenin tamamı hâlâ basılıyor. */

.pbn{
  position:relative;isolation:isolate;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;
  gap:20px clamp(24px,3.4vw,44px);
  margin-top:18px;padding:clamp(22px,3vw,34px) clamp(20px,3vw,34px);
  border-radius:var(--r);
  background:linear-gradient(112deg,rgba(26,17,4,.92) 0%,rgba(14,10,4,.9) 44%,rgba(9,9,9,.9) 100%);
  box-shadow:inset 0 0 0 1px var(--line),var(--shadow);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease);
}

/* Üst kenarın ışık taraması: 1px'lik hairline üzerinde yürüyen gradyan.
   Kapta `overflow:hidden` olduğu için kenarın dışına taşmaz. */

.pbn::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:2;
  background:linear-gradient(90deg,
    transparent 0%,var(--o40) 16%,var(--orange-hi) 30%,var(--o40) 44%,transparent 62%);
  background-size:230% 100%;
  animation:pbn-tara 5.2s linear infinite;
}

@keyframes pbn-tara{from{background-position:130% 0}to{background-position:-130% 0}}

.pbn:hover{
  transform:translateY(-3px);
  box-shadow:inset 0 0 0 1px var(--o40),var(--shadow),0 0 64px -34px var(--orange);
}

/* Derinlik katmanı: sağda fiyatın arkasında sıcak halo, sol üstte hafif ışık.
   AYRI düğüm — kabın kendi zeminini bozmadan üstüne biner. */

.pbn__glow{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(54% 130% at 88% 52%,var(--o14) 0%,transparent 68%),
    radial-gradient(42% 110% at 2% 0%,rgba(255,144,0,.07) 0%,transparent 72%);
}

/* Dev filigran — `.hero__mark` tekniği: dolgu yok, ince turuncu kontur. */

.pbn__mark{
  position:absolute;right:-4px;top:50%;translate:0 -50%;z-index:0;
  font-family:var(--f-display);font-weight:800;font-size:clamp(64px,9vw,132px);
  line-height:.8;letter-spacing:-.055em;
  color:transparent;-webkit-text-stroke:1px rgba(255,144,0,.075);
  pointer-events:none;user-select:none;
}

.pbn__body,.pbn__buy{position:relative;z-index:1;min-width:0}

/* ── sol kolon: rozet · başlık · özellik hapları ─────────────────────────── */

.pbn__tag{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 12px;border-radius:999px;background:var(--o08);
  box-shadow:inset 0 0 0 1px rgba(255,144,0,.22);
  font-family:var(--f-mono);font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--orange-hi);
}

.pbn__tag svg{width:13px;height:13px;flex:none;stroke:currentColor;fill:none;stroke-width:2.2}

.pbn__tag--on{background:var(--o14)}

/* Kampanya sayacı: rakamlar zıplamasın diye tabular; ayraç ince turuncu çizgi. */

.pbn__saat{
  font-style:normal;color:#fff;letter-spacing:.08em;font-variant-numeric:tabular-nums;
  padding-left:9px;border-left:1px solid rgba(255,144,0,.26);
}

.pbn__title{
  display:block;margin-top:14px;
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(23px,3.1vw,36px);letter-spacing:-.035em;line-height:1.05;color:#F7F6F4;
}

.pbn__title em{font-style:normal;color:var(--orange)}

/* `.hero__perks` ritminin birebir karşılığı. */

.pbn__perks{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}

.pbn__perks span{
  display:inline-flex;align-items:center;gap:7px;
  font-size:11.5px;font-weight:600;color:#D8D7D5;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);
  border-radius:999px;padding:5px 13px;
}

.pbn__perks i{width:4px;height:4px;border-radius:50%;background:var(--orange);flex:none}

/* ── sağ kolon: fiyat · not · düğme ──────────────────────────────────────── */

.pbn__buy{display:flex;flex-direction:column;align-items:flex-end;gap:11px;text-align:right}

/* Rakam · üstü çizili liste · birim TABAN hizasında durur (baseline). */

.pbn__num{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap;justify-content:flex-end}

.pbn__num b{
  font-family:var(--f-display);font-weight:800;
  font-size:clamp(32px,4.2vw,50px);letter-spacing:-.04em;line-height:1;color:#fff;
}

.pbn__num s{font-size:15px;color:var(--dim);text-decoration-color:var(--o40)}

.pbn__num small{font-size:13px;font-weight:600;color:var(--muted)}

/* Not satiri filigranin uzerine denk geliyor -> --dim degil --muted (okunurluk). */

.pbn__note{font-size:12px;color:var(--muted);line-height:1.5}

.pbn__go{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:46px;padding:0 26px;border-radius:var(--r-sm);
  background:var(--orange);color:var(--ink);font-weight:700;font-size:14px;
  transition:filter .2s var(--ease),box-shadow .2s var(--ease);
}

.pbn__go svg{
  width:17px;height:17px;flex:none;stroke:currentColor;fill:none;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;transition:transform .2s var(--ease);
}

.pbn:hover .pbn__go{filter:brightness(1.1);box-shadow:0 14px 30px -14px var(--orange)}

.pbn:hover .pbn__go svg{transform:translateX(3px)}

/* ── PREMIUM ÜYE DALI: aynı kap, sakin ton ─────────────────────────────────
   Üyeye "Premium'a geç" demek anakronizm olurdu (hero CTA'sındaki $isPremium
   dallanmasıyla aynı gerekçe) — banner uzatmaya çağırır. Görsel olarak da
   bağırmaz: halo söner, büyük rakamın yerini gerçek bitiş TARİHİ alır (tarih
   uzun bir dizedir, fiyat puntosunda satır kırardı). */

.pbn--uye .pbn__glow{opacity:.5}

.pbn--uye .pbn__num b{font-size:clamp(24px,2.7vw,32px);letter-spacing:-.03em}

/* ── MOBİL: tek kolon, fiyat bloğu sola döner, düğme tam genişlik ─────────── */

@media (max-width:760px){
  .pbn{grid-template-columns:minmax(0,1fr);gap:18px;padding:22px 18px}
  .pbn__buy{align-items:flex-start;text-align:left;width:100%}
  .pbn__num{justify-content:flex-start}
  .pbn__go{width:100%;min-height:48px}
  /* Filigran dar ekranda metnin arkasına girmesin: alt köşeye çekilir. */
  .pbn__mark{top:auto;bottom:-16px;translate:none;right:-6px;font-size:clamp(72px,24vw,120px)}
}

@media (max-width:420px){
  /* 390/375/360: haplar iki satıra iner, punto bir tık düşer — taşma 0. */
  .pbn__perks span{font-size:11px;padding:5px 11px}
  .pbn__tag{letter-spacing:.12em}
}

@media (prefers-reduced-motion:reduce){
  .pbn,.pbn__go,.pbn__go svg{transition:none}
  .pbn::before{animation:none}
  .pbn:hover{transform:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN · ROL YÖNETİMİ  (madde 90+91 · /admin/roller)
   Yeni idiom UYDURULMADI: tablo `.atbl` + `.lst-tbl` imzası, form `.f-*`
   kütüphanesi, grup kutusu `.cms-sec`, çekmece `.adraw`. Bu bölüm YALNIZ bu
   ekranın kendine özgü iki şeyini tanımlar: 4 kolonlu rol tablosu ve izin
   matrisinin satır düzeni (etiket + kapsam seçimi).
   ═══════════════════════════════════════════════════════════════════════════ */
/* Roller tablosu: 4 kolon (Rol/Yetkiler/Yönetici/İşlem) — atbl--y emsali. */

.atbl--rol .atbl__h,.atbl--rol .atbl__r{grid-template-columns:minmax(0,1.1fr) minmax(0,2.4fr) minmax(0,.5fr) minmax(0,.7fr)}

.atbl--rol .atbl__r{align-items:start}

.rol__key{font-family:var(--f-mono);font-size:11px;color:var(--dim)}

/* Yetki rozetleri sarar; uzun etiket satırı yatay taşmaya zorlamaz. */

.rol__izin{display:flex;flex-wrap:wrap;gap:5px;min-width:0}

.rol__izin .pilltag{white-space:normal;overflow-wrap:anywhere}

/* ── MOBİL: satır kart olur, kapsam seçimi alt satıra iner (taşma 0) ──────── */

@media (max-width:760px){
  .atbl--rol{background:none;box-shadow:none;overflow:visible}
  .atbl--rol .atbl__h{display:none}
  .atbl--rol .atbl__r{grid-template-columns:minmax(0,1fr) auto;gap:8px 12px;padding:13px 14px;margin-bottom:8px;border-radius:11px;border:0;background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
  .atbl--rol .atbl__vb{grid-column:1/2;grid-row:1}
  .atbl--rol .atbl__acts{grid-column:2;grid-row:1;justify-self:end}
  .atbl--rol .atbl__r > span:nth-child(n+2):not(.atbl__acts){grid-column:1/-1}
}

@media (max-width:460px){
/* dokunma hedefi ≥44px */

}

/* ── MOBİL (390/375/360): dokunma hedefi ≥44px + yatay taşma 0 ── */

@media (max-width:480px){
.modal__cta{min-height:48px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ADMIN · AYARLAR "AKTİF DOMAİN"  (madde 70 · /admin/ayarlar "Genel" kartı)
   Yeni idiom UYDURULMADI: satır `.opt`/`.opt__b` (toggle satırı emsali), giriş
   kutusu `.tariff__in` (kdv/sessions "sayı+birim" emsali) — ama o idiom 52px +
   sağa-hizalı SAYI için tasarlı; alan adı METNİ için genişlik/hiza override.
   ═══════════════════════════════════════════════════════════════════════════ */

.tariff__in--domain input{width:180px;text-align:left;color:var(--orange)}

.tariff__in--domain small{color:var(--dim)}

@media (max-width:480px){
  .tariff__in--domain input{width:130px}
}

MADDE 79 · GELEN VİDEOLAR — YAYINCI YERİNE KATKIDA BULUNAN ÜYE ADI
   theme.css SALT-OKUNUR: "Yayına al" ile doğan videolarda publisher_id NULL
   kalır (Video::gorunumYayinci()), bu yüzden kart/detay/reels/geçmişte
   Fergiohouse'un yerini contributor_name alır — AMA TIKLANAMAZ (profil yok).
   Değerler mevcut idiomların (.vid__meta a / .vp__chid / .reel__ch) BİREBİR
   ölçüleridir, yalnız <a> yerine <span> kullanıldığı için imleç/hover kapatılır.
   ═══════════════════════════════════════════════════════════════════════════ */

.vid__uye{display:inline-flex;align-items:center;gap:4px;color:var(--dim);font-size:12px;font-weight:500;cursor:default}

.vp__chid--uye{cursor:default}

.vp__chid--uye:hover b{color:var(--text)}

.vp__chava{
  width:46px;height:46px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;
  background:var(--raised);color:var(--dim);
}

.vp__chava svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.7}

.reel__ch--uye{
  width:46px;height:46px;border-radius:50%;border:2px solid #fff;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.16);cursor:default;
}

.reel__ch--uye svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.7}

span.reel__who{cursor:default}

/* ═══════════════════════════════════════════════════════════════════════════
   MADDE 79 · VİDEO GÖNDER — AÇIKLAMA (etiket alanı kaldırıldı, yerine geldi)
   `.sv__descf textarea` .field input'un (theme.css:4423-4430) BİREBİR görsel
   karşılığıdır — theme.css'te textarea varyantı yok, kendi bölümünde açılır.
   ═══════════════════════════════════════════════════════════════════════════ */

.sv__descf textarea{
  width:100%;min-height:96px;padding:11px 14px;border-radius:var(--r-sm);
  background:var(--surface);border:1px solid transparent;color:var(--text);
  font:inherit;font-size:14px;line-height:1.6;resize:vertical;
  transition:border-color .16s,background .16s;
}

.sv__descf textarea::placeholder{color:#5A5957}

.sv__descf textarea:focus{outline:none;background:var(--raised);border-color:var(--o40)}
/* ═══════════════════════════════════════════════════════════════════════════
   SİTE · ORTAKLIK v3   (madde 99 + 100 · /ortaklik + /ortaklik/panel)
   Eski "ORTAKLIK · PANEL" ve "SİTE · ORTAKLIK SAYFASI v2" bölümleri BU TURDA
   temizlenip yerine bu tek blok geldi (ölü CSS bırakılmadı). theme.css SALT-OKUNUR:
   .af/.af__hero/.af__apply/.af__form/.field/.btn/.seg/.stat/.apag temel idiomları
   theme'den gelir; burada yalnız v3 zenginleştirmeleri + yeni sınıflar var. Tüm
   renk/ölçüler theme token'larıyla (--orange/--panel/--line/--o08…). Hareket
   ABARTISIZ ve `prefers-reduced-motion` saygılı. Mobil: 390/375/360 taşma 0,
   dokunma hedefleri ≥44px.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── ORTAK: kaydırınca beliren (scroll-reveal) — hafif, JS IntersectionObserver ── */
.reveal-on [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s cubic-bezier(.22,.61,.36,1);will-change:opacity,transform}
.reveal-on [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal-on [data-reveal]{opacity:1;transform:none;transition:none}
}

/* ═══════════ /ortaklik (public sayfa) ═══════════ */

.af3__hero{position:relative;overflow:hidden;padding-top:clamp(12px,3vw,30px)}
.af3__glow{
  position:absolute;inset:-40% -10% auto auto;width:min(560px,80%);height:360px;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,var(--o14),transparent 72%);filter:blur(6px);opacity:.9;
}
@media (prefers-reduced-motion:no-preference){
  .af3__glow{animation:af3glow 9s ease-in-out infinite alternate}
}
@keyframes af3glow{from{transform:translate(0,0) scale(1);opacity:.65}to{transform:translate(-24px,18px) scale(1.12);opacity:1}}
.af3__hero > *{position:relative;z-index:1}

.af3__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.af3__cta .btn{height:48px;padding:0 24px;font-size:14px;display:inline-flex;align-items:center}

.af3__chips{list-style:none;margin:20px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.af3__chips li{
  display:inline-flex;align-items:center;gap:7px;padding:7px 13px;border-radius:999px;
  font-size:12.5px;color:var(--muted);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
}
.af3__chips svg{width:15px;height:15px;stroke:var(--orange);fill:none;stroke-width:1.9}

/* — nasıl işler: bağlı akış — */
.af3__how{margin-top:44px;padding-top:30px;border-top:1px solid var(--line)}
.af3__how > h2,.af3__why > h2{
  font-family:var(--f-display);font-size:clamp(21px,2.6vw,27px);font-weight:700;margin:6px 0 22px;letter-spacing:-.015em;
}
.af3__flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.af3__step{
  position:relative;padding:20px 18px 18px;border-radius:var(--r);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .18s,transform .18s;
}
.af3__step:hover{box-shadow:inset 0 0 0 1px var(--o40);transform:translateY(-3px)}
.af3__step-n{
  position:absolute;top:14px;right:15px;font-family:var(--f-mono);font-size:12px;color:var(--o40);letter-spacing:.05em;
}
.af3__step-ico{
  width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);margin-bottom:14px;
}
.af3__step-ico svg{width:21px;height:21px;stroke:var(--orange);fill:none;stroke-width:1.8}
.af3__step b{display:block;font-size:15px;margin-bottom:6px;color:var(--text)}
.af3__step p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* — neden: nitel avantaj kartları (RAKAM/ORAN YOK) — */
.af3__why{margin-top:40px;padding-top:30px;border-top:1px solid var(--line)}
.af3__feats{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.af3__feat{
  padding:20px 18px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line);
  transition:box-shadow .18s,transform .18s;
}
.af3__feat:hover{box-shadow:inset 0 0 0 1px var(--o40);transform:translateY(-3px)}
.af3__feat-ico{
  width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);margin-bottom:13px;
}
.af3__feat-ico svg{width:20px;height:20px;stroke:var(--orange);fill:none;stroke-width:1.8}
.af3__feat b{display:block;font-size:14.5px;margin-bottom:6px;color:var(--text)}
.af3__feat p{margin:0;font-size:13px;line-height:1.6;color:var(--muted)}

/* — ortak paneli köprüsü — */
.af3__panel{
  margin-top:40px;padding:26px 28px;border-radius:var(--r);display:flex;gap:20px;align-items:center;
  background:
    radial-gradient(120% 140% at 100% 0,var(--o08),transparent 60%),
    var(--panel);
  box-shadow:inset 0 0 0 1px var(--o14);
}
.af3__panel-ico{
  flex:none;width:52px;height:52px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);
}
.af3__panel-ico svg{width:26px;height:26px;stroke:var(--orange);fill:none;stroke-width:1.7}
.af3__panel-body{min-width:0}
.af3__panel-body h2{font-family:var(--f-display);font-size:19px;font-weight:700;margin:4px 0 6px}
.af3__panel-body p{margin:0 0 15px;font-size:13.5px;line-height:1.6;color:var(--muted)}
.af3__panel-body .btn{height:42px;padding:0 20px;font-size:13px}

.af3__apply{margin-top:40px}

/* — form alt bölümü + honeypot + özel CAPTCHA (madde 81 · KORUNUR) — */
.af__formhead--sub{margin-top:22px;margin-bottom:10px}
.af__formhead--sub .lbl{margin:0}
.af__formhead--sub em{color:var(--dim);font-style:normal;font-weight:400}
/* HONEYPOT: ekran dışı (display:none DEĞİL — bazı botlar onu atlar; ekran-dışı daha güvenilir tuzak). */
.af__trap{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.af__captcha{margin-top:18px}
.af__captcha-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.af__captcha-head .lbl{margin:0}
.af__captcha-yenile{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:transparent;border:0;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);cursor:pointer;
  transition:color .15s,box-shadow .15s;
}
.af__captcha-yenile:hover{color:var(--orange);box-shadow:inset 0 0 0 1px var(--o40)}
.af__captcha-yenile svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.af__captcha-row{display:flex;gap:10px;align-items:stretch;margin-top:8px}
.af__captcha-svg{
  flex:none;width:132px;height:56px;border-radius:10px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);
}
.af__captcha-svg svg{width:100%;height:100%;display:block}
.af__captcha-loading{font-size:11px;color:var(--dim)}
.af__captcha-field{flex:1;margin:0}
.af__captcha-field input{text-align:center;font-family:var(--f-mono);letter-spacing:.04em}
.af__captcha-hint{margin:8px 0 0;font-size:11.5px;color:var(--dim);line-height:1.5}

/* — /ortaklik mobil — */
@media (max-width:900px){
  .af3__flow{grid-template-columns:repeat(2,1fr)}
  .af3__feats{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .af3__flow{grid-template-columns:1fr}
  .af3__feats{grid-template-columns:1fr}
  .af3__panel{flex-direction:column;align-items:flex-start;padding:20px}
  .af3__panel-body .btn{width:100%;min-height:44px}
  .af3__cta .btn{flex:1 1 auto;justify-content:center}
  .af__captcha-yenile{width:44px;height:44px}
  .af__captcha-row{flex-wrap:wrap}
  .af__captcha-svg{width:100%;height:64px}
  .af__captcha-field{flex-basis:100%}
  .af__captcha-field input{min-height:44px}
}

/* ═══════════ /ortaklik/panel ═══════════ */

.op{min-height:100vh;background:var(--bg)}
.op__bar{
  display:flex;align-items:center;gap:16px;padding:16px clamp(16px,4vw,40px);
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5;
}
.op__bar .logo{flex:none}
.op__who{display:grid;gap:1px;min-width:0;margin-inline-end:auto}
.op__who b{font-size:14px;color:var(--text);overflow-wrap:anywhere}
.op__who small{font-size:11.5px;color:var(--dim)}
.op__who code{font-family:var(--f-mono);font-size:11px;color:var(--orange)}
.op__out{flex:none;margin:0}
.op__out .btn{height:44px;padding:0 18px;font-size:13px}

.op__in{max-width:1120px;margin:0 auto;width:100%;padding:clamp(18px,3.5vw,34px) clamp(16px,4vw,40px) 64px;display:grid;gap:clamp(16px,2.4vw,22px)}

.op__uyari{
  margin:0;padding:12px 16px;border-radius:12px;font-size:13px;line-height:1.55;color:#F0D08A;
  background:rgba(214,158,46,.09);box-shadow:inset 0 0 0 1px rgba(214,158,46,.28);
}

/* — üst bant — */
.op__hero{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap}
.op__eyebrow{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--orange);margin:0}
.op__title{font-family:var(--f-display);font-size:clamp(22px,3vw,30px);font-weight:700;letter-spacing:-.02em;margin:6px 0 4px}
.op__hero-alt{margin:0;font-size:13px;color:var(--muted)}
.op__oran{font-size:12.5px;color:var(--dim);white-space:nowrap}
.op__oran b{color:var(--orange);font-family:var(--f-mono)}

/* — referans link araçları — */
.op__araclar{display:grid;gap:14px;padding:18px;border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.op__link{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.op__link-t{display:grid;gap:6px;min-width:0;flex:1 1 260px}
.op__lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
.op__url{
  font-family:var(--f-mono);font-size:13px;color:var(--text);word-break:break-all;
  padding:11px 13px;border-radius:10px;background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);
}
.op__kop{height:44px;padding:0 20px;font-size:13px;flex:none}

.op__snips{display:grid;gap:9px;padding-top:14px;border-top:1px solid var(--line)}
.op__snip-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.op__snip{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:11px;
  background:var(--raised);box-shadow:inset 0 0 0 1px var(--line);
}
.op__snip-t{margin:0;font-size:12.5px;color:#CDCCCA;line-height:1.5;min-width:0;flex:1;word-break:break-word}
.op__snip-kop{
  flex:none;display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 14px;border:0;cursor:pointer;
  border-radius:9px;background:var(--o08);color:var(--orange);box-shadow:inset 0 0 0 1px var(--o14);
  font-size:12px;font-weight:600;transition:box-shadow .15s,background .15s;
}
.op__snip-kop:hover{background:var(--o14);box-shadow:inset 0 0 0 1px var(--o40)}
.op__snip-kop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9}
.op__araclar code{font-family:var(--f-mono);color:var(--orange);font-size:11.5px}

/* — tarih filtresi — */
.op__filtre{display:flex}
.op__filtre .seg{flex-wrap:wrap}
.op__filtre .seg a{min-height:36px}

/* — KPI kartları — */
.op__kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(174px,1fr));gap:12px}
.op__kpi{
  position:relative;padding:16px 16px 14px;border-radius:var(--r);background:var(--panel);
  box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:3px;overflow:hidden;
}
.op__kpi::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--line)}
.op__kpi--bekleyen::before{background:#D69E2E}
.op__kpi--onayli::before{background:var(--orange)}
.op__kpi--ok::before{background:#7BE39A}
.op__kpi-ico{
  position:absolute;top:14px;right:14px;width:30px;height:30px;border-radius:9px;
  display:flex;align-items:center;justify-content:center;background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);
}
.op__kpi-ico svg{width:16px;height:16px;stroke:var(--orange);fill:none;stroke-width:1.8}
.op__kpi-l{font-size:11.5px;color:var(--muted)}
.op__kpi > b{font-family:var(--f-display);font-size:24px;font-weight:700;color:var(--text);letter-spacing:-.02em;line-height:1.1;font-variant-numeric:tabular-nums}
.op__kpi > small{font-size:11px;color:var(--dim)}
.op__kpi--ok > b{color:#7BE39A}

/* — kart kabuğu — */
.op__kart{padding:clamp(16px,2vw,22px);border-radius:var(--r);background:var(--panel);box-shadow:inset 0 0 0 1px var(--line)}
.op__h-row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:12px}
.op__h{margin:0 0 12px;font-family:var(--f-display);font-size:16px;letter-spacing:-.01em;color:var(--text)}
.op__h-row .op__h{margin:0}
.op__h-alt{font-size:11.5px;color:var(--dim);font-family:var(--f-mono)}
.op__bos{margin:0;font-size:13px;color:var(--dim)}
.op__not{margin:12px 0 0;font-size:11px;color:var(--dim);line-height:1.55}
.op__not code{font-family:var(--f-mono);color:var(--orange)}
.op__gizli{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* — grafik (SVG · opg) — */
.op__grafik{overflow:hidden}
.opg{margin:0}
.opg__cap{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:12px}
.opg__leg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--muted)}
.opg__leg i{width:11px;height:11px;border-radius:3px;display:inline-block}
.opg__leg--kaz i{background:var(--orange)}
.opg__leg--uye i{background:rgba(148,163,184,.55)}
.opg__sum{margin-inline-start:auto;font-family:var(--f-mono);font-size:12px;color:var(--text);font-variant-numeric:tabular-nums}
.opg__bos{margin:10px 0;font-size:13px;color:var(--dim)}
.opg__wrap{position:relative}
.opg__svg{width:100%;height:190px;display:block;overflow:visible}
.opg__grid{stroke:var(--line);stroke-width:1;shape-rendering:crispEdges;opacity:.6}
.opg__axis{stroke:var(--line);stroke-width:1.2;shape-rendering:crispEdges}
.opg__bar{fill:rgba(148,163,184,.32)}
.opg__area{fill:var(--orange);opacity:.16}
.opg__line{fill:none;stroke:var(--orange);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.opg__dot{fill:var(--orange)}
.opg__hit{fill:transparent;cursor:pointer}
.opg__hit:hover{fill:rgba(255,255,255,.04)}
@media (prefers-reduced-motion:no-preference){
  .opg__line{stroke-dasharray:2600;stroke-dashoffset:2600;animation:opgDraw 1.1s ease forwards}
}
@keyframes opgDraw{to{stroke-dashoffset:0}}
.opg__x{display:flex;margin-top:7px}
.opg__x span{flex:1;text-align:center;font-family:var(--f-mono);font-size:10px;color:var(--dim);white-space:nowrap;overflow:hidden}
.opg__x--hide{visibility:hidden}
.opg__tip{
  position:absolute;z-index:3;pointer-events:none;min-width:120px;padding:9px 11px;border-radius:10px;
  background:var(--raised);box-shadow:0 8px 24px rgba(0,0,0,.4),inset 0 0 0 1px var(--o40);
  transform:translate(-50%,0);display:grid;gap:4px;
}
.opg__tip b{font-family:var(--f-mono);font-size:11px;color:var(--dim)}
.opg__tip span{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--text)}
.opg__tip i{width:9px;height:9px;border-radius:3px}
.opg__tip-kaz i{background:var(--orange)}
.opg__tip-uye i{background:rgba(148,163,184,.6)}
.opg__tip em{font-style:normal;font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* — iki kolon: defter + son üyeler — */
.op__grid{display:grid;grid-template-columns:minmax(0,1.9fr) minmax(0,1fr);gap:clamp(14px,2vw,20px);align-items:start}
.op__tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -4px;padding:0 4px}
.op__tbl{width:100%;border-collapse:collapse;font-size:13px;min-width:560px}
.op__tbl th{
  text-align:left;padding:0 10px 10px;font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line);white-space:nowrap;
}
.op__tbl td{padding:11px 10px;border-top:1px solid var(--line);color:#CDCCCA;white-space:nowrap}
.op__tbl tbody tr{transition:background .12s}
.op__tbl tbody tr:hover{background:rgba(255,255,255,.02)}
.op__sag{text-align:right}
.op__num{font-family:var(--f-mono);font-size:12px;font-variant-numeric:tabular-nums}
.op__kazanc{color:var(--orange);font-weight:700}

.op__uyeler{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.op__uyeler li{display:flex;align-items:center;gap:11px;padding:10px 2px;border-top:1px solid var(--line)}
.op__uyeler li:first-child{border-top:0}
.op__uye-av{
  flex:none;width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:12px;color:var(--orange);background:var(--o08);box-shadow:inset 0 0 0 1px var(--o14);
}
.op__uyeler b{font-weight:700;color:#CDCCCA;margin-inline-end:auto}
.op__uyeler time{font-family:var(--f-mono);font-size:11.5px;color:var(--dim)}

/* — panel mobil — */
@media (max-width:900px){
  .op__grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .op__bar{gap:10px;padding:12px 16px}
  .op__bar .logo{min-height:44px;align-items:center}
  .op__bar .logo__mark{height:32px}
  .op__bar .logo__word{height:14px}
  .op__hero{align-items:flex-start}
  .op__kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .op__kpi > b{font-size:21px}
  .op__kop{width:100%}
  .op__snip{flex-wrap:wrap}
  .op__snip-kop{width:100%;justify-content:center;height:42px}
  .op__filtre .seg{width:100%}
  .op__filtre .seg a{flex:1 1 auto;justify-content:center;min-height:44px}
  .op .apag__b a,.op .apag__b span{min-width:44px;height:44px}
  .opg__svg{height:168px}
}
@media (max-width:380px){
  .op__kpis{grid-template-columns:1fr 1fr}
  .op__kpi > b{font-size:19px}
}


/* ══════════════════════════════════════════════════════════════════════════
   TELEFON YATAY — GENEL DUZEN (2026-08-24, proje sahibi: "telefonu yan
   cevirince css/text/butonlar ic ice giriyor, yan moda kendini aktarmiyor")

   KOK NEDEN (olculdu): theme.css'te 66 media query var ama ORIENTATION kurali
   SIFIR — hepsi `max-width` bazli. Telefon yan cevrilince genislik 812px'e
   CIKAR (mobil duzen kalkar, "tablet/masaustu" sayilir) ama YUKSEKLIK 375px'e
   DUSER. Olcum: hero 408px > viewport 375px; cerez bari (296-359px) ile
   yukari-cik dugmesi (319-361px) UST USTE biniyor; player videosu 439px ile
   ekrani 64px asiyor.

   Cozum: kurallar GENISLIGE degil YUKSEKLIGE bakar. svh birimi mobil adres
   cubugu daralmasini da dogru hesaplar (fallback vh ile birlikte).
   ══════════════════════════════════════════════════════════════════════════ */

@media (orientation:landscape) and (max-height:560px){

  /* 1) PLAYER — video DAIMA ekrana sigar (tasma yok, oran korunur). */
  .pv{max-height:100vh;max-height:100svh}
  .pv .pl__video,.pv video{max-height:100vh;max-height:100svh;object-fit:contain}

  /* 2) HERO — kisa ekranda viewport'u asmaz. */
  .hero{min-height:0;max-height:100vh;max-height:100svh}
  .hero__bg,.hero__grade,.hero__grain{max-height:100vh;max-height:100svh}

  /* 3) SABIT OGE CAKISMASI — cerez bari ile yukari-cik dugmesi ust uste
        biniyordu (olcum: 319-361 vs 296-359). Dugme bar'in USTUNE alinir. */
  .top-btn{bottom:calc(92px + env(safe-area-inset-bottom))}
  .cookiebar{padding-top:8px;padding-bottom:calc(8px + env(safe-area-inset-bottom))}

  /* 4) TAM EKRAN KAPLAYAN KATMANLAR — kisa ekranda icerik kesilmesin,
        kaydirilabilir olsun (yas kapisi/cerez/modal). */
  .agegate,.cookiebar,.modal,.sheet{max-height:100vh;max-height:100svh;overflow-y:auto}
  .agegate__card,.modal__card{max-height:calc(100vh - 24px);max-height:calc(100svh - 24px);overflow-y:auto}

  /* 5) DIKEY RITIM — bolum bosluklari kisa ekranda yariya iner (ic ice girme
        hissinin buyuk kismi asiri dikey padding'ten geliyordu). */
  .wrap>section,.sec,.strip{padding-top:14px;padding-bottom:14px}

  /* 6) DOKUNMA HEDEFLERI — yatayda kucultulen ogeler 44px altina dusmesin. */
  .btn,.chip,.ctl button,.pv__reels{min-height:40px}
}

/* Cok kisa ekran (or. 320px yukseklik): ust bar dikey alani yemesin. */
@media (orientation:landscape) and (max-height:430px){
  .hd{position:static}
}


/* ══════════════════════════════════════════════════════════════════════════
   PLAYER — CIHAZ UYUMU (2026-08-24, proje sahibi: "baslat ikonu mobilde cok
   buyuk, siritiyor; her buton her cihazda uyumlu calissin")

   OLCUM: 375x812 telefonda player 343x193, .pv__big 78x78 => oynat dugmesi
   player YUKSEKLIGININ %40'i. Masaustunde player ~500px oldugu icin ayni 78px
   %16'ya denk geliyordu; tek sabit deger iki cihazda ayni oranı vermiyor.
   Hedef oran ~%28-30: dugme belirgin kalir ama kareyi ezmez.
   ══════════════════════════════════════════════════════════════════════════ */

/* Telefon (dikey) */
@media (max-width:700px){
  .pv__big{width:56px;height:56px}
  .pv__big svg{width:24px;height:24px;margin-left:2px}
}

/* Kucuk telefon (320-360px: iPhone SE, eski Android). 375-390px standart
   telefonlar 56px kuralinda kalir (%29 oran) — 380 esigi onlari da kucultuyordu. */
@media (max-width:360px){
  .pv__big{width:50px;height:50px}
  .pv__big svg{width:21px;height:21px;margin-left:2px}
}

/* Telefon (yatay): player tam yukseklik, dugme orta boy */
@media (orientation:landscape) and (max-height:560px){
  .pv__big{width:60px;height:60px}
  .pv__big svg{width:26px;height:26px;margin-left:2px}
}

/* ── DOKUNMATIK CIHAZ DAVRANISI ────────────────────────────────────────────
   Fare olmayan cihazlarda :hover tap sonrasi TAKILI kalir (dugme basili
   gorunur). Hover gorunumu notrlenir, geri bildirim :active'te verilir.
   Ayrica mobil tarayicilarin mavi tap-highlight karesi kaldirilir. */
@media (hover:none){
  .pv__big:hover{transform:none;background:var(--orange)}
  .pv__big:active{transform:scale(.94)}
  .pv .b:hover,.pv .chip:hover,.pv__reels:hover{background:inherit;transform:none}
  .pv .b:active,.pv .chip:active,.pv__reels:active{transform:scale(.94)}
}

.pv,.pv *,.btn,.chip{-webkit-tap-highlight-color:transparent}

/* Dokunma hedefi guvencesi: kucuk ekranda kontrol dugmeleri 44px altina
   dusmesin (WCAG 2.5.8 / Apple HIG). Gorsel boyut korunur, ::after ile
   dokunma alani genisletilir (mevcut desen). */
@media (max-width:380px){
  .pv .b,.pv .chip{min-width:38px;min-height:38px}
}