/* ═══════════════════════════════════════════════════════════
   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: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. */
/* Kayma miktarı 800'den 1600'e çıkarıldı. Sebebi index.html'de
   bulut bloğunda yazılı: desen kayma miktarı kadar bir aralıkta
   periyodik olmak zorunda, yoksa döngü başa dönerken zıplıyor.
   Aralık iki katına çıktığı için süreler de iki katına çıkarıldı —
   bulutların sürüklenme HIZI aynı kaldı, yalnızca tekrar etmeden
   önce iki kat yol alıyorlar.                                    */
.bulut-katman{animation:suruk 180s linear infinite}
.bulut-katman.yavas{animation-duration:300s}
.kus-katman{animation:kusgec 54s linear infinite}
@keyframes suruk{from{transform:translateX(0)}    to{transform:translateX(-1600px)}}
@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, .gorsel-alan img.ga-cizim{
  position:absolute; inset:0; width:100%; height:100%; display:block;
}
.gorsel-alan .ga-gorsel{object-fit:cover; object-position:center}
/* Çizim PNG olarak geldiğinde (footer üstü şerit) SVG'nin
   preserveAspectRatio="xMidYMax slice" karşılığı: ortadan kırp,
   ALT kenara yasla. "center" olsaydı dar ekranda çatı çizgisi
   kırpılır, şerit gökyüzünden ibaret kalırdı.                  */
.gorsel-alan img.ga-cizim{object-fit:cover; object-position:center bottom}
.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-f-red   {fill:var(--red)}
.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)}

/* ── 19. HERO GİRİŞ SIRASI EKSİK KALMIŞTI ───────────────────
   style.css hero-inner'ın çocuklarını sırayla yukarı kaydırarak
   getiriyor (rise) ama gecikmeler yalnızca 6. çocuğa kadar
   tanımlı. Sosyal medya kutusu (7.) ve butonlar (8.) gecikmesiz
   kalıyordu — yani sıra onlara gelmeden, en baştaki logoyla
   AYNI ANDA giriyorlardı ve dizi ortada kopuyordu.
   Kimse "hata" demez ama giriş yarım görünür.                  */
.hero-inner>*:nth-child(7){animation-delay:.46s}
.hero-inner>*:nth-child(8){animation-delay:.54s}
.hero-inner>*:nth-child(9){animation-delay:.62s}

/* ── 20. KÜNYE ŞERİDİ ────────────────────────────────────────
   Hero'da "biz kimiz" anlatılıyordu ama tek bir somut sayı
   yoktu. Üçü de gerçek veriden geliyor; veri yoksa kutu hiç
   çizilmiyor (app.js), uydurma sayı gösterilmiyor.             */
.kunye{
  display:flex; flex-wrap:wrap; gap:0;
  margin-top:38px; padding-top:26px;
  border-top:1px solid var(--line);
  max-width:520px;
}
/* Kutuların hangisinin çizileceği veriye bağlı (boş sayaç yok), o
   yüzden "ilk kutu" değil "ilk GÖRÜNEN kutu" sola dayanmalı ve
   ayraç da ancak solunda görünen bir kutu varsa çizilmeli.
   :first-child bunu beceremez — gizli kutu da first-child olabilir.
   Bunun için ~ kullanılıyor: kural sadece SOLUNDA GÖRÜNEN bir kutu
   olan kutulara işliyor. Hangi kutu düşerse düşsün şerit hep sol
   kenara hizalı başlar ve baştaki/sondaki ayraç boşta kalmaz.     */
.kunye-oge{position:relative; padding:0; min-width:96px}
.kunye-oge:not(.hidden) ~ .kunye-oge:not(.hidden){padding-left:26px; margin-left:26px}
.kunye-oge:not(.hidden) ~ .kunye-oge:not(.hidden)::before{
  content:""; position:absolute; left:0; top:4px; bottom:4px; width:1px;
  background:linear-gradient(180deg, transparent, var(--line), transparent);
}
.kn-sayi{
  display:block;
  font-family:var(--disp); font-weight:800;
  font-size:clamp(26px, 3.4vw, 38px); line-height:1;
  color:var(--txt); font-variant-numeric:tabular-nums;
}
.kn-ad{
  display:block; margin-top:8px;
  font-family:var(--disp); font-size:10px; letter-spacing:.28em;
  color:var(--muted);
}
@media(max-width:600px){
  .kunye{margin-top:28px; padding-top:20px}
  .kunye-oge{min-width:78px}
  .kunye-oge:not(.hidden) ~ .kunye-oge:not(.hidden){padding-left:16px; margin-left:16px}
}

/* ── 21. KAYDIRMA İPUCU ──────────────────────────────────────
   Hero neredeyse tam ekran (92vh) ve altında bölüm olduğunu
   söyleyen hiçbir şey yoktu. İnce bir ray ve içinde aşağı inen
   bir nokta; yanında "KEŞFET".

   Sayfa kaydırılınca kendiliğinden siliniyor — kaydırmaya bağlı
   CSS animasyonu, JavaScript yok, kaydırma olayı dinlenmiyor.
   Desteklemeyen tarayıcıda ipucu hep görünür kalır, o kadar.    */
.kaydir-ipucu{
  position:absolute; left:50%; bottom:22px; z-index:3;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:none; border:0; padding:6px 12px; cursor:pointer;
  color:var(--muted); transition:color .2s;
}
.kaydir-ipucu:hover{color:var(--txt)}
/* style.css bütün butonlara basılınca transform:scale(.97) veriyor.
   Bu düğme transform ile ortalandığı için o kural ortalamayı
   siliyor ve tıklarken sola zıplıyordu — iki hareket birleştirildi. */
.kaydir-ipucu:not(:disabled):active{transform:translateX(-50%) scale(.94)}
.ki-yazi{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.34em;
}
.ki-ray{
  position:relative; display:block;
  width:1px; height:34px;
  background:linear-gradient(180deg, var(--line), transparent);
  overflow:hidden;
}
.ki-ray i{
  position:absolute; left:-1.5px; top:0;
  width:4px; height:4px; border-radius:4px;
  background:var(--red);
  animation:kiIn 2.2s cubic-bezier(.6,0,.4,1) infinite;
}
@keyframes kiIn{
  0%   {transform:translateY(-6px); opacity:0}
  25%  {opacity:1}
  75%  {opacity:1}
  100% {transform:translateY(34px); opacity:0}
}
@supports (animation-timeline: scroll()){
  .kaydir-ipucu{
    animation:ipucuSil linear both;
    animation-timeline:scroll(root block);
    animation-range:0 200px;
  }
  @keyframes ipucuSil{to{opacity:0; visibility:hidden}}
}
@media(prefers-reduced-motion:reduce){ .ki-ray i{animation:none; top:15px} }
/* Alçak ekranda hero içeriğiyle çakışır — orada hiç gösterilmez */
@media(max-height:680px), (max-width:600px){ .kaydir-ipucu{display:none} }

/* ── 22. KEŞFET KARTLARI: ALT SATIR ──────────────────────────
   Kartlarda ikon ve iki kelimelik başlıktan başka bir şey yoktu;
   tıklayınca ne olacağını kimse bilmiyordu. Bir açıklama satırı
   ve altına, üzerine gelince beliren bir eylem sözü geldi.      */
.mk-kart small{
  display:block; margin-top:-4px;
  font-size:12.5px; line-height:1.5; color:var(--muted);
  max-width:24ch;
}
.mk-git{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:4px;
  font-family:var(--disp); font-size:10px; letter-spacing:.26em;
  color:var(--violet);
  opacity:0; transform:translateY(4px);
  transition:opacity .22s, transform .22s;
}
.mk-kart.izle  .mk-git{color:var(--red)}
.mk-kart.manga .mk-git{color:var(--pembe)}
.mk-kart:hover .mk-git, .mk-kart:focus-visible .mk-git{opacity:1; transform:none}
.mk-git i{font-style:normal; transition:transform .22s}
.mk-kart:hover .mk-git i{transform:translateX(3px)}
/* Dokunmatikte hover yok — orada eylem sözü hep açık dursun */
@media(hover:none){ .mk-git{opacity:1; transform:none} }

/* ── 23. BÖLÜM BAŞLIĞININ SAĞI BOŞTU ─────────────────────────
   Başlığın solunda numara ve dikey ray var (3. bölüm), sağında
   ise hiçbir şey yok — satır ortada kesiliyordu. Küçük kırmızı
   üst yazının devamına, sayfa kenarına kadar giden bir saç
   teli çizgisi eklendi. Dergi mizanpajının tamamlayıcısı.       */
.sec-title[data-no] span{
  display:flex; align-items:center; gap:14px;
}
.sec-title[data-no] span::after{
  content:""; flex:1; height:1px;
  background:linear-gradient(90deg, var(--red), var(--line) 22%, transparent 92%);
  opacity:.55;
}

/* ── 24. VİDEO SIRA NUMARASI ─────────────────────────────────
   Yatay video sırasında kaçıncı karttasın belli olmuyordu.
   Başlığın üstüne bölüm numarası geldi — bölüm başlıklarındaki
   içi boş numara diliyle aynı.                                 */
.vk-no{
  display:block; margin-bottom:5px;
  font-family:var(--disp); font-size:11px; font-weight:800; letter-spacing:.14em;
  color:var(--red); opacity:.75; font-variant-numeric:tabular-nums;
}

/* ── 25. KADRO ROL ROZETİ ────────────────────────────────────
   Rol, adın altında soluk gri düz yazıydı; ekipte kimin ne
   yaptığı bir bakışta okunmuyordu. Artık noktası olan bir
   rozet. Renk anahtar kelimeden çıkarılıyor (app.js/rolRengi);
   tanınmayan rol nötr kalır, yanlış renk atanmaz.              */
.kadro-rol{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:8px !important; padding:4px 11px;
  border:1px solid var(--line); border-radius:999px;
  background:var(--panel2);
  font-size:11.5px !important; font-weight:700;
  color:var(--muted);
}
.kadro-rol::before{
  content:""; width:5px; height:5px; border-radius:5px;
  background:currentColor; opacity:.9; flex:none;
}
.kadro-rol.rol-ses  {color:var(--red)}
.kadro-rol.rol-cev  {color:var(--violet)}
.kadro-rol.rol-edit {color:var(--gold)}
.kadro-rol.rol-yonet{color:var(--pembe)}
.kadro-card:hover .kadro-rol{border-color:currentColor}

/* Discord sosyal butonu — diğer üçünde olan hover davranışının
   aynısı, kendi markasının moruyla.                            */
.sosyal-btn.dc:hover{
  background:#5865F2; color:#fff; border-color:transparent;
  box-shadow:0 8px 24px rgba(88,101,242,.42);
}

/* ── 26. FOOTER: TEK SATIRDAN DÖRT SÜTUNA ────────────────────
   Eski footer ortalanmış tek satırdı — logo, "© yıl" ve bir söz.
   Sayfanın sonu boşluğa düşüyordu. Aynı yer artık marka, iki
   bağlantı sütunu, sosyal butonlar ve bir alt bar taşıyor.

   style.css'teki footer kuralı ortalıyor (text-align:center);
   burada sola alınıyor.                                        */
footer{text-align:left; padding-top:52px}
.ft-ust{
  display:grid; gap:34px 30px;
  grid-template-columns:minmax(240px, 1.6fr) repeat(2, minmax(120px, .8fr)) minmax(140px, 1fr);
  padding-bottom:30px; border-bottom:1px solid var(--line);
}
.ft-marka{display:flex; align-items:flex-start; gap:14px}
/* style.css footer-logo'yu 26px satır içi ikon gibi kuruyor;
   burada marka bloğunun başına geçtiği için büyütülüyor.       */
.ft-marka .footer-logo{width:46px; margin:0; flex:none}
.ft-ad{
  font-family:var(--disp); font-weight:800; font-size:17px;
  letter-spacing:.06em; color:var(--txt);
  display:flex; align-items:baseline; gap:9px; flex-wrap:wrap;
}
.ft-kana{
  font-size:11px; font-weight:600; letter-spacing:.22em;
  color:var(--red); opacity:.7;
}
.ft-soz{margin-top:8px; font-size:13.5px; line-height:1.6; max-width:34ch}
.ft-sutun{display:flex; flex-direction:column; align-items:flex-start; gap:9px}
.ft-sutun b{
  font-family:var(--disp); font-size:9.5px; letter-spacing:.3em;
  color:var(--gold); opacity:.85; margin-bottom:3px;
}
/* Sütundaki bağlantılar buton ve <a> karışık — ikisi de aynı
   görünsün diye ortak kural.                                   */
.ft-sutun button, .ft-sutun a{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:13.5px; font-weight:600; text-align:left;
  color:var(--muted); text-decoration:none;
  position:relative; transition:color .18s, padding-left .18s;
}
.ft-sutun button::before, .ft-sutun a::before{
  content:""; position:absolute; left:0; top:50%; width:0; height:1px;
  background:var(--red); transition:width .18s;
}
.ft-sutun button:hover, .ft-sutun a:hover{color:var(--txt); padding-left:14px}
.ft-sutun button:hover::before, .ft-sutun a:hover::before{width:9px}
.ft-sonsuz{color:var(--gold)}
.ft-takip .sosyal-medya{display:flex; gap:9px; flex-wrap:wrap; margin-top:2px}
.ft-takip .sosyal-btn{width:38px; height:38px; border-radius:10px}
.ft-bos{font-size:12.5px; opacity:.7}

.ft-alt{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding-top:20px; font-size:12.5px;
}
.ft-ayrac{color:var(--red); opacity:.5}
.ft-mark{
  font-family:var(--disp); font-size:10px; letter-spacing:.22em;
  color:var(--muted); opacity:.8;
}
.ft-mark b{color:var(--red); margin-left:5px; letter-spacing:0}
.ft-yukari{
  margin-left:auto;
  display:inline-flex; align-items:center; gap:8px;
  padding:8px 15px; border-radius:999px;
  border:1px solid var(--line); background:var(--panel2);
  color:var(--muted); font-size:12.5px; font-weight:700; cursor:pointer;
  transition:border-color .18s, color .18s;
}
.ft-yukari i{font-style:normal; transition:transform .18s}
.ft-yukari:hover{border-color:var(--red); color:var(--txt)}
.ft-yukari:hover i{transform:translateY(-2px)}
@media(max-width:860px){
  .ft-ust{grid-template-columns:1fr 1fr}
  .ft-marka{grid-column:1/-1}
}
@media(max-width:520px){
  .ft-ust{grid-template-columns:1fr; gap:26px}
  .ft-yukari{margin-left:0}
}

/* ═══ 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, .sahne-soz .ss-satir,
.fsec, .panel-baslik, .mk-kart b{text-wrap:balance}
.mf-p, .hero-lead, .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.                 */
/* Oynatıcı Işıltı'nın (900) üstünde kalsın. Buradaki eski
   "bottom:96px" kuralı kaldırıldı: sabit bir sayıydı ve :has()
   sayesinde style.css'teki medya sorgusunu eziyordu — telefonda
   Jarvis 78px yukarıdayken oynatıcı yine üstüne biniyordu.
   Yerleşim artık style.css'teki köşe şeridi değişkenlerinden
   geliyor, tek yerden yönetiliyor. */
.mini-oynatici{z-index:910}

/* ── 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;
}


/* ── 27. HİGANBANA (彼岸花) ──────────────────────────────────
   Kırmızı örümcek zambağı. Japonya'da eylül ekinoksunda —
   "higan" haftasında — açıyor; anime ikonografisinde eşik ve
   ayrılıkla özdeşleşmiş bir çiçek. Mizanis'in kırmızısı zaten
   o kırmızı, motif palete sonradan yamanmıyor.

   Şeklin imzası ve sıradan bir çiçekten farkı: altı DAR taç
   yaprağı uçlarında GERİYE kıvrılıyor, ercikler taç
   yapraklarından daha uzun ve dışa yay çiziyor. Bu ikisi
   olmadan çizim papatyaya benziyor.

   Neden maske, neden <img> değil: mask-image çizimi
   currentColor / background ile boyuyor. Böylece tek bir şekil
   tanımı temaya uyuyor ve bu dosyanın "sabit renk yok"
   kuralını bozmuyor. Şekil style.css'te --hb-* değişkenleri
   olarak duruyor (tek kaynak).

   24px altında altı yaprak + altı ercik lekeye dönüşüyor;
   küçük boyutlarda --hb-mini kullanılıyor (beş yaprak, ercik
   ucu yok, çizgi kalın).                                      */

.hb{
  display:inline-block; flex:none;
  background:currentColor;
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
}
.hb.mini{-webkit-mask-image:var(--hb-mini); mask-image:var(--hb-mini)}
.hb.sapli{-webkit-mask-image:var(--hb-sapli); mask-image:var(--hb-sapli)}

/* ── 28. BOŞ DURUM: KANJİ FİLİGRANINA ÇİÇEK ─────────────────
   Madde 6'daki 空 filigranı ve köşe gönyesi duruyor — ikisi de
   işe yarıyordu. Eksik olan, kutunun ALT tarafının bomboş
   kalmasıydı: göz yazıyı okuyup boşluğa düşüyordu.

   Alta soluk bir higanbana ve iki yana sönen bir çizgi geldi.
   Kutu artık başlıyor ve BİTİYOR.                             */
/* Çiçeği ::after'a alabilmek için köşe gönyesi arka plan
   gradyanına taşındı: iki ince dikdörtgen aynı işi görüyor ve
   var(--red) sayesinde tema rengini almaya devam ediyor.

   Neden bu takla: gönye ::after'ı tutuyordu, ::before de 空
   filigranında. Çiçeği üçüncü bir katman olarak arka plana
   koyunca OPAKLIĞINI ayarlayamıyorduk (arka plan görselinin
   opacity'si yok) ve çiçek süs olması gerekirken dikkat
   çekiyordu. Maskeli ::after hem opaklığı hem tema rengini
   veriyor.                                                    */
.empty-note{
  padding-bottom:38px;
  background-image:
    linear-gradient(180deg, var(--panel2), transparent 70%),
    linear-gradient(var(--red), var(--red)),
    linear-gradient(var(--red), var(--red));
  background-repeat:no-repeat;
  background-position:center, 10px 10px, 10px 10px;
  background-size:auto, 16px 1px, 1px 16px;
}
.empty-note::after{
  /* madde 6'daki gönye kuralının yerini alıyor */
  content:""; position:absolute;
  left:50%; bottom:12px; transform:translateX(-50%);
  width:20px; height:20px; border:0;
  background:var(--red); opacity:.22;
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
  pointer-events:none;
}
.empty-note.kucuk{
  padding-bottom:28px;
  background-image:linear-gradient(180deg, var(--panel2), transparent 70%);
}
.empty-note.kucuk::after{width:14px; height:14px; bottom:8px}

/* ── 29. YÜKLENİYOR: AÇAN ÇİÇEK ──────────────────────────────
   Eskiden yanıp sönen mor bir yazıydı. Yanıp sönme "bir şey
   ters gitti" diye okunuyor; açılıp kapanan bir çiçek
   "çalışıyor" diye. 23 yerde kullanılıyor, tek kural hepsini
   değiştiriyor.                                               */
.ai-yukleniyor{
  display:inline-flex; align-items:center; gap:9px;
  color:var(--muted); animation:none;
}
.ai-yukleniyor::before{
  content:""; width:16px; height:16px; flex:none;
  background:var(--red);
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
  animation:hbAc 1.9s cubic-bezier(.4,0,.3,1) infinite;
}
/* Tam tur DÖNMÜYOR: 360° dönen bir çiçek fırıldağa benziyor.
   Açılıp geri kapanıyor. */
