:root {
  font-variant-ligatures: none;
  --ink: #18362e;
  --green: #23493c;
  --cream: #f4eee6;
  --tan: #cea380;
  --terra: #c4552d;
  --olive: #6e7b3a;
  --brown: #4a2f22;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --bar: 56px;
  --kolom: 380px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--cream);
  color: var(--ink);
  font-family: "DM Sans", system-ui, sans-serif;
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0;
  -webkit-tap-highlight-color: transparent;
}

body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: url("assets/noise.svg");
  opacity: 0.05;
  pointer-events: none;
  z-index: 50;
}

svg text { font-variant-ligatures: none; font-feature-settings: "liga" 0, "clig" 0, "dlig" 0, "calt" 0; }

button { font: inherit; color: inherit; }

.app { position: fixed; inset: 0; }

/* bilah judul */
.bar {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: var(--bar);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--sp-10) 0 var(--sp-16);
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  z-index: 30;
}
.judul {
  margin: 0;
  font-family: "Atelier", "DM Sans", sans-serif;
  font-weight: 400;
  font-size: var(--fs-28);
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* tombol bulat dan pil */
a.ikon { color: inherit; text-decoration: none; }
.bar .judul { margin-right: auto; margin-left: var(--sp-10); }
.ikon {
  width: 44px; height: 44px;
  flex: none;
  display: grid; place-items: center;
  padding: 0;
  border: 2px solid var(--ink);
  border-radius: 50%;
  background: var(--cream);
  box-shadow: 3px 3px 0 var(--terra);
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease);
}
.ikon svg, .pil svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ikon:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--terra); }

.pil {
  min-height: 44px;
  min-width: 52px;
  padding: 0 var(--sp-18);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-6);
  flex: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius-pil);
  background: var(--cream);
  box-shadow: 2px 2px 0 var(--terra);
  font-weight: 600;
  font-size: var(--fs-16);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease);
}
.pil:active:not([disabled]) { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--terra); }
.pil[aria-pressed="true"] { background: var(--green); color: var(--cream); box-shadow: 2px 2px 0 var(--tan); }
.pil[disabled] { opacity: 0.4; cursor: default; }

:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 3px var(--cream); }
.seat:focus-visible, .pin:focus-visible { outline: none; }

/* pencarian */
.cari {
  position: absolute;
  top: var(--bar); left: 0; right: 0;
  z-index: 25;
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-8);
  padding: var(--sp-8) var(--sp-12) var(--sp-6);
  background: var(--cream);
  border-bottom: 2px solid var(--ink);
  transform: translateY(-110%);
  visibility: hidden;
  transition: transform 340ms var(--ease), visibility 0s linear 340ms;
}
.cari.buka { transform: none; visibility: visible; transition: transform 340ms var(--ease), visibility 0s; }
.cari input {
  flex: 1 1 140px;
  min-width: 0;
  height: 48px;
  padding: 0 var(--sp-16);
  border: 2px solid var(--ink);
  border-radius: var(--radius-pil);
  background: var(--kertas-hangat);
  font: 500 16px "DM Mono", monospace;
  color: var(--ink);
}
.pesan { flex: 1 0 100%; margin: 0; min-height: 0; font-size: var(--fs-14); color: var(--terra); font-weight: 600; }
.pesan:empty { display: none; }

/* peta */
.peta {
  position: absolute;
  top: var(--bar); left: 0; right: 0; bottom: 0;
  overflow: hidden;
  background: var(--cream);
  touch-action: none;
  cursor: grab;
}
.peta:active { cursor: grabbing; }
#svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; user-select: none; -webkit-user-select: none; }

.gagal-muat {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-16);
  padding: var(--sp-24);
  text-align: center;
  pointer-events: auto;
}
.gagal-muat p { margin: 0; max-width: 22ch; font-size: var(--fs-16); font-weight: 500; line-height: 1.45; }
#panel[hidden] { display: none; }

.kamera {
  position: absolute;
  right: 12px; top: 12px;
  display: flex; flex-direction: column; gap: var(--sp-10);
  z-index: 5;
}

