/* Enjin KAD platform jemputan (docs/spec/KAD.md, docs/TEMA-KAD.md). Warna HANYA lewat var() dari
   /t/<tema>/tema.css (dimuat sebelum fail ni). Cerah sahaja.
   Susun atur: bukaan (#cover, modul public/e/kad/bukaan/<nama>.{js,css}), kemudian .panggung = .layar sticky 100svh
   yang memegang 4 panel bertindih (Muka, Jemputan, Majlis, Ayat) + lapisan peralihan, diikuti .jejak (ruang skrol
   setiap panel, tinggi ditetapkan kad.js). Selepas panggung, blok interaktif biasa dalam kad bertema (.kb).
   Tanpa GSAP atau reduced-motion: panel jadi seksyen biasa bersusun (tiada pin). */

@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-var.woff2) format("woff2");font-weight:500 600;font-style:normal;font-display:swap}
@font-face{font-family:"Cormorant Garamond";src:url(/fonts/cormorant-italic.woff2) format("woff2");font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:"Inter";src:url(/fonts/inter-var.woff2) format("woff2");font-weight:400 600;font-style:normal;font-display:swap}
@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}
/* nama Jawi (Aref Ruqaa, OFL, subset Arab + Jawi: pa, ga, nya, cha, nga, va) */
@font-face{font-family:"Aref Ruqaa Jawi";src:url(/fonts/arefruqaa-jawi.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap;
  unicode-range:U+0600-06FF,U+0750-077F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFC,U+200C-200F}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman"),local("TimesNewRomanPSMT"),local("Georgia");font-style:normal;size-adjust:95.2%;ascent-override:96.6%;descent-override:30.5%;line-gap-override:0%}
@font-face{font-family:"Cormorant Fallback";src:local("Times New Roman Italic"),local("TimesNewRomanPS-ItalicMT"),local("Georgia Italic");font-style:italic;size-adjust:87.7%;ascent-override:104.9%;descent-override:33%;line-gap-override:0%}
@font-face{font-family:"Inter Fallback";src:local("Arial"),local("ArialMT"),local("Helvetica");size-adjust:106.3%;ascent-override:91.3%;descent-override:22.6%;line-gap-override:0%}

/* ---------- ASAS ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg-luar,var(--bg));color-scheme:light;-webkit-text-size-adjust:100%}
html.is-locked,html.is-locked body{overflow:hidden;overscroll-behavior:none}
body{margin:0;background:transparent;color:var(--ink-soft);font:400 1rem/1.6 var(--f-text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;min-height:100svh}
img,svg{display:block;max-width:100%}
img{height:auto}
p,h1,h2,h3,figure,ol,ul{margin:0}
a{color:inherit}
:where(a,button,input,textarea,[tabindex]):focus-visible{outline:2px solid var(--ink);outline-offset:3px}
main:focus{outline:none}
.ico{width:1.1em;height:1.1em;flex:none}
/* overflow-x:clip di lajur: bunga bucu kad blok (right -30px) dan lapisan lain terkeluar 4-6px melebarkan dokumen.
   clip (bukan hidden) tak cipta bekas skrol, jadi .layar sticky kekal, dan bunga boleh terkeluar menegak */
.app{position:relative;width:min(100%,var(--col));margin-inline:auto;background:var(--bg);box-shadow:var(--sh-col);overflow-x:clip}

/* ---------- TIPOGRAFI ---------- */
.eyebrow{font:500 .7rem/1.3 var(--f-text);letter-spacing:.26em;text-transform:uppercase;color:var(--aksen);margin:0}
.names{font:400 clamp(3rem,2.3rem + 3.4vw,3.8rem)/1.2 var(--f-script);color:var(--aksen);margin:0;padding-inline:.25em;text-wrap:balance}
.nama-jawi{display:flex;flex-direction:column;align-items:center;gap:.1rem;margin:0;font-weight:400}
.nama-jawi__n{font:400 clamp(3.2rem,2.6rem + 3vw,4rem)/1.35 var(--f-jawi);color:var(--aksen)}
.nama-rumi{font:500 .78rem/1.3 var(--f-text);letter-spacing:.24em;text-transform:uppercase;color:var(--ink);margin-top:.2rem}
.sec-h{font:500 clamp(2rem,1.7rem + 1.6vw,2.4rem)/1.1 var(--f-display);color:var(--ink);margin:0;text-wrap:balance}
.sec-title{font:italic 500 clamp(2.1rem,1.8rem + 1.8vw,2.6rem)/1.08 var(--f-display);color:var(--aksen);margin:0}
.prose{font:500 1.12rem/1.6 var(--f-display);color:var(--ink-soft);max-width:24rem;margin-inline:auto;text-wrap:pretty}
.prose--sm{font-size:1.04rem}
.orn{display:block;width:84px;height:1px;background:linear-gradient(90deg,var(--emas-0),var(--emas),var(--emas-0));margin:.4rem auto}
.pemisah{width:min(62%,250px);margin:.35rem auto}
.pemisah__img{width:100%}
.pemisah--jawi{width:min(40%,150px);margin:.1rem auto}
.bismillah{font:400 1.6rem/1.9 var(--f-arab);color:var(--aksen)}
.bismillah--besar{font-size:2rem}
.arabic{font:400 1.45rem/2.1 var(--f-arab);color:var(--ink);max-width:24rem}
.terjemahan{font:italic 500 1.08rem/1.6 var(--f-display);color:var(--ink-soft);max-width:23rem;text-wrap:pretty}
.rujukan{font:500 .72rem/1.3 var(--f-text);letter-spacing:.24em;text-transform:uppercase;color:var(--aksen)}
.cover__to{font:500 .62rem/1.2 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--aksen);margin:0}
.cover__name{font:500 1.16rem/1.14 var(--f-display);color:var(--ink);margin:0;max-width:100%;overflow-wrap:anywhere;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}
.cover__name.is-long{font-size:.96rem}
.bk-tamu{display:grid;justify-items:center;gap:.2rem;margin-top:.5rem}

