/* =========================================================================
   Tech Lead Malaysia — Arah I = struktur G ("Ufuk + Satu Objek") + jawapan H ("Monolith")
   Monokrom navy G: malam navy (hero/CTA/kaki), badan putih + kabus, teks ink, aksen navy tepu (terang)
   atau putih-ais (gelap). Rim light ais hanya dalam 3D. Dua fon: Instrument Sans + JetBrains Mono (H).

   Idea teras:
   1. Hero gelap dengan MONOLITH 3D sebenar (scene.js, Three.js local). Hero dipin ≤160vh (desktop + 3D sahaja).
   2. Skrol: monolith membuka jadi 4 lapisan, berpusing ke depan, kemudian SERAH: kanvas pudar + skala keluar
      (380ms) sambil objek garis G melukis diri di kedudukan + saiz yang sama (kelas `serah` pada <html>).
   3. Objek garis wujud sebagai tiga salinan `position: fixed` (hero / siang / CTA), setiap lapis ada
      `clip-path` → objek dibelah tepat di garis ufuk (teknik G, betul walaupun JS mati).
   Motion: transform/opacity sahaja, kecuali (dinamakan dalam README): morph `d`, lukis-diri
   `stroke-dashoffset`, bentuk ufuk `clip-path` ikut skrol, kabur→tajam tajuk hero (filter, 380ms).
   ========================================================================= */

@font-face {
  font-family: "Instrument Sans";
  src: url("assets/fonts/instrument-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("assets/fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
  font-weight: 100 800; font-style: normal; font-display: swap;
}

:root {
  /* malam (gelap) — G */
  --malam: #0A1020;
  --malam-2: #101A33;
  --panel: #131E3A;         /* panel padu atas terang (pulau SAKTI) */
  --ais: #EEF2F9;           /* teks + butang utama atas gelap */
  --ais-redup: #A3AFC6;     /* teks kedua atas gelap */
  --ais-garis: rgba(238, 242, 249, .14);
  --cahaya: 190 225 255;    /* rim light / halo / silau SAHAJA (H), bukan warna kandungan */
  /* siang (terang) — G */
  --kertas: #FFFFFF;
  --kabus: #F3F5F9;
  --ink: #0B1326;
  --kelabu: #4F5B74;        /* teks kedua atas terang */
  --garis: #E1E5EE;         /* garis hiasan */
  /* aksen */
  --navy: #1D3A8A;
  --navy-dalam: #152C6E;

  --sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --kepala-t: 72px;
  --gutter: clamp(20px, 5vw, 56px);
  --max: 1200px;
  --lebar: min(100vw - 2 * var(--gutter), var(--max));   /* lebar kandungan .wrap */
  --masa: 380ms;
  --lengkung: cubic-bezier(.2, .7, .2, 1);
  --p: 0;                   /* progress ufuk 0→1 (motion.js) */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--kepala-t) + 16px); background: var(--kertas); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; background: var(--kertas); color: var(--ink);
  font: 400 17px/1.62 var(--sans); letter-spacing: -0.003em;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 560; }
p, figure, blockquote, dl, dd { margin: 0; }
ol, ul { list-style: none; margin: 0; padding: 0; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.hero :focus-visible, .cta :focus-visible, .kaki :focus-visible, .sakti :focus-visible,
.kepala[data-tema="malam"] :focus-visible { outline-color: var(--ais); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mono { font-family: var(--mono); font-size: .9em; letter-spacing: 0; font-variant-numeric: tabular-nums; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
/* lajur kandungan: kiri ~58%; kanan dikosongkan untuk objek */
.lajur { max-width: calc(var(--lebar) * .575); }

.langkau { position: absolute; left: 12px; top: -80px; z-index: 100; background: var(--kertas); color: var(--ink); padding: 12px 16px; border-radius: 8px; }
.langkau:focus { top: 12px; }

/* ---------- Butang ---------- */
.butang {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; border: 1px solid transparent;
  font: 560 15.5px/1 var(--sans); letter-spacing: -0.005em; white-space: nowrap; cursor: pointer;
  transition: box-shadow var(--masa) var(--lengkung), background-color var(--masa) var(--lengkung), border-color var(--masa) var(--lengkung);
}
.butang-kecil { min-height: 44px; padding: 0 18px; font-size: 14.5px; }
.butang-cerah { background: var(--ais); color: var(--ink); }
.butang-cerah:hover { background: #FFFFFF; box-shadow: 0 0 0 6px rgb(var(--cahaya) / .10), 0 12px 36px -10px rgb(var(--cahaya) / .45); }
.butang-hantu { color: var(--ais); border-color: rgba(238, 242, 249, .5); background: transparent; }
.butang-hantu:hover { border-color: var(--ais); }
.butang-gelap { background: var(--ink); color: #FFFFFF; }
.butang-gelap:hover { background: var(--navy-dalam); }
.anak-panah { display: inline-block; transition: transform 300ms var(--lengkung); }
.butang:hover .anak-panah { transform: translateX(4px); }
.butang:hover .anak-panah.turun { transform: translateY(3px); }
.link-teks { display: inline-flex; gap: 8px; align-items: center; min-height: 44px; margin-top: 40px; font-weight: 560; color: var(--navy); position: relative; }
.link-teks::before { content: ""; position: absolute; left: 0; right: 22px; bottom: 8px; height: 1px; background: currentColor; transform-origin: left; transition: transform 380ms var(--lengkung); }
.link-teks:hover::before { transform: scaleX(.2); }
.link-teks::after { content: "→"; transition: transform 300ms var(--lengkung); }
.link-teks:hover::after { transform: translateX(4px); }
.link-malam { color: var(--ais); }

/* ---------- Kepala ---------- */
.kepala { position: absolute; inset: 0 0 auto 0; z-index: 50; color: var(--ais); padding-top: env(safe-area-inset-top, 0px); }
.js .kepala { position: fixed; }
.kepala::before, .kepala::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 320ms var(--lengkung); }
.kepala::before { background: var(--malam); border-bottom: 1px solid var(--ais-garis); }
.kepala::after { background: var(--kertas); border-bottom: 1px solid var(--garis); }
.kepala.diskrol[data-tema="malam"]::before { opacity: 1; }
.kepala[data-tema="siang"]::after { opacity: 1; }
.kepala[data-tema="siang"] { color: var(--ink); }
.kepala-baris { display: flex; align-items: center; gap: 32px; height: var(--kepala-t); }
.jenama { position: relative; flex: none; display: flex; align-items: center; min-height: 44px; }
.jenama img { height: 36px; width: auto; transition: opacity 320ms var(--lengkung); }
.jenama .logo-siang { position: absolute; left: 0; top: 50%; margin-top: -18px; opacity: 0; }
.kepala[data-tema="siang"] .logo-siang { opacity: 1; }
.kepala[data-tema="siang"] .logo-malam { opacity: 0; }
.nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.nav ul { display: flex; gap: 24px; font-size: 15px; }
.nav ul a { position: relative; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.nav ul a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--lengkung); }
.nav ul a:hover::after, .nav ul a[aria-current="true"]::after { transform: scaleX(1); }
.kepala[data-tema="siang"] .nav-cta { background: var(--ink); color: #FFFFFF; }
.menu-togol { display: none; }

/* ---------- Lapis (hero / siang / CTA) ---------- */
.lapis { position: relative; clip-path: inset(0); overflow-x: clip; }
.hero {
  z-index: 2; color: var(--ais); isolation: isolate;
  background: linear-gradient(162deg, var(--malam) 0%, var(--malam) 42%, var(--malam-2) 100%);
}
.hero::before { /* cahaya ais lembut di belakang objek, satu hala */
  content: ""; position: absolute; z-index: -1; right: 4%; top: 6%; width: 46%; height: min(46vw, 92vh); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(150, 180, 245, .13), transparent 72%); pointer-events: none;
}
.hero-pentas {
  position: relative; z-index: 1; pointer-events: none;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column;
  padding: calc(var(--kepala-t) + clamp(40px, 8vh, 104px) + env(safe-area-inset-top, 0px)) 0 clamp(36px, 5.5vh, 60px);
}
.hero-wrap { position: relative; z-index: 3; flex: 1; display: flex; flex-direction: column; transform: translateY(calc(var(--p) * -28px)); }
.hero-teks, .lejar { pointer-events: auto; }
/* Pin sinematik: hanya bila 3D boleh jalan, desktop sahaja (≤160vh, H dipendekkan) */
@media (min-width: 961px) {
  .boleh-3d:not(.tiada-3d) .hero { height: 160vh; height: 160svh; }
  .boleh-3d:not(.tiada-3d) .hero-pentas { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
}
.monolith-bingkai { position: absolute; inset: 0; z-index: 0; }
.monolith-kanvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0;
  opacity: 0; transform-origin: var(--asal-x, 75%) var(--asal-y, 50%);
  transition: opacity 380ms ease, transform 380ms var(--lengkung);
}
.ada-3d .monolith-kanvas { opacity: 1; }
@media (min-width: 961px) { /* pantulan lantai pudar sebelum sampai HUD (bacaan + rel) di bawah objek */
  .monolith-kanvas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent calc(100% - 122px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 180px), transparent calc(100% - 122px)); }
  .statik-kolum { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent); }
}
.ada-3d.serah .monolith-kanvas { opacity: 0; transform: scale(1.045); }
.monolith-statik, .monolith-statik img { display: block; }
.statik-mudah { display: none; }
.statik-kolum { position: absolute; inset: 0; z-index: 0; transition: opacity 380ms ease, transform 380ms var(--lengkung); }
.statik-kolum img { width: 100%; height: 100%; object-fit: contain; }
.ada-3d .statik-kolum, .serah .statik-kolum { opacity: 0; }
.serah .statik-kolum { transform: scale(1.045); }
.hero-kabus { /* bayang di belakang teks supaya kanvas 3D tidak mengganggu bacaan */
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 16 32 / .88) 0%, rgb(10 16 32 / .5) 36%, rgb(10 16 32 / 0) 58%);
}
.ufuk-cahaya { /* cahaya ufuk: garis ais di tepi bawah hero, muncul ikut --p */
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px; z-index: 4; pointer-events: none;
  background: linear-gradient(90deg, transparent 4%, rgba(226, 235, 255, .95) 50%, transparent 96%);
  box-shadow: 0 0 28px 6px rgba(160, 190, 255, .28);
  opacity: var(--p);
}
/* dalam hero, salinan objek + HUD (bacaan, rel) duduk ATAS kanvas 3D: pantulan lantai tak menutup teks HUD */
.hero > .pentas { z-index: 2; }
.siang { z-index: 1; margin-top: -96px; padding-top: 96px; background: var(--kertas); }
/* dalam siang, objek duduk ATAS latar seksyen — teks tak bertindih sebab objek di lajur kanan */
.siang > .pentas { z-index: 3; }
.cta {
  z-index: 2; color: var(--ais);
  min-height: 100vh; min-height: 100svh; display: flex; align-items: center;
  padding-block: clamp(96px, 14vh, 160px);
  background: linear-gradient(162deg, var(--malam-2) 0%, var(--malam) 58%, var(--malam) 100%);
  clip-path: inset(0 round 44px 44px 0 0);
}
.cta > .wrap { position: relative; z-index: 1; }

/* ---------- Pentas: objek dipinned (tiga salinan) ---------- */
.pentas {
  position: fixed; z-index: 0; pointer-events: none;
  top: calc(var(--kepala-t) + 24px); bottom: 24px;
  right: calc((100vw - var(--lebar)) / 2);
  width: calc(var(--lebar) * .36);
}
.pentas-dalam { height: 100%; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 16px; }
.objek-bingkai { position: relative; min-height: 0; display: grid; place-items: center; }
.objek-bingkai::before { /* cahaya lembut di belakang objek */
  content: ""; position: absolute; inset: 16% 10%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, var(--o-cahaya), transparent);
}
.objek-bingkai::after { /* nafas nod logo di CTA (opacity sahaja) — nod Monolith Berlapis di (19,20)/40 */
  content: ""; position: absolute; left: 47.5%; top: 50%; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(225, 235, 255, .55), transparent); opacity: 0; pointer-events: none;
}
.sudut { position: absolute; width: 14px; height: 14px; border: 0 solid var(--o-sudut); }
.s1 { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.s2 { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.s3 { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.s4 { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.objek { position: relative; width: auto; height: 100%; max-height: 600px; max-width: 100%; overflow: visible; }
.objek path { vector-effect: non-scaling-stroke; stroke-linecap: butt; fill: none; }
.o-kuat { stroke: var(--o-kuat); stroke-width: 1.5; }
.o-halus { stroke: var(--o-halus); stroke-width: 1.1; }
.o-aksen { stroke: var(--o-aksen); stroke-width: 2; }
/* Serahan 3D → garis: sebelum `serah`, semua salinan belum dilukis (monolith 3D duduk di tempatnya).
   Tanpa JS: tiada .js → garis kekal dilukis (salinan siang/CTA) dan PNG dalam salinan malam. */
.js .objek path { stroke-dasharray: 1; }
.js:not(.serah) .objek path { stroke-dashoffset: 1; }
.js.serah .objek path { stroke-dashoffset: 0; }
html:not(.js) .pentas[data-salinan="malam"] .objek { visibility: hidden; }
.bacaan { display: flex; align-items: baseline; gap: 14px; font: 500 11.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--o-teks2); }
.bacaan-no { color: var(--o-teks); }
.bacaan-teks { display: inline-block; }
.bacaan-teks.tukar { animation: tukar-teks 360ms var(--lengkung); }
@keyframes tukar-teks { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.rel { display: flex; justify-content: space-between; gap: 4px; border-top: 1px solid var(--o-garis); padding-top: 6px; }
.rel a {
  pointer-events: auto; display: inline-flex; gap: 6px; align-items: center; min-height: 44px;
  font: 500 10.5px/1.3 var(--mono); letter-spacing: .02em; text-transform: uppercase; color: var(--o-teks2); white-space: nowrap;
}
.rel a span { color: var(--o-teks2); }
.rel a:hover, .rel a[aria-current="step"] { color: var(--o-teks); }
.rel a:hover span, .rel a[aria-current="step"] span { color: var(--o-aksen-teks); }

/* warna setiap salinan: atas gelap (malam/CTA) vs atas terang (siang) */
.pentas[data-salinan="malam"], .pentas[data-salinan="cta"] {
  --o-kuat: #DCE4F2; --o-halus: #3A4866; --o-aksen: #FFFFFF; --o-cahaya: rgba(150, 180, 245, .10);
  --o-sudut: rgba(238, 242, 249, .30); --o-garis: rgba(238, 242, 249, .16);
  --o-teks: var(--ais); --o-teks2: var(--ais-redup); --o-aksen-teks: #FFFFFF;
}
.pentas[data-salinan="malam"] .o-aksen, .pentas[data-salinan="cta"] .o-aksen { filter: drop-shadow(0 0 5px rgba(200, 220, 255, .55)); }
.pentas[data-salinan="siang"] {
  --o-kuat: var(--ink); --o-halus: #B6BFD0; --o-aksen: var(--navy); --o-cahaya: rgba(29, 58, 138, .045);
  --o-sudut: #B3BBCB; --o-garis: var(--garis);
  --o-teks: var(--ink); --o-teks2: var(--kelabu); --o-aksen-teks: var(--navy);
}
.pentas[data-peringkat="tanda"] .o-kuat { stroke-width: 2.4; }
.pentas[data-peringkat="tanda"] .o-aksen { stroke-width: 2.6; }

/* ---------- Hero ---------- */
.kicker { font: 500 11.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kelabu); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.kicker .no { color: var(--navy); }
.kicker-malam { color: var(--ais-redup); }
.kicker-malam .no { color: var(--ais); }
.h-hero {
  font-size: clamp(2.6rem, min(5.3vw, 9.2vh), 5.15rem); line-height: .98; letter-spacing: -0.042em; font-weight: 560;
}
.h-hero .baris { display: block; overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.h-hero .kata {
  display: inline-block;
  background: linear-gradient(180deg, #FFFFFF 10%, #D3DBE8 95%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.h-hero .kata.redup { background: none; color: #AEB8CB; -webkit-text-fill-color: #AEB8CB; }
.hero-lead { margin-top: 26px; max-width: 35em; font-size: clamp(16.5px, 1.25vw, 18px); line-height: 1.6; color: #BAC3D3; }
.tindakan { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.lejar {
  max-width: calc(var(--lebar) * .6);
  margin-top: auto; padding-top: clamp(32px, 5vh, 72px);
  display: grid; grid-template-columns: 1.15fr .95fr 1.15fr .9fr 1.05fr;
}
.lejar > div { padding: 16px 12px 4px 0; border-top: 1px solid var(--ais-garis); min-width: 0; }
.lejar > div + div { padding-left: 12px; border-left: 1px solid var(--ais-garis); }
.lejar dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
.lejar dd { margin-top: 8px; font-size: 14px; line-height: 1.45; font-weight: 500; color: var(--ais); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.lejar dd .mono { font-size: 13px; }
.lejar-kecil { display: block; font-weight: 400; color: var(--ais-redup); }

/* ---------- Bab (badan terang) ---------- */
.bab { position: relative; z-index: 1; padding-block: clamp(96px, 12vw, 160px); }
.bab-kabus { background: var(--kabus); }
/* Tekstur grain sangat ringan dalam badan putih: bahan, bukan skrin rata (≤ 3% gelap, di bawah kandungan) */
.bab::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  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%3CfeColorMatrix values='0 0 0 0 .04 0 0 0 0 .07 0 0 0 0 .15 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.bab > .wrap { position: relative; z-index: 1; }
.bab h2 { font-size: clamp(2.1rem, 3.5vw, 3.15rem); line-height: 1.06; letter-spacing: -0.035em; font-weight: 560; text-wrap: balance; }
.lead { margin-top: 22px; font-size: 18px; color: var(--kelabu); max-width: 36em; }
.sub-label { font: 500 11.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--kelabu); margin: 72px 0 18px; }
#hosting > .wrap { transform: translateY(calc((1 - var(--p)) * 36px)); } /* badan terang "terbit" */

/* senarai bergaris (hosting) */
.senarai { margin-top: 56px; border-top: 1px solid var(--garis); }
.senarai li { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; padding: 22px 0; border-bottom: 1px solid var(--garis); }
.senarai li::after, .servis a::after, .k::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--navy);
  transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--lengkung);
}
.senarai li:hover::after, .servis a:hover::after, .servis a:focus-visible::after, .k:hover::after, .k:focus-visible::after { transform: scaleX(1); }
.senarai h3 { font-size: 17.5px; font-weight: 560; letter-spacing: -0.01em; }
.senarai p { color: var(--kelabu); font-size: 16px; }
.jalur-fakta { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.jalur-fakta > div { border-top: 1px solid var(--ink); padding-top: 14px; }
.jalur-fakta dt { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); }
.jalur-fakta dd { margin-top: 6px; font-weight: 500; font-size: 15.5px; }

/* --- Panel SAKTI TD: pulau gelap padu dalam badan terang, hab 3D CSS (H) --- */
.sakti {
  position: relative; margin-top: 56px; color: var(--ais);
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 24px; align-items: center;
  padding: clamp(26px, 3.2vw, 44px); border-radius: 26px; overflow: hidden;
  background: linear-gradient(155deg, #16244a 0%, var(--malam-2) 48%, var(--malam) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .10), inset 0 0 0 1px rgb(255 255 255 / .05), 0 40px 80px -36px rgb(11 19 38 / .55);
}
.sakti::before { /* garis cahaya atas panel */
  content: ""; position: absolute; left: 8%; right: 8%; top: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgb(var(--cahaya) / .7), transparent); opacity: .5;
}
.sakti-label { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); }
.sakti-nama { font-size: clamp(2.4rem, 3.6vw, 3.4rem); font-weight: 600; letter-spacing: -0.04em; line-height: 1; margin: 14px 0 14px; color: #FFFFFF; }
.sakti-hasil { font-size: clamp(1.1rem, 1.4vw, 1.3rem); line-height: 1.32; letter-spacing: -0.01em; color: var(--ais); }
.sakti-perihal { margin-top: 12px; color: var(--ais-redup); font-size: 15.5px; }
.sakti-plat { margin-top: 16px; font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
.sakti .link-teks { margin-top: 8px; }
.hab { perspective: 1000px; height: clamp(220px, 20vw, 290px); display: grid; place-items: center; }
.hab-pentas {
  position: relative; width: min(100%, 300px); aspect-ratio: 4 / 3;
  transform-style: preserve-3d; transform: rotateX(56deg) rotateZ(-10deg);
  border-radius: 20px;
  background: radial-gradient(closest-side, rgb(var(--cahaya) / .16), transparent 75%), linear-gradient(160deg, #15224a, #0c1328);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .07), 0 50px 70px -30px rgb(0 0 0 / .85);
  transition: transform 380ms var(--lengkung);
}
.hab-garis { position: absolute; inset: 0; width: 100%; height: 100%; }
.hab-garis path { stroke: rgb(var(--cahaya) / .8); stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 0; }
.hab-nod {
  position: absolute; width: 13%; aspect-ratio: 1; margin: -6.5% 0 0 -6.5%; border-radius: 7px;
  background: linear-gradient(145deg, #2c3a5e, #141d36);
  box-shadow: 0 1px 0 rgb(255 255 255 / .25) inset, 0 3px 0 #0b1226, 0 6px 0 #080d1c, 0 16px 22px -6px rgb(0 0 0 / .8);
  transform: translateZ(14px);
}
.hab-nod::after { content: ""; position: absolute; left: 22%; top: 22%; width: 18%; height: 18%; border-radius: 2px; background: #FFFFFF; box-shadow: 0 0 10px rgb(var(--cahaya) / .9); }
.n1 { left: 15%; top: 20%; } .n2 { left: 15%; top: 50%; } .n3 { left: 15%; top: 80%; }
.n4 { left: 85%; top: 20%; } .n5 { left: 85%; top: 50%; } .n6 { left: 85%; top: 80%; }
.hab-teras {
  position: absolute; left: 50%; top: 50%; width: 24%; aspect-ratio: 1; margin: -12% 0 0 -12%; border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #ffffff 0%, #cfe3ff 18%, #2b3a5c 55%, #121a2e 100%);
  box-shadow: 0 0 40px rgb(var(--cahaya) / .55), 0 4px 0 #0c1426, 0 8px 0 #080d19, 0 24px 28px -8px rgb(0 0 0 / .85);
  transform: translateZ(26px);
}
.hab-teras-dalam { position: absolute; inset: 30%; border-radius: 50%; border: 1px solid rgb(255 255 255 / .6); }
.sakti:hover .hab-pentas { transform: rotateX(50deg) rotateZ(-4deg); }

/* servis bernombor */
.servis { border-top: 1px solid var(--garis); }
.servis a { position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 14px; padding: 22px 0; border-bottom: 1px solid var(--garis); }
.servis .no { font: 500 12px/1.9 var(--mono); color: var(--navy); }
.servis a > span:last-child { transition: transform 320ms var(--lengkung); }
.servis a:hover > span:last-child { transform: translateX(8px); }
.servis strong { display: block; font-size: 18.5px; font-weight: 560; letter-spacing: -0.015em; line-height: 1.35; }
.servis em { display: block; font-style: normal; color: var(--kelabu); font-size: 16px; margin-top: 4px; }

/* --- Produk: TechManage dalam bingkai peranti 3D (condong ikut mouse) --- */
.unggul { margin-top: 52px; }
.peranti-pentas { position: relative; perspective: 1500px; height: clamp(260px, 26vw, 360px); display: grid; place-items: center; }
.peranti {
  --rx: 9deg; --ry: -13deg; --gx: 30%; --gy: 18%;
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry));
  transition: transform 380ms var(--lengkung);
  display: grid; place-items: center;
}
.tetingkap {
  position: relative; border-radius: 12px; padding-top: 22px; overflow: hidden;
  background: linear-gradient(180deg, #F7F9FC, #E9EDF4);
  box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 1px 0 rgb(255 255 255 / .9) inset, 0 36px 60px -26px rgb(11 19 38 / .45), 0 10px 24px -14px rgb(11 19 38 / .25);
}
.tetingkap img { width: 100%; height: auto; display: block; }
.tetingkap-bar { position: absolute; left: 12px; top: 8px; display: flex; gap: 6px; }
.tetingkap-bar i { width: 7px; height: 7px; border-radius: 50%; background: #C3CAD7; }
.tetingkap-depan { width: 82%; transform: translate3d(7%, 7%, 46px); }
.tetingkap-belakang { position: absolute; width: 70%; left: 2%; top: 2%; transform: translate3d(-1%, -3%, -36px); filter: brightness(.94) saturate(.9); }
.silau { /* silau di dalam skrin, beranjak ikut mouse */
  position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: radial-gradient(120% 90% at var(--gx) var(--gy), rgb(255 255 255 / .28), rgb(var(--cahaya) / .06) 35%, transparent 62%);
}
.peranti-bayang { position: absolute; left: 12%; right: 8%; bottom: -4px; height: 30px; border-radius: 50%; background: radial-gradient(closest-side, rgb(11 19 38 / .28), transparent); filter: blur(6px); z-index: -1; }
.unggul-teks { display: grid; gap: 6px; margin-top: 28px; max-width: 38em; }
.unggul-nama a { display: inline-flex; align-items: center; min-height: 44px; font-size: 1.6rem; font-weight: 600; letter-spacing: -0.02em; }
.unggul-nama a::after { content: "→"; margin-left: 10px; font-size: 1.1rem; color: var(--navy); transition: transform 320ms var(--lengkung); }
.unggul-nama a:hover::after { transform: translateX(4px); }
.unggul-ayat { color: var(--kelabu); }
.unggul-meta { display: flex; align-items: center; gap: 14px; margin-top: 6px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kelabu); }

/* jadual (produk + MOF) */
.jadual-bungkus { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: 16px 14px 16px 0; border-bottom: 1px solid var(--garis); }
thead th { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); padding-block: 10px; border-bottom-color: var(--ink); }
.jadual-produk { margin-top: 64px; font-size: 15.5px; }
.jadual-produk tbody th { font-weight: 560; letter-spacing: -0.01em; white-space: nowrap; font-size: 16.5px; }
.jadual-produk tbody th a { position: relative; display: inline-flex; align-items: center; min-height: 44px; margin-block: -10px; }
.jadual-produk tbody th a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 9px; height: 1px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--lengkung); }
.jadual-produk tbody tr:hover th a { color: var(--navy); }
.jadual-produk tbody tr:hover th a::after { transform: scaleX(1); }
.jadual-produk td { color: var(--kelabu); }
.jadual-produk td:nth-child(3), .jadual-produk td:nth-child(4) { white-space: nowrap; }
.jadual-produk td:last-child { padding-right: 0; }
.status { display: inline-flex; align-items: center; gap: 8px; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kelabu); white-space: nowrap; }
.status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; }
.status.hidup { color: var(--navy); }
.status.hidup::before { background: currentColor; }
.nota { margin-top: 22px; display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--kelabu); font-size: 14.5px; }
.nota-pisah { color: var(--kelabu); }

/* kerja (portfolio) */
.kerja { margin-top: 48px; border-top: 1px solid var(--garis); }
.k { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 20px; padding: 26px 34px 26px 0; border-bottom: 1px solid var(--garis); }
.k-klien { font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--kelabu); }
.k-plat { grid-column: 2; grid-row: 1; font: 500 11px/1.5 var(--mono); letter-spacing: .02em; color: var(--kelabu); text-align: right; }
.k-nama { grid-column: 1 / -1; font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 560; letter-spacing: -0.025em; margin-top: 6px; transition: transform 320ms var(--lengkung); }
.k:hover .k-nama { color: var(--navy); transform: translateX(6px); }
.k-hasil { grid-column: 1 / -1; color: var(--kelabu); font-size: 16px; }
.k > .k-hasil::after { content: "→"; position: absolute; right: 4px; top: 50%; margin-top: -12px; color: var(--navy); opacity: 0; transform: translateX(-8px); transition: opacity 320ms var(--lengkung), transform 320ms var(--lengkung); }
.k:hover > .k-hasil::after, .k:focus-visible > .k-hasil::after { opacity: 1; transform: none; }
.klien { margin-top: 24px; }
.klien-logo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.klien-logo li {
  display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center;
  padding: 22px 10px 18px; border-radius: 16px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--garis), 0 1px 0 rgb(255 255 255 / .9) inset;
  transition: transform 380ms var(--lengkung), box-shadow 380ms var(--lengkung);
}
.klien-logo li:hover { transform: translateY(-4px); box-shadow: inset 0 0 0 1px #CDD3DF, 0 22px 36px -22px rgb(11 19 38 / .35); }
.klien-logo img { height: 60px; width: auto; max-width: 100%; object-fit: contain; mix-blend-mode: multiply; }
.klien-logo span { font-size: 13px; line-height: 1.35; color: var(--kelabu); }

/* --- Pasukan + sejarah (H, versi terang) --- */
.pasukan { margin-top: 52px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; perspective: 1200px; }
.pasukan li {
  display: grid; grid-template-columns: 56px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; align-items: center;
  padding: 16px; border-radius: 18px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px var(--garis);
  transition: transform 380ms var(--lengkung), box-shadow 380ms var(--lengkung);
}
.pasukan li:hover { transform: translateY(-4px) rotateX(4deg); box-shadow: inset 0 0 0 1px #CDD3DF, 0 24px 40px -24px rgb(11 19 38 / .35); }
.monogram {
  grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  font-weight: 600; font-size: 1.1rem; letter-spacing: .02em; color: #FFFFFF;
  background: linear-gradient(145deg, #22305a 0%, var(--malam-2) 55%, var(--malam) 100%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 -2px 0 rgb(0 0 0 / .35), 0 10px 18px -10px rgb(11 19 38 / .6);
}
.p-nama { font-size: 1.0625rem; font-weight: 560; align-self: end; }
.p-jawatan { font-size: 14.5px; color: var(--kelabu); align-self: start; line-height: 1.35; }
.sejarah { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 72px; padding-top: 30px; }
.sejarah::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, var(--ink), var(--navy) 60%, var(--garis)); transform-origin: left; }
.sejarah li { position: relative; }
.sejarah li::before { content: ""; position: absolute; left: 0; top: -35px; width: 9px; height: 9px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 5px var(--kertas); }
.s-tahun { display: block; font-size: clamp(1.6rem, 2.3vw, 2.2rem); font-weight: 560; letter-spacing: -0.03em; line-height: 1.1; }
.s-teks { display: block; color: var(--kelabu); margin-top: 8px; font-size: 15.5px; }
.s-teks strong { color: var(--ink); font-weight: 560; }

/* untuk agensi */
.fakta { margin-top: 44px; border-top: 1px solid var(--garis); }
.fakta > div { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--garis); font-size: 16px; }
.fakta dt { color: var(--kelabu); }
.fakta dd { font-weight: 500; font-variant-numeric: tabular-nums; }
.cari { margin-top: 56px; }
.cari-baris { position: relative; display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--ink); }
.cari-baris::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--lengkung); }
.cari-baris:focus-within::after { transform: scaleX(1); }
.cari-baris label { font: 500 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); white-space: nowrap; }
.cari-baris input { flex: 1; min-width: 0; min-height: 52px; border: 0; background: transparent; font: 400 17.5px/1 var(--sans); color: var(--ink); padding: 0; }
.cari-baris input:focus { outline: none; }
.cari-baris input::placeholder { color: var(--kelabu); opacity: 1; }
.cari-kira { font: 500 11.5px/1.4 var(--mono); color: var(--kelabu); white-space: nowrap; font-variant-numeric: tabular-nums; }
.cip { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 8px; }
.cip button {
  min-height: 44px; padding: 0 16px; border-radius: 999px; cursor: pointer;
  background: transparent; border: 1px solid #B9C1D0; color: var(--kelabu);
  font: 500 13px/1 var(--mono);
  transition: border-color 320ms var(--lengkung), color 320ms var(--lengkung), background-color 320ms var(--lengkung);
}
.cip button:hover, .cip button[aria-pressed="true"] { border-color: var(--ink); color: var(--ink); background: #FFFFFF; }
.jadual-mof { font-size: 15.5px; }
.jadual-mof thead th { border-bottom-color: var(--garis); }
.jadual-mof td:first-child { font: 500 13px/1.75 var(--mono); color: var(--navy); width: 92px; white-space: nowrap; }
.jadual-mof tr.jumpa td:first-child { font-weight: 700; }
.jadual-mof mark { position: relative; background: none; color: var(--navy); font-weight: 600; }
.jadual-mof mark::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: currentColor; transform-origin: left; animation: garis-masuk 380ms var(--lengkung) both; }
@keyframes garis-masuk { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.jadual-mof tr.baru { animation: luncur 380ms var(--lengkung); }
@keyframes luncur { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.cari-kosong { padding: 18px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; color: var(--kelabu); border-bottom: 1px solid var(--garis); }

/* ---------- CTA ---------- */
.cta h2 { font-size: clamp(2.3rem, 4.2vw, 3.7rem); line-height: 1.04; letter-spacing: -0.04em; font-weight: 560; text-wrap: balance; }
.cta-lead { margin-top: 22px; color: var(--ais-redup); max-width: 34em; font-size: 18px; }

/* ---------- Kaki ---------- */
.kaki { background: var(--malam); color: var(--ais-redup); font-size: 15.5px; padding-top: clamp(64px, 8vw, 96px); padding-bottom: env(safe-area-inset-bottom, 0px); }
.kaki-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr) minmax(0, 4fr) minmax(0, 3fr); gap: 40px; }
.kaki-jenama img { height: 36px; width: auto; }
.kaki-jenama p { margin-top: 18px; }
.kaki-lajur { display: grid; align-content: start; gap: 4px; font-style: normal; }
.kaki-lajur h2 { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais); margin-bottom: 8px; }
.kaki-lajur a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; width: fit-content; }
.kaki-lajur a:hover { color: var(--ais); }
.kaki-nama { color: var(--ais); font-weight: 560; }
.kaki-syarikat address { font-style: normal; margin-top: 6px; line-height: 1.6; }
.kaki-hak { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; margin-top: 64px; padding-block: 22px; border-top: 1px solid var(--ais-garis); font-size: 14px; }
.kaki-hak nav { display: flex; gap: 22px; }
.kaki-hak a { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; }
.kaki-hak a:hover { color: var(--ais); }

