/* =====================================================
   MAJALAH HSI
   MINIMAL BLACK MEDIA PLAYER
===================================================== */

#miniPlayer {

    position: fixed;

    width: 510px;
    max-width: calc(100vw - 30px);

    right: 24px;
    bottom: 24px;

    z-index: 99999;

    color: #fff;

    background:
        linear-gradient(
            135deg,
            #252525 0%,
            #151515 38%,
            #0b0b0b 72%,
            #050505 100%
        );

    border-radius: 28px;

    overflow: hidden;

    box-shadow:
        0 30px 80px rgba(0,0,0,.65),
        0 10px 30px rgba(0,0,0,.35);

    font-family:
        Inter,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    transition:
        opacity .25s ease,
        transform .25s ease;

}


/* =====================================================
   HIDDEN
===================================================== */

.mini-player-hidden {

    opacity: 0;

    transform:
        translateY(20px)
        scale(.97);

    pointer-events: none;

}


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

#miniPlayer .mp-header {

    height: 64px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    cursor: move;

}


/* =====================================================
   WAVEFORM ICON
===================================================== */

.mp-brand {

    height: 32px;

    display: flex;

    align-items: center;

    gap: 5px;

}


.mp-brand span {

    width: 3px;

    height: 8px;

    border-radius: 10px;

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

}


.mp-brand span:nth-child(2) {
    height: 24px;
}

.mp-brand span:nth-child(3) {
    height: 16px;
}

.mp-brand span:nth-child(4) {
    height: 10px;
}


/* =====================================================
   HEADER BUTTONS
===================================================== */

.mp-header-action {

    display: flex;

    align-items: center;

    gap: 4px;

}


.mp-icon-btn {

    width: 34px;
    height: 34px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: transparent;

    color:
        rgba(255,255,255,.55);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition:
        background .2s,
        color .2s;

}


.mp-icon-btn:hover {

    color: #fff;

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

}


.mp-icon-btn svg {

    width: 18px;
    height: 18px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


.mp-icon-btn.mp-close {

    margin-left: 4px;

}


/* =====================================================
   NOW PLAYING
===================================================== */

.mp-now {

    padding:
        8px 34px 20px;

}


.mp-title {

    font-size: 24px;

    font-weight: 500;

    line-height: 1.28;

    letter-spacing: -.5px;

    color: #fff;

    display: -webkit-box;

    -webkit-line-clamp: 2;

    -webkit-box-orient: vertical;

    overflow: hidden;

}


.mp-subtitle {

    margin-top: 8px;

    font-size: 13px;

    color:
        rgba(255,255,255,.42);

}


/* =====================================================
   PROGRESS
===================================================== */

.mp-progress-wrap {

    display: flex;

    align-items: center;

    gap: 10px;

    padding:
        0 34px;

}


.mp-progress-wrap span {

    width: 34px;

    font-size: 10px;

    color:
        rgba(255,255,255,.42);

    font-variant-numeric:
        tabular-nums;

}


#durationTime {

    text-align: right;

}


/* =====================================================
   RANGE
===================================================== */

#progressBarplay {

    flex: 1;

    width: 100%;

    height: 3px;

    appearance: none;

    -webkit-appearance: none;

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

    border-radius: 10px;

    outline: none;

    cursor: pointer;

}


#progressBarplay::-webkit-slider-runnable-track {

    height: 3px;

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

    border-radius: 10px;

}


#progressBarplay::-webkit-slider-thumb {

    appearance: none;

    -webkit-appearance: none;

    width: 10px;
    height: 10px;

    margin-top: -3.5px;

    border-radius: 50%;

    background: #fff;

    box-shadow:
        0 0 0 3px
        rgba(255,255,255,.08);

}


/* =====================================================
   MAIN CONTROLS
===================================================== */

.mp-buttons {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 55px;

    padding:
        24px 20px 18px;

}


.mp-btn {

    border: 0;

    padding: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    background: transparent;

    color: #fff;

    cursor: pointer;

}


