/* ============================================================
   SCAFOLYA — COMPONENTS (umum)
   Komponen antarmuka yang diadopsi dari sistem desain referensi
   (referensi_ui_kit_projectlain, Design System v2.27) dan dipetakan
   ke token SCAFOLYA. Komponen khas produk ada di scafolya.css.
   ------------------------------------------------------------
   ATURAN: hanya token dari tokens.css; tidak ada nilai mentah.
   Hanya transform dan opacity yang dianimasikan.
   ============================================================ */

/* ---------- 0a. KACA ---------------------------------------- */

.glass {
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass);
}

.glass-card { background-color: var(--glass-card); }
.glass-chrome { background-color: var(--glass-chrome-strong); }

.glass-dark {
  background-color: var(--glass-on-dark);
  border-color: var(--glass-border-dark);
  box-shadow: var(--glass-highlight-dark), var(--shadow-glass);
  color: var(--color-text-inverse);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .glass {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-panel);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
  .glass-card { background-color: var(--glass-card); }
  .glass-chrome { background-color: var(--glass-chrome); }
  .glass-dark {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-on-dark);
    border-color: var(--glass-border-dark);
    box-shadow: var(--glass-highlight-dark), var(--shadow-glass);
  }
  .glass-blur-sm { -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate)); }
  .glass-blur-lg { -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate)); }
  .glass-blur-xl { -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate)); }
}

.glass-sheen {
  position: relative;
  overflow: hidden;
}

.glass-sheen::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: 50%;
  background: var(--glass-sheen);
  pointer-events: none;
}

/* ---------- 0b. GAMBAR DALAM SLOT --------------------------- */

.card-media > img,
.card-media > picture > img,
.ratio > img,
.img-slot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.card-media.ratio {
  aspect-ratio: auto;
}

.prose > img,
.prose > figure > img {
  width: auto;
  max-width: 100%;
  max-height: 28rem;
  margin-inline: auto;
}

/* ---------- 0c. IKON ---------------------------------------- */
/* Sprite SVG sebaris: kanvas 24×24, garis 1.75, ujung membulat,
   warna dari currentColor. Dipakai: <svg class="icon"><use href="#i-cek"/></svg> */

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon {
  display: inline-block;
  flex: 0 0 auto;
  width: 1em;
  height: 1em;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}

.icon-sm { width: 0.875em; height: 0.875em; }
.icon-lg { width: 1.35em; height: 1.35em; }
.icon-xl { width: 1.75em; height: 1.75em; }

.icon-tile .icon {
  width: 1.15em;
  height: 1.15em;
  vertical-align: 0;
}

.icon-tile-lg .icon {
  stroke-width: 1.5;
}

/* ---------- 0d. UMPAN BALIK SENTUH & TEKAN ------------------ */

.btn,
.btn-link,
.chip,
.tab,
.navbar-link,
.navbar-toggle,
.select-trigger,
.select-option,
.accordion-trigger,
.control,
.switch,
.card-interactive {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

.btn:active,
.chip:active,
.navbar-toggle:active,
.select-trigger:active {
  transform: scale(var(--press-scale));
}

/* DEC-165: menekan terasa seketika, melepasnya memantul (transisi pegas pada .btn). Spesifisitas :active:hover
   mengalahkan aturan hover terangkat di atas. */
.btn:active, .btn:active:hover {
  transform: scale(var(--press-scale));
  transition-duration: var(--dur-instant), var(--dur-instant), var(--dur-instant), var(--dur-instant), var(--dur-instant), var(--dur-instant);
}

@media (prefers-reduced-motion: reduce) {
  .btn { transition: var(--transition-colors); }
  .btn::after { display: none; }
  .btn:hover, .btn:active, .btn:active:hover { transform: none; }
}

.card-interactive:active {
  transform: scale(var(--press-scale-lg));
}

.control:active .control-box,
.switch:active .switch-track {
  transform: scale(var(--press-scale));
}

.select-option:active,
.accordion-trigger:active,
.navbar-link:active {
  background-color: var(--color-primary-soft);
}

.btn:disabled:active,
.btn.is-disabled:active,
.btn[aria-disabled="true"]:active,
.control-input:disabled + .control-box {
  transform: none;
}

/* ---------- 0e. GERAK MASUK (REVEAL) ------------------------ */
/* Digerbangi .js-aktif: tanpa JavaScript, seluruh isi langsung terlihat. */

.js-aktif .reveal {
  opacity: 0;
  transform: translate3d(0, var(--reveal-shift), 0);
  transition: opacity var(--dur-reveal) var(--ease-decelerate),
              transform var(--dur-reveal) var(--ease-decelerate);
  transition-delay: calc(var(--reveal-index, 0) * var(--stagger-step));
}

.js-aktif .reveal.is-revealed {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

.btn-link .icon {
  transition: transform var(--dur-base) var(--ease-emphasized);
}

@media (hover: hover) {
  .btn-link:hover .icon {
    transform: translateX(0.25rem);
  }
}

@keyframes sf-pop {
  from { opacity: 0; transform: scale(0.4); }
  60%  { transform: scale(1.15); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes sf-fade-in {
  from { opacity: 0; transform: translate3d(0, -0.375rem, 0); }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-spin {
  to { transform: rotate(360deg); }
}

@keyframes sf-guncang {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(calc(-1 * var(--space-1))); }
  75%      { transform: translateX(var(--space-1)); }
}

/* ---------- 0f. KONFETI (perayaan singkat, sekali jalan) ---- */

.confetti {
  position: fixed;
  left: var(--burst-x, 50vw);
  top: var(--burst-y, 50vh);
  width: 0;
  height: 0;
  z-index: var(--z-toast);
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: 0;
  left: 0;
  animation:
    sf-confetti-terbang var(--dur-celebrate) both,
    sf-confetti-pudar var(--dur-celebrate) var(--ease-in-out) both;
  animation-delay: var(--cd, 0ms);
}

.confetti-flake {
  display: block;
  animation: sf-confetti-putar var(--dur-celebrate) var(--ease-soft) both;
  animation-delay: var(--cd, 0ms);
}

.confetti-kertas {
  display: block;
  width: 0.5rem;
  height: 0.75rem;
  border-radius: var(--radius-xs);
  animation: sf-confetti-kepak var(--dur-celebrate) var(--ease-in-out) both;
  animation-delay: var(--cd, 0ms);
}

.confetti-kecil .confetti-kertas { width: 0.375rem; height: 0.5rem; }
.confetti-besar .confetti-kertas { width: 0.625rem; height: 0.875rem; }
.confetti-bulat .confetti-kertas { height: 0.5rem; border-radius: var(--radius-circle); }

.confetti-piece-1 .confetti-kertas { background-color: var(--amber-400); }
.confetti-piece-2 .confetti-kertas { background-color: var(--biru-500); }
.confetti-piece-3 .confetti-kertas { background-color: var(--tahap-3); }
.confetti-piece-4 .confetti-kertas { background-color: var(--success-500); }
.confetti-piece-5 .confetti-kertas { background-color: var(--amber-200); }
.confetti-piece-6 .confetti-kertas { background-color: var(--biru-300); }

@keyframes sf-confetti-terbang {
  0% {
    animation-timing-function: var(--ease-decelerate);
    transform: translate3d(var(--ox, 0px), var(--oy, 0px), 0);
  }
  34% {
    animation-timing-function: var(--ease-in-out);
    transform: translate3d(calc(var(--ox, 0px) + var(--cx, 0px) * 0.55),
                           calc(var(--oy, 0px) + var(--cyu, -80px)), 0);
  }
  100% {
    transform: translate3d(calc(var(--ox, 0px) + var(--cx, 0px)),
                           calc(var(--oy, 0px) + var(--cyd, 100px)), 0);
  }
}

@keyframes sf-confetti-pudar {
  0%   { opacity: 0; }
  12%  { opacity: 1; }
  64%  { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes sf-confetti-putar {
  0%   { transform: rotateZ(0deg); }
  100% { transform: rotateZ(var(--cr, 360deg)); }
}

@keyframes sf-confetti-kepak {
  0%   { transform: rotateX(0deg) scale(0.35); }
  14%  { transform: rotateX(65deg) scale(1.08); }
  32%  { transform: rotateX(160deg) scale(1); }
  58%  { transform: rotateX(35deg) scale(1); }
  82%  { transform: rotateX(195deg) scale(0.96); }
  100% { transform: rotateX(110deg) scale(0.9); }
}

@media (prefers-reduced-motion: reduce) {
  .confetti { display: none; }
}

/* ---------- 1. ICON TILE ------------------------------------ */

.icon-tile {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-tile-md);
  height: var(--icon-tile-md);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-size: var(--fs-xl);
  line-height: 1;
}

.icon-tile-sm {
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border-radius: var(--radius-sm);
  font-size: var(--fs-base);
}

.icon-tile-lg {
  width: var(--icon-tile-lg);
  height: var(--icon-tile-lg);
  border-radius: var(--radius-lg);
  font-size: var(--fs-2xl);
}

.icon-tile-circle { border-radius: var(--radius-circle); }

/* KP-177 (TS-4): biru bawaan sebagai varian bernama, karena pembangun dashboard menulis icon-tile-primary di samping
   varian lain. Sama dengan .icon-tile. */
.icon-tile-primary   { background-color: var(--color-primary-soft);   color: var(--color-primary-text); }
.icon-tile-secondary { background-color: var(--color-secondary-soft); color: var(--color-secondary-text); }
.icon-tile-success   { background-color: var(--color-success-soft);   color: var(--color-success-text); }
.icon-tile-warning   { background-color: var(--color-warning-soft);   color: var(--color-warning-text); }
.icon-tile-danger    { background-color: var(--color-danger-soft);    color: var(--color-danger-text); }
.icon-tile-info      { background-color: var(--color-info-soft);      color: var(--color-info-text); }
.icon-tile-neutral   { background-color: var(--color-bg-muted);       color: var(--color-text-secondary); }
.icon-tile-solid     { background: var(--gradient-biru);              color: var(--color-on-primary); }

/* ---------- 2. TOMBOL --------------------------------------- */
/* Selalu pil. Hanya satu .btn-primary per layar (IA-06). */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-6);
  border: var(--border-base) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-none);
  letter-spacing: var(--ls-normal);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  position: relative;
  overflow: hidden;
  /* DEC-165: melepas tekanan memantul seperti pegas; warna tetap cepat. */
  transition: var(--transition-colors),
              transform var(--dur-pegas-halus) var(--ease-pegas-halus),
              box-shadow var(--dur-base) var(--ease-out);
}

.btn:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* DEC-165: kilau lembut yang menyapu tombol dari kiri ke kanan saat disorot. Tombol bertinta pekat memakai
   cahaya putih; tombol bergaris dan kaca memakai semburat biru supaya tetap terlihat di permukaan terang. */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, 0.34) 50%, transparent 68%);
  transform: translateX(-130%);
  opacity: 0;
  pointer-events: none;
}

