.related-section:empty{
    display:none;
}

/*==================================================
HANNANET MOVIE
Related Movies
Version : 1.0
==================================================*/

.related-section{

    margin-top:40px;

    padding:0 20px;

}

.related-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:18px;

}

.related-title{

    font-size:22px;

    font-weight:700;

    color:#fff;

}

.related-slider{

    display:flex;

    gap:14px;

    overflow-x:auto;

    scroll-behavior:smooth;

    scrollbar-width:none;

}

.related-slider::-webkit-scrollbar{

    display:none;

}

.related-card{

    flex:0 0 115px;

    cursor:pointer;

}

.related-poster{

    width:115px;

    height:170px;

    border-radius:0;

    overflow:hidden;

    background:#222;

}

.related-poster img{

    width:100%;

    height:100%;

    object-fit:cover;

    display:block;

    border-radius:0;

    transition:.35s;

}

.related-card:hover img{

    transform:scale(1.06);

}

.related-name{

    margin-top:8px;

    color:#fff;

    font-size:13px;

    line-height:1.4;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}

.related-meta{

    margin-top:4px;

    color:#999;

    font-size:12px;

}
/*==================================================

/*
==========================================================
HANNANET MOVIE
DETAIL REKOMENDASI
MENGIKUTI PERSIS POLA MOVIES
3 KOLOM / POSTER 2:3
==========================================================
*/

@media (max-width:767px){

    /* SECTION */

    .mobile-detail .detail-related{
        width:100% !important;

        margin-top:28px !important;

        padding:
            0 10px 0 !important;

        box-sizing:border-box !important;
    }


    /* HEADER */

    .mobile-detail .detail-related-header{
        display:flex !important;

        align-items:center !important;

        justify-content:space-between !important;

        width:100% !important;

        margin:
            0 0 14px !important;

        padding:0 !important;
    }


    .mobile-detail .detail-related-header h2{

        margin:0 !important;

        color:#fff !important;

        font-size:17px !important;

        line-height:1.25 !important;

        font-weight:700 !important;
    }


    .mobile-detail .detail-related-header a{

        margin:0 !important;

        padding:0 !important;

        color:#bdbdbd !important;

        font-size:13px !important;

        font-weight:700 !important;

        line-height:1 !important;

        text-decoration:none !important;

        white-space:nowrap !important;
    }


    /* ======================================================
       GRID
       SAMA DENGAN MOVIES
       ====================================================== */

    .mobile-detail .detail-related-track{

        display:grid !important;

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

        gap:
            22px 9px !important;

        width:100% !important;

        padding:
            4px 0 0 !important;

        margin:0 !important;

        overflow:visible !important;

        box-sizing:border-box !important;
    }


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

    .mobile-detail .detail-related-card{

        display:block !important;

        width:100% !important;

        min-width:0 !important;

        max-width:none !important;

        margin:0 !important;

        padding:0 !important;

        background:transparent !important;

        border:0 !important;

        overflow:visible !important;

        text-decoration:none !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       POSTER
       SAMA DENGAN MOVIES
       ====================================================== */

    .mobile-detail .detail-related-thumb{

        position:relative !important;

        width:100% !important;

        aspect-ratio:2 / 3 !important;

        height:auto !important;

        overflow:hidden !important;

        border-radius:6px !important;

        background:#151515 !important;

        box-sizing:border-box !important;
    }


    .mobile-detail .detail-related-thumb img{

        display:block !important;

        width:100% !important;

        height:100% !important;

        min-width:100% !important;

        min-height:100% !important;

        max-width:none !important;

        max-height:none !important;

        object-fit:cover !important;

        object-position:center !important;

        margin:0 !important;

        padding:0 !important;

        border:0 !important;

        border-radius:6px !important;
    }


    /* ======================================================
       JUDUL
       SAMA DENGAN MOVIES
       ====================================================== */

    .mobile-detail .detail-related-name{

        display:-webkit-box !important;

        -webkit-box-orient:vertical !important;

        -webkit-line-clamp:2 !important;

        overflow:hidden !important;

        width:100% !important;

        min-height:34px !important;

        margin:
            7px 0 0 !important;

        padding:0 !important;

        color:#fff !important;

        font-size:12px !important;

        line-height:1.4 !important;

        font-weight:600 !important;

        text-align:left !important;

        box-sizing:border-box !important;
    }


    /* ======================================================
       YEAR + FULL HD
       ====================================================== */

    .mobile-detail .detail-related-meta{

        display:flex !important;

        align-items:center !important;

        gap:4px !important;

        width:100% !important;

        min-height:13px !important;

        margin:
            5px 0 0 !important;

        padding:0 !important;

        color:#999 !important;

        font-size:10px !important;

        line-height:1.3 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        box-sizing:border-box !important;
    }


    .mobile-detail .detail-related-year{

        color:#999 !important;

        flex:0 0 auto !important;
    }


    .mobile-detail .detail-related-quality{

        color:#ffd400 !important;

        font-weight:700 !important;

        text-transform:uppercase !important;

        flex:0 0 auto !important;
    }

}


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

@media (max-width:380px){

    .mobile-detail .detail-related-track{

        gap:
            18px 7px !important;
    }

}


/*
==========================================================
FULL HD MOVIES
KUNING
==========================================================
*/

#moviesGrid .movie-quality{

    color:#ffd400 !important;

    font-weight:700 !important;
}


