/* Kedapa, situs prarilis statis. Rencana: ../RENCANA.md.
   Lapis 1 primitif (satu-satunya tempat hex), lapis 2 semantik per tema, lalu komponen dan tata letak.
   Nilai warna, tinta, sudut, dan kurva diambil dari mockups/landing-v3/src/token.css (Brand Kit v1.0). */

@font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('fonts/Inter-Regular.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('fonts/Inter-Medium.woff2') format('woff2'); }
@font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('fonts/Inter-SemiBold.woff2') format('woff2'); }

/* Lapis 1: primitif */
:root {
  --p-navy: #0B1220;
  --p-biru-algo: #2B63D9;
  --p-biru-algo-tua: #2456C2;
  --p-biru-algo-muda: #3B6FE0;
  --p-biru-terang: #7AA5FF;
  --p-slate: #4F5B6B;
  --p-slate-2: #5D697C;
  --p-kabut: #C3CCD8;
  --p-kabut-2: #93A0B4;
  --p-putih: #FFFFFF;
  --p-putih-2: #F4F6FA;
  --p-kertas-1: #F1F4F9;
  --p-kertas-2: #EEF2F8;
  --p-kertas-3: #E4E9F1;
  --p-kertas-4: #DCE3EF;
  --p-kertas-5: #C9D2DF;
  --p-batas-terang: #8792A3;
  --p-navy-1: #0E1627;
  --p-navy-2: #182238;
  --p-navy-3: #1C2740;
  --p-navy-4: #232F48;
  --p-navy-5: #2A3650;
  --p-navy-6: #33405C;
  --p-batas-gelap: #66748C;
  --p-tinta-terang: #1B2A4C;
  --p-tinta-gelap: #2A3C66;
}

/* Lapis 2: semantik tanpa tema */
:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-18: 72px;
  --sp-24: 96px;
  --sp-28: 112px;

  --tepi: var(--sp-4);
  --isi: 1240px;
  --target: 44px;
  --tinggi-tombol: 52px;

  --r-sambung: 6px;
  --r-dalam: 12px;
  --r-isi: 20px;
  --r-lapis: 28px;
  --r-pil: 999px;

  --huruf: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --gerak-cepat: 120ms;
  --gerak: 200ms;
  --gerak-tinta: 240ms;
  --kurva: cubic-bezier(.2, .8, .2, 1);

  --ukuran-judul: clamp(2.25rem, 1.15rem + 3.9vw, 4.25rem);
  --ukuran-bagian: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem);
  --ukuran-kelompok: clamp(1.1875rem, 1.13rem + .25vw, 1.3125rem);
  --ukuran-pembuka: clamp(1.0625rem, .98rem + .35vw, 1.25rem);
  --jarak-bagian: var(--sp-18);
}

/* Lapis 2: semantik per tema. Terang bawaan; gelap lewat data-theme atau sistem bila belum dipilih. */
:root, [data-theme='light'] {
  color-scheme: light;
  --latar: var(--p-putih);
  --kanvas: var(--p-kertas-1);
  --permukaan: var(--p-putih);
  --tenang: var(--p-kertas-2);
  --segel: var(--p-kertas-4);
  --garis: var(--p-kertas-3);
  --garis-kuat: var(--p-kertas-5);
  --batas-kendali: var(--p-batas-terang);
  --teks-1: var(--p-navy);
  --teks-2: var(--p-slate);
  --teks-3: var(--p-slate-2);
  --aksen-isi: var(--p-biru-algo);
  --aksen-isi-hover: var(--p-biru-algo-tua);
  --aksen-teks: var(--p-biru-algo);
  --pada-aksen: var(--p-putih);
  --fokus: var(--p-biru-algo);
  --tinta: var(--p-tinta-terang);
  --pada-tinta: var(--p-putih);
  --tinta-belum: var(--p-kertas-4);
  --pada-tinta-belum: var(--p-navy);
  --jalur: var(--p-kertas-2);
  --pilih-isi: var(--p-putih);
  --batas-pilih: var(--p-slate-2);
  --bayang-layar: 0 1px 2px rgb(11 18 32 / .05), 0 16px 40px -16px rgb(11 18 32 / .18);
}

