/* frontend/lw-shared.css
 * ===========================================================================
 * LATENT — TASARIM SİSTEMİ (tek kaynak)
 * ---------------------------------------------------------------------------
 * Konsept: "Latent Space" — jeneratif bir modelin görüntüyü gürültüden (noise)
 * çözmeden önce hayal ettiği gizli uzay. Sinema ciddiyeti + teknik hassasiyet.
 *   · Fraunces (kontrast serif)  -> büyük başlıklar, editoryal/sinematik ton
 *   · Manrope                    -> gövde metni (kullanıcı isteği 2026-07-21:
 *                                   "yazıları daha şık bir fontta". Plus Jakarta
 *                                   Sans zincirde YEDEK olarak kaldı; Manrope
 *                                   yüklenemezse düzen aynı kalır. Site zaten
 *                                   admin/gizlilik/şartlar sayfalarında Manrope
 *                                   kullanıyordu -- bu değişiklik tutarlılığı
 *                                   ARTIRIYOR, yeni bir font ailesi eklemiyor.)
 *   · JetBrains Mono             -> eyebrow / veri / zaman kodu ("koordinat")
 *   · Turkuvaz = tek "sinyal" rengi (seyrek, güçlü)
 *   · Ember/amber = nadir sıcak karşıt (yalnız YENİ/CANLI/öne çıkan)
 *
 * Bu dosya artık gerçek TEK KAYNAK. Sayfalar <head>'de, sayfaya özel
 * <style>'dan ÖNCE şunu çağırır:
 *   <link rel="stylesheet" href="lw-shared.css">
 * ===========================================================================*/

:root{
  /* ---- Zemin (teal eğilimli, bilinçli seçilmiş "derin uzay" nötrleri) ---- */
  --void:#06080B;         /* en dip arka plan */
  --abyss:#0A0E12;        /* yükseltilmiş panel */
  --surface:#111820;      /* kart */
  --surface-2:#18212B;    /* kart hover / daha yüksek katman */

  /* ---- Sinyal (TURKUVAZ — sabit kimlik) ---- */
  --signal:#1C8998;
  --signal-bright:#00F2FE; /* çok seyrek: odak/glow */
  --signal-light:#5FC9D6;
  --signal-deep:#0E4750;

  /* ---- Ember (nadir sıcak karşıt) ---- */
  --ember:#FF9A52;
  --ember-deep:#E0762E;

  /* ---- Mürekkep / metin (soğuk eğilimli, düz gri değil) ---- */
  --ink:#F1F4F6;
  --haze:#8D9BA6;                       /* ikincil metin */
  --faint:rgba(241,244,246,0.55);
  --mist:rgba(241,244,246,0.6);         /* geriye dönük uyumluluk (eski ad) */

  /* ---- Çizgiler ---- */
  --line:rgba(255,255,255,0.07);
  --line-strong:rgba(255,255,255,0.12);
  --line-signal:rgba(28,137,152,0.30);
  --border-purple:var(--line-signal);   /* geriye dönük uyumluluk (eski ad) */

  /* ---- Yarıçap ---- */
  --radius-sm:8px;
  --radius-md:12px;
  --radius-lg:16px;
  --radius-xl:22px;

  /* ---- Gölge / ışıma ---- */
  --glow-signal:0 8px 44px -10px rgba(0,242,254,0.28);
  --glow-ember:0 8px 44px -12px rgba(255,154,82,0.30);
  --shadow-card:0 22px 55px -26px rgba(0,0,0,0.75);

  /* ---- Hareket ---- */
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,.05,.36,1);
  --dur-1:.18s;
  --dur-2:.34s;
  --dur-3:.6s;

  /* ---- Sol gezinme (sidebar) ----
     TEK KAYNAK. Eskiden 240px, YEDİ ayrı dosyada (lw-shared.css + 6 kabuk
     sayfasının kendi <style>'ı) DÖRDER kez tekrar edilen bir sabitti --
     birini değiştirip diğerini unutmak, sayfalar arasında gezinirken
     sidebar'ın "zıplaması" demekti. Değer 216px'e indirildi (kullanıcı
     isteği 2026-07-21: "sidebar en olarak biraz daha kısa olabilir");
     kazanılan genişlik doğrudan kart ızgarasına gidiyor. */
  --lw-sidebar-w:216px;

  /* ---- Font aileleri (TEK KAYNAK) ----
     Yeni yazılan kurallar bu değişkenleri kullanmalı. Eski kurallardaki
     'Manrope','Plus Jakarta Sans' zinciri bilerek literal bırakıldı: lw-shared.css'i
     YÜKLEMEYEN sayfalar (login-v1.html gibi) da doğru fontu alsın diye. */
  --font-body:'Manrope','Plus Jakarta Sans',system-ui,sans-serif;
  --font-display:'Fraunces','Georgia',serif;
  --font-mono:'JetBrains Mono',monospace;

  /* ---- Tip ölçeği (akışkan) ---- */
  --t-display:clamp(2.6rem,1.6rem + 4.6vw,5.25rem);
  --t-h1:clamp(2.1rem,1.4rem + 3vw,3.5rem);
  --t-h2:clamp(1.6rem,1.2rem + 1.8vw,2.4rem);
  --t-h3:clamp(1.15rem,1rem + 0.7vw,1.5rem);
  --t-body-l:1.125rem;
  --t-body:1rem;
  --t-caption:0.75rem;
}

*{ box-sizing:border-box; }

/* body'nin aşağıdaki sayfa-yükleme animasyonu sırasında (opacity 0->1)
   arkası kısa bir an gözükebiliyor -- html'e de aynı koyu zemin verilmezse
   o an beyaz/varsayılan tarayıcı rengi "sızar" (karanlık temada göze batan
   bir çakma). */
html{ scrollbar-gutter:stable; background:var(--void); }
/* YATAY KAYMA GÜVENLİK AĞI (kullanıcı raporu 2026-07-20: "sağdan soldan
   ekrana sabit değil kayıyor", ekran kaydıyla doğrulandı -- bazı anlarda
   gerçek bir yatay scrollbar çıkıyor, sütun sayısı viewport sabitken bile
   değişiyor gibi görünüyor). Tam tetikleyici izole edilemedi, ama HANGİ
   içerik parçası taşmaya sebep olursa olsun bu, sayfanın yatay kaymasını
   KESİN olarak engeller -- hiçbir yerde kasıtlı yatay sayfa kaydırma
   olmadığı için güvenli bir "dur" kuralı. */
html, body{ overflow-x:hidden; max-width:100vw; }

/* ===========================================================================
 * ŞELALE ZEMİN (.lw-cascade) — kullanıcı isteği 2026-07-21:
 * "en arka plan turkuvazdan ambere doğru giden bir şelale formu gibi olabilir"
 * ---------------------------------------------------------------------------
 * NEDEN DOM KATMANI: her shell sayfası kendi <style>'ında
 * `body{ background: radial(...), var(--void) }` tanımlıyor ve o blok
 * lw-shared.css'ten SONRA yükleniyor -- buradan verilecek bir body arka
 * planı 8 sayfada birden ezilirdi. Katmanı lw-sidebar.js enjekte eder
 * (8 shell sayfası). login/anasayfa kendi hero tasarımlarına sahip --
 * oralara bilerek girmiyor.
 *
 * DÜZELTME (ilk sürümde katman GÖRÜNMÜYORDU -- 2026-07-21, kullanıcı raporu
 * "şelale ambiyansı yok"): z-index:-1 olan bir çocuk, kök yığın bağlamı
 * içinde şu sırayla boyanır: (1) html'in arka planı, (2) NEGATİF z-index
 * öğeler, (3) konumlanmamış normal-akış öğelerinin (body dahil) arka planı.
 * body'nin KENDİ arka planı (3) katmanı, .lw-cascade'in (2) katmanının
 * ÜSTÜNE boyanıyordu -- yani body opak olduğu sürece katman baştan beri
 * hiç görünmüyordu (yalnızca varlığını doğrulamak yeterli değildi, ekran
 * görüntüsüyle piksel kıyaslaması gerekti). Çözüm aşağıda: .lw-has-cascade
 * eklenen sayfalarda body'nin arka planı şeffaflaştırılıyor, kararma
 * <html>'in (1) numaralı katmanından geliyor (sayfa-yüklemedeki beyaz
 * çakmayı önlemek için zaten var:var(--void)).
 * =========================================================================== */
.lw-cascade{
  position:fixed; inset:0; z-index:-1;
  pointer-events:none; overflow:hidden;
  contain:layout paint style;
}
/* body'nin KENDİ arka planı .lw-cascade'in üstüne boyandığı için (yukarıdaki
   not) burada şeffaflaştırılıyor. !important: per-page <style> blokları
   `body{background:...}` KISALTMASINI lw-shared.css'ten SONRA tanımlıyor;
   uzun-form (longhand) özellik + !important, hangi sırada/özgüllükte
   tanımlanmış olursa olsun kazanır. */
html.lw-has-cascade body{
  background-color:transparent !important;
  background-image:none !important;
}
/* Ana dikey geçiş: tepede turkuvaz, dipte amber. */
.lw-cascade::before{
  content:""; position:absolute; inset:0;
  /* 2026-07-21 GÜÇLENDİRME: ilk sürüm değerleri (canlıda hiç görünmeyen bir
     katman üzerinde ayarlanmıştı -- bkz. yukarıdaki "DÜZELTME" notu) gerçekte
     görünür hale gelince gözle fark edilmeyecek kadar zayıf çıktı. Alfa
     değerleri ~%40-60 artırıldı; hâlâ kartların önüne geçmeyecek kadar
     düşük ama artık kesinlikle FARK EDİLİYOR (piksel ölçümüyle doğrulandı). */
  background:
    radial-gradient(120% 55% at 50% -8%,  rgba(28,137,152,0.40), transparent 64%),
    radial-gradient(120% 55% at 50% 108%, rgba(224,118,46,0.36), transparent 64%),
    linear-gradient(180deg, rgba(14,71,80,0.30) 0%, rgba(6,8,11,0) 40%,
                            rgba(6,8,11,0) 56%, rgba(224,118,46,0.20) 100%);
}
/* Şelalenin dibi: ışığın dağıldığı sis. */
.lw-cascade::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:42vh;
  background:linear-gradient(180deg, transparent, rgba(224,118,46,0.16) 55%, rgba(6,8,11,0.88) 100%);
}
/* Dikey akıntılar. */
.lw-stream{
  position:absolute; top:-30%; height:160%;
  filter:blur(70px); opacity:.62;
  animation:lw-flow linear infinite;
  will-change:transform;
}
@keyframes lw-flow{ from{ transform:translate3d(0,-6%,0); } to{ transform:translate3d(0,6%,0); } }
.lw-stream.s1{ left:2%;  width:26%; animation-duration:26s; animation-direction:alternate;
  background:linear-gradient(180deg, rgba(0,242,254,.36), rgba(28,137,152,.18) 45%, rgba(255,154,82,.24) 100%); }
