/* ====== Latar belakang ====== */
body { min-height: 100vh; background: url('bg.jpg') center/cover no-repeat fixed; position: relative; color: #f8f9fa; font-family: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif; }
body::before { content:""; position: fixed; inset: 0; background: radial-gradient(ellipse at center, rgba(0,0,0,0.35), rgba(0,0,0,0.65)); z-index: 0; }

/* ====== Card ====== */
.player-card { position: relative; z-index: 1; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 20px; box-shadow: 0 30px 80px rgba(0,0,0,0.45); max-width: 560px; width: 92%; padding: 28px 24px; }
.status-pill { display:inline-flex; align-items:center; gap:8px; font-size:.875rem; background: rgba(25,135,84,0.25); border:1px solid rgba(25,135,84,0.45); padding:4px 10px; border-radius:999px; }
.status-dot { width:8px; height:8px; border-radius:50%; background:#25d366; box-shadow:0 0 8px #25d366; }

/* ====== Cover art ====== */
.cover-wrap { width: 220px; height: 220px; border-radius: 16px; overflow: hidden; box-shadow: 0 18px 45px rgba(0,0,0,0.45); }
.cover-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ====== Progress timeline ====== */
.progress-wrap { width: 100%; max-width: 560px; margin-left: auto; margin-right: auto; }
.timeline { position: relative; height: 6px; background: rgba(255,255,255,.35); border-radius: 999px; overflow: hidden; }
.timeline__bar { position: absolute; inset: 0 auto 0 0; width: 0%; background: linear-gradient(90deg,#50fa7b,#8be9fd); border-radius: 999px; box-shadow: 0 0 10px rgba(80,250,123,.6); transition: width .2s linear; }

/* ====== Controls inline & interactive button ====== */
.controls-row { margin-top: 6px; }

.play-btn { display: inline-grid; place-items: center; border: none; color: #111; background: #fff; border-radius: 999px; cursor: pointer; position: relative; overflow: hidden; }
.play-btn.sm { width: 44px; height: 44px; box-shadow: 0 6px 16px rgba(0,0,0,.35); }
.play-btn.sm .fa-solid { font-size: 18px; }

/* State: playing = warna berubah + pulse */
.play-btn.playing { background: #50fa7b; color: #0b2e13; box-shadow: 0 0 0 0 rgba(80,250,123,.5); animation: pulse 1.6s ease-out infinite; }
@keyframes pulse { 0%{ box-shadow: 0 0 0 0 rgba(80,250,123,.55); } 70%{ box-shadow: 0 0 0 16px rgba(80,250,123,0); } 100%{ box-shadow: 0 0 0 0 rgba(80,250,123,0); } }

/* Ripple effect */
.btn-bling { --r: rgba(255,255,255,.35); }
.btn-bling__wave { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at var(--x,50%) var(--y,50%), var(--r) 0%, transparent 55%); opacity: 0; transition: opacity .25s ease; }
.btn-bling:active .btn-bling__wave { opacity: 1; }

/* Keyboard focus visible */
.play-btn:focus-visible { outline: 3px solid #8be9fd; outline-offset: 2px; }

/* Volume button (right) + popover */
.icon-btn { width: 40px; height: 40px; display:inline-grid; place-items:center; border:none; border-radius:999px; background:#fff; color:#111; box-shadow:0 6px 16px rgba(0,0,0,.35); cursor:pointer; }
.icon-btn:hover { transform: translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.45); }
.icon-btn:active { transform: translateY(0); }
.icon-btn:focus-visible { outline: 3px solid #8be9fd; outline-offset: 2px; }
.right { justify-content: flex-end; }
.vol-popover { position:absolute; right: 0; top: -52px; background: rgba(30,30,30,.9); padding: 8px 10px; border-radius: 10px; border:1px solid rgba(255,255,255,.2); box-shadow: 0 10px 20px rgba(0,0,0,.35); display:none; }
.vol-popover input[type="range"]{ width: 180px; height:6px; -webkit-appearance:none; appearance:none; background: rgba(255,255,255,.4); border-radius:999px; }
.vol-popover input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #222; cursor:pointer; }
.vol-popover input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid #222; cursor:pointer; }
.vol-popover::after { content:""; position:absolute; right:12px; bottom:-8px; width:0; height:0; border-left:8px solid transparent; border-right:8px solid transparent; border-top:8px solid rgba(30,30,30,.9); filter: drop-shadow(0 -1px 0 rgba(255,255,255,.2)); }

.small-note{ color:rgba(255,255,255,.75); font-size:.9rem; }
.footer-links a{ color:rgba(255,255,255,.75); text-decoration:none; }
.footer-links a:hover{ color:#fff; text-decoration:underline; }