/* ==============================================
   🌱 BASE.CSS — PONDASI DASAR SELURUH SITUS
   Reset, Pengaturan Dasar, Variabel Warna, Font
   ============================================== */

/* --------------------------
   🔄 RESET GAYA BAWAAAN BROWSER
   Hilangkan jarak aneh, batas aneh, seragamkan ukuran kotak
   -------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* ✅ Ukuran kotak dihitung dari pinggir luar */
}

html {
    scroll-behavior: smooth; /* ✅ Gulir halaman HALUS, tidak melompat kaget */
    font-size: 16px; /* Ukuran dasar huruf untuk hitungan relatif */
}

body {
    font-family: 'Segoe UI', Roboto, 'Open Sans', 'Helvetica Neue', sans-serif;
    line-height: 1.6; /* Jarak baris nyaman dibaca */
    color: #1e293b; /* Warna teks utama gelap lembut */
    background-color: #ffffff; /* Latar putih bersih */
    -webkit-font-smoothing: antialiased; /* Huruf lebih halus di layar */
}

/* --------------------------
   🔗 ATURAN UMUM TAUTAN
   -------------------------- */
a {
    color: inherit; /* Ikut warna teks sekitarnya */
    text-decoration: none; /* Hilangkan garis bawah otomatis */
}
a:hover {
    text-decoration: none;
}

/* --------------------------
   🖼️ GAMBAR & MEDIA
   Selalu pas lebar, tidak melebihi wadah, tidak gepeng
   -------------------------- */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Hilangkan celah kecil di bawah gambar */
}

video, iframe {
    max-width: 100%;
}

/* --------------------------
   📋 DAFTAR & TANDA
   Hilangkan titik daftar otomatis
   -------------------------- */
ul, ol {
    list-style: none;
}

/* --------------------------
   ✏️ ELEMEN FORMULIR
   Seragamkan tampilan masukan teks, tombol
   -------------------------- */
input, textarea, select, button {
    font-family: inherit; /* Ikut font utama situs */
    font-size: inherit;
}

button {
    border: none;
    background: none;
    cursor: pointer;
}

/* --------------------------
   📦 WADAH & TATA LETAK DASAR
   Agar konten selalu di tengah & tidak mepet pinggir layar
   -------------------------- */
.wadah {
    width: 90%;
    max-width: 1200px; /* Lebar maksimal agar tidak terlalu lebar di layar besar */
    margin: 0 auto; /* ✅ OTOMATIS DI TENGAH LAYAR */
}

/* --------------------------
   📏 JARAK DASAR SERAGAM
   -------------------------- */
section {
    padding: 70px 0; /* Jarak atas-bawah seragam setiap bagian */
}

.judul-bagian {
    margin-bottom: 50px;
}


/* --------------------------
   📱 BANTUAN TAMPILAN
   Sembunyikan/lihat elemen sesuai ukuran layar
   -------------------------- */
.lihat-hp {display: none;}
.sembunyi-hp {display: block;}

@media (max-width:768px) {
    .lihat-hp {display: block;}
    .sembunyi-hp {display: none;}
}