/* Landing invoice.resmi.id -- disalin dari docs.resmi.id (public/document/css/landing.css)
 * supaya gaya visual seragam lintas produk resmi.id, sesuai permintaan.
 *
 * Palet navy+merah segel (identitas invoice.resmi.id, sama dgn
 * public/invoice-gw/css/base.css dashboard) MENGGANTIKAN biru docs.resmi.id --
 * token --dl-* dipertahankan sama (struktur CSS sepenuhnya reuse), hanya
 * NILAINYA yang diganti, supaya markup landing.ejs tidak perlu disesuaikan.
 */

:root {
  --dl-blue: #0B2545;
  --dl-blue-dark: #081a33;
  --dl-blue-ink: #0B2545;
  --dl-tint: #eef2f7;
  --dl-tint-2: #f6f7f9;
  --dl-ink: #0f172a;
  --dl-body: #475569;
  --dl-muted: #94a3b8;
  --dl-line: #e2e8f0;
  --dl-surface: #ffffff;
  --dl-bg: #ffffff;
  --dl-success: #16a34a;
  --dl-success-tint: #dcfce7;
  --dl-seal: #B01B2E;
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--dl-bg); color: var(--dl-ink);
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased; line-height: 1.6;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1160px; margin: 0 auto; padding: 0 24px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 100; background: #fff; padding: 10px 14px; border-radius: 8px; }

/* ── Tombol ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 10px; border: 1px solid transparent;
  font-size: 14.5px; font-weight: 650; cursor: pointer; white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}
.btn-blue { background: var(--dl-blue); color: #fff; box-shadow: 0 6px 16px -6px rgba(37,99,235,.5); }
.btn-blue:hover { background: var(--dl-blue-dark); }
.btn-ghost { background: #fff; border-color: var(--dl-line); color: var(--dl-ink); }
.btn-ghost:hover { border-color: var(--dl-blue); color: var(--dl-blue-dark); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* ── Navigasi ───────────────────────────────────────────────── */
.nav { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--dl-line); }
.nav-in { display: flex; align-items: center; justify-content: space-between; gap: 18px; height: 66px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand-mark {
  width: 34px; height: 34px; flex-shrink: 0;
  /* Logo transparan: TANPA latar/radius -- kotak berwarna dulu
     dipakai utk menampung huruf "r", sekarang tidak perlu. */
  object-fit: contain; display: block;
}
.brand-txt strong { display: block; font-size: 15.5px; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; }
.brand-txt small { display: block; font-size: 10.5px; color: var(--dl-muted); }
.nav-links { display: none; gap: 28px; font-size: 14px; font-weight: 550; color: var(--dl-body); }
@media (min-width: 900px) { .nav-links { display: flex; } }
.nav-links a:hover { color: var(--dl-blue); }
.nav-links a.on { color: var(--dl-blue); font-weight: 650; }
.nav-act { display: flex; align-items: center; gap: 9px; }
/* Pemilih bahasa pindah ke footer (lihat .dl-lang): di navbar ia
   bersaing ruang dgn "Masuk" dan "Daftar gratis", dua hal yang justru
   jadi tujuan halaman ini. */
.hide-xs { display: none; }
@media (min-width: 560px) { .hide-xs { display: inline-flex; } }

/* ── Hero ───────────────────────────────────────────────────── */
.hero { background: linear-gradient(180deg, var(--dl-tint-2) 0%, #fff 100%); padding: 56px 0 64px; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 980px) { .hero-grid { grid-template-columns: 1.02fr .98fr; gap: 48px; } }
.pill {
  display: inline-flex; align-items: center; gap: 8px; margin-bottom: 20px;
  padding: 6px 14px; border-radius: 999px; background: #fff; border: 1px solid var(--dl-line);
  font-size: 12.5px; font-weight: 600; color: var(--dl-body);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--dl-success); flex-shrink: 0; }
.hero h1 { font-size: clamp(32px, 5vw, 46px); font-weight: 800; line-height: 1.14; letter-spacing: -.03em; margin: 0; text-wrap: balance; }
.hero h1 .blue { color: var(--dl-blue); }
.hero-lead { font-size: 16.5px; color: var(--dl-body); line-height: 1.7; margin: 18px 0 0; max-width: 52ch; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 28px; }
.hero-pts { display: flex; flex-wrap: wrap; gap: 10px 24px; margin-top: 28px; }
.hero-pts span { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--dl-body); }

/* § Badge mitra penerbit (Peruri).
   Sejajar satu baris -- keterangan peran, pemisah, lalu logo. Logonya
   sudah memuat tulisan PERURI, jadi tidak ada nama yang diulang di
   sebelahnya. Warna memakai token halaman ini, bukan nilai keras,
   supaya ikut kalau palet landing berubah. */
.hero-partner {
  display: inline-flex; align-items: center; gap: 11px;
  margin-top: 22px; padding: 7px 13px;
  background: #fff; border: 1px solid var(--dl-line); border-radius: 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.hero-partner-cap {
  font-size: 9.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dl-muted); line-height: 1;
  white-space: nowrap;
}
.hero-partner-sep { width: 1px; align-self: stretch; background: var(--dl-line); }
/* Tinggi dikunci, lebar mengikuti rasio: logo mitra tidak boleh ikut
   melar mengikuti lebar kolom. */
