/* Rakitronik: kerangka bersama (header, footer) dan komponen halaman konten.
   Warna dasar dari /static/css/token.css; alias halaman (--h-*). Hanya mode terang (keputusan pemilik 2026-11-03). */
:root {
  --h-latar: var(--terang); --h-kartu: var(--kartu); --h-garis: var(--garis); --h-garis-kuat: #CFCCC3;
  --h-teks: var(--teks); --h-teks-2: var(--teks-2);
  --h-tautan: var(--tembaga-gelap); --h-input: #FFFFFF; --h-lembut: #ECEAE3;
  --h-aman: var(--aman); --h-aman-bg: #E3F0E8;
  --h-tinjau: var(--tinjau); --h-tinjau-bg: #FAEADD;
  --h-galat: var(--galat); --h-galat-bg: #FCEBE9;
  --h-fokus: var(--tembaga-gelap);
  --lebar: 1040px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--h-latar); color: var(--h-teks);
  font: 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
main { flex: 1 0 auto; width: 100%; max-width: var(--lebar); margin: 0 auto; padding: 40px 24px 72px; }
body.penuh main { max-width: none; padding: 0; }
img { max-width: 100%; }
a { color: var(--h-tautan); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--h-fokus); outline-offset: 2px; }
.lompat { position: absolute; left: -9999px; top: 8px; z-index: 10; background: var(--tembaga); color: var(--tembaga-teks); padding: 10px 14px; border-radius: var(--r-kecil); }
.lompat:focus { left: 8px; }
.mono, code { font-family: var(--mono); }

/* ---------- header ---------- */
.atas { background: var(--h-latar); border-bottom: 1px solid var(--h-garis); }
.atas-dalam { max-width: 1440px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 16px 20px; flex-wrap: wrap; }
.merek { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 19px; letter-spacing: -0.02em; color: var(--h-teks); text-decoration: none; min-height: 44px; }
.logo { width: 24px; height: 24px; border-radius: 6px; background: var(--soldermask); position: relative; flex: none; box-shadow: inset 0 0 0 1.5px var(--soldermask-tepi); }
.logo::after { content: ""; position: absolute; left: 6px; top: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--tembaga); }
.menu { display: flex; gap: 2px; padding: 4px; border: 1px solid var(--h-garis); border-radius: var(--r); background: var(--h-kartu); margin-right: auto; }
.menu a { color: var(--h-teks-2); text-decoration: none; font-size: 14.5px; font-weight: 500; padding: 0 14px; min-height: 36px; display: inline-flex; align-items: center; border-radius: var(--r-kecil); white-space: nowrap; }
.menu a:hover { background: var(--h-lembut); color: var(--h-teks); }
.aksi-atas { display: flex; align-items: center; gap: 10px; }
.cek { display: flex; gap: 6px; margin: 0; }
.cek input { width: 150px; margin: 0; min-height: 44px; }
.cek button { margin: 0; }
.nav-akun { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: var(--r); white-space: nowrap; font-weight: 600; font-size: 15px; text-decoration: none;
  color: var(--h-teks); background: var(--h-kartu); border: 1px solid var(--h-garis-kuat); }
.nav-akun:hover { border-color: var(--h-teks-2); }

