/* Tambahkan import ini di paling atas file CSS */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@800;900&family=Plus+Jakarta+Sans:wght@400;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rowdies:wght@300;400;700&display=swap');

:root {
    /* Warna Utama dari Logo Royal Borneo */
    --primary-blue: #4178B8; /* Biru ring pesawat & teks Tour Travel */
    --primary: #4178B8;      /* Tambahan variabel agar tombol booking gak error */
    --dark-blue: #1A2844;    /* Biru pekat untuk judul biar elegan */
    
    /* Warna Aksen (Kuning Emas) */
    --accent-gold: #E8A331;  /* Kuning emas logo RB untuk tombol & highlight */
    
    /* Background & Glass (Tema Terang) */
    --bg-white: #ffffff;     /* Putih bersih utama */
    --bg-soft: #fafafa;      /* Abu-abu super tipis untuk section alternate */
    --glass: rgba(65, 120, 184, 0.08);  /* Glass effect tipis warna biru */
    --glass-border: rgba(65, 120, 184, 0.2);
    
    /* Typography */
    --text-heading: #1A2844; /* Judul pake biru gelap */
    --text-main: #64748b;    /* Paragraf pake abu-abu kalem (slate) */
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

html { 
    scroll-behavior: smooth;
    overflow-x: hidden; 
}

/* Background web sekarang Putih, teksnya gelap */
body {
    background-color: var(--bg-white);
    color: var(--text-main);
    overflow-x: hidden;
    line-height: 1.6;
}

/* Custom Selection: Pas teks di-block warnanya jadi Emas */
::selection {
    background: var(--accent-gold);
    color: var(--bg-white);
}

/* --- HERO SECTION TYPOGRAPHY --- */
.hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.95;
    letter-spacing: -2px;
    margin-bottom: 25px;
    
    /* Warna teks jadi biru gelap biar kebaca di background putih */
    color: var(--text-heading); 
    
    /* Shadow tipis warna biru muda biar ada efek 3D dikit */
    text-shadow: 3px 3px 0px rgba(65, 120, 184, 0.15); 
}

.hero-content p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.5px;
    max-width: 600px;
    color: var(--text-main); /* Mengikuti warna paragraf default */
}

/* --- NAVIGASI --- */
header {
    position: fixed;
    top: 25px;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 90%;
    max-width: 1300px;
    z-index: 1000;
    transition: top 0.4s ease-in-out;
}

nav {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 15px;
    padding: 12px 25px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 15px 35px rgba(0,0,0,0.4);
}

.nav-left-group {
    display: flex;
    align-items: center;
    gap: 40px;
}

/* Styling untuk Logo Container */
.logo-container.jbj-logo-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    height: 100%; /* Sesuai tinggi navbar */
    padding: 0 10px;
}

/* Styling untuk SVG Logo agar responsif */
.main-logo-svg {
    height: 40px; /* Atur tinggi logo sesuai selera navbar lo */
    width: auto; /* Biar aspect ratio-nya nggak hancur */
    max-width: 250px; /* Batasi lebar maksimal */
    transition: transform 0.3s ease;
}

/* Efek Hover minimalis */
.logo-container.jbj-logo-link:hover .main-logo-svg {
    transform: scale(1.05); /* Sedikit membesar pas di-hover */
}

.nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.nav-links a {
    text-decoration: none;
    color: #1A2844;
    font-size: 1.1rem;
    font-weight: 700;
    opacity: 1;
    transition: 0.3s;
}

.nav-links a:hover { 
    color: var(--accent-gold); 
}

.btn-booking {
    background: transparent;
    color: #0d5c56;
    border: 2px solid #0d5c56;
    text-decoration: none;
    padding: 8px 20px; /* Padding dikurangi 2px untuk kompensasi ketebalan border */
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: 0.3s;
}

.btn-booking:hover {
    background: #0d5c56;
    color: #ffffff;
    transform: translateY(-2px);
}

/* --- ANIMASI NAVBAR NGUMPET --- */
header.nav-hidden {
    top: -100px !important; 
}

/* --- SETTING HAMBURGER & DISPLAY --- */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    z-index: 1001; /* Biar ikon selalu di atas menu */
}

.hamburger span {
    width: 28px;
    height: 3px;
    background: #ffffff;
    border-radius: 5px;
    transition: all 0.3s ease;
}

.mobile-only { display: none; }

/* === MODE MOBILE (HP) === */
@media (max-width: 768px) {
    /* 1. BIKIN HEADER NEMPEL TEMBOK ATAS & KANAN KIRI */
    header {
        top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    /* 2. HILANGIN LENGKUNGAN BORDER BIAR RATA */
    nav {
        border-radius: 0 !important;
        border-top: none !important;
        border-left: none !important;
        border-right: none !important;
        justify-content: center; /* Kunci Logo di Tengah */
        position: relative;
        padding: 15px 20px;
    }

    .desktop-only { display: none !important; }
    .mobile-only { display: block; margin-top: 20px; }

    /* Posisi Hamburger di Kiri */
    .hamburger {
        display: flex;
        position: absolute;
        left: 20px;
    }

    /* 3. MENU SLIDE SEKARANG BENERAN FULL MENTOK */
    .nav-links {
        position: fixed;
        top: 0 !important; /* Pastiin mentok atas */
        left: -100%; 
        width: 75%;
        height: 100vh !important; /* Pastiin mentok bawah */
        margin: 0 !important; /* Hilangin semua margin bawaan */
        padding: 0 !important;
        background: #1b263b; /* FIXED: Biru Navy (Bukan ijo lagi) */
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 30px;
        transform: none; 
        transition: 0.4s ease-in-out;
        box-shadow: 15px 0 30px rgba(0,0,0,0.6);
        z-index: 1000;
    }

    .nav-links.slide-active {
        left: 0 !important; /* Menu Masuk Mulus */
    }

    .nav-links a {
        font-size: 1.2rem;
        font-weight: 700;
        color: #ffffff; /* Pastiin teks tetep putih terang */
    }

    /* Styling Tombol Booking di Menu HP */
    .btn-booking-mobile {
        background: #d4a017; /* FIXED: Ganti jadi Emas biar mewah */
        color: white;
        padding: 15px 30px;
        border-radius: 12px;
        text-decoration: none;
        font-weight: 800;
        display: flex;
        align-items: center;
        gap: 10px;
    }

    /* Animasi Hamburger jadi Silang (X) */
    .hamburger.toggle span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
    .hamburger.toggle span:nth-child(2) { opacity: 0; }
    .hamburger.toggle span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }
}


