/* ==========================================================================
   qr.gasink.id — gaya utama
   ========================================================================== */

:root {
  --ink:        #0E1B2E;
  --teks:       #17233A;
  --redup:      #64748B;
  --permukaan:  #FFFFFF;
  --permukaan2: #F6F8FC;
  --permukaan3: #EDF1F8;
  --garis:      #E1E8F2;
  --garis-kuat: #CBD6E6;
  --aksen:      #2B5CE6;
  --aksen-hover:#1E4BD0;
  --aksen-lembut:#EEF3FF;
  --bahaya:     #B42318;
  --bahaya-bg:  #FEF3F2;
  --awas:       #B54708;
  --awas-bg:    #FFFAEB;
  --sukses:     #067647;
  --sukses-bg:  #ECFDF3;

  --r-kecil: 8px;
  --r-sedang: 12px;
  --r-besar: 18px;
  --bayang: 0 1px 2px rgba(16,24,40,.05), 0 4px 16px rgba(16,24,40,.06);
  --bayang-kuat: 0 12px 40px rgba(16,24,40,.12);

  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --lebar: 1180px;
  color-scheme: light;
}

html[data-tema="gelap"] {
  --ink:        #E9EFF9;
  --teks:       #DFE7F3;
  --redup:      #93A2B8;
  --permukaan:  #0F1724;
  --permukaan2: #131D2C;
  --permukaan3: #1B2739;
  --garis:      #24334A;
  --garis-kuat: #33455F;
  --aksen:      #7099FF;
  --aksen-hover:#8CACFF;
  --aksen-lembut:#152142;
  --bahaya:     #FF9384;
  --bahaya-bg:  #2A1614;
  --awas:       #FFC46B;
  --awas-bg:    #2A2013;
  --sukses:     #6BDCA0;
  --sukses-bg:  #10241A;
  --bayang: 0 1px 2px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.35);
  --bayang-kuat: 0 12px 40px rgba(0,0,0,.5);
  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 84px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--teks);
  background: var(--permukaan);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { color: var(--ink); line-height: 1.2; margin: 0 0 .5em; letter-spacing: -.02em; }
h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); font-weight: 800; }
h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 750; }
h3 { font-size: 1.08rem; font-weight: 680; }
p { margin: 0 0 1em; }
a { color: var(--aksen); text-decoration: none; }
a:hover { text-decoration: underline; }

code, pre { font-family: var(--font-mono); font-size: .875em; }
code {
  background: var(--permukaan3);
  padding: .12em .4em;
  border-radius: 5px;
  color: var(--ink);
}
pre {
  background: var(--permukaan3);
  border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  padding: 14px 16px;
  overflow-x: auto;
  margin: 0 0 1.4em;
  line-height: 1.55;
}
pre code { background: none; padding: 0; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.lewati {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--aksen); color: #fff; padding: 10px 16px;
  border-radius: 0 0 var(--r-kecil) 0;
}
.lewati:focus { left: 0; }

.wadah { max-width: var(--lebar); margin: 0 auto; padding: 0 24px; }
.wadah-sempit { max-width: 780px; }

/* ── Bilah atas ──────────────────────────────────────────────────────────── */
.bilah {
  position: sticky; top: 0; z-index: 40;
  background: var(--permukaan);   /* cadangan bila color-mix tak didukung */
  border-bottom: 1px solid var(--garis);
}
/* Latar semi-transparan hanya bila peramban mendukung keduanya, supaya
   header tidak pernah tembus dan menabrak isi halaman. */
@supports (backdrop-filter: blur(1px)) and (background: color-mix(in srgb, red 50%, transparent)) {
  .bilah {
    background: color-mix(in srgb, var(--permukaan) 88%, transparent);
    backdrop-filter: saturate(1.6) blur(12px);
  }
}
.bilah-isi { display: flex; align-items: center; gap: 28px; height: 66px; }

.merek { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.merek:hover { text-decoration: none; }
.merek-tanda { width: 27px; height: 27px; color: var(--aksen); display: block; }
.merek-tanda svg { width: 100%; height: 100%; display: block; }
.merek-teks { font-weight: 750; font-size: 1.06rem; letter-spacing: -.02em; }

.navigasi { display: flex; gap: 26px; margin-left: auto; }
.navigasi a {
  color: var(--redup); font-size: .93rem; font-weight: 550;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.navigasi a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--aksen); }

