/* frontend/assets/css/base.css
   Setel ulang ringan, tipografi dasar, elemen formulir, dan utilitas.
   Mobile-first: seluruh aturan di sini berlaku mulai layar 320px. */

*, *::before, *::after { box-sizing: border-box; }

::selection { background: var(--warna-primer-garis); color: var(--warna-teks); }

/* Atribut hidden harus selalu menang. Tanpa aturan ini, kelas komponen yang
   menetapkan display (flex/grid) mengalahkan display:none bawaan peramban,
   sehingga banner jaringan dan navigasi tetap terlihat meski di-hidden. */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100dvh;
  background: var(--warna-latar);
  color: var(--warna-teks);
  font-family: var(--font-utama);
  font-size: var(--teks-md);
  line-height: var(--tinggi-baris);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
  overscroll-behavior-y: none;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

h1 { font-size: var(--teks-2xl); font-weight: var(--tebal-berat); line-height: var(--tinggi-baris-rapat); letter-spacing: -.01em; }
h2 { font-size: var(--teks-xl); font-weight: var(--tebal-tebal); line-height: var(--tinggi-baris-rapat); }
h3 { font-size: var(--teks-lg); font-weight: var(--tebal-tebal); }
h4 { font-size: var(--teks-md); font-weight: var(--tebal-tebal); }

small { font-size: var(--teks-sm); }

a {
  color: var(--warna-teks-primer);
  text-decoration: none;
  font-weight: var(--tebal-sedang);
}
a:hover { text-decoration: underline; }

img, svg, video { max-width: 100%; height: auto; display: block; }

hr {
  border: 0;
  border-top: 1px solid var(--warna-garis);
  margin: var(--jarak-4) 0;
}

/* Angka (jumlah, persen, pecahan) memakai huruf antarmuka dengan digit
   selebar sama — rata saat ditumpuk, tanpa tampak seperti kode program.
   Huruf monospace hanya untuk pengenal: kode KK, nomor sertifikat, request id. */
.angka { font-variant-numeric: tabular-nums; }
code, kbd, samp, .kode {
  font-family: var(--font-angka);
  font-size: .92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.01em;
}

/* --------------------------------------------------------------- fokus */

:focus { outline: none; }

:focus-visible {
  outline: 3px solid var(--warna-fokus);
  outline-offset: 2px;
  border-radius: var(--radius-1);
}

.lewati-ke-konten {
  position: absolute;
  left: var(--jarak-2);
  top: calc(var(--aman-atas) + var(--jarak-2));
  transform: translateY(-200%);
  z-index: var(--z-toast);
  background: var(--warna-primer);
  color: var(--warna-teks-terbalik);
  padding: var(--jarak-3) var(--jarak-4);
  border-radius: var(--radius-2);
  font-weight: var(--tebal-tebal);
  transition: transform var(--transisi);
}
.lewati-ke-konten:focus-visible { transform: translateY(0); }

/* ---------------------------------------------------------- formulir */

button, input, select, textarea {
  font: inherit;
  color: inherit;
  margin: 0;
}

button { cursor: pointer; background: none; border: none; }
button:disabled { cursor: not-allowed; }

input, select, textarea {
  /* 16px wajib: nilai lebih kecil membuat iOS memperbesar halaman saat difokus. */
  font-size: var(--teks-input);
  width: 100%;
  padding: var(--jarak-3) var(--jarak-4);
  min-height: var(--target-sentuh);
  background: var(--warna-permukaan);
  color: var(--warna-teks);
  border: 1px solid var(--warna-garis-kuat);
  border-radius: var(--radius-2);
  transition: border-color var(--transisi-cepat), box-shadow var(--transisi-cepat);
  appearance: none;
}

textarea { min-height: 96px; resize: vertical; line-height: var(--tinggi-baris); }

input:focus, select:focus, textarea:focus {
  border-color: var(--warna-primer);
  box-shadow: 0 0 0 3px var(--warna-primer-lembut);
}

input::placeholder, textarea::placeholder { color: var(--warna-teks-samar); }

input:disabled, select:disabled, textarea:disabled {
  background: var(--warna-permukaan-2);
  color: var(--warna-teks-samar);
  cursor: not-allowed;
}

input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--warna-bahaya);
}
input[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px var(--warna-bahaya-lembut); }

select {
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: var(--jarak-10);
}

