/* --- 1. Reset & Variables --- */
:root {
    --primary: #000;
    --secondary: #6a6a6a;
    --main-color: #063023;
    --accent: #01271b;
    --text: #000;
    --text-white: #fff;
    --bg: #fbfbfb;
    --nav-height: 75px;
    --bg-white: #fff;
    --red: #ff0000;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html{
    scroll-behavior: smooth;
    scroll-padding-top: var(--nav-height);
}
h2[id], h3[id], section[id] {
  scroll-margin-top: var(--nav-height); 
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    color: var(--text);
    line-height: 1.6;
    background: var(--bg);
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
}
/* margin padding */
.mt-1{
    margin-top: 10px!important;
}
.mt-2{
    margin-top: 20px!important;
}
.mt-3{
    margin-top: 30px!important;
}
.mb-1{
    margin-bottom: 10px!important;
}
.mb-2{
    margin-bottom: 20px!important;
}
.mb-3{
    margin-bottom: 30px!important;
}

a { text-decoration: none; color: inherit; transition: 0.3s; }
ul { list-style: none; }

/* --- 2. Header & Nav --- */
/* Wrapper Luar: Mengatur Background & Posisi Fixed */
.site-header {
    /* Tetap Fixed agar selalu di atas */
    
    top: 0; left: 0; right: 0;
    z-index: 1000;
    height: var(--nav-height);
    width: 100%;
    background: var(--bg-white); 
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    
    /* Transisi halus saat berubah warna */
    transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease;
}

/* KONDISI SAAT DI-SCROLL (Dikontrol via JS) */
.site-header.scrolled {
    position: fixed;
}

/* Wrapper Dalam */
.header-inner {
    max-width: 1250px;
    margin: 0 auto;
    height: 100%;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.logo img{
    height: 60px;
    display: flex;
    width: auto;
}
/* --- 3. Desktop Menu & Dropdown Effect --- */
/* =========================================
   RESET NAVIGASI UTAMA
   ========================================= */
.main-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.main-navigation ul li {
    position: relative; /* Penting untuk posisi submenu */
}

.main-navigation ul li a {
    display: block;
    text-decoration: none;
    color: var(--text);
    transition: 0.3s;
    font-weight: 600;
}
#bkcc-currency-selector{
    border-radius: 5px;
    box-shadow: 1px 1px 1px 0px #ddd;
    padding: 5px 25px 5px 10px;
    -webkit-appearance: none;
    background: url("data:image/svg+xml,%3Csvg viewBox='-102.4 -102.4 1228.80 1228.80' class='icon' version='1.1' xmlns='http://www.w3.org/2000/svg' fill='%23000000' stroke='%23000000' stroke-width='102.4'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cpath d='M903.232 256l56.768 50.432L512 768 64 306.432 120.768 256 512 659.072z' fill='%23000000'%3E%3C/path%3E%3C/g%3E%3C/svg%3E") #fff;
    background-repeat: no-repeat;
    background-position: right 7px center;
    background-size: 16px 16px;
    border: 1px solid #ccc;
    outline: none;
}
@media (max-width: 769px) {
    .btn-find-villa{
        margin-left: auto!important;
        margin-right: 15px;
    }
    #bkcc-currency-selector{
        margin-right: 20px;
    }
}
/* =========================================
   MODE DESKTOP (Layar > 768px)
   ========================================= */
@media (min-width: 769px) {
    /* 1. Layout Horizontal */
    .main-navigation {
        display: flex;
        margin-left: auto;
    }
    .main-navigation ul {
        display: flex;
        gap: 5px;
    }

    .main-navigation ul li a {
        padding: 2px 8px;
    }

    /* 2. Sembunyikan Tombol Toggle JS di Desktop */
    .dropdown-toggle {
        display: none !important;
    }

    /* 3. Style Submenu (Dropdown) */
    .main-navigation ul ul {
        display: block; /* Tetap ada di DOM */
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 200px;
        background: var(--bg-white);
        box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        border-radius: 4px;
        z-index: 999;
        
        /* Sembunyikan dengan Opacity & Visibility (Bukan display:none agar bisa animasi) */
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all 0.3s ease;
        pointer-events: none; /* Agar tidak bisa diklik saat invisible */
    }

    .main-navigation ul ul li {
        width: 100%; /* Submenu item full width */
    }

    .main-navigation ul ul li a {
        padding: 12px 20px;
        border-bottom: 1px solid #f5f5f5;
    }

    /* 4. Trigger HOVER Desktop */
    .main-navigation ul li:hover > ul {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto; /* Aktifkan klik */
    }

    /* 5. Panah Kecil Desktop (Kosmetik) */
    .main-navigation ul li.menu-item-has-children > a::after {
        content: '';
        display: inline-block;
        width: 6px; 
        height: 6px;
        border-right: 2px solid #000;
        border-bottom: 2px solid #000;
        transform: rotate(45deg) translateY(-2px);
        margin-left: 8px;
        transition: 0.3s;
    }
    
    .main-navigation ul li:hover > a::after {
        transform: rotate(225deg) translateY(-2px);
        border-color: var(--main-color);
    }

    #bkcc-currency-selector{
        margin-left: 15px;
    }
}

/* =========================================
   MODE MOBILE (Layar <= 768px)
   ========================================= */