.bilah-aksi { display: flex; align-items: center; gap: 10px; }

.tombol-ikon {
  width: 36px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border: 1px solid var(--garis); border-radius: var(--r-kecil);
  background: var(--permukaan); color: var(--redup); cursor: pointer;
}
.tombol-ikon:hover { color: var(--ink); border-color: var(--garis-kuat); }
.tombol-ikon svg { width: 17px; height: 17px; }
.ikon-gelap { display: none; }
html[data-tema="gelap"] .ikon-terang { display: none; }
html[data-tema="gelap"] .ikon-gelap { display: block; }

/* ── Tombol ──────────────────────────────────────────────────────────────── */
.tombol {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font: inherit; font-size: .93rem; font-weight: 600;
  padding: 10px 18px; border-radius: var(--r-kecil);
  border: 1px solid transparent; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s, transform .06s;
  white-space: nowrap;
}
.tombol:hover { text-decoration: none; }
.tombol:active { transform: translateY(1px); }
.tombol:disabled { opacity: .45; cursor: not-allowed; transform: none; }

.tombol-utama { background: var(--aksen); color: #fff; }
.tombol-utama:not(:disabled):hover { background: var(--aksen-hover); }

.tombol-garis { background: transparent; color: var(--ink); border-color: var(--garis-kuat); }
.tombol-garis:not(:disabled):hover { border-color: var(--aksen); color: var(--aksen); }

.tombol-halus { background: var(--permukaan3); color: var(--ink); }
.tombol-halus:not(:disabled):hover { background: var(--garis); }

.tombol-kecil { padding: 6px 12px; font-size: .85rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.hero { padding: 76px 0 56px; text-align: center; }
.hero-isi { max-width: 800px; }
.kuping {
  display: inline-block; font-size: .78rem; font-weight: 650;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--aksen); background: var(--aksen-lembut);
  padding: 6px 13px; border-radius: 999px; margin: 0 0 20px;
}
.hero h1 em { font-style: normal; color: var(--aksen); }
.hero-sub { font-size: 1.12rem; color: var(--redup); max-width: 620px; margin: 0 auto 30px; }
.hero-tombol { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-tombol .tombol { padding: 13px 26px; font-size: 1rem; }

.hero-poin {
  list-style: none; padding: 0; margin: 40px 0 0;
  display: flex; gap: 28px; justify-content: center; flex-wrap: wrap;
  font-size: .9rem; color: var(--redup);
}
.hero-poin li { display: flex; align-items: baseline; gap: 7px; }
.hero-poin strong { color: var(--ink); font-weight: 620; }
.hero-poin li::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--aksen); flex: none; transform: translateY(-2px);
}

/* ── Bagian umum ─────────────────────────────────────────────────────────── */
.bagian { padding: 68px 0; }
.bagian-abu { background: var(--permukaan2); border-block: 1px solid var(--garis); }
.judul-bagian { text-align: center; margin-bottom: .3em; }
.sub-bagian {
  text-align: center; color: var(--redup);
  max-width: 580px; margin: 0 auto 44px; font-size: 1.02rem;
}

/* ── Generator ───────────────────────────────────────────────────────────── */
.generator { padding-top: 8px; }
.generator-kisi { display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: 24px; align-items: start; }
@media (max-width: 960px) { .generator-kisi { grid-template-columns: 1fr; } }

.panel {
  background: var(--permukaan);
  border: 1px solid var(--garis);
  border-radius: var(--r-besar);
  box-shadow: var(--bayang);
  padding: 22px;
}

/* Tab tipe */
.tab-tipe {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 7px; margin-bottom: 22px;
}
.tab {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 11px 6px; font: inherit; font-size: .74rem; font-weight: 570;
  color: var(--redup); background: var(--permukaan2);
  border: 1px solid transparent; border-radius: var(--r-sedang);
  cursor: pointer; text-align: center; line-height: 1.25;
  transition: background .15s, color .15s, border-color .15s;
}
.tab:hover { background: var(--permukaan3); color: var(--ink); }
.tab.aktif {
  background: var(--aksen-lembut); color: var(--aksen);
  border-color: color-mix(in srgb, var(--aksen) 35%, transparent);
}
.tab-ikon svg { width: 20px; height: 20px; display: block; }