.btn-outline::after, .btn-ghost::after, .btn-glass::after, .btn-inverse-outline::after {
  background: linear-gradient(115deg, transparent 32%, rgba(42, 107, 208, 0.16) 50%, transparent 68%);
}

.btn:disabled::after, .btn[aria-disabled="true"]::after { display: none; }

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn:hover::after {
    opacity: 1;
    transform: translateX(130%);
    transition: transform 820ms var(--ease-out), opacity 160ms var(--ease-out);
  }
  .btn-primary:hover, .btn-secondary:hover, .btn-danger:hover, .btn-glass:hover, .btn-outline:hover { transform: translateY(var(--lift-sm)); }
  .btn:disabled:hover, .btn[aria-disabled="true"]:hover { transform: none; }
}

.btn-primary {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .btn-primary:hover {
    background-color: var(--color-primary-hover);
    border-color: var(--color-primary-hover);
    color: var(--color-on-primary);
    box-shadow: var(--shadow-md);
  }
}

.btn-secondary {
  background-color: var(--color-secondary);
  border-color: var(--color-secondary);
  color: var(--color-on-secondary);
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .btn-secondary:hover {
    background-color: var(--color-secondary-hover);
    border-color: var(--color-secondary-hover);
    color: var(--color-on-secondary);
    box-shadow: var(--shadow-md);
  }
}

.btn-outline {
  background-color: var(--color-surface);
  border-color: var(--color-primary-border);
  color: var(--color-primary-text);
}

@media (hover: hover) {
  .btn-outline:hover {
    background-color: var(--color-primary-softer);
    border-color: var(--color-primary);
    color: var(--color-primary-hover);
  }
}

.btn-ghost {
  background-color: transparent;
  border-color: transparent;
  color: var(--color-text-secondary);
}

@media (hover: hover) {
  .btn-ghost:hover {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
  }
}

.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sm);
}

@media (hover: hover) {
  .btn-danger:hover {
    background-color: var(--danger-700);
    border-color: var(--danger-700);
    color: var(--color-on-primary);
  }
}

.btn-danger:focus-visible {
  box-shadow: var(--shadow-focus-danger);
}

.btn-inverse-outline {
  background-color: var(--glass-on-dark);
  border-color: var(--border-on-dark-button);
  color: var(--color-text-inverse);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-inverse-outline {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    box-shadow: var(--glass-highlight-dark);
  }
}

@media (hover: hover) {
  .btn-inverse-outline:hover {
    background-color: var(--overlay-white-hover);
    border-color: var(--color-text-inverse);
    color: var(--color-text-inverse);
  }
}

.btn-glass {
  background-color: var(--glass-chrome-strong);
  border-color: var(--color-border);
  color: var(--color-primary-text);
  box-shadow: var(--shadow-glass);
}

@media (hover: hover) {
  .btn-glass:hover {
    background-color: var(--glass-card-hover);
    border-color: var(--color-primary-border);
    color: var(--color-primary-hover);
    box-shadow: var(--shadow-glass-md);
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .btn-glass {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

.btn-sm {
  min-height: var(--control-height-sm);
  padding: var(--space-2) var(--space-4);
  font-size: var(--fs-xs);
}

.btn-lg {
  min-height: var(--control-height-lg);
  padding: var(--space-4) var(--space-8);
  font-size: var(--fs-base);
}

.btn-block {
  display: flex;
  width: 100%;
}

.btn-icon {
  padding: var(--space-3);
  width: var(--control-height-md);
  min-width: var(--control-height-md);
}

.btn-icon.btn-sm {
  padding: var(--space-2);
  width: var(--control-height-sm);
  min-width: var(--control-height-sm);
}

/* Label tombol boleh melipat di layar sempit (label CTA SCAFOLYA panjang). */
.btn-wrap {
  white-space: normal;
  line-height: var(--lh-snug);
}

/* Nonaktif tetap tampil dengan penjelasan (IA-08). */
.btn:disabled,
.btn.is-disabled,
.btn[aria-disabled="true"] {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

.btn.is-loading,
.btn[aria-busy="true"] {
  color: transparent;
  pointer-events: none;
  position: relative;
}

/* KP-175 (TS-1): pemutar memakai ::after yang sama dengan kilau tombol (DEC-165), jadi setiap sifat kilau ditimpa di sini:
   tanpa itu pemutar ikut transparan, menempel di pojok kiri atas, dan hilang pada tombol nonaktif atau saat gerak dikurangi,
   sehingga tombol sibuk tampil sebagai pil kosong. Pemutar duduk di tengah lewat flex tombol (inset: auto). */
.btn.is-loading::after,
.btn[aria-busy="true"]::after {
  content: "";
  display: block;
  position: absolute;
  inset: auto;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  border: var(--border-thick) solid currentColor;
  border-top-color: transparent;
  border-radius: var(--radius-circle);
  background: none;
  opacity: 1;
  transform: none;
  transition: none;
  color: var(--color-on-primary);
  animation: sf-spin var(--dur-slower) linear infinite;
}

.btn-outline.is-loading::after,
.btn-ghost.is-loading::after,
.btn-glass.is-loading::after,
.btn-outline[aria-busy="true"]::after,
.btn-ghost[aria-busy="true"]::after,
.btn-glass[aria-busy="true"]::after {
  color: var(--color-primary-text);
}

.btn-secondary.is-loading::after,
.btn-secondary[aria-busy="true"]::after {
  color: var(--color-on-secondary);
}

/* Tombol yang sekaligus nonaktif berlatar abu-abu: pemutarnya memakai warna teks nonaktif supaya tetap terlihat. */
.btn.is-loading:disabled::after,
.btn[aria-busy="true"]:disabled::after {
  color: var(--color-disabled-text);
}

.btn-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--color-primary-text);
  text-decoration: none;
}

@media (hover: hover) {
  .btn-link:hover {
    color: var(--color-primary-hover);
  }
}

/* Penjelasan di bawah aksi primer nonaktif (IA-08) */
.btn-penjelasan {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  line-height: var(--lh-snug);
}

/* ---------- 3. BADGE & CHIP --------------------------------- */

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border: var(--border-thin) solid transparent;
  border-radius: var(--radius-pill);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: 1.5;
  white-space: nowrap;
}

.badge-primary   { background-color: var(--color-primary-soft);   border-color: var(--color-primary-border);   color: var(--color-primary-text); }
.badge-secondary { background-color: var(--color-secondary-soft); border-color: var(--color-secondary-border); color: var(--color-secondary-text); }
.badge-success   { background-color: var(--color-success-soft);   border-color: var(--color-success-border);   color: var(--color-success-text); }
.badge-warning   { background-color: var(--color-warning-soft);   border-color: var(--color-warning-border);   color: var(--color-warning-text); }
.badge-danger    { background-color: var(--color-danger-soft);    border-color: var(--color-danger-border);    color: var(--color-danger-text); }
.badge-info      { background-color: var(--color-info-soft);      border-color: var(--color-info-border);      color: var(--color-info-text); }

.badge-dot::before {
  content: "";
  width: var(--space-2);
  height: var(--space-2);
  border-radius: var(--radius-circle);
  background-color: currentColor;
}

@media (max-width: 47.99rem) {
  .badge { white-space: normal; }
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--control-height-sm);
  padding: var(--space-2) var(--space-4);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-pill);
  background-color: var(--color-surface);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .chip:hover {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-softer);
    color: var(--color-primary-text);
  }
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .chip {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome-strong);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight);
  }
}

.chip:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

.chip.is-active,
.chip[aria-selected="true"],
.chip[aria-current] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-on-primary);
}

.chip-count {
  font-size: var(--fs-2xs);
  opacity: 0.75;
}

/* ---------- 4. KARTU ---------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: var(--transition-lift), border-color var(--dur-fast) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-card);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

.card-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--gap-card);
  flex: 1;
}

.card-body-lg {
  padding: clamp(var(--space-5), 2.5vw, var(--space-8));
}

.card-header {
  padding: var(--gap-card);
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
}

.card-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-4) var(--gap-card);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  background-color: var(--color-surface-alt);
}

.card-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Tombol di kaki kartu boleh melipat labelnya bila kartu sempit */
.card-footer .btn {
  max-width: 100%;
  white-space: normal;
  line-height: var(--lh-snug);
}

.card-text {
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--color-text-muted);
}

.card-media {
  position: relative;
  background-color: var(--color-surface-sunken);
}

.card-soft {
  background-color: var(--color-primary-softer);
  border-color: var(--color-primary-border);
  box-shadow: none;
}

.card-elevated {
  box-shadow: var(--shadow-md);
  border-color: transparent;
}

.card-highlight {
  border-color: var(--color-secondary-border);
  background-color: var(--color-secondary-softer);
  box-shadow: none;
}