/* ---------- BUKAAN (asas, modul tambah gaya sendiri) ---------- */
.bk{position:relative;z-index:100;min-height:100svh;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--bk-bg,var(--bg));overflow:hidden;isolation:isolate}
.js .bk{position:fixed;top:0;bottom:0;left:50%;translate:-50% 0;width:min(100%,var(--col));min-height:0}
.js.ada-jalur .bk{top:var(--jalur-h)}
.bk.is-lutsinar{background:transparent;pointer-events:none}
.bk[hidden]{display:none}
.bk__atas{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:.35rem;padding-inline:var(--gutter)}
.names--bk{font-size:clamp(2.7rem,2.2rem + 2.6vw,3.3rem)}
.bk__tarikh{font:500 1.1rem/1.3 var(--f-display);color:var(--ink);letter-spacing:.04em}
.bk__petunjuk{border:0;background:none;min-height:44px;padding:.5rem 1.2rem;cursor:pointer;font:italic 500 1.1rem/1.3 var(--f-display);color:var(--aksen)}
.bk__cta{display:grid;justify-items:center;gap:.6rem}
.bk__hint{font:italic 500 1rem/1.3 var(--f-display);color:var(--ink-soft)}
.js .bk [data-rv]{opacity:0;translate:0 14px;transition:opacity .9s var(--ease-out),translate .9s var(--ease-out);transition-delay:calc(var(--i,0) * .12s)}
.js .bk [data-rv].is-in{opacity:1;translate:0 0}

/* cop lilin satu keping (jangan retak atau pecah dua) */
.seal{position:absolute;z-index:7;left:50%;top:var(--seal-y,50%);width:27%;aspect-ratio:400/403;translate:-50% -50%;
  container-type:inline-size;filter:drop-shadow(var(--sh-wax));pointer-events:none}
.seal::before{content:"";position:absolute;inset:-34%;z-index:-1;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,var(--glow-emas) 0%,var(--glow-emas-mid) 48%,var(--glow-0) 100%)}
.seal__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;display:block;pointer-events:none}
.seal__mono{position:absolute;inset:0;display:grid;place-items:center;font:italic 600 21cqw/1 var(--f-display);color:var(--wax-ink);
  letter-spacing:.01em;white-space:nowrap;text-shadow:0 1px 0 var(--wax-hi),0 -1px 0 var(--wax-lo);pointer-events:none}
.seal--warna .seal__mono{color:var(--on-aksen)}

/* ---------- PANGGUNG + PANEL ---------- */
.panggung{position:relative}
.layar{position:relative;overflow:hidden}
.pn{position:relative;min-height:100svh;overflow:hidden;isolation:isolate;display:grid;
  --pt:clamp(4.5rem,12svh,7rem);--pb:calc(var(--nav-h) + 4svh);--px:var(--gutter)}
