@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:wght@500;600&display=swap');
:root{--navy:#294a63;--blue:#4f7ba5;--blue-deep:#28485f;--blue-pale:#eaf2f7;--paper:#fbfaf7;--ink:#2c465c;--muted:#7c91a1;--line:#dce7ee;--shadow:0 12px 36px rgba(34,67,93,.14);font-family:'DM Sans',sans-serif;color:var(--ink);background:#edf3f6;font-synthesis:none;text-rendering:optimizeLegibility}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:74px}body{margin:0;background:linear-gradient(180deg,#f4f7f8,#edf3f6 60%,#f6f5f1);overflow-x:hidden}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.topbar{position:sticky;top:0;z-index:30;width:100%;min-height:76px;padding:12px max(18px,calc((100vw - 540px)/2 + 16px));display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(255,254,250,.94);border-bottom:1px solid rgba(45,75,99,.08);backdrop-filter:blur(14px)}.brand{display:flex;flex-direction:column;text-decoration:none;line-height:1}.brand-script{font-family:'Playfair Display',serif;font-size:clamp(21px,5.3vw,29px);letter-spacing:-.6px;color:#294b65}.brand-subtitle{font-size:9px;letter-spacing:2.5px;font-weight:700;color:#8ba0ae;margin-top:7px}.music-toggle{border:1px solid #d5e0e7;background:#fff;border-radius:99px;padding:10px 15px;color:#294b65;font-size:12px;font-weight:700;box-shadow:0 4px 14px rgba(28,65,93,.06);white-space:nowrap}.music-toggle:disabled{opacity:.5}.music-icon{font-size:16px;margin-right:6px}
.invitation-shell{width:min(100%,540px);margin:0 auto;background:#fff;box-shadow:0 0 50px rgba(41,74,99,.07)}.design-page{position:relative;width:100%;aspect-ratio:810/1440;overflow:hidden;background:#f7f8f8;isolation:isolate}.page-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;user-select:none;-webkit-user-drag:none}.opening-page{overflow:hidden}.opening-page .page-art{animation:artworkRise 1.35s cubic-bezier(.2,.7,.2,1) both}.opening-controls{position:absolute;z-index:3;left:0;right:0;bottom:5.5%;display:flex;align-items:center;flex-direction:column;gap:9px;padding:0 20px}.open-invitation{border:0;border-radius:999px;background:linear-gradient(135deg,#5b8bb7,#2e5d83);color:#fff;padding:13px 27px;font-size:14px;font-weight:700;letter-spacing:.2px;box-shadow:0 8px 22px rgba(24,68,105,.24);animation:softPulse 2.8s ease-in-out infinite}.open-invitation span{font-size:18px;margin-left:6px}.swipe-hint{display:flex;align-items:center;gap:7px;border:0;background:rgba(255,255,255,.75);border-radius:99px;padding:6px 12px;color:#476982;font-size:10px;letter-spacing:.3px}.swipe-arrow{font-size:18px;line-height:12px;animation:swipeNudge 1.4s ease-in-out infinite}.recipient-overlay{position:absolute;z-index:4;left:19%;width:62%;top:91.3%;padding:5px 4px;text-align:center;background:rgba(251,250,247,.93);border-radius:5px;color:#5d86aa;font-size:clamp(9px,2.4vw,12px);letter-spacing:.15px}.recipient-overlay strong{color:#2c5f91;font-weight:700}.page-hotspot{position:absolute;z-index:5;left:28%;width:44%;top:81.3%;height:4.5%;border:0;background:transparent;border-radius:99px}.page-hotspot:focus-visible,.map-hotspot:focus-visible,.copy-account-hotspot:focus-visible,.qris-hotspot:focus-visible{outline:3px solid #f6c76b;outline-offset:2px}
.event-page{overflow:hidden}.countdown-overlay{position:absolute;z-index:3;top:26.6%;left:19%;width:62%;color:#fff;text-align:center}.countdown-caption{display:block;font-size:clamp(7px,1.8vw,10px);font-weight:700;letter-spacing:2px;margin-bottom:10px;opacity:.92}.countdown-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.countdown-grid>div{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.2);border-radius:9px;padding:7px 2px 6px;backdrop-filter:blur(2px)}.countdown-grid strong{display:block;font-size:clamp(15px,4.2vw,22px);line-height:1.1;font-weight:700;font-variant-numeric:tabular-nums}.countdown-grid small{display:block;font-size:clamp(7px,1.7vw,9px);margin-top:4px;opacity:.85}.map-hotspot{position:absolute;z-index:5;left:39%;width:22%;height:2.4%;border-radius:99px;background:transparent}.map-akad{top:65.8%}.map-resepsi{top:89.8%}
.form-page{overflow:hidden}.guest-address-overlay{position:absolute;z-index:3;left:17%;width:66%;top:19.5%;height:2.3%;display:flex;align-items:center;justify-content:center;white-space:nowrap;background:rgba(255,255,255,.97);font-size:clamp(7px,1.8vw,10px);font-style:italic;color:#5e82a1}.guest-address-overlay strong{margin-left:4px;color:#294e6b}.interactive-card{position:absolute;z-index:4;left:7.7%;width:84.6%;border:1px solid rgba(198,216,228,.8);border-radius:16px;background:rgba(255,255,255,.98);box-shadow:0 7px 22px rgba(44,83,111,.08);padding:3.1% 4.3%;color:#334f67}.rsvp-card{top:28.6%;min-height:24.6%}.wishes-card{top:75.7%;min-height:17.3%;padding-top:3%;}.form-heading{font-size:clamp(7px,1.8vw,9px);font-weight:800;letter-spacing:1px;color:#476884;margin-bottom:9px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 10px}.form-grid label,.wishes-card label{display:flex;flex-direction:column;gap:4px;font-size:clamp(7px,1.7vw,9px);font-weight:700;letter-spacing:.25px;color:#60798d}.form-grid input,.form-grid select,.form-grid textarea,.wishes-card textarea{width:100%;border:1px solid #d7e3eb;background:#fff;border-radius:7px;padding:8px 9px;color:#3a5369;font-size:clamp(9px,2.1vw,11px);font-weight:500;letter-spacing:0;outline:none;min-width:0}.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus,.wishes-card textarea:focus{border-color:#739bbd;box-shadow:0 0 0 2px rgba(98,145,181,.13)}.form-grid select{height:34px}.form-grid input{height:34px}.form-grid small{font-size:7px;color:#9aaab6;font-weight:400;letter-spacing:0}.form-grid .full-width{grid-column:1/-1}.form-grid textarea{resize:vertical;min-height:44px;max-height:72px}.wishes-card textarea{resize:vertical;min-height:54px;max-height:90px;font-size:10px}.primary-button{border:0;border-radius:99px;padding:9px 16px;background:#294c66;color:#fff;font-size:clamp(8px,2vw,10px);font-weight:700;box-shadow:0 4px 10px rgba(33,68,94,.13);margin-top:8px}.primary-button span{margin-left:6px}.form-feedback{min-height:12px;margin:4px 0 0;font-size:9px;color:#477e61}.form-feedback.error{color:#b94c4c}.form-feedback:empty{display:none}
.wishes-feed-section{padding:38px 24px 54px;background:linear-gradient(180deg,#f8fbfd,#eff5f8)}.wishes-feed-inner{max-width:440px;margin:0 auto;text-align:center}.eyebrow{font-size:9px;font-weight:800;letter-spacing:2px;color:#7d9bb1;margin:0 0 8px}.wishes-feed-inner h2{font-family:'Playfair Display',serif;font-weight:500;font-size:26px;margin:0;color:#2d506d}.feed-intro{font-size:12px;color:#8194a3;margin:8px 0 20px}.wishes-list{display:grid;gap:10px;text-align:left}.wish-item{background:#fff;border:1px solid #e0eaf0;border-radius:13px;padding:13px 15px;box-shadow:0 5px 15px rgba(38,73,98,.05)}.wish-name{font-weight:700;font-size:12px;color:#365c79}.wish-time{float:right;font-size:9px;color:#a2b0ba}.wish-message{font-size:12px;color:#61788a;line-height:1.55;margin:6px 0 0;white-space:pre-wrap;overflow-wrap:anywhere}.empty-wishes{padding:22px;border:1px dashed #c9d9e4;border-radius:12px;color:#91a3af;text-align:center;font-size:12px}
.gift-page{overflow:hidden}.copy-account-hotspot{position:absolute;z-index:5;left:8%;top:49.4%;width:34%;height:4.4%;border:0;background:transparent;border-radius:99px}.qris-hotspot{position:absolute;z-index:5;left:58%;top:26%;width:35%;height:31%;border:0;background:transparent;border-radius:14px}.copy-feedback{position:absolute;z-index:6;left:10%;top:55%;color:#315d7d;background:rgba(255,255,255,.94);border-radius:99px;padding:4px 9px;font-size:9px;opacity:0;transition:opacity .2s}.copy-feedback.show{opacity:1}
.site-footer{background:#4d79a2;color:#fff;text-align:center;padding:25px 20px 38px;display:flex;flex-direction:column;gap:8px}.site-footer span{font-size:9px;letter-spacing:3px;opacity:.8}.site-footer strong{font-family:'Playfair Display',serif;font-size:27px;font-weight:500}.site-footer a{font-size:10px;opacity:.6;margin-top:10px;text-decoration:none}.bottom-nav{position:fixed;z-index:25;left:50%;bottom:max(10px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 22px),510px);padding:7px;background:rgba(255,254,251,.95);border:1px solid rgba(222,231,236,.95);border-radius:23px;box-shadow:0 12px 35px rgba(28,57,79,.18);display:grid;grid-template-columns:repeat(5,1fr);backdrop-filter:blur(14px)}.bottom-nav[hidden]{display:none}.nav-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:8px 3px;text-decoration:none;color:#8294a1;border-radius:15px;min-height:54px}.nav-item span{font-size:22px;line-height:1}.nav-item small{font-size:9px;font-weight:600}.nav-item.active{background:#e8f1f7;color:#315a78;box-shadow:inset 0 0 0 1px #d9e7f0}
.modal{position:fixed;inset:0;z-index:60;background:rgba(13,31,45,.82);display:none;align-items:center;justify-content:center;padding:22px}.modal.open{display:flex}.modal-close{position:absolute;top:18px;right:20px;width:42px;height:42px;border:0;border-radius:50%;background:#fff;color:#294b65;font-size:28px}.modal-content{max-width:min(92vw,430px);max-height:86vh;background:#fff;border-radius:18px;padding:18px;text-align:center;overflow:auto}.modal-content p{font-size:11px;letter-spacing:2px;font-weight:800;color:#5b7f9b}.modal-content img{display:block;width:100%;max-height:72vh;object-fit:contain}.is-locked .bottom-nav{display:none!important}
.reveal{opacity:0;transform:translateY(22px) scale(.99);transition:opacity .75s ease,transform .75s cubic-bezier(.2,.7,.2,1)}.reveal.is-visible{opacity:1;transform:translateY(0) scale(1)}.reveal.is-visible .page-art{animation:artworkRise 1.25s cubic-bezier(.2,.7,.2,1) both}.opening-page{opacity:1;transform:none}.is-locked .topbar{position:sticky}.is-locked .music-toggle{opacity:.5}
@keyframes artworkRise{from{transform:translateY(18px);opacity:.88}to{transform:translateY(0);opacity:1}}@keyframes softPulse{0%,100%{transform:translateY(0);box-shadow:0 8px 22px rgba(24,68,105,.2)}50%{transform:translateY(-3px);box-shadow:0 12px 28px rgba(24,68,105,.28)}}@keyframes swipeNudge{0%,100%{transform:translateY(2px)}50%{transform:translateY(-5px)}}
@media(min-width:700px){body{padding-bottom:20px}.topbar{margin:0 auto;max-width:100%;padding-left:max(24px,calc((100vw - 540px)/2 + 14px));padding-right:max(24px,calc((100vw - 540px)/2 + 14px))}.invitation-shell{border-radius:0 0 10px 10px;overflow:visible}.opening-controls{bottom:4.5%}.open-invitation{font-size:15px}.bottom-nav{bottom:20px}.wishes-feed-section{padding-top:50px;padding-bottom:62px}}
@media(max-width:380px){.topbar{min-height:68px;padding:9px 12px}.music-toggle{padding:8px 11px}.form-grid{gap:6px}.form-grid input,.form-grid select{height:31px;padding:6px}.interactive-card{border-radius:12px}.rsvp-card{padding:2.6% 3.5%}.primary-button{margin-top:5px;padding:8px 13px}.form-grid textarea{min-height:37px}.wishes-card textarea{min-height:45px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.reveal{opacity:1;transform:none}}