/* ══════════════════════════════════════════════════════════════
   Perde

   Yerleşim kararı: yatay kaydırmalı şerit DEĞİL, ekranı dolduran ızgara.
   Şeritte ekranın sağı solu boş kalıyor ve kütüphane cılız görünüyor;
   auto-fill ızgara ise ekran genişliği ne kadarsa o kadar kart diziyor.
   Televizyonda da, telefonda da kendini ayarlıyor.
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── Palet: DÖRT temel renk. Geri kalan her ton bunlardan saydamlıkla
     türetiliyor; palete yeni renk eklenmiyor. Böylece arayüz büyürken
     "birbirine yakın ama aynı olmayan gri" çoğalmıyor. ───────────────── */
  /* Zemin NÖTR siyah, lacivert değil: renkli bir zemin yanındaki afişlere
     kendi kaçışını veriyor ve poster renkleri olduğundan soğuk okunuyor.
     İçerik öne çıkacaksa zemin renk katmamalı. */
  --bg-rgb:  15 16 17;
  --ink-rgb: 240 237 232;
  --bg:      rgb(var(--bg-rgb));
  /* Sıcak beyaz: saf beyaz karanlık odada parlıyor ve gece izlemede yoruyor. */
  --ink:     rgb(var(--ink-rgb));
  /* Pirinç: afiş paletlerinin çoğu mavi-yeşil ağırlıklı olduğu için mavi
     vurgu o zeminde kayboluyor. Sıcak vurgu az kullanımla bile görünür. */
  --accent:  #d29b45;
  --accent-hi:#e8b869;

  /* Yüzeyler: zeminin üstüne beyaz saydamlık */
  --surface:  rgb(var(--ink-rgb) / .055);
  --surface2: rgb(var(--ink-rgb) / .10);
  --line:     rgb(var(--ink-rgb) / .13);
  --line-hi:  rgb(var(--ink-rgb) / .24);
  --sunken:   rgba(0,0,0,.35);           /* girdi alanları: zeminden aşağıda */

  /* Metin kademeleri: aynı mürekkep, azalan opaklık */
  --text:  var(--ink);
  --muted: rgb(var(--ink-rgb) / .68);
  --faint: rgb(var(--ink-rgb) / .44);

  /* ── Tipografi: tek aile, tanımlı ölçek. Önceden 19 ayrı sabit punto
     vardı; hiyerarşi göz kararıyla kuruluyordu. ─────────────────────── */
  --font: 'Avenir Next','Avenir','Segoe UI',Tahoma,Verdana,sans-serif;

  --t-xs:  .8rem;
  --t-sm:  .9rem;
  --t-md:  1rem;
  --t-lg:  1.125rem;
  --t-xl:  clamp(1.25rem, 1.6vw, 1.5rem);
  --t-2xl: clamp(1.5rem, 2.2vw, 2rem);
  --t-3xl: clamp(2rem, 4vw, 3rem);
  --t-4xl: clamp(2.4rem, 5.5vw, 4rem);

  /* Ağırlık üç kademe: gövde, vurgulu, başlık */
  --w-body: 400;
  --w-med:  600;
  --w-bold: 800;

  --rail: clamp(1rem, 4vw, 3.5rem);
  --r: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:var(--font); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.grain,.drape{ display:none; }
button,input{ font-family:inherit; }

/* Odak hem :focus hem :focus-visible ile belirginleşiyor. Kumandayla
   gezinirken odak programatik olarak taşınıyor ve bazı tarayıcılar bu
   durumda :focus-visible'ı tetiklemiyor -- odağın kaybolması TV'de
   kullanıcıyı hareketsiz bırakır. */
:focus{ outline:3px solid var(--accent-hi); outline-offset:3px; }
:focus:not(:focus-visible){ outline-width:3px; }
.card:focus, .ep:focus, .profile:focus{ outline:none; }   /* kendi vurgusu var */

/* ── ekranlar ─────────────────────────────────────────────── */

.screen{ display:none; min-height:100vh; position:relative; }
.screen.is-active{ display:block; }
.screen--center{ display:none; place-items:center; padding:2rem 1rem; }
.screen--center.is-active{ display:grid; }

/* ── giriş ────────────────────────────────────────────────── */

.gate{
  width:min(94vw,23rem); padding:2.25rem 2rem;
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  box-shadow:0 20px 50px -20px #000;
}
.gate--wide{ width:min(94vw,52rem); background:none; border:0; box-shadow:none; padding:0; }
.gate__deco{ display:none; }

.wordmark{
  margin:0; font-size:var(--t-3xl); font-weight:var(--w-bold); letter-spacing:.01em;
  text-align:center; color:var(--text);
}
.wordmark--sm{
  font-size:var(--t-xl); font-weight:var(--w-bold); background:none; border:0;
  color:var(--text); cursor:pointer; padding:.25rem 0; flex:0 0 auto;
}
.tagline{ margin:.3rem 0 1.75rem; text-align:center; font-size:var(--t-sm); color:var(--muted); }

