/*
  HAPAKAT komponen, versi 1.0 (31 Oktober 2026)
  Pustaka hd- dalam bahasa visual x.ai: monokrom, datar, kontrol berbentuk pil, kartu radius-lg.
  Biru BI hanya untuk fokus, pilihan, tautan, dan angka kunci. Aksi utama tetap tinta.
  Dibangun hanya dari tokens.css. Tidak ada nilai warna mentah di berkas ini.
*/

/* ===== Dasar ===== */
[class^="hd-"], [class*=" hd-"] { box-sizing: border-box; }
[class^="hd-"] *, [class*=" hd-"] * { box-sizing: border-box; }

:where([class^="hd-"], [class*=" hd-"]):focus-visible {
  outline: var(--focus-width) solid var(--focus);
  outline-offset: var(--focus-offset);
}

.hd-sr-only {
  position: absolute !important;
  width: var(--border-width); height: var(--border-width);
  margin: calc(var(--border-width) * -1); padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hd-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-mono { font-family: var(--font-mono) !important; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.hd-muted { color: var(--ink-60); }

.hd-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.hd-col { display: flex; flex-direction: column; gap: var(--space-3); }
.hd-col--tight { gap: var(--space-2); }
.hd-divider { border: 0; border-top: var(--border-width) solid var(--border-hairline); margin: 0; }

/* ===== Ikon: grid 24, garis tipis, ujung dan sambungan bulat ===== */
.hd-icon {
  width: var(--icon-md); height: var(--icon-md);
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
}
.hd-icon--xs { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
.hd-icon--sm { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke-sm); }
.hd-icon--lg { width: var(--icon-lg); height: var(--icon-lg); }
.hd-icon--tile { width: var(--icon-tile); height: var(--icon-tile); }
.hd-icon--xl { width: var(--icon-xl); height: var(--icon-xl); }

/* ===== Tombol (Button x.ai) ===== */
.hd-btn {
  --hd-overlay: transparent;
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--space-1-5);
  min-height: var(--size-btn-md);
  padding: 0 calc(var(--space-4) + var(--space-0-5));
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--surface-button);
  background-image: linear-gradient(var(--hd-overlay), var(--hd-overlay));
  color: var(--ink);
  font: var(--text-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration-fast) var(--ease-standard), box-shadow var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard);
}
/* Area sentuh minimum 44px walau tampilannya lebih kecil. */
.hd-btn::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  min-width: var(--touch-min); min-height: var(--touch-min);
  transform: translate(-50%, -50%);
}
.hd-btn:hover { --hd-overlay: var(--state-hover); }
.hd-btn:active { --hd-overlay: var(--state-press); transform: scale(0.98); }
.hd-btn .hd-icon { width: var(--icon-sm); height: var(--icon-sm); }

.hd-btn--primary { background-color: var(--ink); color: var(--on-ink); }
.hd-btn--primary:hover, .hd-btn--primary:active { --hd-overlay: var(--state-hover-dark); }
.hd-btn--secondary { background-color: var(--surface-button); color: var(--ink); }
.hd-btn--ghost { background-color: var(--surface); color: var(--ink); box-shadow: inset 0 0 0 var(--border-width) var(--border-hairline); }
.hd-btn--text {
  min-height: var(--touch-min);
  padding: 0;
  background-color: transparent;
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: var(--border-width);
  text-underline-offset: var(--space-1);
}
.hd-btn--text:hover { --hd-overlay: transparent; color: var(--link-hover); }

.hd-btn--sm { min-height: var(--size-btn-sm); padding: 0 var(--space-3); }
.hd-btn--md { min-height: var(--size-btn-md); padding: 0 calc(var(--space-4) + var(--space-0-5)); } /* 18px seperti md x.ai */
.hd-btn--lg { min-height: var(--size-btn-lg); padding: 0 var(--space-5); }
.hd-btn--xl { min-height: var(--size-cta); padding: 0 var(--space-6); font: var(--text-title-sm); }
.hd-btn--block { display: flex; width: 100%; }
.hd-btn--icon { padding: 0; width: var(--size-btn-md); }
.hd-btn--icon.hd-btn--lg { width: var(--size-btn-lg); }
.hd-btn--icon .hd-icon { width: var(--icon-lg); height: var(--icon-lg); }
.hd-btn--icon.hd-btn--ghost { box-shadow: none; background-color: transparent; }

.hd-btn:disabled,
.hd-btn[aria-disabled="true"] {
  --hd-overlay: transparent;
  background-color: var(--disabled-bg);
  color: var(--disabled-fg);
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}
a.hd-btn[aria-disabled="true"] { pointer-events: none; }

/* Memuat: label diakhiri "…", tombol nonaktif, ada putaran kecil. */
.hd-btn[aria-busy="true"] { cursor: progress; }
.hd-btn[aria-busy="true"]::before {
  content: "";
  width: var(--icon-sm); height: var(--icon-sm);
  border: var(--focus-width) solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-pill);
  animation: hd-spin var(--duration-slow) linear infinite;
}
@keyframes hd-spin { to { transform: rotate(360deg); } }