.lw-stream.s2{ left:28%; width:20%; animation-duration:34s; animation-direction:alternate-reverse;
  background:linear-gradient(180deg, rgba(28,137,152,.38), rgba(14,71,80,.10) 55%, rgba(224,118,46,.32) 100%); }
.lw-stream.s3{ left:52%; width:24%; animation-duration:30s; animation-direction:alternate;
  background:linear-gradient(180deg, rgba(95,201,214,.26), rgba(6,8,11,0) 50%, rgba(255,154,82,.30) 100%); }
.lw-stream.s4{ left:76%; width:22%; animation-duration:38s; animation-direction:alternate-reverse;
  background:linear-gradient(180deg, rgba(28,137,152,.32), rgba(6,8,11,0) 48%, rgba(224,118,46,.36) 100%); }
/* İnce film grenı: gradyanların "bantlaşmasını" (banding) kırar. */
.lw-grain{
  position:absolute; inset:0; opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.5'/></svg>");
}
@media (max-width:900px){
  .lw-stream{ filter:blur(46px); opacity:.42; }
  .lw-stream.s2, .lw-stream.s4{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .lw-stream{ animation:none; }
}

/* MOBİL "BÜYÜYÜP KÜÇÜLME" (kullanıcı raporu 2026-07-20: "banner/film alanı
   bir küçülüp bir büyüyor, ilk başta sayfaya sığmıyor, kaydırınca düzeliyor"):
   <body class="min-h-screen"> -> min-height:100vh. Mobil tarayıcılarda adres
   çubuğu kaydırırken gizlenip/gösterildikçe 100vh YENİDEN HESAPLANIYOR --
   sayfa ilk açıldığında (çubuk GÖRÜNÜRKEN) gerçek görünür alan 100vh'tan
   KÜÇÜK olur, kaydırılıp çubuk gizlenince alan büyür. 100dvh (dynamic
   viewport height) adres çubuğunun anlık durumunu takip eder, aynı sorunu
   yaşamaz. "body.min-h-screen" (etiket+sınıf) kullanılıyor çünkü salt
   "body" seçicisi Tailwind'in .min-h-screen sınıfını (özgüllükte sınıf >
   etiket) yenemezdi. Eski tarayıcılar dvh'yi tanımazsa bu satırı yok sayar,
   üstteki min-h-screen'in normal 100vh'ı fallback olarak kalır. */
body.min-h-screen{ min-height:100dvh; }

/* Arama önerileri açılır paneli (7 sayfada ortak #searchSuggestions):
   HTML'de Tailwind'in max-h-[70vh] sınıfı kullanılıyor -- aynı mobil
   adres çubuğu sorunu (bkz. yukarısı). max-h-[70dvh] YENİ bir Tailwind
   ihtimal sınıfı olur, önceden derlenmiş tailwind.css'te YOK, sessizce
   çalışmaz -- bu yüzden ID ile açık CSS override yazılıyor. */
#searchSuggestions{ max-height:70dvh; }

body{
  background:
    radial-gradient(ellipse 1100px 620px at 12% -8%, rgba(0,242,254,0.055), transparent 60%),
    radial-gradient(ellipse 900px 500px at 100% 0%, rgba(255,154,82,0.035), transparent 55%),
    var(--void);
  color:var(--ink);
  font-family:'Manrope','Plus Jakarta Sans',system-ui,sans-serif;
  font-size:var(--t-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* ---------- Film greni: latent-noise + sinema dokusu ---------- */
/* feTurbulence tabanlı çok düşük opasiteli sabit katman -- konsepti taşır,
   pointer-events yok, içeriği asla engellemez. */
.lw-grain{
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:0.035;
  mix-blend-mode:screen;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* =========================================================================
 * TİPOGRAFİ
 * =======================================================================*/
.t-eyebrow{
  font-family:'JetBrains Mono',monospace;
  font-size:var(--t-caption);
  font-weight:500;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--signal-light);
  display:inline-flex; align-items:center; gap:9px;
}
.t-eyebrow::before{
  content:"";
  width:6px; height:6px; border-radius:50%;
  background:var(--signal-light);
  box-shadow:0 0 0 4px rgba(95,201,214,0.14);
}
.t-eyebrow.is-ember{ color:var(--ember); }
.t-eyebrow.is-ember::before{ background:var(--ember); box-shadow:0 0 0 4px rgba(255,154,82,0.16); }
.t-eyebrow.no-dot::before{ display:none; }

.font-display,
.t-display,.t-h1,.t-h2,.t-h3{
  font-family:'Fraunces','Georgia',serif;
  font-optical-sizing:auto;
  text-wrap:balance;
}
.t-display{
  font-size:var(--t-display);
  font-weight:340;
  line-height:1.015;
  letter-spacing:-0.021em;
}
.t-h1{ font-size:var(--t-h1); font-weight:360; line-height:1.06; letter-spacing:-0.018em; }
.t-h2{ font-size:var(--t-h2); font-weight:380; line-height:1.1;  letter-spacing:-0.014em; }
.t-h3{ font-size:var(--t-h3); font-weight:500; line-height:1.2;  letter-spacing:-0.008em; }

/* Fraunces italik: vurgu kelimeleri için "sinematik" dokunuş */
.t-em{ font-style:italic; font-weight:360; }

/* Sinyal (turkuvaz) vurgu kelimesi */
.t-signal{
  color:transparent;
  background:linear-gradient(105deg,var(--signal-light) 8%,var(--signal-bright) 92%);
  -webkit-background-clip:text; background-clip:text;
}
/* eski ad */
.gradient-text{ color:var(--signal-light); }

.t-body{ font-family:'Manrope','Plus Jakarta Sans',sans-serif; }
.t-body-l{ font-size:var(--t-body-l); line-height:1.65; }
.t-lead{ font-size:var(--t-body-l); color:var(--haze); line-height:1.7; max-width:60ch; }
.t-mono{ font-family:'JetBrains Mono',monospace; }
.font-mono{ font-family:'JetBrains Mono',monospace; }
.t-muted{ color:var(--haze); }

/* Marka logosu tipografisi (mevcut sayfalarla uyum için korunur) */
.font-brand{
  font-family:'Orbitron',sans-serif;
  font-weight:800; letter-spacing:0.01em; line-height:1;
  display:inline-block;
  background:linear-gradient(100deg,#F1F4F6 20%,var(--signal-light) 70%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  /* FOUT DÜZELTMESİ -- bkz. filmler.html'deki aynı kural için not.
     lw-i18n.js, document.fonts.ready ile 'lw-fonts-ready' ekler. */
  opacity:0; transition:opacity .25s ease;
}
html.lw-fonts-ready .font-brand{ opacity:1; }

svg{ stroke-width:1.5; }

/* =========================================================================
 * DURUM ROZETLERİ (chip)
 * =======================================================================*/
.chip{
  display:inline-flex; align-items:center; gap:7px;
  font-family:'JetBrains Mono',monospace;
  font-size:0.66rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase;
  padding:5px 11px; border-radius:999px;
  border:1px solid var(--line-strong);
  color:var(--haze); background:rgba(255,255,255,0.03);
}
.chip-signal{ color:var(--signal-light); border-color:var(--line-signal); background:rgba(28,137,152,0.08); }
.chip-ember{ color:var(--ember); border-color:rgba(255,154,82,0.35); background:rgba(255,154,82,0.08); }
.chip .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.chip-ember .dot{ animation:lw-pulse 2s var(--ease-in-out) infinite; }

/* =========================================================================
 * HEADER (cam)
 * =======================================================================*/
.header-glass{
  background:rgba(6,8,11,0.5);
  backdrop-filter:blur(16px);
  transition:background var(--dur-2) ease, backdrop-filter var(--dur-2) ease;
}
.header-glass.is-scrolled{
  background:rgba(6,8,11,0.86);
  backdrop-filter:blur(22px);
  border-bottom:1px solid var(--line);
}

/* DAR EKRAN TASMA DUZELTMESI (kullanici raporu: mobil hamburger ikonu
   "kotu duruyor", 2026-07-17 -- ikonu duzgun bir daire butona cevirince
   ~320px genislikteki eski/kucuk telefonlarda logo ile arama ikonu ust
   uste binmeye basladi: header'daki butonlar artik sabit genislikte
   (oncesinde icerige gore kuculuyorlardi, bu da ikonlarin "cipsiz"
   gorunmesine sebep oluyordu). Cozum: cok dar ekranlarda logo ve
   bosluklari biraz kisalt, boylece hicbir eleman ust uste binmez. */
@media (max-width:360px){
  .header-glass img[alt="LatentWorld logosu"]{ height:1.65rem; }
  .header-glass .gap-2{ gap:0.25rem; }
  .header-glass .gap-4{ gap:0.375rem; }
}

/* =========================================================================
 * BUTONLAR
 * =======================================================================*/
.btn-primary{
  background:linear-gradient(135deg,var(--signal-deep),var(--signal));
  color:#F1F4F6;
  border-radius:var(--radius-md);
  transition:box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease), filter var(--dur-1) ease;
}
.btn-primary:hover{ box-shadow:var(--glow-signal); transform:translateY(-1px); filter:brightness(1.08); }
.btn-primary:active{ transform:translateY(0); filter:brightness(0.98); }
/* rounded-full ile isaretlenmis .btn-primary butonlari TAM PILL olsun.
   Kok neden (kullanici el notu 2026-07-20, hero butonlari): yukaridaki
   .btn-primary{border-radius:var(--radius-md)} (10px) kurali, tailwind.css'ten
   SONRA yuklendigi icin butondaki `rounded-full` (9999px) utility'sini eziyordu
   -- teal .btn-primary yuvarlatilmis DIKDORTGEN, yanindaki .btn-white ise tam
   PILL goruluyordu (iki buton farkli geometri). Bu kural (ozgullugu daha yuksek:
   0,2,0) sadece rounded-full TASIYAN primary butonlari -- yani bilerek pill
   yapilmis hero/CTA butonlarini -- tam pill'e sabitler; form gonder butonlari
   (rounded-xl/lg) etkilenmez. */
.btn-primary.rounded-full{ border-radius:9999px; }

.btn-dark{
  background:rgba(255,255,255,0.05);
  border:1px solid var(--line);
  color:#fff; border-radius:var(--radius-md);
  transition:background var(--dur-1) ease, box-shadow var(--dur-2) ease, transform var(--dur-1) var(--ease);
}
.btn-dark:hover{ background:rgba(255,255,255,0.1); box-shadow:0 4px 20px rgba(0,242,254,0.1); transform:translateY(-1px); }

/* Hayalet buton: ince çerçeve, sinyal hover */
.btn-ghost{
  background:transparent;
  border:1px solid var(--line-strong);
  color:var(--ink); border-radius:var(--radius-md);
  transition:border-color var(--dur-1) ease, color var(--dur-1) ease, background var(--dur-1) ease;
}
.btn-ghost:hover{ border-color:var(--signal-light); color:var(--signal-light); background:rgba(28,137,152,0.06); }

/* Ok çipi (mevcut sayfalarda kullanılıyor) */
.arrow-chip{ display:inline-block; transition:transform var(--dur-1) var(--ease); }
.btn-primary:hover .arrow-chip,
.btn-ghost:hover .arrow-chip,
.btn-dark:hover .arrow-chip{ transform:translateX(3px); }

.icon-circle{
  width:42px; height:42px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05);
  backdrop-filter:blur(12px);
  border:1px solid var(--line);
  transition:background var(--dur-1) ease, transform var(--dur-1) var(--ease), box-shadow var(--dur-2) ease;
}
.icon-circle:hover{ background:rgba(255,255,255,0.1); transform:translateY(-2px); box-shadow:var(--glow-signal); }

/* =========================================================================
 * FORM
 * =======================================================================*/
.input-line{
  background:rgba(255,255,255,0.03);
  border:1px solid var(--line-signal);
  border-radius:var(--radius-md);
  color:var(--ink);
  transition:border-color var(--dur-1) ease, box-shadow var(--dur-1) ease;
}
.input-line::placeholder{ color:rgba(241,244,246,0.4); }
.input-line:focus{
  outline:none;
  border-color:var(--signal-light);
  box-shadow:0 0 0 3px rgba(0,242,254,0.15);
}

/* Klavye odağı: her yerde görünür sinyal halkası */
:focus-visible{ outline:2px solid var(--signal-light); outline-offset:2px; border-radius:4px; }

/* =========================================================================
 * FİLM KARTI — çözünme (resolve) + hover koreografisi
 * =======================================================================*/
.film-card{
  position:relative;
  display:block;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--surface);
  border:1px solid var(--line);
  transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) ease, border-color var(--dur-2) ease;
  will-change:transform;
}
.film-card:hover{
  transform:translateY(-6px);
  border-color:var(--line-signal);
  box-shadow:var(--shadow-card),var(--glow-signal);
}
.film-card .poster{
  position:relative;
  aspect-ratio:16/9;
  overflow:hidden;
  background:linear-gradient(135deg,var(--surface-2),var(--abyss));
}
.film-card .poster img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform var(--dur-3) var(--ease), filter var(--dur-2) ease;
}
.film-card:hover .poster img{ transform:scale(1.06); }
/* hover'da üstten geçen ince tarama ışığı (latent "decode" hissi) */
.film-card .poster::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(115deg,transparent 30%,rgba(95,201,214,0.14) 50%,transparent 70%);
  transform:translateX(-120%);
  transition:transform var(--dur-3) var(--ease);
  pointer-events:none;
}
.film-card:hover .poster::after{ transform:translateX(120%); }
.film-card .card-body{ padding:14px 15px 16px; }
.film-card .card-title{
  font-family:'Manrope','Plus Jakarta Sans',sans-serif; font-weight:700;
  font-size:0.98rem; letter-spacing:-0.01em; color:var(--ink);
  transition:color var(--dur-1) ease;
}
.film-card:hover .card-title{ color:var(--signal-light); }
.film-card .card-meta{
  font-family:'JetBrains Mono',monospace; font-size:0.72rem;
  color:var(--haze); margin-top:5px; display:flex; align-items:center; gap:8px;
}
/* köşe zaman-kodu rozeti */
.film-card .timecode{
  position:absolute; bottom:8px; right:8px;
  font-family:'JetBrains Mono',monospace; font-size:0.66rem;
  padding:2px 7px; border-radius:6px;
  background:rgba(6,8,11,0.72); backdrop-filter:blur(6px);
  color:var(--ink); border:1px solid var(--line);
}