/* ==========================================================
   HNTV RELATED TITLE MARKER FINAL
   Rekomendasi Untuk Anda
   Hanya heading
   ========================================================== */

@media (max-width:767px){

    .mobile-detail .detail-related-header h2.detail-related-title{
        display:flex !important;
        align-items:center !important;
        gap:8px !important;
        margin:0 !important;
        padding:0 !important;
        color:#fff !important;
        font-size:17px !important;
        line-height:1.25 !important;
        font-weight:700 !important;
    }

    .mobile-detail .detail-related-header h2.detail-related-title > .detail-related-marker{
        display:block !important;
        width:4px !important;
        min-width:4px !important;
        height:20px !important;
        flex:0 0 4px !important;
        background:#e50914 !important;
        border-radius:2px !important;
        opacity:1 !important;
        visibility:visible !important;
    }

}

/* ==========================================================
   REKOMENDASI UNTUK ANDA
   Garis merah vertikal di kiri judul
========================================================== */

@media (max-width:767px){

    .mobile-detail .detail-related-header h2.detail-related-title {
        position: relative !important;
        padding-left: 8px !important;
        display: flex !important;
        align-items: center !important;
        gap: 0 !important;
    }

    .mobile-detail .detail-related-header h2.detail-related-title::before {
        content: "" !important;
        position: absolute !important;
        left: 0 !important;
        top: 2px !important;
        bottom: 2px !important;
        width: 3px !important;
        background: #e50914 !important;
        border-radius: 2px !important;
    }

}


/* ==========================================================
   DETAIL RECOMMENDATION
   Rapikan poster + judul + meta agar semua kartu rata
========================================================== */

@media (max-width: 767px){

    /* Kartu */
    .mobile-detail .detail-related-track .related-card{
        display: flex !important;
        flex-direction: column !important;
        align-self: flex-start !important;
        box-sizing: border-box !important;
    }

    /* Poster semua sama tinggi */
    .mobile-detail .detail-related-track .related-card img{
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        height: auto !important;
        object-fit: cover !important;
    }

    /* Area tulisan */
    .mobile-detail .detail-related-track .related-card > div{
        box-sizing: border-box !important;
    }

    /* Judul dibuat tinggi sama */
    .mobile-detail .detail-related-track .related-card .related-title{
        min-height: 32px !important;
        line-height: 16px !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
        margin-top: 5px !important;
    }

    /* Meta selalu berada di posisi yang sama */
    .mobile-detail .detail-related-track .related-card .related-meta{
        min-height: 14px !important;
        line-height: 14px !important;
        margin-top: 2px !important;
        white-space: nowrap !important;
    }

}



/* =====================================================
   HNFLIX — DETAIL REKOMENDASI UNTUK ANDA
   Selector disesuaikan dengan related.js
   ===================================================== */