@keyframes hbAc{
  0%,100%{transform:scale(.5) rotate(-30deg); opacity:.3}
  55%    {transform:scale(1)  rotate(10deg);  opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .ai-yukleniyor::before{animation:hbSolu 2s ease-in-out infinite}
  @keyframes hbSolu{0%,100%{opacity:.35}50%{opacity:1}}
}

/* ── 30. SEKME BAŞLIĞINA SAP ─────────────────────────────────
   Giriş yaptıktan sonra her sekmenin tepesinde tek bir başlık
   var ve altı boştu. Başlığın soluna, dikey ray hizasına ince
   bir higanbana sapı kondu — bölüm başlıklarındaki (madde 3)
   ray ile aynı aileden, ama uygulama tarafında.               */
.pane-title{position:relative}
.pane-title::after{
  content:""; position:absolute; left:-2px; bottom:-9px;
  width:13px; height:13px; opacity:.5;
  background:var(--red);
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
  pointer-events:none;
}

/* ── 31. FORM BÖLÜM BAŞLIKLARI ───────────────────────────────
   .fsec altın renkli bir başlık ve üstünde düz bir çizgi.
   Çizgi kenardan kenara gidiyordu; bölüm başlığından çok
   "yatay kural" gibi duruyordu. Başlığın hizasında sönen bir
   çizgi ve minik bir higanbana, bölümün NEREDE başladığını
   gösteriyor.                                                 */
.fsec{position:relative; border-top:0; padding-top:22px; display:flex;
  align-items:center; gap:9px}
.fsec::before{
  content:""; position:absolute; left:0; right:0; top:0; height:1px;
  background:linear-gradient(90deg, var(--line) 0%, var(--line) 34%, transparent 92%);
}
.fsec::after{
  content:""; width:11px; height:11px; flex:none; order:-1;
  background:var(--gold); opacity:.55;
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
}

/* ── 32. SOL MENÜ GRUP BAŞLIKLARI ────────────────────────────
   "ÇALIŞMA", "ATÖLYELER" gibi grup başlıkları menüde sadece
   küçük harfli birer satırdı; 47 sekmelik listede grupların
   nerede başladığı ancak dikkatle bakınca görünüyordu.
   Sol tarafa dikey bir iz ve açıkken bir çiçek geldi.         */
.nav-grup{position:relative}
.nav-grup-bas{position:relative}
.nav-grup-bas::after{
  content:""; position:absolute; left:-6px; top:50%; transform:translateY(-50%);
  width:9px; height:9px; opacity:0; transition:opacity .25s;
  background:var(--red);
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
}
.nav-grup:hover > .nav-grup-bas::after,
.nav-grup.acik > .nav-grup-bas::after{opacity:.6}

/* ── 33. MENÜNÜN DİBİ ────────────────────────────────────────
   Kenar çubuğunun sonu boşlukta bitiyordu. Saplı bir higanbana
   ve tek satır dikey yazı — sayfanın "bittiğini" söylüyor.
   Yalnızca 780px üstünde: dar ekranda menü zaten kayıyor ve
   süs yer kaplıyor.                                           */
@media (min-width:781px){
  .sidebar::after{
    content:""; display:block; height:74px; margin:20px auto 8px; width:34px;
    background:var(--red); opacity:.13;
    -webkit-mask:var(--hb-sapli) center/contain no-repeat;
    mask:var(--hb-sapli) center/contain no-repeat;
  }
}

/* ── 34. İÇERİK ALANININ SAĞ KENARI ──────────────────────────
   .content 1000px'te duruyor; 1440px'lik ekranda sağda 400px
   boşluk kalıyor ve orada HİÇBİR ŞEY yok — sayfa sola yaslanmış
   duruyordu. Çok soluk, dikey bir higanbana izi o kenarı
   "kenar" yapıyor. Tıklanamaz, kaydırmayla akmıyor.
   1400px altında hiç çizilmiyor: orada boşluk zaten yok.      */
@media (min-width:1400px){
  .app-shell{position:relative}
  .app-shell::after{
    content:""; position:absolute; right:34px; top:120px; bottom:60px; width:56px;
    pointer-events:none; z-index:0;
    background:var(--red); opacity:.05;
    -webkit-mask:var(--hb-tam) top center/56px 56px no-repeat;
    mask:var(--hb-tam) top center/56px 56px no-repeat;
  }
}

/* ── 35. DOSYA SEÇME ALANLARI ────────────────────────────────
   Sitede 41 tane <input type="file"> var ve hepsi tarayıcının
   varsayılan görünümüyle duruyordu: gri "Choose File" düğmesi
   ve yanında "No file chosen". İngilizce, sistem yazı tipiyle,
   temayla hiç ilgisi olmayan bir kutu — sayfanın en bitmemiş
   duran parçasıydı.

   ::file-selector-button düğmenin KENDİSİNİ biçimlendiriyor;
   yanındaki "dosya seçilmedi" yazısı tarayıcının ve dilinin
   elinde, ona dokunulamıyor — ama düğme sitenin diline
   girince o yazı da sırıtmıyor.                               */
input[type="file"]{
  padding:9px 12px;
  cursor:pointer;
  color:var(--muted);
  font-size:13px;
}
input[type="file"]::file-selector-button{
  margin-right:12px;
  padding:9px 16px;
  min-height:38px;
  border:1px solid var(--line);
  border-radius:9px;
  background:var(--panel2);
  color:var(--txt);
  font-family:var(--body);
  font-size:13px;
  font-weight:700;
  cursor:pointer;
  transition:border-color .18s, color .18s, background .18s;
}
input[type="file"]::file-selector-button:hover{
  border-color:var(--red);
  color:var(--red);
  background:color-mix(in srgb, var(--red) 8%, var(--panel2));
}
input[type="file"]:hover{border-color:var(--line)}

@media (pointer:coarse){
  input[type="file"]::file-selector-button{min-height:44px; padding:11px 16px}
}


/* ── 36. HERO: HİGANBANA TARLASI ─────────────────────────────
   Hero'da üç dekoratif katman vardı — kağıt dokusu, vinyet ve
   sağdaki ミザニス kanası — ve üçü de ARKA PLAN'dı: hiçbiri
   sayfanın kendi motifini taşımıyordu. Higanbana v72'de sitenin
   her yerinde 12px'lik bir işaret olarak kullanılıyor; ilk
   ekranda hiç görünmemesi motifi "ikon" seviyesinde bırakıyordu.

   Alt kenara farklı boy ve yükseklikte saplı çiçekler kondu.
   Hero zaten overflow:hidden — sapların dibi kesiliyor ve çiçek
   ekrana giren bir tarlanın üstü gibi duruyor.

   Kendi elementi (.hb-tarla) çünkü .hero'nun iki sözde
   elementi de dolu: ::before doku gradyanı, ::after alttaki
   iki piksellik kırmızı-mor şerit.

   Boyanma renk DEĞİL maske üzerinden: tek background rengi
   var(--red) ve tema değişince tarla da onunla dönüyor.       */
.hb-tarla{
  /* ÖLÇÜLDÜ: 126–175px'lik çiçekler "havai fişek" gibi okunuyordu
     ve sol alttaki künye şeridinin ("2 Kadro") üstüne biniyordu.
     Üç şey düzeltti:
       · boy küçüldü (60–104px) — bu ölçekte çizgi kalınlığı/şekil
         oranı, ayraçtaki çiçekle aynı ve orada doğru okunuyor
       · kap 40px AŞAĞI kaydı: sapların dibi hero'nun dışında
         kalıyor, çiçekler "aşağıdan bitmiş" gibi duruyor —
         boşlukta asılı durmuyorlar
       · orta bölge (%20–%68) boşaltıldı: metin, künye şeridi ve
         "KEŞFET" ipucu orada. */
  position:absolute; left:0; right:0; bottom:-40px; height:170px;
  pointer-events:none; z-index:0;
  background:var(--red); opacity:.16;
  -webkit-mask:
    var(--hb-sapli)  2% bottom/ 76px 106px no-repeat,
    var(--hb-sapli) 13% bottom/ 60px  84px no-repeat,
    var(--hb-sapli) 74% bottom/ 68px  95px no-repeat,
    var(--hb-sapli) 86% bottom/104px 145px no-repeat,
    var(--hb-sapli) 96% bottom/ 64px  89px no-repeat;
  mask:
    var(--hb-sapli)  2% bottom/ 76px 106px no-repeat,
    var(--hb-sapli) 13% bottom/ 60px  84px no-repeat,
    var(--hb-sapli) 74% bottom/ 68px  95px no-repeat,
    var(--hb-sapli) 86% bottom/104px 145px no-repeat,
    var(--hb-sapli) 96% bottom/ 64px  89px no-repeat;
}
/* Dar ekranda hero'nun alt yarısı metin: iki çiçek, iki kenarda. */
@media (max-width:700px){
  .hb-tarla{
    height:120px; bottom:-30px; opacity:.13;
    -webkit-mask:
      var(--hb-sapli)  3% bottom/54px 75px no-repeat,
      var(--hb-sapli) 94% bottom/70px 98px no-repeat;
    mask:
      var(--hb-sapli)  3% bottom/54px 75px no-repeat,
      var(--hb-sapli) 94% bottom/70px 98px no-repeat;
  }
}

/* ── 37. DÜŞEN YAPRAKLAR: SAKURA → HİGANBANA ────────────────
   .sakura hero'da on tane düşen yaprak çiziyordu ve yaprak
   "12px'lik, iki köşesi yuvarlatılmış pembe kare"ydi
   (border-radius:12px 2px 12px 2px). Uzaktan sakura gibi
   duruyor ama sitenin motifiyle hiçbir ilgisi yoktu — ve
   sayfanın geri kalanı artık higanbana konuşuyor.

   Aynı elementler, aynı animasyon, YENİ ŞEKİL: tek bir
   higanbana taç yaprağı maskesi. Sınıf adı .sakura kalıyor —
   ayarlarda `sakuraGoster` anahtarı var ve db.json'da kayıtlı;
   sırf isim güzelliği için ayar anahtarı göçürmek, eski
   kayıtları görünmez biçimde bozar.

   Renk artık sabit pembe değil: var(--red) → var(--pembe)
   geçişi, yani tema değişince yapraklar da dönüyor.          */
.sakura span{
  border-radius:0;
  background:linear-gradient(150deg, var(--pembe), var(--red));
  opacity:.62;
  -webkit-mask:var(--hb-yaprak) center/contain no-repeat;
  mask:var(--hb-yaprak) center/contain no-repeat;
}
/* Yaprak ince ve uzun: kare oran onu tıknaz gösteriyordu. */
.sakura span{width:11px; height:19px}
.sakura span:nth-child(2){width:8px;  height:14px}
.sakura span:nth-child(4){width:7px;  height:13px}
.sakura span:nth-child(6){width:9px;  height:16px}
.sakura span:nth-child(8){width:7px;  height:12px}
.sakura span:nth-child(10){width:8px; height:15px}
@media (prefers-reduced-motion:reduce){
  /* Düşme kapalıyken on yaprak hero'nun tepesinde -30px'te
     üst üste yığılıyordu; hiç çizilmesinler. */
  .sakura{display:none}
}

/* ── 38. BÖLÜM BAŞLIĞI ÜST ETİKETİ ──────────────────────────
   .sec-title span ("MANİFESTO", "ÇALIŞMALARIMIZ") kırmızı,
   harf aralıklı bir üst etiket. Etiketin sonuna minik bir
   çiçek: madde 3'teki numara + ray ile aynı aileden, satırın
   bittiğini söylüyor.                                        */
.sec-title span{display:flex; align-items:center; gap:8px}
.sec-title span::after{
  content:""; width:10px; height:10px; flex:none;
  background:var(--red); opacity:.6;
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
}

/* ── 39. BÖLÜM AYRACI ────────────────────────────────────────
   Tanıtım sayfası altı bölüm ve aralarında HİÇBİR ŞEY yok:
   bir bölüm bitiyor, boşluk, sonraki başlıyor. Bölümlerin
   kendi iç boşlukları büyük olduğu için nerede bittikleri
   belli olmuyordu.

   İki yana sönen bir çizgi ve ortada bir çiçek. Kitapta bölüm
   sonuna konan süs (fleuron) ile aynı iş.                    */
.hb-ayrac{
  display:flex; align-items:center; justify-content:center; gap:18px;
  margin:6px 7vw 10px; pointer-events:none;
}
.hb-ayrac::before, .hb-ayrac::after{
  content:""; height:1px; flex:1; max-width:230px;
}
.hb-ayrac::before{background:linear-gradient(90deg, transparent, var(--line))}
.hb-ayrac::after {background:linear-gradient(90deg, var(--line), transparent)}
.hb-ayrac i{
  display:block; width:19px; height:19px; flex:none;
  background:var(--red); opacity:.45;
}
.hb-ayrac i{
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
}

/* ── 40. ANA EYLEM DÜĞMESİ ───────────────────────────────────
   "Ekibe Katıl" sitenin en önemli düğmesi ve hover'ında yalnızca
   bir gölge değişimi vardı. Sağdan içeri açılan soluk bir çiçek
   ekleniyor — düğmenin metnini itmiyor, üstünde duruyor.

   Sadece hero'daki eylem çubuğunda: .btn-red sitede 60'tan fazla
   yerde kullanılıyor ve hepsine süs koymak süsü değersizleştirir. */
.hero-actions .btn-red{position:relative; overflow:hidden}
.hero-actions .btn-red::after{
  content:""; position:absolute; right:10px; top:50%;
  width:26px; height:26px; margin-top:-13px;
  background:#fff; opacity:0;
  transform:translateX(14px) rotate(-40deg);
  transition:opacity .3s, transform .45s cubic-bezier(.2,.9,.3,1);
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
  pointer-events:none;
}
.hero-actions .btn-red:hover::after{opacity:.3; transform:none}

/* ── 41. FOOTER'IN ORTA EKSENİ ───────────────────────────────
   Footer dört sütuna çıktı (madde 26) ama sütunların üstünde,
   sayfanın en altında hâlâ düz bir kenarlık vardı. Ortaya
   oturan bir çiçek, sayfanın "kapandığını" söylüyor.

   footer::before madde 15'te kullanılıyor (üst çizgi), o yüzden
   ::after.                                                    */
footer::after{
  content:""; position:absolute; left:50%; top:-11px;
  width:22px; height:22px; margin-left:-11px;
  background:var(--bg);              /* çizgiyi kesiyor: çiçek çizginin
                                        ÜSTÜNE oturmuş gibi dursun */
  box-shadow:0 0 0 6px var(--bg);
  pointer-events:none;
}
/* Rengi maskeyle taşıyan ikinci bir katman gerekiyordu; tek
   elementte hem zemini kesip hem çiçeği boyayamıyoruz. */
footer .footer-cicek{
  position:absolute; left:50%; top:-11px; z-index:1;
  width:22px; height:22px; margin-left:-11px;
  background:var(--red); opacity:.55; pointer-events:none;
  -webkit-mask:var(--hb-tam) center/contain no-repeat;
  mask:var(--hb-tam) center/contain no-repeat;
}

/* ── 42. BİLDİRİM BALONU ─────────────────────────────────────
   toast() sitede 180'den fazla yerde çağrılıyor; sağ altta beliren
   bu kutu, üyenin bir işlemin sonucunu gördüğü tek yer. Kırmızı
   kenarlı düz bir dikdörtgendi.                                */
.toast{display:flex; align-items:center; gap:10px}
.toast::before{
  content:""; width:15px; height:15px; flex:none;
  background:var(--red); opacity:.85;
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
}

/* ── 43. KİPLİ PENCERE BAŞLIĞI ───────────────────────────────
   .modal-kutu sitede otuzdan fazla yerde açılıyor ve başlığı
   altın renkli düz bir satırdı.                               */
.modal-ust h3{display:flex; align-items:center; gap:9px}
.modal-ust h3::before{
  content:""; width:13px; height:13px; flex:none;
  background:var(--gold); opacity:.7;
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
}


/* ── 44. UÇUŞAN PARTİKÜLLER ──────────────────────────────────
   ŞİKÂYET: "partiküller PC'de görünmüyor."

   Görünmüyorlardı çünkü sayı ondu ve düşüş süreleri 11–17 sn'ydi.
   92vh'lik bir hero'da bu, ekranda AYNI ANDA ortalama iki buçuk
   yaprak demek — üstelik 11px, %55 opaklıkta ve arkasında kağıt
   dokusu (madde 1) olan koyu bir zeminde. Efekt teknik olarak
   çalışıyor, algısal olarak yok.

   Üç şey birden değişti; teki yetmiyordu:
     · SAYI     10 → 18 (hero) — aynı anda ~5 yaprak
     · BOYUT    hepsi 7–12px idi; artık 9–24px. Farklı boy
                derinlik veriyor, hepsi aynı boyken düz bir
                katman gibi duruyordu.
     · IŞIK     drop-shadow ile hafif bir hâle. Kırmızı yaprak
                koyu zeminde kayboluyordu; hâle onu zeminden
                ayırıyor.

   İkinci katman (.hb-toz) yavaşça YUKARI süzülen zerreler.
   Yaprak düşerken zerre çıkıyor: iki yönlü hareket, tek yönlü
   yaprak yağmurundan hem daha sakin hem daha derin duruyor.   */

.sakura span{
  /* Düşerken kanat çırpma. Tek bir 'fall' animasyonu
     transform'u tutuyordu; dönüş 360°'lik düz bir tur olduğu
     için yaprak fırıldak gibi dönüyordu. Ara adımlar
     eklenince yaprak yalpalıyor. */
  animation:hbDus linear infinite, hbSalin ease-in-out infinite alternate;
  filter:drop-shadow(0 0 6px rgba(255,61,90,.45));
  will-change:transform;
}
/* rotateY ÖNCE 0→560° idi ve yaprak turun büyük kısmını kenarı
   dönük geçiriyordu: ekranda yaprak değil ince bir ÇİZGİ
   görünüyordu (ekran görüntüsünde tırmık izi gibi). Artık ±38°
   ile sınırlı — hafif bir eğilme veriyor, yaprak hep yüzüyle
   duruyor. Savrulmayı rotateZ yapıyor. */
@keyframes hbDus{
  0%  {transform:translateY(-6vh)  rotateZ(-8deg)  rotateY(  0deg)}
  25% {transform:translateY(22vh)  rotateZ(-38deg) rotateY( 34deg)}
  50% {transform:translateY(52vh)  rotateZ( 22deg) rotateY(-30deg)}
  75% {transform:translateY(80vh)  rotateZ(-26deg) rotateY( 26deg)}
  100%{transform:translateY(108vh) rotateZ( 14deg) rotateY(  0deg)}
}
/* Yanal salınım margin ile: transform zaten düşüşte kullanılıyor
   ve ikinci bir transform animasyonu birincisini eziyor. */
@keyframes hbSalin{from{margin-left:-26px}to{margin-left:26px}}

/* Boy/opaklık dağılımı. Elle yazılıyor çünkü bu dosyada JS yok
   ve rastgelelik olmadan da düzensiz görünmesi gerekiyor —
   eşit aralıklı değerler göze "dizi" olarak çarpıyor.         */
.sakura span:nth-child(1) {left: 4%; width:14px;height:24px; opacity:.70; animation-duration:13s,3.1s}
.sakura span:nth-child(2) {left:11%; width: 9px;height:15px; opacity:.45; animation-duration:17s,2.6s; animation-delay:2s,0s}
.sakura span:nth-child(3) {left:18%; width:12px;height:20px; opacity:.62; animation-duration:11s,3.4s; animation-delay:5s,.4s}
.sakura span:nth-child(4) {left:25%; width:16px;height:27px; opacity:.78; animation-duration:15s,2.9s; animation-delay:1s,0s}
.sakura span:nth-child(5) {left:32%; width: 8px;height:14px; opacity:.38; animation-duration:19s,3.2s; animation-delay:7s,.2s}
.sakura span:nth-child(6) {left:39%; width:11px;height:19px; opacity:.58; animation-duration:12s,2.7s; animation-delay:3s,0s}
.sakura span:nth-child(7) {left:46%; width:13px;height:22px; opacity:.66; animation-duration:16s,3.5s; animation-delay:9s,.5s}
.sakura span:nth-child(8) {left:52%; width: 9px;height:16px; opacity:.42; animation-duration:14s,3s;   animation-delay:4s,0s}
.sakura span:nth-child(9) {left:58%; width:15px;height:25px; opacity:.74; animation-duration:10s,2.8s; animation-delay:6s,.3s}
.sakura span:nth-child(10){left:64%; width:10px;height:17px; opacity:.5;  animation-duration:18s,3.3s; animation-delay:8s,0s}
.sakura span:nth-child(11){left:70%; width:12px;height:21px; opacity:.6;  animation-duration:13s,2.5s; animation-delay:0s,.6s}
.sakura span:nth-child(12){left:76%; width: 8px;height:13px; opacity:.36; animation-duration:20s,3.6s; animation-delay:11s,0s}
.sakura span:nth-child(13){left:81%; width:17px;height:28px; opacity:.8;  animation-duration:12s,2.9s; animation-delay:2.5s,.2s}
.sakura span:nth-child(14){left:86%; width:10px;height:18px; opacity:.52; animation-duration:16s,3.1s; animation-delay:6.5s,0s}
.sakura span:nth-child(15){left:91%; width:13px;height:23px; opacity:.68; animation-duration:11s,2.7s; animation-delay:9.5s,.4s}
.sakura span:nth-child(16){left:95%; width: 9px;height:15px; opacity:.44; animation-duration:15s,3.4s; animation-delay:3.5s,0s}
.sakura span:nth-child(17){left:  8%;width:11px;height:19px; opacity:.55; animation-duration:14s,3s;   animation-delay:12s,.5s}
.sakura span:nth-child(18){left: 67%;width:15px;height:26px; opacity:.72; animation-duration:17s,2.6s; animation-delay:5.5s,0s}

/* ── Yükselen zerreler ── */
.hb-toz{position:absolute; inset:0; pointer-events:none; overflow:hidden}
.hb-toz span{
  position:absolute; bottom:-14px;
  width:4px; height:4px; border-radius:50%;
  background:var(--red);
  box-shadow:0 0 9px 2px rgba(255,61,90,.4);
  animation:hbYuksel linear infinite;
  will-change:transform, opacity;
}
/* Zerre YOK OLARAK bitiyor: ekranın tepesinde birden kaybolan
   bir nokta göze takılıyor, sönerek çıkan takılmıyor. */
@keyframes hbYuksel{
  0%  {transform:translate(0,0)      scale(.6); opacity:0}
  12% {opacity:.85}
  55% {transform:translate(22px,-46vh) scale(1)}
  85% {opacity:.5}
  100%{transform:translate(-14px,-96vh) scale(.5); opacity:0}
}
.hb-toz span:nth-child(1) {left: 7%; animation-duration:15s; animation-delay:0s}
.hb-toz span:nth-child(2) {left:15%; animation-duration:21s; animation-delay:3s;  width:3px;height:3px}
.hb-toz span:nth-child(3) {left:24%; animation-duration:18s; animation-delay:7s}
.hb-toz span:nth-child(4) {left:33%; animation-duration:24s; animation-delay:1.5s;width:5px;height:5px}
.hb-toz span:nth-child(5) {left:42%; animation-duration:16s; animation-delay:9s;  width:3px;height:3px}
.hb-toz span:nth-child(6) {left:51%; animation-duration:22s; animation-delay:5s}
.hb-toz span:nth-child(7) {left:60%; animation-duration:19s; animation-delay:12s; width:5px;height:5px}
.hb-toz span:nth-child(8) {left:69%; animation-duration:17s; animation-delay:2s;  width:3px;height:3px}
.hb-toz span:nth-child(9) {left:78%; animation-duration:23s; animation-delay:8s}
.hb-toz span:nth-child(10){left:86%; animation-duration:20s; animation-delay:4s;  width:4px;height:4px}
.hb-toz span:nth-child(11){left:93%; animation-duration:14s; animation-delay:10s; width:3px;height:3px}
.hb-toz span:nth-child(12){left:97%; animation-duration:25s; animation-delay:6s}

/* Dar ekranda 18 yaprak + 12 zerre = 30 sürekli animasyon; telefon
   GPU'sunda kaydırma takılıyor. Yarıya iniyor. */
@media (max-width:700px){
  .sakura span:nth-child(2n){display:none}
  .hb-toz span:nth-child(2n){display:none}
}
@media (prefers-reduced-motion:reduce){
  .hb-toz{display:none}
}


/* ═══════════════════════════════════════════════════════════
   v73 — PANEL KATMANI

   Bu dosyanın ilk 44 maddesi neredeyse tamamen TANITIM
   sayfasına bakıyordu: hero, sahne bandı, kadro kartları,
   footer. Oysa giriş yapmış bir üye vaktinin tamamını
   panelde geçiriyor ve panel hiç bu muameleyi görmemişti —
   kartlar düz bir dikdörtgen, rozetler gri, boş alan bomboş.
   Aşağısı aynı dili (higanbana motifi, logo gradyanı, ince
   editoryal çizgi) uygulamanın İÇİNE taşıyor.

   Yukarıdaki tek kural burada da geçerli: sabit renk yok,
   her şey var(--…) üstünden. Tema dönünce panel de dönüyor.
   ═══════════════════════════════════════════════════════════ */

/* ── 45. KART YÜZEYİ ─────────────────────────────────────────
   Bütün kutular tek bir düz renkti: background:var(--panel).
   Ekranda yan yana altı tane durunca aralarındaki tek fark
   içlerindeki yazı oluyordu — kart "kart" gibi durmuyor,
   arka planın üstüne çizilmiş bir çerçeve gibi duruyordu.

   Gerçek kartın tepesi ışığa daha yakındır. Üstten aşağı
   ~110px'te sönen çok hafif bir açılma yüzeyi hacimlendiriyor;
   altına konan gölge de onu zeminden ayırıyor.

   color-mix ile yazıldı: --panel'in kendisi temayla değişiyor,
   sabit bir rgba yazsaydım sakura/altın temada yanlış renk
   olurdu. İki background satırı var — ilki color-mix
   bilmeyen tarayıcının alacağı eski hâl.                     */
.uye-card, .item-card, .mini-form, .card-form,
.panel-kart, .sb-kart, .takvim-kart, .davet-form{
  background:var(--panel);
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--txt) 4%, transparent) 0%,
      transparent 110px),
    var(--panel);
  box-shadow:0 2px 10px rgba(0,0,0,.22);
  transition:border-color .22s, box-shadow .26s, transform .22s;
}

/* ── 46. KARTIN ÜST KENARI ───────────────────────────────────
   style.css'te (v51) şu vardı:

     .karti::after,.panel-kart::after{…gradyan hairline, hover'da…}

   Güzel bir detay ama SADECE iki sınıfa bağlanmıştı. Panelde
   asıl çok görülen kutular .uye-card ve .item-card — üyeler,
   duyurular, öneriler, anketler, dosyalar, kurallar hep onlar
   ve hiçbirinde bu çizgi yoktu. Aynı efekt ::before üstünden
   o ailelere de veriliyor (::after'ı seçmedim: .panel-kart'ta
   zaten dolu, iki kural birbirini ezerdi).                    */
.uye-card, .item-card, .mini-form, .card-form,
.sb-kart, .takvim-kart{position:relative}
.uye-card::before, .item-card::before, .mini-form::before,
.card-form::before, .sb-kart::before, .takvim-kart::before{
  content:""; position:absolute; top:0; left:16px; right:16px; height:1px;
  border-radius:2px; pointer-events:none;
  background:linear-gradient(90deg, transparent,
    var(--mz1,#FF2B4A), var(--mz4,#6A1A89), transparent);
  opacity:0; transition:opacity .25s;
}
.uye-card:hover::before, .item-card:hover::before,
.sb-kart:hover::before, .takvim-kart:hover::before{opacity:.85}
/* Form kutularında çizgi hover'da değil, İÇİNE YAZARKEN yanar.
   Fare form kartının üstünde sürekli duruyor; hover'a bağlansa
   yazı yazarken de yanıp sönerdi. */
.mini-form:focus-within::before, .card-form:focus-within::before{opacity:.85}

/* Tıklanabilir kartlar kalkıyor. Formlar KALKMIYOR: içine yazı
   yazılan bir kutunun fare gezinirken oynaması rahatsız eder. */
.uye-card:hover, .item-card:hover, .sb-kart:hover, .takvim-kart:hover{
  transform:translateY(-2px);
  border-color:color-mix(in srgb, var(--red) 34%, var(--line));
  box-shadow:0 10px 26px rgba(0,0,0,.34);
}
.mini-form:focus-within, .card-form:focus-within{
  border-color:color-mix(in srgb, var(--red) 30%, var(--line));
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}

/* ── 47. SEKME BAŞLIĞININ ALT VURGUSU GERİ GELDİ ─────────────
   GERÇEK GERİLEME. style.css (v51) sekme başlığının altına
   52px'lik logo gradyanı bir vurgu çiziyordu:

     .pane-title::after{…bottom:0;width:52px;background:var(--mz-grad-yatay)…}

   Bu dosyanın 30. maddesi (v72) aynı ::after'ı higanbana sapına
   çevirdi. İki kural aynı sözde-öğeye yazıldığı için sonuncusu
   kazandı: gradyan vurgu ekrandan SESSİZCE kalktı, geriye 13px
   yarı saydam bir çiçek kaldı. v51'in kuralı style.css'te hâlâ
   duruyor ve hiçbir şey yapmıyor — bakmadan anlaşılmıyor.

   Başlıkta kullanılabilecek iki sözde-öğe var ve ikisi de dolu:
   ::before soldaki dikey akkor çubuk (style.css:4156), ::after
   ise yukarıdaki çekişmenin yaşandığı yer. Üçüncü bir öğe
   eklemek için HTML'e dokunmak gerekirdi — 49 sekmenin başlığı
   app.js ve index.html'de dağınık.

   Çözüm ikisini TEK ::after'ta topluyor: zemin logo gradyanı,
   maske iki katmanlı — solda vurgu çizgisi, sağ ucunda çiçek.
   Çoklu maske katmanları varsayılan olarak birleşiyor, ayrıca
   composite yazmaya gerek yok. Renk maskeden değil zeminden
   geldiği için tema dönünce vurgu da dönüyor (30. maddedeki
   düz "background:var(--red)" ataması da bu yüzden gitti).    */
.pane-title{padding-bottom:15px}
.pane-title::after{
  /* 30. maddedeki kutu ve maske TAMAMEN yeniden yazılıyor;
     oradan gelen left/bottom/width/height/background'ın hepsi
     eziliyor ki iki tanım yarı yarıya karışmasın. */
  left:0; bottom:-1px; top:auto;
  width:clamp(74px, 26%, 230px); height:15px;
  opacity:1;
  background:var(--mz-grad-yatay, linear-gradient(90deg,var(--red),var(--violet)));
  -webkit-mask:
    var(--hb-mini) right center/14px 14px no-repeat,
    linear-gradient(#000,#000) left bottom 5px/calc(100% - 19px) 2.5px no-repeat;
  mask:
    var(--hb-mini) right center/14px 14px no-repeat,
    linear-gradient(#000,#000) left bottom 5px/calc(100% - 19px) 2.5px no-repeat;
  filter:drop-shadow(0 0 7px color-mix(in srgb, var(--red) 45%, transparent));
}

/* ── 48. ROZETLER RENKLERİNİ KAZANDI ────────────────────────
   .badge'in renk sınıfları (red / gold / green) yalnızca YAZI
   rengini değiştiriyordu; zemin hepsinde --panel2, kenarlık
   hepsinde --line. Yani "Müsait" ile "Meşgul" arasındaki fark
   gri bir hapın içindeki yazının tonuydu — üye kartında yan
   yana dururken ayırt edilmiyordu.

   .rol-rozet aynı dosyada zaten doğru yapılmıştı (color-mix
   ile zemin + kenarlık). Aynı formül .badge'e taşındı;
   böylece ikisi yan yana durduğunda da aynı aileden görünüyor. */
.badge{
  --bdg:var(--violet);
  color:var(--bdg);
  background:color-mix(in srgb, var(--bdg) 14%, transparent);
  border-color:color-mix(in srgb, var(--bdg) 42%, transparent);
  transition:box-shadow .2s, transform .16s cubic-bezier(.34,1.56,.64,1);
}
.badge.red  {--bdg:var(--red)}
.badge.gold {--bdg:var(--gold)}
.badge.green{--bdg:#6fe3a3}
.uye-card:hover .badge{
  box-shadow:0 2px 10px color-mix(in srgb, var(--bdg) 30%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .badge{background:var(--panel2); border-color:var(--line)}
}

/* ── 49. İLERLEME ÇUBUĞU: DOLU KISIM ÖLÜ DURUYORDU ──────────
   Gradyan vardı ama duruyordu. Bir projenin "%100 tamamlandı"
   çubuğu ile "%12" çubuğu arasında hareket farkı yok, çubuk
   bir grafik değil bir dolgu gibi görünüyordu.

   İki ekleme: (1) dolu kısmın sağ ucunda ışıma — çubuğun
   NEREDE bittiğini gözle bulmayı kolaylaştırıyor; (2) üstünden
   çok yavaş geçen bir parlama. Yavaş olması önemli: hızlısı
   "yükleniyor" der, oysa burada duran bir değer gösteriliyor. */
.ilerleme-dolu, .progress-bar{
  position:relative; overflow:hidden;
  box-shadow:0 0 14px color-mix(in srgb, var(--red) 45%, transparent);
}
.ilerleme-dolu::after, .progress-bar::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 34%,
    rgba(255,255,255,.28) 50%, transparent 66%);
  transform:translateX(-100%);
  animation:cubukParla 4.2s cubic-bezier(.5,0,.5,1) infinite;
}
@keyframes cubukParla{
  0%, 62%{transform:translateX(-100%)}
  100%   {transform:translateX(100%)}
}
/* Çubuğun kabına da hafif bir iç gölge — dolu kısım artık
   "yüzeyin üstünde", boş kısım "oyuk" duruyor. */
.ilerleme-cubuk, .progress{
  box-shadow:inset 0 1px 3px rgba(0,0,0,.4);
}

/* ── 50. SOL MENÜDE AKTİF SEKME ─────────────────────────────
   Aktif sekmenin zemini --panel2'ydi; kenar çubuğunun kendi
   zemini --panel. İkisi arasındaki fark 5 birim parlaklık —
   47 sekmelik bir listede hangisinde olduğunu bulmak için
   yazının kırmızısına bakmak gerekiyordu.

   Bu dosyanın 17. maddesi soldaki dikey işareti çiziyor.
   Eksik olan zemin: işaretin dibinden sağa doğru sönen bir
   kızıllık, satırı bir "sekme" gibi gösteriyor.               */
.side-nav:not(.sira-modu) .snav{transition:background .18s, transform .18s, color .18s}
.side-nav:not(.sira-modu) .snav:hover{transform:translateX(2px)}
.side-nav:not(.sira-modu) .snav.active,
.side-nav:not(.sira-modu) .snav.aktif{
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--red) 16%, transparent) 0%,
    color-mix(in srgb, var(--red) 5%, transparent) 42%,
    transparent 100%);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--red) 14%, transparent);
}

