/* Design system v2 materials (docs/design-system.md 6): buttons, status, forms and feedback, in
   the Nansen style. Page layout stays as it is (owner, 13 Oct 2026). Every value comes from
   tokens.css (--kc-*); font sizes only through var(--kc-fs-*) or the type-* classes, never a
   number (scripts/check-type.mjs). The source is kotas-landing/src/app/components.css (imported by
   globals.css); the theme holds a byte-identical copy, printed inline by kc_components_css(), and
   `npm run check` fails when the two differ. Motion is transform, opacity and filter, all off under
   prefers-reduced-motion. */

/* ── Buttons (6.1): Nansen's rounded rectangles, radius 16 ─────────────── */
.kc-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: var(--kc-s1);
  min-height: 48px; padding: 0 var(--kc-s3); border-radius: var(--kc-r-btn); border: 1px solid transparent;
  font-family: var(--kc-font-body); font-size: var(--kc-fs-small); font-weight: 500; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: transform var(--kc-dur-fast) var(--kc-ease-out), box-shadow var(--kc-dur-hover) ease, background-color var(--kc-dur-fast) ease, border-color var(--kc-dur-fast) ease;
}
.kc-btn i { font-size: var(--kc-fs-small); }
.kc-btn:focus-visible, .kc-link:focus-visible, .kc-link-isi:focus-visible, .kc-chip:focus-visible, .kc-seg button:focus-visible {
  outline: 2px solid var(--kc-yellow); outline-offset: 2px;
}
.kc-btn:active { transform: scale(0.98); }
.kc-btn[disabled], .kc-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; box-shadow: none; }
.kc-btn-lg { min-height: 60px; font-size: var(--kc-fs-body); }

/* The brand gradient fill (5.1, owner 22 Oct 2026), solid yellow under it if the gradient is
   missing. Hover adds only the glow; the fill never changes. It starts at the border box, or the
   1 px transparent edge repeats it (gold row on top, yellow row at the bottom, TS-01). */
.kc-btn-primary { background-color: var(--kc-yellow); background-image: var(--kc-grad-brand); background-origin: border-box; color: var(--kc-on-yellow); }
.kc-btn-primary:hover, .kc-btn-primary:focus-visible { box-shadow: var(--kc-shadow-cta); }

/* Thin glass, like Nansen's Download App button. */
.kc-btn-secondary { background: var(--kc-glass-thin); color: var(--kc-white); border-color: var(--kc-line-strong); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kc-btn-secondary, .kc-btn-icon { -webkit-backdrop-filter: blur(var(--kc-glass-blur-btn)); backdrop-filter: blur(var(--kc-glass-blur-btn)); }
}
.kc-btn-secondary:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }

/* Pill with caps (Nansen's LEARN MORE, Inter instead of the mono face): glow and a gradient
   edge on hover, the arrow nudges right. */
.kc-btn-pill {
  isolation: isolate; min-height: 44px; padding: 0 26px; border-radius: var(--kc-r-pill);
  background: var(--kc-card); border-color: rgba(255, 255, 255, 0.04); color: var(--kc-white);
  font-size: var(--kc-fs-caption); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.kc-btn-pill::before {
  content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--kc-grad-line); opacity: 0; transition: opacity var(--kc-dur-hover) ease;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
.kc-btn-pill:hover, .kc-btn-pill:focus-visible { box-shadow: var(--kc-shadow-cta); }
.kc-btn-pill:hover::before, .kc-btn-pill:focus-visible::before { opacity: 1; }
.kc-panah { display: inline-block; transition: transform var(--kc-dur-hover) var(--kc-ease-out); }
.kc-btn-pill:hover .kc-panah, .kc-link:hover .kc-panah { transform: translateX(4px); }

/* Border beam: one light dot running round the edge, one per screen (5.3). A conic gradient
   turned with transform (not a repainted background like Nansen), the fill sits 2px inside. */
.kc-btn-beam { isolation: isolate; overflow: hidden; border: 0; background: rgba(255, 255, 255, 0.05); }
.kc-btn-beam::before {
  content: ""; position: absolute; z-index: -2; inset: auto; left: 50%; top: 50%; width: 300%; aspect-ratio: 1;
  opacity: 1; -webkit-mask: none; mask: none; padding: 0; border-radius: 0;
  background: conic-gradient(from 0deg, transparent 0 78%, var(--kc-yellow) 92%, transparent 100%);
  transform: translate(-50%, -50%); animation: kc-beam 2.7s linear infinite;
}
.kc-btn-beam::after { content: ""; position: absolute; inset: 2px; z-index: -1; border-radius: inherit; background: var(--kc-card); }
@keyframes kc-beam { from { transform: translate(-50%, -50%) rotate(0turn); } to { transform: translate(-50%, -50%) rotate(1turn); } }

/* For actions that can't be undone; always opens a confirmation dialog first (6.2). */
.kc-btn-danger { background: transparent; color: var(--kc-error); border-color: var(--kc-error); }
.kc-btn-danger:hover { background: rgba(255, 92, 92, 0.08); }
.kc-btn-icon { width: 44px; min-height: 44px; padding: 0; border-radius: var(--kc-r-pill); border-color: var(--kc-line-strong); background: var(--kc-glass-thin); color: var(--kc-white); }
.kc-btn-icon i { font-size: var(--kc-fs-h3); }
.kc-btn-icon:hover { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.3); }
.kc-btn-busy::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent;
  animation: kc-spin 0.8s linear infinite;
}
@keyframes kc-spin { to { transform: rotate(360deg); } }
/* A pair (primary plus glass secondary) stacks full width on phones, like Nansen's hero. */
.kc-btn-pasangan { display: flex; flex-wrap: wrap; gap: var(--kc-s2); }
@media (max-width: 639px) { .kc-btn-pasangan { flex-direction: column; } .kc-btn-pasangan .kc-btn { width: 100%; } }

