/* Omahtabing — Culture Central Java theme.
   Referensi: cream #F6F1E7, ink #2B2320, teal gunung #2E5E54/#4A8A7A,
   lake #7C9BAB, terracotta Go #D96248, sand #E9DCC2.
   Display: Fraunces (seperti kata "culture"), Body/UI: Plus Jakarta Sans. */
:root{
  --cream:#F6F1E7; --cream-soft:#FBF8F1; --ink:#2B2320; --ink-soft:#6B5F57;
  --teal-deep:#2E5E54; --teal-mid:#4A8A7A; --teal-soft:#9ABEB2;
  --lake:#7C9BAB; --lake-deep:#5E7F8E;
  --go:#D96248; --go-deep:#B94A34; --sand:#E9DCC2; --dot:#D93A2B;
  --navy:#2B2320; --electric:#D96248; --cyan:#2E5E54; --emerald:#4A8A7A;
}
html{ -webkit-font-smoothing:antialiased; }
body{
  text-rendering:optimizeLegibility;
  background:var(--cream);
  color:var(--ink);
  font-family:"Plus Jakarta Sans", Inter, system-ui, sans-serif;
}
::selection{ background:var(--go); color:#fff; }

/* Display serif ala referensi */
.font-display, h1.font-display, h2.font-display{
  font-family:"Fraunces", Georgia, serif !important;
  font-variation-settings:"opsz" 144, "SOFT" 50, "WONK" 1;
  letter-spacing:-0.015em;
}
.culture-word{
  font-family:"Fraunces", Georgia, serif;
  font-weight:900;
  font-variation-settings:"opsz" 144, "SOFT" 60, "WONK" 1;
  letter-spacing:-0.03em;
  line-height:.9;
  color:var(--ink);
}
.culture-sub{
  font-family:"Fraunces", Georgia, serif;
  font-weight:500;
  letter-spacing:.14em;
}

/* ---------- Navbar: cream transparan seperti referensi ---------- */
#site-header{ color:var(--ink); background:transparent; }
#site-header .nav-brand{ color:var(--ink); letter-spacing:.22em; }
#site-header .nav-link{
  color:rgba(43,35,32,.78); position:relative; font-weight:700; font-size:13px;
}
#site-header .nav-link::after{
  content:""; position:absolute; left:0; bottom:-6px; height:2px; width:0%;
  background:var(--go); border-radius:99px; transition:width .3s ease;
}
#site-header .nav-link:hover::after{ width:100%; }
#site-header .nav-link:hover{ color:var(--ink); }
#site-header.scrolled{
  color:var(--ink);
  background:rgba(246,241,231,.86);
  -webkit-backdrop-filter:blur(16px); backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(43,35,32,.1);
  box-shadow:0 8px 30px -18px rgba(43,35,32,.35);
}
#site-header .nav-burger{ color:var(--ink); border-color:rgba(43,35,32,.18); background:rgba(255,255,255,.4); }
.btn-go{
  background:var(--go); color:#fff;
  box-shadow:0 12px 26px -12px rgba(217,98,72,.7);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.btn-go:hover{ background:var(--go-deep); transform:translateY(-1px); box-shadow:0 16px 30px -12px rgba(185,74,52,.7); }

/* focus */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible, input:focus-visible, select:focus-visible{
  outline:2px solid var(--teal-deep); outline-offset:3px; border-radius:8px;
}

/* ---------- Hero: background foto 3.png + overlay cream agar teks tetap terbaca ---------- */
.hero-bg{
  background:
    linear-gradient(180deg, rgba(251,248,241,.94) 0%, rgba(246,241,231,.82) 36%, rgba(246,241,231,.45) 60%, rgba(46,94,84,.28) 82%, rgba(33,27,24,.32) 100%),
    url('../images/background/3.webp') center 32%/cover no-repeat,
    linear-gradient(180deg, #FBF8F1 0%, #F6F1E7 46%, #EFE6D3 78%, #D9CFAF 100%);
  color:var(--ink);
}
.hero-mountains{ display:none; }
/* jembatan visual hero → ecosystem: foto melebur ke cream */
.hero-fade{ height:40px; margin-top:-8px;
  background:linear-gradient(180deg, rgba(246,241,231,0) 0%, rgba(246,241,231,.75) 100%); }
.hero-scroll{ transition:border-color .25s ease, transform .25s ease; }
.hero-scroll:hover{ transform:translateY(2px); }

/* ---------- Background landscape untuk semua section ---------- */
.sec-bg{ position:absolute; inset:0; height:100%; width:100%; object-fit:cover; pointer-events:none; }
.sec-bg-light{ opacity:.55; }
.sec-bg-dark{ opacity:.5; }
.sec-veil-light{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(246,241,231,.72), rgba(246,241,231,.42) 45%, rgba(246,241,231,.68)); }
.sec-veil-dark{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(33,27,24,.68), rgba(33,27,24,.45) 50%, rgba(33,27,24,.72)); }
.hero-grain::after{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:.5; mix-blend-mode:multiply;
  background-image:radial-gradient(rgba(43,35,32,.06) 1px, transparent 1px);
  background-size:5px 5px;
  mask-image:linear-gradient(180deg, transparent 55%, black 100%);
}
.grid-overlay{ display:none; }

