/* WOW page dalam ★A (4 Nov 2026) — overlay atas K8 styles.css + p2.css; dimuat SELEPAS p2.css, hanya page html.wd (tools/wow-dalam/wow_dalam.py).
   Token K8 sahaja (warna/fon/lengkung). Interaksi ≤ 400ms. Skrol/kemasukan sekali ≤ 1200ms (blok "WOW: skrol/kemasukan" di hujung, DESIGN-TRUTH §7).
   html.wd-statik (reduced-motion / ?statik / Save-Data / 2g-3g) = keadaan akhir terus, 0 animasi. Tiada CSS scroll-snap (keputusan 21 Okt). */

:root { --wd-atas: calc(var(--kepala-t) + var(--p2-hud-t)); --wd-aksen: 150 180 245; }

/* ---------- komponen bersama ---------- */
.wd-kursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 4; pointer-events: none; opacity: 0;
  background: no-repeat center / 100% url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l15 9.2-6.6 1.4 3.9 7.2-2.9 1.5-3.9-7.3L4 18.6z' fill='%23fff' stroke='%230A1020' stroke-width='1.4' stroke-linejoin='round'/%3E%3C/svg%3E");
  filter: drop-shadow(0 4px 8px rgb(5 9 20 / .5)); will-change: transform; }
.wd-kursor::after { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgb(255 255 255 / .9); opacity: 0; transform: scale(.4); }
@media (hover: none), (pointer: coarse) { .wd-kursor { display: none; } } /* sentuh: tiada tetikus — cincin sahaja (verifier buta P1) */
.wd-kursor.klik::after { animation: wd-klik 380ms var(--lengkung) 1; }
@keyframes wd-klik { 0% { opacity: .95; transform: scale(.4); } 100% { opacity: 0; transform: scale(1.8); } }
.wd-kilau { position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit; overflow: hidden; }
.wd-kilau::before { content: ""; position: absolute; top: -20%; bottom: -20%; width: 28%; left: 0; transform: translateX(-140%) skewX(-18deg);
  background: linear-gradient(90deg, transparent, rgb(255 255 255 / .16), transparent); opacity: 0; }