/* Mod jana PNG fallback (tools/jana-fallback.js): hanya kanvas, latar telus */
.jana, .jana body, .jana .hero { background: transparent !important; }
.jana .kepala, .jana .pentas, .jana .siang, .jana .cta, .jana .kaki, .jana .hero-kabus, .jana .hero-wrap, .jana .hero::before, .jana .ufuk-cahaya, .jana .monolith-statik { visibility: hidden !important; }
.jana .monolith-bingkai { position: fixed !important; left: 0 !important; top: 0 !important; right: auto !important; bottom: auto !important; }

/* =========================================================================
   SIGNATURE MOTION — hanya bila JS hidup (.js) DAN motion dibenarkan
   ========================================================================= */
@media (prefers-reduced-motion: no-preference) {
  /* Tajuk hero (H): setiap kata naik dari topeng + kabur → tajam, 380ms, bersusun */
  .js .h-hero .kata { transform: translateY(108%); filter: blur(10px); opacity: 0; }
  .js .sedia .h-hero .kata { transform: none; filter: blur(0); opacity: 1; transition: transform 380ms var(--lengkung), filter 380ms var(--lengkung), opacity 300ms ease; }
  .js .sedia .h-hero .baris:nth-child(1) .kata { transition-delay: 120ms; }
  .js .sedia .h-hero .baris:nth-child(2) .kata:nth-child(1) { transition-delay: 220ms; }
  .js .sedia .h-hero .baris:nth-child(2) .kata:nth-child(2) { transition-delay: 300ms; }
  .js .sedia .h-hero .baris:nth-child(3) .kata { transition-delay: 380ms; }
  .js .hero .kicker, .js .hero-lead, .js .hero .tindakan, .js .lejar > div { opacity: 0; transform: translateY(10px); transition: opacity 380ms var(--lengkung), transform 380ms var(--lengkung); }
  .js .sedia .hero .kicker, .js .sedia .hero-lead, .js .sedia .hero .tindakan, .js .sedia .lejar > div { opacity: 1; transform: none; }
  .js .sedia .hero-lead { transition-delay: 460ms; }
  .js .sedia .hero .tindakan { transition-delay: 540ms; }
  .js .sedia .lejar > div { transition-delay: calc(620ms + var(--i, 0) * 60ms); }

  /* Serahan: garis melukis diri (semua kumpulan SELARI, 380ms) / undur bila skrol balik */
  .js .objek path { transition: stroke-dashoffset 380ms var(--lengkung); }
  .js .objek.d-css path { transition: d var(--masa) var(--lengkung), stroke-dashoffset 380ms var(--lengkung); }

  /* naik lembut bila masuk skrin (G) */
  /* K4: reveal kelas K3 hanya bila tiada scroll-driven (html.tiada-sd); jika ada, reveal = animasi `translate` + opacity
     ikut skrol (blok K4) yang tidak memegang `transform` → hover angkat kad + spring hidup semula */
  .js.tiada-sd .muncul { opacity: 0; transform: translateY(16px); transition: opacity 380ms var(--lengkung), transform 380ms var(--lengkung); transition-delay: calc(var(--i, 0) * 50ms); }
  .js.tiada-sd .muncul.masuk { opacity: 1; transform: none; }
  /* garis melukis diri: hab SAKTI, garis sejarah */
  .js .sakti.muncul .hab-garis path { stroke-dashoffset: 1; }
  .js .sakti.masuk .hab-garis path { stroke-dashoffset: 0; transition: stroke-dashoffset 400ms var(--lengkung) 160ms; }
  .js .sejarah::before { transform: scaleX(0); }
  .js .sejarah.dilukis::before { transform: scaleX(1); transition: transform 400ms var(--lengkung); }
  .js .unggul.condong .peranti { transition: transform 120ms linear; }

  /* nafas nod logo di CTA: cahaya 1000ms (pengecualian "cahaya") */
  .serah .pentas[data-salinan="cta"][data-peringkat="tanda"] .objek-bingkai::after { animation: nafas 1000ms ease-in-out 400ms infinite alternate; }
  @keyframes nafas { from { opacity: .15; } to { opacity: .7; } }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Responsif ---------- */
@media (max-width: 1180px) {
  .nav ul { gap: 16px; font-size: 14.5px; }
  .nav { gap: 20px; }
  .sakti { grid-template-columns: minmax(0, 1fr); }
  .hab { height: 220px; }
  .klien-logo { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pasukan { grid-template-columns: minmax(0, 1fr); }
  .lejar { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 0; max-width: calc(var(--lebar) * .575); }
  .lejar > div:nth-child(4) { padding-left: 0; border-left: 0; }
}

@media (max-width: 960px) {
  :root { --kepala-t: 60px; --jalur-t: 56px; }
  html { scroll-padding-top: calc(var(--kepala-t) + var(--jalur-t) + 12px); }
  .lajur { max-width: none; }

  /* menu mudah alih */
  .menu-togol {
    display: inline-flex; align-items: center; gap: 10px; margin-left: auto; min-height: 44px; min-width: 44px; padding: 0 4px 0 12px;
    background: none; border: 0; color: inherit; font: 500 12px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  }
  html:not(.js) .menu-togol { display: none; }
  .menu-garis { position: relative; width: 20px; height: 9px; border-block: 1.5px solid currentColor; }
  .nav {
    position: fixed; left: 0; right: 0; top: calc(var(--kepala-t) + env(safe-area-inset-top, 0px));
    display: none; flex-direction: column; align-items: stretch; gap: 0; margin: 0;
    padding: 8px var(--gutter) 24px; background: var(--kertas); color: var(--ink); border-bottom: 1px solid var(--garis);
  }
  .nav.buka { display: flex; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: flex; min-height: 56px; border-bottom: 1px solid var(--garis); font-size: 20px; letter-spacing: -0.02em; }
  .nav ul a::after { display: none; }
  .nav .nav-cta { margin-top: 20px; min-height: 48px; background: var(--ink); color: #FFFFFF; }
  .kepala:has(.nav.buka)::after { opacity: 1; }
  .kepala:has(.nav.buka) { color: var(--ink); }
  .kepala:has(.nav.buka) .logo-siang { opacity: 1; }
  .kepala:has(.nav.buka) .logo-malam { opacity: 0; }

  /* pentas jadi jalur HUD kecil di atas (G) — setiap salinan ikut warna lapisnya */
  .pentas { top: calc(var(--kepala-t) + env(safe-area-inset-top, 0px)); bottom: auto; left: 0; right: 0; width: auto; height: var(--jalur-t); z-index: 4; }
  .lapis > .pentas { z-index: 4; }
  html:not(.js) .pentas { top: 0; }
  html:not(.js) .hero > .pentas { display: none; } /* tanpa JS kepala tidak fixed: jalur hero akan menindih logo; hero sudah ada PNG monolith */
  html:not(.js) .hero-pentas { padding-top: calc(var(--kepala-t) + 40px + env(safe-area-inset-top, 0px)); }
  .pentas[data-salinan="malam"], .pentas[data-salinan="cta"] { background: var(--malam); border-bottom: 1px solid var(--ais-garis); }
  .pentas[data-salinan="siang"] { background: var(--kertas); border-bottom: 1px solid var(--garis); }
  .pentas-dalam { grid-template-rows: none; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; padding-inline: var(--gutter); }
  .objek-bingkai { height: 48px; }
  .objek-bingkai::before, .sudut, .rel, .statik-kolum { display: none; }
  .objek-bingkai::after { width: 40px; height: 40px; margin: -20px 0 0 -20px; }
  .objek { height: 48px; max-height: 48px; }
  html:not(.js) .pentas[data-salinan="malam"] .objek { visibility: visible; }
  .bacaan { font-size: 11px; gap: 10px; white-space: nowrap; overflow: hidden; }

  /* hero bertindan: teks → monolith (blok sendiri) → lejar. Tidak dipin. */
  .hero-pentas { min-height: 0; padding-top: calc(var(--kepala-t) + var(--jalur-t) + 40px + env(safe-area-inset-top, 0px)); }
  .hero-wrap { display: contents; }
  .hero-teks { order: 1; width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); padding-inline: var(--gutter); position: relative; z-index: 3; }
  .monolith-bingkai { position: relative; inset: auto; order: 2; height: min(118vw, 600px); margin-top: 8px; }
  .lejar { order: 3; position: relative; z-index: 3; padding-inline: var(--gutter); padding-top: 8px; max-width: none; }
  .hero-kabus { background: linear-gradient(0deg, var(--malam) 0%, rgb(10 16 32 / 0) 16%); }
  .hero::before { width: 120%; right: -10%; top: 38%; height: 90vw; }
  .statik-mudah { display: block; position: absolute; inset: 0; transition: opacity 380ms ease; }
  .statik-mudah img { width: 100%; height: 100%; object-fit: contain; }
  .ada-3d .statik-mudah { opacity: 0; }
  .ada-3d.serah .monolith-kanvas { opacity: 1; transform: none; } /* mudah alih: blok 3D kekal; serah = jalur atas */
  .monolith-kanvas, .statik-mudah { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 74%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 74%, transparent 100%); }

  .lejar { grid-template-columns: minmax(0, 1fr); }
  .lejar > div, .lejar > div + div, .lejar > div:nth-child(4) { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 13px 0; border-left: 0; }
  .lejar dd { margin: 0; }
  .lejar-kecil { display: inline; }
  .cta { align-items: flex-start; padding-top: calc(var(--jalur-t) + 80px); clip-path: inset(0 round 28px 28px 0 0); }
  .klien-logo { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pasukan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaki-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kaki-jenama { grid-column: 1 / -1; }
}

@media (max-width: 640px) {
  body { font-size: 16.5px; }
  .h-hero { font-size: clamp(2.5rem, 11.2vw, 3.2rem); letter-spacing: -0.04em; }
  .hero-lead { font-size: 16.5px; }
  .tindakan .butang { flex: 1 1 100%; }
  .bab { padding-block: 88px; }
  .bab h2 { font-size: clamp(2rem, 8.6vw, 2.4rem); }
  .lead { font-size: 17px; }
  .senarai li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .jalur-fakta { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .jalur-fakta > div { padding-block: 12px; border-top-color: var(--garis); display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 12px; align-items: baseline; }
  .jalur-fakta dd { margin: 0; }
  .sakti { border-radius: 22px; padding: 24px 20px; }
  .peranti-pentas { height: 230px; }
  .fakta > div { grid-template-columns: 100px minmax(0, 1fr); }
  .k { padding-right: 0; }
  .k-plat { grid-column: 1; grid-row: auto; text-align: left; order: 4; margin-top: 6px; }
  .k > .k-hasil::after { display: none; }
  /* jadual produk jadi senarai pada telefon */
  .jadual-produk thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .jadual-produk, .jadual-produk tbody, .jadual-produk tr, .jadual-produk th, .jadual-produk td { display: block; }
  .jadual-produk tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; padding: 16px 0; border-bottom: 1px solid var(--garis); }
  .jadual-produk th, .jadual-produk td { border: 0; padding: 0; }
  .jadual-produk td:nth-child(2) { grid-column: 1 / -1; }
  .jadual-produk td:nth-child(3) { font-size: 14px; }
  .jadual-produk td:nth-child(4) { grid-column: 2; grid-row: 1; }
  .jadual-produk tbody { border-top: 1px solid var(--ink); }
  .pasukan { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sejarah { grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: 0; padding-left: 28px; }
  .sejarah::before { top: 0; bottom: 0; left: 4px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--ink), var(--navy) 60%, var(--garis)); transform-origin: top; }
  .js .sejarah::before { transform: scaleY(0); }
  .js .sejarah.dilukis::before { transform: scaleY(1); }
  .sejarah li::before { left: -28px; top: 12px; }
  .cari-baris { flex-wrap: wrap; gap: 0 12px; }
  .cari-baris label { flex: 1 1 100%; padding-top: 6px; }
  .jadual-mof td:first-child { width: 76px; }
  .kaki-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .kaki-hak nav { flex-wrap: wrap; gap: 0 20px; }
}

/* =========================================================================
   Arah J — tambahan atas I
   1. Label HUD komposisi 3D (01 Host · 02 Web · 03 Mobile · 04 AI): teks DOM yang scene.js letak ikut objek,
      kemudian ikut modul rak bila rak terbuka; pudar 380ms bila serah. Hanya bila 3D hidup.
   2. Rel 7 bab (tambah 05 AI): font kecil sikit pada ≤1180px supaya muat lajur 36%.
   3. Bab 05 AI: telefon HadirAi (screenshot sebenar) di depan tetingkap TechManage claims, gaya "stacked 3D" produk.
   ========================================================================= */
.label-3d { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity 380ms ease; }
.ada-3d .label-3d.sedia { opacity: 1; }
.ada-3d.serah .label-3d { opacity: 0; }
.tiada-3d .label-3d, html:not(.js) .label-3d { display: none; }
.tag3d {
  position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
  margin-top: -0.75em; padding-left: 22px;
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #C3CCDC;
  will-change: transform;
}
.tag3d b { font-weight: 500; color: var(--ais); }
.tag3d::before { /* garis penunjuk + nod kecil, macam HUD */
  content: ""; position: absolute; left: 0; top: 50%; width: 15px; height: 1px; background: rgb(var(--cahaya) / .55);
}
.tag3d::after { content: ""; position: absolute; left: -2px; top: calc(50% - 2px); width: 4px; height: 4px; transform: rotate(45deg); background: rgb(var(--cahaya) / .9); }
@media (max-width: 1180px) {
  .rel a { font-size: 9.5px; gap: 4px; letter-spacing: 0; }
}

/* Bab 05 AI */
.peranti-ai .tetingkap-belakang { width: 74%; left: 3%; top: 6%; transform: translate3d(0, 0, -30px); filter: none; }
.telefon {
  position: absolute; right: 9%; top: 50%; height: 104%; aspect-ratio: 331 / 722; translate: 0 -50%;
  transform: translate3d(0, 0, 70px) rotateY(10deg);
  padding: 6px; border-radius: 26px; background: linear-gradient(160deg, #1C2742, #0B1326);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10), 0 40px 60px -24px rgb(11 19 38 / .5), 0 12px 24px -12px rgb(11 19 38 / .35);
}
.telefon img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; }
.telefon .silau { border-radius: 20px; inset: 6px; }
.senarai-ai { margin-top: 44px; }
.senarai-produk { display: block; margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
@media (max-width: 640px) {
  .telefon { right: 4%; height: 100%; padding: 4px; border-radius: 18px; }
  .telefon img, .telefon .silau { border-radius: 14px; }
  .peranti-ai .tetingkap-belakang { width: 80%; left: 0; }
}
.tag3d.kiri { padding-left: 0; padding-right: 22px; }
.tag3d.kiri::before { left: auto; right: 0; }
.tag3d.kiri::after { left: auto; right: -2px; }
.jana .label-3d { display: none !important; }
.rel a { min-width: 44px; justify-content: center; } /* 05 AI pendek: sasaran sentuh ≥ 44px */

/* =========================================================================
   Arah K — semakan semua aspek (badan SAMA dalam K dan K2; J tidak disentuh)
   1. Grid logo klien: jubin ke-8 "Your organisation → Talk to us" (pintu ke CTA, bukan logo/dakwaan) supaya grid
      penuh 4×2 (desktop, ≤1180) dan 2×4 (≤960). J: 7 jubin → lubang kosong di bucu (4+3, 3+3+1, 2+2+2+1).
   ========================================================================= */
.klien-logo li.klien-anda { padding: 0; background: transparent; box-shadow: inset 0 0 0 1px var(--garis); }
.klien-anda a {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 100%;
  padding: 22px 10px 18px; border-radius: 16px; text-decoration: none; color: var(--navy); font-size: 13px; line-height: 1.35;
}
.klien-logo .klien-anda span { color: inherit; }
.klien-logo .klien-anda-tanda {
  display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%;
  font: 300 28px/1 var(--sans); box-shadow: inset 0 0 0 1px #CDD3DF;
  transition: box-shadow 320ms var(--lengkung), transform 320ms var(--lengkung);
}
.klien-anda:hover .klien-anda-tanda, .klien-anda a:focus-visible .klien-anda-tanda { box-shadow: inset 0 0 0 1px var(--navy); transform: rotate(90deg); }
.klien-anda a:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 1180px) { .klien-logo { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 960px) { .klien-logo { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (prefers-reduced-motion: reduce) { .klien-anda-tanda { transition: none; } .klien-anda:hover .klien-anda-tanda { transform: none; } }
/* 2. Label HUD 3D 01–04: teks ais penuh (J: #C3CCDC). Kontras hero diukur dari piksel: label ialah kotak teks paling
      lemah dalam hero (K 5.71, K2 4.81 vs I 7.90 tanpa label) → dicerahkan supaya hero tidak jatuh dari I. */
.tag3d { color: var(--ais); }
/* 3. Lapisan label: `contain: strict` — label bergerak setiap frame ikut 3D; tanpa containment, GPU perisian
      (SwiftShader) dapat lonjakan frame 50ms (diukur: 12 lonjakan/5 s → 0). */
.label-3d { contain: strict; }
/* 4. Bingkai peranti 3D (03 Products + 05 AI): tinggi pentas ikut LEBAR pentas sendiri, bukan lebar viewport.
      Bug (laporan Razlan, K2 pada ~800–1200px / zoom 110–150%): `.peranti-pentas { height: clamp(260px, 26vw, 360px) }`
      sedangkan tetingkap depan = 82% lebar LAJUR (nisbah 16:10 + bar 22px) → bila lajur lebar berbanding viewport
      (≤960 satu lajur; 960–1200 lajur 58%), gambar lebih tinggi dari pentas dan melimpah atas tajuk "TechManage". */
.peranti-pentas { height: auto; aspect-ratio: 16 / 9.8; }

/* =========================================================================
   Arah K3 — showcase bertukar (03 Products · 04 Delivered work)
   Satu bingkai peranti 3D (bahan/condong/bayang sama dengan stacked 3D TechManage) + pemilih. Tandatangan motion:
   bingkai lama condong keluar ke belakang 170ms → baharu masuk dari belakang 220ms (≤ 400ms). Reduced-motion: tukar terus.
   ========================================================================= */
.tetingkap img { aspect-ratio: 16 / 10; height: auto; object-fit: cover; object-position: left top; } /* nisbah gambar berbeza → potong kemas dari atas-kiri */
.pameran .peranti { transition: transform 220ms var(--lengkung), opacity 220ms var(--lengkung); }
.pameran.tukar-keluar .peranti {
  opacity: 0; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) - 24deg)) translate3d(-5%, 2%, -140px);
  transition: transform 170ms cubic-bezier(.5, 0, .9, .5), opacity 170ms linear;
}
.pameran.tukar-mula .peranti { opacity: 0; transform: rotateX(var(--rx)) rotateY(calc(var(--ry) + 20deg)) translate3d(6%, 2%, -180px); transition: none; }
.pameran-panel .tetingkap-bar { display: none; }
.pameran-panel .tetingkap { padding-top: 0; background: #0B1326; }
.pameran [hidden] { display: none !important; }
/* telefon di sebelah tetingkap (produk mobile: HadirAi) */
.pameran-produk.pameran-telefon .tetingkap-depan { width: 72%; transform: translate3d(-6%, 5%, 20px); }
.pameran-produk .telefon { right: 6%; height: 86%; }
/* 04: pentas cermin (condong arah bertentangan dengan Products) */
.pameran-kerja .peranti { --ry: 13deg; }
.pameran-kerja .tetingkap-depan { transform: translate3d(-7%, 7%, 46px); }
.pameran-kerja .tetingkap-belakang { left: auto; right: 2%; transform: translate3d(1%, -3%, -36px); }
.pameran-kerja .unggul-teks .k-klien { margin-bottom: -2px; }
/* kiosk tegak (Wayfinding TD): skrin berbingkai gelap atas leher logam + tapak */
.kiosk { position: relative; width: 58%; display: grid; justify-items: center; transform: translateZ(40px); }
.kiosk-skrin { position: relative; width: 100%; aspect-ratio: 16 / 10; padding: 2.2%; border-radius: 16px; background: linear-gradient(160deg, #1C2742, #0B1326);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10), 0 36px 60px -26px rgb(11 19 38 / .45), 0 10px 24px -14px rgb(11 19 38 / .25); }
.kiosk-skrin img { width: 100%; height: 100%; object-fit: cover; object-position: left top; border-radius: 9px; display: block; }
.kiosk-skrin .silau { inset: 2.2%; border-radius: 9px; }
.kiosk-leher { width: 11%; aspect-ratio: 1 / 1.9; background: linear-gradient(90deg, #B9C1CE, #EEF1F6 45%, #C9CFDA); box-shadow: inset 0 0 0 1px rgb(11 19 38 / .08); }
.kiosk-tapak { width: 42%; height: 12px; margin-top: -2px; border-radius: 50%; background: radial-gradient(closest-side, #E7EBF2, #C3CAD6); box-shadow: 0 8px 14px -8px rgb(11 19 38 / .4); }

/* pemilih: Products (butang dalam sel nama jadual) */
.jadual-produk tbody th .pilih {
  position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-block: -10px; padding: 0;
  border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; text-align: left;
}
.jadual-produk tbody th .pilih::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg) scale(0); background: var(--navy); transition: transform 220ms var(--lengkung); flex: none; }
.jadual-produk tbody th .pilih[aria-pressed="true"] { color: var(--navy); }
.jadual-produk tbody th .pilih[aria-pressed="true"]::before { transform: rotate(45deg) scale(1); }
.jadual-produk tbody tr { cursor: pointer; transition: background-color 220ms var(--lengkung); }
.jadual-produk tbody tr:hover { background: rgb(29 58 138 / .035); }
.jadual-produk tbody tr.dipilih { background: rgb(29 58 138 / .055); }
.jadual-produk tbody th .pilih:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 4px; }
/* pemilih: Delivered work (kad 2 lajur pada desktop; butang = kad) */
.kerja { list-style: none; padding: 0; }
.kerja .k { width: 100%; background: none; border: 0; border-bottom: 1px solid var(--garis); font: inherit; color: inherit; text-align: left; cursor: pointer; }
.kerja .k[aria-pressed="true"] .k-nama { color: var(--navy); }
.kerja .k::before { content: ""; position: absolute; left: -16px; top: 26px; bottom: 26px; width: 2px; background: var(--navy); transform: scaleY(0); transition: transform 220ms var(--lengkung); }
.kerja .k[aria-pressed="true"]::before { transform: scaleY(1); }
.kerja .k:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (min-width: 1101px) {
  .kerja { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .kerja .k { padding-right: 12px; }
  .kerja .k > .k-hasil::after { display: none; }
  .kerja .k-plat { grid-column: 1 / -1; grid-row: auto; text-align: left; margin-top: 6px; } /* 2 lajur: platform di bawah, bukan berlaga dengan nama klien */
}
@media (max-width: 960px) { .kerja .k::before { left: -10px; } }
@media (prefers-reduced-motion: reduce) {
  .pameran .peranti, .pameran.tukar-keluar .peranti { transition: none; }
  .jadual-produk tbody th .pilih::before, .kerja .k::before { transition: none; }
}

/* =========================================================================
   Arah K3 — 02 Integrasi: kad SAKTI ikut warna sistem + pipeline berlapis 3D
   Warna dari PROJECT/sakti-td/saktitd-enigma/tailwind.config.js (primary red-700 #B91C1C; maroon #4A0E17 #7A1420 #8F1A28;
   emas #CDA034 #F1D98B). Maroon dalam + rim merah lembut; emas HANYA pada gateway dalam model (satu aksen hangat → mata ke hub).
   ========================================================================= */
.sakti {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  background: radial-gradient(120% 95% at 88% 38%, #7A1420 0%, #4A0E17 46%, #26060C 100%);
  box-shadow: inset 0 1px 0 rgb(255 220 224 / .14), inset 0 0 0 1px rgb(255 200 205 / .06), 0 40px 80px -36px rgb(42 7 13 / .6);
}
.sakti::before { background: linear-gradient(90deg, transparent, rgb(255 154 166 / .75), transparent); }
.sakti-label, .sakti-perihal, .sakti-plat { color: #E7C9CD; }
.sakti .link-malam { color: #FFFFFF; }
.sakti-ai { margin-top: 14px; color: #F4E6E8; font-size: 15px; }
.sakti-ai-tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; font: 500 10.5px/1.6 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #2A070D; background: #F4E6E8; }
.paip { position: relative; height: clamp(320px, 31vw, 440px); perspective: none; display: block; }
.paip-kanvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.paip-statik img { width: 100%; height: 100%; object-fit: contain; display: block; }
.paip-statik { display: block; height: calc(100% - 0px); }
.paip-3d .paip-statik { display: none; }
.paip-label { list-style: none; margin: 0; padding: 0; }
.paip-label li { font: 500 11px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #E7C9CD; display: flex; align-items: center; gap: 8px; }
.paip-no { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; font-size: 10px; letter-spacing: 0; color: #2A070D; background: #E7C9CD; transition: background-color 380ms var(--lengkung); }
.paip-label li.nyala { color: #FFFFFF; }
.paip-label li.nyala .paip-no { background: #FFFFFF; }
/* desktop + 3D: label di sisi kanan objek, sebaris dengan lapisan (JS letak), garis penunjuk ke objek */
@media (min-width: 961px) {
  .paip-3d.paip-label-sisi .paip-label li { position: absolute; left: 0; top: 0; margin-top: -0.75em; padding-left: 0; opacity: .5; transition: opacity 380ms var(--lengkung), color 380ms var(--lengkung); }
  .paip-3d.paip-label-sisi .paip-label li.nyala { opacity: 1; }
  .paip-3d.paip-label-sisi .paip-label li::before { content: ""; position: absolute; right: 100%; top: 50%; width: var(--garis, 18px); height: 1px; margin-right: 6px; background: rgb(255 214 220 / .45); }
}
/* tanpa 3D / mudah alih: senarai 1–5 di bawah objek */
.paip-label { display: grid; gap: 6px; margin-top: 12px; }
@media (min-width: 961px) { .paip-3d.paip-label-sisi .paip-label { display: block; margin: 0; } .paip:not(.paip-3d) .paip-label { position: absolute; right: 0; bottom: 8px; } }
@media (max-width: 960px) { .paip { height: auto; } .paip-kanvas { position: relative; height: 320px; } .paip-statik { height: 320px; } }
@media (prefers-reduced-motion: reduce) { .paip-label li, .paip-no { transition: none; } }
@media (max-width: 1180px) { .sakti { grid-template-columns: minmax(0, 1fr); } .paip { height: clamp(320px, 52vw, 460px); } } /* kad SAKTI bertindan (asal K2) */
@media (max-width: 960px) { .paip { height: auto; } }
/* K3 kontras (diukur piksel): label HUD 3D duduk atas halo terang semasa dok → pil gelap lut sinar di belakang teks
   (hero min 6.60 → ≥ K2); klien dalam kapsyen pentas 04 atas bayang lembut → teks lebih gelap. */
.tag3d { padding-block: 1px; }
.tag3d::selection { background: none; }
.tag3d > b, .tag3d { text-shadow: none; }
.tag3d { background: linear-gradient(90deg, transparent 0 18px, rgb(10 16 32 / .62) 18px); border-radius: 4px; padding-right: 6px; }
.tag3d.kiri { background: linear-gradient(270deg, transparent 0 18px, rgb(10 16 32 / .62) 18px); padding-left: 6px; padding-right: 22px; }
.pameran-kerja .k-klien { color: #3D4760; }

/* =========================================================================
   Arah K4 — tambahan atas K3 (logo DIKUNCI, enam teknik makmal, lima fix K3)
   ========================================================================= */
/* Fix (c): viewport pendek desktop — tapak rak turun 28px (scene.js GELANG_PENDEK), pantulan lantai pudar lebih rendah */
@media (min-width: 961px) and (max-height: 819px) {
  .monolith-kanvas { -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent calc(100% - 117px)); mask-image: linear-gradient(to bottom, #000 calc(100% - 150px), transparent calc(100% - 117px)); }
}
/* Fix (a): label HUD hero — K3 pil gelap bertepi (nampak macam chip UI) → scrim lembut TANPA tepi (radial closest-side,
   pudar ke 0 di sempadan kotak). Dipilih dari 5 varian (_banding-label-hero.png): kontras label piksel naik
   13.98/14.14/9.41 → 15.31/15.29/10.23 (rehat / condong / rak terbuka); varian tanpa latar jatuh ke 6.60. */
.tag3d { padding: 8px 16px 8px 22px; margin-top: calc(-0.75em - 7px); border-radius: 0;
  background: radial-gradient(closest-side at calc(50% + 4px) 50%, rgb(10 16 32 / .78) 62%, rgb(10 16 32 / 0) 100%); }
.tag3d.kiri { padding: 8px 22px 8px 16px; background: radial-gradient(closest-side at calc(50% - 4px) 50%, rgb(10 16 32 / .78) 62%, rgb(10 16 32 / 0) 100%); }

/* ---------- A. Logo DIKUNCI ---------- */
/* Header: lockup-header (tanda + TECH LEAD), tinggi 36px (README DIKUNCI); lebih kecil bila ruang sempit (min 24px) */
.jenama img { height: var(--logo-t, 36px); width: auto; }
.jenama .logo-siang { margin-top: calc(var(--logo-t, 36px) / -2); }
@media (max-width: 1180px) { .kepala { --logo-t: 30px; } }
@media (max-width: 960px) { .kepala { --logo-t: 28px; } }
@media (max-width: 400px) { .kepala { --logo-t: 24px; } .kepala-baris { gap: 12px; } }
/* Kaki: lockup utama 56px + tagline. Cap TECH LEAD = 17.28/48 × 56 = 20.16px → cap tagline 0.45× = 9.07px →
   tinggi fail tagline = 9.07 × 26.29/23.63 = 10.09px. Atas cap tagline = bawah tanda (40.7/48 × 56 = 47.48px) + 20.16px
   = 67.64px dari atas lockup; cap bermula 0.93px dalam fail → margin-top = 67.64 − 0.93 − 56 = 10.71px. Kiri = tepi kiri tanda (x 0). */
.kaki-jenama .kaki-lockup { display: block; height: 56px; width: auto; }
.kaki-jenama .kaki-tagline { display: block; height: 10.09px; width: auto; margin-top: 10.71px; }
.kaki-jenama p { display: none; }

/* CTA: objek garis memampat jadi tanda DIKUNCI; tanda padu gradient muncul di dalam rangka (200ms selepas 200ms morph).
   Tanpa JS: tanda padu terus kelihatan (garis CTA sudah bentuk "tanda", data-awal). */
.tanda-isi { opacity: 0; transition: opacity 200ms ease 200ms; }
html:not(.js) .tanda-isi, .serah .pentas[data-salinan="cta"][data-peringkat="tanda"] .tanda-isi { opacity: 1; }
.pentas[data-salinan="siang"] .tanda-isi, .pentas[data-salinan="malam"] .tanda-isi { display: none; }
.objek-bingkai::after { left: 50%; } /* nafas cahaya di tengah tanda (K3: nod Monolith 47.5%) */
@media (max-width: 960px) { .tanda-isi { transition: none; } }

/* ---------- Fix (d): kapsyen 04 satu baris: klien · nama → ---------- */
.pameran-kerja .unggul-teks { grid-template-columns: auto; gap: 2px; }

/* ---------- Fix (e): 05 AI — baris jadi pemilih (gaya senarai K3 + penanda aktif macam 04) ---------- */
.senarai-pilih li { display: block; padding: 0; }
.senarai-pilih .pilih {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 20px; width: 100%;
  padding: 22px 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.senarai-pilih .ai-tajuk { font-size: 17.5px; font-weight: 560; letter-spacing: -0.01em; line-height: 1.4; }
.senarai-pilih .ai-ayat { color: var(--kelabu); font-size: 16px; }
.senarai-pilih .pilih::before { content: ""; position: absolute; left: -16px; top: 22px; bottom: 22px; width: 2px; background: var(--navy); transform: scaleY(0); transition: transform 220ms var(--lengkung); }
.senarai-pilih .pilih[aria-pressed="true"]::before { transform: scaleY(1); }
.senarai-pilih .pilih[aria-pressed="true"] .ai-tajuk { color: var(--navy); }
.senarai-pilih li.dipilih { background: rgb(29 58 138 / .035); }
.senarai-pilih .pilih:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
@media (max-width: 960px) { .senarai-pilih .pilih::before { left: -10px; } }
@media (max-width: 640px) { .senarai-pilih .pilih { grid-template-columns: minmax(0, 1fr); gap: 4px; } }
/* bingkai 05: HadirAi = tetingkap web + telefon (gaya Products HadirAi); claims = satu tetingkap; Telegram = lukisan garis */
.pameran-ai.pameran-telefon .tetingkap-depan { width: 72%; transform: translate3d(-6%, 5%, 20px); }
.pameran-ai .telefon { right: 6%; height: 86%; }
.pameran-ai .tetingkap-depan { width: 82%; transform: translate3d(4%, 5%, 30px); }
.lukisan { position: relative; height: 92%; aspect-ratio: 480 / 560; padding: 3%; border-radius: 16px; transform: translateZ(30px);
  background: linear-gradient(180deg, #FFFFFF, #F4F6FA); box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 36px 60px -26px rgb(11 19 38 / .35); }
.lukisan img { width: 100%; height: 100%; object-fit: contain; display: block; }
@media (prefers-reduced-motion: reduce) { .senarai-pilih .pilih::before { transition: none; } }

/* =========================================================================
   K4 — enam teknik makmal (01, 02, 04, 05, 06, 08). Setiap satu hanya hidup bila browser sokong DAN tiada kelas
   html.tiada-* (kepala index.html; ?tanpa-api paksa semua mati untuk semakan). Tanpa sokongan = kelakuan K3.
   ========================================================================= */

/* ---------- 01 View Transitions (makmal 01) ---------- */
/* Merentas dokumen: sedia untuk page lain portal (K4 masih satu page). Same-document: showcase 03 / 04 / 05. */
@view-transition { navigation: auto; }
html:not(.tiada-vt) .kepala { view-transition-name: kepala; }          /* kepala kekal di atas bingkai semasa transisi */
html:not(.tiada-vt) #pameran-produk .peranti-pentas { view-transition-name: pameran-produk; }
html:not(.tiada-vt) #pameran-kerja .peranti-pentas { view-transition-name: pameran-kerja; }
html:not(.tiada-vt) #pameran-ai .peranti-pentas { view-transition-name: pameran-ai; }
html:not(.tiada-vt) #pameran-produk .unggul-teks { view-transition-name: pameran-produk-teks; }
html:not(.tiada-vt) #pameran-kerja .unggul-teks { view-transition-name: pameran-kerja-teks; }
html:not(.tiada-vt) #pameran-ai .unggul-teks { view-transition-name: pameran-ai-teks; }
/* root tidak crossfade: page di belakang kekal hidup (morph objek garis 05 AI tidak nampak berganda) */
::view-transition-old(root), ::view-transition-new(root) { animation: none; }
::view-transition-group(*) { animation-duration: 390ms; animation-timing-function: cubic-bezier(.2, .7, .2, 1); }
/* tandatangan K3 dikekalkan: lama condong keluar ke belakang 170ms → baharu masuk dari belakang 220ms (≤ 400ms) */
::view-transition-old(pameran-produk), ::view-transition-old(pameran-kerja), ::view-transition-old(pameran-ai) {
  animation: vt-keluar 170ms cubic-bezier(.5, 0, .9, .5) both; }
::view-transition-new(pameran-produk), ::view-transition-new(pameran-kerja), ::view-transition-new(pameran-ai) {
  animation: vt-masuk 220ms cubic-bezier(.2, .7, .2, 1) 170ms both; }
::view-transition-old(pameran-produk-teks), ::view-transition-old(pameran-kerja-teks), ::view-transition-old(pameran-ai-teks) { animation: vt-pudar 170ms linear both; }
::view-transition-new(pameran-produk-teks), ::view-transition-new(pameran-kerja-teks), ::view-transition-new(pameran-ai-teks) { animation: vt-pudar 220ms linear 170ms reverse both; }
@keyframes vt-keluar { to { opacity: 0; transform: perspective(1500px) rotateY(-24deg) translate3d(-5%, 2%, -140px); } }
@keyframes vt-masuk { from { opacity: 0; transform: perspective(1500px) rotateY(20deg) translate3d(6%, 2%, -180px); } }
@keyframes vt-pudar { to { opacity: 0; } }
/* 04 cermin: condong arah bertentangan */
::view-transition-old(pameran-kerja) { animation-name: vt-keluar-cermin; }
::view-transition-new(pameran-kerja) { animation-name: vt-masuk-cermin; }
@keyframes vt-keluar-cermin { to { opacity: 0; transform: perspective(1500px) rotateY(24deg) translate3d(5%, 2%, -140px); } }
@keyframes vt-masuk-cermin { from { opacity: 0; transform: perspective(1500px) rotateY(-20deg) translate3d(-6%, 2%, -180px); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }

/* ---------- 02 Scroll-driven (makmal 02): ufuk, reveal, serahan 3D → garis ikut jari ---------- */
/* Hero 160vh → julat pin 60vh. K3 serah pada pose 0.7 (42vh) dengan 380ms; di sini kanvas pudar 34–54vh dan garis
   melukis diri 36–56vh (20vh: cukup bingkai pada skrol biasa), IKUT jari (boleh undur separuh jalan). Ufuk K3: p = (y − hujung pin − 0.18vh)/0.55vh =
   julat "exit 18% → exit 73%" pada view timeline hero. JS (scene.js) hanya melukis 3D. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.tiada-sd) { timeline-scope: --hero; }
    html:not(.tiada-sd) .hero { view-timeline: --hero block; animation: k4-ufuk linear both; animation-timeline: --hero; animation-range: exit 18% exit 73%; }
    html:not(.tiada-sd) .ufuk-cahaya { animation: k4-nyala linear both; animation-timeline: --hero; animation-range: exit 18% exit 73%; }
    html:not(.tiada-sd) .hero-wrap { animation: k4-angkat linear both; animation-timeline: --hero; animation-range: exit 18% exit 73%; }
    html:not(.tiada-sd) #hosting > .wrap { animation: k4-terbit linear both; animation-timeline: --hero; animation-range: exit 18% exit 73%; }
    html.js:not(.tiada-sd) .muncul { animation: k4-muncul linear backwards; animation-timeline: view(); animation-range: entry 0% entry 45%; }
    @media (min-width: 961px) {
      html:not(.tiada-sd)[data-serah-oleh="3d"] .monolith-kanvas { animation: k4-pudar linear both; animation-timeline: scroll(root block); animation-range: 34vh 54vh; transition: none; }
      html:not(.tiada-sd)[data-serah-oleh="3d"] .label-3d.sedia { animation: k4-label linear both; animation-timeline: scroll(root block); animation-range: 36vh 44vh; transition: none; }
      html:not(.tiada-sd)[data-serah-oleh="3d"] .objek path { animation: k4-lukis linear both; animation-timeline: scroll(root block); animation-range: 36vh 56vh; }
    }
  }
}
@keyframes k4-ufuk { from { clip-path: inset(0 0 0 round 0 0 0 0); } to { clip-path: inset(0 16px 0 round 0 0 56px 56px); } }
@keyframes k4-nyala { from { opacity: 0; } to { opacity: 1; } }
@keyframes k4-angkat { from { transform: none; } to { transform: translateY(-28px); } }
@keyframes k4-terbit { from { transform: translateY(36px); } to { transform: none; } }
@keyframes k4-muncul { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes k4-pudar { from { opacity: 1; transform: none; } to { opacity: 0; transform: scale(1.045); } }
@keyframes k4-label { from { opacity: 1; } to { opacity: 0; } }
@keyframes k4-lukis { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* ---------- 05 Spring linear() preset "sederhana" (makmal 05): lajak 1.9%, mendap 400ms ---------- */
:root { --spring: var(--lengkung); --spring-masa: var(--masa); }
@supports (transition-timing-function: linear(0, 1)) {
  html:not(.tiada-spring) {
    --spring: linear(0, 0.0685, 0.1393, 0.2107, 0.2815, 0.3505, 0.4169, 0.4802, 0.5397, 0.5953, 0.6468, 0.6941, 0.7373, 0.7764, 0.8116, 0.843, 0.8708, 0.8954, 0.9169, 0.9355, 0.9515, 0.9652, 0.9768, 0.9865, 0.9945, 1.001, 1.0062, 1.0102, 1.0133, 1.0155, 1.0171, 1.018, 1.0185, 1.0185, 1.0182, 1.0177, 1.017, 1.0161, 1.0151, 1.0141, 1.013, 1.0119, 1.0108, 1.0098, 1.0088, 1.0078, 1.0069, 1.0061, 1);
    --spring-masa: 400ms;
  }
  /* butang */
  html:not(.tiada-spring) .butang { transition: box-shadow var(--spring-masa) var(--spring), background-color var(--spring-masa) var(--spring), border-color var(--spring-masa) var(--spring), transform var(--spring-masa) var(--spring); }
  html:not(.tiada-spring) .butang .anak-panah { transition: transform var(--spring-masa) var(--spring); }
  html:not(.tiada-spring) .butang:hover { transform: translateY(-2px); }
  html:not(.tiada-spring) .butang:active { transform: translateY(0) scale(.98); }
  /* kad (jubin klien, pasukan, kad kerja) */
  html:not(.tiada-spring) .klien-logo li, html:not(.tiada-spring) .pasukan li { transition: transform var(--spring-masa) var(--spring), box-shadow var(--spring-masa) var(--spring); }
  html:not(.tiada-spring) .kerja .k::before, html:not(.tiada-spring) .senarai-pilih .pilih::before { transition: transform var(--spring-masa) var(--spring); }
  html:not(.tiada-spring) .k-nama { transition: transform var(--spring-masa) var(--spring); }
  /* slab: bingkai peranti (masuk K3 bila tiada View Transition) + condong ikut mouse dilepaskan */
  html:not(.tiada-spring) .pameran:not(.tukar-keluar):not(.tukar-mula):not(.condong) .peranti { transition: transform var(--spring-masa) var(--spring), opacity 220ms var(--lengkung); }
  /* menu mudah alih: turun + mendap (K3 muncul terus). visibility = link tersorok tak boleh difokus */
  @media (max-width: 960px) {
    html.js:not(.tiada-spring) .nav { display: flex; transform-origin: top; transition: transform var(--spring-masa) var(--spring), opacity 240ms ease, visibility 0s var(--spring-masa); }
    html.js:not(.tiada-spring) .nav:not(.buka) { transform: translateY(-12px) scaleY(.96); opacity: 0; visibility: hidden; pointer-events: none; }
    html.js:not(.tiada-spring) .nav.buka { transition: transform var(--spring-masa) var(--spring), opacity 240ms ease, visibility 0s; }
  }
}

/* ---------- 06 @property: TIGA tempat sahaja (makmal 06) ---------- */
@property --sapu { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
@property --nafas { syntax: "<number>"; inherits: false; initial-value: 0; }
@property --sudut { syntax: "<angle>"; inherits: false; initial-value: 40deg; }
@property --kuat { syntax: "<number>"; inherits: false; initial-value: .45; }
/* (1) sapuan kaca slab: tetingkap depan showcase 03 / 04 / 05, bila hover bingkai (sentuh: sekali bila masuk skrin) */
html:not(.tiada-prop) .pameran .tetingkap-depan::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit;
  background: linear-gradient(105deg, rgb(var(--cahaya) / 0) calc(var(--sapu) - 16%), rgb(var(--cahaya) / .22) calc(var(--sapu) - 5%),
    rgb(255 255 255 / .55) calc(var(--sapu) - .6%), rgb(var(--cahaya) / .30) calc(var(--sapu) + .6%), rgb(var(--cahaya) / .10) calc(var(--sapu) + 6%), rgb(var(--cahaya) / 0) calc(var(--sapu) + 14%));
  transition: --sapu 400ms cubic-bezier(.2, .7, .2, 1);
}
html:not(.tiada-prop) .pameran:hover .tetingkap-depan::after, html:not(.tiada-prop) .pameran.sapuan .tetingkap-depan::after { --sapu: 140%; }
/* (2) ufuk bernafas: separuh kitaran 1000ms (pengecualian "cahaya" K2/K3, sama LED rak + nafas tanda) */
html:not(.tiada-prop) .ufuk-cahaya {
  background: linear-gradient(90deg, transparent calc(4% + var(--nafas) * 8%), rgb(226 235 255 / calc(.7 + var(--nafas) * .3)) 50%, transparent calc(96% - var(--nafas) * 8%));
  box-shadow: 0 0 calc(22px + var(--nafas) * 14px) calc(4px + var(--nafas) * 4px) rgb(160 190 255 / calc(.18 + var(--nafas) * .16));
}
@media (prefers-reduced-motion: no-preference) {
  html:not(.tiada-prop):not(.tiada-sd) .ufuk-cahaya { animation: k4-nyala linear both, k4-nafas 1000ms ease-in-out infinite alternate; animation-timeline: --hero, auto; animation-range: exit 18% exit 73%, normal; }
  html.tiada-sd:not(.tiada-prop) .ufuk-cahaya { animation: k4-nafas 1000ms ease-in-out infinite alternate; }
}
@keyframes k4-nafas { from { --nafas: 0; } to { --nafas: 1; } }
/* (3) rim kad SAKTI: cahaya conic merah jambu SAKTI beralih ke arah hover (400ms) + cahaya dalaman ikut sudut */
html:not(.tiada-prop) .sakti { isolation: isolate; transition: --sudut 400ms cubic-bezier(.2, .7, .2, 1), --kuat 400ms cubic-bezier(.2, .7, .2, 1);
  background: radial-gradient(60% 90% at calc(50% + sin(var(--sudut)) * 48%) calc(50% - cos(var(--sudut)) * 62%), rgb(255 154 166 / calc(var(--kuat) * .16)), transparent 70%),
    radial-gradient(120% 95% at 88% 38%, #7A1420 0%, #4A0E17 46%, #26060C 100%); }
html:not(.tiada-prop) .sakti::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; padding: 1.5px; --sudut: inherit; --kuat: inherit;
  background: conic-gradient(from var(--sudut), rgb(255 154 166 / var(--kuat)), rgb(255 154 166 / 0) 16%, rgb(255 154 166 / 0) 84%, rgb(255 154 166 / var(--kuat))) border-box;
  -webkit-mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
html:not(.tiada-prop) .sakti::before { opacity: 0; }
html:not(.tiada-prop) .sakti:hover, html:not(.tiada-prop) .sakti.sapuan { --sudut: -40deg; --kuat: 1; }
@media (prefers-reduced-motion: reduce) { html:not(.tiada-prop) .sakti, html:not(.tiada-prop) .pameran .tetingkap-depan::after { transition: none; } }

/* ---------- 08 Variable font wght ikut skrol + hover, balance / pretty (makmal 08) ---------- */
/* Lebar Instrument Sans naik 3.6% dari 500 → 700 = 0.0143em setiap aksara setiap 200 wght → letter-spacing dipampas
   (0.0000715em setiap unit wght) supaya lebar baris kekal dan bilangan baris tidak melompat. */
@property --ws { syntax: "<number>"; inherits: false; initial-value: 560; } /* inherits false: sifat berdaftar yang diwarisi menambah kos kira gaya seluruh dokumen */
@property --wh { syntax: "<number>"; inherits: false; initial-value: 0; }
.bab h2, .cta h2 { text-wrap: balance; }
.hero-lead, .lead, .cta-lead, .sakti-perihal, .unggul-ayat, .senarai p, .ai-ayat, .k-hasil, .s-teks { text-wrap: pretty; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.tiada-sd) .h-hero { --ws: 620; font-weight: calc(var(--ws) + var(--wh)); letter-spacing: calc(-0.042em - (var(--ws) + var(--wh) - 560) * 0.0000715em);
      animation: k4-berat-hero steps(12) both; animation-timeline: scroll(root block); animation-range: 0 60vh; transition: --wh 400ms cubic-bezier(.2, .7, .2, 1); }
    html:not(.tiada-sd) .h-hero:hover { --wh: 80; }
    html:not(.tiada-sd) .bab h2, html:not(.tiada-sd) .cta h2 { --ls: -0.035em; font-weight: calc(var(--ws) + var(--wh)); letter-spacing: calc(var(--ls) - (var(--ws) + var(--wh) - 560) * 0.0000715em);
      animation: k4-berat-bab steps(10) both; animation-timeline: view(); animation-range: entry 10% cover 45%; transition: --wh 400ms cubic-bezier(.2, .7, .2, 1); }
    html:not(.tiada-sd) .bab h2:hover, html:not(.tiada-sd) .cta h2:hover { --wh: 60; }
    @media (max-width: 640px) { html:not(.tiada-sd) .h-hero { letter-spacing: calc(-0.04em - (var(--ws) + var(--wh) - 560) * 0.0000715em); } }
  }
}
/* steps(): berat bertukar setiap 10 wght (tak kelihatan bertangga) — tajuk dilukis semula 12 kali sepanjang pin,
   bukan setiap frame skrol (GPU perisian / SwiftShader: kos teks besar gradient) */
@keyframes k4-berat-hero { from { --ws: 620; } to { --ws: 500; } }
@keyframes k4-berat-bab { from { --ws: 500; } to { --ws: 600; } }
html:not(.tiada-sd) .cta h2 { --ls: -0.04em; }
/* Fix (b): kad SAKTI — K3: lajur teks 269px, kad 664px (K2 511). Dipilih dari 7 varian (_banding-kad-sakti.png):
   ayat AI-ready + platform + link jadi kaki merentang dua lajur; model pipeline "bleed" ke padding kanan, tinggi model
   kekal K3. Kad 644px (−20), lajur teks 309px (+40, ≈ K2), objek pipeline 409px (K3 406), label tak lintasi cincin. */
.sakti-kaki .sakti-ai { margin-top: 14px; }
@media (min-width: 1181px) {
  .sakti { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); row-gap: 0; column-gap: 12px; }
  .sakti-kaki { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 24px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgb(255 214 220 / .16); }
  .sakti-kaki .sakti-ai { grid-row: 1 / 3; margin-top: 0; }
  .sakti-kaki .sakti-plat { margin-top: 0; text-align: right; }
  .sakti-kaki .link-teks { margin-top: 0; justify-self: end; }
  .paip { height: clamp(320px, 31vw, 440px); margin-right: calc(-1 * clamp(26px, 3.2vw, 44px) + 14px); } /* tinggi K3: saiz model pulih */
}
@media (max-width: 1180px) { .sakti-kaki { order: 1; margin-top: -24px; } .sakti .paip { order: 2; } } /* bertindan: susunan K3 (teks + kaki, kemudian model) */
.objek .tanda-isi path { fill: url(#tanda-k4); stroke: none; vector-effect: none; } /* `.objek path { fill: none }` K3 */
.sub-label { color: #4C5870; } /* K4: lebih gelap 3 aras dari --kelabu supaya kontras atas kabus + grain kekal ≥ K3 (5.87) walau susun atur berubah */
/* K4: GPU perisian (SwiftShader / llvmpipe): scene.js tambah html.gl-perisian + tiada-sd → animasi ikut skrol ikut
   kelakuan K3 (JS), dan nafas ufuk dimatikan. Diukur berpasangan: animasi ikut skrol kos +0.7 fps pada GPU perisian. */
html.gl-perisian .ufuk-cahaya { animation: k4-nyala linear both !important; animation-timeline: --hero !important; animation-range: exit 18% exit 73% !important; }
html.gl-perisian.tiada-sd .ufuk-cahaya { animation: none !important; }
html.gl-perisian .h-hero, html.gl-perisian .bab h2, html.gl-perisian .cta h2 { animation: none !important; --ws: 560; }
@media (prefers-reduced-motion: reduce) { html.gl-perisian .ufuk-cahaya { animation: none !important; } }

/* =========================================================================
   Arah K5 — keputusan Razlan 20 Okt 2026 ("ya setuju"): A + sedikit B + tiga item
   A. Lajur kanan = pentas visual. Desktop ≥1181 + JS: bingkai 03/04/05 dan foto rak 01 duduk di lajur kanan (sticky,
      sejajar kotak objek pentas), lajur kiri = teks / jadual / senarai. Bila bingkai masuk skrin, objek garis morph jadi
      rangka bingkai itu (motion.js, peringkat "bingkai-*") kemudian pudar sambil bingkai sebenar muncul (scroll-driven;
      fallback kelas ≤ 400ms). 02 / 06 / 07: objek garis + bacaan (teks sedia ada) dan lebih besar.
   B. Kedalaman halus: grid samar + gradient seksyen + bingkai sudut lebih tegas.
   + pintu assistant (makmal 09), skrin monitor WEB (scene.js), tagline kaki ≥ 11px.
   ≤1180 / tanpa JS / reduced-motion tanpa JS: susun atur K4.
   ========================================================================= */
@property --tutup1 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tutup3 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tutup4 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tutup5 { syntax: "<number>"; inherits: true; initial-value: 0; }
:root { --hud-t: 100px; --atas-pentas: calc(var(--kepala-t) + 24px); --ruang-pentas: calc(100vh - var(--atas-pentas) - 24px - var(--hud-t) - 12px); }

/* ---------- A1. Foto rak 01 (semua lebar) ---------- */
.pameran-foto { margin-top: 48px; }
.foto-bingkai {
  position: relative; max-width: 440px; aspect-ratio: 4 / 5; border-radius: 18px; overflow: hidden; background: var(--malam);
  box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 36px 60px -26px rgb(11 19 38 / .45), 0 10px 24px -14px rgb(11 19 38 / .25);
}
.foto-bingkai img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-bingkai::after { /* garis cahaya atas bingkai + tepi dalam (bahan sama dengan tetingkap) */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .10), inset 0 1px 0 rgb(255 255 255 / .18);
}
.foto-kapsyen { margin-top: 26px; } /* jauh dari bayang bingkai foto */
.foto-kapsyen .unggul-meta { display: block; margin-top: 0; line-height: 1.7; color: #3D4760; } /* lebih gelap dari --kelabu (sama 04 k-klien K3): kontras ≥ K4 walau atas tepi bayang */
@media (max-width: 640px) { .foto-bingkai { max-width: none; } }

/* ---------- A2. Lajur kanan pentas visual (≥1181 lebar DAN ≥800 tinggi, JS) ----------
   Viewport pendek (cth 1280×720, 1366×768): bingkai terpaksa dikecilkan 22–24% supaya muat di atas HUD → susun atur K4
   dikekalkan di situ (tiada regresi saiz bingkai). */
@media (min-width: 1181px) and (min-height: 680px) {
  /* bab lebih tinggi dari viewport supaya julat entry/exit timeline bab sama maksud di semua saiz (subjek < viewport tukar maksud) */
  html.js .bab-pameran { min-height: calc(100vh + 40px); }
  html.js .bab-pameran > .wrap > .lajur {
    max-width: none; display: grid; align-items: start; column-gap: 40px;
    grid-template-columns: minmax(0, calc(var(--lebar) * .47)) minmax(0, 1fr);
  }
  html.js .bab-pameran > .wrap > .lajur > * { grid-column: 1; }
  html.js .bab-pameran > .wrap > .lajur > [data-bingkai] {
    grid-column: 2; grid-row: 1 / span 12; position: sticky; top: var(--atas-pentas); z-index: 2;
    /* kedudukan asal dinaikkan supaya bingkai SUDAH di pentas (sticky) bila bab sampai separuh skrin → ia tak pernah
       naik melalui HUD bacaan/rel; ia hanya muncul di tempatnya (padding .bab = clamp(96px, 12vw, 160px)) */
    margin-top: calc(var(--atas-pentas) - 50vh - clamp(96px, 12vw, 160px));
  }
  /* bingkai showcase: lebih tinggi dari K4 (16/12, isi lajur), dihadkan ikut tinggi viewport supaya kapsyen di atas HUD */
  html.js .bab-pameran .pameran .peranti-pentas { aspect-ratio: 16 / 12.4; width: min(100%, calc((var(--ruang-pentas) - 150px) * 16 / 12.4)); margin-left: auto; }
  html.js .bab-pameran .pameran .unggul-teks { margin-top: 18px; max-width: none; padding-left: 4px; }
  html.js .bab-pameran .pameran .tetingkap-depan { width: 97%; transform: translate3d(2%, 9%, 46px); }
  html.js .bab-pameran .pameran .tetingkap-belakang { width: 76%; top: 4%; }
  html.js .bab-pameran .pameran-kerja .tetingkap-depan { transform: translate3d(-2%, 9%, 46px); }
  html.js .bab-pameran .pameran.pameran-telefon .tetingkap-depan { width: 82%; transform: translate3d(-9%, 6%, 20px); }
  html.js .bab-pameran .pameran .telefon { height: 86%; right: 3%; }
  html.js .bab-pameran .pameran .kiosk { width: 66%; }
  html.js .bab-pameran .pameran-ai .tetingkap-depan { width: 97%; }
  html.js .bab-pameran .pameran-ai.pameran-telefon .tetingkap-depan { width: 84%; }
  html.js .bab-pameran .pameran .lukisan { height: 96%; }
  /* foto rak 01 */
  html.js .bab-pameran .pameran-foto .foto-bingkai { max-width: none; width: min(100%, calc((var(--ruang-pentas) - 44px) * .8)); margin-left: auto; }
  html.js .bab-pameran .pameran-foto .foto-kapsyen { width: min(100%, calc((var(--ruang-pentas) - 44px) * .8)); margin-left: auto; }
  /* jadual produk dalam lajur 47%: platform boleh balut (status kekal satu baris) */
  html.js #produk .jadual-produk td:nth-child(3) { white-space: normal; }
  html.js #kerja .kerja { grid-template-columns: minmax(0, 1fr); }
  html.js #kerja .klien-logo { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Mod scroll-driven: bingkai muncul ikut jari bila masuk (entry 45–100%), pudar bila keluar (exit 0–40%).
   Objek garis (salinan data-salinan="malam" + "siang") pudar dengan julat yang SAMA (timeline bingkai bernama, @property --tutupN). */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.tiada-sd) { timeline-scope: --hero, --k5-hosting, --k5-produk, --k5-kerja, --k5-ai; }
    @media (min-width: 1181px) and (min-height: 680px) {
      html.js:not(.tiada-sd) #hosting { view-timeline: --k5-hosting block; }
      html.js:not(.tiada-sd) #produk { view-timeline: --k5-produk block; }
      html.js:not(.tiada-sd) #kerja { view-timeline: --k5-kerja block; }
      html.js:not(.tiada-sd) #ai { view-timeline: --k5-ai block; }
      html.js:not(.tiada-sd) .bab-pameran > .wrap > .lajur > [data-bingkai] { animation: k5-bingkai linear both; }
      html.js:not(.tiada-sd) #foto-hosting { animation-timeline: --k5-hosting; }
      html.js:not(.tiada-sd) #pameran-produk { animation-timeline: --k5-produk; }
      html.js:not(.tiada-sd) #pameran-kerja { animation-timeline: --k5-kerja; }
      html.js:not(.tiada-sd) #pameran-ai { animation-timeline: --k5-ai; }
      html.js:not(.tiada-sd) .bab-pameran [data-bingkai] :is(.unggul-teks, .foto-kapsyen) { animation: k5-kapsyen linear both; }
      html.js:not(.tiada-sd) #foto-hosting .foto-kapsyen { animation-timeline: --k5-hosting; }
      html.js:not(.tiada-sd) #pameran-produk .unggul-teks { animation-timeline: --k5-produk; }
      html.js:not(.tiada-sd) #pameran-kerja .unggul-teks { animation-timeline: --k5-kerja; }
      html.js:not(.tiada-sd) #pameran-ai .unggul-teks { animation-timeline: --k5-ai; }
      html.js:not(.tiada-sd) .pentas[data-salinan="malam"], html.js:not(.tiada-sd) .pentas[data-salinan="siang"] {
        animation: k5-tutup1 linear both, k5-tutup3 linear both, k5-tutup4 linear both, k5-tutup5 linear both;
        animation-timeline: --k5-hosting, --k5-produk, --k5-kerja, --k5-ai;
      }
    }
  }
}
/* julat = timeline BAB (bukan bingkai). Bab separuh skrin (entry 50%): garis sudah jadi rangka bingkai (motion.js) dan mula pudar
   50→57%; bingkai muncul di tempatnya 52→64%; kapsyen potong keras pada 64% (selepas garis tiada → teks tak pernah atas garis, tak pernah separa).
   Keluar: kapsyen hilang pada exit 0%, bingkai pudar 0→12%, garis kembali 13→22% (selepas bingkai tiada). */
@keyframes k5-bingkai {
  entry 0% { opacity: 0; visibility: hidden; scale: .985; }
  entry 52% { opacity: 0; visibility: hidden; scale: .985; }
  entry 53% { visibility: visible; }
  entry 64% { opacity: 1; visibility: visible; scale: 1; }
  exit 0% { opacity: 1; visibility: visible; scale: 1; }
  exit 11% { visibility: visible; }
  exit 12% { opacity: 0; visibility: hidden; }
  exit 100% { opacity: 0; visibility: hidden; }
}
/* kapsyen: potong keras (step-end) → legap hanya 0 atau 1, tak pernah separa walau skrol berhenti di tengah peralihan.
   Muncul pada entry 64% (bingkai sudah legap penuh), hilang pada exit 0% (sebelum bingkai mula pudar). */
@keyframes k5-kapsyen { entry 0% { opacity: 0; animation-timing-function: step-end; } entry 64% { opacity: 1; animation-timing-function: step-end; } exit 0% { opacity: 0; animation-timing-function: step-end; } exit 100% { opacity: 0; } }
@keyframes k5-tutup1 { entry 50% { --tutup1: 0; } entry 57% { --tutup1: 1; } exit 13% { --tutup1: 1; } exit 22% { --tutup1: 0; } }
@keyframes k5-tutup3 { entry 50% { --tutup3: 0; } entry 57% { --tutup3: 1; } exit 13% { --tutup3: 1; } exit 22% { --tutup3: 0; } }
@keyframes k5-tutup4 { entry 50% { --tutup4: 0; } entry 57% { --tutup4: 1; } exit 13% { --tutup4: 1; } exit 22% { --tutup4: 0; } }
@keyframes k5-tutup5 { entry 50% { --tutup5: 0; } entry 57% { --tutup5: 1; } exit 13% { --tutup5: 1; } exit 22% { --tutup5: 0; } }
.pentas[data-salinan="malam"] .objek, .pentas[data-salinan="siang"] .objek,
.pentas[data-salinan="malam"] .sudut, .pentas[data-salinan="siang"] .sudut,
.pentas[data-salinan="siang"] .objek-bingkai::before {
  opacity: calc(1 - min(1, var(--tutup1) + var(--tutup3) + var(--tutup4) + var(--tutup5)));
}
/* Mod kelas (tiada scroll-driven / GPU perisian / reduced-motion): motion.js tanda bingkai yang sudah sampai pentas
   (.di-pentas) + html.tutup-garis. Masa 380ms (≤ 400ms); reduced-motion = terus (peraturan K3 global). */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas .bab-pameran > .wrap > .lajur > [data-bingkai] { animation: none; opacity: 0; visibility: hidden; transition: opacity 380ms var(--lengkung), visibility 0s 380ms; }
  html.js.k5-kelas .bab-pameran > .wrap > .lajur > [data-bingkai].di-pentas { opacity: 1; visibility: visible; transition: opacity 380ms var(--lengkung), visibility 0s; }
  html.js.k5-kelas.tutup-garis .pentas:not([data-salinan="cta"]) :is(.objek, .sudut) { opacity: 0; }
  html.js.k5-kelas.tutup-garis .pentas[data-salinan="siang"] .objek-bingkai::before { opacity: 0; }
  html.js.k5-kelas .pentas :is(.objek, .sudut) { transition: opacity 300ms var(--lengkung); }
}

/* ---------- A3. Objek garis 02 / 06 / 07: lebih besar + bacaan (teks sedia ada) ---------- */
.baca { opacity: 0; pointer-events: none; transition: opacity 260ms var(--lengkung); }
.baca text { font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; fill: var(--kelabu); }
.baca .b-no { fill: var(--navy); }
.baca .b-mono { font: 600 17px/1 var(--sans); letter-spacing: .02em; text-transform: none; fill: var(--ink); }
.baca .b-tahun { font-size: 11px; letter-spacing: .04em; text-transform: none; }
.baca .b-kod { font-size: 11px; letter-spacing: .02em; }
.baca .b-kod[data-kod="210107"], .baca .b-kod.jumpa { fill: var(--navy); font-weight: 700; }
.baca.ada-cari .b-kod[data-kod="210107"]:not(.jumpa) { fill: var(--kelabu); font-weight: 500; }
@media (min-width: 1181px) {
  html.js.serah .pentas[data-salinan="siang"][data-peringkat="rangkaian"] .baca[data-baca="rangkaian"],
  html.js.serah .pentas[data-salinan="siang"][data-peringkat="pasukan"] .baca[data-baca="pasukan"],
  html.js.serah .pentas[data-salinan="siang"][data-peringkat="rekod"] .baca[data-baca="rekod"] { opacity: 1; transition-delay: 220ms; }
}
@media (min-width: 961px) {
  .pentas[data-salinan="siang"] .objek { transform-origin: 50% 50%; transition: transform 380ms var(--lengkung), opacity 300ms var(--lengkung); }
  .pentas[data-salinan="siang"]:is([data-peringkat="pasukan"], [data-peringkat="rekod"]) .objek { transform: scale(1.18); }
}
@media (min-width: 961px) and (max-width: 1180px) { .baca { display: none; } }
@media (max-width: 960px) { .baca { display: none; } }

/* ---------- B. Kedalaman halus pada badan ---------- */
/* grid samar 48px di zon pentas (lajur kanan) sahaja — bukan di belakang teks badan */
@media (min-width: 961px) {
  .bab::after {
    content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    /* + gradient bab hampir tak nampak (atas → bawah, ≤ 2% navy) dalam lapisan yang SAMA → hanya di zon lajur kanan, bukan
       di belakang teks badan (gradient seluruh bab menurunkan kontras badan 390 6.04 → 5.90, diukur) */
    background-image: linear-gradient(rgb(11 19 38 / .045) 1px, transparent 1px), linear-gradient(90deg, rgb(11 19 38 / .045) 1px, transparent 1px),
      linear-gradient(180deg, rgb(29 58 138 / 0) 0%, rgb(29 58 138 / .02) 100%);
    background-size: 48px 48px, 48px 48px, 100% 100%; background-position: calc(50% + 24px) 0, calc(50% + 24px) 0, 0 0;
    /* topeng mendatar: kosong sehingga hujung lajur teks (tengah + 0.075 × lebar), penuh dari tepi kiri pentas → tiada grid/tint
       di belakang teks badan (topeng radial awal menyentuh hujung lead 07: kontras 6.03 → 6.02, diukur) */
    -webkit-mask-image: linear-gradient(90deg, transparent calc(50% + var(--lebar) * .075 + 8px), #000 calc(50% + var(--lebar) * .14 + 8px));
    mask-image: linear-gradient(90deg, transparent calc(50% + var(--lebar) * .075 + 8px), #000 calc(50% + var(--lebar) * .14 + 8px));
  }
}
/* bingkai sudut pentas data-salinan="siang" lebih tegas */
@media (min-width: 961px) {
  .pentas[data-salinan="siang"] { --o-sudut: #8C96AB; --o-teks2: #465269; } /* HUD bacaan/rel atas grid + tint zon kanan: 4 aras lebih gelap dari --kelabu supaya kontras ≥ K4 (sebelum: 5.88) */
  .pentas[data-salinan="siang"] .sudut { width: 22px; height: 22px; }
  .pentas[data-salinan="siang"] :is(.s1, .s2) { border-top-width: 1.5px; }
  .pentas[data-salinan="siang"] :is(.s3, .s4) { border-bottom-width: 1.5px; }
  .pentas[data-salinan="siang"] :is(.s1, .s3) { border-left-width: 1.5px; }
  .pentas[data-salinan="siang"] :is(.s2, .s4) { border-right-width: 1.5px; }
  .pentas[data-salinan="siang"] .o-halus { stroke: #A4AEC2; }
}

/* ---------- C. Pintu assistant: butang terapung ---------- */
.pintu-ask { display: none; }
html.js .pintu-ask {
  position: fixed; z-index: 45; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: grid; place-items: center; align-content: center; gap: 5px; width: 56px; height: 56px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(var(--cahaya) / .5); color: var(--ais); background: radial-gradient(circle at 50% 30%, #1A2747, var(--malam) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 4px rgb(var(--cahaya) / .06), 0 14px 30px -10px rgb(5 9 20 / .55);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  view-transition-name: pintu-ask;
  transition: opacity 200ms var(--lengkung), visibility 0s, transform var(--spring-masa) var(--spring), border-color var(--spring-masa) var(--spring), box-shadow var(--spring-masa) var(--spring);
}
.pintu-titik { width: 7px; height: 7px; transform: rotate(45deg); background: rgb(var(--cahaya)); box-shadow: 0 0 9px rgb(var(--cahaya) / .9); }
html.js .pintu-ask:hover { border-color: rgb(var(--cahaya) / .95); transform: translateY(-2px); box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 6px rgb(var(--cahaya) / .10), 0 18px 34px -10px rgb(5 9 20 / .6); }
html.js .pintu-ask:active { transform: scale(.96); }
html.js .pintu-ask:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 5px #FFFFFF, 0 14px 30px -10px rgb(5 9 20 / .55); }
html.js .pintu-ask[aria-expanded="true"] { border-color: var(--ais); }
html.js.pintu-sorok .pintu-ask:not([aria-expanded="true"]) { opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity 200ms var(--lengkung), visibility 0s 200ms, transform 200ms var(--lengkung); }
/* Desktop: butang duduk DALAM jidar kanan (luar tepi pentas/HUD), saiz ikut jidar: 56px bila ruang cukup, minimum 44px.
   Jidar = (100vw − lebar kandungan) / 2 (≥ 48px pada ≥ 961). HUD (rel) tidak diubah → saiz rak hero sama dengan K4. */
@media (min-width: 961px) {
  html.js .pintu-ask { --jidar: calc((100vw - var(--lebar)) / 2); --saiz: clamp(44px, calc(var(--jidar) - 10px), 56px);
    width: var(--saiz); height: var(--saiz); right: max(4px, calc((var(--jidar) - var(--saiz)) / 2)); }
}
/* 961–1099: rel HUD (K4) lebih lebar dari kotak pentas dan melimpah ke jidar kanan → butang naik ke atas HUD, masih dalam jidar
   (susun atur K4 di lebar ini: lajur kanan hanya objek garis, bucu kanan bawah kotak objek kosong) */
@media (min-width: 961px) and (max-width: 1099px) { html.js .pintu-ask { bottom: calc(24px + var(--hud-t) + 8px); } }
@media (min-width: 961px) and (max-width: 1279px) { html.js .pintu-ask { gap: 3px; font-size: 9.5px; letter-spacing: .06em; } html.js .pintu-titik { width: 5px; height: 5px; } }
/* ≤960: butang dok dalam jalur HUD atas (latar padu) — tak pernah menindih kandungan */
@media (max-width: 960px) {
  html.js .pintu-ask { top: calc(var(--kepala-t) + env(safe-area-inset-top, 0px) + 6px); bottom: auto; right: calc(var(--gutter) - 6px); width: 44px; height: 44px; gap: 3px; font-size: 9.5px; letter-spacing: .06em; }
  html.js .pentas-dalam { padding-right: calc(var(--gutter) + 46px); }
  html.js .pintu-titik { width: 5px; height: 5px; }
}
@media (max-width: 380px) { html.js .bacaan { letter-spacing: .03em; gap: 8px; } } /* 320–380: bacaan jalur muat tanpa terpotong di sebelah butang */
/* panel 09 dalam K5: sasaran sentuh ≥ 44px (makmal 38–40px), di atas kepala bila terbuka pada mudah alih */
.pb-bahasa button, .pb-cip.sebaris button, .pb-lagi, .pb-taip input, .pb-taip button { min-height: 44px; }
.pembantu { z-index: 90; }
.tirai { z-index: 80; }
@media (min-width: 641px) { .pembantu { top: calc(var(--kepala-t) + 12px); } }
@media (prefers-reduced-motion: reduce) { html.js .pintu-ask { transition: none; } }

/* ---------- D. Kaki: lockup utama 80px, tagline ikut nisbah DIKUNCI ----------
   L = tinggi lockup. Cap TECH LEAD = 17.28/48 L = .36 L. Cap tagline = .45 × .36 L = .162 L. Tinggi fail tagline (cap 23.63 dalam
   viewBox 26.29) = .162 × 26.29/23.63 L = .180236 L. Atas cap tagline = bawah tanda (40.7/48 L) + .36 L; cap bermula 2.43/26.29 dalam
   fail → margin-top = (.847917 + .36 − 1) L − .092431 × .180236 L = .191258 L (L = 56 → 10.71px = K4). */
.kaki-jenama { --lt: min(80px, calc((100vw - 2 * var(--gutter)) * 48 / 223.77)); }
.kaki-jenama .kaki-lockup { height: var(--lt); }
.kaki-jenama .kaki-tagline { height: calc(var(--lt) * .180236); margin-top: calc(var(--lt) * .191258); }
@media (min-width: 1181px) { .kaki-grid { grid-template-columns: max-content minmax(0, 2fr) minmax(0, 4fr) minmax(0, 3fr); column-gap: 48px; } }
@media (min-width: 961px) and (max-width: 1180px) { .kaki-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .kaki-jenama { grid-column: 1 / -1; } }

/* =========================================================================
   Arah K6 — 21 Okt 2026: K5 + bahan visual SEBENAR (koordinator + Razlan)
   A. Product shot Gaya C (tools/komposit): 03 / 04 / 05 (+ 02 hub Gaya D) = satu imej peranti sahaja, UI sebenar disanitasi,
      rim ais sama tona rak hero; SEMUA teks kekal HTML (kapsyen). Kanvas 680×544 (5:4) dipasang 114.4% lebar kotak .peranti-pentas K5
      → peranti depan ≥ saiz tetingkap K5 (597 px @1440). pameran.js tukar src + srcset + rangka.
   B. 06 Team: foto headshot sebenar staf semasa (kad + pentas ubin 2×4 ≥1181).
   C. Kecil: logo klien hero + 04, AwanPrime 01, CTA WhatsApp, penapis sektor 03, tooltip status, MOF dilipat + nombor MOF 07,
      pek pembekal, butang Ask beranimasi (A glow + C sapa; ?ask=b ping), aksen badan + kad SAKTI −8% saturasi.
   ========================================================================= */
@property --tutup2 { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --tutup6 { syntax: "<number>"; inherits: true; initial-value: 0; }

/* ---------- A. product shot ---------- */
.pameran-shot .peranti { --rx: 0deg; --ry: 0deg; display: block; }
.pameran-shot.pameran-kerja .peranti { --ry: 0deg; }
.pameran-shot .shot { position: absolute; left: 0; top: 0; width: 100%; aspect-ratio: 5 / 4; pointer-events: none; }
.pameran-shot .shot img { display: block; width: 100%; height: 100%; object-fit: contain; }
.rangka-peranti { position: absolute; pointer-events: none; }
/* semua lebar: kotak pentas ikut nisbah kanvas (≤1180: bawah teks, K4) */
.pameran-shot .peranti-pentas { height: auto; aspect-ratio: 5 / 4; max-width: 680px; perspective: 1500px; }
.pameran-shot .lukisan { position: absolute; inset: 4% 18%; }
.pameran-shot .lukisan img { width: 100%; height: 100%; object-fit: contain; }
.pameran-shot .peranti-bayang { display: none; }
.pameran-hub { margin-top: 40px; }
@media (min-width: 1181px) and (min-height: 680px) {
  /* kotak = kotak K5 (16/12.4, lebar ikut ruang pentas) → kapsyen di tempat K5 + 44px (bayang lantai dalam kanvas) */
  html.js .bab-pameran :is(.pameran-shot) .peranti-pentas { aspect-ratio: 16 / 12.4; max-width: none; width: min(100%, calc((var(--ruang-pentas) - 194px) * 16 / 12.4)); margin-left: auto; }
  html.js .bab-pameran .pameran-shot .shot { left: -7.2%; top: -3.9%; width: 114.4%; }
  html.js .bab-pameran .pameran-shot .unggul-teks { margin-top: 62px; }
  html.js .bab-pameran .pameran-shot .lukisan { inset: 2% 20% -4% 20%; }
  /* 02 hub: tiada kapsyen → kotak penuh ruang */
  html.js .bab-pameran .pameran-hub .peranti-pentas { width: min(100%, calc((var(--ruang-pentas) - 40px) * 16 / 12.4)); }
  html.js #integrasi .sakti { grid-template-columns: minmax(0, 1fr); }
  html.js #integrasi .paip { height: clamp(300px, 26vw, 380px); }
}
@media (max-width: 1180px), (max-height: 679px) { .pameran-hub { display: none; } }
html:not(.js) .pameran-hub { display: none; }

/* timeline bab 02 + 06 (sama corak K5: bingkai muncul entry 52–64%, garis pudar 50–57%) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.tiada-sd) { timeline-scope: --hero, --k5-hosting, --k5-produk, --k5-kerja, --k5-ai, --k6-integrasi, --k6-pasukan; }
    @media (min-width: 1181px) and (min-height: 680px) {
      html.js:not(.tiada-sd) #integrasi { view-timeline: --k6-integrasi block; }
      html.js:not(.tiada-sd) #pasukan { view-timeline: --k6-pasukan block; }
      html.js:not(.tiada-sd) #pameran-integrasi { animation-timeline: --k6-integrasi; }
      html.js:not(.tiada-sd) #pentas-pasukan { animation-timeline: --k6-pasukan; }
      html.js:not(.tiada-sd) .pentas[data-salinan="malam"], html.js:not(.tiada-sd) .pentas[data-salinan="siang"] {
        animation: k5-tutup1 linear both, k6-tutup2 linear both, k5-tutup3 linear both, k5-tutup4 linear both, k5-tutup5 linear both, k6-tutup6 linear both;
        animation-timeline: --k5-hosting, --k6-integrasi, --k5-produk, --k5-kerja, --k5-ai, --k6-pasukan;
      }
    }
  }
}
@keyframes k6-tutup2 { entry 50% { --tutup2: 0; } entry 57% { --tutup2: 1; } exit 13% { --tutup2: 1; } exit 22% { --tutup2: 0; } }
@keyframes k6-tutup6 { entry 50% { --tutup6: 0; } entry 57% { --tutup6: 1; } exit 13% { --tutup6: 1; } exit 22% { --tutup6: 0; } }
.pentas[data-salinan="malam"] .objek, .pentas[data-salinan="siang"] .objek,
.pentas[data-salinan="malam"] .sudut, .pentas[data-salinan="siang"] .sudut,
.pentas[data-salinan="siang"] .objek-bingkai::before {
  opacity: calc(1 - min(1, var(--tutup1) + var(--tutup2) + var(--tutup3) + var(--tutup4) + var(--tutup5) + var(--tutup6)));
}
/* bacaan objek 02/06 hanya bila garis kelihatan (bingkai belum masuk) */
html.k6-02-garis #integrasi .pameran-hub { display: none; }

/* ---------- B. 06 pasukan ---------- */
.p-foto { grid-row: 1 / 3; width: 56px; height: 56px; border-radius: 16px; object-fit: cover; display: block; background: #6B6E75;
  box-shadow: inset 0 0 0 1px rgb(11 19 38 / .12), 0 10px 18px -10px rgb(11 19 38 / .55); }
.pameran-pasukan { display: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .pameran-pasukan { display: block; --ubin: min(190px, calc((var(--ruang-pentas) - 64px - 42px) / 4)); }
  html.js .pameran-pasukan .ubin-pasukan { list-style: none; margin: 0 calc((432px - 2 * var(--ubin) - 16px) / 2) 0 auto; padding: 0; width: calc(2 * var(--ubin) + 16px);
    display: grid; grid-template-columns: repeat(2, var(--ubin)); gap: 14px 16px; }
  html.js .ubin { position: relative; width: var(--ubin); height: var(--ubin); border-radius: 18px; overflow: hidden; background: var(--malam);
    box-shadow: inset 0 0 0 1px rgb(var(--cahaya) / .18), 0 28px 44px -26px rgb(11 19 38 / .55), 0 8px 16px -10px rgb(11 19 38 / .35); }
  html.js .ubin img { width: 100%; height: 100%; object-fit: cover; display: block; }
  html.js .ubin::after { /* rim ais atas-kiri (bahan sama dengan product shot) */
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    background: linear-gradient(140deg, rgb(var(--cahaya) / .55), rgb(var(--cahaya) / 0) 26%) border-box;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; padding: 1.5px; }
  html.js .ubin-mono { position: absolute; left: 10px; bottom: 9px; padding: 2px 7px; border-radius: 999px; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em;
    color: #FFFFFF; background: rgb(10 16 32 / .62); }
  html.js .ubin-tiada { display: grid; place-items: center; background: linear-gradient(145deg, #22305a 0%, var(--malam-2) 55%, var(--malam) 100%); }
  html.js .ubin-monogram { width: auto; height: auto; grid-row: auto; border-radius: 0; background: none; box-shadow: none; font-size: calc(var(--ubin) * .26); font-weight: 600; letter-spacing: .04em; color: #FFFFFF; }
  html.js .ubin-tiada .ubin-mono { display: none; }
  html.js .ubin-tahun { list-style: none; display: flex; justify-content: space-between; margin: 18px calc((432px - 2 * var(--ubin) - 16px) / 2 - 30px) 0 auto; padding: 14px 0 0;
    width: calc(2 * var(--ubin) + 76px); border-top: 1px solid #B6BFD0; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: #465269; }
  /* pentas pasukan: bacaan monogram/tahun objek garis tak perlu bila ubin di pentas */
  html.js #pasukan .pasukan { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html.js #pasukan .sejarah { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- C1. jalur logo klien hero ---------- */
.hero-klien { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 26px; pointer-events: auto; }
.hero-klien img { display: block; height: 24px; width: auto; opacity: .72; }
@media (min-width: 961px) {
  .hero-wrap { position: relative; }
  .hero-klien { position: absolute; left: calc((100% - var(--lebar)) / 2); bottom: calc(-1 * clamp(30px, 4.2vh, 44px)); max-width: calc(var(--lebar) * .6); }
  html.js .hero-klien { opacity: 0; transition: opacity 380ms var(--lengkung) 900ms; }
  html.js .sedia .hero-klien { opacity: 1; }
}
@media (max-width: 960px) { .hero-klien { order: 4; position: relative; z-index: 3; padding: 18px var(--gutter) 0; } .hero-klien img { height: 22px; } }

/* ---------- C2. 04 logo klien kecil + kad teks (JPA, SAINS) ---------- */
.k-logo { display: inline-block; vertical-align: -5px; height: 20px; width: auto; margin-right: 8px; mix-blend-mode: multiply; }
.k-logo[hidden] { display: none; }
.k-teks { cursor: default; }
.k-teks .k-nama { color: var(--ink); }
.pameran-kerja .unggul-teks .k-klien { display: flex; align-items: center; }

/* ---------- C3. 01 AwanPrime ---------- */
.foto-kapsyen { display: flex; flex-wrap: wrap; align-items: center; column-gap: 16px; }
.foto-awan { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.foto-awan:hover { text-decoration: underline; text-underline-offset: 3px; }
.foto-awan:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

/* ---------- C4. 03 penapis sektor + baris malap ---------- */
.sektor { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 40px; }
.sektor[hidden] { display: none; }
.sektor button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #C9D0DC; background: #FFFFFF; color: var(--ink);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: background-color 200ms var(--lengkung), border-color 200ms var(--lengkung), color 200ms var(--lengkung); }
.sektor button:hover { border-color: var(--navy); }
.sektor button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; box-shadow: 0 0 0 3px rgb(var(--cahaya) / .55); }
.sektor button:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.sektor-kira { margin-left: auto; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--kelabu); }
.sektor + .jadual-bungkus .jadual-produk { margin-top: 18px; }
.jadual-produk tbody tr { transition: opacity 200ms var(--lengkung); }
.jadual-produk tbody tr.malap { opacity: .32; }
.jadual-produk tbody tr.malap:hover, .jadual-produk tbody tr.malap:focus-within { opacity: .7; }
/* status: titik penuh = Live, titik kosong = lain-lain; legend (.nota) + title setiap titik. Titik Live ada cincin ais (aksen badan). */
.status.hidup::before { box-shadow: 0 0 0 3px rgb(var(--cahaya) / .6); }
.status[title] { cursor: help; }

/* ---------- C5. 07 nombor MOF + kod dilipat + pek pembekal ---------- */
.fakta-sah { color: var(--kelabu); white-space: nowrap; }
.mof-lipat { margin-top: 4px; }
.mof-lipat summary { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; list-style: none; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.mof-lipat summary::-webkit-details-marker { display: none; }
.mof-lipat summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.mof-lipat .mof-lipat-buka, .mof-lipat[open] .mof-lipat-tutup { display: none; }
.mof-lipat[open] .mof-lipat-buka { display: inline; }
.mof-lipat .anak-panah { transition: transform 300ms var(--lengkung); }
.mof-lipat[open] .anak-panah { transform: rotate(180deg); }
.cari:has(.mof-lipat:not([open])):has(#cari-bidang:placeholder-shown) .jadual-mof tr.lipat { display: none; }
.cari:has(#cari-bidang:not(:placeholder-shown)) .mof-lipat { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .cari:has(.mof-lipat[open]) .jadual-mof tr.lipat { animation: k6-lipat 300ms var(--lengkung) both; }
}
@keyframes k6-lipat { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.tindakan-07 { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 40px; }
.tindakan-07 .link-teks { margin-top: 0; }
.butang-hantu-gelap { border: 1px solid var(--ink); color: var(--ink); background: transparent; }
.butang-hantu-gelap:hover { background: var(--ink); color: #FFFFFF; }
.pb-wa { display: inline-flex; align-items: center; min-height: 44px; color: #CFE6FF; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- C6. aksen badan: biru ais rim hero (--cahaya) = aksen hiasan tunggal; teks aksen kekal navy (kontras) ---------- */
.kicker .no { position: relative; }
.kicker .no::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px; border-radius: 2px; background: rgb(var(--cahaya)); }
.sub-label::before { background: rgb(var(--cahaya)) !important; }
/* kad SAKTI: merah HANYA di sini (kandungan TD), saturasi −8% supaya tak menang lawan product shot */
.sakti { background: radial-gradient(120% 95% at 88% 38%, #761823 0%, #481019 46%, #25070D 100%); }

/* ---------- C7. butang Ask: A glow bernafas + cincin · B ping radar · C sapa sekali ----------
   transform/opacity sahaja (filter blur statik pada pseudo). Gelung ambien A/B dikecualikan dari had 400ms (sama "ufuk bernafas" K4);
   interaksi buka/tutup kekal ≤ 400ms. Dijeda bila panel terbuka / tab tersorok / butang tersorok. Reduced-motion: halo statik, tiada gerak. */
.pintu-halo, .pintu-cincin, .pintu-ping, .pintu-sapa { display: none; }
html.js .pintu-ask { isolation: isolate; overflow: visible; }
/* butang fixed + z-index = konteks tindanan: anak z-index negatif dilukis ATAS latar butang sendiri. Jadi latar gelap butang
   diulang dalam ::before (z −1) — halo (z −3) dan pil sapa (z −2) kekal DI BELAKANG cakera, label ASK atas latar gelap penuh. */
html.js .pintu-ask::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 30%, #1A2747, var(--malam) 70%); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14); } /* inset 0 = dalam sempadan: border (hover/expanded) kekal kelihatan */
html.js .pintu-halo { display: block; position: absolute; inset: -6px; z-index: -3; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--cahaya) / .75), rgb(var(--cahaya) / .28) 55%, rgb(var(--cahaya) / 0)); filter: blur(5px); opacity: .5; }
html.js .pintu-cincin { display: block; position: absolute; inset: -2px; border-radius: 50%; pointer-events: none; z-index: 1;
  background: conic-gradient(from 0deg, rgb(var(--cahaya) / 0) 0deg, rgb(var(--cahaya) / .95) 70deg, rgb(var(--cahaya) / 0) 140deg, rgb(var(--cahaya) / 0) 360deg);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px)); opacity: 0; }
html.js .pintu-ping { display: block; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; z-index: -3; border: 1.5px solid rgb(var(--cahaya) / .9); opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  html.js.ask-a .pintu-halo, html.js.ask-ac .pintu-halo { animation: k6-nafas 3.6s ease-in-out infinite alternate; }
  html.js.ask-a .pintu-cincin, html.js.ask-ac .pintu-cincin { opacity: 1; animation: k6-pusing 12s linear infinite; }
  html.js.ask-b .pintu-ping { animation: k6-ping 8s cubic-bezier(.2, .7, .2, 1) infinite; }
  html.js.ask-b .pintu-titik { animation: k6-titik 8s ease-out infinite; }
  html.js.ask-ping-sekali .pintu-ping { animation: k6-ping-sekali 1.2s cubic-bezier(.2, .7, .2, 1) 1; }
  html.js.ask-ping-sekali .pintu-titik { animation: k6-titik-sekali 1.2s ease-out 1; }
  /* jeda (bukan hilang) */
  html.js.pintu-buka .pintu-ask :is(.pintu-halo, .pintu-cincin, .pintu-ping, .pintu-titik),
  html.js.tab-sorok .pintu-ask :is(.pintu-halo, .pintu-cincin, .pintu-ping, .pintu-titik),
  html.js.pintu-sorok .pintu-ask :is(.pintu-halo, .pintu-cincin, .pintu-ping, .pintu-titik) { animation-play-state: paused; }
}
@keyframes k6-nafas { from { transform: scale(.92); opacity: .38; } to { transform: scale(1.06); opacity: .78; } }
@keyframes k6-pusing { to { transform: rotate(360deg); } }
@keyframes k6-ping { 0% { transform: scale(1); opacity: .6; } 15% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(2.2); opacity: 0; } }
@keyframes k6-titik { 0% { transform: rotate(45deg) scale(1); } 4% { transform: rotate(45deg) scale(1.5); } 12%, 100% { transform: rotate(45deg) scale(1); } }
@keyframes k6-ping-sekali { from { transform: scale(1); opacity: .6; } to { transform: scale(2.2); opacity: 0; } }
@keyframes k6-titik-sekali { 0% { transform: rotate(45deg) scale(1); } 30% { transform: rotate(45deg) scale(1.5); } 100% { transform: rotate(45deg) scale(1); } }
/* C · sapa: pil mengembang ke kiri dari butang (clip-path, bukan width), teks visual sahaja (aria-hidden); 3s sekali sesi */
html.js .pintu-sapa { display: flex; align-items: center; position: absolute; right: 0; top: 0; bottom: 0; z-index: -2; pointer-events: none;
  padding: 0 calc(100% + 4px) 0 18px; border-radius: 999px; white-space: nowrap; border: 1px solid rgb(var(--cahaya) / .5);
  background: radial-gradient(circle at 80% 30%, #1A2747, var(--malam) 70%); color: var(--ais); font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  clip-path: inset(0 0 0 calc(100% - var(--saiz, 56px)) round 999px); opacity: 0; transition: clip-path 380ms var(--lengkung), opacity 160ms linear 220ms; }
html.js.ask-sapa .pintu-sapa { clip-path: inset(0 0 0 0 round 999px); opacity: 1; transition: clip-path 380ms var(--lengkung) 200ms, opacity 120ms linear 200ms; } /* tunggu HUD pudar dulu (200ms) */
html.js .pintu-sapa > span { opacity: 0; transition: opacity 200ms linear; }
html.js.ask-sapa .pintu-sapa > span { opacity: 1; transition: opacity 200ms linear 200ms; }
/* HUD (bacaan + rel) pudar semasa sapa supaya pil tak pernah menindih teks HUD (desktop + jalur HUD 390) */
html.js .pentas :is(.bacaan, .rel) { transition: opacity 200ms var(--lengkung) 400ms; } /* HUD kembali SELEPAS pil mengecil (380ms) */
html.js.ask-sapa .pentas :is(.bacaan, .rel) { opacity: 0; transition: opacity 200ms var(--lengkung); }
@media (max-width: 960px) { html.js .pintu-sapa { --saiz: 44px; font-size: 10px; letter-spacing: .06em; } }
/* ≤960: butang dalam jalur HUD, ruang ke bacaan 8px → halo lebih rapat (inset −3px × 1.06 ≈ 4.3px) supaya tak menindih teks HUD */
@media (max-width: 960px) { html.js .pintu-halo { inset: -3px; filter: blur(3px); } }
/* ≥961: halo tak melepasi jarak butang ↔ tepi kandungan (butang berpusat dalam jidar: jarak = (jidar − saiz) / 2) */
@media (min-width: 961px) { html.js .pintu-halo { inset: calc(-1 * clamp(0px, (var(--jidar) - var(--saiz)) / 2 - 3px, 6px)); } }
@media (prefers-reduced-motion: reduce) {
  html.js .pintu-halo { animation: none; transform: none; opacity: .45; }
  html.js .pintu-cincin, html.js .pintu-ping, html.js .pintu-sapa { display: none; }
}
/* 01 ≥1181: kapsyen + AwanPrime muat SATU baris dalam lebar foto (tak turun ke HUD bacaan) */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .pameran-foto .foto-kapsyen { flex-wrap: nowrap; column-gap: 10px; }
  html.js .pameran-foto .foto-kapsyen .unggul-meta, html.js .pameran-foto .foto-awan { font-size: 10.5px; letter-spacing: .05em; white-space: nowrap; }
}
/* 07: tarikh sah MOF baris sendiri pada telefon (tanpa titik di depan) */
@media (max-width: 640px) { .fakta-sah { display: block; white-space: normal; } .fakta-sah-titik { display: none; } }
/* K6: baris produk dipilih — tint .055 → .05 supaya kontras teks baris (390: 6.03) ≥ K5 (6.04); pilihan masih jelas (penanda ◆ + warna navy) */
.jadual-produk tbody tr.dipilih { background: rgb(29 58 138 / .05); }
/* 04 kad teks JPA/SAINS: bukan pemilih → tiada kesan hover/anak panah */
.k.k-teks:hover .k-nama { color: var(--ink); transform: none; }
.k.k-teks > .k-hasil::after { display: none; }
/* jalur logo hero hanya bila ada ruang bawah lejar: viewport < 800 tinggi (desktop) jalur akan terpotong (1280×720: 730 > 720) → sorok; logo sama ada di 04 */
@media (min-width: 961px) and (max-height: 799px) { .hero-klien { display: none; } }

/* =========================================================================
   Arah K7 — 21 Okt 2026: K6 + lapisan interaksi/3D ringan + ciri AI klik-dulu (Razlan: "ikut cadangan kau")
   1 tilt product shot · 2 cahaya tunggal (--cahaya-x/-y) · 3 denyut atas garis · 5 hotspot foto 01 · 6 A1 resit · 7 A2 kesediaan
   8 F1 palette · 9 A3 chip bab + F4 LED (scene.js) · pembaikan (a) jalur logo hero (b) monogram pasukan. Peta Malaysia (4): DILANGKAU
   (tiada geometri offline). Semua gerak: transform/opacity (+ stroke-dashoffset garis); reduced-motion = statik, getAnimations 0.
   ========================================================================= */

/* ---------- (a) jalur logo klien hero: lebih besar + lebih terang, berat optik seragam (lambang tinggi, SAINS perkataan lebar) ---------- */
.hero-klien { gap: 10px 30px; }
.hero-klien img { height: 27px; opacity: .94; }
.hero-klien img[src*="sains-"] { height: 20px; }
@media (max-width: 960px) { .hero-klien { gap: 10px 24px; } .hero-klien img { height: 25px; } .hero-klien img[src*="sains-"] { height: 18px; } }

/* ---------- (b) 06 monogram (Efandy, Adzrul): tona kelabu-biru lembut ikut latar studio foto, huruf lebih kecil (bukan blok gelap penuh) ---------- */
.monogram { background: linear-gradient(180deg, #B4BCC8 0%, #9DA6B4 50%, #6E788A 82%, #555F72 100%); color: var(--ink); font-size: .95rem; letter-spacing: .06em;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .35), inset 0 0 0 1px rgb(11 19 38 / .08), 0 10px 18px -10px rgb(11 19 38 / .45); }
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .ubin-tiada { background: linear-gradient(180deg, #B4BCC8 0%, #9DA6B4 50%, #6E788A 80%, #4F596C 100%); }
  html.js .ubin-monogram { font-size: calc(var(--ubin) * .17); font-weight: 560; letter-spacing: .1em; color: var(--ink); }
}

/* ---------- 2. cahaya tunggal: @property + @keyframes k7-cahaya (dijana k7.js dari jadual TITIK) ----------
   Hanya elemen PENGGUNA cahaya dianimasi (bukan :root) → tiada recalc seluruh page setiap frame skrol. Tiada sokongan / reduced /
   ?tanpa-api / GPU perisian (tiada-sd): nilai awal = kedudukan hero (statik, konsisten). */
@property --cahaya-x { syntax: "<number>"; inherits: true; initial-value: .86; }
@property --cahaya-y { syntax: "<number>"; inherits: true; initial-value: .04; }
:root { --cahaya-x: .86; --cahaya-y: .04; }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.tiada-sd):not(.tiada-prop) :is(.pameran-shot .peranti-pentas, .foto-bingkai, .ubin-pasukan) { animation: k7-cahaya linear both; animation-timeline: scroll(root block); }
  }
}

/* ---------- 1. product shot condong (k7.js tulis --k7-px/--k7-py −1..1 dalam zon lajur kanan) ---------- */
.pameran-shot .shot { transform-origin: 50% 52%; }
html.js .k7-condong .shot, html.js .k7-balik .shot {
  transform: rotateX(calc(var(--k7-py, 0) * var(--k7-sudut, 4deg) * -1)) rotateY(calc(var(--k7-px, 0) * var(--k7-sudut, 4deg))); will-change: transform; }
html.js .k7-condong .shot { transition: transform 120ms cubic-bezier(.2, .7, .2, 1); }
html.js .k7-balik .shot { transition: transform var(--spring-masa) var(--spring); }
/* kilau: dalam bentuk peranti sahaja (topeng = alpha imej shot semasa), bergerak BERTENTANGAN dengan pointer, berpusat ke arah cahaya */
.k7-kilau, .k7-teduh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  -webkit-mask: var(--k7-topeng) center / 100% 100% no-repeat; mask: var(--k7-topeng) center / 100% 100% no-repeat; transition: opacity 240ms var(--lengkung); }
.k7-kilau-i { position: absolute; left: -30%; top: -30%; width: 160%; height: 160%;
  background: radial-gradient(closest-side, rgb(255 255 255 / .30), rgb(var(--cahaya) / .12) 42%, rgb(var(--cahaya) / 0) 72%);
  transform: translate(calc((var(--cahaya-x) - .70) * 34% - var(--k7-px, 0) * 9%), calc((var(--cahaya-y) - .30) * 34% - 14% - var(--k7-py, 0) * 7%)); }
/* bayang jauh dari cahaya (multiply): nampak atas UI putih, sisi bertentangan dengan cahaya lebih gelap — arah sama dengan kilau */
.k7-teduh { mix-blend-mode: multiply; opacity: 1; }
.k7-teduh-i { position: absolute; left: -100%; top: -100%; width: 300%; height: 300%;
  background: linear-gradient(125deg, rgb(11 19 38 / 0) 56%, rgb(11 19 38 / .04) 72%); /* ≤ 10 aras atas putih: arah cahaya terasa, UI kekal bersih (dakwat lajur kanan = K6) */
  transform: translate(calc((var(--cahaya-x) - .70) * 40% - var(--k7-px, 0) * 4%), calc((var(--cahaya-y) - .30) * 40% - var(--k7-py, 0) * 4%)); }
html.js .k7-balik .k7-teduh-i { transition: transform var(--spring-masa) var(--spring); }
html.js .k7-condong .k7-teduh-i { transition: transform 120ms cubic-bezier(.2, .7, .2, 1); }
html.js .k7-condong .k7-kilau { opacity: .85; }
html.js .k7-condong .k7-kilau-i { transition: transform 120ms cubic-bezier(.2, .7, .2, 1); }
html.js .k7-balik .k7-kilau-i { transition: transform var(--spring-masa) var(--spring); }
/* (elips bayang sentuh lantai K7 dibuang selepas semakan mata: bertembung dengan bayang lantai yang dibakar dalam imej shot) */
/* foto 01 + ubin pasukan: kilau tepi & bayang ikut cahaya yang SAMA (transform sahaja, lapisan sendiri) */
.foto-bingkai::before { content: ""; position: absolute; z-index: 1; left: -40%; top: -40%; width: 180%; height: 180%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgb(var(--cahaya) / .16), rgb(var(--cahaya) / 0) 60%);
  transform: translate(calc((var(--cahaya-x) - .70) * 40%), calc((var(--cahaya-y) - .30) * 40% - 16%)); will-change: transform; }
html.js .ubin-pasukan { position: relative; }
html.js .ubin-pasukan::before { content: ""; position: absolute; z-index: -1; left: 6%; right: 6%; bottom: -26px; height: 60px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(11 19 38 / .16), rgb(11 19 38 / 0));
  transform: translate(calc((.70 - var(--cahaya-x)) * 80px), calc((.30 - var(--cahaya-y)) * 20px)); will-change: transform; }
@media (prefers-reduced-motion: reduce) { html.js .k7-condong .shot, html.js .k7-balik .shot { transform: none; transition: none; } }

/* ---------- 3. denyut isyarat atas garis (salinan path "kuat", dimorph bersama). Desktop lajur kanan sahaja; ikut legap garis ---------- */
.objek path.k7-denyut { display: none; }
@media (min-width: 1181px) and (min-height: 680px) and (prefers-reduced-motion: no-preference) {
  html.js .objek path.k7-denyut { display: inline; stroke: var(--o-aksen); stroke-width: 5; stroke-linecap: round; stroke-dasharray: .0001 .3333; stroke-dashoffset: 0; opacity: 0; transition: opacity 300ms var(--lengkung); }
  html.js .objek path.k7-denyut-halo { stroke: rgb(var(--cahaya)); stroke-width: 13; }
  html.js.serah .objek path.k7-denyut { opacity: .95; }
  html.js.serah .objek path.k7-denyut-halo { opacity: .55; }
  html.js .pentas[data-salinan="malam"] .objek path.k7-denyut:not(.k7-denyut-halo) { stroke: #FFFFFF; }
  html.js:not(.tiada-sd) .objek path.k7-denyut { animation: k7-alir linear both; animation-timeline: scroll(root block); }
}
@keyframes k7-alir { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -26; } }

/* ---------- 5. hotspot foto rak 01 ---------- */
.k7-titik { list-style: none; margin: 0; padding: 0; }
html:not(.js) .k7-titik { display: none; }
.k7-titik-isi { display: none; margin: 0; }
.k7-titik li.buka .k7-titik-isi, .k7-titik li.intai .k7-titik-isi { display: block; }
.k7-titik-isi strong { display: block; font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); margin-bottom: 2px; }
@media (min-width: 961px) {
  .pameran-foto { position: relative; }
  .k7-titik { position: absolute; z-index: 3; left: 0; top: 0; width: min(100%, 440px); aspect-ratio: 4 / 5; pointer-events: none; }
  .k7-titik li { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
  .k7-titik button { position: absolute; left: -22px; top: -22px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; pointer-events: auto; display: grid; place-items: center; }
  .k7-titik-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .k7-titik-nadi { position: relative; width: 14px; height: 14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 3px rgb(var(--cahaya) / .55), 0 0 14px 2px rgb(var(--cahaya) / .7); }
  .k7-titik-nadi::after { content: ""; position: absolute; inset: -7px; border-radius: 50%; border: 1.5px solid rgb(255 255 255 / .85); opacity: 0; }
  .k7-titik button:hover .k7-titik-nadi, .k7-titik li.buka .k7-titik-nadi { box-shadow: 0 0 0 4px rgb(var(--cahaya) / .9), 0 0 18px 4px rgb(var(--cahaya) / .8); }
  .k7-titik button:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px var(--navy); }
  .k7-titik-isi { position: absolute; left: 26px; top: -18px; width: 236px; padding: 12px 14px; border-radius: 12px; pointer-events: auto;
    background: #FFFFFF; color: var(--ink); font-size: 14.5px; line-height: 1.45; box-shadow: 0 18px 36px -14px rgb(5 9 20 / .55), 0 0 0 1px rgb(11 19 38 / .08); }
  .k7-titik li[style*="--x:9"] .k7-titik-isi, .k7-titik li[style*="--x:6"] .k7-titik-isi, .k7-titik li[style*="--x:7"] .k7-titik-isi { left: auto; right: 26px; }
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .bab-pameran .pameran-foto .k7-titik { left: auto; right: 0; width: min(100%, calc((var(--ruang-pentas) - 44px) * .8)); }
}
@media (min-width: 961px) and (prefers-reduced-motion: no-preference) {
  .k7-titik.nampak .k7-titik-nadi::after { animation: k7-nadi 2.8s cubic-bezier(.2, .7, .2, 1) infinite; } /* hanya bila foto 01 dalam skrin (IntersectionObserver k7.js) */
  .k7-titik li:nth-child(2) .k7-titik-nadi::after { animation-delay: .7s; }
  .k7-titik li:nth-child(3) .k7-titik-nadi::after { animation-delay: 1.4s; }
  .k7-titik li:nth-child(4) .k7-titik-nadi::after { animation-delay: 2.1s; }
  html.tab-sorok .k7-titik-nadi::after { animation-play-state: paused; }
}
@keyframes k7-nadi { 0% { transform: scale(.6); opacity: .9; } 45%, 100% { transform: scale(1.5); opacity: 0; } }
@media (max-width: 960px) {
  .k7-titik { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; max-width: 440px; }
  .k7-titik li { display: contents; }
  .k7-titik button { min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #C9D0DC; background: #FFFFFF; color: var(--ink); cursor: pointer;
    display: inline-flex; align-items: center; gap: 8px; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; }
  .k7-titik button[aria-expanded="true"] { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
  .k7-titik-nadi { width: 7px; height: 7px; border-radius: 50%; background: var(--navy); box-shadow: 0 0 0 3px rgb(var(--cahaya) / .6); }
  .k7-titik button[aria-expanded="true"] .k7-titik-nadi { background: #FFFFFF; }
  .k7-titik-isi { order: 9; flex: 1 1 100%; padding: 12px 14px; border-radius: 12px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--garis); color: var(--ink); font-size: 15px; line-height: 1.5; }
}
@media (max-width: 640px) { .k7-titik { max-width: none; } }

/* ---------- 9. A3: chip "Ask about this" dalam baris kicker (margin negatif: sasaran 44px tanpa tolak susun atur) ---------- */
.k7-tanya { margin: -14px 0 -14px auto; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid #C9D0DC; background: #FFFFFF; color: var(--navy); cursor: pointer;
  font: 500 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; align-self: center;
  transition: border-color 200ms var(--lengkung), background-color 200ms var(--lengkung), color 200ms var(--lengkung); }
.k7-tanya:hover { border-color: var(--navy); background: var(--navy); color: #FFFFFF; }
.k7-tanya:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
html:not(.js) .k7-tanya { display: none; }

/* ---------- 8. F1: ⌘K dalam bacaan HUD + item Search menu (≤960) + palette ---------- */
.k7-kbd { margin: -14px 0 -14px auto; align-self: center; min-width: 44px; min-height: 44px; padding: 0 4px; border: 0; background: none; cursor: pointer; color: inherit; font: inherit; letter-spacing: .04em; }
.k7-kbd kbd { display: inline-block; padding: 3px 7px; border-radius: 6px; border: 1px solid currentColor; font: 500 10.5px/1.2 var(--mono); letter-spacing: .04em; color: var(--o-teks); }
.k7-kbd:hover kbd { background: rgb(var(--cahaya) / .14); }
@media (max-width: 1180px), (max-height: 679px) { .k7-kbd { display: none !important; } }
@media (min-width: 961px) { .k7-nav-cari { display: none !important; } }
@media (max-width: 960px) {
  .k7-nav-cari :is(button, a) { display: flex; align-items: center; width: 100%; min-height: 56px; padding: 0; border: 0; border-bottom: 1px solid var(--garis); background: none; color: inherit; cursor: pointer; font: inherit; font-size: 20px; letter-spacing: -0.02em; text-align: left; }
}
.k7-palet-tirai { position: fixed; inset: 0; z-index: 94; background: rgb(5 9 20 / .45); }
.k7-palet { position: fixed; z-index: 95; left: 50%; top: calc(var(--kepala-t) + 40px); width: min(620px, calc(100vw - 2 * var(--gutter))); transform: translateX(-50%);
  border-radius: 16px; background: #FFFFFF; color: var(--ink); box-shadow: 0 40px 80px -30px rgb(5 9 20 / .6), 0 0 0 1px rgb(11 19 38 / .08); overflow: hidden; }
.k7-palet-baris { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 18px; border-bottom: 1px solid var(--garis); }
.k7-palet-ikon { flex: none; width: 14px; height: 14px; border: 2px solid var(--kelabu); border-radius: 50%; position: relative; }
.k7-palet-ikon::after { content: ""; position: absolute; right: -6px; bottom: -5px; width: 7px; height: 2px; background: var(--kelabu); transform: rotate(45deg); }
.k7-palet input { flex: 1; min-width: 0; min-height: 48px; border: 0; outline: 0; background: none; font: 400 17px/1.3 var(--sans); color: var(--ink); }
.k7-palet input::placeholder { color: #5A6680; }
.k7-palet-tutup { flex: none; min-width: 44px; min-height: 44px; border: 0; border-radius: 8px; background: var(--kabus); color: #3D4760; cursor: pointer; font: 500 11px/1 var(--mono); letter-spacing: .06em; }
.k7-palet-tutup:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.k7-palet-senarai { list-style: none; margin: 0; padding: 6px; max-height: min(420px, 56vh); overflow-y: auto; }
.k7-palet-senarai [role=option] { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; gap: 10px; min-height: 44px; padding: 10px 12px; border-radius: 10px; cursor: pointer; }
.k7-palet-senarai [role=option][aria-selected="true"] { background: rgb(29 58 138 / .08); box-shadow: inset 2px 0 0 var(--navy); }
.k7-p-jenis { font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3D4760; }
.k7-p-teks { font-size: 15.5px; line-height: 1.4; }
.k7-p-kecil { display: block; font-size: 13.5px; color: #3D4760; }
.k7-p-kosong { padding: 16px 12px; color: #3D4760; }
.k7-palet-kaki { display: flex; gap: 18px; margin: 0; padding: 10px 18px; border-top: 1px solid var(--garis); font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; color: #3D4760; }
@media (max-width: 640px) { .k7-palet { top: calc(var(--kepala-t) + 12px); } .k7-palet-kaki { display: none; } .k7-palet-senarai [role=option] { grid-template-columns: 70px minmax(0, 1fr); } }
@media (prefers-reduced-motion: no-preference) {
  .k7-palet:not([hidden]) { animation: k7-palet-masuk 220ms var(--lengkung); }
}
@keyframes k7-palet-masuk { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ---------- 6. A1 cuba scan resit (05) ---------- */
p.k7-demo-tag { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 3px 9px; border-radius: 999px; background: rgb(29 58 138 / .07);
  font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--navy); }
.k7-resit { margin: 0 0 22px; padding: 18px; border-radius: 16px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--garis); }
p.k7-resit-tajuk { margin: 0 0 10px; font-weight: 560; font-size: 16px; color: var(--ink); }
.k7-resit-pilih { display: flex; flex-wrap: wrap; gap: 8px; }
.k7-resit-pilih button { display: inline-flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; min-height: 48px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid #C9D0DC; background: #FFFFFF; color: var(--ink); cursor: pointer; font: 500 14px/1.3 var(--sans); text-align: left; }
.k7-resit-pilih button:hover { border-color: var(--navy); }
.k7-resit-pilih button[aria-pressed="true"] { border-color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.k7-resit-pilih button:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.k7-resit-no { font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3D4760; }
.k7-resit-pentas { display: grid; grid-template-columns: minmax(0, 236px) minmax(0, 1fr); gap: 20px; align-items: start; margin-top: 16px; }
.k7-resit-kertas { position: relative; min-height: 120px; border-radius: 4px; }
.k7-resit-kertas:empty { aspect-ratio: 300 / 360; border-radius: 6px; background: var(--kabus); outline: 1.5px dashed #B6BFD0; outline-offset: -6px; }
.k7-resit-kertas svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 8px 14px rgb(11 19 38 / .16)); overflow: hidden; }
.k7-resit-kertas .r-kertas { fill: #FFFFFF; stroke: #D5DAE4; }
.k7-resit-kertas text { font: 500 11px var(--mono); fill: var(--ink); color: var(--ink); } /* color = fill: alat kontras baca `color` */
.k7-resit-kertas .r-kedai { font: 700 13px var(--mono); letter-spacing: .04em; }
.k7-resit-kertas .r-kecil { font-size: 9.5px; fill: #3D4760; color: #3D4760; }
.k7-resit-kertas .r-tebal { font-weight: 700; font-size: 12.5px; }
.k7-resit-kertas .r-putus { stroke: #9AA4B6; stroke-dasharray: 3 3; }
.k7-resit-kertas .r-kotak { fill: rgb(29 58 138 / .07); stroke: var(--navy); stroke-width: 1.5; opacity: 0; }
.k7-resit-kertas .r-sapu { fill: rgb(var(--cahaya)); opacity: 0; }
.k7-resit.k7-siap .r-kotak { opacity: 1; }
.k7-resit-field { display: grid; gap: 0; margin: 0; }
.k7-resit-field > div { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--garis); }
.k7-resit-field dt { font: 500 10.5px/1.8 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3D4760; }
.k7-resit-field dd { margin: 0; font-weight: 560; color: var(--ink); }
.k7-resit.k7-siap .k7-resit-field dd { color: var(--navy); }
@media (prefers-reduced-motion: no-preference) {
  .k7-resit.k7-imbas .r-sapu { opacity: .85; animation: k7-sapu 360ms cubic-bezier(.4, 0, .2, 1) both; }
  .k7-resit.k7-siap .r-kotak { animation: k7-kotak 220ms var(--lengkung) both; }
  .k7-resit.k7-siap .k7-resit-field dd { animation: k7-field 220ms var(--lengkung) both; }
}
@keyframes k7-sapu { from { transform: translateY(0); } to { transform: translateY(calc(var(--k7-h, 360) * 1px)); } }
@keyframes k7-kotak { from { opacity: 0; } to { opacity: 1; } }
@keyframes k7-field { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) { .k7-resit-pentas { grid-template-columns: minmax(0, 150px) minmax(0, 1fr); gap: 14px; } .k7-resit-field > div { grid-template-columns: minmax(0, 1fr); gap: 0; } .k7-resit { padding: 14px; } }
@media (max-width: 359px) { .k7-resit-pentas { grid-template-columns: minmax(0, 1fr); } .k7-resit-kertas { max-width: 200px; } }

/* ---------- 7. A2 semak kesediaan AI (05) ---------- */
.k7-sedia { margin-top: 56px; padding: 24px; border-radius: 18px; background: #FFFFFF; box-shadow: inset 0 0 0 1px var(--garis), 0 24px 48px -36px rgb(11 19 38 / .35); }
.k7-sedia-tajuk { margin: 4px 0 4px; font-size: 1.35rem; font-weight: 600; letter-spacing: -0.015em; }
.k7-sedia-lead { margin: 0 0 14px; color: #3D4760; }
.k7-sedia-borang { display: grid; gap: 4px; }
.k7-soalan { margin: 0; padding: 12px 0; border: 0; border-top: 1px solid var(--garis); min-width: 0; }
.k7-soalan legend { float: left; width: 100%; margin-bottom: 8px; padding: 0; font-weight: 560; font-size: 15.5px; line-height: 1.4; }
.k7-soalan-no { display: inline-block; min-width: 22px; font: 500 11px/1 var(--mono); color: var(--navy); }
.k7-soalan-pilih { clear: both; display: flex; flex-wrap: wrap; gap: 8px; }
.k7-soalan-pilih label { position: relative; display: inline-flex; }
.k7-soalan-pilih input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.k7-soalan-pilih span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #C9D0DC; background: #FFFFFF; color: var(--ink);
  font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; transition: background-color 200ms var(--lengkung), border-color 200ms var(--lengkung), color 200ms var(--lengkung); }
.k7-soalan-pilih input:hover + span { border-color: var(--navy); }
.k7-soalan-pilih input:checked + span { background: var(--navy); border-color: var(--navy); color: #FFFFFF; }
.k7-soalan-pilih input:focus-visible + span { outline: 2px solid var(--navy); outline-offset: 3px; }
.k7-sedia-hasil { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--ink); }
.k7-skor { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px; margin: 0; }
.k7-skor-nombor { font-size: 2.6rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.k7-skor-daripada { font: 500 13px/1 var(--mono); color: #3D4760; }
.k7-skor-kira { margin-left: auto; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D4760; }
.k7-cara { margin-top: 8px; }
.k7-cara summary { display: inline-flex; align-items: center; min-height: 44px; cursor: pointer; font: 500 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--navy); }
.k7-cara summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
.k7-cara p { margin: 0 0 6px; color: #3D4760; font-size: 14.5px; }
.k7-cara-jumlah { font: 500 12.5px/1.6 var(--mono); color: var(--ink) !important; }
.k7-langkah-tajuk { margin: 14px 0 6px; font: 500 11px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3D4760; }
.k7-langkah ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.k7-langkah li { color: #3D4760; font-size: 15px; line-height: 1.45; }
.k7-langkah li strong { color: var(--ink); font-weight: 560; margin-right: 4px; }
.k7-brief { margin-top: 16px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--navy); background: var(--navy); color: #FFFFFF; cursor: pointer;
  font: 500 12px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.k7-brief:hover { background: var(--navy-dalam); }
.k7-brief:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
@media (max-width: 640px) { .k7-sedia { padding: 18px 16px; } }

/* =========================================================================
   STACK 01 (A) — 21 Okt 2026: deck 3 foto bertindih dalam lajur kanan bab 01 (pilihan Razlan).
   Belakang = Menara AIMS (kad kecil <= 200px CSS: sumber 362px, tak di-upscale), tengah = lorong kabinet (dc2),
   depan = rak LED (foto + 4 hotspot K7). Hover (80ms intent) / klik / Enter kad belakang = bawa ke depan (260ms; jumlah <= 400ms).
   Geometri satu sumber: --dek-w / --dek-h / --dek-rw / --dek-rh (kad rak + lapisan hotspot guna nilai SAMA → titik tak lari).
   <=960: jalur swipe (rak dahulu, AIMS 180px). Reduced-motion: tiada transition (getAnimations 0).
   ========================================================================= */
#foto-hosting.dek { container-type: inline-size; }
.dek-susun { position: relative; }
.dek-kad { position: relative; border-radius: 14px; overflow: hidden; background: var(--malam);
  box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 26px 44px -22px rgb(11 19 38 / .45), 0 8px 18px -12px rgb(11 19 38 / .25); }
.dek-kad > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dek-kad::after { /* rim ais sama bahan dengan foto-bingkai / product shot */
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .12), inset 0 1px 0 rgb(255 255 255 / .22); }
.dek-dewan > img { object-position: 50% 40%; }
.dek-rak { border-radius: 18px; overflow: visible; background: none; box-shadow: none; }
.dek-rak::after { display: none; }
#foto-hosting.dek .dek-rak .foto-bingkai { width: 100%; height: 100%; max-width: none; margin: 0; aspect-ratio: auto; }
.dek-tag { position: absolute; z-index: 3; left: 10px; top: 10px; max-width: calc(100% - 20px); display: inline-flex; flex-wrap: wrap; column-gap: 4px;
  padding: 5px 9px; border-radius: 10px; background: rgb(255 255 255 / .95); color: var(--navy); pointer-events: none;
  font: 500 10.5px/1.35 var(--mono); letter-spacing: .06em; text-transform: uppercase; box-shadow: 0 4px 12px -6px rgb(5 9 20 / .5); }
.dek-tag-aksi { display: none; flex-basis: 100%; color: var(--ink); }
.dek-pilih { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; border: 0; border-radius: inherit; background: none; cursor: pointer; }
.dek-pilih[aria-pressed="true"] { cursor: default; }
.dek-pilih:focus-visible { outline: 2px solid #FFFFFF; outline-offset: -4px; box-shadow: inset 0 0 0 6px var(--navy); }
.dek-petunjuk { display: none; }

@media (min-width: 961px) {
  /* aliran (961–1180, atau viewport pendek): kad rak = bingkai K7 (440 × 550) bila lajur muat; kad belakang guna ruang kiri (>= 80px) */
  #foto-hosting.dek { --dek-w: min(100cqw, 560px); --dek-rw: min(440px, calc(var(--dek-w) - 80px)); --dek-rh: calc(var(--dek-rw) * 1.25);
    --dek-h: var(--dek-rh); --dek-y: 0px; }
  .dek-susun { width: var(--dek-w); height: var(--dek-h); }
  .dek-kad { position: absolute; transition: transform 260ms var(--lengkung), box-shadow 260ms var(--lengkung); }
  .dek-rak { right: 0; top: var(--dek-y); width: var(--dek-rw); height: var(--dek-rh); z-index: 3; }
  .dek-dewan { left: -10px; top: -8px; width: calc(var(--dek-rw) * .56); height: calc(var(--dek-rw) * .56 * 1.62); z-index: 2; transform: rotate(-2deg); }
  .dek-aims { left: -18px; bottom: 18px; width: min(200px, calc(var(--dek-rw) * .40)); aspect-ratio: 362 / 542; z-index: 1; transform: rotate(-3deg); }
  /* kad di depan: z-index naik + angkat (rotasi 0, anjak kecil, bayang kuat). Saiz kad sendiri kekal (AIMS tak pernah > 206px) */
  #foto-hosting[data-depan="dewan"] .dek-dewan, #foto-hosting[data-depan="aims"] .dek-aims { z-index: 5;
    box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 40px 60px -24px rgb(11 19 38 / .55), 0 12px 24px -12px rgb(11 19 38 / .35); }
  #foto-hosting[data-depan="dewan"] .dek-dewan { transform: translate(8px, -2px) rotate(0deg) scale(1.02); }
  #foto-hosting[data-depan="aims"] .dek-aims { transform: translate(10px, -6px) rotate(0deg) scale(1.03); }
  /* tag kad di depan disorok (kapsyen bawah foto sudah tukar) KECUALI bila pratonton (hover / fokus) → tag + petunjuk "Click to keep in front" */
  #foto-hosting[data-depan="dewan"]:not([data-intai="dewan"]) .dek-dewan .dek-tag, #foto-hosting[data-depan="aims"]:not([data-intai="aims"]) .dek-aims .dek-tag { display: none; }
  .dek-aims .dek-tag { top: auto; bottom: 10px; }
  .dek-rak .dek-tag { left: auto; right: 12px; top: 12px; display: none; }
  #foto-hosting.dek:not([data-depan="rak"]) .dek-rak .dek-tag, #foto-hosting.dek[data-intai="rak"] .dek-rak .dek-tag { display: inline-flex; }
  /* petunjuk tindakan (title tak nampak pada keyboard / sentuh): kad dipratonton = di depan + "Click to keep in front" */
  #foto-hosting[data-intai="dewan"] .dek-dewan .dek-tag-aksi, #foto-hosting[data-intai="aims"] .dek-aims .dek-tag-aksi, #foto-hosting[data-intai="rak"] .dek-rak .dek-tag-aksi { display: inline; }
  /* hotspot: lapisan K7 diletak atas kad rak dengan nilai geometri yang sama */
  #foto-hosting.dek .k7-titik { left: calc(var(--dek-w) - var(--dek-rw)); right: auto; top: var(--dek-y); width: var(--dek-rw); aspect-ratio: 4 / 5; }
  #foto-hosting.dek:not([data-depan="rak"]):not([data-sumber="fokus"]) .k7-titik { visibility: hidden; }
  #foto-hosting.dek .foto-kapsyen { width: var(--dek-w); max-width: none; }
}
@media (min-width: 1181px) and (min-height: 680px) {
  /* lajur kanan: deck = lebar lajur penuh, tinggi = bingkai K7 (ruang pentas − 44, atau lebar × 1.25).
     Kad rak = bingkai K7 TEPAT bila lajur ada >= 64px ruang kiri (1440: 499 × 624, sama K7); lajur sempit (1920: K7 isi lajur penuh)
     → rak dikecilkan supaya kad belakang nampak 64px di kiri, deck guna ruang atas yang lebih (rak duduk di bawah). */
  html.js #foto-hosting.dek { --dek-w: 100cqw; --dek-h: min(calc(var(--ruang-pentas) - 44px), calc(100cqw * 1.25));
    --dek-rw: min(calc(var(--dek-h) * .8), calc(100cqw - 64px)); --dek-rh: calc(var(--dek-rw) * 1.25); --dek-y: calc(var(--dek-h) - var(--dek-rh)); }
  html.js #foto-hosting.dek .dek-susun, html.js #foto-hosting.dek .foto-kapsyen { margin-left: auto; }
}
@media (max-width: 960px) {
  /* jalur swipe: rak dahulu (hotspot chip di bawah), kemudian lorong kabinet, kemudian AIMS kecil */
  .dek-susun { display: flex; align-items: center; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    padding: 4px 2px 30px; margin: -4px -2px -22px; scrollbar-width: none; }
  .dek-susun::-webkit-scrollbar { display: none; }
  .dek-susun:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 16px; }
  .dek-kad { flex: 0 0 auto; scroll-snap-align: start; }
  .dek-rak { order: -1; width: min(calc(100% - 48px), 400px); aspect-ratio: 4 / 5; }
  .dek-dewan { width: calc(min(calc(100% - 48px), 400px) * 1.25 * .5627); aspect-ratio: 844 / 1500; }
  .dek-aims { order: 1; width: min(180px, calc(min(calc(100% - 48px), 400px) * 1.25 * .62)); aspect-ratio: 362 / 542; scroll-snap-align: end; }
  .dek-kad, #foto-hosting.dek .dek-rak .foto-bingkai { box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 14px 22px -14px rgb(11 19 38 / .45); } /* bayang muat dalam padding jalur (tiada tepi terpotong) */
  .dek-rak .dek-tag, .dek-pilih { display: none; }
  .dek-petunjuk { display: block; margin: 10px 0 0; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D4760; }
}
@media (prefers-reduced-motion: reduce) { #foto-hosting.dek .dek-kad { transition: none; } }

/* =========================================================================
   Arah K8 — 22 Okt 2026: K7 + bahan sebenar profil 2026 + pemurnian interaksi (versi DIKUNCI Pintu 1)
   04 kad tangan (DIBUANG p3) · 06 jalur Build→Host→Run · 02 label hub (kad SAKTI kekal merah K7) · 05 brief card · chip Ask bawah lead ·
   menu "Talk to us" · cursor "View ↗" · J/K bab · reveal tajuk bab ikut skrol · pintu rak hero (scene.js) · pembaikan kecil.
   Semua gerak: transform/opacity sahaja; reduced-motion = statik (getAnimations 0).
   ========================================================================= */

/* ---------- 1. chip "Ask about this" → text link mono di bawah lead (sasaran 44px; margin negatif = 0 anjakan susun atur) ---------- */
.k8-tanya-baris { margin: 4px 0 -48px; height: 44px; }
.k8-tanya-baris .k8-tanya { margin: 0 0 0 -2px; padding: 0 2px; min-height: 44px; border: 0; border-radius: 6px; background: none; color: var(--navy);
  display: inline-flex; align-items: center; gap: 7px; font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  text-decoration: underline; text-decoration-color: rgb(29 58 138 / .35); text-underline-offset: 5px; text-decoration-thickness: 1px; }
.k8-tanya-baris .k8-tanya:hover { background: none; color: var(--navy); text-decoration-color: var(--navy); }
.k8-tanya-ikon { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: rgb(29 58 138 / .09); font-size: 10px; text-decoration: none; transition: transform 200ms var(--lengkung), background-color 200ms var(--lengkung); }
.k8-tanya:hover .k8-tanya-ikon { transform: translate(1px, -1px); background: rgb(29 58 138 / .16); }
html:not(.js) .k8-tanya-baris { display: none; }

/* ---------- 2. reveal tajuk bab ikut skrol (baris naik 14px + legap; boleh undur). Hero tidak terlibat ---------- */
.k8-tajuk .k8-k { display: inline-block; }
/* Simulator iOS 29 Okt (P1): Reduce Motion + Safari iOS 18 → text-wrap: balance atas span inline-block pecah tajuk jadi "Your / system /
   can start in a rack we / run." (7 tajuk bab). Tiada animasi bila motion dikurangkan → span inline biasa (baris sama macam motion penuh). */
@media (prefers-reduced-motion: reduce) { .k8-tajuk .k8-k { display: inline; } }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html.js:not(.tiada-sd) .k8-tajuk { view-timeline: --k8-h block; }
    html.js:not(.tiada-sd) .k8-tajuk.k8-pecah .k8-k { animation: k8-naik linear both; animation-timeline: --k8-h; animation-range: cover 2% cover 21%; }
  }
}
@keyframes k8-naik { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  /* fallback (tiada scroll-driven / GPU perisian / ?tanpa-api): IntersectionObserver tanda .k8-masuk; keluar ke bawah → undur */
  html.js.tiada-sd .k8-tajuk.k8-pecah .k8-k { opacity: 0; transform: translateY(14px); transition: opacity 280ms var(--lengkung), transform 280ms var(--lengkung); transition-delay: calc(min(var(--k8-b, 0), 3) * 40ms); } /* jumlah ≤ 280 + 120 = 400ms walau tajuk 4+ baris (320px) */
  html.js.tiada-sd .k8-tajuk.k8-pecah.k8-masuk .k8-k { opacity: 1; transform: none; }
}

/* ---------- 3. menu "Talk to us" (role=menu); ≤640 = sheet bawah ---------- */
.k8-talk-tirai { position: fixed; inset: 0; z-index: 96; background: rgb(5 9 20 / .0); }
.k8-talk { position: fixed; z-index: 97; left: 0; top: 0; width: 300px; padding: 6px; border-radius: 14px; background: #FFFFFF; color: var(--ink);
  box-shadow: 0 30px 60px -24px rgb(5 9 20 / .55), 0 0 0 1px rgb(11 19 38 / .10); }
.k8-talk-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; align-items: center; column-gap: 12px; width: 100%; min-height: 56px; padding: 9px 12px;
  border: 0; border-radius: 10px; background: none; color: inherit; text-align: left; text-decoration: none; cursor: pointer; font: inherit; }
.k8-talk-item + .k8-talk-item { margin-top: 2px; }
.k8-talk-jenis { grid-column: 1; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3D4760; }
.k8-talk-isi { grid-column: 1; font-size: 15.5px; line-height: 1.35; font-weight: 520; color: var(--ink); overflow-wrap: anywhere; }
.k8-talk-panah { grid-column: 2; grid-row: 1 / 3; color: var(--navy); font-size: 14px; }
.k8-talk-item:hover, .k8-talk-item:focus-visible { background: rgb(29 58 138 / .08); outline: none; box-shadow: inset 2px 0 0 var(--navy); }
.k8-talk-item:focus-visible { box-shadow: inset 0 0 0 2px var(--navy); }
@media (prefers-reduced-motion: no-preference) { .k8-talk:not([hidden]) { animation: k8-talk-masuk 200ms var(--lengkung); } }
@keyframes k8-talk-masuk { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
@media (max-width: 640px) {
  .k8-talk-tirai { background: rgb(5 9 20 / .45); }
  .k8-talk { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: auto; padding: 10px 10px calc(14px + env(safe-area-inset-bottom, 0px)); border-radius: 18px 18px 0 0; }
  .k8-talk::before { content: ""; display: block; width: 40px; height: 4px; margin: 2px auto 8px; border-radius: 2px; background: #C9D0DC; }
  @media (prefers-reduced-motion: no-preference) { .k8-talk:not([hidden]) { animation-name: k8-talk-naik; } }
}
@keyframes k8-talk-naik { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- 4. cursor "View ↗" (≥961, pointer halus; k8.js) ---------- */
.k8-kursor { position: fixed; left: 0; top: 0; z-index: 99; pointer-events: none; opacity: 0; transition: opacity 160ms var(--lengkung); will-change: transform; }
.k8-kursor.hidup { opacity: 1; }
.k8-kursor-cincin { position: absolute; left: -17px; top: -17px; width: 34px; height: 34px; border-radius: 50%; border: 1.5px solid #FFFFFF;
  box-shadow: 0 0 0 1px rgb(11 19 38 / .55), inset 0 0 0 1px rgb(11 19 38 / .35), 0 6px 16px -6px rgb(5 9 20 / .6); }
.k8-kursor-cincin::after { content: ""; position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 0 0 1px rgb(11 19 38 / .6); }
.k8-kursor-teks { position: absolute; left: 22px; top: 14px; padding: 5px 9px; border-radius: 999px; background: var(--ink); color: #FFFFFF; white-space: nowrap;
  font: 500 10.5px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; box-shadow: 0 8px 18px -8px rgb(5 9 20 / .6); }
html.k8-kursor-hidup .k8-sasar-kursor, html.k8-kursor-hidup .k8-sasar-kursor * { cursor: none !important; }

/* ---------- 5. J / K pembayang dalam HUD (sekali setiap sesi) ---------- */
/* absolute: tidak mengubah tinggi/susun atur HUD (gate ruang: kotak objek kekal) */
.pentas .bacaan { position: relative; }
.k8-jk { position: absolute; right: 0; bottom: calc(100% + 10px); padding: 5px 9px; border-radius: 999px; background: #FFFFFF; box-shadow: 0 0 0 1px currentColor; color: var(--o-teks); white-space: nowrap; opacity: 0; transition: opacity 300ms var(--lengkung); pointer-events: none; }
.k8-jk.nampak { opacity: 1; }
@media (max-width: 1180px), (max-height: 679px) { .k8-jk { display: none !important; } }

/* ---------- 6. 02 hub: label kategori atas garis (≥961) / chip bawah hub (≤960) ---------- */
.k8-hub-label { list-style: none; margin: 0; padding: 0; }
.k8-hub-label li { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); background: #FFFFFF; border-radius: 999px;
  padding: 5px 8px; box-shadow: 0 0 0 1px rgb(29 58 138 / .28), 0 4px 10px -6px rgb(11 19 38 / .5); white-space: nowrap; }
@media (min-width: 961px) {
  .k8-hub-label { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
  .k8-hub-label li { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); }
  .k8-hub-label li::before { content: ""; display: inline-block; width: 5px; height: 5px; margin: 0 6px 1px 0; border-radius: 50%; background: rgb(var(--cahaya)); box-shadow: 0 0 0 1.5px var(--navy); vertical-align: middle; }
}
@media (max-width: 960px) {
  .k8-hub-label { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
  .k8-hub-label li { padding: 6px 9px; }
}

/* ---------- 7. 02 kad SAKTI: kekal merah/maroon ikut warna sistem SAKTI TD (gaya K7, blok "Arah K3 — 02 Integrasi"). Arahan Razlan K2;
   cadangan navy ditarik balik 21 Okt → blok navy 7 + 7b dipadam, tiada tindihan di sini ---------- */

/* ---------- 8. 04 kapsyen bingkai (kad foto "tangan" K8 DIBUANG 22 Okt p3 — foto kabur resolusi rendah; ganti kad HUD angka, blok P3-C) ---------- */
.k8-kajian { display: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .pameran-kerja .unggul-teks .unggul-nama { display: none; }  /* nama sistem: hanya di baris senarai kiri (pemilih) — tiada label berganda */
  html.js .pameran-kerja .unggul-teks .k8-kajian { display: inline-flex; justify-self: start; align-items: center; min-height: 44px; font-size: 1.05rem; font-weight: 560; }
}

/* ---------- 9. 05 brief card (≥1181 lajur kanan semasa A2; tersorok ≤1180 — skor + langkah sudah ada dalam A2) ---------- */
.k8-brief { display: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  /* frame HadirAi (sticky sepanjang bab) beri tempat kepada brief card bila A2 masuk (k8.js IO → html.k8-brief-nampak) */
  html.js.k8-brief-nampak #ai.bab-pameran > .wrap > .lajur > #pameran-ai { opacity: 0 !important; visibility: hidden !important; transition: opacity 300ms var(--lengkung), visibility 0s 300ms; }
  html.js #ai.bab-pameran > .wrap > .lajur > .k8-brief { display: block; grid-column: 2; grid-row: 6; align-self: start; position: sticky; top: calc(var(--atas-pentas) + 8px); margin-top: 56px; perspective: 1400px; }
}
.k8-brief-kad { width: min(100%, 470px); margin-left: auto; padding: 22px 24px 24px; border-radius: 20px; background: #FFFFFF; color: var(--ink);
  transform: rotateY(-5deg) rotateX(3deg); transform-origin: 60% 50%;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .95), 0 0 0 1px rgb(11 19 38 / .07), -22px 36px 60px -30px rgb(11 19 38 / .45), -6px 10px 18px -10px rgb(11 19 38 / .2); }
.k8-brief-atas { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 14px; }
.k8-brief-tag { font: 600 11px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--navy); }
.k8-brief-demo { font: 500 9.5px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D4760; }
.k8-brief-skor { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.k8-brief-nombor { font-size: 2.4rem; font-weight: 600; letter-spacing: -0.03em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.k8-brief-daripada { font: 500 12px/1 var(--mono); color: #3D4760; }
.k8-brief-kira { margin-left: auto; font: 500 10.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #3D4760; }
.k8-brief-baris { list-style: none; margin: 0; padding: 0; }
.k8-brief-baris li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 40px; padding: 6px 0; border-bottom: 1px solid var(--garis); }
.k8-b-no { font: 500 10.5px/1 var(--mono); color: var(--navy); }
.k8-b-soal { font-size: 13.5px; line-height: 1.35; color: var(--ink); }
.k8-b-jwp { min-width: 74px; min-height: 20.5px; box-sizing: border-box; padding: 5px 9px; border-radius: 999px; text-align: center; font: 500 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #FFFFFF; background: var(--navy); }
.k8-b-jwp b { font-weight: 500; opacity: .85; margin-left: 4px; }
.k8-brief-baris li.k8-kosong .k8-b-soal { height: 9px; border-radius: 5px; background: #E6EAF1; }
.k8-brief-baris li.k8-kosong .k8-b-soal.pendek { width: 72%; }
.k8-brief-baris li.k8-kosong .k8-b-jwp { background: none; box-shadow: inset 0 0 0 1px #C9D0DC; }
.k8-brief-langkah { margin-top: 14px; }
.k8-brief-langkah-tajuk { margin: 0 0 6px; font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #3D4760; }
.k8-brief-langkah ol { list-style: none; margin: 0; padding: 0; counter-reset: k8l; }
.k8-brief-langkah li { counter-increment: k8l; display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 10px; align-items: baseline; padding: 5px 0; font-size: 13.5px; line-height: 1.35; }
.k8-brief-langkah li::before { content: "0" counter(k8l); font: 500 10.5px/1 var(--mono); color: var(--navy); }
.k8-brief-langkah li.k8-kosong::after { content: ""; height: 9px; border-radius: 5px; background: #E6EAF1; width: 64%; align-self: center; }
.k8-brief-langkah li strong { font-weight: 600; }
@media (prefers-reduced-motion: no-preference) { .k8-b-jwp.k8-baru { animation: k8-jwp 220ms var(--lengkung); } }
@keyframes k8-jwp { from { transform: scale(.86); opacity: 0; } to { transform: none; opacity: 1; } }
/* garis lajur kanan disorok selagi brief card dalam skrin (k8.js IntersectionObserver) — tiada lukisan di belakang kad */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k8-brief-nampak .pentas[data-salinan="siang"] :is(.objek, .sudut) { opacity: 0 !important; transition: opacity 300ms var(--lengkung); }
  html.js.k8-brief-nampak .pentas[data-salinan="siang"] .objek-bingkai::before { opacity: 0 !important; }
}

/* ---------- 10. 06 jalur Build → Host → Run ---------- */
.k8-jalur { list-style: none; margin: 40px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.k8-jalur-kad { margin: 0; }
.k8-jalur-kad img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 14px; background: var(--kabus);
  box-shadow: 0 0 0 1px rgb(11 19 38 / .06), -10px 18px 30px -20px rgb(11 19 38 / .5); }
.k8-jalur-kad figcaption { display: grid; gap: 4px; margin-top: 12px; }
.k8-jalur-label { font: 600 11px/1.3 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--navy); }
.k8-jalur li:not(:last-child) .k8-jalur-label::after { content: " →"; color: #3D4760; font-weight: 500; }
.k8-jalur-ayat { font-size: 13.5px; line-height: 1.4; color: #3D4760; }
@media (max-width: 640px) {
  .k8-jalur { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 70%; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) 6px; scroll-padding-inline: var(--gutter); scrollbar-width: none; }
  .k8-jalur::-webkit-scrollbar { display: none; }
  .k8-jalur > li { scroll-snap-align: start; }
}

/* ---------- 11. hero: proksi pintu rak (scene.js letak kotak; tersorok tanpa 3D) ---------- */
.k8-pintu-rak { pointer-events: auto; position: absolute; z-index: 2; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; border-radius: 10px; background: none; cursor: pointer; }
.k8-pintu-rak:focus-visible { outline: 2px solid rgb(var(--cahaya)); outline-offset: 4px; }
html:not(.ada-3d) .k8-pintu-rak, html.serah .k8-pintu-rak { display: none; }

/* ---------- 12. pembaikan (b): kilau/teduh kuat HANYA semasa hover/tilt; rehat = K7 halus (metrik isi lajur kanan kekal) ---------- */
.k7-teduh-i::after { content: ""; position: absolute; inset: 0; background: linear-gradient(125deg, rgb(11 19 38 / 0) 56%, rgb(11 19 38 / .10) 72%); opacity: 0; transition: opacity 240ms var(--lengkung); }
html.js .k7-condong .k7-teduh-i::after { opacity: 1; }
.k8-kursor.tanpa-teks .k8-kursor-teks { display: none; }

/* ---------- 13. pembaikan (a): ≤960 butang Ask tiada jalur HUD dalam lapis CTA → ia terapung atas butang WhatsApp (320–414).
   Sorok bila lapis CTA sampai bawah kepala (sama kelakuan K6 "pintu-sorok" di kaki); CTA sendiri ada WhatsApp + e-mel. ---------- */
@media (max-width: 960px) {
  html.js.k8-ask-cta .pintu-ask:not([aria-expanded="true"]) { opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity 200ms var(--lengkung), visibility 0s 200ms, transform 200ms var(--lengkung); }
  html.js.k8-ask-cta .pintu-ask :is(.pintu-halo, .pintu-cincin, .pintu-ping, .pintu-titik) { animation-play-state: paused; }
}
/* 6b. ≤1180: hub tersorok (K6) → chip label kategori dalam kad SAKTI */
.k8-hub-chip { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; padding: 0; }
.k8-hub-chip li { font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #F4E6E8; padding: 6px 9px; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 214 220 / .35); background: rgb(255 214 220 / .06); } /* warna K7 atas maroon: teks = .sakti-ai, cincin = rim merah jambu SAKTI */
@media (min-width: 1181px) and (min-height: 680px) { html.js .k8-hub-chip { display: none; } }
html:not(.js) .k8-hub-chip { display: flex; }
/* 6c. teks dalam bingkai (label hub 02, kad HUD angka 04 — P3; asal kapsyen kad tangan) ikut peraturan kapsyen K5: muncul HANYA selepas garis tiada
   (scroll-driven: k5-kapsyen potong keras pada entry 64%; mod kelas: selepas .di-pentas + 380ms) → teks tak pernah atas garis */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1181px) and (min-height: 680px) {
    html.js:not(.tiada-sd) #pameran-integrasi .k8-hub-label { animation: k5-kapsyen linear both; animation-timeline: --k6-integrasi; }
    html.js:not(.tiada-sd) #pameran-kerja .k8-statistik { animation: k5-kapsyen linear both; animation-timeline: --k5-kerja; }
  }
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas #pameran-integrasi .k8-hub-label, html.js.k5-kelas #pameran-kerja .k8-statistik { opacity: 0; transition: opacity 0s; }
  html.js.k5-kelas #pameran-integrasi.di-pentas .k8-hub-label, html.js.k5-kelas #pameran-kerja.di-pentas .k8-statistik { opacity: 1; transition: opacity 200ms var(--lengkung) 380ms; }
}

/* ---------- 14. bab 01 deck (stack A) @ lajur sempit (cth 1920×1080): pilihan (b) arahan koordinator ----------
   A asal kecilkan rak (532×665, −11%) supaya kad belakang intai 64px di kiri → isi lajur 01 @1920 jatuh. (c) "intai ke kiri"
   GAGAL geometri: jurang teks ↔ lajur kanan = 51px sahaja pada 1600–1920 (diukur), intai 64px = tindih teks lead.
   (b): rak kekal saiz K7 (lebar lajur penuh), deck setinggi ruang pentas, KEDUA-DUA kad belakang intai di ATAS rak
   (dewan kiri, AIMS kanan) dengan tag di atas kad → tag penuh nampak. k8.js tanda [data-dek-atas] bila lajur < rak K7 + 64px. */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js #foto-hosting.dek[data-dek-atas] { --dek-h: calc(var(--ruang-pentas) - 44px); --dek-rw: min(calc(var(--dek-h) * .8), 100cqw); }
  html.js #foto-hosting.dek[data-dek-atas] .dek-dewan { left: 6px; top: 0; }
  html.js #foto-hosting.dek[data-dek-atas] .dek-aims { left: auto; right: 14px; top: 4px; bottom: auto; transform: rotate(2.5deg); }
  html.js #foto-hosting.dek[data-dek-atas] .dek-aims .dek-tag { top: 10px; bottom: auto; }
  html.js #foto-hosting[data-dek-atas][data-depan="aims"] .dek-aims { transform: translate(-6px, 4px) rotate(0deg) scale(1.03); }
}
/* ---------- 15. kontras 390 (arahan koordinator): ≤960 butang Ask dok dalam jalur HUD tetapi bayang 0 14px 30px melimpah ±28px
   BAWAH jalur → menggelapkan teks kandungan yang lalu di bawahnya (cth "11" bab 07: 5.98). Bayang dikurung dalam jalur. ---------- */
@media (max-width: 960px) {
  html.js .pintu-ask { box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 3px rgb(var(--cahaya) / .06), 0 3px 8px -6px rgb(5 9 20 / .55); }
  html.js .pintu-ask:hover { box-shadow: inset 0 1px 0 rgb(255 255 255 / .18), 0 0 0 3px rgb(var(--cahaya) / .10), 0 3px 8px -6px rgb(5 9 20 / .6); }
  html.js .pintu-ask:focus-visible { box-shadow: 0 0 0 4px #FFFFFF, 0 3px 8px -6px rgb(5 9 20 / .55); }
}

.pentas[data-salinan="malam"] .k8-jk, .pentas[data-salinan="cta"] .k8-jk { background: #0A1020; } /* HUD gelap (hero/CTA): latar pil ikut lapis, bukan putih */
/* ---------- 16. label ubin pasukan (RR/ZA/…, putih atas foto) ikut peraturan kapsyen K5: potong keras, tak pernah separa legap semasa
   bingkai 06 pudar (gate kontras K8 tangkap 1.94 pada legap 0.52 — mekanisme sama dalam K7, titik sampel K7 tak kena) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1181px) and (min-height: 680px) {
    html.js:not(.tiada-sd) #pentas-pasukan :is(.ubin-mono, .ubin-tahun, .ubin-monogram) { animation: k5-kapsyen linear both; animation-timeline: --k6-pasukan; }
  }
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas #pentas-pasukan :is(.ubin-mono, .ubin-tahun, .ubin-monogram) { opacity: 0; transition: opacity 0s; }
  html.js.k5-kelas #pentas-pasukan.di-pentas :is(.ubin-mono, .ubin-tahun, .ubin-monogram) { opacity: 1; transition: opacity 200ms var(--lengkung) 380ms; }
}
/* 16b. tag kad deck 01 (stack A) — sama: potong keras semasa bingkai 01 pudar */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1181px) and (min-height: 680px) {
    html.js:not(.tiada-sd) #foto-hosting .dek-tag { animation: k5-kapsyen linear both; animation-timeline: --k5-hosting; }
  }
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas #foto-hosting .dek-tag { opacity: 0; transition: opacity 0s; }
  html.js.k5-kelas #foto-hosting.di-pentas .dek-tag { opacity: 1; transition: opacity 200ms var(--lengkung) 380ms; }
}
/* 14b. kapsyen deck 01 di bawah kad RAK (sama kedudukan K7), bukan selebar deck: teks tak bergerak ke kiri bila kad belakang wujud
   (gate ruang 1440: kapsyen selebar deck → isi lajur 01 −0.1) */
@media (min-width: 961px) { html.js #foto-hosting.dek .foto-kapsyen { width: var(--dek-rw); margin-left: auto; } }

/* =========================================================================
   Arah K8 — PUSINGAN 2 (21 Okt 2026): pembaikan audit A1–A10 + item ★ kecil (B) + hero "Latest work" (P3: pil E) + AARM 04.
   Teks baharu + sumber: README §Pusingan 2. Tiada warna baharu di luar token sedia ada (--ais, --cahaya, --navy, --ink, --kelabu, --malam).
   ========================================================================= */

/* ---------- P2-a → P3-A. Hero "Latest work" = pil E (pusingan 3, 22 Okt; ganti jalur mono varian A — Razlan: "sekali pandang pun tak nampak").
   Pil terang 2 baris DI ATAS kicker: thumbnail product shot 56×36 + baris mono label · bulan · klien + nama SANS 20px (≤640: 17px).
   Duduk dalam ruang kepala→kicker: margin atas negatif = min(tinggi pil + jarak, ruang − 10px) → headline teranjak hanya bila ruang < pil.
   Latar --hl-latar: diukur 2 tona (README §Pusingan 3) — tona yang dipilih ditulis di bawah. Teks --ink. Halo = --cahaya (token halo sahaja). ---------- */
.hl-titik { position: relative; display: inline-block; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); }
.hl-titik::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--ink); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { html.js .hl-titik::after { animation: hl-ping 2.8s cubic-bezier(.2, .7, .2, 1) infinite; } }
@keyframes hl-ping { 0% { transform: scale(1); opacity: .7; } 45%, 100% { transform: scale(3); opacity: 0; } }
.hl-pendek { display: none; }
@media (max-width: 1280px) { .hl-panjang { display: none; } .hl-pendek { display: inline; } }
.hl-e { --hl-h: 50px; --hl-jarak: 12px; --hl-latar: var(--ais); display: flex; align-items: center; min-width: 0; max-width: 100%;
  margin-top: calc(-1 * min(var(--hl-h) + var(--hl-jarak), clamp(40px, 8vh, 104px) - 10px)); margin-bottom: var(--hl-jarak); }
.hl-senarai { list-style: none; margin: 0; padding: 0; min-width: 0; flex: 0 1 auto; }
.hl-chip { display: block; border-radius: 14px; color: var(--ink); max-width: 100%; }
.hl-chip-isi { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 12px; height: var(--hl-h); max-width: 100%;
  padding: 0 16px 0 7px; border-radius: 14px; background: var(--hl-latar);
  box-shadow: 0 0 0 4px rgb(var(--cahaya) / .12), 0 4px 22px -12px rgb(var(--cahaya) / .5); /* halo pendek: halo mockup (0 12px 34px) cerahkan latar kicker → kontras kicker 8.4 → 6.01 (gate piksel) */
  transition: background-color 200ms var(--lengkung), box-shadow 240ms var(--lengkung); }
.hl-chip:hover .hl-chip-isi { background: #FFFFFF; box-shadow: 0 0 0 6px rgb(var(--cahaya) / .18), 0 4px 24px -12px rgb(var(--cahaya) / .6); }
.hl-chip:focus-visible { outline: none; }
.hl-chip:focus-visible .hl-chip-isi { outline: 2px solid var(--ais); outline-offset: 3px; }
.hl-bulat { display: block; width: 56px; height: 36px; border-radius: 7px; overflow: hidden; box-shadow: 0 0 0 1px rgb(11 19 38 / .22); }
.hl-bulat img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hl-e-teks { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.hl-label { display: flex; align-items: center; gap: 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font: 700 10px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.hl-ayat { font: 600 20px/1.15 var(--sans); letter-spacing: -.012em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-anak { display: inline-block; font: 500 18px/1 var(--sans); transition: transform 300ms var(--lengkung); }
.hl-chip:hover .hl-anak { transform: translateX(3px); }
/* ‹ › kecil PUDAR (bukan sama berat dengan pil): glyph --ais-redup, cincin nipis; hover/fokus = penuh. Sasaran 44px. */
.hl-kawal { display: flex; flex: none; margin-left: 2px; }
html:not(.js) .hl-kawal { display: none; }
.hl-btn { position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: var(--ais-redup); cursor: pointer; font: 500 12px/1 var(--mono); }
.hl-btn::before { content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 -11px; border-radius: 50%;
  border: 1px solid rgb(238 242 249 / .22); transition: border-color 160ms ease, background-color 160ms ease; }
.hl-btn:hover, .hl-btn:focus-visible { color: var(--ais); }
.hl-btn:hover::before { border-color: rgb(238 242 249 / .6); background: rgb(238 242 249 / .06); }
.hl-btn:focus-visible { outline: 2px solid var(--ais); outline-offset: -6px; border-radius: 50%; }
.hl-btn span { position: relative; }
/* tukar item: teks TIDAK pernah separa legap (peraturan "potong keras" K5 — gate kontras piksel). Gerak = translate ±4px;
   legap lompat 1 → 0 di hujung 160ms (keluar), 0 → 1 serta-merta (masuk). Jumlah 160 + 240 = 400ms. */
.hl-senarai li { transition: opacity 160ms steps(1, end), transform 160ms var(--lengkung); }
.hl-senarai li.hl-keluar { opacity: 0; transform: translateY(-4px); }
.hl-senarai li.hl-awal { opacity: 0; transform: translateY(4px); transition: none; }
.hl-senarai li.hl-masuk { transition: opacity 0s, transform 240ms var(--lengkung); }
@media (prefers-reduced-motion: no-preference) {
  .js .hl-e { opacity: 0; transform: translateY(8px); transition: opacity 380ms var(--lengkung), transform 380ms var(--lengkung); }
  .js .sedia .hl-e { opacity: 1; transform: none; transition-delay: 120ms; }
}
@media (prefers-reduced-motion: reduce) { .hl-senarai li, .hl-btn::before, .hl-chip-isi, .hl-anak { transition: none !important; } }
@media (min-width: 641px) and (max-width: 1180px) { .hl-e-bln { display: none; } } /* baris mono 1024 terpotong → bulan disorok (masih dalam aria-label) */
/* Skrin rendah (≥961, tinggi < 800: 1366×768, 1280×720, 1024×768): ruang kepala→kicker 47–51px < pil 62px → pil padat 44px + jarak 8px
   supaya headline/lejar tak turun (diukur: anjakan headline 10–14px → ≤ 4px). Sasaran sentuh kekal 44px. */
@media (min-width: 961px) and (max-height: 799px) { .hl-e { --hl-h: 44px; --hl-jarak: 8px; } .hl-bulat { height: 32px; width: 50px; } }
/* ≤960: jalur HUD + garis pemisah di atas → pil turun sedikit (headline teranjak, diukur ≤ 48px) */
@media (max-width: 960px) { .hl-e { --hl-h: 46px; margin-top: -32px; } }
@media (max-width: 640px) {
  .hl-e .hl-kawal { display: none; }
  .hl-e .hl-senarai { flex: 1 1 auto; }
  .hl-chip-isi { column-gap: 10px; padding: 0 12px 0 6px; }
  .hl-bulat { width: 48px; height: 32px; }
  .hl-e-bln { display: none; }
  .hl-ayat { font-size: 17px; letter-spacing: -.016em; }
}
@media (max-width: 379px) { .hl-ayat { font-size: 15px; } .hl-label { font-size: 9px; letter-spacing: .04em; } } /* 320: label terpotong 14px pada .1em, 4px pada .06em */
/* Tona pil (ii) "ais": campuran 2 token sedia ada (--cahaya 35% + --ais = #DDECFB), bukan hex baru. Diukur vs (i) --ais putih (sama butang "Talk to us"):
   kabur 10px beza L* 46.3 vs 47.7 (syarat ≥ 30; jalur A = 2.6), kontras --ink 15.38 vs 16.47 (syarat ≥ 7.9), ΔE vs butang 6.1 vs 0 → (ii) dipilih: tak bersaing dengan butang.
   Nota: --cahaya ditanda "halo sahaja" dalam :root — guna sebagai tona latar = keputusan Razlan (alternatif lulus: --garis, kabur 45.4, kontras 14.66, ΔE 4.6).
   Tanpa color-mix (browser lama) = (i) --ais. */
@supports (color: color-mix(in srgb, red, blue)) { .hl-e { --hl-latar: color-mix(in srgb, rgb(var(--cahaya)) 35%, var(--ais)); } }

/* ---------- P3-C. 04 kad HUD angka (ganti kad foto tangan yang DIBUANG 22 Okt — Razlan: foto kabur resolusi rendah). Data = data/latest.json `stats`
   (AARM: 10 ASEAN armies · 500+ participants · 24 matches; sumber stats_source). Teks tajam (DOM), bukan foto. ≥1181 sahaja (≤1180 angka sama
   sudah dalam kad AARM di senarai). k8.js: tersorok bila baris lain dipilih. Kapsyen 04 beri ruang lebar kad di kanan. ---------- */
.k8-statistik { display: none; }
@media (min-width: 1181px) {
  .k8-statistik { position: absolute; z-index: 4; right: -10px; bottom: -24px; display: block; width: clamp(150px, 34%, 200px); padding: 12px 14px; border-radius: 14px;
    background: #0B1326; color: var(--ais); box-shadow: 0 0 0 1px rgb(var(--cahaya) / .18), -16px 24px 38px -18px rgb(11 19 38 / .5), -4px 6px 10px -6px rgb(11 19 38 / .25); }
  .k8-statistik[hidden] { display: none; }
  .k8-st-tajuk { display: flex; align-items: center; gap: 7px; margin: 0 0 9px; font: 600 9.5px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
  .k8-statistik .hl-titik { background: var(--ais); }
  .k8-statistik .hl-titik::after { border-color: rgb(var(--cahaya) / .9); }
  .k8-statistik dl { display: grid; gap: 6px; margin: 0; }
  .k8-statistik dl > div { display: flex; align-items: baseline; gap: 8px; }
  .k8-statistik dt { min-width: 2.6em; font: 600 24px/1 var(--sans); letter-spacing: -.02em; }
  .k8-statistik dd { margin: 0; font: 500 11px/1.3 var(--mono); color: #C9D2E2; }
  html.js .pameran-kerja .unggul-teks { padding-right: calc(clamp(150px, 34%, 200px) + 12px); }
}

/* ---------- P3 audit foto (a): saiz papar ≤ piksel fail ÷ 2 (DPR 2) pada saiz terbesar ----------
   · product shot 02–05: komposit 1360px dipapar 681.8px (114.4% × 596) = nisbah 1.003 → had 680px, kekal di tengah
   · deck 01 rak (svr-led 1120px, sumber 1125px lebar — tiada piksel lagi) dipapar 596px @1920 = 1.064 → had 560px
   · deck 01 AIMS (aims-luar 362px, sumber sama 362px) 200px × scale 1.03 (depan) = 1.14 → 174px (× 1.03 = 179) */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .bab-pameran .pameran-shot .shot { --shot-w: min(114.4%, 680px); left: calc((100% - var(--shot-w)) / 2); width: var(--shot-w); }
}
@media (min-width: 961px) { .dek-aims { width: min(174px, calc(var(--dek-rw) * .40)); } }
@media (min-width: 1181px) and (min-height: 680px) {
  html.js #foto-hosting.dek[data-dek-atas] { --dek-rw: min(calc(var(--dek-h) * .8), 100cqw, 560px); }
}

/* ---------- P2-b. A1 butang naik ke atas: kembar butang Ask. Tersorok sampai hero lepas (html.k8-lepas-hero, k8.js) ---------- */
.k8-atas { display: none; }
html.js .k8-atas {
  position: fixed; z-index: 45; display: grid; place-items: center; align-content: center; gap: 4px; padding: 0; border-radius: 50%; cursor: pointer;
  border: 1px solid rgb(var(--cahaya) / .5); color: var(--ais); background: radial-gradient(circle at 50% 30%, #1A2747, var(--malam) 70%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 4px rgb(var(--cahaya) / .06), 0 14px 30px -10px rgb(5 9 20 / .55);
  font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  opacity: 0; visibility: hidden; transform: scale(.9);
  transition: opacity 200ms var(--lengkung), visibility 0s 200ms, transform 200ms var(--lengkung), border-color 200ms var(--lengkung);
}
html.js.k8-lepas-hero .k8-atas { opacity: 1; visibility: visible; transform: none; transition: opacity 200ms var(--lengkung), visibility 0s, transform 200ms var(--lengkung), border-color 200ms var(--lengkung); }
html.js .k8-atas:hover { border-color: rgb(var(--cahaya) / .95); }
html.js .k8-atas:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; box-shadow: 0 0 0 5px #FFFFFF, 0 14px 30px -10px rgb(5 9 20 / .55); }
.k8-atas-panah { width: 7px; height: 7px; border-left: 1.5px solid currentColor; border-top: 1.5px solid currentColor; transform: translateY(2px) rotate(45deg); }
@media (min-width: 961px) {
  html.js .k8-atas { --jidar: calc((100vw - var(--lebar)) / 2); --saiz: clamp(44px, calc(var(--jidar) - 10px), 56px);
    width: var(--saiz); height: var(--saiz); right: max(4px, calc((var(--jidar) - var(--saiz)) / 2));
    bottom: calc(16px + env(safe-area-inset-bottom, 0px) + var(--saiz) + 10px); }
}
@media (min-width: 961px) and (max-width: 1099px) { html.js .k8-atas { bottom: calc(24px + var(--hud-t) + 8px + var(--saiz) + 10px); } }
@media (min-width: 961px) and (max-width: 1279px) { html.js .k8-atas { gap: 3px; font-size: 9.5px; letter-spacing: .06em; } }
/* ≤960: dok dalam jalur HUD atas sebelah kiri Ask (latar padu, tak pernah menindih kandungan); dalam lapis CTA (tiada jalur) = tersorok macam Ask
   → kaki ada link "Back to top". Ruang jalur dikhaskan hanya selepas hero (jalur hero "00 Web · mobile · AI · hosting" kekal penuh);
   teks HUD ≤960 selepas hero = nama bab sahaja (motion.js LABEL indeks 2) supaya muat 320px. */
@media (max-width: 960px) {
  html.js .k8-atas { top: calc(var(--kepala-t) + env(safe-area-inset-top, 0px) + 6px); right: calc(var(--gutter) - 6px + 48px); width: 44px; height: 44px; gap: 3px; font-size: 9.5px; letter-spacing: .06em;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), 0 0 0 3px rgb(var(--cahaya) / .06), 0 3px 8px -6px rgb(5 9 20 / .55); }
  html.js .k8-atas:focus-visible { box-shadow: 0 0 0 4px #FFFFFF, 0 3px 8px -6px rgb(5 9 20 / .55); }
  html.js.k8-lepas-hero .pentas-dalam { padding-right: calc(var(--gutter) + 46px + 48px); }
  html.js.k8-ask-cta .k8-atas, html.js.pintu-buka .k8-atas, html.js.k8-talk-buka .k8-atas, html.js.ask-sapa .k8-atas { opacity: 0; visibility: hidden; transform: scale(.9); transition: opacity 200ms var(--lengkung), visibility 0s 200ms, transform 200ms var(--lengkung); }
}
@media (prefers-reduced-motion: reduce) { html.js .k8-atas { transition: none !important; } }
.k8-atas-link { white-space: nowrap; gap: 5px; } /* pil sapa Ask ≤960 melebar ke kiri atas TOP → TOP disorok semasa sapa */

/* ---------- P2-c. A3 zum imej (sasaran cursor "View") ---------- */
.k8-zum { padding: 0; border: 0; background: transparent; max-width: none; max-height: none; width: 100vw; height: 100dvh; margin: 0; overflow: hidden; }
.k8-zum[open] { display: grid; place-items: center; }
.k8-zum::backdrop { background: rgb(5 9 20 / .86); }
.k8-zum-isi { margin: 0; display: grid; justify-items: center; gap: 12px; padding: 64px 16px 24px; max-width: 100%; }
.k8-zum-isi img { display: block; max-width: min(92vw, 1360px); max-height: calc(100dvh - 140px); width: auto; height: auto; object-fit: contain; border-radius: 10px; background: #F4F6FA; }
.k8-zum-isi figcaption { max-width: min(92vw, 720px); font: 500 12px/1.5 var(--mono); letter-spacing: .04em; color: #DCE4F2; text-align: center; }
.k8-zum-tutup { position: fixed; top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(238 242 249 / .4); background: rgb(11 19 38 / .6); color: #FFFFFF; font: 400 24px/1 var(--sans); cursor: pointer; }
.k8-zum-tutup:focus-visible { outline: 2px solid var(--ais); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .k8-zum[open] .k8-zum-isi { animation: k8-zum-masuk 200ms var(--lengkung); } }
@keyframes k8-zum-masuk { from { opacity: 0; transform: scale(.97); } }
html.js .k8-zum-boleh { cursor: zoom-in; }

/* ---------- P2-d. A6 hotspot rak: label kecil sentiasa nampak + popover keluar semasa fokus papan kekunci (macam hover) ---------- */
@media (min-width: 961px) {
  .k7-titik-label { position: absolute; left: 18px; top: 50%; width: auto; height: auto; overflow: visible; clip: auto; transform: translateY(-50%);
    pointer-events: auto; padding: 3px 7px; border-radius: 4px; background: #0B1326; color: #FFFFFF; font: 500 10px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
  .k7-titik li[style*="--x:9"] .k7-titik-label, .k7-titik li[style*="--x:6"] .k7-titik-label, .k7-titik li[style*="--x:7"] .k7-titik-label { left: auto; right: 18px; }
  .k7-titik li.buka .k7-titik-label, .k7-titik li.intai .k7-titik-label, .k7-titik li:has(button:focus-visible) .k7-titik-label { opacity: 0; }
  .k7-titik li:has(button:focus-visible) .k7-titik-isi { display: block; }
  /* pratonton hover (intai) menutup kawasan label → klik tembus popover ke label/butang (klik = kekal), sama seperti klik titik */
  .k7-titik li.intai:not(.buka) .k7-titik-isi { pointer-events: none; }
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1181px) and (min-height: 680px) {
    html.js:not(.tiada-sd) #foto-hosting .k7-titik-label { animation: k5-kapsyen linear both; animation-timeline: --k5-hosting; }
    html.js:not(.tiada-sd) #pameran-integrasi .k8-hub-nota { animation: k5-kapsyen linear both; animation-timeline: --k6-integrasi; }
  }
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas #foto-hosting .k7-titik-label, html.js.k5-kelas #pameran-integrasi .k8-hub-nota { opacity: 0; transition: opacity 0s; }
  html.js.k5-kelas #foto-hosting.di-pentas .k7-titik-label, html.js.k5-kelas #pameran-integrasi.di-pentas .k8-hub-nota { opacity: 1; transition: opacity 200ms var(--lengkung) 380ms; }
}

/* ---------- P2-e. A7 status: tiga bentuk (Live = penuh + cincin · On request = kosong · Demo-ready = separuh) + legend atas jadual ---------- */
.status-demo::before { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.k8-nota { margin-top: 16px; gap: 6px 20px; font-size: 14px; }
.k8-nota-pasang { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.k8-nota + .k8-pandu, .k8-pandu { margin: 6px 0 0; font: 500 11px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #4F5B74; }
.k8-nota ~ .jadual-bungkus .jadual-produk { margin-top: 14px; }
/* B14: pil penapis TERPILIH = isi padu sahaja; halo hanya untuk fokus papan kekunci (beza terpilih vs difokus) */
.sektor button[aria-pressed="true"] { box-shadow: none; }
.sektor button:focus-visible { box-shadow: 0 0 0 5px rgb(var(--cahaya) / .55); }

/* ---------- P2-f. 02 hub: "Example categories" ---------- */
.k8-hub-nota { display: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  .k8-hub-nota { display: block; position: absolute; left: 4%; top: 4%; z-index: 3; margin: 0; pointer-events: none;
    font: 500 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #4F5B74; background: #FFFFFF; padding: 5px 8px; border-radius: 999px; }
  html:not(.js) .k8-hub-nota { display: none; }
}
.k8-hub-chip-nota { margin: 14px 0 0; font: 500 10px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #E7C9CD; }
.k8-hub-chip-nota + .k8-hub-chip { margin-top: 8px; }
@media (min-width: 1181px) and (min-height: 680px) { html.js .k8-hub-chip-nota { display: none; } }

/* ---------- P2-g. A5 brief card 05 menindih HUD @1440×900 → HUD (bacaan + rel) disorok selagi kad dalam skrin (sama frame HadirAi) ---------- */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k8-brief-nampak .pentas[data-salinan="siang"] :is(.bacaan, .rel) { opacity: 0 !important; visibility: hidden; transition: opacity 200ms var(--lengkung), visibility 0s 200ms; }
}

/* ---------- P2-h. A2 chip ⌘K boleh klik + "Search" dalam nav desktop ---------- */
.k7-kbd { pointer-events: auto; }
@media (min-width: 1181px) {
  html.js #nav .k7-nav-cari:not([hidden]) { display: list-item !important; list-style: none; }
  html.js #nav .k7-nav-cari :is(button, a) { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
  html.js #nav .k7-nav-cari :is(button, a):hover { text-decoration: underline; text-underline-offset: 6px; }
}

/* ---------- P2-i. A8 lukisan 07: legend + ✓ ikut hasil carian (k8.js set --k8-rekod-dy; 0 hasil = ✓ disorok). Hanya bentuk "rekod" ---------- */
.baca .b-legend { font-size: 11px; letter-spacing: .04em; text-transform: none; fill: var(--kelabu); }
.pentas[data-salinan="siang"][data-peringkat="rekod"] .o-aksen { transform: translateY(var(--k8-rekod-dy, 0px)); transition: transform 200ms var(--lengkung), opacity 200ms var(--lengkung); }
.pentas[data-salinan="siang"][data-peringkat="rekod"].k8-rekod-kosong .o-aksen { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .pentas[data-salinan="siang"][data-peringkat="rekod"] .o-aksen { transition: none; } }

/* ---------- P2-j. 07 nota supplier pack (★) · CTA "or request a brief" (★) ---------- */
.k8-pek-nota { font: 500 11px/1.4 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #4F5B74; align-self: center; }
html:not(.js) .k8-pek-nota { display: none; }
.k8-cta-brief { margin: 18px 0 0; }
.k8-cta-brief .link-teks { margin-top: 0; padding: 0; border: 0; background: none; font: inherit; font-weight: 560; color: #DCE4F2; cursor: pointer; }
.k8-cta-brief .link-teks:focus-visible { outline: 2px solid var(--ais); outline-offset: 3px; }

/* ---------- P2-k. Kaki: B5 baseline © ↔ Legal · ★ 2 lajur link Site ≤640 ---------- */
.kaki-hak { align-items: center; }
.kaki-hak > p { margin: 0; }
@media (max-width: 640px) {
  .kaki-lajur[aria-label="Footer: site"] { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
  .kaki-lajur[aria-label="Footer: site"] h2 { grid-column: 1 / -1; }
}

/* ---------- P2-l. B15 imej gagal dimuat: sorok ikon "imej rosak" browser (kad kekal, alt dibaca screen reader) ---------- */
img.k8-gagal { opacity: 0 !important; }

/* ---------- P2-m. B11 petunjuk swipe 01 kini DI ATAS jalur foto (≤960) ---------- */
@media (max-width: 960px) { #foto-hosting .dek-petunjuk { margin: 0 0 10px; } }
/* A3: kad deck 01 yang sudah di depan = tiada tindakan → cursor sistem biasa (bukan cincin) */
html.k8-kursor-hidup :is([data-depan="rak"] .dek-kad[data-kad="rak"], [data-depan="dewan"] .dek-kad[data-kad="dewan"], [data-depan="aims"] .dek-kad[data-kad="aims"]),
html.k8-kursor-hidup :is([data-depan="rak"] .dek-kad[data-kad="rak"], [data-depan="dewan"] .dek-kad[data-kad="dewan"], [data-depan="aims"] .dek-kad[data-kad="aims"]) * { cursor: auto !important; }

/* ---------- P2-n. A9 rel HUD: nombor + nama bab SEMASA sahaja (nama = set nav). Nama penuh 7 bab tak muat 1181–1280 (diukur) ---------- */
.rel-nama { font-weight: inherit; }
.rel a:not([aria-current]) .rel-nama { display: none; }
@media (max-width: 1365px) { .rel { gap: 2px; } }
/* 961–1180: lebar kotak pentas ditentukan oleh kandungan rel (diukur K8 sebelum: 348.92px pada 961/1024). Rel nombor-sahaja lebih sempit
   → kotak objek 349 → 332 → saiz rak 1024×768 .894 → .94 (gate hero). Lebar minimum = lebar rel lama → kotak + rak sama tepat. */
@media (min-width: 961px) and (max-width: 1180px) { .rel { min-width: 348.92px; } }

/* ---------- P2-o. Susunan diluluskan Razlan 21 Okt ----------
   (1) 06: ≥1181×800 (ubin foto di pentas kanan) → kad nama kiri jadi senarai padat 2 lajur: nama + peranan (label mono). ≤1180 / tanpa JS:
   kad + foto kekal (ubin tiada di situ, tiada sesiapa hilang). */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js #pasukan .k8-pasukan-senarai { margin-top: 36px; gap: 0 32px; perspective: none; border-top: 1px solid var(--garis); }
  html.js #pasukan .k8-pasukan-senarai li { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 3px; padding: 14px 0; border-radius: 0; background: none;
    box-shadow: none; border-bottom: 1px solid var(--garis); transform: none !important; }
  html.js #pasukan .k8-pasukan-senarai :is(.p-foto, .monogram) { display: none; }
  html.js #pasukan .k8-pasukan-senarai .p-nama { font-size: 16.5px; }
  html.js #pasukan .k8-pasukan-senarai .p-jawatan { font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #4F5B74; }
}
/* (2) kad tangan 04 → 06: p2 ditarik balik; p3 kad tangan DIBUANG terus (arahan Razlan 22 Okt) */
/* (3) 6 servis kini di hujung 07 (ringkasan sebelum CTA) */
.k8-servis-07 { margin-top: 72px; }

/* =====================================================================================================================
   PUSINGAN 4 (22 Okt 2026) — audit bebas p3 (AUDIT-P3.md). README §Pusingan 4.
   B1: syarat pentas kanan ≥1181 × 800 → ≥1181 × 680 (sapu: semua (min-height: 800px) pentas → 680px; CSS + k7.js + k8.js + motion.js).
   ===================================================================================================================== */
/* ---- P4-B1. skrin rendah 680–799: 06 ubin 4 × 2 (bukan 2 × 4 yang jadi 108px) ---- */
@media (min-width: 1181px) and (min-height: 680px) and (max-height: 799px) {
  html.js .pameran-pasukan { --ubin: min(132px, calc((50vw - 140px) / 4), calc((var(--ruang-pentas) - 64px - 14px - 40px) / 2)); }
  html.js .pameran-pasukan .ubin-pasukan { grid-template-columns: repeat(4, var(--ubin)); width: calc(4 * var(--ubin) + 48px); margin-right: 0; }
  html.js .ubin-tahun { width: calc(4 * var(--ubin) + 48px); margin-right: 0; }
}
/* ---- P4-B6. pembayang J / K: sebaris dalam HUD (sebelah ⌘K), bukan terapung atas kapsyen 01 ---- */
/* 5 saat sekali sesi: pembayang AMBIL TEMPAT teks bacaan (bukan tambah lebar → kotak HUD tak melebar, rel 07 tak masuk bawah TOP) */
.k8-jk { position: static; align-self: center; padding: 3px 8px; font-size: 10.5px; letter-spacing: .06em; box-shadow: 0 0 0 1px currentColor; }
.bacaan:has(.k8-jk:not([hidden])) .bacaan-teks { display: none; }
/* ---- P4-B14. 01 AwanPrime: satu baris konteks di lajur kiri (bawah jalur fakta) ---- */
.k8-awan { margin: 22px 0 0; display: flex; flex-wrap: wrap; align-items: center; column-gap: 8px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D4760; }
.k8-awan .foto-awan { font-weight: 600; }
/* ---- P4-B2. 06 BUILD = kad kod sebenar TechManage (teks HTML dalam bingkai editor gelap; tajam pada semua saiz) ---- */
.k8-kod { position: relative; aspect-ratio: 4 / 5; overflow: hidden; container-type: size; display: flex; flex-direction: column; border-radius: 14px; background: linear-gradient(160deg, #142142 0%, #0B1326 60%, #080E1D 100%);
  box-shadow: 0 0 0 1px rgb(11 19 38 / .06), -10px 18px 30px -20px rgb(11 19 38 / .5), inset 0 0 0 1px rgb(var(--cahaya) / .14); color: #E3E9F5; }
.k8-kod-tab { display: flex; align-items: center; gap: 5px; margin: 0; padding: 9px 10px 8px; border-bottom: 1px solid rgb(var(--cahaya) / .14); font: 500 9px/1.2 var(--mono); letter-spacing: .02em; color: #A9B7D0; white-space: nowrap; overflow: hidden; }
.k8-kod-titik { flex: none; width: 6px; height: 6px; border-radius: 50%; background: #3A4A6E; }
.k8-kod-fail { margin-left: 4px; white-space: nowrap; font-size: clamp(7px, calc((100cqw - 52px) / 17.4), 10px); } /* 27 aksara muat penuh (cqw), tiada kerat */
.k8-kod pre { flex: 1 1 auto; min-height: 0; margin: 0; padding: 8px 10px 0; white-space: pre; overflow: hidden; letter-spacing: 0;
  /* 13 baris × ≤ 31 aksara + nombor baris SENTIASA muat (cqh + cqw) → tiada baris terpotong / di bawah kaki (verifier p4 #4) */
  font: 500 clamp(6.5px, min(calc((100cqh - 68px) / 13 / 1.5), calc((100cqw - 20px) / 21.5)), 13px)/1.5 var(--mono); }
.k8-kod-baris { counter-increment: k8kod; } /* baris dipisah \n dalam <pre> (bukan display:block → tiada jarak berganda) */
.k8-kod-baris::before { content: counter(k8kod); display: inline-block; width: 1.9em; margin-right: .7em; text-align: right; color: #8C99B4; } /* 5.3:1 atas #142142 (kes terburuk) */
.k8-kod code { counter-reset: k8kod; }
.k8-kod-kom { color: #A3B1CB; font-style: italic; }
.k8-kod-kw { color: #D6B8FF; }
.k8-kod-fn { color: #9FD0FF; }
.k8-kod-str { color: #A8E6BD; }
.k8-kod-cap { flex: none; margin: 0; padding: 8px 10px; border-top: 1px solid rgb(var(--cahaya) / .14); background: #0A1122; font: 600 9px/1.3 var(--mono); letter-spacing: .12em; color: #E3E9F5; }
@media (max-width: 960px) { .k8-kod-tab { font-size: 10px; } }
/* ---- P4-A2 + B0. Search: 961–1180 ikon kanta dalam nav (teks dibaca screen reader); ≥1181 teks; ≤960 butang kanta kepala + item Menu ---- */
.k8-kanta { display: none; flex: none; }
@media (min-width: 961px) and (max-width: 1180px) {
  html.js #nav .k7-nav-cari:not([hidden]) { display: list-item !important; list-style: none; }
  html.js #nav .k7-nav-cari :is(button, a) { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
  html.js #nav .k7-nav-cari :is(button, a):hover { background: rgb(var(--cahaya) / .14); }
  html.js #nav .k7-nav-cari .k8-kanta { display: block; }
  html.js #nav .k7-nav-cari .k8-cari-teks { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
.k8-cari-kepala { display: none; }
@media (max-width: 960px) {
  html.js .k8-cari-kepala:not([hidden]) { flex: none; display: inline-grid; place-items: center; margin-left: auto; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: none; color: inherit; cursor: pointer; }
  html.js .k8-cari-kepala:not([hidden]) .k8-kanta { display: block; }
  html.js .k8-cari-kepala:not([hidden]) + .menu-togol { margin-left: 0; }
  html.js .k8-cari-kepala:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
}
/* ---- P4-B15. 05 kad brief: arah ke butang sebenar ---- */
.k8-brief-arah { margin: 10px 0 0; font: 500 11px/1.45 var(--mono); letter-spacing: .04em; color: #4F5B74; }
/* ---- P4-B16. 07 carian tiada hasil: cadangan ---- */
.k8-cari-cadang { margin: 8px 0 12px; font-size: 14px; color: #3D4760; }
/* ---- P4-B12. ubin Adzrul: nama penuh (bukan monogram "AN" kedua) ---- */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .ubin-monogram.ubin-nama { font-size: max(12px, calc(var(--ubin) * .12)); line-height: 1.25; letter-spacing: .02em; text-align: center;
    padding: 5px 9px; border-radius: 8px; background: rgb(255 255 255 / .62); } /* latar kelabu ubin: ink 6.03 → ≥ 10 dengan alas putih */
}
/* ---- P4-B8. 04 ≤960: nama sistem sudah ada dalam kad pemilih di bawah → kapsyen bawah shot = klien + "Read the case study" sahaja ---- */
@media (max-width: 960px) { html.js #pameran-kerja .unggul-teks .unggul-nama { display: none; } html.js #pameran-kerja .unggul-teks .k8-kajian { display: inline-flex; align-items: center; min-height: 44px; font-weight: 560; } }
/* ---- P4-B10. sasaran zum boleh difokus (Tab) ---- */
.k8-zum-boleh:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 14px; }
/* kod langkah 3 (WCAG 2.5.3): kad kod BUILD = butang telus .k8-kod-buka di atas kad (k8.js); cincin fokus kekal pada kad, rupa sama */
.k8-kod-buka { position: absolute; inset: 0; z-index: 3; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: zoom-in; -webkit-appearance: none; appearance: none; }
.k8-kod-buka:focus-visible { outline: none; }
.k8-kod:has(> .k8-kod-buka:focus-visible) { outline: 2px solid var(--navy); outline-offset: 4px; border-radius: 14px; }
/* ---- P4-B18. Menu ≤960: "Search" sejajar tengah macam item lain; sheet sampai bawah skrin (CTA tak mengintai) ---- */
@media (max-width: 960px) {
  .nav.buka { min-height: calc(100dvh - var(--kepala-t) - env(safe-area-inset-top, 0px)); overflow-y: auto; }
  .nav ul a { justify-content: center; }
  .k7-nav-cari :is(button, a) { justify-content: center; text-align: center; }
}
/* ---- P4-B17. ruang kosong CTA → kaki: CTA tak lagi setinggi skrin penuh (isi + pentas tanda cukup dengan 86svh; ≤960 ikut isi) ---- */
.cta { min-height: 86vh; min-height: 86svh; padding-bottom: clamp(72px, 9vh, 120px); }
@media (max-width: 960px) { .cta { min-height: 0; padding-bottom: 72px; } }
/* ---- P4 pil E: thumbnail 56×36 tak terbaca (AARM = gumpalan merah, TechManage hampir putih atas pil cerah — audit p3 B9) → dibuang;
        titik aksen (berdenyut) dalam baris mono kekal sebagai penanda "baru". Pil kekal: warna, nama 20px, ‹ ›, giliran. ---- */
.hl-bulat { display: none; }
.hl-chip-isi { grid-template-columns: minmax(0, 1fr) auto; padding: 0 16px; }
.hl-e .hl-titik { width: 8px; height: 8px; background: var(--navy); }
.hl-e .hl-titik::after { border-color: var(--navy); }
@media (max-width: 640px) { .hl-chip-isi { padding: 0 12px 0 14px; } }
/* ---- P4 verifier: kad kod BUILD — fokus + zum (klon HTML besar dalam <dialog>) ---- */
.k8-jalur-kad .k8-kod { cursor: zoom-in; }
.k8-kod-zum { width: min(92vw, 560px); aspect-ratio: auto; height: auto; container-type: normal; cursor: auto; }
.k8-kod-zum pre { font-size: clamp(11px, 3vw, 15px); padding-bottom: 16px; }
/* ---- P4 verifier #2: bingkai pratonton 03/04/05 sentiasa nampak bila fokus di dalamnya (link "Read the case study" tak difokus semasa legap 0) ---- */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .bab-pameran :is(#pameran-produk, #pameran-kerja, #pameran-ai):focus-within { opacity: 1 !important; visibility: visible !important; }
  html.js.k8-brief-masuk .pentas[data-salinan="siang"] :is(.bacaan, .rel) { opacity: 0 !important; visibility: hidden; transition: opacity 200ms var(--lengkung), visibility 0s 200ms; }
}

/* =====================================================================================================================
   PUSINGAN 5 (24 Okt 2026) — kelulusan Razlan "ya ikut cadangan". README §Pusingan 5.
   ===================================================================================================================== */
/* ---- P5-2. kad kod BUILD: teks ≥ 9px. Kad = 8 baris (komen + 'action' hanya dalam zum); lajur kod lebih lebar (31 aksara @9px perlu ≥ 211px).
        Baris "lebih" disorok dalam kad, nampak dalam klon zum (.k8-kod-zum). Newline dalam span → tiada baris kosong. ---- */
.k8-kod .k8-kod-lebih { display: none; }
.k8-kod-zum :is(.k8-kod-lebih, .k8-kod-ringkas) { display: inline !important; } /* zum = 13 baris penuh (klon mungkin bawa .k8-kod-rendah) */
.k8-kod-zum.k8-kod-rendah pre { font-size: clamp(11px, 3vw, 15px); }
.k8-kod pre { font-size: clamp(6.5px, min(calc((100cqh - 68px) / 8 / 1.5), calc((100cqw - 20px) / 21.5)), 13px); }
.k8-kod-fail { font-size: clamp(9px, calc((100cqw - 52px) / 17.4), 10px); text-overflow: clip; }
.k8-kod-zum pre { font-size: clamp(11px, 3vw, 15px); }
@media (min-width: 641px) {
  /* subgrid: baris 1 = imej (foto 4:5 tentukan tinggi; kad kod container-type:size → 0 saiz intrinsik, regang isi baris), baris 2 = kapsyen */
  .k8-jalur { grid-template-columns: minmax(216px, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 0; }
  .k8-jalur > li { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .k8-jalur > li > .k8-jalur-kad { display: grid; grid-row: span 2; grid-template-rows: subgrid; }
  .k8-jalur .k8-kod { aspect-ratio: auto; min-height: 0; }
}
@media (max-width: 640px) {
  .k8-jalur { grid-template-columns: max(216px, 70%); } /* lajur pertama (kod) ≥ 216px → 9px pada 320 */
  /* verifier p5: kad 4:5 mobile tinggi → 13 baris penuh muat ≥ 9px (sama p4), tiada ruang kosong bawah kod */
  .k8-jalur .k8-kod .k8-kod-lebih { display: inline; }
  .k8-jalur .k8-kod pre { font-size: clamp(6.5px, min(calc((100cqh - 68px) / 13 / 1.5), calc((100cqw - 20px) / 21.5)), 13px); }
}
/* kad rendah (pentas 06 skrin rendah): ≤190px (8 baris + kaki tak muat ≥ 9px; 1280×760 kad 180 = potong 1 baris — sapuan p5) sorok kaki "BUILD · TechManage" (label kapsyen sama) → 8 baris; ≤160px sorok 3 baris "ringkas" → 5 baris (≥ 9px) */
@container (max-height: 190px) {
  .k8-kod-cap { display: none; }
  .k8-kod pre { font-size: clamp(6.5px, min(calc((100cqh - 42px) / 8 / 1.5), calc((100cqw - 20px) / 21.5)), 13px); }
}
/* ≤160px: kelas .k8-kod-rendah dari k8.js (ResizeObserver), BUKAN @container — Chromium: baris yang display ditogol oleh @container
   pada susun atur pertama hilang nombor counter (::before kosong, diuji 24 Okt). 5 baris, terpanjang 30 aksara. */
.k8-kod-rendah pre { font-size: clamp(6.5px, min(calc((100cqh - 42px) / 5 / 1.5), calc((100cqw - 20px) / 20.8)), 13px); }
.k8-kod-rendah :is(.k8-kod-ringkas, .k8-kod-cap) { display: none; }
.k8-kod-zum .k8-kod-cap { display: block !important; } /* zum: kaki sentiasa ada (klon boleh bawa .k8-kod-rendah) */

/* ---- P5-1. 06 skrin rendah ≥1181 × 680–799: jalur Build → Host → Run dipindah (k8.js, DOM) ke ruang kosong bawah ubin 4 × 2 + tahun
        dalam pentas kanan. Lebar = ubin; tinggi imej = baki ruang pentas (ruang − 2 ubin − tahun 62px − jarak 14 − label 22). Ayat kapsyen
        = sr-only (label nampak; ayat dibaca pembaca skrin + kapsyen zum). Lajur kiri tamat selepas senarai nama. ---- */
@media (min-width: 1181px) and (min-height: 680px) and (max-height: 799px) {
  /* verifier p5: pada 680–720 tinggi ubin 132 makan ruang → kad kod 96px (teks 7px). Ubin kini juga dihad supaya baris jalur ≥ 128px:
     (ruang − tahun 62 − jarak 14 − label 22 − jarak ubin 14 − 128) / 2 = (ruang − 240px) / 2 */
  html.js .pameran-pasukan { --ubin: min(132px, calc((50vw - 140px) / 4), calc((var(--ruang-pentas) - 240px) / 2)); }
  html.js #pentas-pasukan .k8-jalur { width: calc(4 * var(--ubin) + 48px); margin: 14px 0 0 auto; gap: 0 14px;
    grid-template-columns: minmax(208px, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); /* 5 baris × 30 aksara @9px perlu ≥ 207px */
    grid-template-rows: max(128px, calc(var(--ruang-pentas) - 2 * var(--ubin) - 62px - 14px - 22px)) auto; }
  html.js #pentas-pasukan .k8-jalur-kad img { aspect-ratio: auto; height: 100%; min-height: 0; object-position: 50% 40%; border-radius: 12px; }
  html.js #pentas-pasukan .k8-jalur .k8-kod { border-radius: 12px; }
  /* RUN: telefon penuh setinggi imej — contain (cover potong bucu telefon pada kotak pendek); latar = gradient sama dengan latar dalam imej */
  html.js #pentas-pasukan .k8-jalur-kad img[src*="jalan-satria"] { object-fit: contain; background: linear-gradient(#EEF1F6, #DFE5EE); }
  html.js #pentas-pasukan .k8-jalur-kad figcaption { margin-top: 6px; }
  html.js #pentas-pasukan .k8-jalur-label { font-size: 10.5px; }
  html.js #pentas-pasukan .k8-jalur-ayat { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
  html.js #pentas-pasukan .k8-jalur > li { animation: none; opacity: 1; translate: none; transform: none; }
  /* fokus papan kekunci dalam pentas (zum jalur) → pentas nampak walaupun di luar fasa legap (verifier p4: 01 dilangkau bila visibility:hidden) */
  html.js #pentas-pasukan:focus-within { opacity: 1 !important; visibility: visible !important; }
  /* Tab perlu sampai ke sasaran zum walaupun pentas belum legap (visibility:hidden pentas = langkau Tab) → jalur kekal visible (legap ikut
     pentas); bila pentas tersorok, k8.js letak .k8-jalur-tidur (pointer-events none) supaya tiada sasaran klik halimunan atas bab 05 */
  html.js #pentas-pasukan .k8-jalur { visibility: visible; }
  html.js #pentas-pasukan .k8-jalur.k8-jalur-tidur:not(:focus-within) { pointer-events: none; }
}
/* ---- P5-3. 04 ≥1181: nama sistem dalam kapsyen bawah shot (baris sendiri, bawah klien; bukan link — link = "Read the case study") ---- */
.k8-kap-sistem { display: none; }
@media (min-width: 1181px) and (min-height: 680px) {
  html.js .pameran-kerja .unggul-teks .k8-kap-sistem { display: block; margin-top: 4px; font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
}

/* =====================================================================================================================
   PUSINGAN 6 (24 Okt 2026) — audit bebas p5 (AUDIT-P5.md). README §Pusingan 6.
   ===================================================================================================================== */
/* ---- P2-1. bingkai kosong antara bab (03 → 04, 04 → 05 …): rangka garis bab baru dilukis pada 72% (motion.js, morph 380ms SAMA K7) tetapi
        shot hanya muncul pada entry 52–64% → ~24% tinggi skrin rangka KOSONG ("macam gambar gagal dimuat"). Masa sahaja diubah (mekanisme
        morph K7 kekal): garis pudar 34→41%, bingkai muncul 36→46%, kapsyen 46%. Rangka kosong kini ~8% (= masa morph). Keluar: tidak diubah.
        Nama @keyframes sama → takrif terakhir menang (semua timeline 01–06). Mod kelas: motion.js zon 0.5 → 0.64. ---- */
@keyframes k5-bingkai {
  entry 0% { opacity: 0; visibility: hidden; scale: .985; }
  entry 36% { opacity: 0; visibility: hidden; scale: .985; }
  entry 37% { visibility: visible; }
  entry 46% { opacity: 1; visibility: visible; scale: 1; }
  exit 0% { opacity: 1; visibility: visible; scale: 1; }
  exit 11% { visibility: visible; }
  exit 12% { opacity: 0; visibility: hidden; }
  exit 100% { opacity: 0; visibility: hidden; }
}
@keyframes k5-kapsyen { entry 0% { opacity: 0; animation-timing-function: step-end; } entry 46% { opacity: 1; animation-timing-function: step-end; } exit 0% { opacity: 0; animation-timing-function: step-end; } exit 100% { opacity: 0; } }
@keyframes k5-tutup1 { entry 34% { --tutup1: 0; } entry 41% { --tutup1: 1; } exit 13% { --tutup1: 1; } exit 22% { --tutup1: 0; } }
@keyframes k6-tutup2 { entry 34% { --tutup2: 0; } entry 41% { --tutup2: 1; } exit 13% { --tutup2: 1; } exit 22% { --tutup2: 0; } }
@keyframes k5-tutup3 { entry 34% { --tutup3: 0; } entry 41% { --tutup3: 1; } exit 13% { --tutup3: 1; } exit 22% { --tutup3: 0; } }
@keyframes k5-tutup4 { entry 34% { --tutup4: 0; } entry 41% { --tutup4: 1; } exit 13% { --tutup4: 1; } exit 22% { --tutup4: 0; } }
@keyframes k5-tutup5 { entry 34% { --tutup5: 0; } entry 41% { --tutup5: 1; } exit 13% { --tutup5: 1; } exit 22% { --tutup5: 0; } }
/* 06 KECUALI (audit sendiri p6): kad brief 05 masih di lajur kanan bila atas bab 06 pada 50–64% → ubin 06 awal tindih kad brief. 06 kekal masa p5. */
@keyframes k6-tutup6 { entry 50% { --tutup6: 0; } entry 57% { --tutup6: 1; } exit 13% { --tutup6: 1; } exit 22% { --tutup6: 0; } }
@keyframes k8-bingkai-06 {
  entry 0% { opacity: 0; visibility: hidden; scale: .985; }
  entry 52% { opacity: 0; visibility: hidden; scale: .985; }
  entry 53% { visibility: visible; }
  entry 64% { opacity: 1; visibility: visible; scale: 1; }
  exit 0% { opacity: 1; visibility: visible; scale: 1; }
  exit 11% { visibility: visible; }
  exit 12% { opacity: 0; visibility: hidden; }
  exit 100% { opacity: 0; visibility: hidden; }
}
@keyframes k8-kapsyen-06 { entry 0% { opacity: 0; animation-timing-function: step-end; } entry 64% { opacity: 1; animation-timing-function: step-end; } exit 0% { opacity: 0; animation-timing-function: step-end; } exit 100% { opacity: 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1181px) and (min-height: 680px) {
    html.js:not(.tiada-sd) #pentas-pasukan { animation-name: k8-bingkai-06; }
    html.js:not(.tiada-sd) #pentas-pasukan :is(.ubin-mono, .ubin-tahun, .ubin-monogram) { animation-name: k8-kapsyen-06; }
  }
}

/* ---- P2-2. kad kod rendah tapi tinggi: 10 baris (komen + 'action' kembali; ≤ 30 aksara) isi ruang gelap. Kelas .k8-kod-isi dari k8.js ---- */
.k8-kod-rendah.k8-kod-isi .k8-kod-lebih { display: inline; }
.k8-kod-rendah.k8-kod-isi pre { font-size: clamp(6.5px, min(calc((100cqh - 68px) / 10 / 1.5), calc((100cqw - 20px) / 20.8)), 13px); }
@container (max-height: 190px) { .k8-kod-rendah.k8-kod-isi pre { font-size: clamp(6.5px, min(calc((100cqh - 42px) / 10 / 1.5), calc((100cqw - 20px) / 20.8)), 13px); } }

/* ---- P2-3. RUN: akhiran "· SATRIA TD" hanya dalam pentas skrin rendah (ayat kapsyen sr-only di situ) ---- */
.k8-jalur-sistem { display: none; }
@media (min-width: 1181px) and (min-height: 680px) and (max-height: 799px) {
  html.js #pentas-pasukan .k8-jalur-sistem { display: inline; }
}

/* ---- P2-4. jalur 06 ≤640: petunjuk mono atas jalur (corak 01) ---- */
.k8-jalur-petunjuk { display: none; }
@media (max-width: 640px) {
  .k8-jalur-petunjuk { display: block; margin: 40px 0 10px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: #3D4760; }
  .k8-jalur-petunjuk + .k8-jalur { margin-top: 0; }
}

/* ---- P2-5. kapsyen zum: pil legap (latar sudah .86 — teks page masih tembus di belakang kapsyen) ---- */
.k8-zum-isi figcaption { padding: 6px 14px; border-radius: 999px; background: #070C18; color: #E3E9F5; }
.k8-zum-isi figcaption:empty { display: none; }

/* ---- P2-6. pil hero ≤640: titik giliran ●○○ dalam pil (atas anak panah). Desktop = ‹ › (titik disorok) ---- */
.hl-giliran { display: none; }
@media (max-width: 640px) {
  .hl-e .hl-anak { display: inline-flex; flex-direction: column; align-items: center; gap: 6px; }
  .hl-giliran { display: flex; gap: 4px; }
  .hl-giliran i { display: block; width: 5px; height: 5px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink); }
  .hl-giliran i.hl-g-aktif { background: var(--ink); }
}

/* ---- P2-8. tanpa JS: rel + bacaan HUD lajur kanan statik "01 Hosting" sepanjang page (bab 04 kata 01) → disorok ---- */
html:not(.js) .pentas[data-salinan="siang"] :is(.bacaan, .rel) { display: none; }
.k8-kod.k8-kod-kaki .k8-kod-cap { display: block !important; }

/* =====================================================================================================================
   PUSINGAN 6b (24 Okt 2026) — keputusan Razlan: jalur 06 telefon = PILIHAN B (lajur 3 _banding-390-jalur-pil-p5-p6.png). README §Pusingan 6b.
   ≤640 SAHAJA (≥641 tidak disentuh). Swipe dibuang: kod penuh lebar di atas, HOST + RUN sebelah-menyebelah di bawah → RUN SATRIA nampak tanpa seret.
   ===================================================================================================================== */
@media (max-width: 640px) {
  /* batal semua sifat swipe (seksyen 10 + P5-2). Lebar maks 494 = 2 × 240 + 14: HOST 720px ÷ DPR3 = 240 → 0 piksel dibesarkan sampai 640 */
  .k8-jalur { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px;
    overflow: visible; scroll-snap-type: none; overscroll-behavior-x: auto; margin-inline: 0; padding: 0; scroll-padding-inline: 0; max-width: 494px; }
  .k8-jalur > li { scroll-snap-align: none; }
  .k8-jalur > li:first-child { grid-column: 1 / -1; }
  /* kad kod ≈ 5:4 (mockup) dikira dari lebar kandungan (min(494px, 100vw − 2 gutter)), lantai 260px. BUKAN aspect-ratio + min-height:
     lantai itu dipindah ke lebar (kad 315px > lajur 280 @320). Jarak baris sebenar ≈ 1.58 × font (::before inline-block) → bahagi 1.6, bukan 1.5
     (diukur 390: 1.5 = baris 13 terpotong 5px). 13 baris: 320 → (260 − 68) / 13 / 1.6 = 9.2px */
  .k8-jalur .k8-kod { aspect-ratio: auto; height: max(260px, min(395px, calc((100vw - 2 * var(--gutter)) * .8))); }
  .k8-jalur .k8-kod pre { font-size: clamp(6.5px, min(calc((100cqh - 68px) / 13 / 1.6), calc((100cqw - 20px) / 21.5)), 13px); }
  /* zum kad kod: kad kini ≈ lebar zum (92vw) → besarkan TEKS (bukan kotak) supaya zum benar-benar membesar: ≈ 1.3–1.5× teks kad */
  .k8-kod-zum pre, .k8-kod-zum.k8-kod-rendah pre { font-size: min(15px, calc((92vw - 20px) / 21.5)); }
}

/* =====================================================================================================================
   PUSINGAN 8 (24 Okt 2026) — audit bebas p7 (AUDIT-P7.md). README §Pusingan 8. 0 fakta baru.
   ===================================================================================================================== */
/* ---- N2. link "Read the case study" disorok bila slug tiada di portal production (k8.js letak [data-k8-tiada]; [hidden] global = display:none). verifier p8: display:none
   = kapsyen kecut 86px @390 → baris senarai melompat 70–90px bila ditekan. Jadi ruang KEKAL (visibility:hidden: tak nampak,
   tak boleh diklik, keluar dari urutan Tab dan pokok aksesibiliti); display ikut CSS sedia ada (inline-flex dalam html.js) ---- */
.k8-kajian[data-k8-tiada] { visibility: hidden; pointer-events: none; }
/* ---- N5. paksi tarikh pentas 06: satu perkataan bawah setiap tarikh (sama makna dengan .s-teks lajur kiri) ---- */
.k8-tahun-kata { display: block; margin-top: 1px; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #465269; }
html.js .ubin-tahun li:nth-child(2) { text-align: center; }
html.js .ubin-tahun li:last-child { text-align: right; }
@media (min-width: 1181px) and (min-height: 680px) and (max-height: 799px) {
  /* ruang paksi dikhaskan 62px dalam formula P4/P5 (tahun 62): 2 baris muat bila margin + padding dikecilkan (18+14 → 10+8) */
  html.js .ubin-tahun { margin-top: 10px; padding-top: 8px; }
  /* ---- N4. "RUN · SATRIA TD" satu baris (1181–1199 dulu "TD" seorang diri di baris 2) ---- */
  html.js #pentas-pasukan .k8-jalur-label { white-space: nowrap; }
}
@media (min-width: 1181px) and (max-width: 1199px) and (min-height: 680px) and (max-height: 799px) {
  html.js #pentas-pasukan .k8-jalur-label { letter-spacing: .08em; }
}
/* ---- N9. tanpa JS: titik giliran ●○○ pil hero disorok (tiada JS = tiada giliran) ---- */
html:not(.js) .hl-giliran { display: none !important; }

/* =====================================================================================================================
   PUSINGAN 9 (25 Okt 2026) — audit bebas p8b. README §Pusingan 9.
   ===================================================================================================================== */
/* B3: telefon (≤640) — pratonton 03/04/05 disisip tepat bawah baris yang ditap (k8.js blok PUSINGAN 9). 03 = <tr> pembungkus. */
.k9-sisip, .k9-sisip > td { padding: 0; border: 0; }
@media (max-width: 640px) {
  .k9-sisip, .k9-sisip > td { display: block; } /* P11: ≤640 sahaja — 641–960 jadual 03 masih jadual sebenar → <tr>/<td colspan=4> biasa (block = sel tanpa nama, bingkai terhimpit 192px) */
  .pameran.k9-dalam { margin: 14px 0 22px; }
  li > .pameran.k9-dalam { margin-top: 10px; }
}
/* B5: tanpa JS (≤960) — kepala dulu logo sahaja (MENU perlukan JS). Kini <nav> SEDIA ADA dipapar statik di bawah logo: 7 bab + "Talk to us"
   (link WhatsApp terus, sama tingkah tanpa JS di desktop). Kepala masuk aliran dokumen (bukan absolute) dengan latar --malam padu →
   hero ditolak ke bawah sendiri (tiada tindih), padding-top hero tanpa JS dikurangkan sebanyak tinggi kepala. Cari (⌘K) kekal tiada tanpa JS. */
@media (max-width: 960px) {
  html:not(.js) .kepala { position: relative; background: var(--malam); color: var(--ais); border-bottom: 1px solid var(--ais-garis); }
  html:not(.js) .kepala-baris { flex-wrap: wrap; height: auto; min-height: var(--kepala-t); column-gap: 12px; row-gap: 0; }
  html:not(.js) .jenama { min-height: var(--kepala-t); }
  html:not(.js) .nav {
    position: static; display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 4px 14px;
    flex: 1 0 100%; margin: 0; padding: 0 0 14px; background: transparent; color: inherit; border: 0;
  }
  html:not(.js) .nav ul { flex-direction: row; flex-wrap: wrap; gap: 0 14px; }
  html:not(.js) .nav ul a { display: inline-flex; min-width: 24px; min-height: 44px; border: 0; font-size: 15px; letter-spacing: 0; } /* tinggi 44; lebar ≥ 24 + jarak 14 (WCAG 2.5.8) → tiada jurang besar selepas "AI" */
  html:not(.js) .nav .nav-cta { margin-top: 0; min-height: 44px; background: var(--ais); color: var(--ink); }
  html:not(.js) .hero-pentas { padding-top: calc(56px + env(safe-area-inset-top, 0px)); } /* pil "New" hero ≥ 24px bawah garis kepala */
}

/* =====================================================================================================================
   PUSINGAN 10 (25 Okt 2026): lajur kanan 07 = Lampiran A sijil MOF SEBENAR (belakang, klik = zum) + kad 11 bidang HTML (depan).
   Kad ikut carian "Find a field" (k8.js 13b). ≤1180 / skrin rendah / tanpa JS: Lampiran A sahaja (separuh atas, ketik = zum);
   kad disorok sebab jadual di bawah = kandungan sama. README §Pusingan 10.
   ===================================================================================================================== */
@property --tutup7 { syntax: "<number>"; inherits: true; initial-value: 0; }
.k8-sijil { margin: 36px 0 0; max-width: min(420px, 100%); }
.k8-sijil-susun { position: relative; }
.k8-sijil-kertas { position: relative; overflow: hidden; aspect-ratio: 1200 / 760; border-radius: 8px; background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgb(11 19 38 / .10), 0 22px 40px -24px rgb(11 19 38 / .45), 0 6px 14px -8px rgb(11 19 38 / .22); }
.k8-sijil-kertas img { display: block; width: 100%; height: auto; }
.k8-sijil-kertas::after { content: ""; position: absolute; inset: auto 0 0 0; height: 30%; pointer-events: none; background: linear-gradient(rgb(255 255 255 / 0), #FFFFFF 88%); }
.k8-sijil-tanda { display: none; }
.k8-sijil-kad { display: none; }
.k8-sijil-kap { margin-top: 14px; font: 500 11px/1.6 var(--mono); letter-spacing: .06em; color: #2E3850; } /* atas bayang kad + grid: lebih gelap (gate kontras p10: kelabu = 4.11) */
.k8-sijil-kap-besar { display: none; }
html:not(.js) .k8-sijil-kap-kecil { display: none; }
html.js .k8-sijil-kertas img.k8-zum-boleh { cursor: zoom-in; }
.k8-sijil-kertas img:focus-visible { outline: 3px solid var(--navy); outline-offset: -3px; }

@media (min-width: 1181px) and (min-height: 680px) {
  html.js #pentas-agensi { margin-top: calc(var(--atas-pentas) - 50vh - clamp(96px, 12vw, 160px)); max-width: none; }
  html.js .k8-sijil-susun { height: calc(var(--ruang-pentas) - 40px); width: min(100%, 600px); margin-left: auto; }
  html.js .k8-sijil-kertas { position: absolute; left: 0; top: 0; width: min(72%, calc((var(--ruang-pentas) - 40px) * .94 * 1200 / 1394)); height: auto; aspect-ratio: 1200 / 1394; overflow: hidden;
    transform: rotate(-2deg); transform-origin: 0 0; border-radius: 4px; }
  html.js .k8-sijil-kertas::after { display: none; }
  html.js .k8-sijil-kertas img { height: 100%; width: 100%; object-fit: contain; }
  html.js .k8-sijil-tanda { display: block; position: absolute; left: 15.6%; right: .2%; top: var(--y0, 63.12%); height: calc(var(--y1, 70.77%) - var(--y0, 63.12%));
    border: 2px solid #2F5BEA; border-radius: 3px; background: rgb(47 91 234 / .07); box-shadow: 0 0 0 3px rgb(47 91 234 / .16); pointer-events: none;
    transition: top 200ms var(--lengkung), height 200ms var(--lengkung); }
  html.js .k8-sijil-tanda[hidden] { display: none; }
  html.js .k8-sijil-kad { display: flex; flex-direction: column; position: absolute; right: 0; bottom: 0; width: min(74%, 450px); height: min(100%, 540px);
    container-type: size; padding: 16px 18px 12px; border-radius: 14px; background: #FFFFFF; color: var(--ink);
    box-shadow: inset 0 0 0 1px rgb(11 19 38 / .08), 0 36px 60px -28px rgb(11 19 38 / .50), 0 10px 22px -12px rgb(11 19 38 / .28); }
  html.js .k8-sijil-kepala { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; margin: 0 0 8px; padding-bottom: 10px; border-bottom: 1px solid var(--garis); }
  html.js .k8-sijil-label { grid-column: 1 / -1; font: 500 10.5px/1.5 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--kelabu); }
  html.js .k8-sijil-no { font: 600 15px/1.4 var(--mono); letter-spacing: .01em; }
  html.js .k8-sijil-sah { grid-column: 1; font-size: 12.5px; color: var(--kelabu); }
  html.js .k8-sijil-kira { grid-column: 2; grid-row: 2 / 4; align-self: center; font-size: 12px; line-height: 1.3; color: #1E6B45; text-align: right; max-width: 92px; }
  html.js .k8-sijil-kira b { display: block; font-size: 20px; font-weight: 650; }
  html.js .k8-sijil-baris { flex: 1; min-height: 0; list-style: none; margin: 0; padding: 0; display: grid; grid-template-rows: repeat(11, minmax(0, 1fr)); }
  html.js .k8-sijil-baris li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 0 8px; margin: 0 -8px;
    border-top: 1px solid #EEF1F6; border-radius: 6px; font-size: clamp(11px, 3.1cqh, 13.5px); transition: background-color 200ms var(--lengkung), opacity 200ms var(--lengkung); }
  html.js .k8-sijil-baris li:first-child { border-top-color: transparent; }
  html.js .k8-sijil-kod { font: 500 1em/1 var(--mono); color: var(--navy); }
  html.js .k8-sijil-nama { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  html.js .k8-sijil-status { font-size: .88em; color: #1E6B45; }
  html.js .k8-sijil-status::before { content: "✓ "; font-weight: 700; }
  html.js .k8-sijil-baris li.jumpa { background: #E8EEFF; border-top-color: transparent; }
  html.js .k8-sijil-baris li.jumpa + li { border-top-color: transparent; }
  html.js .k8-sijil-baris li.jumpa .k8-sijil-kod, html.js .k8-sijil-baris li.jumpa .k8-sijil-nama { font-weight: 650; color: var(--navy); }
  html.js .k8-sijil-baris li.jumpa .k8-sijil-status { color: var(--navy); font-weight: 650; } /* hijau atas #E8EEFF = 5.6 → navy 8.9 */
  html.js .k8-sijil-baris li.redup { color: var(--kelabu); } /* pudar tanpa opacity: kontras kekal ≥ 6 (gate kontras) */
  html.js .k8-sijil-baris li.redup :is(.k8-sijil-kod, .k8-sijil-status) { color: var(--kelabu); font-weight: 400; }
  html.js .k8-sijil-baris li.redup .k8-sijil-status::before { content: ""; }
  html.js .k8-sijil-kaki { margin: 6px 0 0; padding-top: 8px; border-top: 1px solid var(--garis); font: 500 10.5px/1.5 var(--mono); letter-spacing: .06em; color: var(--kelabu); }
  html.js .tiada-padan .k8-sijil-kaki { color: #8A2A1B; }
  html.js .k8-sijil-kap { width: min(100%, 600px); margin: 10px 0 0 auto; }
  html.js .k8-sijil-kap-besar { display: inline; }
  html.js .k8-sijil-kap-kecil { display: none; }
}
@media (prefers-reduced-motion: reduce) { .k8-sijil-tanda, .k8-sijil-baris li { transition: none !important; } }

/* timeline bab 07 (corak 06: bingkai muncul entry 52–64%, garis + kod lukisan pudar 50–57%; kapsyen potong keras) */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.tiada-sd) { timeline-scope: --hero, --k5-hosting, --k5-produk, --k5-kerja, --k5-ai, --k6-integrasi, --k6-pasukan, --k10-agensi; }
    @media (min-width: 1181px) and (min-height: 680px) {
      html.js:not(.tiada-sd) #agensi { view-timeline: --k10-agensi block; }
      html.js:not(.tiada-sd) #pentas-agensi { animation-name: k10-bingkai-07; animation-timeline: --k10-agensi; }
      html.js:not(.tiada-sd) #pentas-agensi .k8-sijil-kap { animation: k10-kapsyen-07 linear both; animation-timeline: --k10-agensi; }
      html.js:not(.tiada-sd) .pentas[data-salinan="malam"], html.js:not(.tiada-sd) .pentas[data-salinan="siang"] {
        animation: k5-tutup1 linear both, k6-tutup2 linear both, k5-tutup3 linear both, k5-tutup4 linear both, k5-tutup5 linear both, k6-tutup6 linear both, k10-tutup7 linear both;
        animation-timeline: --k5-hosting, --k6-integrasi, --k5-produk, --k5-kerja, --k5-ai, --k6-pasukan, --k10-agensi;
      }
    }
  }
}
/* 07 = bab terakhir sebelum CTA: keluar lewat (exit 40–52%) supaya rangka garis kosong tak muncul antara sijil pudar dan lapis CTA (audit sendiri p10 @1181×700) */
@keyframes k10-tutup7 { entry 50% { --tutup7: 0; } entry 57% { --tutup7: 1; } exit 100% { --tutup7: 1; } } /* verifier p10 P1-1: garis tak kembali selepas 07 */
@keyframes k10-bingkai-07 {
  entry 0% { opacity: 0; visibility: hidden; scale: .985; }
  entry 52% { opacity: 0; visibility: hidden; scale: .985; }
  entry 53% { visibility: visible; }
  entry 64% { opacity: 1; visibility: visible; scale: 1; }
  exit 40% { opacity: 1; visibility: visible; scale: 1; }
  exit 51% { visibility: visible; }
  exit 52% { opacity: 0; visibility: hidden; }
  exit 100% { opacity: 0; visibility: hidden; }
}
@keyframes k10-kapsyen-07 { entry 0% { opacity: 0; animation-timing-function: step-end; } entry 64% { opacity: 1; animation-timing-function: step-end; } exit 40% { opacity: 0; animation-timing-function: step-end; } exit 100% { opacity: 0; } }
.pentas[data-salinan="malam"] .objek, .pentas[data-salinan="siang"] .objek,
.pentas[data-salinan="malam"] .sudut, .pentas[data-salinan="siang"] .sudut,
.pentas[data-salinan="siang"] .objek-bingkai::before {
  opacity: calc(1 - min(1, var(--tutup1) + var(--tutup2) + var(--tutup3) + var(--tutup4) + var(--tutup5) + var(--tutup6) + var(--tutup7)));
}
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k5-kelas #pentas-agensi .k8-sijil-kap { opacity: 0; transition: opacity 0s; }
  html.js.k5-kelas #pentas-agensi.di-pentas .k8-sijil-kap { opacity: 1; transition: opacity 200ms var(--lengkung) 380ms; }
}
/* verifier p10 P1-1 (mod kelas + scroll-driven): bab 07 sudah lepas → objek garis siang/malam kekal tersorok (CTA ada salinan "cta" sendiri) */
@media (min-width: 1181px) and (min-height: 680px) {
  html.js.k10-07-lepas .pentas:is([data-salinan="siang"], [data-salinan="malam"]) :is(.objek, .sudut) { opacity: 0 !important; }
  html.js.k10-07-lepas .pentas[data-salinan="siang"] .objek-bingkai::before { opacity: 0 !important; }
  /* salinan CTA: hanya logo (peringkat "tanda"); rangka sijil / lukisan dokumen 07 tak dilukis dalam lapis gelap CTA */
  html.js.k10-07-lepas .pentas[data-salinan="cta"]:not([data-peringkat="tanda"]) :is(.objek, .sudut) { opacity: 0 !important; }
}

/* =====================================================================================================================
   PUSINGAN 11 (25 Okt 2026): tablet potret 641–960 — tap baris 03/04/05 pakai cara p9 (pratonton disisip bawah baris yang ditap,
   k8.js SISIP kini ≤960). Margin sama corak telefon. README §Pusingan 11.
   ===================================================================================================================== */
@media (min-width: 641px) and (max-width: 960px) {
  .pameran.k9-dalam { margin: 14px 0 22px; }
  li > .pameran.k9-dalam { margin-top: 10px; }
}

/* =====================================================================================================================
   PUSINGAN 12 (26 Okt 2026, keputusan Razlan 25 Okt): varian mata klien V1 + V2 + V3 + V6 diport dari scratchpad k8-mata-klien
   (asas p10) ke p11. Warna = token sedia ada (biru titik #8FB8FF = keluarga cahaya hero). README §Pusingan 12.
   ===================================================================================================================== */
/* V1: logo klien hero berlabel, legap penuh, nampak juga skrin rendah (dulu disorok < 800 tinggi) */
.mk-klien-label { font: 500 10.5px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); white-space: nowrap; }
.hero-klien img { opacity: 1; }
@media (min-width: 961px) { .hero-klien { max-width: calc(var(--lebar) * .7); gap: 10px 26px; } }
@media (max-width: 960px) { .mk-klien-label { flex: 1 1 100%; } }
/* V6: lead satu ayat + 3 titik (perkataan sama) */
.mk-hero-bukti { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; max-width: 35em; font-size: 15.5px; line-height: 1.45; color: #D6DDEA; }
.mk-hero-bukti li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 10px; align-items: baseline; }
.mk-hero-bukti li::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg) translateY(-2px); background: #8FB8FF; }
/* V1 + V6 digabung: skrin rendah desktop (1280×720, 1366×768) — logo + butang + baris kelayakan dalam skrin pertama */
@media (min-width: 961px) and (max-height: 799px) {
  .hero-klien { display: flex; bottom: -32px; gap: 8px 22px; }
  .hero-klien img { height: 21px; } .hero-klien img[src*="sains-"] { height: 15px; }
  .hero-lead { margin-top: 16px; } .hero-teks .tindakan { margin-top: 20px; }
  .lejar { padding-top: 14px; } .lejar > div { padding-top: 10px; }
  .mk-hero-bukti { margin-top: 12px; gap: 5px; font-size: 14.5px; }
}
/* V2: telefon ≤640 — 3 bukti (teks lejar hero) terus bawah butang; ≥641 tak berubah */
.mk-bukti { display: none; }
@media (max-width: 640px) {
  .mk-bukti { display: grid; grid-template-columns: .92fr 1.1fr 1fr; margin: 20px 0 0; border-top: 1px solid var(--ais-garis); }
  .mk-bukti > div { padding: 10px 8px 0 0; min-width: 0; }
  .mk-bukti > div + div { padding-left: 10px; border-left: 1px solid var(--ais-garis); }
  .mk-bukti dt { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
  .mk-bukti dd { margin: 4px 0 0; font-size: 12.5px; overflow-wrap: anywhere; line-height: 1.35; font-weight: 500; color: var(--ais); }
  .hero-lead { margin-top: 20px; } .hero-teks .tindakan { margin-top: 24px; }
}
/* V3: 08 "What happens next" — 3 langkah bawah butang */
.mk-langkah { margin-top: 56px; padding-top: 22px; border-top: 1px solid var(--ais-garis); max-width: 640px; }
.mk-langkah-tajuk { font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); }
.mk-langkah ol { list-style: none; margin: 16px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.mk-langkah li { display: grid; gap: 6px; align-content: start; font-size: 14.5px; line-height: 1.5; color: var(--ais-redup); }
.mk-langkah b { font-weight: 560; font-size: 16px; color: var(--ais); }
.mk-no { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgb(143 184 255 / .55); font: 500 12px/1 var(--mono); color: #CFE0FF; }
@media (max-width: 640px) { .mk-langkah { margin-top: 40px; } .mk-langkah ol { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .mk-langkah li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 14px; } .mk-langkah li > :not(.mk-no) { grid-column: 2; } .mk-no { grid-row: 1 / span 2; } }
/* V1 + V6 + V2 digabung (ukuran p12, ukur-p12.js): 1440 jarak lejar → label logo 10 → ≥ 11px; telefon: V6 (3 titik) + V2 (3 bukti) mesti
   muat skrin pertama 390×844 (sebelum ini 792–855 > 844) dan "Bumiputera-owned" ≤ 2 baris @360 */
@media (min-width: 961px) and (min-height: 800px) { .hero-klien { bottom: calc(-1 * clamp(30px, 4.2vh, 44px) - 3px); } }
@media (max-width: 640px) {
  .mk-hero-bukti { margin-top: 12px; gap: 6px; font-size: 14.5px; line-height: 1.4; }
  .hero-teks .tindakan { margin-top: 20px; }
  .mk-bukti { grid-template-columns: .84fr 1.22fr 1fr; margin-top: 16px; }
  .mk-bukti > div { padding-right: 6px; } .mk-bukti > div + div { padding-left: 8px; }
  .mk-bukti dd { font-size: 12px; }
}
/* =====================================================================================================================
   PUSINGAN 12b (26 Okt 2026): kad HRMIS 2.0 "· by our founding team" (Razlan 25–26 Okt). ≥1101 (2 lajur) dan ≤640 platform di baris sendiri →
   satu baris biasa. 641–1100 platform duduk sebelah nama klien → bahagian pasukan turun baris (kanan), nama klien tak dihimpit.
   ===================================================================================================================== */
@media (min-width: 641px) and (max-width: 1100px) { .k-plat-tim { display: block; } .k-plat-pisah { display: none; } }

/* Pasca-deploy 1 (29 Okt 2026): label kecil nama bidang rasmi MOF (jadual 07 homepage + page For agencies; dulu p2.css sahaja) */
.jadual-mof .p2-mof-rasmi { display: block; margin-top: 2px; font: 500 11px/1.4 var(--mono); letter-spacing: .04em; color: var(--kelabu); }

/* Pasca-deploy 1 (29 Okt 2026): label nav kepala TIDAK pecah 2 baris ("For agencies" / "Untuk agensi" pecah pada 961–1200 px) */
@media (min-width: 961px) { .nav ul a, .nav ul button { white-space: nowrap; } }