@media (max-width: 768px) {
    /* 1. Container Menu (Off Canvas) */
    .main-navigation {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        background: var(--bg-white);
        z-index: 999;
        padding-top: 80px;
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0,0,0,0.1);
    }

    .main-navigation.active {
        transform: translateX(0);
    }

    .main-navigation ul {
        flex-direction: column;
    }

    .main-navigation ul li {
        border-bottom: 1px solid #f5f5f5;
    }

    .main-navigation ul li a {
        padding: 15px 20px;
        /* Beri ruang agar teks tidak ketutup tombol panah */
        padding-right: 60px; 
    }

    /* 2. Tombol Toggle Dropdown (Mobile Only) */
    .dropdown-toggle {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        width: 50px;
        height: 100%; /* Seukuran tinggi baris menu */
        cursor: pointer;
        border-left: 1px solid #f0f0f0;
        z-index: 10;
    }
    
    /* Icon Panah Toggle */
    .dropdown-toggle::before {
        content: '';
        position: absolute;
        top: 50%; left: 50%;
        width: 8px; height: 8px;
        border-right: 2px solid #888;
        border-bottom: 2px solid #888;
        transform: translate(-50%, -60%) rotate(45deg);
        transition: transform 0.3s;
    }

    /* Saat Toggle Diklik (Active) */
    .dropdown-toggle.toggled::before {
        transform: translate(-50%, -30%) rotate(225deg);
        border-color: var(--main-color);
    }

    /* 3. Logic Submenu Mobile (Slide Down) */
    .main-navigation ul ul {
        display: none; /* Default tersembunyi (display none agar layout rapi) */
        position: static; /* Bukan absolute, tapi nambah panjang ke bawah */
        background: #f9f9f9;
        padding-left: 20px;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    /* Matikan Hover Effect Desktop di Mobile */
    .main-navigation ul li:hover > ul {
        display: none;
    }

    /* Hanya muncul jika JS menambahkan class .submenu-open */
    .main-navigation ul li.submenu-open > ul {
        display: block;
        animation: mobileSlide 0.3s ease;
    }
}

/* Animasi Halus untuk Mobile Dropdown */
@keyframes mobileSlide {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* --- 4. Hamburger Menu (Hidden on Desktop) --- */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--primary);
    transition: 0.3s;
}

/* --- 5. Mobile Responsive (Off-Canvas / Side Menu) --- */
/* Overlay Gelap (Backdrop) */
.menu-overlay {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Hitam transparan 50% */
    z-index: 998; /* Di bawah menu, di atas konten */
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    backdrop-filter: blur(2px); /* Efek blur opsional, bisa dihapus agar lebih ringan */
}

.menu-overlay.active {
    opacity: 1;
    visibility: visible;
}
@media (max-width: 768px) {
    .menu-toggle { 
        display: flex; 
        z-index: 1000; /* Supaya tetap bisa diklik saat menu terbuka */
        position: relative;
    }

    /* UPDATE BAGIAN INI */
    .main-navigation {
        position: fixed;
        top: 0;
        
        /* Ganti Kiri jadi Kanan */
        left: auto;  /* Reset left */
        right: 0;    /* Tempel ke kanan */
        
        height: 100vh;
        width: 280px;
        background: var(--bg-white);
        z-index: 999;
        padding-top: 80px;
        
        /* LOGIC ANIMASI BARU (Dari Kanan) */
        /* 100% berarti geser ke kanan sampai keluar layar */
        transform: translateX(100%); 
        
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        
        /* Ubah arah bayangan agar muncul di sebelah kiri menu */
        box-shadow: -2px 0 10px rgba(0,0,0,0.1); 
    }

    .main-navigation.active {
        /* Kembali ke titik 0 (muncul di layar) */
        transform: translateX(0); 
    }

    .main-navigation ul {
        flex-direction: column;
        gap: 0;
    }

    .main-navigation ul li {
        width: 100%;
        border-bottom: 1px solid #f5f5f5;
    }

    .main-navigation ul li a {
        padding: 15px 25px;
        display: block;
        font-size: 1rem;
    }

    /* Submenu di Mobile (Tampil statis ke bawah) */
    .main-navigation ul ul {
        position: static;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        background: #fcfcfc;
        padding-left: 20px;
        display: none; 
        min-width: unset;
    }

    /* Hamburger Animation to X */
    .menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 6px); }
    .menu-toggle.active span:nth-child(2) { opacity: 0; }
    .menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -6px); }
}
.btn-find-villa {
    background: transparent;
    border: none;
    color: var(--text);
    border-radius: 20px;
    cursor: pointer;
    display: flex;
    margin-left: 10px;
}
.btn-find-villa .slt-icon {
    height: 22px;
}

/* --- 6. Content Container --- */
.container {
    max-width: 1250px;
    margin: 0 auto; /* Top margin kompensasi fixed header */
    padding: 0 20px;
}
.tax-container{
    margin: 40px auto;
}
/* --- 7. Grid Systems --- */

/* A. Grid Pintar (Auto-Fit) 
   Otomatis menjadi 3 kolom, 2 kolom, atau 1 kolom tergantung lebar layar.
   Tanpa perlu media query ribet. */
