/* ============================================================
   APIK Gianyar — Antarmuka publik v3
   Bahasa desain APESEL: Plus Jakarta Sans + IBM Plex Mono
   Navy #06213E · Gold #E9B967 · BG #F5F7FA
   ============================================================ */
:root {
  --navy: #06213E;
  --navy-2: #0A3560;
  --navy-soft: #123E6B;
  --gold: #E9B967;
  --gold-bright: #F2C06B;
  --gold-dark: #B1935D;
  --bg: #F5F7FA;
  --card: #FFFFFF;
  --ink: #1B2A3D;
  --muted: #6B7A90;
  --line: #E3E9F1;
  /* Warna status (--ok/--warn/--danger/--info beserta -bg dan -ink)
     didefinisikan HANYA di assets/css/warna.css. Jangan menuliskannya
     ulang di sini — dua sumber warna pasti berbeda cepat atau lambat. */
  --radius: 14px;
  --shadow: 0 6px 24px rgba(6,33,62,.07);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { scroll-behavior: smooth; }
body.kt-publik {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: .96rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { font-weight: 700; letter-spacing: -.01em; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-weight: 600; }
.kt-wrap { max-width: 720px; margin: 0 auto; padding: 0 1rem 4.5rem; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
main.kt-wrap > * { animation: fadeUp .28s ease both; }

/* ---------- Header lengket ---------- */
.kt-kop {
  position: sticky; top: 0; z-index: 1030;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  color: #DCE6F2;
  border-bottom: 3px solid var(--gold);
  box-shadow: 0 6px 24px rgba(6,33,62,.35);
}
/* Ruang aman perangkat (poni layar / bilah status pada aplikasi terpasang)
   ditambahkan ke jarak dalam. Tanpa ini logo, tombol cari, dan tombol masuk
   petugas tertimpa jam & baterai sehingga tidak bisa diketuk. Pada perangkat
   tanpa area aman, env() bernilai 0 -> tampilan tidak berubah sama sekali. */
.kt-kop .kt-wrap {
  padding: calc(.55rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right))
           .55rem calc(1rem + env(safe-area-inset-left));
  display: flex; align-items: center; gap: .7rem;
}
.kt-kop img.logo {
  width: 42px; height: 42px; flex: none; border-radius: 50%;
  background: #fff; padding: 2px; box-shadow: 0 0 0 2px rgba(233,185,103,.5);
}
.kt-kop .t-app { font-size: 1.18rem; font-weight: 800; letter-spacing: .01em; line-height: 1.05; color: #fff; }
.kt-kop .t-app .aksen { color: var(--gold); }
.kt-kop .t-upt { font-size: .66rem; opacity: .75; }
.kt-kop a { color: inherit; text-decoration: none; }
.kt-kop .aksi { margin-left: auto; display: flex; gap: .4rem; }
.kt-kop .btn-kop {
  display: inline-flex; align-items: center; gap: .35rem;
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  padding: .4rem .8rem; font-size: .8rem; font-weight: 600; color: #DCE6F2;
  background: rgba(255,255,255,.06);
  transition: background .18s, transform .12s;
}
.kt-kop .btn-kop:hover { background: rgba(255,255,255,.12); }
.kt-kop .btn-kop:active { transform: scale(.97); }
.kt-kop .btn-kop.emas { background: var(--gold); border-color: var(--gold); color: var(--navy); font-weight: 700; }
.kt-kop .btn-kop.emas:hover { background: var(--gold-dark); color: #fff; }

/* ---------- Hero ---------- */
.kt-hero {
  margin: 1.1rem 0 0;
  background:
    radial-gradient(700px 320px at 90% -80px, rgba(233,185,103,.2), transparent 60%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 70%, var(--navy-soft) 100%);
  border-radius: calc(var(--radius) + 4px);
  color: #EAF0F8;
  padding: 1.6rem 1.35rem 1.5rem;
  position: relative; overflow: hidden;
  box-shadow: 0 16px 44px rgba(6,33,62,.25);
}
.kt-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0 0 .35rem; color: #fff; }
.kt-hero h1 .aksen { color: var(--gold-bright); }
.kt-hero p { margin: 0 0 1.1rem; font-size: .9rem; opacity: .85; }
.kt-cari-box { display: flex; gap: .5rem; position: relative; z-index: 1; }
.kt-cari-box .form-control { border: none; border-radius: 12px; padding: .85rem 1rem; font-size: 1rem; background: #fff; }
.kt-cari-box .btn-cari {
  flex: none; border: none; border-radius: 12px; width: 54px;
  background: var(--gold); color: var(--navy); font-size: 1.15rem; font-weight: 700;
  transition: background .18s, transform .12s;
}
.kt-cari-box .btn-cari:hover { background: var(--gold-dark); color: #fff; }
.kt-cari-box .btn-cari:active { transform: scale(.95); }
.kt-hero .hint { font-size: .76rem; opacity: .68; margin-top: .6rem; }

/* ---------- Kartu ---------- */
.kt-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.25rem 1.15rem;
  margin-top: 1rem;
  box-shadow: var(--shadow);
}
.kt-card h2 { font-size: 1.02rem; font-weight: 700; color: var(--navy); margin: 0 0 .8rem; display: flex; align-items: center; gap: .5rem; }
.kt-card h2 i { color: var(--gold-dark); }

/* ---------- Langkah ---------- */
.kt-langkah { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; }
.kt-langkah .s {
  background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--gold);
  border-radius: var(--radius); padding: .85rem .7rem; text-align: center;
  box-shadow: var(--shadow);
  transition: transform .18s ease, box-shadow .18s ease;
}
.kt-langkah .s:hover { transform: translateY(-3px); box-shadow: 0 12px 30px rgba(6,33,62,.12); }
.kt-langkah .s .n {
  width: 32px; height: 32px; border-radius: 10px;
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  color: var(--navy); font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
  margin-bottom: .4rem; font-size: .9rem;
}
.kt-langkah .s .t { font-size: .74rem; color: var(--muted); line-height: 1.35; }
.kt-langkah .s .t b { color: var(--ink); display: block; font-size: .82rem; margin-bottom: .1rem; }

/* ---------- Form ---------- */
.kt-label { font-weight: 600; color: var(--navy); margin-bottom: .3rem; display: block; font-size: .84rem; }
.kt-help { font-size: .78rem; color: var(--muted); margin-top: .3rem; }
.kt-publik .form-control, .kt-publik .form-select {
  border: 1px solid var(--line); border-radius: 10px;
  padding: .68rem .85rem; font-size: 1rem; background: #fff;
  min-height: 46px;
  transition: border-color .15s, box-shadow .15s;
}
.kt-publik .form-control:focus, .kt-publik .form-select:focus {
  border-color: var(--gold); box-shadow: 0 0 0 .2rem rgba(233,185,103,.25);
}
.btn-kt {
  background: var(--navy); border: none; color: #fff;
  border-radius: 12px; padding: .85rem 1.4rem; font-size: 1rem; font-weight: 700;
  width: 100%; min-height: 48px;
  transition: background .18s, transform .12s;
}
.btn-kt:hover, .btn-kt:focus { background: var(--navy-2); color: #fff; }
.btn-kt:active { transform: scale(.985); }
.btn-kt-2 {
  background: #fff; border: 1px solid var(--navy); color: var(--navy);
  border-radius: 12px; padding: .78rem 1.3rem; font-weight: 600; min-height: 46px;
  transition: background .15s, color .15s;
}
.btn-kt-2:hover { background: var(--navy); color: #fff; }
.btn-emas {
  background: var(--gold); border: none; color: var(--navy); border-radius: 12px;
  padding: .85rem 1.4rem; font-weight: 700; width: 100%; min-height: 48px;
  transition: background .18s, transform .12s;
}
.btn-emas:hover { background: var(--gold-dark); color: #fff; }
.btn-emas:active { transform: scale(.985); }
.btn-kt:focus-visible, .btn-emas:focus-visible, .btn-kt-2:focus-visible { outline: 3px solid rgba(233,185,103,.6); outline-offset: 1px; }
.kt-kembali {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--navy-2); font-weight: 600; text-decoration: none;
  font-size: .88rem; margin-top: 1rem; padding: .45rem .2rem;
}
.kt-kembali:hover { color: var(--gold-dark); }

/* ---------- Kartu pilihan ---------- */
.kt-pilih { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .55rem; }
.kt-pilih input { position: absolute; opacity: 0; }
.kt-pilih label {
  border: 1px solid var(--line); border-radius: 12px;
  padding: .72rem .55rem; text-align: center; cursor: pointer; background: #fff;
  font-size: .86rem; min-height: 48px;
  transition: border-color .15s, background .15s, box-shadow .15s, transform .12s;
}
.kt-pilih label:hover { transform: translateY(-1px); }
.kt-pilih label .h { font-weight: 700; color: var(--navy); display: block; font-size: .93rem; }
.kt-pilih label small { color: var(--muted); }
.kt-pilih input:checked + label {
  border-color: var(--gold-dark); background: linear-gradient(120deg, rgba(233,185,103,.18), rgba(233,185,103,.06));
  box-shadow: 0 0 0 2px var(--gold);
}
.kt-pilih input:focus-visible + label { outline: 3px solid rgba(233,185,103,.5); }

/* ---------- Hasil pencarian ---------- */
.kt-hasil {
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: .9rem 1rem; margin-top: .6rem;
  display: flex; justify-content: space-between; align-items: center; gap: .75rem;
  text-decoration: none; color: inherit;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.kt-hasil:hover { border-color: var(--gold-dark); color: inherit; transform: translateY(-2px); box-shadow: var(--shadow); }
.kt-hasil:active { transform: scale(.99); }
.kt-hasil .nm { font-weight: 700; color: var(--navy); }
.kt-hasil .sub { font-size: .76rem; color: var(--muted); }
.badge-gol {
  background: rgba(233,185,103,.22); color: var(--emas-ink);
  border: 1px solid var(--gold-dark); font-weight: 800; letter-spacing: .03em;
}

/* ---------- Karcis (nomor & kode: IBM Plex Mono, gaya nomor-hero APESEL) ---------- */
.kt-karcis {
  margin-top: 1.1rem;
  background:
    radial-gradient(420px 150px at 50% -60px, rgba(233,185,103,.14), transparent 70%),
    var(--card);
  border: 1px dashed var(--gold-dark);
  border-radius: 18px;
  padding: 1.6rem 1.2rem;
  text-align: center;
  box-shadow: var(--shadow);
}
.kt-karcis .lbl { font-size: .7rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.kt-karcis .no {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.45rem; font-weight: 600; color: var(--navy); margin: .25rem 0 1rem;
  background: linear-gradient(120deg, rgba(233,185,103,.16), rgba(233,185,103,.05));
  border: 1px dashed var(--gold-dark); border-radius: 10px;
  display: inline-block; padding: .35rem .85rem;
}
.kt-karcis .kode {
  display: inline-block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  background: var(--navy); color: var(--gold-bright);
  font-size: 2rem; font-weight: 600; letter-spacing: .3em; padding: .4rem .7rem .4rem 1rem;
  border-radius: 12px; box-shadow: inset 0 0 0 1.5px rgba(233,185,103,.45);
}
.kt-karcis .peringatan { font-size: .82rem; color: var(--danger-ink); margin-top: 1rem; font-weight: 600; }

/* ---------- Status & linimasa ---------- */
.kt-status { display: inline-block; border-radius: 999px; font-weight: 700; padding: .3rem 1rem; font-size: .88rem; }
.kt-status.menunggu { background: var(--warn-bg); color: var(--warn-ink); }
.kt-status.disetujui { background: var(--ok-bg); color: var(--ok-ink); }
.kt-status.ditolak, .kt-status.gugur { background: var(--danger-bg); color: var(--danger-ink); }
.kt-status.selesai, .kt-status.kadaluarsa { background: #E8EBF1; color: #55617A; }
.kt-timeline { list-style: none; margin: .5rem 0 0; padding: 0; }
.kt-timeline li { padding: .42rem 0 .42rem 1.3rem; border-left: 2px solid var(--line); position: relative; margin-left: .45rem; font-size: .9rem; }
.kt-timeline li::before {
  content: ""; width: 11px; height: 11px; border-radius: 50%;
  background: var(--gold); border: 2px solid #fff; position: absolute; left: -7px; top: .8rem;
  box-shadow: 0 0 0 1.5px var(--gold-dark);
}

/* ---------- Izin cetak ---------- */
.kt-izin-kop { display: flex; gap: .9rem; align-items: center; border-bottom: 3px double var(--navy); padding-bottom: .9rem; margin-bottom: 1rem; }
.kt-izin-no {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15rem; font-weight: 600; color: var(--navy);
  background: linear-gradient(120deg, rgba(233,185,103,.16), rgba(233,185,103,.05));
  border: 1px dashed var(--gold-dark); border-radius: 10px;
  display: inline-block; padding: .4rem .85rem;
}

/* ---------- Tabel publik ---------- */
.kt-publik .table td { padding: .45rem .3rem; }

/* ---------- Kaki ---------- */
.kt-footer { text-align: center; color: var(--muted); font-size: .76rem; padding: 2.2rem 1rem 1.2rem; }
.kt-footer a { color: var(--navy-2); font-weight: 600; text-decoration: none; }
.kt-publik .alert { border-radius: 12px; border: 1px solid var(--line); box-shadow: var(--shadow); }
/* Warna pesan sistem diurus warna.css. Dulu ditulis lagi di sini dengan
   nada dasar sebagai tulisan — kontrasnya hanya 3,56-4,23:1. */

@media print {
  .no-print { display: none !important; }
  body.kt-publik { background: #fff; }
  .kt-kop { display: none; }
  .kt-card { border: none; box-shadow: none; }
  main.kt-wrap > * { animation: none; }
}
@media (max-width: 520px) {
  body.kt-publik { font-size: .92rem; }
  .kt-hero h1 { font-size: 1.28rem; }
  .kt-langkah { grid-template-columns: 1fr; }
  .kt-langkah .s { display: flex; align-items: center; gap: .8rem; text-align: left; padding: .7rem .9rem; border-top: 1px solid var(--line); border-left: 3px solid var(--gold); }
  .kt-langkah .s .n { margin-bottom: 0; flex: none; }
  .kt-karcis .kode { font-size: 1.55rem; letter-spacing: .24em; }
  .kt-karcis .no { font-size: 1.1rem; }
  .kt-kop .t-upt { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
}

/* ================= Keseragaman Font (menimpa Bootstrap) ================= */
:root, body {
  --bs-font-sans-serif: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
input, button, select, optgroup, textarea,
.form-control, .form-select, .form-check-label, .form-label, .input-group-text,
.btn, .dropdown-menu, .dropdown-item, .nav, .navbar, .breadcrumb,
.alert, .badge, .toast, .modal-content, .offcanvas, .card, .list-group,
.table, .pagination, .page-link, .tooltip, .popover, .accordion-button {
  font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.form-control::placeholder, .form-select { font-family: inherit; }
/* Pengecualian: elemen nomor tetap monospace */
.mono, .nomor, .nomor-chip, .nomor-hero,
.kt-karcis .no, .kt-karcis .kode, .kt-izin-no { font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace !important; }
/* Kolom input nomor/kode di publik ikut monospace agar mudah dibaca */
input[name="nik"], input[name="kode"], input[name="no"], #fKodeLama { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; letter-spacing: .04em; }

/* ============================================================
   RAMAH SENTUH & RUANG AMAN PERANGKAT (halaman publik)
   ============================================================ */

/* Ketukan ganda yang tidak disengaja (mis. mengetuk tombol dua kali cepat)
   membuat halaman ikut membesar-mengecil sendiri — terasa mengganggu,
   terutama pada aplikasi yang sudah dipasang. 'manipulation' mematikan HANYA
   ketukan-ganda-untuk-memperbesar; menggulir dan cubit-perbesar (penting untuk
   aksesibilitas) tetap jalan. */
a, button, label, summary, select, input, textarea,
.btn, .nav-link, .page-link, .dropdown-item, .form-check-input, .form-check-label,
[role="button"], [data-bs-toggle] {
  touch-action: manipulation;
}

/* Target sentuh cukup lega pada perangkat sentuh (WCAG 2.5.8). */
@media (pointer: coarse) {
  .btn, .page-link, .dropdown-item, .nav-link { min-block-size: 2.25rem; }
  .form-check-input { min-inline-size: 1.15rem; min-block-size: 1.15rem; }
}

/* Bagian bawah halaman tidak tertutup batang gestur (home indicator). */
.kt-footer { padding-bottom: calc(1.2rem + env(safe-area-inset-bottom)); }

/* Pengaman: apa pun isinya, halaman tidak boleh bisa digeser ke samping.
   Tabel & elemen lebar tetap dapat digeser di dalam pembungkusnya sendiri. */
html, body { overflow-x: hidden; }