/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* ⚠️ KÖK ARKA PLANI ve KOYU ŞEMA ŞART — iOS'ta ALT ŞERİT BEYAZ KALIYORDU.
   Arka plan yalnızca `body`de tanımlıydı. Masaüstünde sorun çıkarmıyor ama
   iOS Safari'de belgenin DIŞINDA kalan alanları (güvenli alan / ana ekran
   çizgisi şeridi ve yay etkisiyle esneyen üst-alt boşluk) `html`in kendi
   arka planıyla boyuyor; tanımlı değilse tarayıcının öntanımlı AÇIK
   zemini, yani BEYAZ kullanılıyor. Sonuç: alt gezinme çubuğunun bulunduğu
   şerit beyaz görünüyor ve gri ikonlar üstünde okunmuyordu (iPhone'da hem
   Safari'de hem ana ekrana eklenmiş uygulama modunda).
   `color-scheme: dark` ayrıca kaydırma çubuğu, form denetimleri ve esneme
   alanı gibi tarayıcı çizimlerini de koyu tarafa alıyor. */
html {
  -webkit-text-size-adjust: 100%;
  background: var(--zemin, #08080a);
  color-scheme: dark;
}
/* Inputlar parent'tan text-align:center miras almasın (ör. .sb-logo) */
input, textarea, select { text-align: left; }
body {
  background: var(--zemin);
  color: var(--metin);
  font-family: 'Outfit', 'OutfitYedek', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: var(--yz-govde);
  font-weight: 400;
  line-height: 1.5;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }

/* ══════════════════════════════════════════════════════════════════════
   TASARIM BELİRTECLERİ — 2026-08 "VİTRİN" YENİLEMESİ
   ──────────────────────────────────────────────────────────────────────
   YÖN: Afişler zaten bağırıyor (altın-kırmızı Çin anahtar görselleri,
   üstünde basılı dev yazılar). Arayüzün işi onlarla YARIŞMAK değil,
   sessiz ve kesin bir çerçeve olmak. Bu yüzden:
     • Renk yalnızca AFİŞLERDEN gelir; arayüz nötr griler ve saç teli
       çizgilerden oluşur.
     • Kor rengi (--kor) SADECE kullanıcının bir şey yapabildiği yerde
       görünür: birincil eylem, aktif sekme, odak halkası, hover.
       Süs olarak asla kullanılmaz.
     • Bilgi RENKLE değil TİPOGRAFİYLE taşınır (küçük büyük harf etiket +
       tablo rakamı), çünkü afişin üstünde her renk pili gürültüdür.

   ⚠️ ESKİ HÂLİNDE ÜÇ AYRI DOYGUN RENK vardı: neon yeşil YENİ (#15803d),
   neon mavi Dublajlı (#2563eb), turuncu POPÜLER — üçü aynı anda, her
   kartın sol üstünde, zaten kalabalık bir afişin üzerinde. Buna her
   başlığın yanındaki turuncu çubuk ve her düğmedeki turuncu parıltı
   ekleniyordu. Sayfada göz dinlenecek tek bir yer kalmıyordu.
   ══════════════════════════════════════════════════════════════════════ */
:root {
  /* ── Zemin katmanları ── */
  --zemin:    #08080a;   /* sayfa — sıcak afişler öne çıksın diye serin siyah */
  --yuzey:    #101014;   /* yükseltilmiş yüzey: kart bilgisi, giriş alanı */
  --yuzey-2:  #17171c;   /* üzerine gelince */
  --cizgi:    rgba(255,255,255,.08);  /* saç teli — ana yapısal öğe */
  --cizgi-2:  rgba(255,255,255,.14);  /* belirgin ayraç */

  /* ── Metin merdiveni ── */
  --metin:       #f4f4f6;
  --metin-orta:  #a1a1aa;
  --metin-soluk: #8a8a95;

  /* ── Kor: tek vurgu rengi (niceblogger.net: mavi -- dramacix'ten
     ayirt edilsin diye, 2026-08-26) ── */
  --kor:        #2563eb;
  --kor-parlak: #4d82f3;
  --kor-sonuk:  rgba(37,99,235,.13);
  --kor-cizgi:  rgba(37,99,235,.38);

  --accent: var(--kor);
  --accent-dark: #1d4ed8;

  /* ── Yazı ölçeği ── */
  --yz-etiket: 10.5px;
  --yz-kucuk:  12.5px;
  --yz-govde:  14px;
  --yz-orta:   16px;
  --yz-baslik: 20px;
  --yz-bolum:  26px;

  --ag-govde: 400;
  --ag-orta:  500;
  --ag-vurgu: 600;
  --ag-baslik: 800;

  /* ── Hareket ── */
  --sure:  .22s;
  --egri:  cubic-bezier(.16, 1, .3, 1);

  --nav-h: 52px;
  --bot-h: 58px;
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
}

/* Küçük büyük harf etiket */
.etiket {
  font-size: var(--yz-etiket);
  font-weight: var(--ag-vurgu);
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1;
}

/* Sayılar her yerde tablo rakamı */
.rakam { font-variant-numeric: tabular-nums; }

/* Klavyeyle gezinen herkes nerede olduğunu görsün */
:focus-visible {
  outline: 2px solid var(--kor);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* ══════════════════════════════════════════
   NAV
══════════════════════════════════════════ */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 300;
  height: calc(var(--nav-h) + var(--sat));
  padding-top: var(--sat);
  background: rgba(10,10,10,.97);
  border-bottom: 1px solid #1c1c1c;
  display: flex; align-items: center; gap: 10px;
  padding-left: 12px; padding-right: 12px;
}
.nav-logo {
  font-size: 1.3rem; font-weight: 900;
  color: var(--accent); letter-spacing: -1px;
  flex-shrink: 0;
}
.nav-links {
  display: none;
  align-items: center; gap: 4px;
  flex-shrink: 0;
}
.nav-link {
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: rgba(255,255,255,.55);
  transition: color .15s, background .15s;
  white-space: nowrap;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.07); }
.nav-link.on { color: var(--accent); }
@media (min-width: 768px) {
  .nav-links { display: flex; }
}

.nav-icon-btn {
  flex-shrink: 0;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  border-radius: 9px;
  padding: 7px 11px;
  font-size: 15px;
  line-height: 1;
  transition: background var(--sure) ease, border-color var(--sure) ease;
}
.nav-icon-btn:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); }

/* ══════════════════════════════════════════
   BOTTOM NAV (mobil)
══════════════════════════════════════════ */
.bnav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 300;
  background: rgba(10,10,10,.98);
  border-top: 1px solid #1e1e1e;
}
.ios-pwa .bnav { padding-bottom: var(--sab) !important; }
/* Wrapper — sadece yüksekliği taşır */
.bnav-inner {
  display: flex;
  align-items: stretch;
  height: var(--bot-h);
}
.bnav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  color: rgba(255,255,255,.28);
  font-size: 10px; font-weight: 600; letter-spacing: .2px;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
  padding: 0 4px;
}
.bnav-item.on  { color: var(--accent); }
.bnav-item svg { width: 22px; height: 22px; fill: currentColor; flex-shrink: 0; display: block; }
.bnav-item span { display: block; line-height: 1; }