/* Hairline bölücü */
.hairline{ height:1px; background:var(--line); border:0; }

/* =========================================================================
 * HAREKET — reveal & resolve (prefers-reduced-motion ile korumalı)
 * =======================================================================*/
@keyframes lw-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:0.35; } }

/* NOT: sayfa-yükleme fade-in'i (body{animation:...}) buradan KALDIRILDI --
   asıl yavaşlığın kaynağı animasyon süresi değil, statik varlıkların
   (i18n paketleri, css, js) her gezinmede önbelleksiz yeniden indirilmesiydi
   (bkz. static-server.js). Animasyon o gecikmenin ÜSTÜNE binince "yavaş +
   fark ediliyor" hissi ikiye katlanıyordu. Kök nedeni (önbellek) çözdükten
   sonra gezinme zaten hızlı; üstüne yapay bir gecikme eklemeye gerek yok.
   View Transitions API (@view-transition) ile TAM crossfade da denenmişti
   ama playlists.html'de render kilidine (donma) yol açtığı için kaldırıldı
   (bkz. aşağıdaki not). */
@media (prefers-reduced-motion:no-preference){
  /* Aşağıdan beliren blok (scroll ya da yükleme) */
  .reveal-up{ opacity:0; transform:translateY(16px); }
  .reveal-up.in{ animation:lw-reveal-up var(--dur-3) var(--ease) forwards; }
  @keyframes lw-reveal-up{ to{ opacity:1; transform:none; } }

  /* "Çözünme": görsel gürültüden nete geçer (latent decode) */
  .resolve{ opacity:0; }
  .resolve.in{ animation:lw-resolve .7s var(--ease) forwards; }
  @keyframes lw-resolve{
    0%{ opacity:0; filter:blur(14px) saturate(0.5); transform:scale(1.04); }
    100%{ opacity:1; filter:blur(0) saturate(1); transform:none; }
  }

  /* Kademeli gecikmeler */
  .delay-1{ animation-delay:.06s; }
  .delay-2{ animation-delay:.14s; }
  .delay-3{ animation-delay:.22s; }
  .delay-4{ animation-delay:.30s; }
  .delay-5{ animation-delay:.38s; }
}
@media (prefers-reduced-motion:reduce){
  .reveal-up,.resolve{ opacity:1 !important; transform:none !important; filter:none !important; }
}

/* =========================================================================
 * SIDEBAR (YouTube tarzı, cam) — mevcut sayfalarla birebir uyumlu
 * =======================================================================*/
.sidebar{
  position:fixed; top:72px; left:0; bottom:0;
  width:var(--lw-sidebar-w);
  background:rgba(6,8,11,0.72);
  backdrop-filter:blur(20px);
  border-right:1px solid var(--line);
  z-index:40; overflow-y:auto;
  transition:width .2s ease;
  scrollbar-width:none;
  /* Ekran kaydı incelemesi (2026-07-20, hatalar/ klasöründeki donma videosu):
     art arda hızlı tıklarken fare mousedown+mouseup arasında 1-2px kayıyor
     -- tarayıcı bunu METİN SEÇİMİ sanıp bir öğeyi (ör. "Filmler") mavi
     seçim rengiyle boyuyordu. Navigasyon kilidiyle (lw-sidebar.js) ilgisi
     yok -- click'ten ÖNCE (mousedown/mousemove sırasında) oluşuyor, click
     bazlı hiçbir JS onu yakalayamaz. Kalıcı çözüm: sidebar metnini hiç
     seçilebilir yapma. */
  user-select:none; -webkit-user-select:none;
}
.sidebar::-webkit-scrollbar{ width:6px; }
.sidebar::-webkit-scrollbar-thumb{ background:transparent; border-radius:9999px; }
.sidebar:hover{ scrollbar-width:thin; scrollbar-color:var(--signal) transparent; }
.sidebar:hover::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,var(--signal-light) 0%,var(--signal) 55%,var(--ember-deep) 100%); }
.sidebar.collapsed{ width:76px; }
/* RAFINE (kullanıcı isteği 2026-07-21: "sidebar biraz daha kibar dursun").
   Yapı/hizalama DEĞİŞMEDİ -- yalnızca ağırlık düştü: yazı 14 -> 13.5px, ikon
   boşluğu 20 -> 16px, köşeler tam hap, hover teması yumuşadı ve aktif öğenin
   3px'lik sert turkuvaz şeridi 2px'e inip yumuşak bir ışıma kazandı.
   padding-left:20px'e DOKUNULMADI: açık/kapalı ikon hizası ona bağlı
   (bkz. aşağıdaki "İKON KAYMASI DÜZELTMESİ" notu). */
.sidebar-item{
  display:flex; align-items:center; gap:16px;
  padding:11px 20px;
  color:var(--ink); font-size:13.5px; font-weight:500; letter-spacing:.004em;
  border-radius:0 999px 999px 0; margin-right:8px;
  cursor:pointer;
  /* PERFORMANS (kullanıcı raporu 2026-07-19: "sidebar kapanırken kasılıyor"):
     .sidebar{width} 0.2s'de ANİMASYONLU değişirken, .sidebar.collapsed
     .sidebar-item{padding/margin/border-radius} class eklenir eklenmez ANINDA
     uygulanıyordu -- düzen genişlikten önce "zıplıyordu". Bunları da width ile
     AYNI sürede transition listesine alarak sayısal olduklarından width ile
     BİRLİKTE yumuşakça arada değer almalarını sağlıyoruz (ayrıca aşağıdaki
     ikon kayması düzeltmesiyle birlikte artık zıplayacak bir HİZALAMA
     DEĞİŞİKLİĞİ de yok -- bkz. .sidebar.collapsed .sidebar-item notu). */
  transition:background .15s ease, box-shadow .15s ease,
             padding .2s, margin .2s, border-radius .2s;
  white-space:nowrap; overflow:hidden;
}
/* İKON KAYMASI DÜZELTMESİ (kullanıcı raporu 2026-07-19: "ikonların yeri açık/
   kapalıyken aynı değil, açılırken sağa kayıyor, ikonlar sabit olmalı"):
   ÖNCEKİ hâlde kapalı durum justify-content:center + padding:13px 0 (sol
   boşluk YOK) kullanıyordu, açık durum ise justify-content:flex-start (varsayılan)
   + padding-left:20px kullanıyordu -- yani ikon iki farklı HİZALAMA MODELİYLE
   konumlanıyordu (dar kutuda ORTALAMA vs sabit SOL BOŞLUK), bu da genişlik
   animasyonu boyunca ikonun X konumunun kaymasına neden oluyordu. Çözüm: her
   iki durumda da AYNI sol boşluğu (padding-left:20px) ve AYNI hizalamayı
   (flex-start, varsayılan) kullanmak -- ikon artık iki durumda da SIDEBAR'IN
   SOL KENARINDAN AYNI MESAFEDE, hiç kaymadan sabit kalır; yalnızca sağındaki
   etiket alanı ve konteyner genişliği değişir. margin-left de 0'da SABİT
   tutulur (önceden kapalı durumda 8px ekleniyordu, bu da ek bir kaymaya
   neden oluyordu). */
