/* == VARIABEL WARNA == */
:root {
    --warna-dasar: #6D0000; /* Merah Maroon yang pekat */
    --warna-aksen: #D4AF37;;  /* Emas */
    --warna-teks: #FFFFFF;    /* Putih */
    --warna-teks-gelap: #333333; /* Untuk background terang */
}
html {
    scroll-behavior: smooth;
}
/* == PENGATURAN DASAR == */
body {
    margin: 0;
    padding: 0;
    font-family: 'Roboto', Arial, sans-serif; /* Font dasar yang bersih */
    background-color: #f4f4f4; /* Background abu-abu muda untuk konten */
    color: var(--warna-teks-gelap);
    line-height: 1.6;
}

.container {
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 20px 0;
}

h1, h2, h3, h4 {
    font-family: 'Merriweather', 'Times New Roman', serif; /* Font elegan untuk judul */
}

/* == HEADER (KEPALA WEBSITE) == */
header {
    /* === PROPERTI BARU DENGAN DESAIN ANDA === */
    background-image: url('hider.png'); /* 1. Memuat gambar Anda */
    background-size: 100% 100%; /* 2. Memaksa gambar pas (stretch) */
    background-repeat: no-repeat;
    height: 90px; /* 3. Set tinggi header sesuai ukuran desktop */
    
    /* === PROPERTI LAMA YANG TETAP DIPAKAI === */
    color: var(--warna-teks);
    position: fixed; 
    top: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    
    /* Properti padding, background-color, dan border-bottom dihapus */
}

/* Mendorong konten utama ke bawah agar tidak tertutup header */
main {
    padding-top: 90px; /* Memberi jarak seukuran header Anda */
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    /* Menghapus padding ganda & memastikan lebar tetap terjaga */
    padding: 0; 
    width: 90%;
    max-width: 1100px;
    margin: 0 auto;
    height: 100%; /* <-- TAMBAHKAN BARIS INI */
}

header h1 {
    margin: 0;
    font-size: 2em;
}

/* Tambahkan ini */
header h1 a {
    color: var(--warna-aksen); /* Emas */
    text-decoration: none;
}

/* ================================== */
/* PERBAIKAN UNTUK DESKTOP NAV        */
/* ================================== */

/* Sembunyikan navigasi desktop di HP (ini mungkin sudah ada, tapi pastikan) */
@media (max-width: 768px) {
    .desktop-nav {
        display: none;
    }
    header { /* <-- TAMBAHKAN BLOK INI */
        height: 75px;
    }
}

/* Style utama untuk .desktop-nav */
.desktop-nav ul {
    margin: 0;
    padding: 0;
    list-style: none; /* <-- Ini yang menghilangkan bullet points */
    display: flex;     /* <-- Ini yang membuatnya horizontal */
}

.desktop-nav ul li {
    margin-left: 20px;
}

.desktop-nav ul li a {
    color: var(--warna-teks);
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    padding-bottom: 5px;
    transition: all 0.3s ease; /* Transisi untuk class 'active' */
}

.desktop-nav ul li a:hover,
.desktop-nav ul li a.active { /* Class 'active' dari JavaScript */
    color: var(--warna-aksen);
    border-bottom: 2px solid var(--warna-aksen);
}



/* == KONTEN UTAMA == */



/* Bagian Konten (Pengenalan, Sejarah, Fungsi) */
.content-section {
    background-color: #FFFFFF; /* Latar putih agar mudah dibaca */
    padding: 40px 0;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.content-section .container {
    padding: 0 20px;
}

.content-section h3 {
    font-size: 2em;
    color: var(--warna-dasar); /* Judul bagian warna Maroon */
    border-bottom: 2px solid var(--warna-aksen);
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.content-section ul {
    list-style-type: disc;
    margin-left: 20px;
}

/* == FOOTER (KAKI WEBSITE) == */
footer {
    /* Menggunakan desain gambar baru Anda */
    background-image: url('footer.png');
    background-size: 100% 100%; /* Paksa gambar agar pas */
    background-repeat: no-repeat;

    /* Atur tinggi (Anda bilang sedikit lebih tinggi dari header 90px) */
    height: 100px; 

    color: var(--warna-teks); /* Teks Putih */
    margin-top: 30px; /* Jarak dari konten di atas */

    /* Menengahkan teks copyright secara vertikal & horizontal */
    display: flex;
    align-items: center;
    justify-content: center;
}

footer p {
    margin: 0;
    font-size: 0.9em;
    color: var(--warna-teks); /* Pastikan teks tetap putih */

    /* Tambahkan bayangan agar teks lebih mudah terbaca di atas motif */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); 
}

/* == TAMBAHAN UNTUK HALAMAN GALERI == */

/* Judul halaman galeri */
#galeri-header {
    background-color: #fff;
    text-align: center;
    padding-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#galeri-header h3 {
    border-bottom: none; /* Hapus garis bawah di judul galeri */
    color: var(--warna-dasar); /* Maroon */
}

/* Grid untuk kartu-kartu galeri */
#galeri-grid .container {
    display: grid;
    /* Membuat 2 kolom di layar sedang/desktop */
    grid-template-columns: repeat(2, 1fr); 
    gap: 30px; /* Jarak antar kartu */
    padding-top: 30px;
}

/* Tampilan kartu galeri */
.gallery-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    overflow: hidden; /* Agar gambar tidak keluar dari radius */
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}

/* Efek hover "timbul" pada kartu galeri */
.gallery-card:hover {
    /* Mengangkat kartu sedikit ke atas */
    transform: translateY(-10px);
    
    /* Membuat bayangan lebih besar agar terlihat "terangkat" */
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

.gallery-card img {
    width: 100%;
    height: 250px; /* Atur tinggi gambar agar seragam */
    object-fit: cover; /* Memastikan gambar terisi penuh tanpa distorsi */
    display: block;
}

.gallery-card .card-content {
    padding: 20px;
    flex-grow: 1; /* Memastikan konten mengisi sisa ruang */
    display: flex;
    flex-direction: column;
}

.gallery-card h4 {
    font-size: 1.5em;
    color: var(--warna-dasar); /* Maroon */
    margin-top: 0;
    margin-bottom: 15px;
}

.gallery-card p {
    font-size: 1em;
    color: var(--warna-teks-gelap); /* Hitam */
    margin-bottom: 20px;
    flex-grow: 1; /* Mendorong tombol ke bawah */
}

/* Tombol Emas */
.btn-emas {
    display: inline-block;
    background-color: var(--warna-aksen); /* Emas */
    color: var(--warna-dasar); /* Teks Maroon */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
}

.btn-emas:hover {
    background-color: var(--warna-dasar); /* Dibalik: Maroon */
    color: var(--warna-aksen); /* Teks Emas */
}


/* == Penyesuaian untuk Layar HP (Mobile) == */
@media (max-width: 768px) {
    #galeri-grid .container {
        /* Hanya 1 kolom di layar kecil */
        grid-template-columns: 1fr;
    }
}