/* ── 51. AVATAR ÇEMBERİ ─────────────────────────────────────
   2px düz kırmızı bir daire. Logonun kızıl→mor gradyanı
   sitenin her yerinde varken profil fotoğrafının etrafında
   tek renk duruyordu.

   Gradyan doğrudan border'a verilemiyor (border-image
   yuvarlak köşede kırılıyor), o yüzden halka ayrı bir katman:
   kutunun 3px dışına konan konik gradyan. Fotoğrafın kendi
   kenarlığı şeffaflaştırıldı ki iki halka üst üste binmesin. */
.avatar{position:relative; border-color:transparent}
.me-card .avatar, .uye-top .avatar{
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 3.5px color-mix(in srgb, var(--red) 70%, transparent),
    0 0 16px color-mix(in srgb, var(--red) 28%, transparent);
}
.uye-card:hover .uye-top .avatar{
  box-shadow:
    0 0 0 2px var(--panel),
    0 0 0 3.5px var(--red),
    0 0 22px color-mix(in srgb, var(--red) 45%, transparent);
}
@supports not (color: color-mix(in srgb, red 50%, blue)){
  .avatar{border-color:var(--red)}
  .me-card .avatar, .uye-top .avatar{box-shadow:none}
}

/* ── 52. SEKME GEÇİŞİ GÖRÜNMÜYORDU ──────────────────────────
   Bütün sekmeler DOM'da duruyor ve geçiş .hidden sınıfının
   alınıp verilmesiyle oluyor — yani içerik bir kareden
   diğerine ANINDA takla atıyor. Tıklamanın bir şey yaptığı
   ancak yazıyı okuyunca anlaşılıyordu.

   16px'lik çok kısa bir yükselme yeterli. Uzun olsa sekme
   değiştirmek yavaşlamış gibi hissettirirdi.                  */
.tabpane:not(.hidden){animation:sekmeGir .34s cubic-bezier(.22,.9,.34,1) both}
@keyframes sekmeGir{
  from{opacity:0; transform:translateY(16px)}
  to  {opacity:1; transform:none}
}

/* ── 53. İÇERİK ALANININ TEPESİ ─────────────────────────────
   Panelde gövde zemini kenardan kenara tek düz renk. Tanıtım
   sayfasının hero'sunda iki radyal ışıma var ve orası bu
   yüzden "derin" duruyor; panele geçince o derinlik bir anda
   kayboluyordu.

   Aynı iki ışımanın çok daha soluk hâli. fixed: sayfa
   kayarken ışık kaynağı yerinde kalıyor — kaydırdıkça
   parlayan bir zemin ucuz durur.                             */
.app-shell{position:relative}
.app-shell::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(900px 420px at 76% -6%,
      color-mix(in srgb, var(--violet) 9%, transparent), transparent 62%),
    radial-gradient(760px 380px at 4% 104%,
      color-mix(in srgb, var(--red) 8%, transparent), transparent 62%);
}
/* z-index:-1 — ışıma katmanı içeriğin ARKASINDA. Bir ara
   ".app-shell > *{position:relative;z-index:1}" ile çözülmüştü;
   o kural kenar çubuğunu da kapsıyor ve .sidebar STICKY:
   position'u relative'e çevirmek menünün yapışkanlığını
   sessizce öldürüyordu. Çocuklara hiç dokunmamak gerekiyor. */

/* ── 54. SATIR LİSTELERİ ────────────────────────────────────
   Teslimler, aktiviteler ve dosya satırları alt alta dizilmiş
   metin satırlarıydı; hangisinin üstünde olduğun belli
   olmuyordu. İnce bir zemin ve içeri kayma yeterli — kutu
   çizmeye gerek yok, liste listelikten çıkardı.               */
.teslim-satir, .aktivite-satir, .dosya-satir{
  border-radius:9px; padding-left:9px; margin-left:-9px;
  transition:background .16s, padding-left .16s;
}
.teslim-satir:hover, .aktivite-satir:hover, .dosya-satir:hover{
  background:color-mix(in srgb, var(--txt) 4%, transparent);
  padding-left:13px;
}
/* Acil teslimin solunda kızıl bir iz — "acil" yazısını
   okumadan da fark ediliyor. */
.teslim-satir.acil{position:relative}
.teslim-satir.acil::before{
  content:""; position:absolute; left:-9px; top:6px; bottom:6px; width:2px;
  border-radius:2px; background:var(--red);
  box-shadow:0 0 8px color-mix(in srgb, var(--red) 55%, transparent);
}

/* ── 55. GİRİŞ ALANLARINDA ODAK ─────────────────────────────
   outline:2px solid var(--red) — doğru ama sert. Kenarlığın
   dışına eklenen yumuşak bir hale, halkayı kesip atmadan
   (erişilebilirlik için görünür odak şart) alanın "canlandığı"
   hissini veriyor.                                            */
input:focus, select:focus, textarea:focus{
  box-shadow:0 0 0 4px color-mix(in srgb, var(--red) 13%, transparent),
             0 4px 18px color-mix(in srgb, var(--red) 12%, transparent);
}

/* ── 56. HAREKETİ AZALT ─────────────────────────────────────
   Yukarıdaki üç sürekli/geçişli animasyon (çubuk parlaması,
   sekme girişi, kart kalkması) hareket hassasiyeti olan
   kullanıcıda kapanıyor. Renk ve derinlik kalıyor — kapatılan
   sadece hareket.                                             */
@media (prefers-reduced-motion:reduce){
  .ilerleme-dolu::after, .progress-bar::after{animation:none; display:none}
  .tabpane:not(.hidden){animation:none}
  .uye-card:hover, .item-card:hover, .sb-kart:hover, .takvim-kart:hover,
  .side-nav:not(.sira-modu) .snav:hover{transform:none}
}

/* ── 57. ANA BUTON RENKSİZ KALMIŞTI ─────────────────────────
   GERÇEK KUSUR — ve sitenin en çok basılan öğesinde.

   style.css'te ana buton 1831. satırda mor→magenta→kızıl bir
   degradeyle tanımlanıyor:

     .btn-red{background:linear-gradient(135deg,#8B7CFF,#B85CE8,#FF3D5A);
              background-size:200% 100%; …}

   Sonra 4123. satırda, "üst ışık" eklemek için şu yazılmış:

     .btn-red{background-image:linear-gradient(180deg,
                rgba(255,255,255,.16),rgba(255,255,255,0)); …}

   background-image, background kısayolunun ATADIĞI katmanın
   ta kendisi. İkincisi birincisini eklemiyor, SİLİYOR. Geriye
   beyazdan şeffafa inen bir tül kalıyor; altında da renk yok,
   çünkü 1831'deki background kısayolu background-color'ı
   transparent'a sıfırlamış.

   Sonuç: "Ekibe Katıl", "Proje Oluştur", "Gönder", "Testi
   Başlat" — hepsi panelin zeminini gösteren gri kutulardı.
   Hover'daki background-position kayması da boşa çalışıyordu,
   kaydırılacak bir degrade kalmamıştı.

   İki katman birden yazılınca ikisi de görünüyor: üstte tül,
   altında degrade. Sıra önemli — CSS'te ilk yazılan katman
   ÜSTTE durur.                                                */
.btn-red{
  background-color:var(--mz2,#D6113F);   /* katmanlar düşerse taban renk */
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0)),
    linear-gradient(135deg, #8B7CFF 0%, #B85CE8 45%, #FF3D5A 100%);
  background-size:100% 100%, 200% 100%;
  background-position:0 0, 0% 50%;
}
/* Hover'da kayan sadece ALTTAKİ degrade; üst tül yerinde kalmalı,
   yoksa ışık butonun dışına doğru sürünüyor. */
.btn-red:hover{background-position:0 0, 100% 50%}

/* ── 58. SEKME ŞERİDİ HAVADA DURUYORDU ──────────────────────
   .tabs bir sıra düğme, altında hiçbir şey yok. Aktif olanın
   gradyan zemini var ama şeridin nerede bitip içeriğin nerede
   başladığı belirsiz — özellikle Admin Paneli'nde şerit iki
   satıra taşıyor ve ikinci satır boşlukta asılı kalıyor.

   Şeridin altına çekilen ince ray hem grubu birbirine bağlıyor
   hem de aktif sekmeyi "rayın üstünde duran" hâle getiriyor.
   Ray sağa doğru sönüyor: kenardan kenara giden düz bir çizgi
   bölümü ikiye bölerdi.                                       */
.tabs{position:relative; padding-bottom:11px}
.tabs::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:linear-gradient(90deg,
    color-mix(in srgb, var(--red) 35%, transparent) 0%,
    var(--line) 30%, transparent 88%);
}
/* Aktif sekmenin altında rayı kesen kısa bir parlak parça:
   düğme ile içerik arasındaki bağ gözle kuruluyor. */
.tabs .tab{position:relative}
.tabs .tab.active::after{
  content:""; position:absolute; left:22%; right:22%; bottom:-12px; height:2px;
  border-radius:2px;
  background:var(--mz-grad-yatay, linear-gradient(90deg,var(--red),var(--violet)));
  box-shadow:0 0 9px color-mix(in srgb, var(--red) 50%, transparent);
}
/* Çok satıra sarılan şeritte (.tabs.wrap — Admin Paneli'nde 13
   düğme iki satıra iniyor) -12px aktif düğmeyi kendi satırından
   koparıp ALTTAKİ satırın içine düşürüyor: parça rayın değil,
   bir sonraki düğme sırasının hizasında duruyordu. Sarılan
   şeritte parça düğmenin hemen dibinde kalıyor. */
.tabs.wrap .tab.active::after{bottom:-5px}

/* ── 59. SEKMENİN DİBİ ──────────────────────────────────────
   İçerik bitince sayfa boşlukta kesiliyordu. Tanıtım sayfasında
   bölümlerin arasında ayraç var (39. madde) ve orası bu yüzden
   "düzenlenmiş" duruyor; panelde hiçbir kapanış yoktu.

   Aynı ayracın uygulama içi hâli: iki yana sönen bir çizgi,
   ortasında higanbana. İçeriğin hemen altında değil, biraz
   aşağıda — kısa sekmelerde araya girmesin, uzun sekmelerde
   sayfanın bittiğini söylesin.                               */
.content{position:relative}
.content::after{
  content:""; display:block; height:16px; margin:54px auto 6px;
  max-width:min(420px, 60%);
  background:var(--red); opacity:.4;
  -webkit-mask:
    var(--hb-mini) center/15px 15px no-repeat,
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)
      left center/calc(50% - 16px) 1px no-repeat,
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)
      right center/calc(50% - 16px) 1px no-repeat;
  mask:
    var(--hb-mini) center/15px 15px no-repeat,
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)
      left center/calc(50% - 16px) 1px no-repeat,
    linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent)
      right center/calc(50% - 16px) 1px no-repeat;
}
/* Sohbet ve stüdyo gibi kendi yüksekliğini ekrana göre ayarlayan
   sekmelerde ayraç fazladan kaydırma yaratıyor — orada kapalı.

   :has() içindeki ":not(.hidden)" ŞART. İlk yazışta koşul
   ".content:has(.chat-box)" idi ve ayraç HİÇBİR sekmede
   görünmedi: bu sitede bütün sekmeler aynı anda DOM'da duruyor,
   görünmeyenler yalnızca .hidden ile gizli. Yani .content her
   zaman bir .chat-box içeriyor — koşul hep doğruydu.          */