/* ===== Badge (versi biru dari chip "New" x.ai) ===== */
.hd-badge {
  display: inline-flex; align-items: center; gap: var(--space-1);
  min-height: var(--size-badge);
  padding: 0 var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent-tint);
  color: var(--accent);
  font: var(--text-badge);
  white-space: nowrap;
  vertical-align: middle;
}
.hd-badge .hd-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
.hd-badge--lg { min-height: var(--size-badge-lg); padding: 0 var(--space-3); font: var(--text-caption); font-weight: var(--weight-medium); }
.hd-badge--success { background: var(--success-bg); color: var(--success-fg); }
.hd-badge--warning { background: var(--warning-bg); color: var(--warning-fg); }
.hd-badge--danger { background: var(--danger-bg); color: var(--danger-fg); }
.hd-badge--neutral { background: var(--ink-06); color: var(--ink); }
.hd-badge--info { background: var(--info-bg); color: var(--info-fg); }
.hd-badge--solid { background: var(--accent); color: var(--on-blue); }
.hd-badge--overlay { background: var(--surface); color: var(--success-fg); }

/* ===== Pil pengumuman (AnnouncementPill x.ai) ===== */
.hd-announce {
  display: inline-flex; align-items: center; gap: var(--space-2);
  max-width: 100%;
  min-height: var(--touch-min);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-3);
  border: var(--border-width) solid var(--ink-08);
  border-radius: var(--radius-pill);
  backdrop-filter: blur(var(--blur-pill));
  -webkit-backdrop-filter: blur(var(--blur-pill));
  color: var(--ink);
  font: var(--text-link-sm);
  text-decoration: none;
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.hd-announce:hover { border-color: var(--ink-20); }
.hd-announce__text { min-width: 0; }
.hd-announce__title { font-weight: var(--weight-medium); }
.hd-announce__dot { color: var(--ink-20); padding: 0 var(--space-1); }
.hd-announce__chip {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--size-chip-arrow); height: var(--size-chip-arrow);
  border-radius: var(--radius-pill);
  background: var(--ink-04);
}
.hd-announce__chip .hd-icon { width: var(--icon-xs); height: var(--icon-xs); }

/* ===== Tab (SegmentedTabs x.ai) ===== */
.hd-tabs { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); }
.hd-tab {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--size-btn-nav);
  padding: 0 var(--space-3);
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--ink-60);
  font: var(--text-label);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard);
}
.hd-tab::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 100%; height: 100%;
  min-width: var(--touch-min); min-height: var(--touch-min);
  transform: translate(-50%, -50%);
}
.hd-tab:hover { color: var(--ink); background: var(--state-hover); }
.hd-tab[aria-selected="true"],
.hd-tab[aria-current="page"] { background: var(--selected-tint); color: var(--selected); }

/* ===== Kartu ===== */
.hd-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  color: var(--ink);
}
.hd-card--outline { background: var(--surface); box-shadow: inset 0 0 0 var(--border-width) var(--border-hairline); }
.hd-card--compact { padding: var(--space-4); }
.hd-card__title { margin: 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-card__text { margin: 0; font: var(--text-body-sm); color: var(--ink-60); }

/* ===== Stat (Stat x.ai) ===== */
.hd-stat { display: flex; flex-direction: column; gap: var(--space-2); }
.hd-stat__value { font: var(--text-stat); letter-spacing: var(--tracking-stat); font-variant-numeric: tabular-nums; }
.hd-stat__label { font: var(--text-label); color: var(--ink-60); }
.hd-stat--sm { gap: 0; }
.hd-stat--sm .hd-stat__value { font: var(--text-label); letter-spacing: 0; }
.hd-stat--sm .hd-stat__label { font: var(--text-caption); color: var(--ink-60); }

/* ===== Lockup merek ===== */
.hd-brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  color: var(--ink);
  font: var(--text-wordmark);
  letter-spacing: var(--tracking-wordmark);
  text-decoration: none;
}
.hd-brand__mark { display: block; width: var(--icon-lg); height: var(--icon-lg); flex: none; }
.hd-brand--lg { flex-wrap: wrap; gap: var(--space-4); font: var(--text-wordmark-lg); }
.hd-brand--lg .hd-brand__mark { width: var(--size-tile); height: var(--size-tile); }
.hd-brand__context { font: var(--text-body-sm); letter-spacing: 0; color: var(--ink-60); }

/* ===== Avatar ===== */
.hd-avatar {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--size-avatar); height: var(--size-avatar);
  padding: 0;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--surface-button);
  color: var(--ink);
  font: var(--text-nav);
  text-decoration: none;
}
a.hd-avatar::after, button.hd-avatar::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: var(--touch-min); height: var(--touch-min);
  transform: translate(-50%, -50%);
}
a.hd-avatar, button.hd-avatar { cursor: pointer; }
a.hd-avatar:hover, button.hd-avatar:hover { background: var(--ink-10); }

