/* ═══════════════════════════════════════════════════════════
   Nahelindo Pratama — style.css
   1. Fonts        6. Header / menu
   2. Design token 7. Hero
   3. Reset        8. Marquee
   4. Base         9. Section umum
   5. Buttons     10. Kartu / stats / steps / kantor / form
  11. CTA, footer, toast, animasi
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Fonts ─────────────────────────────────────────────── */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/jetbrains-mono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800; /* variable font */
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Poppins Bold 700 — khusus untuk label "Ibu Dewi" di header.
   Di-self-host, bukan lewat CDN, supaya tidak menambah permintaan
   ke pihak ketiga dan tidak menahan render. */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
    U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('fonts/poppins-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304,
    U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ── 2. Design token ──────────────────────────────────────── */
:root {
  --blue: #2563eb;
  --blue-dark: #1d4ed8;
  --blue-pale: #eff6ff;
  --blue-line: #bfdbfe;
  --blue-track: #dbeafe;
  --ink: #0f172a;
  --muted: #475569;
  --line: #dbe3f0;
  --tint: #f5f9ff;
  --navy: #0b1f4d;
  /* Diambil dari piksel gambar logo (18,9% piksel) supaya
     teks di headerMatches the logo persis, bukan biru accent. */
  --brand-navy: #2f308b;
  --navy-soft: #bfdbfe;
  --white: #fff;
  --danger: #b91c1c;

  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-poppins: 'Poppins', 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --page-max: 480px;
  --gutter: 20px;
  --radius: 0; /* desain ini sengaja siku-siku */
  --ease: cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ── 3. Reset ─────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* header tidak sticky, jadi offset anchor cukup jarak kecil */
  scroll-padding-top: 16px;
  -webkit-text-size-adjust: 100%;
}

/* ── 4. Base ──────────────────────────────────────────────── */
body {
  background: #faf9f5;
  color: var(--ink);
  font-family: var(--font-sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2,
h3 {
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 10px 16px;
  background: var(--ink);
  color: var(--white);
  font-weight: 700;
}
.skip-link:focus {
  left: 8px;
  top: 8px;
}

.page {
  width: 100%;
  max-width: var(--page-max);
  margin: 0 auto;
  background: var(--white);
  /* overflow:hidden sengaja tidak dipakai di sini: .page adalah akar
     layout, bukan elemen yang perlu dipotong. Pemotongan overflow
     ditangani tiap seksi yang memang butuh (.hero, .marquee, .cta). */
}

/* ── 5. Tombol ────────────────────────────────────────────── */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 52px;
  padding: 12px 20px;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  border: 1px solid transparent;
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease),
    background-color 0.15s var(--ease), color 0.15s var(--ease);
}

.btn--primary {
  background: var(--blue);
  color: var(--white);
  font-weight: 800;
  box-shadow: 4px 4px 0 var(--ink);
}
.btn--primary:hover {
  background: var(--blue-dark);
  box-shadow: 2px 2px 0 var(--ink);
  transform: translate(2px, 2px);
}
.btn--primary:active {
  box-shadow: 0 0 0 var(--ink);
  transform: translate(4px, 4px);
}

.btn--ghost {
  background: var(--white);
  border-color: var(--ink);
}
.btn--ghost:hover {
  background: var(--ink);
  color: var(--white);
}

.btn--white {
  background: var(--white);
  color: var(--navy);
  font-weight: 800;
  box-shadow: 4px 4px 0 var(--blue);
}
.btn--white:hover {
  box-shadow: 2px 2px 0 var(--blue);
  transform: translate(2px, 2px);
}

.btn--block {
  width: 100%;
}

/* ── 6. Header + menu ─────────────────────────────────────── */
.topbar {
  position: relative;
  z-index: 50;
  display: grid;
  grid-template-columns: 1fr 1.5fr 1fr;
  align-items: stretch;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.topbar__link {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 64px;
  padding: 0 8px;
  font-size: 16px;
  color: var(--muted);
  transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
}
/* Header: Menu di kolom kiri, logo di tengah, Ibu Dewi di kanan.
   Pembatas hanya di sisi kanan Menu supaya ketiga kolom terpisah
   tanpa garis di tepi halaman. */
.topbar__link--btn {
  border-right: 1px solid var(--line);
}

/* Kolom kanan: kontak WhatsApp ke Ibu Dewi.
   Teksnya sudah IBU DEWI di HTML; letter-spacing dibuat rapat
   supaya tetap terbaca sebagai satu label, bukan dua kata pisah.
   Warnanya --brand-navy (#2f308b) yang diambil dari logonya,
   bukan --blue, supaya sekilas terbaca satu paket dengan logo.
   border-left melengkapi pembatas di sisi kanan logo, jadi ketiga
   kolom terpisah penuh: Menu | logo | IBU DEWI. */
.topbar__link--wa {
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--brand-navy);
  border-left: 1px solid var(--line);
}
.topbar__link:hover {
  color: var(--blue);
  background: var(--tint);
}
/* Ikon hamburger menggantikan teks "Menu".
   Chevron kecil lama (::after) sudah dibuang.
   Garisnya ikut warna logo supaya sepadan dengan "IBU DEWI". */
.topbar__link--btn::after {
  content: none;
}
.burger {
  display: block;
}
.burger__l1,
.burger__l2,
.burger__l3 {
  transform-origin: 12px 12px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
/* saat menu terbuka, tiga garis berubah jadi tanda silang */
.topbar__link--btn[aria-expanded='true'] .burger__l1 {
  transform: translateY(4.5px) rotate(45deg);
}
.topbar__link--btn[aria-expanded='true'] .burger__l2 {
  opacity: 0;
}
.topbar__link--btn[aria-expanded='true'] .burger__l3 {
  transform: translateY(-4.5px) rotate(-45deg);
}

.brand {
  /* display:flex + align/justify center dipakai supaya logo tepat
     tengah secara vertikal DAN horizontal di semua lebar. Sebelumnya
     di bawah 1280px logo duduk di atas: jarak atas 10px tapi bawah
     22px, jadi meleset 12px ke bawah. */
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 0;
  /* padding atas dan bawah sama, supaya tinggi logo tetap simetris
     meski .brand ikut diregangkan oleh grid .topbar. */
  padding: 10px 12px;
  color: var(--ink);
}
.brand:hover {
  background: transparent;
}

/* logo wordmark: mengisi lebar sel tengah, max-width menyisakan
   gap di kiri-kanan, margin-inline menengahkan. Lebar dikunci lewat
   max-width supaya logo tidak ikut melar bersama kotak header. */
.brand__logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 156px;
  margin-inline: auto;
}

/* Hover kartu negara: SEMUA teks di atas foto jadi putih.
   Sebelumnya hanya .card__sub dan "/ Bulan" yang berubah, jadi
   nomor, judul negara, dan nilai gaji tetap gelap dan tidak
   menyatu dengan foto yang sudah tampil penuh warna.

   Foto saat hover naik ke 100% warna, sehingga teks besar
   (judul, nomor, gaji) diberi bayangan tipis supaya tetap
   terbaca di atas langit atau gedung yang terang. */
.card--country:hover .card__num,
.card--country:focus-within .card__num,
.card--country:hover .card__title,
.card--country:focus-within .card__title,
.card--country:hover .country__pay,
.card--country:focus-within .country__pay {
  color: var(--white);
}
.card--country:hover .card__num,
.card--country:focus-within .card__num,
.card--country:hover .card__title,
.card--country:focus-within .card__title,
.card--country:hover .country__pay,
.card--country:focus-within .country__pay {
  text-shadow: 0 1px 10px rgb(2 6 23 / 78%);
}
/* Garis pemisah gaji ikut terang supaya tidak tenggelam di foto. */
.card--country:hover .country__pay,
.card--country:focus-within .country__pay {
  border-top-color: rgb(255 255 255 / 38%);
}

/* Empat kotak statistik: 2 kolom x 2 baris. Dipakai untuk kotak
   "Tujuan Penempatan" yang memuat 4 angka. */
.statcard__grid--4 {
  grid-template-columns: 1fr 1fr;
}

/* panel menu dropdown */
.navpanel {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  /* Tanpa box-shadow: bayangan di panel menu bikin tepi bawah
     terlihat berat dan tidak sejalan dengan garis kotak menu. */
  box-shadow: none;
  transform-origin: top;
  animation: menu-in 0.18s var(--ease);
}
.navpanel[hidden] {
  display: none;
}
.navpanel__item {
  padding: 15px var(--gutter);
  font-size: 15px;
  font-weight: 600;
  border-bottom: 1px solid var(--line);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease);
}
/* padding-left saat hover sudah dihapus. Aturan lama ini menambah
   padding-left sebesar gutter+6px sehingga teks tergeser dan
   menabrak garis pembatas kotak. Efek hover sekarang hanya dari
   .navpanel__label (zoom teks) di blok desktop. */