.mp-btn svg {

    width: 27px;
    height: 27px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* PREVIOUS / NEXT */

.mp-btn-side {

    width: 42px;
    height: 42px;

    color:
        rgba(255,255,255,.72);

    transition:
        color .15s,
        transform .15s;

}


.mp-btn-side:hover {

    color: #fff;

}


.mp-btn-side:active {

    transform: scale(.88);

}


/* =====================================================
   MAIN PLAY BUTTON
===================================================== */

.mp-btn-main {

    width: 68px;
    height: 68px;

    border-radius: 50%;

    background: #fff;

    color: #080808;

    box-shadow:
        0 8px 30px
        rgba(0,0,0,.45);

    transition:
        transform .15s;

}


.mp-btn-main:hover {

    transform: scale(1.05);

}


.mp-btn-main:active {

    transform: scale(.92);

}


.mp-btn-main svg {

    width: 25px;
    height: 25px;

    stroke-width: 2.2;

}


.icon-pause {

    display: none;

}


/* =====================================================
   PLAY / PAUSE STATE
===================================================== */

#miniPlayer.is-playing
.icon-play {

    display: none;

}


#miniPlayer.is-playing
.icon-pause {

    display: block;

}


/* =====================================================
   BOTTOM
===================================================== */

.mp-bottom {

    height: 48px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

}


.mp-bottom-left {

    display: flex;

    align-items: center;

    gap: 7px;

    font-size: 10px;

    color:
        rgba(255,255,255,.28);

}


.mp-status-dot {

    width: 5px;
    height: 5px;

    border-radius: 50%;

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

}


.mp-bottom-actions {

    display: flex;

    align-items: center;

    gap: 4px;

}


.mp-bottom-btn {

    width: 32px;
    height: 32px;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.35);

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    cursor: pointer;

}


.mp-bottom-btn:hover {

    color: #fff;

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

}


.mp-bottom-btn svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =====================================================
   FILTER PANEL
===================================================== */

.mp-filter-panel {

    display: none;

    padding:
        16px 22px 20px;

    border-top:
        1px solid
        rgba(255,255,255,.06);

    background:
        rgba(0,0,0,.18);

}


.mp-filter-panel.open {

    display: block;

}


.mp-panel-title {

    margin-bottom: 9px;

    font-size: 10px;

    color:
        rgba(255,255,255,.35);

}


#filterEdisi {

    width: 100%;

    height: 42px;

    padding:
        0 14px;

    border: 0;

    outline: none;

    border-radius: 12px;

    color: #fff;

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

    font-size: 12px;

    cursor: pointer;

}


#filterEdisi option {

    background: #111;

    color: #fff;

}


/* =====================================================
   PLAYLIST
===================================================== */

.mp-playlist-panel {

    display: none;

    border-top:
        1px solid
        rgba(255,255,255,.06);

}


.mp-playlist-panel.open {

    display: block;

}


/* =====================================================
   PLAYLIST HEADER
===================================================== */

.mp-panel-head {

    height: 48px;

    padding:
        0 22px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-size: 12px;

    color:
        rgba(255,255,255,.65);

}


.mp-panel-head button {

    width: 28px;
    height: 28px;

    border: 0;

    background: transparent;

    color:
        rgba(255,255,255,.4);

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

}


.mp-panel-head svg {

    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.8;

    stroke-linecap: round;

    stroke-linejoin: round;

}


/* =====================================================
   LIST
===================================================== */

.mp-list {

    max-height: 260px;

    overflow-y: auto;

}


.mp-list::-webkit-scrollbar {

    width: 3px;

}


.mp-list::-webkit-scrollbar-track {

    background: transparent;

}


.mp-list::-webkit-scrollbar-thumb {

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

    border-radius: 10px;

}


.mp-item {

    padding:
        13px 22px;

    border-top:
        1px solid
        rgba(255,255,255,.035);

    cursor: pointer;

    transition:
        background .15s;

}


