/**
 * Dokumentasi / Pusat Bantuan: hub, product overview, article.
 *
 * Root   .kb (+ .kb-hub | .kb-product | .kb-article), prefix kb-. Refined family (DESIGN.md §1).
 * Accent Orange ink for everything interactive. Product tiles take their product's accent
 *        (.kb-accent--orange | --blue | --green, DESIGN.md "Product accent ownership").
 * Radius Shell 22px → core 16px (concentric: 22 − the 6px bezel) · UI 12px · pills 999px.
 * Depth  Flat at rest with hairlines; shadow only on hover and on floating layers.
 * Motion One curve (--kb-ease), transform/opacity; reveal hidden only under .kb-anim (docs.js).
 * Layers .kb-bar / .kb-rail 900 (under the site nav, 1000). Sheets 99988 + scrim 99987, under
 *        Ask AI's FAB (99989) and panel (99991); the FAB is hidden while a sheet is open.
 *
 * Mobile (≤ 991px): the article list and the outline are bottom sheets opened from a sticky
 * context bar, so an article starts with the article. Without JS they render inline, after it.
 */

/* ===================== TOKENS ===================== */
.kb {
	--kb-font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--kb-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;

	/* Brand */
	--kb-orange: var(--primary-color, #ff6600);    /* fills, icons, text on dark only (2.94:1 on white) */
	--kb-ink: #CC4A00;                              /* orange text + buttons on white (4.62:1) */
	--kb-ink-hover: #A83C00;
	--kb-orange-soft: #FFF1E7;
	--kb-orange-line: rgba(204, 74, 0, .18);
	--kb-blue: var(--secondary-color, #015C80);
	--kb-blue-soft: #EEF5F9;
	--kb-blue-line: rgba(1, 92, 128, .18);
	--kb-green: #0F7B4F;
	--kb-green-soft: #E8F6EF;

	/* Grounds: site palette (style.css :root) */
	--kb-white: #fff;
	--kb-bg: var(--light-gray, #f8f9fa);
	--kb-dark: var(--dark-blue, #0a1628);
	--kb-on-dark: #B9C7DA;

	/* Text */
	--kb-text: #1B2637;
	--kb-text-2: #55627A;
	--kb-text-3: #7A889F;                           /* large text / decoration only (3.59:1) */

	/* Lines */
	--kb-border: #E4E9F1;
	--kb-hairline: rgba(10, 22, 40, .08);
	--kb-recess: rgba(10, 22, 40, .035);            /* the bezel tray around a card */

	/* Shape */
	--kb-r-shell: 22px;
	--kb-r-card: 16px;
	--kb-r-ui: 12px;

	/* Depth */
	--kb-shadow-card: 0 1px 2px rgba(10, 22, 40, .04), 0 16px 40px -28px rgba(10, 22, 40, .16);
	--kb-shadow-pop: 0 2px 4px rgba(10, 22, 40, .05), 0 24px 56px -28px rgba(10, 22, 40, .22);
	--kb-shadow-float: 0 2px 6px rgba(10, 22, 40, .06), 0 28px 64px -24px rgba(10, 22, 40, .32);

	/* Motion */
	--kb-ease: cubic-bezier(.32, .72, 0, 1);

	/* Rhythm. --kb-stick = height of the sticky site nav (docs.js measures it). */
	--kb-section-y: 96px;
	--kb-stick: 77px;
	--kb-anchor: calc(var(--kb-stick) + 24px);

	font-family: var(--kb-font);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	color: var(--kb-text);
	font-size: 16px;
	line-height: 1.65;
	background: var(--kb-white);
}

@media (max-width: 991px) {
	.kb { --kb-section-y: 72px; --kb-anchor: calc(var(--kb-stick) + 84px); }
}

@media (max-width: 767px) {
	.kb { --kb-section-y: 56px; }
}

.kb-accent--orange { --kb-acc: var(--kb-ink); --kb-acc-soft: var(--kb-orange-soft); --kb-acc-line: var(--kb-orange-line); }
.kb-accent--blue   { --kb-acc: var(--kb-blue); --kb-acc-soft: var(--kb-blue-soft); --kb-acc-line: var(--kb-blue-line); }
.kb-accent--green  { --kb-acc: var(--kb-green); --kb-acc-soft: var(--kb-green-soft); --kb-acc-line: rgba(15, 123, 79, .18); }

/* ===================== BASE ===================== */
.kb h1,
.kb h2,
.kb h3,
.kb h4,
.kb button,
.kb input {
	font-family: inherit;
}

.kb h1,
.kb h2,
.kb h3,
.kb h4 {
	color: var(--kb-text);
}

.kb a {
	color: inherit;
	text-decoration: none;
}

.kb ol,
.kb ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.kb summary {
	list-style: none;
	cursor: pointer;
}

.kb summary::-webkit-details-marker {
	display: none;
}

.kb :focus-visible {
	outline: 3px solid var(--kb-ink);
	outline-offset: 2px;
	border-radius: 8px;
}

.kb-wrap {
	max-width: 1160px;
	margin: 0 auto;
	padding: 0 24px;
}

@media (max-width: 575px) {
	.kb-wrap { padding: 0 16px; }
}

.kb-i {
	width: 1em;
	height: 1em;
	flex: none;
}

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

/* Interactive-only pieces stay out of the page until docs.js runs. */
.kb:not(.kb-js) .kb-js-only {
	display: none !important;
}

/* ===================== REVEAL ===================== */
.kb.kb-anim [data-kb-reveal] {
	opacity: 0;
	transform: translateY(14px);
	transition: opacity .6s var(--kb-ease), transform .6s var(--kb-ease);
}

.kb.kb-anim [data-kb-reveal].is-in {
	opacity: 1;
	transform: none;
}

/* ===================== SHARED: EYEBROW, PILLS, TILES ===================== */
.kb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px;
	border: 1px solid var(--kb-orange-line);
	border-radius: 999px;
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	line-height: 1.3;
	text-transform: uppercase;
}

a.kb-eyebrow {
	transition: background-color .25s var(--kb-ease), border-color .25s var(--kb-ease);
}

a.kb-eyebrow:hover {
	border-color: rgba(204, 74, 0, .35);
	background: #FFE6D4;
	color: var(--kb-ink-hover);
}

.kb-eyebrow--dark {
	border-color: rgba(255, 255, 255, .14);
	background: rgba(255, 255, 255, .06);
	color: var(--kb-orange);
}

.kb-tile {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--kb-acc-line, var(--kb-orange-line));
	border-radius: var(--kb-r-ui);
	background: var(--kb-acc-soft, var(--kb-orange-soft));
	color: var(--kb-acc, var(--kb-ink));
	font-size: 22px;
	flex: none;
}

.kb-tile--lg {
	width: 56px;
	height: 56px;
	border-radius: 16px;
	font-size: 28px;
}

.kb-tile--sm {
	width: 32px;
	height: 32px;
	border-radius: 9px;
	font-size: 17px;
}

.kb-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--kb-bg);
	color: var(--kb-text-2);
	font-size: 12.5px;
	font-weight: 600;
	white-space: nowrap;
}

.kb-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var(--kb-bg);
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.kb-num {
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	letter-spacing: .02em;
}

.kb-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.kb-stats li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--kb-hairline);
	border-radius: 999px;
	background: var(--kb-white);
	color: var(--kb-text-2);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.3;
}

.kb-stats .kb-i {
	font-size: 16px;
	color: var(--kb-text-2);
}

.kb-stats strong {
	color: var(--kb-text);
	font-weight: 700;
}

.kb-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: none;
	border: 0;
	padding: 0;
	color: var(--kb-blue);
	font-size: 14.5px;
	font-weight: 600;
	cursor: pointer;
	transition: color .25s var(--kb-ease);
}

