/* Definisi Variabel Warna */
:root {
  --sij-dark-green: #004d40; /* Hijau Tua */
  --sij-yellow: #ffc107;      /* Kuning */
  --sij-light: #f8f9fa;       /* Putih Keabuan */
  --sij-dark-text: #343a40;
}

/* Kustomisasi Body */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background-color: #f0f2f5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}


main {
  flex-grow: 1;
}

/* Kustomisasi Navbar */
.navbar-custom {
  background-color: var(--sij-dark-green);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.navbar-custom .navbar-brand,
.navbar-custom .nav-link {
  color: var(--sij-light);
  font-weight: 500;
}

.navbar-custom .nav-link:hover,
.navbar-custom .nav-link.active,
.navbar-custom .dropdown-item:hover {
  color: var(--sij-yellow);
}

.dropdown-menu {
    background-color: var(--sij-dark-green);
    border: 1px solid var(--sij-yellow);
}
.dropdown-item {
    color: var(--sij-light);
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: rgba(255, 193, 7, 0.1);
}

.navbar-custom .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 193, 7, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-custom .navbar-toggler {
    border-color: var(--sij-yellow);
}


/* Kustomisasi Card Statistik */
.card-statistic {
  border: none;
  border-left: 5px solid var(--sij-dark-green);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}
.card-statistic:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.15);
}
.card-statistic .icon-wrapper {
  background-color: var(--sij-dark-green);
  color: var(--sij-yellow);
  font-size: 2.5rem;
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin-bottom: 1rem;
}
.card-statistic .card-title {
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--sij-dark-text);
}
.card-statistic .card-text {
  font-size: 2rem;
  font-weight: 700;
  color: var(--sij-dark-green);
}

/* Kustomisasi Halaman Berita */
.card-berita {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-berita:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
.card-berita .card-img-top {
    height: 200px;
    object-fit: cover;
}
.card-berita .card-footer {
    background-color: transparent;
    border-top: 1px solid #eee;
}

/* Kustomisasi Galeri */
.gallery-item img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: pointer;
}
.gallery-item img:hover {
    transform: scale(1.05);
    filter: brightness(0.8);
}

/* Kustomisasi Tabel */
.table-custom thead {
    background-color: var(--sij-dark-green);
    color: var(--sij-light);
}

/* Kustomisasi Peta Leaflet */
#map {
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

/* Kustomisasi Footer */
.footer-custom {
    background-color: var(--sij-dark-green);
    color: var(--sij-light);
    padding: 2rem 0;
}
.footer-custom a {
    color: var(--sij-yellow);
    text-decoration: none;
}
.footer-custom a:hover {
    text-decoration: underline;
}

/* Tambahkan ini di akhir file style.css */

.card-header-custom {
    background-color: var(--sij-dark-green);
    color: var(--sij-light);
    font-weight: bold;
}

.legend-dot {
    height: 18px;
    width: 18px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 10px;
    vertical-align: middle;
    border: 2px solid rgba(0,0,0,0.1);
}