/* ============ Undangan Digital — Benny & Indah ============ */
:root{
  --blue-900:#1d3160;
  --blue-800:#22386e;
  --blue-700:#2b4a9b;
  --blue-600:#3a5fa8;
  --blue-500:#4a6fc4;
  --blue-300:#8fa6d6;
  --blue-200:#b9cbee;
  --blue-50:#eaf0fa;
  --paper:#f2f6fb;
  --gold:#d4af37;
  --gold-dark:#8d6412;
  --ink:#26365e;
  --serif:'Cormorant Garamond', Georgia, serif;
  --caps:'Cinzel', Georgia, serif;
  --script:'Parisienne', cursive;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:var(--serif);
  color:var(--ink);
  background:
    radial-gradient(1200px 700px at 50% -10%, #ffffff 0%, rgba(255,255,255,0) 55%),
    radial-gradient(900px 600px at 12% 30%, rgba(185,203,238,.35) 0%, rgba(185,203,238,0) 60%),
    radial-gradient(900px 600px at 88% 65%, rgba(185,203,238,.35) 0%, rgba(185,203,238,0) 60%),
    linear-gradient(180deg,#f7fafd 0%, var(--paper) 45%, #e7eef8 100%);
  min-height:100vh;
  overflow-x:hidden;
}
body:not(.opened){overflow:hidden;height:100vh}
img{display:block;max-width:100%}
button{font-family:inherit;cursor:pointer}
a{text-decoration:none;color:inherit}

/* ============ dekorasi ============ */
.decor{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:0}
.decor .paper{
  position:absolute;inset:0;opacity:.5;
  background:
    radial-gradient(600px 300px at 20% 15%, rgba(255,255,255,.8), transparent 70%),
    radial-gradient(500px 260px at 80% 45%, rgba(255,255,255,.7), transparent 70%);
}
.deco{position:absolute}
.deco-tl{top:-8px;left:-30px;width:min(34vw,320px)}
.deco-tr{top:-8px;right:-30px;width:min(34vw,320px)}
.deco-ml{top:34%;left:-70px;width:min(30vw,280px);opacity:.9}
.deco-mr{top:52%;right:-70px;width:min(30vw,280px);opacity:.9}
.decor-front{position:fixed;left:0;right:0;bottom:0;pointer-events:none;z-index:6}
.deco-bottom{
  display:block;width:160%;
  position:absolute;left:50%;bottom:-4px;transform:translateX(-50%);
}
.bfly{position:absolute;width:38px;height:38px}
.bfly.b1{top:22%;left:12%;transform:rotate(-12deg)}
.bfly.b2{top:30%;right:14%;transform:rotate(14deg)}
.bfly.b3{top:62%;left:9%;transform:rotate(8deg)}
.bfly.b4{top:70%;right:10%;transform:rotate(-10deg)}

/* ============ banner atas ============ */
.brandbar{
  position:fixed;top:10px;left:50%;transform:translateX(-50%);
  z-index:45;width:min(58%,430px);text-align:center;
  padding:9px 12px 8px;
  background:linear-gradient(180deg,#5b7fd0 0%, var(--blue-600) 45%, var(--blue-800) 100%);
  clip-path:polygon(2% 0,98% 0,100% 50%,98% 100%,2% 100%,0 50%);
  box-shadow:0 3px 10px rgba(29,49,96,.35);
}
.brandbar span{
  font-family:var(--caps);font-size:clamp(11px,2.6vw,16px);
  letter-spacing:.22em;color:#fff;white-space:nowrap;
}

/* ============ cover ============ */
.cover{
  position:fixed;inset:0;z-index:40;display:flex;align-items:center;justify-content:center;
  background:rgba(242,246,251,.93);backdrop-filter:blur(1px);
  transition:transform 1s ease,opacity 1s ease,visibility 1s ease;
}
.cover.hide{transform:translateY(-100%);opacity:0;visibility:hidden}
.cover-card{
  width:min(86vw,420px);text-align:center;
  background:rgba(255,255,255,.72);
  border:1px solid rgba(74,111,196,.55);
  outline:1px solid rgba(74,111,196,.35);outline-offset:5px;
  border-radius:8px;padding:26px 24px 30px;
}
.cover-card .arch-photo{width:56%;margin:0 auto 14px}
.script-lead{font-family:var(--script);font-size:26px;color:var(--blue-700)}
.script-name{
  font-family:var(--serif);font-weight:700;color:var(--blue-800);
  font-size:34px;letter-spacing:.04em;line-height:1.15;
}
.script-name.big{font-size:40px;margin:2px 0 4px}
.script-name.small{font-family:var(--script);font-weight:400;font-size:34px;margin-top:14px}
.orn{font-family:var(--script);font-size:34px;color:var(--blue-500);margin:8px 0}
.orn.big{font-size:52px;margin:18px 0}
.guest-label{font-size:16px;color:var(--ink);margin-top:14px}
.guest-name{font-size:22px;font-weight:700;color:var(--blue-800);margin-top:4px}

/* ============ tombol ============ */
.btn-primary{
  display:inline-flex;align-items:center;gap:8px;justify-content:center;
  margin-top:22px;padding:11px 26px;border:none;border-radius:999px;
  background:linear-gradient(180deg,var(--blue-600),var(--blue-800));
  color:#fff;font-family:var(--serif);font-size:17px;letter-spacing:.05em;
  box-shadow:0 4px 12px rgba(29,49,96,.35);
  transition:transform .2s ease,box-shadow .2s ease;
}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(29,49,96,.4)}
.btn-ghost{
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  margin-top:14px;padding:8px 20px;border-radius:999px;
  border:1px solid var(--blue-600);background:rgba(255,255,255,.75);
  color:var(--blue-800);font-family:var(--serif);font-size:15px;letter-spacing:.08em;
  transition:background .2s ease,color .2s ease;
}
.btn-ghost:hover{background:var(--blue-700);color:#fff}

/* ============ kolom konten ============ */
.column{
  position:relative;z-index:2;
  width:min(92vw,500px);margin:0 auto;
  padding:86px 0 34vh;
}
.sec{margin-bottom:34px}
.sec.center{text-align:center}

.card{
  background:rgba(255,255,255,.80);
  border:1px solid rgba(74,111,196,.55);
  outline:1px solid rgba(74,111,196,.3);outline-offset:5px;
  border-radius:8px;
  padding:28px 24px;
  backdrop-filter:blur(2px);
  box-shadow:0 8px 24px rgba(29,49,96,.10);
  margin-bottom:22px;
}

/* foto lengkung (arch) */
.arch-photo{
  overflow:hidden;
  border-radius:50% 50% 10px 10px / 34% 34% 3% 3%;
  box-shadow:0 6px 18px rgba(29,49,96,.25);
}
.arch-photo img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4}
.arch-photo.gold-border{
  border:3px solid var(--gold);
  box-shadow:0 0 0 1px var(--gold-dark),0 8px 20px rgba(29,49,96,.25);
  width:64%;margin:0 auto 18px;
}
.arch-photo.slim img{aspect-ratio:3/4.2}
.arch-photo.portrait{width:52%;margin:16px auto 6px}

/* tipografi konten */
.caps{
  font-family:var(--caps);font-size:15px;letter-spacing:.28em;
  color:var(--blue-700);margin-top:18px;text-transform:uppercase;
}
.title-caps{
  font-family:var(--caps);font-size:20px;letter-spacing:.18em;color:var(--blue-800);
  margin-bottom:12px;
}
.date-line{font-size:18px;margin-top:10px;letter-spacing:.06em}
.hashtag{font-family:var(--script);font-size:22px;color:var(--blue-600);margin-top:6px}
.web-line{
  font-family:var(--caps);font-size:12px;letter-spacing:.22em;color:var(--blue-500);
  margin-top:10px;
}
.body-text{font-size:16.5px;line-height:1.75;color:var(--ink);margin-top:10px}
.body-text.quote{font-style:italic;text-align:justify}
.quote-src{font-size:15px;letter-spacing:.08em;color:var(--blue-600);margin-top:8px}
.person-name{font-size:21px;font-weight:700;letter-spacing:.04em;color:var(--blue-800);margin-top:2px}
.parents{font-size:15.5px;line-height:1.6;margin-top:6px}
.event-date{font-family:var(--caps);font-size:16px;letter-spacing:.12em;color:var(--blue-800);margin-top:8px}
.event-time{font-size:16px;letter-spacing:.08em;margin-top:4px}
.pin{color:var(--blue-600);margin-top:12px}
.venue{font-size:17px;margin-top:4px}
.addr{font-size:15.5px;line-height:1.6;margin-top:6px}
.addr.strong{font-weight:700;margin:14px auto 4px;max-width:88%}
.script-alt{font-family:var(--serif);font-style:italic;font-size:30px;color:var(--blue-800)}

/* countdown */
.countdown{
  display:flex;align-items:center;justify-content:center;gap:8px;margin:22px 0 6px;
}
.cd-box{
  min-width:64px;padding:10px 6px;border-radius:8px;
  background:rgba(255,255,255,.85);border:1px solid rgba(74,111,196,.5);
  box-shadow:0 4px 10px rgba(29,49,96,.12);
  display:flex;flex-direction:column;gap:2px;
}
.cd-num{font-family:var(--caps);font-size:22px;color:var(--blue-800)}
.cd-lbl{font-size:12px;letter-spacing:.14em;color:var(--blue-500);text-transform:uppercase}
.cd-sep{font-size:22px;color:var(--blue-500);margin-top:-14px}

/* panggung animasi (amplop + scene) */
.stage{
  position:relative;aspect-ratio:488/848;overflow:hidden;border-radius:12px;
  border:3px solid rgba(74,111,196,.65);
  outline:1px solid rgba(74,111,196,.35);outline-offset:5px;
  box-shadow:0 10px 26px rgba(29,49,96,.25);
  background:#fbfcff;
}
.stage-video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
#vScene{opacity:0;transition:opacity .25s ease}
#vScene.on{opacity:1}
.stage .video-toggle{
  position:absolute;z-index:8;top:1%;right:1%;width:11%;height:auto;aspect-ratio:1;
  border-radius:50%;padding:0;
  border:1px solid rgba(255,255,255,.7);background:rgba(29,49,96,.55);color:#fff;
  display:flex;align-items:center;justify-content:center;
}

/* galeri */
.gallery{position:relative;overflow:hidden;border-radius:8px;border:1px solid rgba(74,111,196,.5);
  outline:1px solid rgba(74,111,196,.3);outline-offset:5px;background:rgba(255,255,255,.7)}
.gallery-track{display:flex;transition:transform .5s ease}
.gallery-track figure{min-width:100%}
.gallery-track img{width:100%;aspect-ratio:4/5;object-fit:cover}
.gal-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:34px;height:34px;border-radius:50%;border:none;
  background:rgba(29,49,96,.5);color:#fff;font-size:14px;
}
.gal-nav.prev{left:8px}
.gal-nav.next{right:8px}
.gal-dots{display:flex;gap:6px;justify-content:center;padding:10px 0}
.gal-dots i{
  width:8px;height:8px;border-radius:50%;background:var(--blue-200);cursor:pointer;
  transition:background .2s ease;
}
.gal-dots i.on{background:var(--blue-700)}

/* love story */
.timeline{
  position:relative;margin-top:18px;padding-left:26px;text-align:left;
}
.timeline::before{
  content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;
  background:linear-gradient(180deg,var(--blue-300),var(--blue-600),var(--blue-300));
}
.story{position:relative;margin-bottom:30px}
.story::before{
  content:"♥";position:absolute;left:-26px;top:6px;
  width:20px;height:20px;border-radius:50%;background:#fff;border:1px solid var(--blue-500);
  color:var(--blue-600);font-size:11px;display:flex;align-items:center;justify-content:center;
}
.story-photo{overflow:hidden;border:2px solid #fff;box-shadow:0 6px 16px rgba(29,49,96,.2)}
.story-photo img{width:100%;aspect-ratio:3/4;object-fit:cover}
.story-title{font-family:var(--serif);font-weight:700;font-size:22px;color:var(--blue-800);margin-top:14px}

/* wedding gift / gift confirm */
.orn-gunungan{height:120px;display:flex;justify-content:center;opacity:.9}
.orn-gunungan svg{height:120px}
.bank-card{
  margin-top:18px;padding:18px 14px;border-radius:8px;
  border:1px dashed var(--blue-500);background:rgba(255,255,255,.8);
}
.bank-name{font-family:var(--caps);letter-spacing:.14em;color:var(--blue-700);font-size:14px}
.bank-no{font-family:var(--caps);font-size:24px;letter-spacing:.08em;color:var(--blue-900);margin-top:6px}
.bank-owner{font-style:italic;margin-top:4px}

/* rsvp */
.rsvp .field{display:block;text-align:left;margin-top:16px}
.field-lbl{display:block;font-size:15.5px;letter-spacing:.03em;margin-bottom:6px}
.field-lbl em{color:#c0392b;font-style:normal}
.field-lbl small{color:var(--blue-300);font-size:12px}
.rsvp input,.rsvp select,.rsvp textarea{
  width:100%;padding:11px 14px;border-radius:8px;
  border:1px solid rgba(74,111,196,.5);background:rgba(255,255,255,.9);
  font-family:var(--serif);font-size:16px;color:var(--ink);
}
.rsvp textarea{resize:vertical}
.rsvp .btn-primary{width:60%;margin-top:22px}
.wishes{margin-top:22px;text-align:left}
.wish{
  background:rgba(255,255,255,.85);border:1px solid rgba(74,111,196,.35);
  border-radius:8px;padding:12px 14px;margin-bottom:10px;
}
.wish-head{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.wish-name{font-weight:700;color:var(--blue-800)}
.wish-status{font-size:12px;letter-spacing:.06em;color:var(--blue-500)}
.wish-msg{font-size:15px;margin-top:4px;line-height:1.6}

/* penutup */
.closing{padding-top:10px}
.footer{
  margin-top:34px;background:rgba(255,255,255,.85);
  border:1px solid rgba(74,111,196,.4);border-radius:8px;padding:20px 16px;
}
.footer-logo{
  font-family:var(--caps);letter-spacing:.18em;font-size:18px;color:var(--blue-800);line-height:1.3;
}
.footer-logo small{font-size:10px;letter-spacing:.3em;color:var(--blue-500)}
.footer-txt{font-size:14px;margin-top:10px;line-height:1.6}
.socials{display:flex;gap:12px;justify-content:center;margin-top:14px}
.socials a{
  width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,var(--blue-600),var(--blue-800));color:#fff;
  box-shadow:0 3px 8px rgba(29,49,96,.3);
}

/* musik & toast */
.music-btn{
  position:fixed;right:16px;bottom:calc(16vh + 10px);z-index:30;
  width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.6);
  background:linear-gradient(180deg,var(--blue-600),var(--blue-800));color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(29,49,96,.35);
}
.music-btn.playing svg{animation:spin 3.5s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);
  background:var(--blue-900);color:#fff;padding:10px 18px;border-radius:999px;
  font-size:15px;opacity:0;pointer-events:none;transition:opacity .3s ease,transform .3s ease;
  z-index:60;max-width:86vw;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* animasi masuk */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s ease}
.reveal.on{opacity:1;transform:none}

@media (max-width:520px){
  .column{width:92vw;padding-top:78px}
  .script-name{font-size:30px}
  .script-name.big{font-size:34px}
  .brandbar{width:82%}
}