/* Tampilan: hijau klinik, putih bersih, angka antrean berhuruf monospace */
:root {
  --bg: #f3f6f5; --permukaan: #ffffff; --cekung: #e8eeec; --garis: #d3dcd9;
  --tinta: #13211f; --redup: #5b6b68;
  --aksen: #17705f; --aksen-tinta: #ffffff; --aksen-lembut: #dcefe9;
  --panggil: #b4621a; --panggil-lembut: #fbe9d8; --panggil-tinta: #ffffff;
  --selesai: #3d6b9a; --selesai-lembut: #e1ebf5;
  --bahaya: #b3372f; --bahaya-lembut: #f8e1df; --bahaya-tinta: #ffffff;
  --huruf: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --r: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0e1716; --permukaan: #152220; --cekung: #1c2b29; --garis: #2a3c39;
    --tinta: #e4eeeb; --redup: #93a6a2;
    --aksen: #4cc3a6; --aksen-tinta: #06201a; --aksen-lembut: #183a33;
    --panggil: #f0a45c; --panggil-lembut: #3b2a19; --panggil-tinta: #2a1606;
    --selesai: #8fb6e0; --selesai-lembut: #1d2b3b;
    --bahaya: #ef8a80; --bahaya-lembut: #3b1f1c; --bahaya-tinta: #2b0b08;
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--tinta); font: 16px/1.55 var(--huruf); }
a { color: var(--aksen); }
h1 { font-size: 1.6rem; line-height: 1.25; margin: 0 0 .4rem; text-wrap: balance; letter-spacing: -.01em; }
h2 { font-size: 1.15rem; margin: 1.6rem 0 .6rem; }
code { font-family: var(--mono); font-size: .9em; background: var(--cekung); padding: 1px 5px; border-radius: 4px; }
:focus-visible { outline: 3px solid var(--aksen); outline-offset: 2px; }
[hidden] { display: none !important; }

.isi { max-width: 1100px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
main.isi { padding-block: 24px 48px; min-height: 60vh; }
.publik main.isi { max-width: 760px; }
.sempit { max-width: 460px; margin: 0 auto; }
.kecil { font-size: .85rem; color: var(--redup); }
.pengantar { color: var(--redup); margin: 0 0 1.2rem; max-width: 62ch; }
.opsional { font-weight: 400; color: var(--redup); }
.kosong { color: var(--redup); padding: 20px; text-align: center; border: 1px dashed var(--garis); border-radius: var(--r); }

/* Kepala & kaki */
.atas { background: var(--permukaan); border-bottom: 1px solid var(--garis); }
.atas-isi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding-block: 12px; }
.merek { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tinta); min-width: 0; }
.merek b { display: block; font-size: 1.05rem; line-height: 1.2; }
.merek small { display: block; color: var(--redup); font-size: .8rem; }
.logo { width: 38px; height: 38px; border-radius: 9px; background: var(--aksen); display: grid; place-items: center; flex: none; }
.logo svg { width: 22px; height: 22px; fill: var(--aksen-tinta); }
.menu { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.menu a, .menu .link { padding: 7px 11px; border-radius: 8px; color: var(--redup); text-decoration: none; font-weight: 600; font-size: .92rem; }
.menu a:hover { background: var(--cekung); color: var(--tinta); }
.menu a[aria-current] { background: var(--aksen-lembut); color: var(--tinta); }
.inline { display: inline; margin: 0; }
.link { background: none; border: 0; font: inherit; color: var(--aksen); cursor: pointer; padding: 0; text-decoration: underline; }
.menu .link { text-decoration: none; }
.bawah { border-top: 1px solid var(--garis); color: var(--redup); font-size: .88rem; }
.bawah .isi { padding-block: 20px 32px; display: grid; gap: 4px; }

/* Pesan */
.pesan { padding: 12px 14px; border-radius: var(--r); margin: 0 0 16px; font-weight: 500; }
.pesan.ok { background: var(--aksen-lembut); }
.pesan.gagal { background: var(--bahaya-lembut); color: var(--tinta); border-left: 4px solid var(--bahaya); }
.pesan-mini { font-size: .88rem; font-weight: 600; }
.pesan-mini.ok { color: var(--aksen); }
.pengumuman { background: var(--panggil-lembut); border-radius: var(--r); padding: 12px 14px; margin-bottom: 20px; }

/* Tahapan pendaftaran */
.tahap { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 20px; counter-reset: t; flex-wrap: wrap; }
.tahap li { counter-increment: t; font-size: .85rem; color: var(--redup); display: flex; align-items: center; gap: 6px; }
.tahap li::before { content: counter(t); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--cekung); font-weight: 700; font-size: .78rem; }
.tahap li + li::after { order: -1; content: ""; width: 18px; height: 1px; background: var(--garis); }
.tahap li.kini { color: var(--tinta); font-weight: 700; }
.tahap li.kini::before { background: var(--aksen); color: var(--aksen-tinta); }
.tahap li.lewat::before { background: var(--aksen-lembut); color: var(--aksen); }
.kembali { margin: 0 0 8px; font-size: .92rem; }
.kembali a { text-decoration: none; font-weight: 600; }