@media screen and (max-width: 768px){

    .mobile-detail #relatedMovies{
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-detail #relatedMovies > .related-section{
        margin: 0 0 8px !important;
        padding: 0 !important;
    }

    .mobile-detail #relatedMovies .related-header{
        margin: 0 0 12px !important;
        padding: 0 !important;
    }

    .mobile-detail #relatedMovies .related-slider{
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 18px 12px !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 0 4px !important;
        overflow: visible !important;
    }

    .mobile-detail #relatedMovies .related-card{
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        align-self: start !important;
    }

    .mobile-detail #relatedMovies .related-poster{
        position: relative !important;
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        height: auto !important;
        overflow: hidden !important;
        border-radius: 8px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .mobile-detail #relatedMovies .related-poster img{
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        aspect-ratio: 2 / 3 !important;
        object-fit: cover !important;
        border-radius: 8px !important;
    }

    .mobile-detail #relatedMovies .related-name{
        margin: 7px 0 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        font-size: 12px !important;
        line-height: 1.35 !important;
        display: -webkit-box !important;
        -webkit-box-orient: vertical !important;
        -webkit-line-clamp: 2 !important;
        overflow: hidden !important;
    }

    .mobile-detail #relatedMovies .related-meta{
        display: block !important;
        margin: 4px 0 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
        color: #ffd400 !important;
        font-size: 10px !important;
        line-height: 1.3 !important;
        white-space: nowrap !important;
    }

    .mobile-detail #relatedMovies .related-meta *{
        color: #ffd400 !important;
    }

    .mobile-detail #relatedMovies .related-slider > .related-card:last-child{
        margin-bottom: 0 !important;
    }
}


/* NAIKKAN POSISI REKOMENDASI DETAIL */
@media screen and (max-width: 768px){
  .mobile-detail #relatedMovies{
    margin-top:-12px!important;
  }

  .mobile-detail #relatedMovies .related-header{
    margin-top:0!important;
    padding-top:0!important;
  }
}

/* Pastikan informasi bawah poster tidak tertutup navbar */
@media screen and (max-width: 768px){
  .mobile-detail #relatedMovies{
    padding-bottom:85px!important;
  }

  .mobile-detail #relatedMovies .related-slider{
    padding-bottom:20px!important;
  }

  .mobile-detail #relatedMovies .related-card{
    min-height:0!important;
  }

  .mobile-detail #relatedMovies .related-meta{
    margin-bottom:4px!important;
  }
}


/* =====================================================
   KUNCI UKURAN POSTER REKOMENDASI
   Semua poster wajib memiliki ukuran yang sama
===================================================== */
@media screen and (max-width: 768px){

  .mobile-detail #relatedMovies .related-slider{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;
  }

  .mobile-detail #relatedMovies .related-card{
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    align-self:start!important;
  }

  .mobile-detail #relatedMovies .related-poster{
    display:block!important;
    position:relative!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:2 / 3!important;
    overflow:hidden!important;
    background:#202020!important;
    border-radius:8px!important;
  }

  .mobile-detail #relatedMovies .related-poster img{
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:8px!important;
  }

}

/* =====================================================
   RAPATKAN DAN SEJAJARKAN TEKS DI BAWAH POSTER
===================================================== */
@media screen and (max-width: 768px){

  .mobile-detail #relatedMovies .related-name{
    height:32px!important;
    min-height:32px!important;
    margin-top:7px!important;
    margin-bottom:0!important;
    line-height:16px!important;
    overflow:hidden!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  .mobile-detail #relatedMovies .related-meta{
    height:14px!important;
    min-height:14px!important;
    margin-top:4px!important;
    line-height:14px!important;
    display:flex!important;
    align-items:center!important;
    white-space:nowrap!important;
    overflow:hidden!important;
  }

}

