/* ==========================================================================
   Barantum Help Center — Design System (prototype)
   Docs-focused direction (Stripe Docs / GitBook)
   Single source of truth: design tokens -> base -> components -> utilities
   ========================================================================== */

/* ------------------------------------------------------------------ *
 * 1. DESIGN TOKENS
 * ------------------------------------------------------------------ */
:root {
  /* Brand — override only --brand-500 (+ --color-primary) per tenant; tints derive from it */
  --brand-500: #1a83c7;
  --brand-50:  color-mix(in srgb, var(--brand-500) 8%,  white);
  --brand-100: color-mix(in srgb, var(--brand-500) 16%, white);
  --brand-200: color-mix(in srgb, var(--brand-500) 32%, white);
  --brand-300: color-mix(in srgb, var(--brand-500) 52%, white);
  --brand-400: color-mix(in srgb, var(--brand-500) 76%, white);
  --brand-600: color-mix(in srgb, var(--brand-500) 82%, black);
  --brand-700: color-mix(in srgb, var(--brand-500) 66%, black);
  --brand-800: color-mix(in srgb, var(--brand-500) 54%, black);
  --brand-900: color-mix(in srgb, var(--brand-500) 44%, black);

  /* Neutral (slate) */
  --gray-0:   #ffffff;
  --gray-50:  #f8fafc;
  --gray-100: #f1f5f9;
  --gray-200: #e6ebf1;
  --gray-300: #d3dbe4;
  --gray-400: #9aa7b5;
  --gray-500: #6b7885;
  --gray-600: #4b5763;
  --gray-700: #333e49;
  --gray-800: #1f2833;
  --gray-900: #131a21;

  /* Semantic */
  --green-500:  #16a34a; --green-50:  #ecfdf3;
  --amber-500:  #d97706; --amber-50:  #fff7ed;
  --red-500:    #dc2626; --red-50:    #fef2f2;

  /* Semantic surface roles (light) */
  --color-bg:        var(--gray-50);
  --color-surface:   var(--gray-0);
  --color-surface-2: var(--gray-100);
  --color-border:    var(--gray-200);
  --color-border-strong: var(--gray-300);
  --color-text:      var(--gray-800);
  --color-text-muted:var(--gray-500);
  --color-heading:   var(--gray-900);
  --color-primary:   var(--brand-500);
  --color-primary-hover: var(--brand-600);
  --color-on-primary:#ffffff;
  --color-link:      var(--brand-600);
  --color-focus:     var(--brand-400);

  /* Typography */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-mono: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;

  --text-xs:   0.75rem;   /* 12 */
  --text-sm:   0.8125rem; /* 13 */
  --text-base: 0.9375rem; /* 15 */
  --text-md:   1rem;      /* 16 */
  --text-lg:   1.125rem;  /* 18 */
  --text-xl:   1.375rem;  /* 22 */
  --text-2xl:  1.75rem;   /* 28 */
  --text-3xl:  2.25rem;   /* 36 */
  --text-4xl:  3rem;      /* 48 */

  --leading-tight: 1.25;
  --leading-snug:  1.4;
  --leading-normal:1.65;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  /* Spacing scale (4px base) */
  --space-1: 0.25rem; --space-2: 0.5rem;  --space-3: 0.75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 2.5rem;  --space-8: 3rem;    --space-10: 4rem;
  --space-12: 6rem;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-full: 999px;

  /* Shadows */
  --shadow-xs: 0 1px 2px rgba(16,24,40,.05);
  --shadow-sm: 0 1px 3px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.04);
  --shadow-lg: 0 12px 28px rgba(16,24,40,.12), 0 4px 8px rgba(16,24,40,.05);

  /* Layout */
  --nav-h: 64px;
  --sidebar-w: 288px;
  --toc-w: 240px;
  --content-max: 1280px;
  --prose-max: 760px;

  --transition: 160ms cubic-bezier(.4,0,.2,1);
}

/* Dark theme */
/* Dark theme is opt-in only (via the toggle). Default is always light,
   regardless of the OS prefers-color-scheme setting. */
:root[data-theme="dark"] {
  --color-bg:        #0d1117;
  --color-surface:   #131a22;
  --color-surface-2: #1a222c;
  --color-border:    #263140;
  --color-border-strong:#33404f;
  --color-text:      #c5ccd6;
  --color-text-muted:#8b97a5;
  --color-heading:   #eef2f6;
  --color-primary:   var(--brand-400);
  --color-primary-hover: var(--brand-300);
  --color-link:      var(--brand-300);
}

/* ------------------------------------------------------------------ *
 * 2. BASE / RESET
 * ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 16px); }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1,h2,h3,h4,h5 { color: var(--color-heading); line-height: var(--leading-tight); font-weight: var(--fw-semibold); letter-spacing: -0.01em; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
a { color: var(--color-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-hover); text-decoration: none; }
img, svg { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 4px; }

/* ------------------------------------------------------------------ *
 * 3. LAYOUT PRIMITIVES
 * ------------------------------------------------------------------ */
.container { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-5); }
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--color-primary); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ *
 * 4. TOP NAVBAR
 * ------------------------------------------------------------------ */
.navbar {
  position: sticky; top: 0; z-index: 50; height: var(--nav-h);
  background: color-mix(in srgb, var(--color-surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border);
}
.navbar__inner { max-width: var(--content-max); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: var(--space-4); padding-inline: var(--space-5); }
.navbar__brand { display: flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-bold);
  color: var(--color-heading); font-size: var(--text-lg); flex-shrink: 0; }
.navbar__brand:hover { text-decoration: none; }
.navbar__brand .navbar__logo-img { transition: opacity var(--transition); }
.navbar__brand:hover .navbar__logo-img { opacity: .8; }
.navbar__brand:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); }
/* Secondary sign-in link after the primary CTA, as on barantum.com. */
.navbar__signin { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; color: var(--color-primary);
  font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap; border-radius: var(--radius-sm); }
.navbar__signin svg { transition: transform var(--transition); }
.navbar__signin:hover { text-decoration: none; color: var(--color-primary-hover); }
.navbar__signin:hover svg { transform: translateX(2px); }
.navbar__signin:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.navbar__logo { width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-600));
  display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 15px; }
.navbar__logo-img { height: 34px; width: auto; display: block; }
/* Colored logo shows as-is on light; flatten to a clean white lockup on dark surfaces */
:root[data-theme="dark"] .navbar__logo-img { filter: brightness(0) invert(1); }
/* DB-driven categories live in the Panduan dropdown, so the bar stays a fixed 3 items.
   No overflow here — it would clip the dropdown panel. */
.navbar__nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-2); flex-shrink: 0; }
.navbar__link { white-space: nowrap; color: var(--color-text-muted); font-weight: var(--fw-medium); font-size: var(--text-base);
  padding: 8px 12px; border-radius: var(--radius-sm); white-space: nowrap; }
.navbar__link:hover { color: var(--color-heading); background: var(--color-surface-2); text-decoration: none; }
.navbar__link--active { color: var(--color-primary); }
.navbar__spacer { flex: 1; }
.navbar__search { flex: 0 1 300px; min-width: 0; }
/* Pages with their own search box (home hero, results): the navbar box stays out of the way until it scrolls past (helpcenter.js 8c). */
.navbar__search { transition: opacity var(--transition), visibility var(--transition); }
.navbar__search.is-tucked { opacity: 0; visibility: hidden; }

/* --- Panduan dropdown --- */
.navbar__dropdown { position: relative; }
.navbar__trigger { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none;
  font-family: inherit; cursor: pointer; }
.navbar__chev { transition: transform var(--transition); }
.navbar__trigger[aria-expanded="true"] { color: var(--color-heading); background: var(--color-surface-2); }
.navbar__trigger[aria-expanded="true"] .navbar__chev { transform: rotate(180deg); }
.navbar__menu { position: absolute; top: calc(100% + 8px); left: 0; z-index: 60;
  min-width: 232px; padding: var(--space-2); display: grid; gap: 2px;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.navbar__menu[hidden] { display: none; }
.navbar__menu-item { display: block; padding: 9px 12px; border-radius: var(--radius-sm);
  color: var(--color-text-muted); font-size: var(--text-base); font-weight: var(--fw-medium); white-space: nowrap; }
.navbar__menu-item:hover, .navbar__menu-item:focus-visible {
  color: var(--color-heading); background: var(--color-surface-2); text-decoration: none; outline: none; }
.navbar__menu-item--active { color: var(--color-primary); }
.navbar__actions { display: flex; align-items: center; gap: var(--space-2); }
.navbar__actions .btn { border-radius: 999px; padding-inline: 16px; } /* pill CTA, as on barantum.com */
.icon-btn { width: 38px; height: 38px; border-radius: var(--radius-sm); border: 1px solid var(--color-border);
  background: var(--color-surface); color: var(--color-text-muted); display: grid; place-items: center;
  transition: var(--transition); }
.icon-btn:hover { color: var(--color-heading); border-color: var(--color-border-strong); }

/* ------------------------------------------------------------------ *
 * 5. SEARCH INPUT
 * ------------------------------------------------------------------ */
.search { position: relative; display: flex; align-items: center; }
.search__icon { position: absolute; left: 14px; color: var(--color-text-muted); pointer-events: none; display: flex; }
.search__input {
  width: 100%; height: 42px; padding: 0 44px 0 42px;
  border: 1px solid var(--color-border-strong); border-radius: var(--radius-md);
  background: var(--color-surface); color: var(--color-text); font-size: var(--text-base);
  transition: var(--transition);
}
.search__input::placeholder { color: var(--color-text-muted); }
.search__input:focus { outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent); }
.search__kbd { position: absolute; right: 12px; font-family: var(--font-mono); font-size: 11px;
  color: var(--color-text-muted); border: 1px solid var(--color-border); border-radius: 5px;
  padding: 2px 6px; background: var(--color-surface-2); }
