/* Enjin DUNIA, gaya jemputan cat air. Warna HANYA lewat var() dari /t/<tema>/tema.css (dimuat dulu). Cerah sahaja.
   Asal site/public/css/app.css (page live adam-rara). Beza: cop satu keping, bab bersyarat, galeri, jalur, status.
   Susun atur: lajur 480px di tengah, scene lukisan 100svh dengan teks di sepertiga atas atas selubung krim. */

@font-face{font-family:"Pinyon Script";src:url(/fonts/pinyon-latin.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Amiri";src:url(/fonts/amiri-arabic.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+0870-08FF,U+200C-200E,U+FB50-FDFF,U+FE70-FEFC}

/* ---------- ASAS ---------- */
html{background:var(--bg);color-scheme:light;scroll-behavior:smooth;scroll-padding-top:0}
html.mo{scroll-behavior:auto}
html.is-locked,html.is-locked body{overflow:hidden;overscroll-behavior:none}
body{background:transparent;color:var(--ink-soft);min-height:100svh}
.page-bg{display:none}
.app{position:relative;width:min(100%,var(--col));margin-inline:auto;background:var(--bg);overflow-x:clip;min-height:100svh}
@media (min-width:600px){
  .page-bg{display:block;position:fixed;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;z-index:-1;pointer-events:none}
  .app{box-shadow:var(--sh-col)}
}
.ico{width:1.1em;height:1.1em;flex:none}
.btn{gap:.55em}
.btn--gold{background:var(--gold-text);color:var(--on-ink)}
.btn--ghost{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}
@media (hover:hover) and (pointer:fine){
  .btn--gold:hover{background:var(--ink)}
  .btn--ghost:hover{background:var(--tint);color:var(--ink)}
}
.btn:active{scale:.97}
.btn{transition:background-color .2s var(--ease-out),color .2s var(--ease-out),scale .15s var(--ease-out)}

/* hiasan garis rambut */
.orn{display:block;width:72px;height:1px;background:linear-gradient(90deg,var(--veil-none),var(--gold),var(--veil-none));margin:.35rem auto}

/* tipografi bersama */
.eyebrow{font:500 .7rem/1.3 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:0}
.names{font:400 clamp(3.1rem,2.4rem + 3.4vw,3.8rem)/1.25 var(--f-script);color:var(--gold-name);letter-spacing:0;margin:0;padding-inline:.2em}
.sec-h{font:500 clamp(2rem,1.7rem + 1.6vw,2.4rem)/1.08 var(--f-display);color:var(--ink);margin:0;letter-spacing:-.005em}
.sec-title{font:italic 500 clamp(2.15rem,1.8rem + 1.8vw,2.6rem)/1.05 var(--f-display);color:var(--gold-name);margin:0}
.prose{font:500 1.14rem/1.6 var(--f-display);color:var(--ink-soft);max-width:24rem;margin-inline:auto;text-wrap:pretty}
.prose--sm{font-size:1.06rem}

/* ---------- SCENE ----------
   Kotak lukisan setinggi skrin (100svh) dilabuh di BAWAH seksyen. Teks di atas, jatuh atas langit lukisan.
   Teks panjang = seksyen jadi lebih tinggi dan kawasan atas jadi kertas krim, jadi watak/bangunan tak ditutup teks.
   --clear = ruang lukisan yang mesti nampak di bawah teks, ikut komposisi setiap scene. */
.scene{position:relative;min-height:100svh;padding-bottom:var(--clear,58svh);isolation:isolate;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg)}
.scene__art{position:absolute;left:0;right:0;bottom:0;height:100svh;z-index:-3;overflow:hidden}
.scene__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%;transform-origin:var(--kb-o,50% 70%);backface-visibility:hidden}
.scene__veil{position:absolute;left:0;right:0;bottom:0;height:100svh;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,var(--veil-strong) var(--v1,22%),var(--veil-mid) var(--v2,30%),var(--veil-soft) var(--v3,38%),var(--veil-none) var(--v4,48%))}
.scene__deco{position:absolute;inset:0;z-index:-1;pointer-events:none}
.scene::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--veil-none),var(--bg))}
.scene__fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.scene__text{position:relative;z-index:1;width:100%;padding:clamp(3rem,8svh,5rem) var(--gutter) 0;display:grid;justify-items:center;gap:.55rem}

.deco{position:absolute;height:auto;max-width:none;pointer-events:none;will-change:transform}
/* hiasan kertas di bawah kandungan (.paper isolate), bunga tak pernah tutup butang/teks bila gerak dimatikan */
.paper > .deco{z-index:-1}
.deco--bl{left:-14%;bottom:-6%;width:50%}
.deco--br{right:-12%;bottom:-4%;width:54%}
.deco--tr{right:-12%;top:-28px;width:44%;scale:-1 -1}
.deco--bl2{left:-14%;bottom:-5%;width:44%}
.deco--gl{left:-8%;top:-6px;width:min(58%,280px)}
.deco--gr{right:-8%;top:-6px;width:min(58%,280px);scale:-1 1}

/* ---------- BAB (scene berpin, rasa video) ----------
   Asas (tanpa .mo: reduced-motion, GSAP gagal, tiada JS) = seksyen statik, lukisan dilabuh bawah, teks di atas krim,
   --clear ikut kedudukan kepala watak / bumbung. .mo (boot.js) = bab setinggi --bab-h, .pentas sticky 100svh, dan app.js
   gerakkan kamera (.cam), lapisan deco dan teks ikut skrol (GSAP ScrollTrigger scrub). Transform + opacity + clip-path sahaja.
   Lapisan dalam pentas: cam (L0) > selubung/senja/veil > garland (L1) > teks (L2) > deco depan (L3) > kelopak, rama-rama (L4) > tirai. */
.bab{position:relative;background:var(--bg)}
.pentas{position:relative;isolation:isolate;overflow:hidden;min-height:100svh;padding-bottom:var(--clear,58svh);display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bg)}
.pentas::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:9%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,var(--veil-none),var(--bg))}
.cam{position:absolute;left:0;right:0;bottom:0;height:100svh;z-index:-3;overflow:hidden}
.cam__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 100%;backface-visibility:hidden}
.cam__glow,.pentas__selubung,.pentas__senja,.tirai{display:none}
.pentas__veil{position:absolute;left:0;right:0;bottom:0;height:100svh;z-index:-2;pointer-events:none;
  background:linear-gradient(180deg,var(--bg) 0%,var(--veil-strong) var(--v1,22%),var(--veil-mid) var(--v2,30%),var(--veil-soft) var(--v3,38%),var(--veil-none) var(--v4,48%))}
