/* ---------- yazı tipi (§2.1.5) ----------
   Inter, Google Fonts'tan değil kendi sunucumuzdan geliyor: iki preconnect + bir
   render-blocking CSS isteği kalktı ve ziyaretçinin tarayıcısı Google'a hiç istek atmıyor.
   İkisi de değişken font (wght 100-900), yani 400-800 arası tüm ağırlıklar tek dosyadan.
   unicode-range'ler fonts/README.md'deki kırpma kapsamıyla birebir aynı olmalı.
   font-display:swap: yazı tipi inene kadar metin sistem fontuyla görünür, boş kalmaz. */
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-017F,U+0218-021B,U+2020;
}

/* ---------- tokens ---------- */
:root{
  --bg:#0a0c11; --surface:#12151d; --surface-2:#191d27; --surface-3:#212634;
  --border:#232837; --border-strong:#323848;
  --text:#eef0f6; --text-2:#b7bccb; --muted:#848a9c;
  --accent:#7d94ff; --accent-2:#a97dff; --accent-rgb:125,148,255;
  --star:#ffd166; --ok:#3ddc84; --bad:#666c7c;
  --r-sm:8px; --r:12px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.7);
  --glow:0 12px 32px -14px rgba(var(--accent-rgb),.55);
  --gutter:clamp(14px,3vw,28px);
  --container:1280px;
  --ease:cubic-bezier(.2,.7,.2,1);
  --safe-b:env(safe-area-inset-bottom,0px);

  /* Temayla birlikte dönen yüzeyler */
  --scrim-rgb:10,12,17;              /* yapışkan başlık ve hero gradyanlarının zemini */
  --film:rgba(255,255,255,.06);      /* hafif vurgu zemini (hover) */
  --hairline:rgba(255,255,255,.09);  /* ince ayraç/kenar */
  --float-bg:rgba(25,29,39,.85);     /* yüzen düğme zemini (#top-btn) */
  --accent-ink:#c3cdff;              /* accent zeminli çip/etiket üzerindeki yazı */
  --accent-ink-2:#9fb0ff;            /* aynısının soluk hâli */

  /* Kapak görselinin ÜSTÜNDE duran öğeler: tema ne olursa olsun koyu kalır,
     çünkü altlarındaki görsel iki temada da aynı. */
  --on-art-bg:rgba(10,12,17,.7);
  --on-art-bg-strong:rgba(10,12,17,.9);
  --on-art-fg:#fff;
  --on-art-border:rgba(255,255,255,.12);

  color-scheme:dark;
}

/* ---------- açık tema ----------
   Sistem açık temadaysa ve kullanıcı koyuyu sabitlememişse devreye girer;
   başlıktaki düğme [data-theme] ile üçünü de (sistem/açık/koyu) seçtirir. */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f6f7fb; --surface:#fff; --surface-2:#f0f2f8; --surface-3:#e4e8f2;
    --border:#dfe3ed; --border-strong:#c3cad9;
    --text:#131721; --text-2:#454c5e; --muted:#656c7f;
    --accent:#4257e8; --accent-2:#7b3fe4; --accent-rgb:66,87,232;
    --star:#b8860b; --ok:#1a8f4e; --bad:#7c8292;
    --shadow-sm:0 1px 2px rgba(20,24,35,.07);
    --shadow:0 10px 30px -14px rgba(20,24,35,.22);
    --shadow-lg:0 24px 60px -24px rgba(20,24,35,.28);
    --glow:0 12px 32px -16px rgba(var(--accent-rgb),.42);
    --scrim-rgb:246,247,251;
    --film:rgba(19,23,33,.05);
    --hairline:rgba(19,23,33,.1);
    --float-bg:rgba(255,255,255,.9);
    --accent-ink:#2b3bb5; --accent-ink-2:#4a59c9;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f6f7fb; --surface:#fff; --surface-2:#f0f2f8; --surface-3:#e4e8f2;
  --border:#dfe3ed; --border-strong:#c3cad9;
  --text:#131721; --text-2:#454c5e; --muted:#656c7f;
  --accent:#4257e8; --accent-2:#7b3fe4; --accent-rgb:66,87,232;
  --star:#b8860b; --ok:#1a8f4e; --bad:#7c8292;
  --shadow-sm:0 1px 2px rgba(20,24,35,.07);
  --shadow:0 10px 30px -14px rgba(20,24,35,.22);
  --shadow-lg:0 24px 60px -24px rgba(20,24,35,.28);
  --glow:0 12px 32px -16px rgba(var(--accent-rgb),.42);
  --scrim-rgb:246,247,251;
  --film:rgba(19,23,33,.05);
  --hairline:rgba(19,23,33,.1);
  --float-bg:rgba(255,255,255,.9);
  --accent-ink:#2b3bb5; --accent-ink-2:#4a59c9;
  color-scheme:light;
}

/* ---------- erişilebilirlik (§5.5) ---------- */
/* Klavyeyle gelen kullanıcı, başlıktaki bağlantıları tek tek geçmeden içeriğe atlayabilsin. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:60;padding:10px 16px;border-radius:0 0 var(--r) 0;
  background:var(--accent);color:#fff;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
.noscript-uyari{margin:0;padding:14px var(--gutter);background:var(--surface-2);
  border-bottom:1px solid var(--border);color:var(--text);font-size:14px;text-align:center}
/* JS kapalıyken tek görünen içerik burası; okunabilir bir blok olsun (§7.6). */
.noscript-uyari h2{margin:0 0 8px;font-size:18px}
.noscript-uyari p{max-width:70ch;margin:0 auto 8px;text-align:left;line-height:1.55}
.noscript-uyari p:last-child{margin-bottom:0}

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
/* Bileşen kuralları display'i açıkça verdiği için tarayıcının [hidden]{display:none} kuralını
   eziyorlardı ve hidden verilmiş bir öğe yine görünüyordu (ör. "0 / 26 izlendi" rozeti).
   [hidden] her zaman gizli demek; tek bir kuralla bu sınıfın tamamı kapanıyor. */
[hidden]{display:none!important}
/* modal açıkken arka plan kaymasın (§5.2) */
body.modal-acik{overflow:hidden}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;min-height:100dvh;color:var(--text);
  font:15px/1.55 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 480px at 8% -8%, rgba(var(--accent-rgb),.16) 0%, transparent 60%),
    radial-gradient(900px 480px at 100% -4%, rgba(169,125,255,.14) 0%, transparent 55%),
    var(--bg);
  background-attachment:fixed}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent)}
::selection{background:rgba(var(--accent-rgb),.35)}
*{scrollbar-width:thin;scrollbar-color:var(--border-strong) transparent}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:20px;border:3px solid var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-sm)}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important;scroll-behavior:auto!important}}

/* ---------- shared controls ---------- */
.btn,#random-btn,#gh-link,.link-btn,.fansub-chip,.pager button,.filterbar select,.filter-count{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  border:1px solid var(--border);background:var(--surface-2);color:var(--text);
  border-radius:var(--r-sm);padding:8px 12px;font-size:13px;font-weight:500;line-height:1.2;white-space:nowrap;text-decoration:none;
  transition:border-color .15s,background .15s,color .15s,transform .15s var(--ease),box-shadow .15s}
.link-btn,.fansub-chip,.filter-count{border-radius:999px}
#random-btn:hover,#gh-link:hover,.link-btn:hover,.fansub-chip:hover,.pager button:hover:not(:disabled){
  border-color:rgba(var(--accent-rgb),.6);background:rgba(var(--accent-rgb),.12)}
.link-btn.active,.fansub-chip.active{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.16);color:var(--accent-ink)}
.link-btn:disabled,.pager button:disabled{opacity:.35;cursor:not-allowed;pointer-events:none}
.meta{color:var(--muted);font-weight:400}
.ic{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;vertical-align:-.15em}
.ic-star,.fav-btn.active .ic,.fav-btn-lg.active .ic,.fav-toggle:has(input:checked) .ic,.featured-cta .ic,.start-btn .ic{fill:currentColor}
.ic-star{color:var(--star)}
.info-stats span,.back,.ep-toolbar .link-btn{display:inline-flex;align-items:center;gap:6px}
.featured-info .meta{display:flex;align-items:center;gap:6px}
.link-btn.direct{border-color:rgba(var(--accent-rgb),.55);background:rgba(var(--accent-rgb),.12);color:var(--accent-ink);font-weight:600}
.link-btn.direct .ic{color:var(--star);fill:currentColor;stroke:none}
.link-btn.direct .meta{font-size:11px;color:var(--accent-ink-2)}

