/* =====================================================================
   Halaman undangan. Warna & font berasal dari tema (diset oleh renderer
   pada .inv-shell). HP: satu kolom. Laptop: panel sampul kiri + kolom
   undangan kanan.
   ===================================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg,#111);-webkit-font-smoothing:antialiased}
body.locked{overflow:hidden;height:100vh}
[hidden]{display:none!important}
.inv-shell{--pattern:none;min-height:100vh;background:var(--bg);color:var(--ink)}
.inv{width:100%;max-width:520px;margin:0 auto;background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:17px;line-height:1.75;text-align:center;position:relative;overflow-x:clip}
.inv h1,.inv h2,.inv h3{margin:0;font-weight:400;text-wrap:balance}
.inv p{margin:.4em 0}
.inv a{color:var(--acc)}
.inv a.btn{color:var(--btnInk)}.inv a.btn.ghost{color:var(--acc)}
.inv-side{display:none}

/* ---------- laptop: panel sampul ---------- */
@media (min-width:960px){
  .inv-shell{display:grid;grid-template-columns:minmax(0,1fr) 480px}
  .inv-side{display:flex;position:sticky;top:0;height:100vh;overflow:hidden;align-items:flex-end;justify-content:flex-start;padding:64px;color:#fff;
    background:var(--bg2) var(--pattern)}
  .inv-side .side-bg{position:absolute;inset:0;background:var(--cover) center/cover no-repeat}
  .inv-side::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 30%,rgba(0,0,0,.6))}
  .inv-side .side-in{position:relative;z-index:2;text-align:left;max-width:520px}
  .inv-side .names{align-items:flex-start;color:#fff;font-size:clamp(3.4rem,6vw,5.6rem)}
  .inv-side .names em{color:#fff;opacity:.8}
  .inv-side .eyebrow,.inv-side .date,.inv-side .tag{color:#fff;opacity:.9}
  .inv-side .cn{z-index:1;width:200px;height:200px;opacity:.9}
  .inv{max-width:none;box-shadow:-20px 0 60px -30px rgba(0,0,0,.4)}
  .inv-side.no-cover::after{display:none}
  .inv-side.no-cover{align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 40%,var(--bg),var(--bg2) 75%),var(--pattern) var(--bg2)}
  .inv-side.no-cover .side-in{text-align:center}
  .inv-side.no-cover .names{align-items:center;color:var(--acc)}
  .inv-side.no-cover .names em{color:var(--muted)}
  .inv-side.no-cover .eyebrow,.inv-side.no-cover .date{color:var(--ink)}
  .inv-side.no-cover .tag{color:var(--acc)}
}

/* ---------- section ---------- */
.inv section{position:relative;padding:88px 30px;overflow:hidden;background:var(--bg) var(--pattern)}
.inv section.alt{background-color:var(--bg2)}
.inv section>*{position:relative;z-index:1}
.cn{position:absolute!important;width:128px;height:128px;z-index:0!important;pointer-events:none}
.cn svg{width:100%;height:100%;display:block;overflow:visible}
.cn-tl{top:0;left:0}.cn-tr{top:0;right:0;transform:scaleX(-1)}
.cn-bl{bottom:0;left:0;transform:scaleY(-1)}.cn-br{bottom:0;right:0;transform:scale(-1)}
.orn-line .cn{width:90px;height:90px;opacity:.7}

.eyebrow{font-family:var(--f-head);text-transform:uppercase;letter-spacing:.3em;font-size:.68rem;color:var(--muted);margin:0 0 6px!important}
.title{font-family:var(--f-script);font-size:2.9rem;color:var(--acc);line-height:1.1}
.orn-deco .title,.orn-line .title,.orn-geo .title{font-family:var(--f-head);font-size:1.7rem;letter-spacing:.14em;text-transform:uppercase}
.div{width:180px;height:27px;margin:12px auto 22px;display:block}
.lead{max-width:38ch;margin-inline:auto!important}
.muted{color:var(--muted)}
.script{font-family:var(--f-script);color:var(--acc);font-size:2.5rem;line-height:1.1}

/* ---------- tombol ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border:0;border-radius:999px;background:var(--acc);color:var(--btnInk);
  padding:0 26px;font:600 .92rem/1 var(--f-body);letter-spacing:.03em;cursor:pointer;text-decoration:none;box-shadow:0 10px 24px -14px var(--acc);transition:transform .15s,filter .15s}
.btn:hover{filter:brightness(1.06);transform:translateY(-1px)}
.btn.sm{min-height:40px;padding:0 16px;font-size:.82rem;box-shadow:none}
.btn.ghost{background:transparent;color:var(--acc);border:1px solid var(--acc);box-shadow:none}
.btn.wide{width:100%;margin-top:18px}
.btn:focus-visible,.g:focus-visible,.inv-nav a:focus-visible{outline:2px solid var(--acc);outline-offset:3px}
.btn:disabled{opacity:.5}
.orn-deco .btn,.orn-line .btn{border-radius:3px;text-transform:uppercase;letter-spacing:.16em;font-size:.76rem}
.ic{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- sampul (lapisan pembuka) ---------- */
.cover-ov{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:max(40px,env(safe-area-inset-top,0px)) 28px max(40px,env(safe-area-inset-bottom,0px));overflow:auto;
  background:radial-gradient(ellipse at 50% 28%,var(--bg2),var(--bg) 72%),var(--pattern) var(--bg);color:var(--ink);text-align:center;
  transition:transform 1s cubic-bezier(.76,0,.24,1),opacity 1s;font-family:var(--f-body)}
.cover-ov.gone{transform:translateY(-100%);opacity:.6}
.cover-ov .cn{width:160px;height:160px}
.cv-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:6px;max-width:420px}
.cover-ov .names{margin-top:6px}
.date{font-family:var(--f-head);letter-spacing:.28em;color:var(--ink);font-size:.9rem;margin:8px 0 0!important}
.to{margin:24px 0 18px;padding:16px 26px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;flex-direction:column;gap:2px;min-width:260px}
.to small{font-size:.74rem;color:var(--muted);letter-spacing:.04em}
.to b{font-size:1.3rem;font-weight:600;margin-top:4px}
.cv-note{font-size:.66rem;color:var(--muted);font-style:italic;margin-top:14px;max-width:30ch}