.search--sm .search__input { height: 40px; }
.search--hero .search__input { height: 58px; font-size: var(--text-lg); padding-left: 52px; border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); }
.search--hero .search__icon { left: 20px; }

/* ------------------------------------------------------------------ *
 * 6. BUTTONS
 * ------------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--fw-semibold);
  font-size: var(--text-base); padding: 10px 18px; border-radius: var(--radius-md); border: 1px solid transparent;
  transition: var(--transition); white-space: nowrap; }
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-xs); }
/* Keep the text color on hover: as an <a>, the global a:hover (blue) would otherwise win and hide the label. */
.btn--primary:hover { background: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--secondary { background: var(--color-surface); color: var(--color-heading); border-color: var(--color-border-strong); }
.btn--secondary:hover { background: var(--color-surface-2); }
.btn--ghost { background: transparent; color: var(--color-primary); }
.btn--ghost:hover { background: var(--brand-50); }
.btn--lg { padding: 13px 24px; font-size: var(--text-md); }
.btn--sm { padding: 7px 14px; font-size: var(--text-sm); border-radius: var(--radius-sm); }

/* ------------------------------------------------------------------ *
 * 7. HERO (home)
 * ------------------------------------------------------------------ */
.hero { position: relative; overflow: hidden; isolation: isolate; text-align: center;
  padding: var(--space-12) var(--space-5) var(--space-10);
  background:
    radial-gradient(42% 70% at 18% 8%,  color-mix(in srgb, var(--brand-500) 26%, transparent), transparent 70%),
    radial-gradient(38% 65% at 84% 12%, color-mix(in srgb, #7c5cff 18%, transparent), transparent 70%),
    radial-gradient(50% 60% at 50% 100%, color-mix(in srgb, #14b8a6 12%, transparent), transparent 70%),
    linear-gradient(180deg, var(--brand-50), var(--color-surface));
  border-bottom: 1px solid var(--color-border); }
/* Subtle dot grid, faded at the edges, for texture */
.hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--brand-500) 22%, transparent) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 70% at 50% 40%, #000 20%, transparent 75%);
          mask-image: radial-gradient(60% 70% at 50% 40%, #000 20%, transparent 75%); }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: var(--text-sm);
  font-weight: var(--fw-semibold); color: var(--brand-700);
  background: color-mix(in srgb, var(--color-surface) 70%, transparent); backdrop-filter: blur(6px);
  border: 1px solid var(--brand-200); padding: 5px 14px 5px 10px; border-radius: var(--radius-full);
  margin-bottom: var(--space-5); box-shadow: var(--shadow-xs); }
.hero__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green-500);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-500) 22%, transparent); }
.hero__title { font-size: clamp(2.25rem, 4.5vw, 3.5rem); letter-spacing: -0.03em; line-height: 1.1;
  margin-bottom: var(--space-4); }
.hero__title-accent { background: linear-gradient(90deg, var(--brand-500), #7c5cff);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero__subtitle { font-size: var(--text-lg); color: var(--gray-600); max-width: 580px;
  margin: 0 auto var(--space-7); }
.hero__search { max-width: 640px; margin: 0 auto; }
.hero__search .search__input { border-color: color-mix(in srgb, var(--brand-500) 25%, var(--color-border));
  box-shadow: 0 10px 30px -8px color-mix(in srgb, var(--brand-500) 30%, transparent), var(--shadow-sm); }
.hero__search .search__icon { color: var(--color-primary); }
.hero__suggest { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); justify-content: center;
  margin-top: var(--space-5); font-size: var(--text-sm); color: var(--color-text-muted); }
.hero__suggest > span { font-weight: var(--fw-medium); }
.hero__suggest a { color: var(--brand-700); border: 1px solid var(--brand-100); font-weight: var(--fw-medium);
  padding: 5px 14px; border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--color-surface) 75%, transparent); transition: var(--transition); }
.hero__suggest a:hover { color: var(--color-on-primary); background: var(--color-primary); border-color: var(--color-primary);
  text-decoration: none; transform: translateY(-1px); }
:root[data-theme="dark"] .hero { background:
    radial-gradient(42% 70% at 18% 8%,  color-mix(in srgb, var(--brand-500) 22%, transparent), transparent 70%),
    radial-gradient(38% 65% at 84% 12%, color-mix(in srgb, #7c5cff 16%, transparent), transparent 70%),
    var(--color-surface); }
:root[data-theme="dark"] .hero__subtitle { color: var(--color-text-muted); }
:root[data-theme="dark"] .hero__eyebrow,
:root[data-theme="dark"] .hero__suggest a { color: var(--brand-300); border-color: color-mix(in srgb, var(--brand-500) 40%, transparent); }

/* ------------------------------------------------------------------ *
 * 8. SECTION HEADINGS
 * ------------------------------------------------------------------ */
.section { padding-block: var(--space-10); }
.section__head { margin-bottom: var(--space-6); }
.section__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.section__desc { color: var(--color-text-muted); font-size: var(--text-md); }
.eyebrow { text-transform: uppercase; letter-spacing: 0.08em; font-size: var(--text-xs);
  font-weight: var(--fw-bold); color: var(--color-primary); margin-bottom: var(--space-2); }

/* ------------------------------------------------------------------ *
 * 9. CATEGORY CARD GRID
 * ------------------------------------------------------------------ */
.card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-4); }
.cat-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  transition: var(--transition); }
.cat-card:hover { text-decoration: none; border-color: var(--color-primary);
  box-shadow: var(--shadow-md); transform: translateY(-2px); }
.cat-card__icon { width: 44px; height: 44px; border-radius: var(--radius-md); display: grid; place-items: center;
  background: var(--brand-50); color: var(--color-primary); font-size: 22px; }
.cat-card__title { font-size: var(--text-lg); color: var(--color-heading); font-weight: var(--fw-semibold); }
.cat-card__desc { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-snug); flex: 1; }
.cat-card__meta { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--fw-medium);
  display: flex; align-items: center; gap: 6px; }

/* Demo CTA card — inverted to solid brand so it reads as the one action
   in a grid of white category cards. Kept identical in both themes. */
.cat-card--demo { border-color: transparent; color: #fff;
  background: linear-gradient(135deg, var(--brand-600) 0%, var(--brand-500) 55%, var(--brand-400) 100%);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--brand-500) 30%, transparent); }
.cat-card--demo:hover { border-color: transparent;
  box-shadow: 0 14px 32px color-mix(in srgb, var(--brand-500) 42%, transparent); }
.cat-card--demo .cat-card__icon { background: rgba(255,255,255,.18); color: #fff;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22); }
.cat-card--demo .cat-card__title { color: #fff; }
.cat-card--demo .cat-card__desc { color: rgba(255,255,255,.82); flex: 0 1 auto; }
.cat-card--demo .cat-card__meta { color: #fff; font-weight: var(--fw-semibold); margin-top: auto; }
.cat-card--demo .cat-card__schedule { color: #fff; background: rgba(255,255,255,.14);
  border-color: rgba(255,255,255,.3); }
.cat-card__schedule { font-size: var(--text-sm); font-weight: var(--fw-medium);
  align-self: flex-start; padding: 5px 10px; border-radius: var(--radius-full);
  border: 1px solid var(--color-border); }

/* Colorful icon variants */
.i-blue   { background: var(--brand-50);  color: var(--brand-600); }
.i-green  { background: var(--green-50);  color: var(--green-500); }
.i-amber  { background: var(--amber-50);  color: var(--amber-500); }
.i-violet { background: #f3f0ff;          color: #7c3aed; }
.i-pink   { background: #fdf2f8;          color: #db2777; }
.i-cyan   { background: #ecfeff;          color: #0891b2; }

/* ------------------------------------------------------------------ *
 * 10. POPULAR / ARTICLE LIST
 * ------------------------------------------------------------------ */
.list-card { background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border); transition: var(--transition); }
.list-row:last-child { border-bottom: none; }
.list-row:hover { background: var(--color-surface-2); text-decoration: none; }
.list-row__icon { color: var(--color-text-muted); display: flex; }
.list-row__body { flex: 1; min-width: 0; }
.list-row__title { color: var(--color-heading); font-weight: var(--fw-medium); }
.list-row__sub { font-size: var(--text-sm); color: var(--color-text-muted); }
.list-row__arrow { color: var(--color-text-muted); transition: transform var(--transition); }
.list-row:hover .list-row__arrow { transform: translateX(3px); color: var(--color-primary); }

/* Card-shaped links inside prose are UI, not body copy — the prose underline
   rule must not reach them. */
.prose .list-row, .prose .cat-card,
.prose .list-row:hover, .prose .cat-card:hover { text-decoration: none; }
.prose .list-row__title { color: var(--color-heading); }

/* Changelog timeline (Update Fitur landing): date column, a rail with a dot per release, and a
   card listing the release's highlights. Scoped under .prose so article h2/h3/ul/a rules stay out. */
.prose .changelog { margin-top: var(--space-8); }
.prose h2.changelog__year { margin: var(--space-8) 0 var(--space-4); padding: 0; border: 0;
  font-size: var(--text-sm); font-weight: var(--fw-bold); letter-spacing: .08em; color: var(--color-text-muted); }
.prose h2.changelog__year:first-child { margin-top: 0; }
.release { position: relative; display: grid; grid-template-columns: 96px 1fr; gap: var(--space-6); padding-bottom: var(--space-5); }
/* Rail + dot, in the gap between the date and the card */
.release::before { content: ""; position: absolute; left: calc(96px + var(--space-6) / 2); top: 10px; bottom: -10px;
  width: 2px; margin-left: -1px; background: var(--color-border); }
.release:last-child::before { display: none; }
.release::after { content: ""; position: absolute; left: calc(96px + var(--space-6) / 2); top: 6px; width: 10px; height: 10px;
  margin-left: -5px; border-radius: 999px; background: var(--color-surface); border: 2px solid var(--color-border-strong); }
.release--latest::after { background: var(--color-primary); border-color: var(--color-primary);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 18%, transparent); }
.release__date { display: flex; flex-direction: column; align-items: flex-end; text-align: right; padding-top: 1px; }
.release__month { font-weight: var(--fw-semibold); color: var(--color-heading); line-height: 1.3; }
.release__yr { font-size: var(--text-xs); color: var(--color-text-muted); }
.release__card { min-width: 0; padding: var(--space-4) var(--space-5); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: border-color var(--transition), box-shadow var(--transition); }
.release__card:hover { border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-border)); box-shadow: var(--shadow-sm); }
.release--latest .release__card { border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border)); }
.prose h3.release__title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin: 0; padding: 0; font-size: var(--text-lg); line-height: var(--leading-snug); }
.prose .release__title a { color: var(--color-heading); text-decoration: none; }
.prose .release__title a:hover { color: var(--color-primary); }
.release__badge { padding: 2px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.prose p.release__count { margin: 2px 0 var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
.prose ul.release__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.prose ul.release__list li { position: relative; margin: 0; padding-left: 18px; font-size: var(--text-sm); color: var(--color-text); line-height: 1.5; }
.prose ul.release__list li::before { content: ""; position: absolute; left: 2px; top: .6em; width: 6px; height: 6px;
  border-radius: 2px; background: color-mix(in srgb, var(--color-primary) 55%, transparent); }
.prose p.release__more { margin: var(--space-2) 0 0; font-size: var(--text-sm); color: var(--color-text-muted); }
.prose a.release__link { display: inline-flex; align-items: center; gap: 6px; margin-top: var(--space-3);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-primary); text-decoration: none; }
.prose a.release__link svg { transition: transform var(--transition); }
.prose a.release__link:hover svg { transform: translateX(2px); }
@media (max-width: 640px) {
  .release { grid-template-columns: 1fr; gap: var(--space-2); padding-left: var(--space-5); }
  .release::before, .release::after { left: 4px; }
  .release__date { flex-direction: row; gap: 6px; align-items: baseline; text-align: left; }
}

/* ------------------------------------------------------------------ *
 * 11. DOCS LAYOUT (3 columns)
 * ------------------------------------------------------------------ */
.docs { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-5);
  display: grid; grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--toc-w); gap: var(--space-6);
  align-items: start; }
