:root{
  --z:2;
  --bg:#14141c; --bg2:#1d2030;
  --frame:#30304a; --frame2:#23233a; --hi:#6e6e94; --lo:#0b0b14;
  --btn:#bdbdcc; --btn2:#6d6d84;
  --lcd:#000; --g:#00e000; --g2:#0f5a0f; --gtxt:#00f800;
  --title1:#d6c46a; --title2:#4a4a6e;
  --sel:#0000c6;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 700px at 30% 0%,#26304e 0%,var(--bg) 60%) fixed,var(--bg);
  color:#c8c8d8;font:13px/1.4 Tahoma,Verdana,"Segoe UI",system-ui,sans-serif;
  min-height:100vh;display:flex;flex-direction:column;align-items:center;
  -webkit-tap-highlight-color:transparent;
}
header.site{text-align:center;padding:18px 16px 4px}
header.site h1{margin:0;font:bold 22px/1.1 Tahoma,Verdana,sans-serif;color:#e8e8f0;letter-spacing:.5px;text-shadow:0 2px 0 #000}
header.site h1 span{color:var(--g);font-weight:normal}
#hint{margin:6px 0 0;color:#8a8aa8;font-size:12px;animation:pulse 1.6s ease-in-out infinite}
#hint.gone{visibility:hidden;animation:none}
@keyframes pulse{50%{opacity:.35}}
footer.site{padding:14px 16px 22px;color:#6a6a88;font-size:11px;text-align:center}
footer.site code{color:var(--g);font-family:inherit}

#desk{display:flex;gap:calc(10px*var(--z));padding:12px 16px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.col{display:flex;flex-direction:column}
.win{
  zoom:var(--z);position:relative;width:275px;
  background:linear-gradient(180deg,var(--frame) 0%,var(--frame2) 100%);
  box-shadow:inset 1px 1px 0 var(--hi),inset -1px -1px 0 var(--lo),0 0 0 1px #000;
  font:8px/1 Tahoma,Verdana,sans-serif;color:var(--g);user-select:none;-webkit-user-select:none;
  image-rendering:pixelated;
}
.win.main,.win.eq{height:116px}
.win.pl{height:232px}
.win.dragging{z-index:10;opacity:.96}

/* başlık çubuğu */
.tbar{position:absolute;left:0;top:0;right:0;height:14px;display:flex;align-items:center;padding:0 3px 0 6px;gap:4px;cursor:default}
.tbar b{font:bold 8px/1 Tahoma,sans-serif;color:#e8e2c0;letter-spacing:.8px;white-space:nowrap;text-shadow:0 1px 0 #000}
.tb-l,.tb-r{flex:1;height:7px;background:repeating-linear-gradient(180deg,var(--title1) 0 1px,var(--title2) 1px 2px);opacity:.75}
.tbtn{font:normal 8px/7px monospace;width:9px;height:9px;text-align:center;font-style:normal;color:#222;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff8,inset -1px -1px 0 #0008}
@media (pointer:fine){.tbar{cursor:move}}

.clutter{position:absolute;left:10px;top:22px;width:8px;height:43px;background:#111;color:#666;font:bold 6px/8.4px monospace;text-align:center;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi)}

/* LCD */
.lcd{position:absolute;left:22px;top:20px;width:84px;height:44px;background:var(--lcd);box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi),0 0 0 1px #000;cursor:pointer}
.st{position:absolute;left:5px;top:7px;width:9px;height:9px}
.st.play{background:var(--g);clip-path:polygon(0 0,100% 50%,0 100%)}
.st.pause{background:linear-gradient(90deg,#d8c000 0 35%,transparent 35% 65%,#d8c000 65%)}
.st.stop{background:#d01010;transform:scale(.8)}
.st.buf{background:var(--g);clip-path:polygon(0 0,100% 50%,0 100%);animation:blink .5s steps(1) infinite}
#time{position:absolute;left:18px;top:4px;width:63px;height:13px}
#vis{position:absolute;left:4px;top:24px;width:76px;height:16px}
#time,#vis,#eqgraph{image-rendering:pixelated}
@keyframes blink{50%{opacity:0}}
.paused #time{animation:blink 1s steps(1) infinite}

.marquee{position:absolute;left:110px;top:22px;width:156px;height:12px;background:var(--lcd);overflow:hidden;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi)}
.marquee span{position:absolute;left:3px;top:2px;white-space:nowrap;font:8px/8px Tahoma,Verdana,sans-serif;color:var(--gtxt)}
.marquee span.run{left:0;animation:scroll linear infinite}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.info{position:absolute;left:110px;top:39px;width:156px;height:11px;display:flex;align-items:center;gap:3px}
.info .box{background:#000;color:var(--gtxt);width:16px;height:10px;font:8px/10px Tahoma,sans-serif;text-align:center;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi)}
.info small{font-size:7px;color:#c8c8d8;margin-right:4px}
.ms{font:7px/1 Tahoma,sans-serif;color:var(--g2);margin-left:auto}
.ms+.ms{margin-left:3px}
.ms.on{color:var(--g)}

/* kaydırıcılar */
.slider{position:absolute;top:56px;height:13px;display:block}
.slider.vol{left:108px;width:68px}
.slider.bal{left:178px;width:38px}
.slider input{width:100%;height:100%;margin:0}
input[type=range]{-webkit-appearance:none;appearance:none;background:transparent;cursor:pointer;touch-action:none}
input[type=range]::-webkit-slider-runnable-track{height:5px;margin-top:0;background:var(--track,#335533);box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #fff3}
input[type=range]::-moz-range-track{height:5px;background:var(--track,#335533);box-shadow:inset 1px 1px 0 #000}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:11px;margin-top:-3px;border:0;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000}
input[type=range]::-moz-range-thumb{width:14px;height:11px;border:0;border-radius:0;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000}
input[type=range]:focus-visible{outline:1px dotted var(--g)}

.tog{position:absolute;top:57px;width:23px;height:12px;padding:0;border:0;font:bold 6px/12px Tahoma,sans-serif;color:#333;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;cursor:pointer}
.tog[aria-pressed=true]{color:#0a0;text-shadow:0 0 2px #0f0}
#t-eq{left:219px}#t-pl{left:243px}

.pos{position:absolute;left:16px;top:72px;width:248px;height:10px;background:#0c0c14;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi)}
.pos i{position:absolute;top:0;left:0;width:29px;height:10px;background:linear-gradient(#d2d2de,#77778c);box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;display:none}
.pos.on i{display:block}

.ctrl{position:absolute;left:16px;top:87px;right:0;height:20px}
.cb{position:absolute;top:0;width:23px;height:18px;padding:0;border:0;display:grid;place-items:center;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;cursor:pointer}
.cb svg{width:11px;height:8px;fill:#1c1c28}
.cb:active{background:linear-gradient(var(--btn2),var(--btn));box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #fff}
#b-prev{left:0}#b-play{left:23px}#b-pause{left:46px}#b-stop{left:69px}#b-next{left:92px}
.cb.ej{left:120px;top:1px;width:22px;height:16px}
.sh,.rp{position:absolute;top:2px;height:15px;font:bold 6px/15px Tahoma,sans-serif;color:#555;text-align:center;background:linear-gradient(#9a9aac,#55556a);box-shadow:inset 1px 1px 0 #ccc,inset -1px -1px 0 #000}
.sh{left:148px;width:47px}.rp{left:195px;width:28px}
.logo{position:absolute;left:236px;top:3px;font-size:11px;color:#e2c84a;text-shadow:0 0 3px #a80}

/* ekolayzer */
.eqb{position:absolute;top:18px;height:12px;padding:0 4px;border:0;font:bold 7px/12px Tahoma,sans-serif;color:#333;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;cursor:pointer}
#eq-on{left:14px;width:26px}
#eq-on[aria-pressed=true]{color:#0a0;text-shadow:0 0 2px #0f0}
#eq-reset{left:42px;width:34px}
#eqgraph{position:absolute;left:86px;top:17px;width:113px;height:19px;background:#000;box-shadow:0 0 0 1px #000}
#eq-preset{position:absolute;left:206px;top:18px;width:56px;height:12px;font:bold 7px Tahoma,sans-serif;padding:0;border:0;color:#333;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;cursor:pointer}
.bands{position:absolute;left:0;top:38px;width:275px;height:72px}
.band{position:absolute;top:0;width:14px;height:72px;display:flex;flex-direction:column;align-items:center}
.band input{writing-mode:vertical-lr;direction:rtl;width:14px;height:63px;margin:0}
.band input::-webkit-slider-runnable-track{width:5px;height:auto}
.band input::-webkit-slider-thumb{width:11px;height:11px;margin:0 -3px}
.band input::-moz-range-track{width:5px;height:auto}
.band input::-moz-range-thumb{width:11px;height:11px}
.band span{font:6px/1 Tahoma,sans-serif;color:#c8c8d8;margin-top:2px;white-space:nowrap}
.eqlbl{position:absolute;left:40px;top:38px;height:63px;display:flex;flex-direction:column;justify-content:space-between;font:6px/1 Tahoma,sans-serif;color:#c8c8d8}

/* çalma listesi */
.plist{position:absolute;left:12px;top:20px;right:20px;height:172px;margin:0;padding:2px 3px;list-style:none;background:#000;overflow:auto;font:9px/11px Tahoma,Verdana,sans-serif;color:var(--gtxt);box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi);scrollbar-width:thin;scrollbar-color:#556 #000;user-select:text;-webkit-user-select:text}
.plist li{display:flex;gap:4px;white-space:nowrap;padding:0 1px}
.plist li .t{flex:1;overflow:hidden;text-overflow:ellipsis}
.plist li .d{color:var(--gtxt)}
.plist li.cur{color:#fff;background:var(--sel)}
.plist li.sep{color:#558855;justify-content:center;margin:2px 0}
.plist li.live{color:#ff4040;font-weight:bold}
.pfoot{position:absolute;left:12px;right:12px;bottom:8px;height:26px;display:flex;align-items:center;gap:3px}
.pbtn{width:28px;height:16px;padding:0;border:0;display:grid;place-items:center;font:bold 7px/1 Tahoma,sans-serif;color:#222;text-decoration:none;background:linear-gradient(var(--btn),var(--btn2));box-shadow:inset 1px 1px 0 #fff,inset -1px -1px 0 #000;cursor:pointer}
.pbtn:active{box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 #fff}
.pinfo{margin-left:auto;width:96px;height:22px;background:#000;color:var(--gtxt);font:8px/10px Tahoma,sans-serif;padding:1px 4px;text-align:right;box-shadow:inset 1px 1px 0 #000,inset -1px -1px 0 var(--hi)}
#onair{color:#ff3030;font-weight:bold}
#onair.on{animation:blink 1s steps(1) infinite}

.hidden{display:none!important}
@media (prefers-reduced-motion:reduce){#hint,#onair.on,.paused #time{animation:none}}