/* General Styling */
body { font-family: Arial, sans-serif; background-color: #141414; color: #fff; margin: 0; }
.container { padding: 20px 5%; }

/* ================================== */
/* Navbar Styles                      */
/* ================================== */
/* Style untuk Wadah Iklan */
/* Style untuk Wadah Iklan */
.ad-container {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Beri margin & tinggi HANYA JIKA TIDAK KOSONG */
.ad-container:not(:empty) {
    margin: 20px 0;
    min-height: 90px; /* Sesuaikan dengan tinggi iklan Anda */
}
.navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; border-bottom: 1px solid #333; }
.navbar-brand a { color: #e50914; font-size: 1.8em; font-weight: bold; text-decoration: none; }
.navbar-desktop { display: flex; align-items: center; gap: 20px; flex-grow: 1; margin-left: 20px; }
.navbar-nav { display: flex; gap: 20px; }
.nav-link { color: #fff; text-decoration: none; font-size: 1em; }
.dropdown { position: relative; }
.dropdown-menu { display: none; position: absolute; background-color: #222; border: 1px solid #333; padding: 10px 0; z-index: 1000; min-width: 120px; border-radius: 4px; }
.dropdown:hover .dropdown-menu { display: block; }
.dropdown-menu a { color: #fff; padding: 8px 20px; display: block; text-decoration: none; }
.dropdown-menu a:hover { background-color: #333; }
.navbar-search-desktop { display: flex; margin-left: auto; }
.navbar-search-desktop input { background-color: #333; border: 1px solid #555; color: #fff; padding: 8px; border-radius: 3px 0 0 3px; }
.navbar-search-desktop button { background-color: #e50914; border: none; color: #fff; padding: 8px 15px; cursor: pointer; border-radius: 0 3px 3px 0; }
.navbar-actions { display: none; }

/* Sidenav (Menu Geser dari Kanan) */
.sidenav { height: 100%; width: 0; position: fixed; z-index: 1001; top: 0; right: 0; background-color: #111; overflow-x: hidden; transition: 0.3s; padding-top: 60px; }
.sidenav-content h3 { padding: 8px 8px 8px 32px; font-size: 1.2em; color: #818181; display: block; }
.sidenav-content a { padding: 8px 8px 8px 32px; text-decoration: none; font-size: 1em; color: #818181; display: block; }
.sidenav .close-btn { position: absolute; top: 0; right: 25px; font-size: 36px; text-decoration: none; color: #fff; }

/* Search Overlay */
.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.9); z-index: 1002; display: none; align-items: center; justify-content: center; }
.search-overlay.active { display: flex; }
.search-bar-mobile { display: flex; width: 80%; }
.search-bar-mobile input { width: 100%; background-color: #333; border: 1px solid #555; color: #fff; padding: 12px; border-radius: 5px 0 0 5px; font-size: 1.2em; }
.search-bar-mobile button { background-color: #e50914; border: none; color: #fff; padding: 12px 20px; cursor: pointer; border-radius: 0 5px 5px 0; font-size: 1.2em; }
.search-overlay .close-btn { position: absolute; top: 20px; right: 35px; color: #fff; font-size: 40px; text-decoration: none; }


/* ================================== */
/* Homepage Styles (Beranda)          */
/* ================================== */
.movies-section h2 { font-size: 1.5em; margin-bottom: 20px; }
.movies-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 18px; }
.movie-card { background-color: #1c1c1c; border-radius: 5px; cursor: pointer; transition: transform 0.2s ease; display: flex; flex-direction: column; }
.movie-card:hover { transform: scale(1.05); }
.card-thumbnail { position: relative; width: 100%; aspect-ratio: 2/3; overflow: hidden; border-radius: 5px 5px 0 0; }
.card-thumbnail img { width: 100%; height: 100%; object-fit: cover; }
.quality-badge, .rating-badge { position: absolute; top: 8px; background-color: rgba(0, 0, 0, 0.7); color: #fff; padding: 3px 7px; border-radius: 4px; font-size: 0.75em; font-weight: bold; z-index: 1; }
.quality-badge { left: 8px; }
.rating-badge { right: 8px; color: #f5c518; }
.card-info { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; }
.card-info .title-container { flex-grow: 1; }
.card-info h3 { font-size: 0.9em; margin: 0 0 4px 0; color: #fff; line-height: 1.3em; min-height: 2.6em; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; word-break: break-word; }
.watch-button { display: block; width: 90%; margin: 10px auto 0; padding: 7px; font-size: 0.8em; background-color: #e50914; color: #fff; text-align: center; text-decoration: none; border-radius: 4px; font-weight: bold; }
.load-more-container { text-align: center; margin-top: 30px; }
#loadMoreBtn { background-color: #333; color: #fff; border: 1px solid #555; padding: 10px 25px; font-size: 1em; border-radius: 5px; cursor: pointer; }


/* ================================== */
/* Playback Page Styles               */
/* ================================== */
.playback-container { max-width: 850px; margin: 20px auto; padding: 0 15px; box-sizing: border-box; }
.video-container { position: relative; width: 100%; padding-top: 56.25%; background-color: #000; border-radius: 8px; }
.responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; border: none; border-radius: 8px; }
.movie-info-box { padding: 20px; background-color: #1c1c1c; border-radius: 8px; margin-top: 20px; }
.movie-info-box h1 { font-size: 2.2em; margin: 0 0 10px 0; }
.meta-info { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; flex-wrap: wrap; }
.meta-badge { background-color: #333; padding: 4px 10px; border-radius: 5px; font-size: 0.85em; font-weight: bold; }
.meta-badge.rating { background-color: #f5c518; color: #000; }
.meta-badge-ss { border: 1px solid #777; color: #777; padding: 3px 9px; border-radius: 5px; font-size: 0.85em; font-weight: bold; }
.action-buttons { display: flex; gap: 15px; margin-bottom: 25px; }
.action-buttons a { display: inline-flex; align-items: center; justify-content: center; padding: 12px 20px; border-radius: 5px; text-decoration: none; font-weight: bold; font-size: 1em; transition: transform 0.2s ease; }
.action-buttons a:hover { transform: scale(1.05); }
.action-buttons .icon { margin-right: 8px; }
.btn-main { background-color: #e50914; color: #fff; }
.btn-secondary { background-color: #454545; color: #fff; }
.movie-description { font-size: 1em; line-height: 1.6; color: #ccc; border-top: 1px solid #333; padding-top: 20px; }
.movie-details { margin-top: 20px; border-top: 1px solid #333; padding-top: 20px; font-size: 0.9em; }
.movie-details p { margin: 0 0 10px 0; color: #aaa; }
.movie-details strong { color: #fff; }
.recommendations-section { margin-top: 40px; }


/* ================================== */
/* Scroll to Top Button Styles        */
/* ================================== */

#scrollTopBtn {
    display: none; /* Sembunyi secara default */
    position: fixed; /* Tetap di posisi yang sama saat di-scroll */
    bottom: 20px;
    right: 30px;
    z-index: 999; /* Muncul di atas konten lain */
    border: none;
    outline: none;
    background-color: #e50914; /* Warna merah */
    color: white;
    cursor: pointer;
    padding: 10px;
    border-radius: 50%; /* Membuatnya bulat */
    width: 50px;
    height: 50px;
    font-size: 24px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
    transition: opacity 0.3s, transform 0.3s; /* Transisi untuk muncul/hilang */
    opacity: 0; /* Mulai dengan transparan */
    transform: translateY(10px); /* Mulai dari sedikit di bawah */
}

/* Style saat tombol ditampilkan oleh JavaScript */
#scrollTopBtn.show {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

#scrollTopBtn:hover {
    background-color: #f6121d; /* Warna sedikit lebih terang saat hover */
}

/* ================================== */
/* RESPONSIVE DESIGN (MOBILE)         */
/* HARUS SELALU ADA DI PALING BAWAH   */
/* ================================== */
@media (max-width: 768px) {
    .navbar-desktop { display: none; }
    .navbar-actions { display: flex; align-items: center; gap: 15px; }
    .action-btn, .mobile-menu-toggle { display: flex; background: none; border: none; color: #fff; font-size: 1.5em; cursor: pointer; }
    .mobile-menu-toggle { flex-direction: column; gap: 4px; }
    .mobile-menu-toggle .bar { width: 22px; height: 3px; background-color: #fff; border-radius: 2px; }

    /* Penyesuaian Beranda Mobile */
    .movies-grid { grid-template-columns: repeat(3, 1fr); gap: 10px; }
    .card-info { padding: 8px; }
    .card-info h3 { font-size: 0.8em; min-height: 2.4em; line-height: 1.2em; }
    .watch-button { font-size: 0.75em; padding: 6px; }

    /* Penyesuaian Playback Mobile */
    .playback-container { padding: 0 10px; }
    .movie-info-box h1 { font-size: 1.5em; }
}