/* ══════════════════════════════════════════════════════════════════════
   KART ROZETLERİ — TEK GÖRSEL AİLE
   ──────────────────────────────────────────────────────────────────────
   ⚠️ ESKİ HÂLİ: üç DOLU ve birbirinden kopuk renk, aynı anda, her afişin
   sol üstünde alt alta:
       POPÜLER  → #f97316 turuncu
       YENİ     → #15803d yeşil
       Dublajlı → #2563eb mavi
   Bu afişler zaten yüksek doygunlukta altın-kırmızı anahtar görseller.
   Üstlerine üç neon pil binince kart "etiket yığını" gibi görünüyordu ve
   asıl ürün (afiş) kayboluyordu. Renkler birbirinden de habersizdi:
   ortak bir palet, ortak bir anlam yok.

   YENİ HÂLİ: hepsi AYNI kararmış cam yüzey. Ayrım renk DOLGUSUYLA değil,
   yalnızca kenar ve yazı rengiyle yapılıyor — üstelik en fazla bir tane
   görünüyor (bkz. layout.php / dfKartRozet). "Dublajlı" bilgisi afişten
   tamamen inip kartın alt satırına, yazıya dönüştü.
   ══════════════════════════════════════════════════════════════════════ */
.kart-rozet{position:absolute;top:8px;left:8px;z-index:4;display:flex;flex-direction:column;gap:5px;align-items:flex-start;pointer-events:none}
.kr{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:600;line-height:1;
  letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:6px;
  background:rgba(8,8,10,.72);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  color:rgba(255,255,255,.88);
}
/* Nokta yalnızca "canlı" durumlarda (yeni/popüler) — tek kor kırıntısı. */
.kr-pop::before,.kr-yeni::before{
  content:'';width:5px;height:5px;border-radius:50%;
  background:var(--kor,#ff5a1f);flex-shrink:0;
}
/* ⚠️ DOLU RENGE DÖNDÜ (2026-08-18, kullanıcı isteği — referans ekran
   görüntüleri). Nokta göstergesi kalktı: dolu renk zaten "canlı" sinyali
   veriyordu, ikisi birden gürültü oluyordu. */
.kr-pop::before,.kr-yeni::before{display:none}
.kr-pop{
  background:#e11d2e;border-color:rgba(255,255,255,.16);
  color:#fff;box-shadow:0 2px 10px rgba(225,29,46,.32);
}
.kr-yeni{
  background:#16a34a;border-color:rgba(255,255,255,.16);
  color:#fff;box-shadow:0 2px 10px rgba(22,163,74,.28);
}
/* Dublaj rozeti afişe GERİ DÖNDÜ (referansta afişin üzerinde). Aynı mavi
   `.tag-dub` ile eşleşiyor — aynı bilgi her yerde aynı renkte. */
.kr-dub{
  display:inline-flex;
  background:#2563eb;border-color:rgba(255,255,255,.16);color:#fff;
  letter-spacing:.06em;text-transform:none;
}
.kr-dub svg{width:12px;height:12px;fill:currentColor;flex-shrink:0}

/* Bölüm sayısı afişin SAĞ ÜSTÜNDE — sol taraftaki durum rozetleriyle
   çakışmasın diye ayrı köşe. Nötr koyu cam: bilgi, uyarı değil. */
.kart-rozet-sag{
  position:absolute;top:8px;right:8px;z-index:4;pointer-events:none;
}
.kr-bol{
  background:rgba(8,8,10,.78);border-color:rgba(255,255,255,.14);
  color:rgba(255,255,255,.92);letter-spacing:.04em;text-transform:none;
  font-variant-numeric:tabular-nums;
}
@media (max-width:539px){
  /* Dar ekranda kart ~110px: üç rozet üst üste afişi kapatıyor. */
  .kr-dub{display:none}
  .kr,.kr-bol{font-size:9.5px;padding:3px 6px}

  /* ⚠️ 2026-08-21 — TELEFONDA ROZETLER KOSEGEN YERLESIR.
     Sol yigin (POPULER/YENI) ust-solda, bolum sayisi ust-SAGDA duruyordu.
     Bu kirilimda kart ~110 px'e dustugu icin iki blok ortada bulusup ic
     ice giriyordu (site sahibi 1. ekran goruntusu).
     IKI DENEME BASARISIZ OLDU, ikisi de yanlis varsayimdan:
       1) Her blogu kartin yarisiyla sinirlayip ellipsis -> 55 px'e
          "POPULER" sigmadi, "POPULE…" diye kesilip kenardan tasti.
       2) Sol yigini tamamen gizlemek -> cakisma bitti ama site sahibi
          "POPULER/YENI hepsi goruksun" dedi; bilgi kaybi kabul edilemez.
     Dogru cozum ayni SATIRI paylastirmamak: bolum sayisi ust-sagdan
     ALT-SAGA aliniyor. Afis 3:4 oldugu icin alt kose bos; iki rozet ayri
     yatay bantta durunca kart ne kadar darsa dar olsun cakisma fiziksel
     olarak mumkun degil ve her iki bilgi de tam metniyle gorunur.
     Genis ekranda yerlesim aynen korunuyor (kural yalnizca bu kirilimda). */
  .kart-rozet{max-width:calc(100% - 16px)}
  .kart-rozet-sag{
    top:auto;
    bottom:8px;
    right:8px;
    max-width:calc(100% - 16px);
  }
  .kr,.kr-bol{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}

/* ══ İSTEK BANDI ══════════════════════════════════════════════════════
   ⚠️ Band `.section` İÇİNE sarılı olmalı — dışına konunca sayfa genişliğine
   yayılıp kart ızgarasından taşıyor (kullanıcı ekran görüntüsüyle yakaladı).
   Hizayı `.section` veriyor (masaüstü: max-width 1400px + 48px padding),
   bu yüzden bandın kendi yatay margin'i YOK.
   Sayfadaki tek doygun renkli yüzey — bilerek. Etrafı afiş denizi olduğu
   için band, renk yarışına girmeden "burada bir eylem var" diyor.
   Markanın kendi kor→kırmızı geçişi kullanılıyor (logodaki alevle aynı),
   referanstaki mor-kırmızı DEĞİL: bu site turuncu, mor buraya yabancı. */
.istek-band{
  display:flex;align-items:center;gap:16px;
  margin:0;padding:18px 20px;
  border-radius:16px;text-decoration:none;
  background:linear-gradient(100deg,#c81e2a 0%,var(--kor,#ff5a1f) 62%,#ff8a3d 100%);
  color:#fff;
  box-shadow:0 10px 30px rgba(200,30,42,.22);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease;
}
.istek-band:hover{transform:translateY(-2px);box-shadow:0 14px 38px rgba(200,30,42,.3)}
.istek-band:focus-visible{outline:2px solid #fff;outline-offset:3px}
.istek-ik{
  flex-shrink:0;width:46px;height:46px;border-radius:12px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
}
.istek-ik svg{width:24px;height:24px;fill:#fff}
.istek-metin{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.istek-metin strong{font-size:16px;font-weight:700;letter-spacing:-.01em}
.istek-metin span{font-size:13px;color:rgba(255,255,255,.86)}
.istek-dugme{
  flex-shrink:0;display:inline-flex;align-items:center;gap:5px;
  padding:10px 16px;border-radius:10px;
  background:#fff;color:#c81e2a;
  font-size:13.5px;font-weight:700;
}
.istek-dugme svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){
  .istek-band{padding:15px;gap:12px;flex-wrap:wrap}
  .istek-metin strong{font-size:14.5px}
  .istek-metin span{font-size:12px}
  /* Dar ekranda buton alta iner ve tam genişlik olur: yan yana sıkışınca
     dokunma hedefi 44px'in altına düşüyordu. */
  .istek-dugme{width:100%;justify-content:center;padding:11px 16px}
}
@media (prefers-reduced-motion:reduce){
  .istek-band,.istek-band:hover{transition:none;transform:none}
}

/* ── TELEGRAM BANDI (2026-08-18) ──────────────────────────────────────
   Istek bandiyla AYNI yapi (.istek-band), yalnizca renk paleti degisiyor.
   Turuncu/kirmizi zaten "Dizi iste" icin kullanildigi icin ikinci bir CTA
   ayni renkte olursa ikisi TEK bir eylem gibi okunur. Telegram'in kendi
   markasindaki mavi (#24A1DE→#0088CC) hem tanidik hem ayirt edici. */
.istek-band--tg{
  background:linear-gradient(100deg,#0088CC 0%,#24A1DE 62%,#54C2F0 100%);
  box-shadow:0 10px 30px rgba(0,136,204,.24);
}
.istek-band--tg:hover{box-shadow:0 14px 38px rgba(0,136,204,.32)}
.istek-band--tg .istek-dugme{color:#0088CC}


/* ══════════════════════════════════════════════════════════════
   DESKTOP THEME — dramaflix.cc tarzı masaüstü görünüm
   Sadece >=768px ekranları etkiler; mobil görünüm değişmez.
   premium.css'ten SONRA yüklenir, onu ezer.
══════════════════════════════════════════════════════════════ */

/* Yatay kaydırma çubuğunu kök seviyede engelle (sidebar padding taşması).
   NOT: sadece html'e uygulanır — body'ye overflow verirsek dikey scroll bozulur. */
html { overflow-x: hidden; }

/* Üstteki nav barı tamamen kaldırıldı — navigasyon sol sidebar'da (masaüstü)
   ve #mobileMenu yüzen butonuyla (mobil) sağlanıyor. Bıraktığı üst boşluğu da kes. */
.nav { display: none !important; }
@media (min-width: 1024px) {
  .page { padding-top: 0 !important; }
}

/* Mobilde hero poster kartı ve sidebar gizli */
@media (max-width: 767px) {
  .hero-poster-card { display: none; }
}
.sidebar { display: none; }

:root { --accent: var(--kor); }

@media (min-width: 768px) {

  /* ── NAV ─────────────────────────────────────────── */
  :root { --nav-h: 68px; }

  .nav {
    height: var(--nav-h);
    padding: 0 48px !important;
    gap: 28px;
    background: linear-gradient(to bottom, rgba(5,5,5,.92), rgba(5,5,5,.75));
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
  }
  .nav-logo { font-size: 1.7rem; }
  .nav-links { display: flex !important; gap: 6px; margin-right: 0; }
  .nav-link { font-size: 14.5px; padding: 8px 16px; }
  .nav-search {
    max-width: 340px;
    margin-left: auto;
  }
  .nav-search input { font-size: 14px; padding: 9px 16px; }
  .nav-icon-btn { padding: 8px 12px; }

  /* ── HERO — blur arka plan + sağda net poster kartı ── */
  /* ── HERO ────────────────────────────────────────────
     İçerik genişleyen ekranda dağılmasın diye 1240 px'lik bir ölçüye
     kilitleniyor, ama arka plan tam genişlikte kalıyor: `padding` yan
     boşluğu kendi hesaplıyor (`max(48px, (100% - 1240px) / 2)`), yani
     ayrı bir sarmalayıcı elemana gerek yok.
     Öncesinde `justify-content: center` + sabit `gap` vardı; 1650 px'lik
     ekranda metin ve poster ortada sıkışıp iki yanda geniş ölü alan
     bırakıyordu. Artık metin sola, poster sağa yaslı. */
  /* ⚠️ ORTADAKİ BOŞLUK.
     Eskiden `justify-content: space-between` + sabit genişlikler vardı:
     1240px'lik kolonda metin (max 620) + boşluk (64) + poster (300) = 984px
     yer kaplıyor, artan ~256px'in TAMAMI ortadaki boşluğa ekleniyordu —
     yani iki blok arasında ~320px ölü alan kalıyordu.
     Artık metin sütunu esneyip bu payı emiyor (`flex: 1 1 0`), poster de
     `margin-left:auto` ile sağda kalıyor. Boşluk `gap` kadar: tasarlanmış. */
  .hero {
    height: 520px;
    max-height: 520px;
    min-height: 440px;
    border-radius: 0 !important;
    box-shadow: none;
    display: flex;
    align-items: center;
    gap: 56px;
    /* ⚠️ GRUP ORTAYA YAKLAŞTIRILDI ama kenara da yapışmıyor. Kap 1240 → 1220:
       metin + poster içeriden başlıyor, aralarındaki ölü alan kalmıyor.
       Alt boşluk `max()` ile korunuyor, dar ekranda içerik kenara değmesin. */
    padding: 0 max(48px, calc((100% - 1220px) / 2));
  }
  .hero-bg {
    background-position: center 25%;
    filter: blur(34px) brightness(.32) saturate(1.35);
    transform: scale(1.18);
  }
  /* Posterden gelen rengin sola sızması + kenarlarda vinyet: düz siyah
     zemin yerine sahnenin kendi atmosferi. */
  .hero-shade {
    background:
      radial-gradient(120% 90% at 78% 45%, var(--kor-sonuk), transparent 58%),
      radial-gradient(90% 80% at 12% 60%, rgba(190,18,60,.13), transparent 62%),
      linear-gradient(to right, rgba(5,5,5,.92) 0%, rgba(5,5,5,.55) 48%, rgba(5,5,5,.72) 100%),
      linear-gradient(to top, #050505 0%, rgba(5,5,5,.15) 42%, transparent 70%);
  }
  .hero-body {
    position: relative; z-index: 2;
    /* Kalan genişliği emsin (yukarıdaki nota bak); yine de satır uzunluğu
       okunabilir kalsın diye 780px'te duruyor. */
    flex: 1 1 0;
    min-width: 0;
    max-width: 780px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0 !important;
    justify-content: center;
    align-items: flex-start;
  }
  .hero-poster-card {
    position: relative; z-index: 2;
    display: block;
    flex: 0 0 auto;
    margin-left: auto;          /* metin 780px'i doldurmasa da sağda kalsın */
    width: 320px;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 32px 70px -18px rgba(0,0,0,.85), 0 0 0 1px rgba(255,255,255,.10);
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
  }
  .hero-poster-card:hover {
    transform: translateY(-6px) scale(1.015);
    box-shadow: 0 40px 90px -20px rgba(0,0,0,.9), 0 0 0 1px var(--kor-cizgi);
  }
  /* Oran 2/3 → 3/4: afişlerin %83'ü 480×640 (3:4); 2/3 kutuda `cover`
     onları yanlardan ~%11 kırpıyordu. Kart ızgarasıyla da aynı oran. */
  .hero-poster-card img { width: 100%; display: block; aspect-ratio: 3/4; object-fit: cover; }
  .hpc-rozet {
    position: absolute; left: 12px; bottom: 12px;
    padding: 5px 11px; border-radius: 100px;
    background: rgba(8,8,10,.72);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.14);
    font-size: 11.5px; font-weight: 700; color: #fff; letter-spacing: .2px;
  }

  .hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    font-size: 11px; font-weight: 800; letter-spacing: 1.2px;
    padding: 6px 13px 6px 11px;
    border-radius: 100px;
    margin-bottom: 16px;
    background: var(--kor-sonuk);
    border: 1px solid var(--kor-cizgi);
    color: var(--kor-parlak);
  }
  .hero-badge::before {
    content: ''; width: 6px; height: 6px; border-radius: 50%;
    background: var(--kor); box-shadow: 0 0 8px rgba(249,115,22,.9);
  }
  .hero-title {
    font-size: clamp(38px, 4.2vw, 60px) !important;
    max-width: 100%;
    line-height: 1.04;
    margin-bottom: 14px;
    letter-spacing: -2px;
    text-shadow: 0 4px 30px rgba(0,0,0,.6);
  }

  /* Meta şeridi — başlıkla açıklama arasında "bu ne?" cevabı */
  .hero-meta {
    display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
    margin-bottom: 18px;
    font-size: 12.5px; font-weight: 600;
  }
  .hero-meta span {
    padding: 5px 11px; border-radius: 7px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.09);
    color: rgba(255,255,255,.78);
  }
  .hero-meta .hm-guclu { background: rgba(255,255,255,.12); color: #fff; font-weight: 700; }
  .hero-meta .hm-dub   { background: var(--kor-sonuk); border-color: var(--kor-cizgi); color: var(--kor-parlak); }

  .hero-desc {
    color: rgba(255,255,255,.62) !important;
    font-size: 15.5px !important;
    line-height: 1.62 !important;
    max-width: 520px !important;
    margin-bottom: 28px !important;
    text-shadow: 0 2px 12px rgba(0,0,0,.7);
  }

  /* ⚠️ RENKLİ PARILTI GÖLGELERİ KALDIRILDI.
     Birincil düğmede `box-shadow: 0 14px 34px -10px var(--kor-cizgi)`
     vardı: düğmenin altına 34px'lik turuncu bir hale yayıyordu. Hero'nun
     arka planı zaten bulanık ve turuncu tonlu olduğu için hale zeminle
     karışıp düğmenin kenarını eritiyordu — düğme "yüzen bir leke" gibi
     duruyordu. Düz dolgu, keskin kenar, gölge yok: sayfadaki en net şey
     birincil eylem olsun. */
  .hero-btns { gap: 12px; }
  .hero-btns .btn {
    font-size: 14px;
    padding: 15px 30px;
    border-radius: 11px;
    font-weight: var(--ag-vurgu);
    letter-spacing: 0;
  }
  .hero-btns .btn svg { width: 15px; height: 15px; fill: currentColor; }
  .hero-btns .btn-red:hover { transform: translateY(-1px); }
  .hero-btns .btn-dark {
    background: rgba(255,255,255,.06) !important;
    border: 1px solid rgba(255,255,255,.16) !important;
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  }
  .hero-btns .btn-dark:hover {
    background: rgba(255,255,255,.12) !important;
    border-color: rgba(255,255,255,.28) !important;
    transform: translateY(-1px);
  }

  /* ── SECTION ─────────────────────────────────────── */
  .page > .section,
  .section {
    max-width: 1400px !important;
    margin: 0 auto;
    padding: 0 48px 44px !important;
  }
  .section-head { padding: 40px 0 20px; gap: 20px; }
  .section-title {
    font-size: var(--yz-bolum) !important;
    font-weight: var(--ag-baslik);
    letter-spacing: -.03em;
  }
  .section-more, .section-count { font-size: 11px; }

  /* ── YATAY SIRALAR — büyük kartlar ───────────────── */
  .hrow {
    gap: 18px;
    padding: 6px 4px 22px;
    padding-right: 24px;
    scroll-padding-right: 24px;
    scroll-snap-type: none;
  }
  .card       { width: 178px !important; border-radius: 12px; }
  .card-wide  { width: 208px !important; }

  /* ── "Kaldığın Yerden Devam Et" kartları ──────────────────────────────
     16:9 poster olduğu için dikey (2:3) kartlarla aynı genişlikte kısa/küçük
     görünüyordu — kullanıcı "çok küçük" dedi. Masaüstünde belirgin şekilde
     büyütüyoruz; yükseklik 16:9'dan türediği için genişlik artınca kart da
     büyüyor ve satır göz hizasına geliyor. */
  .devam-kart { width: 340px !important; }

  .card-poster { border-radius: 12px; }

  /* ── HOVER ─────────────────────────────────────────────────────────
     ⚠️ ESKİDEN HOVER PRATİKTE ÖLÜYDÜ. premium.css afişi büyütüyordu
     (`scale(1.05)`), buradaki kural onu `transform: none !important` ile
     iptal ediyor ve geriye yalnızca 2px'lik turuncu bir çerçeve
     bırakıyordu. İki dosya birbiriyle kavga ediyor, kullanıcı da
     "hover effect yok" diyordu. İptal kuralı kalıyor (afiş büyütmesi
     komşu kartların üstüne taşıyor ve afişi kırpıyor) ama yerine gerçek
     bir geri bildirim geliyor.

     Hover'ın üç katmanı var, üçü de aynı anda ve aynı süreyle:
       1. afişin alt kenarında kor çizgi soldan sağa çizilir
          (style.css'teki `.card-poster::after` — imza öğesi),
       2. afiş hafifçe kalkar (2px — büyümez, sadece yaklaşır),
       3. oynat katmanı belirir.
     Hiçbiri renkli parıltı kullanmıyor. */
  .card:hover .card-poster,
  .card:hover .card-poster img { transform: none !important; }

  .card {
    transition: transform .35s var(--apple-spring, cubic-bezier(.16,1,.3,1)), box-shadow .35s ease;
    border-radius: 14px !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    touch-action: manipulation;
  }
  .card:active { transform: scale(0.97) !important; }
  .card:hover {
    transform: translateY(-5px) scale(1.025);
    box-shadow: none !important;
  }
  .card-poster {
    border-radius: 12px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
  }
  .card:hover .card-poster {
    box-shadow: 0 16px 36px -10px rgba(0,0,0,.85);
  }

  .card-info { padding: 12px 2px 4px; }
  .card-name, .card-title {
    font-size: 13.5px !important;
    font-weight: 500;
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
    letter-spacing: -.01em;
  }
  .card-sub { font-size: 10.5px; margin-top: 6px; }
  /* Afişin üstünde kalan tek pil (yatay şeritler ve "kaldığın yer").
     Biçim style.css'te tanımlı; burada yalnızca ölçek büyüyor. */
  .card-poster .ep-count, .card-ep {
    font-size: 10.5px;
    padding: 4px 8px;
    left: 10px; bottom: 10px;
  }
  .card-new { font-size: 10.5px; padding: 4px 8px; }

  .card-play-overlay, .card-overlay {
    opacity: 0;
    transition: opacity .25s ease;
  }
  .card:hover .card-play-overlay,
  .card:hover .card-overlay { opacity: 1; }
  .card-play-icon { width: 46px; height: 46px; }

  /* ── Yatay sıra kaydırma okları ──────────────────────────────────────
     ⚠️ OKLAR VARDI AMA GÖRÜNMÜYORDU: `opacity: 0` ile başlayıp yalnızca
     `.hrow-wrap:hover` ile açılıyorlardı. Bulunması için üzerine gelmek
     gerekiyor, üzerine gelmek için de var olduğunu bilmek gerekiyor —
     kullanıcı haklı olarak "sağ sol kaydırma düğmesi yok" dedi.
     Artık DURAĞAN HÂLDE DE GÖRÜNÜYORLAR (sönük), üzerine gelince
     belirginleşiyorlar. Kaydırılacak yer kalmayınca `.off` ile tamamen
     kayboluyorlar (app.js hesaplıyor) — yani ok varsa gerçekten iş yapar. */
  .hrow-wrap { position: relative; }
  .hrow-nav {
    position: absolute; top: 0; bottom: 60px; width: 46px;
    display: flex; align-items: center; justify-content: center;
    border: none; cursor: pointer; z-index: 6;
    padding: 0;
    background: none;
    opacity: .85;
    transition: opacity var(--sure) ease;
  }
  /* Yuvarlak kap — ok simgesi içinde SVG olarak geliyor (bkz. app.js).
     Karakter tabanlı ❮/❯ yazı tipine göre boyut ve dikey hizada
     kayıyordu; SVG her tarayıcıda aynı. */
  .hrow-nav-ic {
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: rgba(8,8,10,.82);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    border: 1px solid var(--cizgi);
    color: var(--metin);
    transition: background var(--sure) ease, border-color var(--sure) ease,
                color var(--sure) ease, transform var(--sure) var(--egri);
  }
  .hrow-nav-ic svg {
    width: 15px; height: 15px;
    fill: none; stroke: currentColor;
    stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round;
    display: block;
  }
  .hrow-nav.prev { left: -10px; background: linear-gradient(to right, rgba(8,8,10,.9), transparent); border-radius: 12px 0 0 12px; }
  .hrow-nav.next { right: -10px; background: linear-gradient(to left,  rgba(8,8,10,.9), transparent); border-radius: 0 12px 12px 0; }

  .hrow-nav:hover { opacity: 1; }
  .hrow-nav:hover .hrow-nav-ic {
    background: var(--kor); border-color: var(--kor); color: #fff;
  }
  .hrow-nav:active .hrow-nav-ic { transform: scale(.94); }
  .hrow-nav:focus-visible .hrow-nav-ic { outline: 2px solid var(--kor); outline-offset: 2px; }
  .hrow-nav.off { opacity: 0 !important; pointer-events: none; }

  /* ── GRID ────────────────────────────────────────── */
  .grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)) !important;
    gap: 24px 16px !important;
  }
  .card-grid { width: 100% !important; }
  .card-grid .card-info { padding: 12px 4px 6px; }

  /* ── ALT NAV / TAB BAR ───────────────────────────── */
  .bnav { display: none !important; }
  .tab-bar-bottom {
    position: static;
    background: none;
    border: none;
    backdrop-filter: none;
    max-width: 1400px;
    margin: 0 auto;
    justify-content: center;
    gap: 14px;
    padding: 10px 48px 40px;
  }
  .tbb-item {
    flex-direction: row;
    gap: 8px;
    font-size: 15px;
    background: #161616;
    border: 1px solid #262626;
    border-radius: 24px;
    padding: 9px 22px;
    min-width: 0;
    transition: border-color .2s, color .2s;
  }
  .tbb-item span { font-size: 13px; font-weight: 600; }
  .tbb-item:hover { border-color: var(--cizgi-2); color: var(--metin); }
  .tbb-item.on { border-color: var(--accent); background: var(--kor-sonuk); }
  body:has(.tab-bar-bottom) .page { padding-bottom: 0; }

  /* ── SAYFALAMA ───────────────────────────────────── */
  .pages { padding: 30px 12px; gap: 8px; }
  .pages a, .pages span { font-size: 14px; min-width: 42px; padding: 9px 14px; }
  .pages a:hover { border-color: var(--accent); color: #fff; }

  /* ── DETAY SAYFASI ───────────────────────────────── */
  .detail-inner {
    max-width: 1400px;
    margin: 0 auto;
    padding: 40px 48px;
    min-height: 340px;
    gap: 32px;
  }
  .detail-poster { width: 200px !important; border-radius: 12px; }
  .detail-title { font-size: 34px !important; margin-bottom: 14px; }
  .tag { font-size: 12px; padding: 5px 13px; }
  .detail-desc {
    max-width: 1400px;
    margin: 0 auto;
    font-size: 15px;
    padding: 24px 48px;
    color: #999;
  }
  .ep-wrap { max-width: 1400px; margin: 0 auto; padding: 24px 48px 40px; }

  /* ── Bölüm butonları ── */
  .ep-grid { gap: 12px; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)) !important; }
  .ep-btn {
    font-size: 15px;
    border-radius: 12px;
    background: #161616;
    border: 1px solid #262626;
    transition: all .18s ease;
  }
  .ep-btn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    box-shadow: 0 4px 18px var(--kor-cizgi);
    transform: translateY(-2px);
  }

  /* Ana sayfa dil/filtre butonları */
  .tabs .btn-dark {
    background: #161616;
    border: 1px solid #2a2a2a;
    border-radius: 22px;
    transition: all .18s;
  }
  .tabs .btn-dark:hover {
    border-color: var(--accent);
    background: var(--kor-sonuk);
    transform: none;
  }

  /* ── FOOTER ──────────────────────────────────────── */
  footer {
    padding: 40px 48px 48px;
    font-size: 13px;
    color: #555;
    margin-bottom: 0 !important;
  }
}

/* ── Daha geniş ekranlar ── */
@media (min-width: 1440px) {
  .section, .page > .section { max-width: 1560px !important; padding: 0 60px 52px !important; }
  .nav { padding: 0 60px !important; }
  /* ⚠️ GENİŞ EKRANDA ORTADAKİ ÖLÜ BOŞLUK.
     Önceki deneme kapsayıcıyı 1360px'e genişletmişti, ama metin 660px'e
     sabit kaldığı için sorun sürdü: 1360 − 660 − 56(gap) − 320(poster)
     = ~324px artıyor ve posterin `margin-left:auto`'suna gidip iki blok
     arasında ölü alan bırakıyordu (ölçüldü: 1660px ekranda 290px).
     Çözüm üç ölçüyü birbirine oturtmak: kapsayıcı 1240, metin 780,
     poster 380 → 780 + 56 + 380 = 1216, yani artan ~24px. Metin satırı
     780px'te okunabilir kalıyor, poster de büyüyerek sahneyi dolduruyor. */
  /* Ölçü 1440'a açıldı: grup sola yaslı olduğu için sol boşluk bu kadar
     daralıyor ("sola yaklaştır"). Metin 780 + gap 56 + poster 380 = 1216. */
  /* Grup biraz sola alındı ve metinle poster arasındaki boşluk kapatıldı:
     kap 1100 → 1220, metin 660 → 780. Metin sütunu genişleyince aradaki
     ölü alan poster hizasına kadar doluyor (720 + gap 56 + poster 380 ≈ 1216).
     Nokta ve ok konumları AYNI ölçüyü kullanmalı, yoksa metinden kayarlar. */
  .hero { padding: 0 max(72px, calc((100% - 1220px) / 2)); }
  .hero-poster-card { width: 380px; }
  .hero-body { max-width: 780px; }
  .hero-dots { left: max(72px, calc((100% - 1220px) / 2)); }
  /* ⚠️ OKLAR YAN BOŞLUĞUN TAM ORTASINDA. Eskiden "içerik başı − 56px" ile
     konumlanıyordu; bu onları metne yapıştırıp boşluğun solunu boş bırakıyordu.
     Şimdi boşluk ikiye bölünüyor: yarısı − düğmenin yarısı (46/2 = 23). */
  .hero-nav.prev { left:  calc(max(72px, (100% - 1220px) / 2) / 2 - 23px); }
  .hero-nav.next { right: calc(max(72px, (100% - 1220px) / 2) / 2 - 23px); }
  .card { width: 196px !important; }
  .card-wide { width: 228px !important; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)) !important; gap: 28px 20px !important; }
  .detail-inner, .detail-desc, .ep-wrap { max-width: 1560px; }
}

