/* ================= HERO SLIDER (desktop stabil, mobile fleksibel) ================= */
.hs-hero {
  --h:520px;
  --h-sm:260px;
  --shade:linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  --btn-bg:rgba(255,255,255,.85);
  --btn-bg-hover:#fff;
  --btn-fg:#111;
  --dot-size:14px;
  --dot-gap:10px;

  position: relative;
  width: 100%;
  height: var(--h);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
  padding-bottom: 0 !important;
}

@media (max-width: 768px){
  .hs-hero {
    height: var(--h-sm);
    border-radius: 12px;
  }
}

/* ===== Slides ===== */
.hs-track { position:absolute; inset:0; }

.hs-slide {
  position: absolute;
  inset: 0;
  background-image: var(--bg);
  background-size: cover;
  background-position: center;
  transform: scale(1.02);
  opacity: 0;
  transition: opacity 600ms ease, transform 600ms ease;
  will-change: opacity, transform;
}
.hs-slide.is-active { opacity: 1; transform: scale(1); z-index: 1; }

/* Gradasi overlay (bukan kartu hero) */
.hs-overlay {
  position: absolute;
  inset: 0;
  background: var(--shade);
  pointer-events: none;
  z-index: 2;
}

/* ===== Navigasi panah ===== */
.hs-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  display: grid; place-items: center;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.18);
  transition: background .2s ease, transform .2s ease;
}
.hs-nav:hover { background: var(--btn-bg-hover); transform: translateY(-50%) scale(1.12); }
.hs-prev { left: 14px; } 
.hs-next { right: 14px; }

/* ===== Dots (thumbnail) ===== */
.hs-dots {
  position: absolute;
  left: 50%;
  bottom: 90px; /* posisi desktop tetap */
  translate: -50% 0;
  z-index: 25;
  display: flex;
  gap: var(--dot-gap);
  align-items: center;
  padding: 6px 10px;
  background: rgba(0,0,0,.25);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 999px;
  transition: bottom .3s ease;
}

/* Mobile: dots menempel bawah hero */
@media (max-width: 991px){
  .hs-dots { bottom: min(4vw, 24px); }
}
@media (max-width:575.98px){
  .hs-dots { bottom: 12px; }
}

/* Dot item */
.hs-dot {
  width: var(--dot-size);
  height: var(--dot-size);
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.8);
  background-size: cover;
  background-position: center;
  opacity: .6;
  cursor: pointer;
  transition: transform .15s ease, opacity .15s ease, border-color .15s ease;
}
.hs-dot:hover { transform: scale(1.15); opacity: .9; }
.hs-dot.is-active { opacity: 1; border-color: #fff; transform: scale(1.2); }

/* ===== Layer fix ===== */
.slider-container { position: relative; }
.slider-container .slider-overlay { z-index: 20; }
.hs-hero .hs-dots { z-index: 25; }

/* =========================================================================
   MARGIN SAMPING UNTUK FILTER DI BAWAH HERO (MOBILE)
   -------------------------------------------------------------------------
   Filter bar di bawah hero diberi margin kiri/kanan agar tidak mepet tepi layar
   ====================================================================== */
@media (max-width: 575.98px){
  /* class umum */
  .f-filter,
  .filter-bar {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Jika langsung berupa form pencarian property */
  form[action*="/property"] {
    margin-left: 12px;
    margin-right: 12px;
  }

  /* Jika dibungkus container/section/div */
  .slider-overlay + .container,
  .slider-overlay + section,
  .slider-overlay + div {
    margin-left: 12px;
    margin-right: 12px;
  }
}