/* ============================================================
   UNDANGAN DIGITAL - PINK GOLD LUXURY
   Angreyani Pricilia Kurniawan - 25 Years of Grace
   ============================================================ */

/* ---------- 1. TOKEN DESAIN ---------- */
:root{
  /* Palet */
  --blush        : #FBF1EE;
  --blush-2      : #F6E4DF;
  --rose         : #E8B4B8;
  --rose-deep    : #D79AA1;
  --dusty        : #B5737C;
  --wine         : #7C4A52;
  --ivory        : #FFFCF8;
  --cream        : #FAF3EB;
  --white        : #FFFFFF;

  /* Emas */
  --gold         : #BF9C5F;
  --gold-lt      : #E7D0A3;
  --gold-pale    : #F3E5CB;
  --gold-dk      : #9A7739;
  --gold-grad    : linear-gradient(100deg,#9A6F35 0%,#C79B54 16%,#F1DDAE 32%,#B98F4C 48%,#F7E9C6 64%,#C49A55 80%,#8E6430 100%);

  /* Teks */
  --ink          : #4A3236;
  --ink-soft     : #7A5B60;
  --ink-mute     : #A08589;

  /* Bentuk */
  --r-sm         : 10px;
  --r-md         : 18px;
  --r-lg         : 28px;
  --r-pill       : 999px;

  /* Bayangan */
  --sh-soft      : 0 18px 50px -24px rgba(124,74,82,.32);
  --sh-card      : 0 30px 70px -34px rgba(124,74,82,.40), 0 2px 10px rgba(191,156,95,.10);
  --sh-lift      : 0 26px 60px -26px rgba(124,74,82,.45);

  /* Tipografi */
  --f-display    : "Cormorant Garamond", "Times New Roman", serif;
  --f-caps       : "Cinzel", "Cormorant Garamond", serif;
  --f-sans       : "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;

  --ease         : cubic-bezier(.22,.61,.36,1);
  --ease-soft    : cubic-bezier(.16,.84,.44,1);
}

/* ---------- 2. RESET ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  font-family:var(--f-sans);
  font-weight:300;
  color:var(--ink);
  background:var(--ivory);
  line-height:1.75;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body.is-locked{ overflow:hidden; height:100vh; }
img{ max-width:100%; display:block; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:0; cursor:pointer; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4,p,figure,blockquote,ul,fieldset{ margin:0; padding:0; }
ul{ list-style:none; }
fieldset{ border:0; }
legend{ padding:0; }
.sprite{ position:absolute; width:0; height:0; overflow:hidden; }
.hidden{ display:none !important; }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:4px; }

.ico{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.4;
      stroke-linecap:round; stroke-linejoin:round; flex:none; }
.ico--xs{ width:13px; height:13px; }

/* ---------- 3. LATAR & ATMOSFER ---------- */
body::before{
  content:""; position:fixed; inset:0; z-index:-3; pointer-events:none;
  background:
    radial-gradient(1000px 620px at 12% -8%,  rgba(232,180,184,.42), transparent 62%),
    radial-gradient(880px 560px at 100% 12%,  rgba(243,229,203,.55), transparent 60%),
    radial-gradient(900px 700px at 50% 108%,  rgba(232,180,184,.34), transparent 62%),
    linear-gradient(180deg,#FFFCF8 0%,#FDF5F1 42%,#FBF1EE 100%);
}
.fx{ position:fixed; inset:0; width:100%; height:100%; z-index:-1; pointer-events:none; }

/* ---------- 4. TIPOGRAFI ---------- */
.gold-text{
  background:var(--gold-grad);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; -webkit-text-fill-color:transparent;
}
@supports not (background-clip:text){
  .gold-text{ color:var(--gold-dk); -webkit-text-fill-color:currentColor; }
}

.eyebrow{
  font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.62rem,2.5vw,.74rem);
  letter-spacing:.42em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:1.1rem; padding-left:.42em;
}
.h-serif{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(2rem,7.6vw,3rem); line-height:1.15;
  color:var(--wine); letter-spacing:.005em;
}
.display{
  font-family:var(--f-display); font-weight:300;
  font-size:clamp(2.1rem,8.6vw,3.6rem); line-height:1.18;
  color:var(--wine); letter-spacing:.004em;
}
.display em{ font-style:italic; color:var(--dusty); }
.display sup{ font-size:.42em; letter-spacing:.02em; }
.script{
  font-family:var(--f-display); font-style:italic; font-weight:400;
  font-size:clamp(1.5rem,5.6vw,2.15rem); line-height:1.35;
  color:var(--dusty); letter-spacing:.01em;
}
.lede{
  font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.78rem,3.2vw,.95rem);
  letter-spacing:.3em; text-transform:uppercase; color:var(--wine);
  padding-left:.3em; margin-top:.7rem;
}
.body{
  font-size:clamp(.88rem,3.5vw,.98rem); font-weight:300;
  color:var(--ink-soft); max-width:38ch; margin-inline:auto; line-height:1.95;
}
.body--soft{ color:var(--ink-mute); font-size:.86rem; margin-top:.9rem; }

/* ---------- 5. TATA LETAK ---------- */
/* Isi undangan naik perlahan saat tombol BUKA UNDANGAN ditekan */
.main{
  position:relative; z-index:1;
  opacity:0; transform:translateY(26px);
  transition:opacity 1.2s var(--ease-soft), transform 1.2s var(--ease-soft);
}
body.is-open .main{ opacity:1; transform:none; }
.section{ position:relative; padding:clamp(4.6rem,15vw,7.5rem) 0; overflow:hidden; }
.section--blush{
  background:linear-gradient(180deg,
    rgba(246,228,223,0) 0%, rgba(246,228,223,.75) 16%,
    rgba(246,228,223,.75) 84%, rgba(246,228,223,0) 100%);
}
.wrap{ width:min(100% - 2.6rem, 1080px); margin-inline:auto; }
.wrap--narrow{ width:min(100% - 2.6rem, 620px); }
.center{ text-align:center; }
.section > .wrap{ position:relative; z-index:1; }

.orn{ display:block; width:min(240px,62%); height:22px; margin:1.4rem auto 1.8rem;
      color:var(--gold); opacity:.85; }
.orn--sm{ width:170px; height:18px; }

.hairline{
  height:1px; width:82%; margin:1.6rem auto;
  background:linear-gradient(90deg,transparent,var(--gold-lt) 22%,var(--gold) 50%,var(--gold-lt) 78%,transparent);
  opacity:.75;
}
.bg-sprig{
  position:absolute; width:clamp(150px,34vw,260px); aspect-ratio:120/160;
  color:var(--rose-deep); opacity:.15; pointer-events:none; z-index:0;
}
.bg-sprig--tr{ top:-2rem; right:-3.2rem; transform:rotate(24deg) translateY(var(--py,0px)); }
.bg-sprig--bl{ bottom:-2.5rem; left:-3.6rem; transform:rotate(-152deg) translateY(var(--py,0px)); }