.navpanel__item:hover {
  background: var(--tint);
  color: var(--blue);
}
.navpanel__item[aria-current='page'] {
  background: var(--tint);
  color: var(--blue);
  font-weight: 700;
}
.navpanel__item--cta {
  color: var(--blue);
  font-weight: 800;
}

@keyframes menu-in {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── 7. Hero ──────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 48px var(--gutter) 44px;
  text-align: center;
  overflow: hidden;
}
/* Foto negara di awal section Sektor (halaman negara).
   Berbeda dari kartu negara di beranda: di sini ditampilkan warna
   penuh 100% - tanpa filter dan tanpa transparansi. */
.sektor-photo {
  margin: 0 0 20px;
}
.sektor-photo img {
  display: block;
  width: 100%;
  height: auto;
  filter: none;
  opacity: 1;
}

/* canvas: menutup area section, tidak menahan klik karena
   pointer-events:none. .kinetic-canvas = hero + section putih,
   .particle-canvas = kotak "Siap Berangkat?". */
.kinetic-canvas,
.particle-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
}

/* .glow, .pd, dan pola .dots sudah dihapus: semua dekorasi bergerak
   sekarang diambil dari canvas (kinetic / particle). */

/* konten hero */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--blue-line);
  background: var(--blue-pale);
  font-size: 13px;
  font-weight: 700;
  color: var(--blue-dark);
}
.badge__dot {
  width: 7px;
  height: 7px;
  background: var(--blue);
  animation: pd 2.4s ease-in-out infinite;
}

.hero__title {
  margin: 22px 0 14px;
  font-size: 38px;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.hero__title em {
  font-style: normal;
  color: var(--blue);
}

.hero__lead {
  max-width: 330px;
  margin: 0 auto;
  font-size: 16px;
  color: var(--muted);
}

.hero__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 28px;
}

/* kartu statistik */
.statcard {
  position: relative;
  margin-top: 36px;
  padding: 16px;
  background: var(--white);
  border: 1px solid var(--line);
  text-align: left;
  box-shadow: 0 24px 40px -24px rgb(37 99 235 / 53%);
}
.float {
  animation: flt 4s ease-in-out infinite;
}

.statcard__row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 12px;
  color: var(--muted);
}
.statcard__row strong {
  color: var(--blue);
  font-weight: 700;
}

.statcard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 12px;
}
.statbox {
  padding: 12px;
  background: var(--blue-pale);
}
.statbox__label {
  display: block;
  font-size: 11px;
  color: var(--muted);
}
.statbox__value {
  display: block;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}
/* nilai yang berupa teks panjang (mis. nama wilayah), bukan angka */
.statbox__value--sm {
  font-size: 17px;
}

.bar {
  margin-top: 8px;
  height: 8px;
  background: var(--blue-track);
}
.bar__fill {
  display: block;
  width: 0;
  height: 8px;
  background: var(--blue);
  transition: width 1.2s var(--ease);
}

/* ── 8b. Trust bar ─────────────────────────────────────────── */
.trust {
  padding: 13px 20px;
  background: var(--navy);
  text-align: center;
}
.trust__legal {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  font-weight: 700;
  color: var(--white);
}
.trust__tick {
  width: 16px;
  height: 16px;
  flex: none;
  background: var(--blue-track);
  position: relative;
}
.trust__tick::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 4px;
  height: 8px;
  border-right: 2px solid var(--navy);
  border-bottom: 2px solid var(--navy);
  transform: rotate(45deg);
}

/* ── 8c. Keunggulan ────────────────────────────────────────── */
.perks {
  display: flex;
  flex-direction: column;
}
.perk {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 15px 0;
  border-top: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  transition: color 0.15s var(--ease), padding-left 0.15s var(--ease);
}
.perk:last-child {
  border-bottom: 1px solid var(--line);
}
.perk:hover {
  padding-left: 6px;
  color: var(--blue);
}
.perk__mark {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 4px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
  position: relative;
}
.perk__mark::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 3px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(45deg);
}
.perk sup {
  color: var(--blue);
  font-weight: 800;
}

.footnote {
  margin-top: 12px;
  font-size: 12px;
  color: var(--muted);
}

/* ── 8d. Kartu negara + foto latar ────────────────────────── */
/* bg foto pakai elemen anak, bukan ::before/::after — kedua
   pseudo-element itu sudah dipakai untuk sudut dekoratif kartu */
.country__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  /* Warna 40% saat diam: foto tetap berwarna, hanya belum
     dominan. Tanpa grayscale supaya semua warna tetap terbaca
     dan kartu terasa hidup. Saat kursor masuk, warna naik
     ke 100% penuh. */
  opacity: 0.4;
  transition: opacity 0.3s var(--ease);
}
.card--country:hover .country__bg,
.card--country:focus-within .country__bg {
  opacity: 1;
}

/* Saat hover foto negara berubah dari hitam-putih ke warna penuh,
   teks kecil di atasnya (wilayah + "Kerja Di ...") dan "/ Bulan"
   jadi ikut tenggelam karena warnanya --muted. Beri piring gelap
   hanya saat hover atau fokus, supaya kontrasnya tetap tinggi.

   Padding selalu ada (hanya background-nya yang berubah) supaya
   teks tidak melompat posisi ketika cursor masuk kartu. */
.card--country .card__sub,
.card--country .country__pay span {
  transition: background-color 0.25s var(--ease), color 0.25s var(--ease);
}
.card--country .card__sub {
  display: inline-block;
  width: -webkit-fit-content;
  width: fit-content;
  padding: 1px 5px;
  font-size: 11px;
}
.card--country .country__pay span {
  display: inline-block;
  padding: 1px 4px;
  font-size: 10px;
}
.card--country:hover .card__sub,
.card--country:focus-within .card__sub,
.card--country:hover .country__pay span,
.card--country:focus-within .country__pay span {
  /* 50% transparan: cukup gelap untuk teks putih terbaca, tapi
     foto negara masih terlihat lewat di belakangnya. */
  background: rgb(15 23 42 / 50%);
  color: var(--white);
}
/* sisanya naik di atas foto */
.card--country > *:not(.country__bg) {
  position: relative;
  z-index: 1;
}

.country__pay {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 18px;
  font-weight: 800;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
}
.country__pay span {
  margin-left: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--muted);
}

