/* WOW-F · "MASUK KE DALAM" (overlay atas K8 styles.css; dimuat terakhir). Hero: pintu rak 3D terbuka sendiri → kamera masuk → foto rak LED sebenar penuh skrin (grain + vignette + gelap) → tajuk hero. Bab 01–07: babak penuh skrin (pentas sticky; masuk = kad membesar + kamera dolly, dipacu skrol) + SATU momen setiap bab. HUD K8 (pentas kanan + objek garis + rel) diganti timeline (rel kiri ≥1181, bar atas ≤960). Kelas pada : wf (varian hidup) · wf-buka (pembuka belum main) · wf-led (foto LED penuh) · wf-tajuk (tajuk hero tampil) · wf-statik (reduced-motion / ?statik: keadaan akhir terus, tiada animasi) · wf-video (pintu rak = video, tiada WebGL). Semua durasi > 400ms ada dalam blok bertanda "WOW: skrol/kemasukan" di hujung fail. */ /* ---------- 0. HUD K8 diganti timeline ---------- */ /* visibility (bukan display:none): motion.js masih ukur objek garis */ /* F2 (verifier buta WOW3 P1 "separuh kanan kosong"): ≥1181 objek garis K8 (salinan siang) KEKAL di lajur kanan bab terang; bacaan + rel pentas disorok (jalur HUD F2 di bawah kepala ganti). Salinan malam (hero) + CTA disorok (LED / rak CTA ganti). */ html.wf .pentas .bacaan, html.wf .pentas .rel, html.wf .pentas .sudut, html.wf .pentas[data-salinan="malam"], html.wf .pentas[data-salinan="cta"] { visibility: hidden !important; pointer-events: none !important; } @media (max-width: 1180px), (max-height: 679px) { html.wf .pentas[data-salinan="siang"], html.wf .pentas[data-salinan="siang"] * { visibility: hidden !important; pointer-events: none !important; } } @media (max-width: 960px) { html.wf .pentas, html.wf .pentas * { visibility: hidden !important; pointer-events: none !important; animation-play-state: paused !important; } } /* F2: animasi pentas tersorok dijeda (Layerize setiap frame, CPU rehat 08 telefon) */ html.wf .pentas[data-salinan="malam"] *, html.wf .pentas[data-salinan="cta"] * { animation-play-state: paused !important; } html.wf .k8-pintu-rak { display: none !important; } /* pointerleave butang pintu akan tutup pintu semasa pembuka */ /* tajuk + kicker asal bab: kekal dalam DOM (pembaca skrin, J/K, ⌘K, gate) — visual = babak */ html.wf .f-bab > .wrap > .lajur > .kicker:first-child, html.wf .f-bab h2.k8-tajuk { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } html.wf .bab.f-bab { padding-top: 0; padding-bottom: clamp(44px, 4vw, 56px); } /* F2: panjang page (dulu 80–120px) */ html.wf .bab.f-bab > .wrap { padding-top: clamp(20px, 2vw, 28px); } html.wf #siang { padding-top: 0; margin-top: 0; } /* ---------- 1. HERO: pembuka "masuk ke dalam" ---------- */ html.wf .hero { animation: none !important; clip-path: none !important; } html.wf .hero-wrap { animation: none !important; } html.wf .ufuk-cahaya { display: none; } @media (min-width: 961px) { html.wf:not(.wf-statik) .hero { height: 118vh; height: 118svh; } html.wf .hero-pentas { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } html.wf.wf-statik .hero-pentas { position: relative; height: auto; min-height: 100svh; } } /* iris: foto LED penuh pentas. Tetingkap = .f-iris-foto (transform skala tak seragam dari bukaan pintu), isi = counter-transform */ .f-iris { display: none; } html.wf .f-iris { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; background: #05080F; } html.wf.wf-led .f-iris, html.wf.wf-statik .f-iris, html.wf.wf-dolly .f-iris { opacity: 1; } html.wf.wf-dolly .f-iris { background: transparent; } .f-iris-foto { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; transform-origin: 0 0; } .f-iris-foto picture { display: contents; } .f-iris-foto img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; transform-origin: 0 0; } @media (min-width: 961px) { .f-iris-foto img { object-position: 62% 50%; } } /* F2: komposit landskap, rak di kanan */ .f-grain { position: absolute; inset: 0; background: url("assets/img/wow-f/grain.svg") repeat; background-size: 180px 180px; opacity: .55; } .f-vignet { position: absolute; inset: 0; background: radial-gradient(120% 95% at 62% 44%, rgb(5 8 15 / 0) 38%, rgb(5 8 15 / .55) 78%, rgb(5 8 15 / .88) 100%); } .f-gelap { position: absolute; inset: 0; background: #05080F; opacity: 0; } html.wf.wf-led .f-iris-foto img, html.wf.wf-statik .f-iris-foto img { filter: none; } .f-iris::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgb(10 16 32 / .2); } /* gelap sedikit: foto 1120px tak nampak kabur */ .f-iris > span { z-index: 2; } /* rak 3D / video: tersorok sehingga wow-f.js letak rak di tengah pentas (elak lompat) */ html.wf.wf-buka .monolith-bingkai { opacity: 0; } html.wf.wf-buka.wf-sedia .monolith-bingkai { opacity: 1; transition: opacity 300ms var(--lengkung); } html.wf .monolith-bingkai { transform-origin: 0 0; } html.wf.wf-led .monolith-bingkai, html.wf.wf-statik .monolith-bingkai { visibility: hidden; } html.wf.wf-video .monolith-kanvas, html.wf.wf-video .monolith-statik, html.wf.wf-video .label-3d { display: none !important; } .f-video { display: none; } html.wf.wf-video .f-video { display: block; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: var(--malam); } html.wf.wf-dolly .label-3d { transition: opacity 200ms ease; opacity: 0 !important; } /* teks hero: tersorok semasa pembuka, tampil atas LED (wf-tajuk) */ /* 31 Okt: teks hero terbaca dari awal; pembuka berlaku di belakang/sebelah */ html.wf .hero-kabus { z-index: 1; } @media (min-width: 961px) { html.wf .hero-kabus { background: linear-gradient(90deg, rgb(10 16 32 / .95) 0%, rgb(10 16 32 / .9) 36%, rgb(10 16 32 / .55) 56%, rgb(10 16 32 / .12) 78%, rgb(10 16 32 / 0) 100%), linear-gradient(0deg, rgb(10 16 32 / .96) 0%, rgb(10 16 32 / .7) 15%, rgb(10 16 32 / 0) 34%), linear-gradient(180deg, rgb(10 16 32 / .85) 0%, rgb(10 16 32 / .4) 22%, rgb(10 16 32 / 0) 34%); } html.wf .hero-wrap { will-change: transform, opacity; } } /* teater telefon (≤960): pentas penuh skrin, rak + iris dipindah ke sini */ .f-teater { display: none; } @media (max-width: 960px) { html.wf .f-teater { display: block; position: relative; height: 112vh; height: 112svh; } html.wf.wf-statik .f-teater { height: 100vh; height: 100svh; } .f-teater-pentas { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; background: var(--malam); } html.wf .f-teater-pentas .monolith-bingkai { position: absolute; inset: calc(var(--kepala-t) + var(--jalur-t)) 0 clamp(250px, 34svh, 300px) 0; height: auto; margin: 0; order: 0; } /* rak di atas tajuk; tajuk + butang terbaca dari awal */ html.wf .f-teater-pentas .monolith-statik { position: absolute; inset: 0; } html.wf .f-teater-pentas .monolith-statik img { width: 100%; height: 100%; object-fit: contain; } html.wf .f-teater-pentas .monolith-kanvas, html.wf .f-teater-pentas .statik-mudah { -webkit-mask-image: none; mask-image: none; } html.wf .f-teater-pentas .f-iris::after { /* scrim bawah: tajuk atas LED */ content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(0deg, rgb(10 16 32 / .97) 0%, rgb(10 16 32 / .9) 30%, rgb(10 16 32 / .35) 56%, rgb(10 16 32 / 0) 70%), linear-gradient(180deg, rgb(10 16 32 / .75) 0%, rgb(10 16 32 / 0) 24%); } .f-teater-teks { position: absolute; z-index: 4; left: var(--gutter); right: var(--gutter); bottom: calc(28px + env(safe-area-inset-bottom, 0px)); color: var(--ais); } .f-teater-kicker { margin: 0 0 14px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ais-redup); } .f-teater-kicker span { margin: 0 .35em; } .f-teater-h1 { margin: 0; font-size: clamp(2.5rem, 11.4vw, 3.6rem); line-height: .98; letter-spacing: -.042em; font-weight: 560; color: var(--ais); text-wrap: balance; } .f-teater-h1 .f-redup { color: #BAC3D3; } .f-tb { display: inline; } .f-teater-tindakan { margin-top: 22px; } .f-teater-tindakan .butang { width: 100%; justify-content: center; } .f-teater-bukti { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 14px 0 0; font: 500 10.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: #C2CBDB; } .f-teater-bukti span { white-space: nowrap; } .f-teater-bukti b { font-weight: 600; color: var(--ais); } /* hero selepas teater: h1 + kicker + butang sudah di atas LED → asal kekal (h1 sr), pendua visual disorok */ html.wf .hero-pentas { padding-top: 40px; } html.wf .hero-teks > .kicker { display: none; } /* F2: .tindakan (Talk + See how we work) KEKAL di bawah teater — "See how we work" hanya di sini; gate K8/e2e talk guna butang ini */ /* Pasca-F2 (verifier V1, keputusan 4 Nov): "Talk to us" SATU sahaja di telefon = butang teater (skrin pertama 360/390). Pendua dalam .tindakan disorok (display none = keluar dari Tab + pembaca skrin); "See how we work" kekal. Tanpa JS / tiada html.wf = teater tiada, butang asal kekal. */ html.wf .hero-teks .tindakan [data-k8-talk-buka] { display: none; } html.wf .hero-teks > h1#h-hero { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; margin: 0 !important; } html.wf .hero-pentas .hero-kabus { display: none; } html.wf.wf-buka .hero-wrap { opacity: 1; } html.wf.wf-buka .hero-wrap * { pointer-events: auto !important; } } /* ---------- 2. HUD bab (F2): SAMA dengan page dalam (p2.css .p2-hud) — jalur nipis bawah kepala, bacaan + rel K8 ---------- */ :root { --f2-hud-t: 44px; } @media (max-width: 960px) { :root { --f2-hud-t: var(--jalur-t); } } .f2-hud { display: none; } html.wf .f2-hud:not([hidden]) { display: block; position: fixed; left: 0; right: 0; z-index: 40; top: calc(var(--kepala-t) + env(safe-area-inset-top, 0px)); height: var(--f2-hud-t); border-bottom: 1px solid; transition: background-color 320ms var(--lengkung), border-color 320ms var(--lengkung); } .f2-hud[data-tema="malam"] { --o-teks: var(--ais); --o-teks2: var(--ais-redup); --o-aksen-teks: #FFFFFF; background: var(--malam); border-color: var(--ais-garis); } .f2-hud[data-tema="siang"] { --o-teks: var(--ink); --o-teks2: var(--kelabu); --o-aksen-teks: var(--navy); background: var(--kertas); border-color: var(--garis); } .f2-hud-baris { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; } .f2-hud .bacaan { min-width: 0; white-space: nowrap; overflow: hidden; } .f2-hud .bacaan-teks { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .f2-hud .rel { border-top: 0; padding-top: 0; gap: 20px; justify-content: flex-end; flex: none; } .f2-hud .rel a { min-height: 44px; } .f2-hud .rel a:focus-visible { outline-color: currentColor; } @media (min-width: 1181px) { .f2-hud .rel a .rel-nama { display: inline; } } @media (max-width: 1180px) { .f2-hud .rel { gap: 4px; } .f2-hud .rel a { min-width: 44px; justify-content: center; } .f2-hud .rel-nama { display: none; } } @media (max-width: 960px) { .f2-hud .rel { display: none; } .f2-hud-baris { padding-right: calc(var(--gutter) + 112px); } } html.wf { scroll-padding-top: calc(var(--kepala-t) + var(--f2-hud-t) + 16px); } /* desktop: hero F2 penuh (pil "New" + tajuk di bawah kepala) → jalur HUD masuk sebaik hero dilepasi (k8-lepas-hero, k8.js); telefon: sentiasa (sama page dalam) */ @media (min-width: 961px) { html.wf:not(.k8-lepas-hero) .f2-hud { opacity: 0; visibility: hidden; transform: translate3d(0, -10px, 0); } html.wf .f2-hud { transition: background-color 320ms var(--lengkung), border-color 320ms var(--lengkung), opacity 240ms var(--lengkung), transform 240ms var(--lengkung), visibility 0s; } html.wf:not(.k8-lepas-hero) .f2-hud { transition: opacity 200ms ease, transform 200ms ease, visibility 0s 200ms; } } /* ---------- 3. Babak (01–07) ---------- */ .f-babak { display: none; } html.wf .f-babak { display: block; position: relative; z-index: 4; height: 100vh; height: 100svh; color: var(--ais); } html.wf .f-babak.f-tanpa-pin { height: auto; } html.wf .f-babak.f-panjang { height: 190vh; height: 190svh; } /* F2: 12 poster × 7.5svh skrol setiap satu */ html.wf.wf-statik .f-babak { height: auto; } .f-pentas { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; flex-direction: column; padding: calc(var(--kepala-t) + var(--f2-hud-t) + clamp(16px, 3vh, 36px)) 0 clamp(20px, 4vh, 40px); background: radial-gradient(70% 55% at 72% 0%, rgb(var(--cahaya) / .08), rgb(var(--cahaya) / 0) 70%), var(--malam); transform-origin: 50% 0; border-radius: 0; } .f-babak.f-dekat .f-pentas, .f-babak.f-dekat .f-momen { will-change: transform, opacity; } /* lapisan komposit hanya bila babak hampir/dalam skrin */ html.wf.wf-tajuk .f-iris-foto img, html.wf.wf-tajuk .f-gelap { will-change: transform, opacity; } /* zum/gelap skrol hero: komposit, tiada repaint */ html.wf.wf-statik .f-pentas { position: relative; } .f-tanpa-pin .f-pentas { position: relative; justify-content: flex-start; } .f-dalam { flex: 1; min-height: 0; display: flex; flex-direction: column; } .f-judul { flex: none; width: 100%; } .f-momen { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: clamp(16px, 3vh, 32px) var(--gutter) 0; } .f-kicker { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-family: var(--mono); font-weight: 500; font-size: 12px; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: var(--ais-redup); } .f-kicker::before { content: ""; width: 40px; height: 1px; background: rgb(var(--cahaya) / .7); flex: none; order: 1; } .f-no { color: var(--ais); order: 0; } .f-kicker > :not(.f-no) { order: 2; } .f-h2 { margin: 0; max-width: 16em; font-size: clamp(2.2rem, 3.9vw, 3.9rem); line-height: 1.02; letter-spacing: -.042em; font-weight: 560; color: var(--ais); text-wrap: balance; } @media (max-width: 960px) { .f-pentas { padding-top: calc(var(--kepala-t) + var(--f2-hud-t) + 24px); } .f-h2 { font-size: clamp(1.9rem, 8.4vw, 2.6rem); } .f-kicker { margin-bottom: 10px; } } /* header atas babak gelap: tema malam ditulis oleh wow-f.js */ /* 01 kad judul gergasi */ .f-kad { width: 100%; } .f-gergasi { margin: 0; font-size: clamp(5rem, 10.4vw, 10rem); line-height: .92; letter-spacing: -.055em; font-weight: 560; color: var(--ais); max-width: 11em; } .f-k { display: inline-block; vertical-align: top; } .f-k > span { display: inline-block; } .f-kad-kap { display: flex; align-items: center; gap: 14px; margin: clamp(40px, 7vh, 72px) 0 0; font: 500 12px/1.5 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ais-redup); } .f-kad-kap > span:not(.f-kad-garis) { margin: 0 .2em; } .f-kad-garis { width: 64px; height: 1px; background: rgb(var(--cahaya) / .8); transform-origin: 0 50%; } @media (max-width: 960px) { html.wf .f-babak.f-tanpa-pin .f-pentas { min-height: 0; height: auto; padding-bottom: 56px; } /* F2: tiada ruang gelap kosong bawah kad 01 (verifier WOW3) */ .f-gergasi { font-size: clamp(3.4rem, 17vw, 5rem); } } /* 02 hub: garis cahaya melukis sendiri dari kategori ke hub SAKTI */ .f-hub { position: relative; width: min(1180px, 100%); height: 100%; max-height: 640px; } .f-hub-img { position: absolute; display: block; height: auto; } .f-hub-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; } .f-hub-svg .f-gr { fill: none; stroke: rgb(var(--cahaya)); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .f-hub-svg .f-gr-halo { stroke-width: 6; opacity: .14; } .f-hub-svg .f-hub-rangka { fill: none; stroke: rgb(var(--cahaya)); stroke-width: 2; stroke-dasharray: 1 1; stroke-dashoffset: 1; } .f-hub-svg .f-titik { fill: var(--ais); opacity: 0; } .f-hub-label { list-style: none; margin: 0; padding: 0; } .f-hub-label li { position: absolute; translate: -50% -50%; white-space: nowrap; opacity: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais); padding: 8px 12px; border-radius: 999px; background: #0A1020; box-shadow: inset 0 0 0 1px rgb(var(--cahaya) / .45); } .f-hub-pusat { position: absolute; margin: 0; translate: -50% 0; display: flex; gap: 10px; align-items: baseline; white-space: nowrap; opacity: 0; font: 500 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); } .f-hub-pusat b { font-weight: 600; color: var(--ais); } .f-hub-nota { position: absolute; left: 50%; translate: -50% 0; white-space: nowrap; bottom: 0; margin: 0; font: 500 10.5px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); } .f-akhir .f-hub-label li, .f-akhir .f-hub-pusat { opacity: 1; } .f-akhir .f-hub-svg .f-gr, .f-akhir .f-hub-svg .f-hub-rangka { stroke-dashoffset: 0; } /* 03 product shot S4: satu poster satu "skrin", pentas sticky bertukar ikut skrol (scroll-snap DITOLAK 21 Okt) */ .f-b03 .f-momen { flex-direction: column; gap: 18px; } .f-poster { position: relative; width: var(--f-pw, 100%); aspect-ratio: 16 / 10; flex: none; --f-pw: min(1200px, 84vw, calc((100vh - var(--kepala-t) - 300px) * 1.6)); } @supports (height: 100svh) { .f-poster { --f-pw: min(1200px, 84vw, calc((100svh - var(--kepala-t) - 300px) * 1.6)); } } .f-p { position: absolute; inset: 0; margin: 0; opacity: 0; } .f-p img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; box-shadow: 0 50px 90px -40px rgb(0 0 0 / .85), 0 0 0 1px rgb(var(--cahaya) / .16); } .f-p.f-aktif { opacity: 1; z-index: 1; } .f-akhir .f-p:first-child, html.wf.wf-statik .f-p:first-child { opacity: 1; } .f-p-titik { list-style: none; display: flex; gap: 8px; margin: 0; padding: 0; } .f-p-titik li { width: 22px; height: 3px; border-radius: 2px; background: var(--ais-garis); transition: background-color 240ms var(--lengkung); } .f-p-titik li.f-aktif { background: var(--ais); } @media (max-width: 960px) { .f-poster { --f-pw: min(100%, calc((100svh - var(--kepala-t) - var(--jalur-t) - 260px) * 1.6)); } .f-b03 .f-momen { padding-inline: 12px; } .f-p img { border-radius: 10px; } } /* 04 skrin AARM besar "hidup" + kursor hantu (≤ 3 s, sekali) */ .f-b04 .f-momen { gap: clamp(24px, 3vw, 48px); } .f-skrin { display: flex; align-items: center; gap: clamp(24px, 3vw, 48px); margin: 0; max-height: 100%; } .f-skrin-bingkai { position: relative; flex: none; width: min(860px, 62vw, calc((100svh - var(--kepala-t) - 250px) * 1.25)); aspect-ratio: 1360 / 1088; } .f-skrin-bingkai > img { display: block; width: 100%; height: 100%; } .f-sorot { position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h); border-radius: 6px; opacity: 0; box-shadow: 0 0 0 2px rgb(var(--cahaya)), 0 0 24px 2px rgb(var(--cahaya) / .35); transition: opacity 280ms var(--lengkung); } .f-sorot.f-nyala { opacity: 1; } .f-sorot-label { position: absolute; left: 0; bottom: calc(100% + 10px); white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: #0A1020; box-shadow: 0 0 0 1px rgb(var(--cahaya) / .5); font: 500 11px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais); } .f-sorot[data-f-sorot="0"] .f-sorot-label { top: calc(100% + 10px); bottom: auto; } .f-kursor { position: absolute; left: 0; top: 0; z-index: 3; opacity: 0; pointer-events: none; transition: opacity 200ms ease; filter: drop-shadow(0 4px 8px rgb(0 0 0 / .5)); } .f-kursor svg { display: block; } .f-kursor-denyut { position: absolute; left: -14px; top: -14px; width: 32px; height: 32px; border-radius: 50%; box-shadow: 0 0 0 2px rgb(var(--cahaya)); opacity: 0; } .f-skrin-kap { display: flex; flex-direction: column; gap: 10px; max-width: 300px; } .f-kap-meta { font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); } .f-kap-meta > span { margin: 0 .3em; } .f-kap-nama { font-size: clamp(1.4rem, 2vw, 1.9rem); line-height: 1.1; letter-spacing: -.03em; font-weight: 560; color: var(--ais); } .f-kap-hasil { font-size: 16px; line-height: 1.5; color: var(--ais-redup); } @media (max-width: 1180px) { .f-skrin { flex-direction: column; gap: 16px; width: 100%; } .f-skrin-bingkai { width: min(860px, 100%, calc((100svh - var(--kepala-t) - var(--jalur-t, 0px) - 420px) * 1.25)); } .f-skrin-kap { max-width: 640px; align-items: center; text-align: center; gap: 6px; } .f-kap-hasil { font-size: 14.5px; } } @media (max-width: 960px) { .f-b04 .f-momen { padding-inline: 12px; } .f-kap-nama { font-size: 1.25rem; } .f-sorot-label { font-size: 10px; } } /* 05 resit → AI baca (resit sintetik = data demo K7 sedia ada, salinan berasingan; A1 kekal) */ .f-resit { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 380px); gap: clamp(28px, 5vw, 72px); align-items: center; } .f-resit-kertas { position: relative; } .f-resit-kertas svg { display: block; width: 100%; height: auto; max-height: calc(100svh - var(--kepala-t) - 280px); position: relative; } /* bayang kertas = box-shadow statik (bukan filter drop-shadow: WebKit lukis semula filter setiap frame bila babak diskala → ~30 fps) */ .f-resit-kertas { isolation: isolate; } .f-resit-kertas::before { content: ""; position: absolute; z-index: -1; left: 3%; right: 3%; top: 4%; bottom: 4%; border-radius: 6px; box-shadow: 0 30px 44px -6px rgb(0 0 0 / .5); } .f-resit-kertas .r-kertas { fill: #FFFFFF; stroke: #D5DAE4; } .f-resit-kertas text { font: 500 11px var(--mono); fill: var(--ink); } .f-resit-kertas .r-kedai { font: 700 13px var(--mono); letter-spacing: .04em; } .f-resit-kertas .r-kecil { font-size: 9.5px; fill: #3D4760; } .f-resit-kertas .r-tebal { font-weight: 700; font-size: 12.5px; } .f-resit-kertas .r-putus { stroke: #9AA4B6; stroke-dasharray: 3 3; } .f-resit-kertas .r-kotak { fill: rgb(29 58 138 / .08); stroke: var(--navy); stroke-width: 1.5; opacity: 0; } .f-resit-kertas .r-sapu { fill: rgb(var(--cahaya)); opacity: 0; } .f-resit-tag { margin: 0 0 10px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); } .f-resit-tag span { margin: 0 .3em; } .f-resit-tajuk { margin: 0 0 18px; font-size: clamp(1.3rem, 2vw, 1.75rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 560; color: var(--ais); } .f-resit-tajuk span { display: block; margin-top: 6px; font: 500 11px/1.4 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ais-redup); } .f-resit-field { margin: 0; display: grid; } .f-resit-field > div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ais-garis); } .f-resit-field dt { font: 500 11px/1.9 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ais-redup); } .f-resit-field dd { margin: 0; font-weight: 560; font-size: 17px; color: var(--ais); } .f-resit-field dd.f-isi { color: #BFE0FF; } @media (max-width: 960px) { .f-resit { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); gap: 16px; align-items: start; width: 100%; max-width: 600px; } .f-resit-field > div { grid-template-columns: minmax(0, 1fr); gap: 0; padding: 8px 0; } .f-resit-field dd { font-size: 15px; } .f-resit-tajuk { font-size: 1.1rem; margin-bottom: 8px; } .f-resit-kertas svg { max-height: none; } } /* 06 pasukan muncul satu per satu (headshot ≤ 400 ÷ 2 = 200px) */ .f-orang { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(8, minmax(0, 148px)); gap: clamp(10px, 1.2vw, 18px); justify-content: center; width: 100%; } .f-orang li { min-width: 0; } .f-muka { aspect-ratio: 3 / 4; overflow: hidden; border-radius: 12px; background: var(--panel); box-shadow: 0 0 0 1px rgb(var(--cahaya) / .16); } .f-muka img { display: block; width: 100%; height: 100%; object-fit: cover; } .f-mono { display: grid; place-items: center; width: 100%; height: 100%; font: 300 clamp(1.1rem, 2vw, 1.7rem) var(--mono); letter-spacing: .04em; color: var(--ais); } .f-o-nama { display: block; margin-top: 12px; font-weight: 560; font-size: 15px; line-height: 1.25; color: var(--ais); } .f-o-jawatan { display: block; margin-top: 4px; font: 500 10.5px/1.45 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ais-redup); } @media (max-width: 960px) { .f-orang { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 10px; } .f-o-nama { font-size: 13px; margin-top: 8px; } .f-o-jawatan { font-size: 9.5px; letter-spacing: .03em; } } @media (max-width: 400px) { .f-o-jawatan { display: none; } } /* 07 sijil MOF "dicop" (label cop = teks asas sahaja) */ .f-mof { position: relative; width: min(440px, 64vw, calc((100svh - var(--kepala-t) - 280px) * .86)); } .f-mof-kertas img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 40px 80px -30px rgb(0 0 0 / .8), 0 0 0 1px rgb(var(--cahaya) / .18); } .f-cop { position: absolute; right: -14%; bottom: 10%; margin: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 8px 18px 10px; border-radius: 10px; border: 3px solid #1D3A8A; outline: 1.5px solid #1D3A8A; outline-offset: 3px; background: #FFFFFF; color: #1D3A8A; transform: rotate(-4deg); opacity: 0; box-shadow: 0 10px 18px -8px rgb(0 0 0 / .45); } .f-cop b { font: 800 30px/1.3 var(--mono); letter-spacing: .12em; } .f-cop span { font: 600 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; } .f-akhir .f-cop, html.wf.wf-statik .f-cop { opacity: 1; } @media (max-width: 960px) { .f-mof { width: min(300px, 62vw, calc((100svh - var(--kepala-t) - var(--jalur-t) - 260px) * .86)); } .f-cop { right: -18%; padding: 9px 12px 8px; } .f-cop b { font-size: 22px; } .f-cop span { font-size: 10.5px; font-weight: 700; } } /* 08 CTA: rak bercahaya semula */ .f-cta-rak { display: none; } html.wf .f-cta-rak { display: block; position: absolute; z-index: 1; margin: 0; pointer-events: none; right: max(var(--gutter), calc((100vw - 1200px) / 2)); top: 50%; width: min(380px, 30vw); transform: translateY(-50%); } html.wf .f-cta-rak img { display: block; width: 100%; height: auto; } .f-cta-led { position: absolute; left: 36%; top: 14%; width: 28%; height: 70%; border-radius: 8px; opacity: .45; background: radial-gradient(60% 50% at 50% 50%, rgb(110 170 255 / .55), rgb(110 170 255 / 0) 70%); } @media (max-width: 1180px) { html.wf .f-cta-rak { width: min(300px, 28vw); } } @media (max-width: 960px) { html.wf .f-cta-rak { position: relative; right: auto; top: auto; transform: none; width: 220px; margin: 0 auto -10px; } } /* ---------- 4. WOW: skrol/kemasukan (pengecualian ≤1200ms) ---------- (a) Dipacu skrol (JS rAF, tiada durasi): kad babak membesar + dolly kandungan, keluar; foto LED zum + gelap; poster 03 bertukar. (b) Pembuka hero (sekali, tanpa input): pintu rak spring scene.js ≈400ms → dolly kamera 1000ms (JS rAF, transform) → tajuk 900ms. (c) Momen bab (sekali bila babak masuk skrin): durasi di bawah, semua ≤1200ms. Kursor hantu 04 = WAAPI dalam wow-f.js (≤ 3 s jumlah, sekali). (d) Gelung: LED rak CTA bernafas 2.4s alternate (dijeda bila CTA di luar skrin). Reduced-motion: html.wf-statik → .f-akhir pada semua babak, tiada satu pun di bawah aktif. */ html.wf.wf-tajuk:not(.wf-statik) .hero-wrap { transition: opacity 700ms var(--lengkung), transform 900ms var(--lengkung); } html.wf.wf-tajuk:not(.wf-statik) .hero-kabus, html.wf.wf-tajuk:not(.wf-statik) .f-teater-teks { transition: opacity 700ms var(--lengkung); } @media (max-width: 960px) { html.wf.wf-buka .hero-wrap { transform: none; } html.wf.wf-tajuk .f-teater-teks { transition: opacity 700ms var(--lengkung), transform 900ms var(--lengkung); } } @keyframes f-naik { from { transform: translate3d(0, 24%, 0); clip-path: inset(0 0 100% 0); } to { transform: none; clip-path: inset(0 0 -20% 0); } } @keyframes f-lukis { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } } @keyframes f-muncul { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } } @keyframes f-titik { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } } @keyframes f-garis-x { from { transform: scaleX(0); } to { transform: none; } } @keyframes f-orang { from { opacity: 0; transform: translate3d(0, 28px, 0) scale(.96); } to { opacity: 1; transform: none; } } @keyframes f-cop { 0% { opacity: 0; transform: scale(1.3) rotate(-11deg); box-shadow: 0 34px 44px -10px rgb(0 0 0 / .5); } 70% { opacity: 1; } 100% { opacity: 1; transform: rotate(-4deg); box-shadow: 0 10px 18px -8px rgb(0 0 0 / .45); } } @keyframes f-hentak { 0%, 100% { transform: none; } 40% { transform: translate3d(0, 3px, 0) scale(.995); } } @keyframes f-sapu { from { transform: translateY(0); opacity: .9; } 92% { opacity: .9; } to { transform: translateY(var(--f-h, 360px)); opacity: 0; } } @keyframes f-kotak { from { opacity: 0; } to { opacity: 1; } } @keyframes f-nafas { from { opacity: .3; } to { opacity: .8; } } html.wf:not(.wf-statik) .f-b01:not(.f-main):not(.f-akhir) .f-k > span { opacity: 0; } html.wf:not(.wf-statik) .f-b01.f-main .f-k > span { animation: f-naik 700ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 60ms); } html.wf:not(.wf-statik) .f-b01:not(.f-main):not(.f-akhir) .f-kad-garis { transform: scaleX(0); } html.wf:not(.wf-statik) .f-b01.f-main .f-kad-garis { animation: f-garis-x 900ms var(--lengkung) 300ms both; } html.wf:not(.wf-statik) .f-main .f-hub-svg .f-gr { animation: f-lukis 700ms cubic-bezier(.5, 0, .2, 1) both; animation-delay: calc(var(--i) * 70ms); } html.wf:not(.wf-statik) .f-main .f-hub-svg .f-hub-rangka { animation: f-lukis 500ms var(--lengkung) 680ms both; } html.wf:not(.wf-statik) .f-main .f-hub-svg .f-titik { animation: f-titik 520ms ease-out 640ms both; } html.wf:not(.wf-statik) .f-main .f-hub-label li { animation: f-muncul 360ms var(--lengkung) both; animation-delay: calc(var(--i) * 70ms); } html.wf:not(.wf-statik) .f-main .f-hub-pusat { animation: f-muncul 360ms var(--lengkung) 760ms both; } html.wf:not(.wf-statik) .f-p { transition: opacity 520ms var(--lengkung), transform 700ms var(--lengkung); transform: translate3d(0, 5%, 0) scale(.97); } html.wf:not(.wf-statik) .f-p.f-aktif { transform: none; } html.wf:not(.wf-statik) .f-p.f-lepas { transform: translate3d(0, -5%, 0) scale(.97); } html.wf:not(.wf-statik) .f-main .r-sapu { animation: f-sapu 900ms cubic-bezier(.4, 0, .2, 1) both; } html.wf:not(.wf-statik) .f-main .r-kotak { animation: f-kotak 260ms var(--lengkung) both; animation-delay: calc(500ms + var(--i) * 120ms); } .f-akhir .r-kotak { opacity: 1; } html.wf:not(.wf-statik) .f-b06:not(.f-main):not(.f-akhir) .f-orang li { opacity: 0; } html.wf:not(.wf-statik) .f-b06.f-main .f-orang li { animation: f-orang 520ms cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i) * 90ms); } html.wf:not(.wf-statik) .f-main .f-cop { animation: f-cop 560ms cubic-bezier(.3, 1.3, .5, 1) 200ms both; } html.wf:not(.wf-statik) .f-main .f-mof-kertas { animation: f-hentak 220ms ease-out 560ms both; } html.wf:not(.wf-statik) .f-cta-led { animation: f-nafas 1.2s ease-out 1 both; animation-play-state: paused; } /* F2: sekali (dulu gelung 2.4 s) — CPU rehat bab 08 ≤ asas */ html.wf:not(.wf-statik) .f-cta-rak.f-main .f-cta-led { animation-play-state: running; } @media (prefers-reduced-motion: reduce) { .f-babak *, .f-cta-led, .hero-wrap, .hero-kabus, .f-teater-teks { animation: none !important; transition: none !important; } } /* lapisan grain/vignette/gelap: tiada semasa dolly (tetingkap belum penuh), pudar masuk bila LED penuh (WOW: 400ms) */ html.wf.wf-dolly .f-iris::before, html.wf.wf-dolly .f-grain, html.wf.wf-dolly .f-vignet { opacity: 0; } html.wf.wf-led:not(.wf-statik) .f-iris::before, html.wf.wf-led:not(.wf-statik) .f-vignet { transition: opacity 400ms ease; } /* ---------- 5. Pembaikan audit pusingan 1 ---------- */ .f-b06 .f-momen { padding-inline: max(var(--gutter), 64px); } .f-orang { max-width: var(--lebar); } .f-tanpa-pin .f-dalam { justify-content: flex-start; padding-top: clamp(8px, 4vh, 40px); } /* kad 01: teks di atas (tiada skrin gelap kosong semasa kad naik) */ @media (max-width: 960px) { html.wf .cta { flex-direction: column; align-items: stretch; } html.wf .cta > .wrap { width: 100%; } .f-b06 .f-momen { padding-inline: var(--gutter); } } /* mod rakam video pintu (_alatF/rakam-pintu.js, ?f-rakam): rak sahaja */ html.wf-rakam .kepala, html.wf-rakam .pintu-ask, html.wf-rakam .hero-wrap, html.wf-rakam .hero-kabus, html.wf-rakam .f-teater-teks, html.wf-rakam .f-garis, html.wf-rakam .f-bar, html.wf-rakam .label-3d, html.wf-rakam .k8-atas, html.wf-rakam .pentas { visibility: hidden !important; } /* desktop: rak dialih ke tengah semasa pembuka → tepi kanan kanvas (halo terpotong) dipudar */ @media (min-width: 961px) { } /* lajur kanan K8 (≥1181): bingkai sticky tidak ditarik naik ke dalam babak (asal: margin negatif ≈ separuh skrin) */ @media (min-width: 1181px) and (min-height: 680px) { html.wf .bab-pameran.f-bab > .wrap > .lajur > [data-bingkai] { margin-top: 0 !important; } } .f-kad .f-kicker { margin-bottom: clamp(20px, 3vw, 40px); } /* render statik rak lajur HUD (fallback K8 tanpa WebGL): tiada dalam F — LED / video ganti */ html.wf .pentas .statik-kolum { visibility: hidden !important; } /* label kecil hub 02 atas latar sebenar (piksel 5.3): naik ke ≥ 6.07 */ .f-hub-nota, .f-hub-pusat { color: #C9D1E0; } /* ===================================================================================================== F2 · JALUR SISTEM SEBENAR (pusingan WOW 3, 31 Okt 2026). Satu peranti kecil-sederhana yang bertukar bentuk (laptop TechManage → telefon SATRIA TD → skrin besar AARM) + kursor demo mikro ≈3 s setiap sistem. Asas geometri = varian G (clip-path inset + unit container cqw). Desktop: lajur kanan hero di bawah LED (LED kekal nampak di atas/sekeliling). Telefon (≤960): dipindah wow-f.js ke atas tajuk dalam teater (peranti kanan, kapsyen kiri). Muncul selepas LED penuh (wf-tajuk). ===================================================================================================== */ .f2-jalur { display: none; } html.wf .f2-jalur { display: block; position: absolute; z-index: 3; color: var(--ais); pointer-events: auto; right: max(var(--gutter), calc((100vw - 1200px) / 2)); bottom: clamp(96px, 14vh, 150px); width: min(31vw, 440px); } html.wf.wf-buka .f2-jalur, html.wf.wf-dolly .f2-jalur { opacity: 0; visibility: hidden; transform: translate3d(0, 18px, 0); } .f2-pentas { position: relative; width: 100%; aspect-ratio: 1 / .66; container-type: size; /* L = laptop (tm 1380×922), T = telefon (satria 860×1780), P = skrin besar (aarm 1980×1320); unit = % lebar pentas */ --Lx: 6; --Ly: 2; --Lw: 88; --Lh: 58.8; --Lr: 1.6; --Lb: 1.8; --Tx: 35; --Ty: 1.9; --Tw: 30; --Th: 62.09; --Tr: 4.3; --Tb: 1.9; /* F2b: telefon 25 → 30% (SATRIA terbaca, kurang ruang kosong) */ --Px: 4; --Py: 1.6; --Pw: 92; --Ph: 61.33; --Pr: .9; --Pb: 1.4; --x: var(--Lx); --y: var(--Ly); --w: var(--Lw); --h: var(--Lh); --r: var(--Lr); --b: var(--Lb); } .f2-pentas[data-keadaan="telefon"] { --x: var(--Tx); --y: var(--Ty); --w: var(--Tw); --h: var(--Th); --r: var(--Tr); --b: var(--Tb); } .f2-pentas[data-keadaan="paparan"] { --x: var(--Px); --y: var(--Py); --w: var(--Pw); --h: var(--Ph); --r: var(--Pr); --b: var(--Pb); } .f2-halo { position: absolute; inset: -10% -6% -6%; pointer-events: none; background: radial-gradient(56% 50% at 50% 46%, rgb(5 8 15 / .72), rgb(5 8 15 / 0) 74%), radial-gradient(48% 8% at 50% 97%, rgb(0 0 0 / .7), transparent 72%); } .f2-bezel, .f2-bezel::before, .f2-layar { position: absolute; inset: 0; } .f2-bezel { background: linear-gradient(150deg, rgb(var(--cahaya) / .7) 0%, rgb(var(--cahaya) / .16) 30%, rgb(var(--cahaya) / .08) 62%, rgb(var(--cahaya) / .4) 100%); clip-path: inset(calc((var(--y) - var(--b)) * 1cqw) calc((100 - var(--x) - var(--w) - var(--b)) * 1cqw) calc(100cqh - (var(--y) + var(--h) + var(--b)) * 1cqw) calc((var(--x) - var(--b)) * 1cqw) round calc((var(--r) + var(--b)) * 1cqw)); } .f2-bezel::before { content: ""; background: linear-gradient(170deg, #1A2442 0%, #0B1122 55%, #121B35 100%); clip-path: inset(calc((var(--y) - var(--b) + .3) * 1cqw) calc((100 - var(--x) - var(--w) - var(--b) + .3) * 1cqw) calc(100cqh - (var(--y) + var(--h) + var(--b) - .3) * 1cqw) calc((var(--x) - var(--b) + .3) * 1cqw) round calc((var(--r) + var(--b) - .3) * 1cqw)); } .f2-layar { z-index: 1; background: #05080F; overflow: hidden; clip-path: inset(calc(var(--y) * 1cqw) calc((100 - var(--x) - var(--w)) * 1cqw) calc(100cqh - (var(--y) + var(--h)) * 1cqw) calc(var(--x) * 1cqw) round calc(var(--r) * 1cqw)); } .f2-tapak { position: absolute; left: 1cqw; width: 98cqw; height: 2.8cqw; top: calc((var(--Ly) + var(--Lh) + var(--Lb)) * 1cqw); border-radius: .4cqw .4cqw 2.2cqw 2.2cqw; background: linear-gradient(180deg, rgb(var(--cahaya) / .5) 0%, #1A2442 22%, #0B1122 100%); box-shadow: 0 2cqw 3.4cqw -1.4cqw rgb(0 0 0 / .7); transform-origin: 50% 0; opacity: 0; transform: scaleX(.5) scaleY(.4); } .f2-pentas[data-keadaan="laptop"] .f2-tapak { opacity: 1; transform: none; } .f2-skrin { position: absolute; margin: 0; opacity: 0; } .f2-skrin img { display: block; width: 100%; height: auto; } .f2-skrin[data-keadaan="laptop"] { left: calc(var(--Lx) * 1cqw); top: calc(var(--Ly) * 1cqw); width: calc(var(--Lw) * 1cqw); } .f2-skrin[data-keadaan="telefon"] { left: calc(var(--Tx) * 1cqw); top: calc(var(--Ty) * 1cqw); width: calc(var(--Tw) * 1cqw); } .f2-skrin[data-keadaan="paparan"] { left: calc(var(--Px) * 1cqw); top: calc(var(--Py) * 1cqw); width: calc(var(--Pw) * 1cqw); } .f2-skrin[data-aktif] { opacity: 1; } .f2-sorot { position: absolute; z-index: 2; pointer-events: none; border-radius: 5px; opacity: 0; border: 1.5px solid #8FB8FF; box-shadow: 0 0 0 1px rgb(10 16 32 / .5), 0 0 0 999px rgb(5 9 20 / .42), 0 0 18px 2px rgb(143 184 255 / .38); } .f2-sorot.f2-hidup { opacity: 1; } .f2-sorot-label { position: absolute; left: -1.5px; bottom: calc(100% + 6px); white-space: nowrap; font: 500 11px/1 var(--mono); letter-spacing: .03em; color: #0A1020; background: #EEF2F9; padding: 6px 9px; border-radius: 999px; box-shadow: 0 6px 16px -6px rgb(0 0 0 / .6); } .f2-sorot.f2-bawah .f2-sorot-label { bottom: auto; top: calc(100% + 6px); } .f2-sorot.f2-kanan .f2-sorot-label { left: auto; right: -1.5px; } .f2-kursor { position: absolute; left: 0; top: 0; z-index: 5; pointer-events: none; opacity: 0; filter: drop-shadow(0 3px 6px rgb(0 0 0 / .55)); } .f2-kursor svg { display: block; } .f2-denyut { position: absolute; left: -12px; top: -12px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #8FB8FF; opacity: 0; } .f2-kap { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgb(238 242 249 / .22); } .f2-kap-teks { margin: 0; min-width: 0; transition: opacity 160ms ease; } .f2-kap-teks.f2-tukar { opacity: 0; } .f2-plat, .f2-meta { display: block; } /* .f2-nama: inline-flex ≥ 28px tinggi (axe target-size) */ .f2-plat { font: 500 10.5px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #B4BED0; } .f2-nama { display: inline-flex; align-items: center; min-height: 44px; font-size: 18px; font-weight: 560; letter-spacing: -.02em; line-height: 1.3; color: var(--ais); text-decoration: none; } .f2-nama::after { content: " ↗"; font-size: .8em; color: #B4BED0; } .f2-nama:hover { text-decoration: underline; text-underline-offset: 3px; } .f2-meta { font-size: 13.5px; line-height: 1.4; color: #B4BED0; } .f2-kawal { display: flex; flex: none; margin-right: -6px; } .f2-kawal button { appearance: none; border: 0; background: transparent; cursor: pointer; padding: 0 5px; min-width: 44px; min-height: 44px; display: grid; align-items: center; border-radius: 6px; } .f2-kawal i { display: block; width: 34px; height: 3px; border-radius: 3px; background: rgb(238 242 249 / .24); overflow: hidden; } .f2-kawal b { display: block; height: 100%; background: #EEF2F9; transform-origin: 0 50%; transform: scaleX(0); } .f2-kawal button[aria-pressed="true"] b { transform: scaleX(1); } .f2-kawal button:focus-visible { outline: 2px solid #8FB8FF; outline-offset: -2px; } @media (max-width: 1180px) { html.wf .f2-jalur { width: min(34vw, 380px); } .f2-meta { display: none; } } @media (max-width: 960px) { /* telefon/tablet: dalam teater, atas kicker — peranti di kanan, kapsyen di kiri */ html.wf .f2-jalur { position: relative; right: auto; bottom: auto; width: 100%; display: flex; flex-direction: row-reverse; align-items: flex-end; gap: 12px; margin: 0 0 16px; } html.wf .f2-pentas { width: min(52%, 300px); flex: none; } html.wf .f2-kap { flex: 1; flex-direction: column; align-items: flex-start; gap: 2px; margin: 0; padding: 0 0 2px; border: 0; min-width: 0; } .f2-nama { font-size: 15px; } .f2-kawal { margin: 0 0 0 -5px; } .f2-kawal i { width: 22px; } .f2-kawal button { min-width: 44px; padding: 0 5px; } /* sasaran sentuh 44px */ .f2-sorot-label { display: none; } /* telefon: skrin kecil, label terpotong — kapsyen kiri sudah namakan sistem */ } /* WOW: skrol/kemasukan (pengecualian ≤1200ms) — F2: jalur masuk 600ms selepas LED; morph peranti 640ms; kursor 560–650ms (WAAPI, wow-f.js) */ html.wf.wf-tajuk:not(.wf-statik) .f2-jalur { transition: opacity 600ms var(--lengkung) 200ms, transform 600ms var(--lengkung) 200ms, visibility 0s 0s; } html.wf:not(.wf-statik) .f2-bezel, html.wf:not(.wf-statik) .f2-bezel::before, html.wf:not(.wf-statik) .f2-layar { transition: clip-path 640ms cubic-bezier(.65, 0, .25, 1); } html.wf:not(.wf-statik) .f2-skrin { transition: opacity 380ms ease 120ms, transform 700ms var(--lengkung); } html.wf:not(.wf-statik) .f2-skrin[data-aktif] { transition: opacity 340ms ease 100ms, transform 700ms var(--lengkung); } /* bertindih dengan skrin keluar: tiada bingkai kosong semasa morph */ html.wf:not(.wf-statik) .f2-tapak { transition: opacity 460ms ease, transform 640ms cubic-bezier(.65, 0, .25, 1); } html.wf:not(.wf-statik) .f2-sorot { transition: opacity 280ms ease; } html.wf:not(.wf-statik) .f2-kursor { transition: opacity 200ms ease; } /* klik pengguna (f2-cepat): interaksi ≤ 400 ms — morph 360 ms, skrin 200 ms tanpa tunda, kapsyen 110 + 120 ms */ html.wf:not(.wf-statik) .f2-cepat .f2-bezel, html.wf:not(.wf-statik) .f2-cepat .f2-bezel::before, html.wf:not(.wf-statik) .f2-cepat .f2-layar { transition-duration: 360ms; } html.wf:not(.wf-statik) .f2-cepat .f2-skrin, html.wf:not(.wf-statik) .f2-cepat .f2-skrin[data-aktif] { transition: opacity 200ms ease 0ms, transform 360ms var(--lengkung); } html.wf:not(.wf-statik) .f2-cepat .f2-tapak { transition-duration: 200ms, 360ms; } .f2-jalur:has(.f2-cepat) .f2-kap-teks { transition-duration: 110ms; } @media (prefers-reduced-motion: reduce) { .f2-jalur, .f2-jalur * { transition: none !important; animation: none !important; } } @supports not (container-type: size) { .f2-bezel, .f2-bezel::before, .f2-layar { clip-path: none; } .f2-skrin:not([data-aktif]) { display: none; } } /* F2 kontras (ukur-wow 390): monogram AdN — gradien lebih cerah di bawah (teks ink ≥ 7); resit kecil 05 atas telefon lebih gelap/tebal */ html.wf .monogram:not(.ubin-monogram) { background: linear-gradient(180deg, #CDD3DD 0%, #B4BCC8 60%, #9DA6B4 100%); } @media (max-width: 960px) { .f-resit-kertas .r-kecil { fill: #1F2737; font-weight: 600; } } /* F2 gate K8 pameran: jalur HUD F2 (44px bawah kepala) — bingkai sticky lajur kanan + objek garis turun sebanyak jalur itu; ruang bacaan HUD K8 di bawah pentas (--hud-t 100px) tidak dipakai lagi (bacaan kini di jalur atas) → saiz bingkai hampir sama. */ @media (min-width: 1181px) and (min-height: 680px) { html.wf { --atas-pentas: calc(var(--kepala-t) + var(--f2-hud-t) + 20px); --hud-t: 44px; } html.wf .pentas[data-salinan="siang"] { top: calc(var(--kepala-t) + var(--f2-hud-t) + 24px); } } /* F2 CPU rehat 08: nafas nod logo CTA K8 (::after, gelung infinite) berjalan walaupun salinan pentas CTA disorok → Layerize setiap frame */ html.wf .pentas[data-salinan="cta"] *::after, html.wf .pentas[data-salinan="cta"] *::before { animation: none !important; } @media (max-width: 960px) { html.wf .pentas *::after, html.wf .pentas *::before { animation: none !important; } } /* F2 verifier buta pusingan 2 (P1): objek garis "rangkaian" (02) = bingkai segi empat kosong besar sebelah kad SAKTI → disorok; bab lain kekal */ html.wf .pentas[data-salinan="siang"][data-peringkat="rangkaian"] .objek { visibility: hidden !important; } /* Pasca-F2 (verifier V2): cip hero "NEW · DELIVERED" — fokus papan kekunci jelas. Dulu cincin 2px --ais offset 3 hampir sama warna dengan cip (nampak macam bingkai rehat). Kini ikut fokus K8 atas gelap (.k8-pintu-rak: 2px rgb(--cahaya), offset 4) + keadaan sama hover (latar putih + halo). */ html.wf .hl-chip:focus-visible .hl-chip-isi { background: #FFFFFF; outline: 2px solid rgb(var(--cahaya)); outline-offset: 4px; box-shadow: 0 0 0 6px rgb(var(--cahaya) / .18), 0 4px 24px -12px rgb(var(--cahaya) / .6); } /* ===================================================================================================================== F2b (4 Nov 2026, Razlan: "teks layout kiri kecikan, animation sebelah kanan besarkan — attraction pada animation"): desktop = lajur teks kiri ≈ 38% lebar skrin (tajuk turun satu tahap, lead + 3 titik padat), peranti sistem kanan ≈ 55% lebar skrin, hampir penuh tinggi hero (atas lejar). Lejar SSM/MOF + logo klien = jalur penuh lebar di bawah kedua-dua lajur. Telefon/tablet (≤960): susunan tegak dalam teater — kicker → tajuk (lebih kecil) → butang → bukti → peranti lebar penuh + kapsyen. Nisbah dipilih dengan ukuran 40/60 vs 38/62 (scratchpad rakaman/hero, DEPLOY-LOG (n)). ===================================================================================================================== */ @media (min-width: 961px) { html.wf { --f2-kiri: .38; --f2-kl: max(var(--gutter), calc((100vw - var(--max)) / 2)); --f2-bawah: calc(clamp(36px, 5.5vh, 60px) + 118px); } html.wf .hero-teks { max-width: calc(100vw * var(--f2-kiri)); } html.wf .h-hero { font-size: clamp(2.4rem, min(calc(100vw * var(--f2-kiri) / 8.6), 7.4vh), 4.5rem); } html.wf .hero-lead { margin-top: 18px; font-size: 16px; line-height: 1.55; } html.wf .mk-hero-bukti { margin-top: 12px; gap: 6px; font-size: 14.5px; line-height: 1.4; } html.wf .hero-teks .tindakan { margin-top: 24px; } html.wf .lejar { max-width: var(--lebar); grid-template-columns: 1.1fr 1fr 1.15fr .9fr 1.15fr; padding-top: 20px; } html.wf .lejar > div:nth-child(4) { padding-left: 12px; border-left: 1px solid var(--ais-garis); } html.wf .hero-klien { max-width: var(--lebar); } html.wf .f2-jalur { right: 24px; left: auto; bottom: var(--f2-bawah); width: min(calc(100vw - var(--f2-kl) - 100vw * var(--f2-kiri) + 16px), calc((100svh - var(--kepala-t) - 28px - var(--f2-bawah) - 86px) / .66)); } html.wf .f2-kap { margin-top: 14px; } html.wf .f2-nama { font-size: 20px; } } @media (min-width: 961px) and (max-height: 799px) { html.wf { --f2-bawah: calc(clamp(36px, 5.5vh, 60px) + 94px); } } /* verifier F2b: 961–1180 = jarak 16px antara teks dan peranti (dulu bertindih 40px: kapsyen rapat butang, laptop ≈4px dari "Malaysia."); skrin rendah / tablet: bar giliran ke-3 di bawah butang ASK (fixed kanan bawah) → bar dianjak ke kiri */ @media (min-width: 961px) and (max-width: 1180px) { html.wf .f2-jalur { width: min(calc(100vw - var(--f2-kl) - 100vw * var(--f2-kiri) - 40px), calc((100svh - var(--kepala-t) - 28px - var(--f2-bawah) - 86px) / .66)); } } @media (min-width: 961px) and (max-width: 1180px), (min-width: 961px) and (max-height: 799px) { html.wf .f2-kawal { margin-right: 64px; } } @media (max-width: 960px) { .f-teater-h1 { font-size: clamp(2rem, 8.8vw, 2.9rem); } .f-teater-kicker { margin-bottom: 10px; } .f-teater-tindakan { margin-top: 16px; } html.wf .f2-jalur { flex-direction: column; align-items: stretch; gap: 0; margin: 18px 0 0; } html.wf .f2-pentas { width: min(100%, calc((100svh - var(--kepala-t) - var(--jalur-t) - 400px) / .66)); align-self: center; } html.wf .f2-kap { flex: none; flex-direction: row; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 10px 0 0; padding: 8px 0 0; border-top: 1px solid rgb(238 242 249 / .22); } html.wf .f2-kap-teks { min-width: 0; } .f2-nama { font-size: 16px; } } @media (max-width: 960px) { /* F2b telefon: teks kini bermula ≈ 30% tinggi skrin (peranti di bawah) → scrim LED naik lebih tinggi supaya kicker + tajuk kekal kontras */ html.wf .f-teater-pentas .f-iris::after { background: linear-gradient(0deg, rgb(10 16 32 / .97) 0%, rgb(10 16 32 / .93) 60%, rgb(10 16 32 / .8) 70%, rgb(10 16 32 / .3) 82%, rgb(10 16 32 / 0) 90%), linear-gradient(180deg, rgb(10 16 32 / .75) 0%, rgb(10 16 32 / 0) 24%); } } /* F2b: rakaman skrin sistem (wow-f.js cipta