/* ═══════════════════════════════════════════════════
   TENTANG — PAGE STYLES
   ═══════════════════════════════════════════════════ */

/* ── Hero ── */
.about-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background-color: var(--clr-forest);
}

/* ── Hero Video Background ──
   Layer paling bawah, di belakang .about-hero__bg (gradient) dan
   .about-hero__grid (garis tipis) — dua layer itu jadi "color wash"
   di atas video biar teks tetap kontras. Sengaja TANPA z-index:
   ngikutin DOM order alami sama seperti bg/grid/since di bawahnya
   (semua auto-stack, urutan render = urutan DOM). Video cuma
   di-load & diputar via about.js di desktop — lihat blok JS terkait. */
.about-hero__video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.about-hero__video-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55; /* gradient/grid overlay di atasnya tetap dominan, teks kontras */
}

/* Video (sumbernya) cuma di-load di desktop lewat JS — hemat kuota &
   baterai HP. PENTING: di sini kita TIDAK nyembunyiin seluruh
   .about-hero__video, cuma bikin videonya sendiri gak dianggap "aktif".
   Kalau seluruh container disembunyiin (display:none), gambar `poster`
   yang nempel di elemen <video> ikut ilang — padahal itu yang HARUS
   jadi tampilan tetap pengganti video di mobile/reduced-motion. */
@media (max-width: 991.98px), (prefers-reduced-motion: reduce) {
  .about-hero__video-el {
    /* poster tetap tampil (browser render dari atribut poster walau
       gak ada <source> sama sekali) — cuma matiin pointer-events biar
       gak ada state hover/klik aneh di device yang punya mouse+touch. */
    pointer-events: none;
  }
}

/* ── Nav transparan DIMATIKAN khusus mobile, khusus halaman About Us ──
   navbar-scroll.js itu shared script (dipakai juga di Home) — sengaja
   TIDAK diubah di sana biar behavior Home gak ikut kesenggol. Di sini
   kita cuma override tampilannya lewat CSS, di-scope pakai body.about-page
   supaya Home & halaman lain gak kena dampak sama sekali. Navbar tetap
   solid dari awal di mobile, gak ngikutin state transparent/intro yang
   di-toggle JS. */
@media (max-width: 991.98px) {
  body.about-page #mainNav.nav-transparent {
    --nav-bg: var(--clr-forest) !important;
    --nav-border: rgba(255, 255, 255, 0.07) !important;
    box-shadow: none;
  }
  body.about-page #mainNav.nav-intro {
    height: calc(var(--nav-height) + env(safe-area-inset-top, 0px));
  }
}

.about-hero__bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 60% 80% at 80% 50%,
      rgba(82, 121, 111, 0.25) 0%,
      transparent 65%
    ),
    radial-gradient(
      ellipse 40% 60% at 10% 80%,
      rgba(181, 146, 76, 0.12) 0%,
      transparent 55%
    );
  pointer-events: none;
}
.about-hero__grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.025) 1px, transparent 1px);
  background-size: 60px 60px;
  pointer-events: none;
}
.about-hero__content {
  position: relative;
  z-index: 2;
  padding: 120px 0 80px;
}
.about-hero__eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--clr-gold);
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 1.5rem;
  opacity: 0;
  transform: translateY(16px);
  animation: fadeUp 0.7s var(--ease-out) 0.2s forwards;
}
.about-hero__eyebrow::before {
  content: "";
  width: 32px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0;
}
.about-hero__title {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #fff;
  margin-bottom: 0.25rem;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeUp 0.8s var(--ease-out) 0.38s forwards;
}
.about-hero__title em {
  font-style: italic;
  color: var(--clr-gold);
}
.about-hero__sub {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.62);
  max-width: 480px;
  line-height: 1.75;
  margin-top: 1.5rem;
  opacity: 0;
  transform: translateY(18px);
  animation: fadeUp 0.8s var(--ease-out) 0.52s forwards;
}
.about-hero__since {
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(8rem, 18vw, 16rem);
  font-weight: 600;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.05em;
}
.scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  opacity: 0;
  animation: fadeUp 0.6s var(--ease-out) 1.1s forwards;
}
.scroll-hint span {
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
}
.scroll-mouse {
  width: 22px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  justify-content: center;
  padding-top: 6px;
}
.scroll-mouse::before {
  content: "";
  width: 3px;
  height: 6px;
  background: rgba(255, 255, 255, 0.4);
  border-radius: 2px;
  animation: scrollBounce 1.8s ease-in-out infinite;
}