/* Pilih poli */
.pilih-poli { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .pilih-poli { grid-template-columns: 1fr; } }
.kartu-poli { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--garis); border-radius: 12px; background: var(--permukaan); text-decoration: none; color: var(--tinta); min-width: 0; }
.kartu-poli:hover { border-color: var(--aksen); }
.kartu-poli b { display: block; font-size: 1.05rem; }
.kartu-poli small { display: block; color: var(--redup); font-size: .85rem; }
.kartu-poli .panah { margin-left: auto; font-size: 1.6rem; color: var(--redup); }
.kode { font-family: var(--mono); font-weight: 700; width: 40px; height: 40px; border-radius: 9px; background: var(--aksen-lembut); color: var(--aksen); display: grid; place-items: center; flex: none; }
td .kode { width: 32px; height: 32px; font-size: .9rem; }

/* Kalender ketersediaan */
.kalender { list-style: none; padding: 0; margin: 0 0 12px; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }
.hari { display: flex; flex-direction: column; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--garis); background: var(--permukaan); color: var(--tinta); text-decoration: none; min-height: 84px; }
.hari small { font-size: .76rem; color: var(--redup); }
.hari b { font-size: 1.1rem; }
.hari em { font-style: normal; font-size: .82rem; font-weight: 700; margin-top: auto; }
a.hari.buka { border-color: var(--aksen); }
a.hari.buka em { color: var(--aksen); }
a.hari.buka:hover { background: var(--aksen-lembut); }
a.hari.tipis { border-color: var(--panggil); }
a.hari.tipis em { color: var(--panggil); }
.hari.penuh, .hari.tutup { background: var(--cekung); color: var(--redup); border-style: dashed; }
.hari.penuh em { color: var(--bahaya); }
.legenda { font-size: .82rem; color: var(--redup); display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.titik { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.titik.buka { background: var(--aksen); } .titik.tipis { background: var(--panggil); } .titik.penuh { background: var(--garis); }
.info-kecil { margin-top: 32px; padding-top: 4px; border-top: 1px solid var(--garis); }

/* Ringkasan pilihan */
.ringkas { display: flex; gap: 12px; align-items: center; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; margin-bottom: 16px; }
.ringkas b { display: block; } .ringkas span:not(.kode) { color: var(--redup); font-size: .9rem; }

/* Formulir */
.kartu { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px; padding: 20px; margin-bottom: 20px; min-width: 0; }
.formulir { display: flex; flex-direction: column; gap: 14px; }
.formulir.lebar { max-width: none; }
.sempit-form { max-width: 420px; }
fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
legend { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--redup); margin-bottom: 4px; padding: 0; }
fieldset + fieldset { border-top: 1px solid var(--garis); padding-top: 16px; }
.sub { font-size: 1.05rem; margin: 0 0 4px; }
.kolom { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.kolom > label, .label { font-weight: 600; font-size: .92rem; }
.dua { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 560px) { .dua { grid-template-columns: 1fr; } }
input, select, textarea { font: inherit; font-size: 1rem; padding: 10px 12px; border: 1px solid var(--garis); border-radius: 8px; background: var(--bg); color: var(--tinta); width: 100%; min-width: 0; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--aksen); margin: 0; }
input[aria-invalid], select[aria-invalid], textarea[aria-invalid] { border-color: var(--bahaya); }
.angka { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.kapital { text-transform: uppercase; }
.pendek { max-width: 110px; }
.bantu { font-size: .82rem; color: var(--redup); }
.galat { font-size: .85rem; color: var(--bahaya); font-weight: 600; }
.pilihan { display: flex; flex-wrap: wrap; gap: 8px; }
.pilihan label { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 1px solid var(--garis); border-radius: 8px; background: var(--bg); cursor: pointer; font-weight: 500; }
.pilihan label:has(input:checked) { border-color: var(--aksen); background: var(--aksen-lembut); }
.setuju { display: flex; gap: 10px; align-items: flex-start; font-size: .9rem; }
.setuju input { margin-top: 4px; }
.jebakan { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Tombol */
.tombol { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font: inherit; font-weight: 700; font-size: .95rem; padding: 11px 18px; border-radius: 9px; border: 1px solid transparent; background: var(--aksen); color: var(--aksen-tinta); cursor: pointer; text-decoration: none; }
.tombol:hover { filter: brightness(1.06); }
.tombol:disabled { opacity: .45; cursor: not-allowed; }
.tombol.besar { padding: 14px 22px; font-size: 1.02rem; align-self: flex-start; }
.tombol.kecil { padding: 6px 11px; font-size: .84rem; border-radius: 7px; }
.tombol.garis { background: transparent; border-color: var(--garis); color: var(--tinta); }
.tombol.abu { background: var(--cekung); color: var(--tinta); }
.tombol.panggil { background: var(--panggil); color: var(--panggil-tinta); }
.tombol.bahaya { background: var(--bahaya); color: var(--bahaya-tinta); }
.bahaya-teks { color: var(--bahaya) !important; }
.aksi { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 8px; }

/* Tiket */
.tiket { background: var(--permukaan); border: 2px dashed var(--aksen); border-radius: 16px; padding: 22px; margin-bottom: 20px; }
.tiket-atas { text-align: center; padding-bottom: 16px; border-bottom: 1px dashed var(--garis); margin-bottom: 14px; }
.tiket .nomor { font-family: var(--mono); font-weight: 700; font-size: clamp(3rem, 14vw, 4.6rem); line-height: 1.05; color: var(--aksen); letter-spacing: -.02em; }
.rincian { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; }
@media (max-width: 480px) { .rincian { grid-template-columns: 1fr; } }
.rincian dt { font-size: .78rem; color: var(--redup); text-transform: uppercase; letter-spacing: .06em; }
.rincian dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.kode-booking dd { font-family: var(--mono); font-size: 1.25rem; letter-spacing: .08em; }
.posisi { margin: 16px 0 0; padding: 10px 12px; background: var(--panggil-lembut); border-radius: 8px; }
.catatan ul { padding-left: 20px; margin: 0; }
.catatan li { margin-bottom: 4px; }

/* Status */
.status { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; vertical-align: 1px; }
.status.menunggu { background: var(--cekung); color: var(--redup); }
.status.dipanggil { background: var(--panggil); color: var(--panggil-tinta); }
.status.selesai { background: var(--selesai-lembut); color: var(--selesai); }
.status.batal { background: var(--bahaya-lembut); color: var(--bahaya); }

/* Papan antrean publik */
.judul-baris { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.papan { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.papan-poli { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 14px; padding: 18px; text-align: center; }
.papan-poli h2 { margin: 0; font-size: 1rem; color: var(--redup); }
.papan-poli .nomor { font-family: var(--mono); font-weight: 700; font-size: 3rem; color: var(--panggil); line-height: 1.2; }
.papan-poli p { margin: 0; font-size: .85rem; color: var(--redup); }
.papan.layar .papan-poli .nomor { font-size: clamp(3rem, 9vw, 7rem); }
.papan.layar .papan-poli h2 { font-size: 1.4rem; }

/* Halaman petugas */
.admin main.isi { max-width: 1100px; }
.baris-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0; }
.baris-form input, .baris-form select { width: auto; flex: 1 1 160px; }
.baris-form input[type=date] { flex: 0 1 180px; }
.cari { margin-bottom: 16px; }
.ringkasan { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin: 12px 0 16px; }
.ring { background: var(--permukaan); border: 1px solid var(--garis); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.ring.aktif { border-color: var(--aksen); box-shadow: 0 0 0 1px var(--aksen); }
.ring-judul { font-weight: 700; color: var(--tinta); text-decoration: none; }
.ring-judul:hover { color: var(--aksen); }
.ring-now { font-family: var(--mono); font-size: 1.7rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.ring form { margin-top: 2px; }
progress.meter { width: 100%; height: 6px; border: 0; border-radius: 99px; background: var(--cekung); appearance: none; -webkit-appearance: none; overflow: hidden; }
progress.meter::-webkit-progress-bar { background: var(--cekung); border-radius: 99px; }
progress.meter::-webkit-progress-value { background: var(--aksen); border-radius: 99px; }
progress.meter::-moz-progress-bar { background: var(--aksen); border-radius: 99px; }
progress.meter.tipis::-webkit-progress-value { background: var(--panggil); }
progress.meter.tipis::-moz-progress-bar { background: var(--panggil); }
progress.meter.penuh::-webkit-progress-value { background: var(--bahaya); }
progress.meter.penuh::-moz-progress-bar { background: var(--bahaya); }
.saring { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.chip { font-size: .84rem; font-weight: 600; padding: 5px 12px; border-radius: 999px; border: 1px solid var(--garis); color: var(--redup); text-decoration: none; }
.chip[aria-current] { background: var(--tinta); border-color: var(--tinta); color: var(--bg); }
.antrean { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; }
.baris { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 14px; background: var(--permukaan); border: 1px solid var(--garis); border-radius: 10px; }
.baris.dipanggil { border-color: var(--panggil); background: var(--panggil-lembut); }
.baris.selesai, .baris.batal { opacity: .72; }
.baris .no { font-family: var(--mono); font-weight: 700; font-size: 1.2rem; min-width: 64px; font-variant-numeric: tabular-nums; }
.siapa { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.siapa > b { overflow-wrap: anywhere; }
.siapa > span { font-size: .84rem; color: var(--redup); overflow-wrap: anywhere; }
.siapa .keluhan { color: var(--tinta); }
.bayar { color: var(--aksen); }
.ops { display: flex; gap: 6px; flex-wrap: wrap; justify-content: flex-end; margin: 0; }
@media (max-width: 620px) { .baris { grid-template-columns: auto minmax(0, 1fr); } .ops { grid-column: 1 / -1; justify-content: flex-start; } }
.dua-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }
@media (max-width: 860px) { .dua-panel { grid-template-columns: 1fr; } }
.lencana { font-family: var(--mono); font-weight: 700; background: var(--aksen-lembut); color: var(--aksen); padding: 4px 10px; border-radius: 8px; }
.riwayat { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-direction: column; }
.riwayat li { padding: 9px 0; border-bottom: 1px solid var(--garis); font-size: .92rem; display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.riwayat li:last-child { border-bottom: 0; }

/* Tabel */
.tabel-bungkus { overflow-x: auto; border: 1px solid var(--garis); border-radius: 10px; background: var(--permukaan); margin-bottom: 16px; }
table { border-collapse: collapse; width: 100%; min-width: 680px; font-size: .92rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--garis); vertical-align: middle; }
th { font-size: .74rem; letter-spacing: .07em; text-transform: uppercase; color: var(--redup); background: var(--cekung); }
tr:last-child td { border-bottom: 0; }
td.angka { white-space: nowrap; }
tr.redup td { opacity: .55; }
td input { padding: 7px 9px; font-size: .92rem; }
td .baris-form input { flex: 1 1 120px; }
.halaman { display: flex; gap: 12px; align-items: center; justify-content: center; }

.teks { max-width: 68ch; }
.teks ul { padding-left: 20px; }
.langkah li { margin-bottom: 6px; }

@media (prefers-reduced-motion: no-preference) { .tombol, .kartu-poli, .hari { transition: background-color .15s, border-color .15s, filter .15s; } }

/* Cetak tiket */
@media print {
  .atas, .bawah, .tanpa-cetak, .pesan, .menu { display: none !important; }
  body { background: #fff; color: #000; }
  .tiket { border-color: #000; }
  .tiket .nomor { color: #000; }
}