.card-success {
  background-color: var(--color-success-soft);
  border-color: var(--color-success-border);
  box-shadow: none;
}

.card-interactive {
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

@media (hover: hover) {
  .card-interactive:hover {
    transform: translateY(var(--lift-md));
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary-border);
    color: inherit;
  }
}

.card-interactive:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus), var(--shadow-md);
  border-color: var(--color-primary);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  @media (hover: hover) {
    .card-interactive:hover {
      background-color: var(--glass-card-hover);
      box-shadow: var(--glass-highlight), var(--shadow-glass-lg);
    }
  }
}

.card-heading {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.card-heading > * { min-width: 0; }

.card-heading-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-tile-md);
  height: var(--icon-tile-md);
  border-radius: var(--radius-circle);
  background-color: var(--color-bg-muted);
  color: var(--color-text-secondary);
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-base);
  line-height: 1;
}

.card-highlight .card-title,
.card-highlight .card-heading-icon { color: var(--color-secondary-text); }
.card-highlight .card-heading-icon { background-color: var(--color-secondary-soft); }

.card-soft .card-title,
.card-soft .card-heading-icon { color: var(--color-primary-text); }
.card-soft .card-heading-icon { background-color: var(--color-primary-soft); }

.card-success .card-title,
.card-success .card-heading-icon { color: var(--color-success-text); }
.card-success .card-heading-icon { background-color: var(--color-success-ikon); }

.card-highlight .card-text,
.card-soft .card-text,
.card-success .card-text {
  color: var(--color-text-secondary);
  font-size: var(--fs-base);
}

.card-media-inset {
  margin: var(--gap-card) var(--gap-card) 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background-color: var(--color-surface-sunken);
}

.card-media-inset > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.card-media-tint {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  min-height: var(--space-32);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.card-media-tint .icon { font-size: var(--icon-tile-lg); }

.card-media-secondary { background-color: var(--color-secondary-soft); color: var(--color-secondary-text); }
.card-media-success   { background-color: var(--color-success-soft);   color: var(--color-success-text); }
.card-media-info      { background-color: var(--color-info-soft);      color: var(--color-info-text); }
.card-media-brand     { background-color: var(--color-bg-brand);       color: var(--color-text-inverse); }

.card-media-number {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--space-8);
  height: var(--space-8);
  border-radius: var(--radius-circle);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  box-shadow: var(--shadow-sm);
}

.card-body > blockquote {
  margin-block: var(--space-2);
}

.card-body > .prose,
.card-body > .stack > .prose {
  max-width: none;
}

/* ---------- 6. NAVBAR --------------------------------------- */
/* Header siswa (G-01): kaca chrome lengket; wordmark SCAFOLYA di
   kiri, nama siswa dan Keluar di kanan. Tanpa menu bebas (IA-06). */

.navbar {
  position: sticky;
  top: 0;
  z-index: var(--z-navbar);
  background-color: var(--glass-chrome-strong);
  border-bottom: var(--border-thin) solid var(--color-border);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .navbar {
    -webkit-backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-md)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-bottom-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: var(--navbar-height-sm);
}

@media (min-width: 48rem) {
  .navbar-inner {
    min-height: var(--navbar-height);
  }
}

.navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-width: 0;
  text-decoration: none;
  color: var(--color-text);
  flex: 0 0 auto;
  border-radius: var(--radius-sm);
}

@media (hover: hover) {
  .navbar-brand:hover { color: var(--color-text); }
}

/* Simbol dan wordmark sama tinggi: tinggi kanvas = tinggi terlihat / rasio bidang gambar.
   Ruang kosong kanvas di kanan simbol dan di kiri wordmark ditarik lewat margin negatif agar jarak
   TERLIHAT tepat --brand-gap. Semua rasio dalam satuan tinggi kanvas; nilai bawaan di tokens.css,
   berkas yang diganti dari dashboard membawa nilainya sendiri sebagai style (app/Logo.php, DEC-145).
   --brand-*-geser memindah gambar yang isinya tidak di tengah kanvas agar tetap sejajar. */
.brand {
  --h: var(--brand-h-sm);
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  gap: var(--brand-gap);
}

.brand-symbol {
  display: block;
  height: calc(var(--h) / var(--brand-symbol-fill));
  width: auto;
  flex: 0 0 auto;
  margin-right: calc(-1 * var(--brand-symbol-kanan) * var(--h) / var(--brand-symbol-fill));
  margin-left: calc(var(--brand-symbol-kiri-0) * var(--h) / var(--brand-symbol-fill-0) - var(--brand-symbol-kiri) * var(--h) / var(--brand-symbol-fill));
  margin-block: calc((var(--h) / var(--brand-symbol-fill-0) - var(--h) / var(--brand-symbol-fill)) / 2);
  translate: 0 calc(-1 * var(--brand-symbol-geser) * var(--h) / var(--brand-symbol-fill));
}

.brand > picture { display: block; flex: 0 0 auto; line-height: 0; }

/* DEC-076: wordmark mengikuti tema. Keduanya dirender; satu disembunyikan. */
.brand-tema .brand-wm-gelap { display: none; }
:root[data-tema="gelap"] .brand-tema .brand-wm-terang { display: none; }
:root[data-tema="gelap"] .brand-tema .brand-wm-gelap { display: block; }

.brand-wordmark {
  display: block;
  height: calc(var(--h) / var(--brand-wordmark-fill));
  width: auto;
  max-width: none;
  flex: 0 0 auto;
  margin-left: calc(-1 * var(--brand-wordmark-kiri) * var(--h) / var(--brand-wordmark-fill));
  margin-right: calc(var(--brand-wordmark-kanan-0) * var(--h) / var(--brand-wordmark-fill-0) - var(--brand-wordmark-kanan) * var(--h) / var(--brand-wordmark-fill));
  margin-block: calc((var(--h) / var(--brand-wordmark-fill-0) - var(--h) / var(--brand-wordmark-fill)) / 2);
  translate: 0 calc(-1 * var(--brand-wordmark-geser) * var(--h) / var(--brand-wordmark-fill));
}

@media (min-width: 48rem) {
  .brand { --h: var(--brand-h); }
}

/* Lockup ringkas ponsel (DEC-065): < 36rem <picture> memilih wordmark-*.png tanpa tagline
   (bidang isi 312/724 = 0,431 tinggi kanvas) dengan tinggi huruf 17px di samping simbol 34px,
   sehingga baris navbar (merek + tombol) muat pada 360px dengan sisa ≥ 30px. < 344px hanya simbol.
   Jarak terlihatnya tetap 0,45rem ditambah ruang kosong kanvas berkas bawaan (0,0225 dan 0,0635
   tinggi kanvas); berkas pengganti ditarik dengan ruang kosongnya sendiri sehingga jaraknya sama.
   .brand-paksa-ringkas: lockup yang sama tanpa syarat lebar layar (pratinjau di modul Logo). */
@media (max-width: 35.99rem) {
  .brand-ringkas { gap: calc(0.45rem + 0.0225 * var(--h) / 0.789 + 0.0635 * 1.0625rem / 0.431); }
  .brand-ringkas .brand-wordmark {
    height: calc(1.0625rem / var(--brand-ringkas-fill));
    margin-left: calc(-1 * var(--brand-ringkas-kiri) * 1.0625rem / var(--brand-ringkas-fill));
    margin-right: calc(var(--brand-ringkas-kanan-0) * 1.0625rem / var(--brand-ringkas-fill-0) - var(--brand-ringkas-kanan) * 1.0625rem / var(--brand-ringkas-fill));
    margin-block: calc((1.0625rem / var(--brand-ringkas-fill-0) - 1.0625rem / var(--brand-ringkas-fill)) / 2);
    translate: 0 calc(-1 * var(--brand-ringkas-geser) * 1.0625rem / var(--brand-ringkas-fill));
  }
}
.brand-paksa-ringkas { gap: calc(0.45rem + 0.0225 * var(--h) / 0.789 + 0.0635 * 1.0625rem / 0.431); }
.brand-paksa-ringkas .brand-wordmark {
  height: calc(1.0625rem / var(--brand-ringkas-fill));
  margin-left: calc(-1 * var(--brand-ringkas-kiri) * 1.0625rem / var(--brand-ringkas-fill));
  margin-right: calc(var(--brand-ringkas-kanan-0) * 1.0625rem / var(--brand-ringkas-fill-0) - var(--brand-ringkas-kanan) * 1.0625rem / var(--brand-ringkas-fill));
  margin-block: calc((1.0625rem / var(--brand-ringkas-fill-0) - 1.0625rem / var(--brand-ringkas-fill)) / 2);
  translate: 0 calc(-1 * var(--brand-ringkas-geser) * 1.0625rem / var(--brand-ringkas-fill));
}
/* < 344px: hanya simbol. Aturan tema (DEC-076) lebih spesifik, jadi varian gelap
   ikut disebut di sini agar tetap tersembunyi pada layar sesempit itu. */
@media (max-width: 21.49rem) {
  .brand-ringkas > picture,
  .brand-ringkas .brand-wm,
  :root[data-tema="gelap"] .brand-tema .brand-wm-gelap { display: none; }
  .brand-ringkas .brand-symbol { margin-right: calc(var(--brand-symbol-kanan-0) * var(--h) / var(--brand-symbol-fill-0) - var(--brand-symbol-kanan) * var(--h) / var(--brand-symbol-fill)); }
}

.navbar-menu {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .navbar-link:hover {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
  }
}

.navbar-link.is-active,
.navbar-link[aria-current="page"] {
  background-color: var(--color-primary-softer);
  border: var(--border-thin) solid var(--color-primary-border);
  color: var(--color-primary-text);
  font-weight: var(--fw-bold);
}

.navbar-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 auto;
}