/* ===== Kerangka layar aplikasi ===== */
.hd-app {
  display: flex; flex-direction: column;
  height: 100%;
  min-height: 0;
  background: var(--surface);
  color: var(--ink);
  font: var(--text-body);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
}
.hd-app__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-4) var(--space-5) var(--space-5);
}
.hd-app__body > * { flex-shrink: 0; }
.hd-app > * { flex-shrink: 0; }
.hd-app > .hd-app__body { flex-shrink: 1; }
.hd-app__body:focus-visible { outline-offset: calc(var(--focus-width) * -1); }

/* ===== Header aplikasi dengan sapaan ===== */
.hd-app-header {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-5) var(--space-5) var(--space-4);
  border-bottom: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.hd-app-header__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hd-app-header__hello { display: flex; flex-direction: column; gap: var(--space-0-5); }
.hd-app-header__greeting { margin: 0; font: var(--text-heading-2); letter-spacing: var(--tracking-heading-2); }
.hd-app-header__role { margin: 0; font: var(--text-body-sm); color: var(--ink-60); }

/* ===== Bar judul layar tugas ===== */
.hd-appbar {
  display: flex; align-items: center; gap: var(--space-2);
  min-height: var(--nav-height);
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.hd-appbar__text { display: flex; flex-direction: column; min-width: 0; }
.hd-appbar__title { margin: 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-appbar__subtitle { margin: 0; font: var(--text-caption); color: var(--ink-60); }

/* ===== Header status (mis. SPJ siap diperiksa) ===== */
.hd-status-hero {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-3) var(--space-3) var(--space-5);
  border-bottom: var(--border-width) solid var(--border-hairline);
}
.hd-status-hero__row { display: flex; align-items: center; gap: var(--space-4); padding: 0 var(--space-2); }
.hd-status-hero__disc {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--size-disc); height: var(--size-disc);
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-fg);
}
.hd-status-hero__disc .hd-icon { width: var(--icon-xl); height: var(--icon-xl); }
.hd-status-hero__title { margin: 0; font: var(--text-heading-2); letter-spacing: var(--tracking-heading-2); }
.hd-status-hero__subtitle { margin: 0; font: var(--text-body-sm); color: var(--ink-60); }

/* ===== Kartu limit KKI dan meter ===== */
/* Kotak limit memakai kulit kartu KKI: biru berkilau, pita motif di kanan (gambar pita dibalik). */
.hd-limit-card {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--kki-sheen);
  box-shadow: var(--shadow-kki);
  color: var(--on-blue);
}
.hd-limit-card::before {
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; z-index: -1;
  aspect-ratio: var(--ratio-kki-band);
  background: var(--kki-band) left top / 100% 100% no-repeat;
  transform: scaleX(-1);
}
.hd-limit-card__top { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); }
.hd-limit-card__mark { display: flex; align-items: baseline; gap: var(--space-1-5); font: var(--text-kki-mark); }
.hd-limit-card__mark small { font: var(--text-micro); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; }
.hd-limit-card__card { font: var(--text-code-sm); white-space: nowrap; }
.hd-limit-card__label { margin-top: var(--space-1); font: var(--text-body-sm); color: var(--on-ink-80); }
.hd-limit-card__amount {
  font: var(--text-heading-1);
  letter-spacing: var(--tracking-heading-1);
  font-variant-numeric: tabular-nums;
}
.hd-limit-card__caption { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font: var(--text-caption); color: var(--on-ink-80); }
.hd-limit-card .hd-meter { background: var(--on-ink-20); }
.hd-limit-card .hd-meter__fill { fill: var(--on-blue); }

/* Meter (alias: hd-progress): div role="meter" (WAI-ARIA 1.2) dengan isi SVG. Lebar isi ditulis sebagai atribut SVG.
   Elemen <meter> asli tidak dipakai karena bagian dalamnya tidak bisa diberi tinggi penuh secara konsisten di Chrome. */
.hd-meter, .hd-progress {
  display: block;
  width: 100%;
  height: var(--progress-height);
  border-radius: var(--radius-pill);
  background: var(--chart-track);
  overflow: hidden;
}
.hd-meter__bar, .hd-progress__bar { display: block; width: 100%; height: 100%; }
.hd-meter__fill, .hd-progress__fill { fill: var(--accent); }
.hd-meter--low .hd-meter__fill { fill: var(--warning-fg); }
.hd-meter--bar { height: var(--bar-height); border-radius: var(--radius-xs); }
.hd-meter--bar .hd-meter__fill { fill: var(--chart-bar); }
.hd-meter--muted .hd-meter__fill { fill: var(--chart-other); }

/* ===== Pencarian ===== */
.hd-search { position: relative; }
.hd-search__icon {
  position: absolute; left: var(--space-4); top: 50%;
  transform: translateY(-50%);
  color: var(--ink-60);
  pointer-events: none;
}
.hd-search__input {
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-4) 0 calc(var(--space-4) + var(--icon-md) + var(--space-2));
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: var(--text-body);
  -webkit-appearance: none;
  appearance: none;
}
.hd-search__input::placeholder { color: var(--ink-60); }
.hd-search__input:hover { border-color: var(--ink-60); }

