/* ==========================================================================
   7. OPTIMASI MEDIA QUERIES (Tampilan Mirip Laptop Versi Mobile Rapi)
   ========================================================================== */

@media (max-width: 768px) {
    /* 1. Mencegah konten navbar meluber keluar layar */
    .nav-container {
        width: 95% !important;
        display: flex !important;
        flex-direction: row !important; /* Tetap sejajar kiri-kanan kayak laptop */
        justify-content: space-between !important;
        align-items: center !important;
        gap: 10px !important;
    }

    /* 2. Optimasi Ukuran Logo di HP */
    .logo-img {
        height: 28px !important; /* Memperkecil logo omo biar gak makan tempat */
    }
    
    .logo-text {
        font-size: 0.95rem !important; /* Mengecilkan teks WEBSITE AEKHULA */
        white-space: nowrap !important;
    }

    /* 3. TRIK SAKTI: Mengubah Menu Jadi Bisa Di-swipe Kiri-Kanan */
    .nav-links {
        display: flex !important;
        flex-direction: row !important; /* Tetap lurus ke samping */
        flex-wrap: nowrap !important; /* Haram hukumnya patah ke bawah! */
        overflow-x: auto !important; /* Mengaktifkan fitur geser/scroll horizontal */
        -webkit-overflow-scrolling: touch; /* Biar scroll-nya mulus di HP */
        gap: 4px !important;
        max-width: 60%; /* Membatasi lebar menu agar tidak menabrak logo */
        padding: 5px 0 !important;
    }

    /* Menyembunyikan scrollbar bawaan browser biar kelihatan estetik dan bersih */
    .nav-links::-webkit-scrollbar {
        display: none;
    }

    /* 4. Menyesuaikan Ukuran Tombol Menu di HP */
    .nav-links a {
        padding: 6px 10px !important;
        font-size: 0.75rem !important; /* Ukuran teks menu pas untuk jempol */
        white-space: nowrap !important; /* Teks menu tidak boleh patah dua */
    }

    /* 5. Visi Misi Tetap Berdampingan (2 Kolom) Kayak di Laptop tapi Scaled Down */
    .visimisi-container {
        grid-template-columns: repeat(2, 1fr) !important; 
        gap: 15px !important;
    }
    
    .section-box {
        padding: 18px !important; /* Mengurangi padding biar gak kesempitan */
    }

    .visi-box p, .misi-box ul {
        font-size: 0.85rem !important; /* Huruf mengecil secara proporsional */
    }

    /* 6. Menyesuaikan Judul Hero */
    .hero-section {
        min-height: 220px !important;
    }
    .hero-content h1 {
        font-size: 1.5rem !important;
    }
    .hero-content p {
        font-size: 0.85rem !important;
    }
}

/* Tambahan untuk HP yang layarnya sangat kecil (di bawah 400px) */
@media (max-width: 400px) {
    .logo-text {
        display: none !important; /* Sembunyikan teks logo, sisakan gambar iconnya saja biar gak sesak */
    }
    .nav-links {
        max-width: 80% !important;
    }
}