/* =====================================================
   FINAL LOCK — POSTER DAN TEKS REKOMENDASI HARUS SERAGAM
===================================================== */
@media screen and (max-width: 768px){

  .mobile-detail #relatedMovies .related-slider{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;
    gap:18px 12px!important;
  }

  .mobile-detail #relatedMovies .related-card{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    grid-template-rows:auto 32px 14px!important;
    align-content:start!important;
    align-items:start!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
  }

  /* Wadah poster dikunci dengan rasio 2:3 */
  .mobile-detail #relatedMovies .related-poster{
    grid-row:1!important;
    position:relative!important;
    display:block!important;
    width:100%!important;
    aspect-ratio:2 / 3!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    background:#202020!important;
    border-radius:8px!important;
  }

  /* Gambar tidak boleh menentukan ukuran wadah */
  .mobile-detail #relatedMovies .related-poster img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
  }

  /* Judul selalu memakai ruang 2 baris */
  .mobile-detail #relatedMovies .related-name{
    grid-row:2!important;
    width:100%!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    margin:7px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:12px!important;
    line-height:16px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
  }

  /* Metadata selalu sejajar */
  .mobile-detail #relatedMovies .related-meta{
    grid-row:3!important;
    width:100%!important;
    height:14px!important;
    min-height:14px!important;
    max-height:14px!important;
    margin:4px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    display:block!important;
    font-size:10px!important;
    line-height:14px!important;
    color:#ffd400!important;
  }

}

/* =====================================================
   FINAL FIX — SEMUA KARTU REKOMENDASI HARUS LURUS
===================================================== */
@media screen and (max-width: 768px){

  .mobile-detail #relatedMovies .related-slider{
    display:grid!important;
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
    align-items:start!important;
    gap:18px 12px!important;
  }

  .mobile-detail #relatedMovies .related-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    width:100%!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    overflow:hidden!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-poster{
    position:relative!important;
    display:block!important;
    flex:0 0 auto!important;
    width:100%!important;
    height:auto!important;
    aspect-ratio:2 / 3!important;
    overflow:hidden!important;
    margin:0!important;
    padding:0!important;
    background:#202020!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-poster img{
    position:absolute!important;
    inset:0!important;
    display:block!important;
    width:100%!important;
    height:100%!important;
    min-width:100%!important;
    min-height:100%!important;
    max-width:none!important;
    max-height:none!important;
    object-fit:cover!important;
    object-position:center!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:8px!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-name{
    flex:0 0 32px!important;
    width:100%!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    margin:7px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    font-size:12px!important;
    line-height:16px!important;
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-meta{
    flex:0 0 14px!important;
    width:100%!important;
    height:14px!important;
    min-height:14px!important;
    max-height:14px!important;
    margin:4px 0 0!important;
    padding:0!important;
    overflow:hidden!important;
    white-space:nowrap!important;
    text-overflow:ellipsis!important;
    display:block!important;
    font-size:10px!important;
    line-height:14px!important;
    color:#ffd400!important;
    box-sizing:border-box!important;
  }

}

/* =====================================================
   LOCK TEKS — JUDUL DAN METADATA SELALU SEJAJAR
===================================================== */
@media screen and (max-width: 768px){

  .mobile-detail #relatedMovies .related-card{
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    width:100%!important;
    min-width:0!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-name{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:2!important;

    width:100%!important;
    height:32px!important;
    min-height:32px!important;
    max-height:32px!important;
    flex:0 0 32px!important;

    margin:7px 0 0!important;
    padding:0!important;

    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:normal!important;

    font-size:11px!important;
    line-height:16px!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-meta{
    display:block!important;

    width:100%!important;
    height:14px!important;
    min-height:14px!important;
    max-height:14px!important;
    flex:0 0 14px!important;

    margin:4px 0 0!important;
    padding:0!important;

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

    font-size:9px!important;
    line-height:14px!important;
    color:#ffd400!important;
    box-sizing:border-box!important;
  }

  .mobile-detail #relatedMovies .related-meta *{
    color:#ffd400!important;
  }

}

/* =====================================================
   FINAL OVERRIDE DETAIL
   KARTU REKOMENDASI MENGIKUTI POLA PLAYER
   ===================================================== */

