/* ============================================================
   tempel.css — Divisi Tempel (dt.elang.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 ELANG (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.
   ============================================================ */

/* ── Token ──────────────────────────────────────────────────────────
   SEMUA warna di berkas ini datang dari token. Satu warna mentah yang
   tertinggal di luar blok ini berarti satu elemen yang tetap putih waktu
   mode gelap menyala — teks putih di atas kartu putih, dan operator cuma
   melihat kotak kosong. Itu kelas bug yang paling sering dibawa mode gelap,
   jadi ada tes yang menjaganya (divisiTempelApp.test.js).

   Kecualinya cuma EDITOR FOTO: permukaannya memang hitam di kedua mode, dan
   itu bukan kelalaian — foto dinilai paling jujur di atas hitam. Warnanya
   ditulis mentah di bloknya sendiri supaya jelas itu pilihan, bukan token
   yang lupa diganti.

   MODE TERANG TETAP BAWAAN SIANG. Operator bekerja di bawah matahari
   Bahodopi, dan di sana layar gelap praktis tidak terbaca. Mode gelap ada
   untuk kerja malam — kupon memang sering disembunyikan selepas magrib. */
:root {
  --azur: #2472E0;
  --azur-tua: #16499A;
  --azur-muda: #EEF5FF;
  --bara: #E8730D;
  --hijau: #137547;
  --merah: #C0271A;

  --latar: #EDF1F6;         /* latar halaman */
  --kertas: #FFFFFF;        /* permukaan kartu, tombol kedua, isian */
  --kertas-2: #FFFFFF;      /* permukaan di atas permukaan (bilah aksi foto) */
  --garis: #C4CDDA;
  --tulis: #1B2430;
  --tulis-redup: #44525F;   /* 7,2:1 di atas putih — masih terbaca di matahari */
  --tautan: #16499A;        /* teks yang bisa diketuk di atas permukaan terang */
  --kop: #102A54;           /* bilah atas + latar layar login */
  --fokus: #B6D2FF;

  --mati-latar: #D7DDE6;    /* tombol mati */
  --mati-tulis: #5D6873;
  --pilih-latar: #EEF5FF;   /* pilihan yang sedang aktif */

  --galat-latar: #FDECEA;
  --galat-garis: #C0271A;
  --galat-tulis: #7A1710;
  --ingat-latar: #FFF6EC;   /* kartu peringatan (akurasi rendah, titik jauh) */
  --ingat-tulis: #8A4406;

  --st-umum-l: #EEF5FF; --st-umum-t: #16499A;
  --st-ada-l:  #E3F5EA; --st-ada-t:  #0B5133;
  --st-draf-l: #FFF2D6; --st-draf-t: #6B4700;
  --st-jual-l: #EDE7FB; --st-jual-t: #3F2C7A;
  --st-hil-l:  #FDECEA; --st-hil-t:  #7A1710;

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

/* Palet malam. Ditulis sekali sebagai daftar token, lalu dipanggil dua kali:
   oleh setelan HP (prefers-color-scheme) dan oleh pilihan operator sendiri
   (data-tema="gelap"). Yang dipilih operator selalu menang atas setelan HP —
   di kedua arah. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="terang"]) {
    /* Isi tombol TIDAK diterangkan: teks putih di atas #3B82F6 cuma 3,4:1,
       di atas #2472E0 lulus 4,6:1. Yang diterangkan hanya teks tautan. */
    --azur: #2472E0;
    --azur-tua: #1B5BC0;
    --azur-muda: #16233A;
    --bara: #FFA94D;
    --hijau: #3DDC84;
    --merah: #FF6B5E;

    --latar: #0D131C;
    --kertas: #161E2A;
    --kertas-2: #1C2634;
    --garis: #2E3A4B;
    --tulis: #E8EDF4;
    --tulis-redup: #AFBCCB;
    --tautan: #9CC4FF;
    --kop: #0A1220;
    --fokus: #1D4ED8;

    --mati-latar: #222C3A;
    --mati-tulis: #8A97A6;
    --pilih-latar: #16233A;

    --galat-latar: #2A1412;
    --galat-garis: #FF6B5E;
    --galat-tulis: #FFC7C1;
    --ingat-latar: #2A1C0C;
    --ingat-tulis: #FFC98A;

    --st-umum-l: #16233A; --st-umum-t: #9CC4FF;
    --st-ada-l:  #0E2A1C; --st-ada-t:  #7CE0AA;
    --st-draf-l: #2C2208; --st-draf-t: #FFD98A;
    --st-jual-l: #211A3A; --st-jual-t: #C3B5F5;
    --st-hil-l:  #2A1412; --st-hil-t:  #FFB3AC;
  }
}