.kb-link:hover {
	color: var(--kb-ink);
}

.kb-link .kb-i {
	transition: transform .4s var(--kb-ease);
}

.kb-link:hover .kb-i {
	transform: translateX(3px);
}

/* ===================== BUTTONS (button-in-button) ===================== */
.kb-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 6px 6px 6px 22px;
	border: 1px solid transparent;
	border-radius: 999px;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	white-space: nowrap;
	cursor: pointer;
	transition:
		background-color .25s var(--kb-ease),
		border-color .25s var(--kb-ease),
		color .25s var(--kb-ease),
		box-shadow .4s var(--kb-ease),
		transform .4s var(--kb-ease);
}

.kb-btn:active {
	transform: scale(.98);
}

.kb-btn--plain {
	padding: 6px 20px;
}

.kb-btn__orb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	font-size: 16px;
	transition: transform .5s var(--kb-ease), background-color .25s var(--kb-ease);
}

.kb-btn:hover .kb-btn__orb {
	transform: translateX(3px) scale(1.05);
}

.kb-btn > .kb-i {
	font-size: 18px;
}

.kb .kb-btn--primary {
	background: var(--kb-ink);
	color: #fff;
}

.kb .kb-btn--primary:hover {
	background: var(--kb-ink-hover);
	color: #fff;
	box-shadow: 0 12px 28px -14px rgba(204, 74, 0, .7);
}

.kb-btn--primary .kb-btn__orb {
	background: rgba(255, 255, 255, .16);
}

.kb .kb-btn--ghost {
	border-color: var(--kb-border);
	background: var(--kb-white);
	color: var(--kb-text);
}

.kb .kb-btn--ghost:hover {
	border-color: var(--kb-orange-line);
	color: var(--kb-ink-hover);
}

.kb-btn--ghost .kb-btn__orb {
	background: var(--kb-bg);
}

.kb .kb-btn--on-dark {
	border-color: rgba(255, 255, 255, .2);
	background: transparent;
	color: #fff;
}

.kb .kb-btn--on-dark:hover {
	border-color: rgba(255, 255, 255, .45);
	background: rgba(255, 255, 255, .06);
	color: #fff;
}

.kb-btn--on-dark .kb-btn__orb {
	background: rgba(255, 255, 255, .1);
}

/* ===================== BREADCRUMB ===================== */
.kb-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 0;
	font-size: 13.5px;
	color: var(--kb-text-2);
}

.kb-crumbs li {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}

.kb-crumbs li + li::before {
	content: "/";
	margin: 0 10px;
	color: var(--kb-border);
	font-weight: 600;
}

.kb-crumbs a {
	color: var(--kb-blue);
	font-weight: 600;
	transition: color .25s var(--kb-ease);
}

.kb-crumbs a:hover {
	color: var(--kb-ink);
}