/* ── 8e. Blok kontak (alamat, peta, WhatsApp) ──────────────── */
.contact {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}
.contact__label {
  margin-bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.contact__row {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  margin-bottom: 10px;
  background: var(--tint);
  border: 1px solid var(--line);
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease),
    transform 0.15s var(--ease);
}
.contact__row:last-child {
  margin-bottom: 0;
}
.contact__row:hover {
  background: var(--white);
  border-color: var(--blue);
  transform: translateX(3px);
}
.contact__ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 40px;
  height: 40px;
  background: var(--blue);
  color: var(--white);
}
.contact__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.contact__head {
  font-size: 15px;
  font-weight: 800;
}
.contact__value {
  font-size: 13px;
  line-height: 1.5;
  color: var(--muted);
}
.contact__hint {
  margin-top: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--blue);
}

/* ── 8e. Visi & Misi ───────────────────────────────────────── */
.vm {
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.15s var(--ease);
}
.vm:hover {
  border-color: var(--blue);
}
.vm__head {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--blue);
}
.vm__body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--muted);
}

/* ── 8f. Sinergi (logo lembaga, carousel ke kanan) ─────────── */
/* Geraknya dihitung script.js (requestAnimationFrame + translate3d),
   bukan CSS animation. CSS di sini hanya mengatur bentuk & overflow.
   Tanpa JS: overflow auto + snap, jadi logo tetap bisa digeser manual. */
.logos--carousel {
  padding: 4px 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
}
.logos--carousel.is-js {
  overflow-x: hidden;
}
.logos__track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: max-content;
  will-change: transform;
}

.card--logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
/* lebar tetap supaya jarak antar logo seragam */
.logo-tile {
  flex: none;
  width: 152px;
  scroll-snap-align: center;
}
/* garis kotak baru muncul saat hover. Selektor .logos dipakai biar
   (0,2,0) mengalahkan .card (0,1,0) — urutan di file tetap bergeser
   karena .card muncul belakangan. Bordernya tetap 1px (transparent),
   jadi tidak ada lonjakan layout waktu hover. */
.logos .card--logo {
  border-color: transparent;
}
.logo-tile__box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
}
/* <picture> tidak boleh jadi kotak sendiri. Dengan display:contents
   elemen <img> di dalamnya langsung jadi anak flex .logo-tile__box,
   persis seperti sebelum ada <picture>, sehingga max-width:100% /
   max-height:44px pada .logo-tile__img tetap mengacu ke kotak 152px
   (bukan ke picture yang lebarnya 0). */
.logo-tile__box picture {
  display: contents;
}
/* rasio logo beda-beda (2.6 - 4.1), jadi contain + tinggi tetap */
.logo-tile__img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  /* Logo Sinergi selalu tampil 100%. Logo lembaga resmi harus
     terbaca jelas tanpa hover, jadi tidak diberi transparansi
     seperti foto negara. */
  opacity: 1;
}

/* ── 8g. Blok SEO + FAQ ───────────────────────────────────── */
.seobar {
  margin-top: 28px;
  padding: 20px;
  background: var(--blue-pale);
  border: 1px solid var(--blue-line);
}
.seobar__title {
  font-size: 17px;
  margin-bottom: 8px;
}
.seobar p {
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}
.seobar strong {
  color: var(--ink);
}

.faq {
  display: flex;
  flex-direction: column;
}
.faq__item {
  padding: 16px 0;
  border-top: 1px solid var(--line);
}
.faq__item:last-child {
  border-bottom: 1px solid var(--line);
}
.faq__item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  list-style: none;
}
.faq__item summary::-webkit-details-marker {
  display: none;
}
.faq__item summary::after {
  content: '+';
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  background: var(--blue);
  color: var(--white);
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
}
.faq__item[open] summary::after {
  content: '-';
}
/* summary + tanda plus harus tetap bisa diklik walau di dalam <details> */
.faq__item summary:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.faq__item p {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--muted);
}
.faq__item strong {
  color: var(--ink);
}

/* baris kontak yang bukan tautan (mis. PIC) */
.contact__row--static {
  cursor: default;
}
.contact__row--static:hover {
  transform: none;
  border-color: var(--line);
  background: var(--tint);
}
.contact__row--static .contact__ico {
  background: var(--navy);
}

/* ── 8h. Carousel kartu negara (halaman negara) ────────────
   Pakai initLoop() yang sama dengan marquee & logo Sinergi,
   jadi geraknya dihitung requestAnimationFrame, bukan CSS. */
.countries--carousel {
  padding: 4px 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.countries--carousel.is-js {
  overflow-x: hidden;
}
.countries__track {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: max-content;
  will-change: transform;
}
.countries__track .slide {
  flex: none;
  width: 170px;
}

/* ── 8. Marquee ───────────────────────────────────────────── */
/* Gerak dihitung script.js (rAF), bukan CSS animation. */
.marquee {
  overflow-x: auto;
  padding: 14px 0;
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee.is-js {
  overflow-x: hidden;
}
.marquee__track {
  display: flex;
  width: max-content;
  will-change: transform;
}
.marquee__item {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-right: 20px;
  font-size: 15px;
  font-weight: 800;
  white-space: nowrap;
}
.marquee__item i {
  width: 6px;
  height: 6px;
  background: var(--blue);
}

/* ── 9. Section ───────────────────────────────────────────── */
.section {
  position: relative; /* menjadi containing block untuk canvas kinetic */
  padding: 44px var(--gutter) 8px;
  /* offset anchor ditangani scroll-padding-top di <html> */
  /* overflow sengaja TIDAK hidden: canvas sudah pas di inset:0, dan
     overflow:hidden akan memotong box-shadow saat .card hover */
}

/* canvas kinetic ada di setiap section berlatar putih. Elemen
   Bernilai position:static paints DI BAWAH canvas yang positioned,
   jadi konten harus dinaikkan lewat z-index:1. */
.section > *:not(.kinetic-canvas) {
  position: relative;
  z-index: 1;
}
.section--tint > *:not(.kinetic-canvas) {
  position: static;
  z-index: auto;
}
.section--tint {
  margin-top: 44px;
  padding-block: 44px;
  background: var(--tint);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}

.section__title {
  margin: 8px 0;
  font-size: 30px;
}
.section__lead {
  margin-bottom: 20px;
  font-size: 15px;
  color: var(--muted);
}

/* ── 10. Kartu, stats, langkah, kantor, form ──────────────── */
.cards {
  display: grid;
  gap: 12px;
}
.cards--2 {
  grid-template-columns: 1fr 1fr;
}
.stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.section .stack {
  gap: 12px;
}

/* sudut dekoratif, digambar lewat pseudo-element */
.card {
  position: relative;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  transition: border-color 0.15s var(--ease), transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}
.card::before,
.card::after {
  content: '';
  position: absolute;
  width: 12px;
  height: 12px;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.card::before {
  left: -1px;
  top: -1px;
  border-left: 2px solid var(--blue);
  border-top: 2px solid var(--blue);
}
.card::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
}
.card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 18px 30px -24px rgb(37 99 235 / 60%);
}
.card:hover::before,
.card:hover::after,
.card:focus-within::before,
.card:focus-within::after {
  opacity: 1;
}

.card--wide {
  padding: 20px;
}

.card__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--blue);
}
.card__title {
  margin-top: 6px;
  font-size: 21px;
}
.card__title--lead {
  margin: 0 0 6px;
  font-size: 19px;
}
.card__sub {
  font-size: 13px;
  color: var(--muted);
}
.card__body {
  font-size: 14px;
  color: var(--muted);
}

/* Label pemisah kelompok dokumen (Wanita / Pria) */
/* Daftar ringkasan di section Persyaratan.
   Hanya 3 butir pertama per kelompok yang ditampilkan; sisanya
   ada di halaman persyaratan.html. Padding tetap dialokasikan supaya
   tidak ada lompat layout saat halaman berganti. */
