/* ==========================================================
   HANNANET MOVIE MOBILE
   LAYOUT CSS
   Version : 1.0
========================================================== */

/* ==========================================
   APP
========================================== */

.mobile-app{

    width:100%;

    min-height:100vh;

    background:#0b0b0b;

}

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

.mobile-container{

    width:100%;

    max-width:100%;

    margin:0 auto;

    padding:0 16px;

}

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

.mobile-section{

    margin-top:24px;

}

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

.mobile-section-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    margin-bottom:16px;

}

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

.mobile-section-title{

    color:#ffffff;

    font-size:20px;

    font-weight:700;

}

/* ==========================================
   SECTION LINK
========================================== */

.mobile-section-link{

    color:#aaaaaa;

    font-size:14px;

}

/* ==========================================================
   HANNANET MOVIE MOBILE
   HOME LAYOUT
========================================================== */

/* ==========================================
   HOME
========================================== */

.mobile-home{

    width:100%;

    min-height:100vh;

    background:#0b0b0b;

    padding-bottom:120px;

}

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

.mobile-home .mobile-hero{

    margin-bottom:28px;

}

/* ==========================================
   SECTION SPACING
========================================== */

.mobile-home .mobile-section{

    margin-bottom:30px;

}

/* ==========================================
   LAST SECTION
========================================== */

.mobile-home .mobile-section:last-child{

    margin-bottom:0;
    padding-bottom:32px;

}

/* ==================================================
   MOVIES GRID
================================================== */

.mobile-movie-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:14px;

    padding:0 16px 90px;

}
/* ==================================================
   HOME MOVIE SLIDER - 4 KOLOM RAPI
================================================== */

.mobile-slider{
    gap:10px;
    padding-left:18px;
    padding-right:12px;
}

.mobile-slider .mobile-card{
    flex:0 0 calc((100vw - 52px) / 3);
    width:calc((100vw - 52px) / 3);
    min-width:calc((100vw - 52px) / 3);
    overflow:hidden;
}

.mobile-slider .mobile-card img{
    width:100%;
    aspect-ratio:2 / 3;
    height:auto;
    object-fit:cover;
    display:block;
    border-radius:5px;
}

.mobile-slider .mobile-card-info{
    padding-top:5px;
}

.mobile-slider .mobile-card-title{
    font-size:11px !important;
    line-height:1.25;
    font-weight:600;

    color:#fff;

    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
}

.mobile-slider .mobile-card-meta{
    margin-top:4px;
    font-size:10px !important;
    line-height:1.2;
    color:#888;
}

/* Tablet / Android Box */
@media (min-width:768px){

    .mobile-slider .mobile-card{
        flex:0 0 150px;
        width:150px;
        min-width:150px;
    }

}


/* ==================================================
   JUDUL FILM MOBILE - LEBIH JELAS
================================================== */

.mobile-slider .mobile-card-title{
    font-size:12px !important;
    line-height:1.3 !important;
    font-weight:600;
}

.mobile-slider .mobile-card-meta{
    font-size:10px !important;
    line-height:1.25;
}

@media (max-width:380px){

    .mobile-slider .mobile-card-title{
        font-size:11px !important;
    }

}