/* --- Pengaturan Dasar yang Ramah Pembaca & Modern --- */
/* --- Efek Gulir Halus (Smooth Scrolling) --- */
html {
    scroll-behavior: smooth;
}
body {
    font-family: 'Poppins', sans-serif; /* Berubah menjadi Poppins */
    font-size: 18px; 
    line-height: 1.8; 
    margin: 0;
    padding: 0;
    background-color: #FFCB05; 
    color: #222222; 
}

/* --- Mengubah Bentuk Huruf Judul --- */
h1, h2, h3, .logo-container {
    font-family: 'Quicksand', sans-serif;
}

/* --- Bagian Kepala (Header) Ceria & Profesional --- */
.bimbapedia-header {
    /* --- Menggunakan Warna Pink dari Gambar Referensi Bimbapedia --- */
    background-color: #EE536A; /* Warna Pink (seperti gelembung judul di referensi) */
    color: #ffffff; /* Teks putih untuk kontras */
    text-align: center;
    padding: 60px 20px; /* Padding besar yang modern */
    border-radius: 0 0 50px 50px; /* Sudut melengkung modern di bagian bawah */
}

.logo-container {
    font-weight: bold;
    font-size: 3em; /* Teks logo sangat besar */
    margin-bottom: 10px;
}

.logo-bimba {
    color: #ffffff; /* Teks "Bimba" putih */
}

.logo-pedia {
    /* --- Menggunakan Warna Biru dari Gambar Referensi Bimbapedia --- */
    color: #00B5E2; /* Teks "Pedia" biru (seperti warna rumput/langit di referensi) */
}

.bimbapedia-header .header-tagline {
    font-size: 1.2em;
    margin-top: 15px;
    font-weight: 500;
}

/* --- Menu Navigasi --- */
.bimbapedia-nav {
    /* --- Menggunakan Warna Pink sebagai Latar Belakang Nav --- */
    background-color: #EE536A; 
    border-top: 2px solid #FFCB05; /* Garis batas kuning */
    border-bottom: 2px solid #FFCB05;
}

.bimbapedia-nav {
    background-color: #EE536A; 
    border-top: 2px solid #FFCB05;
    border-bottom: 2px solid #FFCB05;
    /* --- Kode tambahan agar menu menempel di atas --- */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.bimbapedia-nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: center;
}

.bimbapedia-nav ul li {
    display: inline-block;
}

.bimbapedia-nav ul li a {
    display: block;
    color: white;
    font-weight: bold; /* Teks menu ditebalkan */
    font-size: 1.1em;
    padding: 18px 25px; /* Area klik diperbesar */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s; /* Efek halus */
}

/* --- Menggunakan Warna Biru dari Gambar Referensi untuk Hover --- */
.bimbapedia-nav ul li a:hover {
    background-color: #00B5E2; /* Warna Biru Langit saat hover */
    color: #ffffff;
}

/* --- Container Utama --- */
.main-container {
    max-width: 900px; /* Lebar container lebih luas */
    margin: 40px auto;
    padding: 0 20px; /* Padding samping */
}

/* --- Kotak Konten Utama (About) - Putih untuk Keterbacaan --- */
.konten-kotak.white-box {
    padding: 40px;
    background-color: white; /* Putih bersih */
    border-radius: 12px; /* Sudut membulat modern */
    box-shadow: 0 8px 20px rgba(0,0,0,0.06); /* Bayangan halus */
    margin-bottom: 30px; /* Jarak dari bagian mitra */
}

/* --- Menggunakan Warna Biru dari Gambar Referensi untuk Judul H2 --- */
.main-container h2 {
    color: #00B5E2; /* Warna Biru Langit untuk Judul H2 */
    font-size: 2.2em;
    margin-bottom: 20px;
    border-bottom: 4px solid #EE536A; /* Garis bawah pink */
    display: inline-block;
    padding-bottom: 10px;
}

/* --- Kotak Konten Kemitraan (Yellow Box) --- */
.konten-kotak.yellow-box.kemitraan-section {
    padding: 40px;
    background-color: white; /* Kotak konten utama kemitraan juga putih agar mudah dibaca */
    border-radius: 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.06);
    border: 4px solid #00B5E2; /* Batas biru untuk penekanan */
    margin-bottom: 30px;
}

/* --- Tombol Kemitraan (Ajakan Bertindak) --- */
.mitra-button {
    display: inline-block;
    /* --- Menggunakan Warna Biru dari Gambar Referensi --- */
    background-color: #00B5E2; /* Warna Biru Tombol */
    color: white;
    padding: 15px 30px;
    font-size: 1.1em;
    font-weight: bold;
    text-decoration: none;
    border-radius: 30px; /* Tombol melengkung modern */
    margin-top: 20px;
    transition: background-color 0.3s;
}

.mitra-button:hover {
    background-color: #EE536A; /* Ubah ke Pink saat hover */
}

/* --- Bagian Disclaimer PDKI di Bawah --- */
.pdki-info {
    color: #333333;
    font-size: 0.85em;
    text-align: center;
    margin-top: 50px;
    border-top: 1px solid #ccc;
    padding-top: 20px;
}

.pdki-info a {
    color: #EE536A; /* Link pink */
    text-decoration: underline;
}
/* --- Desain Bagian Program Belajar (Kartu) --- */
.program-container {
    display: flex; /* Membuat kotak berjajar menyamping di laptop */
    gap: 20px; /* Jarak antar kartu */
    margin-top: 30px;
}

.program-card {
    flex: 1; /* Membuat ukuran kartu seimbang kiri dan kanan */
    padding: 30px;
    border-radius: 15px; /* Sudut melengkung yang sangat kekinian */
    color: white;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1); /* Efek bayangan halus */
    transition: transform 0.3s ease; /* Animasi mulus saat disentuh mouse */
}

.program-card:hover {
    transform: translateY(-10px); /* Efek ajaib: Kartu akan terangkat sedikit ke atas saat mouse diarahkan ke sini! */
}

.program-card h3 {
    margin-top: 0;
    font-size: 1.6em;
    margin-bottom: 15px;
}

.program-card p {
    font-size: 1em; /* Menggunakan ukuran font normal di dalam kotak */
}

.pink-card {
    background-color: #EE536A; /* Warna Pink Bimbapedia */
}

.blue-card {
    background-color: #00B5E2; /* Warna Biru Bimbapedia */
}

