/* ==========================================================
   HANNANET MOVIE MOBILE
   CARD CSS
   Version : 3.0 Professional
========================================================== */

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

.mobile-card{

    display:block;

    width:110px;

    flex:0 0 110px;

    text-decoration:none;

    overflow:hidden;

}

/* ==========================================
   POSTER
========================================== */

.mobile-card img{

    width:110px;

    height:165px;

    display:block;

    object-fit:cover;

    border-radius:0;

    background:#1b1b1b;

    transition:transform .25s ease;

}

/* ==========================================
   TOUCH EFFECT
========================================== */

.mobile-card:active img{

    transform:scale(.97);

}

/* ==========================================
   HOVER
========================================== */

.mobile-card:hover img{

    transform:scale(1);

}

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

.mobile-card-info{

    margin-top:8px;

}

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

.mobile-card-title{

    color:#ffffff;

    font-size:13px;

    font-weight:600;

    line-height:1.4;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

    min-height:36px;

}

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

.mobile-card-meta{

    margin-top:4px;

    color:#9c9c9c;

    font-size:11px;

    font-weight:500;

}
/* ==========================================================
   POSTER FULL - TIDAK CROP
========================================================== */

.mobile-card img,
.mobile-slider .mobile-card img,
.detail-related-card img,
.related-card img {
    width: 100% !important;
    aspect-ratio: 2 / 3 !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    background: #111 !important;
}

/* Poster container tetap rapi */
.mobile-card,
.detail-related-card,
.related-card {
    overflow: hidden !important;
}

/* Jangan potong gambar karena tinggi container */
.mobile-card .mobile-card-poster,
.mobile-card .favorite-poster,
.detail-related-thumb,
.related-poster {
    aspect-ratio: 2 / 3 !important;
    overflow: hidden !important;
    background: #111 !important;
}


/* ==========================================================
   FINAL POSTER — TAMPIL PENUH TANPA CROP
========================================================== */

.mobile-card img,
.mobile-slider .mobile-card img,
.detail-related-card img,
.related-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    background: #111 !important;
}

/* Jangan paksa tinggi poster */
.mobile-card,
.mobile-slider .mobile-card {
    height: auto !important;
}

/* Container poster jangan memotong gambar */
.mobile-card .mobile-card-poster,
.detail-related-thumb,
.related-poster {
    height: auto !important;
    aspect-ratio: auto !important;
    overflow: visible !important;
}


/* ==========================================================
   HOME TRENDING + LATEST
   4 KOLOM — TAMPILAN POSTER SEPERTI REKOMENDASI
========================================================== */

@media (max-width:767px){

    #playerTrending,
    #playerLatest{

        display:grid !important;

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

        gap:8px !important;

        width:100% !important;

        padding-left:6px !important;
        padding-right:6px !important;

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:visible !important;

        box-sizing:border-box !important;
    }


    /* CARD */

    #playerTrending .mobile-card,
    #playerLatest .mobile-card{

        width:100% !important;

        min-width:0 !important;
        max-width:none !important;

        flex:none !important;

        display:block !important;

        overflow:hidden !important;

        box-sizing:border-box !important;

        background:transparent !important;
    }


    /* POSTER */

    #playerTrending .mobile-card > img,
    #playerLatest .mobile-card > img{

        width:100% !important;

        height:auto !important;

        aspect-ratio:2 / 3 !important;

        object-fit:cover !important;

        object-position:center !important;

        display:block !important;

        background:#111 !important;

        border-radius:6px !important;
    }


    /* INFO */

    #playerTrending .mobile-card-info,
    #playerLatest .mobile-card-info{

        margin-top:5px !important;

        padding:0 !important;
    }


    /* JUDUL */

    #playerTrending .mobile-card-title,
    #playerLatest .mobile-card-title{

        font-size:10px !important;

        line-height:1.25 !important;

        font-weight:600 !important;

        color:#fff !important;

        display:-webkit-box !important;

        -webkit-box-orient:vertical !important;

        -webkit-line-clamp:2 !important;

        overflow:hidden !important;

        min-height:25px !important;
    }


    /* TAHUN + QUALITY */

    #playerTrending .mobile-card-meta,
    #playerLatest .mobile-card-meta{

        margin-top:3px !important;

        font-size:8px !important;

        line-height:1.2 !important;

        color:#888 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }

}


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

@media (max-width:380px){

    #playerTrending,
    #playerLatest{

        gap:6px !important;

        padding-left:5px !important;
        padding-right:5px !important;
    }

}


/* ==========================================================
   HOME TRENDING + LATEST
   4 KOLOM — TAMPILAN POSTER SEPERTI REKOMENDASI
========================================================== */