.sidebar.collapsed .sidebar-item{ padding:13px 20px; border-radius:8px; margin:2px 8px 2px 0; }
.sidebar-item:hover{ background:rgba(255,255,255,0.05); }
.sidebar-item.active{
  background:linear-gradient(90deg, rgba(0,242,254,0.09), rgba(0,242,254,0.02) 62%, transparent);
  color:#fff; font-weight:600;
  box-shadow:inset 2px 0 0 0 var(--signal-bright);
}
.sidebar-item svg{ flex-shrink:0; }
/* İKON ÇİZGİ KALINLIĞI (kullanıcı isteği 2026-07-21: "sidebardaki ikonların
   beyaz çizgileri biraz kalın olsun ama abartma"): markup'ta stroke-width="2"
   yazıyor, CSS sunum niteliğini ezer -- yani ~8 shell sayfasındaki onlarca
   inline SVG'ye dokunmadan tek yerden ayarlanıyor. 2 -> 2.2: gözle fark
   edilir ama alt bardaki "etli" ikonlar gibi kalınlaşmaz (bilinçli olarak
   ölçülü tutuldu). */
.sidebar-item svg,
.sidebar-heading svg,
.sidebar-showmore svg{ stroke-width:2.2; }
/* HİZALAMA (kullanıcı raporu 2026-07-20: "sidebar açma ikonu ile sidebardaki
   ikonlar aynı sıraya gelsin"): sidebar-item ikonu sabit 20px sol boşlukta
   başlıyor (yukarıdaki padding:11px 20px). #sidebarToggle ise 36px'lik
   yuvarlak buton içinde 22px ikonu ORTALIYOR (7px iç boşluk) + header'ın
   kendi dolgusu (px-6 = 24px, sidebar sabitlendiği ≥901px'te aktif) --
   toplamda ikon 31px'te kalıyor, sidebar'ın 20px'i ile hizasız. Farkı
   (11px) butona negatif margin ile kapatıyoruz; yalnızca sidebar'ın DOCK
   olduğu ≥901px'te (altında off-canvas çekmece, hizalama önemsiz). */
@media (min-width:901px){
  #sidebarToggle{ margin-left:-11px; }
}
.sidebar-divider{ height:1px; background:transparent; margin:8px 20px; }
/* KRİTİK (kullanıcı raporu 2026-07-18/19, video ile doğrulandı: "sadece Takip
   Ettikleriniz kısmı, sidebar açılıp kapanırken"): .sidebar{transition:width .2s}
   ile genişlik 76px<->240px arası ANİMASYONLA değişiyor, ama .collapsed sınıfı
   ekleniyor/kaldırılıyor KLASİK (senkron) -- yani .sidebar-label{display:none/block}
   ANINDA uygulanıyor. KAPANIRKEN sorun yok (metin anında gizleniyor, genişlik
   ondan sonra küçülüyor). AÇILIRKEN ise metin ANINDA görünür oluyor ama konteyner
   HENÜZ dar (200ms'lik animasyonun başında) -- "Sign in to see your subscriptions
   list." / "Show more" gibi uzun metinler bu dar alana sıkışıp ÇOK SATIRA
   BÖLÜNÜYOR, altındaki her şeyi aşağı itip geri topluyor (görünen "sıçrama/
   takılma"). Nav öğeleri (.sidebar-item{overflow:hidden;white-space:nowrap})
   zaten korumalı olduğu için ETKİLENMİYOR; Takip Ettikleriniz metinleri
   (başlık/mesaj/"Daha fazla göster") bu korumadan yoksundu. nowrap+ellipsis tüm
   .sidebar-label kullanımlarını (nav dahil) kalıcı olarak tek satıra sabitler --
   geçişte artık sarılacak metin YOK, dolayısıyla sıçrama da yok. */
