/* ==========================================================
   HANNANET MOVIE
   MOBILE PLAYER UI
   CLEAN VERSION 1.0
   Engine : /player/player.js
========================================================== */


/* ==========================================================
   MOBILE PLAYER PAGE
========================================================== */

.mobile-player{
    width:100%;
    min-height:100vh;
    background:#000;
    color:#fff;
    padding-bottom:60px;
}


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

.mobile-player-section{
    width:100%;
    margin:0;
    padding:0;
}


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

.mobile-player-section .player{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#000;
    overflow:hidden;
    border-radius:0;
}


/* ==========================================================
   VIDEO
========================================================== */

.mobile-player-section .hntv-video{
    position:absolute;
    inset:0;

    display:block;

    width:100%;
    height:100%;

    background:#000;

    object-fit:contain;
}


/* ==========================================================
   STATUS / LOADING
========================================================== */

.mobile-player-section .hntv-player-status{
    position:absolute;
    inset:0;

    z-index:30;

    display:flex;
    flex-direction:column;

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

    gap:10px;

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

    opacity:0;
    visibility:hidden;

    pointer-events:none;
}

.mobile-player-section .hntv-player-status.is-visible{
    opacity:1;
    visibility:visible;
}

.mobile-player-section .hntv-player-spinner{
    width:36px;
    height:36px;

    border:4px solid rgba(255,255,255,.16);
    border-top-color:#e50914;
    border-right-color:#e50914;

    border-radius:50%;

    animation:hannamobileSpin .75s linear infinite;

    filter:drop-shadow(0 0 8px rgba(229,9,20,.45));
}

/*
 * Loading awal:
 * tidak menampilkan tulisan "Memuat video..."
 */
.mobile-player-section .hntv-player-status-text{
    display:none;
}


/* ==========================================================
   CENTER CONTROLS
========================================================== */

.mobile-player-section .hntv-center-controls{
    position:absolute;

    left:50%;
    top:50%;

    z-index:20;

    transform:translate(-50%,-50%);

    display:flex;

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

    gap:18px;

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


/* ==========================================================
   CENTER AUTO HIDE
========================================================== */

.mobile-player-section
.player.hntv-controls-hidden
.hntv-center-controls{

    opacity:0;
    visibility:hidden;

    pointer-events:none;
}


/* ==========================================================
   CENTER BUTTON
========================================================== */

.mobile-player-section .hntv-center-btn{
    display:flex;

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

    width:48px;
    height:48px;

    padding:0;

    border:0;
    border-radius:50%;

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

    color:#fff;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;

    transition:
        transform .12s ease,
        background .12s ease;
}

.mobile-player-section .hntv-center-btn:active{
    transform:scale(.92);
}

.mobile-player-section .hntv-center-btn svg{
    width:24px;
    height:24px;

    fill:currentColor;
    stroke:currentColor;
}


/* ==========================================================
   CENTER PLAY
========================================================== */

.mobile-player-section .hntv-center-play{
    width:60px;
    height:60px;

    background:rgba(0,0,0,.68);
}

.mobile-player-section .hntv-center-play svg{
    width:30px;
    height:30px;
}


/* ==========================================================
   BOTTOM CONTROL CONTAINER
========================================================== */

.mobile-player-section .hntv-controls{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    z-index:25;

    display:block;

    padding:
        28px
        8px
        7px;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.88),
            rgba(0,0,0,.48),
            transparent
        );

    opacity:1;
    visibility:visible;

    pointer-events:auto;

    transition:
        opacity .2s ease,
        visibility .2s ease;
}


/* ==========================================================
   BOTTOM AUTO HIDE
========================================================== */

.mobile-player-section
.hntv-controls.is-auto-hidden{

    opacity:0;
    visibility:hidden;

    pointer-events:none;
}


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

.mobile-player-section .hntv-progress-area{

    width:100%;

    padding:
        4px
        0
        7px;

}


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

.mobile-player-section .hntv-progress{

    position:relative;

    width:100%;
    height:4px;

    border-radius:999px;

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

    cursor:pointer;

    touch-action:none;
}


/* ==========================================================
   BUFFER
========================================================== */

.mobile-player-section .hntv-progress-buffer{

    position:absolute;

    left:0;
    top:0;

    height:100%;

    width:0;

    border-radius:inherit;

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

    pointer-events:none;
}


/* ==========================================================
   PLAYED
========================================================== */

.mobile-player-section .hntv-progress-played{

    position:absolute;

    left:0;
    top:0;

    height:100%;

    width:0;

    border-radius:inherit;

    background:#e50914;

    pointer-events:none;
}


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

.mobile-player-section .hntv-progress-thumb{

    position:absolute;

    top:50%;
    left:0;

    width:12px;
    height:12px;

    border-radius:50%;

    background:#e50914;

    transform:
        translate(-50%,-50%)
        scale(0);

    transition:transform .12s ease;

    pointer-events:none;
}

.mobile-player-section .hntv-progress:hover
.hntv-progress-thumb,
.mobile-player-section .hntv-progress.is-dragging
.hntv-progress-thumb{

    transform:
        translate(-50%,-50%)
        scale(1);
}


/* ==========================================================
   CONTROL BAR
========================================================== */

.mobile-player-section .hntv-control-bar{

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:100%;

    min-height:40px;

    gap:4px;
}


/* ==========================================================
   LEFT / RIGHT
========================================================== */

.mobile-player-section .hntv-controls-left,
.mobile-player-section .hntv-controls-right{

    display:flex;

    align-items:center;

    gap:2px;

    min-width:0;
}


/* ==========================================================
   BUTTON
========================================================== */

.mobile-player-section .hntv-btn{

    display:inline-flex;

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

    flex:0 0 auto;

    width:38px;
    height:38px;

    min-width:38px;

    padding:0;

    border:0;

    background:transparent;

    color:#fff;

    border-radius:50%;

    cursor:pointer;

    -webkit-tap-highlight-color:transparent;
}

.mobile-player-section .hntv-btn:active{

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

    transform:scale(.94);
}


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

.mobile-player-section .hntv-btn .hntv-icon{

    width:20px;
    height:20px;

    display:block;

    fill:currentColor;
    stroke:currentColor;
}


/* ==========================================================
   TIME
========================================================== */

.mobile-player-section .hntv-time{

    display:flex;

    align-items:center;

    white-space:nowrap;

    height:38px;

    padding:0 3px;

    color:#fff;

    font-size:11px;

    line-height:1;

    font-variant-numeric:tabular-nums;
}

.mobile-player-section .hntv-time-separator{

    margin:0 3px;

    opacity:.7;
}


/* ==========================================================
   VOLUME
========================================================== */

.mobile-player-section .hntv-volume-wrap{

    position:relative;

    display:flex;
    align-items:center;
}

.mobile-player-section .hntv-volume-slider-wrap{

    position:absolute;

    left:50%;
    bottom:42px;

    transform:translateX(-50%);

    display:none;

    padding:8px;

    border-radius:10px;

    background:rgba(0,0,0,.88);
}

.mobile-player-section .hntv-volume-wrap.is-open
.hntv-volume-slider-wrap{

    display:block;
}


/* ==========================================================
   SETTINGS — MOBILE CLEAN
   ----------------------------------------------------------
   Tampilan saja.
   Engine /player/player.js tidak disentuh.
   ========================================================== */

.mobile-player-section .hntv-settings-wrap{
    position:relative;
    flex:0 0 auto;
    z-index:100;
}


/* ----------------------------------------------------------
   MENU
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-menu{
    position:fixed;

    top:50%;
    left:50%;

    right:auto;
    bottom:auto;

    transform:translate(-50%, -50%);

    width:230px;
    max-width:calc(100vw - 28px);
    max-height:calc(100vh - 28px);

    padding:6px;

    box-sizing:border-box;

    overflow-y:auto;
    overflow-x:hidden;

    border:1px solid rgba(255,255,255,.12);
    border-radius:12px;

    background:#181818;

    box-shadow:
        0 18px 45px rgba(0,0,0,.75);

    color:#fff;

    display:none;

    z-index:99999;

    -webkit-overflow-scrolling:touch;
}

.mobile-player-section .hntv-settings-wrap.is-open
.hntv-settings-menu{
    display:block;
}


/* ----------------------------------------------------------
   PLAYER TIDAK MEMOTONG MENU
---------------------------------------------------------- */

.mobile-player-section .player:has(.hntv-settings-wrap.is-open){
    overflow:visible;
}


/* ----------------------------------------------------------
   PANEL
---------------------------------------------------------- */


/* ==========================================================
   SETTINGS MOBILE — FORCE VISIBILITY
   ----------------------------------------------------------
   Settings independen dari auto-hide control player.
   ========================================================== */