.grid-2{ 
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
}
.grid-3,
.grid-4 { 
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
@media (min-width: 769px) {
    .grid-4 { 
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-3 { 
        grid-template-columns: repeat(3, 1fr);
    }
}
/* B. Layout Halaman dengan Sidebar 
   (Content Kiri, Sidebar Kanan) */
.layout-sidebar,
.layout-left,
.villa-layout {
    display: grid;
    gap: 50px;
    grid-template-columns: minmax(0, 1fr);
}
/* --- bk Style Scroll Grid --- */
.bk-scroll-grid {
    display: grid;
    gap: 11px;
    padding-bottom: 20px; /* Ruang untuk bayangan/scroll */
    padding-top: 3px;
}
/* --- Tampilan Mobile: 2 Kolom + Scroll Horizontal --- */
.bk-scroll-grid {
    grid-auto-flow: column; 
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
}

/* Pastikan setiap item nurut sama aturan snap */
.bk-scroll-grid > article, 
.bk-scroll-grid > div {
    scroll-snap-align: start;
}

/* Sembunyikan Scrollbar (Opsional, biar bersih ala bk) */
.bk-scroll-grid::-webkit-scrollbar {
    display: none;
}
.bk-scroll-grid {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
    margin-right: -20px;
    padding-right: 20px;
}

@media (max-width: 768px) {
    .bk-scroll-grid {
        grid-auto-columns: calc(50% - 8px); 
    }
}
@media (min-width: 769px) {
    .bk-scroll-grid {
        grid-auto-columns: calc(25% - 15px); 
        gap: 20px;
    }
    .layout-sidebar {
        /* Desktop: Konten 70% (2fr), Sidebar 30% (1fr) */
        grid-template-columns: 2fr 350px; 
    }
    .villa-layout{
        grid-template-columns: 65% 1fr;
    }
}

/* C. Layout Halaman dengan Sidebar 
   (Content Kanan, Sidebar Kiri) */
@media (min-width: 769px) {
    .layout-left {
        grid-template-columns: 260px 2fr; 
    }
    aside#mainBookingForm {
        position: sticky;
        top: 90px;
        height: fit-content;
    }
}
/* D. Helper Class untuk Card/Kotak */
.booking-card {
    border: 1px solid #eee;
    padding: 20px;
    border-radius: 8px;
    background: var(--bg-white);
    transition: transform 0.2s;
    box-shadow: 4px 4px 10px 0px rgba(0, 0, 0, 0.05);
}

.booking-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.price-tag {
    margin-bottom: 15px;
}
.price-label{
    margin-bottom: 15px;
    font-size: 0.85rem;
}
.usp-list{
    margin-top: 20px;
    font-size: 13px;
}
.usp-list li {
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 5px;
}
.usp-list li::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 3px;
    width: 16px;
    height: 16px;
    background-repeat: no-repeat;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg id='SVGRepo_bgCarrier' stroke-width='0'%3E%3C/g%3E%3Cg id='SVGRepo_tracerCarrier' stroke-linecap='round' stroke-linejoin='round'%3E%3C/g%3E%3Cg id='SVGRepo_iconCarrier'%3E%3Cg id='Interface / Check'%3E%3Cpath id='Vector' d='M6 12L10.2426 16.2426L18.727 7.75732' stroke='%23ff5722' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}
/* --- Hero Banner --- */
.hero-banner {
    position: relative;
    min-height: 60vh; 
    display: flex;
    align-items: center;
    justify-content: center; 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    color: var(--bg-white);
    text-align: center;
}
.hero-bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.hero-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1;
}

/* Konten agar di atas overlay */
.hero-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 900px; /* Batasi lebar teks agar enak dibaca */
}

.hero-content h1 {
    font-size: 2.5rem;
    margin-bottom: 10px;
    font-weight: 700;
}

.hero-content p {
    font-size: 1.2rem;
    margin-bottom: 30px;
    opacity: 0.9;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .hero-banner {
        min-height: 400px; /* Di HP jangan terlalu tinggi */
    }
    .hero-content h1 {
        font-size: 1.8rem;
    }
}

/* --- Bento Grid (Desktop Default) --- */
.gallery-container {
    max-width: 1250px;
    margin: 20px auto;
    position: relative;
    padding: 0 20px;
}

.gallery-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr; /* Kiri besar, kanan grid */
    grid-template-rows: 200px 200px;    /* Tinggi fix 2 baris */
    gap: 8px;
    border-radius: 12px;
    overflow: hidden;
}

/* Gambar Utama (Kiri) */
.item-0 {
    grid-column: 1 / 2;
    grid-row: 1 / 3; /* Full tinggi */
}

/* Style Umum Item */
.gallery-item {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.gallery-item:hover img {
    transform: scale(1.05);
}

/* grid gallery */
.uniform-grid {
    display: grid;
    gap: 10px; /* Jarak antar gambar */
    
    /* DESKTOP: 4 Kolom, lebar sama rata */
    grid-template-columns: repeat(4, 1fr);
    
    /* Baris otomatis menyesuaikan rasio gambar, atau dipaksa tingginya */
    grid-auto-rows: 125px; 
}

.gallery-tile {
    position: relative;
    display: block;
    overflow: hidden;
    border-radius: 8px; 
    background: #000;
}
.gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Agar gambar full kotak */
    transition: transform 0.3s ease;
    opacity: 0.85;
}

.gallery-tile:hover img{
    transform: scale(1.05); /* Efek zoom dikit */
    opacity: 1!important;
}

/* --- Styling Overlay (Tombol Show All) --- */
.overlay-trigger {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Hitam transparan */
    color: var(--bg-white);
    display: flex; /* Flexbox untuk tengahin teks */
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background 0.3s;
    z-index: 3;
}

.overlay-trigger:hover {
    background: rgba(0, 0, 0, 0.3);
}

/* Default Visibility Logic */
.mobile-trigger { display: none; } /* Sembunyikan trigger mobile di desktop */
.desktop-trigger { display: flex; } /* Tampilkan trigger desktop */


