/* ============================================================
   tempel.css — Divisi Tempel (app.meteors.pro)

   Berdiri sendiri, TIDAK memakai /css/theme.css panel: app ini disajikan dari
   domain lain dan harus tetap terbuka walau sinyal hilang, jadi seluruh
   rupanya satu berkas kecil yang ikut tersinggah service worker.

   Warna mengambil palet METEOR (azur dari logo) tapi kontrasnya dinaikkan:
   layar ini dibaca sambil berdiri di bawah matahari Bahodopi. Tidak ada teks
   abu muda di atas putih di berkas ini — kalau sebuah keterangan tidak layak
   kontras penuh, keterangannya memang tidak perlu ada.
   ============================================================ */

:root {
  --azur: #2472E0;
  --azur-tua: #16499A;
  --azur-malam: #102A54;
  --azur-muda: #EEF5FF;
  --bara: #E8730D;
  --hijau: #137547;
  --merah: #C0271A;
  --kertas: #FFFFFF;
  --latar: #EDF1F6;
  --garis: #C4CDDA;
  --tulis: #1B2430;
  --tulis-redup: #44525F;   /* 7,2:1 di atas putih — masih terbaca di matahari */

  --r: 14px;
  --sp: 16px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0; padding: 0;
  background: var(--latar);
  color: var(--tulis);
  font: 16px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overscroll-behavior-y: contain;
}