/* ===== Field formulir ===== */
.hd-field { display: flex; flex-direction: column; gap: var(--space-1-5); min-width: 0; }
.hd-field__label { font: var(--text-label); color: var(--ink); }
.hd-field__optional { font: var(--text-caption); color: var(--ink-60); }
.hd-field__hint { margin: 0; font: var(--text-link-sm); color: var(--ink-60); }
.hd-field__error {
  display: flex; align-items: flex-start; gap: var(--space-1-5);
  margin: 0;
  font: var(--text-body-sm);
  color: var(--danger-fg);
}
.hd-field__error .hd-icon { width: var(--icon-sm); height: var(--icon-sm); margin-top: var(--space-0-5); }
.hd-field__control { position: relative; }
.hd-field__chevron {
  position: absolute; right: var(--space-4); top: 50%;
  transform: translateY(-50%);
  color: var(--ink-60);
  pointer-events: none;
}

.hd-input {
  width: 100%;
  min-height: var(--size-control);
  padding: 0 var(--space-4);
  border: var(--border-width) solid var(--border-control);
  border-radius: var(--radius-pill);
  background: var(--surface);
  color: var(--ink);
  font: var(--text-body);
  -webkit-appearance: none;
  appearance: none;
}
.hd-input::placeholder { color: var(--ink-60); }
.hd-input:hover { border-color: var(--ink-60); }
.hd-input--select { padding-right: calc(var(--space-4) + var(--icon-md) + var(--space-2)); cursor: pointer; }
.hd-input--multiline { min-height: calc(var(--size-control) * 2); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); resize: vertical; }
.hd-input[aria-invalid="true"] { border-color: var(--danger-fg); box-shadow: inset 0 0 0 var(--border-width) var(--danger-fg); }
.hd-input:disabled { background: var(--disabled-bg); color: var(--disabled-fg); border-color: var(--border-hairline); cursor: not-allowed; }

.hd-check {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: var(--touch-min);
  font: var(--text-label);
  color: var(--ink);
  cursor: pointer;
}
.hd-check input {
  flex: none;
  width: var(--icon-md); height: var(--icon-md);
  margin: 0;
  accent-color: var(--accent);
  cursor: pointer;
}
.hd-check input:focus-visible { outline: var(--focus-width) solid var(--focus); outline-offset: var(--focus-offset); }

/* ===== Chip filter ===== */
/* Padding seluas cincin fokus supaya cincin chip tidak terpotong oleh wadah gulir; margin negatif menjaga chip tetap sejajar. */
.hd-chip-row {
  --hd-ring: calc(var(--focus-width) + var(--focus-offset));
  display: flex; gap: var(--space-2);
  overflow-x: auto; scrollbar-width: none;
  padding: var(--hd-ring);
  margin-inline: calc(var(--hd-ring) * -1);
}
.hd-chip-row::-webkit-scrollbar { display: none; }
.hd-chip-row--bleed { margin-inline: calc(var(--space-5) * -1); padding-inline: var(--space-5); }
.hd-chip {
  --hd-overlay: transparent;
  display: inline-flex; align-items: center; gap: var(--space-1-5);
  flex: none;
  min-height: var(--touch-min);
  padding: 0 var(--space-4);
  border: 0;
  border-radius: var(--radius-pill);
  background-color: var(--surface-button);
  background-image: linear-gradient(var(--hd-overlay), var(--hd-overlay));
  color: var(--ink);
  font: var(--text-label);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-standard), color var(--duration-base) var(--ease-standard);
}
.hd-chip:hover { --hd-overlay: var(--state-hover); }
.hd-chip:active { --hd-overlay: var(--state-press); }
.hd-chip[aria-pressed="true"] { background-color: var(--selected); color: var(--on-selected); }
.hd-chip[aria-pressed="true"]:hover { --hd-overlay: var(--state-hover-dark); }
.hd-chip__check { width: var(--icon-sm); height: var(--icon-sm); stroke-width: var(--icon-stroke-bold); }
.hd-chip[aria-pressed="false"] .hd-chip__check { display: none; }
.hd-chip:disabled { background-color: var(--disabled-bg); color: var(--disabled-fg); cursor: not-allowed; }