.mp-item:hover {

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

}


.mp-item-title {

    font-size: 11px;

    line-height: 1.45;

    color:
        rgba(255,255,255,.70);

}


.mp-item-edisi {

    margin-top: 4px;

    font-size: 9px;

    color:
        rgba(255,255,255,.25);

}


/* =====================================================
   MINIMIZED
===================================================== */

#miniPlayer.minimized {

    width: 360px;

}


#miniPlayer.minimized
.mp-progress-wrap,

#miniPlayer.minimized
.mp-buttons,

#miniPlayer.minimized
.mp-bottom,

#miniPlayer.minimized
.mp-filter-panel,

#miniPlayer.minimized
.mp-playlist-panel {

    display: none;

}


#miniPlayer.minimized
.mp-now {

    padding-bottom: 22px;

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width: 600px) {

    #miniPlayer {

        width:
            calc(100vw - 16px);

        max-width: none;

        right: 8px;

        bottom: 8px;

        border-radius: 24px;

    }


    #miniPlayer .mp-header {

        height: 58px;

        padding:
            0 16px;

    }


    .mp-now {

        padding:
            6px 22px 18px;

    }


    .mp-title {

        font-size: 19px;

    }


    .mp-progress-wrap {

        padding:
            0 22px;

    }


    .mp-buttons {

        gap: 42px;

    }


    .mp-btn-main {

        width: 62px;
        height: 62px;

    }

}


/* =====================================================
   SMALL MOBILE
===================================================== */

@media (max-width: 380px) {

    .mp-title {

        font-size: 17px;

    }


    .mp-buttons {

        gap: 30px;

    }

}


/* =========================================
   FORCE MODERN PLAYER
   ========================================= */

#miniPlayer {
    position: fixed !important;
    width: 510px !important;
    max-width: calc(100vw - 30px) !important;

    background: linear-gradient(
        145deg,
        #303030 0%,
        #181818 45%,
        #080808 100%
    ) !important;

    color: #fff !important;

    border-radius: 14px !important;

    overflow: hidden !important;

    border: 1px solid rgba(255,255,255,.08) !important;

    box-shadow:
        0 30px 80px rgba(0,0,0,.75),
        0 10px 30px rgba(0,0,0,.4) !important;
}


/* HEADER */

#miniPlayer .mp-header {
    background: transparent !important;
    color: #fff !important;

    height: 58px !important;

    padding: 0 20px !important;

    border-bottom: 1px solid rgba(255,255,255,.06) !important;
}


/* BRAND */

#miniPlayer .mp-brand span {
    background: #fff !important;
}


/* TITLE */

#miniPlayer .mp-title {
    color: #fff !important;
}

#miniPlayer .mp-subtitle {
    color: rgba(255,255,255,.45) !important;
}


/* TIME */

#miniPlayer .mp-progress-wrap {
    color: rgba(255,255,255,.45) !important;
}


/* BUTTONS */

#miniPlayer .mp-btn {
    color: #fff !important;
    background: transparent !important;
}

#miniPlayer .mp-btn-main {
    background: #fff !important;
    color: #000 !important;
}


/* BOTTOM */

#miniPlayer .mp-bottom {
    background: transparent !important;
    border-top: 1px solid rgba(255,255,255,.06) !important;
}

#miniPlayer .mp-bottom-left {
    color: rgba(255,255,255,.55) !important;
}

#miniPlayer .mp-bottom-btn {
    color: rgba(255,255,255,.65) !important;
}


/* PANELS */

#miniPlayer .mp-filter-panel,
#miniPlayer .mp-playlist-panel {
    background: #111 !important;
    color: #fff !important;
}


/* SELECT */

#miniPlayer select {
    background: #1d1d1d !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.1) !important;
}


/* PLAYLIST */

#miniPlayer .mp-item {
    background: transparent !important;
    color: #fff !important;
}

#miniPlayer .mp-item:hover {
    background: rgba(255,255,255,.06) !important;
}