/* ruang bawah Muka boleh dibesarkan tema (--muka-pb) supaya teks duduk di atas gugusan bunga bawah */
.pn--muka{--pb:var(--muka-pb,calc(var(--nav-h) + 4svh))}
.pn__latar{position:absolute;inset:0;z-index:-2;background:var(--bg);transform-origin:50% 60%}
.pn__latar--dua{background:var(--bg-2)}
.pn__latar--gelap{background:var(--bg-gelap)}
.pn__latar--tile{background-color:var(--bg);background-repeat:repeat;background-size:var(--tile,240px) auto}
.pn__latar-img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover}
.pn--gelap{--ink:var(--ink-gelap);--ink-soft:var(--ink-soft-gelap);--aksen:var(--aksen-gelap);--line:var(--line-gelap)}
/* isi atas kertas cerah (bingkai gading, kad blok): token *-paper, jadi tema berlatar gelap kekal terbaca */
.bingkai--terang,.kb{--ink:var(--ink-paper);--ink-soft:var(--ink-soft-paper);--aksen:var(--aksen-paper);--line:var(--line-paper)}
.pn__lap{position:absolute;inset:0;z-index:-1;pointer-events:none}
.pn__isi,.bingkai__isi{position:relative;display:grid}
.pn__isi{padding:var(--pt) var(--px) var(--pb)}
.kp{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}
.kp__in{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%;scale:var(--fit,1);transform-origin:50% 50%}
.kp+.kp{margin-top:2.5rem}

/* panel berpin (hanya bila GSAP hidup, kelas .gs dari kad.js) */
/* layar tanpa margin negatif: jejak pertama yang naik -100svh. Margin negatif pada layar buat sticky kekal satu skrin
   selepas panggung tamat dan menutup blok pertama (kira undur) selamanya */
.gs .layar{position:sticky;top:0;height:100svh;z-index:1}
.gs.ada-jalur .layar{top:var(--jalur-h);height:calc(100svh - var(--jalur-h))}
/* margin bawah -tinggi layar buat layar melimpah satu tinggi layar di bawah panggung bila panggung habis, dan blok
   pertama selepasnya (kira undur) tertutup terus. Padding = tinggi layar, blok bermula selepas layar keluar skrin. */
.gs:not(.mod-video) .panggung{padding-bottom:100svh}
.gs.ada-jalur:not(.mod-video) .panggung{padding-bottom:calc(100svh - var(--jalur-h))}
.gs .pn{position:absolute;inset:0;min-height:0;visibility:hidden}
.gs .pn.is-nampak{visibility:visible}
/* kumpulan teks panel yang tak nampak kekal visibility:visible sebaris dari GSAP (anak visible menang atas induk hidden),
   jadi teks halimunan panel lain menyekat tekan butang panel semasa. Paksa sorok (dalam .layar sahaja, salinan Muka
   dalam sampul bukaan bukan panel panggung) */
.gs .layar .pn:not(.is-nampak) .kp,.gs .layar .pn:not(.is-nampak) .bingkai{visibility:hidden!important}
.gs .layar .pn:not(.is-nampak){pointer-events:none}
.gs .pn__isi{position:absolute;inset:0;padding:0}
.gs .kp{position:absolute;top:var(--pt);bottom:var(--pb);left:var(--px);right:var(--px);margin:0}
.gs .bingkai .kp{inset:0}
.jejak{display:none}
.gs .jejak{display:block;height:100svh;margin-top:-100svh;pointer-events:none;visibility:hidden}

/* lapisan aset: .lp (letak + parallax, JS) > .lp__in (tumbuh, JS) > .lp__img (ayun, CSS) */
.lp{position:absolute;width:var(--w,40%);pointer-events:none}
.lp__in{width:100%;transform-origin:var(--asal,50% 50%)}
.lp__img{width:100%;max-width:none;transform-origin:var(--asal,50% 50%)}
.at-tl{top:var(--oy,-3%);left:var(--ox,-12%);--asal:0 0}
.at-tr{top:var(--oy,-3%);right:var(--ox,-12%);--asal:100% 0}
.at-bl{bottom:var(--oy,-3%);left:var(--ox,-12%);--asal:0 100%}
.at-br{bottom:var(--oy,-3%);right:var(--ox,-12%);--asal:100% 100%}
.at-t{top:var(--oy,-4%);left:50%;translate:-50% 0;--asal:50% 0}
.at-b{bottom:var(--oy,-4%);left:50%;translate:-50% 0;--asal:50% 100%}
.at-l{top:var(--ty,50%);left:var(--ox,-14%);translate:0 -50%;--asal:0 50%}
.at-r{top:var(--ty,50%);right:var(--ox,-14%);translate:0 -50%;--asal:100% 50%}
.w-20{--w:20%}.w-24{--w:24%}.w-28{--w:28%}.w-32{--w:32%}.w-36{--w:36%}.w-40{--w:40%}.w-44{--w:44%}.w-48{--w:48%}
.w-52{--w:52%}.w-56{--w:56%}.w-60{--w:60%}.w-66{--w:66%}.w-72{--w:72%}.w-80{--w:80%}.w-90{--w:90%}.w-100{--w:100%}.w-120{--w:120%}
.o-0{--ox:0%;--oy:0%}.o-4{--ox:-4%;--oy:-2%}.o-20{--ox:-20%;--oy:-6%}.o-28{--ox:-28%;--oy:-8%}
/* cermin/terbalik pada .lp (pusat kotak), bukan .lp__img: asal ayun/tumbuh di bucu skrin akan buang imej keluar kotak.
   Dalam kotak bercermin paksi tempatan terbalik, jadi --asal ditukar supaya tumbuh + ayun kekal dari bucu skrin. */
