:root{
  --paper:#f8f4ec;
  --paper2:#fcfaf5;
  --navy:#173c75;
  --navy2:#2a5184;
  --gold:#c29b55;
  --gold2:#d6ba7f;
  --ink:#263955;
  --muted:#69788c;
  --blue:#9bb4d7;
  --white:#fff;
  --shadow:0 20px 60px rgba(24,58,105,.12);
  --font-body:"Poppins",system-ui,sans-serif;
  --font-serif:"Cormorant Garamond",serif;
  --font-script:"Great Vibes",cursive;
  --font-arabic:"Amiri",serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--ink);
  font-family:var(--font-body);
  background:var(--paper);
  overflow-x:hidden;
}
body.locked{overflow:hidden}
a{text-decoration:none;color:inherit}
button,input,textarea,select{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
.global-paper{
  position:fixed; inset:0; z-index:-10;
  background:
    radial-gradient(circle at 12% 7%,rgba(166,188,222,.18),transparent 22%),
    radial-gradient(circle at 90% 75%,rgba(166,188,222,.16),transparent 24%),
    linear-gradient(180deg,var(--paper2),var(--paper));
}
.cover{
  position:fixed; inset:0; z-index:50;
  min-height:100dvh;
  display:grid; place-items:center;
  padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));
  background:rgba(248,244,236,.985);
  overflow:hidden;
  transition:opacity .85s ease,transform .85s ease,visibility .85s ease;
}
.cover.is-open{opacity:0;transform:scale(1.02);visibility:hidden}
.cover-content{
  width:min(100%,520px);
  position:relative; z-index:3;
  text-align:center;
  padding:44px 20px 30px;
}
.arch-frame,.page-frame{
  position:absolute;
  inset:15px;
  pointer-events:none;
  border:2px solid rgba(194,155,85,.66);
  border-radius:180px 180px 8px 8px/110px 110px 8px 8px;
}
.arch-frame::after,.page-frame::after{
  content:"";position:absolute;inset:7px;
  border:1px solid rgba(194,155,85,.45);
  border-radius:inherit;
}
.floral{
  position:absolute;
  z-index:2;
  width:min(42vw,300px);
  aspect-ratio:1/1.3;
  background-size:contain;
  background-repeat:no-repeat;
  pointer-events:none;
}
.floral-tl{left:-20px;top:-12px;background-image:url("../images/floral.svg")}
.floral-br{right:-20px;bottom:-12px;background-image:url("../images/floral.svg");transform:scale(-1,-1)}
.floral.subtle{opacity:.55}
.arabic{
  margin:0 0 8px;
  color:var(--gold);
  font-family:var(--font-arabic);
  direction:rtl;
  line-height:1.9;
  font-size:clamp(28px,6vw,44px)
}
.kicker{
  margin:0 0 10px;
  color:var(--navy);
  font-weight:600;
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase
}
.couple-photo{
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:50%;
  box-shadow:
    0 18px 45px rgba(25,58,104,.13),
    0 0 0 6px rgba(255,255,255,.88);
  border:1px solid rgba(194,155,85,.22);
  background:#f8f4ec;
}

/* ============================================================
   EDIT TAMPILAN FOTO DI SINI
   cover-photo = foto pada halaman pembuka
   main-photo  = foto pada halaman pertama
   ============================================================ */