[data-theme='dark'] {
  color-scheme: dark;
  --latar: var(--p-navy);
  --kanvas: var(--p-navy-1);
  --permukaan: var(--p-navy-2);
  --tenang: var(--p-navy-2);
  --segel: var(--p-navy-3);
  --garis: var(--p-navy-4);
  --garis-kuat: var(--p-navy-6);
  --batas-kendali: var(--p-batas-gelap);
  --teks-1: var(--p-putih-2);
  --teks-2: var(--p-kabut);
  --teks-3: var(--p-kabut-2);
  --aksen-isi: var(--p-biru-algo);
  --aksen-isi-hover: var(--p-biru-algo-muda);
  --aksen-teks: var(--p-biru-terang);
  --pada-aksen: var(--p-putih);
  --fokus: var(--p-biru-terang);
  --tinta: var(--p-tinta-gelap);
  --pada-tinta: var(--p-putih-2);
  --tinta-belum: var(--p-navy-3);
  --pada-tinta-belum: var(--p-kabut);
  --jalur: var(--p-navy-2);
  --pilih-isi: var(--p-navy-5);
  --batas-pilih: var(--p-kabut-2);
  --bayang-layar: 0 1px 2px rgb(2 5 10 / .5), 0 20px 48px -16px rgb(2 5 10 / .6);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    color-scheme: dark;
    --latar: var(--p-navy);
    --kanvas: var(--p-navy-1);
    --permukaan: var(--p-navy-2);
    --tenang: var(--p-navy-2);
    --segel: var(--p-navy-3);
    --garis: var(--p-navy-4);
    --garis-kuat: var(--p-navy-6);
    --batas-kendali: var(--p-batas-gelap);
    --teks-1: var(--p-putih-2);
    --teks-2: var(--p-kabut);
    --teks-3: var(--p-kabut-2);
    --aksen-isi-hover: var(--p-biru-algo-muda);
    --aksen-teks: var(--p-biru-terang);
    --fokus: var(--p-biru-terang);
    --tinta: var(--p-tinta-gelap);
    --pada-tinta: var(--p-putih-2);
    --tinta-belum: var(--p-navy-3);
    --pada-tinta-belum: var(--p-kabut);
    --jalur: var(--p-navy-2);
    --pilih-isi: var(--p-navy-5);
    --batas-pilih: var(--p-kabut-2);
    --bayang-layar: 0 1px 2px rgb(2 5 10 / .5), 0 20px 48px -16px rgb(2 5 10 / .6);
  }
}

@media (min-width: 600px) { :root { --tepi: var(--sp-8); --jarak-bagian: var(--sp-24); } }
@media (min-width: 1024px) { :root { --tepi: var(--sp-10); --jarak-bagian: var(--sp-28); } }

/* Bahasa: teks dua bahasa ada di HTML. Hanya yang tidak aktif disembunyikan, supaya display milik kelas tetap berlaku.
   Tanpa JavaScript tampil EN. */
html:not([data-bahasa='id']) [data-l='id'],
html[data-bahasa='id'] [data-l='en'] { display: none !important; }

/* Dasar */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--latar);
  color: var(--teks-1);
  font-family: var(--huruf);
  font-size: 1rem;
  line-height: 1.625rem;
  letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

h1, h2, h3, p, dl, dd, figure, blockquote { margin: 0; font: inherit; letter-spacing: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; letter-spacing: inherit; border: 0; background: none; padding: 0; cursor: pointer; }
img, svg { display: block; }
table { border-collapse: collapse; }

:focus-visible { outline: 2px solid var(--fokus); outline-offset: 3px; }
:target { scroll-margin-block-start: var(--sp-6); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ikon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.ikon--kecil { width: 16px; height: 16px; }

.lompat {
  position: absolute;
  inset-inline-start: var(--tepi);
  inset-block-start: -80px;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding-inline: var(--sp-5);
  border-radius: var(--r-pil);
  background: var(--aksen-isi);
  color: var(--pada-aksen);
  font-weight: 500;
}
.lompat:focus { inset-block-start: var(--sp-3); }

.tautan {
  color: var(--aksen-teks);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
.tautan:hover { text-decoration-thickness: 2px; }

.dalam {
  max-width: var(--isi);
  margin-inline: auto;
  padding-inline: var(--tepi);
}

/* Tombol */
.tombol {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tinggi-tombol);
  padding-inline: var(--sp-6);
  border-radius: var(--r-pil);
  font-size: .9375rem;
  line-height: 1.375rem;
  font-weight: 500;
  white-space: nowrap;
  transition: transform var(--gerak-cepat) var(--kurva), background-color var(--gerak) var(--kurva), box-shadow var(--gerak) var(--kurva);
}
.tombol:active { transform: scale(.98); }
.tombol--utama { background: var(--aksen-isi); color: var(--pada-aksen); }
.tombol--utama:focus-visible { outline-color: var(--pada-aksen); outline-offset: -5px; }
.tombol--garis { box-shadow: inset 0 0 0 1px var(--batas-kendali); color: var(--teks-1); }
@media (hover: hover) {
  .tombol--utama:hover { background: var(--aksen-isi-hover); }
  .tombol--garis:hover { box-shadow: inset 0 0 0 1px var(--teks-1); }
}

/* Tanda status: bentuk dan kata, tidak hanya warna. Penuh = sedang berjalan, cincin = direncanakan. */
.tanda {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--teks-2);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}
.tanda__titik {
  position: relative;
  width: 12px;
  height: 12px;
  flex: none;
  border-radius: 50%;
  box-shadow: inset 0 0 0 2px var(--teks-2);
}
.tanda--jalan .tanda__titik::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--teks-1);
}
.tanda--uji .tanda__titik { box-shadow: none; background: var(--teks-1); }

