/* ==================================== */
/* == RESPONSIVE STYLES (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {
    
    .navbar {
        padding: 15px 20px; /* Kurangi padding di navbar */
    }

    /* --- Aktivasi Hamburger Menu --- */
    .hamburger-menu {
        display: block; /* Tampilkan tombol hamburger */
    }

    .nav-menu {
        position: fixed; /* Menu menjadi full-screen tersembunyi */
        top: 0;
        left: -100%; /* Sembunyikan di luar layar kiri */
        width: 100%;
        height: 100vh; /* Tinggi penuh */
        background-color: rgba(17, 24, 39, 0.98); /* Latar belakang gelap transparan */
        backdrop-filter: blur(5px);
        display: flex;
        flex-direction: column; /* Susun link & auth ke bawah */
        align-items: center;
        justify-content: center;
        transition: left 0.3s ease-in-out;
        z-index: 1000;
        padding-top: 80px; /* Beri jarak dari atas */
    }

    .nav-menu.active {
        left: 0; /* Tampilkan menu saat 'active' */
    }

    .nav-links {
        flex-direction: column; /* Susun link ke bawah */
        text-align: center;
        gap: 30px;
    }

    .nav-links a {
        font-size: 1.5rem; /* Perbesar font link di menu mobile */
    }

    .auth-links {
        margin-top: 40px; /* Jarak dari nav-links */
        text-align: center;
        font-size: 1.2rem;
    }

    /* --- Hero Section --- */
    .hero-content {
        padding: 60px 20px;
    }
    .hero-content h1 {
        font-size: 36px; /* Kecilkan judul hero */
    }
    .hero-content p {
        font-size: 16px;
    }

    /* --- Partners Section --- */
    .partners-content {
        padding: 50px 20px 80px;
    }

    .section-title::before,
    .section-title::after {
        display: none; /* Sembunyikan garis hiasan di mobile */
    }

    .partners-grid {
        flex-direction: column; /* Susun partner ke bawah */
        align-items: center;
        gap: 25px;
    }

    .partner-item,
    .partner-item.rekreasi,
    .partner-item.dmc {
        /* Samakan semua ukuran partner item */
        width: 90%; 
        max-width: 400px; /* Batas lebar maksimum */
        height: 220px; /* Samakan tinggi */
    }
}

/* ==================================== */
/* == RESPONSIVE STYLES (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {
    .hero-content h1 {
        font-size: 28px; /* Kecilkan lagi judul */
    }
    .cta-text {
        font-size: 1rem;
    }
    .btn-cta {
        font-size: 1rem;
        padding: 12px 25px;
    }
    .partner-item,
    .partner-item.rekreasi,
    .partner-item.dmc {
        height: 180px; /* Kecilkan lagi tinggi kartu */
    }
}

/* ==================================== */
/* == RESPONSIVE STYLES (FOOTER) == */
/* ==================================== */
@media (max-width: 900px) {
    .footer-container {
        padding: 40px 20px; /* Kurangi padding di mobile */
    }

    .footer-content {
        flex-direction: column; /* Susun vertikal */
        align-items: flex-start; /* Rata kiri */
        gap: 40px;
    }

    /* Semua bagian footer jadi lebar penuh */
    .footer-logo-container,
    .contact-info,
    .map-container {
        flex-basis: 100%;
        width: 100%;
    }
}