/* == TAMBAHAN UNTUK HALAMAN DETAIL (FOTO GALERI) == */

#detail-header {
    background-color: #fff;
    text-align: center;
    padding-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#detail-header h3 {
    border-bottom: none;
    color: var(--warna-dasar);
}

#foto-galeri-detail {
    padding: 30px 0;
    background-color: #f9f9f9; /* Latar sedikit abu-abu */
}

#foto-galeri-detail h4 {
    font-size: 1.8em;
    color: var(--warna-dasar);
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

/* KODE BARU (SOLUSI) */
.galeri-grid-detail {
    display: grid;
    /* 4 kolom di layar besar, 2 di layar sedang, 1 di HP */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    
    /* KUNCI RAHASIA: Mencegah tetangga ikut memanjang (stretch) */
    align-items: start; 
}

.galeri-item img {
    width: 100%;
    height: 200px; /* Tinggi seragam */
    object-fit: cover; /* Foto akan ter-crop rapi */
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s, box-shadow 0.3s;
}

.galeri-item img:hover {
    transform: scale(1.05); /* Efek zoom saat disentuh */
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    cursor: pointer;
}

/* Penjelasan Teks Detail */
#detail-teks h5 {
    font-size: 1.3em;
    color: #6D0000; /* Emas */
    font-family: 'Merriweather', serif;
    margin-top: 25px;
    margin-bottom: 10px;
}

#detail-teks ul {
    list-style-type: disc;
    margin-left: 20px;
    line-height: 1.8;
}

/* == TAMBAHAN UNTUK HALAMAN STORYTELLING (VIDEO 9:16) == */

/* Judul halaman (Sama seperti sebelumnya, opsional jika sudah ada) */
#story-header {
    background-color: #fff;
    text-align: center;
    padding-bottom: 20px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

#story-header h3 {
    border-bottom: none;
    color: var(--warna-dasar);
}

/* == CSS UNTUK FOTO UTAMA HALAMAN DETAIL (VERSI SERAGAM) == */
.main-house-image {
    width: 90%;        /* Lebar relatif */
    max-width: 900px;  /* Batas lebar maksimal */
    
    /* === KUNCI KESERAGAMAN === */
    height: 500px;     /* Tinggi TETAP untuk semua rumah adat */
    /* ========================= */
    
    margin: 30px auto 40px auto; /* Posisi tengah */
    border-radius: 12px; /* Sudut melengkung */
    overflow: hidden;    /* Pastikan gambar tidak keluar garis */
    box-shadow: 0 8px 20px rgba(0,0,0,0.2); /* Bayangan */
    background-color: #f0f0f0; /* Warna latar jika gambar loading */
}

.main-house-image img {
    width: 100%;
    height: 100%;
    
    /* === KUNCI AGAR TIDAK GEPENG === */
    object-fit: cover;    /* Mengisi penuh kotak dan memotong sisanya */
    object-position: center; /* Fokus ke tengah gambar */
    /* =============================== */
    
    display: block;
}

/* Penyesuaian untuk Layar HP (Agar tidak terlalu tinggi) */
@media (max-width: 768px) {
    .main-house-image {
        width: 95%;
        height: 250px; /* Tinggi dikurangi untuk HP */
    }
}

/* Penyesuaian responsif untuk gambar utama di mobile */
@media (max-width: 768px) {
    .main-house-image {
        width: 95%; /* Lebih lebar di HP */
        margin: 20px auto 30px auto;
    }
}

/* Grid untuk galeri video */
#video-gallery {
    background-color: #f4f4f4; /* Latar abu-abu muda */
}

.video-grid-916 {
    display: grid;
    /* 3 kolom di desktop, 2 di tablet */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    padding: 30px 0;
}

.video-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    padding: 20px;
    transition: all 0.3s ease;
    cursor: pointer;
}

/* Efek hover "timbul" pada kartu video */
.video-card:hover {
    /* Mengangkat kartu */
    transform: translateY(-10px);
    
    /* Membuat bayangan lebih besar dan pekat */
    box-shadow: 0 12px 28px rgba(0,0,0,0.2);
}

.video-card h5 {
    font-size: 1.3em;
    color: var(--warna-dasar);
    margin-top: 0;
    text-align: center;
    margin-bottom: 15px;
}

/* === PENANGANAN VIDEO 9:16 (PALING PENTING) === */

.video-embed-vertical {
    position: relative;
    width: 100%;
    background-color: #000;
    border-radius: 8px;
    overflow: hidden;
    
    /* Di DESKTOP: Kita beri tinggi tetap agar tidak terlalu 
       panjang ke bawah. Video 9:16 akan tampil 'pillarboxed' 
       (garis hitam di kiri-kanan) secara otomatis oleh iframe.
    */
    height: 550px; 
}


/* Di HP (layar di bawah 768px):
   Kita ubah perilakunya agar videonya pas 9:16.
*/
@media (max-width: 768px) {
    .video-grid-916 {
        grid-template-columns: 1fr; /* 1 kolom di HP */
    }

    .video-embed-vertical {
        /* Ini adalah trik aspect-ratio: 
           (16 / 9) * 100% = 177.78% 
        */
        padding-bottom: 177.78%; 
        height: 0; /* Tinggi di-nol-kan, diganti padding */
    }
    
    /* iframe akan mengisi penuh container 9:16 */
    .video-embed-vertical iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* == CSS UNTUK HERO SLIDESHOW BARU == */

#hero-slideshow {
    width: 100%;
    height: 500px; /* Atur tinggi slideshow Anda di sini */
    position: relative;
    margin: 0;
    padding: 0;
}