/* ---------- header ---------- */
header{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;
  padding:10px var(--gutter);padding-top:calc(10px + env(safe-area-inset-top,0px));
  background:rgba(var(--scrim-rgb),.72);-webkit-backdrop-filter:saturate(160%) blur(14px);backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--hairline)}
.home-link{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.home-link::before{content:"T";width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:none;
  font-weight:800;font-size:17px;color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:var(--glow)}
header h1{font-size:16px;font-weight:700;margin:0;letter-spacing:-.01em;white-space:nowrap;color:var(--text)}
.search-wrap{position:relative;flex:1;max-width:520px;min-width:0}
.search-wrap::before{content:"";position:absolute;left:13px;top:50%;width:15px;height:15px;transform:translateY(-50%);pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23eef0f6' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") center/contain no-repeat}
#search{width:100%;padding:10px 14px 10px 38px;border-radius:999px;border:1px solid var(--border);
  background:var(--surface-2);font-size:14px;transition:border-color .15s,box-shadow .15s,background .15s;-webkit-appearance:none;appearance:none}
#search::placeholder{color:var(--muted)}
#search::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:14px;height:14px;cursor:pointer;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848a9c' stroke-width='2.5' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") center/contain no-repeat}
#search:focus{outline:none;border-color:rgba(var(--accent-rgb),.8);background:var(--surface-3);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.15)}
/* §7.5: "/" kısayolu ipucu. Dokunmatikte anlamsız, dar ekranda gizli; odaklanınca da kayboluyor. */
.kbd-ipucu{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;
  padding:1px 7px;border-radius:6px;border:1px solid var(--border);background:var(--surface-3);
  color:var(--muted);font:600 12px/1.5 inherit;transition:opacity .15s}
#search:focus~.kbd-ipucu,#search:not(:placeholder-shown)~.kbd-ipucu{opacity:0}
@media (max-width:860px),(hover:none){.kbd-ipucu{display:none}}
#random-btn{border-radius:999px;font-weight:600}
.header-links{display:flex;align-items:center;gap:8px;margin-left:auto}
#legal-link{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:600;text-decoration:none;white-space:nowrap;padding:8px;border-radius:999px;transition:color .15s,background .15s}
#legal-link:hover{color:var(--text);background:var(--film)}
#theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;flex:none;
  background:none;border:1px solid transparent;border-radius:999px;color:var(--muted);transition:color .15s,background .15s,border-color .15s}
#theme-btn:hover{color:var(--text);background:var(--film);border-color:var(--border)}
#theme-btn .ic{width:18px;height:18px}
#legal-link .ic{width:18px;height:18px}
#gh-link,#ig-link{display:inline-flex;align-items:center;gap:7px;color:var(--text);text-decoration:none;font-size:12.5px;font-weight:600;white-space:nowrap}
#gh-link{border-radius:999px;padding:7px 12px 7px 10px}
#ig-link{color:var(--muted);padding:8px;border-radius:999px;transition:color .15s,background .15s}
#ig-link:hover{color:var(--text);background:var(--film)}

/* ---------- layout ---------- */
main{padding:clamp(18px,3vw,30px) var(--gutter) 60px;max-width:var(--container);margin:0 auto}
#app.fade-in{animation:app-fade-in .28s var(--ease)}
@keyframes app-fade-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- home: stats ---------- */
.stats-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;margin-bottom:20px;
  background:var(--border);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-sm)}
.stat{text-align:center;background:var(--surface);padding:16px 10px}
.stat-num{display:block;font-size:clamp(20px,2.4vw,26px);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));-webkit-background-clip:text;background-clip:text;color:transparent}
.stat-label{display:block;font-size:12px;color:var(--muted);margin-top:2px;text-transform:uppercase;letter-spacing:.06em}

/* ---------- home: featured hero ---------- */
.featured{position:relative;overflow:hidden;isolation:isolate;display:flex;gap:22px;align-items:center;margin-bottom:24px;padding:22px;
  color:inherit;text-decoration:none;
  border-radius:var(--r-xl);cursor:pointer;background:var(--surface);border:1px solid rgba(var(--accent-rgb),.25);
  box-shadow:var(--shadow);transition:border-color .2s,transform .2s var(--ease),box-shadow .2s}
.featured::before{content:"";position:absolute;inset:-40px;z-index:-2;background:var(--hero,linear-gradient(135deg,rgba(var(--accent-rgb),.2),rgba(169,125,255,.12))) center/cover;
  filter:blur(34px) saturate(1.3) brightness(.6);transform:scale(1.2)}
.featured::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(90deg,rgba(var(--scrim-rgb),.92) 0%,rgba(var(--scrim-rgb),.74) 55%,rgba(var(--scrim-rgb),.5) 100%)}
.featured:hover{border-color:rgba(var(--accent-rgb),.7);transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--glow)}
.poster.featured-poster{width:132px;height:198px;padding-bottom:0;flex:none;border-radius:var(--r);box-shadow:0 16px 36px -14px rgba(0,0,0,.8);border:1px solid var(--on-art-border)}
.featured-info{min-width:0}
.featured-info .badge.tag-main{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  background:rgba(var(--accent-rgb),.18);color:var(--accent-ink);border:1px solid rgba(var(--accent-rgb),.4);padding:4px 10px;border-radius:999px}
.featured-info h2{margin:10px 0 6px;font-size:clamp(20px,2.6vw,28px);font-weight:800;letter-spacing:-.02em;line-height:1.15;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.featured-info .meta{color:var(--text-2);font-size:13px}
.featured-random{margin:-14px 0 24px;font-weight:600}
.featured-random .ic{color:var(--accent)}
.featured-cta{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:9px 16px;border-radius:999px;font-size:13px;font-weight:700;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:var(--glow)}

/* ---------- home: recent ---------- */
.recent-row{margin-bottom:28px}
.benzer-row{margin-top:32px;padding-top:24px;border-top:1px solid var(--border)}
/* şerit sarmalayıcısı: ok düğmeleri kartların üstünde durur, kenarlarda yumuşak bir maske olur */
.serit-sar{position:relative}
.serit-ok{position:absolute;top:calc(50% - 22px);z-index:3;width:38px;height:38px;display:flex;align-items:center;justify-content:center;
  border-radius:50%;border:1px solid var(--border-strong);background:var(--float-bg);color:var(--text);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:var(--shadow);
  transition:border-color .15s,background .15s,transform .15s var(--ease)}
.serit-ok[hidden]{display:none}
.serit-ok:hover{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.2);transform:scale(1.06)}
.serit-ok .ic{width:20px;height:20px}
.serit-ok-sol{left:-6px}
.serit-ok-sag{right:-6px}
@media (max-width:640px){
  /* dokunmatikte parmakla kaydırılıyor, ok düğmesi yer kaplamasın */
  .serit-ok{display:none}
}
.recent-row .section-title{display:flex;align-items:center;gap:8px;font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);margin:0 0 12px}
.recent-row .section-title::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(var(--accent-rgb),.2)}
.grid.recent-grid{display:flex;grid-template-columns:none;gap:12px;overflow-x:auto;padding:2px 2px 12px;margin:0 -2px;scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-overflow-scrolling:touch}
.recent-grid::-webkit-scrollbar{display:none}
.recent-grid .card-wrap{--recent-card-w:140px;flex:0 0 var(--recent-card-w);width:var(--recent-card-w);min-width:0;scroll-snap-align:start}
/* h3/meta nowrap olduğu için kartın min-content genişliği başlık kadar oluyordu; flex item'ın
   otomatik min-width:auto'su flex-basis'i ezip kartları başlık uzunluğuna göre farklı
   genişlikte yapıyordu (poster yüksekliği = genişliğin %150'si olduğundan posterler de
   kaçıyordu). min-width:0 bunu kapatır, ellipsis de böylece çalışır. */