.lp.cermin{scale:-1 1}
.lp.terbalik{scale:1 -1}
.lp.cermin.terbalik{scale:-1 -1}
.cermin.at-tl{--asal:100% 0}.cermin.at-l{--asal:100% 50%}.cermin.at-tr{--asal:0 0}.cermin.at-r{--asal:0 50%}
.cermin.at-bl{--asal:100% 100%}.cermin.at-br{--asal:0 100%}
.terbalik.at-tl{--asal:0 100%}.terbalik.at-tr{--asal:100% 100%}.terbalik.at-bl{--asal:0 0}.terbalik.at-br{--asal:100% 0}
.terbalik.at-t{--asal:50% 100%}.terbalik.at-b{--asal:50% 0}
.cermin.terbalik.at-tl{--asal:100% 100%}.cermin.terbalik.at-tr{--asal:0 100%}.cermin.terbalik.at-bl{--asal:100% 0}.cermin.terbalik.at-br{--asal:0 0}
.r-15{rotate:15deg}.r-n15{rotate:-15deg}.r-30{rotate:30deg}.r-n30{rotate:-30deg}.r-90{rotate:90deg}.r-n90{rotate:-90deg}.r-180{rotate:180deg}

/* mahkota bunga Muka (disusun kod dari sprite tema, kedudukan tetap) */
.mahkota{position:absolute;left:0;right:0;top:3svh;height:34svh;z-index:0;pointer-events:none}
.mk{position:absolute;left:var(--x);top:var(--y);width:var(--w);translate:-50% -50%;rotate:var(--r,0deg);z-index:var(--z,1)}
.mk__in{width:100%;transform-origin:50% 70%}
.mk__img{width:100%;max-width:none}
.mk-1{--x:50%;--y:34%;--w:40%;--z:5}
.mk-2{--x:27%;--y:46%;--w:32%;--r:-12deg;--z:4}
.mk-3{--x:73%;--y:46%;--w:32%;--r:12deg;--z:4}
.mk-4{--x:8%;--y:68%;--w:28%;--r:-24deg;--z:3}
.mk-5{--x:92%;--y:68%;--w:28%;--r:24deg;--z:3}
.mk-6{--x:38%;--y:16%;--w:26%;--r:-18deg;--z:2}
.mk-7{--x:63%;--y:17%;--w:26%;--r:16deg;--z:2}
.mk-8{--x:50%;--y:64%;--w:22%;--z:6}
.pn--mahkota{--pt:38svh}
.pn--mahkota .kp{justify-content:flex-start}

/* bingkai (heksagon/oval pek tema). --ar nisbah imej (kad.js), --bi-x/--bi-y ruang dalam yang selamat untuk teks */
.bingkai{position:absolute;left:50%;top:var(--bing-y,50%);translate:-50% -50%;height:min(80svh,calc(min(100vw,var(--col)) * .92 / var(--ar,.6)));aspect-ratio:var(--ar,.6);z-index:1}
.bingkai__img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
.bingkai__isi{position:absolute;top:var(--bi-y,18%);bottom:var(--bi-y,18%);left:var(--bi-x,15%);right:var(--bi-x,15%)}
/* bingkai_n: sebahagian kumpulan di luar bingkai. Berpin, bingkai pudar ikut kumpulannya (kad.js). Tanpa GSAP/JS,
   bingkai dan kumpulan luar bersusun */
html:not(.gs) .pn--bingkai-luar{display:flex;flex-direction:column;align-items:center}
html:not(.gs) .pn--bingkai-luar .bingkai{position:relative;left:auto;top:auto;translate:none;margin-top:var(--pt);max-width:100%}
.bingkai .kp__in{gap:.3rem}
.bingkai .j-line{font-size:.94rem;line-height:1.42}
.bingkai .j-host{font-size:1.05rem}
.bingkai .j-name{font-size:1.75rem}
.bingkai .terjemahan{font-size:.98rem;line-height:1.5}
.bingkai .arabic{font-size:1.25rem;line-height:1.95}
.bingkai .bismillah{font-size:1.4rem}

