/* Default (Light Mode) */
body {
  background-color: #fff;
  color: #212121;
  transition: background-color 0.4s ease, color 0.4s ease;
}

.card {
  background-color: #fff;
  color: #212121;
}

.card-content h6 {
  color: #212121;
}

#berita,
#wilayah,
#gallery {
  background-color: #fff;
  transition: background-color 0.3s ease;
}

/* Dark Mode Variants */
body.dark-mode {
  background-color: #212121;
  color: #fff;
}

body.dark-mode a {
  color: #fff;
}

body.dark {
  background-color: #212121;
  color: #fff;
}


/* Navbar & Header */
body.dark-mode nav,
body.dark-mode .collection-header,
body.dark-mode #sekilas-berita .collection-item,
body.dark-mode #bekerjasama .collection-item,
body.dark-mode #hubungi-kami .collection-item {
  background-color: #212121  !important;
}
body.dark-mode nav a,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode .grey-text,
body.dark-mode .text-darken-3,
body.dark-mode .card-panel h5,
body.dark-mode .card-panel h6,
body.dark-mode #contact h4,
body.dark-mode #contact .card-panel h5,
body.dark-mode #contact .card-panel h6 {
  color: #fff !important;
}

/* Section backgrounds */
body.dark-mode #pilihan,
body.dark-mode #video,
body.dark-mode #contact,
body.dark-mode #bekerjasama,
body.dark-mode #hubungi-kami,
body.dark-mode .collection.with-header,
body.dark-mode .card-panel,
body.dark-mode .grey.lighten-3,
body.dark-mode #sekilas-berita .card,
body.dark-mode #sekilas-berita .card-content,
body.dark-mode #sekilas-berita .collection,
body.dark-mode #bekerjasama .collection,
body.dark-mode #hubungi-kami .collection {
  background-color: #212121  !important;
  color: #fff !important;
}

/* Card */
body.dark-mode .card {
  background-color: #3a3a3a ;
  color: #fff;
}
body.dark-mode .card-content h6 {
  color: #fff !important;
}

/* Collection item */
body.dark-mode .collection-item {
  background-color: #212121  !important;
  color: #ddd !important;
  border-bottom: 1px solid #212121  !important;
}

/* Sekilas Berita detail */
body.dark-mode #sekilas-berita h6,
body.dark-mode #sekilas-berita p {
  color: #ddd !important;
}
body.dark-mode #sekilas-berita a.btn-small {
  background-color: #4caf50 !important;
  color: #fff !important;
}

/* Buttons */
body.dark-mode .btn,
body.dark-mode .btn-small,
body.dark-mode .btn-large {
  color: #fff !important;
}
body.dark-mode .btn.green,
body.dark-mode .btn-small.green,
body.dark-mode .btn-large.green {
  background-color: #4caf50 !important;
}
body.dark-mode .btn.grey,
body.dark-mode .btn-small.grey,
body.dark-mode .btn-large.grey {
  background-color: #fff !important;
}
body.dark-mode .btn:hover,
body.dark-mode .btn-small:hover,
body.dark-mode .btn-large:hover {
  filter: brightness(1.1);
}

/* Contact section */
body.dark-mode #contact {
  background-color: #2e2e2e !important;
}
body.dark-mode #contact .card-panel {
  background-color: #3a3a3a !important;
}

/* Navbar Items & Switch */
nav ul li {
  line-height: 64px;
  margin-left: 10px;
}

nav .switch {
  position: relative;
  margin-left: 20px;
  top: -10px;
  transform: scale(0.8);
  display: flex;
  align-items: center;
  height: 64px;
}

nav .switch label {
  display: flex;
  align-items: center;
  gap: 4px;
}

nav .switch .lever {
  width: 34px;
  height: 20px; /* track lebih tinggi agar knob muat */
  background-color: grey !important;
  border-radius: 20px;
  position: relative;
  transition: background-color 0.3s ease;
}

nav .switch .lever:after {
  content: "";
  background-color: white !important;
  border-radius: 50%;
  width: 18px;
  height: 18px;
  position: absolute;
  top: 1px;
  left: 1px;
  transition: left 0.3s ease, background-color 0.3s ease;
}

/* Saat switch aktif */
nav .switch input[type=checkbox]:checked + .lever:after {
  left: 15px;
}

/* Perkecil di layar lebar */
@media (min-width: 992px) {
  nav .switch {
    transform: scale(0.7);
  }

  nav .switch .lever {
    width: 28px;
    height: 16px;
    border-radius: 16px;
  }

  nav .switch .lever:after {
    width: 14px;
    height: 14px;
    top: 1px;
    left: 1px;
  }

  nav .switch input[type=checkbox]:checked + .lever:after {
    left: 28px; /* disesuaikan agar knob pas penuh */
  }
}