.mobile-player-section .hntv-settings-wrap.is-open .hntv-settings-menu{
    display:block !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    position:fixed !important;

    top:50% !important;
    left:50% !important;
    right:auto !important;
    bottom:auto !important;

    transform:translate(-50%, -50%) !important;

    z-index:2147483000 !important;
}


/*
 * Saat Settings terbuka, auto-hide player tidak boleh
 * menyembunyikan menu Settings.
 */

.mobile-player-section .hntv-settings-wrap.is-open,
.mobile-player-section .hntv-settings-wrap.is-open .hntv-settings-menu{
    visibility:visible !important;
}


/*
 * Hanya panel aktif yang ditampilkan.
 */

.mobile-player-section .hntv-settings-wrap.is-open
.hntv-settings-panel:not(.is-active){
    display:none !important;
}

.mobile-player-section .hntv-settings-wrap.is-open
.hntv-settings-panel.is-active{
    display:block !important;
}


.mobile-player-section .hntv-settings-panel{
    width:100%;
    box-sizing:border-box;
}

.mobile-player-section .hntv-settings-panel:not(.is-active){
    display:none;
}

.mobile-player-section .hntv-settings-panel.is-active{
    display:block;
}


/* ----------------------------------------------------------
   TITLE
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-title{
    display:flex;
    align-items:center;

    min-height:38px;

    padding:7px 10px;

    box-sizing:border-box;

    color:#fff;

    font-size:13px;
    font-weight:700;
    line-height:1.2;

    border-bottom:1px solid rgba(255,255,255,.09);
}


/* ----------------------------------------------------------
   CATEGORY
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-category{
    width:100%;
    min-height:44px;

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

    margin:2px 0;
    padding:8px 9px;

    box-sizing:border-box;

    border:0;
    border-radius:8px;

    background:transparent;

    color:#fff;

    font:inherit;
    font-size:12px;
    font-weight:600;

    text-align:left;

    cursor:pointer;

    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;
}

.mobile-player-section .hntv-settings-category > span:first-child{
    display:flex;
    align-items:center;

    gap:8px;

    min-width:0;
}

.mobile-player-section .hntv-settings-category:hover{
    background:rgba(255,255,255,.06);
}

.mobile-player-section .hntv-settings-category:active{
    background:rgba(255,255,255,.10);
}


/* ----------------------------------------------------------
   CATEGORY ICON
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-category-icon{
    width:24px;
    height:24px;

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

    flex:0 0 24px;

    border-radius:6px;

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

    color:#fff;

    font-size:13px;
}


/* ----------------------------------------------------------
   ARROW
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-arrow{
    flex:0 0 auto;

    margin-left:8px;

    color:#9ca3af;

    font-size:18px;
    line-height:1;
}


/* ----------------------------------------------------------
   BACK
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-back{
    width:100%;
    min-height:39px;

    display:flex;
    align-items:center;

    gap:8px;

    margin:0 0 4px;
    padding:6px 8px;

    box-sizing:border-box;

    border:0;
    border-bottom:1px solid rgba(255,255,255,.09);
    border-radius:7px;

    background:transparent;

    color:#fff;

    font:inherit;

    text-align:left;

    cursor:pointer;

    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;
}

.mobile-player-section .hntv-settings-back > span{
    width:21px;
    height:21px;

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

    flex:0 0 21px;

    color:#d1d5db;

    font-size:20px;
    line-height:1;
}

.mobile-player-section .hntv-settings-back strong{
    color:#fff;

    font-size:12px;
    font-weight:700;
}

.mobile-player-section .hntv-settings-back:active{
    background:rgba(255,255,255,.08);
}


/* ----------------------------------------------------------
   ITEM
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-item{
    width:100%;
    min-height:41px;

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

    margin:2px 0;
    padding:7px 9px;

    box-sizing:border-box;

    border:0;
    border-radius:8px;

    background:transparent;

    color:#e5e7eb;

    font:inherit;
    font-size:12px;
    font-weight:500;

    text-align:left;

    cursor:pointer;

    touch-action:manipulation;

    -webkit-tap-highlight-color:transparent;
}

.mobile-player-section .hntv-settings-item:hover{
    background:rgba(255,255,255,.06);
}

.mobile-player-section .hntv-settings-item:active{
    background:rgba(255,255,255,.10);
}

.mobile-player-section .hntv-settings-item > span:first-child{
    min-width:0;
    color:#e5e7eb;
}

.mobile-player-section .hntv-settings-item > span:last-child{
    margin-left:10px;

    color:#9ca3af;

    font-size:11px;
    font-weight:600;
}


/* ----------------------------------------------------------
   ACTIVE
---------------------------------------------------------- */

.mobile-player-section .hntv-settings-item.active,
.mobile-player-section .hntv-settings-item.is-active{
    background:rgba(255,255,255,.07);
}

.mobile-player-section .hntv-settings-item.active > span:first-child,
.mobile-player-section .hntv-settings-item.is-active > span:first-child{
    color:#fff;
    font-weight:700;
}


/* ----------------------------------------------------------
   QUALITY CHECK
---------------------------------------------------------- */

.mobile-player-section .hntv-quality-check{
    width:18px;
    height:18px;

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

    flex:0 0 18px;

    color:#22c55e;

    font-size:14px;
    font-weight:800;
    line-height:1;
}


/* ----------------------------------------------------------
   SMALL MOBILE
---------------------------------------------------------- */

@media (max-width:420px){

    .mobile-player-section .hntv-settings-menu{
        width:225px;
        max-width:calc(100vw - 20px);

        padding:5px;

        border-radius:11px;
    }

    .mobile-player-section .hntv-settings-title{
        min-height:36px;
        padding:6px 9px;
        font-size:12px;
    }

    .mobile-player-section .hntv-settings-category{
        min-height:42px;
        padding:7px 8px;
    }

    .mobile-player-section .hntv-settings-item{
        min-height:39px;
        padding:7px 8px;
    }

}



/* ==========================================================
   SETTINGS MOBILE — PROTECT FROM AUTO HIDE
   ----------------------------------------------------------
   Saat Settings terbuka, menu tidak boleh ikut menghilang
   ketika kontrol player melakukan auto-hide.
   ========================================================== */

.mobile-player-section .mobile-player-ui.hntv-controls-hidden
.hntv-settings-wrap.is-open .hntv-settings-menu,

.mobile-player-section .mobile-player-ui
.hntv-controls.is-auto-hidden
.hntv-settings-wrap.is-open .hntv-settings-menu{

    display:block !important;

    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;

    z-index:2147483000 !important;
}


/* ==========================================================
   FULLSCREEN
========================================================== */



.mobile-player-section
.player:fullscreen,
.mobile-player-section
.player:-webkit-full-screen{

    width:100vw;
    height:100vh;

    max-width:none;
    max-height:none;

    margin:0;
    padding:0;

    border-radius:0;
}

.mobile-player-section
.player:fullscreen .hntv-video,
.mobile-player-section
.player:-webkit-full-screen .hntv-video{

    width:100%;
    height:100%;

    object-fit:contain;
}



/* ==========================================================
   FULLSCREEN CONTROLS — MOBILE
   ----------------------------------------------------------
   Perbesar kontrol hanya saat fullscreen.
   Player engine /player/player.js tidak disentuh.
   ========================================================== */

.mobile-player-section
.player:fullscreen .hntv-control-bar,
.mobile-player-section
.player:-webkit-full-screen .hntv-control-bar{

    min-height:56px;

    gap:6px;
}


.mobile-player-section
.player:fullscreen .hntv-controls-left,
.mobile-player-section
.player:fullscreen .hntv-controls-right,
.mobile-player-section
.player:-webkit-full-screen .hntv-controls-left,
.mobile-player-section
.player:-webkit-full-screen .hntv-controls-right{

    gap:4px;
}


.mobile-player-section
.player:fullscreen .hntv-btn,
.mobile-player-section
.player:-webkit-full-screen .hntv-btn{

    width:52px;
    height:52px;

    min-width:52px;
}


.mobile-player-section
.player:fullscreen .hntv-btn .hntv-icon,
.mobile-player-section
.player:-webkit-full-screen .hntv-btn .hntv-icon{

    width:28px;
    height:28px;
}


.mobile-player-section
.player:fullscreen .hntv-time,
.mobile-player-section
.player:-webkit-full-screen .hntv-time{

    height:52px;

    padding:0 5px;

    font-size:14px;
}


.mobile-player-section
.player:fullscreen .hntv-time-separator,
.mobile-player-section
.player:-webkit-full-screen .hntv-time-separator{

    margin:0 5px;
}


/* CENTER CONTROL — FULLSCREEN */

.mobile-player-section
.player:fullscreen .hntv-center-btn,
.mobile-player-section
.player:-webkit-full-screen .hntv-center-btn{

    width:58px;
    height:58px;
}