/* ---------- ISI PANEL ---------- */
.muka__tarikh{font:500 1.15rem/1.3 var(--f-display);color:var(--ink);letter-spacing:.08em;margin-top:.3rem}
.muka__tempat{font:500 .74rem/1.4 var(--f-text);letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);max-width:20rem}
.muka__tempat.panjang{letter-spacing:.06em;font-size:.7rem;max-width:22rem}
.j-salam{font:italic 500 1.22rem/1.35 var(--f-display);color:var(--aksen);max-width:20rem}
.j-line{font:500 1.04rem/1.5 var(--f-display);color:var(--ink-soft);max-width:23rem;text-wrap:pretty}
.j-host{font:600 1.16rem/1.3 var(--f-display);color:var(--ink)}
.j-jemput{margin-top:.25rem}
.j-name{font:400 clamp(1.9rem,1.5rem + 1.6vw,2.3rem)/1.25 var(--f-script);color:var(--aksen);max-width:22rem;padding-inline:.3em}
.j-dengan{font:italic 500 1rem/1.2 var(--f-display);color:var(--ink-soft)}
.j-small{font-size:.96rem}
.mj-berlangsung{font:italic 500 1.12rem/1.4 var(--f-display);color:var(--ink-soft);max-width:20rem}
.mj-hari{font:400 clamp(3.4rem,2.8rem + 3vw,4.2rem)/1.15 var(--f-script);color:var(--aksen);padding-inline:.3em}
.mj-tarikh{font:500 1.9rem/1.1 var(--f-display);color:var(--ink);letter-spacing:.14em;font-variant-numeric:lining-nums tabular-nums}
.mj-hijri{font:italic 500 1.04rem/1.35 var(--f-display);color:var(--ink-soft)}
.mj-masa{font:500 .8rem/1.3 var(--f-text);letter-spacing:.16em;text-transform:uppercase;color:var(--ink);margin-top:.2rem}
.atur-h{margin-top:.6rem}
.aturcara{list-style:none;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:.6rem .2rem;border-bottom:1px solid var(--line)}
.aturcara__t{font:500 .8rem/1.3 var(--f-text);color:var(--aksen);letter-spacing:.02em;text-align:left;font-variant-numeric:tabular-nums}
.aturcara__a{font:500 1.08rem/1.3 var(--f-display);color:var(--ink);text-align:right}
.mj-lokasi{display:flex;flex-direction:column;align-items:center;gap:.4rem;width:100%}
.mj-tempat{font:400 clamp(2.1rem,1.8rem + 1.4vw,2.5rem)/1.25 var(--f-script);color:var(--aksen);max-width:22rem;padding-inline:.3em}
.mj-tempat.panjang{font-size:clamp(1.6rem,1.4rem + 1vw,1.9rem);line-height:1.2}
.mj-alamat{font:400 .9rem/1.5 var(--f-text);color:var(--ink-soft);max-width:19rem}
.mj-akad-h{font:400 2.2rem/1.2 var(--f-script);color:var(--aksen);margin-top:.2rem}
.ev-date{font:600 1.2rem/1.25 var(--f-display);color:var(--ink)}
.ev-time{font:500 1.06rem/1.3 var(--f-display);color:var(--ink-soft)}
.ev-place{font:600 1.1rem/1.3 var(--f-display);color:var(--ink);max-width:20rem}
.ev-note{font:italic 500 1rem/1.3 var(--f-display);color:var(--aksen)}
.ev-pakaian__l{margin-top:.5rem}
.ev-pakaian{font:italic 500 1.06rem/1.3 var(--f-display);color:var(--ink-soft)}
.lokasi{width:100%;max-width:22rem;display:grid;gap:.6rem;margin-top:.5rem}
.lokasi__row{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.lokasi__row .btn{width:100%}
.kal{position:relative}
.kal__menu{margin-top:.5rem;display:grid;border-radius:var(--r-sm);background:var(--paper-solid);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-float);overflow:hidden;text-align:left}
.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-paper);text-decoration:none}
.kal__opt+.kal__opt{border-top:1px solid var(--line-paper)}
.kal__opt .ico{color:var(--aksen-paper)}
@media (hover:hover){.kal__opt:hover{background:var(--paper-hover)}}