/* Search Form */
.search-form input {
  padding: 0 10px;
  margin-right: 10px;
}

/* Icons */
.light-icon,
.dark-icon,
nav .switch i.material-icons,
.switch .material-icons {
  font-size: 20px;
  margin: 0 5px;
  vertical-align: middle;
}

/* Youtube link khusus */
body.dark-mode a[href*="youtube.com"] {
  color: #fff !important;
  text-decoration: none;
}

/* Sidenav Dark Mode */
body.dark-mode .sidenav {
  background-color: #222 !important;
  color: #fff !important;
}

/* Trigger tombol dropdown di dark mode */
body.dark-mode .dropdown-trigger a {
  background-color: #fff !important;
  color: #222 !important;
}

/* Link dan icon di dalam sidenav */
body.dark-mode .sidenav a,
body.dark-mode .sidenav .material-icons,
body.dark-mode .sidenav .dropdown-trigger,
body.dark-mode .sidenav .user-view .name,
body.dark-mode .sidenav .user-view .email {
  color: #fff !important;
}

/* 🔽 Dropdown content di dark mode (agar teks hitam & tidak tertutup box) */
body.dark-mode .dropdown-content {
  background-color: #fff !important;  
  z-index: 9999 !important;           
}

body.dark-mode .dropdown-content li > a,
body.dark-mode .dropdown-content li > span {
  color: #000 !important;             
}

/* Responsive */
@media (max-width: 600px) {
  body.dark-mode {
    background-color: #212121 ; 
  }
}

/* Default (Light Mode) */
#berita,
#wilayah,
#gallery {
  background-color: #fff;  
  transition: background-color 0.3s ease;
}

/* Dark Mode (Semua layar) */
.dark-mode #berita,
.dark-mode #wilayah,
.dark-mode #gallery {
  background-color: #212121  !important;  /* warna gelap */
  color: #f5f5f5 !important;
}

/* Judul agar kontras di dark mode */
.dark-mode #berita h4,
.dark-mode #wilayah h4,
.dark-mode #gallery h4 {
  color: #f5f5f5 !important;
}

/* Responsive (Mobile) */
@media (max-width: 600px) {
  .dark-mode #berita,
  .dark-mode #wilayah,
  .dark-mode #gallery {
    background-color: #212121 !important; /* tetap gelap di layar kecil */
  }
}

/* Default (Light Mode) */
.gallery img {
  margin-bottom: 15px;
  background-color: #f0f0f0; /* terang */
  padding: 10px;
}

/* Dark Mode */
body.dark-mode .gallery img {
  background-color: #2e2e2e; /* abu-abu gelap */
  
}

/* Default ukuran switch */
.switch label .lever {
  width: 40px;
  height: 20px;
}

/* Untuk layar kecil (misalnya max-width 600px) */
@media (max-width: 600px) {
  .sidenav .switch label .lever {
    width: 30px;   /* lebih kecil */
    height: 15px;  /* lebih ramping */
  }

  /* Atur ukuran teks label agar proporsional */
  .sidenav .switch label {
    font-size: 0.9rem;
  }

  /* Atur ukuran ikon atau padding jika ada */
  .sidenav .switch {
    transform: scale(0.8); /* mengecilkan keseluruhan switch */
    margin-left: 8px;      /* beri jarak agar tidak terlalu mepet */
  }
}

/* Perbesar di layar lebar */
@media (min-width: 992px) {
  .switch label .lever {
    width: 60px;   /* lebih panjang */
    height: 25px;  /* lebih tinggi */
  }

  .switch label .lever:after {
    width: 30px;   /* diameter tombol */
    height: 30px;
    top: -3px;     /* sesuaikan posisi */
  }

  /* Ikon kiri/kanan juga bisa diperbesar */
  .switch label i.material-icons {
    font-size: 25px; /* default biasanya 18–24px */
    vertical-align: middle;
  }
}

/* Tambahkan jarak vertikal */
.switch {
  margin-top: 10px;   /* geser ke bawah */
}

/* Perubahan Warna pada model dark */
/* Navbar */
   nav.green.darken-3 {
  background-color: #2e7d32; /* hijau */
}

nav .container {
  background-color: transparent; /* biar nav full */
}

body.dark-mode nav.green.darken-3 {
  background-color:#424242 !important; /* hitam full */
}

body.dark-mode nav .container {
  background-color: transparent;
}

/* Button Small */
.btn-small.green {
  background-color: #2e7d32; /* hijau bawaan */
}

body.dark-mode .btn-small.green {
  background-color: #b6895b !important;
}

body.dark-mode .btn-small.green:hover,
body.dark-mode .btn-small.green:focus,
body.dark-mode .btn-small.green:active {
  background-color: #a6784d !important; /* lebih gelap untuk hover */
}