/* ===== Judul daftar dengan jumlah ===== */
.hd-list-head { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.hd-list-head__title { margin: 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-list-head__count { font: var(--text-body-sm); color: var(--ink-60); white-space: nowrap; }

.hd-list { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }

/* ===== Tile ikon ===== */
.hd-tile {
  display: inline-flex; align-items: center; justify-content: center;
  flex: none;
  width: var(--size-tile); height: var(--size-tile);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink);
}
.hd-tile .hd-icon { width: var(--icon-tile); height: var(--icon-tile); }
.hd-tile--sm { width: var(--size-tile-sm); height: var(--size-tile-sm); border-radius: var(--radius-sm); }
.hd-tile--sm .hd-icon { width: var(--icon-md); height: var(--icon-md); }

/* ===== Kartu produk ===== */
.hd-product-card {
  display: flex; gap: var(--space-3);
  padding: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: inset 0 0 0 var(--border-width) var(--border-hairline);
  color: var(--ink);
  text-decoration: none;
  transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
a.hd-product-card:hover { box-shadow: inset 0 0 0 var(--border-width) var(--ink-20); }
a.hd-product-card:active { background: var(--surface-card); }
.hd-product-card .hd-tile { background-color: var(--surface-card); }
.hd-product-card__body { display: flex; flex-direction: column; gap: var(--space-0-5); flex: 1; min-width: 0; }
.hd-product-card__cat { font: var(--text-caption); color: var(--ink-60); }
.hd-product-card__name { font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-product-card__seller { font: var(--text-body-sm); color: var(--ink-60); }
.hd-product-card__desc { font: var(--text-body-sm); color: var(--ink); }
.hd-product-card__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-1) var(--space-3); margin-top: var(--space-1); }
.hd-product-card--unavailable { background: var(--surface-card); box-shadow: none; }
.hd-product-card--unavailable .hd-product-card__name,
.hd-product-card--unavailable .hd-price__amount { color: var(--ink-60); }

.hd-price { display: inline-flex; align-items: baseline; gap: var(--space-1); }
.hd-price__amount { font: var(--text-title-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-price__unit { font: var(--text-body-sm); color: var(--ink-60); white-space: nowrap; }

/* ===== Status verifikasi NIB dan NPWP ===== */
.hd-verified {
  display: inline-flex; align-items: center; gap: var(--space-1);
  font: var(--text-caption);
  font-weight: var(--weight-medium);
  color: var(--success-fg);
}
.hd-verified .hd-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
.hd-verified--pending { color: var(--warning-fg); }
.hd-verified--unverified { color: var(--danger-fg); }

/* ===== Pengatur jumlah ===== */
.hd-qty { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.hd-qty__label { font: var(--text-label); }
.hd-qty__control { display: inline-flex; align-items: center; gap: var(--space-1-5); }
.hd-qty__value {
  min-width: var(--size-qty-value);
  text-align: center;
  font: var(--text-title-sm);
  font-variant-numeric: tabular-nums;
}

/* ===== Daftar keterangan (dl) ===== */
.hd-dl { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; }
.hd-dl > div { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.hd-dl dt { font: var(--text-caption); color: var(--ink-60); }
.hd-dl dd { margin: 0; font: var(--text-label); overflow-wrap: anywhere; }
.hd-dl--grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3) var(--space-4); }
.hd-dl--inline > div { flex-direction: row; justify-content: space-between; align-items: baseline; gap: var(--space-3); }
.hd-dl--inline dt { font: var(--text-body-sm); }
.hd-dl--inline dd { text-align: right; }
.hd-dl__emph { font: var(--text-title-sm) !important; font-variant-numeric: tabular-nums; }

/* ===== Rincian biaya ===== */
.hd-summary { display: flex; flex-direction: column; gap: var(--space-3); }
.hd-summary__title { margin: 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-summary__rows { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; }
.hd-summary__row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); }
.hd-summary__row dt { font: var(--text-body-sm); color: var(--ink-60); }
.hd-summary__row dd { margin: 0; font: var(--text-label); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.hd-summary__row--total { margin-top: var(--space-1); padding-top: var(--space-3); border-top: var(--border-width) solid var(--border-hairline); }
.hd-summary__row--total dt { font: var(--text-label); color: var(--ink); }
.hd-summary__row--total dd { font: var(--text-title-sm); }

/* ===== Tabel pajak ===== */
.hd-tax-table { width: 100%; margin: 0; border-collapse: collapse; font: var(--text-body-sm); }
.hd-tax-table caption { padding-bottom: var(--space-2); text-align: left; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--ink); }
.hd-tax-table th, .hd-tax-table td { padding: var(--space-2) 0; border-bottom: var(--border-width) solid var(--ink-06); vertical-align: baseline; }
.hd-tax-table th { text-align: left; font-weight: var(--weight-regular); color: var(--ink-60); padding-right: var(--space-4); }
.hd-tax-table td { text-align: right; font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hd-tax-table tfoot th, .hd-tax-table tfoot td { border-bottom: 0; border-top: var(--border-width) solid var(--border-hairline); padding-top: var(--space-3); color: var(--ink); font-weight: var(--weight-medium); }
.hd-tax-table tfoot td { font: var(--text-title-sm); }

/* ===== Kartu pembayaran KKI ===== */
.hd-kki-card {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-4);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.hd-kki-card__text { display: flex; flex-direction: column; min-width: 0; }
.hd-kki-card__eyebrow { font: var(--text-caption); color: var(--ink-60); }
.hd-kki-card__title { font: var(--text-label); }
.hd-kki-card__meta { font: var(--text-caption); color: var(--ink-60); }

/* ===== Wajah kartu KKI ===== */
/* Semua ukuran di dalam kartu relatif terhadap lebar kartu (cqw), jadi satu markup dipakai penuh dan mini. */
.hd-kki-face {
  position: relative; container-type: inline-size; overflow: hidden;
  aspect-ratio: var(--ratio-card);
  border-radius: var(--radius-lg);
  background: var(--kki-band) left top / auto 100% no-repeat, var(--kki-sheen);
  box-shadow: var(--shadow-kki);
  color: var(--on-blue);
}
.hd-kki-face > * { position: absolute; }
.hd-kki-face small { display: block; font: var(--kki-text-small); letter-spacing: var(--tracking-wordmark); text-transform: uppercase; }
.hd-kki-face__mark { left: 6%; top: 9%; font: var(--kki-text-mark); }
.hd-kki-face__mark small { margin-top: 1.5cqw; }
.hd-kki-face__bank {
  right: 5%; top: 8%; width: 25%; height: 12%;
  display: flex; align-items: center; justify-content: center;
  border: var(--border-width) dashed var(--on-ink-80); border-radius: var(--radius-xs);
  font: var(--kki-text-small);
}
.hd-kki-face__chip { left: 47%; top: 38%; width: 11%; height: 13%; border-radius: var(--radius-xs); background: var(--on-ink-80); }
.hd-kki-face__number { left: 47%; top: 62%; font: var(--kki-text-number); }
.hd-kki-face__holder { left: 47%; top: 77%; font: var(--kki-text-name); text-transform: uppercase; }
.hd-kki-face__holder small { color: var(--on-ink-80); }
.hd-kki-face--thumb { flex: none; width: var(--size-kki-thumb); border-radius: var(--radius-xs); box-shadow: none; }
.hd-kki-face--thumb > :not(.hd-kki-face__mark, .hd-kki-face__chip), .hd-kki-face--thumb small { display: none; }

/* ===== Bar aksi bawah ===== */
.hd-footer-bar {
  position: sticky; bottom: 0;
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3) var(--space-5) var(--space-4);
  border-top: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.hd-footer-bar__hint { margin: 0; font: var(--text-caption); color: var(--ink-60); text-align: center; }

/* ===== Layar hasil ===== */
.hd-result {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
  padding: var(--space-8) var(--space-6);
  text-align: center;
}
.hd-result__disc {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-disc-lg); height: var(--size-disc-lg);
  border-radius: var(--radius-pill);
  background: var(--success-bg);
  color: var(--success-fg);
}
.hd-result__disc .hd-icon { width: var(--icon-xl); height: var(--icon-xl); }
.hd-result__title { margin: 0; font: var(--text-heading-2); letter-spacing: var(--tracking-heading-2); }
.hd-result__text { margin: 0; max-width: var(--measure-short); font: var(--text-body); color: var(--ink-60); }
.hd-result > .hd-card { width: 100%; text-align: left; }
.hd-result__actions { display: flex; flex-direction: column; gap: var(--space-2); width: 100%; margin-top: var(--space-2); }
.hd-result--danger .hd-result__disc { background: var(--danger-bg); color: var(--danger-fg); }

/* ===== Linimasa pesanan ===== */
.hd-timeline { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.hd-timeline__item {
  position: relative;
  display: grid; grid-template-columns: var(--size-marker) minmax(0, 1fr); column-gap: var(--space-3);
  margin: 0;
  padding-bottom: var(--space-4);
}
.hd-timeline__item::before {
  content: "";
  position: absolute; left: calc(var(--size-marker) / 2); top: var(--size-marker); bottom: 0;
  width: var(--border-width);
  transform: translateX(-50%);
  background: var(--border-hairline);
}
.hd-timeline__item:last-child { padding-bottom: 0; }
.hd-timeline__item:last-child::before { display: none; }
.hd-timeline__marker {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-marker); height: var(--size-marker);
  border-radius: var(--radius-pill);
  box-shadow: inset 0 0 0 var(--border-width) var(--ink-45);
  background: var(--surface);
  color: var(--on-ink);
}
.hd-timeline__marker .hd-icon { width: var(--icon-xs); height: var(--icon-xs); stroke-width: var(--icon-stroke-bold); }
.hd-timeline__text { display: flex; flex-direction: column; gap: var(--space-0-5); padding-top: var(--space-0-5); }
.hd-timeline__title { font: var(--text-label); }
.hd-timeline__time { font: var(--text-caption); color: var(--ink-60); font-variant-numeric: tabular-nums; }
.hd-timeline__item--done .hd-timeline__marker { background: var(--ink); box-shadow: none; }
.hd-timeline__item--current .hd-timeline__marker { box-shadow: inset 0 0 0 var(--selected-width) var(--accent); }
.hd-timeline__item--current .hd-timeline__marker::after {
  content: "";
  width: var(--space-2); height: var(--space-2);
  border-radius: var(--radius-pill);
  background: var(--accent);
}
.hd-timeline__item--current .hd-timeline__time { color: var(--warning-fg); font-weight: var(--weight-medium); }
.hd-timeline__item--upcoming .hd-timeline__title { color: var(--ink-60); font-weight: var(--weight-regular); }
.hd-timeline__item--failed .hd-timeline__marker { background: var(--danger-fg); box-shadow: none; }
.hd-timeline__item--failed .hd-timeline__time { color: var(--danger-fg); }

/* ===== Bukti foto serah terima ===== */
.hd-photo { display: flex; flex-direction: column; gap: var(--space-3); }
.hd-photo__empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: var(--photo-height);
  padding: var(--space-4);
  border: var(--focus-width) dashed var(--ink-20);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--ink-60);
  text-align: center;
}
.hd-photo__empty .hd-icon { width: var(--icon-xl); height: var(--icon-xl); }
.hd-photo__caption { margin: 0; font: var(--text-body-sm); color: var(--ink-60); }
.hd-photo__frame { position: relative; margin: 0; }
.hd-photo__image {
  display: block;
  width: 100%; height: var(--photo-height);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.hd-photo__frame > .hd-badge { position: absolute; left: var(--space-2); top: var(--space-2); }
.hd-photo__bg { fill: var(--term-bg); }
.hd-photo__table { fill: var(--term-rule); }
.hd-photo__box { fill: var(--surface-card); }
.hd-photo__lid { fill: var(--surface-button); }

.hd-meta { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font: var(--text-body-sm); color: var(--ink-60); }
.hd-meta li { display: flex; align-items: center; gap: var(--space-1-5); margin: 0; }
.hd-meta .hd-icon { width: var(--icon-sm); height: var(--icon-sm); }

/* ===== Baris dokumen SPJ ===== */
.hd-doc-row {
  --hd-overlay: transparent;
  display: flex; align-items: center; gap: var(--space-3);
  width: 100%;
  min-height: var(--size-row);
  padding: var(--space-2) var(--space-3);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--surface);
  background-image: linear-gradient(var(--hd-overlay), var(--hd-overlay));
  box-shadow: inset 0 0 0 var(--border-width) var(--border-hairline);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard);
}
.hd-doc-row:hover { --hd-overlay: var(--state-hover); }
.hd-doc-row[aria-pressed="true"], .hd-doc-row[aria-current="true"] {
  background-color: var(--selected-tint);
  box-shadow: inset 0 0 0 var(--selected-width) var(--selected);
}
.hd-doc-row__text { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.hd-doc-row__name { font: var(--text-label); }
.hd-doc-row__source { font: var(--text-caption); color: var(--ink-60); }
.hd-doc-row .hd-tile--sm { background: var(--surface-card); }

/* ===== Pratinjau dokumen ===== */
.hd-preview {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: var(--border-width) dashed var(--border-control);
  border-radius: var(--radius-lg);
}
.hd-preview__title { margin: 0; font: var(--text-label); }
.hd-preview__list { display: flex; flex-direction: column; gap: var(--space-1); margin: 0; padding-left: var(--space-5); font: var(--text-body-sm); }
.hd-preview__list > li { margin: 0; }

/* ===== Alert ===== */
.hd-alert {
  display: flex; align-items: flex-start; gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background: var(--info-bg);
  color: var(--ink);
}
.hd-alert > .hd-icon { color: var(--info-fg); width: var(--icon-md); height: var(--icon-md); margin-top: var(--space-0-5); }
.hd-alert__body { display: flex; flex-direction: column; gap: var(--space-0-5); min-width: 0; }
.hd-alert__title { margin: 0; font: var(--text-label); color: var(--info-fg); }
.hd-alert__text { margin: 0; font: var(--text-body-sm); }
.hd-alert--success { background: var(--success-bg); }
.hd-alert--success > .hd-icon, .hd-alert--success .hd-alert__title { color: var(--success-fg); }
.hd-alert--warning { background: var(--warning-bg); }
.hd-alert--warning > .hd-icon, .hd-alert--warning .hd-alert__title { color: var(--warning-fg); }
.hd-alert--danger { background: var(--danger-bg); }
.hd-alert--danger > .hd-icon, .hd-alert--danger .hd-alert__title { color: var(--danger-fg); }

/* ===== Kosong dan memuat ===== */
.hd-empty {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-2);
  padding: var(--space-8) var(--space-4);
  text-align: center;
}
.hd-empty__title { margin: var(--space-2) 0 0; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); }
.hd-empty__text { margin: 0 0 var(--space-2); max-width: var(--measure-short); font: var(--text-body-sm); color: var(--ink-60); }