.cover-photo{
  width:min(64vw,270px);
  aspect-ratio:1/1;
  margin:14px auto 16px;
}
.main-photo{
  width:min(78vw,350px);
  aspect-ratio:1/1;
  margin:18px auto 14px;
}
.script-title{
  margin:8px 0 2px;
  color:var(--navy);
  font-family:var(--font-script);
  font-size:clamp(52px,14vw,82px);
  font-weight:400;
  line-height:.95
}
.script-title span{color:var(--gold)}
.date-line{margin:4px 0 14px;font-family:var(--font-serif);font-size:19px}
.guest-panel{
  max-width:330px;margin:18px auto 14px;padding:12px 14px;
  border-top:1px solid rgba(194,155,85,.45);
  border-bottom:1px solid rgba(194,155,85,.45)
}
.guest-panel span{display:block;font-size:11px;color:var(--muted)}
.guest-panel strong{display:block;margin-top:5px;color:var(--navy);font-family:var(--font-serif);font-size:23px}
.micro{font-size:10px;color:var(--muted)}
.btn{
  min-height:48px;
  border-radius:999px;
  border:0;
  padding:0 20px;
  cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;
  transition:transform .2s ease,box-shadow .2s ease
}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,var(--navy),var(--navy2));color:#fff;box-shadow:0 10px 22px rgba(23,60,117,.17)}
.btn-outline{border:1.5px solid var(--gold);background:transparent;color:var(--navy)}
.btn-copy{background:#fff;border:1px solid rgba(23,60,117,.12);color:var(--navy)}
.btn.full{width:100%}

.book{
  height:100dvh;
  overflow-y:auto;
  scroll-snap-type:y proximity;
  scroll-behavior:smooth;
  opacity:0;
  pointer-events:none;
  transition:opacity .65s ease .15s;
}
.book.visible{opacity:1;pointer-events:auto}
.page{
  position:relative;
  min-height:100dvh;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
  display:grid;
  place-items:center;
  padding:max(68px,env(safe-area-inset-top)) 18px max(70px,calc(env(safe-area-inset-bottom) + 24px));
  overflow:hidden;
}
.page-content{
  position:relative;z-index:3;
  width:min(100%,820px);
  text-align:center;
  opacity:0;
  transform:translateY(34px) scale(.985);
  filter:blur(6px);
  transition:opacity .75s ease,transform .75s cubic-bezier(.2,.75,.2,1),filter .75s ease;
}
.page.active .page-content{
  opacity:1;
  transform:none;
  filter:blur(0);
}
.page.nudge-out .page-content{
  opacity:.15;
  transform:translateY(-20px) scale(.985);
}
.page-content.narrow{max-width:650px}
.lead,.closing-copy,.muted,.address{color:var(--muted);line-height:1.75}
.lead{max-width:590px;margin:0 auto 10px}
.closing-copy{max-width:610px;margin:20px auto 0}
.name-big{
  margin:4px 0 0;
  font-family:var(--font-script);
  color:var(--navy);
  font-weight:400;
  font-size:clamp(52px,13vw,82px);
  line-height:.95
}
.parent-line{margin:3px 0;color:var(--ink);font-size:13px}
.ampersand{display:flex;align-items:center;justify-content:center;gap:12px;margin:10px auto}
.ampersand::before,.ampersand::after{content:"";width:54px;height:1px;background:rgba(194,155,85,.45)}
.ampersand span{
  width:38px;height:38px;display:grid;place-items:center;
  border:1.5px solid var(--gold);border-radius:50%;
  color:var(--gold);font-family:var(--font-serif);font-size:24px
}
.section-title{
  margin:6px 0 22px;
  color:var(--navy);
  font-family:var(--font-serif);
  font-size:clamp(38px,9vw,58px);
  line-height:1;
  font-weight:600
}
.date-strip{display:grid;gap:12px}
.date-card{
  min-height:155px;
  padding:20px 12px;
  border-radius:22px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(194,155,85,.22);
  box-shadow:var(--shadow);
  display:flex;flex-direction:column;align-items:center;justify-content:center
}
.date-card small{color:var(--navy);letter-spacing:.12em;font-weight:600}
.date-card strong{font-family:var(--font-serif);font-size:72px;line-height:.9;color:var(--navy)}
.date-card span{margin-top:8px;color:var(--navy2);font-size:14px}
.symbol{font-family:var(--font-serif);font-size:48px;line-height:1;color:var(--gold)}
.countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:18px}
.countdown>div{
  padding:14px 5px 11px;border-radius:18px;background:rgba(255,255,255,.62);border:1px solid rgba(194,155,85,.18)
}
.countdown strong{display:block;font-family:var(--font-serif);color:var(--navy);font-size:clamp(30px,8vw,48px);line-height:1}
.countdown span{display:block;margin-top:6px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;font-size:9px}
.building-lineart{width:min(100%,500px);margin:8px auto;color:var(--navy2)}
.building-lineart svg{width:100%;height:auto}
.address{font-size:15px;margin:5px 0 20px}
.gift-card{
  margin:24px auto 0;
  padding:18px;
  border-radius:22px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(194,155,85,.22);
  box-shadow:var(--shadow);
  display:flex;align-items:center;justify-content:space-between;gap:12px;text-align:left
}
.gift-card small,.gift-card span{display:block;color:var(--muted)}
.gift-card strong{display:block;margin:4px 0;color:var(--navy);font-family:var(--font-serif);font-size:28px}
.status{min-height:18px;font-size:11px;color:var(--muted);margin:10px 0 0}
.rsvp-form{
  text-align:left;
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(194,155,85,.22);
  box-shadow:var(--shadow)
}
.rsvp-form label{display:block;margin-bottom:13px}
.rsvp-form label>span{display:block;margin-bottom:6px;color:var(--navy);font-size:12px;font-weight:600}
.rsvp-form input,.rsvp-form textarea,.rsvp-form select{
  width:100%;min-height:48px;padding:12px 14px;border-radius:14px;border:1px solid rgba(23,60,117,.13);background:#fff;color:var(--ink);outline:none
}
.rsvp-form textarea{min-height:105px;resize:vertical}
.rsvp-form input:focus,.rsvp-form textarea:focus,.rsvp-form select:focus{border-color:rgba(23,60,117,.35);box-shadow:0 0 0 4px rgba(23,60,117,.06)}
.wish-list{display:grid;gap:9px;margin-top:14px}
.wish-card{
  padding:14px 15px;border-radius:18px;background:rgba(255,255,255,.7);border:1px solid rgba(194,155,85,.18);text-align:left
}
.wish-card>div{display:flex;justify-content:space-between;gap:12px}
.wish-card strong{font-family:var(--font-serif);font-size:20px;color:var(--navy)}
.wish-card span{font-size:10px;color:var(--gold)}
.wish-card p{margin:7px 0 0;color:var(--muted);line-height:1.6;font-size:12px}
.center{text-align:center}
.gap-top{margin-top:24px}
.closing-title{font-size:clamp(60px,16vw,95px)}
.gold-heart{color:var(--gold);font-size:22px;margin-top:6px}

