/* ═══════════════════════════════════════════════════════════
   MIZANIS — Grafik katmanı

   Amaç: yüzeye DOKU ve editoryal detay vermek. Efekt eklemek
   değil — var olanı elle çizilmiş gibi göstermek.

   TEK KURAL: burada sabit renk YOK. Tema değiştiğinde
   (gece / sakura / okyanus / altın) her şey onunla birlikte
   dönsün diye sadece var(--…) kullanılır. Tek istisna aşağıda
   --pembe: style.css zaten manga vurgusunu bu pembeyle
   çiziyor, ondan kopmasın diye aynısı tekrarlandı.
   ═══════════════════════════════════════════════════════════ */

:root{
  --pembe:#F58EB4;               /* style.css'teki manga vurgusu */
  --tram:rgba(255,255,255,.028); /* tram (screentone) nokta yoğunluğu */
}

/* ── 1. KAĞIT DOKUSU ─────────────────────────────────────────
   Düz siyah zemin ekranda "boş" durur; basılı manga sayfası
   durmaz — üstünde tram noktaları ve kağıt gren'i vardır.
   İkisi de çok düşük opaklıkta: fark edilmesin, hissedilsin.  */
body::before{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background-image:
    /* tram: 3px'lik nokta ızgarası */
    radial-gradient(circle at 1px 1px, var(--tram) 1px, transparent 0),
    /* gren: fraktal gürültü, dosyaya gömülü — dış istek yok.
       feColorMatrix şart: onsuz feTurbulence RENKLİ parazit
       üretir, gri değil — ekranda kirli görünür.              */
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23g)' opacity='.3'/%3E%3C/svg%3E");
  background-size:3px 3px, 160px 160px;
  /* Ortalama %4 civarı. Daha yükseği 15px gövde yazısını
     yumuşatmaya başlıyor — doku metnin önüne geçmemeli.       */
  opacity:.3;
}

/* ── 2. VİNYET ───────────────────────────────────────────────
   Köşeleri bir tık karartır; göz ortada kalır. Sadece tanıtım
   sayfasında — panelin içinde okunurluğu düşürmesin.          */
body:has(#view-landing:not(.hidden))::after{
  content:"";
  position:fixed; inset:0; z-index:1; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(0,0,0,.42) 100%);
}

/* ── 3. BÖLÜM BAŞLIKLARI — sayı + dikey ray ──────────────────
   Başlıklar birbirinin aynısıydı; sayfada nerede olduğunu
   söyleyen hiçbir şey yoktu. Dergi mizanpajı gibi: solda içi
   boş bir numara, altında incelerek biten bir çizgi.          */
.sec-title[data-no]{position:relative; padding-left:54px}
.sec-title[data-no]::before{
  content:attr(data-no);
  position:absolute; left:0; top:1px;
  font-family:var(--disp); font-size:13px; font-weight:800; letter-spacing:.06em;
  color:transparent; -webkit-text-stroke:1px var(--red); opacity:.6;
}
.sec-title[data-no]::after{
  content:"";
  position:absolute; left:13px; top:24px; bottom:4px; width:1px;
  background:linear-gradient(180deg, var(--red), transparent);
  opacity:.5;
}
@media(max-width:600px){
  .sec-title[data-no]{padding-left:38px}
  .sec-title[data-no]::after{left:9px}
}

/* ── 4. KEŞFET KARTLARI — emoji yerine çizim ─────────────────
   42px'lik 🎬📚📺 en ucuza kaçılmış yerdi ve öyle duruyordu.
   Yerine ince çizgili ikonlar geldi; renk karta göre.         */
.mk-ikon{
  width:42px; height:42px; display:block;
  color:var(--violet); opacity:.92;
  transition:transform .25s cubic-bezier(.34,1.56,.64,1), opacity .2s;
}
.mk-kart.izle  .mk-ikon{color:var(--red)}
.mk-kart.manga .mk-ikon{color:var(--pembe)}
.mk-kart:hover .mk-ikon{transform:translateY(-2px) scale(1.06); opacity:1}

