/* Case study penuh (7 Nov 2026) — cerita 4 bahagian: nama rasmi + kredit (hero), "Inside the system" (galeri skrin modul berurutan),
   "Why it stands out" (kelebihan), "Impact" (hanya bila bersumber). Dimuat HANYA di page yang ada cerita (tools/cerita.py). Token K8 sahaja.
   Kontras: --ais-redup atas --malam ≈ 8.9:1, --kelabu atas --kabus ≈ 6.3:1, --navy atas putih ≈ 10.4:1. */

/* ---------- 1. hero: nama rasmi + kredit ---------- */
.cr-rasmi { margin-top: 14px; font-size: clamp(1.05rem, 1.5vw, 1.3rem); font-weight: 500; line-height: 1.35; letter-spacing: -0.012em; color: var(--ais); max-width: 32em; text-wrap: balance; }
.cr-kredit { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; font: 500 12px/1.6 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ais-redup); max-width: 46em; }
.cr-kredit-garis { flex: 0 0 22px; height: 1px; background: currentColor; transform: translateY(-4px); }

/* ---------- 2. Inside the system: rel langkah + galeri ---------- */
.cr-rel { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 32px; }
.cr-rel a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 16px 8px 10px; border: 1px solid var(--garis); border-radius: 999px;
  background: var(--kertas); font-size: 15px; font-weight: 520; color: var(--ink); transition: border-color 240ms var(--lengkung), color 240ms var(--lengkung); }
.cr-rel a:hover { border-color: var(--navy); color: var(--navy); }
.cr-rel li + li a::before { content: none; }
.cr-rel-no { display: inline-grid; place-items: center; min-width: 28px; height: 28px; border-radius: 999px; background: var(--navy); color: #FFFFFF; font: 500 11.5px/1 var(--mono); letter-spacing: .02em; }

.cr-galeri { margin-top: clamp(48px, 6vw, 80px); display: grid; gap: clamp(64px, 8vw, 112px); counter-reset: none; }
.cr-langkah { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; scroll-margin-top: calc(var(--kepala-t) + 72px); }
.cr-langkah-no { display: flex; align-items: center; gap: 14px; font: 500 13px/1 var(--mono); letter-spacing: .08em; color: var(--navy); }
.cr-langkah-garis { flex: 1 1 auto; max-width: 96px; height: 1px; background: var(--navy); opacity: .45; }
.cr-langkah-tajuk { margin-top: 18px; font-size: clamp(1.45rem, 2.3vw, 1.9rem); font-weight: 560; line-height: 1.15; letter-spacing: -0.028em; text-wrap: balance; }
.cr-langkah-ayat { margin-top: 14px; font-size: 17px; line-height: 1.6; color: var(--kelabu); max-width: 30em; }

.cr-skrin { margin: 0; width: 100%; max-width: 760px; justify-self: end; }
.cr-bingkai { position: relative; border-radius: 14px; overflow: hidden; background: #1B2440;
  box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 30px 60px -34px rgb(11 19 38 / .55), 0 0 0 1px rgb(11 19 38 / .10); }
.cr-bingkai img { display: block; width: 100%; height: auto; background: var(--kertas); }
.cr-pelayar { display: flex; align-items: center; gap: 7px; height: 28px; padding: 0 12px; background: #1B2440; }
.cr-pelayar i { width: 9px; height: 9px; border-radius: 50%; background: rgb(238 242 249 / .28); }
.cr-bingkai.k8-zum-boleh { cursor: zoom-in; }
.cr-bingkai:focus-visible { outline: 2px solid var(--navy); outline-offset: 4px; }

/* telefon: bingkai bulat, lebar papar ≤ 340 px (fail 1170 px → DPR3 ≤ 1020 < 1170) */
.cr-skrin.cr-telefon { max-width: 340px; justify-self: center; }
.cr-telefon .cr-bingkai { border-radius: 38px; padding: 10px; background: #0E1426; }
.cr-telefon .cr-bingkai img { border-radius: 29px; }

@media (min-width: 961px) {
  .cr-terbalik { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); }
  .cr-terbalik .cr-langkah-teks { order: 2; }
  .cr-terbalik .cr-skrin { justify-self: start; }
  .cr-telefon-baris { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); }
}

/* ---------- 3. Why it stands out ---------- */
.cr-lebih-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 48px; }
.cr-lebih-grid.cr-n3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cr-lebih { display: grid; align-content: start; gap: 10px; padding: 26px 26px 28px; border: 1px solid var(--garis); border-radius: 18px; background: var(--kertas); }
.bab-kabus .cr-lebih { background: var(--kertas); }
.bab:not(.bab-kabus) .cr-lebih { background: var(--kabus); border-color: transparent; }
.cr-lebih-no { font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--navy); }
.cr-lebih h3 { margin-top: 6px; font-size: 20px; font-weight: 560; line-height: 1.25; letter-spacing: -0.018em; }
.cr-lebih p { font-size: 16px; line-height: 1.6; color: var(--kelabu); }
.cr-nota { margin-top: 32px; }

