@charset "UTF-8";
/* Halaman Panduan AI & Dashboard (Belajar Data) — dimuat SETELAH <style> bawaan tiap panduan.
   - Font brand self-hosted (CSP font-src 'self'; tanpa Google Fonts)
   - Palet panduan dipetakan ke warna INSYNTIVE (var yang sama juga dibaca script chart)
   - Bar atas (dengan pilihan bahasa ID / EN) & penutup INSYNTIVE Academy. Mode terang saja (<html data-theme="light">).
   - Dipakai halaman Indonesia (/belajar/panduan/<slug>/) dan Inggris (/en/belajar/panduan/<slug>/). */

@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans-Medium.woff2") format("woff2"); font-weight: 400 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans-Bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Plus Jakarta Sans"; src: url("/assets/fonts/PlusJakartaSans-ExtraBold.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --body: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --bg: #F4F7FA;
  --surface: #FFFFFF;
  --ink: #0E1620;
  --ink-soft: #3A4655;
  --steel: #1F5FB8;
  --calm: #EAF3FC;
  --line: #D0DAE5;
  --tok-bg: #EAF3FC;
  --tok-ink: #1F5FB8;
  --ok: #15803D;
  --steel-mid: #6FA0D8;
  --calm-strong: #D7E8FB;
  --mix1: #1F5FB8; --mix1-ink: #FFFFFF; --mix2: #02A0C1; --mix2-ink: #FFFFFF; --mix3: #D7E8FB; --mix3-ink: #0E1620;
  color-scheme: light;
}
body { font-size: 1.0625rem; }
h1 { letter-spacing: -.03em; }
h2 { letter-spacing: -.02em; }

/* ── bar atas ── */
.ia-bar { position: sticky; top: 0; z-index: 30; background: #0A1119; border-bottom: 1px solid rgba(255, 255, 255, .09); }
/* Link di halaman (#checklist, #rule-1, …) berhenti di bawah bar yang menempel (61px + ruang napas). Mengalahkan
   scroll-padding-top di <style> tiap panduan karena file ini dimuat sesudahnya. */
html { scroll-padding-top: calc(72px + env(safe-area-inset-top, 0px)); }
.ia-bar__in { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 60rem; min-height: 60px; margin: 0 auto; padding: 0 1.25rem; }
.ia-brand { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none; min-width: 0; }
.ia-brand__mark { width: 30px; height: 30px; flex: none; }
.ia-brand__word { font-family: var(--display); font-weight: 800; font-size: 1.0625rem; letter-spacing: .08em; line-height: 1; }
.ia-brand__word span { color: #4CCDE8; }
.ia-brand__name { padding-left: 12px; border-left: 1px solid rgba(255, 255, 255, .16); color: #B4BFCC; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.ia-back { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 14px 8px 10px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); color: #fff; text-decoration: none; font-weight: 700; font-size: .9375rem; white-space: nowrap; }
.ia-back:hover { background: rgba(255, 255, 255, .08); }
.ia-back svg { width: 18px; height: 18px; flex: none; }
.ia-bar :focus-visible { outline: 3px solid #D6FD91; outline-offset: 2px; }
/* pilihan bahasa: <nav class="ia-lang"> dengan 2 link [data-lang-link], yang aktif aria-current="true" */
.ia-back { margin-left: auto; }
.ia-lang { display: inline-flex; align-items: center; gap: 2px; flex: none; padding: 3px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .16); }
.ia-lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 38px; min-height: 36px; padding: 4px 10px; border-radius: 999px;
  color: #fff; font: 800 .8125rem/1 var(--body); letter-spacing: .06em; text-decoration: none; opacity: .74; transition: background-color .2s, color .2s, opacity .2s; }
.ia-lang a:hover { opacity: 1; background: rgba(255, 255, 255, .1); }
.ia-lang a[aria-current="true"] { opacity: 1; background: #fff; color: #0A1119; }
.ia-lang a[aria-current="true"]:hover { background: #fff; }
/* Layar sentuh tablet/desktop: target ketuk minimal 40px (HP < 560px sudah 44px di bawah). */
@media (pointer: coarse) and (min-width: 560px) { .ia-lang a { min-width: 40px; min-height: 40px; } }
@media (max-width: 559.98px) {
  /* HP: cukup satu tombol ke bahasa lain ("EN" / "ID"), sama dengan header situs */
  .ia-lang { padding: 0; }
  .ia-lang a[aria-current="true"] { display: none; }
  .ia-lang a { min-width: 44px; min-height: 44px; opacity: .9; }
}
@media (max-width: 479.98px) { .ia-bar__in { gap: 8px; } .ia-brand__name { display: none; } .ia-back { font-size: .875rem; padding-inline: 8px 12px; } }
@media (max-width: 399.98px) { .ia-bar__in { padding: 0 1rem; } .ia-brand__word { display: none; } }
@media (prefers-reduced-motion: reduce) { .ia-lang a { transition: none; } }

/* ── penutup: tandai selesai ── */
.ia-foot { padding: 3rem 0 2.5rem; }
.ia-foot__card { display: grid; justify-items: center; gap: .5rem; padding: 1.75rem 1.25rem; border-radius: 20px; text-align: center; color: #F4F7FA;
  background: radial-gradient(60% 90% at 50% 0%, rgba(2, 160, 193, .28), transparent 70%), #0A1119; }
.ia-foot__t { margin: 0; font-family: var(--display); font-weight: 800; font-size: 1.375rem; letter-spacing: -.02em; color: #fff; }
.ia-foot__s { margin: 0 0 .5rem; color: #B4BFCC; }
.ia-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 24px; border: 0; border-radius: 999px;
  background: #D6FD91; color: #0A1119; font: 800 1rem/1.2 var(--body); cursor: pointer; box-shadow: 0 10px 30px -12px rgba(214, 253, 145, .7); }
.ia-btn:hover { filter: brightness(1.04); }
.ia-btn[disabled] { opacity: .7; cursor: progress; }
.ia-btn.is-done { background: #ECFDF3; color: #15803D; box-shadow: none; }
.ia-btn:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ia-foot__note { margin: .25rem 0 0; max-width: 32rem; color: #D7DEE6; font-size: .9375rem; line-height: 1.5; }
.ia-foot__note[hidden] { display: none; }
.ia-foot__note a { color: #5FD4EC; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.ia-foot__note a:hover { color: #8BE3F3; }
.ia-foot__note a:focus-visible, .ia-foot__links a:focus-visible { outline: 3px solid #D6FD91; outline-offset: 2px; border-radius: 4px; }
.ia-foot__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem 1.25rem; margin: .75rem 0 0; }
.ia-foot__links a { color: #5FD4EC; font-weight: 700; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.ia-foot__links a:hover { text-decoration: underline; }
.ia-foot__legal { margin: 1.25rem 0 0; font-size: .8125rem; color: var(--ink-soft); text-align: center; }