/* ===================== */
/* 🌿 NAVBAR STYLING */
/* ===================== */
.navbar {
  --nb-bg: #198754;
  --nb-bg-hover: #157347;
  --nb-text: #fff;
  transition: box-shadow 0.3s ease, background-color 0.3s ease;
}
.navbar-brand {
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
}
.navbar .nav-link {
  text-transform: uppercase;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .3px;
  padding: .75rem;
  color: var(--nb-text);
  opacity: .95;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus {
  background: var(--nb-bg-hover);
  color: #fff;
  opacity: 1;
}
.navbar-nav.equalize > li {
  flex: 1 1 0;
  text-align: center;
}
.dropdown-menu {
  border-radius: .5rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.1);
}
.navbar .nav-link.active {
  background-color: #157347 !important;
  font-weight: 700;
}
.dropdown-item.active {
  background-color: #e9f8ec !important;
  color: #198754 !important;
  font-weight: 600;
}

/* ===================== */
/* 🎠 CAROUSEL (Home) */
/* ===================== */
.carousel-hero {
  height: 420px;
}
@media (max-width: 576px) {
  .carousel-hero {
    height: 260px;
  }
}
.carousel-hero .carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.carousel-caption.centered {
  top: 50%;
  transform: translateY(-50%);
  bottom: auto;
}
.carousel-caption h2,
.carousel-caption p {
  text-shadow: 0 3px 8px rgba(0,0,0,.7);
}
.carousel-indicators {
  display: none;
}

/* ===================== */
/* 📍 SECTION ALAMAT */
/* ===================== */
.section-address {
  background: #f8f9fa;
  padding: 3rem 0;
}

/* ===================== */
/* 🌿 HERO / PAGE HEADER */
/* ===================== */
.hero-slab {
  background:
    radial-gradient(1200px 320px at 50% -120px, rgba(25,135,84,.08), transparent 70%),
    linear-gradient(#fff,#fff);
}

/* ===================== */
/* 🟢 DEKORASI JUDUL */
/* ===================== */
.deco-line {
  width: 96px;
  height: 4px;
  background: linear-gradient(90deg,#198754, #2eb872);
  border-radius: 999px;
}

/* ===================== */
/* 🎨 TOMBOL TAMBAHAN */
/* ===================== */
.btn-soft-success {
  background: #e9f8ef;
  color: #198754;
  border: 1px solid rgba(25,135,84,.25);
}
.btn-soft-success:hover {
  background: #198754;
  color: #fff;
}

/* ===================== */
/* ✨ ANIMASI EFEK */
/* ===================== */

/* Fade-in lembut untuk elemen (digunakan di banyak halaman) */
.fade-in {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}
.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* Efek fade-section untuk konten (profil & tugas-fungsi) */
.fade-section {
  opacity: 0;
  transform: translateY(25px);
  transition: all .8s ease;
}
.fade-section.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Efek highlight judul hijau lembut */
.fade-title {
  position: relative;
  display: inline-block;
}
.fade-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 0%;
  height: 10px;
  background: linear-gradient(90deg, #28c57c33, #19875433);
  border-radius: 6px;
  transition: width 1s ease;
  z-index: -1;
}
.visible .fade-title::after {
  width: 100%;
}

/* ===================== */
/* 🌫️ SCROLL EFFECT NAVBAR (opsional, aktif jika JS dipakai) */
/* ===================== */
.navbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
  background-color: #157347 !important;
}

/* width tombol auth: full di mobile, auto di desktop */
.w-lg-auto {
  width: auto;
}

@media (max-width: 991.98px) {
  /* untuk jaga-jaga, pastikan full di mobile */
  .navbar .nav-item .btn.w-100 {
    width: 100%;
  }
}

/* Backdrop untuk sidebar di mobile */
.sidebar-backdrop {
  position: fixed;
  inset: 56px 0 0 0; /* mulai di bawah navbar */
  background: rgba(0, 0, 0, 0.45);
  z-index: 1005;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease;
}

.sidebar-backdrop.show {
  opacity: 1;
  visibility: visible;
}