/* --- RESPONSIF MOBILE --- */
@media (max-width: 768px) {
    .uniform-grid {
        /* MOBILE: 2 Kolom */
        grid-template-columns: repeat(2, 1fr);
        
        /* Tinggi baris di HP bisa agak kecil biar muat */
        grid-auto-rows: 150px;
    }

    /* Logic Menyembunyikan Gambar ke-7 dan ke-8 di Mobile */
    /* nth-child(n+7) artinya: elemen anak ke-7, 8, dst. */
    .gallery-tile:nth-child(n+9) {
        display: none;
    }

    /* Tukar Logic Overlay */
    .mobile-trigger { display: flex; } /* Munculkan trigger di gambar ke-6 */
}

/* --- Tampilan Tombol --- */

/* 1. Tombol Desktop (Hanya muncul di desktop) */
.desktop-gallery-overlay {
    position: absolute;
    bottom: 20px;
    right: 20px;
    z-index: 10;
}
.desktop-overlay-trigger::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    transition: 0.3s;
}
.show-all-btn {
    background: var(--bg-white);
    color: #333;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
}
.mobile-gallery-btn {
    display: none; /* Default sembunyi di desktop */
}


/* --- MODE MOBILE (Update Sesuai Request) --- */
@media (max-width: 768px) {
    .gallery-container {
        padding: 0;
        margin-top: 0;
    }
    .gallery-grid {
        display: block; /* Matikan Grid, jadi block biasa */
        height: auto;   /* Tinggi otomatis */
        border-radius: 0; /* Full width biasanya tanpa radius di sisi layar */
    }

    /* 1. SEMBUNYIKAN SEMUA GAMBAR KECUALI YANG PERTAMA */
    .gallery-item {
        display: none; /* Sembunyikan semua dulu */
    }

    .gallery-item.item-0 {
        display: block; /* Munculkan hanya gambar pertama */
        height: 350px;  /* Tinggi gambar di HP */
        position: relative;
    }

    /* 2. STYLE TOMBOL MOBILE (Mirip referensi) */
    .mobile-gallery-btn {
        display: flex;  /* Munculkan tombol ini */
        align-items: center;
        gap: 6px;
        position: absolute;
        bottom: 45px;   /* Jarak dari bawah */
        right: 15px;    /* Jarak dari kanan */
        background: var(--bg-white);
        color: #333;
        font-size: 0.85rem;
        font-weight: 600;
        padding: 8px 12px;
        border-radius: 6px; /* Sudut tumpul */
        box-shadow: 0 2px 8px rgba(0,0,0,0.2); /* Efek bayangan */
        z-index: 10;
        line-height: 1;
    }
    
    /* Matikan overlay desktop jika terbawa */
    .desktop-gallery-overlay {
        display: none !important;
    }
}

/* --- Video Tile Styling --- */
.video-tile {
    position: relative;
    display: block;
}

.video-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.2); /* Sedikit gelap biar icon pop */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s;
}

.video-tile:hover .video-overlay {
    background: rgba(0,0,0,0.4);
}

.play-button {
    width: 50px;
    height: 50px;
    background: rgba(255,255,255,0.9);
    border-radius: 50%;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.video-tile:hover .play-button {
    transform: scale(1.1);
    background: #fff;
    color: #ff0000; /* Warna merah YouTube */
}

/* --- Video Modal Fix --- */
.video-content {
    width: 90%;
    max-width: 900px;
    background: #000;
    aspect-ratio: 16 / 9; /* Wajib agar rasio player pas */
}

#yt-player-container {
    width: 100%;
    height: 100%;
}

#yt-player-container iframe {
    width: 100%;
    height: 100%;
}

/* --- Micro Lightbox --- */
.lightbox-content{
    display: flex;
    justify-content: center;
}
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.9); /* Latar belakang hitam pekat */
    z-index: 10000; /* Paling depan */
    display: none; /* Sembunyi default */
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    display: flex; /* Flexbox biar gambar di tengah */
    opacity: 1;
}

.lightbox-overlay img {
    max-width: 90%;
    max-height: 90vh;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
    border-radius: 10px;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active img {
    transform: scale(1);
}

/* Tombol Close (X) */
.lightbox-close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 40px;
    color: var(--bg-white);
    cursor: pointer;
    font-weight: bold;
    z-index: 10001;
    line-height: 1;
}

.lightbox-close:hover {
    color: var(--main-color);
}

/* --- Gallery Lightbox Navigation --- */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    padding: 20px;
    cursor: pointer;
    z-index: 10002;
    transition: 0.2s;
    opacity: 0.7;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    opacity: 1;
    scale: 1.2;
}

.lightbox-prev { left: 10px; }
.lightbox-next { right: 10px; }

/* Caption (Counter halaman) */
.lightbox-caption {
    position: absolute;
    bottom: 20px;
    left: 0; 
    right: 0;
    text-align: center;
    color: var(--bg-white);
    font-size: 0.9rem;
    z-index: 10002;
}

/* Responsif untuk HP */
@media (max-width: 768px) {
    .lightbox-prev, .lightbox-next {
        font-size: 30px;
        padding: 10px;
    }
}
/* --- Lightbox Thumbnails --- */
.lightbox-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90%;
    max-height: 90vh;
}

#lightbox-img {
    max-height: 70vh; /* Sisakan ruang untuk thumbnail di bawah */
    object-fit: contain;
}