.sidebar-label{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.sidebar.collapsed .sidebar-label{ display:none; }
/* Kullanıcı raporu 2026-07-19 (ekran görüntüsü): "Takip Ettikleriniz" başlığının
   İKONU yoktu -- sidebar kapandığında diğer öğeler gibi ikon-only satır olarak
   KALMAK yerine tamamen kayboluyordu (tutarsız). Artık .sidebar-item ile aynı
   dilde bir ikon taşıyor (gap tabanlı düzen, sabit sol boşluk -- diğer
   ikonlarla AYNI x=20px hizasında, bkz. ikon kayması düzeltmesi) ve chevron
   sağa margin-left:auto ile itiliyor (justify-content:space-between yerine --
   3 çocuklu bir satırda space-between icon/chevron'u UÇLARA, label'ı ortaya
   iterdi, istenmeyen). */
.sidebar-heading{
  display:flex; align-items:center; gap:16px;
  padding:14px 20px 6px; font-size:13.5px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:background .15s ease;
}
.sidebar-heading:hover{ background:rgba(255,255,255,0.05); }
.sidebar-heading svg{ flex-shrink:0; }
.sidebar-heading .sh-chev{ opacity:0.55; margin-left:auto; }
.sidebar-avatar{
  width:24px; height:24px; border-radius:9999px;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:#fff; flex-shrink:0;
}
/* "Takip Ettikleriniz" başlığı artık KOLLAPS OLDUĞUNDA da diğer .sidebar-item'lar
   gibi ikon-only satır olarak KALIR (önceden .sidebar-section ile birlikte
   tamamen gizleniyordu). Aynı sabit sol boşluğu/padding'i .sidebar-item ile
   paylaşır (bkz. ikon kayması düzeltmesi) -- ikon iki durumda da AYNI x
   konumunda. Chevron (sh-chev) ve altındaki liste/mesaj (.sidebar-section)
   hâlâ gizlenir -- collapsed'de yer yok. */
.sidebar.collapsed .sidebar-heading{ padding:13px 20px; border-radius:8px; margin:2px 8px 2px 0; }
.sidebar.collapsed .sidebar-heading .sh-chev{ display:none; }
/* "Siz" / "Keşfet": yalnızca bölüm etiketi, ALTINDAKİ öğeleri gruplar --
   tıklanabilir DEĞİL. Eskiden .sidebar-heading'di (ikonlu + hover'lı, yani
   TIKLANABİLİR görünüyordu ama onclick YOKTU) -- kullanıcı raporu
   (2026-07-20): "siz ve keşfet ikonlarına basınca bir yere götürmüyor".
   "Takip Ettikleriniz" başlığının aksine bu ikisinin altında birbirinden
   FARKLI hedeflere giden birden çok öğe var -- tek bir "doğru" tıklama
   hedefi yok, o yüzden ikon + tıklanabilirlik görünümü tamamen kaldırıldı;
   küçük, ikonsuz, büyük harf bir etikete indirgendi (mobildeki "Keşfet"
   panelinin .sh-label'ıyla aynı dil, aşağıda). Kollaps sırasında (diğer
   .sidebar-item/.sidebar-heading'in aksine) ikon-only satır olarak KALMAZ,
   .sidebar-section gibi TAMAMEN gizlenir -- ortada kayacak bir ikonu
   olmadığı için bu, ikon kayması sorununa (yukarıdaki not) hiç girmez. */
.sidebar-section-label{
  padding:16px 20px 6px;
  font-family:'JetBrains Mono',monospace;
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--haze, var(--mist, #8d9ba6));
  opacity:0.55;
}
.sidebar.collapsed .sidebar-section-label{ display:none; }
.sidebar.collapsed .sidebar-section{ display:none; }
.sidebar-showmore{
  display:flex; align-items:center; gap:16px;
  padding:9px 20px; color:var(--haze); font-size:12.5px; font-weight:500;
  cursor:pointer; border-radius:0 999px 999px 0; margin-right:8px;
}
.sidebar-showmore:hover{ background:rgba(255,255,255,0.05); color:#fff; }
/* KRİTİK (kullanıcı raporu 2026-07-18: "Takip Ettikleriniz altında 'Daha fazla
   göster' hep görünüyor -- anon'da da, kayıt olduktan sonra da"): yukarıdaki
   .sidebar-showmore{display:flex}, AYNI özgüllükteki Tailwind .hidden{display:none}'dan
   SONRA yüklendiği için onu EZİYORDU. lw-sidebar.js render'da followingShowMore'a
   'hidden' sınıfını eklese bile (anon / 0 takip / ≤3 takip durumlarında) buton
   gizlenmiyordu. Bileşik seçici (0,2,0) iki tek-sınıflı kuralı da geçer -- kaynak
   sırasından bağımsız kazanır. (Aynı desen .lw-lang-switcher.hidden'da da var.) */
.sidebar-showmore.hidden{ display:none; }
.sidebar.collapsed .sidebar-showmore{ display:none; }
.sidebar-collapsible{ display:none; }
.sidebar-collapsible.expanded{ display:flex; }
.main-shifted{ margin-left:var(--lw-sidebar-w); transition:margin-left .2s ease; }
.main-shifted.collapsed{ margin-left:76px; }

/* ===========================================================================
 * DİL SEÇİCİ (lw-i18n.js tarafından [data-lw-lang-switcher] içine basılır)
 * Header, mobil menü, footer -- kaç tane olursa olsun hepsi aynı görünür ve
 * AYNI global state'i okur. Bkz. lw-i18n.js -> renderSwitchers().
 * =========================================================================== */
.lw-lang-switcher{ position:relative; display:inline-block; }

.lw-lang-btn{
  display:flex; align-items:center; gap:6px;
  font-size:13px; font-weight:600; color:rgba(241,244,246,0.9);
  padding:6px 10px; border-radius:9999px;
  background:transparent; border:1px solid transparent;
  cursor:pointer;
  transition:background .18s var(--ease), border-color .18s var(--ease), color .18s var(--ease);
}
.lw-lang-btn:hover{
  background:rgba(95,201,214,0.10);
  border-color:rgba(95,201,214,0.35);
  color:#fff;
}
.lw-lang-btn[aria-expanded="true"]{
  background:rgba(95,201,214,0.14);
  border-color:rgba(95,201,214,0.45);
}

.lw-lang-menu{
  position:absolute; right:0; top:calc(100% + 8px); z-index:300;
  min-width:11rem; padding:6px;
  background:var(--abyss);
  border:1px solid var(--line-strong);
  border-radius:var(--radius-md);
  box-shadow:0 18px 44px -14px rgba(0,0,0,0.8);
}
.lw-lang-menu[hidden]{ display:none; }

.lw-lang-option{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  width:100%; padding:9px 12px;
  font-size:14px; text-align:left; color:var(--ink);
  background:transparent; border:0; border-radius:var(--radius-sm);
  cursor:pointer; transition:background .14s var(--ease);
}
.lw-lang-option:hover{ background:rgba(255,255,255,0.06); }
.lw-lang-check{ color:var(--signal-light); font-weight:700; visibility:hidden; }

/* Header'daki seçici konteyneri `hidden sm:inline-block` taşır (dar ekranda
   gizlenmeli) -- ama yukarıdaki .lw-lang-switcher{display:inline-block}
   kuralı, aynı özgüllükteki Tailwind .hidden'dan SONRA geldiği için onu
   eziyordu: seçici 640px altında da görünüp logonun üstüne biniyordu
   (Playwright ile 390px'te doğrulandı, 2026-07-17). Bileşik seçici
   (0,2,0) iki tek-sınıflı kuralı da geçer; 640px+ Tailwind'in
   sm:inline-block davranışını aynen geri verir. */
.lw-lang-switcher.hidden{ display:none; }
@media (min-width:640px){
  .lw-lang-switcher.hidden{ display:inline-block; }
}

/* SIDEBAR AÇ/KAPA JANK DÜZELTMESİ (masaüstü + mobil, kullanıcı raporu 2026-07-18):
   .sidebar'daki backdrop-filter:blur(20px), MASAÜSTÜNDE collapse/expand'ın
   GENİŞLİK animasyonu boyunca (ve mobilde drawer kayarken) HER KARE yeniden
   rasterize oluyordu -> "takılarak açılıyor". Masaüstünde sidebar sabit bir sol
   raftır ve ARKASINDA içerik yoktur (içerik margin-left ile sağda) -- blur
   yalnızca koyu gövde zeminini bulanıklaştırır: görsel etkisi yok denecek kadar
   az ama pahalı. HER GENİŞLİKTE blur'u kaldırıp düz opak zemin kullanıyoruz;
   aç/kapa akıcı olur. (Sayfalar sidebar CSS'ini INLINE kopyaladığından ve inline
   <style> bu dosyadan SONRA geldiğinden, override ancak !important ile kazanır.) */
.sidebar{
  background:#0b0e13 !important;
  -webkit-backdrop-filter:none !important; backdrop-filter:none !important;
}

@media (max-width:900px){
  /* Mobil drawer da yukarıdaki blur kaldırma sayesinde akıcı; ek olarak
     açılışı GPU'da kompozit edilen bir transform geçişine bağlıyoruz. */
  .sidebar{
    transform:translateX(-100%);
    transition:transform .24s cubic-bezier(.22,.61,.36,1) !important;
    will-change:transform;
  }
  /* z-index:60 ŞART (kullanıcı raporu + telefon ekran görüntüsü, 2026-07-17:
     "sidebar açılıyor ama işlem yapamıyorum"): sayfalardaki #mobileOverlay
     z-50, sidebar'ın kendisi z-40'tı -- karartma katmanı SIDEBAR'IN DA
     üstüne biniyor, dokunuşlar öğelere hiç ulaşmadan overlay'e gidiyordu
     (overlay'in tıklaması da menüyü kapattığı için menü "çalışmıyor"
     görünüyordu). Açıkken sidebar overlay'in üstünde olmalı; overlay
     sayfanın kalanını (header dâhil) karartmaya devam eder. */
  .sidebar.mobile-open{ transform:translateX(0); z-index:60; }
  .main-shifted{ margin-left:0 !important; }

  /* Mobilde gezinme alt bar + "Keşfet" panelinden yürür; sol sidebar drawer
     olarak HİÇ açılmaz. Üstteki hamburger ikonu gizlenir (kullanıcı isteği:
     "sidebar ikonuyla beraber kaybolsun"). #sidebarToggle yalnızca sidebar'lı
     (shell) sayfalarda vardır; anasayfa/login etkilenmez. */
  #sidebarToggle{ display:none !important; }

  /* İSTİSNA — FARE İLE GEZİLEN DAR PENCERE (kullanıcı raporu 2026-07-22:
     "web versiyonunda shorttayken sidebar açılmıyor"). Yukarıdaki kural
     GENİŞLİĞE bakıyor, cihaz türüne değil: masaüstünde tarayıcı penceresini
     900px altına indiren biri de "mobil" sayılıp hamburger'ı kaybediyordu --
     ve o kişide alt bar tek başına yetmiyor (sidebar'daki türler/kitaplık
     yalnızca oradan açılıyor). İnce işaretleyici = fare/trackpad; gerçek
     dokunmatik cihazlarda kural aynen geçerli kalır. */
  @media (hover:hover) and (pointer:fine){
    #sidebarToggle{ display:flex !important; }
  }
}

/* ===========================================================================
 * MOBİL ALT GEZİNME (bottom-nav) — telefon/tablette sidebar yerine
 * ---------------------------------------------------------------------------
 * Nav'ı lw-sidebar.js her shell sayfasına ENJEKTE eder (login/anasayfa bu
 * dosyayı yüklemediği için otomatik dışlanır). Renkler fallback'li: bazı
 * sayfalar --mist/--lavender-light, bazıları --haze/--signal-light tanımlar.
 * =========================================================================== */
/* Alt barın ÖLÇÜLERİ tek kaynaktan: hem barın kendisi, hem #pageContent'in alt
   dolgusu, hem de Keşfet paneli bunlara dayanır. Media query DIŞINDA tanımlı --
   .sheet kuralları da media query dışında ve değişkeni görebilmeli. */
:root{ --lw-bnav-h:68px; --lw-bnav-gap:10px; }
.bottom-nav{ display:none; }
@media (max-width:900px){
  .bottom-nav{
    /* YÜZEN CAM KAPSÜL — referans: kullanıcının verdiği WhatsApp alt barı
       (hatalar/altbar istenilen.jpeg, 2026-07-21). O tasarımın üç belirleyici
       özelliği: (1) TAM yuvarlak kapsül, (2) arkası GERÇEKTEN görünen nötr
       saydam cam (renk katkısı yok -- eski sürüm koyu lacivert bir panel gibi
       duruyordu), (3) aktif öğenin arkasında BEYAZ saydam hap.
       Renkli (turkuvaz/amber) vurgu bilerek KALDIRILDI: referansta aktiflik
       rengi değil, ışığı artırarak anlatılıyor. */
    position:fixed; left:10px; right:10px; z-index:72;
    bottom:calc(var(--lw-bnav-gap) + env(safe-area-inset-bottom));
    display:flex; align-items:stretch;
    height:auto;
    padding:4px;
    border-radius:999px;
    /* PERFORMANS — backdrop-filter TAMAMEN KALDIRILDI (kullanıcı 2026-07-21'de
       İKİ kez "alt bar yavaş" dedi; 20px -> 12px indirmek yetmedi).
       Neden asıl suçlu buydu: sayfa geçiş animasyonları (@view-transition) bu
       projede zaten KAPALI ve statik varlık önbelleği daha önce çözülmüştü --
       yani bara eklenmiş TEK per-frame maliyet backdrop-filter'dı. Ekranın
       üstünde sabit duran bir eleman için tarayıcı, ALTINDAKİ içerik her
       kaydırıldığında backdrop'u yeniden anlık görüntüleyip bulanıklaştırmak
       zorunda; maliyet yarıçapla ölçeklendiği için küçültmek onu azaltır ama
       BİTİRMEZ.
       Yerine iki katmanlı yarı saydam zemin: arkadaki içerik hâlâ seçiliyor
       ("saydam" isteği korundu) ama artık hiçbir kare maliyeti yok. Bulanık
       cam görünümü şart olursa `backdrop-filter:blur(6px)` geri eklenebilir --
       tek satır, ama yavaşlık da bir miktar geri gelir. */
    background:
      linear-gradient(180deg, rgba(255,255,255,0.10), rgba(255,255,255,0.045)),
      linear-gradient(180deg, rgba(18,23,30,0.82), rgba(10,14,19,0.78));
    border:1px solid rgba(255,255,255,0.14);
    box-shadow:0 10px 26px -14px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.20);
    /* transform:translateZ(0) + backface-visibility:hidden KALDIRILDI
       (kullanıcı raporu 2026-07-21: "alt bar sürekli mobilde ve tablette
       kayıyor" -- bir önceki "titreme" düzeltmesinden SONRA ortaya çıkan,
       DAHA CİDDİ bir regresyon). Bu ikili, iOS Safari'de dokunmatik
       kaydırma sırasında iyi belgelenmiş bir hataya kapı açar: bir
       `position:fixed` öğeye `transform` uygulamak, WebKit'i onu viewport
       yerine bir üst katmana göre konumlandırmaya yöneltebiliyor -- yani
       "titremeyi azaltma" hackinin kendisi asıl "kayma" şikayetinin
       KAYNAĞIYDI. Bu hack'in gerekçesi zaten geçersizdi: hedeflediği yeniden
       boyama maliyeti `backdrop-filter`'dan geliyordu ve o, PERFORMANS
       notunda (yukarıda) bu hack'ten önce zaten kaldırılmıştı. Düz
       `position:fixed` -- hiçbir transform hilesi olmadan -- hem daha
       öngörülebilir hem de bu platform hatasına kapalı. */
    overscroll-behavior:contain;
    touch-action:manipulation;
  }
  .bn-item{
    position:relative; z-index:1;
    flex:1; min-width:0;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
    padding:8px 0;
    /* font-family:inherit ZORUNLU: "Keşfet" bir <button>, diğer dördü <a>.
       Düğmeler sayfa fontunu miras ALMAZ -- bu satır olmadan tek bir öğe
       tarayıcının varsayılan fontuyla (Arial) yazılıyordu ve yazı boyutu
       büyüdükçe fark gözle görülür hale geliyordu. */
    font-family:inherit;
    font-size:10.5px; font-weight:600; letter-spacing:.01em; white-space:nowrap;
    color:rgba(255,255,255,0.74);
    background:none; border:0; cursor:pointer; text-align:center; text-decoration:none;
    -webkit-tap-highlight-color:transparent;
    /* "geçişler hızlı olsun" (kullanıcı isteği): .2s -> .12s */
    transition:color .12s ease, transform .12s ease;
  }
  /* HOVER VURGUSU YOK (kullanıcı raporu 2026-07-21: "alt barın üstüne gelince
     yine kalın oluyor, o olmasın, hepsi aynı olsun"). Dokunmatik cihazlarda
     :hover YAPIŞKANDIR -- bir öğeye dokunduktan sonra parmak kalksa bile o
     öğe :hover durumunda kalır. Beyaza dönen metin/ikon "kalınlaşmış" gibi
     görünüyor ve AYNI ANDA aktif öğeyle birlikte iki öğe vurgulanmış oluyordu
     (bu da "tek bir tanesi aktif olsun" kuralını görsel olarak bozuyordu).
     Artık pasif öğelerin hepsi her durumda birebir aynı; yalnızca .on farklı.
     :active (basılı tutarken küçülme) KALIYOR -- anlık, yapışmıyor. */
  .bn-item:active{ transform:scale(.94); }
  /* Aktif öğe: BEYAZ saydam hap + tam beyaz ikon/yazı (referanstaki gibi). */
  .bn-item.on{ color:#fff; }
  .bn-item.on::before{
    content:"";
    position:absolute; inset:0; z-index:-1;
    border-radius:999px;
    background:rgba(255,255,255,0.17);
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.22);
  }
  /* AMBLEMLER HER DURUMDA İÇİ BOŞ (kullanıcı raporu 2026-07-21: "yine
     tıkladığımda içi dolgulu gözüküyor, onu önle"). Aktif öğede ikonun
     DOLU sürüme geçmesi denendi ve kullanıcı istemedi -- aktiflik yalnızca
     beyaz saydam hap + tam beyaz renkle anlatılıyor. Böylece tıklamadan
     önce ve sonra ikonun BİÇİMİ hiç değişmiyor. Boyut 25px.
     (.ic-fill kuralı, eski markup'ı önbellekten gelmiş bir sayfada dolgulu
     ikonun bir an görünmesini engellemek için duruyor.) */
  .bn-item svg{ width:25px; height:25px; flex-shrink:0; display:block; }
  .bn-item .ic-fill{ display:none !important; }
  /* İçerik alt barın arkasında kalmasın (tüm shell sayfalarında #pageContent). */
  #pageContent{ padding-bottom:calc(var(--lw-bnav-h) + var(--lw-bnav-gap) * 2 + env(safe-area-inset-bottom)); }
}

/* ===========================================================================
 * KEŞFET PANELİ (alttan kayan sheet) — alt bardaki "Keşfet" düğmesiyle açılır
 * ---------------------------------------------------------------------------
 * Sidebar'ın ikincil gezinmesini (kitaplık + içerik türleri + kategoriler)
 * mobilde buraya taşır. Böylece telefonda sol drawer HİÇ açılmaz -> "sidebar
 * kayması" ortadan kalkar. Nav ile birlikte lw-sidebar.js enjekte eder.
 * =========================================================================== */
.sheet-back{
  position:fixed; inset:0; z-index:70; background:rgba(0,0,0,0.55);
  opacity:0; pointer-events:none; transition:opacity .25s ease;
}
.sheet-back.open{ opacity:1; pointer-events:auto; }
.sheet{
  position:fixed; left:0; right:0; z-index:71;
  /* Yüzen kapsülün TAM üstünde bitsin: bar yüksekliği + iki kez boşluk. */
  bottom:calc(var(--lw-bnav-h, 68px) + var(--lw-bnav-gap, 10px) * 2 + env(safe-area-inset-bottom));
  background:var(--abyss); border-top:1px solid var(--line-strong);
  border-radius:18px 18px 0 0; padding:14px 14px 18px;
  /* KAPALIYKEN TAM EKRAN DIŞINA (kullanıcı raporu 2026-07-21, ekran
     görüntüsü: alt barın ALTINDA turuncu "KİTAPLIĞIM" yazısı görünüyor).
     REGRESYON KAYNAĞI: eskiden panel dibe 56px yakındı ve translateY(110%)
     onu gözden kaçırmaya yetiyordu. Bar yüzen kapsüle çevrilince panelin
     `bottom` değeri 88px+safe'e çıktı -- ama 110% yalnızca panelin KENDİ
     yüksekliğinin %10'u kadar pay verir; 88px'lik yükselmeyi telafi etmez.
     Sonuç: panelin ÜST kenarı (tutamak + "KİTAPLIĞIM" etiketi) barın altındaki
     şeritte kalıyordu. Doğru gizleme mesafesi = kendi yüksekliği (100%) +
     zeminden yüksekliği; böylece panel boyu ne olursa olsun tamamen çıkar. */
  transform:translateY(calc(100% + var(--lw-bnav-h, 68px) + var(--lw-bnav-gap, 10px) * 2 + env(safe-area-inset-bottom)));
  transition:transform .26s cubic-bezier(.22,.61,.36,1);
  max-height:calc(78vh - var(--lw-bnav-h, 68px)); overflow-y:auto;
  overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--surface-2) transparent;
}
.sheet.open{ transform:translateY(0); }
.sheet .grab{ width:38px; height:4px; border-radius:99px; background:var(--line-strong); margin:0 auto 12px; }
.sheet .sh-label{
  font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.14em;
  color:var(--ember); text-transform:uppercase; padding:0 6px 8px;
}
.sheet .sh-item{
  display:flex; align-items:center; gap:12px;
  padding:11px 12px; border-radius:10px;
  font-size:14px; font-weight:600; color:var(--ink); text-decoration:none;
}
.sheet .sh-item:hover{ background:var(--surface); }
.sheet .sh-item svg{ flex-shrink:0; }
.sheet .sh-item .cnt{
  margin-left:auto; font-family:'JetBrains Mono',monospace; font-size:9.5px; color:var(--haze);
}
.sheet .sh-cats{ display:grid; grid-template-columns:repeat(2,1fr); gap:7px; padding:2px 2px 6px; }
.sheet .sh-cat{
  display:flex; align-items:center; gap:8px;
  padding:10px 11px; border-radius:10px;
  background:var(--surface); border:1px solid var(--line);
  font-size:12.5px; font-weight:600; color:var(--ink); text-decoration:none;
  transition:border-color .2s ease;
}
.sheet .sh-cat:hover{ border-color:rgba(95,201,214,0.4); }
.sheet .sh-dot{ width:7px; height:7px; border-radius:99px; flex-shrink:0; }
@media (min-width:901px){ .sheet, .sheet-back{ display:none; } }

/* ===== Header'ın telefon genişliğine sığdırılması ========================
   Kullanıcı raporu (2026-07-17): "telefon ekranına göre ölçekli değil".
   390px'te ölçüldü (Playwright): sol grup (hamburger+logo+yazı) 199px'e,
   sağ grup 438px'e uzanıyor -- kullanıcı adı rozeti ekran DIŞINA taşıyor,
   dil seçici logo yazısının üstüne biniyordu. Sayfalar derlenmiş
   tailwind.css kullandığı için (CDN değil) yeni Tailwind sınıfları
   eklenemez -- bu yüzden düzeltme burada, düz CSS ile. #siteHeader sadece
   sidebar'lı sayfalarda var; anasayfa (id'siz header) etkilenmez. */
/* DAR EKRANDA HEADER (kullanıcı raporu 2026-07-21: "mobil versiyonda üstteki
   ikonlar ekran daraldığında birbirine çok yakın; dil seçeneği mobilde burada
   görünmeyebilir, isimlik alanı açmak için").
   Yer açmanın doğru yolu ikonları birbirine yaklaştırmak DEĞİL (asıl şikâyet
   oydu), header'dan bir şey ÇIKARMAKTI: dil seçici burada zorunlu değil --
   hesap menüsünde ve Ayarlar > Dil'de erişilebiliyor. Çıkan ~70px, hem
   ikonların nefes payına hem de kullanıcı adı rozetine gidiyor. */
@media (max-width:899.98px){
  #siteHeader [data-lw-lang-switcher]{ display:none !important; }
}
@media (max-width:639.98px){
  /* Kullanıcı adı rozeti: dil seçici gittiği için artık daha geniş olabilir
     (110 -> 132px); yine de taşarsa kırpılır. */
  #siteHeader #joinBtn{
    max-width:132px; overflow:hidden; text-overflow:ellipsis;
    padding-left:12px; padding-right:12px;
  }
}
@media (max-width:479.98px){
  /* Logo İKONU kalır, "LATENT WORLD" yazısı gizlenir (img + div = yazı). */
  #siteHeader > div:first-child img + div{ display:none; }
  /* Nefes payı: eskiden 12px'e DARALTILIYORDU (yer açmak için) -- ikonların
     birbirine yapışmasının sebebi buydu. Dil seçici çıktığı için artık
     genişletebiliyoruz. */
  #siteHeader > div:last-child{ gap:16px; }
  #siteHeader #joinBtn{ max-width:112px; }
}