.kb-crumbs [aria-current] {
	overflow: hidden;
	color: var(--kb-text-2);
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kb-crumbs--dark ol,
.kb-crumbs--dark [aria-current] {
	color: var(--kb-on-dark);
}

.kb-crumbs--dark a {
	color: #fff;
}

.kb-crumbs--dark a:hover {
	color: var(--kb-orange);
}

.kb-crumbs--dark li + li::before {
	color: rgba(255, 255, 255, .25);
}

/* ===================== SECTION HEAD ===================== */
.kb-section {
	padding: var(--kb-section-y) 0;
}

.kb-head {
	max-width: 680px;
	margin-bottom: 44px;
}

.kb-head__title {
	margin: 16px 0 12px;
	font-size: clamp(28px, 3.2vw, 38px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.02em;
}

.kb-head__lead {
	margin: 0;
	color: var(--kb-text-2);
	font-size: 17px;
	line-height: 1.7;
}

/* ===================== FILTER INPUT (bezel) ===================== */
.kb-field {
	padding: 6px;
	border: 1px solid var(--kb-hairline);
	border-radius: var(--kb-r-shell);
	background: var(--kb-recess);
}

.kb-field__core {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: 0 8px 0 16px;
	border: 1px solid var(--kb-hairline);
	border-radius: calc(var(--kb-r-shell) - 6px);
	background: var(--kb-white);
	box-shadow: 0 1px 2px rgba(10, 22, 40, .04);
	transition: border-color .25s var(--kb-ease), box-shadow .4s var(--kb-ease);
}

.kb-field__core:focus-within {
	border-color: var(--kb-orange-line);
	box-shadow: 0 0 0 4px rgba(204, 74, 0, .1);
}

.kb-field__core > .kb-i {
	font-size: 20px;
	color: var(--kb-text-2);
}

.kb-field input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0;
	border: 0;
	outline: 0;
	background: transparent;
	color: var(--kb-text);
	font-size: 16px;   /* 16px: iOS does not zoom the page on focus */
	font-weight: 500;
}

.kb-field input::placeholder {
	color: var(--kb-text-2);
	font-weight: 400;
	opacity: .8;
}

.kb-field input::-webkit-search-cancel-button {
	display: none;
}

.kb-field input:focus-visible {
	outline: 0;
}

.kb-field__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 0;
	border-radius: 50%;
	background: var(--kb-bg);
	color: var(--kb-text-2);
	font-size: 15px;
	cursor: pointer;
	transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-field__clear:hover {
	background: var(--kb-border);
	color: var(--kb-text);
}

.kb-field__clear[hidden] {
	display: none;
}

.kb-field__hint {
	margin: 10px 4px 0;
	color: var(--kb-text-2);
	font-size: 13px;
}

.kb-field--sm {
	padding: 0;
	border: 0;
	background: none;
}

.kb-field--sm .kb-field__core {
	min-height: 42px;
	padding: 0 6px 0 12px;
	border-color: var(--kb-border);
	border-radius: var(--kb-r-ui);
	box-shadow: none;
}

.kb-field--sm .kb-field__core > .kb-i {
	font-size: 17px;
}

.kb-field--sm input {
	height: 40px;
	font-size: 16px;
}

.kb-field--sm .kb-field__clear {
	width: 28px;
	height: 28px;
	font-size: 13px;
}

/* ===================== HELP (shared band) ===================== */
.kb-help {
	padding: 6px;
	border: 1px solid var(--kb-hairline);
	border-radius: 26px;
	background: var(--kb-recess);
}

.kb-help__core {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 32px;
	padding: 40px 44px;
	border-radius: 20px;
	background: var(--kb-dark);
	color: #fff;
}

.kb-help__title {
	margin: 14px 0 10px;
	color: #fff !important;
	font-size: clamp(22px, 2.4vw, 28px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.kb-help__text p {
	max-width: 560px;
	margin: 0;
	color: var(--kb-on-dark);
	font-size: 15.5px;
	line-height: 1.7;
}

.kb-help__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
	min-width: 248px;
}

.kb-help__actions .kb-btn {
	justify-content: space-between;
}

.kb-help__contact {
	color: var(--kb-on-dark);
	font-size: 13.5px;
	text-align: center;
}

.kb .kb-help__contact a {
	color: #fff;
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, .3);
	text-underline-offset: 3px;
}

.kb .kb-help__contact a:hover {
	color: var(--kb-orange);
}

@media (max-width: 767px) {
	.kb-help__core {
		grid-template-columns: 1fr;
		gap: 24px;
		padding: 28px 22px;
	}

	.kb-help__actions {
		min-width: 0;
	}
}

/* =====================================================================
   HUB  (/documentation/)
   ===================================================================== */
.kb-hero {
	position: relative;
	z-index: 2;   /* search results float over the product cards */
	padding: 40px 0 96px;
	background: var(--kb-dark);
	color: #fff;
}

.kb-hero__deco {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

/* Dot grid + a flat "sonar" ring: texture without a gradient. */
.kb-hero__deco::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='1.5' cy='1.5' r='1.1' fill='%23ffffff' fill-opacity='0.07'/%3E%3C/svg%3E");
}

.kb-hero__deco::after {
	content: "";
	position: absolute;
	top: -180px;
	right: -140px;
	width: 520px;
	height: 520px;
	border: 1px solid rgba(255, 102, 0, .35);
	border-radius: 50%;
	box-shadow:
		0 0 0 70px rgba(255, 255, 255, .018),
		0 0 0 71px rgba(255, 255, 255, .05),
		0 0 0 150px rgba(255, 255, 255, .012),
		0 0 0 151px rgba(255, 255, 255, .04);
}

.kb-hero .kb-wrap {
	position: relative;
}

.kb-hero__body {
	max-width: 820px;
	margin-top: 56px;
}

.kb-hero__title {
	margin: 20px 0 18px;
	color: #fff !important;
	font-size: clamp(38px, 6vw, 68px);
	font-weight: 800;
	line-height: 1.02;
	letter-spacing: -.035em;
}

.kb-hero__title span {
	display: block;
	color: var(--kb-orange);
}

.kb-hero__lead {
	max-width: 620px;
	margin: 0 0 36px;
	color: var(--kb-on-dark);
	font-size: 18px;
	line-height: 1.65;
}

.kb-hero__lead strong {
	color: #fff;
	font-weight: 700;
}

/* Hub search: bezel on dark */
.kb-search {
	position: relative;
	max-width: 760px;
}

.kb-search .kb-field {
	border-color: rgba(255, 255, 255, .12);
	background: rgba(255, 255, 255, .06);
}

.kb-search .kb-field__core {
	min-height: 64px;
	padding: 0 8px 0 20px;
	border-color: transparent;
}

.kb-search .kb-field input {
	height: 60px;
	font-size: 17px;
}

.kb-search__kbd {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 26px;
	padding: 0 6px;
	border: 1px solid var(--kb-border);
	border-bottom-width: 2px;
	border-radius: 7px;
	color: var(--kb-text-2);
	font-family: var(--kb-mono);
	font-size: 12px;
}

.kb-search__submit {
	min-height: 48px;
}

@media (hover: none) {
	.kb-search__kbd { display: none; }
}

@media (max-width: 575px) {
	.kb-search__submit { padding: 6px; }
	.kb-search__submit .kb-search__label { display: none; }
	.kb-search .kb-field__core { padding-left: 14px; }
	.kb-search .kb-field input { font-size: 16px; }
}

/* Results */
.kb-results {
	position: absolute;
	top: calc(100% + 10px);
	left: 0;
	right: 0;
	z-index: 20;
	max-height: min(62vh, 560px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 8px;
	border: 1px solid var(--kb-hairline);
	border-radius: 20px;
	background: var(--kb-white);
	color: var(--kb-text);
	box-shadow: var(--kb-shadow-float);
	transform-origin: top center;
	animation: kb-pop .35s var(--kb-ease);
}

.kb-results[hidden] {
	display: none;
}

@keyframes kb-pop {
	from { opacity: 0; transform: translateY(-6px) scale(.985); }
	to { opacity: 1; transform: none; }
}

.kb-res {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) 18px;
	align-items: start;
	gap: 12px;
	padding: 12px;
	border-radius: 14px;
	transition: background-color .2s var(--kb-ease);
}

.kb-res.is-active,
.kb-res:hover {
	background: var(--kb-bg);
}

.kb-res .kb-tile {
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 18px;
}

.kb-res__where {
	display: block;
	color: var(--kb-text-2);
	font-size: 12.5px;
	font-weight: 600;
}

.kb-res__title {
	display: block;
	margin: 1px 0 3px;
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.kb-res__sub {
	display: -webkit-box;
	overflow: hidden;
	color: var(--kb-text-2);
	font-size: 13.5px;
	line-height: 1.5;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.kb-res__sec {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kb-ink);
	font-weight: 600;
}

.kb-res mark {
	padding: 0;
	background: none;
	color: inherit;
	text-decoration: underline;
	text-decoration-color: var(--kb-orange);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.kb-res > .kb-i {
	margin-top: 9px;
	color: var(--kb-text-2);
	font-size: 16px;
	transition: transform .4s var(--kb-ease), color .2s var(--kb-ease);
}

.kb-res.is-active > .kb-i {
	color: var(--kb-ink);
	transform: translateX(3px);
}

.kb-results__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 6px;
	padding: 12px 12px 6px;
	border-top: 1px solid var(--kb-border);
	color: var(--kb-text-2);
	font-size: 12.5px;
}

.kb-results__empty {
	padding: 20px 14px 10px;
}

.kb-results__empty p {
	margin: 0 0 14px;
	color: var(--kb-text-2);
	font-size: 14.5px;
}

.kb-results__empty strong {
	color: var(--kb-text);
}

.kb-results__empty-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Popular chips */
.kb-popular {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	max-width: 820px;
	margin-top: 22px;
}

.kb-popular__label {
	margin-right: 4px;
	color: var(--kb-on-dark);
	font-size: 13.5px;
	font-weight: 600;
}

.kb .kb-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .05);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	transition: background-color .25s var(--kb-ease), border-color .25s var(--kb-ease), transform .4s var(--kb-ease);
}

.kb .kb-chip:hover {
	border-color: rgba(255, 102, 0, .55);
	background: rgba(255, 255, 255, .1);
	color: #fff;
	transform: translateY(-1px);
}

.kb-chip small {
	color: var(--kb-orange);
	font-size: 12px;
	font-weight: 700;
}

.kb-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin-top: 48px;
	padding-top: 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	color: var(--kb-on-dark);
	font-size: 14px;
}

.kb-hero__meta strong {
	margin-right: 4px;
	color: #fff;
	font-size: 22px;
	font-weight: 800;
	letter-spacing: -.02em;
	font-variant-numeric: tabular-nums;
}

/* Product bento */
.kb-bento {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	grid-auto-flow: dense;
	gap: 20px;
}

.kb-pcard {
	padding: 6px;
	border: 1px solid var(--kb-hairline);
	border-radius: var(--kb-r-shell);
	background: var(--kb-recess);
	transition: transform .55s var(--kb-ease), box-shadow .55s var(--kb-ease);
}

.kb-pcard--feature {
	grid-column: span 2;
	grid-row: span 2;
}

.kb-pcard__core {
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 24px;
	border: 1px solid var(--kb-hairline);
	border-radius: calc(var(--kb-r-shell) - 6px);
	background: var(--kb-white);
	box-shadow: 0 1px 2px rgba(10, 22, 40, .04);
}

.kb-pcard--feature .kb-pcard__core {
	padding: 32px;
}

@media (hover: hover) and (pointer: fine) {
	.kb-pcard:hover {
		transform: translateY(-2px);
		box-shadow: var(--kb-shadow-pop);
	}
}

.kb-pcard__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 18px;
}

.kb-pcard__title {
	margin: 0 0 8px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.015em;
}

.kb-pcard--feature .kb-pcard__title {
	font-size: clamp(24px, 2.6vw, 30px);
	letter-spacing: -.025em;
}

.kb-pcard__title a {
	transition: color .25s var(--kb-ease);
}

.kb-pcard__title a:hover {
	color: var(--kb-ink);
}

.kb-pcard__sum {
	margin: 0 0 20px;
	color: var(--kb-text-2);
	font-size: 15px;
	line-height: 1.6;
}

.kb-pcard--feature .kb-pcard__sum {
	max-width: 560px;
	font-size: 16px;
}

