#bg-blur{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-size:cover;
    background-position:center;
    filter:blur(50px);
    transform:scale(1.2);
    opacity:0.25;
    z-index:-1;
}

body{
    position:relative;
    overflow-x:hidden;
}
body{
    margin:0;
    background:#121212;
    color:white;
    font-family:Arial, sans-serif;
}

.container{
    max-width:420px;
    margin:auto;
    padding:20px;
}

h1{
    text-align:center;
    font-size:32px;
    margin-bottom:20px;
}

.player-card{
    background:#1e1e1e;
    border-radius:25px;
    padding:20px;
    text-align:center;
    box-shadow:0 5px 20px rgba(0,0,0,0.3);
}

#cover{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:20px;
}

#title{
    font-size:28px;
    margin-top:15px;
    margin-bottom:5px;
}

#artist{
    color:#aaa;
    font-size:18px;
    margin-bottom:20px;
}

#progress{
    width:100%;
    margin:20px 0;
}

.controls{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:12px;
    margin-top:18px;
    flex-wrap:nowrap;
}

button{
    border:none;

    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:20px;
    cursor:pointer;

    background:#f1f1f1;
    color:#111;

    flex-shrink:0;
}

.playlist{
    margin-top:20px;
}

.song{
    display:flex;
    align-items:center;
    gap:15px;
    background:#1e1e1e;
    padding:12px;
    border-radius:16px;
    margin-bottom:12px;
    cursor:pointer;
    transition:0.2s;
}

.song:hover{
    background:#2b2b2b;
}

.song.active{
    background:#2d2d2d;
    border:1px solid #444;
}

.song-cover{
    width:60px;
    height:60px;
    border-radius:12px;
    object-fit:cover;
}

.song-info{
    flex:1;
}

.song-info strong{
    color:white;
    font-size:18px;
}

.song-info p{
    margin:5px 0 0;
    color:#aaa;
}

.playing-icon{
    font-size:22px;
}
.time-info{
    display:flex;
    justify-content:space-between;
    color:#aaa;
    font-size:14px;
    margin-top:5px;
}

.volume-box{
    display:flex;
    align-items:center;
    gap:10px;
    margin-top:20px;
}

#volume{
    flex:1;
}
.equalizer{
    display:flex;
    align-items:flex-end;
    gap:3px;
    height:20px;
}

.equalizer span{
    width:4px;
    height:10px;
    background:white;
    border-radius:10px;
    animation:bounce 0.8s infinite ease-in-out;
}

.equalizer span:nth-child(2){
    animation-delay:0.2s;
}

.equalizer span:nth-child(3){
    animation-delay:0.4s;
}

@keyframes bounce{
    0%{
        height:8px;
    }

    50%{
        height:20px;
    }

    100%{
        height:8px;
    }
    }

/* Mini player saat playlist dibuka */
.container{
    transition: .35s ease;
}

.container.mini-player{
    transform: scale(0.85) translateY(-25px);
    transform-origin: top center;
    opacity: .95;
}

/* Modal playlist */
.playlist-modal{
    position: fixed;
    left: 0;
    right: 0;
    bottom: -100%;

    width: 100%;
    height: 72vh;

    background: #050505;
    border-radius: 35px 35px 0 0;

    z-index: 9999;
    transition: bottom .35s ease;

    box-shadow: 0 -10px 30px rgba(0,0,0,.4);

    display: flex;
    flex-direction: column;

    overflow: hidden;
}

.playlist-modal.show{
    bottom: 0;
}

/* Header */
.playlist-header{
    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:12px 20px 8px;
    min-height:unset;

    flex-shrink:0;
}

.playlist-header h2{
    margin:0;
    font-size:1.5rem;
    color:white;
}

.playlist-header button{
    width:42px;
    height:42px;
    border-radius:50%;
    border:none;
    font-size:20px;
    background:#fff;
    color:#000;
}

/* Search song */
.search-box{
    display:flex;
    align-items:center;
    gap:10px;

    margin:0 16px 12px;
    padding:12px 16px;

    border-radius:16px;
    background:#1e1e1e;
}

.search-box i{
    color:#aaa;
    font-size:16px;
}

.search-box input{
    flex:1;
    border:none;
    outline:none;

    background:transparent;
    color:white;
    font-size:16px;
}

.search-box input::placeholder{
    color:#777;
}

/* Area scroll */
.playlist{
    flex:1;
    overflow-y:auto;
    padding:12px 16px 30px;
    margin-top:0;
}

/* Hilangkan scrollbar HP */
.playlist::-webkit-scrollbar{
    width:0;
}

#playBtn{
    width:58px;
    height:58px;
    min-width:58px;
    min-height:58px;

    border-radius:50%;

    background:#ff9800;
    color:white;
    font-size:24px;

    display:flex;
    align-items:center;
    justify-content:center;
}

.controls button i{
    font-size:22px;
    line-height:1;
    pointer-events:none;
}

#playBtn i{
    font-size:26px;
}

#playBtn .fa-play{
    transform: translateX(1px);
}

/* Cover cd image */
.cover-box{
    position:relative;
}

#cover{
    width:100%;
    height:260px;
    object-fit:cover;
    border-radius:20px;
}

#discWrapper{
    position:absolute;

    right:-4px;
    bottom:-2px;

    width:90px;
    height:90px;

    z-index:2;

    transform-origin:center center;

    transform: translateZ(0);

    will-change: transform;

    overflow:hidden;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

#musicDisc{
    width:100%;
    height:100%;

    object-fit:contain;

    display:block;
    background: transparent !important;
    box-shadow: none !important;
}

#fakeDisc{
    width:100%;
    height:100%;

    border-radius:50%;

    background: transparent;
    pointer-events: none;
    box-shadow: none;
}