/* ==========================================================
   HANNANET MOVIE
   Responsive Engine
   Version : 1.0
==========================================================*/

/* ==========================================================
   GLOBAL
==========================================================*/

*{
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
    display:block;
}

body{
    overflow-x:hidden;
}

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

.detail-content{

    padding:20px;

    padding-bottom:72px;

}

.detail-banner{

    width:100%;

    height:220px;

    overflow:hidden;

    position:relative;

}

.detail-banner img{

    width:100%;

    height:100%;

    object-fit:cover;

}

.detail-poster{

    width:130px;

    margin-top:-70px;

    position:relative;

    z-index:5;

}

.detail-poster img{

    width:100%;

    border-radius:16px;

    box-shadow:0 10px 30px rgba(0,0,0,.5);

}

.detail-title{

    margin-top:20px;

    font-size:38px;

    line-height:1.2;

}

.detail-meta{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-top:10px;

    color:#bbb;

}

.detail-buttons{

    display:flex;

    gap:15px;

    margin-top:25px;

}

.detail-buttons a{

    flex:1;

}

.detail-info{

    margin-top:35px;

}

/* ==========================================================
   TABLET
==========================================================*/

@media (min-width:768px){

.detail-content{

    max-width:900px;

    margin:auto;

}

.detail-banner{

    height:320px;

}

.detail-poster{

    width:180px;

    margin-top:-100px;

}

.detail-title{

    font-size:46px;

}

}

/* ==========================================================
   TV / ANDROID BOX
==========================================================*/

@media (min-width:1024px){

.detail-content{

    max-width:1200px;

    margin:auto;

    display:grid;

    grid-template-columns:220px 1fr;

    gap:40px;

    align-items:start;

}

.detail-banner{

    height:420px;

}

.detail-poster{

    width:220px;

    margin-top:-120px;

}

.detail-title{

    margin-top:0;

    font-size:54px;

}

.detail-meta{

    font-size:22px;

}

.detail-description{

    font-size:22px;

    line-height:1.8;

}

.detail-buttons{

    max-width:700px;

}

.detail-buttons a{

    height:64px;

    font-size:22px;

}

.detail-info{

    grid-column:1 / span 2;

}

}



/* ==========================================
   HNFLIX — PERAPIAN SINOPSIS MOBILE
========================================== */

@media (max-width: 767px){

    .detail-description{
        margin-top:16px;
        padding:14px 15px;
        background:rgba(255,255,255,.045);
        border-left:3px solid rgba(255,255,255,.22);
        border-radius:10px;

        color:#cfcfcf;
        font-size:14px;
        font-weight:400;
        line-height:1.75;
        letter-spacing:.05px;

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

}


/* ==========================================
   HNFLIX — JUDUL SINOPSIS SINGKAT
========================================== */

@media (max-width: 767px){

    .detail-description::before{
        content:"SINOPSIS SINGKAT";
        display:block;

        margin-bottom:10px;

        color:#ffffff;
        font-size:13px;
        font-weight:800;
        line-height:1.3;
        letter-spacing:.8px;
    }

}


/* ==========================================
   HNFLIX — METADATA FILM MOBILE
========================================== */

@media (max-width: 767px){

    .detail-meta{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:8px;
        margin-top:12px;
        color:#d7d7d7;
        font-size:12px;
        line-height:1.2;
    }

    .detail-meta-item{
        display:inline-flex;
        align-items:center;
        gap:6px;
        min-height:32px;
        max-width:100%;
        padding:7px 10px;

        color:#d9dce2;
        background:linear-gradient(
            135deg,
            rgba(38,43,52,.95),
            rgba(24,28,35,.95)
        );

        border:1px solid rgba(255,255,255,.13);
        border-radius:9px;
        box-sizing:border-box;
        white-space:normal;
    }

    .detail-meta-item i{
        flex:0 0 auto;
        color:#cbd1dc;
        font-size:13px;
    }

    .detail-meta-genre{
        flex:0 1 auto;
    }

    .detail-meta-quality{
        color:#ffd84d;
        border-color:rgba(255,216,77,.45);
        background:rgba(70,57,13,.28);
        font-weight:800;
    }

    .detail-meta-quality i{
        color:#ffd84d;
    }

}