:root[data-tema="gelap"] {
  /* Lihat alasan di blok prefers-color-scheme di atas. */
  --azur: #2472E0;
  --azur-tua: #1B5BC0;
  --azur-muda: #16233A;
  --bara: #FFA94D;
  --hijau: #3DDC84;
  --merah: #FF6B5E;

  --latar: #0D131C;
  --kertas: #161E2A;
  --kertas-2: #1C2634;
  --garis: #2E3A4B;
  --tulis: #E8EDF4;
  --tulis-redup: #AFBCCB;
  --tautan: #9CC4FF;
  --kop: #0A1220;
  --fokus: #1D4ED8;

  --mati-latar: #222C3A;
  --mati-tulis: #8A97A6;
  --pilih-latar: #16233A;

  --galat-latar: #2A1412;
  --galat-garis: #FF6B5E;
  --galat-tulis: #FFC7C1;
  --ingat-latar: #2A1C0C;
  --ingat-tulis: #FFC98A;

  --st-umum-l: #16233A; --st-umum-t: #9CC4FF;
  --st-ada-l:  #0E2A1C; --st-ada-t:  #7CE0AA;
  --st-draf-l: #2C2208; --st-draf-t: #FFD98A;
  --st-jual-l: #211A3A; --st-jual-t: #C3B5F5;
  --st-hil-l:  #2A1412; --st-hil-t:  #FFB3AC;
}

* { 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(--kop); 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;
}
.tbl-kop-ikon { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; padding: 9px 10px; }
/* Berputar selama memeriksa versi baru, supaya ketukannya terasa diterima. */
.tbl-kop-ikon[data-sibuk="1"] svg { animation: putar 1s linear infinite; }

/* ── 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: var(--galat-latar); border: 1px solid var(--galat-garis); color: var(--galat-tulis);
  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: var(--kertas); color: var(--tautan); 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: var(--mati-latar); color: var(--mati-tulis); border-color: var(--mati-latar); cursor: default; }
.tbl-ikon {
  background: var(--kertas); color: var(--tulis); 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(--tautan); 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: var(--kertas);
  border: 2px solid var(--garis); border-radius: 12px; padding: 13px 14px; min-height: 48px;
}
.isian:focus { outline: 3px solid var(--fokus); 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: var(--kertas); 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: var(--ingat-latar); border-color: var(--bara); }
.kartu-peringatan b { color: var(--ingat-tulis); }

.kantong { display: flex; flex-wrap: wrap; gap: 10px; }
.kantong-item {
  background: var(--kertas); 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: var(--kertas); 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(--st-umum-l); color: var(--st-umum-t);
}
.lencana[data-status="TERSEDIA"] { background: var(--st-ada-l);  color: var(--st-ada-t); }
.lencana[data-status="DRAFT"]    { background: var(--st-draf-l); color: var(--st-draf-t); }
.lencana[data-status="TERJUAL"], .lencana[data-status="DIPESAN"] { background: var(--st-jual-l); color: var(--st-jual-t); }
.lencana[data-status="HILANG"]   { background: var(--st-hil-l);  color: var(--st-hil-t); }
.baris-gambar { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; border: 1px solid var(--garis); }

/* ── Tab daftar titik ──────────────────────────────────────── */
.tab { display: flex; gap: 8px; margin-bottom: 10px; }
.tab-tbl {
  flex: 1; font: inherit; font-weight: 650; font-size: .94rem;
  background: var(--kertas); color: var(--tulis);
  border: 2px solid var(--garis); border-radius: 12px;
  padding: 11px 10px; min-height: 46px; cursor: pointer;
}
.tab-tbl[aria-selected="true"] { border-color: var(--azur); background: var(--pilih-latar); color: var(--tautan); }