/* Bidang formulir */
.grup-tipe { display: none; border: 0; margin: 0; padding: 0; min-inline-size: 0; }
.grup-tipe.aktif { display: block; }

.kisi-bidang { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.bidang { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.bidang.kolom-setengah { grid-column: span 1; }
@media (max-width: 520px) { .bidang.kolom-setengah { grid-column: 1 / -1; } }

.bidang label {
  font-size: .82rem; font-weight: 600; color: var(--ink);
}
.wajib { color: var(--bahaya); }

.bidang input[type="text"], .bidang input[type="url"], .bidang input[type="email"],
.bidang input[type="tel"], .bidang input[type="number"],
.bidang input[type="datetime-local"], .bidang textarea, .bidang select,
.short-aksi input {
  width: 100%; font: inherit; font-size: .93rem;
  padding: 9px 12px; color: var(--teks);
  background: var(--permukaan); border: 1px solid var(--garis-kuat);
  border-radius: var(--r-kecil); transition: border-color .15s, box-shadow .15s;
}
.bidang textarea { resize: vertical; min-height: 74px; }
.bidang input:focus, .bidang textarea:focus, .bidang select:focus, .short-aksi input:focus {
  outline: none; border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 18%, transparent);
}
.bantuan { font-size: .8rem; color: var(--redup); margin: 0; }

.kotak-centang {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem !important; font-weight: 500 !important; cursor: pointer;
}
.kotak-centang input { width: 16px; height: 16px; accent-color: var(--aksen); margin: 0; }
.kotak-kecil { font-size: .8rem !important; white-space: nowrap; }

/* Warna & preset */
.warna-baris { display: flex; align-items: center; gap: 8px; }
.warna-baris input[type="color"] {
  width: 40px; height: 38px; padding: 2px; flex: none; cursor: pointer;
  border: 1px solid var(--garis-kuat); border-radius: var(--r-kecil);
  background: var(--permukaan);
}
.warna-teks { flex: 1; min-width: 0; font-family: var(--font-mono) !important; font-size: .85rem !important; }

.preset-baris { display: flex; gap: 7px; flex-wrap: wrap; }
.preset {
  display: inline-flex; align-items: center; gap: 7px;
  font: inherit; font-size: .8rem; font-weight: 550;
  padding: 5px 11px 5px 6px; cursor: pointer; color: var(--teks);
  background: var(--permukaan2); border: 1px solid var(--garis);
  border-radius: 999px;
}
.preset:hover { border-color: var(--aksen); color: var(--aksen); }
.preset span {
  width: 18px; height: 18px; border-radius: 50%; flex: none;
  border: 1px solid var(--garis-kuat);
  background: linear-gradient(135deg, var(--a) 0 50%, var(--b) 50% 100%);
}

.logo-baris { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.logo-baris input[type="file"] { font-size: .85rem; color: var(--redup); min-width: 0; flex: 1; }

/* Lipatan */
.lipatan { margin-top: 18px; border-top: 1px solid var(--garis); padding-top: 14px; }
.lipatan summary {
  font-size: .88rem; font-weight: 650; color: var(--ink);
  cursor: pointer; list-style: none; padding: 4px 0 12px;
  display: flex; align-items: center; gap: 7px;
}
.lipatan summary::-webkit-details-marker { display: none; }
.lipatan summary::before {
  content: ""; width: 0; height: 0; flex: none;
  border-left: 5px solid currentColor;
  border-block: 4px solid transparent;
  transition: transform .18s;
}
.lipatan[open] summary::before { transform: rotate(90deg); }

/* ── Pratinjau ───────────────────────────────────────────────────────────── */
.pratinjau-kolom { position: sticky; top: 84px; }
@media (max-width: 960px) { .pratinjau-kolom { position: static; } }

.pratinjau-panggung {
  display: grid; place-items: center; min-height: 260px;
  padding: 20px; margin-bottom: 16px;
  background: var(--permukaan2); border: 1px solid var(--garis);
  border-radius: var(--r-sedang);
  background-image:
    linear-gradient(45deg, var(--permukaan3) 25%, transparent 25%),
    linear-gradient(-45deg, var(--permukaan3) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--permukaan3) 75%),
    linear-gradient(-45deg, transparent 75%, var(--permukaan3) 75%);
  background-size: 16px 16px;
  background-position: 0 0, 0 8px, 8px -8px, -8px 0;
}
.pratinjau-panggung svg { width: 240px; height: 240px; max-width: 100%; display: block; }
.pratinjau-kosong { color: var(--redup); font-size: .9rem; text-align: center; }
.pratinjau-panggung.memuat { opacity: .5; }

.cip-baris { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; }
.cip {
  font-size: .74rem; font-weight: 570; padding: 3px 9px;
  background: var(--permukaan3); color: var(--redup);
  border-radius: 999px; white-space: nowrap;
}
.cip.baik { background: var(--sukses-bg); color: var(--sukses); }
.cip.awas { background: var(--awas-bg); color: var(--awas); }

.peringatan {
  font-size: .84rem; line-height: 1.55; padding: 11px 13px;
  border-radius: var(--r-kecil); margin-bottom: 14px;
  border-left: 3px solid;
}
.peringatan.awas { background: var(--awas-bg); color: var(--awas); border-color: var(--awas); }
.peringatan.bahaya { background: var(--bahaya-bg); color: var(--bahaya); border-color: var(--bahaya); }
.peringatan strong { font-weight: 680; }

.unduh-baris { display: flex; gap: 9px; }
.unduh-baris .tombol { flex: 1; }
.catatan-unduh { font-size: .78rem; color: var(--redup); margin: 10px 0 0; }

/* Short link */
.short-blok { margin-top: 18px; border-top: 1px solid var(--garis); padding-top: 16px; }
.short-judul {
  display: flex; align-items: center; gap: 8px;
  font-size: .88rem; font-weight: 650; color: var(--ink); margin-bottom: 5px;
}
.lencana {
  font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--aksen-lembut); color: var(--aksen);
}
.short-aksi { display: flex; gap: 8px; margin-top: 10px; }
.short-aksi input { flex: 1; min-width: 0; }
.short-hasil {
  margin-top: 10px; padding: 10px 12px; font-size: .85rem;
  background: var(--sukses-bg); color: var(--sukses);
  border-radius: var(--r-kecil); word-break: break-all;
}
.short-hasil.gagal { background: var(--bahaya-bg); color: var(--bahaya); }
.short-hasil a { color: inherit; font-weight: 650; text-decoration: underline; }

