/* ===========================================
   PLAYER
===========================================*/

.player{

    position:fixed;
    inset:0;

    background:linear-gradient(180deg,#07131F,#12263B);

    z-index:9999;

    display:flex;
    flex-direction:column;

    align-items:center;

    padding:25px;

    transform:translateY(100%);
    transition:.35s;

}

.player.show{

    transform:translateY(0);

}


/* =========================== */

/* ===========================================
   PLAYER HEADER
===========================================*/

.player-header{

    position:absolute;

    top:15px;

    left:20px;

    right:20px;

    display:flex;

    justify-content:space-between;

    align-items:center;

    z-index:20;

}

/* Tombol turun */

.player-close{

    width:46px;

    height:46px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    color:#fff;

    display:flex;

    justify-content:center;

    align-items:center;

    cursor:pointer;

    transition:.25s;

}

.player-close:hover{

    background:rgba(255,255,255,.15);

}

.player-close span{

    font-size:30px;

}

/* Drag Indicator */

.drag-indicator{

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    width:70px;

    height:6px;

    border-radius:20px;

    background:rgba(255,255,255,.20);

}

/* =========================== */

.player-cover{

    width:270px;

    height:270px;

    object-fit:cover;

    border-radius:30px;

    margin-top:25px;

    box-shadow:

        0 25px 60px rgba(0,0,0,.45);

}


/* =========================== */

.player h2{

    margin-top:30px;

    font-size:28px;

    font-weight:700;

    text-align:center;

}


.player p{

    margin-top:6px;

    color:#9FB3C8;

}


/* =========================== */

#progressBar{

    width:92%;

    margin-top:40px;

    accent-color:#2DD36F;

}


/* =========================== */

.player-time{

    width:92%;

    display:flex;

    justify-content:space-between;

    margin-top:8px;

    color:#9FB3C8;

    font-size:13px;

}


/* =========================== */

.player-control{

    margin-top:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:35px;

}


/* prev next */

.player-control button{

    width:58px;

    height:58px;

    border-radius:50%;

    background:#1B3147;

    color:white;

    display:flex;

    justify-content:center;

    align-items:center;

}


/* play */

#playerPlay{

    width:78px;

    height:78px;

    background:#2DD36F;

    color:#07131F;

    box-shadow:

        0 0 35px rgba(45,211,111,.45);

}


/* icon */

.player-control span{

    font-size:34px;

}


/* =========================== */

.player-extra{

    margin-top:45px;

    display:flex;

    gap:35px;

}


/* favorite shuffle repeat */

.player-extra button{

    color:#A7BACB;

    font-size:30px;

}


/* =========================== */

.player-cover.playing{

    animation:pulse 2.5s infinite;

}


@keyframes pulse{

    0%{

        transform:scale(1);

    }

    50%{

        transform:scale(1.03);

    }

    100%{

        transform:scale(1);

    }

}