/* ===========================================================================
 * HEADER SAĞ GRUBU — hizalama (kullanıcı raporu 2026-07-21: "bildirim, dil,
 * arama çubuğu vs hizalı değil")
 * ---------------------------------------------------------------------------
 * Üç düğme üç FARKLI şekilde ölçülendirilmişti ve bu, markup 10'a yakın shell
 * sayfasına KOPYALANDIĞI için her yerde aynı şekilde bozuktu:
 *   · #searchToggleBtn -> w-9 h-9 (36px) + yuvarlak zemin
 *   · #profileBtn      -> w-8 h-8 (32px) + yuvarlak zemin (farklı alfa)
 *   · #notifBellBtn    -> HİÇ boyut/zemin yok, çıplak 20px ikon
 *   · .lw-lang-btn     -> padding tabanlı, ~30px
 * Yani dördü dört ayrı yükseklikteydi; flex `items-center` onları ortalasa
 * bile daireler farklı çaplarda olduğu için göz "hizasız" görüyordu.
 * Düzeltme HTML'de değil BURADA: tek yer, bütün shell sayfaları. Seçiciler
 * (#siteHeader #x = 2,0,0) Tailwind utility'lerini (0,1,0) ezer.
 * #siteHeader yalnızca shell sayfalarında var -- anasayfa ve statik sayfalar
 * (kendi konumlandırdıkları dil seçicisiyle) etkilenmez.
 * =========================================================================== */
#siteHeader #searchToggleBtn,
#siteHeader #notifBellBtn,
#siteHeader #profileBtn{
  width:36px; height:36px; flex-shrink:0; padding:0;
  border-radius:9999px;
  display:inline-flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.10);
  color:rgba(255,255,255,0.92);
  transition:background .15s ease, color .15s ease;
}
#siteHeader #searchToggleBtn:hover,
#siteHeader #notifBellBtn:hover,
#siteHeader #profileBtn:hover{ background:rgba(255,255,255,0.20); color:#fff; }
/* İkon boyu da tek elden -- markup'ta 20/20/18 diye üç ayrı değer vardı. */
#siteHeader #searchToggleBtn svg,
#siteHeader #notifBellBtn svg,
#siteHeader #profileBtn svg{ width:19px; height:19px; }
/* Dil seçici aynı 36px yüksekliğe oturur (öncesinde padding'den ~30px'ti). */
#siteHeader .lw-lang-btn{ height:36px; padding:0 12px; }
/* Okunmamış bildirim noktası artık 36px'lik dairenin kenarına göre. */
#siteHeader #notifBellBtn #notifUnreadDot{ top:1px; right:1px; }

/* Logo yazısı: "WORLD", "LATENT"e fazla bitişikti (kullanıcı raporu,
   2026-07-17) -- markup'taki -mt-0.5 (-2px) satırı yukarı çekiyordu. Bu
   bileşik seçici o tek-sınıflı Tailwind kuralını ezer ve WORLD'ü bir tık
   aşağı indirir. (img + div = header'daki logo yazı bloğu; ikinci span =
   WORLD satırı.) */
#siteHeader > div:first-child img + div span + span{ margin-top:2px; }

/* ===== Anasayfa mobil menüsü ==============================================
   Anasayfanın nav linkleri (Movies/Series/Community/About) "hidden lg:flex"
   taşır: 1024px ALTINDA tamamen kaybolur ve yerine hiçbir menü yoktu --
   tablet dikey konumda ve daraltılmış pencerede siteyi gezmenin yolu
   kalmıyordu (kullanıcı raporu, 2026-07-17). Bu hamburger + açılır panel
   SADECE 1024px altında görünür; geniş ekranda nav zaten header'da. */
