/* =========================
   HERO SECTION (Final Fix SISTARU)
   ========================= */

/* Bungkus utama hero */
.banner-hero {
  width: 100vw;                                 /* penuh selebar layar */
  height: auto !important;                      /* biar ikut tinggi gambar */
  min-height: 550px;                            /* jaga tampilan di HP */
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-left: calc(-50vw + 50%);               /* hilangkan margin putih kiri-kanan */
  margin-top: -10px !important;                 /* rapat ke navbar */
  margin-bottom: 10px !important;               /* jarak ke slide bawah */
  background-color: #e9f0ff;                    /* warna lembut background */
}

/* Gambar hero */
.banner-hero img {
  width: 100vw !important;                      /* penuhi layar */
  height: auto !important;                      /* proporsional */
  object-fit: contain !important;               /* tampil utuh tanpa potong */
  display: block;
  margin: 0 auto;
  opacity: 0;
  transform: scale(1.03);
  animation: heroFadeIn 1.5s ease-out forwards; /* efek masuk lembut */
}

/* Animasi lembut */
@keyframes heroFadeIn {
  0% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Untuk layar kecil */
@media (max-width: 768px) {
  .banner-hero {
    min-height: 400px;
    margin-top: 0 !important;
    padding-top: 20px !important;
  }
}

/* Hilangkan jarak atas body dari gradient */
.hero-gradient {
  margin-top: 0 !important;
  padding-top: 0 !important;
}
/* =========================
   HERO SECTION (Final Proporsional Fix)
   ========================= */

.banner-hero {
  width: 100vw;                                 /* penuh selebar layar */
  height: auto;                                 /* biar tinggi ikut gambar */
  margin: 0;
  padding: 0;
  overflow: hidden;
  position: relative;
  margin-left: calc(-50vw + 50%);               /* hilangkan margin putih kiri-kanan */
  margin-top: -5px;                             /* rapat ke navbar */
  margin-bottom: 15px;                          /* beri jarak ke slide */
  background-color: #e9f0ff;                    /* warna lembut agar transisi halus */
}

/* Gambar hero */
.hero-img {
  width: 100%;
  max-width: 1920px;                            /* sesuai ukuran asli */
  height: auto;
  display: block;
  margin: 0 auto;
  object-fit: contain;                          /* tampil utuh tanpa potongan */
  animation: heroFadeIn 1.2s ease-out forwards; /* efek masuk lembut */
  opacity: 0;
  transform: scale(1.03);
}

/* Animasi lembut */
@keyframes heroFadeIn {
  0% { opacity: 0; transform: scale(1.05); }
  100% { opacity: 1; transform: scale(1); }
}

/* Responsif untuk layar kecil */
@media (max-width: 992px) {
  .banner-hero {
    margin-top: 0;
    margin-left: 0;
    width: 100%;
  }
  .hero-img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}
/* =========================
   SLIDESHOW (Full Width Fix)
   ========================= */
.slideshow-full {
  width: 100vw;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;
  position: relative;
  padding: 0;
}

.slideshow-full .carousel,
.slideshow-full .carousel-inner,
.slideshow-full .carousel-item,
.slideshow-full .slide-img {
  width: 100vw;
  height: auto;
  margin: 0;
  padding: 0;
}

.slide-img {
  object-fit: cover;
  display: block;
}

/* Responsif */
@media (max-width: 768px) {
  .slide-img {
    object-fit: contain; /* biar di HP tidak terpotong */
  }
}
/* =========================
   SMOOTH SLIDER TRANSITION
   ========================= */

/* Fade halus antar slide */
.carousel.carousel-fade .carousel-item {
  transition-property: opacity, transform;
  transition-duration: 1.2s; /* durasi perpindahan */
  transition-timing-function: ease-in-out;
  opacity: 0;
  transform: scale(1.03); /* sedikit zoom */
}

.carousel.carousel-fade .carousel-item.active,
.carousel.carousel-fade .carousel-item-next.carousel-item-start,
.carousel.carousel-fade .carousel-item-prev.carousel-item-end {
  opacity: 1;
  transform: scale(1);
  z-index: 1;
}

/* Hindari efek snap antar slide */
.carousel-inner {
  transition: transform 1.2s ease-in-out !important;
}

/* Haluskan ikon navigasi (panah) */
.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: drop-shadow(0 0 3px rgba(0,0,0,0.4));
  transition: all 0.3s ease;
}

