/* ═══════════════════════════════════════════════════════════
   SES STÜDYOSU
   Düzen DAW'larda ortak olan şema: solda kanal listesi, ortada
   dalga formlu zaman çizelgesi, üstte transport, altta mikser.

   HER KURAL [data-g="studyo"] İLE KAPSANDI. Port edilen sayfada
   .hidden, .buyuk, .mz-tus gibi genel adlar vardı; kapsanmayınca
   panelin tamamını eziyor ve Site Metinleri gibi bölümleri boş
   gösteriyordu.
   ═══════════════════════════════════════════════════════════ */

/* İkonlar ölçüsüz kalmasın */
[data-g="studyo"] svg { width: 18px; height: 18px; flex-shrink: 0; }
[data-g="studyo"] button svg { width: 16px; height: 16px; }
[data-g="studyo"] { position: relative; }

/* ═══════════ MIZANIS — Stil ═══════════
   Palet: gece #07070F · panel #0F0F1D · çizgi #23233A
          akkor kırmızı var(--altin) · mor ışıma var(--altin-2) · altın #E7C878
   Yazı: Unbounded (başlık) + Manrope (gövde)              */
:root {
  --bg:#07070F; --panel:#0F0F1D; --panel2:#141428; --line:#23233A;
  --red:var(--altin); --red-dim:#c92a44; --violet:var(--altin-2); --gold:#E7C878;
  /* Altının rgb bileşenleri: yarı saydam altın kenarlar rgba()
     istiyor, CSS ise hex bir değişkeni rgba()'nın içine sokamıyor.
     Bu satır olmadığı için dosyada elle yazılmış İKİ AYRI altın
     birikmişti (233,207,143 ve 230,190,100) — hiçbiri --gold
     değildi. Yeni altın gerektiğinde rgba(var(--gold-rgb),..) yaz. */
  --gold-rgb:231,200,120;
  --txt:#EDECF4; --muted:#9C9AB5;
  --disp:'Unbounded','Unbounded Yedek',sans-serif; --body:'Manrope','Manrope Yedek',sans-serif;
}
[data-g="studyo"] .hidden {display:none!important}
/* ── Butonlar ── */
[data-g="studyo"] .btn-red {background:var(--altin);color:#fff;border:none;border-radius:11px;font-weight: 700;font-size:15px;
  padding:12px 22px;letter-spacing:.02em;transition:.18s;box-shadow:0 0 0 rgba(var(--altin-rgb),0)}