/* ---------- 4. Impact ---------- */
.cr-impak { display: grid; gap: 0; margin-top: 40px; border-top: 1px solid var(--ink); max-width: 980px; }
.cr-impak-item { padding: 26px 0; border-bottom: 1px solid var(--garis); }
.cr-impak-item p { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 520; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); text-wrap: pretty; }

/* ---------- responsif ---------- */
@media (max-width: 1180px) {
  .cr-lebih-grid.cr-n3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
  .wd-hero-produk .cr-kredit { order: 3; } /* ikut .p2-ayat (wd.css: ayat produk selepas butang di telefon) */
  .cr-langkah, .cr-terbalik { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .cr-skrin { justify-self: stretch; max-width: none; }
  .cr-skrin.cr-telefon { justify-self: center; max-width: 300px; }
}
@media (max-width: 640px) {
  .cr-rel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .cr-rel a { width: 100%; font-size: 14.5px; }
  .cr-lebih-grid, .cr-lebih-grid.cr-n3 { grid-template-columns: minmax(0, 1fr); }
  .cr-lebih { padding: 22px 20px 24px; }
  .cr-langkah-ayat { font-size: 16px; }
  .cr-bingkai { border-radius: 10px; }
  .cr-pelayar { height: 22px; gap: 5px; }
  .cr-pelayar i { width: 7px; height: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .cr-rel a { transition: none; }
}

/* ---------- 2b. skrin tarikan (8 Nov, Razlan): satu skrin "point of attraction" setiap sistem, penuh lebar sebelum langkah ---------- */
.cr-tarikan { margin-top: clamp(40px, 5vw, 64px); display: grid; gap: 24px; }
.cr-tarikan-teks { max-width: 44em; }
.cr-tarikan-tajuk { font-size: clamp(1.6rem, 2.8vw, 2.3rem); font-weight: 560; line-height: 1.12; letter-spacing: -0.03em; text-wrap: balance; }
.cr-skrin-tarikan { max-width: none; justify-self: stretch; }
.cr-skrin-tarikan .cr-bingkai { border-radius: 18px; box-shadow: 0 1px 0 rgb(255 255 255 / .06) inset, 0 44px 90px -40px rgb(11 19 38 / .6), 0 0 0 1px rgb(11 19 38 / .12); }
.cr-tarikan-telefon { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); align-items: center; }
.cr-tarikan-telefon .cr-skrin-tarikan { max-width: 360px; justify-self: center; }
@media (max-width: 960px) { .cr-tarikan-telefon { grid-template-columns: minmax(0, 1fr); } .cr-tarikan-telefon .cr-skrin-tarikan { max-width: 300px; } }
@media (max-width: 640px) { .cr-skrin-tarikan .cr-bingkai { border-radius: 10px; } }

/* ---------- 1b. hero page kes/kerja = skrin tarikan (8 Nov) ---------- */
.cr-hero-kap { margin-top: 12px; font: 500 11.5px/1.5 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--ais-redup); }
.cr-hero-tarikan .p2-pentas.k8-zum-boleh { cursor: zoom-in; }
.cr-hero-kap { display: grid; gap: 6px; max-width: 60em; }
.cr-hero-kap-ayat { font: 400 14.5px/1.55 var(--sans); letter-spacing: 0; text-transform: none; color: var(--ais-redup); }