/* Köşe çentikleri — kartın dört köşesinde ince gönye.
   Parlama eklemeden "seçili" hissi verir.                     */
.mk-kart{position:relative; overflow:hidden}
.mk-kart::before, .mk-kart::after{
  content:""; position:absolute; width:14px; height:14px;
  border:1px solid currentColor; opacity:0; transition:opacity .22s, inset .22s;
  color:var(--violet); pointer-events:none;
}
.mk-kart::before{top:10px; left:10px; border-right:0; border-bottom:0}
.mk-kart::after{bottom:10px; right:10px; border-left:0; border-top:0}
.mk-kart:hover::before, .mk-kart:hover::after{opacity:.75}
.mk-kart.izle::before,  .mk-kart.izle::after {color:var(--red)}
.mk-kart.manga::before, .mk-kart.manga::after{color:var(--pembe)}

/* ── 5. SAHNE BANDI ──────────────────────────────────────────
   Bölümler arasına giren sinematik şerit. İçindeki her şey
   SVG olarak çizili: dış görsel yok, telif yok, ~6KB.         */
.sahne-band{
  position:relative;
  height:clamp(230px, 30vw, 400px);
  overflow:hidden;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--bg);
}
.sahne-band svg{
  position:absolute; inset:0;
  width:100%; height:100%; display:block;
}
/* Yönetici görseli. Yüklendiğinde çizim gizlenir, yerini bu alır. */
.sahne-gorsel{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; object-position:center;
  display:block;
}
.sahne-band.gorselli svg{display:none}

/* Üstten ve alttan zemine eritir — şerit "kesilmiş" durmasın */
.sahne-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 74%, var(--bg) 100%);
}
/* Gerçek bir fotoğrafın üstünde yazı okunmaz. Görsel modunda
   sol alta doğru koyulaşan ek bir perde iner — yazı her görselde
   okunur kalsın diye. Çizim modunda gerekmez, zemin zaten koyu.  */
.sahne-band.gorselli::after{
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 26%, transparent 58%, var(--bg) 100%),
    linear-gradient(75deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.35) 42%, transparent 70%);
}
.sahne-soz{
  position:absolute; left:7vw; bottom:clamp(20px,4vw,42px); z-index:2;
  max-width:min(560px, 74vw);
}
.sahne-soz .ss-kicik{
  font-family:var(--disp); font-size:10.5px; letter-spacing:.34em;
  color:var(--gold); opacity:.85; margin-bottom:9px;
}
.sahne-soz .ss-satir{
  font-family:var(--disp); font-weight:600;
  font-size:clamp(15px, 2.1vw, 25px); line-height:1.32;
  color:var(--txt); text-shadow:0 2px 24px rgba(0,0,0,.75);
}
.sahne-soz .ss-satir em{font-style:normal; color:var(--red)}

/* Sahne renkleri.
   ÖNEMLİ — neden hepsi burada, SVG'nin içinde değil:
   fill="var(--red)" gibi SVG SUNUM ÖZNİTELİKLERİNDE değişken
   çözümü tarayıcılar arasında güvenilir değil; çözülmezse
   sahne komple boş çıkar. CSS kuralı olarak her yerde çalışır
   ve tema değişince de birlikte döner.                        */
.sahne-band .sh-bg    {fill:var(--bg)}
.sahne-band .sh-panel {fill:var(--panel)}
.sahne-band .sh-panel2{fill:var(--panel2)}
.sahne-band .sh-gold  {fill:var(--gold)}
.sahne-band .sh-red   {fill:var(--red)}
.sahne-band .sh-halka {stroke:var(--gold)}
.sahne-band .sh-kus   {stroke:var(--muted)}
.sahne-band .sh-tel   {stroke:var(--bg)}
.sahne-band .sh-figur {fill:var(--bg); stroke:var(--red)}
.sahne-band .sh-s-violet{stop-color:var(--violet)}
.sahne-band .sh-s-red   {stop-color:var(--red)}
.sahne-band .sh-s-gold  {stop-color:var(--gold)}