.pentas__text{position:relative;z-index:1;width:100%;padding:clamp(3rem,8svh,5rem) var(--gutter) 0;display:grid;justify-items:center;gap:.55rem}
.lap{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pentas__fx{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.bab--kisah{--clear:70svh;--v1:22%;--v2:28%;--v3:32%;--v4:37%}
.bab--rumah{--clear:68svh;--v1:22%;--v2:30%;--v3:36%;--v4:44%}
.bab--masjid{--clear:62svh;--v1:20%;--v2:28%;--v3:35%;--v4:44%}
.bab--venue{--clear:72svh;--v1:20%;--v2:27%;--v3:33%;--v4:41%}
.bab--penutup{--clear:68svh;--v1:24%;--v2:32%;--v3:38%;--v4:46%}
.bab--rumah .pentas__text{padding-top:clamp(2.75rem,7svh,4.5rem);gap:.45rem}
/* ayat, kertas krim + garland (tiada lukisan) */
.pentas--kertas{min-height:0;padding:calc(var(--sec-y) + 4.5rem) var(--gutter) var(--sec-y)}
.pentas--kertas::after{display:none}
.pentas--kertas .pentas__text{padding:0;gap:.8rem}
.ayat__kepala{display:grid;justify-items:center;gap:.35rem}
.arabic__l{display:block}
.aturcara__h{margin-top:1.1rem}

/* ---------- BAB BERPIN (.mo) ---------- */
.mo .bab{height:var(--bab-h,280svh)}
.mo .bab--ayat{--bab-h:200svh}
.mo .bab--kisah{--bab-h:280svh}
.mo .bab--rumah{--bab-h:320svh}
.mo .bab--masjid{--bab-h:220svh}
.mo .bab--venue{--bab-h:260svh}
.mo .bab--penutup{--bab-h:280svh}
.mo .pentas{position:sticky;top:0;height:100svh;min-height:0;padding:0;display:block}
.mo .pentas::after{display:none}
.mo .cam{top:0;right:auto;bottom:auto;width:max(100%,calc(100svh * 2 / 3));height:auto;aspect-ratio:2/3;z-index:0;overflow:visible;transform-origin:0 0;will-change:transform}
.mo .cam__img{object-position:50% 50%;-webkit-mask-image:linear-gradient(180deg,transparent 0,var(--ink) 11%);mask-image:linear-gradient(180deg,transparent 0,var(--ink) 11%)}
.mo .cam__glow{display:block;position:absolute;left:10%;top:52%;width:80%;height:24%;opacity:0;mix-blend-mode:screen;pointer-events:none}
.mo .cam__glow::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--gold) 0%,var(--gold-soft) 38%,var(--veil-none) 100%)}
.mo .pentas__selubung{display:block;position:absolute;inset:0;z-index:1;background:var(--bg);opacity:0;pointer-events:none}
.mo .pentas__senja{display:block;position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,var(--ink) 0%,var(--gold-text) 100%);opacity:0;pointer-events:none}
.mo .pentas__veil{top:0;bottom:auto;height:100%;z-index:1}
.mo .lap{z-index:2}
.mo .pentas__text{position:absolute;left:0;right:0;top:0;z-index:3;padding-top:clamp(2.6rem,7svh,4.5rem)}
.mo .lap--depan{z-index:4}
.mo .pentas__fx{z-index:5}
.mo .tirai{display:block;position:absolute;inset:0;z-index:6;background:var(--bg);opacity:0;pointer-events:none}
.mo .lap .deco{transform-origin:50% 0}
.mo .lap--depan .deco{transform-origin:50% 100%}
.mo .bab--kisah .deco--bl{width:42%;left:-12%}
.mo .bab--kisah .deco--br{width:46%;right:-12%}
.mo .bab--ayat .pentas{background:var(--bg)}
.mo .bab--ayat .pentas__text{padding:clamp(5.25rem,14svh,7.5rem) var(--gutter) 0;gap:.7rem}
.mo .bab--ayat .lap--garland{z-index:2}
.mo .bab--rumah .pentas__text{padding-top:clamp(2.4rem,6svh,4rem)}
.mo .bab--venue{--v1:46%;--v2:56%;--v3:64%;--v4:75%}
.mo .bab--masjid{--v1:22%;--v2:30%;--v3:38%;--v4:48%}
.mo .bab--kisah{--v1:20%;--v2:30%;--v3:38%;--v4:50%}
.mo .bab--penutup{--v1:26%;--v2:36%;--v3:44%;--v4:56%}
.mo .bab--rumah{--v1:30%;--v2:42%;--v3:52%;--v4:64%}
/* teks bab dikawal GSAP dalam mod gerak, jangan biar transition data-rv berlawan */
.mo .bab [data-rv]{opacity:1;translate:none;filter:none;transition:none}
.mo .bab .names,.mo .bab .j-name{padding-inline:.3em}
.mo .fly--kisah{animation:none!important;opacity:0}

/* ---------- DUNIA (.mo), satu filem berterusan (DUNIA-SPEC) ----------
   Enam lukisan bertindan dalam .dunia (tetap di belakang lajur), kamera setiap lukisan digerak skrol oleh app.js (dunia()),
   peralihan larut langit ke langit tanpa krim rata. Bab dan kertas jadi lutsinar, teks terapung atas lukisan dengan
   kabus krim setempat (bukan selubung penuh lebar). Seksyen interaktif = kad kaca atas lukisan majlis kabur (gred magick).
   Lapisan: .dunia (z0: lukisan > cahaya > garland > bucu depan) < main (z1: teks, kad kaca, rama-rama) < .dunia-depan (z3: kelopak) < nav. */
.dunia,.dunia-depan{display:none}
.mo .dunia{display:block;position:fixed;top:0;bottom:0;left:50%;translate:-50% 0;width:min(100%,var(--col));z-index:0;overflow:hidden;
  background:var(--bg);pointer-events:none;isolation:isolate}
.mo .dunia__s{position:absolute;inset:0;opacity:0;visibility:hidden}
.mo .dunia__s[data-s="cover"]{opacity:1;visibility:visible}
.mo .dunia__cam{position:absolute;left:0;top:0;width:max(100%,calc(100svh * 2 / 3));aspect-ratio:2/3;transform-origin:0 0;will-change:transform}
.mo .dunia__img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;backface-visibility:hidden}
.mo .dunia__kabur{position:absolute;inset:-3%;width:106%;height:106%;max-width:none;object-fit:cover}
.mo .dunia .cam__glow{display:block;left:12%;top:50%;width:76%;height:22%}
.mo .dunia__cahaya{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(120% 62% at 80% 4%,var(--cahaya) 0%,var(--cahaya-0) 70%),linear-gradient(0deg,var(--cahaya-bawah) 0%,var(--cahaya-0) 34%)}
.mo .dunia__garland,.mo .dunia__bucu{position:absolute;inset:0;pointer-events:none}
.mo .dunia__bucu{bottom:calc(var(--nav-h) + env(safe-area-inset-bottom) - 18px)}
.mod-video .dunia__bucu{bottom:0}
.mo .dunia__garland .deco{transform-origin:50% 0}
.mo .dunia__garland .deco--gr{scale:none}
.mo .dunia__bucu .deco{transform-origin:50% 100%}
.mo .dunia__bucu .deco--bl{width:44%;left:-12%;bottom:-5%}
.mo .dunia__bucu .deco--br{width:56%;right:-12%;bottom:-4%}
.mo .dunia-depan{display:block;position:fixed;top:0;bottom:0;left:50%;translate:-50% 0;width:min(100%,var(--col));z-index:3;overflow:hidden;pointer-events:none}
.mo .dunia-depan .petals--b{opacity:0}
@media (prefers-reduced-motion:no-preference){
  .mo .dunia-depan .petal{animation-play-state:running}
  .mo .dunia .cam__glow::after{animation:denyut 3.4s var(--ease-inout) infinite alternate}
}