.docs--2col { grid-template-columns: var(--sidebar-w) minmax(0,1fr); }
@media (max-width: 1100px) { .docs { grid-template-columns: var(--sidebar-w) minmax(0,1fr); } .toc { display: none; } }
@media (max-width: 860px)  { .docs { grid-template-columns: 1fr; } .docs-sidebar { display: none; } }

/* Non-collapsible parent label inside the dynamic article tree */
.nav-parent { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-heading);
  padding: 7px var(--space-3); margin-top: var(--space-2);
  border-left: 2px solid var(--color-border); }

/* Sidebar tree nav */
.docs-sidebar { position: sticky; top: calc(var(--nav-h) + var(--space-5)); align-self: start;
  max-height: calc(100vh - var(--nav-h) - var(--space-6)); overflow-y: auto; padding: var(--space-5) 0;
  padding-right: var(--space-4);
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.docs-sidebar [hidden] { display: none !important; }
/* Fade at the bottom edge while the list continues below (JS adds .is-end at the end). */
.docs-sidebar::after { content: ""; position: sticky; bottom: calc(-1 * var(--space-5)); display: block; height: 56px;
  margin-top: -56px; pointer-events: none; background: linear-gradient(to bottom, transparent, var(--color-bg) 85%);
  transition: opacity var(--transition); }
.docs-sidebar.is-end::after { opacity: 0; }
.nav-group__count { margin-right: auto; padding: 0 6px; border-radius: 999px; background: var(--color-surface-2);
  font-size: 11px; font-weight: var(--fw-semibold); letter-spacing: 0; line-height: 18px; color: var(--color-text-muted); }
.docs-sidebar:hover { scrollbar-color: var(--color-border-strong) transparent; }
.docs-sidebar::-webkit-scrollbar { width: 8px; }
.docs-sidebar::-webkit-scrollbar-track { background: transparent; }
.docs-sidebar::-webkit-scrollbar-thumb { background: transparent; border-radius: 8px; border: 2px solid transparent;
  background-clip: padding-box; }
.docs-sidebar:hover::-webkit-scrollbar-thumb { background: var(--color-border-strong); background-clip: padding-box; }
/* Category name sits above the groups as a plain (non-collapsible) heading */
.docs-sidebar__title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-heading);
  letter-spacing: -0.01em; line-height: var(--leading-snug); margin-bottom: var(--space-4);
  padding-left: calc(var(--space-3) + 2px); }

/* Filter box — narrows the list below it; deliberately quieter than the navbar
   search field so the two don't read as the same control. */
.nav-filter { position: relative; margin-bottom: var(--space-4); }
.nav-filter__icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  color: var(--color-text-muted); pointer-events: none; }
.nav-filter input { width: 100%; padding: 6px 10px 6px 30px; font-family: inherit; font-size: var(--text-sm);
  color: var(--color-heading); background: var(--color-surface-2); border: 1px solid transparent;
  border-radius: var(--radius-sm); transition: var(--transition); }
.nav-filter input::placeholder { color: var(--color-text-muted); }
.nav-filter input:hover { border-color: var(--color-border); }
.nav-filter input:focus { outline: none; background: var(--color-surface); border-color: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 16%, transparent); }
/* Active filter (has a value): tinted so it reads as "the list is narrowed", with a clear button. */
.nav-filter input:not(:placeholder-shown) { padding-right: 30px; color: var(--color-heading); font-weight: var(--fw-medium);
  background: color-mix(in srgb, var(--color-primary) 7%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-primary) 45%, transparent); }
.nav-filter input::-webkit-search-cancel-button { display: none; }
.nav-filter:has(input:not(:placeholder-shown)) .nav-filter__icon { color: var(--color-primary); }
.nav-filter__clear { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 22px; height: 22px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.nav-filter__clear:hover { background: var(--color-surface-2); color: var(--color-heading); }
.nav-filter__clear[hidden] { display: none; }
/* No match: says what was not found, then offers a way on. */
.nav-empty { padding: var(--space-4); border: 1px dashed var(--color-border); border-radius: var(--radius-md);
  font-size: var(--text-sm); color: var(--color-text-muted); }
.nav-empty__title { color: var(--color-heading); font-weight: var(--fw-semibold); margin-bottom: 2px; word-break: break-word; }
.nav-empty__actions { display: flex; flex-direction: column; gap: 6px; margin-top: var(--space-3); }
.nav-empty__actions a, .nav-empty__actions button { padding: 0; border: 0; background: none; font: inherit; text-align: left;
  color: var(--color-primary); font-weight: var(--fw-medium); cursor: pointer; }
.nav-empty__actions a:hover, .nav-empty__actions button:hover { text-decoration: underline; }

.nav-group { margin-bottom: var(--space-5); }
.nav-group__title { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: 0.06em;
  font-weight: var(--fw-bold); color: var(--color-text-muted); margin-bottom: var(--space-2);
  padding: 4px var(--space-2) 4px calc(var(--space-3) + 2px); margin-left: -2px;
  border-radius: var(--radius-sm); transition: var(--transition); }
.nav-group__title:hover { color: var(--color-heading); background: var(--color-surface-2); }
/* Links hang off a continuous 2px rail; the active item lights its own segment. */
.nav-link { display: block; padding: 7px var(--space-3); font-size: var(--text-sm);
  color: var(--color-text); line-height: var(--leading-snug); transition: var(--transition);
  border-left: 2px solid var(--color-border);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.nav-link:hover { color: var(--color-heading); background: var(--color-surface-2);
  border-left-color: var(--color-border-strong); text-decoration: none; }
.nav-link--active { color: var(--color-primary); font-weight: var(--fw-semibold);
  border-left-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, transparent); }
.nav-sub { margin-left: var(--space-3); }

/* Main article column */
.docs-main { padding-block: var(--space-6); min-width: 0; }
.breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); }
.breadcrumb a { color: var(--color-text-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb__sep { opacity: .5; }

/* Prose typography */
.prose { max-width: var(--prose-max); }
.prose > * + * { margin-top: var(--space-4); }
.prose h1 { font-size: var(--text-3xl); margin-bottom: var(--space-2); }
.prose h2 { font-size: var(--text-2xl); margin-top: var(--space-8); padding-top: var(--space-2);
  scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose h3 { font-size: var(--text-xl); margin-top: var(--space-6);
  scroll-margin-top: calc(var(--nav-h) + 20px); }
.prose p { color: var(--color-text); }
.prose a { color: var(--color-link); text-decoration: underline; text-underline-offset: 2px; }
.prose ul, .prose ol { padding-left: var(--space-5); }
.prose li { margin-top: var(--space-2); }
.prose img { border-radius: var(--radius-md); border: 1px solid var(--color-border); margin-block: var(--space-4); }
.prose code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-surface-2);
  border: 1px solid var(--color-border); border-radius: 5px; padding: 2px 6px; color: var(--color-heading); }
.prose pre { background: var(--gray-900); color: #e6edf3; padding: var(--space-4); border-radius: var(--radius-md);
  overflow-x: auto; font-family: var(--font-mono); font-size: var(--text-sm); }
.prose pre code { background: none; border: none; padding: 0; color: inherit; }
.prose blockquote { border-left: 3px solid var(--color-primary); padding-left: var(--space-4);
  color: var(--color-text-muted); font-style: italic; }
/* Heading anchor: "#" after the heading, shown on hover/focus; click copies the section link */
.heading-anchor { margin-left: 0.4em; color: var(--color-text-muted); font-weight: var(--fw-medium);
  text-decoration: none !important; opacity: 0; transition: var(--transition); }
.prose h2:hover .heading-anchor, .prose h3:hover .heading-anchor, .heading-anchor:focus-visible { opacity: 1; }
.heading-anchor:hover { color: var(--color-primary); }
@media (hover: none) { .heading-anchor { opacity: .5; } }
.article-meta { flex-wrap: wrap; }
.article-meta { display: flex; align-items: center; gap: var(--space-4); font-size: var(--text-sm);
  color: var(--color-text-muted); margin-top: var(--space-3); padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border); }
