:root{--accent:#b7893e;--page:#f8f2ec;--hero:#201a14;--text:#332820;--heading:"Cormorant Garamond";--body:"Inter";--surface:#fff;--muted:#756b63;--line:rgba(183,137,62,.24)}
    *{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--page);color:var(--text);font-family:var(--body),Arial,sans-serif;line-height:1.7}button,a{font:inherit}.inv-shell{overflow:hidden;perspective:1500px}.inv-hero{position:relative;min-height:100svh;display:grid;place-items:center;padding:70px 22px;overflow:hidden;isolation:isolate;background-color:var(--hero);color:#fff;text-align:center;transform-style:preserve-3d}.inv-hero-media{position:absolute;inset:-22px;z-index:-2;background-size:cover;background-position:center;transform:translate3d(var(--hero-pan-x,0px),calc(var(--hero-pan-y,0px) + var(--hero-scroll-y,0px)),0) scale(var(--hero-image-zoom,1.08));transition:transform .18s ease-out;will-change:transform}.inv-hero-overlay{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(15,10,7,.46),rgba(15,10,7,.9));transition:opacity .25s ease}.inv-hero-content{position:relative;z-index:1;width:min(680px,100%);transform:translateZ(46px) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg));transform-style:preserve-3d;transition:transform .18s ease-out;will-change:transform}.inv-monogram{display:grid;place-items:center;width:84px;height:84px;margin:0 auto 22px;border:1px solid rgba(255,255,255,.55);border-radius:50%;font-family:var(--heading);font-size:32px}.inv-eyebrow{margin:0 0 10px;color:var(--accent);font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}.inv-hero h1{margin:0;font-family:var(--heading);font-size:clamp(48px,10vw,90px);font-weight:600;line-height:.95;text-shadow:0 12px 34px rgba(0,0,0,.34)}.inv-hosts{margin:18px 0 0;font-family:var(--heading);font-size:clamp(28px,6vw,46px);color:#f8e7ca;text-shadow:0 8px 22px rgba(0,0,0,.28)}.inv-opening{max-width:560px;margin:20px auto 0;color:rgba(255,255,255,.78);font-size:14px}.inv-guest{margin:28px auto 0;padding:18px 20px;max-width:430px;border:1px solid rgba(255,255,255,.24);border-radius:18px;background:rgba(255,255,255,.09);box-shadow:0 24px 55px rgba(0,0,0,.22);backdrop-filter:blur(10px);transform:translateZ(58px)}.inv-guest small,.inv-guest strong,.inv-guest span{display:block}.inv-guest small{font-size:11px;color:rgba(255,255,255,.64)}.inv-guest strong{margin-top:4px;font-family:var(--heading);font-size:30px}.inv-category{margin:8px auto 0;width:max-content;padding:4px 11px;border-radius:999px;background:var(--accent);font-size:10px;font-weight:700}.inv-scroll{display:inline-flex;margin-top:24px;color:#fff;text-decoration:none;font-size:12px;border-bottom:1px solid rgba(255,255,255,.5)}
    .inv-section{padding:76px 20px}.inv-section-inner{width:min(1040px,100%);margin:auto}.inv-section-heading{text-align:center;max-width:660px;margin:0 auto 36px}.inv-section-title{margin:0;font-family:var(--heading);font-size:clamp(38px,7vw,60px);font-weight:600;line-height:1.05}.inv-section-copy{color:var(--muted);font-size:14px}.inv-couple-section{background:linear-gradient(180deg,var(--page),#fff)}.inv-couple-grid{display:grid;grid-template-columns:1fr auto 1fr;gap:24px;align-items:center;max-width:850px;margin:auto}.inv-couple-card{text-align:center;padding:30px 20px;border:1px solid var(--line);border-radius:24px;background:rgba(255,255,255,.76);box-shadow:0 16px 45px rgba(62,39,20,.08)}.inv-couple-card h3{margin:0;color:var(--accent);font-family:var(--heading);font-size:38px;line-height:1}.inv-couple-card p{margin:12px 0 0;color:var(--muted);font-size:13px}.inv-and{display:grid;width:64px;min-height:64px;place-items:center;justify-self:center;align-self:center;text-align:center;font-family:var(--heading);font-size:56px;line-height:1;color:var(--accent)}.inv-quote{max-width:720px;margin:32px auto 0;text-align:center;font-family:var(--heading);font-size:24px;font-style:italic;color:#6b5544}
    .inv-events-section{background:#fff}.inv-event-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}.inv-event-grid.single-event{grid-template-columns:minmax(0,560px);justify-content:center}.inv-event-card{padding:30px;border:1px solid var(--line);border-radius:24px;text-align:center;background:linear-gradient(145deg,#fff,#fcf7f1);box-shadow:0 14px 40px rgba(62,39,20,.07)}.inv-event-icon{display:grid;place-items:center;width:54px;height:54px;margin:0 auto 16px;border-radius:50%;background:var(--accent);color:#fff;font-size:22px}.inv-event-card h3{margin:0;font-family:var(--heading);font-size:35px;color:var(--accent)}.inv-event-meta{margin:18px 0 0}.inv-event-meta strong,.inv-event-meta span{display:block}.inv-event-meta strong{font-size:14px}.inv-event-meta span{margin-top:4px;color:var(--muted);font-size:13px}.inv-button{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;padding:10px 18px;border:1px solid transparent;border-radius:999px;cursor:pointer;text-decoration:none;font-size:13px;font-weight:700;transition:.2s}.inv-button-primary{background:var(--accent);color:#fff}.inv-button-primary:hover{filter:brightness(.92);transform:translateY(-2px)}.inv-button-outline{border-color:var(--accent);background:transparent;color:var(--accent)}.inv-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:24px}
    .inv-gallery-section{background:var(--page)}.inv-gallery-grid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:110px;gap:10px}.inv-gallery-item{position:relative;overflow:hidden;border:0;border-radius:18px;padding:0;cursor:zoom-in;background:#ddd}.inv-gallery-item:nth-child(6n+1),.inv-gallery-item:nth-child(6n+4){grid-column:span 7;grid-row:span 3}.inv-gallery-item:nth-child(6n+2),.inv-gallery-item:nth-child(6n+3),.inv-gallery-item:nth-child(6n+5),.inv-gallery-item:nth-child(6n+6){grid-column:span 5;grid-row:span 2}.inv-gallery-item img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s}.inv-gallery-item:hover img{transform:scale(1.04)}.inv-gallery-caption{position:absolute;left:0;right:0;bottom:0;padding:30px 14px 12px;background:linear-gradient(transparent,rgba(0,0,0,.65));color:#fff;text-align:left;font-size:11px}
    .inv-qr-section{background:var(--hero);color:#fff}.inv-qr-section .inv-section-copy{color:rgba(255,255,255,.68)}.inv-qr-card{width:min(330px,100%);margin:auto;padding:24px;border-radius:24px;background:#fff;color:#222;text-align:center}.inv-qrcode{display:flex;justify-content:center}.inv-qr-card strong,.inv-qr-card span{display:block}.inv-qr-card strong{margin-top:15px;font-family:var(--heading);font-size:26px}.inv-qr-card span{font-size:11px;color:#777}.inv-closing{text-align:center;background:#fff}.inv-closing-name{font-family:var(--heading);font-size:32px;color:var(--accent)}.inv-footer{padding:22px;text-align:center;background:#14100d;color:rgba(255,255,255,.65);font-size:11px}
    .inv-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.inv-music-control{position:fixed;right:16px;bottom:18px;z-index:90;display:grid;width:58px;height:58px;place-items:center;padding:7px;border:1px solid rgba(255,255,255,.3);border-radius:50%;background:rgba(28,21,16,.9);color:#fff;box-shadow:0 10px 35px rgba(0,0,0,.25);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);touch-action:none;user-select:none;-webkit-user-select:none;cursor:grab;will-change:left,top,transform;transition:transform .18s ease,box-shadow .18s ease}.inv-music-control.is-dragging{cursor:grabbing;transform:scale(1.06);box-shadow:0 18px 48px rgba(0,0,0,.38);transition:none}.inv-music-button{display:grid;width:42px;height:42px;place-items:center;padding:0;border:0;border-radius:50%;background:var(--accent);color:#fff;cursor:grab;touch-action:none;font-size:15px;line-height:1}.inv-music-control.is-dragging .inv-music-button{cursor:grabbing}.inv-music-control.playing .inv-music-button{animation:pulse 1.8s infinite}@keyframes pulse{50%{box-shadow:0 0 0 6px rgba(183,137,62,.18)}}
    .inv-lightbox{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.9)}.inv-lightbox[hidden]{display:none}.inv-lightbox img{max-width:min(100%,1200px);max-height:82vh;border-radius:14px}.inv-lightbox-close{position:absolute;top:18px;right:18px;width:44px;height:44px;border:0;border-radius:50%;background:#fff;color:#111;font-size:22px;cursor:pointer}.inv-lightbox-caption{position:absolute;bottom:18px;left:20px;right:20px;color:#fff;text-align:center;font-size:13px}.inv-error{min-height:100svh;display:grid;place-items:center;padding:25px;background:var(--page)}.inv-error article{max-width:520px;padding:38px;border-radius:24px;background:#fff;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.1)}.inv-toast{position:fixed;left:50%;bottom:24px;z-index:120;transform:translate(-50%,20px);opacity:0;pointer-events:none;padding:10px 16px;border-radius:999px;background:#111;color:#fff;font-size:12px;transition:.25s}.inv-toast.show{opacity:1;transform:translate(-50%,0)}
    .theme-minimal .inv-hero{background:var(--page);color:var(--text)}.theme-minimal .inv-hero-overlay{background:transparent}.theme-minimal .inv-opening{color:var(--muted)}.theme-minimal .inv-guest{border-color:var(--line);background:#fff}.theme-minimal .inv-scroll{color:var(--accent)}.theme-modern .inv-hero{clip-path:polygon(0 0,100% 0,100% 95%,0 100%)}.theme-romantic .inv-hero{border-radius:0 0 50% 50% / 0 0 5% 5%}.theme-dark{--surface:#1e1814;--muted:#b8aa98}.theme-dark body,.theme-dark .inv-couple-section,.theme-dark .inv-gallery-section{background:#15110d}.theme-dark .inv-events-section,.theme-dark .inv-closing{background:#1b1511}.theme-dark .inv-couple-card,.theme-dark .inv-event-card{background:#211a14;color:#fff;border-color:#3b2e23}
    @media(max-width:720px){.inv-section{padding:60px 16px}.inv-couple-grid{grid-template-columns:1fr}.inv-and{font-size:38px}.inv-event-grid{grid-template-columns:1fr}.inv-gallery-grid{grid-auto-rows:90px}.inv-gallery-item:nth-child(n){grid-column:span 6;grid-row:span 2}.inv-gallery-item:nth-child(3n+1){grid-column:span 12;grid-row:span 3}.inv-gift-layout{grid-template-columns:1fr}.inv-actions{flex-direction:column}.inv-button{width:100%}}
  
    button,.inv-button{box-shadow:none!important}
    button:focus-visible,.inv-button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
    .inv-music-control.playing .inv-music-button{animation:none!important}

/* Template tambahan v2 - warna utama tetap mengikuti konfigurasi editor */
.theme-botanical .inv-hero{border-radius:0 0 46% 46%/0 0 7% 7%}
.theme-botanical .inv-couple-card,.theme-botanical .inv-event-card{border-radius:30px;background:var(--surface)}
.theme-botanical .inv-event-icon{background:var(--accent)}
.theme-rustic .inv-couple-card,.theme-rustic .inv-event-card{border-radius:8px;background:var(--surface)}
.theme-rustic .inv-button{border-radius:8px}
.theme-rustic .inv-gallery-item{border-radius:8px}
.theme-royal .inv-guest{border:2px solid var(--accent)}
.theme-royal .inv-event-card{border-color:var(--accent)}
.theme-royal .inv-button-primary{background:var(--hero);color:#fff}
.theme-islamic .inv-hero{clip-path:polygon(0 0,100% 0,100% 94%,50% 100%,0 94%)}
.theme-islamic .inv-monogram{border-radius:12px;clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.theme-pastel .inv-hero-overlay{background:linear-gradient(145deg,rgba(84,65,105,.58),rgba(255,202,211,.42))}
.theme-pastel .inv-couple-card,.theme-pastel .inv-event-card{border-radius:30px}
.theme-pastel .inv-gallery-item{border-radius:28px}
.theme-luxury body,.theme-luxury .inv-couple-section,.theme-luxury .inv-gallery-section{background:var(--page);color:var(--text)}
.theme-luxury .inv-events-section,.theme-luxury .inv-closing{background:var(--hero)}
.theme-luxury .inv-couple-card,.theme-luxury .inv-event-card{background:var(--surface);color:var(--text);border-color:var(--line)}
.theme-luxury .inv-button-primary{color:#fff}
.theme-sunset .inv-hero{border-radius:0 0 50% 50%/0 0 8% 8%}
.theme-sunset .inv-event-card{background:var(--surface)}

/* Template 3D Elegance */
.theme-threed{perspective:1400px;background:radial-gradient(circle at 12% 18%,rgba(124,58,237,.14),transparent 30%),var(--page)}
.theme-threed .inv-hero{min-height:calc(100svh - 42px);margin:21px;border-radius:34px;transform-style:preserve-3d;box-shadow:30px 34px 70px rgba(42,21,79,.34),-12px -12px 28px rgba(255,255,255,.1);overflow:hidden}
.theme-threed .inv-hero-content{transform:translateZ(52px)}
.theme-threed .inv-monogram{transform:translateZ(72px);box-shadow:0 18px 32px rgba(0,0,0,.28),inset 0 0 22px rgba(255,255,255,.08)}
.theme-threed .inv-guest{transform:translateZ(80px);border-radius:24px;box-shadow:0 24px 48px rgba(0,0,0,.3)}
.theme-threed .inv-couple-card,.theme-threed .inv-event-card{transform:translateY(-5px);border-color:rgba(124,58,237,.2);box-shadow:12px 14px 0 rgba(124,58,237,.12),0 28px 54px rgba(49,25,92,.13);transition:transform .25s ease,box-shadow .25s ease}
.theme-threed .inv-couple-card:hover,.theme-threed .inv-event-card:hover{transform:translateY(-10px) rotateX(1deg);box-shadow:16px 20px 0 rgba(124,58,237,.14),0 34px 60px rgba(49,25,92,.18)}
.theme-threed .inv-gallery-item{box-shadow:9px 11px 0 rgba(124,58,237,.14),0 22px 42px rgba(49,25,92,.12)}

/* Seluruh template memakai kedalaman 3D, interaksi pointer, dan animasi masuk. */
.inv-shell .inv-couple-card,.inv-shell .inv-event-card,.inv-shell .inv-bank-card,.inv-shell .inv-gift-form,.inv-shell .inv-qr-card{transform-style:preserve-3d;backface-visibility:hidden;transition:transform .22s ease-out,box-shadow .22s ease-out,border-color .22s ease}
.inv-shell .inv-tilt-card{transform:perspective(920px) translateY(var(--card-lift,0)) rotateX(var(--card-rx,0deg)) rotateY(var(--card-ry,0deg))!important;will-change:transform}
.inv-shell .inv-tilt-card:hover{box-shadow:0 28px 62px rgba(48,29,14,.17),0 8px 18px rgba(48,29,14,.1)}
.inv-shell .inv-couple-card h3,.inv-shell .inv-event-card h3,.inv-shell .inv-bank-card>div,.inv-shell .inv-gift-form>*{transform:translateZ(18px)}
.inv-shell .inv-event-icon{transform:translateZ(32px);box-shadow:0 13px 24px color-mix(in srgb,var(--accent) 32%,transparent)}
.inv-shell .inv-gallery-item{transform:perspective(900px) translateZ(0);box-shadow:0 18px 40px rgba(52,32,16,.13);transition:transform .32s ease,box-shadow .32s ease}
.inv-shell .inv-gallery-item:hover{transform:perspective(900px) translateY(-7px) rotateX(2deg) rotateY(-2deg);box-shadow:0 30px 58px rgba(52,32,16,.22)}
.inv-shell .inv-gallery-item:hover img{transform:scale(1.07)}
.inv-shell .inv-button-primary:after{content:"";position:absolute;inset:-45% auto -45% -55%;width:38%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .55s ease}
.inv-shell .inv-button-primary:hover:after{left:125%}
.inv-shell.is-ready .inv-hero-content{animation:hero-arrival .9s cubic-bezier(.2,.75,.2,1) both}
.inv-shell.is-ready .inv-monogram{animation:monogram-float 4.8s ease-in-out 1s infinite}
.inv-reveal{opacity:0;transform:translateY(34px) scale(.975);transition:opacity .68s ease,transform .68s cubic-bezier(.2,.75,.2,1)}
.inv-reveal.inv-visible{opacity:1;transform:translateY(0) scale(1)}
.inv-event-card.inv-reveal:nth-child(2),.inv-couple-card.inv-reveal:nth-child(3){transition-delay:.1s}
.theme-minimal .inv-hero.has-cover-image{color:#fff}
.theme-minimal .inv-hero.has-cover-image .inv-hero-overlay{background:linear-gradient(180deg,rgba(13,18,28,.42),rgba(13,18,28,.9))}
.theme-minimal .inv-hero.has-cover-image .inv-opening{color:rgba(255,255,255,.78)}
.theme-minimal .inv-hero.has-cover-image .inv-guest{border-color:rgba(255,255,255,.25);background:rgba(255,255,255,.1)}
.theme-minimal .inv-hero.has-cover-image .inv-scroll{color:#fff}
@keyframes hero-arrival{from{opacity:0;transform:translateZ(46px) translateY(28px) rotateX(5deg)}to{opacity:1;transform:translateZ(46px) translateY(0) rotateX(var(--hero-tilt-x,0deg)) rotateY(var(--hero-tilt-y,0deg))}}
@keyframes monogram-float{0%,100%{transform:translateZ(64px) translateY(0) rotate(0)}50%{transform:translateZ(64px) translateY(-8px) rotate(2deg)}}

/* Navigation bar ikon interaktif, motion dinamis, dan mobile polish v2.13.0 */
.inv-navigation{--nav-progress:0;position:fixed;top:16px;left:50%;z-index:80;width:min(94vw,980px);transform:translateX(-50%);color:#fff}
.inv-navigation-shell{position:relative;display:flex;align-items:center;gap:10px;min-height:56px;padding:7px 11px;overflow:hidden;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(20,16,14,.74);box-shadow:0 18px 50px rgba(0,0,0,.24);backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%)}
.inv-navigation-brand{display:grid;width:40px;height:40px;flex:0 0 40px;place-items:center;border-radius:50%;background:var(--accent);color:#fff;text-decoration:none;font-family:var(--heading);font-size:20px;font-weight:700;box-shadow:0 8px 22px color-mix(in srgb,var(--accent) 35%,transparent);transition:transform .22s ease}
.inv-navigation-brand:hover{transform:translateY(-2px) rotate(-4deg)}
.inv-navigation-list{display:flex;min-width:0;flex:1;align-items:center;justify-content:center;gap:3px;overflow-x:auto;scrollbar-width:none;overscroll-behavior-inline:contain}
.inv-navigation-list::-webkit-scrollbar{display:none}
.inv-navigation-link{--nav-rx:0deg;--nav-ry:0deg;--nav-icon-x:0px;--nav-icon-y:0px;position:relative;display:flex;min-width:64px;flex:0 0 auto;align-items:center;justify-content:center;gap:6px;padding:6px 9px;border:1px solid transparent;border-radius:999px;color:rgba(255,255,255,.68);text-decoration:none;font-size:9px;font-weight:800;letter-spacing:.04em;transform:perspective(260px) rotateX(var(--nav-rx)) rotateY(var(--nav-ry));transform-style:preserve-3d;transition:color .2s ease,background-color .2s ease,border-color .2s ease,transform .18s ease,box-shadow .2s ease}
.inv-navigation-link:after{content:"";position:absolute;inset:50%;border-radius:999px;background:rgba(255,255,255,.3);opacity:0;pointer-events:none}
.inv-navigation-link:hover{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.08);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.08)}
.inv-navigation-link.active{border-color:color-mix(in srgb,var(--accent) 75%,#fff 25%);background:color-mix(in srgb,var(--accent) 88%,#fff 12%);color:#fff;box-shadow:0 8px 18px color-mix(in srgb,var(--accent) 25%,transparent),inset 0 1px 0 rgba(255,255,255,.26)}
.inv-navigation-icon{display:grid;width:27px;height:27px;flex:0 0 27px;place-items:center;border-radius:50%;background:rgba(255,255,255,.08);transform:translate3d(var(--nav-icon-x),var(--nav-icon-y),18px);transition:transform .18s ease,background-color .2s ease,box-shadow .2s ease}
.inv-navigation-icon svg{width:16px;height:16px;overflow:visible;transition:transform .28s cubic-bezier(.2,.8,.2,1)}
.inv-navigation-label{transform:translateZ(10px);white-space:nowrap}
.inv-navigation-link:hover .inv-navigation-icon svg{transform:scale(1.15) rotate(-5deg)}
.inv-navigation-link.active .inv-navigation-icon{background:rgba(255,255,255,.18);box-shadow:0 0 0 4px rgba(255,255,255,.08)}
.inv-navigation-link.active .inv-navigation-icon svg{animation:inv-nav-active 1.8s ease-in-out infinite}
.inv-navigation-link.is-tapped:after{animation:inv-nav-ripple .5s ease-out}
@keyframes inv-nav-active{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-2px) scale(1.1)}}
@keyframes inv-nav-ripple{0%{inset:50%;opacity:.45}100%{inset:-4px;opacity:0}}
.inv-navigation-progress{position:absolute;right:14px;bottom:0;left:58px;height:2px;transform:scaleX(var(--nav-progress));transform-origin:left center;background:linear-gradient(90deg,var(--accent),#fff);box-shadow:0 0 12px color-mix(in srgb,var(--accent) 70%,transparent);transition:transform .1s linear}
.inv-section{scroll-margin-top:92px}
.inv-motion-scene{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;transform-style:preserve-3d}
.inv-motion-orb{position:absolute;border:1px solid rgba(255,255,255,.18);border-radius:50%;background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.22),color-mix(in srgb,var(--accent) 22%,transparent) 42%,transparent 72%);filter:blur(.2px);mix-blend-mode:screen;will-change:transform}
.inv-motion-orb-one{top:10%;left:7%;width:clamp(130px,24vw,330px);aspect-ratio:1;animation:inv-orb-drift 10s ease-in-out infinite alternate}
.inv-motion-orb-two{right:5%;bottom:8%;width:clamp(95px,18vw,230px);aspect-ratio:1;animation:inv-orb-drift-two 13s ease-in-out infinite alternate-reverse}
.inv-motion-ring{position:absolute;top:50%;left:50%;width:min(74vw,720px);aspect-ratio:1;border:1px solid color-mix(in srgb,var(--accent) 42%,transparent);border-radius:50%;box-shadow:0 0 0 34px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 68px color-mix(in srgb,var(--accent) 3%,transparent);animation:inv-ring-orbit 22s linear infinite}
.theme-threed .inv-motion-orb{filter:blur(1px);opacity:.92}.theme-threed .inv-motion-ring{border-width:2px;box-shadow:0 0 0 40px color-mix(in srgb,var(--accent) 8%,transparent),0 0 0 82px color-mix(in srgb,var(--accent) 5%,transparent)}
@keyframes inv-orb-drift{0%{transform:translate3d(-8%,-4%,40px) rotate(0) scale(.94)}100%{transform:translate3d(34%,24%,90px) rotate(18deg) scale(1.13)}}
@keyframes inv-orb-drift-two{0%{transform:translate3d(12%,12%,55px) scale(.9)}100%{transform:translate3d(-42%,-34%,110px) scale(1.18)}}
@keyframes inv-ring-orbit{from{transform:translate3d(-50%,-50%,20px) rotateX(66deg) rotateZ(0)}to{transform:translate3d(-50%,-50%,20px) rotateX(66deg) rotateZ(360deg)}}

/* Identitas motion 3D per tema. */
.theme-romantic .inv-motion-orb{border-radius:72% 28% 64% 36%;background:linear-gradient(145deg,rgba(255,238,244,.34),color-mix(in srgb,var(--accent) 30%,transparent));filter:blur(.4px)}
.theme-romantic .inv-motion-orb-one{animation:inv-motion-petal 11s ease-in-out infinite alternate}.theme-romantic .inv-motion-orb-two{animation:inv-motion-petal 14s ease-in-out infinite alternate-reverse}.theme-romantic .inv-motion-ring{border-style:dotted;animation-duration:28s}
.theme-classic .inv-motion-orb{background:transparent;border:1px double color-mix(in srgb,var(--accent) 55%,#fff);box-shadow:inset 0 0 0 14px color-mix(in srgb,var(--accent) 5%,transparent)}
.theme-classic .inv-motion-ring{border-style:double;box-shadow:0 0 0 18px color-mix(in srgb,var(--accent) 5%,transparent),0 0 0 56px color-mix(in srgb,var(--accent) 3%,transparent);animation-duration:32s}
.theme-modern .inv-motion-orb{border-radius:18%;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 34%,transparent),transparent 62%);clip-path:polygon(0 18%,82% 0,100% 82%,18% 100%)}
.theme-modern .inv-motion-orb-one{animation:inv-motion-geometry 9s cubic-bezier(.4,0,.2,1) infinite alternate}.theme-modern .inv-motion-orb-two{animation:inv-motion-geometry 12s cubic-bezier(.4,0,.2,1) infinite alternate-reverse}.theme-modern .inv-motion-ring{border-radius:18%;animation:inv-motion-modern-ring 24s linear infinite}
.theme-minimal .inv-motion-orb{opacity:.26;background:transparent;border-color:color-mix(in srgb,var(--accent) 48%,transparent)}.theme-minimal .inv-motion-orb-one{animation-duration:18s}.theme-minimal .inv-motion-orb-two{animation-duration:22s}.theme-minimal .inv-motion-ring{opacity:.22;border-style:dashed;animation-duration:38s}
.theme-dark .inv-motion-orb{width:12px;height:12px;aspect-ratio:auto;background:#fff;border:0;filter:blur(.3px);box-shadow:52px 34px 0 -2px color-mix(in srgb,var(--accent) 85%,#fff),118px 96px 0 -3px #fff,192px 26px 0 -3px color-mix(in srgb,var(--accent) 70%,#fff),238px 142px 0 -2px #fff,310px 72px 0 -3px color-mix(in srgb,var(--accent) 80%,#fff)}
.theme-dark .inv-motion-orb-one{animation:inv-motion-stars 8s ease-in-out infinite alternate}.theme-dark .inv-motion-orb-two{animation:inv-motion-stars 11s ease-in-out infinite alternate-reverse}.theme-dark .inv-motion-ring{opacity:.34;border-style:dotted;animation-duration:30s}
.theme-botanical .inv-motion-orb{border-radius:100% 0 100% 0;background:linear-gradient(145deg,color-mix(in srgb,var(--accent) 34%,#fff 4%),transparent);transform-origin:0 100%}
.theme-botanical .inv-motion-orb-one{animation:inv-motion-leaf 8s ease-in-out infinite alternate}.theme-botanical .inv-motion-orb-two{animation:inv-motion-leaf 11s ease-in-out infinite alternate-reverse}.theme-botanical .inv-motion-ring{border-color:color-mix(in srgb,var(--accent) 52%,transparent);animation-duration:34s}
.theme-rustic .inv-motion-orb{border-radius:42% 58% 36% 64%/55% 38% 62% 45%;background:radial-gradient(circle at 35% 30%,rgba(255,225,184,.24),color-mix(in srgb,var(--accent) 30%,transparent),transparent 72%);filter:sepia(.3)}
.theme-rustic .inv-motion-ring{border-style:dashed;opacity:.58;animation-duration:36s}
.theme-royal .inv-motion-orb{border-radius:16%;background:linear-gradient(135deg,rgba(255,255,255,.28),color-mix(in srgb,var(--accent) 42%,transparent) 45%,transparent 70%);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
.theme-royal .inv-motion-orb-one{animation:inv-motion-diamond 12s ease-in-out infinite alternate}.theme-royal .inv-motion-orb-two{animation:inv-motion-diamond 16s ease-in-out infinite alternate-reverse}.theme-royal .inv-motion-ring{border:2px double color-mix(in srgb,var(--accent) 65%,transparent);animation-duration:26s}
.theme-islamic .inv-motion-orb{border-radius:0;background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 38%,transparent),transparent);clip-path:polygon(50% 0,61% 35%,100% 50%,61% 65%,50% 100%,39% 65%,0 50%,39% 35%)}
.theme-islamic .inv-motion-orb-one{animation:inv-motion-islamic 14s ease-in-out infinite alternate}.theme-islamic .inv-motion-orb-two{animation:inv-motion-islamic 18s ease-in-out infinite alternate-reverse}.theme-islamic .inv-motion-ring{border-style:dashed;animation-duration:40s}
.theme-pastel .inv-motion-orb{border:0;border-radius:62% 38% 52% 48%/44% 57% 43% 56%;background:linear-gradient(145deg,rgba(255,255,255,.34),color-mix(in srgb,var(--accent) 28%,transparent));filter:blur(2px)}
.theme-pastel .inv-motion-orb-one{animation-duration:13s}.theme-pastel .inv-motion-orb-two{animation-duration:17s}.theme-pastel .inv-motion-ring{opacity:.3;border-style:dotted}
.theme-luxury .inv-motion-orb{border:0;border-radius:2px;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 70%,#fff),transparent);filter:blur(.3px)}
.theme-luxury .inv-motion-orb-one{width:44vw;height:2px;top:24%;animation:inv-motion-sheen 9s ease-in-out infinite}.theme-luxury .inv-motion-orb-two{width:32vw;height:1px;bottom:22%;animation:inv-motion-sheen 12s ease-in-out infinite reverse}.theme-luxury .inv-motion-ring{border-color:color-mix(in srgb,var(--accent) 64%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 16%,transparent),0 0 48px color-mix(in srgb,var(--accent) 10%,transparent);animation-duration:42s}
.theme-sunset .inv-motion-orb{border:0;background:radial-gradient(circle at 38% 34%,rgba(255,245,214,.72),color-mix(in srgb,var(--accent) 42%,transparent) 44%,transparent 72%);filter:blur(1px)}
.theme-sunset .inv-motion-orb-one{animation:inv-motion-sun 12s ease-in-out infinite alternate}.theme-sunset .inv-motion-orb-two{animation:inv-motion-sun 16s ease-in-out infinite alternate-reverse}.theme-sunset .inv-motion-ring{height:38%;aspect-ratio:auto;border-radius:50%;border-color:rgba(255,221,177,.32);animation-duration:30s}
.theme-threed .inv-motion-orb{background:radial-gradient(circle at 30% 25%,rgba(255,255,255,.48),color-mix(in srgb,var(--accent) 34%,transparent) 42%,rgba(20,8,50,.08) 70%);box-shadow:inset -22px -28px 48px rgba(20,8,50,.24),0 28px 58px rgba(20,8,50,.22)}
.theme-threed .inv-motion-orb-one{animation:inv-motion-sphere 9s ease-in-out infinite alternate}.theme-threed .inv-motion-orb-two{animation:inv-motion-sphere 12s ease-in-out infinite alternate-reverse}
@keyframes inv-motion-petal{from{transform:translate3d(-18%,-12%,45px) rotate(-18deg) scale(.82)}to{transform:translate3d(54%,38%,100px) rotate(38deg) scale(1.08)}}
@keyframes inv-motion-geometry{from{transform:translate3d(-18%,-8%,40px) rotate(-8deg)}to{transform:translate3d(42%,28%,105px) rotate(26deg)}}
@keyframes inv-motion-modern-ring{from{transform:translate3d(-50%,-50%,20px) rotateX(68deg) rotateZ(0)}to{transform:translate3d(-50%,-50%,20px) rotateX(68deg) rotateZ(-360deg)}}
@keyframes inv-motion-stars{from{opacity:.35;transform:translate3d(-10px,-8px,45px) scale(.7)}to{opacity:1;transform:translate3d(42px,28px,110px) scale(1.35)}}
@keyframes inv-motion-leaf{from{transform:translate3d(-18%,-8%,40px) rotate(-18deg)}to{transform:translate3d(38%,24%,95px) rotate(14deg)}}
@keyframes inv-motion-diamond{from{transform:translate3d(-12%,-8%,45px) rotate(0) scale(.82)}to{transform:translate3d(34%,28%,105px) rotate(45deg) scale(1.08)}}
@keyframes inv-motion-islamic{from{transform:translate3d(-8%,-6%,45px) rotate(0) scale(.8)}to{transform:translate3d(28%,24%,100px) rotate(90deg) scale(1.1)}}
@keyframes inv-motion-sheen{0%,100%{opacity:.18;transform:translate3d(-30%,0,55px) rotate(-12deg)}50%{opacity:.92;transform:translate3d(145%,30px,95px) rotate(-12deg)}}
@keyframes inv-motion-sun{from{transform:translate3d(-12%,-8%,45px) scale(.88)}to{transform:translate3d(36%,18%,105px) scale(1.18)}}
@keyframes inv-motion-sphere{from{transform:translate3d(-14%,-10%,50px) rotate(-8deg) scale(.88)}to{transform:translate3d(42%,28%,130px) rotate(18deg) scale(1.16)}}

/* Hadiah digital */
.inv-gift-section{background:linear-gradient(180deg,#fff,var(--page))}
.inv-gift-layout{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:28px;align-items:start;max-width:920px;margin:auto}
.inv-gift-accounts-list{display:grid;gap:16px;align-self:start}
.inv-gift-accounts-list .inv-bank-card{min-height:250px}
.inv-bank-card{position:relative;min-height:290px;padding:30px;overflow:hidden;border:1px solid rgba(255,255,255,.22);border-radius:28px;background:linear-gradient(145deg,var(--hero),var(--accent));color:#fff;box-shadow:0 26px 58px rgba(34,22,15,.22)}
.inv-bank-card:after{content:"";position:absolute;width:240px;height:240px;right:-110px;bottom:-130px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 34px rgba(255,255,255,.05),0 0 0 68px rgba(255,255,255,.035)}
.inv-bank-chip{width:48px;height:36px;margin-bottom:28px;border-radius:9px;background:linear-gradient(135deg,#f9e9a8,#b99138);box-shadow:inset 0 0 0 1px rgba(70,45,0,.2)}
.inv-bank-label,.inv-bank-account span{display:block;color:rgba(255,255,255,.68);font-size:10px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.inv-bank-name{display:block;margin-top:5px;font-family:var(--heading);font-size:30px;line-height:1.1}
.inv-bank-account{position:relative;z-index:1;margin-top:28px}
.inv-bank-account strong{display:block;margin-top:5px;font:700 clamp(21px,4vw,29px)/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.08em}
.inv-bank-footer{position:relative;z-index:1;display:flex;align-items:end;justify-content:space-between;gap:14px;margin-top:26px}
.inv-bank-footer>span{font-size:12px;font-weight:700;text-transform:uppercase}
.inv-copy-account{min-height:40px;padding:8px 13px;border:1px solid rgba(255,255,255,.35);border-radius:999px;background:rgba(255,255,255,.13);color:#fff;cursor:pointer;font-size:11px;font-weight:700;backdrop-filter:blur(8px)}
.inv-copy-account:hover{background:rgba(255,255,255,.22)}
.inv-gift-form{display:grid;gap:15px;padding:28px;border:1px solid var(--line);border-radius:28px;background:#fff;box-shadow:0 20px 48px rgba(62,39,20,.09)}
.inv-gift-form-heading strong,.inv-gift-form-heading span{display:block}
.inv-gift-form-heading strong{font-family:var(--heading);font-size:30px;line-height:1.1;color:var(--accent)}
.inv-gift-form-heading span{margin-top:7px;color:var(--muted);font-size:12px}
.inv-gift-form label>span{display:block;margin-bottom:6px;font-size:12px;font-weight:700;color:var(--text)}
.inv-gift-form label small{font-weight:500;color:var(--muted)}
.inv-gift-form input,.inv-gift-form textarea,.inv-gift-form select{width:100%;min-height:46px;padding:11px 13px;border:1px solid var(--line);border-radius:12px;background:#fff;color:#222;font:inherit;font-size:14px;outline:none}
.inv-gift-form textarea{resize:vertical}
.inv-gift-form select{cursor:pointer}
.inv-gift-form input:focus,.inv-gift-form textarea:focus,.inv-gift-form select:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 14%,transparent)}
.inv-amount-field{display:grid;grid-template-columns:auto 1fr;align-items:center;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.inv-amount-field>span{padding:0 0 0 13px;color:var(--accent);font-weight:800}
.inv-amount-field input{border:0;box-shadow:none!important}
.inv-gift-form .inv-gift-confirm{display:flex;align-items:flex-start;gap:9px;padding:11px 12px;border-radius:12px;background:var(--page)}
.inv-gift-form .inv-gift-confirm input{width:18px;min-height:18px;margin-top:2px;padding:0;accent-color:var(--accent)}
.inv-gift-form .inv-gift-confirm span{margin:0;font-size:11px;line-height:1.5}
.inv-gift-form .inv-button{width:100%}
.inv-gift-note{margin:0;color:var(--muted);font-size:11px;text-align:center}
.theme-dark .inv-gift-section,.theme-luxury .inv-gift-section{background:var(--page)}
.theme-dark .inv-gift-form,.theme-luxury .inv-gift-form{background:var(--surface);color:var(--text)}

@media(max-width:520px){
  body{overflow-x:hidden;font-size:15px}
  .inv-shell,.inv-section-inner,.inv-hero-content{min-width:0;width:100%}
  .inv-hero{min-height:100svh;padding:48px 14px 88px}
  .inv-hero h1{font-size:clamp(40px,13vw,58px);line-height:1}
  .inv-monogram{width:70px;height:70px;margin-bottom:18px;font-size:28px}
  .inv-hosts{margin-top:14px;font-size:clamp(25px,8.5vw,36px);overflow-wrap:anywhere}
  .inv-opening{margin-top:16px;font-size:13px;line-height:1.65}
  .inv-guest{width:min(100%,340px);margin-top:22px;padding:16px 14px;border-radius:16px}
  .inv-guest strong{font-size:25px;line-height:1.15;overflow-wrap:anywhere}
  .inv-scroll{margin-top:20px}
  .inv-section{padding:48px 14px}
  .inv-section-heading{margin-bottom:26px}
  .inv-section-title{font-size:clamp(33px,10.5vw,44px)}
  .inv-section-copy{font-size:13px;line-height:1.65}
  .inv-couple-grid{gap:13px}
  .inv-couple-card,.inv-event-card{padding:22px 15px;border-radius:20px}
  .inv-couple-card h3{font-size:33px;overflow-wrap:anywhere}
  .inv-and{width:52px;min-height:52px;margin:0 auto;font-size:34px;line-height:1}
  .inv-quote{margin-top:25px;font-size:20px;line-height:1.45}
  .inv-event-icon{width:48px;height:48px;margin-bottom:13px}
  .inv-event-card h3{font-size:31px}
  .inv-event-meta{margin-top:14px}
  .inv-event-meta strong{font-size:13px}.inv-event-meta span{font-size:12px;overflow-wrap:anywhere}
  .inv-actions{gap:9px;margin-top:19px}
  .inv-button{min-height:48px;padding:11px 16px}
  .inv-gallery-grid{grid-auto-rows:78px;gap:7px}
  .inv-gallery-item:nth-child(n){border-radius:12px}
  .inv-gallery-caption{padding:24px 10px 9px;font-size:10px}
  .inv-qr-card{width:min(100%,310px);padding:18px 12px;border-radius:20px}
  .inv-qrcode{width:min(100%,232px);min-height:232px;padding:8px}
  .inv-qr-card strong{font-size:23px;overflow-wrap:anywhere}
  .theme-threed .inv-hero{margin:8px;border-radius:22px;min-height:calc(100svh - 16px)}
  .theme-threed .inv-hero-content,.theme-threed .inv-monogram,.theme-threed .inv-guest{transform:none}
  .inv-gift-layout{grid-template-columns:1fr;gap:18px}
  .inv-bank-card,.inv-gift-form{padding:20px 16px;border-radius:20px}
  .inv-bank-card{min-height:245px}
  .inv-bank-name{font-size:26px}.inv-bank-account{margin-top:22px}.inv-bank-account strong{font-size:clamp(19px,6vw,24px);overflow-wrap:anywhere;letter-spacing:.04em}
  .inv-bank-footer{align-items:flex-start;flex-direction:column}
  .inv-gift-form{gap:13px}.inv-gift-form-heading strong{font-size:27px}
  .inv-gift-form input,.inv-gift-form textarea,.inv-gift-form select{font-size:16px}
  .inv-closing-name{font-size:28px;overflow-wrap:anywhere}
  .inv-footer{padding:19px 14px;font-size:10px}
  .inv-lightbox{padding:12px}.inv-lightbox img{max-height:76svh}.inv-lightbox-close{top:max(10px,env(safe-area-inset-top));right:10px}
  .inv-music-control{left:10px;bottom:max(10px,env(safe-area-inset-bottom));width:54px;height:54px;padding:6px}
  .inv-music-button{width:40px;height:40px}
}

@media(max-width:720px){
  .inv-hero-content,.inv-guest{transform:none}
  .inv-shell .inv-tilt-card,.inv-shell .inv-gallery-item:hover{transform:none!important}
  .inv-shell.is-ready .inv-hero-content{animation:hero-arrival-mobile .7s ease both}
  .inv-navigation{top:auto;bottom:max(10px,env(safe-area-inset-bottom));width:calc(100vw - 20px)}
  .inv-navigation-shell{min-height:60px;padding:6px 7px;border-radius:20px}
  .inv-navigation-brand{display:none}
  .inv-navigation-list{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(44px,1fr);justify-content:stretch;gap:1px;scroll-snap-type:x proximity}
  .inv-navigation-link{min-width:0;min-height:48px;gap:0;padding:5px;text-align:center;scroll-snap-align:center}
  .inv-navigation-label{display:none}
  .inv-navigation-icon{width:34px;height:34px;flex-basis:34px}
  .inv-navigation-icon svg{width:18px;height:18px}
  .inv-navigation-progress{right:10px;left:10px}
  .has-inv-navigation .inv-music-control{bottom:84px}
  .has-inv-navigation .inv-footer{padding-bottom:94px}
  .has-inv-navigation .inv-toast{bottom:88px}
  .inv-section{scroll-margin-top:12px}
  @keyframes hero-arrival-mobile{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
}

@media(max-width:380px){
  .inv-navigation{width:calc(100vw - 12px);bottom:max(6px,env(safe-area-inset-bottom))}
  .inv-navigation-shell{border-radius:18px}
  .inv-navigation-list{grid-auto-columns:minmax(42px,1fr)}
  .inv-navigation-link{min-width:0;padding-inline:4px}
  .inv-navigation-icon{width:32px;height:32px;flex-basis:32px}
  .inv-hero{padding-inline:12px}.inv-hero h1{font-size:clamp(37px,12.5vw,48px)}
  .inv-section{padding-inline:12px}
  .inv-music-control{width:52px;height:52px}.inv-music-button{width:38px;height:38px}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .inv-hero-media,.inv-hero-content,.inv-shell .inv-tilt-card,.inv-shell .inv-gallery-item,.inv-reveal,.inv-monogram,.inv-button:after,.inv-motion-scene *,.inv-navigation-brand,.inv-navigation-link{animation:none!important;transition:none!important;transform:none!important}
  .inv-reveal{opacity:1!important}
}

/* v2.5.1: atribut hidden harus selalu menang atas layout komponen. */
[hidden]{display:none!important}


/* v2.6.2: QR optical surface is always white, independent of invitation template. */
.inv-qr-card{background:#fff!important;color:#222!important;color-scheme:light!important}
.inv-qrcode{width:max-content;max-width:100%;margin-left:auto;margin-right:auto;padding:10px;border-radius:14px;background:#fff!important;color-scheme:light!important;isolation:isolate}
.inv-qrcode{width:min(100%,252px);min-height:252px;display:grid;place-items:center}
.inv-qrcode canvas,.inv-qrcode img{max-width:100%;height:auto;margin:auto;background:#fff!important}
.theme-dark .inv-qr-card,.theme-luxury .inv-qr-card{background:#fff!important;color:#222!important}

/* Pilihan penataan galeri. Kolase memakai susunan bawaan di atas. */
.inv-gallery-grid.gallery-layout-grid { grid-template-columns:repeat(3,minmax(0,1fr)); grid-auto-rows:auto; }
.inv-gallery-grid.gallery-layout-grid .inv-gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; aspect-ratio:4/5; }
.inv-gallery-grid.gallery-layout-filmstrip { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(210px,340px); grid-auto-rows:360px; gap:14px; overflow-x:auto; overscroll-behavior-inline:contain; scroll-snap-type:x mandatory; padding:5px 5px 20px; scrollbar-width:thin; }
.inv-gallery-grid.gallery-layout-filmstrip .inv-gallery-item:nth-child(n) { grid-column:auto; grid-row:auto; scroll-snap-align:start; }
@media(max-width:720px) {
  .inv-gallery-grid.gallery-layout-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inv-gallery-grid.gallery-layout-filmstrip { grid-auto-columns:minmax(210px,76vw); grid-auto-rows:320px; }
}