/* --- Kode ini agar website tampil rapi di HP (Responsif) --- */
@media (max-width: 768px) {
    .program-container {
        flex-direction: column; /* Di HP, kartu akan berjejer ke bawah, bukan menyamping */
    }
}
/* --- Desain Bagian Kontak --- */
.kontak-info {
    background-color: #f7f9fc; 
    padding: 25px;
    border-radius: 10px;
    margin-top: 25px;
    border-left: 8px solid #EE536A; 
    /* --- KODE BARU: Memaksa teks panjang (seperti email) turun ke baris baru --- */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* --- Desain Footer (Penutup Bawah) --- */
footer {
    background-color: #333333; /* Warna gelap agar terlihat sebagai penutup */
    color: white;
    text-align: center;
    padding: 25px 20px;
    margin-top: 40px;
    font-size: 0.9em;
}
/* =======================================================
   KODE KHUSUS UNTUK TAMPILAN HP (RESPONSIVE DESIGN)
   ======================================================= */
   /* --- Desain Tombol Garis 3 (Sembunyi di Layar Laptop) --- */
.menu-toggle {
    display: none; 
    cursor: pointer;
    padding: 15px 20px;
}

.menu-toggle span {
    display: block;
    height: 3px;
    width: 25px;
    background-color: white;
    margin-bottom: 5px;
    border-radius: 5px;
}
@media (max-width: 768px) {
    /* 1. Mengecilkan Header dan Logo */
    .bimbapedia-header {
        padding: 30px 15px; /* Jarak atas bawah dikurangi */
        border-radius: 0 0 30px 30px; /* Lengkungan disesuaikan */
    }
    
    .logo-container {
        font-size: 2em; /* Ukuran logo dikecilkan agar tidak kepotong */
    }

    .bimbapedia-header .header-tagline {
        font-size: 1em;
    }

   /* 2. Mengaktifkan Menu Garis 3 di HP (Hamburger Menu) */
    .menu-toggle {
        display: block; /* Memunculkan tombol garis 3 di HP */
    }

    .bimbapedia-nav ul {
        display: none; /* Sembunyikan daftar menu ke bawah secara default */
        flex-direction: column;
        width: 100%;
        background-color: #EE536A; /* Latar belakang menu pink */
    }

    /* Kelas "tampil" ini akan dipicu oleh JavaScript saat tombol diklik */
    .bimbapedia-nav ul.tampil {
        display: flex; 
    }

    .bimbapedia-nav ul li {
        display: block;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }

    .bimbapedia-nav ul li:last-child {
        border-bottom: none;
    }

    .bimbapedia-nav ul li a {
        padding: 15px 20px;
    }
    /* =========================================
       5. PERBAIKAN TAMPILAN KEMITRAAN DI HP
       ========================================= */
    .paket-box {
        padding: 25px 15px; /* Mengurangi jarak pinggir agar tidak luber */
    }

    .paket-box .harga {
        font-size: 2em; /* Mengecilkan teks harga agar pas di HP */
        padding: 5px 10px;
    }

    .list-fasilitas {
        grid-template-columns: 1fr; /* KUNCI: Mengubah dari 2 kolom menjadi 1 kolom saja di HP */
        max-width: 100%;
    }

    .list-fasilitas li:first-child {
        grid-column: 1; /* Mengembalikan lisensi agar mengikuti 1 kolom standar */
    }
}
/* =======================================================
   EFEK ANIMASI SCROLL (FADE IN & FADE OUT HALUS)
   ======================================================= */
.elemen-animasi {
    opacity: 0; /* Menghilang di awal */
    transform: translateY(50px); /* Turun sedikit ke bawah */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Kecepatan transisi yang sangat halus */
}

/* Kelas ini ditambahkan oleh JavaScript saat layar digulir */
.elemen-animasi.muncul {
    opacity: 1; /* Muncul penuh */
    transform: translateY(0); /* Kembali ke posisi semula */
}
/* =======================================================
   DESAIN KARTU PAKET KEMITRAAN
   ======================================================= */
.paket-box {
    text-align: center;
    margin-top: 30px;
    padding: 40px 20px;
}

.paket-box h3 {
    color: #00B5E2; /* Judul paket warna biru */
    font-size: 1.8em;
    margin-top: 0;
}

.paket-box .harga {
    font-family: 'Quicksand', sans-serif;
    font-size: 2.8em;
    font-weight: bold;
    color: #333333;
    margin: 10px 0;
    background-color: #FFCB05; /* Highlight kuning di belakang harga */
    display: inline-block;
    padding: 5px 20px;
    border-radius: 15px;
}

.paket-box .subtitle-paket {
    font-weight: 600;
    color: #EE536A;
    font-size: 1.1em;
}

/* =======================================================
   DESAIN DAFTAR FASILITAS (PAKSA 2 KOLOM)
   ======================================================= */
.list-fasilitas {
    list-style-type: none;
    padding: 0;
    text-align: left;
    max-width: 750px; 
    margin: 25px auto;
    font-size: 1em;
    display: grid; /* Mengaktifkan fitur kotak-kotak */
    grid-template-columns: 1fr 1fr; /* INI KUNCINYA: Memaksa 8 list sisa menjadi persis 2 kolom (kiri & kanan) */
    gap: 15px; /* Jarak antar kotak */
}

.list-fasilitas li {
    padding: 12px 15px;
    background-color: #f7f9fc;
    border-radius: 8px;
    border-left: 4px solid #00B5E2;
    display: flex;
    align-items: center;
}

/* --- Khusus List Pertama (Lisensi) --- */
.list-fasilitas li:first-child {
    grid-column: 1 / -1; /* Trik jitu agar kotak lisensi selalu membentang dari ujung paling kiri ke paling kanan */
    justify-content: center; /* Teks lisensi persis di tengah */
    background-color: #e6f7ff;
    border-left: none;
    border-bottom: 4px solid #00B5E2;
}
/* =======================================================
   PERBAIKAN TAMPILAN KEMITRAAN HP (HARUS DI PALING BAWAH)
   ======================================================= */
@media (max-width: 768px) {
    .paket-box {
        padding: 25px 15px;
    }
    
    .paket-box .harga {
        font-size: 2em; 
        padding: 5px 10px;
    }
    
    .list-fasilitas {
        grid-template-columns: 1fr; /* Memaksa jadi 1 kolom di HP */
    }
    
    .list-fasilitas li:first-child {
        grid-column: 1; /* Mengembalikan lisensi ke ukuran normal 1 kolom */
    }
}
/* =======================================================
   DESAIN SLIDER FOTO KEMITRAAN (EFEK FADE IN / OUT)
   ======================================================= */
.slider-fasilitas {
    position: relative;
    max-width: 600px;
    height: 350px; /* Tinggi kotak foto */
    margin: 25px auto;
    border-radius: 12px;
    overflow: hidden;
    background-color: #f0f0f0; /* Warna dasar jika foto belum dimuat */
    box-shadow: 0 5px 15px rgba(0,0,0,0.15);
    border: 3px solid #00B5E2;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0; /* Semua foto disembunyikan di awal */
    transition: opacity 1s ease-in-out; /* INI KUNCI ANIMASI FADE-NYA: Sangat Halus! */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 0;
}

.slide.aktif {
    opacity: 1; /* Hanya foto yang "aktif" yang dimunculkan */
    z-index: 1;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Memaksa foto mengisi kotak dengan rapi tanpa gepeng */
}

.teks-foto {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(238, 83, 106, 0.85); /* Pita warna pink transparan di bawah foto */
    color: white;
    padding: 12px 0;
    font-family: 'Quicksand', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
}

/* --- Desain Tombol Segitiga (Panah) Kiri Kanan --- */
.slider-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(255, 203, 5, 0.8); /* Warna kuning Bimbapedia */
    color: #222;
    border: none;
    font-size: 20px;
    padding: 12px 16px;
    cursor: pointer;
    z-index: 2; /* Pastikan tombol di atas foto */
    border-radius: 5px;
    transition: 0.3s;
}