.kb-label {
	display: block;
	margin: 0 0 8px;
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

/* Chapter map on the featured card */
.kb-pcard__map {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
	margin-bottom: 24px;
}

.kb-pcard__map a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px;
	padding: 11px 0;
	border-top: 1px solid var(--kb-border);
	font-size: 14.5px;
	font-weight: 600;
	transition: color .25s var(--kb-ease);
}

.kb-pcard__map a:hover {
	color: var(--kb-ink);
}

.kb-pcard__map a:hover .kb-count {
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
}

/* Question list */
.kb-qlist {
	margin-bottom: 22px;
}

.kb-qlist a {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 0;
	color: var(--kb-blue);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
	transition: color .25s var(--kb-ease);
}

.kb-qlist a:hover {
	color: var(--kb-ink);
}

.kb-qlist .kb-i {
	margin-top: 3px;
	font-size: 15px;
	transition: transform .4s var(--kb-ease);
}

.kb-qlist a:hover .kb-i {
	transform: translateX(3px);
}

.kb-pcard--feature .kb-qlist {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 24px;
}

.kb-pcard__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 20px;
	margin-top: auto;
	padding-top: 6px;
}

/* Help card in the bento */
.kb-pcard--help .kb-pcard__core {
	background: var(--kb-orange-soft);
	border-color: var(--kb-orange-line);
}

.kb-pcard--help .kb-tile {
	background: var(--kb-white);
}

.kb-pcard--help .kb-pcard__sum {
	color: #6B4A36;   /* warm secondary on orange-soft, 6.9:1 */
}

.kb-pcard--help .kb-pcard__foot {
	flex-direction: column;
	align-items: stretch;
}

.kb-pcard--help .kb-btn {
	justify-content: space-between;
}

@media (max-width: 991px) {
	.kb-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.kb-pcard--feature { grid-row: span 1; }
}

@media (max-width: 767px) {
	.kb-hero { padding-bottom: 72px; }
	.kb-hero__body { margin-top: 36px; }
	.kb-hero__deco::after { top: -260px; right: -300px; }
	.kb-bento { grid-template-columns: 1fr; gap: 16px; }
	.kb-pcard--feature { grid-column: span 1; }
	.kb-pcard__core,
	.kb-pcard--feature .kb-pcard__core { padding: 22px; }
	.kb-pcard__map,
	.kb-pcard--feature .kb-qlist { grid-template-columns: 1fr; }
}

/* =====================================================================
   PRODUCT OVERVIEW  (/documentation/{product}/)
   ===================================================================== */
.kb-phead {
	padding: 32px 0 48px;
	border-bottom: 1px solid var(--kb-border);
	background: var(--kb-bg);
}

.kb-phead__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: end;
	gap: 48px;
	margin-top: 36px;
}

.kb-phead__id {
	display: flex;
	align-items: center;
	gap: 14px;
}

.kb-phead__title {
	margin: 18px 0 14px;
	font-size: clamp(32px, 4.6vw, 52px);
	font-weight: 800;
	line-height: 1.04;
	letter-spacing: -.035em;
}

.kb-phead__lead {
	max-width: 620px;
	margin: 0 0 22px;
	color: var(--kb-text-2);
	font-size: 17.5px;
	line-height: 1.65;
}

@media (max-width: 991px) {
	.kb-phead__grid { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 575px) {
	.kb-phead { padding: 24px 0 32px; }
	.kb-phead__grid { margin-top: 24px; }
	.kb-stats li { font-size: 13px; padding: 5px 10px; }
}

/* Chapter rail: the mobile/tablet map of the page, sticky under the site nav. */
.kb-rail {
	display: none;
}

@media (max-width: 991px) {
	.kb-rail {
		position: sticky;
		top: var(--kb-stick);
		z-index: 900;
		display: block;
		border-bottom: 1px solid var(--kb-border);
		background: var(--kb-white);
	}

	.kb-rail__track {
		display: flex;
		gap: 8px;
		overflow-x: auto;
		padding: 10px 16px;
		scroll-padding: 0 16px;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
	}

	.kb-rail__track::-webkit-scrollbar {
		display: none;
	}

	.kb-rail a {
		display: inline-flex;
		flex: none;
		align-items: center;
		gap: 8px;
		padding: 8px 14px;
		border: 1px solid var(--kb-border);
		border-radius: 999px;
		background: var(--kb-white);
		font-size: 14px;
		font-weight: 600;
		white-space: nowrap;
		scroll-snap-align: start;
		transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease), border-color .25s var(--kb-ease);
	}

	.kb-rail a .kb-num {
		color: var(--kb-text-2);
	}

	.kb-rail a.is-active {
		border-color: var(--kb-text);
		background: var(--kb-text);
		color: #fff;
	}

	.kb-rail a.is-active .kb-num {
		color: var(--kb-on-dark);
	}
}

.kb-pbody {
	display: grid;
	grid-template-columns: 236px minmax(0, 1fr);
	align-items: start;
	gap: 56px;
	padding-top: 56px;
	padding-bottom: var(--kb-section-y);
}

@media (max-width: 991px) {
	.kb-pbody { grid-template-columns: minmax(0, 1fr); padding-top: 40px; }
	.kb-pbody > .kb-chapters { display: none; }
}