.hd-skeleton {
  display: block;
  height: var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--ink-06);
  animation: hd-pulse var(--duration-slow) var(--ease-standard) infinite alternate;
}
.hd-skeleton + .hd-skeleton { margin-top: var(--space-2); }
.hd-skeleton--title { height: var(--space-4); width: 70%; }
.hd-skeleton--short { width: 45%; }
.hd-skeleton--tile { width: var(--size-tile); height: var(--size-tile); border-radius: var(--radius-md); flex: none; }
@keyframes hd-pulse { from { opacity: 1; } to { opacity: 0.45; } }

/* ===== KPI dashboard ===== */
.hd-kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--grid-min-kpi)), 1fr));
  gap: var(--space-3);
  margin: 0;
}
.hd-kpi {
  display: flex; flex-direction: column; gap: var(--space-1-5);
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}
.hd-kpi__label { font: var(--text-body-sm); color: var(--ink-60); }
.hd-kpi__value { margin: 0; font: var(--text-heading-1); letter-spacing: var(--tracking-heading-1); font-variant-numeric: tabular-nums; }
.hd-kpi__meta { margin: 0; font: var(--text-body-sm); color: var(--ink-60); }
.hd-kpi--featured { background: var(--selected-tint); }
.hd-kpi--featured .hd-kpi__value { color: var(--accent); }