/* ---------- 6. TOMBOL ---------- */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 2.1rem; border-radius:var(--r-pill);
  font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.68rem,2.7vw,.78rem); letter-spacing:.22em; text-transform:uppercase;
  color:#5E3B22; cursor:pointer; isolation:isolate; min-height:48px;
  transition:transform .45s var(--ease), box-shadow .45s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.btn span{ padding-left:.2em; }
.btn .ico{ width:17px; height:17px; }
.btn--gold{
  background:var(--gold-grad); background-size:220% 100%; background-position:0% 50%;
  box-shadow:0 14px 34px -14px rgba(154,111,53,.72), inset 0 1px 0 rgba(255,255,255,.5);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease), background-position 1.1s var(--ease);
}
.btn--gold::after{
  content:""; position:absolute; inset:2px; border-radius:inherit; z-index:-1;
  border:1px solid rgba(255,255,255,.34);
}
.btn--gold:hover{
  background-position:100% 50%; transform:translateY(-2px);
  box-shadow:0 20px 42px -16px rgba(154,111,53,.8), inset 0 1px 0 rgba(255,255,255,.6);
}
.btn--gold:active{ transform:translateY(0) scale(.985); }
.btn--ghost{
  color:var(--gold-dk); border:1px solid var(--gold-lt); background:rgba(255,255,255,.65);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
}
.btn--ghost:hover{ background:var(--white); border-color:var(--gold); }
.btn--block{ display:flex; width:100%; margin-top:.4rem; }
.btn.is-busy{ opacity:.6; pointer-events:none; }

/* ---------- 7. HALAMAN PEMBUKA ---------- */
.cover{
  position:fixed; inset:0; z-index:90;
  display:grid; place-items:center; padding:2.2rem 1.4rem;
  text-align:center; overflow:hidden;
  background:
    radial-gradient(760px 520px at 50% 22%, rgba(255,252,248,.96), rgba(251,241,238,.92) 55%, rgba(246,228,223,.98) 100%),
    linear-gradient(180deg,#FDF6F3,#F6E4DF);
  transition:opacity 1s var(--ease), transform 1s var(--ease), visibility 0s linear 1s;
}
.cover__veil{
  position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(420px 320px at 50% 34%, rgba(255,255,255,.7), transparent 70%);
}
.cover.is-open{ opacity:0; visibility:hidden; transform:scale(1.06); }
.cover__inner{ position:relative; width:min(100%,430px); }

.cover__corner{
  position:absolute; width:clamp(84px,21vw,126px); height:clamp(84px,21vw,126px);
  color:var(--gold); opacity:.55; fill:none; pointer-events:none;
}
.cover__corner--tl{ top:1.4rem; left:1.4rem; }
.cover__corner--br{ bottom:1.4rem; right:1.4rem; transform:rotate(180deg); }

.cover__sprig{
  position:absolute; width:clamp(128px,31vw,210px); aspect-ratio:120/160;
  color:var(--rose-deep); opacity:.26; pointer-events:none;
}
.cover__sprig--l{ left:-2.8rem; bottom:-1.6rem; transform:rotate(-14deg); animation:sway-l 10s ease-in-out infinite; }
.cover__sprig--r{ right:-2.8rem; top:-1.2rem; transform:rotate(166deg); animation:sway-r 11s ease-in-out infinite -4s; }
@keyframes sway-l{ 0%,100%{ transform:rotate(-14deg) translateY(0); } 50%{ transform:rotate(-11deg) translateY(-12px); } }
@keyframes sway-r{ 0%,100%{ transform:rotate(166deg) translateY(0); } 50%{ transform:rotate(169deg) translateY(-10px); } }

.cover__eyebrow{
  font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.7rem,3.2vw,.86rem); letter-spacing:.5em; text-transform:uppercase;
  color:var(--gold-dk); padding-left:.5em;
}
.cover__age{ position:relative; margin:.5rem auto -.2rem; width:fit-content; }
.cover__age .gold-text{
  display:block; font-family:var(--f-display); font-weight:300;
  font-size:clamp(6.2rem,31vw,10.5rem); line-height:1; letter-spacing:-.02em;
  filter:drop-shadow(0 12px 26px rgba(154,111,53,.26));
}
.cover__age-ring{
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:clamp(188px,56vw,258px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--gold-lt); opacity:.6;
}
.cover__age-ring::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid var(--rose); opacity:.42;
}
.cover__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.8rem,7.4vw,2.5rem); line-height:1.2;
  color:var(--wine); letter-spacing:.01em; margin-top:.35rem;
}
.cover__name span{ font-style:italic; font-weight:300; color:var(--dusty); font-size:.84em; }
.cover__date{
  margin-top:1rem; font-weight:400;
  font-size:clamp(.66rem,2.8vw,.76rem); letter-spacing:.3em; text-transform:uppercase;
  color:var(--ink-soft); padding-left:.3em;
}
.cover__to{ margin:1.9rem auto 1.3rem; display:grid; gap:.3rem; }
.cover__to-label{ font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; color:var(--ink-mute); }
.cover__to-name{
  font-family:var(--f-display); font-size:clamp(1.15rem,5vw,1.5rem); font-weight:500; color:var(--wine);
}
.cover__hint{ margin-top:1.35rem; font-size:.6rem; color:var(--ink-mute); letter-spacing:.06em; }

/* Animasi masuk halaman pembuka */
.anim{ opacity:0; transform:translateY(18px); animation:rise .95s var(--ease-soft) forwards; animation-delay:var(--d,0s); }
@keyframes rise{ to{ opacity:1; transform:none; } }

/* ---------- 8. HERO ---------- */
.hero{ padding-top:clamp(5rem,17vw,8rem); text-align:center; }
.hero__glow{
  position:absolute; top:-12%; left:50%; translate:-50% 0;
  width:min(760px,120%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(243,229,203,.7), rgba(232,180,184,.25) 55%, transparent 72%);
  transform:translateY(var(--py,0px));
}
.frame{ position:relative; margin:2.6rem auto 2.2rem; width:min(100%,380px); }
.frame__gold{
  position:absolute; inset:-13px; border:1px solid var(--gold-lt); border-radius:calc(var(--r-lg) + 8px);
  pointer-events:none;
}
.frame__gold::after{
  content:""; position:absolute; inset:6px; border:1px solid var(--rose); opacity:.35;
  border-radius:calc(var(--r-lg) + 2px);
}
.photo{
  position:relative; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--blush-2),var(--gold-pale));
  box-shadow:var(--sh-card);
}
.photo--portrait{ aspect-ratio:4/5; }
.photo img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.06); transition:transform 1.4s var(--ease);
}
.photo::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,252,248,.14), transparent 34%, rgba(124,74,82,.14));
  mix-blend-mode:soft-light;
}
.reveal.is-in .photo img{ transform:scale(1); }
.photo__ph{ display:none; }
.photo.is-empty .photo__ph{
  display:grid; place-content:center; gap:.4rem; position:absolute; inset:0; text-align:center;
}
.photo.is-empty .photo__ph span{
  font-family:var(--f-display); font-size:4rem; line-height:1; color:var(--gold-dk); opacity:.5;
}
.photo.is-empty .photo__ph small{
  font-size:.6rem; letter-spacing:.28em; text-transform:uppercase; color:var(--dusty); opacity:.75;
}
.scrollcue{
  display:inline-grid; place-items:center; width:44px; height:44px; margin-top:2.4rem;
  border:1px solid var(--gold-lt); border-radius:50%; color:var(--gold-dk);
  animation:bob 2.4s ease-in-out infinite;
}
@keyframes bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(6px); } }

