/* Royal Ballroom Theme Variant */
:root {
  --navy: #091326;
  --gold: #d4ac5c;
  --ivory: #f9f3e6;
  --frame: min(100vw, calc(100svh * .5625));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Cormorant Garamond', serif;
  background-color: #050b17;
  color: var(--ivory);
  overflow-x: hidden;
}

body.locked {
  overflow: hidden;
}

main {
  background-color: #050b17;
}


/* Icon sprite: hidden without display:none, which would break <use> references */
.sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* Gate / Cover Stage */
#gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #050b17;
  transition: opacity 1s ease, transform 1s ease;
}

#gate.out {
  opacity: 0;
  pointer-events: none;
  transform: scale(1.04);
}

.cover-stage {
  position: relative;
  width: var(--frame);
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, .8);
}

.cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gate-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: 3rem 1.8rem 4rem;
  background: linear-gradient(180deg, rgba(5, 11, 23, 0) 40%, rgba(5, 11, 23, .85) 75%, rgba(5, 11, 23, .98) 100%);
  text-align: center;
}

.eyebrow {
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.names {
  margin-top: .4rem;
  font-family: 'Pinyon Script', cursive;
  font-size: 3rem;
  font-weight: 400;
  color: var(--ivory);
  text-shadow: 0 2px 10px rgba(0, 0, 0, .6);
}

.names .amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--gold);
  margin: 0 .3rem;
}

.date {
  margin-top: .4rem;
  font-size: .9rem;
  letter-spacing: .18em;
  color: rgba(249, 243, 230, .85);
}

.to {
  margin-top: 2rem;
  font-size: .75rem;
  letter-spacing: .15em;
  color: rgba(212, 172, 92, .85);
}

.guest {
  margin-top: .3rem;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--ivory);
}

.open-btn {
  margin-top: 1.8rem;
  padding: .8rem 2.2rem;
  font-size: .75rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #050b17;
  background: linear-gradient(135deg, #f3d699, #c99c47, #f7ebcf);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 4px;
  cursor: pointer;
  box-shadow: 0 4px 20px rgba(201, 156, 71, .4);
  transition: transform .25s, box-shadow .25s;
}

.open-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 156, 71, .6);
}

/* Video Stage */
.video-stage {
  position: relative;
  width: var(--frame);
  height: 100svh;
  margin: 0 auto;
  overflow: hidden;
  box-shadow: 0 0 50px rgba(0, 0, 0, .8);
}

/* Out of flow against an explicit stage height. In flow, height:100% resolved
   against an auto-height parent and fell back to the video's intrinsic ratio,
   leaving the clip ~150px short of the stage on a phone with bare stage
   showing beneath it, and object-fit unable to crop as intended. */
.bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero Overlay (First Page) */
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 2.5rem 1.5rem 3.5rem;
  background: linear-gradient(180deg, rgba(5, 11, 23, 0) 30%, rgba(5, 11, 23, .75) 65%, rgba(5, 11, 23, .95) 100%);
  opacity: 0;
  transform: translateY(35px);
  transition: opacity 1.2s ease, transform 1.2s cubic-bezier(.2, .8, .2, 1);
  pointer-events: none;
}

.hero-overlay.in {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.hero-card {
  position: relative;
  width: 100%;
  max-width: 25rem;
  padding: 2.2rem 1.6rem 2.4rem;
  background: rgba(9, 19, 38, .38);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(212, 172, 92, .55);
  box-shadow: 0 16px 40px rgba(0, 0, 0, .5), inset 0 0 25px rgba(212, 172, 92, .08);
  text-align: center;
  color: var(--ivory);
  isolation: isolate;
  will-change: opacity;
}

.hero-photo-frame {
  position: relative;
  width: 7.5rem;
  height: 9.5rem;
  margin: 0 auto 1.2rem;
  border-radius: 50%/35%;
  border: 2px solid var(--gold);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .4), inset 0 0 12px rgba(212, 172, 92, .25);
  overflow: hidden;
}

.hero-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-eyebrow {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
}

.hero-names {
  margin-top: .4rem;
  font-family: 'Pinyon Script', cursive;
  font-size: 3.2rem;
  font-weight: 400;
  line-height: 1.15;
  color: #f9f3e6;
}