@media (max-width:767px){

    #playerTrending,
    #playerLatest{

        display:grid !important;

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

        gap:8px !important;

        width:100% !important;

        padding-left:6px !important;
        padding-right:6px !important;

        margin:0 !important;

        overflow-x:hidden !important;
        overflow-y:visible !important;

        box-sizing:border-box !important;
    }


    /* CARD */

    #playerTrending .mobile-card,
    #playerLatest .mobile-card{

        width:100% !important;

        min-width:0 !important;
        max-width:none !important;

        flex:none !important;

        display:block !important;

        overflow:hidden !important;

        box-sizing:border-box !important;

        background:transparent !important;
    }


    /* POSTER */

    #playerTrending .mobile-card > img,
    #playerLatest .mobile-card > img{

        width:100% !important;

        height:auto !important;

        aspect-ratio:2 / 3 !important;

        object-fit:cover !important;

        object-position:center !important;

        display:block !important;

        background:#111 !important;

        border-radius:6px !important;
    }


    /* INFO */

    #playerTrending .mobile-card-info,
    #playerLatest .mobile-card-info{

        margin-top:5px !important;

        padding:0 !important;
    }


    /* JUDUL */

    #playerTrending .mobile-card-title,
    #playerLatest .mobile-card-title{

        font-size:10px !important;

        line-height:1.25 !important;

        font-weight:600 !important;

        color:#fff !important;

        display:-webkit-box !important;

        -webkit-box-orient:vertical !important;

        -webkit-line-clamp:2 !important;

        overflow:hidden !important;

        min-height:25px !important;
    }


    /* TAHUN + QUALITY */

    #playerTrending .mobile-card-meta,
    #playerLatest .mobile-card-meta{

        margin-top:3px !important;

        font-size:8px !important;

        line-height:1.2 !important;

        color:#888 !important;

        white-space:nowrap !important;

        overflow:hidden !important;

        text-overflow:ellipsis !important;
    }

}


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

@media (max-width:380px){

    #playerTrending,
    #playerLatest{

        gap:6px !important;

        padding-left:5px !important;
        padding-right:5px !important;
    }

}



/* ==========================================================
   MOBILE MOVIE LIST
   20 MOVIES / PAGE
   3 COLUMNS
========================================================== */

@media (max-width: 767px) {

    #moviesGrid.mobile-movie-grid {

        display: grid !important;

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

        gap: 22px 9px !important;

        width: 100% !important;

        padding:
            4px 10px 0 !important;

        margin: 0 !important;

        box-sizing: border-box !important;

    }


    #moviesGrid .movie-list-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;

    }


    /* POSTER */

    #moviesGrid .movie-list-poster,
.mobile-detail .detail-related .movie-list-poster {

        position: relative !important;

        width: 100% !important;

        aspect-ratio: 2 / 3 !important;

        overflow: hidden !important;

        border-radius: 6px !important;

        background: #151515 !important;

    }


    #moviesGrid .movie-list-poster img,
.mobile-detail .detail-related .movie-list-poster img {

        display: block !important;

        width: 100% !important;

        height: 100% !important;

        object-fit: cover !important;

        object-position: center !important;

    }


    /* INFO */

    #moviesGrid .mobile-card-info,
.mobile-detail .detail-related .mobile-card-info {

        display: block !important;

        width: 100% !important;

        margin:
            7px 0 0 !important;

        padding: 0 !important;

        background: transparent !important;

    }


    /* TITLE */

    #moviesGrid .mobile-card-title,
.mobile-detail .detail-related .mobile-card-title {

        display: -webkit-box !important;

        -webkit-box-orient: vertical !important;

        -webkit-line-clamp: 2 !important;

        overflow: hidden !important;

        min-height: 34px !important;

        margin: 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;

    }


    /* YEAR + QUALITY */

    #moviesGrid .mobile-card-meta,
.mobile-detail .detail-related .mobile-card-meta {

        display: flex !important;

        align-items: center !important;

        gap: 4px !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;

    }


    #moviesGrid .movie-meta-dot,
.mobile-detail .detail-related .movie-meta-dot {

        color: #666 !important;

    }


    #moviesGrid .movie-quality,
.mobile-detail .detail-related .movie-quality {

        color: #ffd400 !important;

        font-weight: 700 !important;

    }


    /* EMPTY */

    .mobile-movies-empty {

        grid-column: 1 / -1 !important;

        padding: 35px 10px !important;

        text-align: center !important;

        color: #888 !important;

        font-size: 13px !important;

    }

}


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

@media (max-width: 380px) {

    #moviesGrid.mobile-movie-grid {

        gap:
            20px 7px !important;

        padding-left: 8px !important;

        padding-right: 8px !important;

    }


    #moviesGrid .mobile-card-title {

        font-size: 11px !important;

        line-height: 1.35 !important;

    }


    #moviesGrid .mobile-card-meta {

        font-size: 9px !important;

    }


}


