*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
a,button{-webkit-tap-highlight-color:transparent}button{touch-action:manipulation}
:root{--bg:#fff;--fg:#222;--accent:#b8860b;--on-accent:#fff;--card:rgba(0,0,0,.04);--head:Georgia,serif;--cover-bg:linear-gradient(#000a,#000c)}
body{overflow-x:hidden;background:var(--bg);color:var(--fg);font:16px/1.6 system-ui,sans-serif;text-align:center}
h1,h2,h3{font-family:var(--head);font-weight:600;line-height:1.2}
.cover{position:fixed;inset:0;z-index:20;overflow:auto;transition:transform 1s cubic-bezier(.7,0,.2,1),opacity 1s,visibility 0s 1s;display:flex;align-items:center;justify-content:center;padding:max(24px,env(safe-area-inset-top)) 22px max(24px,env(safe-area-inset-bottom));-webkit-overflow-scrolling:touch;color:#fff;background-color:var(--bg);background-image:var(--cover-bg),var(--cover-img,none);background-size:cover;background-position:center 30%}
.cover .inner{max-width:100%;margin:auto}
.cover h1{font-size:clamp(2.1rem,10vw,4rem);margin:.3em 0;overflow-wrap:anywhere}
.cover .kicker{letter-spacing:.2em;text-transform:uppercase;font-size:.85rem;opacity:.9}
.cover .to{margin:28px 0 20px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;border:0;cursor:pointer;background:var(--accent);color:var(--on-accent);padding:12px 26px;border-radius:999px;font:inherit;font-weight:600;text-decoration:none}
body:not(.opened){overflow:hidden}
body:not(.opened) main,body:not(.opened) .musicbtn,body:not(.opened) .dock{display:none}
body.opened .cover{transform:translateY(-100%);opacity:0;visibility:hidden;pointer-events:none}
.sec{max-width:640px;margin:0 auto;padding:52px 20px}
.sec h2{font-size:2rem;margin-bottom:20px;color:var(--accent)}
.card{background:var(--card);border:1px solid rgba(160,160,160,.35);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:16px;padding:22px}
.nm{font-size:2rem}.amp{color:var(--accent)}.amp.big{font-size:2rem;font-family:var(--head);margin:6px 0}
.countdown{display:flex;gap:10px;justify-content:center;margin-top:22px}
.countdown div{flex:1;max-width:84px;padding:10px 0;border-radius:12px;background:var(--card);border:1px solid rgba(160,160,160,.35);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent)}
.countdown b{display:block;font-size:1.5rem}.countdown span{font-size:.75rem;opacity:.8}
.form{display:grid;gap:12px;text-align:left}.form .btn{width:100%}textarea{min-height:96px}
input,select,textarea{width:100%;min-height:48px;font-size:16px;padding:12px;border-radius:10px;border:1px solid #8886;background:#fff;color:#222;font:inherit}
.msg{min-height:1.4em;font-size:.9rem;text-align:center}
#wishList{max-height:380px;overflow:auto;margin-top:14px}
.wish{text-align:left;padding:12px 14px;border-radius:12px;background:var(--card);margin-top:10px}
.wish b{display:block}.wish small{opacity:.6}
.musicbtn{z-index:40;position:fixed;right:max(14px,env(safe-area-inset-right));bottom:max(14px,env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:0;background:var(--accent);color:var(--on-accent);font-size:1.2rem;cursor:pointer;z-index:9}
.musicbtn.off{opacity:.45}
footer{padding:30px 20px calc(84px + env(safe-area-inset-bottom));opacity:.7;font-size:.85rem}

/* ---------- Bagian tambahan ---------- */
.intro{max-width:520px;margin:0 auto 18px;opacity:.9}
.btn.alt{background:transparent;color:var(--accent);border:1.5px solid var(--accent)}
.btn.sm{min-height:40px;padding:8px 18px;font-size:.9rem;margin-top:10px}
.quote .q{font-style:italic;font-family:var(--head);font-size:1.25rem;line-height:1.5}.quote .qref{margin-top:10px;color:var(--accent)}
.bigdate{display:flex;justify-content:center;align-items:center;gap:clamp(12px,5vw,28px);font-family:var(--head);color:var(--accent);line-height:1}
.bigdate span{font-size:clamp(2.6rem,13vw,4.6rem);font-weight:600}.bigdate .m{font-size:clamp(1.3rem,6vw,2rem);letter-spacing:.25em;padding:0 clamp(10px,4vw,24px);border-left:1px solid currentColor;border-right:1px solid currentColor}
.dow{margin-top:10px;letter-spacing:.3em;text-transform:uppercase;font-size:.85rem}
.cal{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:22px}
.dayline{margin-bottom:14px;font-size:1.05rem}
.person+.person{margin-top:8px}.person p{overflow-wrap:anywhere}
.pf{display:block;margin:0 auto 18px;width:min(66vw,240px);aspect-ratio:3/4;object-fit:cover;border-radius:120px 120px 16px 16px;border:3px solid var(--accent);padding:5px;background:var(--bg);outline:1px solid var(--accent);outline-offset:6px;box-shadow:0 14px 34px rgba(0,0,0,.28)}
.ig{display:inline-block;margin-top:6px;color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px dashed currentColor}
.story{margin-bottom:34px}.story img{display:block;width:100%;max-width:460px;aspect-ratio:4/3;max-height:340px;object-fit:cover;border-radius:16px;margin:0 auto 14px}
.story h3{font-size:1.5rem;color:var(--accent);margin-bottom:8px}.story p{max-width:520px;margin:0 auto}
#giftBox{margin-top:18px;display:grid;gap:14px}#giftBox[hidden]{display:none}
.gcard h3{font-size:1.25rem;color:var(--accent)}.rek{font-size:1.5rem;font-weight:700;letter-spacing:.06em;margin:6px 0;overflow-wrap:anywhere}
.attn{font-size:.85rem;text-align:left;opacity:.85;padding:12px 14px;border-radius:12px;background:var(--card)}
.wcount{margin:18px 0 0;font-weight:600;opacity:.8}#wishMore{margin-top:14px}
.wish .st{font-style:normal;font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:999px;margin-left:4px;vertical-align:middle;background:rgba(128,128,128,.2)}
.wish .st.hadir{background:rgba(34,160,90,.22)}.wish .st.tidak{background:rgba(200,70,70,.22)}
.closing{padding-top:60px;padding-bottom:30px}.closing h2{font-size:2.1rem}.closing .nm{margin-top:6px}
.btn:focus-visible,.ig:focus-visible{outline:3px solid var(--accent);outline-offset:3px}

/* ---------- Galeri ---------- */
.gal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gal img{width:100%;height:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:zoom-in;transition:transform .3s}
@media (hover:hover){.gal img:hover{transform:scale(1.03)}}
.gal img:first-child{grid-column:span 2;grid-row:span 2}
.lb{position:fixed;inset:0;background:#000e;display:flex;align-items:center;justify-content:center;z-index:60;animation:fade .25s}
.lb{touch-action:pan-y}.lb img{max-width:100vw;max-height:84vh;object-fit:contain;border-radius:6px}
.lb button{position:absolute;background:#fff3;color:#fff;border:0;width:48px;height:48px;border-radius:50%;font-size:1.4rem;cursor:pointer}
.lb .x{top:max(14px,env(safe-area-inset-top));right:14px}.lb .p{left:10px}.lb .n{right:10px}
/* ---------- Animasi ---------- */
@keyframes up{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(220,220,220,.55);box-shadow:0 0 0 0 color-mix(in srgb,var(--accent) 60%,transparent)}50%{box-shadow:0 0 0 14px transparent}}
@keyframes fall{to{transform:translateY(115vh) rotate(360deg)}}
@keyframes spin{to{transform:rotate(360deg)}}
.cover .inner>*{opacity:0;animation:up .9s ease forwards}
.cover .inner>:nth-child(1){animation-delay:.2s}.cover .inner>:nth-child(2){animation-delay:.45s}
.cover .inner>:nth-child(3){animation-delay:.7s}.cover .inner>:nth-child(4){animation-delay:.95s}
.cover #openBtn{animation:up .9s 1.3s ease forwards,pulse 2.2s 2.3s infinite}
.js .rv{opacity:0;transform:translateY(32px);transition:opacity .9s ease,transform .9s ease}
.js .rv.in{opacity:1;transform:none}
.fx{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:30}
.fx span{position:absolute;top:-8%;color:var(--accent);opacity:.65;animation:fall linear infinite}
.musicbtn:not(.off){animation:spin 5s linear infinite}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv,.cover .inner>*{opacity:1!important;transform:none!important}.fx{display:none}}

/* ---------- Khusus layar HP ---------- */
@media (max-width:600px){
  .sec{padding:44px 16px}
  .story img{width:86%;max-height:230px;border-radius:14px}
  .pf{width:min(58vw,210px)}
  .gal img:first-child{max-height:200px}
  .sec h2{font-size:1.7rem;margin-bottom:16px}
  .card{padding:20px 16px;border-radius:14px}
  .nm{font-size:1.7rem}
  .countdown{gap:6px}.countdown div{padding:8px 0}.countdown b{font-size:1.25rem}
  .gal{grid-template-columns:repeat(2,1fr);gap:6px}
  .gal img:first-child{grid-column:span 2;grid-row:auto;aspect-ratio:16/10}
  .gal img:last-child:nth-child(even){grid-column:span 2;aspect-ratio:16/10}
  #wishList{max-height:320px}
  .lb .p{left:6px}.lb .n{right:6px}
}
@media (max-height:520px) and (orientation:landscape){
  .cover .to{margin:12px 0}.cover h1{font-size:2rem;margin:.15em 0}
}

/* ---------- Latar belakang foto/video (dipilih di admin) ---------- */
.bgmedia{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--bg);pointer-events:none}
.bgmedia video,.bgmedia .img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background-size:cover;background-position:center}
.bgmedia::after{content:"";position:absolute;inset:0;background:rgba(127,127,127,.5);background:var(--bg-ov,color-mix(in srgb,var(--bg) 72%,transparent))}
main{position:relative;z-index:1}
.cover.clear{background-color:transparent;background-image:var(--cover-bg)}
.toast{position:fixed;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translateX(-50%);max-width:88vw;z-index:50;background:#000c;color:#fff;padding:10px 16px;border-radius:12px;font-size:.85rem;text-align:center}

/* ---------- Efek muncul foto galeri saat di-scroll ---------- */
.js .gal img.gi{opacity:0}
.js .gal img.gi.in{animation:galIn .85s var(--d,0s) cubic-bezier(.2,.7,.2,1) both}
.js .gal img.gi:first-child.in{animation-name:galInBig}
@keyframes galIn{from{opacity:0;transform:translateY(34px) scale(.92)}to{opacity:1;transform:none}}
@keyframes galInBig{from{opacity:0;transform:scale(1.12)}to{opacity:1;transform:none}}

.credit{margin-top:14px;font-size:.78rem;letter-spacing:.04em;opacity:.85}
.credit a{color:var(--accent);font-weight:600;text-decoration:none;border-bottom:1px dotted currentColor}

/* ---------- Animasi teks masuk (tema dengan data-split) ---------- */
@keyframes fxRise{from{opacity:0;transform:translateY(.9em) scale(.9);filter:blur(6px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxSlide{from{opacity:0;transform:translateX(calc(var(--dir,1)*60px));filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxZoom{from{opacity:0;transform:scale(2.4);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes fxFlip{from{opacity:0;transform:perspective(400px) rotateX(-90deg)}to{opacity:1;transform:none}}
@keyframes fxBounce{0%{opacity:0;transform:translateY(-1.2em)}60%{opacity:1;transform:translateY(.18em)}80%{transform:translateY(-.08em)}100%{opacity:1;transform:none}}
@keyframes fxGlow{0%{opacity:0;filter:blur(12px);transform:scale(1.18);text-shadow:0 0 24px var(--accent)}55%{opacity:1;text-shadow:0 0 20px var(--accent)}100%{opacity:1;filter:none;transform:none;text-shadow:none}}
@keyframes fxReveal{from{opacity:1;clip-path:inset(-30% 100% -30% -30%);transform:translateX(-.35em)}to{opacity:1;clip-path:inset(-30% -30% -30% -30%);transform:none}}
@keyframes fxTilt{from{opacity:0;transform:translateY(.8em) rotate(calc(var(--dir,1)*-14deg))}to{opacity:1;transform:none}}
@keyframes fxFold{from{opacity:0;transform:perspective(500px) rotateY(95deg) translateX(-.2em)}to{opacity:1;transform:none}}
@keyframes fxWave{0%{opacity:0;transform:translateY(1em) scaleY(.4)}55%{opacity:1;transform:translateY(-.3em) scaleY(1.1)}100%{opacity:1;transform:none}}
@keyframes fxDrop{0%{opacity:0;transform:translateY(-1.7em) rotate(calc(var(--dir,1)*-26deg)) scale(1.3)}65%{opacity:1;transform:translateY(.12em) rotate(3deg) scale(.97)}100%{opacity:1;transform:none}}
.fxon .fxw,.fxon .fxc{display:inline-block;opacity:0;white-space:pre}
.fxon .fxk{display:inline-block;white-space:nowrap}
.fxon .btn{gap:.3em}
.fxon .fxgo .fxw,.fxon .fxgo .fxc,.fxon .sec.fxin .fxw,.fxon .sec.fxin .fxc{animation:var(--fxanim,fxRise) var(--fxdur,.8s) cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--base,0s) + var(--i)*var(--step,45ms))}
.fxon .cover.fxgo{--base:.5s}
@media (prefers-reduced-motion:reduce){.fxon .fxw,.fxon .fxc{opacity:1!important}}

/* ---------- Animasi foto & kartu saat di-scroll (diatur per template lewat --pva / --cva) ---------- */
@keyframes pvRise{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}
.pvjs .pv:not(.pv-in){opacity:0}
.pvjs .pf.pv-in,.pvjs .story img.pv-in{animation:var(--pva,pvRise) var(--pvd,1.1s) var(--d,0s) var(--pve,cubic-bezier(.2,.8,.2,1)) backwards}
.pvjs .pv-in:not(.pf):not(img){animation:var(--cva,pvRise) var(--cvd,.9s) var(--d,0s) var(--cve,ease) backwards}
.fx span{animation-name:var(--fxmove,fall)!important}
@media (prefers-reduced-motion:reduce){.pvjs .pv:not(.pv-in){opacity:1!important}}

/* ---------- Bar navigasi bawah (ikon SVG), mengikuti warna tema ---------- */
.dock{position:fixed;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(94vw,460px);display:flex;justify-content:space-between;gap:2px;padding:6px;border-radius:24px;z-index:8;background:color-mix(in srgb,var(--bg) 88%,var(--accent));border:1px solid color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 8px 28px #0005;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.dock a{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:8px 2px 7px;border-radius:18px;color:var(--fg);text-decoration:none;font:600 .68rem/1.1 system-ui,sans-serif;transition:background .25s,color .25s}
.dock a[hidden]{display:none}
.dock svg{display:block;flex:none}
.dock a.on{background:var(--accent);color:var(--on-accent)}
.dock a:not(.on):hover{background:color-mix(in srgb,var(--accent) 22%,transparent)}
.dock span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.musicbtn{bottom:calc(88px + env(safe-area-inset-bottom))}
main{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
.fx{display:none!important}

/* ---------- Latar dua lapis: video di bagian atas, foto saat scroll ke bawah ---------- */
.bgfoto{z-index:0}
.bgmedia.bgtop{position:absolute;top:0;left:0;right:0;bottom:auto;height:100vh;height:100svh;z-index:0;
  -webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent)}
.bgmedia.bgtop{background:transparent}
.bgmedia.bgtop video{opacity:var(--vop,1)}
.bgmedia.bgtop::after{background:var(--bg-ov-top,color-mix(in srgb,var(--bg) 45%,transparent))}

/* ---------- Ayat/kutipan: tulisan saja, tanpa kotak ---------- */
.quote .q{font-size:calc(1.25rem * var(--qs,1))}
.quote .qref{font-size:calc(1rem * var(--qs,1))}
.card.quote{background:none!important;border:0!important;box-shadow:none!important;border-radius:0!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding-left:0;padding-right:0}

/* ---------- Latar galeri berganti (slideshow pudar) ---------- */
.bgslides .img{opacity:0;transform:scale(1.04);transition:opacity 1.6s ease}
.bgslides .img.on{opacity:1;transform:scale(1.12);transition:opacity 1.6s ease,transform 14s linear}
.bgslides .img.prev{transform:scale(1.12)}
@media (prefers-reduced-motion:reduce){.bgslides .img,.bgslides .img.on{transition:none;transform:none}}

/* ---------- Tombol scroll otomatis ---------- */
.asbtn{display:none;position:fixed;right:max(14px,env(safe-area-inset-right));bottom:calc(144px + env(safe-area-inset-bottom));width:48px;height:48px;border-radius:50%;border:0;align-items:center;justify-content:center;background:var(--accent);color:var(--on-accent);cursor:pointer;z-index:9;opacity:.55;transition:opacity .25s}
body.opened .asbtn{display:flex}
.asbtn.on{opacity:1}
.asbtn .ps{display:none}.asbtn.on .ps{display:inline}.asbtn.on .pl{display:none}