.recent-grid .card h3{font-size:12.5px;min-height:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-line-clamp:unset;display:block}
.recent-grid .card .meta{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.recent-grid .badges,.recent-grid .fav-btn{display:none}

/* ---------- home: filter bar ---------- */
.section-title{font-size:14px;color:var(--muted);margin:0 0 10px;font-weight:600}
.archive-title{font-size:20px;font-weight:800;letter-spacing:-.02em;color:var(--text);margin:0 0 14px;display:flex;align-items:center;gap:10px}
.archive-title::before{content:"";width:4px;height:20px;border-radius:2px;background:linear-gradient(180deg,var(--accent),var(--accent-2))}
.filterbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:18px}
.filter-count{color:var(--muted);font-size:12.5px;font-variant-numeric:tabular-nums;background:transparent}
.filterbar select{-webkit-appearance:none;appearance:none;padding-right:30px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23848a9c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 10px center;background-size:14px}
.filterbar select:hover{border-color:var(--border-strong)}
.filterbar select:focus{outline:none;border-color:rgba(var(--accent-rgb),.8);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.fav-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--muted);cursor:pointer;user-select:none;
  padding:8px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);transition:border-color .15s,color .15s}
.fav-toggle:hover{border-color:var(--border-strong);color:var(--text)}
.fav-toggle:has(input:checked){border-color:rgba(255,209,102,.5);color:var(--star);background:rgba(255,209,102,.08)}
.fav-toggle input{accent-color:var(--star);margin:0;width:15px;height:15px}

/* ---------- grid & cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:16px}
/* §2.1.4: "daha fazla yükle" ile ızgara binlerce karta çıkabiliyor. content-visibility ile
   ekran dışındaki kartların düzeni/boyaması atlanıyor; contain-intrinsic-size ilk ölçüde
   kullanılacak yer tutucu yüksekliği (poster 150% + başlık ≈ 320px), kart bir kez ölçüldükten
   sonra gerçek boyut hatırlanıyor (auto), böylece kaydırma çubuğu zıplamıyor. */
.card-wrap{position:relative;display:flex;min-width:0;content-visibility:auto;contain-intrinsic-size:auto 320px}
.card{position:relative;display:flex;flex-direction:column;flex:1 1 auto;min-width:0;color:inherit;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:6px;cursor:pointer;box-shadow:var(--shadow-sm);
  transition:transform .2s var(--ease),border-color .2s,box-shadow .2s}
.card-wrap:hover .card{border-color:rgba(var(--accent-rgb),.55);transform:translateY(-4px);box-shadow:var(--shadow),var(--glow)}
.card h3{margin:10px 6px 4px;font-size:13.5px;font-weight:600;line-height:1.3;letter-spacing:-.005em;min-height:2.6em;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.card .meta{margin:0 6px 8px;font-size:11.5px;color:var(--text-2)}  /* §5.4: 12px altı metinde --muted yorucu */
.badges{display:flex;flex-wrap:wrap;gap:4px;margin:0 6px 6px}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;background:var(--surface-3);color:var(--text-2);border:1px solid transparent}
.poster{position:relative;width:100%;height:0;padding-bottom:150%;border-radius:calc(var(--r-lg) - 6px);background:var(--surface-3);display:flex;align-items:center;justify-content:center;
  overflow:hidden;color:var(--on-art-fg);font-weight:700;font-size:22px;letter-spacing:1px}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;opacity:0;transition:opacity .4s ease,transform .35s var(--ease)}
.poster img.img-loaded{opacity:1}
.poster:not(.loaded){animation:pulse 1.6s ease-in-out infinite}
.card-wrap:hover .poster img{transform:scale(1.05)}
.poster.loaded{color:transparent;animation:none}
.card .poster::after{content:"";position:absolute;inset:auto 0 0 0;height:40%;background:linear-gradient(180deg,transparent,rgba(0,0,0,.35));pointer-events:none}
.fav-btn{position:absolute;top:12px;right:12px;z-index:2;width:30px;height:30px;border-radius:50%;border:1px solid var(--on-art-border);
  background:var(--on-art-bg);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);color:var(--on-art-fg);font-size:14px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s,transform .15s var(--ease),color .15s}
.fav-btn:hover{background:var(--on-art-bg-strong);transform:scale(1.08)}
.fav-btn.active{color:var(--star);border-color:rgba(255,209,102,.4)}
.rating-badge{position:absolute;top:12px;left:12px;z-index:2;display:inline-flex;align-items:center;gap:3px;background:var(--on-art-bg);color:#ffd166;
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;padding:4px 9px;border-radius:999px;border:1px solid var(--on-art-border);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.card:focus-visible,.featured:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
/* §6.3 kapağı olmayan kart: iki harf yerine başlık okunuyor */
.poster-bos-ic{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:12px 10px;text-align:center}
.poster-bos .poster-init{font-size:26px;font-weight:800;letter-spacing:1px;opacity:.5;line-height:1}
.poster-bos .poster-ad{font-size:12.5px;font-weight:600;line-height:1.3;color:rgba(255,255,255,.92);
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical}
.poster-bos .poster-not{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.recent-grid .poster-bos .poster-ad,.recent-grid .poster-bos .poster-not{display:none}
.poster.featured-poster .poster-ad,.poster.detail-poster .poster-ad{-webkit-line-clamp:4}

/* §6.2 janr keşif şeridi */
.janr-row{margin-bottom:22px}
.janr-chips{display:flex;flex-wrap:wrap;gap:8px}
.janr-chip{text-decoration:none}
.janr-chip .meta{font-variant-numeric:tabular-nums}
.section-title .meta{margin-left:8px;font-size:12.5px;font-weight:400}

/* §7.1 posterin alt kenarındaki ince izleme ilerlemesi çubuğu */
.ilerleme{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:2;
  background:var(--on-art-bg);overflow:hidden;pointer-events:none}
.ilerleme i{display:block;height:100%;background:var(--accent)}

/* ---------- yetişkin içerik uyarısı ---------- */
/* Kartta küçük rozet, detay sayfasında açık bir panel. Rozet kapak görselinin üstünde
   durduğu için --on-art-* token'larını kullanıyor (temayla dönmüyor). */
/* Rozet kapağın SAĞ ÜSTÜNDE duruyor: .card konumlandırma bağlamı olduğu için alt kenara
   yaslandığında başlık ve tür etiketlerinin üstüne biniyordu. Puan rozeti sol üstte. */
.yas-rozet{position:absolute;right:12px;top:12px;z-index:2;display:inline-flex;align-items:center;
  padding:3px 8px;border-radius:999px;font-size:11px;font-weight:800;letter-spacing:.04em;
  background:var(--on-art-bg-strong);color:#ff8a8a;border:1px solid rgba(255,120,120,.45);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}

/* §6.8 yaş kapısı */
.yas-kapi{max-width:560px;margin:40px auto;padding:26px 24px;text-align:center;
  background:var(--surface);border:1px solid rgba(255,120,120,.35);border-radius:var(--r-lg);
  box-shadow:var(--shadow)}
.yas-kapi h2{margin:14px 0 10px;font-size:20px}
.yas-kapi p{margin:0 0 10px;font-size:14px;line-height:1.65;color:var(--text-2)}
.yas-kapi-btnlar{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.yas-kapi-btnlar .start-btn{margin:0}
.yas-kapi-not{margin-top:16px!important;font-size:12.5px;color:var(--muted)}
.nsfw-uyari{display:flex;gap:14px;align-items:flex-start;margin:0 0 18px;padding:14px 16px;
  border-radius:var(--r-lg);border:1px solid rgba(255,120,120,.4);background:rgba(255,120,120,.08)}
.nsfw-uyari strong{font-size:14px}
.nsfw-uyari p{margin:4px 0 0;font-size:13.5px;line-height:1.6;color:var(--text-2)}
.nsfw-rozet{flex:none;display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;font-size:14px;font-weight:800;letter-spacing:.02em;
  background:rgba(255,120,120,.16);color:#ff8a8a;border:1px solid rgba(255,120,120,.4)}

.card-empty{opacity:.55}
/* bölüm: ölü arşiv linklerinin tek satırlık özeti (§3.2) */
.ep-olu{margin:8px 2px 2px;font-size:12px;color:var(--muted)}
/* detay: özgün Japonca başlık, ana başlığın hemen altında ince gri satır */
.detail-japonca{margin:2px 0 8px;color:var(--text-2);font-size:14px;font-weight:500;letter-spacing:.02em}
.card-empty .meta{color:var(--bad)}

/* ---------- detail ---------- */
.back{display:inline-flex;align-items:center;gap:6px;color:var(--text-2);font-size:13px;font-weight:500;margin-bottom:16px;text-decoration:none;
  padding:6px 12px 6px 8px;border-radius:999px;border:1px solid transparent;transition:color .15s,background .15s,border-color .15s}
.back:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}
.detail-head{position:relative;overflow:hidden;isolation:isolate;display:flex;gap:24px;align-items:flex-end;margin-bottom:20px;padding:clamp(18px,3vw,28px);
  border-radius:var(--r-xl);background:var(--surface);border:1px solid rgba(var(--accent-rgb),.2);box-shadow:var(--shadow)}
.detail-head::before{content:"";position:absolute;inset:-40px;z-index:-2;background:var(--hero,linear-gradient(135deg,rgba(var(--accent-rgb),.18),rgba(169,125,255,.1))) center/cover;
  filter:blur(36px) saturate(1.3) brightness(.55);transform:scale(1.2)}
.detail-head::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(var(--scrim-rgb),.45),rgba(var(--scrim-rgb),.9))}
.poster.detail-poster{width:150px;height:225px;padding-bottom:0;flex:none;border-radius:var(--r);font-size:32px;box-shadow:0 20px 44px -16px rgba(0,0,0,.85);border:1px solid var(--on-art-border)}
.detail h2{margin:0 0 10px;font-size:clamp(22px,3vw,32px);font-weight:800;letter-spacing:-.02em;line-height:1.15;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.detail-info{min-width:0;flex:1}
.detail-head .info-tags{margin:0 0 10px}
.detail-head .info-stats{margin-bottom:16px;font-size:13px;color:var(--text-2)}
.start-btn{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;padding:11px 22px;border-radius:999px;border:none;color:#fff;
  background:linear-gradient(90deg,var(--accent),var(--accent-2));box-shadow:var(--glow);transition:transform .15s var(--ease),filter .15s}
.start-btn:hover{transform:translateY(-1px);filter:brightness(1.08)}
.start-btn:active{transform:translateY(0)}
.fav-btn-lg{width:38px;height:38px;display:inline-flex;align-items:center;justify-content:center;background:var(--film);border:1px solid var(--border-strong);
  border-radius:50%;color:var(--muted);font-size:18px;line-height:1;transition:border-color .15s,color .15s,background .15s}
.fav-btn-lg:hover{border-color:var(--star);color:var(--star)}
.fav-btn-lg.active{color:var(--star);border-color:rgba(255,209,102,.5);background:rgba(255,209,102,.1)}

.info{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(16px,2.5vw,22px);margin-bottom:22px}
.info-tags{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.tag{font-size:11.5px;padding:4px 11px;border-radius:999px;background:var(--film);color:var(--text-2);border:1px solid var(--hairline)}
.tag-main{background:rgba(var(--accent-rgb),.18);color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.4);font-weight:600}
.info-stats{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:13px;color:var(--text);margin-bottom:14px}
.info-ozet{color:var(--text-2);font-size:14px;line-height:1.7;margin:0}
.info-ozet.clamped{display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.ozet-more{background:none;border:none;color:var(--accent);font-size:13px;font-weight:600;padding:6px 0 0;margin:0;line-height:1.7;text-align:left}
.ozet-more:hover{text-decoration:underline}

/* dar ekranda (320 px) 'izlendi' rozeti + ızgara + Tersten sığmıyor, 'Tersten' kesiliyordu: alt satıra geçsin */
.ep-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:12px}
.ep-toolbar .section-title{margin:0;flex:1;font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--text)}
.ep-search{width:100%;padding:10px 14px;margin-bottom:12px;border-radius:var(--r);border:1px solid var(--border);background:var(--surface-2);font-size:13.5px;
  transition:border-color .15s,box-shadow .15s}
.ep-search::placeholder{color:var(--muted)}
.ep-search:focus{outline:none;border-color:rgba(var(--accent-rgb),.8);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.15)}
.ep-group{margin-bottom:10px}
.ep-group>summary{cursor:pointer;padding:12px 16px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);
  font-size:13.5px;font-weight:700;list-style:none;display:flex;align-items:center;gap:10px;user-select:none;transition:border-color .15s}