/* bab + kertas lutsinar, bab bertindih (bab seterusnya melekat tepat bila bab ini habis, larut dikawal dunia()) */
.mo main{position:relative;z-index:1}
.mo .bab,.mo .pentas,.mo .bab--ayat .pentas,.mo .paper{background:transparent}
.mo .bab + .bab,.mo .bab + .majlis{margin-top:-100svh}
.mo .bab .cam,.mo .pentas__veil,.mo .pentas__selubung,.mo .pentas__senja,.mo .tirai,.mo .bab .lap,.mo .bab .pentas__fx .petals,
.mo .paper > .deco{display:none}
.mo .pentas__fx .fly{animation:none!important;opacity:0}
.fly--kiri{offset-path:path("M 560 520 C 420 560, 380 380, 280 430 S 140 300, 60 340 S -20 260, -80 230")}

/* teks atas lukisan: dakwat pekat, kabus krim setempat + halo nipis */
.mo .bab .pentas__text{color:var(--ink-dunia)}
.mo .bab :is(.sec-h,.arabic,.j-host,.ev-date,.ev-place,.ev-venue,.p-fam,.aturcara__a){color:var(--ink-dunia)}
.mo .bab :is(.prose,.terjemahan,.j-line,.j-dengan,.ev-time,.ev-addr,.p-jumpa){color:var(--ink-soft-dunia)}
.mo .bab :is(.eyebrow,.rujukan,.aturcara__t){color:var(--gold-dunia)}
.mo .bab :is(.names,.j-name,.sec-title,.bismillah,.j-salam){color:var(--gold-name-dunia)}
.mo .bab .ev-note{color:var(--sage-dunia)}
.mo .bab .pentas__text :is(p,h2,h3,li){text-shadow:var(--halo)}
.mo .bab .aturcara,.mo .bab .aturcara li{border-color:var(--garis-dunia)}
.mo .bab .aturcara{max-width:19.5rem}
.mo .kabus{isolation:isolate}
.mo .bingkai,.mo .kumpul{position:relative}
.mo .kabus::before{content:"";position:absolute;inset:-16% -10% -24%;z-index:-1;pointer-events:none;opacity:var(--ko,0);
  background:radial-gradient(closest-side,var(--kabus) 0%,var(--kabus) 56%,var(--kabus-mid) 80%,var(--kabus-0) 100%)}
.mo .bingkai-grup{display:grid;width:100%}
.mo .bingkai{grid-area:1/1;display:grid;justify-items:center;gap:.7rem;align-content:start}
.mo .kumpul{display:grid;justify-items:center;gap:.55rem;width:100%}
.mo .bab--kisah .pentas__text{gap:1.1rem}
.mo .bab--ayat .bingkai[data-f="2"]{padding-top:.6rem}
.mo .bab--penutup .bingkai{gap:.55rem}
.mo .bab--penutup .bingkai[data-f="2"]{padding-top:1.4rem}

/* seksyen interaktif: kad kaca krim lutsinar + garis rambut emas atas lukisan majlis kabur */
.kaca{display:contents}
.mo .paper{padding-inline:16px}
.mo .kaca{--paper:var(--kaca-isi);display:grid;justify-items:center;gap:.8rem;width:100%;max-width:26rem;padding:1.9rem 1.15rem 1.6rem;border-radius:calc(var(--r) * 2);
  background:var(--kaca);-webkit-backdrop-filter:blur(8px) saturate(1.08);backdrop-filter:blur(8px) saturate(1.08);
  box-shadow:inset 0 0 0 1px var(--kaca-garis),var(--sh-kaca)}
.mo .paper--majlis .kaca{gap:1.1rem}
.mo .kaca :is(.sec-h,.cd__n,.bank__no,.uc__nama,.hub__nama,.field__l,.qr__label,.aturcara__a){color:var(--ink-dunia)}
.mo .kaca :is(.prose,.cd__pre,.cd__post,.uc__txt,.uc__masa,.hub__peranan,.bank__owner,.nota){color:var(--ink-soft-dunia)}
.mo .kaca :is(.eyebrow,.cd__u,.uc__count,.bank__name){color:var(--gold-dunia)}
.mo .kaca :is(.sec-title,.cd__msg){color:var(--gold-name-dunia)}
.mo .paper--rsvp{padding-top:var(--sec-y)}
.mo .paper--ucapan{padding-top:.4rem}
.mo .paper--kaut{padding-top:var(--sec-y)}

/* footer kecil atas lukisan penutup (bertindih hujung bab penutup) */
.mo .foot{position:relative;z-index:1;background:transparent;margin-top:calc(-1 * (4.04rem + var(--nav-h) + env(safe-area-inset-bottom)));
  padding:1rem var(--gutter) calc(var(--nav-h) + 1.2rem + env(safe-area-inset-bottom))}
.mo .foot p{display:block;width:fit-content;margin-inline:auto;padding:.4rem .9rem;border-radius:var(--r-pill);background:var(--kabus);color:var(--ink-soft-dunia);text-shadow:var(--halo)}

/* ---------- COVER ---------- */
.cover{justify-content:space-between;padding-bottom:0}
.cover .scene__art,.cover .scene__veil{top:0;height:auto}
.cover .scene__img{object-position:50% 60%}
.cover__art{transform-origin:50% 56%}
.veil--cover{--v1:20%;--v2:29%;--v3:37%;--v4:46%;background:linear-gradient(180deg,var(--veil-strong) 0%,var(--veil-strong) var(--v1),var(--veil-mid) var(--v2),var(--veil-soft) var(--v3),var(--veil-none) var(--v4))}
.cover::after{display:none}
.cover::before{content:"";position:absolute;left:0;right:0;bottom:0;height:34%;z-index:-2;pointer-events:none;background:linear-gradient(0deg,var(--veil-soft),var(--veil-none))}
.cover__top{position:relative;z-index:1;width:100%;padding:clamp(2.6rem,7.5svh,4.5rem) var(--gutter) 0;display:grid;justify-items:center;gap:.65rem}
.monogram{position:relative;width:84px;height:110px;display:grid;place-items:center;margin:.3rem 0 .1rem;
  border:1px solid var(--gold);border-radius:var(--r-pill) var(--r-pill) var(--r-sm) var(--r-sm)}
.monogram::before{content:"";position:absolute;inset:5px;border:1px solid var(--gold-soft);border-radius:inherit}
.monogram span{font:italic 500 1.75rem/1 var(--f-display);color:var(--gold-name);white-space:nowrap;padding-top:.5rem}
.cover__date{font:500 1.16rem/1.3 var(--f-display);color:var(--ink);letter-spacing:.02em;margin:0}
.cover__guest{position:relative;z-index:1;width:calc(100% - 36px);margin:0 18px calc(18px + env(safe-area-inset-bottom));padding:16px 18px 18px;
  display:grid;justify-items:center;gap:.3rem;border-radius:var(--r);background:var(--kaca);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:inset 0 0 0 1px var(--kaca-garis),var(--sh-kaca)}
.cover__to{font:500 .68rem/1.2 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:0}
.cover__name{font:500 1.42rem/1.22 var(--f-display);color:var(--ink);margin:0 0 .45rem;overflow-wrap:anywhere;max-width:100%}
.cover__btn{min-height:46px;padding:12px 26px}