/* ---------- 9. UCAPAN SYUKUR ---------- */
.quotemark{ display:block; width:34px; height:34px; margin:0 auto .6rem;
            fill:var(--rose); stroke:none; opacity:.75; }
.quote{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.22rem,5vw,1.65rem); line-height:1.6;
  color:var(--wine); max-width:24ch; margin:0 auto 2rem;
}
.verse{
  position:relative; margin:0 auto 2.2rem; max-width:34ch; padding:1.4rem 1.2rem;
  border-top:1px solid var(--gold-lt); border-bottom:1px solid var(--gold-lt);
}
.verse p{ font-family:var(--f-display); font-size:1.02rem; line-height:1.7; color:var(--ink-soft); }
.verse cite{
  display:block; margin-top:.7rem; font-style:normal; font-family:var(--f-caps);
  font-size:.62rem; letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dk);
}

/* ---------- 10. KARTU DETAIL ACARA ---------- */
.card{
  position:relative; margin:2.4rem auto 0; padding:clamp(2.2rem,7vw,3rem) clamp(1.4rem,5vw,2.4rem);
  background:linear-gradient(165deg, var(--ivory) 0%, var(--cream) 58%, #F8EEE4 100%);
  border:1px solid var(--gold-lt); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); overflow:hidden;
}
.card::before{
  content:""; position:absolute; inset:6px; border-radius:calc(var(--r-lg) - 5px);
  border:1px solid rgba(232,180,184,.5); pointer-events:none;
}
.card__corner{
  position:absolute; width:72px; height:72px; color:var(--gold); opacity:.4; pointer-events:none;
}
.card__corner--tl{ top:12px; left:12px; }
.card__corner--br{ bottom:12px; right:12px; transform:rotate(180deg); }
.card__kicker{
  font-family:var(--f-caps); font-size:clamp(.6rem,2.5vw,.7rem);
  letter-spacing:.32em; text-transform:uppercase; color:var(--gold-dk); padding-left:.32em;
}
.card__name{
  font-family:var(--f-display); font-weight:500; margin-top:.7rem;
  font-size:clamp(1.5rem,6.2vw,2.05rem); line-height:1.22; color:var(--wine);
}
.card__age{
  margin-top:.5rem; font-family:var(--f-caps); font-size:.8rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--dusty);
}
.card__age .gold-text{ font-family:var(--f-display); font-size:1.7rem; vertical-align:-.12em; letter-spacing:0; }

.info{ display:grid; gap:1.35rem; text-align:left; max-width:340px; margin:0 auto; }
.info__row{ display:flex; gap:1rem; align-items:flex-start; }
.info__ico{
  display:grid; place-items:center; width:42px; height:42px; flex:none;
  border:1px solid var(--gold-lt); border-radius:50%; color:var(--gold-dk);
  background:rgba(255,255,255,.7);
}
.info__txt{ font-size:.93rem; color:var(--ink); line-height:1.6; font-weight:400; }
.info__txt b{
  display:block; font-family:var(--f-caps); font-weight:500;
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--gold-dk); margin-bottom:.22rem;
}
.info__txt i{ font-style:italic; color:var(--ink-soft); }

/* ---------- 11. COUNTDOWN ---------- */
.countdown{
  display:flex; align-items:flex-start; justify-content:center;
  gap:clamp(.2rem,1.6vw,.7rem); margin-top:2.6rem;
}
.cd__box{
  display:grid; gap:.15rem; place-items:center;
  min-width:clamp(62px,19vw,84px); padding:.85rem .4rem .7rem;
  background:linear-gradient(170deg,var(--ivory),var(--cream));
  border:1px solid var(--gold-lt); border-radius:var(--r-md);
  box-shadow:0 14px 34px -22px rgba(124,74,82,.5);
}
.cd__num{
  font-family:var(--f-display); font-weight:400; line-height:1;
  font-size:clamp(1.7rem,7vw,2.3rem); color:var(--wine);
  font-variant-numeric:tabular-nums;
}
.cd__lbl{
  font-family:var(--f-caps); font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-dk);
}
.cd__sep{
  font-family:var(--f-display); font-size:1.5rem; color:var(--gold);
  line-height:1; padding-top:.85rem; opacity:.6;
}
.cd__note{
  margin-top:1.4rem; font-size:.66rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--ink-mute);
}

/* ---------- 12. LOKASI ---------- */
.address{
  font-family:var(--f-display); font-size:clamp(1.1rem,4.6vw,1.35rem);
  line-height:1.6; color:var(--wine); max-width:26ch; margin:0 auto 2rem;
}
.address span{ font-style:italic; color:var(--dusty); font-size:.9em; }
.mapframe{ position:relative; margin:0 auto 2rem; width:min(100%,520px); }
.mapframe__inner{
  position:relative; aspect-ratio:4/3; overflow:hidden; border-radius:var(--r-lg);
  background:linear-gradient(150deg,var(--blush-2),var(--gold-pale));
  box-shadow:var(--sh-card);
}
.mapframe__inner iframe{ width:100%; height:100%; border:0; display:block; filter:saturate(.86) contrast(.96); }
.mapframe__ph{
  position:absolute; inset:0; display:grid; place-content:center; gap:.5rem;
  justify-items:center; color:var(--dusty); opacity:.7;
}
.mapframe__ph .ico{ width:34px; height:34px; }
.mapframe__ph p{ font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; }

/* ---------- 13. FORM ---------- */
.panel{
  margin:2.2rem auto 0; padding:clamp(1.6rem,6vw,2.3rem);
  background:linear-gradient(165deg, rgba(255,252,248,.96), rgba(250,243,235,.96));
  border:1px solid var(--gold-lt); border-radius:var(--r-lg);
  box-shadow:var(--sh-card); text-align:left;
}
.form{ display:grid; gap:1.15rem; }
.field{ display:grid; gap:.45rem; }
.field__lbl{
  font-family:var(--f-caps); font-size:.58rem; font-weight:500;
  letter-spacing:.26em; text-transform:uppercase; color:var(--gold-dk);
}
.field__lbl i{ font-style:italic; text-transform:none; letter-spacing:.06em; color:var(--ink-mute); }
.field input[type=text], .field textarea, .field select{
  width:100%; padding:.85rem 1rem; font-size:.92rem; font-weight:300; color:var(--ink);
  background:var(--white); border:1px solid #EADFD3; border-radius:var(--r-sm);
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
  -webkit-appearance:none; appearance:none;
}
.field textarea{ resize:vertical; min-height:88px; line-height:1.7; font-family:var(--f-sans); }
.field input::placeholder, .field textarea::placeholder{ color:#C9B4B6; font-weight:300; }
.field input:focus, .field textarea:focus, .field select:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(191,156,95,.16);
}
.field input.is-error, .field textarea.is-error{ border-color:var(--rose-deep); box-shadow:0 0 0 3px rgba(215,154,161,.18); }
.select{ position:relative; }
.select .ico{ position:absolute; right:.9rem; top:50%; translate:0 -50%; pointer-events:none; color:var(--gold-dk); width:16px; height:16px; }