.ep-group>summary::-webkit-details-marker{display:none}
.ep-group>summary::before{content:"";width:14px;height:14px;transition:transform .15s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237d94ff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") center/contain no-repeat}
.ep-group>summary:hover{border-color:var(--border-strong)}
.ep-group[open]>summary{margin-bottom:8px;border-color:rgba(var(--accent-rgb),.5)}
.ep-group[open]>summary::before{transform:rotate(90deg)}
.ep-group>summary .meta{margin-left:auto;font-size:12px}
.ep{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);margin-bottom:8px;overflow:hidden;transition:border-color .15s,box-shadow .15s}
.ep.open{border-color:rgba(var(--accent-rgb),.55);box-shadow:var(--shadow-sm)}
.ep-head{padding:12px 16px;cursor:pointer;display:flex;gap:12px;align-items:center;font-size:14px;font-weight:500;min-height:46px;transition:background .15s}
.ep-head:hover{background:var(--surface-2)}
.ep-head .meta{margin-left:auto;font-size:12px;white-space:nowrap}
.ep-arrow{color:var(--accent);transition:transform .15s;display:inline-flex}
.ep.open .ep-arrow{transform:rotate(90deg)}
.ep-links{padding:0 16px 14px 16px;display:none;border-top:1px solid var(--border);padding-top:12px}
.ep-kisa{display:none}

/* ---------- §7.2 izlendi işareti ---------- */
.ep-izle{flex:none;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:1px solid var(--border);border-radius:50%;color:var(--muted);
  opacity:0;transition:opacity .15s,color .15s,border-color .15s,background .15s}
.ep-head:hover .ep-izle,.ep-izle:focus-visible{opacity:1}
.ep-izle:hover{color:var(--ok);border-color:var(--ok)}
.ep-izle .ic{width:15px;height:15px}
.ep-izlendi .ep-izle{opacity:1;color:var(--ok);border-color:var(--ok);background:rgba(61,220,132,.12)}
.ep-izlendi .ep-ad,.ep-izlendi .ep-kisa{color:var(--muted)}
.ep-izlenen-rozet{gap:6px}
.ep-izlenen-rozet .ic{width:14px;height:14px;opacity:.7}

/* ---------- §6.4 bölüm ızgarası ----------
   Aynı DOM, farklı yerleşim: ızgarada yalnız bölüm numarası görünür, açılan bölüm satırın
   tamamını kaplar ki link listesi yine tam genişlikte çıksın. Uzun serilerde (One Piece 1166)
   liste görünümünde her bölüm 46px'lik tam genişlik bir satır; ızgarada tek ekrana ~10 katı sığıyor. */
#ep-list.izgara .ep-kutular{display:grid;grid-template-columns:repeat(auto-fill,minmax(56px,1fr));gap:8px}
#ep-list.izgara .ep{margin-bottom:0}
#ep-list.izgara .ep-head{padding:0;min-height:0;aspect-ratio:1;justify-content:center;gap:0;
  font-variant-numeric:tabular-nums;font-weight:600}