.article-meta span { display: inline-flex; align-items: center; gap: 6px; }

/* Video embed */
.embed { position: relative; aspect-ratio: 16/9; border-radius: var(--radius-md); overflow: hidden;
  border: 1px solid var(--color-border); margin-block: var(--space-5); }
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Callout */
.callout { display: flex; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); background: var(--color-surface-2); margin-block: var(--space-4); }
.callout__icon { flex-shrink: 0; margin-top: 2px; }
.callout__body { font-size: var(--text-base); min-width: 0; }
.callout__body > p { margin: 0; }
.callout__body > * + * { margin-top: var(--space-2); }
.prose .callout + .callout { margin-top: var(--space-3); }
.callout--info   { border-color: var(--brand-200);  background: var(--brand-50); }
.callout--info   .callout__icon { color: var(--brand-600); }
.callout--tip    { border-color: #bbf7d0;           background: var(--green-50); }
.callout--tip    .callout__icon { color: var(--green-500); }
.callout--warn   { border-color: #fed7aa;           background: var(--amber-50); }
.callout--warn   .callout__icon { color: var(--amber-500); }

/* TOC (right column) */
.toc { position: sticky; top: calc(var(--nav-h) + var(--space-6)); align-self: start; padding-block: var(--space-6);
  font-size: var(--text-sm);
  /* Scrolls on its own and keeps ~96px clear at the bottom so the chat widget never covers the last card. */
  max-height: calc(100vh - var(--nav-h) - var(--space-6)); overflow-y: auto; padding-bottom: 130px;
  scrollbar-width: thin; scrollbar-color: transparent transparent; }
.toc:hover { scrollbar-color: var(--color-border-strong) transparent; }
.toc__title { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--text-xs);
  font-weight: var(--fw-bold); color: var(--color-text-muted); margin-bottom: var(--space-3); }
.toc__link { display: block; padding: 5px 0 5px var(--space-3); color: var(--color-text-muted);
  border-left: 2px solid var(--color-border); transition: var(--transition); }
.toc__link:hover { color: var(--color-heading); text-decoration: none; }
.toc__link--active { color: var(--color-primary); border-left-color: var(--color-primary); font-weight: var(--fw-medium); }
.toc__link--l3 { padding-left: var(--space-5); }

/* Feedback + prev/next */
.feedback { margin-top: var(--space-8); padding: var(--space-5); text-align: center;
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.feedback__q { font-weight: var(--fw-semibold); color: var(--color-heading); margin-bottom: var(--space-3); }
.feedback__actions { display: flex; gap: var(--space-2); justify-content: center; }

/* "Not helpful" follow-up: reason chips + optional comment */
.feedback-reason { margin-top: var(--space-5); padding-top: var(--space-5); border-top: 1px solid var(--color-border);
  text-align: left; animation: fr-in .2s ease-out; }
@keyframes fr-in { from { opacity: 0; transform: translateY(-4px); } }
.feedback-reason__q { font-weight: var(--fw-semibold); color: var(--color-heading); margin-bottom: var(--space-3); }
.feedback-reason__chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip { position: relative; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-block; padding: 6px 12px; border: 1px solid var(--color-border); border-radius: 999px;
  font-size: var(--text-sm); color: var(--color-text); background: var(--color-surface); transition: var(--transition); }
.chip:hover span { border-color: var(--color-primary); }
.chip input:checked + span { border-color: var(--color-primary); background: var(--brand-50); color: var(--brand-600);
  font-weight: var(--fw-medium); }
.chip input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; }
.feedback-reason__comment { display: block; width: 100%; margin-top: var(--space-3); padding: var(--space-3);
  border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
  color: var(--color-text); font: inherit; font-size: var(--text-sm); resize: vertical; }
.feedback-reason__comment:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--brand-50); }
.feedback-reason__actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-3); }
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); }
.pager__item { padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: var(--color-surface); transition: var(--transition); text-decoration: none; }
.prose .pager__item, .prose .pager__item:hover { text-decoration: none; }
.pager__item:hover { border-color: var(--color-primary); text-decoration: none; }
.pager__label { font-size: var(--text-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: .05em; }
.pager__title { color: var(--color-heading); font-weight: var(--fw-medium); margin-top: 4px; }
.pager__item--next { text-align: right; }

/* CTA card (replaces stretched image banner) */
.cta-card { background: linear-gradient(120deg, var(--brand-600), var(--brand-800));
  border-radius: var(--radius-xl); padding: var(--space-8) var(--space-6); text-align: center; color: #fff; }
.cta-card h2 { color: #fff; font-size: var(--text-2xl); }
.cta-card p { color: rgba(255,255,255,.85); max-width: 520px; margin: var(--space-2) auto var(--space-5); }
.cta-card .btn { background: #fff; color: var(--brand-700); }
.cta-card .btn:hover { background: var(--brand-50); color: var(--brand-800); }

/* ------------------------------------------------------------------ *
 * 12. TRUST BAR / FOOTER
 * ------------------------------------------------------------------ */
.trustbar { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
  background: var(--color-surface); }
.trustbar__inner { max-width: var(--content-max); margin-inline: auto; padding: var(--space-4) var(--space-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); justify-content: center; }
.trustbar__label { font-size: var(--text-sm); color: var(--color-text-muted); font-weight: var(--fw-medium); }
.trustbar__logos { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
.trustbar__logos .badge-chip { height: 32px; padding: 0 14px; border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); display: inline-flex; align-items: center; font-size: var(--text-xs);
  font-weight: var(--fw-semibold); color: var(--color-text-muted); background: var(--color-surface-2); }

/* Footer — mirrors the barantum.com footer (#footer-main) so both sites feel like one product */
.footer { position: relative; overflow: hidden; background: #fff; border-top: 1px solid #e8edf2;
  margin-top: var(--space-10); padding-top: 56px; }
.footer a { text-decoration: none; }
.footer__inner { max-width: var(--content-max); margin-inline: auto; padding-inline: var(--space-5); }
.footer__grid { display: grid; grid-template-columns: 2.4fr 1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 40px; }
.footer__brand-group { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer__logo { height: 40px; width: auto; display: block; }
.footer__tagline, .footer__address { color: #6b7280; font-size: 16px; line-height: 24px; max-width: 560px; margin: 0; }
.footer__address { line-height: 20px; max-width: 540px; }
.footer__legal { display: flex; flex-direction: column; }
.footer__legalname { color: #273444; font-weight: 600; font-size: 16px; line-height: 24px; margin: 0; }
.footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.footer__contact a, .footer__links a, .footer__legal-nav a, .footer__copyright {
  color: #6b7280; font-size: 14px; line-height: 20px; transition: color .15s; }
.footer__contact a { display: inline-flex; align-items: center; gap: 8px; }
.footer__contact-icon { width: 28px; height: 28px; border-radius: 50%; background: #f5f5f5; color: #b9bbc6;
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background .15s; }
.footer__contact a:hover .footer__contact-icon { background: #e2e6ea; }
.footer__social { display: flex; align-items: center; gap: 14px; }
.footer__social a { color: #6b7280; display: inline-flex; transition: color .15s; }
.footer__contact a:hover, .footer__social a:hover, .footer__links a:hover, .footer__legal-nav a:hover { color: #273444; }
.footer__trust { display: grid; grid-template-columns: auto 1fr; gap: 40px; padding: 28px 0; }
.footer__label { font-size: 16px; line-height: 20px; font-weight: 500; letter-spacing: -0.31px; color: #6b7280; margin: 0 0 12px; }
.footer__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; }
.footer__badges img { display: block; height: 34px; width: auto; }
.footer__heading { font-weight: 700; color: #273444; font-size: 16px; line-height: 24px; margin: 0 0 16px; }
.footer__links { list-style: none; padding: 0; margin: 0; }
.footer__links li { margin-bottom: 12px; }
.footer__links a { display: inline-flex; align-items: center; gap: 6px; }
.footer__tick { color: #1b6fbe; flex-shrink: 0; }
.footer__bottom { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  padding: 20px 0; border-top: 1px solid #e8edf2; position: relative; z-index: 1; }
.footer__copyright { margin: 0; }
.footer__legal-nav { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; padding: 0; margin: 0; }
.footer__watermark { font-size: clamp(44px, 16vw, 200px); font-weight: 800; line-height: 1; text-align: center;
  background: linear-gradient(180deg, rgba(39,52,68,.08) 0%, rgba(39,52,68,0) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  white-space: nowrap; overflow: hidden; margin-top: 8px; pointer-events: none; user-select: none; }
@media (max-width: 991px) {
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 24px; }
  .footer__grid > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .footer { padding-top: 40px; }
  .footer__grid { grid-template-columns: 1fr; padding-bottom: 32px; }
  .footer__trust { grid-template-columns: 1fr; gap: 24px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------------------------------------------ *
 * 13. STATE / EMPTY / 404
 * ------------------------------------------------------------------ */
.state { text-align: center; max-width: 480px; margin: var(--space-12) auto; padding-inline: var(--space-5); }
.state__code { font-size: 6rem; font-weight: var(--fw-bold); line-height: 1;
  background: linear-gradient(135deg, var(--brand-400), var(--brand-700));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.state__title { font-size: var(--text-2xl); margin-block: var(--space-3) var(--space-2); }
.state__desc { color: var(--color-text-muted); margin-bottom: var(--space-5); }
.state__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* Search results */
/* Search results: title + count, then the box to refine it, then the tabs. */
.results-page { max-width: 840px; padding-top: var(--space-8); }
.results-search { margin-bottom: var(--space-4); }
.results-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: var(--space-1) var(--space-4); padding-block: 0 var(--space-4); }
.results-head__title { font-size: var(--text-xl); }
.results-head__count { color: var(--color-text-muted); font-size: var(--text-sm); }
/* Category tabs: the only sticky part of the page, right under the navbar. */
.results-tabs { position: sticky; top: var(--nav-h); z-index: 10; margin-bottom: var(--space-4);
  background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
.results-tabs__scroll { display: flex; gap: var(--space-1); overflow-x: auto; scrollbar-width: none; }
.results-tabs__scroll::-webkit-scrollbar { display: none; }
.results-tab { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: var(--space-3) var(--space-3);
  color: var(--color-text-muted); font-size: var(--text-sm); font-weight: var(--fw-medium); white-space: nowrap;
  border-bottom: 2px solid transparent; margin-bottom: -1px; transition: var(--transition); }
.results-tab:hover { color: var(--color-heading); text-decoration: none; }
.results-tab[aria-current="page"] { color: var(--color-primary); border-bottom-color: var(--color-primary); }
.results-tab__count { min-width: 20px; padding: 0 6px; border-radius: 999px; background: var(--color-border);
  font-size: var(--text-xs); line-height: 18px; text-align: center; }
.results-tab[aria-current="page"] .results-tab__count { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); }
.result-card { display: block; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); background: var(--color-surface); margin-bottom: var(--space-3); transition: var(--transition); }
.result-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); text-decoration: none; }
.result-card__path { display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: var(--text-xs); color: var(--color-text-muted); }
.result-card__sep { opacity: .6; }
.result-card__cat { font-weight: var(--fw-semibold); color: var(--color-primary); }
/* Quieter highlight in the cards: weight + a thin underline instead of a filled box on every hit. */
.result-card mark { background: none; padding: 0; border-radius: 0; color: var(--color-heading); font-weight: var(--fw-semibold);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--color-primary) 55%, transparent);
  text-decoration-thickness: 2px; text-underline-offset: 3px; }
.result-card__title mark { font-weight: inherit; }
.support-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4);
  margin-top: var(--space-6); padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-md);
  background: linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)), var(--color-surface)); }
.support-cta__title { font-size: var(--text-lg); }
.support-cta__desc { color: var(--color-text-muted); font-size: var(--text-sm); margin-top: 2px; }
.support-cta__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.results-browse { font-size: var(--text-base); color: var(--color-text-muted); font-weight: var(--fw-semibold); margin-top: var(--space-8); }
.result-card__title { color: var(--color-heading); font-size: var(--text-lg); font-weight: var(--fw-semibold); margin-block: 4px; }
.result-card__snippet { color: var(--color-text-muted); font-size: var(--text-base); }
mark { background: color-mix(in srgb, var(--brand-300) 45%, transparent); color: inherit; border-radius: 3px; padding: 0 2px; }

/* ------------------------------------------------------------------ *
 * 14. UTILITIES
 * ------------------------------------------------------------------ */
.muted { color: var(--color-text-muted); }
.center { text-align: center; }
.mt-2 { margin-top: var(--space-2); } .mt-4 { margin-top: var(--space-4); } .mt-6 { margin-top: var(--space-6); }
.hide-mobile { }
@media (max-width: 860px) { .hide-mobile { display: none !important; } }
.show-mobile { display: none; }
@media (max-width: 860px) { .show-mobile { display: grid !important; } }

/* ------------------------------------------------------------------ *
 * 15. COMMAND PALETTE / INSTANT SEARCH (Ctrl+K)
 * ------------------------------------------------------------------ */
.cmdk { position: fixed; inset: 0; z-index: 100; display: none; }
.cmdk[data-open="true"] { display: block; }
.cmdk__overlay { position: absolute; inset: 0; background: rgba(15,23,32,.55);
  backdrop-filter: blur(2px); animation: fade .15s ease; }
.cmdk__panel { position: relative; max-width: 620px; margin: 10vh auto 0; background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  overflow: hidden; animation: pop .16s cubic-bezier(.4,0,.2,1); }
@keyframes fade { from { opacity: 0 } }
@keyframes pop { from { opacity: 0; transform: translateY(-8px) scale(.98) } }
.cmdk__inputwrap { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border); }
.cmdk__inputwrap svg { color: var(--color-text-muted); flex-shrink: 0; }
.cmdk__input { flex: 1; border: none; background: none; font-size: var(--text-lg); color: var(--color-text);
  outline: none; }
.cmdk__input::placeholder { color: var(--color-text-muted); }
.cmdk__results { max-height: 52vh; overflow-y: auto; overflow-x: hidden; padding: var(--space-2);
  scrollbar-width: thin; scrollbar-color: var(--color-border-strong) transparent; overscroll-behavior: contain; }
.cmdk__results::-webkit-scrollbar { width: 8px; }
.cmdk__results::-webkit-scrollbar-track { background: transparent; }
.cmdk__results::-webkit-scrollbar-thumb { background: var(--color-border-strong); border-radius: 8px;
  border: 2px solid var(--color-surface); }
.cmdk__results::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); }
.cmdk__group-label { font-size: var(--text-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--color-text-muted); font-weight: var(--fw-bold); padding: var(--space-3) var(--space-3) var(--space-2); }
/* Group label with "Lihat selengkapnya" on the right (opens the full results page) */
.cmdk__group-label--split { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.cmdk__more { text-transform: none; letter-spacing: 0; font-weight: var(--fw-semibold); color: var(--color-primary); white-space: nowrap; }
.cmdk__more:hover { text-decoration: underline; }
.cmdk__item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3);
  border-radius: var(--radius-sm); cursor: pointer; color: var(--color-text); }
.cmdk__item[aria-selected="true"] { background: var(--brand-50); }
.cmdk__item[aria-selected="true"] .cmdk__title { color: var(--color-primary); }
:root[data-theme="dark"] .cmdk__item[aria-selected="true"],
.cmdk__item:hover { background: var(--color-surface-2); }
.cmdk__ico { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--color-surface-2);
  display: grid; place-items: center; color: var(--color-text-muted); flex-shrink: 0; }
