/* Halaman Capabilities (/scope/, /memory/) dalam sistem reka bentuk Core. App sebenar atas kanvas halaman
   (capabilities.js + canvas-kit.js): hero dan seksyen kanvas .pjc (canvas.css). Tiada panel, tiada lukisan. */
.cap-page .spc-hero{padding-bottom:88px}
.cap-example{margin:40px 0 0;scroll-margin-top:90px}

/* ── Kanvas app (pentas PJK): iframe lutsinar terus atas latar halaman ── */
.capx{position:relative;min-height:0;overflow:visible}
.cap-stage{height:540px}
/* Hero Scope: app penuh dalam bingkai tetingkap. Tinggi kanvas ditetapkan pentas (nisbah tetingkap app). */
.cap-window{overflow:hidden;border:1px solid var(--line);border-radius:12px;background:var(--band)}
/* bar tajuk nipis (app di bawahnya diskala; bar setinggi 34px kelihatan besar) */
.cap-window-bar{position:relative;display:flex;align-items:center;gap:6px;height:24px;padding-inline:11px;border-bottom:1px solid var(--line);direction:ltr}
.cap-window-bar i{width:8px;height:8px;border-radius:50%;background:var(--line)}
.cap-window-bar span{position:absolute;inset-inline:0;text-align:center;color:var(--muted);font:500 11px/24px var(--font);pointer-events:none}
/* Tetingkap hero lebih lebar daripada lajur teks: hampir memenuhi skrin (Faris: «kasi hampir tertutup skrin section hero»).
   Langkah di bawahnya selebar tetingkap (atau selebar lajur teks bila tetingkap lebih sempit), supaya tepinya sejajar.
   Lebarnya juga dihadkan oleh TINGGI skrin (nisbah 1500:774 + bar 24px), supaya seluruh tetingkap muat di bawah bar
   navigasi dan bahagian bawahnya tidak terpotong pada skrin pendek. */
/* Spec skrin demo (2026-11-12, sama dengan hero /projects/): lebar tetingkap diurus site.js siteHeroGrow — bermula selebar
   lajur, membesar hampir penuh skrin bila ditatal (dan berpusat), mengecil semula bila kembali ke atas. */
