:root{--ink:#5e5240;--gold:#a88f58;--deep:#7d6a40;--cx:51%;--cy:53%}
*{box-sizing:border-box;margin:0}html,body{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;background:#efe8d8;overscroll-behavior:none}
body{font-family:'Cormorant Garamond',serif;color:var(--ink);font-size:16px}
[hidden]{display:none!important}
/* adegan */
#scene,#front{position:fixed;inset:0;overflow:hidden;pointer-events:none}#scene{z-index:1}#front{z-index:4}
.ly{position:absolute;will-change:transform,opacity;user-select:none}
#lBg{left:-10%;top:-6%;width:120%;height:112%;object-fit:cover}
#lPohonL{left:-34vw;bottom:10svh;height:60svh}#lPohonR{right:-34vw;bottom:10svh;height:60svh}#lPohonL,#lPohonR{filter:saturate(.55) brightness(1.04)}
#lGazebo{left:50%;bottom:9svh;width:min(72vw,44svh);margin-left:calc(min(72vw,44svh)/-2)}
#lSudutL{left:-8vw;top:-3svh;width:min(42vw,30svh)}#lSudutR{right:-8vw;top:-3svh;width:min(42vw,30svh)}
#lBunga{left:50%;bottom:-5svh;width:min(124vw,95svh);margin-left:calc(min(124vw,95svh)/-2)}
.kupu{position:absolute;left:0;top:0;width:46px;will-change:transform;filter:drop-shadow(0 4px 6px rgba(120,95,40,.3))}
#dust{position:absolute;inset:0}#dust i{position:absolute;bottom:-10px;width:5px;height:5px;border-radius:50%;background:radial-gradient(#fff6d6,rgba(230,200,120,.6) 40%,transparent 70%);animation:rise linear infinite;opacity:0}
@keyframes rise{10%{opacity:.9}90%{opacity:.7}to{transform:translate3d(var(--dx),-105svh,0);opacity:0}}
/* panel */
.panel{will-change:transform,opacity}
#panelHero{position:fixed;left:8vw;right:8vw;top:13svh;padding:18px 0 22px;border-radius:50%;background:radial-gradient(closest-side,rgba(251,247,236,.92),rgba(251,247,236,.75) 60%,rgba(251,247,236,0));z-index:2;text-align:center;pointer-events:none;opacity:0}
.foil{background:linear-gradient(100deg,#6f5420 0%,#a9873e 25%,#f3dc9a 40%,#a9873e 55%,#6f5420 75%,#a9873e 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 5s linear infinite;filter:drop-shadow(0 1px 0 rgba(255,255,255,.8)) drop-shadow(0 2px 3px rgba(110,85,30,.25))}
@keyframes shine{to{background-position:-250% 0}}
#panelHero h1{font-family:'Great Vibes',cursive;font-weight:400;font-size:clamp(40px,13.5vw,58px);line-height:1.05;margin:6px 0}
#panelHero .small{font-family:'Cinzel',serif;letter-spacing:4px;font-size:13px;text-transform:uppercase}
.foil-s{font-family:'Cinzel',serif;letter-spacing:2px;font-size:14px;color:var(--deep);text-shadow:0 1px 0 #fff}
.guest{margin-top:16px;text-shadow:0 1px 2px #fffaf0,0 0 8px #fffaf0}.guest b{font-size:21px}
h2{font-family:'Great Vibes',cursive;font-weight:400;color:var(--deep);font-size:30px;line-height:1.15}
h3{font-family:'Cinzel',serif;font-size:12px;letter-spacing:2px;text-transform:uppercase;font-weight:500;margin-bottom:18px;color:var(--gold)}
.quote{font-style:italic;line-height:1.5;font-size:14px;margin-bottom:14px}.amp{font-family:'Great Vibes';font-size:30px;margin:8px 0}.couple p{font-size:13px}
.cd{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:10px 0}.cd div{padding:7px 0;border-radius:10px;background:rgba(255,252,244,.6);box-shadow:inset 1px 1px 3px #fff,inset -1px -1px 4px rgba(150,130,85,.25)}.cd b{display:block;font-size:22px}.cd span{font-size:11px}
.ev{margin:8px 0;padding:12px 8px;border-radius:80px 80px 10px 10px;background:rgba(255,252,244,.5);box-shadow:inset 0 0 0 1px rgba(168,143,88,.4)}.ev h4{font-family:'Great Vibes';font-size:26px;font-weight:400;color:var(--deep)}.ev p{font-size:13px}
.btn{display:inline-block;margin-top:10px;padding:8px 16px;border-radius:30px;border:1px solid var(--gold);background:var(--deep);color:#fffdf6;font:inherit;font-size:14px;text-decoration:none;cursor:pointer}
.gal{display:grid;grid-template-columns:1fr 1fr;gap:6px}.gal div{aspect-ratio:3/4;border-radius:8px;background:rgba(230,220,195,.6) center/cover;display:flex;align-items:center;justify-content:center;font-size:11px;color:#a09070}
form{display:flex;flex-direction:column;gap:14px}input,select,textarea{font:inherit;font-size:15px;padding:12px 14px;border-radius:10px;border:1px solid rgba(168,143,88,.5);background:rgba(255,253,247,.85);color:var(--ink);width:100%;line-height:1.45}
.w{text-align:left;background:rgba(255,252,244,.55);border-radius:10px;padding:14px 16px;margin:10px 0;font-size:15px;line-height:1.65}.w b{display:block}.w small{opacity:.7}.thx{margin-top:22px;font-style:italic}
#dots{position:fixed;right:max(4px,calc((100vw - min(86vw,460px))/2 - 16px));top:50%;transform:translateY(-50%);z-index:6;display:flex;flex-direction:column;gap:9px;opacity:0;transition:opacity .8s}
#dots button{width:8px;height:8px;border-radius:50%;border:1px solid var(--gold);background:transparent;padding:0}#dots button.on{background:var(--gold);transform:scale(1.3)}
#swipe{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));padding:6px 16px;border-radius:20px;background:rgba(251,247,236,.88);box-shadow:0 2px 10px rgba(90,70,30,.15);text-align:center;z-index:6;font-style:italic;font-size:15px;letter-spacing:.5px;color:var(--deep);opacity:0;transition:opacity .8s;pointer-events:none;white-space:nowrap}#swipe::before{content:"";display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:var(--gold);vertical-align:1px;animation:tap 1.8s ease-in-out infinite}@keyframes tap{0%,100%{box-shadow:0 0 0 0 rgba(168,143,88,.55)}60%{box-shadow:0 0 0 9px rgba(168,143,88,0)}}
body.explore #dots{opacity:1}body.explore.hero #swipe{opacity:1;transition-delay:2.6s;animation:breathe 2.6s ease-in-out 3.4s infinite}@keyframes breathe{50%{opacity:.7}}
/* lembar panjang */
#sheet{position:fixed;inset:0;z-index:3;overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;transform:translate3d(0,100%,0);will-change:transform;-webkit-overflow-scrolling:touch;scrollbar-width:none;pointer-events:none;transition:opacity .9s,transform 1s cubic-bezier(.4,0,.2,1)}#sheet::-webkit-scrollbar{display:none}
#sheet{-webkit-mask:linear-gradient(transparent 0,#000 15svh,#000 calc(100% - 13svh),transparent 100%);mask:linear-gradient(transparent 0,#000 15svh,#000 calc(100% - 13svh),transparent 100%)}
.row{display:flex;align-items:center;gap:10px;font-size:14px;text-align:left}.row span{flex:1;padding-left:4px}.row input{width:84px;text-align:center}
.btn{min-height:40px}
body.explore #sheet{pointer-events:auto}body.sending #sheet{opacity:0}body.hero #sheet{pointer-events:none}
#paper{position:relative;width:min(92vw,480px);min-height:100%;margin:0 auto;padding:6svh 19.5% calc(min(124vw,95svh) * .3 + 10px);text-align:center;background:url(aset/paper.webp) center top/100% auto repeat-y;box-shadow:0 -6px 28px rgba(90,70,30,.22),0 0 0 1px rgba(255,255,255,.4) inset;border-radius:4px 4px 0 0}
.pg{display:flex;flex-direction:column;justify-content:center;padding:40px 0 48px}
.pg+.pg{border-top:1px solid rgba(168,143,88,.0)}
.pg+.pg::before{content:"❦";display:block;color:var(--gold);opacity:.55;font-size:20px;margin:-24px 0 18px}
#toHero{display:block;margin:0 auto;padding:10px 18px 0;border:none;background:none;color:var(--gold);font:inherit;font-size:20px;line-height:1;cursor:pointer;position:relative;z-index:2}#toHero small{display:block;font-family:Cinzel,serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;margin-top:2px}
/* tulisan menulis sendiri */
.wrb{position:relative;display:inline-block;max-width:100%}
.wr{display:inline-block;-webkit-mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0/250% 100% no-repeat;mask:linear-gradient(90deg,#000 40%,transparent 60%) 100% 0/250% 100% no-repeat}
.pen{position:absolute;top:55%;left:0;width:7px;height:7px;margin:-3px;border-radius:50%;background:radial-gradient(#fffbe6,#e9c96f 50%,transparent 72%);box-shadow:0 0 10px 4px rgba(240,208,120,.65);opacity:0;pointer-events:none}
.seen .wr{animation:write var(--d,1.8s) cubic-bezier(.45,.1,.45,1) var(--dl,0s) forwards}
.seen .pen{animation:pen var(--d,1.8s) cubic-bezier(.45,.1,.45,1) var(--dl,0s) forwards}
@keyframes write{to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes pen{0%{left:0;opacity:0}8%{opacity:1}55%{top:40%}85%{opacity:1}100%{left:100%;top:55%;opacity:0}}
.wd{display:inline-block;opacity:0;filter:blur(3px);transform:translateY(4px);transition:opacity .7s,filter .7s,transform .7s;transition-delay:var(--dl,0s)}
.seen .wd{opacity:1;filter:none;transform:none}
.rv{opacity:0;transform:translateY(10px);transition:opacity 1s,transform 1s;transition-delay:var(--dl,0s)}.seen .rv{opacity:1;transform:none}
/* amplop */
#stage{position:fixed;left:50%;top:50%;width:max(100vw,56.25svh);height:max(100svh,177.78vw);transform:translate(-50%,-50%);perspective:1800px;z-index:10;pointer-events:none}
.flap{position:absolute;inset:0;background:url(aset/amplop.webp) center/100% 100%;transition:transform 1.2s cubic-bezier(.55,.05,.3,1),opacity .6s;backface-visibility:hidden;filter:drop-shadow(0 1px 2px rgba(110,90,50,.25))}
.f-top{clip-path:polygon(0 0,100% 0,var(--cx) var(--cy));transform-origin:50% 0;z-index:4}.f-bottom{clip-path:polygon(0 100%,100% 100%,var(--cx) var(--cy));transform-origin:50% 100%;z-index:1}
.f-left{clip-path:polygon(0 0,var(--cx) var(--cy),0 100%);transform-origin:0 50%;z-index:2}.f-right{clip-path:polygon(100% 0,var(--cx) var(--cy),100% 100%);transform-origin:100% 50%;z-index:3}
.open .flap{opacity:0}
.open .f-top{transform:rotateX(-150deg);transition-delay:.35s,.9s}.open .f-left{transform:rotateY(150deg);transition-delay:.6s,1.1s}.open .f-right{transform:rotateY(-150deg);transition-delay:.6s,1.1s}.open .f-bottom{transform:rotateX(150deg);transition-delay:.8s,1.3s}
.closing .f-bottom{transition-delay:.7s}.closing .f-left,.closing .f-right{transition-delay:.95s}.closing .f-top{transition-delay:1.2s}
#seal{position:fixed;left:51%;top:53%;width:118px;height:118px;margin:-59px 0 0 -59px;border:none;background:none;padding:0;cursor:pointer;z-index:20;filter:drop-shadow(0 6px 8px rgba(90,70,30,.35));animation:pulse 2.6s ease-in-out infinite}
.half{position:absolute;inset:0;background:url(aset/segel.webp) center/contain no-repeat;transition:transform .8s cubic-bezier(.4,0,.2,1),opacity .8s}
.h1{clip-path:polygon(0 0,54% 0,47% 28%,56% 50%,45% 73%,51% 100%,0 100%)}.h2{clip-path:polygon(54% 0,100% 0,100% 100%,51% 100%,45% 73%,56% 50%,47% 28%)}
@keyframes pulse{50%{transform:scale(1.035)}}@keyframes press{0%{transform:scale(1.5) translateY(-30px);opacity:0}60%{transform:scale(.94);opacity:1}100%{transform:scale(1)}}
body.isopen #seal{animation:none;pointer-events:none}body.isopen .h1{transform:translate(-36px,-50px) rotate(-24deg);opacity:0}body.isopen .h2{transform:translate(36px,-44px) rotate(20deg);opacity:0}
#seal.press{animation:press .7s ease-out}
.hint,.guest-top,#thanks{position:fixed;left:0;right:0;text-align:center;z-index:20;transition:opacity .6s}
.hint{top:calc(53% + 72px);font-style:italic;font-size:15px;letter-spacing:1px;text-shadow:0 1px 0 #fff}
.guest-top{bottom:8%}.guest-top small{display:block;letter-spacing:3px;font-size:12px;text-transform:uppercase}.guest-top b{font-size:22px;background:rgba(252,249,240,.85);padding:2px 14px;border-radius:4px}
body.isopen .hint,body.isopen .guest-top,body.sending .hint{opacity:0;pointer-events:none}
#kirim{position:fixed;left:50%;top:calc(53% + 78px);transform:translateX(-50%);z-index:21;font-size:18px;padding:11px 34px}
#thanks{top:calc(53% + 74px);display:flex;flex-direction:column;align-items:center}#thanks p{font-family:'Great Vibes';font-size:26px;color:var(--deep);background:rgba(250,246,236,.85);border-radius:30px;padding:2px 18px;margin:0 16px}
#music{position:fixed;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));z-index:30;width:44px;height:44px;border-radius:50%;border:1px solid var(--gold);background:radial-gradient(circle at 35% 30%,#fffdf6,#f1e6cf);box-shadow:0 3px 10px rgba(90,70,30,.25),inset 0 0 0 3px rgba(255,255,255,.6);font-size:19px;color:var(--deep);cursor:pointer;opacity:.55;transition:opacity .4s}
#music.on{opacity:1}#music.on .n{display:inline-block;animation:spin 6s linear infinite}#music:not(.on)::after{content:"";position:absolute;left:10px;right:10px;top:50%;height:1.5px;background:var(--gold);transform:rotate(-45deg)}
@keyframes spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){#music.on .n{animation:none}}
.sway{position:absolute;inset:0}
.kupu{pointer-events:none}
@media (prefers-reduced-motion:reduce){.wr{-webkit-mask:none;mask:none}.pen{display:none}.wd,.rv{opacity:1!important;filter:none!important;transform:none!important}#dust,.kupu{display:none}.sway{animation:none!important}.foil,#swipe,#seal{animation:none}.pg>*{animation:none}}

/* hilangkan sorotan biru saat ketuk/klik */
*{-webkit-tap-highlight-color:transparent;}
*:focus{outline:none;}
img,.kupu,[class*="kupu"],[class*="segel"],[class*="layer"]{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-webkit-touch-callout:none;}
::selection{background:rgba(201,162,90,.25);}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible{outline:1px solid rgba(201,162,90,.6);}

/* bunga bingkai: dasar diam + kepala bunga terpisah yang mengangguk (rotate+translate saja) */
.fl img.base{display:block;width:100%;height:auto}
#paperBg{display:none}
#petals{position:fixed;inset:0;width:100%;height:100%;z-index:5;pointer-events:none}
@media (prefers-reduced-motion:reduce){.sway{animation:none!important}#petals{display:none}}
/* sway seluruh gambar: sangat halus, rotate+translate saja */
/* latar tetap ada di tampilan kertas, sedikit lembut */
#scene{inset:-10svh 0}#lBg{transition:filter 1.4s ease}body:not(.hero) #lBg{filter:blur(2.5px) brightness(1.03) saturate(.8)}
html{background:#e6dfcb}
/* gugus bunga tambahan di luar kertas (mengisi tepi) */
.edge{position:absolute;opacity:0;transition:opacity 1.4s ease;user-select:none}body:not(.hero) .edge{opacity:1}


/* sway seluruh gambar, sangat halus (rotate saja) */
.swL{transform-origin:0 0;animation:swA 2s ease-in-out 0s infinite alternate}
.swR{transform-origin:100% 0;animation:swAR 2s ease-in-out -.7s infinite alternate}
.swB{transform-origin:50% 100%;animation:swBt 2.3s ease-in-out -1.1s infinite alternate}
.swEL{transform-origin:0 50%;animation:swA 2.2s ease-in-out -1.5s infinite alternate}
.swER{transform-origin:100% 50%;animation:swAR 2.1s ease-in-out -.3s infinite alternate}
@keyframes swA{from{transform:rotate(-1deg)}to{transform:rotate(1.5deg)}}
@keyframes swAR{from{transform:rotate(1deg)}to{transform:rotate(-1.5deg)}}
@keyframes swBt{from{transform:rotate(-.6deg)}to{transform:rotate(.6deg)}}
.eL{left:calc(-1 * min(14vw,10svh));top:40svh;width:min(26vw,18svh);transform:rotate(-75deg)}
.eR{right:calc(-1 * min(14vw,10svh));top:58svh;width:min(24vw,17svh);transform:scale(-1,1) rotate(-100deg)}

/* ===== v2: tanpa guest banner ===== */
.guest,.guest-top{display:none!important}

/* ===== v2: flip kertas Jawa ↔ Indonesia ===== */
.pg-invite{padding-top:24px;padding-bottom:28px}
.flip-wrap{perspective:1600px;margin:0 auto;width:100%}
.flip-card{display:grid;transform-style:preserve-3d;transition:transform 1.5s cubic-bezier(.45,.05,.55,1)}
.flip-card.flipped{transform:rotateY(-180deg)}
.flip-face{grid-area:1/1;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:transparent;width:100%}
.flip-face.front{position:relative;z-index:2}
.flip-face.back{position:relative;transform:rotateY(180deg);z-index:1}
.flip-hint{margin-top:28px;font-style:italic;font-size:13px;color:var(--gold);letter-spacing:.3px;opacity:.85}
.j-title{font-family:'Cinzel',serif;letter-spacing:3px;text-transform:uppercase;font-size:13px;color:var(--gold);margin-bottom:16px}
.j-bism{font-family:'Cinzel',serif;font-size:13px;letter-spacing:1px;margin:10px 0 16px}
.j-salam{font-style:italic;margin:16px 0 22px;font-size:15px;line-height:1.7}
.j-head{font-family:'Cinzel',serif;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--deep);margin:20px 0 14px}
.j-body{font-size:15px;line-height:1.9;margin:16px 0}
.j-name{font-family:'Great Vibes',cursive;font-size:26px;color:var(--deep);line-height:1.35;margin:10px 0}
.j-name.small-name{font-size:18px;font-family:'Cormorant Garamond',serif;font-weight:600}
.indo-name{font-family:'Great Vibes',cursive;font-size:32px;color:var(--deep);line-height:1.3;margin:10px 0}
.j-meta{text-align:left;margin:20px 0;padding:16px 16px;border-radius:14px;background:rgba(255,252,244,.55);box-shadow:inset 0 0 0 1px rgba(168,143,88,.35)}
.j-meta p{display:grid;grid-template-columns:56px 1fr;gap:10px;margin:10px 0;font-size:14px;line-height:1.7;align-items:start}
.j-meta span{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1px;color:var(--gold);padding-top:2px}
.indo-meta p{display:block;margin:12px 0;font-size:15px;line-height:1.75}
.j-brayat{display:grid;grid-template-columns:1fr 1fr;gap:18px;text-align:left;margin:22px 0 14px}
.j-brayat h4,.j-woro h4,.catatan h4{font-family:'Cinzel',serif;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:10px;font-weight:500}
.j-brayat ol{list-style:decimal;padding-left:18px;font-size:14px;line-height:1.85}
.j-woro,.catatan{text-align:left;margin:20px 0;padding:16px 16px;border-radius:14px;background:rgba(255,252,244,.5);box-shadow:inset 0 0 0 1px rgba(168,143,88,.3);font-size:14px;line-height:1.85}
.catatan p{margin:12px 0}

/* ===== v2: video recorder ===== */
.vid{margin:4px 0 2px;padding:14px;border-radius:12px;background:rgba(255,252,244,.55);box-shadow:inset 0 0 0 1px rgba(168,143,88,.35);text-align:center}
.vid-label{font-size:13px;margin-bottom:8px;color:var(--deep)}
.vid-preview,.vid-playback{display:none;width:100%;max-height:220px;border-radius:10px;background:#1a1712;margin:0 auto 8px;object-fit:cover}
.vid-preview.live,.vid-playback:not([hidden]){display:block}
.vid-actions{display:flex;flex-wrap:wrap;gap:6px;justify-content:center}
.btn.ghost{background:transparent;color:var(--deep);border:1px solid var(--gold)}
.btn.ghost:disabled{opacity:.45;cursor:not-allowed}
.vid-status{font-size:12px;min-height:1.2em;margin-top:6px;color:var(--deep);opacity:.85}
.vid-pick{cursor:pointer;display:inline-flex;align-items:center}
.wish-form{margin-bottom:14px}
#kirim.busy,#wishForm .btn[type=submit].busy{opacity:.6;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .flip-card{transition:none}
}

/* Personal address and entry ticket: original invitation typography unchanged. */
.guest-address{margin:4px 0 30px;line-height:1.6;color:var(--deep)}
.guest-address small,.guest-address span{display:block;font-size:14px}
.guest-address strong{display:block;margin-top:8px;font-size:21px;line-height:1.5;overflow-wrap:anywhere}
.guest-envelope{position:fixed;left:12%;right:12%;bottom:9%;z-index:20;text-align:center;color:var(--deep);padding:12px 8px;background:rgba(252,249,240,.78);border-radius:8px;transition:opacity .6s;pointer-events:none}
.guest-envelope small{display:block;font-size:13px;line-height:1.6}.guest-envelope strong{display:block;margin-top:8px;font-size:23px;line-height:1.35;overflow-wrap:anywhere}
body.isopen .guest-envelope,body.sending .guest-envelope{opacity:0}
.guest-ticket{margin:0 0 40px;padding:20px 4px;border-top:1px solid rgba(168,143,88,.35);border-bottom:1px solid rgba(168,143,88,.35);line-height:1.65}
.guest-ticket h3{margin-bottom:12px}.guest-ticket .ticket-name{font-size:21px;font-weight:600;margin-bottom:16px;overflow-wrap:anywhere}
#guestQR{width:192px;max-width:100%;padding:8px;background:#fff;margin:0 auto 14px}#guestQR img,#guestQR canvas{width:100%;height:auto;display:block}
.guest-ticket small{font-size:13px;display:block;margin-top:8px}#guestError{margin-bottom:20px;font-size:15px;color:#8a3c2c}