@media (min-width: 1920px) {
  .section, .page > .section { max-width: 1800px !important; }
  /* Çok geniş ekranda kap 1520 → 1240: grup ortada kalsın, iki yana yayılmasın. */
  .hero { height: 560px; max-height: 560px; padding: 0 max(80px, calc((100% - 1240px) / 2)); }
  .hero-poster-card { width: 350px; }
  .hero-body { max-width: 700px; }
  .hero-dots { left: max(80px, calc((100% - 1240px) / 2)); }
  /* Oklar yan boşluğun ortasında — yukarıdaki nota bak. */
  .hero-nav.prev { left:  calc(max(80px, (100% - 1240px) / 2) / 2 - 23px); }
  .hero-nav.next { right: calc(max(80px, (100% - 1240px) / 2) / 2 - 23px); }
  .card { width: 216px !important; }
  .card-wide { width: 248px !important; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important; gap: 32px 24px !important; }
}

/* ══════════════════════════════════════════
   SOL SIDEBAR (sadece masaüstü)
══════════════════════════════════════════ */
@media (min-width: 1024px) {
  /* PC'de sidebar hep açık → kapatma (✕) butonu gereksiz, gizle */
  .sb-close { display: none !important; }

  #mobileMenu { display: none !important; }
  .sidebar {
    display: flex !important; flex-direction: column !important;
    position: fixed !important; top: 0; left: 0 !important; bottom: 0; z-index: 400;
    width: 260px !important;
    background: #0b0b0b;
    border-right: 1px solid #1a1a1a;
    padding: 24px 18px 20px;
    /* ⚠️ `overflow-y: auto` İDİ — PC'DE ÇUBUĞUN TAMAMI KAYIYORDU.
       ÖLÇÜLDÜ (2026-08-07, girişli kullanıcı): kenar çubuğunun içeriği 906px,
       yani 1366×768'de 138px TAŞIYOR. Sonuç: kenar çubuğunda kaydırma çubuğu
       çıkıyor ve "Çıkış Yap" 824-866 aralığında — 768px'lik ekranın DIŞINDA
       kalıyor, kullanıcı kaydırmadan göremiyor.
       Doğrusu mobilde zaten kullanılan drawer deseni: DIŞ kutu hiç kaymaz,
       yalnızca menü listesi kendi içinde kayar, alt bölge dibe sabit kalır.
       Aşağıdaki iki kural bunu tamamlıyor. */
    overflow: hidden;
  }

  /* Kaydırılan TEK bölge: menü listesi.
     `flex: 0 1 auto` KORUNUYOR (büyümesin — büyürse altındaki "Uygulamayı
     Yükle" kartı listeden kopup dibe itiliyor; bkz. .sb-nav tanımındaki not).
     `min-height: 0` ŞART: flex öğesi varsayılan olarak içeriğinden küçülmez,
     o yüzden `overflow` hiç devreye girmez ve liste yine taşardı. */
  .sb-nav { min-height: 0; overflow-y: auto; }

  /* Alt bölge dibe sabit — artan boşluk buraya toplanıyor, yani "aşağıda
     boşluk kalırsa en alta insin".
     ⚠️ BU KURAL EKSİKTİ: desktop.css'te yalnızca YORUM olarak geçiyordu
     ("`.sb-alt { margin-top: auto }` zaten dibe topluyor"), gerçek bildirim
     hiçbir yerde yoktu. */
  .sb-alt { margin-top: auto; flex-shrink: 0; }
  /* İçeriği sidebar kadar kaydır */
  body { padding-left: 260px !important; }
  .nav { left: 260px !important; width: calc(100% - 260px) !important; justify-content: center !important; }
  .nav-links { display: none !important; }
  .nav-logo { display: none !important; }
  /* ⚠️ AÇILIP KAPANAN ARAMA KUTUSU KALDIRILDI. Kutu 280px duruyor, üzerine
     gelince 0,4 sn'lik geçişle 500px'e büyüyordu — imleç yanından geçerken
     bile genişleyip yanındaki her şeyi ittiği için sayfa oynuyordu ve
     "küçükken büyüyor" olarak görünüyordu. Tek ve kararlı genişlik. */
  .nav-search {
    margin: 0 auto !important;
    max-width: 500px !important;
  }
}