/* ── Section Base ── */
.section-py {
  padding: var(--section-py) 0;
}
.section-py-sm {
  padding: 5rem 0;
}

/* ── Eyebrow ── */
.section-eyebrow {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 1.25rem;
}
.section-eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: var(--clr-gold);
  flex-shrink: 0;
}

/* ── Siapa Kami ── */
.about-intro {
  background: var(--clr-cream);
}
.intro-statement {
  background: var(--clr-forest);
  padding: 3rem 2.75rem;
  position: relative;
}
.intro-statement::after {
  content: "";
  position: absolute;
  top: 18px;
  left: 18px;
  right: -18px;
  bottom: -18px;
  border: 1px solid rgba(212, 175, 106, 0.3);
  pointer-events: none;
}
.intro-statement__quote {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 400;
  font-style: italic;
  color: #fff;
  line-height: 1.45;
  margin: 0 0 1.5rem;
}
.intro-statement__attr {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-gold);
}

/* ── Timeline ── */
.journey-section {
  background: var(--clr-warm);
}
.timeline {
  position: relative;
  padding-left: 0;
  list-style: none;
  margin: 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 52px;
  top: 8px;
  bottom: 8px;
  width: 1px;
  background: var(--clr-sand);
}
.tl-item {
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 1.75rem;
  padding-bottom: 2.75rem;
  position: relative;
}
.tl-item:last-child {
  padding-bottom: 0;
}
.tl-year {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 600;
  color: var(--clr-gold);
  text-align: right;
  padding-top: 3px;
  line-height: 1;
}
.tl-body {
  padding-left: 1.5rem;
  position: relative;
}
.tl-body::before {
  content: "";
  position: absolute;
  left: -5px;
  top: 7px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--clr-forest);
  border: 2px solid var(--clr-cream);
  box-shadow: 0 0 0 2px var(--clr-sage);
}
.tl-title {
  font-weight: 600;
  font-size: 0.875rem;
  color: var(--clr-ink);
  margin-bottom: 0.3rem;
  letter-spacing: 0.01em;
}
.tl-desc {
  font-size: 0.855rem;
  color: var(--clr-muted);
  line-height: 1.7;
  margin: 0;
}

/* ── Trust Reveal (teks membesar → jadi background) ── */
.trust-reveal {
  position: relative;
  background: var(--clr-warm);
  overflow: hidden;
}
.trust-reveal__pin {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 1.5rem;
  position: relative;
}
.trust-reveal__lead,
.trust-reveal__tail {
  position: relative;
  z-index: 2;
  font-size: 0.95rem;
  color: var(--clr-muted);
  letter-spacing: 0.01em;
  max-width: 380px;
  line-height: 1.6;
}
.trust-reveal__lead {
  margin: 0 0 2rem;
}
.trust-reveal__tail {
  margin: 2rem 0 0;
}
.trust-reveal__word {
  position: relative;
  z-index: 2;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  color: var(--clr-forest);
  line-height: 1;
  margin: 0;
  will-change: transform;
}
.trust-reveal__fill {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--clr-forest);
  transform: translate(-50%, -50%) scale(0);
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

/* Glow — dibuat via JS (about.js), diposisikan sama seperti .fill tapi
   di belakangnya (insertAdjacentElement "beforebegin"). Blur "dibakar"
   statis lewat CSS filter di sini (dihitung sekali oleh browser saat
   render, BUKAN dianimasikan tiap frame) — JS cuma toggle opacity/scale
   yang murah untuk compositor. Ini pengganti pendekatan lama yang
   nge-animasikan box-shadow blur besar langsung (mahal, di-repaint
   ulang tiap tick scroll). */
.trust-reveal__glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 106, 0.45) 0%,
    rgba(212, 175, 106, 0) 70%
  );
  filter: blur(20px);
  transform: translate(-50%, -50%) scale(0.6);
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

/* Fallback statis untuk mobile/tablet & prefers-reduced-motion — dikontrol lewat JS,
   ini cuma jaring pengaman kalau JS gagal load sama sekali */
@media (max-width: 1024px), (hover: none), (pointer: coarse) {
  .trust-reveal__pin {
    height: auto;
    padding: 5rem 1.5rem;
  }
  .trust-reveal__fill {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .trust-reveal__pin {
    height: auto;
    padding: 5rem 1.5rem;
  }
  .trust-reveal__fill {
    display: none;
  }
}

/* ── Visi & Misi ── */
.vm-section {
  background: var(--clr-forest);
  position: relative;
  overflow: hidden;
}
.vm-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 50% 70% at 95% 50%,
    rgba(181, 146, 76, 0.08) 0%,
    transparent 60%
  );
  pointer-events: none;
}
.vm-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Visi — kolom kiri */
.vm-visi {
  padding: 3.5rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.vm-visi__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold);
  margin-bottom: 2rem;
}
.vm-visi__text {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2vw, 1.75rem);
  font-weight: 400;
  font-style: italic;
  color: #fff;
  line-height: 1.45;
  flex: 1;
}
.vm-visi__text em {
  font-style: normal;
  color: var(--clr-gold);
}