/* ---------- 1. PAGE PRODUK: PENTAS (teks kiri kecil, peranti kanan besar) ---------- */
.wd-hero-produk { overflow: hidden; }
@media (min-width: 961px) {
  .wd-hero-produk .p2-hero-grid { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: clamp(24px, 3vw, 48px); }
  .wd-hero-produk .p2-h1 { font-size: clamp(2.3rem, 3.6vw, 3.4rem); }
  .wd-hero-produk .p2-ayat { font-size: 17px; }
  .wd-hero-produk .p2-meta { gap: 12px 28px; }
  .wd-pentas { max-width: none; justify-self: stretch; width: min(100%, var(--wd-maks, 900px), calc((100svh - var(--wd-atas) - 64px) * var(--wd-ar, 1.6))); }
}
@media (min-width: 1181px) { /* peranti berdarah ke tepi kanan skrin: lebih besar dari lajur, tiada skrol mendatar (hero overflow hidden) */
  .wd-pentas { justify-self: start; width: min(var(--wd-maks, 900px), calc(100% + max(0px, (100vw - var(--max)) / 2 - 24px)), calc((100svh - var(--wd-atas) - 64px) * var(--wd-ar, 1.6))); }
}
.wd-pentas .p2-pentas { border-radius: 14px; overflow: hidden; position: relative; isolation: isolate;
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), 0 0 0 1px rgb(238 242 249 / .10), 0 0 120px -30px rgb(var(--wd-aksen) / .45); transform-origin: 60% 50%; }
.wd-pentas .p2-pentas img { border-radius: 14px; display: block; width: 100%; height: auto; }
.wd-hero-produk .p2-shot::before { inset: -6% -4%; background: radial-gradient(closest-side, rgb(var(--wd-aksen) / .22), transparent); }
.wd-cincin-lapis { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.wd-cincin { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 10px; opacity: 0; transform: scale(.96);
  box-shadow: 0 0 0 2px rgb(var(--wd-aksen) / .95), 0 0 0 6px rgb(var(--wd-aksen) / .22), 0 0 40px rgb(var(--wd-aksen) / .45);
  transition: opacity 260ms var(--lengkung), transform 260ms var(--lengkung); }
.wd-cincin.nyala { opacity: 1; transform: none; }
@media (max-width: 960px) {
  .wd-hero-produk .p2-ayat { order: 3; margin-top: 18px; font-size: 16.5px; }
  .wd-hero-produk .tindakan { order: 2 !important; }
  .wd-hero-produk .p2-shot { order: 3 !important; margin-top: 20px; }
  .wd-hero-produk .p2-meta { order: 4 !important; }
  .wd-hero-produk .p2-h1 { margin-bottom: 4px; }
  .wd-pentas { max-width: none; width: calc(100% + 2 * var(--gutter) - 16px); margin-inline: calc(-1 * var(--gutter) + 8px); justify-self: stretch; }
  .wd-pentas .p2-pentas, .wd-pentas .p2-pentas img { border-radius: 10px; }
}

/* 01 scrollytelling: ciri kiri, pentas poster sticky kanan (telefon: pentas melekat atas senarai) */
.wd-cerita-pentas { display: none; }
@media (min-width: 961px) {
  .wd-cerita { grid-template-columns: minmax(0, .42fr) minmax(0, .58fr); grid-template-areas: "utama pentas" "sisi pentas"; row-gap: 40px; }
  .wd-cerita > .p2-utama { grid-area: utama; }
  .wd-cerita > .p2-sisi { grid-area: sisi; position: static; }
  .wd-cerita-pentas { display: block; grid-area: pentas; align-self: stretch; }
  .wd-cerita-bingkai { position: sticky; top: calc(var(--wd-atas) + max(24px, (100svh - var(--wd-atas) - min(56vw, 760px) * .625 - 70px) / 2)); }
  .wd-langkah li { min-height: 20svh; align-items: center; transition: color 300ms var(--lengkung); }
  .wd-langkah li:last-child { min-height: 34svh; }
  html:not(.wd-statik) .wd-langkah.hidup li { color: var(--kelabu); }
  html:not(.wd-statik) .wd-langkah.hidup li.aktif { color: var(--ink); }
  .wd-langkah li.aktif { font-weight: 560; }
  html.wd-statik .wd-cerita-pentas, html:not(.js) .wd-cerita-pentas { display: none; }
  html.wd-statik .wd-cerita, html:not(.js) .wd-cerita { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); grid-template-areas: "utama sisi"; }
  html.wd-statik .wd-langkah li, html:not(.js) .wd-langkah li { min-height: 0; }
}
.wd-cerita-kanvas { position: relative; overflow: hidden; aspect-ratio: 1600 / 1000; border-radius: 14px; background: var(--malam);
  box-shadow: 0 36px 60px -26px rgb(11 19 38 / .45), 0 10px 24px -14px rgb(11 19 38 / .25); }
.wd-cerita-kanvas img { position: absolute; left: 0; top: 0; width: 100%; height: auto; transform-origin: 0 0; will-change: transform;
  transition: transform 400ms var(--lengkung); }
/* tepi kanvas pudar: teks poster yang terpotong masa zum nampak sengaja (verifier buta P1 4 Nov), bukan pepijat render */
.wd-cerita-kanvas::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 28px 18px var(--malam); }
.wd-cerita-cincin { z-index: 2; position: absolute; left: 0; top: 0; width: 10px; height: 10px; border-radius: 12px; pointer-events: none; opacity: 0; transform-origin: 0 0;
  box-shadow: 0 0 0 2px rgb(var(--wd-aksen) / .95), 0 0 0 7px rgb(var(--wd-aksen) / .2), 0 0 44px rgb(var(--wd-aksen) / .4);
  transition: transform 400ms var(--lengkung), opacity 300ms var(--lengkung); }
