/* ============================================================
   AI Commander — shared stylesheet
   Dikongsi oleh /jurnal/ (hub + artikel) dan /sertai/ (survey).
   Tukar sekali di sini, jadi ke semua halaman.

   TEMA: PANAS (amber -> oren -> coral -> pink), diselaraskan dengan
   main page pada 2026-07-25. Sebelum ini ungu-cyan; ditukar supaya
   pembaca tak rasa masuk laman lain bila klik dari main page.

   Aksen: --accent (oren) utama · --amber sekunder · --pink · --coral
   Nama token --purple/--cyan DIBUANG (nama tak boleh menipu isi).
   Warna LOGO ungu sengaja dikekalkan di main page sahaja (butang CTA).
   ============================================================ */

/* --- Font self-host (zero ping luar, pendirian PDPA) — variable, subset latin --- */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(/fonts/inter-latin.woff2) format('woff2');
}
@font-face{
  font-family:'Space Grotesk';
  font-style:normal;
  font-weight:300 700;
  font-display:swap;
  src:url(/fonts/spacegrotesk-latin.woff2) format('woff2');
}

:root{
  --bg:#0c0710;
  --bg-2:#170c16;
  --panel:rgba(30,16,26,.78);
  --panel-solid:#1c1018;
  --line:rgba(255,255,255,.11);
  --text:#f6f1ee;
  --muted:#c3b3ad;
  --muted-2:#8a7a78;
  --accent:#fb6a3c;
  --accent-deep:#d9552a;
  --pink:#ec4899;
  --amber:#f59e0b;
  --green:#34d399;
  --yellow:#f59e0b;
  --danger:#fb5a76;
  /* Gradient LOGO (ungu) — khas butang tindakan utama supaya sepadan main page & logo */
  --grad-logo:linear-gradient(135deg,#6d28d9 0%,#9333ea 46%,#c026d3 100%);
  --shadow:0 28px 80px rgba(0,0,0,.38);
  --radius:24px;
  --max:1180px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;color:var(--text);
  background:
    radial-gradient(circle at 12% 7%, rgba(251,106,60,.20), transparent 34rem),
    radial-gradient(circle at 90% 22%, rgba(236,72,153,.12), transparent 29rem),
    radial-gradient(circle at 60% 70%, rgba(245,158,11,.07), transparent 34rem),
    var(--bg);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  line-height:1.72;overflow-x:hidden;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.16;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:42px 42px;
  mask-image:linear-gradient(to bottom,#000,transparent 76%);z-index:-1;
}
a{color:inherit}
img,svg{max-width:100%}
p{color:#d9c9c2;font-size:1.04rem}
strong{color:#fff}
.skip-link{position:absolute;left:-9999px;top:12px;z-index:9999;background:#fff;color:#111;padding:10px 14px;border-radius:10px}
.skip-link:focus{left:12px}
.progress{position:fixed;inset:0 auto auto 0;height:3px;width:0;background:linear-gradient(90deg,var(--amber),var(--accent),var(--pink));z-index:1000;box-shadow:0 0 18px rgba(251,106,60,.8)}

/* --------- nav --------- */
.nav{position:sticky;top:0;z-index:100;backdrop-filter:blur(18px);background:rgba(12,7,16,.72);border-bottom:1px solid var(--line)}
.nav-inner{max-width:var(--max);margin:auto;padding:14px 22px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{text-decoration:none;display:flex;align-items:center;gap:11px;font-weight:800;letter-spacing:-.02em}
.brand-mark{width:36px;height:36px;display:grid;place-items:center;flex:0 0 auto}
.brand-mark img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 12px rgba(251,90,118,.7))}
.brand small{color:var(--muted-2);font-weight:600;margin-left:4px}
.nav-links{display:flex;align-items:center;gap:22px}
.nav-links a{text-decoration:none;color:var(--muted);font-size:.93rem;font-weight:600}
.nav-links a:hover{color:#fff}
/* nav CTA "Sertai Kami" — striking: gradient penuh + glow (bukan pill lut sinar) */
.nav-cta{position:relative;padding:11px 20px;border-radius:999px;font-weight:800;font-size:.92rem;letter-spacing:-.01em;
  color:#fff !important;
  background:var(--grad-logo);
  border:1.5px solid rgba(216,180,254,.45);
  box-shadow:0 8px 26px -8px rgba(147,51,234,.85),inset 0 1px 0 rgba(255,255,255,.28);
  transition:transform .18s ease,box-shadow .18s ease,filter .18s ease}
.nav-cta:hover{transform:translateY(-2px);filter:saturate(1.12);
  box-shadow:0 12px 34px -8px rgba(192,38,211,1),0 0 22px rgba(147,51,234,.5),inset 0 1px 0 rgba(255,255,255,.32)}

/* Brofiq: pembaca jurnal susah balik ke main page/section lain di mobile —
   link nav (Utama/Jurnal/anchor artikel) sengaja disorok di mobile (lihat
   `.nav-links a:not(.nav-cta){display:none}` dlm @media 680px, supaya header
   fokus CTA "Sertai Kami"), TAPI itu buang SATU-SATUNYA laluan balik ke main
   page di mobile. Fix: butang menu (☰) khusus mobile — bila ditekan, buka
   balik link yg sama (bukan struktur/menu baharu) sebagai dropdown penuh
   lebar. `.nav` sedia ada `position:sticky` jadi containing block utk
   dropdown absolute ni — sifar `position:relative` tambahan perlu. */
.nav-toggle{display:none;background:none;border:1px solid var(--line);color:#fff;font-size:1.05rem;
  line-height:1;padding:8px 12px;border-radius:10px;cursor:pointer;flex:0 0 auto}
.nav-toggle:hover{border-color:rgba(255,255,255,.35)}

.shell{max-width:var(--max);margin:0 auto;padding:0 22px 90px}

/* --------- hero (article) --------- */
.hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(370px,.92fr);align-items:center;gap:54px;min-height:690px;padding:72px 0 46px}
.crumb{color:var(--muted-2);font-size:.86rem;margin-bottom:22px}
.crumb a{text-decoration:none}
.eyebrow{display:inline-flex;align-items:center;gap:9px;margin-bottom:18px;color:#e6ddff;font-size:.8rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;border:1px solid rgba(251,106,60,.35);background:rgba(251,106,60,.10);padding:8px 12px;border-radius:999px}
.eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--amber);box-shadow:0 0 12px var(--amber)}
h1,h2,h3,h4{font-family:"Space Grotesk",Inter,sans-serif;line-height:1.12}
h1{font-size:clamp(2.8rem,6vw,5.45rem);letter-spacing:-.065em;margin:0 0 24px;max-width:820px}
.gradient{background:linear-gradient(90deg,#fff 5%,#fdba74 42%,#fcd34d 72%,#f9a8d4);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{max-width:740px;font-size:clamp(1.08rem,1.5vw,1.27rem);color:#cfc9df;margin-bottom:26px}
.meta{display:flex;flex-wrap:wrap;gap:12px 20px;color:var(--muted-2);font-size:.89rem;align-items:center}
.meta span{display:inline-flex;align-items:center;gap:8px}
.author-chip{color:#efe7e3}
.avatar{width:30px;height:30px;display:grid;place-items:center;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--pink));font-size:.72rem;font-weight:900}

/* hero visual (fake terminal) */
.hero-visual{position:relative;min-height:530px;border:1px solid var(--line);border-radius:34px;background:linear-gradient(145deg,rgba(32,18,28,.92),rgba(18,10,17,.88));box-shadow:var(--shadow);overflow:hidden;isolation:isolate}
.hero-visual::before{content:"";position:absolute;width:390px;height:390px;border-radius:50%;background:rgba(251,106,60,.23);filter:blur(60px);right:-120px;top:-120px;z-index:-1}
.hero-visual::after{content:"";position:absolute;width:260px;height:260px;border-radius:50%;background:rgba(245,158,11,.14);filter:blur(55px);left:-100px;bottom:-60px;z-index:-1}
.window-top{display:flex;align-items:center;gap:7px;padding:17px 19px;border-bottom:1px solid var(--line)}
.dot{width:9px;height:9px;border-radius:50%;background:#fb5a76}
.dot:nth-child(2){background:#f59e0b}.dot:nth-child(3){background:#34d399}
.window-title{margin-left:8px;color:var(--muted-2);font-size:.78rem}
.visual-body{padding:30px}
.terminal{border:1px solid rgba(255,255,255,.12);background:rgba(7,4,9,.72);border-radius:18px;padding:20px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.84rem;color:#c8c3d6}
.terminal .line{margin:8px 0}
.cmd{color:#fcd34d}.ok{color:#6ee7b7}.warn{color:#f59e0b}.danger{color:#fda4b6}
.belt-flow{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-top:22px}
.belt-card{border:1px solid var(--line);border-radius:18px;padding:17px;background:rgba(255,255,255,.035)}
.belt-card b{display:block;font-size:.92rem;margin-bottom:5px}.belt-card small{color:var(--muted-2)}
.belt-icon{width:62px;height:62px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--pink));box-shadow:0 14px 40px rgba(251,106,60,.32)}
.status-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px}
.status{padding:13px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line);text-align:center}
.status strong{display:block;font-size:1.25rem}.status small{color:var(--muted-2);font-size:.72rem}

/* --------- main grid (TOC + article) --------- */
.main-grid{display:grid;grid-template-columns:270px minmax(0,760px);gap:52px;justify-content:center;align-items:start}
.toc{position:sticky;top:92px;padding:20px;border:1px solid var(--line);border-radius:20px;background:rgba(24,13,21,.72);backdrop-filter:blur(12px)}
.toc b{display:block;margin-bottom:12px;font-size:.86rem;color:#fff}
.toc ol{margin:0;padding-left:19px}
.toc li{margin:8px 0;color:var(--muted-2);font-size:.84rem}
.toc a{text-decoration:none;color:inherit}.toc a:hover{color:#fff}
article{min-width:0}
article h2{font-size:clamp(1.9rem,4vw,2.9rem);letter-spacing:-.045em;margin:92px 0 22px;scroll-margin-top:100px}
article h2:first-child{margin-top:0}
article h3{font-size:1.25rem;margin:0 0 8px}
article ul{color:#d9c9c2;padding-left:22px}
article li{margin:10px 0}
.intro-drop::first-letter{float:left;font-family:"Space Grotesk";font-size:4rem;line-height:.8;padding:9px 12px 0 0;color:#fdba74;font-weight:700}
.quote{margin:32px 0;padding:30px 30px 28px;border-radius:24px;border:1px solid rgba(251,106,60,.35);background:linear-gradient(135deg,rgba(251,106,60,.13),rgba(245,158,11,.055));box-shadow:0 16px 46px rgba(0,0,0,.18)}
.quote .big{font-family:"Space Grotesk";font-size:clamp(1.35rem,3vw,2rem);line-height:1.3;color:#fff;margin:0}
.quote small{display:block;margin-top:12px;color:var(--muted-2)}
.plain-callout{border-left:3px solid var(--amber);padding:5px 0 5px 20px;margin:30px 0}
.plain-callout p{margin:0}
.sources-inline{color:var(--muted-2);font-size:.82rem}
.sources-inline a{color:#fdba74;text-underline-offset:3px}

/* definition / risk / alesa intro / pillars / flow / comparison / testimony */
.definition{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.def-card{padding:22px;border-radius:20px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.def-card .icon{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;margin-bottom:15px;background:rgba(251,106,60,.16);color:#fed7aa;font-weight:800}
.def-card h3{font-size:1rem}.def-card p{font-size:.88rem;color:var(--muted);margin:0}
.risk-strip{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:28px 0}
.risk{border:1px solid var(--line);background:rgba(255,255,255,.032);border-radius:20px;padding:20px}
.risk b{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.risk p{font-size:.9rem;margin:0;color:var(--muted)}
.risk i{width:9px;height:9px;border-radius:50%;background:var(--danger);box-shadow:0 0 11px rgba(251,90,118,.55)}
.alesa-intro{border:1px solid rgba(251,106,60,.36);border-radius:28px;padding:30px;margin:32px 0;background:linear-gradient(135deg,rgba(251,106,60,.18),rgba(236,72,153,.06) 52%,rgba(245,158,11,.05));position:relative;overflow:hidden}
.alesa-intro::after{content:"A";position:absolute;right:-10px;bottom:-95px;font:900 260px/1 "Space Grotesk";color:rgba(255,255,255,.025)}
.alesa-label{display:inline-flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.07);color:#fed7aa;font-size:.76rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.alesa-intro h3{font-size:1.75rem;margin:15px 0 12px}
.alesa-intro p:last-child{margin-bottom:0}
.pillars{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:28px 0}
.pillar{border:1px solid var(--line);border-radius:24px;padding:26px;background:rgba(255,255,255,.034)}
.pillar-icon{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;margin-bottom:18px}
.pillar:first-child .pillar-icon{background:rgba(245,158,11,.13);color:var(--amber)}
.pillar:last-child .pillar-icon{background:rgba(251,106,60,.18);color:#fdba74}
.pillar .mini{color:var(--muted-2);font-size:.8rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.pillar ul{padding-left:18px;margin-bottom:0;font-size:.91rem}
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:11px;margin:30px 0;position:relative}
.flow::before{content:"";position:absolute;left:9%;right:9%;top:35px;height:1px;background:linear-gradient(90deg,var(--amber),var(--accent),var(--pink));opacity:.48}
.flow-step{position:relative;text-align:center;z-index:1}
.flow-step .n{width:70px;height:70px;border-radius:22px;display:grid;place-items:center;margin:0 auto 14px;background:var(--panel-solid);border:1px solid rgba(251,106,60,.45);box-shadow:0 10px 30px rgba(0,0,0,.25);font:700 1.2rem "Space Grotesk"}
.flow-step b{display:block;font-size:.88rem}.flow-step small{color:var(--muted-2);font-size:.76rem}
.comparison{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:28px 0}
.compare-card{border:1px solid var(--line);border-radius:24px;padding:26px;background:rgba(255,255,255,.032)}
.compare-card.featured{border-color:rgba(251,106,60,.5);background:linear-gradient(145deg,rgba(251,106,60,.16),rgba(245,158,11,.04));box-shadow:0 18px 55px rgba(217,85,42,.14)}
.compare-card .top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start;margin-bottom:14px}
.compare-card .badge{border-radius:999px;padding:5px 9px;font-size:.7rem;font-weight:800;background:rgba(255,255,255,.08);color:var(--muted);white-space:nowrap}
.featured .badge{background:rgba(52,211,153,.14);color:#a7f3d0}
.compare-card ul{list-style:none;padding:0;margin:20px 0 0}
.compare-card li{display:flex;gap:10px;font-size:.91rem;margin:10px 0}
.compare-card li::before{content:"×";color:var(--danger);font-weight:900}
.featured li::before{content:"✓";color:var(--green)}
.metric{margin-top:18px;border-top:1px solid var(--line);padding-top:17px;display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.metric b{display:block;font-size:1.3rem}.metric small{color:var(--muted-2);font-size:.72rem}
.testimony{position:relative;border:1px solid rgba(245,158,11,.28);border-radius:26px;padding:30px;margin:32px 0;background:linear-gradient(145deg,rgba(245,158,11,.07),rgba(251,106,60,.09));overflow:hidden}
.testimony::before{content:"\201C";position:absolute;right:22px;top:-28px;font:900 130px/1 Georgia,serif;color:rgba(255,255,255,.06)}
.testimony-head{display:flex;justify-content:space-between;gap:16px;align-items:center;margin-bottom:16px}
.testimony .org{display:flex;align-items:center;gap:13px}
.org-mark{width:48px;height:48px;border-radius:15px;display:grid;place-items:center;background:rgba(255,255,255,.08);font-weight:900}
.testimony-tag{font-size:.72rem;color:#a5f3fc;padding:6px 9px;border-radius:999px;background:rgba(245,158,11,.09);border:1px solid rgba(245,158,11,.2)}
.testimony blockquote{margin:0;font-size:1.08rem;color:#f1eae6}
.disclosure{margin-top:17px;color:var(--muted-2);font-size:.76rem}
.local-principles{display:flex;flex-wrap:wrap;gap:9px;margin:25px 0}
.local-principles span{padding:8px 11px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.035);font-size:.79rem;color:#d9d4e6}

/* FAQ */
.faq{display:grid;gap:10px;margin:28px 0}
details{border:1px solid var(--line);border-radius:18px;background:rgba(255,255,255,.03);padding:0 20px}
summary{cursor:pointer;list-style:none;padding:18px 0;font-weight:700;color:#f4ede9;display:flex;justify-content:space-between;gap:18px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:#fdba74;font-size:1.25rem}
details[open] summary::after{content:"\2212"}
details p{font-size:.94rem;margin:0 0 20px}

/* CTA */
.cta{margin-top:70px;border-radius:30px;padding:42px;text-align:center;background:radial-gradient(circle at 20% 20%,rgba(245,158,11,.14),transparent 20rem),linear-gradient(135deg,rgba(217,85,42,.82),rgba(217,85,42,.72) 52%,rgba(20,12,16,.9));border:1px solid rgba(253,186,116,.34);box-shadow:var(--shadow)}
.cta h2{margin:0 0 15px;font-size:clamp(2rem,5vw,3.4rem)}
.cta p{max-width:620px;margin:0 auto 25px;color:#e5dfff}
.actions{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.btn{text-decoration:none;padding:13px 18px;border-radius:13px;font-weight:800;font-size:.91rem;transition:.2s ease;display:inline-block}
.btn-primary{background:#fff;color:#2a1420}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.2)}
.btn-secondary{border:1px solid rgba(255,255,255,.32);background:rgba(255,255,255,.08);color:#fff}.btn-secondary:hover{background:rgba(255,255,255,.14)}
/* butang UTAMA "Sertai Kami" — paling menonjol dalam blok CTA (survey + komuniti) */
.btn-join{position:relative;color:#fff;font-size:1rem;padding:16px 30px;border-radius:15px;
  background:var(--grad-logo);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 4px rgba(147,51,234,.3),0 18px 46px -10px rgba(192,38,211,.95);
  animation:joinPulse 2.8s ease-in-out infinite}
.btn-join:hover{transform:translateY(-3px);filter:saturate(1.14);animation:none;border-color:#fff;
  box-shadow:0 0 0 6px rgba(147,51,234,.4),0 26px 60px -10px rgba(192,38,211,1)}
@keyframes joinPulse{
  0%,100%{box-shadow:0 0 0 4px rgba(147,51,234,.3),0 18px 46px -10px rgba(192,38,211,.95)}
  50%{box-shadow:0 0 0 7px rgba(147,51,234,.42),0 22px 56px -10px rgba(192,38,211,1)}}
@media (prefers-reduced-motion:reduce){.btn-join{animation:none}}

/* references */
.references{border-top:1px solid var(--line);margin-top:70px;padding-top:28px}
.references h2{font-size:1.35rem;margin:0 0 18px}
.references ol{color:var(--muted);font-size:.82rem;padding-left:20px}
.references li{margin:9px 0}.references a{color:#fdba74;text-underline-offset:3px}

/* footer */
footer{border-top:1px solid var(--line);background:rgba(8,5,10,.55)}
.footer-inner{max-width:var(--max);margin:auto;padding:32px 22px 46px;display:flex;justify-content:space-between;gap:30px;color:var(--muted-2);font-size:.82rem}
.footer-inner strong{display:block;margin-bottom:5px}.footer-inner a{color:#fdba74}

/* ============================================================
   HUB (index) — tambahan kelas untuk halaman utama journal
   ============================================================ */
.hero-index{text-align:center;padding:84px 0 20px;max-width:820px;margin:0 auto}
.hero-index h1{max-width:none;margin-left:auto;margin-right:auto}
.hero-index .lede{margin:0 auto 26px}
.section-head{margin:76px 0 4px}
.section-head .kick{color:var(--accent);font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.section-head h2{font-size:clamp(1.7rem,4vw,2.5rem);letter-spacing:-.04em;margin:0}
.section-head p{color:var(--muted);margin:10px 0 0;max-width:640px}
.section-head.big{margin-top:84px}
.section-head.big .kick{font-size:1.05rem;letter-spacing:.14em;color:#fdba74;display:inline-flex;align-items:center;gap:9px}
.section-head.big .kick::before{content:"📖";font-size:1.1rem}
.section-head.big h2{font-size:clamp(2rem,5vw,3.1rem)}
.mandate{text-align:center;font-size:.95rem;color:var(--muted);margin:16px 0 4px}
.mandate b{color:var(--yellow)}
.founder{display:flex;gap:14px;align-items:center;margin-top:22px;padding-top:20px;border-top:1px solid var(--line)}
.founder .ph{flex:none;width:46px;height:46px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--pink));display:grid;place-items:center;font-weight:900;font-size:.95rem}
.founder b{display:block;font-size:.95rem;color:#fff}
.founder span{font-size:.82rem;color:var(--muted-2)}
.solve{background:linear-gradient(150deg,rgba(32,18,28,.7),rgba(18,10,17,.6));border:1px solid var(--line);border-radius:28px;padding:clamp(26px,4vw,40px);margin:26px 0}
.solve .act{text-align:center;margin-top:26px;display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;margin:26px 0}
.card{display:flex;flex-direction:column;text-decoration:none;color:inherit;background:rgba(255,255,255,.034);border:1px solid var(--line);border-radius:22px;padding:26px;transition:.2s ease}
.card:hover{border-color:rgba(251,106,60,.5);transform:translateY(-3px)}
.card .cat{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fdba74;margin-bottom:12px}
.card h3{font-size:1.2rem;margin:0 0 10px;line-height:1.25}
.card p{font-size:.92rem;color:var(--muted);margin:0 0 16px;flex:1}
.card .read{font-size:.8rem;color:var(--muted-2);font-weight:700}
.card.feat{grid-column:1/-1;position:relative;overflow:hidden;padding:32px;cursor:pointer;
  background:linear-gradient(135deg,rgba(251,106,60,.30),rgba(245,158,11,.10) 55%,rgba(236,72,153,.16));
  border:1.5px solid rgba(251,106,60,.6);
  box-shadow:0 0 0 1px rgba(251,106,60,.14),0 22px 60px -18px rgba(251,106,60,.5);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}
.card.feat::after{content:"";position:absolute;right:-90px;top:-90px;width:300px;height:300px;border-radius:50%;background:rgba(251,106,60,.28);filter:blur(72px);z-index:0;pointer-events:none}
.card.feat>*{position:relative;z-index:1}
.card.feat:hover{transform:translateY(-4px);border-color:rgba(253,186,116,.9);box-shadow:0 0 0 1px rgba(251,106,60,.28),0 32px 84px -18px rgba(251,106,60,.7)}
.card.feat h3{font-size:clamp(1.6rem,3.6vw,2.3rem)}
.card.feat p{color:#e2ddf1;font-size:1rem}
.card.feat .pill{font-size:.8rem;padding:7px 15px;color:#0a0c16;background:linear-gradient(135deg,#a7f3d0,#fcd34d);border:none;box-shadow:0 6px 18px -4px rgba(252,211,77,.5)}
.feat-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:8px}
.feat-btn{display:inline-flex;align-items:center;gap:9px;background:#fff;color:#2a1420;font-weight:800;font-size:.98rem;padding:13px 24px;border-radius:13px;box-shadow:0 12px 30px -8px rgba(255,255,255,.28);transition:transform .2s ease,box-shadow .2s ease}
.card.feat:hover .feat-btn{transform:translateX(3px);box-shadow:0 16px 38px -8px rgba(255,255,255,.42)}
.pill{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#a7f3d0;border:1px solid rgba(52,211,153,.3);border-radius:999px;padding:5px 11px;margin-bottom:14px;background:rgba(52,211,153,.1)}
.card.soon{opacity:.6;cursor:default}
.card.soon:hover{transform:none;border-color:var(--line)}
.card.soon .cat{color:var(--muted-2)}

/* --------- responsive --------- */
@media (max-width:980px){
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:54px}
  .hero-visual{min-height:auto}
  .main-grid{grid-template-columns:1fr}
  .toc{position:relative;top:auto}
  .definition,.flow{grid-template-columns:repeat(2,1fr)}
  .flow::before{display:none}
}
@media (max-width:680px){
  .nav-links a:not(.nav-cta){display:none}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;gap:6px}
  /* Brofiq: header mobile jurnal tak perlu teks "Jurnal AI Commander" (rasa
     macam "home button" ke-2, bersaing dgn Menu) — logo (brand-mark) KEKAL
     utk jenama, teks je disorok. Brofiq lepas tu minta logo di KIRI toggle
     (bukan kanan) — HTML kini `.brand` SEBELUM `.nav-toggle`, jadi
     `margin-right:auto` dipindah ke `.nav-toggle` (bukan `.brand` lagi) —
     kumpulan [Logo][Menu] kekal rapat kiri, `.nav-toggle` yg push nav-links/
     CTA ke kanan. Hasil akhir: [Logo][Menu] .......... [Sertai Kami]. */
  .brand-text{display:none}
  .nav-toggle{margin-right:auto}
  .nav-links.menu-open{position:absolute;top:100%;left:0;right:0;z-index:99;
    flex-direction:column;align-items:stretch;gap:2px;
    background:rgba(12,7,16,.97);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--line);padding:8px 16px 16px;box-shadow:0 18px 40px -12px rgba(0,0,0,.5)}
  .nav-links.menu-open a:not(.nav-cta){display:block;padding:12px 6px;border-bottom:1px solid rgba(255,255,255,.06)}
  .nav-links.menu-open .nav-cta{margin-top:10px;text-align:center}
  .brand small{display:none}
  /* Nav mobile: brand "Jurnal AI Commander" + CTA dua-dua pecah 2 baris tanpa ini */
  .nav-inner{padding:11px 16px;gap:10px;justify-content:flex-start}
  /* Order flex mobile kini [brand][nav-toggle][nav-links] — `margin-right:
     auto` diletak pada `.nav-toggle` (bukan `.brand` lagi, lihat atas) supaya
     [Logo][Menu] kekal berkumpul rapat kiri, CTA terpisah kanan. */
  .brand{font-size:.92rem;gap:9px;white-space:nowrap;min-width:0}
  .brand-mark{width:38px;height:38px}
  .nav-cta{padding:9px 14px;font-size:.84rem;white-space:nowrap}
  .shell{padding-inline:16px}
  .hero{gap:30px;padding-top:40px}
  h1{font-size:clamp(2.55rem,15vw,4.25rem)}
  .visual-body{padding:18px}
  .belt-flow{grid-template-columns:1fr}.belt-icon{margin:auto}.status-row{grid-template-columns:1fr}
  .definition,.risk-strip,.pillars,.comparison,.flow{grid-template-columns:1fr}
  article h2{margin-top:70px}
  .alesa-intro,.testimony,.quote,.cta,.solve{padding:24px}
  .testimony-head{align-items:flex-start;flex-direction:column}
  .footer-inner{flex-direction:column}
}
/* Skrin sangat kecil (iPhone SE dsb): brand jurnal panjang, kecilkan lagi */
@media (max-width:380px){
  .brand{font-size:.82rem;gap:7px}
  .brand-mark{width:26px;height:26px}
  .nav-cta{padding:8px 12px;font-size:.79rem}
}
@media print{
  body{background:#fff;color:#111}
  body::before,.nav,.progress,.hero-visual,.toc,.actions{display:none!important}
  .hero{min-height:auto;display:block}
  .shell,.main-grid{max-width:none;display:block}
  p,article ul,.references ol{color:#333}
  h1,h2,h3,strong{color:#111}
  .quote,.def-card,.risk,.alesa-intro,.pillar,.compare-card,.testimony,details,.cta{background:#fff;color:#111;box-shadow:none;border-color:#bbb}
  .gradient{color:#111;-webkit-text-fill-color:#111}
}

/* ═══════════════════════════════════════════════════════════════════════
   JURNAL TERANG — PALET DISONGSANGKAN (bukan palet baharu)
   ═══════════════════════════════════════════════════════════════════════
   Nasihat kawan designer Brofiq: banyakkan putih di jurnal, ia paksa orang
   baca dengan lancar. Betul — teks nipis terang atas latar gelap hasilkan
   HALATION (huruf berkabus), lagi teruk untuk astigmatism.

   TETAPI kita TIDAK tukar ke putih lain. Dua warna yang sama, TUKAR TUGAS:
     latar #0c0710 -> teks   ·   teks #f6f1ee -> latar   ·   aksen kekal
   Jadi ia nampak serta-merta laman yang sama, dibalikkan dengan SENGAJA.

   Yang KEKAL GELAP dengan niat:
     .nav      -> menandakan peralihan itu disengajakan, bukan tersasar
     .terminal / .hero-visual -> terminal memang gelap; itu artifak produk.
     Kesannya: laman terang + artifak gelap = corak pemenang kategori tech.

   ⚠️ KONTRAS: --accent #fb6a3c hanya 2.59:1 atas #f6f1ee — GAGAL walaupun
   ambang grafik 3:1. Sebab itu ada varian *-ink untuk teks kecil dan garis
   bermakna. Jangan guna --accent untuk teks kecil di sini.
   Disahkan: teks 17.78 · muted 8.97 · muted-2 5.11 · ink 5.31 · amber-ink 6.33
   ═══════════════════════════════════════════════════════════════════════ */
body.jr{
  --bg:#f6f1ee; --bg-2:#efe7e2;
  --panel:rgba(255,255,255,.72); --panel-solid:#fff;
  --line:rgba(12,7,16,.13);
  --text:#0c0710; --muted:#4a3f45; --muted-2:#6f636a;
  --accent-ink:#b03d17;            /* oren untuk TEKS kecil + garis bermakna */
  --amber-ink:#92400e;
  --green:#047857; --danger:#be123c;
  --shadow:0 18px 50px rgba(12,7,16,.10);

  color:var(--text);
  /* Gradient gelap dibuang; ganti sapuan hangat yang sangat halus sahaja. */
  background:
    radial-gradient(circle at 14% 4%, rgba(251,106,60,.07), transparent 30rem),
    radial-gradient(circle at 88% 18%, rgba(245,158,11,.05), transparent 26rem),
    var(--bg);
}
/* Grid tekstur: garis PUTIH tak nampak atas latar terang. Tukar ke gelap. */
body.jr::before{
  opacity:.5;
  background-image:
    linear-gradient(rgba(12,7,16,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(12,7,16,.05) 1px, transparent 1px);
}

/* ── TUAS BACAAN SEBENAR (lebih besar kesannya dari warna latar) ──
   1. Panjang baris 60-75 aksara  ← nombor satu
   2. line-height 1.6-1.75        ← body sudah 1.72, dikekalkan
   3. Saiz body 18-19px           ← artikel bukan UI                     */
body.jr{line-height:1.72}
body.jr p{color:#3b3238;font-size:1.15rem}          /* ~18.4px */
body.jr article p,
body.jr article li{max-width:68ch}                   /* ≈68 aksara */
body.jr article li{font-size:1.09rem}
body.jr strong{color:#0c0710}
body.jr .lede{color:#413740;font-size:clamp(1.14rem,1.6vw,1.34rem);max-width:60ch}

/* Tajuk: kekalkan tracking ketat, tetapi JANGAN bawa lh poster (~0.99)
   Trionn masuk sini. Bacaan panjang perlukan lh yang longgar. */
body.jr h1,body.jr h2,body.jr h3,body.jr h4{color:#0c0710;line-height:1.14}
body.jr .intro-drop::first-letter{color:var(--accent-ink)}
body.jr .sources-inline,body.jr .references ol{color:var(--muted-2)}

/* ── NAV & FOOTER kekal gelap: peralihan yang disengajakan ── */
body.jr .nav{background:rgba(12,7,16,.86);border-bottom-color:rgba(255,255,255,.10)}
body.jr .nav .brand{color:#f6f1ee}
body.jr .nav-links a{color:#c3b3ad}
body.jr .nav-links a:hover{color:#fff}
body.jr .footer-inner{color:#8a7a78}
body.jr footer,body.jr .site-foot{background:#0c0710;border-top-color:rgba(255,255,255,.10)}

/* ── TERMINAL & PANEL PRODUK kekal GELAP: itu artifaknya ── */
body.jr .terminal{background:#0b0610;border-color:rgba(255,255,255,.14);color:#c8c3d6}
body.jr .hero-visual{border-color:rgba(12,7,16,.16)}
body.jr .window-title{color:#8a7a78}

/* ── Kad & permukaan: rgba(255,255,255,.03x) halimunan atas latar terang ── */
body.jr .def-card,body.jr .risk,body.jr .pillar,body.jr .compare-card,
body.jr .metric,body.jr .status,body.jr .belt-card,body.jr .local-principles span{
  background:#fff;border-color:rgba(12,7,16,.11);box-shadow:0 2px 10px rgba(12,7,16,.05)}
body.jr .toc{background:rgba(255,255,255,.86);border-color:rgba(12,7,16,.11)}
body.jr .toc b{color:#0c0710}
body.jr .toc li{color:var(--muted-2)}
body.jr .toc a:hover{color:var(--accent-ink)}

/* ── Petikan & callout: garis BERMAKNA, jadi guna varian ink ── */
body.jr .quote{background:linear-gradient(135deg,rgba(251,106,60,.10),rgba(245,158,11,.05));
  border-color:rgba(176,61,23,.34);box-shadow:0 8px 26px rgba(12,7,16,.06)}
body.jr .quote .big{color:#0c0710}
body.jr .plain-callout{border-left-color:var(--amber-ink)}
body.jr .qa-fix{border-left-color:var(--accent-ink)}
body.jr .alesa-intro{background:linear-gradient(135deg,rgba(251,106,60,.12),rgba(245,158,11,.05));
  border-color:rgba(176,61,23,.30)}
body.jr .alesa-label{background:rgba(12,7,16,.06);color:var(--accent-ink)}
body.jr .alesa-intro h3{color:#0c0710}
body.jr .testimony-tag{color:var(--amber-ink);background:rgba(245,158,11,.12);border-color:rgba(176,61,23,.22)}
body.jr .testimony blockquote{color:#2b2429}
body.jr .disclosure{color:var(--muted-2)}
body.jr summary::after{color:var(--accent-ink)}
body.jr .kick,body.jr .section-head .kick{color:var(--accent-ink)}
body.jr .section-head p{color:var(--muted)}
body.jr .flow-step .n{background:#fff;border-color:rgba(176,61,23,.40);color:#0c0710}
body.jr .eyebrow{color:var(--accent-ink);border-color:rgba(176,61,23,.30);background:rgba(251,106,60,.09)}
body.jr .avatar{color:#fff}
body.jr .meta{color:var(--muted-2)}
body.jr .crumb{color:var(--muted-2)}

/* CTA kekal band berwarna penuh (teks putih atasnya, kontras sendiri OK) */
body.jr .cta h2,body.jr .cta p{color:#fff}

/* Bar kemajuan atas latar terang perlu lagi gelap supaya nampak */
body.jr .progress{background:linear-gradient(90deg,var(--amber-ink),var(--accent-ink));
  box-shadow:0 0 12px rgba(176,61,23,.5)}

/* ── PEMBETULAN KONTRAS: teks CERAH yang jadi HALIMUNAN atas latar terang ──
   Dijumpai selepas ujian visual pada deploy pertama tema terang. Yang paling
   parah: `.gradient` bermula dengan `#fff 5%`, jadi separuh h1 artikel benar-
   benar hilang. Ia dipakai 10 kali merentas 7 halaman jurnal.
   Semua hentian gradient baharu disahkan >=3:1 atas #f6f1ee (teks besar):
   0c0710=17.78 · 9a3412=6.52 · b03d17=5.31 · be123c=5.61                    */
body.jr .gradient{
  background:linear-gradient(96deg,#0c0710 2%,#9a3412 34%,#b03d17 64%,#be123c);
  -webkit-background-clip:text;background-clip:text;color:transparent}
body.jr .author-chip{color:#3b3238}
body.jr .sources-inline a{color:var(--accent-ink)}
body.jr .def-card .icon{background:rgba(176,61,23,.12);color:var(--accent-ink)}
/* Tanda air "A" gergasi: putih .025 tak nampak atas latar terang */
body.jr .alesa-intro::after{color:rgba(12,7,16,.035)}
body.jr .references h2{color:#0c0710}
body.jr .risk p,body.jr .def-card p,body.jr .compare-card li,
body.jr .pillar ul,body.jr .metric small,body.jr .status small{color:#4a3f45}

/* ── PUSINGAN 2 PEMBETULAN KONTRAS JURNAL ─────────────────────────────────
   Dijumpai oleh audit automatik merentas KESEMUA 6 halaman jurnal (bukan
   satu artikel sahaja, yang menyebabkan pusingan pertama terlepas hub).
   Setiap satu di bawah 4.5:1 atas #f6f1ee; yang paling parah 1.03:1.

   🔴 KESILAPAN ASAS PUSINGAN 1: `body.jr strong{...}` ditulis, tetapi
   <b> BUKAN <strong>. Dua elemen berbeza, jadi semua <b> putih terlepas.  */

/* summary FAQ — #f4ede9 = 1.03:1, hampir halimunan (4 per artikel × 6) */
body.jr summary{color:#0c0710}
body.jr details{border-color:rgba(12,7,16,.11)}

/* <b> DAN <strong> — punca "Sir Rosli Abdullah" kekal putih (1.12:1) */
body.jr b,body.jr strong{color:#0c0710}

/* Link rujukan & footer dalam kandungan — #fdba74 = 1.5:1 */
body.jr .references a,
body.jr .card .cat,
body.jr .section-head.big .kick,
body.jr .pillar:last-child .pillar-icon{color:var(--accent-ink)}

/* Chip & badge hijau/oren muda — 1.14:1 dan 1.5:1 */
body.jr .featured .badge{background:rgba(4,120,87,.12);color:#047857}
body.jr .pill{color:var(--accent-ink);border-color:rgba(176,61,23,.30);
  background:rgba(251,106,60,.09)}
body.jr .card.feat .pill{color:#0a0c16}   /* ini atas gradient terang, kekal */

/* Senarai prinsip & petikan kad — #d9d4e6 = 1.29:1, #e2ddf1 = 1.18:1 */
body.jr .local-principles span,
body.jr .card.feat p,
body.jr .card p{color:#3b3238}

/* Jaring keselamatan: mana-mana span dalam kandungan yang masih mewarisi
   warna teks gelap-tema. Tidak menyentuh nav/footer/terminal (kekal gelap). */
body.jr article span:not([class]),
body.jr .card span:not([class]){color:inherit}