/* Preview dengan efek blur.
   Section Persyaratan dan Proses di beranda tidak menampilkan seluruh
   isi masih banyak. Lima baris pertama ditampilkan: tiga baris
   terbaca normal, dua baris terakhir diburamkan dan ditutup gradien
   supaya jelas masih ada isinya. Tombol "Selengkapnya" menuju halaman
   penuh masing-masing.

   Bukan memakai display:none supaya isi tetap terbaca mesin telusur
   dan tetap bisa dicari dengan Ctrl+F. */
/* Preview dengan efek blur (gaya kartu "Brief Update").
   Tiga baris pertama dibaca normal. Baris berikutnya dipotong
   max-height dan ditutup gradien, jadi tidak terlihat seperti
   kotak kosong - hasilnya satu baris yang memudar masuk, persis
   seperti referensi.

   Dipakai lewat pembungkus .blur yang memuat <ul> + tombol. */
.blur {
  margin-top: 18px;
}
.reqs--blur {
  position: relative;
  /* 3 baris penuh (~50px masing-masing) + sedikit bagian baris
     keempat yang memudar masuk.
     overflow:hidden memotong sisa baris sehingga tidak ada
     kotak kosong di bawah area buram. */
  /* Semua 5 baris ditampilkan: 2 baris terbaca penuh (2 x 69px =
     138px) + 3 baris blur. Dipakai max-height longgar supaya baris
     ke-5 ikut terlihat; kalau dipotong, hanya 1 baris blur yang
     terbaca dan kesan "3 blur" hilang. */
  max-height: 340px;
  overflow: hidden;
}
/* 5 baris: baris 1-2 terbaca, baris 3-5 blur */
.reqs--blur .req:nth-child(n+3) {
  filter: blur(3px);
  opacity: 0.45;
  user-select: none;
  pointer-events: none;
}
/* Gradien yang memudarkan baris terpotong */
.reqs--blur::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  /* Gradien tipis hanya melembutkan tepi bawah. Tidak boleh panjang,
     karena baris 3-5 memang harus tetap kelihatan sebagai teks
     blur, bukan memudar jadi putih. */
height: 40px;
  background: linear-gradient(to bottom, transparent, var(--tint) 68%);
  pointer-events: none;
}
/* Tombol selengkapnya, diberi jarak dari area buram */
/* "Selengkapnya" di bawah daftar blur: teks + panah saja, tanpa
   latar dan tanpa kotak. Rata kanan supaya tidak bersaing dengan
   daftar 5 baris di atasnya dan mudah dibaca sebagai tautan. */
.blur {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.blur__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  color: var(--blue);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s var(--ease);
}
.blur__more:hover,
.blur__more:focus-visible {
  border-bottom-color: var(--blue);
}
.blur__more:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
/* Panah bergeser sedikit saat hover, penanda bahwa tautan hidup. */
.blur__arrow {
  transition: transform 0.15s var(--ease);
}
.blur__more:hover .blur__arrow {
  transform: translateX(4px);
}



.reqgroup__label {
  margin: 22px 0 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
.reqs + .reqgroup__label {
  margin-top: 24px;
}

/* daftar persyaratan */
.reqs {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.req {
  position: relative;
  padding: 14px 16px 14px 40px;
  background: var(--tint);
  border: 1px solid var(--line);
  font-size: 14px;
}
.req::before {
  content: '';
  position: absolute;
  left: 16px;
  top: 18px;
  width: 10px;
  height: 6px;
  border-left: 2px solid var(--blue);
  border-bottom: 2px solid var(--blue);
  transform: rotate(-45deg);
}

/* langkah */
.steps {
  display: flex;
  flex-direction: column;
}
.step {
  display: flex;
  gap: 16px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
  transition: background-color 0.15s var(--ease);
}
.step:hover {
  background: var(--tint);
}
.step__num {
  flex: none;
  width: 28px;
  padding-top: 3px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
}
.step__title {
  font-size: 17px;
  letter-spacing: -0.02em;
}
/* 13 tahap proses resmi digambar sebagai garis waktu: nomor jadi
   lingkaran di tepi kiri dan saling dihubungkan garis vertikal.
   Garis dibuat oleh ::before tiap tahap, jadi tahap terakhir tidak
   punya garis menggantung di bawahnya. */
.steps--flow {
  position: relative;
  padding-left: 40px;
}
.steps--flow .step {
  position: relative;
  padding: 13px 0;
  border-top: 0;
}
.steps--flow .step:first-child {
  padding-top: 6px;
}
.steps--flow .step:last-child {
  padding-bottom: 0;
}
/* Garis penghubung di bawah tiap lingkaran, sejajar dengan pusatnya */
.steps--flow .step::before {
  content: "";
  position: absolute;
  left: -28px;
  top: 38px;
  bottom: -13px;
  width: 2px;
  background: var(--line);
}
.steps--flow .step:last-child::before {
  display: none;
}
/* Nomor tahap jadi lingkaran berlabel */
.steps--flow .step__num {
  position: absolute;
  left: -40px;
  top: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding-top: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
}
.steps--flow .step:first-child .step__num {
  top: 5px;
}
.steps--flow .step__title {
  margin: 0;
  font-size: 15px;
  line-height: 1.35;
}
.steps--flow .step:hover {
  background: var(--tint);
}

.step__desc {
  font-size: 14px;
  color: var(--muted);
}

/* kantor */
.offices {
  gap: 10px;
}
.office {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 18px;
  background: var(--white);
  border: 1px solid var(--line);
  color: inherit;
  text-align: left;
  font: inherit;
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease),
    color 0.15s var(--ease), transform 0.15s var(--ease);
}
.office:hover {
  border-color: var(--blue);
  transform: translateX(3px);
}

/* tab yang sedang dipilih = biru (menggantikan peran .office--primary
   yang dulu menempel ke Kantor Pusat) */
.office.is-active {
  background: var(--blue);
  border-color: var(--blue);
  color: var(--white);
}
.office.is-active:hover {
  background: var(--blue-dark);
}

.office__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  background: var(--blue);
  color: var(--white);
}
.office.is-active .office__icon {
  background: var(--blue-dark);
}
.office__body {
  display: flex;
  flex-direction: column;
}
.office__name {
  font-size: 17px;
  font-weight: 800;
}
.office__meta {
  font-size: 13px;
  color: var(--muted);
}
.office.is-active .office__meta {
  color: var(--blue-pale);
}

/* penanda tab aktif di sisi kiri */
.office--tab {
  position: relative;
  cursor: pointer;
}
.office--tab::after {
  content: '';
  position: absolute;
  right: 0;
  top: 50%;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  background: currentColor;
  opacity: 0;
  transition: opacity 0.15s var(--ease);
}
.office--tab.is-active::after {
  opacity: 1;
}

/* form */
/* Catatan di bawah tombol kirim: memberi tahu bahwa data formulir
   diteruskan ke WhatsApp admin, jadi pengguna tidak mengira form
   tersimpan diam-diam di server. */
.form__note {
  margin-top: 10px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  text-align: left;
}

.form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
/* Input tanggal punya lebar minimum bawaan peramban (segment
   tanggal + ikon kalender). Tanpa min-width:0 nilai itu tidak bisa
   menyusut, jadi kotak meluber ke kanan dan keluar dari kotaknya.
   min-width:0 melepas batas itu, max-width menjaga isi tetap di
   dalam kotak. */
.field__input[type="date"] {
  min-width: 0;
  max-width: 100%;
}

/* Ikon kalender tetap diklikable dan tidak lupaegas. */
.field__input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
}
.field__input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
/* Baris "Nama Lengkap 70% / Usia 30%".
   Dipakai fr, bukan persen, supaya kolom ikut scented ulang saat
   lebar form berubah dan tidak menyisakan ruang kosong. */