/* ---------- nama & bingkai foto ---------- */
.names{font-family:var(--f-script);color:var(--acc);font-size:clamp(3rem,14vw,4.4rem);line-height:1;display:flex;flex-direction:column;align-items:center}
.names em{font-style:normal;font-size:.5em;color:var(--muted);margin:.1em 0}
.names.sm{font-size:clamp(2.4rem,11vw,3.2rem)}
.orn-deco .names,.orn-line .names{font-family:var(--f-head);font-size:clamp(2.3rem,10vw,3.3rem);letter-spacing:.06em}
.ph{width:190px;height:240px;margin:6px auto 18px;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 50% 35%,var(--bg),var(--bg2));outline:1px solid var(--acc);outline-offset:7px}
.ph.sm{width:140px;height:176px;margin-bottom:10px}
.ph img{width:100%;height:100%;object-fit:cover}
.mono{font-family:var(--f-script);font-size:3.4rem;color:var(--acc);line-height:1;display:flex;align-items:center;gap:.08em}
.mono i{font-style:normal;font-size:.45em;color:var(--muted)}
.ph.sm .mono{font-size:2.6rem}
.frame-arch .ph{border-radius:999px 999px 6px 6px}
.frame-circle .ph{width:200px;height:200px;border-radius:50%}.frame-circle .ph.sm{width:150px;height:150px}
.frame-oval .ph{border-radius:50%}
.frame-rect .ph{border-radius:2px;outline-offset:9px}
.frame-star .ph{width:210px;height:210px;outline:0;clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.frame-star .ph.sm{width:160px;height:160px}
.hero{padding-top:110px!important}
.arab{font-family:'Amiri',serif;font-size:1.7rem;color:var(--acc);direction:rtl;margin:26px 0 6px!important}
.quote{margin:0 auto;max-width:34ch;font-style:italic;font-size:1rem;color:var(--ink)}
.quote cite{display:block;margin-top:10px;font-style:normal;font-family:var(--f-head);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--acc)}

/* ---------- profil ---------- */
.couple{margin-top:26px}
.person .full{font-weight:600;font-size:1.05rem}
.person .ig{display:inline-flex;margin-top:8px;font-size:.84rem;text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:4px 14px}
.amp{font-family:var(--f-script);font-size:3.6rem;color:var(--acc);margin:22px 0;line-height:1}

/* ---------- hitung mundur & acara ---------- */
.cd{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:4px auto 30px;max-width:340px}
.cd div{padding:12px 4px;border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--bg) 70%,transparent);font-variant-numeric:tabular-nums}
.cd b{display:block;font-family:var(--f-head);font-size:1.7rem;color:var(--acc);line-height:1.1;font-weight:400}
.cd small{font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.events{display:flex;flex-direction:column;gap:18px}
.ev{background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:30px 24px;text-align:left;box-shadow:0 18px 40px -32px rgba(0,0,0,.5);position:relative}
.ev::before{content:"";position:absolute;inset:6px;border:1px solid var(--line);border-radius:17px;pointer-events:none;opacity:.7}
.alt .ev{background:var(--bg)}
.ev h3{font-family:var(--f-script);color:var(--acc);font-size:2.1rem;text-align:center;margin-bottom:14px}
.orn-deco .ev h3,.orn-line .ev h3,.orn-geo .ev h3{font-family:var(--f-head);font-size:1.1rem;letter-spacing:.18em;text-transform:uppercase}
.ev p{display:flex;gap:12px;align-items:flex-start;margin:.6em 0}
.ev p .ic{margin-top:5px;color:var(--acc)}
.ev small{color:var(--muted)}
.ev .row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:18px;position:relative}
.dress{display:flex;gap:14px;text-align:left;margin-top:22px;padding:18px 20px;border:1px dashed var(--acc);border-radius:16px}
.dress .ic{width:26px;height:26px;color:var(--acc)}
.dress p{margin:.2em 0}
.sw{display:flex;gap:8px;margin-top:8px}.sw i{width:24px;height:24px;border-radius:50%;border:2px solid var(--bg);box-shadow:0 0 0 1px var(--line)}