/* ==========================================================
   MOBILE MOVIES PAGINATION
   HANYA PAGINATION — POSTER/CARD TIDAK DIUBAH
========================================================== */

@media (max-width: 767px) {

    .movies-pagination {

        display: flex !important;

        align-items: center !important;

        justify-content: center !important;

        flex-wrap: wrap !important;

        gap: 8px !important;

        width: 100% !important;

        margin: 30px 0 45px !important;

        padding: 0 10px !important;

        box-sizing: border-box !important;

    }


    /* NOMOR HALAMAN */

    .movies-page-btn {

        width: 40px !important;

        min-width: 40px !important;

        height: 40px !important;

        padding: 0 !important;

        display: inline-flex !important;

        align-items: center !important;

        justify-content: center !important;

        border: 1px solid #333 !important;

        border-radius: 9px !important;

        background: #1a1a1a !important;

        color: #fff !important;

        font-size: 13px !important;

        font-weight: 600 !important;

        line-height: 1 !important;

        cursor: pointer !important;

        box-sizing: border-box !important;

    }


    /* HALAMAN AKTIF */

    .movies-page-btn.active {

        background: #e50914 !important;

        border-color: #e50914 !important;

        color: #fff !important;

    }


    .movies-page-btn:active {

        transform: scale(.96);

    }

}


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

@media (max-width: 380px) {

    .movies-pagination {

        gap: 6px !important;

        padding-left: 6px !important;

        padding-right: 6px !important;

    }


    .movies-page-btn {

        width: 36px !important;

        min-width: 36px !important;

        height: 36px !important;

        font-size: 12px !important;

    }

}

/* ==========================================================
   FINAL — PREV / NEXT PAGINATION
========================================================== */

@media (max-width: 767px) {

    .movies-pagination .movies-page-btn:first-child,
    .movies-pagination .movies-page-btn:last-child {

        width: auto !important;

        min-width: 62px !important;

        padding: 0 12px !important;

    }

}

@media (max-width: 380px) {

    .movies-pagination .movies-page-btn:first-child,
    .movies-pagination .movies-page-btn:last-child {

        min-width: 58px !important;

        padding: 0 9px !important;

    }

}

/*
==================================================
FULL HD - MOVIES
==================================================
*/

#moviesGrid .movie-quality{

    color:#ffd400 !important;

    font-weight:700 !important;

}


/* ==========================================================
   HNTV PLAYER TRENDING FINAL - 3 KOLOM + META KUNING
   ----------------------------------------------------------
   KHUSUS: Sedang Populer Hari Ini
   Tidak menyentuh player engine / player.js / settings
   ========================================================== */

@media (max-width:767px){

    #playerTrending{
        display:grid !important;
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:10px !important;
        width:100% !important;
        padding-left:10px !important;
        padding-right:10px !important;
        margin:0 !important;
        overflow-x:hidden !important;
        overflow-y:visible !important;
        box-sizing:border-box !important;
    }

    #playerTrending .mobile-card{
        width:100% !important;
        min-width:0 !important;
        max-width:none !important;
        flex:none !important;
        display:block !important;
        overflow:hidden !important;
        box-sizing:border-box !important;
        background:transparent !important;
    }

    #playerTrending .mobile-card > img{
        width:100% !important;
        height:auto !important;
        aspect-ratio:2 / 3 !important;
        object-fit:cover !important;
        object-position:center !important;
        display:block !important;
        background:#111 !important;
        border-radius:6px !important;
    }

    #playerTrending .mobile-card-info{
        margin-top:5px !important;
        padding:0 !important;
        width:100% !important;
        min-width:0 !important;
    }

    #playerTrending .mobile-card-title{
        font-size:10px !important;
        line-height:1.25 !important;
        font-weight:600 !important;
        color:#fff !important;
        display:-webkit-box !important;
        -webkit-box-orient:vertical !important;
        -webkit-line-clamp:2 !important;
        overflow:hidden !important;
        min-height:25px !important;
    }

    /* FULL HD + TAHUN = KUNING */
    #playerTrending .mobile-card-meta{
        margin-top:3px !important;
        font-size:8px !important;
        line-height:1.2 !important;
        color:#ffd400 !important;
        white-space:nowrap !important;
        overflow:hidden !important;
        text-overflow:ellipsis !important;
    }

}

@media (max-width:380px){

    #playerTrending{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
        gap:8px !important;
        padding-left:8px !important;
        padding-right:8px !important;
    }

}


/* ==========================================================
   HNTV GLOBAL MOVIE META COLOR FINAL
   ----------------------------------------------------------
   STANDARD SELURUH CARD MOVIE MOBILE
   Tahun + Quality + Dot = KUNING
   Judul = PUTIH
   ========================================================== */

