:root{
    --bg:#0c0c0e; --panel:#151923; --panel-2:#1b1f2a; --text:#eef2ff; --muted:#98a1b3; --ring:rgba(255,255,255,.16); --ring-2:rgba(82,129,255,.35);
    --accent:#4aa8ff; --warning:#ffcf5a; --radius:16px;
    --hero-h:340px; --poster-w:240px; --poster-tilt:-4deg; --poster-scale:1.12;
  }
  html,body{height:100%}
  body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .page{min-height:100dvh}

  /* HERO */
  .hero{position:relative;isolation:isolate;overflow:hidden;min-height:var(--hero-h);background:#0f1116;border-bottom:1px solid var(--ring)}
  .hero::before{content:"";position:absolute;inset:-6% -8% -6% -8%;z-index:-2;background:center/cover no-repeat var(--hero-bg, url('https://images.unsplash.com/photo-1535223289827-42f1e9919769?q=80&w=2069&auto=format&fit=crop'));filter:saturate(1.04) contrast(1.04)}
  .hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,8,10,.5),rgba(8,8,10,.86) 55%,rgba(8,8,10,.94))}
  /* Dinamik kararma katmanı (scroll ile) */
  .hero-dim{position:absolute;inset:0;pointer-events:none;background:rgba(8,8,10, var(--hero-dim, 0));transition:background .2s ease}
/* Tüm avatarları sabit boyutlu, taşmayan hale getir */
.avatar{
  width: 40px;          /* istersen 32 / 48 yaparsın */
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;       /* yanındaki yazıyı ezmesin */
}

/* İçindeki resim kutuya göre kırpılsın */
.avatar img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;    /* ortalayarak kırpsın, uzamasın */
}
/* Byline içindeki linkler normal yazı gibi gözüksün */
.byline a{
  color: inherit;
  text-decoration: none;
}

/* Kalın isim için ekstra: <b><a> içini düzgün göster */
.byline b a{
  font-weight: inherit; /* zaten <b> kalın yapıyor */
}

