/* =========================================================
   DIRGAHAYU - Tema Merah Putih
   Aplikasi Penilaian Lomba HUT RI Ke-81 Kecamatan Paguat
   Tanpa CDN / font eksternal supaya tetap jalan tanpa internet.
   ========================================================= */

/* Plus Jakarta Sans dibundel di dalam aplikasi, BUKAN dari Google Fonts,
   supaya huruf tetap tampil walau internet di lokasi lomba mati.
   Berkasnya font variabel: satu berkas 27 KB mencakup ketebalan 200-800.
   Lisensi SIL Open Font License 1.1 - bebas didistribusikan bersama aplikasi. */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/plus-jakarta-sans-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Palet mengikuti rancangan "Portal Lomba": merah bendera (rose),
     netral slate yang lebih sejuk, dan aksen emas untuk kejuaraan. */
  --merah: #e11d48;
  --merah-pekat: #be123c;
  --merah-tua: #9f1239;
  --merah-gelap: #881337;
  --merah-muda: #fff1f2;
  --merah-lembut: #ffe4e6;
  --putih: #ffffff;
  --emas: #f59e0b;
  --emas-muda: #fffbeb;
  --tinta: #0f172a;
  --teks: #0f172a;
  --teks-lembut: #64748b;
  --teks-samar: #94a3b8;
  --garis: #e2e8f0;
  --garis-lembut: #f1f5f9;
  --latar: #f8fafc;
  --hijau: #059669;
  --hijau-muda: #ecfdf5;
  --biru: #2563eb;
  --biru-muda: #eff6ff;
  --ungu: #7c3aed;
  --ungu-muda: #f5f3ff;
  --kuning-muda: #fffbeb;
  --radius: 20px;
  --radius-besar: 26px;
  --radius-kecil: 12px;
  --bayang: 0 1px 2px rgba(15, 23, 42, .04), 0 10px 30px -5px rgba(15, 23, 42, .06);
  --bayang-kuat: 0 18px 45px -12px rgba(225, 29, 72, .35);
  --bayang-naik: 0 20px 40px -12px rgba(15, 23, 42, .16);
  /* Plus Jakarta Sans dipakai bila tersedia di perangkat; selebihnya jatuh ke
     huruf sistem. Sengaja tanpa Google Fonts supaya aplikasi tetap utuh
     saat internet di lokasi lomba mati. */
  --font: "Plus Jakarta Sans", "Segoe UI Variable", "Segoe UI", system-ui,
          -apple-system, "Roboto", "Helvetica Neue", Arial, sans-serif;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.6;
  color: var(--teks);
  background-color: var(--latar);
  /* Kisi halus di latar, seperti pada rancangan. Digambar dengan gradient
     supaya tidak perlu berkas gambar tambahan. */
  background-image:
    linear-gradient(to right, rgba(15, 23, 42, .028) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(15, 23, 42, .028) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--merah); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.22; font-weight: 800; letter-spacing: -.015em; }
h1 { font-size: 1.7rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.12rem; }
p { margin: 0 0 .75rem; }

/* ---------- Pita merah putih ---------- */
.pita-merput {
  height: 6px;
  background: linear-gradient(180deg, var(--merah) 0 50%, var(--putih) 50% 100%);
}

.logo-bendera {
  width: 46px; height: 32px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
  flex: 0 0 auto;
  display: block;
}
.logo-bendera span { display: block; height: 50%; }
.logo-bendera span:first-child { background: var(--merah); }
.logo-bendera span:last-child { background: var(--putih); }

/* =========================================================
   HALAMAN LOGIN / INSTALL
   ========================================================= */
.halaman-auth {
  min-height: 100vh;
  background:
    radial-gradient(circle at 12% 15%, rgba(255, 255, 255, .22), transparent 45%),
    radial-gradient(circle at 88% 85%, rgba(255, 255, 255, .18), transparent 45%),
    linear-gradient(140deg, var(--merah-tua), var(--merah) 55%, #e01b3c);
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
}
.auth-wrap { width: 100%; max-width: 460px; }
.auth-card {
  background: var(--putih);
  border-radius: 20px;
  padding: 30px 28px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
  margin: 0 auto;
}
.auth-brand { text-align: center; margin-bottom: 20px; }
.auth-brand .logo-bendera { margin: 0 auto 12px; width: 62px; height: 42px; }
.auth-brand h1 {
  font-size: 2rem; letter-spacing: 3px; color: var(--merah); margin-bottom: 2px;
}
.auth-brand p { color: var(--teks-lembut); font-size: .9rem; margin: 0; }
.auth-footer {
  text-align: center; color: rgba(255, 255, 255, .9);
  font-size: .82rem; margin-top: 18px;
}
.form-seksi {
  margin: 22px 0 12px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--merah-muda);
  color: var(--merah);
  font-size: .95rem; text-transform: uppercase; letter-spacing: .5px;
}

/* =========================================================
   FORM
   ========================================================= */
.form-grup { margin-bottom: 14px; }
.form-grup label {
  display: block; font-weight: 600; font-size: .86rem;
  margin-bottom: 5px; color: #374151;
}
.form-grup small { display: block; color: var(--teks-lembut); font-size: .78rem; margin-top: 4px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=email], input[type=search], input[type=file], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--garis);
  border-radius: var(--radius-kecil);
  font-family: inherit; font-size: .95rem;
  background: var(--putih); color: var(--teks);
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--merah);
  box-shadow: 0 0 0 3px rgba(200, 16, 46, .12);
}
textarea { min-height: 90px; resize: vertical; }
select { appearance: none; background-image:
  url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center; background-size: 16px;
  padding-right: 34px;
}

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 14px; }
@media (max-width: 640px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }

/* Tata letak "daftar utama + panel form di samping".
   Ditulis mobile-first: satu kolom dulu, panel samping baru muncul di layar lebar.
   Jangan diganti dengan style="grid-template-columns:..." inline pada halaman,
   karena style inline mengalahkan @media dan membuat tampilan meluber di HP.
   minmax(0,1fr) menjaga kolom utama tetap boleh menyusut walau isinya lebar. */