/* ── Pilihan (area, produk, projek) ────────────────────────── */
.pilihan { display: flex; flex-wrap: wrap; gap: 10px; }
.pilihan-tegak { flex-direction: column; }
.pilih {
  background: var(--kertas); 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(--pilih-latar); }
.pilih[aria-pressed="true"] small { color: var(--tautan); }
/* Memakai --ingat-tulis, bukan --bara: oranye bara itu warna PENANDA, dan
   sebagai teks di atas putih cuma 3,3:1 — tidak terbaca di bawah matahari,
   yang justru keadaan app ini dipakai. */
.pilih-saran::after { content: " · terdekat"; font-size: .76rem; color: var(--ingat-tulis); font-weight: 700; }

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

/* Pin yang diseret (20 Okt 2026, sama seperti peta Tambah Titik di panel).
   Bayangannya supaya tetap terlihat di atas citra satelit yang ramai. */
.pin-geser { background: none; border: 0; }
.pin-geser svg { display: block; filter: drop-shadow(0 2px 3px rgba(0,0,0,.45)); }

/* ── 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, .baris-aksi { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.antre-aksi button, .baris-aksi button {
  font: inherit; font-size: .86rem; font-weight: 650; border-radius: 10px;
  border: 2px solid var(--garis); background: var(--kertas-2); color: var(--tautan);
  padding: 9px 12px; min-height: 42px;
}
.antre-aksi button.bahaya { color: var(--merah); }
.baris-tegak { display: block; }
/* DRAFT yang produknya belum dipilih: pekerjaan rumah yang harus kelihatan. */
.baris-ingat { color: var(--ingat-tulis); font-weight: 700; }
/* Tautan peta di baris & kartu: biru bawaan browser nyaris tak terbaca di
   mode gelap. */
.baris-sub a, .kartu-baris a { color: var(--tautan); font-weight: 650; }

/* ── 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: var(--kertas); }
.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: var(--kertas-2);
  font: inherit; font-size: .86rem; font-weight: 650; padding: 10px 0; min-height: 44px; color: var(--tautan);
}
.foto-aksi button.bahaya { color: var(--merah); border-left: 1px solid var(--garis); }
.foto-aksi button.kedua { 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 ────────────────────────────────────────────────────
   SENGAJA hitam di kedua mode, bukan token yang lupa diganti: foto dinilai
   paling jujur di atas hitam, dan panah putih di atas foto terang harus
   terlihat sama di siang maupun malam. */
.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; }
/* Enam alat sejak stiker kiriman Bos (23 Okt 2026): dua baris tiga kolom,
   supaya Teks, Putar & Potong tidak terdorong keluar layar HP dan harus
   digeser dulu untuk ditemukan. Stiker memakai gambarnya sendiri sebagai
   ikon, dengan label kecil di bawahnya. */
#ed-alat { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); overflow-x: visible; }
#ed-alat .ed-tbl { min-width: 0; padding: 8px 6px; white-space: nowrap; }
.ed-tbl-stiker {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: .8rem; line-height: 1.1;
}
.ed-tbl-stiker img { height: 18px; width: auto; max-width: 100%; display: block; }
.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: var(--kertas); 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: var(--kertas); color: var(--tulis); 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;
  border: 1px solid var(--garis);
  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(--kop); padding: var(--sp); }
.login-kotak {
  background: var(--kertas); 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; }