@font-face{font-family:'Anton';font-style:normal;font-weight:400;font-display:swap;src:url(/Assets/anton.woff2) format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;src:url(/Assets/space-grotesk.woff2) format('woff2')}
/* ---------- site bar: the three A.I. Boleh sites, one tap away on every page ----------
   Zharif, 16 Oct: "on the menu tab pls add Main Page, Video Studio and Virtual Office, so that people know where to
   click back to the video studio / main page when they explore the sub pages". It sits above the menu row, stays
   visible while scrolling, and lights up the site you are in. Colours come from the page (--sb-* hooks).
   Also here: the mobile Menu button + drop-down (Video Studio and its sub-pages). */
.nav .sitebar{position:relative;z-index:2;border-bottom:1px solid var(--line);background:var(--sb-bg,rgba(0,0,0,.42));backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.nav .sitebar>.wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;height:36px}
.nav .sites{display:flex;align-items:center;gap:2px;margin:0 0 0 -11px;font:600 12.5px/1 var(--sans);letter-spacing:.02em;color:var(--ink3)}
.nav .sites a{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border-radius:999px;color:var(--ink3);white-space:nowrap;transition:color .3s,background .3s,box-shadow .3s}
.nav .sites a:hover{color:var(--ink);background:rgba(255,255,255,.06)}
.nav .sites a.on{color:var(--ink);background:var(--sb-on,rgba(255,255,255,.09));box-shadow:inset 0 0 0 1px var(--sb-ring,rgba(255,255,255,.16))}
.nav .sites a.on::before{content:"";width:6px;height:6px;border-radius:50%;flex:none;background:var(--sb-dot,var(--ink));box-shadow:0 0 10px var(--sb-dot,var(--ink))}
.nav .sb-x{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink3);white-space:nowrap}
.nav .sb-x a{color:var(--sb-link,var(--ink));font-weight:600}
@media(max-width:900px){.nav .sb-x{display:none}.nav .sitebar>.wrap{justify-content:center}.nav .sites{margin:0}}
@media(max-width:480px){.nav .sites{font-size:11.5px}.nav .sites a{padding:0 7px;gap:5px}}@media(max-width:390px){.nav .sites{font-size:11px;max-width:100%;overflow-x:auto;scrollbar-width:none}.nav .sites::-webkit-scrollbar{display:none}.nav .sites a{padding:0 6px}}
@media(max-width:340px){.nav .sites a.on::before{display:none}.nav .sites a{padding:0 6px}}

