/* Mengatur warna tema dan nilai dasar yang digunakan di seluruh halaman */
:root {
  color-scheme: dark; /* Memberi tahu browser bahwa halaman menggunakan tema gelap */
  --background: #0b1120; /* Warna latar belakang halaman */
  --surface: #111a2e; /* Warna permukaan kartu */
  --border: #25324a; /* Warna garis tepi */
  --text: #e5edf8; /* Warna teks utama */
  --muted: #91a0b8; /* Warna teks sekunder */
  --accent: #63e6be; /* Warna aksen */
}

/* Mengatur perhitungan ukuran elemen agar lebih mudah dikendalikan */
* {
  box-sizing: border-box; /* Memasukkan padding dan border ke dalam ukuran elemen */
}

/* Mengatur tampilan dasar halaman */
body {
  min-height: 100vh; /* Memastikan halaman setidaknya memenuhi tinggi layar */
  margin: 0; /* Menghapus margin bawaan browser */
  padding: 24px; /* Memberi jarak antara isi halaman dan tepi layar */
  display: grid; /* Menggunakan grid untuk menempatkan pembungkus halaman */
  place-items: top; /* Memusatkan pembungkus secara horizontal dan vertikal */
  background: var(--background); /* Menggunakan warna latar belakang gelap */
  color: var(--text); /* Menggunakan warna teks utama */
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Mengatur jenis huruf */
}

/* Mengatur lebar dan susunan utama halaman */
.page {
  width: 100%; /* Memenuhi lebar ruang yang tersedia */
  max-width: 680px; /* Membatasi lebar maksimum agar nyaman dibaca */
  display: flex; /* Menyusun header, konten, dan footer secara fleksibel */
  flex-direction: column; /* Menyusun elemen dari atas ke bawah */
  gap: 20px; /* Memberi jarak antarbagian */
}

/* Mengatur tampilan header */
.header {
  padding: 28px; /* Memberi ruang di dalam header */
  border: 1px solid var(--border); /* Menambahkan garis tepi */
  border-radius: 22px; /* Membuat sudut header membulat */
  background: var(--surface); /* Memberi latar belakang gelap pada header */
}

/* Mengatur label dekoratif di header */
.eyebrow {
  margin: 0 0 12px; /* Mengatur jarak bawah label */
  color: var(--accent); /* Memberi warna aksen pada label */
}

/* Mengatur judul utama */
.header h1 {
  margin: 0; /* Menghapus margin bawaan judul */
  font-size: clamp(1.8rem, 7vw, 2.5rem); /* Menyesuaikan ukuran judul dengan lebar layar */
  letter-spacing: -0.04em; /* Merapatkan sedikit jarak antarhuruf */
}

/* Mengatur deskripsi header */
.header-description {
  margin: 10px 0 0; /* Memberi jarak di atas deskripsi */
  color: var(--muted); /* Menggunakan warna teks sekunder */
  line-height: 1.6; /* Membuat jarak baris lebih nyaman dibaca */
}

/* Mengatur area konten utama */
.divcontent {
  width: 100%; /* Memenuhi lebar pembungkus */
}

/* Mengatur tampilan kartu konten */
.content-card {
  padding: 28px; /* Memberi ruang di dalam kartu */
  border: 1px solid var(--border); /* Menambahkan garis tepi kartu */
  border-radius: 22px; /* Membuat sudut kartu membulat */
  background: var(--surface); /* Memberi latar belakang gelap pada kartu */
}

/* Mengatur label kecil di dalam kartu */
.card-label {
  margin: 0 0 12px; /* Mengatur jarak bawah label */
  color: var(--accent); /* Menggunakan warna aksen */
  font-size: 0.75rem; /* Membuat label lebih kecil dari teks utama */
  font-weight: 700; /* Menebalkan label */
  letter-spacing: 0.12em; /* Memberi jarak antarhuruf */
}

/* Mengatur judul kartu */
.content-card h2 {
  margin: 0; /* Menghapus margin bawaan judul */
  font-size: clamp(1.35rem, 5vw, 1.8rem); /* Menyesuaikan ukuran judul pada layar kecil */
}

/* Mengatur paragraf konten */
.content-description {
  margin: 12px 0 22px; /* Mengatur jarak paragraf */
  color: var(--muted); /* Menggunakan warna teks sekunder */
  line-height: 1.7; /* Membuat teks lebih mudah dibaca */
}

/* Mengatur blok contoh kode */
.code-block {
  overflow-x: auto; /* Memungkinkan blok kode digeser jika terlalu lebar */
  margin: 0; /* Menghapus margin bawaan blok kode */
  padding: 18px; /* Memberi ruang di sekitar teks kode */
  border: 1px solid var(--border); /* Menambahkan garis tepi blok kode */
  border-radius: 14px; /* Membuat sudut blok kode membulat */
  background: #090e19; /* Memberi latar kode yang lebih gelap */
  color: var(--accent); /* Memberi warna aksen pada teks kode */
  font-size: 0.9rem; /* Mengatur ukuran teks kode */
  line-height: 1.7; /* Mengatur jarak antarbaris kode */
}

/* Mengatur tampilan footer */
.footer {
  padding: 4px 8px; /* Memberi sedikit ruang pada footer */
  color: var(--muted); /* Menggunakan warna teks sekunder */
  font-size: 0.85rem; /* Membuat teks footer lebih kecil */
  text-align: center; /* Memusatkan teks footer */
}

/* Menyesuaikan padding untuk layar yang lebih kecil */
@media (max-width: 480px) {
  body {
    padding: 16px; /* Mengurangi jarak tepi pada layar ponsel */
  }

  .header,
  .content-card {
    padding: 22px; /* Mengurangi ruang dalam header dan kartu pada layar ponsel */
  }
}