.hero-partner img { height: 26px; width: auto; display: block; }
/* Cadangan teks: hanya tampil kalau berkas logonya gagal dimuat. */
.hero-partner-nama { font-size: 13.5px; font-weight: 800; color: #1e2a78; line-height: 1; }
.tick { width: 17px; height: 17px; color: var(--dl-success); flex-shrink: 0; }

/* ── Kartu pratinjau dokumen ───────────────────────────────── */
/* ── Gambar hero ───────────────────────────────────────────────
 * § Tidak ada mask, dan itu disengaja.
 *
 * Gambarnya (public/document/img/hero-docs.*) berlatar transparan, jadi
 * ia menyatu sendiri dgn gradien .hero. Versi lama berlatar solid dan
 * selalu menyisakan batas kotak betapapun tepinya dipudarkan. */
.hero-shot { display: block; line-height: 0; }
.hero-shot img {
  display: block; width: 100%; height: auto;

  /* § Hanya sisi KANAN & BAWAH yang dilembutkan.
   *
   * Tumpukan kertas di kanan dan meja di bawah terpotong lurus pd
   * gambar aslinya -- alpha-nya melompat ~100 ke ~240 dalam satu piksel,
   * jadi batas kotaknya terbaca jelas. Sisi kiri & atas tidak perlu:
   * di sana objeknya (ponsel, kartu) memang berakhir sendiri.
   *
   * Dua gradien di-INTERSECT; tanpa mask-composite yg kedua menimpa yg
   * pertama dan hanya satu sisi yang melembut. */
  -webkit-mask-image:
    linear-gradient(to left, transparent 0, #000 5%),
    linear-gradient(to top,  transparent 0, #000 3.5%);
  mask-image:
    linear-gradient(to left, transparent 0, #000 5%),
    linear-gradient(to top,  transparent 0, #000 3.5%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}
/* Peramban tanpa mask-composite menampilkan gambarnya utuh -- lebih
 * baik bertepi tegas daripada separuh hilang. */
@supports not (mask-composite: intersect) {
  .hero-shot img { -webkit-mask-image: none; mask-image: none; }
}

/* ── Kepala tiap bagian ────────────────────────────────────────
 * Dipusatkan & dibatasi lebarnya supaya judul panjang tetap enak
 * dibaca; sebelumnya tiap bagian mengatur sendiri lewat style inline. */
.sec-head { text-align: center; max-width: 54ch; margin: 0 auto 44px; }
.sec-head .sec-title { margin-inline: auto; max-width: 24ch; }
.sec-head .sec-lead { margin-inline: auto; }

/* ── Perbandingan cara lama vs baru ────────────────────────────
 * § Dua kolom yang sengaja DIBEDAKAN nadanya.
 *
 * Kolom kiri netral-keabuan (bukan merah menyala) supaya terbaca sbg
 * "keadaan sekarang", bukan tuduhan; kolom kanan memakai aksen biru
 * produk. Kontrasnya tetap terlihat tanpa berlebihan. */
.banding {
  display: grid; grid-template-columns: 1fr; gap: 18px;
  max-width: 940px; margin: 0 auto;
}
@media (min-width: 860px) { .banding { grid-template-columns: 1fr 1fr; gap: 22px; } }
.banding-kol { border-radius: 18px; padding: 26px 24px; border: 1px solid var(--dl-line); }
.banding-lama { background: #fbfcfd; }
.banding-baru { background: var(--dl-tint); border-color: #cfe0fb; }
.banding-judul {
  display: flex; align-items: center; gap: 9px;
  font-size: 14px; font-weight: 750; letter-spacing: -.01em;
  margin: 0 0 16px; text-transform: none;
}
.banding-judul svg { width: 19px; height: 19px; flex: 0 0 auto; }
.banding-lama .banding-judul { color: var(--dl-body); }
.banding-baru .banding-judul { color: var(--dl-blue-ink); }
.banding-kol ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.banding-kol li {
  font-size: 14.5px; line-height: 1.55; color: var(--dl-body);
  padding-left: 18px; position: relative;
}
.banding-kol li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
}
.banding-lama li::before { background: var(--dl-muted); }
.banding-baru li::before { background: var(--dl-blue); }
.banding-baru li { color: var(--dl-ink); }

/* ── Kartu manfaat ─────────────────────────────────────────────── */
.kartu-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .kartu-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kartu-grid { grid-template-columns: repeat(3, 1fr); } }
.kartu {
  background: var(--dl-surface); border: 1px solid var(--dl-line);
  border-radius: 16px; padding: 24px 22px;
}
.kartu-ic {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: var(--dl-tint); color: var(--dl-blue); margin-bottom: 15px;
}
.kartu-ic svg { width: 21px; height: 21px; }
.kartu h3 {
  font-size: 16px; font-weight: 720; letter-spacing: -.015em;
  margin: 0 0 7px; color: var(--dl-ink); line-height: 1.3;
}
.kartu p { font-size: 14.5px; line-height: 1.65; color: var(--dl-body); margin: 0; }

/* ── Ilustrasi invoice (hero) ──────────────────────────────────────
 * Dokumen invoice yang "ditulis" baris demi baris, kode QRIS "dipindai",
 * lalu stempel LUNAS muncul -- siklus diulang terus (infinite), murni
 * CSS, pola SAMA dgn .es-garis/.es-lencana di views/resmi-id/e-sign.ejs.
 *
 * § Siklus 6s dibagi jadi slot waktu tetap per elemen (lihat komentar
 * tiap aturan) supaya infinite-loop selalu mulai dari frame awal yang
 * sama -- BUKAN durasi natural tiap animasi, supaya semuanya restart
 * serentak di detik 0 setiap putaran. */
.ia-ilus { max-width: 480px; width: 100%; margin: 0 auto; }
.ia-ilus svg { width: 100%; height: auto; display: block; }

.ia-baris-garis {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: iaTulis 6s ease-in-out infinite;
}
.ia-d1 { animation-delay: .1s; }
.ia-d2 { animation-delay: .3s; }
.ia-d3 { animation-delay: .5s; }
@keyframes iaTulis {
  0% { stroke-dashoffset: 1; }
  10%, 100% { stroke-dashoffset: 0; }
}

/* Sapuan pemindai QRIS: turun sekali lalu memudar, di tengah siklus
   (setelah baris invoice selesai ditulis, sebelum stempel muncul). */
.ia-scan {
  opacity: 0;
  animation: iaScan 6s ease-in-out infinite;
  animation-delay: 1.1s;
}
@keyframes iaScan {
  0%, 100% { opacity: 0; transform: translateY(0); }
  4% { opacity: .85; transform: translateY(0); }
  28% { opacity: .85; transform: translateY(50px); }
  34%, 60% { opacity: 0; transform: translateY(50px); }
}

/* Stempel LUNAS: muncul setelah pemindaian (~detik 2.3), bertahan,
   lalu memudar menjelang siklus berikutnya mengulang dari awal. */
.ia-stempel {
  opacity: 0; transform-box: fill-box; transform-origin: center;
  transform: scale(.72);
  animation: iaStempel 6s cubic-bezier(.2,.9,.3,1.4) infinite;
}
@keyframes iaStempel {
  0%, 38% { opacity: 0; transform: scale(.72); }
  46% { opacity: 1; transform: scale(1); }
  88% { opacity: 1; transform: scale(1); }
  96%, 100% { opacity: 0; transform: scale(.9); }
}

/* § Semua animasi dimatikan, hasil AKHIRNYA (invoice lunas) yang
   ditampilkan -- bukan frame kosong di tengah siklus. */
@media (prefers-reduced-motion: reduce) {
  .ia-baris-garis { animation: none; stroke-dashoffset: 0; }
  .ia-scan { animation: none; opacity: 0; }
  .ia-stempel { animation: none; opacity: 1; transform: scale(1); }
}

/* ── Alur proses ───────────────────────────────────────────────
 * § Bernomor & bergaris penghubung, bukan kartu berjajar.
 *
 * Urutannya bagian dari informasinya: pembaca perlu melihat bahwa ini
 * empat tahap berurutan, bukan empat fitur terpisah. */
.alur { list-style: none; margin: 0 auto; padding: 0; max-width: 880px; }
.alur-item {
  --alur-jarak: 34px;
  position: relative; display: grid; gap: 18px;
  grid-template-columns: 44px 1fr; align-items: start;
  padding-bottom: var(--alur-jarak);
}
@media (min-width: 780px) {
  .alur-item { grid-template-columns: 44px 1fr 92px; gap: 24px; align-items: center; }
}
.alur-item:last-child { padding-bottom: 0; }
/* § Garis digambar per-ruas, dari lingkaran ke lingkaran.
 *
 * Tiga percobaan sebelumnya gagal, dan alasannya sama: lingkaran berada
 * di TENGAH item yang tingginya berbeda-beda, jadi tidak ada nilai
 * top/bottom tetap yang benar untuk semua langkah sekaligus. Menutup
 * ujung garis dgn warna latar juga rapuh — panjang yang cukup di
 * desktop menjulur keluar di ponsel, karena di sana itemnya jauh lebih
 * tinggi.
 *
 * Yang dipakai sekarang: tiap langkah (kecuali yang terakhir) menggambar
 * SATU ruas dari bawah lingkarannya sendiri sampai ke lingkaran
 * berikutnya. Panjangnya mengikuti tinggi item, bukan angka tetap, jadi
 * benar di lebar layar mana pun.
 *
 * Kuncinya .alur-tanda diregangkan setinggi item (align-self: stretch),
 * sehingga 50% di dalamnya = titik tengah lingkaran. */
.alur { position: relative; }
.alur-tanda {
  position: relative; z-index: 1;
  display: grid; justify-items: center; align-content: center;
  align-self: stretch;
}
.alur-item:not(:last-child) .alur-tanda::after {
  content: ""; position: absolute;
  left: 50%; width: 2px; margin-left: -1px;
  /* Dari tepi bawah lingkaran (jari-jari 22px) ... */
  top: calc(50% + 22px);
  /* ... sampai menembus jarak antar-item; sisanya ditutup ruas
     berikutnya yang dimulai dari atas lingkaran sesudahnya. */
  bottom: calc(-1 * var(--alur-jarak));
  background: #cfe0fb;
}
/* Ruas penyambung di ATAS lingkaran, supaya tidak ada celah di antara
   akhir ruas sebelumnya dan lingkaran ini. */
.alur-item:not(:first-child) .alur-tanda::before {
  content: ""; position: absolute;
  left: 50%; width: 2px; margin-left: -1px;
  top: 0; bottom: calc(50% + 22px);
  background: #cfe0fb;
}
.alur-no {
  display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--dl-blue); color: #fff;
  font-size: 16px; font-weight: 750;
  box-shadow: 0 5px 14px rgba(37, 99, 235, .28);
}
.alur-label {
  display: inline-block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--dl-blue); margin-bottom: 5px;
}
.alur-isi h3 {
  font-size: 18px; font-weight: 740; letter-spacing: -.02em;
  margin: 0 0 8px; color: var(--dl-ink);
}
.alur-isi p {
  font-size: 15px; line-height: 1.7; color: var(--dl-body);
  margin: 0 0 12px; max-width: 58ch;
}
.alur-tag { display: flex; flex-wrap: wrap; gap: 8px; }
.alur-tag span {
  font-size: 12px; font-weight: 600; color: var(--dl-blue-ink);
  background: var(--dl-tint); border: 1px solid #dceafd;
  border-radius: 999px; padding: 4px 11px;
}
.alur-ic {
  display: none; place-items: center;
  width: 84px; height: 84px; border-radius: 20px;
  background: var(--dl-tint); color: var(--dl-blue);
}
@media (min-width: 780px) { .alur-ic { display: grid; } }
.alur-ic svg { width: 34px; height: 34px; }

/* ── Kasus pemakaian ───────────────────────────────────────────── */
.kasus-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 620px) { .kasus-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kasus-grid { grid-template-columns: repeat(3, 1fr); } }
.kasus-item {
  background: var(--dl-surface); border: 1px solid var(--dl-line);
  border-radius: 14px; padding: 20px 20px 22px;
  border-left: 3px solid var(--dl-blue);
}
.kasus-item h3 {
  font-size: 15.5px; font-weight: 720; letter-spacing: -.012em;
  margin: 0 0 6px; color: var(--dl-ink);
}
.kasus-item p { font-size: 14px; line-height: 1.6; color: var(--dl-body); margin: 0; }

/* ── Alasan bisa dipercaya ─────────────────────────────────────── */
.percaya-grid {
  display: grid; gap: 24px 36px; grid-template-columns: 1fr;
  max-width: 900px; margin: 0 auto;
}
@media (min-width: 720px) { .percaya-grid { grid-template-columns: repeat(2, 1fr); } }
.percaya-item { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; }
.percaya-item .tick { width: 20px; height: 20px; color: var(--dl-success); margin-top: 2px; }
.percaya-item h3 {
  font-size: 15.5px; font-weight: 720; letter-spacing: -.012em;
  margin: 0 0 5px; color: var(--dl-ink);
}
.percaya-item p { font-size: 14.5px; line-height: 1.65; color: var(--dl-body); margin: 0; }

/* ── Kartu dasar hukum ─────────────────────────────────────────
 * § Yang meyakinkan di atas, batasnya di bawah.
 *
 * Batasan tetap ditampilkan penuh, tapi dipisahkan dgn garis dan
 * diberi latar sendiri supaya terbaca sbg catatan cakupan — bukan
 * peringatan yg membatalkan isi di atasnya. */
.legal-judul {
  font-size: 19px; font-weight: 750; letter-spacing: -.015em;
  margin: 0 0 12px; color: var(--dl-ink);
}
.legal-body { font-size: 14.5px; line-height: 1.75; color: var(--dl-body); margin: 0; }
.legal-body strong { color: var(--dl-ink); font-weight: 700; }

/* § Tautan ke sumber hukum harus TERLIHAT sbg tautan.
 *
 * Teksnya di dalam <strong>, jadi tanpa warna & garis bawah ia
 * terbaca sekadar penebalan — pembaca tidak tahu peraturannya bisa
 * dibuka dan diperiksa sendiri. */
.legal-body a,
.legal-isi a {
  color: var(--dl-blue); text-decoration: underline;
  text-underline-offset: 2px; text-decoration-thickness: 1px;
}
.legal-body a:hover,
.legal-isi a:hover { color: var(--dl-blue-dark); text-decoration-thickness: 2px; }

.legal-sub {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--dl-blue-ink); margin-bottom: 11px;
}
.legal-poin { margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--dl-line); }
.legal-poin ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.legal-poin li {
  display: grid; grid-template-columns: 18px 1fr; gap: 9px; align-items: start;
  font-size: 13.5px; line-height: 1.55; color: var(--dl-body);
}
.legal-poin .tick { width: 17px; height: 17px; color: var(--dl-success); margin-top: 1px; }

.legal-batas {
  margin-top: 18px;
  background: #fbfcfd; border: 1px solid var(--dl-line); border-radius: 12px;
}
.legal-batas summary {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
/* Segitiga bawaan diganti chevron sendiri supaya konsisten dgn FAQ. */
.legal-batas summary::-webkit-details-marker { display: none; }
.legal-batas .legal-sub { color: var(--dl-body); margin: 0; }
.legal-chev {
  width: 16px; height: 16px; flex: 0 0 auto; color: var(--dl-muted);
  transition: transform .18s ease;
}
.legal-batas[open] .legal-chev { transform: rotate(180deg); }
.legal-batas summary:focus-visible {
  outline: 2px solid var(--dl-blue); outline-offset: -2px; border-radius: 12px;
}
.legal-batas p {
  font-size: 13px; line-height: 1.65; color: var(--dl-body);
  margin: 0; padding: 0 16px 15px;
}
.legal-batas strong { color: var(--dl-ink); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .legal-chev { transition: none; } }

/* ── Halaman hukum (Syarat & Privasi) ──────────────────────────
 * Dokumen panjang untuk dibaca, bukan dipindai: satu kolom sempit,
 * jarak antar-pasal lega, dan daftar isi di atas supaya pembaca bisa
 * langsung ke pasal yang dicarinya. */
.legal-hal { padding-top: 46px; }
.legal-wrap { max-width: 760px; }
.legal-kepala { margin-bottom: 30px; }
.legal-kepala h1 {
  font-size: clamp(28px, 4.2vw, 38px); font-weight: 800;
  letter-spacing: -.028em; line-height: 1.18; margin: 0 0 14px;
  color: var(--dl-ink); text-wrap: balance;
}
.legal-lead { font-size: 16px; line-height: 1.7; color: var(--dl-body); margin: 0 0 12px; }
.legal-tgl { font-size: 13px; color: var(--dl-muted); margin: 0; }

/* Peringatan placeholder — sengaja mencolok supaya tidak terlewat. */
.legal-peringatan {
  display: flex; gap: 10px; align-items: flex-start;
  background: #fffbeb; border: 1px solid #fde68a; border-radius: 12px;
  padding: 14px 16px; margin: 0 0 28px;
  font-size: 14px; line-height: 1.6; color: #92400e;
}
.legal-peringatan strong { flex: 0 0 auto; }

/* § Panel rujukan ke dokumen induk.
 *
 * Diberi aksen biru & diletakkan sebelum daftar isi supaya pembaca
 * langsung paham halaman ini hanya ketentuan tambahan — bukan
 * keseluruhan kebijakan. */
.legal-induk {
  background: var(--dl-tint); border: 1px solid #cfe0fb;
  border-left: 3px solid var(--dl-blue);
  border-radius: 12px; padding: 16px 18px; margin: 0 0 26px;
}
.legal-induk h2 {
  font-size: 14px; font-weight: 750; letter-spacing: -.01em;
  margin: 0 0 7px; color: var(--dl-blue-ink);
}
.legal-induk p { font-size: 14px; line-height: 1.65; color: var(--dl-body); margin: 0; }
.legal-induk strong { color: var(--dl-ink); font-weight: 700; }
.legal-induk-tautan {
  display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 11px !important;
}
.legal-induk-tautan a {
  font-size: 13.5px; font-weight: 600; color: var(--dl-blue);
  text-decoration: none; display: inline-flex; align-items: center; gap: 5px;
}
.legal-induk-tautan a::after { content: "\2197"; font-size: 12px; }
.legal-induk-tautan a:hover { text-decoration: underline; }

/* Aturan bila isi halaman ini bertentangan dgn dokumen induk. */
.legal-konflik {
  margin-top: 34px; padding: 16px 18px;
  background: #fbfcfd; border: 1px solid var(--dl-line); border-radius: 12px;
}
.legal-konflik h2 {
  font-size: 14px; font-weight: 750; margin: 0 0 6px; color: var(--dl-ink);
}
.legal-konflik p { font-size: 13.5px; line-height: 1.65; color: var(--dl-body); margin: 0; }
.legal-konflik strong { color: var(--dl-ink); font-weight: 700; }

.legal-toc {
  background: var(--dl-tint); border: 1px solid #dceafd;
  border-radius: 14px; padding: 18px 20px; margin-bottom: 34px;
}
.legal-toc-judul {
  display: block; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--dl-blue-ink); margin-bottom: 11px;
}
.legal-toc ol {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 7px;
}
@media (min-width: 620px) { .legal-toc ol { grid-template-columns: 1fr 1fr; gap: 7px 22px; } }
.legal-toc a {
  font-size: 13.5px; color: var(--dl-body); text-decoration: none;
  line-height: 1.5;
}
.legal-toc a:hover { color: var(--dl-blue); text-decoration: underline; }

.legal-isi section { margin-bottom: 30px; scroll-margin-top: 84px; }
.legal-isi h2 {
  font-size: 17.5px; font-weight: 740; letter-spacing: -.018em;
  margin: 0 0 10px; color: var(--dl-ink); line-height: 1.35;
}
.legal-isi p { font-size: 15px; line-height: 1.78; color: var(--dl-body); margin: 0; }
.legal-isi strong { color: var(--dl-ink); font-weight: 700; }
.legal-isi ul { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.legal-isi li {
  font-size: 14.5px; line-height: 1.7; color: var(--dl-body);
  padding-left: 17px; position: relative;
}
.legal-isi li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--dl-blue);
}

.legal-tautan {
  margin: 38px 0 0; padding-top: 22px; border-top: 1px solid var(--dl-line);
  font-size: 14px; color: var(--dl-muted);
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
}
.legal-tautan a { color: var(--dl-blue); text-decoration: none; }
.legal-tautan a:hover { text-decoration: underline; }

.doc-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.doc-brand { display: flex; align-items: center; gap: 9px; }
.doc-brand .brand-mark { width: 24px; height: 24px; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; background: var(--dl-success-tint); color: #166534;
}
.doc-h { font-size: 18px; font-weight: 750; margin: 0 0 16px; letter-spacing: -.015em; }
.doc-fields { display: grid; grid-template-columns: 1fr 1fr auto; gap: 12px; align-items: start; margin-bottom: 16px; }
.field { background: var(--dl-tint-2); border: 1px solid var(--dl-line); border-radius: 9px; padding: 9px 11px; min-width: 0; }
.field-k { display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dl-muted); }
.field-v { display: block; font-size: 12px; font-weight: 650; font-family: ui-monospace, Menlo, monospace; margin-top: 3px; word-break: break-all; }
.qr { width: 66px; height: 66px; flex-shrink: 0; border-radius: 8px; }
.doc-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 13px 0; border-top: 1px solid var(--dl-line); }
.doc-dates div span { display: block; font-size: 10px; color: var(--dl-muted); }
.doc-dates div strong { display: block; font-size: 12px; font-weight: 600; margin-top: 2px; }
.doc-sign-cap { font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--dl-muted); padding-top: 13px; border-top: 1px solid var(--dl-line); }
.doc-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 11px; }
.sign-box { border: 1px solid var(--dl-line); border-radius: 9px; padding: 11px; text-align: center; }
.sign-mark { font-family: "Lora", Georgia, serif; font-style: italic; font-size: 20px; color: var(--dl-blue-ink); line-height: 1.3; }
.sign-name { display: block; font-size: 12px; font-weight: 700; margin-top: 6px; }
.sign-time { display: block; font-size: 10px; color: var(--dl-muted); }

/* ── Bagian umum ────────────────────────────────────────────── */
.sec { padding: 68px 0; }
.sec.tinted { background: var(--dl-tint-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 7px; margin: 0 0 12px;
  padding: 5px 12px; border-radius: 999px; background: var(--dl-tint); color: var(--dl-blue-ink);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
}
.sec-title { font-size: clamp(25px, 3.6vw, 34px); font-weight: 800; letter-spacing: -.025em; line-height: 1.22; margin: 0; text-wrap: balance; }
.sec-lead { font-size: 15.5px; color: var(--dl-body); line-height: 1.7; margin: 14px 0 0; max-width: 62ch; }

/* ── Langkah ────────────────────────────────────────────────── */
.steps { display: grid; grid-template-columns: 1fr; gap: 28px; margin-top: 44px; }
@media (min-width: 620px) { .steps { grid-template-columns: repeat(2,1fr); } }
@media (min-width: 1000px) { .steps { grid-template-columns: repeat(4,1fr); } }
.step { text-align: center; }
.step-ic {
  width: 62px; height: 62px; border-radius: 17px; background: var(--dl-tint); color: var(--dl-blue);
  display: grid; place-items: center; margin: 0 auto 16px;
}
.step-ic svg { width: 26px; height: 26px; }
.step h3 { font-size: 16px; font-weight: 700; margin: 0 0 7px; letter-spacing: -.01em; }
.step p { font-size: 14px; color: var(--dl-body); margin: 0; line-height: 1.6; }

/* ── Keamanan ───────────────────────────────────────────────── */
.sec-split { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
@media (min-width: 980px) { .sec-split { grid-template-columns: 1fr 1fr; gap: 56px; } }
.chk { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 13px; }
.chk li { display: flex; align-items: flex-start; gap: 11px; font-size: 14.5px; color: var(--dl-body); line-height: 1.55; }

/* ── Kotak verifikasi ───────────────────────────────────────── */
.verify-box {
  background: var(--dl-blue); color: #fff; border-radius: 16px; padding: 34px;
  display: flex; flex-wrap: wrap; gap: 20px; align-items: center; justify-content: space-between;
}
.verify-box h2 { font-size: 22px; font-weight: 750; margin: 0 0 5px; letter-spacing: -.015em; }
.verify-box p { margin: 0; color: rgba(255,255,255,.82); font-size: 14px; }
.verify-form { display: flex; gap: 10px; flex: 1; min-width: min(100%, 320px); }
.verify-form input {
  flex: 1; min-width: 0; border: none; border-radius: 10px; padding: 12px 15px;
  font-size: 14px; font-family: ui-monospace, Menlo, monospace; text-transform: uppercase;
}
.verify-form input:focus { outline: 3px solid rgba(255,255,255,.4); }
.btn-white { background: #fff; color: var(--dl-blue-dark); }
.btn-white:hover { background: var(--dl-tint); }

/* ── Hukum ──────────────────────────────────────────────────── */
.legal-card { background: #fff; border: 1px solid var(--dl-line); border-radius: 14px; padding: 28px; }
.legal-card p { font-size: 15px; color: var(--dl-body); line-height: 1.75; margin: 0; }

/* ── FAQ ────────────────────────────────────────────────────── */
.faq { display: grid; gap: 12px; margin-top: 36px; }
.faq details { background: #fff; border: 1px solid var(--dl-line); border-radius: 12px; padding: 17px 20px; }
.faq summary { font-size: 15px; font-weight: 650; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 21px; color: var(--dl-muted); line-height: 1; flex-shrink: 0; }
.faq details[open] summary::after { content: "\2212"; }
.faq p { font-size: 14.5px; color: var(--dl-body); line-height: 1.7; margin: 13px 0 0; }

/* ── CTA & footer ───────────────────────────────────────────── */
.cta { background: var(--dl-ink); color: #fff; border-radius: 16px; padding: 52px 32px; text-align: center; }
.cta h2 { font-size: clamp(24px, 3.2vw, 32px); font-weight: 800; margin: 0 0 12px; letter-spacing: -.02em; text-wrap: balance; }
.cta p { color: rgba(255,255,255,.75); margin: 0 auto 26px; max-width: 50ch; font-size: 15px; }
footer { background: var(--dl-ink); color: rgba(255,255,255,.65); padding: 34px 0; margin-top: 68px; }
.foot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 18px; align-items: center; font-size: 13.5px; }
.foot a { color: #fff; }
.foot a:hover { color: var(--dl-tint); }
/* align-items:center + tinggi baris yang sama dgn <summary> pemilih
   bahasa: ikon globe membuat barisnya sepersekian piksel lebih tinggi
   dari teks polos, cukup untuk terlihat tidak sejajar. */
.foot-links { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; row-gap: 10px; }
/* Tinggi baris TETAP untuk ketiganya, termasuk <details> itu sendiri.
   Yang bikin tidak sejajar bukan <summary> melainkan PEMBUNGKUSNYA:
   <details> mewarisi line-height 1.6 (21.6px) sementara isinya 20px,
   jadi kotaknya lebih tinggi dan flex memusatkan kotak yang lebih
   tinggi itu -- summary di dalamnya ikut naik 1px. */
.foot-links > a, .dl-lang, .dl-lang > summary {
  line-height: 20px;
}
.foot-links > a, .dl-lang > summary { display: inline-flex; align-items: center; }

/* ── Pemilih bahasa di footer ───────────────────────────────────
 * Teks sejajar tautan lain, bukan tombol -- pola yang sama dgn footer
 * profil publik resmi.id. Tetap dropdown supaya muat kalau bahasanya
 * bertambah. */
/* display:flex membuat tinggi <details> persis setinggi <summary>.
   Sebagai blok biasa ia tetap 2px lebih tinggi meski line-height-nya
   disamakan, dan flex induk memusatkan kotak yang lebih tinggi itu --
   summary di dalamnya duduk 1px di atas tautan di sebelahnya. */
.dl-lang { position: relative; display: flex; }
.dl-lang > summary {
  gap: 7px; list-style: none; cursor: pointer; color: #fff;
  transition: color .16s;
}
.dl-lang > summary::-webkit-details-marker { display: none; }
.dl-lang > summary:hover, .dl-lang[open] > summary { color: var(--dl-tint); }
.dl-lang > summary:focus-visible { outline: 2px solid var(--dl-tint); outline-offset: 3px; border-radius: 4px; }
.dl-lang > summary svg { width: 14px; height: 14px; flex-shrink: 0; }
.dl-lang-chev { transition: transform .18s ease; }
.dl-lang[open] .dl-lang-chev { transform: rotate(180deg); }

/* Membuka KE ATAS: footer ada di ujung halaman. Dijangkarkan ke tepi
   KANAN -- di layar sempit pemilih ini item terakhir di barisnya dan
   menu yang tumbuh ke kanan akan menjorok keluar layar. */
.dl-lang-menu {
  position: absolute; right: 0; bottom: calc(100% + 10px); z-index: 40;
  min-width: 172px; max-width: calc(100vw - 24px);
  max-height: min(50vh, 320px); overflow-y: auto;
  /* Panel TERANG di atas footer gelap: menu gelap-di-atas-gelap
     kehilangan batasnya dan terbaca menyatu dgn footernya. */
  background: #fff; border: 1px solid var(--dl-line);
  border-radius: 12px; padding: 6px;
  box-shadow: 0 12px 28px -10px rgba(15, 23, 42, .35);
}
.dl-lang-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  color: var(--dl-body); white-space: nowrap;
}
.dl-lang-item svg { width: 14px; height: 14px; flex-shrink: 0; }
/* Warna dipaksa di sini: .foot a mewarnai SEMUA tautan footer putih,
   yang di atas panel terang jadi tidak terbaca. */
.foot .dl-lang-item { color: var(--dl-body); }
.foot .dl-lang-item:hover { background: var(--dl-tint-2, #f1f5f9); color: var(--dl-ink); }
.foot .dl-lang-item[aria-current="true"] { background: var(--dl-tint, #eff6ff); color: var(--dl-blue); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }