/* Abdidaya 2026 — gaya non-kritis.
   Dimuat setelah render pertama; tidak boleh berisi apa pun yang
   dibutuhkan layar awal, karena critical.css sudah menanganinya. */

/* ---------- Font lokal ----------
   Self-hosted agar tidak ada permintaan pihak ketiga yang menahan render
   dan tidak ada data pengunjung yang mengalir ke luar.

   BLOK INI MASIH NONAKTIF. Berkas .woff2 belum ada di assets/fonts/, dan
   @font-face yang menunjuk berkas hilang menghasilkan 404 pada setiap
   halaman. Sampai berkasnya ditaruh, situs memakai tumpukan font sistem
   yang sudah didefinisikan pada --font-judul/--font-teks. Cara
   mengaktifkan ada di assets/fonts/README.md.

@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("../fonts/jakarta-700.woff2") format("woff2");
  font-weight: 700 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122, U+2212;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122, U+2212;
}

@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-600.woff2") format("woff2");
  font-weight: 600 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+2000-206F, U+2122, U+2212;
}

*/

/* ---------- Tata letak umum ---------- */

.abd-main { min-height: 50vh; }

.abd-section { padding: clamp(44px, 6vw, 88px) 0; }
.abd-section--tint { background: var(--hijau-lembut); }

.abd-section__head {
  max-width: 62ch;
  margin-bottom: clamp(24px, 3vw, 44px);
}
.abd-section__eyebrow {
  display: inline-block;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--hijau-utama);
  margin-bottom: 8px;
}
.abd-section__head h2 { position: relative; padding-bottom: 14px; }
.abd-section__head h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 56px; height: 4px;
  border-radius: 2px;
  background: var(--grad-emas);
}
.abd-section__head p { color: var(--teks-lembut); margin-bottom: 0; }

.abd-grid { display: grid; gap: clamp(16px, 2vw, 26px); }
.abd-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.abd-grid--3 { grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.abd-grid--4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }

/* ---------- Kartu ---------- */

.abd-card {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform var(--durasi) ease, box-shadow var(--durasi) ease;
  display: flex;
  flex-direction: column;
}
.abd-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.abd-card__media { aspect-ratio: 16 / 10; background: var(--n-100); }
.abd-card__media img { width: 100%; height: 100%; object-fit: cover; }
.abd-card__media picture { display: block; width: 100%; height: 100%; }
.abd-card__body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.abd-card__title { font-size: 1.08rem; margin-bottom: 8px; }
.abd-card__title a { color: inherit; text-decoration: none; }
.abd-card__title a:hover { color: var(--hijau-utama); }
.abd-card__meta {
  font-size: .82rem;
  color: var(--teks-lembut);
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-bottom: 10px;
}
.abd-card__excerpt { color: var(--teks-lembut); font-size: .93rem; margin-bottom: 14px; }
.abd-card__foot { margin-top: auto; }

.abd-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-pill);
  background: var(--hijau-lembut); color: var(--hijau-atas-lembut);
  font-size: .76rem;
  font-weight: 700;
  text-decoration: none;
}
.abd-chip--emas { background: rgba(242, 176, 30, .22); color: #7A5A05; }

/* ---------- Statistik ---------- */

.abd-stat {
  text-align: center;
  padding: 26px 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}
.abd-stat__num {
  font-family: var(--font-judul);
  font-size: clamp(2rem, 1.4rem + 2vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
  background: var(--grad-hijau);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abd-stat__label { font-size: .88rem; color: var(--teks-lembut); margin-top: 8px; }

/* ---------- Pengumuman ---------- */

.abd-announce { background: var(--hijau-tua); color: #fff; font-size: .92rem; }
.abd-announce--warning { background: #8A5A00; }
.abd-announce--urgent { background: #9C1B2B; }
.abd-announce__inner {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 10px var(--gutter);
  display: flex;
  align-items: center;
  gap: 12px;
}
.abd-announce__text { margin: 0; flex: 1; }
.abd-announce__link { color: #fff; font-weight: 700; white-space: nowrap; }
.abd-announce__close {
  background: transparent;
  border: 0;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  width: 32px; height: 32px;
  border-radius: 50%;
}
.abd-announce__close:hover { background: rgba(255, 255, 255, .18); }

/* ---------- Laci menu seluler ---------- */

/* Laci dipakai di bawah 1120px (lihat titik-henti header). Panel meluncur
   dari kanan di atas tirai gelap, dan karena ia saudara <header> — bukan
   keturunannya — position:fixed-nya benar relatif terhadap viewport. */
.abd-laci {
  position: fixed;
  inset: 0;
  z-index: 200;
}
.abd-laci[hidden] { display: none; }

.abd-laci__tirai {
  position: absolute;
  inset: 0;
  background: rgba(6, 32, 18, .5);
  opacity: 0;
  transition: opacity var(--durasi) ease;
}

.abd-laci__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(86vw, 340px);
  display: flex;
  flex-direction: column;
  background: var(--surface);
  box-shadow: -12px 0 40px rgba(6, 32, 18, .28);
  transform: translateX(100%);
  transition: transform .28s cubic-bezier(.22, 1, .36, 1);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
}

/* Kelas dipasang skrip pada rangka berikutnya agar transisinya tampil,
   bukan langsung melompat ke keadaan terbuka. */
.abd-laci.is-buka .abd-laci__tirai { opacity: 1; }
.abd-laci.is-buka .abd-laci__panel { transform: translateX(0); }

.abd-laci__atas {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 12px 16px 20px;
  border-bottom: 1px solid var(--garis);
  position: sticky;
  top: 0;
  background: var(--surface);
}
.abd-laci__judul {
  font-family: var(--font-judul);
  font-weight: 800;
  font-size: 1.05rem;
}
.abd-laci__tutup {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  color: var(--teks);
  cursor: pointer;
}
.abd-laci__tutup:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }

.abd-laci__list {
  list-style: none;
  margin: 0;
  padding: 8px;
  flex: 1 1 auto;
}
.abd-laci__butir + .abd-laci__butir { border-top: 1px solid var(--garis); }

.abd-laci__link {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 8px 14px;
  border-radius: var(--r-md);
  color: var(--teks);
  text-decoration: none;
  font-weight: 600;
  font-size: 1.02rem;
}
.abd-laci__link:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }
.abd-laci__link[aria-current="page"] {
  background: var(--hijau-lembut);
  color: var(--hijau-atas-lembut);
  box-shadow: inset 3px 0 0 var(--emas);
}

.abd-laci__sub {
  list-style: none;
  margin: 0 0 6px;
  padding: 0 0 0 14px;
}
.abd-laci__sub a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 6px 14px;
  color: var(--teks-lembut);
  text-decoration: none;
  font-size: .94rem;
}
.abd-laci__sub a:hover { color: var(--hijau-atas-lembut); }

.abd-laci__aksi {
  padding: 12px 16px 4px;
  border-top: 1px solid var(--garis);
}
.abd-laci__aksi .abd-btn { width: 100%; justify-content: center; }

/* Saat laci terbuka, badan halaman tidak boleh ikut tergulir di belakangnya. */
body.laci-terbuka { overflow: hidden; }

/* Laci hanya alat seluler; di lebar penuh menunya kembali ke bilah atas. */
@media (min-width: 1120px) {
  .abd-laci { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .abd-laci__tirai,
  .abd-laci__panel { transition: none; }
}

@media (min-width: 1025px) {
  .abd-nav__item.has-children { position: relative; }
  .abd-nav__sub {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 230px;
    list-style: none;
    margin: 0;
    padding: 8px;
    background: var(--surface);
    border: 1px solid var(--garis);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--durasi) ease, transform var(--durasi) ease, visibility var(--durasi);
  }
  .abd-nav__item.has-children:hover .abd-nav__sub,
  .abd-nav__item.has-children:focus-within .abd-nav__sub {
    opacity: 1; visibility: visible; transform: translateY(0);
  }
  .abd-nav__sub a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--r-sm);
    color: var(--teks);
    text-decoration: none;
    font-size: .92rem;
  }
  .abd-nav__sub a:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }
}

/* ---------- Widget aksesibilitas (kiri bawah) ---------- */

.abd-a11y { position: fixed; left: 16px; bottom: 16px; z-index: 150; }

.abd-a11y__toggle,
.abd-totop {
  width: 52px; height: 52px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--hijau-utama);
  color: #fff;
  cursor: pointer;
  box-shadow: var(--shadow-md);
  transition: transform var(--durasi) ease, background var(--durasi) ease;
}
.abd-a11y__toggle:hover, .abd-totop:hover { transform: scale(1.06); background: var(--hijau-tua); }

.abd-a11y__panel {
  position: absolute;
  left: 0;
  bottom: 64px;
  width: min(304px, calc(100vw - 32px));
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}
.abd-a11y__panel[hidden] { display: none; }
.abd-a11y__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.abd-a11y__title { font-size: 1rem; margin: 0; }
.abd-a11y__close {
  width: 34px; height: 34px;
  border: 0; border-radius: 50%;
  background: var(--n-100);
  color: var(--teks);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}
.abd-a11y__group { margin-bottom: 14px; }
.abd-a11y__label { display: block; font-size: .84rem; font-weight: 700; margin-bottom: 8px; }
.abd-a11y__stepper {
  display: grid;
  grid-template-columns: 48px 1fr 48px;
  align-items: center;
  gap: 8px;
}
.abd-a11y__stepper button {
  min-height: 44px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--teks);
  font-weight: 700;
  cursor: pointer;
}
.abd-a11y__stepper button:hover { background: var(--hijau-lembut); }
.abd-a11y__stepper output { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

.abd-a11y__switch {
  width: 100%;
  min-height: 46px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 10px;
  margin-bottom: 4px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teks);
  font: inherit;
  font-size: .9rem;
  text-align: left;
  cursor: pointer;
}
.abd-a11y__switch:hover { background: var(--n-100); }
.abd-a11y__switch-track {
  flex: 0 0 auto;
  width: 42px; height: 24px;
  border-radius: var(--r-pill);
  background: var(--n-300);
  position: relative;
  transition: background var(--durasi) ease;
}
.abd-a11y__switch-track::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform var(--durasi) ease;
}
.abd-a11y__switch[aria-checked="true"] .abd-a11y__switch-track { background: var(--hijau-utama); }
.abd-a11y__switch[aria-checked="true"] .abd-a11y__switch-track::after { transform: translateX(18px); }

.abd-a11y__reset {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teks-lembut);
  font: inherit;
  font-size: .86rem;
  cursor: pointer;
}
.abd-a11y__reset:hover { background: var(--n-100); color: var(--teks); }

/* ---------- Tombol kembali ke atas (kanan bawah) ---------- */

.abd-totop { position: fixed; right: 16px; bottom: 16px; z-index: 150; }
.abd-totop[hidden] { display: none; }

/* Pada layar sempit kedua tombol melayang bisa berdempetan dengan
   konten; ukurannya dikecilkan sedikit agar tidak menutupi teks. */
@media (max-width: 420px) {
  .abd-a11y__toggle, .abd-totop { width: 46px; height: 46px; }
}

/* ---------- Preferensi aksesibilitas ---------- */

html[data-a11y-contrast="1"] {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --teks: #000000;
  --teks-lembut: #1A1A1A;
  --garis: #000000;
  --hijau-lembut: #FFFFFF;
  --aksen: #00551F;
}
html[data-a11y-contrast="1"] body { background: #fff; }
html[data-a11y-contrast="1"] .abd-hero,
html[data-a11y-contrast="1"] .abd-footer { background: #00320F; }
html[data-a11y-contrast="1"] .abd-card { box-shadow: none; border-width: 2px; }

html[data-a11y-dyslexia="1"] body {
  font-family: "Comic Sans MS", "Verdana", sans-serif;
  letter-spacing: .04em;
  word-spacing: .12em;
  line-height: 1.9;
}
html[data-a11y-dyslexia="1"] h1,
html[data-a11y-dyslexia="1"] h2,
html[data-a11y-dyslexia="1"] h3 { letter-spacing: .02em; }

html[data-a11y-motion="1"] *,
html[data-a11y-motion="1"] *::before,
html[data-a11y-motion="1"] *::after {
  animation: none !important;
  transition: none !important;
  scroll-behavior: auto !important;
}

html[data-a11y-focus="1"] :focus-visible {
  outline: 4px solid #C6172B;
  outline-offset: 4px;
}

html[data-a11y-links="1"] a {
  text-decoration: underline !important;
  text-decoration-thickness: 2px;
  background: rgba(242, 176, 30, .26);
}

/* ---------- Footer ---------- */

.abd-footer {
  position: relative;
  margin-top: clamp(48px, 6vw, 96px);
  background: var(--hijau-tua);
  color: rgba(255, 255, 255, .88);
  overflow: hidden;
}
.abd-footer__pattern {
  position: absolute;
  inset: 0;
  background-image: url("../img/pola-sulapa.svg");
  background-size: 150px;
  opacity: .07;
  pointer-events: none;
}
.abd-footer__inner {
  position: relative;
  max-width: var(--wrap);
  margin-inline: auto;
  padding: clamp(40px, 5vw, 68px) var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 32px;
}
.abd-footer__heading {
  font-size: .82rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emas-terang);
  margin-bottom: 14px;
}
.abd-footer__desc { font-size: .92rem; max-width: 42ch; margin-top: 16px; }
.abd-footer__nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abd-footer a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.abd-footer a:hover { color: var(--emas-terang); text-decoration: underline; }
.abd-footer address { font-style: normal; font-size: .92rem; line-height: 1.8; }
.abd-footer__bar {
  position: relative;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.abd-footer__bar {
  max-width: var(--wrap);
  margin-inline: auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
  font-size: .84rem;
}
.abd-footer__bar p { margin: 0; }
.abd-footer__meta { display: flex; gap: 10px; }

@media (max-width: 860px) {
  .abd-footer__inner { grid-template-columns: 1fr; }
}

/* ---------- Formulir ---------- */

.abd-field { margin-bottom: 18px; }
.abd-field label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.abd-field input,
.abd-field select,
.abd-field textarea {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--teks);
  font: inherit;
}
.abd-field input:focus,
.abd-field textarea:focus { border-color: var(--hijau-utama); }
.abd-field__hint { font-size: .82rem; color: var(--teks-lembut); margin-top: 6px; }
.abd-field__error { font-size: .84rem; color: #C6172B; margin-top: 6px; font-weight: 600; }

.abd-captcha { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.abd-captcha__img {
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: #fff;
}
.abd-captcha__reload {
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teks-lembut);
  font: inherit;
  font-size: .84rem;
  cursor: pointer;
}

.abd-alert {
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid var(--garis);
  margin-bottom: 20px;
  font-size: .94rem;
}
.abd-alert--error { background: #FDECEE; border-color: #F3B8C0; color: #7C0F1D; }
.abd-alert--success { background: var(--hijau-lembut); border-color: var(--hijau-daun); color: var(--hijau-atas-lembut); }

/* ---------- Halaman galat ---------- */

.abd-error { text-align: center; padding: clamp(60px, 10vw, 140px) var(--gutter); }
.abd-error__mascot { height: 280px; width: auto; margin: 0 auto 28px; }
.abd-error__code {
  font-family: var(--font-judul);
  font-size: clamp(4rem, 12vw, 9rem);
  font-weight: 800;
  line-height: .9;
  background: var(--grad-hijau);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Utilitas ---------- */

.abd-prose { max-width: 72ch; }
.abd-prose h2 { margin-top: 1.8em; }
.abd-prose img { border-radius: var(--r-md); margin: 1.4em 0; }
.abd-prose blockquote {
  margin: 1.6em 0;
  padding: 4px 0 4px 20px;
  border-left: 4px solid var(--emas);
  color: var(--teks-lembut);
  font-style: italic;
}
.abd-prose h3 { margin-top: 1.5em; }
.abd-prose ul,
.abd-prose ol { padding-left: 1.35em; }
.abd-prose li { margin-bottom: .45em; }
.abd-prose li::marker { color: var(--aksen); }

/* Tabel di dalam naskah — jadwal nasional, makna logo, rekap penghargaan.
   Di layar sempit ia digulir sendiri agar tidak melebarkan halaman. */
.abd-prose table {
  width: 100%;
  margin: 1.6em 0;
  border-collapse: collapse;
  font-size: .94rem;
}
.abd-prose thead th {
  text-align: left;
  padding: 11px 14px;
  background: var(--hijau-lembut);
  color: var(--hijau-atas-lembut);
  font-family: var(--font-judul);
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.abd-prose tbody td {
  padding: 11px 14px;
  border-top: 1px solid var(--garis);
  vertical-align: top;
}
.abd-prose tbody tr:first-child td { border-top: 0; }
.abd-prose thead th:first-child,
.abd-prose tbody td:first-child { border-radius: var(--r-sm) 0 0 var(--r-sm); font-weight: 600; }

/* Tanpa min-width: 0, kolom grid pembungkus naskah ikut melebar sebesar
   tabel dan mendorong seluruh paragraf keluar layar di ponsel. */
.abd-dua-kolom > *, .abd-prose { min-width: 0; }
.abd-prose table { max-width: 100%; }

@media (max-width: 620px) {
  .abd-prose table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .abd-prose tbody td { white-space: normal; min-width: 150px; }
}

.abd-center { text-align: center; }
.abd-mt-lg { margin-top: clamp(24px, 3vw, 44px); }

@media print {
  .abd-header, .abd-footer, .abd-a11y, .abd-totop, .abd-announce { display: none !important; }
  body { background: #fff; color: #000; font-size: 12pt; }
}

/* Keping terang untuk logo resmi di footer gelap. */
.abd-footer__logo {
  display: inline-block;
  padding: 14px 18px;
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}
.abd-footer__logo img { height: 96px; width: auto; }

/* =====================================================================
   Halaman autentikasi
   ===================================================================== */

.abd-body--auth { min-height: 100vh; min-height: 100svh; }
.abd-body--auth::before { display: none; }  /* sisi kiri sudah bermotif */

.abd-auth {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  /* svh mengikuti tinggi layar yang benar-benar terlihat; di Safari iOS,
     100vh menghitung bilah alamat yang sedang tersembunyi sehingga
     halaman jadi sedikit lebih tinggi daripada layarnya. */
  min-height: 100vh;
  min-height: 100svh;
}

/* ---------- Sisi identitas ---------- */

.abd-auth__sisi {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(88px, 8vw, 104px);
  background: radial-gradient(120% 90% at 15% 0%, #1AA34A 0%, #0E7A34 45%, #06532A 100%);
  color: #fff;
  isolation: isolate;
}

.abd-auth__pola {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pola-sulapa.svg");
  background-size: 150px;
  opacity: .14;
}

/* Pita emas di tepi dalam, meniru lis kain lipa' sabbe. */
.abd-auth__sisi::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-end: 0;
  width: 6px;
  background: var(--grad-emas);
}

.abd-auth__kembali {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 9px 16px 9px 12px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .13);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  text-decoration: none;
  transition: background var(--durasi) ease;
}
.abd-auth__kembali:hover { background: rgba(255, 255, 255, .24); color: #fff; }

.abd-auth__isi { position: relative; z-index: 1; max-width: 30rem; margin-block: auto; }
.abd-auth__logo { height: 108px; width: auto; margin-bottom: 26px; }

.abd-auth__judul {
  font-size: clamp(1.6rem, 1.1rem + 1.7vw, 2.5rem);
  color: #fff;
  margin-bottom: .5em;
}

.abd-auth__lead {
  color: rgba(255, 255, 255, .9);
  font-size: 1.02rem;
  max-width: 34ch;
}

.abd-auth__fakta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 26px 0 0;
}
.abd-auth__fakta > div {
  padding: 12px 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .2);
}
.abd-auth__fakta dt {
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--emas-terang);
  font-weight: 800;
}
.abd-auth__fakta dd { margin: 3px 0 0; font-weight: 700; font-size: .95rem; }

/* Maskot menempel di sudut bawah kanan panel, sebagian keluar bingkai —
   sumbernya masih berlatar hijau, dan latar panel yang juga hijau membuat
   sambungannya hampir tak terlihat. Diberi mask agar tepi bawahnya luruh. */
.abd-auth__maskot {
  position: absolute;
  right: -40px;
  bottom: -20px;
  z-index: 0;
  width: clamp(150px, 19vw, 240px);
  height: auto;
  opacity: .72;
  mix-blend-mode: luminosity;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 26%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 16%, #000 84%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 26%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  pointer-events: none;
}

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

.abd-auth__panel {
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3.5vw, 48px);
  background: var(--bg);
}

.abd-auth__alat {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-bottom: auto;
}

.abd-auth__kartu {
  width: 100%;
  max-width: 27rem;
  margin: clamp(24px, 4vh, 48px) auto;
  padding: clamp(24px, 3vw, 38px);
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-md);
}

.abd-auth__kepala { margin-bottom: 26px; }
.abd-auth__kepala h2 { font-size: 1.5rem; margin-bottom: .3em; }
.abd-auth__kepala p { color: var(--teks-lembut); font-size: .94rem; margin: 0; }

.abd-auth__kaki {
  margin: 0;
  text-align: center;
  font-size: .82rem;
  color: var(--teks-lembut);
}
.abd-auth__kaki a { color: var(--teks-lembut); }

.abd-auth__catatan {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 18px 0 0;
  font-size: .8rem;
  line-height: 1.5;
  color: var(--teks-lembut);
}
.abd-auth__catatan svg { flex: 0 0 auto; margin-top: 2px; color: var(--hijau-utama); }

/* ---------- Kolom isian dengan ikon ---------- */

.abd-input { position: relative; display: flex; align-items: center; }
.abd-input > svg {
  position: absolute;
  inset-inline-start: 14px;
  color: var(--teks-lembut);
  pointer-events: none;
}
.abd-input input { padding-inline-start: 44px; }
.abd-input:focus-within > svg { color: var(--hijau-utama); }

.abd-input__aksi {
  position: absolute;
  inset-inline-end: 6px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teks-lembut);
  cursor: pointer;
}
.abd-input__aksi:hover { background: var(--n-100); color: var(--teks); }
.abd-input__aksi[aria-pressed="true"] { color: var(--hijau-utama); }
/* Dulu memakai :has(), yang belum ada di Firefox sebelum versi 121 —
   di sana teks sandi tertimpa tombol lihat. Kelasnya kini dipasang oleh
   skrip yang memang sudah memunculkan tombol itu. */
