/* ═══════════════════════════════════════════════════════════════════════
   OCTA STUDIO — SPECTRUM (2026-08, sifirdan tasarim)
   spectrum.css UZERINE biner (token/taban/buton/mikro-etiket oradan gelir).

   YAPI DEGISIKLIGI (eskisi: ust sekmeler + ortada tek kart + altta serit):
     ┌────┬──────────────────────────┬────────┐
     │RAY │        SAHNE             │ RIHTIM │   ray  = dikey gezinme + kimlik
     │    │  create/library/reels/   │ motor  │   sahne= aktif gorunum
     │    │  artist/playlist         │ +son   │   rihtim= KALICI motor durumu
     ├────┴──────────────────────────┴────────┤          + son render'lar
     │            TASIMA (calar)              │   -> uretim izlenirken kutuphane
     └────────────────────────────────────────┘      gezilebiliyor
   Gövde normal akar; ray/rihtim/calar FIXED -> mevcut kaydirma davranisi
   (reels feed, yorum listesi) hic bozulmaz.
   ⚠️ JS'e dokunulmadi: tum id'ler ve sinif sozlesmesi (.song/.cov/.info/
   .rc/.plc/.reel/.rv/.rside/.ract/.trow/.cmi/.fitem...) korunur.
   ═══════════════════════════════════════════════════════════════════════ */

/* ⚠️ spectrum.css BILEREK LINKLENMEZ: katalog katmanindaki .rc/.pbtn/.ptrack/
   .cover studio'nun calar ve son-render bilesenleriyle ayni adi tasiyor ve
   sessizce cakisiyor. Token/taban blogu burada tekrarlanir — 30 satir kopya,
   sifir cakisma. Degerler spectrum.css ile BIREBIR ayni tutulmali. */