/* ── Kartu fitur ─────────────────────────────────────────────────────────── */
.kartu-kisi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px;
}
.kartu {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-besar); padding: 24px;
}
.kartu-ikon {
  width: 40px; height: 40px; display: grid; place-items: center;
  border-radius: 10px; background: var(--aksen-lembut); color: var(--aksen);
  margin-bottom: 14px;
}
.kartu-ikon svg { width: 21px; height: 21px; }
.kartu p { color: var(--redup); font-size: .92rem; margin: 0; }

/* ── Langkah ─────────────────────────────────────────────────────────────── */
.langkah-daftar { list-style: none; padding: 0; margin: 0 0 32px; display: grid; gap: 22px; }
.langkah-daftar li { display: flex; gap: 18px; align-items: flex-start; }
.langkah-no {
  width: 34px; height: 34px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--aksen); color: #fff;
  font-weight: 700; font-size: .93rem;
}
.langkah-daftar p { color: var(--redup); font-size: .95rem; margin: 0; max-width: 68ch; }

.kotak-info {
  background: var(--awas-bg); border-left: 4px solid var(--awas);
  border-radius: var(--r-sedang); padding: 20px 24px;
}
.kotak-info h3 { color: var(--awas); margin-bottom: .4em; }
.kotak-info p { margin: 0; font-size: .93rem; color: var(--teks); }