@media screen and (max-width: 768px){

    .mobile-detail #relatedMovies .related-slider{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        gap:14px !important;
        width:100% !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        padding:4px 0 10px !important;
        margin:0 !important;
        scroll-behavior:smooth !important;
        scrollbar-width:none !important;
    }

    .mobile-detail #relatedMovies .related-slider::-webkit-scrollbar{
        display:none !important;
    }

    .mobile-detail #relatedMovies .related-card{
        display:flex !important;
        flex:0 0 110px !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:110px !important;
        min-width:110px !important;
        max-width:110px !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .mobile-detail #relatedMovies .related-poster{
        position:relative !important;
        width:110px !important;
        height:165px !important;
        min-width:110px !important;
        max-width:110px !important;
        aspect-ratio:2 / 3 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        background:#202020 !important;
        border-radius:8px !important;
        box-sizing:border-box !important;
    }

    .mobile-detail #relatedMovies .related-poster img{
        position:absolute !important;
        inset:0 !important;
        display:block !important;
        width:110px !important;
        height:165px !important;
        min-width:110px !important;
        min-height:165px !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:8px !important;
        transform:none !important;
        box-sizing:border-box !important;
    }

    .mobile-detail #relatedMovies .related-name{
        width:110px !important;
        max-width:110px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        margin:7px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        font-size:13px !important;
        line-height:18px !important;
        font-weight:600 !important;
        color:#fff !important;
        box-sizing:border-box !important;
    }

    .mobile-detail #relatedMovies .related-meta{
        width:110px !important;
        max-width:110px !important;
        height:14px !important;
        min-height:14px !important;
        max-height:14px !important;
        margin:4px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
        display:block !important;
        font-size:10px !important;
        line-height:14px !important;
        color:#ffd400 !important;
        box-sizing:border-box !important;
    }

}

/* =====================================================
   FINAL FIX V2
   REKOMENDASI DETAIL RAPAT KIRI-KANAN
   MENGIKUTI UKURAN CARD PLAYER
   ===================================================== */

@media screen and (max-width: 768px){

    .mobile-detail .related-section{
        width:100% !important;
        margin-top:28px !important;
        padding:0 3px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .mobile-detail .related-header{
        width:100% !important;
        margin:0 0 14px !important;
        padding:0 3px !important;
        box-sizing:border-box !important;
    }

    .mobile-detail .related-slider{
        display:flex !important;
        flex-direction:row !important;
        flex-wrap:nowrap !important;
        align-items:flex-start !important;
        gap:10px !important;
        width:100% !important;
        margin:0 !important;
        padding:0 0 10px !important;
        overflow-x:auto !important;
        overflow-y:hidden !important;
        box-sizing:border-box !important;
        scrollbar-width:none !important;
    }

    .mobile-detail .related-slider::-webkit-scrollbar{
        display:none !important;
    }

    .mobile-detail .related-card{
        display:flex !important;
        flex:0 0 110px !important;
        flex-direction:column !important;
        width:110px !important;
        min-width:110px !important;
        max-width:110px !important;
        height:auto !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .mobile-detail .related-poster{
        width:110px !important;
        height:165px !important;
        min-width:110px !important;
        max-width:110px !important;
        aspect-ratio:2 / 3 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
        border-radius:8px !important;
    }

    .mobile-detail .related-poster img{
        display:block !important;
        width:110px !important;
        height:165px !important;
        min-width:110px !important;
        min-height:165px !important;
        max-width:none !important;
        max-height:none !important;
        object-fit:contain !important;
        object-position:center !important;
        margin:0 !important;
        padding:0 !important;
        border:0 !important;
        border-radius:8px !important;
        transform:none !important;
        box-sizing:border-box !important;
    }

    .mobile-detail .related-name{
        width:110px !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        margin:7px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        font-size:13px !important;
        line-height:18px !important;
        font-weight:600 !important;
        color:#fff !important;
        box-sizing:border-box !important;
    }

    .mobile-detail .related-meta{
        width:110px !important;
        height:14px !important;
        min-height:14px !important;
        max-height:14px !important;
        margin:4px 0 0 !important;
        padding:0 !important;
        overflow:hidden !important;
        white-space:nowrap !important;
        text-overflow:ellipsis !important;
        font-size:10px !important;
        line-height:14px !important;
        color:#ffd400 !important;
        box-sizing:border-box !important;
    }

}

/* =====================================================
   FIX REKOMENDASI MOBILE
   RAPAT KE KIRI DAN KANAN
   ===================================================== */

@media screen and (max-width: 768px){

    .related-section{
        width:100% !important;
        margin:28px 0 0 !important;
        padding:0 3px !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .related-header{
        width:100% !important;
        margin:0 0 14px !important;
        padding:0 !important;
        box-sizing:border-box !important;
    }

    .related-slider{
        display:grid !important;
        grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
        gap:18px 8px !important;
        width:100% !important;
        margin:0 !important;
        padding:0 !important;
        overflow:visible !important;
        box-sizing:border-box !important;
    }

    .related-card{
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        margin:0 !important;
        padding:0 !important;
        box-sizing:border-box !important;
        overflow:hidden !important;
    }

    .related-poster{
        width:100% !important;
        height:auto !important;
        aspect-ratio:2 / 3 !important;
        margin:0 !important;
        padding:0 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
        border-radius:8px !important;
    }

    .related-poster img{
        display:block !important;
        width:100% !important;
        height:100% !important;
        object-fit:cover !important;
        object-position:center !important;
        transform:none !important;
        border-radius:8px !important;
        box-sizing:border-box !important;
    }

    .related-name{
        width:100% !important;
        height:36px !important;
        min-height:36px !important;
        max-height:36px !important;
        margin:7px 0 0 !important;
        padding:0 !important;
        font-size:12px !important;
        line-height:18px !important;
        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
    }

    .related-meta{
        width:100% !important;
        height:14px !important;
        min-height:14px !important;
        max-height:14px !important;
        margin:4px 0 0 !important;
        padding:0 !important;
        font-size:10px !important;
        line-height:14px !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
        box-sizing:border-box !important;
    }

}



/* =========================================================
   HNF LIX RELATED MOVIES - FINAL CLEAN OVERRIDE
   Hanya untuk halaman detail mobile
   Tidak menyentuh player, streaming, atau kontrol video
   ========================================================= */

.mobile-detail #relatedMovies {
    display: block;
    width: 100%;
    margin: 28px 0 0;
    padding: 0 0 24px;
    overflow: hidden;
}

.mobile-detail #relatedMovies .related-section {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
}

.mobile-detail #relatedMovies .related-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0 0 14px;
    padding: 0;
}

