/* ==========================================================
   HANNANET MOVIE MOBILE
   HERO CSS
   Version : 2.0
========================================================== */


/* ==========================================
   HERO
========================================== */

.mobile-hero{

    position:relative;

    width:100%;

    height:320px;

    overflow:hidden;

    background:#000;

}


/* ==========================================
   HERO IMAGE
========================================== */

.mobile-hero img{

    width:100%;

    height:100%;

    object-fit:cover;

    object-position:center;

    transform:scale(1.03);

    transition:opacity .35s ease;

}

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

.mobile-hero::before{

    content:"";

    position:absolute;

    inset:0;

    z-index:1;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.98) 0%,
        rgba(0,0,0,.82) 25%,
        rgba(0,0,0,.35) 55%,
        rgba(0,0,0,.10) 100%
    );

}


/* ==========================================
   CONTENT
========================================== */

.mobile-hero-content{

    position:absolute;

    left:18px;

    right:18px;

    bottom:22px;

    z-index:2;

}


/* ==========================================
   BADGE
========================================== */

.mobile-hero-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:5px 12px;

    margin-bottom:14px;

    border-radius:999px;

    background:rgba(229,9,20,.95);

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:.4px;

}


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

.mobile-hero-title{

    color:#fff;

    font-size:32px;

    font-weight:800;

    line-height:1.15;

    margin:0 0 10px;

}


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

.mobile-hero-meta{

    display:flex;

    flex-wrap:wrap;

    gap:10px;

    color:#d8d8d8;

    font-size:13px;

    font-weight:500;

    margin-bottom:14px;

}


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

.mobile-hero-description{

    color:#d0d0d0;

    font-size:13px;

    line-height:1.6;

    margin-bottom:18px;

    display:-webkit-box;

    -webkit-line-clamp:2;

    -webkit-box-orient:vertical;

    overflow:hidden;

}


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

.mobile-hero-buttons{

    display:flex;

    gap:12px;

}


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

.mobile-play-btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:48px;

    border-radius:12px;

    background:#e50914;

    color:#fff;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

}


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

.mobile-detail-btn{

    flex:1;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    height:48px;

    border-radius:12px;

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

    backdrop-filter:blur(8px);

    color:#fff;

    font-size:15px;

    font-weight:700;

    text-decoration:none;

}


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

.mobile-play-btn:active,

.mobile-detail-btn:active{

    transform:scale(.98);

}

/* ==========================================
   HERO INDICATOR
========================================== */

.hero-indicators{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:8px;

    margin-top:18px;

}

.hero-dot{

    width:8px;

    height:8px;

    border-radius:50%;

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

    transition:.30s;

}

.hero-dot.active{

    width:22px;

    border-radius:999px;

    background:#ffffff;

}


/* ==================================================
   HERO BANNER - NAIK KE ATAS
================================================== */

.mobile-hero {
    margin-top: 0 !important;
}

.mobile-home .mobile-hero {
    margin-top: 0 !important;
}



/* ==================================================
   HERO TYPOGRAPHY - FINAL RAPiH
================================================== */

.mobile-hero-content{
    left:18px !important;
    right:18px !important;
    bottom:20px !important;

    display:flex;
    flex-direction:column;
    align-items:flex-start;

    text-align:left;
}


/* BADGE */

.mobile-hero-badge{
    font-size:11px !important;
    font-weight:700 !important;

    padding:4px 10px !important;
    margin-bottom:8px !important;
}


/* JUDUL FILM */

.mobile-hero-title{
    font-size:28px !important;
    line-height:1.15 !important;

    font-weight:800 !important;

    margin:0 0 7px !important;

    max-width:90%;

    text-align:left;
}


/* INFO */

.mobile-hero-meta{
    display:flex !important;

    align-items:center;
    flex-wrap:wrap;

    gap:7px !important;

    margin:0 0 8px !important;

    font-size:11px !important;
    line-height:1.3 !important;

    color:#d0d0d0 !important;
}


/* DESKRIPSI */

.mobile-hero-description{
    font-size:12px !important;
    line-height:1.45 !important;

    margin:0 0 12px !important;

    max-width:92%;

    display:-webkit-box !important;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;

    overflow:hidden;

    color:#d8d8d8 !important;

    text-align:left;
}


/* TOMBOL */

.mobile-hero-buttons{
    display:flex !important;

    width:100%;

    gap:8px !important;

    margin:0 !important;
}