.cap-window{position:relative}
/* gelap sahaja (butang tema skrin pelawat boleh menukarnya); bar mac sewarna skrin, tanpa teks, tanpa garis pemisah */
.cap-window[data-demo-dark]{background:#0e0e0e}
/* bar tajuk: beza sedikit daripada kanvas dengan garis bawah halus (sama dengan skrin demo Core, Faris pilihan 3) */
.cap-window[data-demo-dark] .cap-window-bar{background:#181818;border-bottom-color:transparent;box-shadow:inset 0 -1px 0 #0a0a0a}
.cap-window[data-demo-dark] .cap-window-bar i{background:#FF5F57}
.cap-window[data-demo-dark] .cap-window-bar i:nth-child(2){background:#FEBC2E}
.cap-window[data-demo-dark] .cap-window-bar i:nth-child(3){background:#28C840}
.cap-window[data-demo-dark][data-theme="light"]{background:#fff}
.cap-window[data-demo-dark][data-theme="light"] .cap-window-bar{background:#f4f4f4;box-shadow:inset 0 -1px 0 #e4e4e4}
.cap-window[data-demo-dark][data-theme="light"]{border-color:#e4e4e4}
/* Butang tema skrin ☀ dan ▶ (sama dengan skrin demo Core, styles.css .demo): bulat 34px DI LUAR skrin, bertindan di sisi
   atas tepi tetingkap (kanan LTR, kiri RTL), dalam ruang kosong sedia ada; warna ikut halaman. Dilampirkan pada figure
   (.cap-example), unsur yang membesar — tetingkap sendiri overflow:hidden. Tiada ruang tepi: .screen-in (di bawah). */
.cap-example{position:relative}
.cap-example .screen-mode,.cap-example .screen-replay{position:absolute;inset-inline-start:calc(100% + 12px);z-index:6;width:34px;height:34px;
  display:grid;place-items:center;padding:0;border-radius:50%;border:1px solid var(--line);background:var(--bg);color:var(--ink);cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .2s cubic-bezier(.4,0,.2,1) .35s,visibility 0s .55s,background-color .12s ease-out}
.cap-example .screen-mode{top:0}
.cap-example .screen-replay{top:44px}
.cap-example .screen-mode:hover,.cap-example .screen-replay:hover{background:var(--band)}
.cap-example .screen-mode svg,.cap-example .screen-replay svg{display:block}
.cap-example .screen-replay svg{margin-inline-start:2px}
[dir="rtl"] .cap-example .screen-replay svg{margin-inline-start:0;margin-inline-end:-2px}
@media(hover:hover) and (pointer:fine){.cap-example:hover .screen-mode,.cap-example .screen-mode:focus-visible{opacity:1;visibility:visible;transition-delay:0s}}
@media(hover:none),(pointer:coarse){.cap-example .screen-mode{display:none}.cap-example .screen-replay{top:0}}
/* Ruang tepi < 54px (telefon, tablet, tetingkap yang membesar ke lebar penuh): capabilities.js menanda .screen-in dan butang
   masuk ke penjuru bawah dalam skrin, seperti .demo.screen-in (styles.css) — halaman tidak pernah melebar. */
.cap-example.screen-in .screen-mode,.cap-example.screen-in .screen-replay{inset-inline-start:auto;top:auto;bottom:14px;inset-inline-end:14px;border-color:#353535;background:#1d1d1d;color:#e6e6e6}
.cap-example.screen-in .screen-replay{inset-inline-end:56px}
.cap-example.screen-in[data-theme="light"] .screen-mode,.cap-example.screen-in[data-theme="light"] .screen-replay{border-color:#dedede;background:#fff;color:#2b2b2b}
@media(hover:none),(pointer:coarse){.cap-example.screen-in .screen-replay{inset-inline-end:14px}}
.cap-example.demo-stopped .screen-replay{opacity:1;visibility:visible;transition-delay:0s}
.cap-window .cap-stage{width:100%;height:auto;aspect-ratio:1500 / 774}   /* width: tinggi yang ditetapkan pentas tidak «mengunci» lebar melalui aspect-ratio */   /* sebelum pentas mengukur; kemudian tingginya ditetapkan pentas (nisbah sama) */
.cap-window .capx-frame{border-radius:0}
.capx-frame{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:transparent;opacity:0;pointer-events:none}
.capx-frame.live{opacity:1}
.capx-frame.late{transition:opacity .4s cubic-bezier(.22,1,.36,1)}
/* Halaman tetapan ditatal di dalam bingkai: tepi atas dan bawah pudar lembut, bukan potongan keras */
.capx-memory-layers .capx-frame,.capx-memory-library .capx-frame{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 64px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 44px,#000 calc(100% - 64px),transparent 100%)}
.pjc-canvas.capx{display:block}
.capx-scope-at{height:660px}
.capx-scope-side{height:700px}
.capx-memory-layers{height:640px}
.capx-memory-library{height:700px}
/* Side agent: panel sebenar pada lebarnya sendiri (440px), di tengah kanvas */
.capx-frame.capx-side{left:50%;width:440px;margin-left:-220px;border-radius:14px;box-shadow:0 0 0 1px var(--line),0 28px 70px -28px rgba(0,0,0,.5),0 6px 18px -8px rgba(0,0,0,.18)}

/* ── Langkah di bawah kanvas hero: garis atas nipis; bar langkah semasa ikut kemajuan sebenar (PJK.meter, --p 0…1) ── */
.cap-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;margin:40px 0 0;padding:0;list-style:none}
.cap-steps-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.cap-now{display:none}
.cap-steps li{margin:0}
.cap-steps button{position:relative;display:flex;flex-direction:column;justify-content:flex-start;align-items:stretch;width:100%;height:100%;padding:18px 0 0;border:0;border-top:1px solid var(--line);background:none;text-align:start;color:inherit;font:inherit;cursor:pointer}
.cap-steps b{display:block;margin:0 0 6px;font:600 16px/1.35 var(--font);color:var(--muted);transition:color .2s}
.cap-steps span{display:block;font-size:14.5px;line-height:1.6;color:var(--muted);transition:color .2s}
.cap-steps button[aria-current] b,.cap-steps button:hover b{color:var(--ink)}
.cap-steps button[aria-current] span{color:var(--copy)}
.cap-bar{position:absolute;top:-1px;inset-inline:0;height:2px;background:var(--ink);transform:scaleX(var(--p,0));transform-origin:left center}
html[dir="rtl"] .cap-bar{transform-origin:right center}
.cap-steps button:focus-visible{outline:2px solid #3b82f6;outline-offset:4px}
html[lang="ar"] .cap-steps b{font-family:"ShamelaArabicUI",var(--font);font-size:18px}
html[lang="ar"] .cap-steps span{font-size:16px}

/* ── Jadual (jenis memori) ── */
.cap-comparison{width:100%;table-layout:fixed;border-collapse:collapse;text-align:start;color:var(--copy);font-size:15px;line-height:1.65}
.cap-comparison th,.cap-comparison td{padding:18px 16px;border-block-end:1px solid var(--line);text-align:start;vertical-align:top;overflow-wrap:anywhere}
.cap-comparison th{color:var(--ink);font-weight:600}
.cap-comparison thead th{background:var(--band);font-size:13.5px;font-weight:500;color:var(--muted)}
.cap-comparison thead th:first-child{width:22%}
.cap-comparison thead th:nth-child(2){width:39%}
html[lang="ar"] .cap-comparison{font-size:17px;line-height:1.8}
html[lang="ar"] .cap-comparison thead th{font-size:15px}


/* Teks Arab dalam halaman Inggeris: terasing arahnya, fon naskh (bukan fon sistem) */
.cap-ar{unicode-bidi:isolate}

/* ── Cara penapis bergabung (band): lejar baris di sebelah tajuk. Pengendali · nama · nilai · bilangan; garis memisahkan
   baris, jumlah di baris akhir. Tiada kad, jadi susunannya sama pada setiap lebar skrin. ── */
.cap-eq-split{display:grid;grid-template-columns:minmax(280px,380px) minmax(0,1fr);gap:80px;align-items:center}
.cap-eq-head h2{margin:0}
.sp-page .cap-eq-head p{margin:14px 0 0}
/* ── «Cara penapis bergabung» · telemetri gaya G1X (Faris 2026-11-15, «ala SpaceX macam hero memory»). Monokrom:
   kiraan besar nipis (Inter 200, fail Google yang sama: paksi wght penuh), label mono, rel 1px bertanda skala yang
   mengecil ikut bahagian kitab yang tinggal, dan satu baris bagi setiap penapis. Tema terang: panel gelap (.cap-story). */
@font-face{font-family:'Inter Tele';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(https://fonts.gstatic.com/s/inter/v20/UcCo3FwrK3iLTcviYwYZ8UA3.woff2) format('woff2');unicode-range:U+0020-007E,U+2013,U+2212}
.cap-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cap-tm{position:relative;color:#fff;--tm-dim:rgba(255,255,255,.55);--tm-line:rgba(255,255,255,.16);--tm-ease:cubic-bezier(.65,0,.35,1)}
html[data-theme="light"] .cap-tm{padding:40px 44px 30px;border-radius:16px;background:#0e0e10}
.tm-mono{font:500 10.5px/1.2 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--tm-dim)}
html[lang="ar"] .tm-mono{font:400 15px/1.5 var(--font);letter-spacing:0;text-transform:none}
.tm-top{display:flex;align-items:flex-end;justify-content:space-between;gap:24px}
.tm-top>div{display:flex;flex-direction:column;gap:14px}
.tm-end{align-items:flex-end;text-align:end}
.tm-big,.tm-mid,.tm-c{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";filter:blur(0);transition:filter .5s}
.tm-big{font:200 clamp(68px,7.2vw,96px)/.82 'Inter Tele',var(--font);letter-spacing:-.035em}
.tm-mid{font:200 42px/1 'Inter Tele',var(--font);letter-spacing:-.02em}
html[lang="ar"] :is(.tm-big,.tm-mid,.tm-c){font-variant-numeric:normal;font-feature-settings:normal}
html[lang="ar"] .tm-big{font:400 clamp(64px,6.6vw,88px)/1.05 'Amiri',serif;letter-spacing:-.06em}
html[lang="ar"] .tm-mid{font:400 40px/1.1 'Amiri',serif}
.cap-tm .roll{filter:blur(.6px)}
/* rel: garis 1px + tanda skala (tiap 2.5%, utama tiap 25%) sebagai latar; isian putih + titik di hujungnya */
.tm-rail{position:relative;height:24px;margin:26px 0 8px;
  background:linear-gradient(var(--tm-line),var(--tm-line)) 0 12px/100% 1px no-repeat,
    repeating-linear-gradient(to right,rgba(255,255,255,.3) 0 1px,transparent 1px 25%) 0 7px/calc(100% - 1px) 11px no-repeat,
    repeating-linear-gradient(to right,rgba(255,255,255,.14) 0 1px,transparent 1px 2.5%) 0 10px/calc(100% - 1px) 5px no-repeat}
html[dir="rtl"] .tm-rail{transform:scaleX(-1)}
.tm-fill{position:absolute;left:0;top:12px;height:1px;width:var(--w,100%);background:#fff;transition:width 1.1s var(--tm-ease)}
.tm-fill::after{content:"";position:absolute;right:-3px;top:-3px;width:7px;height:7px;border-radius:50%;background:#fff}
.tm-rows{margin:0;padding:0;list-style:none}
.tm-rows li{display:grid;grid-template-columns:28px 64px minmax(0,1fr) auto;column-gap:16px;align-items:baseline;padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.08);transition:opacity .5s,clip-path .7s var(--tm-ease)}
.tm-rows li:last-child{border-bottom:0}
html[lang="ar"] .tm-rows li{grid-template-columns:28px 64px minmax(0,1fr) auto}
.tm-v{min-width:0;font:400 19px/36px var(--font);color:#fff}
.tm-chip [lang="ar"],html[lang="ar"] .tm-chip{font-family:'Amiri',serif;font-size:22px;line-height:36px}
.tm-or{margin-inline:6px}
.tm-c{font:300 22px/1 'Inter Tele',var(--font);color:#fff;text-align:end}
html[lang="ar"] .tm-c{font:400 24px/1.4 'Amiri',serif}
/* main (capabilities.js): baris belum tiba tersembunyi oleh clip-path, baris yang dikira putih penuh, sebelumnya malap */
.cap-tm.run .tm-rows li{clip-path:inset(-20% 100% -20% 0);opacity:.42}
html[dir="rtl"] .cap-tm.run .tm-rows li{clip-path:inset(-20% 0 -20% 100%)}
.cap-tm.run .tm-rows li.in,html[dir="rtl"] .cap-tm.run .tm-rows li.in{clip-path:inset(-20% 0 -20% 0)}
.cap-tm.run .tm-rows li.now{opacity:1}
@media(prefers-reduced-motion:reduce){.tm-fill,.tm-rows li{transition:none}}
@media(max-width:900px){
  .cap-steps-4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .cap-page .spc-hero{padding-bottom:56px}
  /* telefon: tiada bingkai tetingkap; composer dan popover app terus atas kanvas halaman */
  .cap-window{overflow:visible;border:0;border-radius:0;background:none}
  .cap-window-bar{display:none}
  .cap-window .cap-stage{aspect-ratio:auto}
  .cap-example{margin-top:40px}
  /* hero bertindan: segmen kemajuan (boleh diketuk) dan kapsyen langkah aktif sahaja, seperti kanvas .pjc */
  .cap-steps,.cap-steps-4{display:flex;gap:6px;margin-top:18px}
  .cap-steps li{flex:1;min-width:0}
  .cap-steps button{height:24px;padding:0;border:0}
  .cap-steps button > b,.cap-steps button > span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
  .cap-bar{top:50%;height:3px;margin-top:-1.5px;border-radius:2px}
  .cap-steps button::before{content:"";position:absolute;inset-inline:0;top:50%;height:3px;margin-top:-1.5px;border-radius:2px;background:var(--line)}
  .cap-now{display:block;min-height:5.2em;margin-top:10px;transition:opacity .18s}
  .cap-now.swap{opacity:0}
  .cap-now b{display:block;color:var(--ink);font:600 17px/1.4 var(--font-display)}
  .cap-now span{display:block;margin-top:4px;color:var(--copy);font-size:15px;line-height:1.6}
  html[lang="ar"] .cap-now b{font-size:19px;line-height:1.6}
  html[lang="ar"] .cap-now span{font-size:16.5px;line-height:1.8}
  .cap-comparison{font-size:13.5px}
  .cap-comparison :is(th,td){padding:12px 8px}
  .cap-comparison thead th:first-child{width:24%}
  .cap-eq-split{grid-template-columns:minmax(0,1fr);gap:32px}
  html[data-theme="light"] .cap-tm{padding:28px 20px 20px;border-radius:14px}
  .tm-rows li,html[lang="ar"] .tm-rows li{grid-template-columns:24px 52px minmax(0,1fr) auto;column-gap:12px}
  .tm-v{font-size:17px}
  .tm-chip [lang="ar"],html[lang="ar"] .tm-chip{font-size:20px}
}

/* mockup hero tanpa tetingkap (?hero=a|b): app sebenar terapung atas kanvas halaman */

/* ── Hero /memory/ · G1X «ejen yang matang» (capabilities.js memoryStory): cerita dalam iframe demo, bukan skrin demo.
   Tinggi iframe diukur oleh skrip (tahap akhir). Gelap sahaja: pada tema cerah ia duduk dalam panel gelap. ── */
.cap-story{position:relative;margin-top:80px}
.cap-story-frame{display:block;width:100%;height:470px;border:0;background:transparent;color-scheme:dark;pointer-events:none;opacity:0;transition:opacity .6s ease}
.cap-story-frame.on{opacity:1}
html[data-theme="light"] .cap-story{padding:44px 48px 36px;border-radius:16px;background:#0e0e10}
@media(max-width:760px){
  .cap-story{margin-top:48px}
  .cap-story-frame{height:1010px}
  html[data-theme="light"] .cap-story{padding:28px 20px 20px;border-radius:14px}
}
@media(prefers-reduced-motion:reduce){.cap-story-frame{transition:none}}