.mobile-detail #relatedMovies .related-title {
    margin: 0;
    padding: 0;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
}

.mobile-detail #relatedMovies .related-slider {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: visible;
}

.mobile-detail #relatedMovies .related-card {
    display: block;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    cursor: pointer;
}

.mobile-detail #relatedMovies .related-poster {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 2 / 3;
    margin: 0 0 8px;
    padding: 0;
    overflow: hidden;
    background: #202020;
    border-radius: 8px;
}

.mobile-detail #relatedMovies .related-poster img {
    display: block;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    object-fit: cover;
    object-position: center;
    border: 0;
    border-radius: 8px;
}

.mobile-detail #relatedMovies .related-name {
    display: -webkit-box;
    width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 0;
    overflow: hidden;
    color: #ffffff;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    text-align: left;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.mobile-detail #relatedMovies .related-meta {
    display: block;
    width: 100%;
    min-height: 16px;
    margin: 4px 0 0;
    padding: 0;
    overflow: hidden;
    color: #a6a6a6;
    font-size: 10px;
    font-weight: 400;
    line-height: 1.4;
    white-space: nowrap;
    text-overflow: ellipsis;
}

@media (max-width: 450px) {

    .mobile-detail #relatedMovies {
        margin-top: 24px;
        padding-bottom: 20px;
    }

    .mobile-detail #relatedMovies .related-header {
        margin-bottom: 12px;
    }

    .mobile-detail #relatedMovies .related-title {
        font-size: 16px;
    }

    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 8px;
    }

    .mobile-detail #relatedMovies .related-poster {
        border-radius: 7px;
    }

    .mobile-detail #relatedMovies .related-poster img {
        border-radius: 7px;
    }

    .mobile-detail #relatedMovies .related-name {
        font-size: 11px;
        line-height: 1.35;
    }

    .mobile-detail #relatedMovies .related-meta {
        font-size: 9px;
    }
}

/* FINAL SPACING - RELATED MOVIES */
.mobile-detail #relatedMovies .related-slider {
    column-gap: 14px !important;
    row-gap: 22px !important;
}

@media (max-width: 450px) {
    .mobile-detail #relatedMovies .related-slider {
        column-gap: 12px !important;
        row-gap: 20px !important;
    }
}