/* elemen peta */
.seat { cursor: pointer; outline: none; transition: opacity 320ms var(--ease), filter 320ms var(--ease); }
.seat .lift { transition: transform 280ms var(--ease), filter 280ms var(--ease); }
.seat.sel .lift { transform: translate(-3px, -6px); filter: drop-shadow(7px 9px 0 var(--terracotta-a95)); }
.seat.redup { opacity: 0.25; filter: grayscale(1); }
.seat .hit { fill: transparent; stroke: none; pointer-events: all; }
.seat .ring, .seat .foc { display: none; fill: none; vector-effect: non-scaling-stroke; }
.seat .ring { stroke: var(--terra); stroke-width: 3; transform-box: fill-box; transform-origin: center; }
.seat.sel .ring { display: block; animation: denyut 1.8s ease-in-out infinite; }
.seat .foc { stroke: var(--ink); stroke-width: 3; stroke-dasharray: 6 4; }
.seat:focus-visible .foc { display: block; }
@keyframes denyut {
  0% { transform: scale(1); opacity: 0.95; }
  70% { transform: scale(1.14); opacity: 0.25; }
  100% { transform: scale(1); opacity: 0.95; }
}

.chip { cursor: pointer; transition: opacity 260ms var(--ease); pointer-events: none; }
.chip .cb { fill: var(--cream); stroke: var(--ink); stroke-width: 1.5; transition: fill 200ms var(--ease); }
.chip .cs { fill: var(--terra); }
.chip text { fill: var(--ink); font-family: "DM Mono", monospace; font-weight: 500; font-size: var(--fs-12); text-anchor: middle; transition: fill 200ms var(--ease); }
.chip.sel .cb { fill: var(--green); }
.chip.sel text { fill: var(--cream); }
.chip.redup { opacity: 0.3; }
.chip.ramai { opacity: 0; }

.rib text { font-family: "DM Mono", monospace; text-anchor: middle; }
.rib .rn { fill: var(--cream); font-size: var(--fs-20); font-weight: 500; }
.rib .rs { fill: var(--ink); font-size: var(--fs-14); paint-order: stroke; stroke: var(--cream); stroke-width: 4px; stroke-linejoin: round; }
.rib { transition: opacity 260ms var(--ease); pointer-events: none; }
.rib.ramai { opacity: 0; }
.m2.redup, .rib.redup { opacity: 0.3; }
.m2 { transition: opacity 320ms var(--ease); }

.pin { cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 260ms var(--ease); outline: none; }
.pin.on { opacity: 1; pointer-events: all; }
.pin .pb { fill: var(--cream); stroke: var(--ink); stroke-width: 2; }
.pin .ps { fill: var(--terra); }
.pin text { font-family: "DM Mono", monospace; font-weight: 500; font-size: var(--fs-12); fill: var(--ink); text-anchor: middle; }
.pin:focus-visible .pb { stroke: var(--terra); stroke-width: 3; }

.bkn { font-family: "DM Mono", monospace; font-size: var(--fs-14); fill: var(--terra); text-anchor: middle; paint-order: stroke; stroke: var(--cream); stroke-width: 4px; pointer-events: none; }

.fokus { fill: var(--terracotta-a08); stroke: var(--terra); stroke-width: 3; stroke-dasharray: 8 6; vector-effect: non-scaling-stroke; pointer-events: none; transition: opacity 260ms var(--ease); }

/* panel / lembar */
.panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 196px;
  display: flex; flex-direction: column;
  overflow: hidden;
  background: var(--cream);
  border: 2px solid var(--ink);
  border-bottom: 0;
  border-radius: var(--radius-22) var(--radius-22) 0 0;
  box-shadow: 0 -4px 0 var(--terra);
  z-index: 20;
  transition: height 340ms var(--ease);
}
.panel > * { flex: none; }
.grip { height: 8px; margin: 0; position: relative; cursor: pointer; }
.grip::after { content: ""; position: absolute; left: 50%; top: 3px; width: 44px; height: 4px; margin-left: -22px; border-radius: var(--radius-2); background: var(--ink); opacity: 0.35; }

