/* =========================================================
   hero.css — hero, animasi masuk, kartu info, scroll cue
   Mobile-first; penyesuaian layar besar di responsive.css
   ========================================================= */
.hero {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column;
  color: #fff; background: var(--primary-dark);
  overflow: hidden;
  overflow: clip;
}
.hero__media { position: absolute; inset: 0; z-index: -2; background: var(--primary-dark); }
.hero__img, .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__video { opacity: 0; transition: opacity .9s ease; }
.hero__video.is-ready { opacity: 1; }

/* Overlay Dark Emerald + motif geometris tipis */
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  /* --ov (0–1) diatur dari dashboard: kekuatan overlay gelap di atas video/gambar */
  background:
    linear-gradient(to bottom, rgba(8, 40, 14, calc(.5 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 24%),
    linear-gradient(to top, rgba(8, 40, 14, calc(.7 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 40%),
    linear-gradient(180deg, rgba(14, 62, 24, calc(.74 * var(--ov, 1))), rgba(22, 84, 32, calc(.62 * var(--ov, 1))));
}
.hero__overlay::after {
  content: ""; position: absolute; inset: 0; opacity: .1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96' viewBox='0 0 96 96' fill='none' stroke='%23a9de8a' stroke-width='1.2'%3E%3Crect x='24' y='24' width='48' height='48'/%3E%3Crect x='24' y='24' width='48' height='48' transform='rotate(45 48 48)'/%3E%3C/svg%3E");
  background-size: 96px 96px;
  -webkit-mask-image: linear-gradient(to left, #000, transparent 70%);
  mask-image: linear-gradient(to left, #000, transparent 70%);
}

.hero__inner { flex: 1; display: flex; flex-direction: column; padding-top: var(--hero-top); }
.hero__body { flex: 1; display: flex; align-items: center; padding-block: 20px 28px; }
.hero__content { max-width: 760px; }

.hero__eyebrow {
  display: flex; align-items: center; gap: 12px;
  font-size: .75rem; font-weight: 700; letter-spacing: .16em; line-height: 1.4;
  color: var(--accent-light);
}
.hero__eyebrow::before { content: ""; width: 28px; height: 1px; background: var(--accent); flex: none; }

.hero__title {
  margin-top: 16px;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.25rem, 8vw, 5rem);
  line-height: 1.04; letter-spacing: -.015em;
  max-width: 16ch; text-wrap: balance;
}
.hero__lead {
  margin-top: 20px; max-width: 56ch;
  font-size: clamp(1rem, 1.6vw, 1.1875rem); line-height: 1.65;
  color: rgba(255, 255, 255, .88);
}
.hero__cta { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }

/* Animasi masuk hero: eyebrow -> judul -> deskripsi -> CTA -> kartu -> scroll cue */
.reveal { animation: rise .7s var(--ease) both; animation-delay: calc(var(--i, 0) * 90ms + 100ms); }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* Kartu informasi kaca */
.hero__foot { padding-bottom: 20px; }
.fcards { display: grid; grid-template-columns: 1fr; gap: 10px; }
.fcard {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px;
  color: #fff;
  background: rgba(8, 44, 18, .52);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: var(--radius-md);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fcard { background: rgba(8, 44, 18, .9); }
}
.fcard:hover { transform: translateY(-5px); border-color: var(--accent); box-shadow: 0 16px 32px rgba(0, 0, 0, .28); }
.fcard__icon { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; color: var(--accent-light); border: 1px solid rgba(169, 222, 138, .45); }
.fcard__icon .ic { width: 20px; height: 20px; }
.fcard__title { font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.fcard__text { margin-top: 2px; font-size: .8125rem; line-height: 1.4; color: rgba(255, 255, 255, .78); }

/* Scroll cue + kontrol video */
.hero__utility { display: none; position: relative; align-items: center; justify-content: center; margin-top: 18px; }
.scroll-cue { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 14px; font-size: .8125rem; color: rgba(255, 255, 255, .78); transition: color .2s; }
.scroll-cue:hover { color: #fff; }
.scroll-cue__arrow { width: 18px; height: 18px; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

.video-toggle {
  position: absolute; right: 0; top: 50%; translate: 0 -50%;
  display: grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%;
  background: rgba(8, 44, 18, .52); color: #fff; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.video-toggle:hover { border-color: var(--accent); }
.video-toggle[hidden] { display: none; }
.video-toggle .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }

/* ---------- Pengaturan tampilan hero dari dashboard ---------- */
/* Overlay merata (satu warna, tanpa gradasi kiri-ke-kanan) */
.hero--flat .hero__overlay {
  background:
    linear-gradient(to bottom, rgba(8, 40, 14, calc(.45 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 24%),
    linear-gradient(to top, rgba(8, 40, 14, calc(.6 * var(--ov, 1))) 0%, rgba(8, 40, 14, 0) 40%),
    linear-gradient(rgba(16, 66, 26, calc(.5 * var(--ov, 1))), rgba(16, 66, 26, calc(.5 * var(--ov, 1))));
}
/* Tanpa ornamen: motif bintang dan sorotan kursor disembunyikan */
.hero--plain .hero__overlay::after, .hero--plain .hero__glow { display: none; }
/* Overlay tipis: bantu keterbacaan teks di atas video terang */
.hero--low .hero__eyebrow, .hero--low .hero__title, .hero--low .hero__lead, .hero--low .scroll-cue { text-shadow: 0 2px 18px rgba(0, 0, 0, .6); }
.hero--low .btn--ghost { background: rgba(8, 40, 14, .4); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hero-low .site-header[data-scrolled="false"] .nav__link, .hero-low .site-header[data-scrolled="false"] .nav__trigger,
.hero-low .site-header[data-scrolled="false"] .brand__text { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }