/* Angkatan Ekspor, arah A: Dermaga Malam. Token sesuai DESIGN.md bagian 10. */

:root {
  --ink: #101010;
  --ink-2: #1A1A1A;
  --line-dark: #2A2A2A;
  --gold: #B48F44;
  --gold-soft: #D8C08A;
  --gold-deep: #7E6230;
  --paper: #FFFFFF;
  --paper-2: #F6F4EF;
  --line-light: #E6E1D6;
  --muted-dark: #B3B3B3;
  --muted-light: #5C5C5C;

  --font: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-accent: "Newsreader", Georgia, "Times New Roman", serif;
  --radius-sm: 4px;
  --radius-md: 6px;
  --space-1: 8px;  --space-2: 16px; --space-3: 24px; --space-4: 32px;
  --space-6: 48px; --space-8: 64px; --space-12: 96px; --space-14: 112px;
  --container: 1120px;
  --measure: 64ch;

}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

h1, h2, h3 { margin: 0; }
p { margin: 0 0 var(--space-2); }
p:last-child { margin-bottom: 0; }

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--gold); color: var(--ink); padding: 12px 16px; z-index: 100;
}
.skip-link:focus { left: 16px; top: 16px; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.measure { max-width: var(--measure); }

/* ---------- Tema bagian ---------- */

.section { padding: var(--space-8) 0; position: relative; }

.theme-dark { background: var(--ink); color: var(--paper); }
.theme-light { background: var(--paper); color: var(--ink); }

.theme-dark .muted { color: var(--muted-dark); }
.theme-light .muted { color: var(--muted-light); }

.eyebrow {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.2;
  margin-bottom: var(--space-2);
}
.theme-dark .eyebrow { color: var(--gold); }
.theme-light .eyebrow { color: var(--gold-deep); }

h1 {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

h2 {
  font-size: 26px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-3);
  max-width: 24ch;
}

h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin-bottom: var(--space-1);
}

.accent {
  font-family: var(--font-accent);
  font-style: italic;
  font-weight: 500;
  letter-spacing: 0;
}
.theme-dark .accent { color: var(--gold-soft); }
.theme-light .accent { color: var(--gold-deep); }

.small { font-size: 14px; line-height: 1.5; }

/* ---------- Header ---------- */

.site-header {
  background: var(--ink);
  border-bottom: 1px solid var(--line-dark);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand img { height: 28px; width: auto; mix-blend-mode: lighten; }
.brand span { font-weight: 600; font-size: 15px; letter-spacing: 0.02em; }
.brand .brand-name { line-height: 1.25; }
.brand .brand-by { display: block; font-size: 12px; font-weight: 400; letter-spacing: 0.02em; color: var(--muted-dark); }

.capsule {
  display: inline-block;
  border: 1px solid var(--gold);
  color: var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1.4;
}

/* ---------- Tombol ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px;
  padding: 0 24px;
  border-radius: var(--radius-md);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 150ms ease, color 150ms ease, border-color 150ms ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }

.btn-primary {
  background: var(--gold);
  color: var(--ink);
  width: 100%;
}
.btn-primary:hover { background: #C29D55; }

.btn-secondary {
  border: 1px solid currentColor;
  min-height: 48px;
  padding: 0 18px;
  font-size: 15px;
}
.theme-dark .btn-secondary { color: var(--gold); }
.theme-light .btn-secondary { color: var(--gold-deep); }
.btn-secondary:hover { background: rgba(180, 143, 68, 0.1); }

.btn:focus-visible, a:focus-visible, summary:focus-visible, button:focus-visible {
  outline: 2px solid var(--gold-soft);
  outline-offset: 2px;
}
.theme-light .btn:focus-visible,
.theme-light a:focus-visible,
.theme-light summary:focus-visible,
.theme-light button:focus-visible { outline-color: var(--ink); }

.cta-note { margin-top: var(--space-2); }

/* ---------- Kotak tempat foto (sementara) ---------- */

.photo-slot {
  position: relative;
  width: 100%;
  border: 1.5px dashed var(--gold);
  border-radius: var(--radius-sm);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--space-3);
  gap: 6px;
  background:
    repeating-linear-gradient(135deg, transparent 0 14px, rgba(180, 143, 68, 0.06) 14px 15px);
}
.theme-dark .photo-slot { background-color: var(--ink-2); color: var(--muted-dark); }
.theme-light .photo-slot { background-color: var(--paper-2); color: var(--muted-light); border-color: var(--gold-deep); }

.photo-slot strong {
  font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700;
}
.theme-dark .photo-slot strong { color: var(--gold); }
.theme-light .photo-slot strong { color: var(--gold-deep); }
.photo-slot span { font-size: 13px; line-height: 1.45; max-width: 30ch; }

.ratio-4-5 { aspect-ratio: 4 / 5; }
.ratio-16-9 { aspect-ratio: 16 / 9; }
.ratio-4-3 { aspect-ratio: 4 / 3; }

figure { margin: 0; }
figcaption { margin-top: var(--space-1); }

/* ---------- 1. Pembuka ---------- */

.hero { padding-top: var(--space-6); overflow: hidden; }
.hero-route {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  opacity: 0.35;
  pointer-events: none;
}
.hero .container { position: relative; }
.hero-grid { display: grid; gap: 0; }
.hero-photo { margin: 0 0 var(--space-4); }
.hero-photo .photo-slot { aspect-ratio: 4 / 3; }
.cred-list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: 6px; }
.cred-list li { position: relative; padding-left: 18px; font-size: 15px; line-height: 1.5; color: var(--gold-soft); }
.cred-list li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.hero h1 { margin-bottom: var(--space-3); max-width: 20ch; }
.hero .lead { color: var(--muted-dark); margin-bottom: var(--space-4); max-width: 46ch; }
.hero .eyebrow { margin-bottom: var(--space-3); }

/* ---------- 2. Angka bukti ---------- */

.proof-numbers { padding-top: var(--space-4); }
.stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: 0 0 var(--space-3);
  padding: 0;
  list-style: none;
}
.stat { background: var(--ink-2); padding: var(--space-3) var(--space-2); }
.stat-value {
  display: block;
  color: var(--gold);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  margin-bottom: var(--space-1);
  letter-spacing: -0.02em;
}
.stat-value.is-text { font-size: 26px; line-height: 1.1; }
.stat-label { display: block; font-size: 14px; line-height: 1.45; color: var(--paper); }
.stat-label .muted { display: block; margin-top: 4px; }

/* ---------- 3. Timeline ---------- */

.timeline {
  list-style: none;
  margin: var(--space-6) 0;
  padding: 0;
  position: relative;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 7px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--gold);
}
.timeline li {
  position: relative;
  padding-left: 40px;
  padding-bottom: var(--space-4);
}
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid var(--gold);
  box-shadow: 0 0 0 4px var(--paper);
}
.timeline li.is-fail::before { background: var(--paper); }
.timeline time, .timeline .when {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 4px;
}
.timeline p { margin: 0; }

.legend {
  display: flex; flex-wrap: wrap; gap: var(--space-3);
  font-size: 14px; color: var(--muted-light);
  margin-top: var(--space-2);
}
.legend span { display: inline-flex; align-items: center; gap: 8px; }
.legend i {
  width: 12px; height: 12px; border-radius: 50%;
  border: 2px solid var(--gold); display: inline-block;
}
.legend i.full { background: var(--gold); }
.timeline-wrap .legend { margin: var(--space-6) 0 var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--line-light); }
.timeline-wrap .timeline { margin-top: var(--space-3); }