.hero-names .amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2.2rem;
  color: var(--gold);
  margin: 0 .2rem;
}

.hero-date {
  margin-top: .5rem;
  font-size: .92rem;
  letter-spacing: .18em;
  color: rgba(249, 243, 230, .85);
}

/* Countdown Tiles */
.countdown {
  display: flex;
  justify-content: center;
  gap: .6rem;
  margin-top: 1.8rem;
}

.cd-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 4rem;
  height: 4rem;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(212, 172, 92, .4);
  border-radius: 4px;
}

.cd-val {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: var(--gold);
  line-height: 1;
}

.cd-lbl {
  margin-top: .25rem;
  font-size: .55rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(249, 243, 230, .75);
}

/* Gold Button */
.gold-btn {
  display: inline-block;
  margin-top: 1.8rem;
  padding: .75rem 1.8rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #050b17;
  text-decoration: none;
  background: linear-gradient(135deg, #f3d699, #c99c47, #f7ebcf);
  border: 1px solid rgba(255, 255, 255, .6);
  border-radius: 4px;
  box-shadow: 0 4px 18px rgba(201, 156, 71, .35);
  transition: transform .25s, box-shadow .25s;
}

.gold-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(201, 156, 71, .55);
}

/* ---- section base & quote section ---- */
.sec {
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 5rem 1.5rem;
  text-align: center;
}

/* ---- decorative layers ----
   .sec sets z-index 1, so a -1 child sits above the section background but
   behind every in-flow child, without the content needing its own z-index.
   Kept deliberately sparse: main::before already carries a full-bleed
   backdrop, so anything else full-bleed here just muddies it. */
.deco {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}

.deco-fade {
  inset: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 14%, #000 86%, transparent);
}

.glow {
  mix-blend-mode: screen;
}



.sec-quote {
  /* Clears the hanging ornaments. Swag drops .30 * 1.134 of the frame less
     its 2rem offset; chandelier drops .27 * 1.026 less 1rem. The swag is the
     lower of the two, so it sets the floor. Proportional, not a fixed rem,
     so the gap holds at every frame width. */
  padding-top: calc(var(--frame) * .34 - .4rem);
  padding-bottom: 6rem;
}




@keyframes sway {
  from { transform: translateX(-50%) rotate(-1.6deg); }
  to   { transform: translateX(-50%) rotate(1.6deg); }
}




/* The card is inset within the stage so the diamond can ring it without
   being clipped by the section's overflow at any point in its rotation. */
.qcard-stage {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
}

.qcard-stage > .qcard {
  max-width: 21rem;
}

.q-diamond {
  top: 50%;
  left: 50%;
  width: 100%;
  opacity: .38;
  transform: translate(-50%, -50%);
}

.greeting-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.greeting-flourish {
  color: var(--gold);
  font-size: .8rem;
  opacity: .7;
}

.greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem;
  font-style: italic;
  letter-spacing: .08em;
  color: var(--gold);
}

.opening-subtext {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(249, 243, 230, .88);
  max-width: 24rem;
  margin: 0 auto 2.4rem;
}

.qcard {
  position: relative;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3.5rem 2.2rem 3rem;
  background: rgba(9, 19, 38, .42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 172, 92, .65);
  box-shadow: 0 20px 50px rgba(0, 0, 0, .6), inset 0 0 30px rgba(212, 172, 92, .1);
  color: var(--ivory);
  isolation: isolate;
}

/* Inner double hairline border */
.qcard::before {
  content: '';
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(212, 172, 92, .3);
  pointer-events: none;
}

/* Corner brackets, drawn as eight gradient arms on one pseudo-element */
.ornate::after {
  --arm: linear-gradient(var(--gold), var(--gold));
  content: '';
  position: absolute;
  inset: 12px;
  pointer-events: none;
  background:
    var(--arm) top left / 14px 2px no-repeat,
    var(--arm) top left / 2px 14px no-repeat,
    var(--arm) top right / 14px 2px no-repeat,
    var(--arm) top right / 2px 14px no-repeat,
    var(--arm) bottom left / 14px 2px no-repeat,
    var(--arm) bottom left / 2px 14px no-repeat,
    var(--arm) bottom right / 14px 2px no-repeat,
    var(--arm) bottom right / 2px 14px no-repeat;
}

.qoriginal {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-style: italic;
  line-height: 1.9;
  color: #f9f3e6;
  text-shadow: 0 0 15px rgba(212, 172, 92, .25);
  margin-bottom: 2rem;
}

.qoriginal.is-rtl {
  font-family: 'Amiri', serif;
  font-size: 1.8rem;
  font-style: normal;
  line-height: 2.3;
  direction: rtl;
}

.qtranslation {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.85;
  color: rgba(249, 243, 230, .92);
  margin-bottom: 2rem;
}

.qsource-badge {
  display: inline-block;
  padding: .35rem 1.4rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212, 172, 92, .08);
  border: 1px solid rgba(212, 172, 92, .45);
}

/* ---- mempelai section ---- */

/* Damask carries its own navy wash so it reads as this section's wall rather
   than a second texture competing with the page backdrop behind it. */












  to   { opacity: .6; transform: translate(-50%, -50%) scale(1.1); }
}


.sec-header-ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .8rem;
  margin-bottom: .6rem;
}

.h-line {
  width: 2.5rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.h-star {
  color: var(--gold);
  font-size: .85rem;
  text-shadow: 0 0 10px rgba(212, 172, 92, .6);
}

.sec-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.3rem;
  font-weight: 500;
  line-height: 1.2;
  color: var(--ivory);
  letter-spacing: .03em;
}

.mempelai-grid {
  display: flex;
  flex-direction: column;
  gap: 2.8rem;
  align-items: center;
  justify-content: center;
  margin: 3.5rem auto 0;
  width: 100%;
}

.mcard {
  position: relative;
  width: 100%;
  max-width: 26rem;
  margin: 0 auto;
  padding: 3rem 2rem;
  border-radius: 4px;
  background: rgba(9, 19, 38, .45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(212, 172, 92, .7);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .7), inset 0 0 35px rgba(212, 172, 92, .12);
  color: var(--ivory);
  text-align: center;
  isolation: isolate;
}




.mrole-pill {
  display: inline-block;
  margin-bottom: 1.6rem;
  padding: .35rem 1.4rem;
  font-size: .65rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(212, 172, 92, .12);
  border: 1px solid rgba(212, 172, 92, .45);
  border-radius: 20px;
}

/* Portrait sits inside the baroque frame art. The aperture insets are measured
   from the PNG's alpha channel (12.48 / 18.12 / 13.81 / 18.04 of the frame box),
   so the photo lands exactly in the opening at any size. */
.mportrait {
  position: relative;
  width: 12.5rem;
  aspect-ratio: 1391 / 1963;
  margin: 0 auto 1.6rem;
}

.mportrait-aperture {
  position: absolute;
  inset: 12.48% 18.12% 13.81% 18.04%;
  overflow: hidden;
  background: #050b17;
  box-shadow: inset 0 0 20px rgba(0, 0, 0, .7);
}

.mphoto {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mportrait-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55));
}

.mnative {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: var(--gold);
  margin-bottom: .4rem;
  text-shadow: 0 0 12px rgba(212, 172, 92, .3);
}

.mnative.is-rtl {
  font-family: 'Amiri', serif;
  font-size: 1.65rem;
  direction: rtl;
}

.mname {
  font-family: 'Pinyon Script', cursive;
  font-size: 2.8rem;
  font-weight: 400;
  line-height: 1.15;
  color: #f9f3e6;
  margin-bottom: 1.4rem;
  text-shadow: 0 0 20px rgba(212, 172, 92, .35);
}

.mlineage-box {
  position: relative;
  padding: 1.4rem 1.2rem 1.2rem;
  background: rgba(5, 11, 23, .4);
  border: 1px solid rgba(212, 172, 92, .3);
  margin-bottom: 1.8rem;
}

.morder {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .8rem;
}

.mparent-label {
  font-size: .82rem;
  font-style: italic;
  color: rgba(249, 243, 230, .7);
  margin-bottom: .4rem;
}

.mparent-names {
  font-size: .92rem;
  line-height: 1.7;
  color: rgba(249, 243, 230, .95);
}

.mcrest-medallion {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  margin: -.5rem 0;
}