.slideshow-container {
    width: 100%;
    height: 100%;
    position: relative;
    background-color: #333; /* Warna jaga-jaga jika gambar gagal dimuat */
    overflow: hidden;

    /* --- TAMBAHAN BARU: EFEK BAYANGAN EMAS --- */
    
    /* 1. Membuat sudut sedikit melengkung agar bayangan terlihat bagus */
    border-radius: 0 0 15px 15px;

    /* 2. Efek Cahaya Emas (Glowing) */
    /* Urutan: offset-x | offset-y | blur | spread | warna */
    box-shadow: 
        0 4px 30px rgba(0, 0, 0, 0.5), /* Bayangan hitam untuk kedalaman */
        0 0 25px 5px rgba(212, 175, 55, 0.8); /* Cahaya Emas di sekelilingnya */
}


/* Sembunyikan slides by default */
.mySlides {
    display: none;
    width: 100%;
    height: 100%;
    position: absolute;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    display: none;
}

.mySlides img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memastikan gambar menutupi area, ter-crop rapi */
    filter: brightness(60%); /* Gelapkan gambar agar teks terbaca */
}

/* Teks di atas slideshow */
.hero-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 80%;
}

.hero-text h2 {
    font-size: 2.8em;
    color: var(--warna-aksen); /* Emas */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.7); /* Bayangan agar teks jelas */
    margin: 0;
    font-family: 'Merriweather', 'Times New Roman', serif;
}

/* Titik-titik navigasi */
.dot-container {
    text-align: center;
    position: absolute;
    bottom: 60px; /* Jarak dari bawah */
    width: 100%;
}

.dot {
    height: 15px;
    width: 15px;
    margin: 0 5px;
    background-color: #bbb;
    border-radius: 50%;
    display: inline-block;
    transition: background-color 0.6s ease;
}

.active-dot, .dot:hover {
    background-color: var(--warna-aksen); /* Emas */
    cursor: pointer;
}

/* (BARU) Class untuk slide yang sedang MASUK */
.slide-in {
    display: block;
    z-index: 2; /* Posisikan di atas slide lama */
    animation-name: slideInRight;
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
}

/* (BARU) Class untuk slide yang sedang KELUAR */
.slide-out {
    display: block; /* Tetap terlihat saat animasi keluar */
    z-index: 1; /* Posisikan di belakang slide baru */
    animation-name: slideOutLeft; /* Animasi keluar */
    animation-duration: 0.8s;
    animation-timing-function: ease-in-out;
}

/* (BARU) Keyframes untuk MASUK */
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}

/* (BARU) Keyframes untuk KELUAR */
@keyframes slideOutLeft {
    from { transform: translateX(0); }
    to { transform: translateX(-100%); } /* Geser ke kiri */
}

/* Penyesuaian Responsif untuk HP */
@media (max-width: 768px) {
    #hero-slideshow {
        height: 400px; /* Buat lebih pendek di HP */
    }
    .hero-text h2 {
        font-size: 2em; /* Kecilkan font judul di HP */
    }
}

/* == CSS UNTUK LIGHTBOX GALERI FOTO == */

/* Tambahkan kursor pointer ke gambar galeri */
#foto-galeri-detail .galeri-item img {
    cursor: pointer; /* Mengubah kursor jadi tangan saat di atas gambar */
}

/* Latar belakang modal (overlay) */
.lightbox-modal {
    display: none; /* Sembunyi by default */
    position: fixed; /* Tetap di layar */
    z-index: 2000; /* Di atas segalanya (header kita 1000) */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* Scroll jika gambar besar */
    background-color: rgba(0, 0, 0, 0.9); /* Hitam transparan */
    padding-top: 75px; /* Jarak dari atas */
}

/* Konten Modal (gambar) */
.lightbox-content {
    margin: auto;
    display: block;
    width: auto; /* Lebar otomatis */
    height: 85%; /* Tinggi disesuaikan */
    max-width: 700px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Gambar di dalam Modal */
#lightboxImage {
    width: 100%;
    height: 100%;
    object-fit: contain; /* Paling penting: gambar utuh, tidak terpotong */
    display: block;
}

/* Tombol Close (X) */
.close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
    cursor: pointer;
    z-index: 2001;
}

.close-btn:hover,
.close-btn:focus {
    color: #bbb;
    text-decoration: none;
}

/* Tombol Prev/Next */
.prev-btn,
.next-btn {
    cursor: pointer;
    position: absolute;
    top: 50%;
    width: auto;
    padding: 16px;
    margin-top: -50px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: 0.6s ease;
    border-radius: 0 3px 3px 0;
    user-select: none; /* Agar tidak ter-highlight */
    z-index: 2001;
}

/* Posisi tombol Next */
.next-btn {
    right: 0;
    border-radius: 3px 0 0 3px;
}

/* Posisi tombol Prev */
.prev-btn {
    left: 0;
}

.prev-btn:hover,
.next-btn:hover {
    background-color: rgba(0, 0, 0, 0.6); /* Latar hitam saat hover */
}

/* Penyesuaian untuk HP */
@media (max-width: 700px) {
    .lightbox-content {
        width: 95%; /* Gambar lebih lebar di HP */
        height: auto;
    }
    .prev-btn, .next-btn {
        font-size: 24px;
    }
}

/* == CSS UNTUK HEADER RESPONSIVE == */

/* Sembunyikan ikon hamburger di desktop */
.hamburger-icon {
    display: none;
    font-size: 30px;
    color: var(--warna-aksen);
    cursor: pointer;
}

/* Menu Overlay Mobile (Sidenav) */
.nav-overlay {
    height: 100%;
    width: 0; /* Lebar 0 by default (tersembunyi) */
    position: fixed;
    z-index: 2000; /* Di atas segalanya */
    top: 0;
    left: 0;
    background-color: var(--warna-dasar); /* Merah Maroon */
    overflow-x: hidden; /* Sembunyikan scroll horizontal */
    transition: 0.5s; /* Animasi slide */
    box-shadow: 5px 0 15px rgba(0,0,0,0.5);
}

.nav-overlay-content {
    position: relative;
    top: 25%; /* Posisikan di tengah */
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

.nav-overlay a {
    padding: 15px;
    text-decoration: none;
    font-size: 20px;
    color: var(--warna-teks); /* Putih */
    display: block; /* Tampil vertikal */
    transition: 0.3s;
}

.nav-overlay a:hover,
.nav-overlay a:focus {
    color: var(--warna-aksen); /* Emas saat hover */
}

/* Tombol Close (X) di Sidenav */
.nav-overlay .close-btn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 50px;
}