/* ---------- footer ---------- */
.kaki { background: var(--gelap); color: var(--teks-terang-2); border-top: 1px solid var(--gelap-3); font-size: 14px; }
.kaki-dalam { max-width: 1240px; margin: 0 auto; padding: 36px 28px 44px; display: flex; gap: 24px 48px; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; }
.kaki .merek { color: var(--teks-terang); }
.kaki-merek p { margin: 6px 0 0; max-width: 36ch; }
.kaki-tautan { display: flex; flex-wrap: wrap; gap: 0 4px; }
.kaki-tautan a { color: var(--teks-terang-2); text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 10px; }
.kaki-tautan a:hover { color: #FFFFFF; }
.cek-kaki { flex-direction: column; gap: 6px; }
.cek-kaki label { margin: 0; font-weight: 600; color: var(--teks-terang); font-size: 14px; }
.cek-kaki div { display: flex; gap: 6px; }
.kaki .cek input { background: var(--gelap-2); border-color: var(--garis-gelap); color: var(--teks-terang); }
.kaki .cek input::placeholder { color: var(--teks-terang-3); }
.kaki .cek button { background: var(--gelap-3); color: var(--teks-terang); border-color: var(--garis-gelap); }

/* ---------- tipografi ---------- */
h1 { font-size: 40px; line-height: 1.08; letter-spacing: -0.025em; font-weight: 700; margin: 0 0 14px; }
h2 { font-size: 24px; line-height: 1.2; letter-spacing: -0.015em; font-weight: 700; margin: 36px 0 12px; }
h3 { font-size: 18px; line-height: 1.3; letter-spacing: -0.01em; font-weight: 700; margin: 0 0 8px; }
.kartu > h2:first-child, .kartu > h3:first-child { margin-top: 0; }
p { margin: 0 0 12px; }
.hero { margin-bottom: 8px; }
.hero h1 { max-width: 20ch; }
.hero p { color: var(--h-teks-2); max-width: 62ch; font-size: 17px; }
.halus, small, label small { color: var(--h-teks-2); }
small, label small, .halus { display: block; font-weight: 400; font-size: 14px; }
p.halus { font-size: 14.5px; }
.kembali { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; font-weight: 600; font-size: 15px; margin-bottom: 4px; }

/* ---------- kartu ---------- */
.kartu { background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); padding: 24px; margin: 20px 0; min-width: 0; }
.kartu.info { background: var(--h-lembut); border-color: transparent; }
.kartu.awas { background: var(--h-tinjau-bg); border-color: transparent; }
.kartu.kecil { font-size: 15px; } .kartu.kecil p { margin: 4px 0; }
.kartu > :last-child { margin-bottom: 0; }
ul.awas { background: var(--h-tinjau-bg); padding: 12px 16px 12px 34px; border-radius: var(--r); margin: 12px 0; }

/* ---------- form ---------- */
label { display: block; margin: 16px 0; font-weight: 600; font-size: 15px; }
input, select, textarea, button { font: inherit; color: inherit; }
input:where(:not([type=checkbox], [type=radio], [type=hidden])), select, textarea {
  display: block; width: 100%; margin-top: 6px; min-height: 44px; padding: 10px 12px;
  border: 1px solid var(--h-garis-kuat); border-radius: var(--r-kecil); background: var(--h-input); color: var(--h-teks); font-size: 16px; font-weight: 400; }
textarea { line-height: 1.5; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--h-teks-2); opacity: .75; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--h-fokus); outline-offset: 0; border-color: transparent; }
input[type=file] { padding: 8px; cursor: pointer; }
input[type=file]::file-selector-button { font: inherit; font-weight: 600; font-size: 14px; margin-right: 12px; padding: 8px 14px; border-radius: var(--r-kecil); border: 1px solid var(--h-garis-kuat); background: var(--h-lembut); color: var(--h-teks); cursor: pointer; }
input[type=checkbox], input[type=radio] { accent-color: var(--tembaga-gelap); width: 20px; height: 20px; flex: none; }
.cekbox { display: flex; align-items: center; gap: 10px; font-weight: 500; min-height: 44px; cursor: pointer; } .cekbox input { margin: 0; }
fieldset { border: 0; padding: 0; margin: 16px 0; min-width: 0; }
legend { font-weight: 600; padding: 0; margin-bottom: 6px; font-size: 15px; }
details > summary { cursor: pointer; color: var(--h-tautan); font-weight: 600; min-height: 44px; display: flex; align-items: center; gap: 8px; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); transition: transform .15s; flex: none; margin-right: 2px; }
details[open] > summary::before { transform: rotate(45deg); }
details.rinci { margin: 4px 0; border-top: 1px solid var(--h-garis); }
details.rinci[open] { padding-bottom: 12px; }