/* Kepala */
.kepala__dalam {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  min-height: 72px;
}
.merek { display: flex; align-items: center; min-height: var(--target); padding-inline-end: var(--sp-2); }
.merek img { width: auto; height: 24px; }
.merek__gelap, .tema-gelap { display: none; }
[data-theme='dark'] .merek__terang, [data-theme='dark'] .tema-terang { display: none; }
[data-theme='dark'] .merek__gelap, [data-theme='dark'] .tema-gelap { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .merek__terang, :root:not([data-theme]) .tema-terang { display: none; }
  :root:not([data-theme]) .merek__gelap, :root:not([data-theme]) .tema-gelap { display: block; }
}

.kepala__kanan { display: flex; align-items: center; gap: var(--sp-6); }
.kepala__nav { display: none; gap: var(--sp-1); }
.kepala__nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding-inline: var(--sp-3);
  border-radius: var(--r-pil);
  color: var(--teks-2);
  font-size: .9375rem;
  line-height: 1.375rem;
  font-weight: 500;
  transition: color var(--gerak-cepat) var(--kurva), background-color var(--gerak-cepat) var(--kurva);
}
.kepala__nav a:hover { color: var(--teks-1); background: var(--tenang); }
@media (min-width: 880px) { .kepala__nav { display: flex; } }

/* Kendali bersegmen: bahasa dan tema satu keluarga, sebanding dengan tautan navigasi.
   Bentuk 32 px (segmen 28 px) dengan huruf navigasi. Area sentuh 44 x 44 dibuat oleh ::after yang tak terlihat:
   8 px ke atas dan bawah, ke sisi luar kontrol sebesar 44 dikurangi lebar segmen. Jarak antarkontrol cukup
   supaya area sentuh dua kontrol tidak bertumpuk: jarak >= 2 x (luar - 2 px padding lintasan). */
.kendali {
  --seg-w: 28px;
  --seg-luar: 16px;
  display: flex;
  align-items: center;
  gap: 28px;
}
@media (min-width: 600px) {
  .kendali { --seg-w: 36px; --seg-luar: 8px; gap: 12px; }
}
html:not(.js) .kendali { display: none; }

.segmen {
  display: inline-flex;
  padding: 2px;
  border-radius: var(--r-pil);
  background: var(--jalur);
  box-shadow: inset 0 0 0 1px var(--garis);
}
.segmen__pilih {
  position: relative;
  display: inline-grid;
  place-items: center;
  width: var(--seg-w);
  height: 28px;
  border-radius: var(--r-pil);
  color: var(--teks-2);
  font-size: .8125rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: 0;
  transition: background-color var(--gerak) var(--kurva), color var(--gerak) var(--kurva), box-shadow var(--gerak) var(--kurva);
}
@media (min-width: 600px) { .segmen__pilih { font-size: .9375rem; letter-spacing: -.006em; } }
.segmen__pilih::after {
  content: '';
  position: absolute;
  inset-block: -8px;
  inset-inline: 0;
}
.segmen__pilih:first-child::after { inset-inline-start: calc(var(--seg-luar) * -1); }
.segmen__pilih:last-child::after { inset-inline-end: calc(var(--seg-luar) * -1); }
.segmen__pilih .ikon { width: 16px; height: 16px; }
@media (min-width: 600px) { .segmen__pilih .ikon { width: 18px; height: 18px; } }
.segmen__pilih:hover { color: var(--teks-1); }
/* Terpilih: permukaan terang bergaris 1 px, huruf penuh. Garis >= 3:1 terhadap lintasan (4.95 terang, 5.98 gelap). */
.segmen__pilih[aria-pressed='true'] {
  background: var(--pilih-isi);
  color: var(--teks-1);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--batas-pilih);
}
.segmen__pilih:focus-visible { outline-offset: 2px; border-radius: var(--r-pil); }
.segmen__pilih:active { transform: scale(.96); }

/* Tooltip ikon tema: tampil saat hover atau fokus keyboard. Teksnya juga nama aksesibel tombol. */
.segmen__tip {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 2;
  padding: 6px 10px;
  border-radius: var(--r-dalam);
  background: var(--teks-1);
  color: var(--latar);
  font-size: .8125rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-2px);
  pointer-events: none;
  transition: opacity var(--gerak-cepat) var(--kurva), transform var(--gerak-cepat) var(--kurva);
}
.segmen__pilih:focus-visible .segmen__tip { opacity: 1; transform: none; }
@media (hover: hover) {
  .segmen__pilih:hover .segmen__tip { opacity: 1; transform: none; }
}

/* Hero */
.hero { padding-block: var(--sp-8) var(--jarak-bagian); }
@media (min-width: 1024px) { .hero { padding-block-start: var(--sp-12); } }

.hero__teks { max-width: 44rem; }
.hero__status { margin-block-end: var(--sp-5); }