/* == MEDIA QUERY UNTUK HP == */
/* Ini akan aktif jika layar lebih kecil dari 768px */
@media (max-width: 768px) {
    
    /* 1. Sembunyikan navigasi desktop */
    .desktop-nav {
        display: none;
    }
    
    /* 2. Tampilkan ikon hamburger */
    .hamburger-icon {
        display: block;
    }
    
    /* 3. Kecilkan judul website di HP */
    header h1 {
        font-size: 1.5em;
    }
    
    /* 4. Sesuaikan padding header di HP */
    main {
        padding-top: 60px; /* Kurangi padding-top main */
    }
}

/* == CSS UNTUK KARTU FUNGSI DI HALAMAN BERANDA == */

/* Grid container */
.function-grid {
    display: grid;
    /* Otomatis responsif: 
       - 4 kolom di layar lebar
       - 2 kolom di tablet
       - 1 kolom di HP
    */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px; /* Jarak antar kartu */
    margin-top: 30px; /* Jarak dari paragraf di atas */
}

/* Tampilan kartu */
.function-card {
    background-color: #FFFFFF;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 25px;
    /* Aksen emas di atas kartu, selaras dengan tema */
    border-top: 5px solid var(--warna-aksen); 
    transition: all 0.3s ease;
}

/* Efek hover "timbul" yang sama dengan galeri */
.function-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* Judul di dalam kartu */
.function-card h4 {
    font-family: 'Merriweather', serif;
    color: var(--warna-dasar); /* Merah Maroon */
    font-size: 1.3em;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Teks di dalam kartu */
.function-card p {
    font-size: 1em;
    color: var(--warna-teks-gelap);
    line-height: 1.6;
    margin-bottom: 0;
}

/* Mengubah ukuran font "Makna dan Struktur" */
#detail-teks h4 {
    font-size: 1.8em; /* Ukuran aslinya sekitar 1.5em */
    color: var(--warna-dasar); /* Menyesuaikan warna jadi Maroon */
}

/* == CSS UNTUK NAVIGASI DROPDOWN GALERI == */

/* Wrapper untuk posisi */
.dropdown-nav {
    position: relative; /* Diperlukan agar menu muncul di bawah tombol */
    display: inline-block;
    margin-top: 20px; /* Jarak dari paragraf di atas */
}

/* Tombol Dropdown */
.dropdown-btn {
    background-color: var(--warna-dasar); /* Maroon */
    color: var(--warna-aksen); /* Emas */
    padding: 12px 20px;
    font-size: 1.1em;
    font-family: 'Roboto', sans-serif;
    font-weight: 700;
    border: 2px solid var(--warna-aksen);
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.dropdown-btn:hover {
    background-color: var(--warna-aksen);
    color: var(--warna-dasar);
}

/* Konten Dropdown (Tersembunyi by default) */
.dropdown-content {
    display: none; /* Disembunyikan */
    position: absolute; /* Muncul di atas konten lain */
    background-color: #f1f1f1;
    min-width: 220px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2);
    z-index: 10;
    border-radius: 5px;
    overflow: hidden; /* Agar link-nya ikut rounded */
    max-height: 300px; /* Atur tinggi maksimal (misal 300px) */
    overflow-y: auto;  /* Tambahkan scrollbar jika melebihi */
}

/* Link di dalam Dropdown */
.dropdown-content a {
    color: var(--warna-teks-gelap);
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {
    background-color: #ddd;
}

/* Class "show" ini akan ditambahkan oleh JavaScript */
.show {
    display: block;
}

/* Meng-override .container agar teks di footer jadi ke tengah */
footer .container {
    text-align: center; /* Ini akan menengahkan <p> di dalam container */
    padding: 0;         /* Menghapus padding atas/bawah dari container standar */
    width: 100%;        /* Memastikan container mengisi ruang */
}

/* == CSS UNTUK MODAL VIDEO LAYAR PENUH == */

/* Latar belakang modal (overlay) */
.video-lightbox-modal {
    display: none; /* Sembunyi by default */
    position: fixed;
    z-index: 2000; /* Di atas segalanya */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
   background-color: rgba(109, 0, 0, 0.85);
}

/* Konten (penampung player) */
.video-lightbox-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* Atur rasio 9:16 */
    width: 50.625vh; /* 9/16 * 90vh (90% tinggi viewport) */
    height: 90vh;
    max-width: 90vw; /* Tidak boleh lebih lebar dari 90% lebar layar */
    border-radius: 15px;
    overflow: hidden;
}

/* Penampung player (harus diatur agar iframe pas) */
#video-lightbox-player {
    width: 100%;
    height: 100%;
}

/* Tombol Close (X) */
.video-close-btn {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2002;
}

/* Tombol Navigasi Atas/Bawah (Prev/Next) */
.v-prev-btn,
.v-next-btn {
    cursor: pointer;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: auto;
    padding: 16px;
    color: white;
    font-weight: bold;
    font-size: 30px;
    transition: color 0.6s ease, opacity 0.3s ease;
    user-select: none;
    z-index: 2001;
}

/* Posisi Tombol Atas (Prev) */
.v-prev-btn {
    top: 10px;
    transform: translateX(-50%) rotate(90deg); /* Putar panah */
}

/* Posisi Tombol Bawah (Next) */
.v-next-btn {
    bottom: 10px;
    transform: translateX(-50%) rotate(90deg); /* Putar panah */
}

.v-prev-btn:hover,
.v-next-btn:hover {
    color: var(--warna-aksen); /* Warna Emas */
}

/* Penyesuaian di HP (player jadi full width) */
@media (max-width: 768px) {
    .video-lightbox-content {
        width: 100vw;
        height: 100vh;
        max-width: 100vw;
    }
}

/* == CSS UNTUK THUMBNAIL VIDEO STORYTELLING == */

/* 1. Atur iframe agar pas di dalam container 9:16 */
.video-embed-vertical iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* (PENTING) Nonaktifkan klik pada iframe */
    pointer-events: none; 
}

/* 2. Atur overlay transparan */
.video-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5; /* Posisikan di atas iframe */
    cursor: pointer; /* Kursor sudah diatur di .video-card */
}

/* == CSS UNTUK HIGHLIGHT CTA DI BERANDA (VERSI SEDERHANA) == */

#cta-highlights {
    background-color: #f4f4f4; 
    padding: 20px 0;
    text-align: center;
}

#cta-highlights h3 {
    font-size: 2em;
    color: var(--warna-dasar); /* Maroon */
    margin-top: 0;
    margin-bottom: 10px;
}

#cta-highlights p {
    font-size: 1.1em;
    margin-bottom: 30px;
    color: var(--warna-teks-gelap);
}