.field-row--nama {
  grid-template-columns: 7fr 3fr;
  gap: 12px;
}
.field__label {
  font-size: 13px;
  font-weight: 700;
}
.field__input {
  width: 100%;
  min-height: 48px;
  /* Tinggi dikunci supaya semua kolom sama tinggi. Dulu hanya
     min-height, sehingga input tanggal dan select punya tinggi
     bawaan peramban yang berbeda (52px dan 49px vs 50px) dan
     terlihat tidak rata. min-height tetap dipertahankan sebagai
     cadangan kalau font gagal dimuat. */
  height: 50px;
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  line-height: 24px;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.field__input:hover {
  border-color: var(--blue-line);
}
.field__input:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgb(37 99 235 / 18%);
}
.field__input[aria-invalid='true'] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgb(185 28 28 / 15%);
}
.field__input::placeholder {
  color: #94a3b8;
}

.field__error {
  min-height: 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--danger);
}
.field__error:empty {
  min-height: 0;
}


/* ── 11. CTA, footer, toast, animasi ───────────────────────── */
.cta {
  position: relative;
  margin: 40px var(--gutter) 0;
  padding: 36px 24px;
  background: var(--navy);
  color: var(--white);
  text-align: center;
  overflow: hidden;
}
.cta__inner {
  position: relative;
  z-index: 1;
}
.cta__title {
  margin-bottom: 10px;
  font-size: 30px;
}
.cta__lead {
  margin-bottom: 22px;
  font-size: 15px;
  color: var(--navy-soft);
}

.footer {
  padding: 32px 20px 40px;
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}
.footer__name {
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.footer__tag {
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
}

/* Daftar tautan footer (halaman negara).
   Dulu <p class="footer__legal"> tanpa aturan sama sekali, jadi
   kelima link menempel jadi satu barisan teks tanpa pemisah. */
.footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.footer__links a {
  padding: 6px 12px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}
.footer__links a:hover {
  border-color: var(--blue);
  background: var(--blue-pale);
  color: var(--blue);
}
/* halaman yang sedang dibuka */
.footer__links a[aria-current='page'] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--white);
}

/* Kembali ke atas: pil bulat di dalam footer, dengan ikon panah
   di dalam lingkaran gelap (gaya tombol pill). Bukan lagi tombol
   fixed yang mengambang di pojok kanan bawah. */
/* Kembali ke atas: pil bulat di dalam footer, ikon panah dalam
   lingkaran gelap. Rata kanan, bukan lagi tombol fixed di pojok. */
.footer__top {
  display: flex;
  justify-content: flex-end;
  margin-top: 18px;
}
.totop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 5px 18px 5px 5px;
  border-radius: 999px;
  background: #eceef2;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease);
}
.totop__ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--white);
  font-size: 15px;
  line-height: 1;
}
.totop:hover {
  background: #dfe3e9;
  transform: translateY(-2px);
}
.totop:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}
.totop[hidden] {
  display: none;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  z-index: 70;
  max-width: min(420px, calc(100vw - 32px));
  padding: 12px 16px;
  background: var(--ink);
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 18px 30px -18px rgb(15 23 42 / 70%);
  transform: translate(-50%, 8px);
  opacity: 0;
  transition: opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.toast[hidden] {
  display: none;
}
.toast.is-visible {
  opacity: 1;
  transform: translate(-50%, 0);
  pointer-events: auto;
}
.toast__link {
  color: var(--blue-track);
  font-weight: 800;
  text-decoration: underline;
}
.toast--error {
  background: var(--danger);
}

/* reveal on scroll
   .js berasal dari <head>. Kalau script.js gagal dimuat, fallback di
   <head> membuang kelas .js setelah 2,5 detik -> elemen .rv kembali
   terlihat normal, tidak pernah terkunci opacity:0. */
.js .rv {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.1, 1);
}

.js .rv.in {
  opacity: 1;
  transform: none;
}

/* keyframes */
@keyframes pd {
  0%,
  100% {
    opacity: 0.15;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(2.2);
  }
}
/* @keyframes sweep dan drift dihapus bersama .glow dan .dots. */
/* Catatan: @keyframes marq / slide-right SUDAH DIHAPUS. Pergerakan
   marquee (ke kiri) dan carousel logo (ke kanan) sekarang dihitung
   di script.js dengan requestAnimationFrame + translate3d, bukan CSS
   animation — supaya tidak bergantung pada animasi CSS sama sekali. */
@keyframes flt {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* ── 12. Responsive & preferensi pengguna ─────────────────── */


/* ══ POP-UP PROMO ══
   Muncul 2 detik setelah halaman beranda selesai dimuat. Gambar
   bisa diklik untuk buka WhatsApp, dan otomatis tertutup setelah
   30 detik kalau tidak diklik.

   Gambar promo 1.jpg berorientasi potret (468 x 625), jadi tinggi
   yang dibatasi lebih dulu, baru lebarnya. Kalau hanya lebarnya
   yang dibatasi, gambar akan terlalu tinggi untuk layar ponsel. */
.promo {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: flex;
  /* Perataan TIDAK memakai align-items/justify-content: center.
     Pada wadah flex yang bisa digulir, align-items:center membuat
     bagian atas gambar terpotong dan tidak bisa dijangkau. Memakai
     margin:auto pada .promo__wrap tetap memusatkan gambar di kiri
     kanan dan atas bawah sekaligus, DAN tetap bisa digulir kalau
     gambar lebih tinggi dari layar (penting di ponsel). */
  padding: 20px;
  background: rgb(2 6 23 / 62%);
}
.promo[hidden] {
  display: none;
}
/* .promo__wrap = wadah gambar sekaligus titik acuan posisi.

   margin:auto memusatkan gambar HORIZONTAL dan VERTIKAL di semua
   ukuran layar, desktop maupun ponsel (sudah diuji di 1920, 1440,
   1280, 768, 390, dan 360 px).

   Lebar wadah dikunci 468px. Berkas promo/1.jpg sebenarnya
   1257x1572px, jadi max-width:100% pada gambar selalu mengecilkan
   ke 468px dan proporsinya terjaga; tinggi akhirnya sekitar 585px.
   Kalau layar pendek, max-height juga ikut mengecilkan lebarnya
   secara proporsional (tidak pernah gepeng). */
.promo__wrap {
  position: relative;
  margin: auto;
  width: 468px;
  max-width: 92vw;
}
/* .promo__box sengaja TIDAK memakai display:flex.
   Pada flex, lebar gambar dihitung dari hypothetical size SEBELUM
   max-height ikutkick in, sehingga kotak tetap dianggap 468px
   padahal gambarnya jadi 414px dan akibatnya gambar terdorong ke
   kiri pada layar pendek (terukur geser 26,75px di 1280x720).
   Dengan block + margin-inline:auto, gambar dipusatkan memakai
   lebar AKHIR yang sudah memperhitungkan max-height, jadi selalu
   tepat tengah di semua ukuran layar. */
.promo__box {
  display: block;
  width: 100%;
  text-decoration: none;
  animation: promo-masuk 0.28s var(--ease);
}
/* <picture> bawaan browser adalah inline. Kalau dibiarkan, <img> di
   dalamnya jadi blok di dalam anonymous box dan margin-inline:auto
   tidak lagi memusatkan gambar terhadap .promo__box. */
.promo__box picture {
  display: block;
}
@keyframes promo-masuk {
  from { opacity: 0; transform: translateY(18px) scale(0.97); }
  to   { opacity: 1; transform: none; }
}
.promo__img {
  display: block;
  /* Memusatkan gambar secara horizontal. Karena .promo__box bukan
     flex, margin:auto memakai lebar FINAL gambar (setelah
     max-height mengecilkannya), hasilnya selalu tepat tengah. */
  margin-inline: auto;
  /* Efek naik-turun sama seperti kartu di section "Tujuan
     Penempatan" (kelas .float, keyframes flt): naik 10px lalu
     turun lagi, 4 detik satu putaran, tanpa henti. Animasi
     dipasang di gambar, sedangkan .promo__box memegang animasi
     masuk, jadi keduanya tidak saling menimpa transform.
     prefers-reduced-motion tetap mematikan semua animasi. */
  animation: flt 4s ease-in-out infinite;
  /* Proporsional, tidak pernah diregangkan atau dipotong: berkas
     sumber 1024x1536, ditampilkan maksimal 468 x 702 dan tetap
     ikut proporsional saat max-height mengecilkannya.
     max-height harus SETELAH max-width, kalau dibalik browser
     mengarang tinggi semu dari atribut dan sempat memotong gambar
     sampai selesai dimuat. */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 72vh;
  max-height: 72dvh;
  object-fit: contain;
  /* Tanpa background dan tanpa border: gambar promo ditampilkan
     polos sesuai aslinya, tidak diberi bingkai. */
  background: none;
  border: 0;
}
/* Tombol "Tanya Promo Sekarang" sudah dihapus. Gambar promo sudah
   memuat ajakan bertindak sendiri, dan tombol biru di bawahnya
   membuat kotak melebar dari ukuran gambar. */
.promo__box:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
}
/* Tombol tutup (X) sudah dihapus. Popup ditutup dengan klik pada
   area gelap di luar gambar, atau tekan tombol Escape.

   Catatan: DI SINI TIDAK ADA max-width pada .promo__box. Dulu ada
   max-width:320px yang membuat kotak gambar lebih sempit dari
   .promo__wrap, sehingga gambar nempel ke sisi kiri dan terlihat
   tidak center di ponsel. Lebar responsif sudah diurus oleh
   .promo__wrap (width 468px + max-width 92vw) dan padding 20px
   milik .promo. */