/* Hover'da ufak efekt istersen */
.byline a:hover{
  text-decoration: underline;
}

  .container{width:min(1760px,98vw);margin-left:clamp(14px,4vw,64px);margin-right:auto}
  .hero-inner{display:flex;align-items:flex-start;gap:18px;padding:24px 0 24px;transition:transform .2s ease}
  .poster{position:relative;width:var(--poster-w);aspect-ratio:2/3;border-radius:20px;overflow:hidden;outline:1px solid rgba(255,255,255,.08);box-shadow:0 34px 90px rgba(0,0,0,.55);background:#0b0b0d}
  .poster img{width:100%;height:100%;object-fit:cover;display:block}
  .age{position:absolute;right:12px;bottom:12px;background:rgba(0,0,0,.55);border:1px solid var(--ring);padding:.42rem .6rem;border-radius:999px;font:700 12px/1 Inter}
  .meta{display:flex;flex-direction:column;gap:14px;max-width:900px}
  .title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .title h1{margin:0;font:800 clamp(28px,3.4vw,44px)/1.05 Urbanist,Inter,sans-serif}
  .pill{font:800 12px/1 Inter;border:1px solid var(--ring);padding:.35rem .55rem;border-radius:8px}
  .row{display:flex;flex-wrap:wrap;gap:14px 18px;color:var(--muted);font-weight:700}
  .sep{opacity:.35}
  .description{color:#d8deef;max-width:80ch}
  .chips{display:flex;flex-wrap:wrap;gap:8px}
  .chip{font:700 12px/1 Inter;background:rgba(34,39,54,.6);border:1px solid var(--ring);padding:.55rem .7rem;border-radius:999px;color:#e8eefc}
  .ranks{display:flex;flex-wrap:wrap;gap:10px}
  .rank{font:800 12px/1 Inter;color:#ffe6a6;background:linear-gradient(180deg,rgba(255,206,80,.15),rgba(255,206,80,.05));border:1px dashed rgba(255,206,80,.45);padding:.55rem .7rem;border-radius:999px}
  .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .btn{display:inline-flex;align-items:center;gap:10px;padding:.9rem 1rem;border-radius:12px;border:1px solid var(--ring);background:rgba(21,25,35,.85);color:#e8f0ff;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; position:relative; overflow:hidden}
  .btn.primary{background:color-mix(in oklab,var(--accent),#000 75%);border-color:var(--ring-2)}
  .btn:hover{transform:translateY(-1px);box-shadow:0 10px 22px rgba(0,0,0,.25), 0 0 0 1px var(--ring-2) inset}
  .btn:active{transform:translateY(0)}
  .ico{width:18px;height:18px;display:inline-block;vertical-align:-3px}
  .row .ico{width:16px;height:16px;opacity:.9;margin-right:6px}
  .row .m-item{display:inline-flex;align-items:center;gap:8px}
  .btn .ico{width:18px;height:18px}
  .btn.ghost{background:transparent;border-color:var(--ring)}
  .btn.on{color:#a6e3ff;border-color:var(--ring-2)}
  .btn.on .ico{fill:currentColor}

  /* Ripple efekti */
  .ripple{position:absolute;border-radius:50%;transform:scale(0);background:rgba(255,255,255,.28);animation:ripple .6s ease-out}
  @keyframes ripple{to{transform:scale(2.5);opacity:0}}

  /* EPISODE LIST (kısa) */
  .section{padding:24px 0}
  .h{margin:0 0 12px 0;font:800 18px/1 Urbanist}
  .grid{display:grid;gap:12px}
  .grid.cols-3{grid-template-columns:1fr}
  @media(min-width:720px){.grid.cols-3{grid-template-columns:1fr 1fr}}
  @media(min-width:1040px){.grid.cols-3{grid-template-columns:1fr 1fr 1fr}}
  .card{display:grid;grid-template-columns:132px 1fr;gap:12px;align-items:center;background:rgba(10,10,10,.9);border:1px solid var(--ring);border-radius:14px;overflow:hidden}
  .thumb{width:100%;height:100%;object-fit:cover;aspect-ratio:16/9}
  .info{padding:10px 12px 12px 4px;display:grid;gap:6px}
  .epi-top{display:flex;align-items:center;gap:10px;justify-content:space-between}
  .epi-title{font:700 14px/1.25 Inter}
  .epi-desc{font:500 13px/1.4 Inter;color:#c7cfe2;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .epi-meta{display:flex;align-items:center;gap:6px;color:var(--muted);font:600 12px/1 Inter}
  .icon-btn{color:white; display:inline-grid;place-items:center;width:32px;height:32px;border-radius:10px;border:1px solid var(--ring);background:rgba(21,25,35,.8);transition:transform .15s ease, box-shadow .15s ease; position:relative; overflow:hidden}
  .icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.2)}

  /* TABS & SEASON CARDS */
  .tabs{display:flex;gap:8px;margin:6px 0 14px}
  .tab-btn{display:inline-flex;align-items:center;gap:8px;padding:.65rem .9rem;border-radius:999px;border:1px solid var(--ring);background:rgba(12,12,12,.75);color:#e8f0ff;font:700 13px/1 Inter;cursor:pointer}
  .tab-btn .ico{width:16px;height:16px}
  .tab-btn.active{background:color-mix(in oklab, var(--accent), #000 78%);border-color:var(--ring-2)}
  .tab-panels .panel.hidden{display:none}
  .season-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(160px,1fr))}
  .season-card{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:#101318;border:1px solid var(--ring);box-shadow:0 20px 50px rgba(0,0,0,.4);transition:.2s transform,.2s border-color}
  .season-card img{width:100%;height:100%;object-fit:cover;display:block}
  .season-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.68) 16%, rgba(0,0,0,.32) 44%, rgba(0,0,0,0) 68%)}
  .season-badge{z-index: 2; position:absolute;left:10px;bottom:10px;font:800 13px/1 Inter;color:#fff;background:rgba(0,0,0,.55);border:1px solid var(--ring);padding:.5rem .7rem;border-radius:999px}
  .season-card:hover{transform:translateY(-2px);border-color:var(--ring-2)}
/* ===== season-card güçlendirme ===== */

/* 1) Hover yalnızca fare olan cihazlarda */
@media (hover: hover) and (pointer: fine){
  .season-card:hover{ transform: translateY(-4px); border-color: var(--ring-2); }
}

/* 2) Klavye erişilebilirliği + seçili hal */
.season-card:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 2px color-mix(in oklab, var(--ring-2) 75%, #ffffff 25%),
    0 14px 28px rgba(0,0,0,.35);
}
.season-card[aria-current="true"],
.season-card.is-active{
  border-color: var(--ring-2);
  box-shadow: 0 0 0 2px var(--ring-2), 0 18px 40px rgba(0,0,0,.42);
}

/* 3) Başlık/metin için güvenli alan + clamp (opsiyonel başlık kullanırsan) */
.season-title{
  position:absolute; left:12px; right:12px; bottom:12px; z-index:2;
  color:#eef3ff; font:700 13.5px/1.2 Inter, system-ui; 
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* 4) Lazy yükleme için yumuşak blur → net geçiş */
.season-card.loading img{ filter: blur(10px) saturate(.85); transform: scale(1.02); }
.season-card.loaded  img{ filter: none; transform:none; transition: filter .25s ease, transform .25s ease; }

/* 5) Görsel yoksa güvenli arka plan */
.season-card.no-img{ 
  background: linear-gradient(180deg,#161a21,#0f1217);
}
.season-card.no-img::before{
  content:"Sezon"; position:absolute; inset:auto 12px 14px 12px; z-index:2;
  color:#a9b6d5; font:600 12px/1 Inter;
}

/* 6) Hareketi azalt tercihine saygı */
@media (prefers-reduced-motion: reduce){
  .season-card, .season-card.loaded img{ transition: none; }
}

/* 7) Yatay şerit için küçük dokunuş (kullanıyorsan) */
.season-strip{ scrollbar-width: thin; }
.season-strip::-webkit-scrollbar{ height:8px }
.season-strip::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 8px; }
@media (max-width: 480px){
  .season-grid{
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)) !important;
    gap: 10px !important;
  }
  .season-card{
    border-radius: 14px !important;
    box-shadow: 0 12px 28px rgba(0,0,0,.35) !important;
  }
  .season-card::after{
    /* daha az karartma ki görsel boğmasın */
    background: linear-gradient(0deg, rgba(0,0,0,.60) 18%, rgba(0,0,0,.28) 46%, rgba(0,0,0,0) 70%) !important;
  }
  .season-badge{
    left: 8px; bottom: 8px;
    padding: .40rem .56rem !important;
    font-size: 12px !important;
    border-radius: 999px !important;
  }
  .season-title{        /* kullanıyorsan */
    left: 8px; right: 8px; bottom: 8px;
    font-size: 12.5px !important;
  }
  /* hover zıplamasını azalt (mobilde gereksiz) */
  @media (hover: none){
    .season-card:hover{ transform: none !important; }
  }
}

/* çok dar cihazlar (≤360px) için ekstra sıkıştırma */
@media (max-width: 360px){
  .season-grid{
    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)) !important;
    gap: 8px !important;
  }
  .season-badge{ font-size: 11px !important; }
}
@media (max-width: 480px){
  .season-strip .season-card{ min-width: 120px !important; }
}
@media (max-width: 360px){
  .season-strip .season-card{ min-width: 108px !important; }
}

/* === Yorum kartı — mobil görünürlük düzeltmesi === */
@media (max-width: 640px){
  /* Kart iki kolondan tek kolona insin */
  .reviews-card{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  /* Puan kolonu üstte, yorumlar altta */
  .reviews-card .score-col{
    order: 0 !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* 🔧 Asıl sorun: review-col bazı temalarda gizleniyor/sıkışıyor */
  .reviews-card .review-col{
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: visible !important;
    transform: none !important;
  }

  /* İç ögeler taşmasın, daha kompakt olsun */
  .review-item{
    border-radius: 12px !important;
    padding: 10px 12px !important;
  }
  .review-item .byline{ gap: 8px !important; }
}

/* Çok dar cihazlar için (≤360px) ekstra sıkıştırma */
@media (max-width: 360px){
  .review-item{ padding: 8px 10px !important; }
}


  /* REVIEWS + FACTS (genel stiller) */
 .reviews-card{position:relative;margin-top:8px;background:(1200px 420px at 15% -10%, rgba(0, 0, 0, 0.12), transparent 55%),color-mix(in oklab, var(--panel), #000 6%);border:1px solid var(--ring);border-radius:18px;padding:18px 16px 16px;display:grid;grid-template-columns:280px 1fr;gap:24px}
  .score-col{display:grid;align-content:start;gap:10px}
  .score-col .avg{font:900 64px/1 Urbanist, Inter, sans-serif;letter-spacing:.5px}
  .score-col .votes{color:var(--muted);font:700 12px/1 Inter}
  .dist-row{display:flex;align-items:center;gap:10px}
  .dist-row .label{width:42px;text-align:right;color:#ffd27a;font:800 12px/1 Inter}
  .bar{flex:1;height:8px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
  .bar > span{display:block;height:100%;width:0;background:linear-gradient(90deg, #ffd27a, #ffad66);}
  .review-col{display:grid;gap:12px}
  .review-item{position:relative;background:rgba(255,255,255,.02);border:1px solid var(--ring);border-radius:14px;padding:12px}
  .review-title{display:flex;align-items:center;gap:8px;font:800 16px/1.2 Urbanist}
  .review-rate{color:#ffd27a;font-weight:800;margin-bottom:4px}
  .review-text{color:#e6ecff;opacity:.95;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden;position:relative}
  .byline{color:var(--muted);display:flex;align-items:center;gap:8px;margin-top:8px}
  .avatar{width:22px;height:22px;border-radius:999px;background:#263047;display:grid;place-items:center;font:800 11px/1 Inter}
  .avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
  .actions-row{display:flex;gap:10px}

  .facts-card{margin-top:14px;background:(in oklab, var(--panel), #000 6%);border:1px solid var(--ring);border-radius:18px;padding:16px}
  .facts-card h4{margin:0 0 10px 0;font:800 16px/1 Urbanist;color:#e9eeff}
  .facts-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}
  .fact{display:grid;grid-template-columns:auto 1fr;align-items:start;gap:10px;padding:10px;border:1px solid rgba(255,255,255,.06);border-radius:12px;background:rgba(255,255,255,.02)}
  .fact .ico{width:18px;height:18px;opacity:.9}
  .fact .k{color:var(--muted);font:700 12px/1 Inter}
  .fact .v{font:700 13px/1.1 Inter}

  /* MOBİL */
  @media(max-width:1200px){:root{--poster-w:480px}}
  @media(max-width:1024px){:root{--poster-w:420px;--poster-tilt:-3.2deg;--hero-h:600px}}
  @media(max-width:860px){:root{--poster-w:320px;--poster-tilt:-2.6deg;--hero-h:560px}.hero-inner{gap:22px}}
  @media(max-width:640px){:root{--poster-w:220px;--poster-tilt:-2deg;--hero-h:520px}.hero-inner{grid-template-columns:1fr}}

  /* ==== YORUMLAR & EK BİLGİLER — sağda küçük boşluk, taşma yok ==== */
/* ==== YORUMLAR & EK BİLGİLER — taşma yok, sağda küçük boşluk ==== */
#ratingsReviews{
  --gutter-l: clamp(14px, 4vw, 64px);  /* soldaki mevcut gutter ile hizalı */
  --gutter-r: 14px;                    /* SAĞ BOŞLUK (küçük, çizgi görünür) */
}

#ratingsReviews.section{ padding:16px 0 18px !important; }

#ratingsReviews .container{
  /* 100vw yerine 100% → scrollbar payı yüzünden taşma olmaz */
  width: calc(100% - var(--gutter-l) - var(--gutter-r)) !important;
  margin-left: var(--gutter-l) !important;
  margin-right: var(--gutter-r) !important;
  max-width: none !important;
  box-sizing: border-box !important;
  overflow: visible !important;
}

/* Kartlar satır içinde taşmadan kalsın */
#ratingsReviews .reviews-card,
#ratingsReviews .facts-card{
  width: 98% !important;
  max-width: 100% !important;
  margin: 0 !important;
  border-radius: 14px !important;
  padding-left: 16px !important;
  padding-right: 16px !important; /* sağ çizgi görünür */
  overflow: hidden !important;     /* iç taşmaları gizle */
}

/* Ek Bilgiler kartları: sığmayanlar alt satıra geçsin (yatay scroll yok) */
#ratingsReviews .facts-grid{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  gap: 12px !important;
  justify-content: start !important;
  align-content: start !important;
  overflow: visible !important;
}

#ratingsReviews .fact{ min-height:14px !important; width:auto !important; }

/* Uzun yorum cümleleri taşmasın */
#ratingsReviews .review-text{
  overflow-wrap:anywhere !important;
  word-break:break-word !important;
}
#contentTabs.section{ 
  padding-bottom: 8px !important;     /* önce 24px idi */
}
#contentTabs .tabs{
  margin-bottom: 6px !important;      /* sekmeler altındaki boşluğu küçült */
}
#ratingsReviews.section{
  padding-top: 8px !important;        /* önce 16px idi */
}

/* == DERECELENDİRME → EK BİLGİLER arası boşluğu kısalt == */
/* HTML'deki <br> boşluk veriyorsa gizle */
#ratingsReviews br{ display:none; }

#ratingsReviews .facts-card{
  margin-top: 8px !important;         /* önce 14–16px civarıydı */
}

  /* ==== ÖNERİLER (Senin için önerdiklerimiz) ==== */
  #recommendations{ --gutter-l: clamp(14px, 4vw, 64px); --gutter-r: 14px; }
  #recommendations .container{
    width: calc(100% - var(--gutter-l) - var(--gutter-r));
    margin-left: var(--gutter-l); margin-right: var(--gutter-r);
    max-width:none; box-sizing:border-box;
  }
  #recommendations .h{font:800 20px/1 Urbanist;margin:6px 0 14px 0}
  .recs-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
  .rec-card{position:relative;aspect-ratio:2/3;border-radius:16px;overflow:hidden;background:#101318;border:1px solid var(--ring);box-shadow:0 16px 40px rgba(0,0,0,.35);transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease}
  .rec-card img{width:100%;height:100%;object-fit:cover;display:block}
  .rec-card::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg, rgba(0,0,0,.72) 18%, rgba(0,0,0,.0) 60%)}
  .rec-info{color:white;position:absolute;left:10px;right:10px;bottom:10px;display:grid;gap:8px;z-index:2}
  .rec-title{font:800 14px/1.2 Inter}
  .rec-actions{display:flex;gap:8px}
  .rec-btn{display:inline-flex;align-items:center;gap:8px;padding:.55rem .7rem;border-radius:12px;border:1px solid var(--ring);background:rgba(21,25,35,.85);font:800 12px/1 Inter;cursor:pointer;transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; position:relative; overflow:hidden}
  .rec-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(0,0,0,.22)}
  .rec-card:hover{transform:translateY(-2px);border-color:var(--ring-2);box-shadow:0 22px 60px rgba(0,0,0,.45)}

  /* Kart giriş animasyonu */
  .reveal{opacity:0;transform:translateY(18px);transition:opacity .5s ease, transform .5s ease}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* MOBİL */
  @media(max-width:1200px){:root{--poster-w:480px}}
  @media(max-width:1024px){:root{--poster-w:420px;--poster-tilt:-3.2deg;--hero-h:600px}}
  @media(max-width:860px){:root{--poster-w:320px;--poster-tilt:-2.6deg;--hero-h:560px}.hero-inner{gap:22px}}
  @media(max-width:640px){:root{--poster-w:220px;--poster-tilt:-2deg;--hero-h:520px}.hero-inner{grid-template-columns:1fr}}

  /* === AGE-GATE (18+) — tema uyumlu === */
body.modal-open{overflow:hidden}

.agegate-backdrop{
  position:fixed; inset:0; z-index:9998;
  background:
    radial-gradient(1200px 500px at 10% -10%, rgba(82,129,255,.14), transparent 55%),
    rgba(8,10,14,.66);
  backdrop-filter: blur(10px) saturate(1.05);
  -webkit-backdrop-filter: blur(10px) saturate(1.05);
  display:none;
}
.agegate-backdrop.show{display:block}

.agegate{
  position:fixed; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:9999; width:min(760px, calc(100vw - 28px));
  border-radius:18px; border:1px solid var(--ring);
  background:color-mix(in oklab, var(--panel), #000 6%);
  box-shadow:0 40px 140px rgba(0,0,0,.55);
  display:none; overflow:hidden; isolation:isolate;
}
.agegate.show{display:grid; grid-template-columns:1fr}
@media (min-width:860px){ .agegate.show{grid-template-columns:1.05fr .95fr} }

.agegate-art{
  position:relative; min-height:260px;
  background:
    radial-gradient(650px 250px at -10% 0%, rgba(74,168,255,.18), transparent 60%),
    radial-gradient(600px 300px at 110% 100%, rgba(255,207,90,.12), transparent 60%),
    linear-gradient(180deg, #10141d, #0c0f17 60%, #0b0e15);
}
.agegate-art::after{
  content:"18+"; position:absolute; right:12px; bottom:12px;
  font:900 48px/1 Urbanist, Inter, sans-serif; letter-spacing:.5px;
  color:rgba(255,255,255,.08); pointer-events:none;
}

.agegate-body{padding:18px 16px 16px; display:grid; gap:12px}
@media (min-width:860px){ .agegate-body{padding:20px 18px 18px} }

.age-title{margin:0; font:800 22px/1.1 Urbanist, Inter, sans-serif}
.age-sub{color:var(--muted); font:600 13px/1.45 Inter}

.age-badge{
  display:inline-flex; gap:8px; align-items:center;
  font:800 12px/1 Inter; color:#ffd27a;
  background:linear-gradient(180deg, rgba(255,206,80,.12), rgba(255,206,80,.04));
  border:1px dashed rgba(255,206,80,.4);
  padding:.45rem .6rem; border-radius:999px;
}

.age-form{display:grid; gap:10px; margin-top:2px}
.label{font:700 12px/1 Inter; color:var(--muted)}
.input{
  height:42px; padding:0 12px; border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid var(--ring); color:var(--text);
  font:600 14px/1 Inter; outline:none;
}
.input:focus{border-color:var(--ring-2); box-shadow:0 0 0 3px rgba(82,129,255,.15)}

.error{display:none; color:#ff9b9b; font:700 12px/1.25 Inter}
.error.show{display:block}

.age-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:4px}
.age-note{color:var(--muted); font:600 11px/1.45 Inter; opacity:.9}

.age-block{
  display:none; padding:14px; border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,60,60,.06); color:#ffd0d0;
  font:800 14px/1.3 Urbanist;
}
.age-block.show{display:block}
.alt-verify{ margin-top:8px }
.link-btn{
  background:none; border:0; padding:0; cursor:pointer;
  color:#a6e3ff; font:700 12px/1.2 Inter; letter-spacing:.2px;
  text-decoration:underline; text-underline-offset:2px;
}
.link-btn:hover{ opacity:.9 }

/* ===== DOWNLOAD PANEL (Koyu Modal) ===== */
.dl-backdrop{
  position:fixed; inset:0; z-index:999;
  background:rgba(4,6,10,.75); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.dl-modal{
  position:fixed; z-index:1000; left:50%; top:50%;
  width:min(1100px,96vw); max-height:min(84vh,900px);
  background:linear-gradient(180deg, rgba(7,10,16,.96), rgba(6,9,14,.98));
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:18px; box-shadow:0 50px 160px rgba(0,0,0,.65);
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  display:grid; grid-template-rows:auto auto auto 1fr; overflow:hidden;
  transition:transform .18s ease, opacity .18s ease;
}
.dl-open .dl-backdrop{opacity:1; pointer-events:auto;}
.dl-open .dl-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}

.dl-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--ring);
  background:radial-gradient(900px 320px at 8% -10%, rgba(74,168,255,.12), transparent 65%);
}
.dl-title{margin:0; font:800 18px/1 Urbanist}
.dl-sub{margin:2px 0 0 0; color:var(--muted); font:700 12px/1.2 Inter}
.dl-x{color: white; display:grid;place-items:center;width:34px;height:34px;border-radius:12px;border:1px solid var(--ring);background:rgba(19,23,31,.75);cursor:pointer}

.dl-controls{
  display:grid; gap:8px; padding:10px 16px; border-bottom:1px solid var(--ring);
  grid-template-columns: auto 1fr; align-items:center;
  background:rgba(255,255,255,.02);
}
.dl-ctl-right{justify-self:end; color:var(--muted); font:700 12px/1 Inter}

/* ---- Custom dropdown (Bölüm) ---- */
.dl-select{position:relative}
.dl-select-btn{
  display:flex; align-items:center; gap:10px;
  padding:.6rem .8rem; height:40px;
  border:1px solid var(--ring); border-radius:12px;
  background:rgba(18,22,30,.9); color:#e8f0ff; font:800 13px/1 Inter; cursor:pointer;
}
.dl-select-btn .i{width:16px;height:16px}
.dl-select-btn .chev{transition:transform .18s ease}
.dl-select.open .dl-select-btn .chev{transform:rotate(180deg)}
.dl-select-menu{
  position:absolute; left:0; top:calc(100% + 8px); z-index:10;
  width:min(320px,70vw); border:1px solid var(--ring); border-radius:14px;
  background:rgba(10,12,16,.98); box-shadow:0 26px 90px rgba(0,0,0,.55);
  padding:8px; transform-origin:18px 0; transform:scale(.98) translateY(-6px);
  opacity:0; pointer-events:none; transition:transform .16s ease, opacity .16s ease;
}
.dl-select.open .dl-select-menu{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
.dl-select-search{
  width:100%; height:36px; border-radius:10px; border:1px solid var(--ring);
  background:rgba(22,26,36,.95); color:#e8f0ff; font:600 13px/1 Inter;
  padding:0 .65rem; margin-bottom:8px;
}
.dl-options{max-height:240px; overflow:auto; display:grid; gap:6px}
.opt-btn{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:.55rem .7rem; border-radius:10px; border:1px solid var(--ring);
  background:rgba(22,26,34,.75); color:#e8f0ff; font:700 13px/1 Inter; cursor:pointer;
}
.opt-btn:hover{border-color:var(--ring-2); background:color-mix(in oklab,var(--accent),#000 88%)}

/* Toolbar & list */
.dl-toolbar{
  display:flex; align-items:center; justify-content:space-between;
  padding:8px 16px; border-bottom:1px solid var(--ring); color:var(--muted);
  font:700 12px/1 Inter;
}
.dl-sort{display:flex; gap:8px; flex-wrap:wrap}
.sort-btn{
  border:1px solid var(--ring); background:rgba(21,25,35,.65);
  padding:.45rem .6rem; border-radius:999px; cursor:pointer; font:700 12px/1 Inter; color:#e8f0ff;
  display:inline-flex; align-items:center; gap:6px;
}
.sort-btn .i{width:14px;height:14px}
.sort-btn.active{background:color-mix(in oklab,var(--accent),#000 82%); border-color:var(--ring-2)}

.dl-results{overflow:auto; padding:10px 10px 12px}
.dl-item{
  display:grid; grid-template-columns:74px 1fr auto; gap:12px;
  padding:10px; border:1px solid var(--ring); border-radius:14px;
  background:rgba(8,10,14,.92); margin:8px 6px;
}
.dl-cover{width:74px; height:74px; border-radius:10px; overflow:hidden; background:#0f141f; border:1px solid var(--ring)}
.dl-cover img{width:100%; height:100%; object-fit:cover; display:block}
.dl-main{display:grid; gap:6px}
.dl-ep{font:800 12px/1 Inter; color:#cfe1ff}
.dl-name{font:700 14px/1.2 Inter}
.dl-tags{display:flex; gap:6px; flex-wrap:wrap}
.tag{
  font:700 11px/1 Inter; color:#e8f0ff; padding:.4rem .55rem; border-radius:999px;
  background:rgba(34,39,54,.6); border:1px solid var(--ring)
}
.tag.badge{background:rgba(255,206,80,.14); border-color:rgba(255,206,80,.45); color:#ffd27a}
.dl-actions{display:flex; align-items:center; gap:8px}
.icon-btn.small{width:34px; height:34px; border-radius:10px}
.icon-btn.small .i{width:16px;height:16px}

.dl-footer{
  padding:10px 16px; border-top:1px solid var(--ring); display:flex; justify-content:space-between; align-items:center;
  color:var(--muted); font:700 12px/1 Inter;
}

/* Icon base */
.i{display:inline-block; width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none}

/* Toast */
.toast{
  position:fixed; right:14px; bottom:14px; z-index:1200;
  background:rgba(16,20,28,.98); border:1px solid var(--ring); color:#eaf2ff;
  padding:.6rem .8rem; border-radius:12px; font:700 12px/1 Inter; opacity:0; transform:translateY(8px);
  transition:.18s ease; pointer-events:none;
}
.toast.show{opacity:1; transform:translateY(0)}
/* ====== COMMENTS MODAL (KOYU) ====== */

.cmt-backdrop{
  position:fixed; inset:0; z-index:990;
  background:rgba(4,6,10,.75); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}

.cmt-modal{
  position:fixed; z-index:995; left:50%; top:50%;
  width:min(1000px,96vw); max-height:min(86vh,1000px);
  background:linear-gradient(180deg, rgba(7,10,16,.96), rgba(6,9,14,.98));
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:18px; box-shadow:0 60px 180px rgba(0,0,0,.65);
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  display:grid; grid-template-rows:auto auto 1fr auto; overflow:hidden;
  transition:transform .18s ease, opacity .18s ease;
}
.cmt-open .cmt-backdrop{opacity:1; pointer-events:auto;}
.cmt-open .cmt-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}

.cmt-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--ring);
  background:radial-gradient(900px 320px at 8% -10%, rgba(74,168,255,.12), transparent 65%);
}

.cmt-title{margin:0; font:800 18px/1 Urbanist}
.cmt-sub{margin:2px 0 0 0; color:var(--muted); font:700 12px/1.2 Inter}
.cmt-x{color: white;display:grid;place-items:center;width:34px;height:34px;border-radius:12px;border:1px solid var(--ring);background:rgba(19,23,31,.75);cursor:pointer}

/* Üst araç çubuğu */
.cmt-toolbar{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:10px; padding:10px 16px; border-bottom:1px solid var(--ring); background:rgba(255,255,255,.02);
}
.cmt-search{
  height:38px; border:1px solid var(--ring); border-radius:12px; background:rgba(18,22,30,.9);
  color:#e8f0ff; font:600 13px/1 Inter; padding:0 .75rem; width:100%;
}
.cmt-sort{display:flex; gap:8px; flex-wrap:wrap}
.cmt-chip{display:inline-flex;align-items:center;gap:6px;padding:.45rem .6rem;border:1px solid var(--ring);border-radius:999px;background:rgba(21,25,35,.65);color:#e8f0ff;font:700 12px/1 Inter;cursor:pointer}
.cmt-chip.active{background:color-mix(in oklab,var(--accent),#000 82%); border-color:var(--ring-2)}
.i{display:inline-block; width:18px; height:18px; stroke:currentColor; stroke-width:1.8; fill:none}
/* --- CMT modal: mobilde tam ekran ama taşma yok --- */
@media (max-width: 640px){
  .cmt-modal{
    position: fixed !important;
    inset: 0 !important;
    /* 100vw/100vh YOK → scrollbar payını saymaz */
    width: auto !important;
    height: auto !important;
    max-width: none !important;
    max-height: none !important;

    transform: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
    box-sizing: border-box !important;

    overflow: hidden !important;      /* modal kabuğu */
    overflow-x: hidden !important;
    padding: 0 !important;            /* içerik kendi paddingle çalışsın */
  }

  .cmt-header, .cmt-toolbar, .cmt-footer{
    position: sticky; z-index: 2;
    left: 0; right: 0; background: inherit;
  }
  .cmt-header{ top: 0 }
  .cmt-toolbar{ top: 48px }
  .cmt-list{ overflow: auto; -webkit-overflow-scrolling: touch; }

  /* Geniş içeriklerin kırpmaması için */
  .cmt-modal *{ min-width: 0; max-width: 100%; }
}

/* Liste */
.cmt-list{overflow:auto; padding:12px 12px 14px}
.cmt-item{
  display:flex;                 /* grid -> flex */
  gap:12px;
  padding:12px 14px;
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:12px;
  align-items:flex-start;       /* avatar/metin tepede eşitlensin */
}
.cmt-avatar-wrap{
  position:relative !important;
  flex:0 0 56px;                /* genişlik: 56px, esneme yok */
  align-self:flex-start;        /* kartın tepesine sabitle */
  line-height:0;                /* img baseline boşluğu olmasın */
}
.cmt-avatar-wrap .user-card{
  left: calc(100% + 10px) !important; /* avatarın hemen sağı */
  top: 0 !important;
  right: auto !important;
  bottom: auto !important;
  z-index: 5;
  transform-origin: 0 0; /* giriş animasyonu için köşe */
}
.cmt-avatar-wrap .user-card.flip-left{
  left: auto !important;
  right: calc(100% + 10px) !important;  /* avatarın solu */
  transform-origin: 100% 0;
}
.cmt-avatar-wrap .user-card.flip-up{
  top: auto !important;
  bottom: 0 !important;                 /* dikeyde alttan hizala */
}
.cmt-avatar-wrap .user-card.flip-left.flip-up{
  transform-origin: 100% 100%;
}
.cmt-avatar{
  width:56px; height:56px;
  border-radius:12px; overflow:hidden;
}
.cmt-avatar img{
  display:block;                /* inline boşluklarını öldür */
  width:100%; height:100%; object-fit:cover;
}
.cmt-content{
  flex:1 1 auto;                /* kalan alanı al */
  min-width:0;                  /* taşma/ellipsis için gerekli */
  display:grid; gap:6px; align-content:start;
}

.cmt-userline{
  display:flex;
  align-items:center;           /* baseline -> center : kayma sebebi buydu */
  gap:10px;
  line-height:1.1;              /* çok sıkışık görünmesin */
}
.cmt-name{ margin:0; font-weight:800; }

.cmt-time{color:var(--muted);font:700 12px/1 Inter}
.cmt-stars{ display:inline-flex; align-items:center; gap:2px; }
.cmt-stars svg, .cmt-stars .star{
  width:14px; height:14px; display:block;
}

/* Yorum gövdesi ufak aralık */
.cmt-body{ margin-top:2px; line-height:1.55; }
.star{width:16px;height:16px;fill:#ffd27a;stroke:none;opacity:.92}

/* SPOILER */
.spoiler{ display:inline-block; line-height:1; vertical-align:middle; }
.spoiler.revealed{filter:none}
.spoiler-btn{
  display:inline-flex;align-items:center;gap:6px;margin:.35rem 0;
  padding:.35rem .55rem;border-radius:8px;border:1px solid var(--ring);background:rgba(34,39,54,.6);
  font:800 12px/1 Inter;color:#ffd27a; cursor:pointer;
}

/* PROFİL KARTI (Avatar hover) */
.user-card{
  position:absolute; left:64px; top:0;
  width:240px; background:rgba(10,12,16,.98);
  border:1px solid var(--ring); border-radius:12px; padding:10px;
  box-shadow:0 24px 80px rgba(0,0,0,.55);
  transform-origin:0 0; transform:scale(.98) translateY(6px); opacity:0; pointer-events:none;
  transition:.14s ease;
}
.user-card.show{opacity:1; transform:scale(1) translateY(0); pointer-events:auto}
.user-card .uc-top{display:flex;align-items:center;gap:8px}
.user-card .uc-ava{width:38px;height:38px;border-radius:8px;overflow:hidden;border:1px solid var(--ring)}
.user-card .uc-name{font:800 13px/1 Inter}
.user-card .uc-meta{color:var(--muted);font:700 11px/1.1 Inter}

/* Editor */
.cmt-editor{
  margin:10px 12px 2px; border:1px solid var(--ring); border-radius:14px; background:rgba(12,14,18,.9);
  padding:12px; display:grid; gap:10px;
}
.rate-row{display:flex; align-items:center; gap:8px}
.rate-stars{display:inline-flex; gap:4px}
.rate-stars .star{width:22px;height:22px;cursor:pointer;opacity:.8}
.rate-stars .star.active{opacity:1; transform:translateY(-1px)}
.cmt-text{
  min-height:84px; border:1px solid var(--ring); border-radius:12px; background:rgba(16,20,28,.95);
  color:#e8f0ff; font:600 13px/1.35 Inter; padding:.7rem .8rem; resize:vertical;
}
.cmt-ed-actions{display:flex; gap:8px; justify-content:space-between; align-items:center}
.cmt-hint{color:var(--muted); font:700 11px/1 Inter}

.cmt-footer{
  padding:10px 16px; border-top:1px solid var(--ring);
  display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:700 12px/1 Inter;
}

/* küçük yardımcı */
.tag{font:700 11px/1 Inter; color:#e8f0ff; padding:.35rem .5rem; border-radius:999px; background:rgba(34,39,54,.6); border:1px solid var(--ring)}
/* Layout fix + tipografi uyumu */
body.cmt-open, body.rules-open{ overflow:hidden; }

/* Modal genişlik ve geçiş */
.cmt-modal{ width:min(960px,96vw); }

/* Araç çubuğu yükseklikleri eşitlensin */
.cmt-toolbar{ grid-template-columns:1fr auto; gap:10px; }
.cmt-search{ height:40px; padding:0 .85rem; }
.cmt-chip{ height:40px; padding:.45rem .75rem; display:inline-flex; align-items:center; }

/* Editör ve liste hizaları */
.cmt-editor{ margin:12px 12px 8px; padding:12px; }
.cmt-text{ min-height:96px; }
.cmt-ed-actions .btn{ height:38px; }

/* Liste içinde kayma olmasın (scrollbar sabitle) */
.cmt-list{ padding:10px 12px 14px; scrollbar-gutter:stable both-edges; }

/* Kartlar dikeyde düzgün hizalansın */
.cmt-item{
  display:grid !important;
  grid-template-columns:56px minmax(0,1fr) !important; /* avatar | içerik */
  column-gap:12px;
  align-items:flex-start !important;
}
.cmt-avatar{ width:56px; height:56px; }
.cmt-userline{ align-items:baseline; gap:10px; }

/* Yıldız ve spoiler butonu satır yüksekliğine otursun */
.cmt-stars .star{ vertical-align:-3px; }
.spoiler{ display:inline-block; }
.spoiler-btn{ display:inline-flex; align-items:center; vertical-align:baseline; }

/* Mini profil kartının görünürlüğü ve sınırları */
.user-card{
  max-width:min(280px, calc(100vw - 32px));
  border-color: color-mix(in oklab,var(--ring),#000 20%);
}

/* Kenarlık tonu tutarlı olsun */
.cmt-editor{ border-color: color-mix(in oklab,var(--ring),#000 20%); }
.rules-backdrop{
  position:fixed; inset:0; z-index:996;
  background:rgba(4,6,10,.8); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.rules-modal{
  position:fixed; z-index:997; left:50%; top:50%;
  width:min(720px,92vw); max-height:min(80vh,900px); overflow:auto;
  background:linear-gradient(180deg, rgba(8,11,17,.98), rgba(7,10,15,.98));
  border:1px solid var(--ring); border-radius:16px;
  box-shadow:0 40px 160px rgba(0,0,0,.7);
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  transition:.18s ease;
}
.rules-open .rules-backdrop{ opacity:1; pointer-events:auto; }
.rules-open .rules-modal{ opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }

.rules-header{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 16px; border-bottom:1px solid var(--ring);
  background:radial-gradient(900px 320px at 8% -10%, rgba(74,168,255,.12), transparent 65%);
}
.rules-title{ margin:0; font:800 18px/1 Urbanist; }
.rules-body{ padding:14px 16px; display:grid; gap:12px; }
.rule{ display:grid; grid-template-columns:20px 1fr; gap:10px; align-items:start;
  padding:10px; border:1px solid var(--ring); border-radius:12px; background:rgba(255,255,255,.02);}
.rules-footer{ display:flex; justify-content:flex-end; gap:8px; padding:10px 16px; border-top:1px solid var(--ring); }
.cmt-item{
  display:grid;
  grid-template-columns: 56px minmax(0,1fr); /* avatar + içerik */
  column-gap:12px;
  align-items:start;
}

/* 2) Avatar kutusu ve img baseline boşluğunu kaldır */
.cmt-avatar-wrap{
  grid-column:1;
  align-self:flex-start;
  line-height:0; /* img baseline boşluğu olmasın */
}
.cmt-avatar{
  width:56px; height:56px;
  border-radius:12px; overflow:hidden;
  margin:0 !important;
}
.cmt-avatar img{
  display:block;
  width:100%; height:100%; object-fit:cover;
}

.cmt-item > :nth-child(2){
  grid-column:2;
  min-width:0;
  display:grid;
  gap:6px;
  align-content:start;
}

/* 3) İçerik sütunu: genişlik kısıtı ve tepe hizası */
.cmt-content{ min-width:0; display:grid; gap:6px; align-content:start; }

/* 4) Kullanıcı satırı — baseline → center (kaymayı yapan buydu) */
.cmt-userline{
  display:flex;
  align-items:center !important;  /* baseline → center */
  gap:10px;
  line-height:1.1;
}

/* 5) Yorum gövdesi küçük denge */
.cmt-body{ margin-top:2px; line-height:1.55; }

/* 6) Yıldız ikonları satırı büyütmesin */
.cmt-stars svg, .cmt-stars .star{ width:14px; height:14px; display:block; }

/* ---- Skor başlığı: solda yıldız + büyük sayı ---- */
/* ---- Skor başlığı: solda büyük yıldız + büyük sayı ---- */
.score-head{
  display:flex; align-items:baseline; gap:10px;
}
.big-star{
  width:40px; height:40px; flex:0 0 40px;
  fill:#ffd27a; filter:drop-shadow(0 2px 8px rgba(0,0,0,.3));
}

/* ---- Dış platform puanları (IMDb / AniList / MAL / TMDB) ---- */
.ext-scores{ display:grid; gap:8px; margin-top:6px; }
.ext-score{
  display:flex; align-items:center; gap:8px;
  padding:.48rem .6rem; border-radius:10px;
  border:1px solid var(--ring);
  background:rgba(255,255,255,.02);
  font:700 12px/1.1 Inter; color:inherit;
}
.ext-score .logo{
  display:inline-grid; place-items:center;
  height:20px; padding:0 .45rem; border-radius:6px;
  font:900 11px/1 Inter; letter-spacing:.2px; color:#0c0c0e;
}
.logo.imdb{ background:#f5c518; color:#111; }
.logo.anilist{ background:#02a9ff; color:#001b2e; }
.logo.mal{ background:#2e51a2; color:#fff; }
.logo.tmdb{ background:#01d277; color:#021b12; }

.ext-score .val{ font:900 14px/1 Urbanist, Inter, sans-serif; }
.ext-score .scale, .ext-score .votes{ color:var(--muted); font-weight:800; margin-left:2px; }
/* === Reviews alanı: esnemeyi kapat, hizayı düzelt === */
#ratingsReviews .reviews-card{ align-items:start; }            /* grid children stretch yok */
#ratingsReviews .review-col{ align-content:start; }            /* içerik yukarıda */
#ratingsReviews .review-col > *{ align-self:start; }           /* tek tek esneme kapalı */

/* === Aksiyon butonları: kompakt görünüm (sadece bu bölümde) === */
#ratingsReviews .actions-row{ gap:8px; flex-wrap:wrap; margin-top:8px; }
#ratingsReviews .actions-row .btn{
  padding:.6rem .8rem;      /* yükseklik küçülür */
  height:auto; line-height:1.1;
  border-radius:12px;
  font-size:13px; font-weight:800;
}

/* === Puan başlığı: yıldız + büyük puan sıkı hizalı === */
#ratingsReviews .score-head{ display:flex; align-items:center; gap:8px; }
#ratingsReviews .big-star{ width:22px; height:22px; fill:#ffd27a; opacity:.95; }

/* === Dış platform rozetleri === */
#ratingsReviews .ext-scores{
  display:grid; gap:8px; margin-top:10px;
  grid-template-columns:1fr;          /* solda tek kolon */
}
#ratingsReviews .ext-score{
  display:flex; align-items:center; gap:8px;
  padding:.5rem .65rem; border-radius:10px;
  background:rgba(255,255,255,.02);
  border:1px solid var(--ring);
  font:700 12px/1.1 Inter; color:#dfe7ff;
}
#ratingsReviews .ext-score .logo{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:54px; height:26px; border-radius:8px;
  font:900 12px/1 Inter; color:#071019;
}
#ratingsReviews .ext-score .logo.imdb{ background:#f5c518; }
#ratingsReviews .ext-score .logo.anilist{ background:#2b6be7; color:#fff; }
#ratingsReviews .ext-score .logo.mal{ background:#2e51a2; color:#fff; }
#ratingsReviews .ext-score .logo.tmdb{ background:#01d277; color:#012; }
#ratingsReviews .ext-score .val{ font:900 14px/1 Inter; margin-left:2px; }
#ratingsReviews .ext-score .scale,
#ratingsReviews .ext-score .votes{ color:var(--muted); font-weight:800; margin-left:4px; }
/* --- EP: grid içinde "Tüm bölümler" butonu --- */
#episodesPanel .more-btn{
  grid-column:1/-1;
  display:flex; align-items:center; justify-content:center; gap:8px;
  padding:.7rem .9rem; border-radius:12px;
  border:1px solid var(--ring);
  background:rgba(12,12,12,.75); color:#e8f0ff;
  font:800 13px/1 Inter; cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}
#episodesPanel .more-btn:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.22); }

/* --- EP MODAL (tema uyumlu) --- */
.eps-backdrop{
  position:fixed; inset:0; z-index:970;
  background:rgba(4,6,10,.75); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.eps-modal{
  position:fixed; z-index:975; left:50%; top:50%;
  width:min(1100px,96vw); max-height:min(86vh,1000px);
  background:linear-gradient(180deg, rgba(7,10,16,.96), rgba(6,9,14,.98));
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:18px; box-shadow:0 60px 180px rgba(0,0,0,.65);
  transform:translate(-50%,-46%) scale(.98);
  opacity:0; pointer-events:none;
  display:grid; grid-template-rows:auto auto 1fr auto; overflow:hidden;
  transition:transform .18s ease, opacity .18s ease;
}
.eps-open .eps-backdrop{opacity:1; pointer-events:auto;}
.eps-open .eps-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}

.eps-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--ring);
  background:radial-gradient(900px 320px at 8% -10%, rgba(74,168,255,.12), transparent 65%);
}
.eps-title{margin:0; font:800 18px/1 Urbanist}
.eps-sub{margin:2px 0 0 0; color:var(--muted); font:700 12px/1.2 Inter}
.eps-x{color:white; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; border:1px solid var(--ring); background:rgba(19,23,31,.75); cursor:pointer}

.eps-toolbar{
  display:grid; grid-template-columns:1fr auto; align-items:center;
  gap:10px; padding:10px 16px; border-bottom:1px solid var(--ring);
  background:rgba(255,255,255,.02);
}
/* arama alanı için mevcut .cmt-search stilini yeniden kullanıyoruz */

.eps-sort{display:flex; gap:8px; flex-wrap:wrap}
.eps-sort .sort-btn{
  border:1px solid var(--ring); background:rgba(21,25,35,.65);
  padding:.45rem .6rem; border-radius:999px; cursor:pointer;
  font:700 12px/1 Inter; color:#e8f0ff; display:inline-flex; align-items:center; gap:6px;
}
.eps-sort .sort-btn.active{background:color-mix(in oklab,var(--accent),#000 82%); border-color:var(--ring-2)}

.eps-results{overflow:auto; padding:10px 12px 14px}
.eps-grid{
  display:grid;
  gap:12px;
  /* min 220px olsun, ihtiyaç olursa 200’e çekebilirsin */
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
}
.eps-footer{
  padding:10px 16px; border-top:1px solid var(--ring);
  display:flex; justify-content:flex-end; gap:8px; align-items:center;
  color:var(--muted); font:700 12px/1 Inter;
}
/* ===== PLAYLIST (oynatma listesi) PANELLERİ ===== */
.pl-backdrop,.plc-backdrop{
  position:fixed; inset:0; z-index:960;
  background:rgba(4,6,10,.75); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.pl-modal,.plc-modal{
  position:fixed; z-index:965; left:50%; top:50%;
  width:min(900px,96vw); max-height:min(86vh,1000px);
  background:linear-gradient(180deg, rgba(7, 10, 16, 1), rgba(6,9,14,.98));
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:18px; box-shadow:0 60px 180px rgba(0,0,0,.65);
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  display:grid; grid-template-rows:auto auto 1fr auto; overflow:hidden;
  transition:.18s ease;
}
.pl-open .pl-backdrop{opacity:1; pointer-events:auto;}
.pl-open .pl-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}
.plc-open .plc-backdrop{opacity:1; pointer-events:auto;}
.plc-open .plc-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}

.pl-header,.plc-header{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:12px 16px; border-bottom:1px solid var(--ring);
  background:radial-gradient(900px 320px at 8% -10%, rgba(74,168,255,.12), transparent 65%);
}
.pl-title,.plc-title{margin:0; font:800 18px/1 Urbanist}
.pl-sub{margin:2px 0 0 0; color:var(--muted); font:700 12px/1.2 Inter}
.pl-x{color:white; display:grid; place-items:center; width:34px; height:34px; border-radius:12px; border:1px solid var(--ring); background:rgba(19,23,31,.75); cursor:pointer}

.pl-toolbar{
  display:grid; grid-template-columns:1fr auto; align-items:center; gap:10px;
  padding:10px 16px; border-bottom:1px solid var(--ring); background:rgba(255,255,255,.02);
}
.pl-results{overflow:auto; padding:12px}
.pl-item{
  display:grid; grid-template-columns:56px 1fr auto; gap:12px;
  padding:10px; border:1px solid var(--ring); border-radius:14px; background:rgba(8,10,14,.92); margin:8px 4px;
}
.pl-cover{width:56px; height:56px; border-radius:12px; overflow:hidden; background:#0f141f; border:1px solid var(--ring)}
.pl-cover img{width:100%; height:100%; object-fit:cover; display:block}
.pl-main{display:grid; gap:6px; align-content:start}
.pl-name{font:800 14px/1.1 Inter}
.pl-meta{display:flex; gap:8px; flex-wrap:wrap; color:var(--muted); font:700 12px/1 Inter}
.badge{font:700 11px/1 Inter; padding:.35rem .55rem; border-radius:999px; border:1px solid var(--ring); background:rgba(34,39,54,.6); color:#e8f0ff}
.badge.pub{background:rgba(1,210,119,.16); border-color:rgba(1,210,119,.45); color:#c8ffe7}
.badge.prv{background:rgba(255,206,80,.14); border-color:rgba(255,206,80,.45); color:#ffd27a}
.badge.unl{background:rgba(82,129,255,.14); border-color:rgba(82,129,255,.45); color:#a6c0ff}

.pl-actions{display:flex; align-items:center; gap:8px}
.pl-toggle{
  border:1px solid var(--ring); background:rgba(21,25,35,.65);
  padding:.45rem .6rem; border-radius:999px; cursor:pointer; font:800 12px/1 Inter; color:#e8f0ff;
  display:inline-flex; align-items:center; gap:6px;
}
.pl-toggle.on{ background:color-mix(in oklab,var(--accent),#000 82%); border-color:var(--ring-2) }

.pl-footer{padding:10px 16px; border-top:1px solid var(--ring); display:flex; justify-content:space-between; align-items:center; color:var(--muted); font:700 12px/1 Inter}

/* Oluşturma formu */
.plc-body{display:grid; gap:12px; padding:12px 16px 14px}
.plc-form{display:grid; gap:10px}
.plc-row{display:grid; gap:8px}
.plc-label{font:700 12px/1 Inter; color:var(--muted)}
.plc-input,.plc-textarea,.plc-select{
  height:42px; padding:0 12px; border-radius:12px; background:rgba(255,255,255,.04);
  border:1px solid var(--ring); color:var(--text); font:600 14px/1 Inter; outline:none;
}
.plc-textarea{min-height:90px; padding:.7rem .8rem; resize:vertical}
.plc-select{height:auto; padding:.5rem .6rem}
.plc-privacy{display:flex; gap:8px; flex-wrap:wrap}
.plc-chip{border:1px solid var(--ring); background:rgba(21,25,35,.65); padding:.5rem .7rem; border-radius:999px; cursor:pointer; font:800 12px/1 Inter; color:#e8f0ff}
.plc-chip.active{background:color-mix(in oklab,var(--accent),#000 82%); border-color:var(--ring-2)}
.plc-footer{padding:10px 16px; border-top:1px solid var(--ring); display:flex; justify-content:flex-end; gap:8px}

.eps-season-group{
  /* #epsGrid genelde 3 kolon grid; bu blok tüm satırı kaplasın */
  grid-column: 1 / -1;
  display: block;
margin:8px 0 16px;
}

.eps-season{ margin:6px 4px 10px; font:800 14px/1 Urbanist; color:#dfe7ff; opacity:.9; }
.eps-season-grid{
  grid-template-columns: repeat(
    auto-fit,
    minmax(clamp(300px, 48vw, 520px), 1fr)
  );
  gap: 12px;
}

@media (max-width: 900px){
  .eps-season-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .eps-season-grid .card{ grid-template-columns: 132px 1fr auto; }
}
@media (max-width: 640px){
  .eps-season-grid{
    grid-template-columns: 1fr;
  }
  .eps-season-grid .card{ grid-template-columns: 128px 1fr auto; }
}
/* küçük: Sezon etiketi tonu */
.pill.s{ background:#1a2a46; border:1px solid #2c3e68; }

.eps-season-grid .card{
  display:grid;
  grid-template-columns: 140px 1fr auto; /* 128 -> 140; metne biraz nefes */
  align-items:center;
  gap:14px;
  padding:10px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:14px;
  background:rgba(12,16,24,.55);
}
.rec-btn { color:#fff; }
.eps-season-grid .card .thumb{
  width:128px; height:auto;
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:10px;
  display:block;
}
.pl-backdrop, .plc-backdrop{
  position:fixed; inset:0; z-index:960;
  background:rgba(4,6,10,.75); backdrop-filter:blur(8px);
  opacity:0; pointer-events:none; transition:opacity .18s ease;
}
.pl-modal, .plc-modal{
  position:fixed; z-index:965; left:50%; top:50%;
  width:min(900px,96vw); max-height:min(86vh,1000px);
  background:linear-gradient(180deg, rgba(7,10,16,1), rgba(6,9,14,.98));
  border:1px solid color-mix(in oklab,var(--ring),#000 20%);
  border-radius:18px; box-shadow:0 60px 180px rgba(0,0,0,.65);
  transform:translate(-50%,-46%) scale(.98); opacity:0; pointer-events:none;
  display:grid; grid-template-rows:auto auto 1fr auto; overflow:hidden;
  transition:.18s ease;
}
.pl-open .pl-backdrop{opacity:1; pointer-events:auto;}
.pl-open .pl-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}
.plc-open .plc-backdrop{opacity:1; pointer-events:auto;}
.plc-open .plc-modal{opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto;}

/* 3) Öneri kartı butonu (rec-btn) yazısı beyaz */
.rec-btn{ color:#fff; }
.rec-btn .i, .rec-btn svg{ fill:currentColor; }
/* Firefox */
#epsModal .eps-results{
  overflow: auto;
  scrollbar-gutter: stable both-edges; /* görsel sıçrama olmasın */
  scrollbar-width: thin;
  scrollbar-color: #141414 #0f0f0f; /* kendi renklerinle değiştir */
}

/* WebKit */
#epsModal .eps-results::-webkit-scrollbar{ width: 10px; }
#epsModal .eps-results::-webkit-scrollbar-track{ background:#0e1624; }
#epsModal .eps-results::-webkit-scrollbar-thumb{
  background:#111111; border-radius:8px; border:2px solid #0e1624;
}

.visit-link {
  font: 600 13px/1.2 Inter, sans-serif;
  text-decoration: underline;
  opacity: .9;
  color: rgb(255, 255, 255);
}
.visit-link:hover { opacity: 1; }

/* ====== YORUM LİSTESİ — hizalama/boşluk/tema uyumu ====== */
.cmt-list { display:grid; gap:12px; }
.cmt-item {
  display:grid; grid-template-columns: 40px 1fr; gap:10px;
  background:#1616162c; border:1px solid #141414; border-radius:14px; padding:12px;
}
.cmt-avatar-wrap { grid-row: 1 / span 2; align-self:start; position:relative; }
.cmt-avatar img { width:40px; height:40px; border-radius:50%; display:block; }

.cmt-main { min-width:0; }
.cmt-userline { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cmt-name { color:#e8f0ff; font:700 13px/1.1 Inter; }
.cmt-stars .star { width:16px; height:16px; fill:#ffd166; }
.cmt-time { color:#ffffff; font:600 11px/1.2 Inter; opacity:.85; }

.cmt-body { color:#dfe7ff; font:500 13px/1.55 Inter; margin-top:6px; }

/* Aksiyonlar */
.cmt-actions { display:flex; gap:8px; align-items:center; margin-top:10px; }
.cmt-actions .cmt-like,
.cmt-actions .cmt-dislike,
.cmt-actions .cmt-reply-btn{
  border:0; background:#0d0d0e; color:#ffffff;
  font:600 12px/1 Inter; padding:7px 10px; border-radius:10px; cursor:pointer;
  transition: background .2s ease, transform .08s ease;
}
.cmt-actions .cmt-like.on,
.cmt-actions .cmt-dislike.on{ background:#161616; }
.cmt-actions button:hover{ transform: translateY(-1px); }
.cmt-actions .tag{
  background:#0f1730; color:#9db8ff; padding:6px 8px; border-radius:8px; font:700 11px/1 Inter;
}

/* Tek yanıt */
.cmt-reply{
  display:grid;
  grid-template-columns:28px 1fr; /* avatar | içerik */
  column-gap:10px;
}

/* Avatar alanı */
.cmt-reply-ava{
  width:28px; height:28px;
  border-radius:50%;
  overflow:hidden;              /* köşeleri düzgün kes */
  background:#0f1730;           /* boş/placeholder zemin */
  display:block;
  margin:0;                     /* figure default margin'larını sıfırla */
}
.cmt-reply-ava img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}

/* İçerik */
.cmt-reply-main{
  border:1px solid #141414;
  border-radius:12px;
  padding:10px 12px;
}
.cmt-reply-head{ color:#fff; font:600 12px/1.3 Inter; margin-bottom:6px; }
.cmt-reply-body{ color:#e8f0ff; font:500 13px/1.5 Inter; }
.cmt-reply-actions{ display:flex; gap:8px; margin-top:8px; }
.cmt-reply-actions .cmt-like,
.cmt-reply-actions .cmt-dislike{
  border:0; background:#0e0e0e1f; color:#fff;
  padding:6px 8px; border-radius:8px; font:600 11px/1 Inter; cursor:pointer;
}
.cmt-reply-actions .on{ background:#161616; }
/* Açık/kapalı durumları */
.cmt-modal.is-open{ opacity:1; pointer-events:auto; transform:translateY(0); }
.cmt-backdrop.is-open{ opacity:1; pointer-events:auto; }

/* Küçük ekran (mobil): tam ekran modal */
@media (max-width: 640px){
  .cmt-modal{
    inset:0; margin:0; width:100vw; height:100vh;
    border-radius:0; padding:12px;
    grid-template-rows:auto auto auto 1fr auto;
  }
}

/* (İsteğe bağlı) ince scroll bar */
.cmt-list::-webkit-scrollbar,
.cmt-reply-list::-webkit-scrollbar{ width:8px; }
.cmt-list::-webkit-scrollbar-thumb,
.cmt-reply-list::-webkit-scrollbar-thumb{
  background:#1e2a3e; border-radius:8px;
}

/* Spoiler */
.spoiler-btn{
  border:0; background:#1b2a57; color:#cfe1ff; padding:4px 8px; border-radius:8px;
  font:700 11px/1 Inter; cursor:pointer; margin-right:6px;
}
.spoiler{ display:none; background:#0b132a; color:#e4ecff; padding:4px 6px; border-radius:6px; }
.spoiler.revealed{ display:inline; }

/* 10-yıldız (editör) */
.rate-stars .star{ width:20px; height:20px; margin-right:4px; fill:#24325d; cursor:pointer; transition:transform .08s; }
.rate-stars .star.active{ fill:#ffd166; }
.rate-stars .star:hover{ transform:scale(1.05); }

/* Avatar hover mini kart */
.user-card{
  position:absolute; left:46px; top:-2px; z-index:10; width:240px;
  background:#0f1730; border:1px solid #1a2548; border-radius:12px; padding:10px;
  box-shadow:0 10px 30px rgba(0,0,0,.35); display:none;
}
.cmt-avatar-wrap:hover .user-card{ display:block; }

/* Playlist küçük kartları */
.pl-item{
  display:flex; justify-content:space-between; align-items:center;
  background:#1616163b; border:1px solid #0c0c0c; border-radius:12px; padding:10px 12px; margin-bottom:8px;
}
.pl-it-top{ display:flex; align-items:center; gap:8px; }
.pl-it-sub{ color:#9db8ff; font:500 12px/1.35 Inter; margin-top:4px; opacity:.9; }

.cmt-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cmt-actions .sp { flex:1 1 auto; }

.cmt-toggle-replies{
  border:0; background:transparent; color:#cfe1ff;
  font:600 12px/1 Inter; cursor:pointer; padding:4px 8px; border-radius:8px;
}
.cmt-toggle-replies:hover{ text-decoration:underline; }
.cmt-replies-list.hidden, .cmt-edit-editor.hidden, .cmt-reply-editor.hidden { display:none; }

.icon-btn.small .i{ width:18px; height:18px; }
.cmt-edit-editor .cmt-edit-text{ width:100%; resize:vertical; }
.eps-open #epsModal .eps-season-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); /* küçüldü */
  gap:10px;
}

.eps-open #epsModal .eps-results{ overflow:auto; scrollbar-gutter:stable both-edges; }

.eps-open #epsModal .eps-season-grid .card{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px;
}

.eps-open #epsModal .eps-season-grid .card .thumb{
  flex:0 0 120px;
  width:120px;
  height:68px;             /* 120 × 68 ≈ 16:9 */
  aspect-ratio:16/9;
  object-fit:cover;
  border-radius:8px;
}

/* 4) Metin alanı daralsın; uzunluk kessin */
.eps-open #epsModal .eps-season-grid .card .epi-title{
  font-size:13px;
  line-height:1.3;
  max-height:2.6em;        /* ~2 satır */
  overflow:hidden;
}
.eps-open #epsModal .eps-season-grid .card .epi-desc{
  display:none;            /* kartı küçültmek için açıklamayı gizle */
}
.eps-open #epsModal .eps-season-grid .card .epi-meta{
  font-size:12px;
  opacity:.8;
}

/* 5) Küçük rozetler/ikonlar */
.eps-open #epsModal .eps-season-grid .pill{ transform:scale(.9); transform-origin:left center; }
.eps-open #epsModal .eps-season-grid .icon-btn{ padding:6px; }

/* 6) Çok dar ekranlar: 1 sütun */
@media (max-width:640px){
  .eps-open #epsModal .eps-season-grid{
    grid-template-columns:1fr;
  }
}

#epsModal .eps-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
}

/* Sezon başlığı satırı: tüm sütunları kaplasın */
#epsModal .eps-season-head{
  grid-column: 1 / -1;
  font: 700 14px/1.4 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #cfe1ff;
  opacity: .9;
  margin: 6px 0 2px;
  padding: 4px 2px;
  border-bottom: 1px solid rgba(207,225,255,.15);
}

/* Kartı yatay ve kompakt yap */
#epsModal .eps-card{
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  background: var(--card-bg, #080808);
}
:root{
  --radius: 16px;
  --panel: #0e141b;
  --ring:  #1f2a37;
  --brand: #3aa7ff;
  --glow:  rgba(58,167,255,0.35);
}

.eps-card{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)) , var(--panel);
  box-shadow: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px rgba(0,0,0,0.25);
  transition: transform 200ms ease, box-shadow 200ms ease;
  will-change: transform;
  cursor: pointer;
  border: 1px solid var(--ring);
}

/* dış çerçeveye ışıklı kenar: only on hover/focus */
.eps-card::before{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: conic-gradient(from 180deg at 50% 50%,
    transparent 0turn,
    var(--glow) .25turn,
    transparent .5turn,
    var(--glow) .75turn,
    transparent 1turn);
  filter: blur(14px);
  opacity: 0;
  transition: opacity 220ms ease;
}

/* iç vignette (kenarlardan hafif karartma) */
.eps-card::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(120% 100% at 50% 10%,
              rgba(255,255,255,0.06) 0%,
              rgba(0,0,0,0.0) 40%,
              rgba(0,0,0,0.25) 100%);
  opacity: .0;
  transition: opacity 220ms ease;
}

/* hover/focus durumları */
.eps-card:hover,
.eps-card:focus-visible{
  transform: translateY(-2px);
  box-shadow: 0 2px 0 rgba(255,255,255,0.05) inset, 0 16px 40px rgba(0,0,0,0.35);
}
.eps-card:hover::before,
.eps-card:focus-visible::before{ opacity: 1; }
.eps-card:hover::after,
.eps-card:focus-visible::after{ opacity: .6; }

/* görsel zoom */
.eps-card .thumb{
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);              /* base */
  transform-origin: center center;
  transition: transform 280ms ease;
  will-change: transform;
}
.eps-card:hover .thumb,
.eps-card:focus-visible .thumb{
  transform: scale(1.06);
}
:root{
  --radius: 16px;
  --panel: #0e141b;
  --ring:  #1f2a37;
  --brand: #3aa7ff;
  --glow:  rgba(58,167,255,0.35);
  --fg:    #e6eef6;
  --muted: #9fb2c3;
}

/* ===== Grid yerleşimi ===== */
#episodesPanel.grid{
  display: grid;
  gap: 14px;
}
#episodesPanel.grid.cols-3{
  grid-template-columns: repeat(2, minmax(0,1fr));
}
@media (min-width: 680px){
  #episodesPanel.grid.cols-3{
    grid-template-columns: repeat(3, minmax(0,1fr));
  }
}

/* ===== Kart ===== */
.epi-card.banner{
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--ring);
  background: var(--panel);
  color: var(--fg);
  cursor: pointer;
  isolation: isolate;
  /* 16:9 oran – istersen 3/4 yap: aspect-ratio: 3 / 4; */
  aspect-ratio: 16 / 9;
  /* hafif yüzer efekt */
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 10px 30px rgba(0,0,0,0.25);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.epi-card.banner:hover{
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--brand) 25%, var(--ring));
  box-shadow: 0 2px 0 rgba(255,255,255,.05) inset, 0 16px 40px rgba(0,0,0,.35);
}

/* Arkaplan görselini pseudo ile çiz (zoom için) */
.epi-card.banner::before{
  content: "";
  position: absolute; inset: 0;
  z-index: -2;
  background-image: var(--bg);         /* style="--bg:url('...')" geliyor */
  background-size: cover;
  background-position: center;
  transform: scale(1);
  transition: transform .28s ease;
  will-change: transform;
}
.epi-card.banner:hover::before{
  transform: scale(1.06);
}

/* Kenar glow (yumuşak) */
.epi-card.banner::after{
  content: "";
  position: absolute; inset: 0;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background:
    radial-gradient(120% 100% at 50% 10%, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.3) 100%),
    conic-gradient(from 180deg at 50% 50%,
      transparent 0turn, var(--glow) .25turn,
      transparent .5turn, var(--glow) .75turn, transparent 1turn);
  filter: blur(14px);
  opacity: 0;
  transition: opacity .22s ease;
}
.epi-card.banner:hover::after{ opacity: 1; }

/* Karanlık overlay (metin okunurluğu) */
.epi-card .overlay{
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.45) 100%);
  z-index: 1;
}

/* İç yerleşim */
.epi-card .inner{
  position: absolute;
  inset: auto 12px 12px 12px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* “Bölüm N” etiketi */
.pill{
  display: inline-block;
  padding: .25rem .55rem;
  border: 1px solid color-mix(in srgb, var(--ring) 70%, white 0%);
  border-radius: 999px;
  font-size: .85rem;
  color: var(--fg);
  background: rgba(0,0,0,.28);
  backdrop-filter: blur(4px);
}

/* Tüm kartı tıklanabilir yapan hayalet buton */
.watch-ghost{
  position: absolute; inset: 0;
  z-index: 3;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* Erişilebilir odak */
.epi-card[role="button"]:focus-visible,
.watch-ghost:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .epi-card.banner,
  .epi-card.banner::before,
  .epi-card.banner::after,
  .more-btn{
    transition: none !important;
  }
}
/* içerik bloklarının daha “yüzer” görünmesi için hafif translate */
.eps-card .info{
  position: relative;
  z-index: 1;
  transition: transform 220ms ease, opacity 220ms ease;
}
.eps-card:hover .info,
.eps-card:focus-visible .info{
  transform: translateY(-1px);
}

/* erişilebilir odak halkası */
.eps-card[tabindex="0"]:focus-visible{
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* motion sensitive kullanıcılar için animasyon azalt */
@media (prefers-reduced-motion: reduce){
  .eps-card, .eps-card .thumb, .eps-card::before, .eps-card::after, .eps-card .info{
    transition: none !important;
  }
}
/* Küçük kapak – 16:9, taşma yok (önceki büyük kuralı geçersiz kıl) */
#epsModal .eps-card .thumb{
  flex: 0 0 150px;
  width: 150px !important;
  height: 84px !important;      /* ≈ 16:9 */
  aspect-ratio: 16/9;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}

/* Metin boyutları ve yoğunluk */
#epsModal .eps-card .epi-top{ display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: baseline; }
#epsModal .eps-card .pill{ background: #1a2740; color: #cfe1ff; border-radius: 999px; padding: 2px 8px; font: 700 11px/1 Inter; }
#epsModal .eps-card .pill.s{ opacity: .8; }
#epsModal .eps-card .epi-title{ font: 600 13px/1.3 Inter; max-height: 2.6em; overflow: hidden; }
#epsModal .eps-card .epi-desc{ font: 500 12px/1.45 Inter; color: #d2dcff; opacity: .9; margin-top: 4px; display: none; } /* istersen göster */
#epsModal .eps-card .epi-meta{ font: 600 11.5px/1.3 Inter; color: #a9c2ff; margin-top: 6px; opacity: .85; }

/* Küçük ekranlarda tek sütun */
@media (max-width: 640px){
  #epsModal .eps-grid{ grid-template-columns: 1fr; }
  #epsModal .eps-card .thumb{
    flex-basis: 130px;
    width: 130px !important;
    height: 73px !important;
  }
}


.empty-embed{
  display:grid; place-items:center;
  min-height:60vh; padding:24px;
}
.ee-card{
  width:min(720px, 92vw);
  background:#0b0e12;
  border:1px solid #1a2431;
  border-radius:16px;
  padding:20px;
  text-align:center;
  box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.ee-icon{
  width:64px; height:64px; margin:4px auto 10px;
  display:grid; place-items:center;
  border-radius:20px;
  background:radial-gradient(180px 90px at 30% -10%, rgba(74,168,255,.15), rgba(0,0,0,0) 60%), #0e1522;
  border:1px solid #1f2a3a;
}
.ee-card .i{ width:22px; height:22px; fill:none; stroke:#9fb3c8; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.ee-title{ color:#e8f1fb; font:700 18px/1.2 Inter,system-ui; margin:8px 0 6px; }
.ee-desc{ color:#b9c7da; font:500 14px/1.6 Inter,system-ui; margin:0 0 14px; }

.ee-actions{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-bottom:10px;
}
.btn{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 14px; border-radius:10px; font:600 13px/1 Inter,system-ui; border:1px solid transparent;
}
.btn .i{ width:18px; height:18px; }
.btn.primary:hover{ filter:brightness(1.05); }
.btn.ghost{ background:#0f1730; color:#dfe7ff; border-color:#20305e; }
.btn.ghost:hover{ background:#122038; }

.ee-extras{
  display:grid; gap:8px; justify-items:center; margin-top:6px;
}
.link-like{
  background:none; border:0; color:#9fb3c8; font:600 13px/1 Inter; cursor:pointer; display:inline-flex; align-items:center; gap:8px;
}
.link-like:hover{ color:#c7d6ea; }
.link-like .i{ width:16px; height:16px; }
.link-like.admin{ color:#ffca7a; }
.link-like.admin:hover{ color:#ffdba6; }

.ee-tip{
  color:#a7b6cc; font:500 13px/1.4 Inter; display:flex; align-items:center; gap:8px;
}
.ee-tip .i{ width:16px; height:16px; }

@media (max-width:480px){
  .ee-title{ font-size:16px; }
  .ee-desc{ font-size:13px; }
  .btn{ padding:9px 12px; font-size:12.5px; }
}
.cmt-reply-editor textarea.cmt-reply-text{
  width:100%;
  min-height:92px;
  max-height:45vh;
  resize:vertical;

  background:#0f1730;
  color:#dfe7ff;
  border:1px solid #20305e;
  border-radius:10px;

  padding:10px 12px;
  font:500 13px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}

/* Placeholder */
.cmt-reply-editor textarea.cmt-reply-text::placeholder{
  color:#a9b6d1;
  opacity:.9;
}

/* Focus hali (ince mavi halka) */
.cmt-reply-editor textarea.cmt-reply-text:focus,
.cmt-reply-editor textarea.cmt-reply-text:focus-visible{
  border-color:#2c5fb1;
  box-shadow:0 0 0 3px rgba(44,95,177,.18);
}

/* Geçersiz / hata hali — istersen class ekleyerek kullan */
.cmt-reply-editor textarea.cmt-reply-text.is-error{
  border-color:#c64b4b;
  box-shadow:0 0 0 3px rgba(198,75,75,.18);
}

/* Devre dışı */
.cmt-reply-editor textarea.cmt-reply-text:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* Seçim rengi */
.cmt-reply-editor textarea.cmt-reply-text::selection{
  background:#244a87;
  color:#fff;
}

/* Scrollbar (webkit) */
.cmt-reply-editor textarea.cmt-reply-text::-webkit-scrollbar{
  width:10px;
}
.cmt-reply-editor textarea.cmt-reply-text::-webkit-scrollbar-track{
  background:#0e1527;
  border-radius:10px;
}
.cmt-reply-editor textarea.cmt-reply-text::-webkit-scrollbar-thumb{
  background:#243a67;
  border-radius:10px;
  border:2px solid #0e1527;
}
.cmt-reply-editor textarea.cmt-reply-text::-webkit-scrollbar-thumb:hover{
  background:#2f4b87;
}

/* Küçük ekran iyileştirme */
@media (max-width: 480px){
  .cmt-reply-editor textarea.cmt-reply-text{
    min-height:80px;
    padding:9px 10px;
    font-size:13px;
  }
}
/* Yorum düzenleme textarea */
.cmt-edit-editor .cmt-edit-text{
  width:100%;
  min-height:120px;          /* edit için biraz daha yüksek */
  max-height:55vh;
  resize:vertical;

  background:#0f1730;
  color:#dfe7ff;
  border:1px solid #20305e;
  border-radius:10px;

  padding:12px 14px;
  font:500 13.5px/1.5 Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;

  outline:none;
  transition:border-color .15s ease, box-shadow .15s ease, background-color .2s ease;
}

/* Placeholder */
.cmt-edit-editor .cmt-edit-text::placeholder{
  color:#a9b6d1;
  opacity:.9;
}

/* Focus */
.cmt-edit-editor .cmt-edit-text:focus,
.cmt-edit-editor .cmt-edit-text:focus-visible{
  border-color:#2c5fb1;
  box-shadow:0 0 0 3px rgba(44,95,177,.18);
}

/* Hata hali */
.cmt-edit-editor .cmt-edit-text.is-error{
  border-color:#c64b4b;
  box-shadow:0 0 0 3px rgba(198,75,75,.18);
}

/* Devre dışı */
.cmt-edit-editor .cmt-edit-text:disabled{
  opacity:.7;
  cursor:not-allowed;
}

/* Seçim rengi */
.cmt-edit-editor .cmt-edit-text::selection{
  background:#244a87;
  color:#fff;
}

/* Scrollbar (WebKit) */
.cmt-edit-editor .cmt-edit-text::-webkit-scrollbar{
  width:10px;
}
.cmt-edit-editor .cmt-edit-text::-webkit-scrollbar-track{
  background:#0e1527;
  border-radius:10px;
}
.cmt-edit-editor .cmt-edit-text::-webkit-scrollbar-thumb{
  background:#243a67;
  border-radius:10px;
  border:2px solid #0e1527;
}
.cmt-edit-editor .cmt-edit-text::-webkit-scrollbar-thumb:hover{
  background:#2f4b87;
}

/* Küçük ekran */
@media (max-width:480px){
  .cmt-edit-editor .cmt-edit-text{
    min-height:100px;
    padding:10px 12px;
    font-size:13px;
  }
}

:root{     --az-surface: rgba(15,23,42,.72);         /* #0f172a cam zemin */
  --az-surface-hover: rgba(15,23,42,.86);
  --az-border:  rgba(255,255,255,.10);
  --az-ring:    rgba(31,111,235,.18);       /* #1f6feb */
  --az-ring-strong: rgba(31,111,235,.28);
  --az-text:    #e5e7eb;
  --az-shadow:  0 12px 28px rgba(2,6,23,.45);
  --avatar-size: 48px;      /* 44–56px arası deneyebilirsin */
  --pm-minw: 240px;         /* menü genişliği */
  --pm-font: 14.5px;        /* menü yazı boyutu */ --bg:#0d0d0d; --card:#00000013; --text:#fff; --ring:rgba(255,255,255,.14); --ring2:rgba(255,255,255,.22); --shadow:0 30px 60px -20px rgba(0,0,0,.6); --sidebar-w:88px; --gutter:24px;--rail-align-fix: 4px; --poster-w:240px; --hero-gap:24px; --hero-pos:35% 40%; }
*{box-sizing:border-box} html,body{height:100%} html,body{overflow-x:hidden}
body{margin:0;background:var(--bg);color:var(--text);font:14.5px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Inter,Ubuntu,Arial}
.trailer-embed{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
  opacity:0; transform:scale(1.02);
  transition:opacity .25s ease, transform .35s ease;
  pointer-events:none; /* kart tıklanabilir kalsın */
}
.card:hover .trailer-embed,
.card:focus-within .trailer-embed{ opacity:1; transform:scale(1) }
/* Scrollbar */
::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-track {
  background: transparent;
  border: none;
  margin: 0;
  box-shadow: none;
}

* {
  box-sizing: border-box;
}

/* Scroll barın kendisi */
::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 10px;
  border: 2px solid transparent;
  background-clip: content-box;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
/* --- Sidebar --- */
.sidebar{position:fixed;top:0;bottom:0;left:0;width:var(--sidebar-w);display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;z-index:999;background:rgba(12,14,20,.16);backdrop-filter:blur(8px);border-right:1px solid rgba(255,255,255,.08)}
.logo{display:grid;place-items:center;width:56px;height:56px;border-radius:16px;background:transparent;border:0}
.logo .logo-img{width:38px;height:38px;display:block;object-fit:contain}
.navbtn{width:48px;height:48px;display:grid;place-items:center;border-radius:12px;border:1px solid transparent;color:#fff;background:transparent;position:relative;transition:transform .16s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease}
.navbtn:hover{background:rgba(255,255,255,.06);border-color:var(--ring);transform:scale(1.08);box-shadow:0 8px 18px rgba(0,0,0,.25)}
.navbtn.active{background:rgba(255,255,255,.12);border-color:var(--ring2)}
.ico{width:18px;height:18px}
.navbtn .tip{font-family:'Urbanist','Inter',sans-serif;position:absolute;left:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(-6px);opacity:0;pointer-events:none;white-space:nowrap;padding:6px 10px;border-radius:10px;font-size:12px;font-weight:800;color:#fff;background:rgba(16,18,24,.72);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(8px);box-shadow:0 10px 24px rgba(0,0,0,.35);transition:opacity .18s ease, transform .18s ease}
.navbtn:hover .tip,.navbtn:focus-visible .tip{opacity:1;transform:translateY(-50%) translateX(0)}
@media (max-width:992px){ .navbtn .tip{display:none} }

/* --- App & Topbar --- */
.app{padding-left:16px}
@media(min-width:992px){ .app{padding-left:calc(var(--sidebar-w) + 16px)} }
.topbar{position:sticky;top:0;z-index:50;background:linear-gradient(#0b0c12f0,#0b0c1200);backdrop-filter:blur(4px)}
.topbar-inner{position:relative;width:100%;padding:12px var(--gutter);padding-right:100px}
.searchbox{width:min(64vw,920px);margin:0 auto;display:flex;align-items:center;gap:8px;border:1px solid var(--ring);background:rgba(255,255,255,.06);padding:0 12px;border-radius:999px}
.searchbox input{flex:1;background:transparent;border:0;outline:0;color:#fff;padding:10px 2px}
.actionss{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);display:flex;gap:12px;align-items:center}
.pill{border:1px solid var(--ring);background:rgba(255,255,255,.06);padding:8px 10px;border-radius:999px;color:#fff}
.prof{display:flex;align-items:center;gap:8px}
.avatar{display:grid;place-items:center;width:32px;height:32px;border-radius:999px;background:linear-gradient(135deg,#6366f1,#a855f7);font-weight:800}
@media(max-width:900px){ .topbar-inner{padding-right:160px} .searchbox{width:min(72vw,720px)} }
/* ==== FULLSCREEN SEARCH OVERLAY ==== */
body.noscroll{ overflow:hidden }
.sovl{
  position:fixed; inset:0; z-index:120;
  opacity:0; pointer-events:none;
  transition:opacity .24s ease;
}
.sovl.is-open{ opacity:1; pointer-events:auto }

.sovl__backdrop{
  position:absolute; inset:0;
  background:radial-gradient(1200px 600px at 50% 30%, rgba(0,0,0,.55), rgba(0,0,0,.78)) , rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  animation:sovlFade .24s ease both;
}
@keyframes sovlFade{ from{opacity:0} to{opacity:1} }

.sovl__card{
  position:absolute; left:50%; top:18%;
  transform:translate(-50%,-10px) scale(.98);
  width:min(900px,92vw);
  border-radius:18px;
  background:rgba(16,18,24,.86);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 40px 90px rgba(0,0,0,.55);
  overflow:visible;
  opacity:0;
  transition:transform .24s cubic-bezier(.2,.8,.2,1), opacity .24s ease;
}
.sovl.is-open .sovl__card{ transform:translate(-50%,0) scale(1); opacity:1 }

.sovl__top{
  display:flex; align-items:center; justify-content:flex-end; gap:8px;
  padding:10px 12px;
  background:linear-gradient(180deg, rgba(14,16,22,.75), rgba(14,16,22,.55));
  border-bottom:1px solid rgba(255,255,255,.10);
}
.sovl__adv{ color:#a8b3c7; font:600 12.5px 'Inter'; text-decoration:none }
.sovl__adv:hover{ color:#fff }
.sovl__close{
  width:32px; height:32px; border-radius:10px; border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer;
}

.sovl__bar{
  display:flex; align-items:center; gap:10px;
  margin:14px; padding:10px 12px;
  border-radius:14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.14);
}
.sovl__input{
  flex:1; background:transparent; border:0; outline:0; color:#fff; font:500 15px/1.4 'Inter';
}
.sovl__type{ position:relative }
.sovl__typebtn{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border-radius:999px; border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06); color:#fff; cursor:pointer; font-weight:800; ;
}
.sovl__menu{
  position:absolute; right:0; top:42px; min-width:160px;
  background:rgba(16,18,24,.94); border:1px solid rgba(255,255,255,.14);
  border-radius:12px; padding:6px; list-style:none; margin:0; box-shadow:0 16px 40px rgba(0,0,0,.45);z-index: 999;
}
.sovl__menu li{
  padding:8px 10px; border-radius:8px; cursor:pointer; color:#dfe3ee;
}
.sovl__menu li[aria-selected="true"]{ background:rgba(255,255,255,.08); color:#fff }
.sovl__menu li:hover{ background:rgba(255,255,255,.10) }

.sovl__results{ max-height:min(64vh,520px); overflow:auto; padding:10px 14px 16px }
.s-empty{ padding:26px; text-align:center; color:#aab0bd; font-size:14px }

.s-head{
  margin:10px 4px 8px; color:#96a0b3; font:600 12px 'Inter'; letter-spacing:.5px; text-transform:uppercase;
}
.s-item{
  display:flex; gap:10px; align-items:center; text-decoration:none; color:#fff;
  padding:8px 10px; border:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.03);
  border-radius:12px; transition:transform .12s ease, background .2s ease, border-color .2s ease;
}
.s-item + .s-item{ margin-top:8px }
.s-item:hover,.s-item.is-active{ background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.18); transform:translateY(-1px) }

.s-th{ width:48px; height:64px; border-radius:8px; overflow:hidden; flex:0 0 auto; background:#0e1117; border:1px solid rgba(255,255,255,.08) }
.s-th img{ width:100%; height:100%; object-fit:cover }
.s-main{ min-width:0; display:flex; flex-direction:column; gap:2px }
.s-title{ font:800 14.5px/1.25 'Urbanist','Inter',sans-serif; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.s-sub{ font:500 12.5px/1.2 'Inter'; color:#b9bfcc; display:flex; gap:8px; align-items:center }
.s-badge{ border:1px solid rgba(255,255,255,.18); background:rgba(255,255,255,.10); border-radius:999px; padding:2px 8px; font:700 11px/1 'Inter' }

@media (max-width:720px){
  .sovl__card{ top:12%; width:calc(100vw - 20px) }
  .sovl__bar{ margin:12px }
}

@media (max-width:720px){
  .sovl__card{ top:12%; width:calc(100vw - 20px) }
  .sovl__bar{ margin:12px }
}
/* Dropdown */
.profile-dd{ position:relative; }
.profile-menu{
  position:absolute; right:0; top:calc(100% + 10px); z-index:120;
  min-width:200px; padding:8px; border-radius:14px;
  background:rgba(16,18,24,.92);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(8px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);

  /* açılış animasyonu */
  transform:translateY(-8px) scale(.98);
  opacity:0; pointer-events:none;
  transition:opacity .18s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.profile-menu.is-open{
  opacity:1; transform:translateY(0) scale(1); pointer-events:auto;
}

.pm-item{
  display:block; width:100%; text-align:left;
  padding:10px 12px; border-radius:10px;
  color:#e6e8ef; text-decoration:none; border:0; background:transparent;
  font:600 13.5px 'Inter', system-ui;
}
.pm-item:hover{ background:rgba(255,255,255,.08); color:#fff; }
.pm-item.danger{ color:#ff6b6b; }
.pm-item.danger:hover{ background:rgba(255,0,0,.10); color:#fff; }

.gbtn,
.rbtn{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;                                  /* içeriğin üstünde kalsın */
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: var(--az-text);                         /* svg currentColor alır */
  background: linear-gradient(180deg,
              rgba(255,255,255,.03),
              rgba(0,0,0,.12)) border-box,
              var(--az-surface);
  border: 1px solid var(--az-border);
  box-shadow: var(--az-shadow);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
  transition:
    transform .15s ease,
    background .2s ease,
    box-shadow .2s ease,
    border-color .2s ease;
}
.gbtn:hover,
.rbtn:hover{
  background: linear-gradient(180deg,
              rgba(255,255,255,.06),
              rgba(0,0,0,.10)) border-box,
              var(--az-surface-hover);
  transform: translateY(-50%) scale(1.06);
  border-color: rgba(255,255,255,.16);
}
.gbtn:active,
.rbtn:active{
  transform: translateY(-50%) scale(0.97);
}

/* Odak halkası (klavye için) */
.gbtn:focus-visible,
.rbtn:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 6px var(--az-ring),
    var(--az-shadow);
  border-color: rgba(255,255,255,.22);
}

/* Yön ve konumlar */
.gbtn.gprev, .rbtn.prev{ left: 10px; }
.gbtn.gnext, .rbtn.next{ right: 10px; }

/* İkon boyutu */
.gbtn svg, .rbtn svg{ width: 18px; height: 18px; pointer-events: none; }

/* Kullanılamaz/gerek yoksa (JS opacity veya display none yapıyor) */
.gbtn[disabled], .rbtn[disabled]{ opacity: .35; cursor: default; }

/* Küçük ekranlarda biraz ufalt */
/* ===== MOBILE HOTFIX (<= 640px) ===== */
@media (max-width: 640px){
  /* Container kenar boşluklarını sabitle */
  .container{
    width: auto !important;
    margin-left: 14px !important;
    margin-right: 14px !important;
  }

  /* Hero yüksekliği ve karartma */
  .hero{ min-height: unset !important; }
  .hero::after{ background: linear-gradient(180deg, rgba(8,8,10,.60), rgba(8,8,10,.94) 55%, rgba(8,8,10,.97)) !important; }

  /* !!! Asıl sorun: flex -> grid */
  .hero-inner{
    display: grid !important;              /* flex yerine grid */
    grid-template-columns: 1fr !important; /* tek sütun */
    gap: 14px !important;
    padding: 16px 0 !important;
    transform: none !important;
  }

  /* Poster daha küçük ve ortalı */
  .poster{
    width: min(54vw, 200px) !important;
    margin: 0 auto !important;
    transform: none !important;            /* tilt vs. kapat */
  }

  /* Metin alanı genişlesin, uzun satırlar taşmasın */
  .meta{ max-width: none !important; }
  .title h1{
    font: 800 clamp(20px, 6.2vw, 28px)/1.15 Urbanist, Inter, sans-serif !important;
    word-break: break-word !important;
  }
  .row{ gap: 10px 12px !important; }
  .description{
    font-size: 13px !important;
    color: #e3e9ff !important;
    display: -webkit-box;
    -webkit-line-clamp: 6;                 /* metni kısalt */
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Butonlar daha kompakt */
  .actions .btn{
    padding: .7rem .85rem !important;
    border-radius: 12px !important;
  }

  /* Etiket/rozetler taşmasın */
  .chips{ gap: 6px !important; }
  .chip{ padding: .45rem .6rem !important; font-size: 12px !important; }

  /* Bölüm kartları tek sütun */
  .grid.cols-3{ grid-template-columns: 1fr !important; }
}
/* ====== ÖNERİ KARTLARI (recs) ====== */
.recs-grid{
  display:grid;
  grid-template-columns: repeat(auto-fill, minmax(128px,1fr));
  gap:12px;
}
@media (min-width:480px){
  .recs-grid{ grid-template-columns: repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
}
.rec-card{
  position:relative; border-radius:18px; overflow:hidden; background:#0f1217;
  box-shadow:0 6px 20px rgba(0,0,0,.28); isolation:isolate; transform:translateZ(0);
}
.rec-card .cover{
  width:100%; height:100%; aspect-ratio:2/3; object-fit:cover; display:block;
}
.rec-card::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,0) 58%, rgba(5,6,8,.78) 80%, rgba(5,6,8,.96) 100%);
  pointer-events:none;
}
.rec-title{
  position:absolute; left:10px; right:10px; bottom:10px;
  font:700 13.5px/1.2 Inter,system-ui; color:#ecf2ff;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  text-shadow:0 2px 10px rgba(0,0,0,.6);
}
.rec-badge{
  position:absolute; top:10px; left:10px;
  background:rgba(15,20,28,.7); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.08);
  color:#e9f2ff; font:600 11.5px/1 Inter,system-ui; padding:6px 8px; border-radius:12px;
}
.rec-card:active{ transform:scale(.985); }

/* Hareketi azalt isteyen kullanıcılar */
@media (prefers-reduced-motion: reduce){
  .gbtn, .rbtn{ transition: none; }
}

/* Okların altında kalan şeritler güvende */
.genres, .rail{ position: relative; overflow: hidden; }

/* “fade” kanatlarını kullanıyorsanız oklar üstte kalsın */
.gfade{ z-index: 40; }

/* FOOTER — Animezer temasıyla uyumlu */
.site-footer{
  margin-top: var(--gutter,24px);
  background: var(--card);
  border-top: 1px solid var(--ring);
  color: var(--text);
}

.site-footer .sf-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 40px var(--gutter,24px);
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 28px;
}

.sf-col{min-width:0}

.sf-brand{
  display:flex; align-items:center; gap:10px;
  font:800 18px/1 'Urbanist','Inter',system-ui;
  color: var(--text); text-decoration:none;
}
.sf-logo{width:36px; height:36px; object-fit:contain}

.sf-title{
  margin:0 0 10px;
  font:700 14px/1 'Urbanist','Inter',system-ui;
  color:#8fbaff;
}
.sf-text{margin:6px 0 0; color:rgba(255,255,255,.7)}

.sf-list{list-style:none; margin:0; padding:0}
.sf-list li + li{margin-top:6px}
.sf-list a{
  position: relative;
  display: inline-block;
  color: rgba(255,255,255,.85);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: .3px;
  padding: 2px 0;
  transition: color .25s ease;
}

.sf-list a::after{
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 100%; height: 2px;
  background: linear-gradient(90deg,#8fbaff,#4facfe);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .3s ease;
}

.sf-list a:hover{
  color: #fff;
}
.sf-list a:hover::after{
  transform: scaleX(1);
  transform-origin: left;
}

.sf-mail{display:inline-block; border-bottom:1px dashed var(--ring2)}

.sf-social{display:flex; gap:10px; align-items:center}
.sf-icon{
  width:38px; height:38px;
  display:grid; place-items:center;
  border-radius:12px;
  color:#fff; text-decoration:none;
  background:rgba(255,255,255,.05);
  border:1px solid var(--ring);
  transition:transform .12s ease, background .2s ease;
}
.sf-icon:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.12);
  border-color:var(--ring2);
}

.sf-bottom{
  display:flex; justify-content:space-between; align-items:center; gap:12px;
  padding:12px var(--gutter,24px) 20px;
  max-width:1200px; margin:0 auto;
  border-top:1px solid var(--ring);
  color:rgba(255,255,255,.6);
  font:500 12.5px 'Inter',system-ui;
}
.sf-bottom a{ color:#8fbaff; text-decoration:none }
.sf-bottom a:hover{ text-decoration:underline }

@media (max-width:900px){
  .site-footer .sf-inner{ grid-template-columns: 1fr 1fr; }
}
@media (max-width:580px){
  .site-footer .sf-inner{ grid-template-columns: 1fr; }
  .sf-bottom{ flex-direction:column; align-items:flex-start }
}

.hidden-mobile{display:none}
@media(min-width:769px){
.hidden-desktop{display:none!important}
.hidden-mobile{display:initial}
}


/* —— Mobil Bottom Bar (kaydırılabilir) —— */
.mobile-bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  background:
    linear-gradient(180deg, rgba(0,0,0,.0), rgba(0,0,0,.30) 8%),
    color-mix(in oklab, var(--card, #151923) 92%, #000 8%);
  backdrop-filter:saturate(1.2) blur(10px);
  border-top:1px solid var(--ring, #2a3349);
  padding: max(8px, env(safe-area-inset-bottom)) 10px max(8px, env(safe-area-inset-bottom));
}

/* Yatay kaydırılabilir satır */
.mobile-bottom-inner{
  display:flex;           /* grid yerine flex */
  flex-wrap:nowrap;       /* asla alta kaymasın */
  gap:8px;
  overflow-x:auto;        /* sığmazsa yana doğru kaydır */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.mobile-bottom-inner::-webkit-scrollbar{ display:none; } /* scrollbar gizle (mobil) */

/* Butonlar: kırılmadan yan yana + kaydırılabilir */
.mobile-tab{
  appearance:none; -webkit-tap-highlight-color:transparent; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:10px 10px; min-height:56px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--ring, #2a3349) 70%, #fff 0%);
  background: rgba(255,255,255,.04);
  color:#e7edf8;

  flex:0 0 auto;          /* sabitlenmesin; satır kayabilsin */
  min-width:92px;         /* her butonun taban genişliği */
  scroll-snap-align:start;
}
.mobile-tab svg{ width:22px; height:22px; }
.mobile-tab span{ font-size:11px; color:var(--muted, #b9c3d6); font-weight:600; }
.mobile-tab:is(:hover,:focus-visible){
  border-color:var(--ring, #2a3349);
  background:rgba(255,255,255,.06);
}
.mobile-bottom-inner::-webkit-scrollbar{ display:none; }
.mobile-tab.active{ outline:2px solid rgba(255,255,255,.15); }
.mobile-tab.active span{ color:#fff; }

/* Çok dar ekran ufaltma (opsiyonel) */
@media (max-width:390px){
  .mobile-tab{ padding:8px 8px; min-width:84px; }
  .mobile-tab svg{ width:18px; height:18px; }
  .mobile-tab span{ font-size:10px; }
}

/* Desktop’ta gizle */
@media (min-width:1024px){
  .hidden-desktop{ display:none !important; }
}



/* Bildirim rozeti */
.btn-notifs{position:relative}
.notif-badge{position:absolute;top:6px;right:22%;transform:translate(50%,-50%);
min-width:18px;height:18px;border-radius:9px;background:var(--danger);
color:#fff;font-size:11px;display:flex;align-items:center;justify-content:center;padding:0 5px;border:1px solid rgba(255,255,255,.7)}


/* -------------- SHEET (SLIDE-OVER) PANELLER -------------- */
.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.open{display:block}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .20s ease}
.sheet.open .sheet-backdrop{opacity:1}
.sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(92vw,560px);
background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.00)), var(--bg);
border-left:1px solid var(--ring);box-shadow: -20px 0 60px rgba(0,0,0,.35);
transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.9,.2,1)}
.sheet.open .sheet-panel{transform:translateX(0)}
.sheet-header{display:flex;align-items:center;gap:12px;padding:14px 14px;border-bottom:1px solid var(--ring)}
.sheet-title{font-weight:600}
.sheet-close{margin-left:auto;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;border:1px solid var(--ring2);background:transparent;color:#fff}
.sheet-close:is(:hover,:focus-visible){background:rgba(255,255,255,.06)}
.sheet-body{padding:14px;overflow:auto;height:calc(100% - 64px)}


/* -------------- ARAMA BARINI MOBİLDE GİZLE -------------- */
/* Mevcut .search-bar elementiniz varsa örnek: */
@media(max-width:768px){
.search-bar{display:none!important}
}

.mobile-search-btn{ display:none; }  /* mobil arama butonu default kapalı */
.mobile-bottom-bar{ display:none; }  /* alt bar default kapalı */

@media (max-width: 768px){

  /* Üst arama çubuğunu ve sol sidebar'ı gizle */
  .topbar .searchbox,
  .search-bar,
  .layout-sidebar, .sidebar{ display:none !important; }

  /* Mobil topbar — sticky, sade, tek satır */
  .topbar{
    position:sticky; top:0; z-index:60;
    padding-top: env(safe-area-inset-top);
    background: color-mix(in oklab, var(--card) 94%, #000 6%);
    backdrop-filter: blur(10px) saturate(1.1);
    border-bottom:1px solid var(--ring);
  }
  .topbar-inner{
    min-height:56px; padding:8px 10px;
  }

  /* Mobil arama butonu görünür */
  .mobile-search-btn{
    display:inline-flex; align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    border:1px solid var(--ring);
    background: rgba(255,255,255,.04);
    color:#fff;
  }
  .mobile-search-btn .ico{ width:18px; height:18px; }

  /* Topbar grup hizaları (isteğe bağlı orta başlık) */
  .topbar-left, .topbar-center, .topbar-right{
    display:flex; align-items:center; gap:10px;
  }
  .topbar-title{ font-weight:600; font-size:14px; opacity:.9; }

  /* İçerik topbar ile çakışmasın */
  body{ scroll-padding-top: calc(56px + env(safe-area-inset-top)); padding-bottom: 76px; }

  /* ------- Alt Gezinme (cam kart stili) ------- */
  .mobile-bottom-bar{
    display:block;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:
      linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.35) 100%),
      rgba(17,20,27,.94); /* color-mix fallback */
    backdrop-filter: blur(12px) saturate(1.2);
    border-top:1px solid var(--ring);
    padding: max(10px, env(safe-area-inset-bottom));
  }
.mobile-bottom-inner{
  display:flex;           /* grid yerine flex */
  flex-wrap:nowrap;       /* asla alta kaymasın */
  gap:8px;
  overflow-x:auto;        /* sığmazsa yana doğru kaydır */
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
  .mobile-tab{
    -webkit-tap-highlight-color:transparent; cursor:pointer;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
    min-height:58px; padding:12px 10px;
    border-radius:16px;
    background: rgba(255,255,255,.12);                     /* fallback */
    border:1px solid rgba(255,255,255,.18);                /* fallback */
    color:#fff;
    box-shadow: 0 6px 18px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.05);
    transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  @supports (background: color-mix(in oklab, #fff 12%, transparent)){
    .mobile-tab{
      background: color-mix(in oklab, #fff 12%, transparent);
      border-color: color-mix(in oklab, var(--ring) 80%, #fff 20%);
    }
  }
  .mobile-tab svg{ width:22px; height:22px; opacity:.95; }
  .mobile-tab span{
    font-size:12px; color: color-mix(in oklab, var(--text) 75%, #fff 25%);
    letter-spacing:.2px; text-shadow: 0 1px 2px rgba(0,0,0,.35);
  }
  .mobile-tab:is(:hover,:focus-visible){
    background: rgba(255,255,255,.16);
    border-color: color-mix(in oklab, var(--ring2) 70%, #fff 30%);
    box-shadow: 0 8px 22px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transform: translateY(-1px);
  }
  .mobile-tab.active{
    background: rgba(255,255,255,.18);
    border-color: var(--accent);
    box-shadow: 0 10px 26px rgba(0,0,0,.32), 0 0 0 1px var(--accent), 0 8px 28px rgba(54,177,255,.28);
  }
  .mobile-tab.active span{ color:#fff; }

  /* ------- Hero mobil düzeltmeleri ------- */
  .hero-content{ display:flex; flex-direction:column; align-items:center; padding-bottom:24px; text-align:center; }
  .hero-poster{ width:min(70vw,240px); align-self:center; }
  .hero-main .desc{ display:none; }
}

/* Sheet temel kuralları */
.az-sheet{position:fixed;inset:0;z-index:80;display:block}
.az-sheet[hidden]{display:none !important;}
.az-sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);opacity:0;transition:opacity .2s ease}
.az-sheet-panel{position:absolute;right:0;top:0;bottom:0;width:min(92vw,560px);
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.00)),var(--bg,#0d0d0d);
  border-left:1px solid var(--ring,rgba(255,255,255,.14));box-shadow:-20px 0 60px rgba(0,0,0,.35);
  transform:translateX(100%);transition:transform .24s cubic-bezier(.2,.9,.2,1)}
.az-sheet.open .az-sheet-backdrop{opacity:1}
.az-sheet.open .az-sheet-panel{transform:translateX(0)}
.az-sheet-header{display:flex;align-items:center;gap:12px;padding:14px;border-bottom:1px solid var(--ring,rgba(255,255,255,.14))}
.az-sheet-title{font-weight:600}
.az-sheet-close{margin-left:auto;border:1px solid var(--ring);background:transparent;color:#fff;border-radius:8px;padding:6px 10px}
.az-sheet-body{padding:14px;overflow:auto;height:calc(100% - 64px)}
.topbar{
  position: sticky; top: 0; z-index: 200; /* üstte kalsın */
  pointer-events: auto;
}

/* Masaüstünde butonu gizle */
.mobile-search-btn{ display:none; }

@media (max-width: 768px){
  .topbar .searchbox{
    position: fixed !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
}
.mobile-search-btn{ display:none; }
@media (max-width: 768px){
  .mobile-search-btn{
    display:inline-flex;
    align-items:center; gap:8px;
    padding:8px 12px; border-radius:999px;
    border:1px solid var(--ring, rgba(255,255,255,.14));
    background:rgba(255,255,255,.06); color:#fff;
  }
  .mobile-search-btn .ico{ width:18px; height:18px; }
}
/* Panel için güvenli z-index (varsa) */
.az-sheet{ z-index: 800; }
  .explore-wrap{max-width:1280px;margin:0 auto;padding:12px var(--gutter) 80px}
  .toggle-group{display:flex;gap:8px;align-items:center}
  .filterbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between;margin:8px 0 14px}
  .filter-left{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
  .seg{display:inline-flex;background:linear-gradient(180deg, rgba(14,16,22,.72), rgba(14,16,22,.54));border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(10px);gap:4px;padding:6px;border-radius:999px;box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 10px 30px rgba(0,0,0,.25)}
  .seg button{height:34px;padding:0 14px;border-radius:999px;border:1px solid transparent;background:transparent;color:#d8dbe6;font-weight:800;letter-spacing:.15px;cursor:pointer}
  .seg button.active{color:#fff;background:linear-gradient(135deg,#00b7ff,#0099ff);box-shadow:0 8px 24px rgba(99,102,241,.35),0 2px 8px rgba(168,85,247,.28)}

.select{ position:relative; }  .select button.sel{width:100%;display:flex;align-items:center;justify-content:space-between;gap:8px;height:36px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-weight:700}
  .select .menu{position:absolute;left:0;right:0;top:42px;background:rgba(20, 20, 20, 0.938);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:6px;list-style:none;margin:0;box-shadow:0 16px 40px rgba(0,0,0,.45);display:none;max-height:320px;overflow:auto;z-index:30}
  .select.open .menu{display:block}
  .select .menu li{padding:8px 10px;border-radius:8px;cursor:pointer;color:#dfe3ee}
  .select .menu li[aria-selected="true"], .select .menu li:hover{background:rgba(255,255,255,.10);color:#fff}

  .grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
  @media(max-width:1200px){.grid{grid-template-columns:repeat(5,1fr)}}
  @media(max-width:992px){.grid{grid-template-columns:repeat(4,1fr)}}
  @media(max-width:768px){.grid{grid-template-columns:repeat(3,1fr)}}
  @media(max-width:520px){.grid{grid-template-columns:repeat(2,1fr)}}

  .empty{padding:36px;text-align:center;color:#aab0bd}
  .loadmore{display:flex;justify-content:center;margin-top:16px}
  .loadmore .btn{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.2);color:#fff;font-weight:800}

  /* subtle mount animation */
  .card{opacity:0; transform:translateY(6px); animation:cardIn .28s ease forwards}
  @keyframes cardIn{to{opacity:1; transform:translateY(0)}}

    .select.multiselect .menu{max-height:280px; overflow:auto}
  .select.multiselect .menu li{display:flex;align-items:center;gap:8px}
  .select .cnt{opacity:.75;margin-left:6px;font-size:12px}
  .range{display:flex;align-items:center;gap:8px}
  .range input{width:110px}
  .chip.toggle{cursor:pointer;user-select:none}
  .pill-inline{display:flex;gap:8px;flex-wrap:wrap}

.notif-dd{position:relative}
#notifMenu{
  position:absolute; right:0; top:calc(100% + 12px);
  width:420px; max-width:min(92vw,420px);
  background:#0d0d0d; color:#dbe3ea;
  border:1px solid #1f2633; border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45);
  transform:translateY(-8px) scale(.98);
  opacity:0; pointer-events:none; transition:transform .18s, opacity .18s;
  z-index:9999; overflow:hidden;
}
#notifMenu.is-open{opacity:1; transform:translateY(0) scale(1); pointer-events:auto}
#notifMenu::before{
  content:""; position:absolute; right:24px; top:-8px; width:16px; height:16px;
  background:#0d0d0d; border-left:1px solid #1f2633; border-top:1px solid #1f2633; transform:rotate(45deg)
}
#notifMenu .n-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.6rem .8rem;border-bottom:1px solid #1e222b}
#notifMenu .n-tabs{display:flex;gap:.4rem}
#notifMenu .n-tab{padding:.45rem .65rem;border-radius:8px;background:#151823;color:#c9d1d9;border:1px solid transparent;cursor:pointer}
#notifMenu .n-tab.active{background:#1f2430;border-color:#2c3240}
#notifMenu .n-markall,#notifMenu .n-clear{background:transparent;border:1px solid #2c3240;color:#c9d1d9;border-radius:8px;padding:.35rem .6rem;cursor:pointer}
#notifMenu .n-clear{border-color:#3a4153;color:#eab4b4}
#notifMenu .n-list{max-height:58vh;overflow:auto;-webkit-overflow-scrolling:touch}
#notifMenu .n-empty{padding:1rem;text-align:center;color:#9aa5b1}

.n-item{position:relative;display:block;padding:.8rem .9rem;border-bottom:1px solid #171b24;color:inherit;text-decoration:none}
.n-item:hover{background:#111826}
.n-item.is-unread{background:rgba(64,160,255,.08)}
.n-row{display:flex;gap:.75rem;align-items:flex-start}
.n-thumb{width:56px;height:56px;border-radius:10px;overflow:hidden;flex:0 0 56px;background:#0f172a}
.n-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.n-content{flex:1;min-width:0}
.n-title{margin:0 0 .25rem 0;font-size:.95rem;font-weight:700;color:#e6eef6}
.n-text{margin:0;font-size:.86rem;color:#9fb0bf;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.n-meta{margin-top:.38rem;font-size:.78rem;color:#8ea4b6;display:flex;align-items:center;gap:.5rem}
.n-badge{background:#1f2a3a;color:#bfe1ff;border:1px solid #2c3a4f;border-radius:999px;padding:.12rem .5rem;font-weight:700}
.n-item .n-del{color:white;position:absolute;right:.6rem;top:.6rem;width:28px;height:28px;border-radius:8px;border:1px solid #2c3240;background:#141824;display:grid;place-items:center;opacity:0;transition:.2s}
.n-item:hover .n-del{opacity:1}
@media(hover:none){.n-item .n-del{opacity:1}}

.actions .pill{position:relative}
.notif-count{position:absolute;top:-6px;right:-6px;min-width:18px;height:18px;padding:0 4px;background:#e11d48;color:#fff;border-radius:999px;font-size:.75rem;line-height:18px;text-align:center}

/* ===== Bildirim paneli – MOBİL ===== */
@media (max-width:768px){
  .notif-dd{position:static !important}
  #notifMenu{
    position:fixed !important;
    left: max(8px, env(safe-area-inset-left)) !important;
    right:max(8px, env(safe-area-inset-right)) !important;
    top: var(--notif-top, 64px) !important;
    width:auto !important; max-width:none !important;
    border-radius:14px !important;
    transform:none !important;
    z-index:99999 !important;
  }
  #notifMenu::before{display:none !important}
  #notifMenu .n-list{max-height: calc(100vh - var(--notif-top, 64px) - 16px - env(safe-area-inset-bottom)) !important;}
}

#notifMenu .n-list { overscroll-behavior: contain; }

/* Dokunuşun menü dışında sayfaya akmasını engelleme — sadece menü açıkken etkileşim al */
#notifMenu { pointer-events: none; }
#notifMenu.is-open { pointer-events: auto; }

/* iOS kaydırma için */
#notifMenu .n-list { -webkit-overflow-scrolling: touch; }

/* (İsteğe bağlı) performans */
#notifMenu { will-change: transform, opacity; }

/* ===== AI Suggest ===== */
.ai-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.5rem .7rem;border-radius:999px;
  background:linear-gradient(180deg,#1c2438,#141a2a);color:#cfe3ff;border:1px solid #263044;
  box-shadow:0 6px 20px rgba(22,30,50,.25), inset 0 0 0 1px rgba(255,255,255,.02);
  transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease}
.ai-btn:hover{transform:translateY(-1px);box-shadow:0 10px 24px rgba(22,30,50,.35), inset 0 0 0 1px rgba(255,255,255,.03)}
.ai-btn-ico{width:18px;height:18px;filter:drop-shadow(0 0 8px #79a9ff)}
.ai-btn-text{font-weight:600;font-size:.95rem}

.ai-layer{position:fixed;inset:0;z-index:1200;display:none}
.ai-layer.is-open{display:block}
.ai-backdrop{position:absolute;inset:0;background:rgba(5,8,15,.55);backdrop-filter:blur(6px);opacity:0;animation:fadeIn .18s ease forwards}
.ai-dialog{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.96);
  width:min(860px,92vw);max-height:86vh;overflow:auto;border-radius:18px;
  background:radial-gradient(120% 120% at 0% 0%,#0f1526 0%,#0a0f1d 60%,#0a0f1d 100%);
  border:1px solid #1f2a44;box-shadow:0 30px 80px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.03);
  opacity:0;animation:popIn .24s cubic-bezier(.2,.8,.2,1) forwards}
.ai-head{position:sticky;top:0;background:linear-gradient(180deg,#0e1425 0,#0e1425dd 70%,transparent);
  display:flex;align-items:center;gap:.75rem;padding:14px 16px;border-bottom:1px solid #1b2440}
.ai-head h3{margin:0;font-size:1.05rem;font-weight:700;color:#dbe9ff;letter-spacing:.2px}
.ai-x{margin-left:auto;border:1px solid #263044;border-radius:10px;background:#131a2b;color:#b9c9f0;padding:6px;line-height:0}
.ai-x:hover{background:#172037}

.ai-pips{display:inline-flex;gap:6px;margin-right:2px}
.ai-pips i{width:6px;height:6px;border-radius:50%;background:#6ea8ff;opacity:.75;animation:pulse 1.4s infinite}
.ai-pips i:nth-child(2){animation-delay:.18s}.ai-pips i:nth-child(3){animation-delay:.36s}

.ai-chat{padding:16px 18px 10px;display:flex;flex-direction:column;gap:14px}
.ai-bubble{align-self:flex-start;max-width:640px;background:#121a2e;border:1px solid #223153;color:#e8f0ff;
  border-radius:14px;padding:14px 16px;position:relative;opacity:0;transform:translateY(8px);
  animation:slideUp .22s ease forwards}
.ai-bubble .dots{display:inline-flex;gap:6px;margin-left:6px;vertical-align:middle}
.ai-bubble .dots i{width:6px;height:6px;border-radius:50%;background:#89b6ff;opacity:.35;animation:typing 1s infinite}
.ai-bubble .dots i:nth-child(2){animation-delay:.15s}.ai-bubble .dots i:nth-child(3){animation-delay:.3s}

.ai-card{display:flex;gap:14px;background:#0f1528;border:1px solid #253354;border-radius:16px;margin:10px 18px 14px;padding:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.02)}
.ai-thumb{width:146px;aspect-ratio:16/10;border-radius:12px;overflow:hidden;background:#0b1122}
.ai-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.ai-meta h4{margin:2px 0 8px;color:#eaf1ff;font-size:1.05rem}
.ai-badges{display:flex;gap:8px;margin-bottom:10px}
.ai-badge{background:#121a2c;border:1px solid #26344f;color:#c8dbff;border-radius:999px;padding:4px 8px;font-size:.8rem}
.ai-cta{display:flex;gap:8px;flex-wrap:wrap}
.ai-cta .btn{display:inline-flex;gap:6px;align-items:center;padding:8px 10px;border-radius:12px;border:1px solid #2a3a5c}
.ai-cta .btn.primary{background:#1e2a48;color:#eaffff}
.ai-cta .btn.ghost{background:transparent;color:#cfe3ff}
.ai-cta .btn.soft{background:#131a2b;color:#d7e6ff}

.ai-foot{border-top:1px solid #1b2440;padding:10px 16px;color:#b9c8e9}
.ai-foot a{color:#9fc3ff;text-decoration:none;border:1px solid #26395b;border-radius:999px;padding:2px 8px;margin-left:6px}

/* Animations */
@keyframes fadeIn{to{opacity:1}}
@keyframes popIn{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes slideUp{to{opacity:1;transform:translateY(0)}}
@keyframes pulse{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1)}}
@keyframes typing{0%{opacity:.2;transform:translateY(0)}50%{opacity:.9;transform:translateY(-2px)}100%{opacity:.2;transform:translateY(0)}}

/* küçük ekranlar */
@media (max-width:560px){
  .ai-thumb{width:120px}
  .ai-dialog{width:min(96vw,560px)}
}
.ai-chat.is-done .dots{display:none}


.avatar-only{
  width:56px; height:56px; padding:0; border-radius:999px; overflow:hidden;
  border:1px solid var(--ring2);
  background:rgba(255,255,255,.08);
  display:grid; place-items:center;
  box-shadow:0 10px 24px rgba(0,0,0,.25);
  transition:transform .16s ease, background .2s ease, box-shadow .2s ease;
}
.avatar-only:hover{ background:rgba(255,255,255,.12); transform:translateY(-1px) scale(1.03); }
.avatar-only:active{ transform:translateY(0) scale(.98); }
.profile-photos{ width:100%; height:100%; object-fit:cover; display:block; }
.friends-list{display:flex;flex-direction:column;gap:10px;margin:6px 0 0 0;padding:0;list-style:none}
.friend-item{border:1px solid var(--stroke);border-radius:12px;background:var(--panel);transition:border .2s, box-shadow .2s}
.friend-item:hover{border-color:color-mix(in srgb, var(--brand-2) 55%, var(--stroke));box-shadow:0 0 0 4px color-mix(in srgb, var(--brand-2) 20%, transparent)}
.f-link{display:flex;align-items:center;gap:12px;padding:10px 12px;text-decoration:none;color:var(--text)}
.f-ava{position:relative;width:42px;height:42px;border-radius:12px;overflow:hidden;flex:0 0 42px;background:#0f1116}
.f-ava img{width:100%;height:100%;object-fit:cover;display:block;filter:contrast(1.02) brightness(.98)}
.f-badge{
  position:absolute;right:-4px;bottom:-4px;min-width:22px;height:22px;padding:0 6px;border-radius:999px;
  display:inline-flex;align-items:center;justify-content:center;font:700 11px/1 Inter,system-ui;
  background:linear-gradient(180deg,color-mix(in srgb, var(--brand) 65%, var(--brand-2) 35%), var(--brand));
  color:#eef6ff;border:1px solid color-mix(in srgb, var(--brand) 80%, #000 20%); box-shadow:0 4px 16px rgba(0,0,0,.35)
}
.f-main{display:flex;flex-direction:column;min-width:0}
.f-name{font-weight:700;font-size:14px;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.f-last{color:var(--muted);font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.friends-more{display:inline-block;margin-top:10px;font-weight:700;font-size:12px;color:var(--brand-2);text-decoration:none}
.friends-more:hover{text-decoration:underline}

/* Kapsayıcıyı gerçek responsive grid yap (adı sende farklıysa onu kullan) */
.cards{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
  align-items: stretch;
  box-sizing: border-box;
}

/* Kart: taşmayı engelle + genişlik kontrolü */
.epi-card.banner{
  position: relative;
  display: block;
  width: 100%;
  min-width: 0;                /* flex/grid shrink çakışmalarını çözer */
  border-radius: 14px;
  overflow: hidden;
  isolation: isolate;

  /* ÖNEMLİ: clamp(min, ideal, max) sırası doğru olmalı */
  /* Eski: clamp(90px, 14vw, 40px) → yanlıştı (min > max) */
  height: clamp(40px, 14vw, 90px);

  background: var(--card-bg, #0d0f12);
  background-image: var(--bg, none);
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 0 1px rgba(255,255,255,.04) inset;
  transition: transform .16s ease, box-shadow .22s ease, filter .22s ease;
}

/* Banner yoksa temayla uyumlu koyu degrade */
.epi-card.banner.no-bg{
  background-image: linear-gradient(
    135deg,
    color-mix(in oklab, var(--brand, #0f0f0fff) 10%, #0a0a0a) 0%,
    color-mix(in oklab, var(--brand-2, #0f0f0fff) 14%, #0a0a0a1c) 100%
  );
}

.epi-card.banner .overlay{
  position:absolute; inset:0; z-index:0;
  background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6));
}

.epi-card.banner .inner{
  position:absolute; inset:0; z-index:1;
  display:grid; place-items:center; gap:6px; padding:8px; text-align:center;
  overflow: hidden;
  max-width: 100%;
}

/* Banner içindeki metin taşmasını önle */
.epi-card.banner .inner > * {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Sadece “Bölüm X” gösteriyorsun, o yüzden diğerleri yok */
.epi-card.banner .pill{
  font-size: 11px; padding: 4px 8px; border-radius: 999px;
  background: var(--brand-2, #0f0f0f59); color:#fff;
  box-shadow: 0 1px 8px color-mix(in oklab, var(--brand-2,#0ea5e9) 28%, transparent);
}

@media (max-width: 520px){
  .epi-card.banner{ height: clamp(44px, 20vw, 84px); }
}

.epi-card.banner {
  /* ...diğer stiller... */
  height: clamp(40px, 14vw, 90px); /* min=40, ideal=14vw, max=90 */
}
.eps-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:10px;
}



/* İç blok tamamıyla ortalı */
.eps-card .info{
  display:grid;
  justify-items:center;      /* yatay merkez */
  align-content:center;      /* dikey merkez */
  text-align:center;
  gap:8px;
  width:100%;
}

/* Üst satır (sadece pill var ama esnek kalsın) */
.eps-card .epi-top{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
}

/* Açıklama ve buton */
.eps-card .epi-desc{
  max-width:42ch;
  font-size:13px;
  line-height:1.45;
  color:color-mix(in oklab,currentColor 70%,transparent);
}
.eps-card .epi-actions{
  display:flex;
  justify-content:center;
}

/* Bölüm pill’i */
.eps-card .pill{
  font-size:12px;
  padding:4px 10px;
  border-radius:999px;
  background:var(--brand-2,#0ea5e9);
  color:#fff;
  box-shadow:0 2px 12px color-mix(in oklab,var(--brand-2,#0ea5e9) 35%,transparent);
}

/* Küçük ekranlar */
@media (max-width:520px){
  .eps-card{ height:clamp(50px,22vw,84px); }
  .eps-card .epi-desc{ font-size:12px; }
}