/* JawaraPajak: beranda katalog layanan (E1). Warna, huruf, dan ukuran dari tokens.css */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: var(--fw-body);
  line-height: 1.45;
}
img { max-width: 100%; height: auto; display: block; }
[hidden] { display: none !important; }
h1, h2 { font-weight: var(--fw-display); letter-spacing: var(--tracking-display); margin: 0; }
p { margin: 0; }
a { color: var(--link); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { max-width: 1160px; margin-inline: auto; padding-inline: var(--s-4); }

.skip { position: absolute; left: var(--s-4); top: -60px; background: var(--brand); color: var(--on-brand); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 30; }
.skip:focus { top: var(--s-4); }

/* Tombol */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px; padding: 0 22px;
  background: var(--brand); color: var(--on-brand);
  border: 0; border-radius: var(--r-pill);
  font: inherit; font-weight: var(--fw-strong); font-size: 15px; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color .15s ease;
}
.btn:hover { background: var(--merah-tua); color: var(--on-brand); }
.btn--small { min-height: 44px; padding: 0 18px; font-size: 14px; }

/* Header */
.top { position: sticky; top: 0; z-index: 10; background: var(--bg); border-bottom: 1px solid var(--line); }
.top__row { min-height: 68px; display: flex; align-items: center; gap: 28px; }
.brand img { width: 160px; }
.nav { display: none; gap: 24px; margin-left: auto; font-weight: 700; }
.nav a { color: var(--text); text-decoration: none; padding: var(--s-2) 0; }
.nav a:hover { text-decoration: underline; }
.top__row .btn { margin-left: auto; }