/* cover jadi overlay hanya bila JS hidup (tanpa JS, cover ialah seksyen biasa) */
.js .cover{position:fixed;top:0;bottom:0;left:50%;translate:-50% 0;width:min(100%,var(--col));z-index:100;min-height:0;height:100svh}
.js .cover[hidden]{display:none}
.js .cover__btn{pointer-events:auto}

/* ---------- BUKAAN, sampul + cop lilin ----------
   Geometri dari public/img/bukaan/geometri.json (kanvas 1100x1263, tutup + buka sama kedudukan): tepi atas badan
   (engsel flap) y 44%, garis klip kad 44.58%, hujung flap tertutup = pusat cop 49.96% 83.97%. Sampul dibina semula
   dari lapisan: badan buka (dalam) < badan tutup bertakuk < flap tertutup (segi tiga), flap buka di atas engsel.
   Kad di luar pentas (klip garis engsel dikira JS), jadi boleh membesar penuh skrin selepas keluar. */
.bukaan{display:grid;grid-template-rows:auto 1fr auto;grid-template-columns:100%;justify-content:stretch;justify-items:center;align-items:start;text-align:center;
  overflow:hidden;isolation:isolate;background:var(--bg)}
.bukaan__latar{position:absolute;inset:0;z-index:-1;overflow:hidden;transform-origin:50% 56%}
.bukaan__kabur{position:absolute;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover}
.bukaan__tajam{position:absolute;inset:0;opacity:0}
.bukaan__tajam .scene__img{object-position:50% 60%;animation:none}
.bukaan__redup{position:absolute;inset:0;
  background:linear-gradient(180deg,var(--veil-strong) 0%,var(--veil-mid) 16%,var(--veil-none) 34%),var(--scrim-bukaan)}
.bukaan .scene__fx{z-index:1}
.bukaan__atas{position:relative;z-index:3;padding:clamp(1.9rem,5.5svh,3.4rem) var(--gutter) 0;gap:.35rem}
.bukaan__atas .names{font-size:clamp(2.8rem,2.2rem + 3vw,3.4rem);line-height:1.2}
.bukaan__pentas{position:relative;z-index:2;align-self:center;width:min(92%,420px,48svh);top:-14svh}
.sampul{position:relative;width:100%;aspect-ratio:1100/1263;perspective:1100px;container-type:inline-size;cursor:pointer;
  rotate:-2.5deg;-webkit-tap-highlight-color:transparent}
.mo .sampul{rotate:none}
.sampul::before{content:"";position:absolute;left:3%;right:3%;top:46%;bottom:2.5%;border-radius:10px;box-shadow:var(--sh-sampul);pointer-events:none}
.sampul__lapis{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sampul__flap-buka{clip-path:inset(0 0 55.42% 0);transform-origin:50% 44.58%;opacity:0}
.sampul__badan-buka{clip-path:inset(44.4% 0 0 0)}
.sampul__badan-tutup{clip-path:polygon(0 44%,1.27% 44%,49.96% 83.97%,98.65% 44%,100% 44%,100% 100%,0 100%)}
.sampul__flap{clip-path:polygon(0.9% 43.4%,99% 43.4%,49.96% 84.6%);transform-origin:50% 44%}
.sampul__flap-img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.sampul__alamat{position:absolute;left:25%;right:25%;top:47.6%;display:grid;justify-items:center;gap:.15em}
.sampul__alamat .cover__to{font-size:.6rem;font-size:2.7cqw;letter-spacing:.24em}
.sampul__alamat .cover__name{font-size:1rem;font-size:5cqw;line-height:1.18;margin:0;max-width:100%;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.cop{position:absolute;left:36.46%;top:72.1%;width:27%;aspect-ratio:400/403;container-type:inline-size;z-index:2}
.cop__glow{position:absolute;inset:-24%;pointer-events:none}
.cop__glow::before{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(closest-side,var(--cop-glow),var(--veil-none))}
/* cop satu keping, satu monogram (Adam 2 Nov, jangan retak atau pecah dua) */
.cop__img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.cop__mono{position:absolute;inset:0;display:grid;place-items:center;padding-top:2%;
  font:italic 600 1rem/1 var(--f-display);font-size:17cqw;color:var(--cop-teks);letter-spacing:.01em;white-space:nowrap;
  text-shadow:-1px -1px 0 var(--emboss-hi),1px 1.5px 1px var(--emboss-lo)}
.bukaan__bawah{position:relative;z-index:3;display:grid;justify-items:center;gap:.55rem;padding:0 var(--gutter) calc(20px + env(safe-area-inset-bottom))}
.bukaan__petunjuk{font:italic 500 1.05rem/1.3 var(--f-display);color:var(--on-ink);margin:0;text-shadow:0 1px 6px var(--emboss-lo)}
.kad__celah{position:absolute;inset:0;z-index:4;pointer-events:none}
.kad{position:absolute;left:50%;top:50%;width:min(calc(100% - 28px),calc((100svh - 56px) / 1.4703));aspect-ratio:1024/1506;
  container-type:inline-size;opacity:0;translate:-50% -50%}
.mo .kad{translate:none}
.kad__img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.kad__isi{position:absolute;left:14%;right:14%;top:30%;bottom:30%;display:grid;align-content:center;justify-items:center;gap:3.2cqw}
.kad .monogram{width:20cqw;height:26cqw;margin:0}
.kad .monogram span{font-size:7.4cqw}
.kad .names{font-size:2.8rem;font-size:11.6cqw;line-height:1.2;padding-inline:.12em;white-space:nowrap}
.kad .cover__date{font-size:1.1rem;font-size:4.9cqw}

/* ---------- KERTAS ---------- */
.paper{position:relative;isolation:isolate;overflow:hidden;padding:var(--sec-y) var(--gutter);text-align:center;display:grid;justify-items:center;gap:.8rem;background:var(--bg)}
.paper--majlis{padding-top:calc(var(--sec-y) * .55);gap:1.1rem}
.paper--rsvp{background:var(--tint);padding-top:calc(var(--sec-y) + 3.5rem)}
.paper--ucapan{background:var(--tint);padding-top:1rem}
.paper--kaut{padding-top:calc(var(--sec-y) + 4.5rem)}
.paper--kaut .deco--gr{width:min(46%,220px)}
.paper--hubungi{background:var(--bg)}

/* ayat */
.bismillah{font:400 1.7rem/1.9 var(--f-arab);color:var(--gold-name);margin:0}
.arabic{font:400 1.5rem/2.15 var(--f-arab);color:var(--ink);margin:.2rem 0 .4rem;max-width:26rem}
.terjemahan{font:italic 500 1.06rem/1.62 var(--f-display);color:var(--ink-soft);max-width:25rem;margin:0;text-wrap:pretty}
.rujukan{font:500 .7rem/1.3 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:.6rem 0 0}

/* jemputan formal */
.j-salam{font:italic 500 1.24rem/1.35 var(--f-display);color:var(--gold-name);margin:0 0 .2rem;max-width:20rem}
.j-line{font:500 1.06rem/1.5 var(--f-display);color:var(--ink-soft);margin:0;max-width:23rem;text-wrap:pretty}
.j-host{font:600 1.18rem/1.3 var(--f-display);color:var(--ink);margin:0}
.j-jemput{margin-top:.25rem}
.j-name{font:400 clamp(1.85rem,1.5rem + 1.6vw,2.2rem)/1.3 var(--f-script);color:var(--gold-name);margin:.2rem 0 0;max-width:22rem}
.j-dengan{font:italic 500 1rem/1.2 var(--f-display);color:var(--ink-soft);margin:0}
.j-small{font-size:.98rem}

/* akad, majlis */
.ev-date{font:600 1.32rem/1.25 var(--f-display);color:var(--ink);margin:.1rem 0 0}
.ev-time{font:500 1.12rem/1.3 var(--f-display);color:var(--ink-soft);margin:0}
.ev-place,.ev-venue{font:600 1.2rem/1.3 var(--f-display);color:var(--ink);margin:.35rem 0 0;max-width:20rem}
.ev-venue{font-size:1.35rem}
.ev-addr{font:400 .9rem/1.5 var(--f-text);color:var(--ink-soft);margin:0;max-width:18rem}
.ev-note{font:italic 500 1rem/1.3 var(--f-display);color:var(--sage-text);margin:.2rem 0 0}

.aturcara{list-style:none;margin:0;padding:0;width:100%;max-width:22rem;border-top:1px solid var(--line)}
.aturcara li{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;padding:.8rem .2rem;border-bottom:1px solid var(--line)}
.aturcara__t{font:500 .82rem/1.3 var(--f-text);color:var(--gold-text);letter-spacing:.02em;text-align:left;font-variant-numeric:tabular-nums}
.aturcara__a{font:500 1.12rem/1.3 var(--f-display);color:var(--ink);text-align:right}

.lokasi{width:100%;max-width:22rem;display:grid;gap:.7rem;margin-top:.6rem;scroll-margin-top:30vh}
.lokasi__row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.lokasi__row .btn{width:100%}
.kal{position:relative}
.kal__menu{margin-top:.5rem;display:grid;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-float);overflow:hidden}
.kal__menu[hidden]{display:none}
.kal__opt{display:flex;align-items:center;gap:.6rem;min-height:48px;padding:.75rem 1rem;font:500 .92rem/1.2 var(--f-text);color:var(--ink);text-decoration:none}
.kal__opt+.kal__opt{border-top:1px solid var(--line)}
.kal__opt .ico{color:var(--gold-text)}
@media (hover:hover){.kal__opt:hover{background:var(--tint)}}

.cd{width:100%;max-width:22rem;margin-top:1.2rem}
.cd__pre,.cd__post{font:italic 500 1.12rem/1.3 var(--f-display);color:var(--ink-soft);margin:0}
.cd__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;margin:.7rem 0}
.cd__box{display:grid;justify-items:center;gap:.15rem;padding:.75rem .2rem .65rem;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.cd__n{font:500 2.1rem/1 var(--f-display);color:var(--ink);font-variant-numeric:lining-nums tabular-nums}
.cd__u{font:500 .64rem/1.2 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-text)}
.cd__msg{font:italic 500 1.5rem/1.3 var(--f-display);color:var(--gold-name);margin:0}
.cd__run[hidden],.cd__msg[hidden]{display:none}