/* ---------- kisah ---------- */
.story{list-style:none;margin:0 auto;padding:0 0 0 24px;text-align:left;border-left:1px solid var(--acc);max-width:400px}
.story li{position:relative;padding:0 0 28px 18px}
.story li:last-child{padding-bottom:0}
.story li::before{content:"";position:absolute;left:-30px;top:8px;width:11px;height:11px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px var(--bg)}
.story .yr{font-family:var(--f-head);font-size:.72rem;letter-spacing:.22em;color:var(--muted)}
.story h3{font-family:var(--f-head);font-size:1.15rem;color:var(--acc);margin:2px 0}

/* ---------- galeri ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.g{border:0;padding:0;aspect-ratio:1;background:var(--acc2) center/cover;border-radius:10px;cursor:zoom-in;max-width:100%;transition:transform .3s}
.g:hover{transform:scale(1.02)}
.g:nth-child(1){grid-column:span 2;grid-row:span 2}
#lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);z-index:80;display:flex;align-items:center;justify-content:center;padding:16px;cursor:zoom-out}
#lightbox img{max-width:100%;max-height:90vh;border-radius:6px}

/* ---------- kartu tamu ---------- */
.qrcard{display:inline-flex;flex-direction:column;align-items:center;gap:6px;background:#fff;color:#111;padding:22px 26px;border-radius:20px;box-shadow:0 22px 50px -28px rgba(0,0,0,.6)}
.qrcard small{color:#666}

/* ---------- RSVP ---------- */
.rsvp{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:24px}
.rsvp label{display:block;font-size:.8rem;letter-spacing:.04em;color:var(--muted);margin:14px 0 6px}
.rsvp label:first-child{margin-top:0}
.rsvp input:not([type=radio]),.rsvp select,.rsvp textarea{width:100%;font:inherit;font-size:16px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--bg2);color:var(--ink);min-height:46px}
.rsvp textarea{resize:vertical}
.rsvp input:focus,.rsvp select:focus,.rsvp textarea:focus{outline:2px solid var(--acc);outline-offset:0}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.seg label{margin:0}
.seg input{position:absolute;opacity:0;pointer-events:none}
.seg span{display:flex;align-items:center;justify-content:center;min-height:44px;text-align:center;padding:4px;border:1px solid var(--line);border-radius:12px;font-size:.84rem;color:var(--ink);cursor:pointer}
.seg input:checked+span{background:var(--acc);color:var(--btnInk);border-color:var(--acc)}
.seg input:focus-visible+span{outline:2px solid var(--acc);outline-offset:2px}
.wishes{margin-top:26px;text-align:left}
#wishes{max-height:460px;overflow:auto;display:flex;flex-direction:column;gap:10px;padding-right:4px;overscroll-behavior:contain}
.wish{display:flex;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:16px;padding:14px}
.wish .av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--acc);color:var(--btnInk);display:flex;align-items:center;justify-content:center;font-weight:600}
.wish p{margin:.25em 0;font-size:.95rem;line-height:1.6}
.wish small{color:var(--muted);font-size:.72rem}
.att{font-size:.66rem;padding:2px 9px;border-radius:999px;background:var(--bg2);color:var(--muted);vertical-align:middle;letter-spacing:.03em}
.att.hadir{color:var(--acc)}