/* =========================================
   1. HERO SECTION (Latar & Teks)
   ========================================= */
.hero-section {
    position: relative;
    z-index: 10;
    width: 100%; /* Mentok kanan kiri */
    margin: 0;
    padding: 0;
    height: 90vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-image: url("media/image/hero (1).png"); 
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(26, 40, 68, 0.7), rgba(26, 40, 68, 0.4));
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
    /* Tambahan biar search box bisa overlap ke bawah */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.hero-content h1 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 20px;
    color: #ffffff; 
    text-shadow: 2px 4px 10px rgba(0,0,0,0.3);
}

.hero-content .highlight-gold {
    color: var(--accent-gold);
}

.hero-content p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 auto 40px;
    line-height: 1.6;
}

/* =========================================
   2. ADVANCED SEARCH BOX (Gaya Properti)
   ========================================= */
.advanced-search-wrapper {
    position: absolute;
    bottom: -50px; /* Sedikit dinaikin biar overlap-nya pas */
    left: 50%;
    transform: translateX(-50%);
    width: 95vw; /* INI KUNCINYA: Biar maksa ngelebar ngikutin layar */
    max-width: 1100px; /* Mentoknya digedein jadi 1100px */
    z-index: 10;
}

.advanced-search-box {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
    display: flex;
    align-items: center;
    padding: 5px 20px; /* DIET PADDING: Dari 10px diturunin ke 5px biar pipih */
    width: 100%;
}

.search-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 15px 25px;
}

.search-field label {
    font-size: 11px;
    font-weight: 800;
    color: var(--primary-blue);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.search-select {
    border: none;
    outline: none;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-heading);
    background: transparent;
    cursor: pointer;
    width: 100%;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%231A2844%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right center;
    background-size: 10px;
    padding-right: 15px;
}

.search-divider {
    width: 1px;
    height: 50px;
    background-color: #e2e8f0;
}

.search-btn-group {
    padding: 10px;
}

.btn-advanced-search {
    background-color: var(--accent-gold);
    color: #ffffff;
    border: none;
    padding: 18px 40px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 800;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 10px;
}

.btn-advanced-search:hover {
    background-color: var(--dark-blue);
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(26, 40, 68, 0.2);
}

@media (max-width: 992px) {
    /* --- FIX GAMBAR HERO ILANG DI HP --- */
    .hero-section {
        background-attachment: scroll !important; /* WAJIB: Matiin efek fixed biar gambar nongol */
        background-position: center center;
        height: 80vh; /* Sesuaikan tinggi biar pas di layar HP */
        min-height: 500px;
    }

    /* Kode lo yang udah ada (Search Box dll) lanjutin di bawahnya */
    .advanced-search-box {
        flex-direction: column;
        padding: 20px;
        align-items: stretch;
    }

    .search-divider {
        width: 100%;
        height: 1px;
        margin: 5px 0;
    }

    .search-field {
        padding: 15px 5px;
    }

    .advanced-search-wrapper {
        bottom: -150px; 
        padding: 0 15px;
    }

    .btn-advanced-search {
        justify-content: center;
        width: 100%;
        margin-top: 10px;
    }
}




/* --- BRAND STORY & STATS --- */
.brand-story-stats {
    padding: 180px 0 100px; /* Bagian ATAS digedein jadi 180px biar search box gak nabrak teks */
    background-color: var(--dark-blue); /* Pake Biru Pekat Royal Borneo */
    position: relative;
    width: 100%;
    border-bottom-left-radius: 60px; 
    border-bottom-right-radius: 60px;
    overflow: hidden;
    z-index: 2; 
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 25px;
}

/* Teks Filosofi */
.philosophy-text h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.4rem, 5vw, 2.5rem); /* Lebih fleksibel */
    font-weight: 800; /* Dibikin lebih tebal biar gahar */
    line-height: 1.5;
    text-align: center;
    color: #ffffff;
    margin-bottom: 80px; /* Jarak ke stats grid */
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

/* Animasi Word (SINKRON SAMA JS) */
.philosophy-text h2 .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(25px) rotate(3deg); /* Rotate dikit biar asik pas muncul */
    filter: blur(10px); /* Tambahan efek blur saat belum muncul */
    transition: all 0.7s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.philosophy-text h2.reveal .word {
    opacity: 1;
    transform: translateY(0) rotate(0deg);
    filter: blur(0); /* Blur hilang saat muncul */
}

/* Gambar Kecil di Teks */
.inline-img img {
    height: 1.1em; /* Pake em biar ngikutin ukuran font teksnya otomatis */
    width: auto;
    border-radius: 8px;
    vertical-align: middle;
    margin: 0 4px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    display: inline-block;
    position: relative;
    z-index: 1;
    cursor: pointer;
}

.inline-img img:hover {
    transform: scale(2.5);
    z-index: 10;
    box-shadow: 0 15px 30px rgba(0,0,0,0.4);
}