.mobile-player-section
.player:fullscreen .hntv-center-btn svg,
.mobile-player-section
.player:-webkit-full-screen .hntv-center-btn svg{

    width:28px;
    height:28px;
}


.mobile-player-section
.player:fullscreen .hntv-center-play,
.mobile-player-section
.player:-webkit-full-screen .hntv-center-play{

    width:72px;
    height:72px;
}


/* PROGRESS — FULLSCREEN */

.mobile-player-section
.player:fullscreen .hntv-progress,
.mobile-player-section
.player:-webkit-full-screen .hntv-progress{

    height:7px;
}


.mobile-player-section
.player:fullscreen .hntv-progress-thumb,
.mobile-player-section
.player:-webkit-full-screen .hntv-progress-thumb{

    width:18px;
    height:18px;
}


/* SETTINGS — FULLSCREEN */

.mobile-player-section
.player:fullscreen .hntv-settings-item,
.mobile-player-section
.player:-webkit-full-screen .hntv-settings-item{

    min-height:48px;

    padding:10px 12px;

    font-size:14px;
}


/* VOLUME POPUP — FULLSCREEN */

.mobile-player-section
.player:fullscreen .hntv-volume-slider-wrap,
.mobile-player-section
.player:-webkit-full-screen .hntv-volume-slider-wrap{

    bottom:58px;

    padding:10px;

    border-radius:12px;
}


/* ==========================================================
   MOVIE INFO
========================================================== */

.mobile-player-info{

    padding:16px 14px 20px;

    background:#000;
}

.mobile-player-info .player-title{

    margin:0;

    font-size:21px;

    line-height:1.35;

    font-weight:800;

    color:#fff;
}


/* ==========================================================
   TRENDING / SECTIONS
========================================================== */

.mobile-section{

    padding:
        0
        14px
        24px;
}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media(max-width:420px){

    .mobile-player-section .hntv-controls{

        padding:
            25px
            5px
            5px;
    }

    .mobile-player-section .hntv-center-controls{

        gap:10px;
    }

    .mobile-player-section .hntv-center-btn{

        width:44px;
        height:44px;
    }

    .mobile-player-section .hntv-center-btn svg{

        width:22px;
        height:22px;
    }

    .mobile-player-section .hntv-center-play{

        width:56px;
        height:56px;
    }

    .mobile-player-section .hntv-center-play svg{

        width:28px;
        height:28px;
    }

    .mobile-player-section .hntv-btn{

        width:34px;
        height:34px;

        min-width:34px;
    }

    .mobile-player-section .hntv-btn .hntv-icon{

        width:18px;
        height:18px;
    }

    .mobile-player-section .hntv-time{

        font-size:10px;
    }

}


/* ==========================================================
   ANDROID BOX / TABLET
========================================================== */

@media(min-width:768px){

    .mobile-player-section{

        max-width:1000px;

        margin:0 auto;
    }

    .mobile-player-section .hntv-center-btn{

        width:54px;
        height:54px;
    }

    .mobile-player-section .hntv-center-play{

        width:68px;
        height:68px;
    }

}


/* ==========================================================
   ANIMATION
========================================================== */

@keyframes hannamobileSpin{

    from{
        transform:rotate(0deg);
    }

    to{
        transform:rotate(360deg);
    }

}


/* ==========================================================
   MOBILE PLAYER UI — CONTROL FINAL
   PART MOBILE PLAYER UI 2
========================================================== */


/* ==========================================================
   CONTROL BAR
========================================================== */

.mobile-player-section .hntv-control-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;

    width:100%;
    min-width:0;

    gap:4px;
}


/* ==========================================================
   LEFT CONTROL
========================================================== */

.mobile-player-section .hntv-controls-left{
    display:flex;
    align-items:center;

    min-width:0;

    gap:0;

    flex:1 1 auto;
}


/* ==========================================================
   RIGHT CONTROL
========================================================== */

.mobile-player-section .hntv-controls-right{
    display:flex;
    align-items:center;

    flex:0 0 auto;

    gap:0;
}


/* ==========================================================
   ALL CONTROL BUTTONS
========================================================== */

.mobile-player-section .hntv-control-bar .hntv-btn{
    width:34px;
    height:34px;

    min-width:34px;

    margin:0;
    padding:0;

    display:inline-flex;

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

    border:0;
    border-radius:50%;

    background:transparent;

    color:#fff;

    flex:0 0 34px;
}


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

.mobile-player-section
.hntv-control-bar
.hntv-btn
.hntv-icon{

    width:19px;
    height:19px;

    display:block;

    fill:currentColor;
    stroke:currentColor;

    overflow:visible;
}


/* ==========================================================
   PLAY
========================================================== */

.mobile-player-section
.hntv-control-bar
.hntv-play
.hntv-icon{

    width:20px;
    height:20px;
}


/* ==========================================================
   MUNDUR 10 DETIK
========================================================== */

.mobile-player-section
.hntv-control-bar
.hntv-rewind{

    position:relative;
}


/* ==========================================================
   MAJU 10 DETIK
========================================================== */

.mobile-player-section
.hntv-control-bar
.hntv-forward{

    position:relative;
}


/* ==========================================================
   ICON REWIND / FORWARD
========================================================== */

.mobile-player-section
.hntv-rewind
.hntv-icon path,
.mobile-player-section
.hntv-forward
.hntv-icon path{

    fill:none;

    stroke:currentColor;

    stroke-width:1.8;

    stroke-linecap:round;
    stroke-linejoin:round;
}


/* ==========================================================
   ANGKA 10
========================================================== */

.mobile-player-section
.hntv-rewind
.hntv-10-text,
.mobile-player-section
.hntv-forward
.hntv-10-text{

    fill:currentColor;

    stroke:none;

    font-family:Arial, sans-serif;

    font-size:6.7px;

    font-weight:700;

    text-anchor:middle;

    dominant-baseline:middle;
}


/* ==========================================================
   VOLUME
========================================================== */

.mobile-player-section
.hntv-volume-wrap{

    position:relative;

    display:flex;
    align-items:center;

    flex:0 0 34px;
}

.mobile-player-section
.hntv-volume{

    flex:0 0 34px;
}


/* ==========================================================
   TIME
========================================================== */

.mobile-player-section .hntv-time{

    display:flex;

    align-items:center;

    height:34px;

    margin:0;

    padding:0 2px;

    white-space:nowrap;

    color:#fff;

    font-size:10px;

    line-height:1;

    font-variant-numeric:tabular-nums;

    flex:0 0 auto;
}

.mobile-player-section .hntv-time-separator{

    margin:0 3px;

    opacity:.65;
}


/* ==========================================================
   SETTINGS
========================================================== */

.mobile-player-section
.hntv-settings-wrap{

    position:relative;

    flex:0 0 34px;
}

.mobile-player-section
.hntv-settings{

    flex:0 0 34px;
}


/* ==========================================================
   FULLSCREEN
========================================================== */

.mobile-player-section
.hntv-control-bar
.hntv-fullscreen{

    width:34px;
    height:34px;

    min-width:34px;

    flex:0 0 34px;
}

.mobile-player-section
.hntv-fullscreen
.hntv-icon{

    width:19px;
    height:19px;
}


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

.mobile-player-section .hntv-progress-area{

    padding:
        4px
        0
        7px;
}

.mobile-player-section .hntv-progress{

    height:3px;

    border-radius:999px;
}

.mobile-player-section .hntv-progress:hover,
.mobile-player-section .hntv-progress.is-dragging{

    height:5px;
}


/* ==========================================================
   CENTER BUTTONS
========================================================== */

.mobile-player-section
.hntv-center-controls{

    gap:12px;
}

.mobile-player-section
.hntv-center-btn{

    width:46px;
    height:46px;

    min-width:46px;

    background:rgba(0,0,0,.55);
}

.mobile-player-section
.hntv-center-btn svg{

    width:23px;
    height:23px;
}

.mobile-player-section
.hntv-center-play{

    width:58px;
    height:58px;
}

.mobile-player-section
.hntv-center-play svg{

    width:29px;
    height:29px;
}


/* ==========================================================
   MOVIE DETAIL
========================================================== */

.mobile-player-info,
.mobile-player .info{

    width:100%;

    box-sizing:border-box;

    padding:
        14px
        14px
        20px;

    margin:0;

    background:#000;

    color:#fff;
}


/* ==========================================================
   TITLE
========================================================== */

.mobile-player-info .player-title,
.mobile-player .info .title{

    margin:0 0 9px;

    padding:0;

    color:#fff;

    font-size:20px;

    line-height:1.3;

    font-weight:800;

    letter-spacing:-.2px;
}


/* ==========================================================
   MOVIE META
========================================================== */

.mobile-player .info .meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:6px;

    margin:0 0 12px;

    padding:0;
}