.form{ display:grid; gap:1rem; }
.field{ display:grid; gap:.4rem; }
.field__label{ font-size:var(--t-sm); color:var(--muted); }

input[type=text],input[type=password],input[type=search]{
  width:100%; padding:.75rem .85rem; border-radius:var(--r);
  background:var(--sunken); color:var(--text);
  border:1px solid var(--line); font-size:var(--t-md);
}
input::placeholder{ color:var(--faint); }
input:focus{ outline:none; border-color:var(--accent); }

.btn{
  font-size:var(--t-sm); font-weight:var(--w-med); padding:.75rem 1.25rem;
  border-radius:var(--r); cursor:pointer; border:1px solid transparent;
  transition:background .2s, border-color .2s, transform .15s;
}
.btn--brass{ background:var(--accent); color:rgb(var(--bg-rgb)); margin-top:.3rem; font-weight:var(--w-bold); }
.btn--brass:hover{ background:var(--accent-hi); }
.btn--ghost{ background:rgb(var(--ink-rgb) / .06); color:var(--text); border-color:var(--line); }
.btn--ghost:hover{ background:rgb(var(--ink-rgb) / .12); }
.btn--velvet{ background:var(--text); color:rgb(var(--bg-rgb)); font-weight:var(--w-bold); }
.btn--velvet:hover{ background:var(--ink); transform:scale(1.03); }
.btn--secili{ background:var(--surface2); border-color:var(--text); color:var(--text); }
.btn--secili:hover{ background:var(--line-hi); }

.alert{
  margin:0; padding:.65rem .8rem; font-size:var(--t-sm); border-radius:var(--r);
  background:rgba(229,72,77,.14); border:1px solid rgba(229,72,77,.45); color:#ffb9bc;
}

/* ── profiller ────────────────────────────────────────────── */

.eyebrow{ text-align:center; font-size:var(--t-xl); color:var(--text); margin:0 0 1.75rem; font-weight:var(--w-med); }
.profiles{ display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; }
.profile{
  background:none; border:0; cursor:pointer; color:var(--muted);
  display:grid; gap:.7rem; justify-items:center; padding:.25rem;
}
.profile__face{
  width:7rem; aspect-ratio:1; display:grid; place-items:center; border-radius:10px;
  font-size:var(--t-3xl); font-weight:var(--w-med); color:var(--text);
  background:var(--surface); border:3px solid transparent;
  transition:border-color .2s, transform .2s;
}
.profile:hover .profile__face,.profile:focus-visible .profile__face{
  border-color:var(--text); transform:scale(1.05);
}
.profile:hover{ color:var(--text); }
.profile__name{ font-size:var(--t-lg); }

/* ── yan ray ──────────────────────────────────────────────
   Daraltılmış hâlde yalnızca simge; üzerine gelince ya da içindeki bir
   öğe odak alınca genişliyor. Genişleme SAYFAYI İTMİYOR, üstüne biniyor --
   yoksa her odak değişiminde bütün katalog kayardı. */

:root{ --rail-w: 4.75rem; --rail-open: 15rem; }

.rail{
  position:fixed; inset:0 auto 0 0; z-index:8;
  width:var(--rail-w);
  display:flex; flex-direction:column; gap:.4rem;
  padding:1rem .75rem;
  background:linear-gradient(90deg, rgb(var(--bg-rgb) / .97) 55%, rgb(var(--bg-rgb) / 0));
  transition:width .22s ease, background .22s ease;
  overflow:hidden;
}
.rail:hover, .rail:focus-within{
  width:var(--rail-open);
  background:linear-gradient(90deg, rgb(var(--bg-rgb) / .99) 78%, rgb(var(--bg-rgb) / .85));
}

.rail__profile{
  display:flex; align-items:center; gap:.7rem;
  padding:.5rem .55rem 1.1rem; min-width:0;
}
.rail__avatar{
  width:2.1rem; height:2.1rem; flex:0 0 auto; border-radius:5px;
  background:var(--surface2); color:var(--text);
  display:grid; place-items:center; font-weight:var(--w-med); font-size:var(--t-sm);
}
/* Girişler dikeyde ortalanıyor: profil üstte, çıkış altta sabit kalırken
   liste aradaki boşluğu alıp kendi içinde ortalanıyor. */
.rail__list{
  list-style:none; margin:0; padding:0;
  display:grid; gap:.25rem;
  flex:1; align-content:center;
}

.rail__item{
  display:flex; align-items:center; gap:.85rem;
  width:100%; padding:.7rem .6rem; border:0; border-radius:6px;
  background:none; color:var(--muted); cursor:pointer;
  font-size:var(--t-md); text-align:left; white-space:nowrap;
  transition:background .15s, color .15s;
}
.rail__item:hover{ color:var(--text); background:var(--surface); }
.rail__item:focus{ outline:none; color:var(--text); background:var(--surface2); }
.rail__item.is-current{ color:var(--text); font-weight:var(--w-med); }
.rail__item--foot{ margin-top:auto; }

