/* ============================================================
   AIDIA LAB — shared stylesheet
   DNA: Aidia dark/techy surface — near-black navy, cyan+violet
   accents, Space Grotesk + JetBrains Mono. Honest labelling:
   verified ≠ estimate ≠ gap. English (matches aidia.uk).
   ============================================================ */

:root{
  --bg:#060810;
  --bg-2:#0a0d18;
  --card:#0d1120;
  --card-2:#11162a;
  --text:#e8eaf2;
  --text-soft:#c3c8d8;
  --muted:#8b90a6;
  --line:#1b2133;
  --line-strong:#2a3248;
  --blue:#3b82f6;
  --cyan:#22d3ee;
  --violet:#8b6bff;
  --ok:#34d399;          /* verified */
  --ok-bg:rgba(52,211,153,.10);
  --ok-line:rgba(52,211,153,.32);
  --warn:#f0b429;        /* caution / gap-to-validate */
  --warn-bg:rgba(240,180,41,.10);
  --warn-line:rgba(240,180,41,.30);
  --grad:linear-gradient(90deg,var(--blue),var(--cyan),var(--violet));
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 14px 44px rgba(0,0,0,.35);
  --maxw:1100px;
  --display:"Space Grotesk",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--display);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
::selection{background:var(--cyan);color:#060810}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.grad-top{position:fixed;top:0;left:0;right:0;height:3px;background:var(--grad);z-index:60}

/* ---------- header ---------- */
.site-head{
  position:sticky;top:0;z-index:20;
  background:rgba(6,8,16,.82);backdrop-filter:saturate(160%) blur(12px);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.brand{display:flex;align-items:baseline;gap:9px;font-weight:600}
.brand .wm{font-family:var(--display);font-weight:700;letter-spacing:-.01em;font-size:20px;color:var(--text)}
.brand .wm i{color:var(--cyan);font-style:normal}
.brand .wm b{color:var(--muted);font-weight:500}
.head-link{font-family:var(--mono);font-size:12.5px;color:var(--muted);font-weight:500}

/* ---------- hero ---------- */
.hero{padding:88px 0 54px;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.hero::before{
  content:"";position:absolute;inset:-40% -10% auto auto;width:60%;height:120%;
  background:radial-gradient(circle at 70% 20%,rgba(124,92,255,.18),transparent 60%),
             radial-gradient(circle at 90% 40%,rgba(34,211,238,.12),transparent 55%);
  pointer-events:none;
}
.hero .wrap{position:relative}
.eyebrow{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--cyan);font-weight:500;margin:0 0 20px;
}
.hero h1{
  font-family:var(--display);font-weight:600;line-height:1.04;
  font-size:clamp(34px,6vw,66px);letter-spacing:-.02em;margin:0 0 22px;max-width:16ch;
}
.hero p.lead{font-size:clamp(18px,2.3vw,22px);color:var(--text-soft);max-width:62ch;margin:0;line-height:1.5}
.principles{display:flex;flex-wrap:wrap;gap:10px;margin-top:34px}
.principles span{
  font-family:var(--mono);font-size:12.5px;color:var(--text-soft);background:var(--bg-2);
  border:1px solid var(--line);border-radius:999px;padding:7px 14px;
}

/* ---------- section ---------- */
section{padding:60px 0}
.sec-label{
  font-family:var(--mono);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:500;margin:0 0 28px;
  display:flex;align-items:center;gap:14px;
}
.sec-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- project cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:16px;
  padding:28px;box-shadow:var(--shadow);display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.card.live{position:relative}
.card.live::after{content:"";position:absolute;inset:0;border-radius:16px;padding:1px;
  background:var(--grad);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;opacity:0;transition:opacity .18s ease;pointer-events:none}
.card.live:hover{transform:translateY(-3px)}
.card.live:hover::after{opacity:.8}
.card h3{font-family:var(--display);font-weight:600;font-size:24px;line-height:1.18;margin:14px 0 8px;letter-spacing:-.015em;color:var(--text)}
.card .tag{color:var(--text-soft);font-size:15px;margin:0 0 18px;flex:1}
.card .mini{display:flex;flex-wrap:wrap;gap:10px 20px;margin:0 0 20px;padding-top:16px;border-top:1px solid var(--line)}
.card .mini b{display:block;font-family:var(--display);font-size:20px;color:var(--cyan);line-height:1.1;letter-spacing:-.01em}
.card .mini small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.card .go{font-family:var(--mono);font-weight:500;font-size:13.5px;color:var(--cyan)}
.card.ghost{border-style:dashed;background:transparent;box-shadow:none;align-items:flex-start;justify-content:center;min-height:200px}
.card.ghost .gh{color:var(--muted);font-size:14.5px;font-family:var(--mono)}
.card.ghost h3{color:var(--muted)}

/* status badge */
.badge{
  display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.03em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;border:1px solid;
}
.badge.verified{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.badge.konsep{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}

/* ---------- detail / article ---------- */
.crumb{padding:26px 0 0;font-family:var(--mono);font-size:13px;color:var(--muted)}
.crumb a{color:var(--muted)}
.art-head{padding:28px 0 40px;border-bottom:1px solid var(--line)}
.art-head h1{font-family:var(--display);font-weight:600;font-size:clamp(30px,5vw,52px);line-height:1.06;letter-spacing:-.02em;margin:18px 0 16px;max-width:20ch}
.art-head .tagline{font-size:clamp(17px,2.2vw,21px);color:var(--text-soft);margin:0 0 16px;max-width:54ch}
.art-head .meta{font-family:var(--mono);font-size:12.5px;color:var(--muted);display:flex;flex-wrap:wrap;gap:8px 18px}
.art-head .meta b{color:var(--text-soft);font-weight:500}

/* label legend */
.legend{display:flex;flex-wrap:wrap;gap:10px 16px;margin:26px 0 0;font-family:var(--mono);font-size:12px;color:var(--muted)}
.legend .lg{display:inline-flex;align-items:center;gap:7px}
.lab{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;font-weight:500;
  padding:2px 8px;border-radius:6px;border:1px solid;letter-spacing:.02em;vertical-align:middle;white-space:nowrap}
.lab.v{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.lab.e{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.lab.g{background:rgba(139,107,255,.12);color:var(--violet);border-color:rgba(139,107,255,.32)}

/* big stat band */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;margin:40px 0}
.stats .s{background:var(--card);padding:24px 22px}
.stats .s b{display:block;font-family:var(--display);font-size:clamp(24px,4vw,34px);color:var(--cyan);line-height:1;letter-spacing:-.02em}
.stats .s small{display:block;margin-top:9px;font-family:var(--mono);font-size:11.5px;color:var(--text-soft);line-height:1.4}

/* content blocks */
.block{padding:40px 0;border-bottom:1px solid var(--line)}
.block:last-child{border-bottom:0}
.block h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,3vw,30px);letter-spacing:-.015em;margin:0 0 6px;color:var(--text)}
.block .kq{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:0 0 18px}
.block p{color:var(--text-soft);margin:0 0 16px;max-width:68ch}
.block p:last-child{margin-bottom:0}
.block strong{color:var(--text);font-weight:600}
.block ul{margin:0 0 16px;padding-left:0;list-style:none;max-width:68ch}
.block li{position:relative;padding:0 0 12px 26px;color:var(--text-soft)}
.block li::before{content:"▸";position:absolute;left:4px;color:var(--cyan)}

/* callout */
.callout{background:var(--card-2);border:1px solid var(--line-strong);border-left:3px solid var(--cyan);
  border-radius:12px;padding:22px 24px;margin:22px 0;color:var(--text-soft)}
.callout.warn{border-left-color:var(--warn);background:var(--warn-bg)}
.callout.moat{border-left-color:var(--violet);background:rgba(139,107,255,.07)}
.callout h4{font-family:var(--display);font-weight:600;font-size:18px;color:var(--text);margin:0 0 8px}
.callout p{margin:0 0 10px}.callout p:last-child{margin:0}

/* data bars */
.bars{display:flex;flex-direction:column;gap:14px;margin:22px 0;max-width:60ch}
.bar .bl{display:flex;justify-content:space-between;font-family:var(--mono);font-size:12.5px;color:var(--text-soft);margin-bottom:6px}
.bar .bl b{color:var(--cyan);font-weight:500}
.bar .track{height:8px;background:var(--bg-2);border:1px solid var(--line);border-radius:99px;overflow:hidden}
.bar .fill{height:100%;background:var(--grad);border-radius:99px}

/* sources */
.src{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.src li{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-left:22px;position:relative;word-break:break-word}
.src li::before{content:"↗";position:absolute;left:0;color:var(--violet)}
.cap{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:8px 0 0}

/* ---------- footer ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--bg-2);padding:48px 0;margin-top:20px}
.site-foot .fb{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.site-foot .wm{font-family:var(--display);font-weight:700;font-size:20px}
.site-foot .wm i{color:var(--cyan);font-style:normal}
.site-foot strong{color:var(--text)}
.site-foot p{color:var(--muted);font-size:13.5px;max-width:70ch;margin:0}
.site-foot a{color:var(--text-soft)}

/* ---------- language toggle ---------- */
.langtog{font-family:var(--mono);font-size:12px;background:var(--bg-2);border:1px solid var(--line);border-radius:999px;padding:3px;display:inline-flex;gap:2px;cursor:pointer;user-select:none}
.langtog b{padding:3px 11px;border-radius:999px;font-weight:500;color:var(--muted);transition:.15s}
.langtog b.on{background:var(--cyan);color:#060810}
body.lang-en [lang="id"]{display:none !important}
body.lang-id [lang="en"]{display:none !important}

/* confidence tag (per section) */
.conf{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:6px;border:1px solid;margin:0 0 14px}
.conf .dot{width:6px;height:6px;border-radius:50%;background:currentColor;box-shadow:0 0 7px currentColor}
.conf.v{background:var(--ok-bg);color:var(--ok);border-color:var(--ok-line)}
.conf.g{background:rgba(139,107,255,.12);color:var(--violet);border-color:rgba(139,107,255,.32)}

/* bottom-line + caveat */
.bottomline{font-family:var(--display);font-weight:600;font-size:clamp(18px,2.3vw,22px);line-height:1.38;color:var(--text);border-left:3px solid var(--cyan);padding:3px 0 3px 18px;margin:0 0 18px;max-width:62ch}
.caveat{font-family:var(--mono);font-size:12.5px;line-height:1.55;color:#d9ad4e;background:var(--warn-bg);border:1px solid var(--warn-line);border-radius:8px;padding:11px 14px;margin:20px 0 0;max-width:66ch}
.caveat::before{content:"⚠  ";color:var(--warn)}

/* hero verdict teaser */
.teaser{display:inline-flex;align-items:center;gap:10px;margin-top:26px;background:var(--card);border:1px solid var(--line-strong);border-radius:999px;padding:9px 18px 9px 14px;font-size:15px;color:var(--text-soft);max-width:100%}
.teaser .pill{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#060810;background:var(--cyan);padding:3px 9px;border-radius:999px;white-space:nowrap}

/* question grid */
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:14px;margin:6px 0 0}
.qgrid .q{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px 20px}
.qgrid .q .n{font-family:var(--mono);font-size:12px;color:var(--cyan)}
.qgrid .q h4{font-family:var(--display);font-weight:600;font-size:16px;margin:7px 0 5px;color:var(--text)}
.qgrid .q p{font-size:13.5px;color:var(--muted);margin:0;line-height:1.45}

/* method flow */
.flow{display:flex;flex-wrap:wrap;align-items:stretch;gap:8px;margin:24px 0 8px}
.flow .step{flex:1 1 130px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:15px 16px}
.flow .step .n{font-family:var(--mono);font-size:11px;color:var(--violet)}
.flow .step b{display:block;font-family:var(--display);font-weight:600;font-size:14.5px;margin:5px 0 3px;color:var(--text);line-height:1.2}
.flow .step small{font-family:var(--mono);font-size:11px;color:var(--muted)}
.flow .arr{align-self:center;color:var(--cyan);font-size:16px;flex:0 0 auto}

/* verification funnel */
.funnel{display:flex;flex-direction:column;gap:9px;margin:22px 0 8px;max-width:560px}
.funnel .fr{display:flex;align-items:center;gap:14px}
.funnel .bar2{height:40px;border-radius:8px;background:var(--grad);display:flex;align-items:center;padding:0 16px;color:#060810;font-family:var(--display);font-weight:700;font-size:16px;flex:0 0 auto;min-width:70px}
.funnel .fr:nth-child(2) .bar2{opacity:.82}.funnel .fr:nth-child(3) .bar2{opacity:.64}.funnel .fr:nth-child(4) .bar2{opacity:.5}
.funnel .lbl{font-family:var(--mono);font-size:12.5px;color:var(--text-soft);line-height:1.4}

/* recommendation box */
.rec{background:linear-gradient(180deg,rgba(34,211,238,.09),rgba(139,107,255,.06));border:1px solid var(--line-strong);border-radius:16px;padding:clamp(22px,4vw,34px);margin:6px 0 0}
.rec h3{font-family:var(--display);font-weight:600;font-size:clamp(21px,3vw,28px);color:var(--text);margin:0 0 8px;letter-spacing:-.015em;line-height:1.15}

/* numbered risk list */
.risks{counter-reset:r;list-style:none;padding:0;margin:18px 0 0;display:grid;gap:13px}
.risks li{counter-increment:r;position:relative;padding:16px 18px 16px 58px;background:var(--card);border:1px solid var(--line);border-radius:12px;color:var(--text-soft);font-size:15px;max-width:none}
.risks li::before{content:counter(r);position:absolute;left:16px;top:15px;width:28px;height:28px;border-radius:50%;background:var(--warn-bg);border:1px solid var(--warn-line);color:var(--warn);font-family:var(--mono);font-size:14px;display:flex;align-items:center;justify-content:center;font-weight:500}
.risks li b{color:var(--text);font-weight:600}
.risks li::marker{content:none}

@media(max-width:640px){
  .hero{padding:60px 0 40px}
  section{padding:48px 0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .flow{flex-direction:column}
  .flow .arr{transform:rotate(90deg)}
  .site-head .wrap{height:58px}
}

/* ============================================================
   AIDIA ACADEMY — course additions (learn.aidia.uk)
   Inherits all tokens above. Adds: subject cards, LEAD ladder,
   module headers, lesson blocks, code, try-it callouts, nav.
   ============================================================ */

/* brand wordmark variant: aidia. Academy */
.brand .wm b.acad{color:var(--violet);font-weight:600}

/* ---------- subject cards (hub) ---------- */
.subj .lvl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.subj h3{margin-top:10px}
.subj .lead-chips{display:flex;gap:6px;margin:2px 0 16px;flex-wrap:wrap}
.subj .lead-chips i{font-style:normal;font-family:var(--mono);font-size:12px;font-weight:600;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border-radius:7px;background:var(--bg-2);border:1px solid var(--line);color:var(--muted)}
.subj .lead-chips i.on{background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(139,107,255,.14));border-color:var(--line-strong);color:var(--text)}

/* ---------- course hero LEAD ladder ---------- */
.ladder{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:30px 0 6px}
.ladder a{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;color:inherit;transition:transform .16s ease,border-color .16s ease}
.ladder a:hover{transform:translateY(-3px);border-color:var(--line-strong);text-decoration:none}
.ladder .L{font-family:var(--display);font-weight:700;font-size:30px;line-height:1;letter-spacing:-.02em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ladder b{display:block;font-family:var(--display);font-weight:600;font-size:16px;margin:10px 0 4px;color:var(--text)}
.ladder small{font-family:var(--mono);font-size:11.5px;color:var(--muted);line-height:1.45;display:block}
.ladder .step-n{float:right;font-family:var(--mono);font-size:11px;color:var(--muted)}

/* ---------- sticky module rail ---------- */
.mod-nav{position:sticky;top:64px;z-index:15;background:rgba(6,8,16,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.mod-nav .wrap{display:flex;gap:6px;height:52px;align-items:center;overflow-x:auto;-webkit-overflow-scrolling:touch}
.mod-nav a{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding:6px 13px;border-radius:999px;border:1px solid transparent;white-space:nowrap;flex:0 0 auto}
.mod-nav a:hover{color:var(--text);text-decoration:none;border-color:var(--line)}
.mod-nav a b{color:var(--cyan);font-weight:600}

/* ---------- module ---------- */
.module{padding:54px 0 14px;border-top:1px solid var(--line)}
.module:first-of-type{border-top:0}
.mod-head{display:flex;align-items:flex-start;gap:22px;margin:0 0 10px}
.mod-head .big{font-family:var(--display);font-weight:700;font-size:clamp(56px,10vw,104px);line-height:.82;letter-spacing:-.03em;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;flex:0 0 auto}
.mod-head .mt{flex:1;padding-top:6px}
.mod-head .kq{font-family:var(--mono);font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--violet);margin:0 0 8px}
.mod-head h2{font-family:var(--display);font-weight:600;font-size:clamp(26px,4vw,40px);letter-spacing:-.02em;margin:0 0 8px;line-height:1.08;color:var(--text)}
.mod-head p{color:var(--text-soft);margin:0;max-width:60ch}

/* ---------- lesson ---------- */
.lesson{border-top:1px solid var(--line);padding:30px 0}
.lesson .ln{font-family:var(--mono);font-size:12px;color:var(--cyan);font-weight:500}
.lesson h3{font-family:var(--display);font-weight:600;font-size:clamp(19px,2.6vw,24px);letter-spacing:-.01em;margin:8px 0 12px;color:var(--text)}
.lesson p{color:var(--text-soft);margin:0 0 14px;max-width:70ch}
.lesson strong{color:var(--text);font-weight:600}
.lesson em{color:var(--cyan);font-style:normal}
.lesson ul{margin:0 0 14px;padding-left:0;list-style:none;max-width:70ch}
.lesson li{position:relative;padding:0 0 10px 24px;color:var(--text-soft)}
.lesson li::before{content:"▸";position:absolute;left:2px;color:var(--cyan)}
.lesson li b{color:var(--text);font-weight:600}

/* ---------- code ---------- */
pre{background:#05060d;border:1px solid var(--line);border-radius:11px;padding:16px 18px;overflow-x:auto;margin:0 0 16px;font-family:var(--mono);font-size:13px;line-height:1.65;color:var(--text-soft);max-width:100%}
pre .c{color:var(--muted)}      /* comment */
pre .k{color:var(--cyan)}       /* keyword/command */
pre .s{color:var(--ok)}         /* string */
pre .v{color:var(--violet)}     /* var/flag */
code.inl{font-family:var(--mono);font-size:.87em;background:var(--bg-2);border:1px solid var(--line);border-radius:6px;padding:1px 6px;color:var(--cyan)}
.fname{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin:0 0 6px;display:flex;align-items:center;gap:7px}
.fname::before{content:"▤";color:var(--violet)}

/* ---------- try-it / takeaway ---------- */
.tryit{background:rgba(34,211,238,.05);border:1px solid var(--line-strong);border-left:3px solid var(--cyan);border-radius:11px;padding:16px 20px;margin:18px 0;color:var(--text-soft)}
.tryit h4{font-family:var(--mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--cyan);margin:0 0 9px;font-weight:500}
.tryit p{margin:0 0 8px}.tryit p:last-child{margin:0}
.takeaway{font-family:var(--display);font-weight:600;font-size:17px;line-height:1.45;color:var(--text);border-left:3px solid var(--violet);padding:2px 0 2px 16px;margin:16px 0 0;max-width:64ch}

/* ---------- progress dots in mod-head ---------- */
.lcount{font-family:var(--mono);font-size:11.5px;color:var(--muted);margin-top:10px}

/* ---------- CTA band ---------- */
.cta-band{background:linear-gradient(180deg,rgba(34,211,238,.08),rgba(139,107,255,.06));border:1px solid var(--line-strong);border-radius:18px;padding:clamp(26px,5vw,44px);margin:46px 0 10px;text-align:center}
.cta-band h2{font-family:var(--display);font-weight:600;font-size:clamp(22px,3.4vw,32px);letter-spacing:-.02em;margin:0 0 10px;color:var(--text)}
.cta-band p{color:var(--text-soft);max-width:54ch;margin:0 auto 22px}
.cta-band .btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13.5px;font-weight:500;background:var(--cyan);color:#060810;border-radius:999px;padding:12px 22px}
.cta-band .btn:hover{text-decoration:none;filter:brightness(1.08)}
.cta-band .btn.ghost{background:transparent;border:1px solid var(--line-strong);color:var(--text-soft);margin-left:8px}

@media(max-width:720px){
  .ladder{grid-template-columns:repeat(2,1fr)}
  .mod-head{gap:14px}
  .mod-head .big{font-size:clamp(44px,16vw,72px)}
}

/* ============================================================
   ACADEMY — concept diagrams + ascending ladder (v2 visuals)
   ============================================================ */
.ladder a:nth-child(1){margin-top:42px}
.ladder a:nth-child(2){margin-top:28px}
.ladder a:nth-child(3){margin-top:14px}
.ladder a:nth-child(4){margin-top:0}
.ladder-cap{font-family:var(--mono);font-size:12px;color:var(--muted);text-align:center;margin:20px 0 0;display:flex;align-items:center;justify-content:center;gap:12px;flex-wrap:wrap}
.ladder-cap b{color:var(--text-soft);font-weight:500}
.ladder-cap .ln2{flex:0 1 90px;height:1px;background:linear-gradient(90deg,var(--line),var(--cyan))}

.diagram{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 22px;margin:22px 0}
.diagram .dlbl{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--violet);margin:0 0 18px;text-align:center}
.node{display:inline-block;font-family:var(--display);font-weight:600;font-size:13.5px;color:var(--text);background:var(--bg-2);border:1px solid var(--line-strong);border-radius:10px;padding:9px 14px;text-align:center;line-height:1.2}
.node small{display:block;font-family:var(--mono);font-size:10px;color:var(--muted);font-weight:400;margin-top:3px;text-transform:none;letter-spacing:0}
.node.cy{border-color:var(--ok-line)}
.node.grad{background:linear-gradient(180deg,rgba(34,211,238,.18),rgba(139,107,255,.12));border-color:var(--line-strong);font-size:15px;padding:11px 18px}
.arrowx{color:var(--cyan);font-size:16px;flex:0 0 auto;align-self:center}
.looprow{display:flex;align-items:center;gap:9px;flex-wrap:wrap;justify-content:center}
.loopback{font-family:var(--mono);font-size:12px;color:var(--violet);text-align:center;margin:14px 0 0}
.dnote{font-family:var(--mono);font-size:11.5px;color:var(--muted);text-align:center;margin:14px 0 0;padding-top:12px;border-top:1px dashed var(--line);line-height:1.5}
.hub{display:flex;flex-direction:column;align-items:center}
.connector{width:1px;height:20px;background:var(--line-strong)}
.spokes{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--line-strong);padding-top:18px;margin-top:2px}
.twoup{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.twoup .col{background:var(--bg-2);border:1px solid var(--line);border-radius:12px;padding:18px}
.twoup .col.accent{border-color:var(--line-strong);background:linear-gradient(180deg,rgba(34,211,238,.07),rgba(139,107,255,.05))}
.twoup .col .mt{font-family:var(--mono);font-size:10.5px;color:var(--cyan);text-transform:uppercase;letter-spacing:.07em}
.twoup .col h5{font-family:var(--display);font-weight:600;font-size:16px;margin:6px 0 0;color:var(--text)}
.twoup .col p{font-size:13px;color:var(--text-soft);margin:8px 0 0;line-height:1.5}
.twoup .miniflow{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:10px 0 2px}
.fan{display:flex;flex-direction:column;align-items:center;gap:12px}
.fan .row{display:flex;gap:9px;flex-wrap:wrap;justify-content:center}
.forklbl{font-family:var(--mono);font-size:11px;color:var(--violet)}
@media(max-width:720px){
  .ladder a:nth-child(n){margin-top:0}
  .twoup{grid-template-columns:1fr}
}

/* ============================================================
   ACADEMY v3 — per-module color + tasteful motion
   (scroll-reveal, diagram play, counters, progress, active nav)
   All gated by body.anim (JS adds it only when motion allowed).
   ============================================================ */
/* per-module accent */
#L{--mc:#3b82f6} #E{--mc:#22d3ee} #A{--mc:#8b6bff} #D{--mc:#34d399}
.module .lesson .ln{color:var(--mc)}
.module .mod-head .kq{color:var(--mc)}
.module .lesson li::before{color:var(--mc)}
.module .lesson em{color:var(--mc)}
.module .takeaway{border-left-color:var(--mc)}
.module .diagram .dlbl{color:var(--mc)}
.module .mod-head .big{background:linear-gradient(180deg, color-mix(in srgb, var(--mc) 55%, #ffffff), var(--mc))}
.lcount b{color:var(--mc);font-weight:600}
/* ladder letters tinted to match modules */
.ladder a:nth-child(1){--mc:#3b82f6}.ladder a:nth-child(2){--mc:#22d3ee}.ladder a:nth-child(3){--mc:#8b6bff}.ladder a:nth-child(4){--mc:#34d399}
.ladder .L{background:linear-gradient(180deg, color-mix(in srgb, var(--mc) 55%, #fff), var(--mc))}

/* reading progress bar (replaces static grad-top when motion on) */
.reading-progress{position:fixed;top:0;left:0;height:3px;width:0;background:var(--grad);z-index:70;transition:width .12s linear}
body.anim .grad-top{opacity:0}

/* active module in sticky nav */
.mod-nav a.active{color:var(--text);border-color:var(--line-strong);background:var(--bg-2)}
.mod-nav a.active b{color:var(--cyan)}

/* counters */
[data-count]{font-variant-numeric:tabular-nums}

/* scroll reveal */
body.anim .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease;will-change:opacity,transform}
body.anim .reveal.in{opacity:1;transform:none}

/* diagram play — nodes pop in staggered (delay set by JS) */
body.anim .diagram .node{opacity:0;transform:scale(.92);transition:opacity .45s ease, transform .45s ease}
body.anim .diagram .node.np{opacity:1;transform:none}
body.anim .diagram .arrowx{opacity:0;transition:opacity .4s ease}
body.anim .diagram.in .arrowx{opacity:1;transition-delay:.55s}

/* agentic-loop continuous glow cycling across the 4 nodes (only when in view) */
@keyframes loopglow{0%,100%{box-shadow:0 0 0 rgba(34,211,238,0)}50%{box-shadow:0 0 16px rgba(34,211,238,.5)}}
body.anim .diagram.in .looprow .node:nth-of-type(1){animation:loopglow 3.2s ease-in-out .0s infinite}
body.anim .diagram.in .looprow .node:nth-of-type(3){animation:loopglow 3.2s ease-in-out .4s infinite}
body.anim .diagram.in .looprow .node:nth-of-type(5){animation:loopglow 3.2s ease-in-out .8s infinite}
body.anim .diagram.in .looprow .node:nth-of-type(7){animation:loopglow 3.2s ease-in-out 1.2s infinite}
.loopback{display:inline-block}
body.anim .diagram.in .loopback{animation:none}

@media (prefers-reduced-motion: reduce){
  body.anim .reveal,body.anim .diagram .node,body.anim .diagram .arrowx{opacity:1!important;transform:none!important;transition:none!important}
  body.anim .diagram.in .looprow .node{animation:none!important}
  .reading-progress{display:none}
  body.anim .grad-top{opacity:1}
}

/* ============================================================
   THEME — light mode. Default = dark (:root tokens above).
   <html data-theme="light"> flips the token values.
   ============================================================ */
:root{color-scheme:dark}
[data-theme="light"]{
  color-scheme:light;
  --bg:#f6f7fb; --bg-2:#eceff5; --card:#ffffff; --card-2:#f2f5fa;
  --text:#141925; --text-soft:#3a4254; --muted:#697084;
  --line:#e3e7ef; --line-strong:#cdd4e1;
  --blue:#2563eb; --cyan:#0e9bb8; --violet:#7c3aed;
  --ok:#059669; --ok-bg:rgba(5,150,105,.10); --ok-line:rgba(5,150,105,.30);
  --warn:#b45309; --warn-bg:rgba(180,83,9,.10); --warn-line:rgba(180,83,9,.28);
  --grad:linear-gradient(90deg,#2563eb,#0e9bb8,#7c3aed);
  --shadow:0 1px 2px rgba(20,25,40,.06), 0 12px 36px rgba(20,25,40,.10);
}
/* sticky surfaces (were hardcoded dark) */
[data-theme="light"] .site-head{background:rgba(246,247,251,.85)}
[data-theme="light"] .mod-nav{background:rgba(246,247,251,.9)}
/* per-module accents → readable-on-light variants */
[data-theme="light"] #L,[data-theme="light"] .ladder a:nth-child(1){--mc:#2563eb}
[data-theme="light"] #E,[data-theme="light"] .ladder a:nth-child(2){--mc:#0e9bb8}
[data-theme="light"] #A,[data-theme="light"] .ladder a:nth-child(3){--mc:#7c3aed}
[data-theme="light"] #D,[data-theme="light"] .ladder a:nth-child(4){--mc:#059669}
/* code block = always-dark terminal island; re-pin syntax bright in light */
[data-theme="light"] pre{color:#c8cdda;border-color:#1c2334}
[data-theme="light"] pre .c{color:#8b90a6}
[data-theme="light"] pre .k{color:#22d3ee}
[data-theme="light"] pre .s{color:#34d399}
[data-theme="light"] pre .v{color:#9a7dff}
[data-theme="light"] .cta-band .btn:not(.ghost){color:#fff}

/* theme toggle button */
.head-right{display:flex;align-items:center;gap:10px}
.theme-btn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:var(--bg-2);color:var(--text-soft);cursor:pointer;font-size:15px;line-height:1;padding:0;transition:border-color .15s,color .15s,background .15s}
.theme-btn:hover{color:var(--text);border-color:var(--line-strong)}
.theme-btn .t-moon{display:none}
[data-theme="light"] .theme-btn .t-sun{display:none}
[data-theme="light"] .theme-btn .t-moon{display:inline}
body{transition:background-color .25s ease,color .25s ease}

/* ============================================================
   v5 — mobile tidy-ups (ladder-cap arrows, loop vertical stack)
   ============================================================ */
.ladder-cap .ar{color:var(--cyan);font-weight:500}
@media(max-width:560px){
  .ladder-cap{font-size:11.5px;gap:8px}
  .looprow{flex-direction:column;gap:8px}
  .looprow .arrowx{transform:rotate(90deg)}
  .art-head .meta{gap:6px 14px}
  .twoup .miniflow{justify-content:center}
}

/* ============================================================
   v6 — fix: .art-head & .crumb used `padding:_ 0 _` (horizontal 0)
   which overrode .wrap's `0 24px` gutter → judul/breadcrumb nempel
   tepi kiri (parah di mobile). Restore the 24px side gutter.
   ============================================================ */
.crumb{padding-left:24px;padding-right:24px}
.art-head{padding-left:24px;padding-right:24px}

/* ============================================================
   v7 — bilingual ID | EN. Default = ID. <html data-lang> flips.
   Dual content at block level: [lang="id"] / [lang="en"].
   The shown language keeps its natural display; other hidden.
   ============================================================ */
[data-lang="id"] [lang="en"]{display:none}
[data-lang="en"] [lang="id"]{display:none}
/* language pill (reuses .langtog base from lab stylesheet) */
.langtog b[data-l]{cursor:pointer}
[data-lang="id"] .langtog b[data-l="id"],
[data-lang="en"] .langtog b[data-l="en"]{background:var(--cyan);color:#060810}
@media(max-width:560px){
  .head-link{display:none}
  .head-right{gap:8px}
  .langtog{font-size:11px}
  .langtog b{padding:3px 9px}
}