/* ---------- PERALIHAN ---------- */
.peralihan{position:absolute;inset:0;z-index:30;pointer-events:none;visibility:hidden;overflow:hidden}
.peralihan.is-nampak{visibility:visible}
.pl-lembar{position:absolute;left:0;top:0;width:100%;height:150%}
.pl-b{position:absolute;left:0;top:0;width:var(--s,70%)}
.pl-b__img{width:100%;max-width:none}
.pl-b.cermin .pl-b__img{scale:-1 1}
.pl-awan{position:absolute;left:-20%;width:140%;max-width:none;top:0;opacity:0}

/* ---------- BUTANG ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:14px 26px;border:0;border-radius:var(--r-pill);
  font:500 .95rem/1.15 var(--f-text);letter-spacing:.01em;text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background-color .2s var(--ease-out),color .2s var(--ease-out),scale .15s var(--ease-out)}
.btn svg{width:1.05em;height:1.05em;flex:none}
.btn--aksen{background:var(--aksen-btn,var(--aksen));color:var(--on-aksen);box-shadow:var(--sh-float)}
.btn--ghost{background:var(--paper);color:var(--ink-paper);box-shadow:inset 0 0 0 1px var(--line-strong)}
.btn--sm{min-height:42px;padding:10px 18px;font-size:.875rem}
.btn--wide{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn:active{scale:.97}
@media (hover:hover) and (pointer:fine){
  .btn--aksen:hover{background:var(--aksen-deep)}
  .btn--ghost:hover{background:var(--paper-hover)}
}

/* ---------- BLOK INTERAKTIF: kad bertema ---------- */
.sec{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(3.5rem,9svh,5rem) var(--gutter) clamp(1.5rem,4svh,2.5rem);
  background:var(--bg-blok,var(--bg))}
.kb{position:relative;isolation:isolate;width:100%;max-width:26rem;padding:3rem 1.35rem 2.6rem;border-radius:var(--r);display:grid;justify-items:center;gap:.8rem;
  background:var(--kad-bg);box-shadow:inset 0 0 0 1px var(--kad-line),var(--sh-card)}
.kb::before{content:"";position:absolute;inset:7px;border-radius:calc(var(--r) - 4px);box-shadow:inset 0 0 0 1px var(--kad-garis);pointer-events:none;z-index:-1}
.kb__bucu{position:absolute;inset:0;z-index:-1;pointer-events:none}
/* bunga bucu duduk atas bucu kad, keluar dari kotak teks (padding atas/bawah .kb lebih tinggi dari bahagian bunga
   yang masuk ke dalam kad), supaya tajuk, nama dan butang tak bertindih bunga */
.kb__bucu .lp:not([class*=" w-"]){--w:min(28%,7.5rem)}
.kb__bucu .at-tl{top:var(--oy,-48px);left:var(--ox,-30px)}
.kb__bucu .at-tr{top:var(--oy,-48px);right:var(--ox,-30px)}
.kb__bucu .at-bl{bottom:var(--oy,-46px);left:var(--ox,-30px)}
.kb__bucu .at-br{bottom:var(--oy,-46px);right:var(--ox,-30px)}
.kb__bucu .o-in{--ox:5px;--oy:5px}
.kb__lukis{width:100%;max-width:24rem;border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--sh-frame)}
.kb__lukis-img{width:100%}
.kb .eyebrow{color:var(--aksen-paper)}
.kb .sec-h,.kb .p-fam{color:var(--ink-paper)}

.cd{width:100%;max-width:22rem;margin-top:.4rem;text-align:center}
.cd__pre,.cd__post{font:italic 500 1.1rem/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-sm);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-paper);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(--aksen-paper)}
.cd__msg{font:italic 500 1.5rem/1.3 var(--f-display);color:var(--aksen);margin:0}
.cd__run[hidden],.cd__msg[hidden]{display:none}

.form{width:100%;max-width:24rem;display:grid;gap:1.05rem;margin-top:.5rem;text-align:left}
.form[hidden]{display:none}
.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-paper);padding:0}
.input{width:100%;min-height:48px;padding:.75rem .9rem;border:0;border-radius:var(--r-sm);background:var(--paper-solid);box-shadow:inset 0 0 0 1px var(--line-strong);
  font:400 1rem/1.4 var(--f-text);color:var(--ink-paper);transition:box-shadow .2s var(--ease-out)}
.input::placeholder{color:var(--ink-soft-paper);opacity:.8}
.input:focus{outline:none;box-shadow:inset 0 0 0 1.5px var(--aksen-paper)}
.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-solid);
  box-shadow:inset 0 0 0 1px var(--line-strong);font:500 .9rem/1.2 var(--f-text);color:var(--ink-paper);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(--aksen-btn,var(--aksen));color:var(--on-aksen);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-sm);background:var(--danger-bg);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-sm);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-paper);margin:0}