.slider-btn:hover {
    background-color: #00B5E2;
    color: white;
}

.slider-btn.prev {
    left: 10px; /* Segitiga kiri */
}

.slider-btn.next {
    right: 10px; /* Segitiga kanan */
}

/* Penyesuaian tinggi foto di HP agar tidak terlalu memakan tempat */
@media (max-width: 768px) {
    .slider-fasilitas {
        height: 250px; 
    }
    /* --- Mengecilkan Ukuran Slider di HP --- */
    .slider-fasilitas {
        height: 200px; /* Mengecilkan tinggi kotak foto agar tidak kepanjangan */
        margin: 15px auto;
    }

    .teks-foto {
        font-size: 0.9em; /* Mengecilkan teks pink di bawah foto */
        padding: 8px 0;
    }

    .slider-btn {
        font-size: 14px; /* Mengecilkan ikon panah */
        padding: 8px 12px; /* Mengecilkan kotak tombol panah */
    }
}
/* =======================================================
   PERBAIKAN BINGKAI KOTAK & ANTI FOTO TERPOTONG
   ======================================================= */
.slider-fasilitas {
    max-width: 450px !important;  /* Ukuran di Laptop (tidak terlalu besar) */
    height: 450px !important;     /* Tinggi disamakan dengan lebar agar berbentuk KOTAK */
    background-color: #ffffff !important; /* Latar belakang putih bersih */
}

.slide img {
    object-fit: contain !important; /* INI KUNCINYA: Memaksa foto tampil utuh 100% tanpa dipotong */
}

/* Penyesuaian agar tetap presisi menjadi kotak di layar HP */
@media (max-width: 768px) {
    .slider-fasilitas {
        max-width: 300px !important; /* Ukuran yang pas untuk layar HP */
        height: 300px !important;    /* Tetap dipertahankan bentuk Kotak */
        margin: 15px auto !important;
    }
}
/* =======================================================
   UKURAN LOGO HEADER
   ======================================================= */