.wd-cerita-kap { margin-top: 14px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kelabu); min-height: 1.5em; }
.wd-cerita-no { color: var(--navy); }
@media (max-width: 960px) {
  .wd-cerita { display: grid; grid-template-columns: minmax(0, 1fr); }
  .wd-cerita > .p2-utama { display: contents; }
  .wd-cerita > .p2-utama > * { order: 0; }
  .wd-cerita > .p2-utama > .wd-langkah { order: 2; }
  .wd-cerita > .p2-sisi { order: 3; }
  .wd-cerita-pentas { display: block; order: 1; margin-top: 24px; position: sticky; top: calc(var(--wd-atas) + 8px); z-index: 2; margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter) 12px; background: var(--kertas); }
  .wd-cerita-pentas::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 28px; pointer-events: none; background: linear-gradient(var(--kertas), transparent); } /* senarai lalu bawah pentas: pudar, bukan bertindih (verifier buta P1) */
  html.wd-statik .wd-cerita-pentas, html:not(.js) .wd-cerita-pentas { display: none; }
  .wd-cerita-kanvas { border-radius: 10px; }
  .wd-cerita-kap { display: none; } /* telefon: teks ciri aktif = li diserlah di bawah; kapsyen dalam pentas melekat bertindih teks senarai (gate lebar + verifier buta) */
  .wd-langkah li { min-height: 0; padding-block: 26px; align-items: center; }
  html:not(.wd-statik) .wd-langkah.hidup li { color: var(--kelabu); transition: color 300ms var(--lengkung); }
  html:not(.wd-statik) .wd-langkah.hidup li.aktif { color: var(--ink); }
}
@media (max-width: 960px) and (max-height: 700px) { .wd-cerita-pentas { display: none; } }

/* Screens: galeri penuh lebar (jalur mendatar; butang + papan kekunci; tiada scroll-snap) */
.wd-galeri { margin-top: 28px; }
.wd-galeri-butang { display: flex; gap: 8px; justify-content: flex-end; }
.wd-galeri-butang button { width: 48px; height: 48px; border-radius: 999px; border: 1px solid var(--garis); background: var(--kertas); color: var(--ink); font-size: 18px; cursor: pointer;
  transition: background-color 200ms var(--lengkung), color 200ms var(--lengkung); }
.wd-galeri-butang button:hover { background: var(--ink); color: var(--kertas); }
.wd-galeri-butang button:disabled { opacity: .35; cursor: default; background: var(--kertas); color: var(--ink); }
html:not(.js) .wd-galeri-butang { display: none; }
.wd-galeri-jalur { display: flex; gap: clamp(16px, 2vw, 28px); overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; list-style: none;
  margin: 16px calc(-1 * var(--gutter)) 0; padding: 8px var(--gutter) 28px; }
.wd-galeri-jalur::-webkit-scrollbar { display: none; }
.wd-galeri-jalur:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }
.wd-galeri-item { flex: none; height: min(58svh, 560px, calc(var(--nh) / 2 * 1px)); aspect-ratio: var(--nw) / var(--nh); max-width: min(86vw, calc(var(--nw) / 2 * 1px)); }
.wd-galeri-item img { width: 100%; height: 100%; object-fit: contain; border-radius: 12px; background: var(--malam);
  box-shadow: 0 36px 60px -26px rgb(11 19 38 / .45), 0 10px 24px -14px rgb(11 19 38 / .25); }
@media (max-width: 640px) { .wd-galeri-item { height: auto; width: 82vw; max-width: calc(var(--nw) / 2 * 1px); } }

/* CTA: cahaya aksen produk / kes */
.wd-cta { position: relative; overflow: hidden; isolation: isolate; }
.wd-cta::before { content: ""; position: absolute; z-index: -1; right: -10%; bottom: -35%; width: 70%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(var(--wd-aksen) / .20), rgb(var(--wd-aksen) / .06) 55%, transparent); }
.wd-cta::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(var(--wd-aksen) / .9), transparent); transform-origin: 0 50%; }

/* ---------- 2. SENARAI PRODUCTS: hero PENDEK (pentas 3 poster bergilir) ---------- */
.wd-hero-senarai { overflow: hidden; padding-top: calc(var(--kepala-t) + var(--p2-hud-t) + clamp(20px, 2.4vw, 32px) + env(safe-area-inset-top, 0px)); padding-bottom: clamp(32px, 3.2vw, 48px); }
/* hero dipendekkan: senarai 12 mula dalam skrin pertama @1440×900 (bab 01 rapat ke hero) dan terus selepas hero @390 */
.wd-senarai #semua { padding-top: clamp(40px, 4vw, 56px); }
.wd-senarai #semua .k8-tajuk { margin-bottom: 0; }
@media (min-width: 961px) {
  .wd-hero-senarai .p2-hero-grid { grid-template-columns: minmax(0, .44fr) minmax(0, .56fr); align-items: center; }
  .wd-hero-senarai .p2-h1 { font-size: clamp(2.4rem, 3.8vw, 3.6rem); }
}
.wd-gilir { margin: 0; position: relative; width: min(100%, 500px, calc((100svh - var(--wd-atas) - 130px) * 1.6)); justify-self: end; }
.wd-gilir-pentas { position: relative; list-style: none; aspect-ratio: 1600 / 1000; border-radius: 14px; overflow: hidden; background: var(--malam);
  box-shadow: 0 50px 90px -40px rgb(0 0 0 / .8), 0 0 0 1px rgb(238 242 249 / .10), 0 0 120px -30px rgb(150 180 245 / .4); }