.mcrest-ray {
  width: 4rem;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.mcrest-core {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 4.2rem;
  height: 4.2rem;
  border-radius: 50%;
  background: rgba(9, 19, 38, .7);
  border: 2px solid var(--gold);
  box-shadow: 0 0 25px rgba(212, 172, 92, .4), inset 0 0 15px rgba(212, 172, 92, .2);
}

.mamp {
  font-family: 'Pinyon Script', cursive;
  font-size: 3rem;
  color: var(--gold);
  text-shadow: 0 0 15px rgba(212, 172, 92, .7);
}

.ig-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .55rem 1.6rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  background: linear-gradient(135deg, rgba(212, 172, 92, .18), rgba(212, 172, 92, .06));
  border: 1px solid rgba(212, 172, 92, .55);
  border-radius: 25px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .4);
  transition: background .25s, transform .25s, box-shadow .25s;
}

.ig-btn:hover {
  background: linear-gradient(135deg, rgba(212, 172, 92, .32), rgba(212, 172, 92, .15));
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(212, 172, 92, .35);
}

.ig-icon {
  width: .9rem;
  height: .9rem;
}

/* Floating Disc */
#disc {
  position: fixed;
  right: 1.1rem;
  bottom: 1.1rem;
  z-index: 20;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  border: 1px solid var(--gold);
  background: linear-gradient(160deg, #1e293b, #0f172a);
  color: var(--ivory);
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}

#disc.spinning { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .sd-chandelier-a, #disc.spinning {
    animation: none;
  }
  .sd-chandelier-a { transform: translateX(-50%); }
  .sec { opacity: 1; transform: none; transition: none; }
}

/* ============================================================
   The continuous scene
   .frame is the portrait column and the only clip box on the page, so
   ornaments run past section boundaries instead of being cut at each one.
   .stage spans the full scroll height; its children are placed in page
   coordinates (% of total height), which spreads them evenly however many
   sections an invitation happens to have.
   ============================================================ */
.frame {
  position: relative;
  width: var(--frame);
  margin: 0 auto;
  overflow: clip;
  box-shadow: 0 0 50px rgba(0, 0, 0, .8);
}

.stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

/* One wall for the whole page. Two stacked textures read as mud, so the
   damask carries its own navy wash and nothing else sits under it. */
.wall {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(5, 11, 23, .62), rgba(5, 11, 23, .5) 40%, rgba(5, 11, 23, .68)),
    url('img/damask.webp') center top / 100% auto repeat-y;
}

.sd {
  position: absolute;
  pointer-events: none;
  user-select: none;
}

.sd-swag-l { top: -1.5rem; left: -7%; width: 34%; opacity: .6; }
.sd-swag-r { top: -1.5rem; right: -7%; width: 34%; opacity: .6; transform: scaleX(-1); }

.sd-chandelier-a {
  top: -1rem;
  left: 50%;
  width: 30%;
  opacity: .85;
  transform-origin: 50% 0;
  animation: sway 9s ease-in-out infinite alternate;
}

.sd-chandelier-b {
  top: 46%;
  left: 50%;
  width: 20%;
  opacity: .4;
  transform: translateX(-50%);
}

/* Corner bouquets, the piece the gold veining was standing in for. Alternated
   left/right down the page and mirrored so the same two files do not read as a
   repeating stamp. */
.sd-peony-tl { top: 4.5%;  left: -13%;  width: 46%; opacity: .95; }
.sd-peony-r  { top: 26%;   right: -14%; width: 44%; opacity: .9; transform: scaleX(-1) rotate(8deg); }
.sd-peony-l  { top: 58%;   left: -15%;  width: 42%; opacity: .88; transform: rotate(-12deg); }
.sd-peony-br { bottom: 8%; right: -12%; width: 48%; opacity: .92; transform: scaleX(-1) rotate(-6deg); }

.sd-sparks-a { top: 19%; left: -4%; width: 44%; opacity: .5; }
.sd-sparks-b { top: 76%; right: -6%; width: 46%; opacity: .45; }

.sd-swoosh { top: 30%; right: -16%; width: 60%; opacity: .4; }
.sd-flare  { top: 86%; left: 50%; width: 78%; opacity: .3; transform: translateX(-50%); }

.sd-columns { top: 52%; left: 50%; width: 106%; opacity: .16; transform: translateX(-50%); }

.sd-chateau {
  bottom: 2%;
  left: 50%;
  width: 74%;
  opacity: .3;
  transform: translateX(-50%);
}