.lw-mobilenav-btn{
  display:none; background:none; border:0; padding:8px; margin-left:-8px;
  color:rgba(255,255,255,0.9); cursor:pointer;
}
.lw-mobilenav-btn:hover{ color:#fff; }
@media (max-width:1023.98px){
  .lw-mobilenav-btn{ display:inline-flex; align-items:center; }
}
.lw-mobilenav{
  position:absolute; top:100%; left:0; right:0; z-index:60;
  background:rgba(6,8,11,0.92); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--line); padding:6px 0;
}
.lw-mobilenav a{
  display:block; padding:12px 24px;
  font-size:15px; font-weight:600; color:var(--ink);
}
.lw-mobilenav a:hover{ background:rgba(255,255,255,0.06); color:#fff; }
.lw-mobilenav[hidden]{ display:none; }
@media (min-width:1024px){ .lw-mobilenav{ display:none !important; } }

/* ===== Layout kararlılık düzeltmeleri ===== */
html.lw-init-collapsed .sidebar{ width:76px; }
/* İKON KAYMASI DÜZELTMESİYLE SENKRON tutulmalı (bkz. .sidebar.collapsed
   .sidebar-item, yukarıda) -- bu kural SADECE ilk boyamadan önceki kısa
   pencerede (JS henüz #sidebar'a .collapsed eklemeden) devreye girer; aynı
   padding/margin kullanılmazsa, sayfa açılışında ikon önce burada (eski
   ortalanmış konumda) belirir, JS senkronize olunca ANİ bir ZIPLAMAYLA yeni
   (sabit sol boşluklu) konuma geçerdi. */
html.lw-init-collapsed .sidebar .sidebar-item{ padding:13px 20px; border-radius:8px; margin:2px 8px 2px 0; }
html.lw-init-collapsed .sidebar .sidebar-label{ display:none; }
html.lw-init-collapsed .sidebar .sidebar-heading{ padding:13px 20px; border-radius:8px; margin:2px 8px 2px 0; }
html.lw-init-collapsed .sidebar .sidebar-heading .sh-chev{ display:none; }
html.lw-init-collapsed .sidebar .sidebar-section{ display:none; }
html.lw-init-collapsed .sidebar .sidebar-showmore{ display:none; }
html.lw-init-collapsed #pageContent.main-shifted{ margin-left:76px; }
html.lw-preload .sidebar,
html.lw-preload #pageContent.main-shifted{ transition:none !important; }
@media (max-width:900px){
  html.lw-init-collapsed #pageContent.main-shifted{ margin-left:0 !important; }
  html.lw-init-collapsed .sidebar{ width:var(--lw-sidebar-w); }
}

/* ===== Dosya seçici (çevrilebilir) =====================================
   SORUN: <input type="file"> tarayıcının KENDİ butonunu çizer ("Dosya Seç",
   "Dosya seçilmedi") ve bu metin TARAYICININ arayüz dilinden gelir --
   sayfanın dilinden DEĞİL. HTML/CSS/JS ile çevrilemez, standart böyle.
   Sonuç: site İngilizce/Rusça olsa bile, tarayıcısı Türkçe olan kullanıcı
   yükleme formunda Türkçe butonlar görüyordu (gerçek kullanıcı raporu).

   ÇÖZÜM: native input'u görsel olarak gizle (ama ERİŞİLEBİLİR bırak:
   display:none klavye/ekran okuyucu erişimini keserdi), üstüne kendi
   <label>'ımızı koy. Label bir input'a bağlı olduğu için tıklama/klavye
   davranışı native olarak çalışmaya devam eder -- JS'e gerek yok.  */
.lw-file{ display:flex; align-items:center; gap:10px; }
.lw-file input[type="file"]{
  /* Ekran dışına değil, sıfır boyuta indiriyoruz: bazı tarayıcılarda
     ekran dışı öğe odaklanınca sayfayı kaydırır. */
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
.lw-file-btn{
  flex-shrink:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 14px; border-radius:var(--radius-sm);
  background:rgba(255,255,255,0.10); border:1px solid var(--line-strong);
  color:var(--ink); font-size:13px; font-weight:600;
  transition:background .14s var(--ease), border-color .14s var(--ease);
}
.lw-file-btn:hover{ background:rgba(255,255,255,0.16); }
/* Klavyeyle gezinirken odak GÖRÜNMELİ: native input gizli olduğu için
   odak halkasını onun yerine label'da gösteriyoruz. */
.lw-file input[type="file"]:focus-visible + .lw-file-btn{
  outline:2px solid var(--signal-light); outline-offset:2px;
}
.lw-file-name{
  font-size:13px; color:var(--mist);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ===== Sayfa geçişleri (View Transitions API) — 3. DENEME de KAPATILDI ====
   (2026-07-20). 3. deneme, lw-sidebar.js'teki "NAVİGASYON KİLİDİ" ile
   birlikte 1 ekran kaydında donma GÖSTERMEDİ (sahne-analizi + kare-kare
   incelendi), ama kullanıcı canlıda test ederken "donma var" raporunu
   TEKRARLADI. Bu özellik zaten 2 kez (2026-07-17) ciddi prod donmasına yol
   açmıştı; 3. kez de %100 güvenli olduğunu kanıtlayamadığım için kullanıcının
   kendi önceden verdiği talimatla ("dene, donma oluyorsa tekrar kapat")
   KAPATIYORUM. NAVİGASYON KİLİDİ ve user-select:none (yukarıdaki .sidebar
   kuralı) KALICI -- bunlar View Transitions'tan bağımsız, zararsız
   iyileştirmeler, tekrar denenmesine gerek yok.

   Bir daha denenecekse: gerçek bir kullanıcı testinde (ekran kaydıyla)
   donmanın GERÇEKTEN bu özellikten mi yoksa başka bir şeyden mi
   kaynaklandığını netleştir -- bu son denemede kod analizinde donma kanıtı
   bulunamamıştı, yani kullanıcı raporu ile teknik kanıt ÇELİŞİYORDU; bir
   sonraki denemeden önce bu çelişkiyi çöz (taze bir ekran kaydı iste).
   Geri açmak için aşağıdaki bloğun yorumunu kaldır.

@view-transition{ navigation:auto; }
@media (prefers-reduced-motion:no-preference){
  #siteHeader{ view-transition-name:lw-header; }
  .sidebar{ view-transition-name:lw-sidebar; }
  ::view-transition-group(lw-header),
  ::view-transition-group(lw-sidebar){ animation-duration:0s; }
  ::view-transition-old(lw-header),
  ::view-transition-old(lw-sidebar){ animation:none; opacity:0; }
  ::view-transition-new(lw-header),
  ::view-transition-new(lw-sidebar){ animation:none; opacity:1; }

  #pageContent{ view-transition-name:lw-main; }
  ::view-transition-group(lw-main){ animation-duration:.26s; }
  ::view-transition-old(lw-main){ animation:lw-vt-out .26s var(--ease) both; }
  ::view-transition-new(lw-main){ animation:lw-vt-in  .26s var(--ease) both; }
  ::view-transition-old(root),
  ::view-transition-new(root){ animation-duration:.26s; }
}
@media (prefers-reduced-motion:reduce){
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*){ animation:none !important; }
}
*/
@keyframes lw-vt-out{ to{ opacity:0; } }
@keyframes lw-vt-in{ from{ opacity:0; transform:translateY(4px); } }
/* ===================================================================== */


/* ===========================================================================
 * VİDEO IZGARASI — "YouTube düzeni"  (.lw-vgrid / .lw-vcard)
 * ---------------------------------------------------------------------------
 * TEK KART DİLİ. Keşfet (filmler.html), Koleksiyon'un 12 görünümü
 * (koleksiyon.html) ve kanal sayfası (profil.html) artık AYNI kartı çiziyor.
 * Markup'ı tek yerden üreten kod: lw-videocard.js (window.LWCard).
 *
 * Neden değişti (kullanıcı isteği 2026-07-21, hatalar/ klasöründeki YouTube
 * ekran görüntüleri): eski kare (1:1) kart başlığı kapağın ÜSTÜNE, koyu bir
 * gradyanın içine basıyordu -- kapağın alt üçte biri hep okunmuyordu ve
 * başlık ancak tek satır sığıyordu. YouTube düzeninde kapak 16:9 ve temiz,
 * metin kapağın ALTINDA kendi satırında: avatar + 2 satır başlık + kanal +
 * "izlenme · tarih".
 *
 * SÜTUN SAYISI EKRAN GENİŞLİĞİNE BAĞLI, kapsayıcıya DEĞİL (kullanıcı isteği
 * 2026-07-21: "sidebarı kapatınca ekrana 4 tane sığıyor, o olmasın, hâlâ 3
 * gözüksün, olanlar büyüsün"). Önce auto-fill/minmax kullanıyordu: sidebar
 * 216px'ten 76px'e inince kapsayıcı ~140px genişliyor ve bu bazı ekranlarda
 * bir sütun DAHA sığdırmaya yetiyordu -- kartlar aynı anda küçülüyordu.
 * Sabit sütunla artık sidebar açılıp kapanmak sütun SAYISINI hiç değiştirmez;
 * kazanılan genişlik doğrudan kartlara gider (kart büyür). Kırılımlar,
 * sidebar AÇIKKEN bile kart ~300px'in altına düşmeyecek şekilde seçildi.
 *
 *   · mobil  (<=656px)  -> 1 sütun, kapaklar KENARDAN KENARA (YouTube mobil
 *                          aynen böyle). Ebeveynin yatay padding'ini
 *                          --lw-vbleed ile geri alıyoruz (sayfa kendi
 *                          padding'ini bu değişkende bildirir).
 *   · tablet (657–1100)  -> 2 sütun
 *   · web    (1101–1600) -> 3 sütun
 *   · geniş  (1601–2100) -> 4 sütun
 *   · daha geniş         -> 5, sonra 6 sütun
 * =========================================================================== */

.lw-vgrid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  column-gap:16px;
  row-gap:34px;
  align-items:start;
}
@media (min-width:1601px){ .lw-vgrid{ grid-template-columns:repeat(4, minmax(0,1fr)); } }
@media (min-width:2101px){ .lw-vgrid{ grid-template-columns:repeat(5, minmax(0,1fr)); } }
@media (min-width:2601px){ .lw-vgrid{ grid-template-columns:repeat(6, minmax(0,1fr)); } }
/* tailwind.css bu dosyadan ÖNCE yükleniyor: .hidden{display:none} ile
   .lw-vgrid{display:grid} aynı özgüllükte ve SONRAKİ kazanır -- yani
   showEmpty()'nin gizlemesi çalışmazdı. İki sınıflı kural bunu kesin çözer. */
.lw-vgrid.hidden{ display:none; }

.lw-vcard{
  position:relative;
  display:block;
  min-width:0;              /* grid çocuğu: uzun başlık sütunu şişirmesin */
}

/* ---- kapak (16:9) ---- */
.lw-vthumb{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  border-radius:12px;
  overflow:hidden;
  background:var(--surface-2);
  text-decoration:none;
}
.lw-vthumb .lw-vart{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
  transition:transform var(--dur-2) var(--ease);
}
/* Kapak görseli yoksa (ya da yüklenemezse) altta duran dekoratif gradyan.
   .lw-vfill'i (window.LWCard.fillStyle) yalnızca .lw-vthumb DEĞİL, anasayfa
   ek bölümlerindeki (Devam Et/Spotlight/Shorts) kendi kapak kutuları da
   kullanıyor -- bu yüzden seçici üçüne de genişletildi (2026-07-21). Genel
   `.lw-vfill{position:absolute;inset:0}` YAPILMADI: ileride biri bu sınıfı
   position:relative olmayan bir kapsayıcı içinde kullanırsa sessizce yanlış
   yere konumlanmasın diye kullanan her kapsayıcı burada AÇIKÇA listeleniyor. */
.lw-vthumb .lw-vfill,
.lw-cont .art .lw-vfill,
.lw-spot .bg .lw-vfill,
.lw-sht .art .lw-vfill{ position:absolute; inset:0; display:block; }
.lw-vthumb .lw-vglyph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  font-family:'Fraunces',serif; font-weight:700;
  font-size:clamp(2rem,5vw,3.2rem);
  color:rgba(255,255,255,0.16);
  pointer-events:none;
}
/* Süre / bölüm sayısı rozeti — YouTube'daki gibi SAĞ ALT köşe. */
.lw-vdur{
  position:absolute; right:6px; bottom:6px; z-index:3;
  display:inline-flex; align-items:center; gap:4px;
  background:rgba(0,0,0,0.80);
  color:#fff;
  font-family:'JetBrains Mono',monospace;
  font-size:12px; font-weight:600; line-height:1;
  padding:3px 5px; border-radius:4px;
  pointer-events:none;
}
/* "★ TREND" gibi sol üst rozetler (yöneticinin sabitlediği içerik). */
.lw-vflag{
  position:absolute; top:8px; left:8px; z-index:3;
  font-size:10px; font-weight:800; color:#1c1206;
  background:linear-gradient(135deg,var(--ember-deep),var(--ember));
  padding:3px 8px; border-radius:999px;
  box-shadow:0 2px 12px -2px rgba(255,154,82,0.55);
  pointer-events:none;
}