.content:has(.tabpane:not(.hidden) .chat-box)::after,
.content:has(.tabpane:not(.hidden) #stSerit)::after{display:none}

/* ── 60. KART IZGARASI SATIRI ZORLA UZATIYORDU ──────────────
   .uye-grid bir grid ve grid'in varsayılanı align-items:stretch:
   bir satırdaki bütün hücreler EN UZUN kart kadar uzuyor. Bir
   üyenin e-posta + müsaitlik + demo satırları varsa, yanındaki
   yalnızca Discord'u yazan iki kart da onun boyuna çekiliyor ve
   altlarında 200 piksellik bomboş bir alan kalıyordu.

   start ile her kart kendi içeriği kadar. Izgaranın hizası
   bozulmuyor — satır başları yine aynı çizgide.               */
.uye-grid, .sb-liste{align-items:start}


/* ═══════════════════════════════════════════════════════════
   v77 — HERO KÖŞE GÖRSELİ

   v75'te buraya elle çizilmiş bir örümcek ve köşe ağı konmuştu.
   Beğenilmedi ve kaldırıldı — yerine ekibin KENDİ görselini
   koyabildiği bir alan geldi (panel → Görünüm → Hero Köşe
   Görseli). Sitedeki diğer görsel alanlarıyla aynı düzen.

   Boşken hiçbir şey çizilmiyor: varsayılan bir çizim koymak,
   v75'in hatasını tekrarlamak olurdu. Alan doluysa görünüyor,
   boşsa hero eski hâlinde kalıyor.
   ═══════════════════════════════════════════════════════════ */
.hero-kose{
  position:absolute; top:0; right:0; z-index:0;
  width:clamp(190px, 26vw, 400px);
  pointer-events:none; user-select:none;
}
.hero-kose img{
  display:block; width:100%; height:auto;
  /* Görselin alt ve sol kenarı hero'ya eritiliyor: köşeye konan
     dikdörtgen bir fotoğraf kesik duruyordu. Maske iki yönlü —
     tek yönlüsünde diğer kenar yine sert kalıyor. */
  -webkit-mask:linear-gradient(200deg, #000 42%, transparent 88%);
  mask:linear-gradient(200deg, #000 42%, transparent 88%);
  opacity:.85;
}
@media (max-width:700px){
  /* Dar ekranda hero zaten sıkışık; görsel başlığın arkasına
     binmesin diye küçülüyor ve soluklaşıyor. */
  .hero-kose{width:150px}
  .hero-kose img{opacity:.5}
}


/* ── OYUN KONTROL TUŞLARI (v78) ──────────────────────────────
   Mobil kontroller .btn-mini'den miras alıyordu: 8px dikey
   dolgu, sonuç ~38px yükseklik. Ölçüldü — beş tuşun beşi de
   44px'in altındaydı. Parmakla oynanan bir oyunda yön tuşunun
   ıskalanması doğrudan oyunu bozuyor.

   Izgara kullanıldı, flex değil: flex-wrap ile tuşlar kendi
   genişliklerine göre diziliyor ve dar ekranda son tuş alt
   satıra düşüp sırayı bozuyordu. Beş eşit sütun her genişlikte
   tek satır ve eşit hedef demek.                              */
.oyun-kontrol{
  display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
}
.oyun-kontrol .btn-mini{
  min-height:46px; padding:8px 4px; margin:0;
  font-size:19px; line-height:1;
  display:flex; align-items:center; justify-content:center;
}
/* 821px üstünde style.css zaten display:none yapıyor (klavye
   yeterli); buradaki grid onu ezmesin diye medya sorgusu
   yeniden yazılıyor — bu dosya style.css'ten SONRA yükleniyor. */
@media(min-width:821px){ .oyun-kontrol{display:none} }


/* ═══════════════════════════════════════════════════════════
   DOOM (v80)
   Oyun public/doom.js'te; burada yalnızca kabuk.
   Kural: bu dosya style.css'ten SONRA yükleniyor, dolayısıyla
   aynı özgüllükteki kuralları ezebiliyor.
   ═══════════════════════════════════════════════════════════ */
.doom-ust{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--panel); border:1px solid var(--line);
  border-radius:14px; padding:11px 16px; margin-bottom:12px;
}
.doom-marka{
  font-family:var(--disp); font-size:23px; letter-spacing:.16em; color:var(--red);
  line-height:1.1; display:flex; flex-direction:column; gap:3px;
}
.doom-marka span{
  font-family:var(--body); font-size:11px; letter-spacing:.04em;
  color:var(--muted); font-weight:600;
}
.doom-durum{
  margin-left:auto; font-size:12.5px; color:var(--muted);
  font-variant-numeric:tabular-nums;
}

/* Sahne — DOOM 640×400 çiziyor, kutu da 8:5.
   object-fit:contain: tam ekranda ekran oranı 16:9 olduğunda
   görüntü YAYILMASIN, kenarda siyah kalsın. En/boy bozulmuş bir
   DOOM "bozuk" görünüyor. */
.doom-sahne{
  position:relative; width:100%; aspect-ratio:8/5;
  border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:#000; line-height:0;
}
.doom-sahne canvas{
  display:block; width:100%; height:100%; object-fit:contain;
  /* 1993 pikselleri bulanmasın: tarayıcı varsayılanı yumuşatma */
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.doom-sahne:fullscreen{ aspect-ratio:auto; height:100%; border:0; border-radius:0 }

/* İndirme çubuğu — 6,8 MB'lık motor inerken. Ekranın altında,
   oyunun üstünü kapatmıyor: iniş bitince yerinde oyun olacak. */
.doom-ilerleme{
  position:absolute; left:50%; bottom:16%; transform:translateX(-50%);
  width:min(74%, 380px); z-index:5; text-align:center; line-height:1.6;
}
.doom-ilerleme-yol{
  height:8px; border-radius:99px; overflow:hidden; background:rgba(255,255,255,.12);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5); margin-bottom:7px;
}
.doom-ilerleme-yol > div{
  height:100%; width:0; background:var(--red); transition:width .15s linear;
}
.doom-ilerleme span{font-size:12.5px; color:#e8e8f2; font-variant-numeric:tabular-nums}

/* Hata / bilgi katmanı — v79'un dersi: sebebi EKRANDA söyle,
   boş kutu bırakma. */
.doom-katman{
  position:absolute; inset:0; z-index:6; line-height:1.55;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px;
  background:color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter:blur(4px); text-align:center; padding:20px;
}
.doom-katman h3{font-family:var(--disp); font-size:clamp(20px,3vw,30px); color:var(--red)}
.doom-katman p{color:var(--muted); font-size:14px; max-width:46ch}
.doom-gunluk{
  display:block; margin-top:6px; font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:11px; color:var(--muted); opacity:.75; word-break:break-word;
}

/* ── Dokunmatik kumanda ────────────────────────────────────────
   Masaüstünde gizli: klavye varken ekran tuşu yer kaplıyor. */
.doom-kumanda{display:none}
.doom-tus{
  min-height:46px; min-width:46px;            /* v78: 44px altı ıskalanıyor */
  display:flex; align-items:center; justify-content:center;
  background:var(--panel2); border:1px solid var(--line); border-bottom-width:3px;
  border-radius:10px; color:var(--txt); font-size:13px; font-weight:700;
  touch-action:none;                          /* parmak kaydırınca sayfa kaymasın */
  user-select:none; -webkit-user-select:none; -webkit-tap-highlight-color:transparent;
}
.doom-tus.basili{background:var(--red); border-color:var(--red); color:#fff; transform:translateY(1px)}

@media (max-width:820px){
  .doom-kumanda{
    display:grid; grid-template-columns:auto 1fr; gap:12px;
    align-items:center; margin-top:12px;
  }
  /* Yön takımı: üç sütunluk ızgara. flex DEĞİL — flex-wrap'te son
     tuş alt satıra düşüp sırayı bozuyordu (v78'de ölçüldü). */
  .doom-yon{
    display:grid; grid-template-columns:repeat(3,46px); grid-template-rows:repeat(3,46px); gap:5px;
  }
  .doom-yon .ileri{grid-area:1/2} .doom-yon .sol{grid-area:2/1}
  .doom-yon .sag{grid-area:2/3}   .doom-yon .geri{grid-area:3/2}
  .doom-eylem{display:grid; grid-template-columns:repeat(2,1fr); gap:6px}
  .doom-ust{gap:9px; padding:10px 12px}
  .doom-marka{font-size:19px}
  .doom-durum{margin-left:0; width:100%; order:3}
}

/* Fare hızı — kişiye göre çok değişiyor, kaydırak üst şeritte.
   Değer tarayıcıda saklanıyor (doom.js). */
.doom-hassas{display:flex; align-items:center; gap:7px; font-size:13px; color:var(--muted)}
.doom-hassas input[type=range]{width:96px; accent-color:var(--red)}
.doom-hassas b{font-family:var(--disp); font-size:12px; color:var(--txt); min-width:32px}

/* Fare kilidi ipucu — oyun çalışıyor ama kilit yokken görünüyor.
   Tıklanabilir olmasına gerek yok: altındaki tuval zaten tıklamayı
   alıyor ve kilidi o istiyor. */
.doom-ipucu{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  z-index:5; pointer-events:none; text-align:center; line-height:1.5;
  background:color-mix(in srgb, var(--bg) 78%, transparent);
  border:1px solid var(--line); border-radius:12px; padding:9px 16px;
  font-size:13.5px; color:var(--txt); backdrop-filter:blur(3px);
}
.doom-ipucu span{display:block; font-size:11.5px; color:var(--muted); margin-top:3px}

@media (max-width:820px){
  /* Telefonda fare kilidi de kaydırağı da anlamsız — kumanda var */
  .doom-ipucu, .doom-hassas{display:none}
}

/* Ana sayfa: kaynak sırasının sonunda ve yalnız tanıtım kapsamında.
   Eski mobil em:block ve çift yatay dolgu başlığı daraltıyordu.
   Yönetici kimlikleri/görsel ayarları korunur; yükseklik sabitlenmez,
   uzun yönetici başlığı da kesilmeden akabilir. */
#view-landing .hero{min-height:620px;padding:48px 7vw 60px}
#view-landing .hero-inner{width:100%;max-width:1100px;margin:0 auto;padding:0;min-width:0}
#view-landing .hero-logo-wrap{justify-content:flex-start;margin:0 0 20px}
#view-landing .hero-logo{width:76px;border-radius:16px}
#view-landing .eyebrow{font-size:11px;letter-spacing:.16em;margin-bottom:18px}
#view-landing .hero h1{max-width:18ch;font-size:clamp(32px,4.5vw,62px);line-height:1.16;letter-spacing:-.035em;overflow-wrap:anywhere}
#view-landing .hero h1 em{display:inline;font-size:inherit;white-space:normal;
  /* Düz kırmızı vurgu (özellikle TAMAMEN BÜYÜK HARF başlıkta) ucuz
     duruyordu: "MİZANİS FARK YARAT" kıpkırmızı bağırıyordu. Marka
     gradyanı (mor→kırmızı→pembe) hem kimlikle uyumlu hem daha
     pahalı duruyor; Neler Var sayfasındaki hero ile aynı dil. */
  background:linear-gradient(100deg,#8B7CFF,#FF3D5A 55%,#F58EB4);
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
#view-landing .hero-lead{max-width:49ch;font-size:clamp(16px,1.4vw,19px);line-height:1.7;font-weight:500;margin-top:22px}
#view-landing .hero-actions{gap:12px;margin-top:26px}
#view-landing .hero-actions button{min-height:50px;padding:13px 22px;font-size:15px;line-height:1.4}
#view-landing .hero-actions .btn-red{background:linear-gradient(115deg,var(--mz2,#D6113F),var(--mz4,#6A1A89));color:#fff;box-shadow:0 6px 24px color-mix(in srgb,var(--red) 18%,transparent)}
#view-landing .hero-actions .btn-outline{background:var(--panel);color:var(--txt);border-color:var(--line)}
#view-landing .hero-actions .btn-red::after,
#view-landing .tori-line,#view-landing .hb-toz,#view-landing .hb-tarla,
#view-landing .hb-ayrac{display:none}
#view-landing .sakura{opacity:.3}
#view-landing .hero-kana{opacity:.035}
#view-landing #sosyalMedya{margin-top:22px}
#view-landing .kunye{margin-top:24px;padding-top:20px}
#view-landing .section{padding:56px 7vw}
#view-landing .sec-title{font-size:clamp(24px,3vw,36px);margin-bottom:24px}
#view-landing .sec-title span{font-size:10px;letter-spacing:.16em}
#view-landing .sec-title span::after{display:none}
#view-landing #misafirKesfet{background:color-mix(in srgb,var(--violet) 4%,var(--bg))}
#view-landing #misafirKesfet .mk-alt{text-align:left;max-width:60ch;margin:0 0 26px;font-size:16px;line-height:1.65}
#view-landing .mk-kartlar{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:none;gap:18px;margin:0}
#view-landing .mk-kart{min-width:0;max-width:none;width:100%;align-items:flex-start;text-align:left;padding:26px;gap:16px;border-radius:16px}
#view-landing .mk-kart.izle{border-color:color-mix(in srgb,var(--red) 50%,var(--line))}
#view-landing .mk-kart small{max-width:30ch;font-size:14px;line-height:1.6}
#view-landing .mk-git{opacity:1;transform:none;letter-spacing:.08em}
#view-landing .mk-kart::before,#view-landing .mk-kart::after{display:none}
#view-landing .mf-kap{grid-template-columns:minmax(0,2fr) minmax(0,1fr)}
#view-landing .mf-soz{grid-column:auto}
#view-landing .sahne-band{height:clamp(180px,22vw,300px)}
/* Menü ve plaka main dışında; görünür tanıtım koşulu giriş yapılmış
   panelin menüsüne bu düzenin taşınmasını önler. */
body:has(#view-landing:not(.hidden)) #topnav .logo{text-decoration:none;min-height:44px}
body:has(#view-landing:not(.hidden)) #topnav .nav-btn{min-height:44px;display:inline-flex;align-items:center;justify-content:center}
body:has(#view-landing:not(.hidden)) #markPlaka{box-shadow:none}
#view-landing :is(a,button,[tabindex]):focus-visible,
body:has(#view-landing:not(.hidden)) :is(#topnav a,#topnav button,#markPlaka):focus-visible{outline:3px solid var(--txt);outline-offset:4px}
@media(max-width:760px){
  #view-landing .hero{min-height:0;padding:32px 22px 40px}
  #view-landing .hero-logo{width:56px;border-radius:12px}
  #view-landing .hero-logo-wrap{margin-bottom:16px}
  #view-landing .hero h1{font-size:clamp(30px,7.6vw,44px);max-width:100%}
  #view-landing .eyebrow{font-size:10px;letter-spacing:.08em}
  #view-landing .hero-actions{flex-direction:column;align-items:stretch;gap:10px;margin-top:22px}
  #view-landing .hero-actions button{width:100%}
  #view-landing .section{padding:38px 22px}
  #view-landing .mk-kartlar{grid-template-columns:1fr;gap:12px}
  #view-landing .mk-kart{padding:22px;gap:12px}
  #view-landing .mf-kap{grid-template-columns:1fr}
  #view-landing .mf-soz{grid-column:1}
  body:has(#view-landing:not(.hidden)) #topnav{padding:12px 22px;gap:10px}
  body:has(#view-landing:not(.hidden)) #topnav .nav-links{flex-wrap:wrap;justify-content:flex-start;gap:4px}
  /* Sabit MARK mobilde okunan içeriği kapatmasın; belge akışında kalsın. */
  body:has(#view-landing:not(.hidden)) #markPlaka{position:relative;top:auto;right:auto;width:max-content;max-width:calc(100% - 44px);margin:12px 22px 0}
  body:has(#view-landing:not(.hidden)) #markPlaka .mark-ic{padding:8px 12px;gap:8px}
  body:has(#view-landing:not(.hidden)) #markPlaka .mark-reaktor{display:none}
}
@media(prefers-reduced-motion:reduce){
  html:has(#view-landing:not(.hidden)){scroll-behavior:auto!important}
  #view-landing *,#view-landing *::before,#view-landing *::after,
  body:has(#view-landing:not(.hidden)) :is(#topnav,#topnav::after,#markPlaka,#markPlaka *){animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #view-landing .hero-inner>*{opacity:1;transform:none}
  #view-landing .kaydir-ipucu{display:none}
}

/* ═══════════════════════════════════════════════════════════
   HERO VURGUSU — "içinden ışık geçen yazı" (özel arka plan)
   Arka plandaki tablo: alaca karanlıkta bayrak kırmızısı +
   erimiş altın. Vurgu aynı palette: kor koyu kızıl zemin,
   üstünden geçen altın ışık şeridi + güneş parıltısı.
   Harfler şeffaf, BOYA alttaki iki katman: üstte dar parlak
   şerit (süpürme animasyonu), altta kızıl→altın zemin.
   Kaydırınca: içerik zemin üstünden süzülür (zemin fixed
   zaten), başlık hafif yukarı kayıp solar — derinlik hissi.
   Hepsi salt CSS; animation-timeline desteklemeyen tarayıcıda
   yalnızca kaydırma kısmı çalışmaz, ışık süpürmesi çalışır. */
/* ÖLÇÜLDÜ (1440x900 ekran görüntüsü, yazı şeridi kırpılarak):
   gradyan arka planın kendi ışık dağılımını TAKLİT ediyordu —
   solda koyu kızıl (#7A0E1E), sağda altın; tablo da tam öyle,
   solda kızıl bulut, sağda erimiş altın gök. Aynı yerde aynı ton
   uyum değil KAMUFLAJ oluyor: "FARK"ın harfleri arkasındaki kızıl
   bulutun içinde, "YARAT" da sıcak gök ışığının içinde eriyordu.
   Yanındaki beyaz "MİZANİS" pırıl pırıl okunurken vurgu kelimesi
   silikti — yani vurgu, vurgulanmayan yarıdan zayıf duruyordu.
   Palet aynı kalıyor (bayrak kırmızısı + erimiş altın: tablonun
   kendi iki rengi), DEĞİŞEN parlaklık: gradyanın koyu ucu atıldı,
   dördü de zeminden parlak. Ayrım rengi değil, ışığı yapıyor. */
#view-landing .hero h1 em{
  background:
    linear-gradient(115deg,transparent 42%,#FFF6DC 47%,#FFFFFF 50%,#FFF6DC 53%,transparent 58%),
    linear-gradient(100deg,#FF2A40,#FF5C36 34%,#FFA939 66%,#FFD97A);
  background-size:280% 100%,100% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  /* İki gölge ve SIRASI önemli: önce koyu oturma gölgesi — harfin
     dış hattını tablodan ayıran tek şey o; sonra sıcak parıltı.
     Yalnız parıltı varken harf zeminle aynı ışıkta yüzüyordu.
     (text-shadow burada işe yaramaz: harfin içi şeffaf olduğu için
     gölge harfin İÇİNDEN görünür. drop-shadow dış hattı takip eder.) */
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.72))drop-shadow(0 0 30px rgba(255,150,60,.34));
  animation:mz-isik-supur 6s ease-in-out infinite}
@keyframes mz-isik-supur{
  0%{background-position:120% 0,0 0}
  55%{background-position:-40% 0,0 0}
  100%{background-position:-40% 0,0 0}}
/* Kaydırmaya bağlı derinlik: başlık bloğu yavaşça yükselip solar */
@supports (animation-timeline:scroll()){
  #view-landing .hero-inner{animation:mz-hero-kayma linear both;animation-timeline:scroll();animation-range:0 70vh}
  @keyframes mz-hero-kayma{
    to{transform:translateY(-60px);opacity:.25}}
  #view-landing .hero h1 em{animation:mz-isik-supur 6s ease-in-out infinite,mz-isik-isin linear both;
    animation-timeline:auto,scroll();animation-range:normal,0 70vh}
  /* Koyu gölge burada da tekrarlanıyor: `filter` tek bir özellik,
     kaydırma animasyonu onu KOMPLE değiştiriyor. Yalnız parıltıyı
     yazınca kaydırır kaydırmaz oturma gölgesi kayboluyor ve yazı
     yine tabloya gömülüyordu. */
  @keyframes mz-isik-isin{
    to{filter:drop-shadow(0 2px 10px rgba(0,0,0,.72))drop-shadow(0 0 34px rgba(255,190,90,.7))brightness(1.1)}}}

/* ═══════════════════════════════════════════════════════════
   KADRO BANDI — SAHNE MONTAJI ("açılış jeneriği")
   Eskiden burada on siluetten oluşan bir SVG vardı. Sorun
   çizimde değildi: bir dublaj ekibinin bandı KAÇ KİŞİ olduğunu
   değil NE SESLENDİRDİĞİNİ anlatmalı. Şimdi işlerin kendi
   kareleri soldan sağa geçiyor.

   Üç şey bandın "kolaj" değil "jenerik" gibi durmasını sağlıyor:
   (1) kareler arasında ince kırmızı kesme çizgisi — montaj
       kesmesi hissi, yan yana yapıştırılmış fotoğraf değil;
   (2) doygunluk düşürülüp üstüne marka duotone'u basılıyor —
       on iki ayrı animenin on iki ayrı palet i yan yana
       gelince ortaya karnaval çıkıyordu, tek ışık altında
       toplanınca sahne oluyor;
   (3) iki yandan zemine eriyor — bant kesilmiyor, karanlıktan
       çıkıp karanlığa giriyor.

   Kayma `transform` ile: `left`/`margin` animasyonu her karede
   yeniden yerleşim (layout) tetikler, 24 görsellik bir şeritte
   bu ölçülebilir kare düşmesi demek. -50% tam olarak listenin
   ilk kopyasının boyu — dikiş görünmüyor.                     */
/* Bant yüksekliği: eski değer clamp(96px,10.5vw,170px) idi ve o
   ölçü SİLUET çizimi içindi — tek renk bir kontur 170px'te de
   okunuyor. Gerçek kareler okunmuyor: 245px'te bile bir sahnede
   yalnız yüzler seçiliyordu. Yükseklik arttıkça kare genişliği de
   arttığı için (dilimler sabit oranlı) aynı anda daha az ama daha
   BÜYÜK sahne geçiyor — jenerik hissi buradan geliyor. */
.ga-kadro{height:clamp(190px,24vw,360px); border-radius:16px}
/* TAM GENİŞLİK. Bant bölüm dolgusunun içinde duruyordu (.section
   padding 7vw) ve iki yanında 100px'lik boşluk kalıyordu: sahne
   karelerinin akıyor olması ancak KESİLMEDİĞİ yerde okunuyor,
   kutuya alınmış akış "galeri" gibi duruyor. Negatif kenar boşluğu
   kabı bölümün dışına taşırıyor; genişlik `auto` kalmalı, aksi
   hâlde 100vw dikey kaydırma çubuğunu saymayıp yatay kaydırma
   açıyor. Köşe yuvarlaklığı da düştü — kenara yaslanan bir bandın
   yuvarlak köşesi olmaz. */
#view-landing .ga-kadro{
  margin-left:-7vw; margin-right:-7vw; width:auto;
  border-radius:0; border-left:0; border-right:0;
  /* Yükseklik 420px'ten 240px'e indi ve kare genişliği onunla
     birlikte daraldı: bant DİKEYDE küçülünce aynı ekrana daha
     çok sahne giriyor (1440px'te dört-beş yerine sekiz-dokuz).
     Bir jenerikte tek tek karelerin büyük olması değil, çok
     sayıda karenin AKIYOR olması iş görüyor. */
  height:clamp(148px,17vw,240px); margin-bottom:30px}
@media(max-width:760px){
  #view-landing .ga-kadro{margin-left:-22px; margin-right:-22px;
    height:clamp(120px,30vw,180px)}
}
.ga-montaj{position:absolute; inset:0; overflow:hidden; z-index:0;
  /* Kenarları zemine eriten maske. -webkit- öneki Safari için
     şart: maskesiz kalırsa bant iki ucundan bıçakla kesilmiş
     görünüyor, ki asıl istenmeyen o. */
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
/* Yönetici panelden kendi görselini yüklerse (.gorselli) montaj
   çekilir — çizimde olduğu gibi. Panelin ayarı her zaman üstün. */
.gorsel-alan.gorselli .ga-montaj{display:none}
.gm-serit{display:flex; height:100%; width:max-content; will-change:transform;
  animation:gmKay 62s linear infinite}
/* Klip karelerinde poster ile videonun ilk karesi aynı: video
   inene kadar duran görüntü duruyor, indiğinde yerine oynayan
   hâli geçiyor ve geçişte sıçrama olmuyor. */
.gm-serit video{background:#0b0710}
/* preload="none" + autoplay birlikte: tarayıcı otomatik
   oynatmayı GÖRÜNÜRLÜĞE bağlıyor, yani bant ekrana girene kadar
   tek bayt video inmiyor. ÖLÇÜLDÜ: `preload="auto"` ile ana
   sayfanın ilk yükü 1,6 MB'a çıkıyordu ve bunun yarısı hiç
   görülmeyen bir bandın klipleriydi — LCP'yi de bozan buydu.

   NOT: oynatma HEM `autoplay` niteliğiyle HEM app.js'teki
   gözlemciyle kuruluyor ve bu bilerek böyle. Yalnız JS'e
   bırakıldığında ÖLÇÜLDÜ: tarayıcıda eski app.js önbellekte
   kaldığı sürece hiçbir klip oynamıyor, bant duran resim
   galerisine dönüyor ve dışarıdan "klipler çalışmıyor" diye
   görünüyor — sunucudaki kod doğru olsa bile. `autoplay`
   taban çizgisi: JS hiç gelmese de bant oynar; gözlemci
   sadece ekran dışındakileri duraklatarak yükü düşürür. */
/* Kare GENİŞLİĞİ sabit, görsel `cover` ile içine oturuyor.
   İlk deneme kareyi görselin kendi oranına bırakıyordu: 4,2:1
   bir banner 245px yükseklikte 1022px genişliğe açılıyor ve
   1240px'lik bantta AYNI ANDA TEK sahne kalıyordu — akan bir
   jenerik değil, yavaşça değişen tek fotoğraf. Kareler dikey
   dilime indirilince ekranda dört-beş sahne birden duruyor;
   kırpma noktası her sahnede elle seçildi (karakterin durduğu
   yer), o yüzden `object-position` değil, dosyanın kendisi
   zaten kırpılmış geliyor. */
.gm-serit img,.gm-serit video{height:100%; width:clamp(118px,13vw,188px); object-fit:cover;
  display:block; flex:0 0 auto;
  /* Ham kareler siteden çok daha parlak ve doygun. Kısılmazsa
     bant sayfanın en gürültülü yeri oluyor ve altındaki kadro
     kartlarını bastırıyor. */
  filter:saturate(.78) contrast(1.05) brightness(.95);
  border-right:2px solid color-mix(in srgb,var(--red) 50%,transparent)}
@keyframes gmKay{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* Marka duotone'u + üstten/alttan karartma. Ayrı katman çünkü
   .ga-kadro::after zaten kenar erimelerini tutuyor. */
.ga-montaj::after{content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 72%,transparent) 0,transparent 38%,transparent 62%,color-mix(in srgb,var(--bg) 68%,transparent) 100%),
    linear-gradient(112deg,color-mix(in srgb,var(--violet) 20%,transparent),color-mix(in srgb,var(--red) 15%,transparent) 62%,color-mix(in srgb,var(--gold) 8%,transparent))}
/* Hareket kısıtlıysa bant durur ama görünür kalır: içerik
   hareketin kendisinde değil, karelerde. */
@media(prefers-reduced-motion:reduce){
  .gm-serit{animation:none}
}

/* ═══════════════════════════════════════════════════════════
   SSS — gazete düzeni
   Dört soru tek sütunda alt alta dururken soru ile cevap aynı
   ağırlıkta okunuyordu. Ayrım kutuyla değil TİPOGRAFİYLE
   kuruldu: soru gövde yazısından iri ve açık renk, cevap kısık;
   aralarındaki tek süs saç teli kalınlığında bir çizgi.
   Kutuya alınsaydı bölüm "kart galerisi" olurdu — burası hâlâ
   okunacak bir metin, taranabilir olması yeterli.               */
.sss-izgara{display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:0; margin-top:8px;
  border-top:1px solid var(--line)}
.sss-oge{padding:26px 30px 28px 0; border-bottom:1px solid var(--line); min-width:0}
/* Sağ sütun sola bir çizgiyle bağlanıyor ve nefes payı alıyor.
   :nth-child(2n) yerine seçici; tek sütuna düşen dar ekranda
   medya sorgusu bunu geri alıyor. */
.sss-oge:nth-child(2n){padding-left:34px; border-left:1px solid var(--line)}
.sss-oge h3{display:flex; align-items:baseline; gap:11px;
  font-family:var(--disp); font-size:clamp(16.5px,1.35vw,19px); font-weight:700;
  line-height:1.35; color:var(--txt); margin:0 0 10px}
.sss-oge h3 i{font-style:normal; font-size:11px; letter-spacing:.14em;
  color:var(--red); opacity:.8; flex:none;
  /* baseline hizası: rakam büyük harfin tepesine değil,
     sorunun x-yüksekliğine oturuyor — satır başında damga gibi */
  transform:translateY(-1px)}
.sss-oge p{margin:0; color:var(--muted); font-size:15px; line-height:1.75;
  max-width:52ch; text-wrap:pretty}
.sss-oge a{color:var(--txt); text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent);
  text-underline-offset:3px; transition:color .15s}
.sss-oge a:hover{color:var(--red)}
.sss-kapanis{margin-top:22px; color:var(--muted); font-size:14.5px}
/* Metnin içindeki düğme: <a> gibi görünmeli ama gerçekten
   <button>, çünkü sayfa içi görünüm değiştiriyor — adresi yok.
   Genel `input,select,textarea{width:100%}` kuralı buraya
   uzanmıyor ama `button` varsayılan yazı tipini almadığı için
   font ailesi elle veriliyor, yoksa cümlenin ortasında
   sistem yazı tipiyle bir kelime beliriyor. */
.sss-baglanti{background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--txt); text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--red) 55%,transparent);
  text-underline-offset:3px}
.sss-baglanti:hover{color:var(--red)}
@media(max-width:820px){
  .sss-izgara{grid-template-columns:1fr}
  .sss-oge{padding:22px 0 24px}
  .sss-oge:nth-child(2n){padding-left:0; border-left:0}
  .sss-oge p{max-width:none}
}

/* ═══════════════════════════════════════════════════════════
   ALTBİLGİ DÜZENİ — dört sütuna altı blok sığmıyordu
   Izgara dört sütun tanımlıydı ama altbilgide altı blok var
   (marka, Keşfet, Katıl, Yasal, Dublaj Rehberi, Takip Et):
   son ikisi ikinci satıra düşüyor, sağ üstte kocaman bir
   boşluk kalıyor ve sayfa "yarım kalmış" bitiyordu. Takip Et
   marka bloğunun içine alındı (HTML), kalan dört gezinti
   sütunu tek satıra sığdı.                                    */
footer .ft-ust{grid-template-columns:minmax(230px,1.45fr) repeat(4,minmax(112px,.85fr))}
.ft-marka-ic{min-width:0}
.ft-takip{margin-top:18px}
.ft-takip b{display:block; font-family:var(--disp); font-size:9.5px; letter-spacing:.3em;
  color:var(--gold); opacity:.85; margin-bottom:9px}
@media(max-width:1000px){
  footer .ft-ust{grid-template-columns:minmax(200px,1.3fr) repeat(2,minmax(110px,1fr))}
}
@media(max-width:860px){
  footer .ft-ust{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  footer .ft-ust{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════════════════
   BOŞ VİTRİN — "henüz video yok" ziyaretçiye ne diyor?
   Eski metin yönetici diliyle yazılmıştı ("Yönetici panelden
   video ekleyebilir") ve ana sayfaya gelen HERKES onu
   görüyordu: siteye ilk kez bakan biri için bu, ekibin hiçbir
   iş yapmadığı anlamına geliyor. Boş durum bir özür değil,
   bir davet olmalı — bu yüzden çıkış yolu var.                */
.bos-vitrin{grid-column:1/-1; width:100%; border:1px dashed var(--line); border-radius:16px;
  padding:34px 30px; text-align:center; background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb,var(--violet) 7%,transparent), transparent 60%)}
.bos-vitrin b{display:block; font-family:var(--disp); font-size:clamp(17px,1.7vw,21px);
  color:var(--txt); margin-bottom:8px}
.bos-vitrin p{margin:0 auto; max-width:46ch; color:var(--muted); font-size:14.5px; line-height:1.7}
.bos-vitrin-eylem{display:flex; gap:11px; justify-content:center; flex-wrap:wrap; margin-top:20px}
.bos-vitrin small{display:block; margin-top:16px; font-size:12px; color:var(--muted); opacity:.75}

/* ═══════════════════════════════════════════════════════════
   TANITIM SAYFASINDA DÜĞME DİLİ TEK OLMALI
   Hero'nun birincil düğmesi bayrak kırmızısı → mor geçişiyle
   çiziliyordu ama kural yalnızca `.hero-actions` içine
   yazılmıştı: sayfanın alt yarısında beliren aynı düğme
   (boş vitrindeki "Discord'da izle") sitenin genel mor-pembe
   gradyanıyla geliyor ve aynı sayfada İKİ FARKLI birincil
   düğme rengi oluyordu. Kapsam bölüm değil, sayfa.            */
#view-landing .btn-red{
  background:linear-gradient(115deg,var(--mz2,#D6113F),var(--mz4,#6A1A89));
  color:#fff; box-shadow:0 6px 24px color-mix(in srgb,var(--red) 18%,transparent)}
#view-landing .btn-red::after{display:none}

/* ═══════════════════════════════════════════════════════════
   ALTBİLGİDEKİ MARK ROZETİ
   `.mark-no` hero'daki büyük MARK plakası için yazılmış:
   30px, altın gradyan, iki kat drop-shadow. Altbilgideki
   12,5px'lik satıra aynı sınıf verilince rakam satırın iki
   katı boyunda, açık renkli bir levha gibi duruyordu — koyu
   altbilginin ortasında beyaz bir yama. Burada aynı bilgi
   satırın kendi ölçüsünde ve tek renk.                        */
.ft-mark .mark-no{
  font:800 12.5px/1 var(--disp),system-ui,sans-serif; letter-spacing:.06em;
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
  -webkit-text-fill-color:currentColor; color:var(--red); filter:none}
.ft-mark{border:0; background:none; cursor:pointer; display:inline-flex; align-items:center; gap:5px}
.ft-mark:hover .mark-no{color:var(--gold)}

/* Manifesto alıntısı sağ sütunda bağlamsız duruyordu: tırnak
   içinde bir cümle, altında boşluk. Künye satırı onu bir metin
   parçasından ALINTIYA çeviriyor — kimin söylediği belli olunca
   cümle havada kalmıyor.

   Künye ayrı bir <p> olarak denendi ve YANLIŞTI: .mf-kap üç
   sütunlu bir ızgara, dördüncü çocuk alt satıra ve BİRİNCİ
   sütuna düşüyor — imza sayfanın sol altında, alıntıdan üç
   sütun uzakta beliriyordu. Alıntının kendi ::after'ı olunca
   hem yanında duruyor hem sticky'siyle birlikte kayıyor hem de
   vurgu cümlesi panelden silinince (blockquote .hidden alır)
   kendiliğinden kayboluyor — JS bağlamak gerekmiyor.

   -webkit-text-fill-color şart: .mf-soz metnini gradyanla
   boyamak için `transparent`a çekiyor ve o değer sözde-öğeye
   de iniyor; künye görünmez oluyordu. */
.mf-soz::after{content:"MİZANİS · MANİFESTO"; display:block; margin-top:18px;
  font-family:var(--disp); font-size:10px; font-weight:700; letter-spacing:.3em;
  color:var(--muted); -webkit-text-fill-color:var(--muted); opacity:.7}


/* Manifesto alıntısının ilk satırı açılış tırnağının ÜSTÜNE
   biniyordu: tırnak 86px'e kadar büyüyen bir sözde-öğe
   (.mf-soz::before) ama metnin sol dolgusu 44px'te kalıyor —
   yani harf tırnaktan dar bir alana yaslanıyor ve ikisi
   çakışıyor. Dolgu tırnağın gerçek genişliğinin üstüne
   çıkarıldı; tırnak da biraz yukarı alındı ki cümlenin
   başlangıç hizasıyla yarışmasın. */
#view-landing .mf-soz{padding-left:clamp(48px,4.4vw,72px); padding-top:30px}
#view-landing .mf-soz::before{top:-14px; opacity:.18}
#view-landing .mf-soz::after{margin-left:0}

/* ═══════════════════════════════════════════════════════════
   BOŞ VİTRİNİN ARKA PLANI
   Kutu kesikli çerçeveli boş bir dikdörtgendi ve sayfanın en
   zayıf yeriydi: "içerik yok" demenin en sessiz hâli. Arkasına
   ekibin kendi görseli kondu (public/vitrin.webp) — kutu artık
   bir eksikliği değil, gelmekte olan işi gösteriyor.

   Görselin üstünde İKİ katman var ve ikisi de gerekli: soldan
   sağa açılan koyu perde metnin arkasını taşıyor, üstteki
   yumuşak karartma da kenarları zemine bağlıyor. Tek katmanla
   ya yazı okunmuyor ya görsel kayboluyordu.

   object-position üst tarafa yaslı (35%): görselin altı moloz,
   üstü gökyüzü ve silüet — dar bir şeride kırpılırken anlamlı
   olan yarısı üstte kalıyor.                                   */
.bos-vitrin{position:relative; overflow:hidden; border-style:solid;
  border-color:color-mix(in srgb,var(--line) 80%,transparent)}
.bos-vitrin::before{content:""; position:absolute; inset:0; z-index:0;
  background:url("vitrin.webp") center 38%/cover no-repeat;
  /* İlk ayar brightness .62 idi ve ÖLÇÜLDÜ: sayfanın kendi zemini
     (body.ozel-arkaplan, fixed) zaten bir tablo; kutunun görseli
     onun kadar koyulaştırılınca ikisi birbirine karışıyor ve
     kutunun içi "biraz daha koyu bir boşluk" gibi duruyordu.
     Görselin kendi kontrastı korunuyor, karartma yalnız METNİN
     arkasında toplanıyor (aşağıdaki radial). */
  filter:saturate(.62) contrast(1.06) brightness(1.02)}
.bos-vitrin::after{content:""; position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(64% 82% at 50% 52%, color-mix(in srgb,var(--bg) 86%,transparent), transparent 78%),
    linear-gradient(180deg,color-mix(in srgb,var(--bg) 55%,transparent),transparent 34%,transparent 62%,color-mix(in srgb,var(--bg) 62%,transparent))}
.bos-vitrin>*{position:relative; z-index:2}
#view-landing .bos-vitrin{padding:56px 30px; border-radius:18px}

/* ═══════════════════════════════════════════════════════════
   İŞ BİRLİĞİ MAİLİ — panel bölümü
   Form iki sütun: alanların çoğu tek satırlık (hesap, ad,
   platform) ve alt alta dizilince bölüm gereksiz uzuyordu.
   Not alanı tam genişlik, çünkü içine cümle yazılıyor.        */
.mail-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.mail-form .mail-genis{grid-column:1/-1}
.mail-kart{border:1px solid var(--line); border-radius:14px; background:var(--panel);
  padding:16px 18px; margin:14px 0}
.mail-ust{display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap}
.mail-ust b{font-size:15.5px}
.mail-platform{font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-left:8px}
.mail-ad{color:var(--muted); font-size:13px}
.mail-rozetler{display:flex; gap:6px; flex-wrap:wrap; align-items:center}
.mail-rozet{font-size:11px; font-weight:700; padding:2px 9px; border-radius:999px;
  border:1px solid currentColor}
.mail-damga{font-size:11px; color:var(--muted); background:var(--panel2);
  border:1px solid var(--line); border-radius:999px; padding:2px 9px}
/* Araştırma yapılamamış taslak GÖZE ÇARPMALI: metin yalnızca
   yöneticinin notuna dayanıyor ve bu işaretlenmezse modelin
   genel cümlesi "araştırılmış gözlem" sanılıp öyle gönderiliyor. */
.mail-damga.yok{color:var(--gold); border-color:color-mix(in srgb,var(--gold) 50%,transparent)}
.mail-damga.ok{color:#7BD88F; border-color:color-mix(in srgb,#7BD88F 45%,transparent)}
.mail-profil{margin:12px 0 6px}
.mail-profil summary{cursor:pointer; font-size:12.5px; color:var(--muted)}
.mail-profil pre{white-space:pre-wrap; font-size:12.5px; line-height:1.65; color:var(--txt);
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:12px 14px; margin:8px 0 0}
.mail-konu{display:block; margin:12px 0 8px; font-size:12.5px; color:var(--muted)}
/* Metin alanı tek aralıklı DEĞİL: e-posta düz yazı ve gövde
   yazı tipiyle okununca satır uzunluğu gerçekte nasıl görüneceğine
   yakın çıkıyor. */
.mail-metin{width:100%; font-family:inherit; font-size:14px; line-height:1.7;
  background:var(--panel2); color:var(--txt); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px; resize:vertical}
.mail-eylem{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-top:12px}
.mail-durum{width:auto; min-width:140px; font-size:13px}
@media(max-width:640px){
  .mail-form{grid-template-columns:1fr}
  .mail-eylem .btn-red.small,.mail-eylem .btn-outline.small{flex:1 1 auto}
}

/* ═══════════════════════════════════════════════════════════
   PROFİL ÖZELLEŞTİRME — kart düzeni + canlı önizleme
   Sekme 4368 piksel uzunluğunda tek bir sütundu: on üç ayrı
   bölüm (avatar, banner, imleç, maskot, tema, çerçeve, ad,
   şifre…) alt alta akıyordu. Şifresini değiştirmek isteyen
   biri üç avatar ızgarasının arasından geçmek zorundaydı.
   Şimdi iki öbek (Görünüm / Hesap) ve kart ızgarası.        */
.pf-oblak{font-family:var(--disp); font-size:13px; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted); margin:26px 0 12px;
  display:flex; align-items:center; gap:12px}
.pf-oblak::after{content:""; flex:1; height:1px;
  background:linear-gradient(90deg,var(--line),transparent)}
.pf-izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); gap:16px}
/* Hesap alanları kısa: dar sütun yeter, geniş kart boşluk demek. */
.pf-izgara-dar{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.pf-kart{background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:18px 20px 20px; min-width:0}
.pf-kart > h3.fsec{margin-top:0}
/* Avatar/karakter ızgaraları kartın içinde: kart genişliğini
   zorlamasınlar diye kendi kapları kaydırılabilir. */
.pf-kart .db-izgara,.pf-kart .ap-secici{max-height:none}
.pf-kart img{max-width:100%}

/* ── Canlı önizleme ──
   Yapışkan: hangi kartla uğraşırsan uğraş üstte kalıyor, seçim
   anında burada görünüyor. Eskiden avatar, çerçeve ve banner
   ayrı ayrı seçiliyor ama BİRLİKTE hiç görünmüyordu. */
.pf-onizle{position:sticky; top:10px; z-index:3; margin-bottom:20px;
  border:1px solid var(--line); border-radius:18px; overflow:hidden;
  background:var(--panel2); box-shadow:0 10px 34px rgba(0,0,0,.34)}
.pf-onizle-banner{height:104px; background:
  linear-gradient(115deg,color-mix(in srgb,var(--violet) 40%,transparent),color-mix(in srgb,var(--red) 34%,transparent));
  background-size:cover; background-position:center}
.pf-onizle-alt{display:flex; align-items:center; gap:14px; padding:0 20px 16px; margin-top:-34px}
.pf-onizle-avatar{position:relative; width:76px; height:76px; flex:none;
  border-radius:50%; overflow:hidden; border:3px solid var(--panel2);
  background:var(--panel); display:flex; align-items:center; justify-content:center}
.pf-onizle-avatar img{width:100%; height:100%; object-fit:cover; display:none}
.pf-onizle-avatar img[src]{display:block}
.pf-onizle-harf{font-family:var(--disp); font-size:30px; font-weight:800; color:var(--red)}
.pf-onizle-yazi{display:flex; flex-direction:column; min-width:0; margin-top:30px}
.pf-onizle-yazi b{font-size:17px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pf-onizle-yazi span{font-size:12.5px; color:var(--muted)}
.pf-onizle-yenile{margin:30px 0 0 auto}
@media(max-width:760px){
  .pf-izgara,.pf-izgara-dar{grid-template-columns:1fr}
  .pf-kart{padding:16px 14px 18px}
  /* Telefonda yapışkan önizleme ekranın üçte birini yiyordu. */
  .pf-onizle{position:relative; top:auto}
}

/* `.btn-outline.small`da `width:100%` var (proje geneli kural).
   Flex satırına konunca flex-basis kabın tamamı oluyor ve düğme
   şeride dönüşüyor — önizlemedeki "Yenile" tam da böyle
   yayılmıştı. Kendi genişliğinde kalması için ikisi birden
   gerekiyor: `width:auto` VE `flex:none`. */
.pf-onizle .pf-onizle-yenile{width:auto; flex:none}
/* Kartlar satırın en uzununa göre gerilmesin: kısa kartın altında
   boşluk kalması, kartın kendi boyunda durmasından daha kötü
   görünüyordu. */
.pf-izgara,.pf-izgara-dar{align-items:start}

/* ── Sesli sohbet ── */
.ses-oda-form{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px}
/* Oda kabı: iframe yok, katılımcı kartları var — ses doğrudan
   tarayıcılar arasında akıyor. */
.ses-kap{margin-top:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--panel); padding:16px 18px 18px}
.ses-bas{display:flex; align-items:baseline; justify-content:space-between; gap:10px; margin-bottom:14px}
.ses-bas b{font-family:var(--disp); font-size:15px}
.ses-bas span{font-size:12.5px; color:var(--muted)}
.ses-kisiler{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px}
.ses-kisi{display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px 12px;
  border:1px solid var(--line); border-radius:14px; background:var(--panel2); position:relative;
  transition:border-color .18s, box-shadow .18s}
/* KONUŞAN KART YANIYOR. Sesi ölçen analiz düğümü eşiği geçince
   sınıf ekleniyor; kimin konuştuğu görünmezse aynı anda iki kişi
   başlıyor ve kimse kimseyi duymuyor. */
.ses-kisi.konusuyor{border-color:color-mix(in srgb,#7BD88F 70%,transparent);
  box-shadow:0 0 0 2px color-mix(in srgb,#7BD88F 28%,transparent)}
.ses-kisi.ben{border-color:color-mix(in srgb,var(--violet) 55%,transparent)}
.ses-kisi img,.ses-kisi .ses-harf{width:54px; height:54px; border-radius:50%; object-fit:cover;
  display:flex; align-items:center; justify-content:center; background:var(--panel);
  font-family:var(--disp); font-size:20px; font-weight:800; color:var(--red)}
.ses-kisi b{font-size:13px; text-align:center; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%}
.ses-kisi .ses-dalga{width:26px; height:3px; border-radius:2px; background:var(--line); transition:background .18s}
.ses-kisi.konusuyor .ses-dalga{background:#7BD88F}
.ses-ipucu{margin:14px 0 0}
#sesMikBtn.kapali{color:var(--red); border-color:color-mix(in srgb,var(--red) 50%,transparent)}
@media(max-width:760px){
  .ses-oda-form{grid-template-columns:1fr}
  .ses-kap{padding:14px; border-radius:12px}
  .ses-kisiler{grid-template-columns:repeat(auto-fill,minmax(116px,1fr)); gap:9px}
  .ses-kisi{padding:12px 8px 10px}
  .ses-kisi img,.ses-kisi .ses-harf{width:44px; height:44px; font-size:17px}
}

/* `.btn-outline.small`da `width:100%` var; flex satırında düğme
   şeride dönüşüyor (proje geneli tuzak). Sesli sohbet tuşları
   kendi genişliğinde kalmalı. */
#tab-ses .mini-form button{width:auto; flex:none}

/* Uygulamanın içinde "uygulamayı indir" bağlantısı gösterilmiyor —
   zaten indirmiş olan birine indirme önermek gürültü. */
body.uygulamada a[href="/indir.html"]{display:none}

/* ═══════════════════════════════════════════════════════════
   MOBİL MENÜ — katlanabilir
   Dar ekranda kenar çubuğu içeriğin üstünde duran bir blok ve
   kırk dokuz sekme açık dururken seçilen sekmenin içeriği
   ekranın çok altında kalıyordu: telefonda stüdyoyu açan biri
   önce bütün menüyü kaydırmak zorundaydı. Menü artık sekme
   seçilince katlanıyor.                                      */
.mobil-menu-dugme{display:none}
@media(max-width:860px){
  .mobil-menu-dugme{
    display:block; width:100%; margin:0 0 10px;
    padding:13px 16px; border-radius:12px;
    background:var(--panel2); color:var(--txt);
    border:1px solid var(--line); font-family:var(--disp);
    font-size:15px; font-weight:700; cursor:pointer;
    /* iOS'ta 16px altı yazı girdiye/düğmeye dokununca
       yakınlaştırıyor; burada 15px güvenli çünkü düğme,
       girdi değil — yine de dokunma hedefi 44px üstünde. */
    min-height:46px; text-align:left}
  .mobil-menu-dugme:active{border-color:var(--red)}
  body.menu-kapali .sidebar{display:none}
}

/* ── Yayın (ekran paylaşımı) ── */
.ses-yayin{display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:14px; margin-top:16px}
.yayin-kutu{position:relative; border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:#000; aspect-ratio:16/9}
.yayin-kutu video{width:100%; height:100%; object-fit:contain; display:block; background:#000}
.yayin-bas{position:absolute; left:0; right:0; top:0; display:flex; align-items:center; gap:8px;
  padding:8px 10px; font-size:12.5px;
  background:linear-gradient(180deg,rgba(0,0,0,.72),transparent)}
.yayin-bas b{font-weight:700}
/* Yayın göstergesi: canlı olduğunu bir bakışta söylemeli,
   yoksa donmuş bir kare ile canlı yayın aynı görünüyor. */
.yayin-nokta{width:8px; height:8px; border-radius:50%; background:var(--red);
  box-shadow:0 0 8px var(--red); animation:yayinNabiz 1.6s ease-in-out infinite; flex:none}
@keyframes yayinNabiz{0%,100%{opacity:1}50%{opacity:.35}}
.yayin-tam{margin-left:auto; background:rgba(0,0,0,.45); border:1px solid var(--line);
  color:var(--txt); border-radius:8px; width:28px; height:28px; cursor:pointer; font-size:13px;
  flex:none; padding:0}
.yayin-tam:hover{border-color:var(--red)}
@media(max-width:760px){
  .ses-yayin{grid-template-columns:1fr}
}
/* Yayın geçici duraksadığında kutu kalıyor, üstüne bilgi
   düşüyor: kaldırmak "yayın bitti" demek olurdu. */
.yayin-kutu.bekliyor::after{content:"görüntü bekleniyor…";position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(7,7,15,.72);color:var(--muted);font-size:13px}

/* ── Özel durum / bağlantılar / profil rengi ── */
.durum-satir{display:flex; gap:8px; align-items:center}
/* Emoji kutusu dar olmalı: `input{width:100%}` genel kuralı onu
   da kapsıyor ve emoji alanı satırın tamamını yiyordu. */
.durum-satir .durum-emoji{width:64px; flex:none; text-align:center; font-size:18px}
.durum-satir input:not(.durum-emoji){flex:1; min-width:0}
.bag-izgara{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:10px}
.renk-satir{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.renk-satir input[type=color]{width:52px; height:38px; flex:none; padding:2px; border-radius:9px;
  border:1px solid var(--line); background:var(--panel2); cursor:pointer}
.renk-hazir{display:flex; gap:6px; flex-wrap:wrap}
.renk-nokta{width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
  cursor:pointer; padding:0; flex:none}
.renk-nokta:hover{transform:scale(1.12); border-color:var(--txt)}
.renk-satir .btn-red.small,.renk-satir .btn-outline.small{width:auto; flex:none}

/* Profil kartında */
/* Durum metni ADIN ALTINDA ama banner'ın önünde duruyor:
   banner açık renkli bir görselse (sakura, gökyüzü) gri yazı
   okunmuyordu. Kendi koyu şeridi var — ad için zaten uygulanan
   çözümün aynısı. */
.pm-durum-metni{display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--txt);
  margin:2px 0 8px; padding:4px 11px; border-radius:999px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);
  border:1px solid color-mix(in srgb,var(--line) 80%,transparent);
  backdrop-filter:blur(6px); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pm-durum-emoji{font-size:15px}
.pm-baglantilar{display:flex; gap:7px; flex-wrap:wrap; margin-top:8px}
.pm-bag{display:inline-flex; align-items:center; gap:5px; font-size:12px; font-weight:600;
  padding:4px 10px; border-radius:999px; border:1px solid var(--line);
  background:var(--panel2); color:var(--muted); text-decoration:none}
.pm-bag:hover{color:var(--txt); border-color:var(--red)}
/* Kişinin seçtiği renk: banner altı şerit ve rozet kenarları.
   Seçilmemişse hiçbir şey değişmiyor — boş renk "siyah" demek
   değil, "sitenin rengi kalsın" demek. */
#profilModal.ozel-renk .profil-banner{border-bottom:3px solid var(--pm-renk)}
#profilModal.ozel-renk .pm-bag:hover{border-color:var(--pm-renk)}
#profilModal.ozel-renk .profil-avatar-wrap{box-shadow:0 0 0 3px var(--pm-renk)}

/* ═══ Stüdyo: dublaj zinciri bölümü ═══
   Zincirin sırası kullanıcının tek tek açıp kapattığı bir şey
   değil, işleme düzeninin kendisi — panelde de öbür bölümlerden
   ayrı dursun diye kenar çizgisi ve hafif vurgu aldı. */
.st-fx-bolum.st-fx-zincir{
  border-left:3px solid var(--red);
  background:linear-gradient(90deg, rgba(255,61,90,.09), transparent 60%);
  padding-left:10px;
  border-radius:6px;
}
.st-fx-bolum.st-fx-zincir > b{ letter-spacing:.3px }

/* ═══════════════════════════════════════════════════════════
   ANA SAYFA — UYGULAMA BÖLÜMÜ
   Uygulama haftalarca çalışıldı ve siteye giren biri varlığından
   haberdar olmuyordu: tek giriş altbilgideki bir satırdı.
   Bölüm "reklam kutusu" gibi değil, sayfanın geri kalanıyla
   aynı dilde duruyor — sol tarafta metin, sağda indirme kartı.
   ═══════════════════════════════════════════════════════════ */
.uyg-ic{
  display:grid;grid-template-columns:1.25fr .85fr;gap:38px;align-items:start;
  max-width:1120px;margin:0 auto;
}
.uyg-giris{font-size:16.5px;line-height:1.72;margin:0 0 18px;color:var(--txt)}
.uyg-giris b{color:#fff}
/* MADDE İŞARETİ ::before + absolute — `li{display:flex}` maddeyi
   ikiye bölüyor: içindeki <b> ayrı bir flex item oluyor,
   ondan sonraki metin ayrı, arada gap kadar boşluk kalıyor. */
.uyg-liste{list-style:none;margin:0;padding:0;display:grid;gap:13px}
.uyg-liste li{position:relative;padding-left:22px;line-height:1.6;opacity:.92}
.uyg-liste li::before{
  content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;
  border:1.5px solid var(--red);transform:rotate(45deg);border-radius:1px;
}
.uyg-liste b{color:#fff;font-weight:700}
.uyg-not{margin:20px 0 0;font-size:13px;line-height:1.62;opacity:.62;
  border-left:2px solid var(--line);padding-left:13px}

.uyg-kutu{
  background:var(--panel);border:1px solid var(--line);border-radius:14px;
  padding:20px;position:sticky;top:90px;
}
.uyg-kutu-bas{display:flex;align-items:center;gap:10px;margin-bottom:16px}
.uyg-kutu-bas b{font-family:var(--disp,inherit);letter-spacing:.08em;font-size:14px}
.uyg-rozet{
  font-size:10.5px;letter-spacing:.1em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--red);color:var(--red);font-weight:700;
}
.uyg-indir{display:grid;gap:9px}
/* Dokunma hedefi: yükseklik 52px VE tam genişlik. Bu projede
   ölçüldü — yalnızca yüksekliğe bakan denetim, içeriği kısa
   olduğu için metne göre büzülen düğmeleri "tamam" sayıyor. */
.uyg-dugme{
  display:flex;align-items:center;gap:12px;min-height:52px;padding:0 15px;
  border:1px solid var(--line);border-radius:10px;background:var(--panel2);
  color:var(--txt);text-decoration:none;transition:border-color .18s,background .18s,transform .18s;
}
.uyg-dugme svg{width:21px;height:21px;flex:none;opacity:.85}
.uyg-dugme b{font-size:14px;font-weight:600}
.uyg-dugme i{margin-left:auto;font-style:normal;font-size:12px;opacity:.55;letter-spacing:.02em}
.uyg-dugme:hover{border-color:var(--red);background:var(--panel);transform:translateX(2px)}
/* Kullanıcının kendi işletim sistemi vurgulu: hangi dosyayı
   indireceğini aramak zorunda kalmasın. */
.uyg-dugme.benim{border-color:var(--red);background:linear-gradient(90deg,rgba(255,61,90,.13),transparent)}
.uyg-dugme.benim i::after{content:" · senin sistemin";opacity:.8}
.uyg-dugme.yok{opacity:.4;cursor:default}
.uyg-dugme.yok:hover{border-color:var(--line);background:var(--panel2);transform:none}
.uyg-dugme.yukleniyor{justify-content:center;opacity:.5;font-size:13px}
.uyg-tum{
  display:block;margin-top:14px;text-align:center;font-size:12.5px;
  color:var(--muted);text-decoration:none;padding:8px;border-radius:8px;
}
.uyg-tum:hover{color:var(--red);background:var(--panel2)}

@media(max-width:900px){
  .uyg-ic{grid-template-columns:1fr;gap:26px}
  .uyg-kutu{position:static}
}
@media(max-width:520px){
  .uyg-giris{font-size:15px}
  .uyg-dugme i::after{content:"" !important}
}

/* ═══════════════════════════════════════════════════════════
   UYGULAMA KİPİ
   Masaüstü kabuğunun kendi başlık çubuğu, kendi ikon şeridi ve
   kendi durum çubuğu var. Site bunların üstüne KENDİ üst
   şeridini de çizince pencerede iki ayrı navigasyon oluyordu:
   biri uygulamanın, biri sayfanın. Uygulamada sitenin şeridi
   gizleniyor — kenar çubuğu (sekme listesi) kalıyor, çünkü o
   kabuk şeridinin karşılığı değil tamamlayıcısı: kabuk
   şeridinde sık kullanılan bölümler, kenar çubuğunda kırk
   dokuz sekmenin tamamı (Discord'daki sunucu şeridi + kanal
   listesi düzeni).
   ═══════════════════════════════════════════════════════════ */
body.uygulamada #topnav{display:none}
/* Tanıtım görünümü uygulamada hiç açılmıyor (app.js), ama
   biri adres çubuğundan zorlarsa sayfa boş kalmasın diye
   altbilgi ve indirme bölümü yine de gizli. */
body.uygulamada #uygulama,
body.uygulamada footer{display:none}
/* SİSTEM BİLDİRİMİ SİTEYE İLK GELENE YAZILMIŞ BİR KARŞILAMA
   ("görünümümüz yapay zekâ gibi durabilir ama arkasında emek
   var"). Uygulamayı kuran biri o cümleyi çoktan okumuş; üstelik
   uygulamada ekranın üçte birini kaplayıp giriş ekranını
   örtüyordu — QR kodunun tam üstüne düşüyor. */
body.uygulamada .sistem-bildirim{display:none!important}

/* ═══════════════════════════════════════════════════════════
   QR İLE GİRİŞ
   ═══════════════════════════════════════════════════════════ */
.auth-ayrac{display:flex;align-items:center;gap:12px;margin:16px 0 12px;
  color:var(--muted);font-size:12px;letter-spacing:.08em}
.auth-ayrac::before,.auth-ayrac::after{content:"";flex:1;height:1px;background:var(--line)}
.auth-qr-ac{display:flex;align-items:center;justify-content:center;gap:10px}
/* `.btn-outline.small`da width:100% var; bu BÜYÜK varyant ama
   simge+metin flex satırı olduğu için simgenin büzülmemesi
   ayrıca söylenmeli — tek karakterlik kutular metne göre
   büzülüp hizadan çıkıyor. */
.auth-qr-ac svg{width:19px;height:19px;flex:none}

.qr-panel{display:flex;flex-direction:column;align-items:center;gap:14px;padding:4px 0 0}
.qr-geri{align-self:flex-start;background:none;border:0;color:var(--muted);
  font:inherit;font-size:13px;cursor:pointer;padding:4px 2px}
.qr-geri:hover{color:var(--txt)}
.qr-panel h3{font-size:16px;margin:0}
.qr-kutu{position:relative;background:#fff;padding:10px;border-radius:14px;line-height:0}
.qr-kutu img{width:260px;height:260px;display:block;border-radius:6px}
.qr-perde{position:absolute;inset:0;background:rgba(15,15,29,.93);border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--txt);line-height:1.5;text-align:center;padding:16px}
.qr-adim{margin:0;padding-left:20px;display:grid;gap:7px;font-size:13.5px;
  color:var(--muted);line-height:1.5;max-width:300px}
.qr-adim b{color:var(--txt)}
.qr-durum{margin:0;font-size:13px;color:var(--muted);min-height:19px;text-align:center}

/* ── Okuyucu (telefon) ── */
.qro{position:fixed;inset:0;z-index:9000;background:#05050C;
  display:flex;flex-direction:column;align-items:center}
.qro-ust{width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:14px 16px;color:var(--txt);font-family:var(--disp);letter-spacing:.06em;font-size:14px}
/* Dokunma hedefi 44px: köşedeki kapatma düğmesi tek karakter
   olduğu için kutusu metne göre büzülüyordu — bu projede
   ölçülmüş bir hata (14x40 px silme düğmesi). */
.qro-kapat{background:none;border:0;color:var(--txt);font-size:28px;line-height:1;
  cursor:pointer;width:44px;height:44px;border-radius:10px}
.qro-kapat:hover{background:var(--panel2)}
.qro-sahne{position:relative;flex:1;width:100%;overflow:hidden;
  display:flex;align-items:center;justify-content:center}
/* object-fit:cover — kamera en-boy oranı ekranınkiyle uyuşmuyor
   ve `contain` bırakılırsa kare, kenarlarda geniş siyah
   bantlarla küçücük kalıyor. */
.qro-sahne video{width:100%;height:100%;object-fit:cover}
.qro-cerceve{position:absolute;width:min(68vw,280px);aspect-ratio:1;max-width:100%;
  pointer-events:none}
.qro-cerceve i{position:absolute;width:34px;height:34px;border:3px solid var(--red)}
.qro-cerceve i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0;border-radius:10px 0 0 0}
.qro-cerceve i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0;border-radius:0 10px 0 0}
.qro-cerceve i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0;border-radius:0 0 0 10px}
.qro-cerceve i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0;border-radius:0 0 10px 0}
.qro-yazi{margin:0;padding:16px;color:var(--txt);text-align:center;font-size:14px;
  line-height:1.5;max-width:420px}
.qro-onay{position:absolute;left:0;right:0;bottom:0;background:var(--panel);
  border-top:1px solid var(--line);border-radius:16px 16px 0 0;padding:22px 20px 26px;
  display:grid;gap:11px;text-align:center}
.qro-onay h3{margin:0;font-size:17px}
.qro-onay p{margin:0;color:var(--muted);font-size:14px;line-height:1.5}
.qro-uyari{font-size:12.5px!important;opacity:.75}
.qro-uyari b{color:var(--red)}
.qro-dugmeler{display:flex;gap:10px;margin-top:6px}
.qro-dugmeler button{flex:1;min-height:46px}

/* ═══════════════════════════════════════════════════════════
   UYGULAMA KİPİ — YOĞUNLUK
   Site bir TANITIM sitesi olarak tasarlandı: geniş boşluklar,
   büyük başlıklar, nefes alan bölümler. Doğru tercih — ama bir
   masaüstü uygulamasında aynı ölçüler "tarayıcıda açılmış web
   sayfası" hissi veriyor, çünkü uygulamalar bilgi yoğunluğunu
   yüksek tutar (Discord, Audition, Reaper hepsinde böyle).

   Ölçüler KÜÇÜLTÜLMÜYOR, SIKILAŞTIRILIYOR: yazı boyu okunabilir
   kalıyor, azalan şey boşluk. Dokunma hedefleri (düğme, sekme)
   hiç küçülmüyor — orada 44px altına inmek gerçek bir kayıp.
   ═══════════════════════════════════════════════════════════ */
body.uygulamada .pane-title{
  font-size:19px;margin-bottom:14px;padding-bottom:10px;letter-spacing:.01em;
}
body.uygulamada .tabpane{padding-top:14px}
body.uygulamada .mini-form{gap:14px}
body.uygulamada .pf-oblak{font-size:13px;letter-spacing:.1em;margin:18px 0 10px}
body.uygulamada .fsec{font-size:13.5px;margin-bottom:7px}
body.uygulamada .fnote{font-size:12.5px;line-height:1.55}
/* Kenar çubuğu: uygulamada kabuk şeridiyle yan yana duruyor,
   iki navigasyon üst üste gelince genişlik içerikten çalıyor. */
body.uygulamada .sidebar{padding-top:10px}
body.uygulamada .snav{padding-top:7px;padding-bottom:7px;min-height:36px}
/* Kart ızgaralarında satır arası — site 22px kullanıyor. */
body.uygulamada .pf-izgara{gap:14px}
body.uygulamada .pf-kart{padding:15px}

/* ═══════════════════════════════════════════════════════════
   TELEFON UYGULAMASI KİPİ
   Android paketi siteyi bir WebView'da açıyor. Hiçbir şey
   yapılmazsa kullanıcı "uygulamayı" açıp SİTEYİ görüyor —
   tanıtım sayfası, hamburger menü, altbilgi. Buradaki kurallar
   o pencereyi bir uygulamaya çeviriyor: gezinme altta
   (başparmağın durduğu yer), tanıtım öğeleri yok, içerik
   kenardan kenara.
   ═══════════════════════════════════════════════════════════ */
/* Çubuk DAR EKRANDA her zaman: telefonda tarayıcıdan giren
   biri de stüdyodan çıkabilmeli (stüdyonun odak modu yan
   menüyü gizliyor). Masaüstünde gizli. */
.mobil-alt{display:none}
@media(max-width:820px){
  .mobil-alt{
    display:grid;grid-template-columns:repeat(5,1fr);
    position:fixed;left:0;right:0;bottom:0;z-index:850;
    background:color-mix(in srgb, var(--panel) 94%, transparent);
    border-top:1px solid var(--line);
    padding-bottom:env(safe-area-inset-bottom,0);
    backdrop-filter:blur(14px);
  }
  .mobil-alt button{
    background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
    min-height:56px;display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:3px;padding:7px 2px;transition:color .16s;position:relative;
  }
  .mobil-alt svg{width:22px;height:22px}
  .mobil-alt span{font-size:10.5px;letter-spacing:.02em}
  .mobil-alt button.aktif{color:var(--red)}
  .mobil-alt button.aktif::before{
    content:"";position:absolute;top:0;width:26px;height:2px;
    background:var(--red);border-radius:0 0 2px 2px;
  }
  /* İçerik çubuğun altında kalmasın. */
  .content,.app-shell{padding-bottom:calc(62px + env(safe-area-inset-bottom,0))}
}
body.mobil-uygulama .mobil-alt{
  display:grid;grid-template-columns:repeat(5,1fr);
  position:fixed;left:0;right:0;bottom:0;z-index:850;
  background:color-mix(in srgb, var(--panel) 94%, transparent);
  border-top:1px solid var(--line);
  /* Ekranın altındaki sistem çubuğu (gesture bar) düğmelerin
     üstüne biniyor; güvenli alan kadar iç boşluk şart. */
  padding-bottom:env(safe-area-inset-bottom,0);
  backdrop-filter:blur(14px);
}
body.mobil-uygulama .mobil-alt button{
  background:none;border:0;color:var(--muted);font:inherit;cursor:pointer;
  /* 56px: parmak hedefi için 44px taban + etiket satırı. */
  min-height:56px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  padding:7px 2px;transition:color .16s;
}
body.mobil-uygulama .mobil-alt svg{width:22px;height:22px}
body.mobil-uygulama .mobil-alt span{font-size:10.5px;letter-spacing:.02em}
body.mobil-uygulama .mobil-alt button.aktif{color:var(--red)}
/* Aktif sekmenin üstünde ince bir çizgi — renk tek başına
   renk körlüğünde ayırt edilemiyor. */
body.mobil-uygulama .mobil-alt button.aktif::before{
  content:"";position:absolute;margin-top:-7px;width:26px;height:2px;
  background:var(--red);border-radius:0 0 2px 2px;
}
body.mobil-uygulama .mobil-alt button{position:relative}

/* İçerik çubuğun altında kalmasın. */
body.mobil-uygulama .content,
body.mobil-uygulama .app-shell{padding-bottom:calc(62px + env(safe-area-inset-bottom,0))}
/* Tanıtım öğeleri: uygulamada hiç yok. */
body.mobil-uygulama #topnav,
body.mobil-uygulama footer,
body.mobil-uygulama #uygulama,
body.mobil-uygulama .sistem-bildirim{display:none!important}
/* Üst şerit gizlenince onun için ayrılan boşluk da kalkmalı. */
body.mobil-uygulama{--ust-yuk:0px}

/* ═══════════════════════════════════════════════════════════
   UYGULAMA — SES STÜDYOSU VE DOKUNMA HEDEFLERİ
   ═══════════════════════════════════════════════════════════ */

/* MASKOT VE EKRAN KEDİSİ UYGULAMADA YOK. Sitede ikisi de
   kimliğin parçası — dolaşan bir kedi, köşede parlayan ışıltı.
   Uygulamada ise ses stüdyosunun üstünde duran bir maskot,
   kayıt alırken dikkat dağıtıyor ve pencereyi "oyuncak" gibi
   gösteriyor. Sitede duruyor, uygulamada gizli. */
/* Maskot SES STÜDYOSU ve SESLİ SOHBET açıkken susuyor.
   Tamamen kaldırmak yanlış olurdu — maskot sitenin kimliğinin
   parçası ve uygulamada da öyle kalmalı. Ama kayıt alırken
   ekranın köşesinde konuşan bir karakter ("Aa, geldin mi?")
   dikkati tam da toplanması gereken anda dağıtıyor; seste
   konuşurken de aynısı.

   `:not(.hidden)` ŞART: bu projede BÜTÜN sekmeler DOM'da
   duruyor, yalnızca görünmeyenler `.hidden` taşıyor. Koşulsuz
   `:has(#tab-studyo)` her zaman doğru çıkar ve maskot hiçbir
   yerde görünmez. */
body.uygulamada:has(#tab-studyo:not(.hidden)) #maskot,
body.uygulamada:has(#tab-ses:not(.hidden)) #maskot{
  display:none!important;
}
/* Ekran kedisi ve ışıltı küresi uygulamada hiç yok: ikisi de
   sayfanın ÜSTÜNDE dolaşıyor ve stüdyonun sürükle-bırak
   şeridiyle aynı alanı paylaşıyor. */
body.uygulamada #kediKat,
body.uygulamada .ekran-kedi,
body.uygulamada #isiltiKure,
body.uygulamada .isilti-kure{display:none!important}

/* DOKUNMA HEDEFİ: GÖRSEL BOYUT AYNI, TIKLAMA ALANI BÜYÜK.
   ÖLÇÜLDÜ — stüdyodaki tema noktaları 16×16, mini düğmeler
   22×22. Bu ölçüler 44px'lik parmak hedefinin çok altında ve
   komşusuna basmak kolay: "kanalı sil" düğmesi sessize alma
   düğmesinin yanında duruyor. `::after` ile şeffaf bir alan
   büyütmek tasarımı değiştirmiyor, yalnızca ıskalamayı
   bitiriyor. */
.st-tema-nokta,
.st-mini{position:relative}
.st-tema-nokta::after,
.st-mini::after{
  content:"";position:absolute;
  /* 16px noktayı 40px'e, 22px düğmeyi 40px'e çıkarıyor. */
  inset:-12px;border-radius:8px;
}
.st-mini::after{inset:-9px}

/* Cetvel şeridi kendi kabında kayıyor. Ölçüldü: `.st-cetvel`
   ve mobil karşılığı kaptan taşıyordu — sayfa yatay kaymadığı
   için taşma olarak görünmüyor, cetvelin sağ ucu sessizce
   kırpılıyordu. */
.st-cetvel,.st-mob-cetvel{max-width:100%}

/* ═══════════════════════════════════════════════════════════
   TELEFONDA SES STÜDYOSU — KAYIT ÇUBUĞU GÖRÜNMÜYORDU
   ------------------------------------------------------------
   ÖLÇÜLDÜ: alt taşıma çubuğu (`position:fixed; bottom:0`)
   ekranın DIŞINDA duruyordu — üst kenarı 836px, ekran 844px,
   alt kenarı 919px. Genişliği de 390 değil 358'di. Yani
   `fixed` viewport'a değil bir ATAYA göre konumlanıyordu.

   SEBEP `.tabpane` ANİMASYONU. Kural şu:
     .tabpane{ animation: sayfaGir … both; will-change:opacity,transform }
   `both` fill-mode animasyon bittikten sonra SON KAREYİ
   koruyor (`transform: translate3d(0,0,0)`) ve `will-change:
   transform` da tek başına aynı şeyi yapıyor: ikisi de öğeyi
   "containing block" hâline getiriyor, içindeki her
   `position:fixed` artık viewport'a değil o kutuya sabitleniyor.
   Transform KİMLİK MATRİSİ olduğu için görsel olarak hiçbir
   şey yapmıyor — bu yüzden bakarak anlaşılmıyor.

   Sonuç: telefonda ses stüdyosunun ÇAL ve KAYIT düğmeleri hiç
   görünmüyordu. Stüdyonun tek işi kayıt almak.

   Stüdyoda giriş animasyonu kapatıldı: sekme zaten ağır
   (dalga tuvalleri, kanal şeritleri) ve animasyon orada
   kazançtan çok bedel. Diğer sekmelerde animasyon duruyor.
   ═══════════════════════════════════════════════════════════ */
#tab-studyo{
  animation:none!important;
  will-change:auto!important;
  backface-visibility:visible!important;
}
/* Alt öğelerin sıralı giriş animasyonu da `both` ile transform
   bırakıyor — çubuk bu öğelerden birinin içindeyse aynı tuzak
   bir kat aşağıda tekrar kuruluyor. */
#tab-studyo > *{animation:none!important;will-change:auto!important}

/* UYGULAMADA İKİ ÇUBUK ÜST ÜSTE BİNİYOR. Alt gezinme çubuğu
   (Panel/Stüdyo/Ses/Sohbet/Daha) da ekranın altına sabit;
   stüdyonun taşıma çubuğu onun ÜSTÜNDE durmalı, yoksa kayıt
   düğmesi gezinme çubuğunun altında kalır. */
body.mobil-uygulama #tab-studyo .st-mobil-bar{
  /* 68px: gezinme çubuğu ÖLÇÜLDÜ 65px ve 62px verilince 3
     piksel çakışıyordu — kayıt düğmesinin alt kenarı gezinme
     çubuğunun altında kalıp tıklanamaz oluyordu. */
  bottom:calc(68px + env(safe-area-inset-bottom,0));
}
/* İçeriğin altında iki çubuk kadar boşluk: gezinme + taşıma.
   Yoksa son kanal şeridi çubukların arkasında kalıyor. */
body.mobil-uygulama #tab-studyo{
  padding-bottom:calc(150px + env(safe-area-inset-bottom,0));
}

/* ═══ TELEFONDA KAYIT DÜĞMELERİNİN ÜSTÜNÜ ÖRTEN ÜÇ ÖĞE ═══
   ÖLÇÜLDÜ (`elementFromPoint` ile düğme merkezlerine bakarak):
   stüdyonun taşıma çubuğu ekranda ve çakışmasız duruyordu ama
   Çal/Dur, Kayıt ve WAV düğmelerine BASILAMIYORDU — üstlerinde
   başka öğeler vardı:
     · "Kaldığın yerden devam" bildirimi (z-index 930)
     · Jarvis küresi (sağ alt köşe)
   İkisi de sitede doğru yerde duruyor; sorun uygulamada alta
   İKİ çubuk birden gelmesi (gezinme + taşıma) ve o köşenin
   artık dolu olması. */
body.mobil-uygulama .oturum-bildirim{
  bottom:calc(150px + env(safe-area-inset-bottom,0))!important;
}
/* JARVIS KÜRESİ TELEFONDA STÜDYODA HİÇ GÖRÜNMÜYOR.
   Önce yukarı kaydırılmıştı (bottom 150px) ama taşıma çubuğu
   iki katlı olunca (üstte zaman, altta düğmeler) küre yine
   KAYIT düğmesinin üstüne geldi — ÖLÇÜLDÜ, `elementFromPoint`
   kayıt düğmesinin merkezinde `jarvisKure` döndürüyordu.

   Telefonda stüdyo tam ekran bir çalışma alanı ve ekranın alt
   köşesi tamamen transport'a ait. Küre sekmeden çıkınca geri
   geliyor. Sesli sohbette ise yalnızca yukarı kaydırılıyor:
   orada alt köşe boş. */
body.mobil-uygulama:has(#tab-studyo:not(.hidden)) #jarvisKok{
  display:none!important;
}
body.mobil-uygulama:has(#tab-ses:not(.hidden)) #jarvisKok{
  bottom:calc(150px + env(safe-area-inset-bottom,0))!important;
}
/* Taşıma çubuğu her şeyin üstünde: kayıt almak, bir bildirimi
   okumaktan önce gelir. */
body.mobil-uygulama #tab-studyo .st-mobil-bar{z-index:940}

/* Video panelindeki boyut düğmeleri — artı/eksi, ikonlu. */
.st-vo-boy svg{width:13px;height:13px}
.st-vo-bas{user-select:none}

/* ═══════════════════════════════════════════════════════════
   SAHNE MONİTÖRÜ SABİT DURUYOR
   ------------------------------------------------------------
   `#tab-studyo>*{position:relative}` (v104'teki "Aurora"
   kuralı) sekmenin bütün doğrudan çocuklarını akışa sokuyor ve
   video panelini de yakalıyordu. FX paneli için istisna
   yazılmış (`#tab-studyo>.st-fx-panel{position:absolute}`) ama
   video paneli unutulmuş.

   Sonucu ÖLÇÜLDÜ: panel `position:relative` kalıyor, sayfa
   kaydırılınca ekranın dışına çıkıyordu — üst kenarı 1185px,
   ekran 830px. Yani dublaj yaparken tam da bakılması gereken
   şey görünmüyordu.

   Kural bu dosyanın sonunda: `style.css` içindeki aynı
   özgüllüklü kural (#tab-studyo .st-video-onizle) daha sonra
   tanımlandığı için oraya yazılan her şey eziliyordu —
   `grafik.css` en son yüklenen stil dosyası.

   Genişliği JS veriyor (`stVideoBoyut`), o yüzden burada
   genişlik YAZILMIYOR: yazılsaydı boyut düğmeleri hiçbir şey
   yapmazdı. */
#tab-studyo > .st-video-onizle,
#tab-studyo .st-video-onizle{
  position:fixed;
  top:86px;right:22px;left:auto;bottom:auto;
  z-index:60;
  max-width:calc(100vw - 48px);
}
/* Video kutusunun yüksekliği panelin genişliğinden türesin —
   `max-height` tavanları paneli büyütünce görüntüyü aynı
   boyda bırakıp yanlarda siyah bant oluşturuyordu. */
#tab-studyo .st-video-onizle video{
  max-height:none;aspect-ratio:16/9;object-fit:contain;
}

/* ═══════════════════════════════════════════════════════════
   KİP SEÇİCİ + PROFESYONEL GÖRÜNÜM
   ------------------------------------------------------------
   Site anime kimliğiyle kurulu ve öyle kalıyor. Profesyonel kip
   AYRI BİR SİTE DEĞİL — aynı sitenin ikinci yüzü: süsler
   kapanıyor, metin işin kendisinden bahsediyor, arşiv anime
   dışı yapıtları gösteriyor.

   Marka rengi (kırmızı) DEĞİŞMİYOR. Kurumsal görünsün diye
   maviye çevirmek, siteyi "başka bir şirket" yapardı; değişen
   şey doygunluk ve süs miktarı.
   ═══════════════════════════════════════════════════════════ */
.kip-secici{
  display:inline-flex;align-items:center;gap:6px;margin-top:22px;padding:5px;
  background:rgba(10,10,20,.55);border:1px solid var(--line);border-radius:12px;
  backdrop-filter:blur(8px);
}
.ks-etiket{
  font-size:10px;letter-spacing:.16em;color:var(--muted);
  padding:0 8px 0 6px;font-family:var(--disp);font-weight:700;
}
.ks-tus{
  display:inline-flex;align-items:center;gap:7px;
  /* 40px: kip seçici hero'da duruyor ve telefonda başparmakla
     basılıyor. */
  min-height:40px;padding:0 14px;border-radius:9px;
  background:none;border:1px solid transparent;color:var(--muted);
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  transition:color .16s,background .16s,border-color .16s;
}
.ks-tus svg{width:16px;height:16px;flex:none}
.ks-tus:hover{color:var(--txt)}
.ks-tus.aktif{color:#fff;background:var(--panel2);border-color:var(--line)}
.ks-tus.aktif svg{color:var(--red)}
@media(max-width:520px){
  .kip-secici{width:100%;justify-content:center;flex-wrap:wrap}
  .ks-etiket{width:100%;text-align:center;padding:2px 0 4px}
}

/* ── PROFESYONEL KİP ── */
/* Anime süsleri kapanıyor: yaprak yağmuru, yükselen zerreler,
   higanbana tarlası, kana yazısı, maskot, ekran kedisi.
   Hepsi sitenin kimliği — ama bir oyun stüdyosuna sunum
   yaparken ekranda çiçek yağmuru istemiyorsun. */
body.pro-kip .hb-yaprak,
body.pro-kip .hb-toz,
body.pro-kip .hb-tarla,
body.pro-kip .sakura,
body.pro-kip .ft-kana,
body.pro-kip .marka .kana,
body.pro-kip #maskot,
body.pro-kip #kediKat,
body.pro-kip .ekran-kedi,
body.pro-kip #parcaciklar{display:none!important}

/* Tipografi sakinleşiyor: başlıklar biraz daha küçük ve harf
   aralığı normale dönüyor — geniş aralıklı büyük başlık
   "afiş" hissi veriyor, kurumsal sayfa değil. */
body.pro-kip #heroBaslik{font-size:clamp(30px,5vw,52px);letter-spacing:-.02em}
body.pro-kip .eyebrow{letter-spacing:.18em;opacity:.8}
/* Hero'nun kırmızı-mor alt şeridi inceliyor. */
body.pro-kip .hero::after{opacity:.45}
/* Bölüm numaraları (01, 02…) kalıyor ama vurgusu azalıyor. */
body.pro-kip .sec-title{letter-spacing:-.01em}
body.pro-kip .sec-title span{opacity:.75}

/* KADRO BANDI ARTIK GİZLENMİYOR, DEĞİŞİYOR (app.js
   `proBantUygula`). Burada duran eski kural
   `#kadroBant, .kadro-bant` seçicilerine yazılmıştı ve ÖLÇÜLDÜ:
   ikisi de sitede HİÇ YOK, sıfır eşleşme. Kural dosyada
   duruyordu, hiçbir şey yapmıyordu ve profesyonel kipte
   sayfanın en geniş yüzeyinde anime açılışları oynamaya devam
   ediyordu. Gizlemek de doğru değildi: bandın yeri 190-360
   piksel ve gizlenince orada boşluk kalıyor. */
body.pro-kip .ga-montaj::after{
  /* Kipte bandın üstündeki kırmızı-mor tül nötr mürekkebe
     düşüyor; klipler zaten siyah-beyaz. */
  background:linear-gradient(90deg,#0E1013 0%,transparent 12%,transparent 88%,#0E1013 100%)!important;
}
body.pro-kip .gm-serit video{filter:contrast(1.06) brightness(.96)}

/* ═══════════════════════════════════════════════════════════
   PROFESYONEL KİP — TAM PALET DEĞİŞİMİ
   ------------------------------------------------------------
   İlk denemede yalnız süsler kapatılmış, marka rengi
   korunmuştu ("kırmızıyı değiştirmek siteyi başka bir şirket
   yapar" gerekçesiyle). İstek netti: profesyonel kipte anime
   ile ilgili HİÇBİR ŞEY kalmasın, renkler dahil.

   Palet monokrom: siyah zemin, gri katmanlar, tek soğuk vurgu.
   Kırmızı/mor/altın üçlüsü tamamen çıkıyor. Renk artık kimlik
   değil BİLGİ taşıyor — yalnızca durum bildiren yerlerde
   (kayıt, hata, onay) görünüyor.

   Değişkenler `:root` yerine `body.pro-kip` üzerinde
   tanımlanıyor: bütün bileşenler zaten bu değişkenleri
   okuyor, yani tek yerden geçiş. Sekme sekme kural yazmak
   yüzlerce satır olurdu ve biri mutlaka unutulurdu.
   ═══════════════════════════════════════════════════════════ */
body.pro-kip{
  --bg:#0B0B0C;
  --panel:#131316;
  --panel2:#1B1B1F;
  --line:#2A2A30;
  --txt:#E9E9EC;
  --muted:#8C8C96;
  /* Vurgu: soğuk çelik grisi. Kırmızının yerini alıyor ama
     dikkat çekmiyor — profesyonel sunumda vurgu sessiz olur. */
  --red:#9AA7BD;
  --red-dim:#6E7A8D;
  --red-rgb:154,167,189;
  --violet:#7E8AA0;
  --gold:#B9BCC4;
  --gold-rgb:185,188,196;
  --acc:#9AA7BD;
}
/* Arka plan görseli (Atatürk/anime sahnesi) kalkıyor: hero'nun
   altındaki fotoğraf sitenin en "anime" duran yeri. Yerine düz
   koyu zemin + çok hafif bir doku geçişi. */
/* ARKA PLAN: GERÇEK BİR SPEKTROGRAM.
   Anime kipinde hero'da bir sahne görseli duruyor; profesyonel
   kipte onun yerine düz koyu zemin bırakmak sayfayı "yarım
   kalmış" gösteriyordu.

   Görsel STOK FOTOĞRAF DEĞİL, üretilmiş: ffmpeg ile sentezlenen
   çok harmonikli bir sinyalin `showspectrumpic` çıktısı, gri
   tonlamaya indirilip aynalanmış ve paletle boyanmış. Yani
   ekranda duran şey gerçekten SES — telif sorunu yok, konuyla
   birebir ilgili ve her yeniden üretimde aynı.

   Soldan sağa koyulaşan bir örtü var: hero metni solda duruyor
   ve desenin üstünde okunmuyordu. */
body.pro-kip .hero{
  background:#0B0B0C url("/pro-arka.jpg") center/cover no-repeat!important;
}
/* Alt kenarda sayfaya geçiş — kesik bir görsel sınırı
   "arka plan yapıştırılmış" gibi duruyor. */
body.pro-kip .hero::before{
  content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(180deg,transparent,#0B0B0C);
  opacity:1;pointer-events:none;
}
body.pro-kip .hero > img,
body.pro-kip .hero-bg,
body.pro-kip #heroGorsel,
body.pro-kip .hero-gorsel{display:none!important}
body.pro-kip .hero::before{opacity:.25}
/* Kırmızı-mor alt şerit nötrleşiyor. */
body.pro-kip .hero::after{
  background:linear-gradient(90deg,transparent,#3A3F49,transparent)!important;
  opacity:.5;
}
/* Gradyanlı düğme düz griye dönüyor — gradyan "oyun arayüzü"
   hissi veriyor. */
body.pro-kip .btn-red{
  background:#2B2F37!important;border:1px solid #3C424D!important;color:#EDEDF0!important;
  box-shadow:none!important;
}
body.pro-kip .btn-red:hover{background:#353A44!important;border-color:#4A515E!important}
/* MARK plakası ve 1881 rozeti: ikisi de kimliğe ait, kipte
   nötr çerçeveye düşüyor. */
body.pro-kip .ataturk-link,
body.pro-kip .mark-plaka,
body.pro-kip .ft-mark{filter:saturate(.15) brightness(.92)}
/* Anime ile ilgili sekmeler menüden çıkıyor: veritabanı ve
   manga bölümleri profesyonel kipte işe yaramıyor. */
body.pro-kip .snav[data-tab="anime"],
body.pro-kip .snav[data-tab="manga"]{display:none!important}
/* Kalan her yerde doygunluk kırılıyor: yüklenmiş kapak
   görselleri, avatar çerçeveleri, rozet ikonları anime
   estetiğini geri getiriyordu. */
body.pro-kip .sekme-ikon,
body.pro-kip .pf-cerceve,
body.pro-kip .rozet img{filter:saturate(.2)}

/* Sabit gradyanlar `--red` değişkenini OKUMUYOR — hero
   başlığındaki vurgulu kelime, logo ve MARK plakası kendi
   renklerini gömülü taşıyor. Palet değişkenini değiştirmek
   onlara ulaşmıyor; tek tek nötrleştiriliyor. */
/* VURGULU KELİME DÜZ RENK — GRADYAN HİLESİ DEĞİL.
   Önce `background-clip:text` ile gri bir gradyan denendi ve
   kelime EKRANDAN KAYBOLDU: `em`in altında ayrıca bir parlama
   katmanı var (sözde eleman + text-shadow) ve metin saydam
   yapılınca geriye yalnızca o bulanık blok kaldı. Kipin işi
   sadeleştirmek; burada en sade çözüm düz renk. */
body.pro-kip .hero h1 em,
body.pro-kip #heroBaslik em{
  background:none!important;
  -webkit-text-fill-color:#C6CCD8!important;
  color:#C6CCD8!important;
  text-shadow:none!important;
  filter:none!important;
}
body.pro-kip .hero h1 em::before,
body.pro-kip .hero h1 em::after,
body.pro-kip #heroBaslik em::before,
body.pro-kip #heroBaslik em::after{display:none!important;content:none!important}
/* Logo: gri tonlama. Silmek yerine renksizleştirmek — marka
   işareti duruyor, rengi gitmiyor. */
/* Logo her yerde gri: üst şeritteki küçük M, hero'daki büyük
   M, altbilgi ve giriş kartı. Seçiciyi dar tutmak bir tanesini
   kaçırıyordu — `img` taşıyan her marka kabı yakalanıyor. */
body.pro-kip .hero-logo,
body.pro-kip .js-logo-full,
body.pro-kip #heroLogoImg,
body.pro-kip #heroLogoWrap img,
body.pro-kip .nav-logo img,
body.pro-kip .marka img,
body.pro-kip .logo img,
body.pro-kip img[src*="logo"],
body.pro-kip .auth-logo{filter:grayscale(1) brightness(1.3) contrast(.95)}
/* Menüdeki vurgulu bağlantı (Ekip Başvuru) ve tema düğmeleri */
body.pro-kip .nav-btn.accent{color:var(--txt)!important}
body.pro-kip .nav-btn.accent:hover{color:#fff!important}
/* MARK plakası: turuncu ışıma kipin dışında kalıyordu. */
body.pro-kip .mark-plaka,
body.pro-kip #markPlaka,
body.pro-kip .mk-plaka{filter:grayscale(1) brightness(.9)}
/* Bölüm numaraları ve ayraçlardaki kırmızı tonlar */
body.pro-kip .sec-title::before,
body.pro-kip .tori-line{filter:grayscale(1) opacity(.6)}

/* ═══ FADE TUTAMAKLARI ═══
   Klibin iki üst köşesinde. Düğmeyle adım adım fade ayarlamak
   (0→5→10→20 ms…) kaba kalıyordu: dublajda her repliğin girişi
   başka uzunlukta isteniyor.

   Tutamak KLİBİN İÇİNDE ama üstte: kırpma sapıyla (sol/sağ 9
   piksel) çakışmasın diye yalnızca üst şeridi kaplıyor.
   Sürükleme kodu da önce tutamağa bakıyor. */
.st-klip{position:relative}
.st-fade-sap{
  position:absolute;top:0;width:14px;height:18px;z-index:6;
  cursor:ew-resize;touch-action:none;
  /* Görünür ama baskın değil: köşeyi kesen ince bir üçgen. */
  background:linear-gradient(135deg,rgba(255,255,255,.5) 0 45%,transparent 46%);
  opacity:.45;transition:opacity .15s;
}
.st-fade-sap.sol{left:0}
.st-fade-sap.sag{right:0;transform:scaleX(-1)}
.st-klip:hover .st-fade-sap{opacity:.9}
.st-fade-sap:hover{opacity:1}
.st-klip.fade-ayar .st-fade-sap{opacity:1}
/* Sürüklerken milisaniye değeri klibin ortasında görünüyor —
   tutamağa bakarken sayıyı aramak sürüklemeyi bozuyor. */
.st-fade-etiket{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  background:rgba(8,8,14,.88);border:1px solid var(--line);border-radius:7px;
  padding:3px 9px;font-size:11px;font-weight:700;color:var(--txt);
  z-index:8;pointer-events:none;font-variant-numeric:tabular-nums;
}
.st-fade-etiket[hidden]{display:none!important}

/* ═══════════════════════════════════════════════════════════
   STÜDYO ARAÇ ÇUBUĞU — HİZALAMA
   ------------------------------------------------------------
   Gruplar (Master / Düzenle / Görünüm / Analiz) düşünülmüş ama
   üçü de farklı yükseklikteydi ve `flex-wrap` yüzünden alt
   alta kayıyordu: dört ayrı kutu dört ayrı boyda, kimi tek
   satır kimi iki satır. Dışarıdan "dağınık" görünmesinin
   sebebi buydu — düğmelerin kendisi değil, kutuların hizasız
   olması.

   Üç kural yetiyor: gruplar aynı yüksekliğe gerilsin, grup
   İÇİ sarmasın (sararsa kutu iki katına çıkıyor), düğmeler
   tek bir yükseklikte olsun.
   ═══════════════════════════════════════════════════════════ */
@media(min-width:821px){
  #tab-studyo .st-bar-araclar{align-items:stretch}
  #tab-studyo .st-grup{
    flex-wrap:nowrap;           /* grup kendi içinde sarmasın */
    align-items:center;
  }
  /* Bütün araç düğmeleri tek boy — 32px. Karışık yükseklikler
     satırı tırtıklı gösteriyordu. */
  #tab-studyo .st-grup .btn-mini,
  #tab-studyo .st-grup .st-mini{
    min-height:32px;height:32px;padding:0 11px;
    display:inline-flex;align-items:center;gap:6px;white-space:nowrap;
  }
  #tab-studyo .st-grup .st-mini{min-width:32px;padding:0 8px;justify-content:center}
  /* Dar ekranda gruplar alt satıra düşmek yerine yatay
     kayıyor: alt satıra düşmek çizelgeyi aşağı itiyor ve
     stüdyonun asıl alanını yiyor. */
  #tab-studyo .st-bar-araclar{
    flex-wrap:nowrap;overflow-x:auto;overflow-y:visible;
    scrollbar-width:thin;padding-bottom:10px;
  }
  #tab-studyo .st-bar-araclar::-webkit-scrollbar{height:6px}
  #tab-studyo .st-bar-araclar::-webkit-scrollbar-thumb{
    background:rgba(255,255,255,.14);border-radius:3px;
  }
  #tab-studyo .st-grup{flex:none}
}

/* ═══ KLİP İŞLEM MENÜSÜ ═══
   BODY'ye ekleniyor (klip `overflow:hidden` taşıyor ve içine
   konan menü kırpılıyordu), o yüzden konumu JS hesaplıyor. */
.st-klip-menu{
  position:fixed;z-index:9500;min-width:232px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;
  padding:6px;box-shadow:0 18px 46px rgba(0,0,0,.62);
  display:grid;gap:2px;
}
.st-klip-menu button{
  display:flex;align-items:center;gap:10px;width:100%;
  min-height:34px;padding:0 10px;border:0;border-radius:8px;
  background:none;color:var(--txt);font:inherit;font-size:12.5px;
  cursor:pointer;text-align:left;
}
.st-klip-menu button:hover{background:var(--panel2)}
.st-klip-menu svg{width:15px;height:15px;flex:none;color:var(--muted)}
.st-klip-menu button:hover svg{color:var(--red)}
.st-klip-menu span{flex:1}
.st-klip-menu i{font-style:normal;font-size:10.5px;color:var(--muted);letter-spacing:.02em}

/* ═══════════════════════════════════════════════════════════
   TELEFONDA SES STÜDYOSU — BANDLAB DÜZENİ
   ------------------------------------------------------------
   Mobil kanal kartı DİKEY yığılmıştı: başlık üstte, ses/denge
   kaydırıcıları ortada, dalga şeridi altta. ÖLÇÜLDÜ — kart
   başına 229 piksel, yani 844px'lik bir ekranda üç buçuk kanal
   görünüyor ve dalgaların çoğu ekranın dışında kalıyor.
   Dublajda beş altı kanal normal.

   BandLab (ve Reaper'ın mobil görünümü) bunu yatay kuruyor:
   solda DAR ve SABİT bir başlık, sağda kaydırılabilir şerit.
   Kart 92 piksele iniyor, ekrana yedi kanal sığıyor ve
   dalgalar gerçekten görünüyor.

   BAŞLIK `sticky left:0` — zaman çizgisi yatay kaydırılırken
   kanal adının ekranda kalması gerekiyor, yoksa hangi şeride
   baktığın kaybolur.

   Ses/denge kaydırıcıları karttan çıkıyor: her kanalda iki
   kaydırıcı, kartın yarısını yiyordu ve telefonda ince bir
   kaydırıcıyı parmakla ayarlamak zaten zor. Onlar FX
   panelinde (dokunmatik için tasarlanmış) duruyor.
   ═══════════════════════════════════════════════════════════ */
@media(max-width:820px){
  #tab-studyo .st-mob-kanal{
    display:flex;align-items:stretch;gap:0;
    height:92px;min-height:92px;
    border-bottom:1px solid rgba(255,255,255,.06);
  }
  #tab-studyo .st-mob-bas{
    position:sticky;left:0;z-index:6;flex:none;
    width:116px;min-width:116px;
    flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;
    padding:8px 10px;
    /* Şeridin üstünde durduğu için kendi zemini olmalı —
       saydam kalırsa dalga başlığın altından geçip yazıyı
       okunmaz yapıyor. */
    background:linear-gradient(90deg,#121219 88%,rgba(18,18,25,.82));
    border-right:1px solid rgba(255,255,255,.07);
  }
  #tab-studyo .st-mob-bas b{
    font-size:12.5px;max-width:100%;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;
  }
  /* Başlıkta yalnızca M ve S kalıyor; sırala/sil/otomasyon
     uzun basışla açılan kanal menüsünde. Altı düğme 116
     pikselde 18'er piksele düşüyordu — parmakla basılmaz. */
  #tab-studyo .st-mob-tuslar{display:flex;gap:5px}
  #tab-studyo .st-mob-tuslar .st-mini{
    min-width:34px;height:30px;font-size:11px;font-weight:800;
  }
  /* FX / otomasyon / sırala / sil: kartta yer yok, menüde. */
  #tab-studyo .st-mob-tuslar .st-mini:nth-child(n+3){display:none}
  /* Kaydırıcı satırı kalkıyor — yukarıdaki gerekçe. */
  #tab-studyo .st-mob-kaydirlar{display:none}
  #tab-studyo .st-mob-serit{
    flex:1;height:92px;min-height:92px;position:relative;
  }
  /* KLİP MUTLAK KONUMLANMALI. `position:relative` kalınca
     `left` göreli kayma yapıyor ve klipler zaman çizgisindeki
     yerine değil, birbirinin peşine diziliyor. */
  #tab-studyo .st-mob-serit .st-klip{
    position:absolute;top:4px;height:84px;
  }
  #tab-studyo .st-mob-serit .st-dalga{height:52px}
  /* Cetvel de başlık kadar içeriden başlasın — yoksa zaman
     işaretleri kanal adlarının üstüne düşüyor. */
  #tab-studyo .st-mob-cetvel{padding-left:116px;box-sizing:border-box}
  #tab-studyo .st-mob-video .st-mob-serit{height:72px;min-height:72px}
  #tab-studyo .st-mob-video{height:72px;min-height:72px}
}

/* ═══ TELEFON TRANSPORT ÇUBUĞU ═══
   ÖLÇÜLDÜ: süre göstergesi `position:absolute` ile sol 14px'e
   konmuştu ve "Geri al" (sol 24) ile "Başa dön" (sol 80)
   düğmelerinin ÜSTÜNE biniyordu — ekranda "00:0 0 / 00" gibi
   parçalı bir şey görünüyordu.

   Süre kendi satırına alınıyor: çubuk iki katlı oluyor, üstte
   zaman, altta düğmeler. Kayıt alırken bakılan iki şey de
   birbirini örtmeden duruyor. */
@media(max-width:820px){
  #tab-studyo .st-mobil-bar{
    flex-wrap:wrap;justify-content:center;gap:8px;
    padding-top:6px;
  }
  #tab-studyo .st-mobil-sure{
    position:static!important;
    order:-1;width:100%;text-align:center;
    font-size:13px;font-weight:800;letter-spacing:.06em;
    font-variant-numeric:tabular-nums;color:var(--txt);
    opacity:.9;margin:0 0 2px;
  }
  /* Odak modundan dönüş düğmesi: metni sığmıyordu (55px
     genişlikte "Kanallar"). Kendi içeriğine göre genişliyor. */
  #tab-studyo .st-odak-don{
    width:auto;min-width:0;white-space:nowrap;
    padding:8px 12px;font-size:12px;
  }
}

/* ═══ KULLANICININ YÜKLEDİĞİ ARKA PLAN ═══
   Profil ayarlarından yüklenen kişisel arka plan, profesyonel
   kipte renkli kalıyordu: paletin geri kalanı siyah-griyken
   sayfanın ardındaki fotoğraf kipin dışında duruyordu.

   Görsel SİLİNMİYOR — kullanıcının seçimi. Yalnızca gri
   tonlamaya alınıyor ve biraz koyulaştırılıyor; kip
   değiştiğinde kendi rengiyle geri geliyor.

   `::before` sözde elemanına uygulanıyor çünkü görsel orada
   çiziliyor; `body`ye filtre vermek bütün sayfayı (metin,
   düğme, panel) griye çevirirdi. */
body.pro-kip.ozel-arkaplan::before{
  filter:grayscale(1) brightness(.62) contrast(1.05) blur(var(--ozel-bg-bulanik,0px));
}
/* Hero'nun kendi spektrogram arka planı özel arka planın
   üstünde kalmalı: ikisi birden görünürse desen karışıyor. */
body.pro-kip.ozel-arkaplan .hero{
  background:#0B0B0C url("/pro-arka.jpg") center/cover no-repeat!important;
}

/* ═══ STÜDYONUN KENDİ TEMA DEĞİŞKENLERİ ═══
   Stüdyo, sitenin paletinden ayrı bir renk seti kullanıyor
   (`--st-ana`, `--st-ana2`, `--st-a`) — klip gradyanları,
   dalga renkleri, seçili kanal vurgusu oradan geliyor. Gövde
   değişkenlerini değiştirmek bunlara ulaşmıyordu: profesyonel
   kipte sayfa siyah-griyken kanal kartları hâlâ mor-pembeydi. */
body.pro-kip #tab-studyo,
body.pro-kip .st-calisma,
body.pro-kip .st-mob-alan{
  --st-ana:#8E99AD;
  --st-ana2:#5E6878;
  --st-a:142,153,173;
}
/* Klip gövdesi: gradyan yerine düz yüzey. Renkli gradyan
   dalga formunu okumayı zorlaştırıyor ve stüdyo zaten
   "Audition gibi düz renk" ilkesiyle çizilmiş. */
body.pro-kip .st-klip{
  background:linear-gradient(180deg,#22252C,#181B21)!important;
  border-color:rgba(255,255,255,.12)!important;
}
body.pro-kip .st-kanal.secili,
body.pro-kip .st-mob-kanal.secili{
  background:linear-gradient(90deg,rgba(142,153,173,.12),transparent 70%)!important;
}

/* ═══ AVATAR VE ROZETLER ═══
   Profil fotoğrafı çoğu üyede bir anime karakteri; kipin
   amacı tam da onu göstermemek. Fotoğraf SİLİNMİYOR —
   kullanıcının kimliği — gri tonlamaya alınıyor. */
body.pro-kip #meFoto,
body.pro-kip .me-foto img,
body.pro-kip .uye-foto,
body.pro-kip .avatar img,
body.pro-kip .pf-onizle-avatar img,
body.pro-kip .kadro-foto{filter:grayscale(1) contrast(.97)}
/* Yönetici/rol rozetleri altın sarısıydı. */
body.pro-kip .rozet-admin,
body.pro-kip .me-rozet,
body.pro-kip .kn-rozet{filter:grayscale(1) brightness(1.15)}
/* Karşılama kutusu profesyonel kipte hiç çıkmıyor: metni
   sitenin anime kimliğini anlatıyor ("görünümümüz yapay zekâ
   gibi durabilir ama arkasında emek var") ve bir yapımcıya
   gösterilecek ilk şey o değil. */
body.pro-kip .sistem-bildirim{display:none!important}

/* Uygulamada dosya sürüklenirken görsel geri bildirim:
   kullanıcı bırakmanın işe yarayacağını bırakmadan önce
   görmeli, yoksa dosyayı pencerenin üstünde tutup tereddüt
   ediyor. Yalnızca uygulamada doğuyor (preload ekliyor). */
body.mz-birak::after{
  content:"Bırak — ses stüdyosuna yüklensin";
  position:fixed;inset:0;z-index:9999;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  background:rgba(8,8,14,.72);backdrop-filter:blur(3px);
  border:3px dashed var(--red);border-radius:6px;
  color:var(--txt);font-size:17px;font-weight:700;letter-spacing:.01em;
}

/* ═══════════════════════════════════════════════════════════
   PROFESYONEL KİP — KALAN GRADYANLAR
   ------------------------------------------------------------
   Palet değişkenleri değişti ama sitedeki gradyanların çoğu
   renklerini GÖMÜLÜ taşıyor (`linear-gradient(90deg,#FF3D5A,
   #8B7CFF)` gibi); değişkeni değiştirmek onlara ulaşmıyor.

   ÖLÇÜLDÜ (sayfadaki her öğenin hesaplanmış stili taranarak,
   doygunluk eşiğiyle): profesyonel kipte hâlâ renkli duran
   yerler sırasıyla `.btn-outline` (11 örnek), 1881 rozeti,
   bildirim noktaları ve birkaç seçili durum vurgusu.

   Renk seçici noktalarına (`.renk-nokta`) DOKUNULMUYOR: orada
   renk bilgi taşıyor — kullanıcı tema rengi seçiyor ve hepsi
   griye dönerse seçim yapılamaz.
   ═══════════════════════════════════════════════════════════ */

/* En yaygın olan: ana hatlı düğme. Sitede onlarca yerde. */
body.pro-kip .btn-outline,
body.pro-kip .btn-outline.small,
body.pro-kip .btn-mini{
  background-image:none!important;
  background-color:var(--panel2)!important;
  border-color:var(--line)!important;
  color:var(--txt)!important;
}
body.pro-kip .btn-outline:hover,
body.pro-kip .btn-mini:hover{
  background-color:#23252B!important;
  border-color:#3A3E47!important;
}
/* Etkin/açık durumlar: renk yerine KONTRAST ile ayrışıyor. */
body.pro-kip .btn-mini.acik,
body.pro-kip .st-mini.acik,
body.pro-kip .st-mini.kirmizi,
body.pro-kip .st-mini.sari,
body.pro-kip .st-mini.yesil{
  background:#3A3F49!important;color:#fff!important;border-color:#525863!important;
}

/* 1881 rozeti ve içindeki yazılar. */
body.pro-kip .ataturk-link,
body.pro-kip .al-yil,
body.pro-kip .al-sonsuz{
  background-image:none!important;
  background-color:var(--panel2)!important;
  border-color:var(--line)!important;
  color:var(--txt)!important;
  box-shadow:none!important;
}

/* Bildirim noktası: KIRMIZI KALMASI GEREKEN tek şey bu
   olabilirdi (uyarı rengi), ama pro palette kırmızı hiç
   kullanılmıyor — vurgu rengiyle çiziliyor ve parlaması
   kalkıyor. */
body.pro-kip .bildirim-nokta{
  background:var(--red)!important;background-image:none!important;
  box-shadow:none!important;
}

/* Seçili satır / imleç seçimi / sıralama düğmesi. */
body.pro-kip .imlec-oge.secili,
body.pro-kip .sira-toggle,
body.pro-kip .ap-oge.yok{
  background-image:none!important;
  background-color:var(--panel2)!important;
  box-shadow:none!important;
  border-color:var(--line)!important;
}

/* Kalan her yerde: metin gradyanları ve parlayan kenarlar.
   Seçici genel ama YALNIZCA pro kipte ve yalnızca gradyan
   taşıyan yüzeylerde; düz renkli bileşenlere dokunmuyor. */
body.pro-kip .kn-sayi,
body.pro-kip .sec-title span,
body.pro-kip .ft-ad,
body.pro-kip .pane-title::after,
body.pro-kip .rozet,
body.pro-kip .etiket-vurgu{
  background-image:none!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--txt)!important;
  text-shadow:none!important;
}

/* ═══════════════════════════════════════════════════════════
   PROFİL ÖNİZLEME KARTI — DERİNLİK
   ------------------------------------------------------------
   Kart düz duruyordu: banner bir gradyan, avatar KARE, isim
   yanında, hepsi aynı düzlemde. "Basit görünüyor" denmesinin
   sebebi buydu — hiyerarşi yok, katman yok.

   Avatarın kabında `border-radius:50%` zaten vardı ama görsel
   kare çıkıyordu: `<img>` kendi köşe yarıçapını almadığı için
   `overflow:hidden` her tarayıcıda aynı kırpmıyor. Yarıçap
   HEM kaba HEM görsele veriliyor.
   ═══════════════════════════════════════════════════════════ */
.pf-onizle{
  /* Kartın kendisi biraz daha yükseğe kalkıyor: sayfanın
     üstünde "duran" bir kart, içine gömülmüş bir kutudan
     farklı okunuyor. */
  box-shadow:0 18px 48px rgba(0,0,0,.5), 0 2px 0 rgba(255,255,255,.04) inset;
  border-radius:20px;
}
.pf-onizle-banner{
  height:132px;
  position:relative;
}
/* Banner'ın altına doğru koyulaşan bir örtü: avatar ve isim
   bannerın üstünde duruyor ve açık bir görselde okunmuyordu. */
.pf-onizle-banner::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 40%,rgba(10,10,16,.72));
  pointer-events:none;
}
.pf-onizle-alt{margin-top:-42px;padding:0 22px 18px;align-items:flex-end}
.pf-onizle-avatar{
  width:92px;height:92px;
  border-radius:50%!important;
  overflow:hidden;
  /* Çift halka: dış halka kartın zeminiyle aynı renkte,
     avatarı bannerdan "keserek" ayırıyor (Discord düzeni). */
  border:4px solid var(--panel2)!important;
  box-shadow:0 0 0 1px var(--line), 0 10px 26px rgba(0,0,0,.5);
  background:var(--panel);
}
/* GÖRSELE DE YARIÇAP: kabın `overflow:hidden`ı tek başına
   yetmiyor — ölçüldü, görsel 70×70 ve yarıçapı 0'dı. */
.pf-onizle-avatar img{border-radius:50%;width:100%;height:100%;object-fit:cover}
.pf-onizle-yazi{margin-top:0;padding-bottom:6px;gap:3px}
.pf-onizle-yazi b{font-size:19px;letter-spacing:-.01em}
.pf-onizle-yazi span{font-size:12px;letter-spacing:.02em;opacity:.85}
.pf-onizle-yenile{margin:0 0 8px auto}

/* Kartların derinliği dosyanın SONUNDA (bkz. "PROFİL: BÖLÜM
   İKONLARI VE KART DERİNLİĞİ"). Burada duran ilk deneme
   kaldırıldı: `#tab-profil .pf-kart` ÖZGÜLLÜK olarak daha
   güçlüydü ve sondaki yeni kuralın gölgesini eziyordu —
   kural dosyada duruyordu, çalışmıyordu. */
/* Bölüm başlıkları (Görünüm / Hesap) daha ayrı dursun. */
#tab-profil .pf-oblak{
  display:flex;align-items:center;gap:10px;
  margin:26px 0 12px;padding-bottom:8px;
  border-bottom:1px solid var(--line);
}
#tab-profil .pf-oblak::after{
  content:"";flex:1;height:1px;
  background:linear-gradient(90deg,var(--line),transparent);
}