.navbar-toggle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--burger-gap);
  width: var(--control-height-md);
  height: var(--control-height-md);
  border-radius: var(--radius-sm);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .navbar-toggle:hover { background-color: var(--color-bg-muted); }
}

.navbar-toggle-bar {
  display: block;
  width: var(--burger-width);
  height: var(--burger-bar);
  border-radius: var(--radius-pill);
  background-color: currentColor;
  transition: transform var(--dur-base) var(--ease-out),
              opacity var(--dur-fast) var(--ease-out);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(1) {
  transform: translateY(calc(var(--burger-bar) + var(--burger-gap))) rotate(45deg);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(2) {
  opacity: 0;
  transform: scaleX(0.3);
}

.navbar-toggle[aria-expanded="true"] .navbar-toggle-bar:nth-child(3) {
  transform: translateY(calc(-1 * (var(--burger-bar) + var(--burger-gap)))) rotate(-45deg);
}

/* --- Perilaku responsif navbar ------------------------------
   Di bawah --bp-lg menu menjadi panel MENGAMBANG: ui.js memindahkannya
   ke <body> saat dibuka (bukaMengambang, lebar 'layar', selaras dengan
   .navbar-inner). Panel keluar dari backdrop-filter navbar sehingga
   kacanya bekerja, tinggi navbar tidak melar, dan panel tidak terpotong
   tepi layar. Tanpa JS (atau bila pemindahan gagal) panel jatuh ke baris
   kedua selebar navbar (flex-wrap + order), BUKAN berdampingan dengan logo.
   Tombol hamburger disembunyikan oleh komponen ini sendiri pada >= --bp-lg;
   jangan tambahkan .hide-desktop (batasnya 48rem) karena akan menyisakan
   tablet 768-991 px tanpa menu sama sekali. */

@media (max-width: 61.99rem) {
  .navbar-inner { flex-wrap: wrap; }
  .navbar-nav {
    display: none;
    flex: 1 1 100%;
    order: 3;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
  }
  .navbar-nav.is-open { display: flex; }
  .navbar-nav.floating { flex: none; order: 0; }
  .navbar-menu {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-1);
  }
  /* Setiap butir mengisi satu baris penuh; tanpa ini .navbar-link hanya
     selebar teksnya dan sisa barisnya menjadi area mati. */
  .navbar-menu li { display: flex; }
  .navbar-link {
    display: flex;
    width: 100%;
    min-height: var(--control-height-md);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    font-size: var(--fs-base);
  }
  .navbar-nav .navbar-actions {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-2);
  }
  .navbar-nav .btn {
    width: 100%;
    margin-top: var(--space-2);
  }
}

@media (min-width: 62rem) {
  .navbar-toggle { display: none; }
  .navbar-nav {
    display: flex !important;
    align-items: center;
    gap: var(--space-5);
  }
}

/* ---------- 7. HERO ----------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--gradient-biru);
  color: var(--color-text-inverse);
  padding-block: clamp(var(--space-14), 8vw, var(--space-24));
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  color: var(--amber-300);
  background-image: var(--ornament-tangga);
  background-size: auto var(--ornament-height);
  background-repeat: repeat-x;
  background-position: left bottom;
  opacity: 0.18;
  pointer-events: none;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(32rem 24rem at 78% 12%, var(--ambient-orb-gold), transparent 62%),
    radial-gradient(28rem 22rem at 8% 88%, var(--ambient-orb-light), transparent 60%);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .hero::after {
    animation: sf-ambien-hero var(--dur-ambien-hero) var(--ease-in-out) infinite alternate;
  }
}

@keyframes sf-ambien-hero {
  from { transform: translate3d(5%, 3%, 0) scale(1.05); opacity: 0.3; }
  50%  { transform: translate3d(-1.5%, -3.5%, 0) scale(1.26); opacity: 1; }
  to   { transform: translate3d(-5%, 1.5%, 0) scale(1.12); opacity: 0.5; }
}

.hero-inner {
  position: relative;
  z-index: var(--z-raised);
  display: grid;
  gap: clamp(var(--space-8), 5vw, var(--space-16));
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

@media (min-width: 62rem) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  }
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  align-items: flex-start;
  max-width: var(--measure);
}

.hero-title {
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tighter);
  color: var(--color-text-inverse);
}

.hero-title em {
  font-style: normal;
  color: var(--amber-300);
}

.hero-text {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--color-text-inverse-muted);
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.hero .eyebrow { color: var(--amber-300); }

.hero-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: clamp(var(--space-5), 2.5vw, var(--space-7));
  border-radius: var(--radius-lg);
  background-color: var(--glass-dark);
  border: var(--border-thin) solid var(--glass-border-dark);
  box-shadow: var(--shadow-glass-lg);
  color: var(--color-text-inverse);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .hero-panel {
    -webkit-backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-lg)) saturate(var(--glass-saturate));
    box-shadow: var(--glass-highlight-dark), var(--shadow-glass-lg);
  }
}

.hero-compact {
  padding-block: clamp(var(--space-10), 5vw, var(--space-14));
}

.hero-compact .hero-inner { grid-template-columns: minmax(0, 1fr); }
.hero-compact .hero-title { font-size: var(--fs-4xl); }

/* ---------- 8. BREADCRUMB, TAB, ACCORDION ------------------- */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.breadcrumb li + li::before {
  content: "/";
  color: var(--color-text-subtle);
}

.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .breadcrumb a:hover { color: var(--color-primary-text); }
}

.breadcrumb [aria-current="page"] { color: var(--color-text); }

@media (max-width: 47.99rem) {
  .breadcrumb { flex-wrap: nowrap; }
  .breadcrumb li { min-width: 0; }
  .breadcrumb a {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}

.tablist {
  display: flex;
  gap: var(--space-2);
  border-bottom: var(--border-thin) solid var(--color-border);
  overflow-x: auto;
  margin-bottom: var(--space-6);
}

.tab-panel { padding-top: var(--space-1); }

.tab {
  padding: var(--space-3) var(--space-4);
  border: none;
  border-bottom: var(--border-thick) solid transparent;
  background: none;
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .tab:hover { color: var(--color-text); }
}

.tab[aria-selected="true"] {
  color: var(--color-primary-text);
  border-bottom-color: var(--color-primary);
}

.accordion {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.accordion-item {
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  overflow: hidden;
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .accordion-item {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-card);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

.accordion-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  padding: var(--space-4) var(--space-5);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  text-align: left;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .accordion-trigger:hover { background-color: var(--color-surface-alt); }
}

.accordion-trigger::after {
  content: "+";
  flex: 0 0 auto;
  font-size: var(--fs-xl);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
  transition: transform var(--dur-fast) var(--ease-out);
}

.accordion-trigger[aria-expanded="true"]::after {
  transform: rotate(45deg);
}

.accordion-panel {
  padding: 0 var(--space-5) var(--space-5);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-muted);
  animation: sf-fade-in var(--dur-base) var(--ease-decelerate);
}

.accordion-panel[hidden] { display: none; }

/* ---------- 9. FORMULIR ------------------------------------- */

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.label {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
}

.input,
.textarea,
.select {
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-4);
  border: var(--border-base) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  transition: var(--transition-colors);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .input,
  .textarea,
  .select {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-card);
    box-shadow: var(--glass-highlight);
  }
}

.input::placeholder,
.textarea::placeholder {
  color: var(--color-text-muted);
}

@media (hover: hover) {
  .input:hover,
  .textarea:hover,
  .select:hover {
    border-color: var(--color-text-muted);
  }
}

.input:focus,
.textarea:focus,
.select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

.textarea {
  min-height: 8rem;
  resize: vertical;
  line-height: var(--lh-relaxed);
}

.select {
  appearance: none;
  padding-right: var(--space-10);
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
                    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 1.25rem) 55%, calc(100% - 0.9rem) 55%;
  background-size: 0.375rem 0.375rem, 0.375rem 0.375rem;
  background-repeat: no-repeat;
  cursor: pointer;
}

.input:disabled,
.textarea:disabled,
.select:disabled {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

.input-error,
.textarea-error,
.input[aria-invalid="true"],
.textarea[aria-invalid="true"] {
  border-color: var(--color-danger);
}

.input-error:focus,
.textarea-error:focus,
.input[aria-invalid="true"]:focus,
.textarea[aria-invalid="true"]:focus {
  border-color: var(--color-danger);
  box-shadow: var(--shadow-focus-danger);
}

.field-help {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.field-error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-danger-text);
}

/* Input dengan tombol di kanan (mis. lihat/sembunyikan PIN) */
.input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.input-group .input { padding-right: calc(var(--control-height-md) + var(--space-2)); }

.input-group-aksi {
  position: absolute;
  right: var(--space-1);
  display: grid;
  place-items: center;
  width: calc(var(--control-height-md) - var(--space-2));
  height: calc(var(--control-height-md) - var(--space-2));
  border-radius: var(--radius-xs);
  color: var(--color-text-muted);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .input-group-aksi:hover {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
  }
}

.input-group-aksi:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

/* Input PIN 6 digit (LS-01): lebar, spasi antar angka */
.input-pin {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.35em;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.search {
  position: relative;
  display: flex;
  align-items: center;
}

.search .input {
  padding-left: var(--space-12);
  border-radius: var(--radius-pill);
}

.search-icon {
  position: absolute;
  left: var(--space-5);
  color: var(--color-text-subtle);
  pointer-events: none;
  line-height: 1;
}

/* ---------- 10. KOTAK CENTANG, RADIO, KARTU PILIHAN --------- */
/* Input asli tetap ada (tersembunyi visual) — keyboard dan pembaca
   layar tetap berfungsi. Status diteruskan lewat selector saudara. */

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

.control {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  position: relative;
  min-height: var(--control-height-md);
  padding-block: var(--space-2);
  cursor: pointer;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .control:hover { color: var(--color-text); }
}

.control-box {
  position: relative;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: var(--choice-size);
  height: var(--choice-size);
  margin-top: 0.15rem;
  border: var(--border-thick) solid var(--color-border-control);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xs);
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.control-radio .control-box { border-radius: var(--radius-circle); }

.control-box::after {
  content: "";
  width: 0.375rem;
  height: 0.6875rem;
  border: solid var(--color-on-primary);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  transform: rotate(45deg) scale(0.4);
  transform-origin: center;
  margin-top: -0.125rem;
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out),
              transform var(--dur-base) var(--ease-spring);
}

