/* ============================================================
   ZEIN GROUP — Sistem visual "Papan Keberangkatan"
   Bahasa desain diambil dari dokumen perjalanan sungguhan:
   kode layanan, papan jadwal, kolom tabular, dan rel kupon tiket.
   Ditulis dengan properti logis supaya siap dibalik ke Arab (RTL).
   ============================================================ */

/* ---------- HURUF (di-host sendiri, tanpa panggilan pihak ketiga) ---------- */
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/archivo-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Sans'; src:url('../fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'IBM Plex Mono'; src:url('../fonts/ibm-plex-mono-latin-600-normal.woff2') format('woff2'); font-weight:600; font-style:normal; font-display:swap; }

/* ---------- TOKEN ---------- */
:root {
  --paper: #FFFFFF;
  --ground: #F6F8FB;
  --ground-2: #E3E9F0;

  --ink: #0D1F31;
  --ink-2: #405B76;
  --ink-3: #6E869F;
  --ink-4: #9FB2C4;

  --hair: rgba(13,31,49,.075);
  --hair-2: rgba(13,31,49,.13);
  --hair-solid: #E7ECF2;

  --accent: #0474FC;
  --accent-2: #0356C4;
  --accent-wash: #E8F2FF;
  --stamp: #B23A2F;
  --wa: #128C4A;

  /* Satu keluarga korporat untuk teks, satu grotesque untuk judul, satu mono untuk data */
  --display: 'Archivo', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --ui: 'Archivo', 'IBM Plex Sans', ui-sans-serif, system-ui, sans-serif;
  --body: 'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  /* Radius korporat: tegas dan kecil. Sudut besar membaca sebagai
     aplikasi konsumen, bukan perusahaan. */
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 10px; --r-xl: 12px; --r-full: 999px;

  /* Bayangan berlapis — satu keluarga, dipakai konsisten */
  --sh-1: 0 1px 2px rgba(13,31,49,.05);
  --sh-2: 0 1px 3px rgba(13,31,49,.05), 0 6px 16px -6px rgba(13,31,49,.10);
  --sh-3: 0 2px 6px rgba(13,31,49,.05), 0 18px 40px -14px rgba(13,31,49,.18);
  --sh-4: 0 4px 10px rgba(13,31,49,.05), 0 32px 64px -20px rgba(13,31,49,.24);
  --sh-btn: 0 1px 2px rgba(13,31,49,.12), 0 4px 10px -3px rgba(13,31,49,.18);
  --ring: 0 0 0 1px rgba(13,31,49,.07);

  --shell: 1240px;
  --pad: clamp(1.25rem, .6rem + 2.6vw, 3rem);
  --sec: clamp(1.9rem, 1.3rem + 2.4vw, 3rem);

  --ease: cubic-bezier(.22, 1, .36, 1);
  --t-fast: 140ms; --t: 300ms;

  --header-h: 66px;

  color-scheme: light;
}

/* ---------- RESET ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }

body {
  font-family: var(--body);
  background: #FCFCFE;
  color: var(--ink-2);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Latar: satu bidang cahaya biru-tosca yang lembut di kepala halaman. */
/* body diberi position:relative supaya cahaya ini diukur terhadap
   badan halaman, dan tingginya dibatasi tinggi badan: di halaman pendek
   (lacak, 404) cahaya 1100px pernah memanjangkan gulir 160px melewati
   kaki halaman — layar kosong di bawah kaki. */
body { position: relative; }
body::before {
  content: '';
  position: absolute; inset-block-start: 0; inset-inline: 0;
  block-size: 1100px; max-block-size: 100%;
  z-index: -2; pointer-events: none;
  background:
    radial-gradient(760px 620px at 78% 6%, rgba(4,116,252,.20), transparent 68%),
    radial-gradient(680px 560px at 92% 34%, rgba(140,212,252,.28), transparent 68%),
    radial-gradient(560px 460px at 6% 2%, rgba(4,116,252,.07), transparent 66%);
  filter: blur(16px);
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: #D3E5F9; color: var(--accent-2); }

/* ---------- TIPOGRAFI ---------- */
h1, h2 {
  font-family: var(--display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -.034em;
  line-height: 1.05;
  text-wrap: balance;
}
h3, h4 { font-family: var(--ui); color: var(--ink); font-weight: 600; letter-spacing: -.022em; line-height: 1.2; }

.d1 { font-size: clamp(2.25rem, 1.5rem + 3.2vw, 3.5rem); line-height: 1; letter-spacing: -.042em; }
.d2 { font-size: clamp(1.7rem, 1.3rem + 1.8vw, 2.5rem); line-height: 1.04; letter-spacing: -.038em; }
.d3 { font-size: clamp(1.35rem, 1.15rem + .9vw, 1.75rem); letter-spacing: -.03em; }
.d4 { font-family: var(--ui); font-size: 1.0625rem; letter-spacing: -.016em; font-weight: 600; }
h1 em, h2 em { font-style: normal; color: var(--accent-2); }

/* Pernyataan besar sesekali — bukan judul bagian biasa */

.lede { font-size: clamp(1rem, .95rem + .35vw, 1.125rem); color: var(--ink-2); line-height: 1.68; max-width: 56ch; }
.body-text { color: var(--ink-2); max-width: 66ch; }
.body-text p + p { margin-block-start: 1.05rem; }
.muted { color: var(--ink-3); }
.dim { color: var(--ink-4); }
.small { font-size: .875rem; }
.tiny { font-size: .78rem; }

/* Huruf mono untuk semua yang bersifat data: kode, angka, label */
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

.label {
  font-family: var(--mono);
  font-size: .735rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--ink-4);
  display: inline-block;
}
/* Pil hanya dipakai kalau memang berdiri sendiri, bukan penanda tiap bagian */
.pill {
  font-family: var(--mono); font-size: .735rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: .7rem;
  padding: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
}
.pill::before {
  content: ''; inline-size: 28px; block-size: 1px; border-radius: 0;
  background: var(--accent); flex: none;
}
.label-accent { color: var(--accent); }

/* Kode layanan — dipakai sungguhan sebagai penanda lini, bukan hiasan */
.code {
  font-family: var(--mono);
  font-size: .735rem; font-weight: 600; letter-spacing: .12em;
  color: var(--ink-3);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-xs);
  padding: .24rem .44rem;
  display: inline-flex; align-items: center; justify-content: center;
  min-inline-size: 42px; block-size: 22px;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--t-fast) linear, border-color var(--t-fast) linear, background-color var(--t-fast) linear;
}
.code-solid { background: var(--ink); border-color: var(--ink); color: #fff; }
.code-accent { color: var(--accent); border-color: #B4D9FE; background: var(--accent-wash); }

/* Permukaan dasar — satu perlakuan yang dipakai ulang di seluruh situs */
.surface {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
}

/* ---------- KERANGKA ---------- */
.shell { width: 100%; max-width: var(--shell); margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec); }
.section-sm { padding-block: clamp(1.6rem, 1.15rem + 1.8vw, 2.6rem); }
.ground { background: var(--ground); }
.rule { block-size: 1px; background: var(--hair); border: 0; }

/* Kepala bagian: baris jadwal — label mono, judul, keterangan */
/* Ragam 1 — penanda tipis di atas garis, judul besar */
.sec-head { margin-block-end: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.sec-head .label { display: block; margin-block-end: 1.1rem; padding-block-start: .85rem; border-block-start: 1px solid var(--hair); }
.sec-head h2 { max-width: 24ch; }
.sec-head p { margin-block-start: 1rem; }
.sec-head-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); gap: clamp(1.5rem, 1rem + 2.4vw, 4rem); align-items: end; }
@media (max-width: 860px) { .sec-head-row { grid-template-columns: 1fr; align-items: start; } .sec-head h2 { max-width: none; } }

/* Ragam 2 — judul menjorok, tanpa label sama sekali */
.sec-head-indent { margin-block-end: clamp(1.4rem, 1rem + 1.5vw, 2.2rem); }
/* 16ch memaksa judul empat kata patah jadi tiga baris pendek dengan
   dua pertiga halaman kosong di kanan. */
.sec-head-indent h2 { max-width: 26ch; }
.sec-head-indent p { margin-block-start: 1.1rem; max-width: 46ch; color: var(--ink-3); }

/* Ragam 3 — judul di tengah, dipakai maksimal sekali per halaman */
.sec-head-center { text-align: center; max-width: 46rem; margin-inline: auto; margin-block-end: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.sec-head-center p { margin-block-start: 1.1rem; color: var(--ink-3); }

/* Pita gelap penuh lebar — pemecah irama, bukan kartu */
.bleed {
  position: relative; overflow: hidden;
  background: #0B1B2E;
  background-image:
    radial-gradient(1200px 800px at 78% -20%, rgba(4,116,252,.42), transparent 64%),
    radial-gradient(900px 700px at 6% 116%, rgba(140,212,252,.14), transparent 66%);
  color: #9FB8D2;
  padding-block: clamp(2.75rem, 1.9rem + 3.6vw, 4.75rem);
  margin-block: 0;
}
.bleed h2, .bleed h3 { color: #fff; }
.bleed .label { color: rgba(255,255,255,.42); border-block-start-color: rgba(255,255,255,.16); }
.bleed em { color: #8CD4FC; }
.bleed .muted { color: #93AFCB; }

/* ---------- TOMBOL ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .82rem 1.45rem; border-radius: var(--r-sm);
  font-family: var(--body); font-weight: 600; font-size: 0.9375rem; letter-spacing: -.006em;
  border: 1px solid var(--hair-2); background: var(--paper); color: var(--ink);
  box-shadow: var(--sh-1);
  transition: background-color var(--t-fast) linear, border-color var(--t-fast) linear,
              color var(--t-fast) linear, transform 200ms var(--ease), box-shadow 260ms var(--ease);
  white-space: nowrap; -webkit-tap-highlight-color: transparent;
}
.btn:hover { transform: translateY(-1.5px); box-shadow: var(--sh-2); }
.btn:active { transform: translateY(0); box-shadow: var(--sh-1); }
.btn-primary { background: linear-gradient(180deg, #22415F 0%, #0D1F31 100%); border-color: #0D1F31; color: #fff; box-shadow: var(--sh-btn); }
.btn-primary:hover { background: linear-gradient(180deg, #2A5480 0%, #10283E 100%); box-shadow: var(--sh-3); }
.btn-accent { background: linear-gradient(180deg, #1F86FF 0%, #0B62C4 100%); border-color: #0356C4; color: #fff; box-shadow: var(--sh-btn); }
.btn-accent:hover { background: linear-gradient(180deg, #3A96FF 0%, #0474FC 100%); }
/* Kanal WhatsApp ditandai lambang dan kata, bukan hijau jenuh.
   Warna latar tetap milik merek supaya satu halaman tidak berebut perhatian. */
.btn-wa { background: linear-gradient(180deg, #1F86FF 0%, #0B62C4 100%); border-color: #0356C4; color: #fff; box-shadow: var(--sh-btn); }
.btn-wa:hover { background: linear-gradient(180deg, #3A96FF 0%, #0474FC 100%); }
.btn-ghost { background: rgba(255,255,255,.88); }
.btn-ghost:hover { border-color: var(--hair-2); background: var(--paper); }
.btn-lg { padding: 1.02rem 1.8rem; font-size: 1rem; }
.btn-sm { padding: .58rem 1.05rem; font-size: .875rem; }
.header-cta .btn { padding-block: .6rem; }
.btn-block { inline-size: 100%; }
.btn .ico { inline-size: 17px; block-size: 17px; flex: none; }
.btn-arrow .ico-arrow { transition: transform var(--t) var(--ease); }
.btn-arrow:hover .ico-arrow { transform: translateX(4px); }
[dir='rtl'] .btn-arrow .ico-arrow { transform: scaleX(-1); }
[dir='rtl'] .btn-arrow:hover .ico-arrow { transform: scaleX(-1) translateX(4px); }

.tlink {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 600; font-size: 0.9375rem; color: var(--ink);
  padding-block-end: 3px;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat; background-position: 0 100%; background-size: 0 1.5px;
  transition: background-size 420ms var(--ease), color var(--t-fast) linear;
}
.tlink:hover { color: var(--accent); background-size: 100% 1.5px; }
.tlink svg { inline-size: 15px; block-size: 15px; transition: transform var(--t) var(--ease); }
.tlink:hover svg { transform: translateX(3px); }
[dir='rtl'] .tlink { background-position: 100% 100%; }
[dir='rtl'] .tlink svg { transform: scaleX(-1); }

/* =====================================================================
   KEPALA HALAMAN

   Selebar layar, menempel di tepi atas, satu garis rambut di bawahnya.

   Sebelumnya bilah ini berubah jadi kapsul melengkung mengambang saat
   digulir: sudut 999px, kaca buram, bayangan lebar, dan lebarnya 1240
   dari 1440 sehingga menggantung di tengah. Bentuk itu tidak dipakai
   satu pun dari dua puluh situs perjalanan besar yang diperiksa — ia
   datang dari pustaka komponen siap pakai, dan justru karena itu ia
   sekarang terbaca sebagai "situs rakitan".

   Yang menempel di tepi atas terbaca sebagai lembaga; yang mengambang
   terbaca sebagai halaman promosi. Untuk usaha yang mengurus visa dan
   pembayaran orang lain, yang pertama lebih berharga.
   ===================================================================== */
.site-header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  block-size: var(--header-h); display: flex; align-items: center;
  background: transparent;
  border-block-end: 1px solid transparent;
  transition: background-color 200ms linear, border-color 200ms linear;
}
/* Menempel di atas isi yang tergulir: latar padat, bukan kaca buram.
   Kaca buram di belakang teks kecil menurunkan keterbacaannya, dan
   backdrop-filter memaksa lapisan komposit sendiri di tiap gulir. */
.site-header.is-stuck {
  background: var(--paper);
  border-block-end-color: var(--hair-2);
}
.header-inner {
  inline-size: 100%; display: flex; align-items: center;
  justify-content: space-between; gap: 1rem;
}

/* Tautan lewati: pertama dalam urutan Tab, tersembunyi sampai difokus.
   Tanpa ini, pemakai papan ketik melewati seluruh menu di tiap halaman
   sebelum sampai ke isi. */
.lewati {
  position: absolute; inset-block-start: -100%; inset-inline-start: 1rem;
  z-index: 200; padding: .7rem 1.1rem; border-radius: var(--r-sm);
  background: var(--ink); color: #fff; font-weight: 600; font-size: .9rem;
}
.lewati:focus { inset-block-start: .75rem; }

.brand { display: inline-flex; align-items: center; gap: .6rem; flex: none; }
.brand-mark { display: flex; }
.brand-mark svg, .brand-mark .merek-logo { block-size: 21px; inline-size: auto; max-inline-size: 140px; object-fit: contain; }
.brand-name { display: block; font-family: var(--ui); font-weight: 700; font-size: 1rem; letter-spacing: -.03em; color: var(--ink); line-height: 1.15; }

.nav { display: flex; align-items: center; }
.nav { gap: .15rem; }
/* Selektornya melayani <a> dan <button> sekaligus: pemicu menu layanan
   sekarang tombol, karena halaman yang dulu ditujunya sudah tidak ada.
   Peramban memberi <button> latar, bingkai, dan huruf sendiri — ketiganya
   harus dinolkan di sini, kalau tidak satu butir menu terlihat berbeda
   dari yang lain. */
.nav-link {
  position: relative; padding: .55rem .8rem; margin-inline: 0;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; text-align: start;
  min-block-size: 40px; border-radius: var(--r-sm);
  font-size: 0.9375rem; font-weight: 500; color: var(--ink-2);
  transition: color var(--t-fast) linear, background-color var(--t-fast) linear;
  display: inline-flex; align-items: center; gap: .28rem;
}
.nav-link:hover { color: var(--ink); background: var(--ground); }
/* Halaman yang sedang dibuka ditandai TIGA hal — warna, tebal huruf,
   dan garis di bawahnya — bukan latar pil berwarna muda. Warna saja
   melanggar WCAG 1.4.1; latar pil muda tidak lolos rasio 3:1 sebagai
   penanda; dan bentuk pil di web sudah berarti "tombol", bukan
   "halaman ini". */
.nav-link.is-active { color: var(--accent-2); font-weight: 600; }
.nav-link.is-active::after {
  content: ""; position: absolute; inset-inline: .8rem;
  inset-block-end: 2px; block-size: 2px; border-radius: 2px;
  background: var(--accent);
}
.nav-link .caret { inline-size: 13px; block-size: 13px; opacity: .5; transition: transform var(--t) var(--ease); }
.has-mega:hover .caret { transform: rotate(180deg); }

.header-cta { display: flex; align-items: center; gap: .55rem; flex: none; }

/* =====================================================================
   MENU LAYANAN DESKTOP

   Tiga cacat yang diperbaiki sekaligus:

   1. JARAK MATI. Panelnya dulu dimulai 14px di bawah pemicunya, dan di
      celah itu kursor kehilangan hover — menunya tertutup persis saat
      orang bergerak menuju isinya. Sekarang panel menempel di bawah
      pemicu, dan celah visualnya dibuat dengan padding tembus pandang
      di dalam panel, bukan dengan ruang kosong di luarnya.

   2. TERLALU LAMBAT DAN TANPA JEDA NIAT. Dulu terbuka seketika saat
      kursor lewat, lalu memudar 300ms. Terbaliknya yang benar: tunggu
      dulu 220ms untuk memastikan orangnya memang menuju ke sana (jeda
      itu diatur JS), lalu muncul dalam 140ms. Menutupnya diberi jeda
      400ms supaya kursor boleh memotong diagonal.

   3. HANYA HOVER. Sekarang bisa dibuka dengan klik dan Enter, ditutup
      dengan Esc, dan keadaannya diumumkan lewat aria-expanded.
   ===================================================================== */
.has-mega { position: relative; }
.mega {
  position: absolute; inset-block-start: 100%; inset-inline-start: 50%;
  inline-size: max-content; max-inline-size: min(680px, 92vw);
  margin-block-start: 0;
  padding: .9rem .9rem .5rem;
  background: var(--paper); border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(13,31,49,.05), 0 26px 60px -28px rgba(13,31,49,.40);
  opacity: 0; visibility: hidden;
  transform: translate(-50%, -4px);
  transition: opacity 140ms ease-out, transform 140ms ease-out, visibility 140ms;
}
/* Celah visual antara pemicu dan panel dibuat di dalam kotak panel,
   supaya kursor tidak pernah melewati daerah tanpa hover. */
.mega::before {
  content: ""; position: absolute; inset-block-end: 100%;
  inset-inline: 0; block-size: 12px;
}
[dir='rtl'] .mega { transform: translate(50%, -4px); }
.has-mega.is-buka .mega { opacity: 1; visibility: visible; transform: translate(-50%, 10px); }
[dir='rtl'] .has-mega.is-buka .mega { transform: translate(50%, 10px); }
@media (prefers-reduced-motion: reduce) { .mega { transition: opacity 1ms linear, visibility 1ms; } }

.mega-petak { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 .5rem; }
.mega-kolom { min-inline-size: 12.5rem; }
.mega-judul {
  font-family: var(--body); font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4);
  padding-inline: .6rem; margin-block-end: .35rem;
}
.mega-item {
  display: flex; align-items: flex-start; gap: .65rem;
  padding: .55rem .6rem; border-radius: var(--r-sm);
  transition: background-color 120ms linear;
}
.mega-ikon {
  flex: none; align-self: flex-start;
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.1rem; block-size: 2.1rem;
  border-radius: var(--r-sm); background: var(--ground); color: var(--ink-2);
  transition: background var(--t-fast) linear, color var(--t-fast) linear;
}
.mega-txt { min-inline-size: 0; }
.mega-t { display: block; font-weight: 600; font-size: .875rem; color: var(--ink); line-height: 1.3; }
.mega-d {
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; font-size: .765rem; color: var(--ink-3);
  line-height: 1.45; margin-block-start: 2px;
}
.mega-item:hover { background: var(--ground); }
.mega-item:hover .mega-ikon { background: var(--accent-wash); color: var(--accent-2); }
.mega-item.is-active { background: var(--accent-wash); }
.mega-item.is-active .mega-ikon { background: var(--accent); color: #fff; }
.mega-item.is-active .mega-t { color: var(--accent-2); }

/* Satu tautan ke halaman layanan, dan halaman itu BUKAN daftar yang
   sama sekali lagi — ia memilah kedelapan layanan menurut jenis
   perjalanan. Kalimatnya menyebut pekerjaan halamannya, bukan namanya,
   supaya jelas ia bukan pengulangan menu ini. */
.mega-kaki {
  display: flex; align-items: center; gap: .45rem;
  margin-block-start: .6rem; padding: .7rem .6rem .5rem;
  border-block-start: 1px solid var(--hair);
  font-size: .84rem; font-weight: 600; color: var(--accent-2);
}
.mega-kaki-a { inline-size: 14px; block-size: 14px; transition: transform 160ms ease-out; }
.mega-kaki:hover .mega-kaki-a { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) { .mega-kaki:hover .mega-kaki-a { transform: none; } }

/* Tiga garis ini disusun kolom lentur dengan jarak tetap. Dengan grid,
   barisnya diregangkan mengisi kotak sehingga jaraknya jadi 13,6px —
   sementara transformasi silangnya menggeser 6,6px, jadi kedua garis
   tidak pernah bertemu dan yang muncul tanda ">" bukan "X". */
.burger {
  inline-size: 42px; block-size: 42px; border-radius: var(--r-sm);
  border: 1px solid var(--hair-2); background: var(--paper);
  display: none; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; -webkit-tap-highlight-color: transparent;
}
.burger span { display: block; inline-size: 17px; block-size: 1.6px; border-radius: 2px; background: var(--ink); transition: transform 320ms var(--ease), opacity var(--t-fast) linear; }
body.menu-open .burger span:nth-child(1) { transform: translateY(6.6px) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { opacity: 0; }
body.menu-open .burger span:nth-child(3) { transform: translateY(-6.6px) rotate(-45deg); }
@media (max-width: 1080px) { .nav, .header-cta .btn-ghost { display: none; } .burger { display: flex; } }
/* Tombol WhatsApp di kepala halaman: ada di layar lebar, TIDAK ada di
   ponsel. Aturan ini sudah dua kali berbalik, jadi ditulis sekali di
   sini dengan sebabnya, dan yang mencabutnya nanti tahu apa yang ia
   cabut.

   Dulu ia disembunyikan di ponsel. Lalu ditampilkan kembali, karena
   setelah bilah mengambang dibuang ia satu-satunya jalan cepat ke
   WhatsApp — dan kepala halaman memang tempat yang bekerja: ada sejak
   halaman dibuka, tidak muncul-hilang, tidak menutupi satu baris pun.

   Sekarang disembunyikan lagi, dan sebabnya berbeda dari yang pertama:
   sejak bilah tab ada (bagian 16), tab "Bantuan" menuju WhatsApp yang
   sama dan selalu terlihat — jadi syarat "terjangkau tanpa menggulir
   dan tanpa membuka menu" dipenuhi lebih baik, bukan dilonggarkan.
   Kotak navy 44px di sudut kanan atas adalah benda paling gelap di
   layar pertama dan menenggelamkan nama perusahaannya sendiri.

   Aturan ponselnya ada di blok "KEPALA, JUDUL, DAN KAKI DI PONSEL". */

/* ============================================================
   KEPALA HALAMAN DI PONSEL — BILAH RATA, BUKAN KAPSUL
   Kapsul melayang bekerja di layar lebar: ia mengambang di tengah
   ruang kosong kiri-kanan. Di ponsel tidak ada ruang itu, jadi
   kapsulnya memenuhi lebar layar dan terbaca sebagai gelembung
   dengan tombol berkotak sendiri di dalamnya — dua bingkai bertumpuk.
   Aplikasi tidak melakukan itu: bilah atasnya rata, menempel di tepi,
   dipisahkan dari isi hanya oleh satu garis rambut.
   ============================================================ */
@media (max-width: 780px) {
  /* Tanpa backdrop-filter: buram di kepala yang menempel dihitung ulang
     tiap piksel gulir, dan di ponsel itu terasa sebagai gulir yang
     tersendat. Latar putih hampir pekat cukup. */
  .site-header.is-stuck {
    background: var(--paper);
    border-block-end-color: var(--hair-2);
  }
  .site-header.is-stuck .header-inner {
    background: none; box-shadow: none; border-color: transparent;
    padding: 0; border-radius: 0;
  }
}

/* ---------- LEMBAR MENU PONSEL ---------- */
.scrim { position: fixed; inset: 0; z-index: 119; background: rgba(13,31,49,.42); opacity: 0; visibility: hidden; transition: opacity var(--t) linear, visibility var(--t); }
body.menu-open .scrim { opacity: 1; visibility: visible; }
/* Lembar menu sekarang menutupi seluruh layar, termasuk kepala halaman.
   Jadi kepala halaman tidak perlu alas lagi — dan tidak boleh menerima
   Tab, karena ia berada di balik panel yang sedang terbuka. */
body.menu-open .site-header { visibility: hidden; }
body.menu-open .header-inner { background: transparent; box-shadow: none; border-color: transparent; }
body.menu-open { overflow: hidden; }

/* =====================================================================
   LEMBAR MENU PONSEL

   Tinggi penuh, bukan lembar separuh layar.

   Lembar separuh yang menyisakan halaman terlihat di belakangnya adalah
   bentuk modal aplikasi, dan di situs ia terbaca sebagai sesuatu yang
   dipinjam. Yang naik dari tepi bawah tapi menutup seluruh layar
   mempertahankan jangkauan jempolnya tanpa ikut membawa rasa aplikasi.

   Isinya bertiga susun: kepala pendek berisi judul dan tombol tutup,
   badan yang bisa digulir, dan kaki yang TIDAK ikut tergulir — di
   situlah tindakan utamanya, di tempat yang paling mudah dijangkau
   jempol.

   Tingginya bertingkat mundur: dvh mengikuti tinggi layar yang
   benar-benar terlihat saat bilah peramban muncul dan hilang; svh
   dipakai peramban yang belum mengenalnya; vh untuk yang lebih tua lagi.
   ===================================================================== */
.sheet {
  position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 120;
  display: flex; flex-direction: column;
  block-size: 100vh; block-size: 100svh; block-size: 100dvh;
  background: var(--paper);
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(.16, 1, .3, 1);
}
body.menu-open .sheet { transform: translateY(0); visibility: visible; }
@media (prefers-reduced-motion: reduce) { .sheet { transition: none; } }

/* Digeser keluar layar saja tidak cukup: isinya tetap menerima Tab, jadi
   pengguna papan ketik menabrak tujuh belas tautan yang tidak terlihat
   di mana pun. visibility: hidden mengeluarkannya dari urutan Tab tanpa
   membatalkan animasi naiknya — display: none akan membatalkannya.
   Di layar lebar lembarnya tidak dipakai sama sekali, jadi ia benar-benar
   dilepas dari halaman. */
.sheet { visibility: hidden; transition: transform 280ms cubic-bezier(.16, 1, .3, 1), visibility 280ms; }
@media (min-width: 1081px) {
  .sheet, .scrim { display: none; }
}

.sheet-atas {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(.9rem + env(safe-area-inset-top, 0px)) var(--pad) .9rem;
  border-block-end: 1px solid var(--hair);
  flex: none;
}
.sheet-judul {
  font-family: var(--display); font-size: .8rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3);
}

/* Tombol tutup di sudut kanan atas memang di luar jangkauan jempol —
   tapi itu tempat yang dicari orang lebih dulu, dan menutup juga bisa
   dengan Esc, dengan menekan latar, atau dengan tombol menu yang sama.
   Ukurannya 44px, bukan sebesar ikonnya. */
.sheet-tutup {
  position: relative; inline-size: 44px; block-size: 44px; flex: none;
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  background: var(--paper); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sheet-tutup span {
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  inline-size: 15px; block-size: 1.6px; border-radius: 2px; background: var(--ink);
}
.sheet-tutup span:first-child { transform: translate(-50%, -50%) rotate(45deg); }
.sheet-tutup span:last-child { transform: translate(-50%, -50%) rotate(-45deg); }
.sheet-tutup:active { background: var(--ground); }

.sheet-isi {
  flex: 1 1 auto; min-block-size: 0; overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0 var(--pad) 1.2rem;
}

/* Kaki tidak ikut tergulir: tindakan utama harus selalu ada di tempat
   yang sama, bukan ditemukan setelah menggulir delapan layanan. */
.sheet-kaki {
  flex: none; padding: .9rem var(--pad) calc(1rem + env(safe-area-inset-bottom, 0px));
  border-block-start: 1px solid var(--hair);
  background: var(--ground);
}
.sheet-kaki-baris {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-block-start: .75rem;
}
.sheet-jam { font-size: .76rem; line-height: 1.45; color: var(--ink-3); max-inline-size: 22ch; }
/* Daftar menu ponsel: satu kolom baris yang bisa ditekan, dipisah garis
   rambut. Tanpa lencana kode, tanpa panah di tiap baris, tanpa kepala
   kelompok untuk layanannya — tiga hal yang menambah benda di layar
   tanpa menambah satu keterangan pun. Yang tersisa ikon dan nama. */
.m-grup {
  font-family: var(--body); font-size: .68rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4);
  margin-block: 1.6rem .3rem;
}
.sheet-isi .m-grup:first-of-type { margin-block-start: 1.1rem; }

.m-svc {
  display: flex; align-items: center; gap: .85rem;
  min-block-size: 52px; padding: .55rem .1rem;
  color: var(--ink); font-size: .9375rem; font-weight: 500;
  -webkit-tap-highlight-color: transparent;
}
.m-svc + .m-svc { border-block-start: 1px solid var(--hair); }
.m-svc:active { background: var(--ground); }
.m-svc-t { min-inline-size: 0; }
.m-svc-ikon {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.35rem; block-size: 2.35rem;
  border-radius: var(--r-md); background: var(--ground); color: var(--ink-2);
}
.m-ikon { inline-size: 21px; block-size: 21px; }
.m-svc.is-active { color: var(--accent-2); font-weight: 600; }
.m-svc.is-active .m-svc-ikon { background: var(--accent-wash); color: var(--accent-2); }

.m-link {
  display: block; position: relative;
  min-block-size: 50px; padding: .95rem .55rem; margin-inline: -.55rem;
  border-radius: var(--r-md);
  font-weight: 500; font-size: 0.9375rem; color: var(--ink);
  -webkit-tap-highlight-color: transparent;
  transition: background-color 120ms linear;
}
.m-link + .m-link { border-block-start: 1px solid var(--hair); }
.m-link:active { background: var(--ground); }
.m-link.is-active { color: var(--accent-2); font-weight: 600; }

/* ---------- HERO ---------- */
/* Kepala halaman melayang (position: fixed) dan tidak memakan ruang.
   Karena itu apa pun yang tampil PERTAMA di bawahnya wajib memikul
   jarak ini — biasanya hero, tapi saat hero disembunyikan (katalog
   mengambil alih beranda), giliran panel permintaan yang memikulnya.
   Tanpa aturan ini isi menyelip ke bawah kepala dan tampak mentok. */
:root { --ruang-kepala: calc(var(--header-h) + clamp(1.1rem, .9rem + .9vw, 1.75rem)); }
.hero { padding-block: var(--ruang-kepala) 0; }
#permintaan { padding-block: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(2rem, 1rem + 3.4vw, 4.5rem); align-items: center; }
@media (max-width: 1020px) { .hero-grid { grid-template-columns: 1fr; } }
.hero h1 { margin-block: 1.15rem 1.35rem; }
.hero .lede { margin-block-end: 2rem; }

/* ---------- PANGGUNG BOLA DUNIA ---------- */
.stage { position: relative; display: grid; place-items: center; }
.stage .globe { position: relative; z-index: 1; height: auto; }
.globe { inline-size: min(100%, 500px); }
@media (max-width: 1020px) { .globe { inline-size: min(68%, 320px); } .stage { margin-block-start: 1.5rem; } }

.arc { stroke-dasharray: 210; stroke-dashoffset: 210; animation: arcDraw 6s var(--ease) infinite; }
.arc-2 { animation-delay: 1.3s; } .arc-3 { animation-delay: 2.6s; } .arc-4 { animation-delay: 3.9s; }
@keyframes arcDraw {
  0% { stroke-dashoffset: 210; opacity: 0; }
  10% { opacity: 1; }
  52% { stroke-dashoffset: 0; opacity: 1; }
  84%, 100% { stroke-dashoffset: -210; opacity: 0; }
}
.pin { animation: pinPulse 3.4s var(--ease) infinite; }
.pin-2 { animation-delay: .85s; } .pin-3 { animation-delay: 1.7s; } .pin-4 { animation-delay: 2.55s; }
@keyframes pinPulse { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

/* ---------- ANGKA ---------- */
.figs {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  overflow: hidden;
}
.figs-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fig { padding: clamp(1.3rem, 1rem + 1vw, 1.9rem) clamp(1.1rem, .8rem + 1vw, 1.75rem); position: relative; }
.fig + .fig::before { content: ''; position: absolute; inset-block: 1.4rem; inset-inline-start: 0; inline-size: 1px; background: var(--hair); }
.fig-n { font-family: var(--ui); font-size: clamp(1.5rem, 1.25rem + 1vw, 2rem); font-weight: 700; letter-spacing: -.04em; color: var(--ink); line-height: 1.04; font-variant-numeric: tabular-nums; }
.fig-n .unit { color: var(--accent); }
.fig-l { font-size: .78rem; color: var(--ink-3); margin-block-start: .4rem; line-height: 1.45; }
@media (max-width: 720px) {
  .figs, .figs-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fig:nth-child(odd)::before { display: none; }
  .fig:nth-child(n+3) { border-block-start: 1px solid var(--hair); }
}

/* ---------- PAPAN LAYANAN ---------- */
.board {
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2);
  padding: .4rem;
}
.board-head {
  display: grid; grid-template-columns: 74px minmax(0, 268px) minmax(0, 1fr) 148px 22px;
  gap: 1.5rem; padding: .85rem 1.1rem .6rem;
  font-family: var(--mono); font-size: .735rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-4); font-weight: 600;
}
.board-head span:nth-child(4) { text-align: end; }
@media (max-width: 1000px) { .board-head { display: none; } }

.board-row {
  display: grid; grid-template-columns: 74px minmax(0, 268px) minmax(0, 1fr) 148px 22px;
  gap: 1.5rem; align-items: center;
  padding: clamp(1rem, .8rem + .8vw, 1.32rem) 1.1rem;
  border-radius: var(--r-md);
  position: relative;
  transition: background-color 220ms var(--ease);
}
.board-row + .board-row::before {
  content: ''; position: absolute; inset-block-start: 0; inset-inline: 1.1rem;
  block-size: 1px; background: var(--hair);
  transition: opacity 180ms linear;
}
.board-row:hover { background: var(--ground); }
.board-row:hover::before { opacity: 0; }
.board-t { font-family: var(--ui); font-size: clamp(1.05rem, .98rem + .35vw, 1.19rem); font-weight: 600; color: var(--ink); letter-spacing: -.022em; }
.board-d { font-size: 0.875rem; color: var(--ink-3); line-height: 1.6; }
.board-m { font-family: var(--mono); font-size: .735rem; color: var(--ink-3); text-align: end; letter-spacing: .04em; }
.board-a { inline-size: 20px; block-size: 20px; color: var(--ink-4); transition: transform var(--t) var(--ease), color var(--t-fast) linear; }
.board-row:hover .board-a { transform: translateX(5px); color: var(--accent); }
.board-row:hover .code { color: var(--accent); border-color: #B4D9FE; background: var(--accent-wash); }
[dir='rtl'] .board-row:hover .board-a { transform: translateX(-5px); }
@media (max-width: 1000px) {
  .board-row { grid-template-columns: 60px minmax(0, 1fr) 22px; gap: .9rem; row-gap: .3rem; }
  .board-c { grid-row: 1; }
  .board-t { grid-column: 2; }
  .board-d { grid-column: 2; grid-row: 2; }
  .board-m { grid-column: 2; grid-row: 3; text-align: start; }
  .board-a { grid-column: 3; grid-row: 1; }
}

/* ---------- DAFTAR BERGARIS ---------- */
.deflist { border-block-start: 1px solid var(--hair); }
.deflist-item {
  display: grid; grid-template-columns: 74px minmax(0, 300px) minmax(0, 1fr);
  gap: clamp(1rem, .5rem + 2vw, 2.5rem);
  padding-block: clamp(1.25rem, 1rem + .9vw, 1.75rem);
  border-block-end: 1px solid var(--hair);
}
.deflist-item h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.018em; }
.deflist-item p { color: var(--ink-3); font-size: 0.9375rem; line-height: 1.7; }
@media (max-width: 860px) { .deflist-item { grid-template-columns: 60px minmax(0, 1fr); gap: .9rem; } .deflist-item p { grid-column: 2; } }

/* ---------- DUA KOLOM ---------- */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, .6rem + 1.4vw, 1.5rem); }
.cols > * {
  padding: clamp(1.6rem, 1.2rem + 1.5vw, 2.35rem);
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  display: flex; flex-direction: column;
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.cols > *:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }
.ticks { display: flex; flex-direction: column; gap: .65rem; margin-block-start: 1.3rem; }
.ticks li { display: flex; gap: .65rem; align-items: flex-start; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.6; }
.ticks svg { inline-size: 15px; block-size: 15px; flex: none; margin-block-start: 5px; color: var(--accent); }

/* ---------- ALUR ---------- */
.flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.2rem, .8rem + 1.6vw, 2.25rem); }
@media (max-width: 900px) { .flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 540px) { .flow { grid-template-columns: 1fr; } }
.flow-item {
  padding: 1.4rem 1.35rem 1.5rem;
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
  transition: transform 300ms var(--ease), box-shadow 300ms var(--ease);
}
.flow-item:hover { transform: translateY(-3px); box-shadow: var(--sh-3); }
.flow-n {
  font-family: var(--mono); font-size: .735rem; font-weight: 600; letter-spacing: .13em;
  color: var(--accent); text-transform: uppercase;
  display: inline-block; padding: .3rem .6rem; border-radius: var(--r-full);
  background: var(--accent-wash); border: 1px solid rgba(4,116,252,.14);
}
.flow-item h3 { font-size: 1.0625rem; margin-block: .9rem .35rem; font-weight: 600; }
.flow-item p { font-size: 0.875rem; color: var(--ink-3); line-height: 1.66; }

/* ---------- PANEL PERMINTAAN ---------- */
.panel {
  container-type: inline-size;
  background: var(--paper);
  border: 1px solid var(--hair);
  border-radius: var(--r-xl);
  padding: clamp(1.35rem, 1rem + 1.4vw, 2rem);
  box-shadow: var(--sh-3);
}
.panel-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-block-end: 1.1rem; }
.panel-head h2 { font-size: 1.0625rem; letter-spacing: -.02em; }
.panel-head p { font-size: 0.875rem; color: var(--ink-3); }

.field { display: flex; flex-direction: column; gap: .38rem; min-inline-size: 0; }
/* Label ditulis biasa, huruf perusahaan. Mono berhuruf besar berspasi lebar
   adalah bahasa papan kendali teknis, bukan formulir yang diisi pelanggan. */
.field > label { font-family: var(--body); font-size: 0.875rem; font-weight: 500; color: var(--ink-2); letter-spacing: -.005em; }
.field .req { color: var(--ink-4); font-weight: 400; }

.input, .select, .textarea {
  inline-size: 100%; padding: .76rem .85rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--hair-2);
  color: var(--ink); font-size: 0.9375rem;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
  min-inline-size: 0;
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:hover, .select:hover, .textarea:hover { border-color: var(--ink-4); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,116,252,.12); }
.textarea { min-block-size: 104px; resize: vertical; line-height: 1.6; }
.select {
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E869F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 16px;
  padding-inline-end: 2.4rem;
}
[dir='rtl'] .select { background-position: left .8rem center; padding-inline-end: .85rem; padding-inline-start: 2.4rem; }
input[type='date'].input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; }