/* Yazılar yalnızca ray açıkken görünür. Kapalıyken genişlik/opaklık
   sıfır: ekran okuyucudan gizlenmiyor, sadece görünmüyor. */
.rail__label{
  opacity:0; transition:opacity .18s ease;
  overflow:hidden; text-overflow:ellipsis;
}
.rail:hover .rail__label, .rail:focus-within .rail__label{ opacity:1; }

/* Sahne rayın yanından başlıyor. */
.stage{ margin-left:var(--rail-w); }
@media (max-width:640px){
  .rail{ inset:auto 0 0 0; width:100%; height:auto; flex-direction:row;
         padding:.4rem .6rem; background:rgb(var(--bg-rgb) / .97); }
  .rail:hover, .rail:focus-within{ width:100%; }
  .rail__profile{ display:none; }
  .rail__list{ grid-auto-flow:column; flex:1; }
  .rail__item{ justify-content:center; padding:.6rem .3rem; }
  .rail__label{ display:none; }
  .rail__item--foot{ margin:0; }
  .stage{ margin-left:0; padding-bottom:4rem; }
}

/* ── üst çubuk ────────────────────────────────────────────── */

/* Üst çubuk tanıtım alanının ÜZERİNDE yüzüyor ve zemini yok: arayüzün
   görselden pay çalmaması için. Sayfa kaydırılınca zemin kazanıyor. */
.topbar{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:1rem;
  padding:.8rem var(--rail);
  background:linear-gradient(180deg, rgb(var(--bg-rgb) / .75), transparent);
  transition:background .25s ease;
}
.topbar.is-scrolled{
  background:rgb(var(--bg-rgb) / .92);
  backdrop-filter:blur(10px);
}
.topbar__search{ margin-left:auto; min-width:0; }
.topbar__search input{ width:clamp(7rem,26vw,16rem); padding:.5rem .8rem; font-size:var(--t-sm); }
.topbar .btn{ padding:.5rem 1rem; font-size:var(--t-sm); }

/* ── raflar: IZGARA ───────────────────────────────────────── */

/* ── tanıtım alanı ────────────────────────────────────────
   Kataloğa girişte yön veren öğe. Arka plan görseli tam genişlikte,
   yazı sol altta; gradyan iki yönde eriyerek metni okunur kılıyor ve
   alttaki ilk rafa bağlanıyor. */
.bb{
  position:relative; margin-bottom:1rem;
  min-height:clamp(320px, 52vh, 560px);
  display:flex; align-items:flex-end;
  padding:clamp(2rem,6vw,4rem) var(--rail) clamp(1.5rem,3vw,2.5rem);
}
.bb__bg{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.bb__bg img{ width:100%; height:100%; object-fit:cover; object-position:center 25%; }
.bb__bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, rgb(var(--bg-rgb) / .55) 0%, rgb(var(--bg-rgb) / .05) 30%,
                            rgb(var(--bg-rgb) / .72) 78%, var(--bg) 100%),
    linear-gradient(90deg, rgb(var(--bg-rgb) / .92) 0%, rgb(var(--bg-rgb) / .55) 45%, rgb(var(--bg-rgb) / 0) 85%);
}
.bb__body{ position:relative; z-index:1; max-width:min(46rem, 62%); }
@media (max-width:760px){ .bb__body{ max-width:100%; } }