.control-radio .control-box::after {
  width: var(--space-2);
  height: var(--space-2);
  border: none;
  border-radius: var(--radius-circle);
  background-color: var(--color-on-primary);
  transform: scale(0);
  margin-top: 0;
}

.control-input:checked + .control-box {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--shadow-sm);
}

.control-input:checked + .control-box::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}

.control-radio .control-input:checked + .control-box::after {
  transform: scale(1);
}

@media (hover: hover) {
  .control:hover .control-input:not(:checked):not(:disabled) + .control-box {
    border-color: var(--color-primary);
    background-color: var(--color-primary-softer);
  }
}

.control-input:focus-visible + .control-box {
  box-shadow: var(--shadow-focus);
  border-color: var(--color-primary);
}

.control-input:disabled + .control-box {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  box-shadow: none;
}

.control-input:disabled ~ .control-label { color: var(--color-disabled-text); }

.control:has(.control-input:disabled) { cursor: not-allowed; }

.control-label { min-width: 0; }

.control-hint {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.control-card {
  align-items: center;
  padding: var(--space-4) var(--space-5);
  border: var(--border-base) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--glass-card);
  box-shadow: var(--shadow-xs);
}

@media (hover: hover) {
  .control-card:hover {
    border-color: var(--color-primary-border);
    background-color: var(--color-primary-softer);
  }
}

.control-card:has(.control-input:checked) {
  border-color: var(--color-primary);
  background-color: var(--color-primary-softer);
}

.control-card .control-box { margin-top: 0; }

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .control-card {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
  .control-card:has(.control-input:checked) {
    border-color: var(--color-primary);
  }
}

/* ---------- 11. SAKELAR ------------------------------------- */

.switch {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: relative;
  min-height: var(--control-height-md);
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--color-text-secondary);
}

.switch-reverse {
  flex-direction: row-reverse;
  justify-content: space-between;
}

.switch-track {
  position: relative;
  flex: 0 0 auto;
  width: var(--switch-width);
  height: var(--switch-height);
  border-radius: var(--radius-pill);
  background-color: var(--color-border-control);
  box-shadow: var(--shadow-inset);
  transition: background-color var(--dur-base) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
}

.switch-thumb {
  position: absolute;
  top: var(--switch-gap);
  left: var(--switch-gap);
  width: var(--switch-thumb);
  height: var(--switch-thumb);
  border-radius: var(--radius-circle);
  background-color: var(--neutral-0);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-spring);
}

.control-input:checked + .switch-track { background-color: var(--color-primary); }

.control-input:checked + .switch-track .switch-thumb {
  transform: translateX(calc(var(--switch-width) - var(--switch-thumb) - var(--switch-gap) * 2));
}

.control-input:focus-visible + .switch-track { box-shadow: var(--shadow-focus); }

.control-input:disabled + .switch-track {
  background-color: var(--color-disabled-bg);
  box-shadow: none;
}

.control-input:disabled + .switch-track .switch-thumb { box-shadow: none; }

.switch:has(.control-input:disabled) {
  cursor: not-allowed;
  color: var(--color-disabled-text);
}

.switch-success .control-input:checked + .switch-track { background-color: var(--color-success); }

.switch-sm .switch-track { width: var(--switch-width-sm); height: var(--switch-height-sm); }
.switch-sm .switch-thumb { width: var(--switch-thumb-sm); height: var(--switch-thumb-sm); }
.switch-sm .control-input:checked + .switch-track .switch-thumb {
  transform: translateX(calc(var(--switch-width-sm) - var(--switch-thumb-sm) - var(--switch-gap) * 2));
}

/* ---------- 13. SELECT KUSTOM & PANEL MENGAMBANG ------------ */

.select-custom { position: relative; }

.floating {
  position: fixed;
  z-index: var(--z-dropdown);
  top: var(--float-top, 0px);
  left: var(--float-left, 0px);
  width: var(--float-width, auto);
  max-height: var(--float-max-height, var(--float-height-max));
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: sf-float-in var(--dur-base) var(--ease-spring);
}

.floating.is-flipped { animation-name: sf-float-in-up; }

@keyframes sf-float-in {
  from { opacity: 0; transform: translateY(-0.5rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

@keyframes sf-float-in-up {
  from { opacity: 0; transform: translateY(0.5rem) scale(0.97); }
  to   { opacity: 1; transform: none; }
}

.floating-glass {
  background-color: var(--glass-chrome-strong);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-glass-lg);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .floating-glass {
    -webkit-backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-xl)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass-xl);
  }
}

.select-custom[data-ready] .select-native {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.select-trigger {
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-4);
  border: var(--border-base) solid var(--color-border-control);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  text-align: left;
  cursor: pointer;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

.select-custom[data-ready] .select-trigger { display: flex; }

@media (hover: hover) {
  .select-trigger:hover { border-color: var(--color-text-muted); }
}

.select-trigger:focus-visible,
.select-trigger[aria-expanded="true"] {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--shadow-focus);
}

/* Pemicu nonaktif tampak nonaktif seperti .select:disabled, tanpa sorot arah dan tanpa efek tekan. */
.select-trigger:disabled,
.select-trigger:disabled:hover {
  background-color: var(--color-disabled-bg);
  border-color: var(--color-disabled-border);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}
.select-trigger:disabled:active { transform: none; }
.select-trigger:disabled .select-caret { opacity: 0.5; }

.select-value {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-placeholder .select-value { color: var(--color-text-muted); }

.select-caret {
  flex: 0 0 auto;
  width: 0.5rem;
  height: 0.5rem;
  border: solid var(--color-text-muted);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  transform: translateY(-25%) rotate(45deg);
  transition: transform var(--dur-base) var(--ease-out);
}

.select-trigger[aria-expanded="true"] .select-caret {
  transform: translateY(15%) rotate(-135deg);
}

.select-list {
  margin: 0;
  padding: var(--space-2);
  list-style: none;
}

.select-list[hidden] { display: none; }

.select-option {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .select-option:hover,
  .select-option.is-active {
    background-color: var(--color-primary-softer);
    color: var(--color-primary-text);
  }
}

.select-option[aria-selected="true"] {
  background-color: var(--color-primary-soft);
  color: var(--color-primary-text);
  font-weight: var(--fw-semibold);
}

.select-option::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 0.3125rem;
  height: 0.625rem;
  border: solid var(--color-primary);
  border-width: 0 var(--border-thick) var(--border-thick) 0;
  transform: rotate(45deg);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.select-option[aria-selected="true"]::after { opacity: 1; }

/* Pilihan yang disaring skrip (dialog dashboard, K-44) tidak tampil di daftar. */
.select-option[hidden] { display: none; }

/* ---------- 14. UMPAN BALIK --------------------------------- */
/* Setiap umpan balik wajib memuat ikon dan judul teks. */

.feedback {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-alt);
  color: var(--color-text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.feedback-icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--icon-tile-md);
  height: var(--icon-tile-md);
  border-radius: var(--radius-circle);
  background-color: var(--color-bg-muted);
  font-size: var(--fs-lg);
  line-height: 1;
}

.feedback-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-width: 0;
  flex: 1;
}

.feedback-title {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: inherit;
}

.feedback-success { background-color: var(--color-success-soft); border-color: var(--color-success-border); color: var(--color-success-text); }
.feedback-warning { background-color: var(--color-warning-soft); border-color: var(--color-warning-border); color: var(--color-warning-text); }
.feedback-danger  { background-color: var(--color-danger-soft);  border-color: var(--color-danger-border);  color: var(--color-danger-text); }
.feedback-info    { background-color: var(--color-info-soft);    border-color: var(--color-info-border);    color: var(--color-info-text); }
.feedback-primary { background-color: var(--color-primary-softer); border-color: var(--color-primary-border); color: var(--color-primary-text); }
.feedback-petunjuk { background-color: var(--color-petunjuk-soft); border-color: var(--color-petunjuk-border); color: var(--color-petunjuk-text); }

.feedback-success .feedback-icon  { background-color: var(--color-success-ikon); }
.feedback-warning .feedback-icon  { background-color: var(--color-warning-ikon); }
.feedback-danger  .feedback-icon  { background-color: var(--color-danger-ikon); }
.feedback-info    .feedback-icon  { background-color: var(--color-info-ikon); }
.feedback-primary .feedback-icon  { background-color: var(--color-primary-soft); }
.feedback-petunjuk .feedback-icon { background-color: var(--color-petunjuk-ikon); }

.feedback-action {
  flex: 0 0 auto;
  align-self: center;
  margin-left: auto;
}

.feedback-compact {
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  gap: var(--space-3);
}

.feedback-compact .feedback-icon {
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  font-size: var(--fs-base);
}

.feedback-compact .feedback-title { font-size: var(--fs-base); }

@media (max-width: 47.99rem) {
  .feedback { flex-wrap: wrap; }
  .feedback-action {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* ---------- 16. EMPTY STATE & KERANGKA ---------------------- */

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-14) var(--space-6);
  border: var(--border-base) dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
  background-color: var(--glass-panel);
  text-align: center;
}