:root{
  --ink:#08080c; --ink2:#0c0c12; --ink3:#111119;
  --tx:#f7f7fb; --tx2:#a6a8b8; --tx3:#787a8c;
  --line:rgba(255,255,255,.085); --line2:rgba(255,255,255,.05);
  --glass:rgba(255,255,255,.038);
  --rose:#ff6f8f; --coral:#ff9c66; --gold:#ffd089;
  --aqua:#67e8cf; --azure:#57a9ff; --iris:#9d7bff;
  --spec:linear-gradient(100deg,#ff9c66 0%,#ff6f8f 22%,#9d7bff 54%,#57a9ff 76%,#67e8cf 100%);
  --r1:14px; --r2:22px; --r3:32px;
  --e:cubic-bezier(.22,1,.36,1);
  --eio:cubic-bezier(.68,0,.22,1);
  --f:'Inter Tight',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --fs:'Instrument Serif',Georgia,'Times New Roman',serif;
  --rail:80px; --dock:320px; --tp:74px;      /* ray / rihtim / tasima yuksekligi */
  --sur:rgba(255,255,255,.028);
  --sur2:rgba(255,255,255,.05);
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:dark;scrollbar-width:thin;scrollbar-color:#22222e #08080c}
body{background:var(--ink);color:var(--tx);font-family:var(--f);font-size:16px;line-height:1.6;
  letter-spacing:-.011em;font-weight:400;-webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;overflow-x:hidden;padding-bottom:calc(var(--tp) + 16px)}
::selection{background:rgba(157,123,255,.32);color:#fff}
:focus-visible{outline:2px solid rgba(157,123,255,.65);outline-offset:3px;border-radius:4px}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#22222e;border-radius:8px;border:2px solid #08080c}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
h1,h2,h3,h4{font-weight:600;letter-spacing:-.03em;line-height:1.03}
input,textarea{font:inherit}
/* ambient alan — landing ile AYNI shader (/spectrum.js cizer).
   Uygulama yuzeyi oldugu icin hafif kisik ama renk kimligi birebir. */
#field{position:fixed;inset:0;z-index:-6;width:100%;height:100%;display:block;opacity:.66}
#fieldfb{position:fixed;inset:0;z-index:-6;display:none;
  background:radial-gradient(58% 46% at 78% 2%,rgba(168,72,255,.32),transparent 64%),
             radial-gradient(60% 48% at 92% 62%,rgba(41,135,255,.26),transparent 64%),
             linear-gradient(180deg,#0a0a12,#08080c 52%,#0a0910)}
.dither{position:fixed;inset:0;z-index:-4;pointer-events:none;opacity:.03;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E")}
.vign{position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:radial-gradient(150% 112% at 50% 38%,transparent 46%,rgba(4,4,8,.5) 100%)}
.hidden{display:none!important}
.hidden2{display:none!important}

/* ─────────── RAY (sol dikey) ─────────── */
.rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:40;
  display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 0 14px;
  background:linear-gradient(180deg,rgba(10,10,16,.72),rgba(8,8,13,.86));
  backdrop-filter:blur(22px) saturate(170%);-webkit-backdrop-filter:blur(22px) saturate(170%);
  border-right:1px solid var(--line2)}
.rbrand{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;flex:none;
  margin-bottom:12px;transition:background .35s}
.rbrand:hover{background:rgba(255,255,255,.06)}
.rbrand svg{width:26px;height:26px;transition:transform .8s var(--e);
  filter:drop-shadow(0 0 9px rgba(90,190,240,.4)) drop-shadow(0 2px 11px rgba(140,110,250,.32))}
.rbrand:hover svg{transform:rotate(120deg)}

.rnav{display:flex;flex-direction:column;gap:4px;width:100%;align-items:center}
.rnav button{position:relative;width:58px;height:58px;border-radius:16px;display:grid;
  place-items:center;gap:4px;grid-template-rows:auto auto;color:var(--tx3);
  transition:color .3s,background .3s}
.rnav button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.rnav button i{font-style:normal;font-size:8.5px;font-weight:500;letter-spacing:.13em;
  text-transform:uppercase}
.rnav button:hover{color:var(--tx2);background:rgba(255,255,255,.045)}
.rnav button.on{color:#fff;background:rgba(255,255,255,.075)}
.rnav button.on::before{content:"";position:absolute;left:-16px;top:16px;bottom:16px;width:2.5px;
  border-radius:0 3px 3px 0;background:var(--spec);box-shadow:0 0 14px rgba(157,123,255,.75)}
.rnav button b{position:absolute;top:7px;right:9px;font-size:9px;font-weight:600;color:#a9abbd;
  font-variant-numeric:tabular-nums;letter-spacing:0}
.rnav button b:empty{display:none}

.rfoot{margin-top:auto;display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.rfoot::before{content:"";width:34px;height:1px;background:var(--line2);margin-bottom:6px}
/* kredi olcegi — sayi + ince kadran */
.credchip{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  cursor:pointer;font-size:8px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:var(--tx3);line-height:1.15;text-align:center;transition:color .3s}
.credchip::after{content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .35s}
.credchip:hover{color:var(--tx2)}
.credchip:hover::after{box-shadow:inset 0 0 0 1px rgba(157,123,255,.5)}
.credchip b{display:block;font-size:15px;font-weight:600;letter-spacing:-.02em;color:#f1f2f8;
  font-variant-numeric:tabular-nums}
.sgear{width:40px;height:40px;border-radius:13px;display:grid;place-items:center;color:var(--tx3);
  transition:color .3s,background .3s}
.sgear:hover{color:#fff;background:rgba(255,255,255,.06)}
.uchip,.sout{display:none}                 /* raya sigmaz — ayarlarda zaten var */

/* ─────────── SAHNE ───────────
   .shell rayin yanindaki tum alani tutar; rihtim DOM'da sahneden ONCE gelir
   ki genis ekranda fixed cikinca sirasi onemsiz olsun, dar ekranda static
   olunca sahnenin USTUNDE aksin. */
.shell{margin-left:var(--rail);padding:clamp(24px,3.2vw,42px) clamp(18px,2.6vw,40px) 26px}
.stage{margin-right:var(--dock);min-height:calc(100svh - 120px)}
.stage > *{max-width:1180px;margin-left:auto;margin-right:auto}

/* ─────────── RIHTIM (sag, kalici motor) ─────────── */
.dock{position:fixed;right:0;top:0;bottom:var(--tp);width:var(--dock);z-index:38;
  display:flex;flex-direction:column;padding:20px 18px 14px;gap:16px;overflow:hidden;
  background:linear-gradient(180deg,rgba(10,10,16,.6),rgba(8,8,13,.8));
  backdrop-filter:blur(22px) saturate(160%);-webkit-backdrop-filter:blur(22px) saturate(160%);
  border-left:1px solid var(--line2)}
/* ⚠️ Etiket yanindaki parlayan durum NOKTASI kaldirildi (kullanici karari 04 Ağu:
   "hicbir yerde istemiyorum"). Yeni etiket eklerken nokta/pulse koyma. */
.dkick{display:flex;align-items:center;gap:10px;font-size:9.5px;font-weight:500;letter-spacing:.22em;
  text-transform:uppercase;color:#5f6174}

/* motor karti — orb + halka + durum */
.engine{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:15px;
  align-items:center;padding:16px;border-radius:var(--r2);
  background:var(--sur);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.engine::before{content:"";position:absolute;left:14%;right:14%;top:0;height:1.2px;
  background:var(--spec);opacity:.6}
.ewrap{position:relative;width:62px;height:62px;flex:none}
.ewrap canvas{position:absolute;inset:5px;width:calc(100% - 10px);height:calc(100% - 10px);
  border-radius:50%;display:block}
.ering{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.ering .bgc{fill:none;stroke:rgba(255,255,255,.09);stroke-width:2}
/* ⚠️ SIFIR uzunlukta cizgi + stroke-linecap:round = baslangic noktasinda PARLAYAN
   NOKTA cizilir (bosta duran halkada "o nokta"). Bostayken opacity:0; ilerleme
   gelince JS 1 yapar (setProgress). Nokta kalintisi birakma. */
.ering .fgc{fill:none;stroke:url(#egrad);stroke-width:2;stroke-linecap:round;opacity:0;
  stroke-dasharray:125.6;stroke-dashoffset:125.6;
  transition:stroke-dashoffset .5s var(--e),opacity .3s var(--e);
  filter:drop-shadow(0 0 5px rgba(157,123,255,.6))}
.etxt{min-width:0}
.etxt b{display:block;font-size:13px;font-weight:600;letter-spacing:-.01em;color:#f1f2f8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.etxt span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx3)}

/* telemetri */
.telemetry{display:grid;grid-template-columns:1fr 1fr;gap:1px;border-radius:var(--r1);overflow:hidden;
  background:var(--line2)}
.telemetry span{display:block;padding:11px 12px;background:#0a0a10;font-size:8.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#5f6174}
.telemetry b{display:block;margin-top:4px;font-size:11px;font-weight:550;letter-spacing:.02em;color:#c8cad8}

/* son render'lar — dikey liste */
.drec{display:flex;flex-direction:column;gap:10px;min-height:0;flex:1}
.rcx{display:flex;flex-direction:column;gap:3px;overflow-y:auto;min-height:0;
  margin:0 -8px;padding:0 8px;scrollbar-width:thin}
.rcx > .lib-sub{padding:14px 2px;font-size:12px;color:var(--tx3);letter-spacing:0;text-transform:none}
.rc{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;align-items:center;
  padding:7px 8px;border-radius:11px;cursor:pointer;transition:background .3s}
.rc:hover{background:rgba(255,255,255,.055)}
.rcov{position:relative;width:38px;height:38px;border-radius:8px;overflow:hidden;flex:none;
  background:#12121a;box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.rcov img{width:100%;height:100%;object-fit:cover}
.rp{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;
  background:rgba(6,6,11,.55);backdrop-filter:blur(3px);transition:opacity .3s}
.rc:hover .rp{opacity:1}
.rc b{font-size:12.5px;font-weight:500;letter-spacing:-.012em;color:#dcdeea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ═══════════ CREATE ═══════════ */
#viewCreate{position:relative}
.engine-field{position:absolute;left:50%;top:-40px;width:min(1100px,116%);height:520px;z-index:0;
  transform:translateX(-50%);opacity:.5;pointer-events:none}
#viewCreate > *:not(.engine-field){position:relative;z-index:1}

.chead{margin-bottom:clamp(20px,2.6vw,30px)}
.chead h1{font-size:clamp(26px,3.4vw,44px);letter-spacing:-.036em;line-height:1.04;margin-top:16px}

/* konsol — tek parca alet; ic ayirici olarak kil payi cizgiler */
.console{position:relative;border-radius:clamp(20px,2.4vw,30px);overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.018) 46%,rgba(255,255,255,.028));
  box-shadow:0 40px 110px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.07),
             inset 0 1px 0 rgba(255,255,255,.09)}
.console::before{content:"";position:absolute;left:9%;right:9%;top:0;height:1.4px;z-index:3;
  background:var(--spec);opacity:.75;transition:opacity .5s}
.console.busy::before{opacity:1;animation:cpulse 1.5s var(--e) infinite}
@keyframes cpulse{0%,100%{opacity:.55}50%{opacity:1}}

.c-top{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(16px,2vw,24px);border-bottom:1px solid var(--line2)}
/* mod secici — hap degil, kil-payi bolmeli ray */
.srail{display:inline-flex;padding:3px;border-radius:99px;gap:2px;
  background:rgba(0,0,0,.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.srail button{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:99px;
  font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3);
  white-space:nowrap;transition:color .3s,background .35s}
.srail button:hover{color:var(--tx2)}
.srail button.on{color:#0a0a11;background:var(--spec);font-weight:600}
.srail.seg button{padding:7px 13px;font-size:10px;letter-spacing:.12em}
.c-top .engine{display:none}          /* motor artik rihtimda */

/* 🚨 JS'IN CALISMA ANINDA URETTIGI KONUMLANDIRILMIS OGELER
   Bunlar statik HTML'de YOK; CSS'te position verilmezse AKISA girer ve
   kendi ebeveyninden boyut aldiklari icin KENDINI BESLEYEN buyume dongusune
   duserler (bizzat olculdu: .edgeglow 33.554.445 px -> konsol 26 milyon px
   yuksekliginde, alttaki her sey ekran disina itildi).
   Yeni bir kabuk yazarken JS'in urettigi sinif adlarini MUTLAKA tara. */
.edgeglow{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);
  pointer-events:none;z-index:2}
.cta .csmk{position:absolute;inset:-8px;z-index:-1;pointer-events:none;
  filter:blur(11px) saturate(1.3);opacity:.5}
/* kayan gosterge KAPALI: aktif durumu .on gradyani veriyor, ikisi cakisirdi */
.srail .ind{display:none!important}

/* prompt — kahraman yuzey */
.promptshell{position:relative;padding:clamp(18px,2.4vw,28px) clamp(16px,2vw,24px) 0}
.surface{position:relative}
.aura{position:absolute;left:50%;top:50%;width:min(640px,104%);height:230px;z-index:0;
  transform:translate(-50%,-50%);opacity:.55;pointer-events:none;filter:blur(16px) saturate(1.4);
  -webkit-mask-image:radial-gradient(58% 58% at 50% 50%,#000 24%,transparent 76%);
  mask-image:radial-gradient(58% 58% at 50% 50%,#000 24%,transparent 76%)}
#fPrompt{position:relative;z-index:1;display:block;width:100%;min-height:118px;resize:none;
  background:none;border:0;outline:none;color:#f4f5fa;font-family:var(--f);
  font-size:clamp(18px,2vw,23px);line-height:1.45;letter-spacing:-.022em;
  padding:0 46px 0 0;text-shadow:0 2px 22px rgba(0,0,0,.5)}
#fPrompt::placeholder{color:#5e6076}
.charring{position:absolute;right:0;top:2px;z-index:2;width:24px;height:24px;pointer-events:none}
.charring svg{width:100%;height:100%;transform:rotate(-90deg)}
.charring .b{fill:none;stroke:rgba(255,255,255,.1);stroke-width:2}
.charring .f{fill:none;stroke:url(#egrad);stroke-width:2;stroke-linecap:round;opacity:0;
  stroke-dasharray:62.8;stroke-dashoffset:62.8;
  transition:stroke-dashoffset .3s linear,opacity .25s var(--e)}   /* bkz. .ering .fgc notu */
/* oneriler — hap degil, metin baglantilari */
.chips{position:relative;z-index:1;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
.chips button{font-size:12.5px;font-weight:450;color:#767890;letter-spacing:-.008em;
  transition:color .3s}
.chips button::before{content:"→ ";color:#4e5064}
.chips button:hover{color:#d6d8e6}

.siglinewrap{position:relative;height:26px;margin:2px clamp(16px,2vw,24px) 0}
#sigCanvas{width:100%;height:100%;display:block}

/* kaynak satiri (cover/extend) */
.srcline{display:flex;align-items:center;gap:13px;margin:0 clamp(16px,2vw,24px);padding:11px 13px;
  border-radius:var(--r1);cursor:pointer;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);transition:box-shadow .35s,background .35s}
.srcline:hover{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(157,123,255,.45)}
.thumb{width:40px;height:40px;border-radius:9px;flex:none;background:#12121a center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.srcline .st{flex:1;min-width:0}
.srcline .st b{display:block;font-size:13.5px;font-weight:550;color:#eceef6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.srcline .st span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.chev{font-size:9.5px;font-weight:500;letter-spacing:.16em;color:#8a8ca0}

/* extend zaman cizelgesi */
.exttl{display:flex;align-items:center;gap:14px;margin:12px clamp(16px,2vw,24px) 0}
.et-lab,.et-max{font-size:9px;font-weight:500;letter-spacing:.18em;text-transform:uppercase;
  color:var(--tx3);white-space:nowrap}
.et-track{position:relative;flex:1;height:34px;cursor:pointer}
.et-ticks{position:absolute;left:0;right:0;top:50%;height:16px;transform:translateY(-50%);
  display:flex;align-items:center;justify-content:space-between;opacity:.5}
.et-ticks i{width:1px;height:7px;background:rgba(255,255,255,.24)}
.et-ticks i:nth-child(5n+1){height:13px;background:rgba(255,255,255,.4)}
.et-track::before{content:"";position:absolute;left:0;right:0;top:50%;height:2.5px;
  transform:translateY(-50%);border-radius:2px;background:rgba(255,255,255,.09)}
.et-fill{position:absolute;left:0;top:50%;height:2.5px;transform:translateY(-50%);border-radius:2px;
  background:var(--spec);box-shadow:0 0 12px rgba(157,123,255,.6)}
.et-knob{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;
  background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.6),0 0 0 3px rgba(157,123,255,.28)}
.et-knob b{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);
  font-size:10px;font-weight:600;color:#eceef6;font-variant-numeric:tabular-nums;
  background:rgba(10,10,16,.85);padding:3px 7px;border-radius:6px;white-space:nowrap;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}

/* sozler */
.lyrline{margin:14px clamp(16px,2vw,24px) 0}
.lyrbtn{display:inline-flex;align-items:baseline;gap:9px;font-size:11px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#8f91a6;transition:color .3s}
.lyrbtn:hover{color:#d6d8e6}
.lyrbtn i{font-style:normal;font-size:11px;letter-spacing:0;text-transform:none;color:#5e6076}
.lyrbox{margin-top:14px}
.structure{display:flex;flex-wrap:wrap;gap:5px 16px;margin-bottom:11px}
.stag{display:inline-flex;align-items:center;gap:7px;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#7c7e92;transition:color .3s}
.stag i{width:6px;height:6px;border-radius:2px;background:var(--tg,#9d7bff)}
.stag:hover{color:#e2e4f0}
.tg-intro{--tg:#67e8cf}.tg-verse{--tg:#57a9ff}.tg-chorus{--tg:#ff6f8f}
.tg-bridge{--tg:#9d7bff}.tg-hook{--tg:#ffd089}.tg-outro{--tg:#8a8c9e}
.lyrshell{border-radius:var(--r1);background:rgba(0,0,0,.26);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.lyred{position:relative;min-height:150px}
.lyred pre,.lyred textarea{margin:0;padding:14px 16px;font-family:var(--f);font-size:14.5px;
  line-height:1.75;letter-spacing:-.004em;white-space:pre-wrap;word-break:break-word;border:0}
.lyred pre{position:absolute;inset:0;color:#c3c5d4;pointer-events:none;overflow:hidden}
.lyred pre b{font-weight:500;color:#0a0a11;background:var(--tg,#9d7bff);border-radius:4px;
  box-shadow:0 0 0 3.5px var(--tg,#9d7bff)}
.lyred textarea{position:relative;width:100%;min-height:150px;resize:vertical;background:none;
  color:transparent;caret-color:#c9b8ff;outline:none;display:block}
.lyred textarea::placeholder{color:#55576b}

/* alt konsol seridi */
.c-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:18px;
  padding:14px clamp(16px,2vw,24px);border-top:1px solid var(--line2);
  background:rgba(0,0,0,.16)}
.titlein{flex:1;min-width:180px;background:none;border:0;outline:none;color:#eceef6;
  font-family:var(--f);font-size:15px;letter-spacing:-.014em;padding:8px 0;
  border-bottom:1px solid var(--line2);transition:border-color .35s}
.titlein::placeholder{color:#5e6076}
.titlein:focus{border-bottom-color:rgba(157,123,255,.6)}
.cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:48px;padding:0 26px;border-radius:99px;overflow:hidden;cursor:pointer;
  font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:#0a0a11;
  background:var(--spec);background-size:180% 100%;
  box-shadow:0 10px 30px rgba(150,115,255,.3),inset 0 1px 0 rgba(255,255,255,.5);
  transition:background-position 1s var(--e),transform .35s var(--e),box-shadow .4s,opacity .3s}
.cta:hover{background-position:100% 50%;transform:translateY(-1px)}
.cta[disabled],.cta.busy{opacity:.6;pointer-events:none}
.cta .shine{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.4) 50%,transparent 62%);
  transform:translateX(-120%)}
.cta:hover .shine{transform:translateX(120%);transition:transform .9s var(--e)}
.cmsg{padding:0 clamp(16px,2vw,24px) 14px;font-size:12.5px;line-height:1.55;color:var(--tx2);
  min-height:0}
.cmsg:empty{display:none}
.cmsg.err{color:#ff9d9d}
.cmsg.ok{color:#7ff0cf}

/* baskalarinin urettigi muzikler — create'in alt bolgesi */
.comm{margin-top:clamp(26px,3.2vw,42px)}
.comm-h{display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding-bottom:12px;margin-bottom:16px;border-bottom:1px solid var(--line2)}
.comm-all{display:inline-flex;align-items:center;gap:8px;font-size:10px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#8f91a6;transition:color .3s}
.comm-all:hover{color:#fff}
.comm-all svg{transition:transform .4s var(--e)}
.comm-all:hover svg{transform:translateX(3px)}

/* ═══════════ LIBRARY ═══════════ */
.lib-head{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;flex-wrap:wrap;
  margin-bottom:clamp(20px,2.6vw,30px)}
.lib-head h2{font-size:clamp(24px,3vw,40px);letter-spacing:-.036em;line-height:1.05;margin-top:15px}
.lib-head h2 em{font-family:var(--fs);font-style:italic;font-weight:400;
  background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.c-kick{display:inline-flex;align-items:center;gap:11px;font-size:10.5px;font-weight:500;
  letter-spacing:.24em;text-transform:uppercase;color:var(--tx3)}
.lib-tools{display:flex;flex-direction:column;align-items:flex-end;gap:9px}
.lsearch{display:flex;align-items:center;gap:9px;padding:10px 16px;border-radius:99px;
  background:rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);
  color:var(--tx3);transition:box-shadow .35s}
.lsearch:focus-within{box-shadow:inset 0 0 0 1px rgba(157,123,255,.5)}
.lsearch input{background:none;border:0;outline:none;color:#eceef6;font-family:var(--f);
  font-size:14px;width:200px}
.lsearch input::placeholder{color:#5e6076}
.lib-sub{font-size:9px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#5f6174}

/* calma listesi seridi */
.plrow{margin-bottom:clamp(20px,2.6vw,30px)}
.plrow-h{display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding-bottom:11px;margin-bottom:13px;border-bottom:1px solid var(--line2)}
.plrow-h b{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#5f6174}
.plrow-h button{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#9a9cb0;transition:color .3s}
.plrow-h button:hover{color:#fff}
.plx{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}
.plc{flex:none;width:132px;cursor:pointer;transition:transform .4s var(--e)}
.plc:hover{transform:translateY(-3px)}
.plc .mos{display:grid;grid-template-columns:1fr 1fr;gap:1.5px;width:132px;height:132px;
  border-radius:13px;overflow:hidden;background:var(--line2);
  box-shadow:0 16px 34px rgba(0,0,0,.42),inset 0 0 0 1px rgba(255,255,255,.07)}
.plc .mos i{display:block;background:linear-gradient(135deg,var(--p1,#2a2a3a),var(--p2,#171724))}
.plc .mos img{width:100%;height:100%;object-fit:cover}
.plc b{display:block;margin-top:10px;font-size:13px;font-weight:550;letter-spacing:-.016em;
  color:#eceef6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plc > span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--tx3)}
.plc.new{display:grid;place-items:center;align-content:center;gap:10px;width:132px;height:132px;
  border-radius:13px;color:var(--tx3);background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:color .3s,box-shadow .35s}
.plc.new:hover{color:#e2e4f0;box-shadow:inset 0 0 0 1px rgba(157,123,255,.45)}
.plc.new b{margin:0;font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:inherit}

/* one cikan son render */
.featured{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;
  align-items:center;padding:18px;border-radius:var(--r2);overflow:hidden;cursor:pointer;
  margin-bottom:clamp(18px,2.2vw,26px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.fbg{position:absolute;inset:0;z-index:0;opacity:.3}
.fbg img{width:100%;height:100%;object-fit:cover;filter:blur(34px) saturate(1.5);transform:scale(1.25)}
.featured::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,8,13,.92),rgba(8,8,13,.62))}
.featured > *:not(.fbg){position:relative;z-index:2}   /* ayni tuzak (bkz. .ar-hero) */
.fcov{width:88px;height:88px;border-radius:12px;overflow:hidden;flex:none;background:#12121a;
  box-shadow:0 16px 36px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1)}
.fcov img{width:100%;height:100%;object-fit:cover}
.fmeta{min-width:0}
.fkick{display:block;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:#8f7fd8}
.fmeta h3{margin-top:7px;font-size:clamp(18px,2.1vw,26px);letter-spacing:-.03em;line-height:1.12;
  overflow-wrap:anywhere}
.fsub{display:block;margin-top:6px;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
.fplay{display:inline-flex;align-items:center;gap:9px;height:42px;padding:0 20px;border-radius:99px;
  font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#0a0a11;
  background:var(--spec);white-space:nowrap;
  box-shadow:0 8px 24px rgba(150,115,255,.28),inset 0 1px 0 rgba(255,255,255,.5)}

/* izgara */
.lgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));
  gap:clamp(13px,1.6vw,20px)}
.lsec{grid-column:1/-1;display:flex;align-items:center;gap:14px;
  margin:clamp(10px,1.4vw,18px) 0 2px;font-size:9.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:#5f6174}
.lsec::after{content:"";flex:1;height:1px;background:var(--line2)}
.song{cursor:pointer}
.song .cov{position:relative;aspect-ratio:1;border-radius:clamp(12px,1.3vw,16px);overflow:hidden;
  background:linear-gradient(140deg,var(--ph1,#2a2a3a),var(--ph2,#141420));
  box-shadow:0 18px 40px rgba(0,0,0,.44),inset 0 0 0 1px rgba(255,255,255,.07);
  transition:box-shadow .5s var(--e),transform .5s var(--e)}
.song:hover .cov{transform:translateY(-3px);
  box-shadow:0 26px 56px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.16),
             0 0 40px rgba(140,110,255,.2)}
.song .cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--e),filter .9s var(--e),opacity .9s var(--e)}
.song:hover .cov img{transform:scale(1.05)}
.song.revealing .cov img{filter:blur(20px);transform:scale(1.1);opacity:.4}
.scrim{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,transparent 44%,rgba(5,5,10,.86))}
.song .info{position:absolute;left:12px;right:12px;bottom:11px;z-index:3;display:block}
.song .info b{display:block;font-size:13px;font-weight:550;letter-spacing:-.016em;color:#f2f3f9;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 2px 10px rgba(0,0,0,.7)}
/* uzun tur adlari 2. satira tasip kapagin disina cikiyordu */
.song .info span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ply{position:absolute;left:50%;top:50%;z-index:3;width:46px;height:46px;margin:-23px 0 0 -23px;
  border-radius:50%;display:grid;place-items:center;color:#0a0a11;background:var(--spec);
  opacity:0;transform:scale(.72);box-shadow:0 8px 26px rgba(0,0,0,.5);
  transition:opacity .4s var(--e),transform .4s var(--e)}
.song:hover .ply{opacity:1;transform:scale(1)}
.song.playing .ply{opacity:1;transform:scale(1)}
.rend{position:absolute;inset:0;z-index:3;display:grid;place-items:center;align-content:center;gap:9px}
.rend canvas.smoke{position:absolute;inset:0;width:100%;height:100%;opacity:.55;filter:blur(9px)}
.rend b{position:relative;font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;
  color:#dfe1ee;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.addpl{position:absolute;top:9px;right:9px;z-index:4;width:28px;height:28px;border-radius:50%;
  display:grid;place-items:center;color:#eceef6;background:rgba(8,8,14,.6);opacity:0;
  backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);
  transition:opacity .35s,background .3s}
.song:hover .addpl{opacity:1}
.addpl:hover{background:rgba(157,123,255,.5)}

/* bos durum */
.lib-empty{position:relative;text-align:center;padding:clamp(40px,6vw,80px) 24px}
.lib-empty canvas{position:absolute;left:50%;top:40%;width:min(620px,96%);height:340px;
  transform:translate(-50%,-50%);opacity:.5;pointer-events:none}
.lib-empty > *{position:relative}
.le-rack{display:flex;justify-content:center;gap:14px;margin-bottom:34px}
.le-card{width:112px;border-radius:13px;padding:9px;background:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.07);position:relative;overflow:hidden}
.le-card .art{aspect-ratio:1;border-radius:8px;background:rgba(255,255,255,.05)}
.le-card .rows{display:grid;gap:5px;margin-top:9px}
.le-card .rows i{height:5px;border-radius:3px;background:rgba(255,255,255,.07)}
.le-card .rows i:last-child{width:62%}
.le-card .sweep{position:absolute;inset:0;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.07) 50%,transparent 60%);
  transform:translateX(-100%);animation:lesw 2.6s var(--e) infinite}
.le-card:nth-child(2) .sweep{animation-delay:.35s}
.le-card:nth-child(3) .sweep{animation-delay:.7s}
@keyframes lesw{0%{transform:translateX(-100%)}60%,100%{transform:translateX(100%)}}
.le-kick{display:block;font-size:10px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx3)}
.lib-empty h3{margin-top:15px;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.034em;line-height:1.08}
.lib-empty h3 em{font-family:var(--fs);font-style:italic;font-weight:400;
  background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.lib-empty p{max-width:46ch;margin:16px auto 26px;color:var(--tx2);font-size:15.5px;line-height:1.6}
.le-sync{display:block;margin-top:22px;font-size:9.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:#5f6174}
.le-sync b{color:#9a9cb0;font-weight:500}
.lib-nores{padding:44px 0;text-align:center;color:var(--tx2);font-size:15px}
.lib-nores button{display:block;margin:16px auto 0;font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:#9d7bff}

/* ═══════════ REELS ═══════════ */
.rl{position:relative}
.rl-ctx{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.rl-ctx b{font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:#c8cad8}
.rl-ctx button{font-size:9.5px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#9d7bff}
.rl-feed{height:calc(100svh - var(--tp) - 90px);overflow-y:auto;scroll-snap-type:y mandatory;
  scrollbar-width:none;border-radius:var(--r2)}
.rl-feed::-webkit-scrollbar{display:none}
/* eylem sutunu videonun YANINDA dursun: kolonlari icerige gore olcup ortala
   (1fr verilince video ortalaniyor ama butonlar sag kenara firliyordu). */
.reel{position:relative;display:grid;grid-template-columns:auto auto;justify-content:center;gap:18px;
  align-items:center;height:calc(100svh - var(--tp) - 90px);scroll-snap-align:center}
.rv{position:relative;height:100%;aspect-ratio:9/16;max-width:min(430px,calc(100vw - 190px));
  border-radius:var(--r2);overflow:hidden;background:#05050a;cursor:pointer;
  box-shadow:0 40px 100px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
/* JS'in urettigi yukleme dugmesi (statik HTML'de yok) */
.rl-upload{position:absolute;top:0;right:0;z-index:6;display:inline-flex;align-items:center;gap:8px;
  height:38px;padding:0 18px;border-radius:99px;font-size:9.5px;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:#0a0a11;background:var(--spec);
  box-shadow:0 8px 24px rgba(150,115,255,.28);transition:transform .35s var(--e)}
.rl-upload:hover{transform:translateY(-1px)}
.rv video{width:100%;height:100%;object-fit:cover;display:block}
.rscrim{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(5,5,10,.6),transparent 24%,transparent 52%,rgba(5,5,10,.88))}
.rtop{position:absolute;left:14px;right:14px;top:13px;display:flex;align-items:center;
  justify-content:space-between;font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:rgba(255,255,255,.72)}
.rvw{display:inline-flex;align-items:center;gap:6px}
.rmeta{position:absolute;left:16px;right:16px;bottom:16px;display:grid;gap:9px}
.ruser{display:inline-flex;align-items:center;gap:9px;cursor:pointer;width:max-content}
.rava{width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;
  box-shadow:0 0 0 1px rgba(255,255,255,.24)}
.rava img{width:100%;height:100%;object-fit:cover}
.avph{width:100%;height:100%;display:grid;place-items:center;font-size:12px;font-weight:600;
  color:#0d0d16;background:linear-gradient(135deg,var(--p1,#9d7bff),var(--p2,#57a9ff))}
.ruser b{font-size:13.5px;font-weight:600;letter-spacing:-.018em;color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.7)}
.rdesc{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.86);max-width:36ch;
  text-shadow:0 2px 10px rgba(0,0,0,.7);overflow-wrap:anywhere}
.rmusic{display:inline-flex;align-items:center;gap:9px;width:max-content;max-width:100%;
  padding:6px 13px 6px 6px;border-radius:99px;color:#eceef6;background:rgba(8,8,14,.55);
  backdrop-filter:blur(9px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  font-size:12px;font-weight:500;transition:box-shadow .35s}
.rmusic:hover{box-shadow:inset 0 0 0 1px rgba(157,123,255,.6)}
.rmusic .mc{width:24px;height:24px;border-radius:6px;overflow:hidden;flex:none;background:#12121a}
.rmusic .mc img{width:100%;height:100%;object-fit:cover}
.rmusic span:not(.mc){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 🚨 .rpp span ve .bigheart svg'yi GSAP animasyonu surer (JS bunlari
   querySelector ile bulup opacity/scale tweenler). CSS yalniz BASLANGIC
   durumunu verir — durum sinifi UYDURMA, yoksa gosterge hic gorunmez. */
.rpp{position:absolute;inset:0;z-index:2;display:grid;place-items:center;pointer-events:none}
.rpp span{width:70px;height:70px;border-radius:50%;display:grid;place-items:center;color:#fff;
  opacity:0;transform:scale(.6);background:rgba(8,8,14,.5);backdrop-filter:blur(9px);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.bigheart{position:absolute;inset:0;z-index:5;display:grid;place-items:center;pointer-events:none}
.bigheart svg{opacity:0;filter:drop-shadow(0 6px 24px rgba(240,120,200,.55))}
/* aktif reel one cikar */
.reel .rv{transform:scale(.985);opacity:.7;transition:transform .6s var(--e),opacity .5s var(--e)}
.reel.act .rv{transform:scale(1);opacity:1}
.rprog{position:absolute;left:0;right:0;bottom:0;height:2.5px;background:rgba(255,255,255,.14)}
.rprog i{display:block;height:100%;width:0%;background:var(--spec)}
.rside{display:flex;flex-direction:column;gap:18px;align-items:center;padding-right:4px}
.ract{display:grid;justify-items:center;gap:6px;color:#c8cad8;transition:color .3s}
.ract span{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;position:relative;
  background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
  transition:background .3s,box-shadow .3s,transform .35s var(--e)}
.ract:hover span{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.ract svg{width:19px;height:19px}
.ract b{font-size:9.5px;font-weight:500;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.ract.rlike.on{color:#ff6f8f}
.ract.rlike.on span{background:rgba(255,111,143,.16);box-shadow:inset 0 0 0 1px rgba(255,111,143,.42)}
.burst{position:absolute;inset:0;border-radius:50%;pointer-events:none;opacity:0;
  box-shadow:0 0 0 0 rgba(255,111,143,.6)}
.ract.rlike.on .burst{animation:bst .55s var(--e)}
@keyframes bst{0%{opacity:1;box-shadow:0 0 0 0 rgba(255,111,143,.55)}
  100%{opacity:0;box-shadow:0 0 0 22px rgba(255,111,143,0)}}
/* ses ikonu: 'muted' sinifi .rl-feed UZERINDE (reel'de degil) */
.rl-feed.muted .von{display:none}
.rl-feed:not(.muted) .voff{display:none}
.rl-hint{display:block;margin-top:12px;text-align:center;font-size:9px;font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;color:#4e5064}
.rskel,.rl-empty{padding:60px 0;text-align:center;color:var(--tx3);font-size:12px;
  letter-spacing:.16em;text-transform:uppercase}

/* ═══════════ ARTIST / PLAYLIST ═══════════ */
.ar-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:20px;font-size:9.5px;
  font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:#8f91a6;transition:color .3s}
.ar-back:hover{color:#fff}
.ar-hero{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;
  align-items:center;padding:clamp(22px,2.8vw,34px);border-radius:var(--r3);overflow:hidden;
  margin-bottom:clamp(22px,2.8vw,34px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.ar-bgart{position:absolute;inset:0;z-index:0;opacity:.26;background-size:cover;background-position:center;
  filter:blur(40px) saturate(1.5);transform:scale(1.2)}
.ar-hero::after{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(100deg,rgba(8,8,13,.9),rgba(8,8,13,.6))}
/* 🚨 :not(.ar-bgart) SART — "> *" ile ".ar-bgart" AYNI ozgullukte (0,1,0) ve
   sonra geldigi icin position:absolute'u eziyordu. Arka plan katmani IZGARA
   OGESINE donusup 4. hucreyi aliyor, kahraman parcalaniyordu (olculdu). */
.ar-hero > *:not(.ar-bgart){position:relative;z-index:2}
.ar-ava{width:clamp(76px,9vw,108px);height:clamp(76px,9vw,108px);border-radius:50%;overflow:hidden;
  display:grid;place-items:center;box-shadow:0 20px 46px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.16)}
.ar-ava img{width:100%;height:100%;object-fit:cover}
.ar-kick{display:block;font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--tx3)}
.ar-id h2{margin-top:9px;font-size:clamp(24px,3.2vw,42px);letter-spacing:-.036em;line-height:1.04;
  overflow-wrap:anywhere}
.ar-bio{margin-top:10px;color:var(--tx2);font-size:14.5px;line-height:1.55;max-width:48ch}
.ar-bio:empty{display:none}
.ar-stats{display:flex;flex-wrap:wrap;gap:0;margin-top:15px;font-size:9.5px;font-weight:500;
  letter-spacing:.16em;text-transform:uppercase;color:var(--tx3)}
.ar-stats span + span{margin-left:13px;padding-left:13px;border-left:1px solid rgba(255,255,255,.14)}
/* <span><b>12</b>FOLLOWERS</span> — rakam ile etiket bitisikti */
.ar-stats b{margin-right:7px;font-size:13px;color:#eceef6;font-weight:600;letter-spacing:-.01em;
  font-variant-numeric:tabular-nums}
.ar-cta{display:grid;gap:10px;justify-items:stretch}
.ar-follow{height:44px;padding:0 26px;border-radius:99px;font-size:10.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#0a0a11;background:var(--spec);
  background-size:180% 100%;box-shadow:0 8px 24px rgba(150,115,255,.28);
  transition:background-position .9s var(--e),transform .35s var(--e)}
.ar-follow:hover{background-position:100% 50%;transform:translateY(-1px)}
/* 🚨 takip durumu sinifi '.is' (JS: classList.toggle('is', ...)) — '.on' DEGIL.
   Ustuste gelince etiket UNFOLLOW'a doner (::after hilesi, JS'te boyle kurgulu). */
.ar-follow.is{color:#8ef0cb;background:rgba(103,232,207,.1);
  box-shadow:inset 0 0 0 1px rgba(103,232,207,.34)}
.ar-follow.is:hover{color:#ffb4b4;background:rgba(255,111,143,.1);
  box-shadow:inset 0 0 0 1px rgba(255,111,143,.4)}
.ar-follow.is:hover .fw-l span{display:none}
.ar-follow.is:hover .fw-l::after{content:"UNFOLLOW"}
.fw-l{display:block;overflow:hidden}
.ar-ghost{height:44px;padding:0 22px;border-radius:99px;font-size:10.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#c8cad8;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);transition:background .3s,color .3s}
.ar-ghost:hover{background:rgba(255,255,255,.1);color:#fff}
.ar-sec{margin-top:clamp(24px,3vw,38px)}
.ar-sech{display:flex;align-items:center;gap:14px;padding-bottom:11px;margin-bottom:14px;
  border-bottom:1px solid var(--line2)}
.ar-sech b{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#5f6174}
.ar-sech span{font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--tx3);
  font-variant-numeric:tabular-nums}
/* 🚨 .trow BES parcali: .tix | .tc(img+.tply) | .tm(b+span+.tlive) | .tdur | .tact */
.trows{display:grid;gap:1px}
.trows-none{padding:34px 0;text-align:center;font-size:9.5px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:#5f6174}
.trow{display:grid;grid-template-columns:22px auto minmax(0,1fr) auto auto;gap:13px;
  align-items:center;padding:9px 12px;border-radius:12px;cursor:pointer;transition:background .3s}
.trow:hover{background:rgba(255,255,255,.045)}
.trow .tix{font-size:10px;font-weight:500;text-align:center;color:#55576b;
  font-variant-numeric:tabular-nums}
.trow.playing .tix{color:#a99cff}
.trow .tc{position:relative;width:44px;height:44px;border-radius:9px;overflow:hidden;flex:none;
  background:linear-gradient(140deg,var(--p1,#2a2a3a),var(--p2,#141420));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.trow .tc img{width:100%;height:100%;object-fit:cover}
.trow .tc .tply{position:absolute;inset:0;display:grid;place-items:center;color:#fff;opacity:0;
  background:rgba(6,6,11,.5);backdrop-filter:blur(3px);transition:opacity .3s}
.trow:hover .tc .tply{opacity:1}
.trow .tm{min-width:0}
.trow .tm b{display:block;font-size:14px;font-weight:550;letter-spacing:-.018em;color:#eceef6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.trow .tm > span{display:block;margin-top:3px;font-size:9px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
/* 🚨 secici ".trow .tm > .tlive" olmali: ".trow .tlive" (0,2,0) yukaridaki
   ".trow .tm > span" (0,2,1) kuralini YENEMEZ -> display:block kazanir ve
   CALMAYAN satirlarda da "PLAYING" gorunur (bizzat goruldu). */
.trow .tm > .tlive{display:none;align-items:center;gap:6px;color:#a99cff}
.trow.playing .tm > .tlive{display:flex}
.trow.playing .tm > span:not(.tlive){display:none}
/* nokta yok (bkz. .dkick notu) — "PLAYING" metni tek basina yeterli */
.tdur{font-size:11px;font-weight:500;color:var(--tx3);font-variant-numeric:tabular-nums}
.tact{display:inline-flex;align-items:center;gap:5px}
.tbtn{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:99px;
  color:#8f91a6;font-size:10.5px;font-weight:500;font-variant-numeric:tabular-nums;
  transition:color .3s,background .3s}
.tbtn:hover{color:#e2e4f0;background:rgba(255,255,255,.06)}
.tbtn svg{width:14px;height:14px}
.tbtn.tlike.on{color:#ff6f8f}
.tbtn.del:hover{color:#ff9d9d;background:rgba(255,111,143,.1)}

.plhead{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center;
  padding:clamp(20px,2.6vw,30px);border-radius:var(--r3);margin-bottom:clamp(20px,2.6vw,30px);
  background:rgba(255,255,255,.028);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.plhead .mos{display:grid;grid-template-columns:1fr 1fr;gap:2px;width:120px;height:120px;
  border-radius:15px;overflow:hidden;background:var(--line2);
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.plhead .mos i{display:block;background:linear-gradient(135deg,var(--p1,#2a2a3a),var(--p2,#171724))}
.plhead .mos img{width:100%;height:100%;object-fit:cover}
.pm h2{margin-top:9px;font-size:clamp(22px,2.8vw,36px);letter-spacing:-.034em;line-height:1.06;
  overflow-wrap:anywhere}
.pm .by{display:block;margin-top:8px;font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
.pl-actions{display:grid;gap:10px}
.pl-del{height:40px;padding:0 18px;border-radius:99px;font-size:9.5px;font-weight:500;
  letter-spacing:.14em;text-transform:uppercase;color:#ff9d9d;background:rgba(255,111,143,.08);
  box-shadow:inset 0 0 0 1px rgba(255,111,143,.24);transition:background .3s}
.pl-del:hover{background:rgba(255,111,143,.18)}

/* ═══════════ TASIMA (calar) ═══════════ */
.player{position:fixed;left:var(--rail);right:0;bottom:0;height:var(--tp);z-index:44;
  display:flex;align-items:center;gap:16px;padding:0 clamp(16px,2vw,26px);
  transform:translateY(110%);transition:transform .6s var(--e);
  background:rgba(9,9,14,.82);backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);border-top:1px solid var(--line2)}
.player.show{transform:none}
.pcov{width:46px;height:46px;border-radius:10px;flex:none;background:#12121a center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.pinfo{min-width:0;width:min(220px,22vw)}
.pinfo b{display:block;font-size:13px;font-weight:550;letter-spacing:-.016em;color:#f1f2f8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pinfo span{display:block;margin-top:2px;font-size:8.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.pnav{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#a9abbd;
  transition:color .3s,background .3s}
.pnav:hover{color:#fff;background:rgba(255,255,255,.08)}
.pbtn{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#0a0a11;background:var(--spec);background-size:180% 100%;
  box-shadow:0 6px 20px rgba(150,115,255,.3),inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .35s var(--e),background-position .9s var(--e)}
.pbtn:hover{transform:scale(1.06);background-position:100% 50%}
.pseek{flex:1;display:flex;align-items:center;gap:12px;min-width:0}
.ptime{font-size:10.5px;font-weight:500;color:var(--tx3);font-variant-numeric:tabular-nums;flex:none}
.ptrack{position:relative;flex:1;height:16px;cursor:pointer;display:flex;align-items:center}
.ptrack::before{content:"";position:absolute;left:0;right:0;height:3px;border-radius:2px;
  background:rgba(255,255,255,.09)}
.ptrack i{position:absolute;left:0;height:3px;width:0%;border-radius:2px;background:var(--spec);
  box-shadow:0 0 10px rgba(157,123,255,.55)}
.ptrack u{position:absolute;width:11px;height:11px;margin-left:-5.5px;border-radius:50%;
  background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.6);opacity:0;transition:opacity .3s}
.ptrack:hover u{opacity:1}
.px{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#7c7e92;
  transition:color .3s,background .3s}
.px:hover{color:#fff;background:rgba(255,255,255,.08)}

/* ═══════════ ORTU KATMANLARI ═══════════ */
.pick-ov,.cm-ov,.find-ov,.mini-ov,.set-ov,.plans-ov{position:fixed;inset:0;z-index:120;
  display:flex;opacity:0;pointer-events:none;transition:opacity .35s var(--e);
  background:rgba(4,4,9,.72);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)}
.pick-ov.show,.cm-ov.show,.find-ov.show,.mini-ov.show,.set-ov.show,.plans-ov.show{
  opacity:1;pointer-events:auto}
.pick-ov,.mini-ov,.plans-ov{align-items:center;justify-content:center;padding:24px;overflow-y:auto}
.set-ov{align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
.find-ov{align-items:flex-start;justify-content:center;padding:min(14vh,120px) 24px 24px}
.cm-ov{align-items:stretch;justify-content:flex-end}

.pick-card,.mini-card,.find-card,.set-card,.plans-card,.cm-card{position:relative;
  border-radius:clamp(18px,2.2vw,26px);overflow:hidden;
  background:linear-gradient(180deg,rgba(19,19,27,.97),rgba(10,10,15,.98));
  box-shadow:0 50px 120px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.075);
  transform:translateY(18px) scale(.98);transition:transform .45s var(--e)}
.show .pick-card,.show .mini-card,.show .find-card,.show .set-card,.show .plans-card{transform:none}
.pick-card::before,.mini-card::before,.find-card::before,.set-card::before,.plans-card::before{
  content:"";position:absolute;left:0;right:0;top:0;height:1.4px;background:var(--spec);z-index:3}

.pick-card{width:min(760px,100%);max-height:82svh;display:flex;flex-direction:column;padding:24px}
.pick-card h4{font-size:19px;letter-spacing:-.028em;margin-bottom:16px}
.pick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:13px;
  overflow-y:auto;min-height:0}
/* --- cover icin dosya yukleme --- */
.pick-up[hidden]{display:none}
.up-zone{display:grid;justify-items:center;gap:7px;width:100%;padding:26px 20px;border-radius:var(--r2);
  cursor:pointer;text-align:center;color:var(--tx2);background:rgba(255,255,255,.022);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.09);
  transition:background .3s,box-shadow .3s,transform .35s var(--e)}
.up-zone:hover,.up-zone.drag{background:rgba(157,123,255,.07);
  box-shadow:inset 0 0 0 1.5px rgba(157,123,255,.5)}
.up-zone.drag{transform:scale(1.01)}
.up-ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;color:#a99cff;
  background:rgba(157,123,255,.12);box-shadow:inset 0 0 0 1px rgba(157,123,255,.25)}
.up-zone b{font-size:14.5px;font-weight:550;letter-spacing:-.018em;color:#eceef6}
.up-zone > span:not(.up-ic){font-size:11.5px;color:var(--tx3);letter-spacing:.01em}
.up-prog{height:3px;margin-top:12px;border-radius:2px;overflow:hidden;background:rgba(255,255,255,.09)}
.up-prog[hidden]{display:none}
.up-prog i{display:block;height:100%;width:0%;background:var(--spec);
  box-shadow:0 0 10px rgba(157,123,255,.6);transition:width .4s var(--e)}
.up-msg{min-height:16px;margin-top:9px;font-size:12px;line-height:1.45;color:var(--tx2)}
.up-msg.err{color:#ff9d9d}
.up-msg.ok{color:#7ff0cf}
.pick-or{display:flex;align-items:center;gap:14px;margin:18px 0 4px;
  font-size:9px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:#5f6174}
.pick-or::before,.pick-or::after{content:"";flex:1;height:1px;background:var(--line2)}
.pick-none{padding:26px 0 6px;text-align:center;font-size:12.5px;color:var(--tx3)}
.pick-none[hidden]{display:none}

.cm-card{width:min(430px,100%);height:100svh;border-radius:0;transform:translateX(100%);
  display:flex;flex-direction:column}
.cm-ov.show .cm-card{transform:none}
.cm-head{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;
  border-bottom:1px solid var(--line2)}
.cm-head b{font-size:9.5px;font-weight:500;letter-spacing:.24em;text-transform:uppercase;color:#5f6174}
.cm-head em{font-style:normal;color:#eceef6}
.cm-x,.set-x{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;color:#8f91a6;
  transition:color .3s,background .3s}
.cm-x:hover,.set-x:hover{color:#fff;background:rgba(255,255,255,.08)}
.cm-list{flex:1;overflow-y:auto;padding:16px 20px;display:grid;gap:16px;align-content:start}
.cmi{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px}
.cmi.sub{padding-left:34px}
.ca{width:32px;height:32px;border-radius:50%;overflow:hidden;display:grid;place-items:center;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.14);cursor:pointer}
.ca img{width:100%;height:100%;object-fit:cover}
.ch{display:flex;align-items:baseline;gap:9px}
.ch b{font-size:13px;font-weight:600;letter-spacing:-.016em;color:#eceef6;cursor:pointer}
.ch span{font-size:9.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#5f6174}
.ct{margin-top:4px;font-size:14px;line-height:1.5;color:var(--tx2);overflow-wrap:anywhere}
.ct u{text-decoration:none;color:#9d7bff}
.crep{margin-top:5px;font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:#6e7086;transition:color .3s}
.crep:hover{color:#c3b9ff}
.cm-inrow{padding:14px 20px 18px;border-top:1px solid var(--line2)}
.cm-replying{display:none;align-items:center;justify-content:space-between;gap:10px;
  margin-bottom:9px;padding:7px 12px;border-radius:10px;background:rgba(157,123,255,.1);
  font-size:11.5px;color:#c3b9ff}
.cm-replying.show{display:flex}
.cm-flex{display:flex;gap:9px}
.cm-in{flex:1;padding:12px 15px;border-radius:99px;border:0;outline:none;color:#eceef6;
  background:rgba(255,255,255,.05);font-family:var(--f);font-size:14px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.cm-in::placeholder{color:#5e6076}
.cm-send{width:42px;height:42px;border-radius:50%;flex:none;display:grid;place-items:center;
  color:#0a0a11;background:var(--spec);transition:transform .3s var(--e)}
.cm-send:hover{transform:scale(1.06)}

.find-card{width:min(560px,100%);max-height:70svh;display:flex;flex-direction:column}
.find-bar{display:flex;align-items:center;gap:12px;padding:18px 20px;color:var(--tx3);
  border-bottom:1px solid var(--line2)}
.find-bar input{flex:1;background:none;border:0;outline:none;color:#f1f2f8;font-family:var(--f);
  font-size:16px}
.find-bar input::placeholder{color:#5e6076}
.find-bar kbd{font-family:var(--f);font-size:9px;font-weight:500;letter-spacing:.12em;color:#5f6174;
  padding:4px 7px;border-radius:5px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12)}
.find-list{overflow-y:auto;padding:8px;min-height:0}
/* 🚨 .fitem bir <button> ve UC parcali: .fa | .fb2 | .fgo
   (button metni varsayilan ORTALAR; text-align:left sart. Ilk surumde iki
   sutuna gore yazilmisti -> isimler ortalandi, "OPEN PROFILE" alt satira dustu.) */
.find-kick{padding:12px 12px 8px;font-size:9px;font-weight:500;letter-spacing:.26em;
  text-transform:uppercase;color:#5f6174}
.find-none{padding:34px 0 28px;text-align:center;font-size:9.5px;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:#5f6174}
.fitem{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  padding:10px 12px;border-radius:13px;cursor:pointer;
  transition:background .25s,transform .35s var(--e)}
.fitem:hover,.fitem.sel{background:rgba(255,255,255,.06);transform:translateX(3px)}
.fitem .fa{width:38px;height:38px;border-radius:50%;overflow:hidden;flex:none;
  display:grid;place-items:center;box-shadow:0 0 0 1px rgba(255,255,255,.14)}
.fitem .fa img{width:100%;height:100%;object-fit:cover}
.fitem .fb2{flex:1;min-width:0}
.fitem .fb2 b{display:block;font-size:14px;font-weight:550;letter-spacing:-.018em;color:#eceef6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fitem .fb2 span{display:block;margin-top:3px;font-size:8.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}
.fitem .fgo{flex:none;font-size:8.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:#a99cff;opacity:0;transform:translateX(-5px);
  transition:opacity .25s var(--e),transform .25s var(--e)}
.fitem:hover .fgo,.fitem.sel .fgo{opacity:1;transform:none}

.mini-card{width:min(440px,100%);padding:26px}
.mini-card h4{font-size:19px;letter-spacing:-.028em}
.msub{display:block;margin-top:6px;font-size:9px;font-weight:500;letter-spacing:.2em;
  text-transform:uppercase;color:var(--tx3)}
.mini-in{width:100%;margin-top:18px;padding:13px 16px;border-radius:13px;border:0;outline:none;
  color:#eceef6;background:rgba(255,255,255,.05);font-family:var(--f);font-size:15px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s}
.mini-in:focus{box-shadow:inset 0 0 0 1px rgba(157,123,255,.55)}
.mini-msg{min-height:18px;margin-top:9px;font-size:12px;color:var(--tx2)}
.mini-msg.err{color:#ff9d9d}
.mini-msg.ok{color:#7ff0cf}
.mini-row{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.mini-ghost,.mini-go{height:40px;padding:0 20px;border-radius:99px;font-size:10px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;transition:transform .3s var(--e)}
.mini-ghost{color:#c8cad8;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.mini-go{color:#0a0a11;background:var(--spec)}
.mini-go:hover,.mini-ghost:hover{transform:translateY(-1px)}
.plpick-list{max-height:38svh;overflow-y:auto;margin-top:14px;display:grid;gap:4px}
.plpick-list button{display:flex;align-items:center;gap:11px;width:100%;padding:9px 11px;
  border-radius:11px;color:#dcdeea;font-size:13.5px;text-align:left;transition:background .25s}
.plpick-list button:hover{background:rgba(255,255,255,.06)}

.set-card{width:min(660px,100%);margin:auto}
.set-head{display:flex;align-items:center;justify-content:space-between;padding:22px 24px 16px}
.set-sec{padding:18px 24px;border-top:1px solid var(--line2)}
.set-kick{display:block;margin-bottom:14px;font-size:9.5px;font-weight:500;letter-spacing:.24em;
  text-transform:uppercase;color:#5f6174}
.srow{display:flex;align-items:center;gap:14px;margin-bottom:11px;flex-wrap:wrap}
.srow.top{align-items:flex-start}
.srow label{width:120px;flex:none;font-size:12.5px;color:var(--tx2)}
.srow .grow{flex:1;min-width:180px}
.savatar{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-size:18px;
  font-weight:600;color:#0d0d16;background:var(--spec)}
.sid b{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.02em;color:#eceef6}
.sid span{display:block;margin-top:2px;font-size:12px;color:var(--tx3)}
.sin{width:100%;padding:11px 14px;border-radius:11px;border:0;outline:none;color:#eceef6;
  background:rgba(255,255,255,.045);font-family:var(--f);font-size:14.5px;resize:vertical;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);transition:box-shadow .3s}
.sin:focus{box-shadow:inset 0 0 0 1px rgba(157,123,255,.55)}
textarea.sin{min-height:64px}
.sbtn{height:38px;padding:0 16px;border-radius:99px;font-size:9.5px;font-weight:600;
  letter-spacing:.14em;text-transform:uppercase;color:#0a0a11;background:var(--spec);
  transition:transform .3s var(--e)}
.sbtn:hover{transform:translateY(-1px)}
.sbtn.ghost{color:#c8cad8;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.sbtn.danger{color:#ff9d9d;background:rgba(255,111,143,.1);box-shadow:inset 0 0 0 1px rgba(255,111,143,.25)}
.smsg{min-height:16px;padding:0 0 8px 134px;font-size:11.5px;color:var(--tx2)}
.smsg.err{color:#ff9d9d}
.smsg.ok{color:#7ff0cf}
.stog{width:44px;height:25px;border-radius:99px;cursor:pointer;position:relative;
  background:rgba(255,255,255,.09);transition:background .35s}
.stog.on{background:var(--spec)}
.stog i{position:absolute;top:3px;left:3px;width:19px;height:19px;border-radius:50%;background:#fff;
  transition:transform .35s var(--e)}
.stog.on i{transform:translateX(19px)}
.stog-lab{font-size:9.5px;font-weight:500;letter-spacing:.14em;color:var(--tx3)}
.set-plan{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;border-radius:var(--r1);
  overflow:hidden;background:var(--line2);margin-bottom:14px}
.set-plan > div{padding:14px;background:#0c0c12;text-align:center}
.set-plan b{display:block;font-size:17px;font-weight:600;letter-spacing:-.024em;color:#f1f2f8}
.set-plan span{display:block;margin-top:4px;font-size:9px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}

.plans-card{width:min(880px,100%);padding:clamp(26px,3.4vw,44px);margin:auto}
.plans-card canvas{position:absolute;inset:0;z-index:0;opacity:.4;pointer-events:none}
.plans-card > *:not(canvas){position:relative;z-index:2}   /* ayni tuzak (bkz. .ar-hero) */
.plans-x{position:absolute;top:16px;right:16px;z-index:3}
.plans-card h2{margin-top:14px;font-size:clamp(24px,3.2vw,40px);letter-spacing:-.036em;line-height:1.05}
.plans-card h2 em{font-family:var(--fs);font-style:italic;font-weight:400;
  background:var(--spec);-webkit-background-clip:text;background-clip:text;color:transparent}
.pl-sub{margin-top:12px;color:var(--tx2);font-size:15px;line-height:1.55;max-width:52ch}
.pl-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:26px 0}
.pl-feat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px}
.pl-feat i{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;flex:none;
  color:#0a0a11;background:var(--spec)}
.pl-feat b{display:block;font-size:14px;font-weight:550;letter-spacing:-.018em;color:#eceef6}
.pl-feat span{display:block;margin-top:4px;font-size:12.5px;line-height:1.5;color:var(--tx3)}
.pl-cta-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center;
  padding-top:22px;border-top:1px solid var(--line2)}
.playbtn img{height:58px;margin:-7px}
.pl-badge{display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:9.5px;
  font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:#7ff0cf}
.pl-note{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--tx3);max-width:44ch}
.pl-qr{text-align:center}
.qrbox{width:132px;padding:9px;border-radius:14px;background:#fff}
.qrbox img{width:100%;height:auto;display:block}
.pl-qr span{display:block;margin-top:10px;font-size:8.5px;font-weight:500;letter-spacing:.18em;
  text-transform:uppercase;color:var(--tx3)}

/* giris animasyonu — GSAP acar (gsap.to('[data-in]',{opacity:1,y:0})).
   Sinif eklenmez; CSS yalniz baslangic durumunu verir. Govdedeki guvenlik
   agi GSAP yuklenmezse 2.5 sn sonra kosulsuz acar. */
[data-in]{opacity:0;transform:translateY(20px)}

/* ─────────── URETIM DURDU — SEBEP EKRANI (telif/moderasyon/motor) ───────────
   Ust bant CANLI canvas: iki dalga formu ustuste taranir, eslesen bolge aksana
   doner (blkScene). Aksan renk ailesi data-tone ile degisir; her ton icin
   ayri --acc/--accS degiskeni (color-mix YOK — eski Safari'de duser). */
.blk-ov{position:fixed;inset:0;z-index:150;display:flex;align-items:center;justify-content:center;
  padding:24px;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .4s var(--e);
  background:rgba(3,3,7,.8);backdrop-filter:blur(20px) saturate(1.1);
  -webkit-backdrop-filter:blur(20px) saturate(1.1)}
.blk-ov.show{opacity:1;pointer-events:auto}
.blk-card{--acc:#ff6f8f;--acc2:#ff9c66;--accS:rgba(255,111,143,.38);--accW:rgba(255,111,143,.11);
  position:relative;width:min(760px,100%);margin:auto;padding:clamp(20px,2.4vw,30px);
  border-radius:clamp(20px,2.4vw,28px);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,15,20,.975),rgba(9,9,13,.99));
  box-shadow:0 60px 150px rgba(0,0,0,.7),inset 0 0 0 1px rgba(255,255,255,.08)}
.blk-card[data-tone="amber"]{--acc:#ffd089;--acc2:#ff9c66;
  --accS:rgba(255,208,137,.36);--accW:rgba(255,208,137,.1)}
.blk-card[data-tone="iris"]{--acc:#9d7bff;--acc2:#57a9ff;
  --accS:rgba(157,123,255,.38);--accW:rgba(157,123,255,.12)}
/* ⚠️ .ar-hero tuzagi: canvas disindaki her cocuk yigin baglaminda ustte kalmali.
   :not() ozgullugu artirdigi icin .blk-x'i DISARIDA birak — yoksa bu kural onun
   position:absolute'unu ezer ve kapatma dugmesi akisa girer (bir kez oldu). */
.blk-card > *:not(.blk-vis):not(.blk-x){position:relative;z-index:2}
.blk-card::after{content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  pointer-events:none;background:linear-gradient(90deg,transparent,var(--acc),transparent)}

.blk-vis{position:relative;z-index:1;height:clamp(108px,12vw,132px);
  margin:calc(-1 * clamp(20px,2.4vw,30px)) calc(-1 * clamp(20px,2.4vw,30px)) clamp(16px,2vw,21px);
  overflow:hidden;background:#06060a}
.blk-vis canvas{display:block;width:100%;height:100%}
.blk-vis::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(9,9,13,.32),transparent 30%,rgba(9,9,13,.66))}
.blk-stamp{position:absolute;left:50%;top:50%;z-index:2;
  transform:translate(-50%,-50%) scale(.94);
  display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:99px;
  font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);
  background:rgba(7,7,11,.7);box-shadow:inset 0 0 0 1px var(--accS);
  opacity:0;transition:opacity .5s var(--e),transform .7s var(--e)}
.blk-stamp.on{opacity:1;transform:translate(-50%,-50%) scale(1)}
.blk-x{position:absolute;top:14px;right:14px;z-index:4;
  background:rgba(8,8,12,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}

.blk-head{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.blk-state{display:inline-flex;align-items:center;padding:5px 12px;border-radius:99px;
  font-size:9px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--acc);
  background:var(--accW);box-shadow:inset 0 0 0 1px var(--accS);white-space:nowrap}
.blk-card h2{margin-top:13px;font-size:clamp(23px,2.8vw,33px);letter-spacing:-.036em;line-height:1.06}
.blk-card h2 em{font-family:var(--fs);font-style:italic;font-weight:400;
  background:linear-gradient(96deg,var(--acc2),var(--acc));
  -webkit-background-clip:text;background-clip:text;color:transparent}
.blk-sub{margin-top:11px;font-size:14.5px;line-height:1.6;color:var(--tx2);max-width:62ch}

.blk-src{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;
  margin-top:16px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.032);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.blk-thumb{width:42px;height:42px;border-radius:10px;overflow:hidden;
  background:linear-gradient(140deg,#1b1b25,#101018);display:grid;place-items:center;color:var(--tx3)}
.blk-thumb img{width:100%;height:100%;object-fit:cover}
.blk-src b{display:block;font-size:14px;font-weight:550;letter-spacing:-.02em;color:#eceef6;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk-src span{display:block;margin-top:2px;font-size:11.5px;color:var(--tx3)}
.blk-tag{padding:5px 11px;border-radius:99px;font-size:8.5px;font-weight:600;letter-spacing:.18em;
  text-transform:uppercase;color:var(--acc);background:var(--accW);
  box-shadow:inset 0 0 0 1px var(--accS);white-space:nowrap}

/* uc gerekce yan yana — dikey butceyi kurtarir, .pl-feats ailesiyle ayni dil */
.blk-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;margin-top:18px;
  border-radius:14px;overflow:hidden;background:rgba(255,255,255,.055)}
/* align-content:start SART — stretch, esit yukseklige gerilen hucrelerde artan
   yeri satirlara dagitip 03'un basligini digerlerinden 9px yukari kaydiriyordu */
.blk-fact{display:grid;grid-template-columns:minmax(0,1fr);align-content:start;gap:6px;
  padding:14px 14px 15px;background:#0c0c12}
.blk-fact i{font-style:normal;font-size:9px;font-weight:600;letter-spacing:.12em;
  color:var(--tx3);font-variant-numeric:tabular-nums}
.blk-fact b{display:block;font-size:13px;font-weight:550;letter-spacing:-.018em;color:#eceef6}
.blk-fact span{display:block;margin-top:4px;font-size:12px;line-height:1.5;color:var(--tx3)}

/* ham motor kodu (ucuncu taraf) BILEREK gosterilmiyor — yalniz insan cumlesi.
   Etiket + ayrac, sitenin mikro-etiket dilinin aynisi (.eyebrow[data-ix]). */
.blk-report{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:15px;padding-top:13px;
  border-top:1px solid var(--line2);font-size:9.5px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;color:var(--tx3)}
.blk-report span{padding-right:11px;border-right:1px solid rgba(255,255,255,.15)}
.blk-report em{font-style:normal;font-size:12.5px;font-weight:400;letter-spacing:-.01em;
  text-transform:none;color:var(--tx2)}

.blk-cta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:18px}
.blk-cta .cta{height:46px}
.blk-cta .sbtn{height:46px;padding:0 20px;font-size:10px}
.blk-learn{margin-left:auto;font-size:11.5px;color:var(--tx3);transition:color .3s}
.blk-learn:hover{color:#eceef6}

/* ═══════════ RESPONSIVE ═══════════ */
@media(max-width:1240px){
  .stage{margin-right:0}
  /* rihtim -> sahnenin ustunde yatay serit */
  .dock{position:static;width:auto;max-width:1180px;flex-direction:row;align-items:center;gap:14px;
    margin:0 auto 20px;padding:12px 14px;border-left:0;border-radius:var(--r2);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);background:rgba(255,255,255,.028)}
  .dock .dkick,.dock .telemetry{display:none}
  .dock .engine{flex:none;padding:0;background:none;box-shadow:none;min-width:190px}
  .dock .engine::before{display:none}
  .drec{flex:1;min-width:0}
  .rcx{flex-direction:row;gap:8px;overflow-x:auto;overflow-y:hidden;padding-bottom:4px}
  .rc{grid-template-columns:auto;justify-items:center;gap:7px;width:74px;padding:0}
  .rc b{font-size:10.5px;text-align:center;max-width:74px}
  .dock-wrap{max-width:1180px;margin:0 auto}
}
@media(max-width:760px){
  :root{--rail:0px;--tp:66px}
  .rail{left:0;right:0;top:auto;bottom:0;width:auto;height:58px;flex-direction:row;
    justify-content:space-around;padding:0 8px;border-right:0;border-top:1px solid var(--line2)}
  .rbrand,.rfoot::before{display:none}
  .rnav{flex-direction:row;gap:2px;justify-content:center}
  .rnav button{width:62px;height:46px;border-radius:12px}
  .rnav button.on::before{left:50%;top:auto;bottom:-1px;width:26px;height:2.5px;
    transform:translateX(-50%);border-radius:3px 3px 0 0}
  .rfoot{margin:0;flex-direction:row;gap:2px}
  .credchip{width:44px;height:44px;font-size:0}
  .credchip b{font-size:14px}
  .player{left:0;bottom:58px}
  body{padding-bottom:calc(var(--tp) + 58px + 12px)}
  .shell{margin-left:0;padding:16px 15px 18px}
  .c-top{flex-wrap:wrap}
  .srail{width:100%;overflow-x:auto;scrollbar-width:none}
  .srail::-webkit-scrollbar{display:none}
  .c-bar{flex-direction:column;align-items:stretch}
  .cta{width:100%}
  .lib-head{flex-direction:column;align-items:stretch}
  .lib-tools{align-items:stretch}
  .lsearch input{width:100%}
  .featured{grid-template-columns:auto minmax(0,1fr);gap:14px}
  .featured .fplay{grid-column:1/-1;justify-content:center}
  .lgrid{grid-template-columns:repeat(auto-fill,minmax(132px,1fr))}
  .reel{grid-template-columns:minmax(0,1fr)}
  .rside{position:absolute;right:10px;bottom:96px;z-index:4;gap:14px}
  .ar-hero,.plhead{grid-template-columns:auto minmax(0,1fr);gap:16px}
  .ar-cta,.pl-actions{grid-column:1/-1;grid-auto-flow:column;justify-content:start}
  .pinfo{display:none}
  .pl-feats,.pl-cta-row{grid-template-columns:1fr}
  .pl-qr{display:none}
  .srow label{width:100%}
  .smsg{padding-left:0}
  .cm-card{width:100%}
  .blk-ov{padding:14px;align-items:flex-start}
  .blk-facts{grid-template-columns:minmax(0,1fr)}
  .blk-fact{grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:start}
  .blk-fact i{padding-top:2px}
  /* dar ekranda etiket ucuncu sutunu yiyor -> alt satira al */
  .blk-src{grid-template-columns:auto minmax(0,1fr)}
  .blk-tag{grid-column:1/-1;justify-self:start}
  .blk-cta{flex-direction:column;align-items:stretch}
  .blk-cta .cta,.blk-cta .sbtn{width:100%}
  .blk-learn{margin:2px auto 0}
  .blk-report{gap:8px}
  /* iOS focus zoom'u engelle */
  #fPrompt,#fLyrics,.titlein,.sin,.mini-in,.cm-in,.find-bar input,.lsearch input{font-size:16px}
}

/* ── REEL VIDEO uretimi: sag-tik menu + ilerleme toast'i ── */
#rgToast{position:fixed;right:22px;bottom:96px;z-index:60;min-width:290px;max-width:370px;
  padding:14px 16px 12px;border-radius:14px;color:#eef6fd;
  background:linear-gradient(180deg,#10182b,#0a101f 60%,#080d19);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(125,241,255,.22),0 18px 44px rgba(0,0,0,.5);
  opacity:0;visibility:hidden;transform:translateY(8px);transition:.35s ease}
#rgToast.on{opacity:1;visibility:visible;transform:none}
#rgToast b{display:block;font:600 11px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.28em;color:#7df1ff;margin-bottom:7px}
#rgToast span{display:block;font-size:13px;color:#b9c6da;margin-bottom:9px;line-height:1.45}
#rgToast .bar{display:block;height:3px;border-radius:99px;background:rgba(125,241,255,.12);overflow:hidden}
#rgToast .bar u{display:block;height:100%;width:0;border-radius:99px;text-decoration:none;
  background:linear-gradient(90deg,#7df1ff,#8b5cf6,#e879f9);transition:width .6s ease}
#rgMenu{position:fixed;z-index:61;opacity:0;visibility:hidden;transform:scale(.96);transition:.18s ease;transform-origin:top left}
#rgMenu.on{opacity:1;visibility:visible;transform:none}
#rgMenu button{font:600 12px/1 ui-monospace,Menlo,Consolas,monospace;letter-spacing:.14em;color:#eef8fe;
  padding:13px 18px;border-radius:12px;border:0;cursor:pointer;
  background:linear-gradient(180deg,#1a2439,#0e1528 52%,#0a0f1e);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09),0 0 0 1px rgba(125,241,255,.32),0 12px 30px rgba(0,0,0,.45)}
#rgMenu button:hover{box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(125,241,255,.6),0 12px 30px rgba(0,0,0,.45)}