/* ---- shared section furniture ---- */
.sec-head {
  margin-bottom: 2.4rem;
}

.sec-head .eyebrow {
  margin-bottom: .5rem;
}

.gold-rule {
  width: 4.5rem;
  height: 1px;
  margin: 1rem auto;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.sec {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.2, .8, .2, 1);
}

.sec.in {
  opacity: 1;
  transform: none;
}

/* Panels share the quote card's glass-over-damask treatment */
.pcard, .gcard, .ev, .pform, .gc-pass {
  position: relative;
  width: 100%;
  max-width: 23rem;
  margin: 0 auto 1.6rem;
  padding: 2rem 1.6rem;
  background: rgba(9, 19, 38, .5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(212, 172, 92, .55);
  box-shadow: 0 18px 45px rgba(0, 0, 0, .55), inset 0 0 28px rgba(212, 172, 92, .1);
  isolation: isolate;
}

/* ---- 5. turut mengundang ---- */
.inv-swoosh { top: 4%; right: -20%; width: 58%; opacity: .3; }

.invited {
  list-style: none;
  max-width: 22rem;
  margin: 0 auto;
}

.invited li {
  padding: .75rem 0;
  font-size: 1.05rem;
  color: rgba(249, 243, 230, .92);
  border-bottom: 1px solid rgba(212, 172, 92, .22);
}

.invited li:last-child { border-bottom: 0; }

/* ---- 6. rangkaian acara ---- */
.ev-starfield {
  background: url('img/starfield.webp') center top / 100% auto repeat-y;
  opacity: .35;
}

.ev-chateau { top: 2%; left: 50%; width: 84%; opacity: .3; transform: translateX(-50%); }
.ev-columns { bottom: 0; left: 50%; width: 108%; opacity: .2; transform: translateX(-50%); }

.ev-list { margin-bottom: 2rem; }

.ev-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 2.4rem;
  color: #f9f3e6;
  line-height: 1.2;
}

.ev-native {
  font-size: 1.1rem;
  color: var(--gold);
  margin-top: .2rem;
}

.ev-date, .ev-time {
  font-size: 1rem;
  color: rgba(249, 243, 230, .95);
  line-height: 1.7;
}

.ev-time { color: var(--gold); font-weight: 600; letter-spacing: .04em; }

.ev-venue {
  margin-top: .8rem;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ivory);
}

.ev-address {
  margin-top: .3rem;
  font-size: .9rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(249, 243, 230, .75);
}

.ev-map { margin-top: 1.4rem; }

/* ---- 7. susunan acara ---- */
.rd-veins { top: 6%; left: -26%; width: 66%; opacity: .2; transform: rotate(-140deg); }

.rd {
  position: relative;
  list-style: none;
  max-width: 21rem;
  margin: 0 auto;
  padding-left: 1.2rem;
  text-align: left;
}

/* the rail itself */
.rd::before {
  content: '';
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: 5.2rem;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(212, 172, 92, .7) 12%, rgba(212, 172, 92, .7) 88%, transparent);
}

.rd-row {
  display: grid;
  grid-template-columns: 4rem 1.6rem 1fr;
  align-items: baseline;
  gap: .4rem;
  padding: .85rem 0;
}

.rd-time {
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--gold);
  text-align: right;
}

.rd-node {
  position: relative;
  justify-self: center;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 172, 92, .18), 0 0 10px rgba(212, 172, 92, .7);
}

.rd-desc {
  font-size: .98rem;
  line-height: 1.6;
  color: rgba(249, 243, 230, .92);
}

/* ---- 8. dress code ---- */
.dc-swoosh { top: 10%; left: -18%; width: 56%; opacity: .32; transform: scaleX(-1); }

.dc-note {
  max-width: 20rem;
  margin: 0 auto 2rem;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(249, 243, 230, .88);
}

.dc-colors {
  display: flex;
  justify-content: center;
  gap: 1rem;
  list-style: none;
}

.dc-colors span {
  display: block;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  border: 2px solid rgba(212, 172, 92, .8);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5), inset 0 0 10px rgba(0, 0, 0, .3);
}

/* ---- 9. kisah kami ---- */
.st-sparkles { top: 8%; right: -8%; width: 46%; opacity: .45; }