.empty-state-title {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.empty-state-text {
  max-width: var(--measure-narrow);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}

/* Kerangka memuat (G-08): kilau bergerak, hanya transform. */
.skeleton {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.skeleton-baris {
  position: relative;
  height: var(--space-4);
  border-radius: var(--radius-xs);
  background-color: var(--color-surface-sunken);
  overflow: hidden;
}

.skeleton-baris-judul { height: var(--space-6); width: 60%; }
.skeleton-baris-pendek { width: 40%; }
.skeleton-baris-blok { height: var(--space-24); border-radius: var(--radius-md); }

.skeleton-baris::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--glass-chrome-soft), transparent);
  transform: translateX(-100%);
  animation: sf-kilau 1.4s var(--ease-in-out) infinite;
}

@keyframes sf-kilau {
  to { transform: translateX(100%); }
}

/* ---------- 17. DIALOG (MODAL) ------------------------------ */
/* Memakai elemen <dialog> asli (fokus terkurung, Escape, inert) dengan
   tampilan kotak kaca referensi. Dipakai untuk D-02–D-06. */

.modal {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  width: min(100% - var(--space-8), var(--container-xs));
  max-width: none;
  max-height: calc(100vh - var(--space-8));
  max-height: calc(100dvh - var(--space-8));
  margin: auto;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

.modal::backdrop {
  background-color: var(--color-overlay);
  animation: sf-modal-redup var(--dur-instant) var(--ease-out);
}

.modal[open] .modal-kotak {
  animation: sf-modal-masuk var(--dur-fast) var(--ease-spring);
}

.modal-kotak {
  position: relative;
  display: grid;
  justify-items: center;
  gap: var(--space-4);
  width: 100%;
  max-height: calc(100vh - var(--space-8));
  max-height: calc(100dvh - var(--space-8));
  overflow-y: auto;
  padding: var(--space-8);
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-xl);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-xl);
  text-align: center;
}

.modal-kotak-lebar {
  justify-items: stretch;
  text-align: start;
}

.modal-lebar { width: min(100% - var(--space-8), var(--container-md)); }

.modal-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

.modal-text {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--color-text-secondary);
}

.modal-aksi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

.modal-kotak-lebar .modal-aksi { justify-content: flex-end; }

/* KP-172: bila isi jendela lebih panjang dari kotaknya (kelas dari ui.js, terutama di ponsel), bilah tombol menempel di
   bawah kotak supaya tombol utamanya selalu terlihat. Acuan tempelnya tepi kotak (jarak tepi bawah kotak dibaca ui.js),
   bukan tepi isi, supaya tidak ada isi yang terlihat di bawah bilah. */
.modal-kotak-gulir .modal-aksi {
  position: sticky;
  bottom: calc(-1 * var(--modal-pad-b, var(--space-8)));
  z-index: 1;
  justify-self: stretch;
  margin-inline: calc(-1 * var(--modal-pad-x, var(--space-8)));
  margin-bottom: calc(-1 * var(--modal-pad-b, var(--space-8)));
  padding: var(--space-3) var(--modal-pad-x, var(--space-8)) var(--space-4);
  border-top: var(--border-thin) solid var(--color-border-subtle);
  background-color: var(--color-surface);
}

.modal-kotak:focus { outline: none; }

.modal-tutup {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: grid;
  place-items: center;
  width: var(--icon-tile-sm);
  height: var(--icon-tile-sm);
  border: none;
  border-radius: var(--radius-circle);
  background-color: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  touch-action: manipulation;
  transition: var(--transition-colors), transform var(--dur-fast) var(--ease-out);
}

@media (hover: hover) {
  .modal-tutup:hover {
    background-color: var(--color-bg-muted);
    color: var(--color-text);
  }
}

.modal-tutup:active { transform: scale(var(--press-scale)); }

.modal-tutup:focus-visible {
  outline: none;
  box-shadow: var(--shadow-focus);
}

@keyframes sf-modal-redup {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sf-modal-masuk {
  from { opacity: 0; transform: translateY(var(--space-4)) scale(0.96); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 18. TABEL --------------------------------------- */

.table-wrap {
  /* AUD-36: wadah bergulir menjadi acuan posisi, supaya teks khusus pembaca layar di kepala tabel tidak keluar dan
     melebarkan halaman. Menu baris dipindah ke body saat dibuka, jadi tidak terpotong. */
  position: relative;
  overflow-x: auto;
  border: var(--border-thin) solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.table {
  width: 100%;
  min-width: 34rem;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  border-bottom: var(--border-thin) solid var(--color-border-subtle);
  vertical-align: middle;
}

.table thead th {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background-color: var(--color-surface-alt);
}

/* Termasuk sel judul baris (th scope="row"), supaya baris terakhir tidak menyisakan garis di bawah sel pertamanya. */
.table tbody tr:last-child td,
.table tbody tr:last-child th { border-bottom: none; }

.table code { white-space: nowrap; }

/* ---------- 19. FOOTER -------------------------------------- */

.footer {
  position: relative;
  background-color: var(--color-bg-brand);
  color: var(--color-text-inverse-muted);
  padding-block: var(--space-8) var(--space-6);
  font-size: var(--fs-sm);
}

.footer::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 0;
  height: var(--border-heavy);
  background: var(--gradient-fajar);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--fs-xs);
}

.footer a {
  color: var(--color-text-inverse-muted);
  text-decoration: none;
  transition: var(--transition-colors);
}

@media (hover: hover) {
  .footer a:hover { color: var(--color-text-inverse); }
}

/* ---------- 20. DAFTAR DEFINISI ----------------------------- */

.kamus {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: var(--space-2) var(--space-4);
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
}

.kamus dt {
  font-weight: var(--fw-bold);
  color: var(--color-text);
}

.kamus dd { margin: 0; }

/* ---------- 21. TOMBOL TEMA (matahari <-> bulan, DEC-076) ----
   Kaca bulat di bilah navigasi. Ikonnya satu SVG: lingkaran inti +
   delapan sinar + lubang topeng. Tema gelap menggeser lubang topeng
   ke dalam lingkaran (jadi sabit) dan memadamkan sinar.
   Lonceng pengumuman situs (KP-179) di sebelahnya memakai kaca bulat
   yang sama, dan baris Pengumuman di panel menu ponsel memakai bentuk
   baris Mode gelap. */

.tombol-tema,
.tombol-lonceng,
.tombol-pengumuman-baris {
  position: relative;
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: var(--control-height-md);
  height: var(--control-height-md);
  padding: 0;
  border-radius: var(--radius-circle);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--glass-chrome-strong);
  box-shadow: var(--shadow-glass);
  color: var(--color-primary-text);
  cursor: pointer;
  overflow: hidden;
  transition: var(--transition-lift), background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out), color var(--dur-base) var(--ease-out);
}

@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .tombol-tema,
  .tombol-lonceng,
  .tombol-pengumuman-baris {
    -webkit-backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    backdrop-filter: blur(var(--blur-sm)) saturate(var(--glass-saturate));
    background-color: var(--glass-chrome);
    border-color: var(--glass-border);
    box-shadow: var(--glass-highlight), var(--shadow-glass);
  }
}

/* Cahaya lembut di balik kaca: keemasan saat terang, kebiruan saat gelap. */
.tombol-tema::before,
.tombol-lonceng::before,
.tombol-pengumuman-baris::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: radial-gradient(closest-side, var(--color-secondary-soft), transparent 70%);
  opacity: 0.9;
  pointer-events: none;
  transition: background var(--dur-slower) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}

:root[data-tema="gelap"] .tombol-tema::before,
:root[data-tema="gelap"] .tombol-lonceng::before,
:root[data-tema="gelap"] .tombol-pengumuman-baris::before {
  background: radial-gradient(closest-side, var(--color-primary-soft), transparent 70%);
}

@media (hover: hover) and (pointer: fine) {
  .tombol-tema:hover,
  .tombol-lonceng:hover,
  .tombol-pengumuman-baris:hover {
    background-color: var(--glass-card-hover);
    border-color: var(--color-primary-border);
    transform: translate3d(0, -2px, 0);
    box-shadow: var(--shadow-glass-md);
  }
}

.tombol-tema:active,
.tombol-lonceng:active,
.tombol-pengumuman-baris:active { transform: scale(var(--press-scale)); }

.tombol-tema:focus-visible,
.tombol-lonceng:focus-visible,
.tombol-pengumuman-baris:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: var(--focus-ring-offset);
}

.ikon-tema {
  position: relative;
  width: 1.375rem;
  height: 1.375rem;
  overflow: visible;
  fill: currentColor;
  stroke: currentColor;
  transition: transform var(--dur-slower) var(--ease-spring);
}

:root[data-tema="gelap"] .ikon-tema { transform: rotate(-18deg); }

.tema-inti {
  r: 5.2px;
  transition: r var(--dur-slow) var(--ease-spring);
}

:root[data-tema="gelap"] .tema-inti { r: 8.6px; }

/* Lubang topeng menunggu di luar lingkaran saat terang, lalu masuk membentuk sabit. */
.tema-lubang {
  cx: 28px;
  cy: 2px;
  r: 9.4px;
  transition: cx var(--dur-slower) var(--ease-emphasized), cy var(--dur-slower) var(--ease-emphasized);
}

:root[data-tema="gelap"] .tema-lubang {
  cx: 18.6px;
  cy: 5.4px;
}

.tema-sinar {
  stroke-width: 1.9;
  stroke-linecap: round;
  transform-origin: 12px 12px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}

:root[data-tema="gelap"] .tema-sinar {
  opacity: 0;
  transform: scale(0.35) rotate(50deg);
}

/* DEC-165: tiap sinar padam dan menyala bergiliran, searah jarum jam. */
.tema-sinar line {
  transform-origin: 12px 12px;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-slow) var(--ease-spring);
}

:root[data-tema="gelap"] .tema-sinar line { opacity: 0; transform: scale(0.4); }
.tema-sinar line:nth-child(1) { transition-delay: 0ms; }
.tema-sinar line:nth-child(2) { transition-delay: 30ms; }
.tema-sinar line:nth-child(3) { transition-delay: 60ms; }
.tema-sinar line:nth-child(4) { transition-delay: 90ms; }
.tema-sinar line:nth-child(5) { transition-delay: 120ms; }
.tema-sinar line:nth-child(6) { transition-delay: 150ms; }
.tema-sinar line:nth-child(7) { transition-delay: 180ms; }
.tema-sinar line:nth-child(8) { transition-delay: 210ms; }