.cta-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px; /* Ini akan memberi JARAK antar kartu */
    max-width: 1100px; 
    margin: 0 auto; 
}

/* KARTU CTA (VERSI SEDERHANA) */
.cta-card {
    background-color: #FFFFFF; /* Latar belakang PUTIH */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    padding: 30px;
    text-align: left; 
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
    border-top: 5px solid var(--warna-aksen); /* Aksen Emas */
}

.cta-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.cta-card h4 {
    color: var(--warna-dasar); /* Warna MAROON (bisa terbaca) */
    font-size: 1.5em;
    margin-top: 0;
    margin-bottom: 15px;
}

.cta-card p {
    color: var(--warna-teks-gelap); /* Warna HITAM (bisa terbaca) */
    font-size: 1em;
    margin-bottom: 25px;
    flex-grow: 1; 
}

/* Tombol */
.cta-card .btn-emas {
    display: inline-block; 
    align-self: flex-start; 
}

/* (BARU) Class untuk menyembunyikan tombol video modal */
.controls-hidden {
    opacity: 0;
    pointer-events: none; /* Menonaktifkan klik saat tersembunyi */
}

/* == CSS UNTUK TOMBOL CTA DI BAWAH SEJARAH == */
.cta-button-wrapper {
    text-align: left; /* Menengahkan tombol */
    margin-top: 40px;   /* Jarak dari paragraf di atas */
}

/* == CSS UNTUK SUB-JUDUL H6 DI HALAMAN DETAIL == */

#detail-teks h6 {
    font-family: 'Roboto', sans-serif; /* Beda font dari h5 agar jelas */
    font-size: 1.1em; /* Sedikit lebih kecil dari h5 (1.3em) */
    font-weight: 700; /* Bold */
    color: var(--warna-teks-gelap); /* Hitam pekat agar mudah dibaca */
    margin-top: 20px; /* Jarak dari atas */
    margin-bottom: 10px; /* Jarak ke paragraf di bawahnya */
    border-bottom: 1px solid #eee; /* Garis bawah tipis */
    padding-bottom: 5px;
}

/* == TOMBOL PANAH DIANTARA BATAS (GAYA BADGE) == */

.scroll-down-btn {
    position: absolute;
    left: 50%;
    /* Menggeser ke tengah horizontal */
    transform: translateX(-50%); 
    
    /* KUNCI UTAMA: Nilai negatif membuat tombol turun melewati batas */
    bottom: -30px; 
    
    z-index: 20; /* Pastikan di atas elemen lain */
    
    /* Membuat bentuk lingkaran putih */
    width: 60px;
    height: 60px;
    background-color: #ffffff; /* Latar Putih agar kontras */
    border: 4px solid var(--warna-aksen); /* Bingkai Emas agar menyatu */
    border-radius: 50%; /* Membuat jadi bulat */
    
    /* Menengahkan ikon panah di dalam lingkaran */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    
    text-decoration: none;
    color: var(--warna-aksen); /* Warna Ikon Emas */
    font-size: 18px; /* Ukuran ikon disesuaikan agar pas di lingkaran */
    
    box-shadow: 0 4px 10px rgba(0,0,0,0.2); /* Bayangan agar terlihat timbul */
    transition: all 0.3s ease;
}

.scroll-down-btn:hover {
    transform: translateX(-50%) scale(1.1); /* Efek membesar saat hover */
    background-color: var(--warna-aksen); /* Berubah jadi emas saat hover */
    color: #ffffff; /* Ikon jadi putih */
    border-color: #ffffff; /* Border jadi putih */
}

/* Memastikan animasi panah tetap jalan di dalam lingkaran */
.scroll-down-btn i {
    display: block;
    animation: scrollChevron 2s infinite ease-out;
}

/* Sedikit penyesuaian animasi agar pas di dalam lingkaran kecil */
@keyframes scrollChevron {
    0% { opacity: 0; transform: translateY(-5px); }
    50% { opacity: 1; transform: translateY(0px); }
    100% { opacity: 0; transform: translateY(5px); }
}

.scroll-down-btn i {
    display: block; /* Agar masing-masing panah punya baris sendiri */
    opacity: 0; /* Mulai dari tersembunyi */
    transform: translateY(-20px); /* Mulai dari atas */
    animation: scrollChevron 2s infinite ease-out;
}

/* Penundaan untuk panah kedua */
.scroll-down-btn i:nth-child(2) {
    animation-delay: 0.3s;
}

.scroll-down-btn:hover {
    color: var(--warna-teks); /* Putih saat hover */
}

@keyframes scrollChevron {
    0% { opacity: 0; transform: translateY(-20px); }
    30% { opacity: 1; transform: translateY(0); }
    70% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(20px); }
}

/* == (BARU) PERBAIKAN SCROLL JANGKAR (ANCHOR) == */
/* Memberi jarak di atas section saat di-scroll */

section[id] {
    scroll-margin-top: 90px;
}

@media (max-width: 768px) {
    section[id] {
        scroll-margin-top: 75px;
    }
}

/* == CSS UNTUK "H7" (SUB-JUDUL KECIL) == */

.h7-judul {
    font-family: 'Roboto', sans-serif;
    font-size: 1em; /* Sedikit lebih kecil dari h6 (1.1em) */
    font-weight: 700; /* Tetap tebal (Bold) */
    color: #555; /* Abu-abu tua, sedikit lebih terang dari hitam */
    margin-top: 10px; /* Jarak dari atas */
    margin-bottom: 5px; /* Jarak ke teks di bawahnya */
    letter-spacing: 1px; /* Sedikit renggang */
}

/* == CSS UNTUK KARTU KEGIATAN (KARTU KECIL HORIZONTAL) == */

.activity-grid {
    display: grid;
    /* Membuat 3 kolom otomatis yang responsif */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px; /* Jarak antar kartu */
    margin-top: 30px;
    margin-bottom: 40px; /* Jarak ke tombol "Cari Rumah Adat" */
}

.activity-card {
    background-color: #fff;
    padding: 15px 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    display: flex; /* Agar ikon dan teks sejajar horizontal */
    align-items: center;
    border-left: 4px solid var(--warna-aksen); /* Garis emas di kiri */
    transition: transform 0.2s ease;
}