.callout {
  border-left: 2px solid var(--gold);
  padding: var(--space-2) var(--space-3);
  background: var(--paper-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-bottom: var(--space-4);
}
.callout h3 { font-size: 17px; }

/* ---------- 4. Bukti ---------- */

.proof-list {
  list-style: none; margin: var(--space-6) 0 0; padding: 0;
  display: grid; gap: var(--space-3);
}
.proof-item {
  background: var(--ink-2);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}
.proof-item h3 { font-size: 18px; }
.proof-item p { color: var(--muted-dark); }
.proof-item .btn { margin-top: var(--space-2); }
.proof-item figure { margin-top: var(--space-3); }
.proof-tag {
  display: inline-block;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: var(--space-1);
}
.proof-foot { margin-top: var(--space-3); }
.award {
  margin-top: var(--space-6);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line-dark);
  color: var(--muted-dark);
  display: flex; gap: 12px; align-items: flex-start;
}
.award svg { flex: none; width: 22px; height: 22px; margin-top: 3px; color: var(--gold); }

/* ---------- 5 dan 6. Navigator, untuk siapa ---------- */

.compass { width: 56px; height: 56px; color: var(--gold-deep); margin-bottom: var(--space-3); }
.theme-dark .compass { color: var(--gold); }

.fit-grid { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.fit-card {
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  background: var(--paper);
}
.fit-card.is-yes { border-top: 3px solid var(--gold); }
.fit-card.is-no { background: var(--paper-2); }
.fit-card ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; }
.fit-card li { position: relative; padding-left: 28px; margin-bottom: 12px; }
.fit-card li:last-child { margin-bottom: 0; }
.fit-card li svg { position: absolute; left: 0; top: 5px; width: 16px; height: 16px; }
.fit-card.is-yes li svg { color: var(--gold-deep); }
.fit-card.is-no li svg { color: var(--muted-light); }

.divider { height: 1px; background: var(--line-light); margin: var(--space-8) 0; border: 0; }

/* ---------- 7. Yang didapat ---------- */

.offer-list {
  list-style: none; margin: var(--space-4) 0; padding: 0;
  border-top: 1px solid var(--line-dark);
}
.offer-list li {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: var(--space-2);
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--line-dark);
}
.offer-num { color: var(--gold); font-weight: 600; font-size: 14px; letter-spacing: 0.08em; padding-top: 2px; }

/* ---------- 8. Yang tidak dijanjikan ---------- */

.promise-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.promise-list li {
  background: var(--paper-2);
  border-radius: var(--radius-sm);
  padding: var(--space-2) var(--space-3);
  position: relative;
  padding-left: 52px;
}
.promise-list li svg { position: absolute; left: 20px; top: 21px; width: 16px; height: 16px; color: var(--gold-deep); }

/* ---------- 10. Batch 1 ---------- */

.batch { text-align: left; }
.batch-box {
  border: 1px solid var(--line-dark);
  border-radius: var(--radius-md);
  padding: var(--space-6) var(--space-3);
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
}
.batch-box .capsule { margin-bottom: var(--space-3); }
.batch-box p { color: var(--muted-dark); max-width: 52ch; }
.batch-box .btn { margin-top: var(--space-3); }

.steps { list-style: none; padding: 0; margin: var(--space-4) 0 0; counter-reset: step; display: grid; gap: 12px; }
.steps li { counter-increment: step; position: relative; padding-left: 40px; color: var(--muted-dark); font-size: 15px; line-height: 1.55; }
.steps li::before {
  content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--gold); color: var(--gold);
  font-size: 13px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}

/* ---------- 11. FAQ ---------- */

.faq { margin-top: var(--space-4); border-top: 1px solid var(--line-light); }
.faq details { border-bottom: 1px solid var(--line-light); }
.faq summary {
  list-style: none;
  cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  min-height: 56px;
  padding: var(--space-2) 0;
  font-weight: 600;
  font-size: 17px;
  line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  flex: none;
  color: var(--gold-deep);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  width: 24px; text-align: center;
}
.faq details[open] summary::after { content: "\2212"; }
.faq .answer { padding: 0 0 var(--space-3); color: var(--muted-light); max-width: var(--measure); }
.faq .answer strong { color: var(--ink); font-weight: 600; }

/* ---------- 12. Bagian bawah ---------- */

.site-footer { padding: var(--space-8) 0 var(--space-6); border-top: 1px solid var(--line-dark); }
.site-footer .brand { margin-bottom: var(--space-3); }
.footer-links { list-style: none; margin: var(--space-4) 0; padding: 0; display: grid; gap: 4px; }
.footer-links a, .footer-links span.link-like {
  display: inline-flex; align-items: center; min-height: 44px;
  text-decoration: none; color: var(--paper);
}
.footer-links a:hover { color: var(--gold-soft); }
.footer-links .label { color: var(--muted-dark); width: 124px; flex: none; font-size: 14px; }
.footer-links li { display: flex; align-items: center; }
.copyright { color: var(--muted-dark); font-size: 14px; border-top: 1px solid var(--line-dark); padding-top: var(--space-3); }

/* ---------- Komponen draf 2 (16 bagian copy-draf-v2) ---------- */

.closing-line { font-weight: 600; font-size: 19px; line-height: 1.5; margin-top: var(--space-4); }

/* Kartu bernomor (bagian 3 dan 8) */
.card-grid { list-style: none; margin: var(--space-6) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.card { border-radius: var(--radius-md); padding: var(--space-3); }
.theme-dark .card { background: var(--ink-2); border: 1px solid var(--line-dark); }
.theme-dark .card p { color: var(--muted-dark); }
.theme-light .card { background: var(--paper-2); border: 1px solid var(--line-light); }
.theme-light .card p { color: var(--muted-light); }
.card h3 { font-size: 18px; margin-bottom: var(--space-1); }
.card-num { display: block; font-size: 14px; font-weight: 600; letter-spacing: 0.08em; margin-bottom: var(--space-2); }
.theme-dark .card-num { color: var(--gold); }
.theme-light .card-num { color: var(--gold-deep); }
.cols-stuck .card-num {
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--gold-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; letter-spacing: 0;
}

/* Daftar berikon kecil (bagian 3, 9, 10) */
.facts { margin-top: var(--space-6); }
.facts h3 { font-size: 18px; margin-bottom: var(--space-2); }
.icon-list { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: 12px; }
.icon-list li { position: relative; padding-left: 30px; }
.icon-list li svg { position: absolute; left: 0; top: 6px; width: 16px; height: 16px; }
.theme-dark .icon-list li svg { color: var(--gold); }
.theme-light .icon-list li svg { color: var(--gold-deep); }
.icon-list-lg { margin-top: var(--space-4); gap: var(--space-3); }
.icon-list-lg li { padding-left: 40px; }
.icon-list-lg li svg { width: 24px; height: 24px; top: 2px; }

/* Kotak sorotan buat yang masih kantoran (bagian 4) */
.highlight {
  margin: var(--space-6) 0 var(--space-4);
  padding: var(--space-3);
  background: rgba(180, 143, 68, 0.12);
  border-left: 2px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
}

/* Kartu angka dua kolom (bagian 5) */
.stats-2 { margin-top: var(--space-2); margin-bottom: var(--space-4); }

/* Peta 7 titik (bagian 7) */
.route-map { margin: var(--space-6) 0 var(--space-3); }
.route-svg { display: block; width: 100%; height: auto; overflow: visible; }
.route-wide { display: none; }
.route-tall { max-width: 270px; margin: 0 auto; }
.route-dot circle { fill: var(--ink); stroke: var(--gold); stroke-width: 1.4; }
.route-dot text {
  fill: var(--gold); font-family: var(--font); font-size: 15px; font-weight: 600;
  text-anchor: middle; dominant-baseline: central;
}
.route-label {
  margin: 0;
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-soft); text-align: center; line-height: 1.4;
}
.route-start { margin-bottom: var(--space-1); }
.route-end { margin-top: var(--space-1); }
.route-note { color: var(--muted-dark); }

