/* ==========================================================================
   Knowledge Base AI — gaya aplikasi di atas Sassly UI 0.1.4 (tema neutral).
   Warna identitas biru di-set sekali lewat token primary (sama seperti keluaran
   "Copy CSS" dari Theme Panel Sassly). Selain blok token ini, semua warna, radius,
   bayangan, dan motion memakai token --sx-*.
   ========================================================================== */

:root,
[data-theme="neutral"] {
  --sx-primary: #1f5ae8;
  --sx-primary-bg: linear-gradient(180deg, #356aea 0%, #1f5ae8 100%);
  --sx-primary-hover: linear-gradient(180deg, #4778ec 0%, #2c64e9 100%);
  --sx-on-primary: #ffffff;
  --sx-shadow-primary: 0 1px 2px rgba(19, 54, 139, 0.28), 0 3px 8px -2px rgba(31, 90, 232, 0.3);
  --kb-max: 1180px;
}

html, body { height: 100%; }
body { background: var(--sx-shell); }
a { color: inherit; }
code { font-family: var(--sx-font-mono); font-size: 0.92em; padding: 1px 5px; border-radius: var(--sx-r-xs); background: var(--sx-fill); }

.kb-mark {
  display: inline-grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: var(--sx-r-md);
  background: var(--sx-primary-bg); color: var(--sx-on-primary);
  box-shadow: var(--sx-shadow-primary), var(--sx-inset-highlight);
}
.kb-mark .sx-icon { width: 16px; height: 16px; }
.kb-muted { color: var(--sx-muted); }
.kb-small { font-size: var(--sx-fs-sm); }
.kb-nowrap { white-space: nowrap; }
.kb-stack { display: grid; gap: var(--sx-space-4); }
.kb-skip { position: absolute; left: -999px; top: 8px; z-index: 50; }
.kb-skip:focus { left: 8px; padding: 8px 12px; background: var(--sx-surface); border-radius: var(--sx-r-md); box-shadow: var(--sx-shadow-pop); }

/* ---------- Shell CMS ---------- */
.kb-shell { height: 100dvh; min-height: 0; }
.kb-admin { overflow: hidden; }
.sx-product-frame__ws, .sx-product-frame__me, .kb-usage { text-decoration: none; color: inherit; }
.sx-product-frame__ws-logo .sx-icon { width: 15px; height: 15px; }
.sx-product-frame__ws > .sx-icon:last-child { width: 14px; height: 14px; color: var(--sx-faint); }
.kb-usage { display: block; border-radius: var(--sx-r-md); }
.kb-usage:hover { background: var(--sx-fill); }
.kb-top-link { margin-left: auto; }
.sx-product-frame__search + .kb-top-link { margin-left: 0; }
@container product-frame (max-width: 720px) { .kb-top-link span { display: none; } }

.kb-page {
  max-width: var(--kb-max);
  margin-inline: auto;
  padding: var(--sx-space-6) var(--sx-space-6) var(--sx-space-8);
  display: grid;
  gap: var(--sx-space-5);
  align-content: start;
}
@container product-frame (max-width: 640px) { .kb-page { padding: var(--sx-space-4) var(--sx-space-4) var(--sx-space-8); } }

.kb-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sx-space-4); flex-wrap: wrap; }
.kb-head h1 { font-size: var(--sx-fs-2xl); line-height: var(--sx-lh-tight); }
.kb-head p { margin-top: var(--sx-space-2); color: var(--sx-muted); font-size: var(--sx-fs-md); max-width: 62ch; }
.kb-head__actions { display: flex; gap: var(--sx-space-2); flex-wrap: wrap; }
.kb-crumbs { display: flex; align-items: center; gap: var(--sx-space-1); margin-bottom: var(--sx-space-2); font-size: var(--sx-fs-sm); color: var(--sx-muted); }
.kb-crumbs a { text-decoration: none; color: var(--sx-muted); }
.kb-crumbs a:hover { color: var(--sx-ink); }
.kb-crumbs .sx-icon { width: 14px; height: 14px; color: var(--sx-faint); }