/* DEC-165: saat ditekan, tombol tema berdenyut seperti pegas dan cahaya di baliknya berpendar penuh. */
@keyframes sf-tema-denyut {
  0% { transform: scale(1); }
  35% { transform: scale(0.86); }
  70% { transform: scale(1.1); }
  100% { transform: scale(1); }
}

.tombol-tema.is-beralih { animation: sf-tema-denyut 640ms var(--ease-emphasized); }
.tombol-tema.is-beralih::before { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .ikon-tema, .tema-inti, .tema-lubang, .tema-sinar, .tema-sinar line, .tombol-tema, .tombol-tema::before { transition: none; }
  .tombol-tema.is-beralih { animation: none; }
}

@media print { .tombol-tema { display: none; } }

/* DEC-077: tombol tema — bulat di pojok kanan pada layar lebar, baris penuh di menu ponsel. */
.tombol-tema-teks { display: inline-flex; }
.tema-teks-gelap { display: none; }
:root[data-tema="gelap"] .tema-teks-terang { display: none; }
:root[data-tema="gelap"] .tema-teks-gelap { display: inline; }

.tombol-tema-baris,
.tombol-pengumuman-baris {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-3);
  width: 100%;
  height: auto;
  min-height: var(--control-height-md);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  background-color: var(--glass-chrome-soft);
}

.tombol-tema-baris .ikon-tema,
.tombol-pengumuman-baris .icon { width: 1.25rem; height: 1.25rem; flex: 0 0 auto; color: var(--color-primary-text); }
.tombol-tema-baris::before,
.tombol-pengumuman-baris::before { inset: -60% auto -60% -10%; width: 4rem; }

@media (hover: hover) and (pointer: fine) {
  .tombol-tema-baris:hover,
  .tombol-pengumuman-baris:hover { transform: none; color: var(--color-text); }
}

/* Layar lebar: baris di dalam menu disembunyikan, yang dipakai tombol bulat di pojok kanan. */
@media (min-width: 62rem) { .navbar-tema-baris { display: none; } }

/* Ponsel dan tablet: tombol bulat di bilah atas disembunyikan agar bilah tetap ringkas;
   penggantinya baris di dalam panel menu. Header siswa tidak punya panel menu, jadi
   tombol bulatnya tetap tampil di sana. */
@media (max-width: 61.99rem) {
  .navbar-publik .navbar-actions .tombol-tema { display: none; }
}

/* AUD-40 (KP-134): header siswa tidak punya panel menu, jadi tidak pernah membungkus ke baris kedua seperti navigasi
   publik. Pada 48 sampai 62rem nama siswa yang panjang dipotong dengan elipsis (scafolya.css bagian 18). */
@media (max-width: 61.99rem) {
  .navbar:not(.navbar-publik) .navbar-inner { flex-wrap: nowrap; }
}

/* Pil nama baru tampil mulai 48rem; celahnya dirapatkan sampai 62rem supaya nama mendapat ruang lebih sebelum terpotong. */
@media (min-width: 48rem) and (max-width: 61.99rem) {
  .navbar:not(.navbar-publik) .navbar-inner { gap: var(--space-4); }
  .navbar:not(.navbar-publik) .navbar-inner > .navbar-actions { gap: var(--space-2); }
}

/* Header siswa < 36rem: brand + tiga kontrol ikon (Cara pakai, tema, Keluar) harus muat
   SATU BARIS. Anggaran 360px: merek 141 + kontrol 3x40 + celah = ~281 dari 312 tersedia
   (KP-43: sisakan >= 30px). Tinggi target sentuh tetap >= 44px. */
/* Header siswa < 360px: wordmark disembunyikan lebih awal daripada navigasi publik
   (kontrolnya satu lebih banyak), menyisakan simbol tangga. */
@media (max-width: 22.49rem) {
  .navbar:not(.navbar-publik) .brand-ringkas > picture,
  .navbar:not(.navbar-publik) .brand-ringkas .brand-wm,
  :root[data-tema="gelap"] .navbar:not(.navbar-publik) .brand-tema .brand-wm-gelap { display: none; }
  .navbar:not(.navbar-publik) .brand-ringkas .brand-symbol { margin-right: calc(var(--brand-symbol-kanan-0) * var(--h) / var(--brand-symbol-fill-0) - var(--brand-symbol-kanan) * var(--h) / var(--brand-symbol-fill)); }
}

@media (max-width: 35.99rem) {
  .navbar:not(.navbar-publik) .navbar-inner { gap: var(--space-2); flex-wrap: nowrap; }
  /* Bila ruang tetap kurang (font sistem besar), merek terpotong dari kanan —
     lebih baik daripada barisnya terbungkus atau halaman meluber. */
  .navbar:not(.navbar-publik) .navbar-brand { min-width: 0; overflow: hidden; }
  .navbar:not(.navbar-publik) .navbar-actions { gap: var(--space-1); }
  .navbar:not(.navbar-publik) .brand-ringkas { --h: 1.9rem; }
  .navbar:not(.navbar-publik) .navbar-actions .btn-sm,
  .navbar:not(.navbar-publik) .tombol-tema {
    width: 2.5rem;
    min-width: 2.5rem;
    padding-inline: 0;
  }
}

/* DEC-078 — irama celah bilah navigasi (diukur pada 1366px).
   Sebelumnya: teks menu terakhir -> Masuk = 40px (celah kotak 24 + padding tautan 16),
   sedangkan Masuk -> tombol tema hanya 12px, sehingga tombol tema terlihat menempel.
   Sesudahnya: 24px dan 20px — dua celah yang terbaca setara, tepi kanan tombol tema
   tetap rata dengan tepi kiri merek. */
@media (min-width: 62rem) {
  .navbar-publik .navbar-inner { gap: var(--space-2); }
}

@media (min-width: 36rem) {
  .navbar-actions > .tombol-tema { margin-left: var(--space-2); }
}

/* ---------- 26. BATANG GULIR KACA (DEC-165, DEC-179) ---------
   Batang tipis tembus pandang berjempol bulat tanpa panah, mengikuti tinta tema, untuk semua area bergulir
   di dalam komponen: kotak dialog, panel mengambang, pembungkus tabel, kolom teks panjang, bilah tab, dan
   sejak DEC-179 juga kolom soal yang menempel di layar kerja siswa serta pembungkus tabel isian.
   Chromium dan Safari memakai pseudo-elemen WebKit; Firefox memakai scrollbar-width dan scrollbar-color.
   Keduanya tidak boleh dipasang bersamaan: sejak Chrome 121, scrollbar-width membuat gaya WebKit diabaikan.
   Karena itu area yang didaftarkan di sini tidak boleh memasang scrollbar-width di aturannya sendiri. */
@supports selector(::-webkit-scrollbar) {
  .modal-kotak::-webkit-scrollbar, .floating::-webkit-scrollbar, .table-wrap::-webkit-scrollbar,
  .textarea::-webkit-scrollbar, .tablist::-webkit-scrollbar,
  .layout-kerja-soal::-webkit-scrollbar, .tabel-gulir::-webkit-scrollbar { width: 10px; height: 10px; }

  .modal-kotak::-webkit-scrollbar-track, .floating::-webkit-scrollbar-track, .table-wrap::-webkit-scrollbar-track,
  .textarea::-webkit-scrollbar-track, .tablist::-webkit-scrollbar-track,
  .layout-kerja-soal::-webkit-scrollbar-track, .tabel-gulir::-webkit-scrollbar-track { background: transparent; }

  .modal-kotak::-webkit-scrollbar-thumb, .floating::-webkit-scrollbar-thumb, .table-wrap::-webkit-scrollbar-thumb,
  .textarea::-webkit-scrollbar-thumb, .tablist::-webkit-scrollbar-thumb,
  .layout-kerja-soal::-webkit-scrollbar-thumb, .tabel-gulir::-webkit-scrollbar-thumb {
    background-color: var(--gulir-jempol);
    background-clip: padding-box;
    border: 3px solid transparent;
    border-radius: var(--radius-pill);
  }

  .modal-kotak::-webkit-scrollbar-thumb:hover, .floating::-webkit-scrollbar-thumb:hover, .table-wrap::-webkit-scrollbar-thumb:hover,
  .textarea::-webkit-scrollbar-thumb:hover, .tablist::-webkit-scrollbar-thumb:hover,
  .layout-kerja-soal::-webkit-scrollbar-thumb:hover, .tabel-gulir::-webkit-scrollbar-thumb:hover { background-color: var(--gulir-jempol-hover); }

  .modal-kotak::-webkit-scrollbar-button, .floating::-webkit-scrollbar-button, .table-wrap::-webkit-scrollbar-button,
  .textarea::-webkit-scrollbar-button, .tablist::-webkit-scrollbar-button,
  .layout-kerja-soal::-webkit-scrollbar-button, .tabel-gulir::-webkit-scrollbar-button { width: 0; height: 0; display: none; }

  .modal-kotak::-webkit-scrollbar-corner, .floating::-webkit-scrollbar-corner, .table-wrap::-webkit-scrollbar-corner,
  .textarea::-webkit-scrollbar-corner, .tablist::-webkit-scrollbar-corner,
  .layout-kerja-soal::-webkit-scrollbar-corner, .tabel-gulir::-webkit-scrollbar-corner { background: transparent; }

  /* Jempol menjauhi sudut membulat kotak dialog, panel mengambang, kartu soal, dan bingkai tabel isian. */
  .modal-kotak::-webkit-scrollbar-track { margin-block: var(--radius-lg); }
  .floating::-webkit-scrollbar-track { margin-block: var(--radius-sm); }
  .layout-kerja-soal::-webkit-scrollbar-track { margin-block: var(--radius-lg); }
  .tabel-gulir::-webkit-scrollbar-track { margin-inline: var(--radius-md); }
}