/* ---------- amplop ---------- */
.gifts{display:flex;flex-direction:column;gap:14px;margin-top:20px}
.card-gift{position:relative;display:flex;flex-direction:column;gap:14px;text-align:left;padding:22px;border-radius:18px;overflow:hidden;
  background:linear-gradient(135deg,var(--acc),color-mix(in srgb,var(--acc) 50%,#000));color:var(--btnInk);box-shadow:0 18px 34px -20px rgba(0,0,0,.7);aspect-ratio:1.7;justify-content:space-between}
.card-gift::after{content:"";position:absolute;width:220px;height:220px;border-radius:50%;right:-80px;top:-90px;background:rgba(255,255,255,.08)}
.cg-top,.cg-bot{display:flex;justify-content:space-between;align-items:center;gap:10px;position:relative;z-index:1}
.card-gift .chip{width:40px;height:30px;border-radius:7px;background:linear-gradient(135deg,#f4dc9a,#c49b45)}
.card-gift .bank{font-family:var(--f-head);letter-spacing:.14em;text-transform:uppercase;font-size:.82rem}
.card-gift .num{font-size:1.4rem;letter-spacing:.14em;font-variant-numeric:tabular-nums;font-weight:600;position:relative;z-index:1}
.card-gift .btn{background:rgba(255,255,255,.18);color:inherit;box-shadow:none;backdrop-filter:blur(4px)}
.card-gift.qris,.card-gift.addr{aspect-ratio:auto;align-items:center;text-align:center;background:var(--bg2);color:var(--ink);border:1px solid var(--line);box-shadow:none}
.card-gift.qris::after,.card-gift.addr::after{display:none}
.card-gift.qris img{max-width:230px;width:100%;border-radius:10px;background:#fff;padding:8px}
.card-gift.addr .btn{background:transparent;color:var(--acc);border:1px solid var(--acc)}
.card-gift.addr .ic{width:26px;height:26px;color:var(--acc)}

/* ---------- penutup & footer ---------- */
.closing.has-img{background:linear-gradient(color-mix(in srgb,var(--bg) 82%,transparent),var(--bg) 88%),var(--cover) center/cover!important}
.closing .cn-bl,.closing .cn-br{display:block}
.tag{font-family:var(--f-head);letter-spacing:.14em;color:var(--acc);margin-top:12px!important}
.turut{margin-top:28px;font-size:.92rem}
.foot{display:flex;align-items:center;justify-content:center;gap:6px;padding:24px 16px 100px;font-family:system-ui,sans-serif;font-size:13px;background:var(--bg2)}
.foot .by{color:var(--muted)}
.foot a{display:inline-flex;align-items:center;gap:5px;color:var(--ink);text-decoration:none}
.foot a:hover{color:var(--acc);text-decoration:none}

/* ---------- menu cepat (melayang di bawah kolom) ---------- */
.inv-nav{position:sticky;bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:30;display:flex;justify-content:center;gap:2px;width:max-content;max-width:calc(100% - 24px);
  margin:-82px auto 14px;padding:6px;border-radius:999px;background:color-mix(in srgb,var(--bg) 82%,transparent);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);
  border:1px solid var(--line);box-shadow:0 14px 34px -16px rgba(0,0,0,.45);opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .5s,transform .5s}
.opened .inv-nav{opacity:1;transform:none;pointer-events:auto}
.inv-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:52px;padding:7px 8px;border-radius:999px;color:var(--muted);text-decoration:none;font:600 .6rem/1.1 system-ui,sans-serif;letter-spacing:.02em}
.inv-nav a .ic{width:19px;height:19px}
.inv-nav a.on{background:var(--acc);color:var(--btnInk)}
@media(max-width:380px){.inv-nav a{min-width:44px;padding:7px 5px}.inv-nav a span{display:none}}

/* ---------- elemen halaman ---------- */
.center-msg{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;color:#ddd;font:16px/1.6 system-ui,sans-serif;text-align:center;background:#141214}
#musicBtn{position:fixed;right:max(16px,env(safe-area-inset-right,0px));bottom:calc(84px + env(safe-area-inset-bottom,0px));z-index:40;width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:color-mix(in srgb,var(--bg) 85%,transparent);color:var(--acc);backdrop-filter:blur(10px);cursor:pointer;box-shadow:0 8px 20px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center}
#musicBtn.play svg{animation:spin 5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.preview-bar{position:fixed;top:0;left:0;right:0;z-index:70;background:#1d1a1c;color:#fff;font:13px/1.4 system-ui,sans-serif;padding:9px 16px calc(9px) ;padding-top:max(9px,env(safe-area-inset-top,0px));text-align:center}
.preview-bar a{color:#f3c9b8}
body:has(>.preview-bar) .inv-shell{padding-top:38px}
@media(min-width:960px){body:has(>.preview-bar) .inv-side{top:38px;height:calc(100vh - 38px)}}
#toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom,0px));transform:translate(-50%,180px);background:#1d1a1c;color:#fff;padding:11px 18px;border-radius:12px;font:600 14px system-ui,sans-serif;transition:transform .3s;z-index:90;max-width:calc(100vw - 32px)}
#toast.show{transform:translate(-50%,0)}
.petals{position:fixed;inset:0;pointer-events:none;z-index:20}
.reveal{opacity:0;transform:translateY(24px);transition:opacity 1s ease,transform 1s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}#musicBtn.play svg{animation:none}html{scroll-behavior:auto}.cover-ov{transition:none}}