.judul-utama {
  font-size: var(--ukuran-judul);
  line-height: 1.04;
  font-weight: 600;
  letter-spacing: -.035em;
  text-wrap: balance;
}
@media (min-width: 1024px) { .hero__teks { max-width: 48rem; } }

.pembuka {
  max-width: 34em;
  margin-block-start: var(--sp-5);
  color: var(--teks-2);
  font-size: var(--ukuran-pembuka);
  line-height: 1.55;
  letter-spacing: -.01em;
  text-wrap: pretty;
}

.hero__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-3);
  margin-block-start: var(--sp-8);
}
@media (max-width: 420px) {
  .hero__aksi .tombol { flex: 1 1 auto; padding-inline: var(--sp-4); }
}

/* Dua sisi: satu chat, dua pembaca. Satu grid, jadi baris kiri dan kanan selalu sejajar. */
.dua-sisi { margin-block-start: var(--sp-10); }
@media (min-width: 1024px) { .dua-sisi { margin-block-start: var(--sp-12); } }

.ds {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 600px) { .ds { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--sp-4); } }

.ds__a { grid-column: 1; }
.ds__b { grid-column: 2; }
.ds__r1 { grid-row: 1; }
.ds__r2 { grid-row: 2; }
.ds__r3 { grid-row: 3; }
.ds__r4 { grid-row: 4; }
.ds__r5 { grid-row: 5; }
.ds__r6 { grid-row: 6; }
.ds__r7 { grid-row: 7; }

.ds__label {
  padding: 0 var(--sp-2) var(--sp-3);
  color: var(--teks-2);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  letter-spacing: 0;
}
@media (min-width: 600px) { .ds__label { font-size: .9375rem; padding-inline: var(--sp-5); } }

.ds__latar {
  grid-row: 2 / 8;
  border-radius: var(--r-isi);
  background: var(--kanvas);
  box-shadow: inset 0 0 0 1px var(--garis), var(--bayang-layar);
}
@media (min-width: 600px) { .ds__latar { border-radius: var(--r-lapis); } }

.ds__sel { min-width: 0; padding: var(--sp-3) var(--sp-3) 0; }
@media (min-width: 600px) { .ds__sel { padding: var(--sp-4) var(--sp-5) 0; } }

.ds__kepala {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
  padding: var(--sp-3);
  border-block-end: 1px solid var(--garis);
}
@media (min-width: 600px) { .ds__kepala { padding: var(--sp-4) var(--sp-5); } }
.ds__nama { display: block; font-size: .9375rem; line-height: 1.25rem; font-weight: 600; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds__sub { display: block; color: var(--teks-3); font-size: .8125rem; line-height: 1rem; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ds__kepala > span:last-child { min-width: 0; }

/* HP (di bawah 600 px): dua layar bertumpuk selebar penuh, layar HP lalu layar server, urutan pesan sama.
   Kolom server pindah ke baris 8 sampai 14 grid yang sama, jadi tidak ada markup kedua. */
@media (max-width: 599px) {
  .ds__b { grid-column: 1; }
  .ds__b.ds__r1 { grid-row: 8; margin-block-start: var(--sp-6); }
  .ds__b.ds__r2 { grid-row: 9; }
  .ds__b.ds__r3 { grid-row: 10; }
  .ds__b.ds__r4 { grid-row: 11; }
  .ds__b.ds__r5 { grid-row: 12; }
  .ds__b.ds__r6 { grid-row: 13; }
  .ds__b.ds__r7 { grid-row: 14; }
  .ds__latar.ds__b { grid-row: 9 / 15; }
}

.ds__kaki {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-2);
  margin: var(--sp-4) var(--sp-3) var(--sp-3);
  min-height: 44px;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pil);
  background: var(--permukaan);
  box-shadow: inset 0 0 0 1px var(--garis);
  color: var(--teks-3);
  font-size: .875rem;
  line-height: 1.25rem;
}
.ds__kaki--jejak {
  justify-content: flex-start;
  border-radius: var(--r-dalam);
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--garis);
  color: var(--teks-2);
  font-size: .8125rem;
  line-height: 1.125rem;
}
.ds__kaki--jejak b { color: var(--teks-1); font-weight: 600; }
@media (min-width: 600px) { .ds__kaki { margin: var(--sp-5) var(--sp-5) var(--sp-5); } }

/* Komponen pesan dari mockup disetujui */
.kelompok { display: flex; flex-direction: column; gap: var(--sp-1); }
.kelompok--masuk { align-items: flex-start; }
.kelompok--keluar { align-items: flex-end; }

