:root{color-scheme:dark;--bg:#230d0e;--line:#ffffff25;--pink:#f6323c;--purple:#f4565d;--text:#fcf9ff;--muted:#d9a1a3;font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
*{box-sizing:border-box}html,body{min-height:100%;margin:0}html{background:#200c0d}body{overflow-x:hidden;color:var(--text);background:radial-gradient(ellipse at 5% 5%,#62181b75,transparent 36%),radial-gradient(ellipse at 90% 32%,#6c222676,transparent 45%),radial-gradient(ellipse at 50% 75%,#7a202535,transparent 45%),linear-gradient(155deg,#361112,#311214 53%,#240e0f);background-attachment:fixed;-webkit-tap-highlight-color:transparent}button,input,textarea{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid #f59a9e;outline-offset:3px}
.station{width:100%;min-height:100svh;padding:calc(env(safe-area-inset-top,0px) + 18px) 17px calc(138px + env(safe-area-inset-bottom,0px));display:flex;justify-content:center;position:relative}
.station-inner{width:min(100%,570px);margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center}
.app-head{width:100%;display:flex;flex-direction:column;align-items:center}.brand-line{width:100%;display:flex;justify-content:center;gap:clamp(10px,4vw,24px);align-items:center}.wordmark{display:flex;align-items:baseline;gap:9px;white-space:nowrap}.wordmark strong{font-style:italic;font-size:clamp(30px,8vw,50px);letter-spacing:-2.5px;font-weight:950}.wordmark span{font-size:clamp(18px,5.2vw,30px);letter-spacing:clamp(3px,1.6vw,9px);font-weight:350;color:#fccacc}.brand-wave{display:flex;align-items:center;justify-content:center;gap:3px;height:29px;flex-shrink:0}.brand-wave i{width:4px;height:var(--h);border-radius:5px;background:linear-gradient(180deg,#ff5d65,#f33c45)}.brand-wave i:nth-child(1),.brand-wave i:nth-child(5){--h:12px}.brand-wave i:nth-child(2),.brand-wave i:nth-child(4){--h:22px}.brand-wave i:nth-child(3){--h:31px}
.tagline{margin:10px 0 0;font-size:clamp(8px,2.3vw,13px);letter-spacing:clamp(1.5px,.9vw,4.6px);font-weight:800;color:#e8b0b3}.live-pill{display:inline-flex;margin-top:25px;align-items:center;gap:11px;white-space:nowrap;border:1.5px solid #f27f84a6;border-radius:60px;padding:10px 21px;background:#52232555;box-shadow:0 0 20px #f4424a25;font-size:12px;font-weight:850;letter-spacing:2.3px}.live-dot{width:9px;height:9px;background:#fc3841;border-radius:50%;box-shadow:0 0 12px #fc3841bf;animation:breath 1.7s ease-in-out infinite}
.vinyl-stage{width:100%;height:clamp(245px,38svh,400px);display:grid;place-items:center;position:relative;margin-top:6px}.vinyl-glow{width:min(82vw,392px,100%);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,#e30a175e 0%,#b8001638 48%,#72000826 63%,transparent 75%);filter:blur(14px);position:absolute}.vinyl{width:min(78vw,370px,100%);max-height:95%;aspect-ratio:1;border-radius:50%;padding:11px;position:relative;display:grid;place-items:center;background:linear-gradient(145deg,#54282a,#2f1011 70%,#864a4d);box-shadow:0 0 0 2px #ab636618,0 16px 36px #0008,0 0 52px #c0424835;will-change:transform}.vinyl-disk{width:100%;height:100%;display:grid;place-items:center;border-radius:50%;border:3px solid #a46c6f44;background:repeating-radial-gradient(circle at 50% 50%,#422123 0px,#422223 6px,#361416 8px,#311517 14px,#492627 16px,#2e1416 21px);box-shadow:inset 0 0 24px #000c,0 2px 4px #241011}.vinyl-center{width:36%;aspect-ratio:1;display:flex;flex-direction:column;justify-content:center;align-items:center;border-radius:50%;background:linear-gradient(125deg,#f53a43,#e93c44);border:4px solid #f39fa366;box-shadow:0 0 30px #eb4b5375,0 0 0 7px #2d0a0c70;transform:rotate(-4deg)}.vinyl-center strong{font-size:clamp(20px,5vw,33px);font-style:italic;letter-spacing:-1px;font-weight:1000}.vinyl-center small{font-size:clamp(8px,2.1vw,12px);letter-spacing:5px;font-weight:900;margin-top:4px}
.equalizer{height:32px;margin-top:2px;display:flex;gap:5px;justify-content:center;align-items:center}.equalizer i{width:5px;border-radius:5px;background:linear-gradient(to top,#a90012,#e30a17,#ff6155);height:var(--height);transform-origin:center;opacity:.9}.equalizer i:nth-child(1),.equalizer i:nth-child(13){--height:9px}.equalizer i:nth-child(2),.equalizer i:nth-child(12){--height:18px}.equalizer i:nth-child(3),.equalizer i:nth-child(11){--height:12px}.equalizer i:nth-child(4),.equalizer i:nth-child(10){--height:26px}.equalizer i:nth-child(5),.equalizer i:nth-child(9){--height:15px}.equalizer i:nth-child(6),.equalizer i:nth-child(8){--height:29px}.equalizer i:nth-child(7){--height:24px}
body.is-playing .equalizer i{animation:equalize 1.2s ease-in-out infinite;animation-delay:calc(var(--n,1) * -.11s)}body.is-playing .vinyl{animation:vinyl-turn 35s linear infinite}
.nowplaying{width:100%;max-width:560px;margin-top:18px;text-align:center}.overline{font-weight:900;letter-spacing:5px;font-size:clamp(10px,2.8vw,13px);color:#e4acaf}.nowplaying h1{font-weight:880;letter-spacing:-.9px;font-size:clamp(20px,5.9vw,29px);line-height:1.27;margin:15px auto 8px;max-width:100%;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.song-artist{font-size:clamp(14px,4vw,20px);margin:0;color:#e8b5b7;line-height:1.36;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere}.music-chip{margin:22px auto 4px;display:inline-flex;gap:12px;align-items:center;border:1px solid #ee909555;border-radius:50px;padding:10px 22px;background:#4f202270;font-size:12px;font-weight:900;letter-spacing:3px}.music-chip svg{width:18px;height:18px}
.live-info{width:100%;margin-top:auto;padding-top:27px}.signal-line{width:100%;height:7px;background:#77484a66;border-radius:99px;overflow:hidden}.signal-value{height:100%;width:35%;border-radius:99px;background:linear-gradient(90deg,#fa3841,#fa585f);transition:width 1s ease}.live-info-row{display:flex;align-items:center;justify-content:space-between;margin-top:12px;font-size:clamp(9px,2.5vw,13px);letter-spacing:2px;font-weight:850;color:#e5b0b2}.live-info-row>span:first-child{display:inline-flex;gap:9px;align-items:center}.live-info-row svg{width:20px;height:20px;color:#f63e47}
.bottom-dock{position:fixed;left:50%;transform:translateX(-50%);bottom:max(10px,env(safe-area-inset-bottom,0px));width:min(calc(100% - 18px),650px);min-height:80px;z-index:12;border:1px solid #df7f8345;background:linear-gradient(130deg,#4d1f21F5,#2f1617F5);backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);border-radius:30px;box-shadow:0 18px 45px #140506b5,0 0 12px #c84a5027;display:grid;grid-template-columns:1fr 1fr 1.16fr 1fr 1fr;align-items:center;padding:7px 6px}
.nav-item{color:#fdcacd;background:transparent;border:0;min-height:58px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:5px;position:relative;padding:7px 1px 6px}.nav-item svg{width:23px;height:23px;stroke:#ffccce}.nav-item span{font-size:clamp(9px,2.4vw,12px);font-weight:750;white-space:nowrap}.nav-item.active:after{content:"";width:25px;height:3px;background:linear-gradient(90deg,#ff414a,#ef555c);border-radius:99px;position:absolute;bottom:0}.main-play{border:none;border-radius:50%;aspect-ratio:1;width:clamp(64px,18vw,83px);margin:-35px auto 0;display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#fa424a,#df3f46);border:4px solid #f19ea277;box-shadow:0 0 0 12px #ce333a18,0 6px 28px #cc343b77;transition:transform .15s,box-shadow .15s}.main-play:active{transform:scale(.95)}.main-play svg{height:31px;width:31px}
.top-buttons{position:fixed;right:12px;top:calc(env(safe-area-inset-top,0px) + 12px);z-index:15}.top-buttons button{font-size:10px;color:#fdcacd;background:#391618b7;border:1px solid #d07d8150;padding:6px 8px;border-radius:10px;font-weight:800}
.autoplay-notice{position:fixed;z-index:16;bottom:calc(101px + env(safe-area-inset-bottom,0px));left:50%;transform:translateX(-50%);border:1px solid #ffbdc0b5;border-radius:16px;box-shadow:0 10px 45px #0008;background:linear-gradient(115deg,#b4363c,#c8474d);color:white;font-size:13px;font-weight:800;white-space:nowrap;padding:13px 18px;display:flex;align-items:center;gap:10px}.autoplay-notice[hidden]{display:none}.notice-ico{background:white;color:#d83f47;border-radius:50%;display:grid;place-items:center;width:25px;height:25px}
.sheet-overlay{position:fixed;inset:0;background:#000b;z-index:25;backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}.sheet-overlay[hidden],.sheet[hidden]{display:none!important}.sheet{position:fixed;z-index:26;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,640px);max-height:90svh;overflow:auto;background:linear-gradient(135deg,#471f21,#2d1516);border:1px solid #ffffff24;border-bottom:0;border-radius:28px 28px 0 0;box-shadow:0 8px 70px #000c;padding:12px 23px calc(20px + env(safe-area-inset-bottom,0px));color:white}.sheet-handle{width:40px;height:5px;background:#ffffff4a;border-radius:99px;margin:0 auto 12px}.sheet-head{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 0 10px}.sheet-head h2{font-size:23px;margin:0;letter-spacing:-.5px}.close-sheet{border:0;color:#fff;background:#ffffff1a;border-radius:50%;font-size:27px;width:36px;height:36px;line-height:1}.sheet-help{color:#ddb1b3;font-size:13px;line-height:1.6;margin:10px 0 20px}.form-grid{display:grid;gap:13px}.form-grid label{font-size:12px;color:#f6c5c7;font-weight:750}.form-grid input,.form-grid textarea{display:block;width:100%;margin-top:6px;background:#280d0ec9;color:#fff;border:1px solid #ffffff30;border-radius:12px;padding:13px;font-size:14px}.form-grid textarea{resize:vertical;min-height:95px}.sheet-submit{border:0;background:linear-gradient(110deg,#f63a43,#e85057);color:white;font-size:14px;font-weight:850;border-radius:13px;padding:15px 18px;width:100%;margin-top:5px}.sheet-submit:disabled{opacity:.65}.status-msg{margin:12px 0;color:#ffbdc0;font-size:13px}.status-msg.err{color:#ffbdc0}.history-row{padding:12px 0;border-bottom:1px solid #ffffff1f;color:#fac8ca;font-size:13px;overflow-wrap:anywhere}.stat-row{display:flex;gap:10px;justify-content:space-between;margin:10px 0;border-bottom:1px solid #ffffff1a;padding-bottom:10px}.stat-row b{color:#fff}.stat-row span{color:#d0a6a8}.pwa-action{background:#ffffff14;border:1px solid #ffffff31;color:white;padding:11px 14px;border-radius:12px;display:inline-flex;gap:8px;margin:14px 0}
@keyframes breath{50%{opacity:.4;transform:scale(.8)}}@keyframes equalize{0%,100%{transform:scaleY(.62)}50%{transform:scaleY(1.2)}}@keyframes vinyl-turn{to{transform:rotate(360deg)}}
@media(min-width:700px){.station{padding-top:35px;padding-bottom:155px}.vinyl-stage{height:390px}.equalizer{margin-top:16px}.nowplaying{margin-top:27px}.live-info{padding-top:40px}.bottom-dock{bottom:18px}.top-buttons{right:calc(50% - 300px)}}
@media(max-height:760px){.station{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:120px}.live-pill{margin-top:12px;padding:7px 17px}.vinyl-stage{height:clamp(185px,34svh,310px)}.vinyl{width:min(67vw,310px,100%)}.equalizer{margin-top:0;height:22px}.nowplaying{margin-top:9px}.nowplaying h1{margin:8px auto 4px;font-size:clamp(17px,5.1vw,25px)}.music-chip{margin-top:10px;padding:7px 16px}.live-info{padding-top:18px}.bottom-dock{min-height:73px}.main-play{width:clamp(60px,16vw,76px);margin-top:-26px}}
@media(max-width:360px){.brand-wave{gap:2px}.brand-wave i{width:3px}.wordmark{gap:5px}.wordmark strong{font-size:28px}.wordmark span{font-size:18px}.tagline{font-size:8px;letter-spacing:1px}.nav-item span{font-size:9px}.sheet{padding-left:15px;padding-right:15px}}
@media(prefers-reduced-motion:reduce){.live-dot,body.is-playing .equalizer i,body.is-playing .vinyl{animation:none!important}*{scroll-behavior:auto!important}}



/* TÜRKVOX fullscreen PWA: viewport-fitted player, dock and safe areas. */
html{height:100%;overflow:hidden;overscroll-behavior:none}
body{height:100%;height:100dvh;min-height:0;overflow:hidden;overscroll-behavior:none;background-attachment:scroll}
.station{
  height:100%;height:100dvh;min-height:0;max-height:100dvh;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 15px calc(100px + env(safe-area-inset-bottom,0px));
  overflow:hidden;display:flex;flex-direction:column;align-items:center;
}
.station-inner{flex:1;min-height:0;height:100%;width:min(100%,570px);
  display:flex;flex-direction:column;align-items:center;overflow:hidden}
.app-head{flex:0 0 auto}
.brand-line{min-height:32px}
.tagline{margin-top:4px}
.live-pill{flex:0 0 auto;margin-top:13px;padding:8px 17px}
.vinyl-stage{
  flex:1 1 auto;min-height:95px;max-height:none;height:auto;
  margin-top:5px;margin-bottom:0;overflow:visible;
}
.vinyl{width:min(75vw,350px,100%);height:auto;max-width:100%;max-height:99%;
  aspect-ratio:1;flex-shrink:0}
.vinyl-glow{width:min(80vw,375px,100%);max-height:100%}
.equalizer{flex:0 0 24px;height:24px;margin-top:0}
.nowplaying{flex:0 0 auto;min-height:0;margin-top:8px}
.nowplaying h1{
  font-size:clamp(18px,5.2vw,27px);line-height:1.23;margin:8px auto 4px;
  -webkit-line-clamp:2;
}
.song-artist{font-size:clamp(12px,3.5vw,18px);line-height:1.3;-webkit-line-clamp:1}
.music-chip{margin:9px auto 0;padding:7px 15px;font-size:11px}
.live-info{flex:0 0 auto;margin-top:0;padding-top:13px}
.live-info-row{margin-top:9px}
.bottom-dock{
  bottom:max(7px,env(safe-area-inset-bottom,0px));
  min-height:72px;border-radius:25px;padding:5px 6px;
}
.nav-item{min-height:51px}
.main-play{width:clamp(59px,16vw,78px);margin-top:-23px}
.main-play svg{width:27px;height:27px}
.autoplay-notice{bottom:calc(87px + env(safe-area-inset-bottom,0px));max-width:calc(100% - 25px)}
@media(min-width:700px){
  .station{padding-top:calc(env(safe-area-inset-top,0px) + 18px);padding-bottom:calc(105px + env(safe-area-inset-bottom,0px))}
  .vinyl-stage{height:auto;max-height:none}
  .vinyl{width:min(45vw,370px,100%);max-height:99%}
  .equalizer{margin-top:3px}
  .nowplaying{margin-top:11px}
  .live-info{padding-top:18px}
  .bottom-dock{bottom:14px}
}
@media(max-height:740px){
  .station{padding-top:calc(env(safe-area-inset-top,0px) + 5px);padding-bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  .app-head .tagline{margin-top:2px}
  .live-pill{margin-top:6px;padding:6px 13px;font-size:11px}
  .vinyl-stage{min-height:70px;margin-top:0}
  .vinyl{width:min(64vw,265px,100%);max-height:97%}
  .equalizer{flex-basis:17px;height:17px}
  .equalizer i{max-height:20px}
  .nowplaying{margin-top:3px}
  .nowplaying h1{font-size:clamp(15px,4.65vw,23px);margin:5px auto 3px;-webkit-line-clamp:2}
  .overline{font-size:9px;letter-spacing:3px}
  .song-artist{font-size:12px}
  .music-chip{margin-top:5px;padding:5px 12px;font-size:10px}
  .live-info{padding-top:7px}
  .live-info-row{margin-top:6px}
  .bottom-dock{min-height:66px;border-radius:23px}
  .nav-item{min-height:45px;padding:3px 1px}
  .nav-item svg{width:21px;height:21px}
  .main-play{width:clamp(55px,16vw,70px);margin-top:-18px}
  .autoplay-notice{bottom:calc(77px + env(safe-area-inset-bottom,0px))}
}
@media(max-height:600px){
  .tagline{display:none}
  .live-pill{margin-top:4px;padding:4px 12px}
  .vinyl{width:min(55vw,215px,100%)}
  .music-chip{display:none}
  .station{padding-bottom:calc(75px + env(safe-area-inset-bottom,0px))}
  .bottom-dock{min-height:62px}
}
@supports not (height:100dvh){
  body,.station{height:100svh;max-height:100svh}
}


/* Live spectrum bars: Web Audio AnalyserNode drives actual heights. */
body.is-playing .equalizer i{animation:none!important}
.equalizer i{min-height:4px;max-height:32px;transition:height 56ms ease-out;will-change:height}
@media(prefers-reduced-motion:reduce){.equalizer i{transition:none;will-change:auto}}

/* Accessible default waveform when mobile WebAudio analysis is unavailable. */
.equalizer[data-spectrum="unavailable"] i{height:var(--height)!important;min-height:9px}

/* Full-height live bands even at very low signal, never tiny dots. */
.equalizer i{min-height:9px}

/* Real 13-band Icecast FFT spectrum supplied by /api/spectrum.json.
   When connectivity fails, visibly animated fallback replaces static dots. */
#equalizer{min-height:28px;align-items:center}
#equalizer i{width:6px;min-height:9px;max-height:34px;border-radius:7px;
  transition:height 340ms cubic-bezier(.2,.8,.4,1)}
body.is-playing #equalizer[data-spectrum="audio"] i{
  animation:none!important;transform:none!important
}
body.is-playing #equalizer:not([data-spectrum="audio"]) i{
  height:var(--height)!important;
  animation:equalize 0.88s ease-in-out infinite alternate!important;
}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(3n+1){animation-duration:.72s!important;animation-delay:-.32s!important}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(3n+2){animation-duration:1.07s!important;animation-delay:-.62s!important}
body.is-playing #equalizer:not([data-spectrum="audio"]) i:nth-child(4n){animation-duration:.93s!important;animation-delay:-.17s!important}
@media(prefers-reduced-motion:reduce){
 body.is-playing #equalizer i{animation:none!important;transition:none!important}
}

/* Two-cultural station identity rotating between both FR/TR slogans. */
.tagline{min-height:1.8em;transition:opacity .2s ease,transform .2s ease;
  text-align:center;white-space:normal;line-height:1.5;display:flex;
  align-items:center;justify-content:center}
.tagline.changing{opacity:0;transform:translateY(-3px)}
@media(max-height:600px){
 .tagline{display:flex;font-size:7px;min-height:1.2em;line-height:1.1}
}
@media(prefers-reduced-motion:reduce){.tagline{transition:none}}

/* Dynamic sound-driven radial pink aura around the record. No lower equalizer. */
.vinyl-stage{isolation:isolate}
.vinyl-glow{z-index:0}
.vinyl-aura{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:visible;
 --ring-radius:145px;--pulse:.24}
.vinyl{z-index:2}
.vinyl-aura i{
 position:absolute;left:50%;top:50%;height:9px;width:5px;
 transform:translate(-50%,-50%) rotate(var(--angle)) translateY(calc(0px - var(--ring-radius)));
 border-radius:99px;
 background:linear-gradient(180deg,#ffaaa0,#ff493d 60%,#e30a17);
 box-shadow:0 0 10px #e30a17,0 0 18px #ff3b305e;
 opacity:.30;
 transition:height .50s cubic-bezier(.22,.61,.36,1),opacity .45s ease;
}
body.is-playing .vinyl-aura i{opacity:.75}
body.is-playing .vinyl-aura[data-spectrum="audio"] i{filter:brightness(1.12)}
.vinyl-aura[data-spectrum="fallback"] i{height:11px!important;opacity:.36}
body:not(.is-playing) .vinyl-aura i{height:6px!important;opacity:.18!important}
@media(max-height:740px){.vinyl-aura i{width:4px}}
@media(prefers-reduced-motion:reduce){.vinyl-aura i{transition:none}}


/* TÜRKVOX vinyl size v13 — slightly smaller on all screens.
   Ring radius is measured from the vinyl by ResizeObserver in app.js. */
.vinyl{width:min(68vw,315px,100%);max-height:96%}
@media(min-width:700px){
  .vinyl{width:min(41vw,330px,100%);max-height:96%}
}
@media(max-height:740px){
  .vinyl{width:min(58vw,240px,100%);max-height:96%}
}
@media(max-height:600px){
  .vinyl{width:min(51vw,200px,100%);max-height:96%}
}

/* v14: radial waveform is anchored to the static disc, never the rotated box.
   Clip all spikes at the stage edge so text and LIVE badge stay unobstructed. */
.vinyl-stage{overflow:hidden;isolation:isolate}
.vinyl-aura i{max-height:30px;width:4px;box-shadow:0 0 7px #e30a17,0 0 13px #ff3b3070}
.nowplaying,.live-pill{position:relative;z-index:4}

/* v15: snare/kick onset pulse from the actual live station FFT.
   Only brightness/glow moves: the ring never expands into text or the LIVE pill. */
.vinyl-stage .vinyl-glow{transition:filter .15s ease-out,opacity .15s ease-out}
.vinyl-aura{transition:filter .16s ease-out}
.vinyl-stage.beat-hit .vinyl-aura{filter:brightness(1.40) saturate(1.38)}
.vinyl-stage.beat-hit .vinyl-glow{filter:blur(14px) brightness(1.45);opacity:1}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .vinyl-glow,.vinyl-aura{transition:none}
 .vinyl-stage.beat-hit .vinyl-aura,.vinyl-stage.beat-hit .vinyl-glow{filter:none}
}

/* Neon Pulse 2.0: two light layers orbit the existing vinyl without layout shifts.
   Brightness uses actual Icecast spectrum; beat-ripple uses real onset events. */
.vinyl-stage{--vinyl-diameter:245px;--track-energy:.25;--beat-intensity:.4}
.vinyl-stage::before,.vinyl-stage::after{
 content:"";position:absolute;top:50%;left:50%;pointer-events:none;
 width:calc(var(--vinyl-diameter) + 20px);
 height:calc(var(--vinyl-diameter) + 20px);
 border-radius:50%;z-index:1;
}
.vinyl-stage::before{
 background:conic-gradient(from 0deg,#e30a17 0deg,transparent 35deg,#ff6155 70deg,transparent 100deg,#b60016 140deg,transparent 180deg,#ff3b30 220deg,transparent 260deg,#ff9c84 290deg,transparent 332deg,#e30a17 360deg);
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
 mask:radial-gradient(farthest-side,transparent calc(100% - 4px),#000 calc(100% - 3px));
 opacity:calc(.2 + var(--track-energy) * .75);
 filter:drop-shadow(0 0 7px #e30a17);
 transform:translate(-50%,-50%);
}
body.is-playing .vinyl-stage::before{animation:mixia-neon-orbit 9s linear infinite}
.vinyl-stage::after{
 width:calc(var(--vinyl-diameter) + 22px);
 height:calc(var(--vinyl-diameter) + 22px);
 border:2px solid #ff554d;
 box-shadow:0 0 10px #e30a17a6,inset 0 0 6px #ff493d66;
 opacity:0;transform:translate(-50%,-50%) scale(.98)
}
body.is-playing .vinyl-stage.beat-hit::after{animation:mixia-neon-impact .34s ease-out 1}
body.is-playing .vinyl-stage.beat-hit .vinyl-aura{filter:brightness(1.8) saturate(1.5)}
@keyframes mixia-neon-orbit{
 from{transform:translate(-50%,-50%) rotate(0deg)}
 to{transform:translate(-50%,-50%) rotate(360deg)}
}
@keyframes mixia-neon-impact{
 0%{opacity:calc(.55 + var(--beat-intensity) * .45);transform:translate(-50%,-50%) scale(.97)}
 100%{opacity:0;transform:translate(-50%,-50%) scale(1.13)}
}
/* Accessible song picker, dedication and My Requests navigation in sheet. */
.request-search{margin:0 0 14px}
.request-search label{font-size:12px;font-weight:800;color:#f6c5c7}
.request-search input{display:block;margin-top:8px;width:100%;padding:13px;background:#280d0ec9;border:1px solid #ffffff38;border-radius:12px;color:white;outline-color:#f58086}
.request-results{display:grid;gap:6px}
.request-result{display:flex;flex-direction:column;align-items:start;gap:4px;width:100%;background:#ffffff0b;color:white;border:1px solid #d972774b;border-radius:12px;padding:11px;text-align:left}
.request-result strong{font-size:13px}.request-result small{color:#dfa9ac;font-size:11px}
.request-hint{color:#d9a1a3;font-size:11px;margin:10px 0 5px}
.request-picked{display:flex;justify-content:space-between;gap:10px;align-items:center;color:#ffbdc0;background:#4e1f2155;border:1px solid #c673776c;border-radius:12px;padding:10px;font-size:12px}
.request-picked button{background:none;border:none;color:#fff;font-size:19px}
.my-requests-link{display:flex;justify-content:center;gap:12px;align-items:center;text-decoration:none;color:#f8c6c9;background:#ffffff12;border:1px solid #eb8b908c;border-radius:13px;padding:15px;margin-top:20px;font-weight:850;font-size:14px}
.my-requests-link.highlight{box-shadow:0 0 19px #df404788}
.request-count{background:#e44047;color:white;padding:3px 8px;border-radius:99px}
@media(prefers-reduced-motion:reduce){
 body.is-playing .vinyl-stage::before{animation:none}
 body.is-playing .vinyl-stage.beat-hit::after{animation:none}
}


/* v17 Safari radial-ring fix:
   A full 360deg circumference, pinned 44 spokes and solid neon border.
   No conic mask or hidden right half from stacking/compositing. */
.vinyl-stage{isolation:isolate;overflow:hidden}
.vinyl-aura{z-index:5!important;overflow:visible;filter:none}
.vinyl-aura i{
 z-index:5;max-height:29px;width:4px;
 box-shadow:0 0 7px #ff3a43,0 0 12px #e8525977;
}
.vinyl-stage::before{
 z-index:3!important;
 background:none!important;
 -webkit-mask:none!important;mask:none!important;
 border:2px solid #e2585e;
 border-top-color:#ff9ea2;
 border-right-color:#f06d73;
 border-bottom-color:#f76b72;
 border-left-color:#ff4e57;
 box-shadow:0 0 10px #ff545cad,inset 0 0 5px #dc585f55;
 opacity:calc(.38 + var(--track-energy) * .55)!important;
}
.vinyl-stage::after{z-index:4}
body.is-playing .vinyl-stage.beat-hit .vinyl-aura{
 filter:brightness(1.5) saturate(1.4)
}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage::before{animation:none!important}
 .vinyl-aura{transition:none}
}

/* TÜRKVOX v19 / NeON TURNTABLE — deliberately hardware-like circular vinyl.
   The 44 spectrum LEDs still use true AzuraCast stream FFT, not fake audio. */
.vinyl-stage{--vinyl-diameter:265px;--track-energy:.28;--beat-intensity:.4;isolation:isolate;overflow:hidden}
.vinyl-stage .vinyl{
  border:8px solid #301618;
  padding:8px;
  background:
   radial-gradient(circle at 31% 24%,#ffffff2d 0,transparent 38%),
   conic-gradient(from 24deg,#220c0d 0deg,#512f31 38deg,#280f10 100deg,#8a494c 156deg,#2f1416 201deg,#6b4446 265deg,#220c0d 360deg);
  box-shadow:0 0 0 1px #d1757a9b,0 0 0 4px #240b0c,0 0 0 5px #df747944,
             0 9px 32px #04010fc9,0 0 43px #ae383d64;
  max-height:calc(100% - 46px);
}
.vinyl-stage .vinyl-disk{
  background:
    radial-gradient(circle at 30% 18%,#ffffff1d,transparent 34%),
    repeating-radial-gradient(circle at 50% 50%,#240e0f 0px,#3b1d1f 2px,#1a090a 3px,#301517 5px,#3c2425 6px,#1d0a0b 7px);
  border:1px solid #f1b3b64b;
  box-shadow:inset 0 0 32px #000b,inset 0 0 4px 2px #ecb3b623;
}
.vinyl-stage .vinyl-disk::before{
  content:"";position:absolute;inset:13px;border-radius:50%;
  background:conic-gradient(from 11deg,transparent 0deg,#ffffff00 24deg,#ffffff15 34deg,
   #ffffff03 56deg,transparent 73deg,#ffffff12 129deg,transparent 145deg,#ffffff14 291deg,transparent 308deg);
  pointer-events:none;
}
.vinyl-stage .vinyl-center{
  background:radial-gradient(circle at 26% 20%,#ffbdc0 0,#ff5c64 19%,#e12e37 51%,#bd272f 100%);
  border:3px solid #fba7abff;
  box-shadow:0 0 0 2px #3d1214,0 0 18px #fc565ea0,inset 0 -9px 18px #700d12ad;
  position:relative;
}
.vinyl-stage .vinyl-center::after{
  content:"";width:7px;height:7px;border:1.5px solid #1f090a;
  background:#f4c3c6;border-radius:50%;position:absolute;bottom:13%;left:50%;transform:translateX(-50%);
  box-shadow:0 0 5px #fff;
}
.vinyl-stage .vinyl-center strong{text-shadow:0 2px 5px #861e23}
.vinyl-stage .vinyl-glow{
  background:radial-gradient(circle,#d72b345b 9%,#ac272e35 48%,transparent 73%);
  filter:blur(18px);opacity:.75;
}
.vinyl-stage .vinyl-aura{z-index:5!important}
.vinyl-stage .vinyl-aura i{
  width:4px!important;max-height:34px;
  background:linear-gradient(180deg,#ffccce,#ff5058 52%,#f8535b);
  box-shadow:0 0 4px #ffccce,0 0 10px #ff3b44,0 0 17px #f14850a1;
  transition:height 175ms cubic-bezier(.18,.8,.32,1),opacity 185ms ease-out;
}
.vinyl-stage::before{
  width:calc(var(--vinyl-diameter) + 17px);height:calc(var(--vinyl-diameter) + 17px);
  border:2px solid #ff676e;border-top-color:#f9b8bb;border-right-color:#df4950;
  border-bottom-color:#ff636b;border-left-color:#ff434c;
  box-shadow:0 0 8px #ff6b72eb,0 0 20px #ed3c446a,inset 0 0 6px #cd383f65;
  background:none!important;opacity:calc(.45 + var(--track-energy) * .42)!important;
}
.vinyl-stage::after{
  width:calc(var(--vinyl-diameter) + 24px);height:calc(var(--vinyl-diameter) + 24px);
  border:3px solid #ffbdc0;box-shadow:0 0 10px #ff525aa8,0 0 17px #f447504d;
}
body.is-playing .vinyl-stage::before{animation:mixia-neon-orbit 8s linear infinite}
body.is-playing .vinyl-stage.beat-hit::after{animation:mixia-neon-impact .38s ease-out 1}
body.is-playing .vinyl-stage.beat-hit .vinyl{filter:brightness(1.13)}
body:not(.is-playing) .vinyl-stage::before{opacity:.22!important}

/* AzuraCast-inspired request dialog: browser, 10 results per page,
   distinct request actions, and persistent My Requests tracking. */
.native-request-head{display:flex;flex-direction:column;gap:10px}
.native-request-head .sheet-help{margin:0;line-height:1.55}
.native-request-head .my-requests-link{margin:0;gap:9px;padding:11px 13px;font-size:13px;justify-content:center;border-color:#f18c918a}
.native-request-head .my-requests-icon{font-size:17px;color:#fc7a80}
.native-search{margin:17px 0 10px;text-align:left}
.native-search>label{display:block;color:#eab7b9;font-size:12px;font-weight:800;margin-bottom:8px}
.native-search-field{height:46px;display:flex;align-items:center;gap:10px;padding:0 12px;background:#271112;border:1px solid #8d55588c;border-radius:12px}
.native-search-field svg{width:17px;height:17px;fill:none;stroke:#eaadb0;stroke-width:2;stroke-linecap:round}
.native-search-field input{flex:1;min-width:0;outline:none!important;background:transparent!important;border:0!important;box-shadow:none!important;color:#fff!important;font-size:13px}
.native-search-field:focus-within{border-color:#ff9096;box-shadow:0 0 0 2px #f7636a39}
.native-request-summary{display:flex;justify-content:space-between;align-items:center;gap:9px;margin:9px 0;color:#dbacae;font-size:11px;flex-wrap:wrap}
.native-auto{color:#f4b5b8;font-size:10px;font-weight:700}
.native-song-list{display:grid;gap:0;border:1px solid #db7d8150;border-radius:14px;overflow:hidden;background:#250c0dcc}
.native-song-columns{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;background:#8a434643;border-bottom:1px solid #db7d815a;color:#edb9bb;font-size:10px;text-transform:uppercase;font-weight:900;letter-spacing:1px;padding:12px 13px}
.native-song-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:10px 11px;border-bottom:1px solid #ffffff16;min-width:0}
.native-song-row:last-child{border-bottom:0}
.native-song-row:nth-child(2n+1){background:#ffffff05}
.native-song-info{min-width:0;display:flex;align-items:center;gap:10px;text-align:left}
.native-song-icon{flex:none;width:37px;height:37px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(150deg,#9b4044,#802f33);border:1px solid #d4666b77;color:#ffcacc;font-size:18px}
.native-song-meta{display:flex;flex-direction:column;gap:4px;min-width:0}
.native-song-meta strong{font-size:12px;line-height:1.3;color:#fff;font-weight:750;overflow-wrap:anywhere}
.native-song-meta small{font-size:11px;line-height:1.2;color:#c49d9f;overflow-wrap:anywhere}
.native-request-btn{
  flex:none;min-width:63px;max-width:92px;border:1px solid #ef8f9499;border-radius:9px;
  background:#e33c4428;color:#ffbdc0;font-size:10px;font-weight:950;letter-spacing:.3px;
  padding:10px 8px;transition:background .16s,color .16s
}
.native-request-btn:active:not(:disabled){background:#ed4951;color:#fff}
.native-request-btn:disabled{opacity:.57}
.native-request-btn.sent{background:#881f243a;border-color:#dc585e76;color:#ffc4c7}
.native-pager{display:flex;align-items:center;justify-content:center;gap:12px;margin:14px 0 5px;font-size:12px;color:#f1c1c3}
.native-page-button,.native-reload{padding:10px 12px;border:1px solid #d3868a72;background:#ffffff0f;color:#fccacc;border-radius:10px;font-size:12px}
.native-page-button:disabled{opacity:.36}
.native-empty{padding:26px 12px;font-size:13px;text-align:center;color:#d9a8aa}
.native-request-feedback{font-size:12px;line-height:1.5;color:#f1b2b5;margin:12px 0}
.native-request-feedback.err{color:#ffbec1}
@media(max-width:375px){
 .native-song-row{padding:10px 8px;gap:6px}
 .native-song-info{gap:7px}
 .native-song-icon{width:31px;height:31px}
 .native-request-btn{min-width:59px;padding:9px 6px;font-size:9px}
 .native-song-meta strong{font-size:11px}
}
@media(prefers-reduced-motion:reduce){
 body.is-playing .vinyl-stage::before,body.is-playing .vinyl-stage.beat-hit::after{animation:none!important}
 .vinyl-stage .vinyl-aura i{transition:none}
}


/* v20 TÜRKVOX LIQUID HALO — modern, continuous spectrum instead of LED spikes. */
.vinyl-stage .vinyl-aura{opacity:0!important;visibility:hidden!important}
.vinyl-stage::before,.vinyl-stage::after{display:none!important;animation:none!important}
.vinyl-stage .mixia-wave{
 position:absolute;inset:0;display:block;z-index:5;pointer-events:none;
 width:100%;height:100%;max-width:none;max-height:none;
 opacity:.97;filter:none;transform:translateZ(0)
}
.vinyl-stage .vinyl{
 border-width:7px;
 box-shadow:0 0 0 1px #d1757a71,0 0 0 4px #240b0c,0 10px 34px #04010fbb,0 0 25px #b9494e63;
}
.vinyl-stage .vinyl-glow{
 opacity:.67;
 background:radial-gradient(circle,#bd363c38 0%,#a63d4224 42%,#8d363a12 66%,transparent 75%);
 filter:blur(15px);
}
body.is-playing .vinyl-stage.beat-hit .vinyl{filter:brightness(1.06)}
body:not(.is-playing) .vinyl-stage .mixia-wave{opacity:.48}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .mixia-wave{opacity:.55!important}
}


/* v21 — exact TÜRKVOX neon circular spectrum: fixed black center, vivid 160 rays.
   Overwrites vinyl rotation and v20 liquid-wave styling, requests untouched. */
.vinyl-stage{
 --visual-core-size:220px;
 isolation:isolate;
 overflow:hidden;
 height:clamp(295px,47svh,440px);
}
.vinyl-stage .vinyl{
 z-index:2;
 position:relative;
 width:var(--visual-core-size)!important;
 height:var(--visual-core-size)!important;
 max-height:none!important;
 aspect-ratio:1!important;
 border:0!important;
 padding:0!important;
 border-radius:50%;
 display:flex;
 justify-content:center;
 align-items:center;
 transform:none!important;
 animation:none!important;
 transition:none!important;
 background:#020206!important;
 box-shadow:0 0 0 5px #020208,0 12px 28px #03030ab8!important;
 will-change:auto!important;
 filter:none!important;
}
body.is-playing .vinyl-stage .vinyl{
 animation:none!important;transform:none!important;filter:none!important;
}
.vinyl-stage .vinyl-disk,
.vinyl-stage .vinyl-center{display:none!important}
.vinyl-stage .visualizer-core{
 width:100%;height:100%;
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 gap:13px;
 border-radius:50%;
 background:#020205;
 position:relative;
 overflow:hidden;
 user-select:none;-webkit-user-select:none;
}
.vinyl-stage .visualizer-core strong{
 color:#fafaff;
 font-weight:330;
 font-size:clamp(18px,4.9vw,30px);
 letter-spacing:.045em;
 line-height:1.15;
 white-space:nowrap;
 text-shadow:0 0 12px #ffffff19;
}
.vinyl-stage .visualizer-core span{
 display:flex;align-items:center;justify-content:center;gap:10px;
 color:#ddb1b3;font-size:clamp(9px,2.8vw,13px);
 font-weight:450;
 letter-spacing:.3em;
 white-space:nowrap;
}
.vinyl-stage .visualizer-core span i{
 display:block;width:clamp(12px,4vw,24px);height:2px;
 background:#e63d45;box-shadow:0 0 8px #e63d455c;
}
.vinyl-stage .visualizer-core span i:last-child{
 background:#f01b25;box-shadow:0 0 8px #f01b255c;
}
.vinyl-stage .vinyl-glow{display:none!important}
.vinyl-stage .mixia-wave{
 position:absolute;inset:0;z-index:5;
 display:block;width:100%;height:100%;opacity:1!important;
 transform:none!important;filter:none!important;
 pointer-events:none;
}
.vinyl-stage::before,.vinyl-stage::after{display:none!important}
.vinyl-stage .vinyl-aura{display:none!important}
body:not(.is-playing) .vinyl-stage .mixia-wave{opacity:1!important}
@media(max-height:740px){
 .vinyl-stage{height:clamp(280px,49svh,345px)!important}
}
@media(max-width:360px){
 .vinyl-stage .visualizer-core strong{font-size:clamp(16px,5.2vw,20px);letter-spacing:.027em}
 .vinyl-stage .visualizer-core span{gap:7px;font-size:9px;letter-spacing:.22em}
}
@media(prefers-reduced-motion:reduce){
 .vinyl-stage .vinyl{animation:none!important}
}


/* v24 TÜRKVOX • One-screen minimal listening interface.
   Keep familiar station identity and fixed TÜRKVOX RADIO core, remove repeated metadata. */
.station{padding-top:calc(env(safe-area-inset-top,0px) + 14px)}
.station-inner{min-height:calc(100svh - 168px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));justify-content:space-between}
.app-head{align-self:flex-start;width:auto;align-items:flex-start;flex:none}
.app-head .brand-line{width:auto;justify-content:flex-start;gap:10px}
.app-head .wordmark strong{font-size:clamp(22px,6vw,27px);letter-spacing:-1.5px}
.app-head .wordmark span{display:none}
.app-head .brand-wave{height:23px;gap:2px}
.app-head .brand-wave i{width:3px}
.app-head .brand-wave i:nth-child(1),.app-head .brand-wave i:nth-child(5){height:8px}
.app-head .brand-wave i:nth-child(2),.app-head .brand-wave i:nth-child(4){height:15px}
.app-head .brand-wave i:nth-child(3){height:23px}
.app-head .brand-wave:last-child{display:none}
.tagline,.overline,.music-chip,.live-info,.vinyl-stage .visualizer-core span{display:none!important}
.vinyl-stage{margin:10px 0 0;height:clamp(295px,43svh,420px);flex:none}
.nowplaying{display:flex;flex-direction:column;align-items:center;justify-content:center;margin:7px auto 8px;gap:8px;flex:none}
.nowplaying .live-pill{display:inline-flex;align-items:center;gap:7px;margin:0 0 3px;padding:6px 11px;border:1px solid #f49ca055;background:#f2485013;border-radius:100px;box-shadow:none;font-size:10px;letter-spacing:1.4px;font-weight:750;color:#f6b6b9}
.nowplaying .live-dot{height:6px;width:6px}
.nowplaying .live-pill.offline .live-dot{background:#888;box-shadow:none;animation:none}
.nowplaying h1{margin:0;max-width:min(100%,550px);line-height:1.25;font-size:clamp(19px,5.7vw,26px);letter-spacing:-.5px;-webkit-line-clamp:2}
.nowplaying .song-artist{font-size:clamp(12px,3.4vw,16px);opacity:.8;margin:0;line-height:1.25}
.nowplaying .song-artist[hidden]{display:none!important}
.vinyl-stage .visualizer-core{gap:0}
.vinyl-stage .visualizer-core strong{font-weight:370;letter-spacing:.04em}
.main-play{position:relative}
body.is-loading .main-play::after{
 content:"";position:absolute;inset:-8px;pointer-events:none;border-radius:50%;
 border:2px solid transparent;border-top-color:#fff;border-right-color:#f3989c;
 animation:mixia-buffering .7s linear infinite;
 box-shadow:0 0 10px #f14d5550;
}
@keyframes mixia-buffering{to{transform:rotate(360deg)}}
.bottom-dock .nav-item span{font-size:clamp(9px,2.25vw,11px)}
@media(max-height:670px){
 .station{padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:calc(112px + env(safe-area-inset-bottom,0px))}
 .station-inner{min-height:calc(100svh - 136px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))}
 .vinyl-stage{height:clamp(270px,48svh,330px)!important;margin:0}
 .nowplaying{gap:5px}
 .nowplaying h1{font-size:clamp(17px,5vw,22px)}
}
@media(min-width:700px){
 .station{padding-top:calc(env(safe-area-inset-top,0px) + 30px)}
 .station-inner{min-height:calc(100svh - 195px)}
 .vinyl-stage{height:clamp(410px,48svh,540px)}
}
@media(prefers-reduced-motion:reduce){
 body.is-loading .main-play::after{animation:none;border-color:#f3989c}
}


/* v24.1: keep player and song together rather than opposite ends of screen. */
.station-inner{position:relative;justify-content:center}
.app-head{position:absolute;top:0;left:0}
.vinyl-stage{margin:0 0 4px}
.nowplaying{margin:5px auto 0}
@media(max-height:670px){
 .vinyl-stage{margin:11px 0 4px}
 .nowplaying{margin:2px auto 0}
}


/* v26 slogan */
.app-head .tagline{display:block!important;margin:8px 0 0;font-size:10px;line-height:1.4;letter-spacing:2px;text-align:left;color:#e5b7b9}

.song-timeline{display:block;width:min(92%,390px);margin:12px auto 0;text-align:center}.song-timeline[hidden]{display:none!important}.song-timeline-track{height:5px;background:#7e505370;border-radius:20px;overflow:hidden}.song-timeline-fill{display:block;height:100%;width:0%;background:linear-gradient(90deg,#f03a43,#d6454c,#eb535a);transition:width .9s linear}

.song-timeline-times{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-variant-numeric:tabular-nums}.song-timeline-times>span{display:flex;align-items:center;gap:5px;font-size:11px;white-space:nowrap}.song-timeline-times small{font-size:10px;color:#c59395}.song-timeline-times time{font-weight:750;color:#ffccce}@media(max-width:350px){.song-timeline-times small{font-size:9px}.song-timeline-times>span{font-size:10px}}

/* TÜRKVOX guest profile and device favorites — no false AzuraCast login claim. */
.mixia-account{display:flex;flex-direction:column;gap:15px;padding-bottom:15px}
.account-person{display:flex;align-items:center;gap:13px;padding:4px 0}
.account-avatar{width:57px;height:57px;border-radius:18px;background:linear-gradient(145deg,#ea4149,#db3f47);display:grid;place-items:center;color:#fff;box-shadow:0 6px 20px #e34a5148;font-size:28px;flex:none}
.account-person strong{font-size:18px;color:#fff;display:block;font-weight:800}
.account-person p{margin:5px 0 0;color:#dbaeb0;font-size:12px;line-height:1.4}
.account-note{margin:0;padding:12px 13px;border-radius:12px;border:1px solid #be75795c;background:#e36a7012;font-size:12px;color:#e9babd;line-height:1.5}
.account-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#2b1214;padding:4px;border:1px solid #7645474d;border-radius:13px}
.account-tabs button{background:transparent;color:#cba2a4;border:0;border-radius:10px;padding:11px 5px;font-size:12px;font-weight:800;cursor:pointer}
.account-tabs button.selected{background:linear-gradient(125deg,#d9424a,#d6464d);color:white;box-shadow:0 3px 12px #bf40463b}
.account-tabs button span{padding:1px 6px;border-radius:10px;background:#ffffff29;font-size:10px}
.account-search input{width:100%;border:1px solid #aa5b5f99;border-radius:12px;padding:12px 14px;background:#271112;color:#fff;font-size:13px;outline:none}
.account-search input:focus{border-color:#ed6e74;box-shadow:0 0 0 2px #ed6e743c}
.account-tracks{display:flex;flex-direction:column;gap:0;border:1px solid #76454778;border-radius:12px;overflow:hidden;background:#210d0eb6;max-height:350px;overflow-y:auto}
.account-song{display:flex;align-items:center;gap:10px;padding:9px 10px;border-bottom:1px solid #ffffff16}
.account-song:last-child{border-bottom:none}
.account-song-note{height:35px;width:35px;border-radius:9px;flex:none;background:#ad424742;color:#ffc1c4;display:grid;place-items:center;font-size:17px}
.account-song-meta{display:flex;flex-direction:column;min-width:0;gap:3px;flex:1}
.account-song-meta strong{color:#ffccce;font-size:12px;font-weight:780;line-height:1.25;overflow-wrap:anywhere}
.account-song-meta small{color:#ce9fa2;font-size:11px;overflow-wrap:anywhere}
.account-heart{border:1px solid #c560656b;background:#dd4d5418;color:#ffcbcd;font-size:22px;line-height:1;height:36px;width:36px;flex:none;border-radius:10px}
.account-heart.active{color:#fff;background:#db454c6b;border-color:#f0787e}
.account-empty{margin:0;padding:34px 12px;color:#cfa6a8;text-align:center;font-size:13px}
.account-retry{margin:8px auto 14px;padding:8px 14px;border-radius:10px;background:#b5393f;color:#fff}
.account-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
.account-foot small{color:#c49395;line-height:1.4;font-size:10px;flex:1}
.account-foot button{border:1px solid #bc636788;background:#8e353939;border-radius:10px;color:#f6c5c7;padding:10px 13px;font-size:11px;font-weight:700;flex:none}
@media(max-width:370px){.account-person strong{font-size:16px}.account-avatar{width:46px;height:46px;font-size:23px}.account-person p{font-size:11px}.account-tabs button{font-size:11px}}


.account-profile-edit{margin:0;border:1px solid #a25f625c;border-radius:12px;background:#93494c20;overflow:hidden}
.account-profile-edit summary{cursor:pointer;padding:11px 13px;color:#f8c6c9;font-size:12px;font-weight:750;list-style-position:inside}
.account-profile-edit form{padding:0 12px 12px;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:9px}
.account-profile-edit label{min-width:0;display:flex;flex-direction:column;gap:6px;font-size:11px;color:#dbafb1}
.account-profile-edit input{background:#2b1315;border:1px solid #a86467;color:white;padding:10px 11px;border-radius:9px;min-width:0;font-size:12px}
.account-profile-edit button{background:linear-gradient(125deg,#dd444c,#d74950);color:white;border:0;border-radius:9px;padding:11px 12px;font-size:11px;font-weight:750}
.account-profile-edit small{grid-column:1/-1;color:#e1a6a9;font-size:11px}


/* TÜRKVOX registered listener forms */
.mixia-auth-panel{display:flex;flex-direction:column;gap:10px;background:#2d101196;border:1px solid #9c5d6063;border-radius:13px;padding:13px}
.auth-mode-tabs{display:grid;grid-template-columns:1fr 1fr;gap:5px;background:#200b0c;border-radius:10px;padding:4px}
.auth-mode-tabs button{border:0;background:transparent;color:#dbaeb0;border-radius:8px;padding:10px 6px;font-size:12px;font-weight:700}
.auth-mode-tabs button.active{background:linear-gradient(110deg,#e04048,#d74e54);color:#fff}
.mixia-auth-form{display:flex;flex-direction:column;gap:10px;margin:0}
.auth-field{display:flex;flex-direction:column;gap:5px;color:#ebbcbe;font-size:11px;font-weight:650;min-width:0}
.auth-field input{min-width:0;width:100%;background:#1d0b0c;border:1px solid #945e60;border-radius:9px;padding:11px 12px;color:#fff;outline:0;font-size:13px}
.auth-field input:focus{border-color:#f56a71;box-shadow:0 0 0 2px #f56a712d}
.auth-primary{background:linear-gradient(110deg,#e04048,#d74e54);border:0;border-radius:10px;color:#fff;font-size:12px;font-weight:800;padding:12px 15px}
.auth-primary:disabled{opacity:.52}
.auth-secondary,.auth-forgot,.auth-logout{background:none;color:#edb9bb;border:0;font-size:12px;padding:7px;align-self:center}
.auth-logout{border:1px solid #b55d61;border-radius:9px;align-self:flex-start;padding:9px 14px}
.auth-feedback{margin:0;color:#ecafb2;font-size:12px;line-height:1.45;overflow-wrap:anywhere}
.auth-feedback.error{color:#ffbdc0}
.auth-heading{font-size:16px;font-weight:750;color:#fff;margin:0}
.auth-user-info{display:flex;flex-direction:column;gap:4px;padding:7px 0}
.auth-user-info strong{font-size:16px;color:#fff;overflow-wrap:anywhere}
.auth-user-info small{font-size:11px;color:#d7a3a6;overflow-wrap:anywhere}
.auth-profile-form{margin:0}
@media(max-width:360px){.mixia-auth-panel{padding:10px}.auth-field input{padding:10px}}

/* TÜRKVOX daily schedule: compact, accessible live-program teaser */
.program-peek{width:100%;max-width:620px;display:flex;align-items:center;gap:10px;margin:13px auto 4px;
  padding:11px 14px;border:1px solid #ffffff20;border-radius:16px;color:#f8f4ff;
  background:linear-gradient(120deg,#4622248a,#39181ac7);font:inherit;text-align:left;cursor:pointer}
.program-peek:focus-visible,.program-favorite:focus-visible{outline:2px solid #ff858b;outline-offset:3px}
.program-indicator{color:#ef8287;font-size:12px}
.program-peek.is-france .program-indicator{color:#ff777e}
.program-peek-copy{min-width:0;display:grid;gap:3px}
.program-peek-copy>span{font-size:9px;font-weight:750;letter-spacing:1.25px;color:#cca3a5}
.program-peek-copy strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.program-peek-next{margin-left:auto;font-size:11px;color:#d7acae;text-align:right;max-width:46%}
.program-peek-arrow{font-size:20px;color:#edb2b5}
.program-schedule-title{font-size:15px;margin:20px 0 9px}
.program-schedule-list{display:grid;gap:5px}
.program-schedule-list>div{padding:11px 12px;border:1px solid #ffffff13;border-radius:11px;
 background:#ffffff07;display:flex;gap:10px;align-items:center;justify-content:space-between}
.program-schedule-list time{font-size:12px;font-variant-numeric:tabular-nums;color:#c8a0a2}
.program-schedule-list span{font-size:12px;text-align:right;color:#ffccce;font-weight:650}
.program-schedule-list .fr-slot{background:#3a2324;border-color:#ff767d54}
.program-schedule-note{font-size:11px;line-height:1.5;color:#ba9597}
.program-favorite{display:block;width:100%;margin:14px 0 10px;padding:12px;background:#3f2425;
 border:1px solid #e8818666;border-radius:11px;color:#ffccce;font:inherit;font-size:12px;font-weight:750;cursor:pointer}
@media(max-width:400px){.program-peek{gap:8px;padding:10px}.program-peek-next{font-size:10px;max-width:41%}}

/* Small, optional like control, distinct from favorites */
.song-like{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;margin:9px auto 0;
 border:1px solid #ffffff21;border-radius:30px;background:#ffffff09;color:#efbcbf;
 font:700 12px/1 system-ui,sans-serif;cursor:pointer}
.song-like #songLikeIcon{font-size:17px;line-height:1}
.song-like.liked{background:#ff4b5440;border-color:#f96e749c;color:#ffccce}
.song-like:disabled{opacity:.58;cursor:wait}
.song-like[hidden]{display:none!important}
.song-like:focus-visible{outline:2px solid #f89ea2;outline-offset:2px}

/* TÜRKVOX PWA v36: original station icon replaces center words.
   Large circular spectrum is unchanged; stage layout stays below header.
   No clipping of the dynamic 160-ray halo on compact displays. */
.vinyl-stage .visualizer-core{
  background:#020205!important;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.vinyl-stage .mixia-center-logo{
  display:block;
  width:min(55%,176px);
  height:auto;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:22%;
  box-shadow:0 0 27px rgba(229,53,61,.18);
  pointer-events:none;
  user-select:none;
  -webkit-user-drag:none;
}
/* The absolute header does not consume layout space; reserve it explicitly. */
.station-inner{
  padding-top:clamp(79px,10svh,105px);
  justify-content:center;
}
.vinyl-stage{
  flex:0 0 auto;
  height:clamp(260px,42svh,390px)!important;
  min-height:0;
  margin:0 0 6px!important;
}
@media(max-height:750px){
  .station-inner{padding-top:67px}
  .vinyl-stage{height:clamp(218px,37svh,280px)!important}
  .nowplaying{gap:4px;margin:3px auto 0}
  .program-peek{margin:9px auto 2px}
}
@media(max-height:610px){
  .station-inner{padding-top:59px}
  .vinyl-stage{height:clamp(165px,31svh,200px)!important}
  .nowplaying{gap:3px}
  .program-peek{margin:7px auto 1px}
}
@media(max-width:340px){
  .station-inner{padding-top:clamp(54px,9svh,62px)}
  .vinyl-stage{height:clamp(158px,30svh,186px)!important}
  .nowplaying{gap:3px}
  .nowplaying h1{font-size:clamp(16px,5vw,20px)}
}

/* Ultra-short PWA screens: preserve clear logo/ring and controls.
   Programme remains accessible under the "Yayın" navigation item. */
@media(max-height:520px){
  .program-peek{display:none!important}
  .station-inner{padding-top:68px}
}


/* v46: smaller, well-contained circular player on tall iPhone screens.
   393x852: 358px -> 302px; disk/logo shrink together via canvas geometry.
   Compact phones <=750px height and desktop keep their existing layouts. */
@media (min-width:341px) and (max-width:699px) and (min-height:751px){
  .vinyl-stage{
    height:clamp(252px,35.5svh,336px)!important;
    margin-bottom:4px!important;
  }
  .vinyl-stage .mixia-center-logo{
    width:min(52%,118px);
    box-shadow:0 0 20px rgba(229,53,61,.16);
  }
}


/* v47: keep official icon legible inside a smaller neon orbit.
   The canvas now reserves actual dynamic headroom for the audio bars. */
.vinyl-stage .mixia-center-logo{
  width:min(64%,120px);
}

/* v50 — incoming listener messages replace programme preview, without moving the player. */
.listener-message-slot{
 width:100%;max-width:620px;min-height:75px;flex:none;
 margin:8px auto 2px;display:grid;align-items:center;
}
.listener-message-card{
 display:flex;align-items:center;gap:12px;
 width:100%;padding:12px 15px;border-radius:16px;
 background:linear-gradient(115deg,rgba(78,27,30,.94),rgba(66,25,27,.95));
 border:1px solid rgba(244,119,125,.46);
 box-shadow:0 10px 28px rgba(25,5,6,.23);
 animation:mixia-message-in .25s ease-out;
}
.listener-message-card[hidden]{display:none!important}
.listener-message-card.leaving{animation:none;opacity:0;filter:blur(3px);transform:translateY(-7px);transition:opacity .85s ease-in-out,filter .85s ease-in-out,transform .85s ease-in-out}
.listener-message-icon{width:33px;height:33px;border-radius:12px;display:grid;place-items:center;flex:none;
 background:linear-gradient(130deg,#e3454d,#d6555b);color:white;font-weight:900;font-size:17px}
.listener-message-content{min-width:0;flex:1}
.listener-message-content strong{display:block;color:#f8c1c4;font-size:11px;font-weight:850;line-height:1.3;
 overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.listener-message-content p{font-size:12px;color:#fff;margin:3px 0 0;line-height:1.35;
 max-height:3.2em;overflow-wrap:anywhere;overflow:hidden}
@keyframes mixia-message-in{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.listener-form{display:grid;gap:14px}
.listener-form .sheet-help{margin:0;line-height:1.6}
.listener-form label{display:grid;gap:7px;font-size:12px;color:#f2bcbf;font-weight:750}
.listener-form input,.listener-form textarea{width:100%;min-width:0;border:1px solid #b36367;
 background:#291011;border-radius:12px;padding:12px 13px;color:white;font:inherit;font-size:14px;outline:none}
.listener-form textarea{min-height:104px;resize:vertical}
.listener-form input:focus,.listener-form textarea:focus{border-color:#f0767c;box-shadow:0 0 0 2px #f0767c38}
.listener-form small{font-size:11px;color:#d9a4a7;line-height:1.55}
.listener-form .sheet-submit:disabled{opacity:.55;cursor:not-allowed}
.listener-form-status{font-size:12px;color:#f0b2b5;line-height:1.5;min-height:18px}
.listener-form-status.error{color:#ffbec1}
@media(max-width:530px){
 .listener-message-slot{min-height:69px;margin-top:5px}
 .listener-message-card{padding:10px 12px;gap:9px;border-radius:14px}
 .listener-message-icon{width:29px;height:29px;border-radius:10px}
 .listener-message-content p{font-size:11px}
}
@media(max-height:520px){.listener-message-slot{min-height:50px}.listener-message-card{padding:7px 10px}}
@media(prefers-reduced-motion:reduce){.listener-message-card{animation:none}.listener-message-card.leaving{transition:none}}



/* v51: exact TÜRKVOX RADIO icon lettering (no vinyl or frame), centered header. */
.app-head{
 position:absolute!important;top:0!important;left:0!important;right:0!important;
 width:100%!important;max-width:100%!important;
 display:flex!important;flex-direction:column!important;
 align-items:center!important;justify-content:flex-start!important;
 text-align:center!important;
 z-index:7;
}
.app-head .brand-line{
 width:100%!important;min-height:0!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 gap:0!important;
}
.app-wordmark{
 display:block;object-fit:contain;
 width:clamp(150px,48vw,205px);
 max-width:calc(100% - 80px);
 height:auto;aspect-ratio:398/160;
 filter:drop-shadow(0 3px 8px rgba(217,48,56,.13));
 pointer-events:none;user-select:none;-webkit-user-drag:none;
}
.app-head .tagline{
 display:block!important;
 width:100%!important;max-width:min(100%,360px);
 margin:0 auto!important;padding:0 4px;
 min-height:1.5em!important;text-align:center!important;
 font-weight:800;font-size:clamp(8px,2.3vw,11px)!important;
 line-height:1.35!important;letter-spacing:clamp(.9px,.48vw,2px)!important;
 color:#f0c0c2;white-space:normal;
}

/* v51: navigation flush with device bottom and safe-area inset. */
@media(max-width:699px){
 html,body{width:100%}
 .bottom-dock{
  position:fixed!important;
  left:0!important;right:0!important;top:auto!important;bottom:0!important;
  transform:none!important;
  width:100%!important;max-width:none!important;
  height:auto!important;
  min-height:calc(69px + env(safe-area-inset-bottom,0px))!important;
  margin:0!important;
  padding:5px max(8px,env(safe-area-inset-right,0px))
         calc(7px + env(safe-area-inset-bottom,0px))
         max(8px,env(safe-area-inset-left,0px))!important;
  border-radius:22px 22px 0 0!important;
  border-bottom:0!important;
  box-shadow:0 -10px 40px rgba(23,3,4,.49)!important;
  z-index:22!important;
 }
 .station{padding-bottom:calc(91px + env(safe-area-inset-bottom,0px))!important}
 .station-inner{padding-top:clamp(106px,13svh,125px)!important}
 .top-buttons{z-index:24}
 .autoplay-notice{bottom:calc(89px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:699px) and (max-height:740px){
 .app-wordmark{width:clamp(128px,41vw,168px)}
 .app-head .tagline{font-size:8px!important;letter-spacing:1.15px!important}
 .station-inner{padding-top:clamp(79px,13svh,94px)!important}
 .station{padding-bottom:calc(79px + env(safe-area-inset-bottom,0px))!important}
 .bottom-dock{min-height:calc(62px + env(safe-area-inset-bottom,0px))!important}
 .autoplay-notice{bottom:calc(80px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:340px) and (max-height:610px){
 .app-wordmark{width:130px}
 .app-head .tagline{font-size:7px!important}
 .station-inner{padding-top:77px!important}
}
@media(min-width:700px){
 .app-head{max-width:100%!important}
 .app-wordmark{width:205px}
 .station-inner{padding-top:112px}
}


/* v52: prevent iPhone Safari auto-zoom when focusing listener message
   fields. Keep viewport user-scalable; do not disable accessibility zoom. */
.listener-form input:not([name="website"]),
.listener-form textarea {
  font-size:16px!important;
  line-height:1.45;
}


/* v53: the nav icons AND the center play button now sit inside the dock,
   aligned on one lower baseline. Previous negative play margin raised the
   play control outside the bar after the bar moved to the screen bottom. */
@media(max-width:699px){
 .bottom-dock{
  align-items:end!important;
  min-height:calc(77px + env(safe-area-inset-bottom,0px))!important;
  padding-top:6px!important;
  padding-bottom:calc(8px + env(safe-area-inset-bottom,0px))!important;
  grid-auto-rows:minmax(0,1fr)!important;
 }
 .bottom-dock .nav-item{
  min-height:54px!important;
  height:54px!important;
  align-self:end!important;
  justify-self:stretch!important;
  margin:0!important;
  padding:4px 1px 3px!important;
  gap:4px!important;
 }
 .bottom-dock .main-play{
  align-self:end!important;
  justify-self:center!important;
  margin:0 auto!important;
  width:clamp(60px,16vw,70px)!important;
 }
 .station{padding-bottom:calc(97px + env(safe-area-inset-bottom,0px))!important}
}
@media(max-width:699px) and (max-height:740px){
 .bottom-dock{min-height:calc(70px + env(safe-area-inset-bottom,0px))!important;
  padding-top:5px!important;padding-bottom:calc(7px + env(safe-area-inset-bottom,0px))!important}
 .bottom-dock .nav-item{height:49px!important;min-height:49px!important}
 .bottom-dock .main-play{width:clamp(56px,16vw,62px)!important}
 .station{padding-bottom:calc(87px + env(safe-area-inset-bottom,0px))!important}
}


/* v54 — iOS PWA: the webview already leaves its gesture/home-indicator
   area outside the page. The old dock additionally applied that inset
   *inside* its own bar, lifting all five controls much too high.
   Give the buttons a real bottom row; keep gestures in the native area. */
@media (max-width:699px){
 .bottom-dock{
  position:fixed!important;
  left:0!important;
  right:0!important;
  top:auto!important;
  bottom:0!important;
  transform:none!important;
  height:76px!important;
  min-height:76px!important;
  max-height:76px!important;
  padding:5px 8px 7px!important;
  align-items:end!important;
  grid-auto-rows:minmax(0,1fr)!important;
 }
 .bottom-dock .nav-item{
  align-self:end!important;
  height:54px!important;
  min-height:54px!important;
  margin:0!important;
  padding:4px 1px 3px!important;
 }
 .bottom-dock .main-play{
  align-self:end!important;
  margin:0 auto!important;
  width:clamp(60px,16vw,70px)!important;
 }
 .station{
  padding-bottom:91px!important;
 }
 .autoplay-notice{
  bottom:89px!important;
 }
}
@media(max-width:699px) and (max-height:740px){
 .bottom-dock{
  height:70px!important;
  min-height:70px!important;
  max-height:70px!important;
  padding:4px 8px 7px!important;
 }
 .bottom-dock .nav-item{
  height:49px!important;
  min-height:49px!important;
 }
 .bottom-dock .main-play{
  width:clamp(56px,16vw,62px)!important;
 }
 .station{
  padding-bottom:84px!important;
 }
 .autoplay-notice{
  bottom:80px!important;
 }
}
/* Native home-indicator background uses the same palette as the dock. */
html{background:#2f1416}


/* TÜRKVOX PWA v55 — premium, compact account bottom sheet.
   Style only the Account tab; all radio audio, messaging and program UI
   are untouched. */
.sheet.account-sheet{
 width:min(100%,640px);
 max-height:91dvh;
 padding:12px 16px calc(20px + env(safe-area-inset-bottom,0px));
 border:1px solid rgba(244,140,145,.30);
 border-bottom:0;
 border-radius:29px 29px 0 0;
 background:
  radial-gradient(ellipse 75% 38% at 9% 3%,rgba(186,64,70,.18),transparent 70%),
  linear-gradient(155deg,#3f1f21 0%,#35181a 50%,#2b1214 100%);
 box-shadow:0 -18px 65px rgba(17,2,3,.48);
 scrollbar-width:thin;
 overscroll-behavior:contain;
}
.sheet.account-sheet .sheet-handle{
 width:42px;height:5px;margin:0 auto 12px;background:#bb939599;
}
.sheet.account-sheet .sheet-head{
 position:sticky;top:-12px;z-index:3;
 display:flex;align-items:center;justify-content:space-between;
 margin:0 -2px 14px;padding:8px 2px 10px;
 background:linear-gradient(180deg,#402022 60%,rgba(64,32,34,.96));
 border-radius:0 0 16px 16px;
}
.sheet.account-sheet .sheet-head h2{
 font-size:clamp(22px,5.4vw,28px);
 font-weight:850;letter-spacing:-.8px;
}
.sheet.account-sheet .close-sheet{
 background:rgba(255,255,255,.10);
 border:1px solid rgba(255,255,255,.12);
 width:38px;height:38px;
 font-size:26px;
}
.sheet.account-sheet #sheetContent{min-width:0}
.sheet.account-sheet .mixia-account{
 display:flex;flex-direction:column;gap:14px;padding:0 0 8px;
}
.account-hero{
 position:relative;isolation:isolate;overflow:hidden;
 display:grid;gap:13px;
 border:1px solid rgba(255,145,151,.28);
 border-radius:21px;
 padding:19px 18px 17px;
 background:linear-gradient(132deg,#4d2224 0%,#452123 48%,#432123 100%);
 box-shadow:0 9px 28px rgba(24,6,7,.17),inset 0 1px rgba(255,255,255,.06);
}
.account-hero-glow{
 position:absolute;z-index:-1;pointer-events:none;
 right:-85px;top:-115px;width:270px;height:265px;
 background:radial-gradient(circle,#e6595f4d,rgba(210,76,82,.16) 45%,transparent 72%);
}
.account-hero-top{
 display:flex;align-items:center;justify-content:space-between;
 flex-wrap:wrap;gap:8px;
}
.account-hero-eyebrow{
 display:inline-flex;align-items:center;gap:3px;
 color:#e9babd;font-size:10px;letter-spacing:1.6px;
 font-weight:850;
}
.account-hero-eyebrow span{color:#ff6d74}
.account-membership{
 display:inline-flex;align-items:center;gap:6px;
 border:1px solid rgba(255,189,192,.23);
 background:rgba(255,255,255,.075);
 padding:6px 9px;border-radius:100px;
 color:#e9babd;font-size:9px;font-weight:800;
 letter-spacing:.48px;white-space:nowrap;
}
.account-member-dot{
 width:7px;height:7px;border-radius:50%;background:#b49092;
 box-shadow:0 0 0 3px #b4909224;
}
.account-membership.is-member{
 background:#bf414722;border-color:#db6a6f54;color:#ffbdc0;
}
.account-membership.is-member .account-member-dot{
 background:#ed6067;box-shadow:0 0 0 3px #ed606725;
}
.account-person{display:flex;align-items:center;gap:13px;padding:2px 0;min-width:0}
.account-avatar{
 position:relative;
 width:63px;height:63px;border-radius:19px;flex:none;
 display:grid;place-items:center;
 color:white;font-size:32px;
 background:linear-gradient(135deg,#fa5058,#d73b42);
 border:1px solid #ffbdc06e;
 box-shadow:0 8px 22px #c63f4657,inset 0 1px #ffffff50;
}
.account-identity{display:flex;flex-direction:column;gap:5px;min-width:0;flex:1}
.account-person strong{
 display:block;
 font-size:clamp(19px,5vw,24px);font-weight:860;letter-spacing:-.6px;
 line-height:1.22;overflow-wrap:anywhere;
}
.account-person p{
 margin:0;color:#dfb2b5;font-size:12px;line-height:1.4;
 overflow-wrap:anywhere;max-width:100%;
}
.account-hero .account-note{
 display:flex;align-items:center;min-height:32px;
 margin:0;padding:10px 11px 10px 30px;
 border:1px solid rgba(252,189,192,.13);
 border-radius:11px;
 background:rgba(41,14,15,.32);
 color:#edbec0;font-size:11px;line-height:1.5;
 position:relative;
}
.account-hero .account-note:before{
 content:"✓";position:absolute;left:11px;top:11px;
 color:#e9acaf;font-size:12px;font-weight:850;
}
.account-profile-controls{display:grid;gap:9px}
#accountAuthMount{min-width:0}
#accountAuthMount:empty{display:none}
#accountAuthMount .mixia-auth-panel{
 margin:0;border:0;background:none;padding:0;border-radius:0;gap:9px;
}
.account-profile-edit,.account-settings{
 margin:0;background:rgba(36,13,14,.34);
 border:1px solid rgba(201,125,129,.31);
 border-radius:15px;overflow:hidden;
}
.account-profile-edit[hidden]{display:none!important}
.account-profile-edit summary,.account-settings summary{
 list-style:none;display:flex;align-items:center;gap:11px;
 min-height:51px;padding:10px 13px;
 color:#fdcacd;cursor:pointer;
 font-weight:760;font-size:13px;
}
.account-profile-edit summary::-webkit-details-marker,
.account-settings summary::-webkit-details-marker{display:none}
.account-settings-icon{
 display:grid;place-items:center;
 width:31px;height:31px;flex:none;
 border:1px solid #da74794a;border-radius:10px;
 background:linear-gradient(135deg,#bc4f5431,#cd63682c);
 color:#ffbdc1;font-size:17px;
}
.account-settings-copy{min-width:0;display:grid;gap:3px}
.account-settings-copy strong{font-size:13px}
.account-settings-copy small{font-size:10px;color:#cba2a4;font-weight:500}
.account-settings-arrow{margin-left:auto;color:#e8b2b4;font-size:17px;transition:transform .2s}
.account-profile-edit summary .account-settings-arrow{margin-left:auto}
.account-settings[open] .account-settings-arrow,.account-profile-edit[open] .account-settings-arrow{
 transform:rotate(180deg);
}
.account-settings-body{
 display:grid;gap:12px;padding:0 14px 14px;
 border-top:1px solid rgba(255,255,255,.065);
}
.account-settings-body .auth-profile-form{padding-top:14px}
.account-profile-edit form{padding:3px 14px 14px;gap:10px;grid-template-columns:minmax(0,1fr) auto}
.account-profile-edit label{font-size:11px}
.account-profile-edit input{font-size:16px;padding:11px 12px}
.account-profile-edit button{font-size:12px;padding:12px 14px}
.account-profile-edit small{font-size:11px}
.account-settings-body .auth-logout{
 align-self:flex-start;
 padding:8px 0;border:0;background:none;color:#f3b4b7;
 text-decoration:none;font-weight:730;
}
.account-settings-body .auth-logout:before{content:"↪";margin-right:7px;font-size:16px}
.account-library{display:grid;gap:12px;min-width:0;padding:4px 1px}
.account-section-heading{
 display:flex;align-items:end;justify-content:space-between;
 gap:10px;min-width:0;
}
.account-section-overline{
 font-size:10px;letter-spacing:1.6px;font-weight:850;color:#ed888c;
}
.account-section-heading h3{
 margin:6px 0 0;font-size:clamp(17px,4.5vw,20px);
 font-weight:810;color:#fff;letter-spacing:-.4px;
}
.account-count-chip{
 flex:none;padding:7px 10px;border-radius:30px;
 font-size:10px;font-weight:800;color:#ebbcbe;
 border:1px solid #ffffff20;background:#ffffff0a;
}
.account-tabs{
 display:grid;grid-template-columns:1fr 1fr;gap:5px;
 background:#280c0dab;border:1px solid #9f5e6146;
 border-radius:15px;padding:5px;
}
.account-tabs button{
 display:flex;gap:7px;align-items:center;justify-content:center;
 min-width:0;padding:12px 4px;border-radius:11px;
 font-size:12px;font-weight:780;color:#cca1a3;
 background:transparent;border:0;
}
.account-tabs button.selected{
 color:white;background:linear-gradient(120deg,#e0484f,#d84e55);
 box-shadow:0 5px 16px #aa353a43;
}
.account-tab-icon{font-size:17px;line-height:1;color:inherit}
.account-tabs button span#accountFavoriteCount{
 padding:2px 7px;margin-left:0;
 background:rgba(255,255,255,.21);font-size:10px;color:#fff;
 border-radius:50px;
}
.account-search input{
 font-size:16px;border-radius:13px;
 min-height:44px;
 background:#220b0ca8;
}
.account-tracks{
 border:1px solid rgba(201,122,126,.28);
 border-radius:16px;
 background:#250c0db0;
 max-height:min(42dvh,410px);
 overscroll-behavior:contain;
}
.account-song{padding:10px 12px;gap:11px}
.account-song-note{
 height:38px;width:38px;border-radius:12px;
 background:linear-gradient(130deg,#e64a5236,#ef5b632c);
}
.account-song-meta strong{font-size:13px}
.account-song-meta small{font-size:11px}
.account-empty-state{
 display:flex;flex-direction:column;align-items:center;justify-content:center;
 text-align:center;gap:10px;
 padding:25px 18px 24px;min-height:205px;
}
.account-empty-icon{
 display:grid;place-items:center;
 width:52px;height:52px;border-radius:16px;
 color:#fa9095;font-size:30px;
 background:linear-gradient(145deg,#e1424a1f,#d0565b3c);
 border:1px solid #d86d724c;
}
.account-empty-state strong{font-size:14px;font-weight:780}
.account-empty-state p{
 margin:0;max-width:280px;color:#d5aaac;font-size:11px;line-height:1.65;
}
.account-empty-action{
 border:1px solid #ec808560;background:#d7495026;color:#ffcacc;
 padding:9px 14px;border-radius:11px;font-size:12px;font-weight:770;
 margin-top:1px;
}
.account-empty{padding:30px 12px;font-size:12px}
.account-foot{
 display:flex;align-items:center;justify-content:space-between;
 gap:11px;border-top:1px solid #ffffff18;
 margin-top:1px;padding:12px 1px 0;
}
.account-foot small{font-size:10px;max-width:75%;line-height:1.55;color:#c9a1a3}
.account-foot button{
 border:1px solid #b76b6e50;background:#ffffff0b;
 color:#f6c5c7;border-radius:11px;
 padding:10px 12px;font-size:11px;
}
#accountAuthMount .auth-mode-tabs{border:1px solid #a35c5f58;border-radius:13px}
#accountAuthMount .auth-profile-form .auth-field{font-size:12px}
#accountAuthMount .auth-field input{font-size:16px;min-height:44px;border-radius:11px}
#accountAuthMount .auth-primary{font-size:13px;padding:12px 15px;border-radius:11px}
#accountAuthMount .auth-forgot{padding:12px 5px}
#accountAuthMount .auth-feedback{font-size:11px}
#accountAuthMount .auth-mode-tabs button{font-size:13px}
.sheet.account-sheet .mixia-account button:focus-visible,
.sheet.account-sheet .mixia-account summary:focus-visible{
 outline:2px solid #ff8086;outline-offset:2px;
}
@media(max-width:390px){
 .sheet.account-sheet{padding:10px 13px calc(17px + env(safe-area-inset-bottom,0px))}
 .account-hero{padding:16px 14px 15px;gap:12px}
 .account-hero-eyebrow{font-size:9px;letter-spacing:1px}
 .account-membership{font-size:8px;padding:5px 8px}
 .account-person{gap:11px}
 .account-avatar{width:54px;height:54px;border-radius:17px;font-size:27px}
 .account-tabs button{font-size:11px;gap:5px}
 .account-tab-icon{font-size:16px}
 .account-section-heading h3{font-size:17px}
}
@media(max-height:700px){
 .sheet.account-sheet{max-height:94dvh}
 .account-hero{padding-top:13px;padding-bottom:13px;gap:9px}
 .account-empty-state{min-height:170px;padding:18px 10px}
 .account-empty-icon{width:44px;height:44px}
}


/* TÜRKVOX premium partner placement. Hidden entirely without active sponsors. */
.mixia-sponsor[hidden]{display:none!important}
.mixia-sponsor-pwa{width:100%;max-width:560px;margin:9px auto 0;flex:none;
  transition:opacity .25s ease,filter .25s ease;position:relative;z-index:1}
.mixia-sponsor-pwa .sponsor-target{display:flex;align-items:center;gap:11px;
  width:100%;padding:9px 12px;min-height:58px;border-radius:16px;text-decoration:none;
  border:1px solid rgba(243,148,153,.31);
  background:linear-gradient(110deg,rgba(64,26,28,.97),rgba(51,19,21,.94));
  box-shadow:0 8px 22px rgba(24,3,4,.19);color:white}
.mixia-sponsor-pwa .sponsor-logo{flex:none;max-width:94px;width:68px;height:44px;
  object-fit:contain;border-radius:8px;background:#ffffff0d}
.mixia-sponsor-pwa .sponsor-copy{display:flex;flex-direction:column;gap:1px;
  min-width:0;flex:1;text-align:left}
.mixia-sponsor-pwa .sponsor-label{color:#fba2a6;font-size:9px;font-weight:850;letter-spacing:1.2px}
.mixia-sponsor-pwa .sponsor-name{font-size:12px;color:#fff;font-weight:900;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mixia-sponsor-pwa .sponsor-subtitle{font-size:10px;color:#dcb0b2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mixia-sponsor-pwa .sponsor-cta{font-size:10px;font-weight:850;color:#fabdc0;
  white-space:nowrap;flex:none}
.mixia-sponsor-pwa[data-theme="light"] .sponsor-target{background:#f4edf9;color:#351618;border-color:#ffffff90}
.mixia-sponsor-pwa[data-theme="light"] .sponsor-name{color:#351618}
.mixia-sponsor-pwa[data-theme="light"] .sponsor-subtitle{color:#704a4c}
.mixia-sponsor-pwa[data-theme="light"] .sponsor-label{color:#a32e34}
.mixia-sponsor-pwa.sponsor-changing{opacity:.18;filter:blur(2px)}
@media(max-width:375px){.mixia-sponsor-pwa .sponsor-target{gap:8px;padding:8px}
 .mixia-sponsor-pwa .sponsor-logo{width:56px}
 .mixia-sponsor-pwa .sponsor-cta{font-size:9px}}
@media(max-height:620px){.mixia-sponsor-pwa .sponsor-target{min-height:48px;padding:6px 10px}
 .mixia-sponsor-pwa .sponsor-logo{height:35px}}
@media(prefers-reduced-motion:reduce){.mixia-sponsor-pwa{transition:none!important}}


/* TÜRKVOX official flag red PWA Nov 2026 */
:root{--bg:#0c0306;--pink:#e30a17;--purple:#ff4847;--line:#ff404038;--text:#fff;--muted:#dcbfc3}
html{background:#070204!important}
body{color:#fff;background:radial-gradient(ellipse at 50% 28%,rgba(195,5,21,.26),transparent 42%),radial-gradient(ellipse at 9% 95%,rgba(118,0,13,.16),transparent 53%),linear-gradient(180deg,#080204,#190509 52%,#090204)!important}
.station{background:transparent!important}
.app-wordmark{width:clamp(129px,39vw,175px)!important;filter:drop-shadow(0 3px 11px #e30a1755)!important}
.brand-line{min-height:41px}
.tagline{font-family:Georgia,"Times New Roman",serif!important;font-style:italic!important;font-size:clamp(14px,4.2vw,24px)!important;font-weight:500!important;letter-spacing:0!important;line-height:1.2!important;min-height:28px!important;color:#fff!important;text-shadow:0 2px 12px #e30a177d;margin:0 auto 5px!important}
.vinyl-stage{margin-bottom:0!important}
.vinyl-glow{background:radial-gradient(circle,#e30a175e,#8b001533 49%,transparent 75%)!important}
.vinyl{box-shadow:0 0 0 2px #e30a17a8,0 0 39px #e30a174f,0 19px 42px #0008!important}
.vinyl-stage:before{filter:drop-shadow(0 0 8px #e30a17)!important}
.vinyl-stage:after{border-color:#ff564b!important}
.live-pill{background:linear-gradient(110deg,#a00412,#e30a17)!important;border:1px solid #ff707088!important;box-shadow:0 0 19px #e30a1750!important;color:#fff!important}
.live-dot{background:#fff!important;box-shadow:0 0 0 4px #ff414143,0 0 9px #e30a17!important}
.overline,.music-chip{color:#ffadaa!important}
.song-artist{color:#ddc0c4!important}
.signal-value,.song-timeline-fill{background:linear-gradient(90deg,#a50010,#e30a17,#ff6358)!important}
.bottom-dock{background:linear-gradient(130deg,rgba(54,5,11,.97),rgba(10,2,5,.97))!important;border:1px solid #e30a1780!important;box-shadow:0 8px 35px #000b,0 0 20px #e30a1720!important}
.nav-item{color:#f4dfe1!important}
.nav-item svg{stroke:#fff0f0!important}
.nav-item.active{border-radius:13px;background:#e30a1733!important}
.nav-item.active:after{background:linear-gradient(90deg,#ff665d,#e30a17)!important}
.main-play{background:linear-gradient(130deg,#ff4037,#e30a17 63%,#aa0012)!important;border-color:#ffaaa077!important;box-shadow:0 0 0 8px #e30a1720,0 6px 27px #e30a177f!important}
.top-buttons button{background:#38060ee0!important;border:1px solid #e30a1777!important}
.autoplay-notice{background:linear-gradient(120deg,#c70718,#79020e)!important;border-color:#ff777799!important}
.sheet{background:linear-gradient(180deg,#300910,#0e0305)!important;border-color:#e30a1770!important}
button:focus-visible,a:focus-visible{outline-color:#ff5555!important}
@media(max-height:740px){.tagline{font-size:clamp(12px,3.5vw,17px)!important;min-height:20px!important;margin:0 auto 1px!important}}


/* TÜRKVOX PWA audio-reactive ring: same transparent white crescent/star as TV */
.vinyl-stage .visualizer-core{
  background:transparent!important;
  overflow:visible!important;
}
.vinyl-stage .mixia-center-logo{
  display:block!important;
  width:min(60%,184px)!important;
  height:auto!important;
  aspect-ratio:1/1!important;
  max-height:62%!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  filter:drop-shadow(0 0 10px rgba(255,255,255,.10))!important;
  pointer-events:none!important;
  z-index:3!important;
}
body.is-playing .vinyl-stage .vinyl{
  animation:none!important;
}
@media(max-height:740px){
  .vinyl-stage .mixia-center-logo{
    width:min(62%,145px)!important;
    max-height:64%!important;
  }
}
@media(max-width:390px){
  .vinyl-stage .mixia-center-logo{
    width:min(62%,139px)!important;
  }
}


/* TÜRKVOX PWA RED FLAG DISC v2 — near-black burgundy center, large white crescent/star.
   Preserve sound-reactive 160-ray visualizer outside; no duplicate static bars. */
.vinyl-stage .vinyl{
  background:radial-gradient(circle at 40% 29%,
    #330913 0%,#25050e 35%,#130208 72%,
    #090105 100%)!important;
  border:0!important;
  border-radius:50%!important;
  padding:0!important;
  box-shadow:
    0 0 0 2px rgba(255,197,186,.98),
    0 0 0 6px rgba(248,17,33,.98),
    0 0 18px 7px rgba(227,10,23,.68),
    0 0 36px 10px rgba(227,10,23,.25),
    inset 0 0 12px rgba(54,0,7,.75)!important;
  isolation:isolate!important;
  overflow:visible!important;
}
.vinyl-stage .visualizer-core{
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  background:radial-gradient(circle at 42% 33%,
    #310912 0%, #21050c 38%, #120207 76%, #080104 100%)!important;
  border:2px solid rgba(255,140,130,.52)!important;
  box-sizing:border-box!important;
  box-shadow:inset 0 1px 7px rgba(255,225,218,.15),
    inset 0 -14px 27px rgba(72,0,5,.23)!important;
  overflow:hidden!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
}
.vinyl-stage .mixia-center-logo{
  position:relative!important;
  display:block!important;
  width:85%!important;
  max-width:85%!important;
  height:85%!important;
  max-height:85%!important;
  flex:0 0 85%!important;
  aspect-ratio:1!important;
  object-fit:contain!important;
  border-radius:0!important;
  background:none!important;
  box-shadow:none!important;
  filter:drop-shadow(0 2px 2px rgba(70,0,2,.14))!important;
  pointer-events:none!important;
  z-index:4!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
@media(max-height:740px){
  .vinyl-stage .mixia-center-logo{
    width:86%!important;max-width:86%!important;
    height:86%!important;max-height:86%!important;flex-basis:86%!important;
  }
}
@media(max-width:390px){
  .vinyl-stage .mixia-center-logo{
    width:86%!important;max-width:86%!important;
    height:86%!important;max-height:86%!important;flex-basis:86%!important;
  }
}
@media(prefers-reduced-motion:reduce){
  .vinyl-stage .vinyl{animation:none!important}
}

/* TürkVox Radio: initial 3-second brand screen (PWA, TV and TV WebView). */
.turkvox-splash{
 position:fixed!important;inset:0!important;z-index:2147483000!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 min-width:100vw;min-height:100vh;min-height:100dvh;
 background:radial-gradient(ellipse at 50% 45%,#490711 0%,#1b0208 36%,#070306 78%);
 color:#fff;overflow:hidden;isolation:isolate;opacity:1;visibility:visible;
 transition:opacity .72s cubic-bezier(.23,1,.32,1),visibility 0s linear .72s;
 -webkit-font-smoothing:antialiased;pointer-events:auto;
}
.turkvox-splash::before{
 content:"";position:absolute;inset:14%;border-radius:50%;
 background:radial-gradient(circle,rgba(227,10,23,.2),transparent 65%);
 filter:blur(28px);animation:turkvoxSplashGlow 2s ease-in-out infinite alternate;
 pointer-events:none;
}
.turkvox-splash-inner{
 position:relative;z-index:1;display:flex;flex-direction:column;
 align-items:center;justify-content:center;gap:clamp(14px,3vh,30px);
 width:min(88vw,760px);text-align:center;
 transform:scale(1);filter:blur(0);
 transition:transform .72s cubic-bezier(.23,1,.32,1),filter .72s ease;
}
.turkvox-splash-logo{
 display:block;width:min(62vw,340px);height:auto;max-height:62vh;object-fit:contain;
 filter:drop-shadow(0 0 28px rgba(227,10,23,.3));
 animation:turkvoxSplashEnter .75s ease-out both;
}
.turkvox-splash--tv .turkvox-splash-logo{
 width:min(72vw,690px);max-height:55vh;aspect-ratio:auto;
}
.turkvox-splash-loader{width:clamp(120px,27vw,240px);height:3px;border-radius:4px;background:rgba(255,255,255,.17);overflow:hidden}
.turkvox-splash-loader span{display:block;width:100%;height:100%;border-radius:4px;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,#a30914,#ef3947,#fff);animation:turkvoxSplashFill 3s linear both}
.turkvox-splash-caption{margin:0!important;color:#e7b5bc;font:500 clamp(11px,1.9vw,14px)/1.3 system-ui,-apple-system,sans-serif!important;letter-spacing:.11em}
.turkvox-splash--out{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
.turkvox-splash--out .turkvox-splash-inner{transform:scale(1.08);filter:blur(9px)}
@keyframes turkvoxSplashFill{to{transform:scaleX(1)}}
@keyframes turkvoxSplashEnter{from{opacity:.4;transform:scale(.92)}to{opacity:1;transform:scale(1)}}
@keyframes turkvoxSplashGlow{from{opacity:.45;transform:scale(.9)}to{opacity:1;transform:scale(1.05)}}
@media(prefers-reduced-motion:reduce){
 .turkvox-splash::before,.turkvox-splash-logo{animation:none!important}
 .turkvox-splash--out,.turkvox-splash--out .turkvox-splash-inner{transition-duration:.15s!important}
}