.music-button{
  position:fixed;z-index:35;
  right:max(14px,env(safe-area-inset-right));
  bottom:max(16px,calc(env(safe-area-inset-bottom) + 12px));
  width:48px;height:48px;border-radius:50%;border:1px solid rgba(194,155,85,.55);
  background:rgba(23,60,117,.94);color:#fff;box-shadow:var(--shadow);cursor:pointer
}
.music-button.playing span{display:block;animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

.page-dots{
  position:fixed;z-index:34;
  right:9px;top:50%;transform:translateY(-50%);
  display:flex;flex-direction:column;gap:8px
}
.page-dots button{
  width:8px;height:8px;padding:0;border-radius:50%;border:1px solid rgba(23,60,117,.36);
  background:rgba(255,255,255,.8);cursor:pointer;transition:.25s ease
}
.page-dots button.active{height:20px;border-radius:999px;background:var(--gold);border-color:var(--gold)}
.toast{
  position:fixed;z-index:60;left:50%;bottom:calc(76px + env(safe-area-inset-bottom));transform:translate(-50%,14px);
  max-width:calc(100vw - 32px);padding:11px 16px;border-radius:999px;background:rgba(23,60,117,.95);color:#fff;font-size:12px;opacity:0;transition:.25s ease;pointer-events:none
}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(min-width:720px){
  .date-strip{grid-template-columns:repeat(3,1fr)}
  .page{padding-inline:28px}
  .page-dots{right:18px}
}
@media(max-width:420px){
  .arch-frame,.page-frame{inset:9px}
  .cover-content{padding-inline:16px}
  .date-card{min-height:130px}
  .date-card strong{font-size:62px}
  .gift-card{flex-direction:column;align-items:stretch;text-align:center}
  .gift-card .btn{width:100%}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;transition-duration:.01ms!important}
}
/* Detail visual mengikuti kartu undangan biru, emas dan ivory. */
.hero-guest{margin:12px auto 8px;padding:8px 18px;border-block:1px solid rgba(194,155,85,.4);width:fit-content;max-width:100%}
.hero-guest span{display:block;color:var(--muted);font-size:11px}
.hero-guest strong{display:block;color:var(--navy);font-family:var(--font-serif);font-size:clamp(19px,5vw,25px);overflow-wrap:anywhere}
.guest-panel strong{overflow-wrap:anywhere}
.page-story{padding-block:64px 70px;overflow:visible}
.story-content{padding:18px 0 24px}
.story-heading{font-family:var(--font-script);font-size:clamp(58px,11vw,84px);font-weight:400;margin-bottom:12px}
.story-quote{font-family:var(--font-serif);font-size:clamp(24px,5vw,34px);font-style:italic;color:var(--navy);margin:8px auto 22px}
.story-text{max-width:570px;margin:auto}
.story-text p{font-size:clamp(12px,3.1vw,14px);line-height:1.95;color:var(--ink);margin:0 auto 19px}
.story-milestone{position:relative;display:flex;flex-direction:column;gap:2px;margin:14px auto 17px;padding:8px 14px;border-block:1px solid rgba(194,155,85,.45);width:fit-content;min-width:210px}
.story-milestone span{font-size:11px;letter-spacing:.12em;color:var(--gold)}
.story-milestone strong{font-family:var(--font-serif);font-size:24px;color:var(--navy);font-weight:600}
.story-text .story-prayer{font-family:var(--font-serif);font-size:clamp(19px,4.5vw,25px);font-style:italic;color:var(--navy);line-height:1.5;margin-top:20px}
/* Pada perangkat pendek, isi halaman panjang tetap bisa dibaca/di-scroll. */
@media(max-height:740px){.cover{overflow-y:auto;place-items:start center}.cover-content{margin:auto}.page{padding-top:55px;padding-bottom:55px}}
@media(max-width:420px){.page-story{padding-inline:27px}.story-text p{line-height:1.8}.page-hero .main-photo{width:min(60vw,240px);margin:8px auto}.page-hero .name-big{font-size:clamp(44px,12vw,65px)}}