.mobile-hero-buttons a,
.mobile-hero-buttons button{
    height:38px !important;

    min-height:38px !important;

    padding:0 16px !important;

    border-radius:9px !important;

    font-size:12px !important;

    font-weight:700 !important;
}


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

@media (max-width:480px){

    .mobile-hero-content{
        left:16px !important;
        right:16px !important;
        bottom:18px !important;
    }

    .mobile-hero-title{
        font-size:25px !important;
        margin-bottom:6px !important;
    }

    .mobile-hero-meta{
        font-size:10px !important;
        gap:6px !important;
        margin-bottom:7px !important;
    }

    .mobile-hero-description{
        font-size:11px !important;
        line-height:1.4 !important;

        max-width:95%;

        margin-bottom:10px !important;
    }

    .mobile-hero-buttons{
        gap:7px !important;
    }

    .mobile-hero-buttons a,
    .mobile-hero-buttons button{
        height:36px !important;
        min-height:36px !important;

        padding:0 14px !important;

        font-size:11px !important;
    }

}


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

@media (max-width:360px){

    .mobile-hero-title{
        font-size:23px !important;
    }

    .mobile-hero-description{
        font-size:10.5px !important;
        max-width:100%;
    }

    .mobile-hero-buttons a,
    .mobile-hero-buttons button{
        height:34px !important;
        min-height:34px !important;

        padding:0 12px !important;

        font-size:10px !important;
    }

}



/* ==================================================
   HERO INDICATOR - POSISI TENGAH
================================================== */

.hero-indicators{
    position:absolute !important;

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

    transform:translateX(-50%) !important;

    bottom:10px !important;

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

    width:auto !important;

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



/* ==================================================
   HERO INDICATOR - CENTER & TIDAK MENABRAK TOMBOL
================================================== */

.mobile-hero-content{
    bottom:38px !important;
}


.hero-indicators{
    position:absolute !important;

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

    bottom:8px !important;

    width:max-content !important;

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

    transform:translateX(-50%) !important;

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

    gap:6px !important;

    z-index:5 !important;
}


/* Ukuran titik */

.hero-dot{
    width:6px !important;
    height:6px !important;

    margin:0 !important;
}


/* Titik aktif sedikit lebih jelas */

.hero-dot.active{
    width:18px !important;
    border-radius:999px !important;
}


@media (max-width:480px){

    .mobile-hero-content{
        bottom:38px !important;
    }

    .hero-indicators{
        bottom:7px !important;
        gap:5px !important;
    }

    .hero-dot{
        width:5px !important;
        height:5px !important;
    }

    .hero-dot.active{
        width:15px !important;
    }

}


/* ==================================================
   FINAL HERO DOT POSITION
================================================== */

.hero-indicators {
    left: 50% !important;
    right: auto !important;
    bottom: 3px !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

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

    gap: 5px !important;
    z-index: 10 !important;
}

.hero-dot {
    width: 5px !important;
    height: 5px !important;
    margin: 0 !important;
}

.hero-dot.active {
    width: 14px !important;
    height: 5px !important;
}


/* ==================================================
   FINAL HERO DOT POSITION
================================================== */

.hero-indicators {
    left: 50% !important;
    right: auto !important;
    bottom: 3px !important;
    transform: translateX(-50%) !important;

    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;

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

    gap: 5px !important;
    z-index: 10 !important;
}

.hero-dot {
    width: 5px !important;
    height: 5px !important;
    margin: 0 !important;
}

.hero-dot.active {
    width: 14px !important;
    height: 5px !important;
}


/* ==========================================
   HERO INDICATOR - TENGAH DI BAWAH TOMBOL
========================================== */

.mobile-hero-content .hero-indicators {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    bottom: auto !important;

    transform: none !important;

    width: 100% !important;

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

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

    gap: 5px !important;

    z-index: 10 !important;
}

.mobile-hero-content .hero-dot {
    width: 5px !important;
    height: 5px !important;
    margin: 0 !important;
}

.mobile-hero-content .hero-dot.active {
    width: 14px !important;
    height: 5px !important;
}


/* ==========================================
   HERO RAPAT KE HEADER
========================================== */

.mobile-home .mobile-hero {
    margin-top: 0 !important;
}


/* ==========================================
   TURUNKAN SEMUA KONTEN HERO
========================================== */

.mobile-hero-content {
    bottom: 10px !important;
}


/* ==========================================
   TURUNKAN SEMUA KONTEN HERO
========================================== */

.mobile-hero-content {
    bottom: 10px !important;
}