#ep-list.izgara .ep-arrow,#ep-list.izgara .ep-ad,#ep-list.izgara .ep-head .meta{display:none}
#ep-list.izgara .ep-kisa{display:block}
/* ızgarada tik düğmesi kutucuğun sağ üst köşesinde küçük bir rozet; ortayı kapatmamalı */
#ep-list.izgara .ep-head{position:relative}
#ep-list.izgara .ep-izle{position:absolute;top:1px;right:1px;width:18px;height:18px;border:0;background:none}
#ep-list.izgara .ep-izle .ic{width:12px;height:12px}
#ep-list.izgara .ep-izlendi{border-color:rgba(61,220,132,.5)}
#ep-list.izgara .ep.open .ep-izle{position:static;width:28px;height:28px;border:1px solid var(--border)}
#ep-list.izgara .ep.open.ep-izlendi .ep-izle{border-color:var(--ok);background:rgba(61,220,132,.12)}
#ep-list.izgara .ep-empty{opacity:.4}
/* açık bölüm: satırı kapla, tam başlığı geri getir */
#ep-list.izgara .ep.open{grid-column:1/-1}
#ep-list.izgara .ep.open .ep-head{aspect-ratio:auto;min-height:46px;padding:12px 16px;gap:12px;justify-content:flex-start}
#ep-list.izgara .ep.open .ep-arrow,#ep-list.izgara .ep.open .ep-ad,#ep-list.izgara .ep.open .ep-head .meta{display:inline-flex}
#ep-list.izgara .ep.open .ep-head .meta{display:block}
#ep-list.izgara .ep.open .ep-kisa{display:none}
@media (max-width:640px){
  #ep-list.izgara .ep-kutular{grid-template-columns:repeat(auto-fill,minmax(48px,1fr));gap:6px}
}
.ep.open .ep-links{display:block}
.fansub-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.fansub-chip{font-weight:600}
.fansub-chip .meta{font-size:11px}
.fansub-chip-empty{opacity:.5}
.fansub-players{display:flex;flex-wrap:wrap;gap:8px}
.link-btn{font-size:12.5px;padding:7px 12px}
.link-btn.mask{color:var(--bad);cursor:not-allowed;text-decoration:line-through;opacity:.55}
.link-btn.mask:hover{border-color:var(--border);background:var(--surface-2)}
.ep.ep-empty{opacity:.55}
.ep.ep-empty .ep-head{color:var(--muted)}
.ep.ep-empty .ep-head .meta{color:var(--bad);display:flex;align-items:center;gap:5px}
.ep.ep-empty .ep-head .meta::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bad)}

/* ---------- empty / suggest ---------- */
.empty{color:var(--muted);padding:60px 20px;text-align:center;font-size:14.5px;background:var(--surface);border:1px dashed var(--border-strong);border-radius:var(--r-lg)}
.suggest{margin-top:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:13px;color:var(--text-2)}

/* ---------- legal ---------- */
.legal{max-width:720px}
.legal h2{font-size:24px;font-weight:800;letter-spacing:-.02em;margin:0 0 18px}
.legal h3{font-size:15px;color:var(--accent-2);margin:24px 0 8px}
.legal p{color:var(--text-2);font-size:14px;line-height:1.75;margin:0 0 10px}
.legal code{font-size:12.5px;background:var(--surface-2);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
.legal-lang{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.08em;color:var(--muted);
  background:var(--surface-2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;margin-bottom:8px}
.legal-sep{border:none;border-top:1px solid var(--border);margin:36px 0}
/* §7.3 veri yedekleme kutusu */
.veri-kutu{margin:28px 0 8px;padding:16px 18px;background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--r-lg)}
.veri-kutu h3{margin-top:0}
.veri-btnlar{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.veri-durum{margin:12px 0 0;min-height:1.2em;font-size:13.5px;color:var(--muted)}
.veri-durum.veri-hata{color:#e5484d}
.legal-tarih{margin-top:28px;font-size:12.5px;color:var(--muted)}

/* ---------- footer ---------- */
footer{max-width:var(--container);margin:0 auto;padding:20px var(--gutter) calc(36px + var(--safe-b));text-align:center;color:var(--muted);font-size:12.5px;
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 0;border-top:1px solid var(--border)}
/* dokunma hedefi en az 24 px (WCAG 2.5.8); metin satırı 19 px'ti */
footer a{display:inline-block;padding:4px 0;color:var(--text-2);text-decoration:none}
footer a:hover{color:var(--text);text-decoration:underline}
.footer-sep{margin:0 10px;opacity:.5}

/* ---------- pager ---------- */
.pager{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin:28px 0 10px;color:var(--muted);font-size:13px}
.pager button{padding:11px 22px;border-radius:999px;font-weight:600}
.pager button .meta{font-size:12px}

/* ---------- player modal ---------- */
/* Oynatıcı modalı bir video yüzeyi: açık temada da koyu kalır, token'ları yerel olarak geri alınır. */
#player-modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  color-scheme:dark;
  --surface:#12151d; --surface-2:#191d27; --surface-3:#212634;
  --border:#232837; --border-strong:#323848;
  --text:#eef0f6; --text-2:#b7bccb; --muted:#848a9c;
  --accent:#7d94ff; --accent-2:#a97dff; --accent-rgb:125,148,255;
  --accent-ink:#c3cdff; --accent-ink-2:#9fb0ff;
  --film:rgba(255,255,255,.06)}
#player-modal[hidden]{display:none}
#player-modal-backdrop{position:absolute;inset:0;background:rgba(4,5,8,.88);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
#player-modal-box{position:relative;width:100%;max-width:1040px;aspect-ratio:16/9;max-height:100%;background:#000;border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--shadow-lg);display:flex;flex-direction:column;border:1px solid var(--border-strong);animation:modal-in .22s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
#player-modal-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px 10px;padding:10px 14px;
  background:var(--surface);border-bottom:1px solid var(--border);font-size:12.5px;flex:none}
.player-modal-hint{grid-column:1;color:var(--accent);font-weight:700;white-space:nowrap}
.player-modal-center{grid-column:2;display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 10px}
.player-modal-right{grid-column:3;display:flex;align-items:center;gap:8px}
.player-modal-eplabel{color:var(--muted);font-size:12px;white-space:nowrap;font-variant-numeric:tabular-nums}
.player-modal-cta{font-weight:700;color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.12)}
.player-modal-cta:hover{background:rgba(var(--accent-rgb),.22)}
#player-modal-close{width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:50%;
  color:var(--muted);font-size:16px;line-height:1;transition:color .15s,background .15s,border-color .15s}
#player-modal-close:hover{color:var(--text);background:var(--surface-2);border-color:var(--border)}
#player-modal-viewport{position:relative;flex:1;min-height:0;background:#000}
/* video oynarken 3 sn hareketsizlikte kontrol çubuğu ve imleç kayboluyor (bkz. js/player-video.js) */
#player-modal-viewport.kontrol-gizli{cursor:none}
#player-modal-viewport.kontrol-gizli #player-modal-controls{opacity:0;pointer-events:none;transform:translateY(8px)}
#player-modal-controls{transition:opacity .25s,transform .25s var(--ease)}
/* tam ekran viewport'a uygulanıyor; kontrol çubuğu da tam ekranda görünür kalsın */
#player-modal-viewport:fullscreen{width:100vw;height:100vh}
#player-modal-frame,#player-modal-video{position:absolute;inset:0;width:100%;height:100%;border:0;background:#000}
#player-modal-video{color-scheme:dark}

/* ---------- custom video controls (reklamsız <video> oynatımı) ---------- */
#player-modal-controls{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:20px 14px calc(10px + var(--safe-b));
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.85) 55%);
  display:flex;flex-direction:column;gap:4px}
#player-modal-controls[hidden]{display:none}
#player-modal-controls-row{display:flex;align-items:center;gap:10px}
#player-modal-controls button{width:36px;height:36px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  background:none;border:0;border-radius:50%;color:var(--text);transition:background .15s,color .15s}
#player-modal-controls button:hover{background:rgba(255,255,255,.12);color:#fff}
#player-modal-controls .ic{width:19px;height:19px}
#player-modal-speed{width:auto;padding:0 9px;border-radius:999px;font-size:12px;font-variant-numeric:tabular-nums;font-weight:700}
#player-modal-time{color:var(--text-2);font-size:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.player-modal-controls-spacer{flex:1}
#player-modal-volume{width:70px}
#player-modal-progress,#player-modal-volume{-webkit-appearance:none;appearance:none;height:4px;border-radius:999px;
  background:rgba(255,255,255,.25);outline:none;cursor:pointer}
#player-modal-progress{width:100%}
#player-modal-progress::-webkit-slider-thumb,#player-modal-volume::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;
  width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.3);
  transition:transform .15s}
