/* ==========================================================================
   STYLE.CSS - RINGKAS, SIMPLE, SEO-FRIENDLY & RESPONSIF
   Fokus Utama: Kenyamanan Membaca Tulisan (Readability)
   ========================================================================== */

/* 1. Aturan Dasar & Mencegah Text Meluber */
*, *::before, *::after {
    box-sizing: border-box; 
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;        /* Jarak antar baris teks ideal agar mata tidak lelah */
    color: #2d3748;          /* Warna abu-abu gelap (lebih lembut di mata dibanding hitam pekat) */
    background-color: #fff;  /* Latar belakang putih bersih */
    margin: 0 auto;
    padding: 20px;
    max-width: 680px;        /* Lebar blok teks terbaik untuk kenyamanan membaca di PC */
}

/* 2. Navigasi Sederhana */
nav {
    margin-bottom: 30px;
    padding-bottom: 10px;
    border-bottom: 1px solid #edf2f7;
}

nav a {
    color: #3182ce;          /* Warna biru link standar */
    text-decoration: none;   /* Menghapus garis bawah bawaan */
    margin-right: 15px;
    font-weight: 500;
}

nav a:hover {
    text-decoration: underline; /* Garis bawah hanya muncul saat kursor menyentuh link */
}

/* 3. Tipografi & Hierarki Judul (Sangat Disukai Google) */
h1, h2, h3 {
    color: #1a202c;          /* Warna judul dibuat sedikit lebih tegas */
    font-weight: 700;
    line-height: 1.3;
    margin-top: 35px;
    margin-bottom: 15px;
}

h1 { font-size: 2rem; margin-top: 10px; } /* Judul Utama Artikel */
h2 { font-size: 1.5rem; border-left: 4px solid #3182ce; padding-left: 10px; } /* Sub-Bab */
h3 { font-size: 1.2rem; }

/* 4. Pengaturan Paragraf & List Konten */
p {
    margin-top: 0;
    margin-bottom: 16px;     /* Jarak konsisten antar paragraf */
}

ul, ol {
    margin-top: 0;
    margin-bottom: 16px;
    padding-left: 20px;      /* Jarak menjorok ke dalam untuk bullet points */
}

li {
    margin-bottom: 8px;      /* Jarak antar poin list agar mudah dipindai */
}

/* 5. Kotak Sorot (Opsional: Untuk Catatan/Poin Penting) */
.box-catatan {
    background-color: #ebf8ff; /* Warna latar biru muda transparan */
    border-left: 4px solid #3182ce;
    padding: 15px;
    margin: 25px 0;
    border-radius: 0 4px 4px 0;
}

/* 6. Bagian Kaki / Footer */
footer {
    margin-top: 60px;
    padding-top: 15px;
    border-top: 1px solid #edf2f7;
    font-size: 0.9rem;
    color: #718096;
    text-align: center;
}