.fgrid { display: grid; gap: .78rem; align-items: end; grid-template-columns: 1fr; }
.fgrid .col-full { grid-column: 1 / -1; }
@container (min-width: 430px) { .fgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fgrid .col-2 { grid-column: span 2; } }
@container (min-width: 810px) { .fgrid { grid-template-columns: repeat(4, minmax(0, 1fr)); } .fgrid .col-2 { grid-column: span 2; } }

.panel-note { display: flex; gap: .5rem; align-items: flex-start; font-size: .78rem; color: var(--ink-3); line-height: 1.6; }
.panel-note svg { inline-size: 14px; block-size: 14px; flex: none; margin-block-start: 3px; color: var(--ink-4); }

/* Tab layanan: garis bawah, bukan kapsul melayang. Ini pola navigasi
   yang dipakai perusahaan besar karena tidak memakan ruang dan tidak
   menambah lapisan baru di atas panel yang sudah punya lapisan. */
.ptabs {
  display: flex; gap: 0; padding: 0;
  background: transparent; border: 0;
  border-block-end: 1px solid var(--hair-solid);
  border-radius: 0;
  margin-block-end: 1.5rem; overflow-x: auto; scrollbar-width: none;
}
.ptabs::-webkit-scrollbar { display: none; }
.ptab {
  position: relative; padding: .72rem 1.15rem; flex: 0 0 auto; justify-content: center;
  border-radius: 0;
  font-family: var(--body); font-size: 0.9375rem; font-weight: 500; letter-spacing: -.008em; text-transform: none;
  color: var(--ink-3); display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap;
  transition: color var(--t-fast) linear; -webkit-tap-highlight-color: transparent;
}
.ptab::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline: 0;
  block-size: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: center;
  transition: transform 320ms var(--ease);
}
.ptab svg { inline-size: 15px; block-size: 15px; opacity: .7; }
.ptab:hover { color: var(--ink); }
.ptab.is-active { color: var(--ink); font-weight: 600; background: transparent; box-shadow: none; }
.ptab.is-active::after { transform: scaleX(1); }
.ptab.is-active svg { opacity: 1; color: var(--accent); }
.pane { display: none; }
.pane.is-active { display: block; animation: paneIn 380ms var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- PITA BERJALAN ---------- */
.marquee { overflow: hidden; padding-block: .5rem;
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.marquee-track { display: flex; gap: .6rem; inline-size: max-content; animation: slide 54s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.mq-item {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--mono); font-size: .735rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
  white-space: nowrap; padding: .55rem .95rem;
  background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-full); box-shadow: var(--sh-1);
}
.mq-item b { color: var(--ink); font-weight: 600; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir='rtl'] .marquee-track { animation-direction: reverse; }

/* ---------- TANYA JAWAB ---------- */
.qa {
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-xl); box-shadow: var(--sh-2);
  padding: .4rem 1.35rem;
}
.qa-item { border-block-end: 1px solid var(--hair); }
.qa-item:last-child { border-block-end: 0; }
.qa-q {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem;
  padding-block: 1.2rem; font-family: var(--ui); font-weight: 600; font-size: 1.0625rem; color: var(--ink);
  cursor: pointer; list-style: none; letter-spacing: -.018em;
  transition: color var(--t-fast) linear;
}
.qa-q::-webkit-details-marker { display: none; }
.qa-q:hover { color: var(--accent); }
.qa-q .plus { inline-size: 17px; block-size: 17px; flex: none; margin-block-start: 5px; color: var(--ink-4); transition: transform 340ms var(--ease), color var(--t-fast) linear; }
.qa-item[open] .plus { transform: rotate(45deg); color: var(--accent); }
.qa-a { padding-block-end: 1.35rem; color: var(--ink-3); font-size: 0.9375rem; line-height: 1.75; max-width: 70ch; }
.qa-a p + p { margin-block-start: .75rem; }
.qa-a a { color: var(--accent); font-weight: 600; }

/* ---------- CAKUPAN ---------- */
.cover { display: flex; flex-wrap: wrap; gap: .6rem; }
.cover span {
  padding: .62rem 1rem; font-size: 0.875rem; color: var(--ink-2); font-weight: 500;
  background: var(--paper); border: 1px solid var(--hair);
  border-radius: var(--r-full); box-shadow: var(--sh-1);
  display: inline-flex; align-items: center; gap: .5rem;
  transition: color var(--t-fast) linear, transform 220ms var(--ease), box-shadow 260ms var(--ease), border-color var(--t-fast) linear;
}
.cover span::before { content: ''; inline-size: 5px; block-size: 5px; border-radius: 50%; background: var(--hair-2); flex: none; transition: background-color var(--t-fast) linear; }
.cover span:hover { color: var(--accent); transform: translateY(-2px); box-shadow: var(--sh-2); border-color: rgba(4,116,252,.22); }
.cover span:hover::before { background: var(--accent); }

/* ---------- TABEL ---------- */
.table-wrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--hair); border-radius: var(--r-xl); box-shadow: var(--sh-2); }
table.data { inline-size: 100%; border-collapse: collapse; font-size: 0.875rem; min-inline-size: 640px; }
table.data th, table.data td { padding: .9rem 1.2rem; text-align: start; border-block-end: 1px solid var(--hair); }
table.data tr:last-child td { border-block-end: 0; }
table.data tbody tr:hover { background: var(--ground); }
table.data th { font-family: var(--mono); font-size: .735rem; letter-spacing: .17em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
table.data td { color: var(--ink-2); }
table.data .price { font-family: var(--mono); color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }

.note {
  display: flex; gap: .7rem; align-items: flex-start;
  padding: 1.05rem 1.25rem; border: 1px solid rgba(178,58,47,.18);
  border-radius: var(--r-lg);
  background: #FDF5F3;
  font-size: 0.875rem; color: #6B3B34; line-height: 1.68;
}
.note svg { inline-size: 16px; block-size: 16px; flex: none; margin-block-start: 4px; color: var(--stamp); }
.note strong { color: #8A2F25; font-weight: 700; }

.updated { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .735rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-4); }
.updated svg { inline-size: 13px; block-size: 13px; }

/* ---------- HALAMAN DALAM ---------- */
.page-hero { padding-block: calc(var(--header-h) + clamp(1.4rem, 1.05rem + 1.6vw, 2.4rem)) clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); }
.crumbs { display: flex; align-items: center; gap: .4rem; font-family: var(--mono); font-size: .735rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); margin-block-end: 1.3rem; flex-wrap: wrap; }
.crumbs a:hover { color: var(--accent); }
.crumbs svg { inline-size: 11px; block-size: 11px; opacity: .5; }
[dir='rtl'] .crumbs svg { transform: scaleX(-1); }
.page-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); gap: clamp(2rem, 1rem + 3.4vw, 4rem); align-items: start; }
@media (max-width: 1020px) { .page-hero-grid { grid-template-columns: 1fr; } }
/* Katalog dulu (STANDAR 21): seksi katalog memikul jarak kepala halaman,
   dan kepala halaman yang turun ke bawahnya tidak memikulnya dua kali.
   Judulnya ringkas (satu baris di layar lebar), lede satu kalimat —
   bentuk pengambilalihan beranda, bukan kepala halaman penjelas. */
.katalog-utama { padding-block-start: calc(var(--header-h) + clamp(1rem, .7rem + 1.2vw, 1.8rem)); }
.katalog-kepala { margin-block-end: clamp(1.1rem, .8rem + 1.2vw, 1.75rem); }
.katalog-kepala h1 { font-size: clamp(1.55rem, 1.2rem + 1.4vw, 2.3rem); margin: 0 0 .45rem; }
.katalog-kepala .katalog-lede { margin: 0; color: var(--ink-2); max-inline-size: 60ch; }
.page-hero-lanjut { padding-block-start: clamp(1.5rem, 1.1rem + 1.6vw, 2.4rem); border-block-start: 1px solid var(--hair-solid); }

/* ---------- FOOTER ---------- */
.site-footer { border-block-start: 1px solid var(--hair-2); background: var(--paper); padding-block: clamp(2.5rem, 1.8rem + 2.4vw, 3.5rem) 1.75rem; }
/* Tiga blok, bukan lima kolom. Delapan tautan layanan sudah muncul di
   menu utama, di indeks layanan pada beranda, dan di lembar menu ponsel
   — di kaki halaman ia salinan keempat yang hanya menambah keramaian.
   Yang tersisa hanya yang tidak ada di tempat lain: identitas, halaman
   perusahaan, dan cara menghubungi. Merek memegang sisi kiri, dua
   kelompok tautan dirapatkan ke kanan supaya tidak tercecer melintasi
   seluruh lebar layar. Tautan layanan tetap terbaca mesin pencari lewat
   menu utama dan sitemap.xml. */
.footer-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
  column-gap: clamp(2rem, 1rem + 3.2vw, 5.5rem); row-gap: 0;
  align-items: start;   /* tanpa ini kolom merek diregangkan setinggi
                           kolom terpanjang dan baris hukum terdorong
                           jauh ke bawah */
}
.f-brand .brand { inline-size: fit-content; }
.f-desc { margin-block-start: 1rem; max-inline-size: 34ch; }
.f-title { font-family: var(--mono); font-size: .735rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; margin-block-end: .85rem; }
.f-links { display: flex; flex-direction: column; gap: .58rem; }
.f-links a { font-size: 0.875rem; color: var(--ink-3); transition: color var(--t-fast) linear; inline-size: fit-content; }
.f-links a:hover { color: var(--ink); }
.f-contact { display: flex; flex-direction: column; gap: .1rem; }
.f-contact a, .f-contact span { display: flex; gap: .55rem; align-items: flex-start; font-size: 0.875rem; color: var(--ink-3); }
.f-contact > span { line-height: 1.5; padding-block: .32rem; }
.f-contact a:hover { color: var(--ink); }
.f-contact .f-singkat { display: none; }   /* tulisan singkat hanya di kaki ponsel (STANDAR 23) */
.f-contact svg { inline-size: 15px; block-size: 15px; flex: none; margin-block-start: 4px; color: var(--ink-4); }
/* Baris hukum duduk di bawah blok merek, bukan sebagai pita sendiri
   selebar layar: pitanya menambah satu garis dan satu baris kosong
   untuk dua keterangan pendek, dan menaruh pemilih bahasa tepat di
   bawah tombol Chat WhatsApp yang melayang. */
.f-bottom { grid-column: 1; margin-block-start: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; font-family: var(--mono); font-size: .735rem; letter-spacing: .06em; color: var(--ink-4); }
.lang-switch { display: inline-flex; gap: 1rem; }
.lang-switch button { font-family: var(--mono); font-size: .735rem; font-weight: 600; letter-spacing: .1em; color: var(--ink-4); transition: color var(--t-fast) linear; }
.lang-switch button.is-active { color: var(--ink); }
.lang-switch button:hover { color: var(--ink-2); }

/* ---------- ANIMASI ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 780ms var(--ease), transform 780ms var(--ease); transition-delay: var(--d, 0ms); }
.reveal.is-in { opacity: 1; transform: none; }
.rise { display: block; overflow: hidden; }
.rise > span { display: block; transform: translateY(103%); transition: transform 880ms var(--ease); transition-delay: var(--d, 0ms); }
.rise.is-in > span { transform: none; }
.progress { position: fixed; inset-block-start: 0; inset-inline-start: 0; block-size: 2px; inline-size: 100%; background: var(--ink); z-index: 101; transform: scaleX(0); transform-origin: 0 50%; transition: transform 90ms linear; will-change: transform; }
[dir='rtl'] .progress { transform-origin: 100% 50%; }
@media (max-width: 780px) { .progress { display: none; } }

/* ---------- AKSESIBILITAS ---------- */
.sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-block-start: -100px; inset-inline-start: 1rem; z-index: 200; padding: .7rem 1.2rem; border-radius: var(--r-sm); background: var(--ink); color: #fff; font-weight: 600; transition: top var(--t) var(--ease); }
.skip-link:focus { inset-block-start: 1rem; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .rise > span { transform: none; }
}

/* Varian daftar dua kolom (tanpa kode di depan) */
.deflist--2 .deflist-item { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
@media (max-width: 860px) {
  .deflist--2 .deflist-item { grid-template-columns: 1fr; gap: .4rem; }
  .deflist--2 .deflist-item p { grid-column: auto; }
}

/* Varian tiga kolom: judul, keterangan, lalu nilainya yang bisa dipakai */
.deflist--3 .deflist-item { grid-template-columns: minmax(0, 260px) minmax(0, 1fr) minmax(0, 260px); align-items: start; }
.dl-act { text-align: end; }
.dl-val { font-family: var(--mono); font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.deflist--3 .dl-act .tlink { font-family: var(--mono); font-size: .875rem; letter-spacing: -.01em; }
@media (max-width: 980px) {
  .deflist--3 .deflist-item { grid-template-columns: 1fr; gap: .45rem; }
  .dl-act { text-align: start; margin-block-start: .35rem; }
}

/* ============================================================
   MASKAPAI — pita logo maskapai yang kami layani
   ============================================================ */
.airlines { overflow: hidden; padding-block: .35rem;
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.airlines-track { display: flex; align-items: center; gap: clamp(2rem, 1rem + 3vw, 4rem); inline-size: max-content; animation: slide 44s linear infinite; }
.airlines:hover .airlines-track { animation-play-state: paused; }
.airline { block-size: clamp(26px, 1.2rem + 1.1vw, 34px); inline-size: auto; flex: none;
  filter: grayscale(1) contrast(1.15); opacity: .72;
  transition: filter 320ms var(--ease), opacity 320ms var(--ease), transform 320ms var(--ease); }
.airline:hover { filter: none; opacity: 1; transform: scale(1.06); }
[dir='rtl'] .airlines-track { animation-direction: reverse; }

/* ============================================================
   DESTINASI — kartu bergradasi, disusun bento
   ============================================================ */
.dests { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.7rem, .4rem + 1vw, 1.1rem); }
.dest {
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: var(--r-xl);
  min-block-size: clamp(220px, 16rem + 4vw, 320px);
  padding: clamp(.95rem, .85rem + .5vw, 1.25rem);
  display: flex; flex-direction: column; justify-content: flex-end;
  color: #fff; text-decoration: none;
  background: linear-gradient(150deg, var(--a), var(--b));
  box-shadow: var(--sh-2);
  transition: transform 420ms var(--ease);
}
.dest:hover { transform: translateY(-5px); }
.dest.wide { grid-column: span 2; }
.dest.tall { grid-row: span 2; }
@media (max-width: 1000px) { .dests { grid-template-columns: repeat(2, minmax(0, 1fr)); } .dest.tall { grid-row: span 1; } }
@media (max-width: 560px) { .dests { grid-template-columns: 1fr; } .dest.wide { grid-column: span 1; } }

/* Garis kontur — tekstur yang dibuat, bukan foto */
/* Peta bertitik yang dihitung untuk tiap kota — menggantikan gradasi
   polos, yang sebelumnya membaca sebagai hiasan tanpa isi. */
.dest-map {
  position: absolute; inset: 0; z-index: -1;
  inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 900ms var(--ease), opacity 500ms var(--ease);
  opacity: .9;
}
.dest:hover .dest-map { transform: scale(1.06); opacity: 1; }
.dest::after {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,26,42,0) 6%, rgba(8,20,34,.6) 42%, rgba(7,17,29,.94) 100%);
}
.dest-code { font-family: var(--mono); font-size: .735rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(255,255,255,.62); }
.dest h3 { font-family: var(--display); font-weight: 700; color: #fff; font-size: clamp(1.15rem, 1.05rem + .45vw, 1.35rem); letter-spacing: -.032em; margin-block: .4rem .35rem; }
.dest p { font-size: .875rem; color: rgba(255,255,255,.78); line-height: 1.5; }
.dest-go { position: absolute; inset-block-start: clamp(1.1rem,.9rem + .8vw,1.6rem); inset-inline-end: clamp(1.1rem,.9rem + .8vw,1.6rem);
  inline-size: 34px; block-size: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.26);
  transition: background-color 300ms var(--ease), transform 300ms var(--ease); }
.dest-go svg { inline-size: 15px; block-size: 15px; color: #fff; }
.dest:hover .dest-go { background: rgba(255,255,255,.3); transform: translateX(3px); }
[dir='rtl'] .dest:hover .dest-go { transform: translateX(-3px); }

/* ============================================================
   V5 — RAGAM TATA LETAK & GERAK
   ============================================================ */

/* --- Hero yang tidak simetris: bola dunia meluber ke tepi layar ---

   Bolanya memang sengaja lewat dari tepi kanan; itu yang membuat hero-nya
   tidak simetris. Tetapi meluber di dalam hero bukan berarti halamannya
   boleh ikut bergeser: pada lebar sekitar 1185px beranda bisa digulir ke
   samping 79px, dan halaman yang bergeser sendiri saat disentuh terasa
   seperti halaman yang rusak.

   Dipakai `clip`, bukan `hidden`. `hidden` menjadikan body wadah gulir
   sendiri, dan begitu itu terjadi position:sticky di dalamnya berhenti
   bekerja — kepala halaman akan ikut tergulir naik. `clip` memotong
   tanpa membuat wadah gulir. */
body { overflow-x: clip; }
.hero { overflow: visible; }
.hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: start; }
.hero .stage { justify-self: end; inline-size: 118%; margin-inline-end: clamp(-9rem, -3rem - 6vw, -2rem); }
.hero .globe { inline-size: min(100%, 620px); }
@media (max-width: 1020px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .stage { inline-size: 100%; margin-inline-end: 0; justify-self: center; }
  .hero .globe { inline-size: min(72%, 340px); }
}
/* Hero di ponsel: lihat blok VERSI PONSEL (bagian 16) dan SISTEM PONSEL
   (bagian 18) di bawah — susunan bola dunia dan judul diatur satu kali
   di sana. Blok lama yang dulu berdiri di sini (bola 64vw dengan mask
   pelarut di kiri) sudah dicabut. */

/* --- Rel destinasi: gulir mendatar dengan titik henti --- */
.rail-wrap { position: relative; }
.rail {
  display: flex; gap: clamp(.7rem, .4rem + 1vw, 1.1rem);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-block-end: 1rem;
  padding-inline-end: var(--pad);
  margin-inline-end: calc(var(--pad) * -1);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.rail::-webkit-scrollbar { display: none; }
/* Semua kartu satu ukuran. Kartu "lebar" 460px justru paling banyak
   ruang kosongnya karena isinya sama saja dengan yang lain. */
.rail > * { scroll-snap-align: start; flex: 0 0 clamp(238px, 17rem + 3.2vw, 306px); }
/* Di layar sempit, kartu lebar jadi lebih lebar dari layar dan teksnya
   terpotong di tengah kata. Semua kartu disamakan lebarnya. */
@media (max-width: 620px) {
  .rail > *, .rail > *.wide { flex-basis: min(78vw, 300px); }
}
.rail-nav { display: flex; gap: .5rem; margin-block-start: .25rem; }
.rail-btn {
  inline-size: 42px; block-size: 42px; border-radius: 50%;
  border: 1px solid var(--hair-2); background: var(--paper); box-shadow: var(--sh-1);
  display: grid; place-items: center; color: var(--ink);
  transition: background-color var(--t-fast) linear, transform 200ms var(--ease), box-shadow 260ms var(--ease), opacity var(--t-fast) linear;
}
.rail-btn:hover { box-shadow: var(--sh-2); transform: translateY(-1.5px); }
.rail-btn[disabled] { opacity: .35; pointer-events: none; }
.rail-btn svg { inline-size: 17px; block-size: 17px; }
.rail-btn.prev svg { transform: scaleX(-1); }
[dir='rtl'] .rail-btn.prev svg { transform: none; }
[dir='rtl'] .rail-btn.next svg { transform: scaleX(-1); }
.dest { min-block-size: clamp(196px, 12rem + 2.6vw, 224px); }

/* Undian berikutnya masuk dengan meredup sebentar, bukan berganti mendadak. */
.rail { transition: opacity 380ms var(--ease); }
.rail.is-ganti { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .rail { transition: none; } }

/* --- Bagian dengan judul menempel saat isi bergulir --- */
.sticky-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: start; }
.sticky-side { position: sticky; inset-block-start: calc(var(--header-h) + 2rem); }
@media (max-width: 900px) { .sticky-split { grid-template-columns: 1fr; } .sticky-side { position: static; } }

.stack-list { display: flex; flex-direction: column; }
.stack-item { padding-block: clamp(1.4rem, 1.1rem + 1vw, 2rem); border-block-start: 1px solid var(--hair); display: grid; gap: .5rem; }
.stack-item:first-child { border-block-start: 0; padding-block-start: 0; }
.stack-item h3 { font-size: clamp(1.08rem, 1rem + .5vw, 1.28rem); }
.stack-item p { color: var(--ink-3); font-size: 0.9375rem; line-height: 1.72; max-width: 54ch; }
.bleed .stack-item { border-block-start-color: rgba(255,255,255,.14); }
.bleed .stack-item p { color: #93AFCB; }

/* --- Alur bernomor dengan garis penghubung --- */
.track { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, .8rem + 1.8vw, 2.5rem); }
.track::before { content: ''; position: absolute; inset-block-start: 13px; inset-inline: 6%; block-size: 1px; background: rgba(255,255,255,.18); }
.track-item { position: relative; padding-block-start: 2.6rem; }
.track-item::before {
  content: ''; position: absolute; inset-block-start: 7px; inset-inline-start: 0;
  inline-size: 13px; block-size: 13px; border-radius: 50%;
  background: #8CD4FC; box-shadow: 0 0 0 5px rgba(140,212,252,.18);
}
.track-n { font-family: var(--mono); font-size: .735rem; letter-spacing: .17em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.track-item h3 { color: #fff; font-size: 1.0625rem; margin-block: .5rem .4rem; }
.track-item p { font-size: 0.875rem; line-height: 1.68; color: #93AFCB; }
@media (max-width: 900px) { .track { grid-template-columns: repeat(2, minmax(0, 1fr)); } .track::before { display: none; } }
@media (max-width: 540px) { .track { grid-template-columns: 1fr; } }

/* --- Papan layanan tanpa kotak: baris murni dengan garis --- */
.board { background: transparent; border: 0; box-shadow: none; padding: 0; border-block-start: 1px solid var(--ink); }
.board-head { padding-inline: 0; padding-block: .9rem .55rem; border-block-end: 1px solid var(--hair); }
.board-row { padding-inline: 0; border-radius: 0; border-block-end: 1px solid var(--hair); }
.board-row + .board-row::before { display: none; }
.board-row:hover { background: transparent; }
.board-row::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline-start: 0;
  block-size: 1px; inline-size: 0; background: var(--accent);
  transition: inline-size 520ms var(--ease);
}
.board-row:hover::after { inline-size: 100%; }
.board-row:hover .board-t { color: var(--accent); }
.board-t { transition: color var(--t-fast) linear; }

/* --- Gerak: geser dari samping untuk baris --- */
.slide { opacity: 0; transform: translateX(-22px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); transition-delay: var(--d, 0ms); }
.slide.is-in { opacity: 1; transform: none; }
[dir='rtl'] .slide { transform: translateX(22px); }

/* --- Gerak: kartu naik sambil membesar sedikit --- */
.pop { opacity: 0; transform: translateY(28px) scale(.975); transition: opacity 760ms var(--ease), transform 760ms var(--ease); transition-delay: var(--d, 0ms); }
.pop.is-in { opacity: 1; transform: none; }

/* --- Kutipan besar sebagai jeda visual --- */

@media (prefers-reduced-motion: reduce) {
  .slide, .pop { opacity: 1; transform: none; }
}

/* ============================================================
   KONTROL FORM SENDIRI
   Menu pilihan dan kalender bawaan sistem tampil berbeda di tiap
   sistem operasi dan tidak bisa ditata. Perusahaan yang serius
   membangun kontrolnya sendiri supaya tampilannya sama di mana pun.
   Elemen <select> dan <input> aslinya tetap ada di dalam formulir —
   yang diganti hanya tampilannya, jadi data terkirim seperti biasa
   dan pembaca layar tetap membacanya.
   ============================================================ */

.combo { position: relative; min-inline-size: 0; }
/* Elemen asli tetap menempati ruang yang sama, hanya tidak terlihat.
   Kalau disembunyikan penuh, peramban menolak menyorotinya saat
   validasi dan pesan "wajib diisi" muncul di tempat yang salah. */
.combo > select {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
  appearance: none; -webkit-appearance: none;
}
.combo-btn {
  inline-size: 100%; padding: .76rem .85rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--hair-2);
  color: var(--ink); font-size: 0.9375rem; font-family: var(--body);
  text-align: start; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
  -webkit-tap-highlight-color: transparent;
}
.combo-btn:hover { border-color: var(--ink-4); }
.combo-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,116,252,.12); }
.combo.is-open .combo-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,116,252,.12); }
.combo-val { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-caret { flex: none; inline-size: 16px; block-size: 16px; color: var(--ink-3); transition: transform var(--t) var(--ease); }
.combo.is-open .combo-caret { transform: rotate(180deg); }

.combo-menu {
  position: absolute; inset-inline: 0; inset-block-start: calc(100% + 6px);
  z-index: 60; padding: .3rem;
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  max-block-size: 17rem; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms linear, transform 200ms var(--ease), visibility 200ms;
}
.combo.is-open .combo-menu { opacity: 1; visibility: visible; transform: none; }
.combo.drop-up .combo-menu { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
.combo-opt {
  display: flex; align-items: center; gap: .55rem;
  inline-size: 100%; padding: .58rem .65rem;
  border-radius: var(--r-xs);
  font-size: 0.875rem; color: var(--ink-2); text-align: start;
  cursor: pointer;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.combo-opt:hover, .combo-opt.is-cursor { background: var(--ground); color: var(--ink); }
.combo-opt[aria-selected='true'] { color: var(--ink); font-weight: 600; }
.combo-opt .tick { inline-size: 15px; block-size: 15px; flex: none; color: var(--accent); opacity: 0; }
.combo-opt[aria-selected='true'] .tick { opacity: 1; }

/* ---- Kalender ---- */
.datefield { position: relative; min-inline-size: 0; }
.datefield > input[type='date'] {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0;
  appearance: none; -webkit-appearance: none;
}
.datefield > input[type='date']::-webkit-calendar-picker-indicator,
.datefield > input[type='date']::-webkit-inner-spin-button { display: none; }
.date-btn {
  inline-size: 100%; padding: .76rem .85rem;
  border-radius: var(--r-sm);
  background: var(--paper);
  border: 1px solid var(--hair-2);
  color: var(--ink); font-size: 0.9375rem; font-family: var(--body);
  text-align: start; cursor: pointer;
  display: flex; align-items: center; gap: .6rem;
  transition: border-color var(--t-fast) linear, box-shadow var(--t-fast) linear;
  -webkit-tap-highlight-color: transparent;
}
.date-btn:hover { border-color: var(--ink-4); }
.date-btn:focus-visible { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,116,252,.12); }
.datefield.is-open .date-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(4,116,252,.12); }
.date-val { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-variant-numeric: tabular-nums; }
.date-val.is-empty { color: var(--ink-4); }
.date-btn .cal { flex: none; inline-size: 16px; block-size: 16px; color: var(--ink-3); }

.dp {
  position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 6px);
  z-index: 60; inline-size: 17.5rem; padding: .85rem;
  background: var(--paper);
  border: 1px solid var(--hair-2);
  border-radius: var(--r-md);
  box-shadow: var(--sh-4);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 160ms linear, transform 200ms var(--ease), visibility 200ms;
}
.datefield.is-open .dp { opacity: 1; visibility: visible; transform: none; }
.datefield.drop-up .dp { inset-block-start: auto; inset-block-end: calc(100% + 6px); }
.datefield.drop-end .dp { inset-inline-start: auto; inset-inline-end: 0; }