/* ---------- RSVP ---------- */
.form{width:100%;max-width:24rem;display:grid;gap:1.05rem;margin-top:.6rem;text-align:left}
.field{display:grid;gap:.45rem;margin:0;padding:0;border:0;min-width:0}
.field[hidden]{display:none}
.field__l{font:500 .78rem/1.3 var(--f-text);letter-spacing:.04em;color:var(--ink);padding:0}
.input{width:100%;min-height:48px;padding:.75rem .9rem;border:0;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong);
  font:400 1rem/1.4 var(--f-text);color:var(--ink);transition:box-shadow .2s var(--ease-out)}
.input::placeholder{color:var(--ink-soft);opacity:.75}
.input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--gold-text)}
.input--area{min-height:112px;resize:vertical}
.pills{display:grid;grid-template-columns:1fr 1fr;gap:.55rem}
.pills--num{grid-template-columns:repeat(5,1fr)}
.pills--n1{grid-template-columns:repeat(1,1fr)}.pills--n2{grid-template-columns:repeat(2,1fr)}.pills--n3{grid-template-columns:repeat(3,1fr)}.pills--n4{grid-template-columns:repeat(4,1fr)}.pills--n5{grid-template-columns:repeat(5,1fr)}.pills--n6{grid-template-columns:repeat(3,1fr)}.pills--n7{grid-template-columns:repeat(4,1fr)}.pills--n8{grid-template-columns:repeat(4,1fr)}.pills--n9{grid-template-columns:repeat(5,1fr)}.pills--n10{grid-template-columns:repeat(5,1fr)}
.pill{position:relative;display:block;cursor:pointer}
.pill input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.pill span{display:flex;align-items:center;justify-content:center;min-height:46px;padding:.6rem .7rem;border-radius:var(--r-pill);background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--line-strong);font:500 .9rem/1.2 var(--f-text);color:var(--ink);text-align:center;transition:background-color .2s var(--ease-out),color .2s var(--ease-out),box-shadow .2s var(--ease-out)}
.pill--num span{font:500 1.2rem/1 var(--f-display);font-variant-numeric:lining-nums tabular-nums;padding:.5rem 0}
.pill input:checked+span{background:var(--gold-text);color:var(--on-ink);box-shadow:none}
.pill input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__err{margin:0;padding:.7rem .9rem;border-radius:var(--r);background:var(--blush-soft);color:var(--danger);font:500 .88rem/1.4 var(--f-text)}
.form__err[hidden]{display:none}
.rsvp-ok{width:100%;max-width:24rem;padding:1.6rem 1.2rem;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);text-align:center}
.rsvp-ok[hidden]{display:none}
.rsvp-ok p{font:italic 500 1.3rem/1.4 var(--f-display);color:var(--ink);margin:0}

/* ---------- UCAPAN ---------- */
.uc__count{font:500 .78rem/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text);margin:0;font-variant-numeric:tabular-nums}
.uc{width:100%;max-width:24rem;display:grid;gap:.6rem;margin-top:.4rem;text-align:left}
.uc__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.uc__list:empty{display:none}
.uc__item{padding:.95rem 1rem;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.uc__item.is-new{animation:ucIn .8s var(--ease-out) both}
.uc__head{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem;margin:0 0 .3rem}
.uc__nama{font:600 1.08rem/1.25 var(--f-display);color:var(--ink);overflow-wrap:anywhere}
.uc__masa{flex:none;font:400 .72rem/1.2 var(--f-text);color:var(--ink-soft)}
.uc__txt{font:400 .92rem/1.55 var(--f-text);color:var(--ink-soft);margin:0;white-space:pre-line;overflow-wrap:anywhere}
.uc__more{justify-self:center}
.uc__more[hidden],.uc__kosong[hidden]{display:none}
.uc__kosong{font:italic 500 1.05rem/1.4 var(--f-display);color:var(--ink-soft);text-align:center;margin:0}
@keyframes ucIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

/* ---------- SALAM KAUT ---------- */
.bank{width:100%;max-width:22rem;display:grid;justify-items:center;gap:.25rem;padding:1.4rem 1.2rem 1.2rem;margin-top:.4rem;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),var(--sh-photo)}
.bank__name{font:500 .7rem/1.3 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--gold-text);margin:0}
.bank__no{font:500 1.9rem/1.2 var(--f-display);color:var(--ink);letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;margin:.1rem 0 0}
.bank__owner{font:500 1.02rem/1.35 var(--f-display);color:var(--ink-soft);margin:0 0 .7rem}
.qr{margin:.6rem 0 0;display:grid;justify-items:center;gap:.6rem}
.qr__box{padding:10px;border-radius:var(--r);background:var(--qr-light);box-shadow:inset 0 0 0 1px var(--line);color:var(--qr-dark)}
.qr__box img{width:150px;height:150px;image-rendering:pixelated}
.qr__label{font:500 .78rem/1.3 var(--f-text);letter-spacing:.06em;color:var(--ink)}
.nota{font:400 .78rem/1.5 var(--f-text);color:var(--ink-soft);max-width:20rem;margin:.4rem 0 0}

