/* Mesin render undangan */

/* ---- font self-host (di-download ke /assets/fonts saat deploy; fallback aman) ---- */
@font-face{font-family:'Playfair Display';src:url('/assets/fonts/playfair.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Great Vibes';src:url('/assets/fonts/greatvibes.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('/assets/fonts/cormorant.woff2') format('woff2');font-weight:400 700;font-display:swap}
@font-face{font-family:'Marcellus';src:url('/assets/fonts/marcellus.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Amiri';src:url('/assets/fonts/amiri.woff2') format('woff2');font-weight:400 700;font-display:swap}

/* font stacks per key preset */
.f-playfair{--fd:'Playfair Display',Georgia,serif}
.f-cormorant{--fd:'Cormorant Garamond',Georgia,serif}
.f-marcellus{--fd:'Marcellus','Times New Roman',serif}
.s-greatvibes{--fs:'Great Vibes',cursive}
.s-amiri{--fs:'Amiri',Georgia,serif}
.s-none{--fs:var(--fd)}

/* ---- tokens diisi inline oleh renderer: --cov --cov2 --page --acc --acc2 --tx --mut ---- */
.inv{
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--page);color:var(--tx);line-height:1.6;
  max-width:480px;margin:0 auto;min-height:100dvh;position:relative;
  box-shadow:0 0 60px rgba(0,0,0,.18);
  --line:color-mix(in srgb,var(--acc) 45%,transparent);
  --card:color-mix(in srgb,var(--page) 60%,#ffffff 40%);
}
.inv.dark-page{--card:color-mix(in srgb,var(--page) 70%,#ffffff 8%)}
*{box-sizing:border-box}
html,body,.inv{max-width:100%;overflow-x:hidden}
@supports (overflow:clip){html,body,.inv{overflow-x:clip}}
body{margin:0;background:#111}

/* ================= ENTRANCE ================= */
.gate{
  position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;color:#fff;padding:34px;
  background:linear-gradient(168deg,var(--cov),var(--cov2));
  transition:opacity .9s ease,visibility .9s;
}
.gate.open{opacity:0;visibility:hidden;pointer-events:none}
.gate .frame{position:absolute;inset:16px;border:1px solid rgba(255,255,255,.25);border-radius:22px;pointer-events:none}
:is(.sig,.has-personal-cover) .gate{isolation:isolate;background:var(--cov)}
:is(.sig,.has-personal-cover) .gate-portrait{position:absolute;inset:0;z-index:-3;overflow:hidden}
:is(.sig,.has-personal-cover) .gate-portrait img{width:100%;height:100%;object-fit:cover;object-position:var(--focus-mobile-x,50%) var(--focus-mobile-y,30%);filter:saturate(.78) contrast(1.04);transform:scale(1.025);animation:gatezoom 14s ease-out both}
:is(.sig,.has-personal-cover) .gate-vignette{position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,color-mix(in srgb,var(--cov) 34%,transparent),color-mix(in srgb,var(--cov) 76%,transparent) 63%,var(--cov)),linear-gradient(90deg,color-mix(in srgb,var(--cov) 35%,transparent),transparent 50%,color-mix(in srgb,var(--cov) 30%,transparent))}
:is(.sig,.has-personal-cover) .gate-inner{width:min(100%,390px);padding:40px 24px 34px;background:color-mix(in srgb,var(--cov) 42%,transparent);border:1px solid color-mix(in srgb,var(--acc2) 46%,transparent);backdrop-filter:blur(7px);box-shadow:0 30px 90px rgba(0,0,0,.34);position:relative}
:is(.sig,.has-personal-cover) .gate .frame{inset:9px;border-radius:0;border-color:color-mix(in srgb,var(--acc2) 42%,transparent)}
@keyframes gatezoom{from{transform:scale(1.11)}to{transform:scale(1.025)}}
.gate .frame::before,.gate .frame::after{content:'';position:absolute;width:30px;height:30px;border:1.5px solid var(--acc2)}
.gate .frame::before{top:-1px;left:-1px;border-right:0;border-bottom:0;border-radius:22px 0 0 0}
.gate .frame::after{bottom:-1px;right:-1px;border-left:0;border-top:0;border-radius:0 0 22px 0}
.gate .ey{font-size:.68rem;letter-spacing:.34em;text-transform:uppercase;color:var(--acc2);margin-bottom:14px}
.gate .names{font-family:var(--fd);font-size:2.2rem;line-height:1.15;text-wrap:balance}
.gate .names .scr{font-family:var(--fs);font-size:2.6rem;display:block;color:var(--acc2)}
.gate .to{margin-top:26px;font-size:.76rem;color:rgba(255,255,255,.75)}
.gate .to b{display:block;font-family:var(--fd);font-weight:400;font-size:1.12rem;color:#fff;margin-top:5px}
.gate button{
  margin-top:26px;font:inherit;font-weight:700;font-size:.86rem;letter-spacing:.06em;cursor:pointer;
  color:var(--cov);background:linear-gradient(150deg,var(--acc2),var(--acc));border:none;border-radius:30px;
  padding:13px 30px;box-shadow:0 14px 34px -14px rgba(0,0,0,.55);
  animation:pulse 2.2s ease-in-out infinite;
}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.045)}}

/* ================= SECTIONS ================= */
.sec{padding:44px 28px;text-align:center;position:relative}
.sec+.sec{border-top:1px solid var(--line)}
.kick{font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:8px}
.sec h2{font-family:var(--fd);font-size:1.55rem;margin:0 0 6px;font-weight:600}
.sec .scr-h{font-family:var(--fs);font-size:2rem;color:var(--acc);font-weight:400;margin:0 0 6px}
.sec p{color:var(--mut);font-size:.88rem;margin:6px 0}
.orn{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 auto 18px;color:var(--acc)}
.orn .ln{height:1px;width:46px;background:var(--line)}
.orn svg{width:22px;height:22px;fill:currentColor;opacity:.9}

/* cover */
.cover{
  min-height:96dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;background:linear-gradient(168deg,var(--cov),var(--cov2));position:relative;overflow:hidden;padding:60px 28px;
}
.cover .motif{position:absolute;inset:0;pointer-events:none;opacity:.16}
.cover .inner{position:relative;z-index:2}
.mono{width:78px;height:78px;border-radius:50%;border:1.5px solid var(--acc2);display:grid;place-items:center;
  margin:0 auto 20px;font-family:var(--fd);font-size:1.5rem;color:var(--acc2)}
.cover .ey{font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;color:var(--acc2);margin-bottom:14px}
.cover h1{font-family:var(--fd);font-size:2.5rem;line-height:1.1;margin:0;font-weight:600}
.cover h1 .scr{font-family:var(--fs);display:block;font-size:2.9rem;color:var(--acc2);font-weight:400;margin:8px 0}
.cover .dt{margin-top:14px;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.85)}
.event-hero-photo{width:min(176px,52vw);aspect-ratio:4/5;margin:0 auto 22px;overflow:hidden;border:1px solid var(--acc2);border-radius:88px 88px 14px 14px;box-shadow:0 22px 46px -20px rgba(0,0,0,.72);position:relative}
.event-hero-photo::after{content:'';position:absolute;inset:7px;border:1px solid color-mix(in srgb,var(--acc2) 55%,transparent);border-radius:inherit;pointer-events:none}
.event-hero-photo img{width:100%;height:100%;object-fit:cover;display:block;animation:none}
.has-personal-cover :is(.event-hero-photo,.pframe,.gal .ph) img{object-position:var(--focus-mobile-x,50%) var(--focus-mobile-y,40%)}
.m-artdeco .event-hero-photo{border-radius:0;clip-path:polygon(15% 0,85% 0,100% 15%,100% 85%,85% 100%,15% 100%,0 85%,0 15%)}
.m-neon .event-hero-photo{border-radius:8px;border-color:var(--acc);box-shadow:0 0 28px color-mix(in srgb,var(--acc) 42%,transparent)}
.m-aurora .event-hero-photo{border-radius:48% 52% 44% 56%/52% 42% 58% 48%}
.shimmer{background:linear-gradient(100deg,var(--acc2) 20%,#fff 40%,var(--acc2) 60%);background-size:220% auto;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:shine 3.4s linear infinite}
@keyframes shine{to{background-position:-220% center}}

/* mempelai */
.person .nm{font-family:var(--fd);font-size:1.5rem;color:var(--tx)}
.person .scr-nm{font-family:var(--fs);font-size:2.1rem;color:var(--acc);font-weight:400}
.person .pr{font-size:.8rem;color:var(--mut);margin-top:4px}
.religious-event-title{max-width:18ch;margin:0 auto 22px;font-family:var(--fs);font-size:2.1rem;line-height:1.14;color:var(--acc);font-weight:400;overflow-wrap:anywhere}
.primary-speaker-name{margin:13px auto 15px;font-family:var(--fd);font-size:1.15rem;line-height:1.3;color:var(--tx);font-weight:700}
.primary-speaker-name::before{content:'Penceramah';display:block;margin-bottom:4px;font:800 .56rem/1.2 system-ui,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:var(--acc)}
.event-family-photo{margin:24px auto 0;max-width:280px;text-align:center}
.religious-event-title+.event-family-photo{margin-top:0}
.event-family-photo+.religious-speaker-profile{margin-top:30px}
.event-family-photo .pframe{width:min(230px,72vw);height:auto;aspect-ratio:4/3;border-radius:18px}
.event-family-photo figcaption{letter-spacing:.08em;text-transform:uppercase}
/* Profil pengajian/maulid umumnya memakai dua potret vertikal. Samakan rasio,
   ukuran, dan bentuk bingkainya agar foto pendamping tidak melebar sementara
   potret penceramah terlihat terlalu kecil. Rasio 3:4 juga menjaga kepala dan
   bahu tetap utuh pada sumber foto ponsel. */
.religious-companion-photo .pframe,
.religious-speaker-profile .pframe{
  width:min(188px,56vw);height:auto;aspect-ratio:3/4;
  border-radius:94px 94px 18px 18px
}
.religious-companion-photo .pframe img,
.religious-speaker-profile .pframe img{object-fit:cover}
.religious-companion-photo figcaption{max-width:25ch;margin:10px auto 0;font-size:.76rem;line-height:1.35;letter-spacing:.12em}
.religious-speaker-profile .primary-speaker-name{max-width:26ch;margin-top:14px}
.amp{font-family:var(--fs);font-size:2rem;color:var(--acc);margin:10px 0}

/* countdown */
.cd{display:flex;gap:9px;justify-content:center;margin-top:14px}
.cd .b{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 6px;min-width:62px;
  box-shadow:0 10px 26px -18px rgba(0,0,0,.35)}
.cd .n{font-family:var(--fd);font-size:1.55rem;font-variant-numeric:tabular-nums;line-height:1;color:var(--tx)}
.cd .l{font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mut);margin-top:6px}

/* acara */
.ev{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:22px;margin:16px auto 0;max-width:300px}
.ev .t{font-family:var(--fs);font-size:1.7rem;color:var(--acc);font-weight:400;margin-bottom:8px}
.ev.is-title-empty{padding-block:16px}
.ev.is-title-empty>.r:first-of-type{margin-top:0}
.ev .r{font-size:.86rem;margin:4px 0;color:var(--tx)}
.ev :is(.t,.r){overflow-wrap:anywhere}
.ev .v{font-weight:700;margin-top:8px}
.btn-i{display:inline-flex;align-items:center;gap:7px;margin:12px 4px 0;cursor:pointer;text-decoration:none;
  font:inherit;font-size:.78rem;font-weight:700;color:#fff;border:none;border-radius:22px;padding:10px 18px;
  background:linear-gradient(150deg,var(--cov),var(--cov2))}
.btn-i.o{background:transparent;color:var(--acc);border:1px solid var(--acc)}

/* story */
.sig-story-visual{position:relative;width:min(100%,360px);margin:22px auto;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:var(--card);box-shadow:0 18px 42px -30px rgba(0,0,0,.55)}
.sig-story-visual img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.sig-story-visual figcaption{position:absolute;right:10px;bottom:9px;padding:5px 8px;border-radius:999px;background:color-mix(in srgb,var(--page) 84%,transparent);color:var(--tx);font-size:.55rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;backdrop-filter:blur(8px)}
.story{max-width:300px;margin:10px auto 0;text-align:left}
.st{position:relative;padding:0 0 18px 26px;border-left:1.5px solid var(--line);margin-left:8px}
.st:last-child{border-left-color:transparent}
.st::before{content:'';position:absolute;left:-6.5px;top:2px;width:11px;height:11px;border-radius:50%;
  background:var(--acc);box-shadow:0 0 0 4px color-mix(in srgb,var(--acc) 20%,transparent)}
.st b{font-family:var(--fd);color:var(--acc)}
.st p{margin:2px 0 0;font-size:.85rem}

/* galeri */
.gal{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px}
.gal .ph{aspect-ratio:1;border-radius:12px;overflow:hidden;background:linear-gradient(140deg,var(--cov),var(--acc));
  display:grid;place-items:center;color:rgba(255,255,255,.85);font-size:.6rem;letter-spacing:.14em}
.gal .ph img{width:100%;height:100%;object-fit:cover}
.gal .ph.w{grid-column:1/-1;aspect-ratio:2/1}

/* form (rsvp + ucapan) */
.frm{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;max-width:310px;margin:14px auto 0;text-align:left}
.frm label,.frm .field-label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;color:var(--mut)}
.frm input,.frm textarea,.frm select{width:100%;font:inherit;font-size:.86rem;padding:10px 12px;margin:5px 0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--page);color:var(--tx)}
.frm textarea{resize:none;min-height:64px}
.seg{display:flex;gap:8px;margin:5px 0 12px}
.seg button{flex:1;font:inherit;font-size:.78rem;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--tx)}
.seg button.on{background:linear-gradient(150deg,var(--cov),var(--cov2));color:#fff;border-color:transparent}
.frm .btn-i{width:100%;justify-content:center;margin:2px 0 0}
.ok-msg{background:color-mix(in srgb,var(--acc) 14%,transparent);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;font-size:.82rem;margin-top:10px;display:none}

/* ucapan list */
.wishes{max-width:310px;margin:16px auto 0;text-align:left;display:flex;flex-direction:column;gap:10px;max-height:300px;overflow-y:auto}
.wish{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.wish b{font-size:.82rem;color:var(--acc)}
.wish p{margin:3px 0 0;font-size:.82rem;color:var(--tx)}
.wish .tm{font-size:.66rem;color:var(--mut);margin-top:4px}

/* amplop */
.gift{display:flex;flex-direction:column;gap:10px;max-width:310px;margin:14px auto 0}
.gcard{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px 15px;text-align:left}
.gcard .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-size:17px;color:#fff;
  background:linear-gradient(150deg,var(--cov),var(--cov2));flex:0 0 auto}
.gcard .nm{font-size:.85rem;font-weight:700}
.gcard-copy{min-width:0;flex:1}.gcard .sub{font-size:.74rem;color:var(--mut);overflow-wrap:anywhere;white-space:pre-line}
.gcard button{margin-left:auto;font:inherit;font-size:.7rem;font-weight:700;padding:7px 12px;border-radius:16px;cursor:pointer;
  border:1px solid var(--acc);background:transparent;color:var(--acc)}
.qris-img{max-width:230px;border-radius:12px;border:1px solid var(--line);margin-top:10px}

/* footer */
.foot-i{padding:34px 28px 30px;text-align:center;color:#fff;background:linear-gradient(168deg,var(--cov),var(--cov2))}
.foot-i .scr{font-family:var(--fs);font-size:1.9rem;color:var(--acc2)}
.foot-i .mk{margin-top:14px;font-size:.64rem;letter-spacing:.14em;color:rgba(255,255,255,.6)}
.foot-i .mk a{color:var(--acc2);text-decoration:none;font-weight:700}

/* music btn */
.music{position:fixed;right:16px;bottom:16px;z-index:40;width:44px;height:44px;border-radius:50%;cursor:pointer;
  border:1px solid var(--acc2);color:var(--acc2);background:color-mix(in srgb,var(--cov) 82%,transparent);
  backdrop-filter:blur(6px);display:grid;place-items:center;font-size:17px}
.music.playing{animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.ytwrap{position:fixed;left:-9999px;bottom:0;width:1px;height:1px;overflow:hidden}

/* watermark & iklan (tier gratis) */
.wm-ad{position:sticky;bottom:0;z-index:30;background:#141414;color:#cfcfcf;text-align:center;
  font-size:.68rem;letter-spacing:.05em;padding:10px;border-top:1px solid rgba(255,255,255,.1)}
.wm-ad a{color:#e8c877;font-weight:700;text-decoration:none}

/* reveal on scroll */
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.rv.in{opacity:1;transform:none}

/* petals canvas */
#petals{position:fixed;inset:0;pointer-events:none;z-index:35}

/* motif per family (SVG pattern via CSS) */
.m-royal .cover .motif{background:
  radial-gradient(circle at 12% 14%,var(--acc2) 0 2px,transparent 3px),
  radial-gradient(circle at 88% 22%,var(--acc2) 0 2px,transparent 3px),
  radial-gradient(circle at 20% 86%,var(--acc2) 0 2px,transparent 3px),
  radial-gradient(circle at 82% 80%,var(--acc2) 0 2px,transparent 3px)}
.m-batik .cover .motif{opacity:.12;background-image:repeating-radial-gradient(circle at 0 0,transparent 0 9px,var(--acc2) 9px 10px);background-size:34px 34px}
.m-islami .cover .motif{opacity:.14;background-image:
  repeating-conic-gradient(from 45deg,var(--acc2) 0 8deg,transparent 8deg 45deg);background-size:52px 52px}
.m-floral .cover .motif{opacity:.2;background-image:radial-gradient(ellipse 18px 10px at 24px 24px,var(--acc2) 30%,transparent 60%);background-size:48px 48px}
.m-rustic .cover .motif{opacity:.14;background-image:repeating-linear-gradient(60deg,transparent 0 16px,var(--acc2) 16px 17px),repeating-linear-gradient(-60deg,transparent 0 16px,var(--acc2) 16px 17px)}
.m-minimal .cover .motif,.m-cinema .cover .motif{display:none}
.m-luxe .cover .motif{opacity:.1;background-image:repeating-linear-gradient(45deg,var(--acc2) 0 1px,transparent 1px 26px)}
.m-playful .cover .motif{opacity:.22;background-image:
  radial-gradient(circle 5px at 20% 20%,var(--acc2) 60%,transparent 62%),
  radial-gradient(circle 3px at 70% 40%,var(--acc2) 60%,transparent 62%),
  radial-gradient(circle 4px at 40% 75%,var(--acc2) 60%,transparent 62%),
  radial-gradient(circle 3px at 85% 80%,var(--acc2) 60%,transparent 62%);
  background-size:120px 120px}
.m-memorial .cover .motif{opacity:.1;background-image:linear-gradient(var(--acc2) 1px,transparent 1px);background-size:100% 46px}

/* judul single (nama panjang) */
.cover h1.one{font-size:1.9rem;line-height:1.25}
.cover .sub{margin-top:10px;font-size:.9rem;color:rgba(255,255,255,.85)}
.sched{max-width:300px;margin:0 auto;text-align:left;font-size:.86rem}
.sched li{margin:6px 0;color:var(--tx)}

/* ================= HERO VARIAN PER KELUARGA ================= */
/* --- royal: bingkai ganda emas --- */
.royal-frame{border:1px solid var(--acc2);outline:1px solid color-mix(in srgb,var(--acc2) 45%,transparent);
  outline-offset:5px;border-radius:18px;padding:38px 26px;position:relative;max-width:320px}
.royal-frame .rc{position:absolute;width:22px;height:22px;border:1.5px solid var(--acc2)}
.royal-frame .rc.tl{top:-7px;left:-7px;border-right:0;border-bottom:0;border-radius:14px 0 0 0}
.royal-frame .rc.tr{top:-7px;right:-7px;border-left:0;border-bottom:0;border-radius:0 14px 0 0}
.royal-frame .rc.bl{bottom:-7px;left:-7px;border-right:0;border-top:0;border-radius:0 0 0 14px}
.royal-frame .rc.br{bottom:-7px;right:-7px;border-left:0;border-top:0;border-radius:0 0 14px 0}

/* --- floral: bunga sudut + foto arch --- */
.corn{position:absolute;width:130px;height:130px;pointer-events:none}
.corn.tl{top:6px;left:6px}
.corn.br{bottom:6px;right:6px}
.arch{width:170px;height:220px;margin:0 auto 18px;border-radius:100px 100px 14px 14px;overflow:hidden;
  border:3px solid var(--acc2);box-shadow:0 16px 40px -18px rgba(0,0,0,.5)}
.arch img{width:100%;height:100%;object-fit:cover}

/* --- batik: pita motif + monogram wajik --- */
.batik-band{position:absolute;left:0;right:0;height:34px;opacity:.65;background-image:
  repeating-linear-gradient(90deg,transparent 0 6px,var(--acc2) 6px 8px,transparent 8px 14px),
  repeating-linear-gradient(45deg,var(--acc2) 0 2px,transparent 2px 12px);background-size:28px 100%}
.batik-band.top{top:0}.batik-band.bot{bottom:0}
.wajik{width:84px;height:84px;margin:0 auto 20px;display:grid;place-items:center;position:relative}
.wajik::before{content:'';position:absolute;inset:0;transform:rotate(45deg);border:1.5px solid var(--acc2);border-radius:10px}
.wajik span{font-family:var(--fd);font-size:1.35rem;color:var(--acc2)}

/* --- islami: bismillah + mihrab --- */
.bismillah{font-family:'Amiri',serif;font-size:1.35rem;color:var(--acc2);margin-bottom:16px;direction:rtl}
.mihrab{border:1.5px solid var(--acc2);border-radius:150px 150px 18px 18px;padding:46px 30px 30px;max-width:300px;
  background:color-mix(in srgb,#ffffff 5%,transparent)}
.star8{margin-top:16px;color:var(--acc2);font-size:1.1rem;letter-spacing:.4em}

/* --- minimal: tipografi kiri --- */
.hero-minimal .inner{text-align:left;width:100%;max-width:330px}
.min-wrap .ey{margin-bottom:20px}
.min-rule{width:52px;height:2px;background:var(--acc2);margin-bottom:22px}
.hero-minimal h1,.hero-minimal h1.one{font-size:2.9rem;line-height:1.04;text-align:left}
.hero-minimal h1 .scr{display:inline;font-size:2.2rem;margin:0 8px}
.min-photo{width:96px;height:96px;border-radius:50%;overflow:hidden;border:2px solid var(--acc2);margin:22px 0 6px}
.min-photo img{width:100%;height:100%;object-fit:cover}
.hero-minimal .dt{margin-top:18px}

/* --- luxe: bingkai emas glow + kilau --- */
.luxe-frame{border:1px solid var(--acc);border-radius:16px;padding:44px 30px;max-width:310px;position:relative;
  box-shadow:0 0 30px -6px color-mix(in srgb,var(--acc) 55%,transparent), inset 0 0 24px -12px color-mix(in srgb,var(--acc) 50%,transparent)}
.spark{position:absolute;color:var(--acc2);opacity:.8;animation:twinkle 2.6s ease-in-out infinite}
.spark.s1{top:14%;left:16%;font-size:1rem}
.spark.s2{top:24%;right:14%;font-size:.8rem;animation-delay:.9s}
.spark.s3{bottom:18%;left:22%;font-size:.85rem;animation-delay:1.6s}
@keyframes twinkle{0%,100%{opacity:.25;transform:scale(.85)}50%{opacity:.95;transform:scale(1.1)}}

/* --- playful: balon + confetti + badge --- */
.balloons{position:absolute;top:26px;right:10px;width:150px;height:110px;pointer-events:none}
.hero-playful .motif{opacity:.35}
.party-badge{display:inline-block;margin-top:18px;background:var(--acc2);color:var(--cov);font-weight:800;
  font-size:.8rem;letter-spacing:.06em;padding:10px 22px;border-radius:26px;transform:rotate(-2.5deg);
  box-shadow:0 10px 24px -12px rgba(0,0,0,.5)}
.hero-playful h1,.hero-playful h1.one{font-size:2.6rem}

/* --- rustic: monogram kotak + kraft --- */
.mono.sq{border-radius:12px}
.hero-rustic .cover, .hero-rustic{background-blend-mode:multiply}

/* --- cinema: foto fullscreen --- */
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25) 0%,rgba(0,0,0,.05) 40%,rgba(0,0,0,.78) 88%)}
.hero-cinema{justify-content:flex-end}
.hero-cinema .inner{padding-bottom:34px}
.cine-body{text-shadow:0 2px 14px rgba(0,0,0,.6)}

/* --- memorial: garis khidmat --- */
.mem-line{width:64px;height:1px;background:var(--acc2);margin:18px auto;opacity:.8}

/* ================= GAYA ISI PER KELUARGA ================= */
.m-royal .ev{border:2px double var(--line)}
.m-luxe .ev{border-color:var(--acc);box-shadow:0 0 20px -10px color-mix(in srgb,var(--acc) 60%,transparent)}
.m-playful .ev{border-radius:24px;border-style:dashed;border-width:2px}
.m-playful .cd .b{border-radius:20px;border-style:dashed}
.m-islami .ev{border-radius:60px 60px 16px 16px;padding-top:28px}
.m-islami .ev.is-title-empty{padding-top:18px}
.m-islami .sec+.sec{border-top-style:dashed}
.m-batik .ev{border-radius:4px;border-width:2px}
.m-batik .sec h2::after{content:'';display:block;width:60px;height:5px;margin:10px auto 0;opacity:.6;
  background:repeating-linear-gradient(45deg,var(--acc) 0 2px,transparent 2px 8px)}
.m-minimal .ev{border:none;border-top:2px solid var(--acc);border-radius:0;background:transparent}
.m-minimal .orn,.m-minimal .divider{display:none}
.m-rustic .ev{border-radius:10px;background:color-mix(in srgb,var(--acc2) 12%,var(--card))}
.m-cinema .ev{border-radius:6px}
.m-memorial .ev{border-radius:6px;border-width:1px}

/* ================= COVER TERANG (marmer putih, sutra pastel, dll) ================= */
.light-cover .cover,.light-cover .gate,.light-cover .foot-i{color:var(--tx)}
.light-cover .cover .ey,.light-cover .gate .ey{color:var(--acc)}
.light-cover .cover .dt{color:var(--mut)}
.light-cover .cover h1 .scr,.light-cover .gate .names .scr{color:var(--acc)}
.light-cover .gate .frame{border-color:color-mix(in srgb,var(--tx) 18%,transparent)}
.light-cover .gate .frame::before,.light-cover .gate .frame::after{border-color:var(--acc)}
.light-cover .gate .to{color:var(--mut)}
.light-cover .gate .to b{color:var(--tx)}
.light-cover .gate button{color:#fff;background:linear-gradient(150deg,var(--acc),var(--acc2))}
.light-cover .mono{color:var(--acc);border-color:var(--acc)}
.light-cover .foot-i .kick,.light-cover .foot-i .scr{color:var(--acc)!important}
.light-cover .foot-i .mk{color:var(--mut)}
.light-cover .foot-i .mk a{color:var(--acc)}
.light-cover .music{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--page) 80%,transparent)}
.light-cover .cover .sub{color:var(--mut)}
.light-cover .cine-body,.light-cover .hero-cinema{color:#fff} /* cinema selalu overlay gelap */

/* ================= SIGNATURE: MARBLE ================= */
.hero-marble{background:
  radial-gradient(ellipse 90% 60% at 20% 15%, color-mix(in srgb,#ffffff 14%,transparent), transparent 60%),
  radial-gradient(ellipse 70% 50% at 85% 75%, color-mix(in srgb,#ffffff 9%,transparent), transparent 60%),
  repeating-linear-gradient(104deg, transparent 0 52px, color-mix(in srgb,var(--acc) 26%,transparent) 52px 53px, transparent 53px 120px),
  repeating-linear-gradient(23deg, transparent 0 88px, color-mix(in srgb,var(--acc) 14%,transparent) 88px 89px, transparent 89px 200px),
  linear-gradient(160deg,var(--cov),var(--cov2))}
.hero-marble .motif{display:none}
.marble-card{max-width:320px;padding:34px 24px}
.m-rule{width:120px;height:5px;margin:0 auto 22px;border-top:1px solid var(--acc2);border-bottom:1px solid var(--acc2)}
.marble-card .m-rule:last-child{margin:22px auto 0}
.m-marble .ev{border:1px solid var(--acc);border-top-width:3px}
.m-marble .cd .b{border-color:var(--acc)}

/* ================= SIGNATURE: SILK ================= */
.hero-silk{background:linear-gradient(175deg,var(--cov) 0%,var(--cov2) 70%)}
.hero-silk .motif{display:none}
.silk-body{position:relative;z-index:2;padding-bottom:70px}
.silk-waves{position:absolute;left:0;right:0;bottom:0;width:100%;height:150px;animation:silkflow 9s ease-in-out infinite alternate}
@keyframes silkflow{from{transform:translateX(-12px) scaleY(1)}to{transform:translateX(12px) scaleY(1.06)}}
.m-silk .ev{border:none;border-radius:18px;box-shadow:0 14px 34px -20px rgba(0,0,0,.3)}
.m-silk .sec h2::after{content:'';display:block;width:70px;height:8px;margin:10px auto 0;border-radius:50%;
  background:radial-gradient(ellipse at center,var(--acc2) 0%,transparent 70%);opacity:.8}

/* ================= SIGNATURE: GLASS ================= */
.hero-glass{overflow:hidden}
.glass-bg{position:absolute;inset:-6%;width:112%;height:112%;object-fit:cover;filter:blur(16px) saturate(1.15);transform:scale(1.08)}
.glass-shade{position:absolute;inset:0;background:color-mix(in srgb,var(--cov) 35%,transparent)}
.glass-panel{position:relative;z-index:2;max-width:300px;padding:40px 28px;border-radius:26px;
  background:color-mix(in srgb,#ffffff 16%,transparent);
  border:1px solid color-mix(in srgb,#ffffff 42%,transparent);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.45)}
.light-cover .glass-panel{background:color-mix(in srgb,#ffffff 45%,transparent)}
.m-glass .ev,.m-glass .frm,.m-glass .cd .b{background:color-mix(in srgb,#ffffff 55%,var(--card));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.dark-page.m-glass .ev,.dark-page.m-glass .frm,.dark-page.m-glass .cd .b{background:color-mix(in srgb,#ffffff 8%,var(--card))}

/* ================= SIGNATURE: AURORA ================= */
.hero-aurora{background:linear-gradient(180deg,var(--cov),var(--cov2))}
.hero-aurora .motif{display:none}
.blob{position:absolute;width:340px;height:340px;border-radius:50%;filter:blur(70px);opacity:.5;pointer-events:none}
.blob.b1{background:var(--acc);top:-8%;left:-22%;animation:drift1 11s ease-in-out infinite alternate}
.blob.b2{background:var(--acc2);bottom:-12%;right:-24%;animation:drift2 13s ease-in-out infinite alternate}
.blob.b3{background:color-mix(in srgb,var(--acc) 50%,#ffffff);top:38%;left:52%;width:200px;height:200px;opacity:.3;animation:drift1 15s ease-in-out infinite alternate-reverse}
@keyframes drift1{from{transform:translate(0,0) scale(1)}to{transform:translate(60px,40px) scale(1.15)}}
@keyframes drift2{from{transform:translate(0,0) scale(1.1)}to{transform:translate(-50px,-45px) scale(.95)}}
.aurora-panel{position:relative;z-index:2}
.aurora-panel .ey{color:var(--acc2)}
.m-aurora .ev{border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  box-shadow:0 0 26px -12px color-mix(in srgb,var(--acc) 55%,transparent)}
.m-aurora .sec+.sec{border-top-color:color-mix(in srgb,var(--acc) 30%,transparent)}

/* ================= SIGNATURE: ART DECO ================= */
.hero-artdeco{background:linear-gradient(180deg,var(--cov),var(--cov2))}
.hero-artdeco .motif{display:none}
.deco-rays{position:absolute;inset:0;pointer-events:none;opacity:.16;
  background:repeating-conic-gradient(from -90deg at 50% 108%, var(--acc) 0deg 2deg, transparent 2deg 12deg)}
.deco-frame{position:relative;border:1px solid var(--acc);outline:1px solid var(--acc);outline-offset:6px;
  padding:46px 30px 34px;max-width:310px}
.deco-fan{width:86px;height:43px;margin:0 auto 18px;border:1.5px solid var(--acc2);border-bottom:0;
  border-radius:86px 86px 0 0;position:relative}
.deco-fan::before,.deco-fan::after{content:'';position:absolute;border:1.5px solid var(--acc2);border-bottom:0;left:50%;transform:translateX(-50%)}
.deco-fan::before{width:56px;height:28px;bottom:0;border-radius:56px 56px 0 0}
.deco-fan::after{width:26px;height:13px;bottom:0;border-radius:26px 26px 0 0}
.deco-div{display:flex;align-items:center;justify-content:center;gap:10px;color:var(--acc2);margin:14px 0 4px;font-size:.7rem}
.deco-div span{width:44px;height:1px;background:var(--acc)}
.hero-artdeco h1,.hero-artdeco h1.one{letter-spacing:.06em;text-transform:uppercase;font-size:1.9rem}
.hero-artdeco h1 .scr{text-transform:none}
.m-artdeco .ev{border:1px solid var(--acc);border-radius:0;position:relative}
.m-artdeco .ev::before{content:'';position:absolute;inset:4px;border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);pointer-events:none}
.m-artdeco .sec h2{letter-spacing:.08em;text-transform:uppercase;font-size:1.2rem}

/* ================= SIGNATURE: NEON ================= */
.hero-neon{background:
  linear-gradient(color-mix(in srgb,var(--acc) 7%,transparent) 1px, transparent 1px),
  linear-gradient(90deg, color-mix(in srgb,var(--acc) 7%,transparent) 1px, transparent 1px),
  linear-gradient(180deg,var(--cov),var(--cov2));background-size:34px 34px,34px 34px,cover}
.hero-neon .motif{display:none}
.neon-frame{border:1.5px solid var(--acc);border-radius:18px;padding:44px 30px;max-width:310px;
  animation:neonpulse 2.4s ease-in-out infinite}
@keyframes neonpulse{
  0%,100%{box-shadow:0 0 14px -4px var(--acc), inset 0 0 14px -8px var(--acc)}
  50%{box-shadow:0 0 30px -4px var(--acc), inset 0 0 22px -8px var(--acc)}}
.neon-title h1{text-shadow:0 0 14px color-mix(in srgb,var(--acc) 75%,transparent)}
.neon-title .scr{color:var(--acc)!important}
.hero-neon .ey{color:var(--acc)}
.m-neon .ev{border:1px solid var(--acc);box-shadow:0 0 16px -8px var(--acc)}
.m-neon .cd .b{border-color:var(--acc);box-shadow:0 0 12px -8px var(--acc)}
.m-neon .btn-i{background:var(--acc);color:var(--cov)}

/* ================= GATE FX: EFEK PEMBUKA PER KELUARGA ================= */
.gate{perspective:1000px;overflow:hidden}
.gate-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;
  transition:opacity .5s ease, transform .5s ease}
.gate.opening .gate-inner{opacity:0;transform:scale(.96)}
.fxd{position:absolute;pointer-events:none}

/* --- tirai (luxe/artdeco/cinema) --- */
.fx-curtain .curt{top:0;bottom:0;width:52%;z-index:1;
  background:repeating-linear-gradient(90deg,var(--cov) 0 16px,color-mix(in srgb,var(--cov2) 70%,#000) 22px,var(--cov) 30px);
  box-shadow:inset 0 -40px 60px -30px rgba(0,0,0,.6);
  transition:transform 1.15s cubic-bezier(.65,0,.35,1)}
.fx-curtain .curt.L{left:0;border-right:3px solid var(--acc)}
.fx-curtain .curt.R{right:0;border-left:3px solid var(--acc)}
.fx-curtain.opening .curt.L{transform:translateX(-108%)}
.fx-curtain.opening .curt.R{transform:translateX(108%)}
.fx-curtain .spot{inset:0;z-index:0;opacity:0;transition:opacity .9s ease .3s;
  background:radial-gradient(ellipse 60% 45% at 50% 38%, color-mix(in srgb,var(--acc2) 30%,transparent), transparent 70%)}
.fx-curtain.opening .spot{opacity:1}
.fx-curtain .gate-inner{z-index:2}

/* --- pintu gerbang (islami/batik) --- */
.fx-doors .door{top:0;bottom:0;width:50.5%;z-index:1;background:linear-gradient(180deg,var(--cov),var(--cov2));
  border:1px solid color-mix(in srgb,var(--acc2) 55%,transparent);
  transition:transform 1.15s cubic-bezier(.6,0,.4,1);backface-visibility:hidden}
.fx-doors .door.L{left:0;transform-origin:left center;border-radius:0 160px 0 0;
  box-shadow:inset -20px 0 40px -20px rgba(0,0,0,.5)}
.fx-doors .door.R{right:0;transform-origin:right center;border-radius:160px 0 0 0;
  box-shadow:inset 20px 0 40px -20px rgba(0,0,0,.5)}
.fx-doors.opening .door.L{transform:rotateY(-82deg)}
.fx-doors.opening .door.R{transform:rotateY(82deg)}

/* --- amplop bersegel (royal/marble) --- */
.fx-envelope .env{left:50%;bottom:6%;transform:translateX(-50%);width:240px;height:120px;z-index:1;
  background:color-mix(in srgb,var(--cov2) 80%,#fff 6%);border:1.5px solid var(--acc2);border-radius:10px;
  box-shadow:0 20px 40px -18px rgba(0,0,0,.55)}
.fx-envelope .env::before{content:'';position:absolute;inset:0;
  background:linear-gradient(115deg,transparent 46%,color-mix(in srgb,var(--acc2) 30%,transparent) 46% 54%,transparent 54%)}
.fx-envelope .env-flap{position:absolute;left:-1px;right:-1px;top:-58px;height:60px;z-index:2;
  background:color-mix(in srgb,var(--cov) 88%,#fff 5%);border:1.5px solid var(--acc2);border-bottom:0;
  clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:50% 0;
  transition:transform .9s cubic-bezier(.6,0,.4,1)}
.fx-envelope.opening .env-flap{transform:rotateX(165deg)}
.fx-envelope .env-seal{position:absolute;left:50%;top:-8px;transform:translateX(-50%);z-index:3;
  width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,var(--acc2),var(--acc));color:var(--cov);
  font-family:var(--fd);font-size:.82rem;font-weight:700;
  box-shadow:0 6px 16px -6px rgba(0,0,0,.6), inset 0 0 0 3px color-mix(in srgb,var(--cov) 25%,transparent);
  transition:transform .5s ease, opacity .5s ease}
.fx-envelope.opening .env-seal{transform:translateX(-50%) scale(.4) rotate(40deg);opacity:0}

/* --- kado meletus (playful) --- */
.fx-gift .gift{left:50%;bottom:5%;transform:translateX(-50%);width:150px;height:150px;z-index:1}
.fx-gift .g-box{position:absolute;left:10px;right:10px;bottom:0;height:96px;border-radius:10px;
  background:linear-gradient(180deg,var(--acc),color-mix(in srgb,var(--acc) 70%,#000 12%));
  box-shadow:0 18px 36px -16px rgba(0,0,0,.55)}
.fx-gift .g-box::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);
  background:var(--acc2)}
.fx-gift .g-lid{position:absolute;left:0;right:0;bottom:88px;height:34px;border-radius:8px;z-index:2;
  background:linear-gradient(180deg,color-mix(in srgb,var(--acc) 85%,#fff 12%),var(--acc));
  box-shadow:0 6px 14px -6px rgba(0,0,0,.4);
  transition:transform 1s cubic-bezier(.5,-0.4,.4,1)}
.fx-gift .g-lid::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:22px;transform:translateX(-50%);background:var(--acc2)}
.fx-gift .g-bow{position:absolute;top:-16px;width:26px;height:20px;border:5px solid var(--acc2);border-radius:50% 50% 0 0}
.fx-gift .g-bow.bl{left:calc(50% - 26px);transform:rotate(-22deg)}
.fx-gift .g-bow.br{right:calc(50% - 26px);transform:rotate(22deg)}
.fx-gift .g-knot{position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:14px;height:14px;border-radius:4px;background:var(--acc2)}
.fx-gift.opening .g-lid{transform:translateY(-160px) rotate(-18deg)}
.fx-gift.opening .g-box{animation:giftshake .5s ease}
@keyframes giftshake{0%,100%{transform:none}25%{transform:translateX(-4px) rotate(-2deg)}75%{transform:translateX(4px) rotate(2deg)}}

/* --- power-on neon --- */
.fx-poweron .flick{inset:0;z-index:3;background:#000;opacity:0;pointer-events:none}
.fx-poweron.opening .flick{animation:flick 1s steps(1) forwards}
@keyframes flick{0%{opacity:.9}8%{opacity:.1}16%{opacity:.85}24%{opacity:0}38%{opacity:.6}46%{opacity:0}62%{opacity:.35}70%{opacity:0}100%{opacity:0}}
.fx-poweron .gate-inner{transition-delay:.55s}

/* --- ledakan cahaya (aurora/glass) --- */
.fx-lightburst .lburst{left:50%;top:45%;width:60px;height:60px;border-radius:50%;z-index:1;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  background:radial-gradient(circle,#ffffff 0%,color-mix(in srgb,var(--acc2) 60%,transparent) 45%,transparent 70%);
  transition:transform .8s ease-out, opacity .8s ease-out}
.fx-lightburst.opening .lburst{transform:translate(-50%,-50%) scale(14);opacity:.9}

/* fade (memorial/minimal): default halus, tanpa dekor */

/* ================= SCENE ANIMASI (karakter per kategori) ================= */
.scene{margin-top:16px;display:flex;justify-content:center;position:relative;z-index:2}
.scene svg{width:min(225px,60vw);height:auto;overflow:visible}
.scene .chr,.scene .hrt,.scene .cap,.scene .crib,.scene .bl,.scene .lant,.scene .fl,
.scene .wave-arm,.scene .zz,.scene .tw{transform-box:fill-box}
.scene .chr{transform-origin:50% 100%}
.scene .g1{animation:leanR 4.2s ease-in-out infinite}
.scene .g2{animation:leanL 4.2s ease-in-out infinite}
@keyframes leanR{0%,26%,74%,100%{transform:rotate(0)}42%,58%{transform:rotate(7deg)}}
@keyframes leanL{0%,26%,74%,100%{transform:rotate(0)}42%,58%{transform:rotate(-7deg)}}
.scene .hrt{transform-origin:50% 50%;opacity:0;animation:hpop 4.2s ease-in-out infinite}
.scene .h2{animation-delay:.4s}
@keyframes hpop{0%,36%{transform:scale(0);opacity:0}47%{transform:scale(1.25);opacity:1}56%{transform:scale(1)}76%{transform:scale(1) translateY(-24px);opacity:0}100%{opacity:0}}
.scene .fl{transform-origin:50% 100%;animation:flick2 .5s ease-in-out infinite alternate}
.scene .f2{animation-delay:.16s}.scene .f3{animation-delay:.32s}
@keyframes flick2{from{transform:scaleY(.82) scaleX(1.05)}to{transform:scaleY(1.2) scaleX(.92)}}
.scene .bl{animation:bob2 3.2s ease-in-out infinite alternate}
.scene .b2{animation-delay:1.1s}
@keyframes bob2{from{transform:translateY(0)}to{transform:translateY(-9px)}}
.scene .cap{transform-origin:50% 50%;animation:toss 3.6s cubic-bezier(.4,0,.6,1) infinite}
@keyframes toss{0%,12%{transform:translateY(0) rotate(0)}45%{transform:translateY(-44px) rotate(170deg)}72%,100%{transform:translateY(0) rotate(360deg)}}
.scene .crib{transform-origin:50% 100%;animation:rock 3.4s ease-in-out infinite alternate}
@keyframes rock{from{transform:rotate(-3.4deg)}to{transform:rotate(3.4deg)}}
.scene .zz{opacity:0;animation:zzz 3.4s ease-in-out infinite}
.scene .z2{animation-delay:.55s}.scene .z3{animation-delay:1.1s}
@keyframes zzz{0%{opacity:0;transform:translateY(4px)}30%,60%{opacity:.9}100%{opacity:0;transform:translateY(-10px)}}
.scene .wave-arm{transform-origin:0% 100%;animation:wave 1.5s ease-in-out infinite}
@keyframes wave{0%,100%{transform:rotate(0)}45%{transform:rotate(16deg)}}
.scene .lant{transform-origin:50% 0%;animation:swing2 2.8s ease-in-out infinite alternate}
@keyframes swing2{from{transform:rotate(-8deg)}to{transform:rotate(8deg)}}
.scene .glowc{animation:glowp 1.8s ease-in-out infinite alternate}
@keyframes glowp{from{opacity:.55}to{opacity:1}}
.scene .tw{animation:twk 2.2s ease-in-out infinite}
.scene .t2{animation-delay:.7s}.scene .t3{animation-delay:1.3s}
@keyframes twk{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1.15)}}
.scene .armL{transform-origin:0% 0%;animation:shake1 1.4s ease-in-out infinite}
.scene .armR{transform-origin:100% 0%;animation:shake1 1.4s ease-in-out infinite}
@keyframes shake1{0%,100%{transform:translateY(0)}50%{transform:translateY(3px)}}
/* kulit siluet elegan: satu warna emas, wajah disembunyikan */
.sc-sil svg [fill]{fill:var(--acc2)}
.sc-sil svg [stroke]{stroke:var(--acc2)}
.sc-sil svg .face{display:none}
.sc-sil svg .shadow{fill:#000}
/* kulit neon: garis menyala */
.sc-neon svg *{fill:none!important;stroke:var(--acc);stroke-width:1.8}
.sc-neon svg .face,.sc-neon svg .shadow{display:none}
.sc-neon svg{filter:drop-shadow(0 0 5px var(--acc))}

/* ================= KARTU POTRET THE BRIDE / THE GROOM ================= */
.pcouple{display:flex;align-items:flex-start;justify-content:center;gap:6px}
.pcard{flex:1;max-width:150px}
.pamp{margin-top:64px;flex:0 0 auto}
.pframe{width:118px;height:150px;margin:0 auto 12px;border-radius:80px 80px 10px 10px;overflow:hidden;
  border:2px solid var(--acc2);box-shadow:0 14px 34px -16px rgba(0,0,0,.45);position:relative}
.pframe img{width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate}
/* Kartu pasangan memakai urutan Groom kiri — Bride kanan. Kelas mirror
   diberikan renderer setelah memperhitungkan arah visual aset sebelumnya,
   sehingga foto tetap saling menghadap tanpa mengubah file aslinya. */
.pcouple.couple-order-groom-first .pframe img.photo-side-mirror-inward{transform:scaleX(-1)!important;animation:none}
.pframe.pmono{display:grid;place-items:center;font-family:var(--fs);font-size:2.6rem;color:var(--acc);
  background:color-mix(in srgb,var(--acc2) 18%,var(--card))}
.plabel{font-size:.6rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.pcard .scr-nm{font-size:1.5rem;line-height:1.15}
.pcard .pr{font-size:.72rem;margin-top:5px}
/* sentuhan per keluarga */
.m-artdeco .pframe{border-radius:0}
.m-minimal .pframe{border-radius:50%}
.m-glass .pframe{border-radius:22px}
.m-neon .pframe{box-shadow:0 0 18px -6px var(--acc);border-color:var(--acc)}

/* ================= SLIDESHOW & VARIASI ANIMASI SCROLL ================= */
.fadeable{transition:opacity 1s ease}
.sec.rv{transition:opacity .85s ease,transform .85s ease,filter .85s ease;filter:blur(5px)}
.sec.rv.in{filter:blur(0)}
.sec.rv:nth-of-type(3n+2){transform:translateX(-34px)}
.sec.rv:nth-of-type(3n){transform:translateX(34px)}
.sec.rv:nth-of-type(4n+1){transform:translateY(30px) scale(.96)}
.sec.rv.in{transform:none}
/* story: timeline zig-zag */
.st:nth-child(even){transform:translateX(16px)}

/* ================= TOMBOL AUTO-SCROLL HALAMAN ================= */
html.du-page-autoscrolling{scroll-behavior:auto!important}
.autoscroll{
  position:fixed;
  left:max(14px,calc(50% - 226px));
  bottom:max(14px,env(safe-area-inset-bottom));
  z-index:50;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:auto;
  min-width:94px;
  height:46px;
  min-height:44px;
  padding:0 15px;
  border:1px solid var(--acc2,#d8bd84);
  border-radius:999px;
  color:var(--acc2,#d8bd84);
  background:color-mix(in srgb,var(--cov,#171717) 86%,transparent);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.72);
  backdrop-filter:blur(12px) saturate(1.16);
  cursor:pointer;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:opacity .22s ease,transform .25s ease,background .2s ease,color .2s ease;
}
body.inv-opened .autoscroll{opacity:1;pointer-events:auto;transform:none}
.autoscroll .autoscroll-icon{display:inline-grid;place-items:center;width:15px;font:800 .76rem/1 system-ui,sans-serif}
.autoscroll .autoscroll-label{font:800 .62rem/1 system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase}
.autoscroll.on{background:var(--acc2,#d8bd84);color:var(--cov,#171717)}
.autoscroll:focus-visible{outline:2px solid var(--acc,#fff);outline-offset:3px}
.light-cover .autoscroll{color:var(--acc);border-color:var(--acc);background:color-mix(in srgb,var(--page) 88%,transparent)}
.light-cover .autoscroll.on{background:var(--acc);color:#fff}
/* Tema Signature lintas kategori yang belum memiliki manifest layout p2 tetap
   memperoleh satu dock premium yang utuh. Layout visualnya tetap memakai
   family masing-masing; hanya kontrol universal yang digeneralisasi. */
.sig:not([class*="sig-p2-"]) > :is(.music,.giftfab){display:none}
.sig:not([class*="sig-p2-"]) .sig-v2-dock{
  position:fixed;left:50%;bottom:max(12px,env(safe-area-inset-bottom));z-index:46;
  display:flex;align-items:center;justify-content:center;gap:2px;width:min(calc(100% - 20px),440px);
  min-height:56px;padding:5px 7px;border:1px solid var(--line);border-radius:18px;
  background:color-mix(in srgb,var(--page) 82%,transparent);box-shadow:0 18px 48px -22px rgba(0,0,0,.7);
  backdrop-filter:blur(16px) saturate(1.15);transform:translateX(-50%);transition:opacity .22s ease,transform .25s ease;
}
.sig:not([class*="sig-p2-"]) .sig-v2-dock:is(.is-hidden,.is-prehero){transform:translate(-50%,calc(100% + 28px));opacity:0;pointer-events:none}
.sig:not([class*="sig-p2-"]) .sig-v2-dock :is(button,a){
  display:flex;flex:1 1 0;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-width:0;min-height:46px;padding:4px;border:0;background:transparent;color:var(--tx);
  font:inherit;text-decoration:none;cursor:pointer;touch-action:manipulation;
}
.sig:not([class*="sig-p2-"]) .sig-v2-dock :is(button,a)>span{font-size:1.02rem;line-height:1}
.sig:not([class*="sig-p2-"]) .sig-v2-dock :is(button,a)>small{font-size:.54rem;font-weight:750;letter-spacing:.04em;white-space:nowrap}
.sig:not([class*="sig-p2-"]) .sig-v2-dock :is(button,a).on{color:var(--acc)}
.sig:not([class*="sig-p2-"]) .sig-nav-sheet{position:fixed;z-index:95;left:50%;bottom:0;width:min(100%,480px);padding:30px 24px max(28px,env(safe-area-inset-bottom));border-top:1px solid var(--line);background:color-mix(in srgb,var(--page) 94%,transparent);color:var(--tx);box-shadow:0 -24px 70px -28px rgba(0,0,0,.68);backdrop-filter:blur(22px) saturate(1.2);transform:translateX(-50%);clip-path:inset(100% 0 0);opacity:0;pointer-events:none;transition:clip-path .24s ease,opacity .22s ease}
.sig:not([class*="sig-p2-"]) .sig-nav-sheet.on{clip-path:inset(0);opacity:1;pointer-events:auto}
.sig:not([class*="sig-p2-"]) .sig-nav-sheet[hidden]{display:none}
.sig:not([class*="sig-p2-"]) .sig-nav-sheet>strong{display:block;font-family:var(--fd);font-size:1.5rem;margin-bottom:18px}
.sig:not([class*="sig-p2-"]) .sig-sheet-close{position:absolute;right:18px;top:18px;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--tx);font-size:1.35rem;cursor:pointer}
.sig:not([class*="sig-p2-"]) .sig-nav-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.sig:not([class*="sig-p2-"]) .sig-nav-grid a{min-height:44px;display:flex;align-items:center;padding:10px 13px;border:1px solid var(--line);color:var(--tx);text-decoration:none;font-size:.78rem;font-weight:700}
.sig:not([class*="sig-p2-"]).sig-v2-ready .foot-i{padding-bottom:92px}

/* Pada SIGNATURE tombol menjadi item di dalam dock yang sama dengan Musik,
   Daftar Isi, dan RSVP; aturan floating di atas hanya untuk renderer lama. */
.sig .sig-v2-dock .autoscroll,
.sig .sig-v2-dock .autoscroll.on{
  position:static;
  inset:auto;
  z-index:auto;
  width:auto;
  min-width:68px;
  height:auto;
  min-height:46px;
  padding:4px 8px;
  border:0;
  border-radius:0;
  background:transparent;
  color:var(--tx);
  box-shadow:none;
  backdrop-filter:none;
  transform:none;
}
.sig .sig-v2-dock .autoscroll.on{color:var(--acc);box-shadow:inset 0 -2px var(--acc)}
@media(max-width:299px){
  .sec{padding-inline:18px}
  .cd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:min(100%,166px);margin-inline:auto}
  .cd .b{min-width:0}
}

/* ================= SWIPE HINT ================= */
.swipe-hint{margin-top:16px;display:flex;flex-direction:column;align-items:center;opacity:.8}
.swipe-hint .chev{font-size:1rem;line-height:.55;animation:chup 1.6s ease-in-out infinite}
.swipe-hint .c2{animation-delay:.18s;opacity:.6}
.swipe-hint small{font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;margin-top:7px}
@keyframes chup{0%,100%{transform:translateY(0);opacity:.35}50%{transform:translateY(-6px);opacity:1}}

/* ================= FOTO HIDUP: KEN BURNS + LAYOUT PER KARAKTER ================= */
.gal .ph{cursor:pointer}
.gal .ph img{animation:kb 13s ease-in-out infinite alternate;will-change:transform}
.gal .ph:nth-child(2) img{animation-duration:16s;animation-direction:alternate-reverse}
.gal .ph:nth-child(3) img{animation-duration:19s}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.16) translate(-3%,2.5%)}}
.hero-bg{animation:kb 18s ease-in-out infinite alternate}
.arch img,.min-photo img{animation:kb 15s ease-in-out infinite alternate}

/* polaroid miring (floral/silk/rustic/playful — imut) */
.m-floral .gal,.m-silk .gal,.m-rustic .gal,.m-playful .gal{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:0;padding:6px 0}
.m-floral .gal .ph,.m-silk .gal .ph,.m-rustic .gal .ph,.m-playful .gal .ph{
  aspect-ratio:auto;background:#fff;border-radius:4px;padding:7px 7px 24px;margin:2px -10px 16px;
  box-shadow:0 14px 30px -14px rgba(0,0,0,.45);width:42%;transition:transform .25s ease;position:relative}
.m-floral .gal .ph.w,.m-silk .gal .ph.w,.m-rustic .gal .ph.w,.m-playful .gal .ph.w{width:60%}
.m-floral .gal .ph:nth-child(odd),.m-silk .gal .ph:nth-child(odd),
.m-rustic .gal .ph:nth-child(odd),.m-playful .gal .ph:nth-child(odd){transform:rotate(-4deg)}
.m-floral .gal .ph:nth-child(even),.m-silk .gal .ph:nth-child(even),
.m-rustic .gal .ph:nth-child(even),.m-playful .gal .ph:nth-child(even){transform:rotate(3.4deg)}
.m-floral .gal .ph:hover,.m-silk .gal .ph:hover,.m-rustic .gal .ph:hover,.m-playful .gal .ph:hover{
  transform:rotate(0) scale(1.05);z-index:3}
.m-floral .gal .ph img,.m-silk .gal .ph img,.m-rustic .gal .ph img,.m-playful .gal .ph img{
  aspect-ratio:1;width:100%;object-fit:cover;border-radius:2px;display:block}
/* selotip washi (playful) */
.m-playful .gal .ph::before{content:'';position:absolute;top:-9px;left:50%;width:58px;height:17px;
  transform:translateX(-50%) rotate(-5deg);background:color-mix(in srgb,var(--acc2) 75%,#fff 15%);
  opacity:.9;border-radius:2px}

/* bingkai emas elegan (royal/marble/luxe/artdeco/batik) — foto utama arch */
.m-royal .gal .ph,.m-marble .gal .ph,.m-luxe .gal .ph,.m-artdeco .gal .ph,.m-batik .gal .ph{
  border:1px solid var(--acc);outline:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
  outline-offset:3px;padding:5px;background:var(--card)}
.m-royal .gal .ph.w,.m-marble .gal .ph.w,.m-luxe .gal .ph.w,.m-batik .gal .ph.w{
  border-radius:130px 130px 10px 10px}
.m-royal .gal .ph.w img,.m-marble .gal .ph.w img,.m-luxe .gal .ph.w img,.m-batik .gal .ph.w img{
  border-radius:124px 124px 6px 6px}
.m-artdeco .gal .ph{border-radius:0}

/* kaca & glow (glass/aurora/neon) */
.m-glass .gal .ph,.m-aurora .gal .ph{border-radius:18px;
  border:1px solid color-mix(in srgb,#ffffff 45%,transparent);
  box-shadow:0 16px 36px -18px rgba(0,0,0,.4)}
.m-neon .gal .ph{border-radius:12px;border:1px solid var(--acc);box-shadow:0 0 18px -8px var(--acc)}

/* ================= LIGHTBOX (foto bisa diklik) ================= */
.lb{position:fixed;inset:0;z-index:90;background:rgba(8,8,10,.92);display:none;
  align-items:center;justify-content:center;padding:22px}
.lb.on{display:flex}
.lb img{max-width:93vw;max-height:80vh;border-radius:10px;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);
  animation:lbin .28s ease}
@keyframes lbin{from{transform:scale(.92);opacity:0}to{transform:scale(1);opacity:1}}
.lb button{position:absolute;font:inherit;color:#fff;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.3);border-radius:50%;width:44px;height:44px;cursor:pointer;
  display:grid;place-items:center;font-size:1.1rem;backdrop-filter:blur(4px)}
.lb .lb-x{top:18px;right:18px}
.lb .lb-p{left:12px;top:50%;transform:translateY(-50%)}
.lb .lb-n{right:12px;top:50%;transform:translateY(-50%)}
.lb-meta{position:absolute;left:50%;bottom:max(22px,env(safe-area-inset-bottom));width:min(82vw,560px);transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:12px;color:#fff;text-align:center;font:600 .68rem/1.4 system-ui,sans-serif;letter-spacing:.06em}
.lb-count{flex:0 0 auto;padding-right:12px;border-right:1px solid rgba(255,255,255,.32);font-variant-numeric:tabular-nums}
.lb-cap{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.82}

/* ================= TIMELINE ACARA BERIKON ================= */
html{scroll-behavior:smooth}
.tline{max-width:310px;margin:14px auto 0;text-align:left;position:relative}
.tline::before{content:'';position:absolute;left:23px;top:14px;bottom:14px;width:1.5px;
  background:linear-gradient(180deg,transparent,var(--acc) 12%,var(--acc) 88%,transparent)}
.tl-item{display:flex;gap:16px;padding:10px 0;position:relative}
.tl-ico{width:48px;height:48px;border-radius:50%;flex:0 0 auto;display:grid;place-items:center;
  font-size:1.15rem;background:var(--card);border:1.5px solid var(--acc);z-index:1;
  box-shadow:0 8px 20px -12px rgba(0,0,0,.4)}
.tl-card{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.tl-t{font-family:var(--fs);font-size:1.45rem;color:var(--acc);line-height:1.1}
.tl-w{font-weight:700;font-size:.9rem;margin:3px 0 2px;color:var(--tx)}
.tl-card .r{font-size:.82rem;color:var(--mut);margin:2px 0}
.tl-card .r.v{font-weight:700;color:var(--tx)}
.m-artdeco .tl-card{border-radius:0}
.m-neon .tl-ico{box-shadow:0 0 14px -6px var(--acc)}
.m-playful .tl-card{border-radius:20px;border-style:dashed;border-width:2px}

/* ================= TOMBOL TITIP HADIAH MENGAMBANG ================= */
.giftfab{position:fixed;right:16px;bottom:70px;z-index:40;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;font-size:19px;text-decoration:none;
  background:linear-gradient(150deg,var(--acc2),var(--acc));border:1px solid var(--acc2);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.5);animation:fabpulse 2.4s ease-in-out infinite}
@keyframes fabpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* ================= PENUTUP SIGNATURE (foto besar) ================= */
.closing{position:relative;overflow:hidden;min-height:340px;display:flex;align-items:flex-end}
.closing img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  animation:kb 18s ease-in-out infinite alternate}
.closing-ov{position:relative;z-index:2;width:100%;padding:80px 28px 34px;text-align:center;color:#fff;
  background:linear-gradient(180deg,transparent,rgba(0,0,0,.72))}
.closing-nm{font-family:var(--fs);font-size:2.3rem;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.6)}

/* ================= UPGRADE TIER SIGNATURE ================= */
/* nama di cover: teks gradien emas hidup */
.sig .cover h1,.sig .cover h1.one{
  background:linear-gradient(100deg,var(--acc2) 15%,#ffffff 38%,var(--acc2) 55%,var(--acc) 80%);
  background-size:230% auto;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:shine 4.5s linear infinite}
.sig.light-cover .cover h1{background:linear-gradient(100deg,var(--acc) 15%,var(--acc2) 40%,var(--acc) 65%);
  background-size:230% auto;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
/* pembatas antar bagian: permata + garis (ganti garis polos) */
.sig .sec+.sec{border-top:none;padding-top:30px}
.sig .sec+.sec::before{content:'◆';display:flex;align-items:center;justify-content:center;gap:12px;
  color:var(--acc);font-size:.6rem;margin:0 auto 22px;letter-spacing:0}
/* monogram watermark halus */
.wm-mono{position:fixed;inset:0;display:grid;place-items:center;z-index:0;pointer-events:none;
  font-family:var(--fd);font-size:min(58vw,300px);color:var(--acc);opacity:.045;user-select:none}
.sig .sec,.sig .cover,.sig .foot-i,.sig .closing{position:relative;z-index:1}
/* kartu & form signature: glow lembut */
.sig .ev,.sig .tl-card,.sig .frm,.sig .gcard{
  box-shadow:0 14px 34px -20px rgba(0,0,0,.35), inset 0 0 0 .5px color-mix(in srgb,var(--acc) 30%,transparent)}
.sig .pframe{box-shadow:0 18px 40px -16px rgba(0,0,0,.5), 0 0 0 4px color-mix(in srgb,var(--acc) 18%,transparent)}
.sig .pframe img[class*="photo-focus-"]{height:100%;max-width:none;object-fit:cover;animation:none;
  transform:scale(var(--focus-z,2.65));transform-origin:var(--focus-x,50%) var(--focus-y,18%)}
/* Zoom wajah 2.65x di atas hanya untuk memisahkan dua wajah dari satu foto
   pasangan lama. Pada profil acara non-pernikahan (mis. Khitanan), sumbernya
   sudah berupa satu potret sehingga zoom tersebut memotong peci/rambut. Jaga
   seluruh kepala di dalam bingkai dan tetap hormati focal point dari Studio. */
.sig .sig-couple>.person>.pframe img[class*="photo-focus-"]{
  width:100%;height:100%;max-width:100%;object-fit:cover;
  object-position:var(--focus-mobile-x,50%) var(--focus-mobile-y,40%);
  transform:none!important;transform-origin:center;animation:none
}
@media (min-width:768px){
  .sig .sig-couple>.person>.pframe img[class*="photo-focus-"]{
    object-position:var(--focus-desktop-x,var(--focus-mobile-x,50%)) var(--focus-desktop-y,var(--focus-mobile-y,40%))
  }
}
.sig .gal img.photo-side-right{object-position:78% 24%}
.sig .gal img.photo-side-left{object-position:22% 24%}
.sig .pxband img.photo-side-right{object-position:78% 24%}
.sig .pxband img.photo-side-left{object-position:22% 24%}
.sig .sg-marble.vd{position:relative}
.sig .sg-marble.vd .sgm-body{z-index:3}
.sig .sg-marble.vd .sgm-num{z-index:4}
.sig.sig-p2-rose-marble .cover .sgm-body h1{background:none;-webkit-text-fill-color:var(--tx);color:var(--tx)}
.sig.sig-p2-rose-marble .cover .sgm-body .ey,.sig.sig-p2-rose-marble .cover .sgm-body .dt{color:var(--tx)}
.sig-p2-noir-glass .sgg-photo img{object-position:center 30%}
.sig .cd .b{border-color:color-mix(in srgb,var(--acc) 55%,transparent)}

/* ================= SIGNATURE COUTURE HERO ================= */
.sigh{position:relative;display:flex;flex-direction:column;align-items:center}
.sigh-num{position:absolute;top:-30px;right:-26px;font-family:var(--fd);font-size:11rem;line-height:1;
  color:transparent;-webkit-text-stroke:1.5px color-mix(in srgb,var(--acc2) 40%,transparent);
  pointer-events:none;z-index:0}
.sigh-photo{position:relative;width:230px;height:230px;display:grid;place-items:center;margin-bottom:20px;z-index:1}
.sigh-ring{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);
  animation:ringspin 22s linear infinite}
.sigh-ring text{font-size:11.5px;letter-spacing:.34em;fill:var(--acc2);font-family:inherit;font-weight:600}
@keyframes ringspin{to{transform:rotate(360deg)}}
.sigh-mask{width:186px;height:186px;overflow:hidden;position:relative;z-index:1;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.6)}
.sigh-mask img{width:100%;height:100%;object-fit:cover;animation:kb 15s ease-in-out infinite alternate}
.sigh .ey{position:relative;z-index:1}
/* masker per keluarga — bentuk beda = karakter beda */
.mk-marble{border-radius:120px 120px 14px 14px;border:2px solid var(--acc2);outline:1px solid color-mix(in srgb,var(--acc2) 45%,transparent);outline-offset:6px}
.mk-silk{border-radius:50%;border:3px solid color-mix(in srgb,#ffffff 65%,var(--acc2))}
.mk-glass{border-radius:28px;border:1.5px solid color-mix(in srgb,#ffffff 55%,transparent);backdrop-filter:blur(2px)}
.mk-aurora{border-radius:58% 42% 55% 45% / 52% 48% 52% 48%;animation:blobmorph 9s ease-in-out infinite alternate;border:2px solid color-mix(in srgb,var(--acc) 60%,transparent)}
@keyframes blobmorph{
  0%{border-radius:58% 42% 55% 45% / 52% 48% 52% 48%}
  50%{border-radius:45% 55% 48% 52% / 55% 45% 55% 45%}
  100%{border-radius:52% 48% 42% 58% / 48% 55% 45% 52%}}
.mk-artdeco{clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%);border:none;outline:2px solid var(--acc);outline-offset:-8px}
.mk-neon{border-radius:16px;border:1.5px solid var(--acc);box-shadow:0 0 26px -8px var(--acc)}
.mk-neon img{filter:grayscale(.9) contrast(1.15)}
.mk-neon::after{content:'';position:absolute;inset:0;background:var(--acc);mix-blend-mode:overlay;opacity:.5}
/* film grain di cover signature */
.sig .cover::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:.07;z-index:3;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency=".9" numOctaves="2"/></filter><rect width="140" height="140" filter="url(%23n)" opacity=".6"/></svg>')}

/* ================= SENI LATAR AI (ciri khas per keluarga) ================= */
.cover.has-art{background:var(--cov)}
.art-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  animation:artdrift 26s ease-in-out infinite alternate}
@keyframes artdrift{from{transform:scale(1.04) translateY(0)}to{transform:scale(1.13) translateY(-2%)}}
.art-tint{position:absolute;inset:0;z-index:1;
  background:linear-gradient(178deg,var(--cov) 0%,color-mix(in srgb,var(--cov2) 70%,transparent) 55%,var(--cov) 100%)}
.cover.has-art .inner,.cover.has-art .motif{position:relative;z-index:2}
.cover.has-art .motif{opacity:.1}
/* keluarga terang: tint lebih lembut + teks tetap gelap terbaca */
.light-cover .art-tint{background:linear-gradient(178deg,
  color-mix(in srgb,var(--page) 82%,transparent),
  color-mix(in srgb,var(--page) 55%,transparent) 55%,
  color-mix(in srgb,var(--page) 85%,transparent))}
/* marmer signature: foto full-bleed tetap di atas seni latar */
.sig .hero-marble.has-art .sgm-photo{z-index:2}

/* --- ornamen bunga/daun asli (PNG transparan) di sudut cover --- */
.orn-img{position:absolute;width:min(56%,240px);z-index:1;pointer-events:none;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.18))}
.orn-img.tl{top:-4%;left:-14%;transform:rotate(0deg);animation:ornsway 9s ease-in-out infinite alternate}
.orn-img.br{bottom:-4%;right:-14%;transform:rotate(180deg);animation:ornsway 11s ease-in-out infinite alternate-reverse}
@keyframes ornsway{from{transform:rotate(0) translate(0,0)}to{transform:rotate(2.5deg) translate(6px,-8px)}}
.orn-img.br{animation-name:ornsway2}
@keyframes ornsway2{from{transform:rotate(180deg) translate(0,0)}to{transform:rotate(182.5deg) translate(6px,-8px)}}
.dark-page .orn-img,.hero-floral.has-art .orn-img{opacity:.92}
/* keluarga yang punya ornamen asli: matikan SVG sudut lama */
.hero-floral .corn,.hero-rustic .corn{display:none}
.cover.has-art .inner{z-index:3}

/* ================= SIGNATURE: 6 KOMPOSISI HERO BERBEDA ================= */
/* --- MARBLE: editorial split (foto full-bleed atas + angka raksasa) --- */
.sig .hero-marble .inner{width:100%;max-width:none;padding:0}
.sig .hero-marble{padding:0;justify-content:flex-start}
.sg-marble{width:100%;display:flex;flex-direction:column;min-height:100dvh}
.sg-marble .sgm-photo{position:relative;width:100%;height:52dvh;overflow:hidden;
  border-bottom:3px double var(--acc2)}
.sg-marble .sgm-photo img{width:100%;height:100%;object-fit:cover;animation:kb 16s ease-in-out infinite alternate}
.sg-marble .sgm-num{position:absolute;bottom:-34px;right:14px;font-family:var(--fd);font-size:8.5rem;line-height:1;
  color:transparent;-webkit-text-stroke:2px var(--acc2);z-index:2;
  text-shadow:0 10px 40px rgba(0,0,0,.3)}
.sg-marble.vb .sgm-num{right:auto;left:14px}
.sg-marble.vc{flex-direction:column-reverse}.sg-marble.vc .sgm-photo{height:58dvh;border-top:3px double var(--acc2);border-bottom:0}.sg-marble.vc .sgm-num{bottom:auto;top:-34px}
.sg-marble.vd .sgm-photo{height:100dvh}.sg-marble.vd .sgm-body{position:absolute;inset:auto 20px 28px;background:color-mix(in srgb,var(--cov) 72%,transparent);backdrop-filter:blur(10px);border:1px solid var(--line);padding:28px 20px}.sg-marble.vd .sgm-num{top:18px;bottom:auto}
.sg-marble .sgm-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:44px 28px 40px;text-align:center}
.sg-marble .m-rule{margin-bottom:18px}

/* --- SILK: oval portrait + nama script menimpa tepi bawah oval --- */
.sg-silk{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2}
.sgs-oval{width:210px;height:280px;border-radius:50%;overflow:hidden;
  border:3px solid color-mix(in srgb,#ffffff 60%,var(--acc2));
  box-shadow:0 30px 70px -26px rgba(0,0,0,.55)}
.sg-silk.vb .sgs-oval{border-radius:46% 46% 50% 50%/60% 60% 40% 40%}
.sg-silk.vc{align-items:flex-start;text-align:left;margin-left:24px}.sg-silk.vc .sgs-oval{width:245px;height:330px;border-radius:120px 120px 18px 18px}.sg-silk.vc .sgs-name{margin-left:55px}
.sg-silk.vd .sgs-oval{width:260px;height:260px;border-radius:50% 50% 8px 50%}.sg-silk.vd .sgs-name{margin-top:-30px;transform:rotate(-4deg)}
.sgs-oval img{width:100%;height:100%;object-fit:cover;animation:kb 15s ease-in-out infinite alternate}
.sgs-name{margin-top:-46px;position:relative;z-index:2}
.light-cover .sg-silk .sgs-name{padding:7px 20px 10px;background:color-mix(in srgb,var(--page) 74%,transparent);backdrop-filter:blur(7px);box-shadow:0 14px 34px -24px rgba(0,0,0,.5)}
.sig.light-cover .sg-silk h1{background:none;-webkit-text-fill-color:var(--tx);color:var(--tx);text-shadow:none}
.light-cover .sg-silk .ey,.light-cover .sg-silk .dt{color:var(--tx);font-weight:700;text-shadow:0 1px 10px color-mix(in srgb,var(--page) 90%,transparent)}
.sgs-name h1{font-family:var(--fs);font-weight:400;font-size:3rem;text-shadow:0 4px 22px rgba(0,0,0,.35)}
.sgs-name h1 .scr{font-size:2.2rem}
.sg-silk .ey{margin-top:14px}
.sgs-dt{font-family:var(--fs);font-size:1.3rem;text-transform:none;letter-spacing:.04em}

/* --- GLASS: kartu kaca berisi foto --- */
.sgg{display:flex;flex-direction:column;align-items:center;padding:22px 22px 30px;max-width:290px}
.sgg-photo{width:100%;aspect-ratio:4/5;border-radius:18px;overflow:hidden;margin-bottom:18px;
  border:1px solid color-mix(in srgb,#ffffff 50%,transparent)}
.sgg.vb .sgg-photo{order:2;margin:18px 0 0}
.sgg.vc{transform:rotate(-2deg);margin-left:-20px}.sgg.vc .sgg-photo{border-radius:120px 120px 18px 18px}.sgg.vd{max-width:330px;padding:15px}.sgg.vd .sgg-photo{aspect-ratio:16/10}.sgg.vd h1{font-size:2rem}
.sgg-photo img{width:100%;height:100%;object-fit:cover;animation:kb 15s ease-in-out infinite alternate}
.sgg-chip{margin-top:12px;font-size:.72rem;font-weight:700;letter-spacing:.1em;
  padding:8px 18px;border-radius:18px;border:1px solid color-mix(in srgb,#ffffff 45%,transparent);
  background:color-mix(in srgb,#ffffff 14%,transparent)}

/* --- ARTDECO: poster gatsby, foto oktagon kecil --- */
.sg-deco{display:flex;flex-direction:column;align-items:center;position:relative;z-index:2;
  border:1px solid var(--acc);outline:1px solid var(--acc);outline-offset:6px;padding:34px 26px;max-width:320px}
.sgd-oct{width:130px;height:130px;overflow:hidden;margin:12px 0 6px;
  clip-path:polygon(30% 0,70% 0,100% 30%,100% 70%,70% 100%,30% 100%,0 70%,0 30%)}
.sg-deco.vb .sgd-oct{clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);width:140px;height:140px}
.sg-deco.vc{min-height:76dvh;justify-content:space-between}.sg-deco.vc .sgd-oct{width:180px;height:230px;clip-path:polygon(18% 0,82% 0,100% 18%,100% 82%,82% 100%,18% 100%,0 82%,0 18%)}
.sg-deco.vd{border-width:3px;outline-offset:10px}.sg-deco.vd .sgd-oct{order:4;margin-top:20px;width:190px;height:150px;clip-path:polygon(12% 0,88% 0,100% 50%,88% 100%,12% 100%,0 50%)}.sg-deco.vd .sgd-oct img{object-position:center 22%}
.sgd-oct img{width:100%;height:100%;object-fit:cover;animation:kb 14s ease-in-out infinite alternate}
.sg-deco .ey{margin-top:10px}

/* --- NEON: angka glow raksasa + foto duotone --- */
.sg-neon{position:relative;display:flex;flex-direction:column;align-items:center;z-index:2}
.sgn-num{position:absolute;top:-56px;left:50%;transform:translateX(-50%);font-family:var(--fd);
  font-size:12rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px var(--acc);opacity:.5;
  filter:drop-shadow(0 0 12px var(--acc));z-index:0;pointer-events:none}
.sg-neon.vb .sgn-num{left:auto;right:-8px;transform:none;top:30%}
.sg-neon.vc{align-items:flex-start;text-align:left}.sg-neon.vc .sgn-photo{width:250px;height:330px;clip-path:polygon(0 0,86% 0,100% 12%,100% 100%,0 100%)}.sg-neon.vc .sgn-num{left:auto;right:-60px;transform:rotate(90deg)}
.sg-neon.vd .sgn-photo{width:300px;height:190px}.sg-neon.vd .sgn-num{font-size:16rem;top:10px;opacity:.32}
.sgn-photo{width:200px;height:250px;position:relative;z-index:1;margin-bottom:20px}
.sgn-photo img{width:100%;height:100%;object-fit:cover;animation:kb 15s ease-in-out infinite alternate}
.sgn-pill{margin-top:14px;font-size:.74rem;font-weight:700;letter-spacing:.12em;color:var(--acc);
  border:1px solid var(--acc);border-radius:20px;padding:8px 20px;box-shadow:0 0 14px -6px var(--acc)}

/* --- AURORA: asimetris teks kiri / blob kanan --- */
.sg-aurora{display:flex;align-items:center;gap:14px;width:100%;max-width:360px;position:relative;z-index:2}
.sg-aurora.vb{flex-direction:row-reverse}
.sg-aurora.vc{flex-direction:column-reverse;gap:28px}.sg-aurora.vc .sga-left{text-align:center}.sg-aurora.vc .sga-right{width:230px;height:230px}.sg-aurora.vc .sga-right .sigh-mask{width:190px;height:190px}
.sg-aurora.vd{align-items:flex-end;min-height:70dvh;flex-direction:column;justify-content:space-between}.sg-aurora.vd .sga-left{width:76%;text-align:right}.sg-aurora.vd .sga-right{align-self:flex-start;width:230px;height:230px}.sg-aurora.vd .sga-right .sigh-mask{width:190px;height:190px}
.sga-left{flex:1;text-align:left}
.sg-aurora.vb .sga-left{text-align:right}
.sga-left h1,.sga-left h1.one{font-size:2rem;line-height:1.1;text-align:inherit}
.sga-left h1 .scr{display:inline;margin:0 6px;font-size:1.6rem}
.sga-left .ey{margin-bottom:12px}
.sga-left .dt{margin-top:14px;font-size:.7rem}
.sga-right{position:relative;width:170px;height:170px;flex:0 0 auto;display:grid;place-items:center}
.sga-right .sigh-mask{width:140px;height:140px}
.sga-right .sigh-ring{inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px)}

/* ================= MARQUEE BAND (signature) ================= */
.mq{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:16px 0;background:color-mix(in srgb,var(--acc) 5%,var(--page));position:relative;z-index:1}
.mq-track{display:flex;gap:38px;width:max-content;animation:mqrun 20s linear infinite;white-space:nowrap}
.mq-track span{font-family:var(--fd);font-size:1.5rem;letter-spacing:.14em;
  color:transparent;-webkit-text-stroke:1px var(--acc)}
.mq-track span:nth-child(even){color:var(--acc);-webkit-text-stroke:0}
@keyframes mqrun{to{transform:translateX(-50%)}}

/* ================= PARALLAX PHOTO BAND (signature) ================= */
.pxband{height:300px;overflow:hidden;position:relative;z-index:1}
.pxband img{position:absolute;left:0;top:-20%;width:100%;height:140%;object-fit:cover;will-change:transform}

/* ================= GALERI KOLASE EDITORIAL (signature) ================= */
.sig .gal{display:block;position:relative;padding:6px 0 10px;counter-reset:foto}
.sig .gal .ph{position:relative;width:100%;margin:0;padding:0;background:none;border:none;outline:none;
  transform:none;border-radius:14px;aspect-ratio:auto;counter-increment:foto;overflow:visible}
.sig .gal .ph::after{content:counter(foto,decimal-leading-zero);position:absolute;top:-14px;left:-6px;
  font-family:var(--fd);font-size:2.6rem;color:transparent;z-index:3;
  -webkit-text-stroke:1px color-mix(in srgb,var(--acc) 55%,transparent)}
.sig .gal .ph img{border-radius:14px;display:block;width:100%;height:100%;object-fit:cover}
.sig .gal .ph.w{width:88%;margin-left:auto;aspect-ratio:4/3;border-radius:14px}
.sig .gal .ph:nth-child(2){width:54%;margin:-64px 0 0 4%;aspect-ratio:3/4;z-index:2;
  border:5px solid var(--page);box-shadow:0 24px 50px -20px rgba(0,0,0,.55);border-radius:14px}
.sig .gal .ph:nth-child(3){width:66%;margin:20px 0 0 30%;aspect-ratio:16/10}
.sig .gal .ph:nth-child(n+4){width:76%;margin:22px auto 0;aspect-ratio:4/3}

/* ================= MODE KARTU GALERI ================= */
.card-mode{box-shadow:none;max-width:none}
.card-mode .cover{min-height:100dvh}

@media (prefers-reduced-motion:reduce){
  .rv{opacity:1;transform:none;transition:none}
  .shimmer,.gate button,.music.playing,.spark{animation:none}
  #petals{display:none}
}