/* Gaya untuk Body */
body {
  font-family: Arial, sans-serif; /* Mengatur font utama untuk seluruh halaman */
  margin: 0; /* Menghilangkan margin default */
  padding: 0; /* Menghilangkan padding default */
  background-color: #f8f9fa; /* Warna latar belakang yang lembut */
  color: #343a40; /* Warna teks utama */
}

/* Gaya untuk Header */
header {
  background-color: #119e16; /* Warna latar belakang header */
  color: white; /* Warna teks header */
  padding: 15px 0; /* Padding atas dan bawah */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Bayangan untuk memberikan efek kedalaman */
  position: sticky; /* Membuat header tetap di atas saat di-scroll */
  top: 0; /* Posisi header di bagian atas */
  z-index: 1000; /* Prioritas lapisan yang tinggi untuk header */
}

.header-container {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  justify-content: space-between; /* Menyebarkan elemen secara merata */
  align-items: center; /* Menyelaraskan elemen secara vertikal */
  max-width: 1200px; /* Lebar maksimum kontainer */
  margin: 0 auto; /* Memusatkan kontainer */
  padding: 0 20px; /* Padding kiri dan kanan */
}

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

.header-title:hover {
  color: #ffdd57; /* Warna saat di-hover, sesuai menu lainnya */
}

.burger-menu {
  display: none; /* Sembunyikan di perangkat besar */
  background: none; /* Tidak ada latar belakang */
  border: none; /* Tidak ada border */
  font-size: 24px; /* Ukuran font ikon burger */
  color: white; /* Warna ikon burger */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
  margin-left: auto; /* Jarak dari elemen lain */
  padding: 0; /* Tidak ada padding */
}

/* Navigasi Responsif */
nav {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  transition: max-height 0.3s ease-in-out; /* Transisi tinggi maksimum */
}

.nav-links {
  list-style: none; /* Menghilangkan bullet list */
  display: flex; /* Menggunakan flexbox untuk tata letak */
  gap: 20px; /* Jarak antar elemen */
  margin: 0; /* Menghilangkan margin */
  padding: 0; /* Menghilangkan padding */
}

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

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

/* Gaya untuk Konten Utama */
.wrapper {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  flex-wrap: wrap; /* Membungkus elemen jika terlalu panjang */
  width: 90%; /* Lebar kontainer */
  max-width: 1200px; /* Lebar maksimum kontainer */
  background: #ffffff; /* Warna latar belakang */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan untuk memberikan efek kedalaman */
  border-radius: 10px; /* Sudut melengkung */
  padding: 20px; /* Padding di dalam kontainer */
  margin: 20px auto; /* Margin atas dan bawah, serta memusatkan kontainer */
  box-sizing: border-box; /* Menghitung padding dan border dalam lebar dan tinggi */
}

.container {
  flex: 2; /* Fleksibilitas elemen */
  margin: 15px; /* Margin di sekitar elemen */
}

.sidebar {
  flex: 1.5; /* Fleksibilitas elemen */
  margin: 15px; /* Margin di sekitar elemen */
  background-color: #f1f3f5; /* Warna latar belakang */
  padding: 20px; /* Padding di dalam elemen */
  border-radius: 10px; /* Sudut melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Bayangan untuk memberikan efek kedalaman */
}

label {
  display: block; /* Menampilkan sebagai blok */
  margin-bottom: 10px; /* Margin bawah */
  font-weight: bold; /* Ketebalan font */
  color: #495057; /* Warna teks */
  font-size: 16px; /* Ukuran font */
}

input[type="text"],
textarea {
  width: 100%; /* Lebar penuh */
  padding: 12px; /* Padding di dalam elemen */
  margin-bottom: 20px; /* Margin bawah */
  border: 1px solid #ced4da; /* Border dengan warna abu-abu */
  border-radius: 6px; /* Sudut melengkung */
  font-size: 14px; /* Ukuran font */
  box-sizing: border-box; /* Menghitung padding dan border dalam lebar dan tinggi */
}

textarea {
  resize: none; /* Tidak dapat diubah ukurannya */
  background-color: #e9ecef; /* Warna latar belakang */
}

#prosesIterasi {
  height: 300px; /* Tinggi elemen */
}

#hasil {
  height: 80px; /* Tinggi elemen */
}

.button-group {
  display: flex; /* Menggunakan flexbox untuk tata letak */
  gap: 10px; /* Jarak antar elemen */
}

.button {
  padding: 10px 20px; /* Padding di dalam elemen */
  font-size: 16px; /* Ukuran font */
  color: #ffffff; /* Warna teks */
  background-color: #119e16; /* Warna latar belakang */
  border: none; /* Tidak ada border */
  border-radius: 6px; /* Sudut melengkung */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
  transition: background-color 0.3s ease; /* Transisi warna latar belakang saat di-hover */
}