/* Pita atas */
.hero { background: var(--kuning); }
.hero__row { padding-block: 24px 28px; display: flex; align-items: center; gap: 32px; }
.hero__copy { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.hero h1 { font-size: clamp(28px, 5vw, 56px); line-height: 1.04; }
.hero__line { font-weight: 700; }
.hero__art { display: none; flex: 0 0 300px; margin: 0; position: relative; justify-content: center; }
.hero__art img { width: 280px; }
.tag {
  position: absolute; top: 18px; right: 6px;
  background: var(--brand); color: var(--on-brand);
  font-weight: var(--fw-display); font-size: 20px; padding: 4px 12px; border-radius: var(--r-sm);
  transform: rotate(-8deg);
}

/* Cek pajak */
.plat-form { background: var(--putih); border-radius: 18px; padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; max-width: 520px; }
.plat-form label { font-weight: var(--fw-display); }
.plat-form__row { display: flex; align-items: center; gap: 10px; }

/* Kotak isian berbentuk plat nomor putih (model baru): bingkai hitam ganda, huruf rapat */
.plate {
  flex: 1; min-width: 0; position: relative;
  display: flex; flex-direction: column; align-items: center;
  background: var(--putih); border: 3px solid var(--hitam); border-radius: 10px;
  padding: 6px 10px;
  box-shadow: inset 0 0 0 2px var(--putih), inset 0 0 0 3.5px var(--hitam);
}
.plate:focus-within { outline: 3px solid var(--merah); outline-offset: 3px; }
.plate:has(.plate__no[aria-invalid="true"]) { border-color: var(--merah); }
.plate__no {
  width: 100%; height: 48px; border: 0; background: transparent; padding: 0;
  font: inherit; font-weight: var(--fw-display); font-stretch: 72%; font-size: clamp(24px, 7vw, 32px); line-height: 1;
  letter-spacing: .1em; text-transform: uppercase; text-align: center; color: var(--hitam);
}
.plate__no:focus { outline: none; }
.plate__no::placeholder { color: #8A867F; opacity: 1; }
.hint { font-size: 13px; color: var(--muted); }
.msg { font-size: 14px; font-weight: 600; }
.msg:empty { display: none; }
.msg.is-error { color: var(--merah); }

/* Kategori */
.cats-wrap { padding-top: 20px; padding-bottom: 4px; }
.cats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.cat { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 4px; border-radius: 16px; text-decoration: none; color: var(--text); text-align: center; }
.cat:hover { background: var(--surface); }
.cat__ic { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; }
.cat__ic img { width: 30px; height: 30px; }
.cat__ic--merah, .tile__ic--merah { background: #FBE4E3; }
.cat__ic--kuning, .tile__ic--kuning { background: #FFF1CC; }
.cat__ic--abu { background: #EFEDE8; }
.cat__name { font-weight: var(--fw-display); font-size: 14px; }
.cat__sub { display: none; font-size: 13px; color: var(--muted); }

/* Kelompok layanan */
.group { padding-top: 24px; padding-bottom: 4px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 92px; }
.group__head { display: flex; align-items: baseline; gap: 10px; }
.group h2 { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; }
.group__count { font-size: 13px; font-weight: 700; color: var(--muted); }
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile {
  min-height: 60px; padding: 10px 12px; border-radius: 14px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text); text-decoration: none; font-weight: 700; font-size: 14px; line-height: 1.25;
  display: flex; align-items: center; gap: 8px;
  transition: border-color .15s ease;
}
.tile:hover { border-color: var(--hitam); }
.tile__ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; flex: none; }
.tile__ic img { width: 22px; height: 22px; }
.tile__name { flex: 1; min-width: 0; }
.tile__go { display: none; width: 18px; height: 18px; flex: none; }
.more summary { cursor: pointer; font-weight: 700; font-size: 14px; color: var(--merah); min-height: 44px; display: flex; align-items: center; }
.more[open] summary { margin-bottom: 4px; }

.empty { padding: 16px; border: 2px dashed var(--line); border-radius: 14px; color: var(--muted); font-size: 14px; }

.peraturan { background: var(--hitam); color: var(--putih); border-radius: 20px; padding: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; margin-bottom: 40px; }
.peraturan__copy { flex: 1 1 300px; display: flex; flex-direction: column; gap: 6px; }
.peraturan__cari { flex: 1 1 320px; display: flex; gap: 8px; }
.peraturan__cari input { flex: 1; min-width: 0; height: 48px; border: 0; border-radius: var(--r-pill); padding: 0 18px; font: inherit; font-size: 15px; }
.peraturan__all { color: var(--kuning); font-weight: 700; font-size: 14px; flex-basis: 100%; }
.btn--kuning { background: var(--kuning); color: var(--hitam); }
.btn--kuning:hover { background: #F2B71E; color: var(--hitam); }
.peraturan h2 { font-size: clamp(20px, 2.4vw, 28px); letter-spacing: -0.02em; }
.peraturan p { color: #CFCBC4; font-size: 14px; max-width: 46em; }

/* Footer */
.foot { background: var(--surface-2); border-top: 1px solid var(--line); }
.foot__grid { padding-block: 28px 96px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; font-size: 14px; }
.foot__brand { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 10px; }
.foot__brand img { width: 160px; }
.foot__brand p { color: var(--muted); }
.foot nav { display: flex; flex-direction: column; gap: 8px; }
.foot nav a { color: var(--text); }

/* Tombol WhatsApp mengambang (HP) */
.fab {
  position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 20;
  width: 58px; height: 58px; border-radius: 50%;
  background: #12863F; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
}
.fab:hover { background: #0E6E33; }

.toast {
  position: fixed; left: 16px; right: 88px; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); z-index: 25;
  max-width: 420px; background: var(--hitam); color: var(--putih);
  padding: 12px 16px; border-radius: 12px; font-size: 14px; font-weight: 600;
}

/* Halaman teks (syarat, privasi) */
.doc { padding-block: 40px 64px; max-width: 720px; display: flex; flex-direction: column; gap: 14px; }
.doc h1 { font-size: clamp(28px, 4vw, 40px); }
.doc p { color: var(--muted); font-size: 16px; }

/* Layar lebar */
@media (min-width: 760px) {
  .wrap { padding-inline: 32px; }
  .nav { display: flex; }
  .top__row { min-height: 80px; }
  .brand img { width: 200px; }
  .foot__brand img { width: 180px; }
  .top__row .btn { margin-left: 0; }
  .hero__art { display: flex; }
  .cats { gap: 16px; }
  .cat__sub { display: block; }
  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .tile__go { display: block; }
  .foot__grid { grid-template-columns: 2fr 1fr 1fr 1fr; padding-bottom: 32px; }
  .foot__brand { grid-column: auto; }
  .fab { display: none; }
  .toast { right: auto; left: 32px; }
}