.activity-card:hover {
    transform: translateY(-3px); /* Efek naik sedikit saat di-hover */
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.act-icon {
    font-size: 24px;
    margin-right: 15px; /* Jarak antara ikon dan teks */
}

.activity-card p {
    margin: 0;
    font-size: 0.95em;
    font-weight: 500;
    color: var(--warna-teks-gelap);
    text-align: left; /* Pastikan teks rata kiri */
}

/* Penyesuaian untuk HP agar tidak terlalu lebar */
@media (max-width: 768px) {
    .activity-grid {
        grid-template-columns: 1fr; /* 1 kolom di HP */
    }
}

/* == CSS UNTUK LAPISAN SWIPE VIDEO == */
#video-swipe-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Pastikan berada DI ATAS iframe video */
    background-color: transparent; /* Tidak terlihat */
    cursor: pointer;
}

/* == CSS UNTUK IKON PLAY/PAUSE DI VIDEO MODAL == */


#play-pause-icon i {
    display: none; /* Sembunyikan kedua ikon secara default */
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* Bayangan agar lebih jelas */
}


/* == CSS UNTUK ANIMASI GESER VIDEO == */

/* Class ini ditambahkan via JS saat jari dilepas agar gerakannya halus */
.smooth-snap {
    transition: transform 0.3s ease-out !important;
}

/* Pastikan posisi default video di tengah */
.video-lightbox-content {
    /* Pastikan transisi default dimatikan saat drag agar responsif */
    transition: none; 
}



/* == CSS UNTUK TOMBOL FULL SCREEN KUSTOM == */

#fullscreen-toggle {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 20; /* Harus lebih tinggi dari swipe layer (10) dan ikon play (15) */
    color: white;
    font-size: 24px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.3s, transform 0.2s;
    
    /* Agar bayangan ikon terlihat jelas di video terang */
    text-shadow: 0 2px 5px rgba(0,0,0,0.5);
}

#fullscreen-toggle:hover {
    opacity: 1;
    transform: scale(1.1);
}

/* Class tambahan untuk menyembunyikan tombol ini bersama panah navigasi */
.controls-hidden #fullscreen-toggle {
    opacity: 0;
    pointer-events: none;
}

/* == CSS UNTUK TOMBOL BOOKING WA == */

/* Wrapper agar tombol sejajar */
.card-buttons {
    display: flex;
    gap: 10px; /* Jarak antar tombol */
    flex-wrap: wrap; /* Agar tombol turun ke bawah jika layar HP sempit */
    margin-top: auto; /* Mendorong tombol ke bawah jika konten teks pendek */
}

/* Style Tombol WA */
.btn-wa {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px; /* Jarak ikon WA dan teks */
    background-color: #25D366; /* Warna Hijau WhatsApp Resmi */
    color: #FFFFFF; /* Teks Putih */
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: 700;
    font-family: 'Roboto', sans-serif;
    text-align: center;
    transition: background-color 0.3s, transform 0.2s;
    flex: 1; /* Agar kedua tombol punya lebar seimbang */
}

.btn-wa:hover {
    background-color: #128C7E; /* Hijau lebih gelap saat hover */
    transform: translateY(-2px);
    color: #FFFFFF;
}

/* Penyesuaian agar btn-emas juga seimbang */
.card-buttons .btn-emas {
    flex: 1;
    text-align: center;
}

/* == CSS UNTUK TOMBOL BOOKING MELAYANG (VERSI KECIL) == */

.floating-booking-btn {
    position: fixed;
    bottom: 20px; /* Jarak dari bawah sedikit dikurangi */
    right: 20px;  /* Jarak dari kanan sedikit dikurangi */
    z-index: 99; 
    
    background-color: #25D366; 
    color: white;
    font-weight: bold;
    text-decoration: none;
    
    /* === UKURAN DIPERKECIL DI SINI === */
    padding: 8px 16px; /* Lebih kecil (sebelumnya 12px 20px) */
    font-size: 14px;   /* Font lebih kecil */
    /* ================================ */
    
    border-radius: 50px; 
    box-shadow: 0 3px 8px rgba(0,0,0,0.3);
    font-family: 'Roboto', sans-serif;
    
    display: flex; /* Agar ikon dan teks sejajar rapi */
    align-items: center;
    gap: 8px; /* Jarak antara ikon dan teks */

    /* Keadaan Awal: Tersembunyi */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px); 
    transition: all 0.4s ease;
}

/* Pengaturan Ikon WA */
.floating-booking-btn i {
    font-size: 18px; /* Ukuran ikon sedikit lebih besar dari teks agar jelas */
}

.floating-booking-btn:hover {
    background-color: #128C7E;
    transform: scale(1.05) translateY(0) !important; 
}

/* Class untuk memunculkan tombol */
.show-floating-btn {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* == CSS UNTUK SECTION LOKASI == */

.lokasi-grid {
    display: grid;
    /* 2 kolom: Info (kecil) dan Peta (besar) */
    grid-template-columns: 1fr 1.5fr; 
    gap: 30px;
    align-items: center;
    margin-top: 30px;
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.lokasi-info h4 {
    font-size: 1.5em;
    color: var(--warna-dasar);
    margin-top: 0;
}

.lokasi-info p {
    font-size: 1em;
    color: var(--warna-teks-gelap);
    margin-bottom: 15px;
}

/* Agar peta responsif & sudutnya melengkung */
.lokasi-map iframe {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Penyesuaian Tombol dengan Ikon */
.lokasi-info .btn-emas i {
    margin-right: 8px;
}

/* Responsif untuk HP: Tumpuk ke bawah */
@media (max-width: 768px) {
    .lokasi-grid {
        grid-template-columns: 1fr; /* 1 kolom */
    }
    .lokasi-map iframe {
        height: 250px; /* Tinggi peta di HP */
    }
}

/* == CSS ANIMASI HALUS GALERI FOTO (DIPERBAIKI) == */

/* Animasi Keluar (Menghilang) */
.anim-out-left { animation: fadeOutLeft 0.3s forwards; }
.anim-out-right { animation: fadeOutRight 0.3s forwards; }

/* Animasi Masuk (Muncul) */
.anim-in-left { animation: fadeInLeft 0.3s forwards; }
.anim-in-right { animation: fadeInRight 0.3s forwards; }

/* Keyframes */
@keyframes fadeOutLeft {
    to { opacity: 0; transform: translateX(-50px); }
}
@keyframes fadeOutRight {
    to { opacity: 0; transform: translateX(50px); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translateX(-50px); }
    to { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(50px); }
    to { opacity: 1; transform: translateX(0); }
}

/* == CSS KHUSUS HALAMAN FULL GALERI (TANPA TEKS) == */

/* Header Judul Tengah */
#gallery-only-header {
    text-align: center;
    padding: 40px 0 20px 0;
    background-color: #fff;
}

#gallery-only-header h3 {
    font-size: 2.2em;
    color: var(--warna-dasar);
    margin-bottom: 10px;
}

#gallery-only-header .subtitle {
    font-size: 1.1em;
    color: #666;
    font-style: italic;
    margin-bottom: 20px;
}