/* =========================================================
   RELATED MOVIES - SAMAKAN DENGAN CARD PLAYER
   Hanya halaman detail mobile
   ========================================================= */

.mobile-detail #relatedMovies .related-slider {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 22px !important;
}

.mobile-detail #relatedMovies .related-poster {
    aspect-ratio: 2 / 3 !important;
    border-radius: 9px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
}

.mobile-detail #relatedMovies .related-name {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    margin-top: 11px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    text-overflow: ellipsis !important;
    -webkit-line-clamp: unset !important;
    display: block !important;
}

.mobile-detail #relatedMovies .related-meta {
    min-height: 0 !important;
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
}

/* Sama seperti card player pada tablet */
@media (max-width: 800px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }

    .mobile-detail #relatedMovies .related-title {
        font-size: 20px !important;
    }
}

/* Sama seperti card player pada mobile */
@media (max-width: 550px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .mobile-detail #relatedMovies .related-poster {
        border-radius: 7px !important;
    }

    .mobile-detail #relatedMovies .related-name {
        font-size: 13px !important;
    }

    .mobile-detail #relatedMovies .related-meta {
        font-size: 11px !important;
    }
}


/* ==========================================================
   FINAL - RELATED CARD SAMA SEPERTI CARD PLAYER MOBILE
   ========================================================== */

.mobile-detail #relatedMovies .related-slider {
    display: grid !important;
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 22px !important;
    width: 100% !important;
    align-items: start !important;
}

.mobile-detail #relatedMovies .related-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
}

.mobile-detail #relatedMovies .related-poster {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 9px !important;
}

.mobile-detail #relatedMovies .related-poster img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.mobile-detail #relatedMovies .related-name,
.mobile-detail #relatedMovies .related-title {
    margin-top: 11px !important;
    font-size: 14px !important;
    line-height: 1.35 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.mobile-detail #relatedMovies .related-meta {
    margin-top: 5px !important;
    font-size: 12px !important;
    line-height: 1.35 !important;
}

/* Laptop */
@media (max-width: 1200px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 20px !important;
    }
}

/* Tablet */
@media (max-width: 800px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 15px !important;
    }
}

/* Mobile - sama seperti card player */
@media (max-width: 550px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .mobile-detail #relatedMovies .related-poster {
        border-radius: 7px !important;
    }

    .mobile-detail #relatedMovies .related-name,
    .mobile-detail #relatedMovies .related-title {
        font-size: 13px !important;
    }

    .mobile-detail #relatedMovies .related-meta {
        font-size: 11px !important;
    }
}


/* ==========================================================
   FIX DETAIL RECOMMENDATIONS
   Target: detail.js -> .detail-related-track
   ========================================================== */

@media (max-width: 550px) {

    .mobile-detail .detail-related-track {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 14px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .mobile-detail .detail-related-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .mobile-detail .detail-related-card .detail-related-thumb {
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        overflow: hidden !important;
        border-radius: 7px !important;
    }

    .mobile-detail .detail-related-card .detail-related-thumb img {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

}


/* FINAL FIX: RELATED CARD MOBILE 3 KOLOM */
@media (max-width: 550px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
    }

    .mobile-detail #relatedMovies .related-card {
        width: 100% !important;
        min-width: 0 !important;
    }

    .mobile-detail #relatedMovies .related-poster {
        aspect-ratio: 2 / 3 !important;
        width: 100% !important;
    }

    .mobile-detail #relatedMovies .related-name,
    .mobile-detail #relatedMovies .related-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .mobile-detail #relatedMovies .related-meta {
        font-size: 9px !important;
    }
}


/* FINAL OVERRIDE - RELATED CARD MOBILE 3 KOLOM */
@media (max-width: 550px) {

    .mobile-detail #relatedMovies .related-slider {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px !important;
        overflow: visible !important;
    }

    .mobile-detail #relatedMovies .related-card {
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
    }

    .mobile-detail #relatedMovies .related-poster {
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        height: auto !important;
    }

    .mobile-detail #relatedMovies .related-poster img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .mobile-detail #relatedMovies .related-name,
    .mobile-detail #relatedMovies .related-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .mobile-detail #relatedMovies .related-meta {
        font-size: 9px !important;
    }

}