@media (max-width: 767px) {
  .bnav { display: flex; flex-direction: column; }
  body  { padding-bottom: var(--bot-h); }
  .ios-pwa body { padding-bottom: calc(var(--bot-h) + var(--sab)) !important; }
  /* Mobilde üst nav'ı gizle — sidebar hamburger yeterli */
  .nav { display: none !important; }
  .page { padding-top: var(--sat) !important; }
}

/* ══════════════════════════════════════════
   SAYFA WRAPPER
══════════════════════════════════════════ */
.page { padding-top: calc(var(--nav-h) + var(--sat)); min-height: 100vh; }

/* ══════════════════════════════════════════
   HERO
══════════════════════════════════════════ */
.hero {
  position: relative;
  height: 52vw; max-height: 340px; min-height: 180px;
  overflow: hidden;
}
.hero-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center top;
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(0,0,0,.9) 0%, rgba(0,0,0,.2) 55%, transparent 100%),
    linear-gradient(to top,   rgba(0,0,0,.85) 0%, transparent 55%);
}
.hero-body {
  position: relative; z-index: 2;
  height: 100%; display: flex; flex-direction: column;
  justify-content: flex-end; padding: 14px;
}
/* Kart rozetleriyle AYNI aile: kararmış cam + kor kenar. Eskiden dolu
   turuncuydu ve hero'nun turuncu tonlu bulanık zeminiyle karışıyordu. */
.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8,8,10,.6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--kor-cizgi);
  color: var(--kor-parlak);
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .12em;
  padding: 5px 10px; border-radius: 100px; text-transform: uppercase;
  margin-bottom: 10px; width: fit-content;
}
.hero-badge::before {
  content: ''; width: 5px; height: 5px; border-radius: 50%;
  background: var(--kor); flex-shrink: 0;
}
.hero-title {
  font-size: clamp(20px, 5.5vw, 30px);
  font-weight: var(--ag-baslik); line-height: 1.08;
  letter-spacing: -.035em;
  margin-bottom: 12px;
  text-shadow: 0 2px 16px rgba(0,0,0,.85);
}
.hero-btns { display: flex; gap: 8px; }

/* ══════════════════════════════════════════
   BUTONLAR
══════════════════════════════════════════ */
/* ⚠️ ESKİ DÜĞME: `linear-gradient(135deg, turuncu, bordo)` + renkli parıltı
   gölgesi (`box-shadow: 0 4px 15px var(--kor-cizgi)`). Bu ikili, hazır
   şablon görünümünün tek başına en güçlü kaynağı — her yerde aynı.
   Yerine: DÜZ dolgu, renkli gölge yok. Düğme yüzeyin üstünde renk
   ağırlığıyla duruyor, parıltıyla değil. Hover'da yalnızca ton açılıyor ve
   1 piksel yükseliyor: dokunulabilir olduğunu söyleyecek kadar, dikkat
   çalacak kadar değil. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid transparent; border-radius: 10px;
  font-size: var(--yz-kucuk); font-weight: var(--ag-vurgu);
  letter-spacing: .01em;
  padding: 10px 18px; cursor: pointer;
  line-height: 1;
  white-space: nowrap;
  transition: background var(--sure) ease, border-color var(--sure) ease,
              color var(--sure) ease, transform var(--sure) var(--egri);
}
.btn svg { width: 14px; height: 14px; fill: currentColor; flex-shrink: 0; }
.btn:active { transform: translateY(1px); }

/* Birincil eylem — sayfadaki tek dolu kor yüzeyi.
   ⚠️ ZEMIN MARKA TURUNCUSUNDAN KOYU, BILEREK. Beyaz yazi #ff5a1f
   uzerinde 3.12:1 kontrast veriyor; WCAG AA 4.5:1 istiyor ve Lighthouse
   "Hemen Izle" dugmesini dusuk kontrast diye isaretledi. --kor DEGISMEDI:
   o renk cerceve/ikon/vurguda kullaniliyor, uzerinde metin tasimadigi
   icin sorun degil. Yalnizca beyaz METIN tasiyan dugme zemini
   koyulastirildi -> 5.13:1. */
.btn-red {
  background: #c93a06;
  color: #fff;
}
.btn-red:hover { background: var(--kor); transform: translateY(-1px); }
.btn-red:active { transform: translateY(0); }

/* İkincil eylem — yüzey + saç teli kenar. Birincille yarışmaz ama
   silik de değil: kenarı hover'da netleşiyor. */
.btn-dark {
  background: var(--yuzey);
  color: var(--metin);
  border-color: var(--cizgi);
}
.btn-dark:hover {
  background: var(--yuzey-2);
  border-color: var(--cizgi-2);
  transform: translateY(-1px);
}
.btn-dark:active { transform: translateY(0); }

/* Üçüncül — yalnız yazı, kutu yok. Kalabalık yerlerde (kart içi, satır
   sonu) düğme kutusu eklemeden eylem sunar. */
.btn-yalin {
  background: none; border-color: transparent;
  color: var(--metin-orta);
  padding: 10px 12px;
}
.btn-yalin:hover { color: var(--metin); background: rgba(255,255,255,.05); }

.btn-sm   { padding: 8px 14px; font-size: 11.5px; border-radius: 8px; }
.btn-full { width: 100%; }

/* ══════════════════════════════════════════
   SECTION
══════════════════════════════════════════ */
.section { padding: 0 12px 28px;  margin: 0 auto; }

/* ⚠️ ESKİ BAŞLIK: her bölüm adının solunda 3px'lik turuncu çubuk. Yayın
   platformu şablonlarının değişmez hamlesi ve sayfadaki turuncu sayısını
   tek başına ikiye katlıyordu.
   Yerine SAÇ TELİ ÇİZGİ: başlıktan sonra başlayıp sağ kenara kadar uzanır.
   Sayfaya yatay bir doku veriyor (şu an hiç yok), bölümün nerede bittiğini
   gösteriyor ve hiç renk harcamıyor. */
.section-head {
  display: flex; align-items: center; gap: 14px;
  padding: 22px 0 14px;
}
.section-title {
  font-size: var(--yz-orta); font-weight: var(--ag-baslik);
  letter-spacing: -.02em;
  display: flex; align-items: center; gap: 8px;
  flex-shrink: 0;
}
.section-head::after {
  display: none;
}
.section-more, .section-count {
  order: 2; flex-shrink: 0;
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
  transition: color var(--sure) ease;
}
.section-more:hover { color: var(--metin); }

