:root{--ivory:#fbeff1;--champ:#f3d3da;--beige:#e0a9b6;--brown:#7a2336;--char:#2a0d14;--gold:#b0455e;--serif:'Cormorant Garamond',Georgia,serif;--script:'Pinyon Script','Great Vibes','Snell Roundhand',cursive;--sans:'Jost',system-ui,sans-serif;--ease:cubic-bezier(.22,.7,.2,1)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;background:var(--ivory);color:var(--char);line-height:1.7;overflow-x:hidden}
body.locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
address{font-style:normal}
.dark,.cover,.hero,.cine,.lb,.music{--gold:#e8a9b8}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.grain{position:fixed;inset:0;z-index:90;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:80;pointer-events:none}
.progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;z-index:120}

/* type */
.small{font-size:.72rem;letter-spacing:.4em;text-transform:uppercase}
.gold{color:var(--gold)}
.muted{color:var(--brown);font-size:.98rem}
.center{text-align:center}
.head{font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,8vw,3.6rem);text-align:center;margin-bottom:2rem;letter-spacing:.04em}
.big{font-family:var(--serif);font-weight:300;font-size:clamp(2.8rem,12vw,6rem);line-height:1.05;letter-spacing:.02em}
.date{letter-spacing:.35em;font-size:.85rem}
.serif-q{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,4.6vw,2rem);line-height:1.7;max-width:34ch;margin:0 auto 1.6rem}
.quote{font-family:var(--serif);font-style:italic;font-size:clamp(1.1rem,4vw,1.5rem);max-width:30ch;margin:2rem auto 0;opacity:.9}

/* buttons */
.btn{position:relative;overflow:hidden;display:inline-block;border:1px solid var(--gold);background:transparent;color:inherit;font:400 .72rem var(--sans);letter-spacing:.3em;padding:1rem 2rem;cursor:pointer;margin-top:2rem;min-height:48px;transition:background .5s,color .5s}
.btn:hover{background:var(--gold);color:var(--char)}
.btn.sm{padding:.8rem 1.2rem;font-size:.65rem;margin-top:1.2rem}
.btn.ghost{display:block;text-align:center;border-color:var(--beige);margin-top:.8rem}
.rip{position:absolute;border-radius:50%;background:rgba(255,255,255,.35);transform:scale(0);animation:rip .7s var(--ease);pointer-events:none}
@keyframes rip{to{transform:scale(1);opacity:0}}