/* ---------- HUBUNGI ---------- */
.hub{list-style:none;margin:.4rem 0 0;padding:0;width:100%;max-width:22rem;display:grid;gap:.7rem}
.hub__card{padding:1rem 1rem 1.05rem;border-radius:var(--r);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);display:grid;justify-items:center;gap:.1rem}
.hub__nama{font:600 1.3rem/1.2 var(--f-display);color:var(--ink);margin:0}
.hub__peranan{font:400 .82rem/1.4 var(--f-text);color:var(--ink-soft);margin:0 0 .6rem}
.hub__row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;width:100%}
.hub__row .btn{width:100%;padding-inline:12px}

/* ---------- PENUTUP ---------- */
.p-fam{font:600 1.08rem/1.4 var(--f-display);color:var(--ink);margin:0;max-width:21rem}
.p-jumpa{font:italic 500 1.12rem/1.3 var(--f-display);color:var(--ink-soft);margin:.4rem 0 0}
.names--end{font-size:clamp(2.8rem,2.2rem + 3vw,3.4rem);margin-top:-.1rem}

/* ---------- FOOTER ---------- */
.foot{padding:1.6rem var(--gutter) calc(var(--nav-h) + 1.8rem + env(safe-area-inset-bottom));text-align:center;background:var(--bg)}
.foot p{font:400 .74rem/1.4 var(--f-text);letter-spacing:.06em;color:var(--ink-soft);margin:0}

/* ---------- NAV + MUZIK + TOAST (tetap, ikut lajur) ---------- */
.nav{position:fixed;left:50%;bottom:0;translate:-50% 0;width:min(100%,var(--col));z-index:60;display:grid;grid-template-columns:repeat(5,1fr);
  padding:6px 6px calc(6px + env(safe-area-inset-bottom));background:var(--kaca);-webkit-backdrop-filter:blur(14px) saturate(1.15);backdrop-filter:blur(14px) saturate(1.15);
  box-shadow:0 -1px 0 var(--glass-line);transform:translateY(115%);transition:transform .7s var(--ease-out)}
.nav a{position:relative;display:grid;justify-items:center;align-content:center;gap:4px;min-height:52px;padding:4px 2px;border-radius:var(--r);
  font:500 .64rem/1.1 var(--f-text);letter-spacing:.02em;color:var(--ink-soft);text-decoration:none;text-align:center;transition:color .25s var(--ease-out)}
.nav a .ico{width:21px;height:21px}
.nav a[aria-current="true"]{color:var(--gold-text)}
.nav a[aria-current="true"]::after{content:"";position:absolute;top:2px;left:50%;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold)}
.music{position:fixed;z-index:61;right:max(14px,calc(50% - var(--col) / 2 + 14px));bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom));
  width:46px;height:46px;display:grid;place-items:center;border:0;border-radius:50%;padding:0;cursor:pointer;color:var(--gold-text);
  background:var(--kaca);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px var(--glass-line),var(--sh-float);
  opacity:0;scale:.6;pointer-events:none;transition:opacity .5s var(--ease-out) .3s,scale .5s var(--ease-out) .3s}
.music .ico{width:24px;height:24px;grid-area:1/1}
.music .ico--off{opacity:0}
.music:not(.is-on) .ico--on{opacity:0}
.music:not(.is-on) .ico--off{opacity:1}
.is-open .nav{transform:none}
.is-open .music{opacity:1;scale:1;pointer-events:auto}
.toast{position:fixed;z-index:120;left:50%;bottom:calc(var(--nav-h) + 76px + env(safe-area-inset-bottom));translate:-50% 0;max-width:min(88vw,400px);
  padding:.75rem 1.1rem;border-radius:var(--r);background:var(--toast-bg);color:var(--on-toast);font:500 .86rem/1.4 var(--f-text);text-align:center;
  opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s var(--ease-out),transform .3s var(--ease-out)}
.toast.is-on{opacity:1;transform:none}
.toast:empty{display:none}
.no-nav .toast{bottom:calc(24px + env(safe-area-inset-bottom))}

/* petunjuk skrol selepas cover dibuka, hilang bila mula skrol */
.petunjuk{position:fixed;z-index:59;left:50%;translate:-50% 0;bottom:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));margin:0;
  display:grid;justify-items:center;gap:0;padding:.45rem 1rem .3rem;border-radius:var(--r-pill);background:var(--kaca);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:inset 0 0 0 1px var(--glass-line);
  font:italic 500 1.02rem/1.25 var(--f-display);color:var(--ink);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out)}
.petunjuk__chev{width:20px;height:20px;color:var(--gold-text)}
.is-open .petunjuk{opacity:1;transition-delay:1.6s}
.is-open.is-scrolled .petunjuk{opacity:0;transition-delay:0s}