/* ===== Daftar batang (belanja per kabupaten/kota) ===== */
.hd-bar-list { display: flex; flex-direction: column; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.hd-bar-list__row {
  display: grid;
  grid-template-columns: minmax(var(--size-qty-value), 30%) minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  font: var(--text-body-sm);
}
.hd-bar-list__value { min-width: var(--size-tile); text-align: right; font: var(--text-label); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Batang proporsi dan legenda ===== */
.hd-share { display: flex; flex-direction: column; gap: var(--space-4); margin: 0; }
.hd-share__bar { display: block; width: 100%; height: var(--share-height); }
.hd-share__seg--1 { fill: var(--chart-1); }
.hd-share__seg--2 { fill: var(--chart-2); }
.hd-share__seg--3 { fill: var(--chart-3); }
.hd-share__seg--other { fill: var(--chart-other); }
.hd-legend { display: flex; flex-direction: column; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.hd-legend__item {
  display: grid;
  grid-template-columns: var(--size-legend) minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  font: var(--text-body-sm);
}
.hd-legend__swatch {
  width: var(--size-legend); height: var(--size-legend);
  border-radius: var(--radius-xs);
  box-shadow: inset 0 0 0 var(--border-width) var(--ink-10);
}
.hd-legend__swatch--1 { background: var(--chart-1); }
.hd-legend__swatch--2 { background: var(--chart-2); }
.hd-legend__swatch--3 { background: var(--chart-3); }
.hd-legend__swatch--other { background: var(--chart-other); }
.hd-legend__pct { color: var(--ink-60); font-variant-numeric: tabular-nums; }
.hd-legend__value { min-width: var(--size-tile); text-align: right; font: var(--text-label); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ===== Tabel data ===== */
.hd-table-wrap { overflow-x: auto; max-width: 100%; border-radius: var(--radius-sm); }
.hd-table { width: 100%; min-width: var(--table-min); margin: 0; border-collapse: collapse; font: var(--text-body-sm); }
.hd-table caption { padding-bottom: var(--space-3); text-align: left; font: var(--text-title-sm); letter-spacing: var(--tracking-title-sm); color: var(--ink); }
.hd-table th {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--border-width) solid var(--border-hairline);
  text-align: left;
  font: var(--text-label);
  color: var(--ink-60);
  white-space: nowrap;
}
.hd-table td { padding: var(--space-3); border-bottom: var(--border-width) solid var(--ink-06); vertical-align: middle; }
.hd-table tbody tr:last-child td { border-bottom: 0; }
.hd-table__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: var(--weight-medium); }
.hd-table__muted { color: var(--ink-60); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== Navigasi bawah ===== */
.hd-bottom-nav {
  display: flex;
  padding: var(--space-1) var(--space-2) var(--space-2);
  border-top: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.hd-bottom-nav__item {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-0-5);
  min-height: var(--size-cta);
  border-radius: var(--radius-md);
  color: var(--ink-60);
  font: var(--text-caption);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.hd-bottom-nav__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--space-12); height: var(--space-8);
  border-radius: var(--radius-pill);
  transition: background-color var(--duration-base) var(--ease-standard);
}
.hd-bottom-nav__icon .hd-icon { width: var(--icon-lg); height: var(--icon-lg); }
.hd-bottom-nav__item:hover { color: var(--ink); }
.hd-bottom-nav__item[aria-current="page"] { color: var(--selected); font-weight: var(--weight-semibold); }
.hd-bottom-nav__item[aria-current="page"] .hd-bottom-nav__icon { background: var(--selected-tint); }

/* ===== Header dan judul dashboard pemda ===== */
.hd-dash-header {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--border-width) solid var(--border-hairline);
  background: var(--surface);
}
.hd-dash-header__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.hd-dash-header__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.hd-page-head { display: flex; flex-direction: column; gap: var(--space-1-5); }
.hd-page-head__title { margin: 0; font: var(--text-heading-1); letter-spacing: var(--tracking-heading-1); }
.hd-page-head__text { margin: 0; font: var(--text-body); color: var(--ink-60); }

/* ===== Gerak dikurangi ===== */
@media (prefers-reduced-motion: reduce) {
  .hd-btn[aria-busy="true"]::before { animation: none; }
  .hd-skeleton { animation: none; }
  .hd-btn:active { transform: none; }
}