/* Desktop chapter index */
.kb-chapters {
	position: sticky;
	top: calc(var(--kb-stick) + 24px);
	max-height: calc(100vh - var(--kb-stick) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
}

.kb-aside-title {
	margin: 0 0 12px;
	padding: 0 10px;
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.kb-chapters a {
	position: relative;
	display: grid;
	grid-template-columns: 26px minmax(0, 1fr) auto;
	align-items: center;
	gap: 6px;
	padding: 8px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
	transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-chapters a:hover {
	background: var(--kb-bg);
}

.kb-chapters a.is-active {
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
}

.kb-chapters a.is-active .kb-num {
	color: var(--kb-ink-hover);
}

.kb-chapters a.is-active .kb-count {
	background: var(--kb-white);
	color: var(--kb-ink-hover);
}

.kb-chapters__help {
	margin: 20px 10px 0;
	padding-top: 18px;
	border-top: 1px solid var(--kb-border);
	color: var(--kb-text-2);
	font-size: 13.5px;
}

.kb-chapters__help .kb-link {
	margin-top: 6px;
	font-size: 14px;
}

/* Blocks in the main column */
.kb-block {
	margin-bottom: 64px;
	scroll-margin-top: var(--kb-anchor);
}

.kb-block__head {
	margin-bottom: 20px;
}

.kb-block__title {
	margin: 12px 0 6px;
	font-size: clamp(22px, 2.4vw, 26px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -.02em;
}

.kb-block__lead {
	margin: 0;
	color: var(--kb-text-2);
	font-size: 15.5px;
}

/* Start path */
.kb-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	counter-reset: kb-step;
}

.kb-step {
	display: block;
	height: 100%;
	padding: 5px;
	border: 1px solid var(--kb-hairline);
	border-radius: 18px;
	background: var(--kb-recess);
	transition: transform .5s var(--kb-ease), box-shadow .5s var(--kb-ease);
}

.kb-step__core {
	display: flex;
	flex-direction: column;
	gap: 6px;
	height: 100%;
	padding: 16px 16px 18px;
	border: 1px solid var(--kb-hairline);
	border-radius: 13px;
	background: var(--kb-white);
}

.kb-step__n {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-bottom: 6px;
	border-radius: 50%;
	background: var(--kb-text);
	color: #fff;
	font-size: 13px;
	font-weight: 800;
	transition: background-color .25s var(--kb-ease);
}

.kb-step__label {
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.35;
}

.kb-step__meta {
	color: var(--kb-text-2);
	font-size: 13px;
	line-height: 1.45;
}

@media (hover: hover) and (pointer: fine) {
	.kb-step:hover {
		transform: translateY(-2px);
		box-shadow: var(--kb-shadow-pop);
	}

	.kb-step:hover .kb-step__n {
		background: var(--kb-ink);
	}
}

@media (max-width: 575px) {
	.kb-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.kb-step__core { padding: 14px; }
}

/* Questions → exact section */
.kb-qgrid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.kb-q {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 20px;
	align-items: center;
	gap: 12px;
	height: 100%;
	padding: 14px 16px;
	border: 1px solid var(--kb-border);
	border-radius: 14px;
	background: var(--kb-white);
	transition: border-color .25s var(--kb-ease), background-color .25s var(--kb-ease);
}

.kb-q__label {
	display: block;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	transition: color .25s var(--kb-ease);
}

.kb-q__where {
	display: block;
	margin-top: 3px;
	color: var(--kb-text-2);
	font-size: 13px;
	line-height: 1.45;
}

.kb-q > .kb-i {
	color: var(--kb-text-2);
	font-size: 17px;
	transition: transform .4s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-q:hover {
	border-color: var(--kb-orange-line);
	background: #FFFBF8;
}

.kb-q:hover .kb-q__label,
.kb-q:hover > .kb-i {
	color: var(--kb-ink);
}

.kb-q:hover > .kb-i {
	transform: translateX(3px);
}

@media (max-width: 767px) {
	.kb-qgrid { grid-template-columns: 1fr; }
}

/* Chapters + article rows */
.kb-chapter {
	margin-bottom: 56px;
	scroll-margin-top: var(--kb-anchor);
}

.kb-chapter[hidden] {
	display: none;
}

.kb-chapter__head {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: end;
	gap: 6px 20px;
	margin-bottom: 16px;
}

.kb-chapter__n {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--kb-text);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.kb-chapter__title {
	margin: 0 0 6px;
	font-size: clamp(21px, 2.2vw, 24px);
	font-weight: 800;
	line-height: 1.25;
	letter-spacing: -.02em;
}

.kb-chapter__sum {
	max-width: 640px;
	margin: 0;
	color: var(--kb-text-2);
	font-size: 15px;
	line-height: 1.6;
}

.kb-chapter__count {
	color: var(--kb-text-2);
	font-size: 13.5px;
	font-weight: 600;
	white-space: nowrap;
}

.kb-list {
	overflow: hidden;
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-r-card);
	background: var(--kb-white);
}

.kb-row + .kb-row {
	border-top: 1px solid var(--kb-border);
}

.kb-row[hidden] {
	display: none;
}

.kb-row__main {
	display: grid;
	grid-template-columns: 34px minmax(0, 1fr) 22px;
	align-items: start;
	gap: 14px;
	padding: 18px 20px 16px;
	transition: background-color .25s var(--kb-ease);
}

.kb-row__main:hover {
	background: #FBFCFD;
}

.kb-row__main .kb-num {
	padding-top: 3px;
	font-size: 13px;
}

.kb-row__title {
	display: block;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.4;
	transition: color .25s var(--kb-ease);
}

.kb-row__sum {
	display: -webkit-box;
	margin-top: 4px;
	overflow: hidden;
	color: var(--kb-text-2);
	font-size: 14.5px;
	line-height: 1.55;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.kb-row__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	margin-top: 8px;
	color: var(--kb-text-2);
	font-size: 13px;
}

.kb-row__meta span {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}

.kb-row__go {
	padding-top: 2px;
	color: var(--kb-text-2);
	font-size: 18px;
	transition: transform .4s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-row__main:hover .kb-row__title,
.kb-row__main:hover .kb-row__go {
	color: var(--kb-ink);
}

.kb-row__main:hover .kb-row__go {
	transform: translateX(3px);
}

/* "Lihat isi": each article's sections, linkable */
.kb-peek {
	padding: 0 20px 14px 68px;
}

.kb-peek > summary {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 8px;
	margin-left: -8px;
	border-radius: 8px;
	color: var(--kb-blue);
	font-size: 13.5px;
	font-weight: 600;
	transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-peek > summary:hover {
	background: var(--kb-blue-soft);
}

.kb-peek > summary .kb-i {
	transition: transform .4s var(--kb-ease);
}

.kb-peek[open] > summary .kb-i {
	transform: rotate(180deg);
}

.kb-peek ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 20px;
	margin-top: 8px;
	padding: 12px 14px;
	border-radius: 12px;
	background: var(--kb-bg);
}

.kb-peek a {
	display: block;
	padding: 4px 0;
	color: var(--kb-text);
	font-size: 14px;
	line-height: 1.45;
	transition: color .25s var(--kb-ease);
}

.kb-peek a::before {
	content: "#";
	margin-right: 8px;
	color: var(--kb-text-3);
	font-weight: 700;
}

.kb-peek a:hover {
	color: var(--kb-ink);
}

@media (max-width: 575px) {
	.kb-row__main { grid-template-columns: 26px minmax(0, 1fr) 18px; gap: 10px; padding: 16px 14px 14px; }
	.kb-peek { padding: 0 14px 12px 50px; }
	.kb-peek ul { grid-template-columns: 1fr; }
	.kb-chapter__head { grid-template-columns: 1fr; }
}

/* While the list is filtered, the results come straight after the header. */
.kb-filtering .kb-block {
	display: none;
}

/* Overview text from the parent post */
.kb-intro {
	padding: 28px 32px;
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-r-card);
}

@media (max-width: 575px) {
	.kb-intro { padding: 20px 18px; }
}

/* Empty filter state */
.kb-empty {
	margin-bottom: 40px;
	padding: 36px 28px;
	border: 1px dashed var(--kb-border);
	border-radius: var(--kb-r-card);
	text-align: center;
}

.kb-empty[hidden] {
	display: none;
}

.kb-empty__title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 800;
}

.kb-empty p {
	margin: 0 0 18px;
	color: var(--kb-text-2);
	font-size: 15px;
}

.kb-empty__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}

/* =====================================================================
   ARTICLE  (/documentation/{product}/{article}/)
   ===================================================================== */
.kb-article .kb-wrap {
	max-width: 1320px;
}

.kb-layout {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr) 212px;
	grid-template-areas: "nav doc toc";
	align-items: start;
	gap: 48px;
	padding-top: 36px;
	padding-bottom: var(--kb-section-y);
}

.kb-doc {
	grid-area: doc;
	width: 100%;
	max-width: 760px;
	min-width: 0;
	justify-self: center;
}

.kb-nav {
	grid-area: nav;
}

.kb-toc {
	grid-area: toc;
}

.kb-nav,
.kb-toc {
	position: sticky;
	top: calc(var(--kb-stick) + 24px);
	max-height: calc(100vh - var(--kb-stick) - 48px);
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--kb-border) transparent;
}

@media (max-width: 1199px) {
	.kb-layout {
		grid-template-columns: 240px minmax(0, 1fr);
		grid-template-areas: "nav doc";
		gap: 40px;
	}

	.kb-toc { display: none; }
}

@media (max-width: 991px) {
	.kb-layout {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "doc" "nav";
		gap: 48px;
		padding-top: 24px;
	}

	.kb-nav,
	.kb-toc {
		position: static;
		max-height: none;
		overflow: visible;
	}

	/* No JS: the list sits after the article in a plain card. */
	.kb:not(.kb-js) .kb-nav {
		padding: 20px;
		border: 1px solid var(--kb-border);
		border-radius: var(--kb-r-card);
	}
}

/* Sheet header (close button) only shows when the aside is a sheet. */
.kb-sheet__head {
	display: none;
}

/* Context bar (≤ 991px, JS) */
.kb-bar {
	display: none;
}