@media (max-width:767px){

    /* ======================================================
       SEMUA META CARD MOVIE
       ====================================================== */

    .mobile-card-meta,

    #moviesGrid .mobile-card-meta,
    #trendingSlider .mobile-card-meta,
    #latestSlider .mobile-card-meta,
    #recommendedSlider .mobile-card-meta,
    #horrorSlider .mobile-card-meta,
    #actionSlider .mobile-card-meta,
    #comedySlider .mobile-card-meta,
    #playerTrending .mobile-card-meta,
    #playerLatest .mobile-card-meta,

    .mobile-slider .mobile-card-meta,
    .detail-related .mobile-card-meta{

        color:#ffd400 !important;

    }


    /* ======================================================
       SEMUA ISI META
       Tahun / Quality / Dot
       ====================================================== */

    .mobile-card-meta *,
    
    #moviesGrid .mobile-card-meta *,
    #trendingSlider .mobile-card-meta *,
    #latestSlider .mobile-card-meta *,
    #recommendedSlider .mobile-card-meta *,
    #horrorSlider .mobile-card-meta *,
    #actionSlider .mobile-card-meta *,
    #comedySlider .mobile-card-meta *,
    #playerTrending .mobile-card-meta *,
    #playerLatest .mobile-card-meta *,

    .mobile-slider .mobile-card-meta *,
    .detail-related .mobile-card-meta *{

        color:#ffd400 !important;

    }


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

    #moviesGrid .movie-quality,
    #moviesGrid .movie-meta-dot,

    .mobile-detail .detail-related .movie-quality,
    .mobile-detail .detail-related .movie-meta-dot{

        color:#ffd400 !important;

    }


    /* ======================================================
       JUDUL TETAP PUTIH
       ====================================================== */

    .mobile-card-title,

    #moviesGrid .mobile-card-title,
    #trendingSlider .mobile-card-title,
    #latestSlider .mobile-card-title,
    #recommendedSlider .mobile-card-title,
    #horrorSlider .mobile-card-title,
    #actionSlider .mobile-card-title,
    #comedySlider .mobile-card-title,
    #playerTrending .mobile-card-title,
    #playerLatest .mobile-card-title{

        color:#ffffff !important;

    }

}

/* ==========================================================
   MOVIES CARD — SAME POSTER AS HOME
   Poster Movies wajib portrait 2:3
   KHUSUS #moviesGrid
========================================================== */

@media (max-width: 767px) {

    #moviesGrid .movie-list-card {
        display: block !important;
        width: 100% !important;
        height: auto !important;
        overflow: hidden !important;
    }

    #moviesGrid .movie-list-card > img {
        display: block !important;

        width: 100% !important;

        /* POSTER MOVIES = PORTRAIT 2:3, SAMA SEPERTI HOME */
        height: calc(((100vw - 50px) / 3) * 1.5) !important;
        min-height: 0 !important;
        max-height: none !important;

        aspect-ratio: 2 / 3 !important;

        object-fit: cover !important;
        object-position: center center !important;

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

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

        background: #1b1b1b !important;
    }

    #moviesGrid .movie-list-card .mobile-card-info {
        margin-top: 8px !important;
        padding: 0 !important;
    }

}

/* ==========================================================
   DETAIL — POSTER REKOMENDASI ROUND
   Pinggiran sama seperti poster Home
   KHUSUS rekomendasi pada halaman Detail
========================================================== */

@media (max-width: 767px) {

    #recommendedSlider .mobile-card,
    #recommendedSlider .mobile-card .trending-poster-wrap {
        overflow: hidden !important;
        border-radius: 5px !important;
    }

    #recommendedSlider .mobile-card img {
        display: block !important;
        border-radius: 5px !important;
        object-fit: cover !important;
        object-position: center center !important;
    }

}

/* ==========================================================
   DETAIL RECOMMENDATION — RADIUS SAMA SEPERTI HOME
   KHUSUS card "Rekomendasi Untuk Anda"
========================================================== */

@media (max-width: 767px) {

    .detail-recommendation-card {
        overflow: hidden !important;
        border-radius: 6px !important;
    }

    .detail-recommendation-card > img {
        display: block !important;
        border-radius: 6px !important;
        overflow: hidden !important;
    }

    .detail-recommendation-card .mobile-card-info {
        border-radius: 0 0 6px 6px !important;
    }

}


/* SAMAKAN JARAK METADATA KARTU HOME */
.mobile-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.mobile-card-meta span {
    display: inline-block;
    margin: 0;
    padding: 0;
}


/* PERBESAR JUDUL LANJUTKAN MENONTON */
#continueWatchingSlider .mobile-card-title,
#continueWatchingSlider .movie-title,
#continueWatchingSlider .card-title {
    font-size: 14px;
    line-height: 1.35;
    font-weight: 600;
}


/* Continue Watching mengikuti ukuran judul Film Terbaru */
#continueWatching .continue-title {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.35;
    margin-top: 6px;
}