/* ══════════════════════════════════════════════════════════════
   PROFİL: BÖLÜM İKONLARI VE KART DERİNLİĞİ
   ──────────────────────────────────────────────────────────────
   Başlıklar emoji taşıyordu (🎨 Görünüm, 💭 Özel Durum). Emoji
   her işletim sisteminde BAŞKA çiziliyor — Windows'ta düz,
   Android'de yuvarlak, bu sunucunun Linux'unda çoğu zaman boş
   kutu — ve hiçbirinin profesyonel kipte karşılığı yok: kip
   metni çeviriyor ama emojiyi çeviremiyor, o yüzden "profesyonel"
   ekranda bir düşünce balonu kalıyordu.

   Yerine elle çizilmiş SVG'ler kondu. `currentColor` aldıkları
   için kip paleti değişince onlar da değişiyor; kutu boyutları
   da her yerde aynı (emojinin genişliği yazı tipine göre
   oynuyor ve başlıklar hizasız duruyordu).

   İkon çıplak durmuyor: arkasında kendi rengiyle hafif boyanmış
   bir kare var. Bir bölüm başlığı sayfada TUTAMAK — gözün
   döneceği yer — ve düz metin başlık o işi yapmıyor.        */
.fsec-ik{
  width:18px;height:18px;flex:none;color:var(--gold);
  /* SVG'ler hairline çiziyor; yarım piksel hizasızlığı
     kalınlık farkı gibi görünüyor. */
  shape-rendering:geometricPrecision;
}
.fsec > .fsec-ik,
.pf-oblak > .fsec-ik,
.db-baslik > .fsec-ik,
.cerceve-ara-baslik > .fsec-ik,
.pane-title > .fsec-ik{
  box-sizing:content-box;
  padding:7px;border-radius:9px;
  background:color-mix(in srgb, var(--gold) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 22%, transparent);
  /* İçeriden gelen ince ışık: kare düz bir leke değil, oyulmuş
     bir yuva gibi duruyor. */
  box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 12%,transparent);
}
/* Başlıkta ARTIK İKON VAR — higanbana işareti ikinci bir madde
   işareti gibi duruyordu, ikisi yan yana iki farklı şey
   söylüyordu. İkonlu başlıkta çiçek kalkıyor, ikonsuzda kalıyor. */