/* Ringkasan angka */
.kb-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sx-space-3); }
@container product-frame (max-width: 900px) { .kb-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kb-stat { display: grid; gap: var(--sx-space-1); padding: var(--sx-space-4); text-decoration: none; color: inherit; transition: box-shadow var(--sx-dur-2) var(--sx-ease-out); }
a.kb-stat:hover { box-shadow: var(--sx-shadow-2); }
.kb-stat__label { display: flex; align-items: center; gap: var(--sx-space-2); color: var(--sx-muted); font-size: var(--sx-fs-sm); }
.kb-stat__label .sx-icon { width: 15px; height: 15px; }
.kb-stat__value { font-size: var(--sx-fs-3xl); font-weight: var(--sx-display-weight); letter-spacing: var(--sx-display-tracking); line-height: 1.1; }
.kb-stat__note { font-size: var(--sx-fs-sm); color: var(--sx-faint); }

.kb-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sx-space-4); }
@container product-frame (max-width: 900px) { .kb-grid-2 { grid-template-columns: 1fr; } }
.kb-panel { padding: var(--sx-space-2) 0; min-width: 0; }
.kb-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-space-3); padding: var(--sx-space-2) var(--sx-space-4) var(--sx-space-3); }
.kb-panel__head h2 { font-size: var(--sx-fs-lg); }
.kb-list { list-style: none; margin: 0; padding: 0; }
.kb-list__row { display: flex; align-items: center; gap: var(--sx-space-3); padding: var(--sx-space-3) var(--sx-space-4); box-shadow: inset 0 1px 0 var(--sx-line-soft); }
.kb-list__main { display: grid; min-width: 0; flex: 1; }
.kb-list__main a { text-decoration: none; font-weight: var(--sx-strong-weight); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kb-list__main a:hover { color: var(--sx-primary); }
.kb-list__main small { color: var(--sx-muted); font-size: var(--sx-fs-sm); }
.kb-rank { list-style: none; margin: 0; padding: 0 var(--sx-space-4) var(--sx-space-2); display: grid; }
.kb-rank li { display: flex; align-items: center; gap: var(--sx-space-3); padding: var(--sx-space-2) 0; box-shadow: inset 0 1px 0 var(--sx-line-soft); }
.kb-rank li:first-child { box-shadow: none; }
.kb-rank__n { width: 22px; height: 22px; display: grid; place-items: center; border-radius: var(--sx-r-pill); background: var(--sx-fill); font-size: var(--sx-fs-xs); color: var(--sx-muted); flex: none; }
.kb-rank a { flex: 1; min-width: 0; text-decoration: none; }
.kb-rank a:hover { color: var(--sx-primary); }
.kb-rank__v { color: var(--sx-muted); font-size: var(--sx-fs-sm); white-space: nowrap; }

.kb-empty { display: flex; gap: var(--sx-space-3); align-items: flex-start; padding: var(--sx-space-5) var(--sx-space-4); color: var(--sx-muted); }
.kb-empty > .sx-icon { width: 20px; height: 20px; flex: none; color: var(--sx-faint); margin-top: 2px; }
.kb-empty b { display: block; color: var(--sx-ink); margin-bottom: 2px; }
.kb-empty--card { padding: var(--sx-space-6); }
.kb-blank { padding: var(--sx-space-6) var(--sx-space-4); }

/* Filter & tabel */
.kb-filter { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(160px, 0.8fr) auto auto; gap: var(--sx-space-4); align-items: end; padding: var(--sx-space-4); }
.kb-filter .sx-field { margin: 0; }
.kb-filter__status { display: grid; gap: var(--sx-space-2); }
.kb-filter [class$="__foot"]:not(:has(.sx-text-input__msg-text, .sx-select-input__msg-text, .sx-text-area__count, .sx-text-input__count)) { display: none; }
@container product-frame (max-width: 900px) { .kb-filter { grid-template-columns: 1fr 1fr; } .kb-filter__search { grid-column: 1 / -1; } }
@container product-frame (max-width: 560px) { .kb-filter { grid-template-columns: 1fr; } }
[data-autosubmit] .kb-filter__submit { display: none; }
.kb-filter .kb-filter__submit.sx-btn--primary { display: inline-flex; }

.kb-table-card { padding: 0; overflow: hidden; }
.kb-table-wrap { overflow-x: auto; }
.kb-table { width: 100%; border-collapse: collapse; font-size: var(--sx-fs-base); }
.kb-table th { text-align: left; font-weight: var(--sx-strong-weight); color: var(--sx-muted); font-size: var(--sx-fs-sm); padding: var(--sx-space-3) var(--sx-space-4); background: var(--sx-surface-2); box-shadow: inset 0 -1px 0 var(--sx-line); white-space: nowrap; }
.kb-table td { padding: var(--sx-space-3) var(--sx-space-4); box-shadow: inset 0 -1px 0 var(--sx-line-soft); vertical-align: middle; }
.kb-table tbody tr:last-child td { box-shadow: none; }
.kb-table tbody tr:hover td { background: var(--sx-fill); }
.kb-table__title a { font-weight: var(--sx-strong-weight); text-decoration: none; }
.kb-table__title a:hover { color: var(--sx-primary); }
.kb-table__title small { display: block; color: var(--sx-faint); font-size: var(--sx-fs-xs); margin-top: 2px; }
.kb-table--compact { margin-top: var(--sx-space-3); font-size: var(--sx-fs-sm); }
.kb-table--compact th, .kb-table--compact td { padding: var(--sx-space-2); }
.kb-num { text-align: right !important; }
.kb-num a { text-decoration: none; }
.kb-actions { text-align: right; white-space: nowrap; }
.kb-actions .sx-btn + .sx-btn { margin-left: 2px; }
.kb-pager { display: flex; justify-content: space-between; align-items: center; gap: var(--sx-space-3); flex-wrap: wrap; padding: var(--sx-space-3) var(--sx-space-4); box-shadow: inset 0 1px 0 var(--sx-line); font-size: var(--sx-fs-sm); color: var(--sx-muted); }
.kb-pager__nav { display: flex; align-items: center; gap: var(--sx-space-3); }
.kb-cat-name { display: flex; align-items: center; gap: var(--sx-space-3); }
.kb-cat-name b { font-weight: var(--sx-strong-weight); }
.kb-cat-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; flex: none; border-radius: var(--sx-r-md); background: var(--sx-accent-soft); color: var(--sx-accent-ink); }
.kb-cat-icon .sx-icon { width: 16px; height: 16px; }
.kb-cat-icon--lg { width: 48px; height: 48px; border-radius: var(--sx-r-lg); }
.kb-cat-icon--lg .sx-icon { width: 22px; height: 22px; }
.kb-person { display: inline-flex; align-items: center; gap: var(--sx-space-2); }

