/* Radyo Toçka — Arşiv
   Koyu, editoryal-brutalist. Keskin köşe, kalın çizgi, kayıt kırmızısı. */

:root{
  --bg:#0B0B0C; --panel:#121215; --panel-2:#17171B;
  --line:#26262E; --line-2:#33333E;
  --fg:#F4F4F1; --dim:#8E8E99; --dim-2:#82828D;
  --red:#FF2D20; --red-dim:#7A1610;
  --blue:#5B9BFF; --amber:#FFB020;
  --focus:#FFB020;
  --h:'Outfit',system-ui,sans-serif;
  --b:'Work Sans',system-ui,sans-serif;
  --m:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --bar:104px;

  /* Sadeleştirme: keskin köşe yerine yumuşak yarıçap, çizgi yerine yüzey. */
  --r:10px; --r-sm:8px; --r-lg:16px; --pill:999px;
  --surface:#191920;        /* çizgi yerine kullanılan hafif yüzey */
  --surface-2:#22222B;      /* üstüne gelince / seçiliyken */
  --hair:rgb(255 255 255/.06);
  /* İmleç-üstü/dolgu katmanları: metin rengi tonunda soluk yüzey.
     Açık temada aynı isimler siyah tabanlı karşılıklarına döner. */
  --ov-04:rgb(255 255 255/.04);
  --ov-05:rgb(255 255 255/.05);
  --ov-07:rgb(255 255 255/.07);
  --ov-08:rgb(255 255 255/.08);
}

/* ── açık görünüm ──────────────────────────────────────
   Kimlik (kayıt kırmızısı, mono etiketler, editoryal tipografi) aynı;
   yalnız zemin/metin ve yüzey katmanları tersine dönüyor. `<html>`'in
   data-theme'i sayfa boyanmadan önce satır içi script'le kuruluyor
   (bkz. index.html <head>) — localStorage'da tercih yoksa sistem
   ayarına (prefers-color-scheme) bakılır, flaş olmaz. */
:root[data-theme="light"]{
  --bg:#F5F3EE; --panel:#FFFFFF; --panel-2:#ECEAE2;
  --line:#E2DFD5; --line-2:#CDC9BC;
  --fg:#18181B; --dim:#5C5C64; --dim-2:#696971;
  --red:#E0241A; --blue:#1D5FD1; --amber:#9A6400; --focus:#9A6400;
  --surface:#ECEAE2; --surface-2:#DEDACE;
  --hair:rgb(0 0 0/.09);
  --ov-04:rgb(0 0 0/.04); --ov-05:rgb(0 0 0/.05);
  --ov-07:rgb(0 0 0/.07); --ov-08:rgb(0 0 0/.08);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--b); font-size:16px; line-height:1.5;
  padding-bottom:calc(var(--bar) + env(safe-area-inset-bottom));
  overflow-x:hidden;
}

h1,h2,h3,h4{font-family:var(--h); margin:0; letter-spacing:-.02em}
a{color:inherit}
button,input{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
.skip{position:absolute;left:-999px;top:0;z-index:99;background:var(--amber);color:#000;padding:.6rem 1rem}
.skip:focus{left:0}
.muted{color:var(--dim)} .small{font-size:.82rem}
svg{width:1em;height:1em;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ── arka plan ─────────────────────────────────────── */
#backdrop{position:fixed;inset:0;width:100%;height:100%;z-index:-2;opacity:.42;pointer-events:none}
.grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── üst çubuk ─────────────────────────────────────── */
.top{
  position:sticky;top:0;z-index:40;display:flex;gap:1rem;align-items:center;
  padding:.75rem clamp(1rem,4vw,2.5rem);
  background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:baseline;gap:.5rem;flex:none}
.brand .dot{width:9px;height:9px;background:var(--red);border-radius:50%;align-self:center;
  box-shadow:0 0 0 0 var(--red); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgb(255 45 32/.55)}70%,100%{box-shadow:0 0 0 12px rgb(255 45 32/0)}}
.brand .mark{font-family:var(--h);font-weight:900;letter-spacing:.02em;font-size:1.05rem}
.brand .sub{font-family:var(--m);font-size:.68rem;letter-spacing:.22em;color:var(--dim)}
.brand.radio-live .dot{
  animation:pulse 1.1s cubic-bezier(.2,.8,.4,1) infinite;
  box-shadow:0 0 14px var(--red);
}

.radio-btn{
  font-family:var(--m);font-size:.72rem;letter-spacing:.14em;padding:.35rem .75rem;
  border-color:var(--line-2);display:inline-flex;align-items:center;gap:.45rem;
  min-height:38px;color:var(--dim);
}
.radio-btn .live-dot{
  width:7px;height:7px;background:var(--dim-2);border-radius:50%;transition:background .2s ease;
}
.radio-btn[aria-pressed="true"]{
  border-color:var(--red);background:var(--panel-2);color:var(--fg);
}
.radio-btn[aria-pressed="true"] .live-dot{
  background:var(--red);box-shadow:0 0 8px var(--red);animation:pulse 1.2s ease-out infinite;
}

.badge-live{
  display:inline-block;background:var(--red);color:#fff;font-family:var(--m);
  font-size:.58rem;letter-spacing:.12em;padding:.08rem .3rem;margin-right:.4rem;
  vertical-align:middle;font-weight:700;
}
#bDJ[aria-pressed="true"]{color:var(--amber)}

.search-wrap{position:relative;flex:1;max-width:520px;margin-inline:auto}
.search-wrap .i{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);font-size:1rem;color:var(--dim);pointer-events:none}
#q{
  width:100%;background:var(--panel);border:1px solid var(--line);color:var(--fg);
  padding:.6rem 2.6rem .6rem 2.4rem;border-radius:0;font-size:.92rem;
  transition:border-color .18s ease, background .18s ease;
}
#q::placeholder{color:var(--dim-2)}
#q:focus{border-color:var(--red);background:var(--panel-2);outline:none}
.kbd-hint{position:absolute;right:.6rem;top:50%;transform:translateY(-50%);pointer-events:none}
kbd{font-family:var(--m);font-size:.7rem;color:var(--dim);border:1px solid var(--line-2);
  padding:.1rem .35rem;background:var(--panel-2)}
#q:focus ~ .kbd-hint{opacity:0}

.ghost{background:transparent;border:1px solid var(--line-2);color:var(--fg);
  padding:.5rem .75rem;cursor:pointer;display:inline-flex;gap:.5rem;align-items:center;
  min-height:44px;transition:background .18s ease,border-color .18s ease}
.ghost:hover{background:var(--panel-2);border-color:var(--red)}
.ghost.sm{min-height:38px;font-size:.85rem;padding:.35rem .7rem}

/* ── masthead ──────────────────────────────────────── */
main{max-width:1400px;margin-inline:auto;padding:0 clamp(1rem,4vw,2.5rem)}
.masthead{padding:clamp(2.5rem,7vw,5.5rem) 0 2rem;position:relative}
.masthead h1{display:flex;flex-direction:column;line-height:.82;text-transform:uppercase}
.masthead .l1{font-weight:300;font-size:clamp(2.6rem,10vw,7rem);color:var(--dim);letter-spacing:-.03em}
.masthead .l2{font-weight:900;font-size:clamp(3.6rem,16vw,11.5rem);letter-spacing:-.045em;
  background:linear-gradient(96deg,var(--fg) 30%,var(--red) 130%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:52ch;margin:1.6rem 0 0;color:var(--dim);font-size:clamp(.95rem,2vw,1.1rem)}
.lede strong{color:var(--fg);font-family:var(--m);font-weight:500;font-variant-numeric:tabular-nums}

.spine{display:flex;gap:0;margin-top:2.5rem;border-top:1px solid var(--line);flex-wrap:wrap}
.spine button{
  flex:1 1 90px;min-height:64px;background:transparent;border:0;border-right:1px solid var(--line);
  padding:.7rem .5rem;text-align:left;cursor:pointer;position:relative;overflow:hidden;
  transition:background .2s ease;
}
.spine button:last-child{border-right:0}
.spine button::after{content:'';position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--red);transition:width .3s ease}
.spine button:hover{background:var(--panel)}
.spine button:hover::after,.spine button[aria-current="true"]::after{width:100%}
.spine .y{font-family:var(--h);font-weight:700;font-size:1.35rem;display:block}
.spine .c{font-family:var(--m);font-size:.68rem;color:var(--dim);letter-spacing:.1em}

/* ── bugün tarihte ─────────────────────────────────── */
.otd-card{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:0 0 1.8rem;padding:.9rem 1.1rem;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-lg);
}
.otd-tag{font-family:var(--m);font-size:.62rem;letter-spacing:.12em;color:var(--red);font-weight:700;flex:0 0 auto}
:root[data-theme="light"] .otd-tag{color:var(--red-dim)}
.otd-card p{flex:1 1 auto;margin:0;font-size:.88rem;color:var(--fg);min-width:200px}
.otd-card button{flex:0 0 auto}