.cmdk__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.cmdk__title { display: block; color: var(--color-heading); font-weight: var(--fw-medium); font-size: var(--text-base);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* Two lines: body-snippet hits need room to show the matched context, not just the category */
.cmdk__cat { font-size: var(--text-xs); color: var(--color-text-muted); max-width: 100%;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; white-space: normal; line-height: 1.45; }
.cmdk__item mark { font-weight: var(--fw-bold); }
/* "Lihat semua N hasil": last row of the list, pinned to the bottom so it is seen in long lists. */
.cmdk__item--all { position: sticky; bottom: calc(-1 * var(--space-2)); z-index: 1; margin-top: var(--space-2);
  border: 1px dashed color-mix(in srgb, var(--color-primary) 40%, var(--color-border));
  background: color-mix(in srgb, var(--color-primary) 5%, var(--color-surface));
  box-shadow: 0 -8px 16px -8px var(--color-surface); }
.cmdk__item--all .cmdk__ico { background: color-mix(in srgb, var(--color-primary) 14%, var(--color-surface)); color: var(--color-primary); }
.cmdk__item--all .cmdk__title { color: var(--color-primary); font-weight: var(--fw-semibold); }
.cmdk__item--all:hover, .cmdk__item--all[aria-selected="true"] { border-style: solid; border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.cmdk__all-kbd { display: flex; gap: 4px; flex: none; }
.cmdk__all-kbd kbd { font-family: var(--font-mono); font-size: 11px; padding: 1px 6px; border-radius: 4px;
  border: 1px solid var(--color-border-strong); color: var(--color-text-muted); background: var(--color-surface); }
@media (max-width: 640px) { .cmdk__all-kbd { display: none; } }
.cmdk__empty { padding: var(--space-8) var(--space-5); text-align: center; color: var(--color-text-muted); }
.cmdk__empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); }
.cmdk__empty-ico { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-1);
  border-radius: 999px; color: var(--color-text-muted); background: var(--color-surface-2); }
.cmdk__empty-title { margin: 0; color: var(--color-heading); font-weight: var(--fw-semibold); word-break: break-word; }
.cmdk__empty-desc { margin: 0 0 var(--space-3); max-width: 360px; font-size: var(--text-sm); }
.cmdk__footer { display: flex; gap: var(--space-4); padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-text-muted);
  background: var(--color-surface-2); }
.cmdk__footer kbd { font-family: var(--font-mono); border: 1px solid var(--color-border-strong);
  border-radius: 4px; padding: 1px 5px; background: var(--color-surface); margin-right: 4px; }

/* ------------------------------------------------------------------ *
 * 16. READING PROGRESS BAR
 * ------------------------------------------------------------------ */
.progress { position: fixed; top: var(--nav-h); left: 0; right: 0; height: 3px; z-index: 49; background: transparent; }
.progress__bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--brand-400), var(--brand-600));
  transition: width .1s linear; }