.ringkas { padding: 0 0 var(--sp-2) var(--sp-14); }
.kepala { margin: 0; padding: 0 var(--sp-14) 0 0; }
.kepala b { display: block; font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: var(--fs-18); line-height: 1; }
.kepala span { display: block; font-size: var(--fs-13); font-weight: 500; line-height: 1.15; }
.baris-angka { display: flex; align-items: center; justify-content: space-between; height: 44px; padding-right: var(--sp-14); }
.baris-angka.ada-saran { height: auto; min-height: 44px; align-items: flex-start; }
.angka { margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-4) var(--sp-8); flex: 1; min-width: 0; }
.saran { flex: 1 1 100%; font-size: var(--fs-13); font-weight: 500; line-height: 1.25; }
.angka b { font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: 38px; line-height: 1; font-variant-numeric: tabular-nums; min-width: 1.6ch; }
.angka span { font-size: var(--fs-16); font-weight: 500; }
.pil-daftar svg { width: 18px; height: 18px; transition: transform 240ms var(--ease); }
.panel[data-mode="list"] .pil-daftar svg, .panel[data-mode="area"] .pil-daftar svg { transform: rotate(180deg); }

.filter { display: flex; align-items: center; gap: var(--sp-8); height: 46px; min-width: 0; max-width: 100%; padding: 0 var(--sp-16) var(--sp-2) 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; overscroll-behavior-x: contain; }
.filter.geser { background-image: linear-gradient(to left, var(--cream), transparent); background-repeat: no-repeat; background-position: right center; background-size: 28px 100%; }
.filter::-webkit-scrollbar { display: none; }
.fl { flex: none; font-size: var(--fs-14); font-weight: 700; padding-right: var(--sp-2); }

.rincian { display: none; padding: var(--sp-4) var(--sp-14) var(--sp-14); position: relative; }
.rincian .kosong { margin: 0; font-size: var(--fs-16); line-height: 1.4; opacity: 0.8; }
.daftar { display: none; flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--sp-4) var(--sp-14) var(--sp-18); overscroll-behavior: contain; }

.panel[data-mode="detail"] .ringkas { display: none; }
.panel[data-mode="detail"] .rincian { display: block; }
.panel[data-mode="list"] .daftar, .panel[data-mode="area"] .daftar { display: block; }
.panel[data-mode="area"] .ringkas { display: none; }
.panel[data-mode="area"] .grup:not(.pilih) { display: none; }
.panel[data-mode="area"] .legenda, .panel[data-mode="area"] .catatan { display: none; }

/* rincian */
.r-atas { display: flex; align-items: center; gap: var(--sp-14); padding-right: 50px; min-height: 100px; }
.seni { flex: none; width: 112px; height: 96px; display: grid; place-items: center; border-radius: var(--radius-14); background: var(--tan-a28); }
.seni img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; filter: drop-shadow(2px 2px 0 var(--terra)); }
.info { min-width: 0; }
.kode-besar { margin: 0; font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: 46px; line-height: 0.95; letter-spacing: 0.01em; }
.kode-besar.nama { font-size: 32px; line-height: 1; }
.muat { margin: var(--sp-6) 0 0; font-size: var(--fs-18); font-weight: 700; }
.meta { margin: var(--sp-4) 0 0; font-size: var(--fs-14); }
.jenis { margin: var(--sp-4) 0 0; font-size: var(--fs-14); color: var(--brown); display: flex; align-items: center; gap: var(--sp-8); }
.jenis i { flex: none; width: 22px; height: 12px; border-radius: var(--radius-6); border: 2px dashed var(--ink); }
.jenis i.t { border-style: solid; }
.tutup { position: absolute; right: 12px; top: 2px; }
.r-nav { display: flex; gap: var(--sp-10); margin-top: var(--sp-10); }
.r-nav a.pil { text-decoration: none; color: inherit; }
.r-nav .pil { flex: 1 1 0; }
.r-nav .pil svg { width: 18px; height: 18px; }
.r-nav:empty { display: none; }