.gelembung {
  max-width: 86%;
  padding: var(--sp-2) var(--sp-4);
  font-size: .9375rem;
  line-height: 1.375rem;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

.kelompok--masuk .gelembung {
  background: var(--permukaan);
  color: var(--teks-1);
  border-radius: var(--r-sambung) var(--r-isi) var(--r-isi) var(--r-sambung);
}
.kelompok--masuk .gelembung:first-child { border-start-start-radius: var(--r-isi); }
.kelompok--keluar .gelembung {
  background: var(--tinta);
  color: var(--pada-tinta);
  border-radius: var(--r-isi) var(--r-sambung) var(--r-sambung) var(--r-isi);
}
.kelompok--keluar .gelembung:first-child { border-start-end-radius: var(--r-isi); }

/* Segel: yang dibawa server. Lebar mengikuti panjang pesan, karena ukuran memang terlihat. */
.segel {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: 34px;
  padding-inline: var(--sp-3);
  border-radius: var(--r-isi);
  background: var(--segel);
  color: var(--teks-2);
  font-size: .8125rem;
  line-height: 1rem;
  font-weight: 500;
  letter-spacing: 0;
}
.segel::before {
  content: '';
  flex: 1 1 auto;
  height: 6px;
  min-width: 12px;
  border-radius: var(--r-pil);
  background: var(--garis-kuat);
}
.segel--1 { width: 82%; }
.segel--2 { width: 52%; }
.segel--3 { width: 72%; }
.segel--4 { width: 52%; }
.segel--5 { width: 94%; }
@media (min-width: 600px) { .segel { min-height: 38px; } }

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1);
  padding-inline: var(--sp-1);
  color: var(--teks-3);
  font-size: .8125rem;
  line-height: 1rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.monogram {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: calc(40px / 3);
  background: var(--tenang);
  color: var(--teks-2);
  font-size: .8125rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: .01em;
}
.monogram--kosong { background: var(--segel); }

.dua-sisi__catatan {
  margin-block-start: var(--sp-4);
  padding-inline: var(--sp-2);
  max-width: 44rem;
  color: var(--teks-3);
  font-size: .8125rem;
  line-height: 1.25rem;
  letter-spacing: 0;
}

/* Satu momen sekali buka: pesan terakhir berubah dari Mengirim ke Sampai, lalu segelnya muncul di kolom server.
   Tanpa JavaScript atau dengan reduced-motion, keadaan akhir langsung tampil. */
.ds__meta-tumpuk { display: grid; justify-items: end; }
.ds__meta-tumpuk > * { grid-area: 1 / 1; }
.ds__mengirim { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .js .ds__kirim { animation: ds-tinta var(--gerak-tinta) var(--kurva) 1200ms both; }
  .js .ds__mengirim { animation: ds-hilang 1ms linear 1200ms both; }
  .js .ds__sampai { animation: ds-muncul var(--gerak) var(--kurva) 1200ms both; }
  .js .ds__segel-baru { animation: ds-naik 320ms var(--kurva) 1350ms both; }
}
@keyframes ds-tinta {
  from { background-color: var(--tinta-belum); color: var(--pada-tinta-belum); }
  to { background-color: var(--tinta); color: var(--pada-tinta); }
}
@keyframes ds-hilang { from { opacity: 1; } to { opacity: 0; } }
@keyframes ds-muncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes ds-naik { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Bagian */
.bagian { padding-block: var(--jarak-bagian); }
.bagian--kanvas { background: var(--kanvas); }
/* Dua bagian putih berurutan berbagi satu jarak; sesudah hero juga. Pita kertas selalu memakai jarak penuh di kedua sisi. */
.bagian:not(.bagian--kanvas) + .bagian:not(.bagian--kanvas),
.hero + .bagian:not(.bagian--kanvas) { padding-block-start: 0; }

.judul-bagian {
  max-width: 22em;
  font-size: var(--ukuran-bagian);
  line-height: 1.12;
  font-weight: 600;
  letter-spacing: -.028em;
  text-wrap: balance;
}
.bagian__pembuka {
  max-width: 36em;
  margin-block-start: var(--sp-4);
  color: var(--teks-2);
  font-size: 1.0625rem;
  line-height: 1.6;
  text-wrap: pretty;
}

/* Fitur: grid tidak sama besar. Tiga kelompok membawa pratinjau aplikasi, tiga lainnya teks di atas garis. */
.fitur-grid {
  display: grid;
  gap: var(--sp-4);
  margin-block-start: var(--sp-10);
}
@media (min-width: 1024px) {
  .fitur-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--sp-6);
    margin-block-start: var(--sp-12);
  }
  .fitur--baca { grid-column: 1 / 8; grid-row: 1; }
  .fitur--pin { grid-column: 8 / 13; grid-row: 1 / 3; }
  .fitur--hp { grid-column: 1 / 5; grid-row: 2; }
  .fitur--kontak { grid-column: 5 / 8; grid-row: 2; }
  .fitur--ruang { grid-column: 1 / 8; grid-row: 3; }
  .fitur--pindah { grid-column: 8 / 13; grid-row: 3; }
}
@media (min-width: 680px) and (max-width: 1023px) {
  .fitur-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-5); }
  .fitur--baca, .fitur--pin, .fitur--ruang { grid-column: 1 / -1; }
}