.lightbox-thumbnails {
    margin-top: 15px;
    display: flex;
    gap: 10px;
    overflow-x: auto; /* Bisa digeser kanan-kiri */
    width: 100%;
    padding-bottom: 5px;
}
@media (min-width: 769px) {
    .lightbox-thumbnails {
        justify-content: center;
    }
}

/* Scrollbar tipis biar cantik */
.lightbox-thumbnails::-webkit-scrollbar { height: 6px; }
.lightbox-thumbnails::-webkit-scrollbar-thumb { background: #555; border-radius: 3px; }

.lb-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    cursor: pointer;
    opacity: 0.5;
    transition: 0.2s;
    border: 2px solid transparent;
    flex-shrink: 0; /* Agar tidak gepeng */
}

.lb-thumb:hover,
.lb-thumb.active {
    opacity: 1;
    border-color: var(--accent); /* Warna aktif */
    transform: scale(1.1);
}

/* --- Lightbox Swipe Animation --- */
#lightbox-img {
    /* Transisi halus saat gambar berubah atau snap kembali */
    transition: transform 0.3s ease-out, opacity 0.2s ease;
    
    /* Agar tidak bisa di-select saat drag */
    user-select: none; 
    -webkit-user-drag: none;
    touch-action: pan-y; /* Izinkan scroll vertikal, tapi tangkap swipe horizontal */
}

/* Class ini ditambahkan via JS saat sedang digeser jari */
/* Tujuannya: Matikan transisi agar gambar menempel realtime di jari tanpa delay */
#lightbox-img.is-dragging {
    transition: none; 
}

/* Section */
section {
    padding: 50px 0;
}
.section-title {
    margin-bottom: 30px;
    position: relative;
}
.section-header-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
    margin-top: 0;
}
.section-arrow-link {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text);
    transition: transform 0.2s ease, color 0.2s;
    padding: 5px;
    border: 1px solid #d5d5d5;
    border-radius: 50%;
    background: var(--bg-white);
}
@media (max-width: 768px) {
    .section-arrow-link {
        margin-left: auto;
    }
}
.section-arrow-link:hover {
    transform: translateX(3px); /* Efek geser kanan saat hover */
    color: var(--primary);
}

/* Single Villa */
.villa-layout p{
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.7;
}
.villa-layout h1 {
    margin: 0 0 10px 0;
    font-size: 2rem;
    color: var(--primary);
    line-height: 1.2em;
}
.villa-layout h3{
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
}
.rank-math-breadcrumb p {
    margin-bottom: 0;
    margin-top: 0;
}
.highlights li{
    position: relative;
    padding-left: 1.5em;
	margin-bottom: 0.5em;
}
.highlights li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    fill: black;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="%23C49609" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="%23C49609" stroke-width="1.5" stroke-linecap="round"></path></g></svg>');
}
.villa-meta {
    display: flex;
    gap: 10px;
    color: #555;
    font-size: 0.9rem;
    margin-bottom: 25px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}
@media(max-width:768px){
    .villa-meta {
        overflow-x: scroll;
    }
}
.meta-location{
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
}
.meta-location a{
    display: flex;
    align-items: center;
    gap: 5px;
}
.villa-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    border: 1px solid #ddd;
    padding: 5px 10px;
}
section.villa-desc {
    padding: 0;
    margin-bottom: 40px;
}
section.villa-desc h2 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}
 /* READ MORE / EXPAND COLLAPSE STYLES */