/* ── API ─────────────────────────────────────────────────────────────────── */
.api-kisi { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: start; }
@media (max-width: 860px) { .api-kisi { grid-template-columns: 1fr; } }
.api-kisi h3 { margin-top: 0; }
.api-kisi h3 + pre { margin-top: 8px; }
.api-kisi > div > h3:not(:first-child) { margin-top: 28px; }

.tabel-api { width: 100%; border-collapse: collapse; font-size: .87rem; margin-bottom: 14px; }
.tabel-api th, .tabel-api td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--garis);
  vertical-align: top;
}
.tabel-api th { font-size: .76rem; text-transform: uppercase; letter-spacing: .06em; color: var(--redup); }
.tabel-api td:first-child { white-space: nowrap; }
.tabel-api td { color: var(--redup); }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.faq { border-bottom: 1px solid var(--garis); padding: 4px 0; }
.faq summary {
  font-weight: 620; color: var(--ink); cursor: pointer;
  padding: 14px 30px 14px 0; position: relative; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 4px; top: 50%;
  transform: translateY(-50%); font-size: 1.3rem; color: var(--redup); font-weight: 400;
}
.faq[open] summary::after { content: "\2212"; }
.faq p { color: var(--redup); font-size: .93rem; margin: 0 0 16px; max-width: 70ch; }

/* ── Kaki ────────────────────────────────────────────────────────────────── */
.kaki { background: var(--permukaan2); border-top: 1px solid var(--garis); padding: 44px 0 32px; }
.kaki-isi { display: grid; grid-template-columns: 1fr auto; gap: 20px 40px; align-items: start; }
.merek-kaki { margin-bottom: 6px; }
.kaki-teks { color: var(--redup); font-size: .9rem; margin: 0; }
.kaki-tautan { display: flex; gap: 22px; flex-wrap: wrap; }
.kaki-tautan a { color: var(--redup); font-size: .9rem; }
.kaki-tautan a:hover { color: var(--ink); }
.kaki-hak {
  grid-column: 1 / -1; margin: 18px 0 0; padding-top: 18px;
  border-top: 1px solid var(--garis); font-size: .8rem; color: var(--redup);
}
@media (max-width: 620px) { .kaki-isi { grid-template-columns: 1fr; } }

/* ── Halaman pesan (404) ─────────────────────────────────────────────────── */
.halaman-pesan { display: grid; place-items: center; min-height: 100vh; padding: 24px; }
.pesan-kotak {
  max-width: 460px; text-align: center;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-besar); padding: 44px 36px; box-shadow: var(--bayang);
}
.pesan-ikon {
  font-size: 2.6rem; font-weight: 800; color: var(--aksen);
  letter-spacing: -.03em; margin-bottom: 10px;
}
.pesan-kotak p { color: var(--redup); font-size: .94rem; }
.pesan-aksi { margin-top: 22px; }

/* ── Admin ───────────────────────────────────────────────────────────────── */
.admin-kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 26px;
}
.ringkas-kisi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px; margin-bottom: 28px;
}
.ringkas {
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-sedang); padding: 18px 20px;
}
.ringkas-angka { font-size: 1.85rem; font-weight: 750; color: var(--ink); line-height: 1.1; }
.ringkas-label {
  font-size: .76rem; text-transform: uppercase; letter-spacing: .07em;
  color: var(--redup); margin-top: 4px;
}

.tabel-data { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabel-data th, .tabel-data td {
  text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--garis);
}
.tabel-data th {
  font-size: .74rem; text-transform: uppercase; letter-spacing: .06em;
  color: var(--redup); background: var(--permukaan2);
}
.tabel-data tbody tr:hover { background: var(--permukaan2); }
.tabel-data .angka { text-align: right; font-variant-numeric: tabular-nums; }
.gulir-x { overflow-x: auto; border: 1px solid var(--garis); border-radius: var(--r-sedang); }

.tujuan-sel {
  max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--redup);
}