/* Hilangkan delay animasi bawaan saat area teks di-hover agar efek blur responsif */
.philosophy-text h2.reveal:hover .word {
    transition-delay: 0ms !important;
    transition-duration: 0.4s !important;
}

/* Saat ada gambar di-hover, blur SEMUA teks (.word) dan statistik (.stat-item) */
.brand-story-stats:has(.inline-img img:hover) .philosophy-text h2.reveal .word,
.brand-story-stats:has(.inline-img img:hover) .stat-item {
    filter: blur(6px);
    opacity: 0.4;
}

/* KECUALI elemen kata yang sedang membungkus gambar yang di-hover */
.brand-story-stats:has(.inline-img img:hover) .philosophy-text h2.reveal .word:has(.inline-img img:hover) {
    filter: blur(0);
    opacity: 1;
    z-index: 10;
    position: relative;
}

/* --- GRID & STATISTIK --- */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-top: 50px;
    text-align: center; /* Pastiin semua konten di dalemnya rata tengah */
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Paksa item sejajar di tengah secara vertikal */
    justify-content: center;
    transition: filter 0.4s ease, opacity 0.4s ease;
}

.stat-item h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 8vw, 4rem); 
    font-weight: 900;
    color: #ffffff;
    display: inline-block;
    line-height: 1; /* Biar gak ada space kosong di atas/bawah angka */
    margin: 0;
}

.stat-item span {
    font-size: 1.8rem;
    font-weight: 800;
    color: var(--accent-gold); /* Ganti dari putih jadi warna Emas Royal Borneo */
    margin-left: 2px;
    vertical-align: middle;
}

.stat-item p {
    font-family: 'Plus Jakarta Sans', sans-serif;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.85rem; /* Ukuran pas buat subtitle */
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.6); /* Putih agak transparan biar elegan */
    margin-top: 12px;
    line-height: 1.4;
}

/* === RESPONSIVE FIX === */
@media (max-width: 768px) {
    .brand-story-stats {
        padding: 80px 0;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .stats-grid {
        grid-template-columns: 1fr 1fr; /* Di HP jadi 2 sejajar */
        gap: 40px 10px; /* Jarak atas-bawah 40px, kiri-kanan 10px */
    }

    .stat-item:nth-child(3) {
        grid-column: span 2; /* Item ke-3 (Kepuasan Peserta) full width di tengah bawah */
    }

    .stat-item h3 {
        font-size: 2.5rem; /* Dikecilkan sedikit agar muat 2 kolom */
    }
}


/* =========================================
   HEADER DENGAN FOTO ORANG DI KANAN KIRI
   ========================================= */
.custom-header-flex {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
    margin-bottom: 80px; 
    padding-top: 0px;
}

.custom-header-flex h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 900;
    color: var(--dark-blue); /* Pake warna biru Royal Borneo */
    text-transform: uppercase;
    margin: 0;
}

.custom-header-flex .highlight-gold {
    color: var(--accent-gold);
}

.header-person-img {
    height: 90px; /* Atur tinggi foto orangnya di sini */
    width: auto;
    object-fit: contain;
}

/* Jika foto orang ngadepnya kebalik, bisa di-mirror pake CSS ini */
.right-person {
    transform: scaleX(-1); 
}

/* --- WRAPPER & CORETAN KUAS EMAS LUSUH --- */
.title-with-underline {
    position: relative;
    display: inline-block;
    z-index: 2;
}

.brush-underline {
    position: absolute;
    bottom: -28px; /* Jarak teks dan garis dilebarin biar lega di desktop */
    left: 0;
    width: 100%;
    height: 35px; /* Proporsi tinggi SVG */
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.brush-path {
    stroke: #b58933; /* Warna Emas Lusuh (Worn Gold) */
    stroke-linecap: round; /* Biar ujung garis natural/bulat */
    fill: none;
}

/* Variasi helai kuas biar teksturnya lusuh dan gak rata */
.bristle-1 {
    stroke-width: 6;
    opacity: 0.9;
    stroke-dasharray: 320; stroke-dashoffset: 320;
}
.bristle-2 {
    stroke-width: 4;
    opacity: 0.6;
    stroke-dasharray: 310; stroke-dashoffset: 310;
}
.bristle-3 {
    stroke-width: 3;
    opacity: 0.7;
    stroke-dasharray: 300; stroke-dashoffset: 300;
}
.bristle-4 {
    stroke-width: 2;
    opacity: 0.4;
    stroke-dasharray: 290; stroke-dashoffset: 290;
}

/* Trigger animasi otomatis dengan jeda tipis biar natural pas user scroll */
.custom-header-flex.aos-animate .bristle-1,
.section-title.aos-animate .bristle-1 { animation: drawBrush 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.3s; }
.custom-header-flex.aos-animate .bristle-2,
.section-title.aos-animate .bristle-2 { animation: drawBrush 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.35s; }
.custom-header-flex.aos-animate .bristle-3,
.section-title.aos-animate .bristle-3 { animation: drawBrush 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.4s; }
.custom-header-flex.aos-animate .bristle-4,
.section-title.aos-animate .bristle-4 { animation: drawBrush 0.7s cubic-bezier(0.25, 1, 0.5, 1) forwards 0.45s; }

@keyframes drawBrush {
    to { stroke-dashoffset: 0; }
}

/* --- HILANGIN GAMBAR SAMPING DI MOBILE --- */
@media (max-width: 768px) {
    /* Sembunyiin gambarnya */
    .header-person-img {
        display: none !important;
    }

    /* Atur ulang container biar teksnya beneran di tengah dan gak renggang */
    .custom-header-flex {
        gap: 0;
        margin-bottom: 75px; /* Margin ditambah lagi biar ada ruang buat garis di HP yang makin turun */
        flex-direction: column; /* Jaga-jaga biar teks tetep rapi */
        text-align: center;
    }

    .custom-header-flex h2 {
        font-size: 1.8rem; /* Kecilin dikit font-nya biar gak pecah baris di HP */
        line-height: 1.2;
    }

    .brush-underline {
        bottom: -40px; /* Jarak teks dan garis dilebarin lagi khusus di HP */
    }
}

/* =========================================
   KARTU DESTINASI (FOTO BULAT NYEMBUL)
   ========================================= */
.popular-destinations {
    padding-top: 180px;
    padding-bottom: 100px;
    background-color: var(--bg-soft); 
}

.destinations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px; 
    padding-top: 50px; /* Ruang biar foto bulat gak kepotong */
}