/* ── filtreler ─────────────────────────────────────── */
.filters{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:1.4rem 0;border-bottom:1px solid var(--line)}
.chips{display:flex;gap:.4rem;flex-wrap:wrap}
.chip{background:transparent;border:1px solid var(--line-2);color:var(--dim);cursor:pointer;
  padding:.35rem .7rem;font-size:.8rem;font-family:var(--m);letter-spacing:.06em;
  min-height:36px;transition:.18s ease}
.chip:hover{color:var(--fg);border-color:var(--dim)}
.chip[aria-pressed="true"]{background:var(--red);border-color:var(--red);color:#fff}

/* ── yerleşim ──────────────────────────────────────── */
.layout{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);
  padding-top:2rem;align-items:start}
.rail{position:sticky;top:78px}
.rail-h{font-family:var(--m);font-size:.68rem;letter-spacing:.2em;color:var(--dim-2);margin-bottom:.9rem}
.rail ol{list-style:none;margin:0;padding:0}
.rail li a{display:block;padding:.5rem 0 .5rem .75rem;border-left:2px solid var(--line);
  text-decoration:none;color:var(--dim);font-size:.86rem;transition:.18s ease;min-height:44px}
.rail li a:hover{color:var(--fg);border-left-color:var(--dim)}
.rail li a[aria-current="true"]{color:var(--fg);border-left-color:var(--red)}
.rail .d{font-family:var(--m);font-size:.7rem;color:var(--dim-2);display:block}

/* ── albüm blokları ────────────────────────────────── */
.album{margin-bottom:3.5rem;scroll-margin-top:90px}
.album-h{display:flex;gap:1rem;align-items:flex-end;justify-content:space-between;
  padding-bottom:.8rem;border-bottom:2px solid var(--fg);margin-bottom:.2rem;flex-wrap:wrap}
.album-h .t{font-size:clamp(1.3rem,3.4vw,2rem);font-weight:700;text-transform:uppercase;letter-spacing:-.02em}
.album-h .m{font-family:var(--m);font-size:.72rem;color:var(--dim);letter-spacing:.12em;white-space:nowrap}
.album-h .play-all{margin-left:auto}