.masuk-kotak {
  max-width: 380px; margin: 90px auto;
  background: var(--permukaan); border: 1px solid var(--garis);
  border-radius: var(--r-besar); padding: 34px; box-shadow: var(--bayang);
}
.masuk-kotak h1 { font-size: 1.5rem; margin-bottom: 6px; }
.masuk-kotak .bantuan { margin-bottom: 20px; }
.masuk-galat {
  background: var(--bahaya-bg); color: var(--bahaya);
  padding: 10px 13px; border-radius: var(--r-kecil);
  font-size: .87rem; margin-bottom: 16px;
}

/* ── Halaman batch ───────────────────────────────────────────────────────── */
.nav-aktif { color: var(--ink) !important; border-bottom-color: var(--aksen) !important; }

.peringatan.sukses { background: var(--sukses-bg); color: var(--sukses); border-color: var(--sukses); }

.bagian-batch { padding-top: 44px; }
.batch-kepala { max-width: 720px; margin-bottom: 34px; }
.batch-kepala h1 { font-size: clamp(1.7rem, 3.4vw, 2.4rem); }

.batch-kisi { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 24px; align-items: start; }
@media (max-width: 980px) { .batch-kisi { grid-template-columns: 1fr; } }

.batch-samping { position: sticky; top: 84px; }
@media (max-width: 980px) { .batch-samping { position: static; } }

.batch-langkah { display: flex; gap: 16px; align-items: flex-start; padding: 22px 0; }
.batch-langkah + .batch-langkah { border-top: 1px solid var(--garis); }
.batch-langkah:first-child { padding-top: 4px; }
.batch-nomor {
  width: 28px; height: 28px; flex: none; display: grid; place-items: center;
  border-radius: 50%; background: var(--aksen-lembut); color: var(--aksen);
  font-weight: 700; font-size: .82rem;
}
.batch-isi { flex: 1; min-width: 0; }
.batch-isi h2 { font-size: 1.02rem; font-weight: 680; margin-bottom: 3px; }
.batch-isi > .bantuan { margin-bottom: 14px; }

/* Daftar kolom */
.kolom-info { margin-bottom: 16px; }
.kolom-grup { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.kolom-judul {
  font-size: .7rem; font-weight: 650; text-transform: uppercase; letter-spacing: .07em;
  color: var(--redup); min-width: 62px;
}
.kolom-tag {
  background: var(--permukaan3); color: var(--teks);
  padding: 3px 8px; border-radius: 5px; font-size: .8rem; cursor: help;
}
.kolom-tag.wajib-tag {
  background: var(--aksen-lembut); color: var(--aksen);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--aksen) 30%, transparent);
}

/* Contoh CSV */
.contoh-blok { border: 1px solid var(--garis); border-radius: var(--r-sedang); overflow: hidden; }
.contoh-kepala {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 12px; background: var(--permukaan2); border-bottom: 1px solid var(--garis);
  font-size: .8rem; font-weight: 600; color: var(--redup);
}
.contoh-aksi { display: flex; gap: 6px; }
.contoh-blok pre { margin: 0; border: 0; border-radius: 0; font-size: .8rem; }

/* Area unggah */
.jatuhkan {
  border: 2px dashed var(--garis-kuat); border-radius: var(--r-sedang);
  padding: 26px 20px; text-align: center; cursor: pointer;
  transition: border-color .15s, background .15s;
}
.jatuhkan:hover, .jatuhkan.aktif { border-color: var(--aksen); background: var(--aksen-lembut); }
.jatuhkan-ikon { width: 30px; height: 30px; color: var(--redup); margin-bottom: 8px; }
.jatuhkan.aktif .jatuhkan-ikon { color: var(--aksen); }
.jatuhkan-teks { margin: 0 0 5px; font-size: .92rem; }
.jatuhkan .bantuan { margin: 0; }
.tautan-tombol {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 600;
  color: var(--aksen); cursor: pointer; text-decoration: underline;
}

#csv-teks {
  width: 100%; font-family: var(--font-mono); font-size: .82rem;
  padding: 11px 13px; border: 1px solid var(--garis-kuat);
  border-radius: var(--r-kecil); background: var(--permukaan); color: var(--teks);
  resize: vertical;
}
#csv-teks:focus {
  outline: none; border-color: var(--aksen);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--aksen) 18%, transparent);
}