.dest-card {
    background: #ffffff;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
    position: relative;
    padding: 0 30px 30px; 
    margin-top: 60px; /* Dorong kotak ke bawah buat ngasih tempat foto bulat */
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease;
    border: 1px solid #f0f0f0;
}

.dest-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

/* --- FOTO BULAT --- */
.card-circle-img {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    background: #fff; 
    padding: 6px; /* Ketebalan frame putih */
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    margin: -65px auto 20px; /* Narik foto setengah badan ke atas batas kotak */
    z-index: 2;
}

.card-circle-img img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
}

/* --- ISI KARTU --- */
.card-content {
    text-align: left; /* Teks dibikin rata kiri biar eksklusif */
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.dest-tag {
    color: var(--primary-blue);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 1.5px;
    margin-bottom: 10px;
    display: block;
}

.card-content h3 {
    color: var(--dark-blue);
    font-size: 1.3rem;
    font-weight: 800;
    margin: 0 0 20px;
    line-height: 1.4;
}

/* --- LIST FASILITAS --- */
.card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
    flex-grow: 1;
}

.card-features li {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-heading);
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.card-features li i {
    color: var(--accent-gold); /* Centangnya warna emas */
    font-size: 1.1rem;
}

/* --- BAGIAN BAWAH KARTU --- */
.card-footer {
    border-top: 1px dashed #e0e0e0;
    padding-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.price-wrapper {
    display: flex;
    flex-direction: column;
}

.price-label {
    font-size: 11px;
    color: #888;
    font-weight: 700;
    text-transform: uppercase;
}

.price-tag {
    color: var(--dark-blue);
    font-size: 1.2rem;
    font-weight: 900;
}

.btn-detail {
    background: var(--dark-blue);
    color: #fff;
    padding: 12px 25px;
    border-radius: 50px;
    font-weight: 700;
    text-decoration: none;
    font-size: 0.9rem;
    transition: 0.3s;
}

.btn-detail:hover {
    background: var(--accent-gold);
    color: #fff;
}

/* =========================================
   RESPONSIVE MOBILE
   ========================================= */
@media (max-width: 768px) {
    .custom-header-flex {
        flex-direction: column; /* Kalau di HP, foto orangnya numpuk di atas & bawah teks */
        text-align: center;
        gap: 15px;
    }
    
    /* Jadikan carousel bisa di-scroll menyamping di HP */
    .destinations-grid {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 20px;
        padding: 70px 25px 40px; /* Padding atas untuk foto nyembul, bawah untuk bayangan */
        margin: 0 -25px; /* Trik agar scroll tembus batas container kiri-kanan */
        scroll-snap-type: x mandatory;
        scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
    }

    .destinations-grid::-webkit-scrollbar {
        display: none; /* Sembunyikan scrollbar di Chrome & Safari */
    }

    .dest-card {
        flex: 0 0 80%; /* 80% layar agar sisa 20% nampilin kartu sebelah (ngintip) */
        max-width: 300px;
        margin-top: 0;
        scroll-snap-align: center; /* Scroll otomatis pas di tengah */
        
        /* Efek blur untuk kartu yang posisinya lagi ngintip/belum di tengah */
        filter: blur(4px);
        opacity: 0.5;
        transform: scale(0.9);
        transition: filter 0.4s ease, opacity 0.4s ease, transform 0.4s ease;
    }

    .dest-card.center-focus {
        filter: blur(0);
        opacity: 1;
        transform: scale(1);
    }

    /* Sesuaikan ukuran foto bulat agar proporsional di HP */
    .card-circle-img {
        width: 110px;
        height: 110px;
        margin: -55px auto 15px;
    }

    /* Rapihin Footer Kartu (Harga & Tombol) khusus di HP */
    .card-footer {
        flex-direction: column; /* Numpuk ke bawah */
        align-items: stretch;
        gap: 15px;
        padding-top: 15px;
    }

    .price-wrapper {
        flex-direction: row; /* Label dan harga sejajar kiri-kanan */
        justify-content: space-between;
        align-items: center;
    }

    .btn-detail {
        width: 100%; /* Tombol jadi selebar kartu, gampang diklik */
        text-align: center;
    }
}





/* =========================================
   WHY ROYAL BORNEO (TIMELINE LAYOUT)
   ========================================= */
.why-us-section {
    padding: 100px 0;
    background-color: #ffffff;
    overflow: hidden;
}

.why-us-section .section-title {
    margin-bottom: 130px; /* Jarak ke timeline dilebarin biar makin lega */
}

.why-us-section .section-title h2 {
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    color: var(--dark-blue);
}

.timeline-container {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

/* Garis Lurus di Tengah */
.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background-color: #e0e0e0; /* Warna garis abu-abu tipis */
    transform: translateX(-50%);
    z-index: 1;
}

.timeline-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    margin-bottom: 60px;
}