.desc-wrapper {
    position: relative;
    max-height: 250px; /* Tinggi maksimal sebelum di-klik */
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Animasi halus */
}
/* Inclusions */
.villa-inclusions li {
    position: relative;
    padding-left: 1.7em;
    margin-bottom: 5px;
}
.villa-inclusions li::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 4px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path d="M8.5 12.5L10.5 14.5L15.5 9.5" stroke="%23C49609" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M7 3.33782C8.47087 2.48697 10.1786 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 10.1786 2.48697 8.47087 3.33782 7" stroke="%23C49609" stroke-width="1.5" stroke-linecap="round"></path></g></svg>');
}
/* Things to know Policy */
.policy{
    gap: 25px;
}
.policy h3{
    margin-top: 0;
    margin-bottom: 0.5em;
}
.policy .house-rules li,
.policy .cancel li {
    position: relative;
    padding-left: 1.7em;
    margin-bottom: 5px;
}
.policy .house-rules li::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 4px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12ZM11.8284 6.75736C12.3807 6.75736 12.8284 7.20507 12.8284 7.75736V12.7245L16.3553 14.0653C16.8716 14.2615 17.131 14.8391 16.9347 15.3553C16.7385 15.8716 16.1609 16.131 15.6447 15.9347L11.4731 14.349C11.085 14.2014 10.8284 13.8294 10.8284 13.4142V7.75736C10.8284 7.20507 11.2761 6.75736 11.8284 6.75736Z" fill="%23063023"></path></g></svg>');
}
.cancel li::before{
    content: '';
    position: absolute;
    left: 0px;
    top: 4px;
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-image: url('data:image/svg+xml,<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill-rule="evenodd" clip-rule="evenodd" d="M8 1C8.55229 1 9 1.44772 9 2V3.00228C9.29723 2.99999 9.61798 3 9.96449 3H14.0355C14.382 3 14.7028 2.99999 15 3.00228V2C15 1.44772 15.4477 1 16 1C16.5523 1 17 1.44772 17 2V3.12459C17.3192 3.17902 17.621 3.25947 17.9134 3.3806C19.1386 3.88807 20.1119 4.86144 20.6194 6.08658C20.8305 6.59628 20.9181 7.13456 20.9596 7.74331C21 8.33531 21 9.06272 21 9.96448V13.6035C21 14.7056 21 15.5944 20.9403 16.3138C20.8788 17.0547 20.7487 17.7049 20.4371 18.3049C19.9627 19.2181 19.2181 19.9627 18.3049 20.4371C17.7049 20.7487 17.0547 20.8788 16.3138 20.9403C15.5944 21 14.7056 21 13.6035 21H10.3965C9.29444 21 8.40557 21 7.68616 20.9403C6.94535 20.8788 6.29513 20.7487 5.69513 20.4371C4.78191 19.9627 4.03731 19.2181 3.56293 18.3049C3.25126 17.7049 3.12125 17.0547 3.05972 16.3138C2.99998 15.5944 2.99999 14.7056 3 13.6035V9.96449C2.99999 9.06273 2.99999 8.33531 3.04038 7.74331C3.08191 7.13456 3.16948 6.59628 3.3806 6.08658C3.88807 4.86144 4.86144 3.88807 6.08658 3.3806C6.37901 3.25947 6.68085 3.17902 7 3.12459V2C7 1.44772 7.44772 1 8 1ZM7 5.17476C6.94693 5.19142 6.89798 5.20929 6.85195 5.22836C6.11687 5.53284 5.53284 6.11687 5.22836 6.85195C5.135 7.07733 5.07033 7.37254 5.03574 7.87945C5.01452 8.19046 5.0059 8.55351 5.00239 9H18.9976C18.9941 8.55351 18.9855 8.19046 18.9643 7.87945C18.9297 7.37254 18.865 7.07733 18.7716 6.85195C18.4672 6.11687 17.8831 5.53284 17.1481 5.22836C17.102 5.20929 17.0531 5.19142 17 5.17476V6C17 6.55228 16.5523 7 16 7C15.4477 7 15 6.55228 15 6V5.00239C14.7059 5.00009 14.3755 5 14 5H10C9.62448 5 9.29413 5.00009 9 5.00239V6C9 6.55228 8.55229 7 8 7C7.44772 7 7 6.55228 7 6V5.17476ZM19 11H5V13.56C5 14.7158 5.0008 15.5214 5.05286 16.1483C5.10393 16.7632 5.19909 17.116 5.33776 17.3829C5.62239 17.9309 6.06915 18.3776 6.61708 18.6622C6.88403 18.8009 7.23678 18.8961 7.85168 18.9471C8.47856 18.9992 9.28423 19 10.44 19H13.56C14.7158 19 15.5214 18.9992 16.1483 18.9471C16.7632 18.8961 17.116 18.8009 17.3829 18.6622C17.9309 18.3776 18.3776 17.9309 18.6622 17.3829C18.8009 17.116 18.8961 16.7632 18.9471 16.1483C18.9992 15.5214 19 14.7158 19 13.56V11ZM13 16C13 15.4477 13.4477 15 14 15H16C16.5523 15 17 15.4477 17 16C17 16.5523 16.5523 17 16 17H14C13.4477 17 13 16.5523 13 16Z" fill="%23063023"></path></g></svg>');
}

/* Efek Gradasi Putih di Bawah */
.desc-wrapper::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 80px;
    background: linear-gradient(to bottom, rgba(251, 251, 251,0), rgba(251, 251, 251,1));
    pointer-events: none; /* Agar klik tembus ke teks bawahnya jika perlu */
    transition: opacity 0.3s;
}

/* Class saat tombol diklik (Expand) */
.desc-wrapper.expanded {
    max-height: 2000px; /* Angka besar agar semua teks muat */
}

/* Hilangkan gradasi saat expanded */
.desc-wrapper.expanded::after {
    opacity: 0;
    pointer-events: none;
}

.btn-read-more {
    background: transparent;
    border: 1px solid #a5a5a5;
    color: var(--primary);
    font-weight: bold;
    font-size: 1rem;
    cursor: pointer;
    padding: 10px 15px;
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 10px;
    box-shadow: 1px 1px 1px 0px #ddd;
    text-transform: capitalize;
}

.btn-read-more:hover { color: var(--main-color); background: var(--bg-white);}
.btn-read-more .icon { transition: transform 0.3s; display: flex;}
.btn-read-more.active .icon { transform: rotate(180deg); }

