
<style>
    a.meta-link{
        color:var(--accent);
        text-decoration:none;
    }
    a.meta-link:hover{ text-decoration:underline; }

    .movie-hero{display:flex;gap:20px;margin-bottom:18px;}
    .movie-poster{flex:0 0 185px;}
    .movie-poster img{width:100%;border-radius:12px;display:block;box-shadow:0 10px 30px rgba(0,0,0,.75);}
    .movie-main{flex:1;min-width:0;}
    .movie-title{font-size:24px;font-weight:800;margin-bottom:6px;line-height:1.25;}
    .movie-tagline{font-size:14px;color:var(--muted);margin-bottom:6px;}
    .movie-meta-row{font-size:13px;color:var(--muted);margin-bottom:12px;}
    .movie-meta-row span+span::before{content:"•";margin:0 6px;opacity:.7;}

    .rating-wrap{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
    .rating-main{background:#c62828;border-radius:10px;padding:6px 10px;font-weight:700;display:flex;align-items:center;gap:6px;}
    .rating-value{font-size:18px;}
    .rating-stars{font-size:13px;}
    .rating-extra{font-size:11px;color:var(--muted);}

    .genre-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px;font-size:12px;}
    .genre-pill{border-radius:999px;border:1px solid rgba(255,255,255,.18);padding:4px 9px;display:inline-block;}

    .quick-answer{margin:0 0 18px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);padding:12px 12px;}
    .qa-title{font-size:14px;font-weight:800;margin-bottom:6px;letter-spacing:.2px;}
    .qa-text{font-size:13px;color:var(--muted);line-height:1.6;margin-bottom:10px;}
    .qa-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:12px;align-items:start;}
    @media(max-width:900px){ .qa-grid{grid-template-columns:1fr;} }
    .qa-box{background:rgba(0,0,0,.25);border-radius:12px;padding:10px 10px;border:1px solid rgba(255,255,255,.08);}
    .qa-box h3{font-size:12px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:8px;}
    .providers{display:flex;flex-wrap:wrap;gap:8px;}
    .prov{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:999px;border:1px solid rgba(255,255,255,.14);font-size:12px;color:var(--muted);background:rgba(0,0,0,.18);}
    .prov img{width:18px;height:18px;border-radius:4px;object-fit:cover;}
    .qa-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px;}

    .tabs{margin-top:18px;border-bottom:1px solid rgba(255,255,255,.12);}
    .tab-buttons{display:flex;gap:10px;}
    .tab-btn{padding:8px 16px;font-size:13px;border-radius:6px 6px 0 0;background:transparent;border:none;cursor:pointer;color:var(--muted);}
    .tab-btn.active{background:var(--accent);color:#000;font-weight:700;}
    .tab-panels{padding-top:18px;}
    .tab-panel{display:none;}
    .tab-panel.active{display:block;}

    .section-subtitle{font-size:16px;margin-bottom:8px;}
    .synopsis-text{font-size:14px;line-height:1.7;color:var(--muted);margin-bottom:14px;}

    .backdrop-strip{margin-top:16px;display:flex;gap:10px;overflow-x:auto;padding-bottom:4px;}
    .backdrop-strip img{height:200px;border-radius:10px;flex:0 0 auto;object-fit:cover;}

    .cast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
    .cast-card{display:flex;gap:8px;background:rgba(0,0,0,.35);border-radius:10px;padding:6px 8px;}
    .cast-img{flex:0 0 60px;}
    .cast-img img{width:60px;height:60px;border-radius:8px;object-fit:cover;}
    .cast-info{font-size:12px;}
    .cast-name{font-weight:600;margin-bottom:2px;}
    .cast-role{color:var(--muted);}

    .faq-block{margin-top:24px;}
    .faq-item{margin-bottom:10px;}
    .faq-q{font-weight:600;font-size:14px;margin-bottom:4px;}
    .faq-a{font-size:13px;color:var(--muted);}

    .movie-side-row{display:grid;grid-template-columns:minmax(0,2.5fr) minmax(0,1.5fr);gap:24px;margin-top:18px;}
    @media(max-width:900px){ .movie-side-row{grid-template-columns:1fr;} }
    .side-box{background:rgba(255,255,255,.03);border-radius:10px;padding:10px 12px;font-size:13px;margin-bottom:10px;}
    .side-box h3{font-size:13px;margin-bottom:6px;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);}
    .side-box ul{list-style:none;margin:0;padding:0;}
    .side-box li{margin-bottom:4px;}

    @media(max-width:768px){
        .movie-hero{flex-direction:column;}
        .movie-poster{flex:0 0 auto;max-width:200px;}
        .qa-grid{grid-template-columns:1fr;}
    }

    .watch-btn{
        display:inline-block;background:var(--accent);color:#000;
        padding:10px 18px;border-radius:12px;font-weight:800;font-size:14px;
        text-decoration:none;box-shadow:0 6px 18px rgba(255,23,68,.35);
        transition:background .15s, transform .15s;
    }
    .watch-btn:hover{background:#ff4569;transform:translateY(-2px);}

.trailer-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    border-radius: 10px;
}

.trailer-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.qa-actions {
    margin-top: 20px;
    display: flex;
    justify-content: center; 
}

.watch-btn {
    padding: 10px 20px;
    background: #ff0000;
    color: #fff;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    transition: 0.3s ease;
}

.watch-btn:hover {
    background: #cc0000;
}

.gallery-box .backdrop-strip {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}

.gallery-box img {
    width: 100%;
    border-radius: 8px;
    height: 120px;        /* Diperkecil */
    object-fit: cover;
    transition: transform 0.3s ease;
}

.gallery-box img:hover {
    transform: scale(1.05);
}

/* Responsive */
@media (max-width: 900px) {
    .qa-grid {
        grid-template-columns: 1fr; /* Stack mobile */
    }

    .gallery-box img {
        height: 100px;
    }
}
.image-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    inset: 0;
    background: rgba(0,0,0,0.92);
    backdrop-filter: blur(4px);
    animation: fadeIn .25s ease;
}

.image-modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.image-modal img {
    max-width: 90%;
    max-height: 85vh;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,.7);
    animation: zoomIn .25s ease;
}

.close-modal {
    position: absolute;
    top: 20px;
    right: 35px;
    color: #fff;
    font-size: 38px;
    cursor: pointer;
    opacity: .8;
    transition: .2s;
}

.close-modal:hover {
    opacity: 1;
    transform: scale(1.1);
}

@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}
}

@keyframes zoomIn {
    from {transform:scale(.85);}
    to {transform:scale(1);}
}
</style>