/* Satu layar penuh per langkah — tanpa sidebar, tanpa tab. */
.layar { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
[hidden] { display: none !important; }

/* ── Kop ───────────────────────────────────────────────────── */
.kop {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: var(--azur-malam); color: #fff;
  padding: calc(env(safe-area-inset-top) + 10px) var(--sp) 10px;
  position: sticky; top: 0; z-index: 5;
}
.kop-judul { font-weight: 700; font-size: 1.02rem; }
.kop-sub { font-size: .82rem; opacity: .9; }
.kop-isi-kanan { min-width: 56px; }
.tbl-kop {
  background: rgba(255,255,255,.16); color: #fff; border: 0;
  border-radius: 10px; padding: 9px 12px; font: inherit; font-weight: 650;
  min-height: 40px;
}

/* ── Isi ───────────────────────────────────────────────────── */
.isi {
  flex: 1; padding: var(--sp);
  padding-bottom: calc(env(safe-area-inset-bottom) + 28px);
  max-width: 560px; width: 100%; margin: 0 auto;
}
.isi-tengah { text-align: center; }

.judul-bagian {
  font-size: .82rem; text-transform: uppercase; letter-spacing: .08em;
  color: var(--tulis-redup); margin: 22px 0 8px;
  display: flex; align-items: center; justify-content: space-between;
}
.judul-bagian:first-child { margin-top: 4px; }
.nota { font-size: .88rem; color: var(--tulis-redup); margin: 6px 0 10px; }
.nota-sejajar { text-transform: none; letter-spacing: 0; font-weight: 400; }
.memuat { color: var(--tulis-redup); padding: 10px 0; }
.galat {
  background: #FDECEA; border: 1px solid var(--merah); color: #7A1710;
  border-radius: 10px; padding: 10px 12px; margin: 10px 0; font-size: .92rem;
}

/* ── Tombol ────────────────────────────────────────────────── */
.tbl {
  font: inherit; font-weight: 700; border-radius: 12px; border: 2px solid transparent;
  padding: 13px 16px; min-height: 48px; cursor: pointer;
}
.tbl-utama { background: var(--azur); color: #fff; }
.tbl-utama:active { background: var(--azur-tua); }
.tbl-kedua { background: #fff; color: var(--azur-tua); border-color: var(--garis); }
.tbl-besar { min-height: 58px; font-size: 1.06rem; letter-spacing: .02em; }
.tbl-blok { display: block; width: 100%; margin-top: 14px; }
.tbl:disabled { background: #D7DDE6; color: #5D6873; border-color: #D7DDE6; cursor: default; }
.tbl-ikon {
  background: #fff; border: 2px solid var(--garis); border-radius: 12px;
  min-width: 48px; min-height: 48px; font-size: 1.1rem;
}
.tbl-tautan {
  background: none; border: 0; color: var(--azur-tua); font: inherit;
  font-size: .82rem; text-decoration: underline; padding: 4px;
}
.tombol-baris { display: flex; gap: 10px; margin-top: 12px; }
.tombol-baris > .tbl { flex: 1; }

/* Dua tombol kirim sama besar, sama menonjol (keputusan Bos). Yang membedakan
   cuma baris penjelas di bawahnya — bukan ukuran, bukan warna. */
.kirim-tombol { margin-top: 18px; }
.tbl-penjelas {
  margin: 6px 2px 20px; font-size: .88rem; color: var(--tulis-redup); text-align: center;
}

/* ── Langkah ───────────────────────────────────────────────── */
.langkah-bar { display: flex; gap: 6px; margin-bottom: 14px; }
.langkah-bar i { flex: 1; height: 5px; border-radius: 3px; background: var(--garis); }
.langkah-bar i.aktif { background: var(--azur); }

/* ── Isian ─────────────────────────────────────────────────── */
.label { display: block; font-weight: 650; font-size: .9rem; margin: 14px 0 6px; }
.isian {
  width: 100%; font: inherit; color: var(--tulis); background: #fff;
  border: 2px solid var(--garis); border-radius: 12px; padding: 13px 14px; min-height: 48px;
}
.isian:focus { outline: 3px solid #B6D2FF; border-color: var(--azur); }
.isian-tempel { font-size: .92rem; word-break: break-all; }
.pin-baris { display: flex; gap: 10px; }
.pin-baris .isian { flex: 1; }

.pemisah { display: flex; align-items: center; gap: 12px; margin: 18px 0 10px; color: var(--tulis-redup); }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--garis); }

/* ── Kartu & daftar ────────────────────────────────────────── */
.kartu {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--r);
  padding: 14px; margin: 12px 0;
}
.kartu-baris { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; }
.kartu-baris b { font-variant-numeric: tabular-nums; }
.kartu-peringatan { background: #FFF6EC; border-color: var(--bara); }
.kartu-peringatan b { color: #8A4406; }

.kantong { display: flex; flex-wrap: wrap; gap: 10px; }
.kantong-item {
  background: #fff; border: 1px solid var(--garis); border-radius: 12px;
  padding: 10px 14px; min-width: 104px;
}
.kantong-nama { font-size: .82rem; color: var(--tulis-redup); }
.kantong-jml { font-size: 1.5rem; font-weight: 800; line-height: 1.1; }

.daftar { display: flex; flex-direction: column; gap: 8px; }
.baris {
  background: #fff; border: 1px solid var(--garis); border-radius: 12px;
  padding: 12px 14px; display: flex; align-items: center; gap: 12px;
}
.baris-kode { font-weight: 800; letter-spacing: .02em; }
.baris-sub { font-size: .84rem; color: var(--tulis-redup); }
.baris-kanan { margin-left: auto; text-align: right; }
.lencana {
  display: inline-block; font-size: .74rem; font-weight: 800; letter-spacing: .04em;
  padding: 4px 9px; border-radius: 999px; background: var(--azur-muda); color: var(--azur-tua);
}
.lencana[data-status="TERSEDIA"] { background: #E3F5EA; color: #0B5133; }
.lencana[data-status="DRAFT"]    { background: #FFF2D6; color: #6B4700; }
.lencana[data-status="TERJUAL"], .lencana[data-status="DIPESAN"] { background: #EDE7FB; color: #3F2C7A; }
.lencana[data-status="HILANG"]   { background: #FDECEA; color: #7A1710; }
.baris-gambar { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--garis); }

/* ── Pilihan (area, produk, projek) ────────────────────────── */
.pilihan { display: flex; flex-wrap: wrap; gap: 10px; }
.pilihan-tegak { flex-direction: column; }
.pilih {
  background: #fff; border: 2px solid var(--garis); border-radius: 12px;
  padding: 12px 14px; font: inherit; font-weight: 650; min-height: 48px;
  text-align: left; cursor: pointer; color: var(--tulis);
}
.pilihan-tegak .pilih { width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.pilih small { font-weight: 400; color: var(--tulis-redup); }
.pilih[aria-pressed="true"] { border-color: var(--azur); background: var(--azur-muda); }
.pilih[aria-pressed="true"] small { color: var(--azur-tua); }
.pilih-saran::after { content: " · terdekat"; font-size: .76rem; color: var(--bara); font-weight: 700; }

/* ── Peta ──────────────────────────────────────────────────── */
.peta-kotak { height: 190px; border-radius: var(--r); border: 1px solid var(--garis); overflow: hidden; isolation: isolate; margin: 12px 0; }
.peta-pin { height: 300px; position: relative; }

/* Silang penanda titik tengah peta. Digambar DI ATAS peta dan tidak bisa
   diketuk, supaya geseran jari tetap sampai ke petanya. */
.pin-silang { position: absolute; inset: 0; z-index: 400; pointer-events: none; }
.pin-silang::before, .pin-silang::after {
  content: ""; position: absolute; background: #E0261C;
  box-shadow: 0 0 0 1px rgba(255,255,255,.9);
}
.pin-silang::before { left: 50%; top: 50%; width: 2px; height: 34px; transform: translate(-50%, -50%); }
.pin-silang::after  { left: 50%; top: 50%; width: 34px; height: 2px; transform: translate(-50%, -50%); }

/* ── Antrean ───────────────────────────────────────────────── */
.antre-menunggu { border-left: 5px solid var(--bara); }
.antre-mengirim { border-left: 5px solid var(--azur); }
.antre-ditolak  { border-left: 5px solid var(--merah); }
.antre-aksi { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.antre-aksi button {
  font: inherit; font-size: .86rem; font-weight: 650; border-radius: 10px;
  border: 2px solid var(--garis); background: #fff; color: var(--azur-tua);
  padding: 9px 12px; min-height: 42px;
}
.antre-aksi button.bahaya { color: var(--merah); }
.baris-tegak { display: block; }

/* ── Foto ──────────────────────────────────────────────────── */
.foto-petak { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin: 12px 0; }
.foto-sel { position: relative; border-radius: 12px; overflow: hidden; border: 1px solid var(--garis); background: #fff; }
.foto-sel img { display: block; width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.foto-aksi { display: flex; }
.foto-aksi button {
  flex: 1; border: 0; border-top: 1px solid var(--garis); background: #fff;
  font: inherit; font-size: .86rem; font-weight: 650; padding: 10px 0; min-height: 44px; color: var(--azur-tua);
}
.foto-aksi button.bahaya { color: var(--merah); border-left: 1px solid var(--garis); }
.foto-nomor {
  position: absolute; top: 6px; left: 6px; background: rgba(16,42,84,.88); color: #fff;
  font-size: .74rem; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}

/* ── Hasil ─────────────────────────────────────────────────── */
.hasil-tanda { font-size: 3rem; line-height: 1; margin: 30px 0 6px; color: var(--hijau); }
.hasil-kode { font-size: 2.1rem; font-weight: 800; letter-spacing: .04em; }
.hasil-status { font-weight: 700; color: var(--tulis-redup); margin-bottom: 8px; }

/* ── Editor ────────────────────────────────────────────────── */
.editor {
  position: fixed; inset: 0; z-index: 50; background: #0B0F14;
  display: flex; flex-direction: column;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
.editor-panggung { flex: 1; position: relative; touch-action: none; overflow: hidden; }
.editor-panggung canvas { position: absolute; inset: 0; }
.editor-alat {
  display: flex; gap: 8px; padding: 8px 10px; overflow-x: auto;
  background: #141A22; border-top: 1px solid #222C38;
}
.ed-tbl {
  flex: 0 0 auto; background: #202934; color: #fff; border: 1px solid #2E3A48;
  border-radius: 10px; padding: 11px 14px; min-height: 46px; font: inherit; font-weight: 650;
}
.ed-tbl:active { background: #2E3A48; }
.ed-tbl-terang { background: var(--azur); border-color: var(--azur); }
.ed-tbl-bahaya { color: #FFB3AC; }
.editor-kaki { display: flex; gap: 8px; padding: 10px; background: #141A22; }
.editor-kaki .tbl { flex: 1; }

/* ── Tanya (teks objek) ────────────────────────────────────── */
.tanya {
  position: fixed; inset: 0; z-index: 60; background: rgba(8,12,18,.72);
  display: flex; align-items: flex-end; justify-content: center;
}
.tanya-kotak {
  background: #fff; border-radius: 16px 16px 0 0; padding: 16px;
  width: 100%; max-width: 560px;
  padding-bottom: calc(env(safe-area-inset-bottom) + 16px);
}

/* ── Tirai & toast ─────────────────────────────────────────── */
.tirai {
  position: fixed; inset: 0; z-index: 70; background: rgba(8,12,18,.6);
  display: flex; align-items: center; justify-content: center;
}
.tirai-isi {
  background: #fff; border-radius: 14px; padding: 18px 22px;
  display: flex; align-items: center; gap: 12px; font-weight: 650;
}
.putar {
  width: 20px; height: 20px; border-radius: 50%;
  border: 3px solid var(--garis); border-top-color: var(--azur);
  animation: putar 1s linear infinite;
}
@keyframes putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .putar { animation-duration: 3s; } }

.toast {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: calc(env(safe-area-inset-bottom) + 20px); z-index: 80;
  background: #1B2430; color: #fff; padding: 13px 18px; border-radius: 12px;
  max-width: 92vw; font-weight: 600; box-shadow: 0 8px 24px rgba(0,0,0,.3);
}

/* ── Login ─────────────────────────────────────────────────── */
.layar-login { justify-content: center; align-items: center; background: var(--azur-malam); padding: var(--sp); }
.login-kotak {
  background: #fff; border-radius: 18px; padding: 24px; width: 100%; max-width: 380px; text-align: center;
}
.login-kotak h1 { font-size: 1.5rem; margin: 10px 0 2px; }
.login-sub { color: var(--tulis-redup); margin: 0 0 8px; }
.login-logo { border-radius: 16px; }
.login-kotak .label, .login-kotak .isian { text-align: left; }
.login-nota { font-size: .84rem; color: var(--tulis-redup); margin: 12px 0 0; }