.wd-gilir-slaid { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity 300ms var(--lengkung), transform 400ms var(--lengkung); }
.wd-gilir-slaid.aktif { opacity: 1; transform: none; }
.wd-gilir-slaid img { width: 100%; height: 100%; display: block; }
.wd-gilir figcaption { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.wd-gilir-pil { display: flex; gap: 8px; list-style: none; flex: 1 1 auto; }
.wd-gilir-jeda { flex: none; width: 44px; height: 44px; border-radius: 999px; border: 1px solid rgb(238 242 249 / .28); background: transparent; color: var(--ais); cursor: pointer; display: grid; place-items: center;
  transition: background-color 200ms var(--lengkung); }
.wd-gilir-jeda[hidden] { display: none; }
.wd-gilir-jeda:hover { background: rgb(238 242 249 / .1); }
.wd-gilir-jeda span { width: 10px; height: 12px; border-inline: 3px solid currentColor; }
.wd-gilir-pil li { flex: 1 1 0; }
.wd-gilir-pil a { display: flex; flex-direction: column; gap: 8px; min-height: 44px; justify-content: center; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); }
.wd-gilir-pil a[aria-current="true"], .wd-gilir-pil a:hover { color: var(--ais); }
.wd-gilir-bar { display: block; height: 2px; background: rgb(238 242 249 / .18); position: relative; overflow: hidden; border-radius: 2px; }
.wd-gilir-bar::after { content: ""; position: absolute; inset: 0; background: var(--ais); transform: scaleX(0); transform-origin: 0 50%; }
.wd-gilir-pil a[aria-current="true"] .wd-gilir-bar::after { transform: scaleX(1); }
@media (max-width: 960px) {
  .wd-hero-senarai .p2-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .wd-gilir { order: 2; margin-top: 20px; width: calc(100% + 2 * var(--gutter) - 16px); margin-inline: calc(-1 * var(--gutter) + 8px); justify-self: stretch; }
  .wd-gilir-pil { padding-inline: 8px; }
}
/* spotlight kad */
.wd-spot .p2-kad-shot { position: relative; overflow: hidden; }
.wd-spot .wd-spot-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.0);
  transition: opacity 300ms var(--lengkung), transform 400ms var(--lengkung); }
.wd-spot li.wd-sorot .wd-spot-poster { opacity: 1; transform: scale(1.05); }
@media (hover: hover) and (pointer: fine) {
  .wd-spot .p2-kad { transition: transform 300ms var(--lengkung), box-shadow 300ms var(--lengkung); }
  .wd-spot li.wd-sorot .p2-kad { transform: translateY(-6px); box-shadow: 0 40px 70px -34px rgb(11 19 38 / .55); }
}

/* ---------- 3. CASE STUDY + KERJA PENDEK: SINEMA (skrin sistem besar berdarah ke tepi) ---------- */
.wd-hero-kes { overflow: hidden; }
@media (min-width: 961px) {
  .wd-hero-kes .p2-hero-grid { grid-template-columns: minmax(0, .36fr) minmax(0, .64fr); gap: clamp(24px, 3vw, 48px); }
  .wd-hero-kes .p2-h1 { font-size: clamp(2.2rem, 3.4vw, 3.2rem); }
  .wd-hero-kes .p2-ayat { font-size: 17px; }
  .wd-hero-kes .p2-meta { gap: 10px 24px; }
  .wd-sinema { max-width: none !important; width: min(100%, var(--wd-maks, 990px)) !important; justify-self: stretch !important; }
}
@media (min-width: 1181px) {
  .wd-sinema { width: min(var(--wd-maks, 990px), calc(100% + max(0px, (100vw - var(--max)) / 2 - 24px))) !important; justify-self: start !important; }
}
.wd-skrin-besar .peranti-pentas { aspect-ratio: auto !important; position: relative; border-radius: 12px; overflow: hidden; background: #FFFFFF;
  box-shadow: 0 60px 110px -50px rgb(0 0 0 / .85), 0 0 0 1px rgb(238 242 249 / .14), 0 0 140px -40px rgb(120 160 255 / .45); }
