:root{--bg:#f4f8ff;--bg-soft:#e8f1ff;--bg-card:#fff;--accent:#2563eb;--accent-2:#0ea5e9;--accent-glow:rgba(37,99,235,.28);--text:#1a2235;--text-dim:#697089;--border:rgba(26,34,53,.09);--shadow:0 6px 22px rgba(37,99,235,.1);--fd:"Sora",sans-serif;--fb:"Outfit",sans-serif}*{margin:0;padding:0;box-sizing:border-box}html{scroll-behavior:smooth}body{font-family:var(--fb);background:var(--bg);color:var(--text);min-height:100vh;padding-bottom:96px;position:relative}body:before{content:"";position:fixed;inset:0;z-index:-2;background:url(/bg-muzik.png) center 5% / cover no-repeat;background-attachment:fixed}@media (max-width:640px){body:before{background-position:center 3%;background-attachment:scroll}}body:after{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(180deg,#f4f8ffb3,#f4f8ffc7 40%,#f4f8ffd9);backdrop-filter:saturate(1.1)}a{color:inherit;text-decoration:none}.container{max-width:1240px;margin:0 auto;padding:0 20px}header{position:sticky;top:0;z-index:100;backdrop-filter:blur(20px);background:#f4f8ffd1;border-bottom:1px solid var(--border)}.header-inner{display:flex;align-items:center;gap:24px;padding:15px 20px;max-width:1240px;margin:0 auto}.logo{font-family:var(--fd);font-weight:800;font-size:1.4rem;letter-spacing:-.5px;display:flex;align-items:center;gap:9px}.logo .dot{width:11px;height:11px;border-radius:50%;background:var(--accent);box-shadow:0 0 12px var(--accent-glow);animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.8)}}.logo span{color:var(--accent)}.search-box{flex:1;max-width:440px;position:relative}.search-box input{width:100%;padding:11px 16px 11px 42px;border-radius:12px;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-family:var(--fb);font-size:.95rem;outline:none;transition:.2s;box-shadow:var(--shadow)}.search-box input:focus{border-color:var(--accent)}.search-box input::placeholder{color:var(--text-dim)}.search-box svg{position:absolute;left:14px;top:50%;transform:translateY(-50%);width:18px;height:18px;stroke:var(--text-dim)}.topnav{display:flex;gap:14px;font-size:.9rem;font-weight:500;color:var(--text-dim)}.topnav a:hover{color:var(--accent)}.cat-nav{background:linear-gradient(90deg,var(--accent),#1d4ed8);border-bottom:1px solid var(--border)}.cat-scroll{display:flex;flex-wrap:wrap;max-width:1240px;margin:0 auto}.cat-chip{flex:1;min-width:90px;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 6px;color:#ffffffeb;font-size:.78rem;font-weight:600;letter-spacing:.3px;border-right:1px solid rgba(255,255,255,.14);transition:.2s;text-transform:uppercase}.cat-chip svg{width:24px;height:24px}.cat-chip:hover,.cat-chip.active{background:#ffffff29;color:#fff}@media (max-width:640px){.cat-chip{flex:1 1 25%;min-width:0;padding:11px 4px;font-size:.7rem}.cat-chip svg{width:21px;height:21px}}.breadcrumb{font-size:.82rem;color:var(--text-dim);padding:16px 0 0}.breadcrumb a:hover{color:var(--accent-2)}footer{border-top:1px solid var(--border);padding:30px 0 20px;margin-top:30px;color:var(--text-dim);font-size:.85rem;text-align:center}footer a:hover{color:var(--accent-2)}.player{position:fixed;bottom:0;left:0;right:0;z-index:200;backdrop-filter:blur(24px);background:#ffffffeb;border-top:1px solid var(--border);box-shadow:0 -6px 30px #2563eb1f;transform:translateY(100%);transition:.35s cubic-bezier(.2,.8,.2,1)}.player.active{transform:translateY(0)}.player-inner{display:flex;align-items:center;gap:16px;padding:13px 20px;max-width:1240px;margin:0 auto}.player-logo{width:50px;height:50px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-soft)}.player-logo svg{width:100%;height:100%}.player-info{flex:1;min-width:0}.player-info .name{font-weight:600;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-info .status{font-size:.8rem;color:var(--accent-2);display:flex;align-items:center;gap:6px}.player-info .status .live-dot{width:7px;height:7px;border-radius:50%;background:var(--accent-2);animation:pulse 1.5s infinite}.player-info .status.loading{color:var(--text-dim)}.player-info .now-playing{font-size:.76rem;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;opacity:.85}.play-btn{width:50px;height:50px;border-radius:50%;background:var(--accent);border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:.2s}.play-btn:hover{transform:scale(1.07);box-shadow:0 0 20px var(--accent-glow)}.play-btn svg{width:20px;height:20px;fill:#fff}.volume{display:flex;align-items:center;gap:8px}.volume input{width:90px;accent-color:var(--accent)}@media (max-width:640px){.volume{display:none}.header-inner{flex-wrap:wrap}.search-box{order:3;max-width:100%;flex-basis:100%}.topnav{display:none}}