.st-rail {
  position: relative;
  max-width: 23rem;
  margin: 0 auto;
}

.st-item {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 1.1rem 0;
  text-align: left;
}

.st-item.st-flip { flex-direction: row-reverse; text-align: right; }

.st-photo {
  flex: 0 0 7.5rem;
  aspect-ratio: 3 / 4;
  padding: 4px;
  background: linear-gradient(145deg, rgba(243, 214, 153, .85), rgba(201, 156, 71, .35), rgba(247, 235, 207, .9));
  box-shadow: 0 10px 24px rgba(0, 0, 0, .55);
}

.st-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.st-year {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.st-title {
  margin: .25rem 0 .4rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--ivory);
}

.st-body {
  font-size: .92rem;
  line-height: 1.65;
  color: rgba(249, 243, 230, .82);
}

/* ---- 10. galeri ---- */
.gal-hero { width: 15rem; margin-bottom: 2rem; }

.gal-hero .mportrait-aperture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gal-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
  max-width: 23rem;
  margin: 0 auto;
  list-style: none;
}

.gal-strip img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  display: block;
  border: 1px solid rgba(212, 172, 92, .5);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5);
}

/* ---- 11. saksikan & bagikan ---- */
.sh-starfield {
  background: url('img/starfield.webp') center top / 100% auto repeat-y;
  opacity: .3;
}

.pcard-cat {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.pcard-title {
  margin: .5rem 0 .6rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--ivory);
}

.pcard-desc {
  font-size: .95rem;
  font-style: italic;
  line-height: 1.65;
  color: rgba(249, 243, 230, .8);
  margin-bottom: 1.4rem;
}

/* ---- 12. amplop digital ---- */
.gift-flare { top: 2%; left: 50%; width: 80%; opacity: .3; transform: translateX(-50%); }

.gift-envelope {
  display: block;
  width: 11rem;
  margin: 0 auto 1.6rem;
  filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6));
}

.gift-intro {
  max-width: 21rem;
  margin: 0 auto 2rem;
  font-size: 1rem;
  font-style: italic;
  line-height: 1.7;
  color: rgba(249, 243, 230, .85);
}

.gcard-bank {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--gold);
}

.gcard-number {
  margin: .6rem 0 .3rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--ivory);
}

.gcard-holder {
  font-size: .92rem;
  color: rgba(249, 243, 230, .8);
}

.gift-address {
  margin: .6rem 0;
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(249, 243, 230, .9);
}

.gcard .gold-btn { margin-top: 1.2rem; }

/* ---- 13. wishlist hadiah ---- */
.reg-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-width: 23rem;
  margin: 0 auto;
  list-style: none;
}

.reg-item {
  padding: .9rem;
  background: rgba(9, 19, 38, .5);
  border: 1px solid rgba(212, 172, 92, .45);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .5);
}

.reg-photo {
  aspect-ratio: 1;
  margin-bottom: .7rem;
  overflow: hidden;
  border: 1px solid rgba(212, 172, 92, .35);
}

.reg-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.reg-name {
  font-size: .95rem;
  line-height: 1.45;
  color: var(--ivory);
}

.reg-link {
  display: inline-block;
  margin-top: .5rem;
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 172, 92, .6);
}

/* ---- 14/15. forms ---- */
.rsvp-veins { top: 4%; right: -24%; width: 62%; opacity: .2; transform: rotate(34deg); }
.wish-sparkles { top: 5%; left: -6%; width: 44%; opacity: .45; }

.form-note {
  max-width: 21rem;
  margin: 0 auto 1.6rem;
  font-size: .95rem;
  font-style: italic;
  color: rgba(249, 243, 230, .8);
}

.form-closed {
  max-width: 21rem;
  margin: 0 auto;
  padding: 1.2rem;
  font-style: italic;
  color: var(--gold);
  border: 1px solid rgba(212, 172, 92, .45);
}

.pform { text-align: left; }

.fld { display: block; margin-bottom: 1.1rem; }

.fld-label {
  display: block;
  margin-bottom: .4rem;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--gold);
}

.fld input, .fld select, .fld textarea {
  width: 100%;
  padding: .7rem .85rem;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: var(--ivory);
  background: rgba(5, 11, 23, .55);
  border: 1px solid rgba(212, 172, 92, .45);
  border-radius: 3px;
  outline: none;
  transition: border-color .2s, box-shadow .2s;
}