/* Garis Pemanis Emas */
.gold-divider {
    border: 0;
    height: 4px;
    width: 100px; /* Pendek saja di tengah */
    background-color: var(--warna-aksen);
    margin: 0 auto; /* Tengah */
    border-radius: 2px;
}

/* Grid Galeri Besar */
.big-gallery-grid {
    display: grid;
    /* Grid lebih besar: minimal 300px (biasanya 250px) */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
    padding-bottom: 50px;
}

/* Menggunakan ulang style .galeri-item tapi memperbesar gambarnya */
.big-gallery-grid .galeri-item img {
    height: 300px; /* Lebih tinggi dari detail biasa (200px) */
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.big-gallery-grid .galeri-item img:hover {
    transform: scale(1.03); /* Zoom sedikit */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2);
}

/* Responsif di HP */
@media (max-width: 768px) {
    .big-gallery-grid {
        grid-template-columns: 1fr; /* 1 kolom penuh di HP */
    }
    .big-gallery-grid .galeri-item img {
        height: 250px; /* Sedikit lebih kecil di HP */
    }
}

/* == CSS UNTUK TOMBOL BOOKING DI HEADER GALERI == */

.header-cta {
    margin-top: 20px;   /* Jarak dari teks di atas */
    margin-bottom: 30px; /* Jarak ke garis emas di bawah */
    text-align: center;  /* Pastikan tombol di tengah */
}

/* Opsional: Jika ingin tombolnya sedikit lebih besar di header */
.header-cta .btn-emas {
    padding: 12px 30px;
    font-size: 1.1em;
}


#video-seekbar-fill {
    width: 0%; /* Lebar awal 0 */
    height: 100%;
    background-color: #ff0000; /* Warna Merah YouTube */
    transition: width 0.1s linear; /* Gerakan mulus */
}

/* == CSS DIPERBAIKI: INTERAKSI VIDEO & SEEKBAR == */

/* 1. Container Ikon Play/Pause (Sekarang bisa diklik) */
#play-pause-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15; 
    
    /* (PENTING) Agar bisa diklik user */
    pointer-events: auto; 
    cursor: pointer;
    
    font-size: 60px; 
    color: rgba(255, 255, 255, 0.9); 
    
    /* Transisi halus saat muncul/hilang */
    transition: opacity 0.3s ease, transform 0.2s;
}

/* Efek saat ikon ditekan */
#play-pause-icon:active {
    transform: translate(-50%, -50%) scale(0.9);
}

/* 2. Seekbar (Membesar saat aktif) */
#video-seekbar-container {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    
    /* Tinggi default (saat kontrol hilang) */
    height: 4px; 
    
    background-color: rgba(255, 255, 255, 0.3); 
    z-index: 25; 
    cursor: pointer;
    transition: height 0.3s ease; /* Animasi membesar */
}

#video-seekbar-fill {
    width: 0%;
    height: 100%;
    background-color: #ff0000; 
    transition: width 0.1s linear;
}

/* 3. Class Logika: Saat kontrol AKTIF/MUNCUL */
/* Kita akan menambahkan class 'user-active' ke parent utama via JS */

/* Saat aktif: Seekbar membesar */
.video-lightbox-content.user-active #video-seekbar-container {
    height: 12px; /* Membesar jadi 12px */
}

/* Saat aktif: Tombol & Ikon Muncul */
.video-lightbox-content.user-active #play-pause-icon,
.video-lightbox-content.user-active .v-prev-btn,
.video-lightbox-content.user-active .v-next-btn,
.video-lightbox-content.user-active #fullscreen-toggle {
    opacity: 1;
    pointer-events: auto;
}

/* Saat TIDAK aktif (Diam): Sembunyikan semua */
.video-lightbox-content:not(.user-active) #play-pause-icon,
.video-lightbox-content:not(.user-active) .v-prev-btn,
.video-lightbox-content:not(.user-active) .v-next-btn,
.video-lightbox-content:not(.user-active) #fullscreen-toggle {
    opacity: 0;
    pointer-events: none;
}

/* == CSS HALAMAN DETAIL ARTIKEL (UPDATE) == */

/* Container Utama Artikel */
.detail-content {
    max-width: 900px;
    margin: 40px auto; /* Tengah secara horizontal */
    padding: 0 20px;
    text-align: center; /* Judul & Gambar di tengah */
}

/* Judul Artikel */
.detail-content h2 {
    font-family: 'Merriweather', serif;
    color: #800000;
    margin-bottom: 30px;
    font-size: 2rem;
    line-height: 1.4;
}

/* GAMBAR DETAIL (REVISI) */
.detail-featured-image {
    display: block;          /* Pastikan block agar margin auto bekerja */
    width: 100%;             /* Lebar WAJIB penuh container */
    height: 70vh;            /* Tinggi DIPAKSA 70% layar */
    
    object-fit: cover;       /* KUNCI RAHASIA: Memastikan gambar mengisi area tanpa gepeng (akan ter-crop sedikit) */
    object-position: center; /* Fokus tengah (bisa diganti 'top' atau 'bottom') */
    
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    margin-bottom: 30px;
}

/* Text Paragraf (Rata Kiri-Kanan) */
.detail-content p {
    text-align: justify;
    line-height: 1.8;
    font-size: 1.1rem;
    margin-bottom: 20px;
}

/* Styling Item Galeri agar Rapi */
.gallery-item {
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    margin-bottom: 20px; /* Jarak antar baris jika di mobile */
}