/* ---- kapak altı bilgi satırı ---- */
.lw-vinfo{
  display:flex; gap:12px;
  margin-top:12px;
}
.lw-vavatar{
  flex:0 0 36px;
  width:36px; height:36px;
  border-radius:50%;
  overflow:hidden;
  background:linear-gradient(135deg,var(--signal-deep),var(--signal));
  display:flex; align-items:center; justify-content:center;
  font-weight:700; font-size:15px; line-height:1; color:#fff;
  text-transform:uppercase; text-decoration:none;
}
.lw-vavatar img{ width:100%; height:100%; object-fit:cover; display:block; }

.lw-vtext{ flex:1 1 auto; min-width:0; }

/* KART METNİ RAFİNESİ (kullanıcı isteği 2026-07-21: "video açıklamaları
   yazıları vs daha güzel gözüksün"). Kartın BOYUTU/ORANI değişmedi -- sadece
   kapak altındaki metin hiyerarşisi:
     · başlık satır arası 1.35 -> 1.3 + text-wrap:pretty (tek kelimelik,
       çirkin son satırlar biter)
     · kanal adı bir tık aydınlandı ve harf aralığı açıldı
     · istatistikler MONO'ya geçti (tasarım sistemi: mono = veri); sayı <b> ile
       parlak, ayırıcı nokta .sep ile sönük
     · başlığın altına küçük tür rozeti (.lw-vgen) */
.lw-vtitle{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  font-family:var(--font-body);
  font-size:15px; font-weight:700; line-height:1.3;
  letter-spacing:-0.005em;
  text-wrap:pretty;
  color:var(--ink);
  text-decoration:none;
  transition:color var(--dur-1) ease;
}
.lw-vchannel,
.lw-vstats{
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  text-decoration:none;
}
.lw-vchannel{
  display:block; margin-top:6px;
  font-size:12.5px; font-weight:500; line-height:1.4; letter-spacing:.005em;
  color:#A6B3BE;
  transition:color var(--dur-1) ease;
}
.lw-vstats{
  display:block; margin-top:3px;
  font-family:var(--font-mono);
  font-size:11.5px; font-weight:400; line-height:1.45; letter-spacing:.01em;
  color:#7E8C97;
}
.lw-vstats b{ font-weight:600; color:#9DAAB5; }
.lw-vstats .sep{ opacity:.45; }
.lw-vgen{
  display:inline-block; margin-top:7px;
  font-family:var(--font-mono);
  font-size:9.5px; font-weight:600; line-height:1;
  letter-spacing:.12em; text-transform:uppercase;
  color:var(--signal-light);
  border:1px solid rgba(95,201,214,0.26);
  border-radius:999px; padding:3px 8px;
}
/* Kanal adı mobilde AYRI satır değil, istatistik satırının başında ("TV100 ·
   32 B izlenme · 8 saat önce") -- YouTube mobil aynen böyle. İki biçimi de
   basıp CSS ile değiştiriyoruz; JS'te kırılıma göre dallanmak gerekmiyor. */
.lw-vstats .lw-vch-inline{ display:none; }

/* Kapak, fareyle gelince 3px yükselip turkuvaz kıl payı bir çerçeve alıyor --
   kart "kağıttan kalkıyor" hissi. transform olduğu için düzen KAYMAZ. */
.lw-vthumb{ transition:transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
@media (hover:hover){
  .lw-vcard:hover .lw-vart{ transform:scale(1.04); }
  .lw-vcard:hover .lw-vthumb{
    transform:translateY(-3px);
    box-shadow:0 18px 40px -22px rgba(0,0,0,0.9), 0 0 0 1px rgba(95,201,214,0.28);
  }
  .lw-vcard:hover .lw-vtitle,
  .lw-vtitle:hover{ color:var(--signal-light); }
  .lw-vchannel:hover{ color:var(--ink); }
}

/* Kart üstündeki araç çubuğu (kanal sahibi: kapak değiştir / sil,
   yönetici: trende sabitle / sil). Sadece kapağın üstünde durur ve
   fareyle gelince belirir; dokunmatikte HER ZAMAN görünür (hover yok). */
.lw-vtools{
  position:absolute; top:8px; right:8px; z-index:4;
  display:flex; gap:6px;
  opacity:0; transform:translateY(-4px);
  transition:opacity var(--dur-1) ease, transform var(--dur-1) ease;
}
.lw-vcard:hover .lw-vtools,
.lw-vcard:focus-within .lw-vtools{ opacity:1; transform:none; }
@media (hover:none), (pointer:coarse){
  .lw-vtools{ opacity:1; transform:none; }
}
.lw-vtool{
  width:28px; height:28px;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.16);
  border-radius:8px;
  background:rgba(6,8,11,0.78);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  color:var(--ink);
  cursor:pointer;
  transition:background var(--dur-1) ease, color var(--dur-1) ease;
}
.lw-vtool:hover{ background:rgba(255,255,255,0.14); }
.lw-vtool.danger:hover{ background:rgba(239,68,68,0.85); color:#fff; }

/* Durum rozeti (kendi yüklemelerinde: sıkıştırılıyor / onay bekliyor /
   reddedildi). Konum sol üst -- .lw-vflag ile aynı köşe, ikisi aynı anda
   görünmüyor (trend rozeti yalnızca onaylı içerikte olur). */
.lw-vstatus{
  position:absolute; top:8px; left:8px; z-index:4;
  font-size:11px; font-weight:800;
  padding:4px 9px; border-radius:999px;
  pointer-events:none;
}

/* ---------- TABLET / dar masaüstü: 2 sütun ----------
   Sütun kuralı 1100px'e kadar uzanıyor ama TİPOGRAFİ küçültmesi 900px'te
   kalıyor: 900–1100 arası hâlâ masaüstü (sidebar var), orada yazıyı
   küçültmek gereksiz olurdu -- sadece sütun sayısı ikiye iniyor. */
@media (max-width:1100px){
  .lw-vgrid{
    grid-template-columns:repeat(2, minmax(0,1fr));
    column-gap:12px;
    row-gap:24px;
  }
}
@media (max-width:900px){
  .lw-vinfo{ gap:10px; margin-top:10px; }
  .lw-vavatar{ flex-basis:32px; width:32px; height:32px; font-size:14px; }
  .lw-vtitle{ font-size:14px; }
  .lw-vchannel, .lw-vstats{ font-size:12.5px; }
}

/* ---------- MOBİL: tek sütun, kenardan kenara ---------- */
@media (max-width:656px){
  .lw-vgrid{
    grid-template-columns:1fr;
    column-gap:0;
    row-gap:0;
    /* Sayfa kendi yatay padding'ini --lw-vbleed'de bildirir; burada onu geri
       alıp kapakları ekranın iki kenarına dayıyoruz. Bildirmeyen sayfada
       değişken 0px'e düşer ve düzen bozulmaz. */
    margin-inline:calc(-1 * var(--lw-vbleed, 0px));
  }
  .lw-vcard{ padding-bottom:18px; }
  .lw-vthumb{ border-radius:0; }
  .lw-vinfo{
    /* Kapak kenardan kenara ama METİN değil -- YouTube'da da metnin kendi
       iç boşluğu var. 12px, mobil kabuğun geri kalanıyla hizalı. */
    padding:12px 12px 0;
    margin-top:0;
    gap:12px;
  }
  .lw-vavatar{ flex-basis:36px; width:36px; height:36px; font-size:15px; }
  .lw-vtitle{ font-size:15px; }
  .lw-vchannel{ display:none; }                 /* satır birleşti (aşağı bkz.) */
  .lw-vgen{ display:none; }                     /* telefonda yer dar, rozet düşer */
  .lw-vstats{ margin-top:4px; font-size:11.5px; }
  /* Kapak yükselme efekti dokunmatikte anlamsız (hover yok) ve kenardan kenara
     kapakta gölge tuhaf durur -- mobilde kapalı. */
  .lw-vcard:hover .lw-vthumb{ transform:none; box-shadow:none; }
  .lw-vstats .lw-vch-inline{ display:inline; }
  .lw-vdur{ font-size:12px; }
  .lw-vtools{ top:6px; right:6px; }
}

/* ===========================================================================
 * SHORTS IZGARASI (9:16)  —  .lw-sgrid / .lw-scard
 * ---------------------------------------------------------------------------
 * DİKKAT: 'short' (dikey Shorts klibi) ile 'short_film' (yatay kısa metraj)
 * FARKLI içerik türleri. Bu ızgara yalnızca DİKEY olanlar içindir; kısa
 * metrajlar normal .lw-vgrid'e girer.
 * =========================================================================== */
.lw-sgrid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:16px;
}
.lw-scard{ position:relative; display:block; min-width:0; }
.lw-sthumb{
  position:relative; display:block;
  aspect-ratio:9/16;
  border-radius:12px; overflow:hidden;
  background:var(--surface-2);
}
.lw-sthumb .lw-vart{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lw-stitle{
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
  margin-top:9px;
  font-size:14px; font-weight:700; line-height:1.35;
  color:var(--ink); text-decoration:none;
}
.lw-sstats{ font-size:12.5px; color:var(--haze); margin-top:3px; }
@media (max-width:656px){
  .lw-sgrid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
}