/* ── Sol menü (sidebar) ───────────────────────────────────────────────
   Tasarım kararları:
   • Arama EN ÜSTTE (logo altında). Eskiden menü öğelerinin altındaydı ve
     altında ~300px ölü boşluk kalıyordu.
   • Öğeler anlamlı gruplara ayrıldı (Keşfet / Kitaplığım / Daha Fazla);
     6 öğe aynı görsel ağırlıkta sıralanınca hiyerarşi hissi yoktu.
   • Uygulama bağlantısı menüden çıkıp alta KART oldu — listede yeşil büyük
     harfle durup sistemden kopuk görünüyordu.
   • Ölçüler dokunma hedefine göre: satır yüksekliği ≥44px.               */

/* Kapat (✕) — yalnızca sidebar'ın açılır olduğu genişliklerde görünür.
   Stili eskiden HTML'de inline duruyordu; buraya taşındı. */
.sb-close {
  flex-shrink: 0;
  width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.08);
  border: none; border-radius: 50%;
  color: rgba(255,255,255,.65);
  font-size: 17px; line-height: 1; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s, color .2s;
}
.sb-close:hover { background: rgba(255,255,255,.14); color: #fff; }

.sb-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 2px 6px 16px; flex-shrink: 0;
}
.sb-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.25rem; font-weight: 900;
  letter-spacing: -.4px; text-transform: uppercase;
  text-decoration: none; min-width: 0;
}
.sb-logo-ikon { width: 32px; height: 32px; flex-shrink: 0; }
.sb-logo-yazi {
  background: linear-gradient(90deg, var(--kor), var(--kor));
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Arama — odak durumu belirgin: sınır accent'e döner, hafif halka çıkar */
.sb-ara {
  display: flex; align-items: center; gap: 8px;
  margin: 0 6px 18px; padding: 0 12px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  transition: border-color .2s, background .2s, box-shadow .2s;
  flex-shrink: 0;
}
.sb-ara:focus-within {
  border-color: var(--kor-cizgi);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px var(--kor-sonuk);
}
.sb-ara svg {
  width: 17px; height: 17px; flex-shrink: 0;
  stroke: rgba(255,255,255,.42); fill: none;
  stroke-width: 2; stroke-linecap: round;
  transition: stroke .2s;
}
.sb-ara:focus-within svg { stroke: var(--accent); }
/* ⚠️ Bu blok bir MEDYA SORGUSU İÇİNDE DEĞİL (yukarıdaki 1024px bloğu daha
   önce kapanıyor), yani mobilde de geçerli ve sonra yüklendiği için
   layout.php'deki dar ekran kuralını eziyordu. 16px ALTI yazı tipi iOS'ta
   odaklanınca sayfayı yakınlaştırıyor — "arama alanı büyüyor" buydu.
   Değeri 16px yaptık: her iki ölçüde de doğru, ezme sorunu da kalkıyor. */
.sb-ara input {
  flex: 1; min-width: 0;
  background: none; border: none; outline: none;
  color: #fff; font-size: 16px; padding: 12px 0;
}
.sb-ara input::placeholder { color: rgba(255,255,255,.35); }
.sb-ara input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* `flex: 1` tüm artan alanı menüye veriyordu; altındaki "Uygulamayı Yükle"
   kartı bu yüzden menüden kopup sidebar'ın dibine itiliyordu. `0 1 auto`
   ile menü kendi boyunda kalıyor, kart hemen listenin altında duruyor —
   boşluğu `.sb-alt { margin-top: auto }` zaten dibe topluyor. */
.sb-nav { flex: 0 1 auto; display: flex; flex-direction: column; gap: 2px; padding: 0 6px; }

/* Grup başlığı — ilk grup üstten pay almasın */
.sb-ayrac {
  font-size: 10.5px; font-weight: 800; letter-spacing: 1.3px;
  text-transform: uppercase; color: rgba(255,255,255,.28);
  padding: 18px 12px 7px;
}
.sb-ayrac:first-child { padding-top: 2px; }

.sb-item {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  padding: 11px 12px; border-radius: 10px;
  font-size: 14.5px; font-weight: 500;
  color: rgba(255,255,255,.62);
  text-decoration: none;
  transition: color .18s, background .18s;
}
.sb-item svg {
  width: 20px; height: 20px; flex-shrink: 0;
  stroke: currentColor; fill: none;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.sb-item:hover { color: #fff; background: rgba(255,255,255,.055); }
.sb-item:hover svg { transform: scale(1.08); }
.sb-item:focus-visible {
  outline: 2px solid var(--kor-cizgi); outline-offset: 1px; color: #fff;
}

/* Aktif: sol tarafta accent şerit (pseudo-element ile — border-left kullanmak
   satırı 3px kaydırıp diğerleriyle hizasını bozuyordu) */
.sb-item.on {
  color: #fff; font-weight: 700;
  background: linear-gradient(90deg, var(--kor-sonuk), rgba(249,115,22,0) 85%);
}
.sb-item.on::before {
  content: ''; position: absolute; left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 20px; border-radius: 0 3px 3px 0;
  background: var(--accent);
}
.sb-item.on svg { color: var(--accent); }

.sb-vip { color: rgba(255,215,0,.78); }
.sb-vip:hover { color: #ffd700; background: rgba(255,200,0,.08); }
.sb-vip.on { color: #ffd700; background: linear-gradient(90deg, rgba(255,200,0,.16), rgba(255,200,0,0) 85%); }
.sb-vip.on::before { background: #ffd700; }
.sb-vip.on svg { color: #ffd700; }

.sb-admin { color: rgba(255,255,255,.5); }
.sb-admin:hover { color: #fff; }

/* Uygulama kartı — menü öğesi değil, çağrı-eylem */
.sb-promo {
  display: flex; align-items: center; gap: 12px;
  margin: 14px 6px 0; padding: 12px;
  border-radius: 12px; text-decoration: none;
  background: linear-gradient(135deg, var(--kor-sonuk), rgba(255,45,32,.07));
  border: 1px solid var(--kor-sonuk);
  transition: border-color .2s, transform .2s, box-shadow .2s;
  flex-shrink: 0;
}
.sb-promo:hover {
  border-color: rgba(249,115,22,.45);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px var(--kor-sonuk);
}
.sb-promo svg {
  width: 22px; height: 22px; flex-shrink: 0;
  stroke: var(--accent); fill: none;
  stroke-width: 1.8; stroke-linecap: round;
}
.sb-promo span { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sb-promo b { font-size: 13.5px; font-weight: 700; color: #fff; }
.sb-promo small { font-size: 11px; color: rgba(255,255,255,.5); line-height: 1.3; }

/* Yatay boşluk 6px: arama kutusu (.sb-ara), menü (.sb-nav) ve tanıtım kartı
   (.sb-promo) hep 6px kullanıyor. Burası 10px'ti, yani hesap kartı ve çıkış
   düğmesi üstündeki her şeyden 4px içeride duruyor ve kenar hizası kırılıyordu. */
.sb-alt { flex-shrink: 0; padding: 20px 6px; border-top: 1px solid rgba(255,255,255,.05); display: flex; flex-direction: column; gap: 10px; }
.sb-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px;
  font-size: 14px; font-weight: 600;
  transition: all .2s;
}
/* ⚠️ KAYIT DÜĞMESİ turuncudan SARIYA giden bir eğimdi (+ parıltı gölgesi).
   Sarı uç menüdeki hiçbir şeyle ilişkili değildi ve düğmeyi bir uyarı
   şeridi gibi gösteriyordu. Düz kor: menüdeki tek dolu renk, tek eylem. */
.sb-giris { background: var(--yuzey); color: var(--metin-orta); border: 1px solid var(--cizgi); }
.sb-giris:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); color: var(--metin); }
.sb-kayit { background: var(--kor); color: #fff; }
.sb-kayit:hover { background: var(--kor-parlak); }
/* #be123c koyu bir bordo: #0b0b0b zeminde okunaklı değildi (menüdeki en sönük
   metin buydu). Aynı kırmızı ailesinden ama zeminden gerçekten ayrılan bir ton. */
.sb-cikis { background: transparent; color: #f87171; font-size: 13px; padding: 10px; border: 1px solid rgba(248,113,113,.22); }
.sb-cikis:hover { background: rgba(248,113,113,.10); border-color: rgba(248,113,113,.45); color: #fca5a5; }
.sb-hesap {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.05);
  transition: all .2s;
}
.sb-hesap:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.1); }
.sb-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--kor);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.sb-avatar img, .sb-avatar-img {
  width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block;
}
.sb-hesap-bilgi { min-width: 0; display: flex; flex-direction: column; }
.sb-hesap-bilgi b { font-size: 14px; font-weight: 600; color: #eee; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-hesap-bilgi small { font-size: 12px; color: rgba(255,255,255,.5); margin-top: 2px; }


/* ══════════════════════════════════════════
   YENİ DİZİ DETAY SAYFASI (Masaüstü & PC)
══════════════════════════════════════════ */
@media (min-width: 1024px) and (min-height: 601px), (min-width: 768px) and (min-height: 601px) {
  .dizi-page {
    background: #000 !important;
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: clamp(16px, 3vh, 32px) clamp(20px, 4vw, 60px) !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .dizi-container {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    height: 100% !important;
    max-height: calc(100vh - 48px) !important;
    padding: 0 !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
    position: relative !important;
  }
  .dizi-left {
    flex: 0 0 auto !important;
    height: 100% !important;
    max-height: calc(100vh - 48px) !important;
    aspect-ratio: 9 / 16 !important;
    width: auto !important;
    max-width: min(480px, calc((100vh - 48px) * 9 / 16)) !important;
    border-radius: 22px !important;
    overflow: hidden !important;
    background: #000 !important;
    position: relative !important;
    border: 1px solid #1c1c1c !important;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.9) !important;
    margin: auto !important;
  }
  .episodes-panel {
    position: absolute !important;
    bottom: 0 !important;
    left: 50% !important;
    transform: translate3d(-50%, 100%, 0) !important;
    width: 100% !important;
    max-width: min(480px, calc((100vh - 48px) * 9 / 16)) !important;
    height: 72% !important;
    max-height: 78% !important;
    background: #111 !important;
    -webkit-backdrop-filter: blur(24px) !important;
    backdrop-filter: blur(24px) !important;
    border-radius: 22px 22px 0 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    border: 1px solid #222 !important;
    border-bottom: none !important;
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.9) !important;
    transition: transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    display: none !important;
    flex-direction: column !important;
    z-index: 200 !important;
    scrollbar-width: thin !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .episodes-panel.open {
    display: flex !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translate3d(-50%, 0, 0) !important;
  }
  /* Sadece ESKİ yan paneli gizle; episodes-panel ile aynı element ise gizleme
     (yoksa Bölümler paneli PC'de hiç açılmaz). */
  .dizi-right:not(.episodes-panel) {
    display: none !important;
  }
}
.dizi-right-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 16px 0;
  background: transparent;
  position: relative;
  z-index: 10;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: 16px;
}
.dizi-right-header h2 {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
  color: #fff;
  letter-spacing: -0.3px;
}
.dbox {
  background: transparent;
  padding: 0;
}
.dbox-header {
  display: flex;
  gap: 14px;
  margin-bottom: 16px;
}
.dbox-thumb {
  width: 60px;
  height: 80px;
  border-radius: 6px;
  object-fit: cover;
}
.dbox-info h1 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
  line-height: 1.2;
}
.dbox-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
}
.dbox-tags span {
  font-size: 10px;
  font-weight: 800;
  padding: 3px 6px;
  border-radius: 4px;
}
.tag-red { background: var(--kor); color: #fff; }
.tag-green { background: transparent; border: 1px solid rgba(74,222,128,.4); color: #4ade80; }
/* Dizi sayfasındaki dublaj/altyazı etiketi. Renkler kart rozetleriyle aynı
   (.kr-dub) — aynı bilgi iki yerde farklı renkte görünmesin. */
.tag-dub { background: #2563eb; color: #fff; }
.tag-sub { background: #334155; color: #cbd5e1; }
.dbox-epcount {
  font-size: 11px;
  color: #777;
}
/* ⚠️ 2026-08-20: uc dugme `flex:1` ile esit bolunuyor, "Begen (0)" ve
   "Listeye Ekle" metinleri dar ekranda sigmayip iki satira kiriliyordu
   (kullanici ekran goruntusu: yazilar alt alta tasiyor). Yeni kural:
     - Begen / Listem esnek (flex:1 1 0) ama min-width:0 ile kisilabilir
     - Paylas sagda SABIT genislikte (flex:0 0 auto) -- istenen konum
     - Butun metinler nowrap; tasma ellipsis ile kesilir, satir kirilmaz */
.dbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
  align-items: stretch;
}
.dbtn {
  flex: 1 1 0;
  min-width: 0;
  padding: 12px 10px;
  border: none;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.15;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  white-space: nowrap;
  overflow: hidden;
  /* İkonlu düğmelerde simge ve yazı tek satırda ortalansın */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background .18s ease, color .18s ease, transform .12s ease;
}
.dbtn:active { transform: scale(.97); }
/* "Devam Et" JS ile 4. buton olarak eklenince (dizi.php ~satır 1042)
   diger 3 buton (Begen/Listem/Paylas) ile AYNI satira flex-esit sikisiyordu
   -- inline width:100% flex:1 1 0 yuzunden etkisizdi, flex-wrap da yoktu.
   Bu kural .dbtn'DEN SONRA gelmeli: ikisi de tek-sinif secici (esit
   ozguluk), .dbtn daha once tanimlaninca flex:1 1 0 bunu eziyordu --
   ilk denemede TAM BU YUZDEN calismadi. Sinif satiri tek basina
   kaplayip alta duser. */
.dbtn-tam-satir {
  flex: 1 1 100%;
  width: 100%;
}

/* Yazi kisilabilsin, ikon ve sayi asla kisilmesin */
.dbtn-yazi {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dbtn-say {
  flex: 0 0 auto;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.55);
  font-weight: 600;
}

/* Paylas SAGDA sabit dursun -- esnemesin, kisilmasin */
#btnPaylas {
  flex: 0 0 auto;
  padding-inline: 15px;
}

/* Begenilmis / listede durumlari (innerHTML yerine sinif ile) */
.dbtn.begenildi { color: #ff5a1f; }
.dbtn.begenildi .dbtn-ik { fill: #ff5a1f; }
.dbtn.begenildi .dbtn-say { color: rgba(255,90,31,.8); }
.dbtn.listede { color: #999; }
.dbtn.listede .dbtn-ik { fill: var(--kor, #ff5a1f); }

/* Cok dar ekranda (<=380px) yazilari gizle, ikonlar kalsin */
@media (max-width: 380px) {
  .dbtn { padding: 12px 8px; gap: 5px; }
  .dbtn-yazi { display: none; }
  #btnPaylas { padding-inline: 13px; }
}
/* "Devam Et" düğmesindeki oynat simgesi (▶ karakterinin yerine SVG) */
.dbtn-ik {
  width: 15px; height: 15px; flex: 0 0 15px;
  fill: currentColor; display: block;
  transition: fill .18s ease;
}
.dbtn-dark {
  background: #262626;
  color: #fff;
  border: 1px solid rgba(255,255,255,.14);
}
.dbtn-dark:hover { background: #333; }
.dbtn-dark:active { background: #3a3a3a; }
.dbtn-red {
  background: var(--kor);
  color: #fff;
}
.dbox-tabs {
  display: flex;
  border-bottom: 1px solid #222;
  margin-bottom: 16px;
}
.dtab {
  flex: 1;
  text-align: center;
  padding: 12px;
  font-size: 12px;
  font-weight: 700;
  color: #666;
  cursor: pointer;
  position: relative;
}
.dtab.on {
  color: var(--kor);
}
.dtab.on::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--kor);
}
/* ⚠️ BOLUM SEKMELERI TASINCA KESILIYORDU.
   Satir salt `display:flex` idi: ne sarma ne kaydirma vardi, sigmayan
   sekmeler gorunmez oluyordu. 310 bolumluk dizide 13 sekme uretiliyor
   ama ekrana yalnizca 5 tanesi sigiyor -> kullanici en fazla 125. bolume
   ulasabiliyordu (5 x 25). Artik satir yatay kayiyor; dokunmatikte
   parmakla surukleniyor, sekme sinirlarina yapisiyor. */
.dbox-subtabs {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #2b2b2b transparent;
  padding-bottom: 4px;
}
.dbox-subtabs::-webkit-scrollbar { height: 5px; }
.dbox-subtabs::-webkit-scrollbar-thumb { background: #2b2b2b; border-radius: 99px; }
.dbox-subtabs .dstab {
  flex: 0 0 auto;
  scroll-snap-align: start;
  white-space: nowrap;
}
.dstab {
  background: #1a1a1a;
  color: #888;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.dstab.on {
  background: var(--kor);
  color: #fff;
}
.dbox-epgrid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.dep-btn {
  background: #1a1a1a;
  color: #999;
  font-size: 13px;
  font-weight: 600;
  padding: 14px 0;
  text-align: center;
  border-radius: 6px;
}
.dep-btn:hover {
  background: #2a2a2a;
  color: #fff;
}
.sb-platform {
  border: 1px solid #333;
  border-radius: 8px;
  padding: 8px 12px;
  margin: 0 16px 16px 16px;
  display: flex;
  flex-direction: column;
}
.sb-platform small {
  color: #777;
  font-size: 10px;
  margin-bottom: 4px;
}
.sb-platform select {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 14px;
  outline: none;
  width: 100%;
}
@media (max-width: 1023px), (max-height: 600px), (orientation: landscape) and (max-height: 650px) {
  .dizi-container { flex-direction: column; }
  .dizi-left { width: 100%; max-width: none; margin: 0; position: fixed; inset: 0; height: 100dvh !important; z-index: 50; border-radius: 0; aspect-ratio: auto !important; max-height: none !important; border: none !important; }
  .dizi-right:not(.episodes-panel) { display: none !important; }
  .dizi-right, .episodes-panel {
    position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important; top: auto !important;
    transform: translate3d(0, 100%, 0) !important;
    width: 100% !important; max-height: 78vh !important; height: 72vh !important;
    border-radius: 20px 20px 0 0 !important;
    z-index: 200 !important;
    opacity: 1 !important; visibility: visible !important;
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
  }
  .episodes-panel:not(.open) {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  .episodes-panel {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    background: #111 !important;
    overscroll-behavior-y: contain;
  }
  .dizi-right.open, .episodes-panel.open {
    display: flex !important;
    visibility: visible !important;
    transform: translate3d(0, 0, 0) !important;
    pointer-events: auto !important;
  }
}


/* ══ PC'DE DAR YÜKSEKLİKTE SIĞDIRMA ═══════════════════════════════════════
   ÖLÇÜLDÜ (2026-08-07, girişli kullanıcı): kenar çubuğunun içeriği 906px.
   1366×768 ve 1440×900 gibi yaygın dizüstü ekranlarında bu taşıyor; dış
   kaydırmayı kaldırmak tek başına yetmedi, menü maddeleri (Uygulama, Dizi
   İste, Duyurular) bu sefer listenin İÇ kaydırmasının arkasında kaldı.
   Kaydırmayı gerçekten yok etmek için YER AÇMAK gerekiyor:

     1) "Uygulamayı Yükle" kartı ~77px (63 + 14 üst boşluk) ve aynı bağlantı
        hemen üstündeki "Uygulama" menü maddesinde zaten var. Mobilde tam bu
        gerekçeyle gizleniyor; dar masaüstünde de geçerli.
     2) Bölüm başlıkları, menü maddeleri ve alt bölge dikey payları mobildeki
        sıkı ölçülere çekiliyor. Görsel dil AYNI kalıyor — yazı ve ikon
        boyutlarına dokunulmuyor, yalnızca boşluk azalıyor.

   ⚠️ BLOK DOSYANIN SONUNDA OLMALI. İlk denemede kurallar `.sidebar`
   tanımının yanına (satır ~550) konmuştu ve HİÇ uygulanmadı: temel
   `.sb-item`/`.sb-ayrac` tanımları dosyada DAHA SONRA (satır 693+) geliyor
   ve eşit özgüllükte sonraki kural kazanıyor. Ölçüm bunu açıkça gösterdi —
   menü içeriği 462px'te sabit kalmıştı.

   Eşik 900px: üstündeki ekranlarda içerik zaten sığıyor, orada ferah
   ölçüler duruyor. */
@media (min-width: 1024px) and (max-height: 900px) {
  .sb-promo { display: none; }
  .sb-ayrac { padding: 12px 6px 6px; }
  .sb-item  { padding: 9px 12px; }
  .sb-alt   { padding: 14px 6px 0; }
}

/* ── KISA EKRAN + YÖNETİCİ: İKİNCİ SIKIŞTIRMA KADEMESİ ───────────────────
   ⚠️ 900px KADEMESİ YÖNETİCİYE YETMİYORDU. Yönetici menüsünde fazladan bir
   madde var ("Admin Paneli"), yani liste bir satır daha uzun.
   ÖLÇÜLDÜ (2026-08-07, 1366px genişlik, yönetici yapısı taklit edilerek):
       ekran 900px → içerik 455 / alan 455   (tam sınırda, pay YOK)
       ekran 768px → içerik 455 / alan 455   (tam sınırda, pay YOK)
       ekran 720px → içerik 455 / alan 433   → 22px taşma, kaydırma çubuğu
   Yani 768px'te teknik olarak sığıyor ama payı sıfır: tarayıcının yer imi
   çubuğu, indirme şeridi ya da %110 yakınlaştırma anında taşırıyor.
   Kullanıcının gördüğü "sığmıyor, kaydırma geliyor" bu sıfır pay.

   Bu kademe yalnızca boşlukları kısıyor — yazı ve ikon boyutlarına
   DOKUNMUYOR, görsel dil aynı kalıyor. Kazanç ölçüldü: ~58px.

   ⚠️ DOSYANIN SONUNDA DURMALI. Temel `.sb-item`/`.sb-ayrac` tanımları bu
   dosyada daha SONRA geliyor ve eşit özgüllükte sonraki kural kazanıyor;
   blok yukarı taşınırsa sessizce etkisiz kalır (bir kez yaşandı). */
@media (min-width: 1024px) and (max-height: 830px) {
  .sb-ayrac { padding: 8px 6px 4px; }
  .sb-item  { padding: 7px 12px; }
  .sb-alt   { padding: 12px 6px 0; gap: 8px; }
  .sb-nav   { padding-bottom: 4px; }
}

/* ── ÇOK KISA EKRAN: BÖLÜM BAŞLIKLARI GİZLENİR ───────────────────────────
   ⚠️ ASIL SORUNLU ARALIK BURASI. 1366×768 bir dizüstünde görev çubuğu,
   tarayıcı sekmeleri, adres çubuğu ve yer imi şeridi düşünce tarayıcının
   GERÇEK görünür yüksekliği ~640-680px'e iniyor — "768px ekran"da bile.
   ÖLÇÜLDÜ (2026-08-07, yönetici yapısıyla, önceki kademe uygulanmış hâlde):
       720px → sığıyor
       680px → 12px taşma
       640px → 52px taşma
   Yani bir önceki kademe yönetici için yetmiyor.

   Burada boşluk kısmak bitti; sıradaki en ucuz şey bölüm BAŞLIKLARI
   ("Keşfet", "Kitaplığım", "Daha Fazla"). Bunlar dekoratif etiket — hiçbir
   tıklanabilir öğe kaybolmuyor, menünün tamamı erişilebilir kalıyor.
   Kazanç: 3 başlık × ~24px ≈ 72px, ölçülen en kötü taşmanın (52px) üstünde.

   Ekran daha da uzarsa başlıklar kendiliğinden geri geliyor. */
@media (min-width: 1024px) and (max-height: 700px) {
  .sb-ayrac { display: none; }
  .sb-nav   { padding-top: 4px; }
  .sb-item  { padding: 6px 12px; }
}


/* ═══════════════════════════════════════════════════════════════════════
 * ⚠️ TAM GENISLIK (2026-08-22) — "PC'de diziler tam uzun degil".
 *
 * SORUN: sol menu `body { padding-left: 260px }` ile yer kapliyor ama
 * `.section` SABIT bir tavana baglanmisti (1440px+ icin 1560, 1920px+
 * icin 1800). Bu iki kisit birbirinden habersiz:
 *   - Orta boy ekranda (1280-1440) tavan hic devreye girmiyor ama
 *     menunun 260px'i icerikten dusuyor; izgara daraliyor.
 *   - Genis ekranda tavan devreye giriyor ve menuden ARTAN alan
 *     kullanilmadan sagda bosluk olarak kaliyor.
 * Sonuc: ekran ne kadar genis olursa olsun kart izgarasi 5 sutunda
 * kaliyor ve sagda genis bir bosluk duruyor (kullanici ekran goruntusu).
 *
 * COZUM: sabit tavan yerine "menuden ARTAN alani doldur". Boylece izgara
 * her masaustu genisliginde kendini ayarliyor; auto-fill zaten sutun
 * sayisini kendisi hesapliyor.
 *
 * ⚠️ ASIRI GENISLEMEYE KARSI TAVAN DURUYOR: cok genis ekranlarda
 * (2560px+) satir basina 12-13 kart okunaksiz olurdu; 2200px'de
 * duruyoruz. Kart genisligi zaten sabit (196/216px), yani genisleyen
 * sey sutun SAYISI.
 * ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1024px) {
  .section,
  .page > .section {
    /* ⚠️ `100%` KULLANILIYOR, `100vw` DEGIL. Iki sebep:
       1. box-sizing: border-box global (style.css) -- padding zaten
          max-width'in ICINDE. 100vw'den padding'i ayrica dusmek onu
          IKINCI kez saymak olurdu, bolum gereksiz yere dar kalirdi.
       2. 100vw dikey kaydirma cubugunu DA sayar; genislik cubuk kadar
          fazla cikip yatay tasma yaratir. `100%` ebeveynin gercek
          icerik genisligidir -- body'nin 260px sol dolgusu zaten
          dusulmus haldedir, yani menu genisligi degisse bile dogru kalir. */
    max-width: min(2200px, 100%) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* ── Listem: Kart ve Silme Butonu ── */
.liste-kart {
  position: relative;
  display: block;
  width: 100%;
}
.liste-kart .card {
  width: 100% !important;
}
.liste-sil-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 6;
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  background: rgba(12, 12, 16, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #ff5252;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
  transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.liste-sil-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  pointer-events: none;
}
.liste-sil-btn:hover {
  background: #e11d2e;
  color: #fff;
  border-color: #e11d2e;
  transform: scale(1.12);
  box-shadow: 0 6px 20px rgba(225, 29, 46, 0.55);
}
.liste-sil-btn:active {
  transform: scale(0.92);
}
.liste-kart.siliniyor {
  opacity: 0 !important;
  transform: scale(0.85) translateY(-8px) !important;
  transition: opacity 0.25s ease, transform 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  pointer-events: none;
}
#listeTumunuTemizleBtn:hover {
  background: rgba(225, 29, 46, 0.15) !important;
  border-color: rgba(225, 29, 46, 0.4) !important;
  color: #ff5252 !important;
}