.timeline-row:last-child {
    margin-bottom: 0;
}

/* Titik Pemisah di Tengah Garis */
.timeline-dot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 14px;
    height: 14px;
    background-color: var(--accent-gold); /* Titik warna emas */
    border-radius: 50%;
    z-index: 2;
    box-shadow: 0 0 0 4px #ffffff; /* Efek outline putih biar gak nempel garis */
}

/* Kolom Kiri dan Kanan */
.timeline-col {
    width: 50%;
    display: flex;
    align-items: center;
}

/* Pengaturan Jarak Kiri-Kanan ke Garis Tengah */
.left-col {
    padding-right: 40px;
    justify-content: flex-end; /* Dorong konten ke arah garis */
}

.right-col {
    padding-left: 40px;
    justify-content: flex-start; /* Dorong konten ke arah garis */
}

/* Area Teks */
.timeline-text {
    max-width: 350px;
}

.text-right {
    text-align: right;
    margin-right: 30px;
}

.text-left {
    text-align: left;
    margin-left: 30px;
}

.timeline-text h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.3rem;
    font-weight: 800;
    color: var(--dark-blue);
    margin-bottom: 15px;
    line-height: 1.4;
}

.timeline-text p {
    font-size: 0.95rem;
    color: #666666;
    line-height: 1.6;
}

/* Area Gambar */
.timeline-image {
    width: 280px;
    height: 320px;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    flex-shrink: 0; /* Biar gambar gak penyok */
}

.timeline-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.timeline-image:hover img {
    transform: scale(1.05);
}

/* =========================================
   RESPONSIVE UNTUK HP & TABLET
   ========================================= */
@media (max-width: 992px) {
    .why-us-section {
        padding: 70px 0; /* Kurangi padding area atas bawah agar pas di layar HP */
    }

    .why-us-section .section-title {
        margin-bottom: 80px; /* Jarak judul ke konten dikurangi dari 130px jadi 80px */
    }

    /* Ilangin Garis & Titik di Mobile */
    .timeline-line, .timeline-dot {
        display: none;
    }

    .timeline-row {
        flex-direction: column;
        margin-bottom: 60px; /* Beri jarak antar poin alasan yang lebih lega */
    }

    .timeline-col {
        width: 100%;
        flex-direction: column !important; /* Paksa numpuk vertikal */
        padding: 0 !important;
        margin-bottom: 0;
        text-align: center;
    }

    /* Gambar pindah ke atas teks pas di HP, dibikin lebih proporsional */
    .left-col .timeline-image, 
    .right-col .timeline-image {
        order: 1; 
        width: 90%; /* Jangan full mentok pinggir, kasih sisa biar elegan */
        max-width: 350px; /* Batas maksimal ukuran gambar di HP */
        height: 250px;
        margin: 0 auto 25px auto !important; /* Posisikan gambar pas di tengah */
        border-radius: 20px; /* Sudut lebih melengkung manis */
    }

    .left-col .timeline-text, 
    .right-col .timeline-text {
        order: 2;
        text-align: center;
        margin: 0;
        max-width: 100%;
        padding: 0 20px;
    }

    .timeline-text h3 {
        font-size: 1.25rem;
        margin-bottom: 12px;
    }

    .timeline-text p {
        font-size: 0.95rem;
    }
}


/* =========================================
   SECTION TESTIMONI (FULL WIDTH & ANIMATED)
   ========================================= */
.testi-section {
    padding: 100px 0;
    background-color: #fdfdfd;
    width: 100%;
    overflow: hidden;
}

/* =========================================
   [FIXED] HEADLINE DENGAN 8 GARIS STARBURST
   ========================================= */
.testi-header {
    text-align: center;
    margin-bottom: 100px; /* Ditambah biar lebih lega ke slider bawah */
    padding: 0 20px;
    position: relative;
}

.headline-wrapper {
    position: relative;
    display: inline-block;
    margin: 80px 0 160px; /* Ruang bawah makin dilebarin biar garis yang makin panjang gak nabrak teks bawah */
    padding: 0 30px; /* Ruang napas buat teks */
}

.headline-wrapper h2 {
    font-family: 'Montserrat', sans-serif;
    font-weight: 900;
    font-size: clamp(2rem, 5vw, 3.2rem);
    color: #031110;
    text-transform: uppercase;
    margin: 0;
    position: relative;
    z-index: 5; /* Teks harus paling atas */
    transform: rotate(4deg); /* Posisi teks diputar miring ke kanan sedikit */
}

/* Bungkus SVG Garis */
.headline-decor {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160%; /* Dilebarin biar garis radialnya panjang kayak coretan lo */
    height: 180%;
    z-index: 1;
    pointer-events: none;
    overflow: visible !important; /* KUNCI: Biar garis gak kepotong batas box */
}

/* Setup Awal Garis Sembunyi */
.line-path {
    stroke: #0d5c56; /* Warna Biru Royal Borneo */
    stroke-width: 6;
    stroke-linecap: round;
    fill: none;
    stroke-dasharray: 100; /* Panjang garis */
    stroke-dashoffset: 100; /* Ngumpetin garis */
    transition: stroke-dashoffset 0.4s ease-out;
}