.fitur {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}
.fitur--panel {
  padding: var(--sp-6) var(--sp-5);
  border-radius: var(--r-lapis);
  background: var(--kanvas);
}
@media (min-width: 600px) { .fitur--panel { padding: var(--sp-8); } }
.fitur--garis { padding-block: var(--sp-6) var(--sp-2); border-block-start: 1px solid var(--garis-kuat); }
@media (min-width: 1024px) { .fitur--garis { padding-inline-end: var(--sp-4); } }

.fitur__kepala { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--sp-2) var(--sp-4); }
.fitur__judul {
  max-width: 24em;
  font-size: var(--ukuran-kelompok);
  line-height: 1.3;
  font-weight: 600;
  letter-spacing: -.015em;
  text-wrap: balance;
}
.fitur__isi { max-width: 36em; color: var(--teks-2); text-wrap: pretty; }
.fitur__batas {
  max-width: 36em;
  color: var(--teks-3);
  font-size: .9375rem;
  line-height: 1.5rem;
  text-wrap: pretty;
}
.fitur__batas b { color: var(--teks-2); font-weight: 600; }

.fitur__daftar { display: grid; gap: var(--sp-2); color: var(--teks-2); }
.fitur__daftar li { position: relative; padding-inline-start: var(--sp-5); text-wrap: pretty; }
.fitur__daftar li::before {
  content: '';
  position: absolute;
  inset-inline-start: 2px;
  inset-block-start: 11px;
  width: 6px;
  height: 6px;
  border-radius: 2px;
  background: var(--tinta);
}
[data-theme='dark'] .fitur__daftar li::before { background: var(--teks-3); }

.fitur__pratinjau { margin-block-start: auto; padding-block-start: var(--sp-3); }
.fitur__teks { display: flex; flex-direction: column; gap: var(--sp-3); }
@media (min-width: 1024px) {
  .fitur--ruang { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-8); align-items: start; }
  .fitur--ruang .fitur__pratinjau { margin-block-start: 0; padding-block-start: 0; }
}
.fitur--pin .fitur__pratinjau { display: flex; flex-direction: column; align-items: center; }

/* Siapa membaca: tabel sungguhan, ikon dan kata */
.siapa { width: 100%; font-size: .9375rem; line-height: 1.375rem; }
.siapa caption {
  padding-block-end: var(--sp-2);
  color: var(--teks-2);
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  text-align: start;
}
.siapa th, .siapa td { padding-block: 10px; border-block-start: 1px solid var(--garis-kuat); vertical-align: top; text-align: start; }
.siapa th { padding-inline-end: var(--sp-4); font-weight: 500; white-space: nowrap; }
.siapa td { color: var(--teks-2); }
.siapa__hasil { display: inline-flex; align-items: flex-start; gap: var(--sp-2); }
.siapa__hasil .ikon { margin-block-start: 3px; }
.siapa__ya { color: var(--teks-1); font-weight: 500; }
@media (max-width: 420px) { .siapa th { white-space: normal; } }

/* Layar kunci, dari android-inti-v3 */
.kunci {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  width: min(100%, 272px);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  border-radius: var(--r-lapis);
  background: var(--permukaan);
  box-shadow: inset 0 0 0 1px var(--garis), var(--bayang-layar);
}
.kunci img { height: 20px; width: auto; }
.kunci__judul { font-size: .9375rem; line-height: 1.375rem; font-weight: 600; }
.kunci__titik { display: flex; gap: 10px; min-height: 10px; }
.kunci__titik span { width: 10px; height: 10px; border-radius: 50%; background: var(--teks-1); }
.kunci__papan { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); width: 100%; }
.kunci__tuts {
  display: grid;
  place-items: center;
  min-height: 40px;
  border-radius: var(--r-pil);
  background: var(--tenang);
  font-size: 1.0625rem;
  line-height: 1;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.kunci__tuts--fungsi { background: transparent; color: var(--teks-2); font-size: .8125rem; }
.kunci__buka {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 40px;
  border-radius: var(--r-pil);
  background: var(--tinta-belum);
  color: var(--pada-tinta-belum);
  font-size: .875rem;
  font-weight: 500;
}
.pratinjau__catatan {
  margin-block-start: var(--sp-3);
  color: var(--teks-3);
  font-size: .8125rem;
  line-height: 1.125rem;
  letter-spacing: 0;
  text-align: center;
}

.pin {
  display: grid;
  gap: 0;
}
.pin div { padding-block: var(--sp-3); border-block-start: 1px solid var(--garis-kuat); }
.pin dt { font-weight: 600; font-size: .9375rem; line-height: 1.375rem; }
.pin dd { color: var(--teks-2); font-size: .9375rem; line-height: 1.5rem; text-wrap: pretty; }

/* Daftar anggota admin, dari landing-v3 */
.anggota {
  overflow: hidden;
  border-radius: var(--r-isi);
  background: var(--permukaan);
  box-shadow: inset 0 0 0 1px var(--garis), var(--bayang-layar);
}
.anggota__kepala { padding: var(--sp-4) var(--sp-5) var(--sp-3); }
.anggota__judul { font-size: .9375rem; line-height: 1.25rem; font-weight: 600; }
.anggota__sub { color: var(--teks-3); font-size: .8125rem; line-height: 1rem; }
.anggota__baris {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-5);
  border-block-start: 1px solid var(--garis);
}
.anggota__teks { display: grid; min-width: 0; flex: 1 1 auto; }
.anggota__nama { font-size: .9375rem; line-height: 1.25rem; font-weight: 500; }
.anggota__peran { color: var(--teks-3); font-size: .8125rem; line-height: 1.125rem; }
.anggota__status { color: var(--teks-2); font-size: .8125rem; line-height: 1rem; white-space: nowrap; }
.anggota__jejak {
  padding: var(--sp-3) var(--sp-5);
  border-block-start: 1px solid var(--garis);
  background: var(--tenang);
  color: var(--teks-2);
  font-size: .8125rem;
  line-height: 1.25rem;
}
.anggota__jejak b { color: var(--teks-1); font-weight: 600; }