.fld textarea { resize: vertical; }

.fld input:focus, .fld select:focus, .fld textarea:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(212, 172, 92, .18);
}

.fld select option { background: #091326; color: var(--ivory); }

.pform .gold-btn {
  width: 100%;
  margin-top: .4rem;
  text-align: center;
  border: 0;
  font-family: inherit;
  cursor: pointer;
}

.pform .gold-btn:disabled { opacity: .55; cursor: default; transform: none; }

.form-msg {
  margin-top: .9rem;
  font-size: .92rem;
  font-style: italic;
  color: var(--gold);
  text-align: center;
}

.form-msg.is-error { color: #e8a0a0; }

.wish-list {
  max-width: 23rem;
  margin: 2rem auto 0;
  list-style: none;
  text-align: left;
}

.wish {
  padding: 1rem 1.1rem;
  margin-bottom: .8rem;
  background: rgba(9, 19, 38, .45);
  border-left: 2px solid rgba(212, 172, 92, .7);
}

.wish-name {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: .35rem;
}

.wish-msg {
  font-size: .95rem;
  line-height: 1.65;
  color: rgba(249, 243, 230, .88);
}

/* ---- 16. kartu tamu ---- */
.gc-pass { text-align: center; }

.gc-vip {
  display: inline-block;
  margin-bottom: 1rem;
  padding: .3rem 1.2rem;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: #050b17;
  background: linear-gradient(135deg, #f3d699, #c99c47, #f7ebcf);
  border-radius: 20px;
}

.gc-name {
  font-family: 'Pinyon Script', cursive;
  font-size: 2.4rem;
  line-height: 1.2;
  color: #f9f3e6;
}

.gc-code {
  margin-top: .2rem;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .28em;
  color: var(--gold);
}

.gc-qr {
  width: 11rem;
  margin: 1.4rem auto 1.2rem;
  padding: .7rem;
  background: #f9f3e6;
  border: 2px solid var(--gold);
  box-shadow: 0 10px 26px rgba(0, 0, 0, .55);
}

.gc-qr img { width: 100%; display: block; }

.gc-note {
  font-size: .88rem;
  font-style: italic;
  line-height: 1.6;
  color: rgba(249, 243, 230, .75);
}

/* ---- 17. penutup ---- */
.sec-closing { padding-bottom: 5rem; }

.ft-chateau { bottom: 6%; left: 50%; width: 90%; opacity: .22; transform: translateX(-50%); }
.ft-flare { top: 8%; left: 50%; width: 86%; opacity: .3; transform: translateX(-50%); }

.ft-portrait { width: 13rem; margin-bottom: 2rem; }

.ft-portrait .mportrait-aperture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ft-message {
  max-width: 22rem;
  margin: 0 auto 2.4rem;
  font-size: 1.05rem;
  font-style: italic;
  line-height: 1.8;
  color: rgba(249, 243, 230, .9);
}

.ft-names {
  margin: .4rem 0 1.6rem;
  font-family: 'Pinyon Script', cursive;
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.15;
  color: #f9f3e6;
  text-shadow: 0 0 24px rgba(212, 172, 92, .4);
}

.ft-names .amp {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 2rem;
  color: var(--gold);
  margin: 0 .2rem;
}

.ft-families p {
  font-size: .95rem;
  line-height: 1.8;
  color: rgba(249, 243, 230, .8);
}

.ft-hashtag {
  margin: 2rem 0 1.6rem;
}

.ft-hashtag span {
  display: inline-block;
  padding: .5rem 1.6rem;
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--gold);
  border: 1px solid rgba(212, 172, 92, .55);
  border-radius: 24px;
  background: rgba(212, 172, 92, .08);
}

.ft-brand {
  margin-top: 2.4rem;
  padding-top: 1.6rem;
  border-top: 1px solid rgba(212, 172, 92, .25);
  font-size: .78rem;
  letter-spacing: .1em;
  color: rgba(249, 243, 230, .55);
}

.ft-brand a { color: rgba(249, 243, 230, .7); text-decoration: none; }
.ft-brand a:hover { color: var(--gold); }

.card-stack { display: flex; flex-direction: column; align-items: center; }

.st-text { flex: 1; min-width: 0; }