.grid-sisi {
  display: grid; grid-template-columns: minmax(0, 1fr);
  gap: 18px; align-items: start;
}
@media (min-width: 1024px) {
  .grid-sisi { grid-template-columns: minmax(0, 1fr) 380px; }
}

/* =========================================================
   TOMBOL
   ========================================================= */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 9px 16px;
  border: 1px solid transparent;
  border-radius: var(--radius-kecil);
  font-family: inherit; font-size: .9rem; font-weight: 600;
  cursor: pointer; text-decoration: none;
  transition: transform .08s, filter .15s, background .15s;
  white-space: nowrap;
}
.btn:hover { text-decoration: none; filter: brightness(.95); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--merah); color: #fff; }
.btn-primary:hover { color: #fff; }
.btn-hijau { background: var(--hijau); color: #fff; }
.btn-hijau:hover { color: #fff; }
.btn-biru { background: var(--biru); color: #fff; }
.btn-biru:hover { color: #fff; }
.btn-emas { background: var(--emas); color: #3b2f00; }
.btn-putih { background: #fff; color: var(--teks); border-color: var(--garis); }
.btn-garis { background: transparent; color: var(--merah); border-color: var(--merah-lembut); }
.btn-abu { background: #eef0f5; color: #374151; }
/* Tombol gelap untuk aksi utama non-merah, seperti "Dashboard Admin". */
.btn-tinta { background: var(--tinta); color: #fff; box-shadow: 0 4px 12px -2px rgba(15, 23, 42, .25); }
.btn-tinta:hover { background: #1e293b; color: #fff; }
.btn-blok { width: 100%; }
.btn-kecil { padding: 6px 11px; font-size: .8rem; border-radius: 7px; }
.btn-besar { padding: 13px 22px; font-size: 1rem; }
.btn[disabled], .btn.nonaktif { opacity: .5; pointer-events: none; }

.aksi-grup { display: flex; flex-wrap: wrap; gap: 7px; }

/* Dropdown ringkas di dalam baris tabel. Ukurannya dikecilkan lewat kelas,
   bukan style inline, supaya aturan 16px untuk HP di bawah tetap berlaku. */
.select-mini { font-size: .78rem; padding: 5px 26px 5px 8px; }

/* =========================================================
   ALERT
   ========================================================= */
.alert {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-radius: var(--radius-kecil);
  margin-bottom: 14px; font-size: .9rem;
  border: 1px solid transparent;
}
.alert span { flex: 1; }
.alert-close {
  background: none; border: 0; font-size: 1.15rem; line-height: 1;
  cursor: pointer; color: inherit; opacity: .6; padding: 0;
}
.alert-sukses { background: var(--hijau-muda); color: #10603c; border-color: #b8e5cd; }
.alert-gagal { background: var(--merah-muda); color: var(--merah-tua); border-color: var(--merah-lembut); }
.alert-info { background: var(--biru-muda); color: #1e3a8a; border-color: #c7d3ff; }
.alert-peringatan { background: var(--kuning-muda); color: #7a5b00; border-color: #f5e2a3; }

/* =========================================================
   KERANGKA APLIKASI (SIDEBAR + KONTEN)
   ========================================================= */
.app { min-height: 100vh; display: flex; }

.sidebar {
  width: 260px; flex: 0 0 260px;
  background: linear-gradient(180deg, var(--merah-tua), var(--merah));
  color: #fff;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.sidebar-brand {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 18px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}
.sidebar-brand .nama { font-weight: 800; letter-spacing: 2px; font-size: 1.2rem; }
.sidebar-brand .sub { font-size: .68rem; opacity: .82; letter-spacing: .4px; }
.sidebar-menu { padding: 12px 10px; flex: 1; }
.sidebar-label {
  font-size: .68rem; text-transform: uppercase; letter-spacing: 1.2px;
  opacity: .65; padding: 14px 10px 6px;
}
.sidebar-menu a {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 2px;
  border-radius: 9px; color: rgba(255, 255, 255, .92);
  font-size: .9rem; font-weight: 500;
}
.sidebar-menu a:hover { background: rgba(255, 255, 255, .13); text-decoration: none; color: #fff; }
.sidebar-menu a.aktif { background: #fff; color: var(--merah); font-weight: 700; }
.sidebar-menu a svg { width: 18px; height: 18px; flex: 0 0 18px; }
.sidebar-kaki {
  padding: 14px 18px; font-size: .72rem;
  opacity: .78; border-top: 1px solid rgba(255, 255, 255, .16);
}
/* Kredit pembuat aplikasi. */
.sidebar-kaki .kredit {
  margin-top: 8px; padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .68rem; line-height: 1.5;
}
.kredit-publik {
  margin: 10px 0 0; font-size: .8rem;
  color: rgba(255, 255, 255, .9);
}
.kredit-publik strong { color: #fff; }
.kredit-auth {
  display: block; margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  font-size: .78rem;
}

.konten { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
  background: #fff; border-bottom: 1px solid var(--garis);
  padding: 11px 22px;
  display: flex; align-items: center; gap: 14px;
  position: sticky; top: 0; z-index: 30;
}
.topbar h2 { margin: 0; font-size: 1.06rem; }
.topbar .isi { flex: 1; min-width: 0; }
.topbar .jejak { font-size: .78rem; color: var(--teks-lembut); }
.tombol-menu {
  display: none; background: none; border: 1px solid var(--garis);
  border-radius: 8px; padding: 6px 9px; cursor: pointer;
}
.tombol-menu svg { width: 20px; height: 20px; display: block; }

.user-chip {
  display: flex; align-items: center; gap: 9px;
  padding: 5px 9px 5px 5px; border: 1px solid var(--garis);
  border-radius: 30px; background: #fff;
}
.avatar {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--merah); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: .82rem;
  flex: 0 0 32px;
}
.user-chip .nm { font-size: .82rem; font-weight: 600; line-height: 1.15; }
.user-chip .rl { font-size: .68rem; color: var(--teks-lembut); }

.isi-halaman { padding: 22px; flex: 1; }
.wadah { max-width: 1280px; margin: 0 auto; }

/* =========================================================
   KARTU & PANEL
   ========================================================= */
.kartu {
  background: #fff; border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
  margin-bottom: 18px; overflow: hidden;
}
.kartu-kepala {
  padding: 14px 18px; border-bottom: 1px solid var(--garis);
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.kartu-kepala h3 { margin: 0; font-size: 1rem; }
.kartu-kepala .kanan { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.kartu-isi { padding: 18px; }
.kartu-isi.rapat { padding: 0; }
.kartu-kaki { padding: 12px 18px; border-top: 1px solid var(--garis); background: #fafbfc; }

/* Statistik */
.stat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px; margin-bottom: 18px;
}
.stat {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 16px 18px; box-shadow: var(--bayang);
  display: flex; align-items: center; gap: 14px;
}
.stat .ikon {
  width: 44px; height: 44px; border-radius: 12px;
  display: grid; place-items: center; flex: 0 0 44px;
  background: var(--merah-muda); color: var(--merah);
}
.stat .ikon svg { width: 22px; height: 22px; }
.stat .angka { font-size: 1.55rem; font-weight: 800; line-height: 1.1; }
.stat .judul { font-size: .8rem; color: var(--teks-lembut); }
.stat.hijau .ikon { background: var(--hijau-muda); color: var(--hijau); }
.stat.biru .ikon { background: var(--biru-muda); color: var(--biru); }
.stat.emas .ikon { background: var(--kuning-muda); color: #96700c; }

/* =========================================================
   TABEL
   ========================================================= */
.tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabel { width: 100%; border-collapse: collapse; font-size: .89rem; }
table.tabel th, table.tabel td {
  padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--garis);
  vertical-align: middle;
}
table.tabel thead th {
  background: var(--merah-muda); color: var(--merah-tua);
  font-size: .76rem; text-transform: uppercase; letter-spacing: .5px;
  white-space: nowrap; border-bottom: 2px solid var(--merah-lembut);
}
table.tabel tbody tr:hover { background: #fcfcfd; }
table.tabel tbody tr:last-child td { border-bottom: 0; }
table.tabel td.tengah, table.tabel th.tengah { text-align: center; }
table.tabel td.kanan, table.tabel th.kanan { text-align: right; }
table.tabel td.nowrap { white-space: nowrap; }
.tabel-garis td, .tabel-garis th { border: 1px solid var(--garis); }

/* Baris pemisah kegiatan di dalam tabel (Seni / Pramuka). */
table.tabel tr.baris-kegiatan td {
  background: var(--garis-lembut);
  font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teks-lembut); padding: 9px 12px;
}
table.tabel tr.baris-kegiatan:hover td { background: var(--garis-lembut); }
table.tabel tr.baris-kegiatan .lvl { margin-right: 6px; }

/* =========================================================
   TABEL VERSI HP: tiap baris jadi kartu bertumpuk
   ---------------------------------------------------------
   Di layar sempit, tabel lebar harus digeser ke samping dan isinya
   terpotong (dropdown status pernah tampil cuma "F"). Di bawah 720px
   tiap baris diubah jadi kartu, dan nama kolom dimunculkan sebagai
   label di kiri tiap nilai.

   Kelas .tabel-stack DIPASANG OLEH app.js setelah ia menyalin teks
   <th> ke atribut data-label tiap sel. Kalau JavaScript mati, kelas
   ini tidak pernah muncul dan tabel kembali ke perilaku geser
   menyamping yang lama - tetap terpakai, bukan rusak.
   ========================================================= */
@media (max-width: 720px) {
  table.tabel.tabel-stack,
  table.tabel.tabel-stack tbody,
  table.tabel.tabel-stack tr,
  table.tabel.tabel-stack td { display: block; width: 100%; }

  table.tabel.tabel-stack thead { display: none; }

  table.tabel.tabel-stack tr {
    background: #fff; border: 1px solid var(--garis);
    border-radius: 16px; box-shadow: var(--bayang);
    margin-bottom: 12px; padding: 4px 2px; overflow: hidden;
  }
  table.tabel.tabel-stack tr:hover { background: #fff; }
  table.tabel.tabel-stack tbody tr:last-child { margin-bottom: 0; }

  table.tabel.tabel-stack td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 14px; text-align: right;
    padding: 10px 13px; border: 0;
    border-bottom: 1px solid var(--garis-lembut);
  }
  table.tabel.tabel-stack td:last-child { border-bottom: 0; }

  table.tabel.tabel-stack td::before {
    content: attr(data-label);
    flex: 0 0 auto; max-width: 42%; text-align: left;
    font-size: .68rem; font-weight: 800; letter-spacing: .05em;
    text-transform: uppercase; color: var(--teks-lembut);
  }
  /* Sel tanpa judul kolom (mis. baris "belum ada data") tampil penuh. */
  table.tabel.tabel-stack td:not([data-label]) { justify-content: center; text-align: center; }
  table.tabel.tabel-stack td:not([data-label])::before { display: none; }

  /* Kolom aksi: tombol dirapatkan ke kanan dan boleh turun baris. */
  table.tabel.tabel-stack td .aksi-grup { justify-content: flex-end; flex-wrap: wrap; }
  table.tabel.tabel-stack td form { display: inline-flex; }
  table.tabel.tabel-stack td select { width: auto; min-width: 150px; }

  /* Baris pemisah kegiatan tampil sebagai judul kelompok, bukan kartu. */
  table.tabel.tabel-stack tr.baris-kegiatan {
    background: transparent; border: 0; box-shadow: none;
    margin: 16px 0 8px; padding: 0;
  }
  table.tabel.tabel-stack tr.baris-kegiatan td {
    justify-content: flex-start; text-align: left;
    border: 0; padding: 0 4px; background: transparent;
  }

  /* Wadah geser tidak diperlukan lagi saat sudah bertumpuk. */
  .tabel-bungkus:has(> table.tabel-stack) { overflow-x: visible; }
}

.kosong {
  padding: 40px 20px; text-align: center; color: var(--teks-lembut);
}
.kosong svg { width: 44px; height: 44px; opacity: .35; margin-bottom: 8px; }

/* =========================================================
   BADGE & LENCANA
   ========================================================= */
.badge {
  display: inline-block; padding: 3px 9px; border-radius: 20px;
  font-size: .72rem; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
}
.badge-merah { background: var(--merah-muda); color: var(--merah-tua); }
.badge-hijau { background: var(--hijau-muda); color: var(--hijau); }
.badge-abu { background: #eef0f5; color: #4b5563; }
.badge-biru { background: var(--biru-muda); color: var(--biru); }
.badge-emas { background: var(--kuning-muda); color: #8a6508; }

.medali {
  display: inline-grid; place-items: center;
  width: 30px; height: 30px; border-radius: 50%;
  font-weight: 800; font-size: .82rem; color: #fff;
}
.medali-1 { background: linear-gradient(145deg, #f0c419, #c99700); }
.medali-2 { background: linear-gradient(145deg, #c9ccd4, #9aa0aa); }
.medali-3 { background: linear-gradient(145deg, #d99a63, #ab6a35); }
.medali-lain { background: #eef0f5; color: #6b7280; }

/* Progress */
.progres { height: 8px; background: #eef0f5; border-radius: 20px; overflow: hidden; }
.progres > i { display: block; height: 100%; background: var(--merah); border-radius: 20px; }
.progres.hijau > i { background: var(--hijau); }

/* =========================================================
   FORM PENILAIAN JURI
   ========================================================= */
.nilai-item {
  border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 12px; background: #fff;
}

/* Judul kelompok penilaian, misalnya "Lagu Wajib" dan "Lagu Pilihan". */
.grup-nilai {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap;
  margin: 20px 0 10px; padding: 10px 15px;
  background: var(--merah-muda); border: 1px solid var(--merah-lembut);
  border-radius: var(--radius-kecil);
}
.grup-nilai .nm {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: .95rem; color: var(--merah-pekat);
}
.grup-nilai .bbt {
  font-size: .76rem; font-weight: 700; color: var(--merah-tua);
  background: #fff; padding: 3px 11px; border-radius: 20px;
}
.nilai-item.dalam-grup { margin-left: 10px; }
@media (max-width: 640px) { .nilai-item.dalam-grup { margin-left: 0; } }
.nilai-item .baris-atas {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; flex-wrap: wrap;
}
.nilai-item .judul-kriteria { font-weight: 700; font-size: .98rem; }
.nilai-item .bobot {
  background: var(--merah-muda); color: var(--merah-tua);
  padding: 2px 8px; border-radius: 20px; font-size: .72rem; font-weight: 700;
}
.nilai-item .ket { color: var(--teks-lembut); font-size: .82rem; margin-bottom: 10px; }
.nilai-baris { display: flex; align-items: center; gap: 12px; }
.nilai-baris input[type=range] { flex: 1; accent-color: var(--merah); height: 26px; }
.nilai-angka {
  width: 92px; flex: 0 0 92px; text-align: center;
  font-size: 1.15rem; font-weight: 800; padding: 8px;
  border: 2px solid var(--merah-lembut); border-radius: 10px; color: var(--merah-tua);
}
.total-nilai {
  background: linear-gradient(135deg, var(--merah-tua), var(--merah));
  color: #fff; border-radius: var(--radius);
  padding: 16px 20px; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.total-nilai .label { font-size: .85rem; opacity: .9; }
.total-nilai .nilai { font-size: 2.1rem; font-weight: 800; line-height: 1; }

.bar-aksi {
  position: sticky; bottom: 0; z-index: 20;
  background: #fff; border-top: 1px solid var(--garis);
  padding: 12px 18px; display: flex; gap: 9px; flex-wrap: wrap;
  box-shadow: 0 -4px 18px rgba(16, 24, 40, .07);
  margin: 18px -22px -22px;
}

/* Daftar peserta versi kartu (mobile juri) */
.peserta-kartu {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 16px; border-bottom: 1px solid var(--garis);
  color: inherit;
}
.peserta-kartu:hover { background: #fcfcfd; text-decoration: none; color: inherit; }
.peserta-kartu:last-child { border-bottom: 0; }
.peserta-kartu .undian {
  width: 40px; height: 40px; flex: 0 0 40px; border-radius: 11px;
  background: var(--merah-muda); color: var(--merah-tua);
  display: grid; place-items: center; font-weight: 800;
}
.peserta-kartu .info { flex: 1; min-width: 0; }
.peserta-kartu .nm { font-weight: 700; font-size: .95rem; }
.peserta-kartu .as { font-size: .8rem; color: var(--teks-lembut); }

/* =========================================================
   HALAMAN PUBLIK
   ========================================================= */
.publik-nav {
  background: #fff; border-bottom: 1px solid var(--garis);
  position: sticky; top: 0; z-index: 40;
}
.publik-nav .dalam {
  max-width: 1200px; margin: 0 auto; padding: 13px 20px;
  display: flex; align-items: center; gap: 14px;
}
.publik-nav .merek { display: flex; align-items: center; gap: 11px; min-width: 0; }

/* Ubin logo: kotak membulat bergradasi dengan lencana tahun. */
.merek-ubin {
  position: relative; flex: 0 0 44px; width: 44px; height: 44px;
  border-radius: 15px; display: grid; place-items: center;
  background: linear-gradient(to top right, var(--merah-pekat), var(--merah));
  color: #fff; font-weight: 900; font-size: 1.05rem; letter-spacing: 1px;
  box-shadow: 0 8px 18px -4px rgba(225, 29, 72, .45);
  box-shadow: 0 8px 18px -4px rgba(225, 29, 72, .45), 0 0 0 2px #fff;
}
.merek-ubin .lencana {
  position: absolute; right: -5px; bottom: -5px;
  width: 19px; height: 19px; border-radius: 50%;
  background: var(--emas); color: var(--tinta);
  border: 2px solid #fff; display: grid; place-items: center;
  font-size: .55rem; font-weight: 800; letter-spacing: 0;
}
.publik-nav .merek .nama {
  font-weight: 800; letter-spacing: -.02em; font-size: 1.2rem;
  background: linear-gradient(to right, var(--merah-pekat), var(--merah-gelap));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.publik-nav .merek .sub { font-size: .72rem; color: var(--teks-lembut); font-weight: 500; }
.publik-nav .merek .tahun {
  background: var(--merah-muda); color: var(--merah-pekat);
  font-size: .66rem; font-weight: 800; padding: 1px 8px; border-radius: 20px;
  vertical-align: middle; margin-left: 6px;
}

.publik-nav .tautan { margin-left: auto; display: flex; align-items: center; gap: 9px; }

/* Kelompok tautan berbentuk pil, seperti pada rancangan. */
.publik-nav .pil {
  display: flex; align-items: center; gap: 3px;
  background: var(--garis-lembut); padding: 5px;
  border: 1px solid var(--garis); border-radius: 16px;
}
.publik-nav .pil a {
  padding: 8px 17px; border-radius: 12px; color: var(--teks-lembut);
  font-size: .86rem; font-weight: 600; white-space: nowrap;
  transition: background .18s, color .18s;
}
.publik-nav .pil a:hover { background: rgba(255, 255, 255, .7); color: var(--tinta); text-decoration: none; }
.publik-nav .pil a.aktif { background: #fff; color: var(--tinta); box-shadow: 0 1px 3px rgba(15, 23, 42, .1); }

.publik-nav .merek > span:last-child { display: block; line-height: 1.3; min-width: 0; }
.publik-nav .merek .sub { display: block; }

/* Baris tautan khusus HP: pil di navbar tidak muat di layar sempit. */
.nav-hp {
  display: none; gap: 6px; padding: 0 14px 10px;
  border-top: 1px solid var(--garis-lembut); padding-top: 10px;
}
.nav-hp a {
  flex: 1; text-align: center; padding: 9px 6px; border-radius: 12px;
  background: var(--garis-lembut); color: var(--teks-lembut);
  font-size: .8rem; font-weight: 700;
}
.nav-hp a.aktif { background: var(--tinta); color: #fff; }
.nav-hp a:hover { text-decoration: none; }

@media (max-width: 860px) {
  .sembunyi-hp { display: none !important; }
  .nav-hp { display: flex; }
  .publik-nav .dalam { padding: 11px 14px; }
  .publik-nav .merek .nama { font-size: 1.08rem; }
}

/* =========================================================
   HERO PUBLIK
   ========================================================= */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background: linear-gradient(135deg, var(--merah-pekat) 0%, var(--merah-gelap) 50%, #4c0519 100%);
  padding: 56px 20px 52px;
}
/* Bulatan kabur dekoratif + titik-titik halus, semua digambar CSS. */
.hero::before, .hero::after {
  content: ''; position: absolute; border-radius: 50%;
  filter: blur(70px); pointer-events: none;
}
.hero::before { top: -110px; right: -90px; width: 340px; height: 340px; background: rgba(244, 63, 94, .3); }
.hero::after  { bottom: -130px; left: 20px; width: 300px; height: 300px; background: rgba(245, 158, 11, .18); }
.hero .titik {
  position: absolute; inset: 0; pointer-events: none; opacity: .1;
  background-image: radial-gradient(#fff 1px, transparent 1px);
  background-size: 16px 16px;
}
.hero .hero-dalam {
  position: relative; z-index: 1; max-width: 1200px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; align-items: center;
}
@media (min-width: 1024px) { .hero .hero-dalam { grid-template-columns: 2fr 1fr; gap: 34px; } }

.hero .lencana-hero {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border-radius: 30px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: .74rem; font-weight: 700; color: #fde68a; letter-spacing: .01em;
  margin-bottom: 16px;
}
.hero h1 {
  font-size: clamp(1.75rem, 5vw, 3rem); font-weight: 900;
  letter-spacing: -.03em; margin-bottom: 12px; color: #fff;
}
.hero h1 .sorot {
  background: linear-gradient(to right, #fef08a, #ffffff, #ffe4e6);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero p { color: rgba(255, 255, 255, .82); max-width: 640px; margin: 0 0 22px; font-size: .96rem; }
.hero .tombol-hero { display: flex; gap: 12px; flex-wrap: wrap; }
.hero .angka-hut { display: none; }

@media (max-width: 1023px) {
  .hero { text-align: center; }
  .hero p { margin-left: auto; margin-right: auto; }
  .hero .tombol-hero { justify-content: center; }
}

/* Kartu hitung mundur di sisi kanan hero. */
.hero-hitung {
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--radius-besar); padding: 22px; text-align: center;
  box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .5);
}
.hero-hitung .kepala {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  color: #fde68a; font-size: .7rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px;
}
.hero-hitung .digit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.hero-hitung .digit {
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; padding: 12px 4px;
}
.hero-hitung .digit b { display: block; font-size: 1.7rem; font-weight: 900; line-height: 1; }
.hero-hitung .digit span {
  display: block; font-size: .62rem; text-transform: uppercase;
  font-weight: 700; color: rgba(255, 255, 255, .6); margin-top: 6px;
}
.hero-hitung .ket { font-size: .74rem; color: rgba(255, 255, 255, .72); margin: 14px 0 0; }

.publik-isi { max-width: 1200px; margin: 0 auto; padding: 30px 20px 56px; }
.judul-seksi { margin-bottom: 22px; }
.judul-seksi .kapital {
  display: inline-flex; align-items: center; gap: 7px; color: var(--merah);
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .09em;
  margin-bottom: 4px;
}
.judul-seksi h2 { color: var(--tinta); font-size: clamp(1.4rem, 3.4vw, 1.85rem); }
.judul-seksi p { color: var(--teks-lembut); margin: 0; font-size: .92rem; }

/* Baris penyaring: pil tingkat + kotak pencarian. */
.saring-baris {
  display: flex; align-items: center; gap: 8px;
  overflow-x: auto; padding-bottom: 6px; margin-bottom: 18px;
  scrollbar-width: none;
}
.saring-baris::-webkit-scrollbar { display: none; }
.pil-tingkat {
  flex: 0 0 auto; padding: 9px 16px; border-radius: 13px;
  background: #fff; border: 1px solid var(--garis); color: var(--teks-lembut);
  font-size: .78rem; font-weight: 700; cursor: pointer; font-family: inherit;
  white-space: nowrap; transition: background .18s, color .18s, border-color .18s;
}
.pil-tingkat:hover { background: var(--garis-lembut); color: var(--tinta); }
.pil-tingkat.aktif { background: var(--tinta); color: #fff; border-color: var(--tinta); }

.kotak-cari { position: relative; flex: 0 0 auto; min-width: 210px; margin-left: auto; }
.kotak-cari svg {
  position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--teks-samar); pointer-events: none;
}
.kotak-cari input { padding-left: 38px; border-radius: 13px; }

/* =========================================================
   KARTU CABANG LOMBA
   ========================================================= */
.kartu-lomba-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); gap: 20px;
}
.kartu-lomba {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-besar);
  overflow: hidden; box-shadow: var(--bayang);
  display: flex; flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.kartu-lomba:hover { transform: translateY(-4px); box-shadow: var(--bayang-naik); }
.kartu-lomba .kepala { padding: 18px 18px 10px; }
.kartu-lomba .kepala .baris-lencana {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 11px; flex-wrap: wrap;
}
.kartu-lomba .kepala .tingkat {
  font-size: .65rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 20px;
  background: var(--merah-muda); color: var(--merah-pekat); border: 1px solid var(--merah-lembut);
}
.kartu-lomba .kepala h3 {
  margin: 0; font-size: 1.12rem; color: var(--tinta);
  transition: color .18s;
}
.kartu-lomba:hover .kepala h3 { color: var(--merah); }
.kartu-lomba .badan { padding: 4px 18px 16px; flex: 1; }
.kartu-lomba .meta { font-size: .82rem; color: var(--teks-lembut); display: grid; gap: 7px; }
.kartu-lomba .meta > div { display: flex; align-items: center; gap: 9px; }
.kartu-lomba .meta svg { color: var(--teks-samar); flex: 0 0 auto; }
.kartu-lomba .ringkas {
  font-size: .8rem; color: var(--teks-lembut); line-height: 1.6;
  margin: 13px 0 0; padding-top: 12px; border-top: 1px solid var(--garis-lembut);
}
.kartu-lomba .kaki {
  padding: 14px 18px; border-top: 1px solid var(--garis-lembut);
  background: #fbfcfe;
}

/* Lencana status kecil dengan titik berdenyut. */
.status-titik {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: .64rem; font-weight: 800; padding: 4px 10px; border-radius: 20px;
  background: var(--garis-lembut); color: var(--teks-lembut); white-space: nowrap;
}
.status-titik i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--teks-samar);
  display: block; flex: 0 0 6px;
}
.status-titik.jalan { background: var(--hijau-muda); color: #047857; }
.status-titik.jalan i { background: var(--hijau); animation: denyut 1.6s ease-in-out infinite; }
.status-titik.umum { background: var(--emas-muda); color: #b45309; }
.status-titik.umum i { background: var(--emas); }
@keyframes denyut { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Lencana tingkat berwarna, dipakai di linimasa dan kartu juara. */
.lvl {
  font-size: .63rem; font-weight: 800; letter-spacing: .04em;
  padding: 3px 9px; border-radius: 7px; white-space: nowrap; text-transform: uppercase;
}
.lvl-hijau { background: var(--hijau-muda); color: #047857; }
.lvl-biru  { background: var(--biru-muda);  color: #1d4ed8; }
.lvl-ungu  { background: var(--ungu-muda);  color: #6d28d9; }
.lvl-emas  { background: var(--emas-muda);  color: #b45309; }
.lvl-merah { background: var(--merah-muda); color: var(--merah-pekat); }
.lvl-abu   { background: var(--garis-lembut); color: var(--teks-lembut); }

/* =========================================================
   LINIMASA JADWAL
   ========================================================= */
.linimasa-wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; align-items: start; }
@media (min-width: 1024px) { .linimasa-wrap { grid-template-columns: 2fr 1fr; } }

.hari-kartu {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
  box-shadow: var(--bayang); padding: 20px 20px 20px 26px; margin-bottom: 20px;
}
.hari-kartu::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 8px;
  background: var(--merah);
}
.hari-kartu.bar-biru::before  { background: var(--biru); }
.hari-kartu.bar-hijau::before { background: var(--hijau); }
.hari-kartu.bar-emas::before  { background: var(--emas); }
.hari-kartu.bar-ungu::before  { background: var(--ungu); }

.hari-kartu .kepala-hari {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 6px;
}
.tgl-pil {
  padding: 5px 14px; border-radius: 20px; font-size: .75rem; font-weight: 800;
  background: var(--merah-muda); color: var(--merah-pekat);
}
.hari-kartu.bar-biru  .tgl-pil { background: var(--biru-muda);  color: #1d4ed8; }
.hari-kartu.bar-hijau .tgl-pil { background: var(--hijau-muda); color: #047857; }
.hari-kartu.bar-emas  .tgl-pil { background: var(--emas-muda);  color: #b45309; }
.hari-kartu.bar-ungu  .tgl-pil { background: var(--ungu-muda);  color: #6d28d9; }
.hari-kartu .jam-hari { font-size: .76rem; color: var(--teks-lembut); font-weight: 600; }
.hari-kartu > h3 { font-size: 1.08rem; margin: 0 0 14px; color: var(--tinta); }

.acara-baris {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; margin-bottom: 9px;
  background: var(--latar); border: 1px solid var(--garis-lembut); border-radius: 14px;
  color: inherit;
}
a.acara-baris:hover { background: #fff; border-color: var(--garis); text-decoration: none; box-shadow: var(--bayang); }
.acara-baris:last-child { margin-bottom: 0; }
.acara-baris .kiri { min-width: 0; }
.acara-baris h4 { margin: 6px 0 0; font-size: .92rem; color: var(--tinta); }
.acara-baris .kanan-info {
  text-align: right; font-size: .72rem; color: var(--teks-lembut); flex: 0 0 auto;
}

/* Kartu sisi: lokasi & catatan. */
.kartu-sisi { position: sticky; top: 92px; }
.peta-kotak {
  aspect-ratio: 16 / 10; border-radius: 16px; border: 1px solid var(--garis);
  background: var(--garis-lembut); display: grid; place-items: center;
  text-align: center; padding: 16px; color: var(--teks-lembut);
}
.peta-kotak strong { display: block; color: var(--tinta); font-size: .92rem; margin-top: 8px; }

@media (max-width: 1023px) { .kartu-sisi { position: static; } }

/* =========================================================
   KARTU JUARA (HALAMAN HASIL)
   ========================================================= */
.juara-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 20px; }
.juara-kartu {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius-besar);
  box-shadow: var(--bayang); padding: 22px; display: flex; flex-direction: column;
}
.juara-kartu .kepala {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.juara-kartu .resmi { font-size: .68rem; font-weight: 700; color: var(--teks-samar); }
.juara-kartu > h3 { font-size: 1.15rem; margin: 0 0 3px; color: var(--tinta); }
.juara-kartu .sub { font-size: .78rem; color: var(--teks-lembut); margin-bottom: 16px; }

.juara-baris {
  display: flex; align-items: center; gap: 13px;
  padding: 11px 13px; border-radius: 15px; margin-bottom: 9px;
  background: var(--latar); border: 1px solid var(--garis-lembut);
}
.juara-baris.emas-1 {
  background: linear-gradient(135deg, #fffbeb, #fef3c7);
  border-color: #fcd34d;
}
.juara-baris .info { flex: 1; min-width: 0; }
.juara-baris .nm { font-weight: 700; font-size: .92rem; color: var(--tinta); }
.juara-baris .as { font-size: .76rem; color: var(--teks-lembut); }
.juara-baris .skor {
  font-weight: 800; font-size: 1.05rem; color: var(--merah-pekat); flex: 0 0 auto;
}
.juara-kartu .kaki-juara { margin-top: auto; padding-top: 14px; }

.podium {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  align-items: end; margin-bottom: 18px;
}
.podium .pos {
  background: #fff; border: 1px solid var(--garis); border-radius: var(--radius);
  padding: 16px 12px; text-align: center; box-shadow: var(--bayang);
}
.podium .pos .medali { margin: 0 auto 8px; width: 38px; height: 38px; font-size: .95rem; }
.podium .pos .nm { font-weight: 700; font-size: .95rem; }
.podium .pos .as { font-size: .78rem; color: var(--teks-lembut); }
.podium .pos .nl { font-weight: 800; color: var(--merah); margin-top: 6px; }
.podium .pos.p1 { border-color: var(--emas); box-shadow: 0 10px 30px rgba(212, 160, 23, .22); padding-top: 24px; }
@media (max-width: 640px) { .podium { grid-template-columns: 1fr; } .podium .pos.p1 { padding-top: 16px; } }

.publik-kaki {
  background: #1b1f2a; color: rgba(255, 255, 255, .78);
  padding: 26px 20px; text-align: center; font-size: .85rem;
}
.publik-kaki strong { color: #fff; }

/* =========================================================
   FILTER / TOOLBAR
   ========================================================= */
.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end;
  margin-bottom: 16px;
}
.toolbar .form-grup { margin-bottom: 0; min-width: 170px; }
.toolbar .tumbuh { flex: 1; min-width: 200px; }

.tab-nav { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 16px; }
.tab-nav a {
  padding: 8px 14px; border-radius: 9px; font-size: .87rem; font-weight: 600;
  background: #fff; border: 1px solid var(--garis); color: #374151;
}
.tab-nav a.aktif { background: var(--merah); border-color: var(--merah); color: #fff; }
.tab-nav a:hover { text-decoration: none; }

.info-baris { display: grid; gap: 6px; font-size: .88rem; }
.info-baris > div { display: flex; gap: 8px; }
.info-baris .k { color: var(--teks-lembut); min-width: 118px; flex: 0 0 118px; }

/* =========================================================
   RESPONSIF
   ========================================================= */
@media (max-width: 900px) {
  .sidebar {
    position: fixed; left: 0; top: 0; z-index: 60;
    transform: translateX(-100%); transition: transform .22s ease;
    box-shadow: 0 0 40px rgba(0, 0, 0, .3);
  }
  body.sidebar-buka .sidebar { transform: translateX(0); }
  body.sidebar-buka::after {
    content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 55;
  }
  .tombol-menu { display: inline-flex; min-width: 44px; min-height: 44px; justify-content: center; }
  .isi-halaman { padding: 16px; }
  .bar-aksi { margin: 16px -16px -16px; }

  /* Sasaran sentuh. Jari jauh lebih lebar daripada kursor: tombol setinggi
     34px sulit ditekan tepat, apalagi sambil berdiri di lokasi lomba. */
  .btn { padding: 11px 16px; min-height: 44px; }
  .btn-kecil { padding: 8px 12px; min-height: 38px; font-size: .82rem; }
  .btn-besar { min-height: 50px; }
  .sidebar-menu a { padding: 12px; }
  .alert-close { min-width: 32px; min-height: 32px; }
}

@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .topbar { padding: 10px 14px; }
  .user-chip .nm, .user-chip .rl { display: none; }
  .user-chip { border: 0; padding: 0; }
  table.tabel th, table.tabel td { padding: 9px 10px; }
  .kartu-isi { padding: 14px; }

  /* Wajib 16px. Di bawah itu Safari iOS otomatis memperbesar halaman
     begitu kolom disentuh, dan tata letak ikut melompat — sangat mengganggu
     saat juri mengetik nilai. */
  input[type=text], input[type=password], input[type=number], input[type=date],
  input[type=email], input[type=search], input[type=file], select, textarea {
    font-size: 16px;
  }
  .nilai-angka { font-size: 1.2rem; }
  .select-mini { font-size: 16px; padding: 8px 30px 8px 10px; }
}

/* =========================================================
   CETAK
   ========================================================= */
.lembar-cetak {
  background: #fff; max-width: 21cm; margin: 20px auto; padding: 1.6cm 1.8cm;
  box-shadow: var(--bayang); color: #000;
}
.kop-surat {
  display: flex; align-items: center; gap: 16px;
  border-bottom: 3px double #000; padding-bottom: 12px; margin-bottom: 18px;
}
.kop-surat .kop-teks { flex: 1; text-align: center; }
.kop-surat .kop-teks .b1 { font-size: 1.05rem; font-weight: 700; text-transform: uppercase; }
.kop-surat .kop-teks .b2 { font-size: 1.25rem; font-weight: 800; text-transform: uppercase; }
.kop-surat .kop-teks .b3 { font-size: .82rem; }
.judul-cetak { text-align: center; margin-bottom: 16px; }
.judul-cetak h2 { margin: 0; text-decoration: underline; font-size: 1.1rem; text-transform: uppercase; }
.judul-cetak p { margin: 2px 0 0; font-size: .9rem; }
.ttd-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 20px;
  margin-top: 34px; text-align: center; font-size: .9rem;
}
.ttd-grid .ruang { height: 68px; }
.ttd-grid .nm { font-weight: 700; text-decoration: underline; }
.bar-cetak {
  position: sticky; top: 0; z-index: 10;
  background: #fff; border-bottom: 1px solid var(--garis);
  padding: 10px 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
}

/* Lembar cetak dibuat selebar kertas A4 (21cm), jadi mustahil muat di layar HP.
   Blok ini khusus "screen" — aturan @media print di bawah tidak tersentuh,
   sehingga hasil cetak/PDF tetap persis seperti semula.
   Tabel yang tetap lebih lebar digeser di dalam lembarnya, bukan mendorong
   seluruh halaman ikut melar ke samping. */
/* Tabel rekap/berita acara bisa jauh lebih lebar daripada kertas A4.
   Di layar mana pun, biarkan digeser di dalam lembarnya supaya tidak
   mendorong seluruh halaman melebar ke samping. Cetak tidak terpengaruh. */
@media screen {
  .lembar-cetak { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

@media screen and (max-width: 900px) {
  .lembar-cetak {
    max-width: 100%; margin: 12px 0; padding: 16px 14px;
  }
  .lembar-cetak table.tabel { font-size: .78rem; }
  .lembar-cetak table.tabel th, .lembar-cetak table.tabel td { padding: 6px 7px; }
  .kop-surat { gap: 10px; padding-bottom: 10px; }
  .kop-surat .kop-teks .b1 { font-size: .9rem; }
  .kop-surat .kop-teks .b2 { font-size: 1.02rem; }
  .kop-surat .kop-teks .b3 { font-size: .74rem; }
  .ttd-grid { gap: 12px; margin-top: 24px; font-size: .82rem; }
  .bar-cetak { padding: 10px 12px; }
}

/* =========================================================
   PWA - Bilah ajakan pasang aplikasi
   ========================================================= */
.pwa-pasang {
  /* Di bawah sidebar mobile (60) dan lapisan gelapnya (55), di atas topbar (40). */
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto; padding: 12px 14px;
  background: var(--putih); border: 1px solid var(--garis);
  border-radius: var(--radius); box-shadow: var(--bayang);
  animation: pwa-naik .28s ease-out;
}
@keyframes pwa-naik {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-pasang .pwa-ikon {
  flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(200, 16, 46, .25);
}
.pwa-pasang .pwa-ikon span { display: block; height: 50%; }
.pwa-pasang .pwa-ikon span:first-child { background: var(--merah); }
.pwa-pasang .pwa-ikon span:last-child  { background: var(--putih); }
.pwa-pasang .pwa-teks { flex: 1; min-width: 0; line-height: 1.35; }
.pwa-pasang .pwa-teks strong { display: block; font-size: .93rem; }
.pwa-pasang .pwa-teks span {
  display: block; font-size: .78rem; color: var(--teks-lembut); margin-top: 2px;
}
.pwa-pasang .pwa-tutup {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--teks-lembut); font-size: 1.35rem; line-height: 1;
  padding: 0 2px; font-family: inherit;
}
.pwa-pasang .pwa-tutup:hover { color: var(--teks); }

@media (max-width: 420px) {
  .pwa-pasang .pwa-teks span { display: none; }
}

@media print {
  @page { size: A4; margin: 1.2cm; }
  .pwa-pasang { display: none !important; }
  body { background: #fff; font-size: 11.5pt; }
  .bar-cetak, .sidebar, .topbar, .publik-nav, .publik-kaki, .no-print { display: none !important; }
  .lembar-cetak { box-shadow: none; margin: 0; padding: 0; max-width: none; }
  table.tabel thead th { background: #eee !important; color: #000 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  table.tabel th, table.tabel td { border: 1px solid #333; }
  a { color: #000; text-decoration: none; }
  .pecah-halaman { page-break-before: always; }
}