/* Aturan `input` umum di atas memakai appearance:none agar kotak teks seragam
   di semua peramban. Efek sampingnya, kotak centang dan radio ikut kehilangan
   gambar bawaannya sehingga tetap terlihat kosong meski tercentang. Di sini
   gambar bawaan itu dikembalikan, sekaligus membatalkan border dan sudut
   membulat yang diwarisi dari aturan umum. */
input[type="checkbox"], input[type="radio"] {
  appearance: auto;
  -webkit-appearance: auto;
  width: 22px;
  height: 22px;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  accent-color: var(--warna-primer);
  cursor: pointer;
  flex: none;
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible {
  outline: 2px solid var(--warna-primer);
  outline-offset: 2px;
  box-shadow: none;
}

label { display: block; font-size: var(--teks-sm); font-weight: var(--tebal-sedang); }

/* Hilangkan tombol pengatur angka agar kolom nilai tetap rapi di ponsel. */
input[type="number"] { -moz-appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* --------------------------------------------------------- pemuatan awal */

.pemuatan-awal {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--jarak-2);
  text-align: center;
  padding: var(--jarak-8) var(--jarak-4);
}
.pemuatan-awal__logo {
  width: 72px; height: 72px;
  border-radius: var(--radius-penuh);
  margin-bottom: var(--jarak-2);
  box-shadow: 0 0 0 6px var(--warna-aksen-lembut);
  animation: pemuat-denyut 1.6s ease-in-out infinite;
}
.pemuatan-awal__judul { font-size: var(--teks-lg); font-weight: var(--tebal-tebal); }
.pemuatan-awal__sub { color: var(--warna-teks-lembut); font-size: var(--teks-sm); }
.pemuatan-awal__bar {
  margin-top: var(--jarak-4);
  width: 160px; height: 4px;
  border-radius: var(--radius-penuh);
  background: var(--warna-garis);
  overflow: hidden;
}
.pemuatan-awal__bar span {
  display: block; height: 100%; width: 40%;
  border-radius: inherit;
  background: var(--warna-primer);
  animation: geser-memuat 1.1s ease-in-out infinite;
}
@keyframes geser-memuat {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(320%); }
}

/* -------------------------------------------------------------- utilitas */

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.tumpuk { display: flex; flex-direction: column; }
.tumpuk-1 { gap: var(--jarak-1); }
.tumpuk-2 { gap: var(--jarak-2); }
.tumpuk-3 { gap: var(--jarak-3); }
.tumpuk-4 { gap: var(--jarak-4); }
/* --jarak-5 sudah ada sejak awal, tetapi kelas utilitasnya terlewat. Akibatnya
   `tumpuk tumpuk-5` diam-diam menjadi tumpukan tanpa jarak sama sekali —
   tidak ada galat, hanya bagian-bagian yang saling menempel. */
.tumpuk-5 { gap: var(--jarak-5); }
.tumpuk-6 { gap: var(--jarak-6); }

.baris { display: flex; align-items: center; gap: var(--jarak-2); }
.baris-antara { display: flex; align-items: center; justify-content: space-between; gap: var(--jarak-3); }
.baris-atas { align-items: flex-start; }
.baris-bungkus { flex-wrap: wrap; }
.isi-sisa { flex: 1 1 auto; min-width: 0; }

.teks-lembut { color: var(--warna-teks-lembut); }
.teks-samar { color: var(--warna-teks-samar); }
.teks-sm { font-size: var(--teks-sm); }
.teks-xs { font-size: var(--teks-xs); }
.teks-lg { font-size: var(--teks-lg); }
.teks-tebal { font-weight: var(--tebal-tebal); }
.teks-sedang { font-weight: var(--tebal-sedang); }
.teks-tengah { text-align: center; }
.teks-sukses { color: var(--warna-teks-sukses); }
.teks-bahaya { color: var(--warna-teks-bahaya); }
.teks-peringatan { color: var(--warna-teks-peringatan); }

/* Potong teks panjang agar kartu tidak melar di layar 360px. */
.potong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.potong-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sembunyi { display: none !important; }

@media (min-width: 768px) {
  .sembunyi-desktop { display: none !important; }
}
@media (max-width: 767.98px) {
  .sembunyi-mobile { display: none !important; }
}

/* Hormati preferensi pengguna yang sensitif terhadap gerak. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}