/* Form */
.kb-form-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--sx-space-4); align-items: start; }
.kb-form-grid--widget { grid-template-columns: minmax(0, 1fr) 400px; }
@container product-frame (max-width: 1040px) { .kb-form-grid, .kb-form-grid--widget { grid-template-columns: 1fr; } }
.kb-form-main, .kb-form-side { display: grid; gap: var(--sx-space-4); min-width: 0; }
.kb-form-side--sticky { position: sticky; top: var(--sx-space-4); }
@container product-frame (max-width: 1040px) { .kb-form-side--sticky { position: static; } }
.kb-section { display: grid; gap: var(--sx-space-4); padding: var(--sx-space-5); min-width: 0; }
.kb-section__title { font-size: var(--sx-fs-lg); }
.kb-section__row { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-space-3); }
.kb-section__actions { display: flex; justify-content: flex-end; gap: var(--sx-space-2); }
.kb-section--inline { grid-template-columns: 1fr auto; align-items: center; }
.kb-section .sx-field { margin: 0; }
.kb-field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sx-space-4); }
@container product-frame (max-width: 640px) { .kb-field-row { grid-template-columns: 1fr; } }
.kb-narrow { display: grid; gap: var(--sx-space-4); max-width: 640px; }
.kb-danger-zone .kb-section__title { color: var(--sx-danger-ink); }
.kb-danger-zone .sx-btn { justify-self: start; }
.kb-editor-field { display: grid; gap: var(--sx-space-2); }
.kb-editor-field .sx-prose-editor { width: 100%; }
.kb-editor-field .sx-prose-editor__content { min-height: 280px; }
.kb-editor-field.is-error .sx-prose-editor { box-shadow: 0 0 0 1px var(--sx-danger-line), var(--sx-card-shadow); }
.kb-editor-field > .sx-hint, .kb-editor-field > .sx-error-text { display: flex; gap: var(--sx-space-1); align-items: flex-start; }
.kb-check-inline { display: inline-flex; align-items: center; gap: var(--sx-space-2); font-size: var(--sx-fs-base); }
.kb-dl { display: grid; gap: var(--sx-space-2); margin: 0; }
.kb-dl > div { display: flex; justify-content: space-between; gap: var(--sx-space-3); font-size: var(--sx-fs-base); }
.kb-dl dt { color: var(--sx-muted); }
.kb-dl dd { margin: 0; text-align: right; min-width: 0; overflow-wrap: anywhere; }
.kb-dl--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sx-space-3); }
.kb-dl--row > div { display: grid; gap: 2px; }
.kb-dl--row dd { text-align: left; }
.kb-dl--row dt { font-size: var(--sx-fs-sm); }
.kb-steps { margin: 0; padding-left: 1.2em; display: grid; gap: var(--sx-space-2); color: var(--sx-ink-2); }
.kb-steps b { color: var(--sx-ink); font-weight: var(--sx-strong-weight); }
.kb-scope-cats[hidden] { display: none; }