/* Yavaş sürüklenmeler. Hepsi transform — düzen hesabı yapılmaz. */
.bulut-katman{animation:suruk 90s linear infinite}
.bulut-katman.yavas{animation-duration:150s}
.kus-katman{animation:kusgec 54s linear infinite}
@keyframes suruk{from{transform:translateX(0)}    to{transform:translateX(-800px)}}
@keyframes kusgec{from{transform:translate(-140px,14px)} to{transform:translate(1740px,-26px)}}

/* Güneşin nefes alması — 1px'lik parlaklık salınımı */
.gunes-halka{animation:nefes 7s ease-in-out infinite alternate}
@keyframes nefes{from{opacity:.30} to{opacity:.52}}

@media(prefers-reduced-motion:reduce){
  .bulut-katman, .kus-katman, .gunes-halka{animation:none}
  .kus-katman{opacity:0}
}
@media(max-width:600px){
  .sahne-band{height:200px}
  .kus-katman{display:none}
}

/* ── 5b. GÖRSEL ALANLARI ─────────────────────────────────────
   Sahne bandıyla aynı mantığın ortak hâli: her alanda çizili bir
   SVG var, yönetici görsel yüklerse çizim gizlenip yerine görsel
   geçiyor. Üç yerde kullanılıyor — footer üstü şerit, başvuru
   sayfası bandı, "Kadromuz" kadro silueti.                     */
.gorsel-alan{position:relative; overflow:hidden; background:var(--bg)}
.gorsel-alan svg, .gorsel-alan .ga-gorsel{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.gorsel-alan .ga-gorsel{object-fit:cover; object-position:center}
.gorsel-alan.gorselli .ga-cizim{display:none}
/* Üstten zemine eritir — şerit "yapıştırılmış" durmasın */
.gorsel-alan::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--bg) 0%, transparent 30%);
}
.ga-serit{height:clamp(92px, 9.5vw, 150px)}
.ga-form {height:clamp(120px, 13vw, 200px); border-bottom:1px solid var(--line)}
.ga-kadro{height:clamp(96px, 10.5vw, 170px); margin-bottom:26px; border-radius:14px;
  border:1px solid var(--line)}
/* Kadro silueti kartların üstünde durduğu için iki yanı da eritilir */
.ga-kadro::after{
  background:
    linear-gradient(180deg, var(--bg) 0%, transparent 34%),
    linear-gradient(90deg, var(--bg) 0%, transparent 12%, transparent 88%, var(--bg) 100%);
}
/* Gerçek fotoğrafın üstü her zaman biraz koyulaştırılır — bu
   alanların üstünde/altında yazı var, kontrast kaybolmasın.    */
.gorsel-alan.gorselli::after{
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(0,0,0,.28) 34%, rgba(0,0,0,.34) 100%);
}

/* Çizim renkleri — sahne bandındaki gerekçenin aynısı: var(--…)
   SVG sunum özniteliğinde güvenilir çözülmüyor, CSS'te çözülüyor. */
.gorsel-alan .ga-f-bg    {fill:var(--bg)}
.gorsel-alan .ga-f-panel {fill:var(--panel)}
.gorsel-alan .ga-f-panel2{fill:var(--panel2)}
.gorsel-alan .ga-f-gold  {fill:var(--gold)}
.gorsel-alan .ga-s-bg    {stroke:var(--bg)}
.gorsel-alan .ga-s-red   {stroke:var(--red)}
.gorsel-alan .ga-s-muted {stroke:var(--muted)}
.gorsel-alan .ga-st-violet{stop-color:var(--violet)}
.gorsel-alan .ga-st-red   {stop-color:var(--red)}

/* ═══ GİRİŞ SONRASI PANEL ═══ */

/* ── 16. ANA PANEL KARŞILAMA BANDI ───────────────────────────
   Giriş yapınca ilk görülen ekran başlıktan sonra doğrudan
   kartlara giriyordu. Üstüne üst üste binen ses dalgalarından
   bir band geldi — o da panelden değiştirilebilir.            */