.fsec:has(> .fsec-ik)::after{display:none}
.pane-title > .fsec-ik{width:22px;height:22px;padding:9px;border-radius:11px}
.pf-oblak > .fsec-ik{width:15px;height:15px;padding:6px;border-radius:8px;color:var(--muted);
  background:color-mix(in srgb, var(--muted) 10%, transparent);
  border-color:color-mix(in srgb, var(--muted) 20%, transparent)}

/* Düğme içindeki ikon kutuya girmiyor — orada zaten düğmenin
   kendi zemini var, ikinci bir kare gürültü olurdu. */
button > .fsec-ik, label > .fsec-ik{
  width:16px;height:16px;vertical-align:-3px;margin-right:5px;color:inherit;
}
.profil-foto-tuslar button,.dosya-etiket{display:inline-flex;align-items:center;justify-content:center}

/* ── KART DERİNLİĞİ ──────────────────────────────────────────
   Kartlar zemin + 1px çerçeveden ibaretti: on iki kart aynı
   düzlemde duruyor, göz hiçbirinde durmuyordu. Üç katman
   eklendi ve üçü ayrı iş yapıyor:
     · üstte içeriden 1px ışık — kartın kalktığını gösterir
     · altta iki kademeli gölge (yakın+sert, uzak+yumuşak) —
       tek gölge her zaman ya çok sert ya çok bulanık oluyor
     · üst kenarda sola doğru sönen vurgu şeridi — kartın
       nereden başladığını söyler
   Hover'da kart 2px kalkıyor; dokunmatikte hover yok, bu
   yüzden temel görünüm hover'sız da tam.                    */
