/* ArWayGo — gaya bersama seluruh halaman.
 *
 * Ditulis sendiri, bukan lewat Tailwind CDN seperti sebelumnya. Alasannya
 * dua, dan keduanya terasa oleh pengunjung:
 *
 * 1. CDN itu menyusun seluruh gaya DI DALAM peramban setiap kali halaman
 *    dibuka. Di jaringan desa, halamannya sempat tampil tanpa gaya dulu —
 *    tulisan bertumpuk — baru kemudian rapi.
 * 2. Ia memang tidak diperuntukkan bagi situs sungguhan; peramban pun
 *    mencatat peringatan itu di konsolnya.
 */

:root {
  --biru: #0c92ff;
  --biru-tua: #0a6fd0;
  --biru-gelap: #07336b;
  --jingga: #ffac0c;
  --gelap: #0f172a;

  /* Latar kaki halaman.
   *
   * **Harus sama persis dengan latar yang menempel di dalam
   * `logo-footer.svg`.** Berkas logo itu membawa `<rect>` latar #080808
   * sendiri — ekspor dari peranti desainnya begitu — jadi warna yang
   * berbeda sedikit pun akan menampakkan kotak gelap di sekeliling
   * logonya. */
  --kaki-latar: #080808;

  /* Warna huruf di kaki halaman: putih gading.
   *
   * **Bukan warna karangan.** `#fffffb` adalah warna yang dipakai huruf
   * "ArWayGo" di dalam `logo-footer.svg` sendiri — dibaca dari berkasnya,
   * 19 kemunculan. Memakai warna yang sama membuat tulisan di bawah logo
   * terbaca sebagai satu kesatuan dengan logonya, bukan sebagai dua
   * putih yang hampir sama tetapi tidak sama.
   *
   * Yang lembut adalah gading yang sama, diredupkan untuk keterangan —
   * alamat dan baris hak cipta. Keduanya masih jauh di atas syarat
   * keterbacaan WCAG AA di atas latar #080808. */
  --kaki-teks: #fffffb;
  --kaki-teks-lembut: #d5cfc0;
  --teks: #1f2937;
  --teks-lembut: #5b6472;
  --garis: #e6e9ef;
  --latar: #f7f9fc;
  --putih: #ffffff;

  --lebar: 1140px;
  --radius: 18px;
  --bayang: 0 10px 30px rgba(15, 23, 42, 0.08);
  --bayang-kuat: 0 18px 44px rgba(15, 23, 42, 0.14);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI',
    Roboto, sans-serif;
  color: var(--teks);
  background: var(--latar);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

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

h1, h2, h3 { line-height: 1.2; margin: 0 0 .6rem; }
h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -.02em; }
h2 { font-size: clamp(1.5rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.01em; }

/* Judul halaman yang ukurannya mengikuti h2.
 *
 * Halaman Tanya Jawab, Hubungi Kami, dan Legalitas dulu memakai <h2>
 * sebagai judul teratas dan sama sekali tidak punya <h1>. Mesin pencari
 * dan pembaca layar mencari satu <h1> per halaman untuk mengetahui
 * halaman itu tentang apa; tanpa itu, judulnya diambil dari tempat lain
 * atau tidak diambil sama sekali. Kelasnya ada supaya pembetulan itu
 * tidak sekaligus mengubah besar hurufnya. */
h1.judul-bagian { font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: -.01em; }
h3 { font-size: 1.1rem; font-weight: 700; }
p { margin: 0 0 1rem; }

.wadah { width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 0 20px; }

.lewati {
  position: absolute; left: -9999px; top: 0;
  background: var(--putih); color: var(--teks);
  padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 100;
}
.lewati:focus { left: 0; }

/* ——— Bilah atas ——— */
.bilah {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--garis);
}
.bilah-isi { display: flex; align-items: center; justify-content: space-between; height: 68px; }

.merek { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.35rem; letter-spacing: -.02em; }
/* Logo bilah atas: tingginya yang dipatok, lebarnya mengikuti.
   Dipaksa 34x34 seperti dulu, wordmark yang memang lebar ini
   akan gepeng. */
.merek img { height: 52px; width: auto; }