.gallery-item img {
    width: 100%;
    height: 250px;       /* KUNCI 1: Paksa semua gambar tingginya 250px (bisa diubah) */
    object-fit: cover;   /* KUNCI 2: Potong sisa gambar agar tidak gepeng */
    object-position: center; /* Fokus ke tengah gambar */
    display: block;
    
    /* Tambahkan transisi agar efek hover tetap jalan */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* --- ACCORDION VERSI PAKSA (MENGHILANGKAN KOTAK) --- */

.caption-btn {
    /* !important memaksa browser menghapus warna latar & garis */
    background-color: transparent !important; 
    border: none !important;
    border-bottom: 1px solid #eee !important; /* Hanya sisakan garis bawah tipis */
    box-shadow: none !important; /* Hapus bayangan jika ada */
    
    width: 100%;
    padding: 15px 5px;
    text-align: left;
    font-weight: bold;
    color: var(--warna-dasar);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Roboto', sans-serif;
    margin-bottom: 0;
}

.caption-text {
    background-color: transparent !important; /* Hapus latar */
    border: none !important; /* Hapus garis */
    box-shadow: none !important;
    
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s ease-out;
}

/* === MENGEMBALIKAN EFEK HOVER (ZOOM) === */

/* 1. Pastikan transisi halus selalu aktif */
.gallery-item img {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer; /* Ubah kursor jadi tangan */
}

/* 2. Saat mouse di atas gambar, lakukan Zoom & Bayangan */
.gallery-item:hover img {
    transform: scale(1.05); /* Perbesar gambar 5% */
    box-shadow: 0 8px 25px rgba(0,0,0,0.2); /* Bayangan lebih tebal */
}

/* 3. (Opsional) Agar tombol caption tidak ikut membesar/aneh */
.gallery-item .caption-wrapper {
    position: relative;
    z-index: 2; /* Pastikan tombol tetap di atas */
}

.modal {
    position: fixed;
    z-index: 9999; /* Pastikan di paling atas */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.9); /* Latar belakang hitam */
    overflow: auto; 
}

/* --- Layout Sejarah (Revisi: Gambar Lebih Kecil & Ada Caption) --- */
.sejarah-row {
    display: flex;
    align-items: flex-start; /* Mengubah jadi 'flex-start' agar sejajar dengan ATAS teks */
    gap: 30px; /* Jarak antar teks dan gambar */
    margin-bottom: 50px; /* Jarak antar bagian */
}

.sejarah-text {
    flex: 1; /* Teks mengambil sisa ruang */
}

.sejarah-text h4 {
    margin-top: 0;
}

/* --- PERBAIKAN: EFEK ZOOM & CAPTION BERSIH --- */

/* 1. Wadah Utama (Hanya untuk tata letak, TANPA KOTAK) */
.sejarah-image-wrapper {
    /* Hapus overflow: hidden agar bayangan gambar tidak terpotong */
    overflow: visible !important; 
    
    /* HAPUS SEMUA EFEK KOTAK DI SINI */
    box-shadow: none !important; 
    border-radius: 0 !important;
    background-color: transparent !important;
    
    /* Pastikan layout tetap rapi */
    flex: 0 0 300px;
    max-width: 100%;
    text-align: center;
    cursor: pointer;
}

/* 2. Gambar (Di sinilah efek kotak & zoom dipasang) */
.sejarah-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
    
    /* PINDAHKAN EFEK BINGKAI KE SINI */
    border-radius: 8px; /* Sudut melengkung hanya di gambar */
    box-shadow: 0 4px 10px rgba(0,0,0,0.15); /* Bayangan hanya di gambar */
    
    /* Animasi Zoom */
    transition: transform 0.5s ease, box-shadow 0.3s ease;
}

/* 3. Efek Saat Mouse Diarahkan (Hover) */
.sejarah-image-wrapper:hover img {
    /* Gambar membesar sedikit (Pop-up) */
    transform: scale(1.05); 
    
    /* Bayangan makin tebal saat di-hover */
    box-shadow: 0 10px 20px rgba(0,0,0,0.25);
}

/* 4. Caption (Sudah pasti bersih karena di luar gambar) */
.img-caption {
    margin-top: 15px; /* Beri jarak agar tidak tertutup saat gambar membesar */
    font-size: 13px;
    color: #666;
    font-style: italic;
    line-height: 1.4;
}

/* --- Tampilan HP (Responsif) --- */
@media (max-width: 768px) {
    .sejarah-row {
        flex-direction: column; /* Tumpuk ke bawah di HP */
        margin-bottom: 30px;
    }
    
    .sejarah-image-wrapper {
        flex: none;
        width: 100%;         /* Di HP gambar jadi lebar penuh */
        margin-top: 15px; /* Jarak antara akhir teks dan mulai gambar */
        margin-bottom: 10px; /* Jarak tambahan sedikit di bawah */
    }
}

/* Style untuk Sumber Gambar */
.img-source {
    display: block;       /* Memastikan teks sumber ada di baris baru */
    font-size: 11px;      /* Ukuran font lebih kecil dari caption */
    color: #999;          /* Warna abu-abu muda agar tidak mencolok */
    font-style: normal;   /* Huruf tegak (tidak miring seperti caption) */
    margin-top: 4px;      /* Jarak sedikit dari caption */
    letter-spacing: 1px;  /* Memberi jarak antar huruf */
}

/* Warna Emas untuk Teks Menu Aktif di HP */
.nav-overlay a.active {
    color: var(--warna-aksen) !important; /* Warna Emas */
    font-weight: bold;
    border-left: 4px solid var(--warna-aksen); /* Garis emas kecil di kiri */
    background-color: rgba(0, 0, 0, 0.2); /* Sedikit gelap di belakangnya */
}

/* === PERBAIKAN FUNGSI ACCORDION (WAJIB ADA) === */

/* === FIX FINAL: TEKNIK MAX-HEIGHT (PALING RINGAN & MULUS) === */

/* 1. Wadah Masker */
.caption-text {
    /* GANTI GRID JADI BLOCK BIASA (Lebih Ringan) */
    display: block;
    
    /* Mulai dari tinggi 0 */
    max-height: 0;
    overflow: hidden;
    
    /* Animasi pada max-height dan opacity */
    transition: max-height 0.5s ease-out, opacity 0.4s ease;
    
    opacity: 0;
    background-color: transparent !important;
    border: none !important;
}

/* 2. Isi Paragraf */
.caption-text p {
    margin: 0 !important;
    /* Padding sudah dipasang permanen, tidak perlu dianimasikan */
    padding: 15px 5px 10px 5px; 
    
    /* Membantu render teks lebih tajam saat animasi */
    transform: translateZ(0);
}

/* 3. Keadaan AKTIF (Terbuka) */
.caption-text.active {
    /* Kita beri batas tinggi aman (misal 500px). 
       Browser akan meng-animasikan dari 0 ke tinggi asli teks, 
       selama tingginya di bawah 500px. */
    max-height: 500px; 
    opacity: 1;
}

/* 4. Ikon Panah */
.caption-btn i {
    transition: transform 0.3s ease;
}
.caption-btn.active i {
    transform: rotate(180deg);
}