/* TRIGGER ANIMASI 
   Jalan pas scroll nyampe sini (Class .aos-animate muncul)
*/
.aos-animate .path-1 { animation: drawBurst 0.4s forwards 0.2s; } /* Atas */
.aos-animate .path-2 { animation: drawBurst 0.4s forwards 0.4s; } /* Bawah */
.aos-animate .path-3 { animation: drawBurst 0.4s forwards 0.6s; } /* Kiri */
.aos-animate .path-4 { animation: drawBurst 0.4s forwards 0.8s; } /* Kanan */
.aos-animate .path-5 { animation: drawBurst 0.4s forwards 1.0s; } /* Diag Kiri Atas */
.aos-animate .path-6 { animation: drawBurst 0.4s forwards 1.2s; } /* Diag Kanan Atas */
.aos-animate .path-7 { animation: drawBurst 0.4s forwards 1.4s; } /* Diag Kiri Bawah */
.aos-animate .path-8 { animation: drawBurst 0.4s forwards 1.6s; } /* Diag Kanan Bawah */
.aos-animate .path-9 { animation: drawBurst 0.4s forwards 1.8s; } /* Sela Kiri Atas */
.aos-animate .path-10 { animation: drawBurst 0.4s forwards 2.0s; } /* Sela Kanan Atas */
.aos-animate .path-11 { animation: drawBurst 0.4s forwards 2.2s; } /* Sela Kiri Bawah */
.aos-animate .path-12 { animation: drawBurst 0.4s forwards 2.4s; } /* Sela Kanan Bawah */

/* Keyframe Gambar Garis */
@keyframes drawBurst {
    to {
        stroke-dashoffset: 0;
    }
}

/* Responsive Mobile */
@media (max-width: 768px) {
    .headline-decor {
        width: 140% !important;
        height: 140% !important;
    }
    .testi-header {
        margin-bottom: 60px;
    }
    .headline-wrapper {
        margin: 50px 0 110px; /* Jarak bawah dilebarin juga khusus buat HP */
    }
}

.testi-header p {
    color: #64748b;
    margin-top: 20px;
}

/* --- SLIDER CONTAINER (JALAN OTOMATIS) --- */
.testi-slider-container {
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    padding: 20px 0; 
    overflow: hidden;
}

.testi-wrapper {
    display: flex;
    gap: 25px;
    width: max-content;
    /* Durasi diperlambat jadi 80s biar lebih santai dibacanya */
    animation: jalanTerus 80s linear infinite;
}

.testi-wrapper:hover {
    animation-play-state: paused; 
}

/* Keyframe Slider Otomatis (Gak gue ganggu) */
@keyframes jalanTerus {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 12.5px)); }
}

/* --- TESTIMONI CARD STYLING --- */
.testi-card {
    width: 350px; 
    flex-shrink: 0; 
    background: #ffffff;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 15px 35px rgba(3, 17, 16, 0.05);
    border: 1px solid #eee;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.user-info {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.user-img {
    width: 55px;
    height: 55px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #0d5c56;
}

.user-meta h4 {
    font-size: 1rem;
    color: #031110;
    margin: 0;
}

.user-meta span {
    font-size: 0.75rem;
    color: #ff9800; 
    font-weight: 700;
}

.rating {
    margin-bottom: 15px;
    font-size: 0.8rem;
    letter-spacing: 2px;
}

.card-body p {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    font-style: italic;
}

.trip-proof {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 15px;
    margin-top: 20px;
}

/* Navigasi Off */
.slider-dots {
    display: none; 
}

/* === MODE MOBILE === */
@media (max-width: 768px) {
    .testi-card { 
        flex: 0 0 75vw !important; /* Dikecilin jadi 75% biar lebih ramping di HP */
        max-width: 290px; /* Batas maksimal diturunin */
        width: 100% !important;
        padding: 20px !important; /* Padding disesuaikan biar teksnya tetap pas */
        border-radius: 20px;
    }

    .user-img {
        width: 50px !important;
        height: 50px !important;
    }

    .card-body p {
        font-size: 0.9rem !important; /* Ukuran font dinaikkan agar lebih mudah dibaca */
        line-height: 1.6;
    }

    .trip-proof {
        height: 160px !important; /* Foto bukti trip diperbesar proporsinya */
    }

    /* Di mobile, biarin garisnya ngikut skala teks */
    .headline-decor {
        width: 150%;
    }
}


/* =========================================
   FORM KIRIM TESTIMONI
   ========================================= */
.submit-testi-section {
    padding: 80px 0;
    background-color: #f8fafc;
}

.testi-form-card {
    max-width: 850px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 30px;
    padding: 50px;
    box-shadow: 0 20px 50px rgba(3, 17, 16, 0.05);
    border: 1px solid #f1f5f9;
}

.form-info {
    text-align: center;
    margin-bottom: 40px;
}

.form-info h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #031110;
    margin-bottom: 10px;
}

.form-info .highlight-gold {
    color: #d4a017; /* Warna Emas */
}