.pratinjau-csv { margin-top: 16px; }
.pratinjau-judul {
  font-size: .78rem; font-weight: 650; text-transform: uppercase;
  letter-spacing: .06em; color: var(--redup); margin-bottom: 8px;
}
.pratinjau-csv .tabel-data { font-size: .82rem; }
.pratinjau-csv .tujuan-sel { max-width: 190px; }

.pilihan-baris { display: flex; flex-direction: column; gap: 7px; }

/* Panel aksi */
.batch-aksi-panel { text-align: center; }
.ringkas-batch { padding: 6px 0 16px; }
.ringkas-batch .ringkas-angka { font-size: 2.4rem; }
.tombol-lebar { width: 100%; padding: 13px 18px; font-size: .98rem; }
.batch-aksi-panel .peringatan { text-align: left; }
.batch-aksi-panel .catatan-unduh { text-align: left; }
.kotak-info-kecil {
  margin-top: 18px; text-align: left; padding: 14px 16px;
  border-radius: var(--r-kecil);
}
.kotak-info-kecil h3 { font-size: .85rem; margin-bottom: 4px; }
.kotak-info-kecil p { font-size: .84rem; }

/* ── Ponsel & tablet ─────────────────────────────────────────────────────── */

/* Tombol menu hanya muncul di layar sempit. */
.tombol-menu { display: none; }
.tombol-menu .ikon-tutup { display: none; }

/* Item grid berisi konten lebar (blok kode, tabel) akan melebarkan jalurnya
   karena min-width bawaannya "auto". Tanpa baris ini, halaman bisa digeser
   ke samping di ponsel. */
.generator-kisi > *, .batch-kisi > *, .api-kisi > *, .kartu-kisi > *,
.kisi-bidang > *, .ringkas-kisi > *, .kaki-isi > * { min-width: 0; }

@media (max-width: 900px) {
  .bilah-isi { gap: 12px; }
  .tombol-menu { display: grid; }

  /* Navigasi jadi panel yang turun dari bilah atas. */
  .navigasi {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    gap: 0;
    margin: 0;
    padding: 6px 0;
    background: var(--permukaan);
    border-bottom: 1px solid var(--garis);
    box-shadow: var(--bayang);
    display: none;
  }
  .navigasi.terbuka { display: flex; }
  .navigasi a {
    padding: 12px 24px;
    border-bottom: 0;
    border-left: 3px solid transparent;
    font-size: 1rem;
  }
  .navigasi a:hover, .navigasi a:focus-visible {
    background: var(--permukaan2);
    border-bottom: 0;
    border-left-color: var(--aksen);
  }
  .nav-aktif { border-left-color: var(--aksen) !important; }
}