.wd-skrin-besar img { display: block; width: 100%; height: auto; }
.wd-skrin-besar .peranti-pentas { display: block !important; height: auto !important; }
.wd-skrin-besar .peranti-pentas > img { position: static !important; inset: auto !important; transform: none; }
.wd-pelayar { position: relative; width: 100%; display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; background: #1B2440; }
.wd-pelayar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(238 242 249 / .28); }
.wd-pelayar b::after { content: attr(data-wd-host); }
.wd-pelayar b { margin-left: 10px; font: 500 11px/1 var(--mono); letter-spacing: .04em; color: #B4BED3; }
.wd-skrin-komposit .wd-sinema-dalam { position: relative; }
.wd-telefon-depan { position: absolute; right: 3%; bottom: 3%; width: 24% !important; height: auto; border-radius: 22px;
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / .85), 0 0 0 6px #0E1424, 0 0 0 7px rgb(238 242 249 / .16); }
@media (max-width: 960px) {
  .wd-sinema { max-width: none !important; width: calc(100% + 2 * var(--gutter) - 16px) !important; margin-inline: calc(-1 * var(--gutter) + 8px); justify-self: stretch !important; }
  .wd-telefon-depan { width: 28% !important; right: 2%; bottom: -2%; border-radius: 14px; }
}
/* jalur angka gergasi (AARM sahaja) */
.wd-angka-jalur { background: var(--malam); color: var(--ais); padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--ais-garis); }
.wd-angka-jalur ol { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.wd-angka-jalur li { display: grid; gap: 14px; padding-top: 18px; border-top: 1px solid var(--ais-garis); }
.wd-angka-jalur b { font-weight: 560; font-size: clamp(3.4rem, 9vw, 8.2rem); line-height: 1.12; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; }
.wd-angka-jalur span { font: 500 12px/1.4 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ais-redup); }
@media (max-width: 640px) { .wd-angka-jalur ol { grid-template-columns: minmax(0, 1fr); gap: 8px; } .wd-angka-jalur li { grid-template-columns: auto 1fr; align-items: baseline; gap: 16px; } .wd-angka-jalur b { font-size: clamp(3.2rem, 18vw, 4.4rem); } }
/* What we built: babak tipografi besar (AARM) */
.wd-babak li { font-size: clamp(20px, 2.1vw, 30px); line-height: 1.25; letter-spacing: -0.02em; font-weight: 520; padding: clamp(22px, 3vw, 40px) 0; grid-template-columns: clamp(64px, 9vw, 128px) minmax(0, 1fr); align-items: baseline; }
.wd-babak li .no { font-size: clamp(28px, 4vw, 56px); font-family: var(--sans); font-weight: 560; letter-spacing: -0.04em; color: var(--navy); }
@media (min-width: 961px) { .wd-kes #bina .p2-satu .p2-utama { max-width: none; } }
/* SATRIA: bab Screens gelap + telefon besar */
.wd-bab-gelap { background: var(--malam) !important; color: var(--ais); }
.wd-bab-gelap .kicker { color: var(--ais-redup); } .wd-bab-gelap .kicker .no { color: #8FB8FF; }
.wd-bab-gelap .lead, .wd-bab-gelap .p2-kap { color: var(--ais-redup); }
.wd-bab-gelap .k8-tajuk, .wd-bab-gelap h3 { color: var(--ais); }
.wd-telefon-pentas { max-width: 520px !important; }
.wd-telefon-pentas .peranti-pentas { filter: drop-shadow(0 50px 70px rgb(0 0 0 / .6)); }
.wd-telefon-pentas::before { content: ""; position: absolute; inset: 8% -10%; border-radius: 50%; background: radial-gradient(closest-side, rgb(64 170 110 / .28), transparent); z-index: -1; }

/* ---------- 4. HOSTING: rak LED penuh lebar ---------- */
.wd-hero-led { position: relative; overflow: hidden; min-height: min(100svh, 980px); display: flex; align-items: end; isolation: isolate; }
.wd-hero-led > .wrap { width: 100%; }
.wd-hero-led .p2-hero-grid { grid-template-columns: minmax(0, 1fr); }
.wd-hero-led .p2-hero-teks { max-width: 34em; position: relative; z-index: 2; }
.wd-hero-led .p2-h1 { font-size: clamp(2.3rem, 4vw, 3.8rem); }
.wd-hero-led .p2-ayat { font-size: 17px; color: #C9D2E3; }
.wd-led { position: absolute; inset: 0; z-index: -1; margin: 0; }
.wd-led picture, .wd-led img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.wd-led::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, rgb(10 16 32 / .98) 0%, rgb(10 16 32 / .94) 34%, rgb(10 16 32 / .2) 52%, transparent 62%),
              linear-gradient(0deg, rgb(10 16 32 / .9) 0%, transparent 22%), linear-gradient(180deg, rgb(10 16 32 / .85) 0%, transparent 16%); }
.wd-led .p2-kap { position: absolute; right: var(--gutter); top: calc(var(--wd-atas) + 18px); z-index: 2; margin: 0; padding: 6px 12px; border-radius: 999px; background: var(--malam); color: #C9D2E3; }
.wd-led-sapu { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 40%, rgb(150 190 255 / .16) 50%, transparent 60%); background-size: 260% 100%; background-position: 100% 0; }
@media (max-width: 960px) {
  .wd-hero-led { min-height: 0; display: block; padding-top: calc(125vw - 72px); }
  .wd-led { bottom: auto; height: 125vw; } /* 125vw = nisbah foto 1120×1400: DPR2 ≤ 1.0 dengan fail 800 di 390 */
  .wd-led img { object-position: 50% 40%; }
  .wd-led::after { background: linear-gradient(0deg, var(--malam) 0%, rgb(10 16 32 / .6) 30%, transparent 60%), linear-gradient(180deg, rgb(10 16 32 / .8) 0%, transparent 30%); }
  .wd-led .p2-kap { bottom: auto; top: calc(var(--wd-atas) + 12px); right: var(--gutter); left: var(--gutter); width: fit-content; max-width: calc(100% - 2 * var(--gutter)); border-radius: 12px; }
}
/* AwanPrime kekal menonjol: laman besar tengah (860px), teks dua lajur */
.wd-ap-besar .p2-ap-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 36px; }
.wd-ap-besar .p2-ap-teks { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 48px; align-items: end; }
.wd-ap-besar .p2-ap-teks > .p2-ap-logo, .wd-ap-besar .p2-ap-teks > h2 { grid-column: 1; }
.wd-ap-besar .p2-ap-teks > .lead { grid-column: 2; grid-row: 1 / span 2; align-self: end; }
.wd-ap-besar .p2-ap-teks > .tindakan, .wd-ap-besar .p2-ap-teks > .p2-tambahan { grid-column: 1 / -1; }
.wd-ap-besar .p2-ap-shot { width: min(100%, 860px); justify-self: center; transform-origin: 50% 0; }
@media (max-width: 960px) { .wd-ap-besar .p2-ap-teks { display: block; } }

