/* HERO — mobile-first, vanilla CSS, ringan */
.hero-section{
  position:relative;
  min-height:56vh; /* nyaman di mobile */
  display:grid;
  place-items:center;
  background-image:var(--hero-bg);
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  isolation:isolate;
}

.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.35));
  /* sedikit blur untuk teks lebih terbaca tanpa berat */
  backdrop-filter:saturate(110%) blur(1.5px);
  z-index:-1;
}

.hero-container{
  width:100%;
  max-width:1100px;
  padding:20px 16px;
  margin-inline:auto;
}

.hero-content{
  color:#fff;
  text-align:left;
  max-width:680px;
}

.hero-badge{
  display:inline-block;
  font-size:12px;
  line-height:1;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:#ff3b30; /* aksen merah pedas */
  color:#fff;
  padding:8px 10px;
  border-radius:999px;
  margin-bottom:10px;
}

.hero-title{
  margin:8px 0 6px;
  font-weight:800;
  line-height:1.15;
  /* clamp tipografi responsif */
  font-size:clamp(22px, 5vw, 44px);
  text-wrap:balance;
  text-shadow:0 2px 14px rgba(0,0,0,.35);
}

.hero-subtitle{
  margin:0 0 16px;
  font-size:clamp(14px, 3.5vw, 18px);
  line-height:1.6;
  opacity:.95;
  max-width:60ch;
}

.btn-cta{
  display:inline-block;
  padding:12px 16px;
  border-radius:12px;
  font-weight:700;
  text-decoration:none;
  color:#111;
  background:#ffd85a; /* kuning renyah */
  box-shadow:0 6px 20px rgba(0,0,0,.18);
  transition:transform .18s ease, box-shadow .18s ease, background-color .18s ease;
  will-change:transform;
}
.btn-cta:hover{ transform:translateY(-2px); box-shadow:0 10px 26px rgba(0,0,0,.22); }
.btn-cta:active{ transform:translateY(0); }

@media (min-width:768px){
  .hero-section{ min-height:64vh; }
  .hero-container{ padding:36px 24px; }
  .hero-subtitle{ margin-bottom:18px; }
}

@media (min-width:1024px){
  .hero-section{ min-height:70vh; }
}