.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-paper);max-width:22rem;margin:.4rem 0 0}

.uc__count{font:500 .78rem/1.3 var(--f-text);letter-spacing:.14em;text-transform:uppercase;color:var(--aksen-paper);font-variant-numeric:tabular-nums}
.uc{width:100%;max-width:24rem;display:grid;gap:.6rem;margin-top:.3rem;text-align:left}
.uc__list{list-style:none;padding:0;display:grid;gap:.6rem}
.uc__list:empty{display:none}
.uc__item{padding:.95rem 1rem;border-radius:var(--r-sm);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-paper);overflow-wrap:anywhere}
.uc__masa{flex:none;font:400 .72rem/1.2 var(--f-text);color:var(--ink-soft-paper)}
.uc__txt{font:400 .92rem/1.55 var(--f-text);color:var(--ink-soft-paper);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-paper);text-align:center}
@keyframes ucIn{from{opacity:0;translate:0 -8px}to{opacity:1;translate:0 0}}

.bank{width:100%;max-width:22rem;display:grid;justify-items:center;gap:.25rem;padding:1.3rem 1.1rem 1.15rem;margin-top:.3rem;border-radius:var(--r-sm);background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.bank__name{font:500 .7rem/1.3 var(--f-text);letter-spacing:.22em;text-transform:uppercase;color:var(--aksen-paper)}
.bank__no{font:500 1.9rem/1.2 var(--f-display);color:var(--ink-paper);letter-spacing:.06em;font-variant-numeric:lining-nums tabular-nums;margin-top:.1rem}
.bank__owner{font:500 1.02rem/1.35 var(--f-display);color:var(--ink-soft-paper);margin-bottom:.7rem}
.qr{margin-top:.3rem;display:grid;justify-items:center;gap:.6rem}
.qr[hidden]{display:none}
.qr__box{padding:10px;border-radius:var(--r-sm);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-paper)}
.nota{font:400 .78rem/1.5 var(--f-text);color:var(--ink-soft-paper);max-width:20rem;margin-top:.2rem}

.hub{list-style:none;padding:0;width:100%;max-width:22rem;display:grid;gap:.7rem;margin-top:.2rem}
.hub__item{padding:1rem 1rem 1.05rem;border-radius:var(--r-sm);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-paper)}
.hub__peranan{font:400 .82rem/1.4 var(--f-text);color:var(--ink-soft-paper);margin-bottom:.6rem}
.hub__row{display:grid;grid-template-columns:1fr 1fr;gap:.55rem;width:100%}
.hub__row .btn{width:100%;padding-inline:12px}

.p-fam{font:600 1.06rem/1.38 var(--f-display);max-width:21rem}
.p-jumpa{font:italic 500 1.12rem/1.3 var(--f-display);color:var(--ink-soft-paper)}
.names--end{font-size:clamp(2.7rem,2.2rem + 3vw,3.3rem);margin-top:-.1rem;color:var(--aksen-paper)}
.kb .prose{color:var(--ink-soft-paper)}

.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-sm);overflow:hidden;cursor:zoom-in;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--line),var(--sh-card);-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(--aksen);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(--mist);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);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-sm);box-shadow:var(--sh-col);user-select:none;-webkit-user-drag:none}
.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-paper);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(--aksen-paper);
  background:var(--paper-solid);box-shadow:inset 0 0 0 1px var(--line-strong),var(--sh-float)}
.lb__btn[hidden]{display:none}
.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}

.foot{position:relative;padding:1.2rem var(--gutter) calc(var(--nav-h) + 1.8rem + env(safe-area-inset-bottom));text-align:center;background:var(--bg-blok,var(--bg))}
.foot p{display:inline-block;padding:.45rem .9rem;border-radius:var(--r-pill);background:var(--paper);font:400 .74rem/1.4 var(--f-text);letter-spacing:.06em;color:var(--ink-soft-paper)}

/* ---------- NAV + MUZIK + TOAST + PETUNJUK SKROL ---------- */
.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(--glass-nav);-webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) 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-sm);
  font:500 .64rem/1.1 var(--f-text);letter-spacing:.02em;color:var(--ink-soft-paper);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(--aksen-paper)}
