*{box-sizing:border-box;margin:0}
.t-sekar{--bg:#f5ece4;--bg2:#ecdcd0;--ink:#4b3a3a;--ac:#b2615c;--disp:'Pinyon Script',cursive;--ser:'Cormorant Garamond',serif}
.t-malam{--bg:#0d1430;--bg2:#162049;--ink:#efe5cc;--ac:#d6b36a;--disp:'Italiana',serif;--ser:'Cormorant Garamond',serif}
body{background:var(--bg);color:var(--ink);font:300 17px/1.7 'Jost',sans-serif;overflow-x:hidden}
body.lock{overflow:hidden}
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
section{position:relative;z-index:2;max-width:560px;margin:0 auto;padding:84px 28px;text-align:center}
h2{font-family:var(--ser);font-style:italic;font-weight:400;font-size:2rem;color:var(--ac);margin-bottom:18px}
.nm{font-family:var(--disp);font-size:clamp(3.2rem,15vw,5rem);line-height:1.05;color:var(--ac)}
.t-malam .nm{letter-spacing:.06em;font-size:clamp(2.4rem,11vw,3.8rem)}
.ld{display:inline-block}
.ld span{display:inline-block;opacity:0;transform:translateY(40px) rotate(8deg);animation:ld .9s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i)*60ms + var(--d,0s))}
@keyframes ld{to{opacity:1;transform:none}}
#cover{position:fixed;inset:0;z-index:50;display:grid;place-items:center;text-align:center;background:var(--bg);transition:transform 1.3s cubic-bezier(.7,0,.2,1)}
#cover.open{transform:translateY(-100%)}
.arch{width:min(60vw,260px);aspect-ratio:3/4;border-radius:999px 999px 24px 24px;background:var(--bg2) center/cover;margin:0 auto 22px;box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--ac);animation:fl 6s ease-in-out infinite}
.t-malam .arch{border-radius:4px;box-shadow:0 0 0 6px var(--bg),0 0 0 7px var(--ac),0 0 0 14px var(--bg),0 0 0 15px var(--ac)}
@keyframes fl{50%{transform:translateY(-10px)}}
.btn{background:var(--ac);color:var(--bg);border:0;padding:13px 30px;border-radius:99px;font:400 15px 'Jost';letter-spacing:.08em;cursor:pointer;transition:transform .2s,box-shadow .3s}
.btn:hover{transform:scale(1.05);box-shadow:0 8px 24px #0003}.btn:active{transform:scale(.96)}
.btn.o{background:none;border:1px solid var(--ac);color:var(--ac)}
.rv{opacity:0;transform:translateY(34px);transition:1s cubic-bezier(.2,.8,.2,1)}.rv.in{opacity:1;transform:none}
.q{font:italic 1.3rem/1.8 var(--ser)}
.card{background:var(--bg2);border-radius:22px;padding:26px 22px;margin:16px 0}
.t-malam .card{border:1px solid #d6b36a55;border-radius:4px}
.cd{display:flex;gap:10px;justify-content:center;margin:22px 0}.cd div{flex:1;background:var(--bg2);padding:14px 4px;border-radius:14px}
.cd b{display:block;font:400 2rem var(--ser);color:var(--ac)}.cd small{font-size:12px;opacity:.7}
.bank b{display:block;font:600 1.5rem var(--ser);letter-spacing:.08em;margin:4px 0}
input,textarea{width:100%;padding:12px 14px;margin:6px 0;border:1px solid #8883;border-radius:12px;background:var(--bg);color:var(--ink);font:inherit}
.seg{display:flex;gap:8px}.seg label{flex:1;padding:10px 4px;border:1px solid var(--ac);border-radius:12px;cursor:pointer;font-size:14px;transition:.2s}
.seg input{display:none}.seg label:has(input:checked){background:var(--ac);color:var(--bg)}
.st{display:flex;gap:8px;margin:14px 0}.st div{flex:1}.st b{display:block;font:400 1.8rem var(--ser);color:var(--ac)}
#wl{max-height:440px;overflow:auto;text-align:left;margin-top:16px}
.w{padding:14px 16px;margin:10px 0;background:var(--bg2);border-radius:16px;animation:pop .6s cubic-bezier(.2,1.4,.4,1)}
.w small{opacity:.6}
@keyframes pop{from{opacity:0;transform:scale(.8) translateY(-14px)}}
#mu{position:fixed;right:14px;bottom:14px;z-index:40;width:44px;height:44px;border-radius:50%;border:0;background:var(--ac);color:var(--bg);font-size:18px;cursor:pointer}
#mu.on{animation:sp 4s linear infinite}@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.rv,.ld span{opacity:1;transform:none}}
/* ===== Tema RUANG: masuk lewat pintu ke ruang resepsi ===== */
.t-ruang{--bg:#3d0f1c;--bg2:#f4e8d2;--ink:#f3e6cf;--ac:#e2bd72;--disp:'Cormorant Garamond',serif;--ser:'Cormorant Garamond',serif;background:#2b0d16}
.t-ruang .nm{font-style:italic;font-weight:600;letter-spacing:.03em;font-size:clamp(2.3rem,10.5vw,3.5rem);text-shadow:0 2px 14px #0007}
.t-ruang #cover{background:#0000;perspective:1400px;transition:opacity .9s 1.7s}
.t-ruang #cover.open{transform:none;opacity:0;pointer-events:none}
.t-ruang .arch{display:none}
.ci{position:relative;z-index:3;transition:opacity .6s,transform 1.4s}
.t-ruang #cover.open .ci{opacity:0;transform:scale(1.4)}
.t-ruang #cover .nm,.t-ruang #cover p{color:#f3dca0;text-shadow:0 2px 12px #000}
.door{position:absolute;top:0;bottom:0;width:50.2%;z-index:1;transition:transform 1.9s cubic-bezier(.65,0,.25,1);background:linear-gradient(90deg,#2e1a10,#5d3b24 50%,#2e1a10);box-shadow:inset 0 0 0 10px #24130b,inset 0 0 60px #000b}
.door::before{content:'';position:absolute;inset:9% 13%;border:3px solid #9a7a4c;box-shadow:inset 0 0 30px #0008,0 0 0 8px #0003}
.door::after{content:'';position:absolute;top:50%;width:14px;height:84px;border-radius:8px;background:linear-gradient(90deg,#8a6a2e,#f4dd9a,#8a6a2e);box-shadow:0 0 14px #ffd98a88}
.door.l{left:0;transform-origin:left center}.door.l::after{right:18px}
.door.r{right:0;transform-origin:right center}.door.r::after{left:18px}
.open .door.l{transform:rotateY(-112deg)}.open .door.r{transform:rotateY(112deg)}
#room{position:fixed;inset:0;z-index:0;overflow:hidden;background:#2b0d16}
body.entered #room{animation:walk 2.8s cubic-bezier(.2,.7,.2,1)}
@keyframes walk{from{transform:scale(.7);filter:brightness(.4) blur(3px)}}
.wall{position:absolute;inset:-6% -6% 34% -6%;transform-origin:50% 100%;transform:scale(calc(1 + var(--p,0)*.5)) translateX(calc(var(--mx,0)*-14px));
 background:radial-gradient(ellipse at calc(50% + var(--mx,0)*60px) 0,#ffcf8a66,transparent 62%),repeating-linear-gradient(90deg,#5c1a2d 0 46px,#521526 46px 48px)}
.wall::after{content:'';position:absolute;left:0;right:0;bottom:0;height:34%;border-top:9px solid #b08a45;background:repeating-linear-gradient(90deg,#3a0e1b 0 120px,#481325 120px 124px);box-shadow:0 -8px 18px #0006}
.floor{position:absolute;left:0;right:0;bottom:0;height:34%;overflow:hidden;background:#1b0a10}
.floor i{position:absolute;left:-100%;right:-100%;top:0;height:300%;transform-origin:50% 0;transform:perspective(260px) rotateX(58deg);
 background:conic-gradient(#d9c7a0 25%,#2a1218 0 50%,#d9c7a0 0 75%,#2a1218 0) 0 calc(var(--sy,0)*1px)/120px 120px;opacity:.8}
.floor::after{content:'';position:absolute;inset:0;background:linear-gradient(#2b0d16,#0000 55%)}
.ch{position:absolute;top:0;left:50%;transform-origin:top;animation:sw 7s ease-in-out infinite alternate}
.ch i{position:absolute;top:0;width:1px;height:13vh;background:#c9a35a}
.ch b{position:absolute;left:-23px;top:13vh;width:46px;height:30px;border-radius:50% 50% 40% 40%;background:radial-gradient(#fff3c8,#e0b25a 60%,#7a5a26);box-shadow:0 0 70px 26px #ffd98a77}
@keyframes sw{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
.arc{position:relative;z-index:2;width:140px;height:190px;margin:30px auto;border:6px solid #b08a45;border-bottom:0;border-radius:999px 999px 0 0;background:radial-gradient(ellipse at 50% 100%,#ffe3a8,#6b2a2a 72%);box-shadow:0 0 40px #ffd98a66,inset 0 0 30px #000a;will-change:transform}
.t-ruang .card{background:#f6ecd9;color:#3b2418;border-radius:2px;margin:28px 10px;box-shadow:0 0 0 8px #b08a45,0 0 0 10px #6e5224,0 18px 40px #000a,inset 0 0 30px #c9a96a66;animation:hang 7s ease-in-out infinite alternate}
@keyframes hang{from{transform:rotate(-.5deg)}to{transform:rotate(.5deg)}}
.t-ruang .card .nm,.t-ruang .card b{color:#7a1b32;text-shadow:none}
.t-ruang .card .btn.o{color:#7a1b32;border-color:#7a1b32}
.t-ruang .w,.t-ruang .cd div{color:#3b2418}.t-ruang .cd b{color:#7a1b32}
.t-ruang input,.t-ruang textarea{background:#fffaf0;color:#3b2418}
.t-ruang .seg label{border-color:#7a1b32}.t-ruang .seg label:has(input:checked){background:#7a1b32;color:#f6ecd9}
.t-ruang .btn{color:#2b0d16}
.gal{columns:2;gap:10px}.gal img{width:100%;display:block;margin-bottom:10px;border-radius:14px;cursor:zoom-in;rotate:var(--r);transition:.4s}.gal img:hover{scale:1.04;rotate:0deg}
#lb{position:fixed;inset:0;z-index:70;background:#000d;display:none;place-items:center}#lb.on{display:grid}#lb img{max-width:92vw;max-height:86vh;border-radius:8px}
#lb button{position:absolute;background:#fff2;color:#fff;border:0;font-size:30px;width:48px;height:48px;border-radius:50%;cursor:pointer}#lb .x{top:16px;right:16px}#lb .pv{left:10px;top:50%}#lb .nx{right:10px;top:50%}
/* ===== Tema BUNGA ===== */
.t-bunga{--bg:#fbf4ec;--bg2:#fff;--ink:#3f3550;--ac:#b5487a;--disp:'Fraunces',serif;--ser:'Fraunces',serif;
 background:radial-gradient(circle at 10% 8%,#f9d5de,#0000 36%),radial-gradient(circle at 92% 55%,#e3d6f7,#0000 42%),radial-gradient(circle at 15% 92%,#fdf0b8,#0000 36%),#fbf4ec;background-attachment:fixed}
.t-bunga .nm{font-style:italic;font-weight:600;font-size:clamp(2.6rem,12vw,4rem);line-height:1.05}
.t-bunga h2{font-family:'Caveat',cursive;font-style:normal;font-weight:500;font-size:2.9rem;rotate:-2deg}
.t-bunga .card{border-radius:36px 36px 110px 36px;box-shadow:0 18px 40px #b5487a22}
.t-bunga .card:nth-child(odd){background:#efe7fb}.t-bunga .card:nth-child(even){background:#fde6ec}
.t-bunga .cd div,.t-bunga .w{background:#fff}.t-bunga .gal img{border:6px solid #fff;box-shadow:0 10px 24px #3f35502a}
.t-bunga #cover{background:#fbf4ec}
.ring{position:absolute;width:min(105vw,480px);aspect-ratio:1;opacity:.95;animation:spin 50s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}
.t-bunga .arch{border-radius:50%;box-shadow:0 0 0 6px #fff,0 14px 40px #b5487a33}
#bl{position:fixed;inset:0;z-index:1;pointer-events:none;overflow:hidden}
.bf{position:absolute;opacity:0}body.entered .bf{animation:bl 1.5s cubic-bezier(.2,1.5,.4,1) both calc(var(--d)*1s + .7s)}
.bf .m{animation:sway 6s ease-in-out infinite alternate}.bf .sp{rotate:calc(var(--p,0)*170deg)}
.bf svg{display:block;width:100%;height:100%;filter:drop-shadow(0 8px 12px #8a5a7a44)}
@keyframes bl{from{opacity:0;transform:scale(0) rotate(-120deg)}to{opacity:.95;transform:none}}
@keyframes sway{to{transform:rotate(7deg) scale(1.04)}}
.tp{position:fixed;z-index:60;pointer-events:none;animation:tp 2.6s ease-out forwards}.tp svg{width:100%;height:100%}
@keyframes tp{0%{transform:scale(0) rotate(-90deg);opacity:1}30%{transform:scale(1) rotate(0)}100%{transform:scale(1.2) rotate(40deg) translateY(-30px);opacity:0}}