/* ✅ RESPONSIVE & TENGAHKAN SEMUA KONTEN UTAMA */

/* --- Aturan Dasar: Selalu Tengah & Pas Lebar --- */
.wadah, .container {
    width: 90%;
    max-width: 1200px; /* Lebar maksimal di komputer */
    margin: 0 auto !important; /* ✅ KUNCI: Otomatis TENGAH KANAN-KIRI */
}

/* --- Layar HP Kecil (< 768px) --- */
@media (max-width: 768px) {
    .wadah, .container {
        width: 95%; /* Lebar sedikit lebih lebar agar tidak sempit */
    }

    /* Judul & Teks: Ukuran pas & selalu tengah */
    h1, .hero h1 {
        font-size: clamp(28px, 8vw, 42px) !important;
        text-align: center !important;
        line-height: 1.3 !important;
    }
    .hero p, .hero .deskripsi {
        font-size: clamp(15px, 3vw, 18px) !important;
        text-align: center !important;
        padding: 0 5px !important;
    }

    /* Tombol: Susun ke bawah, lebar pas & tengah */
    .hero .tombol-grup {
        display: flex;
        flex-direction: column;
        gap: 15px;
        align-items: center !important;
        justify-content: center !important;
    }
    .tombol-grup a {
        width: 85% !important;
        text-align: center !important;
    }

    /* Navigasi: Sesuaikan menu & tombol bahasa */
    .pilih-bahasa {
        right: 10px !important;
        top: 8px !important;
    }
}

/* --- Layar Tablet (769px - 1024px) --- */
@media (min-width: 769px) and (max-width: 1024px) {
    .wadah, .container {
        width: 92%;
    }
    h1, .hero h1 {
        font-size: clamp(32px, 6vw, 50px) !important;
        text-align: center !important;
    }
}

/* --- Pastikan Hero Selalu Tengah Sempurna --- */
.hero {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Tengah secara vertikal */
    justify-content: center !important; /* Tengah secara horizontal */
    text-align: center !important; /* Semua tulisan di tengah */
    padding: 80px 20px !important; /* Jarak aman di semua sisi */
}