.carousel-control-prev-icon:hover,
.carousel-control-next-icon:hover {
  transform: scale(1.15);
  filter: drop-shadow(0 0 6px rgba(0,0,0,0.6));
}
/* =========================
   GLOBAL BACKGROUND (PUPR Gradient)
   ========================= */
body {
  background: linear-gradient(to bottom, #004aad 0%, #e9f0ff 40%, #ffffff 100%);
  background-attachment: fixed;
  color: #212529;
  font-family: "Poppins", "Segoe UI", sans-serif;
}

/* Warna dasar section agar menyatu */
section {
  background: transparent;
}

/* Perbaikan kontainer agar tidak muncul blok putih */
.container, .bg-body, .bg-transparent {
  background-color: transparent !important;
  box-shadow: none !important;
}

/* Kartu data & galeri */
.card {
  border: none;
  border-radius: 1rem;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  background: #ffffffd9; /* putih transparan lembut */
  transition: all 0.3s ease;
}

.card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 18px rgba(0,0,0,0.1);
}

/* Footer lebih harmonis */
footer {
  background: linear-gradient(to right, #004aad, #1976d2);
  color: #fff;
}

footer a {
  color: #ffd740;
  text-decoration: none;
}

footer a:hover {
  text-decoration: underline;
}
.banner-hero {
  background: linear-gradient(to bottom, #004aad 0%, #e9f0ff 60%);
}

.slideshow-full {
  background: linear-gradient(to bottom, #e9f0ff 0%, #ffffff 100%);
}
/* =========================
   GLOBAL GRADIENT (PUPR Blue Theme)
   ========================= */
body {
  background: linear-gradient(to bottom, #004aad 0%, #e9f0ff 40%, #ffffff 100%);
  background-attachment: fixed;
  color: #212529;
  font-family: "Poppins", "Segoe UI", sans-serif;
}

/* Semua section agar tidak putih polos */
section {
  background: linear-gradient(to bottom, #e9f0ff 0%, #ffffff 100%);
  padding-top: 40px;
  padding-bottom: 40px;
}
/* =========================
   SECTION DATA & GALERI FOTO
   ========================= */

/* Section title: warna & ikon */
.section-title {
  background: linear-gradient(to right, #004aad, #1976d2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Warna ikon sesuai tema */
.section-title i {
  color: #ffc107;
}

/* Kartu menu data */
.menu-card {
  background: #ffffffd9;
  border-radius: 1rem;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
  transition: all 0.3s ease-in-out;
}

.menu-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

/* =========================
   GALERI FOTO ANIMASI
   ========================= */

.card {
  border: none;
  border-radius: 1rem;
  background: #ffffffcc;
  overflow: hidden;
  transition: all 0.4s ease;
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 12px 25px rgba(0,74,173,0.25);
}

/* Gambar dalam card */
.card img {
  transition: all 0.5s ease;
  border-radius: 1rem 1rem 0 0;
}

.card:hover img {
  transform: scale(1.07);
  filter: brightness(1.05);
}

/* Teks di card */
.card-body small {
  color: #333;
  font-weight: 500;
}
/* Efek muncul dari bawah */
[data-animate="fade-up"] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

[data-animate="fade-up"].show {
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   HERO SECTION (Fullscreen Final)
   ========================= */
.banner-hero {
  width: 100vw;
  height: 100vh; /* isi seluruh tinggi layar */
  margin: 0 !important;
  padding: 0 !important;
  margin-left: calc(-50vw + 50%);
  overflow: hidden;

  position: relative;
  top: -1px; /* menutup garis kecil dari navbar */
  background: none;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Hero image responsive & proporsional */
.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* pastikan penuh layar tapi tetap proporsional */
  object-position: center center; /* posisi fokus di tengah */
  display: block;
  margin: 0;
  padding: 0;

  /* efek lembut saat muncul */
  opacity: 0;
  transform: scale(1.03);
  animation: heroFadeIn 1.2s ease-out forwards;
}

/* Efek animasi lembut */
@keyframes heroFadeIn {
  from { opacity: 0; transform: scale(1.05); }
  to { opacity: 1; transform: scale(1); }
}

/* Hapus jarak antara hero dan navbar */
main.hero-gradient {
  margin: 0 !important;
  padding: 0 !important;
}

/* Navbar */
.navbar-custom {
  margin-bottom: 0 !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* RESPONSIVE ADAPTATION */
@media (max-width: 992px) {
  .banner-hero {
    height: 70vh; /* biar nggak terlalu tinggi di HP */
  }
  .hero-img {
    object-fit: contain; /* tampil utuh tanpa crop */
  }
}

@media (max-width: 576px) {
  .banner-hero {
    height: 60vh; /* lebih kecil di layar kecil */
  }
}
/* =========================
   FIX SCROLL HORIZONTAL
   ========================= */

/* Hilangkan scroll horizontal global */
html, body {
  width: 100%;
  overflow-x: hidden !important;
  margin: 0;
  padding: 0;
}

/* Perbaiki lebar hero agar tetap center tanpa menyebabkan overflow */
.banner-hero {
  position: relative;
  width: 100%;           /* ganti dari 100vw agar tidak melebihi viewport */
  max-width: 100%;
  margin: 0 auto !important;
  padding: 0 !important;
  overflow: hidden;
}

/* Gambar hero tetap fullscreen proporsional */
.banner-hero img.hero-img {
  width: 100%;
  height: 100vh;          /* tetap penuh layar */
  object-fit: cover;
  object-position: center center;
  display: block;
  margin: 0 auto;
}

/* Responsif untuk layar kecil */
@media (max-width: 992px) {
  .banner-hero img.hero-img {
    height: 70vh;
    object-fit: contain;
  }
}
/* =========================
   HERO & SLIDER FULLSCREEN SCROLL
   ========================= */

/* Hero memenuhi layar penuh tanpa scroll */
.banner-hero {
  height: 100vh;              /* satu layar penuh */
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  scroll-snap-align: start;   /* efek snap scroll */
  scroll-snap-stop: always;
  position: relative;
}

.hero-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.section-slider {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  background: linear-gradient(to bottom, #f9fbff, #e8f0ff);
  padding-top: 80px;       /* dari 50px ke 80px → lebih turun */
  margin-top: -10px;       /* agar tidak terlalu renggang */
  transition: all 0.3s ease;
}


/* Hilangkan scroll horizontal & aktifkan snap vertical */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  overflow-x: hidden;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
}

/* Hilangkan celah antara hero & navbar */
.navbar-custom {
  margin-bottom: 0 !important;
}
/* === HERO & SLIDER GAP FIX (SISTARU FINAL) === */
.banner-hero {
  height: 95vh;              /* tidak menutup total layar, sisakan ruang bawah */
  overflow: visible !important;
  margin-bottom: 60px !important; /* jarak antar hero dan slider */
  background: none;
}

.slideshow-full {
  margin-top: 0 !important;  /* hilangkan margin negatif yang bikin nempel */
  padding-top: 120px !important; /* jarak isi slider dari tepi atas */
  background: linear-gradient(to bottom, #e8f0ff, #ffffff);
  transition: all 0.4s ease-in-out;
}