.abd-input.is-beraksi input { padding-inline-end: 50px; }

.abd-field__baris {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.abd-field__tautan { font-size: .84rem; font-weight: 600; }

.abd-check {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 22px;
  font-size: .92rem;
  cursor: pointer;
}
.abd-check input {
  width: 20px;
  height: 20px;
  min-height: 0;
  accent-color: var(--hijau-utama);
  cursor: pointer;
}

.abd-btn--blok { width: 100%; }

/* ---------- Captcha ---------- */

.abd-captcha {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: center;
  gap: 10px;
}
.abd-captcha__img {
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: #fff;
}
.abd-captcha__reload {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--teks-lembut);
  cursor: pointer;
  transition: transform var(--durasi) ease, color var(--durasi) ease;
}
.abd-captcha__reload:hover { color: var(--hijau-utama); transform: rotate(-45deg); }
.abd-captcha__input {
  text-transform: uppercase;
  letter-spacing: .28em;
  font-weight: 700;
  text-align: center;
}

/* ---------- Peringatan berikon ---------- */

.abd-alert { display: flex; align-items: flex-start; gap: 10px; }
.abd-alert svg { flex: 0 0 auto; margin-top: 2px; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .abd-alert--error {
    background: #35131A; border-color: #7C2635; color: #FFC9D1;
  }
  :root:not([data-theme="light"]) .abd-alert--success {
    background: #10301F; border-color: #2C6B42; color: #BDE7CB;
  }
}
:root[data-theme="dark"] .abd-alert--error {
  background: #35131A; border-color: #7C2635; color: #FFC9D1;
}
:root[data-theme="dark"] .abd-alert--success {
  background: #10301F; border-color: #2C6B42; color: #BDE7CB;
}

/* ---------- Penyesuaian layar sempit ---------- */

@media (max-width: 900px) {
  .abd-auth { grid-template-columns: 1fr; }
  .abd-auth__sisi { padding-bottom: 130px; }
  .abd-auth__sisi::after { inset: auto 0 0 0; width: auto; height: 5px; }
  .abd-auth__logo { height: 78px; margin-bottom: 18px; }
  .abd-auth__maskot { width: 140px; height: auto; right: -18px; bottom: -10px; }
  .abd-auth__alat { justify-content: center; margin-bottom: 0; }
  .abd-auth__kartu { margin-block: 24px; }
}

@media (max-width: 420px) {
  .abd-captcha { grid-template-columns: auto auto; }
  .abd-captcha__input { grid-column: 1 / -1; }
}

/* =====================================================================
   Maskot — animasi
   =====================================================================

   Gaya gerak dipilih panitia di /wp-admin/maskot dan sampai ke sini
   sebagai atribut data-maskot pada gambar. Intensitas mengatur seberapa
   jauh geraknya lewat --maskot-jarak dan --maskot-miring.

   Semua animasi mati bila pengunjung meminta pengurangan gerak, baik
   lewat preferensi sistem maupun lewat widget aksesibilitas. Pengaturan
   admin tidak boleh menimpa itu.
   ===================================================================== */

:root {
  --maskot-jarak: 10px;
  --maskot-miring: 1.6deg;
  --maskot-tempo: 5s;
}

:root[data-maskot-intensitas="halus"] {
  --maskot-jarak: 6px;
  --maskot-miring: 1deg;
  --maskot-tempo: 6.5s;
}

:root[data-maskot-intensitas="jelas"] {
  --maskot-jarak: 16px;
  --maskot-miring: 2.6deg;
  --maskot-tempo: 4s;
}

.abd-maskot { transform-origin: 50% 92%; will-change: transform; }

.abd-maskot[data-maskot="apung"] {
  animation: maskot-apung var(--maskot-tempo) ease-in-out infinite;
}

.abd-maskot[data-maskot="goyang"] {
  animation: maskot-goyang var(--maskot-tempo) ease-in-out infinite;
}

.abd-maskot[data-maskot="sapa"] {
  animation: maskot-sapa var(--maskot-tempo) ease-in-out infinite;
}

.abd-maskot[data-maskot="diam"] { animation: none; }

@keyframes maskot-apung {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(calc(var(--maskot-jarak) * -1)); }
}

@keyframes maskot-goyang {
  0%, 100% { transform: rotate(calc(var(--maskot-miring) * -1)); }
  50%      { transform: rotate(var(--maskot-miring)); }
}

@keyframes maskot-sapa {
  0%, 100% { transform: translateY(0) rotate(calc(var(--maskot-miring) * -.6)); }
  30%      { transform: translateY(calc(var(--maskot-jarak) * -1)) rotate(var(--maskot-miring)); }
  55%      { transform: translateY(calc(var(--maskot-jarak) * -.35)) rotate(calc(var(--maskot-miring) * -.3)); }
  80%      { transform: translateY(calc(var(--maskot-jarak) * -.8)) rotate(calc(var(--maskot-miring) * .7)); }
}

@media (prefers-reduced-motion: reduce) {
  .abd-maskot { animation: none !important; }
}

html[data-a11y-motion="1"] .abd-maskot { animation: none !important; }

/* Maskot bawaan tema masih berlatar hijau, bukan transparan. Peredupan
   tepi hanya dipasang untuk berkas bawaan itu; begitu panitia mengunggah
   berkas ber-alpha, kelas is-legacy hilang dan maskot tampil utuh. */
.abd-maskot.is-legacy {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 20%, #000 82%, transparent 100%);
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 9%, #000 88%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 20%, #000 82%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
}

/* =====================================================================
   Bagian beranda
   ===================================================================== */

.abd-section--rapat { padding-block: clamp(28px, 3.4vw, 48px); }

.abd-section__head--baris {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  max-width: none;
}
.abd-section__eyebrow--terang { color: var(--emas-terang); }

.abd-tautan-kanan {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: .9rem;
  text-decoration: none;
  white-space: nowrap;
}
.abd-tautan-kanan svg { transition: transform var(--durasi) ease; }
.abd-tautan-kanan:hover svg { transform: translateX(4px); }

/* ---------- Angka ringkas ---------- */

.abd-angka {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(12px, 1.6vw, 20px);
}
.abd-angka__kartu {
  position: relative;
  padding: 24px 22px 22px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

/* Sapuan emas tipis di tepi atas — pengikat visual antar kartu. */
.abd-angka__kartu::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-emas);
}

.abd-angka__ikon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  margin-bottom: 14px;
  border-radius: var(--r-md);
  background: var(--hijau-lembut);
  color: var(--hijau-utama);
}
.abd-angka__num {
  display: block;
  font-family: var(--font-judul);
  font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  background: var(--grad-angka);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abd-angka__label {
  display: block;
  margin-top: 6px;
  font-size: .86rem;
  color: var(--teks-lembut);
}

/* Di ponsel, kartu angka yang menumpuk vertikal memakan layar panjang dan
   membuat isi di bawahnya terdorong jauh. Diubah jadi geseran mendatar:
   kartunya berjajar, sedikit mengintip di tepi sebagai isyarat bisa
   digeser, dan mengancing satu per satu saat digeser. Karena menggulir di
   dalam wadahnya sendiri, halaman tidak ikut melebar. */
@media (max-width: 720px) {
  .abd-angka {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-padding: 0;
    /* Bilah gulir disembunyikan; mengintipnya kartu berikut sudah jadi
       isyarat yang cukup, dan bilah di tengah halaman justru mengganggu. */
    scrollbar-width: none;
    /* Beri ruang bawah supaya bayangan kartu tidak terpotong wadah. */
    padding-bottom: 4px;
  }
  .abd-angka::-webkit-scrollbar { display: none; }

  .abd-angka__kartu {
    flex: 0 0 76%;
    scroll-snap-align: start;
  }

  /* Kartu terakhir diberi jarak kanan agar bisa tergulir penuh ke tepi. */
  .abd-angka__kartu:last-child { margin-right: 2px; }
}
/* ---------- Penghargaan ---------- */

.abd-piala {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #06532A 0%, #084A28 55%, #052F1A 100%);
  color: #fff;
  isolation: isolate;
}
.abd-piala__pola {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pola-sulapa.svg");
  background-size: 150px;
  opacity: .1;
}
.abd-piala__kepala { max-width: 62ch; margin-bottom: clamp(26px, 3vw, 44px); }
.abd-piala__kepala h2 { color: #fff; }
.abd-piala__kepala h2 b {
  font-weight: 800;
  background: var(--grad-emas);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abd-piala__kepala p { color: rgba(255, 255, 255, .84); margin-bottom: 0; }

.abd-piala__kisi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.abd-piala__item {
  padding: 18px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .14);
  transition: background var(--durasi) ease, transform var(--durasi) ease;
}
.abd-piala__item:hover { background: rgba(255, 255, 255, .13); transform: translateY(-3px); }
.abd-piala__item b {
  display: block;
  font-family: var(--font-judul);
  font-size: 1.9rem;
  line-height: 1;
  color: var(--emas-terang);
  font-variant-numeric: tabular-nums;
}
.abd-piala__nama { display: block; margin-top: 6px; font-weight: 700; font-size: .92rem; }
.abd-piala__kat { display: block; margin-top: 2px; font-size: .78rem; color: rgba(255, 255, 255, .66); }

.abd-piala__aksi {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: clamp(24px, 3vw, 38px) 0 0;
}

/* ---------- Alur empat hari ---------- */

.abd-alur {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: clamp(14px, 1.8vw, 22px);
}
.abd-alur__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

/* Garis penyambung antarhari, memberi kesan urutan alih-alih empat kartu
   yang berdiri sendiri. Hanya pada layar lebar, tempat kartunya sebaris. */
@media (min-width: 1000px) {
  .abd-alur__item:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 46px;
    right: calc(clamp(14px, 1.8vw, 22px) * -1 - 1px);
    width: clamp(14px, 1.8vw, 22px);
    height: 2px;
    background: linear-gradient(to right, var(--emas), transparent);
  }
}

.abd-alur__tgl {
  display: grid;
  place-items: center;
  align-content: center;
  width: 58px;
  height: 58px;
  border-radius: var(--r-md);
  background: var(--grad-hijau);
  color: #fff;
}
.abd-alur__tgl b { font-family: var(--font-judul); font-size: 1.5rem; line-height: 1; }
.abd-alur__tgl span {
  font-size: .64rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  opacity: .9;
}
.abd-alur__isi h3 { font-size: 1.04rem; margin-bottom: .35em; }
.abd-alur__isi p { margin-bottom: 12px; font-size: .9rem; color: var(--teks-lembut); }

/* ---------- Kartu berita tanpa gambar ---------- */

.abd-card--berita .abd-card__media { position: relative; overflow: hidden; }
.abd-card__pola {
  position: absolute;
  inset: 0;
  background-color: var(--hijau-utama);
  background-image: url("../img/pola-sulapa.svg");
  background-size: 120px;
}
.abd-card__pola::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(140deg, rgba(6, 83, 42, .18), rgba(6, 83, 42, .72));
}

/* ---------- Ajakan registrasi ---------- */