.logo-gambar {
    max-width: 250px; /* Ukuran proporsional untuk layar laptop */
    height: auto; 
    margin-bottom: 10px;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* Memastikan ukuran logo menyesuaikan dengan cantik saat dibuka di HP */
@media (max-width: 768px) {
    .logo-gambar {
        max-width: 180px; 
    }
}
/* =======================================================
   UKURAN LOGO BESAR TAPI KOTAK TETAP RAMPING
   ======================================================= */
header {
    padding-top: 10px !important;  /* Memangkas ruang kosong di atas logo */
    padding-bottom: 40px !important;  /* Memangkas ruang kosong di bawah */
}

.logo-gambar {
    max-width: 550px !important; /* Logo tetap besar dan jelas */
    height: auto !important; 
    margin-top: 0 !important;
    margin-bottom: -80px !important; /* Mendekatkan logo dengan tulisan putih di bawahnya */
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Penyesuaian proporsional untuk HP */
@media (max-width: 768px) {
    header {
        padding-top: 15px !important;
    }
    .logo-gambar {
        max-width: 220px !important; 
    }
}
@keyframes slideNaikMemudar {
    0% {
        opacity: 0; /* Mulai dalam keadaan 100% transparan (hilang) */
        transform: translateY(60px); /* Posisi awal agak ke bawah (turun 60px) */
    }
    100% {
        opacity: 1; /* Berakhir dengan terlihat sepenuhnya */
        transform: translateY(0); /* Berakhir persis di posisi normalnya */
    }
}

/* 2. Menerapkan Animasi ke Kotak Konten Kemitraan */
.paket-box {
    opacity: 0; /* Sembunyikan dulu sesaat sebelum animasi dimulai */
    animation: slideNaikMemudar 0.8s ease-out forwards; /* 0.8s adalah durasi kecepatannya */
}
/* =======================================================
   ANIMASI SLIDE FADE-IN OTOMATIS (HALAMAN KEMITRAAN)
   ======================================================= */
.muncul-otomatis {
    opacity: 0; /* Mulai dari hilang/transparan */
    /* Paksa jalankan animasi 'efekSlideMasuk' selama 0.8 detik */
    animation: efekSlideMasuk 0.8s ease-out forwards !important; 
}

@keyframes efekSlideMasuk {
    0% {
        opacity: 0;
        transform: translateY(80px); /* Posisi awal dari bawah */
    }
    100% {
        opacity: 1; /* Terlihat utuh */
        transform: translateY(0); /* Kembali ke posisi semula */
    }
}
/* =======================================================
   DESAIN ANGKA STATISTIK MITRA
   ======================================================= */
.statistik-mitra {
    text-align: center;
    padding: 10px 0;
}

.angka-grup {
    font-size: 4.5em; /* Ukuran angka sangat besar */
    font-weight: 800; /* Cetak sangat tebal */
    color: #00B5E2; /* Warna Biru Bimbapedia */
    line-height: 1;
    display: inline-block;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1); /* Sedikit bayangan agar elegan */
}

.angka-grup .plus {
    color: #EE536A; /* Tanda plus (+) berwarna Pink */
    font-size: 0.8em;
}

.teks-mitra {
    font-size: 1.3em;
    color: #555;
    font-weight: bold;
    margin-top: 5px;
    letter-spacing: 1px;
}

/* Penyesuaian ukuran jika dibuka di layar HP */
@media (max-width: 768px) {
    .angka-grup {
        font-size: 3.5em; 
    }
    .teks-mitra {
        font-size: 1.1em;
    }
}
/* =======================================================
   PERBAIKAN BUG KHUSUS TAMPILAN HP (TANPA JEDA PUTIH)
   ======================================================= */
@media (max-width: 768px) {
    
    .logo-gambar {
        margin-bottom: 15px !important; 
    }
    
    /* 1. Kembalikan wujud bingkai menjadi kotak sempurna (1x1) */
    .slider-fasilitas {
        width: 100% !important;
        max-width: 320px !important;
        aspect-ratio: 1 / 1 !important; /* KUNCI: Menjaga bingkai tetap terbuka dan berbentuk kotak */
        height: auto !important; 
        margin: 15px auto !important; 
        padding: 0 !important;          /* Menghapus bantalan/jeda putih */
        overflow: hidden !important;    /* Merapikan isi di dalamnya */
        position: relative !important;
    }
    
    /* 2. Paksa foto memeluk erat seluruh sisi bingkai */
    .slide img {
        width: 100% !important;
        height: 100% !important;      /* KUNCI: Foto mengisi 100% tinggi bingkai */
        object-fit: cover !important; /* Memastikan foto tidak gepeng */
        display: block !important;
    }
    
    .paket-box {
        margin-left: 10px !important;
        margin-right: 10px !important;
    }
}
/* =======================================================
   PENGATURAN KOTAK PROGRAM BERJEJER KE BAWAH DI HP (KOMPAK)
   ======================================================= */
@media (max-width: 768px) {
    .sejajar-di-hp {
        display: flex !important;
        flex-direction: column !important; /* Memaksa kotak tersusun dari atas ke bawah */
        gap: 15px !important;              /* Jarak antar kotak agar tidak terlalu renggang */
    }
    
    .sejajar-di-hp > div {
        width: 100% !important;            /* Lebar memenuhi layar */
        margin: 0 !important; 
        padding: 15px 20px !important;     /* Padding dipangkas agar kotak tidak terlalu panjang ke bawah */
        box-sizing: border-box !important;
    }
    
    .sejajar-di-hp > div h3 {
        font-size: 1.2em !important;       /* Ukuran judul disesuaikan agar rapi */
        margin-bottom: 8px !important;     /* Memangkas jarak kosong di bawah judul */
    }
    
    .sejajar-di-hp > div p {
        font-size: 0.9em !important;       /* Ukuran teks deskripsi pas dan ringkas */
        line-height: 1.4 !important;
    }
}

.foto-bawah-container {
    text-align: center;
    margin-top: 25px !important;
}

.foto-bawah-welcome {
    width: 100% !important;
    max-width: 650px !important; 
    aspect-ratio: 4 / 3 !important; 
    height: auto !important;
    object-fit: cover !important; 
    border-radius: 15px !important; 
    box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important; 
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

@media (max-width: 768px) {
    .foto-bawah-welcome {
        max-width: 100% !important; 
        aspect-ratio: 4 / 3 !important; 
        object-fit: cover !important;
    }
}
/* =======================================================
   DESAIN TOMBOL "PELAJARI LEBIH LANJUT"
   ======================================================= */
.tombol-pelajari {
    display: inline-block !important;
    background-color: #00B5E2 !important; /* Warna Biru Bimbapedia */
    color: white !important;              /* Warna teks putih agar kontras */
    padding: 10px 24px !important;        /* Ukuran ketebalan dan panjang tombol */
    border-radius: 30px !important;       /* Membuat sudutnya melengkung halus */
    font-weight: bold !important;
    font-size: 1em !important;
    margin-top: 15px !important;
    box-shadow: 0 4px 10px rgba(0, 181, 226, 0.3) !important; /* Efek bayangan tombol */
    transition: all 0.3s ease !important; /* Transisi halus saat tersentuh */
}

/* Efek saat kursor diarahkan ke tombol */
.tombol-pelajari:hover {
    background-color: #0093b5 !important; /* Biru sedikit lebih gelap saat disentuh */
    transform: translateY(-2px !important); /* Efek tombol sedikit terangkat ke atas */
    box-shadow: 0 6px 15px rgba(0, 181, 226, 0.4) !important;
}
/* =======================================================
   PENGATURAN SLIDER OTOMATIS PROGRAM BELAJAR
   ======================================================= */
.slider-fasilitas {
    width: 100% !important;
    max-width: 450px !important;
    aspect-ratio: 4 / 3 !important;
    margin: 20px auto !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    position: relative !important;
    background-color: #fff !important;
}

.slider-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    transition: transform 0.6s ease-in-out !important;
}

.slide {
    min-width: 100% !important;
    height: 100% !important;
}

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}
/* =======================================================
   PERBAIKAN CSS SLIDER (AGAR KOTAK TIDAK KEPENG/KOSONG)
   ======================================================= */
.slider-fasilitas {
    width: 100% !important;
    max-width: 500px !important;
    aspect-ratio: 4 / 3 !important; /* Menjaga rasio kotak tetap 4:3 */
    margin: 20px auto !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    position: relative !important; /* KUNCI UTAMA */
    background-color: #f9f9f9 !important;
}

.slider-wrapper {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important; /* KUNCI UTAMA: Menyesuaikan tinggi kotak */
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.6s ease-in-out !important;
}

.slide {
    min-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

.slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Memastikan foto pas tanpa distorsi */
    display: block !important;
}
/* =======================================================
   KODE KHUSUS SLIDER PROGRAM BELAJAR (TANPA BENTROK)
   ======================================================= */
.slider-program {
    width: 100% !important;
    max-width: 500px !important;
    aspect-ratio: 4 / 3 !important; /* Menjaga rasio kotak tetap 4:3 yang rapi */
    margin: 20px auto !important;
    overflow: hidden !important;
    border-radius: 15px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    position: relative !important;
    background-color: #f9f9f9 !important;
}