.choices{ display:flex; flex-wrap:wrap; gap:.5rem; }
.choice{ position:relative; flex:1 1 auto; }
.choice input{ position:absolute; opacity:0; width:0; height:0; }
.choice span{
  display:block; text-align:center; padding:.72rem .6rem; cursor:pointer;
  font-family:var(--f-caps); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); background:var(--white); border:1px solid #EADFD3; border-radius:var(--r-pill);
  transition:all .3s var(--ease); white-space:nowrap;
}
.choice input:checked + span{
  color:#5E3B22; border-color:transparent; background:var(--gold-grad);
  box-shadow:0 10px 24px -12px rgba(154,111,53,.7);
}
.choice input:focus-visible + span{ outline:2px solid var(--gold); outline-offset:2px; }
.form__note{ font-size:.64rem; text-align:center; color:var(--ink-mute); letter-spacing:.08em; margin-top:.2rem; }
.hp{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
     overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* ---------- 14. DINDING UCAPAN ---------- */
.wishes__count{
  margin:2.4rem 0 1.2rem; font-family:var(--f-caps); font-size:.6rem;
  letter-spacing:.3em; text-transform:uppercase; color:var(--gold-dk);
}
.wishes{ display:grid; gap:.9rem; text-align:left; max-width:520px; margin:0 auto 1.4rem; }
.wish{
  position:relative; padding:1.1rem 1.25rem 1.15rem;
  background:rgba(255,252,248,.92); border:1px solid rgba(231,208,163,.75);
  border-radius:var(--r-md); box-shadow:0 14px 32px -26px rgba(124,74,82,.55);
  animation:wishIn .6s var(--ease-soft) both;
}
@keyframes wishIn{ from{ opacity:0; transform:translateY(12px); } }
.wish::before{
  content:""; position:absolute; left:0; top:14%; bottom:14%; width:2px; border-radius:2px;
  background:var(--gold-grad);
}
.wish__head{ display:flex; align-items:baseline; justify-content:space-between; gap:.8rem; margin-bottom:.35rem; }
.wish__name{ font-family:var(--f-display); font-size:1.08rem; font-weight:500; color:var(--wine); }
.wish__time{ font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-mute); flex:none; }
.wish__msg{ font-size:.88rem; line-height:1.8; color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; }
.wishes__empty{
  text-align:center; font-family:var(--f-display); font-style:italic;
  font-size:1.05rem; color:var(--ink-mute); padding:1.6rem 0;
}

/* ---------- 15. GALERI ---------- */
.gallery{
  margin-top:2.4rem;
  column-count:2; column-gap:.7rem;
}
.g-item{
  position:relative; break-inside:avoid; margin-bottom:.7rem; overflow:hidden;
  aspect-ratio:var(--ar, 4/5);
  border-radius:var(--r-md); cursor:pointer; background:linear-gradient(150deg,var(--blush-2),var(--gold-pale));
  box-shadow:0 16px 36px -28px rgba(124,74,82,.6);
  opacity:0; transform:translateY(18px) scale(.98);
  transition:opacity .8s var(--ease-soft), transform .8s var(--ease-soft), box-shadow .5s var(--ease);
}
.g-item.is-in{ opacity:1; transform:none; }
.g-item img{
  width:100%; height:100%; display:block; object-fit:cover;
  transition:transform 1.1s var(--ease), filter .6s var(--ease);
}
.g-item::after{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  border:1px solid rgba(231,208,163,.85);
  box-shadow:inset 0 0 0 4px rgba(255,252,248,.4);
  opacity:0; transition:opacity .5s var(--ease);
}
.g-item:hover img{ transform:scale(1.07); filter:saturate(1.05); }
.g-item:hover::after{ opacity:1; }
.g-item:hover{ box-shadow:var(--sh-lift); }
.g-item.is-empty{ cursor:default; }
.g-item.is-empty:hover{ box-shadow:0 16px 36px -28px rgba(124,74,82,.6); }
.g-ph{ display:none; }
.g-item.is-empty .g-ph{
  display:grid; place-content:center; gap:.3rem; position:absolute; inset:0; text-align:center;
}
.g-item.is-empty .g-ph b{
  font-family:var(--f-display); font-weight:400; font-size:2rem; color:var(--gold-dk); opacity:.45;
}
.g-item.is-empty .g-ph small{
  font-size:.52rem; letter-spacing:.24em; text-transform:uppercase; color:var(--dusty); opacity:.75;
}
@media (min-width:600px){ .gallery{ column-count:3; column-gap:.9rem; } .g-item{ margin-bottom:.9rem; } }
@media (min-width:980px){ .gallery{ column-count:4; } }