.form-info p {
    color: #64748b;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Styling Input & Label */
.royal-gform {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

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

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 0.85rem;
    font-weight: 700;
    color: #031110;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.input-group input, 
.input-group textarea {
    padding: 15px 20px;
    border: 2px solid #f1f5f9;
    border-radius: 12px;
    font-family: inherit;
    font-size: 1rem;
    background: #fdfdfd;
    transition: all 0.3s ease;
}

.input-group input:focus, 
.input-group textarea:focus {
    outline: none;
    border-color: #0d5c56; /* Warna Biru Royal */
    background: #ffffff;
    box-shadow: 0 5px 15px rgba(13, 92, 86, 0.05);
}

/* Tombol Kirim */
.btn-send-testi {
    background: #0d5c56;
    color: #ffffff;
    border: none;
    padding: 18px;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    transition: all 0.3s ease;
    margin-top: 10px;
}

.btn-send-testi:hover {
    background: #d4a017;
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(212, 160, 23, 0.2);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .submit-testi-section {
        padding: 50px 0; /* Kurangi padding atas-bawah di HP */
    }
    
    .testi-form-card {
        padding: 30px 20px;
        border-radius: 20px; /* Lengkungan dikurangi biar pas di layar sempit */
    }

    .form-info {
        margin-bottom: 25px;
    }

    .form-info h3 {
        font-size: 1.5rem; /* Ukuran judul form disesuaikan */
    }
    
    .form-info p {
        font-size: 0.9rem; /* Teks paragraf lebih proporsional */
    }

    .royal-gform {
        gap: 15px; /* Jarak antar bagian form dirapatkan */
    }

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

    .input-group input, 
    .input-group textarea {
        padding: 12px 15px; /* Kolom input lebih ringkas tapi tetap gampang diklik jari */
        font-size: 0.95rem;
    }

    .btn-send-testi {
        padding: 15px;
        font-size: 1rem;
    }
}



/* =========================================
   [UPDATED] BANNER CTA - ROYAL BORNEO COLORS
   ========================================= */
.banner-ramping {
    width: 100%;
    height: 400px; 
    border-top: 50px solid #ffffff;
    border-bottom: 50px solid #ffffff;
    box-sizing: content-box; 
    background-color: #ffffff !important; 
    /* Gradasi pake warna dasar biru gelap kita */
    background: linear-gradient(rgba(3, 17, 16, 0.5), rgba(3, 17, 16, 0.8)), url('media/cta.png'); 
    background-size: cover;
    background-position: center 100%; 
    animation: scrollBannerBg 25s ease-in-out infinite alternate;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden;
}

.banner-isi h2 {
    font-family: 'Montserrat', sans-serif;
    color: #ffffff;
    font-size: clamp(2rem, 5vw, 3.5rem); 
    font-weight: 900;
    line-height: 0.95;
    text-transform: uppercase;
    letter-spacing: -2px;
    margin: 0;
    text-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.banner-isi h2 span {
    color: #d4a017; /* Ganti ke Emas biar matching sama Why Us & Testi */
}

/* Keyframe Animasi Latar Banner Naik-Turun Mulus */
@keyframes scrollBannerBg {
    0% {
        background-position: center 100%; /* Mulai dari gambar bagian paling bawah */
    }
    100% {
        background-position: center 0%; /* Jalan mulus ke bagian atas */
    }
}

/* Keyframe Animasi Zoom Mulus Khusus Mobile */
@keyframes zoomBannerBgMobile {
    0% {
        background-size: 180%;
        background-position: center;
    }
    100% {
        background-size: 240%;
        background-position: center;
    }
}

/* Biar pas di HP tetep ramping */
@media (max-width: 768px) {
    .banner-ramping {
        height: 300px; 
        background-color: #ffffff !important; 
        background-attachment: scroll; 
        /* Ganti animasi scroll vertikal jadi animasi zoom mulus di HP */
        animation: zoomBannerBgMobile 20s ease-in-out infinite alternate;
    }
    .banner-isi h2 {
        letter-spacing: -1px;
    }
}


/* --- FAQ SECTION --- */
.faq-section {
    padding: 100px 0;
    background-color: #ffffff; /* Latar Putih */
}

.faq-header {
    text-align: center;
    margin-bottom: 60px;
    padding: 0 20px;
}

.faq-header h2 {
    font-family: 'Montserrat', sans-serif;
    color: var(--dark-blue);
    font-size: clamp(2rem, 5vw, 2.8rem);
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 15px;
    letter-spacing: -1px;
}

.faq-header .highlight-gold {
    color: var(--accent-gold);
}

.faq-header p {
    color: var(--text-main);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* FAQ Grid & Items */
.faq-grid {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.faq-item {
    background: #f8fafc;
    border-radius: 20px;
    overflow: hidden;
    transition: 0.3s;
    border: 1px solid #e2e8f0;
}

.faq-item.active {
    border-color: var(--primary-teal);
    box-shadow: 0 10px 25px rgba(13, 92, 86, 0.08);
}

/* Question Area */
.faq-question {
    padding: 25px 30px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.faq-question h4 {
    font-family: 'Plus Jakarta Sans', sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    color: #031110;
    margin: 0;
    padding-right: 15px;
}

.faq-question i {
    color: var(--primary-teal);
    transition: 0.4s;
    font-size: 0.9rem;
}

.faq-item.active .faq-question i {
    transform: rotate(180deg);
}

/* Answer Area */
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: #ffffff;
}

.faq-item.active .faq-answer {
    max-height: 500px; /* Nilai besar agar konten tidak kepotong */
    padding-bottom: 25px;
}

.faq-answer p {
    padding: 0 30px 25px;
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.7;
    margin: 0;
}

.faq-answer b {
    color: var(--primary-teal);
}




/* --- FOOTER LOGO TEXT --- */
.footer-logo-text {
    font-family: 'Rowdies', sans-serif;
    font-size: clamp(4rem, 15vw, 15rem); /* Teks Raksasa! Mengambil proporsi besar dari layar */
    font-weight: 900;
    text-align: center;
    color: #fafafa;
    letter-spacing: 5px; /* Spasi direnggangkan biar seimbang dengan ukuran besar */
    margin-bottom: 40px; /* Jarak ke bawah dilegakan */
    line-height: 1; /* Biar tinggi teks gak kelebihan */
    background: transparent !important; /* Paksa hilangin kotak warna (kuning/lainnya) di belakang logo */
}

/* --- FOOTER BAWAH (AREA GELAP: TAGLINE, SOSMED, MENU, CR) --- */

/* 1. Bungkus paling luar kita paksa PUTIH biar nutupin background body yang ijo */
.bottom-footer {
    background-color: #ffffff !important; /* Latar dasar dibikin putih */
    width: 100%;
    padding: 120px 20px 60px !important; /* Padding digedein biar kotaknya muat buat teks raksasa */
    margin-bottom: 0 !important; 
    display: flex;
    justify-content: center;
    position: relative; /* WAJIB ada biar layernya gak kabur */
    z-index: 1; 
}

/* 2. Ini triknya! Kita bikin layer ijo gelap melengkung di dalemnya */
.bottom-footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--dark-blue); /* Warna ijo super gelap */
    
    /* Lengkungan ditaruh di layer ini */
    border-top-left-radius: 80px !important;
    border-top-right-radius: 80px !important;
    
    z-index: -1; /* Posisinya kita dorong ke paling belakang (di bawah teks) */
}

/* 3. Area container biarin transparan aja */
.bottom-footer .container {
    background-color: transparent !important; 
    width: 100%;
    max-width: 1200px !important; 
    padding: 0 !important; 
    margin: 0 auto;
    border-radius: 0 !important; 
    box-shadow: none !important; 
}

/* Responsif buat di HP */
@media (max-width: 768px) {
    .bottom-footer {
        padding: 80px 20px 40px !important; /* Kotak di HP juga dilebarin */
    }
    .bottom-footer::before {
        border-top-left-radius: 40px !important; /* Lengkungan dikecilin dikit di HP */
        border-top-right-radius: 40px !important;
    }
}

/* Tagline di Area Ijo (Warnanya dibikin putih transparan) */
.footer-tagline-ijo {
    max-width: 600px;
    color: rgba(255, 255, 255, 0.8); 
    line-height: 1.6;
    margin: 0 auto 25px;
    font-size: 1rem;
}

/* =========================================
    FOOTER AREA - ROYAL BORNEO (TRUE NAVY)
   ========================================= */

/* Latar Belakang Utama Footer - FIXED NAVY */
.bottom-footer {
    padding: 60px 0 30px;
    color: #ffffff;
}

/* Sosmed Area */
.footer-social-ijo {
    display: flex;
    gap: 15px;
    justify-content: center;
    margin-bottom: 35px;
}

.footer-social-ijo a {
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.05); 
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    text-decoration: none;
    font-size: 1.2rem;
    transition: 0.3s;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-social-ijo a:hover {
    background: #d4a017; /* Emas Royal */
    color: #ffffff;
    transform: translateY(-5px);
    border-color: #d4a017;
    box-shadow: 0 5px 15px rgba(212, 160, 23, 0.4);
}

/* Navigasi Link */
.footer-nav-rapi {
    list-style: none;
    display: flex;
    gap: 30px;
    padding: 0;
    margin: 0 auto 30px;
    flex-wrap: wrap;
    justify-content: center;
}

.footer-nav-rapi a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: 0.3s;
}

.footer-nav-rapi a:hover {
    color: #d4a017; /* Hover Emas */
}

/* Garis Pembatas Tipis */
.footer-divider-rapi {
    width: 100%;
    max-width: 600px;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(255,255,255,0.15), transparent);
    margin: 0 auto 25px;
}

/* Copyright Area */
.footer-copyright p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.footer-copyright .highlight-orange {
    color: #d4a017; /* Brand jadi Emas */
    font-weight: 800;
}

.dev-signature {
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.2) !important;
}