/* ------------------------------------------------------------------ *
 * 17. CODE COPY BUTTON
 * ------------------------------------------------------------------ */
.prose pre { position: relative; }
.copy-btn { position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--text-xs); font-weight: var(--fw-medium); color: #c5ccd6; background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15); border-radius: 6px; padding: 4px 9px; opacity: 0; transition: var(--transition); }
.prose pre:hover .copy-btn { opacity: 1; }
.copy-btn:hover { background: rgba(255,255,255,.16); color: #fff; }
.copy-btn.is-copied { color: #4ade80; border-color: #4ade80; }

/* ------------------------------------------------------------------ *
 * 18. IMAGE LIGHTBOX
 * ------------------------------------------------------------------ */
.prose img { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; place-items: center;
  background: rgba(10,15,20,.85); backdrop-filter: blur(3px); padding: var(--space-6); animation: fade .15s ease; }
.lightbox[data-open="true"] { display: grid; }
.lightbox img { max-width: 92vw; max-height: 88vh; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); cursor: zoom-out; }
.lightbox__close { position: absolute; top: 20px; right: 24px; color: #fff; background: rgba(255,255,255,.12);
  border: none; width: 42px; height: 42px; border-radius: 50%; font-size: 22px; display: grid; place-items: center; }

/* ------------------------------------------------------------------ *
 * 19. SCROLL TO TOP
 * ------------------------------------------------------------------ */
.to-top { position: fixed; bottom: 24px; right: 24px; z-index: 40; width: 46px; height: 46px; border-radius: 50%;
  background: var(--color-primary); color: #fff; border: none; box-shadow: var(--shadow-md); display: grid;
  place-items: center; opacity: 0; visibility: hidden; transform: translateY(10px); transition: var(--transition); }
.to-top[data-show="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--color-primary-hover); }

/* ------------------------------------------------------------------ *
 * 20. TOAST
 * ------------------------------------------------------------------ */
.toast-wrap { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 120;
  display: flex; flex-direction: column; gap: var(--space-2); align-items: center; }
.toast { display: flex; align-items: center; gap: var(--space-2); background: var(--gray-900); color: #fff;
  padding: 12px 18px; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--text-base);
  font-weight: var(--fw-medium); animation: toastin .2s ease; }
.toast svg { color: #4ade80; }
@keyframes toastin { from { opacity: 0; transform: translateY(12px) } }

/* ------------------------------------------------------------------ *
 * 21. COLLAPSIBLE SIDEBAR GROUP
 * ------------------------------------------------------------------ */
.nav-group__title { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2);
  cursor: pointer; user-select: none; }
.nav-group__title .chev { flex: none; transition: transform var(--transition); opacity: .6; }
.nav-group.is-collapsed .chev { transform: rotate(-90deg); }
.nav-group.is-collapsed .nav-link,
.nav-group.is-collapsed .nav-sub,
.nav-group.is-collapsed .nav-parent { display: none; }




/* ==========================================================================
   Print / Save as PDF: the article alone, black on white, links spelled out
   ========================================================================== */
@media print {
  :root { --color-text: #111; --color-heading: #000; }
  body { background: #fff !important; color: #111; }
  .navbar, .footer, .docs-sidebar, .toc, .breadcrumb, .feedback, .pager, .progress, .to-top,
  .toast-wrap, .cmdk, .heading-anchor, .copy-btn, .embed, .docs-sidebar-toggler { display: none !important; }
  .docs { display: block !important; padding: 0 !important; margin: 0 !important; }
  .docs-main, .prose { max-width: none !important; padding: 0 !important; }
  .prose h2, .prose h3 { break-after: avoid; page-break-after: avoid; }
  .prose img, .prose pre, .callout, .prose table { break-inside: avoid; page-break-inside: avoid; }
  .prose img { max-width: 100% !important; border: 1px solid #ccc; }
  .prose pre { background: #f5f5f5 !important; color: #111 !important; white-space: pre-wrap; border: 1px solid #ddd; }
  .prose a[href^="http"]:not(:has(img))::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; word-break: break-all; }
  .callout { background: #fff !important; border-width: 1px 1px 1px 4px !important; }
  @page { margin: 16mm 14mm; }
}
button.cmdk__more { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; }

/* ==========================================================================
   Layered content (built by article.js from heading conventions)
   ========================================================================== */
/* Accordion */
.accordion-group { border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; }
.prose .accordion-group .accordion { border: 0; border-radius: 0; margin: 0; }
.prose .accordion-group .accordion + .accordion { border-top: 1px solid var(--color-border); }
.prose .accordion { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.accordion__q { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: var(--space-4); cursor: pointer; list-style: none; font-weight: var(--fw-semibold);
  color: var(--color-heading); transition: var(--transition); }
.accordion__q::-webkit-details-marker { display: none; }
.accordion__q::after { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-right: 4px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg);
  transition: transform .2s; opacity: .6; }
.accordion[open] > .accordion__q::after { transform: rotate(-135deg); }
.accordion__q:hover { background: var(--color-surface-2); }
.accordion__q:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.accordion__a { padding: 0 var(--space-4) var(--space-4); }
.accordion__a > :first-child { margin-top: 0; }
.accordion__a > * + * { margin-top: var(--space-3); }
.accordion { scroll-margin-top: calc(var(--nav-h) + 20px); }

/* Tabs */
.tabs { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.tabs__list { display: flex; gap: var(--space-1, 4px); padding: 0 var(--space-3); border-bottom: 1px solid var(--color-border);
  overflow-x: auto; scrollbar-width: none; }
.tabs__tab { position: relative; padding: var(--space-3) var(--space-3); background: none; border: 0; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-text-muted);
  white-space: nowrap; transition: var(--transition); scroll-margin-top: calc(var(--nav-h) + 20px); }
.tabs__tab:hover { color: var(--color-heading); }
.tabs__tab[aria-selected="true"] { color: var(--color-primary); }
.tabs__tab[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px;
  height: 2px; border-radius: 2px; background: var(--color-primary); }
.tabs__tab:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -4px; border-radius: 6px; }
.tabs__panel { padding: var(--space-4); }
.tabs__panel:focus-visible { outline: 2px solid var(--color-primary); outline-offset: -2px; }
.tabs__panel > :first-child { margin-top: 0; }
.tabs__panel > * + * { margin-top: var(--space-3); }

@media print {
  /* Paper can't click: show every answer and every tab, each tab labeled. */
  .accordion__a, .tabs__panel { display: block !important; }
  .tabs__panel[hidden] { display: block !important; }
  .tabs__list { display: none; }
  .tabs__panel::before { content: attr(data-label); display: block; font-weight: 700; margin-bottom: 6px; }
  .accordion__q::after { display: none; }
}

/* Article image lightbox (assets/js/article.js initLightbox): always dark, like a photo viewer. */
body.lightbox-active { overflow: hidden; }
.lb { position: fixed; inset: 0; z-index: 99999; display: flex; flex-direction: column;
  background: rgba(9, 12, 18, .94); backdrop-filter: blur(8px); color: #e6e9ef; animation: lb-in .16s ease-out; }
@keyframes lb-in { from { opacity: 0; } }
.lb__bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex: none;
  height: 56px; padding: 0 12px 0 20px; }
.lb__meta { display: flex; align-items: center; gap: 12px; min-width: 0; font-size: 14px; }
.lb__count { flex: none; font-variant-numeric: tabular-nums; color: #9aa3b2; }
.lb__caption { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb__tools { display: flex; align-items: center; gap: 2px; flex: none; }
.lb__btn, .lb__zoom { display: grid; place-items: center; height: 36px; min-width: 36px; padding: 0 6px; border: 0;
  border-radius: 8px; background: transparent; color: inherit; font: inherit; font-size: 13px; cursor: pointer;
  font-variant-numeric: tabular-nums; transition: background .15s; }
.lb__zoom { min-width: 52px; color: #9aa3b2; }
.lb__btn:hover, .lb__zoom:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.lb__btn:focus-visible, .lb__zoom:focus-visible, .lb__nav:focus-visible { outline: 2px solid #60a5fa; outline-offset: 2px; }
.lb__divider { width: 1px; height: 20px; margin: 0 6px; background: rgba(255, 255, 255, .15); }
.lb__stage { flex: 1; min-height: 0; display: flex; overflow: auto; padding: 16px 72px 32px; cursor: zoom-out; scrollbar-width: none; }
.lb__stage::-webkit-scrollbar { display: none; }
.lb__img { margin: auto; flex: none; max-width: none; border-radius: 8px; cursor: zoom-in; user-select: none;
  box-shadow: 0 24px 64px rgba(0, 0, 0, .5); background: #fff; }
.lb__stage.is-zoomed .lb__img { cursor: grab; }
.lb__stage.is-dragging .lb__img { cursor: grabbing; }
.lb__nav { position: absolute; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer; transition: background .15s; }
.lb__nav:hover { background: rgba(255, 255, 255, .18); }
.lb__nav--prev { left: 16px; }
.lb__nav--next { right: 16px; }
@media (max-width: 640px) {
  .lb__stage { padding: 8px 8px 72px; }
  .lb__nav { top: auto; bottom: 16px; transform: none; }
  .lb__nav--prev { left: calc(50% - 52px); }
  .lb__nav--next { right: calc(50% - 52px); }
}

/* Changelog jump nav: cards land below the sticky navbar; the newest month carries a dot. */
.release { scroll-margin-top: calc(var(--nav-h) + var(--space-5)); }
.nav-link--latest { display: flex; align-items: center; gap: 8px; }
.nav-link--latest::after { content: ""; flex: none; width: 6px; height: 6px; border-radius: 999px; background: var(--color-primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent); }

/* ------------------------------------------------------------------ *
 * HOME (home_redesign.blade.php): search-first hero, products, goals,
 * popular + latest updates, videos, help options. Prefix hm-.
 * ------------------------------------------------------------------ */
.hm-wrap { max-width: 1120px; margin-inline: auto; padding-inline: var(--space-5); }
.hm-sec { padding-block: var(--space-10) 0; }
.hm-sec__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-5); }
.hm-sec__title { font-size: var(--text-xl); letter-spacing: -.01em; }
.hm-sec__link { font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-primary); white-space: nowrap; }

/* Hero: compact, left-aligned, the search is the whole point */
/* Hero: search-first and plain — a centred title, one large search, nothing competing */
.hm-hero { position: relative; isolation: isolate; background: var(--color-bg); }
/* Soft brand glow behind the search: blue from the top, a lighter cyan to the sides, fading into the page */
.hm-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 50% -10%, color-mix(in srgb, var(--color-primary) 22%, transparent), transparent 70%),
    radial-gradient(35% 45% at 12% 30%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 70%),
    radial-gradient(35% 45% at 88% 25%, color-mix(in srgb, #6366f1 10%, transparent), transparent 70%);
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent); mask-image: linear-gradient(180deg, #000 55%, transparent); }
.hm-hero__in { display: flex; flex-direction: column; align-items: center; text-align: center; padding-block: 88px 40px; }
.hm-hero__title { font-size: clamp(2rem, 4.4vw, 3.25rem); letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
.hm-hero__sub { margin-top: var(--space-3); color: var(--color-text-muted); font-size: var(--text-md); max-width: 52ch; }
.hm-hero .hero__search { width: 100%; max-width: 640px; margin: var(--space-8) 0 0; }
.hm-hero .search--hero { box-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 12px 32px -12px rgba(15, 23, 42, .18); }
.hm-hero .search--hero .search__input { font-size: var(--text-md); }
.hm-hero .hm-chips { justify-content: center; }
.hm-kbd { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none;
  font: 500 12px var(--font-mono, ui-monospace, monospace); color: var(--color-text-muted);
  padding: 2px 8px; border: 1px solid var(--color-border-strong); border-radius: 6px; background: var(--color-surface); }
.hm-hero .search--hero { position: relative; }
@media (max-width: 640px) { .hm-kbd { display: none; } .hm-hero__in { padding-block: 56px 32px; } }
/* Products sit right under the search: the second thing people scan */
.hm-sec--products { padding-top: var(--space-4); }
.hm-sec--products .hm-products { gap: var(--space-4); }
.hm-sec--products .hm-product { padding: var(--space-5); background: var(--color-surface); }
.hm-product__ico { display: grid; place-items: center; width: 36px; height: 36px; margin-bottom: var(--space-2); border-radius: 10px;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)); }
.hm-chips { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-4); font-size: var(--text-sm); }
.hm-chips span { color: var(--color-text-muted); }
.hm-chips a { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-heading); }
.hm-chips a:hover { border-color: var(--color-primary); color: var(--color-primary); text-decoration: none; }

/* Goals: the four jobs people come with, each with its first three answers */
.hm-goals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hm-goal { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border); }
.hm-goal__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; }
.hm-goal__ico--blue { color: #1a83c7; background: color-mix(in srgb, #1a83c7 12%, var(--color-surface)); }
.hm-goal__ico--green { color: #16a34a; background: color-mix(in srgb, #16a34a 12%, var(--color-surface)); }
.hm-goal__ico--amber { color: #d97706; background: color-mix(in srgb, #d97706 13%, var(--color-surface)); }
.hm-goal__ico--rose { color: #e11d48; background: color-mix(in srgb, #e11d48 11%, var(--color-surface)); }
.hm-goal__title { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-heading); }
.hm-goal__desc { margin-top: -6px; font-size: var(--text-sm); color: var(--color-text-muted); }
.hm-goal ul { list-style: none; margin: 0; padding: var(--space-3) 0 0; border-top: 1px solid var(--color-border); display: grid; gap: 2px; }
.hm-goal li a { display: block; padding: 6px 0; font-size: var(--text-sm); color: var(--color-text); line-height: 1.4; }
.hm-goal li a:hover { color: var(--color-primary); text-decoration: none; }
.hm-goal__more { margin-top: auto; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-primary); }

/* Products: quieter than goals — a row of compact tiles */
.hm-products { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.hm-product { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); color: inherit; transition: border-color var(--transition), background var(--transition); }
.hm-product:hover { border-color: var(--color-primary); background: var(--color-surface); text-decoration: none; }
.hm-product__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); }
.hm-product__name { font-weight: var(--fw-semibold); color: var(--color-heading); }
.hm-product__count { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-product__desc { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.45; }

/* Popular + latest updates side by side */
.hm-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-8); }
.hm-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--color-border); }
.hm-list a { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-border); color: inherit; }
.hm-list a:hover { text-decoration: none; }
.hm-list a:hover .hm-list__t { color: var(--color-primary); }
.hm-list__n { flex: none; width: 22px; font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hm-list__body { flex: 1; min-width: 0; }
.hm-list__t { display: block; color: var(--color-heading); font-weight: var(--fw-medium); line-height: 1.4; }
.hm-list__c { display: block; font-size: var(--text-xs); color: var(--color-text-muted); }
.hm-updates { display: grid; gap: var(--space-3); }
.hm-update { display: block; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface); border: 1px solid var(--color-border); color: inherit; }
.hm-update:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); text-decoration: none; }
.hm-update__top { display: flex; align-items: center; gap: var(--space-2); }
.hm-update__month { font-weight: var(--fw-semibold); color: var(--color-heading); }
.hm-update__new { padding: 1px 8px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.hm-update ul { margin: var(--space-2) 0 0; padding-left: 18px; font-size: var(--text-sm); color: var(--color-text-muted); }
.hm-update li { line-height: 1.45; }

/* Videos */
.hm-videos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); }
.hm-video { display: flex; flex-direction: column; gap: var(--space-2); color: inherit; }
.hm-video:hover { text-decoration: none; }
.hm-video__thumb { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: var(--radius-md); overflow: hidden; background: var(--color-surface-2); }
.hm-video__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .3s; }
.hm-video:hover .hm-video__thumb img { transform: scale(1.03); }
.hm-video__play { position: absolute; inset: 0; margin: auto; width: 44px; height: 44px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(15, 23, 42, .72); color: #fff; }
.hm-video__t { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-heading); line-height: 1.4; }
.hm-video:hover .hm-video__t { color: var(--color-primary); }