/* tombol */
button, .tombol { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--h-garis-kuat); border-radius: var(--r); background: var(--h-kartu); color: var(--h-teks);
  font-weight: 600; font-size: 15px; cursor: pointer; text-decoration: none; line-height: 1.2; }
button:hover, .tombol:hover { border-color: var(--h-teks-2); }
button.utama, .tombol.utama { background: var(--tembaga); color: var(--tembaga-teks); border-color: var(--tembaga); margin: 8px 0; padding: 0 22px; font-size: 16px; min-height: 48px; }
button.utama:hover, .tombol.utama:hover { background: #F2A672; border-color: #F2A672; }
button.lebar { width: 100%; }

/* grid */
.baris3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
.dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 20px; }
.dua > .kartu { margin: 10px 0; }
.dua:has(> .kartu) { gap: 0 20px; align-items: start; }

/* ---------- tabel ---------- */
.tabel-gulir { overflow-x: auto; -webkit-overflow-scrolling: touch; background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); margin: 12px 0; }
.tabel-gulir table { margin: 0; }
.tabel-gulir th:first-child, .tabel-gulir td:first-child { padding-left: 18px; }
.tabel-gulir th:last-child, .tabel-gulir td:last-child { padding-right: 18px; }
table { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; font-size: 15px; }
th, td { text-align: left; padding: 12px 10px; border-bottom: 1px solid var(--h-garis); vertical-align: top; }
thead th { font-size: 13px; font-weight: 600; color: var(--h-teks-2); letter-spacing: .01em; white-space: nowrap; }
tbody tr:last-child td, tbody tr:last-child th, table > tr:last-child td { border-bottom: 0; }
td:last-child { text-align: right; white-space: nowrap; }
td small { display: block; font-size: 13px; }
tr.total td { font-weight: 700; border-top: 1px solid var(--h-teks); border-bottom: 0; }
details.rinci table, .kartu table { font-size: 14.5px; }
details.rinci > table { background: var(--h-kartu); border-radius: var(--r); }
td.kosong { color: var(--h-teks-2); text-align: left; white-space: normal; }
td.plus { color: var(--h-aman); font-weight: 700; } td.minus { color: var(--h-teks-2); }

/* ---------- status, lencana ---------- */
.galat { color: var(--h-galat); font-weight: 600; background: var(--h-galat-bg); padding: 10px 14px; border-radius: var(--r-kecil); }
.galat-kecil { color: var(--h-galat); font-weight: 600; }
.ok { color: var(--h-aman); font-weight: 600; background: var(--h-aman-bg); padding: 10px 14px; border-radius: var(--r-kecil); }
.status { font-size: 22px; font-weight: 700; letter-spacing: -0.01em; color: var(--h-teks); margin: 0 0 6px; }
.badge { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--r-kapsul); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; vertical-align: 1px; line-height: 1.5; }
.badge.aman { color: var(--h-aman); background: var(--h-aman-bg); }
.badge.tinjau { color: var(--h-tinjau); background: var(--h-tinjau-bg); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.filter a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: var(--r-kapsul); border: 1px solid var(--h-garis-kuat); text-decoration: none; font-size: 14px; font-weight: 500; color: var(--h-teks); background: var(--h-kartu); }
.filter a:hover { border-color: var(--h-teks-2); }
.filter a.aktif { background: var(--h-teks); color: var(--h-latar); border-color: var(--h-teks); }
.subnav { display: flex; flex-wrap: wrap; gap: 4px 6px; margin: 0 0 8px; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: var(--r-kecil); text-decoration: none; font-weight: 600; font-size: 14.5px; color: var(--h-teks-2); }
.subnav a:hover { background: var(--h-lembut); color: var(--h-teks); }
.subnav a.aktif { background: var(--h-kartu); color: var(--h-teks); box-shadow: inset 0 0 0 1px var(--h-garis); }