.dp-head { display: flex; align-items: center; justify-content: space-between; gap: .4rem; margin-block-end: .7rem; }
.dp-title { font-family: var(--ui); font-weight: 600; font-size: 0.9375rem; color: var(--ink); letter-spacing: -.014em; }
.dp-nav { display: flex; gap: .2rem; }
.dp-nav button {
  inline-size: 28px; block-size: 28px; border-radius: var(--r-xs);
  display: grid; place-items: center; color: var(--ink-3);
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.dp-nav button:hover { background: var(--ground); color: var(--ink); }
.dp-nav button[disabled] { opacity: .3; pointer-events: none; }
.dp-nav svg { inline-size: 15px; block-size: 15px; }
.dp-nav .prev svg { transform: scaleX(-1); }
[dir='rtl'] .dp-nav .prev svg { transform: none; }
[dir='rtl'] .dp-nav .next svg { transform: scaleX(-1); }

.dp-dow, .dp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.dp-dow span {
  text-align: center; font-size: .68rem; font-weight: 600; color: var(--ink-4);
  padding-block: .3rem .45rem; letter-spacing: .02em;
}
.dp-day {
  aspect-ratio: 1; display: grid; place-items: center;
  border-radius: var(--r-xs);
  font-size: 0.875rem; color: var(--ink-2); font-variant-numeric: tabular-nums;
  transition: background-color var(--t-fast) linear, color var(--t-fast) linear;
  -webkit-tap-highlight-color: transparent;
}
.dp-day:hover:not([disabled]) { background: var(--ground); color: var(--ink); }
.dp-day.is-out { color: var(--ink-4); opacity: .55; }
.dp-day[disabled] { color: var(--ink-4); opacity: .32; pointer-events: none; }
.dp-day.is-today { font-weight: 700; color: var(--accent); }
.dp-day.is-sel { background: var(--accent); color: #fff; font-weight: 600; }
.dp-day.is-sel:hover { background: var(--accent-2); color: #fff; }
.dp-foot { display: flex; justify-content: space-between; gap: .5rem; margin-block-start: .7rem; padding-block-start: .6rem; border-block-start: 1px solid var(--hair); }
.dp-foot button { font-size: .82rem; font-weight: 600; color: var(--accent); padding: .25rem .35rem; border-radius: var(--r-xs); }
.dp-foot button:hover { background: var(--accent-wash); }
.dp-foot .clear { color: var(--ink-3); }
.dp-foot .clear:hover { background: var(--ground); color: var(--ink); }

/* Di layar kecil, kalender dan menu tampil sebagai lembar penuh dari
   bawah layar — pola yang sama dengan aplikasi ponsel. */
@media (max-width: 560px) {
  .combo.is-open .combo-menu, .datefield.is-open .dp {
    position: fixed; inset-block-end: 0; inset-block-start: auto;
    inset-inline: 0; inline-size: auto;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    border-block-end: 0;
    padding-block-end: calc(.85rem + env(safe-area-inset-bottom, 0px));
    max-block-size: 72vh; z-index: 120;
    animation: sheetUp 320ms var(--ease);
  }
  .combo.is-open::after, .datefield.is-open::after {
    content: ''; position: fixed; inset: 0; z-index: 119;
    background: rgba(13,31,49,.34);
    animation: fadeIn 220ms linear;
  }
  /* Kotak tanggal dibatasi tingginya: pada lebar penuh, rasio 1:1
     membuat kalender lebih tinggi dari layar. */
  .dp-day { aspect-ratio: auto; block-size: 42px; font-size: 0.9375rem; }
  .combo-opt { padding-block: .78rem; font-size: 0.9375rem; }
  .dp-title { font-size: 0.9375rem; }
  .dp-nav button { inline-size: 36px; block-size: 36px; }
  /* Pegangan tarik, sama seperti lembar menu */
  .combo.is-open .combo-menu::before, .datefield.is-open .dp::before {
    content: ''; display: block; inline-size: 36px; block-size: 4px;
    border-radius: 99px; background: var(--hair-2);
    margin: .1rem auto .75rem;
  }
}
@keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================
   BOLA DUNIA HIDUP
   Gambar SVG-nya tetap ada sebagai tampilan awal — muncul seketika
   dan tetap terbaca kalau JavaScript mati. Begitu perute gambar
   siap, kanvas mengambil alih dan bolanya benar-benar berputar.
   ============================================================ */
.globe-host { position: relative; inline-size: min(100%, 500px); }
.globe-host > .globe { inline-size: 100%; }
.globe-live {
  position: absolute; inset: 0;
  inline-size: 100%; block-size: 100%;
  opacity: 0; transition: opacity 600ms var(--ease);
  touch-action: pan-y;
}
.globe-host.is-live > .globe { visibility: hidden; }
/* SVG cadangan yang sudah digantikan kanvas tidak perlu terus menghitung
   animasinya di latar — busur dan penandanya berhenti begitu kanvas hidup. */
.globe-host.is-live > .globe .arc, .globe-host.is-live > .globe .pin { animation: none; }
.globe-host.is-live .globe-live { opacity: 1; }
/* Bisa diputar dengan tangan — jadi kursornya harus mengatakan begitu */
.globe-host.is-live .globe-live { cursor: grab; }
.globe-host.is-drag .globe-live { cursor: grabbing; }

.stage .globe-host { position: relative; z-index: 1; }
@media (max-width: 1020px) { .globe-host { inline-size: min(68%, 320px); } }
.hero .globe-host { inline-size: min(100%, 620px); }
@media (max-width: 1020px) { .hero .globe-host { inline-size: min(72%, 340px); } }
/* Di ponsel bolanya mengisi penuh panggungnya sendiri, karena
   panggungnya sudah diperkecil dan digeser ke sisi kanan. */
@media (max-width: 780px) { .hero .globe-host { inline-size: 100%; } }

/* ============================================================
   INDEKS LAYANAN
   Daftar bernomor di satu sisi, panel rincian di sisi lain yang
   berganti sendiri. Menggantikan papan tabel: delapan layanan
   terbaca sekaligus, dan rinciannya muncul tanpa pindah halaman.
   ============================================================ */

/* Garis kemajuan: sekaligus penanda baris aktif dan penunjuk berapa
   lama lagi panel berpindah sendiri. */



/* Di layar sempit panelnya naik ke atas daftar, supaya pergantiannya
   tetap terlihat sementara barisnya menyala di bawahnya. */
@media (max-width: 900px) {
}
@media (prefers-reduced-motion: reduce) {
}

/* ============================================================
   LAPISAN PONSEL
   Sampai di sini situsnya adalah tata letak desktop yang menyusut —
   tipografi, irama bagian, dan susunannya semua dirancang untuk layar
   lebar lalu ditumpuk ke bawah. Di layar kecil hasilnya 10,8 layar
   penuh dengan judul 41px. Blok di bawah ini menyusun ulang, bukan
   mengecilkan.
   ============================================================ */
@media (max-width: 780px) {
  /* Skala huruf ponsel: judul dirancang untuk lebar 390px, bukan 1440px */
  .d1 { font-size: 1.75rem; line-height: 1.1; letter-spacing: -.032em; }
  .d2 { font-size: 1.6rem; line-height: 1.1; letter-spacing: -.03em; }
  .d3 { font-size: 1.28rem; }
  .lede { font-size: 0.9375rem; line-height: 1.6; }
  .body-text, .qa-a, .stack-item p { font-size: 0.9375rem; }
  body { font-size: 15.5px; }

  /* Irama bagian: satu ketukan, bukan tiga */
  :root { --sec: 2.4rem; }
  .sec-head { margin-block-end: 1.35rem; }
  .sec-head .label { margin-block-end: .7rem; padding-block-start: .6rem; }
  .sec-head p, .sec-head-indent p { margin-block-start: .7rem; font-size: 0.9375rem; }
  .sec-head-row { gap: .9rem; }
  .bleed { padding-block: 2.5rem; margin-block: .75rem; }

  /* Kartu tujuan: 4:5 di layar ponsel memakan satu layar penuh per kartu */
  .dest { min-block-size: 15.5rem; }
  .dest h3 { font-size: 1.25rem; }

  .figs .fig { padding: 1.1rem 1rem; }
  .qa { padding-inline: 1rem; }
  .qa-q { font-size: 0.9375rem; padding-block: .95rem; }
}

/* ---------- Indeks layanan di ponsel: korsel geser ----------
   Di layar lebar, daftar dan panel berdampingan sehingga keduanya
   terbaca sekaligus. Ditumpuk ke bawah, keduanya jadi dua benda yang
   tidak berhubungan: satu kartu di atas, lalu delapan baris tinggi di
   bawahnya. Di ponsel keduanya dilebur jadi satu korsel yang digeser
   dengan jempol — dan perjalanan otomatisnya menggerakkan korsel itu. */

@media (max-width: 900px) {



}

/* ---------- Ponsel: kurangi jumlah permukaan melayang ----------
   Ditumpuk ke bawah, tiap kotak putih bersudut dengan bayangannya
   sendiri jadi satu lapisan lagi di atas lapisan sebelumnya. Delapan
   lapisan berturut-turut membaca sebagai tumpukan kartu, bukan sebagai
   halaman perusahaan. Yang benar-benar perlu diangkat hanya dua:
   formulir permintaan dan pita ajakan. Sisanya kembali menjadi bagian
   dari halaman, dipisahkan garis rambut. */
@media (max-width: 780px) {
  .figs {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    border-block: 1px solid var(--hair);
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .fig { padding-inline: 0; }
  .fig:nth-child(even) { padding-inline-start: 1rem; }
  .fig + .fig::before { inset-block: .9rem; }
  .fig:nth-child(odd)::before { display: none; }

  .qa {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding-inline: 0;
    border-block-start: 1px solid var(--hair);
  }



  .cols > * {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 1.35rem 0;
    border-block-start: 1px solid var(--hair);
  }
  .cols > *:hover { transform: none; box-shadow: none; }
  .cols { gap: 0; }

  .flow-item {
    background: none; border: 0; box-shadow: none; border-radius: 0;
    padding: 1.2rem 0;
    border-block-start: 1px solid var(--hair);
  }
  .flow-item:hover { transform: none; box-shadow: none; }
  .flow { gap: 0; }
}

/* ============================================================
   INDEKS LAYANAN — PERBAIKAN TATA LETAK DESKTOP
   Dua cacat yang diperbaiki di sini:

   1. Panelnya diberi position:sticky, tapi kolomnya hanya setinggi
      kartu itu sendiri (410px) sementara daftarnya 597px. Elemen
      lengket tidak bisa bergerak melampaui pembungkusnya, jadi
      "lengket"-nya tidak pernah bekerja — dan tersisa 187px kosong
      di kanan bawah. Kolomnya sekarang diregangkan setinggi daftar,
      dan yang dilengketkan adalah tumpukannya.

   2. Kartunya terlalu ringan untuk mengisi kolom selebar itu.
      Ditambah angka cakupan dan lambang layanan raksasa yang samar.
   ============================================================ */
@media (min-width: 901px) {
}



/* ============================================================
   PANEL LAYANAN TANPA CANGKANG DI PONSEL
   Korselnya memecahkan masalah delapan baris tinggi, tapi menukarnya
   dengan masalah lain: kotak berbingkai bersudut, dengan dua kotak
   lain mengintip di kiri dan kanan. Tiga tepi kartu terlihat sekaligus
   — persis kesan "banyak kartu bertumpuk" yang mau dihindari.

   Di layar sempit cangkangnya dilepas seluruhnya. Yang tersisa isinya:
   satu layanan memenuhi lebar layar, dipisahkan garis rambut, bergeser
   seperti halaman. Petunjuk bahwa ia bisa digeser datang dari
   perpindahan otomatisnya dan dari titik-titik di bawah, bukan dari
   tepi kartu tetangga.
   ============================================================ */
@media (max-width: 900px) {

  /* Kotak biru muda di belakang lambang adalah kotak lagi. Di ponsel
     lambangnya berdiri sendiri, dan kode layanan cukup jadi teks. */

}

/* Lambang samar di kartu desktop dipindah ke sudut bawah sebagai
   cap air. Di sudut atas ia bertabrakan dengan kode layanan dan
   terbaca sebagai bentuk yang tercecer, bukan sebagai tekstur. */


/* ============================================================
   KAKI HALAMAN DI PONSEL
   Empat kolom tautan adalah pola kaki halaman desktop. Ditumpuk ke
   bawah ia jadi 1.300px daftar tautan yang isinya persis sama dengan
   lembar menu dan bilah tab yang sudah ada di layar — tiga salinan
   navigasi yang sama.

   Di ponsel kolomnya disembunyikan (tetap ada di HTML, jadi tautan
   internalnya tetap terbaca mesin pencari) dan yang tersisa hanya
   yang tidak ada di tempat lain: identitas, cara menghubungi, dan
   baris hukum. Cara menghubunginya dijadikan baris yang bisa
   ditekan — bahasa daftar aplikasi, bukan daftar tautan.
   ============================================================ */
@media (max-width: 780px) {
  /* Bagian ini dulu disembunyikan di ponsel, karena daftar yang sama
     sudah ada di bilah tab bawah. Bilah itu sudah dibuang dan halaman
     "seluruh layanan" juga sudah dihapus — jadi kalau bagian ini ikut
     disembunyikan, di ponsel beranda tidak punya satu pun daftar
     layanan yang bisa dilihat tanpa membuka menu. Ia dikembalikan.

     Panelnya tetap dilepas: yang berguna di layar lebar adalah panel
     yang memperkenalkan tiap layanan satu per satu, dan panel itu tidak
     muat di ponsel. Yang tampil di sini daftar barisnya saja. */



}

/* Kaki halaman di ponsel: lihat EKOR HALAMAN (STANDAR bagian 23) di
   blok SISTEM PONSEL, ujung berkas. */

/* ============================================================
   STANDAR SASARAN SENTUH & KETERBACAAN
   Diperiksa alat uji _build/standar.py di seluruh halaman.

   Sasaran sentuh: 44px adalah angka yang dipakai pedoman antarmuka
   Apple dan Material; di bawah itu jari orang dewasa mulai sering
   meleset. Berlaku untuk kendali sungguhan — tombol, tautan navigasi,
   pengalih bahasa — bukan untuk tautan yang menyatu di dalam kalimat.

   Ukuran huruf: 9px pada penanda merek di bawah logo sudah di bawah
   ambang baca siapa pun. Lantai bawahnya sekarang 11,5px.
   ============================================================ */

/* --- Ukuran huruf terkecil --- */
.pill { font-size: .735rem; }

/* --- Kendali yang harus bisa ditekan --- */
.brand { min-block-size: 44px; }
.dp-nav button { inline-size: 40px; block-size: 40px; }
.rail-btn { inline-size: 44px; block-size: 44px; }
.tlink { padding-block: .55rem; }
.lang-switch { gap: .25rem; }
.lang-switch button {
  min-inline-size: 44px; min-block-size: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: var(--r-xs);
}
.lang-switch button:hover { background: var(--ground); }
.f-links a { padding-block: .42rem; }
.f-links { gap: .18rem; }
.crumbs a { padding-block: .35rem; display: inline-flex; align-items: center; }
.combo-opt, .dp-day { min-block-size: 40px; }
.dp-day { aspect-ratio: auto; }
.qa-q { min-block-size: 44px; }
.mq-item { min-block-size: 40px; }
.cover span { min-block-size: 44px; }

/* Kalender: lebar dinaikkan supaya tiap kotak tanggal mencapai 40px */
.dp { inline-size: 20.5rem; }
.dp-foot button { min-block-size: 40px; padding-inline: .6rem; }
.dp-nav button { inline-size: 42px; block-size: 42px; }
.rail-btn { inline-size: 44px; block-size: 44px; flex: none; }
.crumbs a { min-block-size: 40px; }
@media (max-width: 560px) { .dp { inline-size: auto; } }

/* Sisa sasaran sentuh dan ukuran huruf terkecil di kaki halaman */
.f-links a { padding-block: .55rem; min-block-size: 40px; display: flex; align-items: center; }
.f-contact a { min-block-size: 40px; align-items: center; }
.f-contact a svg { margin-block-start: 0; }
.f-bottom { font-size: .735rem; }
.f-bottom span { font-size: inherit; }
.dest-code { font-size: .735rem; }

/* ============================================================
   MENU PONSEL — DISUSUN MENURUT NIAT, BUKAN MENURUT PETA SITUS
   Sebelumnya menu ini menyalin delapan layanan lengkap dengan
   keterangannya — padahal daftar yang sama sudah ada di badan halaman
   dan pintasannya sudah ada di bilah tab bawah. Tiga salinan navigasi
   yang sama, dan tidak satu pun menjawab kenapa orang membuka menu.

   Orang membuka menu agen perjalanan untuk tiga hal: mulai memesan,
   cari bantuan, atau ganti bahasa. Ketiganya sekarang ada di sini.
   Layanan tetap bisa dibuka langsung, tapi sebagai kisi ringkas —
   pintasan, bukan katalog kedua.
   ============================================================ */
/* Tombol WhatsApp di lembar menu memakai rupa yang sama persis dengan
   bilah tindakan di kaki layar: hijau WhatsApp, teks putih, tinggi yang
   sama. Satu tindakan yang muncul di dua tempat harus terlihat sama,
   kalau tidak ia terbaca sebagai dua tindakan yang berbeda. */
.m-wa {
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  inline-size: 100%; min-block-size: 50px; padding: .8rem 1.1rem;
  border: 1px solid var(--wa); border-radius: var(--r-md);
  background: var(--wa); color: #fff; font-family: var(--body);
  font-weight: 600; font-size: .9375rem;
}
.m-wa svg { inline-size: 19px; block-size: 19px; flex: none; color: #fff; }
.m-wa svg { color: #fff; }
.m-wa:hover { background: #0F7A40; border-color: #0F7A40; color: #fff; }


.m-lang {
  display: flex; gap: .4rem; margin-block-start: .35rem; flex-wrap: wrap;
}
.m-lang button {
  flex: 1 1 auto; min-block-size: 46px;
  border: 1px solid var(--hair-2); border-radius: var(--r-sm);
  font-family: var(--body); font-size: 0.875rem; font-weight: 500;
  letter-spacing: 0; color: var(--ink-2);
}
.m-lang button.is-active {
  border-color: var(--accent); color: var(--accent-2);
  background: var(--accent-wash); font-weight: 600;
}

/* ============================================================
   HALAMAN TENTANG
   Kepala halamannya dulu dua kolom: kalimat panjang di kiri, kartu
   berisi delapan layanan di kanan. Padahal delapan layanan yang sama
   didaftar lagi di bawahnya — satu halaman, dua daftar identik.
   Sekarang satu kolom lebar dengan baris kontak sebagai penutupnya.
   ============================================================ */
.about-hero { max-width: 46rem; }
.about-hero h1 { margin-block: .9rem 1.15rem; }
.about-hero .lede { max-width: 42rem; }

.about-meta {
  display: flex; flex-wrap: wrap; gap: 0 clamp(1.5rem, 1rem + 2vw, 3rem);
  margin-block-start: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem);
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--hair);
}
.about-meta > a, .about-meta > span {
  display: flex; align-items: center; gap: .6rem;
  min-block-size: 44px; font-size: 0.875rem; color: var(--ink-3);
}
.about-meta b { display: block; font-weight: 600; color: var(--ink); font-size: 0.9375rem; line-height: 1.3; }
.about-meta span span { display: block; }
.about-meta svg { inline-size: 17px; block-size: 17px; flex: none; color: var(--accent); }
.about-meta > span svg { color: var(--ink-4); }
.about-meta > a:hover b { color: var(--accent-2); }

/* Isi tulisan dua kolom di layar lebar — baris sepanjang 90 karakter
   melelahkan dibaca; dua kolom memotongnya jadi sekitar 55. */
.about-body { columns: 2; column-gap: clamp(2rem, 1.2rem + 3vw, 4rem); max-width: 62rem; }
.about-body p { break-inside: avoid; color: var(--ink-2); line-height: 1.75; }
.about-body p + p { margin-block-start: 1.05rem; }
.about-body .tlink { margin-block-start: .5rem; }
@media (max-width: 860px) { .about-body { columns: 1; } }

/* Formulir permintaan yang turun dari kepala halaman. */
.form-turun { max-inline-size: 44rem; margin-inline: auto; }

/* --- Konfirmasi setelah formulir dikirim --------------------------------
   Bukti di layar bahwa permintaannya masuk, lengkap dengan nomornya, dan
   satu tombol cadangan ke WhatsApp untuk peramban yang menahan tab baru. */
.kirim-usai {
  margin-block-start: 1.2rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--hair-solid); border-radius: var(--r-md, 12px);
  background: var(--ground); display: grid; gap: .5rem; justify-items: start;
}
.kirim-usai > b { font-size: 1rem; color: var(--ink); }
.kirim-usai .kode {
  font-family: var(--mono); font-size: .84rem; color: var(--ink-2);
  letter-spacing: .04em;
}
.kirim-usai .kode b { color: var(--ink); }
.kirim-usai .ket {
  font-size: .9rem; color: var(--ink-2); line-height: 1.6; max-inline-size: 54ch;
}
.kirim-usai .btn { margin-block-start: .3rem; }


/* ------------------------------------------------------------- berkas
   Daftar bernomor, bukan daftar centang: pengunjung membacanya sambil
   mengumpulkan map, dan nomor memberi tempat untuk berhenti dan kembali.
   Kolom kanan sengaja lebih gelap — bagian yang berbeda tiap negara
   itulah yang dikerjakan Zein, dan ia tidak boleh terbaca seperti
   catatan kaki. */
.dok { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 2.75rem); align-items: start; }
@media (max-width: 900px) { .dok { grid-template-columns: minmax(0, 1fr); } }

.dok-inti { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.dok-inti li {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: .2rem 1rem;
  padding-block: 1.05rem; border-block-start: 1px solid var(--hair-solid);
}
.dok-inti li:first-child { border-block-start: 0; padding-block-start: 0; }
.dok-n {
  grid-row: span 2; font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--ink-4); padding-block-start: .15rem;
}
.dok-inti b { color: var(--ink); font-weight: 600; font-size: .9375rem; }
.dok-inti span:not(.dok-n) { color: var(--ink-3); font-size: .9rem; line-height: 1.6; }

.dok-beda {
  background: var(--ink); color: #B8C9DA; border-radius: var(--r-xl);
  padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem);
}
.dok-beda .label { color: #7E97AE; display: block; }
.dok-beda h3 { color: #F2F7FC; margin-block: .5rem 1.1rem; }
.dok-beda ul { list-style: none; margin: 0 0 1.2rem; padding: 0; display: grid; gap: .6rem; }
.dok-beda li { position: relative; padding-inline-start: 1.1rem; font-size: .9rem; line-height: 1.55; }
.dok-beda li::before {
  content: ""; position: absolute; inset-block-start: .62em; inset-inline-start: 0;
  inline-size: 5px; block-size: 5px; border-radius: 50%; background: #3E82D6;
}
.dok-beda p { font-size: .9rem; line-height: 1.65; margin-block-end: 1.3rem; color: #9DB3C7; }
.dok-beda .btn {
  border-color: rgba(255,255,255,.22); background: transparent; color: #F2F7FC;
}
.dok-beda .btn:hover { border-color: rgba(255,255,255,.5); background: rgba(255,255,255,.06); }


/* =====================================================================
   HALAMAN VISA

   Halaman ini hanya punya satu pekerjaan: mengubah "saya mau ke Jepang"
   jadi satu halaman visa yang benar, lalu menjawab tiga pertanyaan yang
   selalu menyusul — apa syaratnya, berapa lama, dan uangnya lari ke
   mana. Urutan seksinya persis itu, dan tidak ada seksi yang tidak
   menjawab salah satunya.

   Aturan bentuk yang dipegang di seluruh halaman ini:
     - garis rambut, bukan bayangan. Bayangan hanya untuk yang benar-
       benar melayang: panel daftar dan bilah yang sedang difokus.
     - satu warna aksen, hanya untuk tindakan utama.
     - tidak ada ikon hiasan. Ikon yang tidak menambah arti terbaca
       sebagai gambar tempelan, dan itu yang membuat halaman terlihat
       dibuat mesin.
     - yang bergerak hanya yang disentuh. Latar tidak menari sendiri.
   ===================================================================== */

/* Tanpa overflow:hidden.
   Guilloche-nya sudah dikurung oleh pembungkusnya sendiri, dan
   overflow:hidden di sini memotong panel daftar begitu ia lebih panjang
   daripada sisa kepala halaman — daftar negara yang terpenggal di
   baris kedua adalah cacat yang baru terlihat kalau halamannya
   benar-benar dipakai, bukan kalau hanya dilihat. */
.page-hero-visa {
  position: relative; isolation: isolate; z-index: 1;
  padding-block-end: clamp(2.4rem, 1.8rem + 2.2vw, 3.6rem);
  background: linear-gradient(163deg, #FAFCFF 0%, #EFF6FE 46%, #E2EEFC 100%);
}
.page-hero-visa > .shell { position: relative; z-index: 2; }

.visa-kepala { max-inline-size: 66rem; }
.visa-judul { max-inline-size: 34ch; }
.visa-lede { max-inline-size: 58ch; }
.visa-alat { margin-block-start: clamp(1.9rem, 1.3rem + 1.8vw, 2.9rem); }

/* Hiasan: guilloche — pola garis berjalin yang dipakai di paspor, visa,
   dan uang kertas. Ia dikenali sebagai dokumen resmi tanpa meniru satu
   pun dokumen yang sungguhan ada, dan itu sebabnya ia dipilih
   menggantikan lembar paspor bergambar yang dulu ada di sini.
   Putarannya dua menit penuh: pada kecepatan itu ia terbaca sebagai
   cetakan yang hidup, bukan sebagai animasi yang minta diperhatikan. */
.visa-hias {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  overflow: hidden; color: #0474FC;
}
.hias-guilloche {
  position: absolute; inset-block-start: 50%; inset-inline-end: -4%;
  inline-size: min(34rem, 44vw); aspect-ratio: 1; translate: 0 -50%;
  opacity: .17; animation: guilloche-putar 120s linear infinite;
}
@keyframes guilloche-putar { to { rotate: 360deg; } }
@media (prefers-reduced-motion: reduce) { .hias-guilloche { animation: none; } }
@media (max-width: 900px) {
  .hias-guilloche { inline-size: 32rem; inset-inline-end: -34%; opacity: .09; }
}

/* =====================================================================
   BILAH PENCARIAN

   Satu bilah utuh dengan garis pemisah tipis, bukan tiga kotak yang
   kebetulan bertetangga. Bentuk ini sudah dikenal orang dari pencarian
   tiket dan hotel: satu benda yang diisi dari kiri ke kanan.

   Label kecil di atas, nilai besar di bawah, di setiap medan — supaya
   ketiga jawabannya terbaca sekaligus tanpa harus dibuka satu-satu.
   ===================================================================== */
.vp { display: block; }
.vp[hidden] { display: none; }

.vp-bilah {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0;
  background: var(--paper); border: 1px solid var(--hair-2);
  border-radius: var(--r-xl);
  transition: box-shadow .18s linear, border-color .18s linear;
}
.vp-bilah:focus-within {
  border-color: var(--hair-2);
  box-shadow: 0 1px 2px rgba(13,31,49,.04), 0 12px 30px -18px rgba(13,31,49,.30);
}
@media (min-width: 860px) {
  .vp-bilah { grid-template-columns: 1.2fr 1fr 1fr auto; align-items: stretch; }
}

.vp-medan {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  gap: .22rem; min-inline-size: 0; padding: .8rem 1.1rem;
  border-block-start: 1px solid var(--hair);
  transition: background-color .16s linear;
}
.vp-medan:first-child { border-block-start: 0; }
@media (min-width: 860px) {
  .vp-medan { border-block-start: 0; border-inline-start: 1px solid var(--hair); }
  .vp-medan:first-child { border-inline-start: 0; }
  /* Garis pemisah di kedua sisi medan yang sedang disorot dipadamkan,
     supaya medan itu terbaca sebagai satu petak yang terangkat, bukan
     sebagai sel tabel yang kebetulan berwarna. */
  .vp-medan:hover { background: var(--ground); border-radius: var(--r-lg); }
  .vp-medan:hover, .vp-medan:hover + .vp-medan { border-inline-start-color: transparent; }
}

.vp-label {
  font-family: var(--body); font-size: .7rem; font-weight: 600;
  letter-spacing: .07em; text-transform: uppercase; color: var(--ink-3);
}

.vp-nilai {
  display: flex; align-items: center; gap: .55rem; inline-size: 100%;
  padding: 0; border: 0; background: transparent; border-radius: var(--r-xs);
  font-family: var(--display); font-size: 1.0625rem; font-weight: 600;
  letter-spacing: -.012em; color: var(--ink); text-align: start;
  cursor: pointer; min-inline-size: 0;
  transition: color .16s linear;
}
.vp-nilai:hover { color: var(--accent-2); }
.vp-nilai:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* Terkunci, bukan mati.
   Tanpa atribut `disabled` medannya tetap bisa disinggahi papan ketik
   dan tetap dibacakan — jadi alasannya sampai ke orang yang tidak
   memakai tetikus. Tulisannya menyebut syaratnya sendiri, bukan tanda
   hubung, karena kotak abu-abu tanpa keterangan tidak memberi tahu
   apa pun. */
.vp-medan.is-kunci .vp-nilai { color: var(--ink-3); cursor: default; font-weight: 500; }
.vp-medan.is-kunci:hover { background: transparent; }
.vp-medan.is-kunci .vp-panah { opacity: .28; }

/* Ditunjuk: dipakai saat tombol Cari ditekan sebelum lengkap. Sekali
   jalan, tidak berdenyut terus. */
.vp-medan.is-tunjuk { animation: vp-tunjuk .9s cubic-bezier(.2,.9,.3,1); }
@keyframes vp-tunjuk {
  0%   { box-shadow: inset 0 0 0 0 rgba(4,116,252,.55); }
  22%  { box-shadow: inset 0 0 0 2px rgba(4,116,252,.55); }
  100% { box-shadow: inset 0 0 0 2px rgba(4,116,252,0); }
}
@media (prefers-reduced-motion: reduce) { .vp-medan.is-tunjuk { animation: none; } }

.vp-teks {
  flex: 1; min-inline-size: 0; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
  display: inline-flex; align-items: center;
}
.vp-medan.is-terisi .vp-teks { animation: vp-masuk .22s cubic-bezier(.2,.9,.3,1); }
@keyframes vp-masuk { from { opacity: 0; transform: translateY(.25rem); } }
@media (prefers-reduced-motion: reduce) { .vp-medan.is-terisi .vp-teks { animation: none; } }

.vp-panah {
  inline-size: .46rem; block-size: .46rem; flex: none;
  border-inline-end: 1.6px solid currentColor; border-block-end: 1.6px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); opacity: .45;
  transition: transform .2s cubic-bezier(.2,.9,.3,1);
}
.vp-medan.is-buka .vp-panah { transform: rotate(-135deg) translate(-2px, -2px); }
@media (prefers-reduced-motion: reduce) { .vp-panah { transition: none; } }

/* ------------------------------------------------------------- tombol
   Tidak pernah dimatikan. Tombol yang mati tidak bisa memberi tahu apa
   yang kurang; tombol yang hidup lalu menunjuk medan pertama yang belum
   terisi bisa. Sebelum lengkap ia berwarna netral — jelas ada, jelas
   belum jadi jalan keluar. */
.vp-medan-aksi { justify-content: center; padding: .55rem; }
@media (max-width: 859px) { .vp-medan-aksi { padding: .8rem 1.1rem 1rem; } }

.vp-cari {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  inline-size: 100%; padding: .82rem 1.5rem; border: 0; border-radius: var(--r-md);
  background: var(--ground-2); color: var(--ink-2); cursor: pointer;
  font-family: var(--body); font-size: .9375rem; font-weight: 600;
  white-space: nowrap; transition: background-color .16s linear, color .16s linear;
}
.vp-cari:hover { background: #D5DEE8; }
.vp-cari:active { transform: scale(.985); }
.vp-cari:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.vp-medan-aksi.is-siap .vp-cari { background: var(--accent); color: #fff; }
.vp-medan-aksi.is-siap .vp-cari:hover { background: var(--accent-2); }
@media (prefers-reduced-motion: reduce) { .vp-cari:active { transform: none; } }

.vp-cari-ikon {
  inline-size: .95rem; block-size: .95rem; flex: none;
  border: 1.7px solid currentColor; border-radius: var(--r-full);
  position: relative;
}
.vp-cari-ikon::after {
  content: ""; position: absolute; inset-block-start: .72rem; inset-inline-start: .68rem;
  inline-size: .38rem; block-size: 1.7px; background: currentColor;
  transform: rotate(45deg); transform-origin: 0 50%; border-radius: 2px;
}

/* ------------------------------------------------------ panel pilihan
   Muncul sebagai satu permukaan, sekali gerak. Baris yang masuk satu
   per satu adalah tanda paling cepat terbaca bahwa sebuah tampilan
   dirakit dari templat, bukan dirancang. */
.vp-panel {
  position: absolute; inset-block-start: calc(100% - .35rem); inset-inline: .55rem;
  z-index: 40; padding: .35rem;
  background: var(--paper); border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  box-shadow: 0 2px 8px rgba(13,31,49,.05), 0 24px 56px -26px rgba(13,31,49,.38);
  animation: vp-buka .16s cubic-bezier(.16,1,.3,1);
  transform-origin: 50% 0;
}
.vp-panel[hidden] { display: none; }
@keyframes vp-buka { from { opacity: 0; transform: translateY(-.35rem) scale(.985); } }
@media (prefers-reduced-motion: reduce) { .vp-panel { animation: none; } }
@media (min-width: 860px) { .vp-panel { min-inline-size: 17rem; } }

.vp-saring { padding: .25rem .25rem .4rem; border-block-end: 1px solid var(--hair); margin-block-end: .3rem; }
.vp-saring[hidden] { display: none; }
.vp-saring-isi {
  inline-size: 100%; padding: .5rem .6rem; border-radius: var(--r-sm);
  border: 1px solid var(--hair-2); background: var(--ground);
  font-family: var(--body); font-size: .9rem; color: var(--ink);
}
.vp-saring-isi::placeholder { color: var(--ink-3); }
.vp-saring-isi:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; border-color: transparent; }

.vp-daftar { max-block-size: 19rem; overflow-y: auto; }

.vp-opsi {
  position: relative; display: flex; align-items: center; gap: .7rem;
  padding: .58rem .6rem; border-radius: var(--r-sm);
  color: var(--ink); font-size: .9375rem; cursor: pointer;
  transition: background-color .14s linear;
}
.vp-opsi[hidden] { display: none; }
.vp-opsi:hover, .vp-opsi:focus-visible { background: var(--ground); outline: none; }
.vp-opsi:focus-visible { box-shadow: inset 0 0 0 2px var(--accent); }
.vp-opsi-isi { display: flex; flex-direction: column; gap: .08rem; min-inline-size: 0; }
.vp-opsi-judul { font-family: var(--display); font-weight: 600; letter-spacing: -.012em; }
.vp-opsi-ket { font-family: var(--body); font-size: .8rem; color: var(--ink-3); }

/* Yang terpilih diberi centang DAN tebal, bukan hanya warna latar:
   warna latar sudah dipakai baris yang sedang disorot papan ketik, dan
   dua keadaan berbeda tidak boleh memakai tanda yang sama. */
.vp-centang { margin-inline-start: auto; padding-inline-start: .6rem; flex: none; }
.vp-opsi[aria-selected="true"] .vp-centang::after {
  content: "\2713"; color: var(--accent-2); font-weight: 700;
}
.vp-opsi[aria-selected="true"] .vp-opsi-judul { color: var(--accent-2); }

.vp-nihil { padding: .9rem .7rem; font-size: .88rem; color: var(--ink-3); margin: 0; }
.vp-nihil[hidden] { display: none; }

/* Lencana kode negara — bentuk yang sama dengan AIR, HTL, SIM di papan
   layanan, jadi halaman ini tidak memperkenalkan bahasa baru. */
.vp-kode {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 1.85rem; block-size: 1.85rem; border-radius: var(--r-sm);
  background: var(--ground); color: var(--ink-3);
  font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .04em;
  transition: background-color .14s linear, color .14s linear;
}
.vp-opsi:hover .vp-kode { background: var(--ground-2); color: var(--ink-2); }
.vp-opsi[aria-selected="true"] .vp-kode { background: var(--accent); color: #fff; }
.vp-kode-kecil {
  inline-size: 1.5rem; block-size: 1.5rem; font-size: .6rem;
  margin-inline-end: .5rem; background: var(--accent-wash); color: var(--accent-2);
}

.vp-catatan {
  margin-block-start: .85rem; font-size: .85rem; line-height: 1.6;
  color: var(--ink-3); max-inline-size: 62ch;
}

/* =====================================================================
   KARTU HASIL

   Muncul hanya setelah ketiga tingkat terisi. Ia tidak punya tombolnya
   sendiri: tombolnya sudah ada satu di bilah, dan dua tombol yang
   mengerjakan hal yang sama adalah keraguan, bukan kemudahan.
   ===================================================================== */
.vh {
  margin-block-start: .9rem; padding: 1.05rem 1.2rem;
  background: var(--paper); border: 1px solid var(--hair-2);
  border-radius: var(--r-xl);
}
.vh[hidden] { display: none; }
.vh.is-masuk { animation: vh-masuk .24s cubic-bezier(.16,1,.3,1); }
@keyframes vh-masuk { from { opacity: 0; transform: translateY(-.4rem); } }
@media (prefers-reduced-motion: reduce) { .vh.is-masuk { animation: none; } }

.vh-kepala { display: flex; align-items: center; gap: .8rem; }
.vh-kode {
  display: inline-grid; place-items: center; flex: none;
  inline-size: 2.4rem; block-size: 2.4rem; border-radius: var(--r-md);
  background: var(--accent); color: #fff;
  font-family: var(--mono); font-size: .8rem; font-weight: 600; letter-spacing: .04em;
}
.vh-judul { display: flex; flex-direction: column; gap: .1rem; min-inline-size: 0; }
.vh-judul strong {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink);
}
.vh-varian { font-size: .85rem; color: var(--ink-3); }

.vh-fakta {
  margin: .95rem 0 0; padding-block-start: .9rem;
  border-block-start: 1px solid var(--hair);
  display: grid; gap: .75rem 1.5rem; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
}
.vh-fakta dt {
  font-size: .7rem; font-weight: 600; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3);
}
.vh-fakta dd {
  margin: .2rem 0 0; font-family: var(--display); font-size: 1rem; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.vh-uang dd { font-size: 1.25rem; font-weight: 700; letter-spacing: -.02em; }

/* Pemilih visa di beranda: dipisahkan dari formulir permintaan dengan
   garis dan satu kalimat, supaya jelas bahwa keduanya dua jalan yang
   berbeda — bukan satu formulir panjang. */
.vp-beranda { padding-block-end: 1.1rem; margin-block-end: 1.1rem; border-block-end: 1px solid var(--hair); }
.vp-beranda-atau { margin-block-start: .9rem; font-size: .86rem; color: var(--ink-3); }

/* =====================================================================
   BARIS JUJUR DI BAWAH BILAH

   Satu-satunya "sinyal kepercayaan" di halaman ini, dan ia bukan lencana
   buatan sendiri melainkan pernyataan yang bisa diperiksa: siapa kami,
   siapa yang memutuskan, dan apa yang sebenarnya kami kerjakan. Deretan
   angka tanpa sumber dan logo yang tidak kami wakili justru memakan
   kepercayaan, bukan menambahnya.
   ===================================================================== */
.visa-jujur {
  margin-block-start: 1.05rem; max-inline-size: 74ch;
  font-size: .875rem; line-height: 1.7; color: var(--ink-2);
}
.visa-jujur b { color: var(--ink); font-weight: 600; }

/* =====================================================================
   BIAYA — DUA KANTONG YANG BERBEDA

   Ini bagian yang paling dicari dan paling sering disembunyikan. Dua
   petak sejajar, bukan satu paragraf: uang kedutaan dan uang jasa
   memang dua hal berbeda, dan bentuknya harus mengatakan itu sebelum
   kalimatnya sempat dibaca.
   ===================================================================== */
.biaya { display: grid; gap: 1px; background: var(--hair-solid); border: 1px solid var(--hair-solid); border-radius: var(--r-xl); overflow: hidden; }
@media (min-width: 800px) { .biaya { grid-template-columns: 1fr 1fr; } }

.biaya-sel { background: var(--paper); padding: clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.biaya-n {
  font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .12em; color: var(--ink-4);
}
.biaya-sel h3 {
  font-family: var(--display); font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); margin-block: .55rem .6rem;
}
.biaya-sel p { font-size: .9rem; line-height: 1.7; color: var(--ink-2); margin: 0; }
.biaya-sel p + p { margin-block-start: .7rem; }
.biaya-tanda {
  display: inline-block; margin-block-start: 1rem; padding: .3rem .65rem;
  border-radius: var(--r-full); font-size: .78rem; font-weight: 600;
  background: var(--ground); color: var(--ink-2);
}
.biaya-tanda.tak { background: #FBEDEB; color: #9A3226; }
.biaya-tanda.bisa { background: #E7F4EC; color: #17663E; }

.biaya-kaki {
  margin-block-start: 1.15rem; font-size: .875rem; line-height: 1.7;
  color: var(--ink-2); max-inline-size: 78ch;
}

/* =====================================================================
   CARA KERJANYA

   Empat langkah, kata kerja di depan, dan langkah terakhir adalah
   hasilnya — bukan pekerjaan lain. Rel garis rambut di kiri, nomor di
   atasnya: bentuk yang membaca sebagai urutan waktu tanpa perlu satu
   pun ikon.
   ===================================================================== */
.kerja { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
@media (min-width: 900px) { .kerja { grid-template-columns: repeat(4, 1fr); } }

.kerja li {
  position: relative; padding-block: 1.35rem; padding-inline-start: 0;
  border-block-start: 1px solid var(--hair-solid);
}
@media (min-width: 900px) {
  .kerja li {
    border-block-start: 0; border-inline-start: 1px solid var(--hair-solid);
    padding: 0 1.6rem 0 1.4rem;
  }
  .kerja li:first-child { padding-inline-start: 0; border-inline-start: 0; }
}
.kerja-n {
  display: block; font-family: var(--mono); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; color: var(--accent); margin-block-end: .7rem;
}
.kerja li h3 {
  font-family: var(--display); font-size: 1.05rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink); margin-block-end: .45rem;
}
.kerja li p { font-size: .9rem; line-height: 1.7; color: var(--ink-2); margin: 0; }

/* =====================================================================
   URUS SENDIRI ATAU LEWAT KAMI

   Alasan biaya jasa itu ada, ditulis sebagai perbandingan dan bukan
   sebagai pujian pada diri sendiri. Kolom kiri tidak dibuat konyol —
   mengurus sendiri memang bisa, dan halaman yang berpura-pura
   sebaliknya kehilangan kepercayaan pada kalimat berikutnya.
   ===================================================================== */
/* Lebar minimum supaya di ponsel tabelnya DIGULIR, bukan diperas.
   Tiga kolom yang dipaksa masuk ke 350px berubah jadi tiga tiang
   kata satu-satu — masih ada, tapi tidak lagi bisa dibaca. */
.banding { inline-size: 100%; min-inline-size: 40rem; border-collapse: collapse; font-size: .9rem; }
.banding th, .banding td {
  padding: .95rem 1.1rem; text-align: start; vertical-align: top;
  border-block-start: 1px solid var(--hair-solid);
}
.banding thead th { border-block-start: 0; }
.banding th[scope="col"] {
  font-family: var(--display); font-size: .95rem; font-weight: 700;
  letter-spacing: -.01em; color: var(--ink); white-space: nowrap;
}
.banding th[scope="col"]:last-child { color: var(--accent-2); }
.banding th[scope="row"] {
  font-family: var(--body); font-weight: 600; color: var(--ink);
  inline-size: 30%; min-inline-size: 11rem;
}
.banding td { color: var(--ink-2); line-height: 1.65; }
.banding tbody tr:hover { background: var(--ground); }

/* =====================================================================
   HALAMAN LAYANAN — URUTAN MENGURUS

   Bentuknya deret waktu bernomor dengan rel garis rambut di kiri, bukan
   tiga kartu berikon sejajar. Alasannya bukan gaya: isinya memang
   berurutan dan saling bergantung — tahap tiga tidak bisa dikerjakan
   sebelum tahap satu selesai — dan kartu sejajar justru mengatakan
   sebaliknya, bahwa semuanya setara dan bisa dipilih bebas.
   ===================================================================== */
.urut { list-style: none; margin: 0; padding: 0; }

.urut-baris {
  display: grid; grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.15rem; padding-block: clamp(1.4rem, 1.1rem + .8vw, 2rem);
  border-block-start: 1px solid var(--hair-solid);
}
.urut-baris:first-child { border-block-start: 0; padding-block-start: 0; }

/* Rel yang menyambungkan nomor: garis tipis dari nomor ini ke nomor
   berikutnya, jadi urutannya terbaca sebagai satu jalur, bukan sebagai
   daftar yang kebetulan bernomor. */
.urut-n { position: relative; display: flex; justify-content: center; }
.urut-n span {
  position: relative; z-index: 1;
  display: grid; place-items: center;
  inline-size: 2.5rem; block-size: 2.5rem; border-radius: var(--r-full);
  background: var(--paper); border: 1px solid var(--hair-2);
  font-family: var(--mono); font-size: .8rem; font-weight: 600;
  color: var(--accent-2); letter-spacing: .02em;
}
.urut-baris:not(:last-child) .urut-n::after {
  content: ""; position: absolute; inset-block: 2.5rem -3.5rem;
  inset-inline-start: 50%; inline-size: 1px; background: var(--hair-solid);
}

.urut-kepala {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-block-end: .5rem;
}
.urut-kepala h3 {
  font-family: var(--display); font-size: clamp(1.05rem, 1rem + .3vw, 1.2rem);
  font-weight: 700; letter-spacing: -.018em; color: var(--ink);
}
.urut-kapan {
  font-family: var(--mono); font-size: .74rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-3); white-space: nowrap;
}
.urut-isi p { font-size: .925rem; line-height: 1.72; color: var(--ink-2); max-inline-size: 68ch; }

.urut-svcs { display: flex; flex-wrap: wrap; gap: .45rem; margin-block-start: .9rem; }
.urut-svc, .jenis-pil {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .34rem .7rem .34rem .34rem; border-radius: var(--r-full);
  border: 1px solid var(--hair-2); background: var(--paper);
  font-size: .82rem; font-weight: 500; color: var(--ink-2);
  transition: border-color 140ms linear, color 140ms linear;
}
.urut-svc:hover { border-color: var(--accent); color: var(--accent-2); text-decoration: none; }
/* Lencana di kartu jenis perjalanan bukan tautan, jadi ia tidak boleh
   berperilaku seperti tautan saat disentuh kursor. */
.jenis-pil { cursor: default; }
.urut-svc .code, .jenis-pil .code { flex: none; }

@media (max-width: 640px) {
  .urut-baris { grid-template-columns: minmax(0, 1fr); gap: .8rem; }
  .urut-n { justify-content: flex-start; }
  .urut-baris:not(:last-child) .urut-n::after { display: none; }
}

/* ------------------------------------------------- jenis perjalanan
   Dua kolom, bukan tiga atau empat. Tiap kartu memuat paragraf utuh,
   dan paragraf di kolom selebar sepertiga halaman berubah jadi tiang
   kata yang tidak terbaca. */
.jenis-petak {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 1px; background: var(--hair-solid);
  border: 1px solid var(--hair-solid); border-radius: var(--r-xl); overflow: hidden;
}
@media (min-width: 820px) { .jenis-petak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.jenis { background: var(--paper); padding: clamp(1.3rem, 1.1rem + 1vw, 1.9rem); }
.jenis h3 {
  font-family: var(--display); font-size: 1.1rem; font-weight: 700;
  letter-spacing: -.018em; color: var(--ink); margin-block-end: .55rem;
}
.jenis p { font-size: .9rem; line-height: 1.7; color: var(--ink-2); }
.jenis-pils { display: flex; flex-wrap: wrap; gap: .4rem; margin-block-start: 1.05rem; }
.jenis-pil { font-size: .78rem; padding: .28rem .62rem .28rem .28rem; }

/* =====================================================================
   SASARAN SENTUH

   Diterapkan hanya pada penunjuk kasar — jari. Menaikkan tinggi minimum
   di desktop membuat kerapatan tampilan rusak tanpa menolong siapa pun,
   karena tetikus tidak punya masalah yang sama.

   Angkanya 44px: itu batas yang dipakai pedoman Apple dan yang dipakai
   WCAG 2.5.5. Yang di bawahnya bukan sekadar "agak kecil" — pada jari
   dewasa ia berarti salah tekan, dan salah tekan pada bilah yang isinya
   delapan tautan berdempetan berarti pindah halaman yang tidak diminta.
   ===================================================================== */
@media (pointer: coarse) {
  .urut-svc, .jenis-pil { min-block-size: 44px; }
  .crumbs a { min-block-size: 44px; display: inline-flex; align-items: center; }
  .vp-nilai { min-block-size: 44px; }
  .dp-nav .prev, .dp-nav .next, .rail-btn { inline-size: 44px; block-size: 44px; }
  .dp-day { min-inline-size: 40px; }
  .tlink { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* Pemilih bahasa di kaki lembar menu: kecil dan rapat. Ia perkakas
   tingkat ketiga, dan tiga kotak sebesar tombol membuatnya berebut
   perhatian dengan jam layanan di sebelahnya. */
.sheet-kaki .m-lang { gap: .25rem; flex: none; }
.sheet-kaki .m-lang button {
  min-inline-size: 2.6rem; min-block-size: 2.1rem; padding: .3rem .5rem;
  font-size: .74rem; font-weight: 600;
}

/* =====================================================================
   PAKET GLOBALTIX

   Satu kartu per produk, di dalamnya satu blok per paket. Susunan itu
   mengikuti susunan data mereka — produk, opsi, tipe tiket — dan bukan
   kebetulan: harga melekat pada TIPE TIKET, bukan pada produknya, jadi
   satu produk memang bisa punya beberapa daftar harga yang berbeda.

   Meratakannya jadi satu daftar harga per produk akan menyembunyikan
   perbedaan yang justru menentukan: "Tiket 1 Hari" dan "Express Pass"
   adalah dua barang berbeda dengan aturan tanggal yang berbeda.
   ===================================================================== */
.gtp { display: grid; gap: clamp(1rem, .8rem + .8vw, 1.5rem); align-items: start; }
@media (min-width: 900px) { .gtp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.gtp-harga { margin: .95rem 0 0; display: grid; gap: .1rem; }
.gtp-harga > div {
  display: flex; align-items: baseline; gap: .5rem;
  padding-block: .4rem;
}
.gtp-harga > div + div { border-block-start: 1px solid var(--hair); }
.gtp-harga dt { font-size: .9rem; color: var(--ink-2); flex: none; }
.gtp-umur { font-size: .78rem; color: var(--ink-4); }
.gtp-harga > div::after {
  content: ""; flex: 1 1 auto; margin-block-end: .28rem;
  border-block-end: 1px dotted var(--hair-2);
}
.gtp-harga dd {
  margin: 0; order: 3; flex: none;
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  letter-spacing: -.015em; color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Satu tombol per paket, bukan per tipe tiket. Pesanan lewat WhatsApp
   selalu menyebut jumlah orang, jadi memilih "dewasa" atau "anak" di
   situs tidak menghemat satu langkah pun — ia hanya menambah tombol. */
@media (prefers-reduced-motion: reduce) { .gtp-pesan:active { transform: none; } }

[data-gt-blok][hidden] { display: none; }

/* =====================================================================
   PENCARIAN PAKET DI HALAMAN LAYANAN

   Menyaring daftar yang SUDAH dimuat, bukan meminta ulang ke server.
   Katalog satu halaman layanan puluhan sampai ratusan paket, bukan
   ribuan — jadi seluruhnya sudah ada di tangan sejak awal, dan
   penyaringan yang berjalan sambil mengetik terasa seketika. Meminta
   ulang tiap huruf hanya menambah tunggu untuk pekerjaan yang bisa
   diselesaikan di tempat.
   ===================================================================== */
.gtc {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-block-end: clamp(1.1rem, 1rem + .6vw, 1.6rem);
}

.gtc-cari {
  position: relative; display: flex; align-items: center;
  flex: 1 1 22rem; max-inline-size: 34rem;
  background: var(--paper); border: 1px solid var(--hair-2);
  border-radius: var(--r-lg);
  transition: border-color .16s linear, box-shadow .16s linear;
}
.gtc-cari:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(4,116,252,.12);
}

.gtc-ikon {
  flex: none; margin-inline-start: 1rem;
  inline-size: 15px; block-size: 15px; position: relative;
  border: 1.7px solid var(--ink-4); border-radius: var(--r-full);
}
.gtc-ikon::after {
  content: ""; position: absolute; inset-block-start: 11px; inset-inline-start: 10px;
  inline-size: 6px; block-size: 1.7px; background: var(--ink-4);
  transform: rotate(45deg); transform-origin: 0 50%; border-radius: 2px;
}
.gtc-cari:focus-within .gtc-ikon,
.gtc-cari:focus-within .gtc-ikon::after { border-color: var(--accent); background-color: var(--accent); }
.gtc-cari:focus-within .gtc-ikon { background: none; }

.gtc-cari input {
  flex: 1; min-inline-size: 0; min-block-size: 48px;
  padding: .7rem .9rem; border: 0; background: none;
  font-family: var(--body); font-size: .9375rem; color: var(--ink);
}
.gtc-cari input::placeholder { color: var(--ink-4); }
.gtc-cari input:focus { outline: none; }
/* Tombol hapus bawaan peramban dilepas: ia berbeda bentuk di tiap
   peramban, dan sudah ada tombol sendiri di sebelahnya. */
.gtc-cari input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.gtc-hapus {
  flex: none; inline-size: 40px; block-size: 40px; margin-inline-end: .35rem;
  border: 0; background: none; cursor: pointer;
  font-size: 1.35rem; line-height: 1; color: var(--ink-3);
  border-radius: var(--r-sm);
}
.gtc-hapus:hover { background: var(--ground); color: var(--ink); }
.gtc-hapus[hidden] { display: none; }

.gtc-jumlah {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

/* Tidak ketemu bukan jalan buntu: cakupan mereka lebih luas daripada
   yang terpajang, jadi yang ditawarkan bertanya — bukan permintaan maaf. */
.gtp-nihil {
  margin-block-start: 1.25rem; padding: 1.15rem 1.3rem;
  border: 1px dashed var(--hair-2); border-radius: var(--r-xl);
  font-size: .9rem; line-height: 1.7; color: var(--ink-2); max-inline-size: 68ch;
}
.gtp-nihil[hidden] { display: none; }
.gtp-nihil a { color: var(--accent-2); font-weight: 600; }

@media (max-width: 620px) {
  .gtc { gap: .6rem; }
  .gtc-cari { flex-basis: 100%; max-inline-size: none; }
}

/* =====================================================================
   PEMILIH LAYANAN DI BERANDA

   Ikon di atas nama, berbaris, dengan garis penanda di bawah yang
   berjalan ke tab terpilih. Bentuk ini dipilih karena tugasnya memang
   dua hal sekaligus: MEMBERI TAHU apa saja yang kami kerjakan, dan
   MEMINDAHKAN ke alat yang mengerjakannya. Daftar bertipografi saja
   mengerjakan yang pertama; kotak pencarian saja mengerjakan yang kedua.

   Bukan kapsul mengambang, bukan kartu bertumpuk: penandanya garis
   setebal 2px yang menempel pada garis rambut yang sudah ada. Satu
   lapisan, bukan dua.
   ===================================================================== */
/* Bilah layanan menggeser MENDATAR saja.
   `overflow-x: auto` sendirian tidak cukup: begitu satu sumbu diatur,
   sumbu yang lain ikut jadi bisa digeser, dan di ponsel bilah ini jadi
   bisa ditarik ke atas-bawah juga — nama layanannya tergeser keluar dan
   yang tersisa cuma deretan ikon tanpa keterangan. Sumbu tegaknya
   dikunci, dan geserannya berhenti di ujung, tidak menyeret halaman di
   belakangnya. */
.svc {
  display: flex; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  border-block-end: 1px solid var(--hair-solid);
  margin-block-end: 1rem;
  scroll-padding-inline: 1rem;
}
.svc::-webkit-scrollbar { display: none; }

.svc-btn {
  position: relative; flex: 1 0 auto; scroll-snap-align: center;
  display: flex; flex-direction: column; align-items: center; gap: .5rem;
  min-inline-size: 5.75rem; padding: .85rem .7rem 1rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--body); color: var(--ink-3);
  -webkit-tap-highlight-color: transparent;
  transition: color var(--t-fast) linear;
}
.svc-btn::after {
  content: ''; position: absolute; inset-block-end: -1px; inset-inline: .55rem;
  block-size: 2px; background: var(--accent); border-radius: 2px 2px 0 0;
  transform: scaleX(0); transition: transform 300ms var(--ease);
}
.svc-btn:hover { color: var(--ink); }
.svc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -3px; border-radius: var(--r-sm); }
.svc-btn.is-active { color: var(--ink); }
.svc-btn.is-active::after { transform: scaleX(1); }

.svc-nama {
  font-size: .8125rem; font-weight: 500; line-height: 1.3;
  letter-spacing: -.008em; text-align: center;
}
.svc-btn.is-active .svc-nama { font-weight: 600; }

/* ---- Titik hijau: produknya ada di sistem kami ----
   Denyutnya lingkaran kedua yang mengembang lalu pudar, bukan titiknya
   sendiri yang membesar-mengecil. Titik yang ikut bergerak sulit
   dibaca sebagai penanda keadaan; ia terbaca sebagai kerusakan. */
.svc-titik {
  position: absolute; inset-block-start: -2px; inset-inline-end: -2px;
  inline-size: 9px; block-size: 9px; border-radius: var(--r-full);
  background: #17A34A; box-shadow: 0 0 0 2px var(--paper);
}
.svc-titik::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #17A34A; animation: denyut 2.4s var(--ease) infinite;
}
@keyframes denyut {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.1); opacity: 0; }
  100% { transform: scale(3.1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-titik::after { animation: none; }
}

.svc-ket {
  position: relative; margin-block-end: 1.4rem; padding-inline-start: 1.15rem;
  font-size: .8125rem; line-height: 1.65; color: var(--ink-3);
  max-inline-size: 72ch;
}
.svc-titik-ket {
  position: absolute; inset-block-start: .48rem; inset-inline: 0 auto;
  box-shadow: none;
}


/* =====================================================================
   PANEL KATALOG DI BERANDA

   Layanan yang produknya sudah ada di sistem kami mencari DAN menjawab
   di tempat yang sama. Tidak dipindah ke halaman lain: harganya sudah
   di tangan, dan memindahkan orang untuk menunjukkan sesuatu yang sudah
   kita punya hanya menambah satu tunggu.
   ===================================================================== */
.pane-cari .gtc-cari { flex-basis: 100%; max-inline-size: none; }
.pane-cari .gtc-jumlah { margin-block-start: .85rem; }
.pane-cari .gtp { margin-block-start: 1.25rem; }

/* Sebelum ada yang diketik, katalog dilipat: kartu penuh harga yang
   terpampang sebelum ditanya membuat panel setinggi tiga layar dan
   mengubur bagian beranda yang lain. */
.pane-cari .gtp { display: none; }
.pane-cari.is-buka .gtp { display: grid; }

.pane-belum, .pane-antar {
  margin-block-start: 1.1rem; padding: 1.15rem 1.3rem;
  border: 1px dashed var(--hair-2); border-radius: var(--r-xl);
  font-size: .9rem; line-height: 1.7; color: var(--ink-2); max-inline-size: 68ch;
}
.pane-belum[hidden] { display: none; }

/* Pemisah antara katalog dan formulir rute di panel Transportasi.
   Garis tipis dengan satu kalimat di tengahnya — bukan judul bagian,
   karena ini bukan bagian kedua yang setara melainkan jalan keluar
   untuk yang tidak menemukan rutenya di atas. */
.pane-atau {
  display: flex; align-items: center; gap: .8rem;
  margin-block: 1.4rem .9rem; font-size: .84rem; color: var(--ink-3);
}
.pane-atau::before, .pane-atau::after {
  content: ''; flex: 1; block-size: 1px; background: var(--hair-2);
}
@media (max-width: 620px) { .pane-atau { margin-block: 1.1rem .7rem; font-size: .8rem; } }
.pane-belum a, .pane-antar a { color: var(--accent-2); font-weight: 600; }

/* Tombol yang berlaku sebagai tautan: dipakai pesan gangguan katalog
   untuk "Coba lagi". Ia harus tombol, bukan tautan — tidak ada alamat
   yang dituju, yang terjadi adalah pekerjaan di halaman yang sama, dan
   pembaca layar berhak tahu bedanya. Bentuknya menyamar jadi tautan
   karena di dalam kalimat, bentuk tombol memutus kalimatnya. */
.tautan-tbl {
  appearance: none; border: 0; background: none; padding: 0;
  font: inherit; color: var(--accent-2); font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
  min-block-size: 44px;
}
.tautan-tbl:hover { color: var(--accent); }

.pane-kirim { display: grid; gap: .85rem; }
@container (min-width: 810px) {
  .pane-kirim {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center; gap: 1.25rem;
  }
}

/* ---- Bilah hasil: satu jalan keluar yang selalu terlihat ----
   Saat katalog mengambil alih halaman, satu-satunya hal yang menahan
   orang adalah tidak tahu cara kembali. Bilah ini menempel di atas
   hasil dan menyebut apa yang sedang ditampilkan. */
.hasil-bar {
  display: none; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  margin-block-end: 1.1rem; padding-block-end: 1rem;
  border-block-end: 1px solid var(--hair);
}
.beranda-hasil .hasil-bar { display: flex; }
.hasil-bar p {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.hasil-bar b { color: var(--ink); font-weight: 600; }
.hasil-kembali {
  display: inline-flex; align-items: center; gap: .45rem;
  min-block-size: 40px; padding: .5rem .9rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  font-family: var(--body); font-size: .8125rem; font-weight: 500; color: var(--ink-2);
  transition: border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.hasil-kembali:hover { border-color: var(--ink-4); color: var(--ink); }
.hasil-kembali svg { inline-size: 14px; block-size: 14px; transform: rotate(180deg); }

/* ---- Pengambilalihan ----
   Saat hasil pencarian katalog tampil, sisa beranda disingkirkan. Ini
   yang diminta: "yang lain hilang semua, muncul list harganya". Bukan
   halaman baru — alamatnya tetap, kepala halaman tetap, dan menutup
   hasil mengembalikan berandanya utuh. */
body.beranda-hasil .hero,
body.beranda-hasil main > section:not(#permintaan) { display: none; }
body.beranda-hasil #permintaan { padding-block: var(--ruang-kepala) clamp(2rem, 1.5rem + 2vw, 3.5rem); }
body.beranda-hasil .panel-head { display: none; }
/* Kepala diberi latar padat begitu katalog mengambil alih: di atas
   kartu putih, kepala yang tembus pandang menyatu dengan kartu dan
   tombol WhatsApp-nya tampak menggantung di tepi. */
body.beranda-hasil .site-header { background: var(--paper); border-block-end-color: var(--hair-2); }
/* Bilah hasil sudah menyebut jumlahnya; baris jumlah di dalam panel
   tidak perlu mengulanginya persis di bawahnya. */
body.beranda-hasil .pane-cari .gtc-jumlah { display: none; }

/* Baris jumlah + tombol "lihat semua": angka di kiri, jalan masuk ke
   katalog di kanan. Tombol itu untuk orang yang belum tahu mau mencari
   apa — tanpanya, panel yang belum diketik apa-apa terlihat kosong. */
.gtc-baris {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-block-start: .85rem;
}
.gtc-baris[hidden] { display: none; }
.gtc-semua {
  min-block-size: 40px; padding: .5rem .95rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-md);
  background: var(--paper); cursor: pointer;
  font-family: var(--body); font-size: .8125rem; font-weight: 500; color: var(--accent-2);
  transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.gtc-semua:hover { border-color: var(--accent); background: var(--accent-wash); }
.gtc-semua[hidden] { display: none; }
.gtc-cari[hidden] { display: none; }

/* ---- Bentuk ringkas: satu baris per paket ----
   Untuk produk yang tiap paketnya cuma punya satu harga tanpa golongan
   umur dan tanpa tanggal — eSIM, dan apa pun yang berbentuk sama. Yang
   dibandingkan orang di situ dua angka saja, jadi keduanya berjajar. */
.gtp-esim-asal {
  padding: 0 clamp(1.1rem, 1rem + .6vw, 1.5rem) 1rem;
  font-size: .74rem; color: var(--ink-4);
}

/* ---- eSIM: dua layar ----
   Aturannya di STANDAR.md bagian 10. Layar satu daftar penyedia, layar
   dua halaman satu penyedia. Keduanya rata: baris dipisah garis rambut,
   satu latar dari atas sampai bawah, tingkatnya dibedakan jarak dan
   ukuran huruf — bukan kotak di dalam kotak. */
.gtp.gtp-papan,
.gtp.gtp-papan:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* Di dalam layar satu penyedia, kolom pencarian negara dan sarannya
   tidak menjawab apa pun. Yang menjawab tombol kembali di atas. */
.pane-cari.is-produk .gtc-baris,
.pane-cari.is-produk .gtc-cari,
.pane-cari.is-produk [data-gt-negara] { display: none; }

.gte {
  --pad: clamp(.8rem, .55rem + .6vw, 1.1rem);
  --foto: 44px; --sela: .9rem;
  background: var(--paper); border-block-start: 1px solid var(--hair-solid);
}
@media (min-width: 760px) { .gte { --foto: 48px; } }

/* LAYAR 1 — satu baris per penyedia. Tanpa harga, tanpa tombol pesan:
   harga milik paket, dan paketnya belum dipilih di layar ini. */
.gte-baris {
  inline-size: 100%; display: grid; align-items: center;
  grid-template-columns: var(--foto) minmax(0, 1fr) auto;
  grid-template-areas:
    "foto nama lihat"
    "foto meta lihat";
  column-gap: var(--sela); row-gap: .1rem;
  padding: .85rem var(--pad);
  min-block-size: 72px;
  border: 0; border-block-end: 1px solid var(--hair-solid);
  background: none; text-align: start; cursor: pointer;
  font-family: var(--body); color: inherit;
}
@media (hover: hover) { .gte-baris:hover { background: var(--ground); } }
.gte-baris:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.gte-foto, .gtl-foto {
  overflow: hidden; background: var(--paper);
  border: 1px solid var(--hair-2); border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 700; color: var(--ink-3);
  letter-spacing: -.02em; line-height: 1;
}
.gte-foto { grid-area: foto; font-size: 1.05rem; }
.gtl-foto { font-size: 1.5rem; }
.gte-foto-kosong { background: var(--ground); }
.gte-foto { inline-size: 100%; aspect-ratio: 1; }
/* Gambar pemasok eSIM adalah karya seni kartu: logo, nama operator, tulisan.
   Dipotong memenuhi kotak, tulisannya terbelah ("hancom" dari Omancom).
   Ditampilkan utuh di dalam kotaknya. */
.gte-foto img, .gtl-foto img {
  inline-size: 100%; block-size: 100%; object-fit: contain; display: block;
  background: var(--ground);
}
.gte-nama {
  grid-area: nama; min-inline-size: 0;
  font-family: var(--ui); font-size: 1rem; font-weight: 600;
  letter-spacing: -.008em; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gte-meta {
  grid-area: meta; min-inline-size: 0;
  font-size: .8125rem; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.gte-lihat {
  grid-area: lihat; display: inline-flex; align-items: center; gap: .25rem;
  font-size: .8125rem; font-weight: 500; color: var(--ink-3); white-space: nowrap;
}
.gte-lihat svg { inline-size: 15px; block-size: 15px; color: var(--ink-4); }
.gte-baris:hover .gte-lihat { color: var(--accent-2); }
.gte-baris:hover .gte-lihat svg { color: var(--accent-2); }
@media (max-width: 340px) { .gte-lihat span { display: none; } }

/* LAYAR 2 — halaman satu penyedia. */
.gtl { border-block-start: 1px solid var(--hair-solid); }
.gtl-kembali {
  display: inline-flex; align-items: center; gap: .35rem;
  min-block-size: 44px; padding: 0; margin-block-start: .3rem;
  border: 0; background: none; cursor: pointer;
  font-family: var(--ui); font-size: .875rem; font-weight: 600; color: var(--accent-2);
}
.gtl-kembali svg { inline-size: 18px; block-size: 18px; }
.gtl-kembali .ik-panah, .dalam-kepala .ik-panah { display: none; }
.gtl-kembali:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Baris atas layar produk: kembali di kiri, bagikan di kanan. */
/* Layar produk difokus terprogram saat dibuka (tabindex -1): tanpa cincin. */
.gtl:focus { outline: none; }
.gtl-atas { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.gtl-atas:empty { display: none; }
.gtl-bagikan {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 44px; padding: 0 .9rem; margin-block-start: .3rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-full); background: var(--paper);
  font-family: var(--ui); font-size: .85rem; font-weight: 600; color: var(--ink);
  cursor: pointer; transition: border-color var(--t-fast) linear, background var(--t-fast) linear;
}
.gtl-bagikan:hover { border-color: var(--ink-4); background: var(--ground); }
.gtl-bagikan svg { inline-size: 17px; block-size: 17px; }
.gtl-bagikan:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* =====================================================================
   LEMBAR BAGIKAN — STANDAR bagian 18
   <dialog> di lapisan atas. Di layar lebar: kartu di tengah yang
   memudar masuk sambil naik sedikit. Di ponsel (blok SISTEM PONSEL):
   lembar dari kaki layar. Yang bergerak hanya opacity dan transform.
   ===================================================================== */
body.bagi-terbuka { overflow: hidden; }
.bagi {
  position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: var(--ink);
  display: none; place-items: center;
}
.bagi[open] { display: grid; }
.bagi::backdrop { background: rgba(13,31,49,.42); animation: bagi-latar 200ms linear backwards; }
@keyframes bagi-latar { from { opacity: 0; } to { opacity: 1; } }
.bagi-isi {
  inline-size: min(100% - 2rem, 30rem); background: var(--paper); border-radius: var(--r-xl);
  box-shadow: var(--sh-4); padding: 1rem 1.25rem 1.25rem;
  animation: bagi-masuk 260ms cubic-bezier(.16, 1, .3, 1) backwards;
}
@keyframes bagi-masuk { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.bagi-kepala { display: flex; align-items: center; justify-content: space-between; margin-block-end: .75rem; }
.bagi-judul { margin: 0; font-family: var(--ui); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em; }
.bagi-tutup {
  inline-size: 44px; block-size: 44px; margin-inline-end: -.6rem; border: 0; border-radius: 50%;
  background: none; color: var(--ink-2); cursor: pointer; display: grid; place-items: center;
}
.bagi-tutup:hover { background: var(--ground); }
.bagi-tutup svg { inline-size: 20px; block-size: 20px; }
/* Kartu pratinjau: yang akan dilihat penerima. */
.bagi-kartu {
  display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: .85rem; align-items: center;
  padding: .7rem; border: 1px solid var(--hair-2); border-radius: var(--r-lg); background: var(--ground);
}
.bagi-kartu img { inline-size: 96px; block-size: 72px; object-fit: cover; border-radius: var(--r-md); background: var(--ground-2); }
.bagi-kartu-teks { display: grid; gap: .15rem; min-inline-size: 0; }
.bagi-kartu-teks small { font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
.bagi-kartu-teks b { font-family: var(--ui); font-size: .95rem; line-height: 1.25; letter-spacing: -.015em; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.bagi-kartu-teks span { font-size: .82rem; color: var(--ink-2); }
.bagi-saluran { display: grid; grid-template-columns: repeat(5, 1fr); gap: .5rem; margin-block: 1rem .9rem; }
/* Enam saluran (lima + "Aplikasi lain" di perangkat yang punya lembar
   sistem): tiga per baris, bukan lima lalu satu yang menggantung. */
.bagi-saluran.is-enam { grid-template-columns: repeat(3, 1fr); }
/* Tanpa foto — atau fotonya gagal dimuat — kolom fotonya ikut hilang,
   supaya judul produk memakai seluruh lebar kartu dan tidak terpotong. */
.bagi-kartu.is-tanpa-foto { grid-template-columns: minmax(0, 1fr); }
.bagi-btn {
  display: grid; justify-items: center; gap: .35rem; padding: .6rem .2rem; min-block-size: 44px;
  border-radius: var(--r-md); text-decoration: none; color: var(--ink-2); font-size: .72rem; font-weight: 500;
  transition: background var(--t-fast) linear, transform var(--t-fast) var(--ease);
}
.bagi-btn:hover { background: var(--ground); text-decoration: none; }
.bagi-btn:active { transform: scale(.96); }
.bagi-ikon {
  inline-size: 44px; block-size: 44px; border-radius: 50%; display: grid; place-items: center;
  font-family: var(--ui); font-weight: 700; font-size: 1.05rem; color: #fff; background: var(--ink-2);
}
.bagi-wa .bagi-ikon { background: #128C4A; }
.bagi-tg .bagi-ikon { background: #2AABEE; }
.bagi-fb .bagi-ikon { background: #1877F2; }
.bagi-x .bagi-ikon { background: #0D1F31; }
.bagi-em .bagi-ikon { background: var(--ink-3); }
.bagi-salin { display: flex; gap: .5rem; }
.bagi-salin input {
  flex: 1 1 auto; min-inline-size: 0; min-block-size: 46px; padding: 0 .85rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-md); background: var(--ground);
  font-family: var(--mono); font-size: .8rem; color: var(--ink-2);
}
.bagi-salin .btn { flex: none; min-block-size: 46px; transition: background var(--t-fast) linear, transform var(--t-fast) var(--ease); }
.bagi-salin .btn.is-tersalin { background: #17A34A; transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .bagi::backdrop, .bagi-isi { animation: none; }
  .bagi-btn, .bagi-salin .btn { transition: none; }
}

.gtl-kepala {
  display: grid; grid-template-columns: 56px minmax(0, 1fr);
  gap: .1rem .95rem; align-items: center;
  padding-block: .5rem 1.15rem;
}
@media (min-width: 760px) { .gtl-kepala { grid-template-columns: 64px minmax(0, 1fr); } }
.gtl-foto { inline-size: 100%; aspect-ratio: 1; }
.gtl-teks { min-inline-size: 0; }
.gtl-tempat {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
}
.gtl-nama {
  margin-block-start: .15rem;
  font-family: var(--display); font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem);
  font-weight: 700; letter-spacing: -.025em; line-height: 1.15; color: var(--ink);
}
.gtl-meta { margin-block-start: .25rem; font-size: .875rem; color: var(--ink-2); }
/* Deskripsi produk berdiri di tempatnya, di atas daftar paket — bukan di
   jendela yang menutupi harga yang sedang dibaca orang. Yang panjang
   dilipat, dan tombolnya baru muncul kalau tulisannya memang terpotong. */
.gtl-desk { padding-block: 0 1.1rem; border-block-start: 1px solid var(--hair); padding-block-start: 1rem; }
.gtl-desk-judul {
  font-family: var(--ui); font-size: .8rem; font-weight: 700;
  letter-spacing: .01em; color: var(--ink); margin-block-end: .5rem;
}
.gtl-desk-isi { position: relative; }
.gtl-desk-isi.is-pendek { max-block-size: 10.5rem; overflow: hidden; }
.gtl-desk-isi.is-pendek.is-potong {
  -webkit-mask-image: linear-gradient(to bottom, #000 72%, transparent);
          mask-image: linear-gradient(to bottom, #000 72%, transparent);
}
.gtl-desk-lagi {
  margin-block-start: .5rem; padding: 0; min-block-size: 32px;
  border: 0; background: none; cursor: pointer;
  font-family: var(--ui); font-size: .8125rem; font-weight: 600; color: var(--accent-2);
}
.gtl-desk-lagi:hover { text-decoration: underline; text-underline-offset: 3px; }
.gtl-desk-lagi[hidden] { display: none; }
.gtl-info:hover { text-decoration: underline; text-underline-offset: 3px; }
.gtl-tabel { border-block-start: 1px solid var(--hair-solid); }
/* Rangka tabel paket saat rinciannya belum tiba (STANDAR 21): baris-baris
   setinggi baris paket dengan kilau pelan; layar tidak melompat saat
   paketnya masuk. Tanpa gerak bila pengguna memintanya. */
.gtl-rangka { display: grid; gap: 1px; }
.gtl-rangka-baris {
  block-size: 64px; border-block-end: 1px solid var(--hair);
  background: linear-gradient(90deg, var(--ground) 0%, var(--ground-2) 40%, var(--ground) 80%);
  background-size: 200% 100%; animation: gtl-kilau 1.4s ease-in-out infinite;
}
@keyframes gtl-kilau { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .gtl-rangka-baris { animation: none; background: var(--ground); } }
.gtl-paket-gagal { padding: 1rem 0; font-size: .92rem; color: var(--ink-2); line-height: 1.6; }
.gtl-paket-gagal .tautan-tbl { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent-2); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }

/* Daftar paket — dipakai di layar penyedia. */
.gte-kepala {
  display: none;
  font-family: var(--mono); font-size: .68rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-4);
  padding-block: .55rem; border-block-end: 1px solid var(--hair);
}
.gte-paket + .gte-paket > .gte-pbaris { border-block-start: 1px solid var(--hair); }
.gte-pbaris {
  inline-size: 100%; display: grid; align-items: center;
  grid-template-columns: minmax(0, 1fr) auto 24px;
  grid-template-areas: "data harga panah" "masa harga panah";
  column-gap: .8rem; row-gap: .05rem;
  min-block-size: 58px; padding-block: .6rem;
  border: 0; background: none; text-align: start; cursor: pointer;
  font-family: var(--body); color: inherit;
}
@media (hover: hover) { .gte-pbaris:hover { background: var(--ground); } }
.gte-pbaris:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gte-pdata { grid-area: data; font-size: .95rem; font-weight: 600; color: var(--ink); }
.gte-pmasa { grid-area: masa; font-size: .8125rem; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.gte-pharga {
  grid-area: harga; justify-self: end;
  font-family: var(--display); font-size: 1rem; font-weight: 700;
  color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -.015em;
}
.gte-panah {
  grid-area: panah; display: inline-flex; align-items: center; justify-content: center;
  inline-size: 24px; block-size: 24px; color: var(--ink-4);
}
.gte-panah svg { inline-size: 18px; block-size: 18px; transition: transform .18s ease; }
.gte-paket.is-buka .gte-panah svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .gte-panah svg { transition: none; } }

@media (min-width: 760px) {
  .gte-kepala {
    display: grid; grid-template-columns: minmax(0, 1fr) 9rem 9rem 24px;
    column-gap: 1.2rem;
  }
  .gte-kepala span:nth-child(3) { text-align: end; }
  .gte-pbaris {
    grid-template-columns: minmax(0, 1fr) 9rem 9rem 24px;
    grid-template-areas: "data masa harga panah";
    column-gap: 1.2rem; min-block-size: 54px;
  }
  .gte-pmasa { justify-self: start; }
}

/* Tingkat tiga — rincian satu paket. */
.gte-rinci {
  padding: .3rem .15rem 1.1rem .9rem;
  border-inline-start: 2px solid var(--accent-wash);
  margin-block-end: .35rem;
}
/* Lipatan rincian paket: 0fr → 1fr (STANDAR bagian 4). */
.gte-lipat { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 240ms var(--ease); }
.gte-lipat.is-buka { grid-template-rows: 1fr; }
.gte-lipat[hidden] { display: none; }
.gte-lipat-isi { min-block-size: 0; overflow: hidden; }
/* Pergantian layar katalog: isi baru memudar sambil naik sedikit. */
@keyframes gt-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* ISIAN ANIMASI: "backwards", TIDAK PERNAH "both".
   Animasi yang menggerakkan transform dan diisi "both" meninggalkan
   transform identitas setelah selesai. Matriks identitas pun tetap
   membuat elemennya jadi acuan bagi keturunannya yang position:fixed —
   dan layar penuh yang digambar di dalamnya menyusut jadi sebesar
   elemen itu. Sudah tiga kali terjadi di berkas ini: layar tugas, panel
   beranda, dan panel katalog. Kalau menambah animasi transform baru,
   pakai backwards. */
.gtp.gt-ganti > * { animation: gt-masuk 240ms var(--ease) backwards; }
/* Hasil katalog mengambil alih beranda dengan gerak yang sama. */
body.beranda-hasil #permintaan .panel { animation: gt-masuk 260ms var(--ease) backwards; }
@media (prefers-reduced-motion: reduce) {
  .gte-lipat { transition: none; }
  .gtp.gt-ganti > *, body.beranda-hasil #permintaan .panel { animation: none; }
}
/* Ketentuan paket: sebaris keterangan berlabel kecil, bukan tabel tiga
   kolom. Isinya paling banyak empat, dan tidak satu pun butuh kolom. */
.gte-fakta {
  margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 2rem;
  padding-block: .1rem .8rem; border-block-end: 1px solid var(--hair);
}
.gte-fakta > div { display: flex; flex-direction: column; gap: .1rem; }
.gte-fakta dt { font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.gte-fakta dd { margin: 0; font-size: .875rem; color: var(--ink); }
.gte-sub {
  margin-block-start: .9rem; font-family: var(--ui);
  font-size: .8rem; font-weight: 700; color: var(--ink);
}
.gte-langkah {
  list-style: decimal; margin: .35rem 0 0; padding-inline-start: 1.15rem;
  display: grid; gap: .25rem; font-size: .84rem; line-height: 1.6; color: var(--ink-2);
}

/* Isi rincian paket memakai gaya prosa yang sama dengan lembar detail —
   satu bahasa visual untuk teks pemasok di mana pun ia muncul. */
.gte-rinci .gtd-prosa { font-size: .86rem; line-height: 1.65; margin-block-start: .35rem; }
.gte-rinci .gtd-dua {
  display: grid; gap: .25rem 1.75rem; margin-block-start: .35rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.gte-rinci .gtd-ya, .gte-rinci .gtd-tidak, .gte-rinci .gtd-titik {
  font-size: .84rem; margin-block-start: .3rem;
}
.gte-rinci .gtd-lipat { margin-block-start: .9rem; }
.gte-rinci .gtd-lipat summary {
  font-family: var(--ui); font-size: .8rem; font-weight: 600;
  color: var(--ink-2); cursor: pointer; min-block-size: 32px;
  display: flex; align-items: center;
}
.gte-rinci .gtd-lipat summary:hover { color: var(--accent-2); }
.gte-rinci .gtd-lipat[open] summary { margin-block-end: .35rem; }

/* Satu-satunya tombol pesan, dan ia baru ada sesudah paketnya dipilih. */
.gte-pesan {
  display: flex; align-items: center; justify-content: center;
  min-block-size: 46px; margin-block-start: 1rem; padding-inline: 1rem;
  border-radius: var(--r-md); background: var(--wa); color: #fff;
  font-family: var(--body); font-size: .9rem; font-weight: 600; text-align: center;
}
.gte-pesan:hover { background: #0F7A40; color: #fff; text-decoration: none; }
@media (min-width: 760px) { .gte-pesan { display: inline-flex; } }

.gte-asal {
  margin: 0; padding-block: .9rem 0; font-size: .72rem; color: var(--ink-4);
}

.gtd-prosa { font-size: .94rem; line-height: 1.7; color: var(--ink-2); }
.gtd-prosa p + p, .gtd-prosa ul, .gtd-prosa ol { margin-block-start: .6rem; }
.gtd-prosa ul, .gtd-prosa ol { padding-inline-start: 1.2rem; }
.gtd-prosa li + li { margin-block-start: .25rem; }
.gtd-prosa strong { color: var(--ink); font-weight: 600; }
.gtd-prosa h3, .gtd-prosa h4 { font-size: .95rem; font-weight: 700; color: var(--ink); margin-block: .8rem .3rem; }
.gtd-ya, .gtd-tidak, .gtd-titik {
  list-style: none; margin: 0; padding: 0; display: grid; gap: .4rem;
  font-size: .92rem; line-height: 1.55; color: var(--ink-2);
}
.gtd-ya li, .gtd-tidak li, .gtd-titik li { display: flex; gap: .55rem; align-items: flex-start; }
.gtd-ya li::before, .gtd-tidak li::before, .gtd-titik li::before {
  content: ''; flex: none; inline-size: 16px; block-size: 16px; margin-block-start: .2em; border-radius: 50%;
}
.gtd-ya li::before {
  background: var(--accent-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M3.5 7.2l2.3 2.3 4.7-4.9' fill='none' stroke='%230356C4' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.gtd-tidak li::before {
  background: #FBECEC url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M4.5 4.5l5 5M9.5 4.5l-5 5' fill='none' stroke='%23B42318' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.gtd-titik li::before {
  inline-size: 6px; block-size: 6px; margin: .55em .55rem 0 .3rem; background: var(--ink-4);
}
.gtd-dua { display: grid; gap: 0 1.5rem; }
@media (min-width: 640px) { .gtd-dua { grid-template-columns: 1fr 1fr; } }
.gtd-langkah { list-style: decimal; margin: 0; padding-inline-start: 1.3rem; display: grid; gap: .35rem; font-size: .92rem; line-height: 1.55; color: var(--ink-2); }
.gtd-lipat { margin-block-start: 1rem; border-block-start: 1px solid var(--hair-2); padding-block-start: .8rem; }
.gtd-lipat summary { cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--ink-2); list-style: none; display: flex; align-items: center; gap: .4rem; }
.gtd-lipat summary::-webkit-details-marker { display: none; }
.gtd-lipat summary::before { content: '+'; font-family: var(--mono); color: var(--ink-4); }
.gtd-lipat[open] summary::before { content: '−'; }
.gtd-lipat .gtd-prosa { margin-block-start: .6rem; font-size: .86rem; }
/* =====================================================================
   KATALOG ATRAKSI & TIKET — STANDAR bagian 13
   Bilah saringan (negara → wilayah) dan chip kategori di atas petak
   kartu selebar halaman, lalu layar produk.
   ===================================================================== */
.gtk { display: grid; gap: 1rem; align-items: start; }

/* ---- Bilah saringan: Negara → Wilayah ---- */
.gtk-bilah {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--hair-2); border-radius: 12px; background: var(--paper);
  max-inline-size: 36rem;
}
.gtk-sel:first-child { border-start-start-radius: 11px; border-end-start-radius: 11px; box-shadow: none; }
.gtk-sel:last-child { border-start-end-radius: 11px; border-end-end-radius: 11px; }
.gtk-sel {
  display: flex; flex-direction: column; gap: .05rem; min-inline-size: 0;
  padding: .5rem .95rem .45rem; box-shadow: -1px 0 0 var(--hair);
  transition: background-color var(--t-fast) linear;
}
.gtk-sel:focus-within { background: var(--accent-wash); }
.gtk-sel-label { font-size: .7rem; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.gtk-sel-input {
  appearance: none; inline-size: 100%; min-block-size: 1.8rem; padding: 0 1.5rem 0 0;
  border: 0; background: transparent; color: var(--ink); cursor: pointer;
  font-family: var(--body); font-size: max(16px, .95rem); font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E869F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0 center; background-size: 15px;
  text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.gtk-sel-input:focus { outline: none; }
.gtk-sel.is-aktif .gtk-sel-input { color: var(--accent-2); }
/* Pemilih milik situs di dalam sel bilah: tanpa bingkai sendiri, selnya
   yang menyala; menunya (.combo-menu) memakai gaya yang sama dengan
   formulir permintaan. */
.gtk-sel .combo { position: static; }
.gtk-sel { position: relative; }
.gtk-sel .combo-btn { padding: .1rem 0; border: 0; border-radius: 0; background: none; box-shadow: none; font-size: 1rem; font-weight: 500; min-block-size: 1.8rem; }
.gtk-sel .combo-btn:hover, .gtk-sel .combo-btn:focus-visible, .gtk-sel .combo.is-open .combo-btn { border: 0; box-shadow: none; }
.gtk-sel:has(.combo.is-open) { background: var(--accent-wash); }
.gtk-sel.is-aktif .combo-val { color: var(--accent-2); }
.gtk-sel .combo-menu { inset-inline: -1px; inset-block-start: calc(100% + 1px); }

/* ---- Chip kategori ---- */
.gtk-kat-baris {
  display: flex; gap: .45rem; flex-wrap: wrap; align-items: center;
}
.gtk-kchip {
  display: inline-flex; align-items: center; gap: .4rem;
  min-block-size: 36px; padding: .25rem .85rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-full); background: var(--paper);
  font-family: var(--body); font-size: .82rem; font-weight: 500; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear, color var(--t-fast) linear;
  white-space: nowrap;
}
@media (hover: hover) { .gtk-kchip:hover { border-color: var(--ink-4); color: var(--ink); } }
.gtk-kchip.is-aktif { background: var(--ink); border-color: var(--ink); color: #fff; }
.gtk-kchip-n { font-size: .72rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.gtk-kchip.is-aktif .gtk-kchip-n { color: rgba(255,255,255,.7); }
.gtk-kchip-hapus { border-color: transparent; color: var(--accent-2); font-weight: 600; padding-inline: .5rem; }
@media (hover: hover) { .gtk-kchip-hapus:hover { border-color: transparent; text-decoration: underline; text-underline-offset: 3px; } }
@media (pointer: coarse) { .gtk-kchip { min-block-size: 44px; } }
/* Di layar sempit baris chip digeser mendatar, tidak menumpuk. */
@media (max-width: 620px) {
  .gtk-kat-baris {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad); -webkit-overflow-scrolling: touch;
  }
  .gtk-kat-baris::-webkit-scrollbar { display: none; }
  .gtk-bilah { max-inline-size: none; }
}

.gtk-isi { min-inline-size: 0; display: grid; gap: .9rem; margin-block-start: .25rem; }

/* ---- Petak kartu: empat kolom, kartu tanpa bingkai ---- */
.gtk-petak { display: grid; gap: clamp(.9rem, .6rem + 1.2vw, 1.5rem) clamp(.7rem, .5rem + .8vw, 1.1rem); grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .gtk-petak { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px) { .gtk-petak { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.gtk-kartu {
  display: flex; flex-direction: column; gap: .65rem; text-align: start; inline-size: 100%;
  padding: 0; border: 0; border-radius: var(--r-lg);
  background: none; cursor: pointer; font-family: var(--body); color: inherit;
}
.gtk-kartu:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.gtk-foto {
  display: block; position: relative; aspect-ratio: 4 / 3; background: var(--ground); overflow: hidden;
  border-radius: var(--r-lg);
}
.gtk-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 700ms var(--ease); }
@media (hover: hover) { .gtk-kartu:hover .gtk-foto img { transform: scale(1.04); } }
/* Logo penyelenggara: utuh, bukan dipotong, di atas latar terang. */
.gtk-foto.is-logo, .gtk-gfoto.is-logo { background: #fff; box-shadow: inset 0 0 0 1px var(--hair); }
.gtk-foto.is-logo img, .gtk-gfoto.is-logo img { object-fit: contain; padding: 12%; box-sizing: border-box; }
.gtk-foto.is-kosong, .gtk-gfoto.is-kosong {
  display: grid; place-items: center; font-family: var(--display); font-weight: 700;
  font-size: 2rem; color: var(--ink-4); background: var(--ground);
}
.gtk-teks { display: flex; flex-direction: column; gap: .18rem; padding: 0 .1rem; min-inline-size: 0; flex: 1 1 auto; }
.gtk-kat { font-size: .74rem; color: var(--ink-3); }
.gtk-nama {
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
}
.gtk-tempat { font-size: .8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gtk-kaki { display: flex; align-items: baseline; gap: .4rem; margin-block-start: .25rem; }
.gtk-harga { font-size: .8rem; color: var(--ink-3); white-space: nowrap; }
.gtk-harga b { font-family: var(--display); font-size: .95rem; font-weight: 700; color: var(--ink); letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gtk-n { font-size: .78rem; color: var(--ink-4); white-space: nowrap; }
.gtk-n::before { content: '· '; }

/* Penanda kartu: satuan harga dan voucher yang menyusul.
   Dibuat setenang mungkin — ini keterangan, bukan promosi. Yang
   berwarna hanya "voucher menyusul", karena itu satu-satunya yang bisa
   membuat orang berdiri di bandara tanpa apa pun di tangan. */
.gtk-tanda {
  display: flex; flex-wrap: wrap; gap: .3rem; margin-block-start: .35rem;
}
.gtk-satuan, .gtk-kirim {
  font-size: .68rem; line-height: 1.5; padding: .05rem .4rem;
  border-radius: 999px; white-space: nowrap;
}
.gtk-satuan { color: var(--ink-2); background: var(--ground-2); }
.gtk-kirim { color: #7A4A06; background: #FDF1DC; }
@media (prefers-color-scheme: dark) {
  .gtk-kirim { color: #f3c98b; background: rgba(243, 201, 139, .13); }
}
/* Di ponsel kartunya baris mendatar: foto kecil di kiri, teks di kanan. */
@media (max-width: 620px) {
  .gtk-petak { grid-template-columns: 1fr; gap: 1rem; }
  .gtk-kartu { flex-direction: row; align-items: flex-start; gap: .85rem; }
  .gtk-foto { flex: 0 0 36%; max-inline-size: 9.5rem; aspect-ratio: 4 / 3; }
  .gtk-foto.is-kosong { font-size: 1.5rem; }
  .gtk-teks { padding: .1rem 0 0; }
  .gtk-nama { font-size: .95rem; }
  .gtk-kaki { flex-wrap: wrap; gap: .2rem .4rem; }
}
.gtk-kosong { font-size: .92rem; color: var(--ink-2); line-height: 1.6; padding-block: .5rem; }
.gtk-kosong-lepas { border: 0; background: none; padding: 0; font: inherit; font-weight: 600; color: var(--accent-2); cursor: pointer; }

/* ---- Halaman katalog (STANDAR bagian 19) ----
   Satu baris di kaki daftar: keterangan di kiri, nomor halaman di
   tengah, isi per halaman di kanan. Tombolnya sekeluarga dengan chip
   saringan (garis tipis, bulat), yang aktif diisi tinta gelap — bukan
   biru, supaya tidak bersaing dengan tombol tindakan. Sasaran sentuh
   40px di layar lebar, 44px di ponsel. Dipakai atraksi dan eSIM. */
.gth {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .75rem 1.25rem;
  margin-block-start: clamp(1.4rem, 1rem + 1.4vw, 2.2rem); padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--hair-solid);
  font-family: var(--body);
}
.gth-ket { margin: 0; font-size: .85rem; color: var(--ink-3); }
.gth-ket b { font-weight: 600; color: var(--ink-2); }
.gth-deret { display: flex; align-items: center; justify-content: center; gap: .3rem; }
.gth-nomor, .gth-panah {
  display: inline-grid; place-items: center; min-inline-size: 40px; block-size: 40px; padding: 0 .55rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-full); background: var(--paper);
  font-family: var(--ui); font-size: .86rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.gth-panah svg { inline-size: 18px; block-size: 18px; }
.gth-nomor.is-aktif { background: var(--ink); border-color: var(--ink); color: #fff; cursor: default; }
.gth-panah:disabled { color: var(--ink-4); border-color: var(--hair); cursor: default; }
.gth-titik { min-inline-size: 1.4rem; text-align: center; color: var(--ink-4); font-size: .9rem; user-select: none; }
@media (hover: hover) {
  .gth-nomor:not(.is-aktif):hover, .gth-panah:not(:disabled):hover { border-color: var(--ink-4); color: var(--ink); }
}
.gth-nomor:focus-visible, .gth-panah:focus-visible, .gth-per-tbl:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.gth-per { display: flex; align-items: center; justify-content: flex-end; gap: .35rem; }
.gth-per-label { font-size: .8rem; color: var(--ink-3); margin-inline-end: .3rem; }
.gth-per-tbl {
  min-inline-size: 40px; block-size: 34px; padding: 0 .6rem;
  border: 1px solid var(--hair-2); border-radius: var(--r-full); background: var(--paper);
  font-family: var(--ui); font-size: .82rem; font-weight: 600; color: var(--ink-2); cursor: pointer;
  transition: border-color var(--t-fast) linear, background-color var(--t-fast) linear, color var(--t-fast) linear;
}
.gth-per-tbl.is-aktif { background: var(--ground-2); border-color: var(--ground-2); color: var(--ink); cursor: default; }
@media (hover: hover) { .gth-per-tbl:not(.is-aktif):hover { border-color: var(--ink-4); color: var(--ink); } }
/* Papan eSIM: barisnya menempel tepi dan sudah bergaris bawah, jadi kaki
   halamannya diberi sela dan tidak menggandakan garisnya. */
.gte + .gth { padding-inline: var(--pad, 1rem); border-block-start: 0; margin-block-start: .4rem; }
@media (max-width: 1100px) {
  .gth { grid-template-columns: 1fr 1fr; }
  .gth-deret { grid-column: 1 / -1; grid-row: 1; }
}
@media (max-width: 780px) {
  .gth { grid-template-columns: 1fr; justify-items: center; gap: .9rem; text-align: center; }
  .gth-deret { grid-row: auto; gap: .25rem; }
  .gth-nomor, .gth-panah { min-inline-size: 44px; block-size: 44px; }
  .gth-per { justify-content: center; }
  .gth-per-tbl { block-size: 44px; min-inline-size: 48px; }
}
.gtk-kosong-lepas:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ---- Layar produk ---- */
/* Galeri mosaik: satu besar di kiri, sampai empat kecil di kanan.
   Tingginya dikunci supaya foto pemasok yang tinggi tidak memakan
   satu layar penuh sebelum nama tempatnya terbaca. */
.gtk-galeri { display: grid; gap: .4rem; border-radius: var(--r-lg); overflow: hidden; margin-block: .25rem 1.1rem; }
.gtk-gfoto {
  display: block; position: relative; background: var(--ground); overflow: hidden;
  min-block-size: 0; min-inline-size: 0; padding: 0; border: 0; cursor: zoom-in;
  font-family: var(--body); color: inherit;
}
.gtk-gfoto img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; transition: transform 500ms var(--ease); }
@media (hover: hover) { .gtk-gfoto:hover img { transform: scale(1.03); } }
.gtk-gfoto:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Petak terakhir menyebut sisa foto yang tidak muat di mosaik. */
.gtk-gfoto-lagi, .gtk-gfoto[data-sisa-hp]::after {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 16, 28, .48); color: #fff;
  font-family: var(--ui); font-weight: 600; font-size: .95rem; letter-spacing: -.01em;
}
.gtk-gfoto[data-sisa-hp]::after { content: attr(data-sisa-hp); display: none; }
.gtk-galeri-1 .gtk-gfoto { block-size: clamp(11rem, 30vw, 22rem); }
.gtk-galeri-2 { grid-template-columns: 1fr 1fr; grid-template-rows: clamp(9rem, 24vw, 18rem); }
.gtk-galeri-3 { grid-template-columns: 2fr 1fr; }
.gtk-galeri-4, .gtk-galeri-5 { grid-template-columns: 2fr 1fr 1fr; }
.gtk-galeri-3, .gtk-galeri-4, .gtk-galeri-5 { grid-template-rows: repeat(2, clamp(6.5rem, 13vw, 10.5rem)); }
.gtk-galeri-3 .gtk-gfoto:first-child, .gtk-galeri-4 .gtk-gfoto:first-child, .gtk-galeri-5 .gtk-gfoto:first-child { grid-row: 1 / span 2; }
.gtk-galeri-4 .gtk-gfoto:nth-child(4) { grid-column: 2 / span 2; }
/* Mozaik di bawah 780px diatur di SISTEM PONSEL (STANDAR 18): satu foto
   besar di atas, tiga petak di bawah, petak keempat menyebut sisanya. */
.gtk-kepala { padding-block-end: 1rem; }
.gtk-kepala .gtl-nama { font-size: clamp(1.35rem, 1.2rem + .8vw, 1.85rem); line-height: 1.15; }
.gtk-fakta {
  display: flex; flex-wrap: wrap; gap: .6rem 2rem; padding: .85rem 0;
  border-block-start: 1px solid var(--hair); font-size: .875rem; color: var(--ink-2);
}
.gtk-fakta-butir { display: flex; flex-direction: column; gap: .1rem; }
/* Tempat galeri selagi rincian produk menyusul dari server: sebentuk
   dan seukuran galeri yang akan menggantikannya, berdenyut lembut. */
.gtl-tunggu-galeri {
  aspect-ratio: 16 / 8; border-radius: var(--r-lg); background: var(--ground);
  animation: tunggu-denyut 1.2s ease-in-out infinite alternate;
}
@keyframes tunggu-denyut { from { opacity: .55; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .gtl-tunggu-galeri { animation: none; } }
@media (max-width: 780px) {
  .layar-hp .gtl-tunggu-galeri {
    aspect-ratio: auto; block-size: var(--hp-galeri); border-radius: 0;
    margin-inline: calc(var(--pad) * -1);
  }
}

/* Catatan operasional yang lebih dari satu butir: daftar tanpa peluru,
   satu baris satu keterangan. */
.gtk-jam { list-style: none; margin: 0; padding: 0; display: grid; gap: .2rem; }
.gtk-jam li { line-height: 1.5; }
.gtk-fakta-label { font-family: var(--mono); font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); }
.gtk-peta { font-weight: 600; color: var(--accent-2); }
.gtk-peta:hover { text-decoration: underline; text-underline-offset: 3px; }
.gtk-sorotan { padding: 1rem 0 1.1rem; border-block-start: 1px solid var(--hair); }
.gtk-tabel-judul { padding-block: 1rem .35rem; }
.gtk-pbaris .gte-pdata { font-weight: 600; color: var(--ink); }
.gtk-pdari { font-family: var(--body); font-size: .78rem; font-weight: 500; color: var(--ink-3); letter-spacing: 0; }
.gtk-rinci .gtp-harga { margin: 0 0 .9rem; }
.gtk-rinci .gtp-harga dd { font-family: var(--display); font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Satu kartu sendirian tidak boleh merentang selebar dua kolom, dan
   tidak boleh pula tampak seperti kolom kedua yang gagal dimuat.
   Ia dapat lebar satu kartu, rata kiri sejajar kotak pencarian. */
.gtp:has(> :only-child) { grid-template-columns: minmax(0, 30rem); }

/* =====================================================================
   HALAMAN PENJELAS

   Halaman layanan tidak lagi memajang kotak pencarian kedua. Yang
   tersisa penjelasan, dan penjelasan punya bentuknya sendiri: baris
   bernomor dengan judul perkaranya di kolom kiri, dua cara
   mengerjakannya berdampingan di kanan.

   Sengaja BUKAN petak kartu sejajar. Yang dibandingkan dua cara
   mengerjakan satu perkara yang sama; kartu sejajar mengatakan
   sebaliknya — bahwa keduanya dua pilihan setara yang berdiri
   sendiri-sendiri.
   ===================================================================== */
.kmp { list-style: none; margin: 0; padding: 0; }
.kmp-baris {
  display: grid; gap: 1rem;
  padding-block: clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem);
  border-block-start: 1px solid var(--hair-solid);
}
.kmp-baris:last-child { border-block-end: 1px solid var(--hair-solid); }
@media (min-width: 880px) {
  .kmp-baris {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: clamp(1.5rem, 1rem + 2.5vw, 3.5rem);
  }
}

.kmp-kiri { display: flex; align-items: baseline; gap: .8rem; }
.kmp-n {
  font-family: var(--mono); font-size: .78rem; color: var(--accent);
  letter-spacing: .06em; flex: none; font-variant-numeric: tabular-nums;
}
.kmp-judul {
  font-family: var(--display);
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem); font-weight: 700;
  letter-spacing: -.02em; line-height: 1.25; color: var(--ink);
}
.kmp-isi { font-size: .9375rem; line-height: 1.72; color: var(--ink-2); max-inline-size: 66ch; }

/* Dua sisi, dipisah satu garis rambut tegak. Sisi aplikasi tidak
   dicoret dan tidak diberi warna merah: yang dituju bukan mengejek
   aplikasi, melainkan menunjukkan batasnya. */
.kmp-adu {
  display: grid; gap: 1rem; margin-block-start: 1.15rem;
  padding-block-start: 1.1rem; border-block-start: 1px solid var(--hair);
}
@media (min-width: 620px) {
  .kmp-adu { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .kmp-kami { padding-inline-start: clamp(1.1rem, .8rem + 1.2vw, 2rem); border-inline-start: 1px solid var(--hair-solid); }
  .kmp-app { padding-inline-end: clamp(1.1rem, .8rem + 1.2vw, 2rem); }
}
.kmp-lbl {
  display: block; margin-block-end: .4rem;
  font-family: var(--mono); font-size: .69rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4);
}
.kmp-kami .kmp-lbl { color: var(--accent-2); }
.kmp-sisi p { font-size: .875rem; line-height: 1.7; color: var(--ink-3); }
.kmp-kami p { color: var(--ink-2); }

/* Keterangan bersumber. Sumbernya terbuka dan bisa ditekan, bukan
   disembunyikan: halaman yang mengaku tahu aturan maskapai dan kedutaan
   harus siap ditanya dari mana tahunya. */
.fakta {
  margin-block-start: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem);
  padding-inline-start: clamp(1.1rem, .9rem + .8vw, 1.6rem);
  border-inline-start: 3px solid var(--accent);
  max-inline-size: 72ch;
}
.fakta-t {
  font-family: var(--display);
  font-size: clamp(1.05rem, .98rem + .4vw, 1.25rem); font-weight: 600;
  letter-spacing: -.015em; line-height: 1.5; color: var(--ink);
}
.fakta-s {
  margin-block-start: .6rem;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-4);
}
/* Tautan sumber berdiri sendiri di barisnya, bukan di tengah kalimat,
   jadi pengecualian "tautan dalam kalimat" pada aturan sasaran sentuh
   tidak berlaku untuknya. Ia diberi tinggi sendiri. */
.fakta-s a {
  display: inline-block; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
}
.fakta-s a:hover { color: var(--accent-2); }
@media (pointer: coarse) {
  .fakta-s a { min-block-size: 44px; padding-block: .8rem; }
}

/* Perlu diketahui: aturan yang berlaku bagi siapa pun, bukan
   perbandingan. Bentuknya karena itu juga berbeda — dua kolom rapat
   tanpa nomor dan tanpa pembanding. */
.ctt { display: grid; gap: clamp(1.25rem, 1rem + 1.2vw, 2rem) clamp(1.5rem, 1rem + 2.5vw, 3.5rem); }
@media (min-width: 780px) { .ctt { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ctt-butir { padding-block-start: 1rem; border-block-start: 2px solid var(--ink); }
.ctt-butir h3 {
  font-family: var(--display); font-size: 1.0625rem; font-weight: 700;
  letter-spacing: -.018em; color: var(--ink); margin-block-end: .45rem;
}
.ctt-butir p { font-size: .875rem; line-height: 1.72; color: var(--ink-3); }

/* Penutup halaman penjelas: satu jalan keluar, bukan formulir kedua. */
.tutup {
  display: flex; align-items: center; justify-content: space-between;
  gap: clamp(1.25rem, 1rem + 2vw, 2.5rem); flex-wrap: wrap;
  padding: clamp(1.5rem, 1.2rem + 1.6vw, 2.5rem);
  border: 1px solid var(--hair-2); border-radius: var(--r-xl);
  background: var(--ground);
}
.tutup-teks { min-inline-size: 0; flex: 1 1 22rem; }
.tutup-teks p { margin-block-start: .5rem; font-size: .9375rem; line-height: 1.7; color: var(--ink-3); max-inline-size: 56ch; }

/* Kepala halaman penjelas.

   Halaman ini tidak punya formulir, jadi kolom kanan kepala halaman
   kosong. Yang mengisinya bukan hiasan melainkan daftar isi halaman
   itu sendiri: apa saja yang dijelaskan di bawah. Judul dan paragraf
   pembuka tetap di kiri dengan lebar baca yang wajar. */
.page-hero-lebar { max-inline-size: 66rem; }
.page-hero-lebar .lede { max-inline-size: 46ch; }
.page-hero-lebar .ticks { margin-block-start: 0; }
@media (min-width: 900px) {
  .page-hero-lebar { display: grid; align-items: start;
    grid-template-columns: minmax(0, 1fr) minmax(0, 21rem);
    gap: 0 clamp(2rem, 1rem + 4vw, 4.5rem); }
  .page-hero-lebar > .hero-teks { grid-column: 1; }
  .page-hero-lebar > .hero-daftar { grid-column: 2; grid-row: 1;
    padding-inline-start: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    border-inline-start: 1px solid var(--hair-solid); }
}
.hero-daftar .label { display: block; margin-block-end: .9rem; }

/* Papan "sering dipesan bersamaan" memakai ikon layanan yang sama
   dengan menu dan beranda. Lencana kode sudah dilepas dari seluruh
   situs: itu bahasa internal kami. */
.board-ikon {
  inline-size: 22px; block-size: 22px; color: var(--ink-3);
  transition: color var(--t-fast) linear;
}
.board-row:hover .board-ikon { color: var(--accent); }

.svc-ket[hidden] { display: none; }
[data-gt-saat-ada][hidden] { display: none; }

/* =====================================================================
   PENJAGA PONSEL — STANDAR bagian 4
   Safari iPhone memperbesar halaman saat kolom berhuruf < 16px disentuh,
   dan sesudahnya halaman bisa digeser ke segala arah. Satu aturan untuk
   semua kolom isian di penunjuk kasar; !important disengaja, karena
   kelas kolom (.input, .select, [data-gt-cari], .vp-saring-isi) masing-
   masing menetapkan ukurannya sendiri dan aturan ini harus menang atas
   semuanya tanpa harus mengejar satu per satu. Di layar lebar tidak
   berlaku.
   ===================================================================== */
@media (pointer: coarse) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
  select, textarea { font-size: max(16px, 1em) !important; }
}

/* =====================================================================
   PENAMPIL FOTO — STANDAR bagian 13
   ===================================================================== */
body.gtf-terbuka { overflow: hidden; }
.gtf {
  position: fixed; inset: 0; inline-size: 100%; block-size: 100%; max-inline-size: none; max-block-size: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: #fff;
  display: none; grid-template-rows: auto minmax(0, 1fr) auto;
}
.gtf[open] { display: grid; }
.gtf::backdrop { background: rgba(8, 16, 28, .86); }
.gtf-atas {
  display: flex; align-items: center; gap: 1rem;
  padding: max(.75rem, env(safe-area-inset-top)) clamp(.9rem, .6rem + 1vw, 1.5rem) .5rem;
}
.gtf-judul { flex: 1 1 auto; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ui); font-weight: 600; font-size: .95rem; color: rgba(255,255,255,.92); }
.gtf-n { font-family: var(--mono); font-size: .8rem; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; }
.gtf-tutup, .gtf-panah {
  inline-size: 44px; block-size: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.22);
  background: rgba(255,255,255,.1); color: #fff; cursor: pointer; display: grid; place-items: center;
  transition: background var(--t-fast) linear;
}
.gtf-tutup:hover, .gtf-panah:hover { background: rgba(255,255,255,.22); }
.gtf-tutup svg, .gtf-panah svg { inline-size: 20px; block-size: 20px; }
.gtf-panggung {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr);
  align-items: center; gap: clamp(.5rem, .3rem + 1vw, 1.25rem);
  padding: .5rem clamp(.75rem, .5rem + 1vw, 1.5rem) .75rem; min-block-size: 0;
}
/* Bingkai tetap: tingginya milik baris panggung, bukan milik fotonya. */
.gtf-bingkai { position: relative; block-size: 100%; min-block-size: 0; inline-size: 100%; }
.gtf-besar {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: contain;
  opacity: 0; transition: opacity 260ms var(--ease);
  user-select: none; -webkit-user-drag: none; touch-action: pan-y;
}
.gtf-besar.is-tampak { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .gtf-besar { transition: none; } }
.gtf-strip {
  display: flex; gap: .5rem; padding: .75rem clamp(.9rem, .6rem + 1vw, 1.5rem) max(.9rem, env(safe-area-inset-bottom));
  overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scrollbar-width: none; justify-content: safe center;
}
.gtf-strip::-webkit-scrollbar { display: none; }
.gtf-kecil {
  flex: none; inline-size: 84px; aspect-ratio: 4 / 3; padding: 0; overflow: hidden; scroll-snap-align: center;
  border: 2px solid transparent; border-radius: var(--r-md); background: rgba(255,255,255,.06); cursor: pointer;
  opacity: .55; transition: opacity var(--t-fast) linear, border-color var(--t-fast) linear;
}
.gtf-kecil img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }
.gtf-kecil:hover, .gtf-kecil.is-aktif { opacity: 1; }
.gtf-kecil.is-aktif { border-color: #fff; }
.gtf-kecil:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 620px) {
  .gtf-panggung { grid-template-columns: minmax(0, 1fr); padding-inline: 0; }
  .gtf-panah { display: none; }
  .gtf-besar { border-radius: 0; }
  .gtf-kecil { inline-size: 64px; }
}
@media (prefers-reduced-motion: reduce) { .gtk-gfoto img { transition: none; } }

/* =====================================================================
   BINGKAI BERANDA — STANDAR bagian 14
   Panel rata (tanpa bayangan), tab sebaris (ikon + nama, garis bawah),
   formulir dan pencarian berbentuk bilah bersel — bukan kotak-kotak.
   Rujukan: GetYourGuide, Klook, Tiket.com.
   ===================================================================== */
.hero .lede { margin-block-end: 1.4rem; }
.hero-tautan { margin: 0; }

.panel {
  box-shadow: none;
  border-radius: var(--r-xl);
  padding: clamp(1rem, .8rem + .9vw, 1.5rem) clamp(1.1rem, .9rem + 1.2vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem);
}

/* Baris tab + keterangan empat kata di ujungnya. */
.svc-baris {
  display: flex; align-items: flex-end; gap: 1rem;
  border-block-end: 1px solid var(--hair-solid);
  margin-block-end: 1.15rem;
}
.svc-baris .svc { flex: 1 1 auto; min-inline-size: 0; border-block-end: 0; margin-block-end: 0; }
.svc-btn {
  flex: 0 0 auto; flex-direction: row; align-items: center; gap: .5rem;
  min-inline-size: 0; padding: .8rem .95rem .85rem; min-block-size: 44px;
}
.svc-btn:first-child { padding-inline-start: .35rem; }
.svc-btn:first-child::after { inset-inline-start: .1rem; }
.svc-ikon { inline-size: 19px; block-size: 19px; color: var(--ink-3); transition: color var(--t-fast) linear; }
.svc-btn:hover .svc-ikon, .svc-btn.is-active .svc-ikon { color: var(--accent-2); }
.svc-nama { font-size: .875rem; text-align: start; white-space: nowrap; }
.svc-btn .svc-titik { position: relative; inset: auto; margin-inline-start: .1rem; inline-size: 7px; block-size: 7px; box-shadow: none; align-self: flex-start; margin-block-start: .15rem; }
.svc-ket {
  flex: none; margin: 0 0 .85rem; padding-inline-start: 1rem;
  font-size: .78rem; line-height: 1.4; color: var(--ink-3); white-space: nowrap; max-inline-size: none;
}
.svc-ket .svc-titik-ket { inset-block-start: .3rem; inline-size: 7px; block-size: 7px; }
@media (max-width: 760px) {
  .svc-baris { flex-wrap: wrap; gap: 0; }
  .svc-baris .svc { flex-basis: 100%; }
  .svc-ket { flex-basis: 100%; margin: .55rem 0 0; padding-inline-start: .95rem; white-space: normal; }
  .svc-ket .svc-titik-ket { inset-inline-start: 0; }
  .svc-btn { padding: .7rem .75rem .8rem; min-block-size: 44px; }
  .svc-btn:first-child { padding-inline-start: .25rem; }
  .svc-nama { font-size: .8125rem; }
}

/* ---- Formulir permintaan sebagai bilah bersel ----
   Satu bingkai, sel-sel dipisah garis tipis, label kecil di atas nilai.
   Kolom-kolom tidak punya bingkai sendiri. */
.fgrid {
  gap: 0; align-items: stretch;
  border: 1px solid var(--hair-2); border-radius: 14px; background: var(--paper);
  overflow: hidden;
}
/* Garis pemisah digambar tiap sel di sisi atas dan kirinya; yang jatuh
   di tepi bingkai terpotong oleh overflow, jadi tidak ada aturan
   "kolom pertama" yang harus ditebak untuk tiap lebar. */
.fgrid .field {
  gap: .1rem; padding: .62rem .95rem .6rem;
  box-shadow: -1px 0 0 var(--hair), 0 -1px 0 var(--hair);
  transition: background-color var(--t-fast) linear;
}
.fgrid .field:focus-within { background: var(--accent-wash); }
.fgrid .field > label { font-size: .72rem; font-weight: 500; color: var(--ink-3); letter-spacing: .01em; }
.fgrid .input, .fgrid .select, .fgrid .textarea {
  padding: .1rem 0; border: 0; border-radius: 0; background-color: transparent; box-shadow: none;
  font-size: 1rem; min-block-size: 1.7rem;
}
.fgrid .select { background-position: right 0 center; padding-inline-end: 1.6rem; }
.fgrid .input:focus, .fgrid .select:focus, .fgrid .textarea:focus { box-shadow: none; border: 0; }
.fgrid .input:hover, .fgrid .select:hover { border: 0; }
.fgrid .pane-kirim {
  padding: .8rem .95rem; box-shadow: 0 -1px 0 var(--hair);
  background: var(--ground);
}
.fgrid .pane-kirim .btn { justify-self: end; }
/* Di empat kolom: nama dua sel, WhatsApp satu sel, supaya baris kedua
   penuh pada formulir yang menyisakan satu kolom dari baris pertama. */
@container (min-width: 810px) {
  .fgrid.fgrid-sisa .field:has(> input[name="wa"]) { grid-column: span 1; }
}

/* ---- Pencarian katalog sebagai bilah: ikon, kolom, tombol Cari ---- */
.gtc-cari { border-radius: 14px; }
.gtc-cari input { min-block-size: 52px; font-size: 1rem; }
.gtc-tombol {
  flex: none; margin: .3rem .3rem .3rem 0;
  min-block-size: 44px; padding: 0 1.25rem;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--ink); color: #fff;
  font-family: var(--body); font-size: .9rem; font-weight: 600;
  transition: background-color var(--t-fast) linear;
}
.gtc-tombol:hover { background: var(--accent-2); }
.gtc-tombol:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 620px) {
  .gtc-tombol { padding-inline: .95rem; font-size: .85rem; }
  .gtc-cari input { font-size: max(16px, 1em); }
}

/* =====================================================================
   REL ATRAKSI DI BERANDA — STANDAR bagian 12
   Foto bersih di atas, tulisan di bawah. Tanpa gradasi, tanpa panah,
   tanpa bayangan. Kepala: judul + tautan, dua panah di kanan.
   ===================================================================== */
.tuju-kepala {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1.5rem;
  margin-block-end: clamp(1.1rem, .9rem + 1vw, 1.6rem);
}
.tuju-kepala h2 { max-width: 22ch; }
.tuju-kepala .tlink { display: inline-flex; margin-block-start: .8rem; }
.tuju-kepala .rail-nav { margin: 0 0 .35rem; flex: none; }
@media (max-width: 620px) { .tuju-kepala .rail-nav { display: none; } }

.tuju {
  display: flex; flex-direction: column; gap: .7rem;
  color: inherit; text-decoration: none;
}
.tuju-foto {
  display: block; aspect-ratio: 4 / 3; border-radius: var(--r-lg); overflow: hidden;
  background: var(--ground);
}
.tuju-foto img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
  transition: transform 700ms var(--ease);
}
@media (hover: hover) { .tuju:hover .tuju-foto img { transform: scale(1.04); } }
.tuju:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: var(--r-lg); }
.tuju-teks { display: flex; flex-direction: column; gap: .18rem; min-inline-size: 0; }
.tuju-tempat { font-size: .8rem; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tuju-nama {
  font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -.015em; line-height: 1.3; color: var(--ink);
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
  margin: 0;
}
.tuju-kaki { font-size: .82rem; color: var(--ink-3); margin-block-start: .15rem; }
.tuju-kaki b { font-family: var(--display); font-weight: 700; color: var(--ink); font-size: .95rem; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.rail > .tuju { flex-basis: clamp(200px, 15rem + 2vw, 262px); }
@media (max-width: 620px) { .rail > .tuju { flex-basis: min(58vw, 230px); } }
.rail { padding-block-end: .5rem; }

/* Kalender dan pemilih buatan sendiri ikut jadi sel bilah: tanpa
   bingkai, tanpa cincin — selnya yang menyala saat fokus. */
.fgrid .date-btn, .fgrid .combo-btn {
  padding: .1rem 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 1rem; min-block-size: 1.7rem;
}
.fgrid .date-btn:hover, .fgrid .combo-btn:hover,
.fgrid .date-btn:focus-visible, .fgrid .combo-btn:focus-visible,
.fgrid .datefield.is-open .date-btn, .fgrid .combo.is-open .combo-btn { border: 0; box-shadow: none; }
.fgrid .field:has(.datefield.is-open), .fgrid .field:has(.combo.is-open) { background: var(--accent-wash); }

/* Hero lebih pendek: bola dunia tidak perlu setinggi satu layar. */
.hero .globe-host { inline-size: min(100%, 520px); }
@media (min-width: 1021px) { .hero-grid { align-items: center; } }

/* Baris angka di bawah panel: bukan kartu kedua yang menempel di bawah
   kartu pertama — satu baris angka di atas kertas, dipisah garis tipis. */
.figs { background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
.fig { padding-inline: 0 1.25rem; }
.fig + .fig { padding-inline-start: 1.25rem; }
.fig + .fig::before { inset-block: .35rem; }
@media (max-width: 720px) { .fig { padding-inline: 0; } .fig + .fig { padding-inline-start: 0; } .fig + .fig::before { display: none; } }
.svc-titik, .svc-titik::after { pointer-events: none; }
/* =====================================================================
   VERSI PONSEL — STANDAR bagian 16

   Bukan tampilan desktop yang dikecilkan, dan bukan rancangan asing yang
   menggantikannya. Warna, huruf, garis rambut, dan panel rata tetap yang
   sama; yang dirancang ulang adalah susunannya — karena satu layar
   selebar 390px dan satu jempol tidak sama dengan layar 1440px dan satu
   tetikus.

   Tiga perubahan besarnya:
   1. Hero memakai lebar penuh; bola dunia turun jadi latar, tidak lagi
      berdesakan dengan judul.
   2. Deretan tab layanan jadi DAFTAR TUGAS bergaris rambut — satu baris
      satu layanan, seperti daftar di aplikasi.
   3. Formulirnya tidak lagi tergeletak di halaman: ia naik sebagai
      layar penuh dengan judul di atas dan tombol kirim yang menempel di
      bawah, tempat jempol berada.
   ===================================================================== */
@media (max-width: 780px) {

  /* ---------- Hero ---------- */
  /* Judul memakai lebar penuh. Sebelumnya ia terjepit di 238px karena
     mewarisi kolom dari susunan desktop, lalu pecah jadi tiga baris di
     atas bola dunia. */
  .hero-grid { gap: 1.25rem; }
  .hero h1, .hero .lede { max-inline-size: none; }
  .hero h1 { font-size: 1.72rem; line-height: 1.08; margin-block: .7rem .6rem; }
  .hero .lede { font-size: .94rem; line-height: 1.5; margin-block-end: 1rem; }
  .hero .hero-tautan { margin-block-start: 0; font-size: .94rem; }
  .hero .label { margin-block-end: 0; }
  /* Panel layanan harus sudah terlihat di layar pertama: hero dipendekkan
     sampai baris pertamanya mengintip di bawah lipatan. */
  .hero { padding-block-start: calc(var(--header-h) + .6rem); }
  .hero + .section-sm { padding-block-start: 1.1rem; }

  /* Bola dunia jadi latar: ia tetap ada — itu tanda pengenal situs ini —
     tapi berhenti bersaing dengan judul. Diletakkan di belakang, dipotong
     lembut di tepinya, dan tidak menerima sentuhan. */
  .hero .globe-host, .hero .globe { inline-size: 100%; }
  .hero-grid { position: relative; }
  .hero-grid > *:not(.stage) { position: relative; z-index: 1; }

  /* ---------- Deretan layanan: satu baris ikon yang digeser ----------
     Beranda ponsel memakai SISTEM YANG SAMA dengan beranda desktop:
     tekan satu layanan, panelnya berganti isi tepat di bawahnya, dan
     hasil pencariannya muncul di halaman yang sama. Yang berbeda cuma
     bentuknya.

     Di layar lebar keenam layanan berdiri sebagai tab bertuliskan nama
     panjang. Di 390px nama panjang itu tidak muat berdampingan, jadi
     yang dipakai bentuk yang dipakai semua aplikasi perjalanan: ikon di
     atas, nama pendek di bawah, satu baris yang digeser mendatar dengan
     jempol. Baris ini TIDAK menyembunyikan layanannya — ujungnya sengaja
     dibiarkan terpotong di tepi layar supaya terlihat masih ada
     lanjutannya, dan geserannya menempel per butir (scroll-snap). */
  .panel { padding: 0; border: 0; border-radius: 0; background: none; }
  .svc-baris { display: block; margin: 0; }
  .svc-ket { display: none; }
  .svc {
    display: flex; gap: .1rem; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x proximity; scrollbar-width: none;
    margin-inline: calc(var(--pad) * -1); padding: .25rem var(--pad) .5rem;
    border: 0;
  }
  .svc::-webkit-scrollbar { display: none; }
  .svc-btn {
    display: grid; grid-template-columns: 1fr; justify-items: center; gap: .4rem;
    flex: 0 0 76px; inline-size: 76px; min-block-size: 72px;
    padding: .5rem .1rem; margin: 0;
    border: 0; border-radius: var(--r-md); background: none;
    scroll-snap-align: start; text-align: center;
    font-family: var(--ui); font-size: .74rem; font-weight: 500;
    letter-spacing: -.005em; line-height: 1.2; color: var(--ink-2);
    position: relative;
  }
  .svc-btn:active { background: var(--ground); }
  .svc-ikon { inline-size: 27px; block-size: 27px; color: var(--accent); }
  .svc-btn .svc-nama {
    display: block; font-size: .74rem; font-weight: 500; white-space: normal;
  }

  /* ---------- Panel berdiri di tempat, bukan naik jadi layar penuh ----------
     Pemilik menolak layar penuh dengan alasan yang benar: ia memindahkan
     orang KE TEMPAT LAIN untuk hal yang ada di tempat ia berdiri. Panel
     ini isinya berganti di bawah baris ikon, tanpa jeda dan tanpa
     halaman baru — persis seperti di layar lebar. */
  .pane { display: none; }
  .pane.is-active {
    display: block;
    padding: .25rem 0 .5rem;
    /* "backwards", bukan "both": animasi berisian both meninggalkan
       transform identitas setelah selesai, dan elemen bertransform jadi
       acuan bagi keturunannya yang position:fixed — layar paket yang
       dibuka dari panel ini akan menyusut jadi setinggi panelnya. Sudah
       pernah terjadi sekali; ini kedua kalinya di berkas yang sama. */
    animation: panel-ganti 200ms var(--ease) backwards;
  }
  @keyframes panel-ganti {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
  }
  @media (prefers-reduced-motion: reduce) { .pane.is-active { animation: none; } }

  /* Kolom isian jadi baris daftar: label mono kecil di atas, isian besar
     di bawah, dipisah garis rambut — bukan kotak di dalam kotak. Berlaku
     untuk SEMUA formulir di ponsel (beranda, kontak, lacak), supaya
     mengisi apa pun di situs ini terasa sama. */
  .fgrid {
    display: block; box-shadow: none; border: 0; border-radius: 0; background: none;
  }
  .fgrid .field {
    display: block; padding: .55rem 0; box-shadow: none; border: 0;
    border-block-end: 1px solid var(--hair); background: none;
  }
  .fgrid .field label {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .fgrid .input, .fgrid .select, .fgrid .textarea,
  .fgrid .date-btn, .fgrid .combo-btn { font-size: 1.0625rem; }
  /* 46px, bukan 30px: isian setinggi 30px melanggar batas 44px bagian 16
     dan meleset kalau ditekan sambil berjalan. */
  .fgrid .input, .fgrid .select { min-block-size: 46px; }
  .fgrid .field:focus-within { background: none; }

  /* Tombol kirim: selebar panel, di ujung formulirnya. Tidak menempel di
     kaki layar — tidak ada layar penuh lagi untuk ditempeli. */
  .pane-kirim { padding-block-start: .9rem; }
  .pane-kirim .btn { inline-size: 100%; min-block-size: 50px; }

  /* ---------- Irama halaman ---------- */
  /* Ukuran huruf dan jarak di ponsel bukan versi kecil dari desktop: satu
     kalimat yang di layar lebar jadi satu baris, di sini jadi lima. Yang
     dipendekkan jaraknya, bukan isinya. */
  .d2 { font-size: 1.55rem; line-height: 1.08; }
  .d3 { font-size: 1.2rem; }
  .sec-head p, .sec-head-indent p, .body-text p, .lede { font-size: .96rem; line-height: 1.55; }
  .sec-head, .sec-head-indent, .sec-head-row { margin-block-end: 1.1rem; }
  .page-hero { padding-block: calc(var(--header-h) + .9rem) 1.4rem; }
  .katalog-utama { padding-block-start: calc(var(--header-h) + .9rem); }
  .page-hero h1 { font-size: 1.72rem; line-height: 1.08; }

  /* ---------- Lipatan: bacaan panjang jadi daftar yang bisa dibuka ----------
     Enam perkara di halaman tiket pesawat setinggi empat layar penuh kalau
     seluruhnya dibentangkan. Di ponsel keenamnya berdiri sebagai judul yang
     bisa ditekan; yang pertama sudah terbuka supaya bentuknya langsung
     terbaca. Isinya tetap ada di halaman — hanya terlipat, bukan dibuang.
     Yang dianimasikan satu baris grid (STANDAR bagian 4). */
  .lipat { display: grid; grid-template-rows: auto 0fr;
    transition: grid-template-rows 260ms cubic-bezier(.16, 1, .3, 1); }
  .lipat.is-buka { grid-template-rows: auto 1fr; }
  /* Isi yang terlipat tidak boleh punya jarak sendiri: padding dan margin
     tetap dihitung walau barisnya nol, dan sisa 17px itu terbaca sebagai
     satu baris teks yang bocor di bawah judul. Jaraknya ditaruh DI DALAM
     isinya, jadi ikut terpotong saat terlipat. */
  .lipat > .lipat-badan { overflow: hidden; min-block-size: 0; padding-block: 0; margin-block: 0; }
  .lipat > .lipat-badan::after { content: ""; display: block; block-size: .95rem; }
  .lipat > .lipat-kepala {
    display: flex; align-items: baseline; gap: .7rem;
    min-block-size: 52px; padding-block: .85rem; cursor: pointer;
  }
  .lipat > .lipat-kepala::after {
    content: ""; margin-inline-start: auto; align-self: center;
    inline-size: 9px; block-size: 9px; flex: none;
    border-inline-end: 1.7px solid var(--ink-4); border-block-end: 1.7px solid var(--ink-4);
    transform: translateY(-2px) rotate(45deg);
    transition: transform 260ms cubic-bezier(.16, 1, .3, 1);
  }
  .lipat.is-buka > .lipat-kepala::after { transform: translateY(1px) rotate(-135deg); }
  .lipat > .lipat-kepala:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  @media (prefers-reduced-motion: reduce) {
    .lipat, .lipat > .lipat-kepala::after { transition: none; }
  }

  /* Enam perkara (kmp) */
  .kmp { gap: 0; }
  .kmp-baris { display: grid; padding: 0; gap: 0; border-block-end: 1px solid var(--hair); }
  .kmp-baris .kmp-kiri { display: flex; align-items: baseline; gap: .7rem; padding-block: .95rem; }
  .kmp-n { font-size: .8rem; }
  .kmp-judul { font-size: 1.0625rem; line-height: 1.25; }
  .kmp-kanan { padding-block-end: 0; }
  .kmp-isi { font-size: .95rem; line-height: 1.55; margin-block: 0 .85rem; }
  .kmp-adu { grid-template-columns: 1fr; gap: .7rem; }
  .kmp-sisi { padding: .8rem .9rem; }
  .kmp-sisi p { font-size: .9rem; line-height: 1.5; }

  /* Empat hal yang jarang diberitahukan (ctt) */
  .ctt { grid-template-columns: 1fr; gap: 0; }
  /* Garis tebal di atas tiap butir adalah tanda tangan halaman ini —
     dipertahankan. Yang dibuang cuma paddingnya, karena jaraknya sekarang
     datang dari kepala lipatannya. */
  .ctt-butir { padding-block-start: 0; }
  .ctt-butir h3 { font-size: 1.0625rem; line-height: 1.25; margin: 0; }
  .ctt-butir p { font-size: .95rem; line-height: 1.55; margin: 0; }

  /* ---------- Baris layanan lain (board) ---------- */
  /* Empat baris setinggi 150px masing-masing memakan satu layar penuh untuk
     daftar yang isinya cuma tautan. Di ponsel ia jadi baris daftar: ikon,
     nama, satu baris keterangan. Angka pajangannya tidak ikut — di layar
     selebar ini ia mendorong nama layanannya sendiri turun. */
  .board { grid-template-columns: 1fr; gap: 0; border-block-start: 1px solid var(--hair); }
  .board-row {
    display: grid; grid-template-columns: 26px 1fr; column-gap: .85rem;
    align-items: center; padding: .85rem .1rem; border-block-end: 1px solid var(--hair);
    border-radius: 0;
  }
  .board-c { inline-size: 26px; block-size: 26px; padding: 0; background: none; border: 0; }
  .board-ikon { inline-size: 22px; block-size: 22px; }
  .board-t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.016em; }
  .board-d { font-size: .88rem; line-height: 1.45; color: var(--ink-3); margin-block-start: .1rem; }
  .board-m { display: none; }

  /* ---------- Alur langkah (track) ---------- */
  .track { grid-template-columns: 1fr; gap: 0; }
  .track-item { padding: .9rem 0; border-block-end: 1px solid var(--hair); }
  .track-n { font-size: .64rem; }
  .track-item h3 { font-size: 1rem; margin-block: .25rem .2rem; }
  .track-item p { font-size: .92rem; line-height: 1.5; }

  /* ---------- Tabel: digulir sendiri, bukan memaksa halaman melebar ---------- */
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .table-wrap table { min-inline-size: 34rem; }

  /* ---------- Daftar definisi (kontak) ---------- */
  .deflist-item { grid-template-columns: 1fr; gap: .3rem; padding-block: .9rem; }
  .deflist-item p { grid-column: 1; font-size: .93rem; line-height: 1.5; }

  /* ---------- Daftar butir pendek (dokumen visa, dan sejenisnya) ---------- */
  .dok-inti li { grid-template-columns: 1.7rem minmax(0, 1fr); gap: .1rem .7rem; padding-block: .7rem; }
  .dok-inti b { font-size: 1rem; }
  .dok-inti span:not(.dok-n) { font-size: .92rem; line-height: 1.5; }
  .dok-n { font-size: .72rem; }

  /* ---------- Katalog ---------- */
  /* Petak dua kolom di ponsel: kartu foto selebar setengah layar masih
     terbaca, dan satu layar memuat empat — bukan satu setengah. Bentuk
     baris mendatar (foto kecil di kiri) sengaja dibatalkan di sini: foto
     selebar 36% terlalu kecil untuk barang yang dijual oleh fotonya. */
  .gtk-petak { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem .7rem; }
  .gtk-petak > * { min-inline-size: 0; }
  .gtk-kartu { flex-direction: column; align-items: stretch; gap: .55rem; }
  .gtk-foto { flex: none; max-inline-size: none; }
  .gtk-teks { padding: 0; min-inline-size: 0; }
  .gtk-kaki { flex-wrap: wrap; gap: .1rem .4rem; }
  .gtk-harga, .gtk-n { white-space: normal; }
  .gtk-nama {
    font-size: .93rem; line-height: 1.3;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gtk-tempat, .gtk-kaki { font-size: .78rem; }
  /* Bilah saringan: negara dan wilayah berdampingan, chip kategori
     digulir mendatar — satu baris, bukan tembok chip setinggi tiga baris. */
  .gtk-bilah { grid-template-columns: 1fr 1fr; }
  .gtk-kat-baris {
    display: flex; flex-wrap: nowrap; overflow-x: auto; gap: .45rem;
    margin-inline: calc(var(--pad) * -1); padding-inline: var(--pad);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .gtk-kat-baris::-webkit-scrollbar { display: none; }
  .gtk-kchip { flex: none; }

  /* ---------- Layar produk: layar penuh, bukan bagian di bawah katalog ----------
     Menekan satu produk di aplikasi berarti berpindah layar. Di sini
     dulu layarnya digambar DI BAWAH kepala katalog — judul katalog,
     kotak pencarian, dan jumlah hasil tetap berdiri di atasnya, dan
     orang mendarat di tengah galeri tanpa tahu di mana jalan keluarnya.
     Di ponsel layar produk mengambil alih seluruh layar, dengan tautan
     kembali yang menempel di atas. */
  /* Galeri: satu foto lebar penuh yang bisa digeser, bukan mosaik kecil. */
  .gtk-galeri { margin-inline: calc(var(--pad) * -1); border-radius: 0; }
  .gtk-galeri-1 { block-size: auto; }
  .gtk-gfoto { aspect-ratio: 16 / 10; }
  .gtk-kepala h2 { font-size: 1.35rem; line-height: 1.15; }
  .gtl-desk p, .gtk-sorotan li { font-size: .95rem; line-height: 1.55; }
  .gtl-tabel, .gtk-tabel { font-size: .92rem; }

  /* ---------- Lembar menu: sama bahasanya dengan daftar tugas ----------
     Ikon di dalam kotak abu adalah lapisan kedua yang tidak dipakai di
     tempat lain mana pun di situs ini. Dibuang; ikonnya berdiri sendiri
     di atas kertas, persis seperti daftar layanan di beranda. */
  .m-svc-ikon { inline-size: 22px; block-size: 22px; padding: 0; background: none; border: 0; border-radius: 0; }
  .m-ikon { inline-size: 22px; block-size: 22px; color: var(--accent-2); }
  .m-svc { gap: .85rem; min-block-size: 56px; }
  .m-svc-t { font-size: 1.0625rem; font-weight: 600; letter-spacing: -.016em; }
  .m-link { min-block-size: 52px; font-size: 1.0625rem; font-weight: 600; }
  .sheet-judul { font-family: var(--mono); }

}

/* =====================================================================
   BILAH TAB PONSEL — STANDAR bagian 16

   Aturan lama melarang apa pun menempel di kaki layar. Larangan itu
   ditulis untuk dua hal yang memang pantas dilarang: bilah tab enam
   butir yang merangkap seluruh menu, dan gelembung chat yang menutupi
   isi dan tidak bisa disingkirkan. Bilah ini bukan keduanya.

   Empat tujuan, semuanya berbeda: beranda, seluruh layanan, pesanan yang
   sedang berjalan, dan bantuan. Tingginya 56px, tidak menutupi isi
   karena halaman diberi ruang sebesar itu di kakinya, dan hanya ada di
   ponsel. Traveloka, tiket.com, Agoda, dan Booking memakai pola yang
   sama — di layar tanpa tetikus, tujuan utama yang selalu terjangkau
   jempol adalah bedanya aplikasi dengan halaman.
   ===================================================================== */
.tabbar { display: none; }
/* Aturan ponselnya ada di blok SISTEM PONSEL (STANDAR bagian 18) di ujung berkas. */

/* =====================================================================
   LAYAR DALAM VERSI PONSEL — STANDAR bagian 16b
   Katalog, saringan, dan layar paket.

   Diriset langsung, satu per satu, di versi ponsel: tiket.com (beranda
   sampai halaman paket Singapore Zoo), Trip.com (katalog atraksi sampai
   halaman JR Pass), Agoda (hasil pencarian hotel), Booking.com (hasil
   pencarian). Empatnya berbeda gaya, tetapi kerangka layar dalamnya
   sama, dan itulah yang ditiru di sini:

     KATALOG   satu ringkasan pencarian yang bisa ditekan di atas,
               satu baris chip Urutkan/Saring yang menempel saat
               digulir, lalu kartu memanjang: foto di kiri, nama dan
               harga di kanan. Bukan petak dua kolom — di layar 390px
               petak dua kolom memotong nama jadi tiga baris dan
               harganya jadi butiran kecil.

     PAKET     foto lebar penuh dengan tombol kembali bundar melayang
               di atasnya; nama; baris fakta; sorotan yang dilipat;
               daftar paket; dan SATU BILAH HARGA YANG MENEMPEL DI
               KAKI LAYAR berisi "mulai dari <harga>" dan satu tombol
               tindakan. Keempat aplikasi memakai bilah ini, dan
               alasannya sama: halaman paket panjang, dan harga yang
               hanya ada di satu tempat di tengah halaman membuat orang
               menggulir bolak-balik untuk memastikan.

   Semua yang di bawah ini hanya berlaku di bawah 780px.
   ===================================================================== */

@media (max-width: 780px) {

  /* ---------- KATALOG: kartu memanjang ---------- */
  .gtk-petak { grid-template-columns: 1fr; gap: 0; }
  .gtk-kartu {
    flex-direction: row; align-items: stretch; gap: .85rem;
    inline-size: 100%; padding: .85rem 0; text-align: start;
    border-block-end: 1px solid var(--hair);
    border-radius: 0; background: none;
    transition: background 140ms var(--ease);
  }
  .gtk-kartu:last-child { border-block-end: 0; }
  .gtk-kartu:active { background: var(--ground); }
  .gtk-foto {
    flex: none; inline-size: 108px; max-inline-size: 108px; block-size: 108px;
    border-radius: var(--r-md); overflow: hidden;
  }
  .gtk-foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  .gtk-teks {
    display: flex; flex-direction: column; gap: .18rem;
    min-inline-size: 0; padding: .1rem 0;
  }
  .gtk-kat {
    font-family: var(--mono); font-size: .66rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ink-3);
  }
  .gtk-nama {
    font-size: .97rem; font-weight: 600; line-height: 1.3; letter-spacing: -.015em;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .gtk-tempat { font-size: .8rem; color: var(--ink-3); }
  .gtk-kaki {
    display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap;
    margin-block-start: auto; padding-block-start: .3rem;
  }
  .gtk-harga { font-size: .8rem; color: var(--ink-2); white-space: nowrap; }
  .gtk-harga b { font-size: 1rem; color: var(--ink); letter-spacing: -.02em; }
  .gtk-dari { color: var(--ink-3); }
  .gtk-n { font-size: .76rem; color: var(--ink-3); white-space: nowrap; }

  /* ---------- KATALOG: baris saringan yang menempel ----------
     Agoda dan Booking sama-sama menaruh Urutkan dan Saring pada satu
     baris yang ikut naik dan berhenti di bawah kepala halaman. Yang
     penting bukan bilahnya menempel, tetapi bahwa orang bisa mengubah
     urutan tanpa menggulir kembali ke atas — di daftar sepanjang ini
     itu bedanya satu ketukan dengan sepuluh. */
  .gtk-bilah {
    position: sticky; inset-block-start: var(--hp-kepala); z-index: 8;
    display: flex; gap: .5rem; overflow-x: auto;
    margin-inline: calc(var(--pad) * -1); padding: .55rem var(--pad);
    background: rgba(255,255,255,.96);
    border-block-end: 1px solid var(--hair);
    scrollbar-width: none;
  }
  .gtk-bilah::-webkit-scrollbar { display: none; }
  .gtk-bilah > * { flex: none; min-inline-size: 0; }

  /* ---------- LAYAR PAKET ---------- */
  /* Tombol kembali: bundar, melayang di atas foto, bukan bilah yang
     mendorong foto turun. Foto adalah hal pertama yang dilihat orang di
     halaman paket mana pun — di tiket.com, Trip.com, Agoda, dan
     Booking foto itu menyentuh tepi atas layar. */
  /* Layar paket, tombol kembali, kepala ringkas, dan bilah harga:
     lihat SISTEM PONSEL (STANDAR bagian 18) di ujung berkas. */
  @keyframes dalam-kaki-naik {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  @keyframes dalam-muncul {
    from { opacity: 0; transform: scale(.86); }
    to   { opacity: 1; transform: none; }
  }

  /* ---------- Rangka tunggu ----------
     Selagi katalog diambil, tempatnya sudah digambar: tiga baris abu
     yang berdenyut, seukuran kartu yang akan menggantikannya. Layar
     kosong membuat orang mengira gagal; rangka membuat mereka menunggu.
     Keempat aplikasi memakainya. */
  .rangka { display: grid; gap: 0; }
  .rangka-baris {
    display: flex; gap: .85rem; padding: .85rem 0;
    border-block-end: 1px solid var(--hair);
  }
  .rangka-foto {
    flex: none; inline-size: 108px; block-size: 108px; border-radius: var(--r-md);
  }
  .rangka-teks { display: grid; gap: .5rem; align-content: start; flex: 1; padding-block-start: .3rem; }
  .rangka-teks span { block-size: 12px; border-radius: 4px; }
  .rangka-teks span:nth-child(1) { inline-size: 45%; }
  .rangka-teks span:nth-child(2) { inline-size: 88%; block-size: 15px; }
  .rangka-teks span:nth-child(3) { inline-size: 60%; }
  .rangka-foto, .rangka-teks span {
    background: linear-gradient(100deg, var(--ground) 20%, #EDF1F6 42%, var(--ground) 64%);
    background-size: 300% 100%;
    animation: rangka-kilau 1.25s linear infinite;
  }
  @keyframes rangka-kilau {
    from { background-position: 160% 0; }
    to   { background-position: -60% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .rangka-foto, .rangka-teks span { animation: none; }
  }
}

/* =====================================================================
   KATALOG PONSEL: KEPALA DAN SARINGAN — STANDAR bagian 16b (lanjutan)

   Di keempat aplikasi yang diaudit, layar katalog dimulai dari
   barangnya. Yang berdiri di atas daftar cuma dua hal: satu ringkasan
   pencarian yang bisa ditekan, dan satu baris saringan. Tidak ada label
   kategori, tidak ada judul dua baris, tidak ada kalimat penjelas —
   orang yang sampai di layar ini sudah tahu ia sedang melihat katalog
   atraksi, karena ia sendiri yang menekannya.

   Di layar lebar kepala itu tetap ada seperti semula; halaman katalog
   di komputer memang juga halaman pendaratan dari mesin pencari.
   ===================================================================== */

@media (max-width: 780px) {

  /* ---------- Kepala katalog ---------- */
  [data-gt-blok] .sec-head-indent .label,
  [data-gt-blok] .sec-head-indent > p { display: none; }
  [data-gt-blok] .sec-head-indent {
    margin-block-end: .75rem; padding-block-start: 0;
  }
  [data-gt-blok] .sec-head-indent h2 {
    font-size: 1.3rem; line-height: 1.2; letter-spacing: -.03em;
  }

  /* ---------- Bilah pencarian katalog ----------
     Satu baris setinggi 44px dengan tombol di dalamnya, bukan kotak
     setinggi 85px dengan tombol gelap besar di ujungnya. */
  [data-gt-blok] .gtc { margin-block-end: 0; }
  [data-gt-blok] .gtc-cari {
    min-block-size: 44px; border-radius: 999px; padding-inline: .9rem .3rem;
  }
  [data-gt-blok] .gtc-cari input { font-size: 16px; }
  [data-gt-blok] .gtc-tombol {
    min-block-size: 36px; padding-inline: .95rem; border-radius: 999px; font-size: .85rem;
  }
  [data-gt-blok] .gtc-jumlah {
    font-size: .72rem; margin-block: .5rem 0; letter-spacing: .08em;
  }

  /* ---------- Saringan sebagai baris chip ----------
     Bentuk kartu berbingkai dengan dua kolom bertuliskan "Negara" dan
     "Wilayah" adalah bentuk layar lebar. Di ponsel saringan itu chip:
     isinya nilai yang sedang berlaku, dan namanya tidak perlu ditulis
     karena "Semua negara" sudah menyebut dirinya sendiri.

     Chipnya membungkus ke baris berikutnya, tidak menggulir mendatar:
     menu pilihannya digambar di dalam bilah ini, dan bilah yang
     menggulir mendatar akan memotong menunya. */
  .gtk-bilah {
    display: flex; flex-wrap: wrap; gap: .5rem;
    position: sticky; inset-block-start: var(--hp-kepala); z-index: 8;
    margin-inline: calc(var(--pad) * -1); padding: .6rem var(--pad);
    border: 0; border-block-end: 1px solid var(--hair); border-radius: 0;
    /* TANPA backdrop-filter. Ia membuat bilah ini jadi acuan bagi
       keturunannya yang position:fixed — dan menu saringan di ponsel
       justru lembar fixed yang naik dari kaki layar. Dengan acuan
       setinggi 57px, "inset-block-end: 0" berarti kaki BILAH, bukan kaki
       layar: menunya mendarat 218px di atas tepi layar, terlihat kosong,
       dan tidak satu pun pilihannya bisa ditekan. Latar padat 97% sudah
       cukup memisahkan bilah dari isi yang lewat di belakangnya. */
    background: rgba(255,255,255,.97); overflow: visible;
  }
  .gtk-bilah > * { flex: 0 1 auto; min-inline-size: 0; padding: 0; border: 0; }
  /* Sel bilah layar lebar membawa garis pemisah (box-shadow) dan latar
     biru saat menunya terbuka. Di ponsel selnya sudah jadi chip: garis
     itu tampak sebagai sekat tipis di antara dua chip, dan latarnya
     sebagai kotak biru bersudut siku di belakang chip yang bulat.
     Keadaan terbuka di chip dibaca dari bingkai chipnya sendiri. */
  .gtk-bilah .gtk-sel, .gtk-bilah .gtk-sel:focus-within,
  .gtk-bilah .gtk-sel:has(.combo.is-open) { box-shadow: none; background: transparent; }
  /* Selagi menu saringan terbuka, bilahnya diangkat. Bilah lekat ini
     membentuk konteks tumpukan sendiri (z-index 8), dan latar gelap
     lembar — keturunannya — ikut terkurung di lapis 8, di BAWAH kepala
     halaman (100). Ketukan "di luar" yang jatuh di kepala mengenai
     logo, bukan latar: halamannya pindah, bukan menunya tertutup. */
  .gtk-bilah:has(.combo.is-open) { z-index: var(--lapis-kendali); }
  .gtk-bilah .gtk-sel-label { display: none; }
  .gtk-bilah .combo-btn {
    min-block-size: 38px; padding-inline: .9rem; border-radius: 999px;
    border: 1px solid var(--hair-2); background: var(--paper);
    font-size: .85rem; font-weight: 500; color: var(--ink-2);
    transition: transform 120ms var(--ease), border-color 120ms var(--ease);
  }
  .gtk-bilah .combo-btn:active { transform: scale(.97); }
  /* Selektor sepanjang ini karena aturan sel layar lebar
     (.gtk-sel .combo.is-open .combo-btn { border: 0 }) menghapus bingkai
     chip justru saat terbuka — teksnya tinggal mengambang. */
  .gtk-bilah .gtk-sel .combo.is-open .combo-btn,
  .gtk-bilah .combo-btn[aria-expanded="true"] { border: 1px solid var(--accent); color: var(--accent-2); }
  .gtk-bilah .combo-caret { inline-size: 15px; block-size: 15px; }
  .gtk-bilah .gtk-kchip { min-block-size: 38px; border-radius: 999px; }

  /* Kartu pertama tidak menempel di bawah bilah saringan. */
  .gtk-isi { padding-block-start: .35rem; }
}


/* =====================================================================
   BAGIAN PENJELAS DILIPAT — STANDAR bagian 16b

   Judul semua bagian terlihat sekaligus, isinya dibuka satu per satu.
   Ini pengecualian kedua pada larangan animasi tinggi di bagian 4, dan
   alasannya sama dengan yang pertama: yang berubah tinggi di sini
   memang isi yang sedang dibuka orang atas permintaannya sendiri.

   Isian dipindahkan KE DALAM (lewat ::after), bukan sebagai padding
   pada petak yang tingginya 0fr — padding pada petak itu tetap dihitung
   dan menyisakan garis 17px yang terbuka padahal seharusnya tertutup.
   ===================================================================== */

@media (max-width: 780px) {
  .bagian-lipat { padding-block: 0; border-block-start: 1px solid var(--hair); }
  .bagian-lipat > .shell { padding-block: 0; }

  .bagian-kepala {
    display: flex; align-items: center; gap: .75rem;
    min-block-size: 60px; padding-block: .85rem;
    margin-block-end: 0 !important; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .bagian-kepala:active { background: var(--ground); }
  .bagian-kepala .label { display: none; }
  .bagian-kepala > p, .bagian-kepala .muted { display: none; }
  .bagian-kepala h2 {
    font-size: 1.05rem; line-height: 1.3; letter-spacing: -.022em;
    margin: 0; flex: 1; min-inline-size: 0;
  }
  .bagian-kepala h2 em { font-style: normal; color: inherit; }
  .bagian-tanda {
    flex: none; display: grid; place-items: center;
    inline-size: 26px; block-size: 26px; color: var(--ink-3);
    transition: transform 220ms var(--ease);
  }
  .bagian-tanda svg { inline-size: 18px; block-size: 18px; }
  .is-lipat-buka > .shell > .bagian-kepala .bagian-tanda { transform: rotate(180deg); }

  .bagian-badan {
    display: grid; grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(.16, 1, .3, 1);
  }
  .is-lipat-buka > .shell > .bagian-badan { grid-template-rows: 1fr; }
  .bagian-badan > div { overflow: hidden; min-block-size: 0; }
  .is-lipat-buka > .shell > .bagian-badan > div::after {
    content: ""; display: block; block-size: 1.35rem;
  }
  @media (prefers-reduced-motion: reduce) {
    .bagian-badan { transition: none; }
    .bagian-tanda { transition: none; }
  }
}

/* =====================================================================
   KEPALA HALAMAN LAYANAN DI PONSEL — STANDAR bagian 16b

   Di layar lebar kepala halaman layanan berisi lencana, judul, satu
   paragraf pembuka, dan daftar "yang dijelaskan di halaman ini". Daftar
   itu berguna di komputer: ia jadi peta halaman yang panjang.

   Di ponsel halamannya tidak lagi panjang — bagian penjelasnya sudah
   terlipat, dan judul-judulnya kelihatan semua sekaligus. Jadi daftar
   itu memetakan sesuatu yang sudah jadi peta. Dua peta untuk satu
   halaman berarti 291px teks yang mendorong katalognya turun, dan
   katalog itulah yang dicari orang ketika ia menekan "Atraksi".

   Paragraf pembukanya tetap ada, dipotong dua baris.
   ===================================================================== */

@media (max-width: 780px) {
  .page-hero .hero-daftar { display: none; }
  .page-hero .lede {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .95rem; line-height: 1.5;
  }
  .page-hero h1 { font-size: 1.55rem; line-height: 1.15; }
  .page-hero { padding-block: calc(var(--hp-kepala) + .9rem) 1rem; }
  .katalog-utama { padding-block-start: calc(var(--hp-kepala) + .9rem); }
  /* Kalimat pengantar katalog tidak ikut ke ponsel (STANDAR 16). */
  .katalog-kepala .katalog-lede { display: none; }
  .katalog-kepala h1 { margin-block-end: .9rem; }
  .page-hero-lanjut { padding-block-start: 1.4rem; }
  .katalog-kepala .crumbs { margin-block-end: .7rem; }
}

/* =====================================================================
   SUDUT-SUDUT PONSEL — STANDAR bagian 16b (lanjutan)

   Temuan dari penyisiran 390px DAN 320px. Layar 320px bukan kasus
   langka: iPhone SE dan sebagian besar Android murah masih di situ, dan
   halaman yang bisa digeser mendatar di layar itu terasa rusak.
   ===================================================================== */

@media (max-width: 780px) {
  /* Kolom pencarian katalog melebar 13px di layar 320px: isian di
     dalamnya punya lebar bawaan sendiri, dan lebar bawaan itu tidak
     menyusut kecuali disuruh. */
  [data-gt-blok] .gtc-cari { max-inline-size: 100%; }
  [data-gt-blok] .gtc-cari input { min-inline-size: 0; flex: 1 1 auto; }

  /* SASARAN SENTUH 44px — bagian 16 melarang yang lebih kecil, dan
     penyisiran menemukan lima yang melanggar: tombol Cari di katalog,
     dua chip saringan, pemilih bahasa di kaki halaman, dan tombol
     "Hubungi Kami" berukuran kecil. Chip 38px memang lazim di aplikasi,
     tetapi standar di situs ini 44px dan yang mengalah bentuknya, bukan
     standarnya. */
  [data-gt-blok] .gtc-tombol { min-block-size: 44px; }
  .gtk-bilah .combo-btn { min-block-size: 44px; }
  .lang-switch button { min-block-size: 44px; min-inline-size: 44px; }
  /* Pemilih bahasa di kaki lembar menu sengaja dibuat kecil dulu supaya
     tidak berebut perhatian dengan jam layanan di sebelahnya. Niatnya
     benar, ukurannya tidak: 34px di bawah batas 44px yang ditulis
     bagian 16, dan batas itu soal jempol, bukan soal hierarki. Yang
     mengecil sekarang hurufnya, bukan sasaran sentuhnya. */
  .sheet-kaki .m-lang button { min-block-size: 44px; min-inline-size: 44px; }
  .btn-sm, .btn.btn-sm { min-block-size: 44px; }
}


/* Tombol tutup penampil foto dan tombol kembali di kepala ringkas ikut
   batas 44px bagian 16 — keduanya sempat 38px. */
@media (max-width: 780px) {
  .gtf-tutup { inline-size: 44px; block-size: 44px; }
}

/* Sel tanggal 42px naik jadi 44px — batas bagian 16 berlaku juga untuk
   petak kalender, dan meleset dua piksel tetap meleset. */
@media (max-width: 780px) {
  .dp-day { min-block-size: 44px; }
}

/* =====================================================================
   HALAMAN PHP DI PONSEL — STANDAR bagian 16b
   lacak.php, visa-katalog.php, visa-produk.php

   Ketiganya dirakit oleh perakit yang sama dan sudah dapat bilah tab,
   tetapi kepala dan formulirnya punya kelas sendiri — .lacak-hero,
   .vs-shell, .vp-loket — sehingga tidak kena satu pun aturan ponsel yang
   ditulis untuk .page-hero dan .field. Akibatnya judul "Lacak pemesanan
   Anda" tertimbun kepala halaman, dan isiannya setinggi 32px, jauh di
   bawah batas 44px yang ditulis bagian 16 untuk seluruh situs.

   Halaman inilah tujuan tab "Pesanan" di bilah tab — halaman yang paling
   sering dibuka dari ponsel oleh orang yang sedang menunggu tiketnya.

   Kenapa tiap pemilih di bawah diawali "body": ketiga halaman itu
   membawa <style> sendiri di dalam halamannya, dan gaya yang ditulis
   lebih belakang menang atas gaya berkas ini kalau kekhususannya sama.
   Satu kata "body" membuat aturan ponsel di sini menang tanpa perlu
   menyalin ulang aturannya ke tiga tempat — dan aturan ponsel yang
   tersebar di tiga tempat adalah persis cara aturan itu jadi berbeda-beda
   tanpa ada yang menyadarinya.
   ===================================================================== */

@media (max-width: 780px) {
  /* Kepala halaman melayang 54px; kepala kedua halaman ini cuma diberi
     ruang 40px dan 0px. */
  body .lacak-hero { padding-block-start: calc(var(--hp-kepala) + .9rem); }
  body .vs-shell { padding-block-start: calc(var(--hp-kepala) - 1.4rem); }

  body .lacak-hero h1, body .vs-shell h1 { font-size: 1.55rem; line-height: 1.15; }

  /* ---------- Isian: baris bergaris rambut, sama dengan formulir lain ----------
     Bagian 16 menuntut satu bentuk isian di seluruh situs supaya
     mengisi apa pun terasa satu tangan. Kotak berbingkai setinggi 32px
     di dalam kartu adalah bentuk ketiga, dan yang paling sempit. */
  body .lacak-medan > div { display: grid; gap: .2rem; }
  body .lacak-medan label {
    font-family: var(--mono); font-size: .74rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--ink-3);
  }
  body .lacak-medan input {
    min-block-size: 48px; font-size: 16px; inline-size: 100%;
    padding: .35rem 0; border: 0;
    border-block-end: 1px solid var(--hair-2); border-radius: 0;
    background: none; color: var(--ink);
  }
  body .lacak-medan input:focus { outline: none; border-block-end-color: var(--accent); }
  body .lacak-medan .bantu { font-size: .78rem; color: var(--ink-3); margin-block-start: .3rem; }
  body .lacak-tbl { min-block-size: 50px; inline-size: 100%; }

  /* Satu kartu, bukan kartu di dalam kartu. */
  body .lacak-kartu { border-radius: var(--r-lg); }
  body .lacak-kartu .lacak-isi { padding: 1.1rem; }

  /* ---------- Loket visa ----------
     Kotak bergaris di dalam kartu bergaris: dua bingkai untuk satu
     formulir. Yang dalam dilepas; barisnya sudah dipisah garis rambut. */
  body .vp-loket > .vp,
  body .vp-loket .vp-bilah { border: 0; border-radius: 0; background: none; padding-inline: 0; }
  body .vp-medan { border-block-end: 1px solid var(--hair); }
  body .vp-medan:last-child { border-block-end: 0; }
  body .vp-nilai { min-block-size: 52px; inline-size: 100%; }
  body .vp-label { font-size: .74rem; }
  body .vp-saring-isi { min-block-size: 44px; font-size: 16px; }
  body .vp-cari, body .vp-loket button[type="submit"] { min-block-size: 50px; inline-size: 100%; }

  /* Chip saringan jenis visa di katalog, dan tombol bagikan di halaman
     visa: 39px dan 38px. Dua sampai lima piksel di bawah batas tetap di
     bawah batas. */
  body .vs-saring a, body .vs-saring button { min-block-size: 44px; display: inline-flex; align-items: center; }
  body .vs-bagikan a, body .vs-bagikan button { min-block-size: 44px; display: inline-flex; align-items: center; }
  body .vs-bagian > a { min-block-size: 44px; display: inline-flex; align-items: center; }
}

/* =====================================================================
   CHIP SARINGAN JENIS VISA — STANDAR bagian 16b

   Dulu bergaya lewat atribut style= di tiap tautan. Gaya sebaris menang
   atas berkas gaya mana pun tanpa !important, jadi aturan ponsel tidak
   bisa menyentuhnya dan tingginya tertahan 39px — di bawah batas 44px.
   Bentuknya sama dengan chip saringan katalog atraksi.
   ===================================================================== */
.vs-chips { display: flex; gap: .45rem; flex-wrap: wrap; padding-block-end: .5rem; }
.vs-chip {
  display: inline-flex; align-items: center; gap: .35rem;
  min-block-size: 40px; padding: .4rem .9rem;
  border: 1px solid var(--hair-2); border-radius: 999px;
  background: var(--paper); color: var(--ink-2);
  font-size: .85rem; text-decoration: none;
  transition: border-color 140ms var(--ease), background 140ms var(--ease);
}
.vs-chip:hover { border-color: var(--accent); text-decoration: none; }
.vs-chip.is-aktif { background: var(--accent); border-color: var(--accent); color: #fff; }
.vs-chip-n { opacity: .7; font-family: var(--mono); font-size: .75rem; }
@media (max-width: 780px) { .vs-chip { min-block-size: 44px; } }

/* =====================================================================
   PANEL PERMINTAAN HARUS DI ATAS BOLA DUNIA

   Bola dunia di hero berdiri di .globe-host dengan z-index 1. Elemen
   berposisi dengan z-index 1 dilukis di atas SELURUH isi biasa yang
   datang sesudahnya, betapa pun jauh di bawahnya isi itu berada.

   Akibatnya: pemilih tanggal di panel permintaan — yang membuka ke ATAS
   ketika ruang di bawahnya kurang, dan di layar 1440x900 memang selalu
   kurang — digambar tepat di belakang kanvas bola dunia. Ia terlihat
   (karena kanvasnya sebagian besar tembus pandang) tetapi tidak bisa
   ditekan: setiap klik mendarat di kanvas. Tanggal berangkat di tab
   Pesawat dan tanggal menginap di tab Hotel sama-sama kena.

   Satu baris: panel permintaan diangkat ke lapis di atas bola dunia.
   Bukan bola dunianya yang diturunkan — z-index 1 di sana memang perlu,
   ia yang menaruh bola di atas kisi hero.
   ===================================================================== */
/* Hanya di layar lebar: di ponsel bola dunia sudah pointer-events:none
   dan z-index 0, dan lapisan ini pernah menjebak layar produk yang
   berdiri di dalamnya (lihat SISTEM PONSEL). */
@media (min-width: 781px) { #permintaan { position: relative; z-index: 2; } }

/* =====================================================================
   BINGKAI FORMULIR TIDAK BOLEH MEMOTONG PEMILIH TANGGAL

   .fgrid diberi overflow:hidden supaya garis pemisah antar sel terpotong
   rapi di sudut bingkainya yang membulat. Alasannya benar, akibatnya
   tidak: pemilih tanggal dan menu pilihan digambar DI DALAM sel, dan
   ketika ruang di bawahnya kurang ia membuka ke atas — keluar dari
   bingkai, lalu terpotong habis.

   Di layar 1440x900 ruang di bawahnya memang selalu kurang. Jadi di
   beranda, tanggal berangkat di tab Pesawat dan tanggal menginap di tab
   Hotel sama-sama tidak bisa dipilih: kalendernya ada di DOM, terbaca
   "visible" oleh peramban, dan tidak pernah sampai ke layar. Yang
   terlihat di tempatnya bola dunia di belakangnya, dan tiap klik
   mendarat di sana.

   Selama ada yang terbuka di dalamnya, bingkainya tidak memotong.
   ===================================================================== */
.fgrid:has(.is-open) { overflow: visible; }

/* =====================================================================
   KEPALA, JUDUL, DAN KAKI DI PONSEL — STANDAR bagian 16b

   Tiga tempat yang masing-masing memakan hampir satu layar penuh tanpa
   menjual apa pun. Ketiganya dipadatkan; tidak ada isi yang dibuang dari
   situs, dan di layar lebar tidak ada yang berubah.
   ===================================================================== */

/* Judul bagian punya dua bentuk. Yang panjang untuk layar lebar, yang
   pendek untuk ponsel — dua-duanya ada di HTML, jadi mesin pencari dan
   pembaca layar tetap dapat yang lengkap. */
.j-hp { display: none; }

@media (max-width: 780px) {
  .j-pc { display: none; }
  .j-hp { display: inline; }

  /* ---------- KEPALA HALAMAN ----------
     Tombol WhatsApp gelap dibuang DI PONSEL. Tiga alasan, dan ketiganya
     baru berlaku sejak bilah tab ada:

     1. Ia mengulang. Tab "Bantuan" di kaki layar menuju WhatsApp yang
        sama, dan tab itu ada sejak halaman dibuka sampai ditutup — lebih
        terjangkau jempol daripada sudut kanan atas.
     2. Ia menenggelamkan mereknya sendiri. Kotak navy 44px adalah benda
        paling gelap dan paling padat di layar pertama; mata jatuh ke
        sana lebih dulu daripada ke nama perusahaannya.
     3. Ia menumpuk. Kepala, lalu bilah pencarian, lalu petak ikon: tiga
        bilah beruntun sebelum satu barang pun terlihat.

     Aturan "WhatsApp terjangkau tanpa menggulir dan tanpa membuka menu"
     tidak dilonggarkan — justru dipenuhi lebih baik: dulu terjangkau
     selama halaman belum digulir, sekarang selalu. Di layar lebar
     tombolnya tetap ada; di sana tidak ada bilah tab. */
  .app { padding-block: calc(var(--hp-kepala) + .5rem) .25rem; }

  /* ---------- TANYA JAWAB ----------
     Lima pertanyaan yang masing-masing patah dua baris memakan satu
     layar penuh di beranda, dan tidak satu pun dari lima itu barang yang
     bisa dibeli. Isinya tetap ada — bagiannya ikut terlipat seperti
     bagian penjelas lain, dan terbuka sendiri kalau alamatnya (#tanya
     dari kaki halaman) menunjuk ke sana. */
  .qa-q { padding-block: .8rem; font-size: .92rem; line-height: 1.35; }
  .qa-a p { font-size: .9rem; line-height: 1.55; }

  /* ---------- KAKI HALAMAN ----------
     Kaki halaman di ponsel mengulang tiga tempat sekaligus: bilah tab
     (Bantuan), lembar menu, dan halaman kontak. Yang ditinggalkan yang
     tidak ada di ketiganya — alamat kantor dan jam jawab — dan merek.
     Kalimat "Mitra perjalanan dan kebutuhan global untuk perorangan,
     rombongan, korporat, dan sesama pelaku usaha travel" adalah kalimat
     pemasaran; tempatnya halaman Tentang, bukan tiap kaki halaman. */
  .site-footer .f-desc { display: none; }
}

/* =====================================================================
   HERO BERANDA DI PONSEL — STANDAR bagian 16 (revisi)

   Hero-nya tetap hero yang sama: judul yang sama, bola dunia yang sama,
   warna yang sama. Yang dipangkas panjangnya.

   Di layar lebar paragraf empat baris itu terbaca sambil mata turun ke
   panel di sebelahnya. Di 390px ia menumpuk di atas panel — 400px teks
   sebelum satu kotak isian pun terlihat, padahal panel itulah alat
   halaman ini. Paragrafnya dipotong dua baris, dan tautan "kenapa lewat
   agen" pindah ke halaman layanannya sendiri (ia tetap ada di sana).
   ===================================================================== */
@media (max-width: 780px) {
  .hero { padding-block: calc(var(--hp-kepala) + .6rem) .25rem; }
  .hero h1.d1 { font-size: 1.85rem; line-height: 1.1; margin-block: .9rem .8rem !important; }
  /* .66rem = 10,6px, di bawah batas baca yang dijaga standar.py. Yang
     dipendekkan boleh jaraknya, bukan hurufnya. */
  .hero .pill { font-size: .72rem; }
  .hero .lede {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    overflow: hidden; font-size: .95rem; line-height: 1.5;
  }
  .hero .hero-tautan { display: none; }
  .hero + .section-sm { padding-block-start: .5rem; }

  /* Nama layanan satu baris; tingginya sama untuk keenamnya supaya
     barisnya rata, bukan bergerigi. */
  .svc-btn .svc-nama {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    inline-size: 100%; text-align: center;
  }
}

@media (max-width: 780px) {
  /* Baris angka besar ("3jt+ properti", "166 negara") adalah bagian
     pemasaran yang tidak bisa ditekan dan tidak menjawab satu pertanyaan
     pun. Di layar lebar ia mengisi ruang kosong di samping; di 390px ia
     menumpuk 300px di antara panel pencarian dan rel produk. Angkanya
     tetap ada di halaman Tentang. */
  body[data-hal="index.html"] section:has(> .shell > .figs) { display: none; }

  /* Pita gelap "alur pemesanan" yang terlipat: lihat EKOR HALAMAN
     (STANDAR bagian 23) di blok SISTEM PONSEL. */
}

/* Galeri paket dan penampil foto di ponsel: lihat SISTEM PONSEL (STANDAR
   bagian 18) di ujung berkas. Dua blok lama yang berdiri di sini — galeri
   satu-foto-satu-layar dan penampil tanpa strip — sudah dicabut: pemilik
   meminta mozaik seperti layar lebar dengan susunan ponsel, dan penampil
   yang satu sistem dengan layar lebar. */

/* =====================================================================
   SASARAN SENTUH YANG MASIH MELESET — STANDAR bagian 16

   Ditemukan penyisiran otomatis, bukan dengan melihat satu per satu.
   Batas 44px di bagian 16 berlaku untuk SEMUA yang bisa ditekan, dan
   yang di bawah ini semuanya lolos selama ini karena bentuknya bukan
   tombol: tombol kalender di dalam baris isian, tombol menu pilihan,
   "Hari ini" dan "Hapus" di kaki kalender, "Semua" di bilah pencarian
   katalog, "Lihat di peta" di baris fakta, dan "Selengkapnya" di bawah
   deskripsi.

   Yang naik ukurannya sasaran sentuhnya, bukan hurufnya.
   ===================================================================== */
@media (max-width: 780px) {
  .fgrid .date-btn, .fgrid .combo-btn { min-block-size: 46px; }
  .dp-foot button { min-block-size: 44px; }
  .gtc-semua { min-block-size: 44px; display: inline-flex; align-items: center; }
  .gtk-peta, .gtl-desk-lagi {
    min-block-size: 44px; display: inline-flex; align-items: center;
  }
  .gtk-fakta-butir { min-block-size: 44px; }
}

/* =====================================================================
   PANEL KENDALI YANG TERBUKA HARUS DI ATAS SEGALANYA — bagian 16b

   Menu pilihan dan kalender digambar tepat di bawah medannya. Medan yang
   berada di paruh bawah halaman membuat menunya jatuh persis di belakang
   bilah tab 56px — pilihannya terlihat, dan tidak bisa ditekan. Yang
   membuka ke ATAS jatuh di belakang kepala halaman, dengan akibat yang
   sama.

   Dua hal sekaligus: bilah tab menyingkir selama panel terbuka, dan
   medannya sendiri diangkat ke lapis di atas kepala halaman.
   ===================================================================== */
@media (max-width: 780px) {
  .combo.is-open, .datefield.is-open, .vp-medan.is-buka {
    position: relative; z-index: var(--lapis-kendali);
  }
}

/* =====================================================================
   SISTEM PONSEL — STANDAR bagian 18

   Satu tempat untuk segala yang selama ini tersebar di dua puluh lima
   blok @media (max-width: 780px) yang saling menimpa: ukuran bilah,
   urutan lapisan, navigasi, layar produk, ikon layanan, dan hero.

   Aturan mainnya:
   1. Ukuran dan lapisan adalah VARIABEL. Tinggi kepala ponsel pernah
      ditulis 58px di satu blok dan 54px di blok lain; bilah harga
      pernah setinggi 73px sementara ruang di kaki isi 86px. Sekarang
      angka itu satu, dan yang memakainya membaca variabelnya.
   2. Di ≤780px navigasi utamanya SATU: bilah tab di kaki. Tombol menu
      di kepala dan tab "Layanan" membuka lembar yang sama, jadi tombol
      menunya dibuang; kepala ponsel cuma merek. (781–1080px masih
      memakai tombol menu, karena di sana tidak ada bilah tab.)
   3. Bilah tab hanya ada di layar AKAR. Layar produk, lembar menu,
      penampil foto, dan menu pilihan yang terbuka semuanya
      menyingkirkannya — dan layar produk membawa bilah harganya
      sendiri. Dua bilah di kaki tidak pernah ada bersamaan.
   4. Layar produk hidup di .layar-hp, penampung di ujung <body>.
      Bukan di dalam panel: layar penuh yang berdiri di dalam pohon
      halaman terjebak oleh leluhur mana pun yang punya transform atau
      z-index (terakhir: #permintaan { z-index: 2 }, yang menaruh
      seluruh layar produk di bawah kepala halaman). Di ujung body
      tidak ada leluhur yang bisa menjebaknya.
   5. Keadaan "layar produk terbuka" ditulis ke <html> dan <body> secara
      sinkron oleh yang membukanya, dan CSS hanya membaca kelas itu.
   ===================================================================== */
:root {
  --hp-kepala: 54px;
  --hp-tab: 56px;
  --hp-aksi: 74px;
  --hp-galeri: min(96vw, 420px);  /* tinggi mozaik: foto 16:10 + baris petak persegi */
  --aman-atas: env(safe-area-inset-top, 0px);
  --aman-bawah: env(safe-area-inset-bottom, 0px);
  --lapis-kepala: 100;
  --lapis-tab: 118;
  --lapis-scrim: 119;
  --lapis-lembar: 120;
  --lapis-layar: 121;
  --lapis-kendali: 130;
  --gerak-cepat: 180ms;
  --gerak: 240ms;
  --gerak-lambat: 300ms;
}

@media (max-width: 780px) {
  :root { --header-h: var(--hp-kepala); }

  /* ---------- Kepala: merek saja ----------
     Logo dan "Zein Group Indonesia" dalam satu baris, ukuran dan warna
     yang sama dengan layar lebar. Tidak ada tombol menu (fungsinya ada
     di tab "Layanan"), tidak ada tombol WhatsApp (fungsinya ada di tab
     "Bantuan"). Di 320px namanya mengecil sedikit; ia tidak
     disembunyikan — kepala tanpa nama perusahaan bukan kepala. */
  .site-header, .site-header.is-stuck { block-size: var(--hp-kepala); z-index: var(--lapis-kepala); }
  .burger, .header-cta { display: none; }
  .brand { gap: .55rem; }
  .brand-mark svg, .brand-mark .merek-logo { block-size: 22px; }
  .brand-name { display: block; font-size: 1rem; letter-spacing: -.03em; white-space: nowrap; }

  /* ---------- Bilah tab ---------- */
  .tabbar {
    display: grid; grid-template-columns: repeat(4, 1fr);
    position: fixed; inset-inline: 0; inset-block-end: 0; z-index: var(--lapis-tab);
    background: rgba(255,255,255,.97);
    border-block-start: 1px solid var(--hair-2);
    padding-block-end: var(--aman-bawah);
  }
  .tabbar .tab {
    display: grid; justify-items: center; align-content: center; gap: .18rem;
    min-block-size: var(--hp-tab); padding: .35rem .2rem;
    font-family: var(--ui); font-size: .72rem; font-weight: 500; letter-spacing: -.01em;
    color: var(--ink-3); background: none; border: 0;
    transition: color var(--gerak-cepat) linear;
  }
  .tabbar .tab svg { inline-size: 22px; block-size: 22px; }
  .tabbar .tab.is-active { color: var(--accent-2); }
  .tabbar .tab:active { background: var(--ground); }
  /* Halaman diberi ruang setinggi bilahnya: tidak ada isi yang tertutup
     di ujung gulir. */
  body { padding-block-end: calc(var(--hp-tab) + var(--aman-bawah)); }
  /* Hanya di layar akar. */
  body.menu-open .tabbar,
  body.produk-buka .tabbar,
  body.kendali-buka .tabbar,
  body.gtf-terbuka .tabbar,
  body.tugas-buka .tabbar { display: none; }

  /* ---------- Ikon layanan: tanda aktif yang tenang ----------
     Tidak ada lingkaran di belakang ikon. Yang aktif: ikon biru utama,
     nama menghitam dan sedikit menebal, satu garis biru 28px di bawah.
     Yang tidak aktif: ikon dan nama sama-sama slate. Titik hijau adalah
     tanda KETERSEDIAAN — ia diam di pojok kanan atas ikon, 7px dengan
     cincin putih, dan tidak berubah apa pun saat layanannya dipilih. */
  .svc-btn {
    color: var(--ink-3); font-weight: 500;
    transition: color var(--gerak-cepat) linear;
  }
  .svc-btn::before { display: none; }
  .svc-ikon { color: var(--ink-3); transition: color var(--gerak-cepat) linear; }
  .svc-btn.is-active { color: var(--ink); font-weight: 600; }
  .svc-btn.is-active .svc-ikon { color: var(--accent); }
  .svc-btn::after {
    content: ""; display: block; position: absolute;
    inset-block-end: 0; inset-inline-start: 50%;
    inline-size: 28px; block-size: 2px; margin-inline-start: -14px;
    border-radius: 2px; background: var(--accent);
    transform: scaleX(0); transform-origin: center;
    transition: transform var(--gerak-cepat) var(--ease);
  }
  .svc-btn.is-active::after { transform: scaleX(1); }
  .svc-btn:first-child::after { inset-inline-start: 50%; }
  .svc-btn .svc-titik {
    position: absolute; inset-block-start: .55rem;
    inset-inline-start: calc(50% + 10px); inset-inline-end: auto;
    inline-size: 7px; block-size: 7px; margin: 0; z-index: 2;
    box-shadow: 0 0 0 2px var(--paper);
  }
  .svc-btn .svc-titik::after { animation: none; display: none; }

  /* ---------- Hero: bola dunia tajam, terpotong di kanan ----------
     Bola yang sama dengan layar lebar — warna sama, kerapatan sama,
     tanpa opacity dan tanpa mask. Ia digeser ke kanan sampai separuh
     lebih berada di luar layar: yang terlihat lengkung kirinya dengan
     daratan yang jelas, dan judulnya tetap punya bidang putih di
     kiri. Judul yang bertemu tepi bola tetap terbaca karena bolanya
     putih; titik daratannya biru pucat, teksnya navy. */
  .hero .stage {
    position: absolute; inset-block-start: -1.75rem; inset-inline-end: -46vw;
    inline-size: 94vw; margin: 0; pointer-events: none; z-index: 0;
    opacity: 1;
    -webkit-mask-image: none; mask-image: none;
  }
  .hero { overflow-x: clip; }

  /* ---------- Layar produk ----------
     Penggulirnya milik layar ini. Halaman di belakangnya dikunci dan
     dibiarkan di posisi gulirnya, supaya "kembali" mendarat persis di
     baris yang ditinggalkan. */
  html.produk-buka, html.produk-buka body { overflow: hidden; }
  .layar-hp { display: none; }
  .layar-hp:not(:empty) {
    display: block; position: fixed; inset: 0; z-index: var(--lapis-layar);
    background: var(--paper);
  }
  .layar-hp > .gtl, .layar-hp > .gtk-layar {
    position: absolute; inset: 0; overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 0 var(--pad) calc(var(--hp-aksi) + var(--aman-bawah) + 1.25rem);
    background: var(--paper); animation: none;
  }
  /* Tombol kembali: bundar, di atas foto, sejak bingkai pertama. Ia
     berdiri di penampung, BUKAN di dalam penggulir yang dianimasikan. */
  /* Tombol di atas foto — kembali di kiri, bagikan di kanan — memakai
     bentuk yang dipakai Agoda, Trip.com, dan Booking: bulatan 40px
     setengah tembus gelap dengan kaca buram tipis dan ikon putih. Terbaca
     di atas foto terang maupun gelap; lingkaran putih pekat yang dulu
     dipakai menutupi fotonya dan terlihat seperti tempelan. Sasaran
     sentuhnya tetap 44px lewat area di sekelilingnya. */
  .layar-hp > .gtl-kembali, .layar-hp > .gtl-bagikan {
    position: absolute; inset-block-start: max(.55rem, var(--aman-atas));
    z-index: 3; inline-size: 44px; block-size: 44px; min-block-size: 44px;
    margin: 0; padding: 0; display: grid; place-items: center;
    border: 0; border-radius: 50%; background: none; box-shadow: none;
    font-size: 0; color: #fff; -webkit-tap-highlight-color: transparent;
    transition: opacity var(--gerak-cepat) linear;
  }
  .layar-hp > .gtl-kembali { inset-inline-start: .55rem; }
  .layar-hp > .gtl-kembali::before, .layar-hp > .gtl-bagikan::before {
    content: ""; position: absolute; inset: 2px; border-radius: 50%;
    background: rgba(15,23,42,.42);
    -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3);
    box-shadow: inset 0 0 0 .5px rgba(255,255,255,.28), 0 1px 4px rgba(0,0,0,.14);
    transition: transform var(--gerak-cepat) var(--ease), background var(--gerak-cepat) linear;
  }
  .layar-hp > .gtl-kembali:active::before, .layar-hp > .gtl-bagikan:active::before {
    transform: scale(.9); background: rgba(13,31,49,.52);
  }
  /* Ikon 22px, tanpa bayangan: bayangan pada goresan tipis membuatnya
     tampak buram di layar 2x–3x. Kontras dijaga oleh bulatan gelapnya. */
  .layar-hp > .gtl-kembali svg, .layar-hp > .gtl-bagikan svg {
    position: relative; inline-size: 22px; block-size: 22px; display: block;
  }
  .layar-hp > .gtl-kembali .ik-ujung, .dalam-kepala .ik-ujung { display: none; }
  .layar-hp > .gtl-kembali .ik-panah, .dalam-kepala .ik-panah { display: inline; }
  /* Teks "Semua atraksi" milik tampilan desktop; di atas foto hanya ikon. */
  .layar-hp > .gtl-kembali span { display: none; }
  .layar-hp > .gtl-kembali:focus-visible::before, .layar-hp > .gtl-bagikan:focus-visible::before {
    box-shadow: inset 0 0 0 2px #fff;
  }
  .layar-hp > .gtl-kembali[hidden] { display: none; }
  .layar-hp > .gtl-bagikan { inset-inline-end: .55rem; }
  .layar-hp > .gtl-bagikan span { display: none; }
  .layar-hp > .gtl-bagikan[hidden] { display: none; }
  .layar-hp .gtl-atas:empty { display: none; }
  .dalam-kepala .dalam-bagikan {
    margin-inline-start: auto; inline-size: 44px; block-size: 44px; flex: none;
    display: grid; place-items: center; background: none; border: 0; color: var(--ink);
  }
  .dalam-kepala .dalam-bagikan svg { inline-size: 20px; block-size: 20px; }
  .dalam-kepala button { border-radius: 50%; transition: background var(--gerak-cepat) linear, transform var(--gerak-cepat) var(--ease); -webkit-tap-highlight-color: transparent; }
  .dalam-kepala button:active { background: var(--ground); transform: scale(.92); }
  /* Lembar bagikan naik dari kaki layar. */
  .bagi { place-items: end stretch; }
  .bagi-isi {
    inline-size: 100%; border-radius: var(--r-xl) var(--r-xl) 0 0;
    padding: .75rem var(--pad) calc(1rem + var(--aman-bawah));
    animation: bagi-naik var(--gerak-lambat) cubic-bezier(.16, 1, .3, 1) backwards;
  }
  .bagi-isi::before {
    content: ""; display: block; inline-size: 36px; block-size: 4px; border-radius: 2px;
    background: var(--hair-2); margin: 0 auto .6rem;
  }
  @keyframes bagi-naik { from { transform: translateY(100%); } to { transform: none; } }
  .bagi-saluran { gap: .35rem; }
  .bagi-btn { font-size: .7rem; }
  .bagi-salin input { font-size: 16px; }
  body.bagi-terbuka .dalam-kaki, body.bagi-terbuka .dalam-kepala, body.bagi-terbuka .tabbar { display: none; }
  @media (prefers-reduced-motion: reduce) { .bagi-isi { animation: none; } }
  /* Layar tanpa galeri (eSIM): isinya mulai di bawah kepala kontekstual. */
  .layar-hp > .gtl.tanpa-galeri { padding-block-start: calc(var(--hp-kepala) + var(--aman-atas) + .75rem); }
  /* Kepala halaman utama tidak sekadar tertutup — ia disingkirkan, supaya
     Tab dan pembaca layar tidak mampir ke bilah yang tidak terlihat. */
  body.produk-buka .site-header { visibility: hidden; }

  /* Kepala ringkas: muncul setelah nama produk tergulir lewat. */
  .layar-hp > .dalam-kepala {
    position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 4;
    display: flex; align-items: center; gap: .6rem;
    min-block-size: var(--hp-kepala); padding-inline: .6rem;
    padding-block-start: var(--aman-atas);
    background: var(--paper); border-block-end: 1px solid var(--hair);
    transform: translateY(-100%); transition: transform var(--gerak) var(--ease);
  }
  .layar-hp > .dalam-kepala.is-tampil { transform: none; }
  .dalam-kepala button {
    inline-size: 44px; block-size: 44px; flex: none;
    display: grid; place-items: center;
    background: none; border: 0; color: var(--ink);
  }
  .dalam-kepala button svg { inline-size: 20px; block-size: 20px; }
  .dalam-kepala span {
    font-size: .97rem; font-weight: 600; letter-spacing: -.015em;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* Bilah harga: satu-satunya bilah di kaki selama layar produk terbuka. */
  .layar-hp > .dalam-kaki {
    position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 4;
    display: flex; align-items: center; gap: .8rem;
    min-block-size: calc(var(--hp-aksi) + var(--aman-bawah));
    padding: .6rem var(--pad) calc(.6rem + var(--aman-bawah));
    background: var(--paper); border-block-start: 1px solid var(--hair-2);
    box-shadow: 0 -4px 16px rgba(11,29,51,.06);
    animation: dalam-kaki-naik var(--gerak-lambat) cubic-bezier(.16,1,.3,1) backwards;
  }
  .dalam-kaki-harga { display: grid; gap: .05rem; min-inline-size: 0; }
  .dalam-kaki-label { font-size: .7rem; color: var(--ink-3); }
  .dalam-kaki-nilai {
    font-size: 1.12rem; font-weight: 700; letter-spacing: -.03em; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .dalam-kaki .btn { margin-inline-start: auto; flex: none; min-block-size: 46px; }

  /* ---------- Galeri: mozaik, susunan ponsel ----------
     Sistem yang sama dengan layar lebar — foto-foto disusun, petak
     terakhir gelap menyebut sisa fotonya — tetapi susunannya untuk
     lebar 390px: satu foto besar 16:10 di atas, tiga petak persegi di
     bawahnya. Petak keempat menanggung "+N foto"; petak kelima milik
     mozaik lebar tidak dipakai. Semua foto tetap terbuka di penampil.
     Tingginya kira-kira 96% lebar layar (373px di 390) — di bawah
     separuh tinggi layar, jadi nama dan harga mengintip di bawahnya. */
  .layar-hp .gtk-galeri,
  .layar-hp .gtk-galeri-1, .layar-hp .gtk-galeri-2, .layar-hp .gtk-galeri-3,
  .layar-hp .gtk-galeri-4, .layar-hp .gtk-galeri-5 {
    display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px;
    grid-template-rows: none; block-size: auto; aspect-ratio: auto;
    margin: 0 calc(var(--pad) * -1) 0; border-radius: 0; overflow: hidden;
  }
  .layar-hp .gtk-galeri > .gtk-gfoto {
    grid-area: auto; grid-column: span 2; grid-row: auto; aspect-ratio: 1 / 1; block-size: auto;
    margin: 0; border-radius: 0; background: var(--ground);
  }
  .layar-hp .gtk-galeri > .gtk-gfoto:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .layar-hp .gtk-galeri-2 > .gtk-gfoto:nth-child(2) { grid-column: 1 / -1; aspect-ratio: 16 / 6; }
  .layar-hp .gtk-galeri-3 > .gtk-gfoto:nth-child(n + 2) { grid-column: span 3; aspect-ratio: 3 / 2; }
  .layar-hp .gtk-galeri-5 > .gtk-gfoto:nth-child(5) { display: none; }
  .layar-hp .gtk-galeri > .gtk-gfoto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
  /* Lencana "+N" milik layar lebar duduk di petak kelima yang tidak
     tampil; di ponsel petak keempat yang menanggungnya. */
  .layar-hp .gtk-gfoto-lagi { display: none; }
  .layar-hp .gtk-gfoto[data-sisa-hp]::after { display: grid; }
  .layar-hp .gtk-hitung { display: none; }

  /* ---------- Penampil foto: satu sistem dengan layar lebar ----------
     Bilah atas (tutup, nama, penghitung), foto, lalu strip foto kecil
     yang bisa digeser — sama seperti di layar lebar, dengan ukuran
     ponsel. Panahnya tetap ada di atas foto; fotonya juga bisa digeser
     jari. Latarnya pekat: bilah harga dan kepala layar paket di
     belakangnya sudah disingkirkan, jadi tidak ada yang tembus. */
  .gtf { grid-template-rows: auto minmax(0, 1fr) auto; background: #0B1420; }
  .gtf::backdrop { background: #0B1420; }
  .gtf-atas {
    display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; align-items: center; gap: .6rem;
    padding: max(.6rem, var(--aman-atas)) .8rem .4rem;
  }
  .gtf-tutup { grid-column: 1; grid-row: 1; inline-size: 44px; block-size: 44px; }
  .gtf-judul { grid-column: 2; grid-row: 1; display: block; font-size: .92rem; }
  .gtf-n { grid-column: 3; grid-row: 1; font-size: .8rem; color: rgba(255,255,255,.85); }
  .gtf-panggung {
    position: relative; grid-template-columns: minmax(0, 1fr);
    padding: 0; touch-action: pan-y;
  }
  .gtf-bingkai { display: grid; place-items: center; }
  .gtf-besar { max-inline-size: 100%; max-block-size: 100%; object-fit: contain; border-radius: 0; }
  .gtf-panah {
    display: grid; place-items: center;
    position: absolute; inset-block-start: 50%; margin-block-start: -22px; z-index: 3;
    background: rgba(11,20,32,.55); border-color: rgba(255,255,255,.28);
  }
  .gtf-seb { inset-inline-start: .5rem; }
  .gtf-ber { inset-inline-end: .5rem; }
  .gtf-strip {
    display: flex; padding: .6rem .8rem max(.8rem, var(--aman-bawah));
    justify-content: flex-start;
  }
  .gtf-kecil { inline-size: 64px; border-radius: var(--r-sm); }

  /* Deskripsi terlipat: lima baris lalu elipsis — bukan pudar putih
     setinggi dua baris yang terbaca sebagai teks rusak. */
  .layar-hp .gtl-desk-isi.is-pendek {
    max-block-size: none; display: -webkit-box; -webkit-line-clamp: 5;
    -webkit-box-orient: vertical; overflow: hidden;
    -webkit-mask-image: none; mask-image: none;
  }
  .layar-hp .gtl-desk-isi.is-pendek p { margin-block: 0 .5rem; }

  /* Penampil foto, lembar menu, dan menu pilihan menyingkirkan bilah
     harga & kepala ringkas layar produk — keduanya milik lapisan di
     bawahnya. */
  body.gtf-terbuka .dalam-kaki, body.gtf-terbuka .dalam-kepala { display: none; }


  /* ---------- EKOR HALAMAN — STANDAR bagian 23 ----------
     Yang ada di bawah dagangan: bagian penjelas yang terlipat, alur
     langkah, tanya jawab, dan kaki halaman. Di ponsel semuanya memakai
     bahasa daftar aplikasi: baris judul 56px yang bentuknya SAMA untuk
     semua bagian (tidak ada pita gelap, tidak ada judul di tengah),
     alur langkah sebagai penunjuk bernomor tegak, dan kaki halaman yang
     ringkas — merek, bahasa, dua tombol hubungi, alamat, tautan, hak
     cipta — bukan daftar 76px per baris setinggi satu layar. */

  /* Baris judul yang terlipat: satu bentuk, termasuk untuk .bleed. */
  .bagian-lipat, .bagian-lipat.bleed {
    background: var(--paper); background-image: none; color: inherit;
    padding-block: 0; margin-block: 0; border-block-start: 1px solid var(--hair);
  }
  .bagian-lipat + .site-footer { border-block-start-width: 0; }
  .bagian-kepala { min-block-size: 56px; padding-block: .55rem; text-align: start; }
  .bagian-kepala.sec-head-center { max-width: none; margin-inline: 0; }
  .bagian-kepala h2, .bagian-lipat.bleed .bagian-kepala h2 {
    color: var(--ink); font-size: 1.0625rem; font-weight: 600; text-align: start;
  }
  .bagian-kepala h2 em, .bagian-lipat.bleed .bagian-kepala h2 em { color: inherit; }
  .bagian-tanda, .bagian-lipat.bleed .bagian-tanda { color: var(--ink-3); }
  .bagian-lipat .qa { margin-block-start: .1rem; }

  /* Alur langkah: penunjuk bernomor tegak — nomor di kiri, garis
     penghubung, judul dan keterangan di kanan. Label "Langkah n" tidak
     dipakai: nomornya sudah di lingkaran. */
  .bagian-lipat .track { grid-template-columns: 1fr; gap: 0; counter-reset: langkah; padding-block-start: .35rem; }
  .bagian-lipat .track::before { display: none; }
  .bagian-lipat .track-item {
    counter-increment: langkah; position: static;
    display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: .9rem;
    padding: 0; border: 0;
  }
  .bagian-lipat .track-item::before {
    content: counter(langkah); position: static; grid-area: 1 / 1;
    inline-size: 28px; block-size: 28px; border-radius: 50%; box-shadow: none;
    background: var(--accent); color: #fff;
    font-family: var(--mono); font-size: .8rem; font-weight: 600;
    display: grid; place-items: center;
  }
  .bagian-lipat .track-item::after {
    content: ''; grid-area: 2 / 1; justify-self: center;
    inline-size: 2px; border-radius: 2px; background: var(--hair-2); margin-block: 4px;
  }
  .bagian-lipat .track-item:last-child::after { display: none; }
  .bagian-lipat .track-n { display: none; }
  .bagian-lipat .track-item h3 {
    grid-area: 1 / 2; align-self: center; margin: 0;
    color: var(--ink); font-size: 1rem; font-weight: 600; line-height: 1.3; letter-spacing: -.012em;
  }
  .bagian-lipat .track-item p {
    grid-area: 2 / 2; margin: .2rem 0 0; padding-block-end: 1.15rem;
    color: var(--ink-3); font-size: .9rem; line-height: 1.5;
  }
  .bagian-lipat .track-item:last-child p { padding-block-end: .5rem; }

  /* Kaki halaman: enam baris, tidak lebih tinggi dari setengah layar.
     Baris 1  merek ........................ ID EN AR
     Baris 2  [WhatsApp]  [Email]           (dua tombol pil, 44px)
     Baris 3  alamat kantor, jam jawab      (kecil, abu)
     Baris 4  Lacak · Tentang · Kontak · Pertanyaan Umum
     Baris 5  © hak cipta
     Susunannya dari HTML yang sama dengan layar lebar: penampung
     kolomnya dibuat display:contents supaya isinya bisa ditata sebagai
     petak. Kalimat pemasaran (.f-desc) tidak ikut. */
  .f-contact a { min-block-size: 44px; }   /* juga blok hubungi di halaman Kontak */
  .site-footer { padding-block: .55rem calc(.55rem + var(--aman-bawah)); border-block-start: 1px solid var(--hair); }
  .site-footer .footer-grid {
    display: grid; grid-template-columns: minmax(0, 1fr) auto;
    column-gap: .5rem; row-gap: .5rem; align-items: center;
  }
  .site-footer .f-brand, .site-footer .f-hub, .site-footer .f-bottom { display: contents; }
  .site-footer .footer-grid .f-desc, .site-footer .footer-grid .f-title { display: none; }
  .site-footer .f-brand .brand { grid-column: 1; order: 1; min-block-size: 44px; }
  .site-footer .lang-switch { grid-column: 2; order: 2; gap: 0; justify-self: end; }
  .site-footer .lang-switch button { min-inline-size: 44px; min-block-size: 44px; font-size: .72rem; }
  .site-footer .lang-switch button.is-active { background: var(--ground); color: var(--ink); }

  .site-footer .f-contact {
    grid-column: 1 / -1; order: 3; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: .2rem;
  }
  /* Tombol WhatsApp/Email tidak dipasang di kaki ponsel: keduanya sudah
     ada di bilah tab (Bantuan) dan lembar menu, dan dua pil berikon di
     antara merek dan alamat memutus kaki jadi tiga potong (permintaan
     pemilik). Yang tinggal: alamat kantor dan jam jawab. */
  .site-footer .f-contact > a { display: none; }
  .site-footer .f-contact > span {
    grid-column: 1 / -1; display: flex; align-items: center; gap: .5rem;
    padding: 0; border: 0; min-block-size: 0;
    font-size: .82rem; line-height: 1.4; color: var(--ink-3);
  }
  .site-footer .f-contact > span svg { inline-size: 14px; block-size: 14px; margin: 0; color: var(--ink-4); flex: none; }

  .site-footer .footer-grid > .f-col:not(.f-hub) { display: block; grid-column: 1 / -1; order: 4; }
  /* Enam tautan dalam dua kolom — tidak ada baris yang patah di tengah
     dengan pemisah menggantung di awal baris.
     Tingginya tetap 44px — sasaran sentuh ponsel tidak pernah ditawar
     (bagian 16, dijaga uji_sisir). Tiga baris tautan (sejak "Jelajahi
     Tujuan" dan "Katalog Visa" masuk, STANDAR 28) menambah 44px, dan
     ruangnya diambil dari jarak antar-baris kaki di bawah — bukan dari
     ukuran yang bisa disentuh jempol. */
  .site-footer .f-links { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .75rem; }
  .site-footer .f-links a {
    min-block-size: 44px; padding-block: 0; display: inline-flex; align-items: center;
    inline-size: auto; font-size: .86rem; color: var(--ink-2);
  }

  .site-footer .f-bottom > span { grid-column: 1 / -1; order: 5; font-size: .72rem; letter-spacing: .06em; color: var(--ink-4); }
  /* Di 320px nama merek dan tiga tombol bahasa tidak muat sebaris:
     bahasa turun ke baris sendiri, rata kiri. */
  @media (max-width: 360px) {
    .site-footer .footer-grid { grid-template-columns: minmax(0, 1fr); }
    .site-footer .lang-switch { grid-column: 1; justify-self: start; margin-inline-start: -.7rem; margin-block-start: -.5rem; }
  }
  @media (prefers-reduced-motion: reduce) {
    .svc-btn, .svc-ikon, .svc-btn::after, .tabbar .tab { transition: none; }
    .layar-hp > .dalam-kepala { transition: none; }
    .layar-hp > .dalam-kaki { animation: none; }
  }
}

@media (max-width: 380px) {
  .brand-name { font-size: .92rem; }
}

/* =====================================================================
   TIRAI HALAMAN PRODUK — STANDAR bagian 28

   /p/<id> menyajikan beranda dengan kepala milik produk, lalu skrip
   menggambar layar produknya. Tirai inilah yang menutupi beranda selama
   jeda itu — dan sejak bagian 28 ia BERISI halaman produknya, bukan
   bidang kosong. Yang dibaca mesin pencari dan pengunjung tanpa
   JavaScript ada di sini, jadi ia harus terbaca sebagai halaman yang
   utuh, bukan sebagai penambal.
   ===================================================================== */
#zein-tirai {
  position: fixed; inset: 0; z-index: 200;
  background: var(--paper);
  overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
}
.tirai-isi {
  max-inline-size: 54rem; margin-inline: auto;
  padding: clamp(1.1rem, 4vw, 2.5rem) var(--pad)
           calc(clamp(2rem, 6vw, 3.5rem) + env(safe-area-inset-bottom, 0px));
}
.tirai-remah {
  display: flex; flex-wrap: wrap; align-items: center; gap: .4rem;
  font-size: .8rem; color: var(--ink-3); margin-block-end: 1rem;
}
.tirai-remah a { color: var(--ink-3); text-decoration: none; }
.tirai-remah a:hover { color: var(--accent-2); text-decoration: underline; }
.tirai-remah [aria-current] { color: var(--ink-2); font-weight: 500; }

/* Ponsel: foto dulu, keterangan di bawahnya — sama dengan layar produk
   yang menggantikannya, supaya pergantiannya tidak terasa melompat.
   Layar lebar: dua kolom. */
.tirai-atas { display: grid; gap: clamp(1rem, 3vw, 1.75rem); }
@media (min-width: 720px) { .tirai-atas { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.tirai-foto {
  inline-size: 100%; block-size: auto; aspect-ratio: 16 / 10;
  object-fit: cover; border-radius: var(--r-xl); background: var(--ground);
}
.tirai-jenis {
  font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 .5rem;
}
.tirai-nama {
  font-family: var(--display); font-weight: 700; letter-spacing: -.022em;
  font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.3rem); line-height: 1.15;
  color: var(--ink); margin: 0;
}
.tirai-harga { margin: .85rem 0 0; color: var(--ink-2); font-size: 1rem; }
.tirai-harga b { color: var(--ink); font-size: 1.2rem; font-weight: 700; }
.tirai-pesan {
  display: inline-flex; align-items: center; justify-content: center;
  margin-block-start: 1.1rem; padding: .85rem 1.4rem; border-radius: var(--r-sm);
  background: var(--wa); color: #fff; font-weight: 600; font-size: .9375rem;
  text-decoration: none; box-shadow: var(--sh-btn);
}
.tirai-pesan:hover { background: #0F7A40; color: #fff; text-decoration: none; }
.tirai-prosa {
  margin-block-start: clamp(1.4rem, 4vw, 2rem); color: var(--ink-2);
  font-size: 1rem; line-height: 1.7; max-inline-size: 62ch;
}
.tirai-sorotan { margin-block-start: 1rem; padding-inline-start: 1.1rem; color: var(--ink-2); line-height: 1.7; }
.tirai-sorotan li { margin-block-end: .3rem; }
.tirai-judul2 {
  font-family: var(--display); font-weight: 700; letter-spacing: -.018em;
  font-size: 1.15rem; color: var(--ink); margin: clamp(1.6rem, 4vw, 2.25rem) 0 .75rem;
}
.tirai-paket { list-style: none; margin: 0; padding: 0; border-block-start: 1px solid var(--hair); }
.tirai-paket li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding-block: .75rem; border-block-end: 1px solid var(--hair);
  color: var(--ink-2); font-size: .9375rem;
}
.tirai-paket b { color: var(--ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tirai-lain { margin-block-start: clamp(1.6rem, 4vw, 2.25rem); font-size: .9rem; color: var(--ink-3); }
.tirai-lain a { color: var(--accent-2); }

/* =====================================================================
   KATALOG SEDERHANA — kerangka halaman daftar yang dirakit server

   Dipakai dua halaman: katalog visa (visa-katalog.php) dan jelajah
   katalog tiket (jelajah.php, STANDAR 28). Dulu aturan-aturan ini
   tinggal di dalam <style> halaman visa; begitu halaman kedua
   memakainya, tempatnya di sini — satu komponen, satu tempat, dan
   perbaikan di satu halaman ikut ke halaman lainnya.
   ===================================================================== */
.vs-shell { max-inline-size: 66rem; margin-inline: auto; padding-inline: clamp(1rem, 4vw, 2rem); }
.vs-remah { font-size: .85rem; color: var(--ink-3); margin-block-end: .9rem; }
.vs-remah a { color: var(--ink-3); }
.vs-judul {
  font-family: var(--display); font-size: clamp(1.8rem, 1.1rem + 2.4vw, 2.8rem);
  font-weight: 700; letter-spacing: -.03em; color: var(--ink); line-height: 1.08; margin: 0;
}
.vs-ringkas { color: var(--ink-2); font-size: 1.05rem; margin-block-start: .9rem; max-inline-size: 52ch; }

.vs-kartu-grid { display: grid; gap: 1rem; padding-block: 1.5rem clamp(3rem, 8vw, 5rem); }
@media (min-width: 640px) { .vs-kartu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 980px) { .vs-kartu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vs-kartu {
  display: flex; flex-direction: column; background: var(--paper);
  border: 1px solid var(--hair-solid); border-radius: 14px; overflow: hidden;
  text-decoration: none; transition: transform 160ms ease, box-shadow 160ms ease;
}
.vs-kartu:hover { transform: translateY(-2px); box-shadow: 0 10px 30px -18px rgba(13,31,49,.4); text-decoration: none; }
.vs-kartu img { inline-size: 100%; aspect-ratio: 16/10; object-fit: cover; background: var(--ground); }
.vs-kartu .kosong-gbr {
  aspect-ratio: 16/10; background: linear-gradient(140deg, #132A42, #0B1D33);
  display: grid; place-items: center; color: rgba(255,255,255,.5);
  font-family: var(--mono); font-size: .75rem; letter-spacing: .14em;
}
.vs-kartu .isi { padding: 1.1rem 1.2rem; display: flex; flex-direction: column; gap: .4rem; flex: 1; }
.vs-kartu .neg {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent-2);
}
.vs-kartu h3 { font-size: 1.05rem; color: var(--ink); margin: 0; line-height: 1.3; }
.vs-kartu p { font-size: .88rem; color: var(--ink-3); margin: 0; }
.vs-kartu .kaki { margin-block-start: auto; padding-block-start: .7rem; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.vs-kartu .hrg { font-family: var(--mono); font-size: 1.02rem; font-weight: 600; color: var(--ink); }
.vs-kartu .lama { font-size: .8rem; color: var(--ink-3); }

/* =====================================================================
   BERBAGI — tambahan STANDAR bagian 31 (9 Sep 2026)
   Tiga hal: tombol "Aplikasi lain" (lembar sistem jadi pilihan DI DALAM
   lembar kita, bukan penggantinya), tombol "Salin pesan" di bawah "Salin
   tautan", dan keduanya memakai tanda tersalin yang sama.
   ===================================================================== */
.bagi-btn.bagi-sys {
  border: 0;
  font: inherit;
  cursor: pointer;
  background: none;
}
.bagi-btn.bagi-sys .bagi-ikon {
  letter-spacing: .08em;
  font-weight: 700;
}

/* Baris kedua: hanya tombol, tanpa kolom tautan — kolomnya sudah ada di
   baris pertama dan tidak perlu diulang. */
.bagi-salin.bagi-salin-pesan {
  margin-block-start: .5rem;
  justify-content: stretch;
}
.bagi-salin-tbl-2 {
  inline-size: 100%;
  background: var(--ground);
  color: var(--ink-1);
  border: 1px solid var(--ink-5, rgba(11,27,46,.14));
}
.bagi-salin-tbl-2:hover { background: var(--ground-2); }
.bagi-salin-tbl.is-tersalin { pointer-events: none; }


/* ---------------------------------------------------------------------
   KODE QR di dalam lembar berbagi — STANDAR bagian 31.2 butir 7.

   Warnanya sengaja TIDAK ikut tema. Alasnya selalu putih dan tintanya
   selalu gelap, di terang maupun gelap: kamera ponsel murah di bawah
   lampu neon konter membaca kontras, bukan selera. Di tema gelap, alas
   putih itu justru menjadi bingkai yang jelas.
   ------------------------------------------------------------------- */
.bagi-qr { margin-block-start: .5rem; }
.bagi-qr-tbl {
  inline-size: 100%;
  background: none;
  color: var(--ink-2);
  border: 1px dashed var(--ink-5, rgba(11,27,46,.22));
  font: inherit;
  font-size: .9rem;
  padding: .7rem 1rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.bagi-qr-tbl:hover { background: var(--ground); color: var(--ink); }
.bagi-qr-tbl[disabled] { cursor: progress; opacity: .7; }

/* [hidden] harus menang atas display:flex — kalau tidak, kotaknya
   terlanjur terbuka sebelum ada yang memintanya. */
.bagi-qr-kotak[hidden] { display: none !important; }
.bagi-qr-kotak {
  margin-block-start: .7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  padding: 1rem;
  border-radius: 14px;
  background: #fff;
  border: 1px solid var(--ink-5, rgba(11,27,46,.14));
  animation: bagi-qr-masuk .22s ease both;
}
.bagi-qr-kotak svg {
  inline-size: min(230px, 62vw);
  block-size: auto;
  display: block;
}
.bagi-qr-ket, .bagi-qr-tunggu, .bagi-qr-gagal {
  margin: 0;
  font-size: .8rem;
  text-align: center;
  color: #475467;
}
.bagi-qr-gagal { color: #b42318; }
.bagi-qr-tunggu { padding-block: 2.4rem; }

@keyframes bagi-qr-masuk {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .bagi-qr-kotak { animation: none; }
  .bagi-qr-tbl { transition: none; }
}

/* ---------------------------------------------------------------------
   LEMBAR BERBAGI, URUTAN BARU (9 Sep 2026)

   Disamakan dengan lembar yang sudah matang di Pustaka Santri Aceh —
   dibaca dari sumbernya (apps/web/src/components/ShareSheet.jsx), bukan
   ditiru dari tangkapan layar. Yang berubah bukan warnanya, tapi
   URUTANNYA, dan urutan itu yang menentukan orang mengerti atau tidak:

     judul + nama produk  →  kartu pratinjau  →  tautan apa adanya  →
     dua tombol salin bersebelahan  →  "atau kirim lewat"  →  saluran  →
     kode QR  →  aplikasi lain di perangkat ini

   Dulu saluran berdiri paling atas dan kotak tautan tersembunyi di
   bawahnya. Yang paling sering dipakai justru menyalin — tim penjualan
   Zein menempelkan tautan ke percakapan yang sudah terbuka, bukan
   membuka WhatsApp baru dari situs.
   ------------------------------------------------------------------- */
.bagi-kepala-teks { min-inline-size: 0; }
.bagi-subjudul {
  margin: .15rem 0 0;
  font-size: .8rem;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Dua tombol salin sama besar, bersebelahan. */
.bagi-salin-dua {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
  margin-block-start: .5rem;
}
.bagi-salin-dua .bagi-salin-tbl {
  inline-size: 100%;
  background: var(--ground);
  color: var(--ink-1);
  border: 1px solid var(--ink-5, rgba(11,27,46,.14));
}
.bagi-salin-dua .bagi-salin-tbl:hover { background: var(--ground-2); }

/* Kotak tautan kini berdiri sendiri, tanpa tombol di sampingnya. */
.bagi-salin { grid-template-columns: minmax(0, 1fr); }

.bagi-pisah {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-block: 1rem .8rem;
}
.bagi-pisah-garis { block-size: 1px; flex: 1; background: var(--hair-solid, rgba(11,27,46,.12)); }
.bagi-pisah-teks {
  font-family: var(--mono);
  font-size: .64rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bagi-saluran { margin-block: 0 .8rem; }

/* "Aplikasi lain" duduk sendiri di paling bawah, selebar lembar. */
.btn.bagi-sys {
  inline-size: 100%;
  margin-block-start: .5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  background: var(--ground);
  color: var(--ink-1);
  border: 1px solid var(--ink-5, rgba(11,27,46,.14));
}
.btn.bagi-sys:hover { background: var(--ground-2); }
.btn.bagi-sys svg { inline-size: 18px; block-size: 18px; }