/* FORCE RECOMMENDATION MOBILE: 3 KOLOM */
@media (max-width: 550px) {

    .mobile-detail #relatedMovies .related-slider,
    .mobile-detail #relatedMovies .detail-related-track,
    .mobile-detail .related-slider,
    .mobile-detail .detail-related-track {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 12px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .mobile-detail #relatedMovies .related-card,
    .mobile-detail #relatedMovies .detail-related-card,
    .mobile-detail .related-card,
    .mobile-detail .detail-related-card {
        display: block !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        margin: 0 !important;
    }

    .mobile-detail #relatedMovies .related-card img,
    .mobile-detail #relatedMovies .detail-related-card img,
    .mobile-detail .related-card img,
    .mobile-detail .detail-related-card img {
        display: block !important;
        width: 100% !important;
        aspect-ratio: 2 / 3 !important;
        height: auto !important;
        object-fit: cover !important;
        border-radius: 7px !important;
    }

    .mobile-detail #relatedMovies .related-name,
    .mobile-detail #relatedMovies .related-title,
    .mobile-detail .related-name,
    .mobile-detail .related-title {
        font-size: 11px !important;
        line-height: 1.3 !important;
    }

    .mobile-detail #relatedMovies .related-meta,
    .mobile-detail .related-meta {
        font-size: 9px !important;
        line-height: 1.3 !important;
    }
}


/* FINAL RESPONSIVE RELATED CARD - SEMUA UKURAN ANDROID */

.mobile-detail #relatedMovies .related-slider {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr)) !important;
    gap: 14px 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    align-items: start !important;
}

.mobile-detail #relatedMovies .related-card {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.mobile-detail #relatedMovies .related-poster,
.mobile-detail #relatedMovies .related-card img {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 7px !important;
}

.mobile-detail #relatedMovies .related-name,
.mobile-detail #relatedMovies .related-title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    font-size: clamp(10px, 2.8vw, 13px) !important;
    line-height: 1.35 !important;
    margin-top: 5px !important;
    word-break: break-word !important;
}

.mobile-detail #relatedMovies .related-meta {
    font-size: clamp(9px, 2.4vw, 11px) !important;
    line-height: 1.3 !important;
    white-space: normal !important;
}

/* Layar sangat kecil */
@media (max-width: 340px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 12px 9px !important;
    }
}

/* Layar Android sedang dan besar */
@media (min-width: 600px) {
    .mobile-detail #relatedMovies .related-slider {
        grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)) !important;
        gap: 16px 12px !important;
    }
}



/* =====================================================
   FIX REKOMENDASI — SAMAKAN DENGAN CARD MOVIES
   ===================================================== */

.mobile-detail .detail-related {
    width: 100%;
    margin-top: 32px;
    padding: 0 20px;
    box-sizing: border-box;
}

.mobile-detail .detail-related-track {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 22px 14px !important;
    width: 100% !important;
    overflow: visible !important;
}

.mobile-detail .detail-related-track .related-card {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    overflow: visible !important;
}

.mobile-detail .detail-related-track .related-poster {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 6px !important;
    background: #151515 !important;
}

.mobile-detail .detail-related-track .related-poster img {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 6px !important;
    transform: none !important;
}

.mobile-detail .detail-related-track .related-name {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 2 !important;
    overflow: hidden !important;
    min-height: 34px !important;
    width: 100% !important;
    margin: 7px 0 0 !important;
    padding: 0 !important;
    color: #fff !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    font-weight: 600 !important;
    text-align: left !important;
}

.mobile-detail .detail-related-track .related-meta {
    width: 100% !important;
    margin: 5px 0 0 !important;
    padding: 0 !important;
    color: #999 !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
}


/* TABLET */
@media (max-width: 1100px) {
    .mobile-detail .detail-related-track {
        grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    }
}


/* MOBILE */
@media (max-width: 700px) {
    .mobile-detail .detail-related {
        padding: 0 14px;
    }

    .mobile-detail .detail-related-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px 12px !important;
    }
}


/* HP KECIL */
@media (max-width: 400px) {
    .mobile-detail .detail-related-track {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 16px 9px !important;
    }
}