/* ============================================================================
   Animiyum Lumen — yeni gorunum katmani.
   style.css ve inc/header.php icindeki satir ici <style> blogunu EZER; bu yuzden
   kapanis head etiketinden hemen once yuklenir. Mevcut sinif adlarinin uzerine
   biner, sablonlarda degisiklik gerektirmez. Kapatmak icin: ?tema=off
   Tema DAIMA koyu. Acik/beyaz varyant yok.
   ANA KURAL: tuval notr, mor yalniz vurgu. Eski sitede her yuzey mordu; sitenin
   agir hissettirmesinin sebebi renk degil, morun her yere yayilmis olmasiydi.
   ========================================================================= */

:root, html body {
  --bg:#0B0A0F; --bg-2:#0E0D13; --bg-3:#121118;
  --card:#121118; --card-2:#17151E;
  --line:rgba(255,255,255,.07); --line-2:rgba(255,255,255,.13);
  --text:#F2EEF7; --muted:#A9A2B5; --muted-2:#A9A2B5; --faint:#6B6577;
  --accent:#A855F7; --accent-strong:#9C4FE5; --accent-2:#C89BFF; --accent-3:#C89BFF; --acc-soft:#C89BFF; --accent-d:#7C3AED;
  --glow-rgb:168,85,247;
  --radius:12px;
  --grad:linear-gradient(135deg,#945BCE,#9C4FE5 55%,#7C3AED);
  --grad-bright:linear-gradient(135deg,#C89BFF,#A855F7);
  --shadow:0 24px 60px -20px rgba(0,0,0,.8);
  --glow:none; --glow-strong:0 18px 44px -16px rgba(168,85,247,.45);
  --ease:cubic-bezier(.22,.61,.36,1);
  /* Kart hover ritmi. Kalkis, golge ve goruntu zoomu bu TEK degeri
     paylasir. Ayrilirlarsa golge kartla ayni oranda buyumez. */
  --card-hover:.16s;
  --gut:clamp(20px,4vw,56px);
  --sect:88px;
}

html body { background:var(--bg); color:var(--text); }

/* Eski temanin her yere serptigi mor parilti ve mor kart zeminini sondur. */
html body .card-poster,
html body .grid .card,
html body .row-scroller .card { box-shadow:none; }

/* ---------------------------------------------------------------- BASLIK */
html body .nav { height:64px; background:transparent; border-bottom:1px solid transparent;
  box-shadow:none; transition:background .24s var(--ease), border-color .24s var(--ease); }
html body .nav.scrolled { background:rgba(11,10,15,.72); backdrop-filter:blur(20px) saturate(1.2);
  -webkit-backdrop-filter:blur(20px) saturate(1.2); border-bottom-color:var(--line); box-shadow:none; }
html body .nav-inner { height:64px; max-width:1440px; margin:0 auto; padding:0 var(--gut);
  display:flex; align-items:center; gap:28px; }
html body .brand { flex:0 0 auto; display:flex; align-items:center; }
html body .brand-logo { height:26px; width:auto; display:block; }
html body .nav-links { display:flex; align-items:center; gap:26px; flex:0 0 auto; }
html body .nav-links a { position:relative; padding:6px 0; font-size:14.5px; font-weight:500;
  color:var(--muted); border:0; background:none; transition:color .16s var(--ease); }
html body .nav-links a::after { content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:var(--accent); border-radius:2px; opacity:0; transition:opacity .16s var(--ease); }
html body .nav-links a:hover { color:var(--text); }
html body .nav-links a.on, html body .nav-links a.active { color:var(--accent-2); }
html body .nav-links a.on::after, html body .nav-links a.active::after { opacity:1; }
html body .nav-search { margin-left:auto; flex:0 0 auto; }
html body .nav-search input { width:240px; height:38px; border-radius:999px; background:var(--bg-2);
  border:1px solid var(--line); color:var(--text); padding:0 16px; font-size:13.5px;
  transition:border-color .16s var(--ease), width .24s var(--ease); }
html body .nav-search input::placeholder { color:var(--faint); }
html body .nav-search input:focus { outline:none; border-color:rgba(168,85,247,.55); width:280px; }
html body .nav-auth { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
html body .nav-prof, html body .nav-user { background:none; border:0; padding:0; border-radius:999px; }
html body .nav-prof img, html body .np-avatar, html body .np-ph { width:32px; height:32px; border-radius:50%; }
html body .nav-prominent { display:none; }   /* tek sira kurali: fazlaligi cikar */
/* Kisitli hesap seridi hero sayfalarinda kendi payini bu degiskenden aliyor
   (bkz. style.css `body.has-hero .kisit-serit`). Deger, asagidaki .main
   ust dolgusuyla AYNI olmali. */
:root{--nav-h:64px}
html body .main { padding-top:64px; }
html body.has-hero .main { padding-top:0; }

/* ------------------------------------------------------------------ HERO */
html body .hero { height:620px; min-height:620px; }
html body .hero-slide::before { background:linear-gradient(90deg,var(--bg) 0%,rgba(11,10,15,.86) 28%,rgba(11,10,15,.28) 62%,rgba(11,10,15,0) 100%); }
/* Alt kenar dikissiz erisin: sinematik yonun tanimlayici hamlesi. */
html body .hero-slide::after { height:300px;
  background:linear-gradient(0deg,var(--bg) 0%,rgba(11,10,15,.92) 22%,rgba(11,10,15,0) 100%); }
html body .hero-content { max-width:600px; }
html body .hero-eyebrow { color:var(--accent-2); font-size:.7rem; letter-spacing:.16em; margin-bottom:14px; }
html body .hero-content h1 { font-size:clamp(2.2rem,4.6vw,3.75rem); line-height:1.04;
  letter-spacing:-.035em; text-shadow:none; margin-bottom:14px; }
html body .hero-content p { color:var(--muted); font-size:15.5px; line-height:1.65; max-width:520px; }

/* --------------------------------------------------------------- BUTONLAR */
html body .btn { border-radius:10px; font-weight:600; letter-spacing:0; transition:.16s var(--ease); }
/* Beyaz metin tasiyan birincil yuzeyler icin erisilebilir ton.
   --accent (#A855F7) beyaza karsi 3,96:1, --grad'in acik duragi (#B771FF) 3,08:1 idi;
   ikisi de WCAG AA'nin 4,5:1 esiginin altinda. --accent kenarlik/parilti gibi
   metinsiz yerlerde kaldi (orada 3:1 yeterli), metin tasiyan dolgu bunu kullanir. */
html body .btn-primary { background:var(--accent-strong,#9C4FE5); border:0; box-shadow:none; color:#fff; padding:.72em 1.35em; }
html body .btn-primary:hover { background:#B771FF; box-shadow:none; transform:none; }
html body .btn-ghost { background:transparent; border:1px solid var(--line-2); color:var(--text); }
html body .btn-ghost:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }

/* ------------------------------------------------------------------ SATIR */
html body .row { margin-bottom:var(--sect); }
html body .row-head { max-width:1440px; margin:0 auto 20px; padding:0 var(--gut);
  display:flex; align-items:baseline; justify-content:space-between; gap:16px; }
html body .row-head h2 { font-size:clamp(1.25rem,2vw,1.75rem); font-weight:700; letter-spacing:-.02em; margin:0; }
html body .row-more, html body .row-head .cw-clear { color:var(--muted); font-size:13px; font-weight:500;
  text-decoration:none; border:0; background:none; }
html body .row-more:hover, html body .row-head .cw-clear:hover { color:var(--text); }
html body .row-scroller { gap:28px; padding:2px var(--gut) 10px; max-width:1440px; margin:0 auto; }
html body .row-scroller .card, html body .cw-item { width:216px; }
html body .row-scroller .cw-item .card { width:100%; }
html body .row-arrow { top:0; bottom:10px; opacity:0; }
html body .row:hover .row-arrow { opacity:1; }
html body .row-arrow.left { background:linear-gradient(90deg,var(--bg) 12%,rgba(11,10,15,0)); }
html body .row-arrow.right { background:linear-gradient(270deg,var(--bg) 12%,rgba(11,10,15,0)); }

/* ------------------------------------------------------------------- KART
   Referans sitenin hatasi buydu: ic ice kutu, ust uste rozet, dort satir meta.
   Kart = poster + baslik + TEK meta satiri. Baslik posterin ICINDE degil
   ALTINDA duruyor; kalabaligi bitiren asil karar bu. */
/* DIKKAT: sablonda .card-inner posterin ICINDE. Poster overflow:hidden oldugu icin
   basligi statik akisla asagi almak onu kirpiyordu. Cozum: posterin kirpmasini kaldir
   (yuvarlatmayi img ve scrim ustlensin), basligi posterin hemen altina top:100% ile
   yerlestir ve karta o kadar alt bosluk ayirt ki satir yuksekligi dogru olsun. */
html body .card { background:none; border:0; box-shadow:none; padding-bottom:58px; }
html body .card-poster { border-radius:0; overflow:visible; border:0; box-shadow:none;
  /* Bu kisayol style.css:123 listesini komple degistiriyordu ve box-shadow ile
     border-color listeden dusuyordu: ikisi de 0 ms ile ziplyordu. Ucu de ayni
     sure, ayni egri. (border-color: You temasindaki cerceve icin gerekli.) */
  transition:transform var(--card-hover) var(--ease), box-shadow var(--card-hover) var(--ease),
             border-color var(--card-hover) var(--ease); }
/* Golge posterde DEGIL goruntude duruyor. Poster hover sirasinda hic
   olceklenmiyor (genisligi sabit), buyuyen sey goruntu: scale(1.06).
   Golge poster kutusunda kalirsa kartla ayni oranda buyuyemez; bu yuzden
   style.css:124 kaynakli poster golgesi burada iptal ediliyor. */
html body .card:hover .card-poster { transform:translateY(-2px); box-shadow:none; }
html body .card-poster img { border-radius:12px; display:block;
  transition:transform var(--card-hover) var(--ease), box-shadow var(--card-hover) var(--ease); }
/* Golge artik goruntuyle birlikte olcekleniyor ve onun 12px kosesini izliyor
   (poster border-radius:0 oldugu icin eskiden kare koseliydi). */
html body .card:hover .card-poster img { box-shadow:var(--glow-strong); }
html body .card .scrim { border-radius:12px;
  background:linear-gradient(0deg,rgba(0,0,0,.55),rgba(0,0,0,0) 55%);
  opacity:0; transition:opacity .16s var(--ease); }
html body .card:hover .scrim { opacity:1; }
html body .card-inner { position:absolute; top:100%; left:0; right:0; bottom:auto;
  padding:10px 2px 0; background:none; transform:none; opacity:1; }
html body .card-title { font-size:14.5px; font-weight:600; color:var(--text); line-height:1.35;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
html body .card-sub { margin-top:5px; font-size:12.5px; color:var(--muted); font-weight:400; }
html body .card-sub .match { color:var(--muted); font-weight:500; }
html body .card-sub .dot { background:var(--faint); }
html body .card-tag { top:8px; left:8px; right:auto; font-size:10.5px; font-weight:600; letter-spacing:.02em;
  padding:3px 8px; border-radius:999px; background:rgba(8,6,14,.72); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.12); color:#EDE7F5; }
html body .badge-prem { top:8px; right:8px; left:auto; font-size:10.5px; padding:3px 8px; border-radius:999px;
  background:rgba(168,85,247,.9); border:0; }
html body .card-play { background:rgba(11,10,15,.6); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.22); box-shadow:none; }

/* Devam et kartlari */
html body .cw-card { padding-bottom:56px; }
html body .cw-card .card-poster { aspect-ratio:16/9; }
html body .cw-item .cw-del { z-index:4; }
html body .cw-progress { height:3px; background:rgba(255,255,255,.16); }
html body .cw-progress i { background:var(--accent); }
html body .cw-del { top:8px; right:8px; }

/* Sira numarasi */
html body .card-rank { gap:0; align-items:flex-end; }
html body .card-rank .num { font-size:6.5rem; -webkit-text-stroke:2px rgba(255,255,255,.13);
  color:transparent; min-width:52px; margin-right:-6px; }
html body .card-rank .card { width:196px; }

/* ------------------------------------------------------------------ IZGARA */
html body .grid { grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:28px; }
html body .container { max-width:1440px; padding-left:var(--gut); padding-right:var(--gut); }
html body .page-head { display:flex; align-items:baseline; gap:14px; margin:40px 0 28px; }
html body .page-head h1 { font-size:clamp(1.6rem,3vw,2.15rem); font-weight:800; letter-spacing:-.03em; }
html body .page-head .muted { color:var(--muted); font-size:13.5px; }

/* ------------------------------------------------------------------- DETAY */
html body .detail-hero { min-height:560px; }
html body .detail-hero::after { background:linear-gradient(0deg,var(--bg) 0%,rgba(11,10,15,.9) 25%,rgba(11,10,15,0) 100%); }
html body .detail-poster { border-radius:12px; box-shadow:var(--shadow); border:0; }
html body .detail-info h1 { font-size:clamp(1.9rem,3.6vw,3rem); letter-spacing:-.03em; line-height:1.06; }
html body .detail-meta { color:var(--muted); font-size:13.5px; }
html body .detail-desc { color:var(--muted); font-size:15px; line-height:1.7; max-width:640px; }
html body .chip { background:transparent; border:1px solid var(--line-2); color:var(--muted);
  border-radius:999px; font-size:12px; padding:4px 11px; font-weight:500; }
html body .chip:hover { border-color:rgba(255,255,255,.26); color:var(--text); }
html body .tag-type { background:rgba(168,85,247,.14); border:1px solid rgba(168,85,247,.4); color:var(--accent-2); }

html body .season-tabs { border-bottom:1px solid var(--line); gap:22px; }
html body .season-tab { background:none; border:0; border-radius:0; padding:10px 0; color:var(--muted);
  font-weight:600; font-size:14.5px; position:relative; }
html body .season-tab.active { color:var(--accent-2); }
html body .season-tab.active::after { content:""; position:absolute; left:0; right:0; bottom:-1px;
  height:2px; background:var(--accent); }

/* Bolum satiri: kart degil satir. Baslik satirin EN PARLAK ogesi olmali. */
html body .episode-list { display:flex; flex-direction:column; gap:0; }
html body .episode { display:flex; gap:18px; align-items:center; background:none; border:0;
  border-bottom:1px solid var(--line); border-radius:0; padding:16px 4px;
  transition:background .16s var(--ease); }
html body .episode:hover { background:rgba(255,255,255,.028); }
html body .episode-thumb { width:196px; flex:0 0 196px; border-radius:10px; overflow:hidden; }
html body .episode-body { min-width:0; }
html body .episode-name { color:var(--text); font-size:15.5px; font-weight:600; letter-spacing:-.01em; }
html body .episode-no { color:var(--accent-2); font-weight:600; font-size:13px; }
html body .episode-desc { color:var(--muted); font-size:13.5px; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html body .filler-note { background:transparent; border:1px solid var(--line-2); color:var(--faint);
  border-radius:999px; font-size:11px; padding:2px 8px; }

/* ---------------------------------------------------------------- OYNATICI */
html body .watch-page { max-width:1440px; gap:28px;
  padding-left:clamp(16px,2.6vw,40px); padding-right:clamp(16px,2.6vw,40px); }
html body .xp { border-radius:12px; overflow:hidden; box-shadow:none; border:0; }
html body .watch-title { font-size:1.6rem; font-weight:700; letter-spacing:-.02em; }
html body .watch-info { color:var(--muted); font-size:13.5px; }
html body .watch-desc { color:var(--muted); font-size:14.5px; line-height:1.7; }
html body .watch-badges .chip, html body .wb-pill { background:transparent; border:1px solid var(--line-2); color:var(--muted); }
html body .wb-star { color:var(--accent-2); }
html body .ic-btn { background:transparent; border:1px solid var(--line-2); border-radius:10px;
  color:var(--text); font-weight:500; transition:.16s var(--ease); }
html body .ic-btn:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); }
html body .ic-beta-tag { background:rgba(168,85,247,.18); border:1px solid rgba(168,85,247,.45);
  color:var(--accent-2); border-radius:999px; font-size:9.5px; letter-spacing:.06em; padding:1px 6px; }
html body .xp-sources button, html body .xp-sources .chip { border-radius:999px; }

/* Yandaki bolum listesi */
html body .watch-side { border:1px solid var(--line); border-radius:12px; background:var(--card); overflow:hidden; }
html body .eps-head, html body .eps-head-row { border-bottom:1px solid var(--line); background:none; padding:14px 16px; }
html body .eps-list { padding:0; }
html body .ep-item { display:flex; gap:12px; align-items:center; padding:12px 16px; border-radius:0;
  border:0; border-bottom:1px solid var(--line); background:none; position:relative; }
html body .ep-item:hover { background:rgba(255,255,255,.03); }
html body .ep-item.ep-now, html body .ep-item.active { background:rgba(168,85,247,.10); }
html body .ep-item.ep-now::before, html body .ep-item.active::before { content:""; position:absolute;
  left:0; top:0; bottom:0; width:3px; background:var(--accent); }
html body .ep-thumb { width:120px; flex:0 0 120px; border-radius:8px; overflow:hidden; }
html body .ep-name { color:var(--text); font-size:13.5px; font-weight:600; }
html body .ep-meta { color:var(--muted); font-size:12px; }
html body .ep-no { color:var(--accent-2); font-weight:600; }
html body .eps-search input { background:var(--bg-2); border:1px solid var(--line); border-radius:999px; color:var(--text); }

/* ------------------------------------------------------------------ KESFET */
html body .kf-feed { gap:var(--sect); }
html body .kf-c, html body .kf-cl { border:1px solid var(--line); border-radius:12px; background:var(--card); }
html body .kf-btn { background:rgba(11,10,15,.6); border:1px solid var(--line-2); border-radius:50%;
  backdrop-filter:blur(8px); color:var(--text); }
html body .kf-btn:hover { border-color:rgba(255,255,255,.3); }
html body .kf-btn.on, html body .kf-btn.liked { color:var(--accent-2); border-color:rgba(168,85,247,.5); }
html body .kf-go { background:var(--accent); border:0; border-radius:10px; color:#fff; font-weight:600; }
html body .kf-go:hover { background:#B771FF; }
html body .kf-go.ghost { background:transparent; border:1px solid var(--line-2); color:var(--text); }
html body .kf-meta, html body .kf-desc, html body .kf-ep { color:var(--muted); }
html body .kf-head { color:var(--text); font-weight:600; }

/* ------------------------------------------------------------------ AYARLAR */
html body .account-settings-grid, html body .dev-list { gap:28px; }
html body .account-summary, html body .account-delete-card, html body .dev-item {
  background:var(--card); border:1px solid var(--line); border-radius:12px; box-shadow:none; }
html body .dev-name { color:var(--text); font-weight:600; }
html body .dev-meta, html body .dev-status { color:var(--muted); font-size:12.5px; }
html body input[type=text], html body input[type=email], html body input[type=password],
html body input[type=search], html body textarea, html body select {
  background:var(--bg-2); border:1px solid var(--line); border-radius:10px; color:var(--text); }
html body input:focus, html body textarea:focus, html body select:focus {
  outline:none; border-color:rgba(168,85,247,.55); box-shadow:0 0 0 3px rgba(168,85,247,.14); }

/* ------------------------------------------------------------------- FOOTER */
html body .footer { border-top:1px solid var(--line); padding-top:var(--sect); background:none; }
html body .footer a { color:var(--muted); }
html body .footer a:hover { color:var(--text); }

/* --------------------------------------------------------------- DAR EKRAN */
@media(max-width:900px){
  html body { --sect:56px; }
  html body .hero { height:auto; min-height:480px; }
  html body .row { margin-bottom:56px; }
  html body .row-scroller .card, html body .cw-item { width:150px; }
  html body .episode-thumb { width:132px; flex-basis:132px; }
  html body .nav-search input { width:150px; }
  html body .nav-search input:focus { width:190px; }
}

/* ------------------------------------------------- KUCUK RESIM ORANLARI
   Sablonda kucuk resimlere sabit yukseklik verilmemis; genislik degisince
   goruntu 196x76 gibi ezilmis bir orana dusuyordu. Orani kutuya sabitleyip
   goruntuyu ortalayarak kirp. */
html body .episode-thumb { aspect-ratio:16/9; height:auto; }
html body .episode-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
html body .ep-thumb { aspect-ratio:16/9; height:auto; }
html body .ep-thumb img { width:100%; height:100%; object-fit:cover; display:block; }
html body .cw-card .card-poster img { width:100%; height:100%; object-fit:cover; }

/* Izgara sayfalarinda da baslik posterin altinda duruyor; kartin alt boslugu
   satir yuksekligini dogru hesaplasin. */
html body .grid .card { padding-bottom:58px; }

/* ============================================================================
   BOLUM 2 — kalan sayfalar.
   Tek bir kalip her yerde tekrar ediyor:
     panel  = var(--card) zemin + 1px var(--line) kenar + 12px kose, golge YOK
     sekme  = duz metin + aktifte mor 2px alt cizgi (hap/kutu degil)
     baslik = satirin en parlak ogesi, yardimci metin var(--muted)
   Sayfalarin kendi ozel sinifi olsa da gorunum bu uc kuraldan tureiyor.
   ========================================================================= */

/* Ortak panel kalibi — asagidaki sayfalarin hepsinde ayni kutu. */
html body .settings-card,
html body .account-summary,
html body .account-delete-card,
html body .dev-item,
html body .leader-card,
html body .community-rules,
html body .community-side,
html body .support-shell,
html body .auth-card,
html body .kf-sheet-card,
html body .dl-feat,
html body .cr-tpl,
html body .cr-mailbox {
  background:var(--card); border:1px solid var(--line); border-radius:12px;
  box-shadow:none; backdrop-filter:none;
}

/* -------------------------------------------------------------- AYARLAR */
html body .settings-shell { max-width:1180px; margin:0 auto; padding:0 var(--gut); gap:48px; }
html body .settings-tabbar { border:0; background:none; }
html body .settings-tabs { display:flex; flex-direction:column; gap:2px; border:0; background:none; }
html body .settings-tabs a, html body .settings-tabs button, html body .settings-tabs .tab {
  display:flex; align-items:center; gap:10px; height:40px; padding:0 12px; border:0;
  border-radius:10px; background:none; color:var(--muted); font-size:14px; font-weight:500;
  position:relative; transition:color .16s var(--ease), background .16s var(--ease); }
html body .settings-tabs a:hover, html body .settings-tabs button:hover { color:var(--text); background:rgba(255,255,255,.04); }
html body .settings-tabs .is-active, html body .settings-tabs .active,
html body .settings-tabs a.is-active, html body .settings-tabs button.is-active {
  color:var(--accent-2); background:rgba(168,85,247,.12); }
html body .settings-tabs .is-active::before, html body .settings-tabs .active::before {
  content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px;
  background:var(--accent); border-radius:0 3px 3px 0; }

html body .settings-card { padding:24px; margin-bottom:28px; }
html body .settings-card-head { border-bottom:1px solid var(--line); padding-bottom:14px; margin-bottom:6px; }
html body .settings-card-head h2, html body .settings-card-head h3 {
  font-size:18px; font-weight:700; letter-spacing:-.015em; color:var(--text); margin:0; }
html body .settings-subhead { color:var(--muted); font-size:13px; font-weight:400; margin-top:4px; }
/* Ayar satiri: etiket parlak ve kalin, yardimci metin sonuk ve kucuk. */
html body .settings-field { display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:16px 0; border-bottom:1px solid var(--line); }
html body .settings-field:last-child { border-bottom:0; }
html body .settings-field > label, html body .settings-field .lbl { color:var(--text); font-size:15px; font-weight:600; }
html body .settings-note { color:var(--muted); font-size:13px; line-height:1.55; margin-top:4px; }
html body .settings-actions, html body .account-form-actions {
  display:flex; justify-content:flex-end; gap:10px; padding-top:20px; border-top:1px solid var(--line); }
html body .settings-saved { color:#22C55E; font-size:13px; }
html body .settings-swatches { display:flex; gap:10px; flex-wrap:wrap; }
html body .settings-swatches button, html body .settings-swatches label { border-radius:50%; border:2px solid transparent; }
html body .settings-swatches .is-active, html body .settings-swatches .active { border-color:var(--accent); }
html body .settings-checkcell { display:flex; align-items:center; gap:9px; color:var(--text); font-size:14px; }
html body input[type=checkbox], html body input[type=radio], html body .settings-toggle input { accent-color:var(--accent); }
html body .dev-item { padding:16px 18px; }
html body .dev-cur { color:var(--accent-2); font-weight:600; font-size:12px; }
html body .dev-empty, html body .gx-empty, html body .leader-empty, html body .kf-cempty { color:var(--muted); }

/* ------------------------------------------------------------- TOPLULUK */
html body .community-shell { max-width:1280px; margin:0 auto; padding:0 var(--gut); gap:40px; }
html body .community-hero { background:none; border:0; border-bottom:1px solid var(--line);
  padding:44px 0 32px; margin-bottom:40px; }
html body .community-hero h1 { font-size:clamp(1.7rem,3vw,2.3rem); font-weight:800; letter-spacing:-.03em; }
html body .community-kicker { color:var(--accent-2); font-size:.7rem; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; margin-bottom:10px; }
html body .community-grid { gap:28px; }
html body .community-rules, html body .community-side { padding:20px; }
html body .leader-card { padding:18px 20px; }
html body .leader-list { display:flex; flex-direction:column; }
html body .leader-user { display:flex; align-items:center; gap:12px; padding:11px 0;
  border-bottom:1px solid var(--line); }
html body .leader-user:last-child { border-bottom:0; }
html body .leader-avatar { width:34px; height:34px; border-radius:50%; }
html body .leader-rank { color:var(--faint); font-weight:700; font-size:13px; min-width:22px; }
html body .leader-user .nm, html body .leader-user b { color:var(--text); font-weight:600; font-size:14px; }
html body .leader-privacy { color:var(--faint); font-size:12px; }
html body .leader-head { color:var(--text); font-weight:700; font-size:16px;
  padding-bottom:12px; border-bottom:1px solid var(--line); margin-bottom:6px; }

/* --------------------------------------------------------------- DESTEK */
html body .support-shell { max-width:960px; margin:0 auto; overflow:hidden; }
html body .support-head { border-bottom:1px solid var(--line); padding:20px 22px; background:none; }
html body .support-head h1, html body .support-head h2 { font-size:19px; font-weight:700; letter-spacing:-.015em; }
html body .support-head-copy { color:var(--muted); font-size:13.5px; }
html body .support-messages { padding:20px 22px; background:none; }
html body .support-messages .msg, html body .support-messages li { border-radius:12px; }
html body .support-ai-badge { background:rgba(168,85,247,.16); border:1px solid rgba(168,85,247,.42);
  color:var(--accent-2); border-radius:999px; font-size:10.5px; font-weight:700;
  letter-spacing:.06em; padding:2px 8px; }
html body .support-ai-avatar { border-radius:50%; border:1px solid var(--line-2); }
html body .support-send { border-top:1px solid var(--line); padding:14px 18px; background:var(--bg-2); }
html body .support-send input, html body .support-send textarea { border-radius:12px; }
html body .support-alert, html body .support-human-notice, html body .support-unavailable {
  background:rgba(168,85,247,.08); border:1px solid rgba(168,85,247,.28);
  border-radius:12px; color:var(--muted); padding:14px 16px; }
html body .support-intents { display:flex; gap:8px; flex-wrap:wrap; }
html body .support-intents button { border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--muted); font-size:13px; padding:6px 13px; }
html body .support-intents button:hover { color:var(--text); border-color:rgba(255,255,255,.28); }
html body .support-live { color:#22C55E; font-size:12.5px; }

/* ----------------------------------------------------------------- ARAMA */
html body .search-big { max-width:1440px; margin:36px auto 30px; padding:0 var(--gut); }
html body .search-big input { width:100%; height:56px; border-radius:14px; font-size:16px;
  padding:0 20px; background:var(--bg-2); border:1px solid var(--line); }
html body .empty { color:var(--muted); }

/* ----------------------------------------------------------------- TURLER */
html body .gx-hero { padding:52px 20px 8px; }
html body .gx-hero h1 { background:none; -webkit-text-fill-color:currentColor; color:var(--text);
  font-size:clamp(1.9rem,4vw,2.7rem); font-weight:800; letter-spacing:-.035em; }
html body .gx-hero p { color:var(--muted); }
html body .gx-wrap { max-width:1440px; padding:0 var(--gut); }
html body .gx-grid { gap:28px; }
html body .gx-card { border-radius:12px; border:1px solid var(--line); box-shadow:none;
  overflow:hidden; transition:border-color .16s var(--ease), transform .16s var(--ease); }
html body .gx-card:hover { border-color:var(--line-2); transform:translateY(-2px); }
html body .gx-shade { background:linear-gradient(0deg,rgba(11,10,15,.94),rgba(11,10,15,.30) 62%,rgba(11,10,15,.08)); }
html body .gx-name { color:var(--text); font-weight:700; font-size:16px; letter-spacing:-.015em; }
html body .gx-count, html body .gx-meta { color:var(--muted); font-size:12.5px; font-weight:500; }
html body .gx-arrow { color:var(--accent-2); }

/* --------------------------------------------------------------- PROFIL */
html body .pk-head { border-bottom:1px solid var(--line); padding-bottom:14px; }
html body .pk-title { color:var(--text); font-weight:700; letter-spacing:-.015em; }
html body .pk-count { color:var(--muted); font-size:12.5px; }
html body .pk-search input { border-radius:999px; height:40px; }
html body .pk-chips { display:flex; gap:8px; flex-wrap:wrap; }
html body .pk-chips button { border-radius:999px; border:1px solid var(--line-2);
  background:transparent; color:var(--muted); font-size:12.5px; padding:5px 12px; }
html body .pk-chips button.on, html body .pk-chips button.is-active {
  background:rgba(168,85,247,.14); border-color:rgba(168,85,247,.45); color:var(--accent-2); }
html body .pk-clear { color:var(--muted); }
html body .av-initial { background:var(--grad); }

/* ------------------------------------------------------- GIRIS / KAYIT */
html body .auth-page { background:var(--bg); }
html body .auth-card { padding:32px; max-width:440px; margin:0 auto; }
html body .auth-card h1 { font-size:1.6rem; font-weight:800; letter-spacing:-.03em; }
html body .auth-lead, html body .auth-alt, html body .auth-recovery { color:var(--muted); font-size:13.5px; }
html body .auth-alt a, html body .auth-recovery a { color:var(--accent-2); }
html body .btn-block { width:100%; }
html body .btn-oauth, html body .btn-sso { background:var(--bg-2); border:1px solid var(--line-2);
  color:var(--text); border-radius:10px; font-weight:600; }
html body .btn-oauth:hover, html body .btn-sso:hover { border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.05); }
html body .auth-sep, html body .sso-sep { color:var(--faint); font-size:12px; }
html body .auth-sep::before, html body .auth-sep::after,
html body .sso-sep::before, html body .sso-sep::after { background:var(--line); }
html body .auth-notice, html body .alert { border-radius:12px; border:1px solid var(--line-2);
  background:var(--bg-2); color:var(--muted); }
html body .step-dots span, html body .step-track i { background:var(--line-2); }
html body .step-dots span.on, html body .step-track i.on { background:var(--accent); }

/* --------------------------------------------------------------- INDIR */
html body .dl-page { max-width:1180px; margin:0 auto; padding:0 var(--gut); }
html body .dl-head h1 { font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:800; letter-spacing:-.035em; }
html body .dl-sub, html body .dl-desc, html body .dl-meta, html body .dl-help { color:var(--muted); }
html body .dl-grid, html body .dl-feat-grid { gap:28px; }
html body .dl-feat { padding:20px; }
html body .dl-ico { color:var(--accent-2); }
html body .dl-notice, html body .dl-warn { background:rgba(168,85,247,.08);
  border:1px solid rgba(168,85,247,.28); border-radius:12px; color:var(--muted); padding:14px 16px; }
html body .dl-hash, html body .dl-verify { background:var(--bg-2); border:1px solid var(--line);
  border-radius:10px; color:var(--muted); font-size:12.5px; }
html body .dl-hash-label { color:var(--faint); font-size:11.5px; letter-spacing:.05em; }
html body .dl-copy { border:1px solid var(--line-2); background:transparent; color:var(--text); border-radius:8px; }

/* -------------------------------------------------------------- KESFET */
html body .kf-wrap { max-width:1180px; margin:0 auto; }
/* Kesfet klipleri DIKEY: olculdu 1214x2160 (~9:16). Ustteki 1180px sarmalayici
   basligi genisletmek icin; ama AKIS da genisleyince sahne 2.03:1 yatay bir kutuya
   donuyor ve object-fit:cover dikey klibin yalnizca %27lik orta seridini gosteriyordu
   (video cok buyuk, goremiyorum). Akisi klibin oranina kilitliyoruz; yukseklik
   zaten calc(100svh - 150px), genislik de onun 9/16si olsun ki klip tam otursun. */
html body .kf-feed { max-width:calc((100svh - 150px) * 0.5625); margin-left:auto; margin-right:auto; }
html body .kf-poster, html body .kf-series { border-radius:14px; overflow:hidden; }
html body .kf-shade { background:linear-gradient(0deg,rgba(11,10,15,.92),rgba(11,10,15,0) 58%); }
html body .kf-rail { display:flex; flex-direction:column; gap:14px; }
html body .kf-mute { background:rgba(11,10,15,.6); border:1px solid var(--line-2);
  border-radius:999px; backdrop-filter:blur(8px); color:var(--text); }
html body .kf-sheet { background:rgba(11,10,15,.86); backdrop-filter:blur(20px); }
html body .kf-sheet-card { padding:0; overflow:hidden; }
html body .kf-sheet-head { border-bottom:1px solid var(--line); padding:14px 18px;
  color:var(--text); font-weight:700; }
html body .kf-spin { border-top-color:var(--accent); }

/* --------------------------------------------------------- HUKUKI / TELIF */
html body .wrap, html body .cr-page { max-width:820px; margin:0 auto; padding:0 var(--gut); }
html body .wrap h1, html body .cr-page h1 { font-size:clamp(1.7rem,3vw,2.2rem); font-weight:800; letter-spacing:-.03em; }
html body .wrap h2, html body .cr-page h2 { font-size:1.15rem; font-weight:700; letter-spacing:-.015em;
  margin-top:40px; padding-top:24px; border-top:1px solid var(--line); }
html body .wrap p, html body .wrap li, html body .cr-page p, html body .cr-page li {
  color:var(--muted); line-height:1.75; font-size:15px; }
html body .wrap .intro, html body .cr-sub, html body .cr-note { color:var(--muted); }
html body .wrap .upd { color:var(--faint); font-size:12.5px; }
html body .wrap .nav a { color:var(--accent-2); }
html body .cr-mail, html body .cr-id, html body .cr-mailbox-l { color:var(--accent-2); font-weight:600; }
html body .cr-tpl, html body .cr-tplwrap { background:var(--bg-2); }
html body .cr-tpl { padding:18px; font-size:13.5px; line-height:1.7; color:var(--muted); }
html body .cr-copy { border:1px solid var(--line-2); background:transparent; color:var(--text); border-radius:8px; }
html body .cr-verify { color:var(--muted); }

/* ------------------------------------------------------- BOS DURUM / MASKOT
   Maskot markanin kisiligi; kalsin ama cercevesi sakinlesin. */
html body .mascot-state, html body .empty-state { background:none; border:0; color:var(--muted); }
html body .mascot-state h3, html body .empty-state h3 { color:var(--text); font-weight:700; }

/* ============================================================================
   BOLUM 3 — TAM GENISLIK duzeltmesi.

   SORUN: icerik 1440px'lik ortalanmis bir sutuna hapsedilmisti. 1900px ekranda
   solda 225px, sagda 236px olu bosluk kaliyor, 13 karttan yalnizca 6'si
   goruluyordu. Sonuc hem bos hem sikisik gorunuyordu: bosluk yanlarda birikip
   iceride kart kalmiyordu.

   COZUM: sabit genislik tavani kalkti, sayfa ekrani dolduruyor. Kart genisligi
   artik piksel degil, satirin kendi ic genisliginin bolunmesiyle hesaplaniyor:
   flex-basis yuzdesi kapsayicinin icerik kutusuna gore cozuldugu icin, ekran ne
   kadar genisse o kadar kart TAM olarak siga.
   ========================================================================= */

html body {
  --gut:clamp(16px,2.2vw,40px);   /* kenar boslugu: 56 -> 40 */
  --gap:18px;                     /* kartlar arasi: 28 -> 18 */
  --sect:56px;                    /* bolum arasi: 88 -> 56 */
  --cols:10;                      /* bir satirda gorunecek kart sayisi */
}
@media(max-width:1680px){ html body{ --cols:8; } }
@media(max-width:1400px){ html body{ --cols:7; } }
@media(max-width:1180px){ html body{ --cols:5; } }
@media(max-width:900px) { html body{ --cols:4; --sect:44px; } }
@media(max-width:680px) { html body{ --cols:3; } }
@media(max-width:460px) { html body{ --cols:2; } }

/* Genislik tavanlarini kaldir — sayfa ekrani dolsun. */
html body .nav-inner,
html body .row-head,
html body .row-scroller,
html body .container,
html body .watch-page,
html body .gx-wrap,
html body .dl-page,
html body .settings-shell,
html body .community-shell { max-width:none; }

/* Satir: bosluklar kuculdu, kartlar satiri boler. */
html body .row { margin-bottom:var(--sect); }
html body .row-scroller { gap:var(--gap); padding:2px var(--gut) 10px; }
html body .row-head { margin-bottom:16px; padding:0 var(--gut); }

/* Kart genisligi = (satirin ic genisligi - aradaki bosluklar) / kart sayisi.
   Yuzde temelli flex-basis kapsayicinin ICERIK kutusuna gore cozulur; boylece
   kenar boslugu dusuldukten sonra kalan alan tam olarak bolunur ve satirin
   sagi bos kalmaz. */
html body .row-scroller > .card,
html body .row-scroller > .cw-item,
html body .row-scroller > .card-rank {
  flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  width:calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols));
  min-width:0;
}
/* Sira numarali satirda numara sabit, poster kalan alani alir. */
html body .card-rank .card { width:auto; flex:1 1 auto; min-width:0; }
html body .card-rank .num { font-size:clamp(2.6rem,4vw,5rem); min-width:38px; margin-right:-4px; }

/* Izgara sayfalari da ayni ritmi kullansin. */
html body .grid { gap:var(--gap); grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); }
html body .gx-grid, html body .dl-grid, html body .dl-feat-grid,
html body .account-settings-grid, html body .community-grid { gap:var(--gap); }

/* ------------------------------------------------------------------- HERO
   620px ekranin ucte ikisini yiyordu; ilk satir katlanmanin altinda kaliyordu. */
html body .hero { height:clamp(360px,52vh,520px); min-height:0; }
html body .hero-slide::after { height:220px; }
html body .hero-content h1 { font-size:clamp(1.9rem,3.4vw,3rem); }
html body .hero-content p { font-size:15px; -webkit-line-clamp:2; }

/* ------------------------------------------- DEVAM ET: gorsel tam gorunsun
   Bu satirin verisi POSTER (dikey 2:3). Onu 16:9 kutuya sokmak goruntunun
   ortasindan ince bir serit kesiyordu — sikayet edilen "gorseller tam degil"
   buydu. Kutu posterin kendi oranina donuyor. */
html body .cw-card { padding-bottom:58px; }
html body .cw-card .card-poster { aspect-ratio:2/3; }
html body .cw-card .card-poster img { width:100%; height:100%; object-fit:cover; object-position:center top; }

/* Detay ve oynatici da tam genislige yayilsin. */
html body .detail-hero-inner, html body .watch-main { max-width:none; }

/* --------------------------------------------------- SIRA NUMARASI: BINDIRME
   Numara kartin YANINDA dururken 38px calip trend posterlerini digerlerinden
   dar birakiyordu (136px vs 170px). Artik posterin sol alt kosesine biniyor:
   poster satirdaki diger kartlarla ayni genislikte ve 10 tanesi ekrana sigmaya
   devam ediyor. */
html body .row-scroller > .card-rank { position:relative; }
html body .card-rank .card { width:100%; flex:1 1 auto; }
html body .card-rank .num { position:absolute; left:-8px; bottom:44px; z-index:2;
  width:auto; min-width:0; margin:0; pointer-events:none; line-height:.72;
  font-size:clamp(2.4rem,3.4vw,4.2rem);
  -webkit-text-stroke:2px rgba(255,255,255,.22); color:transparent;
  text-shadow:0 2px 18px rgba(0,0,0,.65); }

/* ============================================================================
   BOLUM 5 — hero ve arama kutusu duzeltmeleri.
   ========================================================================= */

/* --------------------------------------------------------------- ARAMA
   Sablonda .nav-search FORM'un kendisi zaten hap seklinde bir kutu (zemin +
   kenarlik + 999px kose). Ben ayrica INPUT'a zemin/kenarlik/kose vermistim;
   iki kutu ic ice gorunuyordu. Kutu formda kalir, input seffaflasir. */
html body .nav-search { display:flex; align-items:center; gap:2px; height:38px;
  padding:0 4px 0 14px; border-radius:999px;
  background:var(--bg-2); border:1px solid var(--line);
  transition:border-color .16s var(--ease); }
html body .nav-search:focus-within { border-color:rgba(168,85,247,.55); }
html body .nav-search input {
  width:210px; height:100%; background:none; border:0; border-radius:0;
  padding:0; font-size:13.5px; color:var(--text); box-shadow:none; }
html body .nav-search input:focus { outline:none; border:0; box-shadow:none; width:250px; }
html body .nav-search button { background:none; border:0; padding:0 8px; height:100%;
  color:var(--muted); display:flex; align-items:center; }
html body .nav-search button:hover { color:var(--text); }

/* ---------------------------------------------------------------- HERO
   Baslik sablonda h2.hero-title; onceki kuralim h1'i hedefledigi icin 80px
   kalmisti. 80px baslik + 100px alt bosluk, 494px hero'ya sigmiyordu: uzun
   isimli slaytlarin icerigi yukari tasip sabit basligin ALTINDA kaliyordu
   (olculen top: -61px). Baslik kucultuldu, alt bosluk azaltildi, ust bosluk
   basligi temizleyecek kadar birakildi. */
html body .hero-slide { padding:96px var(--gut) 60px; }
html body .hero-title,
html body .hero-content h1,
html body .hero-content h2 {
  font-size:clamp(1.7rem,2.6vw,2.7rem); line-height:1.06; letter-spacing:-.035em;
  margin:0 0 12px; text-shadow:none; max-width:15ch; }
html body .hero-eyebrow { margin-bottom:10px; }
html body .hero-meta { font-size:13.5px; color:var(--muted); margin-bottom:14px; }
html body .hero-content > p { font-size:14.5px; line-height:1.6; margin-bottom:22px;
  max-width:520px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
html body .hero-actions { gap:10px; }
/* Icerik hicbir kosulda hero'nun disina tasmasin. */
html body .hero-content { max-height:100%; overflow:hidden; }

/* ------------------------------------------------- HERO BASLIGI: OZGULLUK
   style.css:89 basligi ".hero-content .hero-title" ile tanimliyor (iki sinif,
   ozgulluk 0-2-0). Onceki kuralim "html body .hero-title" idi: tek sinif +
   iki eleman (0-1-2). Sinif sayisi once bakildigi icin onlarinki kazaniyor ve
   baslik 5rem = 80px kaliyordu. Ayni yapiyi kullanip bir sinif daha ekliyorum. */
html body .hero-content h1,
html body .hero-content .hero-title {
  font-family:var(--serif);
  font-size:clamp(1.7rem,2.6vw,2.7rem);
  line-height:1.06; letter-spacing:-.035em;
  margin:0 0 12px; text-shadow:none; max-width:16ch;
}
@media(max-width:900px){
  html body .hero-content h1,
  html body .hero-content .hero-title { font-size:clamp(1.5rem,5.6vw,2rem); margin-bottom:10px; }
}

/* ============================================================================
   PROFIL TEMALARI — govdedeki data-theme ile secilir (bkz. inc/user_prefs.php).
   Tema YUZEY tonlarini kurar; vurgu rengi ayri bir tercih (accentColor) ve
   govdeye satir ici --accent olarak basilir, dolayisiyla ikisi serbestce
   birlesir. HEPSI KOYU; acik/beyaz varyant bilerek yok.
   ========================================================================= */

html body[data-theme="murdum"] {
  --bg:#0E0716; --bg-2:#120A1C; --bg-3:#1B1030;
  --card:#160D26; --card-2:#1F1436;
  --line:rgba(255,255,255,.08); --line-2:rgba(255,255,255,.15);
  --text:#F3EDFA; --muted:#B0A3C2; --faint:#6F6483;
}
html body[data-theme="gece"] {
  --bg:#080B14; --bg-2:#0B1019; --bg-3:#131B2C;
  --card:#0F1520; --card-2:#161F2E;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.145);
  --text:#EEF2F9; --muted:#9EA9BC; --faint:#636D80;
}
html body[data-theme="komur"] {
  --bg:#0C0C0D; --bg-2:#101011; --bg-3:#1A1A1C;
  --card:#141416; --card-2:#1C1C1F;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.15);
  --text:#F2F2F3; --muted:#A6A6AA; --faint:#6A6A70;
}
html body[data-theme="orman"] {
  --bg:#070F0C; --bg-2:#0A1410; --bg-3:#10201A;
  --card:#0D1913; --card-2:#14241C;
  --line:rgba(255,255,255,.075); --line-2:rgba(255,255,255,.145);
  --text:#EDF5F0; --muted:#9DB3A7; --faint:#63776C;
}

/* Hero ve satir gecisleri zemin rengini kullaniyor; tema degisince onlar da
   uymalı, yoksa gradyanin dibinde eski rengin serit gibi kaldigi goruluyor. */
html body[data-theme] .hero-slide::before {
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 86%,transparent) 28%,color-mix(in srgb,var(--bg) 28%,transparent) 62%,transparent 100%);
}
html body[data-theme] .hero-slide::after {
  background:linear-gradient(0deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 92%,transparent) 22%,transparent 100%);
}
/* WebGL hero'nun perdesi bu listeye hic girmemisti: style.css:1034 onu eski
   varsayilan zemine (#0f051d, mor) sabitliyor ve HICBIR tema ezmiyordu. Sonuc,
   dort temada da hero'nun soluna mor bir orti dusuyordu -- Modern'de fark
   edilmiyor cunku zaten koyu mor, ama Keskin/Akici/Kor'da soguk bir leke.
   Kardes kurallarla ayni kalip: renk var(--bg)'den geliyor. */
html body[data-theme] .hero-gl-scrim {
  background:linear-gradient(90deg,var(--bg) 0%,color-mix(in srgb,var(--bg) 80%,transparent) 30%,color-mix(in srgb,var(--bg) 16%,transparent) 62%,transparent 100%),
             linear-gradient(0deg,var(--bg) 2%,transparent 34%);
}
html body[data-theme] .row-arrow.left  { background:linear-gradient(90deg,var(--bg) 12%,transparent); }
html body[data-theme] .row-arrow.right { background:linear-gradient(270deg,var(--bg) 12%,transparent); }
/* Ihbar penceresi style.css:875'te sabit mor yaziImis
   (linear-gradient(145deg,rgba(34,18,52,.99),rgba(16,7,29,.99))); kapatma
   dugmesinin odak/hover rengi de oyle. Jetonlara baglaniyor. */
html body[data-theme] .content-report-panel {
  background:linear-gradient(145deg,var(--card-2),var(--bg-2));
}
html body[data-theme] .content-report-close:hover,
html body[data-theme] .content-report-close:focus-visible {
  border-color:color-mix(in srgb,var(--accent) 65%,transparent);
  background:color-mix(in srgb,var(--accent) 20%,transparent);
}
html body[data-theme] .nav.scrolled {
  background:color-mix(in srgb,var(--bg) 72%,transparent);
}

/* Ayarlardaki tema secici: yarim-yarim onizleme dairesi. */
html body .settings-themes .settings-swatch span { box-shadow:0 0 0 1px rgba(255,255,255,.16) inset; }

/* ============================================================================
   BOLUM 8 — cakisma, logo ve ok duzeltmeleri.
   ========================================================================= */

/* ---------------------------------------------------- SATIR/HERO CAKISMASI
   style.css:101 -> .rows{margin-top:-78px}. Eski tasarimda hero 90vh idi ve
   altinda 260px'lik bir gradyan vardi; satirlarin o gradyanin icine girmesi
   kasitliydi. Hero 494px'e inince ayni cekme, satiri hero'nun ICERIGININ
   uzerine bindirdi (olculen cakisma: tam 78px). Modern temada cekme yok. */
html body .rows { margin-top:0; padding-bottom:56px; }
@media(max-width:900px){ html body .rows { margin-top:0; } }
/* Hero ile ilk satir arasinda nefes payi. */
html body.has-hero .rows { padding-top:var(--sect); }

/* ------------------------------------------------------------------- LOGO */
html body .brand-logo { height:34px; }
@media(max-width:680px){ html body .brand-logo { height:28px; } }

/* -------------------------------------------------------------- OK TUSLARI
   Oklar satirin TAMAMI kadar uzuyordu (356px yuksekliginde 60px'lik seritler);
   posterin disina tasip basligin ustune biniyor, fare oraya girince de kart
   hover'ini yiyordu. Artik yalnizca poster hizasinda ve daha dar. */
html body .row-arrow { top:0; bottom:58px; width:clamp(34px,3vw,46px); z-index:3; }
html body .row-arrow svg { width:24px; height:24px; }
html body .row:hover .row-arrow { opacity:1; }
html body .row-arrow:disabled, html body .row-arrow[hidden] { display:none; }

/* ============================================================================
   MOBIL DUZELTMELERI  (modern.css icinde: Keskin de mirasla aliyor)
   ========================================================================= */
@media(max-width:680px){

  /* Detay eylem butonlari 3+1 sariyordu: ucu ust satirda, "Icerigi bildir"
     tek basina altta kaliyordu. Dengesiz duruyor ve yanlislikla basmayi
     kolaylastiriyor. Iki sutuna esitleyip 2+2 yapiyoruz; ana eylem (Izle)
     tam satir kaplasin ki parmak once ona gitsin. */
  html body .detail-actions { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  html body .detail-actions > *:first-child { grid-column:1 / -1; }
  html body .detail-actions > * { width:100%; justify-content:center; }

  /* Hero 812px ekranin 701px'ini yiyordu; altindaki bolum listesi katlanmanin
     cok altinda kaliyor, sayfa "bitmis" gibi gorunuyordu. */
  html body .detail-hero { min-height:0; height:auto; }
  html body .detail-hero-inner { padding-bottom:24px; }
  html body .hero { height:clamp(300px,52vh,420px); }

  /* Cerez cubugu ekranin 4px disina tasiyordu; uzun metinde kaydirilabilsin. */
  html body .cc-bar { max-height:70vh; overflow-y:auto; bottom:10px; }

  /* Yuzen destek dugmesi cerez cubugu acikken onun altinda kaliyor (cubuk
     z-index 9000, dugme 55 — kabul butonu erisilebilir durumda). Cubuk
     kapaninca gorunur oluyor; yine de alt kenardan biraz yukari alalim ki
     tarayicinin alt cubuguyla catismasin. */
  html body .support-fab { bottom:16px; right:12px; }
}

/* ------------------------------------------------- MOBIL DETAY: DUZELTME
   Onceki denemede .detail-hero'ya height:auto verdim; hero icerigi kadar
   uzayip 780px'e (ekranin %96'si) cikti, yani sorunu buyuttum. Yuksekligi
   kisitlamak icerigi keserdi. Dogru yol icindekileri kucultmek: poster daha
   dar, baslik daha kucuk, aciklama uc satirla sinirli. Boylece hero kendi
   dogal yuksekligiyle kisaliyor ve altindaki bolum listesi katlanmaya yaklasiyor. */
@media(max-width:680px){
  html body .detail-poster { width:118px; flex:0 0 118px; }
  html body .detail-info h1 { font-size:clamp(1.3rem,6vw,1.6rem); line-height:1.12; margin-bottom:8px; }
  html body .detail-meta { font-size:12.5px; margin-bottom:8px; }
  html body .detail-desc { font-size:13.5px; line-height:1.55; margin-bottom:12px;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  html body .detail-hero-inner { gap:14px; padding-bottom:16px; }
  html body .detail-actions .btn { padding:.6em 1em; font-size:13.5px; }

  /* Dort dugmede "Icerigi bildir" tek basina kaliyordu. Zaten ikincil bir
     eylem: tam satira alinip gorsel agirligi dusuruluyor. */
  html body .detail-actions > *:last-child:nth-child(4) { grid-column:1 / -1; opacity:.72; }
}

/* ------------------------------------------------- HERO YON TUSLARI (Modern+Keskin)
   style.css:1033 -> .hero-nav{top:44%}. Hero icerigi SOL ALTA yaslandigi icin
   soldaki ok, basligin tam uzerine biniyordu (kullanicinin gonderdigi 2. gorsel).
   Dikeyde ortalamak yerine ikisini de SAG ALTA, nokta gostergelerinin yanina
   aliyoruz: metin solda, gezinme sagda; artik hicbir genislikte cakisamazlar. */
html body .hero-nav { top:auto; bottom:30px; transform:none; width:38px; height:38px; opacity:.75; }
html body .hero-nav--prev { left:auto; right:calc(var(--gut) + 46px); }
html body .hero-nav--next { right:var(--gut); }
html body .hero-dots { bottom:84px; right:var(--gut); }
html body .hero:hover .hero-nav { opacity:1; }
@media(max-width:680px){
  html body .hero-nav { display:none; }        /* dokunmatikte kaydirma zaten var */
  html body .hero-dots { bottom:24px; right:16px; }
}