.ga-panelust{
  height:clamp(120px, 16vw, 200px);
  border-radius:16px; border:1px solid var(--line);
  margin-bottom:16px;
}
/* Bu band bir kartın içinde durduğu için üstten eritme yerine
   sadece yazının arkası koyulaştırılır.                        */
.ga-panelust::after{
  background:linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,.45) 38%, transparent 72%);
}
.ga-panelust.gorselli::after{
  background:linear-gradient(90deg, var(--bg) 0%, rgba(0,0,0,.55) 42%, rgba(0,0,0,.2) 100%);
}
.gorsel-alan .ga-yazi{
  position:absolute; z-index:2; left:clamp(18px,3vw,32px); top:50%;
  transform:translateY(-50%); max-width:78%;
}
.gorsel-alan .gy-ust{
  font-family:var(--disp); font-size:10px; letter-spacing:.32em;
  color:var(--gold); opacity:.85; margin-bottom:7px;
}
.gorsel-alan .gy-ad{
  font-family:var(--disp); font-weight:800;
  font-size:clamp(17px, 2.4vw, 27px); line-height:1.2; color:var(--txt);
  text-shadow:0 2px 20px rgba(0,0,0,.7);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.gorsel-alan .ga-s-line{stroke:var(--line)}
.gorsel-alan .ga-s-violet{stroke:var(--violet)}
.gorsel-alan .ga-s-gold{stroke:var(--gold)}
.gorsel-alan .ga-st-gold{stop-color:var(--gold)}

/* ── 17. AKTİF SEKME İŞARETİ HİÇ ÇİZİLMİYORDU ────────────────
   GERÇEK KUSUR. style.css'te şu kural var:

     .snav.aktif::before,.snav.active::before{background:var(--mz-grad)!important}

   Yani sol menüde aktif sekmeye "logo gradyanlı işaret" konmak
   istenmiş. Ama ::before'un ÇİZİLMESİ için content gerekir ve
   hiçbir yerde verilmemiş — kural sessizce hiçbir şey yapmıyor.
   (Tek istisna sıra modu: orada content:"⋮⋮" var.)

   İşaret burada gerçekten çiziliyor: solda dikey bir çubuk.
   Renk atamasını style.css'teki !important'lı kural yapmaya
   devam ediyor, burada sadece kutusu veriliyor.

   Sıra modu :not() ile dışarıda bırakıldı — orada ::before
   sürükleme tutamağı, mutlak konumlanırsa tutamak bozulurdu. */
.snav{position:relative}
.side-nav:not(.sira-modu) .snav.active::before,
.side-nav:not(.sira-modu) .snav.aktif::before{
  content:"";
  position:absolute; left:3px; top:9px; bottom:9px; width:3px;
  border-radius:3px;
  background:var(--mz-grad, linear-gradient(var(--violet), var(--red)));
}

/* ── 18. SOL MENÜ AYRACI ─────────────────────────────────────
   Sekme listesi ile alttaki "Kur / Çıkış" butonları arasında
   hiçbir ayrım yoktu; hepsi tek bir yığın gibi duruyordu.     */
.side-ayrac{display:flex; align-items:center; gap:10px; margin:14px 2px 12px}
.side-ayrac::before, .side-ayrac::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line), transparent);
}
.side-ayrac span{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.28em;
  color:var(--muted); opacity:.6; white-space:nowrap;
}

/* Panelde her görsel alanının önerilen ölçüsünü gösteren rozet.
   Ölçüler alanın 1920 piksellik ekranda gerçekten kapladığı
   yerden hesaplandı — uydurma değil.                           */
.olcu-rozet{
  display:inline-flex; align-items:center; gap:7px;
  margin:2px 0 10px; padding:6px 11px;
  border:1px solid var(--line); border-radius:9px;
  background:var(--panel2);
  font-size:12.5px; font-weight:700; color:var(--txt);
  font-variant-numeric:tabular-nums;
}
.olcu-rozet::before{content:"⇲"; color:var(--red); font-weight:800}
.olcu-rozet small{font-weight:500; color:var(--muted)}