/* ---------- 16. LIGHTBOX ---------- */
.lightbox{
  position:fixed; inset:0; z-index:120; display:grid; place-items:center;
  padding:clamp(1rem,5vw,3rem);
  background:rgba(58,32,36,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  opacity:0; transition:opacity .45s var(--ease);
}
.lightbox[hidden]{ display:none; }
.lightbox.is-open{ opacity:1; }
.lb__stage{ max-width:min(100%,860px); max-height:82vh; display:grid; place-items:center; }
.lb__stage img{
  max-width:100%; max-height:82vh; width:auto; border-radius:var(--r-md);
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(231,208,163,.5);
  animation:lbIn .5s var(--ease-soft);
}
@keyframes lbIn{ from{ opacity:0; transform:scale(.95); } }
.lb__close, .lb__nav{
  position:absolute; display:grid; place-items:center; width:46px; height:46px;
  color:var(--gold-pale); border:1px solid rgba(231,208,163,.4); border-radius:50%;
  background:rgba(255,255,255,.06); transition:all .3s var(--ease);
}
.lb__close:hover, .lb__nav:hover{ background:rgba(255,255,255,.16); border-color:var(--gold-lt); }
.lb__close{ top:max(1rem,env(safe-area-inset-top)); right:1rem; }
.lb__nav--prev{ left:.8rem; top:50%; translate:0 -50%; }
.lb__nav--next{ right:.8rem; top:50%; translate:0 -50%; }
.lb__count{
  position:absolute; bottom:max(1.4rem,env(safe-area-inset-bottom));
  left:50%; translate:-50% 0; font-family:var(--f-caps);
  font-size:.62rem; letter-spacing:.28em; color:var(--gold-pale); opacity:.8;
}

/* ---------- 17. PENUTUP & FOOTER ---------- */
.section--closing{
  text-align:center; padding-block:clamp(5rem,17vw,8rem);
  background:linear-gradient(180deg, rgba(246,228,223,0), rgba(246,228,223,.6) 45%, rgba(243,229,203,.5));
}
.section--closing .cover__corner{ opacity:.35; }
.closing__glow{
  position:absolute; left:50%; top:40%; translate:-50% -50%;
  width:min(620px,110%); aspect-ratio:1; pointer-events:none;
  background:radial-gradient(closest-side, rgba(255,255,255,.75), transparent 70%);
}
.closing__name{
  font-family:var(--f-display); font-weight:500; font-size:clamp(1.5rem,6.4vw,2.1rem);
  color:var(--wine); line-height:1.3;
}
.closing__sub{
  font-family:var(--f-display); font-style:italic; font-size:1.15rem; color:var(--dusty); margin-top:.2rem;
}
.footer{
  position:relative; text-align:center;
  padding:clamp(3rem,10vw,4rem) 1.4rem calc(clamp(3rem,10vw,4rem) + 78px);
  background:linear-gradient(180deg, rgba(243,229,203,.5), rgba(246,228,223,.9));
  border-top:1px solid rgba(231,208,163,.7);
}
.footer .orn{ margin-bottom:1.4rem; }
.footer__name{
  font-family:var(--f-caps); font-size:clamp(.72rem,3vw,.86rem); font-weight:500;
  letter-spacing:.3em; text-transform:uppercase; color:var(--wine); padding-left:.3em;
}
.footer__tag{
  font-family:var(--f-display); font-style:italic; font-size:clamp(1.2rem,5vw,1.5rem); margin-top:.5rem;
}
.footer__date{
  margin-top:.7rem; font-size:.7rem; letter-spacing:.42em; color:var(--gold-dk); padding-left:.42em;
}
.footer__credit{
  margin-top:1.6rem; font-size:.58rem; letter-spacing:.1em; color:var(--ink-mute);
  display:inline-flex; align-items:center; gap:.35rem;
}
.footer__credit .ico{ color:var(--rose-deep); fill:var(--rose); }

/* ---------- 18. NAVIGASI MENGAMBANG ---------- */
.dock{
  position:fixed; z-index:80; left:50%; translate:-50% 0;
  bottom:calc(.7rem + env(safe-area-inset-bottom,0px));
  display:flex; gap:.1rem; padding:.4rem;
  background:rgba(255,252,248,.82); -webkit-backdrop-filter:blur(18px) saturate(1.3);
  backdrop-filter:blur(18px) saturate(1.3);
  border:1px solid rgba(231,208,163,.9); border-radius:var(--r-pill);
  box-shadow:0 18px 40px -18px rgba(124,74,82,.5), inset 0 1px 0 rgba(255,255,255,.7);
  opacity:0; transform:translateY(24px); pointer-events:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease);
  max-width:calc(100vw - 1.6rem);
}
.dock.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.dock__item{
  position:relative; display:grid; place-items:center; gap:.15rem;
  min-width:56px; padding:.5rem .5rem .45rem; border-radius:var(--r-pill);
  color:var(--ink-mute); transition:color .35s var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.dock__item span{
  font-family:var(--f-caps); font-size:.5rem; letter-spacing:.14em; text-transform:uppercase;
}
.dock__item .ico{ width:18px; height:18px; }
.dock__item.is-active{ color:#5E3B22; }
.dock__item.is-active::before{
  content:""; position:absolute; inset:0; border-radius:inherit; z-index:-1;
  background:linear-gradient(150deg, rgba(243,229,203,.95), rgba(232,180,184,.55));
  box-shadow:inset 0 0 0 1px rgba(191,156,95,.5);
}
@media (min-width:560px){
  .dock__item{ min-width:74px; }
  .dock__item span{ font-size:.55rem; }
}

/* ---------- 19. TOMBOL MUSIK ---------- */
.musicbtn{
  position:fixed; z-index:82; right:1rem;
  bottom:calc(5.6rem + env(safe-area-inset-bottom,0px));
  display:grid; place-items:center; width:48px; height:48px; border-radius:50%;
  color:var(--gold-dk);
  background:rgba(255,252,248,.86); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(231,208,163,.95);
  box-shadow:0 14px 30px -16px rgba(124,74,82,.55);
  opacity:0; transform:scale(.8); pointer-events:none;
  transition:opacity .6s var(--ease), transform .6s var(--ease), color .3s var(--ease);
}
.musicbtn.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.musicbtn .ico{ grid-area:1/1; width:19px; height:19px; }
.musicbtn .ico--pause{ opacity:0; }
.musicbtn.is-playing .ico--play{ opacity:0; }
.musicbtn.is-playing .ico--pause{ opacity:1; }
.musicbtn__ring{
  position:absolute; inset:-4px; border-radius:50%; border:1px solid var(--gold-lt);
  opacity:0;
}
.musicbtn.is-playing .musicbtn__ring{ opacity:1; animation:pulse 2.6s var(--ease) infinite; }
@keyframes pulse{ 0%{ transform:scale(.92); opacity:.8; } 70%{ transform:scale(1.18); opacity:0; } 100%{ opacity:0; } }
.musicbtn.is-playing{ color:var(--dusty); }

/* ---------- 20. TOAST ---------- */
.toast{
  position:fixed; z-index:140; left:50%; translate:-50% 0;
  bottom:calc(6.4rem + env(safe-area-inset-bottom,0px));
  max-width:min(92vw,380px); padding:.85rem 1.3rem; text-align:center;
  font-size:.78rem; line-height:1.55; color:var(--wine);
  background:rgba(255,252,248,.97); border:1px solid var(--gold-lt); border-radius:var(--r-pill);
  box-shadow:0 20px 44px -20px rgba(124,74,82,.6);
  opacity:0; transform:translateY(14px); pointer-events:none;
  transition:opacity .4s var(--ease), transform .4s var(--ease);
}
.toast.is-shown{ opacity:1; transform:none; }

/* ---------- 21. REVEAL SAAT SCROLL ---------- */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .95s var(--ease-soft), transform .95s var(--ease-soft);
  transition-delay:calc(var(--rd,0) * 110ms);
}
.reveal.is-in{ opacity:1; transform:none; }

/* ---------- 22. LAYAR BESAR ---------- */
@media (min-width:820px){
  .frame{ width:min(100%,430px); }
  .info{ max-width:400px; }
  .cover__corner--tl{ top:2.4rem; left:2.4rem; }
  .cover__corner--br{ bottom:2.4rem; right:2.4rem; }
  .musicbtn{ right:1.8rem; bottom:calc(6rem + env(safe-area-inset-bottom,0px)); }
}
@media (min-width:1100px){
  .cover__sprig--l{ left:4vw; bottom:2vh; }
  .cover__sprig--r{ right:4vw; top:2vh; }
}

/* ---------- 23. AKSESIBILITAS GERAK ----------
   Mengikuti setelan "Kurangi Gerakan" di perangkat tamu.
   Kelas .gerak-penuh dipasang oleh index.html bila pemilik undangan
   memilih animasi tetap jalan (lihat animasi.hormatiSetelanHP
   di assets/js/config.js).                                        */
@media (prefers-reduced-motion:reduce){
  html:not(.gerak-penuh){ scroll-behavior:auto; }
  html:not(.gerak-penuh) *,
  html:not(.gerak-penuh) *::before,
  html:not(.gerak-penuh) *::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  html:not(.gerak-penuh) .anim,
  html:not(.gerak-penuh) .reveal,
  html:not(.gerak-penuh) .g-item,
  html:not(.gerak-penuh) .main{ opacity:1 !important; transform:none !important; }
}

/* ============================================================
   BAGIAN TAMBAHAN v3
   Komponen baru: animasi memuat, hero angka 25, kartu detail,
   hitung mundur kaca, tombol mengambang, penutup.
   ============================================================ */

/* ---------- 24. PENGAMAN TATA LETAK ---------- */
html, body{ overflow-x:hidden; max-width:100%; }
[hidden]{ display:none !important; }

/* ---------- 25. ANIMASI MEMUAT ---------- */
.loader{
  position:fixed; inset:0; z-index:200;
  display:grid; place-content:center; justify-items:center; gap:1.4rem;
  background:linear-gradient(165deg,var(--ivory) 0%,var(--blush) 55%,var(--blush-2) 100%);
  transition:opacity .8s var(--ease), visibility .8s var(--ease);
}
.loader.is-done{ opacity:0; visibility:hidden; }
.loader__mark{ position:relative; display:grid; place-items:center; width:96px; height:96px; }
.loader__ring{
  position:absolute; inset:0; border-radius:50%;
  border:1px solid var(--gold-pale); border-top-color:var(--gold);
  animation:ldspin 1.6s linear infinite;
}
.loader__ring::after{
  content:""; position:absolute; inset:9px; border-radius:50%;
  border:1px solid rgba(232,180,184,.55);
}
@keyframes ldspin{ to{ transform:rotate(360deg); } }
.loader__letter{
  font-family:var(--f-display); font-weight:400; font-size:2.5rem; line-height:1;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.loader__text{
  font-family:var(--f-caps); font-size:.56rem; letter-spacing:.36em;
  text-transform:uppercase; color:var(--gold-dk); padding-left:.36em;
  animation:ldfade 2.2s var(--ease-soft) infinite;
}
@keyframes ldfade{ 0%,100%{ opacity:.45; } 50%{ opacity:1; } }

/* ---------- 26. HALAMAN PEMBUKA (penyesuaian) ---------- */
.cover{
  display:flex; align-items:center; justify-content:center;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  padding:clamp(2rem,6vh,3.4rem) 1.3rem;
}
.cover__inner{ margin-block:auto; }
.cover__eyebrow span{
  display:block; margin-top:.5rem;
  font-size:.8em; letter-spacing:.36em; color:var(--dusty);
}
.cover__age{ margin:1.3rem auto .2rem; }
.cover__age .gold-text{ font-size:clamp(4.2rem,21vw,6.4rem); }
.cover__age-ring{ width:clamp(140px,40vw,196px); }
.cover__age-ring::after{ inset:8px; }
.cover__age-cap{
  display:block; margin-top:.45rem; font-family:var(--f-caps);
  font-size:.58rem; letter-spacing:.44em; text-transform:uppercase;
  color:var(--gold-dk); padding-left:.44em;
}
.cover__lead{
  margin:1.5rem auto 0; max-width:36ch;
  font-size:.78rem; font-weight:300; line-height:1.95; color:var(--ink-soft);
}
.cover__to{ margin:1.7rem auto 1.2rem; }
.cover__to-sub{
  margin-top:.25rem; font-size:.62rem; font-weight:300;
  letter-spacing:.04em; color:var(--ink-mute);
}

/* ---------- 27. HERO: ANGKA 25 ---------- */
.hero__age{ position:relative; width:fit-content; margin:1.4rem auto 1.5rem; }
.hero__age-num{
  display:block; font-family:var(--f-display); font-weight:300;
  font-size:clamp(6.4rem,32vw,10.5rem); line-height:.94; letter-spacing:-.03em;
  filter:drop-shadow(0 14px 32px rgba(154,111,53,.28));
}
.hero__age.is-in .hero__age-num{ animation:slowzoom 20s var(--ease-soft) forwards; }
@keyframes slowzoom{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
.hero__age-ring{
  position:absolute; left:50%; top:44%; translate:-50% -50%;
  width:clamp(196px,58vw,286px); aspect-ratio:1; border-radius:50%;
  border:1px solid var(--gold-lt); opacity:.55;
}
.hero__age-ring::after{
  content:""; position:absolute; inset:11px; border-radius:50%;
  border:1px solid var(--rose); opacity:.4;
}
.hero__age-cap{
  display:block; margin-top:.55rem; font-family:var(--f-caps);
  font-size:.6rem; letter-spacing:.46em; text-transform:uppercase;
  color:var(--gold-dk); padding-left:.46em;
}
.hero__name{
  font-family:var(--f-display); font-weight:400;
  font-size:clamp(1.95rem,8vw,2.9rem); line-height:1.16;
  color:var(--wine); letter-spacing:.01em;
}
.hero__name span{ font-style:italic; font-weight:300; color:var(--dusty); font-size:.84em; }
.hero__event{
  margin-top:.95rem; font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.58rem,2.7vw,.7rem); letter-spacing:.32em;
  text-transform:uppercase; color:var(--ink-soft); padding-left:.32em;
}
.hero__meta{
  margin-top:1.5rem; display:inline-flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:.8rem; padding:.7rem 1.4rem;
  border:1px solid var(--gold-lt); border-radius:var(--r-pill);
  background:rgba(255,252,248,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  box-shadow:0 12px 30px -22px rgba(124,74,82,.5);
}
.hero__meta-item{
  font-size:clamp(.64rem,2.7vw,.73rem); font-weight:400; letter-spacing:.18em;
  text-transform:uppercase; color:var(--wine);
}
.hero__meta-dot{ width:4px; height:4px; border-radius:50%; background:var(--gold); flex:none; }

/* ---------- 28. HITUNG MUNDUR (kaca) ---------- */
.cd__box{
  background:linear-gradient(160deg, rgba(255,252,248,.78), rgba(246,228,223,.44));
  -webkit-backdrop-filter:blur(14px) saturate(1.25); backdrop-filter:blur(14px) saturate(1.25);
  border:1px solid rgba(231,208,163,.95);
  box-shadow:0 18px 42px -24px rgba(124,74,82,.55), inset 0 1px 0 rgba(255,255,255,.75);
}
.cd__started{
  margin-top:2.4rem; font-family:var(--f-caps); font-weight:500;
  font-size:clamp(.74rem,3.6vw,.95rem); letter-spacing:.34em;
  text-transform:uppercase; padding-left:.34em;
  background:var(--gold-grad); -webkit-background-clip:text; background-clip:text; color:transparent;
}
@supports not (background-clip:text){ .cd__started{ color:var(--gold-dk); } }

/* ---------- 29. KARTU DETAIL ACARA ---------- */
.detail{ margin-top:2.6rem; display:grid; gap:1rem; }
@media (min-width:640px){ .detail{ grid-template-columns:repeat(3,1fr); gap:1.1rem; } }
.dcard{
  position:relative; padding:2rem 1.2rem 1.7rem; border-radius:var(--r-lg);
  background:linear-gradient(165deg,var(--ivory),var(--cream));
  border:1px solid rgba(231,208,163,.85); box-shadow:var(--sh-soft);
  transition:transform .55s var(--ease), box-shadow .55s var(--ease);
}
.dcard::before{
  content:""; position:absolute; inset:6px; border-radius:calc(var(--r-lg) - 5px);
  border:1px solid rgba(232,180,184,.34); pointer-events:none;
}
.dcard:hover{ transform:translateY(-5px); box-shadow:var(--sh-lift); }
.dcard__ico{
  display:grid; place-items:center; width:46px; height:46px; margin:0 auto 1.05rem;
  border-radius:50%; color:var(--gold-dk);
  background:radial-gradient(circle at 32% 26%, #FFFFFF, var(--gold-pale));
  border:1px solid var(--gold-lt);
  box-shadow:0 8px 18px -12px rgba(154,111,53,.7);
}
.dcard__ico .ico{ width:20px; height:20px; }
.dcard__lbl{
  font-family:var(--f-caps); font-weight:500; font-size:.56rem;
  letter-spacing:.34em; text-transform:uppercase; color:var(--gold-dk); padding-left:.34em;
}
.dcard__val{
  margin-top:.55rem; font-family:var(--f-display); font-weight:500;
  font-size:clamp(1.5rem,6vw,1.9rem); line-height:1.2; color:var(--wine);
}
.dcard__val span{
  display:block; margin-top:.4rem; font-family:var(--f-sans); font-weight:300;
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
}
.addrbox{ margin:2.3rem auto 0; max-width:46ch; }
.addrbox__lbl{
  font-family:var(--f-caps); font-size:.54rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--gold-dk); padding-left:.34em;
}
.addrbox__txt{
  margin-top:.7rem; font-size:.87rem; font-weight:300;
  line-height:1.95; color:var(--ink-soft);
}

/* ---------- 30. AYAT SYUKUR ---------- */
.h-serif--script{ font-style:italic; font-weight:300; color:var(--dusty); }
.versecard{
  position:relative; margin:2.2rem auto 2rem; max-width:38ch;
  padding:2.7rem 1.7rem 2.3rem; border-radius:var(--r-lg);
  background:linear-gradient(165deg, rgba(255,252,248,.94), rgba(250,243,235,.78));
  border:1px solid rgba(231,208,163,.85); box-shadow:var(--sh-card);
}
.versecard__corner{
  position:absolute; width:58px; height:58px; color:var(--gold);
  fill:none; stroke:currentColor; opacity:.4; pointer-events:none;
}
.versecard__corner--tl{ top:11px; left:11px; }
.versecard__corner--br{ bottom:11px; right:11px; transform:rotate(180deg); }
.versecard .quotemark{ margin:0 auto 1rem; }
.versecard .verse{ border:0; padding:0; margin:0 auto; max-width:none; }
.versecard .verse p{
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(1.12rem,4.8vw,1.42rem); line-height:1.72; color:var(--wine);
}
.versecard .verse cite{ margin-top:1.2rem; }

/* ---------- 31. LOKASI (teks bantu) ---------- */
.maps__hint{
  margin-top:1.5rem; max-width:34ch; margin-inline:auto;
  font-size:.76rem; font-weight:300; line-height:1.85; color:var(--ink-soft);
}
.maps__coord{
  margin-top:.85rem; font-family:var(--f-caps); font-size:.58rem;
  letter-spacing:.26em; color:var(--gold-dk);
}

/* ---------- 32. GALERI (bingkai emas tipis) ---------- */
.g-item::before{
  content:""; position:absolute; inset:0; z-index:2; border-radius:inherit;
  border:1px solid rgba(231,208,163,.92); pointer-events:none;
}

/* ---------- 33. TOMBOL MENGAMBANG SISI KANAN ---------- */
.fabs{
  position:fixed; z-index:82; right:1rem;
  bottom:calc(5.4rem + env(safe-area-inset-bottom,0px));
  display:grid; gap:.55rem; justify-items:center;
}
.fab{
  position:relative; display:grid; place-items:center;
  width:44px; height:44px; border-radius:50%; color:var(--gold-dk);
  background:rgba(255,252,248,.88);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(231,208,163,.95);
  box-shadow:0 14px 30px -16px rgba(124,74,82,.55);
  opacity:0; transform:scale(.8) translateY(8px); pointer-events:none;
  transition:opacity .55s var(--ease), transform .45s var(--ease),
             color .3s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.fab.is-shown{ opacity:1; transform:none; pointer-events:auto; }
.fab.is-shown:hover{ transform:translateY(-3px); color:var(--dusty); box-shadow:0 20px 34px -14px rgba(124,74,82,.6); }
.fab.is-shown:active{ transform:scale(.94); }
.fab .ico{ grid-area:1/1; width:18px; height:18px; transition:opacity .3s var(--ease); }
.fab .ico--stop{ opacity:0; }
.fab.is-on .ico--glide{ opacity:0; }
.fab.is-on .ico--stop{ opacity:1; }
.fab.is-on{
  color:var(--dusty);
  background:linear-gradient(160deg, rgba(243,229,203,.96), rgba(255,252,248,.92));
}
.fabs .musicbtn{
  position:relative; right:auto; bottom:auto;
  width:48px; height:48px;
}
.fabs .musicbtn .ico{ width:19px; height:19px; }

/* ---------- 34. PENUTUP & FOOTER ---------- */
.footer__thanks{
  margin-top:1.1rem; max-width:34ch; margin-inline:auto;
  font-family:var(--f-display); font-style:italic; font-weight:300;
  font-size:clamp(.88rem,3.6vw,1rem); line-height:1.8; color:var(--ink-soft);
}
.hairline--footer{ width:54%; margin:1.7rem auto 1.3rem; }

/* ---------- 35. LAYAR BESAR ---------- */
@media (min-width:820px){
  .fabs{ right:1.8rem; bottom:calc(5.8rem + env(safe-area-inset-bottom,0px)); }
  .versecard{ padding:3.2rem 2.4rem 2.8rem; }
  .dcard{ padding:2.4rem 1.4rem 2rem; }
}

/* ---------- 36. AKSESIBILITAS GERAK ---------- */
@media (prefers-reduced-motion:reduce){
  html:not(.gerak-penuh) .loader__ring{ animation:none; border-top-color:var(--gold-pale); }
  html:not(.gerak-penuh) .loader__text{ animation:none; opacity:1; }
  html:not(.gerak-penuh) .hero__age.is-in .hero__age-num{ animation:none; }
  /* tombol mengambang tetap diatur oleh JS lewat kelas .is-shown,
     jadi di sini hanya gerak masuknya yang dihilangkan */
  html:not(.gerak-penuh) .fab{ transform:none; }
  html:not(.gerak-penuh) .fab.is-shown{ opacity:1; }
}

/* ---------- 37. LABEL KEHADIRAN PADA UCAPAN ---------- */
.wish__tag{
  display:inline-block; margin-bottom:.55rem; padding:.2rem .7rem;
  font-family:var(--f-caps); font-size:.5rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-dk);
  background:linear-gradient(150deg, rgba(243,229,203,.9), rgba(255,252,248,.9));
  border:1px solid var(--gold-lt); border-radius:var(--r-pill);
}

/* ---------- 38. HALAMAN PEMBUKA: RAPATKAN AGAR MUAT SATU LAYAR ---------- */
.cover .orn--sm{ margin:.9rem auto 1.1rem; }
.cover__age{ margin:1rem auto .1rem; }
.cover__lead{ margin-top:1.2rem; font-size:.75rem; line-height:1.85; }
.cover__to{ margin:1.35rem auto 1.05rem; }
.cover__hint{ margin-top:1.1rem; }
@media (max-height:700px){
  .cover__age .gold-text{ font-size:clamp(3.4rem,17vw,5rem); }
  .cover__age-ring{ width:clamp(120px,34vw,160px); }
  .cover__lead{ margin-top:1rem; }
  .cover__to{ margin:1.1rem auto .9rem; }
}

/* ---------- 39. ORNAMEN PEMBUKA TIDAK MENAMBAH AREA GULIR ----------
   Sudut & tangkai bunga di halaman pembuka sengaja melewati tepi layar.
   Dibuat fixed supaya hiasan itu tidak ikut dihitung sebagai isi yang
   bisa digulir. Ornamen sudut di bagian penutup tetap absolute.        */
.cover > .cover__veil,
.cover > .cover__corner,
.cover > .cover__sprig{ position:fixed; }

/* ---------- 40. NAMA TEMPAT: EJAAN DIPERTAHANKAN APA ADANYA ---------- */
.dcard__val--place{ font-size:clamp(1.28rem,5.2vw,1.55rem); }

/* ---------- 41. SENTUHAN DI LAYAR HP ----------
   Ketukan pada tombol tidak lagi menyeleksi teks di dalamnya
   dan tidak memunculkan kotak sorot bawaan Android.            */
.btn, .fab, .dock__item, .choice span, .lb__close, .lb__nav{
  -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}

/* ---------- 42. PILIHAN KEHADIRAN SAMA LEBAR ---------- */
.choices .choice{ flex:1 1 0; min-width:0; }

/* ============================================================
   PERBAIKAN v6
   ============================================================ */

/* ---------- 43. GALERI: GRID, BUKAN KOLOM KORAN ----------
   column-count mengalirkan foto ke bawah dulu per kolom, jadi
   kalau jumlah foto tidak pas, sisi kanan tampak bolong.
   Grid mengisi kiri-ke-kanan sehingga selalu rapi.            */
.gallery{
  display:grid;
  grid-template-columns:repeat(var(--gcols,2),1fr);
  gap:.7rem;
}
@media (min-width:600px){ .gallery{ grid-template-columns:repeat(var(--gcols-md,3),1fr); gap:.9rem; } }
@media (min-width:980px){ .gallery{ grid-template-columns:repeat(var(--gcols-lg,4),1fr); gap:1rem; } }

.gallery .g-item{
  margin-bottom:0;
  aspect-ratio:4/5;          /* seragam supaya barisnya lurus */
}

/* ---------- 44. LAPISAN KACA: CEGAH JEJAK SAAT DIGULIR ----------
   backdrop-filter pada elemen fixed bisa meninggalkan jejak/bayangan
   saat halaman digulir di sebagian kartu grafis Windows. Memberi
   lapisan komposit sendiri (translateZ) menghilangkan gejala itu.
   Nilai transform lama sengaja ditulis ulang lengkap supaya animasi
   masuk/keluar tidak berubah - dock dan toast memakai properti
   translate terpisah untuk memusatkan diri, jadi jangan disentuh.  */
.dock{ transform:translateY(24px) translateZ(0); }
.dock.is-shown{ transform:translateZ(0); }

.toast{ transform:translateY(14px) translateZ(0); }
.toast.is-shown{ transform:translateZ(0); }

.fabs{ transform:translateZ(0); }
.fab{ transform:scale(.8) translateY(8px) translateZ(0); }
.fab.is-shown{ transform:translateZ(0); }
.fab.is-shown:hover{ transform:translateY(-3px) translateZ(0); }
.fab.is-shown:active{ transform:scale(.94) translateZ(0); }

/* ---------- 45. KARTU TEMPAT SEBAGAI TAUTAN KE GOOGLE MAPS ----------
   Bagian lokasi digabung ke Detail Acara supaya tidak tampil dua kali.
   Kartu "Tempat" kini elemen <a>, jadi perlu display:block agar isinya
   tersusun seperti kartu lain.                                        */
.dcard--link{
  display:block;
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.dcard--link .dcard__val span{ color:var(--gold-dk); }
.dcard--link:hover{
  transform:translateY(-5px);
  box-shadow:var(--sh-lift);
  border-color:var(--gold);
}
.dcard--link:hover .dcard__ico{
  color:var(--dusty);
  box-shadow:0 10px 22px -10px rgba(154,111,53,.85);
}
.dcard--link:active{ transform:translateY(-1px) scale(.99); }

/* jarak sebelum peta di dalam bagian gabungan */
.addrbox + .mapframe{ margin-top:2.4rem; }

/* ---------- 46. KREDIT PEMBUAT & TOMBOL PEMESANAN ----------
   Ditaruh paling bawah dan sengaja dibuat tenang: garis emas tipis,
   nama pembuat sebagai satu-satunya aksen, tombol bergaya outline.
   Tujuannya jelas terlihat tanpa mengganggu kesan undangannya.   */
.maker{ margin-top:2.6rem; }
.hairline--maker{ width:38%; margin:0 auto 1.7rem; opacity:.55; }

.maker__label{
  font-family:var(--f-caps); font-weight:500;
  font-size:.58rem; letter-spacing:.26em; text-transform:uppercase;
  color:var(--ink-mute); padding-left:.26em;
}
.maker__name{
  margin-top:.35rem;
  font-family:var(--f-display); font-weight:600;
  font-size:clamp(1.35rem,5.6vw,1.7rem); letter-spacing:.02em; line-height:1.2;
}

.btn--wa{
  margin-top:1.15rem;
  color:var(--gold-dk);
  background:linear-gradient(160deg, rgba(255,252,248,.96), rgba(250,243,235,.9));
  border:1px solid var(--gold-lt);
  box-shadow:0 12px 28px -18px rgba(124,74,82,.5);
  transition:transform .45s var(--ease), box-shadow .45s var(--ease),
             border-color .35s var(--ease);
}
.btn--wa .ico{ color:#3F9A6E; stroke-width:1.5; }
.btn--wa:hover{
  transform:translateY(-2px);
  border-color:var(--gold);
  box-shadow:0 18px 34px -16px rgba(154,111,53,.55);
}
.btn--wa:active{ transform:translateY(0) scale(.985); }

.maker__phone{
  margin-top:.95rem;
  font-family:var(--f-caps); font-size:.58rem;
  letter-spacing:.28em; color:var(--gold-dk); padding-left:.28em;
}

/* ---------- 47. FOOTER RINGKAS ----------
   Isi footer kini hanya kredit pembuat, jadi jarak atasnya dirapatkan
   dan bantalan bawahnya dikurangi (tetap menyisakan ruang untuk dock). */
.footer{
  padding-top:clamp(2.4rem,8vw,3.2rem);
  padding-bottom:calc(clamp(2.4rem,8vw,3.2rem) + 78px);
}
.maker--solo{ margin-top:0; }