/* =====================================================================================================
   WOW: skrol/kemasukan (pengecualian ≤1200ms, sekali, tanpa input) — semua durasi > 400ms DI SINI SAHAJA
   ===================================================================================================== */
html.js:not(.wd-statik) .wd-pentas .p2-pentas { animation: wd-dolly 1100ms cubic-bezier(.16, .84, .24, 1) 1 both; }
@keyframes wd-dolly { from { transform: perspective(1600px) translateX(4%) rotateY(-9deg) scale(1.04); } to { transform: none; } }
html.js:not(.wd-statik) .wd-kilau.jalan::before { animation: wd-kilau 1100ms cubic-bezier(.3, .1, .3, 1) 1 both; }
@keyframes wd-kilau { 0% { transform: translateX(-140%) skewX(-18deg); opacity: 0; } 15% { opacity: 1; } 100% { transform: translateX(430%) skewX(-18deg); opacity: 0; } }
html.js:not(.wd-statik) .wd-cta.masuk::after { animation: wd-sapu-garis 1200ms cubic-bezier(.3, .1, .3, 1) 1 both; }
@keyframes wd-sapu-garis { from { transform: scaleX(0); opacity: 1; } 70% { opacity: 1; } to { transform: scaleX(1); opacity: .6; } }
html.js:not(.wd-statik) .wd-cta::before { opacity: 0; transition: opacity 1200ms var(--lengkung); }
html.js:not(.wd-statik) .wd-cta.masuk::before { opacity: 1; }
html.js:not(.wd-statik) .wd-sinema .wd-sinema-dalam { animation: wd-dolly-kes 1150ms cubic-bezier(.16, .84, .24, 1) 1 both; }
@keyframes wd-dolly-kes { from { transform: perspective(1800px) translateX(5%) rotateY(-10deg) scale(1.05); } to { transform: none; } }
html.js:not(.wd-statik) .wd-sinema .wd-telefon-depan { animation: wd-telefon 1000ms cubic-bezier(.16, .84, .24, 1) 400ms 1 both; }
@keyframes wd-telefon { from { transform: translate(20%, 14%) rotate(6deg); } to { transform: none; } }
html.js:not(.wd-statik) .wd-hero-led .wd-led img { animation: wd-led-dolly 1200ms cubic-bezier(.16, .84, .24, 1) 1 both; }
@keyframes wd-led-dolly { from { transform: scale(1.08); } to { transform: none; } }
html.js:not(.wd-statik) .wd-led-sapu { animation: wd-led-sapu 1200ms cubic-bezier(.3, .1, .3, 1) 600ms 1 both; }
@keyframes wd-led-sapu { 0% { opacity: 0; background-position: 100% 0; } 20% { opacity: 1; } 100% { opacity: 0; background-position: 0 0; } }
html.js:not(.wd-statik) .wd-ap-besar .p2-ap-shot.masuk-wd img { animation: wd-ap 1100ms cubic-bezier(.16, .84, .24, 1) 1 both; }
@keyframes wd-ap { from { transform: perspective(1800px) rotateX(10deg) scale(.96); } to { transform: none; } }
html.js:not(.wd-statik) .wd-gilir-pentas { animation: wd-dolly 1100ms cubic-bezier(.16, .84, .24, 1) 1 both; }
/* skrol-dipacu: scrollytelling 01 (kamera poster ikut langkah skrol) — 900ms, bukan respon klik */
html.js:not(.wd-statik) .wd-cerita-kanvas img, html.js:not(.wd-statik) .wd-cerita-cincin { transition-duration: 900ms; transition-timing-function: cubic-bezier(.22, .8, .2, 1); }
/* gilir hero senarai AUTO (tanpa input): silang 640ms; bila pengguna hover/fokus pil → .cepat = 300/400ms (interaksi) */
html.js:not(.wd-statik) .wd-gilir:not(.cepat) .wd-gilir-slaid { transition-duration: 640ms, 1000ms; }
/* bar pemasa gilir (penunjuk masa, linear, berhenti selepas 2 kitaran) — pengecualian bernama DESIGN-TRUTH §7.3 (sama jalur sistem F2) */
html.js:not(.wd-statik) .wd-gilir.jalan .wd-gilir-pil a[aria-current="true"] .wd-gilir-bar::after { animation: wd-bar var(--wd-sela, 3200ms) linear 1 both; }
@keyframes wd-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* pratonton spotlight kad: respon hover = 300/400ms (di atas); hanyut poster SELEPAS itu sekali 1200ms */
html.js:not(.wd-statik) .wd-spot li.wd-sorot .wd-spot-poster.wd-hanyut { animation: wd-hanyut 1200ms cubic-bezier(.3, .1, .3, 1) 1 forwards; }
@keyframes wd-hanyut { from { transform: scale(1.05) translate(0, 0); } to { transform: scale(1.12) translate(-2.5%, -1.5%); } }

/* keadaan statik (reduced-motion / ?statik / Save-Data / tanpa JS): keadaan akhir, 0 animasi */
html.wd-statik.wd *, html.wd-statik.wd *::before, html.wd-statik.wd *::after { animation: none !important; transition: none !important; }
html.wd-statik .wd-kursor, html.wd-statik .wd-cincin, html.wd-statik .wd-led-sapu { display: none; }
@media (prefers-reduced-motion: reduce) { html.wd *, html.wd *::before, html.wd *::after { animation: none !important; transition: none !important; } }