:root{--sage:#7d8f74;--sage-d:#4f5f4a;--cream:#f7f2e7;--cream2:#efe6d2;--gold:#b8955a;--gold-l:#d9bf87;--ink:#3b3a33}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Poppins,sans-serif;font-weight:300;color:var(--ink);background:var(--cream);line-height:1.7;font-size:15px}
body.locked{overflow:hidden;height:100vh}
.script{font-family:"Great Vibes",cursive;font-weight:400;color:var(--sage-d)}
.arabic{font-family:Amiri,serif;font-size:1.35rem;direction:rtl;color:var(--sage-d);line-height:2.1;margin:.8rem 0}
.arabic.big{font-size:1.9rem;color:var(--gold)}
.small-caps{letter-spacing:.3em;text-transform:uppercase;font-size:.75rem}
.tiny{font-size:.75rem;opacity:.75}
.title{font-family:"Cormorant Garamond",serif;font-size:1.9rem;color:var(--sage-d);margin-bottom:1rem}
.title::after{content:"";display:block;width:60px;height:2px;background:var(--gold);margin:.5rem auto 0}
.sub{font-family:"Cormorant Garamond",serif;font-size:1.3rem;margin:1.5rem 0 .6rem}
.quote{font-style:italic;font-family:"Cormorant Garamond",serif;font-size:1.05rem}
.src{color:var(--gold);font-weight:500;margin-top:.4rem}
.btn{display:inline-block;border:1px solid var(--sage-d);background:transparent;color:var(--sage-d);padding:.6rem 1.2rem;border-radius:999px;font:500 .85rem Poppins,sans-serif;cursor:pointer;text-decoration:none;transition:.2s;margin:.25rem}
.btn:hover{background:var(--sage-d);color:var(--cream)}
.btn-gold{background:var(--gold);border-color:var(--gold);color:#fff}
.btn-gold:hover{background:var(--sage-d);border-color:var(--sage-d)}
/* cover */
.cover{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;text-align:center;padding:2rem;color:var(--cream);
 background:radial-gradient(circle at 20% 15%,rgba(217,191,135,.35),transparent 40%),radial-gradient(circle at 85% 90%,rgba(217,191,135,.25),transparent 40%),linear-gradient(160deg,#5f7258,#3e4c3a);transition:transform .9s ease,opacity .9s}
.cover.open{transform:translateY(-100%);opacity:.3;pointer-events:none}
.cover-inner{border:1px solid var(--gold-l);padding:2.5rem 1.5rem;border-radius:200px 200px 16px 16px;max-width:380px;width:100%}
.cover h1{font-size:3.4rem;color:var(--cream);line-height:1.2;margin:.6rem 0}
.cover h1 span{color:var(--gold-l)}
/* tighten cover so long titles stay inside the arch */
.cover-inner{padding:2.1rem 1.25rem}
.cover h1{font-size:2.85rem}
.date-line{letter-spacing:.15em;font-size:.85rem}
.guest{margin:1.8rem 0;font-size:.85rem}
.guest-name{font-family:"Inter","Poppins",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;font-size:1.35rem;font-weight:600;letter-spacing:.01em;color:var(--gold-l);margin:.4rem 0;overflow-wrap:anywhere;word-break:break-word;max-width:100%}
/* sections */
main{max-width:520px;margin:0 auto;background:var(--cream)}
.section{padding:3.5rem 1.5rem;position:relative}
.section:nth-of-type(even){background:var(--cream2)}
.center{text-align:center}
.reveal{opacity:0;transform:translateY(24px);transition:.8s ease}
.reveal.show{opacity:1;transform:none}
.person{margin:1.5rem 0}
.person h2{font-size:2.3rem}
.avatar{width:130px;height:160px;margin:0 auto 1rem;border-radius:80px 80px 12px 12px;border:3px solid var(--gold-l);display:flex;align-items:center;justify-content:center;font:700 3rem "Cormorant Garamond",serif;color:#fff}
.amp{font-size:3rem;color:var(--gold)}
.g1{background:linear-gradient(135deg,#a8b89d,#5f7258)}
.g2{background:linear-gradient(135deg,#d9bf87,#9c7a43)}
.g3{background:linear-gradient(135deg,#e8dcc2,#b8955a)}
.g4{background:linear-gradient(200deg,#7d8f74,#d9bf87)}
.g5{background:linear-gradient(45deg,#4f5f4a,#a8b89d)}
.g6{background:linear-gradient(90deg,#b8955a,#efe6d2,#7d8f74)}
.cards{display:grid;gap:1rem}
.card{background:#fff;border:1px solid var(--gold-l);border-radius:16px;padding:1.5rem;box-shadow:0 6px 20px rgba(79,95,74,.08)}
.card h3{font-family:"Cormorant Garamond",serif;font-weight:700;font-size:1.6rem;line-height:1.3;color:var(--gold)}
.day{font-weight:500}
.venue{margin-top:.6rem;font-weight:500}.venue span{font-weight:300;font-size:.85rem}
.countdown{display:flex;justify-content:center;gap:.6rem}
.countdown div{background:var(--sage-d);color:var(--cream);border-radius:12px;width:68px;padding:.6rem 0}
.countdown span{display:block;font:700 1.6rem "Cormorant Garamond",serif}
.countdown small{font-size:.7rem}
.btn-row{margin:1.2rem 0}
.btn-ics{font-size:.75rem;padding:.45rem .95rem;opacity:.85}
.map{width:100%;height:220px;border:0;border-radius:12px}
.gallery{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:110px;gap:.5rem;margin-bottom:.6rem}
.ph{border-radius:10px;position:relative}
.ph::after{content:"❀";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:1.6rem}
.tall{grid-row:span 2}.wide{grid-column:span 2}
.form{display:grid;gap:.6rem;text-align:left}
.form label{display:block;font-size:.78rem;font-weight:600;letter-spacing:.02em;margin:.15rem 0 .1rem;opacity:.9}
.form input,.form select,.form textarea{width:100%;padding:.7rem .9rem;border:1px solid var(--gold-l);border-radius:10px;background:#fff;font:300 .9rem Poppins,sans-serif;color:var(--ink)}
.form button{justify-self:center}
.stats{display:flex;justify-content:center;gap:.5rem;margin:1rem 0;flex-wrap:wrap}
.stats span{background:#fff;border:1px solid var(--gold-l);border-radius:999px;padding:.2rem .8rem;font-size:.75rem}
.wishes{max-height:340px;overflow:auto;text-align:left;display:grid;gap:.6rem}
.wish{background:#fff;border-radius:12px;padding:.8rem 1rem;border-left:3px solid var(--gold)}
.wish b{font-weight:500}.wish .tag{font-size:.7rem;color:var(--sage);margin-left:.4rem}
.wish p{font-size:.85rem}.wish time{font-size:.7rem;opacity:.6}
.bank{background:#fff;border:1px solid var(--gold-l);border-radius:16px;padding:1.2rem;margin-top:1rem}
.bank-name{font-weight:500;color:var(--gold)}
.acc{font:700 1.5rem "Cormorant Garamond",serif;letter-spacing:.1em}
.qr{width:150px;height:150px;margin:.6rem auto;border:8px solid #fff;outline:1px solid #ccc;
 background:repeating-conic-gradient(#3b3a33 0 25%,#fff 0 50%) 0 0/18px 18px}
.closing h2{font-size:2.6rem}
footer{text-align:center;padding:1.5rem;font-size:.75rem;background:var(--sage-d);color:var(--cream)}
.music{position:fixed;right:16px;bottom:16px;z-index:40;width:44px;height:44px;border-radius:50%;border:none;background:var(--gold);color:#fff;font-size:1.2rem;cursor:pointer;box-shadow:0 4px 12px rgba(0,0,0,.2)}
.music.playing{animation:spin 3s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{position:fixed;left:50%;bottom:80px;transform:translateX(-50%);background:var(--ink);color:#fff;padding:.5rem 1rem;border-radius:999px;font-size:.8rem;opacity:0;transition:.3s;z-index:60;pointer-events:none}
.toast.show{opacity:.92}
@media(min-width:700px){.cards{grid-template-columns:1fr 1fr}}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

/* P0 cover fit: scrollable cover, wrap long names inside the arch */
.cover{overflow-y:auto;-webkit-overflow-scrolling:touch}
.cover-inner{margin:auto;overflow:hidden}
.cover h1{overflow-wrap:break-word;word-break:normal;hyphens:auto;max-width:100%;padding:0 .4rem}
.cover .guest p{overflow-wrap:anywhere}
@media(max-width:480px){
.cover{padding:1.25rem 1rem}
.cover-inner{padding:2.4rem 1rem 1.8rem;border-radius:170px 170px 14px 14px}
.cover h1{font-size:2.05rem;line-height:1.15;margin:.45rem 0}
.cover .small-caps,.small-caps{font-size:.58rem;letter-spacing:.18em;padding:0 .25rem}
.date-line{font-size:.8rem;letter-spacing:.12em}
.guest{margin:1.4rem 0;font-size:.82rem}
.guest-name{font-size:1.12rem;line-height:1.35}
}
@media(max-width:400px){
.cover{padding:1rem .75rem}
.cover-inner{padding:2.3rem .85rem 1.6rem;border-radius:150px 150px 14px 14px}
.cover h1{font-size:1.85rem;line-height:1.15;padding:0 .3rem}
.cover .small-caps{font-size:.55rem;letter-spacing:.14em}
.date-line{font-size:.76rem;letter-spacing:.1em}
.guest{margin:1.2rem 0;font-size:.78rem}
.guest-name{font-size:1.05rem}
.cover .btn{padding:.55rem 1.05rem;font-size:.8rem}
}

/* WhatsApp CTA modal */
.wa-cta{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(0,0,0,.55);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s}
.wa-cta.show{opacity:1;visibility:visible;pointer-events:auto}
.wa-cta-card{position:relative;width:100%;max-width:340px;background:#fff;color:#1a1a1a;border-radius:18px;padding:1.6rem 1.35rem 1.25rem;text-align:center;box-shadow:0 16px 48px rgba(0,0,0,.28);border:1px solid var(--gold-l,#e8cf8e)}
.wa-cta-card h3{font-family:"Cormorant Garamond",serif;font-size:1.45rem;font-weight:700;margin:0 0 .5rem;line-height:1.25;color:inherit}
.wa-cta-copy{font-size:.88rem;line-height:1.5;opacity:.82;margin:0 0 1rem}
.wa-cta-primary{display:inline-flex;align-items:center;justify-content:center;width:100%;margin:0 0 .65rem;text-decoration:none}
.wa-cta-form{display:inline-block;font-size:.82rem;color:inherit;opacity:.75;margin-bottom:.85rem;text-decoration:underline}
.wa-cta-form:hover{opacity:1}
.wa-cta-close{display:block;width:100%;border:none;background:transparent;color:inherit;opacity:.55;font-size:.8rem;cursor:pointer;padding:.35rem;font-family:inherit}
.wa-cta-close:hover{opacity:.9}
.wa-cta-x{position:absolute;top:8px;right:10px;width:32px;height:32px;border:none;background:transparent;font-size:1.4rem;line-height:1;cursor:pointer;color:inherit;opacity:.45;border-radius:8px}
.wa-cta-x:hover{opacity:.85;background:rgba(0,0,0,.06)}

/* Floating WA FAB — always visible, distinct from scroll modal */
.wa-fab{position:fixed;right:16px;bottom:20px;z-index:55;display:inline-flex;align-items:center;gap:.45rem;padding:.72rem 1rem;border-radius:999px;background:#25D366;color:#fff!important;font:600 .82rem "Inter",system-ui,sans-serif;text-decoration:none!important;box-shadow:0 6px 20px rgba(0,0,0,.28);letter-spacing:.01em;max-width:calc(100vw - 32px)}
.wa-fab:hover{filter:brightness(1.06);color:#fff!important}
.wa-fab svg{flex:0 0 auto}
.music{bottom:78px!important}
/* Hide Netlify badge if injected */
a[href*="netlify.com"][href*="badge"],#netlify-badge,.netlify-badge{display:none!important}
.wa-cta-logo{display:block;width:148px;height:auto;margin:0 auto .85rem}

/* Kisah / love-story timeline (islami) */
.story{list-style:none;margin:0 auto;padding:0;max-width:380px;text-align:left;position:relative}
.story::before{content:"";position:absolute;left:18px;top:.4rem;bottom:.4rem;width:2px;background:var(--gold-l)}
.story-beat{position:relative;padding:0 0 1.4rem 3.2rem}
.story-beat:last-child{padding-bottom:0}
.story-beat::before{content:"";position:absolute;left:11px;top:.45rem;width:16px;height:16px;border-radius:50%;background:var(--gold);border:3px solid #fff;box-shadow:0 0 0 1px var(--gold-l)}
.story-year{display:inline-block;font-size:.72rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:.15rem}
.story-beat h3{font-family:"Cormorant Garamond",serif;font-size:1.35rem;color:var(--sage-d);margin:0 0 .25rem;font-weight:700}
.story-beat p{font-size:.9rem;margin:0;opacity:.9}

/* Contoh QRIS sample image */
.qris-badge{display:inline-block;margin:.35rem 0 .5rem;padding:.2rem .7rem;border-radius:999px;background:var(--gold);color:#fff;font:600 .72rem Poppins,sans-serif;letter-spacing:.04em}
.qr-img{display:block;width:180px;height:auto;margin:.4rem auto;border-radius:8px;border:1px solid var(--gold-l);background:#fff}

/* Guest QR check-in stub */
.checkin-card{background:#fff;border:1px solid var(--gold-l);border-radius:16px;padding:1.2rem;margin-top:.8rem;display:inline-block;min-width:200px}
.guest-qr{width:140px;height:140px;margin:0 auto .6rem;display:flex;align-items:center;justify-content:center}
.guest-qr img,.guest-qr canvas{width:140px;height:140px;image-rendering:pixelated}
.guest-qr-name{font-family:"Inter",Poppins,sans-serif;font-weight:600;font-size:1rem;color:var(--sage-d);margin:.2rem 0}