/* Text link: yellow with an arrow, turns white slowly (Nansen). Links inside a paragraph keep
   an underline (.kc-link-isi) so they're not marked by color alone. */
/* Price cards (design 6a): the old SVG card art rebuilt in CSS, same light, new corner and card
   color. A white line that fades toward the corners, an inner glow along the edges, and a glow at
   the top: white on the right for Exclusive, yellow from the top left for Exclusive+. Every size is
   a percent of the card, so the light stretches on a tall phone card the way the SVG did. */
.kc-kartu-harga {
  --kc-kh-tepi: 255, 255, 255; --kc-kh-a: 0.18; --kc-kh-b: 0.1;
  position: relative; border-radius: var(--kc-r-card-lg); background-color: var(--kc-card);
  background-image:
    radial-gradient(65% 12% at 94% 2%, rgba(255, 255, 255, 0.42), transparent),
    linear-gradient(to bottom, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 4.6%, transparent 9.7%),
    linear-gradient(to top, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 1.7%, transparent 6.8%),
    linear-gradient(to right, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 1.8%, transparent 4.8%),
    linear-gradient(to left, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 1.8%, transparent 4.8%);
}
.kc-kartu-harga::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(90deg, transparent 8.4%, #fff 38.7%, transparent 92.3%),
              linear-gradient(180deg, transparent 1.9%, #fff 49.4%, transparent 97.8%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.kc-kartu-harga-plus {
  --kc-kh-tepi: 255, 255, 1; --kc-kh-a: 0.09; --kc-kh-b: 0.05;
  background-image:
    linear-gradient(to bottom right, rgba(255, 255, 1, 0.75), rgba(255, 255, 1, 0.45) 14%, transparent 22%),
    linear-gradient(to bottom, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 4.3%, transparent 9.4%),
    linear-gradient(to top, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 4.3%, transparent 9.4%),
    linear-gradient(to right, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 2%, transparent 4.4%),
    linear-gradient(to left, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 2%, transparent 4.4%);
}
/* On a tall phone card the stretched diagonal ran behind the tagline and the struck price (2.6:1);
   the glow keeps to the corner there so both stay above 4.5:1. */
@media (max-width: 639px) {
  .kc-kartu-harga-plus {
    background-image:
      radial-gradient(45% 22% at 0 0, rgba(255, 255, 1, 0.7), rgba(255, 255, 1, 0.3) 55%, transparent),
      linear-gradient(to bottom, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 4.3%, transparent 9.4%),
      linear-gradient(to top, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 4.3%, transparent 9.4%),
      linear-gradient(to right, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 2%, transparent 4.4%),
      linear-gradient(to left, rgba(var(--kc-kh-tepi), var(--kc-kh-a)), rgba(var(--kc-kh-tepi), var(--kc-kh-b)) 2%, transparent 4.4%);
  }
}

/* Entrance on scroll (Reveal in kotas-landing/src/components/reveal.tsx). The element is hidden
   only once JavaScript runs (html.js, set by an inline script in <head>), so without it everything
   shows; [data-tampil] plays the entrance once with the element's own numbers. */
.kc-reveal {
  --kc-rv-t: none; --kc-rv-f: none;
  --kc-rv-dur: 800ms; --kc-rv-ease: cubic-bezier(0.16, 1, 0.3, 1); --kc-rv-delay: 0ms;
  transition: opacity var(--kc-rv-dur) var(--kc-rv-ease) var(--kc-rv-delay),
              transform var(--kc-rv-dur) var(--kc-rv-ease) var(--kc-rv-delay),
              filter var(--kc-rv-dur) var(--kc-rv-ease) var(--kc-rv-delay);
}
html.js .kc-reveal:not([data-tampil]) {
  opacity: 0;
  transform: var(--kc-rv-t);
  filter: var(--kc-rv-f);
}

/* Brand gradient text (design system 5.1, owner 22 Oct 2026): the key phrase of a heading (.kc-hl)
   and any other big yellow heading or number (.kc-grad-text). Solid yellow comes first, for a
   browser without background-clip: text; a phrase that wraps gets its own gradient on each line;
   Windows high contrast shows plain system text. Links, small yellow text, lines and icons stay
   solid --kc-yellow. */
.kc-hl { font-weight: 600; }
.kc-hl, .kc-grad-text { color: var(--kc-yellow); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kc-hl, .kc-grad-text {
    background-image: var(--kc-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}
@media (forced-colors: active) { .kc-hl, .kc-grad-text { background-image: none; color: CanvasText; } }

.kc-link {
  display: inline-flex; align-items: center; gap: var(--kc-s1); color: var(--kc-yellow); font-weight: 400; text-decoration: none;
  transition: color var(--kc-dur-link) var(--kc-ease-link);
}
.kc-link:hover { color: var(--kc-white); }
.kc-link-isi { color: var(--kc-yellow); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.kc-link-isi:hover { color: var(--kc-white); }

/* ── Card (6.5): a plain container for the components. Existing page cards keep their own shape
   and only take the colors, radius and type (design system 6.5). ─────────────────────────────── */
.kc-card { position: relative; background: var(--kc-card); border: 1px solid var(--kc-line-soft); border-radius: var(--kc-r-card); padding: var(--kc-s3); }

/* ── Status, segments, chips (6.2) ─────────────────────────────────────── */
.kc-pill {
  display: inline-flex; align-items: center; gap: 6px; min-height: 24px; padding: 0 10px; border-radius: var(--kc-r-pill);
  font-family: var(--kc-font-body); font-size: var(--kc-fs-caption); font-weight: 500; line-height: 1; white-space: nowrap;
  background: rgba(255, 255, 255, 0.08); color: var(--kc-white); border: 1px solid transparent;
}
.kc-pill-up { background: rgba(61, 214, 140, 0.12); color: var(--kc-up); }
.kc-pill-down { background: rgba(255, 92, 92, 0.12); color: var(--kc-down); }
.kc-pill-hl { background: transparent; color: var(--kc-yellow); border-color: var(--kc-line-hl); }
/* Filled label for the highlighted choice ("Paling lengkap", "BONUS", tier pill), design 6a, in the
   brand gradient like the primary button. */
.kc-pill-isi { background-color: var(--kc-yellow); background-image: var(--kc-grad-brand); background-origin: border-box; color: var(--kc-on-yellow); }

/* Step numbers, the icon disc of 5.1 (owner, setuju 3, 26 Oct 2026): an <ol class="kc-nomor"> numbers its items in a
   28 px circle of the brand gradient with black digits (solid yellow under it if the gradient doesn't paint). The list
   keeps its own spacing (the item's left padding); one with less room only changes the circle's size, top or digits. */
.kc-nomor { list-style: none; counter-reset: kc-nomor; }
.kc-nomor > li { counter-increment: kc-nomor; position: relative; }
.kc-nomor > li::before {
  content: counter(kc-nomor); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--kc-font-body); font-size: var(--kc-fs-small); font-weight: 600; line-height: 1;
  color: var(--kc-on-yellow); background-color: var(--kc-yellow); background-image: var(--kc-grad-brand);
}

.kc-seg { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--kc-r-pill); background: var(--kc-panel); border: 1px solid var(--kc-line); }
.kc-seg button {
  min-height: 36px; padding: 0 var(--kc-s2); border-radius: var(--kc-r-pill); border: 0; background: transparent; cursor: pointer;
  font-family: var(--kc-font-body); font-size: var(--kc-fs-small); font-weight: 500; color: var(--kc-muted);
  touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--kc-dur-fast) ease, color var(--kc-dur-fast) ease;
}
.kc-seg button:hover { color: var(--kc-white); }
.kc-seg button[aria-pressed="true"], .kc-seg button[aria-selected="true"] { background: rgba(255, 255, 255, 0.10); color: var(--kc-yellow); }

.kc-chip {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border-radius: var(--kc-r-pill); cursor: pointer;
  border: 1px solid var(--kc-line-strong); background: transparent; color: var(--kc-muted);
  font-family: var(--kc-font-body); font-size: var(--kc-fs-small); font-weight: 500;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; transition: border-color var(--kc-dur-fast) ease, color var(--kc-dur-fast) ease;
}
.kc-chip:hover { border-color: rgba(255, 255, 255, 0.3); color: var(--kc-white); }
.kc-chip[aria-pressed="true"] { border-color: var(--kc-line-hl); color: var(--kc-yellow); }
/* 44 px touch targets on phones, tablets and touch screens; a desktop with a mouse keeps 36 (Fase 4 K4-3). */
@media (max-width: 1023px), (pointer: coarse) { .kc-chip, .kc-seg button { min-height: 44px; } }

/* ── Forms (6.3) ───────────────────────────────────────────────────────── */
.kc-form-baris { display: flex; flex-direction: column; gap: var(--kc-s1); }
.kc-label { font-family: var(--kc-font-body); font-size: var(--kc-fs-small); font-weight: 500; color: var(--kc-white); }
.kc-field {
  width: 100%; min-height: 48px; padding: 0 var(--kc-s2); border-radius: var(--kc-r-inner);
  background: var(--kc-panel); border: 1px solid var(--kc-line-strong); color: var(--kc-white);
  font-family: var(--kc-font-body); font-size: var(--kc-fs-body); font-variant-numeric: tabular-nums; outline: none;
  transition: border-color var(--kc-dur-fast) ease, box-shadow var(--kc-dur-fast) ease;
}
/* 16px on every screen (iOS zooms the page on a smaller input): body on phones, small (16) from 640 */
@media (min-width: 640px) { .kc-field { font-size: var(--kc-fs-small); } }
.kc-field::placeholder { color: var(--kc-faint); }
.kc-field:focus { border-color: var(--kc-yellow); box-shadow: 0 0 0 3px rgba(255, 255, 1, 0.15); }
.kc-field[aria-invalid="true"] { border-color: var(--kc-error); }
.kc-help { color: var(--kc-faint); }
.kc-error { display: flex; gap: 6px; align-items: center; color: var(--kc-error); font-size: var(--kc-fs-small); }
.kc-field-wrap { position: relative; }
.kc-field-wrap .kc-btn-icon { position: absolute; right: 2px; top: 2px; border: 0; background: transparent; }

.kc-check { display: inline-flex; align-items: center; gap: var(--kc-s1); cursor: pointer; color: var(--kc-white); font-size: var(--kc-fs-small); }
.kc-check input {
  appearance: none; width: 20px; height: 20px; margin: 0; border-radius: var(--kc-r-sm); border: 1px solid var(--kc-line-strong); background: var(--kc-panel);
  display: grid; place-content: center;
}
.kc-check input::before { content: ""; width: 10px; height: 6px; border: 2px solid var(--kc-on-yellow); border-top: 0; border-right: 0; transform: rotate(-45deg) scale(0); transition: transform var(--kc-dur-fast) var(--kc-ease-out); }
.kc-check input:checked { background: var(--kc-yellow); border-color: var(--kc-yellow); }
.kc-check input:checked::before { transform: rotate(-45deg) scale(1); }
.kc-check input:focus-visible { outline: 2px solid var(--kc-yellow); outline-offset: 2px; }

.kc-kupon { display: flex; gap: var(--kc-s1); }
.kc-kupon .kc-field { flex: 1; }

/* One real input drawn as six boxes (temuan A2-08). The input sits on top, transparent, so
   paste and the phone's one-time-code suggestion work; the boxes only show what was typed. */
.kc-otp { position: relative; display: grid; grid-template-columns: repeat(6, minmax(0, 52px)); gap: var(--kc-s1); justify-content: start; }
.kc-otp-kotak {
  height: 56px; border-radius: var(--kc-r-inner); background: var(--kc-panel); border: 1px solid var(--kc-line-strong);
  display: grid; place-items: center; font-family: var(--kc-font-heading); font-weight: 600; font-size: var(--kc-fs-h3); color: var(--kc-white);
}
/* The input is invisible, so the box where the next digit goes shows the focus. */
.kc-otp:focus-within .kc-otp-kotak.is-aktif { border-color: var(--kc-line-hl); box-shadow: 0 0 0 3px rgba(255, 255, 1, 0.15); }
.kc-otp input { position: absolute; inset: 0; width: 100%; opacity: 0; font-size: var(--kc-fs-body); letter-spacing: 3em; caret-color: transparent; }

/* ── Feedback (6.4) ────────────────────────────────────────────────────── */
.kc-toast {
  display: inline-flex; align-items: center; gap: var(--kc-s1); padding: var(--kc-s1) var(--kc-s2); border-radius: var(--kc-r-btn);
  background: var(--kc-glass-bg-fallback); border: var(--kc-glass-line); box-shadow: var(--kc-shadow-pop); color: var(--kc-white); font-size: var(--kc-fs-small);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kc-toast { background: var(--kc-glass-bg); -webkit-backdrop-filter: blur(var(--kc-glass-blur)); backdrop-filter: blur(var(--kc-glass-blur)); }
}
.kc-toast i { color: var(--kc-yellow); }

.kc-banner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kc-s1) var(--kc-s2); padding: var(--kc-s2) var(--kc-s3); border-radius: var(--kc-r-card); border: 1px solid transparent; color: var(--kc-white); font-size: var(--kc-fs-small); }
.kc-banner p { margin: 0; flex: 1 1 16rem; }
.kc-banner-info { background: var(--kc-fill); }
.kc-banner-warn { border-color: var(--kc-line-hl); }
.kc-banner-error { border-color: var(--kc-error); }
.kc-banner-error i { color: var(--kc-error); }