/* daftar */
.grup { margin: var(--sp-6) 0 var(--sp-14); }
.grup header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); min-height: 48px; }
.grup h3 { margin: 0; font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: var(--fs-22); line-height: 1.1; }
.grup .sub { margin: var(--sp-2) 0 0; font-size: var(--fs-13); }
.grup .lihat { min-height: 44px; padding: 0 var(--sp-14); font-size: var(--fs-14); }
.grup .semua { display: none; }
.panel[data-mode="area"] .grup .lihat { display: none; }
.panel[data-mode="area"] .grup .semua { display: inline-flex; }
.kisi { display: grid; grid-template-columns: repeat(auto-fill, minmax(54px, 1fr)); gap: var(--sp-10) var(--sp-8); margin-top: var(--sp-8); }
.kode {
  min-width: 50px; min-height: 50px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-6);
  border: 2px solid var(--ink);
  border-radius: var(--radius-26);
  background: var(--cream);
  box-shadow: 2px 2px 0 var(--terra);
  cursor: pointer;
  transition: transform 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease), color 160ms var(--ease), opacity 260ms var(--ease);
}
.kode b { font: 500 15px/1 "DM Mono", monospace; }
.kode small { font: 400 11px/1 "DM Mono", monospace; opacity: 0.85; }
.kode.portable { border-style: dashed; }
.kode:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--terra); }
.kode[aria-pressed="true"] { background: var(--green); color: var(--cream); box-shadow: 2px 2px 0 var(--tan); }
.kode.redup { opacity: 0.35; }
.kode.m2 { background-image: repeating-linear-gradient(135deg, var(--terracotta-a28) 0 2px, transparent 2px 7px); }

