:root {
  --kertas: #EFE3C4;
  --kertas-terang: #F8F0DA;
  --meja: #C9B686;
  --papan: #E6D7AF;
  --tinta: #231B14;
  --tinta-pudar: #6E5E48;
  --merah: #D7261E;
  --mustard: #F0B323;
  --toska: #1F6B63;
  --biru: #2A4B9B;
  --kraft: #C49A62;
  --font-ui: 'Barlow Semi Condensed', system-ui, sans-serif;
  --font-judul: 'Shrikhand', Georgia, serif;
  --font-slab: 'Alfa Slab One', Georgia, serif;
  --font-ketik: 'Special Elite', 'Courier New', monospace;
  --sel: 36px;
  --bayang: 3px 3px 0 var(--tinta);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--kertas);
  color: var(--tinta);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.45;
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}
/* butiran kertas */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 30;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .14 0 0 0 0 .1 0 0 0 0 .06 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--biru); outline-offset: 2px; }
[hidden] { display: none !important; }

/* ---------- kop ---------- */
.kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 20px 8px;
  border-bottom: 4px double var(--tinta);
}
.judul-h1 { margin: 0; font-size: inherit; font-weight: inherit; line-height: 1; }
.judul {
  font-family: var(--font-judul);
  font-size: clamp(30px, 4.6vw, 54px);
  line-height: 1;
  color: var(--merah);
  text-decoration: none;
  text-shadow: 3px 3px 0 var(--mustard);
  display: inline-block;
  transform: rotate(-1.5deg);
  transform-origin: left bottom;
}
.subjudul {
  margin: 6px 0 0;
  font-size: 15px;
  display: flex;
  gap: 6px 16px;
  flex-wrap: wrap;
  color: var(--tinta-pudar);
}
.sisa { color: var(--tinta); font-weight: 700; }
.kop-aksi { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; }
.akun { display: flex; align-items: center; gap: 8px; font-size: 14.5px; color: var(--tinta-pudar); }
.akun-nama { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- tombol ---------- */
.tombol {
  font: 600 17px/1 var(--font-ui);
  padding: 11px 18px;
  border: 2px solid var(--tinta);
  background: var(--kertas-terang);
  color: var(--tinta);
  cursor: pointer;
  box-shadow: var(--bayang);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  white-space: nowrap;
}
.tombol:hover { background: #FFF8E6; }
.tombol:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.tombol-merah { background: var(--merah); color: var(--kertas-terang); }
.tombol-merah:hover { background: #E8352C; }
.tombol-kecil { font-size: 15px; padding: 8px 12px; }

/* ---------- layar dan papan ---------- */
main { flex: 1; position: relative; min-height: 0; }
.layar {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
  background: var(--meja) repeating-linear-gradient(115deg, rgba(35,27,20,.035) 0 2px, transparent 2px 9px);
  user-select: none;
  -webkit-user-select: none;
}
.layar:focus-visible { outline-offset: -4px; }
.layar.menyeret { cursor: grabbing; }
.dunia {
  position: absolute;
  left: 0;
  top: 0;
  transform-origin: 0 0;
  background-color: var(--papan);
  box-shadow: 0 0 0 2px var(--tinta), 10px 12px 0 rgba(35,27,20,.22);
}
.dunia.halus { transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.dunia.mode-pilih .stiker { opacity: .45; pointer-events: none; }

/* ---------- stiker ---------- */
.stiker, .stiker-statis {
  display: block;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  container-type: size;
  transform: rotate(var(--r, 0deg));
}
.stiker { position: absolute; cursor: pointer; transition: transform .18s ease, opacity .2s, filter .2s; }
.stiker-statis { position: relative; flex: none; }
.stiker:hover, .stiker:focus-visible { transform: rotate(0deg) scale(1.04); z-index: 4; }
.stiker::before, .stiker-statis::before {
  content: '';
  position: absolute;
  z-index: 2;
  top: -7px;
  left: var(--tp, 50%);
  width: min(64px, 36%);
  height: 15px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(250, 241, 208, .75);
  box-shadow: 0 1px 1px rgba(35,27,20,.12);
  clip-path: polygon(3% 0, 97% 6%, 100% 50%, 96% 100%, 2% 94%, 0 50%);
}
.s-baris::before { display: none; }
@keyframes denyut {
  0%, 100% { outline-color: transparent; }
  20%, 60% { outline-color: var(--merah); }
}
.denyut .muka { outline: 5px solid transparent; outline-offset: 5px; animation: denyut 1.6s ease 2; }

.muka {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 5cqmin 6cqmin;
  gap: 2cqmin;
  box-shadow: 1px 2px 0 rgba(35,27,20,.28), 4px 8px 14px rgba(35,27,20,.14);
}
.w-merah { --bg: var(--merah); --fg: #FBF1DC; --aksen: var(--mustard); --foto: #F2B4A0; }
.w-mustard { --bg: var(--mustard); --fg: var(--tinta); --aksen: var(--merah); --foto: #FBE3A2; }
.w-toska { --bg: var(--toska); --fg: #F5ECD3; --aksen: var(--mustard); --foto: #A8D1C6; }
.w-biru { --bg: var(--biru); --fg: #F5ECD3; --aksen: var(--mustard); --foto: #B9C6EC; }
.w-tinta { --bg: var(--tinta); --fg: var(--mustard); --aksen: var(--merah); --foto: #A3927A; }
.w-kertas { --bg: var(--kertas-terang); --fg: var(--tinta); --aksen: var(--merah); --foto: #E6D6AE; }

.t-poster, .t-bintang { background: var(--bg); color: var(--fg); }
.t-kertas, .t-poster.w-kertas, .t-bintang.w-kertas { border: 2px solid var(--tinta); }

.tag {
  align-self: flex-start;
  font: 600 max(8px, 4cqmin)/1.25 var(--font-ui);
  padding: 0 .5em;
  background: var(--fg);
  color: var(--bg);
  flex: none;
}
.nama {
  font-family: var(--font-slab);
  font-size: min(11cqw, 17cqh);
  line-height: .98;
  overflow-wrap: anywhere;
  text-wrap: balance;
  flex: none;
}
.slogan {
  font-size: max(8px, min(5.4cqw, 8.5cqh));
  font-weight: 500;
  line-height: 1.15;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: none;
}
.kaki {
  margin-top: auto;
  font: 600 max(7px, min(4.2cqw, 6.5cqh))/1.15 var(--font-ui);
  border-top: max(1px, .5cqmin) dashed currentColor;
  padding-top: 1.6cqmin;
  flex: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.foto {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  background: var(--foto);
  display: grid;
  place-items: center;
}
.foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.3) brightness(1.06);
  mix-blend-mode: multiply;
}
.foto::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(rgba(35,27,20,.22) 30%, transparent 34%) 0 0 / 4px 4px;
  mix-blend-mode: multiply;
}
.foto-kosong { background: var(--foto) radial-gradient(circle, color-mix(in srgb, var(--bg) 55%, transparent) 30%, transparent 33%) 0 0 / 6px 6px; }
.foto-kosong::after { display: none; }
.monogram {
  font-family: var(--font-judul);
  font-size: min(26cqw, 22cqh);
  line-height: 1.15;
  color: var(--bg);
  background: var(--foto);
  padding: 0 .28em;
}
.w-kertas .monogram, .w-mustard .monogram { color: var(--tinta); }
@container (max-height: 110px) {
  .t-poster .foto, .t-poster .kaki { display: none; }
  .t-poster .nama { margin-top: auto; }
}

/* gaya kotak */
.t-kotak {
  background: var(--kertas-terang);
  color: var(--tinta);
  border: max(4px, 2.4cqmin) double var(--bg);
}
.t-kotak.w-kertas { border-color: var(--tinta); }
.t-kotak .tag { background: var(--bg); color: var(--fg); }
.t-kotak.w-kertas .tag { background: var(--tinta); color: var(--kertas-terang); }
.t-kotak .badan { display: flex; gap: 4cqmin; flex: 1 1 auto; min-height: 0; align-items: center; }
.t-kotak .foto { flex: 0 0 34cqw; height: min(34cqw, 100%); }
.t-kotak .teks { display: flex; flex-direction: column; gap: 2cqmin; min-width: 0; }
.t-kotak .nama { font-size: min(8.5cqw, 15cqh); }
.t-kotak .slogan { font-size: max(8px, min(4.8cqw, 8cqh)); }

/* gaya bintang */
.t-bintang .nama { font-family: var(--font-judul); font-size: min(11cqw, 18cqh); line-height: 1.05; margin-top: 2cqmin; }
.t-bintang .kaki { padding-right: 34cqmin; }
.lencana {
  position: absolute;
  right: 3cqmin;
  bottom: 3cqmin;
  width: 30cqmin;
  height: 30cqmin;
  background: var(--aksen);
  color: var(--tinta);
  clip-path: polygon(50% 0, 61% 18%, 82% 12%, 80% 34%, 100% 42%, 84% 58%, 94% 78%, 72% 78%, 64% 100%, 50% 84%, 36% 100%, 28% 78%, 6% 78%, 16% 58%, 0 42%, 20% 34%, 18% 12%, 39% 18%);
  display: grid;
  place-items: center;
  text-align: center;
  transform: rotate(12deg);
}
.w-mustard .lencana { color: var(--kertas-terang); }
.lencana span { font: 700 max(6px, 5cqmin)/1 var(--font-ui); width: 64%; }

/* iklan baris */
.t-baris {
  background: var(--kertas-terang);
  color: var(--tinta);
  border: 1px solid var(--tinta);
  padding: 0 3cqw;
  justify-content: center;
  font-family: var(--font-ketik);
  font-size: min(30cqh, 6.8cqw);
  line-height: 1.12;
  box-shadow: 1px 1px 0 rgba(35,27,20,.25);
}
.t-baris .teks { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.t-baris b { font-family: var(--font-ui); font-weight: 700; }

/* dipesan dan habis */
.t-dipesan {
  background: var(--kraft) repeating-linear-gradient(0deg, rgba(74,53,32,.06) 0 1px, transparent 1px 4px);
  color: #4A3520;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.t-dipesan .cap {
  font: 700 min(8cqw, 15cqh)/1 var(--font-ui);
  letter-spacing: .06em;
  text-transform: uppercase;
  border: max(2px, 1.2cqmin) solid currentColor;
  padding: .3em .5em;
  transform: rotate(-8deg);
}
.t-dipesan .ket { font-size: max(8px, min(5cqw, 9cqh)); margin-top: 4cqmin; }
.s-baris .t-dipesan .cap { font-size: min(7cqw, 46cqh); transform: none; border-width: 1px; padding: .1em .4em; }
.s-baris .t-dipesan .ket { display: none; }
.t-habis {
  background: var(--kertas-terang);
  color: var(--tinta-pudar);
  clip-path: polygon(0 0, 100% 0, 100% 52%, 90% 60%, 97% 69%, 84% 77%, 93% 88%, 74% 100%, 0 100%);
  justify-content: flex-end;
  font: 500 max(8px, min(5cqw, 9cqh))/1.2 var(--font-ui);
  box-shadow: none;
  opacity: .85;
}
.st-habis::before { transform: translateX(-50%) rotate(9deg); }

/* kotak tempat (hanya muncul saat memilih tempat atau mengatur harga) */
.tempat {
  position: absolute;
  z-index: 5;
  padding: 2px;
  border: 2px dashed var(--tinta);
  background: rgba(248, 240, 218, .9);
  color: var(--tinta);
  cursor: pointer;
  container-type: size;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1cqmin;
  text-align: center;
  font-family: var(--font-ui);
}
.tempat:hover, .tempat:focus-visible { background: var(--mustard); border-style: solid; }
.harga-tempat { font-family: var(--font-slab); font-size: min(13cqw, 24cqh); line-height: 1; }
.per { font: 600 min(7.5cqw, 13cqh)/1 var(--font-ui); }
.tempat-baris { flex-direction: row; gap: 3px; border-width: 1.5px; }
.tempat-baris .harga-tempat { font-size: min(11cqw, 52cqh); }
.tempat-baris .per { font-size: min(7cqw, 36cqh); }
.tempat.terisi { background: rgba(35, 27, 20, .62); color: var(--kertas-terang); border-style: solid; }
.tempat.terisi:hover { background: rgba(35, 27, 20, .82); }

/* iklan rumah (pengumuman pengelola papan) */
.judul-r { flex: none; overflow-wrap: anywhere; text-wrap: balance; }
.isi-r { flex: none; line-height: 1.2; }
.ajakan-r {
  margin-top: auto;
  align-self: flex-start;
  flex: none;
  font: 700 min(4.2cqw, 8cqh)/1 var(--font-ui);
  background: var(--merah);
  color: var(--kertas-terang);
  padding: .55em .9em;
  border: max(2px, .5cqmin) solid var(--tinta);
  box-shadow: max(2px, .6cqmin) max(2px, .6cqmin) 0 var(--tinta);
}

.r-utama { background: var(--mustard); color: var(--tinta); border: max(3px, 1cqmin) solid var(--tinta); padding: 6cqmin 7cqmin; }
.r-utama .tag { background: var(--tinta); color: var(--mustard); }
.r-utama .judul-r {
  font-family: var(--font-judul);
  color: var(--merah);
  font-size: min(7.4cqw, 12cqh);
  line-height: 1.04;
  text-shadow: max(2px, .5cqmin) max(2px, .5cqmin) 0 var(--tinta);
  margin-top: 3cqmin;
  max-width: 74%;
}
.r-utama .isi-r { font-size: min(3.9cqw, 6.4cqh); font-weight: 600; max-width: 62%; margin-top: 1cqmin; }
.r-utama .lencana { width: 30cqmin; height: 30cqmin; top: 5cqmin; right: 4cqmin; bottom: auto; background: var(--merah); color: var(--kertas-terang); }
.r-utama .lencana span { font-size: 6cqmin; }

.r-tinta { background: var(--tinta); color: var(--kertas-terang); }
.r-tinta .tag { background: var(--mustard); color: var(--tinta); }
.r-tinta .judul-r { font-family: var(--font-slab); color: var(--mustard); font-size: min(10cqw, 15cqh); line-height: 1; margin-top: 3cqmin; }
.r-tinta .isi-r { font-size: min(5.2cqw, 8.5cqh); line-height: 1.25; margin-top: 1cqmin; }
.r-tinta .ajakan-r { background: var(--mustard); color: var(--tinta); border-color: var(--mustard); box-shadow: none; }

.r-merah { background: var(--merah); color: var(--kertas-terang); }
.r-toska { background: var(--toska); color: var(--kertas-terang); }
.r-merah .tag, .r-toska .tag { background: var(--kertas-terang); color: var(--tinta); }
.r-merah .judul-r, .r-toska .judul-r { font-family: var(--font-slab); font-size: min(10.5cqw, 18cqh); line-height: 1; margin-top: 3cqmin; }
.r-merah .isi-r, .r-toska .isi-r { font-size: max(8px, min(6cqw, 10cqh)); font-weight: 600; margin-top: auto; }
/* stiker harga: label kecil, harganya yang besar */
.r-merah .judul-r { font: 700 min(7cqw, 12cqh)/1 var(--font-ui); }
.r-merah .isi-r { font: 400 min(11cqw, 19cqh)/1 var(--font-slab); color: var(--mustard); }

.r-kupon { background: var(--kertas-terang); color: var(--tinta); border: max(2px, .8cqmin) dashed var(--tinta); }
.r-kupon .tag { background: var(--merah); color: var(--kertas-terang); }
.r-kupon .judul-r { font-family: var(--font-judul); color: var(--merah); font-size: min(15cqw, 26cqh); line-height: 1.05; margin-top: 3cqmin; }
.r-kupon .isi-r { font-size: min(5.4cqw, 9cqh); font-weight: 600; }
.gunting {
  margin-top: auto;
  flex: none;
  font: 400 min(3.8cqw, 6.5cqh)/1 var(--font-ketik);
  border-top: max(1px, .4cqmin) dashed currentColor;
  padding-top: 2cqmin;
  color: var(--tinta-pudar);
}

.r-langkah { background: var(--kertas-terang); color: var(--tinta); border: max(2px, .7cqmin) solid var(--tinta); }
.r-langkah .tag { background: var(--tinta); color: var(--kertas-terang); }
.r-langkah .judul-r { font-family: var(--font-slab); font-size: min(9cqw, 15cqh); line-height: 1; margin-top: 2cqmin; }
.r-langkah ol { margin: auto 0; padding: 0; list-style: none; counter-reset: langkah; display: flex; flex-direction: column; gap: 2.4cqmin; }
.r-langkah li { counter-increment: langkah; display: flex; align-items: baseline; gap: 2.5cqmin; font: 600 min(5.6cqw, 9.5cqh)/1.1 var(--font-ui); }
.r-langkah li::before { content: counter(langkah); font-family: var(--font-judul); color: var(--merah); font-size: 1.5em; line-height: 1; min-width: .9em; }

.r-baris b { font-family: var(--font-ui); letter-spacing: .03em; color: var(--merah); }

@keyframes tempel {
  from { opacity: 0; transform: rotate(calc(var(--r) + 6deg)) scale(1.25); }
  to { opacity: 1; transform: rotate(var(--r)) scale(1); }
}
.dunia.baru .stiker { animation: tempel .42s cubic-bezier(.2,.9,.3,1.2) both; animation-delay: calc(var(--i) * 14ms + 150ms); }

/* zoom dan petunjuk */
.kontrol-zoom {
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-end;
  z-index: 3;
}
.kontrol-zoom button {
  font: 600 22px/1 var(--font-ui);
  width: 44px;
  height: 44px;
  border: 2px solid var(--tinta);
  background: var(--kertas-terang);
  color: var(--tinta);
  box-shadow: var(--bayang);
  cursor: pointer;
}
.kontrol-zoom #zoom-semua { width: auto; padding: 0 12px; font-size: 15px; }
.petunjuk {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  background: var(--tinta);
  color: var(--kertas-terang);
  padding: 7px 14px;
  font-weight: 600;
  font-size: 15px;
  z-index: 3;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity .4s;
}
.petunjuk.hilang { opacity: 0; }

/* bar menempel */
.bar-tempel {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 20;
  background: var(--kertas-terang);
  border: 3px solid var(--tinta);
  box-shadow: 5px 5px 0 var(--tinta);
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  width: min(660px, calc(100vw - 24px));
  flex-wrap: wrap;
}
.bar-tempel p { margin: 0; flex: 1; min-width: 220px; font-size: 15px; line-height: 1.35; }
.aksi { display: flex; gap: 10px; flex-wrap: wrap; }
body.sedang-memilih .kontrol-zoom { bottom: 130px; }

/* ---------- dialog ---------- */
.dialog {
  border: 3px solid var(--tinta);
  background: var(--kertas-terang);
  color: var(--tinta);
  padding: 0;
  width: min(640px, calc(100vw - 32px));
  max-width: none;
  max-height: calc(100dvh - 40px);
  overflow: auto;
  box-shadow: 8px 8px 0 var(--tinta);
}
.dialog-lebar { width: min(940px, calc(100vw - 32px)); }
.dialog::backdrop { background: rgba(35,27,20,.55); }
.dialog[open] { animation: buka .22s cubic-bezier(.2,.8,.3,1); }
@keyframes buka { from { opacity: 0; transform: translateY(14px); } }
.dlg-kepala {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 22px 12px;
  border-bottom: 2px solid var(--tinta);
  position: sticky;
  top: 0;
  background: var(--kertas-terang);
  z-index: 5;
}
.dlg-kepala h2 { margin: 0; font-family: var(--font-slab); font-weight: 400; font-size: 27px; line-height: 1.05; }
.langkah { margin: 0 0 4px; font-size: 14px; color: var(--tinta-pudar); font-weight: 600; }
.tutup { border: 2px solid var(--tinta); background: transparent; width: 40px; height: 40px; font: 500 22px/1 var(--font-ui); cursor: pointer; flex: none; color: var(--tinta); }
.dlg-badan { padding: 18px 22px 24px; }
.pengantar { margin: 0 0 16px; font-size: 17px; max-width: 62ch; }
.bantu { font-size: 14px; color: var(--tinta-pudar); margin: 10px 0 0; }

.paket-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.paket {
  text-align: left;
  border: 2px solid var(--tinta);
  background: var(--kertas);
  padding: 14px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font: inherit;
  color: inherit;
  box-shadow: var(--bayang);
}
.paket:hover { background: #FFF6DE; }
.paket:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--tinta); }
.paket .bentuk { height: 64px; display: flex; align-items: flex-end; margin-bottom: 6px; }
.paket .bentuk i { display: block; background: var(--merah); border: 2px solid var(--tinta); }
.paket .np { font-family: var(--font-slab); font-size: 19px; line-height: 1.1; }
.paket .ukuran { font-size: 14px; color: var(--tinta-pudar); }
.paket .harga { font-weight: 700; font-size: 17px; }
.paket .sisa-kuota { font-size: 14px; color: var(--tinta-pudar); }
.paket.habis-terjual { opacity: .5; }
.paket.habis-terjual .bentuk i { background: var(--tinta-pudar); }

/* form */
.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 28px; align-items: start; }
.kelompok { border: 0; border-top: 2px solid var(--tinta); margin: 0 0 18px; padding: 10px 0 0; min-width: 0; }
.kelompok legend { font-family: var(--font-slab); font-size: 18px; padding: 0 8px 0 0; }
.field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; min-width: 0; }
.field > label, .field > .label { font-weight: 600; font-size: 15px; }
.field input[type="text"], .field input[type="email"], .field input[type="tel"], .field input[type="url"], .field textarea, .field select {
  font: 500 16px var(--font-ui);
  padding: 9px 11px;
  border: 2px solid var(--tinta);
  background: #FFFBF0;
  color: var(--tinta);
  width: 100%;
  border-radius: 0;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input[type="file"] { font: 500 15px var(--font-ui); }
.field .bantu { margin: 0; }
.galat { font-size: 14px; color: var(--merah); font-weight: 700; }
.galat:empty { display: none; }
.dua { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.pilihan { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan label {
  position: relative;
  display: flex;
  flex-direction: column;
  border: 2px solid var(--tinta);
  padding: 7px 12px;
  cursor: pointer;
  font-weight: 600;
  background: #FFFBF0;
}
.pilihan label small { font-weight: 500; font-size: 13.5px; }
.pilihan input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.pilihan label:has(input:checked) { background: var(--tinta); color: var(--kertas-terang); }
.pilihan label:has(input:focus-visible) { outline: 3px solid var(--biru); outline-offset: 2px; }
.pilihan label:has(input:disabled) { border-style: dashed; color: var(--tinta-pudar); background: transparent; cursor: not-allowed; }
.pilihan label:has(input:disabled) input { cursor: not-allowed; }
.pilihan .swatch { width: 40px; height: 40px; padding: 0; background: var(--bg); }
.pilihan .swatch:has(input:checked) { background: var(--bg); outline: 3px solid var(--tinta); outline-offset: 3px; }
.tersembunyi { display: none; }
.centang { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; }
.centang input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--tinta); flex: none; }
.tautan { background: none; border: 0; padding: 0; font: inherit; color: var(--tinta); text-decoration: underline; cursor: pointer; }
.ringkasan { border: 2px dashed var(--tinta); padding: 12px 14px; margin: 4px 0 16px; font-size: 15.5px; }
.ringkasan .total { display: block; font-family: var(--font-slab); font-size: 24px; margin-top: 2px; }
.pratinjau { position: sticky; top: 90px; }
.pratinjau .label { font-weight: 700; margin: 0 0 8px; }
.pratinjau-kotak {
  background: var(--papan) radial-gradient(rgba(35,27,20,.14) 1px, transparent 1.6px) 0 0 / 18px 18px;
  border: 2px solid var(--tinta);
  min-height: 230px;
  display: grid;
  place-items: center;
  padding: 22px;
}

/* detail */
.detail { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px; }
.detail-stiker {
  background: var(--papan) radial-gradient(rgba(35,27,20,.14) 1px, transparent 1.6px) 0 0 / 18px 18px;
  border: 2px solid var(--tinta);
  display: grid;
  place-items: center;
  padding: 22px 14px;
  min-height: 240px;
  align-self: start;
}
.meta { color: var(--tinta-pudar); font-weight: 600; margin: 0 0 10px; }
.slogan-besar { font-family: var(--font-slab); font-size: 21px; line-height: 1.15; margin: 0 0 12px; }
.deskripsi { font-size: 16.5px; line-height: 1.55; margin: 0 0 4px; max-width: 60ch; }
.kontak { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.tayang { font-size: 14.5px; color: var(--tinta-pudar); margin: 0 0 12px; }
.aksi-kecil { display: flex; gap: 18px; flex-wrap: wrap; font-size: 15px; }
.aksi-kecil a, .aksi-kecil button { color: var(--tinta-pudar); }

/* sukses */
.kode { font-family: var(--font-slab); font-size: 40px; margin: 2px 0 12px; letter-spacing: .04em; color: var(--merah); }
.sukses p { max-width: 60ch; }
.bayar-qris { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 24px; align-items: start; }
.qris-kotak { display: grid; gap: 10px; justify-items: center; }
.qris-kotak img { width: 100%; height: auto; background: #fff; border: 2px solid var(--tinta); }
.bayar-qris .label { font-weight: 700; margin: 0; }
.qris-langkah { margin: 0 0 12px; padding-left: 20px; line-height: 1.5; }
.qris-langkah li { margin-bottom: 4px; }
@media (max-width: 640px) { .bayar-qris { grid-template-columns: minmax(0, 1fr); } .qris-kotak { max-width: 280px; margin: 0 auto; } }

/* admin */
.adm-bagian { margin-bottom: 26px; }
.adm-judul { font-family: var(--font-slab); font-weight: 400; font-size: 21px; margin: 0 0 6px; border-bottom: 2px solid var(--tinta); padding-bottom: 6px; }
.adm-item { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px dashed rgba(35,27,20,.4); }
.adm-stiker { background: var(--papan); border: 1.5px solid rgba(35,27,20,.4); display: grid; place-items: center; min-height: 130px; padding: 10px; align-self: start; }
.adm-info h3 { margin: 0 0 4px; font-family: var(--font-slab); font-weight: 400; font-size: 19px; }
.adm-info p { margin: 0 0 4px; font-size: 15px; }
.adm-info a { color: var(--biru); }
.adm-info .aksi { margin-top: 10px; }
.adm-peringatan { color: var(--merah); font-weight: 700; }
.adm-kosong { color: var(--tinta-pudar); margin: 10px 0; }
.adm-bukti { display: block; margin: 6px 0 4px; padding: 0; border: 1.5px solid var(--tinta); background: #fff; cursor: zoom-in; max-width: 100%; }
.adm-bukti img { display: block; max-height: 240px; max-width: 100%; width: auto; }
.adm-bukti.besar { cursor: zoom-out; }
.adm-bukti.besar img { max-height: none; }
@media (max-width: 640px) {
  .adm-item { grid-template-columns: 1fr; }
}

/* syarat */
.syarat ol { padding-left: 22px; margin: 0; }
.syarat li { margin-bottom: 10px; font-size: 16px; line-height: 1.5; }

/* toast */
.toast {
  position: fixed;
  inset: auto;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  margin: 0;
  border: 0;
  background: var(--tinta);
  color: var(--kertas-terang);
  padding: 11px 16px;
  font-weight: 600;
  font-size: 15.5px;
  z-index: 60;
  max-width: calc(100vw - 32px);
  box-shadow: 4px 4px 0 var(--merah);
  visibility: hidden;
}
.toast.tampil { visibility: visible; animation: muncul .25s ease; }
@keyframes muncul { from { opacity: 0; transform: translate(-50%, -12px); } }

/* ---------- layar kecil ---------- */
@media (max-width: 760px) {
  .form-grid { grid-template-columns: 1fr; }
  .pratinjau { position: static; order: -1; }
  .pratinjau-kotak { min-height: 170px; }
  .detail { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .kop { padding: 10px 14px 8px; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
  .kop-utama { display: contents; }
  .judul { font-size: clamp(22px, 7vw, 30px); white-space: nowrap; text-shadow: 2px 2px 0 var(--mustard); }
  .subjudul { order: 3; flex-basis: 100%; margin: 0; font-size: 13.5px; gap: 0 10px; line-height: 1.3; }
  #edisi { display: none; }
  .kop .tombol { font-size: 15px; padding: 9px 12px; }
  .kop-aksi { gap: 8px; }
  .akun-nama { display: none; }
  .petunjuk { font-size: 13.5px; }
  .kontrol-zoom #zoom-semua { display: none; }
  .dialog, .dialog-lebar {
    width: 100vw;
    max-height: 90dvh;
    margin: auto 0 0;
    border-width: 3px 0 0;
    box-shadow: none;
  }
  .dlg-kepala { padding: 14px 16px 10px; }
  .dlg-kepala h2 { font-size: 23px; }
  .dlg-badan { padding: 14px 16px 22px; }
  .dua { grid-template-columns: 1fr; }
  .bar-tempel { bottom: 10px; padding: 10px 12px; gap: 10px; }
  .bar-tempel .aksi { width: 100%; }
  .bar-tempel .aksi .tombol { flex: 1; }
  body.sedang-memilih .kontrol-zoom { bottom: 150px; }
}

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