@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&family=Manrope:wght@400;500;600;700&family=Noto+Sans+Balinese:wght@400&display=swap');
:root{color-scheme:dark;--bg:#171916;--surface:#20231e;--gold:#d9bd82;--ink:#f4f0e7;--muted:#bcbeb3;--line:#424538;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Manrope',Arial,sans-serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:70px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.8 var(--sans)}body.closed{overflow:hidden}button,input,textarea,select{font:inherit}button,a,input,select,textarea{-webkit-tap-highlight-color:transparent}button,a{touch-action:manipulation}button{cursor:pointer}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--gold);outline-offset:5px}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.05}h2{font-size:clamp(2.8rem,8vw,3.7rem)}h3{font-size:2.4rem}i{font-family:var(--serif);font-weight:400;color:var(--gold)}img{display:block;width:100%;object-fit:cover}button{border:0}button:disabled{opacity:.6;cursor:not-allowed}[hidden]{display:none!important}.eyebrow{font-size:.75rem;letter-spacing:.22em;font-weight:600}.muted{color:var(--muted);font-size:.875rem}.section-number{display:block;color:var(--gold);font-size:.75rem;letter-spacing:.18em;margin-bottom:24px}.button{min-height:50px;padding:14px 23px;border-radius:2px;display:inline-flex;align-items:center;justify-content:center;gap:24px;font-size:.875rem;font-weight:600;line-height:1.5}.button span{font-size:1.25rem}.gold{background:var(--gold);color:var(--bg)}.outline{border:1px solid var(--gold);background:transparent;color:var(--gold)}.button:hover{filter:brightness(1.1)}.invitation-shell{position:relative;max-width:540px;margin:0 auto;overflow:clip}.demo-bar{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:56px;padding:10px 22px;border-bottom:1px solid var(--line);background:var(--bg);font-size:.875rem}.demo-bar a{font-weight:700;letter-spacing:-.03em}.demo-bar span{font-weight:400;color:var(--muted)}.demo-bar button{font-size:.75rem;color:var(--gold);background:none;padding:7px 0}.cover{position:fixed;inset:56px 0 0;max-width:540px;margin:auto;z-index:4;display:flex;align-items:center;justify-content:center;min-height:440px;transition:opacity .8s,transform .8s;overflow:auto}.cover>img,.hero>img{position:absolute;inset:0;height:100%;filter:brightness(.64)}.cover:after,.hero:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,15,11,.25),rgba(10,15,11,.12) 35%,rgba(10,15,11,.85))}.cover-content{position:relative;z-index:1;text-align:center;padding:40px 24px 65px;width:100%}.cover h1{font-size:clamp(4rem,15vw,5.8rem);margin:24px 0}.cover h1 i{font-size:3rem;display:block;margin:2px 0}.cover-date{letter-spacing:.13em;font-size:.875rem}.guest{margin:34px 0 24px}.guest p{font-size:.75rem;color:#e1e3da}.guest strong{display:block;font-size:1.1rem;margin:8px 0;overflow-wrap:anywhere}.guest small{font-size:.75rem;color:#d8dacd}.cover-foot{position:absolute;bottom:18px;z-index:1;text-align:center;font-size:.7rem;color:#d8dacd;padding:0 20px}.cover.opened{opacity:0;transform:translateY(-24px);pointer-events:none}.hero{position:relative;min-height:740px;min-height:calc(100svh - 56px);display:flex;align-items:flex-end}.hero-copy{position:relative;z-index:1;padding:90px 32px 72px;width:100%}.hero h2{font-size:5rem;margin:24px 0 18px}.hero h2 span{display:block}.hero h2 i{font-size:3rem}.hero-copy>p:not(.eyebrow){font-size:.875rem;letter-spacing:.15em}.scroll-hint{display:flex;align-items:center;gap:22px;font-size:.65rem;letter-spacing:.16em;color:var(--gold);margin-top:48px}.scroll-hint span{font-size:1.3rem}.section{padding:80px 32px}.section>h2{margin-bottom:24px}.intro{text-align:center;padding-top:88px}.intro>p{color:var(--muted)}blockquote{font-family:var(--serif);font-size:1.6rem;line-height:1.45;font-style:italic;color:var(--gold);margin:35px 0 15px;padding-top:32px;border-top:1px solid var(--line)}.intro .quote-source{font-size:.75rem}.couple{background:var(--surface);text-align:center}.couple-photo{position:relative;max-width:330px;margin:36px auto}.couple-photo img{aspect-ratio:3/4;border-radius:160px 160px 2px 2px;object-position:center}.couple-photo>span{display:block;padding:12px;font-size:.65rem;letter-spacing:.24em;color:var(--gold);border-bottom:1px solid var(--line)}.person{padding:15px 0}.person h3{margin:14px 0 18px;color:var(--gold)}.person>p:last-child{color:var(--muted);font-size:.875rem;max-width:330px;margin:auto}.ampersand{font-family:var(--serif);font-size:3rem;color:var(--gold);margin:16px}.events{background:#e9e5da;color:var(--bg)}.events .section-number{color:#786131}.events .muted{color:#606654}.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:32px 0 10px}.countdown>div{text-align:center;border-top:1px solid #b5b2a5;border-bottom:1px solid #b5b2a5;padding:14px 2px}.countdown strong{display:block;font:2.6rem/1.2 var(--serif)}.countdown span{font-size:.7rem;letter-spacing:.08em}.event-card{border-top:1px solid #b5b2a5;margin-top:30px;padding-top:26px}.event-card .eyebrow{color:#786131}.event-card h3{font-size:2rem;margin:8px 0 14px}.event-card p{font-size:.875rem}.event-card address{font-style:normal;font-size:.875rem;margin:10px 0 18px;color:#606654}.events .outline{border-color:#786131;color:#675024}.events>button{margin-top:32px;width:100%}.gallery{padding-left:22px;padding-right:22px}.gallery>.section-number,.gallery>h2,.gallery>p{margin-left:10px}.gallery-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:30px}.gallery-grid button{background:var(--surface);padding:0;overflow:hidden;position:relative}.gallery-grid button:first-child{grid-column:1/-1}.gallery-grid img{aspect-ratio:3/4;transition:transform .4s}.gallery-grid button:first-child img{aspect-ratio:4/3}.gallery-grid button:hover img{transform:scale(1.035)}.gallery-grid button:after{content:'↗';position:absolute;right:12px;bottom:8px;font-size:1.3rem;text-shadow:0 1px 4px #000}.rsvp{background:var(--surface)}.rsvp>p,.gift>p,.closing>p{color:var(--muted)}.demo-notice{padding:12px 15px;background:#303328;border-left:2px solid var(--gold);font-size:.75rem;color:#ded8c5;margin:24px 0}form{display:grid;gap:18px}label{display:grid;gap:8px;font-size:.875rem}input,select,textarea{min-height:48px;width:100%;background:#171916;color:var(--ink);border:1px solid #595c4b;border-radius:2px;padding:11px 14px;min-width:0}textarea{resize:vertical}input::placeholder,textarea::placeholder{color:#939989}input[type=file]{font-size:.75rem;padding:12px}input[type=file]::file-selector-button{padding:6px;background:var(--gold);border:0;margin-right:8px}.wishes{margin-top:36px}.wish{padding:20px 0;border-top:1px solid var(--line)}.wish strong{color:var(--gold);overflow-wrap:anywhere}.wish small{display:block;font-size:.75rem;color:var(--muted)}.wish p{font-size:.875rem;margin-top:8px;white-space:pre-wrap;overflow-wrap:anywhere}.gift{text-align:center}.gift>.button{margin-top:28px}.bank-card{border:1px solid var(--line);padding:25px 18px;margin-top:25px;background:var(--surface)}.bank-card h3{font-size:2rem;margin:16px 0;overflow-wrap:anywhere}.bank-card small{display:block;color:var(--gold);font-size:.75rem;margin:18px 0}.closing{background:var(--surface);text-align:center;padding-bottom:120px}.closing>.eyebrow{font-size:.7rem}.closing h2{font-size:3.6rem;margin:28px 0}.closing h2 i{display:block;font-size:2.4rem}.closing>a{display:inline-block;margin-top:38px;color:var(--gold);font-weight:600}.closing>small{display:block;color:var(--muted);font-size:.7rem;margin-top:14px}.closing small a{text-decoration:underline}.bottom-nav{position:fixed;bottom:12px;left:50%;transform:translateX(-50%);width:calc(100% - 28px);max-width:490px;display:flex;justify-content:space-around;align-items:center;padding:8px 4px;border:1px solid #525543;background:rgba(23,25,22,.95);backdrop-filter:blur(14px);z-index:3;border-radius:5px;box-shadow:0 8px 30px #0005}.bottom-nav a{padding:10px 8px;font-size:.75rem;color:var(--muted)}.bottom-nav a.active{color:var(--gold);background:#303328;border-radius:3px}.music-toggle{position:fixed;bottom:88px;right:max(18px,calc((100vw - 540px)/2 + 18px));width:44px;height:44px;background:var(--gold);color:var(--bg);border-radius:50%;font-size:1.4rem;z-index:3}.music-toggle.playing{animation:spin 9s linear infinite}dialog{color:var(--ink);background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:35px 24px;width:calc(100% - 28px);max-width:500px;max-height:85svh;overflow:auto}dialog::backdrop{background:#000c;backdrop-filter:blur(6px)}.dialog-close{position:absolute;right:12px;top:8px;background:var(--bg);color:var(--ink);font-size:1.8rem;min-width:44px;min-height:44px;z-index:1}.photo-dialog{padding:0;max-width:900px}.photo-dialog img{max-height:82svh;object-fit:contain}.editor-dialog h2{font-size:2.7rem;margin:22px 0 16px}.editor-dialog>p:not(.eyebrow),.editor-dialog form>p{font-size:.875rem;color:var(--muted)}.editor-dialog form{margin-top:26px}.toast{position:fixed;z-index:10;bottom:160px;left:50%;transform:translateX(-50%);background:var(--gold);color:var(--bg);font-size:.875rem;padding:14px 20px;border-radius:3px;max-width:90vw;width:max-content;box-shadow:0 8px 30px #0006}.desktop-cover{display:none}.reveal{opacity:1}.motion-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .8s,transform .8s}.motion-ready .reveal.visible{opacity:1;transform:none}@keyframes spin{to{transform:rotate(360deg)}}
@media(min-width:1000px){.desktop-cover{display:block;position:fixed;inset:0 540px 0 0}.desktop-cover>img{height:100%;filter:brightness(.65)}.desktop-cover:after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,#17191610,#171916aa)}.desktop-copy{position:absolute;z-index:1;left:9%;bottom:12%;right:9%}.desktop-copy h2{font-size:clamp(4rem,6vw,7rem);margin:25px 0}.desktop-copy h2 span{display:block}.desktop-copy h2 i{display:block;font-size:3.5rem}.desktop-copy>p:last-of-type{letter-spacing:.16em;font-size:.875rem}.edition{display:block;margin-top:45px;letter-spacing:.25em;font-size:.7rem;color:var(--gold)}.invitation-shell{margin-right:0;border-left:1px solid var(--line)}.cover{left:auto;width:540px}.bottom-nav{left:auto;right:25px;transform:none}.music-toggle{right:22px}}
@media(max-width:360px){.section{padding:65px 22px}.cover-content{padding-left:18px;padding-right:18px}.cover h1{font-size:3.8rem}.guest{margin-top:20px}.hero-copy{padding-left:24px}.bottom-nav a{padding:10px 5px}.demo-bar{padding:10px 14px}}
@media(max-height:650px){.cover-content{padding-top:20px}.cover h1{font-size:3rem;margin:12px 0}.cover h1 i{font-size:2rem}.guest{margin:18px 0}.cover-foot{display:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.motion-ready .reveal{opacity:1;transform:none}}
/* Aksen raster Bali: ornamen dekoratif, tidak menyentuh area interaksi. */
.cover:before,.hero:before{content:'';position:absolute;bottom:0;left:0;right:0;height:130px;background:url('/templates/aksara/bali-ornament.png') center bottom/100% auto no-repeat;z-index:1;opacity:.7;pointer-events:none}
.cover-content,.hero-copy{z-index:2}.cover-foot{z-index:2;bottom:24px}.cover-content{padding-bottom:110px}.hero-copy{padding-bottom:140px}
.intro,.couple,.gallery,.closing{position:relative;padding-bottom:145px}
.intro:after,.couple:after,.gallery:after,.closing:after{content:'';position:absolute;left:24px;right:24px;bottom:20px;height:100px;background:url('/templates/aksara/bali-ornament.png') center bottom/100% auto no-repeat;opacity:.4;pointer-events:none}
.closing{padding-bottom:210px}.closing:after{bottom:85px}
@media(max-height:650px){.cover-content{padding-bottom:60px}.cover:before{height:75px;opacity:.4}}
/* Pepatran emas baru + gerak halus berbasis transform, tanpa library. */
.cover:before,.hero:before,.intro:after,.couple:after,.gallery:after,.closing:after{background-image:url('/templates/aksara/bali-ornament-v2.png');background-size:contain}
.cover:before{height:105px;bottom:35px;left:20px;right:20px;opacity:.8;animation:ornament-breathe 7s ease-in-out infinite alternate}
.cover-content{padding-bottom:150px}.cover-foot{bottom:12px;font-size:.65rem}
.cover-content:before{content:'';display:block;width:185px;max-width:65%;height:62px;margin:0 auto 18px;background:url('/templates/aksara/bali-ornament-v2.png') center/contain no-repeat;opacity:.85;animation:ornament-arrive 1.3s ease-out both}
.cover-content>.eyebrow{animation:text-arrive .9s .1s both}.cover-content h1{animation:text-arrive 1.1s .25s both}.cover-content>.cover-date{animation:text-arrive 1s .4s both}.cover-content>.guest{animation:text-arrive 1s .55s both}.cover-content>.button{animation:text-arrive 1s .7s both}
.hero:before{bottom:20px;left:22px;right:22px;height:110px;opacity:.65}.hero-copy{padding-bottom:150px}
body:not(.closed) .hero-copy{animation:text-arrive 1.2s .25s both}body:not(.closed) .hero>img{animation:photo-settle 12s ease-out both}
.intro:after,.couple:after,.gallery:after{opacity:.65;height:95px;bottom:22px}.closing:after{opacity:.65}
.reveal.visible:after{animation:ornament-arrive 1.3s ease-out both}.scroll-hint span{animation:scroll-nudge 2.4s ease-in-out infinite}.button{transition:background .25s,filter .25s,box-shadow .25s}.gold:hover{box-shadow:0 0 24px #d9bd8226}
@keyframes text-arrive{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes ornament-arrive{from{opacity:0;transform:translateY(12px) scale(.94)}to{opacity:.85;transform:translateY(0) scale(1)}}
@keyframes ornament-breathe{from{transform:translateY(0);opacity:.7}to{transform:translateY(-4px);opacity:.9}}
@keyframes photo-settle{from{transform:scale(1.07)}to{transform:scale(1)}}
@keyframes scroll-nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-height:750px){.cover-content:before{width:135px;height:45px;margin-bottom:8px}.cover-content{padding-top:20px;padding-bottom:115px}.cover h1{font-size:3.8rem;margin:16px 0}.cover h1 i{font-size:2.3rem}.guest{margin:22px 0 18px}.cover:before{height:80px;bottom:30px}}
@media(max-height:580px){.cover-content:before{display:none}.cover h1{font-size:2.7rem;margin:8px 0}.cover h1 i{font-size:1.8rem}.guest{margin:12px 0}.cover-content{padding-bottom:85px}.cover:before{height:55px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.cover:before,.cover-content:before,.cover-content>*,body:not(.closed) .hero-copy,body:not(.closed) .hero>img,.reveal.visible:after,.scroll-hint span{animation:none!important;transform:none!important}.cover-content>*{opacity:1!important}}
.cover:before,.hero:before,.intro:after,.couple:after,.gallery:after,.closing:after,.cover-content:before{background-image:url('/templates/aksara/bali-pepatran-gold.png');mix-blend-mode:screen}
/* Konten sampul menggunakan ornament atas tanpa mengubah opacity teks. */
.cover-content:before{background:var(--gold);mask-image:url('/templates/aksara/bali-pepatran-gold.png');mask-mode:luminance;mask-size:contain;mask-position:center;mask-repeat:no-repeat;mix-blend-mode:normal}
.demo-bar{position:sticky;top:0}
.cover-content>.balinese-script{font-family:'Noto Sans Balinese',sans-serif;font-size:2.05rem;font-weight:400;line-height:1.9;letter-spacing:normal;color:var(--ink);margin:0 auto 14px;width:100%;overflow-wrap:anywhere}
.cover-content:before{margin-bottom:10px}
@media(max-height:750px){.cover-content>.balinese-script{font-size:1.75rem;margin-bottom:10px}.cover-content:before{height:32px}}
@media(max-height:580px){.cover-content>.balinese-script{font-size:1.5rem;margin-bottom:8px}}
[data-text="prayer"],[data-text="prayer_meaning"],[data-text="bride_family"],[data-text="groom_family"]{white-space:pre-line}
.profile-photo{width:100%;max-width:330px;height:360px;object-fit:cover;object-position:center;margin:24px auto 28px;border-radius:160px 160px 2px 2px;border:1px solid var(--line)}.person>p:not(.eyebrow){font-size:.875rem;color:var(--muted);margin:12px auto;max-width:350px}.person h3{font-size:2.2rem;line-height:1.2}.couple-photo b{font-weight:400}.prayer-meaning{margin-top:30px;font-size:.875rem;color:var(--muted);line-height:1.9}.prayer-meaning strong{color:var(--gold);display:block;margin-bottom:12px}.quote-source{font-size:.75rem;color:var(--muted);margin-top:16px}.reception-summary{margin:35px 0;padding:30px 16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.reception-summary h3{color:var(--gold)}.date-lockup{display:grid;justify-content:center;margin:24px 0;line-height:1.3}.date-lockup span{font-size:1rem;letter-spacing:.12em}.date-lockup strong{font:5.5rem/1 var(--serif);color:var(--gold)}.reception-summary>p{font-size:.875rem;margin-top:18px;color:var(--muted)}.guest small{display:block;max-width:320px;margin:auto;line-height:1.7}.peace-greeting{font-family:var(--serif);font-size:1.7rem;color:var(--gold)!important}.gallery .quote-source{margin-left:10px}.intro>h2{font-size:2.8rem}
.photo-dialog img{max-height:calc(85svh - 86px)}.photo-controls{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px;background:var(--bg);border-top:1px solid var(--line)}.photo-controls .button{min-height:48px;padding:10px 18px;gap:8px}.photo-controls span{font-size:.875rem;color:var(--muted);white-space:nowrap}

/* Transisi ringkas dan tanpa celah kosong antara hero dan pembuka. */
.cover{transition:opacity .32s ease,transform .32s ease}
.motion-ready .reveal{transition:opacity .32s ease,transform .32s ease;transform:translateY(12px)}
.hero{min-height:calc(100svh - 56px)}
.hero + .intro{margin-top:0}
body[data-theme="black"] .hero + .intro{margin-top:-2px;padding-top:42px;background:var(--bg)}
body[data-theme="ivory"] .hero{margin-bottom:0}
body:not(.closed) .hero-copy{animation-duration:.45s;animation-delay:0s}
body:not(.closed) .hero>img{animation-duration:2s}
.motion-ready .hero + .intro{opacity:1;transform:none}
body.motion-ready:is([data-theme="black"],[data-theme="ivory"]) .scroll-reveal{opacity:0;transform:translateY(16px);transition:opacity .72s ease,transform .72s cubic-bezier(.2,.7,.2,1);transition-delay:var(--reveal-delay,0ms)}
body.motion-ready:is([data-theme="black"],[data-theme="ivory"]) .scroll-reveal.is-visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){body.motion-ready:is([data-theme="black"],[data-theme="ivory"]) .scroll-reveal{opacity:1;transform:none;transition:none}}
@media(prefers-reduced-motion:reduce){.cover,.motion-ready .reveal{transition:none}}