/* Sage Serenade */
:root{--g1:#8aa07c;--g2:#6f8660;--g3:#56603f;--g4:#3f4e33;--pale:#dfe7d4;--ink:#2c3a24;--bg:#6f8660;--fg:#2c3a24;--accent:#6f8660;--on-accent:#fff;--card:#fff;--head:'Playfair Display',Georgia,serif;--bg-ov:rgba(0,0,0,0)}
html,body{overflow-x:clip}
body{font-family:'Quicksand',system-ui,sans-serif;font-weight:500;background:#fff;color:var(--ink)}
.sec{max-width:560px;margin:0 auto;padding:44px 22px}
.sec h2{font:500 clamp(2rem,9vw,2.6rem)/1.15 'Playfair Display',serif;letter-spacing:0;text-transform:none;color:inherit;margin-bottom:18px;text-align:center}
.sec h2::after{display:none}
.sr-g{position:relative}
.sr-script{font:400 clamp(2.6rem,12vw,3.4rem)/1.1 'Mrs Saint Delafield',cursive;margin:0}
.btn{display:inline-flex;gap:10px;align-items:center;justify-content:center;font:500 1.15rem/1 'Josefin Sans','Quicksand',sans-serif;letter-spacing:.02em;text-transform:none;padding:14px 22px;background:var(--g2);color:#fff;border:0;box-shadow:none;border-radius:14px}
.sr-brk{background:none;color:#fff;border:0;border-left:3px solid #fff;border-right:3px solid #fff;border-radius:16px;padding:12px 26px}
.sr-3d{background:var(--g2);border-radius:22px 6px 6px 22px;box-shadow:inset -5px 0 0 rgba(0,0,0,.28),inset 4px 0 0 var(--g4);padding:16px 26px;font-size:1.05rem}
.sr-vl{writing-mode:vertical-rl;transform:rotate(180deg);font:400 clamp(1.7rem,8vw,2.3rem)/1 'Cormorant SC','Playfair Display',serif;letter-spacing:.02em;color:#fff;white-space:nowrap}

/* ----- Cover ----- */
.cover{color:#fff;background:linear-gradient(rgba(30,38,24,0) 35%,rgba(64,78,50,.75) 62%,#56603f 88%),var(--cover-img,none) center top/cover no-repeat,#56603f}
.cover .inner{width:100%;max-width:520px;min-height:calc(100svh - 48px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;text-align:center;margin:0 auto;padding:6px 0 22px}
.sr-kick{font:500 clamp(1.1rem,5vw,1.4rem)/1.2 'Cormorant SC',serif;letter-spacing:.14em;margin:0;text-transform:uppercase}
.cover h1,.sr-hn{font:300 clamp(2.2rem,11vw,3.2rem)/1.15 'Josefin Sans',sans-serif;letter-spacing:.01em;margin:6px 0 0;color:inherit}
.cover h1 .amp,.sr-hn .amp{font:inherit}
.sr-to{margin-top:34px}
.sr-yth{font:italic 400 1.1rem/1.4 'Josefin Sans',sans-serif;margin:0}
.sr-to b{display:block;font:400 clamp(2rem,10vw,2.6rem)/1.2 'Cormorant Garamond',serif;margin:14px 0 18px;letter-spacing:.03em}
.sr-to small{display:block;font:italic 400 .98rem/1.6 'Josefin Sans',sans-serif;max-width:30ch;margin:0 auto}
.cover .btn{margin:26px auto 40px}

/* ----- Hero ----- */
.sr-hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;background:var(--hero-img,none) center/cover no-repeat,var(--g3)}
.sr-panel{margin:0 0 0 24px;width:calc(100% - 24px);padding:34px 20px 120px 24px;background:rgba(138,160,124,.94);border-radius:0 100px 0 0;color:#fff;margin-right:0}
.sr-hn{text-align:left;margin-bottom:22px}
.sr-panel .sr-kick{font-size:1.25rem}
.sr-panel .countdown{justify-content:flex-start;gap:26px;margin:0 0 22px}
.sr-panel .countdown div{flex:none;max-width:none;padding:0;background:none;border:0;text-align:left}
.sr-panel .countdown b{font:400 clamp(2rem,10vw,2.8rem)/1 'Josefin Sans',sans-serif;color:#fff}
.sr-panel .countdown span{font:400 1.05rem/1.2 'Josefin Sans',sans-serif;color:#fff;opacity:.95}
.sr-panel .sr-brk{padding:12px 22px}

/* ----- Hijau: monogram, jajaran foto, ayat ----- */
.sr-green{background:linear-gradient(#8fa583,#7e9370 55%,#6a7f5a);color:#fff;text-align:center;padding:40px 0 56px}
.sr-mono{display:flex;align-items:center;justify-content:center;gap:2px;font:400 3.8rem/1 'Cormorant Garamond',serif;color:#fff;margin-bottom:34px}
.sr-mono i{font-style:normal;font-size:1.4rem;margin:0 -6px}
.sr-strip{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:0 0 40px;scrollbar-width:none}
.sr-strip::-webkit-scrollbar{display:none}
.sr-strip img{flex:none;scroll-snap-align:start;width:min(48vw,216px);aspect-ratio:1;object-fit:cover;border-radius:8px;box-shadow:0 6px 16px rgba(0,0,0,.2)}
.sr-green .card.quote{padding:0 24px}
.sr-green .quote .q{font:400 1.2rem/1.9 'Cormorant Garamond',serif;letter-spacing:.06em;color:#fff;font-style:normal}
.sr-green .qref{color:#fff;font-size:1.15rem;margin-top:26px}

/* ----- Putih: salam & mempelai ----- */
.sr-white{background:#fff;padding-bottom:30px;text-align:center}
.sr-salam{padding-bottom:20px}
.sr-salam .sr-script{color:var(--g3);margin-bottom:16px;font-size:clamp(2.1rem,9.5vw,3rem)}
.sr-salam p{font:500 1.28rem/1.8 'Quicksand',sans-serif;letter-spacing:.03em;margin:0}
.sr-pp{max-width:520px;margin:0 auto 44px;padding:0 22px}
.sr-pw{position:relative;display:grid;grid-template-columns:clamp(74px,22vw,110px) 1fr;margin-bottom:22px;background:var(--g1)}
.sr-pw .sr-vl{display:flex;align-items:flex-end;justify-content:flex-start;padding:18px 0 16px 20px;grid-column:1;grid-row:1;text-align:left}
.sr-pw .pf{grid-column:2;grid-row:1;display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border:0;padding:0;outline:0;margin:0;border-radius:0 120px 0 0;box-shadow:none}
.sr-pp.rev .sr-pw{grid-template-columns:1fr clamp(74px,22vw,110px)}
.sr-pp.rev .sr-pw .sr-vl{grid-column:2;padding:18px 20px 16px 0;transform:rotate(180deg)}
.sr-pp.rev .sr-pw .pf{grid-column:1;border-radius:120px 0 0 0}
.sr-sig{font:400 clamp(2.8rem,13vw,3.6rem)/1 'Mrs Saint Delafield',cursive;color:var(--g2);margin:0}
.sr-pp h3{font:600 1.4rem/1.3 'Playfair Display',serif;color:var(--ink);margin:2px 0 10px}
.sr-par{font:500 1.08rem/1.7 'Quicksand',sans-serif;margin:0 0 6px}
.ig{color:var(--g2);font-weight:600}

/* ----- Wedding Event ----- */
.sr-events{background:var(--pale);padding:46px 24px 40px;color:var(--ink)}
.sr-et{display:flex;align-items:center;gap:10px;margin:0 -24px 34px 0}
.sr-et h2{position:relative;margin:0;font:600 clamp(2.3rem,12vw,3.2rem)/1 'Playfair Display',serif;text-transform:uppercase;color:var(--g3);text-align:left;flex:none}
.sr-et h2 span{display:block;letter-spacing:-.01em}
.sr-et h2 em{display:block;font:400 clamp(3rem,15vw,4.2rem)/.8 'Mrs Saint Delafield',cursive;text-transform:none;color:var(--g2);margin:-4px 0 0 54px}
.sr-et i{flex:1;height:1px;background:var(--g3);margin-top:18px}
.sr-ev{max-width:520px;margin:0 auto 38px}
.sr-eimg{aspect-ratio:1.1;background:var(--g1) center/cover no-repeat;border-radius:0 110px 0 0}
.sr-ev.rev .sr-eimg{border-radius:110px 0 0 0}
.sr-ebody{display:grid;grid-template-columns:clamp(60px,18vw,92px) 1fr;border-top:10px solid var(--g1);background:#fff}
.sr-ebody .sr-vl{background:var(--g1);display:flex;align-items:center;justify-content:center;padding:14px 0;margin-top:-10px;font-size:clamp(1.5rem,7vw,2rem)}
.sr-ev.rev .sr-ebody{grid-template-columns:1fr clamp(60px,18vw,92px)}
.sr-ev.rev .sr-ebody .sr-vl{grid-column:2;grid-row:1;transform:none}
.sr-ev.rev .sr-etxt{grid-column:1;grid-row:1}
.sr-etxt{padding:20px 18px 24px 20px;text-align:left}
.sr-ed{font:700 clamp(1.25rem,6vw,1.6rem)/1.3 'Playfair Display',serif;color:var(--g2);margin:0 0 4px}
.sr-et2{font:500 1.08rem/1.5 'Quicksand',sans-serif;margin:0}
.sr-etxt hr{border:0;border-top:2px solid var(--g3);margin:16px 0}
.sr-etxt h3{font:700 1.6rem/1.2 'Playfair Display',serif;color:var(--g2);margin:0 0 8px}
.sr-etxt p{font:500 1.08rem/1.6 'Quicksand',sans-serif;margin:0 0 4px}
.sr-etxt .btn{margin-top:16px}

/* ----- Hijau tua: RSVP, hadiah, ucapan ----- */
.sr-dgreen{background:linear-gradient(#8fa583,#6a7f5a 40%,#56603f);color:#fff;padding:20px 0 30px}
.sr-dgreen .sec h2{color:#fff;font-family:'Playfair Display',serif;font-size:clamp(1.9rem,8vw,2.4rem)}
.card{background:var(--pale);border:0;border-radius:18px;box-shadow:none;color:var(--g3);padding:26px 22px}
#rsvp .card.form{padding:26px 20px}
#rsvp p{color:var(--g3)}
.form label{color:var(--g3);font-size:1.05rem}
input,select,textarea{border:1px solid #b9c7ad;border-radius:14px;background:#fff;color:var(--ink);padding:14px 16px;font:500 1.05rem/1.3 'Quicksand',sans-serif;box-shadow:none}
textarea{min-height:130px}
.form .btn{width:100%;margin-top:4px;background:var(--g2);border-radius:22px 6px 6px 22px;box-shadow:inset -5px 0 0 rgba(0,0,0,.28),inset 4px 0 0 var(--g4)}
.wish{background:var(--pale);border-radius:16px;color:var(--g3);padding:16px 18px}
.wish .st{background:none;border:1px solid var(--g3);font-weight:500;font-size:.8rem}
.wcount{color:#fff}
.gcard h3{color:var(--g3)}.rek{color:var(--g3)}
.attn{background:var(--pale);border-radius:14px;color:var(--g3)}
.sr-dgreen .intro,.sr-dgreen .sec>p{color:#fff}

/* ----- Galeri / kisah ----- */
.sr-pale{background:var(--pale);color:var(--ink);padding:10px 0 20px}
.sr-pale .sec h2{color:var(--g3)}
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.gal img,.gal img:first-child,.gal img:last-child:nth-child(even){width:100%;height:auto;aspect-ratio:3/4;max-height:none;object-fit:cover;border:0;border-radius:14px;box-shadow:0 6px 16px rgba(0,0,0,.14);margin:0;grid-column:auto;grid-row:auto}
.gal img:nth-child(4n+1),.gal img:nth-child(4n){border-radius:14px 60px 14px 14px}
.story{display:block;margin:0 0 26px;text-align:center}
.story img{width:100%;max-width:none;max-height:none;aspect-ratio:4/5;object-fit:cover;border-radius:0 90px 0 0;border:0;box-shadow:none;margin:0 0 12px}
.story h3{font:600 1.4rem/1.3 'Playfair Display',serif;color:var(--g2);margin:0 0 6px}.story p{color:var(--ink);font-size:1.05rem;line-height:1.7;margin:0}

/* ----- Penutup ----- */
.sr-close{background:linear-gradient(#e7ede0,#eef2ea);color:var(--ink);text-align:left}
.sr-ctxt{padding:46px 24px 26px;max-width:560px;margin:0 auto}
.sr-ctxt p{font:500 1.25rem/1.8 'Quicksand',sans-serif;margin:0 0 14px}
.sr-ctxt .sr-script{color:var(--g3);font-size:clamp(2.6rem,12vw,3.3rem)}
.sr-cimg{height:min(105vw,520px);background:center bottom/cover no-repeat;-webkit-mask-image:linear-gradient(transparent,#000 35%);mask-image:linear-gradient(transparent,#000 35%)}
footer{color:var(--g3);padding:18px 20px calc(120px + env(safe-area-inset-bottom));text-align:center;background:#fff}

/* ----- Dock ikon bulat & tombol samping ----- */
.dock{width:min(94vw,430px);height:72px;border-radius:999px;background:rgba(138,160,124,.86);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border:0;box-shadow:0 8px 24px rgba(0,0,0,.22);padding:0 10px;align-items:center;justify-content:space-around;gap:4px;bottom:max(12px,env(safe-area-inset-bottom))}
.dock a{flex:none;width:52px;height:52px;padding:0;border-radius:50%;background:#fff;color:var(--g3);box-shadow:none}
.dock a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.dock a svg{width:24px;height:24px}
.dock a.on{background:var(--g3);color:#fff}
.dock a:not(.on):hover{background:var(--pale)}
.musicbtn,.asbtn{position:fixed;right:max(14px,env(safe-area-inset-right));width:50px;height:50px;border:0;border-radius:50%;background:rgba(138,160,124,.92);color:#fff;box-shadow:0 4px 12px rgba(0,0,0,.2);cursor:pointer;z-index:9;font-size:1.4rem}
.asbtn{bottom:calc(210px + env(safe-area-inset-bottom));opacity:.95}
.musicbtn{bottom:calc(146px + env(safe-area-inset-bottom));opacity:1}.musicbtn.off{opacity:.7}.musicbtn:not(.off){animation:none}

/* Perapihan */
.amp,.cover h1 .amp,.sr-hn .amp{color:inherit}
.bgmedia,.bgslides{overflow:hidden}