body {
  font-family: "Poppins", sans-serif; /* Mengatur Poppins sebagai font utama untuk seluruh body */
}

/* Jika Anda ingin elemen tertentu menggunakan ketebalan yang spesifik */
h1,
h2 {
  font-family: "Poppins", sans-serif;
  font-weight: 500; /* Untuk judul, gunakan ketebalan Medium */
}

p {
  font-family: "Poppins", sans-serif;
  font-weight: 400; /* Untuk paragraf, gunakan ketebalan Regular */
}

/* Untuk teks italic */
em,
i {
  font-style: italic; /* Ini akan otomatis menggunakan Poppins italic 400 atau 500 jika tersedia */
  font-weight: 400; /* Contoh */
}

.logo-title {
  font-weight: bold;
  letter-spacing: 2px;
}

/* Animasi Slide (ini bisa tetap di sini atau pindah ke style.css jika mau) */
.slide-down {
  animation: slideDown 0.3s ease forwards;
}

.slide-up {
  animation: slideUp 0.3s ease forwards;
}

@keyframes slideDown {
  from {
    max-height: 0;
    opacity: 0;
  }
  to {
    max-height: 300px;
    opacity: 1;
  }
}

@keyframes slideUp {
  from {
    max-height: 300px;
    opacity: 1;
  }
  to {
    max-height: 0;
    opacity: 0;
  }
}
/* --- Variabel untuk Light Mode (Default) --- */
.w3-theme-light {
  /* Warna Dasar */
  --bg-color: #ffffed; /* Background utama, seperti warna body default Anda */
  --text-color: #2f3e1e; /* Warna teks utama, seperti warna teks default Anda */
  --light-text-color: #555; /* Untuk teks sekunder atau kurang penting */

  /* Warna Aksen/Primer (sesuaikan dengan palet Anda) */
  --primary-color: #b2c8a1; /* Warna untuk navbar, footer, tombol utama */
  --primary-text-color: #2f3e1e; /* Teks di atas primary-color */
  --secondary-color: #9eb88d; /* Untuk hover atau elemen sekunder */
  --secondary-text-color: #ffffed; /* Teks di atas secondary-color */

  /* Border & Shadow */
  --border-color: #ddd; /* Warna border umum */
  --shadow-color: rgba(0, 0, 0, 0.1); /* Warna shadow */
}

/* --- Variabel untuk Dark Mode --- */
.w3-theme-dark {
  /* Warna Dasar */
  --bg-color: #2f3e1e; /* Background gelap, bisa jadi warna teks light mode Anda */
  --text-color: #ffffed; /* Teks terang */
  --light-text-color: #b2c8a1; /* Untuk teks sekunder di dark mode */

  /* Warna Aksen/Primer (kontras tapi tetap harmonis) */
  --primary-color: #556b4d; /* Warna gelap untuk navbar, footer, tombol utama */
  --primary-text-color: #ffffed; /* Teks di atas primary-color gelap */
  --secondary-color: #8c9f84; /* Untuk hover di dark mode */
  --secondary-text-color: #2f3e1e; /* Teks di atas secondary-color dark */

  /* Border & Shadow */
  --border-color: #444; /* Warna border gelap */
  --shadow-color: rgba(0, 0, 0, 0.4); /* Shadow lebih menonjol di dark */
}

/* --- Penerapan Variabel ke Elemen-elemen --- */

/* Body */
body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: background-color 0.3s, color 0.3s;
}

/* Navbar */
.w3-bar {
  background-color: var(--primary-color) !important; /* Gunakan !important jika diperlukan untuk menimpa gaya inline/W3.CSS */
  border-bottom: 1px solid var(--border-color);
  box-shadow: 0 2px 5px 0 var(--shadow-color); /* Sesuaikan shadow */
}

.w3-bar .w3-bar-item {
  color: var(--primary-text-color); /* Teks di navbar */
}

.w3-bar .w3-bar-item:hover {
  background-color: var(--secondary-color) !important;
  color: var(--secondary-text-color) !important;
}

.logo-title {
  color: var(--primary-text-color); /* Pastikan logo juga menyesuaikan */
}

/* Tombol */
.w3-button,
.w3-btn {
  background-color: var(--primary-color); /* Default tombol, sesuaikan jika ada tombol khusus */
  color: var(--primary-text-color);
}

.w3-button:hover,
.w3-btn:hover {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

/* Footer */
footer {
  background-color: var(--primary-color) !important; /* Agar footer juga berubah */
  color: var(--primary-text-color) !important;
  border-top: 1px solid var(--border-color);
}

footer p {
  color: var(--primary-text-color) !important; /* Pastikan teks di footer juga ikut */
}

footer .w3-button {
  /* Untuk ikon sosmed di footer */
  color: var(--primary-text-color); /* Warna ikon */
  background-color: transparent !important; /* Hapus background tombol */
}
footer .w3-button:hover {
  color: var(--secondary-text-color) !important; /* Warna ikon saat hover */
  background-color: transparent !important;
}

/* Mobile Menu */
#menuMobile {
  background-color: var(--primary-color); /* Background menu mobile */
  color: var(--primary-text-color);
  border-bottom: 1px solid var(--border-color);
}