/* Swatch warna widget */
.kb-swatches { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
.kb-swatch {
  width: 30px; height: 30px; border-radius: var(--sx-r-pill); border: 0; padding: 0; cursor: pointer;
  background: var(--kb-swatch); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  transition: transform var(--sx-dur-1) var(--sx-ease-out), box-shadow var(--sx-dur-2) var(--sx-ease-out);
}
.kb-swatch:hover { transform: scale(1.08); }
.kb-swatch:focus-visible { outline: none; box-shadow: var(--sx-focus-ring); }
.kb-swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--sx-surface), 0 0 0 4px var(--kb-swatch); }

/* Tes koneksi & index ulang */
.kb-test { display: grid; gap: var(--sx-space-3); justify-items: start; }
.kb-test__list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sx-space-2); width: 100%; }
.kb-test__list:empty { display: none; }
.kb-test__list li { display: flex; gap: var(--sx-space-2); align-items: flex-start; font-size: var(--sx-fs-base); }
.kb-test__list .sx-icon { width: 16px; height: 16px; flex: none; margin-top: 2px; }
.kb-test__list [data-ok="1"] .sx-icon { color: var(--sx-success); }
.kb-test__list [data-ok="0"] .sx-icon { color: var(--sx-danger); }
.kb-test__list small { color: var(--sx-muted); }
.kb-reindex { display: grid; gap: var(--sx-space-2); }
.sx-btn .sx-spinner { display: none; }
.sx-btn[aria-busy="true"] .sx-spinner { display: inline-block; }

/* Kartu widget */
.kb-widget-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: var(--sx-space-4); }
.kb-widget-card { display: grid; gap: var(--sx-space-4); padding: var(--sx-space-5); }
.kb-widget-card__head { display: flex; gap: var(--sx-space-3); align-items: flex-start; }
.kb-widget-card__icon { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: var(--sx-r-lg); background: var(--kb-w-color); color: var(--sx-on-primary); }
.kb-widget-card__icon .sx-icon { width: 18px; height: 18px; }
.kb-widget-card__titles { flex: 1; min-width: 0; }
.kb-widget-card__titles h2 { font-size: var(--sx-fs-lg); }
.kb-widget-card__titles a { text-decoration: none; }
.kb-widget-card__titles a:hover { color: var(--sx-primary); }
.kb-widget-card__titles p { color: var(--sx-muted); font-size: var(--sx-fs-sm); margin-top: 2px; }
.kb-widget-card__foot { display: flex; gap: var(--sx-space-2); flex-wrap: wrap; }

/* Pratinjau widget */
.kb-preview-card { gap: var(--sx-space-3); }
.kb-preview-stage {
  position: relative; height: 560px; border-radius: var(--sx-r-lg); overflow: hidden;
  background:
    radial-gradient(circle at 1px 1px, var(--sx-line) 1px, transparent 0) 0 0 / 16px 16px,
    var(--sx-surface-2);
  box-shadow: inset 0 0 0 1px var(--sx-line-soft);
}

/* Uji pencarian */
.kb-lab { list-style: none; margin: 0; padding: 0; }
.kb-lab__row { display: grid; grid-template-columns: 28px minmax(0, 1fr) 150px; gap: var(--sx-space-3); align-items: start; padding: var(--sx-space-3) var(--sx-space-4); box-shadow: inset 0 1px 0 var(--sx-line-soft); }
.kb-lab__n { width: 24px; height: 24px; display: grid; place-items: center; border-radius: var(--sx-r-pill); background: var(--sx-fill); font-size: var(--sx-fs-xs); color: var(--sx-muted); }
.kb-lab__main { display: grid; gap: 2px; min-width: 0; }
.kb-lab__main a { text-decoration: none; }
.kb-lab__main a:hover b { color: var(--sx-primary); }
.kb-lab__main small { color: var(--sx-muted); }
.kb-lab__chunk summary { cursor: pointer; color: var(--sx-accent-ink); font-size: var(--sx-fs-sm); margin-top: var(--sx-space-1); }
.kb-lab__chunk p { margin-top: var(--sx-space-2); padding: var(--sx-space-3); border-radius: var(--sx-r-md); background: var(--sx-surface-2); color: var(--sx-ink-2); font-size: var(--sx-fs-sm); }
.kb-lab__score { display: grid; gap: var(--sx-space-1); text-align: right; }
.kb-lab__score b { font-size: var(--sx-fs-lg); }
.kb-lab__score small { color: var(--sx-muted); font-size: var(--sx-fs-xs); }
@container product-frame (max-width: 560px) { .kb-lab__row { grid-template-columns: 24px minmax(0, 1fr); } .kb-lab__score { grid-column: 2; text-align: left; } }

