/* ================= HERO BANNER ================= */

.hero-banner{
  background:#f8fafc;
  padding:0;
}

/* slider */
.hero-banner-slider{
  position:relative;
  width:100%;
  height:220px;           /* mobile first */
  overflow:hidden;
}

/* slide */
.hero-banner-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.05);
  transition:1s ease;
}

.hero-banner-slide.active{
  opacity:1;
  transform:scale(1);
  z-index:2;
}

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

/* overlay tipis */
.hero-banner-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.25),rgba(0,0,0,.05),transparent);
}

/* DOT */
.hero-dots{
  display:flex;
  justify-content:center;
  gap:6px;
  margin:8px 0 6px;
}

.hero-dot{
  width:7px;
  height:7px;
  border-radius:50%;
  background:#d1d5db;
  transition:.3s;
}

.hero-dot.active{
  width:16px;
  border-radius:99px;
  background:#ec4899;   /* pink Sukahijab vibe */
}

/* ================= RESPONSIVE ================= */

/* tablet */
@media(min-width:768px){
  .hero-banner-slider{
    height:360px;
  }
}

/* desktop */
@media(min-width:1024px){
  .hero-banner-slider{
    max-width:1200px;
    margin:0 auto;
    height:420px;
  }
}