/* Responsif Mobile */
@media (max-width: 768px) {
    .footer-nav-rapi {
        gap: 15px;
    }
    .footer-nav-rapi a {
        font-size: 0.8rem;
    }
    .bottom-footer {
        padding: 40px 0 20px;
    }
}





/* === RESPONSIVE FIX (MOBILE) === */
@media (max-width: 768px) {
    /* 1. Benerin Hero & Kotak Biru (Brand Story) */
    .hero-section {
        min-height: 750px; /* Bikin background hero lebih panjang */
    }

    /* Bikin form pencarian lebih mungil & responsif di semua jenis layar HP */
    .advanced-search-wrapper {
        width: 90% !important; /* Pakai persentase biar elastis nyesuaiin layar HP sekecil apapun */
        max-width: 400px; /* Mentok jangan terlalu lebar kalau layarnya gedean dikit */
        padding: 0;
        bottom: -140px; /* Naikin sedikit karena ukuran kotaknya udah meramping */
    }

    .advanced-search-box {
        padding: 15px; /* Bantalan kotak lebih pipih/kurus */
        border-radius: 15px;
    }

    .search-field {
        padding: 10px 5px; /* Rapatkan area isian dropdown */
    }

    .search-field label {
        font-size: 10px; /* Teks label "Destinasi, Tipe, Harga" dikecilin sedikit */
    }

    .search-select {
        font-size: 14px; /* Teks pilihan diperkecil biar proporsional */
        background-size: 9px; /* Panah ke bawah disesuaikan besarnya */
    }

    .btn-advanced-search {
        padding: 12px 20px; /* Tombol dirampingkan biar gak terlalu tebal di HP */
        font-size: 14px;
        border-radius: 10px;
        margin-top: 5px;
    }

    .brand-story-stats {
        padding-top: 220px; /* Kurangi dorongan teks ke bawah karena kotak pencariannya udah lebih pendek */
        padding-bottom: 80px;
        border-bottom-left-radius: 40px;
        border-bottom-right-radius: 40px;
    }

    .philosophy-text h2 {
        margin-bottom: 120px; /* Jarak ke grid statistik dilebarkan di HP biar lebih lega */
    }

    /* 2. Benerin Grid Angka Statistik */
    .stats-grid {
        grid-template-columns: 1fr 1fr; /* Di HP numpuk 2 kolom */
        gap: 40px 10px;
        margin-top: 20px; /* Tambahan sedikit dorongan ekstra ke bawah */
    }

    .stat-item:nth-child(3) {
        grid-column: span 2; /* Kepuasan Peserta full width di tengah */
    }

    .stat-item h3 {
        font-size: 2.5rem;
    }
}