/* riwayat (linimasa) */
ol.riwayat { list-style: none; padding: 0; margin: 12px 0; }
ol.riwayat li { position: relative; padding: 0 0 14px 26px; }
ol.riwayat li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--soldermask); }
ol.riwayat li:not(:last-child)::after { content: ""; position: absolute; left: 8px; top: 20px; bottom: 2px; width: 2px; background: var(--h-garis); }
.riwayat span { display: block; color: var(--h-teks-2); font-size: 13.5px; font-variant-numeric: tabular-nums; }

.pre { white-space: pre-wrap; }
.putus { overflow-wrap: anywhere; }
ul.kolom { columns: 2; font-size: 14px; }
textarea.kode { font: 13px/1.5 var(--mono); }
code { font-size: .875em; overflow-wrap: anywhere; background: var(--h-lembut); padding: 1px 5px; border-radius: 5px; }
.aksi { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.aksi a { min-height: 44px; display: inline-flex; align-items: center; }

/* ---------- unggah ---------- */
.unggah-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.unggah-grid .kartu { margin: 0; }
.daftar-cek { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.daftar-cek li { display: grid; grid-template-columns: 20px 1fr; gap: 10px; color: var(--h-teks-2); font-size: 15px; }
.daftar-cek li::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--soldermask); margin-top: 7px; }
.daftar-cek strong { color: var(--h-teks); display: block; }

/* ---------- kutipan ---------- */
.ringkas-atas { color: var(--h-teks-2); font-size: 15.5px; }
table.pilihan th, table.pilihan td { text-align: left; white-space: normal; }
table.pilihan tbody th { font-size: 15px; min-width: 110px; }
.pilih { margin: 0; font-weight: 400; cursor: pointer; display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: var(--r); border: 1px solid var(--h-garis); min-width: 150px; }
.pilih:hover { border-color: var(--h-teks-2); }
.pilih:has(input:checked) { border-color: var(--tembaga-gelap); box-shadow: inset 0 0 0 1px var(--tembaga-gelap); }
.pilih { display: grid; grid-template-columns: 20px 1fr; column-gap: 10px; row-gap: 0; }
.pilih br { display: none; } .pilih strong { white-space: nowrap; } .pilih small { grid-column: 2; }
.pilih input { margin: 2px 0 0; }
.pilih strong { font-size: 17px; letter-spacing: -0.01em; }
ul.ganti { padding-left: 20px; } ul.ganti li { margin: 8px 0; } ul.ganti .lama { text-decoration: line-through; color: var(--h-teks-2); }

/* ---------- optimasi ---------- */
.ringkas p { margin: 6px 0; } .ringkas .angka { font-size: 20px; }
.catatan-ai { border-top: 1px solid var(--h-garis-kuat); margin-top: 14px; padding-top: 12px; color: var(--h-teks-2); font-size: 15px; }
.saran { background: var(--h-kartu); border: 1px solid var(--h-garis); border-radius: var(--r-besar); padding: 18px 20px; margin: 14px 0; }
.saran:has(.saran-pilih input:checked) { border-color: var(--h-aman); }
.saran-pilih { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 12px; cursor: pointer; min-height: 44px; }
.saran-pilih input { margin: 0; }
.saran-pilih .hemat { margin-left: auto; color: var(--h-teks-2); font-weight: 500; font-size: 14px; }
.saran-ganti { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: start; background: var(--h-latar); border-radius: var(--r); padding: 12px 14px; }
.saran-ganti > div:not(.panah) { min-width: 0; overflow-wrap: anywhere; }
.saran-ganti small { display: block; text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px; font-weight: 600; }
.saran-ganti strong, .saran-ganti span { display: block; }
.saran-ganti span { color: var(--h-teks-2); font-size: 14px; }
.saran-ganti .lama strong { text-decoration: line-through; text-decoration-color: var(--h-teks-2); }
.saran-ganti .panah { color: var(--h-teks-2); font-size: 20px; padding-top: 14px; }
.alasan { margin: 12px 0 0; font-size: 15px; }
.wajib-cek { margin-top: 12px; padding: 10px 14px; border-radius: var(--r-kecil); background: var(--h-tinjau-bg); font-size: 14.5px; }
.wajib-cek ul { margin: 4px 0 0; padding-left: 20px; }
ul.dilewati { font-size: 14.5px; } ul.dilewati li { margin: 8px 0; }

