/* Universal Reset - Mengadopsi Box-Sizing modern */
*, *::before, *::after {
  /* Padding dan border TIDAK menambah lebar/tinggi elemen */
  box-sizing: border-box; 
  /* Menghapus margin default browser pada elemen-elemen tertentu */
  margin: 0; 
  /* Menghapus padding default (contoh: pada <ul>) */
  padding: 0;
}

/* Memastikan elemen media responsif */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

/* Aturan dasar untuk body */
body {
  /* Set line height yang nyaman untuk dibaca */
  line-height: 1.5; 
  /* Membuat tinggi body minimal 100% viewport agar footer bisa ditaruh di bawah */
  min-height: 100vh;
  /* Anti-aliasing untuk font yang lebih halus */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

:root {
  /* --- SPACING SCALE (8pt Grid System) --- */
  
  /* Micro (4px) */
  --space-xs: 0.25rem;  
  /* Small (8px) - Standar untuk padding elemen kecil */
  --space-s:  0.5rem;   
  /* Medium (16px) - Jarak default antar elemen/paragraf */
  --space-m:  1rem;     
  /* Large (24px) - Jarak blok/sidebar */
  --space-l:  1.5rem;   
  /* Extra Large (32px) - Padding dalam section besar */
  --space-xl: 2rem;     
  /* Section Separator (48px) */
  --space-2xl: 3rem;    
  /* Huge Separator (64px) - Untuk padding Hero Section */
  --space-3xl: 4rem;   
  
  /* --- COLORS (Contoh) --- */
  --color-primary: #007bff; /* Biru/Warna identitas */
  --color-text: #333333;
  --color-background: #ffffff;
  --color-light-gray: #f8f9fa;
  --color-border: #e9ecef;
}

body {
  color: var(--color-text);
  font-size: 16px; /* Font size standar untuk aksesibilitas */
}

/* Judul (Heading) - Atur Margin Bawah untuk memisahkan dari konten */
h1, h2, h3, h4, h5, h6 {
  /* Reset margin default browser, lalu kita atur ulang */
  margin-top: 0;
  margin-bottom: var(--space-m); 
  font-weight: 700;
  line-height: 1.2; /* Line height lebih rapat untuk judul */
}

/* Aturan spesifik ukuran */
h1 { font-size: 2.5rem; margin-bottom: var(--space-l); }
h2 { font-size: 2rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

/* Paragraf - Atur margin bawah */
p {
  margin-bottom: var(--space-m); 
}

/* Link (Hyperlinks) */
a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  text-decoration: underline;
}

/* Mengganti border fokus default browser yang jelek */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Menyembunyikan outline fokus pada mouse click (hanya fokus di keyboard) */
:not(:focus-visible) {
  outline: none;
}