@media (max-width: 991px) {
	.kb-js .kb-bar {
		position: sticky;
		top: var(--kb-stick);
		z-index: 900;
		display: flex;
		gap: 8px;
		padding: 8px 16px;
		border-bottom: 1px solid var(--kb-border);
		background: var(--kb-white);
	}
}

.kb-bar button {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	min-height: 48px;
	padding: 6px 10px 6px 6px;
	border: 1px solid var(--kb-border);
	border-radius: 14px;
	background: var(--kb-white);
	color: var(--kb-text);
	text-align: left;
	cursor: pointer;
	transition: border-color .25s var(--kb-ease), transform .4s var(--kb-ease);
}

.kb-bar button:active {
	transform: scale(.98);
}

.kb-bar button[aria-expanded="true"] {
	border-color: var(--kb-orange-line);
}

.kb-bar__nav {
	flex: 1 1 auto;
}

.kb-bar__toc {
	flex: 0 1 42%;
}

.kb-bar__ico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--kb-bg);
	font-size: 18px;
	flex: none;
}

.kb-bar__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.kb-bar__kicker {
	overflow: hidden;
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 600;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kb-bar__title {
	overflow: hidden;
	font-size: 14px;
	font-weight: 700;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kb-bar button > .kb-i:last-child {
	margin-left: auto;
	color: var(--kb-text-2);
	font-size: 16px;
}

@media (max-width: 380px) {
	.kb-bar__toc .kb-bar__kicker { display: none; }
}

/* Article header */
.kb-doc__head {
	margin-bottom: 28px;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--kb-border);
}

.kb-doc__head .kb-crumbs {
	margin-bottom: 22px;
}

.kb-doc__title {
	margin: 16px 0 14px;
	font-size: clamp(30px, 3.8vw, 44px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -.03em;
}

.kb-doc__lead {
	max-width: 680px;
	margin: 0 0 22px;
	color: var(--kb-text-2);
	font-size: 18px;
	line-height: 1.65;
}

@media (max-width: 575px) {
	.kb-doc__head .kb-crumbs { display: none; }   /* the context bar already says where you are */
	.kb-doc__lead { font-size: 17px; }
}

/* Inline outline (< 1200px) */
.kb-toc-inline {
	display: none;
	margin-bottom: 32px;
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-r-card);
	background: var(--kb-bg);
}

@media (max-width: 1199px) {
	.kb-toc-inline { display: block; }
}

.kb-toc-inline > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 700;
}

.kb-toc-inline > summary .kb-i:first-child {
	font-size: 18px;
	color: var(--kb-ink);
}

.kb-toc-inline > summary .kb-pill {
	margin-left: auto;
	background: var(--kb-white);
}

.kb-toc-inline > summary .kb-i:last-child {
	color: var(--kb-text-2);
	transition: transform .4s var(--kb-ease);
}

.kb-toc-inline[open] > summary .kb-i:last-child {
	transform: rotate(180deg);
}

.kb-toc-inline .kb-toclist {
	margin: 0 18px 16px;
}

/* Outline list (aside, inline, sheet) */
.kb-toclist {
	border-left: 1px solid var(--kb-border);
}

.kb-toclist a {
	display: block;
	margin-left: -1px;
	padding: 6px 0 6px 14px;
	border-left: 2px solid transparent;
	color: var(--kb-text-2);
	font-size: 13.5px;
	line-height: 1.45;
	transition: color .25s var(--kb-ease), border-color .25s var(--kb-ease);
}

.kb-toclist .is-sub a {
	padding-left: 26px;
	font-size: 13px;
}

.kb-toclist a:hover {
	color: var(--kb-text);
}

.kb-toclist a.is-active {
	border-left-color: var(--kb-orange);
	color: var(--kb-text);
	font-weight: 700;
}

.kb-toc-inline .kb-toclist a {
	font-size: 14.5px;
}

.kb-toc .kb-aside-title {
	padding-left: 0;
}

.kb-toc__foot {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	margin-top: 20px;
	padding: 18px 0 0 14px;
	border-top: 1px solid var(--kb-border);
}

.kb-toc__foot .kb-link {
	font-size: 13.5px;
}

/* Article nav (aside / sheet) */
.kb-switch {
	position: relative;
	margin-bottom: 10px;
}

.kb-switch > summary {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 10px 8px 8px;
	border: 1px solid var(--kb-border);
	border-radius: 14px;
	background: var(--kb-white);
	transition: border-color .25s var(--kb-ease);
}

.kb-switch > summary:hover,
.kb-switch[open] > summary {
	border-color: var(--kb-orange-line);
}

.kb-switch__text {
	display: flex;
	flex-direction: column;
	min-width: 0;
	line-height: 1.25;
}

.kb-switch__text small {
	color: var(--kb-text-2);
	font-size: 12px;
	font-weight: 600;
}

.kb-switch__text strong {
	overflow: hidden;
	font-size: 15px;
	font-weight: 800;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kb-switch > summary > .kb-i {
	margin-left: auto;
	color: var(--kb-text-2);
	transition: transform .4s var(--kb-ease);
}

.kb-switch[open] > summary > .kb-i {
	transform: rotate(180deg);
}

.kb-switch ul {
	margin-top: 6px;
	padding: 6px;
	border: 1px solid var(--kb-border);
	border-radius: 14px;
	background: var(--kb-white);
	box-shadow: var(--kb-shadow-card);
}

.kb-switch li a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 7px 8px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	transition: background-color .25s var(--kb-ease);
}

.kb-switch li a:hover {
	background: var(--kb-bg);
}

.kb-switch li a[aria-current] {
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
}

.kb-switch li a .kb-count {
	margin-left: auto;
}

.kb-switch__all {
	margin-top: 4px;
	padding-top: 4px;
	border-top: 1px solid var(--kb-border);
}

.kb-switch .kb-tile--sm {
	width: 28px;
	height: 28px;
	font-size: 15px;
	border-radius: 8px;
}

.kb-nav__overview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
	padding: 8px 10px;
	border-radius: 10px;
	color: var(--kb-blue);
	font-size: 14px;
	font-weight: 600;
	transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-nav__overview:hover {
	background: var(--kb-blue-soft);
}

.kb-nav__overview .kb-i {
	font-size: 17px;
}

.kb-nav .kb-field {
	margin-bottom: 12px;
}

.kb-navgroup + .kb-navgroup {
	margin-top: 2px;
}

.kb-navgroup[hidden] {
	display: none;
}

.kb-navgroup > summary {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr) auto 16px;
	align-items: center;
	gap: 6px;
	padding: 9px 8px 9px 10px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 700;
	line-height: 1.35;
	transition: background-color .25s var(--kb-ease);
}

.kb-navgroup > summary:hover {
	background: var(--kb-bg);
}

.kb-navgroup > summary > .kb-i {
	color: var(--kb-text-2);
	font-size: 15px;
	transition: transform .4s var(--kb-ease);
}

.kb-navgroup[open] > summary > .kb-i {
	transform: rotate(180deg);
}

.kb-navgroup.is-current > summary .kb-num {
	color: var(--kb-ink);
}

.kb-navgroup ol {
	margin: 2px 0 10px 21px;
	padding-left: 10px;
	border-left: 1px solid var(--kb-border);
}

.kb-navgroup li[hidden] {
	display: none;
}

.kb-navgroup li a {
	position: relative;
	display: block;
	padding: 6px 10px;
	border-radius: 8px;
	color: var(--kb-text-2);
	font-size: 14px;
	line-height: 1.4;
	transition: background-color .25s var(--kb-ease), color .25s var(--kb-ease);
}

.kb-navgroup li a:hover {
	background: var(--kb-bg);
	color: var(--kb-text);
}

.kb-navgroup li a[aria-current="page"] {
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
	font-weight: 700;
}