/* Toast */
.kb-toasts { position: fixed; right: var(--sx-space-4); bottom: var(--sx-space-4); z-index: var(--sx-z-toast); }
.kb-avatar-ai { background: var(--sx-primary-bg) !important; color: var(--sx-on-primary) !important; }
.kb-avatar-ai .sx-icon { width: 14px; height: 14px; }

/* ---------- Login ---------- */
.kb-login-page { overflow: hidden; }
.kb-login-page .kb-shell { height: 100dvh; }
.kb-login-form { display: grid; gap: var(--sx-space-4); }
.kb-login-form .sx-field { margin: 0; }
.sx-login-screen__brand { display: flex; align-items: center; gap: var(--sx-space-2); }
.sx-login-screen__foot a { color: var(--sx-muted); }

/* ---------- Halaman error ---------- */
.kb-error-page { display: grid; place-items: center; min-height: 100dvh; padding: var(--sx-space-6); background: var(--sx-shell); }
.kb-error { width: min(520px, 100%); }
.kb-error__code { font-size: var(--sx-fs-4xl); font-weight: var(--sx-display-weight); letter-spacing: var(--sx-display-tracking); color: var(--sx-primary); line-height: 1; margin-bottom: var(--sx-space-3); }

/* ==========================================================================
   Situs FAQ publik
   ========================================================================== */
.kb-site { background: var(--sx-panel); color: var(--sx-ink); font-size: var(--sx-fs-md); display: flex; flex-direction: column; min-height: 100dvh; }
.kb-site__main { flex: 1; }
.kb-site__top { position: sticky; top: 0; z-index: 20; background: color-mix(in srgb, var(--sx-panel) 88%, transparent); backdrop-filter: saturate(1.6) blur(12px); -webkit-backdrop-filter: saturate(1.6) blur(12px); box-shadow: inset 0 -1px 0 var(--sx-line-soft); }
.kb-site__top-in { max-width: var(--kb-max); margin-inline: auto; height: 60px; padding-inline: var(--sx-space-5); display: flex; align-items: center; gap: var(--sx-space-4); }
.kb-brand { display: inline-flex; align-items: center; gap: var(--sx-space-2); text-decoration: none; flex: none; }
.kb-brand b { font-size: var(--sx-fs-lg); font-weight: var(--sx-heading-weight); letter-spacing: var(--sx-heading-tracking); }
.kb-brand__label { font-size: var(--sx-fs-xs); color: var(--sx-muted); padding: 1px 6px; border-radius: var(--sx-r-pill); box-shadow: inset 0 0 0 1px var(--sx-line); }
.kb-site__nav { margin-left: auto; }
.kb-topsearch { position: relative; flex: 1; max-width: 420px; margin-left: auto; }
.kb-topsearch > .sx-icon { position: absolute; left: 10px; top: 50%; translate: 0 -50%; width: 16px; height: 16px; color: var(--sx-faint); pointer-events: none; }
.kb-topsearch .sx-input { width: 100%; padding-left: 34px; }
.kb-topsearch + .kb-site__nav { margin-left: 0; }
@media (max-width: 640px) {
  .kb-site__top-in { padding-inline: var(--sx-space-4); gap: var(--sx-space-2); }
  .kb-brand__label { display: none; }
  .kb-brand b { font-size: var(--sx-fs-md); }
  .kb-site__top-in:has(.kb-topsearch) .kb-brand b { display: none; }
  .kb-catmenu summary span { display: none; }
}