.mobile-player .info .meta span{

    display:inline-flex;

    align-items:center;

    min-height:26px;

    box-sizing:border-box;

    padding:
        4px
        8px;

    border-radius:7px;

    background:#181818;

    color:#d7d7d7;

    font-size:10px;

    line-height:1;

    white-space:nowrap;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.mobile-player .info .description{

    margin:0;

    padding:0;

    color:#bdbdbd;

    font-size:13px;

    line-height:1.6;

    font-weight:400;
}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media(max-width:420px){

    .mobile-player-section .hntv-control-bar{

        gap:2px;
    }

    .mobile-player-section
    .hntv-control-bar
    .hntv-btn{

        width:32px;
        height:32px;

        min-width:32px;

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-control-bar
    .hntv-btn
    .hntv-icon{

        width:18px;
        height:18px;
    }

    .mobile-player-section
    .hntv-volume-wrap{

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-volume{

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-settings-wrap{

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-settings{

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-fullscreen{

        width:32px;
        height:32px;

        min-width:32px;

        flex-basis:32px;
    }

    .mobile-player-section
    .hntv-time{

        font-size:9px;

        padding-left:1px;
        padding-right:1px;
    }

    .mobile-player-section
    .hntv-time-separator{

        margin-left:2px;
        margin-right:2px;
    }

    .mobile-player-section
    .hntv-center-controls{

        gap:9px;
    }

    .mobile-player-section
    .hntv-center-btn{

        width:43px;
        height:43px;

        min-width:43px;
    }

    .mobile-player-section
    .hntv-center-play{

        width:54px;
        height:54px;
    }

    .mobile-player-info,
    .mobile-player .info{

        padding:
            13px
            13px
            18px;
    }

    .mobile-player-info .player-title,
    .mobile-player .info .title{

        font-size:19px;

        margin-bottom:8px;
    }

    .mobile-player .info .meta{

        gap:5px;

        margin-bottom:10px;
    }

    .mobile-player .info .meta span{

        min-height:24px;

        padding:
            4px
            7px;

        font-size:9px;
    }

    .mobile-player .info .description{

        font-size:12px;

        line-height:1.55;
    }

}


/* ==========================================================
   VERY SMALL PHONE
========================================================== */

@media(max-width:360px){

    .mobile-player-section
    .hntv-control-bar
    .hntv-btn{

        width:30px;
        height:30px;

        min-width:30px;

        flex-basis:30px;
    }

    .mobile-player-section
    .hntv-control-bar
    .hntv-btn
    .hntv-icon{

        width:17px;
        height:17px;
    }

    .mobile-player-section
    .hntv-volume-wrap{

        flex-basis:30px;
    }

    .mobile-player-section
    .hntv-settings-wrap{

        flex-basis:30px;
    }

    .mobile-player-section
    .hntv-time{

        font-size:8.5px;
    }

    .mobile-player-info .player-title,
    .mobile-player .info .title{

        font-size:18px;
    }

}


/* ==========================================================
   MOBILE PLAYER — MOVIE DETAIL FINAL
   FIX: TITLE / META / DESCRIPTION
========================================================== */


/* ==========================================================
   DETAIL CONTAINER
========================================================== */

.mobile-player > .info{

    width:100%;

    box-sizing:border-box;

    margin:0;

    padding:12px 14px 18px;

    background:#000;

    color:#fff;
}


/* ==========================================================
   TITLE
========================================================== */

.mobile-player > .info > .title{

    display:block;

    width:100%;

    margin:0 0 9px;

    padding:0;

    color:#fff;

    font-size:20px;

    font-weight:800;

    line-height:1.3;

    letter-spacing:0;

    word-break:normal;

    overflow-wrap:break-word;
}


/* ==========================================================
   META CONTAINER
========================================================== */

.mobile-player > .info > .meta{

    display:flex;

    flex-direction:row;

    align-items:center;

    flex-wrap:wrap;

    width:100%;

    gap:6px;

    margin:0 0 11px;

    padding:0;
}


/* ==========================================================
   META ITEM
========================================================== */

.mobile-player > .info > .meta > span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    box-sizing:border-box;

    min-height:24px;

    margin:0;

    padding:4px 8px;

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

    border-radius:6px;

    background:#181818;

    color:#dcdcdc;

    font-size:10px;

    font-weight:500;

    line-height:1.1;

    white-space:nowrap;

    vertical-align:middle;
}


/* ==========================================================
   DESCRIPTION
========================================================== */

.mobile-player > .info > .description{

    display:block;

    width:100%;

    box-sizing:border-box;

    margin:0;

    padding:0;

    color:#cfcfcf;

    font-size:13px;

    font-weight:400;

    line-height:1.55;

    text-align:left;

    white-space:normal;

    word-break:normal;

    overflow-wrap:break-word;
}


/* ==========================================================
   DESCRIPTION PARAGRAPH / BR
========================================================== */

.mobile-player > .info > .description br{

    line-height:1.55;
}


/* ==========================================================
   SMALL PHONE
========================================================== */

@media(max-width:420px){

    .mobile-player > .info{

        padding:
            11px
            12px
            17px;
    }

    .mobile-player > .info > .title{

        font-size:19px;

        line-height:1.3;

        margin-bottom:8px;
    }

    .mobile-player > .info > .meta{

        gap:5px;

        margin-bottom:10px;
    }

    .mobile-player > .info > .meta > span{

        min-height:23px;

        padding:
            4px
            7px;

        border-radius:5px;

        font-size:9px;
    }

    .mobile-player > .info > .description{

        font-size:12px;

        line-height:1.55;
    }

}


/* ==========================================================
   VERY SMALL PHONE
========================================================== */

@media(max-width:360px){

    .mobile-player > .info{

        padding-left:11px;
        padding-right:11px;
    }

    .mobile-player > .info > .title{

        font-size:18px;
    }

    .mobile-player > .info > .meta > span{

        font-size:8.5px;

        padding:
            4px
            6px;
    }

    .mobile-player > .info > .description{

        font-size:11.5px;
    }

}


/* ==========================================================
   HANNANET MOBILE PLAYER
   MOVIE INFO — FINAL
========================================================== */

.mobile-player-info{

    width:100%;

    box-sizing:border-box;

    margin:0;

    padding:12px 14px 20px;

    background:#000;

    color:#fff;
}


/* ==========================================================
   JUDUL FILM
========================================================== */

.mobile-player-info .player-title{

    display:block;

    width:100%;

    margin:0 0 9px;

    padding:0;

    color:#fff;

    font-size:20px;

    font-weight:800;

    line-height:1.3;

    letter-spacing:0;

    text-align:left;

    white-space:normal;

    word-break:normal;

    overflow-wrap:break-word;
}


/* ==========================================================
   META
========================================================== */

.mobile-player-info .player-meta{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    width:100%;

    gap:6px;

    margin:0 0 11px;

    padding:0;

    color:#fff;
}


/* ==========================================================
   META ITEM
========================================================== */

.mobile-player-info .player-meta span{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    min-height:24px;

    box-sizing:border-box;

    margin:0;

    padding:4px 8px;

    background:#181818;

    border:1px solid #292929;

    border-radius:5px;

    color:#d8d8d8;

    font-size:10px;

    font-weight:500;

    line-height:1.1;

    white-space:nowrap;
}


/* ==========================================================
   DESKRIPSI
========================================================== */

.mobile-player-info .player-description{

    display:block;

    width:100%;

    box-sizing:border-box;

    margin:0;

    padding:0;

    color:#cfcfcf;

    font-size:13px;

    font-weight:400;

    line-height:1.55;

    text-align:left;

    white-space:normal;

    word-break:normal;

    overflow-wrap:break-word;
}


/* ==========================================================
   HP KECIL
========================================================== */

@media(max-width:420px){

    .mobile-player-info{

        padding:
            11px
            12px
            18px;
    }

    .mobile-player-info .player-title{

        font-size:19px;

        line-height:1.3;

        margin-bottom:8px;
    }

    .mobile-player-info .player-meta{

        gap:5px;

        margin-bottom:10px;
    }

    .mobile-player-info .player-meta span{

        min-height:23px;

        padding:4px 7px;

        font-size:9px;
    }

    .mobile-player-info .player-description{

        font-size:12px;

        line-height:1.55;
    }

}


/* ==========================================================
   HP SANGAT KECIL
========================================================== */

@media(max-width:360px){

    .mobile-player-info .player-title{

        font-size:18px;
    }

    .mobile-player-info .player-meta span{

        font-size:8.5px;

        padding:4px 6px;
    }

    .mobile-player-info .player-description{

        font-size:11.5px;
    }

}


/* ==========================================================
   PLAYER PAGE — HIDE GLOBAL HEADER & NAVBAR
========================================================== */

body:has(main.mobile-player) .mobile-header,
body:has(main.mobile-player) .mobile-navbar,
body:has(main.mobile-player) .mobile-bottom-nav {
    display: none !important;
}

body:has(main.mobile-player) .mobile-player {
    margin-top: 0 !important;
    padding-top: 0 !important;
}



/* ==================================================
   MOBILE MOVIE PARTS — PREMIUM UI
   ================================================== */

.mobile-parts {
    width: 100%;
    margin: 14px 0 18px;
    padding: 14px;
    box-sizing: border-box;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 16px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.075),
            rgba(255,255,255,0.025)
        );

    box-shadow:
        0 8px 28px rgba(0,0,0,0.30);

    overflow: hidden;
}

.mobile-parts-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 24px;
}

.mobile-parts-heading {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.7px;
    color: #fff;
}

.mobile-parts-decoration {
    font-size: 20px;
    line-height: 1;
    color: #e50914;
    text-shadow:
        0 0 10px rgba(229,9,20,0.65);
}

.mobile-parts-line {
    width: 100%;
    height: 1px;
    margin: 8px 0 10px;

    background:
        linear-gradient(
            90deg,
            rgba(229,9,20,0.85),
            rgba(255,255,255,0.08),
            transparent
        );
}

.mobile-parts-list {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 10px;
    width: 100%;
}

.mobile-part-card {
    position: relative;

    display: grid;

    grid-template-columns:
        38px
        minmax(0, 1fr)
        30px;

    align-items: center;

    min-width: 0;
    min-height: 72px;

    padding: 10px;

    border: 1px solid rgba(255,255,255,0.13);
    border-radius: 12px;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,0.055),
            rgba(255,255,255,0.018)
        );

    color: #fff;

    text-align: left;

    cursor: pointer;

    overflow: hidden;

    transition:
        transform 0.18s ease,
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.mobile-part-card::after {
    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            120deg,
            rgba(255,255,255,0.05),
            transparent 50%
        );
}

