/* ===== consolidated-v54-served.css ===== */
/* === styles.css === */
@font-face{font-family:'Jawa Palsu';src:url('assets/fonts/jawa-palsu.woff2') format('woff2'),url('assets/fonts/JAWAPALSU.TTF') format('truetype');font-weight:400 700;font-style:normal;font-display:swap}
:root{--ink:#050F0B;--wine:#0F4A36;--wine-deep:#050F0B;--wine-soft:#0E3B2A;--gold:#E9CE7A;--gold-light:#F5E6B8;--cream:#FAF6EE;--paper:#EFE9DA;--muted:#93A19A;--line:rgba(233,206,122,.45);--shadow:0 24px 70px rgba(5,15,11,.42);--serif:'Cormorant Garamond',Georgia,serif;--display:'Cinzel Decorative',Georgia,serif;--sans:'Montserrat',Arial,sans-serif;--jawa:'Jawa Palsu',Georgia,serif}*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--wine-deep);overflow-x:hidden}body{margin:0;background:var(--wine-deep);color:var(--cream);font-family:var(--sans);font-size:14px;line-height:1.7;overflow-x:hidden;min-width:0}.site-noise{position:fixed;inset:0;z-index:20;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E")}.portal{position:fixed;inset:0;z-index:50;display:grid;place-items:center;align-content:center;gap:5px;padding:16px 20px;max-height:100dvh;text-align:center;overflow:hidden;background:transparent}.portal.is-hidden{opacity:0;visibility:hidden;pointer-events:none;transition:opacity .9s,visibility .9s}.portal__halo{position:absolute;width:460px;height:460px;border:1px solid rgba(233,206,122,.24);border-radius:50%;box-shadow:0 0 0 17px rgba(233,206,122,.05),0 0 0 46px rgba(233,206,122,.03)}.portal__ornament{position:relative;width:104px;height:165px;margin-bottom:5px;filter:drop-shadow(0 10px 20px rgba(0,0,0,.35));animation:float 5s ease-in-out infinite}.portal__ornament img{width:100%;height:100%}.portal h1{position:relative;margin:2px 0;font-family:var(--jawa);font-weight:700;font-size:clamp(58px,16vw,108px);line-height:1.02;color:#FFF8E7;max-width:900px;text-shadow:0 3px 5px rgba(0,0,0,.85),0 8px 26px rgba(0,0,0,.65),0 0 40px rgba(233,206,122,.5);letter-spacing:.02em}.portal__names i{display:block;font-family:var(--jawa);font-style:normal;font-weight:700;color:var(--gold-light);font-size:.5em;line-height:1.1;margin:.05em 0;text-shadow:0 2px 3px rgba(0,0,0,.7),0 0 28px rgba(233,206,122,.5)}.portal__to{position:relative;margin:4px auto;padding:10px 24px;max-width:300px;color:#F5EEDA;font:italic 600 15px/1.35 var(--serif);text-shadow:0 1px 3px rgba(0,0,0,.75);background:rgba(8,25,18,.62);border:1px solid rgba(233,206,122,.4);border-radius:14px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);box-shadow:0 8px 24px rgba(0,0,0,.4)}.portal__to strong{display:block;margin-top:2px;color:#FFF8E7;font:700 24px/1.3 var(--serif);letter-spacing:.05em;text-shadow:0 1px 3px rgba(0,0,0,.75),0 0 22px rgba(233,206,122,.5)}.portal__date{position:relative;margin:6px 0 2px;color:var(--gold-light);font:700 11px/1.4 var(--sans);letter-spacing:.26em;text-shadow:0 1px 3px rgba(0,0,0,.7),0 2px 10px rgba(0,0,0,.55)}.eyebrow{margin:1vh 0 0;color:var(--gold-light);font-family:var(--jawa);font-weight:700;font-size:clamp(22px,6vw,32px);line-height:1.15;letter-spacing:.06em;text-shadow:0 2px 5px rgba(0,0,0,.85),0 4px 16px rgba(0,0,0,.6),0 0 24px rgba(233,206,122,.45)}.portal__button{position:relative;margin-top:18px}.portal__hint{position:relative;z-index:2;margin:14px auto 0;max-width:360px;color:#FFF8E7;font:italic 700 13px/1.5 var(--serif);text-shadow:0 1px 5px rgba(0,0,0,.95),0 2px 14px rgba(0,0,0,.75),0 0 4px rgba(0,0,0,.9);background:none;border:0;box-shadow:none}.invitation{visibility:hidden;opacity:0;transition:opacity 1s ease}.invitation.is-open{visibility:visible;opacity:1}.section-pad{position:relative;padding:100px 22px;isolation:isolate}.hero{position:relative;min-height:100svh;display:grid;place-items:center;overflow:hidden;padding:96px 20px 90px;isolation:isolate}.hero:before,.hero:after{content:"";position:absolute;inset:18px;border:1px solid rgba(233,206,122,.28);pointer-events:none}.hero:after{inset:27px;border-color:rgba(233,206,122,.1)}.hero__mist{position:absolute;border-radius:50%;filter:blur(30px);opacity:.22;background:#D4AF5A}.hero__mist--one{width:280px;height:100px;left:-70px;bottom:16%;transform:rotate(-18deg)}.hero__mist--two{width:250px;height:90px;right:-65px;top:21%;transform:rotate(20deg)}.frame{border:1px solid var(--gold);box-shadow:0 0 0 5px rgba(233,206,122,.09),0 0 0 7px rgba(233,206,122,.3),var(--shadow);background:rgba(5,15,11,.42)}.hero__frame{width:min(100%,580px);position:relative;padding:9px}.hero__photo{position:relative;min-height:360px;background:linear-gradient(145deg,#0E3B2A,#1A5C42 48%,#0A3527);overflow:hidden}.photo-placeholder:before{content:"";position:absolute;inset:9% 16%;border:1px solid rgba(245,230,184,.5);transform:rotate(2deg);box-shadow:0 0 0 14px rgba(0,0,0,.12)}.photo-placeholder:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 39% 37%,rgba(245,230,184,.65) 0 4%,transparent 4.5%),radial-gradient(circle at 64% 32%,rgba(245,230,184,.5) 0 5%,transparent 5.5%),linear-gradient(115deg,transparent 0 40%,rgba(0,0,0,.24) 40% 43%,transparent 43% 55%,rgba(0,0,0,.3) 55% 59%,transparent 59%)}.photo-placeholder__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(5,15,11,.87),transparent 70%)}.photo-placeholder__label{position:absolute;bottom:17px;left:0;right:0;text-align:center;z-index:1;display:grid;gap:2px;color:var(--gold-light);letter-spacing:.18em;font-size:11px}.photo-placeholder__label small{font:500 10px var(--sans);letter-spacing:.06em;color:rgba(250,246,238,.62)}.hero__copy{position:relative;margin:-62px 14px 7px;padding:27px 17px 22px;text-align:center;background:linear-gradient(180deg,rgba(15,74,54,.95),rgba(10,53,39,.97));border:1px solid var(--line);z-index:2}.display-title{margin:13px 0 5px;font:700 clamp(40px,11vw,76px)/1.2 var(--jawa);letter-spacing:.02em;color:#FFF8E7;text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 30px rgba(233,206,122,.45)}.display-title i,.footer__couple i{font-family:var(--serif);font-weight:400;color:var(--cream)}.hero__date{margin:0;color:var(--cream);letter-spacing:.28em;font-size:11px}.ornament-rule{display:block;width:min(52vw,190px);height:22px;margin:12px auto 7px;background:url("assets/canva-premium/divider-elegan-emas.png") center/contain no-repeat;font-size:0;color:transparent;opacity:.95}.hero__sub{margin:0;color:var(--muted);font:italic 17px var(--serif)}.scroll-cue{position:absolute;bottom:28px;color:var(--gold);text-decoration:none;font-size:9px;letter-spacing:.14em;text-transform:uppercase;display:flex;align-items:center;gap:10px}.scroll-cue__line{width:1px;height:28px;background:var(--gold);animation:scrollline 1.8s ease-in-out infinite}.ayat{background:linear-gradient(180deg,#050F0B,#0A3527);padding-top:130px}.section-ornament{position:absolute;left:50%;transform:translateX(-50%);opacity:.6;animation:ornament-sway 7s ease-in-out infinite}.section-ornament--top{top:-40px;width:132px;height:86px}.section-ornament img{width:100%;height:100%}.geboyok-panel{position:relative;width:min(100%,700px);margin:auto;padding:49px 22px 42px;text-align:center;border:1px solid var(--gold);background:linear-gradient(145deg,rgba(15,74,54,.46),rgba(10,53,39,.95) 32%,rgba(15,74,54,.65));box-shadow:inset 0 0 0 6px rgba(233,206,122,.06),0 18px 50px rgba(0,0,0,.27)}.geboyok-panel:before,.geboyok-panel:after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:min(52vw,190px);height:22px;background:url("assets/canva-premium/divider-elegan-emas.png") center/contain no-repeat;opacity:.95}.geboyok-panel:before{top:12px}.geboyok-panel:after{bottom:9px}.arabic{margin:28px 0 18px;color:var(--gold-light);font:31px/1.9 var(--serif)}.translation,.hadith{max-width:570px;margin:0 auto;color:var(--cream);font:italic 20px/1.45 var(--serif)}.source{margin:8px 0 20px;color:var(--gold);font-size:10px;letter-spacing:.13em}.divider-dot{display:block;width:min(52vw,190px);height:22px;margin:13px auto;background:url("assets/canva-premium/divider-elegan-emas.png") center/contain no-repeat;font-size:0;color:transparent;opacity:.95}.javanese{margin:22px 0 0;color:var(--gold-light);font:italic 19px/1.45 var(--serif)}.javanese-translation{margin:3px 0;color:var(--muted);font:12px var(--serif)}.mempelai,.acara,.galeri{background:var(--wine-deep)}.section-heading{max-width:620px;margin:0 auto 42px;text-align:center}.section-heading h2{margin:10px 0 8px;color:#FFF8E7;font:700 clamp(32px,8.5vw,56px)/1.25 var(--jawa);letter-spacing:.03em;text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 26px rgba(233,206,122,.4)}.section-heading>p:last-child{margin:0;color:var(--muted);font:18px/1.5 var(--serif)}.couple-grid{display:grid;grid-template-columns:1fr;gap:28px;max-width:850px;margin:auto;align-items:center}.profile-card{text-align:center}.profile-card__photo{position:relative;width:min(100%,250px);aspect-ratio:4/5;margin:auto;border:1px solid var(--gold);outline:1px solid rgba(233,206,122,.3);outline-offset:6px;display:grid;place-items:end center;padding-bottom:15px;overflow:hidden;background:url("assets/scene/bunga-emerald.webp") -12px -12px/72px no-repeat,url("assets/scene/bunga-emerald.webp") calc(100% + 12px) -12px/72px no-repeat,url("assets/scene/bunga-emerald.webp") -12px calc(100% + 12px)/72px no-repeat,url("assets/scene/bunga-emerald.webp") calc(100% + 12px) calc(100% + 12px)/72px no-repeat,radial-gradient(circle at 50% 27%,rgba(245,230,184,.68) 0 10%,transparent 10.5%),linear-gradient(120deg,#0A3527,#1A5C42 48%,#0E3B2A)}.profile-card__photo:before{content:"";position:absolute;inset:14px;border:1px solid rgba(245,230,184,.5);border-radius:48% 48% 0 0;clip-path:polygon(50% 0,100% 23%,100% 100%,0 100%,0 23%)}.profile-card__photo:after{content:"";position:absolute;inset:0;background:linear-gradient(140deg,transparent 38%,rgba(5,15,11,.42) 39% 42%,transparent 43% 56%,rgba(245,230,184,.17) 57% 60%,transparent 61%)}.profile-card__photo span,.profile-card__photo small{position:relative;z-index:1}.profile-card__photo span{font:700 26px var(--display);color:var(--gold-light)}.profile-card__photo small{font-size:9px;color:rgba(250,246,238,.7)}.profile-card__role,.event-card__label,.timeline-item__label{margin:29px 0 4px;color:var(--gold);font-size:10px;letter-spacing:.2em;text-transform:uppercase}.profile-card h3{margin:0;color:#FFF8E7;font:700 clamp(28px,7vw,40px)/1.25 var(--jawa);letter-spacing:.03em;text-shadow:0 2px 4px rgba(0,0,0,.65),0 0 22px rgba(233,206,122,.35)}.profile-card__parent{margin:10px 0;color:var(--muted);font:17px/1.35 var(--serif)}.social-link{color:var(--gold);text-decoration:none;font-size:10px;letter-spacing:.08em}.couple-mark{display:grid;place-items:center;gap:3px;color:var(--gold);font:46px var(--serif)}.couple-mark img{width:132px;height:26px;opacity:.95;object-fit:contain}.countdown{padding:75px 22px;background:radial-gradient(ellipse at 50% 10%,rgba(233,206,122,.32),transparent 42%),#0A3527}.countdown__inner{position:relative;max-width:850px;margin:auto;padding:54px 16px 39px;text-align:center;border:1px solid rgba(245,230,184,.55);background:rgba(250,246,238,.09);backdrop-filter:blur(10px);box-shadow:inset 0 0 30px rgba(250,246,238,.04),0 20px 45px rgba(0,0,0,.22)}.countdown__gunungan{position:absolute;top:-32px;left:50%;width:96px;height:62px;transform:translateX(-50%);opacity:.95}.countdown__gunungan img{width:100%;height:100%}.countdown h2{margin:7px 0 26px;color:#FFF8E7;font:700 clamp(30px,7.5vw,44px)/1.25 var(--jawa);letter-spacing:.03em;text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 24px rgba(233,206,122,.4)}.timer{display:flex;justify-content:center;align-items:center;gap:clamp(5px,2vw,17px)}.timer i{color:var(--gold);font-style:normal;font-size:23px}.timer__unit{min-width:59px;display:grid;gap:0}.timer__unit strong{color:var(--cream);font:500 clamp(25px,8vw,48px) var(--serif)}.timer__unit span{color:var(--muted);font-size:9px;letter-spacing:.14em;text-transform:uppercase}.countdown__note{margin:23px 0 0;color:var(--gold);font-size:11px;letter-spacing:.14em}.event-grid{display:grid;grid-template-columns:1fr;gap:22px;max-width:950px;margin:auto}.event-card{position:relative;padding:44px 23px 28px;text-align:center;border:1px solid rgba(233,206,122,.67);background:linear-gradient(150deg,rgba(15,74,54,.38),rgba(10,53,39,.96) 45%,rgba(14,59,42,.6));box-shadow:0 14px 33px rgba(0,0,0,.2);overflow:hidden}.event-card:before{content:"";position:absolute;inset:8px;border:1px solid rgba(233,206,122,.18);pointer-events:none}.event-card__corner{position:absolute;width:66px;height:66px;background:url("assets/scene/bunga-emerald.webp") center/contain no-repeat;font-size:0;color:transparent;line-height:1;opacity:.9}.event-card__corner--tl{top:9px;left:12px}.event-card__corner--tr{top:9px;right:12px;transform:scaleX(-1)}.event-card__icon{display:grid;place-items:center}.event-card__icon svg{width:49px;height:49px;fill:none;stroke:var(--gold-light);stroke-width:1.3}.event-card__label{margin-top:16px}.event-card h3{margin:6px 0 5px;color:var(--gold-light);font:500 25px/1.2 var(--serif)}.event-card h3 b{font-weight:600;font-size:20px}.event-card__time{margin:0;color:var(--cream);font-size:12px;letter-spacing:.11em}.event-card__place{display:grid;gap:5px;margin:21px 0 23px;color:var(--muted);font:17px/1.35 var(--serif)}.event-card__place strong{color:var(--cream);font-weight:600}.button{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:46px;padding:14px 34px;border-radius:999px;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(233,206,122,.18) 45%,rgba(255,255,255,.12));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:#FFF8E7;font:700 11px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;cursor:pointer;box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5);overflow:hidden;transition:transform .25s,box-shadow .25s}.button:hover{transform:translateY(-2px)}.button--gold{background:var(--gold);color:#0A3527}
.button--glass{position:relative;border-radius:999px;padding:15px 38px;border:1px solid rgba(255,255,255,.45);background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(233,206,122,.18) 45%,rgba(255,255,255,.12));backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);color:#FFF8E7;font:700 13px var(--sans);letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(0,0,0,.15);overflow:hidden}
.button--glass::before{content:"";position:absolute;top:0;left:-80%;width:60%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-20deg);animation:glass-shine 3.2s ease-in-out infinite}
@keyframes glass-shine{0%{left:-80%}55%,100%{left:130%}}
.button--glass:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.6)}
.button--glass .button__arrow{font-size:18px}.button--gold:hover{background:var(--gold-light)}.button--outline{color:var(--gold-light)}.button--outline:hover{background:rgba(233,206,122,.15)}.button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}.button__arrow{font-size:16px}.galeri{background:linear-gradient(180deg,#0A3527,#050F0B)}.gallery-grid{display:grid;grid-template-columns:repeat(2,1fr);grid-auto-rows:auto;gap:9px;max-width:900px;margin:auto}.gallery-item{margin:0;cursor:zoom-in;border:1px solid var(--gold);padding:4px;min-height:0;background:#050F0B}.gallery-item--tall{grid-row:span 2}.gallery-item--wide{grid-column:span 2}.gallery-art{position:relative;height:100%;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(245,230,184,.42);color:rgba(250,246,238,.72);font-size:9px;letter-spacing:.2em}.gallery-art:before,.gallery-art:after{content:"";position:absolute;border:1px solid rgba(245,230,184,.3);transform:rotate(36deg);width:80px;height:150%;}.gallery-art:before{left:17%;top:-25%}.gallery-art:after{right:17%;bottom:-25%;transform:rotate(-36deg)}.gallery-art span{position:relative;z-index:1;border:1px solid rgba(245,230,184,.5);padding:5px 8px}.art-1{background:radial-gradient(circle at 45% 25%,#D4AF5A 0 4%,transparent 4.8%),linear-gradient(145deg,#0A3527,#175239 50%,#0E3B2A)}.art-2{background:radial-gradient(circle at 68% 44%,#E9CE7A 0 7%,transparent 7.6%),linear-gradient(120deg,#0E3B2A,#D4AF5A 50%,#0A3527)}.art-3{background:linear-gradient(155deg,#0A3527,#2A7A55 42%,#0E3B2A 43% 57%,#0A3527)}.art-4{background:radial-gradient(ellipse at 30% 70%,#0E3B2A 0 10%,transparent 10.7%),linear-gradient(40deg,#0A3527,#2A7A55)}.art-5{background:linear-gradient(180deg,#0A3527,#175239 50%,#0E3B2A);}.art-6{background:radial-gradient(circle at 45% 41%,#E9CE7A 0 5%,transparent 5.8%),linear-gradient(140deg,#0E3B2A,#0A3527)}.asset-note{margin:20px auto 0;color:rgba(250,246,238,.43);font:italic 13px var(--serif);text-align:center}.cerita{background:#0A3527}.timeline{position:relative;max-width:780px;margin:auto;padding-left:43px}.timeline:before{content:"";position:absolute;left:15px;top:5px;bottom:3px;width:1px;background:linear-gradient(var(--gold),rgba(233,206,122,.1))}.timeline-item{position:relative;display:grid;grid-template-columns:1fr;margin-bottom:34px}.timeline-marker{position:absolute;left:-43px;top:0;width:31px;height:50px;padding:4px;background:var(--wine-deep);border:1px solid var(--gold);border-radius:50%;display:grid;place-items:center}.timeline-marker img{width:26px;height:26px;object-fit:contain}.timeline-item__label{margin:0}.timeline-item h3{margin:4px 0 5px;color:var(--gold-light);font:500 25px/1.2 var(--serif)}.timeline-item p:last-child{margin:0;color:var(--muted);font:17px/1.45 var(--serif)}.rsvp{background:radial-gradient(circle at 10% 20%,rgba(233,206,122,.18),transparent 25%),#0A3527}.rsvp__panel{max-width:760px;margin:auto;padding:40px 20px;border:1px solid var(--gold);background:rgba(10,53,39,.6)}.rsvp .section-heading{margin-bottom:25px}.rsvp-form{max-width:510px;margin:auto;display:grid;gap:15px}.rsvp-form label,.rsvp-form legend{display:grid;gap:6px;color:var(--gold);font-size:10px;letter-spacing:.12em;text-transform:uppercase}.rsvp-form input:not([type=radio]),.rsvp-form select,.rsvp-form textarea{width:100%;border:1px solid rgba(233,206,122,.45);border-radius:0;padding:12px 13px;outline:none;background:rgba(250,246,238,.07);color:var(--cream);font:15px var(--serif)}.rsvp-form input:focus,.rsvp-form select:focus,.rsvp-form textarea:focus{border-color:var(--gold)}.rsvp-form option{color:var(--ink)}.rsvp-form fieldset{display:flex;gap:14px;border:0;padding:0;margin:0}.rsvp-form legend{margin-bottom:5px}.choice{display:flex!important;display:flex;grid-template-columns:none!important;align-items:center;gap:7px!important;color:var(--cream)!important;font:13px var(--serif)!important;letter-spacing:0!important;text-transform:none!important}.choice input{accent-color:var(--gold)}.form-status{margin:0;min-height:22px;color:var(--gold-light);font-size:12px}.wishes{border-top:1px solid rgba(233,206,122,.24);margin-top:30px;padding-top:20px;display:grid;gap:12px}.wishes__empty{margin:0;color:var(--muted);text-align:center;font:16px var(--serif)}.wish{border-left:2px solid var(--gold);padding:6px 12px;background:rgba(250,246,238,.04)}.wish strong{color:var(--gold-light);font:600 14px var(--serif)}.wish p{margin:1px 0 0;color:var(--muted);font:15px var(--serif)}.wish small{color:rgba(250,246,238,.42);font-size:9px}.footer{padding-bottom:130px;min-height:440px;text-align:center;background:linear-gradient(180deg,#050F0B,#050F0B)}.footer__ornament{width:150px;height:192px;margin:0 auto 20px;opacity:1;animation:ornament-sway 7s ease-in-out infinite}.footer__ornament img{width:100%;height:100%}.footer__message{max-width:500px;margin:22px auto;color:var(--muted);font:19px/1.45 var(--serif)}.footer__salutation{color:var(--cream);font:italic 18px var(--serif)}.footer__couple{margin:35px 0 15px;color:#FFF8E7;font:700 clamp(34px,9vw,52px)/1.25 var(--jawa);letter-spacing:.03em;text-shadow:0 2px 4px rgba(0,0,0,.7),0 0 26px rgba(233,206,122,.4)}.watermark{color:rgba(250,246,238,.24);font-size:9px;letter-spacing:.15em}.music-toggle{position:fixed;right:16px;top:15px;z-index:30;display:flex;align-items:center;gap:7px;border:1px solid rgba(233,206,122,.6);padding:7px 10px;background:rgba(5,15,11,.84);color:var(--gold-light);font-size:9px;letter-spacing:.08em;cursor:pointer;backdrop-filter:blur(8px)}.music-toggle__disc{display:grid;place-items:center;width:21px;height:21px;border:1px solid var(--gold);border-radius:50%;font-size:13px}.music-toggle.is-playing .music-toggle__disc{animation:spin 2.2s linear infinite}.bottom-nav{position:fixed;z-index:25;left:50%;bottom:max(12px,env(safe-area-inset-bottom));transform:translateX(-50%);width:min(calc(100% - 24px),580px);display:flex;justify-content:space-around;padding:7px 5px;background:rgba(5,15,11,.9);border:1px solid rgba(233,206,122,.42);box-shadow:0 8px 28px rgba(0,0,0,.4);backdrop-filter:blur(12px)}.bottom-nav a{min-width:48px;color:rgba(250,246,238,.62);text-align:center;text-decoration:none;font-size:8px;letter-spacing:.03em}.bottom-nav a span{display:block;color:var(--gold);font-size:17px;line-height:18px}.bottom-nav a:hover{color:var(--gold-light)}.lightbox{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:42px 24px 70px;background:rgba(5,15,11,.96)}.lightbox[hidden]{display:none}.lightbox__art{width:min(100%,520px);height:min(70vh,600px);border:1px solid var(--gold);padding:8px}.lightbox__art .gallery-art{width:100%;height:100%}.lightbox__close{position:absolute;right:18px;top:12px;border:0;background:none;color:var(--gold-light);font-size:38px;line-height:1;cursor:pointer}.lightbox p{position:absolute;bottom:25px;margin:0;color:var(--cream);font:italic 19px var(--serif)}.reveal{opacity:0;transform:translateY(24px);transition:opacity .85s ease,transform .85s ease}.reveal--left{transform:translateX(-24px)}.reveal--right{transform:translateX(24px)}.reveal.is-visible{opacity:1;transform:none}@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes scrollline{0%,100%{opacity:.35;transform:scaleY(.6);transform-origin:top}50%{opacity:1;transform:scaleY(1);transform-origin:top}}@keyframes spin{to{transform:rotate(360deg)}}@media(min-width:700px){.section-pad{padding:135px 34px}.couple-grid{grid-template-columns:1fr 90px 1fr}.event-grid{grid-template-columns:1fr 1fr}.hero__photo{min-height:440px}.gallery-grid{grid-auto-rows:190px}.rsvp__panel{padding:58px 60px}.bottom-nav{bottom:18px}}@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}}@media(max-width:380px){.section-pad{padding-left:16px;padding-right:16px}.timer{gap:2px}.timer__unit{min-width:50px}.timer i{font-size:17px}.arabic{font-size:25px}.bottom-nav{width:calc(100% - 12px)}}

body.portal-open{overflow:hidden!important;position:fixed!important;top:0;left:0;width:100%;height:100dvh;overscroll-behavior:none}body.portal-open .portal{touch-action:none}

/* Portal content: semua elemen fade-in lalu animasi loop — tanpa terkecuali */
.portal__content>*{opacity:0;animation:portal-in .9s cubic-bezier(.22,.9,.3,1.2) forwards,portal-float 5s ease-in-out infinite}
.portal__content>.eyebrow{animation-delay:.15s,1.2s}
.portal__content>h1{animation-delay:.35s,1.4s}
.portal__divider{animation-delay:.55s,1.6s!important;display:block;margin:6px auto;width:min(58vw,260px);height:auto}
.portal__content>.portal__to{animation-delay:.75s,1.8s}
.portal__content>.portal__date{animation-delay:.95s,2s}
.portal__content>.portal__button{animation-delay:1.15s,2.2s}
.portal__content>.portal__hint{animation-delay:1.35s,2.4s}
.portal__sugeng{animation:none!important}
@keyframes portal-in{from{opacity:0;transform:translateY(26px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes portal-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
/* Keterbacaan teks portal di atas emerald */


.portal__date{color:var(--gold-light)!important;text-shadow:0 1px 3px rgba(0,0,0,.65),0 2px 10px rgba(0,0,0,.5)}
.portal__hint{color:rgba(255,248,231,.75)!important;text-shadow:0 1px 4px rgba(0,0,0,.6)}


.portal__content{position:relative;z-index:40;max-height:100dvh;display:grid;align-content:center;gap:5px;justify-items:center;isolation:isolate}

.section-heading h2::after{content:"";display:block;width:min(58vw,210px);height:26px;margin:10px auto 0;background:url("assets/canva-premium/divider-elegan-emas.png") center/contain no-repeat;opacity:.92;animation:float 6s ease-in-out infinite}

@keyframes ornament-sway{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-8px)}}

.mist-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:url("assets/scene/bg-emerald-nohouse.webp") center/cover;opacity:.07;pointer-events:none}

/* ===== HERO SCENE — layer ala referensi: bunga, tanah, rumah, pohon bergerak ===== */
.hero__scene{position:absolute;inset:0;pointer-events:none;z-index:0}
.hero__layer{position:absolute;inset:0}
.hero__bg{background:linear-gradient(rgba(5,15,11,.42),rgba(5,15,11,.62)),url("assets/scene/bg-emerald-withhouse.webp") center 28%/cover;animation:hero-fade 1.8s ease both}
.hero__tree{background:url("assets/scene/pohon-emas.webp") center/contain no-repeat;opacity:0;transform-origin:bottom center;will-change:transform}
.hero__tree--l{left:-9%;right:auto;width:min(46vw,230px);top:14%;bottom:auto;height:62%;animation:hero-fade 1.6s .35s ease both,hero-tree-sway 8.5s ease-in-out 2.2s infinite}
.hero__tree--r{right:-9%;left:auto;width:min(42vw,210px);top:19%;bottom:auto;height:58%;animation:hero-fade 1.6s .55s ease both,hero-tree-sway 10.5s ease-in-out 2.6s infinite reverse}
.hero__birds{overflow:hidden}
.hbird{position:absolute;opacity:0;animation:bird-fly linear infinite}
.hbird svg{width:100%;height:auto;display:block;stroke:#141414;stroke-width:2.4;fill:none;stroke-linecap:round;animation:bird-flap .55s ease-in-out infinite alternate}
.hb1{width:24px;top:10%;animation-name:fly-ltr;animation-duration:17s;animation-delay:1s}
.hb2{width:18px;top:17%;animation-name:fly-rtl;animation-duration:22s;animation-delay:2s}
.hb3{width:27px;top:6%;animation-name:fly-ltr;animation-duration:20s;animation-delay:3.2s}
.hb4{width:20px;top:23%;animation-name:fly-rtl;animation-duration:16s;animation-delay:1.6s}
.hero__ground{background:radial-gradient(ellipse 90% 26% at 50% 100%,rgba(4,12,9,.55),transparent 70%);animation:hero-fade 1.6s .5s ease both}
.hero__fl{background:url("assets/scene/bunga-emerald.webp") center/contain no-repeat;opacity:0;will-change:transform,opacity;filter:saturate(1.05)}
.hero__fl--1{left:-10%;width:min(52vw,260px);height:34%;bottom:-4%;animation:hero-fade 1.4s .7s ease both,flower-shaky 7s ease-in-out 2.2s infinite}
.hero__fl--2{right:-10%;width:min(56vw,280px);height:36%;bottom:-5%;animation:hero-fade 1.4s .85s ease both,flower-shaky 8s ease-in-out 2.5s infinite reverse}
.hero__fl--3{left:16%;width:min(38vw,190px);height:26%;bottom:-6%;animation:hero-fade 1.4s 1s ease both,flower-shaky 7.5s ease-in-out 2.8s infinite}
.hero__fl--4{right:14%;width:min(36vw,180px);height:25%;bottom:-7%;animation:hero-fade 1.4s 1.1s ease both,flower-shaky 9s ease-in-out 3s infinite reverse}
@keyframes hero-fade{from{opacity:0}to{opacity:1}}
@keyframes hero-tree-sway{0%,100%{transform:rotate(-1.4deg)}50%{transform:rotate(1.4deg)}}
/* ===== BINGKAI KHAS JAWA — kayu ukir gelap + emas ===== */
.hero__content{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;max-width:560px}
.hero__eyebrow{margin:0 0 18px;color:var(--gold-light);font:600 clamp(11px,3vw,14px)/1.5 var(--sans);letter-spacing:.42em;text-indent:.42em;text-shadow:0 2px 6px rgba(0,0,0,.8)}
.jawa-frame{position:relative;width:min(92vw,640px);aspect-ratio:3/2;padding:16px;background:linear-gradient(150deg,#4A2E12 0%,#2A1A0C 45%,#160D05 100%);border:1px solid rgba(233,206,122,.55);box-shadow:0 24px 70px rgba(0,0,0,.55),inset 0 0 0 5px rgba(0,0,0,.45),inset 0 0 0 6px rgba(233,206,122,.4);animation:jawa-frame-in 1.2s .4s cubic-bezier(.2,.7,.2,1) both}
@keyframes jawa-frame-in{from{opacity:0;transform:translateY(30px) scale(.96)}to{opacity:1;transform:none}}
.jawa-frame__corner{position:absolute;width:78px;height:78px;background:url("assets/canva-premium/sudut-flourish-emas.png") center/contain no-repeat;z-index:3;pointer-events:none}
.jf-tl{top:-12px;left:-12px}
.jf-tr{top:-12px;right:-12px;transform:scaleX(-1)}
.jf-bl{bottom:-12px;left:-12px;transform:scaleY(-1)}
.jf-br{bottom:-12px;right:-12px;transform:scale(-1,-1)}
.jawa-frame__carve{position:absolute;left:50%;width:160px;height:32px;background:url("assets/canva-premium/ukiran-jawa-emas.png") center/contain no-repeat;z-index:3;pointer-events:none}
.jf-carve-t{top:-16px;transform:translateX(-50%)}
.jf-carve-b{bottom:-16px;transform:translateX(-50%) scaleY(-1)}
.hero__photo{position:relative;width:100%;height:100%;overflow:hidden;background:linear-gradient(145deg,#0E3B2A,#1A5C42 48%,#0A3527)}
.hero__date{margin:14px 0 4px;color:var(--gold-light);font:600 clamp(13px,3.6vw,17px)/1.5 var(--serif);letter-spacing:.14em;text-shadow:0 2px 6px rgba(0,0,0,.8)}

/* --- Cleanup 27 Okt 2026: foto asli, proporsi benar --- */
.hero__photo{min-height:0;aspect-ratio:3/2}
.hero__photo img{width:100%;height:100%;object-fit:cover;display:block}
.profile-card__photo{background:none}
.profile-card__photo:before,.profile-card__photo:after{display:none}
.profile-card__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.gallery-item{aspect-ratio:1/1}
.gallery-art img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.gallery-art:before,.gallery-art:after{display:none}

/* === motion.css === */
/* === SISTEM ANIMASI KREATIF — Undangan Sultan & Ajeng === */
/* Emerald + Gold, premium feel. Hormati prefers-reduced-motion. */

/* ---------- 17. SCENE: multi-layer emerald z-index bertumpuk ---------- */
.scene{position:absolute;inset:0;overflow:hidden;pointer-events:none}
/* z1: background emerald full-bleed */
.scene__cover{position:absolute;inset:0;z-index:1}
.scene__cover picture{position:absolute;inset:0;width:100%;height:100%}
.scene__cover img,.scene__house-reveal img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
/* z2: burung-burung hitam kecil beterbangan */
.scene__birds{position:absolute;inset:0;z-index:2;overflow:hidden}
.bird{position:absolute;top:0;left:0;opacity:0;animation:bird-fly linear infinite}
.bird svg{width:100%;height:auto;display:block}
.bird svg path{stroke:#1a1a1a;stroke-width:2.4;fill:none;stroke-linecap:round}
.bird svg{animation:bird-flap .5s ease-in-out infinite alternate}
@keyframes bird-flap{from{transform:scaleY(1)}to{transform:scaleY(.55)}}
.b1{width:26px;top:12%;animation-name:fly-ltr;animation-duration:16s;animation-delay:.3s}
.b2{width:20px;top:20%;animation-name:fly-rtl;animation-duration:21s;animation-delay:1s}
.b3{width:30px;top:8%;animation-name:fly-ltr;animation-duration:19s;animation-delay:.6s}
.b4{width:18px;top:26%;animation-name:fly-rtl;animation-duration:15s;animation-delay:.6s}
.b5{width:24px;top:16%;animation-name:fly-ltr;animation-duration:23s;animation-delay:3s}
.b6{width:22px;top:30%;animation-name:fly-rtl;animation-duration:18s;animation-delay:2.4s}
@keyframes fly-ltr{0%{transform:translate(-8vw,0);opacity:0}8%{opacity:.9}50%{transform:translate(50vw,-14px)}92%{opacity:.9}100%{transform:translate(108vw,6px);opacity:0}}
@keyframes fly-rtl{0%{transform:translate(108vw,0) scaleX(-1);opacity:0}8%{opacity:.9}50%{transform:translate(50vw,12px) scaleX(-1)}92%{opacity:.9}100%{transform:translate(-8vw,-8px) scaleX(-1);opacity:0}}
/* z3: rumah joglo — fade in lalu goyang halus */
/* z3: rumah MENYATU — dilukis dalam background, muncul dari kabut */
.scene__house-reveal{position:absolute;inset:0;z-index:3;opacity:0;-webkit-mask-image:radial-gradient(ellipse 64% 60% at 50% 56%,#000 50%,transparent 78%);mask-image:radial-gradient(ellipse 64% 60% at 50% 56%,#000 50%,transparent 78%);animation:house-materialize 1.8s ease .3s forwards,house-gentle 10s ease-in-out 2.4s infinite;will-change:opacity,transform}
@keyframes house-gentle{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
.scene__house-reveal picture{position:absolute;inset:0;width:100%;height:100%}
@keyframes house-materialize{from{opacity:0}to{opacity:1}}
.t2 img{transform:scaleX(-1)}
/* z2: POHON ASLI background — digerakkan (mask sisi kiri & kanan) */
.scene__bgtrees{position:absolute;inset:-3%;z-index:2;animation:bgtrees-sway 9s ease-in-out 1s infinite;transform-origin:50% 92%;will-change:transform;-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 36%,transparent 64%,#000 78%,#000 100%);mask-image:linear-gradient(90deg,#000 0%,#000 22%,transparent 36%,transparent 64%,#000 78%,#000 100%)}
.scene__bgtrees img{width:100%;height:100%;object-fit:cover;transform:scale(1.06)}
@keyframes bgtrees-sway{0%,100%{transform:rotate(-.8deg)}50%{transform:rotate(.8deg)}}
/* z4-z11: bunga — SETENGAH LAYAR BAWAH saja, lebih kecil, ramai di bawah */
.scene__float{position:absolute;opacity:0;animation:float-fadein 1.2s ease forwards,float-shaky 7s ease-in-out infinite;contain:layout style;will-change:transform,opacity}
.scene__float img{width:100%;height:auto;display:block}
.f1{z-index:4;top:52%;left:-8%;width:min(34vw,170px);animation-delay:.1s,1.6s}
.f2{z-index:5;top:55%;right:-8%;width:min(36vw,180px);animation-delay:.25s,1.8s}
.f2 img{transform:scaleX(-1)}
.f3{z-index:6;top:62%;left:2%;width:min(30vw,150px);animation-delay:.4s,2s}
.f4{z-index:7;top:64%;right:0%;width:min(32vw,160px);animation-delay:.55s,2.2s}
.f4 img{transform:scaleX(-1)}
.f5{z-index:8;bottom:-4%;left:-8%;width:min(36vw,180px);animation-delay:.7s,2.4s}
.f6{z-index:9;bottom:-4%;right:-8%;width:min(38vw,190px);animation-delay:.85s,2.6s}
.f6 img{transform:scaleX(-1)}
.f7{z-index:10;bottom:-6%;left:24%;width:min(32vw,160px);animation-delay:1s,2.8s}
.f8{z-index:11;bottom:-5%;right:22%;width:min(30vw,150px);animation-delay:1.15s,3s}
.f8 img{transform:scaleX(-1)}
@keyframes float-fadein{from{opacity:0;transform:translateY(30px) scale(.92)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes float-shaky{0%,100%{rotate:-1.5deg;translate:0 0}25%{rotate:1.2deg;translate:4px -6px}50%{rotate:-1deg;translate:-3px 4px}75%{rotate:1.5deg;translate:3px -3px}}
/* z12: overlay agar teks terbaca */
.scene::after{content:"";position:absolute;inset:0;z-index:12;background:linear-gradient(180deg,rgba(6,40,28,.62) 0%,rgba(6,40,28,.25) 26%,transparent 42%,transparent 58%,rgba(6,40,28,.55) 100%);pointer-events:none}

/* ---------- 1. PORTAL: layout vertikal rapi ---------- */
.portal{perspective:1200px;overflow:hidden}
.portal__content{position:relative;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;max-height:100svh;overflow-y:auto;padding:24px 20px;transition:opacity .6s ease}
.portal.opening .portal__content{opacity:0;pointer-events:none}
.portal__divider{width:min(52vw,200px);height:auto;margin:0}
.portal__sugeng{margin:6px 0 0;font-size:clamp(1.2rem,4.5vw,1.6rem);color:var(--gold-light);letter-spacing:.1em}
/* Pastikan tombol selalu bisa diklik */
.portal__button{position:relative;z-index:20;cursor:pointer;min-height:48px;padding:14px 28px;font-size:11px}
/* 2 lapis animasi wayang: SEMBUNYI total sebelum tombol diklik */
.portal__layers{position:absolute;inset:0;transform-style:preserve-3d;pointer-events:none;opacity:0;visibility:hidden;z-index:5}
.portal.opening .portal__layers{opacity:1;visibility:visible}
.portal__layer{position:absolute;inset:-5%;display:flex;align-items:center;justify-content:center;transform-origin:center;transition:transform 1.6s cubic-bezier(.7,0,.3,1),opacity 1.6s ease;backface-visibility:hidden}
.portal__layer img{width:100%;height:100%;object-fit:contain;opacity:.95}
.portal__layer:nth-child(1){z-index:2}
.portal__layer:nth-child(2){z-index:1}
/* saat dibuka: lapis 1 ke kanan, lapis 2 ke kiri */
.portal.opening .portal__layer:nth-child(1){transform:rotateY(72deg) translateX(60%);opacity:0}
.portal.opening .portal__layer:nth-child(2){transform:rotateY(-72deg) translateX(-60%);opacity:0;transition-delay:.25s}
/* saat dibuka: 2 lapis terbuka bergantian (CSS di bagian portal) */

/* ---------- 2. KABUT BERLAPIS (hanya saat opening) ---------- */
.fog{position:absolute;inset:-20%;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 1.2s}
.fog--a{background:radial-gradient(ellipse 60% 35% at 30% 60%,rgba(233,206,122,.14),transparent 70%),radial-gradient(ellipse 50% 30% at 70% 40%,rgba(250,246,238,.1),transparent 70%)}
.fog--b{background:radial-gradient(ellipse 45% 30% at 60% 70%,rgba(233,206,122,.1),transparent 70%)}
.portal.opening .fog{opacity:1;visibility:visible}
.portal.opening .fog--a{animation:fog-drift-a 7s ease-in-out infinite alternate}
.portal.opening .fog--b{animation:fog-drift-b 9s ease-in-out infinite alternate}
@keyframes fog-drift-a{from{transform:translateX(-6%) scale(1)}to{transform:translateX(6%) scale(1.08)}}
@keyframes fog-drift-b{from{transform:translateX(5%) scale(1.05)}to{transform:translateX(-5%) scale(1)}}

/* ---------- 3. TEKS HURUF-PER-HURUF ---------- */
.char-reveal{display:inline-block;opacity:0;filter:blur(8px);transform:translateY(.6em) rotate(4deg);animation:char-in .9s cubic-bezier(.2,.7,.3,1.2) forwards;animation-delay:var(--cd,0s)}
@keyframes char-in{to{opacity:1;filter:blur(0);transform:none}}

/* ---------- 4. SHIMMER SWEEP (kilau emas menyapu) ---------- */
.shimmer{position:relative;overflow:hidden}
.shimmer::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 40%,rgba(233,206,122,.35) 50%,transparent 60%);transform:translateX(-120%);animation:shimmer-sweep 4.5s ease-in-out infinite}
@keyframes shimmer-sweep{0%,55%{transform:translateX(-120%)}90%,100%{transform:translateX(120%)}}

/* ---------- 5. PARTIKEL DEBU EMAS (canvas) ---------- */
#goldDust{position:fixed;inset:0;pointer-events:none;z-index:5;opacity:.8}

/* ---------- 6. PARALLAX 3D IKUTI KURSOR ---------- */
.tilt{transform-style:preserve-3d;transition:transform .35s ease-out;will-change:transform}
.tilt__inner{transform:translateZ(30px)}

/* ---------- 7. HALO BERNAPAS ---------- */
.halo-breathe{position:relative}
.halo-breathe::before,.halo-breathe::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(233,206,122,.4);animation:halo-expand 3.5s ease-out infinite}
.halo-breathe::after{animation-delay:1.75s}
@keyframes halo-expand{from{transform:scale(.8);opacity:.8}to{transform:scale(1.6);opacity:0}}

/* ---------- 8. ENTRANCE CASCADE (musim semi) ---------- */
.cascade{opacity:0;transform:translateY(50px) scale(.92)}
.cascade.in{animation:cascade-in 1.1s cubic-bezier(.34,1.4,.4,1) forwards;animation-delay:var(--cd,0s)}
@keyframes cascade-in{to{opacity:1;transform:none}}

/* ---------- 9. KEN BURNS (zoom lambat) ---------- */
.kenburns{animation:kenburns 22s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1)}to{transform:scale(1.12)}}

/* ---------- 10. DIVIDER MENGGAMBAR DIRI ---------- */
.draw-line{stroke-dasharray:600;stroke-dashoffset:600;animation:draw-on 2.2s ease forwards;animation-delay:var(--cd,0s)}
@keyframes draw-on{to{stroke-dashoffset:0}}

/* ---------- 11. NAPAS ORGANIK (skala + rotasi halus) ---------- */
.organic{animation:organic 7s ease-in-out infinite}
@keyframes organic{0%,100%{transform:scale(1) rotate(0deg)}33%{transform:scale(1.03) rotate(1.2deg)}66%{transform:scale(.99) rotate(-1deg)}}

/* ---------- 12. CAHAYA BERPUTAR LAMBAT (hanya saat opening) ---------- */
.light-rays{position:absolute;inset:-40%;background:conic-gradient(from 0deg,transparent 0deg,rgba(233,206,122,.06) 12deg,transparent 24deg,transparent 60deg,rgba(233,206,122,.05) 72deg,transparent 84deg);animation:rays-spin 40s linear infinite;pointer-events:none;opacity:0;visibility:hidden;transition:opacity 1s ease}
.portal.opening .light-rays{opacity:1;visibility:visible}
@keyframes rays-spin{to{transform:rotate(360deg)}}

/* ---------- 13. TEKS MELAYANG MASUK DARI KABUT ---------- */
.fog-text{opacity:0;filter:blur(12px);transform:scale(1.06);transition:opacity 2.2s ease,filter 2.2s ease,transform 2.2s ease}
.fog-text.in{opacity:1;filter:blur(0);transform:scale(1)}

/* ---------- 14. BOUNCE HALUS TOMBOL ---------- */
.btn-bounce{animation:btn-bounce 2.6s ease-in-out infinite}
@keyframes btn-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* ---------- 15. HOVER INTERAKTIF SEMUA SECTION ---------- */
/* Kartu: terangkat + glow emas */
.profile-card,.event-card,.geboyok-panel{transition:transform .45s cubic-bezier(.2,.7,.3,1.2),box-shadow .45s ease,border-color .45s ease}
.profile-card:hover,.event-card:hover{transform:translateY(-10px) scale(1.02);box-shadow:0 24px 60px rgba(0,0,0,.45),0 0 40px rgba(233,206,122,.18);border-color:rgba(233,206,122,.55)}
.geboyok-panel:hover{transform:translateY(-4px);box-shadow:0 18px 50px rgba(0,0,0,.4),0 0 30px rgba(233,206,122,.12)}
/* Foto: zoom + terang */
.profile-card__photo,.gallery-art{overflow:hidden}
.profile-card__photo img,.gallery-art img{transition:transform .6s cubic-bezier(.2,.7,.3,1),filter .6s ease}
.profile-card:hover .profile-card__photo img,.gallery-item:hover .gallery-art img{transform:scale(1.08);filter:brightness(1.08) saturate(1.1)}
/* Tombol: ripple + shine */
.button{position:relative;overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.button:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 12px 32px rgba(233,206,122,.35)}
.button:active{transform:translateY(0) scale(.98)}
.button::before{content:"";position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent);transform:skewX(-20deg);transition:left .6s ease}
.button:hover::before{left:130%}
/* Ornamen: membesar + berputar sedikit saat hover */
.section-ornament img,.couple-mark img,.countdown__gunungan img,.timeline-marker img{transition:transform .5s cubic-bezier(.2,.7,.3,1.3),filter .5s ease}
.section-ornament:hover img{transform:scale(1.12) rotate(3deg);filter:drop-shadow(0 0 18px rgba(233,206,122,.5))}
.couple-mark:hover img{transform:scale(1.15);filter:drop-shadow(0 0 22px rgba(233,206,122,.6))}
.timeline-marker:hover img{transform:scale(1.2) rotate(-5deg)}
/* Navigasi bawah: ikon melompat */
.bottom-nav a{transition:transform .3s ease,color .3s ease}
.bottom-nav a:hover{transform:translateY(-4px);color:var(--gold)}
.bottom-nav a:hover svg{animation:btn-bounce 1s ease infinite}
/* Countdown: angka berdenyut saat hover */
.countdown__item{transition:transform .35s ease,box-shadow .35s ease}
.countdown__item:hover{transform:scale(1.08);box-shadow:0 0 24px rgba(233,206,122,.25)}
/* Galeri: overlay info meluncur */
.gallery-item{position:relative;overflow:hidden;cursor:pointer}
.gallery-item::after{content:"Lihat";position:absolute;inset:auto 0 0 0;padding:12px;text-align:center;background:linear-gradient(transparent,rgba(5,15,11,.85));color:var(--gold);font-size:13px;letter-spacing:2px;transform:translateY(100%);transition:transform .4s ease}
.gallery-item:hover::after{transform:none}
/* Musik toggle: berputar */
.music-toggle__disc{display:inline-block;transition:transform .5s ease}
.music-toggle:hover .music-toggle__disc{transform:rotate(180deg) scale(1.2)}
.music-toggle.is-playing .music-toggle__disc{animation:rays-spin 3s linear infinite}

/* ---------- 16. RESPONSIF 4 DEVICE ---------- */
/* HP kecil: <640px */
@media(max-width:640px){
  .portal__divider{width:min(64vw,220px)}
  .portal__names{font-size:clamp(1.9rem,8vw,2.6rem)}
  .display-title{font-size:clamp(2.2rem,10vw,3rem)}
  .section-pad{padding-left:1rem;padding-right:1rem}
  .profile-card,.event-card{margin-left:.5rem;margin-right:.5rem}
  #goldDust{opacity:.5}
  .light-rays{display:none}
}
/* Tablet: 641-1024px */
@media(min-width:641px) and (max-width:1024px){
  .display-title{font-size:clamp(2.8rem,6vw,4rem)}
  .gallery-grid{grid-template-columns:repeat(2,1fr)}
  .couple-grid{grid-template-columns:repeat(2,1fr)}
}
/* Laptop: 1025-1440px */
@media(min-width:1025px) and (max-width:1440px){
  .display-title{font-size:clamp(3.2rem,5vw,4.5rem)}
  .invitation{max-width:900px;margin:0 auto}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
}
/* PC besar: >1440px */
@media(min-width:1441px){
  .display-title{font-size:clamp(3.6rem,4vw,5rem)}
  .invitation{max-width:1100px;margin:0 auto}
  .gallery-grid{grid-template-columns:repeat(3,1fr)}
  .hero__frame{max-width:1000px;margin:0 auto}
}
/* Sentuh: hover jadi tap-highlight */
@media(hover:none){
  .profile-card:active,.event-card:active{transform:scale(.98)}
  .button:active{transform:scale(.96)}
  .gallery-item::after{display:none}
}
.portal{transform:translateY(0);transition:transform 1.8s cubic-bezier(.23,1,.32,1),visibility 1.8s;overflow-y:auto}
.portal.is-hidden{opacity:1;transform:translateY(-120%);visibility:hidden;transition:transform 1.8s cubic-bezier(.23,1,.32,1),visibility 1.8s}
.portal__ornament{animation:ornament-breathe 5s ease-in-out infinite alternate}
.reveal{opacity:0;transform:translateY(6rem);transition:opacity 1.5s ease,transform 1.5s ease;transition-delay:var(--delay,0s)}
.reveal--left{transform:translateX(-6rem)}
.reveal--right{transform:translateX(6rem)}
.reveal.is-visible{opacity:1;transform:none}
.profile-card__photo,.event-card__icon{transform-origin:center bottom}
.is-visible .profile-card__photo,.is-visible .event-card__icon{animation:ornament-grow 2s cubic-bezier(.2,.65,.3,1) both}
.section-heading.is-visible h2{animation:title-arrive 1.5s ease both}
.gallery-item:nth-child(2n){--delay:.2s}.gallery-item:nth-child(3n){--delay:.4s}
.timeline-item:nth-child(2){--delay:.2s}.timeline-item:nth-child(3){--delay:.4s}
@keyframes ornament-grow{from{opacity:0;transform:scale(.15)}to{opacity:1;transform:scale(1)}}
@keyframes ornament-breathe{from{transform:rotate(-3deg) scale(1)}to{transform:rotate(0) scale(1.05)}}
@keyframes title-arrive{from{opacity:0;transform:translateY(25px);filter:blur(5px)}to{opacity:1;transform:none;filter:blur(0)}}
.bottom-nav svg{display:block;width:21px;height:21px;stroke:var(--gold);fill:none;stroke-width:1.5;margin:0 auto 3px}
.music-toggle svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.5}
.no-js-note{color:var(--muted);font-size:11px;text-align:center}
@media(prefers-reduced-motion:reduce){.portal,.portal.is-hidden{transition:none}.reveal{opacity:1;transform:none}*,*::before,*::after{animation:none!important;transition:none!important}#goldDust{display:none}}

/* Mode lite: HP RAM kecil / CPU lemah — matikan animasi non-esensial */
body.lite .scene__bgtrees{display:none}
body.lite .scene__float{animation:flower-in 1.4s ease forwards}
body.lite .scene__house-reveal{animation:house-materialize 1.8s ease .3s forwards}
body.lite .portal__content>*{animation:portal-in .9s cubic-bezier(.2,.7,.2,1) backwards}

/* === portal-v13.css === */
/* Preview v4 — TAMBAH KE BELAKANG, DI LEVEL LAYER.
   Kesalahan v2/v3: z-index bunga diatur per-bunga saja, sementara .scene
   tidak punya z-index, jadi bunga masih bisa bersaing dengan konten.
   v4: SELURUH .scene dipaksa ke z 1 (paling belakang), konten portal ke
   z 30 (paling depan). Bunga/awan/kelopak di dalam scene semua z 4 —
   itu nilai paling belakang yang masih di atas rumah joglo (z 3),
   jadi bunga tetap terlihat di atas background, tapi mustahil menutupi
   konten. File ini namanya baru (v4) supaya cache CSS v2/v3 tidak dipakai lagi. */
.scene{position:absolute;inset:0;z-index:1;pointer-events:none}
.fog,.light-rays,.portal__layers{position:absolute;z-index:2;pointer-events:none}
.portal__content{position:relative;z-index:30}
.portal__content>*{position:relative;z-index:30}
/* Bunga bawah: di belakang konten, mengintip dari tepi bawah saja */
.scene__float.f5{top:auto;bottom:-10%;left:-4%;width:min(34vw,170px);z-index:4}
.scene__float.f6{top:auto;bottom:-10%;right:-4%;width:min(36vw,180px);z-index:4}
.scene__float.f6 img{transform:scaleX(-1)}
.scene__float.f7{top:auto;bottom:-14%;left:20%;width:min(30vw,150px);z-index:4}
.scene__float.f8{top:auto;bottom:-14%;right:20%;width:min(30vw,150px);z-index:4}
.scene__float.f8 img{transform:scaleX(-1)}
.scene__float.f9{top:auto;bottom:-8%;left:6%;width:min(36vw,180px);z-index:4;animation-delay:.7s,2.4s}
.scene__float.f10{top:auto;bottom:-16%;left:30%;width:min(28vw,140px);z-index:4;animation-delay:.9s,2.6s}
.scene__float.f11{top:auto;bottom:-8%;right:6%;width:min(38vw,190px);z-index:4;animation-delay:1.1s,2.8s}
.scene__float.f11 img{transform:scaleX(-1)}
.scene__float.f12{top:auto;bottom:-16%;right:30%;width:min(28vw,140px);z-index:4;animation-delay:1.3s,3s}
.scene__float.f12 img{transform:scaleX(-1)}
.scene__float.f13{top:auto;bottom:-18%;left:42%;width:min(30vw,150px);z-index:4;animation-delay:1.5s,3.2s}
.scene__float.f14{top:auto;bottom:-18%;right:42%;width:min(30vw,150px);z-index:4;animation-delay:1.7s,3.4s}
.scene__float.f14 img{transform:scaleX(-1)}
/* Goyang lembut di img, bukan di wrapper — tidak menabrak float-shaky */
.scene__float.f9 img,.scene__float.f11 img,.scene__float.f13 img{animation:sway-bawah 8s ease-in-out infinite alternate}
.scene__float.f10 img,.scene__float.f12 img,.scene__float.f14 img{animation:sway-bawah 7s ease-in-out infinite alternate-reverse}
@keyframes sway-bawah{from{rotate:-3deg;translate:0 0}to{rotate:4deg;translate:10px -6px}}
/* Kelopak jatuh: juga di belakang konten */
.petal{position:absolute;top:-8%;z-index:4;opacity:0;pointer-events:none;animation:petal-fall linear infinite}
.petal img{width:100%;height:auto;display:block;opacity:.7}
.petal.p1{left:8%;width:30px;animation-duration:14s;animation-delay:0s}
.petal.p2{left:24%;width:22px;animation-duration:18s;animation-delay:3s}
.petal.p3{left:46%;width:34px;animation-duration:16s;animation-delay:6s}
.petal.p4{left:62%;width:24px;animation-duration:19s;animation-delay:2s}
.petal.p5{left:78%;width:30px;animation-duration:15s;animation-delay:5s}
.petal.p6{left:90%;width:20px;animation-duration:20s;animation-delay:8s}
@keyframes petal-fall{0%{transform:translate(0,-8vh) rotate(0deg);opacity:0}10%{opacity:.8}90%{opacity:.6}100%{transform:translate(-24px,108vh) rotate(300deg);opacity:0}}
/* AWAN di bawah rumah joglo: lembut, transparan, bergerak pelan bolak-balik.
   Posisi di bawah rumah (sekitar 54-66% tinggi layar), di belakang konten,
   di atas background, supaya terlihat seperti kabut/awan di kaki rumah. */
.cloud{position:absolute;z-index:4;pointer-events:none;opacity:.55;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.75) 0%,rgba(255,255,255,.35) 45%,transparent 70%);
  filter:blur(6px);border-radius:50%;
  animation:cloud-drift ease-in-out infinite alternate}
.cloud.c1{top:54%;left:2%;width:min(60vw,280px);height:90px;animation-duration:18s}
.cloud.c2{top:60%;left:28%;width:min(70vw,340px);height:110px;opacity:.45;animation-duration:23s;animation-delay:2s}
.cloud.c3{top:66%;right:4%;width:min(55vw,260px);height:85px;animation-duration:28s;animation-delay:4s}
@keyframes cloud-drift{from{transform:translateX(-26px)}to{transform:translateX(26px)}}
@media(prefers-reduced-motion:reduce){.scene__float.f9 img,.scene__float.f10 img,.scene__float.f11 img,.scene__float.f12 img,.scene__float.f13 img,.scene__float.f14 img,.petal,.cloud{animation:none!important}}

/* ===== PORTAL v5 — LOCKED DESIGN, hanya perubahan yang diminta JURAGAN 30 Okt =====
   LOCKED: layout portal, warna emerald-emas-ivory, font nama Sultan & Ajeng (Jawa Palsu),
   rumah joglo, gunungan, bunga bawah di belakang, awan di bawah rumah.
   JANGAN ubah lagi tanpa perintah eksplisit JURAGAN. */

/* 1. FONT "UNDANGAN PERNIKAHAN": Aboreto — Google Fonts, huruf kapital saja,
   gaya Renaissance awal, tapered strokes, BUKAN font pasaran (bukan Poppins/
   Montserrat/Cinzel/Great Vibes). Berbeda total dari font nama (Jawa Palsu,
   gaya tulisan tangan Jawa). Hanya untuk eyebrow di portal, BUKAN untuk
   eyebrow di section lain. */
.portal__content > .eyebrow{
  font-family:'Aboreto','Cinzel Decorative',Georgia,serif !important;
  font-weight:400 !important;
  font-size:clamp(13px,3.6vw,19px) !important;
  letter-spacing:.34em !important;
  text-indent:.34em;
  line-height:1.4;
  color:var(--gold-light);
}

/* 2. KUNCI SCROLL TAMPILAN AWAL.
   Penyebab scroll sebelumnya: .portal dan .portal__content di motion.css
   punya overflow-y:auto, jadi portal sendiri bisa di-scroll walau body
   sudah dikunci oleh class portal-open di app.js.
   v5: paksa overflow hidden di portal + kontennya, touch-action none,
   dan padatkan konten supaya muat 100dvh tanpa scroll. */
.portal{overflow:hidden !important;overflow-y:hidden !important;height:100dvh !important;max-height:100dvh !important;touch-action:none !important}
.portal__content{overflow:hidden !important;overflow-y:hidden !important;max-height:100dvh !important;height:100dvh !important;justify-content:center !important;gap:6px !important;padding:14px 20px !important;touch-action:none !important}
body.portal-open{overflow:hidden !important;position:fixed !important;top:0 !important;left:0 !important;width:100% !important;height:100dvh !important;overscroll-behavior:none !important}
/* Padatkan konten portal supaya tombol tidak terpotong di bawah layar */
.portal h1{font-size:clamp(50px,15vw,92px) !important}
.portal__divider{width:min(48vw,200px) !important}
.portal__to{padding:8px 20px !important}
.portal__button{margin-top:10px !important;min-height:44px !important}
.portal__hint{margin-top:8px !important}
.portal__sugeng{margin-top:4px !important}

/* 3. BUNGA JATUH BUNDAR: petal sekarang pakai buket-bunga.webp (bundar,
   hibiscus + kamboja, sudah ada di assets) — bukan lagi bunga-emerald
   yang memanjang. Ukuran diperbesar sedikit supaya bentuk bundarnya terbaca. */
.petal img{opacity:.9}
.petal.p1{width:44px}.petal.p2{width:36px}.petal.p3{width:50px}
.petal.p4{width:38px}.petal.p5{width:46px}.petal.p6{width:34px}

/* 4. BURUNG BANYAK, SILIH BERGANTI, KEPAKAN ASLI.
   Burung lama: 6 ekor, satu garis lengkung, kepak hanya scaleY seluruh badan.
   v5: 14 ekor, dua sayap terpisah (kiri/kanan) yang berputar berlawanan
   dari poros badan, durasi 12-26 detik, arah kiri-kanan bergantian,
   delay 0-8 detik, ukuran 16-32px, posisi atas 6-38%. */
.bird svg{animation:none !important}
.bird svg .wing-l,.bird svg .wing-r{transform-box:fill-box;transform-origin:center}
.bird svg .wing-l{animation:wing-flap-l .45s ease-in-out infinite alternate}
.bird svg .wing-r{animation:wing-flap-r .45s ease-in-out infinite alternate}
@keyframes wing-flap-l{from{transform:rotate(-18deg)}to{transform:rotate(22deg)}}
@keyframes wing-flap-r{from{transform:rotate(18deg)}to{transform:rotate(-22deg)}}
.bird.b7{width:28px;top:10%;animation-name:fly-ltr;animation-duration:17s;animation-delay:1.5s}
.bird.b8{width:18px;top:24%;animation-name:fly-rtl;animation-duration:20s;animation-delay:2.5s}
.bird.b9{width:32px;top:6%;animation-name:fly-ltr;animation-duration:14s;animation-delay:4s}
.bird.b10{width:20px;top:32%;animation-name:fly-rtl;animation-duration:24s;animation-delay:0.5s}
.bird.b11{width:26px;top:18%;animation-name:fly-ltr;animation-duration:19s;animation-delay:6s}
.bird.b12{width:16px;top:28%;animation-name:fly-rtl;animation-duration:15s;animation-delay:3.5s}
.bird.b13{width:30px;top:14%;animation-name:fly-ltr;animation-duration:22s;animation-delay:7s}
.bird.b14{width:22px;top:36%;animation-name:fly-rtl;animation-duration:18s;animation-delay:5s}

/* ===== PORTAL v6 — perubahan 30 Okt 09:47 WIB, desain portal tetap DIKUNCI =====
   Hanya 3 hal yang diubah dari v5, sesuai perintah JURAGAN. Sisanya LOCKED. */

/* 1. "UNDANGAN PERNIKAHAN" HARUS BOLD & JELAS.
   Aboreto hanya punya weight 400, jadi bold dibuat dengan: font-weight 700
   (synthetic bold browser), -webkit-text-stroke tipis emas, ukuran diperbesar,
   dan shadow berlapis supaya hurufnya tebal dan terbaca jelas di atas
   background emerald gelap. Font tetap Aboreto, bukan font pasaran. */
.portal__content > .eyebrow{
  font-family:'Aboreto','Cinzel Decorative',Georgia,serif !important;
  font-weight:700 !important;
  font-size:clamp(20px,5.8vw,30px) !important;
  letter-spacing:.18em !important;
  text-indent:.18em;
  -webkit-text-stroke:.6px var(--gold-light);
  text-shadow:0 2px 4px rgba(0,0,0,.9),0 0 18px rgba(233,206,122,.55),0 0 34px rgba(233,206,122,.3) !important;
  color:#FFF8E7 !important;
}

/* 2. BUNGA JATUH SESUAI TEMA + BUNDAR.
   v5 pakai buket pink/oranye — itu TIDAK sesuai tema emerald-emas.
   v6: bunga jatuh kembali ke bunga-emerald (emas/putih, sesuai tema),
   tapi dipotong jadi LINGKARAN (border-radius 50%, object-fit cover),
   jadi bentuknya bundar, bukan memanjang. Ukuran 36-48px. */
.petal{border-radius:50% !important;overflow:hidden !important}
.petal img{width:100% !important;height:100% !important;object-fit:cover !important;opacity:1 !important;border-radius:50% !important}
.petal.p1{width:44px;height:44px}.petal.p2{width:38px;height:38px}.petal.p3{width:48px;height:48px}
.petal.p4{width:40px;height:40px}.petal.p5{width:46px;height:46px}.petal.p6{width:36px;height:36px}

/* 3. BURUNG KECIL-KECIL, TIPIS, BANYAK, CEPAT & LAMBAT.
   v5 burungnya terlalu bold: bentuk solid hitam, ukuran sampai 32px.
   v6: semua burung diperkecil jadi 10-18px, bentuknya garis tipis
   (fill none, stroke hijau gelap 1.4px, opacity .75), bukan solid tebal.
   Kecepatan bervariasi: cepat 12-14 detik, sedang 17-20 detik, lambat 24-28 detik,
   arah silih berganti, delay tersebar. */
.bird svg path{fill:none !important;stroke:#0f2a1e !important;stroke-width:1.4 !important;stroke-linecap:round !important;opacity:.75}
.bird{opacity:.85}
.bird.b1{width:12px}.bird.b2{width:10px}.bird.b3{width:14px}.bird.b4{width:11px}
.bird.b5{width:13px}.bird.b6{width:10px}.bird.b7{width:15px}.bird.b8{width:11px}
.bird.b9{width:16px}.bird.b10{width:12px}.bird.b11{width:14px}.bird.b12{width:10px}
.bird.b13{width:17px}.bird.b14{width:13px}
.bird.b15{width:11px;top:8%;animation-name:fly-ltr;animation-duration:13s;animation-delay:1s}
.bird.b16{width:15px;top:30%;animation-name:fly-rtl;animation-duration:26s;animation-delay:2s}
.bird.b17{width:10px;top:20%;animation-name:fly-ltr;animation-duration:12s;animation-delay:4.5s}
.bird.b18{width:18px;top:12%;animation-name:fly-rtl;animation-duration:28s;animation-delay:6s}
.bird.b19{width:12px;top:34%;animation-name:fly-ltr;animation-duration:19s;animation-delay:3s}
.bird.b20{width:14px;top:26%;animation-name:fly-rtl;animation-duration:15s;animation-delay:7.5s}

/* ===== PORTAL v10 — pohon rindang bergerak di belakang rumah =====
   Pohon diletakkan di antara background dan layer rumah (z 2, rumah z 3),
   jadi posisinya benar-benar DI BELAKANG rumah, bukan menutupi rumah/konten.
   Konten portal tetap z 30, bunga bawah z 4-14, jadi pohon tidak menutupi
   ucapan, tanggal, atau tombol. */
.scene__trees{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.tree{position:absolute;bottom:0;transform-origin:50% 100%;animation:tree-sway ease-in-out infinite;will-change:transform}
.tree img{width:100%;height:auto;display:block;filter:brightness(.92) saturate(.85) contrast(.95) drop-shadow(0 4px 12px rgba(0,0,0,.3));-webkit-mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 96%);mask-image:radial-gradient(ellipse 72% 72% at 50% 50%,#000 62%,transparent 96%)}
.scene__trees::after{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;background:radial-gradient(ellipse 90% 70% at 50% 55%,transparent 55%,rgba(10,53,39,.28) 82%,rgba(10,53,39,.5) 100%)}
/* Pohon berbeda-beda, bukan klon: bentuk, ukuran, warna, kecepatan ayun beda */
.tree.t1{left:-10%;bottom:18%;width:min(78vw,420px);animation-duration:7s;animation-delay:0s}
.tree.t2{right:-10%;bottom:18%;width:min(78vw,420px);animation-duration:9s;animation-delay:1.2s}
.tree.t3{left:16%;bottom:20%;width:min(68vw,360px);animation-duration:8s;animation-delay:.6s;opacity:.95}
.tree.t4{right:16%;bottom:20%;width:min(68vw,360px);animation-duration:11s;animation-delay:2s;opacity:.92}
@keyframes tree-sway{0%,100%{transform:rotate(-1.8deg) translateX(0)}50%{transform:rotate(1.8deg) translateX(3px)}}

/* === hero-main-v3.css === */
/* ===== HERO v3 — panduan Argon 30 Okt 18:58, elemen awal + ramai =====
   SCOPE: hanya #home. Portal v13 + section lain TIDAK diubah.
   1) Foto: landscape galeri-2, frame 280x186, 1 bingkai ukir Jawa (bukan CSS border tipis saja)
   2) Bunga bawah tengah DIHAPUS: tidak ada bunga di tengah bawah hero
   3) Nama 3 baris tengah: Sultan / & / Ajeng
   4) Pojok bawah kiri-kanan: bunga padat supaya ramai
   5) Pohon menyatu dengan bawah: mask gradasi + kabut di pangkal, bukan tempelan */
/* Hapus frame emas belakang + scroll (tetap dari v15) */
.hero:before,.hero:after{display:none !important}
.scroll-cue{display:none !important}
/* Hero ramai tapi konten tetap di atas */
.hero{padding:64px 20px 84px}
.hero__content{max-width:320px;z-index:5}
/* 1) Foto lebih kecil + bingkai ukir Jawa yang real (bukan border tipis) */
.jawa-frame{width:min(78vw,280px) !important;padding:12px !important;background:linear-gradient(150deg,#3a2410,#1a0f06 50%,#0f0803) !important;border:2px solid rgba(201,162,39,.9) !important;box-shadow:0 20px 50px rgba(0,0,0,.6),inset 0 0 0 4px rgba(0,0,0,.5),inset 0 0 0 5px rgba(233,206,122,.5)}
.jawa-frame__corner{width:72px !important;height:72px !important;opacity:1}
.jf-tl{top:-14px !important;left:-14px !important}
.jf-tr{top:-14px !important;right:-14px !important}
.jf-bl{bottom:-14px !important;left:-14px !important}
.jf-br{bottom:-14px !important;right:-14px !important}
.jawa-frame__carve{width:150px !important;height:30px !important}
.jf-carve-t{top:-15px !important}
.jf-carve-b{bottom:-15px !important}
.hero__photo{aspect-ratio:3/2}
.hero__photo img{object-position:center}
/* 3) Nama 3 baris, rata tengah, rapi */
.hero-names{display:grid;justify-items:center;gap:2px;margin:14px 0 4px !important;line-height:1.05 !important}
.hero-name-line{display:block;font-size:clamp(38px,11vw,58px)}
.hero-name-amp{display:block;font-family:var(--serif);font-weight:400;font-size:.55em;line-height:1;color:var(--gold-light)}
/* 5) Pohon menyatu: lebar penuh, pangkal memudar + kabut */
.hero__tree{width:min(100vw,360px) !important;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 96%) !important;mask-image:linear-gradient(180deg,#000 55%,transparent 96%) !important}
.hero__tree--l{left:-12% !important;width:min(72vw,360px) !important}
.hero__tree--r{right:-12% !important;width:min(72vw,360px) !important}
.hero__fog{position:absolute;left:0;right:0;bottom:0;height:34%;background:linear-gradient(180deg,transparent,rgba(10,53,39,.55) 55%,rgba(5,15,11,.75));pointer-events:none;z-index:2}
/* 4) Bunga pojok bawah padat, kiri-kanan saja — TIDAK ada di tengah bawah */
.hero__fl--1{left:-10% !important;width:min(48vw,240px) !important}
.hero__fl--2{right:-10% !important;width:min(48vw,240px) !important}
.hero__corner{background:url("assets/scene/bunga-emerald.webp") center/contain no-repeat !important;opacity:1 !important}
.hero__corner--l{left:-15px !important;right:auto !important;width:130px !important;height:130px !important;bottom:-10px !important;top:auto !important}
.hero__corner--r{right:-15px !important;left:auto !important;width:130px !important;height:130px !important;bottom:-10px !important;top:auto !important}
.hero__corner--gold-l{background:url("assets/scene/buket-emas.png") center/contain no-repeat !important;left:22% !important;right:auto !important;width:110px !important;height:110px !important;bottom:-6px !important;top:auto !important;opacity:.95 !important}
.hero__corner--gold-r{background:url("assets/scene/buket-emas.png") center/contain no-repeat !important;right:22% !important;left:auto !important;width:110px !important;height:110px !important;bottom:-6px !important;top:auto !important;opacity:.95 !important}
.hero__corner--gold-r{transform:scaleX(-1)}
/* Jarak teks rapi */
.hero__date{margin:6px 0 4px}
.hero__sub{margin:8px 0 0}
.hero__corner{animation:hero-fade 1.4s 1s ease both,flower-shaky 8s ease-in-out 2.6s infinite}

/* === hero-canva-v1.css === */
/* HERO CANVA v1 - panduan Argon 30 Okt 21:00, PNG Canva exact */
/* SCOPE: hanya #home. Portal v13 + section lain TIDAK diubah. */
.hero__content{max-width:380px !important}
.hero-canva{width:100% !important;max-width:360px !important;height:auto !important;display:block !important;margin:0 auto !important;object-fit:contain !important;filter:drop-shadow(0 12px 20px rgba(0,0,0,.4)) !important;position:relative;z-index:5}

/* === hero-v18.css === */
/* HERO v18 - panduan Argon 22:05 + 22:07, bunga + hitam */
/* SCOPE: hanya #home + ornamen ayat atas. Portal v13 + section lain TIDAK diubah. */
.hero{overflow:hidden !important}
.hero__scene{overflow:hidden !important}
.hero-canva{filter:none !important;box-shadow:none !important}
.hero__fl--1{bottom:0 !important}
.hero__fl--2{bottom:0 !important}
.hero__corner--l{bottom:0 !important}
.hero__corner--r{bottom:0 !important}
.hero__corner--gold-l{bottom:0 !important}
.hero__corner--gold-r{bottom:0 !important}
.hero__fl--3{bottom:0 !important}
.hero__fl--4{bottom:0 !important}

/* === hero-v19.css === */
/* HERO v19 - bingkai ukir emas referensi JURAGAN, panduan Argon 22:19 */
/* SCOPE: hanya #home. Portal v13 + bunga v18 + section lain TIDAK diubah. */
.hero-photo-frame{position:relative;width:min(92vw,360px) !important;margin:0 auto !important;z-index:5}
.hero-photo{width:100% !important;height:auto !important;display:block !important;aspect-ratio:3/2 !important;object-fit:cover !important}
.hero-frame-overlay{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:fill !important;pointer-events:none !important;z-index:2}
.hero-canva{display:none !important}

/* === hero-v20.css === */
/* HERO v20 - foto portrait galeri-5 + bingkai referensi persis, panduan Argon 22:24 */
/* SCOPE: hanya #home. Portal v13 + bunga v18 + section lain TIDAK diubah. Bingkai tidak diubah lagi dari versi recolor v19. */
.hero-photo-frame{width:min(78vw,300px) !important;aspect-ratio:470/626 !important;margin:0 auto 24px !important;position:relative !important}
.hero-photo{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center 30% !important;aspect-ratio:auto !important;z-index:1}
.hero-frame-overlay{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;object-fit:fill !important;pointer-events:none !important;z-index:2}

/* === hero-v21.css === */
/* HERO v21 - foto pas di dalam bingkai, panduan Argon 22:37 + inset tebal bingkai */
/* SCOPE: hanya #home. Portal v13 + bunga v18 + bingkai referensi TIDAK diubah. */
.hero-photo{inset:12% 18% 14% 18% !important;width:auto !important;height:auto !important;object-position:center 35% !important}

/* === hero-v22.css === */
/* HERO v22 - hapus bunga atas + hapus lapisan hitam samar, panduan Argon 22:40 */
/* SCOPE: hanya #home. Portal TERKUNCI tidak diubah (portal tetap pakai bg-withhouse asli). Bunga bawah v18 tidak diubah. Foto v21 tetap pas di dalam bingkai. */
.hero__bg{background:url("assets/scene/bg-emerald-withhouse-notop.webp") center 28%/cover !important}
.hero__ground{background:none !important}
.site-noise{display:none !important}

/* === hero-v23.css === */
/* HERO v23 - hapus hitam transparan + bunga tipis sisi bingkai + foto crop pasangan. Argon timeout 170s, jadi ini dibangun dari screenshot JURAGAN, BUKAN diklaim panduan Argon. */
/* SCOPE: hanya #home + nav/musik fixed. Portal TERKUNCI tidak diubah. Bunga bawah v18 tidak diubah. */
.hero__tree{display:none !important}
.hero__bg{background:linear-gradient(#0A3527 0%, rgba(10,53,39,0) 35%), url("assets/scene/bg-emerald-withhouse-notop.webp") center 28%/cover !important}
.hero__copy{background:transparent !important;border:none !important;box-shadow:none !important}
.bottom-nav{background:transparent !important;border:none !important;box-shadow:none !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important}
.music-toggle{background:transparent !important;backdrop-filter:none !important;-webkit-backdrop-filter:none !important;box-shadow:none !important}
.hero-photo{object-position:center 50% !important}

/* === hero-v24.css === */
/* HERO v24 - PANDUAN ARGON 2026-10-31 08:51 WIB, gemini-4-argon, finish stop, 415 token */
/* Argon: (1) cover + object-position center 20% fokus pasangan, (2) bunga tipis sisi tengah opacity 0.7, (3) hitam transparan -> transparent + hapus shadow/blur (sudah di v23), (4) hero container gap 1.5rem, hapus ornamen luar bingkai (sudah di v23: pohon hero disembunyikan). */
.hero__content{gap:1.5rem !important}
.hero-photo{object-position:center 20% !important}

/* === hero-v25.css === */
/* HERO v25 - foto bingkai batik kiriman JURAGAN, panduan Argon 2026-10-31 11:39 WIB, finish stop */
/* Argon diikuti: pakai gambar baru utuh, hapus bingkai lama agar tidak menumpuk. Argon TIDAK diikuti mentah untuk layout full-screen + teks di atas foto, karena itu menutupi pasangan; judul/tanggal/sub tetap di bawah foto seperti v19-v24. */
.hero-photo-frame{width:min(92vw,360px) !important;aspect-ratio:auto !important;margin:0 auto 24px !important;position:relative !important}
.hero-photo{position:relative !important;inset:auto !important;width:100% !important;height:auto !important;display:block !important;object-fit:contain !important;object-position:center !important;aspect-ratio:auto !important;filter:none !important;box-shadow:none !important}
.hero-frame-overlay{display:none !important}

/* === hero-v26.css === */
/* HERO v26 - PANDUAN ARGON 2026-10-31 11:55 WIB, gemini-4-argon, finish stop, 516 token */
/* Argon: (1) blend bingkai: bayangan hijau lembut rgba(0,55,30,.15), bukan hitam; mix-blend multiply TIDAK dipakai ke seluruh foto karena akan menggelapkan gaun putih, diganti feather tepi + vignette emerald. (2) hapus bunga putih + fog gelap + bayangan hitam teks. (3) pojok bawah: absolute bottom, opacity 0.7 (Argon 0.3 terlalu samar di emerald, dipakai 0.7 agar ornamen tetap kelihatan tapi menyatu). (4) animasi softFloat 3s + cornerSway 8s. */
.hero__fl--1,.hero__fl--2,.hero__fl--3,.hero__fl--4,.hero__corner--l,.hero__corner--r,.hero__corner--gold-l,.hero__corner--gold-r{display:none !important}
.hero__fog{display:none !important}
.hero__eyebrow,.display-title,.hero__date,.hero__sub{text-shadow:none !important}
.hero__bg{background:linear-gradient(#0A3527 0%, rgba(10,53,39,0) 25%, rgba(10,53,39,0) 70%, #0A3527 100%), url("assets/scene/bg-emerald-withhouse-notop.webp") center 28%/cover !important}
.hero-photo-frame{box-shadow:0 10px 30px rgba(0,55,30,.15) !important;background:transparent !important;border:none !important;animation:softFloat 3s ease-in-out infinite alternate !important}
@keyframes softFloat{0%{opacity:.9;transform:translateY(3px)}100%{opacity:1;transform:translateY(-3px)}}
.hero__pojok{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;height:min(38vw,210px) !important;background:url("assets/scene/pojok-batik-bawah.webp") center bottom / 100% auto no-repeat !important;z-index:1 !important;pointer-events:none !important;opacity:.7 !important;animation:cornerSway 8s ease-in-out infinite !important}
@keyframes cornerSway{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-4px) rotate(.5deg)}}

/* === hero-v27.css === */
/* HERO v27 - PANDUAN ARGON 2026-10-31 15:53-15:59 WIB, via round-robin, gemini-4-argon, finish stop */
/* Argon 1 (port 18082, 281 token): foto width min(60vw,240px), max-height 45vh, margin 0 auto 8px, container gap 12px, padding 24px 20px, judul 2rem line 1.1, tanggal 1rem, sub 0.85rem, media max-height 700px foto min(50vw,200px) max-height 40vh. */
/* Argon 2 (port 18083, 282 token): pojok bottom 80px (di atas nav fixed), height auto, aspect-ratio 1080/579, background-size contain, background-position bottom center, z-index 0 belakang konten, scene padding-bottom calc(80px + pojok). */
/* Argon 3 (port 18084, 918 token): palet emerald gelap #062b1a/#02140b/#0f452d, emas terang #fbe69b, emas #d4af37, emas gelap #8c7322, ornamen opacity 0.45, teks emas gradient. */
/* PEMETAAN KE CLASS ASLI + PENYESUAIAN YANG DIBERITAHUKAN: class generik Argon (.hero-frame-batik, .scene, .ornament-bottom, dll) dipetakan ke .hero-photo-frame, .hero, .hero__pojok, .hero__eyebrow, .display-title, .hero__date, .hero__sub. Pojok height dipakai min(53.6vw,210px) bukan min(38vw,210px) agar rasio 1080/579 pas tanpa terpotong (38vw akan memotong/mengecilkan). Bayangan hitam Argon 3 (rgba 0,0,0,0.7-0.9, text-shadow hitam) TIDAK dipakai karena hitam sudah dihapus di v26 atas perintah JURAGAN; diganti drop-shadow emas rgba(212,175,55,0.2) saja. Bingkai emas gradient Argon 3 TIDAK dipakai mengelilingi foto batik karena akan menumpuk bingkai (masalah v25). Opacity pojok dipakai 0.6 (antara Argon 0.45 dan v26 0.7) agar tetap kelihatan tapi menyatu. Top padding hero dipakai 64px (antara Argon 24px dan asli 96px) agar eyebrow tidak menabrak tombol Musik di kanan atas. */
.hero{padding:64px 20px calc(80px + min(53.6vw,210px) + 16px) !important}
.hero__content{gap:12px !important}
.hero-photo-frame{width:min(60vw,240px) !important;max-height:45vh !important;margin:0 auto 8px !important}
.hero-photo{width:100% !important;height:auto !important;max-height:45vh !important;object-fit:contain !important}
.hero__eyebrow{margin:0 !important;font-size:0.9rem !important;color:#fbe69b !important;text-shadow:none !important}
.hero .display-title{margin:4px 0 !important;font-size:2rem !important;line-height:1.1 !important;color:#d4af37 !important;background:linear-gradient(to right,#fbe69b,#d4af37,#fbe69b) !important;-webkit-background-clip:text !important;-webkit-text-fill-color:transparent !important;filter:drop-shadow(0 0 25px rgba(212,175,55,0.2)) !important;text-shadow:none !important}
.hero__date{margin:0 !important;font-size:1rem !important;color:#fbe69b !important;text-shadow:none !important}
.hero__sub{margin:0 !important;font-size:0.85rem !important;color:#fbe69b !important;opacity:.85 !important;text-shadow:none !important}
.hero__pojok{position:absolute !important;left:0 !important;right:0 !important;bottom:80px !important;height:min(53.6vw,210px) !important;background:url("assets/scene/pojok-batik-bawah.webp") bottom center / contain no-repeat !important;z-index:1 !important;pointer-events:none !important;opacity:.6 !important;animation:cornerSway 8s ease-in-out infinite !important}
@media (max-height:700px){.hero__content{gap:8px !important}.hero-photo-frame{width:min(50vw,200px) !important;max-height:40vh !important}}

/* === hero-v28.css === */
/* HERO v28 - PANDUAN ARGON 2026-10-31 16:05-16:09 WIB, via round-robin, gemini-4-argon, finish stop */
/* Argon 1 (port 18085, 165 token): foto width min(80vw,320px), border none, box-shadow none, background transparent, mix-blend normal, mask radial-gradient circle black 65% to transparent 100% (tepi memudar ke latar). */
/* Argon 2 (port 18081, 137 token): judul font Jawa Palsu !important, size clamp(40px,11vw,76px) !important, line-height 1.2 !important, color #FFF8E7 !important, text-shadow none !important. */
/* Argon 3 (port 18082, 212 token): hero-content padding-bottom 53.61vw (579/1080), pojok absolute bottom 0 !important, width 100%, height auto, aspect-ratio 1080/579, background-size contain, position bottom center, pointer-events none. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: class generik Argon dipetakan ke .hero-photo/.hero-photo-frame, .hero .display-title (+span), .hero__content/.hero__pojok. Mask radial dipakai di .hero-photo saja (bukan frame) agar bayangan hijau lembut v26 tidak ikut termask. Max-height foto dinaikkan 45vh->55vh agar foto 320px (tinggi ~404px) tidak terpotong max-height. Z-index pojok Argon 9999 TIDAK dipakai (akan menutupi nav), dipakai z-index 1 di belakang konten seperti v26, karena padding konten sudah menempatkan pojok di bawah konten. Hero padding-bottom v27 calc(80px+53.6vw+16px) diganti 16px agar tidak dobel dengan padding konten 53.61vw; gap pojok-ke-teks jadi 16px, pojok tepat di perbatasan halaman berikutnya. Opacity pojok tetap 0.6, animasi tetap. */
.hero{padding:64px 20px 16px !important}
.hero__content{gap:12px !important;padding-bottom:53.61vw !important}
.hero-photo-frame{width:min(80vw,320px) !important;max-height:55vh !important;margin:0 auto 8px !important}
.hero-photo{width:100% !important;height:auto !important;max-height:55vh !important;object-fit:contain !important;border:none !important;box-shadow:none !important;background-color:transparent !important;mix-blend-mode:normal !important;-webkit-mask-image:radial-gradient(circle, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important;mask-image:radial-gradient(circle, rgba(0,0,0,1) 65%, rgba(0,0,0,0) 100%) !important}
.hero .display-title,.hero .display-title span{font-family:"Jawa Palsu",sans-serif !important;font-size:clamp(40px,11vw,76px) !important;line-height:1.2 !important;color:#FFF8E7 !important;background:none !important;-webkit-background-clip:initial !important;background-clip:initial !important;-webkit-text-fill-color:#FFF8E7 !important;filter:none !important;text-shadow:none !important}
.hero__pojok{position:absolute !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:auto !important;aspect-ratio:1080/579 !important;background:url("assets/scene/pojok-batik-bawah.webp") bottom center / contain no-repeat !important;pointer-events:none !important;z-index:1 !important;margin:0 !important;opacity:.6 !important;animation:cornerSway 8s ease-in-out infinite !important}

/* === hero-v29.css === */
/* HERO v29 - PANDUAN ARGON 2026-10-31 18:47-18:57 WIB, via round-robin, gemini-4-argon, finish stop */
/* Argon 1 (port 18083, 230 token): keluarkan batik dari div inset 0, section relative min-height 100vh padding-bottom 150px, konten z-index 10, batik position absolute top auto !important bottom 0 right 0 z-index 1 pointer-events none. */
/* Argon 2 (port 18084, 362 token): luxe-ease cubic-bezier(0.22,1,0.36,1), smoothEnter 1.4s forwards opacity 0 translateY(30px) scale(0.97) -> 1 translateY(0) scale(1), stagger eyebrow 0.1 photo 0.25 title 0.4 date 0.55 corner 0.7, luxeExit 1.2s forwards opacity 1 translateY(0) scale(1) -> 0 translateY(-25px) scale(1.03), exit stagger 0/0.1/0.2/0.3/0.4, trigger class .is-exiting pada parent. */
/* Argon 3 (port 18085, 326 token): emeraldRoyalPulse 8s cubic-bezier(0.25,0.1,0.25,1) infinite perspective rotateX/Y 1.5deg scale 1.025 filter gold drop-shadow brightness, goldAuraShimmer 10s ease-in-out infinite scale 1.015 rotate 0.3deg filter gold drop-shadow saturate brightness. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: Argon 1 right:0 saja dipetakan ke left:0+right:0 karena pojok kita strip penuh kiri-kanan, bukan pojok kanan saja. Div pojok DIPINDAH keluar dari scene (bukan lagi hero__layer, jadi tidak kena inset:0) ke setelah hero__content, langsung di dalam section hero (position relative), dengan top:auto !important. Pojok tetap absolute bottom:0 (bukan relative flow) agar lebarnya 100% viewport, bukan 100% grid area yang terpotong padding 20px; padding konten 53.61vw dari v28 dipertahankan agar teks berakhir 16px di atas pojok. Entrance pojok dipakai keyframe khusus yang berakhir opacity 0.6 (bukan 1) agar pojok tetap menyatu, bukan jadi opaque penuh. Loop foto dan pojok digabung dengan entrance (delay loop 2s, setelah entrance selesai) agar tidak menimpa entrance; exit .is-exiting menimpa loop saat keluar. Filter loop Argon dipakai apa adanya (gold drop-shadow, bukan hitam). JS exit trigger ditambahkan di akhir body (IntersectionObserver threshold 0.1 pada #home, tambah .is-exiting saat keluar viewport, hapus saat kembali). Foto, font, ukuran dari v28 TIDAK diubah di v29. */
:root{--luxe-ease:cubic-bezier(0.22,1,0.36,1)}
.hero__eyebrow{animation:smoothEnter 1.4s var(--luxe-ease) 0.1s both !important}
.hero-photo-frame{animation:smoothEnter 1.4s var(--luxe-ease) 0.25s both,emeraldRoyalPulse 8s cubic-bezier(0.25,0.1,0.25,1) 2s infinite !important}
.hero .display-title{animation:smoothEnter 1.4s var(--luxe-ease) 0.4s both !important}
.hero__date{animation:smoothEnter 1.4s var(--luxe-ease) 0.55s both !important}
.hero__sub{animation:smoothEnter 1.4s var(--luxe-ease) 0.65s both !important}
.hero__pojok{position:absolute !important;top:auto !important;left:0 !important;right:0 !important;bottom:0 !important;width:100% !important;height:auto !important;aspect-ratio:1080/579 !important;background:url("assets/scene/pojok-batik-bawah.webp") bottom center / contain no-repeat !important;pointer-events:none !important;z-index:1 !important;margin:0 !important;opacity:.6 !important;animation:smoothEnterPojok 1.4s var(--luxe-ease) 0.7s both,goldAuraShimmer 10s ease-in-out 2s infinite !important}
.hero.is-exiting .hero__eyebrow{animation:luxeExit 1.2s var(--luxe-ease) 0s forwards !important}
.hero.is-exiting .hero-photo-frame{animation:luxeExit 1.2s var(--luxe-ease) 0.1s forwards !important}
.hero.is-exiting .hero .display-title{animation:luxeExit 1.2s var(--luxe-ease) 0.2s forwards !important}
.hero.is-exiting .hero__date{animation:luxeExit 1.2s var(--luxe-ease) 0.3s forwards !important}
.hero.is-exiting .hero__sub{animation:luxeExit 1.2s var(--luxe-ease) 0.35s forwards !important}
.hero.is-exiting .hero__pojok{animation:luxeExit 1.2s var(--luxe-ease) 0.4s forwards !important}
@keyframes smoothEnter{0%{opacity:0;transform:translateY(30px) scale(0.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes smoothEnterPojok{0%{opacity:0;transform:translateY(30px) scale(0.97)}100%{opacity:.6;transform:translateY(0) scale(1)}}
@keyframes luxeExit{0%{opacity:1;transform:translateY(0) scale(1)}100%{opacity:0;transform:translateY(-25px) scale(1.03)}}
@keyframes emeraldRoyalPulse{0%,100%{transform:perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);filter:drop-shadow(0 0 15px rgba(212,175,55,0.4)) brightness(1)}50%{transform:perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.025);filter:drop-shadow(0 0 35px rgba(255,223,0,0.85)) brightness(1.15)}}
@keyframes goldAuraShimmer{0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 10px rgba(218,165,32,0.3)) saturate(1)}33%{transform:scale(1.015) rotate(0.3deg);filter:drop-shadow(0 0 25px rgba(255,215,0,0.95)) saturate(1.4) brightness(1.25)}66%{transform:scale(0.99) rotate(-0.3deg);filter:drop-shadow(0 0 15px rgba(255,235,133,0.6)) saturate(1.1) brightness(1.05)}}

/* === hero-v30.css === */
/* HERO v30 - PANDUAN ARGON 2026-10-31 19:06 WIB, via round-robin, gemini-4-argon, finish stop */
/* Argon 1 (port 18081, 348 token): gate main.invitation.is-open, keyframe mewahFade opacity 0 translateY(30px) scale(0.97) -> 1 translateY(0) scale(1), easing cubic-bezier(0.22,1,0.36,1), durasi foto 1.8s tulisan 1.6s elemen 1.4s, urutan foto -> nama-tanggal -> elemen -> ornamen. */
/* Argon 2 (port 18082, 439 token): glow softEmeraldGlow box-shadow emas redup C9A227 dan E9CE7A opacity rendah plus emerald inset, floralFadeIn 2.5s dan gentleSway 12s rotate -1.5deg ke 1.5deg translateX -1px ke 1px untuk pohon dan bunga belakang. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN, PENTING: */
/* 1. Delay Argon 5s/5.3s/5.6s setelah is-open TIDAK dipakai mentah. Alasan: is-open ditambah app.js pada 3.2 detik setelah klik, portal lalu geser 1.8 detik sampai 5.0 detik setelah klik. Delay 5 detik setelah is-open berarti fade-in baru mulai 8.2 detik setelah klik, hero kosong 3.2 detik setelah portal pergi. Dipakai delay setelah is-open: foto 1.9s, eyebrow 2.1s, judul 2.3s, tanggal 2.5s, sub 2.7s, pojok 2.9s, jadi fade-in mulai tepat saat portal selesai geser (5.1 detik setelah klik) dan terlihat penuh. */
/* 2. Class generik Argon dipetakan ke class asli: .foto -> .hero-photo-frame, .nama-tanggal -> .display-title + .hero__date, .elemen-lain -> .hero__eyebrow + .hero__sub, .ornamen -> .hero__pojok, latar -> .hero__bg + .hero__tree + .hero__fl. */
/* 3. z-index -1 Argon untuk pohon/bunga TIDAK dipakai, karena akan menyembunyikan mereka di belakang bg. Dipakai z-index scene 0, konten 2 seperti semula, jadi pohon/bunga di belakang konten tapi di atas bg. */
/* 4. Delay floral/gentleSway Argon dari load TIDAK dipakai, digate is-open dan digeser sama seperti fade-in, loop mulai setelah entrance selesai. */
/* 5. Glow kuning neon v29 diganti total: tidak ada lagi drop-shadow kuning terang, diganti drop-shadow emas redup C9A227 opacity 0.35 dan E9CE7A opacity 0.30, brightness maks 1.05, tanpa saturasi berlebih, box-shadow foto tetap hijau lembut v26. */
/* 6. Pohon dan bunga belakang DIHIDUPKAN LAGI: display block untuk .hero__tree dan .hero__fl--1..4 saja, karena file gambarnya transparan di sudut (cek alpha 0). Corner bunga (corner--l/r, gold-l/r) tetap disembunyikan dari v26, fog tetap disembunyikan, agar tidak mengulang elemen yang dulu ditolak. */
/* 7. Entrance pojok pakai keyframe khusus berakhir opacity 0.6 seperti v29, agar tetap menyatu. */
/* 8. Aturan exit v29 ditulis ulang di akhir file ini dengan spesifisitas lebih tinggi (.invitation.is-open .hero.is-exiting ...) agar exit tetap menang atas entrance yang digate, bukan tertimpa v30. */
/* 9. Sebelum is-open, elemen hero TIDAK punya animasi v30, jadi tidak ada animasi yang habis saat portal masih menutupi. Saat is-open ditambah, animation dengan fill both membuat opacity 0 selama delay, menahan reveal, lalu fade-in jalan setelah portal pergi. */
:root{--luxe-ease:cubic-bezier(0.22,1,0.36,1)}
.invitation.is-open .hero__bg{animation:mewahFadeBg 2.0s var(--luxe-ease) 1.9s both,bgBreath 14s ease-in-out 4.0s infinite alternate !important}
.invitation.is-open .hero__tree{display:block !important;animation:mewahFade 1.8s var(--luxe-ease) 2.0s both,gentleSway 12s ease-in-out 3.9s infinite alternate !important}
.invitation.is-open .hero__fl--1,.invitation.is-open .hero__fl--2,.invitation.is-open .hero__fl--3,.invitation.is-open .hero__fl--4{display:block !important;animation:mewahFade 2.0s var(--luxe-ease) 2.2s both,gentleSway 12s ease-in-out 4.3s infinite alternate !important}
.invitation.is-open .hero-photo-frame{animation:mewahFade 1.8s var(--luxe-ease) 1.9s both,emeraldRoyalPulseMuted 8s cubic-bezier(0.25,0.1,0.25,1) 3.8s infinite !important}
.invitation.is-open .hero__eyebrow{animation:mewahFade 1.6s var(--luxe-ease) 2.1s both !important}
.invitation.is-open .hero .display-title{animation:mewahFade 1.6s var(--luxe-ease) 2.3s both !important}
.invitation.is-open .hero__date{animation:mewahFade 1.6s var(--luxe-ease) 2.5s both !important}
.invitation.is-open .hero__sub{animation:mewahFade 1.4s var(--luxe-ease) 2.7s both !important}
.invitation.is-open .hero__pojok{animation:mewahFadePojok 1.4s var(--luxe-ease) 2.9s both,goldAuraShimmerMuted 10s ease-in-out 4.4s infinite !important}
.invitation.is-open .hero.is-exiting .hero__eyebrow{animation:luxeExit 1.2s var(--luxe-ease) 0s forwards !important}
.invitation.is-open .hero.is-exiting .hero-photo-frame{animation:luxeExit 1.2s var(--luxe-ease) 0.1s forwards !important}
.invitation.is-open .hero.is-exiting .hero .display-title{animation:luxeExit 1.2s var(--luxe-ease) 0.2s forwards !important}
.invitation.is-open .hero.is-exiting .hero__date{animation:luxeExit 1.2s var(--luxe-ease) 0.3s forwards !important}
.invitation.is-open .hero.is-exiting .hero__sub{animation:luxeExit 1.2s var(--luxe-ease) 0.35s forwards !important}
.invitation.is-open .hero.is-exiting .hero__pojok{animation:luxeExit 1.2s var(--luxe-ease) 0.4s forwards !important}
@keyframes mewahFade{0%{opacity:0;transform:translateY(30px) scale(0.97)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes mewahFadeBg{0%{opacity:0;transform:scale(1.02)}100%{opacity:1;transform:scale(1)}}
@keyframes mewahFadePojok{0%{opacity:0;transform:translateY(30px) scale(0.97)}100%{opacity:.6;transform:translateY(0) scale(1)}}
@keyframes bgBreath{0%{transform:scale(1)}100%{transform:scale(1.03)}}
@keyframes gentleSway{0%{transform:rotate(-1.5deg) translateX(-1px)}100%{transform:rotate(1.5deg) translateX(1px)}}
@keyframes emeraldRoyalPulseMuted{0%,100%{transform:perspective(1000px) rotateX(0deg) rotateY(0deg) scale(1);filter:drop-shadow(0 0 10px rgba(201,162,39,0.25)) brightness(1)}50%{transform:perspective(1000px) rotateX(1.5deg) rotateY(-1.5deg) scale(1.02);filter:drop-shadow(0 0 20px rgba(201,162,39,0.35)) brightness(1.05)}}
@keyframes goldAuraShimmerMuted{0%,100%{transform:scale(1) rotate(0deg);filter:drop-shadow(0 0 8px rgba(201,162,39,0.25))}33%{transform:scale(1.015) rotate(0.3deg);filter:drop-shadow(0 0 18px rgba(233,206,122,0.30)) brightness(1.05)}66%{transform:scale(0.99) rotate(-0.3deg);filter:drop-shadow(0 0 12px rgba(233,206,122,0.25)) brightness(1.02)}}

/* === ayat-v31.css === */
/* AYAT v31 - PANDUAN ARGON 2026-10-31 20:20 WIB, via round-robin port 18084, gemini-4-argon, finish stop, 576 token */
/* Argon: section.ayat background #0A3527, position relative, text-align right, overflow hidden; ::before watermark Kawung emas cover opacity 0.15 z-index 1; ::after sulur melati top -20 left -20 width 280 height 280 contain z-index 2; .geboyok-panel transparent, box-shadow none, border none, position relative z-index 3, flex column align-items flex-end; arabic/translation/hadith/javanese-translation #FAF6EE right; eyebrow/source/javanese #C9A227 right; divider-dot emas. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: */
/* 1. Placeholder path Argon dipetakan ke aset asli Canva v31: kawung-emas.webp (Kawung halaman 3 Canva, dipotong 727x744, diwarnai ulang luminance ke gradasi emas #8C7322 -> #C9A227 -> #E9CE7A) dan sulur-melati.webp (melati halaman 3 Canva, dipotong lingkaran radius 470 di sekitar klaster melati, agar potongan Parang/Vine di sekitarnya tidak ikut, dan tepi potong menghadap tepi halaman). */
/* 2. Divider Argon (background dot 4px) TIDAK dipakai mentah, karena divider asli adalah karakter ❖ di dalam span, bukan dot CSS. Dipakai warna emas #C9A227 untuk karakter itu, supaya tetap terlihat sebagai ornamen emas, bukan dot 4px yang menyembunyikan karakter. */
/* 3. Watermark Kawung dipakai background-size cover seperti Argon (bukan repeat), karena crop Kawung adalah satu pola utuh, bukan tile seamless; repeat akan menimbulkan garis sambungan. Opacity 0.15 dipertahankan agar watermark tidak menutupi teks. */
/* 4. Teks Ayat TIDAK diubah sama sekali (QS Adz-Dzariyat:49, hadith HR Bukhari dan Muslim, doa Jawa + terjemahan, persis seperti di preview). Hanya layout, latar, warna, dan ornamen yang diubah. Portal, hero, dan slide lain TIDAK diubah di v31. */
section.ayat#ayat.section-pad.mist-bg{background:#0A3527 !important;position:relative !important;text-align:right !important;overflow:hidden !important}
section.ayat#ayat.section-pad.mist-bg::before{content:"" !important;position:absolute !important;inset:0 !important;background-image:url("assets/ornamen-baru/kawung-emas.webp") !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;opacity:0.15 !important;z-index:1 !important;pointer-events:none !important}
section.ayat#ayat.section-pad.mist-bg::after{content:"" !important;position:absolute !important;top:-20px !important;left:-20px !important;width:280px !important;height:280px !important;background:url("assets/ornamen-baru/sulur-melati.webp") no-repeat top left !important;background-size:contain !important;z-index:2 !important;pointer-events:none !important}
section.ayat#ayat div.geboyok-panel.reveal{background:transparent !important;box-shadow:none !important;border:none !important;position:relative !important;z-index:3 !important;display:flex !important;flex-direction:column !important;align-items:flex-end !important}
section.ayat#ayat div.arabic,section.ayat#ayat p.translation,section.ayat#ayat p.hadith,section.ayat#ayat p.javanese-translation{color:#FAF6EE !important;text-align:right !important}
section.ayat#ayat p.eyebrow,section.ayat#ayat p.source,section.ayat#ayat p.javanese{color:#C9A227 !important;text-align:right !important}
section.ayat#ayat span.divider-dot{color:#C9A227 !important}

/* === ayat-v32.css === */
/* AYAT v32 - KOREKSI, PANDUAN ARGON 2026-10-31 23:05 WIB, via round-robin port 18085, gemini-4-argon, finish stop, 1220 token. BUKAN model Muse untuk coding. */
/* Argon: section background dikembalikan linear-gradient 180deg 050F0B ke 0A3527; panel width min(100%,700px) margin auto padding 49px 22px 42px text-align right border 1px solid C9A227 background Kawung + gradient asli box-shadow asli; panel ::before bingkai ukiran emas inset 4px border-image SVG opacity 0.8 z1; panel ::after sulur melati top -10 left -10 160x160 contain z2; teks eyebrow/source gold, arabic/translation/hadith/javanese ivory, javanese-translation gold, semua rata kanan, z3. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: */
/* 1. Background section v31 (solid 0A3527) DIBATALKAN di file ini: dikembalikan ke gradient asli 050F0B -> 0A3527. Watermark Kawung dan melati di level section dari v31 juga DIBATALKAN (section ::before/::after dihapus), karena perintahnya background section tetap, yang diganti hanya card dan elemen di dalamnya. */
/* 2. Watermark Kawung Argon berupa SVG lingkaran generik TIDAK dipakai. Dipakai aset Kawung Canva asli (kawung-emas.webp) yang diencerkan alpha-nya jadi 18% (kawung-emas-tipis.webp), sebagai lapisan pertama di dalam card, di atas gradient asli card, background-size cover, supaya jadi watermark emas samar di dalam card, bukan di section. */
/* 3. Placeholder melati Argon dipetakan ke aset asli assets/ornamen-baru/sulur-melati.webp, ukuran 160x160 seperti Argon, di sudut kiri atas CARD (bukan section). */
/* 4. Drop-shadow hitam Argon untuk melati (rgba 0,0,0,0.15) TIDAK dipakai, karena itu bayangan hitam baru. Melati dipasang tanpa filter bayangan. */
/* 5. Divider Argon berupa dot CSS 6px TIDAK dipakai mentah, karena divider asli adalah karakter ❖. Dipakai warna emas untuk karakter itu, dengan text-align right di dalam card, supaya tetap terlihat sebagai ornamen emas. */
/* 6. Panel transparan v31 DIBATALKAN: panel dikembalikan jadi card (background gradient asli + watermark Kawung tipis, border emas, box-shadow asli). Box-shadow asli yang mengandung hitam adalah shadow asli card, bukan bayangan hitam baru. */
/* 7. Teks Ayat TIDAK diubah. Portal, hero, dan slide lain TIDAK diubah di v32. */
section.ayat#ayat.section-pad.mist-bg{background:linear-gradient(180deg,#050F0B,#0A3527) !important;position:relative !important}
section.ayat#ayat.section-pad.mist-bg::before{background-image:none !important;opacity:0 !important}
section.ayat#ayat.section-pad.mist-bg::after{background:none !important}
section.ayat#ayat div.geboyok-panel.reveal{width:min(100%,700px) !important;margin:auto !important;padding:49px 22px 42px !important;text-align:right !important;border:1px solid #C9A227 !important;background:url("assets/ornamen-baru/kawung-emas-tipis.webp") center / cover no-repeat,linear-gradient(145deg,rgba(15,74,54,.46),rgba(10,53,39,.95) 32%,rgba(15,74,54,.65)) !important;box-shadow:inset 0 0 0 6px rgba(233,206,122,.06),0 18px 50px rgba(0,0,0,.27) !important;position:relative !important;overflow:hidden !important;z-index:3 !important}
section.ayat#ayat div.geboyok-panel.reveal::before{content:"" !important;position:absolute !important;inset:4px !important;border:2px solid transparent !important;border-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Cpath d='M0 15 Q15 15 15 0 Q15 15 30 15 Q15 15 15 30 Q15 15 0 15' fill='none' stroke='%23C9A227' stroke-width='1.5'/%3E%3C/svg%3E") 10 stretch !important;opacity:0.8 !important;pointer-events:none !important;z-index:1 !important}
section.ayat#ayat div.geboyok-panel.reveal::after{content:"" !important;position:absolute !important;top:-10px !important;left:-10px !important;width:160px !important;height:160px !important;background:url("assets/ornamen-baru/sulur-melati.webp") no-repeat top left !important;background-size:contain !important;pointer-events:none !important;z-index:2 !important}
section.ayat#ayat p.eyebrow{color:#C9A227 !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat div.arabic{color:#FAF6EE !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat p.translation{color:#FAF6EE !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat p.source{color:#C9A227 !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat span.divider-dot{color:#C9A227 !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat p.hadith{color:#FAF6EE !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat p.javanese{color:#FAF6EE !important;text-align:right !important;position:relative !important;z-index:3 !important}
section.ayat#ayat p.javanese-translation{color:#C9A227 !important;text-align:right !important;position:relative !important;z-index:3 !important}

/* === ayat-v33.css === */
/* AYAT v33 - CARD DOA LEBIH KEJAWEN, PANDUAN ARGON 2026-10-31 23:39 WIB, via round-robin port 18081, gemini-4-argon, finish stop, 601 token. BUKAN model Muse untuk coding. */
/* Argon: section background linear-gradient 180deg 050F0B ke 0A3527; panel width min(100%,700px) margin 0 auto text-align right padding 140px 50px 130px 50px box-sizing border-box; background layers sudut TL/TR/BL/BR top/bottom 130x130, lis kayu atas top center 100% 65px, divider emas bawah bottom center 80% 45px, Kawung tipis center cover, gradient; teks eyebrow/source/divider/javanese-translation gold C9A227, arabic/translation/hadith/javanese ivory FAF6EE. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: */
/* 1. Background section TETAP asli 050F0B -> 0A3527, tidak diubah. Watermark/melati level section dari v31 tetap dibatalkan. */
/* 2. Gradient card Argon yang hitam (rgba 20,20,20 / 10,10,10) TIDAK dipakai, karena itu mengubah card jadi hitam. Dipakai gradient asli card emerald 145deg rgba(15,74,54,.46), rgba(10,53,39,.95) 32%, rgba(15,74,54,.65). */
/* 3. Placeholder sudut Argon dipetakan ke aset Canva v31 asli: sudut-jawa-tl/tr/bl/br.webp (ornamen sudut Jawa coklat-emas dari lembar Canva page 4, dibersihkan dari awan biru, di-flip untuk 4 sudut), 130x130 seperti Argon. */
/* 4. Placeholder lis gebyok Argon dipetakan ke gebyok-strip.webp (pintu gebyok ukir foto dari lembar Canva page 1, dipotong ujung bawahnya supaya tidak ada ujung ornamen lain). Lis Argon 65px dinaikkan jadi 90px supaya ukiran tidak terlalu gepeng; padding atas tetap 140px dari Argon, jadi teks tetap mulai di bawah lis. */
/* 5. Placeholder divider emas bawah Argon TIDAK dipetakan ke crop divider Canva page 4, karena crop itu terpotong (hanya ujung berlian). Dipakai ukiran-jawa-emas.png yang sudah ada di VPS (assets/canva-premium/ukiran-jawa-emas.png, flourish emas horizontal), dengan ukuran 60% auto supaya rasionya tidak gepeng (bukan 80% 45px Argon yang akan memipihkan flourish). */
/* 6. Bingkai SVG v32 (panel ::before border-image) dan melati v32 (panel ::after) DIBATALKAN di file ini (content:none), karena digantikan oleh sudut Jawa PNG dan lis gebyok; kalau tidak dibatalkan, melati akan menumpuk sudut kiri atas. */
/* 7. Teks Ayat TIDAK diubah. Portal, hero, dan slide lain TIDAK diubah di v33. */
section.ayat#ayat.section-pad.mist-bg{background:linear-gradient(180deg,#050F0B,#0A3527) !important;position:relative !important}
section.ayat#ayat.section-pad.mist-bg::before{background-image:none !important;opacity:0 !important}
section.ayat#ayat.section-pad.mist-bg::after{background:none !important}
section.ayat#ayat div.geboyok-panel.reveal{width:min(100%,700px) !important;margin:0 auto !important;text-align:right !important;padding:140px 50px 130px 50px !important;box-sizing:border-box !important;background:url("assets/ornamen-baru/sudut-jawa-tl.webp") top left /130px 130px no-repeat,url("assets/ornamen-baru/sudut-jawa-tr.webp") top right /130px 130px no-repeat,url("assets/ornamen-baru/sudut-jawa-bl.webp") bottom left /130px 130px no-repeat,url("assets/ornamen-baru/sudut-jawa-br.webp") bottom right /130px 130px no-repeat,url("assets/ornamen-baru/gebyok-strip.webp") top center /100% 90px no-repeat,url("assets/canva-premium/ukiran-jawa-emas.png") bottom center /60% auto no-repeat,url("assets/ornamen-baru/kawung-emas-tipis.webp") center /cover no-repeat,linear-gradient(145deg,rgba(15,74,54,.46),rgba(10,53,39,.95) 32%,rgba(15,74,54,.65)) !important;border:1px solid #C9A227 !important;box-shadow:inset 0 0 0 6px rgba(233,206,122,.06),0 18px 50px rgba(0,0,0,.27) !important;position:relative !important;overflow:hidden !important;z-index:3 !important}
section.ayat#ayat div.geboyok-panel.reveal::before{content:none !important}
section.ayat#ayat div.geboyok-panel.reveal::after{content:none !important}
section.ayat#ayat p.eyebrow{color:#C9A227 !important;text-align:right !important}
section.ayat#ayat p.source{color:#C9A227 !important;text-align:right !important}
section.ayat#ayat span.divider-dot{color:#C9A227 !important;text-align:right !important}
section.ayat#ayat p.javanese-translation{color:#C9A227 !important;text-align:right !important}
section.ayat#ayat div.arabic{color:#FAF6EE !important;text-align:right !important}
section.ayat#ayat p.translation{color:#FAF6EE !important;text-align:right !important}
section.ayat#ayat p.hadith{color:#FAF6EE !important;text-align:right !important}
section.ayat#ayat p.javanese{color:#FAF6EE !important;text-align:right !important}

/* === ayat-v34.css === */
/* AYAT v34 - RAPIKAN SLIDE 2 + BACKGROUND POLOS SLIDE 1 TANPA RUMAH, PANDUAN ARGON 2026-11-01 00:00 WIB, via round-robin port 18083, gemini-4-argon, finish stop, 290 token. BUKAN model Muse untuk coding. */
/* Catatan kejujuran: panggilan Argon pertama via port 18082 (prompt panjang) dijawab penolakan singkat, bukan CSS. Panggilan kedua via port 18083 dengan prompt lebih singkat berhasil dan menjadi dasar v34 ini. */
/* Argon (panggilan kedua): section.ayat background url assets/scene/bg-emerald-nohouse.webp center cover no-repeat; panel width min(100%,700px) margin auto padding 60px 40px text-align center background linear-gradient(145deg,rgba(10,53,39,.92),rgba(5,15,11,.92)) border 1px solid C9A227 display flex flex-direction column gap 16px; eyebrow/source/divider-dot warna C9A227; arabic/translation/hadith/javanese/javanese-translation warna FAF6EE. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN: */
/* 1. Background section DIGANTI sesuai perintah baru JURAGAN, menggantikan gradient asli v32/v33: sekarang gambar lukisan emerald polos slide 1 tanpa rumah (assets/scene/bg-emerald-nohouse.webp, 960x1920, gunung kabut tengah terang, pohon kiri kanan, bunga bawah, TANPA joglo), cover center no-repeat. Ini perintah baru yang menggantikan aturan background tetap gradient sebelumnya, khusus untuk v34 ini. */
/* 2. Card dirapikan sesuai Argon: padding dipangkas dari 140/50/130/50 jadi 60/40, teks dari rata kanan jadi rata tengah, jarak antar blok diseragamkan flex gap 16px, card lebih solid (opacity .92) supaya teks tidak tenggelam di kabut terang tengah lukisan. */
/* 3. Sudut Jawa, lis gebyok, dan divider emas v33 HILANG di v34, karena background property card diganti total oleh Argon yang rapi ini — lukisan di belakang card sudah ramai (gunung, pohon, bunga), menambah sudut/lis di atasnya akan berantakan lagi. Itu konsekuensi rapikan, bukan lupa. */
/* 4. Kawung tipis TIDAK ada di CSS rapi Argon, tapi saya tambahkan kembali sebagai lapisan pertama di dalam card saja (kawung-emas-tipis.webp, 18% alpha, cover), supaya card tetap punya pola Jawa samar tanpa menambah keramaian, di atas gradient solid Argon. */
/* 5. Bingkai SVG v32 dan melati v32 tetap dibatalkan (content:none), dan watermark/melati level section tetap dibatalkan, supaya tidak muncul lagi di atas lukisan baru. */
/* 6. Javanese-translation sekarang ivory seperti kelompok teks Argon, bukan emas seperti v33 — itu mengikuti pengelompokan warna Argon yang rapi. */
/* 7. Teks Ayat TIDAK diubah. Portal, hero, dan slide lain TIDAK diubah di v34. */
section.ayat#ayat.section-pad.mist-bg{background:url("assets/scene/bg-emerald-nohouse.webp") center / cover no-repeat !important;position:relative !important}
section.ayat#ayat.section-pad.mist-bg::before{background-image:none !important;opacity:0 !important}
section.ayat#ayat.section-pad.mist-bg::after{background:none !important}
section.ayat#ayat div.geboyok-panel.reveal{width:min(100%,700px) !important;margin:auto !important;padding:60px 40px !important;text-align:center !important;background:url("assets/ornamen-baru/kawung-emas-tipis.webp") center / cover no-repeat,linear-gradient(145deg,rgba(10,53,39,.92),rgba(5,15,11,.92)) !important;border:1px solid #C9A227 !important;display:flex !important;flex-direction:column !important;gap:16px !important;box-shadow:inset 0 0 0 6px rgba(233,206,122,.06),0 18px 50px rgba(0,0,0,.27) !important;position:relative !important;overflow:hidden !important;z-index:3 !important}
section.ayat#ayat div.geboyok-panel.reveal::before{content:none !important}
section.ayat#ayat div.geboyok-panel.reveal::after{content:none !important}
section.ayat#ayat p.eyebrow{color:#C9A227 !important;text-align:center !important}
section.ayat#ayat p.source{color:#C9A227 !important;text-align:center !important}
section.ayat#ayat span.divider-dot{color:#C9A227 !important;text-align:center !important}
section.ayat#ayat div.arabic{color:#FAF6EE !important;text-align:center !important}
section.ayat#ayat p.translation{color:#FAF6EE !important;text-align:center !important}
section.ayat#ayat p.hadith{color:#FAF6EE !important;text-align:center !important}
section.ayat#ayat p.javanese{color:#FAF6EE !important;text-align:center !important}
section.ayat#ayat p.javanese-translation{color:#FAF6EE !important;text-align:center !important}

/* === mempelai-v36.css === */
/* MEMPELAI v36 - OVERNIGHT, PANDUAN ARGON 2026-11-01 00:49 WIB, port 18085, 1406 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover padding-bottom 140 background-color 0A3527; heading eyebrow gold h2 ivory; couple-grid flex column gap 2rem max-width 1000, row >=768px; profile-card glassmorph rgba(10,53,39,.38) blur 14px saturate 1.2 border gold translucent radius 20 padding 40/24, fallback solid .78; foto circle 160px border gold; role gold, nama ivory, orang tua ivory, IG gold; couple-mark & gold dengan ornamen ✧ atas bawah; animasi fadeBlurIn 1.4s blur 10px translateY 18px, stagger heading 0s pria 0.2s mark 0.4s wanita 0.6s. */
/* PEMETAAN + PENYESUAIAN YANG DIBERITAHUKAN (kritikal): */
/* 1. Trigger animasi Argon .reveal.active TIDAK dipakai, karena sistem reveal situs ini memakai .reveal.is-visible. Kalau dipakai .active, Mempelai akan tersembunyi selamanya (opacity 0 tanpa trigger). Diganti .is-visible, supaya animasi jalan saat section terlihat. */
/* 2. Class Argon .role/.name/.parents/.ig-link TIDAK ada di HTML asli. Dipetakan ke class asli: .profile-card__role, h3, .profile-card__parent, a.social-link. */
/* 3. Foto Argon circle 160px dipetakan ke struktur asli .profile-card__photo (bukan img langsung): photo div jadi 160x160 bulat, overflow hidden, border emas, background bunga-emerald asli dihapus, img jadi relative cover bulat, supaya tidak bentrok dengan CSS asli img absolute inset 0. Ini juga menghapus ornamen bunga-emerald yang terlarang di photo frame. */
/* 4. Divider image di couple-mark (divider-elegan-emas.png) DISEMBUNYIKAN, diganti ornamen ✧ Argon di atas/bawah tanda &, supaya tidak menumpuk & + divider + ✧. */
/* 5. Heading section Argon tanpa latar akan sulit dibaca di atas lukisan terang. Ditambahkan panel kaca kecil di belakang heading (background rgba glass + blur + border emas tipis + padding), supaya heading terbaca dan konsisten dengan card kaca. */
/* 6. Teks, foto, nama, orang tua, link IG TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v36. */
section.mempelai#mempelai.section-pad.mist-bg{background:url("assets/scene/bg-emerald-nohouse.webp") center / cover no-repeat !important;background-color:#0A3527 !important;position:relative !important;overflow:hidden !important;padding-bottom:140px !important}
section.mempelai#mempelai .section-heading.reveal{max-width:620px !important;margin:0 auto 42px !important;text-align:center !important;background:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:20px !important;padding:24px 20px !important}
section.mempelai#mempelai .section-heading .eyebrow{color:#C9A227 !important;font-size:1rem !important;letter-spacing:2px !important;text-transform:uppercase !important;margin-bottom:0.5rem !important;display:block !important}
section.mempelai#mempelai .section-heading h2{color:#FAF6EE !important;font-size:2.5rem !important;margin-top:0 !important;margin-bottom:1rem !important}
section.mempelai#mempelai .section-heading p{color:#FAF6EE !important}
section.mempelai#mempelai .couple-grid{display:flex !important;flex-direction:column !important;align-items:center !important;gap:2rem !important;max-width:1000px !important;margin:0 auto !important;padding:0 20px !important;grid-template-columns:none !important}
@media (min-width:768px){section.mempelai#mempelai .couple-grid{flex-direction:row !important;justify-content:center !important;align-items:stretch !important}}
section.mempelai#mempelai article.profile-card.reveal{background:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:20px !important;padding:40px 24px !important;flex:1 !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;max-width:400px !important;text-align:center !important}
@supports (backdrop-filter:blur(14px)){section.mempelai#mempelai article.profile-card.reveal{background:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
section.mempelai#mempelai .profile-card__photo{position:relative !important;width:160px !important;height:160px !important;aspect-ratio:auto !important;margin:0 auto 20px !important;border:2px solid rgba(233,206,122,0.45) !important;outline:none !important;border-radius:50% !important;overflow:hidden !important;background:none !important;display:block !important;padding-bottom:0 !important}
section.mempelai#mempelai .profile-card__photo::before,section.mempelai#mempelai .profile-card__photo::after{display:none !important}
section.mempelai#mempelai .profile-card__photo img{position:relative !important;inset:auto !important;width:100% !important;height:100% !important;object-fit:cover !important;object-position:center !important;border-radius:50% !important;border:none !important;margin:0 !important;display:block !important}
section.mempelai#mempelai .profile-card__role{color:#C9A227 !important;font-size:0.9rem !important;letter-spacing:1.5px !important;text-transform:uppercase !important;margin-bottom:8px !important}
section.mempelai#mempelai article.profile-card h3{color:#FAF6EE !important;font-size:1.8rem !important;font-weight:bold !important;margin:0 0 12px 0 !important}
section.mempelai#mempelai .profile-card__parent{color:#FAF6EE !important;font-size:0.95rem !important;margin:4px 0 !important;line-height:1.5 !important}
section.mempelai#mempelai a.social-link{color:#C9A227 !important;text-decoration:none !important;margin-top:16px !important;display:inline-block !important}
section.mempelai#mempelai div.couple-mark.reveal{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;color:#C9A227 !important;font-size:2.5rem !important;padding:20px 0 !important;text-align:center !important}
section.mempelai#mempelai div.couple-mark img{display:none !important}
section.mempelai#mempelai div.couple-mark::before,section.mempelai#mempelai div.couple-mark::after{content:"✧" !important;display:block !important;font-size:1.2rem !important;color:#C9A227 !important;opacity:0.6 !important;margin:15px 0 !important;position:relative !important}
section.mempelai#mempelai div.couple-mark::before{border-bottom:1px solid rgba(201,162,39,0.3) !important;padding-bottom:10px !important;width:40px !important}
section.mempelai#mempelai div.couple-mark::after{border-top:1px solid rgba(201,162,39,0.3) !important;padding-top:10px !important;width:40px !important}
@media (min-width:768px){section.mempelai#mempelai div.couple-mark{padding:0 20px !important}}
@keyframes fadeBlurIn{0%{opacity:0;transform:translateY(18px);filter:blur(10px)}100%{opacity:1;transform:translateY(0);filter:blur(0)}}
section.mempelai#mempelai .reveal{opacity:0 !important;will-change:transform,opacity,filter}
section.mempelai#mempelai .reveal.is-visible{animation:fadeBlurIn 1.4s ease-out forwards !important}
section.mempelai#mempelai .section-heading.reveal.is-visible{animation-delay:0s !important}
section.mempelai#mempelai .couple-grid>article.profile-card.reveal.is-visible:first-of-type{animation-delay:0.2s !important}
section.mempelai#mempelai .couple-mark.reveal.is-visible{animation-delay:0.4s !important}
section.mempelai#mempelai .couple-grid>article.profile-card.reveal.is-visible:last-of-type{animation-delay:0.6s !important}

/* === countdown-v37.css === */
/* COUNTDOWN v37 - OVERNIGHT, PANDUAN ARGON 2026-11-01 00:52 WIB, port 18081, 1049 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover padding-top 60 padding-bottom 140 min-height 100vh flex center; inner glassmorph fallback solid .78 blur .38 radius 20 padding 48/24 width 90% max-width 500; angka timer ivory 2.8rem label emas, pemisah emas, note emas; animasi fade-blur transition 1.4s stagger heading 0s timer 0.2s note 0.4s. */
/* PEMETAAN KRITIKAL YANG DIBERITAHUKAN: trigger animasi Argon section.countdown.is-visible TIDAK dipakai, karena class is-visible hanya ditambahkan ke elemen .reveal, yaitu div.countdown__inner.reveal, bukan ke section. Kalau dipakai trigger section, teks countdown akan tersembunyi selamanya. Diganti jadi div.countdown__inner.reveal.is-visible, supaya animasi jalan saat panel terlihat. */
/* Teks, tanggal, id days/hours/minutes/seconds, dan JS hitung mundur TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v37. */
section.countdown#countdown.section-pad.mist-bg{background:url("assets/scene/bg-emerald-nohouse.webp") center / cover no-repeat !important;padding-top:60px !important;padding-bottom:140px !important;min-height:100vh !important;display:flex !important;align-items:center !important;justify-content:center !important;position:relative !important}
section.countdown#countdown div.countdown__inner.reveal{background:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:20px !important;padding:48px 24px !important;width:90% !important;max-width:500px !important;text-align:center !important;margin:0 auto !important}
@supports (-webkit-backdrop-filter:blur(14px)) or (backdrop-filter:blur(14px)){section.countdown#countdown div.countdown__inner.reveal{background:rgba(10,53,39,0.38) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important;backdrop-filter:blur(14px) saturate(1.2) !important}}
section.countdown#countdown p.eyebrow,section.countdown#countdown h2,section.countdown#countdown div.timer,section.countdown#countdown p.countdown__note{opacity:0 !important;filter:blur(10px) !important;transform:translateY(18px) !important;transition:opacity 1.4s ease,filter 1.4s ease,transform 1.4s ease !important}
section.countdown#countdown div.countdown__inner.reveal.is-visible p.eyebrow,section.countdown#countdown div.countdown__inner.reveal.is-visible h2{opacity:1 !important;filter:blur(0) !important;transform:translateY(0) !important;transition-delay:0s !important}
section.countdown#countdown div.countdown__inner.reveal.is-visible div.timer{opacity:1 !important;filter:blur(0) !important;transform:translateY(0) !important;transition-delay:0.2s !important}
section.countdown#countdown div.countdown__inner.reveal.is-visible p.countdown__note{opacity:1 !important;filter:blur(0) !important;transform:translateY(0) !important;transition-delay:0.4s !important}
section.countdown#countdown p.eyebrow{color:#C9A227 !important;font-size:0.9rem !important;text-transform:uppercase !important;letter-spacing:2px !important;margin:0 0 8px 0 !important}
section.countdown#countdown h2{color:#FAF6EE !important;font-size:2.2rem !important;font-weight:700 !important;margin:0 0 32px 0 !important}
section.countdown#countdown div.timer{display:flex !important;justify-content:center !important;align-items:center !important;gap:16px !important;margin:0 0 36px 0 !important}
section.countdown#countdown div.timer__unit{display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;min-width:64px !important}
section.countdown#countdown strong{color:#FAF6EE !important;font-size:2.8rem !important;font-weight:700 !important;line-height:1.1 !important}
section.countdown#countdown div.timer span{color:#C9A227 !important;font-size:0.8rem !important;text-transform:uppercase !important;letter-spacing:1px !important;margin-top:6px !important}
section.countdown#countdown div.timer i{color:#C9A227 !important;font-size:1.8rem !important;font-style:normal !important;font-weight:700 !important;margin-top:-24px !important}
section.countdown#countdown p.countdown__note{color:#C9A227 !important;font-size:1.1rem !important;font-weight:500 !important;margin:0 !important}

/* === acara-v38.css === */
/* ACARA v38 - OVERNIGHT, PANDUAN ARGON 2026-11-01 01:00 WIB, port 18082, 1160 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover center padding-bottom 140; heading dan event-card glassmorph fallback solid .78 blur .38 border gold translucent radius 16 text-align center ivory; heading padding 1.5rem max-width 90%; event-grid 1fr gap 1.5rem max-width 90%, 2 kolom >=768px; event-card padding 2rem 1.5rem flex column center; tombol outline emas radius 8 hover gold .1 z-index 10; animasi reveal opacity 0 blur 10px translateY 18px transition 1.4s, is-visible opacity 1 blur 0, stagger heading 0s Akad 0.2s Resepsi 0.4s. */
/* PEMETAAN YANG DIBERITAHUKAN: Argon memakai class generik yang tidak ada di HTML asli, dipetakan ke class asli: label Akad/Resepsi jadi emas (bukan ivory dari aturan p Argon), jam jadi emas (bukan ivory), alamat di dalam place jadi ivory (bukan emas dari aturan span Argon), nama tempat strong tetap ivory, tanggal h3 emas sesuai Argon. */
/* Teks, tanggal, jam, tempat, link Maps TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v38. */
section.acara#acara.section-pad.mist-bg{background-image:url("assets/scene/bg-emerald-nohouse.webp") !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;padding-bottom:140px !important}
section.acara#acara .section-heading,section.acara#acara .event-card{background-color:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:16px !important;text-align:center !important;color:#FAF6EE !important}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){section.acara#acara .section-heading,section.acara#acara .event-card{background-color:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
section.acara#acara .section-heading{padding:1.5rem !important;margin:0 auto 2rem auto !important;max-width:90% !important}
section.acara#acara .section-heading .eyebrow{display:block !important;color:#C9A227 !important;margin-bottom:0.5rem !important}
section.acara#acara .section-heading h2{color:#FAF6EE !important;margin:0 !important}
section.acara#acara .event-grid{display:grid !important;grid-template-columns:1fr !important;gap:1.5rem !important;max-width:90% !important;margin:0 auto !important}
@media (min-width:768px){section.acara#acara .event-grid{grid-template-columns:1fr 1fr !important}}
section.acara#acara .event-card{padding:2rem 1.5rem !important;display:flex !important;flex-direction:column !important;align-items:center !important}
section.acara#acara .event-card h3{color:#C9A227 !important;margin-top:0 !important;margin-bottom:1rem !important}
section.acara#acara .event-card strong{color:#FAF6EE !important;font-size:1.25rem !important;margin-bottom:0.5rem !important;display:block !important}
section.acara#acara .event-card p{color:#FAF6EE !important;line-height:1.5 !important;margin-bottom:2rem !important}
section.acara#acara .event-card a.button{display:inline-block !important;padding:0.75rem 1.5rem !important;border:1px solid #C9A227 !important;background-color:transparent !important;color:#C9A227 !important;text-decoration:none !important;border-radius:8px !important;position:relative !important;z-index:10 !important;cursor:pointer !important;transition:background-color 0.3s ease !important;margin-top:auto !important}
section.acara#acara .event-card a.button:hover{background-color:rgba(201,162,39,0.1) !important}
section.acara#acara .reveal{opacity:0 !important;filter:blur(10px) !important;transform:translateY(18px) !important;transition:opacity 1.4s ease,transform 1.4s ease,filter 1.4s ease !important}
section.acara#acara .reveal.is-visible{opacity:1 !important;filter:blur(0) !important;transform:translateY(0) !important}
section.acara#acara .section-heading.reveal{transition-delay:0s !important}
section.acara#acara .event-grid .event-card.reveal:nth-child(1){transition-delay:0.2s !important}
section.acara#acara .event-grid .event-card.reveal:nth-child(2){transition-delay:0.4s !important}
/* Pemetaan class asli, setelah aturan Argon: */
section.acara#acara .event-card__label{color:#C9A227 !important;margin-bottom:0.5rem !important}
section.acara#acara .event-card__time{color:#C9A227 !important;margin-bottom:1rem !important}
section.acara#acara .event-card__place span{color:#FAF6EE !important;display:inline !important;margin-bottom:0 !important}
section.acara#acara .event-card__place{color:#FAF6EE !important}

/* === galeri-v39.css === */
/* GALERI v39 - OVERNIGHT, PANDUAN ARGON 2026-11-01 01:02 WIB, port 18083, 994 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover padding-bottom 140; heading panel kaca fallback solid .78 blur .38 border emas radius 16 padding 24 margin auto 32 max-width 90%; eyebrow emas h2 ivory; grid 2 kolom gap 16 padding 0 16; tile border emas radius 12 overflow hidden aspect-ratio 1/1, animasi fade-blur transition 1.4s stagger 0.15-0.90 dipicu heading.is-visible ~ grid; img cover 100%. */
/* PEMBATALAN KRITIKAL YANG DIBERITAHUKAN: aturan Argon section.galeri .gallery-art {display:none !important} TIDAK dipakai sama sekali, karena .gallery-art adalah wadah foto — aturan itu akan menyembunyikan semua 6 foto galeri. Itu kesalahan fatal Argon yang saya buang, dan saya ganti dengan display block supaya foto tetap tampil. */
/* Penyesuaian lain: paragraf intro heading diberi warna ivory eksplisit supaya terbaca di panel kaca, dan grid desktop >=768px jadi 3 kolom (bukan 2 kolom Argon untuk semua ukuran) supaya grid seimbang di layar lebar. */
/* Foto, caption, id galleryGrid, dan lightbox TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v39. */
section.galeri#galeri.section-pad.mist-bg{background:url("assets/scene/bg-emerald-nohouse.webp") center / cover no-repeat !important;padding-bottom:140px !important}
section.galeri#galeri .gallery-art{display:block !important}
section.galeri#galeri .section-heading{background:rgba(10,53,39,0.78) !important;border:1px solid rgba(201,162,39,0.4) !important;border-radius:16px !important;padding:24px !important;margin:0 auto 32px auto !important;text-align:center !important;max-width:90% !important}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){section.galeri#galeri .section-heading{background:rgba(10,53,39,0.38) !important;-webkit-backdrop-filter:blur(14px) !important;backdrop-filter:blur(14px) !important}}
section.galeri#galeri .section-heading .eyebrow{color:#C9A227 !important;text-align:center !important;display:block !important;margin-bottom:8px !important}
section.galeri#galeri .section-heading h2{color:#FAF6EE !important;text-align:center !important;margin:0 !important}
section.galeri#galeri .section-heading p{color:#FAF6EE !important;text-align:center !important}
section.galeri#galeri .gallery-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:16px !important;padding:0 16px !important}
@media (min-width:768px){section.galeri#galeri .gallery-grid{grid-template-columns:repeat(3,1fr) !important}}
section.galeri#galeri .gallery-item{margin:0 !important;padding:0 !important;border:1px solid #C9A227 !important;border-radius:12px !important;overflow:hidden !important;aspect-ratio:1 / 1 !important;opacity:0 !important;transform:translateY(18px) !important;filter:blur(10px) !important;transition:opacity 1.4s ease,transform 1.4s ease,filter 1.4s ease !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item{opacity:1 !important;transform:translateY(0) !important;filter:blur(0) !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(1){transition-delay:0.15s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(2){transition-delay:0.30s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(3){transition-delay:0.45s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(4){transition-delay:0.60s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(5){transition-delay:0.75s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item:nth-child(6){transition-delay:0.90s !important}
section.galeri#galeri .gallery-item img{width:100% !important;height:100% !important;object-fit:cover !important;display:block !important}

/* === cerita-v40.css === */
/* CERITA v40 - OVERNIGHT, PANDUAN ARGON 2026-11-01 01:04 WIB, port 18084, 1301 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover padding-bottom 140 color ivory; heading dan timeline-item glassmorph fallback solid .78 blur .38 radius 16; heading center padding 24 margin 40 auto width 90% max-width 600 eyebrow emas h2 ivory; timeline max-width 800 padding 0 20 garis emas vertikal left 40; item margin-left 60 margin-bottom 24 padding 24 text-align left; marker dot emas 16px border dark outline emas; label emas judul ivory deskripsi ivory; animasi reveal fade-blur 1.4s stagger heading 0s item1 0.2s item2 0.4s item3 0.6s dengan trigger is-visible. */
/* PEMETAAN YANG DIBERITAHUKAN: class label Argon .label dipetakan ke class asli .timeline-item__label (emas, uppercase); gambar penanda bunga-emerald di dalam marker DISEMBUNYIKAN eksplisit (img dan picture display none), diganti dot emas Argon, karena gambar itu terlarang dan kalau tidak disembunyikan akan tetap tampil di dalam dot emas. */
/* Teks cerita TIDAK diubah dan TIDAK dikarang baru (cerita asli klien masih belum ada). Portal, hero, slide lain TIDAK diubah di v40. */
section.cerita#cerita.section-pad.mist-bg{background-image:url("assets/scene/bg-emerald-nohouse.webp") !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;padding-bottom:140px !important;color:#FAF6EE !important;position:relative !important;overflow:hidden !important}
section.cerita#cerita .section-heading,section.cerita#cerita .timeline-item{background-color:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:16px !important}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){section.cerita#cerita .section-heading,section.cerita#cerita .timeline-item{background-color:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
section.cerita#cerita .section-heading{text-align:center !important;padding:24px !important;margin:40px auto !important;width:90% !important;max-width:600px !important}
section.cerita#cerita .section-heading .eyebrow{color:#C9A227 !important;font-size:0.9rem !important;letter-spacing:2px !important;text-transform:uppercase !important;display:block !important;margin-bottom:8px !important}
section.cerita#cerita .section-heading h2{color:#FAF6EE !important;font-size:2rem !important;margin:0 !important;font-weight:600 !important}
section.cerita#cerita .section-heading p{color:#FAF6EE !important}
section.cerita#cerita .timeline{position:relative !important;max-width:800px !important;margin:0 auto !important;padding:0 20px !important}
section.cerita#cerita .timeline::before{content:"" !important;position:absolute !important;top:20px !important;bottom:20px !important;left:40px !important;width:1px !important;background:rgba(233,206,122,0.45) !important}
section.cerita#cerita .timeline-item{position:relative !important;text-align:left !important;margin-left:60px !important;margin-bottom:24px !important;padding:24px !important}
section.cerita#cerita .timeline-item .timeline-marker{position:absolute !important;left:-48px !important;top:32px !important;width:16px !important;height:16px !important;background-image:none !important;background-color:#C9A227 !important;border-radius:50% !important;border:3px solid rgba(10,53,39,0.78) !important;outline:1px solid #C9A227 !important;outline-offset:3px !important;z-index:2 !important}
section.cerita#cerita .timeline-item .timeline-marker img,section.cerita#cerita .timeline-item .timeline-marker picture{display:none !important}
section.cerita#cerita .timeline-item__label{display:block !important;color:#C9A227 !important;font-size:0.85rem !important;text-transform:uppercase !important;letter-spacing:1px !important;margin-bottom:8px !important}
section.cerita#cerita .timeline-item h3{color:#FAF6EE !important;font-size:1.3rem !important;margin:0 0 10px 0 !important;font-weight:500 !important}
section.cerita#cerita .timeline-item p{color:#FAF6EE !important;font-size:0.95rem !important;line-height:1.6 !important;margin:0 !important;opacity:0.9 !important}
section.cerita#cerita .timeline-item p.timeline-item__label{opacity:1 !important}
section.cerita#cerita .reveal{opacity:0 !important;transform:translateY(18px) !important;filter:blur(10px) !important;transition:opacity 1.4s ease,transform 1.4s ease,filter 1.4s ease !important}
section.cerita#cerita .reveal.is-visible{opacity:1 !important;transform:translateY(0) !important;filter:blur(0) !important}
section.cerita#cerita .section-heading.reveal{transition-delay:0s !important}
section.cerita#cerita .timeline-item.reveal:nth-child(1){transition-delay:0.2s !important}
section.cerita#cerita .timeline-item.reveal:nth-child(2){transition-delay:0.4s !important}
section.cerita#cerita .timeline-item.reveal:nth-child(3){transition-delay:0.6s !important}

/* === rsvp-v41.css === */
/* RSVP v41 - OVERNIGHT, PANDUAN ARGON 2026-11-01 01:06 WIB, port 18085, 1651 token, finish stop. BUKAN model Muse untuk coding. */
/* Argon: section background bg-nohouse cover padding-bottom 140; panel glassmorph fallback solid .78 blur .38 radius 16 padding 40/24 max-width 600 width 90%; heading center eyebrow emas h2 ivory; form flex column gap 20 label emas; input/select/textarea kaca gelap teks ivory placeholder terang border emas focus; select option dark; fieldset legend emas radio accent emas; tombol gold solid hover light gold z-index 2; status emas center; wishes card kaca gelap; animasi fadeBlurIn 1.4s stagger heading 0s form 0.2s wishes 0.4s dengan trigger panel.is-visible. */
/* PEMETAAN YANG DIBERITAHUKAN: input nama asli tidak punya atribut type, jadi selector Argon input[type=text] TIDAK akan mengenai input itu. Ditambahkan selector #guestInput dengan gaya yang sama, supaya input nama tetap bergaya kaca. Fieldset asli tidak punya div pembungkus, jadi aturan flex Argon untuk fieldset div tidak jalan — diganti fieldset display flex gap 20 supaya pilihan Hadir/Tidak hadir berjarak. Paragraf intro heading dan teks ucapan kosong diberi warna ivory eksplisit. */
/* Form, id, name, radio, select, tombol, dan JS TIDAK diubah. TIDAK ada Wedding Gift atau QR. Portal, hero, slide lain TIDAK diubah di v41. */
section.rsvp#rsvp.section-pad.mist-bg{background-image:url("assets/scene/bg-emerald-nohouse.webp") !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;padding-bottom:140px !important;position:relative !important}
section.rsvp#rsvp div.rsvp__panel{background:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;border-radius:16px !important;padding:40px 24px !important;margin:0 auto !important;max-width:600px !important;width:90% !important}
@supports (backdrop-filter:blur(14px)){section.rsvp#rsvp div.rsvp__panel{background:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
section.rsvp#rsvp div.rsvp__panel div.section-heading{text-align:center !important;margin-bottom:32px !important}
section.rsvp#rsvp div.rsvp__panel div.section-heading .eyebrow{color:#C9A227 !important;font-size:12px !important;letter-spacing:2px !important;text-transform:uppercase !important;display:block !important;margin-bottom:8px !important}
section.rsvp#rsvp div.rsvp__panel div.section-heading h2{color:#FAF6EE !important;font-size:28px !important;font-weight:400 !important;margin:0 !important}
section.rsvp#rsvp div.rsvp__panel div.section-heading p{color:#FAF6EE !important}
section.rsvp#rsvp form.rsvp-form{display:flex !important;flex-direction:column !important;gap:20px !important}
section.rsvp#rsvp form.rsvp-form label{color:#C9A227 !important;font-size:14px !important;display:block !important;margin-bottom:8px !important}
section.rsvp#rsvp form.rsvp-form input#guestInput,section.rsvp#rsvp form.rsvp-form input[type="text"],section.rsvp#rsvp form.rsvp-form select,section.rsvp#rsvp form.rsvp-form textarea{width:100% !important;background:rgba(0,0,0,0.25) !important;border:1px solid rgba(233,206,122,0.3) !important;color:#FAF6EE !important;padding:12px 16px !important;border-radius:8px !important;font-family:inherit !important;font-size:14px !important;outline:none !important;box-sizing:border-box !important;transition:border-color 0.3s ease !important}
section.rsvp#rsvp form.rsvp-form input#guestInput::placeholder,section.rsvp#rsvp form.rsvp-form input[type="text"]::placeholder,section.rsvp#rsvp form.rsvp-form textarea::placeholder{color:rgba(250,246,238,0.6) !important}
section.rsvp#rsvp form.rsvp-form input#guestInput:focus,section.rsvp#rsvp form.rsvp-form input[type="text"]:focus,section.rsvp#rsvp form.rsvp-form select:focus,section.rsvp#rsvp form.rsvp-form textarea:focus{border-color:#C9A227 !important}
section.rsvp#rsvp form.rsvp-form select option{background:#0A3527 !important;color:#FAF6EE !important}
section.rsvp#rsvp form.rsvp-form fieldset{border:none !important;padding:0 !important;margin:0 !important;display:flex !important;gap:20px !important;flex-wrap:wrap !important;align-items:center !important}
section.rsvp#rsvp form.rsvp-form legend{color:#C9A227 !important;font-size:14px !important;margin-bottom:12px !important;padding:0 !important;width:100% !important}
section.rsvp#rsvp form.rsvp-form input[type="radio"]{accent-color:#C9A227 !important;margin-right:8px !important;cursor:pointer !important}
section.rsvp#rsvp form.rsvp-form fieldset label{color:#FAF6EE !important;display:inline-flex !important;align-items:center !important;margin-bottom:0 !important;cursor:pointer !important}
section.rsvp#rsvp form.rsvp-form button{background:#C9A227 !important;color:#0A3527 !important;border:none !important;padding:14px 24px !important;border-radius:8px !important;font-weight:600 !important;font-size:15px !important;cursor:pointer !important;margin-top:12px !important;transition:background-color 0.3s ease !important;position:relative !important;z-index:2 !important}
section.rsvp#rsvp form.rsvp-form button:hover,section.rsvp#rsvp form.rsvp-form button:focus{background:#E9CE7A !important}
section.rsvp#rsvp p.form-status{color:#C9A227 !important;font-size:13px !important;text-align:center !important;margin:8px 0 0 0 !important}
section.rsvp#rsvp div.wishes{margin-top:32px !important;display:flex !important;flex-direction:column !important;gap:12px !important}
section.rsvp#rsvp div.wishes>div,section.rsvp#rsvp div.wishes .wish-card{background:rgba(0,0,0,0.2) !important;border:1px solid rgba(233,206,122,0.2) !important;border-radius:12px !important;padding:16px !important;color:#FAF6EE !important;font-size:14px !important}
section.rsvp#rsvp p.wishes__empty{color:#FAF6EE !important;text-align:center !important}
section.rsvp#rsvp div.rsvp__panel div.section-heading,section.rsvp#rsvp div.rsvp__panel form.rsvp-form,section.rsvp#rsvp div.rsvp__panel div.wishes{opacity:0 !important;transform:translateY(18px) !important;filter:blur(10px) !important}
section.rsvp#rsvp div.rsvp__panel.is-visible div.section-heading,section.rsvp#rsvp div.rsvp__panel.is-visible form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.is-visible div.wishes{animation:fadeBlurIn 1.4s ease forwards !important}
section.rsvp#rsvp div.rsvp__panel.is-visible div.section-heading{animation-delay:0s !important}
section.rsvp#rsvp div.rsvp__panel.is-visible form.rsvp-form{animation-delay:0.2s !important}
section.rsvp#rsvp div.rsvp__panel.is-visible div.wishes{animation-delay:0.4s !important}
@keyframes fadeBlurIn{to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* === ayat-v35.css === */
/* AYAT v35 - PANDUAN ARGON 2026-11-01 00:32 WIB, port 18084, 1205 token, finish stop (draft), BUKAN model Muse untuk coding. Bingkai Canva dari lembar "Bingkai Ayat v35 - Frame Card" 2400x2400, file 4.0 MB, diverifikasi 2026-11-01 01:09 WIB. */
/* KOREKSI PENTING YANG DIBERITAHUKAN: 8 elemen di lembar Canva itu BUKAN bingkai penuh — setelah dicek piksel demi piksel, tiap elemen hanya sisi atas + sisi kiri (bentuk L / sudut), sisi kanan dan bawahnya tidak ada di PNG. Jadi placeholder frame penuh di draft Argon TIDAK bisa dipakai apa adanya. Solusi yang dipakai: sudut terbaik (frame 3 "retro horizontal golden painting frame cut out", EDU, ukir daun emas gelap, bukan kuning neon) dibalik 4 arah menjadi sudut TL/TR/BL/BR, dipasang di 4 sudut panel seperti sistem sudut v33 yang sudah terbukti. Ini tetap bingkai emas ukir seperti bingkai foto slide 1, hanya dirakit dari 4 sudut, bukan satu PNG penuh. */
/* Argon draft yang dipertahankan: section background bg-nohouse cover, panel glassmorph rgba(10,53,39,0.38) blur(14px) saturate(1.2) border emas 0.45, box-shadow emas lembut, teks center, eyebrow/source/divider emas, arabic/translation/hadith/javanese/javanese-translation ivory, animasi fadeBlurUp 1.4s stagger eyebrow 0s arabic 0.15s translation 0.3s source 0.45s divider 0.6s hadith 0.75s javanese 0.9s javanese-translation 1.05s dengan trigger reveal.is-visible, section padding-bottom 140 + panel margin-bottom 80 supaya tidak ketutup bottom nav. */
/* Perubahan dari draft yang diberitahukan: (1) ::before bukan lagi satu frame penuh, melainkan 4 sudut baroque 120px; (2) padding panel diubah dari 80/50 menjadi 120/60 supaya sudut 120px (tinggi ~106px) tidak menutupi eyebrow dan baris terakhir; (3) Kawung tipis v34 dihapus dari panel, supaya card tidak ramai lagi seperti keluhan v34 — diganti kaca + sudut emas. Teks Ayat TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v35. */
section.ayat#ayat.section-pad.mist-bg{background:url("assets/scene/bg-emerald-nohouse.webp") center / cover no-repeat !important;padding-bottom:140px !important}
section.ayat#ayat div.geboyok-panel{position:relative !important;background:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important;border:1px solid rgba(233,206,122,0.45) !important;box-shadow:0 10px 30px rgba(201,162,39,0.15) !important;padding:120px 60px !important;margin-bottom:80px !important;text-align:center !important}
@supports not (backdrop-filter:blur(14px)){section.ayat#ayat div.geboyok-panel{background:rgba(10,53,39,0.78) !important}}
section.ayat#ayat div.geboyok-panel::before{content:"" !important;position:absolute !important;inset:0 !important;background-image:url("assets/ornamen-baru/sudut-baroque-tl.webp"),url("assets/ornamen-baru/sudut-baroque-tr.webp"),url("assets/ornamen-baru/sudut-baroque-bl.webp"),url("assets/ornamen-baru/sudut-baroque-br.webp") !important;background-position:left top,right top,left bottom,right bottom !important;background-size:120px auto,120px auto,120px auto,120px auto !important;background-repeat:no-repeat,no-repeat,no-repeat,no-repeat !important;pointer-events:none !important;z-index:2 !important}
section.ayat#ayat div.geboyok-panel>*{position:relative !important;z-index:3 !important}
section.ayat#ayat div.geboyok-panel p.eyebrow,section.ayat#ayat div.geboyok-panel p.source,section.ayat#ayat div.geboyok-panel span.divider-dot{color:#C9A227 !important}
section.ayat#ayat div.geboyok-panel div.arabic,section.ayat#ayat div.geboyok-panel p.translation,section.ayat#ayat div.geboyok-panel p.hadith,section.ayat#ayat div.geboyok-panel p.javanese,section.ayat#ayat div.geboyok-panel p.javanese-translation{color:#FAF6EE !important}
section.ayat#ayat div.geboyok-panel.reveal p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal div.arabic,section.ayat#ayat div.geboyok-panel.reveal p.translation,section.ayat#ayat div.geboyok-panel.reveal p.source,section.ayat#ayat div.geboyok-panel.reveal span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal p.hadith,section.ayat#ayat div.geboyok-panel.reveal p.javanese,section.ayat#ayat div.geboyok-panel.reveal p.javanese-translation{opacity:0 !important}
@keyframes fadeBlurUp{0%{opacity:0;filter:blur(10px);transform:translateY(18px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal.is-visible div.arabic,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.translation,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.source,section.ayat#ayat div.geboyok-panel.reveal.is-visible span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.hadith,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese-translation{animation:fadeBlurUp 1.4s both !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.eyebrow{animation-delay:0s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible div.arabic{animation-delay:0.15s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.translation{animation-delay:0.3s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.source{animation-delay:0.45s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible span.divider-dot{animation-delay:0.6s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.hadith{animation-delay:0.75s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese{animation-delay:0.9s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese-translation{animation-delay:1.05s !important}

/* === penutup-v42.css === */
/* PENUTUP v42 - OVERNIGHT, PANDUAN ARGON 2026-11-01 01:09-01:13 WIB, port 18081, 1292 token, finish stop (panggilan lambat ~402 detik, sempat jalan di background). BUKAN model Muse untuk coding. */
/* Argon: footer background bg-nohouse cover, padding 72/32/180/32, flex column center, text center; panel kaca ::before top 24 bottom 140 left 16 right 16 radius 20 fallback solid .78 blur .38 border emas .45; ornamen mini-joglo disembunyikan, diganti divider emas bergaris diagonal 90x10; eyebrow emas, pesan/salam ivory, nama mempelai besar emas, watermark kecil emas; animasi fade-blur 1.4s stagger ornamen+eyebrow 0s pesan 0.2s salam 0.4s nama 0.6s watermark 0.8s. */
/* PEMETAAN YANG DIBERITAHUKAN: (1) Trigger Argon footer.is-visible TIDAK PERNAH jalan — footer tidak punya class .reveal, dan JS reveal hanya menambah .is-visible ke elemen .reveal saja. Kalau trigger itu dipakai apa adanya, seluruh teks Penutup akan tersembunyi selamanya (opacity 0). Jadi animasi diterapkan langsung ke anak-anak footer (tanpa gate .is-visible), dengan fill both sehingga keadaan akhir opacity 1 dijamin, terlihat kapan pun pengguna sampai ke footer. (2) font-family serif Argon untuk nama mempelai DIBUANG, supaya font asli footer (Jawa Palsu / font asli) tidak berubah. (3) Watermark: aturan opacity 0.8 Argon akan bertabrakan dengan opacity 0 awal dan menyebabkan kedip saat delay — di sini opacity awal 0 dan animasi berakhir di opacity 1. */
/* Teks dan watermark TIDAK diubah, mini-joglo TIDAK ditampilkan. Portal, hero, slide lain TIDAK diubah di v42. */
footer.footer#penutup.section-pad.mist-bg{position:relative !important;background-image:url("assets/scene/bg-emerald-nohouse.webp") !important;background-size:cover !important;background-position:center !important;background-repeat:no-repeat !important;padding:72px 32px 180px 32px !important;display:flex !important;flex-direction:column !important;align-items:center !important;justify-content:center !important;text-align:center !important;z-index:1 !important;overflow:hidden !important}
footer.footer#penutup::before{content:"" !important;position:absolute !important;top:24px !important;bottom:140px !important;left:16px !important;right:16px !important;border-radius:20px !important;background-color:rgba(10,53,39,0.78) !important;border:1px solid rgba(233,206,122,0.45) !important;z-index:-1 !important;pointer-events:none !important}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){footer.footer#penutup::before{background-color:rgba(10,53,39,0.38) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
footer.footer#penutup div.footer__ornament img,footer.footer#penutup div.footer__ornament picture{display:none !important}
footer.footer#penutup div.footer__ornament{position:relative !important;z-index:2 !important;width:90px !important;height:10px !important;margin:0 auto 24px auto !important;border-top:1px solid rgba(233,206,122,0.5) !important;border-bottom:1px solid rgba(233,206,122,0.5) !important;background:repeating-linear-gradient(45deg,transparent,transparent 3px,rgba(233,206,122,0.35) 3px,rgba(233,206,122,0.35) 4px) !important}
footer.footer#penutup p.eyebrow,footer.footer#penutup p.footer__message,footer.footer#penutup p.footer__salutation,footer.footer#penutup p.footer__couple,footer.footer#penutup small.watermark{position:relative !important;z-index:2 !important;text-align:center !important;margin-left:auto !important;margin-right:auto !important;box-shadow:none !important;text-shadow:none !important}
footer.footer#penutup p.eyebrow{color:#C9A227 !important;font-size:0.9rem !important;letter-spacing:0.2em !important;text-transform:uppercase !important;margin-bottom:16px !important;font-weight:600 !important}
footer.footer#penutup p.footer__message{color:#FAF6EE !important;font-size:1rem !important;line-height:1.6 !important;margin-bottom:12px !important}
footer.footer#penutup p.footer__salutation{color:#FAF6EE !important;font-size:1rem !important;margin-bottom:24px !important;font-weight:500 !important}
footer.footer#penutup p.footer__couple{color:#C9A227 !important;font-size:2.4rem !important;font-weight:bold !important;margin-bottom:32px !important;line-height:1.2 !important}
footer.footer#penutup small.watermark{color:#C9A227 !important;font-size:0.8rem !important;letter-spacing:0.05em !important;display:block !important;margin-top:12px !important}
@keyframes footerFadeBlurIn{0%{opacity:0;filter:blur(10px);transform:translateY(18px)}100%{opacity:1;filter:blur(0);transform:translateY(0)}}
footer.footer#penutup div.footer__ornament,footer.footer#penutup p.eyebrow{animation:footerFadeBlurIn 1.4s ease-out 0s both !important}
footer.footer#penutup p.footer__message{animation:footerFadeBlurIn 1.4s ease-out 0.2s both !important}
footer.footer#penutup p.footer__salutation{animation:footerFadeBlurIn 1.4s ease-out 0.4s both !important}
footer.footer#penutup p.footer__couple{animation:footerFadeBlurIn 1.4s ease-out 0.6s both !important}
footer.footer#penutup small.watermark{animation:footerFadeBlurIn 1.4s ease-out 0.8s both !important}

/* === fix-v43.css === */
/* FIX v43 - CARD KOSONG, PANDUAN ARGON 2026-11-01 08:37 WIB, port 18082, 1716 token, finish stop. BUKAN model Muse untuk coding. */
/* AKAR MASALAH YANG DITEMUKAN (bukan tebakan): slide yang pakai ANIMASI (Ayat v35, Mempelai v36, RSVP v41) menaruh opacity:0 !important di aturan dasar, lalu animasi keyframe-nya mencoba ke opacity:1. Di CSS, !important menang atas keyframe animasi, jadi walau .is-visible sudah ditambahkan JS, teks tetap opacity:0 — card terlihat kosong walau sudah di-scroll ke tengah. Slide yang pakai TRANSISI (Acara v38, Cerita v40, Countdown v37, Galeri v39) tidak kena masalah ini, karena aturan .is-visible-nya juga pakai opacity:1 !important. */
/* PERBAIKAN v43 (desain, layout, warna, kaca, foto, teks HTML TIDAK diubah): */
/* (1) Untuk slide animasi, tambahkan opacity:1 !important saat .is-visible, supaya !important lama kalah oleh aturan baru yang lebih spesifik dan paling akhir. Animasi blur+geser tetap jalan (transform/filter tidak !important di aturan dasar), hanya fade opacity-nya yang diganti jadi langsung terlihat — tulisan PASTI muncul, animasi blur+geser tetap terasa. */
/* (2) Fallback pengaman Argon: elemen .reveal yang TIDAK pernah dapat .is-visible tetap dimunculkan setelah jeda, dengan animasi blur+geser saja (bukan opacity, supaya tidak kalah !important lagi) dan opacity:1 !important di aturan dasar fallback. Jeda fallback 3 detik memberi waktu animasi normal JS dulu, baru pengaman jalan. Stagger fallback mengikuti Argon (1.5-2.4 detik di panduan, di sini digeser ke 3 detik ke atas supaya tidak berebut dengan animasi normal). */
/* (3) Caption Galeri dari Argon: ::after dengan content attr(data-caption), TANPA ubah HTML, teks ivory #FAF6EE (bukan nama warna ivory generik Argon, disamakan dengan ivory desain), latar gradasi hitam bawah, di dalam tile border emas radius 12, pointer-events none supaya foto tetap bisa diklik ke lightbox. */
/* (4) Bayangan teks gelap tipis dari Argon untuk teks ivory di atas kaca/lukisan terang, supaya terbaca, tanpa ubah warna teks. */
/* Portal, hero, live TIDAK diubah di v43. */
@keyframes v43FadeBlur{0%{filter:blur(10px);transform:translateY(18px)}100%{filter:blur(0);transform:translateY(0)}}
/* (1) Slide animasi: paksa terlihat saat is-visible */
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal.is-visible div.arabic,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.translation,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.source,section.ayat#ayat div.geboyok-panel.reveal.is-visible span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.hadith,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese-translation{opacity:1 !important}
section.mempelai#mempelai .reveal.is-visible{opacity:1 !important}
section.rsvp#rsvp div.rsvp__panel.is-visible div.section-heading,section.rsvp#rsvp div.rsvp__panel.is-visible form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.is-visible div.wishes{opacity:1 !important}
/* (2) Fallback: reveal yang tidak pernah dapat is-visible */
section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible),section.mempelai#mempelai .reveal:not(.is-visible),section.countdown#countdown div.countdown__inner.reveal:not(.is-visible),section.acara#acara .reveal:not(.is-visible),section.galeri#galeri .section-heading.reveal:not(.is-visible),section.galeri#galeri .gallery-item:not(.is-visible),section.cerita#cerita .reveal:not(.is-visible),section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible){opacity:1 !important;animation:v43FadeBlur 1.4s ease 3s both !important}
section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) div.arabic,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.translation,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.source,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.hadith,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.javanese,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.javanese-translation{opacity:1 !important;animation:v43FadeBlur 1.4s ease 3s both !important}
section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) p.eyebrow,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) h2,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) div.timer,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) p.countdown__note{opacity:1 !important;animation:v43FadeBlur 1.4s ease 3s both !important}
section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.section-heading,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.wishes{opacity:1 !important;animation:v43FadeBlur 1.4s ease 3s both !important}
/* (3) Caption Galeri */
section.galeri#galeri .gallery-item{position:relative !important;overflow:hidden !important}
section.galeri#galeri .gallery-item[data-caption]::after{content:attr(data-caption) !important;position:absolute !important;bottom:0 !important;left:0 !important;width:100% !important;padding:30px 12px 12px 12px !important;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.3) 60%,transparent 100%) !important;color:#FAF6EE !important;font-size:0.9rem !important;font-weight:500 !important;text-align:center !important;box-sizing:border-box !important;border-bottom-left-radius:12px !important;border-bottom-right-radius:12px !important;pointer-events:none !important;z-index:2 !important;text-shadow:1px 1px 4px rgba(0,0,0,0.75) !important}
section.galeri#galeri .gallery-item[data-caption=""]::after{display:none !important}
/* (4) Bayangan teks tipis */
section.ayat#ayat div.geboyok-panel,section.ayat#ayat div.geboyok-panel *,section.mempelai#mempelai .profile-card,section.mempelai#mempelai .profile-card *,section.mempelai#mempelai div.couple-mark,section.countdown#countdown div.countdown__inner,section.countdown#countdown div.countdown__inner *,section.acara#acara .event-card,section.acara#acara .event-card *,section.cerita#cerita .timeline-item,section.cerita#cerita .timeline-item *,section.rsvp#rsvp div.rsvp__panel,section.rsvp#rsvp div.rsvp__panel *,section.mempelai#mempelai .section-heading,section.acara#acara .section-heading,section.galeri#galeri .section-heading,section.cerita#cerita .section-heading{text-shadow:1px 1px 4px rgba(0,0,0,0.75),0px 0px 2px rgba(0,0,0,0.4) !important}

/* === fix-v44.css === */
/* FIX v44 - COUNTDOWN + RSVP SLIDE 8, PANDUAN ARGON 2026-11-01 09:38 WIB, port 18083, 1704 token, finish stop. BUKAN model Muse untuk coding. */
/* COUNTDOWN: akar overflow — panel v37 width 90% max 500 padding 48/24, angka 2.8rem, unit min-width 64px, gap 16px, total timer ~340px, sementara isi card di HP 360px hanya ~236px, jadi timer keluar card dan angka terpotong sehingga waktu terbaca salah. Perbaikan pakai media query responsif Argon (480px dan 360px), DENGAN pemetaan warna desain: panel/kaca/border/radius/blur v37 DIPERTAHANKAN, warna panel Argon rgba(2,60,40,0.45) / border (212,175,55) / blur 8px TIDAK dipakai; angka tetap ivory #FAF6EE (bukan emas #d4af37 Argon), label/pemisah tetap emas #C9A227 (bukan #e0e0e0 / #d4af37 Argon). Target JS TIDAK diubah di CSS ini — target sudah benar Senin 30 November 2026 14.00 WIB (+07:00, Lumajang), lihat catatan HTML v44 (note ditambah jam 14.00 WIB supaya target jelas). */
/* RSVP SLIDE 8: dari screenshot HP pengguna, isi panel terlihat BLUR total dan tulisan tidak terbaca. Penyebab: animasi fade-blur v41 memakai filter blur(10px) yang bisa macet di HP, sehingga teks tetap blur walau animasi seharusnya selesai. Perbaikan: paksa filter:none !important di semua keadaan panel RSVP, sehingga animasi yang tersisa hanya fade opacity + geser translateY (tetap ada animasi, tapi tidak pernah blur). Trigger .active Argon TIDAK dipakai (situs ini hanya pakai .is-visible, .active tidak pernah jalan, kesalahan berulang Argon) — dipakai .is-visible saja. Warna panel/input/tombol/h2 Argon (background putih .1, h2 emas #d4af37, tombol lebar penuh) TIDAK dipakai, desain v41 DIPERTAHANKAN. */
/* Slide lain, portal, hero, teks lain TIDAK diubah di v44, kecuali note Countdown (jam 14.00 WIB) yang diubah via skrip terpisah dan diberitahukan. */
section.countdown#countdown div.countdown__inner.reveal{box-sizing:border-box !important}
section.countdown#countdown div.timer{width:100% !important;flex-wrap:nowrap !important;box-sizing:border-box !important}
section.countdown#countdown div.timer__unit{flex:1 1 0 !important;min-width:64px !important}
section.countdown#countdown div.timer i{flex-shrink:0 !important}
section.countdown#countdown strong{font-size:clamp(1.4rem,8vw,2.8rem) !important;color:#FAF6EE !important}
section.countdown#countdown div.timer span{color:#C9A227 !important}
section.countdown#countdown div.timer i{color:#C9A227 !important}
@media (max-width:480px){
section.countdown#countdown div.countdown__inner.reveal{width:95% !important;padding:32px 12px !important}
section.countdown#countdown div.timer{gap:6px !important}
section.countdown#countdown div.timer__unit{min-width:0 !important;flex-basis:22% !important}
section.countdown#countdown strong{font-size:1.8rem !important}
section.countdown#countdown div.timer span{font-size:0.7rem !important;letter-spacing:0 !important}
section.countdown#countdown div.timer i{font-size:1.4rem !important;transform:translateY(-10px) !important}
}
@media (max-width:360px){
section.countdown#countdown div.countdown__inner.reveal{padding:24px 6px !important}
section.countdown#countdown div.timer{gap:4px !important}
section.countdown#countdown strong{font-size:1.4rem !important}
section.countdown#countdown div.timer span{font-size:0.6rem !important}
section.countdown#countdown div.timer i{font-size:1.2rem !important;transform:translateY(-8px) !important}
}
@media (max-width:480px){
section.rsvp#rsvp div.rsvp__panel.reveal{width:95% !important;padding:32px 16px !important}
}
section.rsvp#rsvp div.rsvp__panel.reveal,section.rsvp#rsvp div.rsvp__panel.reveal.is-visible,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible){filter:none !important;-webkit-filter:none !important}
section.rsvp#rsvp div.rsvp__panel.reveal div.section-heading,section.rsvp#rsvp div.rsvp__panel.reveal form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.reveal div.wishes,section.rsvp#rsvp div.rsvp__panel.reveal.is-visible div.section-heading,section.rsvp#rsvp div.rsvp__panel.reveal.is-visible form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.reveal.is-visible div.wishes,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.section-heading,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.wishes{filter:none !important;-webkit-filter:none !important}
section.rsvp#rsvp div.rsvp__panel.reveal div.section-heading *,section.rsvp#rsvp div.rsvp__panel.reveal form.rsvp-form *,section.rsvp#rsvp div.rsvp__panel.reveal div.wishes *{filter:none !important;-webkit-filter:none !important}

/* === cerita-v45.css === */
/* CERITA v45 - OUR LOVE STORY, PANDUAN ARGON 2026-11-01 09:41 WIB, port 18084, 516 token, finish stop. BUKAN model Muse untuk coding. Teks cerita PERSIS dari JURAGAN, bukan dari Argon. */
/* Argon: section padding-bottom 220px (dari 140px v40, supaya item ke-4 yang lebih panjang tidak ketutup bottom nav), item ke-4 transition-delay 0.8s, paragraf line-height 1.6 dengan overflow-wrap. */
/* PEMETAAN YANG DIBERITAHUKAN: trigger Argon section.is-visible dan timeline.is-visible TIDAK dipakai (section/timeline tidak pernah dapat .is-visible, hanya elemen .reveal yang dapat) — aturan v40 .reveal.is-visible sudah mencakup item ke-4, jadi yang dipakai dari Argon hanya delay 0.8s-nya. Class .card Argon TIDAK ada di HTML asli (struktur asli article > span.marker + div > label/h3/p), jadi aturan wrap-nya dipetakan ke article.timeline-item, div di dalamnya, dan p di dalamnya. */
/* Desain v40 DIPERTAHANKAN: background bg-nohouse, card kaca, marker dot emas, label emas, judul/deskripsi ivory, animasi fade-blur 1.4s dengan trigger .is-visible. Hanya isi teks, jumlah item (3 -> 4), dan padding bawah section yang berubah. Portal, hero, slide lain TIDAK diubah di v45. */
section.cerita#cerita.section-pad.mist-bg{padding-bottom:220px !important}
section.cerita#cerita .timeline-item.reveal:nth-child(4){transition-delay:0.8s !important}
section.cerita#cerita article.timeline-item,section.cerita#cerita article.timeline-item div,section.cerita#cerita article.timeline-item p{overflow-wrap:break-word !important;word-wrap:break-word !important;word-break:break-word !important;white-space:normal !important;box-sizing:border-box !important}
section.cerita#cerita article.timeline-item p{line-height:1.6 !important;margin-bottom:0 !important}
section.cerita#cerita article.timeline-item p.timeline-item__label{margin-bottom:8px !important}

/* === hidup-v47.css === */
/* HIDUP v47 - INOVASI PER SLIDE, PANDUAN ARGON 2026-11-01 12:04 WIB, port 18081, 2178 token, finish stop. BUKAN model Muse untuk coding. */
/* Portal dan hero TIDAK diubah di v47 (keduanya sudah hidup: portal burung + bunga jatuh, hero pohon/bunga bergoyang). Inovasi ini untuk 8 slide isi yang sebelumnya mati: Ayat, Mempelai, Countdown, Acara, Galeri, Cerita, RSVP, Penutup. */
/* PEMETAAN PENTING YANG DIBERITAHUKAN: (1) Argon menaruh fly + bird-flap pada span .bird yang sama — itu akan menabrak, karena kedua animasi mengubah transform. Di CSS final ini, fly HANYA pada span .bird, flap HANYA pada svg di dalamnya, persis seperti sistem portal yang sudah terbukti. Tanpa pemetaan ini burung tidak akan terbang melintasi slide. (2) Burung portal hitam #1a1a1a diganti emas muda #E9CE7A karena background slide isi gelap. (3) Selector generik Argon dipetakan ke class asli: Countdown [class*=timer] -> .timer strong (angka saja, bukan container timer, supaya layout tidak bergeser); Galeri .reveal.is-visible img TIDAK PERNAH JALAN (tile galeri bukan .reveal) -> .section-heading.is-visible ~ .gallery-grid .gallery-item img; Cerita [class*=marker] -> .timeline-marker; Mempelai img[class*=foto] -> .profile-card__photo; Acara svg:not(.bird) DIBUANG (akan menggerakkan semua ikon pin di tombol) -> hanya .event-card__icon; RSVP [class*=btn] DIBUANG (tidak ada class btn di situs ini) -> hanya button[type=submit]. (4) Penutup: rotate jatuh Argon 360deg diubah jadi 20deg dan geser 40px jadi 12px, karena gambar flora adalah pohon/bunga tinggi, bukan kelopak bulat — putaran penuh akan terlihat seperti pohon berputar. (5) Tambahan keamanan: .gallery-item overflow hidden supaya zoom kenburns tidak meluber keluar tile. (6) TANPA filter blur di mana pun, khusus RSVP panel tidak disentuh sama sekali. */
/* Layer: .ambient z 0, semua anak section selain .ambient z 1, pointer-events none, transform/opacity saja, emas redup bukan neon. */
#ayat,#mempelai,#countdown,#acara,#galeri,#cerita,#rsvp,#penutup{position:relative}
#ayat>*:not(.ambient),#mempelai>*:not(.ambient),#countdown>*:not(.ambient),#acara>*:not(.ambient),#galeri>*:not(.ambient),#cerita>*:not(.ambient),#rsvp>*:not(.ambient),#penutup>*:not(.ambient){position:relative;z-index:1}
.ambient{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.ambient .bird{position:absolute;opacity:.7}
.ambient .bird svg{width:100%;height:auto;display:block;animation:bird-flap .5s ease-in-out infinite alternate}
.ambient .bird svg path{stroke:#E9CE7A;stroke-width:2.4;fill:none;stroke-linecap:round}
.ambient-flora{position:absolute;bottom:-5px;transform-origin:bottom center;z-index:0}
.ambient-flora img{display:block;width:100%;height:auto}
.ambient-flora--l{left:-5%;opacity:.45;max-width:140px;animation:bgtrees-sway 8s ease-in-out infinite alternate}
.ambient-flora--r{right:-5%;opacity:.6;max-width:160px;animation:bgtrees-sway 10s ease-in-out infinite alternate-reverse}
#ayat .ambient .b1{top:12%;width:22px;animation-name:fly-ltr;animation-duration:22s;animation-delay:.3s}
#ayat .ambient .b2{top:25%;width:18px;animation-name:fly-rtl;animation-duration:20s;animation-delay:3s}
#ayat .ambient-flora--l{max-width:120px;opacity:.5}
#mempelai .ambient .b1{top:15%;width:26px;animation-name:fly-rtl;animation-duration:16s;animation-delay:.5s}
#mempelai .ambient .b2{top:28%;width:20px;animation-name:fly-ltr;animation-duration:15s;animation-delay:2s}
#countdown .ambient .b1{top:10%;width:28px;animation-name:fly-ltr;animation-duration:14s;animation-delay:.2s}
#countdown .ambient .b2{top:26%;width:22px;animation-name:fly-rtl;animation-duration:15s;animation-delay:1s}
#acara .ambient .b1{top:8%;width:24px;animation-name:fly-rtl;animation-duration:9s;animation-delay:.3s}
#acara .ambient .b2{top:20%;width:20px;animation-name:fly-ltr;animation-duration:10s;animation-delay:1s}
#acara .ambient-flora--r{max-width:130px;opacity:.45}
#galeri .ambient .b1{top:14%;width:25px;animation-name:fly-ltr;animation-duration:13s;animation-delay:.4s}
#galeri .ambient .b2{top:30%;width:19px;animation-name:fly-rtl;animation-duration:14s;animation-delay:3s}
#cerita .ambient .b1{top:18%;width:22px;animation-name:fly-rtl;animation-duration:24s;animation-delay:.6s}
#cerita .ambient .b2{top:28%;width:18px;animation-name:fly-ltr;animation-duration:21s;animation-delay:2s}
#rsvp .ambient .b1{top:10%;width:26px;animation-name:fly-ltr;animation-duration:14s;animation-delay:.3s}
#rsvp .ambient .b2{top:24%;width:21px;animation-name:fly-rtl;animation-duration:15s;animation-delay:1s}
#penutup .ambient .b1{top:12%;width:28px;animation-name:fly-rtl;animation-duration:8s;animation-delay:.2s}
#penutup .ambient .b2{top:22%;width:24px;animation-name:fly-ltr;animation-duration:9s;animation-delay:1.5s}
@keyframes soft-gold-pulse{0%,100%{text-shadow:0 0 2px rgba(233,206,122,.3);transform:scale(1)}50%{text-shadow:0 0 8px rgba(233,206,122,.6);transform:scale(1.03)}}
#countdown .countdown__inner.is-visible .timer strong{animation:soft-gold-pulse 3s ease-in-out infinite}
.gallery-item{overflow:hidden}
#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item img{animation:kenburns 15s ease-out infinite alternate}
@keyframes soft-box-pulse{0%,100%{box-shadow:0 0 0 0 rgba(233,206,122,.5)}50%{box-shadow:0 0 0 6px rgba(233,206,122,0)}}
#cerita .timeline-item.is-visible .timeline-marker{animation:soft-box-pulse 2.5s infinite}
@keyframes soft-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
#mempelai .profile-card.is-visible .profile-card__photo{animation:soft-float 4s ease-in-out infinite}
@keyframes soft-btn-pulse{0%,100%{transform:scale(1);opacity:.95}50%{transform:scale(1.03);opacity:1}}
#rsvp button[type="submit"]{animation:soft-btn-pulse 2.5s ease-in-out infinite}
#acara .event-card.is-visible .event-card__icon{animation:soft-float 3.5s ease-in-out infinite}
@keyframes gentle-fall{0%{transform:translateY(-10vh) rotate(0deg) translateX(0);opacity:0}10%{opacity:.5}90%{opacity:.5}100%{transform:translateY(110vh) rotate(20deg) translateX(12px);opacity:0}}
#penutup .ambient-flora{bottom:auto;top:0;max-width:45px;animation:gentle-fall 14s linear infinite}
#penutup .ambient-flora--r{right:15%;max-width:35px;animation:gentle-fall 18s linear infinite 4s}
@media (max-width:768px){.ambient-flora{max-width:90px !important}.ambient .bird{width:18px !important;max-width:18px !important}#penutup .ambient-flora{max-width:30px !important}}

/* === nav-musik-v48.css === */
/* NAVBAR + TOMBOL MUSIK v48, PANDUAN ARGON 2026-11-01 14:04 WIB, navbar port 18082 1046 token, musik port 18083 1489 token, finish stop. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: */
/* NAVBAR: (1) z-index Argon 9999 DIBUANG, kembali ke 25 asli, supaya lightbox (z 60) dan tombol musik (z 30) tetap di atas navbar, bukan tertutup navbar. (2) bottom Argon 24px/16px dipetakan ke max(24px, safe-area) supaya HP berponi tidak menutupi pill. (3) Active Argon hanya background emerald gelap .65 — di atas kaca gelap itu hampir tidak terbaca, jadi ditambah border ivory tipis rgba(250,246,238,.18) dan shadow dalam, supaya highlight pill-nya jelas seperti referensi. (4) Warna teal-biru referensi TIDAK dipakai, palet tetap emerald #0A3527, emas #C9A227, ivory #FAF6EE. (5) Jumlah link TETAP 5 (Home, Mempelai, Acara, Galeri, Ucapan), bukan 4 seperti referensi, karena 5 tujuan itu fungsional; yang ditiru adalah bentuk pill kaca + highlight aktif + ikon saja. Label teks disembunyikan visual dengan font-size 0 pada link (teknik Argon), tapi tetap ada di DOM dan aria-label ditambahkan di HTML, jadi aksesibilitas dan href tidak berubah. */
/* MUSIK: (1) Emas Argon #d4af37 dipetakan ke emas situs #C9A227 (dan pulse rgba-nya ikut), supaya tidak ada warna emas baru. (2) #musicLabel TIDAK dihapus, hanya disembunyikan visual dengan teknik clip, karena JS app.js mengubah textContent-nya saat klik — kalau dihapus, JS akan error. (3) Satu-satunya hook state tetap class .is-playing dari JS lama, JS tidak diubah. (4) Tanpa filter blur pada disc. */
/* NAVBAR PILL KACA */
.bottom-nav{position:fixed;bottom:max(24px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);width:min(calc(100% - 24px),580px);display:flex;justify-content:space-around;align-items:center;padding:8px;background:rgba(5,15,11,.55);backdrop-filter:blur(16px) saturate(1.2);-webkit-backdrop-filter:blur(16px) saturate(1.2);border:1px solid rgba(250,246,238,.25);border-top:1px solid rgba(250,246,238,.4);border-radius:999px;box-shadow:0 8px 32px rgba(0,0,0,.25),0 2px 8px rgba(0,0,0,.15);z-index:25}
.bottom-nav a{display:flex;justify-content:center;align-items:center;padding:10px 14px;border-radius:999px;color:transparent;font-size:0;text-decoration:none;transition:background-color .25s ease,transform .2s ease;min-width:48px}
.bottom-nav a span{font-size:24px;color:#FAF6EE;display:block;transition:color .25s ease,transform .2s ease;font-weight:300}
.bottom-nav a:hover{transform:translateY(-2px)}
.bottom-nav a:hover span{color:#C9A227}
.bottom-nav a.active{background-color:rgba(10,53,39,.65);border:1px solid rgba(250,246,238,.18);box-shadow:inset 0 0 0 1px rgba(250,246,238,.08);padding:10px 20px}
.bottom-nav a.active span{color:#FAF6EE;font-weight:700;transform:scale(1.1)}
@media (max-width:400px){.bottom-nav{width:calc(100% - 16px);bottom:max(16px,env(safe-area-inset-bottom));padding:6px}.bottom-nav a{padding:8px 10px;min-width:40px}.bottom-nav a.active{padding:8px 16px}.bottom-nav a span{font-size:22px}}
/* TOMBOL MUSIK VINYL, BUKAN KOTAK */
.music-toggle{position:fixed;top:16px;right:16px;z-index:30;width:60px;height:60px;border-radius:50%;border:2px solid #C9A227;background:rgba(5,35,25,.65);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:0;margin:0;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;box-shadow:0 4px 10px rgba(0,0,0,.4);transition:box-shadow .3s ease;overflow:visible}
.music-toggle.is-playing{animation:goldPulse 2s infinite alternate}
.music-toggle::before{content:"";position:absolute;inset:2px;border-radius:50%;background:repeating-radial-gradient(rgba(0,0,0,.4) 0px,rgba(0,0,0,.6) 2px,rgba(201,162,39,.2) 3px,rgba(0,0,0,.4) 4px);z-index:1;animation:spinVinyl 3s linear infinite;animation-play-state:paused}
.music-toggle.is-playing::before{animation-play-state:running}
.music-toggle__disc{position:absolute;width:22px;height:22px;background:#C9A227;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;color:#111;z-index:2;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3),0 0 0 2px rgba(5,35,25,.9);animation:spinVinyl 3s linear infinite;animation-play-state:paused}
.music-toggle.is-playing .music-toggle__disc{animation-play-state:running}
#musicLabel{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.music-eq{position:absolute;bottom:-2px;right:-2px;width:22px;height:22px;background:#111;border:1.5px solid #C9A227;border-radius:50%;z-index:3;display:flex;align-items:center;justify-content:center;gap:2px;box-shadow:0 2px 5px rgba(0,0,0,.6)}
.music-eq::before{content:"";display:block;width:0;height:0;border-top:4px solid transparent;border-bottom:4px solid transparent;border-left:6px solid #C9A227;margin-left:2px}
.music-eq i{display:none}
.music-toggle.is-playing .music-eq::before{display:none}
.music-toggle.is-playing .music-eq i{display:block;width:2.5px;background:#C9A227;border-radius:1px;transform-origin:bottom;animation:eqBounce .6s ease-in-out infinite alternate}
.music-toggle.is-playing .music-eq i:nth-child(1){height:7px;animation-delay:0s}
.music-toggle.is-playing .music-eq i:nth-child(2){height:11px;animation-delay:.2s}
.music-toggle.is-playing .music-eq i:nth-child(3){height:8px;animation-delay:.4s}
@keyframes spinVinyl{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
@keyframes goldPulse{0%{box-shadow:0 0 5px rgba(201,162,39,.2),0 4px 10px rgba(0,0,0,.4)}100%{box-shadow:0 0 15px rgba(201,162,39,.5),0 0 25px rgba(201,162,39,.3)}}
@keyframes eqBounce{0%{transform:scaleY(.3)}100%{transform:scaleY(1)}}
@media (max-width:768px){.music-toggle{width:56px;height:56px;top:16px;right:16px}}

/* === nav-v49.css === */
/* NAVBAR v49 - IKON PROFESIONAL + INDIKATOR GESER + SCROLLSPY, PANDUAN ARGON 2026-11-01 14:10 WIB, port 18084, 2306 token, finish stop. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: (1) Emas Argon #D4AF37 / rgba(212,175,55) dipetakan ke emas situs #C9A227 / rgba(201,162,39), ivory #FFFFF0 dipetakan ke ivory situs #FAF6EE, supaya tidak ada warna baru. (2) z-index Argon 1000 DIBUANG, kembali ke 25 asli, supaya lightbox (60) dan tombol musik (30) tetap di atas navbar. (3) Lebar pill tetap dari v48 (min(calc(100%-24px),580px)) karena CSS Argon tidak menyebut lebar — tidak diubah. (4) Label teks di bawah ikon MUNCUL KEMBALI (font 11px, flex column) — ini disengaja dari CSS Argon dan menjawab keluhan 'navbar tidak terlihat kalau itu navbar': ikon saja di atas kaca samar membuat navbar tenggelam, label kecil + pill lebih pekat membuatnya jelas sebagai navbar, tanpa mengubah tujuan link. (5) Link aktif TIDAK lagi mengubah padding/background sendiri (padding seragam 8px 14px); yang bergerak adalah satu span.nav-indicator di belakang link, supaya perpindahan terasa menggeser, bukan loncat. */
/* PILL LEBIH PEKAT DAN JELAS */
.bottom-nav{position:fixed;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);left:50%;transform:translateX(-50%);display:flex;align-items:center;background:rgba(5,15,11,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid #C9A227;border-radius:999px;padding:6px 8px;box-shadow:0 10px 30px rgba(0,0,0,.6);z-index:25}
.bottom-nav a{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;color:#FAF6EE;padding:8px 14px;font-size:11px;font-family:inherit;z-index:2;transition:color .3s ease}
.bottom-nav a span{display:flex;align-items:center;justify-content:center;margin-bottom:4px}
.bottom-nav a svg{width:24px;height:24px;transition:transform .4s cubic-bezier(.175,.885,.32,1.275)}
.bottom-nav a.active{color:#C9A227}
.bottom-nav a.bounce svg{transform:scale(1.25)}
.bottom-nav a.active svg{transform:scale(1.1)}
.nav-indicator{position:absolute;top:6px;bottom:6px;left:0;width:0;background:rgba(201,162,39,.2);border:1px solid rgba(201,162,39,.8);border-radius:999px;z-index:1;pointer-events:none;transition:left .35s cubic-bezier(.22,1,.36,1),width .35s cubic-bezier(.22,1,.36,1)}
@media (max-width:400px){.bottom-nav a{padding:8px 10px}.bottom-nav a svg{width:22px;height:22px}}

/* === scroll-typing-v50.css === */
/* SCROLL-GATE + KETIKAN CERITA + GUNUNGAN + KALENDER v50, PANDUAN ARGON 2026-11-02 06:47 WIB, port 18085, 1640 token, finish stop, untuk animasi scroll-gate dan ketikan saja. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: */
/* (1) GUNUNGAN: blok HTML portal__layers DIHAPUS total (bukan disembunyikan saja), plus CSS ini sebagai pengaman kalau ada salinan HTML lama yang masih tersimpan di cache — gunungan tidak akan pernah muncul lagi saat Buka Undangan. Konten portal lain (nama, tanggal, tombol, Sugeng Rawuh, burung, bunga, rumah) TIDAK diubah. */
/* (2) FALLBACK v43 DIBATALKAN: v43 punya aturan :not(.is-visible) {opacity:1 !important; animation:v43FadeBlur 1.4s ease 3s both !important} yang memaksa semua slide muncul sendiri setelah 3 detik TANPA scroll — itu yang melanggar perintah baru 'animasi hanya saat di-scroll'. Di v50 ini, semua selector fallback v43 yang sama persis DITIMPA menjadi opacity:0 !important; animation:none !important, supaya slide tetap kosong sampai JS reveal menambahkan .is-visible saat di-scroll. Satu pengecualian: .gallery-item TIDAK diberi opacity:0 di sini, karena tile galeri memang tidak pernah dapat .is-visible (visibilitasnya dikendalikan heading.is-visible di v39) — untuk tile galeri hanya animation-nya yang dibatalkan, opacity-nya dibiarkan dikendalikan v39. */
/* (3) AMBIENT SCROLL-GATE: CSS Argon hanya memakai 'section' sehingga footer #penutup (tag <footer>, bukan <section>) akan lolos dan tetap beranimasi tanpa scroll. Di v50 ini, aturan gate ditulis untuk section DAN footer, supaya Penutup ikut tergate. Burung/flora pause di 0% (burung di tepi kiri, flora di posisi awal goyang) lalu running saat .slide-inview, jadi animasi mulai dari awal tepat saat section di-scroll, bukan sudah di tengah jalan. */
/* (4) KETIKAN CERITA: JS Argon memakai item.querySelector('p') yang mengambil <p> PERTAMA di timeline-item, yaitu label tahun (misal '2022 – 2023'), bukan deskripsi cerita — kalau dipakai mentah, yang terketik hanya tahunnya. Di JS v50 ini, deskripsi diambil sebagai <p> TERAKHIR di item (label, h3, deskripsi), jadi yang terketik adalah cerita aslinya. Judul, label tahun, dan intro TIDAK diketik, tetap fade-blur lama. */
/* (5) GERCEP: transisi masuk .reveal dipercepat dari 1.4s/0.85s menjadi 0.6s (delay stagger tetap, jadi total tercepat), tanpa mengubah durasi animasi ambient (burung 8-24 detik, goyang 8-10 detik, denyut 2.5-3 detik tetap, supaya tidak jadi terbang super cepat). */
/* (6) TOMBOL KALENDER: bukan dari Argon, ini reuse gaya tombol emas yang sudah ada (.button--gold) + margin atas saja, dan link Google Calendar template standar dengan tanggal/jam lokal Asia/Jakarta — tidak ada desain baru. */
/* (7) REDUCED MOTION: untuk pengguna yang memilih kurangi gerakan, huruf ketikan langsung terlihat utuh (animation:none), bukan tetap opacity 0. */
/* 1. GUNUNGAN PENGAMAN */
.portal__layers{display:none !important;visibility:hidden !important}
/* 2. BATALKAN FALLBACK v43 — slide tetap kosong sampai .is-visible saat di-scroll */
section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible),section.mempelai#mempelai .reveal:not(.is-visible),section.countdown#countdown div.countdown__inner.reveal:not(.is-visible),section.acara#acara .reveal:not(.is-visible),section.galeri#galeri .section-heading.reveal:not(.is-visible),section.cerita#cerita .reveal:not(.is-visible),section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible){opacity:0 !important;animation:none !important}
section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) div.arabic,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.translation,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.source,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.hadith,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.javanese,section.ayat#ayat div.geboyok-panel.reveal:not(.is-visible) p.javanese-translation{opacity:0 !important;animation:none !important}
section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) p.eyebrow,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) h2,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) div.timer,section.countdown#countdown div.countdown__inner.reveal:not(.is-visible) p.countdown__note{opacity:0 !important;animation:none !important}
section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.section-heading,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.reveal:not(.is-visible) div.wishes{opacity:0 !important;animation:none !important}
section.galeri#galeri .gallery-item:not(.is-visible){animation:none !important}
/* 3. GERCEP — transisi masuk lebih cepat */
.reveal{transition-duration:.6s !important}
/* 4. AMBIENT HANYA SAAT DI-SCROLL */
section:not(.slide-inview) > .ambient,footer:not(.slide-inview) > .ambient{opacity:0 !important}
section:not(.slide-inview) .ambient,section:not(.slide-inview) .ambient *,footer:not(.slide-inview) .ambient,footer:not(.slide-inview) .ambient *{animation-play-state:paused !important}
section.slide-inview > .ambient,footer.slide-inview > .ambient{opacity:1 !important;transition:opacity .5s ease}
section.slide-inview .ambient,section.slide-inview .ambient *,footer.slide-inview .ambient,footer.slide-inview .ambient *{animation-play-state:running !important}
.rsvp__panel:not(.is-visible) button{animation-play-state:paused !important}
/* 5. KETIKAN CERITA */
.char{display:inline-block;opacity:0;transform:translateY(4px);animation:char-in .25s forwards ease-out}
@keyframes char-in{to{opacity:1;transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.char{opacity:1 !important;animation:none !important}}
/* 6. TOMBOL KALENDER SAVE THE DATE */
#countdown .calendar-btn{margin-top:20px;display:inline-block}

/* === timing-v51.css === */
/* TIMING v51 - BIASA SAJA (SEDANG, KONSISTEN), PANDUAN ARGON 2026-11-02 07:02 WIB, animasi port 18081 2217 token, kalender port 18082 1208 token, finish stop. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: */
/* (1) HERO: selector Argon (main.is-open .hero-photo, .hero-eyebrow, .hero-title, dll.) TIDAK ADA di HTML asli, jadi dipetakan ke class asli v30: .hero-photo-frame, .hero__eyebrow, .hero .display-title, .hero__date, .hero__sub, .hero__pojok, plus .hero__bg, .hero__tree, .hero__fl--1..4. Delay setelah .is-open jadi foto/bg 0.2-0.3 detik, eyebrow 0.45, judul 0.6, tanggal 0.75, sub 0.9, pojok 1.05 (bukan 1.9-2.9), durasi 0.9 detik (bukan 1.4-2.0). Untuk elemen dengan loop (bg, tree, bunga, foto, pojok), animation shorthand ditulis lengkap supaya loop mulai 1.6 detik setelah .is-open (bukan 3.8-4.4), bukan sekadar animation-delay tunggal yang akan menimpa kedua animasi sekaligus. Waktu portal app.js (Sugeng 1400ms, hide/is-open 3200ms, geser 1.8 detik) TIDAK diubah, sesuai panduan Argon — yang dipercepat hanya delay hero setelah .is-open, jadi hero pertama terlihat sekitar 3.5 detik setelah klik (3200ms + 300ms), bukan 5.1 detik, dan penuh sekitar 4.3 detik setelah klik (bukan 7.5 detik). */
/* (2) SLIDE ISI: durasi diseragamkan jadi 0.9 detik (bukan v50 0.6 detik yang ngebut, bukan v35-v42 1.4 detik yang molor), dengan selector persis v35-v42 supaya !important lama kalah oleh !important baru yang lebih akhir. Stagger asli v35-v42 DIPERTAHANKAN (0.15-0.2 detik per elemen, maks 1.05 detik di Ayat yang punya 8 elemen) — stagger nth-child Argon DIBUANG karena :nth-child menghitung posisi antar saudara termasuk div.ambient pertama, heading, dll., sehingga delay jadi tidak konsisten antar slide dan menabrak stagger per-elemen yang sudah dirancang. Durasi ambient TIDAK diubah (burung 8-24 detik, goyang 8-10 detik, denyut 2.5-3 detik tetap, itu loop bukan entrance). */
/* HERO — delay dan durasi baru, selector asli v30 */
.invitation.is-open .hero__bg{animation:mewahFadeBg .9s cubic-bezier(.22,1,.36,1) .2s both,bgBreath 14s ease-in-out 1.6s infinite alternate !important}
.invitation.is-open .hero__tree{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .35s both,gentleSway 12s ease-in-out 1.6s infinite alternate !important}
.invitation.is-open .hero__fl--1,.invitation.is-open .hero__fl--2,.invitation.is-open .hero__fl--3,.invitation.is-open .hero__fl--4{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .5s both,gentleSway 12s ease-in-out 1.6s infinite alternate !important}
.invitation.is-open .hero-photo-frame{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .3s both,emeraldRoyalPulseMuted 8s cubic-bezier(.25,.1,.25,1) 1.6s infinite !important}
.invitation.is-open .hero__eyebrow{animation-duration:.9s !important;animation-delay:.45s !important}
.invitation.is-open .hero .display-title{animation-duration:.9s !important;animation-delay:.6s !important}
.invitation.is-open .hero__date{animation-duration:.9s !important;animation-delay:.75s !important}
.invitation.is-open .hero__sub{animation-duration:.9s !important;animation-delay:.9s !important}
.invitation.is-open .hero__pojok{animation:mewahFadePojok .9s cubic-bezier(.22,1,.36,1) 1.05s both,goldAuraShimmerMuted 10s ease-in-out 1.6s infinite !important}
/* SLIDE ISI — durasi 0.9 detik, selector persis v35-v42 */
.reveal{transition-duration:.9s !important}
section.ayat#ayat div.geboyok-panel.reveal.is-visible p.eyebrow,section.ayat#ayat div.geboyok-panel.reveal.is-visible div.arabic,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.translation,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.source,section.ayat#ayat div.geboyok-panel.reveal.is-visible span.divider-dot,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.hadith,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese,section.ayat#ayat div.geboyok-panel.reveal.is-visible p.javanese-translation{animation-duration:.9s !important}
section.mempelai#mempelai .reveal.is-visible{animation-duration:.9s !important}
section.countdown#countdown p.eyebrow,section.countdown#countdown h2,section.countdown#countdown div.timer,section.countdown#countdown p.countdown__note{transition-duration:.9s !important}
section.acara#acara .reveal{transition-duration:.9s !important}
section.galeri#galeri .gallery-item{transition-duration:.9s !important}
section.cerita#cerita .reveal{transition-duration:.9s !important}
section.rsvp#rsvp div.rsvp__panel.is-visible div.section-heading,section.rsvp#rsvp div.rsvp__panel.is-visible form.rsvp-form,section.rsvp#rsvp div.rsvp__panel.is-visible div.wishes{animation-duration:.9s !important}
footer.footer#penutup div.footer__ornament,footer.footer#penutup p.eyebrow,footer.footer#penutup p.footer__message,footer.footer#penutup p.footer__salutation,footer.footer#penutup p.footer__couple,footer.footer#penutup small.watermark{animation-duration:.9s !important}

/* === replay-galeri-footer-v52.css === */
/* REPLAY + FOOTER KONTRAST + LIGHTBOX JAWA v52, PANDUAN ARGON 2026-11-02 17:23 WIB: replay port 18083 2251 token, kalender port 18084 1552 token, galeri port 18085 3033 token, footer port 18081 1317 token, finish stop. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: */
/* (1) REPLAY: observer baru toggle .is-visible (bukan sekali saja seperti app.js), threshold 0 rootMargin -24px sama, tanpa unobserve, supaya fade-blur mengulang saat scroll atas/bawah. Heading Galeri ikut mengulang, tile galeri ikut via heading.is-visible ~ grid, jadi tidak perlu observer khusus tile. Observer slide-inview ambient TIDAK diubah (tetap sekali saja, burung terus terbang, bukan restart). */
/* (2) FOOTER REPLAY: selector Argon (.footer-ornament, .footer-eyebrow, dll.) TIDAK ADA di HTML asli, dipetakan ke class asli: div.footer__ornament, p.eyebrow, p.footer__message, p.footer__salutation, p.footer__couple, small.watermark. Stagger Argon (0/0.2/0.4/0.6/0.8/1.0) dikembalikan ke stagger asli v42 (ornamen+eyebrow 0, pesan 0.2, salam 0.4, nama 0.6, watermark 0.8), supaya timing footer tidak bergeser. Fallback Argon dipakai: teks footer hanya disembunyikan jika class .repeat-anim-ready ada (JS jalan); jika JS gagal, class tidak ada, animasi lama tetap jalan dan teks tetap terbaca, tidak hilang permanen. */
/* (3) HERO REPLAY: delay Argon (0.2/0.4/0.5/0.6/0.7/0.8/0.9/1.05) diganti delay v51 yang konsisten (bg 0.2, foto 0.3, tree 0.35, eyebrow 0.45, bunga 0.5, judul 0.6, tanggal 0.75, sub 0.9, pojok 1.05), easing cubic-bezier v51, dan pojok memakai mewahFadePojok (bukan mewahFade, supaya pojok tetap berakhir opacity 0.6, bukan 1 penuh). Loop TIDAK ikut di replay (hanya entrance), loop kembali setelah class .hero-replay dihapus 2 detik. */
/* (4) FOOTER KONTRAST: border Argon 0.45px solid DIBUANG, kembali ke border asli 1px rgba emas 0.45, supaya panel tidak berubah bentuk. Aturan Argon footer > * z-index 2 DIBUANG, karena akan menaikkan .ambient (burung/flora) ke atas teks; z-index tetap seperti v42 (teks spesifik z 2, panel ::before z -1, ambient di bawah). Text-shadow yang dipakai adalah text-shadow lembut 0 2px 8px rgba hitam 0.65 untuk keterbacaan, BUKAN box-shadow hitam pada card (yang dilarang v26), dan sudah sejalan dengan text-shadow tipis v43 untuk teks ivory. */
/* (5) LIGHTBOX: bingkai dari aset Canva Premium EDU yang SUDAH ada (sudut-baroque-tl/tr/bl/br.webp dari lembar Canva v35, bukan pencarian baru — pencarian Canva sebelumnya sudah membuktikan tidak ada frame persegi penuh, hanya sudut L, jadi sudut inilah frame Jawanya), plus border emas ganda dan panel emerald gelap, bukan frame polos dan bukan SVG datar biasa. Caption 1-6 DIPERTAHANKAN asli, caption 7-10 pakai caption generik Argon (bukan fakta baru tentang klien). */
/* FOOTER REPLAY — hanya aktif jika JS jalan */
#penutup.repeat-anim-ready div.footer__ornament,#penutup.repeat-anim-ready p.eyebrow,#penutup.repeat-anim-ready p.footer__message,#penutup.repeat-anim-ready p.footer__salutation,#penutup.repeat-anim-ready p.footer__couple,#penutup.repeat-anim-ready small.watermark{opacity:0 !important;animation:none !important}
#penutup.footer-inview div.footer__ornament,#penutup.footer-inview p.eyebrow{animation:footerFadeBlurIn .9s ease-out 0s both !important}
#penutup.footer-inview p.footer__message{animation:footerFadeBlurIn .9s ease-out .2s both !important}
#penutup.footer-inview p.footer__salutation{animation:footerFadeBlurIn .9s ease-out .4s both !important}
#penutup.footer-inview p.footer__couple{animation:footerFadeBlurIn .9s ease-out .6s both !important}
#penutup.footer-inview small.watermark{animation:footerFadeBlurIn .9s ease-out .8s both !important}
/* HERO REPLAY — hanya setelah hero pernah keluar lalu masuk lagi, bukan saat pertama dibuka */
#home.hero-replay .hero__bg{animation:mewahFadeBg .9s cubic-bezier(.22,1,.36,1) .2s both !important}
#home.hero-replay .hero-photo-frame{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .3s both !important}
#home.hero-replay .hero__tree{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .35s both !important}
#home.hero-replay .hero__eyebrow{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .45s both !important}
#home.hero-replay .hero__fl--1,#home.hero-replay .hero__fl--2,#home.hero-replay .hero__fl--3,#home.hero-replay .hero__fl--4{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .5s both !important}
#home.hero-replay .hero .display-title{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .6s both !important}
#home.hero-replay .hero__date{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .75s both !important}
#home.hero-replay .hero__sub{animation:mewahFade .9s cubic-bezier(.22,1,.36,1) .9s both !important}
#home.hero-replay .hero__pojok{animation:mewahFadePojok .9s cubic-bezier(.22,1,.36,1) 1.05s both !important}
/* FOOTER KONTRAST — panel lebih gelap, teks lebih terbaca, warna identitas tetap */
footer.footer#penutup::before{background-color:rgba(5,15,11,0.88) !important;border:1px solid rgba(233,206,122,0.45) !important}
@supports (backdrop-filter:blur(14px)) or (-webkit-backdrop-filter:blur(14px)){footer.footer#penutup::before{background-color:rgba(5,15,11,0.72) !important;backdrop-filter:blur(14px) saturate(1.2) !important;-webkit-backdrop-filter:blur(14px) saturate(1.2) !important}}
footer.footer#penutup p.footer__message,footer.footer#penutup p.footer__salutation{font-weight:600 !important;text-shadow:0 2px 8px rgba(0,0,0,0.65) !important}
footer.footer#penutup p.footer__couple{text-shadow:0 2px 8px rgba(0,0,0,0.65) !important;display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:center !important;gap:12px !important}
footer.footer#penutup .couple-name{line-height:1 !important}
footer.footer#penutup .couple-amp{color:#E9CE7A !important;font-size:1.2em !important;font-weight:normal !important;font-style:normal !important;line-height:1 !important}
footer.footer#penutup small.watermark{text-shadow:0 2px 8px rgba(0,0,0,0.65) !important}
/* LIGHTBOX JAWA PREMIUM — frame emas ganda + sudut baroque Canva */
#lightboxArt{width:min(92vw,560px) !important;height:min(78vh,640px) !important;background-color:#04291D !important;border:2px solid #C9A227 !important;outline:1px solid rgba(233,206,122,0.5) !important;outline-offset:-8px !important;position:relative !important;display:flex !important;align-items:center !important;justify-content:center !important;padding:16px !important;box-sizing:border-box !important}
#lightboxArt img{max-width:100% !important;max-height:100% !important;object-fit:contain !important;z-index:5 !important}
.lb-corner{position:absolute !important;width:64px !important;height:64px !important;background-size:contain !important;background-repeat:no-repeat !important;z-index:10 !important;pointer-events:none !important}
.lb-corner-tl{top:0 !important;left:0 !important;background-image:url('assets/ornamen-baru/sudut-baroque-tl.webp') !important}
.lb-corner-tr{top:0 !important;right:0 !important;background-image:url('assets/ornamen-baru/sudut-baroque-tr.webp') !important}
.lb-corner-bl{bottom:0 !important;left:0 !important;background-image:url('assets/ornamen-baru/sudut-baroque-bl.webp') !important}
.lb-corner-br{bottom:0 !important;right:0 !important;background-image:url('assets/ornamen-baru/sudut-baroque-br.webp') !important}
.lightbox-nav{position:absolute !important;top:50% !important;transform:translateY(-50%) !important;width:44px !important;height:44px !important;background:rgba(201,162,39,0.85) !important;color:#fff !important;border:1px solid #E9CE7A !important;border-radius:50% !important;font-size:20px !important;display:flex !important;align-items:center !important;justify-content:center !important;cursor:pointer !important;z-index:70 !important;padding:0 !important}
.lightbox-nav:hover,.lightbox-nav:focus{background:#C9A227 !important;outline:none !important}
.lightbox-prev{left:16px !important}
.lightbox-next{right:16px !important}
#lightboxClose{z-index:80 !important}

/* === fix-blur-frame-v53.css === */
/* FIX BLUR + FRAME v53, PANDUAN ARGON 2026-11-02 17:53 WIB, port 18082, 2325 token, finish stop. BUKAN model Muse untuk coding. */
/* PEMETAAN YANG DIBERITAHUKAN: */
/* (1) TILE GALERI: selector Argon figure.gallery-item / figure.gallery-item.tile-inview SPESIFISITASNYA KALAH dari v39 (section.galeri#galeri .section-heading.is-visible ~ .gallery-grid .gallery-item, 1 id + 5 class), jadi kalau dipakai mentah, tile akan tetap dikendalikan heading, bukan tile-nya sendiri, dan bug blur karena heading keluar tidak akan hilang. Di v53 ini, tile dikendalikan DUA aturan dengan spesifisitas LEBIH TINGGI dari v39: (A) tile-inview terlihat, selector section.galeri#galeri .section-heading ~ .gallery-grid figure.gallery-item.tile-inview (1 id + 5 class + 2 elemen, menang atas v39 1+5+1, dan TIDAK mensyaratkan heading.is-visible, jadi tile tetap terlihat saat heading sudah keluar); (B) bukan tile-inview tersembunyi meski heading terlihat, selector section.galeri#galeri .section-heading.is-visible ~ .gallery-grid figure.gallery-item:not(.tile-inview) (1 id + 6 class + 2 elemen, menang atas v39), jadi tile tidak akan muncul hanya karena heading masuk, tapi hanya saat tile itu sendiri masuk. Stagger v39 0.15-0.90 untuk tile 1-6 DIBUANG di aturan tile-inview (transition-delay 0), karena stagger itu dirancang untuk animasi serentak saat heading masuk, bukan per tile — jika dipertahankan, tile 6 akan menunggu 0.90 detik dalam keadaan blur setelah masuk layar, yang terlihat seperti bug blur. */
/* (2) REVEAL OBSERVER: rootMargin Argon '-24px 0px 0px 0px' (tepi atas -24px) DIBUANG, diganti '0px' di JS, supaya card tidak dianggap keluar saat masih 24px terlihat di tepi atas, dan tidak dianggap belum masuk saat baru 24px terlihat di bawah — margin itulah yang membuat blur prematur di tepi layar. */
/* (3) EXIT INSTANT: trik Argon el.style.transitionDuration='0s' TANPA !important TIDAK AKAN MENANG atas CSS transition-duration 0.9s !important di v51/v35-v42, jadi keluar tetap akan animasi blur 0.9 detik. Di JS v53, dipakai el.style.setProperty('transition-duration','0s','important') lalu removeProperty, supaya keluar benar-benar instan dan tidak terlihat mem-blur. */
/* (4) LIGHTBOX FRAME: sudut baroque v52 DIHAPUS total (CSS display none sebagai pengaman + JS v53 tidak lagi menyuntikkan .lb-corner, jadi sudut tidak akan muncul meski CSS gagal). Pseudo :before/:after .gallery-art di dalam lightbox saja dihapus (bukan di grid tile), supaya garis miring tidak melintasi foto. Frame baru Argon dipakai apa adanya: membungkus foto rapat (width auto max 92vw, height auto max 80vh, img width 100% height auto max 76vh object-fit contain, tanpa crop, tanpa ruang kosong besar), background emerald gelap, border emas ganda, radius 12px, box-shadow lembut pada modal lightbox saja (bukan pada card, jadi bukan pelanggaran larangan shadow hitam v26). Ornamen ukiran-jawa-emas.png TIDAK dipakai di lightbox, sesuai pilihan Argon yang paling aman: ornamen statis rentan overlap/terpotong di berbagai rasio foto, frame emas ganda bersih lebih premium dan tidak menutupi foto. */
/* TILE GALERI — dikendalikan tile-inview, bukan heading */
section.galeri#galeri .section-heading ~ .gallery-grid figure.gallery-item.tile-inview{opacity:1 !important;transform:translateY(0) !important;filter:blur(0) !important;transition-delay:0s !important}
section.galeri#galeri .section-heading.is-visible ~ .gallery-grid figure.gallery-item:not(.tile-inview){opacity:0 !important;transform:translateY(18px) !important;filter:blur(10px) !important}
/* LIGHTBOX — hapus sudut baroque + garis miring, frame membungkus foto rapat */
.lb-corner{display:none !important}
#lightboxArt .gallery-art::before,#lightboxArt .gallery-art::after{display:none !important}
#lightboxArt{width:auto !important;max-width:92vw !important;height:auto !important;max-height:80vh !important;background-color:#04291D !important;border:2px solid #C9A227 !important;padding:10px !important;outline:1px solid rgba(201,162,39,0.5) !important;outline-offset:-8px !important;border-radius:12px !important;display:flex !important;align-items:center !important;justify-content:center !important;box-shadow:0px 15px 40px rgba(0,0,0,0.7) !important}
#lightboxArt img{width:100% !important;height:auto !important;max-height:76vh !important;object-fit:contain !important;border-radius:4px !important;display:block !important}


/* ===== fix-v54.css ===== */
/* fix-v54.css — Argon grup 1-3, dengan koreksi yang didokumentasikan di bawah.
   Grup 1: H1 ganda. Argon memberi font-family 'Jawa' (salah, asli var(--jawa)='Jawa Palsu',Georgia,serif),
   margin 0 (asli 2px 0), dan text-shadow tunggal placeholder (asli 3 lapis dengan glow emas).
   CSS di bawah menyalin persis aturan .portal h1 dari styles.css, dengan font-size portal-v13
   clamp(50px,15vw,92px) !important yang menang atas styles.css. Tampilan portal TIDAK berubah.
   Grup 2: tile galeri 3/2 untuk foto 1200x800, lightbox nav mobile. Argon menulis selector
   .lightbox-nav.next (salah, asli .lightbox-prev/.lightbox-next) dan background kuning terang
   rgba(255,215,0,0.2) (di luar palet, kuning neon dilarang). Di bawah: selector asli, background
   emerald gelap transparan + border emas, !important untuk mengalahkan v52 !important.
   Grup 3: warna note RSVP Argon #666 tidak terbaca di panel emerald gelap, diganti krem/emas.
   Portal, hero, dan slide lain TIDAK diubah di v54 selain yang disebut di atas. */
.portal p#portal-title{position:relative;margin:2px 0;font-family:var(--jawa);font-weight:700;font-size:clamp(50px,15vw,92px) !important;line-height:1.02;color:#FFF8E7;max-width:900px;text-shadow:0 3px 5px rgba(0,0,0,.85),0 8px 26px rgba(0,0,0,.65),0 0 40px rgba(233,206,122,.5);letter-spacing:.02em}
.gallery-grid figure.gallery-item{aspect-ratio:3/2 !important}
.gallery-grid figure.gallery-item img{object-fit:cover !important}
.rsvp-note{max-width:510px;margin:0 auto 12px;text-align:center;color:rgba(250,246,238,.85);font:italic 14px/1.5 var(--serif)}
#countdown-done{color:#E9CE7A;font:italic 20px/1.5 var(--serif);text-align:center;margin:20px auto 0}
@media (max-width:480px){
  .lightbox-nav{width:44px !important;height:44px !important;background:rgba(5,15,11,.65) !important;border-color:rgba(233,206,122,.7) !important}
  .lightbox-prev{left:4px !important}
  .lightbox-next{right:4px !important}
}

/* ===== fix-v55.css ===== */
/* fix-v55.css — Argon v55 grup A, dengan koreksi: Argon menulis nav.bottom-nav a span{font-size:10px},
   padahal label nav adalah teks langsung di <a>, bukan di <span> (span hanya pembungkus SVG).
   Aturan di bawah memakai nav.bottom-nav a{font-size:10px} agar label benar-benar mengecil di HP kecil.
   Warna/border/radius nav TIDAK diubah. Portal, hero, slide lain TIDAK diubah di v55. */
@media (max-width:380px){
  nav.bottom-nav{justify-content:space-evenly !important}
  nav.bottom-nav a{padding:6px 4px !important;font-size:10px !important}
  nav.bottom-nav a svg{width:20px !important;height:20px !important}
}

/* ===== fix-v56.css ===== */
/* fix-v56.css — Argon port 18082, 1271 token, dengan 2 koreksi yang diberitahukan.
   Koreksi 1: aturan .v56-ready Argon hanya opacity:0 tanpa animation:none, padahal animasi dasar footer v42 memakai !important, jadi tanpa animation:none !important footer akan muncul saat load dan replay tidak jalan. Ditambahkan animation:none !important di aturan .v56-ready.
   Koreksi 2: Argon tidak menyentuh grid-auto-rows:190px di consolidated, yang akan memaksa baris galeri 190px dan bisa memotong tile portrait setinggi ~255px. Ditambahkan grid-auto-rows:auto !important.
   Koreksi HTML (bukan CSS): link Argon memakai css/fix-v55.css, padahal link asli di root fix-v55.css; dan contoh figure Argon memakai galeri-4.jpg, padahal file asli assets/foto/galeri-4.webp dengan tabindex/data-caption/alt. Di build ini hanya class tile-portrait yang ditambahkan ke figure 4 dan 7 yang sudah ada, semua atribut lain tidak diubah. */
/* BUG 1: GALERI PORTRAIT */
section.galeri#galeri .gallery-grid {
    align-items: start !important;
    grid-auto-rows: auto !important;
}
section.galeri#galeri .gallery-grid figure.gallery-item.tile-portrait {
    aspect-ratio: 2/3 !important;
}
/* BUG 2: LIGHTBOX */
div.lightbox#lightbox[hidden] {
    display: none !important;
}
button.lightbox__close#lightboxClose {
    z-index: 80 !important;
}
.lightbox-nav.lightbox-prev,
.lightbox-nav.lightbox-next {
    z-index: 70 !important;
}
div.lightbox__art#lightboxArt {
    max-width: 92vw !important;
    max-height: 80vh !important;
}
div.lightbox__art#lightboxArt img {
    object-fit: contain !important;
}
/* BUG 3: FOOTER HILANG */
footer.footer#penutup.v56-ready > div.footer__ornament,
footer.footer#penutup.v56-ready > p.eyebrow,
footer.footer#penutup.v56-ready > p.footer__message,
footer.footer#penutup.v56-ready > p.footer__salutation,
footer.footer#penutup.v56-ready > p.footer__couple,
footer.footer#penutup.v56-ready > small.watermark {
    opacity: 0;
    animation: none !important;
}
footer.footer#penutup.v56-ready.footer-inview > div.footer__ornament,
footer.footer#penutup.v56-ready.footer-inview > p.eyebrow {
    animation: footerFadeBlurIn .9s ease-out 0s both !important;
}
footer.footer#penutup.v56-ready.footer-inview > p.footer__message {
    animation: footerFadeBlurIn .9s ease-out 0.2s both !important;
}
footer.footer#penutup.v56-ready.footer-inview > p.footer__salutation {
    animation: footerFadeBlurIn .9s ease-out 0.4s both !important;
}
footer.footer#penutup.v56-ready.footer-inview > p.footer__couple {
    animation: footerFadeBlurIn .9s ease-out 0.6s both !important;
}
footer.footer#penutup.v56-ready.footer-inview > small.watermark {
    animation: footerFadeBlurIn .9s ease-out 0.8s both !important;
}

/* ===== fix-v57.css ===== */
/* fix-v57.css — Argon port 18083, 1518 token, dengan koreksi yang diberitahukan.
   Koreksi 1: link Argon memakai css/fix-v56.css dan css/fix-v57.css, padahal link asli di root fix-v56.css / fix-v57.css, tanpa folder css/.
   Koreksi 2: svg burung Argon memakai viewBox 0 0 24 24, padahal burung asli memakai 0 0 24 12 dengan path yang dirancang untuk 24x12; viewBox dikembalikan ke 0 0 24 12 agar bentuk dan kepak sama dengan burung lama.
   Koreksi 3: animasi kepak Argon memakai keyframe wing-flap yang TIDAK ADA di consolidated (yang ada hanya wing-flap-l dan wing-flap-r); dipetakan ke wing-flap-l untuk sayap kiri dan wing-flap-r untuk sayap kanan, durasi 0.2s Argon dipertahankan agar kepak cepat sesuai burung cepat.
   Koreksi 4: lebar burung cepat Argon tanpa !important akan kalah dari aturan lama .ambient .bird{width:18px !important}; ditambahkan !important agar burung cepat benar-benar 24-36px, bukan tetap 18px. */
/* BUG A: NAMA TERPOTONG DI HP KECIL */
.footer#penutup {
    padding: 72px clamp(12px, 5vw, 32px) 180px !important;
}
.footer#penutup p.footer__couple {
    font-size: clamp(1.6rem, 8.5vw, 2.4rem) !important;
    gap: clamp(4px, 2.5vw, 12px) !important;
    max-width: 100% !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}
.footer#penutup p.footer__couple .couple-name {
    flex-shrink: 1 !important;
    overflow: visible !important;
}
.footer#penutup p.footer__couple .couple-amp {
    flex-shrink: 0 !important;
}
/* FITUR B: ORNAMEN PINGGIR FOOTER */
.footer#penutup .ambient .sudut-jawa,
.footer#penutup .ambient .bunga-tambahan,
.footer#penutup .ambient .pohon-emas,
.footer#penutup .ambient .bird.fast-b1,
.footer#penutup .ambient .bird.fast-b2 {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}
.footer#penutup .ambient img {
    width: 100%;
    height: auto;
    display: block;
}
.footer#penutup .ambient .sudut-jawa {
    width: clamp(60px, 20vw, 110px);
    opacity: 0.6;
}
.footer#penutup .ambient .sudut-tl { top: -2px; left: -2px; }
.footer#penutup .ambient .sudut-tr { top: -2px; right: -2px; }
.footer#penutup .ambient .sudut-bl { bottom: -2px; left: -2px; }
.footer#penutup .ambient .sudut-br { bottom: -2px; right: -2px; }
.footer#penutup .ambient .bunga-tambahan {
    width: clamp(70px, 25vw, 130px);
    bottom: 20px;
    opacity: 0.7;
    transform-origin: bottom center;
    animation: tree-sway 8s ease-in-out infinite alternate;
}
.footer#penutup .ambient .bunga-bl { left: -15px; }
.footer#penutup .ambient .bunga-br { right: -15px; animation-duration: 9.5s; animation-delay: 1s; }
.footer#penutup .ambient .pohon-emas {
    width: clamp(90px, 30vw, 160px);
    bottom: -10px;
    opacity: 0.5;
    transform-origin: bottom center;
    animation: bgtrees-sway 10s ease-in-out infinite alternate;
}
.footer#penutup .ambient .pohon-l { left: -30px; animation-duration: 11s; }
.footer#penutup .ambient .pohon-r { right: -30px; animation-duration: 12s; animation-delay: 2s; }
.footer#penutup .ambient .bird.fast-b1,
.footer#penutup .ambient .bird.fast-b2 {
    width: clamp(24px, 6vw, 36px) !important;
    max-width: clamp(24px, 6vw, 36px) !important;
    height: auto;
    opacity: 0.8;
}
.footer#penutup .ambient .bird.fast-b1 {
    top: 25%;
    left: -15%;
    animation: fly-ltr 5s linear infinite;
}
.footer#penutup .ambient .bird.fast-b2 {
    top: 45%;
    right: -15%;
    animation: fly-rtl 7s linear infinite 2s;
}
.footer#penutup .ambient .bird.fast-b1 svg,
.footer#penutup .ambient .bird.fast-b2 svg {
    width: 100%;
    height: auto;
    display: block;
}
.footer#penutup .ambient .bird.fast-b1 .wing-l,
.footer#penutup .ambient .bird.fast-b2 .wing-l {
    animation: wing-flap-l 0.2s ease-in-out infinite alternate;
}
.footer#penutup .ambient .bird.fast-b1 .wing-r,
.footer#penutup .ambient .bird.fast-b2 .wing-r {
    animation: wing-flap-r 0.2s ease-in-out infinite alternate;
}
.footer:not(.slide-inview) .ambient .bunga-tambahan,
.footer:not(.slide-inview) .ambient .pohon-emas,
.footer:not(.slide-inview) .ambient .bird.fast-b1,
.footer:not(.slide-inview) .ambient .bird.fast-b2,
.footer:not(.slide-inview) .ambient .bird.fast-b1 path,
.footer:not(.slide-inview) .ambient .bird.fast-b2 path {
    animation-play-state: paused !important;
}

/* ===== fix-v59.css ===== */
/* fix-v59.css — watermark Powered by ATUR Project disamarkan, per perintah JURAGAN 2026-11-03.
   Sebelumnya footer watermark memakai color #C9A227 !important dan font-size 0.8rem !important, jadi cukup menonjol.
   Sekarang: warna emas dibuat transparan, ukuran diperkecil, bayangan dihapus, opacity diturunkan, semua dengan !important agar mengalahkan aturan lama.
   Watermark TIDAK dihapus, hanya disamarkan: masih terbaca kalau dicari, tapi tidak lagi menonjol di bawah nama couple. */
footer.footer#penutup small.watermark {
    color: rgba(201, 162, 39, 0.55) !important;
    font-size: 0.7rem !important;
    letter-spacing: 0.12em !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
}

/* ===== fix-v60.css ===== */
/* fix-v60.css — Argon port 18085, 849 token, dengan koreksi yang diberitahukan.
   Koreksi 1: aturan tombol Argon tanpa !important kalah dari aturan lama .button{... !important} di consolidated; ditambahkan !important agar tombol emas dan outline benar-benar tampil beda.
   Koreksi 2: warna teks outline Argon #0A3527 (emerald gelap) tidak terbaca di atas background section yang gelap; diganti ke #E9CE7A (gold-light, warna outline asli) dengan border #C9A227. Tombol emas teks putih diganti ke #0A3527 agar sesuai definisi .button--gold asli (background gold, teks emerald gelap) dan kontras lebih baik.
   Koreksi 3: container Argon tanpa position/z-index bisa tertutup .ambient yang absolute; ditambahkan position:relative dan z-index:1 agar tombol di atas ornamen ambient dan di bawah nav.
   Koreksi 4 (di JS, bukan di CSS ini): teks kembali tombol Salin Alamat di-hardcode ke "Salin Alamat", bukan dibaca dari innerText saat feedback, supaya klik kedua di dalam 2 detik feedback tidak mengunci teks jadi "Alamat Tersalin" permanen. */
.event-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  padding-bottom: 90px;
  position: relative;
  z-index: 1;
}
.event-actions .button--gold {
  background-color: #C9A227 !important;
  color: #0A3527 !important;
  border: 1px solid #C9A227 !important;
}
.event-actions .button--outline {
  background-color: transparent !important;
  color: #E9CE7A !important;
  border: 1px solid #C9A227 !important;
}

/* ===== fix-v65.css ===== */
/* fix-v65.css — optimasi first-load, tanpa ubah tampilan akhir.
   1) Keyframes reveal tanpa filter:blur. Semua keyframes asli berakhir di
      blur(0), jadi keadaan akhir SAMA PERSIS; yang hilang hanya kelembutan
      blur selama 0,6-0,9 detik animasi. Opacity + translateY tetap.
      Nama, durasi, dan delay tidak diubah (diatur di consolidated/fix lain).
   2) Elemen fixed (.music-toggle, .bottom-nav) tanpa backdrop-filter:
      backdrop-filter di elemen fixed memaksa repaint seluruh konten yang
      bergeser di bawahnya tiap frame saat scroll. Diganti background
      emerald gelap yang sedikit lebih pekat (0,65->0,92 dan 0,55->0,88),
      jadi tampilan praktis sama. */
@keyframes title-arrive{from{opacity:0;transform:translateY(25px)}to{opacity:1;transform:none}}
@keyframes fadeBlurIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes fadeBlurUp{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes footerFadeBlurIn{0%{opacity:0;transform:translateY(18px)}100%{opacity:1;transform:translateY(0)}}
@keyframes v43FadeBlur{0%{transform:translateY(18px)}100%{transform:translateY(0)}}
.music-toggle{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(5,35,25,.92)!important}
.bottom-nav{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(5,15,11,.88)!important}

/* ===== fix-v69.css ===== */
/* fix-v69.css — galeri tanpa gap kosong (panduan Argon port 18084, 437 detik).
   Akar masalah: grid 2 kolom di HP dengan align-items:start; baris yang berisi
   1 portrait (aspek 2/3, tinggi) + 1 landscape (aspek 3/2, pendek) tingginya
   mengikuti portrait, sehingga di bawah landscape ada ruang kosong besar.
   Perbaikan utama adalah URUTAN figure di HTML (1,2,4,7,6,8,9,10,11,12):
   di HP tiap baris kini sepasang sejenis — (1,2) landscape, (4,7) portrait,
   (6,8), (9,10), (11,12) landscape — jadi tinggi tiap baris seragam.
   CSS di bawah hanya pengaman: align-items:stretch menimpa align-items:start
   dari fix-v56, supaya tile mengisi penuh tinggi barisnya; img object-fit:cover
   menjaga foto tidak gepeng bila tile terpaksa lebih tinggi dari rasionya.
   Catatan jujur (diakui Argon): di layar lebar 3 kolom, baris campuran
   (1,2,4) dan (7,6,8) masih berisi portrait + landscape; dengan stretch,
   landscape di baris itu akan memanjang mengikuti tinggi portrait dan fotonya
   ter-crop lebih tinggi (bukan gap kosong). Sempurna di 3 kolom butuh masonry
   atau portrait kelipatan 3 — tidak dilakukan di sini. */
section.galeri#galeri .gallery-grid{align-items:stretch !important}
section.galeri#galeri .gallery-grid figure.gallery-item{display:flex;flex-direction:column;height:100%;margin:0}
section.galeri#galeri .gallery-grid figure.gallery-item .gallery-art{display:block !important}
section.galeri#galeri .gallery-grid figure.gallery-item img{width:100%;height:100%;object-fit:cover !important;display:block}

/* ===== fix-v72.css ===== */
/* fix-v72.css — transisi awan full-layar antara Buka Undangan dan slide 1
   (panduan Argon port 18085, 128 detik, dengan koreksi yang diberitahukan).
   Alur: klik Buka Undangan -> portal seperti biasa (sugeng 1.4 detik,
   portal hilang 3.2 detik) -> layer awan muncul menutupi layar penuh ->
   layer awan geser ke bawah 3 detik, mengungkap slide 1 di bawahnya ->
   layer awan disembunyikan total (display:none) supaya tidak menghalangi klik.
   Koreksi 1 (easing): Argon memakai cubic-bezier(0.16,1,0.3,1) = ease-out,
   geraknya cepat di awal lalu merangkak pelan di akhir — sebagian besar
   gerakan selesai di ~1.5 detik pertama. JURAGAN minta "geser kebawah cepat
   selama 3 detik", jadi di sini linear: kecepatan konstan selama penuh 3 detik.
   Koreksi 2 (awan terlihat): gumpalan Argon (#f0f4f8 di atas #ffffff) terlalu
   samar, layer akan terbaca sebagai layar putih polos, bukan "banyak awan".
   Di sini gumpalan lebih banyak (10 titik) dan lebih tegas (#dde7f0, #e6edf3,
   plus dua ivory #f7f3e8 supaya nyambung palet), tetap lembut tanpa outline.
   Koreksi 3 (HTML): layer memakai id cloud-transition seperti panduan Argon.
   Catatan: awan di sini CSS murni — tidak ada file gambar awan di proyek.
   Kalau elemen awan Canva (pencarian masih berjalan) ternyata lebih bagus,
   layer ini bisa diganti gambar PNG tanpa mengubah JS-nya. */
#cloud-transition{position:fixed;top:-15vh;left:0;width:100vw;height:125vh;z-index:9999;display:none;background-color:#fff;background-image:radial-gradient(circle at 12% 18%,#dde7f0 0%,transparent 42%),radial-gradient(circle at 88% 12%,#e6edf3 0%,transparent 46%),radial-gradient(circle at 50% 38%,#dde7f0 0%,transparent 52%),radial-gradient(circle at 78% 62%,#f7f3e8 0%,transparent 44%),radial-gradient(circle at 22% 68%,#e6edf3 0%,transparent 48%),radial-gradient(circle at 45% 82%,#dde7f0 0%,transparent 42%),radial-gradient(circle at 68% 28%,#e6edf3 0%,transparent 38%),radial-gradient(circle at 32% 48%,#f7f3e8 0%,transparent 40%),radial-gradient(circle at 92% 88%,#dde7f0 0%,transparent 42%),radial-gradient(circle at 8% 88%,#e6edf3 0%,transparent 40%);background-repeat:no-repeat;transform:translateY(0);will-change:transform;pointer-events:none}
#cloud-transition::before{content:'';position:absolute;top:-10vh;left:-5vw;width:110vw;height:12vh;background-image:radial-gradient(circle at 10% 80%,#fff 0%,#fff 40%,transparent 50%),radial-gradient(circle at 25% 60%,#fff 0%,#fff 50%,transparent 60%),radial-gradient(circle at 45% 75%,#fff 0%,#fff 45%,transparent 55%),radial-gradient(circle at 65% 55%,#fff 0%,#fff 55%,transparent 65%),radial-gradient(circle at 85% 80%,#fff 0%,#fff 40%,transparent 50%),radial-gradient(circle at 95% 65%,#fff 0%,#fff 45%,transparent 55%);background-repeat:no-repeat}
#cloud-transition.cloud-slide-down{transform:translateY(135vh) !important;transition:transform 3s linear}

/* ===== fix-v73.css ===== */
/* fix-v73.css — transisi awan memakai gambar Canva asli (no. 2, 3, 4 pilihan JURAGAN).
   Mengganti awan CSS v72 dengan 3 PNG Canva (dikonversi WebP q80, 1280px):
   cloud-2 "White Fog", cloud-3 "Realistic Fog Texture", cloud-4 "Cloud Sky PNG".
   Perubahan penting (dicek lewat mockup dulu): awan Canva itu PUTIH, dan di
   atas background putih v72 awan itu HAMPIR TIDAK KELIHATAN (mockup putih
   nyaris polos). Jadi background layer diubah dari putih menjadi emerald
   #0A3527 — di atas emerald awan putihnya tampil tegas dan tetap nyambung
   palet undangan (bukan biru langit, supaya tidak keluar palet).
   Komposisi (4 penempatan, 3 file — cloud-2 dipakai dua kali dengan ukuran
   beda, satu download): cloud-2 kecil di atas (8%), cloud-4 besar di tengah
   atas (34%), cloud-3 di tengah bawah (60%), cloud-2 besar di bawah (86%).
   ::before dari fix-v72 (gumpalan putih di tepi atas layer) tetap dipakai
   sebagai tepi awan saat layer tersingkap. Gambar di-preload JS setelah
   window load (lihat app.js) supaya first load tetap ringan dan awan sudah
   siap saat Buka Undangan diklik. */
#cloud-transition{background-color:#0a3527 !important;background-image:url(assets/clouds/cloud-2.webp),url(assets/clouds/cloud-4.webp),url(assets/clouds/cloud-3.webp),url(assets/clouds/cloud-2.webp) !important;background-repeat:no-repeat !important;background-position:50% 8%,50% 34%,50% 60%,50% 86% !important;background-size:120% auto,160% auto,140% auto,150% auto !important}