:root {
    --bg-gradient: linear-gradient(135deg, #e0eafc 0%, #cfdef3 100%);
    --wrapper-bg: rgba(255, 255, 255, 0.6);
    --text-primary: #2d3748;
    --text-secondary: #718096;
    --album-bg: #ffffff;
    --playlist-bg: rgba(255, 255, 255, 0.3);
    --playlist-item-bg: rgba(255, 255, 255, 0.5);
}

body.dark-mode {
    --bg-gradient: linear-gradient(135deg, #0f2027 0%, #2c5364 100%);
    --wrapper-bg: rgba(15, 32, 39, 0.8);
    --text-primary: #f8f9fa;
    --text-secondary: #cbd5e1;
    --album-bg: #1e293b;
    --playlist-bg: rgba(0, 0, 0, 0.2);
    --playlist-item-bg: rgba(255, 255, 255, 0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; font-family: 'Poppins', sans-serif; }
body { background: var(--bg-gradient); height: 100vh; display: flex; justify-content: center; align-items: center; overflow: hidden; transition: 0.5s; }

.main-wrapper { display: flex; width: 900px; max-width: 95%; height: 550px; background: var(--wrapper-bg); backdrop-filter: blur(15px); border-radius: 30px; box-shadow: 0 20px 40px rgba(0,0,0,0.2); overflow: hidden; }

.player-container { flex: 1.2; padding: 20px 40px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; border-right: 1px solid rgba(0,0,0,0.05); }
.top-bar { width: 100%; display: flex; justify-content: flex-start; }
.theme-btn { background: none; border: none; font-size: 24px; cursor: pointer; }

.album-art { width: 200px; height: 200px; background: var(--album-bg); border-radius: 20px; display: flex; justify-content: center; align-items: center; box-shadow: 0 10px 25px rgba(0,0,0,0.1); flex-shrink: 0; }
.cover-placeholder { font-size: 60px; color: var(--text-secondary); }

#song-title { font-size: 1.3rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%; text-align: center; color: var(--text-primary); }

.progress-container { background: rgba(0,0,0,0.1); border-radius: 10px; cursor: pointer; height: 6px; width: 100%; overflow: hidden; }
.progress { background: linear-gradient(90deg, #667eea, #764ba2); height: 100%; width: 0%; transition: 0.1s linear; }
.time-holder {
    display: flex;
    justify-content: space-between; /* Kunci pemisahnya ada di sini */
    font-size: 0.75rem;
    color: var(--text-secondary); /* Sesuaikan dengan warna teks Anda */
    margin-top: 8px;
}

.controls { display: flex; align-items: center; gap: 15px; width: 100%; justify-content: center; }
.controls button { background: none; border: none; cursor: pointer; color: var(--text-primary); transition: 0.2s; }
.play-pause-btn { background: linear-gradient(135deg, #667eea, #764ba2) !important; color: white !important; width: 55px; height: 55px; border-radius: 50%; font-size: 20px; display: flex; justify-content: center; align-items: center; }
.secondary-btn.active-one { color: #667eea; }
.secondary-btn.active-all { color: #764ba2; }

.playlist-container { flex: 0.8; padding: 30px; background: var(--playlist-bg); display: flex; flex-direction: column; }
#playlist { list-style: none; overflow-y: auto; flex: 1; }
#playlist li { padding: 12px; margin-bottom: 8px; background: var(--playlist-item-bg); border-radius: 10px; cursor: default; display: flex; justify-content: space-between; align-items: center; font-size: 0.85rem; color: var(--text-primary); }
#playlist li.playing { border-left: 4px solid #764ba2; font-weight: 600; background: rgba(255,255,255,0.1); }
.drag-handle { cursor: grab; padding-left: 10px; opacity: 0.5; }
#playlist li.dragging { opacity: 0.3; }
#playlist li.drag-over { border-top: 2px solid #764ba2; }

@media (max-width: 768px) {
    .main-wrapper { flex-direction: column; height: 100vh; border-radius: 0; width: 100%; }
    .player-container { border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); flex: 0; padding: 20px; }
    .album-art { width: 120px; height: 120px; }
    .playlist-container { flex: 1; }
}