.kb-catmenu { position: relative; }
.kb-catmenu > summary { list-style: none; cursor: pointer; }
.kb-catmenu > summary::-webkit-details-marker { display: none; }
.kb-catmenu[open] > summary { background: var(--sx-fill); }
.kb-catmenu__list { position: absolute; right: 0; top: calc(100% + 6px); min-width: 280px; display: grid; padding: var(--sx-space-1); z-index: var(--sx-z-pop); }
.kb-catmenu__list .sx-menu__item { display: flex; align-items: center; gap: var(--sx-space-2); text-decoration: none; }
.kb-catmenu__count { margin-left: auto; color: var(--sx-faint); font-size: var(--sx-fs-sm); }

/* Saran pencarian */
.kb-suggest { position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: var(--sx-z-pop); padding: var(--sx-space-1); display: grid; text-align: left; }
.kb-suggest[hidden] { display: none; }
.kb-suggest .sx-menu__item { display: grid; gap: 1px; text-decoration: none; padding-block: var(--sx-space-2); }
.kb-suggest .sx-menu__item small { color: var(--sx-muted); font-size: var(--sx-fs-xs); }
.kb-suggest .sx-menu__item[aria-selected="true"] { background: var(--sx-fill-strong); }
.kb-suggest__all { color: var(--sx-accent-ink); font-weight: var(--sx-strong-weight); }

/* Hero beranda */
.kb-hero { background: linear-gradient(180deg, var(--sx-accent-soft), transparent 85%); box-shadow: inset 0 -1px 0 var(--sx-line-soft); }
.kb-hero__in { max-width: 760px; margin-inline: auto; padding: 72px var(--sx-space-5) 56px; text-align: center; }
.kb-eyebrow { display: inline-flex; align-items: center; gap: var(--sx-space-2); font-size: var(--sx-fs-sm); color: var(--sx-accent-ink); font-weight: var(--sx-strong-weight); padding: 4px 10px; border-radius: var(--sx-r-pill); background: var(--sx-surface); box-shadow: inset 0 0 0 1px var(--sx-accent-line); }
.kb-eyebrow .sx-icon { width: 14px; height: 14px; }
.kb-hero__title { margin-top: var(--sx-space-4); font-size: clamp(30px, 6vw, var(--sx-fs-4xl)); line-height: 1.08; font-weight: var(--sx-heading-weight); letter-spacing: -0.025em; }
.kb-hero__lead { margin: var(--sx-space-3) auto 0; max-width: 56ch; color: var(--sx-muted); font-size: var(--sx-fs-lg); }
.kb-hero__try { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--sx-space-2); margin-top: var(--sx-space-4); color: var(--sx-muted); font-size: var(--sx-fs-sm); }
.kb-hero__try a { text-decoration: none; }
.kb-hero__try a:hover { color: var(--sx-ink); background: var(--sx-fill-strong); }
@media (max-width: 640px) { .kb-hero__in { padding: 48px var(--sx-space-4) 40px; } }

.kb-bigsearch { position: relative; display: flex; align-items: center; gap: var(--sx-space-2); margin-top: var(--sx-space-6); padding: 6px; padding-left: 44px; border-radius: var(--sx-r-xl); background: var(--sx-surface); box-shadow: var(--sx-shadow-2); transition: box-shadow var(--sx-dur-2) var(--sx-ease-out); }
.kb-bigsearch:focus-within { box-shadow: var(--sx-shadow-2), var(--sx-focus-ring); }
.kb-bigsearch > .sx-icon { position: absolute; left: 16px; width: 18px; height: 18px; color: var(--sx-faint); }
.kb-bigsearch .sx-input { flex: 1; min-width: 0; height: 44px; border: 0; box-shadow: none !important; background: transparent; font-size: var(--sx-fs-lg); padding-inline: 0; }
.kb-bigsearch .sx-btn { height: 44px; padding-inline: var(--sx-space-5); }
.kb-bigsearch--page { margin: var(--sx-space-4) 0 var(--sx-space-6); }

.kb-wrap { max-width: var(--kb-max); margin-inline: auto; padding: var(--sx-space-8) var(--sx-space-5) 80px; display: grid; gap: 48px; }
.kb-wrap--narrow { max-width: 820px; gap: var(--sx-space-6); padding-top: var(--sx-space-6); }
@media (max-width: 640px) { .kb-wrap { padding: var(--sx-space-6) var(--sx-space-4) 64px; gap: 36px; } }
.kb-block { display: grid; gap: var(--sx-space-3); }
.kb-block__title { font-size: var(--sx-fs-xl); font-weight: var(--sx-heading-weight); letter-spacing: var(--sx-heading-tracking); }