.mobile-part-card:active {
    transform: scale(0.975);
}

.mobile-part-card.active {
    border-color: rgba(229,9,20,0.95);

    background:
        linear-gradient(
            145deg,
            rgba(229,9,20,0.38),
            rgba(229,9,20,0.10)
        );

    box-shadow:
        0 0 16px rgba(229,9,20,0.28);
}

.mobile-part-number {
    position: relative;
    z-index: 1;

    font-size: 23px;
    font-weight: 800;
    line-height: 1;

    color: rgba(255,255,255,0.42);
}

.mobile-part-card.active .mobile-part-number {
    color: #fff;
}

.mobile-part-content {
    position: relative;
    z-index: 1;

    display: flex;
    flex-direction: column;

    min-width: 0;
    gap: 4px;
}

.mobile-part-name {
    overflow: hidden;

    font-size: 13px;
    font-weight: 700;
    line-height: 1.2;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.mobile-part-status {
    font-size: 9px;
    font-weight: 600;

    color: #ff6870;
}

.mobile-part-action {
    position: relative;
    z-index: 1;

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

    width: 28px;
    height: 28px;

    margin-left: auto;

    border-radius: 50%;

    background:
        rgba(255,255,255,0.09);

    color: rgba(255,255,255,0.78);

    font-size: 20px;
    line-height: 1;
}

.mobile-part-card.active .mobile-part-action {
    background: #e50914;

    color: #fff;

    font-size: 10px;

    box-shadow:
        0 0 12px rgba(229,9,20,0.40);
}

@media (max-width: 390px) {

    .mobile-parts {
        padding: 12px;
    }

    .mobile-parts-list {
        gap: 8px;
    }

    .mobile-part-card {
        grid-template-columns:
            32px
            minmax(0, 1fr)
            26px;

        min-height: 66px;
        padding: 8px;
    }

    .mobile-part-number {
        font-size: 20px;
    }

    .mobile-part-name {
        font-size: 12px;
    }

    .mobile-part-status {
        font-size: 8px;
    }

    .mobile-part-action {
        width: 25px;
        height: 25px;
    }
}


/* ==========================================================
   HANNANET MOBILE PLAYER
   MOVIE INFO — PROFESSIONAL STREAMING UI
   ========================================================== */

.mobile-player-info {
    width: 100%;
    box-sizing: border-box;

    margin: 0;
    padding: 15px 14px 21px;

    background: #000;

    color: #fff;
}


/* ==========================================================
   TITLE
   ========================================================== */

.mobile-player-info .player-title {
    display: block;

    width: 100%;

    margin: 0;

    padding: 0;

    color: #fff;

    font-size: 21px;
    font-weight: 800;

    line-height: 1.3;

    letter-spacing: -0.25px;

    text-align: left;

    white-space: normal;
    overflow-wrap: anywhere;
}


/* ==========================================================
   META
   ========================================================== */

.mobile-player-info .player-meta {

    display: flex;

    align-items: center;

    flex-wrap: wrap;

    gap: 0;

    width: 100%;

    margin: 9px 0 13px;

    padding: 0;

    color: #a8a8a8;

    font-size: 10px;

    line-height: 1.4;
}


/* SEMUA META */

.mobile-player-info .player-meta span {

    display: inline-flex;

    align-items: center;

    min-height: 20px;

    margin: 0;

    padding: 0;

    background: transparent;

    border: 0;

    border-radius: 0;

    color: #a8a8a8;

    font-size: 10px;

    font-weight: 500;

    line-height: 20px;

    white-space: nowrap;
}


/* SEPARATOR VISUAL */

.mobile-player-info .player-meta span + span::before {

    content: "•";

    display: inline-block;

    margin: 0 7px;

    color: #555;

    font-size: 9px;

}


/* GENRE */

.mobile-player-info .player-meta span:first-child {

    color: #fff;

    font-weight: 650;
}


/* QUALITY */

.mobile-player-info .player-meta span:nth-child(3) {

    color: #fff;

    font-weight: 650;
}


/* ==========================================================
   PEMISAH HALUS
   ========================================================== */

.mobile-player-info .player-description {

    position: relative;

    width: 100%;

    box-sizing: border-box;

    margin: 0;

    padding: 13px 0 0;

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

    color: #aaa;

    font-size: 13px;

    font-weight: 400;

    line-height: 1.7;

    text-align: left;

    white-space: normal;

    overflow-wrap: anywhere;
}


/* ==========================================================
   HP KECIL
   ========================================================== */

@media (max-width: 420px) {

    .mobile-player-info {

        padding:
            13px
            12px
            18px;
    }


    .mobile-player-info .player-title {

        font-size: 19px;

        line-height: 1.3;
    }


    .mobile-player-info .player-meta {

        margin-top: 8px;

        margin-bottom: 11px;

        font-size: 9px;
    }


    .mobile-player-info .player-meta span {

        font-size: 9px;

        line-height: 19px;
    }


    .mobile-player-info .player-meta span + span::before {

        margin-left: 6px;

        margin-right: 6px;
    }


    .mobile-player-info .player-description {

        padding-top: 11px;

        font-size: 12px;

        line-height: 1.65;
    }
}


/* ==========================================================
   HP SANGAT KECIL
   ========================================================== */

@media (max-width: 360px) {

    .mobile-player-info {

        padding-left: 11px;

        padding-right: 11px;
    }


    .mobile-player-info .player-title {

        font-size: 18px;
    }


    .mobile-player-info .player-meta {

        margin-top: 7px;

        margin-bottom: 10px;
    }


    .mobile-player-info .player-meta span {

        font-size: 8.5px;
    }


    .mobile-player-info .player-meta span + span::before {

        margin-left: 5px;

        margin-right: 5px;
    }


    .mobile-player-info .player-description {

        font-size: 11.5px;

        line-height: 1.6;
    }
}

/* ==========================================================
   SERIES / EPISODE
   ========================================================== */

.mobile-parts {
    margin: 10px 14px 18px;
    width: calc(100% - 28px);

    padding: 14px;

    border-radius: 14px;
}

/* Header Episode */

.mobile-parts-title-row {
    min-height: 26px;
}

.mobile-parts-heading {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.4px;
}

.mobile-parts-decoration {
    font-size: 18px;
}

/* Garis */

.mobile-parts-line {
    margin: 9px 0 12px;
}

/* ----------------------------------------------------------
   GRID EPISODE
   ---------------------------------------------------------- */

.mobile-parts-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

/* ----------------------------------------------------------
   KARTU EPISODE
   ---------------------------------------------------------- */

.mobile-part-card {
    grid-template-columns:
        34px
        minmax(0, 1fr)
        26px;

    min-height: 62px;

    padding: 8px 9px;

    border-radius: 10px;
}

/* Nomor Episode */

.mobile-part-number {
    font-size: 19px;
    font-weight: 800;
}

/* Judul Episode */

.mobile-part-content {
    gap: 3px;
    min-width: 0;
}

.mobile-part-name {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.25;

    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status Episode Aktif */

.mobile-part-status {
    font-size: 8px;
    line-height: 1.2;
}

/* Tombol kanan */

.mobile-part-action {
    width: 25px;
    height: 25px;

    font-size: 17px;
}

/* Episode aktif */

.mobile-part-card.active {
    border-width: 1px;
}

/* ==========================================================
   HP KECIL
   ========================================================== */

@media (max-width: 390px) {

    .mobile-player-info {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mobile-player-info .player-title {
        font-size: 18px;
    }

    .mobile-parts {
        margin-left: 12px;
        margin-right: 12px;
        width: calc(100% - 24px);

        padding: 12px;
    }

    .mobile-parts-list {
        gap: 7px;
    }

    .mobile-part-card {
        grid-template-columns:
            30px
            minmax(0, 1fr)
            24px;

        min-height: 60px;
        padding: 7px 8px;
    }

    .mobile-part-number {
        font-size: 18px;
    }

    .mobile-part-name {
        font-size: 11px;
    }

    .mobile-part-status {
        font-size: 7px;
    }

    .mobile-part-action {
        width: 23px;
        height: 23px;
        font-size: 15px;
    }
}



/* ==========================================================
   MOBILE SERIES EPISODE UI
   Hanya untuk daftar Episode Mobile
   ========================================================== */

.mobile-part-content {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
}

.mobile-part-name {
    display: block;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-part-series {
    display: block;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.3;
    opacity: 0.62;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-part-status {
    display: inline-flex;
    width: fit-content;
    margin-top: 3px;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.3px;
}

.mobile-part-card.active
.mobile-part-series {
    opacity: 0.75;
}

@media (max-width: 390px) {

    .mobile-part-name {
        font-size: 13px;
    }

    .mobile-part-series {
        font-size: 10px;
    }

    .mobile-part-status {
        font-size: 8px;
    }
}


/* ==========================================================
   HNTV SETTINGS ARROW HIDDEN FINAL
   Hilangkan panah Settings tanpa mengubah fungsi menu
   ========================================================== */

.mobile-player-section .hntv-settings-arrow{
    display:none !important;
}


/* ==========================================================
   HNTV SETTINGS ARROW HIDDEN FINAL
   Hilangkan panah navigasi Settings Player
   Fungsi tombol tetap aktif
   ========================================================== */

.mobile-player-section .hntv-settings-arrow{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    visibility:hidden !important;
}

.mobile-player-section .hntv-settings-back > span{
    display:none !important;
    width:0 !important;
    min-width:0 !important;
    max-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    visibility:hidden !important;
}


/* ==========================================================
   HNFLIX WATERMARK - MOBILE PLAYER
   ========================================================== */

.mobile-player-section .player {
    position: relative !important;
}

.mobile-player-section .hntv-watermark {
    position: absolute !important;
    right: 10px !important;
    bottom: 52px !important;

    width: 58px !important;
    height: auto !important;

    z-index: 30 !important;

    opacity: 0.38 !important;

    pointer-events: none !important;
    user-select: none !important;
}

.mobile-player-section .hntv-watermark img {
    display: block !important;
    width: 100% !important;
    height: auto !important;

    object-fit: contain !important;

    filter: brightness(0) invert(1) !important;

    pointer-events: none !important;
}

@media (max-width: 767px) {

    .mobile-player-section .hntv-watermark {
        right: 10px !important;
        bottom: 52px !important;
        width: 58px !important;
        opacity: 0.38 !important;
    }

}

/* ==========================================================
   MULTI TAP SEEK INDICATOR
========================================================== */

.mobile-player-section .hntv-tap-seek-indicator {
    position: absolute;

    top: 50%;

    z-index: 40;

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

    min-width: 100px;
    min-height: 50px;

    padding: 0 16px;

    border-radius: 25px;

    background: transparent;

    color: #fff;

    font-size: 15px;
    font-weight: 700;

    opacity: 0;

    pointer-events: none;

    transform:
        translateY(-50%)
        scale(.82);

    transition:
        opacity .18s ease,
        transform .22s ease;
}

.mobile-player-section
.hntv-tap-seek-indicator.is-left {
    left: 10%;
}

.mobile-player-section
.hntv-tap-seek-indicator.is-right {
    right: 10%;
}

.mobile-player-section
.hntv-tap-seek-indicator.is-active {
    opacity: 1;

    transform:
        translateY(-50%)
        scale(1);
}



/* HNFLIX — SINOPSIS SINGKAT MINIMAL */

.mobile-player-info .player-description {
    display: block;
    width: 100%;
    box-sizing: border-box;

    margin: 16px 0 0;
    padding: 42px 15px 15px;

    background: #18191c;
    border: 1px solid #292b30;
    border-radius: 8px;

    color: #bfc2c8;
    font-size: 12.5px;
    font-weight: 400;
    line-height: 1.75;

    text-align: left;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: normal;

    max-height: 145px;
    overflow-y: auto;

    scrollbar-width: thin;
    scrollbar-color: #44474e transparent;
}

/* Judul kolom */
.mobile-player-info .player-description::before {
    content: "SINOPSIS SINGKAT";

    position: absolute;
    top: 14px;
    left: 15px;

    color: #f2f2f2;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 14px;
}

/* Garis pemisah judul dan isi */
.mobile-player-info .player-description::after {
    content: "";

    position: absolute;
    top: 34px;
    left: 15px;
    right: 15px;

    height: 1px;
    background: #303238;
}

.mobile-player-info .player-description::-webkit-scrollbar {
    width: 3px;
}

.mobile-player-info .player-description::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-player-info .player-description::-webkit-scrollbar-thumb {
    background: #44474e;
    border-radius: 10px;
}

@media (max-width: 420px) {
    .mobile-player-info .player-description {
        margin-top: 14px;
        padding: 40px 14px 14px;
        font-size: 12px;
        line-height: 1.7;
        max-height: 140px;
        border-radius: 8px;
    }

    .mobile-player-info .player-description::before {
        top: 13px;
        left: 14px;
        font-size: 9.5px;
    }

    .mobile-player-info .player-description::after {
        top: 33px;
        left: 14px;
        right: 14px;
    }
}

@media (max-width: 360px) {
    .mobile-player-info .player-description {
        padding: 39px 13px 13px;
        font-size: 11.5px;
        max-height: 130px;
    }

    .mobile-player-info .player-description::before {
        left: 13px;
        font-size: 9px;
    }

    .mobile-player-info .player-description::after {
        left: 13px;
        right: 13px;
    }
}



/* HNFLIX — HIDE SINOPSIS DARI PLAYER */

.mobile-player-info .player-description {
    display: none !important;
}


/* HNFLIX — JUDUL & META PLAYER LEBIH RAPI */

.mobile-player-info {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 18px 15px 20px;
    background: #000;
    color: #fff;
}

/* JUDUL FILM */

.mobile-player-info .player-title {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;

    color: #fff;
    font-size: clamp(20px, 5.4vw, 27px);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.35px;
    text-align: left;

    overflow-wrap: anywhere;
}

/* BARIS INFORMASI */

.mobile-player-info .player-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;

    width: 100%;
    margin: 13px 0 0;
    padding: 0;

    color: #a8a8a8;
    font-size: 11px;
    line-height: 1.4;
}

/* ITEM META */

.mobile-player-info .player-meta span {
    display: inline-flex;
    align-items: center;
    min-height: 25px;

    margin: 0;
    padding: 4px 9px;

    background: #171717;
    border: 1px solid #2b2b2b;
    border-radius: 6px;

    color: #bdbdbd;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

/* GENRE */

.mobile-player-info .player-meta span:first-child {
    background: rgba(229, 9, 20, 0.14);
    border-color: rgba(229, 9, 20, 0.55);
    color: #ff6870;
    font-weight: 700;
}

/* QUALITY */

.mobile-player-info .player-meta span:nth-child(3) {
    color: #fff;
    font-weight: 700;
}

/* HILANGKAN BULLET PEMISAH LAMA */

.mobile-player-info .player-meta span + span::before {
    content: none !important;
}

/* RESPONSIVE HP KECIL */

@media (max-width: 360px) {
    .mobile-player-info {
        padding: 15px 12px 18px;
    }

    .mobile-player-info .player-title {
        font-size: 19px;
    }

    .mobile-player-info .player-meta {
        gap: 5px;
        margin-top: 11px;
    }

    .mobile-player-info .player-meta span {
        padding: 4px 7px;
        font-size: 10px;
    }
}


/* HNFLIX — GESER JUDUL POPULER SEJAJAR DENGAN JUDUL FILM */
.mobile-player-section .mobile-section-title,
.mobile-parts-title-row .mobile-section-title {
    position: relative;
    left: -10px;
}


/* HNFLIX — POSISI JUDUL SEDANG POPULER */
.mobile-section-header > h2.mobile-section-title.player-red-marker-title {
    position: relative;
    left: -10px !important;
}


/* HNFLIX — PLAYER STICKY SAAT SCROLL MOBILE */
@media (max-width: 767px) {
    .mobile-player-section .player {
        position: sticky;
        top: 0;
        z-index: 100;
        width: 100%;
    }
}


/* HNFLIX — PLAYER FIXED FULL WIDTH SAAT SCROLL */
@media (max-width: 767px) {
    .mobile-player-section {
        width: 100% !important;
        padding-top: 56.25vw !important;
        box-sizing: border-box !important;
    }

    .mobile-player-section .player {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important;

        width: 100vw !important;
        height: 56.25vw !important;
        aspect-ratio: auto !important;

        margin: 0 !important;
        border-radius: 0 !important;
    }
}


/* HNFLIX — BLACK LOADING OVERLAY UNTUK ANDROID WEBVIEW */
@media (max-width: 767px) {
    .mobile-player-section .hntv-player-status {
        background: #000 !important;
        z-index: 30 !important;
    }

    .mobile-player-section .hntv-video {
        background: #000 !important;
    }
}

/* HNFLIX — COVER VIDEO SEBELUM FRAME PERTAMA DI ANDROID WEBVIEW */
@media (max-width: 767px) {
  .mobile-player-section .player video.is-loading {
    opacity: 0 !important;
    visibility: hidden !important;
    background: #000 !important;
  }

  .mobile-player-section .player {
    background: #000 !important;
    overflow: hidden;
  }

  .mobile-player-section .hntv-player-status {
    z-index: 20 !important;
  }
}

/* APK ANDROID — FULLSCREEN SELALU HITAM */
.mobile-player-section .player:fullscreen,
.mobile-player-section .player:-webkit-full-screen {
    background: #000 !important;
    background-color: #000 !important;
}

.mobile-player-section .player:fullscreen::backdrop,
.mobile-player-section .player:-webkit-full-screen::backdrop {
    background: #000 !important;
}

.mobile-player-section .player:fullscreen .hntv-video,
.mobile-player-section .player:-webkit-full-screen .hntv-video,
.mobile-player-section .player:fullscreen video,
.mobile-player-section .player:-webkit-full-screen video {
    background: #000 !important;
    background-color: #000 !important;
}


/* ==========================================================
   HNFLIX SERIES PLAYER
   EPISODE GRID — KHUSUS SERIES
   Samakan dengan Episode Card di Detail
   ========================================================== */

@media (max-width: 767px) {

    /* ==============================
       SERIES GRID
       ============================== */

    .mobile-parts-list.series-parts {

        display: grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap: 18px 10px !important;

        width: 100% !important;

        padding: 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }


    /* ==============================
       SERIES CARD
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-card {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        padding: 0 !important;

        margin: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: transparent !important;

        box-shadow: none !important;

        color: #fff !important;

        text-align: left !important;

        overflow: visible !important;

        transform: none !important;

        box-sizing: border-box !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-card::after {

        display: none !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-card:active {

        transform: none !important;
    }


    /* ==============================
       THUMBNAIL
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-thumbnail {

        position: relative !important;

        display: block !important;

        width: 100% !important;

        aspect-ratio: 16 / 9 !important;

        overflow: hidden !important;

        border-radius: 8px !important;

        background: #111 !important;

        box-sizing: border-box !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-thumbnail-image {

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        min-width: 0 !important;

        min-height: 0 !important;

        object-fit: cover !important;

        object-position: center !important;

        margin: 0 !important;

        padding: 0 !important;

        border: 0 !important;

        border-radius: 0 !important;

        background: #111 !important;
    }


    /* ==============================
       DARK OVERLAY
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-thumbnail::after {

        content: "" !important;

        position: absolute !important;

        inset: 0 !important;

        pointer-events: none !important;

        background:
            linear-gradient(
                to bottom,
                transparent 55%,
                rgba(0,0,0,0.55)
            ) !important;
    }


    /* ==============================
       PLAY ICON CENTER
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-play {

        position: absolute !important;

        left: 50% !important;

        top: 50% !important;

        transform: translate(
            -50%,
            -50%
        ) !important;

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        width: 38px !important;

        height: 38px !important;

        border-radius: 50% !important;

        background:
            rgba(0,0,0,0.68) !important;

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

        color: #fff !important;

        font-size: 14px !important;

        line-height: 1 !important;

        padding-left: 2px !important;

        z-index: 3 !important;

        box-sizing: border-box !important;

        pointer-events: none !important;
    }


    /* ==============================
       DURATION
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-duration {

        position: absolute !important;

        right: 6px !important;

        bottom: 6px !important;

        z-index: 4 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        padding:
            3px 6px !important;

        border-radius: 4px !important;

        background:
            rgba(0,0,0,0.82) !important;

        color: #fff !important;

        font-size: 9px !important;

        font-weight: 700 !important;

        line-height: 1 !important;

        white-space: nowrap !important;

        pointer-events: none !important;
    }


    /* ==============================
       EPISODE INFO
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-series-info {

        display: block !important;

        width: 100% !important;

        min-width: 0 !important;

        margin:
            7px 0 0 !important;

        padding: 0 !important;

        box-sizing: border-box !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-name {

        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding: 0 !important;

        overflow: hidden !important;

        color: #fff !important;

        font-size: 12px !important;

        font-weight: 700 !important;

        line-height: 1.35 !important;

        white-space: nowrap !important;

        text-overflow: ellipsis !important;
    }


    /* ==============================
       ACTIVE EPISODE
       ============================== */

    .mobile-parts-list.series-parts
    .mobile-part-card.active
    .mobile-part-thumbnail {

        box-shadow:
            0 0 0 2px
            #e50914 !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-card.active
    .mobile-part-name {

        color: #fff !important;
    }


    .mobile-parts-list.series-parts
    .mobile-part-status {

        display: block !important;

        margin-top: 3px !important;

        color: #ff6870 !important;

        font-size: 9px !important;

        font-weight: 600 !important;

        line-height: 1.2 !important;
    }
}


/* HP SANGAT KECIL */

@media (max-width: 380px) {

    .mobile-parts-list.series-parts {

        gap: 15px 8px !important;
    }

    .mobile-parts-list.series-parts
    .mobile-part-play {

        width: 34px !important;

        height: 34px !important;

        font-size: 12px !important;
    }

    .mobile-parts-list.series-parts
    .mobile-part-name {

        font-size: 11px !important;
    }
}


/* =========================================================
   PART THUMBNAIL GRID
   Khusus Movie Part.
   Series memakai desain yang sudah ada.
   ========================================================= */

.mobile-parts-list:not(.series-parts) {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 10px;
}

.mobile-parts-list:not(.series-parts) .mobile-part-card {
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    overflow: visible;
}

.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: #111;
}

.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mobile-parts-list:not(.series-parts) .mobile-part-play {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 38px;
    height: 38px;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: 14px;
    line-height: 1;
    pointer-events: none;
}

.mobile-parts-list:not(.series-parts) .mobile-part-duration {
    position: absolute;
    right: 6px;
    bottom: 6px;
    padding: 3px 6px;
    border-radius: 4px;
    background: rgba(0, 0, 0, .82);
    color: #fff;
    font-size: 10px;
    line-height: 1.2;
    font-weight: 700;
    pointer-events: none;
}

.mobile-parts-list:not(.series-parts) .mobile-part-series-info {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 7px 2px 0;
}

.mobile-parts-list:not(.series-parts) .mobile-part-name {
    display: block;
    color: #fff;
    font-size: 12px;
    line-height: 1.35;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mobile-parts-list:not(.series-parts) .mobile-part-status {
    display: block;
    color: #ff3b3b;
    font-size: 10px;
    line-height: 1.3;
    font-weight: 600;
}

.mobile-parts-list:not(.series-parts) .mobile-part-card.active
.mobile-part-thumbnail {
    box-shadow:
        0 0 0 2px rgba(255, 45, 45, .9);
}

@media (max-width: 380px) {
    .mobile-parts-list:not(.series-parts) {
        gap: 15px 8px;
    }

    .mobile-parts-list:not(.series-parts) .mobile-part-play {
        width: 34px;
        height: 34px;
        font-size: 12px;
    }

    .mobile-parts-list:not(.series-parts) .mobile-part-name {
        font-size: 11px;
    }
}


/* ==========================================================
   HNFLIX — FINAL MOVIE PART GRID
   Khusus Movie Part di bawah Player
   Tidak mengubah Series
   ========================================================== */

.mobile-parts-list:not(.series-parts) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px 10px !important;
    width: 100% !important;
}

/* CARD */
.mobile-parts-list:not(.series-parts) .mobile-part-card {
    display: block !important;
    position: relative !important;

    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;

    padding: 0 !important;
    margin: 0 !important;

    border: 0 !important;
    border-radius: 0 !important;

    background: transparent !important;
    box-shadow: none !important;

    overflow: visible !important;
    text-align: left !important;

    color: #fff !important;
}

/* THUMBNAIL */
.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail {
    position: relative !important;

    width: 100% !important;
    aspect-ratio: 16 / 9 !important;

    overflow: hidden !important;

    border-radius: 9px !important;

    background: #111 !important;

    box-shadow:
        0 5px 14px rgba(0,0,0,.30) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

/* IMAGE */
.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail-image {
    display: block !important;

    width: 100% !important;
    height: 100% !important;

    object-fit: cover !important;

    margin: 0 !important;
    padding: 0 !important;
}

/* PLAY */
.mobile-parts-list:not(.series-parts) .mobile-part-play {
    position: absolute !important;

    top: 50% !important;
    left: 50% !important;

    width: 38px !important;
    height: 38px !important;

    transform: translate(-50%, -50%) !important;

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

    border-radius: 50% !important;

    background: rgba(0,0,0,.68) !important;

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

    color: #fff !important;

    font-size: 14px !important;
    line-height: 1 !important;

    z-index: 5 !important;

    pointer-events: none !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.35) !important;
}

/* DURATION */
.mobile-parts-list:not(.series-parts) .mobile-part-duration {
    position: absolute !important;

    right: 6px !important;
    bottom: 6px !important;

    z-index: 6 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 6px !important;

    border-radius: 4px !important;

    background: rgba(0,0,0,.82) !important;

    color: #fff !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;

    pointer-events: none !important;
}

/* INFO */
.mobile-parts-list:not(.series-parts) .mobile-part-series-info {
    display: flex !important;

    flex-direction: column !important;

    gap: 3px !important;

    width: 100% !important;

    padding: 8px 2px 0 !important;

    box-sizing: border-box !important;
}

/* PART NAME */
.mobile-parts-list:not(.series-parts) .mobile-part-name {
    display: block !important;

    width: 100% !important;

    color: #fff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.3 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* ACTIVE STATUS */
.mobile-parts-list:not(.series-parts) .mobile-part-status {
    display: block !important;

    color: #ff5963 !important;

    font-size: 9px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;
}

/* ACTIVE PART */
.mobile-parts-list:not(.series-parts)
.mobile-part-card.active
.mobile-part-thumbnail {
    box-shadow:
        0 0 0 2px #e50914,
        0 5px 18px rgba(229,9,20,.25) !important;
}

/* ACTIVE PLAY */
.mobile-parts-list:not(.series-parts)
.mobile-part-card.active
.mobile-part-play {
    background: #e50914 !important;

    border-color: rgba(255,255,255,.45) !important;

    box-shadow:
        0 0 14px rgba(229,9,20,.45) !important;
}

/* TOUCH EFFECT */
.mobile-parts-list:not(.series-parts)
.mobile-part-card:active
.mobile-part-thumbnail {
    transform: scale(.985) !important;
}

/* SMALL PHONE */
@media (max-width: 390px) {

    .mobile-parts-list:not(.series-parts) {
        gap: 14px 8px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-play {
        width: 34px !important;
        height: 34px !important;

        font-size: 12px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-name {
        font-size: 12px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-duration {
        right: 5px !important;
        bottom: 5px !important;

        padding: 3px 5px !important;

        font-size: 8px !important;
    }
}


/* ==========================================================
   HNFLIX — FIX MOVIE PART INFO TERPOTONG
   Tidak mengubah Series / API / JS / Duration
   ========================================================== */

.mobile-parts {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.mobile-parts-list:not(.series-parts) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    align-items: start !important;
}

.mobile-parts-list:not(.series-parts) .mobile-part-card {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
}

.mobile-parts-list:not(.series-parts) .mobile-part-series-info {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: 6px !important;
}

.mobile-parts-list:not(.series-parts) .mobile-part-name,
.mobile-parts-list:not(.series-parts) .mobile-part-status {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}


/* ==========================================================
   HNFLIX — MOVIE PART SELECTOR
   FINAL PREMIUM CARD
   Hanya Movie Part — Series tidak disentuh
   ========================================================== */

.mobile-parts-list:not(.series-parts) {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 12px !important;
    width: 100% !important;
    margin-top: 4px !important;
    align-items: start !important;
}

/* CARD */
.mobile-parts-list:not(.series-parts) .mobile-part-card {
    display: block !important;
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
}

/* THUMBNAIL */
.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #151515 !important;

    box-shadow:
        0 4px 12px rgba(0,0,0,.35) !important;

    transition:
        transform .18s ease,
        box-shadow .18s ease !important;
}

/* IMAGE */
.mobile-parts-list:not(.series-parts) .mobile-part-thumbnail-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* DARK OVERLAY */
.mobile-parts-list:not(.series-parts)
.mobile-part-thumbnail::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(
        to top,
        rgba(0,0,0,.28),
        transparent 55%
    ) !important;
    pointer-events: none !important;
}

/* PLAY BUTTON */
.mobile-parts-list:not(.series-parts) .mobile-part-play {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;

    width: 34px !important;
    height: 34px !important;

    transform: translate(-50%, -50%) !important;

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

    border-radius: 50% !important;

    background: rgba(0,0,0,.72) !important;
    border: 1px solid rgba(255,255,255,.35) !important;

    color: #fff !important;
    font-size: 13px !important;
    line-height: 1 !important;

    z-index: 5 !important;
    pointer-events: none !important;

    box-shadow:
        0 3px 10px rgba(0,0,0,.45) !important;
}

/* DURATION */
.mobile-parts-list:not(.series-parts) .mobile-part-duration {
    position: absolute !important;
    right: 6px !important;
    bottom: 6px !important;

    z-index: 8 !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    padding: 4px 6px !important;

    border-radius: 4px !important;

    background: rgba(0,0,0,.82) !important;

    color: #fff !important;

    font-size: 9px !important;
    font-weight: 700 !important;
    line-height: 1 !important;

    white-space: nowrap !important;
    pointer-events: none !important;
}

/* INFO DI BAWAH THUMBNAIL */
.mobile-parts-list:not(.series-parts) .mobile-part-series-info {
    display: flex !important;
    flex-direction: column !important;

    width: 100% !important;

    gap: 2px !important;

    padding:
        7px 2px 0 !important;

    box-sizing: border-box !important;

    overflow: visible !important;
}

/* PART NAME */
.mobile-parts-list:not(.series-parts) .mobile-part-name {
    display: block !important;

    width: 100% !important;

    color: #fff !important;

    font-size: 13px !important;
    font-weight: 700 !important;

    line-height: 1.25 !important;

    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

/* STATUS */
.mobile-parts-list:not(.series-parts) .mobile-part-status {
    display: block !important;

    color: #ff4d5a !important;

    font-size: 9px !important;
    font-weight: 600 !important;

    line-height: 1.2 !important;

    margin-top: 1px !important;
}

/* PART AKTIF */
.mobile-parts-list:not(.series-parts)
.mobile-part-card.active
.mobile-part-thumbnail {
    box-shadow:
        0 0 0 2px #e50914,
        0 5px 18px rgba(229,9,20,.30) !important;
}

/* PLAY AKTIF */
.mobile-parts-list:not(.series-parts)
.mobile-part-card.active
.mobile-part-play {
    background: #e50914 !important;

    border-color:
        rgba(255,255,255,.55) !important;

    box-shadow:
        0 0 12px rgba(229,9,20,.45) !important;
}

/* JARAK SEBELUM POPULER */
.mobile-parts-list:not(.series-parts)
+ * {
    margin-top: 6px !important;
}

/* TOUCH */
.mobile-parts-list:not(.series-parts)
.mobile-part-card:active
.mobile-part-thumbnail {
    transform: scale(.975) !important;
}

/* HP KECIL */
@media (max-width: 390px) {

    .mobile-parts-list:not(.series-parts) {
        gap: 16px 9px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-play {
        width: 31px !important;
        height: 31px !important;
        font-size: 12px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-name {
        font-size: 12px !important;
    }

    .mobile-parts-list:not(.series-parts)
    .mobile-part-duration {
        right: 5px !important;
        bottom: 5px !important;
        padding: 3px 5px !important;
        font-size: 8px !important;
    }
}


/* ==========================================================
   HNFLIX SERIES EPISODE TITLE
   ========================================================== */

.player-episode-title {
    margin-top: 5px;
    margin-bottom: 10px;
    font-size: 14px;
    line-height: 1.4;
    font-weight: 600;
    color: #b8b8b8;
}

.player-episode-title span {
    margin: 0 5px;
    color: #777;
}