/* Card */
.card.green.darken-1 {
  background-color: #2e7d32; /* hijau bawaan */
}

body.dark-mode .card.green.darken-1 {
  background-color: #a6784d !important;
  color: #fff !important; /* teks putih agar kontras */
}

/* Floating Button */
.btn-floating.btn-medium.green.darken-2 {
  background-color: #1b5e20; /* hijau bawaan */
}

body.dark-mode .btn-floating.btn-medium.green.darken-2 {
  background-color: #a6784d !important;
  color: #fff !important; /* ikon putih */
}

body.dark-mode .btn-floating.btn-medium.green.darken-2:hover,
body.dark-mode .btn-floating.btn-medium.green.darken-2:focus,
body.dark-mode .btn-floating.btn-medium.green.darken-2:active {
  background-color: #8f6240 !important; /* lebih gelap untuk hover */
}

/* Button Default */
.waves-effect.btn.green {
  background-color: #2e7d32; /* hijau bawaan */
}

body.dark-mode .waves-effect.btn.green {
  background-color: #a6784d !important;
  color: #fff !important;
}

body.dark-mode .waves-effect.btn.green:hover,
body.dark-mode .waves-effect.btn.green:focus,
body.dark-mode .waves-effect.btn.green:active {
  background-color: #8f6240 !important;
}

/* Footer Buttons */
footer .btn-floating.green {
  background-color: #2e7d32; /* hijau bawaan */
}

body.dark-mode footer .btn-floating.green {
  background-color: #a6784d !important;
  color: #fff !important;
}

body.dark-mode footer .btn-floating.green:hover,
body.dark-mode footer .btn-floating.green:focus,
body.dark-mode footer .btn-floating.green:active {
  background-color: #8f6240 !important;
}

/* Footer Background */
footer.green.darken-3 {
  background-color: #2e7d32; /* hijau bawaan */
}

body.dark-mode footer.green.darken-3 {
  background-color: #8f6240 !important;
  color: #fff !important;
}

/* Default tombol (Materialize hijau) */
.btn-small.green {
  background-color: #4caf50;
}

/* Saat dark mode aktif */
body.dark-mode .btn-small.green {
  background-color: #8f6240 !important;
}

#darkToggle.dark-mode .btn-small.green {
  background-color: #8f6240 !important;
}


/* Layar Mobile */
.nav-wrapper .switch {
  display: inline-flex;
  align-items: center;
}

/* icon lebih dekat switch */
.switch label i.material-icons {
  font-size: 18px;      
  margin: 0 1px;        
  vertical-align: middle;
}

/* Default tanpa border */
.navbar-fixed nav {
  border-bottom: none;
}

/* Saat dark mode aktif */
body.dark-mode .navbar-fixed nav {
  border-bottom: 2px solid #8f6240 ;
}

.navbar-fixed nav {
  transition: border-bottom 0.3s ease;
}

.slider-dark img {
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url('../img/header-bg1.jpeg');
  background-repeat: no-repeat;
  background-size: cover;   /* biar gambar penuh */
  background-position: center;
  position: relative;

  /* Efek gradasi bawah */
  -webkit-mask-image: linear-gradient(rgb(22, 22, 22) 85%, rgba(0, 0, 0, 0));
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: cover;

  mask-image: linear-gradient(rgb(24, 24, 24) 85%, rgba(0, 0, 0, 0));
  mask-repeat: no-repeat;
  mask-size: cover;
}

/* Default tombol */
.btn-theme {
      color: white !important;
      transition: background-color 0.3s ease;
    }

    body.light-mode a.btn.btn-theme {
      background-color: green !important;
    }

    body.dark-mode a.btn.btn-theme {
      background-color: #8f6240 !important;
    }

       body.dark-mode nav {
      background-color: #333 !important; /* gelap */
    }

  /* Perbaiki warna Modal */
    .modal {
      background-color: white !important;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    }

    .modal .modal-content {
      background-color: white !important;
    }

    .modal-footer .btn-flat {
      color: #333;            /* tombol tutup hitam */
    }

    .modal .modal-content h6,
    .modal .modal-content p {
      color: #212121 !important;
    }

    /* Pastikan teks tabel selalu hitam */
    #donationTable table,
    #donationTable table th,
    #donationTable table td,
    #donationTable h4,
    #donationTable p {
      color: #000 !important;
    }

    /* Default (light mode) */
    #donationTable h4,
    #donationTable p {
      color: #212121; /* abu gelap */
    }

    /* Dark mode */
    @media (prefers-color-scheme: dark) {
      #donationTable h4,
      #donationTable p {
        color: #fff !important; /* paksa putih */
      }
    }