/* Blok lipat sistem operasional (bagian 10) */
.theme-light .offer-list { border-top-color: var(--line-light); }
.theme-light .offer-list li { border-bottom-color: var(--line-light); }
.theme-light .offer-num { color: var(--gold-deep); }
.fold {
  margin-top: var(--space-3);
  border: 1px solid var(--line-light);
  border-radius: var(--radius-md);
  background: var(--paper-2);
}
.fold summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: var(--space-2);
  min-height: 56px; padding: var(--space-2) var(--space-3);
  font-weight: 600; line-height: 1.4;
}
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after {
  content: "+"; flex: none; color: var(--gold-deep);
  font-size: 26px; font-weight: 400; line-height: 1; width: 24px; text-align: center;
}
.fold[open] summary::after { content: "\2212"; }
.fold-body { padding: 0 var(--space-3) var(--space-3); color: var(--muted-light); }
.fold-body .icon-list { margin-bottom: var(--space-2); }

/* Kotak TOLONG DIBACA (bagian 12) */
.warning-box {
  margin: var(--space-6) 0 var(--space-3);
  border: 1.5px solid var(--gold);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

/* Bagian 13 nyambung ke 12 (sama-sama terang) */
.section-joined { padding-top: 0; }
.divider-top { margin: 0 0 var(--space-8); }

/* Alur daftar, garis titik-titik emas vertikal (bagian 14) */
.batch-push { color: var(--paper) !important; font-weight: 600; }
.steps-title { margin-top: var(--space-6); font-size: 18px; }
.steps-route { position: relative; gap: var(--space-3); margin-bottom: var(--space-2); }
.steps-route li:not(:last-child)::after {
  content: "";
  position: absolute; left: 12px; top: 30px; bottom: -20px; width: 3px;
  background-image: radial-gradient(circle, var(--gold) 1.1px, transparent 1.6px);
  background-size: 3px 12px;
  background-repeat: repeat-y;
}
.steps-route li { padding-left: 44px; }
.steps-route li::before { background: var(--ink-2); z-index: 1; }

/* ---------- Revisi 3: foto bukti di samping klaim ---------- */

.tl-photo { margin: var(--space-3) 0 0; }
.tl-photo img, .wide-photo img { width: 100%; height: auto; border-radius: var(--radius-sm); }
.tl-photo figcaption { margin-top: var(--space-1); }
.tl-photo .tag-ok { margin: 6px 0 0; }
.tl-gallery { margin-top: var(--space-4); }
.tl-gallery-title { font-weight: 600; margin: 0; line-height: 1.45; }
.tl-gallery .tl-photo { margin-top: var(--space-2); }
.tl-gallery .tl-photo + .tl-photo { margin-top: var(--space-3); }

.wide-photo { margin: var(--space-4) 0 0; max-width: var(--measure); }
.wide-photo figcaption { margin-top: var(--space-2); }
.theme-light .wide-photo figcaption { color: var(--ink); }
.wide-photo + .measure .highlight { margin-top: var(--space-4); }

.testi-grid { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); }

.pair-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); }
.pair-grid .photo-slot { padding: var(--space-2); }
.pair-grid .photo-slot span { font-size: 12px; }

/* ---------- Tombol melayang di HP ---------- */

.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 50;
  background: var(--ink);
  border-top: 1px solid var(--line-dark);
  padding: 10px 20px calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform 200ms ease;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn { min-height: 48px; }

/* ---------- Gerak muncul saat digulir ---------- */

.js .reveal { opacity: 0; transform: translateY(8px); transition: opacity 250ms ease, transform 250ms ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .sticky-cta, .btn { transition: none; }
}

/* ---------- Layar lebar ---------- */

@media (min-width: 768px) {
  .container { padding: 0 32px; }
  .btn-primary { width: auto; min-width: 280px; }
  .brand .brand-by { display: inline; font-size: 15px; margin-left: 4px; }
  .stats { grid-template-columns: repeat(4, 1fr); }
  .proof-list { grid-template-columns: repeat(2, 1fr); }
  .proof-item.is-wide { grid-column: 1 / -1; }
  .fit-grid { grid-template-columns: 1fr 1fr; }
  .batch-box { padding: var(--space-8) var(--space-6); }
  .stats.stats-2 { grid-template-columns: 1fr 1fr; max-width: 640px; }
  .cols-3 { grid-template-columns: repeat(3, 1fr); }
  .cols-stuck { grid-template-columns: repeat(2, 1fr); }
  .route-wide { display: block; }
  .testi-grid { grid-template-columns: repeat(3, 1fr); }
  .route-tall { display: none; }
  .route-map { display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--space-2); }
  .route-start { order: 0; margin: 0 0 8px; text-align: left; }
  .route-wide { order: 1; }
  .route-end { order: 2; align-self: start; margin: 0; text-align: left; max-width: 12ch; }
}

@media (min-width: 1024px) {
  body { font-size: 18px; }
  .section { padding: var(--space-14) 0; }
  h1 { font-size: 52px; }
  h2 { font-size: 38px; }
  h3 { font-size: 24px; }
  .stat-value { font-size: 56px; }
  .stat-value.is-text { font-size: 32px; }
  .stat { padding: var(--space-4) var(--space-3); }
  .hero { padding-top: var(--space-12); padding-bottom: var(--space-8); }
  .hero-grid { grid-template-columns: 1.15fr 0.85fr; column-gap: var(--space-12); align-items: start; }
  .hero-grid > * { grid-column: 1; }
  .hero-grid > .hero-photo { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; }
  .hero-photo .photo-slot { aspect-ratio: 4 / 5; }
  .proof-numbers { padding-top: var(--space-4); }
  .journey-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: var(--space-12); align-items: start; }
  .journey-grid .timeline { margin-top: 0; }
  .timeline-wrap .legend { margin-top: 0; }
  .journey-intro { position: sticky; top: var(--space-6); }
  .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-12); }
  .cols-stuck { grid-template-columns: repeat(3, 1fr); }
  .highlight { font-size: 24px; padding: var(--space-4); }
  .wide-photo { max-width: 520px; }
  .pair-grid { max-width: 640px; gap: var(--space-3); }
  .closing-line { font-size: 21px; }
  .sticky-cta { display: none; }
}

/* ---------- Pembantu ---------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.mt-3 { margin-top: var(--space-3); }
.mt-6 { margin-top: var(--space-6); }

dialog#zoom {
  border: 0; padding: 0; background: transparent; max-width: 92vw; max-height: 92vh;
}
dialog#zoom::backdrop { background: rgba(16, 16, 16, 0.88); }
dialog#zoom img { max-width: 92vw; max-height: 92vh; border-radius: var(--radius-sm); }

/* =========================================================
   PENYEMPURNAAN 2 Okt 2026. Tetap arah A (Dermaga Malam).
   Inspirasi: Refero (tipografi editorial, garis tipis),
   Aceternity (Tracing Beam, Noise Background), dibuat ulang
   dengan CSS dan JavaScript polos, tanpa library.
   ========================================================= */