/* facilities */
.villa-fac > ul{
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
}
@media (min-width: 769px) {
    .villa-fac > ul{
        grid-template-columns: 1fr 1fr;
    }
}
.villa-fac ul > li{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.villa-fac li .slt-icon {
    height: 22px;
    width: 22px;
    flex-shrink: 0;
}

/* --- Button Trigger Style --- */
.btn-outline {
    background: transparent;
    border: 1px solid #333;
    color: #333;
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
    font-size: 0.95rem;
}

.btn-outline:hover {
    background: #f7f7f7;
    border-color: #000;
}

/* Location */
.osm-list{
    display: grid;
    grid-template-columns: 1fr;
}
.osm-list li{
    display: flex;
    align-items: start;
    gap: 5px;
    margin-bottom: 10px;
    line-height: 20px;
}
.osm-list li span{
    font-weight: 500;
}
.osm-list li svg{
    margin-top: 3px;
}
@media (min-width: 769px) {
  .osm-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- Modal gallery Overlay (Latar Gelap) --- */
.modal-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Hitam transparan */
    z-index: 9999;
    
    /* Flexbox untuk menengahkan kotak modal */
    display: none; /* Sembunyi default */
    align-items: center;
    justify-content: center;
    
    /* Animasi Fade In */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    display: flex;
    opacity: 1;
}

/* --- Modal Box (Kotak Putih) --- */
.modal-content {
    background: #fff;
    width: 100%;
    max-width: 680px; /* Lebar standar bk */
    max-height: 85vh; /* Jangan penuhi layar, sisakan space */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 20px;
}

/* Header (Sticky di dalam modal) */
.modal-header {
    padding: 20px 24px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-header h3 {
    margin: 0;
    font-size: 1.2rem;
}

/* Tombol Close (X) */
.modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
    color: #333;
    padding: 0 5px;
}

.modal-close:hover {
    background: #f7f7f7;
    border-radius: 50%;
}

/* Body (Area yang di-scroll) */
.modal-body {
    padding: 24px;
    overflow-y: auto; /* Scroll jika konten panjang */
}

/* --- List Style --- */
.amenity-group {
    margin-bottom: 30px;
}

.amenity-group h4 {
    margin-bottom: 15px;
    font-size: 1.1rem;
    color: #222;
}

.amenity-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.amenity-list li {
    display: flex;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #e9e9e9 ;
    color: #444;
    margin: 0;
}

.amenity-list li svg {
    margin-right: 10px;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .modal-content {
        height: 100vh;
        max-height: 100vh;
        max-width: 100%;
        margin: 0;
        border-radius: 0;
    }
}


/* MOBILE BOTTOM BAR */
.mobile-bottom-bar { display: none; }
.mobile-close-btn {
    display: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    main.villa{
        border-top-left-radius: 25px;
        border-top-right-radius: 25px;
        position: relative;
        top: -43px;
        padding-top: 20px;
        background: var(--bg);
    }
    .gallery-grid { grid-template-columns: 1fr; grid-template-rows: 300px; gap: 0; }
    .gallery-item:not(:first-child) { display: none; }
    nav ul { display: none; }
    h1 { font-size: 1.8rem; }
    
    /* --- TRANSORMASI ASIDE MENJADI MODAL --- */
    
    /* 1. Sembunyikan ASIDE secara default di Mobile */
    aside#mainBookingForm { display: none; }

    /* 2. Style saat ASIDE aktif (dipanggil via JS) */
    aside.mobile-active {
        display: block!important;
        position: fixed;
        inset: 0; /* Full Screen: Top, Right, Bottom, Left 0 */
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        max-width: 100%;
        z-index: 2000;
        background: #fff;
        overflow-y: auto;
        animation: slideUp 0.3s ease-out;
        padding: 0;
        border-radius: 0;
        margin: 0;
    }

    /* 3. Reset style Booking Card agar pas di Full Screen */
    aside.mobile-active .booking-card {
        border: none;
        box-shadow: none;
        border-radius: 0;
        height: 100%;
        padding: 20px;
    }

    /* 4. Tampilkan Tombol Close */
    .mobile-close-btn {
        display: flex; /* Muncul hanya di mobile */
        align-items: center;
        justify-content: center;
        position: absolute;
        top: 20px;
        right: 20px;
        background: #f1f1f1;
        border: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        font-size: 20px;
        cursor: pointer;
        z-index: 10;
    }

    /* Animations */
    @keyframes slideUp {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }

    /* Mobile Sticky Bar */
    .mobile-bottom-bar {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--bg);
        padding: 15px 20px;
        box-shadow: 0 -4px 15px rgba(0,0,0,0.1);
        z-index: 999;
        box-sizing: border-box;
        border-top: 1px solid #eee;
    }
    .btn-mobile-book {
        background: var(--main-color);
        text-shadow: 1px 1px black;
        color: #fff;
        border: none;
        padding: 12px 25px;
        border-radius: 8px;
        font-weight: bold;
        font-size: 1rem;
        cursor: pointer;
        text-transform: uppercase;
    }
}

/* SKELETON LOADING TECHNIQUE (Native CSS) */
/* Animasi Shimmer (Efek Kilau Skeleton) */
/* --- SKELETON WRAPPER (Punya Anda) --- */
.img-skeleton {
    background-color: #e0e0e0;
    position: relative;
    overflow: hidden;
    display: block; /* Penting agar href link membungkus div */
    width: 100%;
    height: 250px; /* Tinggi FIX mencegah Layout Shift (CLS) */
    border-radius: 15px; 
}
@media(max-width:768px){
    .img-skeleton {
        height: 150px;
    }
}

/* Animasi Shimmer Anda */
.img-skeleton::after {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(90deg, 
        rgba(255,255,255, 0) 0, 
        rgba(255,255,255, 0.2) 20%, 
        rgba(255,255,255, 0.5) 60%, 
        rgba(255,255,255, 0));
    animation: shimmer 1.5s infinite; /* Sedikit dipercepat agar terasa responsif */
    z-index: 1; /* Di atas background abu, di bawah gambar asli */
}

@keyframes shimmer {
    100% { transform: translateX(100%); }
}

.img-skeleton img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 2;
}

/* Class ini akan ditambahkan oleh JS saat gambar LOADED */
.fade-img {
    opacity: 0;
}
.fade-img.is-loaded {
    opacity: 1; /* Gambar muncul menutupi skeleton */
}

/* --- Breadcrumbs Style --- */
.breadcrumb-wrapper {
    font-size: 0.85rem; /* Ukuran font agak kecil */
    color: #888;
}

/* Link Breadcrumb */
.breadcrumb-wrapper a {
    color: var(--primary); /* Warna tema */
    text-decoration: none;
    transition: 0.2s;
}

