/* Gaya untuk Body */
body {
  font-family: Arial, sans-serif; /* Mengatur jenis font utama */
  margin: 0; /* Menghilangkan margin default pada body */
  padding: 0; /* Menghilangkan padding default pada body */
  background-color: #f8f9fa; /* Warna latar belakang abu-abu terang */
  color: #343a40; /* Warna teks utama abu-abu gelap */
}

/* Gaya untuk Header */
header {
  background-color: #119e16; /* Warna latar belakang hijau */
  color: white; /* Warna teks putih */
  padding: 15px 0; /* Padding vertikal pada header */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Efek bayangan bawah header */
  position: sticky; /* Membuat header tetap di atas saat scroll */
  top: 0; /* Posisi header menempel di atas layar */
  z-index: 1000; /* Memastikan header berada di atas elemen lain */
}

.header-container {
  display: flex; /* Mengatur layout elemen secara fleksibel */
  justify-content: space-between; /* Menempatkan elemen di sisi kiri dan kanan */
  align-items: center; /* Mengatur elemen agar sejajar secara vertikal */
  max-width: 1200px; /* Lebar maksimum kontainer */
  margin: 0 auto; /* Memusatkan kontainer */
  padding: 0 20px; /* Padding horizontal */
}

/* Gaya untuk judul utama */
.header-title {
  font-size: 24px; /* Ukuran font judul */
  font-weight: bold; /* Membuat teks tebal */
  color: white; /* Warna teks putih */
  text-decoration: none; /* Menghilangkan garis bawah */
  transition: color 0.3s ease; /* Efek transisi warna saat di-hover */
}

.header-title:hover {
  color: #ffdd57; /* Warna kuning saat judul di-hover */
}

.burger-menu {
  display: none; /* Sembunyikan tombol menu pada perangkat besar */
  background: none; /* Menghilangkan latar belakang tombol */
  border: none; /* Menghilangkan border tombol */
  font-size: 24px; /* Ukuran font tombol */
  color: white; /* Warna tombol putih */
  cursor: pointer; /* Ubah kursor menjadi pointer saat di-hover */
  margin-left: auto; /* Memberi jarak ke kiri */
  padding: 0; /* Menghilangkan padding default */
}

/* Navigasi Responsif */
nav {
  display: flex; /* Menampilkan menu secara fleksibel */
  transition: max-height 0.3s ease-in-out; /* Efek transisi untuk perubahan tinggi */
}

.nav-links {
  list-style: none; /* Menghilangkan tanda bullet pada list */
  display: flex; /* Menampilkan link secara horizontal */
  gap: 20px; /* Jarak antar link */
  margin: 0; /* Menghilangkan margin default */
  padding: 0; /* Menghilangkan padding default */
}

.nav-links a {
  text-decoration: none; /* Menghilangkan garis bawah link */
  color: white; /* Warna teks link putih */
  font-size: 16px; /* Ukuran font link */
  font-weight: bold; /* Membuat teks link tebal */
  transition: color 0.3s ease; /* Efek transisi warna saat di-hover */
}

.nav-links a:hover {
  color: #ffdd57; /* Warna kuning saat link di-hover */
}

/* Container untuk mengatur jarak dengan tepi browser */
.info-content {
  max-width: 800px; /* Lebar maksimum kontainer teks */
  margin: 20px auto; /* Jarak vertikal dan tengah secara horizontal */
  padding: 20px; /* Padding dalam kontainer */
  background-color: #f9f9f9; /* Warna latar belakang abu-abu terang */
  border: 1px solid #ddd; /* Border abu-abu terang */
  border-radius: 8px; /* Membuat sudut melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Efek bayangan */
  line-height: 1.6; /* Jarak antar baris */
  font-family: Arial, sans-serif; /* Font utama */
  color: #343a40; /* Warna teks abu-abu gelap */
}

/* Judul utama */
h2 {
  text-align: center; /* Judul di tengah */
  font-size: 28px; /* Ukuran font judul */
  color: #119e16; /* Warna hijau */
  margin-bottom: 20px; /* Jarak bawah judul */
}

/* Subjudul */
h3, h4 {
  font-size: 22px; /* Ukuran font subjudul */
  color: #333; /* Warna abu-abu gelap */
  margin-bottom: 10px; /* Jarak bawah subjudul */
  border-bottom: 2px solid #119e16; /* Garis bawah hijau */
  padding-bottom: 5px; /* Jarak di bawah garis */
}

/* Paragraf */
p {
  font-size: 16px; /* Ukuran font paragraf */
  color: #555; /* Warna abu-abu untuk teks */
  margin-bottom: 15px; /* Jarak bawah antar paragraf */
  text-align: justify; /* Teks rata kiri dan kanan */
}

/* List (ul dan li) */
ul {
  margin: 15px 0 15px 20px; /* Jarak vertikal dan indentasi */
  padding: 0; /* Menghilangkan padding default */
}

li {
  font-size: 16px; /* Ukuran font item list */
  color: #555; /* Warna teks abu-abu */
  margin-bottom: 10px; /* Jarak antar item */
}

/* Gaya kode dalam teks */
code {
  font-family: "Courier New", Courier, monospace; /* Font monospace */
  background-color: #e9ecef; /* Latar belakang abu-abu terang */
  color: #c7254e; /* Warna merah untuk teks kode */
  padding: 2px 5px; /* Padding dalam elemen kode */
  border-radius: 4px; /* Membuat sudut melengkung */
}

/* Responsiveness */
@media (max-width: 768px) {
  .header-container {
      display: flex; /* Fleksibel untuk elemen dalam header */
      justify-content: space-between; /* Menempatkan elemen di sisi kiri dan kanan */
      align-items: center; /* Sejajarkan elemen secara vertikal */
  }

  .burger-menu {
      display: block; /* Tampilkan tombol burger menu */
      margin-left: auto; /* Jarak tombol dari elemen lainnya */
  }

  nav {
      display: none; /* Sembunyikan menu secara default */
      position: absolute; /* Menu berada di atas elemen lainnya */
      top: 60px; /* Tinggi header */
      right: 20px; /* Jarak dari tepi kanan */
      flex-direction: column; /* Tampilkan link secara vertikal */
      align-items: flex-start; /* Rata kiri */
      background-color: #119e16; /* Warna latar belakang hijau */
      width: 50%; /* Lebar menu */
      padding: 10px; /* Padding dalam menu */
      border-radius: 8px; /* Membuat sudut melengkung */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Efek bayangan */
  }

  nav.show {
      display: flex; /* Tampilkan menu saat di-trigger */
      background-color: #5a6268; /* Warna abu-abu */
  }

  .nav-links {
      flex-direction: column; /* Link tampil vertikal */
      gap: 15px; /* Jarak antar link */
  }

  .nav-links a {
      font-size: 14px; /* Ukuran font lebih kecil */
      padding: 10px 0; /* Padding vertikal pada link */
      width: 100%; /* Link menyesuaikan lebar menu */
  }
  
  .info-content {
      padding: 15px; /* Padding lebih kecil untuk perangkat kecil */
  }

  h2 {
      font-size: 24px; /* Ukuran judul lebih kecil */
  }

  h3, h4 {
      font-size: 20px; /* Ukuran subjudul lebih kecil */
  }

  p, li {
      font-size: 14px; /* Ukuran teks lebih kecil */
  }
}