/* Tipografi: judul seimbang, paragraf tanpa kata yatim */
h1, h2, h3, .highlight, .closing-line { text-wrap: balance; }
p, li, figcaption { text-wrap: pretty; }
.stat-value, .offer-num, .card-num, .route-dot text { font-variant-numeric: tabular-nums; }

/* Label kecil diawali garis emas tipis */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px; height: 1px;
  background: currentColor;
  vertical-align: middle;
  margin: -2px 10px 0 0;
  opacity: 0.8;
}

/* Tekstur butiran halus di bagian gelap, kesan kertas premium */
.theme-dark, .site-header {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.07'/%3E%3C/svg%3E");
}

/* Header menempel di atas, tembus pandang halus, plus garis progres baca */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background-color: rgba(16, 16, 16, 0.97);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
}
.read-progress { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; pointer-events: none; }
.read-progress span {
  display: block; height: 100%;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold), var(--gold-soft));
  transform-origin: 0 50%; transform: scaleX(0);
}
section[id], .site-footer { scroll-margin-top: 72px; }

/* Kartu gelap: garis cahaya tipis di tepi atas */
.theme-dark .card, .proof-item, .stat {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.card, .proof-item { transition: border-color 200ms ease, transform 200ms ease; }
@media (hover: hover) {
  .theme-dark .card:hover, .proof-item:hover { border-color: rgba(180, 143, 68, 0.45); }
  .theme-light .card:hover { border-color: rgba(126, 98, 48, 0.4); }
}

/* Kotak Batch 1: garis emas tipis di tepi atas */
.batch-box { position: relative; overflow: hidden; }
.batch-box::before {
  content: ""; position: absolute; top: 0; left: 8%; right: 8%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

/* Baris kredibilitas mendatar di layar lebar */
@media (min-width: 1024px) {
  .cred-list { grid-auto-flow: column; justify-content: start; gap: var(--space-3); }
}

/* Timeline: garis emas ikut terisi saat digulir (Tracing Beam versi polos) */
.timeline { --beam: 1; }
.js .timeline.has-beam::before { background: var(--line-light); }
.js .timeline.has-beam::after {
  content: "";
  position: absolute; left: 7px; top: 8px; width: 1px;
  height: calc((100% - 16px) * var(--beam));
  background: linear-gradient(180deg, var(--gold-deep), var(--gold));
}
.timeline li::before { z-index: 1; }
.timeline li.is-reached::before { animation: titik-sampai 700ms ease-out 1; }
@keyframes titik-sampai {
  0% { box-shadow: 0 0 0 4px var(--paper), 0 0 0 4px rgba(180, 143, 68, 0.45); }
  100% { box-shadow: 0 0 0 4px var(--paper), 0 0 0 14px rgba(180, 143, 68, 0); }
}

/* Peta 7 titik: menyala berurutan dari 1 sampai 7 saat terlihat */
.route-dot circle, .route-dot text { transition: fill 400ms ease, stroke 400ms ease; }
.route-map.is-lit .route-dot circle { fill: var(--gold); }
.route-map.is-lit .route-dot text { fill: var(--ink); }
.route-svg .route-dot:nth-of-type(1) * { transition-delay: 0ms; }
.route-svg .route-dot:nth-of-type(2) * { transition-delay: 180ms; }
.route-svg .route-dot:nth-of-type(3) * { transition-delay: 360ms; }
.route-svg .route-dot:nth-of-type(4) * { transition-delay: 540ms; }
.route-svg .route-dot:nth-of-type(5) * { transition-delay: 720ms; }
.route-svg .route-dot:nth-of-type(6) * { transition-delay: 900ms; }
.route-svg .route-dot:nth-of-type(7) * { transition-delay: 1080ms; }

/* FAQ: jawaban muncul halus */
.faq details[open] .answer, .fold[open] .fold-body { animation: buka-halus 220ms ease-out; }
@keyframes buka-halus { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (hover: hover) { .faq summary:hover { color: var(--gold-deep); } }

/* Footer editorial */
.site-footer { position: relative; overflow: hidden; padding-top: var(--space-12); }
.footer-route { position: absolute; top: 8px; left: 0; width: 100%; height: 72px; opacity: 0.45; pointer-events: none; }
.footer-grid { display: grid; gap: var(--space-6); }
.footer-brand .brand { margin-bottom: var(--space-2); }
.footer-brand p { max-width: 42ch; font-size: 15px; }
.footer-head {
  font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold); margin-bottom: var(--space-1);
}
.footer-nav { list-style: none; margin: 0; padding: 0; display: grid; }
.footer-nav a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: var(--paper); text-decoration: none; font-size: 15px;
}
.site-footer .footer-links { margin: 0; }
.footer-links a { font-size: 15px; }
@media (hover: hover) { .footer-nav a:hover, .to-top:hover { color: var(--gold-soft); } }
.footer-wordmark {
  margin: var(--space-8) 0 var(--space-3);
  font-family: var(--font); font-weight: 700;
  font-size: clamp(34px, 10.8vw, 130px); line-height: 0.95; letter-spacing: -0.035em;
  color: rgba(255, 255, 255, 0.07);
  white-space: nowrap;
}
.footer-wordmark span { font-family: var(--font-accent); font-style: italic; font-weight: 500; letter-spacing: -0.01em; color: rgba(216, 192, 138, 0.22); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--space-2); justify-content: space-between; align-items: center;
  border-top: 1px solid var(--line-dark); padding-top: var(--space-3);
}
.footer-bottom .copyright { border: 0; padding: 0; margin: 0; }
.to-top { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--muted-dark); text-decoration: none; font-size: 14px; }
@media (min-width: 768px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1.2fr; gap: var(--space-6); }
}
@media (min-width: 1024px) {
  .journey-intro { top: 112px; }
}

@media (prefers-reduced-motion: reduce) {
  .js .timeline.has-beam::before { background: var(--gold); }
  .js .timeline.has-beam::after { display: none; }
  .timeline li.is-reached::before { animation: none; }
  .route-dot circle, .route-dot text, .card, .proof-item { transition: none; }
  .faq details[open] .answer, .fold[open] .fold-body { animation: none; }
}

/* =========================================================
   TAMBAHAN 2 Okt 2026 sore, diminta Rustandi:
   1. Cahaya emas ikut kursor di kartu (Card Spotlight versi polos), khusus laptop.
   2. Ilustrasi 50 kursi Batch 1 yang terisi berurutan.
   ========================================================= */

@property --spot-a { syntax: "<number>"; inherits: false; initial-value: 0; }
.spot { position: relative; isolation: isolate; }
.spot > * { position: relative; z-index: 1; }
.spot::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 50%), rgba(216, 192, 138, calc(0.17 * var(--spot-a))), rgba(180, 143, 68, calc(0.06 * var(--spot-a))) 40%, transparent 70%);
  transition: --spot-a 300ms ease;
}
.theme-light .spot::after {
  background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), rgba(180, 143, 68, calc(0.16 * var(--spot-a))), transparent 65%);
}
.spot.is-spot::after { --spot-a: 1; }
body:not(.no-spot) .spot.is-spot { border-color: rgba(180, 143, 68, 0.5); }