.wrapper-program {
    display: flex !important;
    width: 100% !important;
    height: 100% !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    transition: transform 0.6s ease-in-out !important;
}

.item-slide {
    min-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    flex-shrink: 0 !important;
}

.item-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Memastikan foto pas tanpa distorsi/gepeng */
    display: block !important;
}
/* =======================================================
   SLIDER FADE IN / FADE OUT KHUSUS PROGRAM BELAJAR
   ======================================================= */
.slider-program {
    position: relative !important;
    width: 100% !important;
    max-width: 500px !important;
    aspect-ratio: 4 / 3 !important; /* Menjaga rasio kotak tetap 4:3 yang rapi */
    margin: 20px auto !important;
    border-radius: 15px !important;
    overflow: hidden !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    background-color: #fff !important;
}

.slider-program .item-slide {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important; /* Semua foto disembunyikan di awal */
    transition: opacity 1s ease-in-out !important; /* Efek transisi halus masuk & keluar */
    z-index: 0 !important;
}

.slider-program .item-slide.aktif {
    opacity: 1 !important; /* Hanya foto yang memiliki kelas 'aktif' yang dimunculkan */
    z-index: 1 !important;
}

.slider-program .item-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Memastikan foto pas tanpa distorsi/gepeng */
    display: block !important;
}
/* =======================================================
   DESAIN HARGA CORET DISKON KEMITRAAN
   ======================================================= */
.harga-coret {
    font-family: 'Quicksand', sans-serif !important;
    font-size: 1.4em !important;
    color: #d9534f !important;            /* Warna abu-abu kemerahan atau bisa disesuaikan */
    text-decoration: line-through !important; /* Efek garis coret */
    font-weight: bold !important;
    display: block !important;
    margin-bottom: -5px !important;       /* Mendekatkan posisi dengan kotak harga utama */
    opacity: 0.8 !important;
}
/* =======================================================
   INDIKATOR MENU AKTIF YANG DINAMIS & TIDAK KAKU
   ======================================================= */
.bimbapedia-nav ul li a {
    border-radius: 25px !important; /* Membuat sudut menu melengkung halus seperti tombol pil */
    margin: 0 4px !important;       /* Memberi jarak antar menu agar tidak saling menempel kaku */
    transition: all 0.3s ease-in-out !important; /* Transisi pergerakan agar halus */
}

/* =======================================================
   INDIKATOR MENU AKTIF MENYESUAIKAN WARNA PINK NAVBAR
   ======================================================= */
.bimbapedia-nav ul li a {
    border-radius: 25px !important;
    margin: 0 4px !important;
    transition: all 0.3s ease-in-out !important;
}

.bimbapedia-nav ul li a.aktif {
    background-color: rgba(255, 255, 255, 0.3) !important; /* Warna pill pink lembut/transparan sesuai contoh */
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1) !important;
    transform: translateY(-2px) !important;
    border-bottom: none !important;
}

.bimbapedia-nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    transform: translateY(-2px) !important;
}

/* =======================================================
   MODAL POP-UP SELAMAT DATANG DENGAN LATAR BLUR 50%
   ======================================================= */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Latar belakang transparan gelap 50% */
    backdrop-filter: blur(8px);           /* Efek blur halus di latar belakang */
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;                        /* Memastikan pop-up berada di lapisan paling atas */
    animation: fadeInModal 0.5s ease-out forwards;
}

@keyframes fadeInModal {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* =======================================================
   PENYESUAIAN UKURAN POP-UP: LEBIH LEBAR & COMPACT
   ======================================================= */
.modal-content {
    background: white !important;
    padding: 15px 20px !important;      /* Padding vertikal lebih tipis ke bawah */
    border-radius: 16px !important;
    text-align: center !important;
    max-width: 370px !important;        /* Dilebarkan ke samping agar lebih proporsional */
    width: 90% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    border: 3px solid #00B5E2 !important;
}

.modal-content h2 {
    color: #EE536A !important;
    font-size: 1.15em !important;       
    margin-bottom: 6px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.modal-content p {
    color: #555 !important;
    font-size: 0.8em !important;        
    margin-bottom: 12px !important;
}

.modal-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;                
}

.modal-buttons a {
    display: block !important;
    padding: 8px 12px !important;       /* Tombol lebih ringkas */
    border-radius: 25px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 0.85em !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}

.btn-les {
    background-color: #EE536A;
    color: white;
}

.btn-les:hover {
    background-color: #d44358;
    transform: translateY(-2px);
}

.btn-mitra {
    background-color: #00B5E2;
    color: white;
}

.btn-mitra:hover {
    background-color: #0093b5;
    transform: translateY(-2px);
}
/* =======================================================
   TAMBAHAN TOMBOL INFO WEBSITE & EFEK FADE-OUT MODAL
   ======================================================= */
.btn-info {
    background-color: #FFCB05 !important; /* Warna kuning khas Bimbapedia */
    color: #222222 !important;
}

.btn-info:hover {
    background-color: #e6b800 !important;
    transform: translateY(-2px);
}

/* Animasi Fade Out saat modal ditutup */
.modal-overlay.fade-out {
    animation: fadeOutModal 0.5s ease-out forwards !important;
}

@keyframes fadeOutModal {
    from {
        opacity: 1;
        visibility: visible;
    }
    to {
        opacity: 0;
        visibility: hidden;
    }
}
/* =======================================================
   PENGUNCI LAYAR (ANTI-SCROLL SAAT MODAL AKTIF)
   ======================================================= */
body.no-scroll {
    overflow: hidden !important;
    height: 100vh !important;
    position: relative !important;
}

/* Memastikan modal benar-benar berada di tengah layar secara presisi */
.modal-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    z-index: 9999 !important;
}
/* =======================================================
   MEMPERBESAR UKURAN LOGO DI ATAS POP-UP
   ======================================================= */
.modal-content {
    position: relative !important;
    background: white !important;
    padding: 55px 20px 20px 20px !important; /* Padding atas diperbesar agar teks tidak menabrak logo yang lebih besar */
    border-radius: 20px !important;
    text-align: center !important;
    max-width: 370px !important;
    width: 90% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    border: 3px solid #00B5E2 !important;
    margin-top: 40px !important; 
}