[data-g="studyo"] .btn-red:hover {background:var(--red-dim);box-shadow:0 6px 26px rgba(var(--altin-rgb),.35)}
[data-g="studyo"] .btn-red.big {width:100%;padding:15px;font-size:16px;margin-top:8px}
[data-g="studyo"] .btn-mini {background:var(--gece-3);border:1px solid var(--kenar-2);color:var(--metin);border-radius:8px;font-size:12.5px;font-weight: 700;padding:6px 11px;margin:3px 4px 0 0;transition:.15s}
[data-g="studyo"] .btn-mini:hover {border-color:var(--altin);color:var(--altin)}
[data-g="studyo"] .btn-mini.danger:hover {border-color:#ff5c5c;color:#ff5c5c}
[data-g="studyo"] .fnote {color:var(--metin-3);font-size:13.5px;margin-bottom:14px}
/* min-width:0 — ızgara hücresinin VARSAYILANI "auto"dur ve bu,
   hücrenin içindeki en geniş öğe kadar BÜYÜMESİNE izin verir.
   Sonuç: Ses Stüdyosu'nun 960px'lik zaman şeridi 390px'lik
   telefonda bütün içerik panelini 1122px'e şişiriyordu. Sayfa
   yatay kaymadığı için (gövde x'te kırpıyor) bu "taşma" olarak
   da görünmüyordu — başlık, düğmeler ve şeridin sağ yarısı
   basitçe ERİŞİLEMEZ hâle geliyordu, hata vermeden.
   Sıfırlanınca hücre 390px'te kalıyor ve şeridin kendi
   overflow-x:auto kabı (#stSeritAlan) devreye giriyor. */
[data-g="studyo"] .content {padding:30px 32px;max-width:1000px;min-width:0}
[data-g="studyo"] .pane-title {font-family:var(--disp);font-size:22px;margin-bottom:18px}
[data-g="studyo"] .fnote.center {text-align:center;margin-top:14px}
[data-g="studyo"] .btn-mini.gmail {border-color:rgba(79,179,255,.5);color:#4fb3ff;text-decoration:none}
[data-g="studyo"] .btn-mini.gmail:hover {border-color:#4fb3ff}
[data-g="studyo"] a.btn-mini {text-decoration:none;display:inline-block}
[data-g="studyo"] .oniz-logo.buyuk {height:110px;max-width:260px}
[data-g="studyo"] .ilerleme-cubuk.buyuk {height:26px;margin:12px 0}
[data-g="studyo"] .renk-nokta.mavi {background:#7EC4F5}
[data-g="studyo"] .renk-nokta.yesil {background:#8FE0A0}
[data-g="studyo"] .renk-nokta.mor {background:#B49CF5}
/* Neon — mor nabız */
[data-g="studyo"] .cerceve-neon::before {background:conic-gradient(from 0deg,var(--altin-2),#d0c4ff,var(--altin-2),#a855f7,var(--altin-2));animation:cerceveDon 4s linear infinite;box-shadow:0 0 18px rgba(var(--altin-rgb),.9)}
[data-g="studyo"] .pano-arac .btn-mini.aktif {background:var(--altin);color:#fff;border-color:var(--altin)}
[data-g="studyo"] .oyun-kontrol .btn-mini {font-size:17px;padding:8px 14px}
[data-g="studyo"] .sekme-ikon.buyuk {width:26px;height:26px;vertical-align:middle}
[data-g="studyo"] .pane-title .sekme-ikon {width:26px;height:26px;vertical-align:-5px}
/* Açıkken: mor parlama + ay döner */
[data-g="studyo"] .drama0-btn.acik {background:linear-gradient(135deg,rgba(var(--altin-rgb),.34),rgba(245,142,180,.20));
  border-color:rgba(var(--altin-rgb),.85);box-shadow:0 0 22px rgba(var(--altin-rgb),.4)}
[data-g="studyo"] .ye-btn .btn-mini {text-decoration:none;display:inline-flex;align-items:center}
/* Ana oynat tuşu — mor/kırmızı degrade, nefes alan halka */
[data-g="studyo"] .mz-tus.buyuk {width:58px;height:58px;border:none;
  background:linear-gradient(140deg,var(--altin-2),var(--altin));
  box-shadow:0 6px 22px rgba(var(--altin-rgb),.5)}
[data-g="studyo"] .mz-tus.buyuk svg {width:25px;height:25px;fill:#fff;opacity:1}
[data-g="studyo"] .mz-tus.buyuk::before {content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px solid rgba(var(--altin-rgb),.55);opacity:0;transition:opacity .3s}
[data-g="studyo"] .mz-tus.buyuk:hover {transform:translateY(-3px) scale(1.06);
  box-shadow:0 10px 30px rgba(var(--altin-rgb),.7)}
[data-g="studyo"] .mz-tus.buyuk:hover::before {opacity:1;animation:halkaNefes 2.2s ease-in-out infinite}
/* Çalarken sürekli nabız */
[data-g="studyo"] .mz-tus.buyuk.caliyor::before {opacity:1;animation:halkaNefes 2.2s ease-in-out infinite}
/* Oynat/duraklat ikon geçişi */
[data-g="studyo"] .ikon-durdur {display:none}
[data-g="studyo"] .mz-tus.buyuk.caliyor .ikon-oynat {display:none}
[data-g="studyo"] .mz-tus.buyuk.caliyor .ikon-durdur {display:block}
/* Karıştır / tekrar aktifken: mor parlama + küçük gösterge noktası */
[data-g="studyo"] .mz-tus.aktif {border-color:rgba(var(--altin-rgb),.85);
  background:linear-gradient(145deg,rgba(var(--altin-rgb),.34),rgba(245,142,180,.16));
  box-shadow:0 0 16px rgba(var(--altin-rgb),.45)}
[data-g="studyo"] .mo-tus.caliyor .ikon-oynat {display:none}
[data-g="studyo"] .mo-tus.caliyor .ikon-durdur {display:block}
[data-g="studyo"] .ks-bar {height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,#8FE0A0,#E7C878);transition:width .08s linear}
[data-g="studyo"] .ks-bar.yuksek {background:linear-gradient(90deg,#E7C878,var(--altin))}
/* ═══════════════ SES STÜDYOSU (çok kanallı) ═══════════════ */
[data-g="studyo"] .st-ust-bar {display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin:16px 0 10px;
  background:linear-gradient(135deg,rgba(var(--altin-rgb),.10),rgba(var(--altin-rgb),.05));
  border:1px solid rgba(var(--altin-rgb),.26);border-radius:14px;padding:13px 16px}
/* Tema renk noktaları — emoji/select yok, beş renk düğmesi */
[data-g="studyo"] .st-tema-noktalar {display:flex;gap:6px;align-items:center;padding:0 4px}
[data-g="studyo"] .st-tema-nokta {width:16px;height:16px;border-radius:50%;border:2px solid rgba(255,255,255,.14);
  cursor:pointer;padding:0;transition:transform .15s,box-shadow .15s}
[data-g="studyo"] .st-tema-nokta:hover {transform:scale(1.18)}
[data-g="studyo"] .st-tema-nokta.aktif {box-shadow:0 0 0 2px var(--gece-2),0 0 0 4px currentColor}
[data-g="studyo"] .st-tema-nokta.mor {background:linear-gradient(135deg,var(--altin-2),#F58EB4);color:var(--altin-2)}
[data-g="studyo"] .st-tema-nokta.mavi {background:linear-gradient(135deg,#4DA6FF,#7EC4F5);color:#4DA6FF}
[data-g="studyo"] .st-tema-nokta.kirmizi {background:linear-gradient(135deg,var(--altin),#FF8E96);color:var(--altin)}
[data-g="studyo"] .st-tema-nokta.yesil {background:linear-gradient(135deg,#3FAE7C,#8EE8B4);color:#3FAE7C}
[data-g="studyo"] .st-tema-nokta.altin {background:linear-gradient(135deg,#E7C878,#FFBE64);color:#E7C878}
/* Döngü düğmesi aktif durumu — tema renginden */
[data-g="studyo"] .st-tus.acik {border-color:rgba(var(--st-a),.8);color:rgba(var(--st-a),1);
  box-shadow:0 0 14px rgba(var(--st-a),.35),inset 0 0 8px rgba(var(--st-a),.18)}
[data-g="studyo"] .st-tus.acik svg {opacity:1}
[data-g="studyo"] .st-master .st-mini {width:24px;height:24px}
[data-g="studyo"] .st-vu {display:flex;align-items:center;gap:6px;width:90px;flex-shrink:0}
[data-g="studyo"] .st-vu-bar {flex:1;height:6px;border-radius:3px;overflow:hidden;background:rgba(255,255,255,.08);
  position:relative}
[data-g="studyo"] .st-vu-bar::before {content:"";display:block;height:100%;width:var(--vu,0%);
  background:linear-gradient(90deg,#3FAE7C,#E7C878 70%,var(--altin));transition:width .06s linear}
[data-g="studyo"] .st-vu-bar.yuksek::before {background:linear-gradient(90deg,#E7C878,var(--altin))}
[data-g="studyo"] .st-vu-deger {font-family:monospace;font-size:9.5px;color:var(--metin-3);width:30px;text-align:right}
/* Kayıt ayarı satırı */
[data-g="studyo"] .st-kayit-ayar {display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:7px}
[data-g="studyo"] .st-kayit-ayar label {display:flex;align-items:center;gap:6px;font-size:11px;color:var(--metin-3);font-weight: 700}
[data-g="studyo"] .st-kayit-ayar select {width:auto;flex:none;background:var(--gece-3);border:1px solid var(--kenar-2);
  color:var(--metin);border-radius:7px;padding:4px 6px;font-size:11.5px}
[data-g="studyo"] .st-kayit-ayar input[type=range] {width:70px;accent-color:rgba(var(--st-a),1)}
[data-g="studyo"] .st-kayit-ayar .st-ham {font-weight: 400}
[data-g="studyo"] .st-kayit-deger {font-family:monospace;font-size:10.5px;color:var(--ikincil);min-width:24px;text-align:center}
/* FX / Dışa Aktar / Miks Motoru panelleri */
[data-g="studyo"] .st-fx-panel {position:absolute;top:54px;right:14px;z-index:70;width:352px;max-height:82%;
  overflow-y:auto;background:var(--gece-2);border:1px solid var(--kenar-2);border-radius:16px;
  box-shadow:0 18px 50px rgba(0,0,0,.6)}
[data-g="studyo"] .st-fx-bas {display:flex;align-items:center;justify-content:space-between;padding:12px 14px 10px;
  font-size:14px;position:sticky;top:0;background:var(--gece-2);border-bottom:1px solid var(--kenar-2);z-index:2}
[data-g="studyo"] .st-fx-ic {padding:12px 14px 16px;display:flex;flex-direction:column;gap:10px}
[data-g="studyo"] .st-fx-satir {display:flex;align-items:center;gap:10px;font-size:12.5px}
[data-g="studyo"] .st-fx-satir>span:first-child {width:88px;flex-shrink:0;color:var(--metin-3);font-weight: 700;font-size:10.5px;
  letter-spacing:.06em}
[data-g="studyo"] .st-fx-satir input[type=range] {flex:1;min-width:0;accent-color:rgba(var(--st-a),1)}
[data-g="studyo"] .st-fx-satir select {flex:1;min-width:0;background:var(--gece-3);border:1px solid var(--kenar-2);
  color:var(--metin);border-radius:8px;padding:7px;font-size:12.5px}
[data-g="studyo"] .st-fx-satir input[type=file] {flex:1;min-width:0;font-size:12px}
[data-g="studyo"] .st-fx-hazir .btn-mini {text-transform:capitalize}
[data-g="studyo"] .st-mini.acik {background:rgba(var(--st-a),.3);border-color:rgba(var(--st-a),.7);color:#fff}
[data-g="studyo"] .st-motor-il {font-size:12px;color:rgba(var(--st-a),1);margin:0}
/* Araç çubuğu düğmelerindeki SVG'ler — emoji değil çizgi ikon */
[data-g="studyo"] .btn-mini svg {width:13px;height:13px;flex-shrink:0}
[data-g="studyo"] .btn-mini.dosya-etiket svg, [data-g="studyo"] .btn-red svg {width:14px;height:14px;flex-shrink:0}
[data-g="studyo"] .btn-mini.kapali {opacity:.32;pointer-events:none}
[data-g="studyo"] .st-b-ikon {width:13px;height:13px;vertical-align:-2px;margin-right:5px}
[data-g="studyo"] .st-tus-grup {display:flex;align-items:center;gap:8px;flex-wrap:wrap}
[data-g="studyo"] .st-tus {width:40px;height:40px;border-radius:50%;cursor:pointer;padding:0;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.12);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .2s}
[data-g="studyo"] .st-tus svg {width:17px;height:17px;fill:var(--metin);opacity:.85}
[data-g="studyo"] .st-tus:hover {transform:translateY(-2px);border-color:rgba(var(--st-a),.55);
  box-shadow:0 6px 16px rgba(var(--st-a),.28)}
[data-g="studyo"] .st-tus.buyuk {width:50px;height:50px;border:none;
  background:linear-gradient(140deg,var(--st-ana),var(--st-ana2));
  box-shadow:0 5px 18px rgba(var(--st-a),.45)}
[data-g="studyo"] .st-tus.buyuk svg {width:22px;height:22px;fill:#fff;opacity:1}
[data-g="studyo"] .st-tus.buyuk .ikon-durdur {display:none}
[data-g="studyo"] .st-tus.buyuk.caliyor .ikon-oynat {display:none}
[data-g="studyo"] .st-tus.buyuk.caliyor .ikon-durdur {display:block}
/* Kayıt tuşu */
[data-g="studyo"] .st-tus.kayit {background:rgba(var(--altin-rgb),.14);border-color:rgba(var(--altin-rgb),.5);position:relative}
[data-g="studyo"] .st-kayit-nokta {width:15px;height:15px;border-radius:50%;background:var(--altin);
  box-shadow:0 0 10px rgba(var(--altin-rgb),.8);transition:.22s cubic-bezier(.34,1.56,.64,1)}
[data-g="studyo"] .st-tus.kayit.kaydediyor {background:rgba(var(--altin-rgb),.34);border-color:var(--altin)}
[data-g="studyo"] .st-tus.kayit.kaydediyor .st-kayit-nokta {border-radius:3px;width:13px;height:13px}
[data-g="studyo"] .st-tus.kayit.kaydediyor::before {content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid rgba(var(--altin-rgb),.6);animation:kayitNabiz 1.5s ease-out infinite}
[data-g="studyo"] .st-ham {display:flex;align-items:center;gap:7px;margin-top:8px;font-size:12px;
  color:var(--metin-3);cursor:pointer;user-select:none}
[data-g="studyo"] .st-ham input {margin:0;width:14px;height:14px;accent-color:var(--st-ana);cursor:pointer}
[data-g="studyo"] .st-ham:hover {color:var(--metin)}
[data-g="studyo"] .st-sure {font-family:monospace;font-size:15px;color:var(--ikincil);margin-bottom:7px}
[data-g="studyo"] .st-seviye {height:5px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
[data-g="studyo"] .dosya-etiket {cursor:pointer;display:inline-flex;align-items:center}
[data-g="studyo"] .st-mesaj {font-size:12.5px;color:var(--metin-3);min-height:19px;margin-bottom:8px}
[data-g="studyo"] .st-mesaj.hata {color:var(--altin)}
/* Çalışma alanı */
/* ── Zaman çizelgesi ölçüleri ──
   Kanal başlığı genişliği dört ayrı yerde (cetvel boşluğu, kanal
   başlığı, oynatma imleci, mobil kırılımı) elle yazılıydı; biri
   değişince diğerleri kayıyordu. Tek değişken:
     --st-bas      : sol sütun (kanal adı/tuşları)
     --st-genislik : zaman çizelgesinin toplam eni (studyo.js yazar)  */
[data-g="studyo"] .st-calisma {background:#0c0c15;border:1px solid var(--kenar-2);border-radius:14px;overflow:hidden;
  --st-bas:196px;--st-genislik:900px}
[data-g="studyo"] .st-cetvel-satir {display:flex;border-bottom:1px solid var(--kenar-2);background:#101019}
[data-g="studyo"] .st-cetvel-bosluk {width:var(--st-bas);flex-shrink:0;border-right:1px solid var(--kenar-2)}
/* Cetvel şeritle birlikte yatay kayıyor — kaydırmayı studyo.js
   eşliyor (stCetvelEsle). overflow:hidden burada çubuğu gizlemek
   için; scrollLeft yine de programla ayarlanabiliyor. */
[data-g="studyo"] .st-cetvel-kutu {flex:1;overflow:hidden}
[data-g="studyo"] .st-cetvel {position:relative;height:26px}
[data-g="studyo"] .st-c-isaret.buyuk {border-left-color:rgba(255,255,255,.2)}
/* Kaydırma KABI — kendisi asla büyümez.
   studyo.js buraya minWidth:<çizelge eni> yazıyordu; kap kendi
   ebeveynini taşırıyor, .st-calisma'nın overflow:hidden'ı da
   fazlasını kesiyordu. Cetvel ile şerit alanı kutudan taşmış
   görünmesinin sebebi buydu. Artık kap %100 kalıyor, GENİŞLEYEN
   şey satırlar (.st-kanal) — kap da onları kaydırıyor.
   İkinci overflow-y bildirimi de kaldırıldı (auto zaten kazanıyordu). */
[data-g="studyo"] .st-serit-alan {position:relative;overflow-x:auto;overflow-y:auto;max-height:430px}
/* Oynatma imleci */
[data-g="studyo"] .st-imlec {position:absolute;top:0;bottom:0;width:2px;background:var(--altin);z-index:6;
  box-shadow:0 0 9px rgba(var(--altin-rgb),.9);pointer-events:none;margin-left:var(--st-bas)}
[data-g="studyo"] .st-imlec::before {content:"";position:absolute;top:0;left:-5px;border-left:6px solid transparent;
  border-right:6px solid transparent;border-top:8px solid var(--altin)}
/* Kanal satırı */
/* Satır, sol sütun + çizelge eni kadar geniş; kap onu kaydırıyor */
[data-g="studyo"] .st-kanal {display:flex;border-bottom:1px solid rgba(255,255,255,.05);min-height:74px;
  width:calc(var(--st-bas) + var(--st-genislik))}
[data-g="studyo"] .st-kanal.secili .st-kanal-bas {background:rgba(var(--st-a),.13);
  box-shadow:inset 3px 0 0 var(--st-ana)}
[data-g="studyo"] .st-kanal-bas {width:var(--st-bas);flex-shrink:0;padding:9px 11px;border-right:1px solid var(--kenar-2);
  background:#101019;position:sticky;left:0;z-index:4;cursor:pointer;transition:background .18s}
[data-g="studyo"] .st-kb-ust {display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:8px}
[data-g="studyo"] .st-kb-ust b {font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
[data-g="studyo"] .st-kb-sira .st-mini {width:20px;height:20px;font-size:9px}
[data-g="studyo"] .st-mini {width:22px;height:22px;border-radius:6px;padding:0;flex-shrink:0;cursor:pointer;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11);color:var(--metin-3);
  font-size:10.5px;font-weight: 700;display:flex;align-items:center;justify-content:center;
  transition:.15s;font-family:inherit}
[data-g="studyo"] .st-mini:hover {background:rgba(var(--st-a),.26);color:var(--metin)}
[data-g="studyo"] .st-mini.kirmizi {background:rgba(var(--altin-rgb),.3);border-color:rgba(var(--altin-rgb),.6);color:#fff}
[data-g="studyo"] .st-mini.sari {background:rgba(var(--gold-rgb),.3);border-color:rgba(var(--gold-rgb),.6);color:#fff}
/* Klip şeridi */
/* flex:1 idi — şerit kabın GÖRÜNEN enine sığıyordu, dolayısıyla
   o enin ötesindeki klipler kırpılıyordu. Artık çizelge eni. */
[data-g="studyo"] .st-serit {position:relative;flex:none;width:var(--st-genislik);min-height:74px;
  background-image:linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:80px 100%}
/* ═══════════ VİDEO ŞERİDİ + SAHNE ÖNİZLEMESİ (v99) ═══════════ */
[data-g="studyo"] .st-video-kanal .st-kanal-bas {background:#0c0c14}
[data-g="studyo"] .st-video-kanal .st-kb-sag {display:flex;gap:4px}
[data-g="studyo"] .st-video-kanal .st-kb-ust {justify-content:space-between}
[data-g="studyo"] .st-video-serit {position:relative;flex:none;width:var(--st-genislik);min-height:76px;
  background:#05050a;border-top:1px solid rgba(255,255,255,.05)}
[data-g="studyo"] .st-video-kareler {display:flex;height:100%;overflow:hidden}
/* SABİT, `absolute` DEĞİL. Panel sekmenin içinde mutlak
   konumlandırılmıştı ve stüdyo uzun bir sayfa: çizelgede biraz
   aşağı kaydırınca video ekrandan çıkıyordu. ÖLÇÜLDÜ — panelin
   üst kenarı 1185px'teydi, ekran 830px. Yani dublaj yaparken
   tam da bakılması gereken şey görünmüyordu. Audition'ın video
   paneli de sabit durur; kaydırma onu kaçırmaz.

   Bunun mümkün olmasının sebebi aynı turda `#tab-studyo`
   üzerindeki artık `transform`un kaldırılmış olması: transform
   taşıyan bir ata, içindeki `position:fixed`i kendine
   sabitliyor. */
[data-g="studyo"] .st-video-onizle {position:fixed;top:86px;right:22px;z-index:60;width:460px;
  background:var(--gece-2);border:1px solid var(--kenar-2);border-radius:14px;overflow:hidden;
  box-shadow:0 16px 44px rgba(0,0,0,.6)}
/* max-height KALDIRILDI. 240px tavan, panel büyütülse bile
   videoyu 240 pikselde tutuyordu: genişlik artıyor, görüntü
   aynı kalıyor ve yanlarda siyah bant oluşuyordu. Oran
   videonun kendisinden geliyor. */
[data-g="studyo"] .st-video-onizle video {width:100%;display:block;background:#000;aspect-ratio:16/9;object-fit:contain}
[data-g="studyo"] .st-vo-bas {display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:8px 10px;font-weight: 700;font-size:12.5px;background:var(--gece-3)}
[data-g="studyo"] .st-vo-tus {display:flex;gap:4px}
/* ═══════════ TELEFON ARAYÜZÜ (v99) ═══════════
   Masaüstü araç çubuğu mobilde tamamen kapanıyor; alt taşıma
   çubuğu + araç sayfası geliyor. Klipler büyüyor (başparmak),
   dokunma hedefleri 44px+ — BandLab dersi. */
[data-g="studyo"] .st-mobil-bar, [data-g="studyo"] .st-mobil-arac-btn, [data-g="studyo"] .st-mobil-araclar {display:none}
[data-g="studyo"] .st-ipucu {display:flex;gap:18px;flex-wrap:wrap;margin-top:11px;font-size:11.5px;color:var(--metin-3)}
[data-g="studyo"] .st-ipucu kbd {background:rgba(255,255,255,.08);border:1px solid var(--kenar-2);border-radius:5px;
  padding:1px 6px;font-family:monospace;font-size:10.5px}
[data-g="studyo"] .kanal-aciklama.hidden {display:none}
[data-g="studyo"] .sag-menu.hidden {display:none}
[data-g="studyo"] .kural-onizle.hidden {display:none}
[data-g="studyo"] .bg-tuslar .btn-red, [data-g="studyo"] .bg-tuslar .btn-outline {white-space:nowrap}
[data-g="studyo"] .ay-parca .btn-mini {text-decoration:none;display:inline-flex;align-items:center}
/* ═══════════════════════════════════════════════════════════
   BUTON YENİLEME — degrade, parlama, yumuşak hareket
   (dosyanın sonunda olduğu için önceki tanımları geçersiz kılar)
   ═══════════════════════════════════════════════════════════ */
/* ── Ana buton: mor→kırmızı degrade, üstünde kayan parlama ── */
[data-g="studyo"] .btn-red {
  position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(135deg,var(--altin-2) 0%,#B85CE8 45%,var(--altin) 100%);
  background-size:200% 100%;background-position:0% 50%;
  color:#fff;border:none;border-radius:13px;font-weight: 700;font-size:15px;
  padding:12px 24px;letter-spacing:.015em;cursor:pointer;
  box-shadow:0 4px 16px rgba(var(--altin-rgb),.32);
  transition:background-position .55s cubic-bezier(.4,0,.2,1),
             transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .28s}
[data-g="studyo"] .btn-red::before {content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);
  transform:translateX(-120%);transition:transform .6s cubic-bezier(.4,0,.2,1)}
[data-g="studyo"] .btn-red:hover {background-position:100% 50%;transform:translateY(-2px);
  box-shadow:0 9px 28px rgba(184,92,232,.48)}
[data-g="studyo"] .btn-red:hover::before {transform:translateX(120%)}
[data-g="studyo"] .btn-red:active {transform:translateY(0) scale(.98)}
[data-g="studyo"] .btn-red:disabled {opacity:.5;cursor:not-allowed;transform:none;box-shadow:none}
/* ── Küçük buton ── */
[data-g="studyo"] .btn-mini {
  background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.12);color:var(--metin);border-radius:9px;
  font-size:12.5px;font-weight: 700;padding:7px 13px;margin:3px 4px 0 0;cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),border-color .2s,box-shadow .22s,background .22s}
[data-g="studyo"] .btn-mini:hover {color:#fff;border-color:rgba(var(--altin-rgb),.6);transform:translateY(-2px);
  background:linear-gradient(145deg,rgba(var(--altin-rgb),.28),rgba(184,92,232,.14));
  box-shadow:0 5px 16px rgba(var(--altin-rgb),.3)}
[data-g="studyo"] .btn-mini:active {transform:translateY(0) scale(.97)}
[data-g="studyo"] .btn-mini.danger:hover {border-color:rgba(var(--altin-rgb),.65);
  background:linear-gradient(145deg,rgba(var(--altin-rgb),.26),rgba(var(--altin-rgb),.1));
  box-shadow:0 5px 16px rgba(var(--altin-rgb),.3)}
[data-g="studyo"] .dm-foto-overlay.hidden {display:none}
[data-g="studyo"] .sekme-ikon.buyuk {width:34px;height:34px}
[data-g="studyo"] .rol-rozet.buyuk {font-size:13px;padding:5px 14px}
[data-g="studyo"] .maskot-balon.hidden {display:none}
[data-g="studyo"] .gif-overlay.hidden {display:none}
/* Butonlara basınca minik "çökme" hissi */
[data-g="studyo"] button:not(:disabled):active, [data-g="studyo"] .btn-red:active, [data-g="studyo"] .btn-outline:active {transform:scale(.97)}
[data-g="studyo"] .sc-kare.hedef::after {content:"";width:26%;height:26%;border-radius:50%;background:rgba(61,220,151,.75);position:absolute}
/* ═══════════════════════════════════════════════════════════
   MİZANİS LOGO GRADYANI — kenar aksanları (v51)
   Logodan örneklenen renkler: kızıl → magenta → mor
   ═══════════════════════════════════════════════════════════ */
:root {
  --mz1:#FF2B4A;   /* kızıl (logo tepesi) */
  --mz2:#D6113F;
  --mz3:#A50A5E;   /* magenta (orta) */
  --mz4:#6A1A89;   /* mor (logo alt uçları) */
  --mz-grad:linear-gradient(160deg,var(--mz1) 0%,var(--mz2) 32%,var(--mz3) 66%,var(--mz4) 100%);
  --mz-grad-yatay:linear-gradient(90deg,var(--mz1),var(--mz3) 55%,var(--mz4));
}
/* ── Sekme başlıkları: alt vurgu ── */
[data-g="studyo"] .pane-title {position:relative;padding-bottom:11px}
[data-g="studyo"] .pane-title::after {content:"";position:absolute;bottom:0;left:0;width:52px;height:2.5px;border-radius:3px;
  background:var(--mz-grad-yatay);box-shadow:0 0 12px rgba(214,17,63,.35)}
[data-g="studyo"] .ind-url-satir .btn-red {white-space:nowrap;flex:none}
[data-g="studyo"] .ind-secim .btn-red {flex:none;white-space:nowrap}
[data-g="studyo"] .ind-sonuc .btn-red {flex:none;text-decoration:none;display:inline-flex;align-items:center;padding:11px 20px}
/* ── Araç kutusu buton düzeltmeleri (v63.1) ──
   Sitenin buton dili .btn-red / .btn-outline / .btn-mini üzerine
   kurulu. Dosya seçtiren yerlerde <label> kullanılıyor: label
   varsayılan olarak satır içi ve imleçsiz, buton gibi durması
   için ikisi de burada veriliyor. */
[data-g="studyo"] label.btn-red, [data-g="studyo"] label.btn-outline, [data-g="studyo"] label.btn-mini {
  display:inline-flex;align-items:center;gap:6px;cursor:pointer;line-height:1.2}
[data-g="studyo"] .btn-mini.vurgu {background:var(--altin);border-color:var(--altin);color:#fff}
[data-g="studyo"] .btn-mini.vurgu:hover {background:var(--red-dim);color:#fff}
/* ── Butonlar ──
   Düz dolgu yerine çok hafif bir degrade + üst ışık: tuş
   "basılabilir" görünüyor. Basınca 1 piksel çöküyor.          */
[data-g="studyo"] .btn-red {
  background-image:linear-gradient(180deg,rgba(255,255,255,.16),rgba(255,255,255,0));
  box-shadow:var(--golge-1),inset 0 1px 0 rgba(255,255,255,.2);
}
[data-g="studyo"] .btn-red:hover {box-shadow:0 6px 22px rgba(var(--altin-rgb),.34),inset 0 1px 0 rgba(255,255,255,.22)}
[data-g="studyo"] .btn-red:active, [data-g="studyo"] .btn-outline:active, [data-g="studyo"] .btn-mini:active, [data-g="studyo"] .tab:active {transform:translateY(1px)}
[data-g="studyo"] .btn-outline, [data-g="studyo"] .btn-mini {transition:border-color .16s,color .16s,background .16s,transform .1s}
[data-g="studyo"] .btn-mini:hover {background:rgba(var(--altin-rgb),.09)}
/* ── Bölüm başlıkları ──
   Başlığın soluna kısa bir akkor çizgi: sayfa taranırken
   bölümlerin nerede başladığı bir bakışta anlaşılıyor.        */
[data-g="studyo"] .pane-title {position:relative;padding-left:14px;letter-spacing:-.01em}
[data-g="studyo"] .pane-title::before {
  content:"";position:absolute;left:0;top:.18em;bottom:.18em;width:4px;border-radius:4px;
  background:linear-gradient(180deg,var(--altin),var(--altin-2));
}
[data-g="studyo"] .yy-bg-tus .btn-red {font-size:13.5px;padding:10px 16px;min-height:44px}
[data-g="studyo"] .yy-bg-tus .btn-red:disabled {opacity:.45;cursor:not-allowed;box-shadow:none}
/* ═══════════════════════════════════════════════════════════
   HİGANBANA (彼岸花)                                     v72
   ───────────────────────────────────────────────────────────
   Kırmızı örümcek zambağı. Japonya'da eylül ekinoksunda,
   "higan" haftasında açıyor; anime ikonografisinde ayrılık ve
   eşikle özdeşleşmiş bir çiçek. Mizanis'in kırmızısı zaten o
   kırmızı — motif uydurma değil, palete oturuyor.

   Şeklin imzası ve papatyadan farkı: altı DAR taç yaprağı
   uçlarında GERİYE kıvrılıyor, ercikler taç yapraklarından
   daha uzun ve dışa doğru yay çiziyor. Bu iki şey olmadan
   çizim "genel bir çiçek" oluyor.

   Neden maske, neden arka plan görseli değil: mask-image
   currentColor'ı geçiriyor, yani aynı çiçek kırmızı, altın ya
   da mor olarak, temaya göre boyanabiliyor. Tek bir şekil
   tanımı, çok sayıda kullanım.

   ÖNEMLİ: 24px'in altında altı yaprak + altı ercik lekeye
   dönüşüyor. Küçük boy için ayrı bir sadeleştirilmiş çizim
   var (--hb-mini): beş yaprak, ercik ucu yok, çizgi kalın.
   ═══════════════════════════════════════════════════════════ */
:root {
  --hb-tam:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 80'%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(0)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(30)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(30)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(60)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(90)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(90)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(120)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(150)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(150)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(180)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(210)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(210)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(240)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(270)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(270)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(300)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(330)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(330)' fill='%23FF3D5A' opacity='.9'/%3E%3C/svg%3E");
  --hb-mini:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 80'%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(0)' fill='none' stroke='%23FF3D5A' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(30)' fill='none' stroke='%23FF3D5A' stroke-width='2.16' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(72)' fill='none' stroke='%23FF3D5A' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(102)' fill='none' stroke='%23FF3D5A' stroke-width='2.16' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(144)' fill='none' stroke='%23FF3D5A' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(174)' fill='none' stroke='%23FF3D5A' stroke-width='2.16' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(216)' fill='none' stroke='%23FF3D5A' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(246)' fill='none' stroke='%23FF3D5A' stroke-width='2.16' stroke-linecap='round' opacity='.75'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(288)' fill='none' stroke='%23FF3D5A' stroke-width='3.6' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(318)' fill='none' stroke='%23FF3D5A' stroke-width='2.16' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");
  --hb-sapli:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-40 -40 80 126'%3E%3Cpath d='M0,0 C 1,18.400000000000002 -1,32.199999999999996 0,46' fill='none' stroke='%23FF3D5A' stroke-width='1.68' stroke-linecap='round' opacity='.55'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(0)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(30)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(30)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(60)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(90)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(90)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(120)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(150)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(150)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(180)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(210)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(210)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(240)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(270)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(270)' fill='%23FF3D5A' opacity='.9'/%3E%3Cpath d='M0,0 C 3,-9 7,-17 11,-23 C 14,-27 18,-26 17,-22 C 16,-18 12,-14 8,-11' transform='rotate(300)' fill='none' stroke='%23FF3D5A' stroke-width='2.4' stroke-linecap='round'/%3E%3Cpath d='M0,0 C 5,-13 13,-24 23,-30' transform='rotate(330)' fill='none' stroke='%23FF3D5A' stroke-width='1.44' stroke-linecap='round' opacity='.75'/%3E%3Ccircle cx='23' cy='-30' r='2.04' transform='rotate(330)' fill='%23FF3D5A' opacity='.9'/%3E%3C/svg%3E");

  /* Tek taç yaprağı — düşen yapraklar için (grafik.css madde 37).
     Tam çiçek 12px'te leke oluyor; düşen bir yaprak zaten tek
     yapraktır, çiçeğin küçültülmüşü değil. */
  --hb-yaprak:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 42'%3E%3Cpath d='M12,41 C 3,31 0,17 7,4 C 8.6,1.2 11,0 12,0 C 13,0 15.4,1.2 17,4 C 24,17 21,31 12,41 Z' fill='%23FF3D5A'/%3E%3C/svg%3E");
}
[data-g="studyo"] .uye-eylem .btn-mini, [data-g="studyo"] .uye-eylem .rol-sec {
  display:inline-flex; align-items:center; justify-content:center;
  min-height:36px; padding:7px 10px; text-align:center;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
[data-g="studyo"] .toplu-cubuk .btn-mini {margin:0}
[data-g="studyo"] .pk-yukle .btn-mini {margin:0}
[data-g="studyo"] .pk-yonet .btn-mini, [data-g="studyo"] .pk-yonet .btn-red {margin:0}
/* "Projeye çevir" bu panelin ASIL eylemi — diğer düğmelerle aynı
   griliğe gömülünce panel bir öneri panosu gibi okunuyordu, oysa
   burada iş sıradaki projeyi SEÇMEK. */
[data-g="studyo"] .ok-yonet .btn-mini.birincil {border-color:color-mix(in srgb, var(--altin) 55%, var(--kenar-2));
  background:color-mix(in srgb, var(--altin) 14%, transparent); font-weight: 700}
/* ═══════════ BAŞLIK İKON KUTUSU (v94) ═══════════
   Emoji'ler başlığın yanında ÇIPLAK duruyordu: her biri başka
   boyda, başka renk sıcaklığında ve yazı çizgisine oturmuyordu.
   Tek başına bakınca sorun görünmüyor, 50 sekme başlığı boyunca
   birikince dağınık duruyor.

   Emoji'nin kendisi DEĞİŞMİYOR — 50 sekmeye ayrı ikon çizmek
   ayrı bir iş ve sitede zaten yöneticinin kendi ikonunu
   yükleyebildiği bir katman var. Tasarlanan şey emojinin
   DURDUĞU YER: sabit ölçülü, markanın kızıl→mor geçişiyle
   çerçevelenmiş bir kutu. Hepsi aynı boyda, aynı hizada ve
   kasıtlı duruyor.

   Kurallar dosyanın SONUNA yazıldı: .pane-title 265. ve 3600.
   satırlarda iki kez tanımlı, araya girmek sessizce ezilirdi. */
[data-g="studyo"] .pane-title {display:flex;align-items:center;gap:12px}
/* Başlığın altındaki vurgu çizgisi ikonun altına kaymasın:
   ::after sol kenardan başlıyordu, artık yazının hizasında. */
[data-g="studyo"] .pane-title::after {left:50px}
[data-g="studyo"] .mark-modal.hidden {display:none}
[data-g="studyo"] .admin-muzik-pankart .btn-mini {flex:none;width:auto}
/* Masaüstü araç çubuğu — yapışkan cam panel */
[data-g="studyo"] #tab-studyo .st-ust-bar {position:sticky;top:6px;z-index:45;
  background:linear-gradient(160deg,rgba(20,20,34,.92),rgba(12,12,22,.94));
  border:1px solid rgba(255,255,255,.08);border-radius:16px;
  padding:10px 14px;margin-bottom:10px;backdrop-filter:blur(14px);
  box-shadow:0 10px 30px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.06)}
[data-g="studyo"] #tab-studyo .st-sure {font-size:16px;letter-spacing:.06em;text-shadow:0 0 18px rgba(231,200,120,.35)}
/* Çalışma alanı — kart olarak */
[data-g="studyo"] #tab-studyo .st-calisma {border:1px solid rgba(255,255,255,.07);border-radius:16px;
  background:rgba(9,9,16,.55);box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.25);
  padding:8px 8px 12px;overflow:hidden}
/* Zaman cetveli — daha okunur */
[data-g="studyo"] .st-cetvel-kutu {border-bottom:1px solid rgba(255,255,255,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.03),transparent)}
[data-g="studyo"] .st-c-isaret.buyuk {font-size:10px;font-family:'JetBrains Mono',monospace;color:rgba(255,255,255,.55);
  padding-left:5px;letter-spacing:.04em}
/* Kanal satırları */
[data-g="studyo"] .st-kanal {transition:background .18s}
[data-g="studyo"] .st-kanal:hover {background:rgba(255,255,255,.015)}
[data-g="studyo"] .st-kanal.secili {background:linear-gradient(90deg,rgba(var(--st-a),.07),transparent 60%)}
[data-g="studyo"] .st-kanal-bas {background:linear-gradient(160deg,#12121d,#0d0d16);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.03)}
[data-g="studyo"] .st-kanal.secili .st-kanal-bas {box-shadow:inset 3px 0 0 var(--st-ana),inset -1px 0 0 rgba(255,255,255,.03)}
[data-g="studyo"] .st-kb-ust b {letter-spacing:.03em}
/* Taşıma düğmeleri */
[data-g="studyo"] .st-tus {box-shadow:0 3px 10px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
[data-g="studyo"] .st-tus.buyuk {box-shadow:0 6px 20px rgba(var(--st-a),.45),inset 0 1px 0 rgba(255,255,255,.2)}
[data-g="studyo"] .st-tus.buyuk:hover {box-shadow:0 8px 26px rgba(var(--st-a),.6)}
/* Durum satırı */
[data-g="studyo"] #tab-studyo .st-mesaj {display:inline-block;padding:5px 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.06);font-size:12px}
/* Paneller — cam */
[data-g="studyo"] .st-fx-panel {background:linear-gradient(165deg,rgba(22,22,38,.97),rgba(12,12,22,.98));
  backdrop-filter:blur(16px);border-color:rgba(255,255,255,.1);
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 0 1px rgba(var(--st-a),.12)}
[data-g="studyo"] .st-fx-bas {background:transparent}
/* ═══════════ MOBİL — AYRI UYGULAMA DÜZENİ ═══════════ */
[data-g="studyo"] .st-mobil-kapsa {display:none}
/* ═══════════════════════════════════════════════════════════
   v101 — MİKSER KONSOLU · ÖLÇÜM · OTOMASYON · MIDI KLAVYE
   Tasarım kuralı: emoji yok, her ikon çizilmiş SVG; renkler
   stüdyo temasının --st-a değişkeninden geliyor, beş temanın
   hepsinde tutarlı duruyor.
   ═══════════════════════════════════════════════════════════ */
/* Bölüm başlıklarındaki ikon — emoji yerine */
[data-g="studyo"] .pane-ikon {width:22px;height:22px;vertical-align:-4px;margin-right:9px;
  color:rgba(var(--st-a,139,124,255),1);flex:none}
/* ─────────── Ortak panel gövdesi (mikser + ölçüm) ─────────── */
[data-g="studyo"] .st-konsol {margin:10px 0 14px;border:1px solid rgba(var(--st-a),.28);border-radius:16px;
  background:linear-gradient(165deg,rgba(20,20,34,.96),rgba(10,10,18,.98));
  box-shadow:0 14px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.05);overflow:hidden}
[data-g="studyo"] .st-konsol .st-fx-bas {background:rgba(255,255,255,.03);gap:10px}
[data-g="studyo"] .st-konsol-not {font-size:10.5px;color:var(--metin-3);font-weight: 700;margin-left:auto;margin-right:6px}
[data-g="studyo"] .st-konsol .st-mini svg {width:13px;height:13px}
/* ─────────── MİKSER ─────────── */
[data-g="studyo"] .st-konsol-seritler {display:flex;gap:8px;padding:14px;overflow-x:auto;align-items:stretch}
[data-g="studyo"] .mk-olcer b.kirmizi {background:var(--altin);box-shadow:0 0 6px var(--altin)}
[data-g="studyo"] .mk-tuslar .st-mini {width:24px;height:22px;font-size:9.5px}
/* ─────────── ÖLÇÜM ─────────── */
[data-g="studyo"] .anz-ic {padding:14px;display:flex;flex-direction:column;gap:12px}
[data-g="studyo"] .anz-sayilar {display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:8px}
[data-g="studyo"] .anz-kutu {background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.07);border-radius:11px;
  padding:9px 10px;display:flex;flex-direction:column;gap:2px}
[data-g="studyo"] .anz-kutu span {font-size:8.5px;letter-spacing:.1em;color:var(--metin-3);font-weight: 700}
[data-g="studyo"] .anz-kutu b {font-family:monospace;font-size:21px;color:var(--metin);line-height:1.1}
[data-g="studyo"] .anz-kutu b.uyari {color:var(--altin)}
[data-g="studyo"] .anz-kutu i {font-size:9px;color:var(--metin-3);font-style:normal;letter-spacing:.06em}
[data-g="studyo"] .anz-kutu.buyuk {background:linear-gradient(150deg,rgba(var(--st-a),.18),rgba(0,0,0,.42));
  border-color:rgba(var(--st-a),.4)}
[data-g="studyo"] .anz-kutu.buyuk b {font-size:25px;color:rgba(var(--st-a),1)}
[data-g="studyo"] .anz-kutu.hedef select {background:var(--gece-3);border:1px solid var(--kenar-2);color:var(--metin);
  border-radius:7px;padding:3px 5px;font-size:10.5px;width:100%}
[data-g="studyo"] .anz-fark {font-family:monospace;font-size:14px !important;margin-top:2px}
[data-g="studyo"] .anz-fark.iyi {color:#3FAE7C}
[data-g="studyo"] .anz-fark.uyari {color:var(--ikincil)}
[data-g="studyo"] .anz-kor-cubuk {position:relative;height:8px;border-radius:4px;overflow:hidden;
  background:linear-gradient(90deg,var(--altin) 0%,#5b5b70 50%,#3FAE7C 100%)}
[data-g="studyo"] .anz-kor-cubuk i {position:absolute;top:-3px;width:3px;height:14px;border-radius:2px;background:#fff;
  left:var(--kor,50%);box-shadow:0 0 8px rgba(255,255,255,.7);transition:left .08s linear}
[data-g="studyo"] .anz-grafik {border:1px solid rgba(255,255,255,.07);border-radius:12px;overflow:hidden;background:#07070d}
[data-g="studyo"] .anz-grafik-bas {font-size:10.5px;font-weight: 700;letter-spacing:.05em;color:var(--metin-3);
  padding:7px 10px;background:rgba(255,255,255,.03);border-bottom:1px solid rgba(255,255,255,.06)}
[data-g="studyo"] .anz-grafik-bas small {font-weight: 400;letter-spacing:0;opacity:.75}
[data-g="studyo"] .anz-grafik canvas {display:block;width:100%}
[data-g="studyo"] .st-otom-arac .st-mini {width:auto;padding:0 7px;height:20px;font-size:9px}
[data-g="studyo"] .st-mini.yesil {border-color:rgba(63,174,124,.8);color:#8EE8B4;background:rgba(63,174,124,.18)}
/* Video ofset kaydırıcısı */
[data-g="studyo"] .st-video-ofset {display:flex;align-items:center;gap:5px}
[data-g="studyo"] .st-video-ofset input {width:78px;accent-color:rgba(var(--st-a),1)}
[data-g="studyo"] .st-video-ofset b {font-family:monospace;font-size:9.5px;color:var(--ikincil);min-width:44px}
[data-g="studyo"] .st-fx-kulak .btn-mini {flex:1;justify-content:center}
[data-g="studyo"] .st-fx-kulak .btn-mini.acik {border-color:rgba(var(--st-a),.85);background:rgba(var(--st-a),.2);color:#fff}
[data-g="studyo"] .piyano-btn.kayit {width:auto;padding:0 13px;gap:7px;display:inline-flex;align-items:center;
  border-color:rgba(var(--altin-rgb),.45)}
[data-g="studyo"] .piyano-btn.kayit.acik {background:rgba(var(--altin-rgb),.22);border-color:var(--altin);color:#fff}
[data-g="studyo"] .piyano-btn.kayit.acik .piyano-kayit-nokta {animation:piyanoKayitYanip 1s infinite}
/* ── sürükle-bırak hedefi ── */
[data-g="studyo"] #tab-studyo .st-serit-alan.st-birak {outline:2px dashed rgba(111,227,163,.75);outline-offset:-2px;
  background:rgba(111,227,163,.05)}
/* ═══ DÜZ RENKLER (v104) — stüdyoda gradient YOK. Audition gibi:
   düz koyu zemin, ince çizgi; renk yalnızca DURUM bildirir
   (kayıt=kırmızı, solo=sarı, aktif=mor). Site genelindeki
   mor→kırmızı geçişler bu kapsama girmiyor. ═══ */
[data-g="studyo"] #tab-studyo .btn-red {background:#B3122E;border:1px solid #D11A38;box-shadow:none}
[data-g="studyo"] #tab-studyo .btn-red:hover {background:#C81634}
[data-g="studyo"] #tab-studyo .st-tus {background:#1D1D24;box-shadow:none}
[data-g="studyo"] #tab-studyo .st-tus.buyuk {background:#26262E;border:1px solid rgba(255,255,255,.16);box-shadow:none}
[data-g="studyo"] #tab-studyo .st-tus.buyuk:hover {border-color:rgba(255,255,255,.35);box-shadow:none}
[data-g="studyo"] #tab-studyo .st-fx-panel {background:#14141C;border:1px solid rgba(255,255,255,.1)}
[data-g="studyo"] #tab-studyo .st-konsol {background:#14141C}
[data-g="studyo"] #tab-studyo .st-konsol .st-fx-bas {background:rgba(255,255,255,.03)}
[data-g="studyo"] #tab-studyo .st-vo-bas {background:#101016}
/* Klip başka bir kanalın şeridine sürüklenirken hedef vurgulanır:
   bırakmadan önce nereye düşeceğini görmek gerekiyor, yoksa klip
   "bir yerlere" gidiyor ve kullanıcı geri almak zorunda kalıyor. */
[data-g="studyo"] .st-serit.st-serit-hedef {
  background:color-mix(in srgb,var(--altin-2) 14%,transparent);
  box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--altin-2) 55%,transparent)}
[data-g="studyo"] .mf-p, [data-g="studyo"] .hero-lead, [data-g="studyo"] .fnote, [data-g="studyo"] .mk-alt, [data-g="studyo"] .empty-note, [data-g="studyo"] footer {text-wrap:pretty}
/* ── 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.                                               */
[data-g="studyo"] .ai-yukleniyor {
  display:inline-flex; align-items:center; gap:9px;
  color:var(--metin-3); animation:none;
}
/* ── 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.               */
[data-g="studyo"] .pane-title {position:relative}
[data-g="studyo"] .pane-title::after {
  content:""; position:absolute; left:-2px; bottom:-9px;
  width:13px; height:13px; opacity:.5;
  background:var(--altin);
  -webkit-mask:var(--hb-mini) center/contain no-repeat;
  mask:var(--hb-mini) center/contain no-repeat;
  pointer-events:none;
}
/* ── 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(--altin) ve tema değişince tarla da onunla dönüyor.       */
[data-g="studyo"] .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(--altin); 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;
}
/* ── 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. */
[data-g="studyo"] .hero-actions .btn-red {position:relative; overflow:hidden}
[data-g="studyo"] .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;
}
[data-g="studyo"] .hero-actions .btn-red:hover::after {opacity:.3; transform:none}
/* ── 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(--altin)" ataması da bu yüzden gitti).    */
[data-g="studyo"] .pane-title {padding-bottom:15px}
[data-g="studyo"] .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(--altin),var(--altin-2)));
  -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(--altin) 45%, transparent));
}
/* ── 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.                  */
[data-g="studyo"] .tabpane:not(.hidden) {animation:sekmeGir .34s cubic-bezier(.22,.9,.34,1) both}
/* ── 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,var(--altin-2),#B85CE8,var(--altin));
              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.                                                */
[data-g="studyo"] .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, var(--altin-2) 0%, #B85CE8 45%, var(--altin) 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. */
[data-g="studyo"] .btn-red:hover {background-position:0 0, 100% 50%}
/* 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.          */
[data-g="studyo"] .content:has(.tabpane:not(.hidden) .chat-box)::after, [data-g="studyo"] .content:has(.tabpane:not(.hidden) #stSerit)::after {display:none}
/* ── 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.                              */
[data-g="studyo"] .oyun-kontrol {
  display:grid; grid-template-columns:repeat(5, 1fr); gap:8px;
}
[data-g="studyo"] .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;
}
[data-g="studyo"] #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(--altin) 18%,transparent)}
[data-g="studyo"] #view-landing .hero-actions .btn-red::after, [data-g="studyo"] #view-landing .tori-line, [data-g="studyo"] #view-landing .hb-toz, [data-g="studyo"] #view-landing .hb-tarla, [data-g="studyo"] #view-landing .hb-ayrac {display:none}
/* ═══════════════════════════════════════════════════════════
   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.            */
[data-g="studyo"] #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(--altin) 18%,transparent)}
[data-g="studyo"] #view-landing .btn-red::after {display:none}
/* 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. */
[data-g="studyo"] .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(--metin-3); -webkit-text-fill-color:var(--metin-3); opacity:.7}
[data-g="studyo"] .renk-satir .btn-red.small, [data-g="studyo"] .renk-satir .btn-outline.small {width:auto; flex:none}
/* ═══════════════════════════════════════════════════════════
   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 [data-g="studyo"] .pane-title {
  font-size:19px;margin-bottom:14px;padding-bottom:10px;letter-spacing:.01em;
}
body.uygulamada [data-g="studyo"] .fnote {font-size:12.5px;line-height:1.55}
/* 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. */
[data-g="studyo"] .st-tema-nokta, [data-g="studyo"] .st-mini {position:relative}
[data-g="studyo"] .st-tema-nokta::after, [data-g="studyo"] .st-mini::after {
  content:"";position:absolute;
  /* 16px noktayı 40px'e, 22px düğmeyi 40px'e çıkarıyor. */
  inset:-12px;border-radius:8px;
}
[data-g="studyo"] .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. */
[data-g="studyo"] .st-cetvel, [data-g="studyo"] .st-mob-cetvel {max-width:100%}
/* 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 [data-g="studyo"] #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));
}
/* Taşıma çubuğu her şeyin üstünde: kayıt almak, bir bildirimi
   okumaktan önce gelir. */
body.mobil-uygulama [data-g="studyo"] #tab-studyo .st-mobil-bar {z-index:940}
/* Video panelindeki boyut düğmeleri — artı/eksi, ikonlu. */
[data-g="studyo"] .st-vo-boy svg {width:13px;height:13px}
[data-g="studyo"] .st-vo-bas {user-select:none}
[data-g="studyo"] ` (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}
[data-g="studyo"] `) ama
   video paneli unutulmuş.

   Sonucu ÖLÇÜLDÜ: panel `position:relative` kalıyor, [data-g="studyo"] sayfa
   kaydırılınca ekranın dışına çıkıyordu — üst kenarı 1185px, [data-g="studyo"] 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`), [data-g="studyo"] o yüzden burada
   genişlik YAZILMIYOR: yazılsaydı boyut düğmeleri hiçbir şey
   yapmazdı. */
#tab-studyo > .st-video-onizle, [data-g="studyo"] #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. */
[data-g="studyo"] #tab-studyo .st-video-onizle video {
  max-height:none;aspect-ratio:16/9;object-fit:contain;
}
/* BİRİNCİL DÜĞME MARKA RENGİNDE — gri-üstüne-gri düz kalıyordu.
   Gradyan kaldırılıyor (o "oyun arayüzü" hissi verir) ama düğme
   DÜZ VURGU KIRMIZISI oluyor: profesyonel sitelerde birincil
   eylem markanın rengidir (Stripe, Linear, Vercel), gri değil.
   İkincil düğmeler (.btn-outline) nötr kalıyor — renk yalnız
   ÖNEMLİ eylemde. */
body.pro-kip [data-g="studyo"] .btn-red {
  background:var(--altin)!important;border:1px solid var(--altin)!important;color:#fff!important;
  box-shadow:none!important;
}
body.pro-kip [data-g="studyo"] .btn-red:hover {background:var(--red-dim)!important;border-color:var(--red-dim)!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 [data-g="studyo"] #tab-studyo, body.pro-kip [data-g="studyo"] .st-calisma, body.pro-kip [data-g="studyo"] .st-mob-alan {
  --st-ana:#8E99AD;
  --st-ana2:#5E6878;
  --st-a:142,153,173;
}
body.pro-kip [data-g="studyo"] .st-kanal.secili, body.pro-kip [data-g="studyo"] .st-mob-kanal.secili {
  background:linear-gradient(90deg,rgba(142,153,173,.12),transparent 70%)!important;
}
/* ═══════════════════════════════════════════════════════════
   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,var(--altin),
   var(--altin-2))` 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 [data-g="studyo"] .btn-outline, body.pro-kip [data-g="studyo"] .btn-outline.small, body.pro-kip [data-g="studyo"] .btn-mini {
  background-image:none!important;
  background-color:var(--gece-3)!important;
  border-color:var(--kenar-2)!important;
  color:var(--metin)!important;
}
body.pro-kip [data-g="studyo"] .btn-outline:hover, body.pro-kip [data-g="studyo"] .btn-mini:hover {
  background-color:#23252B!important;
  border-color:#3A3E47!important;
}
/* Etkin/açık durumlar: renk yerine KONTRAST ile ayrışıyor. */
body.pro-kip [data-g="studyo"] .btn-mini.acik, body.pro-kip [data-g="studyo"] .st-mini.acik, body.pro-kip [data-g="studyo"] .st-mini.kirmizi, body.pro-kip [data-g="studyo"] .st-mini.sari, body.pro-kip [data-g="studyo"] .st-mini.yesil {
  background:#3A3F49!important;color:#fff!important;border-color:#525863!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 [data-g="studyo"] .kn-sayi, body.pro-kip [data-g="studyo"] .sec-title span, body.pro-kip [data-g="studyo"] .ft-ad, body.pro-kip [data-g="studyo"] .pane-title::after, body.pro-kip [data-g="studyo"] .rozet, body.pro-kip [data-g="studyo"] .etiket-vurgu {
  background-image:none!important;
  -webkit-text-fill-color:currentColor!important;
  color:var(--metin)!important;
  text-shadow:none!important;
}
/* ══════════════════════════════════════════════════════════════
   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.        */
[data-g="studyo"] .fsec-ik {
  width:18px;height:18px;flex:none;color:var(--ikincil);
  /* SVG'ler hairline çiziyor; yarım piksel hizasızlığı
     kalınlık farkı gibi görünüyor. */
  shape-rendering:geometricPrecision;
}
[data-g="studyo"] .fsec > .fsec-ik, [data-g="studyo"] .pf-oblak > .fsec-ik, [data-g="studyo"] .db-baslik > .fsec-ik, [data-g="studyo"] .cerceve-ara-baslik > .fsec-ik, [data-g="studyo"] .pane-title > .fsec-ik {
  box-sizing:content-box;
  padding:7px;border-radius:9px;
  background:color-mix(in srgb, var(--ikincil) 11%, transparent);
  border:1px solid color-mix(in srgb, var(--ikincil) 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);
}
[data-g="studyo"] .pane-title > .fsec-ik {width:22px;height:22px;padding:9px;border-radius:11px}
[data-g="studyo"] .pf-oblak > .fsec-ik {width:15px;height:15px;padding:6px;border-radius:8px;color:var(--metin-3);
  background:color-mix(in srgb, var(--metin-3) 10%, transparent);
  border-color:color-mix(in srgb, var(--metin-3) 20%, transparent)}
/* Düğme içindeki ikon kutuya girmiyor — orada zaten düğmenin
   kendi zemini var, ikinci bir kare gürültü olurdu. */
[data-g="studyo"] button > .fsec-ik, [data-g="studyo"] label > .fsec-ik {
  width:16px;height:16px;vertical-align:-3px;margin-right:5px;color:inherit;
}
[data-g="studyo"] .profil-foto-tuslar button, [data-g="studyo"] .dosya-etiket {display:inline-flex;align-items:center;justify-content:center}
/* 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 [data-g="studyo"] .fsec-ik {color:#9AA3B2}
body.pro-kip [data-g="studyo"] .fsec > .fsec-ik, body.pro-kip [data-g="studyo"] .db-baslik > .fsec-ik, body.pro-kip [data-g="studyo"] .cerceve-ara-baslik > .fsec-ik, body.pro-kip [data-g="studyo"] .pane-title > .fsec-ik {
  background:#22262D;border-color:#343A44;
}
/* ══════════════════════════════════════════════════════════════
   BİRİNCİL DÜĞME: MOR GRADYAN KALDIRILDI
   ──────────────────────────────────────────────────────────────
   `.btn-red` mor → magenta → kırmızı giden üç duraklı bir
   gökkuşağı taşıyordu (var(--altin-2) → #B85CE8 → var(--altin)). 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.                          */
[data-g="studyo"] .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%, var(--altin) 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);
}
[data-g="studyo"] .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. */
[data-g="studyo"] .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);
}
/* 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 [data-g="studyo"] .btn-red {text-shadow:none!important}
body.pro-kip [data-g="studyo"] .btn-red:active {transform:translateY(1px)}
[data-g="studyo"] .pane-title .sekme-ik, [data-g="studyo"] .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. */
[data-g="studyo"] .pane-title .sekme-ik {width:24px;height:24px;margin-right:11px;vertical-align:-4px}
/* ══════════════════════════════════════════════════════════════
   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 [data-g="studyo"] .snav.active {background:#22262D!important;color:#DCE3EC!important}
/* 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ı. */
[data-g="studyo"] #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. */
[data-g="studyo"] #tab-studyo .st-tema-noktalar {gap:0}
/* 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. */
[data-g="studyo"] .panel-baslik > .fsec-ik {
  width:16px;height:16px;flex:none;vertical-align:-3px;margin-right:7px;
  opacity:.8;color:var(--ikincil);
}
[data-g="studyo"] .panel-baslik > .btn-mini {margin-left:auto}
body.pro-kip [data-g="studyo"] .panel-baslik > .fsec-ik {color:#9AA3B2}
[data-g="studyo"] .anime-fbtn .fsec-ik {width:15px;height:15px;flex:none;opacity:.75;padding:0;background:none;border:0;box-shadow:none}
[data-g="studyo"] .anime-fbtn.aktif .fsec-ik {opacity:1}
[data-g="studyo"] #animeBaslik > .fsec-ik {width:17px;height:17px}
/* Vurgulanan sekme adı mor (`--violet`) idi: bildirim koyu ve o
   mor sitenin hiçbir yerinde vurgu değil. */
[data-g="studyo"] .oturum-bildirim b {color:var(--altin)}
[data-g="studyo"] .oturum-bildirim .fsec-ik {width:16px;height:16px;flex:none;opacity:.75}
/* Bandın üstündeki renkli tül de nötre iniyor — altındaki
   görsel griyken tül mor kalırsa şerit yine moraya çalıyor. */
body.pro-kip [data-g="studyo"] .sahne-band::after, body.pro-kip [data-g="studyo"] .sahne-band::before, body.pro-kip [data-g="studyo"] #seritAlan::after {
  background:linear-gradient(90deg,#0E1013,transparent 14%,transparent 86%,#0E1013)!important;
}
/* ── ANA SAYFADA KALAN RENKLİ YÜZEYLER ───────────────────────
   Sayfadaki her öğenin hesaplanmış stili doygunluk eşiğiyle
   tarandı; kipte kalan dört küme şunlardı:
     · `.mk-kart` — keşfet kartlarının arka plan parlaması
       (her karta ayrı renk: kırmızı, mor, altın…)
     · `.mf-soz` — manifesto vurgu sözü (pembe gradyanlı yazı)
     · `.uyg-dugme.benim` — kullanıcının kendi işletim sistemine
       ait indirme düğmesinin vurgusu
   Üçü de rengini GÖMÜLÜ taşıyor, yani palet değişkenini
   değiştirmek onlara ulaşmıyor — bu projede tekrarlayan tuzak. */
body.pro-kip [data-g="studyo"] .mk-kart {
  background-image:linear-gradient(160deg,rgba(255,255,255,.045),transparent 58%)!important;
}
/* ══════════════════════════════════════════════════════════════
   UYGULAMADA STÜDYONUN ÜST ALANI
   ──────────────────────────────────────────────────────────────
   ÖLÇÜLDÜ (uygulama penceresi 1214×830): "‹ Kanallar" geri
   düğmesi y=44, "Ses Stüdyosu" başlığı y=85 (40px), açıklama
   y=139 — ve çizelge ancak y=542'de başlıyor. Yani bir DAW'ın
   asıl çalışma alanına 288 piksel kalıyor, üstteki 130 piksel
   ise kullanıcının zaten bildiği şeyi tekrar ediyor: hangi
   bölümde olduğunu sol şerit (vurgulu ikon) ve üst sekme
   ("Ses Stüdyosu") söylüyor.

   Sitede bu başlık gerekli — orada sekme adı görünmüyor.
   Uygulamada gereksiz, o yüzden kural `body.uygulamada` ile
   sınırlı. Açıklama metni de ilk açılışta öğretici, yirminci
   açılışta sadece yer kaplıyor.

   GERİ DÜĞMESİ KALIYOR: odak moduna geçildiğinde sol şerit de
   gizleniyor ve geri dönüşün tek yolu o düğme. */
body.uygulamada [data-g="studyo"] #tab-studyo > .pane-title, body.uygulamada [data-g="studyo"] #tab-studyo > .fnote {display:none}
/* "‹ KANALLAR" GERİ DÜĞMESİ UYGULAMADA GEREKSİZ — VE ZARARLI.
   ÖLÇÜLDÜ: uygulamada stüdyo zaten odak modunda açılıyor
   (`body.st-odak`, site yan menüsü 0 piksel) çünkü gezinmeyi
   uygulamanın kendi sol şeridi ve üst sekmeleri veriyor.
   Düğmeye basmak odak modunu kapatıp SİTE menüsünü geri
   getiriyor: o anda ekranda iki ayrı menü oluyor (uygulamanın
   şeridi + sitenin kenar çubuğu) ve hangisinin ne olduğu
   anlaşılmıyor. Üstelik düğme tek başına 33 piksellik bir satır
   yiyor — bir DAW'da o piksel çizelgenin. */
body.uygulamada [data-g="studyo"] #tab-studyo .st-odak-don {display:none!important}
[data-g="studyo"] .kt-onay .fnote {grid-column:2;margin:0}
[data-g="studyo"] .kt-kart-alt .btn-mini {flex:none}
[data-g="studyo"] .kt-onay .fnote {font-size:11.5px;line-height:1.45;color:var(--metin-3);font-weight: 400}
[data-g="studyo"] #sesSesTus.kapali .fsec-ik {position:relative}
/* Mali-T720'de en pahalı şey bu. Düz yarı saydam zemin, aynı
   "cam" hissini bulanıklık olmadan veriyor. */
body.hafif [data-g="studyo"] #topnav, body.hafif [data-g="studyo"] .mark-ic, body.hafif [data-g="studyo"] .kip-secici, body.hafif [data-g="studyo"] .st-ust-bar, body.hafif [data-g="studyo"] .sistem-bildirim, body.hafif [data-g="studyo"] .st-fx-panel, body.hafif [data-g="studyo"] .doom-ipucu, body.hafif [data-g="studyo"] .doom-katman, body.hafif [data-g="studyo"] .bg-ilerleme, body.hafif [data-g="studyo"] .leke-islem {backdrop-filter:none!important; -webkit-backdrop-filter:none!important}
/* Gölge kalıyor ama TEK katman ve yayılması dar: 550 öğede
   çok katmanlı gölge, her boyamada ayrı ayrı hesaplanıyor. */
body.hafif [data-g="studyo"] .card, body.hafif [data-g="studyo"] .panel, body.hafif [data-g="studyo"] .btn-red, body.hafif [data-g="studyo"] .mk-kart, body.hafif [data-g="studyo"] .uye-kart {box-shadow:0 1px 3px rgba(0,0,0,.28)!important}
/* Geçişler kısalıyor, kapanmıyor: kapatılırsa arayüz "kırılıyor"
   gibi hissettiriyor ve hangi öğenin değiştiği anlaşılmıyor.
   Evrensel değil, GERÇEKTEN geçişi olanlara yazılıyor. */
body.hafif [data-g="studyo"] .card, body.hafif [data-g="studyo"] .panel, body.hafif [data-g="studyo"] .snav, body.hafif [data-g="studyo"] .nav-btn, body.hafif [data-g="studyo"] .btn-red, body.hafif [data-g="studyo"] .btn-outline, body.hafif [data-g="studyo"] .btn-mini, body.hafif [data-g="studyo"] .tabpane, body.hafif [data-g="studyo"] .mk-kart, body.hafif [data-g="studyo"] .uye-kart {transition-duration:.08s!important}
[data-g="studyo"] .btn-red.kayitta {background:#c81e36;animation:doNabiz 1.1s ease infinite}
/* Hafif kipte bu nabız da dursun. */
body.hafif [data-g="studyo"] .btn-red.kayitta {animation:none}
/* ═══ PORT SONRASI DÜZELTMELER ═══ */
[data-g="studyo"] .st-odak-don { display: none !important; }
body.st-odak [data-g="studyo"] .st-odak-don {
  display: grid !important; place-items: center;
  position: fixed; top: 12px; left: 12px; z-index: 60;
  width: 38px; height: 38px; border-radius: 6px;
  background: var(--gece-2); border: 1px solid var(--kenar-2); color: var(--metin);
}
/* Kanal şeridindeki M/S/R/FX/A tuşları alt alta diziliyordu */
[data-g="studyo"] .st-kb-tus { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
[data-g="studyo"] .st-mini {
  width: 24px; height: 24px; min-width: 24px; padding: 0;
  display: grid; place-items: center; border-radius: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 9.5px; font-weight: 700;
  background: rgba(255,255,255,.05); border: 1px solid var(--kenar-2);
  color: var(--metin-2); cursor: pointer; line-height: 1;
}
[data-g="studyo"] .st-mini:hover { background: rgba(255,255,255,.1); color: var(--metin); }
[data-g="studyo"] .st-mini.kirmizi { background: var(--altin); border-color: var(--altin); color: #fff; }
[data-g="studyo"] .st-mini.sari { background: var(--ikincil); border-color: var(--ikincil); color: #16110A; }
[data-g="studyo"] .st-mini svg { width: 11px; height: 11px; }

/* Kayıt düğmesi: içindeki SVG ölçüsüz kalınca kırmızı kare gibiydi */
[data-g="studyo"] .st-tus.kayit {
  position: relative; background: transparent; border-color: rgba(var(--altin-rgb), .5);
}
[data-g="studyo"] .st-tus.kayit::before {
  content: ""; width: 15px; height: 15px; border-radius: 50%;
  background: var(--altin); box-shadow: 0 0 12px rgba(var(--altin-rgb), .8);
  transition: border-radius .2s, transform .2s;
}
[data-g="studyo"] .st-tus.kayit > * { display: none; }
[data-g="studyo"] .st-tus.kayit:hover { border-color: var(--altin); background: rgba(var(--altin-rgb), .12); }
[data-g="studyo"] .st-tus.kayit.kaydediyor::before {
  border-radius: 4px; transform: scale(.85); animation: stKayitNabiz 1.1s ease-in-out infinite;
}
@keyframes stKayitNabiz { 50% { opacity: .4; } }

/* Bölüm kendi başlığını basıyordu; üst barda zaten yazıyor */
[data-g="studyo"] .pane-title { display: none; }
[data-g="studyo"] > .fnote:first-of-type {
  margin: 0 0 16px; font-size: .84rem; color: var(--metin-2); line-height: 1.55;
}
[data-g="studyo"] input[type="range"] { accent-color: var(--altin); height: 18px; }

/* ═══ DOKUNMA HEDEFLERİ — telefon ═══
   Bu dosya uye.css'ten sonra yükleniyor, o yüzden oradaki
   mobil kuralları eziyordu. Stüdyoya özgü öğeler burada
   büyütülüyor: tema noktaları 16px, master kaydırıcılar
   18px ve mini tuşlar 24px'ti — parmakla tutulmuyordu. */
@media (pointer: coarse) {
  [data-g="studyo"] .st-mini {
    width: 34px; height: 34px; min-width: 34px; font-size: 11px;
  }
  [data-g="studyo"] .st-mini svg { width: 14px; height: 14px; }
  [data-g="studyo"] .st-tema-nokta { width: 32px; height: 32px; }
  [data-g="studyo"] input[type="range"],
  [data-g="studyo"] .st-master-kaydir,
  [data-g="studyo"] .st-master-pan { height: 32px; }
  [data-g="studyo"] input[type="checkbox"],
  [data-g="studyo"] input[type="radio"] { width: 24px; height: 24px; }
  [data-g="studyo"] .st-tus { min-width: 44px; min-height: 44px; }
  [data-g="studyo"] .st-arac { min-height: 44px; }
  [data-g="studyo"] .btn-mini { min-height: 40px; }
}