/* ==================================== */
/* == RESPONSIVE - HALAMAN HOTEL (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {
    
    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-section {
        padding: 40px 20px; /* Kurangi padding horizontal */
    }

    .destinasi-content {
        flex-direction: column; /* Susun grid dan teks secara vertikal */
        gap: 30px;
    }

    .destinasi-grid {
        grid-template-columns: 1fr; /* Grid menjadi 1 kolom saja */
        width: 100%;
        gap: 20px;
    }

    .hotel-item {
        height: 200px; /* Sedikit perbesar tinggi kartu saat 1 kolom */
    }

    .deskripsi-text {
        font-size: 18px; /* Kecilkan sedikit font deskripsi */
    }


    /* 2. Bagian Join With Us */
    .join-us-content {
        width: 90%; /* Perlebar kontainer agar tidak terlalu sempit */
    }

    .video-placeholder,
    .video-placeholder video {
        height: 220px; /* Kurangi tinggi video */
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN HOTEL (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .hotel-item {
        height: 180px; /* Kecilkan lagi tinggi kartu hotel */
        font-size: 18px;
    }

    .deskripsi-text {
        font-size: 16px; /* Kecilkan lagi font deskripsi agar mudah dibaca */
    }


    /* 2. Bagian Join With Us */
    .video-placeholder,
    .video-placeholder video {
        height: 180px; /* Samakan tinggi dengan kartu hotel */
    }

    .register-button {
        width: 100%; /* Buat tombol memenuhi lebar kontainer */
        padding: 15px;
        font-size: 1rem;
    }
}

/* ==================================== */
/* == RESPONSIVE - HALAMAN RESTAURANT (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-section.destinasi-restaurant-section {
        padding: 40px 20px; /* Kurangi padding */
    }

    .destinasi-content.destinasi-restaurant-content {
        flex-direction: column; /* Susun vertikal */
        gap: 30px;
    }


    /* 2. Bagian Join With Us */
    .join-us-content.join-us-restaurant-content .video-row {
        gap: 20px;
    }

    .join-us-content.join-us-restaurant-content .video-placeholder {
        /*
         * Biarkan flex-wrap yang mengatur.
         * Di lebar ~900px, 2 video akan muat per baris.
        */
        width: 45%; /* Buat jadi 2 kolom */
        min-width: unset; /* Hapus min-width agar bisa mengecil */
        height: 350px;
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN RESTAURANT (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-grid.restaurant-grid {
        /*
         * Di mobile, kita buat grid menjadi 1 kolom saja
         * agar gambar lebih besar dan jelas.
        */
        grid-template-columns: 1fr;
    }

    .restaurant-item {
        height: 200px; /* Sedikit perbesar tinggi saat 1 kolom */
    }

    .register-button {
        width: 100%; /* 1. Buat lebar tombol jadi 100% dari wadahnya */
        box-sizing: border-box; /* 2. Pastikan padding tidak menambah lebar */
    }

    /* 2. Bagian Join With Us */
    .join-us-content.join-us-restaurant-content .video-placeholder {
        width: 100%; /* Setiap video memenuhi lebar layar */
        height: 250px; /* Kurangi tingginya */
    }
}

/* ==================================== */
/* == RESPONSIVE - HALAMAN VENUE (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {
    
    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-section.destinasi-venue-section {
        padding: 40px 20px; /* Kurangi padding */
    }

    .destinasi-content.destinasi-venue-content {
        flex-direction: column; /* Susun vertikal */
        gap: 30px;
    }


    /* 2. Bagian Join With Us */
    .join-us-section.join-us-venue-section .join-us-content {
        width: 90%; /* Perlebar kontainer */
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN VENUE (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-grid.venue-grid {
        /*
         * Di mobile, kita buat grid menjadi 1 kolom saja
         * agar gambar lebih besar dan jelas.
        */
        grid-template-columns: 1fr;
    }

    .venue-item {
        height: 200px; /* Sedikit perbesar tinggi saat 1 kolom */
    }


    /* 2. Bagian Join With Us */
    /* * Penyesuaian untuk bagian 'Join With Us' di halaman Venue
     * sama dengan halaman Hotel.
    */
    .join-us-venue-section .video-placeholder,
    .join-us-venue-section .video-placeholder video {
        height: 180px;
    }

    /* Menggunakan solusi tombol dari sebelumnya */
    .join-us-venue-section .register-button {
        width: 100%; 
        box-sizing: border-box; 
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN REKREASI (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {
    
    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-section.destinasi-rekreasi-section {
        padding: 40px 20px; /* Kurangi padding */
    }

    .destinasi-content.destinasi-rekreasi-content {
        flex-direction: column; /* Susun vertikal */
        gap: 30px;
    }

    /* 2. Bagian Join With Us */
    .join-us-rekreasi-section .join-content .video-container video {
        /*
         * Di tablet, kita buat video menjadi 2 kolom.
         * flex-wrap akan otomatis memindahkan video ke-3 ke baris baru.
        */
        width: 45%;
        min-width: unset; /* Hapus min-width agar bisa mengecil */
        height: 350px;
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN REKREASI (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-grid.rekreasi-grid {
        /*
         * Di mobile, kita buat grid menjadi 1 kolom saja
         * agar gambar lebih besar dan jelas.
        */
        grid-template-columns: 1fr;
    }

    .rekreasi-item {
        height: 200px; /* Sedikit perbesar tinggi saat 1 kolom */
    }


    /* 2. Bagian Join With Us */
    .join-us-rekreasi-section .join-content .video-container video {
        width: 100%; /* Setiap video memenuhi lebar layar */
        height: 250px; /* Kurangi tingginya */
    }

    /* Menggunakan solusi tombol dari sebelumnya */
    .join-us-rekreasi-section .join-btn {
        width: 100%; 
        box-sizing: border-box; 
    }
}

/* ==================================== */
/* == RESPONSIVE - HALAMAN DMC (TABLET) == */
/* ==================================== */
@media (max-width: 900px) {
    
    /* 1. Bagian Destinasi & Deskripsi */
    .destinasi-section.destinasi-dmc-section {
        padding: 40px 20px; /* Kurangi padding */
    }

    .dmc-video-container {
        flex-wrap: wrap; /* Izinkan video turun ke baris baru */
    }

    .dmc-video-container .video-placeholder {
        /*
         * Di tablet, kita buat 2 video per baris.
         * Video ketiga akan otomatis turun.
        */
        width: 48%; 
    }

    .deskripsi-text.dmc-deskripsi-text {
        width: 100%; /* Deskripsi memenuhi lebar */
    }


    /* 2. Bagian Join With Us */
    .join-us-content.join-us-dmc-content {
        /*
         * Di tablet, kita ubah layout dari horizontal
         * menjadi vertikal agar tidak terlalu sempit.
        */
        flex-direction: column;
        align-items: center;
        gap: 25px;
    }

    .dmc-content-box {
        flex-basis: auto; /* Hapus basis flex agar lebarnya natural */
        width: 90%; /* Buat kartu lebih lebar */
        max-width: 500px; /* Batasi lebar maksimum */
    }
}


/* ==================================== */
/* == RESPONSIVE - HALAMAN DMC (MOBILE) == */
/* ==================================== */
@media (max-width: 480px) {

    /* 1. Bagian Destinasi & Deskripsi */
    .dmc-video-container .video-placeholder {
        width: 100%; /* Setiap video memenuhi lebar layar */
        height: 180px;
    }


    /* 2. Bagian Join With Us */
    /* Pengaturan dari tablet sudah cukup, tidak perlu diubah. */


    /* 3. Tombol Register */
    .join-us-dmc-section .register-button {
        /* Menerapkan solusi tombol yang sama */
        width: 90%;
        box-sizing: border-box;
    }
}

/* ==================================== */
/* == RESPONSIVE - TABLET (≤900px) == */
/* ==================================== */
@media (max-width: 900px) {
    .partner-container {
        flex-direction: column;
        align-items: center;
        width: 90%;
        margin: 30px auto;
        border-radius: 10px;
        overflow: hidden;
    }

    .partner-sidebar {
        width: 100%;
        padding: 30px 20px;
        text-align: center;
        border-right: none;
        border-bottom: 2px solid rgba(255,255,255,0.15);
    }

    .profile-section {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 15px;
        padding: 0;
        padding-top: 25px; /* tambah ruang atas agar logo tidak menempel */
        margin-bottom: 20px;
        border: none;
    }

    .profile-avatar {
        width: 100px;
        height: auto;
    }

    .profile-avatar img {
        max-width: 140px;
        object-fit: contain;
    }

    .profile-section h3 {
        font-size: 20px;
        margin-top: 10px;
        text-align: center;
    }

    .sidebar-btn {
        display: block;
        width: 100%;
        text-align: center;
        padding: 14px;
        font-size: 15px;
        margin: 10px 0;
        border-radius: 6px;
    }

    .partner-form-content {
        width: 100%;
        padding: 30px 40px;
        box-sizing: border-box;
    }

    .form-grid {
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    .submit-button {
        float: none;
        width: 50%;
        margin: 25px auto 0;
        display: block;
    }
}

/* ==================================== */
/* == RESPONSIVE - MOBILE (≤480px) == */
/* ==================================== */
@media (max-width: 480px) {
    .partner-container {
        flex-direction: column;
        margin: 0;
        border-radius: 0;
        width: 100%;
        box-shadow: none;
    }

    .partner-sidebar {
        padding-top: 35px; /* tambah jarak agar logo punya ruang */
    }

    .profile-avatar {
        width: 85px;
        height: auto;
    }

    .profile-avatar img {
        max-width: 100px;
    }

    .profile-section {
        gap: 10px;
        margin-bottom: 10px;
    }

    .profile-section h3 {
        font-size: 18px;
        text-align: center;
        margin-top: 8px;
    }


    .sidebar-btn {
        font-size: 14px;
        padding: 12px;
    }

    .partner-form-content {
        padding: 20px 15px;
    }

    .form-grid {
        grid-template-columns: 1fr; /* ubah ke satu kolom */
        gap: 15px;
    }

    .form-group {
        margin-bottom: 10px;
    }

    .partner-register-form h3 {
        margin-top: 15px;
        font-size: 18px;
        text-align: center;
    }

    .submit-button {
        width: 100%;
        font-size: 15px;
        padding: 12px;
        margin-top: 15px;
    }
}