.bb__title{
  margin:0 0 .6rem; font-size:clamp(2rem,5.5vw,4rem); font-weight:var(--w-bold);
  letter-spacing:-.025em; line-height:1.02;
}
.bb__facts{ margin:0 0 .9rem; color:var(--muted); font-size:clamp(.95rem,1.1vw,1.1rem); }
.puan{
  display:inline-flex; align-items:center; gap:.3em;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.15);
  border-radius:.3rem; padding:.12em .5em; font-variant-numeric:tabular-nums;
  letter-spacing:.02em; color:var(--gold,#d4a843);
}
.puan::before{
  content:''; display:block; width:.65em; height:.65em;
  background:currentColor;
  clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.bb__overview{
  margin:0 0 1.4rem; color:rgb(var(--ink-rgb) / .86); max-width:52ch;
  font-size:clamp(1rem,1.15vw,1.15rem); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.bb__actions{ display:flex; gap:.7rem; flex-wrap:wrap; }
.bb__actions .btn{ font-size:clamp(.95rem,1.05vw,1.1rem); padding:.8rem 1.7rem; }

.shelves{ padding:1.25rem 0 4rem; }
.bb + .shelves,
.shelves:has(.bb){ padding-top:0; }
.shelf{ margin-bottom:3rem; }
.shelf__head{ padding:0 var(--rail); margin-bottom:1.1rem; }
.shelf__title{ margin:0; font-size:clamp(1.4rem,1.9vw,1.9rem); font-weight:var(--w-bold); letter-spacing:-.01em; }
.shelf__rule{ display:none; }

/* Kart genişliği viewport ile ölçekleniyor. Sabit üst sınır verilince
   geniş ekranda kartlar küçük kalıp aralar boş görünüyordu. */
.row{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(clamp(150px, 15vw, 250px), 1fr));
  gap:1.75rem 1.25rem;
  padding:0 var(--rail);
}

.card{
  cursor:pointer; background:none; border:0; padding:0;
  color:inherit; text-align:left; display:grid; gap:.6rem;
}
/* Duran hâlde kenarlık YOK: afişin kendi kenarı zaten bir çerçeve, üstüne
   bir çizgi daha koymak arayüze görselden pay veriyor. Çerçeve yalnızca
   odak/üzerine gelme anında beliriyor. */
.card__frame{
  position:relative; aspect-ratio:2/3; overflow:hidden; border-radius:var(--r);
  background:var(--surface);
  border:2px solid transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.5);
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card:hover .card__frame,.card:focus .card__frame{
  transform:scale(1.06);
  border-color:#fff;
  box-shadow:0 14px 32px rgba(0,0,0,.7), 0 0 0 4px rgba(0,134,245,.55);
}
.card__frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.card__blank{ position:absolute; inset:0; display:grid; place-items:center;
  background:linear-gradient(160deg,var(--surface2),transparent); }
.card__letter{ font-size:var(--t-3xl); font-weight:var(--w-bold); color:var(--faint); user-select:none; }
.card__name,.card__year{ display:none; }

.card__bar{ position:absolute; left:0; right:0; bottom:0; height:5px; background:rgba(0,0,0,.6); }
.card__bar i{ display:block; height:100%; background:var(--accent); }

/* Top 10: sıra numarası KENDİ SÜTUNUNDA duruyor, kartın üstüne binmiyor.
   Mutlak konumlandırıldığında rafın kenar boşluğunda kırpılıyor ve
   başlığın ilk harfini örtüyordu. */
.row--sirali{ grid-template-columns:repeat(auto-fill, minmax(clamp(190px,18vw,300px), 1fr)); }
.row--sirali .card{
  grid-template-columns:auto minmax(0,1fr);
  column-gap:.5rem;
}
.row--sirali .card > .card__sira{ grid-column:1; grid-row:1 / span 3; align-self:end; }
.row--sirali .card > .card__frame,
.row--sirali .card > .card__title,
.row--sirali .card > .card__meta{ grid-column:2; }

.card__sira{
  font-size:clamp(2.6rem,5vw,5rem); font-weight:var(--w-bold); line-height:.72;
  min-width:2ch; text-align:right;
  color:var(--text);
  text-shadow:0 2px 8px rgba(0,0,0,.7);
  pointer-events:none; user-select:none;
}

.card__title{
  margin:0; font-size:clamp(1rem,1.05vw,1.15rem); line-height:1.3;
  font-weight:var(--w-med); color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.card__meta{ font-size:clamp(.88rem,.95vw,1rem); color:var(--muted); }

/* ── detay ────────────────────────────────────────────────── */

/* Geri düğmesi akış içinde DEĞİL, görselin üzerinde yüzüyor. Akışta olsaydı
   arka plan görseli onun altından başlar ve tepede keskin bir yatay kesik
   oluştururdu. */
.back{
  position:absolute; top:1.25rem; left:var(--rail); z-index:5;
  display:inline-flex; align-items:center; gap:.4rem; margin:0;
  background:rgba(10,14,24,.55); color:var(--text);
  border:1px solid rgb(var(--ink-rgb) / .18); border-radius:999px;
  padding:.55rem 1.1rem; cursor:pointer; font-size:var(--t-sm);
  backdrop-filter:blur(8px);
}
.back:hover{ background:rgba(10,14,24,.8); }
.back--float{ position:fixed; top:1.25rem; left:1.25rem; z-index:9; }

/* Arka plan görseli ÜSTTE ayrı bir şerit olarak duruyor, yazının arkasında
   değil. Yazının arkasına konduğunda ne görsel seçiliyordu ne metin rahat
   okunuyordu; afişin altında kalan boşluk da o yarı görünür görselin
   üzerinde delik gibi duruyordu. */
.banner{
  position:relative; width:100%;
  height:clamp(200px, 34vh, 380px);
  overflow:hidden;
}
.banner img{
  width:100%; height:100%; object-fit:cover; object-position:center 28%;
  display:block;
}
.banner::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,
    rgb(var(--bg-rgb) / .55) 0%,
    rgb(var(--bg-rgb) / .12) 38%,
    rgb(var(--bg-rgb) / .75) 82%,
    var(--bg) 100%);
}