.kb-navgroup li a[aria-current="page"]::before {
	content: "";
	position: absolute;
	top: 8px;
	bottom: 8px;
	left: -12px;
	width: 3px;
	border-radius: 3px;
	background: var(--kb-orange);
}

.kb-nav__empty {
	margin: 4px 10px 10px;
	color: var(--kb-text-2);
	font-size: 13.5px;
}

.kb-nav__empty[hidden] {
	display: none;
}

/* Sheets (≤ 991px, JS) */
.kb-scrim {
	display: none;
}

@media (max-width: 991px) {
	.kb-js .kb-sheet {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 99988;
		display: block;
		max-height: 86vh;
		max-height: min(86dvh, 760px);
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 16px calc(24px + env(safe-area-inset-bottom, 0px));
		border-radius: 24px 24px 0 0;
		background: var(--kb-white);
		box-shadow: 0 -24px 56px -28px rgba(10, 22, 40, .4);
		transform: translateY(104%);
		visibility: hidden;
		transition: transform .55s var(--kb-ease), visibility 0s .55s;
	}

	.kb-js .kb-sheet.is-open {
		transform: none;
		visibility: visible;
		transition: transform .55s var(--kb-ease), visibility 0s 0s;
	}

	.kb-js .kb-sheet .kb-sheet__head {
		position: sticky;
		top: 0;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		margin: 0 -16px 14px;
		padding: 22px 16px 12px;
		border-bottom: 1px solid var(--kb-border);
		background: var(--kb-white);
	}

	/* Grabber */
	.kb-js .kb-sheet .kb-sheet__head::before {
		content: "";
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 4px;
		margin-left: -20px;
		border-radius: 4px;
		background: var(--kb-border);
	}

	.kb-js .kb-sheet .kb-aside-title {
		display: none;
	}

	.kb-js .kb-scrim {
		position: fixed;
		inset: 0;
		z-index: 99987;
		display: block;
		background: rgba(10, 22, 40, .48);
		opacity: 0;
		transition: opacity .45s var(--kb-ease);
	}

	.kb-js .kb-scrim[hidden] {
		display: none;
	}

	.kb-js .kb-scrim.is-open {
		opacity: 1;
	}
}

.kb-sheet__title {
	font-size: 17px;
	font-weight: 800;
}

.kb-sheet__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: 50%;
	background: var(--kb-bg);
	color: var(--kb-text);
	font-size: 18px;
	cursor: pointer;
}

html.kb-lock {
	overflow: hidden;
}

html.kb-lock .ask-ai-fab,
html.kb-lock .ask-ai-nudge {
	opacity: 0 !important;
	visibility: hidden !important;
	pointer-events: none !important;
}

/* ===================== PROSE ===================== */
.kb-prose {
	color: var(--kb-text);
	font-size: 16.5px;
	line-height: 1.75;
	overflow-wrap: break-word;
}

.kb-prose > :first-child {
	margin-top: 0 !important;
	padding-top: 0 !important;
	border-top: 0 !important;
}

.kb-prose p,
.kb-prose ul,
.kb-prose ol,
.kb-prose dl,
.kb-prose blockquote,
.kb-prose pre {
	margin: 0 0 20px;
}

.kb-prose h2,
.kb-prose h3,
.kb-prose h4,
.kb-prose h5,
.kb-prose h6 {
	position: relative;
	scroll-margin-top: var(--kb-anchor);
	font-weight: 800;
	letter-spacing: -.015em;
}

.kb-prose h2 {
	margin: 56px 0 16px;
	padding-top: 32px;
	border-top: 1px solid var(--kb-border);
	font-size: clamp(22px, 2.4vw, 27px);
	line-height: 1.25;
	letter-spacing: -.02em;
}

.kb-prose hr + h2,
.kb-prose h1 + h2 {
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

.kb-prose h3 {
	margin: 40px 0 12px;
	font-size: 20px;
	line-height: 1.35;
}

.kb-prose h2 + h3 {
	margin-top: 20px;
}

.kb-prose h4 {
	margin: 30px 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
}

.kb-prose h5,
.kb-prose h6 {
	margin: 24px 0 8px;
	color: var(--kb-text-2);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.kb-prose h1 {
	margin: 0 0 16px;
	font-size: 26px;
	font-weight: 800;
}

.kb-prose strong,
.kb-prose b {
	color: var(--kb-text);
	font-weight: 700;
}

.kb .kb-prose a {
	color: var(--kb-blue);
	text-decoration: underline;
	text-decoration-color: rgba(1, 92, 128, .35);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color .2s var(--kb-ease), text-decoration-color .2s var(--kb-ease);
}

.kb .kb-prose a:hover {
	color: var(--kb-ink);
	text-decoration-color: currentColor;
}

.kb-prose ul,
.kb-prose ol {
	padding-left: 1.35em;
}

.kb-prose ul {
	list-style: disc;
}

.kb-prose ol {
	list-style: decimal;
}

.kb-prose ul ul {
	list-style: circle;
}

.kb-prose li {
	margin-bottom: 8px;
	padding-left: 4px;
}

.kb-prose li::marker {
	color: var(--kb-text-2);
}

.kb-prose ol > li::marker {
	color: var(--kb-ink);
	font-weight: 700;
}

.kb-prose li > ul,
.kb-prose li > ol {
	margin: 8px 0 4px;
}

.kb-prose li > p {
	margin: 0;
}

.kb-prose hr {
	height: 0;
	margin: 44px 0;
	border: 0;
	border-top: 1px solid var(--kb-border);
	opacity: 1;
}

.kb-prose img {
	display: block;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--kb-border);
	border-radius: 12px;
	background: var(--kb-white);
}

.kb-prose figure {
	margin: 28px 0;
}

.kb-prose figure img,
.kb-prose .aligncenter {
	margin-right: auto;
	margin-left: auto;
}

.kb-prose figcaption,
.kb-prose .wp-element-caption {
	margin-top: 10px;
	color: var(--kb-text-2);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
}

.kb-prose iframe,
.kb-prose video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 14px;
	background: var(--kb-bg);
}

.kb-prose blockquote {
	padding: 16px 20px;
	border-left: 3px solid var(--kb-orange);
	border-radius: 0 12px 12px 0;
	background: var(--kb-bg);
}

.kb-prose blockquote p:last-child {
	margin-bottom: 0;
}

/* Tables: scroll sideways inside their own box, never the page. */
.kb-prose .wp-block-table,
.kb-prose .kb-table {
	margin: 24px 0;
	overflow-x: auto;
	border: 1px solid var(--kb-border);
	border-radius: 14px;
	-webkit-overflow-scrolling: touch;
}

.kb-prose table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14.5px;
	line-height: 1.55;
}

.kb-prose th,
.kb-prose td {
	padding: 12px 14px;
	border: 0;
	border-top: 1px solid var(--kb-border);
	text-align: left;
	vertical-align: top;
}

.kb-prose thead th {
	border-top: 0;
	background: var(--kb-bg);
	font-weight: 700;
}

.kb-prose tbody tr:first-child td,
.kb-prose tbody tr:first-child th {
	border-top: 0;
}

.kb-prose thead + tbody tr:first-child td,
.kb-prose thead + tbody tr:first-child th {
	border-top: 1px solid var(--kb-border);
}

.kb-prose .wp-block-table figcaption {
	padding: 0 14px 12px;
}

/* Code */
.kb-prose :not(pre) > code {
	padding: .15em .45em;
	border: 1px solid var(--kb-blue-line);
	border-radius: 6px;
	background: var(--kb-blue-soft);
	color: #0B3C52;
	font-family: var(--kb-mono);
	font-size: .86em;
	overflow-wrap: anywhere;
}