.legenda { list-style: none; margin: var(--sp-8) 0 var(--sp-6); padding: var(--sp-12) 0 0; border-top: 2px solid var(--ink); display: flex; flex-wrap: wrap; gap: var(--sp-8) var(--sp-16); font-size: var(--fs-14); }
.legenda li { display: flex; align-items: center; gap: var(--sp-8); }
.sw { flex: none; width: 26px; height: 16px; border-radius: var(--radius-md); border: 2px solid var(--ink); background: var(--cream); }
.sw.p { border-style: dashed; }
.sw.a { border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--terracotta-a55) 0 2px, var(--cream) 2px 6px); border-color: var(--terra); }
.catatan { margin: var(--sp-6) 0 0; font-size: var(--fs-13); opacity: 0.85; }
.kaki-denah { margin: var(--sp-10) 0 var(--sp-4); padding-top: var(--sp-12); border-top: 2px solid var(--ink); font-size: var(--fs-13); line-height: 1.45; color: var(--ink); }
.kaki-denah p { margin: 0 0 var(--sp-8); }
.kaki-denah a:not(.pil) { color: var(--green); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.kaki-denah a.pil { display: inline-flex; margin-top: var(--sp-4); text-decoration: none; color: inherit; font-size: var(--fs-14); }

/* tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .peta { bottom: auto; height: 62vh; }
  .panel {
    top: calc(var(--bar) + 62vh);
    height: auto !important;
    border: 0; border-top: 2px solid var(--ink);
    border-radius: 0;
    box-shadow: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    grid-template-areas: "r d" "n d";
    transition: none;
  }
  .grip, .pil-daftar { display: none; }
  .ringkas { grid-area: r; padding: var(--sp-6) 0 0 var(--sp-16); }
  .rincian { grid-area: n; overflow: auto; min-height: 0; padding: var(--sp-6) var(--sp-16) var(--sp-10); display: none; }
  .panel[data-mode="detail"] .rincian { display: block; }
  .panel[data-mode] .ringkas { display: block; }
  .daftar { grid-area: d; display: block !important; border-left: 2px solid var(--ink); padding-top: var(--sp-6); }
  .panel[data-mode="area"] .grup:not(.pilih) { display: block; }
  .panel[data-mode="area"] .legenda, .panel[data-mode="area"] .catatan { display: block; }
  .panel[data-mode="area"] .grup .lihat { display: inline-flex; }
  .panel[data-mode="area"] .grup .semua { display: none; }
  .r-atas { min-height: 0; }
  .seni { width: 84px; height: 72px; }
  .kode-besar { font-size: 38px; }
  .tutup { top: 6px; right: 12px; }
}

/* desktop */
@media (min-width: 1024px) {
  .peta { right: var(--kolom); }
  .panel {
    top: var(--bar); left: auto; width: var(--kolom); height: auto !important;
    border: 0; border-left: 2px solid var(--ink);
    border-radius: 0; box-shadow: none;
    transition: none;
  }
  .grip, .pil-daftar { display: none; }
  .panel[data-mode] .ringkas { display: block; }
  .ringkas { padding: var(--sp-10) 0 var(--sp-8) var(--sp-16); border-bottom: 2px solid var(--ink); }
  .filter { flex-wrap: wrap; height: auto; overflow: visible; padding: var(--sp-4) var(--sp-12) var(--sp-6) 0; gap: var(--sp-8); background-image: none; }
  .fl { flex: 1 0 100%; }
  .filter { align-items: center; }
  .filter .pil { padding: 0 var(--sp-12); font-size: var(--fs-14); min-width: 46px; }
  .filter { gap: var(--sp-6); }
  .rincian { display: block !important; padding: var(--sp-12) var(--sp-16); border-bottom: 2px solid var(--ink); }
  .rincian .kartu { position: relative; padding: var(--sp-12); border: 2px solid var(--ink); border-radius: var(--radius-16); background: var(--kertas-terang); box-shadow: 4px 4px 0 var(--terra); }
  .r-atas { padding-right: 46px; min-height: 0; }
  .tutup { top: 6px; right: 6px; }
  .daftar { display: block !important; }
  .panel[data-mode="area"] .grup:not(.pilih) { display: block; }
  .panel[data-mode="area"] .legenda, .panel[data-mode="area"] .catatan { display: block; }
  .panel[data-mode="area"] .grup .lihat { display: inline-flex; }
  .panel[data-mode="area"] .grup .semua { display: none; }
  .grup.pilih header h3::after { content: " •"; color: var(--terra); }
}

/* cetak */
.cetak { display: none; }
@media print {
  @page { size: A3 landscape; margin: 0; }
  html, body { width: 420mm; height: 297mm; overflow: hidden; background: var(--cream); -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  body::after { display: none; }
  .app { display: none; }
  .cetak {
    display: grid;
    grid-template-columns: 282mm 1fr;
    gap: 10mm;
    width: 420mm; height: 297mm;
    padding: 12mm;
    background: var(--cream);
    color: var(--ink);
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }
  .cetak .c-peta { min-width: 0; min-height: 0; }
  .cetak .c-peta svg { width: 100%; height: 100%; display: block; }
  .cetak .c-info { display: flex; flex-direction: column; gap: 6mm; min-width: 0; }
  .cetak h2 { margin: 0; font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: 40pt; line-height: 1; }
  .cetak .c-sub { margin: 2mm 0 0; font-size: 10pt; }
  .cetak .c-angka { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3mm; }
  .cetak .c-angka div { border: 0.6mm solid var(--ink); border-radius: 3mm; padding: 2mm 3mm; box-shadow: 1mm 1mm 0 var(--terra); background: var(--kertas-terang); }
  .cetak .c-angka b { display: block; font-family: "Atelier", "DM Sans", sans-serif; font-weight: 400; font-size: 24pt; line-height: 1; }
  .cetak .c-angka span { font-size: 8pt; font-weight: 600; }
  .cetak .c-legenda { display: flex; flex-wrap: wrap; gap: 2mm 5mm; font-size: 8.5pt; margin: 0; padding: 0; list-style: none; }
  .cetak .c-legenda li { display: flex; align-items: center; gap: 2mm; }
  .cetak .c-tabel { display: grid; grid-template-columns: 1fr 1fr; gap: 4mm; }
  .cetak table { width: 100%; border-collapse: collapse; font-family: "DM Mono", monospace; font-size: 6.8pt; }
  .cetak th { text-align: left; font-weight: 500; border-bottom: 0.4mm solid var(--ink); padding: 0.8mm 1mm; }
  .cetak td { padding: 0.9mm 1mm; border-bottom: 0.2mm solid var(--hijau-gelap-a30); white-space: nowrap; }
  .cetak td:first-child { font-weight: 500; }
}

@media (max-height: 480px) and (orientation: landscape) {
  .floating-nav { display: none !important; }
  body { padding-bottom: 0 !important; }
  .app { padding-bottom: 0 !important; }
  .daftar { padding-bottom: var(--sp-10); }
}