/* Wadah Logo Melingkar yang Diperbesar */
.modal-logo-container {
    position: absolute !important;
    top: -45px !important;             /* Menyesuaikan posisi ke atas */
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 95px !important;            /* Diperbesar dari 65px menjadi 95px */
    height: 95px !important;           /* Diperbesar dari 65px menjadi 95px */
    background: #ffffff !important;
    border-radius: 50% !important;
    border: 3px solid #00B5E2 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.modal-logo {
    width: 88% !important;
    height: auto !important;
    object-fit: contain !important;
}

.modal-content h2 {
    color: #EE536A !important;
    font-size: 1.15em !important;       
    margin-bottom: 6px !important;
    border-bottom: none !important;
    padding-bottom: 0 !important;
}

.modal-content p {
    color: #555 !important;
    font-size: 0.8em !important;        
    margin-bottom: 12px !important;
}

.modal-buttons {
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;                
}

.modal-buttons a {
    display: block !important;
    padding: 8px 12px !important;       
    border-radius: 25px !important;
    font-weight: bold !important;
    text-decoration: none !important;
    font-size: 0.85em !important;
    transition: transform 0.2s ease, background-color 0.2s ease !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}

/* =======================================================
   PERBAIKAN TAMPILAN KHUSUS LAYAR HP (POP-UP & KEMITRAAN)
   ======================================================= */
@media (max-width: 768px) {
    /* 1. Jarak Aman Pop-up di HP */
    .modal-content {
        max-width: 310px !important;
        width: 84% !important;
        box-sizing: border-box !important;
        margin: 0 auto !important;
    }

    /* 2. Memaksa Wadah Utama Kemitraan Turun ke Bawah */
    .paket-container, 
    .kemitraan-container,
    .program-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 3. Melebarkan & Memusatkan ISI Kotak Utama secara Absolut */
    .paket-box, 
    .kemitraan-box,
    .white-box {
        width: 92% !important; 
        margin: 20px auto !important; 
        padding: 25px 15px !important;
        box-sizing: border-box !important;
        
        /* MENGGUNAKAN FLEXBOX AGAR SEMUA ISI PAS DI TENGAH */
        display: flex !important; 
        flex-direction: column !important;
        align-items: center !important; 
        justify-content: center !important;
        text-align: center !important;
    }

    /* 4. Mengecilkan Huruf Judul (Agar tidak terpotong) */
    .paket-box h2,
    .paket-box h3 {
        font-size: 1.35em !important; /* Dikecilkan */
        margin-bottom: 12px !important;
        width: 100% !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* Mengecilkan Harga Coret */
    .paket-box .harga-coret {
        font-size: 0.95em !important;
        margin-bottom: 5px !important;
    }

    /* Mengecilkan Huruf Teks Deskripsi (Agar rapi dan tidak kebesaran) */
    .paket-box p,
    .paket-box span,
    .kemitraan-box p,
    .subtitle-paket {
        font-size: 0.85em !important; /* Dikecilkan drastis agar pas di HP */
        line-height: 1.5 !important;
        width: 100% !important;
        white-space: normal !important;
        margin-bottom: 10px !important;
    }

    /* 5. Memusatkan Kotak Kuning Harga secara Sempurna (JURUS RESET TOTAL) */
    .paket-box .harga {
        font-size: 1.5em !important; 
        padding: 10px 30px !important;
        border-radius: 12px !important;
        background-color: #FFCB05 !important;
        color: #222 !important;
        
        /* KUNCI: Biarkan Flexbox dari wadah atasnya yang bekerja */
        display: inline-flex !important;
        justify-content: center !important;
        align-items: center !important;
        width: auto !important;           /* Menyesuaikan dengan isi teks */
        max-width: 90% !important;        /* Mencegah meluber */
        margin: 15px 0 !important;        /* HAPUS margin auto (gunakan 0 untuk horizontal) */
        align-self: center !important;    /* Perintah mutlak agar berada di poros tengah Flexbox */
        position: static !important;      /* Mencegah kotak bergeser sendiri */
        transform: none !important;       /* Mematikan efek geser jika ada */
        white-space: nowrap !important;
    }

    /* Memastikan teks "Rp" dan angka di dalamnya tidak saling dorong */
    .paket-box .harga * {
        display: inline-block !important;
        margin: 0 !important; 
        padding: 0 4px !important;
    }
}
/* =======================================================
   GAYA UNTUK POP-UP Kedua (PILIH LOKASI & PROVINSI)
   ======================================================= */
.modal-overlay-lokasi {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    display: none; /* Disembunyikan dulu sampai tombol Daftar Les diklik */
    justify-content: center !important;
    align-items: center !important;
    z-index: 10000 !important;
}

/* =======================================================
   PERBAIKAN SCROLL PADA POP-UP KEDUA (KHUSUS LAYAR KECIL/HP)
   ======================================================= */
.lokasi-box {
    background: white !important;
    padding: 30px 20px 20px 20px !important;
    border-radius: 20px !important;
    text-align: center !important;
    max-width: 400px !important;
    width: 90% !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3) !important;
    border: 3px solid #00B5E2 !important;
    box-sizing: border-box !important;
    
    /* KODE TAMBAHAN AGAR BISA DI-SCROLL DI DALAM KOTAK */
    max-height: 85vh !important;  /* Tinggi kotak dibatasi maksimal 85% dari tinggi layar */
    overflow-y: auto !important;  /* Memunculkan scroll otomatis di dalam kotak jika isinya panjang */
}

.lokasi-box h2 {
    color: #EE536A !important;
    font-size: 1.2em !important;
    margin-bottom: 10px !important;
}

.lokasi-box p {
    color: #555 !important;
    font-size: 0.85em !important;
    margin-bottom: 15px !important;
}

/* Kotak info deteksi lokasi otomatis */
.deteksi-info-box {
    background: #f0f9fb;
    border: 2px dashed #00B5E2;
    padding: 10px;
    border-radius: 12px;
    margin-bottom: 15px;
    font-size: 0.85em;
    color: #333;
}

/* Dropdown Provinsi */
.select-provinsi {
    width: 100% !important;
    padding: 12px 15px !important;
    border-radius: 25px !important;
    border: 2px solid #00B5E2 !important;
    font-size: 0.9em !important;
    background-color: #fff !important;
    color: #333 !important;
    outline: none !important;
    margin-bottom: 15px !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

.btn-tutup-lokasi {
    background-color: #EE536A !important;
    color: white !important;
    border: none !important;
    padding: 10px 20px !important;
    border-radius: 25px !important;
    font-weight: bold !important;
    font-size: 0.9em !important;
    cursor: pointer;
    width: 100% !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1) !important;
}