/* ---------- pesanan, bayar ---------- */
.pesanan-kepala { display: flex; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; align-items: flex-end; }
.harga-besar { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.bayar .qr { max-width: 280px; margin: 12px 0; background: #FFFFFF; padding: 12px; border-radius: var(--r); border: 1px solid var(--garis); }
.bayar .qr svg, .bayar .qr img { display: block; width: 100%; height: auto; }
.bayar .va strong { display: block; font-family: var(--mono); font-size: 24px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.metode { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; } .metode button { margin: 0; }

/* ---------- masuk, akun ---------- */
.masuk { max-width: 460px; margin: 16px auto 0; }
.masuk .halus { display: block; font-size: 16px; }
input.otp { font: 600 26px/1.2 var(--mono) !important; letter-spacing: .35em; text-align: center; }
.kode-otp { font: 700 22px var(--mono); letter-spacing: .15em; }
.akun-ringkas { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.akun-ringkas strong { display: block; font-size: 18px; }
.akun-ringkas .saldo { text-align: right; } .akun-ringkas .saldo strong { font-size: 40px; line-height: 1.05; letter-spacing: -0.02em; color: var(--h-teks); }
form.keluar { margin: 32px 0 0; }
.cari { display: flex; gap: 8px; max-width: 460px; margin: 0 0 12px; } .cari input { margin: 0; }
table.pengguna td:first-child { min-width: 180px; }
table.pengguna td:last-child { min-width: 100px; }
.ubah-kredit form { text-align: left; min-width: 220px; } .ubah-kredit label { margin: 8px 0; }
.ubah-kredit summary { justify-content: flex-end; }

/* ---------- admin ---------- */
.admin-kepala { display: flex; justify-content: space-between; align-items: flex-end; gap: 8px 24px; flex-wrap: wrap; }
.admin-kepala h1 { margin-bottom: 6px; }
ol.langkah { padding-left: 22px; } ol.langkah li { margin: 6px 0; }
.angka-besar td:last-child { font-variant-numeric: tabular-nums; }

/* ---------- ponsel ---------- */
@media (max-width: 900px) {
  .menu { order: 3; width: 100%; margin: 0; overflow-x: auto; scrollbar-width: none; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { min-height: 40px; }
  .atas-dalam { justify-content: space-between; }
  .unggah-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  main { padding: 24px 16px 56px; }
  .atas-dalam { padding: 10px 16px; gap: 10px; }
  .atas .cek { display: none; }
  .kaki-dalam { padding: 28px 16px 36px; }
  .cek-kaki, .cek-kaki div { width: 100%; } .cek-kaki input { width: auto; flex: 1; }
  h1 { font-size: 30px; }
  h2 { font-size: 21px; margin-top: 28px; }
  .kartu { padding: 18px 16px; border-radius: var(--r); }
  .baris3, .dua { grid-template-columns: 1fr; }
  ul.kolom { columns: 1; }
  .saran { padding: 14px; }
  .saran-ganti { grid-template-columns: 1fr; }
  .saran-ganti .panah { padding: 0; transform: rotate(90deg); width: 1em; }
  .akun-ringkas .saldo { text-align: left; }
  .tabel-gulir { border-radius: var(--r); }
  table.pilihan tbody th { min-width: 96px; font-size: 14px; }
  .pilih { min-width: 150px; padding: 10px; }
  .nav-akun { padding: 0 12px; font-size: 14px; }
  .menu { justify-content: space-between; }
  .menu a { padding: 0 10px; font-size: 14px; }
}
@media (max-width: 420px) { .menu a:nth-child(n+4) { display: none; } }
.tombol-mulai { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: var(--r); background: var(--tembaga); color: var(--tembaga-teks); font-weight: 600; font-size: 15px; text-decoration: none; white-space: nowrap; }
.tombol-mulai:hover { background: #F2A672; }
@media (max-width: 640px) { .tombol-mulai { padding: 0 12px; font-size: 14px; } }

/* Umpan balik aksi (UmpanHost): melayang di bawah layar, tidak menggeser isi halaman. */
.umpan { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 1000; display: flex; align-items: center; gap: 12px;
  max-width: min(560px, calc(100vw - 32px)); padding: 12px 14px 12px 16px; border-radius: var(--r); font-weight: 600;
  border: 1px solid var(--h-garis-kuat); box-shadow: 0 6px 24px rgba(0,0,0,.18); }
.umpan-ok { background: var(--h-aman-bg); color: var(--h-aman); }
.umpan-galat { background: var(--h-galat-bg); color: var(--h-galat); }
.umpan-tutup { min-width: 32px; min-height: 32px; padding: 0; border: 0; background: transparent; color: inherit; font-size: 1.25rem; line-height: 1; cursor: pointer; }

/* Brief 13: kartu tidak bertumpuk (pemisah = garis tipis + jarak), arah aksi (sekunder kiri, utama kanan). */
.kartu .kartu, .kartu .kartu.info, .kartu .kartu.awas { background: transparent; border: 0; border-top: 1px solid var(--h-garis); border-radius: 0; padding: 16px 0 0; margin: 16px 0 0; }
.kartu .info-revisi { background: transparent; border-radius: 0; padding: 12px 0 0; border-top: 1px solid var(--h-garis); margin: 12px 0; }
.baris-aksi { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
.baris-aksi > * { margin: 0; }
.baris-aksi > :only-child, .baris-aksi > .utama:last-child { margin-left: auto; }
@media (max-width: 640px) {
  .baris-aksi { flex-direction: column; align-items: stretch; }
  .baris-aksi > *, .baris-aksi > .utama:last-child { width: 100%; margin-left: 0; }
}

.nav-keluar { min-height: 44px; padding: 0 12px; background: transparent; border-color: transparent; color: var(--h-teks-2); font-size: 14px; }
.nav-keluar:hover { color: var(--h-teks); text-decoration: underline; }
@media (max-width: 640px) { .nav-keluar { padding: 0 8px; } }

/* Masuk dengan Google dan verifikasi WhatsApp (brief 15) */
.tombol-google { background: #fff; color: #1f1f1f; border-color: #dadce0; width: 100%; }
.tombol-google:hover { background: #f8f9fa; border-color: #c6c9cd; }
.kartu .pisah { text-align: center; margin: 14px 0 0; }
.kode-wa { display: inline-block; max-width: 100%; font-family: var(--mono); font-size: 22px; letter-spacing: .06em; padding: 8px 14px; border: 1px dashed var(--h-garis); border-radius: var(--r-besar); overflow-wrap: anywhere; }
.wa-kartu .wa-dev { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wa-kartu .wa-dev p { flex-basis: 100%; margin: 0; }

/* ---------- merek Rakitronik (wordmark inline, frontend/src/components/Logo.astro) ---------- */
:root { --logo-tembaga: #B5652A; }
.merek .logo-wordmark { display: block; height: 24px; width: auto; }
.kaki { --logo-tembaga: #E08A48; }
.kaki-legal { max-width: 1240px; margin: 0 auto; padding: 0 28px 28px; font-size: 13px; color: var(--teks-terang-3); }

/* Buku alamat (/akun) */
.alamat-daftar { display: grid; gap: 12px; margin-bottom: 12px; }
.alamat-kartu { margin: 0; }
.alamat-kartu.utama { border-color: var(--k-hijau, #1F6B45); }
.alamat-kepala { display: flex; align-items: center; gap: 8px; }
.alamat-utama { font-size: 12px; font-weight: 800; color: #1F6B45; background: #E7F2EC; padding: 2px 9px; border-radius: 999px; }
.alamat-penerima { margin: 4px 0 2px; font-weight: 600; }
.alamat-teks { margin: 0 0 8px; overflow-wrap: anywhere; }
.alamat-aksi { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.belum-bayar { color: #A04E1B; }