/* Misi — kolom kanan */
.vm-misi {
  display: flex;
  flex-direction: column;
}
.vm-misi__label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--clr-gold);
  padding: 3.5rem 3.5rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.misi-list {
  flex: 1;
}
.misi-item {
  display: grid;
  grid-template-columns: 2.5rem 1fr;
  gap: 0 1.25rem;
  padding: 1.25rem 3.5rem 1.25rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items: baseline;
  transition: background 0.2s ease;
}
.misi-item:last-child {
  border-bottom: none;
}
.misi-item:hover {
  background: rgba(255, 255, 255, 0.03);
}
.misi-item__num {
  font-family: var(--font-display);
  font-size: 0.75rem;
  font-weight: 500;
  color: rgba(212, 175, 106, 0.5);
  letter-spacing: 0.05em;
  padding-top: 2px;
}
.misi-item__text {
  font-size: 0.855rem;
  color: rgba(255, 255, 255, 0.7);
  line-height: 1.7;
  margin: 0;
}

/* ── Sertifikasi ── */
.cert-section {
  background: var(--clr-cream);
}
.cert-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--clr-sand);
}
.cert-card {
  padding: 2rem 1.75rem;
  border-right: 1px solid var(--clr-sand);
  background: #fff;
  transition: background 0.2s ease;
}
.cert-card:last-child {
  border-right: none;
}
.cert-card:hover {
  background: var(--clr-cream);
}
.cert-card__name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--clr-ink);
  margin-bottom: 0.5rem;
  letter-spacing: 0.01em;
}
.cert-card__desc {
  font-size: 0.8rem;
  color: var(--clr-muted);
  line-height: 1.6;
  margin: 0;
}

/* ── Kontak CTA ── */
.contact-cta {
  background: var(--clr-cream);
  border-top: 1px solid var(--clr-sand);
}
.contact-cta__inner {
  padding: 6rem 0;
}
.contact-cta__heading {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, 3.5rem);
  font-weight: 400;
  color: var(--clr-forest);
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}
.contact-cta__heading em {
  font-style: italic;
  color: var(--clr-gold);
}
.contact-cta__sub {
  font-size: 0.9rem;
  color: var(--clr-muted);
  line-height: 1.75;
  max-width: 400px;
  margin-bottom: 0;
}
.contact-info-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2.5rem;
  border-top: 1px solid var(--clr-sand);
}
.contact-info-list li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 1rem 0;
  border-bottom: 1px solid var(--clr-sand);
}
.contact-info-list__lbl {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clr-gold);
}
.contact-info-list__val {
  font-size: 0.9rem;
  color: var(--clr-ink);
  text-decoration: none;
  transition: color 0.15s;
}
a.contact-info-list__val:hover {
  color: var(--clr-forest);
}

/* ── Keyframes ── */
@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scrollBounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 1;
  }
  60% {
    transform: translateY(8px);
    opacity: 0.3;
  }
}

/* ── Hero Gallery (placeholder) — DINONAKTIFKAN, digantikan video
   background. Disimpan sebagai referensi, tidak lagi dipakai di HTML. ──

.about-hero__gallery {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 42%;
  z-index: 1;
  overflow: hidden;
}
.about-hero__gallery-img {
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      135deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 2px,
      transparent 2px,
      transparent 14px
    ),
    linear-gradient(160deg, #2d5a45 0%, #1b4332 60%, #163a2b 100%);
}
.about-hero__gallery-fade {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    var(--clr-forest) 0%,
    rgba(27, 67, 50, 0.85) 12%,
    rgba(27, 67, 50, 0.3) 30%,
    transparent 55%
  );
}
.about-hero__gallery-label {
  position: absolute;
  bottom: 24px;
  right: 24px;
  font-size: 0.65rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  padding: 6px 12px;
  border-radius: 3px;
  pointer-events: none;
}
@media (max-width: 991.98px) {
  .about-hero__gallery {
    display: none;
  }
}
*/