@media (max-width: 480px) {
  .promo__img {
    max-height: 62vh;
    max-height: 62dvh;
  }
}
   /* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
  .promo__box,
  .promo__img {
    animation: none;
  }
}

/* ══ HALAMAN KETENTUAN ══
   Isi kebijakan privasi: judul bernomor, daftar berurutan, blok
   kontak, dan blok tanda tangan. Lebar dibatasi supaya baris
   tetap nyaman dibaca (tidak selebar monitor).
   Catatan: seluruh deskripsi ini harus berada di dalam satu
   komentar. Kalau penutup COMMENT ada di baris pertama, baris
   berikutnya jadi teks bebas dan selector .legal ikut tercemar
   lalu dibuang oleh parser CSS. */
.legal {
  max-width: 860px;
}
.legal > *:first-child {
  margin-top: 0;
}
.legal__h2 {
  margin: 40px 0 12px;
  font-size: 20px;
  font-weight: 800;
  line-height: 1.35;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.legal__p {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}
.legal__ol {
  margin: 0 0 16px;
  padding-left: 22px;
  list-style: decimal;
}
.legal__ol li {
  margin-bottom: 10px;
  color: var(--muted);
  line-height: 1.7;
}
.legal__ol li strong {
  color: var(--ink);
}
.legal__kontak {
  margin-top: 28px;
  padding: 20px;
  background: var(--tint);
  border: 1px solid var(--line);
}
.legal__alamat {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.7;
}
.legal__alamat strong {
  color: var(--ink);
}
.legal__ttd {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.legal__nama {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.legal__nama--tebal {
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
}
.legal__jabatan {
  margin: 2px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.legal__perusahaan {
  margin: 0;
  color: var(--ink);
  font-weight: 700;
  font-size: 15px;
}
/* Link Ketentuan di footer, tepat di bawah "Hak Cipta Dilindungi". */
.footer__terms {
  margin: 6px 0 0;
  font-size: 13px;
}
.footer__terms a {
  color: var(--ink);
  font-weight: 700;
}
.footer__terms a:hover {
  color: var(--blue);
}

@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; }
}

@media (max-width: 380px) {
  :root {
    --gutter: 16px;
  }
  .brand__logo {
    max-width: 132px;
  }
  .hero__title {
    font-size: 32px;
  }
  .cards--2 {
    grid-template-columns: 1fr;
  }
  .logos .card--logo {
    border-color: transparent;
  }
  .logo-tile {
    width: 132px;
  }
  .field-row {
    grid-template-columns: 1fr;
  }
  /* Kecamatan/Kota tetap ditumpuk karena keduanya isinya panjang.
     Baris Nama/Usia TIDAK ikut ditumpuk: kolom Usia hanya
     menampung 2 angka (maks. 45), jadi 30% dari layar sempit
     masih cukup dan lebih enak diisi. */
  .field-row--nama {
    grid-template-columns: 7fr 3fr;
    gap: 10px;
  }
}

@media (min-width: 768px) {
  html {
    scroll-padding-top: 24px;
  }
  body {
    padding: 24px 0;
  }
  .page {
    border: 1px solid var(--line);
    box-shadow: 0 40px 80px -50px rgb(15 23 42 / 40%);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .badge__dot,
  .float {
    animation: none !important;
  }
  .js .rv {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .bar__fill {
    transition: none;
  }
}
/* -- FOOTER GAYA DAFTAR ------------------------------------------
   Referensi: footer Filament. Kiri-kiri (bukan rata tengah),
   logo + deskripsi + tombol Kembali Ke Atas di bagian atas, lalu
   beberapa kolom judul dengan daftar tautan/plain di bawahnya.
   Hak cipta dan Nomor Induk Berusaha menutup bagian paling bawah.

   .footer__links versi lama (kota-kotak tombol) sudah tidak dipakai;
   aturannya dibiarkanharmless kalau suatu halaman masih memakainya. */
.footer {
  padding: 44px var(--gutter) 40px;
  text-align: left;
}
.footer__brand {
  max-width: 420px;
  margin-bottom: 34px;
}
.footer__logo {
  width: auto;
  max-width: 210px;
  height: auto;
  margin-bottom: 14px;
}
.footer__tag {
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--blue);
}
.footer__desc {
  font-size: 14px;
  line-height: 1.6;
  color: var(--muted);
}

/* Tombol Kembali Ke Atas pindah ke kiri, mengikuti letaknya di
   referensi. Previously rata kanan. */
.footer__top {
  display: flex;
  justify-content: flex-start;
  margin-top: 18px;
}

/* Kolom tautan */
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}
.footer__col {
  min-width: 0;
}
.footer__h {
  margin-bottom: 12px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink);
}
.footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.footer__list a {
  display: inline-block;
  font-size: 14px;
  color: var(--muted);
  transition: color 0.15s var(--ease);
}
.footer__list a:hover {
  color: var(--blue);
}
.footer__list a[aria-current="page"] {
  color: var(--blue);
  font-weight: 700;
}

/* Hak cipta + Nomor Induk Berusaha */
.footer__base {
  margin-top: 34px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.footer__copy {
  font-size: 13px;
  color: var(--muted);
}
.footer__legal {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
}
.footer__legal span {
  color: var(--ink);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* .footer__name tidak lagi dipakai (diganti logo + deskripsi),
   tapi selector-nya dibiarkan supaya tidak ada aturan yatim. */

/* -- KOTAK KONTAK SAMA TINGGI -----------------------------------
   Di Kontak Langsung ada dua kotak: alamat (teksnya panjang, dua
   baris) dan WhatsApp (pendek). Tanpa aturan ini keduanya punya
   tinggi berbeda dan terlihat tidak rapi berdampingan.

   .contact sudah jadi grid 2 kolom pada >=1024px; align-items
   stretch menyamakan tinggi keduanya, lalu align-items:center pada
   .contact__row memusatkan isi kotak yang lebih pendek di tengah
   supaya tidak menempel ke atas. Berlaku juga di ponsel, di sana
   kotak ditumpuk vertikal dan otomatis sama tinggi denganLebarnya. */
.contact {
  align-items: stretch;
}
.contact__row {
  align-items: center;
  height: 100%;
}
.contact__body {
  flex: 1;
}

/* ================================================================
   RESPONSIF: TABLET & DESKTOP
   ----------------------------------------------------------------
   Semua angka di atas blok ini mengasumsikan layar ponsel
   (--page-max: 480px) dan ditulis untuk dibaca di layar kecil.
   Blok di bawah menaikkan ukuran ONLY pada layar yang cukup lebar,
   lalu mengubah susunan satu kolom menjadi beberapa kolom.

   Urutan breakpoint:
     380px ke bawah  -> VERY SMALL (pengecilan, sudah ada di atas)
     768px ke atas   -> TABLET
     1024px ke atas  -> TABLET LANDSCAPE / LAPTOP
     1280px ke atas  -> DESKTOP
   ================================================================ */

/* -- TABLET (>= 768px) --------------------------------------------
   Wadah dilebarkan ke 720px dan tipografi naik satu notch. Susunan
   masih satu kolom supaya urutan baca tetap sama seperti di ponsel. */
@media (min-width: 768px) {
  :root {
    --page-max: 720px;
    --gutter: 28px;
  }

  .hero {
    padding: 72px var(--gutter) 64px;
  }
  .hero__title {
    font-size: 50px;
  }
  .hero__lead {
    max-width: 54ch;
    font-size: 17px;
  }

  .section {
    padding: 56px var(--gutter) 20px;
  }
  .section--tint {
    padding-block: 56px;
  }
  .section__title {
    font-size: 36px;
  }
  .section__lead {
    max-width: 62ch;
    font-size: 16px;
  }

  .statcard {
    padding: 20px;
  }
  .statcard__row {
    font-size: 13px;
  }

  /* Kartu negara jadi 2 kolom (tetap 2 kolom di ponsel juga, tapi
     sekarang ruangnya cukup untuk dibaca tanpa mengecil). */
  .cards--2 {
    gap: 16px;
  }
  .card {
    padding: 22px;
  }
  .card__title {
    font-size: 24px;
  }
  .card__sub {
    font-size: 14px;
  }
  .country__pay {
    font-size: 20px;
  }

  /* DaftarWARE (persyaratan) dan keunggulan tetap satu kolom, tapi
     ruang leganya lebih lapang. */
  .req,
  .faq__item {
    padding: 18px 0;
  }
  .req {
    padding-left: 44px;
  }
  .perk {
    padding: 18px 0;
    font-size: 17px;
  }

  /* Timeline proses: nomornya boleh sedikit lebih besar. */
  .steps--flow {
    padding-left: 52px;
  }
  .steps--flow .step {
    padding: 17px 0;
  }
  .steps--flow .step::before {
    left: -36px;
    bottom: -17px;
  }
  .steps--flow .step__num {
    left: -52px;
    top: 14px;
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  .steps--flow .step:first-child .step__num {
    top: 5px;
  }
  .steps--flow .step__title {
    font-size: 17px;
  }
  .steps--flow .step__desc {
    font-size: 15px;
  }

  .seobar {
    padding: 26px;
  }
  .seobar__title {
    font-size: 20px;
  }

  .contact__value {
    font-size: 15px;
  }
  .form {
    gap: 18px;
  }
  .field__input,
  .field select {
    font-size: 16px;
  }

  .footer {
    padding: 48px var(--gutter) 36px;
  }
  .footer__name {
    font-size: 22px;
  }
  .marquee__item {
    font-size: 16px;
  }
}

/* -- TABLET LANDSCAPE / LAPTOP (>= 1024px) -------------------------
   Navigation berubah: tidak lagi dropdown, tapi baris menu di
   dalam header. Tombol hamburger disembunyikan karena menunya sudah
   terlihat. */
@media (min-width: 1024px) {
  :root {
    --page-max: 1000px;
    --gutter: 36px;
  }

  /* Header tetap memakai hamburger sampai layar >= 1280px (lihat blok
     DESKTOP di bawah), supaya tablet tidak berubah jadi menu baris. */

  .hero {
    padding: 96px var(--gutter) 84px;
  }
  .hero__title {
    font-size: 60px;
  }
  .hero__lead {
    font-size: 18px;
  }
  .hero__cta {
    gap: 14px;
  }

  .section {
    padding: 72px var(--gutter) 24px;
  }
  .section--tint {
    padding-block: 72px;
  }
  .section__title {
    font-size: 42px;
  }
  .section__lead {
    font-size: 17px;
  }

  .statcard {
    margin-top: 48px;
    padding: 26px;
  }
  .statcard__grid {
    gap: 16px;
  }

  /* Empat kartu negara dalam satu baris. */
  .cards--2 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* Keunggulan jadi dua kolom: 8 butir jadi 4 x 2. */
  .perks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }

  /* FAQ dua kolom supaya tidak terlalu panjang. */
  .faq {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 40px;
  }
  .faq__item {
    border-bottom: 1px solid var(--line);
  }

  /* Kontak: baris became dua kolom. */
  .contact {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 24px;
  }
  .contact__label {
    grid-column: 1 / -1;
  }

  .seobar {
    padding: 32px;
  }

  /* Logo lembaga lebih besar karena ruang desktop. */
  .logo-tile {
    width: 190px;
  }
  .logo-tile__box {
    height: 56px;
  }

  .countries__track .slide {
    width: 200px;
  }

  .footer {
    padding: 64px var(--gutter) 48px;
  }
  .footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px;
  }
  .footer__brand {
    max-width: 520px;
  }
}

/* -- DESKTOP (>= 1280px) -------------------------------------------
   Wadah maksimum 1180px. Beberapa bagian masih dibiarkan satu kolom
   (timeline proses dan daftar syarat) karena urutannya penting dan
   membaca mendatar justru membingungkan. */
/* -- MENU DROPDOWN CADANGAN ----------------------------------------
     script.js mengukur apakah 9 item menu benar-benar muat di header.
     Kalau tidak muat, ia menandai <html data-nav="dropdown">, dan
     aturan di bawah mengembalikan header ke gaya ponsel: tombol
     hamburger muncul, panel menu tertutup sampai ditekan. */
[data-nav="dropdown"] .topbar__link--btn {
  display: flex;
}
[data-nav="dropdown"] .navpanel {
  display: none;
  overflow: visible;
}
[data-nav="dropdown"] .navpanel:not([hidden]) {
  display: flex;
}

@media (min-width: 1280px) {

  /* -- HEADER DESKTOP --------------------------------------------
     Mengikuti referensi Filament: logo di kiri, menu baris di
     tengah, kontak di kanan. TIDAK ada GitHub stars dan TIDAK ada
     kolom pencarian, sesuai permintaan.

     Grid area dipakai karena urutan anak di HTML adalah
     [hamburger, brand, IBU DEWI, navpanel]; area memaksa urutan
     tampilan jadi brand -> nav -> IBU DEWI tanpa mengubah HTML. */
  /* Urutan desktop: logo | IBU DEWI | menu.
     IBU DEWI pindah ke sebelah kanan logo supaya kontak mudah
     dijangkau mata, dan menu sisanya jadi satu blok panjang di
     sisi kanan. Kolom nav memakai 1fr supaya blok itu menempel
     sampai tepi kanan header. */
  .topbar {
    grid-template-columns: auto auto minmax(0, 1fr);
    grid-template-areas: "brand wa nav";
    align-items: stretch;
    min-height: 68px;
  }
  .topbar__link--btn {
    display: none;
  }
  .brand {
    grid-area: brand;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    /* Tanpa border sama sekali. Semua pembatas antar bagian
       header digambar oleh kotak menu (navpanel) dan kolom IBU
       DEWI, jadi tidak ada garis yang bisa berimpit. */
    border: 0;
  }
  /* width/height auto + max-height menjaga rasio logo tetap 3:1.
     Aturan dasar memakai width:100%, jadi di sini ditimpa agar
     logo tidak ikut melar saat kotak header bertambah tinggi. */
  .brand__logo {
    width: auto;
    height: auto;
/* Logo baru 2174x445 (rasio 4.89:1), jauh lebih lebar dari
       logo lama 3:1. Pada 168px lebarnya tinggi hanya 34px,
       jadi max-height dinaikkan ke 44px supaya tidak memaksa
       pemotongan yang membuat logo jadi kecil. */
    max-width: 186px;
    max-height: 44px;
    object-fit: contain;
  }
  .topbar__link--wa {
    grid-area: wa;
    display: flex;
    align-items: center;
    min-height: 68px;
    padding: 0 22px;
    border-left: 1px solid var(--line);
    border-right: 0;
    /* Label "Ibu Dewi" memakai Poppins Bold kapital supaya terbaca
       jelas sebagai nama penanggung jawab, beda dari daftar menu
       yang memakai Plus Jakarta Sans. */
    font-family: var(--font-poppins);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 15px;
  }

  /* Penting: aturan dasar ".navpanel[hidden] { display: none }" punya
   spesifisitas lebih tinggi daripada ".navpanel" biasa, jadi atribut
   hidden dari HTML harus ditimpa dengan selektor yang sama persis.
   Atributnya tetap dibuang lewat JS (lihat menuNavDesktop di script.js)
   supaya pembaca layar juga tidak menyembunyikan menu ini. */
  .navpanel[hidden] {
    display: flex;
  }

  /* Menu jadi SATU kesatuan, bukan kotak-kotak terpisah.
     Hanya garis paling kiri navpanel yang digambar; antar item
     tidak ada garis sama sekali. Kontur kotak depan/atas/bawah
     berasal dari .topbar, jadi menyatu dengan baris header. */
.navpanel {
    grid-area: nav;
    display: flex;
    position: static;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    min-width: 0;
    /* Padding 0 semua sisi: navRatakanSel() membagi ruang nav tepat
       penuh ke sel-sel, jadi padding hanya akan menyisakan celah
       putih di sisi kanan. */
    padding: 0;
    border-bottom: 0;
    border-right: 0;
    /* Satu-satunya pembatas: sisi kiri blok menu. */
    border-left: 1px solid var(--line);
    /* overflow:hidden membuat scrollWidth > clientWidth detectable,
       sehingga JS bisa tahu menu ini tidak muat lalu beralih ke
       dropdown. */
    overflow: hidden;
  }
  .navpanel__item {
    /* Lebar mengikuti isi teks lalu dibulatkan oleh navRatakanSel().
       Kalau dipaksa flex:1, label panjang seperti "Tujuan
       Penempatan" tidak muat dan sel jadi tidak sama tinggi. */
    flex: 0 0 auto;
    /* min-width:auto membuat flex item melebar mengikuti isi,
       sehingga kotak ikut ikut membesar saat teks di-zoom.
       Ditimpa 0 supaya lebar benar-benar terkunci di px. */
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    padding: 0 18px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    /* Tanpa border dan tanpa latar sendiri: seluruh item menu
       menyatu jadi satu blok. Pembatas antar item sengaja
       dihapus supaya tidak ada kotak-kotak terpisah. */
    border: 0;
    background: transparent;
    /* Siku-siku, sama seperti kartu: radius 0 dipakai konsisten
       di seluruh desain ini. */
    border-radius: 0;
    transition: color 0.15s var(--ease), background-color 0.15s var(--ease);
  }
  /* Hover menu: kotak tetap ukuran aslinya, hanya teks di dalam
     yang membesar. Karena itu label dibungkus span supaya
     transform tidak ikut meniscalakan kotak. */
  .navpanel__label {
    display: inline-block;
    transform-origin: center;
    transition: transform 0.15s var(--ease);
  }
  .navpanel__item:hover {
    color: var(--blue);
    /* Latar hanya saat hover, sebagai penanda kursor. Kalau selalu
       diisi, tiap item terlihat kotak sendiri lagi. */
    background: var(--blue-pale);
  }
  /* 1.06, bukan 1.09: pada 1280px (lebar nav paling sempit = 1008px)
     label "Tujuan Penempatan" jadi 132px dan exceeds kotak isinya
     130px, sehingga teks menyentuh garis pembatas. 1.06 aman di
     semua lebar. */
  .navpanel__item:hover .navpanel__label {
    transform: scale(1.06);
  }
  .navpanel__item:active .navpanel__label {
    transform: scale(0.98);
  }
  /* Penanda halaman aktif: garis bawah biru setebal 2px.
     Dipakai bukan box-shadow supaya tidak menambah tinggi sel dan
     tidak membuat baris menu bergeser saat pindah halaman. */
.navpanel__item[aria-current="page"] {
    color: var(--blue);
    font-weight: 700;
    background: var(--blue-pale);
    box-shadow: inset 0 -2px 0 var(--blue);
  }
  /* Tombol Masuk: satu-satunya item berwarna, diletakkan paling
     kanan sebagai penutup blok menu. Padding vertikal 0 supaya
     teks tetap setengah dengan teks menu lain. */
  .navpanel__item--cta {
    margin-left: auto;
    padding: 0 22px;
    color: var(--white);
    background: var(--blue);
    font-weight: 700;
  }
  .navpanel__item--cta:hover {
    color: var(--white);
    background: var(--blue-dark);
  }
  :root {
    /* 1360px memberi ruang cukup untuk 9 item menu tanpa ada yang
       terpotong. Pada viewport di bawah 1360px, .page mengikuti lebar
       layar sehingga nav tetap muat. */
    --page-max: 1360px;
    --gutter: 44px;
  }

  .hero {
    padding: 120px var(--gutter) 100px;
  }
  .hero__title {
    font-size: 68px;
  }
  .hero__lead {
    font-size: 19px;
  }

  .section {
    padding: 88px var(--gutter) 28px;
  }
  .section--tint {
    padding-block: 88px;
  }
  .section__title {
    font-size: 46px;
  }

  /* Kartu negara tetap 2 kolom supaya fotonya cukup besar; yang
     tersisa ruang dipakai kartu jadi lebih lega. */
  .cards--2 {
    gap: 20px;
  }
  .card {
    padding: 26px;
  }

  .logo-tile {
    width: 210px;
  }
  .logo-tile__box {
    height: 62px;
  }

  /* Hanya timeline yang dibatasi lebar supaya alurnya tetap
     mudah dibaca. Daftar blur (.reqs) dibiarkan penuh agar
     tidak terlihat sempit di desktop. */
  .steps--flow {
    max-width: 860px;
  }

  .footer {
    padding: 80px var(--gutter) 56px;
  }
  .footer__name {
    font-size: 26px;
  }
}

/* Tablet & desktop tidak memakai efek "tilt" kartu, dan hover
   tidak boleh menyisakan state seperti di layar sentuh. */
@media (hover: none) {
  .card:hover {
    transform: none;
  }
}