/* İçerik düz zeminde: metin net, boşluklar normal beyaz alan gibi okunuyor. */
.hero{ position:relative; z-index:1; padding:5.5rem var(--rail) 2rem; }
/* Şerit varsa afiş şeridin alt ucuna doğru taşsın -- alışılmış ve dengeli. */
.hero--under{ margin-top:clamp(-7rem, -7vw, -3.5rem); padding-top:0; }
/* align-items:start — afiş başlıkla aynı çizgiden başlar. 'end' verilirse
   uzun özetli filmlerde sağ sütun uzar ve afiş sayfanın altına düşer. */
/* align-items:start — afiş başlıkla aynı çizgiden başlar. 'end' verilirse
   uzun özetli filmlerde sağ sütun uzar ve afiş sayfanın altına düşer.
   Afiş sütunu viewport ile ölçekleniyor: sabit rem verilince geniş
   ekranda oyuncak gibi kalıyordu. */
.hero__grid{
  position:relative; z-index:1; width:100%;
  display:grid;
  grid-template-columns:clamp(11rem, 16vw, 19rem) minmax(0,1fr);
  gap:clamp(1.5rem, 3vw, 3rem); align-items:start;
}
@media (max-width:640px){ .hero__grid{ grid-template-columns:1fr; max-width:22rem; } }

.hero__poster,.hero__plate{
  width:100%; aspect-ratio:2/3; border-radius:var(--r);
  border:1px solid var(--line); background:var(--surface);
  box-shadow:0 16px 40px rgba(0,0,0,.6);
}
.hero__poster{ object-fit:cover; }
.hero__plate{ display:grid; place-items:center; font-size:var(--t-4xl); font-weight:var(--w-bold); color:var(--faint); }

.hero h2{ margin:0 0 .7rem; font-size:clamp(2.2rem,5.5vw,4rem); font-weight:var(--w-bold); line-height:1.06; letter-spacing:-.01em; }
.hero__facts{ display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; margin:0 0 1.2rem; font-size:clamp(1rem,1.2vw,1.15rem); color:var(--muted); }
/* Özet varsayılan olarak 5 satırla sınırlı. TMDB özetleri bazen 9-10 satır
   sürüyor; o zaman sağ sütun afişten çok daha uzun oluyor ve afişin altında
   koca bir boşluk kalıyor. Tam metin isteyene düğmeyle açılıyor. */
.hero__overview{
  max-width:74ch; color:rgb(var(--ink-rgb) / .86); margin:0 0 .6rem;
  font-size:clamp(1.1rem,1.4vw,1.4rem); line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
}
.hero__overview.acik{ -webkit-line-clamp:unset; overflow:visible; }

.oku{
  background:none; border:0; padding:0; margin:0 0 1.4rem;
  color:var(--text); font-size:var(--t-md); font-weight:var(--w-med); cursor:pointer;
  border-bottom:1px solid rgb(var(--ink-rgb) / .35);
}
.oku:hover{ border-bottom-color:var(--text); }
.hero__actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:1.2rem; }
.hero__actions .btn{ font-size:clamp(1rem,1.1vw,1.12rem); padding:.85rem 1.7rem; }

.chips{ display:flex; flex-wrap:wrap; gap:.5rem; }
.chip{
  font-size:var(--t-sm); padding:.38rem .95rem; color:var(--muted);
  background:rgb(var(--ink-rgb) / .07); border:1px solid var(--line); border-radius:999px;
}

.people{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(6rem,1fr));
  gap:1rem; overflow:visible;
}
.person{ text-align:center; font-size:var(--t-xs); color:var(--faint); }
.person img,.person>div{
  width:100%; aspect-ratio:1; height:auto; object-fit:cover; border-radius:50%;
  border:1px solid var(--line); margin-bottom:.45rem;
  background:var(--surface); display:grid; place-content:center;
  font-size:var(--t-xl); font-weight:var(--w-med); color:var(--muted);
}
.person b{ display:block; color:var(--text); font-weight:var(--w-med); font-size:var(--t-sm); }

.sect{ padding:0 var(--rail) 2.75rem; }
.sect__title{ font-size:var(--t-xl); font-weight:var(--w-bold); margin:0 0 1rem; }
.eplist{ display:grid; gap:.6rem; }
.ep{
  display:flex; align-items:center; gap:1rem; width:100%; border-radius:var(--r);
  padding:.95rem 1.1rem; cursor:pointer; text-align:left;
  background:var(--surface); color:var(--muted);
  border:1px solid transparent; font-size:var(--t-sm);
  transition:background .2s, transform .15s;
}
.ep:hover,.ep:focus-visible{ background:var(--surface2); transform:translateX(4px); color:var(--text); }
.ep__no{ font-size:var(--t-lg); font-weight:var(--w-bold); color:var(--faint); min-width:2.2rem; }
.ep b{ font-weight:var(--w-med); color:var(--text); }