/* Tahap berikut: satu rel lima butir di pita kertas */
.berikut__kepala { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-5); }
.rel {
  display: grid;
  gap: 0;
  margin-block-start: var(--sp-10);
}
.rel li { padding-block: var(--sp-5); border-block-start: 1px solid var(--garis-kuat); }
.rel__nama { font-size: 1.0625rem; line-height: 1.5rem; font-weight: 600; letter-spacing: -.01em; }
.rel__isi { margin-block-start: var(--sp-2); color: var(--teks-2); font-size: .9375rem; line-height: 1.5rem; text-wrap: pretty; }
@media (min-width: 680px) {
  .rel { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-8); }
}
@media (min-width: 1100px) {
  .rel { grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: var(--sp-6); }
  .rel li { padding-block: var(--sp-5) 0; }
}
.berikut__catatan {
  max-width: 44em;
  margin-block-start: var(--sp-8);
  color: var(--teks-3);
  font-size: .9375rem;
  line-height: 1.5rem;
}

/* Perkembangan: jalur tiga langkah. Garis bertinta sampai langkah yang sedang berjalan. */
.jalur {
  display: grid;
  margin-block-start: var(--sp-10);
}
.jalur__butir {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  column-gap: var(--sp-4);
  padding-block-end: var(--sp-8);
}
.jalur__butir:last-child { padding-block-end: 0; }
.jalur__titik {
  position: relative;
  z-index: 1;
  width: 16px;
  height: 16px;
  margin: 4px 4px 0;
  border-radius: 50%;
  background: var(--latar);
  box-shadow: inset 0 0 0 2px var(--teks-3);
}
.jalur__butir--jalan .jalur__titik { background: var(--tinta); box-shadow: 0 0 0 4px var(--latar), 0 0 0 6px var(--tinta); }
[data-theme='dark'] .jalur__butir--jalan .jalur__titik { background: var(--teks-1); box-shadow: 0 0 0 4px var(--latar), 0 0 0 6px var(--teks-1); }
.jalur__butir::before {
  content: '';
  position: absolute;
  inset-block: 20px 0;
  inset-inline-start: 11px;
  width: 2px;
  background: var(--garis-kuat);
}
.jalur__butir:last-child::before { display: none; }
.jalur__waktu { font-size: .9375rem; line-height: 1.5rem; font-weight: 600; }
.jalur__keadaan { color: var(--teks-2); font-size: .875rem; line-height: 1.25rem; font-weight: 500; }
.jalur__isi { grid-column: 2; margin-block-start: var(--sp-2); max-width: 32em; color: var(--teks-2); text-wrap: pretty; }
.jalur__kepala { grid-column: 2; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--sp-3); }

@media (min-width: 900px) {
  .jalur { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-8); }
  .jalur__butir { grid-template-columns: minmax(0, 1fr); padding-block: 0; }
  .jalur__titik { margin: 0 0 var(--sp-5); }
  .jalur__butir::before { inset-block: 7px auto; inset-inline: 24px calc(var(--sp-8) * -1); width: auto; height: 2px; }
  .jalur__butir--jalan::before { background: var(--garis-kuat); }
  .jalur__kepala, .jalur__isi { grid-column: 1; }
}

.platform {
  display: grid;
  margin-block-start: var(--sp-12);
  max-width: 44rem;
}
.platform__baris {
  display: grid;
  grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  padding-block: var(--sp-4);
  border-block-start: 1px solid var(--garis-kuat);
}
.platform__nama { font-weight: 600; }
.platform__isi { display: grid; gap: var(--sp-1); }
.platform__teks { color: var(--teks-2); font-size: .9375rem; line-height: 1.5rem; }
@media (max-width: 479px) { .platform__baris { grid-template-columns: minmax(0, 1fr); } }