.breadcrumb-wrapper a:hover {
    color: var(--accent); /* Warna hover */
    text-decoration: underline;
}

/* Separator (RankMath pakai class .separator) */
.rank-math-breadcrumb .separator {
    margin: 0 3px;
    color: #8a8a8a;
}

/* Item terakhir (Current Page) */
.rank-math-breadcrumb .last {
    color: #666;
}
.theTitle {
    display: flex;
    justify-content: space-between;
    gap: 15px
}
.theTitle div{
    display: flex;
    gap: 10px;
}
.verified-badge{
    display: inline-flex;
    margin-left: auto;
}
.verified-badge svg{
    width: 20px;
    height: 20px;
}

/* Footer */
.site-footer{
    padding: 60px 0 30px;
    border-top: 1px solid #e5e5e5;
    background-color: var(--bg);
    font-size: 15px;
}
.footer-grid{
    margin-bottom: 50px;
    line-height: 1.8;
}
.footer-grid .footer-grid-left{
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: 20px;
}
.footer-grid .footer-grid-right{
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: 20px;
}
.footer-grid h3 {
    font-weight: 600;
    margin-bottom: 15px;
    color: #000;
}
.footer-grid .footer-about li{
    display: flex;
    align-items: start;
    gap: 10px;
    margin-bottom: 5px;
}
.footer-grid .footer-about li svg{
    flex-shrink: 0;
    margin-top: 5px;
}
.bk-social-icons-wrapper {
    display: flex;
    gap: 5px;
}
.bk-social-icons-wrapper svg{
    background: #000000;
    padding: 5px;
    width: 30px;
    height: 30px;
    stroke: white;
    border-radius: 10px;
}
@media (min-width: 769px) {
    .footer-grid #menu-destination{
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}
.footer-bottom {
    border-top: 1px solid #eee;
    border-bottom: 1px solid #eee;
    padding-top: 25px;
    padding-bottom: 25px;
    text-align: center;
}
.member {
    text-align: center;
}
.member img {
    margin: 0 10px;
    height: 65px;
}
@media(max-width:768px){
    .footer-grid .footer-grid-left,
    .footer-grid .footer-grid-right{
        grid-template-columns: 1fr; 
    }
}

/* FIX MOBILE RESPONSIVE NAVIGATION */
@media (max-width: 768px) {
    h1 { font-size: 1.8rem; }
    .search-widget { flex-direction: column; }
    .form-group { width: 100%; }
    
    /* JANGAN display: none! Ini merusak SEO crawling di mobile. */
    /* Solusi Sederhana: Tumpuk menu ke bawah untuk mobile */
    nav ul { 
        flex-direction: column; 
        gap: 10px; 
        padding-bottom: 20px;
        display: flex; /* Tetap tampil */
    }
    .dropdown-menu {
        position: static; /* Tampil di bawah item induk di mobile */
        box-shadow: none;
        border: 1px solid #eee;
        margin-top: 5px;
    }
    /* Menyesuaikan Header agar muat menu tumpuk */
    header .container { flex-direction: column; gap: 15px; }
}

/* SEARCH MODAL STYLES */
.search-modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 2000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.6);
    backdrop-filter: blur(5px);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.search-modal.active {
    display: block;
    opacity: 1;
}

.search-modal-content {
    background-color: #fefefe;
    margin: 10% auto;
    padding: 30px;
    border: 1px solid #888;
    width: 90%;
    max-width: 800px;
    border-radius: 12px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    position: relative;
    transform: translateY(-20px);
    transition: transform 0.3s ease;
}
.search-modal-content .bk-search-wrapper {
    width: 100%;
}
.search-modal.active .search-modal-content {
    transform: translateY(0);
}

.close-modal {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    position: absolute;
    right: 20px;
    top: 15px;
    cursor: pointer;
    z-index: 10;
}

.close-modal:hover,
.close-modal:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-title {
    text-align: center;
    margin-bottom: 25px;
    color: var(--primary);
    font-size: 1.5rem;
}

/* CSS Ringan untuk FAQ */
.bk-faq-section { padding: 60px 0;}
.bk-faq-container { max-width: 900px; margin: 0 auto; padding: 0 20px; }
.bk-faq-title { text-align: center; margin-bottom: 40px; font-size: 2rem; color: #333; font-weight: 700; }
.bk-faq-item { background: #fff; margin-bottom: 15px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.05); overflow: hidden; border: 1px solid #eee; }
.bk-faq-item summary { padding: 20px 40px 20px 20px; cursor: pointer; font-weight: 600; color: #333; list-style: none; position: relative; font-size: 1.1rem; }
.bk-faq-item summary::-webkit-details-marker { display: none; }
.bk-faq-item summary:after { position: absolute;
    right: 25px;
    font-size: 1.5rem;
    color: #777;
    transition: 0.3s;
    content: '';
    display: inline-block;
    width: 10px;
    height: 10px;
    border-right: 2px solid #000;
    border-bottom: 2px solid #000;
    transform: rotate(45deg) translateY(-2px);
    top: 25px;}
.bk-faq-item[open] summary:after { transform: rotate(225deg) translateY(-2px); }
.bk-faq-item[open] summary { border-bottom: 1px solid #eee; color: #000; background-color: #fcfcfc; }
.bk-faq-content { padding: 20px; line-height: 1.6; color: #555; font-size: 0.95rem; }
.bk-faq-content a { color: #d35400; text-decoration: underline; }