.btn-tutup-lokasi:hover {
    background-color: #d44358 !important;
}
/* =======================================================
   DESAIN LINK ALAMAT GOOGLE MAPS
   ======================================================= */
.link-maps {
    color: #00B5E2 !important; /* Biru Bimbapedia */
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    margin-top: 5px !important;
}

.link-maps:hover {
    color: #EE536A !important; /* Berubah Pink saat disentuh */
    text-decoration: underline !important;
}
/* =======================================================
   DESAIN LINK WHATSAPP & GMAIL
   ======================================================= */
.link-kontak {
    color: #444 !important; /* Warna teks abu-abu gelap agar elegan */
    text-decoration: none !important;
    font-weight: bold !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
    margin-top: 5px !important;
}

.link-kontak:hover {
    color: #00B5E2 !important; /* Berubah jadi biru Bimbapedia saat disentuh */
    text-decoration: underline !important;
}

/* =======================================================
   TOMBOL WHATSAPP MENGAMBANG (BENTUK KAPSUL + TEKS)
   ======================================================= */
.wa-floating {
    position: fixed !important;
    bottom: 30px !important;
    right: 30px !important;
    background-color: #25D366 !important; 
    color: white !important;
    padding: 12px 25px !important;   
    border-radius: 50px !important;  
    display: flex !important;
    gap: 10px !important;            
    justify-content: center !important;
    align-items: center !important;
    font-size: 16px !important;      
    font-family: 'Poppins', sans-serif !important;
    font-weight: bold !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
    z-index: 999999 !important;      
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    animation: efekDenyutWA 2s infinite !important; 
}

.wa-floating i {
    font-size: 24px !important; 
}

.wa-floating:hover {
    background-color: #1ebe57 !important;
    transform: scale(1.05) !important; 
    color: white !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3) !important;
}

@keyframes efekDenyutWA {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    .wa-floating {
        bottom: 20px !important;
        right: 20px !important;
        padding: 10px 20px !important;
        font-size: 14px !important;
    }
    .wa-floating i {
        font-size: 20px !important;
    }
}

/* =======================================================
   ANIMASI LOGO POP-UP DI ATAS TOMBOL WHATSAPP (UPDATE BARU)
   ======================================================= */
.logo-popup-wa {
    position: fixed !important;
    
    /* 1. KITA TURUNKAN SEDIKIT (Dari 95px menjadi 80px) */
    bottom: 80px !important;    
    
    /* 2. KITA GESER KE KIRI AGAR PAS DI TENGAH KAPSUL (Dari 45px menjadi 65px) */
    right: 61px !important;     
    
    width: 140px !important;    
    height: auto !important;
    z-index: 999998 !important; 
    pointer-events: none !important; 
    animation: popHilangMuncul 4s ease-in-out infinite !important; 
    transform-origin: bottom center !important; 
}

/* Mesin Animasi Hilang-Muncul (Fade & Pop Up) */
@keyframes popHilangMuncul {
    0% { 
        opacity: 0; 
        transform: scale(0.5) translateY(20px); /* Mulai dari kecil dan transparan di bawah */
    }
    15% { 
        opacity: 1; 
        transform: scale(1.1) translateY(0);    /* Muncul mengejutkan (Pop Up) sedikit membesar */
    }
    25% { 
        opacity: 1; 
        transform: scale(1) translateY(0);      /* Stabil di ukuran normal */
    }
    75% { 
        opacity: 1; 
        transform: scale(1) translateY(0);      /* Bertahan cukup lama agar terbaca pengunjung */
    }
    85% { 
        opacity: 1; 
        transform: scale(1.1) translateY(0);    /* Membesar sedikit sebelum siap-siap hilang */
    }
    100% { 
        opacity: 0; 
        transform: scale(0.5) translateY(20px); /* Menghilang perlahan ke bawah */
    }
}

/* =======================================================
   SEMBUNYIKAN WA & LOGO SAAT POP-UP AWAL (BLUR) MASIH AKTIF
   ======================================================= */
body.no-scroll .wa-floating,
body.no-scroll .logo-popup-wa {
    opacity: 0 !important;               
    visibility: hidden !important;       
    bottom: -150px !important;           
    pointer-events: none !important;     
    animation: none !important;          
    transition: all 0.6s ease-in-out !important; 
}

/* =======================================================
   PERBAIKAN WA & LOGO KHUSUS HP (ANTI-LOMPAT, PANAH, & BUG FIX)
   ======================================================= */
/* Mesin animasi denyut baru tanpa efek geser agar tidak lompat */
@keyframes efekDenyutWA_HP_Baru {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}

@media (max-width: 768px) {
    /* 1. Posisi Tombol WA Tetap Stabil */
    .wa-floating {
        top: auto !important;
        bottom: 250px !important; 
        right: 0 !important; 
        border-radius: 50px 0 0 50px !important; 
        padding: 10px 15px 10px 15px !important;
        animation: efekDenyutWA_HP_Baru 2s infinite !important;
        transform: none !important; 
        transition: right 0.5s ease-in-out, background-color 0.3s !important;
    }

    /* 2. Tarikan disesuaikan agar Ikon WA & Panah terlihat utuh */
    .wa-floating.wa-sembunyi {
        right: -135px !important; 
        background-color: rgba(37, 211, 102, 0.8) !important; 
    }

    /* 3. Gaya Ikon Panah Kecil */
    .arrow-icon {
        font-size: 14px !important;
        margin-right: 8px !important;
        transition: transform 0.4s ease !important;
    }

    /* Memutar panah ke kanan (>) saat tombol terbuka */
    .wa-floating:not(.wa-sembunyi) .arrow-icon {
        transform: rotate(180deg) !important;
    }

    /* 4. Posisi Logo digeser & Animasi dihidupkan kembali */
    .logo-popup-wa {
        top: auto !important;
        bottom: 300px !important; 
        right: 35px !important;   
        width: 90px !important;
        transition: right 0.5s ease-in-out, opacity 0.5s !important;
    }

    .logo-popup-wa.wa-sembunyi {
        right: -150px !important; /* Ditarik lebih jauh ke kanan agar sangat aman */
        opacity: 0 !important;
        visibility: hidden !important; /* Disembunyikan secara fisik dari layar */
        animation: none !important; /* KUNCI: Matikan mesin pop-up saat sedang sembunyi */
    }
    
    body.no-scroll .wa-floating,
    body.no-scroll .logo-popup-wa {
    right: 200px !important;
    }
    } /* <--- INI ADALAH TANDA TUTUP YANG KEMARIN KETINGGALAN */