/* Closing: one place for every way to get help */
.hm-help { margin-block: var(--space-10) var(--space-10); padding: var(--space-6); border-radius: var(--radius-lg, 16px);
  background: var(--color-surface); border: 1px solid var(--color-border);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: var(--space-6); align-items: center; }
.hm-help__title { font-size: var(--text-xl); }
.hm-help__desc { margin-top: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); }
.hm-help__opts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); }
.hm-opt { display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border-radius: var(--radius-md);
  border: 1px solid var(--color-border); color: inherit; background: var(--color-bg); }
.hm-opt:hover { border-color: var(--color-primary); text-decoration: none; }
.hm-opt svg { color: var(--color-primary); margin-bottom: 4px; }
.hm-opt__t { font-weight: var(--fw-semibold); color: var(--color-heading); }
.hm-opt__d { font-size: var(--text-xs); color: var(--color-text-muted); }

@media (max-width: 1024px) {
  .hm-goals, .hm-products, .hm-videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hm-split, .hm-help { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .hm-wrap { padding-inline: var(--space-4); }
  .hm-hero__in { padding-block: var(--space-8) var(--space-6); }
  .hm-goals, .hm-products { grid-template-columns: minmax(0, 1fr); }
  .hm-videos { grid-template-columns: minmax(0, 1fr); }
  .hm-help__opts { grid-template-columns: minmax(0, 1fr); }
  .hm-sec { padding-block: var(--space-8) 0; }
}

/* ------------------------------------------------------------------ *
 * EVENT BANNER above the navbar (layouts/helpcenter.blade.php): one centred
 * line in the brand colour, the whole line is the link. Scrolls away.
 * ------------------------------------------------------------------ */
.event-bar { position: relative; overflow: hidden; color: #fff; font-size: var(--text-sm);
  background: linear-gradient(90deg, color-mix(in srgb, var(--color-primary) 82%, #0b1f3a), var(--color-primary) 50%, color-mix(in srgb, var(--color-primary) 82%, #0b1f3a)); }
/* Shimmer: a soft light sweeps across every few seconds (off for reduced motion) */
.event-bar::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-100%);
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .28) 50%, transparent 70%); }
@media (prefers-reduced-motion: no-preference) {
  .event-bar::after { animation: event-shimmer 4.5s ease-in-out 1s infinite; }
  @keyframes event-shimmer { 0% { transform: translateX(-100%); } 45%, 100% { transform: translateX(100%); } }
}
.event-bar__pill { padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, .2); border: 1px solid rgba(255, 255, 255, .35);
  font-size: 11px; font-weight: var(--fw-bold); letter-spacing: .06em; text-transform: uppercase; }