/* ---------- ZARAH (kelopak) + RAMA-RAMA ---------- */
.petals{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.petal{position:absolute;top:-6%;left:var(--x,50%);width:var(--s,18px);height:auto;max-width:none;opacity:0;will-change:transform,opacity}
.petal:nth-child(1){--x:6%;--s:17px;--d:16s;--dl:-1s;--sw:46px;--r:300deg}
.petal:nth-child(2){--x:18%;--s:13px;--d:19s;--dl:-9s;--sw:-30px;--r:-260deg}
.petal:nth-child(3){--x:31%;--s:20px;--d:15s;--dl:-5s;--sw:38px;--r:340deg}
.petal:nth-child(4){--x:44%;--s:14px;--d:21s;--dl:-14s;--sw:-42px;--r:-300deg}
.petal:nth-child(5){--x:55%;--s:18px;--d:17s;--dl:-3s;--sw:34px;--r:280deg}
.petal:nth-child(6){--x:66%;--s:12px;--d:20s;--dl:-11s;--sw:-36px;--r:-320deg}
.petal:nth-child(7){--x:76%;--s:19px;--d:16s;--dl:-7s;--sw:40px;--r:300deg}
.petal:nth-child(8){--x:86%;--s:14px;--d:22s;--dl:-16s;--sw:-28px;--r:-280deg}
.petal:nth-child(9){--x:93%;--s:16px;--d:18s;--dl:-4s;--sw:-44px;--r:320deg}
.petal:nth-child(10){--x:40%;--s:11px;--d:24s;--dl:-19s;--sw:30px;--r:-340deg}
.fly{position:absolute;top:0;left:0;width:42px;pointer-events:none;opacity:0;offset-rotate:0deg;
  offset-path:path("M -70 560 C 40 480, 90 640, 190 520 S 300 300, 380 360 S 470 260, 560 210")}
.fly img{display:block;width:100%;height:auto;transform-origin:50% 55%}
.fly--kisah{width:36px;offset-path:path("M 560 520 C 420 560, 380 380, 280 430 S 140 300, 60 340 S -20 260, -80 230")}
.fly--penutup{width:38px;offset-path:path("M -70 470 C 60 380, 120 520, 220 420 S 330 220, 420 280 S 500 200, 560 150")}

@media (prefers-reduced-motion:no-preference){
  /* Ken Burns, jalan hanya bila scene dalam viewport (.is-live) */
  .scene__img{animation:kb var(--kb-d,16s) var(--ease-inout) infinite alternate;animation-play-state:paused}
  .is-live .scene__img,.cover .scene__img{animation-play-state:running}
  .petal{animation:fall var(--d,18s) linear var(--dl,0s) infinite;animation-play-state:paused}
  .is-live .petal,.cover .petal{animation-play-state:running}
  .fly{animation:fly var(--fd,26s) var(--ease-inout) var(--fdl,0s) infinite;animation-play-state:paused}
  .fly img{animation:flap .42s var(--ease-inout) infinite alternate}
  .is-live .fly,.cover .fly{animation-play-state:running}
  .fly--cover{--fdl:-6s;--fd:24s}
  .fly--kisah{--fd:28s;--fdl:-4s}
  .fly--penutup{--fd:26s;--fdl:-12s}
  /* teks masuk berperingkat */
  .js [data-rv]{opacity:0;translate:0 26px;filter:blur(6px);
    transition:opacity .9s var(--ease-soft),translate .9s var(--ease-soft),filter .9s var(--ease-soft);transition-delay:calc(var(--i,0) * 120ms)}
  .js [data-rv].is-in{opacity:1;translate:0 0;filter:blur(0)}
}
@keyframes kb{from{transform:scale(1) translate3d(0,0,0)}to{transform:scale(1.08) translate3d(var(--kb-x,-1.2%),var(--kb-y,-1.4%),0)}}
@keyframes fall{
  0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg)}
  8%{opacity:.95}
  50%{transform:translate3d(var(--sw,30px),56svh,0) rotate(calc(var(--r,300deg) * .5))}
  90%{opacity:.85}
  100%{opacity:0;transform:translate3d(calc(var(--sw,30px) * -.4),112svh,0) rotate(var(--r,300deg))}
}
@keyframes fly{0%{offset-distance:0%;opacity:0}5%{opacity:1}88%{opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes flap{from{transform:scaleX(1)}to{transform:scaleX(.38)}}
@keyframes spin{to{rotate:360deg}}
@media (prefers-reduced-motion:no-preference){
  .music.is-on .ico--on{animation:spin 7s linear infinite}
  .petunjuk__chev{animation:chev 1.6s var(--ease-inout) infinite}
  .is-live .cam__glow::after{animation:denyut 3.4s var(--ease-inout) infinite alternate}
  .cop__glow::before{animation:denyut 2.4s var(--ease-inout) infinite alternate}
}
@keyframes chev{0%,100%{transform:translateY(-3px);opacity:.45}50%{transform:translateY(5px);opacity:1}}
@keyframes denyut{from{opacity:.55;transform:scale(.94)}to{opacity:1;transform:scale(1.04)}}
@media (prefers-reduced-motion:reduce){
  .petals,.fly{display:none}
  .deco{transform:none!important}
}
.form[hidden]{display:none}
main:focus{outline:none}

/* ---------- MOD VIDEO (?video=1, rakaman 9:16 oleh tools/video.py) ----------
   Page biasa tak terkesan (semua di bawah .mod-video, kad akhir display:none). Kawalan + seksyen interaktif disorok,
   blok teks dialih ke zon selamat Reels/Stories Meta (~/.claude/SAFE-ZONE-SOSMED.md): x 65-1015, y 270-1248 pada
   1080x1920 = tepi 6% kiri kanan, 14.0625% atas, 65% bawah. Gate kod dalam tools/video.py berhenti kalau teks keluar. */
.kad-akhir{display:none}
.mod-video{--vz-t:14.0625svh;--vz-b:65svh}
.mod-video .nav,.mod-video .music,.mod-video .petunjuk,.mod-video .toast,.mod-video .bukaan__bawah,
.mod-video .paper--majlis,.mod-video #rsvp,.mod-video #ucapan,.mod-video #salam-kaut,.mod-video #hubungi,.mod-video .foot{display:none}
/* bukaan: nama + tarikh mula di bawah garis atas zon, sampul lebih kecil supaya alamat + cop masih dalam zon */
.mod-video .bukaan{grid-template-rows:auto 1fr}
.mod-video .bukaan__atas{padding-top:calc(var(--vz-t) + 4px)}
.mod-video .bukaan__pentas{top:0;align-self:start;margin-top:1.4svh;width:min(64%,35svh)}
/* bab: blok teks bermula di garis atas zon, jarak + saiz diketatkan supaya hujung teks di atas garis bawah zon */
.mod-video .bab .pentas__text{padding-top:calc(var(--vz-t) + 6px)}
.mod-video .bab--ayat .pentas__text{gap:.45rem}
.mod-video .bismillah{font-size:1.45rem;line-height:1.6}
.mod-video .arabic{font-size:1.24rem;line-height:1.95;margin:0}
.mod-video .terjemahan{font-size:.9rem;line-height:1.45;max-width:23.5rem}
.mod-video .rujukan{margin-top:.2rem}
.mod-video .bab--rumah .pentas__text{gap:.3rem}
.mod-video .j-salam{font-size:1.12rem;margin:0}
.mod-video .j-line{font-size:.96rem;line-height:1.38}
.mod-video .j-host{font-size:1.06rem}
.mod-video .j-name{font-size:1.72rem;line-height:1.22;margin:0}
.mod-video .j-small{font-size:.9rem}
.mod-video .bab--venue .pentas__text{gap:.36rem}
.mod-video .bab--venue .sec-title{font-size:2rem}
.mod-video .bab--venue .aturcara__h{margin-top:.35rem}
.mod-video .bab--venue .aturcara li{padding:.42rem .2rem}
.mod-video .bab--penutup .pentas__text{gap:.45rem}
/* kad akhir, kertas krim + garland + bunga sudut, nama + tarikh + alamat jemputan penuh */
.mod-video .kad-akhir{display:grid;position:fixed;top:0;bottom:0;left:50%;translate:-50% 0;width:min(100%,var(--col));z-index:110;
  align-content:start;justify-items:center;text-align:center;overflow:hidden;isolation:isolate;background:var(--bg);pointer-events:none}
.mod-video .kad-akhir .deco--gl,.mod-video .kad-akhir .deco--gr{width:min(62%,300px)}
.mod-video .kad-akhir .deco--bl{width:58%}
.mod-video .kad-akhir .deco--br{width:62%}
.kad-akhir__isi{position:relative;z-index:3;display:grid;justify-items:center;gap:.6rem;padding:calc(var(--vz-t) + 9svh) var(--gutter) 0}
.kad-akhir .names{font-size:clamp(3.1rem,2.6rem + 3vw,3.9rem)}
.kad-akhir .cover__date{font-size:1.28rem}
.kad-akhir .orn{margin:.5rem auto .3rem}
.kad-akhir__label{font:italic 500 1.16rem/1.4 var(--f-display);color:var(--ink-soft);margin:0;max-width:19rem;text-wrap:balance}
.kad-akhir__url{font:600 1.02rem/1.35 var(--f-text);color:var(--gold-text);letter-spacing:.01em;margin:0;overflow-wrap:anywhere}
.mod-video.mo .bab--kisah{--v1:26%;--v2:36%;--v3:44%;--v4:52%}
.mod-video .ev-addr{text-wrap:balance}

/* =====================================================================================================================
   PLATFORM (ENGINE). Tambahan atas gaya page live, warna lewat token tema sahaja.
   ===================================================================================================================== */

/* bab bersyarat: ayat 'tiada' = bismillah sahaja, bab lebih pendek. Nav ikut bilangan pautan. */
.mo .bab--ayat.bab--ringkas{--bab-h:150svh}
.nav--4{grid-template-columns:repeat(4,1fr)}
.nav--3{grid-template-columns:repeat(3,1fr)}
.nav--2{grid-template-columns:repeat(2,1fr)}
.music[hidden]{display:none}

/* kod pakaian dalam bab majlis */
.ev-pakaian__l{margin-top:.6rem}
.ev-pakaian{font:italic 500 1.08rem/1.3 var(--f-display);color:var(--ink-soft);margin:0}
.mo .bab .ev-pakaian{color:var(--ink-soft-dunia)}

/* RSVP tak aktif (pratonton/demo) dan tutup */
.btn[disabled]{opacity:.55;cursor:not-allowed}
.nota--rsvp{margin:0;text-align:center;justify-self:center}
.rsvp-tutup{font:italic 500 1.2rem/1.45 var(--f-display);color:var(--ink);max-width:22rem;margin:.4rem 0 0}
.mo .kaca .rsvp-tutup{color:var(--ink-dunia)}

/* GALERI (pakej video+), kad kaca atas latar kabur, grid 2 lajur + lightbox boleh leret */
.paper--galeri{padding-top:var(--sec-y)}
.galeri{list-style:none;margin:.4rem 0 0;padding:0;width:100%;max-width:24rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.galeri__btn{display:block;width:100%;aspect-ratio:1/1;padding:0;border:0;border-radius:var(--r);overflow:hidden;cursor:zoom-in;
  background:var(--tint);box-shadow:inset 0 0 0 1px var(--line),var(--sh-photo);-webkit-tap-highlight-color:transparent}
.galeri__btn img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;transition:scale .5s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.galeri__btn:hover img{scale:1.04}}
.galeri__btn:focus-visible{outline:2px solid var(--gold-text);outline-offset:2px}
.lb{position:fixed;inset:0;z-index:130;display:grid;grid-template-rows:1fr auto;align-items:center;justify-items:center;
  background:var(--veil-strong);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);touch-action:pan-y;opacity:0;transition:opacity .3s var(--ease-out)}
.lb[hidden]{display:none}
.lb.is-on{opacity:1}
.lb__fig{margin:0;width:100%;height:100%;display:grid;place-items:center;padding:calc(56px + env(safe-area-inset-top)) 14px 8px;overflow:hidden}
.lb__img{display:block;max-width:min(100%,var(--col));max-height:100%;width:auto;height:auto;border-radius:var(--r);box-shadow:var(--sh-col);
  user-select:none;-webkit-user-drag:none;transition:translate .3s var(--ease-out),opacity .3s var(--ease-out)}
.lb__bar{display:flex;align-items:center;justify-content:center;gap:1rem;padding:.6rem 1rem calc(1rem + env(safe-area-inset-bottom))}
.lb__n{font:500 .8rem/1 var(--f-text);color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:3.5rem;text-align:center}
.lb__btn{width:46px;height:46px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;cursor:pointer;color:var(--gold-text);
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-float)}
.lb__btn .ico{width:22px;height:22px}
.lb__btn--tutup{position:absolute;top:calc(10px + env(safe-area-inset-top));right:max(12px,calc(50% - var(--col) / 2 + 12px))}
.lb__btn--sebelum .ico{rotate:90deg}
.lb__btn--seterusnya .ico{rotate:-90deg}
.lb-buka{overflow:hidden}