@media (max-width: 640px) {
  body { font-size: 15px; }
  .wadah { padding: 0 16px; }

  .hero { padding: 44px 0 34px; }
  .hero-tombol { flex-direction: column; }
  .hero-tombol .tombol { width: 100%; }
  .hero-poin { gap: 12px; flex-direction: column; align-items: flex-start; text-align: left; }
  .hero-sub { font-size: 1rem; }

  .bagian { padding: 44px 0; }
  .sub-bagian { margin-bottom: 30px; }

  .panel { padding: 16px; border-radius: 14px; }
  .tab-tipe { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
  .tab { padding: 9px 4px; font-size: .7rem; }
  .tab-ikon svg { width: 18px; height: 18px; }

  /* Baris warna gampang sesak: biarkan membungkus. */
  .warna-baris { flex-wrap: wrap; }
  .warna-baris .warna-teks { flex: 1 1 120px; }
  .kotak-kecil { flex-basis: 100%; }

  .unduh-baris { flex-direction: column; }
  .short-aksi { flex-direction: column; }
  .short-aksi .tombol { width: 100%; }

  .pratinjau-panggung { min-height: 200px; padding: 14px; }
  .pratinjau-panggung svg { width: 200px; height: 200px; }

  .langkah-daftar li { gap: 12px; }
  .kotak-info { padding: 16px 18px; }

  /* Blok kode API sering lebih lebar dari layar. */
  pre { padding: 12px; font-size: .78rem; }
  .tabel-api { font-size: .82rem; }
  .tabel-api th, .tabel-api td { padding: 8px 6px; }

  /* Batch */
  .batch-langkah { gap: 12px; padding: 18px 0; }
  .batch-nomor { width: 24px; height: 24px; font-size: .76rem; }
  .contoh-kepala { flex-wrap: wrap; }
  .jatuhkan { padding: 20px 14px; }
  .kolom-grup { gap: 5px; }
  .kolom-judul { min-width: 100%; }

  .kaki { padding: 34px 0 26px; }
  .kaki-tautan { gap: 14px 18px; }

  .masuk-kotak { margin: 40px auto; padding: 26px 20px; }
  .pesan-kotak { padding: 32px 22px; }
}

/* Layar sangat sempit (mis. 320px). */
@media (max-width: 380px) {
  .tab-tipe { grid-template-columns: repeat(3, 1fr); }
  .tab-label { font-size: .66rem; }
  .merek-teks { font-size: .98rem; }
}

/* Safari iOS otomatis memperbesar halaman ketika input yang difokuskan
   berfont di bawah 16px. Naikkan ke 16px di layar sentuh kecil supaya
   halaman tidak melompat saat pengguna mulai mengetik. */
@media (max-width: 640px) {
  .bidang input[type="text"], .bidang input[type="url"], .bidang input[type="email"],
  .bidang input[type="tel"], .bidang input[type="number"],
  .bidang input[type="datetime-local"], .bidang input[type="password"],
  .bidang textarea, .bidang select,
  .short-aksi input, #csv-teks, .warna-teks {
    font-size: 16px;
  }
  /* Kolom warna hex ikut 16px; !important diperlukan karena aturan
     .warna-teks di atas memakainya juga. Tetap monospace. */
  .warna-teks { font-size: 16px !important; }
}

@media (max-width: 640px) {
  /* Poin hero: di layar sempit, flex membuat teks setelah <strong> membungkus
     dengan indentasi yang aneh. Jadikan blok biasa dengan bulatan absolut. */
  .hero-poin li {
    display: block;
    position: relative;
    padding-left: 16px;
  }
  .hero-poin li::before {
    position: absolute;
    left: 0;
    top: .62em;
    transform: none;
  }

  /* Pil label agar tidak pecah jadi dua baris. */
  .kuping {
    font-size: .68rem;
    letter-spacing: .06em;
    padding: 5px 11px;
  }
}

/* ── Halaman dokumen (syarat, privasi) ───────────────────────────────────── */
.dokumen h1 { font-size: clamp(1.7rem, 3.4vw, 2.3rem); margin-bottom: .2em; }
.dokumen h2 {
  font-size: 1.15rem; font-weight: 700; margin: 36px 0 .5em;
  padding-top: 20px; border-top: 1px solid var(--garis);
}
.dokumen h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 28px; }
.dokumen p, .dokumen li { color: var(--teks); }
.dokumen ul { padding-left: 20px; margin: 0 0 1.1em; }
.dokumen li { margin-bottom: .45em; }
.dokumen strong { color: var(--ink); font-weight: 650; }
.dokumen .tabel-api { margin: 0 0 1.4em; }
.dokumen-tanggal { color: var(--redup); font-size: .9rem; margin-bottom: 26px; }
.dokumen-kaki {
  margin-top: 40px; padding-top: 20px;
  border-top: 1px solid var(--garis); color: var(--redup); font-size: .92rem;
}

/* ── Aksi baris di panel admin ───────────────────────────────────────────── */
.aksi-baris { display: flex; gap: 6px; white-space: nowrap; }
.aksi-baris button {
  font: inherit; font-size: .78rem; font-weight: 600;
  padding: 4px 9px; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--garis-kuat); background: var(--permukaan); color: var(--teks);
}
.aksi-baris button:hover { border-color: var(--aksen); color: var(--aksen); }
.aksi-baris button.bahaya:hover { border-color: var(--bahaya); color: var(--bahaya); }

.admin-catatan {
  font-size: .84rem; color: var(--redup);
  background: var(--permukaan2); border: 1px solid var(--garis);
  border-radius: var(--r-kecil); padding: 11px 14px; margin-bottom: 20px;
}