.button:hover {
  background-color: #0a770e; /* Warna latar belakang saat di-hover */
}

.button.reset {
  background-color: #6c757d; /* Warna latar belakang untuk tombol reset */
}

.button.reset:hover {
  background-color: #5a6268; /* Warna latar belakang saat di-hover untuk tombol reset */
}

/* Pop-up */
.popup {
  position: fixed; /* Posisi tetap */
  top: 0; /* Posisi di bagian atas */
  left: 0; /* Posisi di bagian kiri */
  width: 100%; /* Lebar penuh */
  height: 100%; /* Tinggi penuh */
  background: rgba(0, 0, 0, 0.5); /* Transparansi latar belakang */
  display: flex; /* Menggunakan flexbox untuk tata letak */
  justify-content: center; /* Memusatkan secara horizontal */
  align-items: center; /* Memusatkan secara vertikal */
  z-index: 1000; /* Prioritas lapisan yang tinggi */
  visibility: hidden; /* Tersembunyi secara default */
  opacity: 0; /* Transparansi default */
  transition: visibility 0s, opacity 0.3s ease-in-out; /* Transisi visibilitas dan transparansi */
}

.popup-content {
  background: #ffffff; /* Warna latar belakang */
  padding: 30px; /* Padding di dalam elemen */
  border-radius: 10px; /* Sudut melengkung */
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Bayangan untuk memberikan efek kedalaman */
  max-width: 600px; /* Lebar maksimum */
  width: 80%; /* Lebar kontainer */
  max-height: 90vh; /* Tinggi maksimum */
  overflow-y: auto; /* Scroll vertikal jika konten terlalu panjang */
  text-align: center; /* Teks rata tengah */
}

.popup-content h3 {
  margin-top: 0; /* Menghilangkan margin atas */
  font-size: 24px; /* Ukuran font */
  color: #343a40; /* Warna teks */
}

.popup-content p,
.popup-content ul {
  font-size: 16px; /* Ukuran font */
  color: #495057; /* Warna teks */
  margin: 10px 0; /* Margin atas dan bawah */
  text-align: justify; /* Teks rata kiri-kanan */
}

.popup-content button {
  margin-top: 20px; /* Margin atas */
  background-color: #119e16; /* Warna latar belakang */
  color: white; /* Warna teks */
  padding: 10px 20px; /* Padding di dalam elemen */
  border: none; /* Tidak ada border */
  border-radius: 8px; /* Sudut melengkung */
  font-size: 16px; /* Ukuran font */
  cursor: pointer; /* Mengubah kursor menjadi pointer */
}

.popup-content button:hover {
  background-color: #0a770e; /* Warna latar belakang saat di-hover */
}

/* Pop-up Visible */
.popup.show {
  visibility: visible; /* Menampilkan pop-up */
  opacity: 1; /* Transparansi penuh */
}

/* Responsiveness */
@media (max-width: 768px) {
  .header-container {
    display: flex; /* Menggunakan flexbox untuk tata letak */
    justify-content: space-between; /* Menyebarkan elemen secara merata */
    align-items: center; /* Menyelaraskan elemen secara vertikal */
  }

  .burger-menu {
    display: block; /* Tampilkan burger menu di perangkat kecil */
    margin-left: auto; /* Jarak dari judul */
  }

  nav {
    display: none; /* Sembunyikan menu navigasi di perangkat kecil */
    position: absolute; /* Posisi absolut */
    top: 60px; /* Tinggi header */
    right: 20px; /* Jarak dari kanan */
    flex-direction: column; /* Menu tampil dalam bentuk vertikal */
    align-items: flex-start; /* Menyelaraskan elemen di awal */
    background-color: #119e16; /* Warna latar belakang */
    width: 50%; /* Lebar menu dropdown */
    padding: 10px; /* Padding di dalam elemen */
    border-radius: 8px; /* Sudut melengkung */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2); /* Bayangan untuk memberikan efek kedalaman */
  }

  nav.show {
    display: flex; /* Menampilkan menu navigasi */
    background-color: #5a6268; /* Warna abu-abu */
  }

  .nav-links {
    flex-direction: column; /* Menu tampil dalam bentuk vertikal */
    gap: 15px; /* Jarak antar elemen */
  }

  .nav-links a {
    font-size: 14px; /* Ukuran font */
    padding: 10px 0; /* Padding atas dan bawah */
    width: 100%; /* Lebar penuh */
  }
  
  .wrapper {
    flex-direction: column; /* Tata letak kolom */
    padding: 15px; /* Padding di dalam elemen */
  }

  .container,
  .sidebar {
    margin: 10px 0; /* Margin atas dan bawah */
  }

  #prosesIterasi {
    height: 200px; /* Tinggi elemen */
  }

  #hasil {
    height: 60px; /* Tinggi elemen */
  }
}