/* ── Alt tab çubuğu (tab seçiliyken) ── */
.tab-bar-bottom {
  position: fixed; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: space-around;
  background: rgba(15,15,15,.96);
  backdrop-filter: blur(10px);
  border-top: 1px solid #2a2a2a;
  padding: 8px 0 max(8px, env(safe-area-inset-bottom));
  z-index: 200;
}
.tbb-item {
  display: flex; flex-direction: column; align-items: center;
  gap: 3px; font-size: 18px; text-decoration: none;
  color: #666; min-width: 60px;
}
.tbb-item span { font-size: 10px; color: #666; }
.tbb-item.on, .tbb-item.on span { color: var(--accent); }

/* Sayfa içeriğini alttaki çubuktan koru */
body:has(.tab-bar-bottom) .page { padding-bottom: 72px; }

/* ══════════════════════════════════════════
   YATAY SCROLL ŞERIDI
══════════════════════════════════════════ */
.hrow {
  display: flex; gap: 9px;
  overflow-x: auto; overflow-y: visible;
  padding-bottom: 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.hrow::-webkit-scrollbar { display: none; }

/* ══════════════════════════════════════════
   KART (Apple Squircle & Spring Physics)
══════════════════════════════════════════ */
.card {
  display: block;
  flex-shrink: 0;
  width: 110px;
  scroll-snap-align: start;
  border-radius: var(--apple-radius);
  overflow: visible;
  background: transparent;
  position: relative;
  border: none;
  transition: transform .35s var(--apple-spring), box-shadow .35s var(--apple-spring);
  touch-action: manipulation;
}
.card:active { transform: scale(0.96); }
.card:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: none;
}
.card-wide { width: 140px; }

/* Grid içinde kart — full genişlik */
.card-grid { width: 100%; flex-shrink: 1; }

.card-poster {
  aspect-ratio: 2/3;
  overflow: hidden;
  background: #0d0d10;
  position: relative;
  border-radius: var(--apple-radius);
}
/* ⚠️ YER TUTUCU = DRAMACIX MARKA GÖRSELİ (ara.php ile AYNI).
   Önceden burada soluk, yanıp sönen turuncu bir SVG alevi vardı. Kullanıcı,
   poster olmayan (ör. DramaBebis reklam posteri temizlenmiş) kartlarda arama
   sayfasındaki gerçek marka görselinin gelmesini istedi. `contain` seçildi,
   `cover` DEĞİL: görsel kare, kutu 2/3 — cover yanlardan kırpıp "DRAMACIX"
   yazısının uçlarını keserdi. Görselin kendi zemini koyu olduğu için alt/üstte
   kalan bantlar göze batmıyor. */
.card-poster::before {
  content: '';
  position: absolute; inset: 0;
  background-color: #0a0a0c;
  background-image: url('/public/img/poster-yer-tutucu.webp');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
}

.card-poster img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: relative;      /* yer tutucunun üstünde dursun */
  z-index: 1;
  background: #141416;     /* yarı saydam PNG'lerde logo sızmasın */
}
/* Kaynağı hiç olmayan resim yer tutucuyu kapatmasın */
.card-poster img[src=""],
.card-poster img:not([src]) {
  visibility: hidden;
}
/* ⚠️ ADRESİ VAR AMA 404 DÖNEN AFİŞLER.
   Yukarıdaki kural yalnızca `src` BOŞ olduğunda çalışıyor. Adres dolu ama
   sunucudan gelmiyorsa (kaynak CDN afişi silmiş) tarayıcı yine de bir kutu
   çiziyor ve `background:#141416` yer tutucunun tamamını örtüyordu — ızgarada
   düz gri boşluklar olarak görünen şey buydu.
   `dhAfisHatasi()` (bkz. layout.php) yüklenemeyen afişe bu sınıfı ekliyor;
   kutu saydamlaşıyor ve altındaki markalı yer tutucu ortaya çıkıyor. */
.card-poster img.afis-yok,
.hero-poster-card img.afis-yok {
  visibility: hidden;
}
/* Sarı #ffd700 rozet kaldırıldı: afişin üstündeki dördüncü renkti. Bilgi
   artık kartın alt satırında, yazıyla. */
.card-ep {
  position: absolute; bottom: 6px; right: 6px;
  background: rgba(8,8,10,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--cizgi);
  color: var(--metin); font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .1em;
  padding: 3px 7px; border-radius: 6px;
  font-variant-numeric: tabular-nums;
}
.card-new {
  position: absolute; top: 6px; left: 6px;
  background: rgba(8,8,10,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--kor-cizgi);
  color: var(--kor-parlak);
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .12em;
  padding: 3px 7px; border-radius: 6px;
  text-transform: uppercase;
}
.card-play-overlay {
  position: absolute; inset: 0;
  background: rgba(6,6,8,.42);
  display: flex; align-items: center; justify-content: center;
}
/* Oynat düğmesi: dolu kor daire, renkli parıltı YOK. Afişin üstünde
   parıltı, zaten parlak olan görselde bulanık bir leke bırakıyordu. */
.card-play-icon {
  width: 44px; height: 44px;
  background: var(--kor);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.card-play-icon svg { width: 15px; height: 15px; fill: currentColor; margin-left: 2px; }

/* ── Kartın alt satırı ────────────────────────────────────────────────
   Afişten inen tüm bilgi burada toplanıyor: başlık, sonra tek bir meta
   satırı (bölüm sayısı · dil). Afişin üstü temiz kalıyor. */
.card-info { padding: 9px 2px 4px; }
.card-name {
  font-size: var(--yz-kucuk); font-weight: var(--ag-orta);
  color: var(--metin);
  letter-spacing: -.01em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.card-sub {
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--metin-soluk);
  margin-top: 5px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--sure) ease;
}
/* Dil bilgisi dar ekranda gizli — bkz. layout.php / dfKartMeta.
   Telefonda 3 sütunlu ızgarada kart ~110px; "80 BÖLÜM · TR DUBLAJ" sığmayıp
   iki satıra kırılıyor ve kart yükseklikleri birbirini tutmuyordu. */
@media (max-width: 539px) { .ks-dil { display: none; } }

/* ══════════════════════════════════════════
   DEVAM ET KARTI (Kaldığın Yerden)
══════════════════════════════════════════ */
/* Kart + silme düğmesini birlikte taşıyan sarmalayıcı.
   Düğme <a>'nın DIŞINDA durmak zorunda (içindeyken dokunuş kartı açıyor),
   bu yüzden ikisini saran bir kutu gerekiyor. Yatay sıradaki genişlik/kayma
   davranışı artık bu kutuda; .card-continue kutuyu dolduruyor. */
.devam-kart {
  position: relative; flex-shrink: 0;
  width: 260px; scroll-snap-align: start;
}
.devam-kart .card-continue { width: 100%; }

/* Silme düğmesi: posterin sağ üstünde, dokunması kolay ama kartı boğmayan
   boyutta. `touch-action: manipulation` çift dokunuşta yakınlaştırmayı,
   `-webkit-tap-highlight-color` iOS'un mavi parlamasını kapatıyor. */