/* cover */
.cover{position:fixed;inset:0;z-index:100;background:radial-gradient(ellipse at 50% 40%,#4a1424,#1e080e 70%);color:var(--champ);display:grid;place-items:center;text-align:center;transition:opacity 1.6s ease,transform 1.8s var(--ease),visibility 1.8s}
.cover.gone{opacity:0;transform:scale(1.12);visibility:hidden;pointer-events:none}
.cover-in{padding:1.5rem}
.cover .names{font-family:var(--serif);font-weight:300;font-size:clamp(3rem,15vw,6.5rem);line-height:1;margin:1.2rem 0}
.cover .names span{display:block;font-style:italic;font-size:.4em;color:var(--gold);margin:.2em 0}
.fade{opacity:0;animation:fadeIn 2.2s ease forwards;animation-delay:var(--d,0s)}
@keyframes fadeIn{to{opacity:1}}
.envelope{position:relative;width:min(168px,46vw);height:110px;margin:1.6rem auto 0;perspective:700px;filter:drop-shadow(0 10px 16px rgba(0,0,0,.45))}
.envelope>*{position:absolute;inset:0}
.env-back{background:#d99aa9;border-radius:3px}
.env-card{background:var(--ivory);color:var(--char);inset:7px 11px;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:1;font-family:var(--serif)}
.env-card em{font-size:1rem}.env-card small{font-size:.5rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brown)}
.env-front{background:linear-gradient(90deg,#efc0ca,#f3cad2 50%,#efc0ca);clip-path:polygon(0 0,50% 54%,100% 0,100% 100%,0 100%);border-radius:3px;z-index:2}
.env-front::after{content:"";position:absolute;inset:0;background:linear-gradient(#f7d9df,#f1c7d0);clip-path:polygon(0 100%,50% 54%,100% 100%)}
.env-flap{bottom:auto;height:60px;background:linear-gradient(#e7aebb,#efc0ca);clip-path:polygon(0 0,100% 0,50% 100%);transform-origin:top;transition:transform .8s var(--ease),z-index 0s .35s;z-index:3}
.env-seal{inset:auto;left:50%;top:48px;width:22px;height:22px;margin-left:-11px;border-radius:50%;z-index:4;background:radial-gradient(circle at 35% 30%,#d0516d,#8c1f3a);box-shadow:0 2px 5px rgba(0,0,0,.4);display:grid;place-items:center;color:#fbe3e8;font-size:.55rem;transition:opacity .4s}
.opened .env-flap{transform:rotateX(180deg);z-index:0}
.opened .env-seal{opacity:0}
.opened .env-card{animation:cardOut 1.2s var(--ease) .55s both}
@keyframes cardOut{0%{transform:none;z-index:1}45%{transform:translateY(-52px);z-index:1}46%{z-index:5}100%{transform:translateY(-30px) scale(1.1);z-index:5;box-shadow:0 10px 24px rgba(0,0,0,.35)}}
.cover button{margin-top:2.4rem}

/* sections */
.sec{padding:clamp(5rem,16vw,9rem) 1.5rem;position:relative}
.sec.dark{background:var(--char);color:var(--champ)}
.sec.dark .muted{color:var(--beige)}
.line{width:1px;height:70px;background:var(--gold);margin:1.5rem auto;transform:scaleY(0);transform-origin:top;transition:transform 1.8s var(--ease) .3s}
.line.in{transform:scaleY(1)}
.intro-names{font-family:var(--serif);font-size:clamp(1.7rem,6vw,2.6rem);line-height:1.4}
.intro-names em{color:var(--gold);font-size:1.2rem}

/* hero */
.hero{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;color:var(--ivory);overflow:hidden;background:linear-gradient(160deg,#5a1a2c,#2a0d14)}
.bg{position:absolute;inset:-6% 0;overflow:hidden}
.bg img{width:100%;height:100%;object-fit:cover;will-change:transform}
.kb img{animation:kb 28s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.14) translate(-1.5%,-1%)}}
.vignette{position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(30,8,14,.35),rgba(20,5,10,.85)),linear-gradient(rgba(30,8,14,.25),rgba(30,8,14,.25))}
.light{position:absolute;inset:0;background:radial-gradient(circle at 30% 20%,rgba(255,190,205,.25),transparent 50%);animation:lt 14s ease-in-out infinite alternate}
@keyframes lt{to{transform:translate(18%,10%)}}
.hero-in{position:relative;padding:1.5rem;z-index:2}
.hero .date{margin-top:1.5rem}
.scroll{position:absolute;bottom:1.8rem;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.7rem;font-size:.6rem;letter-spacing:.35em}
.scroll i{width:1px;height:42px;background:linear-gradient(var(--gold),transparent);animation:sc 2.4s ease-in-out infinite;transform-origin:top}
@keyframes sc{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}

/* couple */
.couple{display:grid;gap:4rem;max-width:900px;margin:0 auto}
.person{text-align:center}
.person h3,.chapter h3,.event h3,.gift h3{font-family:var(--serif);font-weight:400;font-size:1.7rem;margin:1.4rem 0 .4rem}
.ph{position:relative;overflow:hidden;background:linear-gradient(145deg,var(--champ),var(--beige))}
.ph::after{content:"";position:absolute;inset:0;background:var(--ivory);transform-origin:top;transition:transform 1.6s var(--ease)}
.in .ph::after,.ph.in::after{transform:scaleY(0)}
.ph img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0;transform:scale(1.15);transition:transform 2.6s var(--ease)}
.in .ph img,.ph.in img{transform:scale(1)}
.portrait{aspect-ratio:3/4;max-width:340px;margin:0 auto}
.wide{aspect-ratio:4/3}

/* story */
.story{max-width:1000px;margin:0 auto}
.chapter{display:grid;gap:1.4rem;margin-bottom:4.5rem}
.hl{display:block;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform 1.8s var(--ease) .4s}
.in .hl{transform:scaleX(1)}
.chapter .txt{padding-top:.4rem}

/* day */
.daydate{font-family:var(--serif);font-size:2.4rem;letter-spacing:.2em;line-height:1.3;margin-bottom:2.5rem}
.daydate span{font-size:1.3rem;letter-spacing:.15em;color:var(--gold)}
.events{display:grid;gap:3rem;max-width:800px;margin:0 auto}
.event+.event{border-top:1px solid rgba(192,106,126,.4);padding-top:3rem}
.time{font-family:var(--serif);font-size:2.2rem;color:var(--gold);margin-bottom:.8rem}
.event address{color:var(--beige);font-size:.95rem}

/* countdown */
.cd{display:grid;grid-template-columns:repeat(4,1fr);gap:.5rem;max-width:560px;margin:0 auto}
.cd b{display:block;font-family:var(--serif);font-weight:300;font-size:clamp(2.2rem,11vw,4.2rem);line-height:1}
.cd span{font-size:.55rem;letter-spacing:.3em;color:var(--brown)}
.arrived{font-family:var(--serif);font-size:2rem;letter-spacing:.2em}

/* gallery */
.gal{padding-inline:.8rem}

/* cinematic */
.cine{position:relative;min-height:100svh;display:grid;place-items:center;text-align:center;overflow:hidden;background:#4a1424;padding:2rem}
.cine .serif-q{position:relative;z-index:2}
.light-t{color:var(--ivory)}

/* forms */
.narrow{max-width:520px;margin:0 auto}
.form{display:grid;gap:1.3rem;margin-top:2.2rem}
.form label,.form legend{display:grid;gap:.4rem;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase;color:var(--brown)}
.dark .form label{color:var(--beige)}
input,select,textarea{font:300 1rem var(--sans);background:transparent;color:inherit;border:0;border-bottom:1px solid var(--beige);padding:.7rem 0;border-radius:0;width:100%;letter-spacing:0;text-transform:none}
select option{color:#000}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--gold)}
fieldset{border:0;display:flex;gap:1rem;flex-wrap:wrap}
fieldset legend{width:100%;margin-bottom:.4rem}
.radio{display:block!important}
.radio input{position:absolute;opacity:0}
.radio span{display:inline-block;border:1px solid var(--beige);padding:.7rem 1.1rem;letter-spacing:.1em;text-transform:none;cursor:pointer;transition:.4s}
.radio input:checked+span{background:var(--gold);border-color:var(--gold);color:var(--char)}
.radio input:focus-visible+span{outline:2px solid var(--gold)}
.form .btn{margin-top:.6rem;justify-self:stretch}
.wish-list{display:grid;gap:1rem;margin-top:3rem}
.wish{border:1px solid rgba(192,106,126,.35);padding:1.4rem;animation:fadeIn 1.2s forwards;opacity:0}
.wish h4{font-family:var(--serif);font-weight:400;font-size:1.25rem;color:var(--gold)}
.wish p{font-size:.95rem;color:var(--beige);margin-top:.4rem}

/* gift */

/* map */
.map{max-width:760px;margin:2rem auto 0;aspect-ratio:16/10;filter:grayscale(.7) sepia(.2)}
.map iframe{width:100%;height:100%;border:0}

/* final */
.final{min-height:100svh}
.sign{font-family:var(--serif);font-style:italic;font-size:1.5rem;margin-top:2.5rem;color:var(--champ)}

/* music */
.music{position:fixed;right:.9rem;bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:95;display:flex;align-items:center;gap:.4rem;background:rgba(42,13,20,.85);backdrop-color:var(--champ);border-radius:30px;padding:.3rem;font-size:.65rem;letter-spacing:.15em}
.music button{background:none;border:0;color:inherit;width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:1.1rem;position:relative}
.music .status{display:none;padding-right:.4rem}
.music.playing .status{display:inline}
.music .mute,.music input{display:none}
.music.playing .mute{display:block}
.music.playing input{display:block;width:60px;border:0;padding:0;accent-color:var(--gold)}
.bars{display:none;position:absolute;inset:auto 0 6px;justify-content:center;gap:2px}
.playing .bars{display:flex}
.bars i{width:2px;height:6px;background:var(--gold);animation:bar 1s ease-in-out infinite}
.bars i:nth-child(2){animation-delay:.2s}.bars i:nth-child(3){animation-delay:.4s}
@keyframes bar{50%{height:2px}}

/* lightbox */
.lb{position:fixed;inset:0;z-index:150;background:rgba(20,5,10,.96);display:grid;place-items:center;opacity:0;transition:opacity .5s}
.lb.show{opacity:1}
.lb img{max-width:92vw;max-height:84vh;object-fit:contain;transition:opacity .4s}
.lb button{position:absolute;background:none;border:0;color:var(--champ);cursor:pointer;width:48px;height:48px;font-size:2rem}
.lb-x{top:1rem;right:1rem}.prev{left:.3rem}.next{right:.3rem}
.lb[hidden]{display:none}

.toast{position:fixed;left:50%;bottom:5.5rem;transform:translate(-50%,20px);background:var(--char);color:var(--champ);padding:.9rem 1.4rem;font-size:.85rem;opacity:0;pointer-events:none;transition:.5s var(--ease);z-index:200;border:1px solid var(--gold);max-width:90vw;text-align:center}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* reveal */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1.5s var(--ease) var(--d,0s),transform 1.5s var(--ease) var(--d,0s)}
.rv.in{opacity:1;transform:none;filter:none}

@media(min-width:99999px){
 .couple{grid-template-columns:1fr 1fr}
 .chapter{grid-template-columns:1.2fr 1fr;align-items:center;gap:3rem}
 .chapter.rev .ph{order:2}
 .events{grid-template-columns:1fr 1fr}
 .event+.event{border-top:0;padding-top:0;border-left:1px solid rgba(192,106,126,.4)}
 .music.playing input{width:80px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
 .rv{filter:none;transform:none}#dust{display:none}
}

.ord{font-family:var(--serif);font-size:1.05rem;color:var(--gold)}

/* ===== Transisi epic & romantis ===== */
/* sambungan halus terang <-> gelap */
.sec.dark::before,.sec.dark::after{content:"";position:absolute;left:0;right:0;height:80px;pointer-events:none;z-index:0}
.sec.dark::before{top:0;background:linear-gradient(var(--ivory),rgba(251,239,241,0))}
.sec.dark::after{bottom:0;background:linear-gradient(rgba(251,239,241,0),var(--ivory))}
#find::after{display:none}

/* cahaya mekar saat amplop dibuka */
.bloom{position:fixed;inset:0;z-index:102;pointer-events:none;opacity:0;background:radial-gradient(circle at 50% 55%,rgba(255,226,233,.95),rgba(248,190,205,.55) 40%,transparent 72%);animation:bloom 3s ease-out 1s forwards}
@keyframes bloom{0%{opacity:0;transform:scale(.5)}40%{opacity:1;transform:scale(1.15)}100%{opacity:0;transform:scale(1.6)}}

/* kanvas kelopak */
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:101;pointer-events:none}

/* judul hero merapat perlahan */
.hero .big.rv{letter-spacing:.2em;transition:opacity 2s var(--ease) var(--d,0s),transform 2s var(--ease) var(--d,0s),letter-spacing 3.2s var(--ease) var(--d,0s)}
.hero .big.rv.in{letter-spacing:.02em}

/* kutipan muncul kata demi kata */
.serif-q .w{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.serif-q.in .w{opacity:1;filter:none;transform:none}

/* detak jantung di bagian sinematik */
.cine::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at 50% 50%,rgba(255,170,190,.35),transparent 60%);animation:beat 4s ease-in-out infinite}
@keyframes beat{0%,100%{opacity:.2;transform:scale(1)}15%{opacity:.9;transform:scale(1.06)}30%{opacity:.35;transform:scale(1)}45%{opacity:.8;transform:scale(1.04)}}

@media(prefers-reduced-motion:reduce){.bloom,.cine::after{display:none}.serif-q .w{opacity:1;filter:none;transform:none}}

/* ===== Gulir otomatis ===== */
.autoscroll{position:fixed;right:.9rem;bottom:calc(.9rem + 60px + env(safe-area-inset-bottom));z-index:95;width:44px;height:44px;border-radius:50%;border:1px solid rgba(232,169,184,.5);background:rgba(42,13,20,.85);backdrop-color:#f3d3da;font-size:.8rem;cursor:pointer;display:grid;place-items:center}
.autoscroll[hidden]{display:none}
.autoscroll.on{border-color:#e8a9b8;animation:autoPulse 2.4s ease-out infinite}
@keyframes autoPulse{0%{box-shadow:0 0 0 0 rgba(232,169,184,.55)}100%{box-shadow:0 0 0 14px rgba(232,169,184,0)}}

/* meringankan halaman saat gulir otomatis aktif */
body.autoing .grain{display:none}
body.autoing .rv{filter:none}
body.autoing .light,body.autoing .cine::after{mix-blend-mode:normal}
body.autoing .music,body.autoing .autoscroll{backdrop-filter:none}

/* ===== Transisi tiap bagian ===== */
/* arah masuk bergantian */
.rv[data-fx=left]{transform:translateX(-40px)}
.rv[data-fx=right]{transform:translateX(40px)}
.rv[data-fx=zoom]{transform:scale(.86)}
.rv.in[data-fx]{transform:none}

/* judul per huruf + garis emas */
.head .ch{display:inline-block;opacity:0;transform:translateY(.5em) rotate(4deg);transition:opacity 1s var(--ease),transform 1.2s var(--ease)}
.head.in .ch{opacity:1;filter:none;transform:none}
.head::after{content:"";display:block;width:0;height:1px;margin:1.1rem auto 0;background:linear-gradient(90deg,transparent,var(--gold),transparent);transition:width 1.8s var(--ease) .9s}
.head.in::after{width:120px}

/* teks per kata untuk kutipan, nama, dan ajakan */
.quote .w,.intro-names .w,.sign .w,.muted .w{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}
.quote.in .w,.intro-names.in .w,.sign.in .w,.muted.in .w{opacity:1;filter:none;transform:none}

/* penanda antar bagian */
.orn{position:absolute;top:1.6rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:.8rem;z-index:1;pointer-events:none;color:var(--gold)}
.orn i{display:block;width:0;height:1px;background:currentColor;transition:width 1.6s var(--ease) .2s}
.orn b{display:block;line-height:0;opacity:0;transform:scale(0);transition:opacity 1s .5s,transform 1.2s cubic-bezier(.3,1.6,.5,1) .5s}
.orn svg{width:12px;height:12px;fill:currentColor}
.orn.in i{width:clamp(40px,14vw,90px)}
.orn.in b{opacity:1;transform:scale(1)}

/* foto: tirai bergantian + bingkai tipis */
.chapter.rev .ph::after,.person:nth-child(even) .ph::after{transform-origin:bottom}
.ph::before{content:"";position:absolute;inset:12px;border:1px solid rgba(255,255,255,.6);z-index:2;opacity:0;transform:scale(.94);pointer-events:none;transition:opacity 1.4s 1.4s,transform 1.8s var(--ease) 1.4s}
.in .ph::before,.ph.in::before{opacity:1;transform:none}

/* galeri muncul berurutan */

/* countdown: angka muncul satu per satu */
.cd>div{opacity:0;transform:translateY(24px) scale(.9);transition:opacity 1s var(--ease),transform 1.2s cubic-bezier(.3,1.4,.5,1)}
.cd.in>div{opacity:1;transform:none}
.cd.in>div:nth-child(2){transition-delay:.15s}
.cd.in>div:nth-child(3){transition-delay:.3s}
.cd.in>div:nth-child(4){transition-delay:.45s}

/* form: kolom muncul berurutan */
.form>*{opacity:0}
.form.in>*{animation:up 1s var(--ease) both}
.form.in>*:nth-child(2){animation-delay:.12s}
.form.in>*:nth-child(3){animation-delay:.24s}
.form.in>*:nth-child(4){animation-delay:.36s}
.form.in>*:nth-child(5){animation-delay:.48s}
.form.in>*:nth-child(6){animation-delay:.6s}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
input:focus,textarea:focus,select:focus{box-shadow:0 1px 0 0 var(--gold)}

/* kartu ucapan masuk halus */
.wish{animation:wishIn 1.1s var(--ease) forwards}
@keyframes wishIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;filter:none}}

@media(prefers-reduced-motion:reduce){
 .head .ch,.quote .w,.intro-names .w,.sign .w,.muted .w{opacity:1;filter:none;transform:none}
 .orn i{width:60px}.orn b{opacity:1;transform:none}
 .rv[data-fx]{transform:none}
}
/* ===== Posisi tengah di HP: cegah halaman melebar & zoom ===== */
html{touch-action:manipulation}
main,.sec{overflow-x:hidden;overflow-x:clip}
.gal{padding-inline:0}

/* ===== Tamu undangan di cover ===== */
.guest{margin-top:1.4rem;font-size:.8rem;letter-spacing:.14em;color:var(--beige)}
.guest b{display:block;font:400 1.5rem var(--serif);letter-spacing:.04em;color:var(--champ);margin-top:.2rem}
@media(max-height:700px){.cover .names{margin:.6rem 0}.envelope{margin-top:1rem}.cover button{margin-top:1.4rem}}

/* ===== Galeri geser (carousel) ===== */
.carousel{--sw:min(74vw,360px);max-width:1200px;margin:0 auto}
.track{position:relative;display:flex;gap:.9rem;overflow-x:auto;scroll-snap-type:x mandatory;padding:1rem calc(50% - var(--sw)/2) 1.6rem;scrollbar-width:none;overscroll-behavior-x:contain;cursor:grab}
.track::-webkit-scrollbar{display:none}
.track.drag{scroll-snap-type:none;cursor:grabbing}
.slide{flex:0 0 var(--sw);aspect-ratio:4/5;scroll-snap-align:center;scroll-snap-stop:always;position:relative;padding:0;border:0;overflow:hidden;cursor:zoom-in;background:linear-gradient(145deg,var(--champ),var(--beige));opacity:.5;transform:scale(.9);transition:opacity .6s var(--ease),transform .8s var(--ease);box-shadow:0 24px 40px -24px rgba(42,13,20,.55)}
.slide.active{opacity:1;transform:none}
.slide img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s;-webkit-user-drag:none;user-select:none}
.slide.ready img{opacity:1}
.slide::after{content:"";position:absolute;inset:10px;border:1px solid rgba(255,255,255,.55);pointer-events:none}
.gal-ctl{display:flex;align-items:center;justify-content:center;gap:1.4rem}
.gal-btn{width:48px;height:48px;border-radius:50%;border:1px solid var(--gold);background:transparent;color:var(--brown);font-size:1.7rem;line-height:1;padding-bottom:.15em;cursor:pointer;transition:background .4s,color .4s,opacity .4s}
.gal-btn:hover:not(:disabled){background:var(--gold);color:var(--ivory)}
.gal-btn:disabled{opacity:.3;cursor:default}
.gal-count{font-family:var(--serif);font-size:1.2rem;letter-spacing:.2em;min-width:7ch;text-align:center}
.gal-bar{display:block;height:1px;max-width:220px;margin:1.4rem auto 0;background:rgba(122,35,54,.2)}
.gal-bar b{display:block;height:100%;width:0;background:var(--gold);transition:width .5s var(--ease)}
@media(min-width:99999px){.carousel{--sw:340px}}

/* ===== Background & ornamen mawar ===== */
:root{--rose:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round'%3E%3Cpath d='M6 196C40 140 70 110 120 80S180 30 196 6'/%3E%3Cpath d='M60 134C52 110 40 100 24 96M112 90C108 68 118 52 134 44M150 62C168 62 180 70 190 84'/%3E%3Cg fill='%23000' stroke='none'%3E%3Cellipse cx='44' cy='150' rx='16' ry='5' transform='rotate(-50 44 150)'/%3E%3Cellipse cx='70' cy='122' rx='16' ry='5' transform='rotate(35 70 122)'/%3E%3Cellipse cx='104' cy='98' rx='15' ry='5' transform='rotate(-55 104 98)'/%3E%3Cellipse cx='140' cy='68' rx='15' ry='5' transform='rotate(30 140 68)'/%3E%3Cellipse cx='172' cy='40' rx='13' ry='4.5' transform='rotate(-50 172 40)'/%3E%3Ccircle cx='24' cy='96' r='2.5'/%3E%3Ccircle cx='134' cy='44' r='2.5'/%3E%3Ccircle cx='190' cy='84' r='2.5'/%3E%3C/g%3E%3Ccircle cx='88' cy='128' r='11'/%3E%3Ccircle cx='88' cy='128' r='7'/%3E%3Ccircle cx='88' cy='128' r='3'/%3E%3Ccircle cx='150' cy='46' r='9'/%3E%3Ccircle cx='150' cy='46' r='5.5'/%3E%3Ccircle cx='150' cy='46' r='2'/%3E%3Ccircle cx='34' cy='176' r='6'/%3E%3Ccircle cx='34' cy='176' r='3'/%3E%3C/svg%3E")}
.sec{isolation:isolate;background:radial-gradient(ellipse 80% 50% at 12% 0%,rgba(243,211,218,.75),transparent 70%),radial-gradient(ellipse 80% 50% at 92% 100%,rgba(236,185,200,.5),transparent 70%),var(--ivory)}
.sec.dark{background:linear-gradient(rgba(42,13,20,.78),rgba(30,8,14,.92)),var(--bgi,none) center/cover no-repeat;background-color:var(--char)}
#intro{--bgi:url(images/07.jpg)}#day{--bgi:url(images/09.jpg)}#save{--bgi:url(images/10.jpg)}#wishes{--bgi:url(images/11.jpg)}#find{--bgi:url(images/12.jpg)}
.sec.dark::before,.sec.dark::after{height:140px}
.corner{position:absolute;z-index:-1;width:clamp(90px,28vw,150px);aspect-ratio:1;background:var(--gold);opacity:0;--f:scale(1);transform:var(--f) scale(.7);transition:opacity 2s var(--ease),transform 2.4s var(--ease);pointer-events:none;-webkit-mask:var(--rose) center/contain no-repeat;mask:var(--rose) center/contain no-repeat}
.corner.in{opacity:.32;transform:var(--f)}
.corner.tl{top:0;left:0;--f:translateY(100%) scaleY(-1);transform-origin:0 0}
.corner.tr{top:0;right:0;--f:translate(-100%,100%) rotate(180deg);transform-origin:100% 0}
.corner.bl{bottom:0;left:0;transform-origin:0 100%}
.corner.br{bottom:0;right:0;--f:translateX(-100%) scaleX(-1);transform-origin:100% 100%}
.hero .corner,.cine .corner,.cover .corner{z-index:1}
.hero .corner.in,.cine .corner.in,.cover .corner.in{opacity:.42}

/* ===== Transisi lebih megah ===== */
.rv{transform:translateY(60px) scale(.96);transition:opacity 2s var(--ease) var(--d,0s),transform 2s var(--ease) var(--d,0s)}
.rv[data-fx=left]{transform:translateX(-90px)}
.rv[data-fx=right]{transform:translateX(90px)}
.rv[data-fx=zoom]{transform:scale(.7)}
#save .big.rv,#final .big.rv{letter-spacing:.2em;transition:opacity 2s var(--ease) var(--d,0s),transform 2s var(--ease) var(--d,0s),letter-spacing 3.2s var(--ease) var(--d,0s)}
#save .big.rv.in,#final .big.rv.in{letter-spacing:.02em}
.ph img{transform:scale(1.32);transition:transform 3.6s var(--ease)}
.cd.in b,#save .big.in{text-shadow:0 0 28px rgba(217,91,124,.4)}
@media(prefers-reduced-motion:reduce){.rv,.rv[data-fx]{transform:none;filter:none}.corner{transition:none}}

/* ===== Kartu rekening (gaya kartu bank terang) ===== */
.gifts{display:grid;gap:1.4rem;max-width:760px;margin:2.5rem auto 0}
@media(min-width:99999px){.gifts{grid-template-columns:1fr 1fr}}
.gift{position:relative;overflow:hidden;display:grid;grid-template-columns:1fr auto;grid-template-areas:"chip logo" "acc acc" "name copy";align-items:center;row-gap:.9rem;column-gap:1rem;text-align:left;color:#3d2c32;padding:1.4rem 1.4rem 1.3rem;border:2px solid #fff;border-radius:22px;background:linear-gradient(135deg,#fff 0%,#f6eff1 52%,#e8dde1 100%);box-shadow:0 22px 38px -20px rgba(42,13,20,.55),0 0 0 1px rgba(176,69,94,.12)}
.gift::before{content:"";position:absolute;width:300px;height:300px;right:-110px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.95),transparent 70%);pointer-events:none}
.gift::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 85% 115%,transparent 0 22px,rgba(176,69,94,.06) 22px 23px);pointer-events:none}
.gift>*{position:relative;z-index:1}
.chip{grid-area:chip;width:46px;height:35px;border-radius:7px;background:linear-gradient(135deg,#f1dcae,#c99d57 55%,#efd6a0);box-shadow:inset 0 0 0 1px rgba(90,60,20,.3)}
.chip::before{content:"";position:absolute;inset:7px 12px;border:1px solid rgba(90,60,20,.35);border-radius:3px}
.gc-logo{grid-area:logo;justify-self:end;height:34px;display:flex;align-items:center}
.gc-logo img{height:100%;width:auto}
.wm-jago{font:700 1.9rem/1 var(--sans);letter-spacing:-.03em;color:#f5a000}
.wm-bni{font:italic 700 1.9rem/1 var(--sans);letter-spacing:-.02em;color:#f26a22}
.wm-bni sup{font-size:.5em;font-style:normal;color:#0f7a8a;margin-left:.15em;vertical-align:top}
.acc{grid-area:acc;margin-top:.6rem;font:600 clamp(1.15rem,5.6vw,1.55rem) var(--sans);letter-spacing:.1em;color:#4b3b41;white-space:nowrap}
.gc-name{grid-area:name;font:400 1.05rem/1.3 var(--sans);letter-spacing:.05em;color:#5a4a50}
.gc-copy{grid-area:copy;display:inline-flex;align-items:center;gap:.45rem;border:0;border-radius:9px;background:#9b9097;color:#fff;font:500 .78rem var(--sans);letter-spacing:.06em;padding:.7rem 1rem;min-height:44px;cursor:pointer;transition:background .4s,transform .3s}
.gc-copy:hover{background:var(--gold)}
.gc-copy:active{transform:scale(.95)}
.gc-copy svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8}

/* ===== Transisi tiap bagian + peta ===== */
.sec{transition:opacity 1.8s ease}
.sec.pre{opacity:0}
.map{position:relative;overflow:hidden;box-shadow:0 0 0 1px rgba(232,169,184,.5),0 30px 50px -30px rgba(0,0,0,.7)}
.map.rv{opacity:1;transform:none;filter:none}
.map iframe{display:block;clip-path:inset(0 50% 0 50%);transform:scale(1.3);transition:clip-path 2.2s var(--ease) .1s,transform 3.4s var(--ease) .3s}
.map.in iframe{clip-path:inset(0);transform:none}

/* ===== Ranting bergoyang ditiup angin ===== */
@keyframes sway{from{rotate:-2deg}to{rotate:2.6deg}}
.corner.in{animation:sway 5.5s ease-in-out infinite alternate}
.corner.tr{animation-duration:6.8s;animation-delay:-2s}
.corner.bl{animation-duration:7.5s;animation-delay:-4s}
.corner.br{animation-duration:6.2s;animation-delay:-1s}
@media(prefers-reduced-motion:reduce){.sec.pre{opacity:1}.corner.in{animation:none;rotate:none}.map iframe{clip-path:none}}

/* ===== Hero ala referensi: foto penuh, hitung mundur bulat, menyatu ke bagian berikutnya ===== */
#hero{place-items:end center}
#hero .hero-in{padding:1.5rem 1.5rem calc(18vh + .5rem)}
#hero .bg img{object-position:50% 22%}
#hero .vignette{background:linear-gradient(rgba(30,8,14,.35),rgba(30,8,14,0) 28%,rgba(30,8,14,.35) 52%,rgba(24,6,11,.92) 82%,rgba(24,6,11,.96))}
#hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18vh;background:linear-gradient(rgba(251,239,241,0),var(--ivory));z-index:1;pointer-events:none}
#hero .scroll{display:none}
#hero .quote{margin-top:1.2rem;font-size:clamp(1rem,3.6vw,1.3rem)}
#hero .cd{max-width:330px;margin:1.8rem auto 0;gap:.6rem}
#hero .cd b{display:grid;place-items:center;width:clamp(58px,17vw,72px);aspect-ratio:1;margin:0 auto .45rem;border-radius:50%;font-size:clamp(1.2rem,5vw,1.6rem);background:rgba(30,8,14,.5);border:1px solid rgba(232,169,184,.7);backdrop-box-shadow:0 0 22px rgba(217,91,124,.25)}
#hero .cd span{font-size:.72rem;letter-spacing:.1em;color:var(--champ)}
#hero .arrived{margin-top:1.6rem}
.hero-guest{margin-top:1.6rem;font-size:.85rem;letter-spacing:.1em;color:var(--champ)}
.hero-guest b{display:block;font:400 1.35rem var(--serif);letter-spacing:.04em;color:var(--ivory)}

/* ===== Navigasi melayang ===== */
.dock{position:fixed;left:0;right:0;margin:0 auto;width:max-content;bottom:calc(.9rem + env(safe-area-inset-bottom));z-index:96;display:flex;gap:.1rem;padding:.4rem;border-radius:40px;background:rgba(251,239,241,.92);backdrop--webkit-backdrop-border:1px solid rgba(176,69,94,.18);box-shadow:0 14px 34px -12px rgba(42,13,20,.55);animation:dockIn 1s var(--ease) both;transition:opacity .4s}
@keyframes dockIn{from{opacity:0;transform:translateY(40px)}}
.dock[hidden]{display:none}
.dock a{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--brown);transition:background .5s,color .5s,transform .4s var(--ease)}
.dock a svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.dock a.on{background:var(--brown);color:var(--ivory)}
body.locked .dock{opacity:0;pointer-events:none}
body.autoing .dock{backdrop-filter:none}
/* tombol musik, gulir otomatis, dan toast naik di atas navigasi */
.music{bottom:calc(5.6rem + env(safe-area-inset-bottom))}
.autoscroll{bottom:calc(5.6rem + 60px + env(safe-area-inset-bottom))}
.toast{bottom:9.5rem}

/* ===== Cover dengan foto latar (ganti foto: ubah --cover-photo) ===== */
:root{--cover-photo:url(images/01.jpg)}
.cover::before{content:"";position:absolute;inset:-4%;z-index:-1;background:var(--cover-photo) 50% 25%/cover no-repeat;animation:coverKb 24s ease-in-out infinite alternate}
.cover::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(rgba(30,8,14,.62),rgba(30,8,14,.38) 38%,rgba(24,6,11,.85));pointer-events:none}
@keyframes coverKb{to{transform:scale(1.1) translateY(-1.5%)}}
@media(prefers-reduced-motion:reduce){.cover::before{animation:none}}

/* ===== Di laptop/desktop: undangan tampil sebagai satu kolom selebar HP ===== */
:root{--col:480px}
@media(min-width:600px){
  html{background:linear-gradient(rgba(24,6,11,.86),rgba(24,6,11,.94)),var(--cover-photo) center/cover fixed,#1e080e}
  body{max-width:var(--col);margin:0 auto;box-shadow:0 0 90px rgba(0,0,0,.65)}
  .cover{left:50%;right:auto;width:var(--col);margin-left:calc(var(--col) / -2);overflow:hidden}
  .music,.autoscroll{right:calc(50% - var(--col) / 2 + .9rem)}
  .progress{left:50%;width:var(--col);margin-left:calc(var(--col) / -2)}
}


/* === Tipografi romantis: nama mempelai pakai script === */
.cover .names,.big{font-family:var(--script);font-weight:400;letter-spacing:0;line-height:1.15}
.cover .names{font-size:clamp(3.6rem,18vw,7rem);margin:.8rem 0}
.cover .names span{font-family:var(--serif);font-weight:300;font-size:.3em;line-height:1;margin:.1em 0}
.big{font-size:clamp(3.2rem,15vw,6.6rem)}
.hero .big.rv,.hero .big.rv.in,#save .big.rv,#save .big.rv.in,#final .big.rv,#final .big.rv.in{letter-spacing:0}
.sign{font-family:var(--script);font-style:normal;font-size:2.1rem;line-height:1.3}
.intro-names{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:.02em}
.cover .small,.hero .small{letter-spacing:.45em}


/* === Pemutar musik & gulir otomatis dibuat mungil === */
.music{padding:.15rem;gap:.1rem;background:rgba(42,13,20,.88);bottom:calc(5.2rem + env(safe-area-inset-bottom))}
.music button{width:34px;height:34px;font-size:.95rem}
.music .status,.music.playing .status{display:none}
.music .mute{font-size:.8rem}
.music input,.music.playing input{display:none}
@media(hover:hover){.music.playing:hover input{display:block;width:56px;margin-right:.5rem}}
.bars{inset:auto 0 3px}
.bars i{height:4px}
.autoscroll{width:34px;height:34px;font-size:.7rem;bottom:calc(5.2rem + 34px + .6rem + env(safe-area-inset-bottom))}


/* === Performa: hemat render saat gulir === */
@media(hover:none){.grain{display:none}}
.cover.gone::before{animation-play-state:paused}
.rv,.w,.ch{will-change:auto}


/* === Merpati: terbang melintas & berpasangan === */
.doves{position:fixed;top:0;bottom:0;left:0;right:0;margin:0 auto;width:min(100%,var(--col));overflow:hidden;pointer-events:none;z-index:88}
.dove{position:absolute;left:0;will-change:transform,opacity;animation:doveX var(--dur,13s) linear var(--dl,0s) both}
.dove.rtl{animation-name:doveXr}
.dove i{display:block;width:var(--sz,60px);animation:doveBob 2.6s ease-in-out infinite alternate}
.dove.rtl svg{transform:scaleX(-1)}
@keyframes doveX{0%{transform:translate3d(-110px,0,0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translate3d(calc(var(--w) + 110px),0,0);opacity:0}}
@keyframes doveXr{0%{transform:translate3d(calc(var(--w) + 110px),0,0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translate3d(-110px,0,0);opacity:0}}
@keyframes doveBob{from{transform:translateY(-10px) rotate(-3deg)}to{transform:translateY(12px) rotate(3deg)}}
.dove svg,.dp svg{display:block;width:100%;height:auto;overflow:visible;fill:#fff7f9;stroke:rgba(232,169,184,.55);stroke-width:.7;stroke-linejoin:round}
.dove .eye,.dp .eye{fill:#8c1f3a;stroke:none}
.dove .ft,.dp .ft{fill:none;stroke:rgba(214,120,145,.55);stroke-width:.9;stroke-linecap:round}
.wf,.wb{transform-box:view-box}
.wf{transform-origin:54px 52px;transform:rotate(-8deg)}
.wb{transform-origin:52px 56px}
.fly .wf{animation:flapU .5s ease-in-out infinite alternate}
.fly .wb{animation:flapD .5s ease-in-out infinite alternate}
@keyframes flapU{from{transform:rotate(12deg)}to{transform:rotate(-34deg)}}
@keyframes flapD{from{transform:rotate(-10deg)}to{transform:rotate(16deg)}}
.dove-pair{display:flex;align-items:center;justify-content:center;gap:.7rem;margin:1.8rem auto}
.dp{width:62px;display:block}
.dp.r svg{transform:scaleX(-1)}
.dp-h{width:20px;height:20px;fill:var(--gold);stroke:none;animation:dpBeat 2.4s ease-in-out infinite}
@keyframes dpBeat{0%,100%{transform:scale(1)}50%{transform:scale(1.22)}}
@media(prefers-reduced-motion:reduce){.doves{display:none}.fly .wf,.fly .wb,.dp-h{animation:none}}

/* === Soft & smooth: kembalikan kesan lembut (blur tipis) dengan biaya render rendah === */
body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent}
/* blok yang muncul: blur tipis + naik pelan, easing lebih lembut */
.rv{filter:blur(6px);transform:translateY(38px) scale(.98);transition:opacity 1.9s var(--ease) var(--d,0s),transform 1.9s var(--ease) var(--d,0s),filter 1.6s var(--ease) var(--d,0s)}
.rv.in{filter:blur(0)}
.rv[data-fx=left]{transform:translateX(-50px)}
.rv[data-fx=right]{transform:translateX(50px)}
.rv[data-fx=zoom]{transform:scale(.82)}
.rv.in,.rv.in[data-fx]{transform:none}
.map.rv,.map.rv.in{filter:none;transform:none}
/* nama besar: transisi yang sama tanpa animasi jarak huruf (sudah 0) */
.hero .big.rv,#save .big.rv,#final .big.rv{transition:opacity 2.2s var(--ease) var(--d,0s),transform 2.2s var(--ease) var(--d,0s),filter 2s var(--ease) var(--d,0s)}
/* kata & huruf: blur kecil saja (murah) */
.quote .w,.intro-names .w,.sign .w,.muted .w,.serif-q .w{filter:blur(3px);transition:opacity 1.3s var(--ease),transform 1.3s var(--ease),filter 1.1s var(--ease)}
.head .ch{filter:blur(3px);transition:opacity 1.1s var(--ease),transform 1.3s var(--ease),filter 1s var(--ease)}
.quote.in .w,.intro-names.in .w,.sign.in .w,.muted.in .w,.serif-q.in .w,.head.in .ch{filter:blur(0)}
/* cahaya lembut di nama mempelai (statis, tidak membebani) */
.cover .names,.hero .big,#save .big,#final .big{text-shadow:0 0 34px rgba(232,169,184,.35)}
.hero-in{will-change:transform,opacity}
/* saat gulir otomatis aktif, tetap tanpa blur supaya mulus */
body.autoing .rv,body.autoing .w,body.autoing .ch{filter:none}
@media(prefers-reduced-motion:reduce){.rv,.w,.ch{filter:none!important}}
/* nama orang tua: pecah baris per nama, bukan di tengah nama */
.person .pr{white-space:nowrap}