/* Ilustrasi 50 kursi, 1 navigator (disetujui Rustandi 2 Okt 2026).
   Semua kursi tampil sama, tidak ada status terisi atau kosong.
   Maknanya: kursi dibatasi karena tiap peserta terhubung langsung ke satu navigator. */
.seat-ring { margin: var(--space-4) 0 var(--space-3); width: 100%; max-width: 320px; }
.seat-ring svg { display: block; width: 100%; height: auto; overflow: visible; }
.ring-track { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 6; stroke-linecap: round; opacity: 0.35; }
.seat-spoke { stroke: var(--gold); stroke-width: 0.8; opacity: 0.2; stroke-dasharray: 104; stroke-dashoffset: 0; }
.seat-dot { fill: var(--ink-2); stroke: var(--gold); stroke-width: 1.4; }
.nav-halo { fill: rgba(180, 143, 68, 0.1); }
.nav-ring { fill: var(--ink); stroke: var(--gold); stroke-width: 1.2; }
.nav-needle { fill: none; stroke: var(--gold-soft); stroke-width: 1.2; stroke-linejoin: round; }
.nav-needle-fill { fill: var(--gold); }
.seat-dot, .seat-spoke, .nav-halo { transform-box: fill-box; transform-origin: center; }

/* Urutan animasi: kursi muncul satu per satu mengitari lingkaran, garis ke navigator
   tergambar, lalu navigator berdenyut sekali. Kursi tidak pernah diisi penuh,
   supaya tidak terbaca sebagai kursi terjual. */
.seat-ring.is-armed .seat-dot { opacity: 0; transform: scale(0.3); }
.seat-ring.is-armed .seat-spoke { stroke-dashoffset: 104; }
.seat-ring .seat-dot { transition: opacity 300ms ease, transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: var(--d, 0ms); }
.seat-ring .seat-spoke { transition: stroke-dashoffset 600ms ease; transition-delay: var(--d, 0ms); }
.seat-ring.is-done .nav-halo { animation: navigator-denyut 1.4s ease-out 1; }
@keyframes navigator-denyut { 0% { transform: scale(1); opacity: 1; } 100% { transform: scale(2.4); opacity: 0; } }

@media (min-width: 1024px) {
  .batch-box { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--space-12); align-items: start; }
  .batch-box > * { grid-column: 1; }
  .batch-box > .capsule { justify-self: start; }
  .batch-box > .seat-ring { grid-column: 2; grid-row: 1 / span 5; align-self: center; margin: 0; max-width: 340px; }
}

.nib-photo { margin-top: var(--space-2); }
.nib-photo .photo-slot { padding: var(--space-2); }



@media (prefers-reduced-motion: reduce) {
  .spot::after { display: none; }
  .seat-ring .seat-dot, .seat-ring .seat-spoke { transition: none; }
  .seat-ring.is-done .nav-halo { animation: none; }
}

/* Footer: "by Rustandi Gunawan" selalu di baris kedua, tidak terpotong canggung */
.footer-brand .brand-by { display: block; font-size: 13px; margin-left: 0; }


/* =========================================================
   ANIMASI PEMBUKA (3 Okt 2026, diminta Rustandi).
   Jalan sekali saat halaman dibuka, murni CSS, tanpa library.
   Urutan: garis rute tergambar dan satu titik emas berlayar di atasnya,
   judul muncul kata demi kata dari buram ke tajam, lalu foto, subjudul,
   baris kredibilitas, dan tombol. Terakhir satu kilau halus lewat di tombol.
   Semua mati kalau pengunjung memilih kurangi gerakan.
   ========================================================= */

.hero-route { opacity: 1; }
.hero-route .route-line { opacity: 0.35; }
.hero-route .route-line-2 { opacity: 0.2; }
.hero-route .route-stop { opacity: 0.4; transform-box: fill-box; transform-origin: center; }
.route-reveal { stroke-dasharray: 1; stroke-dashoffset: 0; }
.route-ship { display: none; }
.ship-halo { opacity: 0.45; transform-box: fill-box; transform-origin: center; }
@supports (offset-path: path("M0 0")) {
  .route-ship {
    display: block;
    offset-path: path("M-40 640 C 160 560 300 700 500 590 S 820 360 980 400 S 1180 250 1260 200");
    offset-rotate: 0deg;
    offset-distance: 86%;
    opacity: 0.9;
  }
}
.hero h1 .w { display: inline-block; }
.hero-cta .btn-primary { position: relative; overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .route-reveal { animation: rute-tergambar 7s cubic-bezier(0.45, 0, 0.2, 1) 300ms both; }
  .route-ship { animation: kapal-berlayar 7s cubic-bezier(0.45, 0, 0.2, 1) 300ms both; }
  .route-stop-1 { animation: titik-muncul 600ms ease-out 2600ms both; }
  .route-stop-2 { animation: titik-muncul 600ms ease-out 5200ms both; }
  .ship-halo { animation: suar 3.6s ease-out 7600ms infinite; }

  .hero .hero-eyebrow { animation: naik-halus 700ms ease-out 80ms both; }
  .hero .hero-eyebrow::before { animation: garis-tumbuh 700ms ease-out 80ms both; transform-origin: 0 50%; }
  .hero h1 .w { animation: kata-muncul 800ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .hero h1 .w1 { animation-delay: 220ms; }
  .hero h1 .w2 { animation-delay: 280ms; }
  .hero h1 .w3 { animation-delay: 340ms; }
  .hero h1 .w4 { animation-delay: 400ms; }
  .hero h1 .w5 { animation-delay: 460ms; }
  .hero h1 .w6 { animation-delay: 520ms; }
  .hero h1 .w7 { animation-delay: 720ms; }
  .hero h1 .w8 { animation-delay: 780ms; }
  .hero h1 .w9 { animation-delay: 840ms; }
  .hero h1 .w10 { animation-delay: 900ms; }
  .hero h1 .w11 { animation-delay: 960ms; }
  .hero h1 .w12 { animation-delay: 1020ms; }
  .hero h1 .w13 { animation-delay: 1080ms; }
  .hero h1 .w14 { animation-delay: 1140ms; }
  .hero h1 .w15 { animation-delay: 1200ms; }
  .hero h1 .w16 { animation-delay: 1260ms; }
  .hero h1 .w17 { animation-delay: 1320ms; }
  .hero .hero-photo { animation: foto-muncul 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) 700ms both; }
  .hero .lead { animation: naik-halus 800ms ease-out 1500ms both; }
  .hero .cred-list li { animation: naik-halus 600ms ease-out both; }
  .hero .cred-list li:nth-child(1) { animation-delay: 1750ms; }
  .hero .cred-list li:nth-child(2) { animation-delay: 1870ms; }
  .hero .cred-list li:nth-child(3) { animation-delay: 1990ms; }
  .hero .hero-cta { animation: naik-halus 700ms ease-out 2150ms both; }
  .hero-cta .btn-primary::after {
    content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.38), transparent);
    transform: translateX(-130%) skewX(-18deg);
    animation: kilau 1100ms ease-in-out 3100ms 1 both;
    pointer-events: none;
  }
}

