/* ===========================================================================
   APF Gate — landing page publik.

   Berbagi bahasa visual dengan halaman gerbang (warna merek yang sama, tipografi
   sistem yang sama) tapi stylesheet-nya terpisah: halaman ini panjang, penuh
   tabel, dan dibaca crawler serta calon pembeli yang mungkin memakai koneksi
   lambat — jadi tidak ada gunanya memuat aturan form yang tidak dipakai.
   =========================================================================== */

:root {
  --ink:        #14181d;
  --ink-soft:   #55606d;
  --ink-faint:  #8a94a1;
  --line:       #dfe4ea;
  --line-soft:  #eef1f5;
  --bg:         #ffffff;
  --bg-alt:     #f4f6f9;
  --brand:      #0d5c4d;
  --brand-dark: #0a4a3e;
  --brand-tint: #e8f2ef;
  --radius:     12px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 17px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
}

.wrap { max-width: 62rem; margin: 0 auto; padding: 0 24px; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  padding: 84px 0 72px;
  color: #fff;
  background: #0a1512;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
  background-image: url("preview.jpg");
  background-size: cover;
  background-position: center;
  opacity: .72;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
              rgba(6, 16, 13, .92) 0%,
              rgba(6, 16, 13, .78) 46%,
              rgba(6, 16, 13, .38) 100%);
}

.hero-body { position: relative; z-index: 1; max-width: 44rem; }

.eyebrow {
  margin: 0 0 12px;
  font-size: .8rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #7fd8c4;
}

.hero h1 {
  margin: 0 0 18px;
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
}

.lede { margin: 0 0 28px; font-size: 1.12rem; color: #d3dedb; }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}

.btn {
  display: inline-block;
  padding: 14px 24px;
  border-radius: 9px;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .15s, border-color .15s;
}

.btn.primary { background: var(--brand); color: #fff; }
.btn.primary:hover { background: var(--brand-dark); }

.btn.ghost {
  border: 1px solid rgba(255, 255, 255, .38);
  color: #fff;
}
.btn.ghost:hover { border-color: #fff; }

.cta-note { margin: 0; font-size: .9rem; color: #a9bab6; }

/* ── Angka utama ─────────────────────────────────────────────────────────── */

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 20px;
  margin: -34px auto 0;
  position: relative;
  z-index: 2;
}

.figure {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: #fff;
  box-shadow: 0 8px 28px rgba(20, 24, 29, .08);
}

.figure-value {
  margin: 0 0 4px;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--brand);
}

.figure-label { margin: 0; font-size: .92rem; color: var(--ink-soft); }

/* ── Blok isi ────────────────────────────────────────────────────────────── */

.block { padding: 56px 24px 0; }
.block:last-of-type { padding-bottom: 56px; }

h2 {
  margin: 0 0 14px;
  font-size: clamp(1.4rem, 2.6vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.01em;
}

h3 {
  margin: 32px 0 8px;
  font-size: 1.08rem;
}

.intro { margin: 0 0 22px; color: var(--ink-soft); max-width: 46rem; }

.two-col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 40px;
  align-items: start;
}

/* ── Daftar ──────────────────────────────────────────────────────────────── */

.ticks, .docs { margin: 0; padding: 0; list-style: none; }

.ticks li, .docs li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--ink-soft);
}

.ticks li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: .58em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

/* Dokumen di dalam tour: penanda berbentuk halaman, bukan bulatan.
 *
 * Versi pertama hanya kotak bergaris dan terbaca sebagai KOTAK CENTANG kosong —
 * seolah pengunjung harus mencentang sesuatu. Latar bertint plus sudut terlipat
 * membuatnya jelas sebagai berkas. */
.docs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .3em;
  width: 13px;
  height: 16px;
  border: 1.5px solid var(--brand);
  border-radius: 2px;
  background: var(--brand-tint);
}

.docs li::after {
  content: "";
  position: absolute;
  left: 9px;
  top: .3em;
  width: 6px;
  height: 6px;
  background: #fff;
  border-left: 1.5px solid var(--brand);
  border-bottom: 1.5px solid var(--brand);
}

.docs li { color: var(--ink); padding-left: 32px; }

/* ── Pasangan istilah ────────────────────────────────────────────────────── */

.pairs {
  display: grid;
  grid-template-columns: minmax(11rem, auto) 1fr;
  gap: 10px 26px;
  margin: 0;
  max-width: 48rem;
}

.pairs dt { color: var(--ink-faint); font-size: .95rem; }
.pairs dd { margin: 0; }

/* ── Tabel ───────────────────────────────────────────────────────────────── */

.cap { margin-bottom: 8px; }
.cap-note { margin: 0 0 14px; color: var(--ink-soft); font-size: .93rem; max-width: 46rem; }

.table-scroll { overflow-x: auto; }

table {
  width: 100%;
  border-collapse: collapse;
  font-size: .95rem;
}

th, td {
  padding: 11px 14px 11px 0;
  text-align: left;
  border-bottom: 1px solid var(--line-soft);
}

th {
  color: var(--ink-faint);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}

td.num, th.num {
  text-align: right;
  /* Kolom angka harus lurus vertikal supaya kapasitas bisa dibandingkan
     sekilas — itu justifikasi tabular-nums, bukan selera. */
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Padding kanan dihapus HANYA di kolom terakhir, bukan di setiap kolom angka.
 *
 * Versi pertama memakai `.num { padding-right: 0 }`, yang benar selama kolom
 * angka memang paling kanan. Di tabel Utility plant dan Power & steam ia bukan
 * yang terakhir, dan hasilnya angka menempel ke catatan di sebelahnya:
 * "1,750 m³/dayComplete with circulation pumps". */
th:last-child, td:last-child { padding-right: 0; }

tfoot td {
  border-top: 2px solid var(--line);
  border-bottom: 0;
  font-weight: 600;
}

.muted { color: var(--ink-faint); }

.disclaimer {
  margin: 28px 0 0;
  padding: 14px 16px;
  border-left: 3px solid var(--line);
  background: var(--bg-alt);
  color: var(--ink-soft);
  font-size: .9rem;
  max-width: 46rem;
}

/* ── Footer ──────────────────────────────────────────────────────────────── */

.footer {
  margin-top: 56px;
  padding: 34px 0;
  border-top: 1px solid var(--line);
  background: var(--bg-alt);
  font-size: .93rem;
}

.footer p { margin: 0 0 6px; }

@media (max-width: 640px) {
  body { font-size: 16px; }
  .hero { padding: 56px 0 52px; }
  .figures { margin-top: -26px; }
  .block { padding-top: 44px; }
}