/* JALUR atas (pratonton / demo). Lapisan tetap di bawah jalur dianjak setinggi jalur. */
.jalur{position:fixed;top:0;left:50%;translate:-50% 0;width:min(100%,var(--col));height:var(--jalur-h);z-index:140;
  display:flex;align-items:center;gap:.7rem;padding:.4rem .7rem .4rem .9rem;background:var(--toast-bg);color:var(--on-toast)}
.jalur__t{flex:1;margin:0;font:500 .72rem/1.35 var(--f-text);letter-spacing:.01em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.jalur__btn{flex:none;min-height:34px;padding:6px 12px;border-radius:var(--r-pill);font:600 .72rem/1.15 var(--f-text);text-decoration:none;
  background:var(--gold-text);color:var(--on-ink);text-align:center;max-width:46%}
.jalur__btn[hidden]{display:none}
.ada-jalur{--jalur-h:3.5rem}
.js.ada-jalur .cover{top:var(--jalur-h);height:calc(100svh - var(--jalur-h))}
.ada-jalur.mo .dunia,.ada-jalur.mo .dunia-depan{top:var(--jalur-h)}
.ada-jalur.mo .pentas{top:var(--jalur-h);height:calc(100svh - var(--jalur-h))}
.ada-jalur .app{padding-top:var(--jalur-h)}
.ada-jalur.mo .app{padding-top:0}

/* MOD VIDEO, seksyen tambahan juga disorok */
.mod-video #galeri,.mod-video .lb,.mod-video .jalur{display:none}

/* HALAMAN STATUS (belum aktif, tamat, tiada), latar kabur cover tema + kad kaca */
.status{min-height:100svh;display:grid;place-items:center;padding:calc(var(--sec-y) * .6) var(--gutter);text-align:center;position:relative;isolation:isolate}
.status__bg{position:fixed;inset:-4%;width:108%;height:108%;max-width:none;object-fit:cover;z-index:-2}
.status::before{content:"";position:fixed;inset:0;z-index:-1;background:var(--veil-mid)}
.status__kad{width:100%;max-width:26rem;display:grid;justify-items:center;gap:.9rem;padding:2.2rem 1.4rem 2rem;border-radius:calc(var(--r) * 2);
  background:var(--kaca);-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:inset 0 0 0 1px var(--kaca-garis),var(--sh-kaca)}
.status__kad .names{font-size:clamp(2.6rem,2.1rem + 2.6vw,3.2rem)}
.status__kad .sec-h{font-size:clamp(1.7rem,1.5rem + 1.2vw,2.1rem)}
.status__kad .uc{margin-top:.6rem}