/* ── 6. BOŞ DURUMLAR ─────────────────────────────────────────
   Veritabanı henüz boş; ziyaretçinin ana sayfada FİİLEN gördüğü
   şey bu kutu. Kesik çizgili gri dikdörtgen "yapılmadı" der.
   Köşe gönyeleri + soluk kana ile en azından kasıtlı durur.   */
.empty-note{
  position:relative;
  border:1px solid var(--line) !important;
  border-radius:14px;
  background:linear-gradient(180deg, var(--panel2), transparent 70%);
  overflow:hidden;
}
.empty-note::before{
  content:"空";                       /* kara / boş */
  position:absolute; right:14px; top:6px;
  font-family:var(--disp); font-size:34px; line-height:1;
  color:var(--red); opacity:.07; pointer-events:none;
}
.empty-note::after{
  content:""; position:absolute; left:10px; top:10px;
  width:16px; height:16px; border:1px solid var(--red);
  border-right:0; border-bottom:0; opacity:.25; pointer-events:none;
}
.empty-note.kucuk::before{font-size:22px; right:8px}
.empty-note.kucuk::after{display:none}

/* ── 7. KART KÖŞELERİ ────────────────────────────────────────
   Video ve kadro kartlarında hover'da sadece kırmızı parlama
   vardı. Sol üste ince bir gönye eklenince kart "hedeflenmiş"
   gibi durur — parlamayı artırmaya gerek kalmaz.              */
.video-card{position:relative}
.video-card::after, .kadro-card::after{
  content:""; position:absolute; left:9px; top:9px;
  width:15px; height:15px; border:1px solid var(--red);
  border-right:0; border-bottom:0;
  opacity:0; transform:translate(4px,4px);
  transition:opacity .26s, transform .26s; pointer-events:none; z-index:3;
}
.video-card:hover::after, .kadro-card:hover::after{opacity:.85; transform:none}

/* ── 8. MENÜDEN GELİNCE BAŞLIK MENÜNÜN ALTINDA KALIYORDU ─────
   GERÇEK KUSUR. Üst menü yapışkan (sticky) ama scrollToSec düz
   scrollIntoView yapıyor: bölümün tepesi ekranın tepesine
   oturuyor, üst menü de tam onun üstüne biniyor. "Kadromuz"a
   basınca "Kadromuz" başlığı görünmüyordu.

   scroll-margin-top bölümün kaydırma hedefini menü kadar aşağı
   iter. JavaScript'e dokunmadan çözülür.                       */
#view-landing section[id]{scroll-margin-top:86px}
@media(max-width:860px){
  /* Bu genişlikte üst menü alt alta diziliyor, yüksekliği artıyor */
  #view-landing section[id]{scroll-margin-top:154px}
}

/* ── 9. SATIR SONU DENGESİ ───────────────────────────────────
   Başlıklar rastgele kırılıyordu — son satırda tek kelime kalan
   "öksüz" satırlar metni dizilmemiş gösterir. balance başlığın
   satırlarını eşitler, pretty paragrafın son satırında tek
   kelime bırakmaz.                                             */
.hero h1, .sec-title, .bk-title, .sahne-soz .ss-satir,
.fsec, .panel-baslik, .mk-kart b{text-wrap:balance}
.bk-text, .fnote, .mk-alt, .empty-note, footer{text-wrap:pretty}

/* ── 10. SAYILAR ZIPLAMASIN ──────────────────────────────────
   Değişen sayılarda rakam genişlikleri farklı olduğu için
   çevrimiçi sayacı her güncellemede yanındaki yazıyı ittiriyor.
   tabular-nums bütün rakamları eşit genişliğe getirir.         */
.online-sayi, .cev-sayac, .mark-no, .sb-sayac,
.stats-ozet, .stats-grafik{font-variant-numeric:tabular-nums}

