/* undangan-adam-rara, gaya jemputan cat air. Warna HANYA lewat var() dari tokens.css. Cerah sahaja.
   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}
.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}

/* ---------- 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(--glass);
  -webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);box-shadow:inset 0 0 0 1px var(--glass-line),var(--sh-float)}
.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__half{position:absolute;inset:0;display:block}
.cop__half img{display:block;width:100%;height:100%;max-width:none}
.cop__half--k{clip-path:polygon(0 0,53.5% 0,47.5% 22%,55.5% 41%,46.5% 60%,54.5% 79%,49.5% 100%,0 100%)}
.cop__half--n{clip-path:polygon(53% 0,100% 0,100% 100%,49% 100%,54% 79%,46% 60%,55% 41%,47% 22%)}
.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)}
.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(--glass);-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(--glass);-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(--glass);
  -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}