.catatan-jujur {
  max-width: 44em;
  margin-block-start: var(--sp-8);
  color: var(--teks-2);
  font-size: .9375rem;
  line-height: 1.5rem;
  text-wrap: pretty;
}

/* Pertanyaan: judul lengket kiri, daftar terbuka di kanan */
.tanya-tata { display: grid; gap: var(--sp-8); }
@media (min-width: 1024px) {
  .tanya-tata { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--sp-10); align-items: start; }
  .tanya-tata .judul-bagian { position: sticky; top: var(--sp-8); }
}
.tanya__butir { padding-block: var(--sp-6); border-block-start: 1px solid var(--garis-kuat); }
.tanya__butir:first-child { padding-block-start: 0; border-block-start: 0; }
.tanya__tanya { font-size: 1.125rem; line-height: 1.625rem; font-weight: 600; letter-spacing: -.012em; text-wrap: balance; }
.tanya__jawab { max-width: 62ch; margin-block-start: var(--sp-2); color: var(--teks-2); font-size: 1rem; line-height: 1.6875rem; text-wrap: pretty; }

/* Kaki */
.kaki { padding-block: var(--sp-10) var(--sp-12); border-block-start: 1px solid var(--garis); }
.kaki__dalam { display: grid; gap: var(--sp-6); }
@media (min-width: 900px) {
  .kaki__dalam { grid-template-columns: auto 1fr auto; align-items: center; gap: var(--sp-8); }
}
.kaki__endorsement { width: 163px; height: auto; }
.kaki__tautan { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-inline-start: calc(var(--sp-3) * -1); }
@media (min-width: 900px) { .kaki__tautan { justify-content: center; margin-inline-start: 0; } }
.kaki__tautan a {
  display: inline-flex;
  align-items: center;
  min-height: var(--target);
  padding-inline: var(--sp-3);
  border-radius: var(--r-pil);
  color: var(--teks-2);
  font-size: .9375rem;
  font-weight: 500;
}
.kaki__tautan a:hover { color: var(--teks-1); background: var(--tenang); }
.kaki__tautan a[aria-current='page'] { color: var(--teks-1); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
.kaki__badan { max-width: 30em; color: var(--teks-3); font-size: .875rem; line-height: 1.375rem; }
@media (min-width: 900px) { .kaki__badan { text-align: end; } }

/* Halaman naskah: Privasi dan Syarat */
.naskah { max-width: 46rem; margin-inline: auto; padding: var(--sp-8) var(--tepi) var(--sp-24); }
.naskah__kembali {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--target);
  margin-inline-start: calc(var(--sp-2) * -1);
  padding-inline: var(--sp-2);
  border-radius: var(--r-pil);
  color: var(--teks-2);
  font-size: .9375rem;
  font-weight: 500;
}
.naskah__kembali:hover { color: var(--teks-1); background: var(--tenang); }
.naskah__judul { margin-block-start: var(--sp-6); font-size: clamp(1.875rem, 1.4rem + 1.6vw, 2.5rem); line-height: 1.12; font-weight: 600; letter-spacing: -.028em; text-wrap: balance; }
.naskah__versi { margin-block-start: var(--sp-3); color: var(--teks-3); font-size: .875rem; line-height: 1.25rem; }
.naskah__pembuka { margin-block-start: var(--sp-6); color: var(--teks-2); font-size: 1.125rem; line-height: 1.65; text-wrap: pretty; }
.naskah h2 { margin-block-start: var(--sp-10); font-size: 1.25rem; line-height: 1.4; font-weight: 600; letter-spacing: -.015em; }
.naskah p:not([class]) { margin-block-start: var(--sp-3); color: var(--teks-2); text-wrap: pretty; }
.naskah__daftar { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-3); color: var(--teks-2); }
.naskah__daftar li { position: relative; padding-inline-start: var(--sp-5); text-wrap: pretty; }
.naskah__daftar li::before { content: ''; position: absolute; inset-inline-start: 2px; inset-block-start: 11px; width: 6px; height: 6px; border-radius: 2px; background: var(--teks-3); }
.naskah__daftar b, .naskah p b { color: var(--teks-1); font-weight: 600; }
.ringkas {
  margin-block-start: var(--sp-8);
  padding: var(--sp-6);
  border-radius: var(--r-isi);
  background: var(--kanvas);
}
.ringkas__judul { font-weight: 600; }
.ringkas p:not([class]) { margin-block-start: var(--sp-2); }

/* 404 */
.hilang { max-width: 34rem; margin-inline: auto; padding: var(--sp-16) var(--tepi) var(--sp-24); }
.hilang .kelompok { margin-block-start: var(--sp-6); }
.hilang .gelembung { max-width: 100%; font-size: 1rem; line-height: 1.5rem; padding: var(--sp-3) var(--sp-4); }
.hilang .kelompok--masuk .gelembung { background: var(--kanvas); box-shadow: inset 0 0 0 1px var(--garis); }
.hilang .tombol { margin-block-start: var(--sp-8); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; animation-delay: 0ms !important; }
}