/* ——— Sorotan sentuh dan penanda fokus ———
 *
 * Kotak biru berbintik yang muncul saat sesuatu ditekan di Android itu
 * bawaan peramban, dan ia muncul di SETIAP elemen yang bisa ditekan —
 * termasuk yang bentuknya bulat, sehingga kotaknya tampak seperti
 * kesalahan gambar. Dilepas.
 *
 * Yang TIDAK dilepas adalah penanda fokus. Orang yang menelusuri situs
 * dengan papan ketik harus tetap tahu di mana ia berada; yang diganti
 * hanya bentuknya — dari garis bertitik bawaan menjadi cincin biru yang
 * rapi, dan menjadi putih di atas bidang biru atau gelap supaya tetap
 * terlihat. */
* { -webkit-tap-highlight-color: transparent; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--biru);
  outline-offset: 3px;
  border-radius: 6px;
}
.kepala :focus-visible,
.kaki :focus-visible { outline-color: #fff; }

::selection { background: rgba(12, 146, 255, .22); }

.menu { display: flex; align-items: center; gap: 26px; }
.menu a { font-weight: 600; color: var(--teks-lembut); padding: 6px 0; border-bottom: 2px solid transparent; }
.menu a:hover, .menu a:focus-visible { color: var(--biru); }
.menu a[aria-current='page'] { color: var(--biru); border-bottom-color: var(--biru); }

.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 700; font-size: .95rem; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.tombol:hover { transform: translateY(-2px); }
.tombol-utama { background: var(--biru); color: #fff; box-shadow: 0 8px 20px rgba(12, 146, 255, .32); }
.tombol-utama:hover { background: var(--biru-tua); }
.tombol-putih { background: #fff; color: var(--biru); box-shadow: 0 8px 20px rgba(0, 0, 0, .14); }
.tombol-garis { border-color: rgba(255, 255, 255, .55); color: #fff; }
.tombol-garis:hover { background: rgba(255, 255, 255, .12); }

/* Tombol bergaris untuk latar TERANG. Yang di atas bergaris putih dan
 * hanya terlihat di atas latar gelap; dipakai di latar terang ia lenyap. */
.tombol-tepi { border-color: var(--garis); color: var(--teks); background: #fff; }
.tombol-tepi:hover { border-color: var(--biru); color: var(--biru); }

/* Tombol menu layar kecil.
 *
 * Tiga garis sebagai elemen tersendiri, bukan satu gambar SVG — hanya
 * dengan begitu ketiganya bisa bergerak masing-masing. Garis tengahnya
 * sengaja lebih pendek: itu yang membuat bentuknya tidak seperti tombol
 * bawaan mana pun, dan saat disentuh ia memanjang menyusul kedua
 * lainnya.
 *
 * Ukurannya 44x44 — batas terkecil sasaran sentuh yang masih nyaman
 * ditekan jempol, dan itu syarat aksesibilitas, bukan selera. */
.menu-hp {
  display: none; background: none; border: 0; padding: 0;
  cursor: pointer; color: var(--teks);
  position: relative; width: 44px; height: 44px;
}
.menu-hp .garis {
  position: absolute; left: 10px; width: 24px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform .34s cubic-bezier(.22, .61, .36, 1),
              opacity .18s ease,
              width .34s cubic-bezier(.22, .61, .36, 1);
}
.menu-hp .garis:nth-child(1) { top: 15px; }
.menu-hp .garis:nth-child(2) { top: 21px; width: 17px; }
.menu-hp .garis:nth-child(3) { top: 27px; }

.menu-hp:hover .garis:nth-child(2) { width: 24px; }

/* Terbuka: ketiganya menjadi tanda silang. Garis tengah tidak sekadar
 * dihilangkan melainkan bergeser keluar sambil memudar, sehingga
 * perpindahannya terbaca sebagai satu gerak. */
.menu-hp[aria-expanded='true'] .garis:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.menu-hp[aria-expanded='true'] .garis:nth-child(2) {
  opacity: 0; transform: translateX(12px); width: 24px;
}
.menu-hp[aria-expanded='true'] .garis:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* ——— Kepala halaman ——— */
.kepala {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(160deg, var(--biru) 0%, var(--biru-tua) 55%, var(--biru-gelap) 100%);
  padding: 64px 0 120px;
}
.kepala::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 90px;
  /* `--putih`, BUKAN `--latar`.
   *
   * Segitiga ini menyambung ke bagian di bawahnya, dan pada ketiga
   * halaman yang punya kepala biru — Beranda, Tentang Kami, Gabung
   * Mitra — bagian itu selalu `.bagian-putih` (#ffffff). Dengan
   * `--latar` (#f7f9fc) segitiganya seputih tulang sementara bidang di
   * sebelahnya putih murni, dan batasnya terlihat sebagai sisa yang
   * tidak sewarna. */
  background: var(--putih);

  /* Arah miringnya datang dari halamannya, bukan dipatok di sini.
   *
   * Tiap halaman berkepala biru memakai arah yang berbeda, dan itu yang
   * membuat perpindahan antar halaman terlihat: bentuk birunya berubah,
   * sementara bilah atas dan kaki halaman tidak bergerak sama sekali —
   * seolah hanya tulisannya yang berganti. */
  clip-path: var(--miring, polygon(0 100%, 100% 0, 100% 100%));
}

/* Tiga arah, dan masing-masing dipakai satu halaman.
 *
 * `miring-kanan` dan `miring-kiri` adalah cermin satu sama lain, jadi
 * perpindahan di antara keduanya adalah gerak yang paling besar dan
 * paling terasa. `miring-landai` arahnya sama dengan kanan tetapi jauh
 * lebih rebah — perubahan yang lebih tenang, untuk halaman ketiga. */
.miring-kanan { --miring: polygon(0 100%, 100% 0, 100% 100%); }
.miring-kiri { --miring: polygon(0 0, 0 100%, 100% 100%); }
.miring-landai { --miring: polygon(0 100%, 100% 35%, 100% 100%); }
.kepala .wadah { position: relative; z-index: 2; }

.kepala-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 48px; align-items: center; }

.pita {
  display: inline-block; padding: 7px 16px; border-radius: 999px;
  background: rgba(255, 255, 255, .16); border: 1px solid rgba(255, 255, 255, .3);
  font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  margin-bottom: 18px;
}
.kepala p.besar { font-size: 1.08rem; color: rgba(255, 255, 255, .92); max-width: 46ch; }
.kepala-tombol { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* Logo menyatu dengan latarnya.
 *
 * Sebelum ini logonya dibungkus kartu kaca berbingkai — dan berkas
 * gambarnya sendiri TIDAK ADA, sehingga yang tampil adalah ikon gambar
 * rusak di dalam kotak. Dua-duanya yang membuatnya terlihat "kotak".
 *
 * Sekarang memakai lapisan depan logo yang latarnya tembus pandang,
 * ditaruh langsung di atas biru dengan cahaya lembut di belakangnya. */
.logo-kepala { position: relative; display: flex; justify-content: center; align-items: center; }
.logo-kepala::before {
  content: ''; position: absolute; width: 78%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, 0) 68%);
  filter: blur(6px);
}
.logo-kepala img {
  /* `height: auto` WAJIB. Atribut height="300" di HTML masih berlaku
     sebagai petunjuk tampilan selama CSS tidak mengatur tingginya, jadi
     begitu lebarnya menyusut di layar sempit, gambarnya jadi 201x300 --
     bukan persegi lagi, dan latar putih berkasnya muncul sebagai pita di
     atas dan bawah lencana. */
  position: relative; width: min(300px, 74%); height: auto;
  filter: drop-shadow(0 18px 34px rgba(3, 32, 70, .45));
  animation: apung 6s ease-in-out infinite;
  /* Sudutnya dibulatkan jadi lencana, bukan dibiarkan persegi rata.
     Marka di dalam logo ini dirancang menyatu dengan latar birunya --
     satu bentuk di bawah skuter justru MENONJOL kalau latarnya dibuang.
     Jadi latarnya dipertahankan, dan yang diubah bentuknya: melengkung
     seperti ikon aplikasi, bukan kotak yang seolah tertempel. */
  border-radius: 24%;
}
@keyframes apung {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* ——— Bagian umum ——— */
.bagian { padding: 72px 0; }
.bagian-putih { background: var(--putih); }
.kepala-bagian { text-align: center; max-width: 60ch; margin: 0 auto 44px; }
.kepala-bagian p { color: var(--teks-lembut); }

.kisi { display: grid; gap: 20px; }
.kisi-3 { grid-template-columns: repeat(3, 1fr); }
.kisi-2 { grid-template-columns: repeat(2, 1fr); }

.kartu {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 24px;
  box-shadow: var(--bayang);
  transition: transform .2s ease, box-shadow .2s ease;
}
.kartu:hover { transform: translateY(-4px); box-shadow: var(--bayang-kuat); }
.kartu h3 { margin-bottom: .35rem; }
.kartu p { color: var(--teks-lembut); font-size: .95rem; margin: 0; }

.ikon {
  width: 52px; height: 52px; border-radius: 15px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px; background: rgba(12, 146, 255, .12);
}

.label-segera {
  display: inline-block; margin-left: 8px; padding: 3px 10px; border-radius: 999px;
  background: rgba(255, 172, 12, .16); color: #9a6200;
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  vertical-align: middle;
}
.kartu-segera { opacity: .72; }

.daftar-periksa { list-style: none; padding: 0; margin: 0; }
.daftar-periksa li {
  position: relative; padding-left: 30px; margin-bottom: 12px;
  color: var(--teks-lembut); font-size: .95rem;
}
.daftar-periksa li::before {
  content: '✓'; position: absolute; left: 0; top: 0;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(22, 163, 74, .14); color: #16a34a;
  font-size: .72rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.catatan {
  border-left: 4px solid var(--jingga);
  background: rgba(255, 172, 12, .09);
  padding: 16px 18px; border-radius: 0 12px 12px 0;
  font-size: .93rem; color: #7a5200;
}
.catatan strong { color: #5f4000; }

/* ——— Tanya jawab ——— */
details.tanya {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: 14px; padding: 2px 20px; margin-bottom: 12px;
}
details.tanya summary {
  cursor: pointer; font-weight: 700; padding: 18px 0; list-style: none;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.tanya summary::-webkit-details-marker { display: none; }
details.tanya summary::after { content: '+'; font-size: 1.4rem; color: var(--biru); line-height: 1; }
details.tanya[open] summary::after { content: '−'; }
details.tanya p { color: var(--teks-lembut); font-size: .95rem; padding-bottom: 4px; }

/* ——— Dokumen hukum ——— */
.dokumen {
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 30px; box-shadow: var(--bayang);
}
/* Naskah hukum.
 *
 * Dulu seluruh naskah digambar di dalam satu <pre> -- tag teks monospace.
 * Naskah berpasal 30.000 huruf di dalamnya terlihat seperti keluaran
 * terminal, bukan dokumen, dan tanpa satu pun tanda di mana satu pasal
 * berakhir. Sekarang susunannya dikenali assets/js/legal.js dengan aturan
 * yang SAMA seperti SusunanLegal di aplikasi; yang di bawah ini hanya
 * memberinya tingkatan.
 *
 * Satu pemunculan lembut untuk seluruh naskah, bukan per blok: naskah ini
 * punya ratusan blok, dan ratusan animasi sekaligus justru tersendat.
 * Hanya opacity dan transform yang dianimasikan -- keduanya ditangani
 * compositor dan tidak memaksa peramban menghitung ulang tata letak.
 */
.dokumen .naskah {
  opacity: 0; transform: translateY(6px);
  transition: opacity .32s ease-out, transform .32s ease-out;
}
.dokumen .naskah.tampil { opacity: 1; transform: none; }

.naskah-judul {
  font-size: 1.22rem; font-weight: 700; line-height: 1.3;
  letter-spacing: -.01em; color: var(--teks); margin: 0 0 4px;
}
.naskah-bagian {
  font-size: .76rem; font-weight: 700; letter-spacing: .07em;
  color: var(--biru); margin: 34px 0 2px; display: flex;
  align-items: center; gap: 9px;
}
/* Garis penanda digambar CSS, bukan gambar: tidak ada berkas tambahan
 * yang harus diunduh pengunjung. */
.naskah-bagian::before {
  content: ''; flex: 0 0 22px; height: 3px; border-radius: 2px;
  background: var(--biru);
}
.naskah-pasal {
  font-size: 1rem; font-weight: 700; line-height: 1.35;
  color: var(--teks); margin: 26px 0 2px;
}
.naskah-subpasal {
  font-size: .93rem; font-weight: 600; line-height: 1.4;
  color: var(--teks); margin: 20px 0 1px;
}
.naskah-paragraf {
  font-size: .95rem; line-height: 1.78; color: var(--teks);
  margin: 13px 0 0;
}
.naskah-butir {
  font-size: .93rem; line-height: 1.72; color: var(--teks-lembut);
  margin: 9px 0 0; padding-left: 14px;
}
.dokumen .waktu { color: var(--teks-lembut); font-size: .85rem; margin-bottom: 20px; }
.memuat { color: var(--teks-lembut); text-align: center; padding: 40px 0; }

.tab-dokumen { display: flex; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.tab-dokumen button {
  padding: 10px 20px; border-radius: 999px; border: 1px solid var(--garis);
  background: var(--putih); font-weight: 700; font-size: .92rem;
  color: var(--teks-lembut); cursor: pointer; font-family: inherit;
}
.tab-dokumen button[aria-selected='true'] {
  background: var(--biru); border-color: var(--biru); color: #fff;
}

/* ——— Jalur kontak ——— */
.jalur {
  display: flex; align-items: flex-start; gap: 16px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); padding: 18px 20px; margin-bottom: 14px;
  box-shadow: var(--bayang); transition: transform .2s, box-shadow .2s;
}
.jalur:hover, .jalur:focus-visible {
  transform: translateY(-3px); box-shadow: var(--bayang-kuat);
}
.jalur-ikon {
  font-size: 1.5rem; line-height: 1; flex: none;
  width: 46px; height: 46px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 146, 255, .1);
}
.jalur-isi { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.jalur-judul { font-size: .82rem; color: var(--teks-lembut); }
/* Nomor dan alamat surel panjang tidak boleh melebar keluar kartunya
   di layar sempit. */
.jalur-isi strong { font-size: 1.12rem; word-break: break-word; }
.jalur-ket { font-size: .85rem; color: var(--teks-lembut); line-height: 1.5; }

.alamat-surat { margin-top: 26px; }
.alamat-surat p { color: var(--teks-lembut); margin: 0; }

/* ——— Kaki ——— */
.kaki { background: var(--kaki-latar); color: var(--kaki-teks-lembut); padding: 60px 0 26px; }
.kaki a { color: var(--kaki-teks-lembut); }
.kaki a:hover, .kaki a:focus-visible { color: var(--kaki-teks); }
.kaki-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr; gap: 40px; }
.kaki h4 { color: var(--kaki-teks); font-size: .95rem; margin: 0 0 14px; font-weight: 700; }
.kaki ul { list-style: none; padding: 0; margin: 0; }
.kaki li { margin-bottom: 9px; font-size: .92rem; }
.kaki p { color: var(--kaki-teks-lembut); font-size: .9rem; }

/* Logo kaki: tingginya yang dipatok, lebarnya mengikuti.
 *
 * Ditaruh sebagai gambar utuh, bukan teks bermerek seperti dulu, supaya
 * yang tampil di kaki halaman sama dengan logo yang berlaku — bukan
 * tiruan yang dibuat dari dua potong teks berwarna. */
.kaki-logo { display: block; height: 58px; width: auto; max-width: 100%; }

/* Nama badan usaha. Tegas dan tebal, tepat di bawah logonya. */
.kaki-pt {
  color: var(--kaki-teks); font-weight: 800; font-size: 1.05rem;
  letter-spacing: -.01em; margin: 18px 0 8px;
}

/* Alamat kantor. `<address>` dipakai apa adanya, dan miringnya dilepas:
 * peramban memiringkan elemen ini secara bawaan, dan alamat yang miring
 * lebih sulit dibaca pada ukuran kecil. */
.kaki-alamat {
  font-style: normal; color: var(--kaki-teks-lembut);
  font-size: .9rem; line-height: 1.75; margin: 0;
}

.kaki-bawah {
  border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 40px; padding-top: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px 24px; flex-wrap: wrap;
  font-size: .85rem; color: var(--kaki-teks-lembut);
}
.kaki-bawah p { margin: 0; font-size: inherit; }
.kaki-slogan { color: var(--kaki-teks); font-weight: 600; }

/* ——— Peralihan antar halaman ———
 *
 * Murni CSS. Tidak ada satu baris JavaScript yang ikut menentukan
 * perpindahan halaman, dan itu disengaja: trik "pudarkan dulu, baru
 * pindah" menahan navigasi sampai animasinya habis — tombol kembali
 * menjadi aneh, dan kalau skripnya gagal dimuat, tautannya berhenti
 * bekerja sama sekali.
 *
 * ## Kenapa susunan di bawah sebegini rinci
 *
 * Bawaan `@view-transition` adalah **silang penuh**: halaman lama
 * memudar KELUAR sementara halaman baru memudar MASUK. Di tengahnya ada
 * saat keduanya setengah tembus pandang, sehingga latar di belakang
 * tersembul dan terang layar turun sekejap. Pada bidang warna lebar —
 * dan kepala biru ini lebar — dip itu terbaca sebagai KEDIPAN. Di layar
 * besar sangat terlihat.
 *
 * Ditambah lagi, sebelumnya `main` punya animasi masuknya sendiri, jadi
 * di peramban yang mendukung peralihan isi halaman memudar DUA KALI.
 *
 * Susunan di bawah membuang keduanya:
 *
 * 1. Halaman lama **tidak dipudarkan sama sekali**. Ia tetap utuh sampai
 *    akhir, dan halaman baru muncul di atasnya. Tanpa dua lapis yang
 *    sama-sama setengah tembus, tidak ada dip — tidak ada kedipan.
 * 2. Bilah atas dan kaki halaman **tidak bergerak dan tidak memudar**.
 *    Keduanya memang benda yang sama di setiap halaman.
 * 3. Yang bergerak hanya kepala biru, dan arah miringnya berbeda di tiap
 *    halaman. Hasilnya: bentuk birunya berpindah sementara rangka
 *    halaman tinggal di tempatnya — seolah hanya tulisannya yang
 *    berganti.
 *
 * Peramban yang belum mendukung peralihan lintas-dokumen (Firefox, per
 * Okt 2026) berpindah seperti biasa, dan isi halaman tetap punya animasi
 * masuknya sendiri lewat `@supports` di bawah. */
@view-transition { navigation: auto; }

.bilah { view-transition-name: bilah-atas; }
.kaki { view-transition-name: kaki-halaman; }
.kepala { view-transition-name: kepala-biru; }

/* Penumpukan lapis lama dan baru dikembalikan ke biasa.
 *
 * Bawaannya `plus-lighter`, dan untuk silang pudar bawaan peramban itu
 * memang tepat: lama 1→0 dan baru 0→1 selalu berjumlah persis satu,
 * jadi terang layar tidak bergeser sedikit pun.
 *
 * Di bawah ini beberapa pasangan sengaja TIDAK saling melengkapi —
 * halaman lama dibiarkan utuh sementara yang baru muncul di atasnya.
 * Dengan `plus-lighter` jumlahnya melampaui satu dan gambarnya MEMUTIH
 * sekejap: kedipan yang justru lebih kasar daripada yang hendak
 * dibuang. Jadi penumpukannya dilepas lebih dulu, dan sesudah itu
 * susunan di bawah berlaku apa adanya. */
::view-transition-image-pair(*) { isolation: auto; }
::view-transition-old(*),
::view-transition-new(*) { mix-blend-mode: normal; }

@keyframes masuk-halaman {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes muncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes pudar { from { opacity: 1; } to { opacity: 0; } }

/* Lapis lama bertahan utuh sampai yang baru hampir penuh, baru dilepas.
 *
 * Dua kesalahan yang dihindari sekaligus. Dipudarkan sejak awal, ada
 * saat keduanya setengah tembus pandang dan warna di belakangnya
 * tersembul — itu dip yang terbaca sebagai kedipan. Dipotong mendadak
 * di akhir, kedipannya berpindah ke ujung. Dengan bertahan sampai 72%
 * lalu lepas, yang di atasnya sudah menutup hampir penuh ketika ia
 * pergi, sehingga perginya tidak terlihat sama sekali. */
@keyframes tinggal-lalu-lepas {
  0%, 72% { opacity: 1; }
  100% { opacity: 0; }
}

::view-transition-old(root) {
  animation: tinggal-lalu-lepas .38s linear both;
}
::view-transition-new(root) {
  animation: masuk-halaman .38s cubic-bezier(.22, .61, .36, 1) both;
}

/* Rangka halaman benar-benar diam. Lapis lamanya disembunyikan dan
 * lapis baru menggantikannya di tempat yang sama persis — bukan
 * keduanya dibiarkan tampak, karena bilah atas punya latar yang tidak
 * sepenuhnya pekat dan dua lapis yang bertumpuk akan menggelapkannya. */
::view-transition-old(bilah-atas),
::view-transition-old(kaki-halaman) { animation: none; opacity: 0; }
::view-transition-new(bilah-atas),
::view-transition-new(kaki-halaman) { animation: none; }

/* Kepala biru: kotaknya berubah bentuk lebih lambat daripada isi
 * halaman, supaya geraknya terbaca sebagai satu benda yang berpindah,
 * bukan dua gambar yang bertukar.
 *
 * Birunya sama di ketiga halaman, jadi yang benar-benar terlihat
 * berubah hanya arah miringnya: bidang yang baru tertutup naik
 * perlahan, bidang yang ditinggalkan surut. Itulah yang diminta —
 * seolah hanya tulisannya yang berganti. */
::view-transition-group(kepala-biru) {
  animation-duration: .56s;
  animation-timing-function: cubic-bezier(.22, .61, .36, 1);
}
::view-transition-old(kepala-biru) {
  animation: tinggal-lalu-lepas .56s linear both;
}
::view-transition-new(kepala-biru) {
  animation: muncul .56s cubic-bezier(.22, .61, .36, 1) both;
}

/* Kalau halaman tujuan TIDAK punya kepala biru — Tanya Jawab, Hubungi
 * Kami, Legalitas — tidak ada pasangannya, dan `tinggal-lalu-lepas` di
 * atas akan membuatnya bertahan utuh lalu hilang tanpa ada apa pun yang
 * menutupinya. Sendirian ia harus dipudarkan sejak awal. */
::view-transition-old(kepala-biru):only-child {
  animation: pudar .3s ease both;
}
::view-transition-new(kepala-biru):only-child {
  animation: muncul .42s ease both;
}

/* Peramban tanpa peralihan lintas-dokumen. Hanya di sini `main`
 * dianimasikan — kalau tidak, isi halaman memudar dua kali. */
@supports not (view-transition-name: none) {
  main { animation: masuk-halaman .34s cubic-bezier(.22, .61, .36, 1) both; }
}

/* ——— Halaman 404 ———
 *
 * Gambarnya dirangkai dari dua hal yang sudah ada: logo yang berlaku, dan
 * sebuah jalan. Tidak ada berkas gambar baru yang perlu diunduh, dan
 * seluruh geraknya CSS — jadi halaman yang muncul justru saat ada
 * kesalahan tidak ikut membawa beban. */
.nol { padding: 72px 0 96px; text-align: center; }
.nol-panggung {
  position: relative; width: min(420px, 90%); margin: 0 auto 30px;
  aspect-ratio: 420 / 220;
}
.nol-panggung svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Badan jalan dan marka tengahnya. Markanya bergerak ke kiri, sehingga
 * jalannya terasa berjalan terus — sementara papan rambunya kosong. */
.nol-aspal { stroke: #1b2433; stroke-width: 26; stroke-linecap: round; }
.nol-marka {
  stroke: #cbd5e1; stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: 16 18; animation: nol-marka 1.6s linear infinite;
}
@keyframes nol-marka { to { stroke-dashoffset: -34; } }

/* Tiang dan papan rambu. Papannya bergoyang sedikit, seperti tertiup. */
.nol-tiang { stroke: #475569; stroke-width: 6; stroke-linecap: round; }
.nol-papan {
  fill: #0c92ff; animation: nol-goyang 3.6s ease-in-out infinite;
  transform-origin: 300px 108px;
}
.nol-papan-teks {
  fill: #fff; font-weight: 800; font-size: 26px; text-anchor: middle;
  animation: nol-goyang 3.6s ease-in-out infinite;
  transform-origin: 300px 108px;
}
@keyframes nol-goyang {
  0%, 100% { transform: rotate(-2.5deg); }
  50% { transform: rotate(2.5deg); }
}

/* Logo yang berlaku, dipakai sebagai tokohnya. Mengapung naik-turun di
 * atas jalan, tidak berputar: logo yang berputar terbaca sebagai
 * penanda memuat, bukan sebagai tokoh. */
.nol-helm {
  position: absolute; left: 12%; bottom: 16%;
  /* Latar birunya diberi di sini, bukan di dalam berkas SVG-nya.
   * Latar yang menempel di dalam berkas membuat garis putih halus
   * menyembul di tepi yang dibulatkan — itu bug yang dilaporkan
   * pemilik, dan sumbernya memang di berkas logonya. */
  background: var(--biru);
  width: 23%; border-radius: 24%;
  box-shadow: 0 14px 30px rgba(3, 32, 70, .45);
  animation: nol-apung 2.8s ease-in-out infinite;
}
@keyframes nol-apung {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

.nol-kode {
  display: inline-block; margin-bottom: 14px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(12, 146, 255, .12); color: var(--biru-tua);
  font-size: .8rem; font-weight: 700; letter-spacing: .08em;
}
.nol p.besar { margin: 0 auto 28px; }
.nol-tombol { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ——— Layar kecil ——— */
@media (max-width: 900px) {
  .kepala { padding: 44px 0 100px; }
  .kepala-grid { grid-template-columns: 1fr; gap: 34px; text-align: center; }
  .kepala p.besar { margin-left: auto; margin-right: auto; }
  .kepala-tombol { justify-content: center; }
  .logo-kepala { order: -1; }
  .logo-kepala img { width: min(220px, 60%); }
  .kisi-3, .kisi-2 { grid-template-columns: repeat(2, 1fr); }
  .kaki-grid { grid-template-columns: 1fr 1fr; }
  .kaki-bawah { justify-content: center; text-align: center; }
  .nol { padding: 48px 0 72px; }

  .menu-hp { display: block; }
  .menu {
    position: absolute; left: 0; right: 0; top: 68px;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--putih); border-bottom: 1px solid var(--garis);
    padding: 8px 20px 18px; box-shadow: var(--bayang);
  }
  .menu[hidden] { display: none; }
  .menu a { padding: 13px 0; border-bottom: 1px solid var(--garis); }
  .menu a[aria-current='page'] { border-bottom-color: var(--garis); }
  .menu .tombol { margin-top: 12px; }
}

@media (max-width: 560px) {
  .bagian { padding: 52px 0; }
  .jalur { padding: 16px; gap: 12px; }
  .jalur-ikon { width: 40px; height: 40px; font-size: 1.3rem; }
  .kisi-3, .kisi-2, .kaki-grid { grid-template-columns: 1fr; }
  .dokumen { padding: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-kepala img { animation: none; }
  .kartu:hover, .tombol:hover { transform: none; }

  /* Peralihan halaman dimatikan dari sumbernya, bukan ditimpa: peramban
   * tidak menyilangkan halaman sama sekali. */
  @view-transition { navigation: none; }
  main { animation: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }

  /* Halaman 404 tetap utuh, hanya tidak bergerak. Orang yang meminta
   * gerak dikurangi biasanya punya sebab — pusing, mual, atau gangguan
   * vestibular — dan halaman kesalahan harus tetap bisa dibaca. */
  .nol-marka, .nol-papan, .nol-papan-teks, .nol-helm { animation: none; }

  /* Tombol menu tetap berubah bentuk — tanpa itu orang tidak tahu
   * menunya terbuka — hanya perubahannya seketika, tanpa gerak. */
  .menu-hp .garis { transition: none; }
  /* Naskahnya langsung tampil utuh, tanpa peralihan apa pun. Orang yang
   * meminta gerak dikurangi biasanya punya sebab -- pusing, mual, atau
   * gangguan vestibular -- dan dokumen hukum harus tetap terbaca. */
  .dokumen .naskah { opacity: 1; transform: none; transition: none; }
}