/* ---------- 5. corak HadirAi #buat + improvement (8 Nov) ---------- */
/* 5a. produk: skrin sebenar ciri atas poster (lapis dalam .wd-cerita-kanvas, 16:10 = skrin web 2880×1800 tepat) */
.cr-lapis { position: absolute; right: 3%; bottom: 6%; z-index: 3; width: 58%; aspect-ratio: 1600 / 1000; display: grid; place-items: center; padding: 0; background: #0E1426; opacity: 0; transform: translateY(10px) scale(.98); transform-origin: 100% 100%; pointer-events: none; border-radius: 10px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(238 242 249 / .22), 0 24px 48px -16px rgb(0 0 0 / .65); transition: opacity 280ms var(--lengkung), transform 280ms var(--lengkung); }
.cr-lapis.ada { opacity: 1; transform: none; }
.cr-lapis img { position: static !important; width: 100% !important; height: 100% !important; object-fit: cover; object-position: top left; transform: none !important; will-change: auto !important; }
.cr-lapis.cr-lapis-telefon { width: auto; height: 86%; aspect-ratio: 1170 / 2300; border-radius: 18px; background: #0E1426; }
.cr-lapis.cr-lapis-telefon img { object-fit: contain; object-position: center; }
.wd-langkah li.cr-tuding { color: var(--ink); } .wd-langkah li.cr-tuding .no { color: var(--navy); font-weight: 700; }
/* 8 Nov: poster S4 (rujukan Razlan) KEKAL nampak; skrin sebenar ciri = kad terapung atas poster, bukan menutup poster */
.wd-langkah li.cr-boleh, .cr-langkah-hidup li.cr-boleh { cursor: pointer; }
/* 5b. kes/kerja: pentas skrin sebelah senarai (desktop); telefon = pentas melekat atas senarai (corak wd #buat telefon) */
.cr-pentas { display: none; }
@media (max-width: 960px) {
  html.js:not(.wd-statik) .p2-satu.cr-cerita { display: flex; flex-direction: column; }
  html.js:not(.wd-statik) .cr-cerita > .p2-utama { display: contents; }
  html.js:not(.wd-statik) .cr-cerita > .p2-utama > * { order: 0; }
  html.js:not(.wd-statik) .cr-cerita > .p2-utama > ol.cr-ol, html.js:not(.wd-statik) .cr-cerita > .p2-utama > ol.cr-ol ~ * { order: 2; }
  html.js:not(.wd-statik) .cr-pentas { display: block; order: 1; position: sticky; top: calc(var(--wd-atas, 128px) + 8px); z-index: 2; margin: 24px calc(-1 * var(--gutter)) 0; padding: 10px var(--gutter) 12px; background: var(--kabus); }
  .bab:not(.bab-kabus) .cr-pentas { background: var(--kertas); }
  html.js:not(.wd-statik) .cr-pentas::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 24px; pointer-events: none; background: linear-gradient(var(--kabus), transparent); }
  .bab:not(.bab-kabus) .cr-pentas::after { background: linear-gradient(var(--kertas), transparent); }
  .cr-pentas-kanvas { position: relative; aspect-ratio: 1600 / 1040; border-radius: 10px; overflow: hidden; background: #1B2440; }
  .cr-pentas-kanvas .cr-pelayar { height: 20px; }
  .cr-pentas-kanvas img { display: block; width: 100%; height: calc(100% - 20px); object-fit: cover; object-position: top left; background: var(--kertas); }
  .cr-pentas-kanvas.cr-pentas-telefon img { width: auto; height: calc(100% - 28px); margin: 4px auto; border-radius: 14px; object-fit: contain; }
  .cr-pentas-kap { display: none; }
  .cr-langkah-hidup li:not(.aktif) { color: var(--kelabu); }
}
@media (max-width: 960px) and (max-height: 700px) { html.js .cr-pentas { display: none !important; } }
@media (min-width: 961px) {
  html .p2-satu.cr-cerita { display: grid; grid-template-columns: minmax(0, .46fr) minmax(0, .54fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  html .cr-cerita > .p2-utama { grid-column: 1; max-width: none; }
  .cr-pentas { display: block; grid-column: 2; grid-row: 1; align-self: stretch; }
  .cr-pentas-bingkai { position: sticky; top: calc(var(--kepala-t) + var(--p2-hud-t, 44px) + 40px); }
  .cr-pentas-kanvas { position: relative; aspect-ratio: 1600 / 1040; border-radius: 14px; overflow: hidden; background: #1B2440; box-shadow: 0 30px 60px -34px rgb(11 19 38 / .55), 0 0 0 1px rgb(11 19 38 / .10); }
  .cr-pentas-kanvas img { display: block; width: 100%; height: calc(100% - 28px); object-fit: cover; object-position: top left; background: var(--kertas); }
  .cr-pentas-kanvas.cr-pentas-telefon { background: #0E1426; }
  .cr-pentas-kanvas.cr-pentas-telefon img { width: auto; height: calc(100% - 52px); margin: 12px auto; border-radius: 22px; object-fit: contain; }
  .cr-pentas.pudar .cr-pentas-kanvas { opacity: .55; }
  .cr-pentas-kap { margin-top: 14px; font: 500 11px/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--kelabu); min-height: 1.5em; }
  .cr-pentas-no { color: var(--navy); }
  .cr-langkah-hidup li { transition: color 240ms var(--lengkung); }
  .cr-langkah-hidup li:not(.aktif) { color: var(--kelabu); }
  .cr-langkah-hidup li.aktif .no { font-weight: 700; }
  html.js:not(.wd-statik) .cr-pentas-kanvas img.masuk { animation: cr-masuk 420ms var(--lengkung) both; }
}
@keyframes cr-masuk { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
/* 5c. Watch it in 20 seconds */
.cr-tonton-baris { margin-top: 28px; }
.cr-tonton { display: inline-flex; align-items: center; gap: 12px; min-height: 48px; }
.cr-tonton-ikon { width: 0; height: 0; border-left: 10px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cr-pemain { scroll-margin-top: calc(var(--kepala-t) + 64px); margin-top: 24px; padding: 16px; border-radius: 18px; background: #0E1426; color: var(--ais); }
.cr-pemain-bar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; margin-bottom: 14px; }
.cr-pemain-bar li { height: 3px; border-radius: 3px; background: rgb(238 242 249 / .22); overflow: hidden; }
.cr-pemain-bar span { display: block; height: 100%; width: 0; background: var(--ais); }
.cr-pemain-bar li.siap span { width: 100%; }
.cr-pemain-bar li.jalan span { animation: cr-bar 4000ms linear both; }
@keyframes cr-bar { from { width: 0; } to { width: 100%; } }
.cr-pemain-pentas { position: relative; display: grid; }
.cr-pemain-slaid { grid-area: 1 / 1; display: none; }
.cr-pemain-slaid.aktif { display: block; }
.cr-pemain-slaid img { display: block; width: auto; max-width: 100%; height: auto; max-height: calc(100svh - 300px); margin-inline: auto; border-radius: 10px; background: var(--kertas); }
.cr-telefon-slaid img { width: auto; max-width: 100%; max-height: min(calc(100svh - 320px), 640px); margin-inline: auto; border-radius: 26px; }
.cr-pemain-kap { margin-top: 12px; font-size: 15.5px; line-height: 1.5; color: var(--ais); }
.cr-pemain-no { font: 500 12px/1 var(--mono); color: var(--ais-redup); margin-right: 8px; }
.cr-pemain-kawal { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.cr-pemain-kawal button { min-width: 44px; min-height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--ais-garis); background: transparent; color: var(--ais); font: 500 14px/1 var(--sans); cursor: pointer; }
.cr-pemain-kawal button:hover { border-color: var(--ais); }
.cr-pemain-kawal [data-cr-tutup] { margin-left: auto; }
@media (prefers-reduced-motion: reduce) { .cr-lapis { transition: none; } .cr-pemain-bar li.jalan span { animation: none; width: 100%; } }
.cr-demo { position: absolute; z-index: 3; left: 12px; bottom: 12px; padding: 4px 9px; border-radius: 6px; background: #0A1020; color: var(--ais); font: 500 11px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; pointer-events: none; }
.wd-sinema-dalam .cr-demo { bottom: 14px; }