.devam-sil {
  position: absolute; top: 6px; right: 6px; z-index: 4;
  width: 28px; height: 28px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: rgba(0,0,0,.62); color: #fff;
  font-size: 17px; line-height: 1; font-weight: 700;
  cursor: pointer; opacity: .75;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: opacity .18s, background .18s;
}
.devam-sil:hover { opacity: 1; background: var(--kor-sonuk); }
.devam-sil:focus-visible { outline: 2px solid var(--kor-cizgi); outline-offset: 2px; }
/* Dokunmatikte hover yok: düğme kalıcı olarak biraz daha okunur dursun */
@media (hover: none) { .devam-sil { opacity: .9; } }

.card-continue {
  display: block; flex-shrink: 0;
  width: 100%; scroll-snap-align: start;
  border-radius: 12px; overflow: hidden;
  background: var(--yuzey); position: relative;
  border: 1px solid var(--cizgi);
  transition: border-color var(--sure) ease, background var(--sure) ease;
}
.card-continue:hover { border-color: var(--cizgi-2); background: var(--yuzey-2); }
.card-continue .card-poster {
  aspect-ratio: 16/9;
  position: relative;
  background: #000;
}
.card-continue .card-poster img {
  width: 100%; height: 100%; object-fit: cover;
  object-position: center 15%; /* Odak noktasını yukarı kaydırarak yüzleri yakala */
  opacity: 0.85; transition: opacity 0.3s;
}
.card-continue:hover .card-poster img { opacity: 1; }
.card-continue .ep-badge {
  position: absolute; bottom: 8px; left: 8px;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 8px; border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
  /* İkon + yazı tek satırda ve ORTALANMIŞ dursun. ▶ karakteriyle hizalama
     yazı tipine bağlıydı ve satırda hafifçe yukarı kaçıyordu. */
  display: inline-flex; align-items: center; gap: 5px; line-height: 1;
}
/* Rozet ikonu: yazı boyutuna oranlı, rengi yazıdan miras alır */
.card-continue .ep-badge-ik {
  width: 9px; height: 9px; flex: 0 0 9px;
  fill: currentColor; display: block;
}

/* Bölüm başlığındaki oynat ikonu (▶ karakterinin yerine) */
.section-title .baslik-ik {
  width: 15px; height: 15px; fill: var(--accent);
  vertical-align: -2px; margin-right: 7px;
}
.card-continue .play-icon {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 46px; height: 46px; background: var(--kor);
  border-radius: 50%; display: flex; align-items: center; justify-content: center;
  color: #fff;
  opacity: 0; transition: opacity var(--sure) ease, transform var(--sure) var(--egri);
}
/* SVG üçgen: `font-size`/`padding-left` ile hizalanan ▶ karakterinin yerine.
   1px sağa kaydırma optik denge içindir — üçgenin görsel ağırlık merkezi
   geometrik merkezinin solunda kalıyor ve tam ortalanınca sola yaslı duruyor. */
.card-continue .play-icon svg {
  width: 18px; height: 18px; fill: currentColor;
  margin-left: 2px; display: block;
}
.card-continue:hover .play-icon { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
/* Bilgi alanının üstündeki 2px turuncu çizgi kaldırıldı: her kartta
   yatay bir turuncu bant vardı ve şeridi çizgili bir tabloya çeviriyordu.
   Ayrım artık yalnızca yüzey farkı. */
.card-continue .card-info {
  padding: 12px; border-top: 1px solid var(--cizgi);
}
.card-continue .card-title {
  font-size: var(--yz-govde); font-weight: var(--ag-orta); color: var(--metin);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 600px) { .card-continue { width: 240px; } }
@media (min-width: 1024px) { .card-continue { width: 280px; } .card-continue .card-title { font-size: 14px; } }

/* ══════════════════════════════════════════
   GRID (browse)
══════════════════════════════════════════ */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
/* ⚠️ "TÜM DİZİLER TELEFONDA KÜÇÜK GÖRÜNÜYOR" DÜZELTMESİ.
   Kırılım 420px'teydi ve modern telefonların ÇOĞU bunun üstünde: sonuç,
   büyük telefonun DAHA KÜÇÜK kart göstermesiydi (ölçüldü, bölüm dolgusu
   24px + 8px boşlukla):
       Galaxy S23        412px → 3 sütun → kart 124px
       iPhone 15 Pro Max 430px → 4 sütun → kart  96px   ← daha büyük ekran, daha küçük kart
   Telefonlar 430px'e kadar çıkıyor; 4. sütun ancak tablet/geniş ekranda
   anlamlı. Eşik 540px'e alındı — tüm telefonlar 3 sütunda kalıyor ve
   430px'lik ekranda kart 124px'e çıkıyor (%29 büyüme).
   768px'ten itibaren desktop.css `auto-fill minmax(150px)` ile devralıyor,
   bu yüzden buradaki üst kırılımlar yalnızca 540-767 aralığını kapsıyor. */
@media (min-width: 540px) { .grid { grid-template-columns: repeat(4, 1fr); gap: 10px; } }
@media (min-width: 660px) { .grid { grid-template-columns: repeat(5, 1fr); } }

/* ══════════════════════════════════════════
   DİZİ DETAY
══════════════════════════════════════════ */
.detail-hero {
  position: relative;
  padding-top: var(--nav-h);
}
.detail-bg {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(3px) brightness(.3);
}
.detail-inner {
  position: relative; z-index: 1;
  display: flex; gap: 14px; padding: 16px;
  align-items: flex-end; min-height: 220px;
}
.detail-poster {
  width: 90px; flex-shrink: 0;
  border-radius: 8px; overflow: hidden;
  box-shadow: 0 6px 24px rgba(0,0,0,.8);
}
@media (min-width: 480px) { .detail-poster { width: 120px; } }
.detail-poster img { width: 100%; display: block; }
.detail-info { flex: 1; min-width: 0; }
.detail-title {
  font-size: clamp(15px, 3.5vw, 22px);
  font-weight: 900; line-height: 1.2; margin-bottom: 7px;
}
.tags { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.tag {
  background: transparent;
  border: 1px solid var(--cizgi);
  color: var(--metin-orta);
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .1em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 100px;
}
/* Vurgulu etiket: dolgu değil kenar. Dolu renkli pil, yanındaki nötr
   etiketlerle aynı satırda "uyarı" gibi okunuyordu. */
.tag-r { border-color: var(--kor-cizgi); color: var(--kor-parlak); }
.detail-btns { display: flex; gap: 7px; flex-wrap: wrap; }
.detail-desc {
  font-size: 13px; color: #777; line-height: 1.6;
  padding: 14px 12px; border-bottom: 1px solid #181818;
}

/* ══════════════════════════════════════════
   BÖLÜM GRID
══════════════════════════════════════════ */
.ep-wrap {
  padding: 14px 14px 20px;
}
.ep-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
@media (min-width: 380px) { .ep-grid { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 460px) { .ep-grid { grid-template-columns: repeat(7, 1fr); } }
@media (min-width: 600px) { .ep-grid { grid-template-columns: repeat(10, 1fr); gap: 8px; } }
@media (min-width: 900px) { .ep-grid { grid-template-columns: repeat(14, 1fr); } }

.ep-btn {
  aspect-ratio: 1;
  background: var(--yuzey);
  border: 1px solid var(--cizgi);
  border-radius: 9px;
  color: var(--metin-orta);
  font-size: var(--yz-kucuk); font-weight: var(--ag-orta);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--sure) ease, color var(--sure) ease,
              border-color var(--sure) ease;
  min-width: 0;           /* grid taşmasını önler */
  width: 100%;
}
/* Üzerine gelince yalnızca yüzey ve kenar canlanır; dolu kor yalnızca
   İZLENEN bölümde. 90 düğmenin hepsi hover'da turuncuya boyanınca hangi
   bölümde olduğun kayboluyordu. */
.ep-btn:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); color: var(--metin); }
.ep-btn:active { background: var(--yuzey-2); }
.ep-btn.on {
  background: var(--kor); color: #fff;
  border-color: var(--kor); font-weight: var(--ag-vurgu);
}

