/* ========== HERO FULL WIDTH (kb-*) ========== */

.kb-hero-wrap {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #000;
}

.kb-hero {
  position: relative;
  width: 100vw;
  height: 100vh;         /* full screen */
  min-height: 560px;
  isolation: isolate;    /* agar overlay/caption di atas slide */
  --kb-duration: 24s;    /* fallback */
  --kb-step: 6s;         /* fallback */
}

.kb-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center center;
  will-change: opacity, transform;
  opacity: 0;
  transform: scale(1.02);
  filter: brightness(72%);
  animation: kbFade var(--kb-duration) infinite linear;
}

/* Slide aktif akan sedikit zoom agar cinematic */
@keyframes kbFade {
  /* pola: muncul 8%, diam 17%, hilang sampai 33% → sisanya 67% kosong
     Digabung dengan animation-delay berbeda per slide dari PHP */
  0%   { opacity: 0; transform: scale(1.02); }
  8%   { opacity: 1; transform: scale(1.00); }
  25%  { opacity: 1; transform: scale(1.00); }
  33%  { opacity: 0; transform: scale(1.02); }
  100% { opacity: 0; transform: scale(1.02); }
}

/* Overlay gradasi agar teks terbaca */
.kb-mask {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.65) 80%);
}

/* Caption */
.kb-caption {
  position: absolute;
  z-index: 2;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 0 1.25rem;
  color: #fff;
}

.kb-title {
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: .5px;
  margin-bottom: .5rem;
  text-shadow: 0 6px 16px rgba(0,0,0,.55);
}

.kb-sub {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  opacity: .95;
  margin-bottom: 1.25rem;
  text-shadow: 0 4px 12px rgba(0,0,0,.5);
}

.kb-cta {
  display: inline-flex;
  gap: .75rem;
}

/* Responsif tombol di layar kecil */
@media (max-width: 576px) {
  .kb-cta .btn-lg {
    padding: .55rem 1rem;
    font-size: 1rem;
  }
}