.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(--aksen-paper)}
.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{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(--aksen-paper);
  background:var(--glass-nav);-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[hidden]{display:none}
.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-sm);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}
.hint{position:fixed;left:50%;translate:-50% 0;bottom:calc(var(--nav-h) + 18px + env(safe-area-inset-bottom));z-index:59;display:flex;flex-direction:column;align-items:center;gap:1px;
  margin:0;padding:.5rem 1.05rem .35rem;border-radius:var(--r-pill);background:var(--glass-nav);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  box-shadow:inset 0 0 0 1px var(--glass-line),var(--sh-float);font:500 .74rem/1.2 var(--f-text);letter-spacing:.05em;color:var(--ink-paper);white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .6s var(--ease-out)}
.hint__ico{width:18px;height:18px;color:var(--aksen-paper)}
.is-open .hint{opacity:1;transition-delay:.8s}
.is-open.is-scrolled .hint{opacity:0;transition-delay:0s}

/* ---------- JALUR atas (pratonton / demo) ---------- */
.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(--aksen-btn,var(--aksen));color:var(--on-aksen);text-align:center;max-width:46%}
.jalur__btn[hidden]{display:none}
.ada-jalur{--jalur-h:3.5rem}
.ada-jalur .app{padding-top:var(--jalur-h)}

/* ---------- GERAK (dimatikan bila reduced-motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  .hint__ico{animation:bob 1.5s var(--ease-inout) infinite}
  /* lapisan depan sentiasa bergerak: ayun lembut ±1.5deg, berjalan hanya bila panel nampak */
  .gs .lp__img{animation:ayun 5s var(--ease-inout) infinite alternate;animation-play-state:paused}
  .gs .lp:nth-child(2n) .lp__img{animation-duration:6s;animation-delay:-2.2s}
  .gs .lp:nth-child(3n) .lp__img{animation-duration:4.4s;animation-delay:-1.1s}
  .gs .is-nampak .lp__img,.gs .kb .lp__img,.gs .kad-akhir .lp__img{animation-play-state:running}
  .gs .mk__img{animation:ayun 5.5s var(--ease-inout) infinite alternate}
  .gs .mk:nth-child(2n) .mk__img{animation-duration:4.6s;animation-delay:-1.7s}
}
@keyframes ayun{from{rotate:-1.5deg}to{rotate:1.5deg}}
@keyframes bob{0%,100%{translate:0 0}50%{translate:0 4px}}
@keyframes apung{from{translate:0 -4px}to{translate:0 4px}}
@keyframes denyut{0%,100%{opacity:.55}50%{opacity:1}}

/* ---------- MOD VIDEO (?video=1, rakaman 9:16 oleh tools/rakam.py) ----------
   UI interaktif disorok, blok selepas panggung tak dirakam (kira undur jadi panel). Teks dalam zon selamat TikTok
   (~/.claude/SAFE-ZONE-SOSMED.md): x 60-930, y 440-1420 pada 1080x1920 = tepi 13.89% kiri kanan (simetri, tengah),
   22.92% atas, 26.04% bawah. Gate kod dalam tools/rakam.py berhenti kalau teks keluar zon. */
.kad-akhir{display:none}
.mod-video{--vz-t:22.92svh;--vz-b:73.96svh;--vz-x:13.89%}
.mod-video.ada-jalur{--jalur-h:0px}
.mod-video .nav,.mod-video .music,.mod-video .hint,.mod-video .toast,.mod-video .jalur,.mod-video .lb,
.mod-video main>.sec,.mod-video .foot{display:none}
.mod-video .pn{--pt:calc(var(--vz-t) + 4px);--pb:calc(100svh - var(--vz-b) + 4px);--px:var(--vz-x)}
.mod-video .pn--mahkota{--pt:calc(var(--vz-t) + 12svh)}
.mod-video .bingkai{height:76svh;top:calc((var(--vz-t) + var(--vz-b)) / 2)}
.mod-video .kp__in{gap:.3rem}
.mod-video .lokasi{display:none}
.mod-video .pn--cd .cd{max-width:none}
.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;
  place-items:center;text-align:center;overflow:hidden;isolation:isolate;background:var(--bg);pointer-events:none}
.kad-akhir .pn__latar{z-index:-2}
.kad-akhir__lap{position:absolute;inset:0;z-index:-1}
.kad-akhir__isi{position:absolute;top:var(--vz-t);bottom:calc(100svh - var(--vz-b));left:var(--vz-x);right:var(--vz-x);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem}
.kad-akhir .names{font-size:clamp(2.8rem,2.4rem + 3vw,3.6rem)}
.kad-akhir__label{font:italic 500 1.12rem/1.4 var(--f-display);color:var(--ink-soft);max-width:19rem;text-wrap:balance}
.kad-akhir__url{font:600 1rem/1.35 var(--f-text);color:var(--aksen);letter-spacing:.01em;overflow-wrap:anywhere}