/* ── parça satırı ──────────────────────────────────── */
.row{
  display:grid;grid-template-columns:2.4rem 44px minmax(0,1fr) auto auto;
  gap:.9rem;align-items:center;width:100%;
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:.6rem .5rem;cursor:pointer;text-align:left;position:relative;min-height:60px;
  transition:background .18s ease;
}
.row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:0;background:var(--red);opacity:.09;transition:width .25s ease}
.row:hover{background:var(--panel)}
.row:hover::before{width:100%}
.row .n{font-family:var(--m);font-size:.78rem;color:var(--dim-2);font-variant-numeric:tabular-nums}
.row canvas{width:44px;height:44px;display:block;border:1px solid var(--line)}
.row .t{font-weight:600;font-size:.98rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .a{font-size:.8rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.row .g{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;color:var(--dim-2);
  border:1px solid var(--line-2);padding:.1rem .4rem;white-space:nowrap}
.row .r-end{display:flex;align-items:center;justify-content:flex-end;position:relative;min-width:48px}
.row .d{font-family:var(--m);font-size:.8rem;color:var(--dim);font-variant-numeric:tabular-nums;transition:opacity .15s ease}
.row:hover .d,.row:focus-within .d{opacity:0}
.row[aria-current="true"]{background:var(--panel-2)}
.row[aria-current="true"] .n{color:var(--red)}
.row[aria-current="true"] .t{color:var(--red)}
.row .heard{position:absolute;left:0;bottom:-1px;height:2px;background:var(--blue);opacity:.6}
.empty{padding:3rem 0;color:var(--dim);text-align:center}

.foot{border-top:1px solid var(--line);margin-top:3rem;padding:2rem 0 3rem;
  font-size:.82rem;color:var(--dim);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.foot a{color:var(--blue)}

/* ── çalar ─────────────────────────────────────────── */
.player{
  position:fixed;left:0;right:0;bottom:0;z-index:50;
  display:grid;gap:1rem;align-items:center;
  grid-template-columns:56px minmax(140px,200px) minmax(0,1fr) auto auto;
  padding:.6rem clamp(.75rem,3vw,1.5rem) calc(.6rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb,var(--panel) 94%,transparent);
  backdrop-filter:blur(20px);border-top:1px solid var(--line-2);
}
.player::before{content:'';position:absolute;left:0;right:0;top:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--red),transparent);opacity:.7}
.p-art{position:relative;width:56px;height:56px;flex:none}
.p-art canvas{width:56px;height:56px;display:block;border:1px solid var(--line-2)}
.p-eq{position:absolute;inset:auto 0 0 0;height:16px;display:flex;gap:2px;align-items:flex-end;
  padding:0 4px 4px;opacity:0;transition:opacity .3s ease}
.playing .p-eq{opacity:1}
.player .pa{display:none}
.player.playing .pi{display:none}
.player.playing .pa{display:block}
.p-eq i{flex:1;background:var(--red);height:20%}
.p-title{font-weight:600;font-size:.92rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-sub{font-size:.76rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.p-wave{min-width:0}
#wave{width:100%;height:72px;display:block;cursor:pointer}
.p-times{display:flex;justify-content:space-between;font-family:var(--m);font-size:.7rem;color:var(--dim);
  font-variant-numeric:tabular-nums;margin-top:-2px}
.p-ctl{display:flex;gap:.15rem;align-items:center}
.ico{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:0;
  color:var(--dim);cursor:pointer;font-size:1.05rem;transition:color .15s ease,transform .15s ease}
.ico:hover{color:var(--fg)}
.ico:active{transform:scale(.9)}
.ico[aria-pressed="true"]{color:var(--red)}
.ico.play{width:52px;height:52px;background:var(--fg);color:var(--bg);font-size:1.2rem}
.ico.play:hover{background:var(--red);color:#fff}
.ico.sm{width:38px;height:38px;font-size:.95rem}
.p-vol{display:flex;gap:.35rem;align-items:center}
#vol{width:88px;accent-color:var(--red);cursor:pointer}

.dlg{background:var(--panel);color:var(--fg);border:1px solid var(--line-2);padding:1.5rem;max-width:420px}
.dlg::backdrop{background:rgb(0 0 0/.7)}
.dlg h3{margin-bottom:.9rem}
.keys{list-style:none;margin:0 0 1rem;padding:0;font-size:.88rem}
.keys li{padding:.3rem 0;border-bottom:1px solid var(--line);color:var(--dim)}
.keys kbd{margin-right:.4rem;color:var(--fg)}

.auth-dlg{width:100%}
.auth-dlg form{display:flex;flex-direction:column;gap:.25rem;margin-bottom:.9rem}
.auth-dlg label{font-family:var(--m);font-size:.62rem;letter-spacing:.1em;color:var(--dim);margin-top:.5rem}
.auth-dlg input{
  background:var(--surface-2);border:1px solid var(--line-2);color:var(--fg);
  padding:.55rem .6rem;font-size:.92rem;
}
.auth-dlg input:focus{outline:none;border-color:var(--red)}
.auth-err{color:var(--red);font-size:.82rem;margin:.4rem 0 0}
.auth-actions{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-top:.8rem;flex-wrap:wrap}

/* ── hesap paneli (Faz 10): profil / parola / oturumlar ── */
.acc-sec{border-top:1px solid var(--hair);padding-top:.8rem;margin-top:.8rem!important}
.acc-sec-head{display:flex;align-items:center;justify-content:space-between;gap:.6rem;margin-bottom:.5rem}
.sess-list{list-style:none;margin:0;padding:0;max-height:180px;overflow-y:auto;display:flex;flex-direction:column;gap:.35rem}
.sess-item{
  display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  background:var(--surface);border-radius:var(--r-sm);padding:.5rem .6rem;
}
.sess-item .s-info{min-width:0}
.sess-item .s-dev{font-size:.8rem;color:var(--fg);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
.sess-item .s-meta{font-family:var(--m);font-size:.62rem;color:var(--dim-2);display:block;margin-top:.1rem}
.sess-item.current .s-dev::after{content:'· bu cihaz';color:var(--red);font-family:var(--m);font-size:.66rem;margin-left:.4rem}
.sess-item button{
  flex:none;background:transparent;border:1px solid var(--line-2);color:var(--dim);
  padding:.25rem .5rem;font-size:.68rem;cursor:pointer;border-radius:var(--r-sm);
}
.sess-item button:hover{border-color:var(--red);color:var(--red)}

/* ── duyarlı ───────────────────────────────────────── */
@media (max-width:1080px){
  .layout{grid-template-columns:1fr}
  .rail{position:static;display:none}
}
@media (max-width:820px){
  .player{grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:
    "art meta ctl" "wave wave wave";row-gap:.3rem}
  .p-art{grid-area:art;width:44px;height:44px} .p-art canvas{width:44px;height:44px}
  .p-meta{grid-area:meta;min-width:0} .p-ctl{grid-area:ctl}
  .p-wave{grid-area:wave} #wave{height:48px}
  .p-vol{display:none}
  .top .brand .sub{display:none}
  .row{grid-template-columns:2rem 40px minmax(0,1fr) auto;gap:.6rem}
  .row .g{display:none}
}
@media (max-width:560px){
  #bShuffle,#bRepeat{display:none}
  .p-title{font-size:.88rem}
}
@media (max-width:520px){
  .search-wrap{max-width:none}
  .row canvas{display:none}
  .row{grid-template-columns:2rem minmax(0,1fr) auto}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important}
  #backdrop{opacity:.25}
  .brand .dot{animation:none}
}

/* ══ SPOTLIGHT / GLOW ═══════════════════════════════
   21st.dev spotlight-card portu. İmleç konumu :root üzerinde
   --x/--y/--xp/--yp olarak duruyor (glow.js yazıyor); kartlar
   background-attachment:fixed ile aynı viewport uzayını paylaştığı
   için tek yazımdan hepsi besleniyor. */

[data-glow]{
  --radius:4;
  --border:2;
  --size:220;
  --saturation:100;
  --lightness:70;
  --backdrop:hsl(0 0% 60% / .10);
  --border-size:calc(var(--border,2) * 1px);
  --spotlight-size:calc(var(--size,200) * 1px);
  --hue:calc(var(--base,220) + (var(--xp,.5) * var(--spread,200)));
  position:relative;
  border-radius:calc(var(--radius) * 1px);
  border:var(--border-size) solid var(--backdrop);
  background-color:var(--backdrop);
  background-image:radial-gradient(
    var(--spotlight-size) var(--spotlight-size) at
    calc(var(--x,0) * 1px) calc(var(--y,0) * 1px),
    hsl(var(--hue,210) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%) / var(--bg-spot-opacity,.10)),
    transparent);
  background-size:calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-position:50% 50%;
  background-attachment:fixed;
}

[data-glow]::before,
[data-glow]::after{
  pointer-events:none;
  content:'';
  position:absolute;
  inset:calc(var(--border-size) * -1);
  border:var(--border-size) solid transparent;
  border-radius:calc(var(--radius) * 1px);
  background-attachment:fixed;
  background-size:calc(100% + (2 * var(--border-size))) calc(100% + (2 * var(--border-size)));
  background-repeat:no-repeat;
  background-position:50% 50%;
  /* Boyayı yalnızca kenarlık kutusuna hapset — dolgu kutusu maskeyle kesilir. */
  -webkit-mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  mask:linear-gradient(transparent,transparent),linear-gradient(#fff,#fff);
  -webkit-mask-clip:padding-box,border-box;
  mask-clip:padding-box,border-box;
  -webkit-mask-composite:xor;
  mask-composite:intersect;
}

[data-glow]::before{
  background-image:radial-gradient(
    calc(var(--spotlight-size) * .75) calc(var(--spotlight-size) * .75) at
    calc(var(--x,0) * 1px) calc(var(--y,0) * 1px),
    hsl(var(--hue,210) calc(var(--saturation) * 1%) calc(var(--lightness) * .72%) / var(--border-spot-opacity,1)),
    transparent 100%);
  filter:brightness(1.8);
}

[data-glow]::after{
  background-image:radial-gradient(
    calc(var(--spotlight-size) * .5) calc(var(--spotlight-size) * .5) at
    calc(var(--x,0) * 1px) calc(var(--y,0) * 1px),
    hsl(0 0% 100% / var(--border-light-opacity,.9)), transparent 100%);
}

/* Dış hale: aynı kenarlık, çok kalın ve bulanık. */
.glow-outer{
  position:absolute;
  inset:0;
  border:none;
  background:none;
  pointer-events:none;
  opacity:var(--outer,.85);
  border-radius:calc(var(--radius) * 1px);
  filter:blur(calc(var(--border-size) * 9));
  will-change:filter;
}
.glow-outer::before{inset:-9px;border-width:9px}
.glow-outer::after{display:none}

/* İmleç takibi kapalıyken sabit, sönük bir kenarlık kalır. */
.glow-static [data-glow]{background-image:none;--bg-spot-opacity:0}
.glow-static [data-glow]::before{
  background-image:none;
  border-color:hsl(var(--base,220) 70% 55% / .35);
  filter:none;
}
.glow-static [data-glow]::after,
.glow-static .glow-outer{display:none}

/* ══ COVERFLOW ══════════════════════════════════════ */

.cf{--cf-card:clamp(150px,20vw,248px);width:100%;user-select:none}
.cf-rel{position:relative}

.cf-frame{
  /* Dikey dolgu gölgeleri ve yansımayı taşma kırpmasından uzak tutar. */
  padding:2.5rem 0 1rem;
  overflow:hidden;
  outline:none;
  cursor:grab;
  /* Yatay sürükleme bizim; sayfa dikey kaydırmayı korur. */
  touch-action:pan-y;
  /* Sinematik kenar sönümü — kartlar çerçeveye çarpmadan erir. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.cf-frame:active{cursor:grabbing}
.cf-frame:focus-visible{outline:2px solid var(--focus);outline-offset:-2px}

.cf-stage{
  position:relative;
  height:calc(var(--cf-card) * 1.42); /* kapak + yansıma */
  transform-style:preserve-3d;
}

.cf-card{
  position:absolute;
  left:50%;
  top:0;
  width:var(--cf-card);
  will-change:transform,opacity,filter;
  transform-style:preserve-3d;
}
.cf-face{
  display:block;
  position:relative;
  width:100%;
  aspect-ratio:1;
  overflow:hidden;
  border:1px solid var(--line-2);
  box-shadow:0 1.4rem 2.4rem -1rem #000;
}
.cf-card img{width:100%;height:100%;display:block;object-fit:cover;-webkit-user-drag:none}

/* Kapağı geçen ışık — merkezdeki kartta canlanır. */
.cf-sheen{
  position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgb(255 255 255/.22) 50%,transparent 62%);
  background-size:260% 100%;
  background-position:130% 0;
  transition:background-position .9s cubic-bezier(.22,.61,.36,1),opacity .3s ease;
  opacity:0;
}
.cf-card.is-active .cf-sheen{opacity:1;background-position:-30% 0}

/* Yansıma: aynı görselin ters çevrilmiş, silinerek biten kopyası. */
.cf-reflect{
  display:block;position:absolute;top:100%;left:0;right:0;
  height:42%;overflow:hidden;pointer-events:none;opacity:.28;
  transform:scaleY(-1);transform-origin:top;
  -webkit-mask-image:linear-gradient(#000,transparent 78%);
  mask-image:linear-gradient(#000,transparent 78%);
}
.cf-reflect img{height:auto;aspect-ratio:1}

.cf-nav{
  position:absolute;top:calc(var(--cf-card) * .5 + 2.5rem);transform:translateY(-50%);
  /* Yalnızca karuseldeki 3B kartların üstünde durması yeterli — 200 gereksiz
     yüksekti ve sayfa belli bir konuma kaydırılınca sabit çalar barının
     (z-index 50) üstüne biniyordu. */
  z-index:5;width:44px;height:44px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--panel) 78%,transparent);
  border:1px solid var(--line-2);color:var(--fg);cursor:pointer;
  backdrop-filter:blur(8px);transition:background .18s ease,border-color .18s ease;
}
.cf-nav:hover{background:var(--panel-2);border-color:var(--red)}
.cf-prev{left:clamp(.25rem,2vw,1.5rem)}
.cf-next{right:clamp(.25rem,2vw,1.5rem)}

.cf-caption{text-align:center;padding:.4rem 1rem 0;min-height:5.5rem}
.cf-caption.cf-in{animation:cfIn .45s cubic-bezier(.22,.61,.36,1) both}
@keyframes cfIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.cf-title{font-family:var(--h);font-weight:700;font-size:clamp(1.05rem,2.4vw,1.4rem);
  letter-spacing:-.02em;margin:0;text-transform:uppercase}
.cf-sub{margin:.2rem 0 0;font-family:var(--m);font-size:.72rem;letter-spacing:.14em;color:var(--dim)}
.cf-meta{display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap;margin:.7rem 0 0}
.cf-meta div{display:flex;gap:.4rem;align-items:baseline}
.cf-meta dt{font-family:var(--m);font-size:.66rem;letter-spacing:.12em;color:var(--dim-2);margin:0}
.cf-meta dd{margin:0;font-family:var(--m);font-size:.76rem;color:var(--fg);font-variant-numeric:tabular-nums}

.cf-dots{display:flex;gap:.45rem;justify-content:center;margin-top:1rem}
.cf-dot{width:22px;height:22px;padding:0;background:transparent;border:0;cursor:pointer;
  display:grid;place-items:center}
.cf-dot::before{content:'';width:7px;height:7px;background:var(--dim);
  transition:background .2s ease,transform .2s ease}
.cf-dot:hover::before{background:var(--fg)}
/* Pencerenin ucundaki nokta küçülür: o yönde devam var demek. */
.cf-dot.is-edge::before{transform:scale(.5);opacity:.55}
.cf-dot[aria-selected="true"]::before{background:var(--red);transform:scale(1.35);opacity:1}
.cf-count{
  margin:.55rem 0 0;text-align:center;
  font-family:var(--m);font-size:.66rem;letter-spacing:.14em;color:var(--dim-2);
  font-variant-numeric:tabular-nums;
}

/* Karusel bölümü */
.shelf{padding:2.5rem 0 1rem;border-bottom:1px solid var(--line)}
.shelf-h{display:flex;align-items:baseline;gap:.75rem;justify-content:space-between;flex-wrap:wrap}
.shelf-h h2{font-family:var(--m);font-size:.68rem;letter-spacing:.2em;color:var(--dim-2);font-weight:400}
.shelf-h .hint{font-family:var(--m);font-size:.66rem;letter-spacing:.1em;color:var(--dim-2)}

@media (max-width:820px){
  .cf-nav{display:none}
  .cf-frame{padding-top:1.5rem}
  .cf-nav{top:calc(var(--cf-card) * .5 + 1.5rem)}
}

@media (prefers-reduced-motion:reduce){
  .cf-card{transition:none}
  .cf-sheen{display:none}
  .cf-caption.cf-in{animation:none}
}

/* Glow uygulanan bloklar için yerleşim düzeltmeleri.
   Kenarlık gerçek bir kutu getirdiği için içerik nefes payı ister. */
.shelf[data-glow]{
  --base:200; --backdrop:hsl(0 0% 60% / .05);
  padding:1.15rem clamp(.6rem,2vw,1.4rem) 1.4rem;
  border-bottom-width:var(--border-size);
  margin-top:1rem;
}
.album[data-glow]{
  --base:200; --backdrop:hsl(0 0% 60% / .04);
  padding:1rem clamp(.6rem,2vw,1.2rem) .35rem;
}
.album[data-glow] .album-h{margin-top:0}

/* Karusel sekmeleri — mevcut çip/omurga diliyle aynı: mono, aralıklı
   harf, seçilide kırmızı alt çizgi. Yeni bir görsel dil getirmiyor. */
.shelf-tabs{display:flex;border:1px solid var(--line-2);flex:none}
.stab{
  position:relative;background:transparent;border:0;color:var(--dim);cursor:pointer;
  font-family:var(--m);font-size:.68rem;letter-spacing:.16em;
  padding:.5rem .9rem;min-height:38px;
  transition:color .18s ease,background .18s ease;
}
.stab + .stab{border-left:1px solid var(--line-2)}
.stab:hover{color:var(--fg)}
.stab[aria-selected="true"]{color:var(--fg);background:var(--panel-2)}
.stab[aria-selected="true"]::after{
  content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--red);
}
.shelf-h{gap:1rem}

@media (max-width:700px){
  .shelf-h .hint{display:none}
  .shelf-h{justify-content:space-between}
}

/* ══ KLİP ═══════════════════════════════════════════
   Ayrı bir kayan pencere değil: listenin içinde, çalan parçanın altında.
   Öğe gövdenin doğrudan çocuğu ve `position:absolute` — yani belge
   koordinatlarında duruyor, sayfayla birlikte kayıyor. Listeye açılan
   `.clip-slot` yuvası gerçek yer kapladığı için hiçbir şeyin üstüne
   binmiyor.

   iframe DOM'da TAŞINMIYOR ve display:none YAPILMIYOR: ikisi de
   oynatmayı durdurur. Kapatıldığında 1x1 saydam kutuya iniyor,
   ses devam ediyor. */

.clip{
  position:absolute;z-index:20;
  background:var(--panel);
  border:1px solid var(--line-2);
  box-shadow:0 1rem 2rem -1rem #000;
}
.clip[data-state="hidden"]{
  width:1px!important;height:1px;overflow:hidden;
  opacity:0;pointer-events:none;border:0;box-shadow:none;
}

/* Listede klibin oturduğu boşluk. Yüksekliği JS ölçüyor. */
.clip-slot{width:100%;transition:height .2s ease}

.clip-bar{
  display:flex;align-items:center;gap:.4rem;
  padding:.35rem .5rem;border-bottom:1px solid var(--line);
}
.clip-i{width:.95em;height:.95em;color:var(--red);flex:none}
.clip-t{
  font-family:var(--m);font-size:.62rem;letter-spacing:.12em;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1;min-width:0;
}
.clip-btn{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--dim);cursor:pointer;
  transition:color .15s ease;
}
.clip-btn:hover{color:var(--red)}

.clip-body{position:relative;aspect-ratio:16/9;background:#000}
.clip-body iframe,.clip-body>div{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Çalar çubuğunda "klibi göster" — yalnızca klip kapalıyken görünür. */
#bClip[aria-pressed="true"]{color:var(--red)}

@media (prefers-reduced-motion:reduce){ .clip-slot{transition:none} }

/* Gerçek kapak görselleri — üretken tuvalle aynı kutu, aynı çerçeve. */
.row .cv{width:44px;height:44px;display:block;border:1px solid var(--line);object-fit:cover}
.p-art img{width:56px;height:56px;display:block;border:1px solid var(--line-2);object-fit:cover}
@media (max-width:820px){ .p-art img{width:44px;height:44px} }
@media (max-width:520px){ .row .cv{display:none} }

/* ══ ÇALMA KUYRUĞU (UP NEXT & QUEUE) ═════════════════ */
#bQueue{position:relative}
.q-badge{
  position:absolute;top:2px;right:2px;
  background:var(--red);color:#fff;
  font-family:var(--m);font-size:0.6rem;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  padding:0 3px;line-height:1;pointer-events:none;
}

/* ══ PANEL YUVASI (DOCK) ═════════════════════════════
   Çalar çubuğunun üstünde açılıp kapanan sekmeli açılır pencere.
   Modal <dialog> değil: kendi katmanında duran sabit bir panel, bu
   yüzden çalma sürerken sayfa da kullanılabiliyor. */
.dock{
  position:fixed;z-index:60;
  /* Sağ kenarda tam boy çekmece; çalar çubuğunun üstünde biter. */
  top:12px;
  right:max(12px, env(safe-area-inset-right));
  bottom:calc(var(--bar) + 12px + env(safe-area-inset-bottom));
  width:min(560px, calc(100vw - 2rem));
  display:flex;flex-direction:column;
  background:var(--panel);border:1px solid var(--line-2);
  box-shadow:0 -2px 0 var(--red), 0 24px 60px rgb(0 0 0/.6);
  animation:dockIn .22s cubic-bezier(.2,.8,.2,1);
}
@keyframes dockIn{from{opacity:0;transform:translateX(32px)}to{opacity:1;transform:none}}
@keyframes dockUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){ .dock{animation:none} }

.dock-head{
  display:flex;align-items:stretch;gap:.4rem;flex:none;
  border-bottom:1px solid var(--line);background:var(--panel-2);
}
.dock-tabs{display:flex;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.dock-tabs::-webkit-scrollbar{display:none}
/* Sekmeler sığmayınca kaydırma çubuğu gizli olduğu için görünmez
   kalıyordu — kenarlarda soluklaşan bir ipucu, "daha var" demek için. */
.dock-tabs.tabs-fade-r{mask-image:linear-gradient(to right,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 85%,transparent 100%)}
.dock-tabs.tabs-fade-l{mask-image:linear-gradient(to left,#000 85%,transparent 100%);-webkit-mask-image:linear-gradient(to left,#000 85%,transparent 100%)}
.dock-tabs.tabs-fade-l.tabs-fade-r{mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%);-webkit-mask-image:linear-gradient(to right,transparent 0%,#000 8%,#000 92%,transparent 100%)}
.dtab{
  background:transparent;border:0;border-right:1px solid var(--line);
  color:var(--dim);font-family:var(--m);font-size:.66rem;letter-spacing:.14em;
  padding:.7rem .8rem;cursor:pointer;white-space:nowrap;
  display:flex;align-items:center;gap:.35rem;
  border-bottom:2px solid transparent;transition:color .15s ease,background .15s ease;
}
.dtab:hover{color:var(--fg);background:var(--panel)}
.dtab[aria-selected="true"]{color:var(--fg);background:var(--panel);border-bottom-color:var(--red)}
.dtab-badge{
  background:var(--line);color:var(--dim);border:1px solid var(--line-2);
  padding:0 .3rem;font-size:.6rem;line-height:1.5;min-width:16px;text-align:center;
}
.dtab[aria-selected="true"] .dtab-badge{background:var(--red);color:#fff;border-color:var(--red)}
.dock-x{
  flex:none;width:44px;background:transparent;border:0;border-left:1px solid var(--line);
  color:var(--dim);cursor:pointer;font-size:1.05rem;display:grid;place-items:center;
}
.dock-x:hover{color:var(--red)}

.dock-body{flex:1;min-height:0;display:flex;overflow:hidden}
.dock-panel{
  flex:1;min-width:0;min-height:0;overflow-y:auto;
  display:flex;flex-direction:column;gap:.8rem;padding:.9rem 1rem 1rem;
}
.dock-panel[hidden]{display:none}
.dock-panel::-webkit-scrollbar{width:5px}
.dock-panel::-webkit-scrollbar-thumb{background:var(--line-2)}
.dock-note{
  margin:0;font-family:var(--m);font-size:.62rem;letter-spacing:.08em;
  color:var(--dim-2);border-top:1px solid var(--line);padding-top:.5rem;
}
.q-tools{display:flex;gap:.3rem}
.q-grow{flex:1 1 auto;min-height:0}
.q-tall{max-height:none}

@media (max-width:640px){
  .dock{
    right:0;left:0;width:100%;
    top:auto;bottom:calc(var(--bar) + env(safe-area-inset-bottom));
    height:min(78vh, 620px);border-left:0;border-right:0;
    animation-name:dockUp;
  }
  .dtab{padding:.65rem .6rem;font-size:.6rem}
}

.q-clear-btn{min-height:30px;padding:.15rem .6rem;font-size:.72rem}
.q-sec-actions{display:flex;gap:.35rem;align-items:center}
.q-clear-btn.is-off{color:var(--red);border-color:var(--red)}

/* ── uyku zamanlayıcısı ──────────────────────────────── */
.sleep-badge{
  font-family:var(--m);font-size:.62rem;color:var(--red);letter-spacing:.04em;
  margin-left:.3rem;
}
#bSleep[aria-pressed="true"]{border-color:var(--red);color:var(--red)}
.sleep-opts{display:flex;gap:.4rem;flex-wrap:wrap;margin:.7rem 0}
.sleep-opts button{flex:1 1 70px}

.wrap-dlg{max-width:380px}
.wrap-stats{display:flex;gap:.6rem;margin:.8rem 0 1rem}
.wrap-stat{flex:1;display:flex;flex-direction:column;align-items:center;gap:.15rem;
  background:var(--surface);border:1px solid var(--hair);border-radius:var(--r-md);padding:.6rem .3rem}
.wrap-stat b{font-family:var(--m);font-size:1.05rem;color:var(--red)}
.wrap-stat span{font-size:.62rem;letter-spacing:.04em;color:var(--dim)}
.wrap-line{font-size:.82rem;margin:.35rem 0;line-height:1.4}

.q-section{display:flex;flex-direction:column;gap:.35rem;min-height:0}

.q-sec-title{
  display:flex;align-items:center;justify-content:space-between;
  font-family:var(--m);font-size:.66rem;letter-spacing:.16em;
  color:var(--dim-2);font-weight:500;padding:.15rem 0;
}
.q-count-badge{
  background:var(--panel-2);border:1px solid var(--line-2);
  color:var(--dim);padding:.05rem .35rem;font-size:.62rem;
}
.q-now-box{
  background:var(--panel-2);border:1px solid var(--line-2);
  padding:.5rem .7rem;display:flex;align-items:center;gap:.65rem;
}
.q-now-art{width:36px;height:36px;flex:none;object-fit:cover;border:1px solid var(--line)}
.q-now-info{flex:1;min-width:0}
.q-now-title{font-weight:600;font-size:.86rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-now-sub{font-size:.74rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.q-list{
  display:flex;flex-direction:column;gap:3px;
  max-height:220px;overflow-y:auto;padding-right:2px;
}
.q-list::-webkit-scrollbar{width:4px}
.q-list::-webkit-scrollbar-thumb{background:var(--line-2)}

.q-item{
  display:flex;align-items:center;gap:.6rem;
  padding:.4rem .55rem;background:var(--panel);border:1px solid var(--line);
  transition:background .15s ease,border-color .15s ease;
}
.q-item:hover{background:var(--panel-2);border-color:var(--line-2)}
.q-item.dragging{opacity:.35;border-color:var(--red)}
.q-item.drag-over{border-top:2px solid var(--red)}

.q-item-num{font-family:var(--m);font-size:.7rem;color:var(--dim-2);min-width:16px}
.q-item-art{width:32px;height:32px;flex:none;object-fit:cover;border:1px solid var(--line)}
.q-item-info{flex:1;min-width:0;cursor:pointer;text-align:left}
.q-item-t{font-weight:500;font-size:.82rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-item-a{font-size:.7rem;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.q-item-d{font-family:var(--m);font-size:.7rem;color:var(--dim-2);margin-left:auto}

.q-item-actions{display:flex;gap:2px;flex:none}
.q-act-btn{
  width:24px;height:24px;display:grid;place-items:center;
  background:transparent;border:0;color:var(--dim);cursor:pointer;
  transition:color .15s ease;padding:0;
}
.q-act-btn:hover{color:var(--fg)}
.q-act-btn.del:hover{color:var(--red)}

.q-upcoming{max-height:130px}
.q-upcoming .q-item{background:transparent;border-color:transparent;border-bottom:1px solid var(--line)}
.q-upcoming .q-item:hover{background:var(--panel)}

.q-empty-note{
  font-family:var(--m);font-size:.7rem;color:var(--dim-2);
  padding:.8rem 0;text-align:center;border:1px dashed var(--line-2);
}
.q-foot{margin-top:.3rem;display:flex;justify-content:flex-end}

/* ══ SENKRON SÖZLER ═══════════════════════════════════ */
.lyr-box{
  max-height:min(52vh,420px);overflow-y:auto;
  font-family:var(--m);font-size:.86rem;line-height:1.9;
  padding:.6rem .2rem;scroll-behavior:smooth;
}
.lyr-line{color:var(--dim-2);padding:.1rem .3rem;transition:color .25s ease;cursor:pointer}
.lyr-line:hover{color:var(--dim)}
.lyr-line.active{color:var(--fg);font-weight:500}
.lyr-line.active .lyr-tr{color:var(--dim)}
.lyr-tr{display:block;font-size:.76rem;color:var(--dim-2);margin-top:.05rem}

/* ══ CANLI TELEGRAF (shoutbox) ════════════════════════ */
.tg-reacts{display:flex;gap:.25rem}
.tg-react-btn{
  background:transparent;border:1px solid var(--line-2);cursor:pointer;
  font-size:.9rem;line-height:1;padding:.25rem .4rem;border-radius:var(--pill,4px);
}
.tg-react-btn:hover,.tg-react-btn:active{border-color:var(--red);transform:translateY(-1px)}
.tg-list{
  max-height:min(46vh,360px);overflow-y:auto;
  font-family:var(--m);font-size:.78rem;line-height:1.6;
  display:flex;flex-direction:column;gap:.15rem;padding:.3rem 0;
}
.tg-msg{padding:.15rem .2rem;word-break:break-word}
.tg-msg .tg-nick{color:var(--red);margin-right:.4rem}
.tg-msg .tg-when{color:var(--dim-2);font-size:.66rem;margin-right:.4rem}
.tg-form{display:flex;gap:.4rem;margin-top:.5rem}
.tg-form input{
  background:var(--panel-2);border:1px solid var(--line-2);color:var(--fg);
  padding:.45rem .55rem;font-size:.82rem;font-family:var(--m);
}
.tg-form input:focus{outline:none;border-color:var(--red)}
#tgNick{width:6.5rem;flex:none}
#tgText{flex:1;min-width:0}
.tg-burst{
  position:fixed;pointer-events:none;font-size:1.4rem;z-index:80;
  animation:tg-float 1.6s ease-out forwards;
}
@keyframes tg-float{
  0%{transform:translateY(0) scale(.8);opacity:0}
  15%{opacity:1;transform:translateY(-10px) scale(1.1)}
  100%{transform:translateY(-90px) scale(1);opacity:0}
}

/* ══ 10-BANT ANALOG EKOLAYZER (EQ) ═══════════════════ */
#bEQ[aria-pressed="true"]{color:var(--red)}

.eq-presets{display:flex;flex-direction:column;gap:.4rem}
.eq-chips{display:flex;gap:.35rem;flex-wrap:wrap}
.eq-chip{
  background:transparent;border:1px solid var(--line-2);color:var(--dim);
  font-family:var(--m);font-size:.65rem;letter-spacing:.12em;
  padding:.3rem .6rem;cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.eq-chip:hover{background:var(--panel-2);color:var(--fg)}
.eq-chip[aria-checked="true"]{
  background:var(--panel-2);color:var(--fg);border-color:var(--red);
}

.eq-sliders{
  display:grid;grid-template-columns:repeat(10,1fr);gap:.35rem;
  background:var(--panel-2);border:1px solid var(--line-2);
  padding:.9rem .5rem .7rem;align-items:end;
  touch-action:none;   /* mobilde sürgüyü çekerken sayfa kaymasın */
}
.eq-band{
  display:flex;flex-direction:column;align-items:center;gap:.4rem;
}
.eq-val{
  font-family:var(--m);font-size:.62rem;color:var(--dim);font-variant-numeric:tabular-nums;
  min-height:14px;text-align:center;
}
.eq-band.hot .eq-val{color:var(--red)}

/* Analog sürgü. Yerel <input type=range> + writing-mode:vertical
   tarayıcılar arasında tutarsızdı ve tam thumb'ın üstünden tutmayı
   gerektiriyordu. Yerine işaretçi olaylarıyla sürülen kendi faderımız:
   yolun herhangi bir yerine basınca oraya atlıyor, sonra sürükleniyor. */
.eq-fader{
  position:relative;width:100%;height:132px;cursor:ns-resize;
  display:block;background:transparent;border:0;padding:0;
  touch-action:none;
}
.eq-rail{
  position:absolute;left:50%;top:0;bottom:0;width:4px;transform:translateX(-50%);
  background:var(--bg);border:1px solid var(--line);
}
.eq-zero{position:absolute;left:50%;top:50%;width:16px;height:1px;
  transform:translate(-50%,-50%);background:var(--line-2)}
.eq-fill{
  position:absolute;left:50%;width:4px;transform:translateX(-50%);
  background:var(--red);opacity:.8;
}
.eq-knob{
  position:absolute;left:50%;width:22px;height:12px;
  transform:translate(-50%,-50%);
  background:var(--fg);border:1px solid var(--line-2);
  box-shadow:0 1px 0 rgb(0 0 0/.6);
  pointer-events:none;
}
.eq-knob::after{content:'';position:absolute;left:2px;right:2px;top:50%;height:1px;
  background:rgb(0 0 0/.45);transform:translateY(-50%)}
.eq-fader:hover .eq-knob,.eq-fader.drag .eq-knob{background:var(--red)}
.eq-fader.drag .eq-fill{opacity:1}
.eq-fader:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

.eq-freq{
  font-family:var(--m);font-size:.65rem;color:var(--dim-2);font-weight:500;
  text-align:center;margin-top:2px;
}

@media (max-width:560px){
  .eq-sliders{gap:.1rem;padding:.7rem .2rem .5rem}
  .eq-freq{font-size:.56rem}
  .eq-val{font-size:.54rem}
  .eq-fader{height:104px}
  .eq-knob{width:18px;height:10px}
}

/* ══ FAVORİ (KALP) ══════════════════════════════════ */
#bLike[aria-pressed="true"]{color:var(--red)}
#bLike[aria-pressed="true"] svg{fill:var(--red)}



.q-item-when{
  font-family:var(--m);font-size:.62rem;color:var(--dim-2);
  margin-left:auto;white-space:nowrap;
}
.ico:disabled{opacity:.35;cursor:default}
.ico:disabled:hover{color:var(--dim)}
.row .r-end{min-width:86px;gap:.15rem}

/* ══ ÜST ŞERİT PANEL DÜĞMELERİ ══════════════════════ */
.top-nav{display:flex;gap:.3rem;flex:none}
.nav-btn{
  display:flex;align-items:center;gap:.4rem;
  font-family:var(--m);font-size:.62rem;letter-spacing:.14em;
  padding:.45rem .6rem;white-space:nowrap;
}
.nav-btn svg{width:15px;height:15px;flex:none}
.nav-btn[aria-pressed="true"]{color:var(--fg);border-color:var(--red)}
.nav-btn[aria-pressed="true"] svg{color:var(--red)}
#tFav[data-has="1"] svg{fill:var(--red);color:var(--red)}
.nav-badge{
  background:var(--red);color:#fff;border:1px solid var(--red);
  padding:0 .28rem;font-size:.58rem;line-height:1.55;min-width:15px;text-align:center;
}
@media (max-width:1180px){ .nav-t{display:none} .nav-btn{padding:.45rem .5rem} }
@media (max-width:720px){ #tQueue,#tEQ{display:none} }


/* ══════════════════════════════════════════════════════
   SADELEŞTİRME KATMANI
   Geri bildirim: "çok kare, çok çizgi, karışık; butonlar belli olsun;
   sekmeler yuvarlak pill olsun." Kimlik (koyu zemin, kayıt kırmızısı,
   mono etiketler, editoryal tipografi) duruyor; değişen kabuk:
   ayırıcı çizgiler yerine yüzey farkı, keskin köşe yerine yarıçap.
   ══════════════════════════════════════════════════════ */

/* ── 1. SEKMELER: yuvarlak pill ───────────────────── */
.dock-tabs,.shelf-tabs{
  display:inline-flex;gap:2px;flex:none;
  background:var(--surface);border:1px solid var(--hair);
  border-radius:var(--pill);padding:3px;
}
.dock-tabs{flex:0 1 auto;min-width:0;overflow-x:auto;scrollbar-width:none}

.dtab,.stab{
  border:0;border-radius:var(--pill);
  background:transparent;color:var(--dim);cursor:pointer;
  font-family:var(--m);font-size:.68rem;letter-spacing:.1em;
  padding:.5rem .95rem;min-height:34px;white-space:nowrap;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:background .18s ease,color .18s ease;
}
.dtab:hover,.stab:hover{color:var(--fg);background:var(--ov-04)}
.dtab[aria-selected="true"],.stab[aria-selected="true"]{
  background:var(--surface-2);color:var(--fg);box-shadow:0 1px 2px rgb(0 0 0/.4);
}
.stab[aria-selected="true"]::after{display:none}   /* alttaki kırmızı çizgi kalktı */
.stab + .stab{border-left:0}
.dtab-badge{
  border:0;border-radius:var(--pill);background:var(--ov-08);color:var(--dim);
  padding:0 .4rem;font-size:.58rem;line-height:1.6;min-width:18px;
}
.dtab[aria-selected="true"] .dtab-badge{background:var(--red);color:#fff}

/* ── 2. BUTONLAR: dolu yüzey, yuvarlak, belirgin ──── */
.ghost{
  background:var(--surface);border:1px solid transparent;border-radius:var(--pill);
  color:var(--fg);font-weight:500;
}
.ghost:hover{background:var(--surface-2);border-color:transparent;color:var(--fg)}
.ghost.sm{border-radius:var(--pill)}

/* Birincil eylem: dolu ve net. "Albümü çal", "Hepsini çal". */
.play-all,#favPlayAll,#histPlayAll,#shuffleAll{
  background:var(--fg);color:var(--bg);font-weight:600;border:0;
}
.play-all:hover,#favPlayAll:hover,#histPlayAll:hover,#shuffleAll:hover{
  background:var(--red);color:#fff;
}
.play-all svg,#shuffleAll svg{stroke-width:2}

.nav-btn{border-radius:var(--pill)}
.nav-btn[aria-pressed="true"]{background:var(--surface-2);color:var(--fg);border-color:transparent}
.nav-btn[aria-pressed="true"] svg{color:var(--red)}
.nav-badge{border:0;border-radius:var(--pill);padding:0 .32rem}

.radio-btn{border-radius:var(--pill);background:var(--surface);border-color:transparent}
.radio-btn[aria-pressed="true"]{background:var(--red-dim);border-color:transparent;color:#fff}

/* Çalar düğmeleri: dokunulabilir daire, imleç üstündeyken zemin çıkıyor */
.ico{border-radius:50%}
.ico:hover{background:var(--ov-07);color:var(--fg)}
.ico.play{border-radius:50%}
.ico[aria-pressed="true"]{background:rgb(255 45 32/.12)}
#bDJ[aria-pressed="true"]{background:rgb(255 176 32/.12)}

.chip{border-radius:var(--pill);background:var(--surface);border-color:transparent;color:var(--dim)}
.chip:hover{background:var(--surface-2);color:var(--fg);border-color:transparent}
.chip[aria-pressed="true"]{background:var(--red);color:#fff}

.eq-chip{border-radius:var(--pill);background:var(--surface);border-color:transparent}
.eq-chip:hover{background:var(--surface-2)}
.eq-chip[aria-checked="true"]{background:var(--red);color:#fff;border-color:transparent}

#q{border-radius:var(--pill);background:var(--surface);border-color:transparent;padding-left:2.6rem}
#q:focus{background:var(--surface-2);border-color:transparent;box-shadow:0 0 0 2px rgb(255 45 32/.35)}
kbd{border-radius:6px;border-color:transparent;background:var(--ov-07)}

/* ── 3. ÇİZGİLERİ AZALT ───────────────────────────── */
.top{border-bottom:1px solid var(--hair)}
.filters{border-bottom:0;padding:1rem 0}
.foot{border-top:1px solid var(--hair)}
.keys li{border-bottom:0;padding:.42rem 0}
.dlg{border-radius:var(--r-lg);border-color:var(--hair)}

/* Albüm başlığı: 2px beyaz çizgi yerine ince saç çizgisi */
.album-h{border-bottom:1px solid var(--hair);padding-bottom:1rem;margin-bottom:.4rem}

/* Yıl omurgası: hücreleri ayıran dikey çizgiler yerine boşluk + yarıçap */
.spine{border-top:0;gap:.4rem;margin-top:2rem}
.spine button{border-right:0;border-radius:var(--r);background:var(--surface);min-height:58px}
.spine button:hover{background:var(--surface-2)}
.spine button::after{left:.7rem;right:.7rem;bottom:.5rem;width:auto;transform:scaleX(0);
  transform-origin:left;transition:transform .3s ease}
.spine button:hover::after,.spine button[aria-current="true"]::after{width:auto;transform:scaleX(1)}

/* Kenar çubuğu: sol çizgi yerine seçili öğede yuvarlak zemin */
.rail li a{
  border-left:0;border-radius:var(--r-sm);padding:.5rem .7rem;margin-bottom:2px;
}
.rail li a:hover{background:var(--surface)}
.rail li a[aria-current="true"]{background:var(--surface-2);color:var(--fg)}

/* Parça satırı: ayırıcı çizgi yok, yuvarlak vurgu var */
.row{border-bottom:0;border-radius:var(--r);padding:.55rem .7rem}
.row::before{border-radius:var(--r)}
.row:hover{background:var(--surface)}
.row[aria-current="true"]{background:var(--surface-2)}
.row canvas,.row .cv{border:0;border-radius:var(--r-sm)}
.row .g{border:0;background:var(--ov-05);border-radius:var(--pill);color:var(--dim)}

.row .heard{left:.7rem;bottom:.3rem;height:2px;border-radius:var(--pill);
  background:var(--blue);opacity:.45}

/* ── 4. PANEL YUVASI ──────────────────────────────── */
.dock{
  border:1px solid var(--hair);border-radius:var(--r-lg);
  box-shadow:0 24px 60px rgb(0 0 0/.55);overflow:hidden;
  background:color-mix(in srgb,var(--panel) 96%,transparent);
  backdrop-filter:blur(18px);
}
.dock-head{background:transparent;border-bottom:1px solid var(--hair);
  align-items:center;padding:.6rem .7rem;gap:.5rem}
.dock-x{border-left:0;border-radius:50%;width:34px;height:34px}
.dock-x:hover{background:var(--ov-07);color:var(--fg)}
.dock-note{border-top:0;color:var(--dim-2)}

.q-now-box{border:0;border-radius:var(--r);background:var(--surface)}
.q-now-art,.q-item-art{border:0;border-radius:6px}
.q-item{border:0;border-radius:var(--r-sm);background:transparent;padding:.45rem .55rem}
.q-item:hover{background:var(--surface);border-color:transparent}
.q-item.drag-over{border-top:0;box-shadow:inset 0 2px 0 var(--red)}
.q-upcoming .q-item{border-bottom:0}
.q-empty-note{border:1px dashed var(--hair);border-radius:var(--r);color:var(--dim-2)}
.q-act-btn{border-radius:50%}
.q-act-btn:hover{background:var(--ov-08)}
.q-count-badge{border:0;border-radius:var(--pill);background:var(--ov-08)}

/* ── 5. EKOLAYZER ─────────────────────────────────── */
.eq-sliders{border:0;border-radius:var(--r);background:var(--surface)}
.eq-rail{border:0;border-radius:var(--pill);background:var(--ov-08);width:5px}
.eq-fill{border-radius:var(--pill);width:5px}
.eq-knob{border:0;border-radius:var(--pill);height:14px;width:24px;
  box-shadow:0 2px 6px rgb(0 0 0/.55)}
.eq-knob::after{left:6px;right:6px}

/* ── 6. ÇALAR ─────────────────────────────────────── */
.player{border-top:1px solid var(--hair)}
.player::before{opacity:.35}
.p-art canvas,#pArtImg{border:0;border-radius:var(--r-sm)}
.badge-live{border-radius:var(--pill);padding:.1rem .45rem}

/* ── 7. RAF (KAPAK KARUSELİ) ──────────────────────── */
.shelf-h h2{color:var(--dim)}

/* ══ ÇALMA LİSTELERİ ════════════════════════════════ */
.row .r-end{min-width:104px}


.pl-new{display:flex;gap:.4rem}
.pl-new input{
  flex:1;min-width:0;background:var(--surface);border:1px solid transparent;
  border-radius:var(--pill);color:var(--fg);padding:.45rem .9rem;font-size:.86rem;
}
.pl-new input::placeholder{color:var(--dim-2)}
.pl-new input:focus{outline:none;background:var(--surface-2);box-shadow:0 0 0 2px rgb(255 45 32/.35)}
.pl-new button{flex:none}

.pl-back{
  display:inline-flex;align-items:center;gap:.35rem;background:transparent;border:0;
  color:var(--fg);cursor:pointer;padding:0;font-family:var(--m);font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;min-width:0;
}
.pl-back:hover{color:var(--red)}
#plTitle{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:22ch}

/* Satırdaki "listeye ekle" açılır menüsü */
.pl-menu{
  position:fixed;z-index:70;min-width:220px;max-width:280px;max-height:320px;overflow-y:auto;
  background:color-mix(in srgb,var(--panel) 97%,transparent);backdrop-filter:blur(18px);
  border:1px solid var(--hair);border-radius:var(--r);padding:4px;
  box-shadow:0 18px 44px rgb(0 0 0/.55);
}
.pl-mi{
  display:flex;align-items:center;gap:.5rem;width:100%;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--fg);
  padding:.5rem .65rem;cursor:pointer;text-align:left;font-size:.85rem;
}
.pl-mi:hover,.pl-mi:focus-visible{background:var(--surface-2);outline:none}
.pl-mi-t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-mi-c{font-family:var(--m);font-size:.68rem;color:var(--dim-2)}
.pl-mi-new{
  border-top:1px solid var(--hair);border-radius:0 0 var(--r-sm) var(--r-sm);
  margin-top:2px;color:var(--dim);font-family:var(--m);font-size:.72rem;letter-spacing:.06em;
}
.pl-mi-new:hover{color:var(--fg)}
.pl-mi-empty{padding:.6rem .65rem;color:var(--dim-2);font-size:.8rem}

/* ══ BİLDİRİM ═══════════════════════════════════════ */
.toast{
  position:fixed;left:50%;bottom:calc(var(--bar) + 20px + env(safe-area-inset-bottom));
  transform:translate(-50%,12px);z-index:80;pointer-events:none;
  background:var(--surface-2);color:var(--fg);border:1px solid var(--hair);
  border-radius:var(--pill);padding:.55rem 1.1rem;font-size:.85rem;
  box-shadow:0 12px 30px rgb(0 0 0/.5);
  opacity:0;transition:opacity .2s ease,transform .2s ease;
}
.toast.on{opacity:1;transform:translate(-50%,0)}

@media (max-width:1180px){ #tList .nav-t{display:none} }
@media (max-width:900px){ #tList{display:none} }

/* ══ SATIR EYLEM DÜĞMELERİ ══════════════════════════
   Üçü tek bir konumlanmış grupta duruyor. Önceden kalp akışta,
   diğer ikisi absolute'tu; kalp ile liste düğmesi aynı noktaya düşüp
   üst üste biniyordu. Grup sağa sabit, düğmeler flex ile diziliyor. */
.row .r-end{position:relative;min-width:112px;justify-content:flex-end}
.row .d{transition:opacity .15s ease}

.row-acts{
  position:absolute;right:0;top:50%;transform:translateY(-50%);
  display:flex;align-items:center;gap:5px;
}
.row-acts > button{
  width:28px;height:28px;flex:none;display:grid;place-items:center;padding:0;
  background:var(--ov-08);border:0;border-radius:50%;color:var(--dim);
  cursor:pointer;opacity:0;pointer-events:none;
  transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.row:hover .row-acts > button,
.row:focus-within .row-acts > button{opacity:1;pointer-events:auto}
.row-acts > button:hover{background:var(--red);color:#fff}

/* Favori satırlarda kalp, imleç üstünde olmasa da görünür kalıyor;
   süre en sağda kendi yerinde durduğu için üst üste binmiyor. */
.row .row-fav.on{opacity:1;pointer-events:auto;background:rgb(255 45 32/.16);color:var(--red)}
.row .row-fav.on svg{fill:var(--red)}
.row .row-q.added{opacity:1;pointer-events:auto;background:rgb(255 176 32/.18);color:var(--amber)}

@media (max-width:560px){
  .row .r-end{min-width:104px}
  .row-acts{gap:3px}
  .row-acts > button{width:26px;height:26px}
}

/* ══ YIL OMURGASI: kutu ızgarası yerine kompakt haplar ═══ */
.spine{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1.6rem;border-top:0}
.spine button{
  flex:0 0 auto;min-height:0;padding:.4rem .9rem;border-radius:var(--pill);
  background:var(--surface);border:0;display:inline-flex;align-items:baseline;gap:.45rem;
  overflow:visible;
}
.spine button:hover{background:var(--surface-2)}
.spine button::after{display:none}       /* alttaki kırmızı çubuk kalktı */
.spine .y{font-family:var(--m);font-weight:500;font-size:.82rem;display:inline;letter-spacing:.06em}
.spine .c{font-family:var(--m);font-size:.66rem;color:var(--dim);letter-spacing:.04em;display:inline}
.spine button[aria-current="true"]{background:var(--red)}
.spine button[aria-current="true"] .y{color:#fff}
.spine button[aria-current="true"] .c{color:rgb(255 255 255/.75)}

/* Üst şeritte yalnız içerik panelleri kaldı (kuyruk ve ekolayzer
   çalar çubuğunda zaten var) — şerit nefes alsın. */
@media (max-width:1080px){ .nav-t{display:none} }
@media (max-width:820px){ #tHist{display:none} }
@media (max-width:620px){ .top-nav{display:none} }

/* ══ FAZ 9 — EKRAN GÖRSELLEŞTİRİCİLERİ ══════════════
   /admin altındaki "Ekran Görselleştiricileri" ayarı kapatılırsa
   sekme hiç görünmüyor ve çizim döngüsü hiç kurulmuyor. */
.viz-stage{
  position:relative;background:#08080A;border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/6;min-height:150px;
}
#vizCanvas{display:block;width:100%;height:100%}
.viz-stage::after{                       /* CRT tarama çizgileri */
  content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background:repeating-linear-gradient(
    to bottom, rgb(0 0 0/0) 0 2px, rgb(0 0 0/.32) 2px 3px);
}
.viz-stage.no-scan::after{display:none}
#vizModes{flex-wrap:nowrap;gap:.25rem}
#vizModes .eq-chip{padding:.25rem .55rem;font-size:.6rem}

/* ══ CANLI DİNLEYİCİ SAYACI ═════════════════════════ */
.live-count{
  display:inline-flex;align-items:center;gap:.4rem;flex:none;
  background:var(--surface);border-radius:var(--pill);
  padding:.4rem .75rem;font-family:var(--m);font-size:.66rem;letter-spacing:.1em;
  color:var(--dim);white-space:nowrap;
}
.live-count .lc-dot{
  width:7px;height:7px;border-radius:50%;background:var(--dim-2);flex:none;
  transition:background .3s ease,box-shadow .3s ease;
}
.live-count[data-live="1"] .lc-dot{
  background:var(--red);box-shadow:0 0 8px var(--red);
  animation:pulse 2s ease-out infinite;
}
.live-count[data-live="1"]{color:var(--fg)}
.live-count .lc-n{color:var(--fg);font-weight:600;font-variant-numeric:tabular-nums}
@media (max-width:900px){ .live-count .lc-t{display:none} }
@media (max-width:520px){ .live-count{display:none} }

/* ══ PENCERELER (dialog) DÜZENİ ══════════════════════
   Alt "Kapat" düğmesi yerine köşede X; hesap penceresi kartlı. */
.dlg{position:relative;padding:1.6rem;width:min(440px,calc(100vw - 2rem));max-width:none}
.dlg h3{font-size:1.25rem;margin:0 0 .9rem;padding-right:2.5rem}
.dlg-x{position:absolute;top:.8rem;right:.8rem;margin:0!important;display:block!important}
.dlg-close{
  width:36px;height:36px;border:0;border-radius:var(--pill);cursor:pointer;
  background:var(--surface);color:var(--dim);display:grid;place-items:center;
  transition:background .15s ease,color .15s ease;
}
.dlg-close:hover{background:var(--surface-2);color:var(--fg)}

.auth-dlg input,.acc-row input{
  background:var(--surface);border:1px solid transparent;border-radius:var(--r);
  color:var(--fg);padding:.65rem .8rem;font-size:.95rem;min-width:0;
}
.auth-dlg input:focus,.acc-row input:focus{outline:none;background:var(--surface-2);box-shadow:0 0 0 2px rgb(255 45 32/.45)}
.auth-dlg input::placeholder{color:var(--dim-2)}
.auth-dlg #authOut .auth-actions{justify-content:flex-start;gap:.5rem;margin-top:1rem}
#authSubmit{background:var(--fg);color:var(--bg);font-weight:600;padding:.6rem 1.2rem}
#authSubmit:hover{background:var(--red);color:#fff}

.acc-id{display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;padding-right:2.5rem}
.acc-id h3{margin:0;padding:0;font-size:1.15rem}
.acc-id p{margin:.1rem 0 0;font-size:.85rem;overflow-wrap:anywhere}
.acc-who{min-width:0}
.acc-avatar{
  flex:none;width:52px;height:52px;border-radius:var(--pill);display:grid;place-items:center;
  background:var(--red);color:#fff;font-family:var(--h);font-weight:700;font-size:1.4rem;
}
.auth-dlg .acc-card{
  background:var(--ov-04);border-radius:var(--r);padding:.8rem .9rem;
  margin:0 0 .6rem;gap:.35rem;border:0;
}
div.acc-card{display:flex;flex-direction:column;gap:.35rem;background:var(--ov-04);border-radius:var(--r);padding:.8rem .9rem;margin-bottom:.6rem}
.auth-dlg .acc-card label,.acc-card label{margin:0;font-family:var(--m);font-size:.62rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase}
.acc-row{display:flex;gap:.5rem;align-items:stretch}
.acc-row input{flex:1}
.acc-row .ghost{flex:none;background:var(--surface-2)}
.acc-row .ghost:hover{background:var(--fg);color:var(--bg)}
.acc-sec-head{margin:0}
.acc-card .sess-item{background:var(--surface)}
.acc-foot{display:flex;gap:.5rem;justify-content:space-between;margin-top:.9rem}
.acc-foot .ghost{flex:1;justify-content:center}
.ghost.danger{color:var(--red)}
.ghost.danger:hover{background:var(--red);color:#fff}


/* ══ HATIRA KÖŞESİ KATMANI ═══════════════════════════ */
.memo-view{
  position:fixed;z-index:55;left:0;right:0;top:0;
  bottom:calc(var(--bar) + env(safe-area-inset-bottom));
  background:var(--bg);animation:memoIn .2s ease-out;
}
.memo-view iframe{width:100%;height:100%;border:0;display:block;background:var(--bg)}
.memo-close{
  position:absolute;top:.8rem;left:max(1rem,calc((100vw - 860px)/2));z-index:2;
  height:40px;padding:0 1.1rem 0 .8rem;border:0;border-radius:var(--pill);cursor:pointer;
  background:var(--surface);color:var(--fg);display:flex;align-items:center;gap:.4rem;
  font-weight:500;font-size:.9rem;
}
.memo-close:hover{background:var(--surface-2)}
@keyframes memoIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.memo-view{animation:none}}

/* kayıt satırı: hatıra rozeti ve yazma düğmesi */
.row-memo-n{
  display:inline-flex;align-items:center;gap:.25rem;margin-left:.5rem;padding:0 .5rem;height:19px;
  border:0;border-radius:var(--pill);background:rgb(255 45 32/.16);color:var(--red);cursor:pointer;
  font-family:var(--m);font-size:.64rem;vertical-align:middle;
}
.row-memo-n::before{content:"";width:9px;height:8px;border-radius:2px;background:currentColor;opacity:.85}
.row-memo-n:hover{background:var(--red);color:#fff}

.panel-q{
  width:100%;background:var(--surface);border:1px solid transparent;border-radius:var(--pill);
  color:var(--fg);padding:.5rem .95rem;font-size:.88rem;margin:0 0 .4rem;
}
.panel-q:focus{outline:none;background:var(--surface-2);box-shadow:0 0 0 2px rgb(255 45 32/.4)}
.q-empty-note .ghost{margin-top:.6rem}

/* ══ MOBİL ÜST ŞERİT ═════════════════════════════════
   Eskiden üst şerit tek satırdı ve taşıyordu (sayfa yatayda ~900px'e
   uzayıp çalar çubuğunu ekran dışına itiyordu), Favoriler/Listeler/
   Geçmiş/Hatıra da gizliydi. Şimdi üç satır: marka+radyo+hesap,
   arama, kaydırılan gezinme şeridi. */
@media (max-width:620px){
  .top{flex-wrap:wrap;gap:.5rem;position:relative;padding-block:.6rem}
  .top .brand{order:1}
  .top .radio-btn{order:2;margin-right:auto}
  .top #bAcct,.top #bSleep,.top #themeToggle{order:3}
  .top #help{display:none}
  .top .search-wrap{order:10;flex:1 1 100%;max-width:none;margin:0}
  .top .top-nav{
    display:flex;order:11;flex:1 1 100%;gap:.4rem;overflow-x:auto;scrollbar-width:none;
    margin-inline:calc(-1 * clamp(1rem,4vw,2.5rem));padding-inline:clamp(1rem,4vw,2.5rem);
  }
  .top .top-nav::-webkit-scrollbar{display:none}
  .top-nav .nav-btn{flex:none}
  .top-nav .nav-t,#tList .nav-t{display:inline}
  #tHist,#tList{display:inline-flex}
  #bAcct .nav-t{display:none}
  html,body{overflow-x:hidden}
}

/* Açık tema: arka plan tuvali kırmızı bir pus bırakıyordu; soluk tut. */
:root[data-theme="light"] #backdrop{opacity:.14}
.top-nav a.nav-btn{text-decoration:none}