/* =======================================================
   SLIDESHOW FOTO OTOMATIS (FADE IN & FADE OUT)
   ======================================================= */
.slideshow-container {
    position: relative !important;
    width: 100% !important;
    max-width: 450px !important;     /* Lebar kita kecilkan agar di laptop tidak menjadi raksasa */
    aspect-ratio: 4 / 5 !important;  /* KUNCI: Membuat rasio bentuk bingkai 4 (lebar) banding 5 (tinggi) */
    margin: 30px auto !important; 
    border-radius: 15px !important; 
    overflow: hidden !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
}

.slide-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Menjaga foto agar tetap proporsional dan tidak gepeng */
    opacity: 0 !important; 
    transition: opacity 1.5s ease-in-out !important; 
    z-index: 1 !important;
}

.slide-item.aktif {
    opacity: 1 !important;
    z-index: 2 !important;
}

/* Penyesuaian ukuran bingkai saat dibuka di HP */
@media (max-width: 768px) {
    .slideshow-container {
        max-width: 85% !important; /* Di HP ukurannya akan mengambil 85% layar agar terlihat jelas */
        /* Kita tidak perlu lagi mengatur height, karena aspect-ratio akan otomatis menghitung tingginya! */
    }
}
/* =======================================================
   DESAIN BANNER UTAMA (FULL LEBAR MENTOK KIRI KANAN)
   ======================================================= */
.banner-utama {
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
}

.gambar-banner {
    width: 100% !important;  /* Gambar akan selalu 100% selebar layar */
    height: auto !important; /* KUNCI: Tinggi otomatis menyesuaikan proporsi, jadi tidak ada yang dipotong! */
    display: block !important;
    /* Kita hapus max-height, height px, dan object-fit cover yang lama */
}

/* Penyesuaian khusus jika dibuka di HP */
@media (max-width: 768px) {
    .gambar-banner {
        height: 250px !important; /* Di HP tingginya dikunci 250px saja */
    }
}

/* =======================================================
   DESAIN HALAMAN LOKASI MITRA
   ======================================================= */
.konten-mitra {
    display: flex;
    justify-content: center;
    padding: 50px 20px;
    background-color: #f4f7f6; /* Warna latar belakang abu-abu sangat muda */
}

.mitra-box {
    background-color: #ffffff;
    width: 100%;
    max-width: 650px; /* Lebar maksimal kotaknya */
    padding: 35px;
    border-radius: 20px; /* Ujung kotak membulat */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); /* Efek bayangan elegan */
    text-align: center;
}

.mitra-box h2 {
    color: #17a2b8; /* Sesuaikan warna biru website lu */
    margin-bottom: 10px;
    font-size: 26px;
    font-weight: 800;
}

.mitra-box p {
    color: #555;
    margin-bottom: 25px;
    font-size: 15px;
}

.maps-container {
    width: 100%;
    border-radius: 12px;
    overflow: hidden; /* Mencegah map keluar dari ujung kotak yang melengkung */
    margin-bottom: 20px;
    border: 2px solid #e0e0e0;
}

.info-mitra h3 {
    color: #333;
    font-size: 20px;
    margin-bottom: 5px;
}

.info-mitra p {
    font-size: 15px;
    color: #777;
    margin-bottom: 30px;
}

/* DESAIN TOMBOL WHATSAPP */
.btn-wa-mitra {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366; /* Warna hijau khas WA */
    color: white;
    padding: 14px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: bold;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(37, 211, 102, 0.4);
}

.btn-wa-mitra i {
    margin-right: 10px;
    font-size: 22px;
}

.btn-wa-mitra:hover {
    background-color: #1ebe57;
    transform: translateY(-3px); /* Tombol sedikit naik saat disentuh mouse */
    box-shadow: 0 8px 20px rgba(37, 211, 102, 0.6);
}

/* =========================================================
   PERBAIKAN SYNTAX ERROR & GAP PUTIH PADA BANNER UTAMA
   ========================================================= */

.banner-utama {
    width: 100% !important;
    margin: 0 !important; /* MEMPERBAIKI NILAI MARGIN YANG KOSONG */
    padding: 0 !important;
    overflow: hidden !important;
}

.gambar-banner {
    width: 100% !important;
    height: auto !important;
    display: block !important;
}

/* =========================================================
   PERBAIKAN SLIDE ITEM & POSISI
   ========================================================= */

.slide-item {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important; /* MEMPERBAIKI NILAI LEFT YANG KOSONG */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    opacity: 0 !important;
    transition: opacity 1.5s ease-in-out !important;
    z-index: 1 !important;
}

/* =========================================================
   PERBAIKAN SELECTOR BODY NO-SCROLL (WA & LOGO)
   ========================================================= */

body.no-scroll .wa-floating,
body.no-scroll .logo-popup-wa {
    opacity: 0 !important;
    visibility: hidden !important;
    bottom: 150px !important;
    pointer-events: none !important;
    animation: none !important;
    transition: all 0.6s ease-in-out !important;
}

/* =========================================================
   PERBAIKAN PROPERTI LAIN YANG KELIRU
   ========================================================= */

.tombol-pelajari {
    display: inline-block !important; /* Memperbaiki spasi properti */
    background-color: #00B5E2 !important;
    color: white !important;
    padding: 10px 24px !important;
    border-radius: 30px !important;
    font-weight: bold !important;
    font-size: 1em !important;
    margin-top: 15px !important;
}

.link-kontak {
    color: #444 !important;
    text-decoration: none !important; /* Memperbaiki huruf l menjadi tanda ! */
    font-weight: bold !important;
    display: inline-block !important;
    margin-top: 5px !important;
}
/* Ganti class menjadi ID agar terhubung ke lokasimitra.html */
#searchInput {
    display: block !important;
    margin: 0 auto !important; /* KUNCI UTAMA: Memaksa kotak berada di tengah */
    width: 90% !important; 
    max-width: 500px !important; 
    box-sizing: border-box !important; 
    padding: 15px 20px !important;
    border-radius: 30px !important;
}

/* Perbaiki syntax error dari .class="search-section" menjadi .search-section saja */
.search-section {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
}