/* ══════════════════════════════════════════
   PLAYER
══════════════════════════════════════════ */
.player-page { background: #000; min-height: 100vh; padding-top: var(--nav-h); }

.player-box {
  width: 100%; background: #000; position: relative;
}
.player-box video {
  width: 100%; display: block;
  max-height: calc(100svh - var(--nav-h) - var(--bot-h) - 50px);
  object-fit: contain; background: #000;
  /* Mobilde dikey, masaüstünde yatay */
  aspect-ratio: 9/16;
}
@media (min-width: 600px) {
  .player-box video { aspect-ratio: 16/9; max-height: 56vh; }
}

.ep-scrollbar {
  display: flex; gap: 6px;
  overflow-x: auto; padding: 10px 12px;
  background: var(--zemin); border-bottom: 1px solid var(--cizgi);
  scroll-snap-type: x mandatory;
}
.ep-scrollbar::-webkit-scrollbar { display: none; }
.ep-pill {
  flex-shrink: 0; scroll-snap-align: start;
  padding: 7px 13px; border-radius: 100px;
  background: var(--yuzey); border: 1px solid var(--cizgi);
  color: var(--metin-orta);
  font-size: var(--yz-kucuk); font-weight: var(--ag-orta);
  font-variant-numeric: tabular-nums;
  transition: background var(--sure) ease, border-color var(--sure) ease, color var(--sure) ease;
}
.ep-pill:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); color: var(--metin); }
.ep-pill.on { background: var(--kor); border-color: var(--kor); color: #fff; font-weight: var(--ag-vurgu); }

.player-info { padding: 12px; }
.player-title { font-size: 14px; font-weight: 700; margin-bottom: 4px; }
.player-sub   { font-size: 12px; color: #666; margin-bottom: 12px; }
.player-btns  { display: flex; gap: 8px; flex-wrap: wrap; }

/* ══════════════════════════════════════════
   SHORTS FEED
══════════════════════════════════════════ */
.sf {
  height: calc(100svh - var(--nav-h));
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
}
.sf::-webkit-scrollbar { display: none; }

.si {
  height: calc(100svh - var(--nav-h));
  scroll-snap-align: start;
  scroll-snap-stop: always;
  position: relative; overflow: hidden;
  background: #000;
  display: flex; align-items: center; justify-content: center;
}
.si video {
  width: 100%; height: 100%;
  object-fit: contain; background: #000;
}

/* Shorts — alt gradient + bilgi */
.si-shade {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, transparent 50%);
}
.si-info {
  position: absolute; bottom: 0; left: 0; right: 64px;
  padding: 20px 12px 16px; z-index: 5; pointer-events: none;
}
.si-ep   { display: inline-block; background: var(--accent); color: #fff; font-size: 9px; font-weight: 800; padding: 2px 6px; border-radius: 3px; margin-bottom: 5px; }
.si-name { font-size: 13px; font-weight: 700; margin-bottom: 3px; pointer-events: all; }
.si-meta { font-size: 11px; color: rgba(255,255,255,.6); }

/* Shorts — sağ butonlar */
.si-actions {
  position: absolute; right: 8px; bottom: 80px;
  display: flex; flex-direction: column; gap: 16px; z-index: 5;
}
.si-btn {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; color: #fff;
}
.si-btn-icon {
  width: 42px; height: 42px;
  background: rgba(255,255,255,.15); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  border: 1px solid rgba(255,255,255,.2);
}
.si-btn span { font-size: 10px; color: rgba(255,255,255,.8); }

/* Tap overlay */
.si-tap {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
}
.si-pause-icon {
  width: 64px; height: 64px;
  background: rgba(0,0,0,.5); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; opacity: 0; transition: opacity .25s; pointer-events: none;
}
.si-pause-icon.show { opacity: 1; }

/* Yükleniyor shimmer */
.shimmer {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, #111 25%, #1c1c1c 50%, #111 75%);
  background-size: 200% 100%;
  animation: sh 1.5s infinite;
}
@keyframes sh { 0%{background-position:200% 0} 100%{background-position:-200% 0} }

/* ══════════════════════════════════════════
   ARAMA + FORM
══════════════════════════════════════════ */
/* 16px: iOS Safari 16px ALTINDAKİ alana odaklanınca sayfayı otomatik
   yakınlaştırıyor — arama kutusu "kendiliğinden büyüyor" gibi görünüyordu. */
.search-input {
  width: 100%; background: var(--yuzey); border: 1px solid var(--cizgi);
  color: var(--metin); font-size: var(--yz-orta); padding: 12px 15px;
  border-radius: 11px; outline: none;
  transition: border-color var(--sure) ease, background var(--sure) ease;
}
.search-input::placeholder { color: var(--metin-soluk); }
.search-input:focus {
  border-color: var(--kor-cizgi);
  background: var(--yuzey-2);
}

/* ══════════════════════════════════════════
   PAGİNATİON
══════════════════════════════════════════ */
.pages {
  display: flex; gap: 5px; justify-content: center;
  flex-wrap: wrap; padding: 20px 12px;
}
.pages a, .pages span {
  min-width: 38px; padding: 9px 12px;
  border-radius: 9px; background: var(--yuzey);
  border: 1px solid var(--cizgi); color: var(--metin-orta);
  font-size: var(--yz-kucuk); font-weight: var(--ag-orta);
  font-variant-numeric: tabular-nums;
  text-align: center;
  transition: background var(--sure) ease, border-color var(--sure) ease,
              color var(--sure) ease;
}
.pages a:hover { background: var(--yuzey-2); border-color: var(--cizgi-2); color: var(--metin); }
.pages a:active { transform: translateY(1px); }
.pages .on {
  background: var(--kor); color: #fff;
  border-color: var(--kor); font-weight: var(--ag-vurgu);
}

/* ══════════════════════════════════════════
   ADMIN PREMIUM UI
══════════════════════════════════════════ */
body.admin-body { display: flex; min-height: 100vh; background: #080808; margin: 0; padding: 0; font-family: 'Outfit', 'OutfitYedek', sans-serif; overflow-x: hidden; }
.admin-sidebar {
  width: 260px; background: #111; border-right: 1px solid #1c1c1c;
  display: flex; flex-direction: column; padding: 32px 16px 20px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto; flex-shrink: 0;
}
.asb-logo { font-size: 26px; font-weight: 900; background: linear-gradient(90deg, var(--kor), var(--kor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 40px; padding: 0 12px; letter-spacing: -1px; }
.asb-menu { display: flex; flex-direction: column; gap: 6px; flex: 1; }
.asb-item {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  color: #888; font-size: 15px; font-weight: 600; border-radius: 12px;
  transition: all 0.2s ease; text-decoration: none; border-left: 3px solid transparent;
}
.asb-item:hover { color: #fff; background: rgba(255,255,255,0.05); transform: translateX(2px); }
.asb-item.on { color: #fff; background: linear-gradient(90deg, var(--kor-sonuk) 0%, transparent 100%); border-left: 3px solid var(--accent); border-radius: 0 12px 12px 0; }

.admin-main { flex: 1; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; }
.admin-header { padding: 32px 48px 16px; display: flex; justify-content: space-between; align-items: center; }
.admin-title { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -0.5px; }
.admin-content { padding: 0 48px 48px; flex: 1; }

.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: 12px; color: #888; margin-bottom: 6px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.fc {
  width: 100%; background: #161616; border: 1px solid #2a2a2a;
  color: #fff; padding: 12px 16px; border-radius: 10px;
  font-size: 14px; outline: none; transition: border-color 0.2s;
}
.fc:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--kor-sonuk); }
textarea.fc { min-height: 100px; resize: vertical; }

.alert { padding: 14px 18px; border-radius: 10px; margin-bottom: 24px; font-size: 14px; font-weight: 500; }
.alert-ok  { background: rgba(0,200,80,.1); color: #0f0; border: 1px solid rgba(0,200,80,.2); }
.alert-err { background: var(--kor-sonuk); color: #ff7070; border: 1px solid var(--kor-sonuk); }

.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th, .tbl td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #1a1a1a; }
.tbl th { color: #888; background: #121212; font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.tbl th:first-child { border-top-left-radius: 10px; border-bottom-left-radius: 10px; }
.tbl th:last-child { border-top-right-radius: 10px; border-bottom-right-radius: 10px; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }

.acard { background: #121212; border: 1px solid #1f1f1f; border-radius: 14px; padding: 24px; margin-bottom: 20px; box-shadow: 0 4px 20px rgba(0,0,0,0.3); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .grid2 { grid-template-columns: 1fr; } .admin-sidebar { width: 220px; padding: 24px 12px; } .admin-header, .admin-content { padding: 24px; } }
@media (max-width: 600px) { body.admin-body { flex-direction: column; } .admin-sidebar { width: 100%; height: auto; position: static; padding: 16px; border-right: none; border-bottom: 1px solid #1c1c1c; } .asb-logo { margin-bottom: 16px; text-align: left; } .asb-menu { gap: 4px; } }

/* Login */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; background: #080808; }
.login-box { background: #121212; border: 1px solid #1f1f1f; border-radius: 16px; padding: 40px 32px; width: 100%; max-width: 380px; box-shadow: 0 10px 40px rgba(0,0,0,0.5); }
.login-logo { font-size: 28px; font-weight: 900; background: linear-gradient(90deg, #facc15, var(--kor)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; margin-bottom: 8px; text-align: center; }
.login-sub  { color: #777; font-size: 14px; margin-bottom: 32px; text-align: center; }

/* ══════════════════════════════════════════
   FOOTER
══════════════════════════════════════════ */
footer {
  text-align: center;
  padding: 28px 12px 20px;
  color: #8a8a94; font-size: 11px;
  border-top: 1px solid #151515;
  margin-top: 24px;
}

/* ══════════════════════════════════════════
   YARDIMCI
══════════════════════════════════════════ */
.mt8  { margin-top: 8px; }
.mt16 { margin-top: 16px; }
.flex { display: flex; }
.gap8 { gap: 8px; }
.wrap { flex-wrap: wrap; }
.muted { color: #666; }

/* Masaüstü ayarları */
@media (min-width: 768px) {
  .nav { padding: 0 20px; }
  .section { padding: 0 20px 32px; }
  .card { width: 130px; }
  .card-wide { width: 160px; }
}
@media (min-width: 1024px) {
  .section { padding: 0 32px 40px; }
  .card { width: 145px; }
  .card-wide { width: 175px; }
}

@media (min-width: 1024px) {
  .nav { padding: 0 32px; }
  .hero-body { padding: 0 32px 20px; }
}

/* Aynı DRAMACIX yer tutucu görseli her poster kutusunda geçerli — devam
   şeridi ve hero yan kartı da poster yokken/yüklenirken markalı dursun.
   (Devam kartındaki eski `background-size: 22%` override'ı kaldırıldı:
   .card-poster::before artık `contain` kullanıyor, oran zaten doğru.) */
.hero-poster-card {
  background: #141416;
  position: relative;
}
.hero-poster-card::before {
  content: '';
  position: absolute; inset: 0;
  background-color: #0a0a0c;
  background-image: url('/public/img/poster-yer-tutucu.webp');
  background-repeat: no-repeat; background-position: center; background-size: contain;
  pointer-events: none;
}
.hero-poster-card img { position: relative; z-index: 1; background: #141416; }

/* ══════════════════════════════════════════
   MİSAFİR YUMUŞAK KAYIT ÖNERİSİ (dizi.php)
   Alttan yumuşakça çıkar; kapatılabilir, zorlamaz. Oynatıcıyı örtmez —
   dar bir kart olarak altta durur, izleme kesilmez.
══════════════════════════════════════════ */
.soft-kayit {
  position: fixed; left: 50%; bottom: -160px; transform: translateX(-50%);
  z-index: 120; width: min(440px, calc(100vw - 24px));
  display: flex; align-items: center; gap: 12px;
  padding: 13px 15px 13px 14px;
  background: linear-gradient(135deg, #1b1b21, #141418);
  border: 1px solid #2b2b33; border-radius: 15px;
  box-shadow: 0 14px 44px rgba(0,0,0,.55);
  opacity: 0; pointer-events: none;
  transition: bottom .45s cubic-bezier(.16,1,.3,1), opacity .45s ease;
}
.soft-kayit.goster { bottom: 18px; opacity: 1; pointer-events: auto; }
.sk-ikon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  background: var(--kor);
}
.sk-ikon svg { width: 18px; height: 18px; fill: #fff; margin-left: 2px; }
.sk-govde { flex: 1; min-width: 0; }
.sk-baslik { font-size: 14px; font-weight: 700; color: #fff; line-height: 1.2; }
.sk-metin { font-size: 12px; color: #9aa0aa; margin-top: 3px; line-height: 1.35; }
.sk-btn {
  flex: 0 0 auto; align-self: center;
  background: var(--kor); color: #fff;
  padding: 9px 15px; border-radius: 10px; font-size: 13px; font-weight: 700;
  white-space: nowrap; text-decoration: none;
  transition: transform .15s, box-shadow .15s;
}
.sk-btn:hover { background: var(--kor-parlak); transform: translateY(-1px); }
.sk-kapat {
  position: absolute; top: -9px; right: -9px;
  width: 26px; height: 26px; padding: 0; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #2b2b33; color: #cfcfd6;
  font-size: 16px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.4);
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
  transition: background .18s, color .18s;
}
.sk-kapat:hover { background: #3a3a44; color: #fff; }
@media (max-width: 560px) {
  .soft-kayit { padding: 11px 13px; gap: 10px; }
  .sk-metin { font-size: 11.5px; }
  .sk-btn { padding: 8px 12px; font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════════════
   KART SİSTEMİ — 2026-08 YENİLEME
   Bu ürün DİKEY KISA DRAMA: 60-80 bölüm × ~2 dakika, ağırlıklı mobil,
   hızlı kaydırarak keşif. Tasarımın anlatması gereken iki şey var:
   afişin kendisi ve "kaç bölüm" vaadi. Aşağısı bu ikisini düzeltiyor.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1) AFİŞ ORANI: 2/3 → 3/4 ──────────────────────────────────────────
   ÖLÇÜLDÜ (400 poster): %83'ü 3:4 (480×640), %12'si 0.73, yalnız %3'ü
   2:3'e yakın. Kutu 2/3 (0.667) olduğu için `object-fit:cover` çoğunluğu
   YANLARDAN ~%11 KIRPIYORDU — afişlerin kenarındaki yüzler ve yazılar
   kesiliyordu. 3/4 kaynağın gerçek şekli: kırpma yok, afiş olduğu gibi. */
.card-poster { aspect-ratio: 3/4; }

/* ── 2) ATEŞLEME ÇİZGİSİ — İMZA ÖĞESİ ──────────────────────────────────
   Burada eskiden afişin ALT %46'sını karartan bir perde vardı; tek işi
   üstüne oturan cam bölüm rozetini okunur kılmaktı. Rozet alt satıra
   indiği için perde de gereksizleşti — ve gitmesi iyi oldu: her afişin
   alt üçte biri gereksiz yere karartılıyordu.

   Yerine gelen şey kartın imzası: üzerine gelince afişin alt kenarında
   kor rengi ince bir çizgi SOLDAN SAĞA çizilir. Herkesin yaptığı
   `scale(1.05)` afiş büyütmesi değil — o hareket afişi kırpar ve
   komşu kartların üstüne taşar. Bu çizgi hiçbir şeyi oynatmaz, yalnızca
   "seçili olan bu" der ve bunu bir hareketle söyler.
   Yalnızca işaretçi cihazda: dokunmatikte hover diye bir şey yok. */
.card-poster::after {
  display: none;
}
@media (hover: hover) {
  .card .card-sub { color: var(--metin-soluk); }
  .card:hover .card-sub,
  .card:focus-visible .card-sub { color: var(--metin-orta); }
}
@media (hover: none) {
  .card .card-sub { color: var(--metin-orta); }
}

/* ── 3) BÖLÜM SAYISI ARTIK AFİŞTE DEĞİL ────────────────────────────────
   Bölüm sayısı bu üründe afişten sonraki en güçlü sinyal ("akşamı
   doldurur mu?"), ama afişin ÜSTÜNDE durmasının bir bedeli vardı: cam
   bir pil, altında karartma perdesi, üstünde iki renkli rozet daha —
   afişin kendisi bunların arasında kayboluyordu.
   Şimdi kartın alt satırında, tablo rakamıyla. Afiş temiz, bilgi okunur,
   rakamlar kartlar arasında hizalı. */
.ep-count {
  display: inline-block;
  font-size: var(--yz-etiket); font-weight: var(--ag-vurgu);
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--metin-soluk);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; pointer-events: none;
}
/* Afiş kutusunun içinde kaldığı yerlerde (eski işaretleme) alt satıra
   akmasın diye konumu sıfırlanıyor. */
.card-poster .ep-count {
  position: absolute; left: 8px; bottom: 8px; z-index: 3;
  padding: 3px 7px; border-radius: 6px;
  background: rgba(8,8,10,.78);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid var(--cizgi);
  color: var(--metin);
  max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis;
}

/* ── 4) OYNAT KATMANI YALNIZCA İŞARETÇİ CİHAZDA ────────────────────────
   Dokunmatikte kalıcı bir oynat düğmesi gereksiz — kartın tamamı zaten
   bağlantı. Mobilde KAPALI, 768px'ten itibaren açık; görünme davranışı
   desktop.css'te. */
.card-overlay { display: none; }
@media (min-width: 768px) {
  .card-overlay {
    display: flex; align-items: center; justify-content: center;
    position: absolute; inset: 0; z-index: 3;
    background: rgba(6,6,8,.42);
  }
}

/* ⚠️ `.play-btn` İÇİN HİÇBİR STİL YOKTU. İşaretlemede
   `<div class="card-overlay"><div class="play-btn"></div></div>` duruyor
   ama `.play-btn` hiçbir dosyada tanımlı değildi: üzerine gelince afiş
   kararıyor ve ortasında BOŞ bir kutu kalıyordu. Yani hover "bir şey
   olacak" diyip hiçbir şey göstermiyordu — yarım kalmış bir bileşen.
   Üçgen CSS ile çiziliyor (öğe boş, içine simge konamaz); 2px sağa
   kaydırma optik denge için: üçgenin görsel ağırlık merkezi geometrik
   merkezinin solunda kalıyor ve tam ortalanınca sola yaslı duruyor. */
.play-btn {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--kor);
  display: flex; align-items: center; justify-content: center;
  transform: scale(.9);
  transition: transform var(--sure) var(--egri);
}
.play-btn::before {
  content: '';
  width: 0; height: 0;
  margin-left: 3px;
  border-style: solid;
  border-width: 7px 0 7px 12px;
  border-color: transparent transparent transparent #fff;
}
.card:hover .play-btn { transform: scale(1); }

/* ── 5) BAŞLIK ─────────────────────────────────────────────────────────
   Tek satır + üç nokta, uzun melodram başlıklarını ("Kocamın Arkasından
   Dönen Oyunlar") ilk kelimede kesiyordu. İki satır, dar satır aralığı:
   kart yüksekliği sabit kalır, başlık okunur olur.
   Ağırlık 600 → 500: gövde metni artık 400, başlık 500 ile ondan ayrılıyor.
   Her şeyin 600-800 olduğu eski hâlde hiçbir şey öne çıkmıyordu. */
.card-name, .card-title {
  white-space: normal;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: var(--yz-kucuk); line-height: 1.3;
  font-weight: var(--ag-orta);
  letter-spacing: -.01em;
  color: var(--metin);
}
.card-info { padding: 9px 2px 4px; }

/* Kart artık kendi zeminini taşımıyor: afiş + yazı doğrudan sayfa
   zemininde duruyor. Kutu içinde kutu görüntüsü ("bok gibi kutular")
   büyük ölçüde bundan kaynaklanıyordu — her afişin etrafında bir gri
   çerçeve daha vardı. */
.card { border-radius: 0; background: none; overflow: visible; }
.card-poster { border-radius: 10px; }

/* ── BAL KÜPÜ (bot tuzağı) ──────────────────────────────────────────────
   Giriş, kayıt VE şifre değiştirme formlarında kullanılıyor; bu yüzden
   sayfaya özel auth.css'te değil BURADA — hesap sayfası auth.css'i
   yüklemiyor ve kural orada kalsaydı tuzak alanı ekranda GÖRÜNÜR olurdu.
   `display:none` DEĞİL: bazı botlar gizli alanları atlıyor, ekran dışına
   almak onları yakalamaya devam ediyor. İnsana hiçbir şekilde görünmez. */
.kapca-tuzak {
  position: absolute !important;
  left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}

/* ── Tür rozetleri ve benzer diziler ──────────────────────────────────────
   Tür etiketi 2026-08-05'te kataloğa AI ile eklendi; öncesinde alan boştu
   (22.513 aktif TR kaydın 21.101'i) ve sitede tür diye bir kavram yoktu. */
.dizi-turler { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 4px; }
.dizi-tur {
  display: inline-block; padding: 6px 12px;
  font-size: 12.5px; font-weight: 600; line-height: 1;
  color: #ddd; text-decoration: none;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 999px;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.dizi-tur:hover, .dizi-tur:focus-visible {
  color: #fff; background: rgba(229,9,20,.16); border-color: rgba(229,9,20,.45);
}

.benzer-blok { max-width: 1400px; margin: 26px auto 40px; padding: 0 16px; }
.benzer-baslik {
  margin: 0 0 14px; font-size: 1.15rem; font-weight: 800; color: #fff;
  letter-spacing: -.01em;
}
@media (prefers-reduced-motion: reduce) { .dizi-tur { transition: none; } }

/* Arama: tür çipleri ikinci satırda, dublaj/altyazı çiplerinin altında. */
.ara-chips-tur { margin-top: 8px; }

/* ══════════════════════════════════════════════════════════════
   DRAMACIX BİLDİRİM SİSTEMİ (PC & MOBİL)
   ══════════════════════════════════════════════════════════════ */
.dh-bildirim-kapsayici {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 999999;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none;
  max-width: 400px;
  width: 100%;
}

@media (max-width: 768px) {
  .dh-bildirim-kapsayici {
    top: max(14px, env(safe-area-inset-top, 14px));
    left: 14px;
    right: 14px;
    width: auto;
    max-width: none;
    align-items: center;
  }
}

.dh-bildirim {
  position: relative;
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px 18px;
  background: rgba(18, 18, 24, 0.94);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.75), inset 0 1px 0 rgba(255, 255, 255, 0.15);
  color: #fff;
  overflow: hidden;
  touch-action: pan-y;
  user-select: none;
  opacity: 0;
  transform: translateX(120%) scale(0.95);
  transition: transform 0.38s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.28s ease, filter 0.2s ease;
}

@media (max-width: 768px) {
  .dh-bildirim {
    width: 100%;
    max-width: 440px;
    transform: translateY(-120%) scale(0.95);
    padding: 14px 16px 16px;
  }
}

.dh-bildirim.dh-bld-goster {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

.dh-bildirim.dh-bld-kapaniyor {
  opacity: 0 !important;
  transform: scale(0.9) translateY(-14px) !important;
  pointer-events: none;
}

/* Bildirim İkonu */
.dh-bld-ikon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dh-bld-ikon svg {
  width: 22px;
  height: 22px;
}

/* Bildirim İçerik */
.dh-bld-icerik {
  flex: 1;
  min-width: 0;
}
.dh-bld-baslik {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
  line-height: 1.3;
}
.dh-bld-metin {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.85);
  word-break: break-word;
}

/* Kapatma Düğmesi */
.dh-bld-kapat {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border: none;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  margin-top: -2px;
  margin-right: -4px;
}
.dh-bld-kapat:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

/* İlerleme Süre Çubuğu */
.dh-bld-sure-cubugu {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: rgba(255, 255, 255, 0.2);
  transform-origin: left;
  animation: dhBldSure linear forwards;
}
@keyframes dhBldSure {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

/* Bildirim Türlerine Göre Renk & Gölgeler */
.dh-bildirim-success {
  border-left: 4px solid #10b981;
}
.dh-bildirim-success .dh-bld-ikon {
  background: rgba(16, 185, 129, 0.15);
  color: #34d399;
}
.dh-bildirim-success .dh-bld-baslik {
  color: #34d399;
}
.dh-bildirim-success .dh-bld-sure-cubugu {
  background: #10b981;
}

.dh-bildirim-error {
  border-left: 4px solid #ef4444;
}
.dh-bildirim-error .dh-bld-ikon {
  background: rgba(239, 68, 68, 0.18);
  color: #f87171;
}
.dh-bildirim-error .dh-bld-baslik {
  color: #f87171;
}
.dh-bildirim-error .dh-bld-sure-cubugu {
  background: #ef4444;
}

.dh-bildirim-warning {
  border-left: 4px solid #f59e0b;
}
.dh-bildirim-warning .dh-bld-ikon {
  background: rgba(245, 158, 11, 0.18);
  color: #fbbf24;
}
.dh-bildirim-warning .dh-bld-baslik {
  color: #fbbf24;
}
.dh-bildirim-warning .dh-bld-sure-cubugu {
  background: #f59e0b;
}

.dh-bildirim-info {
  border-left: 4px solid #3b82f6;
}
.dh-bildirim-info .dh-bld-ikon {
  background: rgba(59, 130, 246, 0.18);
  color: #60a5fa;
}
.dh-bildirim-info .dh-bld-baslik {
  color: #60a5fa;
}
.dh-bildirim-info .dh-bld-sure-cubugu {
  background: #3b82f6;
}

.dh-bildirim-security {
  border-left: 4px solid #8b5cf6;
}
.dh-bildirim-security .dh-bld-ikon {
  background: rgba(139, 92, 246, 0.2);
  color: #a78bfa;
}
.dh-bildirim-security .dh-bld-baslik {
  color: #a78bfa;
}
.dh-bildirim-security .dh-bld-sure-cubugu {
  background: #8b5cf6;
}