.abd-ajakan {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #0E7A34 0%, #159A44 60%, #1AA34A 100%);
  color: #fff;
  isolation: isolate;
}
.abd-ajakan__pola {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pola-sulapa.svg");
  background-size: 150px;
  opacity: .12;
}
.abd-ajakan__inner {
  display: grid;
  grid-template-areas:
    "teks maskot"
    "aksi maskot";
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 3vw, 44px);
  row-gap: 22px;
  /* Maskot menjejak tepi bawah pita, teks dan tombol tidak. Alasnya
     dijadikan variabel supaya maskot bisa menembusnya dengan tepat. */
  --ajakan-alas: clamp(26px, 3vw, 40px);
  padding-block: clamp(36px, 4.4vw, 56px) var(--ajakan-alas);
}
.abd-ajakan__teks { grid-area: teks; align-self: end; }
.abd-ajakan__aksi { grid-area: aksi; justify-self: start; align-self: start; }
.abd-ajakan h2 { color: #fff; max-width: 22ch; }
.abd-ajakan p { margin-bottom: 0; color: rgba(255, 255, 255, .88); max-width: 54ch; }
.abd-ajakan__maskot {
  grid-area: maskot;
  align-self: end;
  height: clamp(190px, 22vw, 300px);
  width: auto;
  margin-bottom: calc(-1 * var(--ajakan-alas) - 4px);
}

/* Pada layar lebar, teks yang dibatasi 54ch menyisakan ratusan piksel
   kosong di tengah pita. Tombolnya dipindah ke sana: ruang itu jadi
   jarak antar bagian, bukan lubang, dan ajakannya sejajar dengan maskot
   yang tangannya memang terbuka ke arah situ. */
@media (min-width: 1080px) {
  .abd-ajakan__inner {
    grid-template-areas: "teks aksi maskot";
    grid-template-columns: auto auto auto;
    grid-template-rows: auto;
    justify-content: space-between;
    align-items: center;
    column-gap: 32px;
  }
  .abd-ajakan__teks { align-self: center; }
  .abd-ajakan__aksi { align-self: center; justify-self: center; }
  .abd-ajakan__maskot { align-self: end; }
}

/* ---------- Muncul saat digulir ---------- */

@media (prefers-reduced-motion: no-preference) {
  html.js [data-reveal] {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  }
  html.js [data-reveal].is-tampil { opacity: 1; transform: none; }
}

/* Widget aksesibilitas menang atas preferensi sistem: pengguna yang
   menyalakan "kurangi animasi" harus melihat konten langsung. */
html[data-a11y-motion="1"] [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ---------- Layar sempit ---------- */

@media (max-width: 860px) {
  .abd-section__head--baris { flex-direction: column; align-items: flex-start; gap: 10px; }
  .abd-ajakan__inner {
    grid-template-areas: "teks" "aksi" "maskot";
    grid-template-columns: 1fr;
  }
  .abd-ajakan__maskot { justify-self: center; height: clamp(170px, 42vw, 230px); }
}

/* =====================================================================
   Halaman bagian dalam
   ===================================================================== */

.abd-kepala-hal {
  position: relative;
  overflow: hidden;
  padding: clamp(28px, 4vw, 56px) 0 clamp(26px, 3.4vw, 46px);
  background: linear-gradient(150deg, #0E7A34 0%, #0B6C2F 55%, #06532A 100%);
  color: #fff;
  isolation: isolate;
}
.abd-kepala-hal__pola {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: url("../img/pola-sulapa.svg");
  background-size: 150px;
  opacity: .11;
}
.abd-kepala-hal h1 { color: #fff; margin-bottom: .25em; max-width: 24ch; }
.abd-kepala-hal__eyebrow {
  margin: 0 0 10px;
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--emas-terang);
}
.abd-kepala-hal__lead {
  margin: 0;
  max-width: 62ch;
  color: rgba(255, 255, 255, .88);
  font-size: 1.02rem;
}

/* Remah roti */
.abd-remah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 14px;
  font-size: .82rem;
  color: rgba(255, 255, 255, .7);
}
.abd-remah a { color: rgba(255, 255, 255, .82); text-decoration: none; }
.abd-remah a:hover { color: #fff; text-decoration: underline; }
.abd-remah [aria-current] { color: #fff; font-weight: 700; }

/* ---------- Tata letak dua kolom ---------- */

.abd-dua-kolom {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: clamp(24px, 3vw, 44px);
  align-items: start;
}
.abd-sisi {
  position: sticky;
  top: calc(var(--header-h) + 18px);
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
}

@media (max-width: 900px) {
  .abd-dua-kolom { grid-template-columns: 1fr; }
  .abd-sisi { position: static; }
}

.abd-fakta { margin: 0 0 18px; display: grid; gap: 14px; }
.abd-fakta > div { display: grid; gap: 2px; }
.abd-fakta dt {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}
.abd-fakta dd { margin: 0; font-size: .95rem; font-weight: 600; }

.abd-lead { font-size: 1.08rem; color: var(--teks-lembut); }

/* ---------- Saringan pil ---------- */

.abd-saring { display: flex; flex-wrap: wrap; gap: 8px; }
.abd-saring__opsi {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 9px 18px;
  border: 1px solid var(--garis);
  border-radius: var(--r-pill);
  color: var(--teks);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 600;
}
.abd-saring__opsi:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }
.abd-saring__opsi.is-active {
  background: var(--grad-hijau);
  color: #fff;
  border-color: transparent;
  font-weight: 700;
}

/* ---------- Bilah pencarian publik ---------- */

.abd-cari-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}
.abd-cari-bar input,
.abd-cari-bar select {
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-sm);
  background: var(--bg);
  color: var(--teks);
  font: inherit;
  font-size: .92rem;
}
/* Lebar bawaan select mengikuti pilihan terpanjang — "Kepulauan Bangka
   Belitung" sendirian melebihi layar 320px, jadi harus boleh menyusut. */
.abd-cari-bar select { flex: 1 1 180px; min-width: 0; max-width: 100%; }

.abd-cari-bar input[type="search"],
.abd-cari-bar input[type="text"] { flex: 1 1 220px; min-width: 0; }

/* ---------- Agenda ---------- */

.abd-hari { margin-top: clamp(28px, 3.4vw, 46px); }
.abd-hari__kepala { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.abd-hari__kepala h2 { margin: 0; font-size: 1.3rem; }
.abd-hari__kepala p { margin: 2px 0 0; font-size: .88rem; color: var(--teks-lembut); }
.abd-hari__tgl {
  display: grid;
  place-items: center;
  align-content: center;
  width: 62px;
  height: 62px;
  flex: 0 0 auto;
  border-radius: var(--r-md);
  background: var(--grad-hijau);
  color: #fff;
}
.abd-hari__tgl b { font-family: var(--font-judul); font-size: 1.6rem; line-height: 1; }
.abd-hari__tgl span { font-size: .62rem; letter-spacing: .1em; text-transform: uppercase; opacity: .9; }

.abd-jadwal { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abd-jadwal__item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 16px;
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}
.abd-jadwal__jam { display: grid; gap: 2px; align-content: start; }
.abd-jadwal__jam b { font-family: var(--font-judul); font-size: 1.04rem; }
.abd-jadwal__jam span { font-size: .8rem; color: var(--teks-lembut); }
.abd-jadwal__isi h3 { font-size: 1.04rem; margin-bottom: 6px; }
.abd-jadwal__isi h3 a { color: inherit; text-decoration: none; }
.abd-jadwal__isi h3 a:hover { color: var(--hijau-utama); }
.abd-jadwal__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0 0 10px;
  font-size: .86rem;
  color: var(--teks-lembut);
}
.abd-jadwal__peran,
.abd-jadwal__siaran { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.abd-jadwal__siaran { margin-top: 8px; }

@media (max-width: 560px) {
  .abd-jadwal__item { grid-template-columns: 1fr; gap: 8px; }
  .abd-jadwal__jam { display: flex; gap: 8px; align-items: baseline; }
}

/* ---------- Kelompok penghargaan ---------- */

.abd-kelompok { margin-top: clamp(28px, 3.4vw, 46px); }
.abd-kelompok__kepala { margin-bottom: 16px; }
.abd-kelompok__kepala h2 { font-size: 1.24rem; margin-bottom: 2px; }
.abd-kelompok__kepala p { margin: 0; font-size: .86rem; color: var(--teks-lembut); }

.abd-kategori {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}
.abd-kategori__slot {
  display: grid;
  place-items: center;
  align-content: center;
  width: 62px;
  height: 62px;
  border-radius: var(--r-md);
  background: var(--hijau-lembut);
  color: var(--hijau-atas-lembut);
}
.abd-kategori__slot b { font-family: var(--font-judul); font-size: 1.5rem; line-height: 1; }
.abd-kategori__slot span { font-size: .58rem; letter-spacing: .06em; text-transform: uppercase; }
.abd-kategori h3 { font-size: 1rem; margin-bottom: 6px; }
.abd-kategori p { margin: 0 0 10px; font-size: .88rem; color: var(--teks-lembut); }

.abd-pemenang { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abd-pemenang li {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr);
  gap: 14px;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
}
.abd-pemenang b { color: var(--hijau-utama); font-size: .86rem; }
.abd-pemenang span strong { display: block; }
.abd-pemenang span small { color: var(--teks-lembut, #5b6b63); }

/* ---------- FAQ ---------- */

.abd-faq { display: grid; gap: 10px; max-width: 76ch; }
.abd-faq__item {
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.abd-faq__item summary {
  padding: 17px 20px;
  font-weight: 700;
  font-size: .98rem;
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-inline-end: 48px;
}
.abd-faq__item summary::-webkit-details-marker { display: none; }
.abd-faq__item summary::after {
  content: "";
  position: absolute;
  inset-inline-end: 20px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--teks-lembut);
  border-bottom: 2px solid var(--teks-lembut);
  transform: rotate(45deg);
  transition: transform var(--durasi) ease;
}
.abd-faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.abd-faq__isi { padding: 0 20px 18px; color: var(--teks-lembut); }
.abd-faq__isi p { margin: 0; }

/* ---------- Unduhan ---------- */

.abd-unduh { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abd-unduh__item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}
.abd-unduh__item h2 { font-size: 1.02rem; margin-bottom: 4px; }
.abd-unduh__item p { margin: 0; font-size: .88rem; color: var(--teks-lembut); }
.abd-unduh__item p.abd-unduh__jenis { margin-top: 6px; font-size: .78rem; font-weight: 600; letter-spacing: .02em; text-transform: uppercase; }

/* ---------- Denah stan ---------- */

.abd-stan {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.abd-stan__item {
  display: grid;
  gap: 3px;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--teks);
}
.abd-stan__item:hover { border-color: var(--hijau-utama); color: var(--teks); }
.abd-stan__item b { font-family: var(--font-judul); color: var(--hijau-utama); }
.abd-stan__judul { font-size: .88rem; font-weight: 600; }
.abd-stan__pt { font-size: .78rem; color: var(--teks-lembut); }

/* ---------- Sebaran provinsi ---------- */

.abd-sebaran { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.abd-sebaran a {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr) 44px;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--teks);
}
.abd-sebaran a:hover { background: var(--hijau-lembut); color: var(--teks); }
.abd-sebaran__nama { font-weight: 600; font-size: .92rem; }
.abd-sebaran__bar { display: block; height: 10px; border-radius: var(--r-pill); background: var(--garis); }
.abd-sebaran__bar i { display: block; height: 100%; border-radius: var(--r-pill); background: var(--grad-hijau); }
.abd-sebaran b { text-align: right; font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .abd-sebaran a { grid-template-columns: minmax(0, 1fr) 44px; }
  .abd-sebaran__bar { display: none; }
}

/* ---------- Anggota tim ---------- */

.abd-anggota { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abd-anggota li {
  display: grid;
  gap: 2px;
  padding: 13px 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
}
.abd-anggota span { font-size: .84rem; color: var(--teks-lembut); }

/* ---------- Galeri ---------- */

.abd-galeri {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

/* Foto lebih enak dipindai berdampingan daripada menumpuk satu-satu;
   di ponsel galeri dibuat dua kolom, bukan slider. */
@media (max-width: 560px) {
  .abd-galeri { grid-template-columns: 1fr 1fr; gap: 8px; }
}
.abd-galeri__item { margin: 0; }
.abd-galeri__item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-md);
}
.abd-galeri__item figcaption { margin-top: 6px; font-size: .8rem; color: var(--teks-lembut); }

/* ---------- Keadaan kosong & halaman ---------- */

.abd-kosong-publik {
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
  background: var(--surface);
  border: 1px dashed var(--garis);
  border-radius: var(--r-lg);
}
.abd-kosong-publik p { margin: 0 0 6px; color: var(--teks-lembut); }
.abd-kosong-publik strong { color: var(--teks); font-size: 1.05rem; }

.abd-halaman {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: clamp(24px, 3vw, 40px);
  font-size: .9rem;
  color: var(--teks-lembut);
}
.abd-halaman a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 700;
}
.abd-halaman a:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }


/* ---------- Peta sebaran Indonesia ---------- */

/* Lima langkah, bukan gradasi bebas: mata membaca wilayah "pekat" dan
   "pucat" jauh lebih cepat daripada membandingkan dua hijau berdekatan. */
:root {
  --peta-0: #E3EBE7;
  --peta-1: #CDE9D5;
  --peta-2: #8FD3A5;
  --peta-3: #46B36A;
  --peta-4: #0E7A34;
  --peta-garis: var(--surface);
  /* Teks petak legenda terpekat dan terpucat; urutan terang-gelapnya
     terbalik antar tema, jadi keduanya perlu tokennya sendiri. */
  --peta-teks-pekat: #FFFFFF;
  --peta-teks-pucat: var(--n-900);
}

/* Pada tema gelap urutannya dibalik: latar sudah gelap, jadi wilayah
   terpadat justru yang paling terang. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --peta-0: #1B2E26;
    --peta-1: #2A6440;
    --peta-2: #3C9257;
    --peta-3: #55BE74;
    --peta-4: #7FEA9D;
    --peta-garis: #0B1712;
    --peta-teks-pekat: #0B1712;
    --peta-teks-pucat: #E9F2ED;
  }
}

:root[data-theme="dark"] {
  --peta-0: #1B2E26;
  --peta-1: #2A6440;
  --peta-2: #3C9257;
  --peta-3: #55BE74;
  --peta-4: #7FEA9D;
  --peta-garis: #0B1712;
  --peta-teks-pekat: #0B1712;
  --peta-teks-pucat: #E9F2ED;
}

.abd-peta { display: grid; gap: 14px; }
.abd-peta__gambar { margin: 0; display: grid; gap: 12px; min-width: 0; }

.abd-peta__kanvas {
  /* Tanpa ini item grid memakai min-width: auto, sehingga peta selebar
     660px ikut melebarkan seluruh halaman alih-alih digulir sendiri. */
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  border-radius: var(--r-lg);
  background: var(--surface);
  border: 1px solid var(--garis);
  padding: clamp(10px, 2vw, 22px);
}

.abd-peta__kanvas svg {
  display: block;
  width: 100%;
  min-width: 660px;
  height: auto;
}

.abd-peta__area path {
  fill: var(--peta-0);
  stroke: var(--peta-garis);
  stroke-width: 2.5;
  stroke-linejoin: round;
  transition: fill var(--durasi) ease;
}

.abd-peta__area.is-1 path { fill: var(--peta-1); }
.abd-peta__area.is-2 path { fill: var(--peta-2); }
.abd-peta__area.is-3 path { fill: var(--peta-3); }
.abd-peta__area.is-4 path { fill: var(--peta-4); }

a.abd-peta__area { cursor: pointer; }
a.abd-peta__area:hover path,
a.abd-peta__area:focus-visible path,
a.abd-peta__area.is-sorot path { fill: var(--emas); }

a.abd-peta__area.is-aktif path { stroke: var(--emas); stroke-width: 6; }

a.abd-peta__area:focus { outline: none; }
a.abd-peta__area:focus-visible path { stroke: var(--teks); stroke-width: 6; }

.abd-peta__gelembung circle {
  fill: var(--surface);
  stroke: var(--hijau-atas-lembut);
  stroke-width: 2.5;
  opacity: .96;
}

.abd-peta__gelembung text {
  fill: var(--hijau-atas-lembut);
  font-family: var(--font-judul);
  font-weight: 700;
  text-anchor: middle;
}

.abd-peta__gelembung.is-sorot circle { fill: var(--emas); stroke: var(--n-900); }
.abd-peta__gelembung.is-sorot text { fill: var(--n-900); }

.abd-peta__bawah {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
}

.abd-peta__geser { display: none; margin: 0; font-size: .8rem; color: var(--teks-lembut); }

.abd-peta__legenda { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.abd-peta__legenda-label { font-size: .8rem; color: var(--teks-lembut); }

.abd-peta__skala { display: flex; border-radius: var(--r-sm); overflow: hidden; }
.abd-peta__skala span {
  padding: 4px 11px;
  font-size: .76rem;
  font-variant-numeric: tabular-nums;
  color: var(--n-900);
}
.abd-peta__skala .is-1 { background: var(--peta-1); color: var(--peta-teks-pucat); }
.abd-peta__skala .is-2 { background: var(--peta-2); }
.abd-peta__skala .is-3 { background: var(--peta-3); }

.abd-peta__skala .is-4 { background: var(--peta-4); color: var(--peta-teks-pekat); }
.abd-peta__terpilih {
  margin: 0;
  min-height: 46px;
  display: flex;
  align-items: center;
  gap: 10px 16px;
  flex-wrap: wrap;
  padding: 11px 16px;
  border-radius: var(--r-md);
  background: var(--hijau-lembut);
  font-size: .88rem;
}
.abd-peta__terpilih b { font-family: var(--font-judul); }
.abd-peta__terpilih-kosong { color: var(--teks-lembut); }

@media (max-width: 760px) {
  .abd-peta__geser { display: block; }
  .abd-peta__bawah { justify-content: flex-start; }
}

@media (prefers-reduced-motion: reduce) {
  .abd-peta__area path { transition: none; }
}

.abd-mb-lg { margin-bottom: clamp(24px, 3vw, 44px); }

.abd-angka__num small { font-size: .52em; font-weight: 700; opacity: .7; }

.abd-peta__catatan {
  margin: 12px 0 0;
  font-size: .82rem;
  color: var(--teks-lembut);
}

.abd-saring-aktif {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin: 14px 0 0;
  padding: 10px 10px 10px 16px;
  border-radius: var(--r-md);
  background: var(--hijau-lembut);
  font-size: .88rem;
}
.abd-saring-aktif b { font-family: var(--font-judul); }

/* ---------- Peta pada seksi angka beranda ---------- */

.abd-angka-peta { margin-top: clamp(20px, 2.6vw, 36px); }
.abd-angka-peta__kepala {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 18px;
  margin-bottom: 14px;
}
.abd-angka-peta__kepala h2 { margin: 0; font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); }


/* =====================================================================
   Kolom pendamping halaman statis
   ===================================================================== */

/* Kerangka dua kolomnya memakai .abd-dua-kolom yang sudah dipakai detail
   agenda, tim, dan kontak. Yang berbeda hanya isinya: di sini kolom kanan
   berupa tumpukan beberapa alat bantu, bukan satu kartu fakta. */

/* Lebarnya sengaja dibatasi lebih sempit daripada --wrap. Dengan lebar
   penuh, baris naskahnya melar sampai sekitar sembilan puluh karakter —
   terlalu panjang untuk dibaca nyaman, dan itu justru kebalikan dari
   tujuan kolom ini. */
.abd-dua-kolom--naskah { max-width: 1040px; }

/* Batas 72ch dilepas hanya ketika kolom pendamping benar-benar tampil;
   pada satu kolom, tanpa batas itu barisnya melar sampai seratus karakter. */
@media (min-width: 901px) {
  .abd-dua-kolom--naskah .abd-prose { max-width: none; }
}

.abd-pendamping { display: grid; gap: 14px; align-content: start; }

@media (min-width: 901px) {
  .abd-pendamping {
    position: sticky;
    top: calc(var(--header-h) + 16px);
    max-height: calc(100vh - var(--header-h) - 32px);
    max-height: calc(100svh - var(--header-h) - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}

.abd-pendamping__kotak {
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-radius: var(--r-lg);
}

.abd-pendamping__judul {
  margin: 0 0 12px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--teks-lembut);
}

/* ---------- Kotak acara ---------- */

.abd-pendamping__kotak--acara {
  border-color: transparent;
  background: var(--grad-hijau);
  color: #fff;
}
.abd-pendamping__kotak--acara .abd-pendamping__judul { color: rgba(255, 255, 255, .8); }

.abd-pendamping__mundur { display: flex; gap: 10px; }
.abd-pendamping__mundur > div {
  flex: 1 1 0;
  padding: 10px 4px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, .16);
  text-align: center;
}
.abd-pendamping__mundur b {
  display: block;
  font-family: var(--font-judul);
  font-size: 1.5rem;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.abd-pendamping__mundur span { font-size: .72rem; opacity: .85; }

.abd-pendamping__live { margin: 0; display: flex; align-items: center; gap: 9px; font-weight: 600; }
.abd-pendamping__live span[aria-hidden] {
  width: 9px;
  height: 9px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--emas-terang);
  box-shadow: 0 0 0 4px rgba(255, 211, 77, .28);
}

.abd-pendamping__fakta { margin: 16px 0 0; display: grid; gap: 10px; }
.abd-pendamping__fakta > div { display: grid; gap: 1px; }
.abd-pendamping__fakta dt {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  opacity: .78;
}
.abd-pendamping__fakta dd { margin: 0; font-size: .88rem; font-weight: 600; }

.abd-pendamping__aksi { margin-top: 16px; width: 100%; justify-content: center; }
/* .abd-btn--primary menetapkan background langsung, bukan lewat --btn-bg,
   jadi penimpaannya pun harus langsung — kalau tidak, tombolnya jadi
   hijau di atas hijau. */
.abd-pendamping__kotak--acara .abd-pendamping__aksi {
  background: #fff;
  color: var(--hijau-tua);
  --btn-fg: var(--hijau-tua);
}

/* ---------- Daftar isi ---------- */

.abd-pendamping__kotak--isi ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: bagian;
  display: grid;
  gap: 2px;
}
.abd-pendamping__kotak--isi li { counter-increment: bagian; }
.abd-pendamping__kotak--isi a {
  position: relative;
  display: block;
  padding: 7px 10px 7px 30px;
  border-radius: var(--r-sm);
  font-size: .87rem;
  line-height: 1.35;
  color: var(--teks-lembut);
  text-decoration: none;
}
.abd-pendamping__kotak--isi a::before {
  content: counter(bagian);
  position: absolute;
  left: 10px;
  font-variant-numeric: tabular-nums;
  font-size: .76rem;
  opacity: .6;
}
.abd-pendamping__kotak--isi a:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }

/* Bagian yang sedang dibaca; kelasnya dipasang skrip gulir. */
.abd-pendamping__kotak--isi a.is-kini {
  background: var(--hijau-lembut);
  color: var(--hijau-atas-lembut);
  font-weight: 600;
}
.abd-pendamping__kotak--isi a.is-kini::before { opacity: 1; }

/* ---------- Halaman sekerabat ---------- */