.kb-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--sx-space-4); }
.kb-cat { display: grid; align-content: start; gap: var(--sx-space-3); padding: var(--sx-space-5); }
.kb-cat__head { display: flex; align-items: center; gap: var(--sx-space-3); text-decoration: none; }
.kb-cat__titles { display: grid; flex: 1; }
.kb-cat__titles b { font-size: var(--sx-fs-lg); font-weight: var(--sx-heading-weight); }
.kb-cat__titles small { color: var(--sx-muted); font-size: var(--sx-fs-sm); }
.kb-cat__go { width: 16px; height: 16px; color: var(--sx-faint); transition: translate var(--sx-dur-2) var(--sx-ease-out), color var(--sx-dur-2); }
.kb-cat__head:hover .kb-cat__go { translate: 3px 0; color: var(--sx-primary); }
.kb-cat__head:hover b { color: var(--sx-primary); }
.kb-cat__desc { color: var(--sx-muted); font-size: var(--sx-fs-base); }
.kb-cat__list { list-style: none; margin: 0; padding: 0; display: grid; }
.kb-cat__list a { display: block; padding: var(--sx-space-2) 0; text-decoration: none; color: var(--sx-ink-2); font-size: var(--sx-fs-base); box-shadow: inset 0 1px 0 var(--sx-line-soft); }
.kb-cat__list a:hover { color: var(--sx-primary); }

.kb-popular { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--sx-space-3); }
.kb-popular__item { display: grid; gap: var(--sx-space-1); padding: var(--sx-space-4); border-radius: var(--sx-card-radius); text-decoration: none; background: var(--sx-surface); box-shadow: var(--sx-card-shadow); transition: box-shadow var(--sx-dur-2) var(--sx-ease-out); }
.kb-popular__item:hover { box-shadow: var(--sx-shadow-2); }
.kb-popular__item small { color: var(--sx-accent-ink); font-size: var(--sx-fs-xs); font-weight: var(--sx-strong-weight); }
.kb-popular__item b { font-weight: var(--sx-strong-weight); }
.kb-popular__item span { color: var(--sx-muted); font-size: var(--sx-fs-base); }
@media (max-width: 400px) { .kb-cats, .kb-popular { grid-template-columns: 1fr; } }

.kb-pagehead { display: flex; gap: var(--sx-space-4); align-items: center; }
.kb-pagehead h1 { font-size: var(--sx-fs-2xl); }
.kb-pagehead p { color: var(--sx-muted); margin-top: var(--sx-space-1); }
.kb-qlist { list-style: none; margin: 0; padding: 0; display: grid; border-radius: var(--sx-card-radius); background: var(--sx-surface); box-shadow: var(--sx-card-shadow); overflow: hidden; }
.kb-qlist > li + li { box-shadow: inset 0 1px 0 var(--sx-line-soft); }
.kb-qlist__item { display: flex; gap: var(--sx-space-3); align-items: center; padding: var(--sx-space-4) var(--sx-space-5); text-decoration: none; transition: background var(--sx-dur-1); }
.kb-qlist__item:hover { background: var(--sx-fill); }
.kb-qlist__item > .sx-icon { width: 16px; height: 16px; color: var(--sx-faint); flex: none; }
.kb-qlist__text { flex: 1; display: grid; gap: 2px; min-width: 0; }
.kb-qlist__text small { color: var(--sx-accent-ink); font-size: var(--sx-fs-xs); font-weight: var(--sx-strong-weight); }
.kb-qlist__text b { font-weight: var(--sx-strong-weight); }
.kb-qlist__text > span { color: var(--sx-muted); font-size: var(--sx-fs-base); }
.kb-qlist__item:hover b { color: var(--sx-primary); }
.kb-srcnum { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: var(--sx-r-pill); background: var(--sx-primary-bg); color: var(--sx-on-primary); font-size: var(--sx-fs-sm); font-weight: var(--sx-strong-weight); }
.kb-chips { display: flex; flex-wrap: wrap; gap: var(--sx-space-2); }
.kb-chips a { text-decoration: none; }
.kb-chips .sx-icon { width: 13px; height: 13px; }