/* bingkai arch ilustrasi kiri */
.arch-frame{
  border-radius:999px 999px 28px 28px;
  border:1px solid rgba(43,35,32,.14);
  background:linear-gradient(180deg, #FDFBF6, #F1E8D3);
  box-shadow:0 30px 60px -30px rgba(46,94,84,.45), inset 0 0 0 8px rgba(255,255,255,.5);
  overflow:hidden;
}
.batik-strip{
  background-image:
    radial-gradient(circle at 8px 8px, rgba(46,94,84,.22) 2.2px, transparent 2.6px),
    radial-gradient(circle at 20px 20px, rgba(217,98,72,.18) 2px, transparent 2.4px);
  background-size:28px 28px, 28px 28px;
}
/* karakter asli hero */
.hero-character{
  filter:drop-shadow(0 30px 34px rgba(33,27,24,.35));
  animation:charFloat 7s ease-in-out infinite;
}
/* figur karakter di semua section */
.char-float{ animation:charFloat 7s ease-in-out infinite; }
.char-float, .hero-character{ filter:drop-shadow(0 18px 22px rgba(33,27,24,.28)); }
.hero-character{ filter:drop-shadow(0 30px 34px rgba(33,27,24,.35)); }
@keyframes charFloat{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }

/* ---------- Journey form card (tiruan persis referensi) ---------- */
.journey-card{
  background:linear-gradient(160deg, rgba(38,52,48,.82), rgba(46,68,63,.72));
  -webkit-backdrop-filter:blur(18px); backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);
  border-radius:20px;
  box-shadow:0 30px 60px -25px rgba(33,27,24,.55);
  color:#fff;
}
.journey-label{
  font-size:11.5px; font-weight:500; letter-spacing:.02em; color:rgba(255,255,255,.72);
  display:flex; align-items:center; gap:6px;
}
.req-dot{
  width:7px; height:7px; border-radius:99px; background:var(--dot);
  display:inline-block; box-shadow:0 0 0 3px rgba(217,58,43,.22);
  flex:none;
}
.journey-input, .journey-select{
  width:100%; background:transparent; border:0; border-bottom:1.5px solid rgba(255,255,255,.55);
  color:#fff; font-weight:700; font-size:16.5px; padding:6px 22px 8px 0;
  outline:none; border-radius:0; appearance:none;
}
.journey-select option{ color:#2B2320; font-weight:600; }
.journey-input::placeholder{ color:rgba(255,255,255,.55); font-weight:600; }
.journey-input:focus, .journey-select:focus{ border-bottom-color:#fff; outline:none; box-shadow:0 1px 0 #fff; }
.journey-field{ position:relative; }
.journey-field .pin{
  position:absolute; right:2px; top:50%; transform:translateY(-30%);
  width:14px; height:14px; opacity:.85; pointer-events:none;
}
.journey-go{
  background:var(--go); color:#fff; font-weight:800; letter-spacing:.02em;
  border-radius:10px; padding:9px 30px; font-size:17px; line-height:1;
  box-shadow:0 14px 26px -12px rgba(217,98,72,.8);
  transition:transform .2s ease, background .2s ease, box-shadow .2s ease;
}
.journey-go:hover{ background:var(--go-deep); transform:translateY(-1px); }
.journey-go:active{ transform:translateY(0) scale(.98); }

/* mini trust row ala referensi (pill + ikon beige) */
.trust-pill{
  border:1.2px solid rgba(43,35,32,.35); border-radius:999px;
  font-size:11px; letter-spacing:.12em; color:rgba(43,35,32,.7);
  padding:6px 22px; background:rgba(255,255,255,.35);
}
.trust-icon{
  width:30px; height:30px; border-radius:999px; display:grid; place-items:center;
  background:var(--sand); color:var(--ink); border:1px solid rgba(43,35,32,.12);
}

/* ---------- Section umum: paksa terang cream ---------- */
section.bg-navy, footer.bg-navy-900{ filter:none; }
/* Samakan section gelap lama jadi ink hangat + tekstur */
section.bg-navy{
  background:linear-gradient(180deg, #2B2320, #3A312B) !important;
  color:#F6F1E7 !important;
}
/* Journey (#impact) transparan — tanpa warna background, 7.png stacked di bawah menyatu */
#impact{ background:transparent; color:#2B2320; }
/* Kartu: krem lembut, border coklat tipis */
.card-lift{ transition:transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease, border-color .4s ease; }
.card-lift:hover{ transform:translateY(-6px); }

/* ---------- Triangle (diwarnai ulang ke teal/terracotta) ---------- */
.tri-wrap{ background:rgba(255,255,255,.55) !important; border-color:rgba(43,35,32,.14) !important; }
.tri-edge{ stroke-dasharray:600; stroke-dashoffset:600; animation:draw 1.6s ease forwards; }
.tri-spoke{ stroke-dasharray:320; stroke-dashoffset:320; animation:draw 1.2s ease forwards; }
.tri-edge.e1{ animation-delay:.5s } .tri-edge.e2{ animation-delay:.8s } .tri-edge.e3{ animation-delay:1.1s }
.tri-spoke.s1{ animation-delay:1s } .tri-spoke.s2{ animation-delay:1.25s } .tri-spoke.s3{ animation-delay:1.5s }
@keyframes draw{ to{ stroke-dashoffset:0 } }
.tri-node-outer{ opacity:0; transform-box:fill-box; transform-origin:center; animation:pop .7s cubic-bezier(.2,.9,.3,1.2) forwards; }
.tri-node-outer.n1{ animation-delay:1.5s } .tri-node-outer.n2{ animation-delay:1.8s } .tri-node-outer.n3{ animation-delay:2.1s }
@keyframes pop{ from{ opacity:0; transform:scale(.4) } to{ opacity:1; transform:scale(1) } }
.tri-center{ opacity:0; animation:centerIn .9s ease forwards; animation-delay:2.5s; }
@keyframes centerIn{ from{ opacity:0; transform:scale(.85) } to{ opacity:1; transform:scale(1) } }
.pulse-ring{ transform-box:fill-box; transform-origin:center; animation:pulse 2.8s ease-in-out infinite; animation-delay:3s; }
@keyframes pulse{ 0%,100%{ transform:scale(1); opacity:.55 } 50%{ transform:scale(1.12); opacity:.15 } }
.particle{ animation:float 6s ease-in-out infinite; }
.particle.p2{ animation-delay:-2s } .particle.p3{ animation-delay:-4s } .particle.p4{ animation-delay:-1s }
@keyframes float{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(-12px); opacity:1 } }
.tri-node{ cursor:pointer; transition:filter .3s ease; }
.tri-node .node-circle{ transition:all .35s ease; }
.tri-node:hover .node-circle, .tri-node:focus-visible .node-circle, .tri-node.active .node-circle{
  filter:drop-shadow(0 0 14px rgba(217,98,72,.8));
}
.tri-node:hover .halo, .tri-node.active .halo{ opacity:.9 !important; }
.tri-spoke{ transition:stroke .3s ease, stroke-width .3s ease, filter .3s ease; }
.tri-wrap[data-active="technology"] .spoke-tech,
.tri-wrap[data-active="industry"] .spoke-ind,
.tri-wrap[data-active="economy"] .spoke-eco{ stroke:#D96248; stroke-width:2.5; filter:drop-shadow(0 0 6px rgba(217,98,72,.9)); }
#tri-tip{ transition:opacity .3s ease, transform .3s ease; }

/* ---------- Reveal on scroll ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.reveal.visible{ opacity:1; transform:none; }
.reveal-d1{ transition-delay:.1s } .reveal-d2{ transition-delay:.2s } .reveal-d3{ transition-delay:.3s }

/* ---------- Journey horizontal (ke samping) di atas 7.png ---------- */
.journey-h-line{
  position:absolute; left:0; right:0; top:30px; height:2px; border-radius:99px;
  background:linear-gradient(90deg, var(--teal-deep), var(--teal-mid) 45%, var(--go) 100%);
  opacity:.35;
}
.journey-h-item{ position:relative; }
.journey-h-dot{
  position:relative; z-index:1;
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg, #2E5E54, #22332F);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:0 0 0 6px rgba(246,241,231,.9), 0 14px 30px -14px rgba(43,35,32,.5);
  margin-bottom:14px;
}
.journey-h-dot-dest{ background:linear-gradient(135deg, #D96248, #B94A34);
  box-shadow:0 0 0 6px rgba(217,98,72,.18), 0 0 26px rgba(217,98,72,.45); }
.journey-h-card{
  background:rgba(255,255,255,.82);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(43,35,32,.12);
  border-radius:18px; padding:18px;
  box-shadow:0 24px 50px -30px rgba(43,35,32,.45);
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
  min-height:148px;
}
.journey-h-item:hover .journey-h-card{ border-color:rgba(217,98,72,.55); transform:translateY(-4px); }
.journey-h-dest{ border-color:rgba(217,98,72,.55); background:rgba(255,244,235,.9); }
.journey-h-arrow{ color:var(--go); font-weight:800; }
.journey-h-arrow-dest{ color:var(--go); font-weight:800; }
.journey-side{ scrollbar-width:thin; scrollbar-color:rgba(46,94,84,.4) transparent; }
.journey-side::-webkit-scrollbar{ height:6px; }
.journey-side::-webkit-scrollbar-thumb{ background:rgba(46,94,84,.35); border-radius:99px; }
@media (max-width:1023px){
  .journey-h-line{ left:24px; right:24px; }
}

/* ---------- Journey lama (vertikal, tidak dipakai lagi) ---------- */
.journey-glass{
  background:rgba(34,51,47,.78);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 24px 50px -30px rgba(0,0,0,.7);
  transition:border-color .3s ease, transform .3s ease;
}
.journey-stop:hover .journey-glass{ border-color:rgba(217,98,72,.55); transform:translateY(-3px); }
.journey-dot{
  position:relative; z-index:1; margin-inline:auto;
  width:56px; height:56px; border-radius:18px; display:grid; place-items:center;
  color:#fff; background:linear-gradient(135deg, #2E5E54, #22332F);
  border:1px solid rgba(255,255,255,.25);
  box-shadow:0 0 0 6px rgba(34,51,47,.55), 0 14px 30px -12px rgba(0,0,0,.7);
}
.journey-glass.journey-dest{ border-color:rgba(217,98,72,.6); background:rgba(60,36,30,.82); }
.journey-dot-dest{ background:linear-gradient(135deg, #D96248, #B94A34);
  box-shadow:0 0 0 6px rgba(217,98,72,.22), 0 0 26px rgba(217,98,72,.55); }
.flow-line{ position:relative; }
.flow-line::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:2px; transform:translateX(-50%);
  background:rgba(43,35,32,.12);
}
.flow-progress{
  position:absolute; left:50%; top:0; width:2px; transform:translateX(-50%);
  background:linear-gradient(180deg,var(--go),var(--teal-mid),var(--teal-deep));
  height:0%; transition:height .2s linear; box-shadow:0 0 16px rgba(46,94,84,.6);
}
.hflow-track{ background:rgba(43,35,32,.1); }
.hflow-fill{ width:0%; transition:width 1.6s cubic-bezier(.2,.7,.3,1); background:linear-gradient(90deg,var(--go),var(--teal-mid),var(--teal-deep)); }
.inview .hflow-fill{ width:100%; }
@media (max-width:767px){
  .flow-line::before, .flow-progress{ left:28px; }
}

/* Footer gelap hangat */
footer{ background:#211B18 !important; }

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
  html{ scroll-behavior:auto; }
  .reveal{ opacity:1; transform:none; }
  .tri-edge, .tri-spoke{ stroke-dashoffset:0; animation:none; }
  .tri-node-outer, .tri-center{ opacity:1; animation:none; }
  .pulse-ring, .particle{ animation:none; }
}