.abd-pendamping__kerabat { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; }
.abd-pendamping__kerabat a {
  display: block;
  padding: 8px 12px;
  border-radius: var(--r-sm);
  font-size: .88rem;
  line-height: 1.35;
  color: var(--teks);
  text-decoration: none;
}
.abd-pendamping__kerabat a:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }
.abd-pendamping__kerabat a[aria-current="page"] {
  background: var(--hijau-lembut);
  color: var(--hijau-atas-lembut);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--aksen);
}

/* ---------- Sekilas angka ---------- */

.abd-pendamping__angka {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.abd-pendamping__angka a {
  display: block;
  padding: 12px 10px;
  border-radius: var(--r-md);
  background: var(--hijau-lembut);
  color: var(--teks);
  text-decoration: none;
  text-align: center;
}
.abd-pendamping__angka a:hover { background: var(--n-100); }
.abd-pendamping__angka b {
  display: block;
  font-family: var(--font-judul);
  font-size: 1.45rem;
  line-height: 1.1;
  color: var(--hijau-atas-lembut);
  font-variant-numeric: tabular-nums;
}
.abd-pendamping__angka span { font-size: .74rem; color: var(--teks-lembut); }

/* Di layar sempit daftar isi tidak menolong: pembaca sudah melewati
   bagian-bagiannya untuk sampai ke sini. Blok lain tetap berguna sebagai
   penutup halaman. */
@media (max-width: 900px) {
  .abd-pendamping__kotak--isi { display: none; }
}

/* =====================================================================
   Sasaran sentuh pada peranti layar sentuh
   ===================================================================== */

/* Beberapa kendali sengaja dibuat padat agar antarmuka tidak longgar
   saat dipakai dengan tetikus. Di peranti sentuh kepadatan itu berbalik
   merugikan: jari bukan kursor, dan meleset satu kali menuntut pengguna
   membidik ulang. Maka ukurannya dinaikkan ke 44 piksel hanya ketika
   penunjuknya memang kasar — ponsel dan tablet — sehingga tampilan pada
   laptop tidak ikut melar.

   Tautan yang menyatu di dalam kalimat sengaja tidak diikutkan;
   memperbesarnya akan merusak alur baris, dan WCAG memang mengecualikan
   tautan semacam itu. */
@media (pointer: coarse) {

  /* Safari iOS memperbesar seluruh halaman ketika kolom isian yang
     difokuskan berukuran di bawah 16 piksel — dan tidak mengembalikannya
     setelah isian ditutup, sehingga pengunjung terjebak dalam keadaan
     terzoom. Di peranti sentuh semua kolom karena itu disamakan. */
  input,
  select,
  textarea,
  .abd-cari-bar input,
  .abd-cari-bar select,
  .abd-field input,
  .abd-field select,
  .abd-field textarea { font-size: 16px; }
  .abd-btn--sm { min-height: 44px; }

  .abd-announce__close {
    width: 44px;
    height: 44px;
  }

  .abd-lang__opt {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }

  .abd-input__aksi,
  .abd-captcha__reload {
    min-width: 44px;
    min-height: 44px;
  }

  .abd-saring__opsi,
  .abd-auth__kembali,
  .abd-field__tautan {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  /* Kotak centang tetap kecil secara visual, tetapi labelnya yang
     dijadikan sasaran — itu bidang yang sesungguhnya ditekan orang. */
  .abd-check {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
  }
}


/* ---------- Modifier geser: deret jadi slider di ponsel ----------

   Ditempelkan pada wadah deret kartu (grid atau daftar) yang, di layar
   sempit, lebih baik digeser mendatar daripada menumpuk panjang ke bawah.
   Hanya untuk deret SOROTAN yang jumlahnya terbatas — bukan direktori
   atau hasil pencarian, yang justru perlu dipindai dan disaring utuh.

   Lebar tiap kartu diatur lewat --geser-lebar (bawaan 78%: satu kartu
   penuh dengan kartu berikutnya mengintip sebagai isyarat bisa digeser).
   Karena menggulir di dalam wadahnya sendiri, halaman tidak ikut melebar. */
@media (max-width: 720px) {
  .abd-geser {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .abd-geser::-webkit-scrollbar { display: none; }

  .abd-geser > * {
    flex: 0 0 var(--geser-lebar, 78%);
    min-width: 0;
    scroll-snap-align: start;
  }
  .abd-geser > *:last-child { margin-right: 2px; }

  /* Untuk kartu ringkas (mis. ringkasan penghargaan) tampilkan dua
     sekaligus agar tidak terasa terlalu besar. */
  .abd-geser--rapat { --geser-lebar: 46%; }
}

/* =====================================================================
   Expo virtual — kartu poster
   ===================================================================== */

.abd-expo-ringkas { margin: 0; color: var(--teks-lembut); font-size: .92rem; }

.abd-kartu-tim__media {
  display: block;
  aspect-ratio: 3 / 4;
  background: var(--hijau-tua);
  overflow: hidden;
}
.abd-kartu-tim__media img,
.abd-kartu-tim__media picture {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.abd-kartu-tim:hover .abd-kartu-tim__media img { transform: scale(1.03); }

/* Tempat-isi selama poster belum diunggah: motif sulapa, nomor urut tim. */
.abd-kartu-tim__kosong {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 100%;
  background:
    linear-gradient(160deg, rgba(6, 83, 42, .82) 0%, rgba(5, 47, 26, .94) 100%),
    url("../img/pola-sulapa.svg") center / 120px;
  color: rgba(255, 255, 255, .78);
  text-align: center;
}
.abd-kartu-tim__kosong b {
  font-family: var(--font-judul);
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: .02em;
  background: var(--grad-emas);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abd-kartu-tim__kosong span { font-size: .78rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }

.abd-kartu-tim .abd-card__body { padding: 16px 18px 18px; gap: 6px; }
.abd-kartu-tim__pt {
  margin: 0;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--aksen, var(--hijau-utama));
}

/* Judul resmi sering ditulis kapital penuh dan panjang; dibatasi tiga baris
   supaya kisi tetap rata. Judul lengkap ada di halaman tim. */
.abd-kartu-tim__judul {
  margin: 0;
  font-size: .95rem;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.abd-kartu-tim__ormawa {
  margin: 0;
  font-size: .84rem;
  color: var(--teks-lembut);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.abd-kartu-tim__kaki {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.abd-kartu-tim__status { font-size: .76rem; color: var(--teks-lembut); opacity: .8; }

@media (max-width: 719px) {
  /* Dua kolom di ponsel: poster tetap terlihat tanpa menggulir terlalu jauh. */
  .abd-kartu-tim { font-size: .95em; }
  .abd-grid--4:has(.abd-kartu-tim--poster) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .abd-kartu-tim .abd-card__body { padding: 12px; }
  .abd-kartu-tim__kosong b { font-size: 1.9rem; }
  .abd-kartu-tim__judul { font-size: .86rem; }
  .abd-kartu-tim__kaki .abd-btn { width: 100%; justify-content: center; }
}
.abd-kartu-tim__media,
.abd-kartu-tim__media:hover { text-decoration: none; }
/* Nama topik panjang ("Desa/Kelurahan Wirausaha") tetap satu baris. */
.abd-kartu-tim__kaki .abd-chip {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

/* ---------- Kartu tim: bagian bersama & varian ringkas (direktori) ---------- */

.abd-kartu-tim { position: relative; }
.abd-kartu-tim--ringkas::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--grad-emas);
}
.abd-kartu-tim__atas {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
}
.abd-kartu-tim__no {
  flex: 0 0 auto;
  padding: 2px 8px;
  border: 1px solid var(--garis);
  border-radius: var(--r-pill);
  font-family: var(--font-judul);
  font-size: .74rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--teks-lembut);
}
.abd-kartu-tim--ringkas .abd-kartu-tim__judul { font-size: 1rem; }
.abd-kartu-tim__lokasi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  margin: 2px 0 0;
  font-size: .8rem;
  color: var(--teks-lembut);
}
.abd-kartu-tim__lokasi span { display: inline-flex; align-items: center; gap: 5px; }
.abd-kartu-tim__lokasi svg { flex: 0 0 auto; opacity: .8; }
.abd-kartu-tim__stan { font-weight: 700; color: var(--aksen, var(--hijau-utama)); }
.abd-kartu-tim__kaki:empty { display: none; }

/* Pengumuman di ponsel: paling banyak dua baris, dan seluruh pita menjadi
   area ketuk menuju keterangan lengkap (pola "stretched link"). Tombol
   tutup tetap di atas area itu agar tetap dapat diketuk. */
@media (max-width: 719px) {
  .abd-announce { font-size: .84rem; }
  .abd-announce__inner { position: relative; padding-block: 8px; gap: 10px; }
  .abd-announce__text {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .abd-announce__link { font-size: .8rem; }
  .abd-announce__link::after { content: ""; position: absolute; inset: 0; }
  .abd-announce__close { position: relative; z-index: 1; }
}

/* =====================================================================
   Halaman detail tim
   ===================================================================== */

/* Judul resmi sering lebih dari 150 karakter; ukurannya diturunkan agar
   tidak memakan seluruh layar pertama. */
.abd-kepala-hal--panjang h1 {
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1.22;
  max-width: 46ch;
}

.abd-tim { min-width: 0; }
.abd-tim__atas {
  display: grid;
  grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.abd-tim__poster { margin: 0; }
.abd-tim__poster img,
.abd-tim__poster picture { display: block; width: 100%; height: auto; border-radius: var(--r-md, 14px); border: 1px solid var(--garis); }
.abd-tim__poster-kosong { aspect-ratio: 3 / 4; border-radius: var(--r-md, 14px); overflow: hidden; }
.abd-tim__poster figcaption { margin-top: 8px; font-size: .8rem; color: var(--teks-lembut); }

.abd-tim__ringkas h2 { margin: 6px 0 10px; font-size: 1.25rem; }
.abd-tim__ringkas h3 { margin: 22px 0 6px; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); }
.abd-tim__abstrak { font-size: 1.02rem; line-height: 1.7; margin: 0; }
.abd-tim__catatan { margin: 8px 0 0; font-size: .82rem; color: var(--teks-lembut); font-style: italic; }
.abd-tim__judul-lengkap { margin: 0; font-size: .92rem; line-height: 1.55; color: var(--teks-lembut); }

.abd-tim__video { margin-top: clamp(28px, 4vw, 44px); padding-top: clamp(20px, 3vw, 28px); border-top: 1px solid var(--garis); }
.abd-tim__video h2 { font-size: 1.25rem; margin: 0 0 14px; }
.abd-tim__sematan { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r-md, 14px); overflow: hidden; background: #000; }
.abd-tim__sematan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.abd-tim__kosong {
  margin: 0;
  padding: 18px 20px;
  border: 1px dashed var(--garis);
  border-radius: var(--r-md, 14px);
  color: var(--teks-lembut);
  font-size: .92rem;
}

@media (max-width: 719px) {
  .abd-tim__atas { grid-template-columns: 1fr; }
  .abd-tim__poster { max-width: 280px; margin-inline: auto; width: 100%; }
}

/* Lencana jumlah penghargaan: label "PENGHARGAAN" sebelumnya lebih lebar
   dari kotak 62px dan meluber ke judul kategori. */
.abd-kategori__slot { width: 84px; height: 66px; padding: 6px 4px; gap: 3px; }
.abd-kategori__slot span { font-size: .56rem; letter-spacing: .03em; white-space: nowrap; }

/* Lencana emas di tema gelap: #7A5A05 di atas latar gelap nyaris tak terbaca. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .abd-chip--emas { background: rgba(242, 176, 30, .16); color: #FFD34D; }
}
:root[data-theme="dark"] .abd-chip--emas { background: rgba(242, 176, 30, .16); color: #FFD34D; }

/* Berita sorotan: kartu pertama di halaman 1 memenuhi dua kolom. */
@media (min-width: 900px) {
  .abd-card--sorot {
    grid-column: span 2;
    flex-direction: row;
  }
  .abd-card--sorot .abd-card__media { flex: 0 0 46%; aspect-ratio: auto; min-height: 260px; }
  .abd-card--sorot .abd-card__body { padding: 28px; justify-content: center; }
  .abd-card--sorot .abd-card__title { font-size: 1.45rem; line-height: 1.25; }
  .abd-card--sorot .abd-card__excerpt { font-size: 1rem; }
}
.abd-card__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 1;
  padding: 5px 12px;
  border-radius: var(--r-pill);
  background: var(--grad-emas);
  color: #3A2A00;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Kisi yang jumlah isinya sedikit: kolom tidak melebar mengisi baris. */
.abd-grid--tetap { grid-template-columns: repeat(auto-fill, minmax(270px, 1fr)); }

/* Wadah sempit untuk halaman satu-formulir (verifikasi sertifikat, dsb.). */
.abd-wrap--sempit { max-width: 640px; }

/* ---------- Voting stan ---------- */
.abd-pilih {
  padding: 18px;
  background: var(--surface);
  border: 1px solid var(--garis);
  border-top: 4px solid var(--hijau-utama);
  border-radius: var(--r-md);
  scroll-margin-top: 96px;
}
.abd-pilih__judul { font-size: 1.05rem; margin: 0 0 8px; }
.abd-pilih__ket { font-size: .92rem; margin: 0 0 12px; }
.abd-pilih .abd-alert { margin-bottom: 12px; }

/* ---------- Pencarian FAQ ---------- */
.abd-cari-faq { max-width: 76ch; margin-bottom: 18px; }
.abd-cari-faq label { display: block; font-weight: 600; margin-bottom: 6px; }
.abd-cari-faq input {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  font: inherit;
}
.abd-cari-faq__status { min-height: 1.4em; margin: 6px 0 0; font-size: .86rem; color: var(--teks-lembut); }
.abd-faq__item[hidden] { display: none; }

/* ---------- Galeri: saring hari & lightbox ---------- */
.abd-saring-hari { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 20px; }
.abd-saring-hari a {
  display: inline-flex; flex-direction: column; gap: 2px;
  padding: 8px 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  background: var(--surface);
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.2;
}
.abd-saring-hari a small { font-weight: 400; font-size: .76rem; color: var(--teks-lembut); }
.abd-saring-hari a[aria-current="page"] { border-color: var(--hijau-utama); box-shadow: inset 0 0 0 1px var(--hijau-utama); }
.abd-galeri__tautan { display: block; cursor: zoom-in; }
.abd-galeri__tautan:focus-visible { outline: 3px solid var(--hijau-utama); outline-offset: 3px; }

.abd-lightbox {
  width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh;
  margin: 0; padding: 56px 16px 24px;
  border: 0;
  background: rgba(10, 16, 13, .94);
  color: #fff;
}
.abd-lightbox::backdrop { background: rgba(10, 16, 13, .6); }
.abd-lightbox__isi { height: 100%; margin: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; }
.abd-lightbox__isi img { max-width: 100%; max-height: calc(100% - 3em); object-fit: contain; border-radius: 6px; }
.abd-lightbox__isi figcaption { max-width: 70ch; text-align: center; font-size: .92rem; color: #e6efe9; }
.abd-lightbox__tombol {
  position: absolute;
  width: 48px; height: 48px;
  border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-size: 1.8rem; line-height: 1;
  cursor: pointer;
}
.abd-lightbox__tombol:hover, .abd-lightbox__tombol:focus-visible { background: rgba(255, 255, 255, .28); }
.abd-lightbox__tombol:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.abd-lightbox__tutup { top: 10px; right: 12px; }
.abd-lightbox__sebelum { left: 12px; top: 50%; transform: translateY(-50%); }
.abd-lightbox__sesudah { right: 12px; top: 50%; transform: translateY(-50%); }
/* ---------- Penghargaan + Instagram (beranda) ---------- */
.abd-piala--dua { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 40px; align-items: start; }
.abd-piala__utama { min-width: 0; }
@media (min-width: 961px) {
  .abd-piala--dua .abd-piala__kisi { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

  /* Kedua kolom sama tinggi: panel Instagram menentukan tingginya, kartu
     kategori di kiri ikut memanjang mengisi sisa ruang. */
  .abd-piala--dua { align-items: stretch; }
  .abd-piala--dua .abd-piala__utama { display: flex; flex-direction: column; }
  .abd-piala--dua .abd-piala__kisi { flex: 1; grid-auto-rows: 1fr; align-content: stretch; }
  .abd-piala--dua .abd-piala__item { display: flex; flex-direction: column; justify-content: flex-end; }
  .abd-piala--dua .abd-ig { display: flex; flex-direction: column; }
  .abd-piala--dua .abd-ig__layar { flex: 1; }
  .abd-piala--dua .abd-ig__bingkai { height: 100%; min-height: 520px; }
}
.abd-ig {
  display: grid; gap: 14px;
  padding: 18px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-lg, 18px);
  background: rgba(255, 255, 255, .06);
  color: #fff;
}
.abd-ig__kepala { display: flex; align-items: center; gap: 12px; }
.abd-ig__kepala h3 { margin: 0; font-size: 1rem; color: #fff; }
.abd-ig__kepala a { color: #f6d36b; font-weight: 600; text-decoration: none; }
.abd-ig__kepala a:hover, .abd-ig__kepala a:focus-visible { text-decoration: underline; }
.abd-ig__logo {
  display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
  color: #fff;
}
.abd-ig__layar {
  position: relative;
  min-height: 520px;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(0, 0, 0, .18);
}
.abd-ig__tirai {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 24px; text-align: center;
  font-size: .9rem; line-height: 1.55; color: #e6efe9;
}
.abd-ig__tirai p { margin: 0; max-width: 32ch; }
.abd-ig__bingkai { display: block; width: 100%; height: 560px; border: 0; background: #fff; }
.abd-ig__navigasi { display: flex; align-items: center; justify-content: center; gap: 14px; font-weight: 600; }
.abd-ig__panah {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3); background: transparent; color: #fff;
  font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.abd-ig__panah:hover, .abd-ig__panah:focus-visible { background: rgba(255, 255, 255, .14); }
@media (max-width: 960px) {
  .abd-piala--dua { grid-template-columns: minmax(0, 1fr); }
  .abd-ig { max-width: 480px; width: 100%; }
}.abd-ig__navigasi[hidden] { display: flex; visibility: hidden; }
.abd-ig__putar {
  width: 32px; height: 32px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .25); border-top-color: var(--emas-terang, #f6d36b);
  animation: abd-putar 0.9s linear infinite;
}
@keyframes abd-putar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .abd-ig__putar { animation: none; } }
.abd-ig__bingkai + .abd-ig__tirai, .abd-ig__layar:has(.abd-ig__bingkai) .abd-ig__tirai { display: none; }
/* ---------- Foto utama berita ---------- */
.abd-berita__foto { margin: 0 0 24px; }
.abd-berita__foto img { width: 100%; height: auto; border-radius: var(--r-md); }
.abd-berita__foto figcaption { margin-top: 8px; font-size: .84rem; color: var(--teks-lembut); line-height: 1.5; }
.abd-berita__kredit { display: block; font-style: italic; }
.abd-sumber { margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--garis); font-size: .88rem; color: var(--teks-lembut); }
/* ---------- Detail berita: tata dua kolom & sidebar ---------- */
:root {
  --grafik-0: #128C3C; --grafik-1: #F2B01E; --grafik-2: #2F6FD0; --grafik-3: #C6172B;
  --grafik-4: #0E9F9A; --grafik-5: #8A5CD1; --grafik-6: #E46A1F; --grafik-7: #6B8E23;
}
.abd-berita-tata { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 48px; align-items: start; }
.abd-berita-tata__utama { min-width: 0; }
.abd-sisi-berita { display: grid; gap: 18px; }

.abd-widget {
  padding: 20px;
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  background: var(--surface);
}
.abd-widget__judul { margin: 0 0 14px; font-size: 1rem; line-height: 1.3; }
.abd-widget__catatan { margin: 12px 0 0; font-size: .74rem; color: var(--teks-lembut); }
.abd-widget__tautan { display: inline-block; margin-top: 12px; font-size: .86rem; font-weight: 600; }

.abd-widget--sorot {
  color: #fff;
  border: 0;
  background:
    radial-gradient(circle at 100% 0, rgba(255, 211, 77, .28), transparent 55%),
    linear-gradient(150deg, #0d6b2e, #0a4a22);
}
.abd-widget__eyebrow { margin: 0; font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--emas-terang); }
.abd-widget__hitung { margin: 6px 0 2px; font-size: .95rem; }
.abd-widget__hitung b { font-family: var(--font-judul); font-size: 2.6rem; line-height: 1; color: #fff; margin-right: 4px; }
.abd-widget__tempat { margin: 0 0 14px; font-size: .84rem; color: rgba(255, 255, 255, .8); }
.abd-widget__angka { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 0 0 16px; }
.abd-widget__angka div { display: flex; flex-direction: column-reverse; padding: 10px 12px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.abd-widget__angka dd { margin: 0; font-family: var(--font-judul); font-size: 1.5rem; line-height: 1.1; color: var(--emas-terang); }
.abd-widget__angka dt { font-size: .74rem; color: rgba(255, 255, 255, .78); }

/* Corong seleksi */
.abd-corong { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abd-corong__tahap { display: grid; gap: 4px; justify-items: center; }
.abd-corong__batang {
  width: var(--lebar); min-width: 96px;
  padding: 8px 10px;
  border-radius: 8px;
  text-align: center;
  font-size: .82rem;
  color: #fff;
  background: linear-gradient(90deg, var(--hijau-utama), #1fae55);
}
.abd-corong__tahap:last-child .abd-corong__batang { background: linear-gradient(90deg, #e3a20f, var(--emas-terang)); color: #1d1a0e; }
.abd-corong__batang b { font-size: 1.05rem; }
.abd-corong__nama { font-size: .74rem; color: var(--teks-lembut); text-align: center; }

/* Grafik batang horizontal */
.abd-batang { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.abd-batang li { display: grid; gap: 3px; }
.abd-batang__label { font-size: .8rem; line-height: 1.3; }
.abd-batang__isi { display: flex; align-items: center; gap: 8px; }
.abd-batang__bar { flex: 0 0 auto; width: calc(var(--lebar) * .82); min-width: 6px; height: 9px; border-radius: 99px; background: var(--warna, var(--hijau-utama)); }
.abd-batang__isi b { font-size: .8rem; font-variant-numeric: tabular-nums; }
.abd-batang--provinsi .abd-batang__bar { background: linear-gradient(90deg, var(--hijau-utama), #4cc16f); }

/* Batang bertumpuk penghargaan */
.abd-tumpuk { display: flex; height: 16px; border-radius: 99px; overflow: hidden; gap: 2px; }
.abd-tumpuk span { flex: 0 0 var(--lebar); background: var(--warna); }
.abd-legenda { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; font-size: .76rem; }
.abd-legenda li { display: flex; align-items: center; gap: 6px; }
.abd-legenda li::before { content: ""; flex: 0 0 10px; height: 10px; border-radius: 3px; background: var(--warna); }
.abd-legenda b { margin-left: auto; font-variant-numeric: tabular-nums; }

/* Maskot */
.abd-widget--maskot { display: grid; grid-template-columns: 76px 1fr; gap: 14px; align-items: center; }
.abd-widget--maskot p { margin: 0; font-size: .85rem; }
.abd-widget__maskot img { width: 76px; height: auto; display: block; }

@media (max-width: 1024px) {
  .abd-berita-tata { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .abd-sisi-berita { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
}
/* ---------- Formulir pendaftaran peserta ---------- */
.abd-form-daftar fieldset { margin: 0 0 22px; padding: 18px 18px 4px; border: 1px solid var(--garis); border-radius: var(--r-md); }
.abd-form-daftar legend { padding: 0 8px; font-weight: 700; }
.abd-form-daftar select, .abd-form-daftar input[type="text"], .abd-form-daftar input[type="tel"] { width: 100%; }
.abd-form-daftar select:disabled { opacity: .6; }
.abd-wajib { color: #d6453d; }
.abd-opsional { font-weight: 400; font-size: .85em; color: var(--teks-lembut); }
.abd-field__label { display: block; font-weight: 600; margin-bottom: 6px; }
.abd-field__bantuan { margin: 6px 0 0; font-size: .82rem; color: var(--teks-lembut); }
.abd-field.is-galat input, .abd-field.is-galat select { border-color: #d6453d; }
.abd-judul-otomatis { margin: 0; padding: 12px 14px; border: 1px dashed var(--garis); border-radius: 10px; font-size: .9rem; color: var(--teks-lembut); }
.abd-judul-otomatis.is-terisi { border-style: solid; color: inherit; background: rgba(18, 140, 60, .08); }
.abd-daftar-selesai { margin-bottom: 24px; padding: 20px; border: 1px solid var(--hijau-utama); border-left-width: 5px; border-radius: var(--r-md); background: rgba(18, 140, 60, .08); }
.abd-daftar-selesai h2 { margin-top: 0; }
.abd-daftar-selesai__kode b { display: inline-block; margin-left: 6px; padding: 4px 10px; border-radius: 8px; background: var(--hijau-utama); color: #fff; font-family: ui-monospace, monospace; letter-spacing: .05em; }
/* Grup WhatsApp di formulir pendaftaran */
.abd-grup-wa { display: grid; grid-template-columns: 44px 1fr; gap: 14px; margin: 0 0 16px; padding: 16px; border: 1px solid rgba(37, 211, 102, .45); border-radius: var(--r-md); background: rgba(37, 211, 102, .08); }
.abd-grup-wa__ikon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: #25d366; color: #fff; }
.abd-grup-wa__judul { margin: 0; font-weight: 700; }
.abd-grup-wa__ket { margin: 4px 0 12px; font-size: .88rem; }
.abd-grup-wa__tautan { margin: 10px 0 0; font-size: .8rem; overflow-wrap: anywhere; }
.abd-btn--wa { background: #25d366; color: #06371b; border-color: #25d366; }
.abd-btn--wa:hover, .abd-btn--wa:focus-visible { background: #1ebe5b; color: #06371b; }
/* ---------- Hotline WhatsApp panitia ---------- */
.abd-hotline { position: fixed; right: 16px; bottom: 80px; z-index: 151; }
.abd-hotline__tombol {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 16px;
  border-radius: 99px;
  background: #25d366; color: #06371b;
  font-weight: 700; font-size: .9rem;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  cursor: pointer; list-style: none;
}
.abd-hotline__tombol::-webkit-details-marker { display: none; }
.abd-hotline__tombol:hover, .abd-hotline__tombol:focus-visible { background: #1ebe5b; }
.abd-hotline__tombol:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.abd-hotline__panel {
  position: absolute; right: 0; bottom: calc(100% + 10px);
  width: min(300px, calc(100vw - 32px));
  padding: 14px;
  border: 1px solid var(--garis);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .3);
}
.abd-hotline__judul { margin: 0 0 10px; font-weight: 700; }
.abd-hotline__daftar { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.abd-hotline__daftar a {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  padding: 10px; border-radius: 10px;
  border: 1px solid var(--garis); color: inherit; text-decoration: none;
}
.abd-hotline__daftar a:hover, .abd-hotline__daftar a:focus-visible { border-color: #25d366; background: rgba(37, 211, 102, .08); }
.abd-hotline__daftar b { display: block; }
.abd-hotline__daftar small { display: block; font-size: .76rem; color: var(--teks-lembut); }
.abd-hotline__nomor { display: block; font-size: .85rem; font-variant-numeric: tabular-nums; color: #1ebe5b; font-weight: 600; }
.abd-hotline__ikon { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: #25d366; color: #fff; }
.abd-hotline-blok { padding: 16px; border: 1px solid rgba(37, 211, 102, .45); border-radius: var(--r-md); background: rgba(37, 211, 102, .06); }
.abd-footer__wa { margin: 6px 0 0; }
@media (max-width: 600px) {
  .abd-hotline__teks { display: none; }
  .abd-hotline__tombol { padding: 12px; }
}
@media print { .abd-hotline { display: none; } }
/* ---------- Widget pengunjung (kaki halaman) ---------- */
.abd-pengunjung { display: grid; grid-template-columns: auto 1fr auto; gap: 8px 24px; align-items: center; max-width: var(--lebar-wrap, 1180px); margin: 0 auto; padding: 16px 20px; border-top: 1px solid rgba(255, 255, 255, .12); }
.abd-pengunjung__judul { margin: 0; font-weight: 700; color: var(--emas-terang); font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; }
.abd-pengunjung__angka { display: flex; flex-wrap: wrap; gap: 20px; margin: 0; }
.abd-pengunjung__angka div { display: flex; flex-direction: column-reverse; }
.abd-pengunjung__angka dt { font-size: .72rem; color: rgba(255, 255, 255, .7); }
.abd-pengunjung__angka dd { margin: 0; font-family: var(--font-judul); font-size: 1.25rem; color: #fff; font-variant-numeric: tabular-nums; }
.abd-pengunjung__titik { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 50%; background: #4cd07d; vertical-align: middle; animation: abd-denyut 2s infinite; }
@keyframes abd-denyut { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .abd-pengunjung__titik { animation: none; } }
.abd-pengunjung__grafik { list-style: none; display: flex; gap: 4px; align-items: flex-end; height: 40px; margin: 0; padding: 0; }
.abd-pengunjung__grafik li { height: 100%; }
.abd-pengunjung__grafik button { display: flex; align-items: flex-end; width: 14px; height: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.abd-pengunjung__grafik button span { display: block; width: 100%; height: var(--tinggi); min-height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .35); transition: background .15s; }
.abd-pengunjung__grafik button:hover span, .abd-pengunjung__grafik button:focus-visible span, .abd-pengunjung__grafik button.is-aktif span { background: var(--emas-terang); }
.abd-pengunjung__grafik button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; border-radius: 3px; }
.abd-pengunjung__ket { grid-column: 1 / -1; justify-self: end; margin: 0; font-size: .74rem; color: rgba(255, 255, 255, .7); min-height: 1.2em; }
@media (max-width: 700px) {
  .abd-pengunjung { grid-template-columns: 1fr auto; }
  .abd-pengunjung__judul { grid-column: 1 / -1; }
  .abd-pengunjung__ket { justify-self: start; }
}
.abd-form-daftar .abd-pilihan { margin: 0 0 16px; padding: 14px 16px; border: 1px solid var(--garis); border-radius: 10px; }
.abd-form-daftar .abd-pilihan legend { padding: 0 6px; font-weight: 600; font-size: .95rem; line-height: 1.4; }
.abd-form-daftar .abd-pilihan .abd-check { display: inline-flex; margin-right: 22px; }
.abd-form-daftar .abd-pilihan.is-galat { border-color: #d6453d; }

/* ---------- Data delegasi untuk ID Card ---------- */
.abd-ketentuan-foto { margin: 0 0 16px; padding: 12px 14px; border-radius: 10px; background: rgba(242, 176, 30, .1); border: 1px solid rgba(242, 176, 30, .35); font-size: .88rem; }
.abd-ketentuan-foto ul { margin: 6px 0 0; padding-left: 1.2em; }
.abd-orang { margin: 0 0 16px; padding: 16px; border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--surface); }
.abd-orang__judul { margin: 0 0 12px; font-size: 1rem; display: flex; align-items: center; gap: 8px; }
.abd-orang__judul::before { content: ""; width: 4px; height: 18px; border-radius: 2px; background: var(--hijau-utama); }
.abd-orang__isi { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 18px; }
.abd-orang__data .abd-field:last-child { margin-bottom: 0; }
.abd-orang__foto { display: grid; gap: 8px; align-content: start; justify-items: center; text-align: center; }
.abd-orang__pratinjau { display: grid; place-items: center; width: 120px; aspect-ratio: 3 / 4; border: 2px dashed var(--garis); border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, .03); }
.abd-orang__pratinjau img { width: 100%; height: 100%; object-fit: cover; }
.abd-orang__kosong { font-weight: 700; color: var(--teks-lembut); letter-spacing: .1em; }
.abd-orang__tersimpan { display: grid; gap: 2px; padding: 6px; font-size: .78rem; font-weight: 700; color: #4cd07d; }
.abd-orang__tersimpan small { font-weight: 400; color: var(--teks-lembut); }
.abd-orang__pilih { cursor: pointer; }
.abd-orang__foto input:focus-visible + .abd-orang__pilih { outline: 3px solid var(--hijau-utama); outline-offset: 2px; }
.abd-orang__info { margin: 0; font-size: .74rem; color: var(--teks-lembut); line-height: 1.4; }
.abd-orang__foto.is-galat .abd-orang__pratinjau { border-color: #d6453d; }
.abd-orang__foto.is-galat .abd-orang__info { color: #ff8b84; }
@media (max-width: 640px) {
  .abd-orang__isi { grid-template-columns: 1fr; }
  .abd-orang__foto { justify-items: start; text-align: left; grid-template-columns: 120px 1fr; align-items: center; }
  .abd-orang__foto .abd-field__label { grid-column: 1 / -1; }
  .abd-orang__pratinjau { grid-row: span 3; }
}
.abd-orang__foto.is-tersimpan .abd-orang__pratinjau { border-style: solid; border-color: #2fc76a; }
.abd-orang__foto.is-tersimpan .abd-orang__info { color: #4cd07d; font-weight: 600; }
.abd-orang__foto.is-mengunggah .abd-orang__pratinjau { opacity: .6; }
.abd-orang__ulang { margin-left: 4px; padding: 2px 8px; border: 1px solid currentColor; border-radius: 99px; background: transparent; color: inherit; font: inherit; cursor: pointer; }.abd-orang__info.is-sebelumnya { color: #4cd07d; }
.abd-orang__peringatan { display: block; margin-top: 4px; color: #f2c75c; font-weight: 600; }
.abd-orang__hapus { padding: 0; border: 0; background: none; color: #ff8b84; font: inherit; font-size: .78rem; text-decoration: underline; cursor: pointer; }

/* Registrasi juri & Belmawa */
.abd-jebakan { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.abd-juri-waktu { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 560px) { .abd-juri-waktu { grid-template-columns: minmax(0, 1fr); } }
.abd-field[hidden] { display: none; }

/* Banner acara di beranda (Pengaturan → Banner beranda) */
.abd-banner { padding-block: clamp(20px, 3vw, 40px) 0; }
.abd-banner__tautan { display: block; border-radius: 7.6% / 19.5%; overflow: hidden; box-shadow: 0 14px 40px -18px rgba(0, 0, 0, .55); transition: transform .25s ease, box-shadow .25s ease; }
.abd-banner__tautan:hover { transform: translateY(-3px); box-shadow: 0 20px 48px -18px rgba(0, 0, 0, .6); }
.abd-banner__tautan:focus-visible { outline: 3px solid var(--emas, #c9a227); outline-offset: 4px; }
.abd-banner__gambar { display: block; width: 100%; height: auto; }
@media (max-width: 600px) {
  .abd-banner__tautan { border-radius: 18px; max-width: 340px; margin-inline: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .abd-banner__tautan, .abd-banner__tautan:hover { transition: none; transform: none; }
}

/* ---------- Susunan tim (halaman profil tim) ---------- */
.abd-susunan { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 24px); align-items: start; }
@media (max-width: 720px) { .abd-susunan { grid-template-columns: minmax(0, 1fr); } }
.abd-susunan__judul { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); }
.abd-susunan__judul::after { content: ""; flex: 1; height: 1px; background: var(--garis); }
.abd-orangtim { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.abd-orangtim__kartu {
  position: relative; display: flex; align-items: center; gap: 14px;
  padding: 12px 16px 12px 12px; background: var(--surface); border: 1px solid var(--garis); border-radius: 16px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.abd-orangtim__kartu:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--hijau-utama, #1f8a4c) 45%, var(--garis)); box-shadow: 0 12px 26px -18px rgba(0, 0, 0, .45); }
.abd-orangtim__kartu.is-ketua { border-color: color-mix(in srgb, var(--emas, #c9a227) 55%, var(--garis)); background: linear-gradient(120deg, color-mix(in srgb, var(--emas, #c9a227) 10%, var(--surface)), var(--surface) 60%); }
.abd-orangtim__kartu.is-ketua::after { content: "★"; position: absolute; top: 10px; right: 14px; font-size: .8rem; color: var(--emas, #c9a227); }
.abd-orangtim__foto {
  flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  font-weight: 800; font-size: 1.05rem; letter-spacing: .02em; color: #fff;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px color-mix(in srgb, var(--hijau-utama, #1f8a4c) 35%, transparent);
}
.abd-orangtim__kartu.is-ketua .abd-orangtim__foto { box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--emas, #c9a227); }
.abd-orangtim__foto img { width: 100%; height: 100%; object-fit: cover; object-position: center 25%; }
.abd-orangtim__foto--0 { background: linear-gradient(135deg, #1f8a4c, #0d5c32); }
.abd-orangtim__foto--1 { background: linear-gradient(135deg, #c9a227, #9a7413); }
.abd-orangtim__foto--2 { background: linear-gradient(135deg, #2a7fb8, #1b5680); }
.abd-orangtim__foto--3 { background: linear-gradient(135deg, #b8452a, #803019); }
.abd-orangtim__foto--4 { background: linear-gradient(135deg, #6b4fb8, #46328a); }
.abd-orangtim__foto--5 { background: linear-gradient(135deg, #1f9a8f, #13665e); }
.abd-orangtim__teks { display: grid; gap: 2px; min-width: 0; }
.abd-orangtim__nama { font-size: 1rem; line-height: 1.3; overflow-wrap: anywhere; }
.abd-orangtim__peran { display: inline-flex; width: fit-content; padding: 2px 10px; border-radius: 99px; font-size: .76rem; font-weight: 600; background: color-mix(in srgb, var(--hijau-utama, #1f8a4c) 14%, transparent); color: var(--hijau-utama, #1f8a4c); }
.abd-orangtim__kartu.is-ketua .abd-orangtim__peran { background: color-mix(in srgb, var(--emas, #c9a227) 20%, transparent); color: color-mix(in srgb, var(--emas, #c9a227) 75%, var(--teks)); }
.abd-orangtim__prodi { font-size: .8rem; color: var(--teks-lembut); }
@media (prefers-reduced-motion: reduce) { .abd-orangtim__kartu, .abd-orangtim__kartu:hover { transition: none; transform: none; } }

/* ---------- Kartu identitas tim (sisi kanan halaman profil tim) ---------- */
.abd-infotim { overflow: hidden; background: var(--surface); border: 1px solid var(--garis); border-radius: 20px; box-shadow: 0 18px 40px -30px rgba(0, 0, 0, .55); }
.abd-infotim__kepala {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 22px;
  background: linear-gradient(135deg, #0f6b37 0%, #0a4a27 100%); color: #fff; isolation: isolate;
}
.abd-infotim__kepala::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16; background: radial-gradient(circle at 85% 20%, #f2c94c 0, transparent 45%), repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 2px, transparent 2px 12px); }
.abd-infotim__nomor { display: grid; gap: 2px; }
.abd-infotim__nomor span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .75); }
.abd-infotim__nomor b { font-size: 2.4rem; line-height: 1; font-weight: 800; letter-spacing: .02em; color: #f5d26b; font-variant-numeric: tabular-nums; }
.abd-infotim__stan { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 99px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .25); font-size: .82rem; backdrop-filter: blur(4px); }
.abd-infotim__daftar { list-style: none; margin: 0; padding: 8px 10px 12px; display: grid; }
.abd-infotim__baris { display: flex; gap: 12px; padding: 11px 12px; border-radius: 12px; transition: background-color .2s ease; }
.abd-infotim__baris + .abd-infotim__baris { border-top: 1px dashed color-mix(in srgb, var(--garis) 80%, transparent); }
.abd-infotim__baris:hover { background: color-mix(in srgb, var(--hijau-utama, #1f8a4c) 7%, transparent); }
.abd-infotim__ikon {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px;
  background: color-mix(in srgb, var(--hijau-utama, #1f8a4c) 14%, transparent); color: var(--hijau-utama, #1f8a4c);
}
.abd-infotim__baris--dosen .abd-infotim__ikon { background: color-mix(in srgb, var(--emas, #c9a227) 18%, transparent); color: color-mix(in srgb, var(--emas, #c9a227) 80%, var(--teks)); }
.abd-infotim__isi { display: grid; gap: 3px; min-width: 0; }
.abd-infotim__label { font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teks-lembut); }
.abd-infotim__nilai { font-size: .98rem; font-weight: 600; line-height: 1.35; overflow-wrap: anywhere; }
.abd-infotim__chip { display: inline-flex; width: fit-content; padding: 3px 11px; border-radius: 99px; font-size: .84rem; font-weight: 600; background: color-mix(in srgb, var(--hijau-utama, #1f8a4c) 16%, transparent); color: var(--hijau-utama, #1f8a4c); }
.abd-infotim__sub { width: fit-content; font-size: .84rem; color: var(--teks-lembut); text-decoration: none; border-bottom: 1px dashed currentColor; }
.abd-infotim__sub:hover { color: var(--hijau-utama, #1f8a4c); }
.abd-infotim__aksi { display: grid; gap: 10px; margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .abd-infotim__baris { transition: none; } }
/* Di halaman profil tim, kartu identitas sudah berbingkai sendiri: wadah sisi dibuat polos. */
.abd-sisi:has(> .abd-infotim) { padding: 0; background: none; border: 0; box-shadow: none; }

/* =====================================================================
   Footer modern (Oktober 2026)
   ===================================================================== */
.abd-footer { background: linear-gradient(180deg, #0b5a2e 0%, #073f20 100%); border-top: 3px solid transparent; border-image: linear-gradient(90deg, transparent, var(--emas-terang, #f2c94c), transparent) 1; }
.abd-footer__cahaya { position: absolute; inset: -40% -10% auto auto; width: 620px; height: 620px; border-radius: 50%; background: radial-gradient(circle, rgba(242, 201, 76, .16), transparent 65%); pointer-events: none; }
.abd-footer__inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, 1.15fr); gap: clamp(28px, 4vw, 56px); }
.abd-footer__heading { display: flex; align-items: center; gap: 10px; }
.abd-footer__heading::after { content: ""; width: 28px; height: 2px; border-radius: 2px; background: var(--emas-terang, #f2c94c); opacity: .7; }
.abd-footer__logo { padding: 12px 16px; border-radius: 22px; box-shadow: 0 12px 30px -10px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.abd-footer__logo img { height: 84px; }
.abd-footer__desc { line-height: 1.7; color: rgba(255, 255, 255, .82); }
.abd-footer__chip { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; }
.abd-footer__chip li { display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px; font-size: .84rem; font-weight: 600; color: #fff; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16); }
.abd-footer__chip svg { color: var(--emas-terang, #f2c94c); }

.abd-footer__nav ul { gap: 2px; }
.abd-footer__nav a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; font-size: .95rem; transition: color .2s ease, transform .2s ease; }
.abd-footer__nav a svg { width: 15px; height: 15px; opacity: 0; transform: translateX(-6px); transition: opacity .2s ease, transform .2s ease; }
.abd-footer__nav a:hover { text-decoration: none; transform: translateX(3px); }
.abd-footer__nav a:hover svg, .abd-footer__nav a:focus-visible svg { opacity: 1; transform: none; }

.abd-footer__alamat { display: grid; gap: 12px; line-height: 1.6; }
.abd-footer__baris { display: flex; gap: 12px; align-items: flex-start; }
.abd-footer__baris > svg { flex: none; margin-top: 2px; padding: 7px; width: 32px; height: 32px; border-radius: 10px; color: var(--emas-terang, #f2c94c); background: rgba(255, 255, 255, .08); }
a.abd-footer__baris { align-items: center; }
a.abd-footer__baris:hover { text-decoration: none; }
a.abd-footer__baris:hover span { text-decoration: underline; }

.abd-footer__wa { display: grid; gap: 10px; margin: 18px 0 0; }
.abd-footer__wa-tombol {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px 10px 10px; border-radius: 16px; color: #fff !important;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14);
  transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.abd-footer__wa-tombol:hover { text-decoration: none !important; background: rgba(37, 211, 102, .16); border-color: rgba(37, 211, 102, .55); transform: translateY(-2px); }
.abd-footer__wa-ikon { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; background: #25d366; color: #fff; box-shadow: 0 6px 16px -6px rgba(37, 211, 102, .8); }
.abd-footer__wa-teks { display: grid; line-height: 1.25; }
.abd-footer__wa-teks small { font-size: .74rem; color: rgba(255, 255, 255, .72); }
.abd-footer__wa-teks b { font-size: 1rem; letter-spacing: .02em; font-variant-numeric: tabular-nums; }

.abd-pengunjung--kaca {
  margin: 0 auto clamp(20px, 3vw, 32px); max-width: calc(var(--wrap, 1180px) - 2 * var(--gutter, 20px)); width: calc(100% - 2 * var(--gutter, 20px));
  padding: 18px 22px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 18px;
  background: rgba(255, 255, 255, .06); backdrop-filter: blur(6px);
}
.abd-pengunjung--kaca .abd-pengunjung__angka { gap: 28px; }
.abd-pengunjung--kaca .abd-pengunjung__angka dd { font-size: 1.5rem; font-weight: 800; }

.abd-footer__bar { border-top-color: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .72); }
.abd-footer__meta a { padding: 4px 10px; border-radius: 99px; transition: background-color .2s ease; }
.abd-footer__meta a:hover { text-decoration: none; background: rgba(255, 255, 255, .08); }

@media (max-width: 1024px) and (min-width: 861px) {
  .abd-footer__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .abd-footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 860px) {
  .abd-footer__inner { grid-template-columns: minmax(0, 1fr); }
  .abd-footer__nav ul { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .abd-footer__nav a, .abd-footer__nav a svg, .abd-footer__wa-tombol { transition: none; transform: none; }
}


/* ------------------------------------------------------------------ */
/* Peta Kampus II UMI (informasi/peta-kampus)                          */
/* Geometri dari OpenStreetMap; satuan SVG = meter. Elemen data-skala  */
/* diskalakan app.js agar ukurannya di layar tetap.                    */
/* ------------------------------------------------------------------ */

.abd-kampus {
  --k-latar: #EEF0EB;
  --k-kampus: #E3F0DA;
  --k-kampus-tepi: #9CCB8E;
  --k-hijau: #D2E8C6;
  --k-lapangan: #BFE0AE;
  --k-parkir: #DDE6F2;
  --k-air: #9FCBEA;
  --k-jalan: #FFFFFF;
  --k-jalan-tepi: #D3D8D2;
  --k-jalan-utama: #FFF6DC;
  --k-jalan-utama-tepi: #E7C873;
  --k-gedung-kota: #DADDD6;
  --k-gedung: #FBFAF6;
  --k-gedung-tepi: #C4CBC5;
  --k-acara: #128C3C;
  --k-acara-tepi: #06532A;
  --k-pin: #F2B01E;
  --k-pin-teks: #10201A;
  --k-p: #2563C9;
  --k-teks: #10201A;
  --k-teks-lembut: #5A6B63;
  --k-halo: #FFFFFF;
  --k-rute: #EE6B2D;
  --k-saya: #1A73E8;
  --k-keluar: #0B8A86;
  display: grid;
  gap: 18px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .abd-kampus {
    --k-latar: #0D1612; --k-kampus: #13261B; --k-kampus-tepi: #2E5A3B; --k-hijau: #163021; --k-lapangan: #1C3B26;
    --k-parkir: #1A2737; --k-air: #1E4A6B; --k-jalan: #34443C; --k-jalan-tepi: #0A100D; --k-jalan-utama: #5A4E2C; --k-jalan-utama-tepi: #0A100D;
    --k-gedung-kota: #1C2621; --k-gedung: #2E3D36; --k-gedung-tepi: #4A5D53; --k-acara: #1FA34D; --k-acara-tepi: #8FE3A5;
    --k-p: #4F8BEF; --k-teks: #E9F2ED; --k-teks-lembut: #A6BAB0; --k-halo: #0D1612; --k-rute: #FF8A4C; --k-saya: #4F9BFF; --k-keluar: #34D1C6;
  }
}
:root[data-theme="dark"] .abd-kampus {
  --k-latar: #0D1612; --k-kampus: #13261B; --k-kampus-tepi: #2E5A3B; --k-hijau: #163021; --k-lapangan: #1C3B26;
  --k-parkir: #1A2737; --k-air: #1E4A6B; --k-jalan: #34443C; --k-jalan-tepi: #0A100D; --k-jalan-utama: #5A4E2C; --k-jalan-utama-tepi: #0A100D;
  --k-gedung-kota: #1C2621; --k-gedung: #2E3D36; --k-gedung-tepi: #4A5D53; --k-acara: #1FA34D; --k-acara-tepi: #8FE3A5;
  --k-p: #4F8BEF; --k-teks: #E9F2ED; --k-teks-lembut: #A6BAB0; --k-halo: #0D1612; --k-rute: #FF8A4C; --k-saya: #4F9BFF; --k-keluar: #34D1C6;
}

/* Bilah alat */
.abd-kampus__alat { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; }
.abd-kampus__hari {
  display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--garis); box-shadow: var(--shadow-sm);
}
.abd-kampus__hari button {
  border: 0; cursor: pointer; padding: 9px 16px; border-radius: var(--r-pill);
  font: 600 .88rem/1 var(--font-teks); color: var(--teks-lembut); background: transparent;
  transition: background var(--durasi), color var(--durasi);
}
.abd-kampus__hari button:hover { color: var(--teks); background: var(--hijau-lembut); }
.abd-kampus__hari button[aria-pressed="true"] { background: var(--hijau-utama); color: #fff; box-shadow: 0 2px 8px rgba(18, 140, 60, .35); }
.abd-kampus__hari button:focus-visible, .abd-kampus__tombol:focus-visible, .abd-kampus__kendali button:focus-visible { outline: 3px solid var(--emas); outline-offset: 2px; }
.abd-kampus__aksi { display: flex; flex-wrap: wrap; gap: 8px; }
.abd-kampus__tombol {
  display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--r-pill); cursor: pointer;
  border: 1px solid var(--garis); background: var(--surface); color: var(--teks); font: 600 .9rem/1 var(--font-teks);
  text-decoration: none; box-shadow: var(--shadow-sm); transition: border-color var(--durasi), transform var(--durasi);
}
.abd-kampus__tombol svg { width: 18px; height: 18px; fill: currentColor; }
.abd-kampus__tombol svg.is-gmaps { fill: #EA4335; }
.abd-kampus__tombol:hover { border-color: var(--aksen); transform: translateY(-1px); }

/* Tata letak */
.abd-kampus__tata { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1080px) {
  .abd-kampus__tata { grid-template-columns: minmax(0, 2.1fr) minmax(320px, 1fr); align-items: start; }
  .abd-kampus__peta { position: sticky; top: calc(var(--header-h) + 12px); }
}
.abd-kampus__peta { margin: 0; display: grid; gap: 12px; min-width: 0; }

/* Kanvas peta */
.abd-kampus__kanvas {
  position: relative; overflow: hidden; min-width: 0;
  aspect-ratio: 1 / 1; max-height: calc(100vh - var(--header-h) - 40px);
  border-radius: var(--r-lg); border: 1px solid var(--garis); background: var(--k-latar);
  box-shadow: var(--shadow-md);
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
}
@media (max-width: 640px) { .abd-kampus__kanvas { aspect-ratio: 4 / 5; border-radius: var(--r-md); } }
.abd-kampus__kanvas.is-seret { cursor: grabbing; }
.abd-kampus__kanvas:focus-visible { outline: 3px solid var(--emas); outline-offset: 3px; }
.abd-kampus__kanvas > svg { display: block; width: 100%; height: 100%; }

/* Layar penuh (tanpa Fullscreen API agar sama di iOS) */
.abd-kampus__peta.is-penuh { position: fixed; inset: 0; z-index: 1000; margin: 0; padding: 0; background: var(--k-latar); gap: 0; }
.abd-kampus__peta.is-penuh .abd-kampus__kanvas { aspect-ratio: auto; height: 100vh; height: 100dvh; max-height: none; border-radius: 0; border: 0; touch-action: none; }
.abd-kampus__peta.is-penuh .abd-kampus__legenda { display: none; }
html.abd-kampus-penuh { overflow: hidden; }

/* Lapisan geografis */
.k-latar { fill: var(--k-latar); }
.k-hijau { fill: var(--k-hijau); }
.k-kampus { fill: var(--k-kampus); stroke: var(--k-kampus-tepi); stroke-width: 2.5; stroke-linejoin: round; stroke-dasharray: 8 5; }
.k-lapangan { fill: var(--k-lapangan); }
.k-parkir { fill: var(--k-parkir); }
.k-air path { fill: none; stroke: var(--k-air); stroke-linecap: round; stroke-linejoin: round; }
.k-jalan-tepi, .k-jalan { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.k-jalan-tepi { stroke: var(--k-jalan-tepi); }
.k-jalan { stroke: var(--k-jalan); }
.k-jalan-tepi.is-utama { stroke: var(--k-jalan-utama-tepi); stroke-width: 21; }
.k-jalan.is-utama { stroke: var(--k-jalan-utama); stroke-width: 18; }
.k-jalan-tepi.is-lokal { stroke-width: 9; }
.k-jalan.is-lokal { stroke-width: 7; }
.k-jalan-tepi.is-servis { stroke-width: 6.5; }
.k-jalan.is-servis { stroke-width: 5; }
.k-jalan-tepi.is-setapak { stroke: none; }
.k-jalan.is-setapak { stroke: var(--k-jalan-tepi); stroke-width: 1.4; stroke-dasharray: 3 2.5; }
.k-gedung-kota { fill: var(--k-gedung-kota); }
.k-gedung-kampus { fill: var(--k-gedung); stroke: var(--k-gedung-tepi); stroke-width: .8; }
.k-gedung path { fill: var(--k-gedung); stroke: var(--k-gedung-tepi); stroke-width: 1; transition: fill var(--durasi); }
.k-gedung path.is-acara { fill: var(--k-acara); stroke: var(--k-acara-tepi); stroke-width: 1.2; }
.k-gedung path.is-acara.is-redup { fill: var(--k-gedung); stroke: var(--k-gedung-tepi); }
.k-gedung path.is-aktif { fill: var(--k-pin); stroke: var(--k-acara-tepi); stroke-width: 1.5; }

/* Label (ukuran dalam piksel layar lewat --s = meter per piksel) */
.k-label-jalan text {
  fill: var(--k-teks-lembut); font-family: var(--font-teks); font-weight: 600; letter-spacing: .04em;
  font-size: calc(var(--s, .8) * 11px); dominant-baseline: central;
  paint-order: stroke; stroke: var(--k-jalan); stroke-width: calc(var(--s, .8) * 3px); stroke-linejoin: round;
}
.k-label-jalan text.is-utama { font-size: calc(var(--s, .8) * 12.5px); font-weight: 700; fill: #8A6A12; stroke: var(--k-jalan-utama); }
.k-tempat text {
  fill: var(--k-teks-lembut); font: 700 12px/1 var(--font-teks); text-anchor: middle; dominant-baseline: central; letter-spacing: .03em;
  paint-order: stroke; stroke: var(--k-halo); stroke-width: 3.5px; stroke-linejoin: round;
}
.k-ikon-parkir rect { fill: var(--k-p); stroke: #fff; stroke-width: 1.5; }
.k-ikon-parkir text { fill: #fff; font: 800 13px/1 var(--font-judul); text-anchor: middle; dominant-baseline: central; }

/* Lencana gedung biasa */
.k-kode a { cursor: pointer; }
.k-kode circle { fill: #fff; stroke: var(--k-acara-tepi); stroke-width: 1.5; transition: transform var(--durasi); transform-origin: 0 0; }
.k-kode text { fill: var(--k-acara-tepi); font: 800 11.5px/1 var(--font-judul); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.k-kode a:hover circle, .k-kode a.is-aktif circle { transform: scale(1.25); fill: var(--k-pin); }

/* Gerbang */
.k-gerbang a { cursor: pointer; }
.k-gerbang-titik { fill: var(--k-acara-tepi); stroke: #fff; stroke-width: 2.5; }
.k-gerbang rect { fill: var(--k-acara-tepi); stroke: #fff; stroke-width: 1.5; }
.k-gerbang g > circle { fill: #fff; }
.k-gerbang-kode { fill: var(--k-acara-tepi); font: 800 11px/1 var(--font-judul); text-anchor: middle; dominant-baseline: central; }
.k-gerbang-teks { fill: #fff; font: 800 11px/1 var(--font-judul); letter-spacing: .12em; text-anchor: middle; dominant-baseline: central; }

/* Pin lokasi kegiatan */
.k-pin a { cursor: pointer; }
.k-pin a > g { transition: opacity var(--durasi); }
.k-pin-badan { fill: var(--k-pin); stroke: #fff; stroke-width: 2.5; transition: transform var(--durasi); transform-origin: 0 0; }
.k-pin-kode { fill: var(--k-pin-teks); font: 800 17px/1 var(--font-judul); text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.k-pin-label {
  fill: var(--k-teks); font: 800 13px/1 var(--font-judul); text-anchor: middle; dominant-baseline: central; pointer-events: none;
  paint-order: stroke; stroke: var(--k-halo); stroke-width: 4.5px; stroke-linejoin: round;
}
.k-pin-denyut { fill: var(--k-pin); opacity: 0; transform-box: fill-box; transform-origin: center; }
.k-pin a:hover .k-pin-badan, .k-pin a:focus-visible .k-pin-badan, .k-pin a.is-aktif .k-pin-badan { transform: scale(1.15); }
.k-pin a.is-aktif .k-pin-denyut { animation: k-denyut 1.6s ease-out infinite; }
.k-pin a:focus-visible, .k-kode a:focus-visible, .k-gerbang a:focus-visible { outline: none; }
.k-pin a:focus-visible .k-pin-badan { stroke: var(--k-acara-tepi); stroke-width: 4; }
.k-pin a.is-redup > g { opacity: .28; }
@keyframes k-denyut { 0% { opacity: .55; transform: scale(1); } 100% { opacity: 0; transform: scale(2.4); } }

/* Jalur akses dari Gerbang Barat. Ukuran garis dalam piksel layar (--s). */
.k-rute g { transition: opacity var(--durasi); }
.k-rute-tepi { fill: none; stroke: var(--k-halo); stroke-width: calc(var(--s, .8) * 7px); stroke-linecap: round; stroke-linejoin: round; opacity: .85; }
.k-rute-garis {
  fill: none; stroke: var(--k-rute); stroke-width: calc(var(--s, .8) * 3.5px); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: calc(var(--s, .8) * 1px) calc(var(--s, .8) * 9px);
  marker-end: url(#k-panah); animation: k-rute 1.1s linear infinite;
}
.k-panah { fill: var(--k-rute); }
/* Satu rute dipilih: tebal dan cepat; rute lain mundur ke latar. */
.k-rute.is-pilih g:not(.is-dipilih) { opacity: .22; }
.k-rute g.is-dipilih .k-rute-tepi { stroke-width: calc(var(--s, .8) * 10px); }
.k-rute g.is-dipilih .k-rute-garis { stroke-width: calc(var(--s, .8) * 5.5px); stroke-dasharray: calc(var(--s, .8) * 1px) calc(var(--s, .8) * 11px); animation-duration: .8s; }
@keyframes k-rute { to { stroke-dashoffset: calc(var(--s, .8) * -10px); } }
.abd-kampus__tombol.is-jalur[aria-pressed="true"] { background: color-mix(in srgb, var(--k-rute) 16%, var(--surface)); border-color: var(--k-rute); }
.abd-kampus__tombol.is-jalur svg { fill: var(--k-rute); }

/* Posisi saya */
.k-saya-akurasi { fill: var(--k-saya); fill-opacity: .14; stroke: var(--k-saya); stroke-opacity: .4; stroke-width: calc(var(--s, .8) * 1px); }
.k-saya-cincin { fill: var(--k-saya); opacity: .25; animation: k-saya 2s ease-out infinite; transform-origin: 0 0; }
.k-saya-titik { fill: var(--k-saya); stroke: #fff; stroke-width: 3; }
@keyframes k-saya { 0% { transform: scale(.6); opacity: .45; } 100% { transform: scale(1.8); opacity: 0; } }

/* Kendali di atas peta */
.abd-kampus__kendali {
  position: absolute; top: 12px; right: 12px; z-index: 3; display: grid; gap: 1px;
  border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(6, 40, 22, .2); border: 1px solid var(--garis);
}
.abd-kampus__kendali button {
  width: 42px; height: 42px; border: 0; cursor: pointer; display: grid; place-items: center;
  background: var(--surface); color: var(--teks); transition: background var(--durasi), color var(--durasi);
}
.abd-kampus__kendali button + button { border-top: 1px solid var(--garis); }
.abd-kampus__kendali button:hover { background: var(--hijau-lembut); }
.abd-kampus__kendali button[aria-pressed="true"] { background: var(--k-saya); color: #fff; }
.abd-kampus__kendali svg { width: 22px; height: 22px; fill: currentColor; }
.abd-kampus__petunjuk, .abd-kampus__status {
  position: absolute; left: 50%; z-index: 3; transform: translateX(-50%); margin: 0; max-width: calc(100% - 120px);
  padding: 9px 16px; border-radius: var(--r-pill); font-size: .85rem; font-weight: 600; text-align: center; pointer-events: none;
}
.abd-kampus__petunjuk { top: 50%; transform: translate(-50%, -50%); background: rgba(16, 32, 26, .82); color: #fff; }
.abd-kampus__status { bottom: 40px; background: var(--surface); color: var(--teks); border: 1px solid var(--garis); box-shadow: var(--shadow-md); }
.abd-kampus__atribusi {
  position: absolute; right: 0; bottom: 0; z-index: 3; margin: 0; padding: 3px 8px; border-top-left-radius: 8px;
  font-size: .7rem; background: color-mix(in srgb, var(--surface) 85%, transparent); color: var(--teks-lembut);
}
.abd-kampus__atribusi a { color: inherit; }

/* Kartu info di atas peta */
.abd-kampus__info {
  position: absolute; z-index: 4; width: min(330px, calc(100% - 24px));
  padding: 16px 18px 14px; border-radius: var(--r-md);
  background: var(--surface); color: var(--teks); border: 1px solid var(--garis);
  box-shadow: 0 18px 40px rgba(6, 40, 22, .25);
  transform: translate(-50%, calc(-100% - 62px));
  animation: k-muncul .18s ease-out; cursor: auto;
}
.abd-kampus__info.is-bawah { transform: translate(-50%, 26px); }
/* Di ponsel kartu menjadi lembar di bawah peta, tidak menutupi pin. */
@media (max-width: 640px) {
  .abd-kampus__info, .abd-kampus__info.is-bawah {
    left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto; transform: none;
    max-height: 55%; overflow: auto; animation: k-naik .2s ease-out;
  }
}
.abd-kampus__info h3 { margin: 0 32px 8px 0; font-size: 1rem; line-height: 1.3; }
.abd-kampus__info .abd-kampus__label { margin: 0 0 2px; }
.abd-kampus__info ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .86rem; color: var(--teks-lembut); }
.abd-kampus__info ul li[hidden] { display: none; }
.abd-kampus__info .abd-kampus__jalan { margin-top: 12px; }
.abd-kampus__tutup {
  position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid var(--garis); background: var(--bg); color: var(--teks); font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.abd-kampus__tutup:hover { background: var(--hijau-lembut); }
@keyframes k-muncul { from { opacity: 0; } to { opacity: 1; } }
@keyframes k-naik { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Legenda */
.abd-kampus__legenda { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: .84rem; color: var(--teks-lembut); }
.abd-kampus__legenda span { display: inline-flex; align-items: center; gap: 8px; }
.k-ikon { display: inline-grid; place-items: center; width: 18px; height: 14px; border-radius: 3px; font: 800 10px/1 var(--font-judul); font-style: normal; }
.k-ikon.is-pin { width: 14px; height: 14px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--k-pin); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--garis); }
.k-ikon.is-bangunan { background: var(--k-gedung); border: 1px solid var(--k-gedung-tepi); }
.k-ikon.is-p { background: var(--k-p); color: #fff; width: 16px; height: 16px; }
.k-ikon.is-rute { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--k-rute) 0 4px, transparent 4px 8px); }
.k-ikon.is-saya { width: 14px; height: 14px; border-radius: 50%; background: var(--k-saya); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--garis); }

/* Daftar lokasi */
.abd-kampus__ringkas { margin: 0 0 12px; font-size: .9rem; color: var(--teks-lembut); }
.abd-kampus__ringkas:empty { display: none; }
.abd-kampus__acara { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.abd-kampus__acara > li {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start;
  padding: 16px 18px; border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--surface);
  box-shadow: var(--shadow-sm); cursor: pointer; scroll-margin-top: calc(var(--header-h) + 16px);
  transition: border-color var(--durasi), box-shadow var(--durasi), transform var(--durasi);
}
.abd-kampus__acara > li:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.abd-kampus__acara > li.is-luar-peta { cursor: default; background: linear-gradient(135deg, var(--surface), var(--hijau-lembut)); }
.abd-kampus__acara > li.is-redup { display: none; }
.abd-kampus__acara h3 { margin: 0 0 8px; font-size: 1.02rem; line-height: 1.3; }
.abd-kampus__label { margin: 0 0 2px; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--aksen); }
.abd-kampus__acara ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: .88rem; color: var(--teks-lembut); }
.abd-kampus__acara ul li[hidden] { display: none; }
.abd-kampus__waktu {
  display: block; width: fit-content; margin-bottom: 2px; padding: 2px 8px; border-radius: var(--r-pill);
  background: var(--hijau-lembut); color: var(--hijau-atas-lembut); font-size: .76rem; font-weight: 700;
}
.abd-kampus__jalan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed var(--garis); font-size: .84rem; color: var(--teks-lembut);
}
.abd-kampus__jalan button {
  border: 0; cursor: pointer; padding: 7px 12px; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--k-rute) 14%, transparent); color: var(--teks); font: 700 .8rem/1 var(--font-teks);
}
.abd-kampus__jalan button:hover, .abd-kampus__jalan button[aria-pressed="true"] { background: var(--k-rute); color: #fff; }
.abd-kampus__kode {
  display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: var(--n-100); color: var(--teks); border: 1px solid var(--garis); font: 800 .8rem/1 var(--font-judul);
}
.abd-kampus__kode.is-acara { width: 38px; height: 38px; border: 0; background: var(--emas); color: var(--n-900); font-size: 1.05rem; box-shadow: 0 3px 10px rgba(242, 176, 30, .4); }
.abd-kampus__acara > li:target, .abd-kampus__acara > li.is-aktif { border-color: var(--emas); box-shadow: 0 0 0 3px rgba(242, 176, 30, .35), var(--shadow-md); outline: none; }

.abd-kampus__direktori { margin-top: 18px; border: 1px solid var(--garis); border-radius: var(--r-md); background: var(--surface); }
.abd-kampus__direktori summary { cursor: pointer; padding: 14px 18px; font-weight: 700; }
.abd-kampus__direktori ul { list-style: none; margin: 0; padding: 0 14px 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 4px 12px; font-size: .88rem; }
.abd-kampus__direktori li { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--r-sm); scroll-margin-top: calc(var(--header-h) + 16px); }
.abd-kampus__direktori li:target, .abd-kampus__direktori li.is-aktif { background: rgba(242, 176, 30, .2); outline: none; }
.abd-kampus__direktori .abd-kampus__kode.is-acara { width: 26px; height: 26px; font-size: .8rem; box-shadow: none; }
.abd-kampus__catatan { margin: 16px 0 0; font-size: .84rem; color: var(--teks-lembut); }

@media (prefers-reduced-motion: reduce) {
  .k-pin a.is-aktif .k-pin-denyut, .abd-kampus__info, .k-rute-garis, .k-saya-cincin { animation: none; }
  .k-pin-badan, .k-kode circle, .k-gedung path, .abd-kampus__acara > li, .abd-kampus__tombol { transition: none; }
}

/* Cetak / PDF: peta dan daftar saja, satu kolom. */
@media print {
  body:has([data-peta-kampus]) header, body:has([data-peta-kampus]) footer, body:has([data-peta-kampus]) .abd-kampus__alat,
  body:has([data-peta-kampus]) .abd-kampus__kendali, body:has([data-peta-kampus]) .abd-kampus__info,
  body:has([data-peta-kampus]) .abd-kampus__jalan button, body:has([data-peta-kampus]) .abd-a11y,
  body:has([data-peta-kampus]) .abd-announce, body:has([data-peta-kampus]) .abd-kampus__atribusi a::after { display: none !important; }
  body:has([data-peta-kampus]) .abd-kampus__daftar { margin-top: 0; }
  body:has([data-peta-kampus]) .abd-kampus__direktori { display: block; }
  body:has([data-peta-kampus]) .abd-kampus__direktori > ul { padding-top: 12px; }
  body:has([data-peta-kampus]) .abd-kampus__tata { display: block; }
  body:has([data-peta-kampus]) .abd-kampus__peta { position: static; break-after: page; }
  body:has([data-peta-kampus]) .abd-kampus__kanvas { box-shadow: none; max-height: none; aspect-ratio: 1 / 1; }
  body:has([data-peta-kampus]) .abd-kampus__acara > li { break-inside: avoid; box-shadow: none; }
  body:has([data-peta-kampus]) .abd-kampus__direktori ul { display: grid; }
}

/* Atribut hidden tidak berlaku untuk elemen SVG di semua peramban. */
.abd-kampus svg [hidden] { display: none; }

/* Jalur keluar ke Gerbang Timur: warna dan pola berbeda dari jalur masuk
   agar tetap terbedakan saat keduanya melewati jalan yang sama. */
.k-rute g.is-keluar .k-rute-garis {
  stroke: var(--k-keluar); marker-end: url(#k-panah-keluar);
  stroke-linecap: butt; stroke-dasharray: calc(var(--s, .8) * 7px) calc(var(--s, .8) * 5px);
}
.k-rute g.is-keluar.is-dipilih .k-rute-garis { stroke-dasharray: calc(var(--s, .8) * 9px) calc(var(--s, .8) * 5px); }
.k-rute g.is-keluar .k-rute-tepi { opacity: .7; }
.k-panah.is-keluar { fill: var(--k-keluar); }
.abd-kampus__tombol.is-jalur.is-keluar[aria-pressed="true"] { background: color-mix(in srgb, var(--k-keluar) 16%, var(--surface)); border-color: var(--k-keluar); }
.abd-kampus__tombol.is-jalur.is-keluar svg { fill: var(--k-keluar); }
.k-ikon.is-rute-keluar { height: 4px; border-radius: 2px; background: repeating-linear-gradient(90deg, var(--k-keluar) 0 7px, transparent 7px 11px); }
.abd-kampus__arah { display: flex; align-items: center; gap: 8px; }
.abd-kampus__arah + .abd-kampus__arah { margin-top: 4px; }
.abd-kampus__arah .k-ikon { flex: none; width: 16px; }

/* ---------- Submenu navigasi ---------- */
@media (min-width: 1025px) {
  /* Caret penanda menu bersubmenu. */
  .abd-nav__item.has-children > .abd-nav__link::after {
    content: ""; display: inline-block; width: 6px; height: 6px; margin-left: 7px;
    border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
    transform: translateY(-3px) rotate(45deg); opacity: .55; transition: transform var(--durasi), opacity var(--durasi);
  }
  .abd-nav__item.has-children:hover > .abd-nav__link::after,
  .abd-nav__item.has-children:focus-within > .abd-nav__link::after { transform: translateY(0) rotate(225deg); opacity: .9; }
  /* Jembatan di celah antara menu dan dropdown, agar hover tidak putus. */
  .abd-nav__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .abd-nav__sub { z-index: 60; }
  /* Menu di sisi kanan: dropdown rata kanan agar tidak keluar layar. */
  .abd-nav__item:nth-last-child(-n+3) .abd-nav__sub { left: auto; right: 0; }
  .abd-nav__sub a[aria-current="page"] { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); font-weight: 600; box-shadow: inset 3px 0 0 var(--emas); }
}

.abd-laci__baris { display: flex; align-items: center; gap: 4px; }
.abd-laci__baris .abd-laci__link { flex: 1 1 auto; }
.abd-laci__buka {
  flex: none; width: 48px; height: 48px; display: grid; place-items: center; cursor: pointer;
  border: 0; border-radius: var(--r-md); background: transparent; color: var(--teks-lembut);
}
.abd-laci__buka:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }
.abd-laci__buka svg { transition: transform var(--durasi); }
.abd-laci__buka[aria-expanded="true"] svg { transform: rotate(180deg); }
.abd-laci__sub[hidden] { display: none; }
.abd-laci__sub a[aria-current="page"] { color: var(--hijau-atas-lembut); font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .abd-laci__buka svg, .abd-nav__item.has-children > .abd-nav__link::after { transition: none; } }

/* ---------- Karcis pengunjung & voting ---------- */
.abd-alert--info { background: #FFF7E0; border-color: #EBCB73; color: #5C4300; }
.abd-alert--info a { font-weight: 700; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .abd-alert--info { background: #2E2510; border-color: #6B5320; color: #F6DE9C; }
}
:root[data-theme="dark"] .abd-alert--info { background: #2E2510; border-color: #6B5320; color: #F6DE9C; }

.abd-karcis-tersimpan {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  padding: 16px 18px; margin-bottom: 24px;
  background: var(--hijau-lembut); border: 1px solid var(--hijau-daun); border-radius: var(--r-md);
  color: var(--hijau-atas-lembut);
}
.abd-karcis-tersimpan strong, .abd-karcis-tersimpan span { display: block; }
.abd-karcis-tersimpan span { font-size: .9rem; }

.abd-karcis-langkah { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 12px; }
.abd-karcis-langkah li { display: flex; gap: 14px; align-items: flex-start; }
.abd-karcis-langkah li > span {
  flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%;
  background: var(--grad-hijau); color: #fff; font-weight: 800;
}
.abd-karcis-langkah strong { display: block; }
.abd-karcis-langkah div { font-size: .93rem; color: var(--teks-lembut); }
.abd-karcis-langkah div strong { color: var(--teks); }

.abd-karcis-form {
  padding: clamp(18px, 3vw, 28px); background: var(--surface);
  border: 1px solid var(--garis); border-top: 4px solid var(--emas); border-radius: var(--r-lg);
}
.abd-karcis-form .abd-field small { display: block; font-size: .82rem; color: var(--teks-lembut); margin-top: 6px; }
.abd-karcis-setuju { align-items: flex-start; }
.abd-karcis-setuju input { flex: none; margin-top: 1px; }
@media (max-width: 420px) {
  .abd-karcis-form .abd-captcha { grid-template-columns: auto auto; }
  .abd-karcis-form .abd-captcha__input { grid-column: 1 / -1; }
}

.abd-tiket {
  display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
.abd-tiket > * { min-width: 0; }
.abd-tiket__gambar { margin: 0 0 14px; }
.abd-tiket__gambar img {
  display: block; width: 100%; height: auto; border-radius: 22px;
  box-shadow: 0 18px 40px -18px rgba(6, 64, 42, .55);
}
.abd-tiket__aksi { display: flex; flex-wrap: wrap; gap: 10px; }
.abd-tiket__aksi .abd-btn { flex: 1 1 160px; justify-content: center; }
.abd-tiket__catatan { font-size: .88rem; color: var(--teks-lembut); margin: 12px 0 0; }

.abd-tiket__kanan {
  padding: clamp(18px, 3vw, 28px); background: var(--surface);
  border: 1px solid var(--garis); border-top: 4px solid var(--hijau-utama); border-radius: var(--r-lg);
  scroll-margin-top: 96px;
}
.abd-tiket__kanan h2 { font-size: 1.2rem; margin: 0 0 12px; }
.abd-tiket__kanan > .abd-tiket__catatan { margin: 0 0 14px; }
.abd-tiket__cari { margin-bottom: 14px; }

.abd-tiket__stan {
  list-style: none; margin: 0; padding: 0; display: grid; gap: 8px;
  max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
}
.abd-tiket__stan li {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--garis); border-radius: var(--r-md);
}
.abd-tiket__stan li[hidden] { display: none; }
.abd-tiket__stan li:hover { border-color: var(--hijau-daun); }
.abd-tiket__stan form { margin: 0; }
.abd-tiket__kode {
  min-width: 48px; padding: 6px 8px; text-align: center; border-radius: 10px;
  background: var(--hijau-lembut); color: var(--hijau-atas-lembut); font-weight: 800; font-size: .9rem;
}
.abd-tiket__nama strong, .abd-tiket__nama small { display: block; overflow-wrap: anywhere; }
.abd-tiket__nama strong { font-size: .95rem; line-height: 1.3; }
.abd-tiket__nama small { color: var(--teks-lembut); font-size: .8rem; }

.abd-tiket__terpilih {
  display: flex; gap: 14px; align-items: flex-start; padding: 16px;
  background: var(--hijau-lembut); border: 1px solid var(--hijau-daun); border-radius: var(--r-md);
  color: var(--hijau-atas-lembut);
}
.abd-tiket__terpilih p { margin: 0 0 2px; font-size: .88rem; }
.abd-tiket__terpilih strong { display: block; font-size: 1.05rem; margin-bottom: 6px; }
.abd-tiket__centang {
  flex: none; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%;
  background: var(--hijau-utama); color: #fff; font-weight: 800; font-size: 1.1rem;
}
.abd-tiket__tutup {
  padding: 16px; border: 1px dashed var(--emas); border-radius: var(--r-md); background: rgba(242, 176, 30, .08);
}
.abd-tiket__tutup strong { display: block; margin-bottom: 6px; }
.abd-tiket__tutup p { font-size: .92rem; color: var(--teks-lembut); margin: 0 0 8px; }

@media (max-width: 900px) {
  .abd-tiket { grid-template-columns: 1fr; }
  .abd-tiket__kiri { max-width: 440px; margin-inline: auto; width: 100%; }
  .abd-tiket__stan { max-height: none; overflow: visible; }
}
@media (max-width: 420px) {
  .abd-tiket__stan li { grid-template-columns: auto minmax(0, 1fr); }
  .abd-tiket__stan form { grid-column: 1 / -1; }
  .abd-tiket__stan form .abd-btn { width: 100%; }
}
@media print {
  .abd-tiket { display: block; }
  .abd-tiket__aksi, .abd-tiket__catatan, .abd-tiket__kanan, .abd-tiket .abd-alert { display: none; }
  .abd-tiket__gambar img { box-shadow: none; max-width: 10cm; margin: 0 auto; }
}

/* ---------- Verifikasi OTP karcis ---------- */
.abd-karcis-kanal { margin: 0 0 18px; padding: 12px 16px 2px; border: 1px solid var(--garis); border-radius: var(--r-md); }
.abd-karcis-kanal legend { padding: 0 6px; font-weight: 600; font-size: .92rem; }
.abd-karcis-kanal .abd-check { margin-bottom: 10px; }
.abd-karcis-ket { font-size: .9rem; color: var(--teks-lembut); margin: 0 0 16px; }
.abd-otp { display: grid; gap: 22px; }
.abd-otp .abd-alert { margin: 0; }
.abd-otp__kartu {
  padding: clamp(18px, 3vw, 28px); background: var(--surface);
  border: 1px solid var(--garis); border-top: 4px solid var(--emas); border-radius: var(--r-lg);
}
.abd-otp__tujuan { margin: 0 0 16px; color: var(--teks-lembut); }
.abd-otp__tujuan strong { display: block; color: var(--teks); font-size: 1.1rem; letter-spacing: .04em; }
.abd-otp__kode { font: 700 1.6rem/1 ui-monospace, Consolas, monospace !important; letter-spacing: .5em; text-align: center; }
.abd-otp__kartu .abd-field small, .abd-otp__cadangan small { display: block; font-size: .82rem; color: var(--teks-lembut); margin-top: 6px; }
.abd-otp__lain { display: grid; gap: 16px; padding: 18px; border: 1px dashed var(--garis); border-radius: var(--r-lg); }
.abd-otp__lain h2 { font-size: 1.05rem; margin: 0; }
.abd-otp__lain form { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.abd-otp__cadangan { display: grid !important; gap: 6px; }
.abd-otp__cadangan label { font-weight: 600; font-size: .92rem; }
.abd-otp__baris { display: flex; flex-wrap: wrap; gap: 8px; }
.abd-otp__baris input {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 10px 13px; font: inherit;
  border: 1px solid var(--garis); border-radius: var(--r-sm); background: var(--surface); color: var(--teks);
}
.abd-otp__jeda { font-size: .82rem; color: var(--teks-lembut); }
.abd-otp__catatan { margin: 0; padding-left: 18px; font-size: .88rem; color: var(--teks-lembut); display: grid; gap: 4px; }

/* ---------- City Tour ---------- */
.abd-ct-kursi {
  display: grid; gap: 10px; margin-bottom: 24px; padding: 16px 18px;
  background: var(--surface); border: 1px solid var(--garis); border-radius: var(--r-md);
}
.abd-ct-kursi__angka { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.abd-ct-kursi__angka b { font-size: 2rem; line-height: 1; color: var(--hijau-utama); font-variant-numeric: tabular-nums; }
.abd-ct-kursi__angka span { color: var(--teks-lembut); font-size: .92rem; }
.abd-ct-kursi__bilah { height: 10px; border-radius: 99px; background: rgba(127, 140, 134, .22); overflow: hidden; }
.abd-ct-kursi__bilah span { display: block; height: 100%; border-radius: inherit; background: var(--grad-hijau); }
.abd-ct-kursi p { margin: 0; font-size: .88rem; color: var(--teks-lembut); }
.abd-ct-form { padding: clamp(18px, 3vw, 28px); background: var(--surface); border: 1px solid var(--garis); border-top: 4px solid var(--emas); border-radius: var(--r-lg); }
.abd-ct-form__judul { font-size: 1.15rem; margin: 0 0 16px; }
.abd-ct-form select { width: 100%; }
.abd-ct-rute { margin: 2px 0 0; padding-left: 20px; display: grid; gap: 2px; }
.abd-daftar-selesai--cadangan { border-color: var(--emas); }
.abd-ct-grup { display: grid; gap: 10px; margin: 14px 0; padding: 14px; border-radius: var(--r-md); background: rgba(37, 211, 102, .1); border: 1px solid rgba(37, 211, 102, .45); }
.abd-ct-grup p { margin: 0; }
.abd-ct-grup small { font-size: .82rem; color: var(--teks-lembut); }
.abd-ct-kursi__cadangan b { color: var(--emas-terang, #F2B01E); font-variant-numeric: tabular-nums; }

/* ---------- Registrasi mitra ---------- */
.abd-mitra-tema { font-weight: 400; font-style: italic; color: var(--teks-lembut); }
.abd-mitra-agenda { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 10px; font-weight: 400; font-size: .9rem; }
.abd-mitra-agenda b { font-weight: 700; }

.abd-karcis-onsite { margin-bottom: 24px; padding: 18px 20px; border: 1px solid var(--emas); border-radius: var(--r-md); background: rgba(242, 176, 30, .08); }
.abd-karcis-onsite h2 { font-size: 1.2rem; margin: 0 0 6px; }
.abd-karcis-onsite p { margin: 0; color: var(--teks-lembut); }

/* ---------- Denah Expo interaktif ---------- */
.abd-denah { --lantai: #e9eeeb; --dinding: #1c2a23; --panggung: #d3dbd6; --meja: #ffffff; --tiang: #2b3a32; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .abd-denah { --lantai: #17241d; --dinding: #9fb4a7; --panggung: #22342a; --meja: #0f1a14; --tiang: #6f8578; } }
:root[data-theme="dark"] .abd-denah { --lantai: #17241d; --dinding: #9fb4a7; --panggung: #22342a; --meja: #0f1a14; --tiang: #6f8578; }

.abd-denah__alat { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.abd-denah__cari { flex: 1 1 320px; position: relative; display: flex; align-items: center; min-width: 0; }
.abd-denah__cari svg { position: absolute; left: 14px; color: var(--teks-lembut); pointer-events: none; }
.abd-denah__cari input {
  width: 100%; min-height: 48px; padding: 10px 130px 10px 42px; font: inherit;
  border: 1px solid var(--garis); border-radius: 999px; background: var(--surface); color: var(--teks);
  box-shadow: 0 6px 18px -12px rgba(6, 64, 42, .35);
}
.abd-denah__cari input:focus { outline: none; border-color: var(--hijau-utama); box-shadow: 0 0 0 3px rgba(18, 140, 60, .18); }
.abd-denah__hasil { position: absolute; right: 16px; font-size: .8rem; color: var(--teks-lembut); pointer-events: none; }
.abd-denah__zoom { display: inline-flex; border: 1px solid var(--garis); border-radius: 999px; overflow: hidden; background: var(--surface); }
.abd-denah__zoom button { width: 46px; height: 46px; border: 0; background: transparent; color: var(--teks); font-size: 1.15rem; font-weight: 700; cursor: pointer; }
.abd-denah__zoom button + button { border-left: 1px solid var(--garis); }
.abd-denah__zoom button:hover { background: var(--hijau-lembut); color: var(--hijau-atas-lembut); }

.abd-denah__legenda { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.abd-denah__topik {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--garis); background: var(--surface); color: var(--teks); font-size: .82rem; font-weight: 600; line-height: 1.2;
  transition: border-color .15s, background .15s;
}
.abd-denah__topik i { width: 12px; height: 12px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.abd-denah__topik small { color: var(--teks-lembut); font-weight: 600; }
.abd-denah__topik:hover { border-color: var(--hijau-daun); }
.abd-denah__topik[aria-pressed="true"] { background: var(--hijau-lembut); border-color: var(--hijau-utama); color: var(--hijau-atas-lembut); }

.abd-denah__tata { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 18px; align-items: start; }
/* Kamera: kanvas bertinggi tetap; viewBox SVG diatur JavaScript.
   touch-action: none — geser & cubit ditangani peta, bukan halaman. */
.abd-denah__kanvas {
  position: relative; overflow: hidden; height: clamp(440px, 74vh, 860px); border-radius: var(--r-lg); border: 1px solid var(--garis);
  background: radial-gradient(circle at 1px 1px, rgba(18, 140, 60, .12) 1px, transparent 0) 0 0 / 18px 18px, var(--surface);
  touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none;
}
.abd-denah__kanvas.is-seret { cursor: grabbing; }
.abd-denah__peta { display: block; width: 100%; height: 100%; }
.abd-denah__tip {
  position: absolute; left: 0; top: 0; z-index: 3; max-width: 260px; padding: 9px 12px; pointer-events: none;
  display: grid; gap: 2px; border-radius: 12px; background: rgba(12, 28, 20, .94); color: #fff;
  box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .5); font-size: .82rem; line-height: 1.3;
}
.abd-denah__tip[hidden] { display: none; }
.abd-denah__tip b { display: flex; align-items: center; gap: 6px; font: 800 .95rem/1 ui-monospace, Consolas, monospace; }
.abd-denah__tip b::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--warna-topik); box-shadow: inset 0 0 0 1px rgba(255,255,255,.4); }
.abd-denah__tip span { font-weight: 700; }
.abd-denah__tip small { color: #b9d8c4; }
.abd-denah__petunjuk {
  position: absolute; left: 12px; bottom: 12px; z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; pointer-events: none;
  background: rgba(12, 28, 20, .78); color: #fff; font-size: .78rem; transition: opacity .4s;
}
.abd-denah__petunjuk.is-hilang { opacity: 0; }

.denah-lantai { fill: var(--lantai); stroke: var(--dinding); stroke-width: 14; stroke-linejoin: round; }
.denah-panggung { fill: var(--panggung); stroke: var(--dinding); stroke-width: 5; }
.denah-pintu { stroke: var(--hijau-utama); stroke-width: 12; stroke-dasharray: 20 16; }
.denah-label { fill: var(--teks-lembut); font-size: 38px; font-weight: 800; text-anchor: middle; letter-spacing: 1px; }
.denah-label--pintu { fill: var(--hijau-utama); font-size: 30px; }
.denah-tiang { fill: var(--tiang); }
.denah-kursi { fill: #5f9a3c; stroke: #2f5a1c; stroke-width: 1.5; }
.denah-nostan { fill: var(--teks); font-size: 13px; font-weight: 800; text-anchor: middle; letter-spacing: .3px; }
.denah-booth { cursor: pointer; outline: none; }
.denah-booth rect { stroke: rgba(0, 0, 0, .35); stroke-width: 1.6; transition: transform .15s ease, filter .15s ease, opacity .2s; transform-box: fill-box; transform-origin: center; }
.denah-booth text { font-size: 14px; font-weight: 800; text-anchor: middle; pointer-events: none; transition: opacity .2s; }
.denah-booth:hover rect, .denah-booth:focus-visible rect { transform: scale(1.12); filter: drop-shadow(0 2px 3px rgba(0,0,0,.4)); }
.denah-booth:focus-visible rect { stroke: var(--hijau-utama); stroke-width: 4; }
.denah-booth.is-aktif rect { transform: scale(1.15); stroke: #F2B01E; stroke-width: 5; filter: drop-shadow(0 0 10px rgba(242, 176, 30, .95)); }
.denah-booth.is-kosong { cursor: default; }
.denah-booth.is-kosong rect { fill: none; stroke-dasharray: 4 4; }
.is-saring .denah-booth.is-redup rect, .is-saring .denah-booth.is-redup text { opacity: .15; }
.is-saring .denah-kursi { opacity: .35; }
.is-saring .denah-booth:not(.is-redup) rect { stroke: var(--teks); stroke-width: 3; }
@media (prefers-reduced-motion: reduce) { .denah-booth rect { transition: none; } }

.abd-denah__panel {
  position: sticky; top: calc(var(--header-h, 72px) + 16px); min-height: 360px; padding: 20px;
  background: var(--surface); border: 1px solid var(--garis); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -26px rgba(6, 64, 42, .45); outline: none;
}
.abd-denah__kosong { display: grid; justify-items: center; text-align: center; gap: 8px; padding: 34px 6px; color: var(--teks-lembut); }
.abd-denah__kosong[hidden], .abd-denah__profil[hidden] { display: none; }
.abd-denah__kosong svg { color: var(--hijau-utama); }
.abd-denah__kosong strong { color: var(--teks); font-size: 1.1rem; }
.abd-denah__kosong p { margin: 0; font-size: .92rem; }
.abd-denah__statistik { margin-top: 10px !important; font-size: .85rem !important; }
.abd-denah__statistik b { color: var(--hijau-utama); }

.abd-denah__profil { display: grid; gap: 10px; animation: denah-masuk .25s ease; }
@keyframes denah-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .abd-denah__profil { animation: none; } }
.abd-denah__kepala {
  display: flex; align-items: center; gap: 10px; margin: -20px -20px 4px; padding: 16px 20px; border-radius: var(--r-lg) var(--r-lg) 0 0;
  background: linear-gradient(120deg, #06402A, #0E7A34); color: #fff; border-bottom: 4px solid var(--warna-topik, #F2B01E);
}
.abd-denah__kode { font: 900 1.6rem/1 ui-monospace, Consolas, monospace; letter-spacing: .5px; }
.abd-denah__meja { padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: .8rem; font-weight: 700; }
.abd-denah__tutup { margin-left: auto; width: 34px; height: 34px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; }
.abd-denah__tutup:hover { background: rgba(255,255,255,.28); }
.abd-denah__poster { width: 100%; max-height: 220px; object-fit: cover; border-radius: var(--r-md); border: 1px solid var(--garis); }
.abd-denah__chip {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 8px; border-radius: 999px;
  background: var(--hijau-lembut); color: var(--hijau-atas-lembut); font-size: .78rem; font-weight: 700;
}
.abd-denah__chip::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--warna-topik); box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.abd-denah__ormawa { margin: 0; font-size: 1.15rem; line-height: 1.3; }
.abd-denah__pt { margin: -4px 0 0; color: var(--hijau-utama); font-weight: 700; font-size: .9rem; }
.abd-denah__judul { margin: 0; font-size: .9rem; color: var(--teks-lembut); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.abd-denah__lokasi { margin: 0; font-size: .85rem; color: var(--teks-lembut); }
.abd-denah__tetangga {
  display: grid; gap: 2px; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit;
  border: 1px dashed var(--garis); border-radius: var(--r-md); background: transparent; color: var(--teks);
}
.abd-denah__tetangga small { color: var(--teks-lembut); font-size: .75rem; }
.abd-denah__tetangga span { display: flex; align-items: center; gap: 7px; font-size: .86rem; font-weight: 600; }
.abd-denah__tetangga i { flex: none; width: 10px; height: 10px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.abd-denah__tetangga:hover { border-color: var(--hijau-daun); background: var(--hijau-lembut); }

.abd-denah__daftar { margin-top: 26px; }
.abd-denah__daftar summary { cursor: pointer; font-weight: 700; color: var(--hijau-utama); }
.abd-stan__item b i { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 3px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }

/* HP: panel menjadi lembar bawah saat booth dipilih. */
@media (max-width: 900px) {
  .abd-denah__tata { grid-template-columns: 1fr; }
  .abd-denah__kanvas { height: clamp(380px, 62vh, 620px); }
  .abd-denah__panel { position: static; min-height: 0; }
  .abd-denah.is-terbuka .abd-denah__panel {
    position: fixed; top: auto; left: 0; right: 0; bottom: 0; z-index: 200; max-height: 72vh; overflow-y: auto;
    border-radius: 22px 22px 0 0; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    box-shadow: 0 -18px 40px -10px rgba(0,0,0,.35); animation: denah-naik .25s ease;
  }
  .abd-denah.is-terbuka .abd-denah__kepala { border-radius: 22px 22px 0 0; }
  .abd-denah__cari input { padding-right: 16px; }
  .abd-denah__hasil { top: calc(100% + 4px); right: 14px; }
}
@keyframes denah-naik { from { transform: translateY(40px); opacity: .4; } to { transform: none; opacity: 1; } }