.kb-prose pre {
	position: relative;
	padding: 20px 22px;
	overflow-x: auto;
	border-radius: 14px;
	background: var(--kb-dark);
	color: #E3EAF4;
	font-family: var(--kb-mono);
	font-size: 13.5px;
	line-height: 1.7;
	-webkit-overflow-scrolling: touch;
}

.kb-prose pre code {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font-size: inherit;
}

.kb-pre {
	position: relative;
	margin: 0 0 20px;
}

.kb-pre pre {
	margin: 0;
	padding-top: 44px;
}

.kb-copy {
	position: absolute;
	top: 10px;
	right: 10px;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 10px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: 999px;
	background: rgba(255, 255, 255, .06);
	color: #fff;
	font-family: var(--kb-font);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color .25s var(--kb-ease);
}

.kb-copy:hover {
	background: rgba(255, 255, 255, .14);
}

/* Block editor bits that appear in the docs */
.kb .kb-prose .wp-block-button__link {
	display: inline-flex;
	padding: 10px 20px;
	border-radius: 999px;
	background: var(--kb-ink);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.kb .kb-prose .wp-block-button__link:hover {
	background: var(--kb-ink-hover);
	color: #fff;
}

.kb-prose .wp-block-group.has-background {
	margin: 24px 0;
	padding: 20px 22px;
	border-radius: 14px;
}

/* Heading anchor ("salin tautan bagian") */
.kb-anchor {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-left: 6px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--kb-text-2);
	font-size: 16px;
	vertical-align: middle;
	cursor: pointer;
	opacity: 0;
	transition: opacity .25s var(--kb-ease), background-color .25s var(--kb-ease);
}

.kb-prose h2:hover .kb-anchor,
.kb-prose h3:hover .kb-anchor,
.kb-prose h4:hover .kb-anchor,
.kb-anchor:focus-visible {
	opacity: 1;
}

.kb-anchor:hover {
	background: var(--kb-bg);
	color: var(--kb-ink);
}

@media (hover: none) {
	.kb-anchor { display: none; }
}

/* ===================== AFTER THE ARTICLE ===================== */
.kb-feedback {
	margin-top: 56px;
	padding: 6px;
	border: 1px solid var(--kb-hairline);
	border-radius: var(--kb-r-shell);
	background: var(--kb-recess);
}

.kb-feedback__core {
	padding: 22px 24px;
	border: 1px solid var(--kb-hairline);
	border-radius: calc(var(--kb-r-shell) - 6px);
	background: var(--kb-white);
}

.kb-feedback__step {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 20px;
}

.kb-feedback__step[hidden] {
	display: none;
}

.kb-feedback__q {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
}

.kb-feedback__q small {
	display: block;
	margin-top: 2px;
	color: var(--kb-text-2);
	font-size: 13.5px;
	font-weight: 500;
}

.kb-feedback__btns {
	display: flex;
	gap: 10px;
}

.kb-vote {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--kb-border);
	border-radius: 999px;
	background: var(--kb-white);
	color: var(--kb-text);
	font-size: 14.5px;
	font-weight: 700;
	cursor: pointer;
	transition: border-color .25s var(--kb-ease), background-color .25s var(--kb-ease), color .25s var(--kb-ease), transform .4s var(--kb-ease);
}

.kb-vote .kb-i {
	font-size: 18px;
}

.kb-vote:active {
	transform: scale(.97);
}

.kb-vote--yes:hover {
	border-color: rgba(15, 123, 79, .35);
	background: var(--kb-green-soft);
	color: var(--kb-green);
}

.kb-vote--no:hover {
	border-color: var(--kb-orange-line);
	background: var(--kb-orange-soft);
	color: var(--kb-ink-hover);
}

.kb-feedback__done {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0;
	font-size: 15.5px;
	font-weight: 600;
}

.kb-feedback__done .kb-i {
	margin-top: 2px;
	padding: 4px;
	border-radius: 50%;
	background: var(--kb-green-soft);
	color: var(--kb-green);
	font-size: 26px;
}

.kb-feedback__no .kb-feedback__done .kb-i {
	background: var(--kb-orange-soft);
	color: var(--kb-ink);
}

.kb-feedback__done small {
	display: block;
	margin-top: 2px;
	color: var(--kb-text-2);
	font-size: 14px;
	font-weight: 500;
}

.kb-feedback__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

/* Prev / next */
.kb-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 28px;
}

.kb-pager__link {
	display: flex;
	flex-direction: column;
	gap: 4px;
	height: 100%;
	padding: 18px 20px;
	border: 1px solid var(--kb-border);
	border-radius: var(--kb-r-card);
	background: var(--kb-white);
	transition: border-color .25s var(--kb-ease), transform .5s var(--kb-ease), box-shadow .5s var(--kb-ease);
}

.kb-pager__link--next {
	grid-column: 2;
	align-items: flex-end;
	text-align: right;
}

.kb-pager__dir {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: var(--kb-text-2);
	font-size: 13px;
	font-weight: 600;
}

.kb-pager__dir .kb-i {
	transition: transform .4s var(--kb-ease);
}

.kb-pager__title {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	transition: color .25s var(--kb-ease);
}

.kb-pager__ch {
	color: var(--kb-text-2);
	font-size: 13px;
}

.kb-pager__link:hover {
	border-color: var(--kb-orange-line);
}

.kb-pager__link:hover .kb-pager__title {
	color: var(--kb-ink);
}

.kb-pager__link--prev:hover .kb-pager__dir .kb-i {
	transform: translateX(-3px);
}

.kb-pager__link--next:hover .kb-pager__dir .kb-i {
	transform: translateX(3px);
}

@media (hover: hover) and (pointer: fine) {
	.kb-pager__link:hover {
		transform: translateY(-2px);
		box-shadow: var(--kb-shadow-card);
	}
}

@media (max-width: 575px) {
	.kb-pager { grid-template-columns: 1fr; }
	.kb-pager__link--next { grid-column: 1; }
}

/* More in this chapter */
.kb-more {
	margin-top: 48px;
}

.kb-more__title {
	margin: 0 0 14px;
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -.01em;
}

.kb-more .kb-row__main {
	padding: 14px 18px;
}

.kb-doc > .kb-help {
	margin-top: 56px;
}

.kb-doc .kb-help__core {
	grid-template-columns: 1fr;
	gap: 22px;
	padding: 30px 30px 32px;
}

.kb-doc .kb-help__actions {
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	min-width: 0;
}

.kb-doc .kb-help__actions .kb-btn {
	justify-content: center;
}

.kb-doc .kb-help__contact {
	text-align: left;
}

@media (max-width: 575px) {
	.kb-doc .kb-help__core { padding: 24px 20px; }
	.kb-doc .kb-help__actions { flex-direction: column; align-items: stretch; }
}

/* Toast */
.kb-toast {
	position: fixed;
	bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	left: 50%;
	z-index: 99990;
	padding: 10px 18px;
	border-radius: 999px;
	background: var(--kb-dark);
	color: #fff;
	font-family: var(--kb-font);
	font-size: 14px;
	font-weight: 600;
	box-shadow: var(--kb-shadow-float);
	opacity: 0;
	pointer-events: none;
	transform: translate(-50%, 12px);
	transition: opacity .35s var(--kb-ease), transform .45s var(--kb-ease);
}

.kb-toast.is-in {
	opacity: 1;
	transform: translate(-50%, 0);
}

/* ===================== REDUCED MOTION ===================== */
@media (prefers-reduced-motion: reduce) {
	.kb *,
	.kb *::before,
	.kb *::after,
	.kb-toast {
		transition-duration: .01ms !important;
		animation: none !important;
	}

	.kb.kb-anim [data-kb-reveal] {
		opacity: 1;
		transform: none;
	}
}