/* ---- HERO: full layar minus tinggi navbar ---- */
:root {
    --nav-h: 75px;
}

/* ganti kira2 tinggi header/nav kamu */

#hero {
    position: relative;
    margin: 0;
}

#hero .hero-viewport {
    /* kalau belum ada, pakai #hero saja */
    height: calc(100dvh - var(--nav-h));
    /* pakai dvh: aman di mobile */
    min-height: 520px;
    /* agar tidak kependekan di laptop kecil */
    max-height: 855px;
    /* boleh kamu naikkan kalau mau lebih tinggi */
    overflow: hidden;
}

/* Semua level ikut tinggi frame */
#heroCarousel,
#heroCarousel .carousel-inner,
#heroCarousel .carousel-item {
    height: 100%;
}

/* Gambar selalu cover frame */
.hero-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--ox, 50%) var(--oy, 50%);
    /* bisa set fokus per slide */
}

/* Hilangkan “celah putih” dari section berikutnya */
#hero+section {
    margin-top: 0 !important;
}

/* slideshow.css */

/* Default desktop */
.hero-viewport {
  height: 90vh; /* kira-kira 900px dari code Anda */
  overflow: hidden;
}

.hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* gambar tidak distorsi */
}

/* --- MOBILE FIX: hero menyusut & gambar tetap landscape (tanpa crop) --- */
@media (max-width: 767.98px) {
  /* Frame jangan dipaksa tinggi */
  #hero .hero-viewport {
    height: 38svh;      /* atau 35svh/40svh sesuai selera */
    min-height: unset;  /* penting: buang kunci min-height:520px */
    max-height: none;
    overflow: hidden;
  }

  /* Carousel item ikut auto height */
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item {
    height: auto;
  }

  /* Gambar jangan di-absolute + jangan di-cover */
  .hero-slide-img {
    position: static;     /* lepas absolute supaya height auto */
    display: block;
    width: 100%;
    height: auto;         /* pertahankan rasio landscape */
    max-height: 38svh;    /* sinkron dengan frame */
    object-fit: contain;  /* TIDAK dipotong/crop */
    object-position: center center;
    background: #ffc400;  /* warna brand utk “letterbox” di kiri/kanan bila ada */
  }
}

/* --- TABLET: sedikit lebih tinggi tapi tetap tidak crop --- */
@media (min-width: 768px) and (max-width: 991.98px) {
  #hero .hero-viewport { height: 55svh; min-height: unset; }
  #heroCarousel,
  #heroCarousel .carousel-inner,
  #heroCarousel .carousel-item { height: auto; }
  .hero-slide-img {
    position: static;
    height: auto;
    max-height: 55svh;
    object-fit: contain;
  }
}