.menu-btn{display:none;align-items:center;gap:9px;height:42px;padding:0 15px;border-radius:999px;border:1px solid var(--line2);background:rgba(255,255,255,.04);font:700 12px/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);cursor:pointer}
.menu-btn i{position:relative;display:block;width:16px;height:10px;flex:none}
.menu-btn i::before,.menu-btn i::after{content:"";position:absolute;left:0;right:0;height:2px;border-radius:2px;background:currentColor;transition:transform .45s var(--expo,ease),top .45s var(--expo,ease)}
.menu-btn i::before{top:0}.menu-btn i::after{top:8px}
.menu-btn[aria-expanded="true"] i::before{top:4px;transform:rotate(45deg)}
.menu-btn[aria-expanded="true"] i::after{top:4px;transform:rotate(-45deg)}
.mmenu{display:grid;padding:6px clamp(16px,3vw,32px) 18px;background:rgba(10,9,8,.97);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--line);max-height:calc(100svh - 110px);overflow:auto}
.mmenu a{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 2px;border-bottom:1px solid var(--line);font:600 17px/1.2 var(--sans);color:var(--ink)}
.mmenu a::after{content:"\2192";color:var(--accent,#FF7A2E)}
.mmenu a.on{color:var(--gold,#FFC04D)}
.mmenu a.buy{margin-top:12px;justify-content:center;border:0;border-radius:999px;min-height:52px;background:linear-gradient(180deg,#FF9248,#FF6B1A);color:#1A0A02;font-size:14px;letter-spacing:.06em;text-transform:uppercase}
.mmenu a.buy::after{content:none}
@media(max-width:900px){.menu-btn{display:inline-flex}}
@media(max-width:400px){.menu-btn{padding:0 12px}.menu-btn b{display:none}}
@media(min-width:901px){.mmenu{display:none!important}}

/* BM/EN: show one language. Toggle order is BM | EN. Pages set --lang-* to match their theme. */
html[data-lang="en"] [lang="ms"],html[data-lang="ms"] [lang="en"]{display:none!important}
.lang{position:relative;display:inline-grid;grid-template-columns:1fr 1fr;align-items:center;padding:3px;border-radius:999px;border:1px solid var(--lang-line,rgba(255,255,255,.16));background:var(--lang-bg,rgba(255,255,255,.05));flex:none;isolation:isolate}
.lang::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc(50% - 3px);border-radius:999px;background:var(--lang-knob,#fff);box-shadow:0 4px 14px -4px var(--lang-glow,rgba(0,0,0,.5));transition:transform .5s cubic-bezier(.16,1,.3,1)}
.lang[data-on="en"]::before{transform:translateX(100%)}
.lang button{position:relative;min-width:38px;min-height:34px;padding:0 9px;border:0;border-radius:999px;background:none;font:700 11px/1 var(--lang-font,inherit);letter-spacing:.14em;color:var(--lang-ink,rgba(255,255,255,.72));cursor:pointer;transition:color .3s}
.lang button[aria-pressed="true"]{color:var(--lang-on,#111)}
.lang button:hover{color:var(--lang-hover,#fff)}.lang button[aria-pressed="true"]:hover{color:var(--lang-on,#111)}
.lang button:focus-visible{outline:2px solid var(--lang-focus,currentColor);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.lang::before{transition:none}}

/* =====================================================================
   A.I. Boleh sub-pages (Mula, Tips, Belajar, Kerja, Kamus, Beli, About ...) in the Video Studio design, 16 Oct 2026.
   Zharif: "revamp the other sub link in the video studio site to the new design as well".
   Same tokens, header, buttons, clapper scene tags, newsletter panel and footer as aiboleh.ai/video/.
   Old variable names stay as aliases so the page CSS that still uses them (/beli/ and friends) keeps working.
   ===================================================================== */
:root{
  --bg:#0A0908; --bg2:#100E0C; --bg3:#151210; --bg4:#1E1916;
  --ink:#F4EDE4; --ink2:#D6CCC1; --ink3:#A2968B; --ink4:#7A6F66;
  --line:rgba(255,255,255,.08); --line2:rgba(255,255,255,.14);
  --flame:#FF6B1A; --accent:#FF7A2E; --gold:#FFC04D; --gold2:#FFB42A; --ember:#E23A0E; --verdant:#2FBF71; --red:#FF3B30;
  --grad:linear-gradient(100deg,#FFC04D 0%,#FF7A2E 48%,#E23A0E 100%);
  --display:"Anton","Bebas Neue",Impact,"Arial Narrow",sans-serif; --sans:"Space Grotesk",system-ui,"Segoe UI",sans-serif; --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
  --ease:cubic-bezier(.22,1,.36,1); --expo:cubic-bezier(.16,1,.3,1);
  --hdr:105px;
  /* old names, used by the /beli/ page CSS and older content */
  --ink-2:var(--ink2); --ink-3:var(--ink3); --ink-4:var(--ink4); --line-2:var(--line2); --hairline:var(--line2);
  --paper:var(--bg); --paper-2:var(--bg3); --paper-3:var(--bg4); --accent-2:var(--flame); --gold-ink:var(--gold);
  --color-flame:var(--flame); --color-gold:var(--gold); --color-verdant:var(--verdant); --color-bone:var(--ink); --color-smoke:var(--ink3);
  --font-display:var(--display); --font-body:var(--sans); --radius-pill:999px; --max:1240px;
  --shadow:0 22px 50px -28px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.04);
  --code-bg:#100E0C; --code-fg:#EFE6DA;
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{margin:0}
html{overflow-x:clip;scroll-padding-top:calc(var(--hdr) + 18px)}
body{background:var(--bg);color:var(--ink2);font:400 16px/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
body.hub{background:radial-gradient(1100px 600px at 10% -12%,rgba(255,107,26,.17),transparent 62%),radial-gradient(800px 420px at 100% 2%,rgba(255,180,42,.08),transparent 60%),var(--bg);background-repeat:no-repeat}
/* fine film grain, like the Studio's screening room (static image, no animation) */
body.hub::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img,video{max-width:100%}
[hidden]{display:none!important}
::selection{background:rgba(255,107,26,.35)}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:8px}
.wrap{max-width:1240px;margin:0 auto;padding-inline:clamp(16px,3vw,32px)}
h1,h2{font-weight:400}
body.hub .buy-card h1{font-size:clamp(36px,5.4vw,58px);line-height:.98;margin:18px 0 12px}
body.hub .bsec h2{font-size:clamp(30px,4.4vw,46px);line-height:1;margin:16px 0 10px}
body.hub .buy-amt{font-size:clamp(56px,7vw,76px)}
.g{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ---------- buttons (Studio pills) ---------- */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 26px;border:0;border-radius:999px;font:700 14px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:box-shadow .4s var(--ease),background .3s,transform .25s var(--ease)}
.btn.pri,.btn-primary{background:linear-gradient(180deg,#FF9248,#FF6B1A);color:#1A0A02;box-shadow:0 0 28px rgba(255,107,26,.38),inset 0 1px 0 rgba(255,255,255,.35)}
.btn.pri:hover,.btn-primary:hover{box-shadow:0 0 44px rgba(255,107,26,.6),inset 0 1px 0 rgba(255,255,255,.35);transform:translateY(-1px)}
.btn.ghost,.btn-ghost{border:1px solid var(--line2);background:rgba(255,255,255,.04);color:var(--ink)}
.btn.ghost:hover,.btn-ghost:hover{background:rgba(255,255,255,.09)}
.btn-block{width:100%}
.btn[disabled]{opacity:.7;cursor:wait}

/* ---------- header (same as /video/) ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .5s,border-color .5s;border-bottom:1px solid transparent;
  background:linear-gradient(180deg,rgba(10,9,8,.85),rgba(10,9,8,.45) 75%,rgba(10,9,8,0));
  --sb-bg:linear-gradient(90deg,rgba(255,107,26,.16),rgba(255,192,77,.12),rgba(255,107,26,.16));--sb-on:rgba(255,107,26,.18);--sb-ring:rgba(255,140,60,.5);--sb-dot:var(--flame);--sb-link:var(--gold)}
.nav.solid,.nav.menu-open{background:rgba(10,9,8,.86);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);border-color:var(--line)}
.nav>.wrap{display:flex;align-items:center;gap:26px;height:68px}
.brand{display:flex;align-items:center;gap:10px}
.brand .mark{position:relative;display:block;width:86px;height:48px;flex:none}
.brand .mark img,.brand .mark canvas{position:absolute;inset:-6px -12px;width:calc(100% + 24px);height:calc(100% + 12px)}
.brand .mark img{object-fit:contain;padding:6px 12px;transition:opacity .4s}
.brand .mark canvas{opacity:0;transition:opacity .6s;touch-action:pan-y;cursor:pointer}
.brand .mark canvas.ready{opacity:1}
.brand .mark:has(canvas.ready) img{opacity:0}
.brand .tag{font:600 11px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--ink3)}
.nav nav.main{margin-left:auto;display:flex;align-items:center;gap:22px;font-size:14px;color:var(--ink2)}
.nav nav.main a.l{position:relative;padding:6px 0}
.nav nav.main a.l::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--grad);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.nav nav.main a.l:hover{color:var(--ink)}.nav nav.main a.l:hover::after,.nav nav.main a.l.on::after{transform:scaleX(1);transform-origin:left}
.nav nav.main a.l.on{color:var(--ink)}
.nav .btn{min-height:42px;padding:0 18px;font-size:12px}
.nav .np{display:inline-block;white-space:pre}
.nav .lang{--lang-knob:var(--grad);--lang-on:#1A0A02;--lang-ink:var(--ink2);--lang-hover:var(--ink);--lang-line:var(--line2);--lang-bg:rgba(255,255,255,.04);--lang-glow:rgba(255,107,26,.6);--lang-font:var(--sans)}
@media(max-width:900px){.nav nav.main a.l,.brand .tag{display:none}.nav nav.main{gap:10px}}
@media(max-width:560px){.brand .mark{width:70px;height:40px}.nav .np{display:none}.nav .btn{padding:0 14px}}
@media(max-width:430px){.nav nav.main>.btn.pri{display:none}}   /* phones: Buy sits in the Menu; room for BM/EN */

/* reading progress */
.readbar{position:fixed;z-index:70;left:0;top:0;height:3px;width:0;background:var(--grad);box-shadow:0 0 12px rgba(255,107,26,.6);transition:width .1s linear}

/* ---------- page frame ---------- */
.hub-main{max-width:1240px;margin:0 auto;padding:calc(var(--hdr) + clamp(26px,4vw,52px)) clamp(16px,3vw,32px) 40px}
.hub-narrow{max-width:780px;margin:0 auto}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font:600 11.5px/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink4);margin:0 0 26px}
.crumbs a{color:var(--ink3);transition:color .3s}
.crumbs a:hover{color:var(--gold)}
.crumbs span{margin:0 10px;color:var(--flame);opacity:.8}
/* clapperboard scene tag (the Studio's section label) */
.section-eyebrow{position:relative;display:inline-flex;align-items:center;min-height:30px;padding:0 12px 0 38px;border:1px solid var(--line2);border-radius:8px;overflow:hidden;background:var(--bg4);font:700 11px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.section-eyebrow::before{content:"";position:absolute;left:0;top:0;bottom:0;width:26px;background:repeating-linear-gradient(-45deg,#F4EDE4 0 7px,#0A0908 7px 14px)}
.hub-title{font:400 clamp(42px,6.2vw,92px)/.95 var(--display);text-transform:uppercase;letter-spacing:.01em;margin:20px 0 16px;color:var(--ink);text-wrap:balance}
.hub-narrow .hub-title{font-size:clamp(36px,5vw,64px)}
.hub-desc{color:var(--ink2);font-size:clamp(16px,1.3vw,18.5px);line-height:1.65;max-width:62ch;margin:0 0 18px}
.hub-desc b{color:var(--gold)}
.hub-desc a{color:var(--gold);text-decoration:underline;text-underline-offset:3px}
.meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin:0 0 30px;font:500 12.5px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink4)}
.meta b{color:var(--ink3);font-weight:600}
.tag-row{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 0}
.tag-pill{font-size:12.5px;letter-spacing:.04em;padding:6px 13px;border:1px solid var(--line2);border-radius:999px;color:var(--ink3);background:rgba(255,255,255,.03);transition:border-color .3s,color .3s,background .3s}
.tag-pill:hover{border-color:rgba(255,140,60,.6);color:var(--gold);background:rgba(255,107,26,.08)}

/* index hero: a camera viewfinder (corner marks + REC), like the Studio's first scene */
.sec-hero{position:relative;padding:clamp(40px,6vw,76px) clamp(20px,5vw,64px) clamp(34px,5vw,60px);margin:0 0 10px;border-radius:26px;border:1px solid var(--line);overflow:hidden;isolation:isolate;
  background:radial-gradient(70% 120% at 0% 0%,rgba(255,107,26,.16),transparent 62%),radial-gradient(60% 90% at 100% 100%,rgba(255,192,77,.07),transparent 70%),rgba(16,14,12,.72)}
.sec-hero::before{content:"";position:absolute;inset:16px;z-index:-1;pointer-events:none;opacity:.6;background:
  linear-gradient(var(--ink),var(--ink)) top left/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) top left/2px 30px no-repeat,
  linear-gradient(var(--ink),var(--ink)) top right/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) top right/2px 30px no-repeat,
  linear-gradient(var(--ink),var(--ink)) bottom left/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom left/2px 30px no-repeat,
  linear-gradient(var(--ink),var(--ink)) bottom right/30px 2px no-repeat,linear-gradient(var(--ink),var(--ink)) bottom right/2px 30px no-repeat}
.sec-hero::after{content:"REC";position:absolute;top:30px;right:40px;padding-left:16px;font:600 11px/1 var(--mono);letter-spacing:.1em;color:var(--ink3);
  background:radial-gradient(circle at 5px 50%,var(--red) 0 4px,transparent 4.5px) no-repeat;animation:recblink 1.4s steps(2,start) infinite}
@keyframes recblink{50%{background-size:0 0}}
.sec-hero .hub-desc{margin-bottom:6px}
.sec-hero .hub-desc+.hub-desc{margin-top:10px}

/* ---------- article ---------- */
.article-card,.term-card{position:relative;border:1px solid var(--line);border-radius:24px;padding:clamp(22px,3.8vw,48px);background:linear-gradient(180deg,#171310 0%,#110E0C 100%);box-shadow:var(--shadow)}
.article-card::before,.term-card::before{content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,140,60,.7),transparent)}
.prose{color:var(--ink2);font-size:17.5px;line-height:1.8}
.prose>*+*{margin-top:1.15em}
.prose>:first-child{margin-top:0}
.prose h2{font:400 clamp(28px,3.4vw,40px)/1.02 var(--display);text-transform:uppercase;letter-spacing:.01em;color:var(--ink);margin-top:1.7em;padding-top:.95em;border-top:1px solid var(--line)}
.prose h3{font:700 20.5px/1.3 var(--sans);text-transform:none;color:var(--ink);margin-top:1.8em}
.prose h4{font:700 17.5px/1.4 var(--sans);color:var(--ink)}
.prose p strong,.prose li strong{color:var(--ink)}
.prose a{color:var(--gold);text-decoration:underline;text-decoration-color:rgba(255,192,77,.45);text-underline-offset:3px}
.prose a:hover{color:var(--accent);text-decoration-color:var(--accent)}
.prose ul,.prose ol{padding-left:1.4em}
.prose li+li{margin-top:.5em}
.prose li::marker{color:var(--accent)}
.prose blockquote{margin:1.4em 0;padding:14px 20px;border-left:3px solid var(--flame);border-radius:0 14px 14px 0;background:rgba(255,107,26,.09);color:var(--ink)}
.prose code{font-family:var(--mono);font-size:.9em;background:var(--bg4);padding:2px 6px;border-radius:6px;color:#FFD9B8}
.prose img{max-width:100%;height:auto;border-radius:16px;border:1px solid var(--line)}
.prose table{width:100%;border-collapse:collapse;font-size:15.5px;display:block;overflow-x:auto;background:var(--bg3);border:1px solid var(--line);border-radius:14px}
.prose th,.prose td{border-bottom:1px solid var(--line);padding:11px 14px;text-align:left;vertical-align:top}
@media (max-width:480px){.prose table{font-size:14px}.prose th,.prose td{padding:9px 8px}.prose th{letter-spacing:.04em}}
.prose tr:last-child td{border-bottom:0}
.prose th{color:var(--ink);font-weight:700;font-size:12px;letter-spacing:.1em;text-transform:uppercase;background:var(--bg4)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2.2em 0}
.prose .callout{border:1px solid rgba(255,180,42,.38);background:rgba(255,180,42,.09);border-radius:16px;padding:15px 19px;color:var(--ink)}
.prose .callout b{color:var(--gold)}
/* prompt boxes: a monitor bar with the copy button above the text */
.codebox{margin:1.3em 0;border-radius:16px;overflow:hidden;border:1px solid var(--line2);background:var(--code-bg);box-shadow:0 10px 30px -14px rgba(0,0,0,.8)}
.codebar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 10px 8px 14px;background:#1E1916;border-bottom:1px solid rgba(255,255,255,.07)}
.codebar>span{display:inline-flex;align-items:center;gap:8px;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#A89A8C}
.codebar>span::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--red);box-shadow:0 0 8px var(--red)}
.copy-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#F3EADF;font:700 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s}
.copy-btn:hover{background:rgba(255,122,46,.25);border-color:rgba(255,122,46,.6)}
.copy-btn.ok{background:var(--verdant);border-color:var(--verdant);color:#06130b}
.codebox pre,.prose pre{margin:0;background:var(--code-bg);color:var(--code-fg);padding:16px 18px;overflow-x:auto;font:14.5px/1.6 var(--mono);white-space:pre-wrap;word-break:break-word;border:0;border-radius:0}
.codebox pre code,.prose pre code{background:none;padding:0;color:inherit;font-size:inherit}

/* ---------- index cards: numbered like film slates ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:30px;counter-reset:take}
.card,.kterm,.radar-card{position:relative;display:flex;flex-direction:column;color:inherit;border:1px solid var(--line2);border-radius:20px;background:linear-gradient(180deg,#181411 0%,#110E0C 100%);box-shadow:var(--shadow);overflow:hidden;isolation:isolate;transition:transform .55s var(--expo),border-color .4s,box-shadow .55s var(--expo)}
.card::after,.kterm::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .4s;background:radial-gradient(360px 220px at var(--mx,50%) var(--my,0%),rgba(255,107,26,.17),transparent 70%)}
.card:hover,.kterm:hover{transform:translateY(-4px);border-color:rgba(255,140,60,.55);box-shadow:0 26px 60px -30px rgba(255,107,26,.5)}
.card:hover::after,.kterm:hover::after{opacity:1}
.card{padding:24px 24px 20px;counter-increment:take}
.card::before{content:counter(take,decimal-leading-zero);position:absolute;top:16px;right:20px;font:400 34px/1 var(--display);color:rgba(244,237,228,.1);transition:color .4s}
.card:hover::before{color:rgba(255,192,77,.6)}
.card .ce{font:700 11px/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent);padding-right:56px}
.card h3{font:600 20px/1.3 var(--sans);text-transform:none;letter-spacing:-.01em;color:var(--ink);margin:12px 0 8px}
.card p{color:var(--ink3);font-size:15px;line-height:1.55;margin:0}
.card .cm{margin-top:auto;padding-top:16px;font:500 12px/1.4 var(--mono);letter-spacing:.02em;color:var(--ink4)}

/* ---------- kamus ---------- */
.kamus-az{display:flex;flex-wrap:wrap;gap:6px;margin:24px 0 10px;position:sticky;top:var(--hdr);z-index:5;padding:10px 0;background:linear-gradient(var(--bg) 72%,rgba(10,9,8,0))}
.kamus-az a{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line2);border-radius:10px;color:var(--ink3);font:400 17px/1 var(--display);background:var(--bg3);transition:border-color .3s,color .3s,background .3s}
.kamus-az a:hover{border-color:rgba(255,140,60,.6);color:var(--gold);background:rgba(255,107,26,.1)}
.kamus-letter{display:flex;align-items:center;gap:14px;font:400 44px/1 var(--display);color:transparent;background:var(--grad);-webkit-background-clip:text;background-clip:text;margin:44px 0 16px;scroll-margin-top:var(--kamus-anchor,170px)}
.kamus-letter::after{content:"";flex:1;height:1px;background:var(--line)}
.kamus-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.kterm{gap:6px;padding:20px 20px 18px}
.kterm b{font-size:18px;font-weight:700;color:var(--ink);line-height:1.25}
.kterm small{font:500 12px/1.3 var(--mono);color:var(--ink4);letter-spacing:.02em}
.kterm p{margin:4px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink3)}
.kterm em{font-style:normal;font:700 12px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-top:8px}
.term-en{font:500 13px/1.4 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:var(--ink4);margin:-4px 0 24px}
.term-en b{color:var(--gold)}

/* ---------- AI Boleh Radar ---------- */
.radar{margin:22px 0 36px}
.radar-head .hub-desc{margin-top:12px!important}
.radar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;margin-top:20px}
.radar-card{padding:20px 20px 18px;gap:9px}
.radar-card .ce{font:700 11px/1.35 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.radar-card h3{font:600 18.5px/1.3 var(--sans);color:var(--ink);margin:0;text-transform:none}
.radar-card p{color:var(--ink2);font-size:15px;line-height:1.6;margin:0}
.radar-card .radar-why{font-size:14px;color:var(--ink2);border-left:2px solid var(--flame);padding-left:10px}
.radar-card .radar-why b{color:var(--gold);font-weight:700}
.radar-card .radar-src{margin-top:auto;padding-top:8px;font-size:13.5px;font-weight:700;color:var(--accent)}
.radar-empty{color:var(--ink4);font-size:15px}

/* ---------- newsletter (the Studio's panel) ---------- */
.nl-box{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(22px,4vw,56px);align-items:center;margin:clamp(56px,8vw,96px) 0 0;padding:clamp(26px,4vw,52px);border-radius:28px;border:1px solid rgba(255,140,60,.3);background:radial-gradient(70% 90% at 0% 0%,rgba(255,107,26,.16),transparent 70%),var(--bg3)}
.nl-box h3{font:400 clamp(34px,4vw,56px)/.98 var(--display);text-transform:uppercase;margin:14px 0 12px;color:var(--ink)}
.nl-box p{color:var(--ink2);margin:0;font-size:15.5px;max-width:52ch}
.nl-form{display:flex;gap:10px;flex-wrap:wrap}
.nl-form input{flex:1 1 220px;min-height:54px;padding:0 20px;border-radius:999px;border:1px solid var(--line2);background:rgba(10,9,8,.7);color:var(--ink);font:400 16px var(--sans)}
.nl-form input:focus{outline:none;border-color:rgba(255,140,60,.7);box-shadow:0 0 0 4px rgba(255,107,26,.15)}
.nl-form .btn{min-height:54px;white-space:nowrap}
.nl-ok{color:var(--verdant)!important;font-weight:600;margin:12px 0 0!important;display:none}
.nl-err{color:#FF8A70!important;font-size:13.5px!important;margin:10px 0 0!important;display:none}
.nl-fine{font-size:12.5px!important;color:var(--ink4)!important;margin:12px 0 0!important}
@media(max-width:860px){.nl-box{grid-template-columns:1fr}}

/* ---------- related ---------- */
.related{margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.related h4{margin:0 0 14px;font:700 11.5px/1 var(--sans);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}

/* ---------- footer (same as /video/) ---------- */
footer{position:relative;margin-top:clamp(96px,11vw,160px);padding-top:56px;border-top:1px solid var(--line);overflow:hidden}
.fgrid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:28px}
.fgrid h4{margin:0 0 12px;font:700 11.5px/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--ink3)}
.fgrid a{display:block;color:var(--ink2);font-size:14.5px;padding:4px 0;transition:color .3s}
.fgrid a:hover{color:var(--ink)}
.fgrid .fbrand{display:inline-block;margin-bottom:14px}
.fgrid .fbrand img{width:110px;display:block}
.fgrid .fsoc{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
.fgrid .fsoc a{display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:12px;border:1px solid var(--line2);background:rgba(255,255,255,.03);color:var(--ink3);transition:color .3s,border-color .3s,background .3s}
.fgrid .fsoc a:hover{color:var(--gold);border-color:rgba(255,140,60,.6);background:rgba(255,107,26,.08)}
.fgrid .fsoc svg{width:18px;height:18px;fill:currentColor}
.fgrid .fnote{margin:0;max-width:34ch;color:var(--ink3);font-size:14px;line-height:1.6}
.legal{margin-top:28px;font-size:12.5px;color:var(--ink4);line-height:1.7}
.giant{font:400 clamp(60px,11.5vw,190px)/.86 var(--display);text-transform:uppercase;letter-spacing:.005em;text-align:center;margin:48px 0 0;background:linear-gradient(180deg,rgba(244,237,228,.16),rgba(244,237,228,0) 95%);-webkit-background-clip:text;background-clip:text;color:transparent;user-select:none}
.giant em{font-style:normal;background:linear-gradient(180deg,rgba(255,122,46,.5),rgba(255,122,46,0) 95%);-webkit-background-clip:text;background-clip:text}
@media(max-width:820px){.fgrid{grid-template-columns:1fr}}

/* ---------- reveal on scroll (added by script; content shows without it) ---------- */
html.rv .rvx{opacity:0}
html.rv .rvx.in{animation:rvin .9s var(--expo) var(--d,0ms) both}
@keyframes rvin{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .hub-main{padding-top:calc(var(--hdr) + 22px)}
  .article-card,.term-card{padding:20px 17px 24px;border-radius:18px}
  .prose{font-size:16.5px;line-height:1.75}
  .card h3{font-size:19px}
  .sec-hero{border-radius:20px}
  .sec-hero::after{top:22px;right:26px}
  .kamus-letter{font-size:38px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}html.rv .rvx{opacity:1}}
/* Resipi nav badge (31 Oct 2026) */
.l-new{display:inline-flex!important;align-items:center;gap:6px}
.newb{display:inline-block;font:800 9px/1 var(--sans,system-ui,sans-serif);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:#1a0a02;padding:4px 6px 3px;border-radius:999px;
  background:linear-gradient(110deg,#ff6b1a 0%,#ffb347 38%,#fff3dc 50%,#ffb347 62%,#ff6b1a 100%);background-size:260% 100%;
  animation:newb-shine 2.8s linear infinite,newb-glow 2.8s ease-in-out infinite;box-shadow:0 0 0 rgba(255,120,40,0)}
.mmenu .newb{margin-left:6px;vertical-align:2px}
@keyframes newb-shine{0%{background-position:100% 0}100%{background-position:-160% 0}}
@keyframes newb-glow{0%,100%{box-shadow:0 0 0 rgba(255,120,40,0)}50%{box-shadow:0 0 14px rgba(255,120,40,.65)}}
@media (prefers-reduced-motion:reduce){.newb{animation:none}}