.kc-dialog { overscroll-behavior: contain; width: min(32rem, calc(100vw - 2 * var(--kc-s2))); padding: 0; border: 1px solid var(--kc-line-soft); border-radius: var(--kc-r-card); background: var(--kc-card); color: var(--kc-white); box-shadow: var(--kc-shadow-pop); }
.kc-dialog::backdrop { background: rgba(0, 0, 0, 0.75); -webkit-backdrop-filter: blur(var(--kc-glass-blur-dialog)); backdrop-filter: blur(var(--kc-glass-blur-dialog)); }
.kc-dialog-isi { padding: var(--kc-s3); display: flex; flex-direction: column; gap: var(--kc-s2); }
.kc-dialog-kepala { display: flex; align-items: center; justify-content: space-between; gap: var(--kc-s2); }
.kc-dialog-aksi { display: flex; flex-wrap: wrap; gap: var(--kc-s1); justify-content: flex-end; }
@media (max-width: 639px) {
  .kc-dialog { width: 100vw; max-width: 100vw; margin: auto 0 0; border-radius: var(--kc-r-card) var(--kc-r-card) 0 0; }
}

.kc-progress { height: 6px; border-radius: var(--kc-r-pill); background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.kc-progress > span { display: block; height: 100%; background-color: var(--kc-yellow); background-image: var(--kc-grad-brand); border-radius: inherit; transform-origin: left center; }

.kc-table { width: 100%; border-collapse: collapse; font-size: var(--kc-fs-small); }
.kc-table th { text-align: left; font-size: var(--kc-fs-caption); font-weight: 500; color: var(--kc-faint); padding: 0 var(--kc-s2) var(--kc-s1); }
.kc-table td { padding: var(--kc-s2); border-top: 1px solid var(--kc-line-soft); color: var(--kc-white); overflow-wrap: anywhere; }
.kc-table .is-angka { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 639px) {
  .kc-table thead { display: none; }
  .kc-table tr { display: grid; gap: 4px; padding: var(--kc-s2) 0; border-top: 1px solid var(--kc-line-soft); }
  .kc-table td { border: 0; padding: 0; }
  .kc-table td[data-label]::before { content: attr(data-label); display: block; font-size: var(--kc-fs-caption); color: var(--kc-faint); }
  .kc-table .is-angka { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .kc-reveal { transition: none; }
  html.js .kc-reveal:not([data-tampil]) { opacity: 1; transform: none; filter: none; }
}
@media (prefers-reduced-motion: reduce) {
  .kc-btn, .kc-btn-pill::before, .kc-panah, .kc-link, .kc-field, .kc-check input::before { transition: none; }
  .kc-btn-beam::before, .kc-btn-busy::before { animation: none; }
}