/* Halaman artikel (bagian Docs Reader) */
.kb-reader {
  --dr-side: 272px; --dr-toc: 220px; --dr-prose: calc(var(--sx-fs-lg) + 1px); --dr-measure: 40em; --dr-pad: 40px;
  max-width: 1320px; margin-inline: auto;
  display: grid; grid-template-columns: var(--dr-side) minmax(0, 1fr) var(--dr-toc); gap: var(--sx-space-8);
  padding: var(--dr-pad) var(--sx-space-5) 96px;
}
.kb-reader__side { position: sticky; top: 84px; align-self: start; max-height: calc(100dvh - 110px); overflow-y: auto; scrollbar-width: thin; }
.kb-reader__toc { top: 84px; max-height: calc(100dvh - 110px); display: grid; gap: var(--sx-space-5); align-content: start; }
.kb-reader__column { min-width: 0; }
.kb-group-link { text-decoration: none; }
.kb-fold-open { grid-template-rows: 1fr; visibility: visible; }
.kb-fold-open > ul { overflow: hidden; min-height: 0; }
.kb-reader .sx-docs-reader__prose h2, .kb-reader .sx-docs-reader__prose h3 { scroll-margin-top: 84px; }
.kb-asksidebar { display: grid; gap: var(--sx-space-2); padding: var(--sx-space-4); font-size: var(--sx-fs-base); }
.kb-asksidebar p { color: var(--sx-muted); font-size: var(--sx-fs-sm); }
.kb-source { display: flex; align-items: center; gap: var(--sx-space-2); margin-top: var(--sx-space-6); color: var(--sx-muted); font-size: var(--sx-fs-base); }
.kb-source .sx-icon { width: 15px; height: 15px; }
.kb-source a { color: var(--sx-accent-ink); }
.kb-helpful { display: flex; align-items: center; justify-content: space-between; gap: var(--sx-space-3); flex-wrap: wrap; margin-top: var(--sx-space-6); padding: var(--sx-space-4) var(--sx-space-5); font-size: var(--sx-fs-md); }
.kb-helpful__q { font-weight: var(--sx-strong-weight); }
.kb-helpful__actions { display: flex; gap: var(--sx-space-2); }
.kb-related { margin-top: var(--sx-space-8); display: grid; gap: var(--sx-space-2); }
.kb-related__list { list-style: none; margin: var(--sx-space-2) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sx-space-3); }
.kb-related__list a { display: grid; gap: 2px; height: 100%; padding: var(--sx-space-4); border-radius: var(--sx-r-lg); text-decoration: none; background: var(--sx-surface); box-shadow: inset 0 0 0 1px var(--sx-line); font-size: var(--sx-fs-base); transition: box-shadow var(--sx-dur-2); }
.kb-related__list a:hover { box-shadow: inset 0 0 0 1px var(--sx-accent-line), var(--sx-shadow-1); }
.kb-related__list small { color: var(--sx-accent-ink); font-size: var(--sx-fs-xs); font-weight: var(--sx-strong-weight); }
.kb-related__list b { font-weight: var(--sx-strong-weight); }
.kb-reader .sx-docs-reader__pager { margin-top: var(--sx-space-8); }

@media (max-width: 1180px) {
  .kb-reader { grid-template-columns: var(--dr-side) minmax(0, 1fr); }
  .kb-reader__toc { display: none; }
  .kb-reader .sx-docs-reader__toc-inline { display: block; }
}
@media (max-width: 860px) {
  .kb-reader { grid-template-columns: minmax(0, 1fr); --dr-pad: 24px; padding-inline: var(--sx-space-4); }
  .kb-reader__side { display: none; }
  .kb-related__list { grid-template-columns: 1fr; }
}

.kb-site__foot { box-shadow: inset 0 1px 0 var(--sx-line-soft); background: var(--sx-shell); }
.kb-site__foot-in { max-width: var(--kb-max); margin-inline: auto; padding: var(--sx-space-6) var(--sx-space-5); display: flex; justify-content: space-between; gap: var(--sx-space-6); flex-wrap: wrap; font-size: var(--sx-fs-sm); color: var(--sx-muted); }
.kb-site__foot-in b { color: var(--sx-ink); font-size: var(--sx-fs-base); }
.kb-site__foot-in p { max-width: 70ch; margin-top: var(--sx-space-1); }
.kb-site__foot-links { display: flex; gap: var(--sx-space-4); align-items: flex-start; flex-wrap: wrap; }
.kb-site__foot-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--sx-ink-2); text-decoration: none; }
.kb-site__foot-links a:hover { color: var(--sx-primary); }
.kb-site__foot-links .sx-icon { width: 13px; height: 13px; }