.event-bar__bonus { display: inline-flex; align-items: center; gap: 5px; color: #fde68a; font-weight: var(--fw-medium); }
.event-bar__bonus::before { content: "·"; margin-right: 4px; color: rgba(255, 255, 255, .6); }
.event-bar__link { position: relative; z-index: 1; display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 2px var(--space-3);
  padding: 9px 48px; color: #fff; text-align: center; line-height: 1.4; }
.event-bar__link:hover { color: #fff; text-decoration: none; }
.event-bar__cta { font-weight: var(--fw-semibold); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.event-bar__link:hover .event-bar__cta { text-decoration-thickness: 2px; }
.event-bar__close { z-index: 1; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); display: grid; place-items: center;
  width: 28px; height: 28px; border: 0; border-radius: 999px; background: transparent; color: rgba(255, 255, 255, .8); cursor: pointer; }
.event-bar__close:hover { background: rgba(255, 255, 255, .15); color: #fff; }
.event-bar a:focus-visible, .event-bar button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (max-width: 900px) { .event-bar__bonus { display: none; } }
.event-bar__short, .event-bar__cta-short { display: none; }
@media (max-width: 640px) {
  /* One line on phones: the short text + "Daftar →", ellipsis if it still does not fit */
  .event-bar__link { flex-wrap: nowrap; justify-content: center; padding: 9px 44px 9px 16px; font-size: 13px; }
  .event-bar__pill, .event-bar__text, .event-bar__cta-long { display: none; }
  .event-bar__short { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .event-bar__cta-short { display: inline; }
}

/* ------------------------------------------------------------------ *
 * HERO TYPEAHEAD (helpcenter.js 3b): results drop down under the big
 * home search instead of a modal; same rows as the palette.
 * ------------------------------------------------------------------ */
.hero__search { position: relative; }
.ta { position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; right: 0; max-height: min(440px, 60vh); overflow-y: auto;
  padding: var(--space-2); text-align: left; background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-md); box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .22), 0 2px 6px rgba(15, 23, 42, .06);
  scrollbar-width: thin; }
.ta__label { padding: var(--space-2) var(--space-3) 6px; font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.ta__item { display: flex; align-items: center; gap: var(--space-3); padding: 10px var(--space-3); border-radius: var(--radius-sm); color: var(--color-text); }
.ta__item:hover { text-decoration: none; }
.ta__item[aria-selected="true"] { background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.ta__item[aria-selected="true"] .ta__t { color: var(--color-primary); }
.ta__ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--radius-sm);
  background: var(--color-surface-2); color: var(--color-text-muted); }
.ta__meta { display: flex; flex-direction: column; min-width: 0; }
.ta__t { color: var(--color-heading); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta__t mark { background: none; padding: 0; border-radius: 0; color: inherit; font-weight: var(--fw-bold); }
.ta__c { font-size: var(--text-xs); color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ta__item--all { margin-top: 4px; border-top: 1px solid var(--color-border); border-radius: 0 0 var(--radius-sm) var(--radius-sm); }
.ta__item--all .ta__ico { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.ta__item--all .ta__t { color: var(--color-primary); font-weight: var(--fw-semibold); }
.ta__empty-t { margin: 0; padding: var(--space-3); color: var(--color-text-muted); font-size: var(--text-sm); }
.ta__empty .ta__item--all { border-top: 0; margin-top: 0; }

/* Live Chat dock (assets/js/livechat.js) owns the bottom-right corner: scroll-to-top sits above it. */
body:has(.lc-dock:not([hidden])) .to-top { bottom: 124px; right: 39px; }
@media (max-width: 480px) { body:has(.lc-dock:not([hidden])) .to-top { bottom: 96px; right: 25px; } }

/* ------------------------------------------------------------------ *
 * MOBILE MENU (layouts/helpcenter.blade.php #mnav, helpcenter.js 9b):
 * right-hand drawer with everything the navbar hides under 860px.
 * ------------------------------------------------------------------ */
.mnav { position: fixed; inset: 0; z-index: 2147483100; }
.mnav__overlay { position: absolute; inset: 0; background: rgba(15, 23, 42, .45); opacity: 0; transition: opacity .2s ease; }
.mnav__panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 88vw); display: flex; flex-direction: column;
  background: var(--color-surface); box-shadow: -12px 0 32px rgba(15, 23, 42, .18); transform: translateX(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
  padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.mnav.is-open .mnav__overlay { opacity: 1; }
.mnav.is-open .mnav__panel { transform: none; }
.mnav__head { display: flex; align-items: center; justify-content: space-between; height: var(--nav-h); padding: 0 var(--space-3) 0 var(--space-5);
  border-bottom: 1px solid var(--color-border); }
.mnav__title { font-weight: var(--fw-semibold); color: var(--color-heading); }
.mnav__body { flex: 1; overflow-y: auto; padding: var(--space-4) var(--space-3); }
.mnav__label { margin: 0 0 var(--space-1); padding: 0 var(--space-3); font-size: var(--text-xs); font-weight: var(--fw-bold);
  letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-muted); }
.mnav__link { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); padding: 12px var(--space-3);
  border-radius: var(--radius-sm); color: var(--color-heading); font-weight: var(--fw-medium); }
.mnav__link svg { color: var(--color-text-muted); }
.mnav__link:hover { background: var(--color-surface-2); text-decoration: none; }
.mnav__link--active { color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 8%, var(--color-surface)); }
.mnav__sep { height: 1px; margin: var(--space-3) var(--space-3); background: var(--color-border); }
.mnav__foot { display: grid; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--color-border); }
.mnav__cta { justify-content: center; }
body.mnav-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .mnav__overlay, .mnav__panel { transition: none; } }
@media (min-width: 861px) { .mnav { display: none !important; } }

/* The category's main list heading is static: no pointer, no hover fill (helpcenter.js 8 skips its toggle). */
.nav-group__title--static { cursor: default; }
.nav-group__title--static:hover { background: none; color: var(--color-text-muted); }

/* ------------------------------------------------------------------ *
 * LEARN WITH THE TEAM (config setting.learning): home cards, a list
 * under the article outline, a footer column.
 * ------------------------------------------------------------------ */
.hm-learn { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.hm-learn__card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border); color: inherit;
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition); }
.hm-learn__card:hover { border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border)); box-shadow: var(--shadow-sm);
  transform: translateY(-2px); text-decoration: none; }
.hm-learn__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-1); }
.hm-learn__ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 11%, var(--color-surface)); }
.hm-learn__card--workshop .hm-learn__ico { color: #b45309; background: color-mix(in srgb, #d97706 13%, var(--color-surface)); }
.hm-learn__card--demo .hm-learn__ico { color: #15803d; background: color-mix(in srgb, #16a34a 12%, var(--color-surface)); }
.hm-learn__aud { padding: 2px 10px; border-radius: 999px; font-size: var(--text-xs); font-weight: var(--fw-semibold);
  color: var(--color-text-muted); background: var(--color-surface-2); white-space: nowrap; }
.hm-learn__t { font-size: var(--text-md); font-weight: var(--fw-semibold); color: var(--color-heading); }
.hm-learn__d { font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.5; }
.hm-learn__meta { font-size: var(--text-xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.hm-learn__cta { display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: var(--space-2);
  font-size: var(--text-sm); font-weight: var(--fw-semibold); color: var(--color-primary); }
@media (max-width: 1024px) { .hm-learn { grid-template-columns: minmax(0, 1fr); } }

.toc-learn { margin-top: var(--space-6); padding: var(--space-4); border-radius: var(--radius-md);
  background: var(--color-surface); border: 1px solid var(--color-border); }
.toc-learn__title { margin: 0 0 var(--space-2); font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .06em;
  text-transform: uppercase; color: var(--color-text-muted); }
.toc-learn__item { display: block; padding: var(--space-2) 0; border-top: 1px solid var(--color-border); color: inherit; }
.toc-learn__item:first-of-type { border-top: 0; }
.toc-learn__item:hover { text-decoration: none; }
.toc-learn__item:hover .toc-learn__t { color: var(--color-primary); }
.toc-learn__t { display: block; font-weight: var(--fw-semibold); color: var(--color-heading); }
.toc-learn__d { display: block; font-size: var(--text-xs); color: var(--color-text-muted); line-height: 1.45; }

/* Learn band: set apart from the rest of the home page (tinted panel, coloured card tops, real buttons). */
.hm-learn-band { margin-top: var(--space-10); padding: var(--space-8) var(--space-6); border-radius: 20px;
  background:
    radial-gradient(60% 80% at 100% 0%, color-mix(in srgb, #38bdf8 14%, transparent), transparent 70%),
    linear-gradient(135deg, color-mix(in srgb, var(--color-primary) 10%, var(--color-surface)), color-mix(in srgb, var(--color-primary) 4%, var(--color-surface)));
  border: 1px solid color-mix(in srgb, var(--color-primary) 18%, var(--color-border)); }
.hm-learn-band__head { margin-bottom: var(--space-6); }
.hm-learn-band__eyebrow { display: inline-block; margin-bottom: var(--space-2); padding: 3px 10px; border-radius: 999px;
  font-size: var(--text-xs); font-weight: var(--fw-bold); letter-spacing: .05em; text-transform: uppercase;
  color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface)); }
.hm-learn-band__sub { margin-top: var(--space-2); color: var(--color-text-muted); max-width: 60ch; }
.hm-learn-band .hm-learn__card { position: relative; overflow: hidden; border-color: transparent;
  box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -12px rgba(15, 23, 42, .15); }
.hm-learn-band .hm-learn__card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--color-primary); }
.hm-learn-band .hm-learn__card--workshop::before { background: #f59e0b; }
.hm-learn-band .hm-learn__card--demo::before { background: #22c55e; }
.hm-learn-band .hm-learn__cta { align-self: flex-start; margin-top: auto; padding: 8px 14px; border-radius: 999px;
  color: #fff; background: var(--color-primary); transition: background var(--transition); }
.hm-learn-band .hm-learn__card--workshop .hm-learn__cta { background: #d97706; }
.hm-learn-band .hm-learn__card--demo .hm-learn__cta { background: #16a34a; }
.hm-learn-band .hm-learn__card:hover .hm-learn__cta { filter: brightness(.92); }
.hm-learn-band .hm-learn__meta { margin-bottom: var(--space-2); }
@media (max-width: 640px) { .hm-learn-band { padding: var(--space-6) var(--space-4); border-radius: 16px; } }