/* ── bildirim ─────────────────────────────────────────────
   alert() yerine. Odağı çalmıyor, kendiliğinden kapanıyor -- kumandada
   bir şeyi kapatmak için tuş aramak zorunda kalmıyorsun. */
.toast{
  position:fixed; left:50%; bottom:2.5rem; transform:translate(-50%, 1.5rem);
  z-index:30; max-width:min(90vw, 34rem);
  padding:.9rem 1.3rem; border-radius:var(--r);
  background:rgb(var(--ink-rgb)); color:rgb(var(--bg-rgb));
  font-size:var(--t-md); font-weight:var(--w-med);
  box-shadow:0 18px 44px rgba(0,0,0,.6);
  opacity:0; pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
}
.toast.is-open{ opacity:1; transform:translate(-50%, 0); }
.toast--hata{ background:#c8453f; color:#fff; }

/* ── PIN tuş takımı ───────────────────────────────────────
   Her rakam odaklanabilir bir düğme; kumandayla gezilebiliyor. */
.pin{
  width:min(92vw, 20rem); padding:1.75rem;
  background:var(--bg); border:1px solid var(--line-hi); border-radius:14px;
  display:grid; gap:1.1rem; justify-items:center;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.pin__title{ margin:0; font-size:var(--t-lg); font-weight:var(--w-med); }
.pin__dots{ display:flex; gap:.7rem; height:1rem; align-items:center; }
.pin__dot{
  width:.85rem; height:.85rem; border-radius:50%;
  border:2px solid var(--line-hi); background:transparent;
}
.pin__dot.is-full{ background:var(--accent); border-color:var(--accent); }

.pin__pad{ display:grid; grid-template-columns:repeat(3, 4rem); gap:.6rem; }
.pin__key{
  aspect-ratio:1; border-radius:8px; cursor:pointer;
  background:var(--surface); color:var(--text);
  border:2px solid transparent;
  font-size:var(--t-lg); font-weight:var(--w-med);
  transition:background .15s, border-color .15s, transform .12s;
}
.pin__key:hover{ background:var(--surface2); }
.pin__key:focus{ outline:none; border-color:var(--text); transform:scale(1.06); }
.pin__key--alt{ font-size:var(--t-sm); color:var(--muted); }
.pin__key--ok{ font-size:var(--t-sm); background:var(--accent); color:rgb(var(--bg-rgb)); font-weight:var(--w-bold); }

/* ── profil yönetimi ──────────────────────────────────────
   Her ayar döngülü bir düğme: kumandada iç içe menü gezmek yerine
   tek tuşla değer değiştirmek daha kullanışlı. */
.profiles__alt{ display:flex; justify-content:center; gap:.7rem; margin-top:2rem; }
.profile--ekle .profile__face{ color:var(--muted); border:2px dashed var(--line-hi); }
.profile--ekle:hover .profile__face{ color:var(--text); border-style:solid; }

.pin__ipucu{ margin:0; font-size:var(--t-sm); color:var(--muted); text-align:center; }
.pin__alan{
  width:100%; padding:.7rem .8rem; border-radius:var(--r);
  background:var(--sunken); color:var(--text);
  border:1px solid var(--line); font-size:var(--t-md);
}
.pin__satir{ display:flex; gap:.6rem; }

.yonet{
  width:min(96vw, 62rem); max-height:88vh; overflow-y:auto;
  padding:1.75rem; border-radius:14px;
  background:var(--bg); border:1px solid var(--line-hi);
  display:grid; gap:1.1rem;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.yonet__baslik{ margin:0; font-size:var(--t-xl); font-weight:var(--w-bold); }
.yonet__govde{ display:grid; gap:.6rem; }

.yonet__satir{
  display:flex; flex-wrap:wrap; align-items:center; gap:.5rem;
  padding:.75rem; border-radius:var(--r);
  background:var(--surface); border:1px solid var(--line);
}
/* Ad kutusu BÜYÜMÜYOR. flex:1 ile büyüyünce satırı yiyor, ayar düğmeleri
   alt satıra kayıyor ve kumandayla sağa basınca onlara ulaşılamıyordu. */
.yonet__ad{
  flex:0 0 11rem; min-width:0; padding:.55rem .7rem; border-radius:6px;
  background:var(--sunken); color:var(--text);
  border:1px solid var(--line); font-size:var(--t-md);
}
.yonet__ayar{
  padding:.55rem .85rem; border-radius:6px; cursor:pointer;
  background:var(--surface2); color:var(--text);
  border:2px solid transparent; font-size:var(--t-sm); white-space:nowrap;
}
.yonet__ayar:hover{ background:var(--line-hi); }
.yonet__ayar:focus{ outline:none; border-color:var(--text); }
.yonet__kaydet,.yonet__sil{ padding:.55rem 1rem; font-size:var(--t-sm); }
.yonet__alt{ display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; }

@media (max-width:640px){
  .yonet__satir{ flex-direction:column; align-items:stretch; }
  .yonet__ayar,.yonet__kaydet,.yonet__sil{ width:100%; }
}

/* ── fragman penceresi ────────────────────────────────────── */

.modal{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:rgba(2,4,10,.88); backdrop-filter:blur(6px);
  padding:clamp(1rem,4vw,3rem);
}
.modal__box{ width:min(96vw, 1100px); }
.modal__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:.75rem;
}
.modal__title{ margin:0; font-size:clamp(1.1rem,1.6vw,1.4rem); font-weight:var(--w-bold); }
.modal__close{
  background:rgb(var(--ink-rgb) / .1); color:var(--text);
  border:1px solid var(--line-hi); border-radius:999px;
  width:2.5rem; height:2.5rem; font-size:var(--t-xl); cursor:pointer; line-height:1;
}
.modal__close:hover{ background:rgb(var(--ink-rgb) / .2); }
.modal__frame{
  position:relative; width:100%; aspect-ratio:16/9;
  background:#000; border-radius:var(--r); overflow:hidden;
  box-shadow:0 30px 70px rgba(0,0,0,.7);
}
.modal__frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ── oynatıcı ─────────────────────────────────────────────── */

.screen--player{ background:#000; }
.screen--player.is-active{ display:block; position:fixed; inset:0; cursor:none; }
.screen--player.ctrl-show{ cursor:default; }
#video { width:100%; height:100%; object-fit:contain; background:#000; pointer-events:none;
  transition:height .25s ease; }
.ctrl-show #video { height:calc(100% - 5rem); }
#video::-webkit-media-controls { display:none !important; }
#video::-webkit-media-controls-enclosure { display:none !important; }

/* ── oynatıcı arayüzü ─────────────────────────────────────── */

.pl{
  position:absolute; inset:0; z-index:2;
  display:grid; grid-template-rows:auto 1fr auto;
  opacity:1; transition:opacity .25s ease;
}
.pl.gizli{ opacity:0; pointer-events:none; }

.pl__top,.pl__bottom{
  padding:clamp(.9rem,2vw,1.6rem) clamp(1rem,3vw,2.5rem);
}
.pl__top{
  display:flex; align-items:center; gap:1rem;
  background:linear-gradient(180deg,rgba(0,0,0,.85),transparent);
}
.pl__title{ font-size:clamp(1.05rem,1.6vw,1.4rem); font-weight:var(--w-med); flex:1; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pl__badge{
  font-size:var(--t-xs); letter-spacing:.08em; text-transform:uppercase;
  padding:.25rem .6rem; border-radius:999px; color:var(--muted);
  background:rgb(var(--ink-rgb) / .1); border:1px solid var(--line-hi);
}

.pl__center{ display:flex; align-items:center; justify-content:center; gap:clamp(1.5rem,5vw,4rem);
  transition:opacity .2s ease; }
.pl.bekliyor .pl__center{ opacity:0; pointer-events:none; }
.pl__big{
  width:clamp(3.2rem,6vw,4.5rem); aspect-ratio:1; border-radius:50%;
  background:rgba(0,0,0,.45); color:#fff; border:2px solid transparent;
  font-size:clamp(1.2rem,2vw,1.7rem); cursor:pointer; line-height:1;
  transition:transform .15s, background .15s, border-color .15s;
}
.pl__big--main{ width:clamp(4.2rem,8vw,6rem); font-size:clamp(1.6rem,2.6vw,2.3rem); }
.pl__big:hover,.pl__big:focus{ background:rgb(var(--ink-rgb) / .2); border-color:#fff; transform:scale(1.08); outline:none; }

.pl__bottom{ background:linear-gradient(0deg,rgba(0,0,0,.9),transparent); display:grid; gap:.75rem; }

.pl__seek{
  position:relative; height:6px; border-radius:3px;
  background:rgb(var(--ink-rgb) / .22); cursor:pointer;
}
.pl__seek:focus{ outline:none; box-shadow:0 0 0 3px var(--accent-hi); }
.pl__buffer{ position:absolute; inset:0 auto 0 0; width:0; background:rgb(var(--ink-rgb) / .35); border-radius:3px; }
.pl__played{ position:absolute; inset:0 auto 0 0; width:0; background:var(--accent); border-radius:3px; }
.pl__played i{
  position:absolute; right:-7px; top:50%; transform:translateY(-50%);
  width:14px; height:14px; border-radius:50%; background:#fff;
}

.pl__row{ display:flex; align-items:center; gap:.6rem; }
.pl__spacer{ flex:1; }
.pl__time{ font-variant-numeric:tabular-nums; color:var(--muted); font-size:var(--t-sm); }
.pl__btn{
  background:rgb(var(--ink-rgb) / .12); color:#fff; border:1px solid transparent;
  border-radius:var(--r); padding:.5rem .9rem; font-size:var(--t-sm); cursor:pointer;
  transition:background .15s, border-color .15s;
}
.pl__btn:hover,.pl__btn:focus{ background:rgb(var(--ink-rgb) / .26); border-color:#fff; outline:none; }
.pl__btn[aria-expanded="true"]{ background:var(--accent); }

.pl__menu{
  position:absolute; right:clamp(1rem,3vw,2.5rem); bottom:clamp(4.5rem,9vw,7rem);
  min-width:14rem; max-height:50vh; overflow-y:auto;
  background:rgba(16,20,28,.97); border:1px solid var(--line-hi);
  border-radius:10px; padding:.4rem; z-index:3;
  box-shadow:0 20px 50px rgba(0,0,0,.7);
}
.pl__menu h4{ margin:.4rem .6rem .5rem; font-size:var(--t-xs); color:var(--muted);
  text-transform:uppercase; letter-spacing:.1em; }
.pl__opt{
  display:flex; align-items:center; gap:.6rem; width:100%;
  background:none; border:0; border-radius:6px; color:var(--text);
  padding:.6rem .7rem; font-size:var(--t-md); cursor:pointer; text-align:left;
}
.pl__opt:hover,.pl__opt:focus{ background:rgb(var(--ink-rgb) / .14); outline:none; }
.pl__opt[aria-checked="true"]{ color:var(--accent-hi); font-weight:var(--w-med); }
.pl__opt span:first-child{ width:1.1rem; flex:0 0 auto; }

/* Jeneriği atla: kontroller gizlense bile görünür kalmalı, bu yüzden
   .pl'nin dışında ve kendi z-index'inde duruyor. */
.pl__skip{ color:rgb(var(--bg-rgb));
  position:absolute; right:clamp(1rem,3vw,2.5rem); bottom:clamp(6rem,12vw,9rem);
  z-index:6; padding:.85rem 1.5rem; border-radius:var(--r);
  background:rgb(var(--ink-rgb) / .92); color:rgb(var(--bg-rgb));
  border:2px solid transparent; font-size:var(--t-lg); font-weight:var(--w-bold);
  cursor:pointer; box-shadow:0 10px 30px rgba(0,0,0,.6);
  transition:background .15s, transform .15s;
}
.pl__skip:hover,.pl__skip:focus{ background:var(--ink); transform:scale(1.04); border-color:var(--accent-hi); outline:none; }

.pl__spin{
  position:absolute; inset:0; z-index:4; display:grid; place-items:center;
  pointer-events:none;
}
.pl__spin[hidden]{ display:none; }
.pl__spin span{
  width:3rem; height:3rem; border-radius:50%;
  border:3px solid rgb(var(--ink-rgb) / .2); border-top-color:#fff;
  animation:donme .8s linear infinite;
}
@keyframes donme{ to{ transform:rotate(360deg) } }

.pl__error{
  position:absolute; inset:auto 0 auto 0; top:50%; transform:translateY(-50%);
  z-index:5; margin:0 auto; max-width:36rem; text-align:center;
  background:rgba(20,10,12,.95); border:1px solid rgba(229,72,77,.6);
  border-radius:10px; padding:1.5rem; color:#ffc9cc;
}

/* ── boş durumlar ─────────────────────────────────────────── */

.empty{ padding:4rem var(--rail); text-align:center; color:var(--muted); font-size:var(--t-lg); }
.empty code{
  display:inline-block; margin-top:.7rem; font-family:ui-monospace,monospace;
  font-size:var(--t-sm); color:var(--text); background:var(--surface);
  padding:.4rem .7rem; border:1px solid var(--line); border-radius:var(--r);
}

/* sonraki bölüm kartı */
.pl__next{
  position:absolute; bottom:7rem; right:2rem; z-index:20;
  background:rgba(0,0,0,.88); backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.15); border-radius:var(--r);
  padding:1rem 1.3rem; max-width:20rem;
  animation:nextSlide .35s ease-out;
}
@keyframes nextSlide{ from{opacity:0;transform:translateY(1rem)} to{opacity:1;transform:none} }
.pl__next-head{ font-size:var(--t-sm); opacity:.6; margin:0 0 .25rem; }
.pl__next-title{ font-weight:600; margin:0 0 .7rem; font-size:var(--t-base); }
.pl__next-btns{ display:flex; gap:.5rem; margin-bottom:.5rem; }
.btn--sm{ padding:.35rem .8rem; font-size:var(--t-sm); min-width:0; }
.pl__next-toggle{
  font-size:var(--t-sm); opacity:.7; cursor:pointer;
  display:flex; align-items:center; gap:.35rem; margin:0;
}
.pl__next-toggle input{ accent-color:var(--velvet,#7c4dff); }

@media (max-width:600px){
  .pl__next{ bottom:5rem; right:.8rem; left:.8rem; max-width:none; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}