@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600&family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@400;500;600&display=swap');
:root{--wine:#27030e;--wine2:#410916;--wine3:#681a2a;--gold:#d6b16b;--cream:#f6eee7;--line:rgba(214,177,107,.45)}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#130108;color:var(--cream);font-family:Montserrat,sans-serif;font-size:13px;line-height:1.8;overflow-x:hidden}.cover,main,footer{width:100%;max-width:680px;margin:auto}.cover{min-height:100svh;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:50px 34px 70px;overflow:hidden;background:radial-gradient(ellipse at 50% 42%,rgba(112,20,46,.52),transparent 48%),linear-gradient(145deg,#160009,#420a19 52%,#21030d)}.cover:before,.cover:after{content:"";position:absolute;inset:22px 20px;border:1px solid rgba(193,94,119,.3);pointer-events:none}.cover:after{inset:38px 37px;border:1px solid rgba(214,177,107,.24);clip-path:polygon(50% 0,62% 7%,75% 4%,88% 14%,100% 25%,94% 36%,100% 50%,94% 64%,100% 75%,88% 86%,75% 96%,62% 93%,50% 100%,38% 93%,25% 96%,12% 86%,0 75%,6% 64%,0 50%,6% 36%,0 25%,12% 14%,25% 4%,38% 7%)}.cover>*{position:relative;z-index:1}.cover-flower{font:52px Cinzel;color:var(--gold);text-shadow:0 0 25px rgba(214,177,107,.6);animation:pulse 3s ease-in-out infinite}.eyebrow{font:10px Montserrat;letter-spacing:4px;color:#d8b985;margin:16px 0}.cover h1{font:500 49px Cinzel;letter-spacing:1px;color:var(--gold);margin:4px 0}.cover h1 i{font:34px Cormorant Garamond;color:#e7c985}.cover-date{font:14px Cinzel;letter-spacing:2px;color:#e3c890;margin:4px 0 140px}.guest{font:11px Cinzel;color:#e4c997}.guest strong{display:block;font:600 20px Cormorant Garamond;letter-spacing:1px;margin-top:6px}.open-btn,.outline-btn{border:1px solid var(--gold);border-radius:30px;background:linear-gradient(100deg,#420a19,#751b35,#420a19);background-size:200% auto;color:#ffe7b5;padding:13px 30px;font:11px Cinzel;letter-spacing:2px;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 0 0 4px rgba(52,112,190,.85),0 0 25px rgba(214,177,107,.25);transition:.35s;margin-top:20px}.open-btn:hover,.outline-btn:hover{background-position:right center;transform:translateY(-3px);box-shadow:0 0 0 4px rgba(52,112,190,.95),0 8px 30px rgba(214,177,107,.35)}.section{position:relative;padding:100px 30px;text-align:center;background:radial-gradient(ellipse at center,rgba(102,23,45,.38),transparent 68%),linear-gradient(160deg,#21030d,#3d0817 48%,#26030e);border-bottom:1px solid rgba(214,177,107,.15);overflow:hidden}.section:before{content:"✦  ❧  ✦";position:absolute;top:23px;left:0;right:0;color:rgba(214,177,107,.6);letter-spacing:10px;font-size:16px;opacity:.7}.section>*{position:relative;z-index:1}.section.reveal{opacity:0;transform:translateY(45px);transition:opacity .9s ease,transform .9s ease}.section.reveal.visible{opacity:1;transform:none}.hero{padding-top:115px}.section h2{font:500 39px Cormorant Garamond;line-height:1.05;margin:10px 0 24px;color:#fff0da}.hero h2 em{display:block;color:var(--gold);font:italic 25px Cormorant Garamond;margin-top:13px}.lead{max-width:550px;margin:auto;color:#ead6c4;font-size:13px}.ornament{color:var(--gold);letter-spacing:8px;margin:28px 0}.names{font:500 61px Cormorant Garamond;line-height:1;color:#fff1d9}.names span{color:var(--gold);font-size:42px}.muted{color:#d7b477;letter-spacing:4px}.quote{background:linear-gradient(135deg,#310713,#61172a);padding-left:48px;padding-right:48px}.quote p{font:italic 28px Cormorant Garamond;color:#fff1dc;margin:5px auto;max-width:560px}.quote small{color:var(--gold);letter-spacing:2px}.quote-mark{font:90px Cormorant Garamond!important;line-height:.4;color:var(--gold)!important}.couple-grid{display:flex;align-items:center;justify-content:center;gap:35px}.couple-grid article{max-width:230px}.avatar{width:115px;height:115px;border-radius:50%;display:grid;place-items:center;margin:auto;border:1px solid var(--gold);outline:5px solid rgba(214,177,107,.12);background:radial-gradient(circle,#77304a,#2b0410);font:60px Cormorant Garamond;color:var(--gold);animation:float 4s ease-in-out infinite}.avatar-dark{background:radial-gradient(circle,#974f5e,#2b0410);animation-delay:1s}.couple-grid h3,.event h3{font:500 31px Cormorant Garamond;color:#ffe1ad;margin:19px 0 7px}.couple-grid p,.event p{font-size:11px;color:#e1c8b2}.amp{font:55px Cormorant Garamond;color:var(--gold)}.countdown{display:flex;justify-content:center;gap:12px;margin:35px 0}.countdown div{min-width:68px;padding:7px 13px;border-right:1px solid var(--line)}.countdown div:last-child{border:0}.countdown b{display:block;font:38px Cinzel;color:var(--gold)}.countdown span{font-size:9px;letter-spacing:1px;color:#e4c3a4}.event{border:1px solid var(--line);padding:32px 23px;background:rgba(31,2,12,.35);box-shadow:inset 0 0 35px rgba(214,177,107,.04)}.event-icon{font-size:32px;color:var(--gold)}.outline-btn{display:inline-block;background:transparent;box-shadow:none}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;max-width:480px;margin:auto}.photo{aspect-ratio:1;display:grid;place-items:center;border:1px solid var(--line);background:radial-gradient(circle,#771e38,#2c0410);color:var(--gold);font:38px Cormorant Garamond}.p2{background:radial-gradient(circle,#8f5264,#3c091a)}.p3{background:radial-gradient(circle,#5f3740,#1f020b)}.p4{background:radial-gradient(circle,#9a6a59,#3b0b19)}.rsvp form{display:grid;gap:12px;max-width:430px;margin:28px auto}.rsvp input,.rsvp select,.rsvp textarea{font:12px Montserrat;color:#ffe6c5;background:rgba(20,1,8,.5);border:1px solid var(--line);padding:14px}.rsvp option{color:#222}.success{color:var(--gold)}.music{position:fixed;z-index:5;right:max(18px,calc((100vw - 680px)/2 + 18px));top:18px;border:1px solid var(--gold);border-radius:50%;background:#320714;color:var(--gold);width:44px;height:44px;cursor:pointer;font-size:20px;display:none;animation:pulse 2.5s infinite}footer{background:linear-gradient(160deg,#170009,#5b1328);padding:50px 25px;text-align:center;color:#e4c4a2}footer b{font:29px Cormorant Garamond;color:var(--gold)}.cover.hidden{display:none}@keyframes pulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 transparent)}50%{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(214,177,107,.65))}}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@media(max-width:680px){.cover,.section,footer{max-width:none}.cover{padding-left:22px;padding-right:22px}.cover-date{margin-bottom:120px}.names{font-size:53px}.section{padding-left:21px;padding-right:21px}.quote{padding-left:24px;padding-right:24px}}
/* Motif Jawa/batik bergerak: pola simetris, ukiran dan kilau halus */
.cover:before{inset:0;border:0;opacity:.72;background-image:radial-gradient(ellipse at 10% 14%,transparent 0 54px,rgba(133,35,60,.72) 55px 58px,transparent 59px),radial-gradient(ellipse at 90% 14%,transparent 0 54px,rgba(133,35,60,.72) 55px 58px,transparent 59px),repeating-linear-gradient(45deg,transparent 0 16px,rgba(130,32,56,.26) 17px 19px,transparent 20px 34px),repeating-linear-gradient(-45deg,transparent 0 16px,rgba(130,32,56,.26) 17px 19px,transparent 20px 34px);background-size:220px 250px,220px 250px,76px 76px,76px 76px;background-position:left top,right top,center center,center center;background-repeat:no-repeat, no-repeat,repeat,repeat;animation:batikShift 18s ease-in-out infinite;mix-blend-mode:screen}.cover:after{inset:0;border:0;clip-path:none;background:radial-gradient(ellipse at 4% 18%,transparent 0 118px,rgba(146,39,67,.62) 119px 124px,transparent 125px),radial-gradient(ellipse at 96% 18%,transparent 0 118px,rgba(146,39,67,.62) 119px 124px,transparent 125px),linear-gradient(90deg,rgba(103,23,45,.75),transparent 16%,transparent 84%,rgba(103,23,45,.75));background-size:290px 560px,290px 560px,100% 100%;background-position:left top,right top,center; background-repeat:no-repeat;opacity:.9;animation:motifGlow 5s ease-in-out infinite alternate}.cover-flower{position:relative}.cover-flower:before,.cover-flower:after{content:"❧";position:absolute;top:8px;color:rgba(193,113,77,.78);font-size:38px;animation:vineSway 4s ease-in-out infinite}.cover-flower:before{right:58px;transform:rotate(-35deg)}.cover-flower:after{left:58px;transform:rotate(35deg);animation-delay:1.2s}@keyframes batikShift{0%,100%{background-position:left top,right top,center center,center center;transform:scale(1)}50%{background-position:left 8px,right -8px,center 12px,center -12px;transform:scale(1.025)}}@keyframes motifGlow{from{opacity:.55;filter:brightness(.85)}to{opacity:.95;filter:brightness(1.2)}}@keyframes vineSway{0%,100%{margin-top:0;opacity:.65}50%{margin-top:7px;opacity:1}}
.section.reveal{opacity:1;transform:none;animation:sectionRise .9s ease both;animation-delay:var(--delay,0ms)}@keyframes sectionRise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
/* Mode pembuka: hanya cover yang terlihat sebelum tombol ditekan */
main,footer{display:none}.opened main,.opened footer{display:block}.cover{min-height:100svh;height:100svh;max-height:100svh}.opened main{animation:pageReveal 1.1s ease both}.opened footer{animation:pageReveal 1.1s ease .2s both}
/* Motif berbeda untuk setiap halaman */
.hero{background-color:#3b0717;background-image:linear-gradient(135deg,rgba(184,63,91,.16) 25%,transparent 25%,transparent 50%,rgba(184,63,91,.16) 50%,rgba(184,63,91,.16) 75%,transparent 75%);background-size:54px 54px}
.quote{background-color:#25040d;background-image:radial-gradient(ellipse at center,transparent 0 32px,rgba(214,177,107,.16) 33px 35px,transparent 36px),radial-gradient(ellipse at center,transparent 0 9px,rgba(214,177,107,.12) 10px 11px,transparent 12px);background-size:88px 66px,88px 66px;background-position:0 0,44px 33px}
.couple{background-color:#4b0c1e;background-image:repeating-linear-gradient(45deg,transparent 0 14px,rgba(231,155,139,.11) 15px 17px,transparent 18px 29px),repeating-linear-gradient(-45deg,transparent 0 14px,rgba(231,155,139,.11) 15px 17px,transparent 18px 29px)}
.details{background-color:#2d0612;background-image:radial-gradient(circle at 20% 20%,rgba(214,177,107,.22) 0 2px,transparent 3px),radial-gradient(circle at 80% 80%,rgba(214,177,107,.16) 0 2px,transparent 3px);background-size:44px 44px,61px 61px}
.gallery{background-color:#5a1027;background-image:linear-gradient(90deg,transparent 48%,rgba(214,177,107,.14) 49% 51%,transparent 52%),linear-gradient(0deg,transparent 48%,rgba(214,177,107,.14) 49% 51%,transparent 52%);background-size:72px 72px}
.rsvp{background-color:#26030e;background-image:radial-gradient(ellipse at 0 0,transparent 0 42px,rgba(148,45,72,.35) 43px 46px,transparent 47px),radial-gradient(ellipse at 100% 100%,transparent 0 42px,rgba(148,45,72,.35) 43px 46px,transparent 47px);background-size:180px 180px}
@keyframes pageReveal{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.host-love{position:fixed;z-index:20;top:16px;right:max(18px,calc((100vw - 680px)/2 + 18px));width:34px;height:34px;border:1px solid var(--gold);border-radius:50%;background:rgba(39,3,14,.85);color:var(--gold);font-size:17px;cursor:pointer;box-shadow:0 0 12px rgba(214,177,107,.25);transition:.3s}.host-love:hover{transform:scale(1.12);background:#65142b}.host-panel{position:fixed;z-index:30;inset:0;background:rgba(13,1,7,.86);display:none;align-items:center;justify-content:center;padding:20px}.host-panel.show{display:flex}.host-card{width:min(520px,100%);max-height:90svh;overflow:auto;padding:28px 22px;background:linear-gradient(145deg,#4b0b1e,#21030d);border:1px solid var(--gold);box-shadow:0 0 50px rgba(214,177,107,.18);color:#f8e3c5}.host-card h2{font:35px Cormorant Garamond;color:#ffe0a2;text-align:center;margin:0 0 18px}.host-card input,.host-card select{display:block;width:100%;margin:9px 0;padding:12px;background:#23030d;border:1px solid var(--line);color:#ffe7c1;font:12px Montserrat}.host-card button{cursor:pointer}.host-login button,.host-action{width:100%;padding:12px;border:1px solid var(--gold);background:#711b37;color:#ffe3ae;font:11px Cinzel;letter-spacing:1px;margin-top:10px}.host-close{position:absolute;right:24px;top:16px;color:var(--gold);background:none;border:0;font-size:25px}.host-error{color:#ffaaa9;font-size:11px;text-align:center}.host-content{display:none}.guest-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(214,177,107,.2);padding:10px 0;font-size:12px}.guest-row select{width:145px;margin:0;padding:7px}.guest-list{margin-top:15px}.host-note{text-align:center;color:#d6b894;font-size:10px;margin-top:14px}
.section:after{content:"";position:absolute;inset:-35%;z-index:0;pointer-events:none;opacity:.48;background-image:radial-gradient(circle,rgba(244,205,126,.55) 0 1px,transparent 2px),radial-gradient(circle,rgba(214,177,107,.35) 0 1px,transparent 2px);background-size:110px 110px,170px 170px;animation:particleDrift 24s linear infinite}.section>*{z-index:1}.hero:after{background-image:linear-gradient(135deg,transparent 42%,rgba(244,189,126,.3) 43% 45%,transparent 46%);background-size:80px 80px;animation:diagonalFlow 15s linear infinite}.quote:after{background-image:radial-gradient(ellipse,transparent 0 30px,rgba(214,177,107,.45) 31px 34px,transparent 35px);background-size:115px 90px;animation:kawungFloat 16s ease-in-out infinite}.couple:after{background-image:repeating-linear-gradient(45deg,transparent 0 18px,rgba(231,155,139,.3) 19px 21px,transparent 22px 38px),repeating-linear-gradient(-45deg,transparent 0 18px,rgba(231,155,139,.22) 19px 21px,transparent 22px 38px);background-size:80px 80px;animation:parangMove 19s linear infinite}.details:after{background-image:radial-gradient(circle,rgba(244,205,126,.6) 0 2px,transparent 3px);background-size:58px 58px;animation:dotPulse 5s ease-in-out infinite}.gallery:after{background-image:linear-gradient(90deg,transparent 47%,rgba(214,177,107,.35) 48% 52%,transparent 53%),linear-gradient(0deg,transparent 47%,rgba(214,177,107,.25) 48% 52%,transparent 53%);background-size:88px 88px;animation:gridSlide 17s linear infinite}.rsvp:after{background-image:radial-gradient(ellipse,transparent 0 45px,rgba(148,45,72,.5) 46px 49px,transparent 50px);background-size:190px 190px;animation:floralBreath 9s ease-in-out infinite}@keyframes particleDrift{from{transform:translate3d(0,0,0) rotate(0)}to{transform:translate3d(90px,55px,0) rotate(8deg)}}@keyframes diagonalFlow{from{background-position:0 0}to{background-position:160px 160px}}@keyframes kawungFloat{0%,100%{transform:scale(1) rotate(0);opacity:.28}50%{transform:scale(1.08) rotate(4deg);opacity:.65}}@keyframes parangMove{from{background-position:0 0,0 0}to{background-position:160px 0,-160px 0}}@keyframes dotPulse{0%,100%{opacity:.25;transform:scale(1)}50%{opacity:.7;transform:scale(1.05)}}@keyframes gridSlide{from{background-position:0 0,0 0}to{background-position:88px 88px,-88px -88px}}@keyframes floralBreath{0%,100%{transform:scale(1);opacity:.22}50%{transform:scale(1.12);opacity:.62}}
.guest-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:16px 0}.guest-stat{padding:10px 5px;text-align:center;border:1px solid rgba(214,177,107,.35);background:rgba(20,1,8,.35)}.guest-stat b{display:block;font:22px Cinzel;color:var(--gold)}.guest-stat span{font-size:9px;color:#e4c3a4;letter-spacing:1px}.guest-group-title{font:18px Cormorant Garamond;color:#ffe0a2;margin:18px 0 6px;border-bottom:1px solid rgba(214,177,107,.24);padding-bottom:4px}.guest-row{background:rgba(20,1,8,.2)}
.host-love{right:auto!important;left:max(18px,calc((100vw - 680px)/2 + 18px))!important}
.export-pdf{width:100%;padding:12px;border:1px solid var(--gold);background:transparent;color:#ffe3ae;font:11px Cinzel;letter-spacing:1px;margin:12px 0;cursor:pointer}.guest-table{width:100%;border-collapse:collapse;font-size:10px}.guest-table th,.guest-table td{border:1px solid rgba(214,177,107,.28);padding:8px;text-align:left}.guest-table th{color:var(--gold);font-family:Cinzel}.guest-table td{color:#f0d8bf}
.delete-guest{border:1px solid #d56b79;background:transparent;color:#ffb1b8;padding:5px 8px;font:10px Montserrat;cursor:pointer}.delete-guest:hover{background:#8f2038;color:#fff}
.host-content>#songSelect,.host-content>#songSave{display:none!important}
.host-content>h3,.host-content>#newGuest,.host-content>#addGuest,.host-content>#guestList,.host-content>.guest-summary,.host-content>.host-note{display:none!important}.guest-table .delete-guest{white-space:nowrap}
html{scroll-snap-type:y proximity}body{scroll-snap-type:y proximity}.cover,.section,footer{scroll-snap-align:start;scroll-snap-stop:normal}.section{min-height:100svh;display:flex;flex-direction:column;justify-content:center}.section.rsvp{justify-content:flex-start;padding-top:90px;padding-bottom:90px}.section.details{justify-content:flex-start;padding-top:90px;padding-bottom:90px}.section.gallery{justify-content:center} @media(max-width:680px){.section{min-height:100svh;padding-top:82px;padding-bottom:82px}.section h2{font-size:36px}.hero .lead{max-width:330px}.quote p{font-size:24px}.couple-grid{gap:12px}.couple-grid article{max-width:155px}.countdown{gap:4px}.countdown div{min-width:63px;padding:5px 7px}.countdown b{font-size:28px}.event{max-width:100%;padding:24px 17px}.section.rsvp{padding-top:76px;padding-bottom:76px}}
@media(max-width:680px){html,body{width:100%;overflow-x:hidden}body{scroll-snap-type:none}.cover{height:auto;min-height:100dvh;max-height:none;padding-top:64px;padding-bottom:64px}.section,.section.rsvp,.section.details{height:auto;min-height:100dvh;max-height:none;overflow:visible;padding-top:76px;padding-bottom:76px;justify-content:center}.section.rsvp{justify-content:flex-start}.section.details{justify-content:flex-start}.section h2{margin-top:8px}.cover-date{margin-bottom:90px}.host-panel{overflow-y:auto}.host-card{max-height:calc(100dvh - 30px)}}@media(max-width:680px) and (max-height:680px){.cover{padding-top:36px;padding-bottom:36px}.cover-date{margin-bottom:50px}.section,.section.rsvp,.section.details{padding-top:58px;padding-bottom:58px}.section h2{font-size:32px}.lead{font-size:12px}.names{font-size:46px}.quote p{font-size:22px}}
/* Optimasi performa: motif tetap terlihat, animasi berat dikurangi */
.section{contain:layout paint;content-visibility:auto;contain-intrinsic-size:100vh}.section:after{will-change:auto}.cover:before,.cover:after{will-change:auto}@media(max-width:680px){.section:after{animation:none!important;opacity:.22;transform:none!important}.cover:before,.cover:after{animation:none!important}.cover-flower:before,.cover-flower:after{animation:none!important}.section.reveal{animation:none!important;transition:opacity .25s ease,transform .25s ease}.gallery-grid,.couple-grid{contain:content}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
/* Ukiran Jawa lembut + animasi ringan berbasis compositor */
.section{border-top:1px solid rgba(214,177,107,.16)}.section:before{content:"◇  ❧  ◇";font-size:13px;letter-spacing:8px;color:rgba(226,187,111,.58);opacity:.8}.section:after{opacity:.22;mix-blend-mode:normal;animation:softMotif 22s linear infinite}.hero:after{opacity:.16}.quote:after{opacity:.2}.couple:after{opacity:.18}.details:after{opacity:.2}.gallery:after{opacity:.16}.rsvp:after{opacity:.18}.cover:before{opacity:.58;mix-blend-mode:normal}.cover:after{opacity:.62}@keyframes softMotif{0%{transform:translate3d(0,0,0)}50%{transform:translate3d(18px,10px,0)}100%{transform:translate3d(0,0,0)}}@keyframes diagonalFlow{from{background-position:0 0}to{background-position:80px 80px}}@keyframes parangMove{from{background-position:0 0,-0px 0}to{background-position:80px 0,-80px 0}}@keyframes gridSlide{from{background-position:0 0,0 0}to{background-position:44px 44px,-44px -44px}}@keyframes kawungFloat{0%,100%{transform:scale(1);opacity:.18}50%{transform:scale(1.03);opacity:.32}}@media(max-width:680px){.section:after{animation:softMotif 28s ease-in-out infinite!important;opacity:.16}.cover:before,.cover:after{animation:none!important}}
.section:before{animation:ornamentGlide 12s ease-in-out infinite alternate;transform-origin:center;color:rgba(226,187,111,.62)}.section:after{animation:motifSway 24s ease-in-out infinite alternate}.hero:after,.quote:after,.couple:after,.details:after,.gallery:after,.rsvp:after{background-position:center center}.hero:before,.quote:before,.couple:before,.details:before,.gallery:before,.rsvp:before{filter:drop-shadow(0 0 5px rgba(214,177,107,.12))}@keyframes ornamentGlide{from{letter-spacing:7px;opacity:.48}to{letter-spacing:12px;opacity:.8}}@keyframes motifSway{from{transform:translate3d(-8px,-3px,0)}to{transform:translate3d(8px,3px,0)}}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}.cover h1,.names,.section h2,.quote p,.couple-grid h3,.event h3,footer b{font-family:'Cormorant Garamond',serif;font-weight:600;letter-spacing:.02em;text-shadow:0 2px 18px rgba(0,0,0,.25)}.eyebrow,.cover-date,.muted,.countdown b,.open-btn,.outline-btn,.host-action,.export-pdf{font-family:'Cinzel',serif}.lead,.event p,.couple-grid p{letter-spacing:.01em}.cover h1{font-size:clamp(45px,8vw,68px);letter-spacing:.035em}.names{font-size:clamp(52px,9vw,78px);letter-spacing:.025em}.names span{font-family:'Cormorant Garamond',serif}.section h2{font-size:clamp(38px,6vw,54px);letter-spacing:.02em}.hero h2 em{font-size:clamp(23px,4vw,31px);letter-spacing:.01em}.lead{font-size:clamp(12px,1.8vw,15px);line-height:1.9}.quote p{line-height:1.25;letter-spacing:.015em}.event h3{letter-spacing:.04em}.open-btn,.outline-btn{letter-spacing:.14em}.section:before{font-family:'Cormorant Garamond',serif}
.arabic-quote{direction:rtl;font-family:'Amiri','Times New Roman',serif;font-size:clamp(25px,5vw,38px);line-height:2;color:#f4d79d;margin:0 auto 24px;max-width:650px;text-shadow:0 2px 14px rgba(0,0,0,.3)}.quote .translation-label{font:10px Cinzel;letter-spacing:3px;color:#d6b16b;margin:18px 0 8px}
/* Koleksi corak batik tulis Jawa per slide */
.hero{background-color:#3d0718;background-image:repeating-linear-gradient(135deg,transparent 0 19px,rgba(177,72,91,.25) 20px 22px,transparent 23px 38px),repeating-linear-gradient(45deg,transparent 0 37px,rgba(91,25,45,.3) 38px 40px,transparent 41px 72px)}
.quote{background-color:#26040e;background-image:radial-gradient(ellipse at 0 0,transparent 0 27px,rgba(165,111,54,.35) 28px 31px,transparent 32px),radial-gradient(ellipse at 44px 32px,transparent 0 11px,rgba(165,111,54,.25) 12px 14px,transparent 15px);background-size:88px 64px}
.couple{background-color:#4b0c1e;background-image:linear-gradient(45deg,transparent 44%,rgba(214,154,99,.28) 45% 48%,transparent 49%),linear-gradient(-45deg,transparent 44%,rgba(214,154,99,.2) 45% 48%,transparent 49%);background-size:74px 74px}
.details{background-color:#300611;background-image:radial-gradient(circle at 50% 50%,transparent 0 17px,rgba(183,113,66,.32) 18px 20px,transparent 21px),radial-gradient(circle at 0 0,transparent 0 7px,rgba(183,113,66,.26) 8px 10px,transparent 11px);background-size:76px 76px,76px 76px}
.gallery{background-color:#571127;background-image:linear-gradient(90deg,transparent 46%,rgba(214,177,107,.22) 47% 49%,transparent 50%),linear-gradient(0deg,transparent 46%,rgba(214,177,107,.18) 47% 49%,transparent 50%),radial-gradient(circle,rgba(214,177,107,.28) 0 2px,transparent 3px);background-size:78px 78px,78px 78px,39px 39px}
.rsvp{background-color:#2b0512;background-image:radial-gradient(ellipse at 0 50%,transparent 0 35px,rgba(137,40,67,.38) 36px 39px,transparent 40px),radial-gradient(ellipse at 100% 50%,transparent 0 35px,rgba(137,40,67,.38) 36px 39px,transparent 40px);background-size:170px 170px}
.hero:after,.quote:after,.couple:after,.details:after,.gallery:after,.rsvp:after{animation:batikTulisFlow 30s ease-in-out infinite alternate}@keyframes batikTulisFlow{from{transform:translate3d(-6px,-3px,0)}to{transform:translate3d(6px,3px,0)}}
/* Override final: batik terlihat jelas dan ringan di HP */
.section:after{display:none!important}.section{background-attachment:scroll!important;background-repeat:repeat!important;background-blend-mode:normal!important;animation:none!important}.hero{background-color:#3a0717!important;background-image:repeating-linear-gradient(135deg,rgba(153,48,72,.42) 0 2px,transparent 2px 25px),repeating-linear-gradient(45deg,rgba(96,24,47,.34) 0 2px,transparent 2px 25px)!important;background-size:70px 70px!important}.quote{background-color:#26040e!important;background-image:radial-gradient(ellipse,transparent 0 22px,rgba(184,125,66,.42) 23px 25px,transparent 26px)!important;background-size:74px 58px!important}.couple{background-color:#480b1c!important;background-image:repeating-linear-gradient(45deg,transparent 0 17px,rgba(226,157,103,.3) 18px 20px,transparent 21px 36px),repeating-linear-gradient(-45deg,transparent 0 17px,rgba(226,157,103,.2) 18px 20px,transparent 21px 36px)!important;background-size:72px 72px!important}.details{background-color:#300611!important;background-image:radial-gradient(circle,rgba(208,155,91,.4) 0 2px,transparent 3px)!important;background-size:42px 42px!important}.gallery{background-color:#571127!important;background-image:linear-gradient(90deg,transparent 47%,rgba(219,171,100,.32) 48% 51%,transparent 52%),linear-gradient(0deg,transparent 47%,rgba(219,171,100,.25) 48% 51%,transparent 52%)!important;background-size:68px 68px!important}.rsvp{background-color:#2a0511!important;background-image:radial-gradient(ellipse,transparent 0 31px,rgba(148,46,75,.42) 32px 35px,transparent 36px)!important;background-size:150px 150px!important}@media(max-width:680px){.section:before{animation:ornamentGlide 16s ease-in-out infinite alternate}.section{background-size:56px 56px!important}.hero{background-size:58px 58px!important}.quote{background-size:62px 50px!important}.couple{background-size:58px 58px!important}.details{background-size:34px 34px!important}.gallery{background-size:56px 56px!important}.rsvp{background-size:120px 120px!important}}
/* Bingkai bunga animasi untuk setiap slide */
.section:after{display:block!important;content:"";position:absolute;inset:12px;z-index:0;pointer-events:none;border:1px solid rgba(214,177,107,.28);border-radius:2px;background-image:radial-gradient(circle at 0 0,transparent 0 13px,rgba(214,177,107,.55) 14px 16px,transparent 17px),radial-gradient(circle at 100% 0,transparent 0 13px,rgba(214,177,107,.55) 14px 16px,transparent 17px),radial-gradient(circle at 0 100%,transparent 0 13px,rgba(214,177,107,.55) 14px 16px,transparent 17px),radial-gradient(circle at 100% 100%,transparent 0 13px,rgba(214,177,107,.55) 14px 16px,transparent 17px);background-size:90px 90px;background-repeat:no-repeat;opacity:.72;animation:floralBorder 8s ease-in-out infinite alternate}.section>*{position:relative;z-index:1}.section:before{animation:ornamentGlide 7s ease-in-out infinite alternate}@keyframes floralBorder{from{transform:scale(1);opacity:.48;box-shadow:inset 0 0 0 rgba(214,177,107,0)}to{transform:scale(1.012);opacity:.9;box-shadow:inset 0 0 24px rgba(214,177,107,.1)}}@media(max-width:680px){.section:after{animation:floralBorder 10s ease-in-out infinite alternate!important;inset:8px}.section:before{animation:ornamentGlide 9s ease-in-out infinite alternate}}
.section:after{border:2px solid rgba(235,194,112,.78)!important;opacity:.92!important;will-change:transform}.section:not(.visible):after{animation:none!important;opacity:.56!important}.section.visible:after{animation:floralBorder 8s ease-in-out infinite alternate!important}@media(max-width:680px){.section:after{border-width:1px!important;opacity:.86!important}.section:not(.visible):after{opacity:.42!important}.section.visible:after{animation:floralBorder 10s ease-in-out infinite alternate!important}}
.rsvp form{max-width:300px!important;margin:24px auto!important;gap:9px}.rsvp input,.rsvp select,.rsvp textarea{padding:11px!important;font-size:11px!important}.rsvp textarea{min-height:70px}.rsvp .outline-btn{padding:11px 22px}.guest-wishes{max-width:420px;margin:32px auto 0;text-align:left}.guest-wishes-title{text-align:center;color:var(--gold);font:24px 'Cormorant Garamond';margin-bottom:12px}.wish-card{padding:12px 15px;margin:8px 0;border-left:2px solid var(--gold);background:rgba(20,1,8,.28)}.wish-card b{display:block;color:#ffe0a2;font:600 17px 'Cormorant Garamond'}.wish-card span{display:block;color:#ead6c4;font-size:11px;line-height:1.6}
@media (max-width:560px){.rsvp form{width:min(88vw,300px)!important}.guest-wishes{width:min(88vw,420px);margin-top:24px}.guest-wishes-title{font-size:21px}.wish-card{padding:10px 12px}.wish-card b{font-size:16px}.wish-card span{font-size:12px}}
/* Gerak motif organik: tiap slide menerima variabel acak dari undangan.js. */
.section{overflow:hidden;isolation:isolate}
.section:before,.section:after{will-change:transform,background-position;transform-origin:center}
.section:before{animation:motifDrift var(--motif-duration,18s) ease-in-out var(--motif-delay,0s) infinite alternate!important;background-size:var(--motif-size,64px) var(--motif-size,64px)!important}
.section:after{animation:floralBorder var(--border-duration,10s) ease-in-out var(--border-delay,0s) infinite alternate!important}
@keyframes motifDrift{0%{transform:translate3d(calc(var(--motif-x,0px) * -1),calc(var(--motif-y,0px) * -1),0) scale(var(--motif-scale,1));background-position:0 0}50%{transform:translate3d(0,0,0) scale(calc(var(--motif-scale,1) + .012));background-position:var(--motif-shift,12px) calc(var(--motif-shift,12px) * -1)}100%{transform:translate3d(var(--motif-x,0px),var(--motif-y,0px),0) scale(var(--motif-scale,1));background-position:calc(var(--motif-shift,12px) * -1) var(--motif-shift,12px)}}
@media (prefers-reduced-motion:reduce){.section:before,.section:after{animation:none!important}}
/* Pergerakan utama corak: terlihat di desktop maupun HP, tanpa JavaScript berat. */
.section{animation:batikBackgroundMove var(--pattern-duration,20s) ease-in-out var(--pattern-delay,0s) infinite alternate!important;background-position:var(--pattern-start,0px) var(--pattern-start,0px)!important}
@keyframes batikBackgroundMove{0%{background-position:var(--pattern-start,0px) var(--pattern-start,0px)}50%{background-position:var(--pattern-mid,16px) calc(var(--pattern-mid,16px) * -1)}100%{background-position:calc(var(--pattern-start,0px) * -1) var(--pattern-mid,16px)}}
@media (prefers-reduced-motion:reduce){.section{animation:none!important}}
/* Animasi motif yang sengaja dibuat terlihat jelas. */
.hero{animation:heroPattern 6s linear infinite!important}
.quote{animation:kawungPattern 8s ease-in-out infinite alternate!important}
.couple{animation:parangPattern 7s linear infinite!important}
.details{animation:dotPattern 4s ease-in-out infinite alternate!important}
.gallery{animation:gridPattern 6s linear infinite!important}
.rsvp{animation:floralPattern 9s ease-in-out infinite alternate!important}
@keyframes heroPattern{0%{background-position:0 0}50%{background-position:80px -80px}100%{background-position:160px 0}}
@keyframes kawungPattern{0%{background-position:0 0,44px 33px}50%{background-position:45px 28px,8px 65px}100%{background-position:-45px 0,80px -30px}}
@keyframes parangPattern{0%{background-position:0 0,0 0}50%{background-position:90px -50px,-90px 50px}100%{background-position:180px 0,-180px 0}}
@keyframes dotPattern{0%{background-position:0 0}50%{background-position:20px 20px}100%{background-position:-20px 12px}}
@keyframes gridPattern{0%{background-position:0 0,0 0}50%{background-position:70px -70px,-70px 70px}100%{background-position:140px 0,-140px 0}}
@keyframes floralPattern{0%{background-position:0 0,100% 100%;transform:scale(1)}50%{background-position:28px -24px,calc(100% - 28px) calc(100% + 24px);transform:scale(1.012)}100%{background-position:-28px 24px,calc(100% + 28px) calc(100% - 24px);transform:scale(1)}}
/* Pastikan semua slide tetap merender dan menjalankan animasinya saat discroll. */
.section{content-visibility:visible!important;contain:none!important;animation-play-state:running!important}
.section:before,.section:after{animation-play-state:running!important}
@media(max-width:680px){.section:after{animation-play-state:running!important;transform:none}}
/* Animasi tipografi elegan pada seluruh slide. */
.section .eyebrow,.section h1,.section h2,.section h3,.section .lead,.section .names,.section .muted,.section .quote-mark,.section .quote p,.section .quote small,.section .couple-grid p,.section .countdown,.section .event,.section .gallery-grid,.section form,.section .guest-wishes{animation:textRise 1.15s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--text-delay,0ms) + var(--delay,0ms))}
.section h1,.section h2,.section h3{animation-name:textGlowRise;animation-duration:1.4s}
.section .eyebrow{--text-delay:80ms}.section h1,.section h2{--text-delay:160ms}.section .lead,.section .quote p{--text-delay:280ms}.section .names,.section .quote-mark{--text-delay:390ms}.section .muted,.section .quote small,.section .event,.section .countdown{--text-delay:500ms}.section .couple-grid,.section .gallery-grid,.section form,.section .guest-wishes{--text-delay:620ms}
.section.visible .eyebrow,.section.visible h1,.section.visible h2,.section.visible h3,.section.visible .lead,.section.visible .names,.section.visible .muted,.section.visible .quote-mark,.section.visible .quote p,.section.visible .quote small,.section.visible .couple-grid p,.section.visible .countdown,.section.visible .event,.section.visible .gallery-grid,.section.visible form,.section.visible .guest-wishes{animation-play-state:running}
.section h1,.section h2,.section h3,.section .names{background:linear-gradient(105deg,#fff1d9 20%,#fff8e9 42%,var(--gold) 50%,#fff8e9 58%,#fff1d9 80%);background-size:220% auto;background-clip:text;-webkit-background-clip:text;color:transparent;animation-name:textGlowRise,titleShimmer;animation-duration:1.4s,6s;animation-delay:var(--text-delay,160ms),1.5s;animation-iteration-count:1,infinite;animation-timing-function:cubic-bezier(.2,.75,.25,1),ease-in-out}
@keyframes textRise{from{opacity:0;transform:translate3d(0,22px,0);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes textGlowRise{from{opacity:0;transform:translate3d(0,28px,0) scale(.96);filter:blur(6px);text-shadow:0 0 0 transparent}to{opacity:1;transform:none;filter:blur(0);text-shadow:0 0 22px rgba(214,177,107,.18)}}
@keyframes titleShimmer{0%,100%{background-position:200% center}50%{background-position:-20% center}}
@media(max-width:680px){.section h1,.section h2,.section h3,.section .names{animation-duration:1.1s,8s}.section .lead,.section .quote p{animation-duration:.9s}}
@media(prefers-reduced-motion:reduce){.section>*{animation:none!important}.section h1,.section h2,.section h3,.section .names{color:#fff1d9;background:none}}
/* Gerak teks terus-menerus agar terlihat jelas setelah halaman dibuka. */
.section h1,.section h2,.section h3,.section .names{animation:textFloat 4.8s ease-in-out infinite alternate!important;color:#fff1d9!important;background:none!important;-webkit-text-fill-color:#fff1d9!important}
.section .eyebrow,.section .lead,.section .muted,.section .quote p,.section .quote small,.section .couple-grid p,.section .event p,.section .countdown,.section .guest-wishes{animation:textBreath 5.5s ease-in-out infinite alternate!important}
@keyframes textFloat{0%{transform:translate3d(0,0,0);text-shadow:0 2px 10px rgba(0,0,0,.18)}50%{transform:translate3d(0,-4px,0);text-shadow:0 0 24px rgba(255,213,139,.36)}100%{transform:translate3d(0,2px,0);text-shadow:0 3px 16px rgba(214,177,107,.26)}}
@keyframes textBreath{0%{opacity:.88;transform:translate3d(0,0,0)}50%{opacity:1;transform:translate3d(0,-2px,0)}100%{opacity:.94;transform:translate3d(0,1px,0)}}
@media(prefers-reduced-motion:reduce){.section h1,.section h2,.section h3,.section .names,.section .eyebrow,.section .lead,.section .muted,.section .quote p,.section .quote small,.section .couple-grid p,.section .event p,.section .countdown,.section .guest-wishes{animation:none!important}}