#menuMobile .w3-bar-item {
  color: var(--primary-text-color);
}

#menuMobile .w3-bar-item:hover {
  background-color: var(--secondary-color);
  color: var(--secondary-text-color);
}

/* W3.CSS Card (jika ada) */
.w3-card,
.w3-panel {
  background-color: var(--bg-color); /* Gunakan bg-color agar kartu berubah */
  color: var(--text-color);
  box-shadow: 0 4px 8px 0 var(--shadow-color); /* Shadow juga ikut berubah */
  border: 1px solid var(--border-color); /* Tambahkan border */
}

/* W3.CSS Images (opsional, jika Anda ingin efek tertentu) */
img {
  border-color: var(--border-color); /* Contoh border untuk gambar */
}
/* theme.css */

/* --- Variabel untuk Light Mode (Default) --- */
/* ... (variabel Anda yang sudah ada) ... */

/* --- Variabel untuk Dark Mode --- */
/* ... (variabel Anda yang sudah ada) ... */

/* --- Penerapan Variabel ke Elemen-elemen --- */
/* ... (gaya body, navbar, footer, dll. Anda yang sudah ada) ... */

/* Tambahan: Gaya untuk Modal/Lightbox */
.modal {
  display: none; /* Sembunyikan secara default */
  position: fixed; /* Tetap di posisi saat scroll */
  z-index: 1000; /* Letakkan di atas konten lain */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Aktifkan scroll jika konten terlalu besar */
  background-color: rgba(0, 0, 0, 0.7); /* Latar belakang gelap transparan */
  padding-top: 60px; /* Jarak dari atas */
  transition: background-color 0.3s;
}

/* Modal Content (Kotak di dalam modal) */
.modal-content {
  background-color: var(--bg-color); /* Ikut warna background tema */
  margin: 5% auto; /* Posisi di tengah secara vertikal dan horizontal */
  padding: 20px;
  border: 1px solid var(--border-color);
  width: 90%; /* Lebar di mobile */
  max-width: 900px; /* Lebar maksimum di desktop */
  position: relative; /* Untuk tombol close */
  border-radius: 8px; /* Sudut membulat */
  box-shadow: 0 4px 8px 0 var(--shadow-color), 0 6px 20px 0 var(--shadow-color);
  transition: background-color 0.3s, border-color 0.3s, box-shadow 0.3s;
}

/* Tombol Tutup */
.close-button {
  color: var(--text-color); /* Warna tombol close ikut tema */
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
  color: var(--secondary-color); /* Warna hover ikut tema */
  text-decoration: none;
  cursor: pointer;
}

/* iframe di dalam modal */
#pdfViewer {
  width: 100%;
  height: 500px; /* Tinggi iframe default */
  border: 1px solid var(--border-color);
  background-color: #fff; /* Pastikan ada background putih default untuk iframe */
}

/* Aturan untuk iframe di dalam modal saat Dark Mode */
.w3-theme-dark #pdfViewer {
  /* Opsi 1: CSS Filter (jika Anda tidak punya versi gelap PDF) */
  filter: invert(1) hue-rotate(180deg);
  background-color: white; /* Penting untuk konsistensi saat invert */
}

.w3-theme-light #pdfViewer {
  filter: none;
  background-color: transparent;
}

/* Judul di dalam modal */
#modalTitle {
  color: var(--text-color);
  margin-bottom: 20px;
}

/* Tombol Download PDF */
#downloadPdf {
  background-color: var(--primary-color) !important;
  color: var(--primary-text-color) !important;
  font-weight: bold;
}
#downloadPdf:hover {
  background-color: var(--secondary-color) !important;
  color: var(--secondary-text-color) !important;
}

/* Media Queries untuk Responsif (sesuaikan jika perlu) */
@media (max-width: 768px) {
  .modal-content {
    width: 95%; /* Lebih lebar di mobile */
    margin: 10% auto;
  }
  #pdfViewer {
    height: 400px; /* Kurangi tinggi iframe di mobile */
  }
}

@media (max-width: 480px) {
  .modal-content {
    width: 98%;
    margin: 5% auto;
  }
  #pdfViewer {
    height: 300px; /* Kurangi tinggi iframe lebih lanjut */
  }
}
/* Gaya Accordion */
.accordion-content {
  padding: 0 18px; /* Pastikan ada padding */
  background-color: var(--card-bg-color); 
  max-height: 0; /* INI PENTING: Harus 0 agar tersembunyi */
  overflow: hidden; /* INI PENTING: Untuk menyembunyikan konten di luar max-height */
  transition: max-height 0.3s ease-out, opacity 0.3s ease-out; /* Animasi */
  opacity: 0; /* INI PENTING: Dimulai dari 0 agar animasinya mulus */
}
.accordion-content.w3-show {
  max-height: 500px; /* INI PENTING: Nilai yang cukup besar agar konten terlihat */
  opacity: 1; /* Munculkan opacity */
}
/* ... gaya untuk tombol accordion ... */