@supports not selector(::-webkit-scrollbar) {
  .modal-kotak, .floating, .table-wrap, .textarea, .tablist, .layout-kerja-soal, .tabel-gulir {
    scrollbar-width: thin;
    scrollbar-color: var(--gulir-jempol) transparent;
  }
}

/* ---------- 27. TUNTUNAN PETUNJUK BERSOROT (DEC-190, DEC-191) -
   Lapisan selayar dari tuntun.js: SVG gelap berlubang di atas bagian yang dimaksud petunjuk, cincin amber di
   sekeliling kotak yang disorot, dan balon berisi teks Petunjuk. Lapisan tidak menangkap klik (isi halaman sudah
   inert), jadi halaman tetap dapat digulir; hanya balon yang dapat disentuh. Opasitas lapisan, luncuran lubang,
   letak balon, dan gulir halaman digerakkan tuntun.js bingkai demi bingkai, jadi di sini tidak ada transisinya. */

.tuntun {
  --tuntun-latar: rgba(1, 16, 43, 0.64);
  --tuntun-cincin: var(--amber-400);
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-toast) + 50);
  pointer-events: none;
}

/* Selama tuntunan, gulir halaman dijalankan tuntun.js bersama luncuran sorotan. Gulir halus bawaan html dimatikan
   supaya setiap langkah gulirnya langsung dan tidak tertinggal dari sorotan. */
html.tuntun-aktif { scroll-behavior: auto; }

/* Saat menutup, balon yang sedang memudar tidak lagi menerima sentuhan. */
.tuntun.is-tutup .tuntun-balon { pointer-events: none; }

.tuntun-latar {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.tuntun-gelap { fill: var(--tuntun-latar); }

.tuntun-cincin-kotak {
  fill: none;
  stroke: var(--tuntun-cincin);
  stroke-width: 3;
}

.tuntun-balon {
  position: fixed;
  top: 0;
  left: 0;
  width: min(23rem, calc(100vw - 24px));
  display: grid;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-5) var(--space-5);
  border-radius: var(--radius-lg);
  border: var(--border-thin) solid var(--color-border);
  background-color: var(--color-surface);
  color: var(--color-text);
  box-shadow: var(--shadow-xl);
  pointer-events: auto;
  align-content: start;
}

.tuntun-balon:focus { outline: none; }

/* Saat berpindah langkah, isi balon memudar keluar lalu masuk (tuntun.js: is-ganti), tinggi balon menyesuaikan
   perlahan ke isi barunya (is-tinggi), dan ekornya disembunyikan selama balon meluncur (is-gerak). */
.tuntun-hitung,
.tuntun-teks,
.tuntun-aksi { transition: opacity 150ms var(--ease-out); }

.tuntun-balon.is-ganti :is(.tuntun-hitung, .tuntun-teks, .tuntun-aksi) { opacity: 0; }

.tuntun-balon.is-tinggi {
  overflow: hidden;
  transition: height 280ms var(--ease-in-out);
}

.tuntun-kepala {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.tuntun-lencana {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: 2px var(--space-3) 2px var(--space-2);
  border-radius: var(--radius-pill);
  background-color: var(--color-petunjuk-soft);
  color: var(--color-petunjuk-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tuntun-lencana .icon { width: 1.1em; height: 1.1em; }

.tuntun-hitung {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
}

.tuntun-tutup {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: calc(-1 * var(--space-2)) calc(-1 * var(--space-3)) calc(-1 * var(--space-2)) auto;
  border: 0;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.tuntun-tutup .icon { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) and (pointer: fine) {
  .tuntun-tutup:hover { background-color: var(--color-surface-sunken); color: var(--color-text); }
}

.tuntun-tutup:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-border-focus);
  outline-offset: 2px;
}

.tuntun-teks {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-semibold);
  text-wrap: pretty;
}

.tuntun-aksi {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
}

.tuntun-aksi .btn { min-height: 44px; }
.tuntun-aksi .tuntun-sebelumnya { margin-right: auto; }
.tuntun-aksi .tuntun-sebelumnya[hidden] { display: none; }

/* Ekor balon menunjuk bagian yang disorot; letaknya dari tuntun.js (--panah-x atau --panah-y). */
.tuntun-panah {
  position: absolute;
  width: 14px;
  height: 14px;
  background-color: var(--color-surface);
  border: var(--border-thin) solid var(--color-border);
  transform: rotate(45deg);
  display: none;
  transition: opacity 180ms var(--ease-out);
}

.tuntun-balon.is-gerak .tuntun-panah { opacity: 0; }

.tuntun-balon[data-posisi="bawah"] .tuntun-panah {
  display: block;
  top: -8px;
  left: calc(var(--panah-x, 50%) - 7px);
  border-right: 0;
  border-bottom: 0;
}

.tuntun-balon[data-posisi="atas"] .tuntun-panah {
  display: block;
  bottom: -8px;
  left: calc(var(--panah-x, 50%) - 7px);
  border-left: 0;
  border-top: 0;
}

.tuntun-balon[data-posisi="kanan"] .tuntun-panah {
  display: block;
  left: -8px;
  top: calc(var(--panah-y, 50%) - 7px);
  border-right: 0;
  border-top: 0;
}

.tuntun-balon[data-posisi="kiri"] .tuntun-panah {
  display: block;
  right: -8px;
  top: calc(var(--panah-y, 50%) - 7px);
  border-left: 0;
  border-bottom: 0;
}

/* Layar sempit: balon menjadi panel di tepi bawah layar, dan tuntun.js menggulir sasaran ke ruang di atasnya. */
.tuntun-balon.is-dok {
  top: auto;
  left: var(--space-3);
  right: var(--space-3);
  bottom: max(var(--space-3), env(safe-area-inset-bottom));
  width: auto;
}

/* Layar pendek, misalnya perbesaran 200 persen di laptop atau ponsel mendatar: jarak di dalam balon dirapatkan supaya
   bagian yang disorot tetap mendapat ruang. Ukuran huruf tidak dikecilkan. */
@media (max-height: 32rem) {
  .tuntun-balon {
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
  }
}

:root[data-tema="gelap"] .tuntun {
  --tuntun-latar: rgba(0, 0, 0, 0.72);
  --tuntun-cincin: var(--amber-300);
}

/* K-47: sorotan butir yang belum tepat sebelum Lanjut atau Kumpulkan, sewarna cincin tuntunan petunjuk. Cincin meluncur
   dari tombol Tunjukkan bingkai demi bingkai (app.js), lalu sorotan menetap di setiap butir sampai butir itu tepat. */
:root { --gerbang-cincin: var(--amber-400); --gerbang-cincin-luar: rgba(248, 174, 26, 0.24); }
:root[data-tema="gelap"] { --gerbang-cincin: var(--amber-300); --gerbang-cincin-luar: rgba(255, 201, 79, 0.24); }
/* Cincin berjarak --gerbang-jarak dari tepi unit, supaya nomor dan isi butir tidak menempel ke cincin. Cincin beserta
   pendarnya (jarak + 9 piksel) tetap di dalam padding kartu (20 piksel), karena kartu memotong isi yang meluap. Tabel A,
   B, C sudah berbingkai dan berpadding, jadi cincinnya tepat di bingkai itu. app.js (kotakSorot) membaca --gerbang-jarak,
   jadi cincin yang meluncur mendarat tepat di tempat sorotan ini. */
.butir { --gerbang-jarak: 8px; position: relative; }
.tabel-unit { --gerbang-jarak: 1px; position: relative; }
.butir::after,
.tabel-unit::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--gerbang-jarak));
  border-radius: calc(var(--radius-md) + var(--gerbang-jarak));
  box-shadow: 0 0 0 3px var(--gerbang-cincin), 0 0 0 9px var(--gerbang-cincin-luar);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out);
}
/* Butir bergaris pemisah di atasnya (scafolya.css bagian 6, juga di sekitar wadah cabang): garisnya di tepi atas padding,
   jadi cincin dimulai tepat di atas isi butir. Pemilihnya sama dengan BUTIR_BERGARIS di app.js. */
.butir + .butir::after,
.butir + .cabang-wadah > .butir:first-child::after,
.cabang-wadah + .butir::after { top: calc(var(--space-6) - var(--gerbang-jarak)); }
/* Sorotan terpasang seketika (serah terima dari cincin yang meluncur), lalu memudar begitu unitnya sudah diperiksa. */
.butir.is-sorot-gerbang::after,
.tabel-unit.is-sorot-gerbang::after { opacity: 1; transition: none; }
.cincin-gerbang {
  position: fixed;
  top: 0;
  left: 0;
  z-index: calc(var(--z-toast) + 40);
  pointer-events: none;
  border-radius: calc(var(--radius-md) + 8px);
  box-shadow: 0 0 0 3px var(--gerbang-cincin), 0 0 0 9px var(--gerbang-cincin-luar);
}
@media (prefers-reduced-motion: reduce) {
  .butir::after,
  .tabel-unit::after { transition: none; }
}
@media (forced-colors: active) {
  .butir.is-sorot-gerbang::after,
  .tabel-unit.is-sorot-gerbang::after,
  .cincin-gerbang { box-shadow: none; outline: 3px solid Highlight; }
}

@media (prefers-reduced-motion: reduce) {
  .tuntun-hitung,
  .tuntun-teks,
  .tuntun-aksi,
  .tuntun-panah,
  .tuntun-balon.is-tinggi { transition: none; }
}

@media (forced-colors: active) {
  .tuntun-cincin-kotak { stroke: Highlight; }
  .tuntun-balon { border: 2px solid CanvasText; }
}

@media print {
  .tuntun { display: none !important; }
}