/* ── 11. İMLEÇ RENGİ ─────────────────────────────────────────
   Kutulara yazarken yanıp sönen imleç beyazdı — tarayıcı
   varsayılanı. Sitenin rengine alındı.                         */
input, textarea, select, [contenteditable]{caret-color:var(--red)}

/* ── 12. OKUMA ÇUBUĞU + MENÜ GÖLGESİ ─────────────────────────
   Üst menünün altında sayfanın ne kadarının okunduğunu gösteren
   2 piksellik çizgi, ve sayfa kaydırılınca menünün zeminden
   ayrılması için beliren gölge.

   İkisi de kaydırmaya bağlı CSS animasyonu — JavaScript yok,
   kaydırma olayı dinlenmiyor. Desteklemeyen tarayıcıda hiç
   görünmez, hiçbir şey bozulmaz (@supports). Sadece tanıtım
   sayfasında; panelin içinde okuma çubuğunun anlamı yok.       */
@supports (animation-timeline: scroll()){
  body:has(#view-landing:not(.hidden)) #topnav::after{
    content:""; position:absolute; left:0; bottom:-1px;
    width:100%; height:2px; transform:scaleX(0); transform-origin:0 50%;
    background:linear-gradient(90deg, var(--red), var(--violet));
    animation:okumaCubugu linear both;
    animation-timeline:scroll(root block);
  }
  body:has(#view-landing:not(.hidden)) #topnav{
    animation:navGolge linear both;
    animation-timeline:scroll(root block);
    animation-range:0 90px;
  }
  @keyframes okumaCubugu{to{transform:scaleX(1)}}
  @keyframes navGolge{to{box-shadow:0 10px 30px rgba(0,0,0,.45)}}
}

/* ── 14. MÜZİK OYNAT/DURDUR TUŞUNA BASILAMIYORDU ─────────────
   GERÇEK KUSUR (bu sürümlerden gelmiyor, önceden beri vardı).

   Maskot "Işıltı" ile mini müzik oynatıcısı TAM AYNI KÖŞEDE
   duruyor — ikisi de right:18px; bottom:18px. Maskot 66×66 ve
   z-index'i daha yüksek (900 > 880), yani oynatıcının sağ
   ucundaki oynat/durdur ve sonraki tuşlarının tam üstüne
   oturuyor. Tıklayınca tıklama maskota gidiyordu; tuş
   "basılmıyor" gibi görünüyordu.

   İki katmanlı düzeltme:

   1) Maskot SAYFADA VARKEN oynatıcı onun üstüne çıkar. Maskot
      gizlenince DOM'dan tamamen siliniyor, o yüzden :has() ile
      varlığına bakmak yetiyor — gizlendiğinde oynatıcı kendi
      köşesine geri iner, boşluk kalmaz. JavaScript gerekmez.

   2) z-index yine de maskotun üstüne alınır. :has() desteği
      olmayan bir tarayıcıda birinci kural düşse bile tuşlar
      çalışmaya devam etsin diye — üst üste binerlerse çalışan
      tuş kaybolmaktansa dekoratif maskot altta kalsın.        */
   3) Asıl tıklama duvarı JARVIS'ti — ayrıntı jarvis.css içinde.
      Orada kap tıklamaları geçirir hâle getirildi. Ama JARVIS
      küresi (62px) ve maskot (66px) fiziksel olarak hâlâ aynı
      köşede duruyor; oynatıcı ikisinden hangisi varsa onun
      üstüne çıkarılır ki tuşlar açıkta kalsın.                 */
.mini-oynatici{z-index:910}
body:has(.maskot) .mini-oynatici,
body:has(.jarvis-kok:not(.gizli)) .mini-oynatici{bottom:96px}

/* ── 15. FOOTER ──────────────────────────────────────────────
   Ortalanmış tek satır çok çıplaktı; üstüne ince bir ayraç.   */
footer{position:relative}
footer::before{
  content:"◆";
  position:absolute; top:-9px; left:50%; transform:translateX(-50%);
  font-size:11px; color:var(--red); opacity:.5;
  background:var(--bg); padding:0 12px;
}