#player-modal-progress::-webkit-slider-thumb:hover,#player-modal-volume::-webkit-slider-thumb:hover{transform:scale(1.2)}
#player-modal-progress::-moz-range-thumb,#player-modal-volume::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}
#player-modal-progress::-moz-range-progress,#player-modal-volume::-moz-range-progress{background:var(--accent);height:4px;border-radius:999px}
#player-modal-frame[hidden],#player-modal-video[hidden]{display:none}
#player-modal-loading{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:#000}
#player-modal-loading[hidden]{display:none}
.spinner{width:36px;height:36px;border:3px solid rgba(255,255,255,.12);border-top-color:var(--accent);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
#player-modal-loading-durum{color:var(--text-2);font-size:13px;text-align:center;padding:0 24px}
#player-modal-loading-durum[hidden]{display:none}
/* reklamlı oynatıcıya düşülünce sebebini söyleyen şerit (7 sn) */
.oynatici-bildirim{position:absolute;left:50%;bottom:calc(84px + var(--safe-b));z-index:4;transform:translateX(-50%);max-width:min(560px,calc(100% - 24px));
  padding:10px 14px;border-radius:var(--r);font-size:13px;line-height:1.4;color:#eef0f6;background:rgba(6,7,11,.9);
  border:1px solid rgba(255,255,255,.12);box-shadow:var(--shadow);pointer-events:none;animation:xray-gir .3s var(--ease)}
.oynatici-bildirim[hidden]{display:none}
#player-modal-loading-hint{color:var(--muted);font-size:12.5px;text-align:center;padding:0 24px}

/* ---------- bilgi paneli (X-Ray): karakterler, seslendirmenler, müzik ----------
   Video üstünde durduğu için tema ne olursa olsun koyu; renkler bu yüzden sabit. */
/* z-index kontrol çubuğunun (2) altında: panel açıkken oynat/ses düğmeleri örtülmesin. Alt boşluk, listenin
   son satırı çubuğun arkasında kalmasın diye. */
.xray-panel{position:absolute;top:0;left:0;bottom:0;z-index:1;width:min(400px,46%);overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px calc(96px + var(--safe-b));color:#eef0f6;background:linear-gradient(90deg,rgba(6,7,11,.94) 0%,rgba(6,7,11,.86) 75%,rgba(6,7,11,.6) 100%);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);animation:xray-gir .22s var(--ease)}
.xray-panel[hidden]{display:none}
/* tanıtım: bölüm açılışında 5 sn, hafif saydam ve tıklamaları videoya geçiren hâli */
.xray-panel.tanitim{pointer-events:none;overflow:hidden;
  background:linear-gradient(90deg,rgba(6,7,11,.74) 0%,rgba(6,7,11,.55) 70%,rgba(6,7,11,0) 100%);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
.xray-panel.tanitim .xray-kapat{visibility:hidden}
.xray-panel.cikiyor,.xray-muzik.cikiyor{animation:xray-cik .35s var(--ease) forwards}
@keyframes xray-cik{to{opacity:0;transform:translateX(-14px)}}
.xray-muzik.cikiyor{animation-name:xray-muzik-cik}
@keyframes xray-muzik-cik{to{opacity:0;transform:translateX(24px) scale(.96)}}
@keyframes xray-gir{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}
@keyframes xray-muzik-gir{from{opacity:0;transform:translateX(40px) scale(.92)}to{opacity:1;transform:none}}
.xray-panel .meta{color:#9aa0b2}
.xray-bas{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:14px}
.xray-ust{margin:0;color:var(--accent);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.xray-baslik{margin:2px 0 3px;font-size:17px;line-height:1.25}
.xray-bas .meta{margin:0;font-size:12.5px}
.xray-bas .meta b{color:#eef0f6;font-weight:600}
.xray-kapat{flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef0f6;cursor:pointer}
.xray-kapat:hover{background:rgba(255,255,255,.14)}
.xray-kapat .ic{width:16px;height:16px}
.xray-h{margin:16px 0 8px;font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#9aa0b2}
.xray-sarkilar,.xray-kisiler{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
/* Şarkı kartı: yavaş kayan renk geçişi + ekolayzır; tıklanınca Spotify. */
.xray-sarki-kart{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);overflow:hidden;
  color:#eef0f6;text-decoration:none;font-size:13.5px;line-height:1.3;border:1px solid rgba(var(--accent-rgb),.22);
  background:linear-gradient(115deg,rgba(var(--accent-rgb),.16),rgba(169,125,255,.1) 45%,rgba(29,185,84,.1) 70%,rgba(var(--accent-rgb),.16));
  background-size:260% 100%;animation:xray-akis 9s ease-in-out infinite alternate;transition:border-color .2s,transform .2s var(--ease)}
.xray-sarki-kart:hover,.xray-sarki-kart:focus-visible{border-color:rgba(29,185,84,.6);transform:translateY(-1px)}
.xray-sarki-kart:hover .xray-spotify,.xray-sarki-kart:focus-visible .xray-spotify{background:#1db954;color:#0a0c11;--spotify-ark:#1db954}
@keyframes xray-akis{from{background-position:0% 50%}to{background-position:100% 50%}}
.xray-sarki-metin{flex:1;min-width:0;display:flex;flex-direction:column}
.xray-sarki-metin b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xray-sarki-metin .meta{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xray-sarki-tip{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--accent)}
.xray-spotify{flex:none;display:inline-flex;align-items:center;gap:5px;padding:5px 9px 5px 6px;border-radius:999px;font-size:11.5px;font-weight:700;
  color:#1db954;background:rgba(29,185,84,.14);transition:background .2s,color .2s}
.xray-spotify .ic{width:16px;height:16px}
/* Ekolayzır: dört çubuk farklı hız ve gecikmeyle zıplıyor. */
.xray-eq{flex:none;width:30px;height:30px;display:inline-flex;align-items:flex-end;justify-content:center;gap:2.5px;padding:7px 6px;
  border-radius:50%;background:rgba(var(--accent-rgb),.2)}
.xray-eq i{width:3px;height:100%;border-radius:2px;background:linear-gradient(to top,var(--accent),#a97dff);transform-origin:bottom;
  animation:xray-eq 1s ease-in-out infinite}
.xray-eq i:nth-child(2){animation-duration:.8s;animation-delay:-.4s}
.xray-eq i:nth-child(3){animation-duration:1.15s;animation-delay:-.2s}
.xray-eq i:nth-child(4){animation-duration:.9s;animation-delay:-.65s}
@keyframes xray-eq{0%,100%{transform:scaleY(.25)}50%{transform:scaleY(1)}}
.xray-muzik.durdu .xray-eq i{animation-play-state:paused}
.xray-kisi{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r-sm);background:rgba(255,255,255,.04)}
.xray-foto{flex:none;width:40px;height:40px;border-radius:50%;object-fit:cover;background:#1b1f2a}
.xray-bos{display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;background:hsl(var(--h,230) 40% 32%)}
.xray-kisi-ad,.xray-kisi-va{min-width:0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.xray-kisi-ad{flex:1}
.xray-kisi-va{flex:1;text-align:right;color:inherit;text-decoration:none;border-radius:6px}
.xray-kisi-va:hover span:first-child,.xray-kisi-va:focus-visible span:first-child{color:var(--accent);text-decoration:underline}
.xray-kisi-ad b,.xray-kisi-va span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.xray-kisi .meta{font-size:11.5px}
.xray-yok{font-size:13px}
.xray-kaynak{margin:16px 0 0;font-size:11.5px}
.xray-kaynak a{color:#b7bccb}
/* satır içi kaynak linkleri: dokunması kolay olsun diye dikey pay */
.xray-kaynak a,.sv-kaynak a{display:inline-block;padding:5px 0}

/* dokunmatik çift dokunuş sarma göstergesi: sarılan tarafta yarım daire ve "+10 sn" */
.sar-ipucu{position:absolute;top:0;bottom:0;z-index:2;width:38%;display:flex;align-items:center;justify-content:center;pointer-events:none;
  color:#fff;font-size:15px;font-weight:700;opacity:0;background:rgba(255,255,255,.12)}
.sar-ipucu.sol{left:0;border-radius:0 50% 50% 0 / 0 50% 50% 0}
.sar-ipucu.sag{right:0;border-radius:50% 0 0 50% / 50% 0 0 50%}
.sar-ipucu.goster{animation:sar-ipucu .7s ease-out}
@keyframes sar-ipucu{0%{opacity:0}15%{opacity:1}70%{opacity:1}100%{opacity:0}}

/* ---------- ana sayfa: devam etiketi, etkin filtre çipleri ---------- */
.devam-etiket{position:absolute;left:6px;right:6px;bottom:10px;z-index:2;display:flex;align-items:center;gap:5px;
  padding:5px 8px;border-radius:10px;font-size:11px;line-height:1.25;font-weight:700;letter-spacing:0;text-transform:none;color:#fff;background:rgba(10,12,17,.82);
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);pointer-events:none}
.devam-etiket .ic{flex:none;width:12px;height:12px;fill:currentColor;color:var(--accent)}
.card-devam:hover .devam-etiket{background:var(--accent);color:#fff}
.card-devam:hover .devam-etiket .ic{color:#fff}
.card-yukleniyor{opacity:.6;pointer-events:none}
.aktif-filtreler{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:-4px 0 14px}
.filtre-cip{display:inline-flex;align-items:center;gap:6px;padding:5px 8px 5px 11px;border-radius:999px;font:inherit;font-size:12.5px;font-weight:600;cursor:pointer;text-transform:none;letter-spacing:0;
  color:var(--accent-ink);background:rgba(var(--accent-rgb),.12);border:1px solid rgba(var(--accent-rgb),.35)}
.filtre-cip .ic{width:13px;height:13px}
.filtre-cip:hover,.filtre-cip:focus-visible{background:rgba(var(--accent-rgb),.22);border-color:rgba(var(--accent-rgb),.6)}
.filtre-cip-hepsi{color:var(--muted);background:none;border-color:var(--border);padding-right:11px}

/* ---------- anında arama önerileri ---------- */
.search-wrap{position:relative}
.arama-oneri{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:60;max-height:min(70vh,520px);overflow-y:auto;overscroll-behavior:contain;
  padding:6px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border-strong);box-shadow:var(--shadow-lg);animation:ao-gir .15s ease}
@keyframes ao-gir{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.arama-oneri[hidden]{display:none}
.ao-baslik{padding:8px 10px 4px;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ao-oge{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:var(--r-sm);color:var(--text);text-decoration:none}
.ao-oge:hover,.ao-oge[aria-selected="true"]{background:rgba(var(--accent-rgb),.14)}
.ao-oge[aria-selected="true"]{outline:1px solid rgba(var(--accent-rgb),.45)}
.ao-kapak{flex:none;width:34px;height:48px;border-radius:6px;object-fit:cover;background:var(--surface-3)}
.ao-kisi{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;width:40px;height:40px;margin:4px -3px;
  color:var(--accent-ink);background:rgba(var(--accent-rgb),.16);font-size:17px}
.ao-metin{min-width:0;display:flex;flex-direction:column;line-height:1.3}
.ao-metin b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ao-metin .meta{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ao-fazla{display:inline-block;padding:0 5px;border-radius:999px;font-size:11px;background:var(--surface-3)}
.ao-bekle{padding:8px 10px;font-size:12px}

/* ---------- detay sayfası: opening/ending şarkıları ---------- */
.muzik-bolum{margin:22px 0 6px}
.muzik-bolum[hidden]{display:none}
.muzik-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
/* oynatıcıdaki kart video üstünde durduğu için sabit koyu; sayfada temaya uyuyor */
.muzik-liste .xray-sarki-kart{color:var(--text);border-color:var(--border);
  background:linear-gradient(115deg,rgba(var(--accent-rgb),.12),rgba(169,125,255,.08) 45%,rgba(29,185,84,.08) 70%,rgba(var(--accent-rgb),.12)),var(--surface);
  background-size:260% 100%,auto}
.muzik-liste .xray-sarki-kart .meta{color:var(--muted)}
.muzik-liste .xray-sarki-kart:hover,.muzik-liste .xray-sarki-kart:focus-visible{border-color:rgba(29,185,84,.6);box-shadow:var(--shadow-sm)}
.muzik-liste .xray-sarki-tip{color:var(--accent-ink)}
:root[data-theme="light"] .muzik-liste .xray-spotify{color:#138a3f}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .muzik-liste .xray-spotify{color:#138a3f}}
.karakter-serit .serit-ok{top:calc(50% - 6px)}

/* ---------- detay sayfası: karakter şeridi ---------- */
.karakter-serit{margin:22px 0 6px}
.karakter-serit[hidden]{display:none}
.ks-liste{list-style:none;margin:0;padding:2px 2px 10px;display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;scrollbar-width:none}
.ks-liste::-webkit-scrollbar{display:none}
.ks-kart{flex:none;width:132px;scroll-snap-align:start;display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;
  padding:12px 8px 10px;border-radius:var(--r);background:var(--surface);border:1px solid var(--border)}
.ks-fotolar{position:relative;margin-bottom:6px}
.ks-foto{width:62px;height:62px;border-radius:50%;object-fit:cover;background:var(--surface-3);display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#fff}
/* baş harf yer tutucusu (görsel yok / yüklenemedi): temadan bağımsız renkli zemin, beyaz yazı okunsun */
.ks-foto.xray-bos,.sv-foto.xray-bos{background:hsl(var(--h,230) 42% 38%)}
.ks-foto-va{position:absolute;right:-12px;bottom:-4px;width:30px;height:30px;font-size:10px;border:2px solid var(--surface)}
.ks-ad{font-size:13px;line-height:1.25;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-kart .meta{font-size:11px}
.ks-va{margin-top:0;padding:4px 6px;font-size:12px;color:var(--accent-ink);text-decoration:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ks-va:hover,.ks-va:focus-visible{text-decoration:underline}

/* ---------- seslendirmen sayfası ---------- */
.sv-bas{display:flex;align-items:center;gap:18px;margin:6px 0 22px}
.sv-foto{flex:none;width:96px;height:96px;border-radius:50%;object-fit:cover;background:var(--surface-3);display:inline-flex;align-items:center;
  justify-content:center;font-size:28px;font-weight:700;color:#fff;box-shadow:var(--shadow)}
.sv-ad{margin:2px 0 4px;font-size:clamp(22px,4vw,30px);line-height:1.15}
.sv-bas .meta{margin:0}
.sv-rol{display:flex;flex-direction:column;min-width:0}
.sv-karakter{margin:6px 2px 0;display:flex;flex-direction:column;font-size:13px;line-height:1.3}
.sv-karakter b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sv-karakter .meta{font-size:11.5px}
.sv-kaynak{margin-top:24px;font-size:12px}

/* "♪ Şu an çalıyor" etiketi ve "Opening'i geç" düğmesi (yalnız reklamsız <video>) */
.xray-muzik{position:absolute;top:14px;right:14px;z-index:2;max-width:min(360px,70%);display:flex;align-items:center;gap:10px;
  padding:9px 14px 9px 11px;border-radius:var(--r);color:#eef0f6;font-size:13px;line-height:1.3;
  background:rgba(6,7,11,.78);border:1px solid rgba(255,255,255,.1);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  animation:xray-muzik-gir .45s cubic-bezier(.2,.9,.3,1.25);
  pointer-events:none} /* yalnız bilgi: altındaki videoya dokunmak (oynat/duraklat) etiket yüzünden kaçmasın */
.xray-muzik[hidden]{display:none}
.xray-muzik .meta{color:#9aa0b2}
.xray-muzik-ust{display:block;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.xray-muzik-metin{min-width:0}
/* Etiket dokunuşu videoya geçiriyor; yalnız Spotify düğmesi tıklanabilir. */
.xray-muzik-spotify{pointer-events:auto;flex:none;width:32px;height:32px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:50%;color:#1db954;background:rgba(29,185,84,.14);transition:background .2s,color .2s}
.xray-muzik-spotify:hover,.xray-muzik-spotify:focus-visible{background:#1db954;color:#0a0c11;--spotify-ark:#1db954}
.xray-muzik-spotify .ic{width:18px;height:18px}
.xray-gec{position:absolute;right:16px;bottom:calc(84px + var(--safe-b));z-index:3;padding:10px 18px;border-radius:var(--r-sm);cursor:pointer;
  font:inherit;font-size:14px;font-weight:700;color:#0a0c11;background:#eef0f6;border:0;box-shadow:0 8px 24px -8px rgba(0,0,0,.7)}
.xray-gec:hover{background:#fff}
.xray-gec[hidden]{display:none}
#player-modal-xray[aria-pressed="true"]{color:var(--accent-ink);border-color:rgba(var(--accent-rgb),.5);background:rgba(var(--accent-rgb),.12)}

/* ---------- top button ---------- */
#top-btn{position:fixed;right:18px;bottom:calc(18px + var(--safe-b));z-index:20;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:50%;border:1px solid var(--border-strong);
  background:var(--float-bg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--text);font-size:18px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;visibility:hidden;transform:translateY(10px);
  transition:opacity .2s,transform .2s var(--ease),visibility .2s,border-color .15s,background .15s}
#top-btn.show{opacity:1;pointer-events:auto;visibility:visible;transform:none}
#top-btn:hover{border-color:rgba(var(--accent-rgb),.7);background:rgba(var(--accent-rgb),.2)}

/* ---------- skeletons ---------- */
@keyframes pulse{0%,100%{opacity:.55}50%{opacity:1}}
.skel{background:var(--surface-3);border-radius:var(--r-sm);animation:pulse 1.5s ease-in-out infinite}
.card .skel.poster{margin:0}
.card .skel-line{margin:0 6px}
.skel-detail{display:flex;gap:22px;align-items:flex-end;margin-bottom:20px;padding:24px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl)}
.skel-poster{width:150px;aspect-ratio:2/3;flex:none;border-radius:var(--r)}
.skel-lines{flex:1;display:flex;flex-direction:column;gap:12px;padding-bottom:6px}
.skel-line{height:14px;border-radius:6px}
.skel-line.w60{width:60%}
.skel-line.w30{width:30%}
.skel-eps{display:flex;flex-direction:column;gap:8px}
.skel-ep{height:48px;border-radius:var(--r)}

/* ---------- tablet ---------- */
@media (max-width:900px){
  .header-links{gap:4px}
  #gh-link span,#ig-link span,#legal-link span{display:none}
  #gh-link{padding:8px;border-radius:50%}
  .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .poster.detail-poster{width:130px;height:195px}
}

/* ---------- mobile ---------- */
@media (max-width:640px){
  header{flex-wrap:wrap;gap:8px 6px;padding:8px 12px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px))}
  .home-link{margin-right:auto}
  .home-link::before{width:28px;height:28px;font-size:15px;border-radius:8px}
  header h1{font-size:15px}
  .search-wrap{order:10;flex-basis:100%;max-width:none}
  #search{padding-top:11px;padding-bottom:11px;font-size:16px} /* iOS zoom'u engellemek için 16px */
  #random-btn{padding:8px 11px;font-size:12.5px}
  #random-btn span{display:none}
  .header-links{margin-left:0}
  main{padding:14px 12px 40px}

  .stats-strip{grid-template-columns:repeat(2,1fr);margin-bottom:16px}
  .stat{padding:12px 8px}
  .featured{gap:14px;padding:14px;margin-bottom:20px;border-radius:var(--r-lg)}
  .poster.featured-poster{width:96px;height:144px}
  .featured-info h2{font-size:18px;margin:6px 0 4px}
  .featured-info .meta{font-size:12px}
  .featured-cta{margin-top:10px;padding:7px 13px;font-size:12.5px}
  .recent-grid .card-wrap{--recent-card-w:124px}
  .archive-title{font-size:18px}

  .filterbar{flex-wrap:nowrap;overflow-x:auto;margin:0 -12px 14px;padding:2px 12px 8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    /* kaydırılabilir olduğunu belli eden kenar maskesi (§6.7) */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 28px),transparent 100%)}
  .filterbar::-webkit-scrollbar{display:none}
  .filterbar>*{flex:none}
  .grid:not(.recent-grid){grid-template-columns:repeat(2,1fr);gap:10px}
  .card{border-radius:var(--r);padding:5px}
  .poster{border-radius:calc(var(--r) - 5px)}
  .card h3{font-size:12.5px;margin:8px 5px 3px}
  .card .meta{font-size:11px;margin:0 5px 6px}
  .badges{margin:0 5px 5px}
  .badge{font-size:11px;padding:2px 7px}
  .fav-btn{top:9px;right:9px;width:28px;height:28px}
  .rating-badge{top:9px;left:9px;font-size:11px;padding:3px 8px}
  .yas-rozet{top:9px;right:9px;font-size:11px;padding:2px 7px}
  .yas-kapi{margin:24px auto;padding:20px 16px}

  .detail-head{gap:14px;align-items:flex-start;padding:14px;margin-bottom:16px;border-radius:var(--r-lg)}
  .poster.detail-poster{width:104px;height:156px;font-size:24px}
  .detail h2{font-size:19px;gap:8px;margin-bottom:8px}
  .fav-btn-lg{width:32px;height:32px;font-size:15px}
  .detail-head .info-tags{gap:5px;margin-bottom:8px}
  .detail-head .info-tags .tag{font-size:11px;padding:3px 9px}
  .detail-head .info-stats{gap:6px 12px;font-size:12px;margin-bottom:12px}
  .start-btn{font-size:13px;padding:9px 16px}
  .info{padding:14px}
  .info-ozet{font-size:13.5px}
  .ep-toolbar .section-title{font-size:16px}
  .ep-head{padding:11px 12px;font-size:13px;gap:10px}
  .ep-links{padding:10px 12px 12px}
  .link-btn{font-size:12px;padding:7px 11px}
  .fansub-chip{font-size:12px;padding:7px 11px}
  .pager button{width:100%}

  footer{font-size:12px;padding-top:16px;flex-direction:column;gap:8px}
  .footer-sep{display:none}
  #top-btn{right:14px;bottom:calc(14px + var(--safe-b));width:42px;height:42px}

  #player-modal{padding:0}
  .xray-panel{width:100%;padding:14px 14px calc(110px + var(--safe-b));background:rgba(6,7,11,.93)}
  /* telefonda tanıtım kısa bir önizleme: etiketin altından başlıyor, videonun yarısını geçmiyor, alt kenarı soluyor */
  .xray-panel.tanitim{top:66px;bottom:auto;max-height:50%;width:84%;padding-bottom:14px;border-radius:0 var(--r) var(--r) 0;
    background:linear-gradient(90deg,rgba(6,7,11,.38),rgba(6,7,11,.12) 75%,rgba(6,7,11,0));
    -webkit-backdrop-filter:none;backdrop-filter:none;text-shadow:0 1px 3px rgba(0,0,0,.95),0 0 8px rgba(0,0,0,.6);
    -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
  /* telefonda tanıtımda arka plan şeffaf: satır ve kart zeminleri de yalnız ince bir iz */
  .xray-panel.tanitim .xray-kisi{background:rgba(6,7,11,.22)}
  .xray-panel.tanitim .xray-sarki-kart{background:rgba(6,7,11,.3);animation:none;border-color:rgba(255,255,255,.14)}
  .xray-kapat{width:40px;height:40px}
  .sv-foto{width:72px;height:72px;font-size:22px}
  .sv-bas{gap:14px}
  .xray-muzik{top:10px;right:10px;max-width:calc(100% - 20px);font-size:12px}
  .xray-gec{right:10px;bottom:calc(96px + var(--safe-b));font-size:13px}
  /* dokunmatikte 44px'lik hedef (§6.6.4) */
  #player-modal-controls button{width:44px;height:44px}
  #player-modal-controls .ic{width:22px;height:22px}
  #player-modal-controls-row{gap:6px}
  #player-modal-box{max-width:none;width:100%;height:100%;max-height:none;aspect-ratio:auto;border-radius:0;border:none}
  #player-modal-bar{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top,0px));font-size:12px}
  .player-modal-hint{display:none}
  .player-modal-right{order:-1;justify-content:flex-end}
  .player-modal-center{flex-wrap:nowrap;justify-content:space-between}
  .player-modal-center .link-btn{flex:1}
  .player-modal-cta{padding:6px 10px;font-size:12px}
  #player-modal-volume{width:44px}
  #player-modal-time{font-size:11px}
}

/* ---------- very small ---------- */
@media (max-width:360px){
  .grid{gap:8px}
  .stat-num{font-size:18px}
  .detail-head{flex-direction:column;align-items:center;text-align:center}
  .detail h2{justify-content:center}
  .detail-head .info-tags,.detail-head .info-stats{justify-content:center}
}

/* ---------- hover-capable only ---------- */
@media (hover:none){
  .card-wrap:hover .card{transform:none;box-shadow:var(--shadow-sm)}
  .card-wrap:hover .poster img{transform:none}
  .featured:hover{transform:none}
  .card:active{transform:scale(.98)}
}

/* 400 px'den dar ekranda oynatıcı kontrol çubuğu (oynat, ses, süre, hız, resim içinde resim, tam ekran)
   sığmıyor, tam ekran düğmesi dışarıda kalıyordu. Ses kaydırıcısı gizleniyor: telefonda ses donanım
   tuşlarıyla ayarlanıyor, sessize alma düğmesi yerinde. */
@media (max-width:400px){
  #player-modal-volume{display:none}
  #player-modal-controls-row{gap:2px}
}