@keyframes rute-tergambar { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes kapal-berlayar { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 0.9; } to { offset-distance: 86%; opacity: 0.9; } }
@keyframes titik-muncul { from { opacity: 0; transform: scale(0.2); } to { opacity: 0.4; transform: scale(1); } }
@keyframes suar { 0% { transform: scale(0.5); opacity: 0.6; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes kata-muncul { from { opacity: 0; transform: translateY(0.4em); filter: blur(8px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes naik-halus { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes garis-tumbuh { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes foto-muncul { from { opacity: 0; transform: scale(0.965) translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes kilau { from { transform: translateX(-130%) skewX(-18deg); } to { transform: translateX(330%) skewX(-18deg); } }


/* =========================================================
   KAPAL PINISI DAN SUAR DI RUTE LATAR (3 Okt 2026, koreksi dari Rustandi).
   Garis rute titik-titik di latar tetap seperti versi yang disetujui.
   Yang diganti cuma: titik yang berjalan jadi kapal pinisi, dan titik ujung
   yang menyala jadi suar berbentuk kompas. Di HP dan layar di bawah 1200 px
   tetap titik emas, karena di sana rutenya lewat di belakang teks dan foto.
   ========================================================= */

.ship-pinisi, .route-beacon { display: none; }
.pin-hull { fill: var(--ink); stroke: var(--gold-soft); stroke-width: 1.2; stroke-linejoin: round; }
.pin-deck { fill: none; stroke: var(--gold-soft); stroke-width: 1; stroke-linejoin: round; }
.pin-mast { fill: none; stroke: var(--gold-soft); stroke-width: 1.1; stroke-linecap: round; }
.pin-rig { fill: none; stroke: var(--gold); stroke-width: 0.5; opacity: 0.6; }
.pin-main { fill: var(--gold-soft); stroke: var(--ink); stroke-width: 0.6; stroke-linejoin: round; }
.pin-top { fill: var(--gold); stroke: var(--ink); stroke-width: 0.6; stroke-linejoin: round; }
.pin-jib { stroke: var(--ink); stroke-width: 0.6; stroke-linejoin: round; }
.pin-jib-1 { fill: var(--gold-soft); }
.pin-jib-2 { fill: #C9AD6E; }
.pin-jib-3 { fill: var(--gold); }
.pin-wave { fill: none; stroke: var(--gold); stroke-width: 0.9; stroke-linecap: round; opacity: 0.55; }
.ship-body { transform-box: fill-box; transform-origin: 50% 100%; }

.b-ring { fill: var(--ink); stroke: var(--gold); stroke-width: 1.3; }
.b-dash { fill: none; stroke: var(--gold); stroke-width: 1; stroke-dasharray: 2 4; opacity: 0.7; }
.b-needle { fill: none; stroke: var(--gold-soft); stroke-width: 1.2; stroke-linejoin: round; }
.b-needle-fill { fill: var(--gold); }
.b-halo { fill: none; stroke: var(--gold); stroke-width: 1; opacity: 0; transform-box: fill-box; transform-origin: center; }
.b-needle-g { transform-box: fill-box; transform-origin: center; }

@supports (offset-path: path("M0 0")) {
  .route-ship { offset-distance: var(--stop, 86%); }
}


@media (prefers-reduced-motion: no-preference) {
  .route-ship { animation-name: kapal-ke-suar; }
  .ship-body { animation: kapal-goyang 2.8s ease-in-out infinite alternate; }
  .route-beacon { animation: suar-nyala 900ms ease-out 7100ms both; }
  .route-beacon .b-halo { animation: suar-navigator 3.6s ease-out 7400ms infinite; }
  .route-beacon .b-needle-g { animation: jarum-kompas 1.8s cubic-bezier(0.3, 1.5, 0.5, 1) 7100ms 1; }
}
@keyframes kapal-ke-suar { from { offset-distance: 0%; opacity: 0; } 8% { opacity: 1; } to { offset-distance: var(--stop, 86%); opacity: 1; } }
@keyframes kapal-goyang { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg); } }
@keyframes suar-nyala { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes suar-navigator { 0% { transform: scale(0.85); opacity: 0.7; } 100% { transform: scale(1.9); opacity: 0; } }
@keyframes jarum-kompas { 0% { transform: rotate(-80deg); } 55% { transform: rotate(16deg); } 100% { transform: rotate(0deg); } }


/* =========================================================
   SAMUDERA (3 Okt 2026, konsep dari Rustandi).
   Jalur kapal dari kiri atas ke kanan bawah berupa ombak laut. Kapal pinisi harus
   berjuang: laut tenang (laju), angin lawan (pelan), badai dengan awan gelap, hujan,
   dan kilat (terhempas lalu berhenti), tenang lagi, lalu berlabuh di suar navigator
   di ruang kosong bawah foto. Menggambarkan ekspor nyata yang penuh rintangan.
   Hanya di layar lebar (dua kolom). Di HP tetap rute titik-titik dengan titik emas.
   ========================================================= */

.hero-ocean { display: none; position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hero.has-ocean .hero-ocean { display: block; }
.hero.has-ocean .hero-route { display: none; }
/* Laut malam: tiga lapis air biru tua dengan buih putih di puncak ombak.
   Biru ini khusus untuk laut di pembuka, bukan warna brand baru untuk bagian lain. */
.oc-layer { stroke: none; }
.oc-l3 { fill: #0E2231; }
.oc-l2 { fill: url(#laut-tengah); }
.oc-l1 { fill: url(#laut-depan); }
.oc-foam { fill: none; stroke: #EAF4F8; stroke-linecap: round; stroke-linejoin: round; }
.oc-foam-3 { stroke-width: 1; opacity: 0.14; }
.oc-foam-2 { stroke-width: 1.2; opacity: 0.3; }
.oc-foam-1 { stroke-width: 1.6; opacity: 0.6; }
.oc-caps { fill: none; stroke: #FFFFFF; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; opacity: 0.9; }
.oc-ship .pin-wave { display: none; }
.oc-buoy { stroke: var(--gold); stroke-width: 1.2; opacity: 0.7; }

.oc-ship { opacity: 0; transition: opacity 600ms ease; }
.hero-ocean.is-set .oc-ship { opacity: 1; }
.oc-wind { opacity: 0; transition: opacity 500ms ease; }
.oc-wind path { fill: none; stroke: var(--gold-soft); stroke-width: 1; stroke-linecap: round; }
.oc-ship.is-wind .oc-wind { opacity: 0.6; }

.oc-beacon { opacity: 0.4; transition: opacity 900ms ease; }
.oc-beacon.is-lit { opacity: 1; }

.oc-storm-in { opacity: 0; transition: opacity 900ms ease; }
.oc-storm.is-on .oc-storm-in { opacity: 1; }
.oc-cloud { fill: #262D34; stroke: #6F7C86; stroke-width: 1; stroke-linejoin: round; }
.oc-cloud-2 { fill: #333C45; stroke: #8794A0; stroke-width: 0.8; }
.oc-rain line { stroke: #CFE1EA; stroke-width: 1; stroke-linecap: round; opacity: 0.6; }
.oc-bolt { fill: none; stroke: #F4E3B5; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: 0; }

@media (min-width: 1024px) {
  /* Foto pembuka naik ke atas, supaya dari tengah ke bawah ada ruang berlabuh. */
  .hero-grid > .hero-photo { align-self: start; }
}

@media (prefers-reduced-motion: no-preference) {
  .oc-ship.is-wind .oc-wind path { animation: angin-lawan 900ms linear infinite; }
  .oc-wind path:nth-child(2) { animation-delay: 300ms; }
  .oc-wind path:nth-child(3) { animation-delay: 600ms; }
  .oc-storm.is-on .oc-rain { animation: hujan 700ms linear infinite; }
  .oc-storm.is-on .oc-rain-2 { animation-delay: 230ms; }
  .oc-storm.is-on .oc-rain-3 { animation-delay: 460ms; }
  .oc-storm.is-flash .oc-bolt { animation: kilat 700ms ease-out 1; }
  .oc-storm.is-flash .oc-cloud { animation: awan-kilat 700ms ease-out 1; }
  .oc-beacon.is-lit .b-halo { animation: suar-navigator 3.6s ease-out infinite; }
  .oc-beacon.is-lit .b-needle-g { animation: jarum-kompas 1.8s cubic-bezier(0.3, 1.5, 0.5, 1) 1; }
}
@keyframes angin-lawan { from { transform: translateX(20px); opacity: 0; } 30% { opacity: 1; } to { transform: translateX(-46px); opacity: 0; } }
@keyframes hujan { from { transform: translate(6px, -6px); opacity: 0; } 20% { opacity: 1; } to { transform: translate(-22px, 70px); opacity: 0; } }
@keyframes kilat { 0% { opacity: 0; } 8% { opacity: 1; } 20% { opacity: 0.15; } 32% { opacity: 1; } 100% { opacity: 0; } }
@keyframes awan-kilat { 0%, 100% { fill: #262D34; } 8%, 32% { fill: #8FA3B0; } 20% { fill: #3A444D; } }


/* Pinisi besar pengangkut kontainer (3 Okt 2026, diminta Rustandi).
   Kontainer hanya tiga warna: merah, biru, kuning. Lampu mengikuti aturan lampu kapal
   malam hari: putih di puncak tiang (dibuat berkedip supaya kapal menarik perhatian),
   hijau di sisi kanan, putih di buritan. */
.big-hull { fill: #15120C; stroke: var(--gold-soft); stroke-width: 1.6; stroke-linejoin: round; }
.big-stripe { fill: none; stroke: var(--gold); stroke-width: 1.4; opacity: 0.8; }
.big-cabin { fill: #15120C; stroke: var(--gold-soft); stroke-width: 1.4; stroke-linejoin: round; }
.ctr { stroke: #101010; stroke-width: 0.9; }
.ctr-rib { fill: none; stroke: #101010; stroke-width: 0.6; opacity: 0.35; }
.c-red { fill: #C9483D; }
.c-blue { fill: #2F74B8; }
.c-yel { fill: #E2B63C; }
.lamp-mast .lamp-core, .lamp-stern .lamp-core { fill: #FFFFFF; }
.lamp-mast .lamp-glow, .lamp-stern .lamp-glow { fill: #FFF6D8; opacity: 0.3; }
.lamp-side .lamp-core { fill: #4BE08A; }
.lamp-side .lamp-glow { fill: #4BE08A; opacity: 0.28; }
.lamp-glow { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .lamp-mast { animation: lampu-kedip 1.6s steps(1, end) infinite; }
  .lamp-mast .lamp-glow { animation: lampu-pendar 1.6s ease-out infinite; }
}
@keyframes lampu-kedip { 0%, 100% { opacity: 1; } 55% { opacity: 0.18; } }
@keyframes lampu-pendar { 0% { transform: scale(0.6); opacity: 0.55; } 50% { transform: scale(1.7); opacity: 0; } 100% { transform: scale(1.7); opacity: 0; } }


/* Kapal kecil di ujung garis progres baca: kapal dari pembuka terus berlayar menemani pembaca. */
.progress-ship {
  position: absolute; left: 0; bottom: 1px;
  width: 30px; height: 21.4px;
  opacity: 0; transition: opacity 400ms ease;
  will-change: transform;
}
.progress-ship.is-on { opacity: 1; }
.ps-hull { fill: #15120C; stroke: var(--gold-soft); stroke-width: 1.2; stroke-linejoin: round; }
.ps-sail { fill: var(--gold-soft); }
.ps-mast { fill: none; stroke: var(--gold-soft); stroke-width: 1; }
.progress-ship rect { stroke: #101010; stroke-width: 0.5; }

/* Gambar dua pintu di bagian "Ekspor itu ngapain" (layar lebar saja). */
.doors { display: none; margin: 0; }
.doors svg { display: block; width: 100%; height: auto; overflow: visible; }
.dr-door path, .dr-door circle { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dr-door .dr-leaf { fill: rgba(180, 143, 68, 0.1); }
.dr-door .dr-ground { stroke: var(--line-dark); }
.dr-sea { fill: none; stroke: var(--gold); stroke-width: 1.3; stroke-dasharray: 3 9; stroke-linecap: round; opacity: 0.7; }
.dr-crate { stroke: #101010; stroke-width: 0.8; }
.doors text { font-family: var(--font); font-size: 9.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; fill: var(--gold-soft); text-anchor: middle; }
@media (min-width: 1100px) {
  .intro-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--space-8); align-items: end; }
  .doors { display: block; padding-bottom: 6px; }
}
@media (max-width: 767px) {
  /* Di HP kapal progres dikecilkan supaya tidak menyentuh logo. */
  .progress-ship { width: 20px; height: 14.3px; }
}


/* Peta 7 titik mengikuti guliran (4 Okt 2026, diminta Rustandi). */
.route-map { position: relative; }
.route-map.is-scroll .route-dot { opacity: 0; transform: scale(0.4); transform-box: fill-box; transform-origin: center; transition: opacity 300ms ease, transform 450ms cubic-bezier(0.3, 1.7, 0.5, 1); }
.route-map.is-scroll .route-dot.is-on { opacity: 1; transform: scale(1); }
.route-map.is-scroll .route-dot * { transition-delay: 0ms; }
.route-map.is-scroll .route-dot.is-on circle { fill: var(--gold); }
.route-map.is-scroll .route-dot.is-on text { fill: var(--ink); }
.route-map.is-scroll .route-svg > circle:last-of-type,
.route-map.is-scroll .route-end { opacity: 0; transition: opacity 600ms ease 250ms; }
.route-map.is-scroll.is-arrived .route-svg > circle:last-of-type,
.route-map.is-scroll.is-arrived .route-end { opacity: 1; }
.confetti { position: absolute; width: 7px; height: 7px; border-radius: 1px; pointer-events: none; z-index: 3; }
.confetti.is-strip { width: 4px; height: 11px; border-radius: 2px; }


/* Foto pembuka asli (4 Okt 2026). HP: bingkai 4:3 fokus ke wajah. Layar lebar: 4:5 utuh. */
.hero-photo img {
  display: block; width: 100%; height: auto;
  aspect-ratio: 4 / 3; object-fit: cover; object-position: 60% 38%;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(180, 143, 68, 0.45);
}
@media (min-width: 1024px) {
  .hero-photo img { aspect-ratio: 4 / 5; object-position: 50% 50%; }
}


/* Bagian 3 berurutan mengikuti guliran (4 Okt 2026, diminta Rustandi):
   barang berjalan dari pintu keluar ke pintu masuk, lalu kartu 01, 02, 03, lalu tiga fakta. */
.doors { display: block; max-width: 380px; margin: var(--space-4) 0 0; }
.doors text { font-size: 10.5px; }
@media (min-width: 1100px) { .doors { margin: 0; } .doors text { font-size: 9.5px; } }
.dr-door path, .dr-door circle { transition: stroke 500ms ease; }
.dr-door .dr-leaf { transition: fill 500ms ease; }
.is-seq .dr-door { opacity: 0.45; transition: opacity 500ms ease; }
.is-seq .dr-door.is-lit { opacity: 1; }
.is-seq .dr-door.is-lit .dr-leaf { fill: rgba(180, 143, 68, 0.3); }
.is-seq .card, .is-seq .facts {
  opacity: 0; transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease, border-color 200ms ease;
}
.is-seq .card.is-shown, .is-seq .facts.is-shown { opacity: 1; transform: none; }


/* Dua bukti transfer berdampingan di timeline (4 Okt 2026). */
.tl-proofs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-top: var(--space-3); align-items: start; }
.tl-proofs figure { margin: 0; }
.tl-proofs img { width: 100%; height: auto; border: 1px solid var(--line-light); border-radius: var(--radius-sm); background: #fff; }
.tl-proofs figcaption { margin-top: var(--space-1); }
.tl-proofs-note { margin-top: var(--space-1) !important; }
.zoom-btn { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--radius-sm); }
dialog#zoom { overflow: auto; }
dialog#zoom img { max-height: none; width: min(92vw, 900px); background: #fff; cursor: zoom-out; }


/* Lautan titik di bagian Corong (5 Okt 2026, diminta Rustandi): 5.022 titik, satu titik satu
   perusahaan yang di-email. Dua puluhan menyala emas. Tanpa angka corong tengah (290, 66). */
.dotsea { display: none; margin: var(--space-4) 0 0; }
.js .dotsea { display: block; }
.dotsea-canvas { display: block; width: 100%; }
.dotsea figcaption { margin-top: var(--space-2); }
@media (min-width: 1100px) {
  .corong-split { display: grid; grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--space-8); align-items: center; }
  .dotsea { margin: 0; }
}


/* Bagian Modal (5 Okt 2026): foto garasi di kolom kanan menemani teks, plus struk modal. */
.struk { margin: 8px 0 var(--space-3); background: var(--paper-2); border: 1px solid var(--line-light); border-top: 3px solid var(--gold); border-radius: var(--radius-sm); padding: 22px 24px 18px; }
.struk-head { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-deep); margin: 0 0 12px; line-height: 1.5; }
.struk dl { margin: 0; }
.struk .row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; padding: 7px 0; font-size: 15px; line-height: 1.4; }
.struk dt { flex: 0 1 auto; max-width: 100%; }
.struk .dots { flex: 1 1 24px; min-width: 24px; border-bottom: 1.5px dotted var(--gold); opacity: 0.6; transform: translateY(-4px); }
.struk dd { margin: 0 0 0 auto; flex: 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }
.struk .total { border-top: 1.5px dashed var(--gold); margin-top: 8px; padding-top: 12px; font-weight: 700; font-size: 16px; }
.struk .total dd { font-weight: 700; color: var(--gold-deep); }
@media (min-width: 1100px) {
  .modal-split { display: grid; grid-template-columns: minmax(0, 1fr) 420px; column-gap: var(--space-8); align-items: start; }
  .modal-split .wide-photo { margin: 0; max-width: none; position: sticky; top: 112px; }
  .modal-split .wide-photo figcaption { font-size: 15px; line-height: 1.55; }
}

/* Struk modal dirapikan (5 Okt 2026): label panjang dipecah dua baris, angka selalu sejajar di kanan,
   dan kolom teks dilebarkan di layar lebar. */
@media (min-width: 600px) {
  .struk .row { flex-wrap: nowrap; align-items: flex-end; }
  .struk dt { max-width: 13em; text-wrap: balance; }
  .struk .total dt { max-width: none; }
  .struk .dots { transform: translateY(-6px); }
}
@media (min-width: 1100px) {
  .modal-split { grid-template-columns: minmax(0, 1fr) 380px; column-gap: var(--space-6); }
  .modal-split > .measure { max-width: none; }
  .struk { padding: 24px 28px 20px; }
}


/* 5 Okt 2026: dokumen NIB di kartu Badan hukum, dan tiga kotak foto kontainer. */
.nib-photo { max-width: 300px; }
.nib-photo img { width: 100%; height: auto; background: #fff; border: 1px solid var(--line-dark); border-radius: var(--radius-sm); }
.pair-grid { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 768px) { .pair-grid { grid-template-columns: repeat(3, 1fr); max-width: 900px; } }


/* Kartu Brand dan Badan hukum dirapikan (5 Okt 2026): masing-masing selebar penuh,
   supaya tidak ada ruang kosong di bawah tombol. */
.proof-brand .btn { margin-top: var(--space-2); }
.proof-legal .nib-photo { margin-top: var(--space-3); }
.proof-note { color: var(--muted-dark); margin-top: var(--space-2) !important; max-width: 44ch; }
@media (min-width: 768px) {
  .proof-list { grid-template-columns: 1fr; }
  .proof-item.is-wide { grid-column: auto; }
  .proof-brand { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
  .proof-brand h3 { margin: 0; }
  .proof-brand .btn { margin-top: 0; flex: none; }
  .proof-legal { display: grid; grid-template-columns: minmax(0, 1fr) 300px; column-gap: var(--space-6); align-items: center; }
  .proof-legal .nib-photo { margin: 0; }
}


/* Galeri muat barang, 12 foto, digeser pembaca sendiri (5 Okt 2026). Tidak jalan otomatis. */
.muat { margin-top: var(--space-3); }
.muat-track { list-style: none; margin: 0; padding: 0 0 12px; display: flex; gap: var(--space-2); overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--gold) var(--line-dark); }
.muat-track:focus-visible { outline: 2px solid var(--gold-soft); outline-offset: 4px; }
.muat-item { flex: none; scroll-snap-align: start; }
.muat-item figure { margin: 0; }
.muat-item img { display: block; height: 300px; width: auto; border-radius: var(--radius-sm); border: 1px solid var(--line-dark); }
.muat-item figcaption { margin-top: var(--space-1); max-width: 30ch; width: min-content; min-width: 100%; }
.muat-item figcaption b { color: var(--gold); font-weight: 600; margin-right: 6px; font-variant-numeric: tabular-nums; }
.muat-nav { display: flex; align-items: center; gap: 10px; margin-top: var(--space-2); flex-wrap: wrap; }
.muat-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold); background: transparent; color: var(--gold); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.muat-btn:hover { background: rgba(180, 143, 68, 0.12); }
dialog#zoom img { width: auto; max-width: 92vw; max-height: 90vh; }
@media (min-width: 1024px) { .muat-item img { height: 400px; } }
.proof-list > .proof-item { min-width: 0; }
.muat, .muat-track { min-width: 0; max-width: 100%; }
@media (max-width: 767px) { .muat-item img { height: 260px; } }


/* Testimoni peserta Batch 1: potongan gelembung chat asli (5 Okt 2026). */
.testi-list { list-style: none; margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-4); max-width: 760px; }
.testi-list figure { margin: 0; }
.testi-list img { display: block; width: 100%; height: auto; border-radius: 10px; border-left: 3px solid var(--gold); }
.testi-list figcaption { margin-top: var(--space-1); }
@media (max-width: 767px) {
  /* Di HP, testimoni yang diperbesar boleh digeser ke samping supaya hurufnya terbaca. */
  dialog#zoom img[src*="testimoni"] { max-width: none; max-height: none; width: 820px; }
}