/* ── Responsive ── */
@media (max-width: 991.98px) {
  .vm-inner {
    grid-template-columns: 1fr;
  }
  .vm-visi {
    border-right: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .misi-item {
    padding-left: 1.5rem;
  }
  .cert-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cert-card:nth-child(2) {
    border-right: none;
  }
  .cert-card:nth-child(1),
  .cert-card:nth-child(2) {
    border-bottom: 1px solid var(--clr-sand);
  }
  .about-hero__since {
    display: none;
  }
}
@media (max-width: 767.98px) {
  .intro-statement {
    padding: 2.25rem 1.75rem;
  }
  .intro-statement::after {
    top: 12px;
    left: 12px;
    right: -12px;
    bottom: -12px;
  }
  .intro-statement__quote {
    font-size: 1.25rem;
  }
  .timeline::before {
    left: 44px;
  }
  .tl-item {
    grid-template-columns: 44px 1fr;
  }
  .vm-visi {
    padding: 2rem;
  }
  .vm-misi__label {
    padding: 2rem 2rem 1rem;
  }
  .misi-item {
    padding: 1rem 1.5rem 1rem 1.5rem;
  }
  .cert-grid {
    grid-template-columns: 1fr;
  }
  .cert-card {
    border-right: none !important;
    border-bottom: 1px solid var(--clr-sand);
  }
  .cert-card:last-child {
    border-bottom: none;
  }
  .contact-cta__inner {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .contact-info-list li {
    padding: 1rem 0.25rem;
  }
  .d-flex.flex-column.flex-sm-row {
    align-items: stretch;
    max-width: 320px;
  }
  .d-flex.flex-column.flex-sm-row .btn-primary-aw,
  .d-flex.flex-column.flex-sm-row .btn-outline-aw {
    text-align: center;
    padding: 0.7rem 1.25rem;
    font-size: 0.85rem;
  }
  .about-hero {
    min-height: 100vh;
    align-items: flex-start;
  }
  .about-hero__content {
    /* Navbar fixed di atas tetap makan tempat berapa pun tingginya
       (var(--nav-height), ditambah safe-area notch/Dynamic Island) —
       konten hero WAJIB mulai di bawah itu + jarak napas, bukan dari
       32px flat kayak sebelumnya (itu yang bikin teks ketiban navbar). */
    padding: calc(var(--nav-height) + env(safe-area-inset-top, 0px) + 28px) 0
      60px;
  }
  .scroll-hint {
    display: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .about-hero__eyebrow,
  .about-hero__title,
  .about-hero__sub,
  .scroll-hint {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}
/* ═══════════════════════════════════════════════════
   HERO — MAX ANIMATION ENHANCEMENTS (desktop-priority)
   ═══════════════════════════════════════════════════ */

/* ── Split-text: tiap karakter judul jadi span sendiri ── */
.about-hero__title .hc-char {
  display: inline-block;
  will-change: transform, opacity;
}
.about-hero__title.hc-enhanced {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* ── Word-wrap guard — WAJIB ada, ini yang nyegah kata kepotong
     di tengah (mis. "Keluarga" jadi "Keluar"/"ga"). Tiap kata
     dibungkus .hc-word oleh JS; inline-block di sini bikin
     browser nganggep 1 kata = 1 kesatuan yang gak boleh dipecah
     antar baris, walau di dalamnya ada banyak .hc-char terpisah. ── */
.about-hero__title .hc-word {
  display: inline-block;
  white-space: nowrap;
}

/* ── Cursor spotlight — glow gold lembut ngikutin cursor ── */
.hero-spotlight {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(
    circle at var(--sx, 50%) var(--sy, 50%),
    rgba(212, 175, 106, 0.16) 0%,
    transparent 38%
  );
  mix-blend-mode: screen;
}

/* ── Floating particles ── */
.hero-particle {
  position: absolute;
  bottom: -20px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(212, 175, 106, 0.55) 0%,
    rgba(212, 175, 106, 0) 72%
  );
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
  animation: heroParticleFloat linear infinite;
}
@keyframes heroParticleFloat {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  12% {
    opacity: 1;
  }
  85% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-92vh) translateX(var(--drift, 20px));
    opacity: 0;
  }
}

.about-hero__bg,
.about-hero__grid,
.about-hero__since {
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

@media (prefers-reduced-motion: reduce), (hover: none), (pointer: coarse) {
  .hero-spotlight,
  .hero-particle {
    display: none;
  }
}

/* ═══════════════════════════════════════════════════
   NUMBERED SECTION LABELS — gaya editorial "01 — Judul"
   ═══════════════════════════════════════════════════ */
.section-eyebrow .eyebrow-num {
  color: var(--clr-gold);
  font-weight: 700;
  margin-right: 2px;
}