.pf-kart{
  position:relative;
  background:
    linear-gradient(180deg, color-mix(in srgb,#fff 3%,transparent), transparent 120px),
    var(--panel);
  box-shadow:
    inset 0 1px 0 color-mix(in srgb,#fff 7%,transparent),
    0 1px 2px rgba(0,0,0,.28),
    0 10px 30px -12px rgba(0,0,0,.55);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.pf-kart::before{
  content:"";position:absolute;left:0;right:35%;top:-1px;height:2px;
  border-radius:2px 0 0 0;
  background:linear-gradient(90deg,var(--gold),transparent);
  opacity:.5;pointer-events:none;
}
@media (hover:hover){
  .pf-kart:hover{
    transform:translateY(-2px);
    border-color:color-mix(in srgb, var(--gold) 28%, var(--line));
    box-shadow:
      inset 0 1px 0 color-mix(in srgb,#fff 10%,transparent),
      0 2px 4px rgba(0,0,0,.3),
      0 18px 44px -14px rgba(0,0,0,.62);
  }
  .pf-kart:hover::before{opacity:.85}
}

/* Profesyonel kipte altın vurgu yok: ikon yuvası ve kart şeridi
   nötr çeliğe düşüyor, yoksa "her şey değişsin" dediğimiz
   ekranda on iki altın kare kalıyor. */
body.pro-kip .fsec-ik{color:#9AA3B2}
body.pro-kip .fsec > .fsec-ik,
body.pro-kip .db-baslik > .fsec-ik,
body.pro-kip .cerceve-ara-baslik > .fsec-ik,
body.pro-kip .pane-title > .fsec-ik{
  background:#22262D;border-color:#343A44;
}
body.pro-kip .pf-kart::before{background:linear-gradient(90deg,#5A6272,transparent)}
body.pro-kip .pf-kart:hover{border-color:#4A515E}

/* ══════════════════════════════════════════════════════════════
   BİRİNCİL DÜĞME: MOR GRADYAN KALDIRILDI
   ──────────────────────────────────────────────────────────────
   `.btn-red` mor → magenta → kırmızı giden üç duraklı bir
   gökkuşağı taşıyordu (#8B7CFF → #B85CE8 → #FF3D5A). Sitenin
   kimliğinde o morun karşılığı YOK — palette tek bir vurgu var
   (--red) ve mor yalnızca Jarvis'e ait. Sonuç, sitenin en çok
   tekrar eden öğesinin (her "Kaydet", her "Yükle") kimlikle
   ilgisi olmayan bir renk taşıması: kullanıcı bunu "yapay zekâ
   çıktısı gibi duruyor" diye tarif etti ve haklıydı — o mor
   gradyan hiçbir karara dayanmıyordu.

   Yerine tek renk ailesinde DÖRT katman var, her biri fiziksel
   bir şeyi taklit ediyor:
     1. üstten aşağı sönen ince tül      → ışığın yüzeye vurması
     2. koyudan canlıya kırmızı gövde    → hacim
     3. içeriden 1px üst ışık            → kabarık kenar
     4. alttan içeri koyu gölge          → oturma
   Hover'da gövde CANLILAŞIYOR (renk kayması değil): gökkuşağını
   kaydırmak düğmenin rengini değiştiriyordu, oysa hover
   "aynı düğme, uyanık hâli" demek.                          */
.btn-red{
  background-color:var(--mz2,#D6113F);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.17), rgba(255,255,255,.02) 52%, rgba(0,0,0,.10)),
    linear-gradient(140deg, #B00E33 0%, #E01F46 46%, #FF3D5A 100%);
  background-size:100% 100%, 150% 150%;
  background-position:0 0, 0% 0%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 1px 2px rgba(0,0,0,.3),
    0 6px 18px -8px rgba(214,17,63,.55);
  text-shadow:0 1px 1px rgba(0,0,0,.28);
}
.btn-red:hover{
  background-position:0 0, 100% 100%;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(0,0,0,.22),
    0 2px 4px rgba(0,0,0,.32),
    0 10px 26px -8px rgba(214,17,63,.68);
}
/* Basılıyken düğme İÇERİ gidiyor. Üst ışık sönüp gölge tepeye
   geçiyor — yalnızca `transform` ile aşağı itmek "düğmeye
   basıldı" değil "düğme kaydı" gibi okunuyor. */
.btn-red:active{
  box-shadow:
    inset 0 2px 5px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(0,0,0,.18),
    0 1px 1px rgba(0,0,0,.2);
  transform:translateY(1px);
}

/* ── PROFİL BANNER'ININ VARSAYILANI ──────────────────────────
   Banner görseli olmayan hesapta mor→kırmızı düz bir gradyan
   duruyordu; profil kartının en geniş yüzeyi ve o yüzey hiçbir
   şey anlatmıyordu. Yerine üç katman: köşeden gelen sıcak
   parlama (kullanıcının kendi profil rengiyle, seçmişse),
   ince diyagonal doku (düz alanın "boş" durmasını engelliyor)
   ve mürekkep zemin. Kullanıcı banner yüklediğinde bu katmanlar
   `background-image` ile zaten eziliyor.                     */
.pf-onizle-banner{
  background:
    radial-gradient(120% 150% at 12% -30%,
      color-mix(in srgb, var(--pf-vurgu, var(--red)) 34%, transparent) 0%,
      transparent 62%),
    repeating-linear-gradient(58deg,
      rgba(255,255,255,.030) 0 1px, transparent 1px 9px),
    linear-gradient(170deg, #191722, #0E0D14 70%);
  background-size:cover, auto, cover;
  background-position:center;
}
/* Görsel yüklenmişse (inline style ile geliyor) doku katmanı
   görselin üstünde kalmasın — kullanıcının bannerı bizim
   çizgilerimizle taranmış görünürdü. */
.pf-onizle-banner[style*="url"]{background-image:none!important}

/* Profesyonel kipte birincil düğme zaten nötr çeliğe düşüyor
   (yukarıda); burada yalnızca yeni gölge katmanları sönüyor. */
body.pro-kip .btn-red{text-shadow:none!important}
body.pro-kip .btn-red:active{transform:translateY(1px)}
body.pro-kip .pf-onizle-banner{
  background:
    repeating-linear-gradient(58deg, rgba(255,255,255,.028) 0 1px, transparent 1px 9px),
    linear-gradient(170deg,#20242B,#141619 72%)!important;
}

/* ══════════════════════════════════════════════════════════════
   KENAR ÇUBUĞU İKONLARI (ikonlar.js)
   ──────────────────────────────────────────────────────────────
   Emojinin bıraktığı boşluk yazı tipine göre oynuyordu ve elli
   üç satırlık menüde metinler hizasız akıyordu. SVG'nin kutusu
   sabit: `flex:none` + sabit ölçü, hepsi tek sütuna oturuyor.  */
.sekme-ik{
  width:17px;height:17px;flex:none;
  vertical-align:-3px;margin-right:9px;
  opacity:.72;
  /* Kalınlık 1.7 ve tuval 24: 17px'e küçülünce çizgi 1,2 piksele
     düşüyor ve yarım piksel hizasızlığı soluk bir ikon bırakıyor.
     `geometricPrecision` çizgiyi piksele oturtmuyor ama
     kalınlığı sabit tutuyor — asıl göze batan buydu. */
  shape-rendering:geometricPrecision;
  transition:opacity .15s ease, transform .15s ease;
}
.snav{display:flex;align-items:center}
.snav .sekme-ik{margin-right:10px}
.snav:hover .sekme-ik{opacity:1}
/* Aktif sekme ikonu sitenin vurgusunu alıyor: metni kalınlaştırmak
   tek başına yetmiyordu, göz menüde nerede olduğunu ikonla
   buluyor. */
.snav.active .sekme-ik{opacity:1;color:var(--red)}
.pane-title .sekme-ik,.pane-title .pane-ikon{opacity:1}

/* Başlıklardaki (pane-title) aynı ikon daha iri: orada tek başına
   duruyor ve 17px bir başlığın yanında kaybolur. */
.pane-title .sekme-ik{width:24px;height:24px;margin-right:11px;vertical-align:-4px}

/* Profesyonel kipte aktif ikon kırmızı kalmasın — kipin bütün
   iddiası vurgu renginin değişmesi. */
body.pro-kip .snav.active .sekme-ik{color:#8FA6C4}

/* Menü grup başlıklarının ikonu (Çalışma / Atölyeler / Ses…).
   Sekme ikonundan küçük ve daha sönük: başlık zaten büyük harf
   ve harf aralıklı, ikon orada ikinci sesli olmalı. */
.grup-ik{
  width:14px;height:14px;flex:none;
  vertical-align:-2px;margin-right:8px;opacity:.6;
  shape-rendering:geometricPrecision;
}
.nav-grup-bas:hover .grup-ik{opacity:.9}

/* ── Yüklenen sekme görselleri tek kutuda ────────────────────
   Yöneticinin yüklediği GIF'ler tek tek doğru ama yan yana
   dağınık: kimi kare, kimi geniş, kimi saydam kenarlı. Menüde
   47 satır boyunca farklı genişlikte bir sütun, metinleri de
   hizasız bırakıyordu. `object-fit:contain` + SABİT kutu ile
   hepsi aynı yere oturuyor; `contain` seçildi çünkü `cover`
   maskotların başını kesiyor. Arkadaki hafif zemin, saydam
   kenarlı GIF'lerin havada asılı durmasını engelliyor. */
.snav .sekme-ikon{
  width:18px;height:18px;flex:none;
  object-fit:contain;border-radius:5px;
  margin-right:10px;vertical-align:-4px;
  background:color-mix(in srgb, var(--line) 45%, transparent);
}

/* ── PROFİL IZGARASI: SATIR DEĞİL SÜTUN AKIŞI ────────────────
   CSS ızgarası satır yüksekliğini o satırın EN UZUN kartına
   göre veriyor. Profil kartlarının boyu üç kat fark ediyor
   (Özel Durum altı satır, Profil Fotoğrafı bir avatar ızgarası
   taşıyor) ve sonuç, kısa kartların altında yüzlerce piksel
   boşluk: sayfa delik deşik görünüyordu — ÖLÇÜLDÜ, "Profil
   Rengi" kartının altında 430 piksel boş alan vardı.

   Sıralama çözmüyor (kartlar kendi aralarında da farklı) ve
   `grid-template-rows:masonry` henüz hiçbir kararlı tarayıcıda
   yok. Çok sütunlu akış (`columns`) aynı işi görüyor: kart
   sütunu doldurunca bir sonrakine geçiyor, satır hizası diye
   bir şey kalmıyor.

   `break-inside:avoid` ŞART — yoksa uzun bir kart ikiye bölünüp
   yarısı öbür sütunda beliriyor ve gölgesi ortadan kesiliyor. */
.pf-izgara, .pf-izgara-dar{
  display:block;
  columns:2 340px;
  column-gap:16px;
}
.pf-izgara-dar{columns:2 280px}
.pf-izgara > .pf-kart, .pf-izgara-dar > .pf-kart{
  break-inside:avoid;
  /* Sütun akışında `margin-bottom` satır arası boşluğun tamamı:
     ızgaradaki `gap` artık çalışmıyor. */
  margin:0 0 16px;
  /* Kart sütunun tamamını kaplasın; `inline-block` olmadan
     hover'daki `translateY` bazı tarayıcılarda sütun kutusunu
     kaydırıyor. */
  display:inline-block;
  width:100%;
  vertical-align:top;
}
@media (max-width:700px){
  .pf-izgara, .pf-izgara-dar{columns:1}
}

/* ── ÖNİZLEME KARTI DAR EKRANDA ──────────────────────────────
   Kart tek satır kurgulanmıştı: avatar | ad+rol | yenile
   düğmesi. 390 pikselde bu satır sığmıyor ve flex hiçbir şeyi
   sarmadığı için düğme adın ÜSTÜNE biniyordu — ÖLÇÜLDÜ,
   "Mizanis Admin" yazısının sağ yarısı düğmenin altında
   kalıyordu ve altındaki rol satırı hiç okunmuyordu.

   Taşma olarak da görünmüyor (kutular kabın içinde), yalnızca
   bakan insan görüyor. Dar ekranda satır sarılıyor: avatar ve
   ad yan yana kalıyor, düğme alta tam genişlikte geçiyor. */
@media (max-width:560px){
  .pf-onizle-alt{
    flex-wrap:wrap;
    row-gap:12px;
    padding:0 16px 16px;
    /* SATIRIN TAMAMINI DEĞİL YALNIZ AVATARI YUKARI TAŞIR.
       `margin-top:-34px` satıra verilince ad da banner'ın içine
       giriyordu: ÖLÇÜLDÜ, "Mizanis Admin" yazısı bannerın koyu
       zemininde yarı görünür kalıyordu. Discord düzeninde
       bannerdan taşan tek şey avatar; ad onun yanında ve
       bannerın ALTINDA duruyor. */
    margin-top:0;
    align-items:flex-end;
  }
  .pf-onizle-avatar{
    width:72px;height:72px;border-width:3px!important;
    margin-top:-34px;
  }
  .pf-onizle-yazi{padding-bottom:2px}
  .pf-onizle-yazi{min-width:0;flex:1 1 auto}
  .pf-onizle-yazi b{font-size:17px;display:block;overflow-wrap:anywhere}
  .pf-onizle-yenile{
    /* `margin-left:auto` satırın sonuna itiyordu; sarılan satırda
       bu düğmeyi kendi satırında sağa yaslıyor ve yanında boşluk
       bırakıyor. Tam genişlik, dokunma hedefi de büyüyor. */
    margin:0!important;
    flex:1 0 100%;
    justify-content:center;
    min-height:40px;
  }
  .pf-onizle-banner{height:104px}
}

/* ══════════════════════════════════════════════════════════════
   PROFESYONEL KİP — KALAN RENKLİ ÖĞELER
   ──────────────────────────────────────────────────────────────
   Sayfadaki her öğenin hesaplanmış stili doygunluk eşiğiyle
   (>0.45) tarandı; kalan yirmi yedi öğe şu üç kümede toplandı:

   1. SEÇİLİ DURUM VURGULARI (tema kartı, imleç kartı, arka plan
      kartı, aktif sekme). Bunlar "hangisi seçili" bilgisini
      RENKLE veriyor ve kipte marka kırmızısında kalıyorlardı.
      Bilgi korunuyor, rengi nötr çeliğe düşüyor — çerçeve ve
      zemin farkı seçimi göstermeye yetiyor.
   2. KULLANICININ KENDİ PROFİL RENGİ (`.pf-onizle` çerçevesi).
      Kullanıcı mor seçmişse profesyonel kipte kartın etrafında
      mor bir halka kalıyordu. Seçim SİLİNMİYOR — normal kipe
      dönünce yerinde; kipte yalnızca gösterilmiyor.
   3. Admin sekmesinin altın rengi.

   RENK SEÇİCİ NOKTALARINA (`.renk-nokta`) DOKUNULMUYOR: orada
   renk süs değil İÇERİK — hepsi griye dönerse kullanıcı tema
   rengini seçemez. Aynı gerekçeyle avatar önizlemeleri de
   olduğu gibi kalıyor.                                        */
body.pro-kip .snav.active{background:#22262D!important;color:#DCE3EC!important}
body.pro-kip .snav.admin{color:#9AA3B2!important}
body.pro-kip .snav.active .sekme-ik{color:#8FA6C4!important}
body.pro-kip .pf-onizle{
  border-color:#343A44!important;
  box-shadow:0 10px 34px rgba(0,0,0,.42)!important;
}
body.pro-kip .tema-kart.secili,
body.pro-kip .imlec-oge.secili,
body.pro-kip .ap-oge.secili,
body.pro-kip .cerceve-oge.secili{
  border-color:#5A6272!important;
  box-shadow:0 0 0 1px #5A6272 inset!important;
  outline-color:#5A6272!important;
}
/* Seçili kartın ADI da vurgu rengindeydi. */
body.pro-kip .tema-kart.secili *,
body.pro-kip .imlec-oge.secili *,
body.pro-kip .ap-oge.secili *{color:#DCE3EC!important}
/* İmleç önizlemeleri renkli PNG/SVG: kipte doygunlukları
   düşüyor, tamamen gri yapılmıyor — hangi imleç olduğu yine
   seçilebilmeli. */
body.pro-kip .imlec-onizle,
body.pro-kip .imlec-oge img,
body.pro-kip .imlec-oge svg{filter:saturate(.2) brightness(.95)}
/* "YENİ" rozeti kipte de bilgi taşıyor ama kırmızı kalmamalı. */
body.pro-kip .yeni-rozet{
  background:#2B3038!important;color:#9FB2C9!important;
  border:1px solid #3C434E!important;box-shadow:none!important;
}
/* "Kaldığın yerden devam" bildirimi kipte de çıkıyor ve marka
   kırmızısını taşıyordu — ekranın alt köşesinde tek renkli
   kutu, kipi ele veren son yerlerden biriydi. */
body.pro-kip .oturum-bildirim{
  background:#1C2027!important;border:1px solid #343A44!important;
  color:#CFD6E0!important;box-shadow:0 10px 30px rgba(0,0,0,.5)!important;
}
body.pro-kip .oturum-bildirim b,
body.pro-kip .oturum-bildirim a{color:#8FA6C4!important}

/* ══════════════════════════════════════════════════════════════
   STÜDYO ARAÇ ÇUBUĞU: GİZLİ KALAN GRUP
   ──────────────────────────────────────────────────────────────
   Çubuk yatay kaydırılabilir yapılmıştı ("alt satıra düşmek
   çizelgeyi aşağı itiyor" gerekçesiyle). Sonucu ÖLÇÜLDÜ: 1380
   piksellik ekranda çubuğun içeriği 1699 piksele kadar gidiyor
   ve son grup ("Görünüm": Uzak / Yakın) tamamen kabın dışında
   kalıyor. Kaydırma çubuğu 6 piksel ve altındaki dolgunun içinde
   kayboluyor, yani ORADA BİR ŞEY OLDUĞUNA DAİR İŞARET YOK.
   Kullanıcının "bazı tuşlara basılmıyor" dediği şey buydu:
   düğme çalışıyor, görünmüyor.

   Geniş ekranda çubuk SARIYOR. Bir düğmenin ikinci satıra
   düşmesi, hiç görünmemesinden iyi. Çubuk da sıkılaştırıldı
   (32 → 30 piksel, dar dolgu): ölçüldüğünde 1380'de artık tek
   satıra sığıyor, sarma yalnız daha dar ekranlarda devreye
   giriyor.

   Dar ekranda (821-1099) kaydırma KALIYOR — orada sarma üç
   satır üretiyor ve çizelge ekrandan taşıyor. Ama artık sağ
   kenarda sönen bir örtü var: "burada devam ediyor" işareti.  */
@media(min-width:1100px){
  #tab-studyo .st-bar-araclar{flex-wrap:wrap;overflow-x:visible;padding-bottom:0}
  #tab-studyo .st-bar-araclar::-webkit-scrollbar{height:0}
}
@media(min-width:821px){
  #tab-studyo .st-grup .btn-mini,
  #tab-studyo .st-grup .st-mini{
    min-height:30px;height:30px;padding:0 9px;gap:5px;font-size:12.5px;
  }
  #tab-studyo .st-grup .st-mini{min-width:30px;padding:0 7px}
  /* Kaydırılabilir kalan genişliklerde sağ kenar soluyor. Örtü
     çubuğun İÇİNDE değil kabında: içinde olsaydı kaydırmayla
     birlikte o da kayıp işe yaramazdı. */
  #tab-studyo .st-bar-satir.st-bar-araclar{position:relative}
}
@media(min-width:821px) and (max-width:1099px){
  #tab-studyo .st-bar-satir.st-bar-araclar::after{
    content:"";position:sticky;right:0;top:0;
    flex:none;width:34px;margin-left:-34px;align-self:stretch;
    background:linear-gradient(90deg,transparent,var(--panel));
    pointer-events:none;
  }
}

/* ── DOKUNMA HEDEFLERİ ───────────────────────────────────────
   ÖLÇÜLDÜ: "Kanalı sil" 22×22, kanal renk noktaları 16×16.
   İkisi de 44'lük hedefin çok altında ve renk noktaları yan
   yana duruyor — yanlış renge basmak kolay.

   YÜKSEKLİĞİ DEĞİL DOLGUYU BÜYÜTÜYORUZ: renk noktasının görsel
   çapı bilgi taşıyor (yan yana beş renk), büyütmek satırı
   bozardı. Dolgu kutuyu büyütür, nokta aynı kalır. */
#tab-studyo .st-kanal-sil,
#tab-studyo button[title="Kanalı sil"]{
  min-width:28px;min-height:28px;
}
/* Tema noktaları (`.st-tema-nokta`) 16×16'ydı ve beşi yan yana
   duruyor: yanlış renge basmak kolay. Dolgu kutuyu 28'e
   çıkarıyor, noktanın görsel çapı 16 kalıyor —
   `background-clip:content-box` olmadan dolgu rengin KENDİSİNİ
   büyütüp noktaları birbirine yapıştırırdı. */
#tab-studyo .st-tema-nokta{
  padding:6px;background-clip:content-box;
  box-sizing:content-box;
}
/* Noktalar arası boşluk dolgudan sonra fazlalaşıyor — kaptaki
   aralık kısılıyor ki satır aynı genişlikte kalsın. */
#tab-studyo .st-tema-noktalar{gap:0}

/* ══════════════════════════════════════════════════════════════
   STÜDYO ODAK MODU: YARIM GİZLENEN YAN SÜTUN
   ──────────────────────────────────────────────────────────────
   Odak modu `#sideNav`i (sekme listesi) gizliyordu ama ONU
   SARAN `.sidebar` yerinde kalıyor: ÖLÇÜLDÜ, 250×516 piksellik
   bir sütun, içinde yalnızca avatar, durum kutusu, arama ve
   "Çıkış Yap" — altında yarım ekran boşluk. Yani odak modu ne
   yeri boşaltıyor ne de düzgün duruyordu; stüdyo 250 piksel
   dar çalışıyor ve yanında boş bir şerit taşıyordu.

   Odakta sütunun TAMAMI çekiliyor, çalışma alanı genişliyor.
   Geri dönüş "‹ Kanallar" düğmesinde ve o düğme odakta zaten
   sol üstte duruyor — gezinme kaybolmuyor.                    */
body.st-odak .sidebar{display:none}
body.st-odak .app-shell{grid-template-columns:1fr!important}
/* Kap genişliği de açılıyor: stüdyo çizelgesi yatay bir araç,
   her piksel kanal süresine dönüşüyor. */
body.st-odak .content:has(#tab-studyo:not(.hidden)){max-width:none}
body.st-odak .content{max-width:none}

/* ── ODAK MODUNDA YÜZEN ÖĞELER ───────────────────────────────
   Çizelgenin üstünde üç şey duruyordu: site maskotu ve konuşma
   balonu, Jarvis küresi ve "kaldığın yerden devam" bildirimi.
   Üçü de sitede yerinde ama bir DAW'ın çalışma alanında değil:
   kayıt alırken ekranın ortasında "Merhaba! Bugün de buradayım"
   yazan bir balon var. Odak modu tam da bunun için var.

   Sadece odakta gizleniyorlar; stüdyodan çıkınca geri
   geliyorlar ve kullanıcı hiçbir şey kaybetmiyor. */
body.st-odak #maskot,
body.st-odak .maskot,
body.st-odak #jarvisKok,
body.st-odak #parcaciklar,
body.st-odak .oturum-bildirim{display:none!important}
/* Panel başlıklarındaki ikon: `.fsec` başlığındakinden küçük ve
   yuvasız. Panel kartlarının başlıkları küçük ve çok sayıda —
   her birine kutulu ikon koymak ızgarayı gürültüye boğuyor. */
.panel-baslik > .fsec-ik{
  width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:7px;
  opacity:.8;color:var(--gold);
}
.panel-baslik{display:flex;align-items:center;gap:0}
.panel-baslik > .btn-mini{margin-left:auto}
body.pro-kip .panel-baslik > .fsec-ik{color:#9AA3B2}
/* Aktivite ikonu: akışta on beş satır alt alta ve her biri bir
   ikon taşıyor. Kutulu olsalardı akış ikon ızgarasına dönerdi —
   burada ikon sessiz kalmalı, satırın konusu METİN. */
.aktivite-ikon .akt-ik{
  width:17px;height:17px;display:block;color:var(--gold);opacity:.7;
  shape-rendering:geometricPrecision;
}
.aktivite-ikon{display:inline-flex;align-items:center;justify-content:center;width:22px}
.akt-emoji{font-size:15px;line-height:1}
body.pro-kip .aktivite-ikon .akt-ik{color:#8FA6C4}

/* ── PROJE DOSYA SATIRI: YIKICI DÜĞME KOMŞUSUNUN DİBİNDE ─────
   ÖLÇÜLDÜ (masaüstü): indirme bağlantısı 188×19, hemen yanındaki
   SİLME düğmesi 14×17. Mobil için bir düzeltme vardı ama yalnız
   `max-width` medya sorgusunun içindeydi — fareyle de ıskalanıyor
   ve ıskalanınca dosya siliniyor. Bu projede aynı ders daha önce
   çıkmıştı: yıkıcı düğme, komşusundan AYRI ve rahat basılır
   olmalı. Simge küçük kalıyor, KUTU büyüyor. */
.pk-dosya{display:inline-flex;align-items:center;gap:10px}
.pk-dosya a{display:inline-flex;align-items:center;gap:7px;min-height:28px}
.pk-x{
  min-width:28px;min-height:28px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:8px;
}
.pk-x svg{width:15px;height:15px}
/* Yıkıcı olduğu ÜSTÜNE GELİNCE anlaşılıyor: sönük gri duruyor,
   hedeflenince kırmızıya ve zemine kavuşuyor. Sürekli kırmızı
   olsaydı yirmi dosyalık liste kırmızı noktalarla dolardı. */
.pk-x:hover{color:var(--red);background:color-mix(in srgb,var(--red) 14%,transparent)}
.ds-ik{width:15px;height:15px;flex:none;opacity:.6}
body.pro-kip .pk-x:hover{color:#C9D2DE;background:#2B3038}
/* Anime filtre düğmeleri ve bölüm başlığı: ikon metinle aynı
   satırda, sönük. Düğmeler yan yana altı tane — ikon dikkat
   çekerse şerit bir ikon ızgarasına dönüyor. */
.anime-fbtn{display:inline-flex;align-items:center;gap:6px}
.anime-fbtn .fsec-ik{width:15px;height:15px;flex:none;opacity:.75;padding:0;background:none;border:0;box-shadow:none}
.anime-fbtn.aktif .fsec-ik{opacity:1}
#animeBaslik > .fsec-ik{width:17px;height:17px}
/* Oyun sekmesi ikonları — `[data-ikon]` noktalarında duruyorlar
   ve yönetici üstlerine kendi görselini yükleyebiliyor. */
.oyun-ik{width:16px;height:16px;flex:none;vertical-align:-3px;opacity:.85}
.tab .oyun-ik{margin-right:2px}
.skor-baslik{display:flex;align-items:center;gap:7px}
.skor-baslik .oyun-ik{width:17px;height:17px;color:var(--gold)}
.oyun-baslat{display:inline-flex;align-items:center;justify-content:center;gap:7px}

/* ── "KALDIĞIN YERDEN DEVAM" BİLDİRİMİ ───────────────────────
   Kutu ekranın ortasına sabitlenmişti (`left:50%`) ve telefonda
   üç satıra bölünüp içeriğin üstüne biniyordu; alt gezinme
   çubuğunun da üstünde duruyordu, yani iki yüzen katman
   çakışıyordu. Maskot da aynı köşede.

   Telefonda kutu alt çubuğun HEMEN ÜSTÜNDE, kenardan kenara
   ince bir şerit: bir satır, kırpılan metin, kapatma düğmesi
   sağda. Bu, telefon uygulamalarının "snackbar" düzeni ve
   kullanıcının beklediği yer.                                */
@media (max-width:700px){
  .oturum-bildirim{
    left:10px;right:10px;transform:translateY(26px);
    /* Alt çubuk 58px + güvenli alan. */
    bottom:calc(64px + env(safe-area-inset-bottom,0px));
    max-width:none;border-radius:14px;
    padding:11px 12px;gap:8px;
    display:flex;align-items:center;
  }
  .oturum-bildirim.gorunur{transform:translateY(0)}
  .oturum-bildirim > span{
    flex:1;min-width:0;
    /* Tek satır: üç satıra bölünen kutu, altındaki içeriği
       gerçekten örtüyordu. */
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
  .oturum-bildirim button{flex:none;min-width:32px;min-height:32px}
  /* Maskot bildirimle aynı köşede duruyor — bildirim açıkken
     yukarı çekiliyor. */
  body:has(.oturum-bildirim.gorunur) #maskot{bottom:130px}
}
/* Vurgulanan sekme adı mor (`--violet`) idi: bildirim koyu ve o
   mor sitenin hiçbir yerinde vurgu değil. */
.oturum-bildirim b{color:var(--red)}
.oturum-bildirim .fsec-ik{width:16px;height:16px;flex:none;opacity:.75}
body.pro-kip .oturum-bildirim b{color:#8FA6C4}