@font-face {
  font-family: "Adam & Mary";
  src: url("assets/fonts/adam-mary.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Cinzel Decorative";
  src: url("assets/fonts/cinzel-decorative.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --gold: #8e701b;
  --paper: #f7f4ec;
  --paper-texture: url("assets/images/paper-background.webp");
  /* Fokus HP: lebar mengikuti layar, pratinjau layar besar dibatasi seperti HP. */
  --invitation-max-width: 480px;
}
* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; color: var(--gold); background: var(--paper) var(--paper-texture) center top / 480px auto repeat; }
body.envelope-closed { background: #630c21; }
[hidden] { display: none !important; }
button { font: inherit; }
.invitation {
  position: relative;
  width: 100%;
  max-width: var(--invitation-max-width);
  margin-inline: auto;
  container-type: inline-size;
}
/* Koordinat mengikuti artboard Illustrator 1080 × 2227.36. */
/* 1cqw = 1% lebar undangan. Posisi dan ukuran ikut mengecil di HP. */
.artboard {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 2227.36;
  overflow: hidden;
  isolation: isolate;
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
}
/* Selama amplop bergerak, hanya tekstur kertas yang terlihat di belakangnya. */
.artboard > * { opacity: 0; }
.content-ready .artboard > * { animation: content-in 1.8s .35s both ease-out; }
.envelope-cover {
  position: relative;
  width: 100%;
  aspect-ratio: 1080 / 1920;
  overflow: hidden;
  isolation: isolate;
  background: #630c21;
}
.envelope-poster, .envelope-animation {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill;
}
.envelope-animation { opacity: 0; z-index: 1; pointer-events: none; }
.cover-details { position: absolute; inset: 0; z-index: 2; transition: opacity .25s; }
.cover-names {
  position: absolute; top: 6.4%; left: 34%; width: 36%; margin: 0;
  text-align: center; font-family: "Adam & Mary", cursive;
  font-size: 11.9cqw; font-weight: 400; line-height: .93;
}
.cover-names span { display: block; }
.cover-names span:nth-child(2) { font-size: .8em; line-height: 1.1; }
.cover-recipient, .cover-date {
  position: absolute; left: 4%; width: 92%; margin: 0;
  text-align: center; color: #fff; font-family: "Cinzel Decorative", Georgia, serif;
  font-weight: 400; line-height: 1.35;
}
.cover-recipient { top: 62.2%; font-size: 4.2cqw; }
.cover-recipient span { font-size: 1.14em; }
.open-invitation {
  position: absolute; left: 24.1%; top: 72.8%; width: 54.4%;
  aspect-ratio: 589 / 150; border: 0; padding: 0; background: transparent;
  color: var(--gold); font-family: "Cinzel Decorative", Georgia, serif;
  font-size: 4.05cqw; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.open-invitation img { width: 100%; height: 100%; display: block; }
.open-invitation span { position: absolute; inset: 0; display: grid; place-items: center; }
.open-invitation:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 999px; }
.cover-date { top: 83.5%; font-size: 3.9cqw; }
.is-opening .cover-details { opacity: 0; pointer-events: none; }
.envelope-cover.is-opening { position: absolute; top: 0; left: 0; z-index: 10; background: transparent; }
.is-playing-envelope .envelope-animation { opacity: 1; }
.is-playing-envelope .envelope-poster { opacity: 0; }
.portrait-window {
  position: absolute;
  left: 20.09%;
  top: 8.26%;
  width: 60.4%;
  height: 47.25%;
  overflow: hidden;
  border-radius: 50% / 31%;
  z-index: 0;
}
.portrait {
  position: absolute;
  width: 161.51%;
  max-width: none;
  height: auto;
  left: -30.14%;
  top: -42.92%;
}
.gold-frame {
  position: absolute;
  left: 18.95%;
  top: 7.61%;
  width: 62.2%;
  height: auto;
  pointer-events: none;
  z-index: 1;
}
.flowers {
  position: absolute;
  aspect-ratio: 1;
  pointer-events: none;
  z-index: 2;
}
.flowers-top { width: 60.2%; left: 37.96%; top: -1.35%; }
.flowers-bottom { width: 78.7%; left: 1.02%; top: 29.86%; }
.flower-orientation { width: 100%; height: 100%; position: relative; }
.flowers-top .flower-orientation { transform: rotate(180deg); }
.flower-poster, .flower-animation {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.flower-animation { opacity: 0; }
.flowers.is-playing .flower-animation { opacity: 1; }
.flowers.is-playing .flower-poster { opacity: 0; }

.eyebrow, .couple-names, .event-date {
  position: absolute;
  width: 100%;
  left: 0;
  margin: 0;
  text-align: center;
  font-weight: 400;
}
.eyebrow {
  top: 65.55%;
  font-family: "Adam & Mary", cursive;
  font-size: clamp(10px, 3.4vw, 16.32px);
  font-size: 3.4cqw;
  line-height: 1.1;
}
.couple-names {
  outline: none;
  top: 67.65%;
  font-family: "Adam & Mary", cursive;
  font-size: clamp(35px, 11.921vw, 71.526px);
  font-size: 11.921cqw;
  line-height: 1.15;
  white-space: nowrap;
}
.event-date {
  top: 75.55%;
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(9px, 2.782vw, 16.692px);
  font-size: 2.782cqw;
  line-height: 1.4;
}
.save-date {
  position: absolute;
  left: 32.87%;
  top: 78.87%;
  width: 34.26%;
  aspect-ratio: 589 / 150;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--gold);
  font-family: "Cinzel Decorative", Georgia, serif;
  font-size: clamp(9px, 2.433vw, 14.598px);
  font-size: 2.433cqw;
  cursor: pointer;
  transition: transform .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.save-date img { display: block; width: 100%; height: 100%; }
.save-date span { position: absolute; inset: 0; display: grid; place-items: center; }
.save-date:hover { transform: translateY(-2px); }
.save-date:active { transform: translateY(0); }
.save-date:focus-visible { outline: 2px solid var(--gold); outline-offset: 5px; border-radius: 999px; }
.countdown {
  position: absolute;
  left: 18.15%;
  top: 86.83%;
  width: 62.87%;
  aspect-ratio: 679 / 173;
  font-family: "Cinzel Decorative", Georgia, serif;
}
.countdown-border { position: absolute; inset: 0; width: 100%; height: 100%; }
.countdown-grid {
  position: absolute;
  inset: 0 6.5%;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  text-align: center;
}
.countdown-value {
  display: block;
  font-size: clamp(24px, 7.291vw, 43.746px);
  font-size: 7.291cqw;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.countdown-label {
  display: block;
  font-size: clamp(8px, 2.227vw, 13.362px);
  font-size: 2.227cqw;
  line-height: 1.25;
}
.countdown-divider { position: absolute; top: 13.3%; width: .736%; height: 73.4%; }
.divider-one { left: 35.5%; }
.divider-two { left: 64.2%; }
.content-ready .entrance { animation: blur-in 1.1s both ease-out; }
.content-ready .entrance-frame { animation-delay: .08s; }
.content-ready .entrance-photo { animation-delay: .2s; }
.content-ready .entrance-flowers-top { animation-delay: .65s; }
.content-ready .entrance-flowers-bottom { animation-delay: .9s; }
/* Pop-up halus untuk tulisan, tombol kalender, dan hitung mundur saat di-scroll. */
.content-ready .artboard > .scroll-pop {
  opacity: 0;
  transform: scale(.94);
  transform-origin: center;
  animation: none;
}
.content-ready .artboard > .scroll-pop.is-in-view {
  animation: scroll-pop-in 1.6s cubic-bezier(.22, .61, .36, 1) forwards,
    gentle-pop 5s 1.6s ease-in-out infinite;
}
@keyframes scroll-pop-in {
  from { opacity: 0; transform: scale(.94); }
  to { opacity: 1; transform: scale(1); }
}
@keyframes gentle-pop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.025); }
}
@keyframes content-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes blur-in {
  from { opacity: 0; filter: blur(12px); }
  to { opacity: 1; filter: blur(0); }
}
/* Ayat dibuat lebih tinggi untuk menjaga keterbacaan pada HP. */
.verse-section {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: 13cqw 8cqw 22cqw;
  color: var(--gold);
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
  text-align: center;
  font-family: "Cinzel Decorative", Georgia, serif;
}
.verse-quote { position: relative; z-index: 1; margin: 8cqw 0 9cqw; }
.verse-text { margin: 0; font-size: 3.2cqw; line-height: 1.7; }
.verse-line {
  display: block;
  opacity: 0;
  transform: translateY(8px);
}
.verse-section.is-in-view .verse-line {
  animation: verse-line-in 1.3s var(--line-delay, 0s) both ease-out;
}
.verse-citation { margin-top: 6.5cqw; font-size: 3.4cqw; font-style: normal; line-height: 1.5; }
.verse-divider {
  display: block; position: relative; z-index: 1;
  width: 28cqw; height: auto; margin-inline: auto;
  opacity: 0; transition: opacity 1.5s ease;
}
.verse-divider-bottom { transform: rotate(180deg); }
.verse-section.is-in-view .verse-divider { opacity: 1; }
.verse-flower {
  position: absolute; z-index: 0; bottom: 7cqw; width: 27cqw;
  opacity: 0; transition: transform 2.6s cubic-bezier(.22, .61, .36, 1), opacity 2s ease;
  pointer-events: none;
}
.verse-flower img { display: block; width: 100%; height: auto; }
.verse-flower-left { left: -5cqw; transform: translateX(-110%); }
.verse-flower-left img { transform: scaleX(-1); }
.verse-flower-right { right: -5cqw; transform: translateX(110%); }
.verse-section.is-in-view .verse-flower { opacity: 1; transform: translateX(0); }
@keyframes verse-line-in {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.profile-section {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; color: var(--gold);
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
  text-align: center;
}
.profile-corner {
  position: absolute; z-index: 0; left: 0; width: 100%; height: 60%;
  pointer-events: none;
}
.profile-corner-motion {
  position: absolute; inset: 0; opacity: 0;
  transition: transform 2.6s cubic-bezier(.22, .61, .36, 1), opacity 2.6s ease;
}
.profile-corner-top { top: 0; }
.profile-corner-bottom { bottom: 0; }
.profile-corner-top .profile-corner-motion { transform: translateX(105%); }
.profile-corner-bottom .profile-corner-motion { transform: translateX(-105%); }
.profile-corner.is-revealed .profile-corner-motion { opacity: 1; transform: translateX(0); }
.profile-frame { position: absolute; z-index: 0; width: 65%; height: 80%; }
.profile-frame-top { right: 1%; top: 15%; }
.profile-frame-bottom { left: 1%; bottom: 15%; }
.profile-flower-top { width: 44cqw; left: auto; right: -9cqw; top: calc(15% - 16cqw); }
.profile-flower-bottom { width: 44cqw; left: -9cqw; top: auto; bottom: calc(15% - 16cqw); }
.profile-content { position: relative; z-index: 3; padding: 35cqw 12cqw 40cqw; }
.profile-intro, .profile-full-name, .profile-parents {
  font-family: "Cinzel Decorative", Georgia, serif;
  font-weight: 400;
}
.profile-intro { width: calc(100% + 14cqw); margin: 0 -7cqw 14cqw; font-size: 2.9cqw; line-height: 1.65; }
.profile-intro-line { display: block; white-space: nowrap; }
.profile-person { margin: 0; }
.profile-nickname { margin: 0 0 2.5cqw; font-family: "Adam & Mary", cursive; font-size: 17.5cqw; line-height: 1.1; font-weight: 400; }
.profile-nickname a { display: inline-block; color: inherit; text-decoration: none; }
.profile-nickname a:focus-visible { outline: 1px solid var(--gold); outline-offset: 6px; border-radius: 8px; }
.profile-full-name { margin: 0 0 3cqw; font-size: 3.7cqw; line-height: 1.5; }
.profile-parents {
  width: calc(100% + 18cqw); margin: 0 -9cqw;
  font-size: 2.2cqw; line-height: 1.7; white-space: nowrap;
}
.line-reveal { opacity: 0; transform: translateY(6px); }
.line-reveal.is-revealed { animation: profile-word-in 1.5s both ease-out; }
.profile-ampersand { margin: 9cqw 0; font-family: "Adam & Mary", cursive; font-size: 13cqw; line-height: 1.1; }
.reveal-word { display: inline-block; opacity: 0; transform: translateY(6px); }
.word-reveal.is-revealed .reveal-word { animation: profile-word-in 1.2s var(--word-delay, 0s) both ease-out; }
.word-reveal:focus-within .reveal-word { opacity: 1; transform: none; }
@keyframes profile-word-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.events-section {
  position: relative; isolation: isolate; overflow: hidden;
  padding: 12cqw 0 28cqw;
  color: var(--gold); text-align: center;
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
}
.events-heading { margin: 0; font-family: "Adam & Mary", cursive; font-weight: 400; font-size: 4.8cqw; line-height: 1.1; }
.events-heading-divider { display: block; width: 24cqw; height: auto; margin: 1.5cqw auto 0; }
.event-block { position: relative; isolation: isolate; width: 100%; margin-top: 28cqw; }
.event-bouquet {
  z-index: 0; width: 40cqw; height: auto; aspect-ratio: 720 / 464;
  transform: none;
}
.event-bouquet-top { top: -14cqw; right: -4cqw; left: auto; bottom: auto; }
.event-bouquet-bottom { bottom: -14cqw; left: -4cqw; top: auto; right: auto; }
.event-bouquet-top:not(.hosts-bouquet) { transform: translateX(-15%); }
.event-bouquet-bottom:not(.hosts-bouquet) { transform: translateX(15%); }
.event-bouquet-bottom .flower-orientation { transform: rotate(180deg); }
.event-bouquet .flower-animation, .event-bouquet .flower-poster { object-fit: contain; }
.event-card, .hosts-card {
  position: relative; z-index: 1; margin-inline: auto;
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
}
.event-card { width: 88cqw; border-radius: 30% / 50%; }
.event-card-frame { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.event-details { position: relative; z-index: 2; padding: 4cqw 7cqw 6cqw; font-family: "Cinzel Decorative", Georgia, serif; }
.event-title-row { display: flex; justify-content: center; align-items: center; gap: 1.5cqw; }
.event-title { margin: 0; font-family: "Adam & Mary", cursive; font-size: 4.8cqw; line-height: 1.1; font-weight: 400; }
.event-calendar { display: grid; place-items: center; width: 7cqw; height: 7cqw; padding: 1cqw; border: 0; background: transparent; cursor: pointer; }
.event-calendar img { display: block; width: 100%; height: 100%; object-fit: contain; }
.event-details .event-date { position: static; width: auto; left: auto; top: auto; margin: 2.5cqw 0 0; font-size: 3.3cqw; font-weight: 700; line-height: 1.5; }
.event-time { display: flex; align-items: center; justify-content: center; gap: 1.5cqw; margin: 1cqw 0 0; font-size: 3.05cqw; line-height: 1.4; }
.event-time img { width: 3.7cqw; height: 4cqw; object-fit: contain; }
.event-venue { margin: 4cqw 0 0; font-size: 3.15cqw; font-weight: 700; line-height: 1.5; }
.event-address { margin: 1.8cqw 0 0; font-size: 2.65cqw; line-height: 1.45; }
.event-address span { display: block; }
.event-map { position: relative; display: block; width: 29cqw; aspect-ratio: 589 / 150; margin: 3.7cqw auto 0; color: var(--gold); font-size: 2.5cqw; text-decoration: none; }
.event-map-button { display: block; width: 100%; height: 100%; }
.event-map > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 1.5cqw; }
.event-map > span img { width: 3.8cqw; height: 4.8cqw; object-fit: contain; }
.event-calendar:focus-visible, .event-map:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 999px; }
.hosts-block { margin-top: 30cqw; }
.hosts-card { width: 84cqw; border-radius: 9%; }
.hosts-details { position: relative; z-index: 2; padding: 11cqw 4cqw 14cqw; font-family: Arial, Helvetica, sans-serif; }
.hosts-details h3 { margin: 0; font-size: 3.6cqw; line-height: 1.4; font-weight: 400; text-transform: uppercase; }
.hosts-details ul { list-style: none; margin: 7cqw 0 0; padding: 0; font-size: 3.5cqw; font-weight: 700; line-height: 1.5; }
.hosts-details li { margin: 0; }
.hosts-bouquet { width: 50cqw; transform: scale(.9); }
.hosts-bouquet.event-bouquet-top { top: -18cqw; right: -9cqw; }
.hosts-bouquet.event-bouquet-bottom { bottom: -18cqw; left: -9cqw; }
.event-reveal > .event-card, .event-reveal > .hosts-card { opacity: 0; transform: translateY(10px) scale(.96); }
.event-reveal.is-revealed > .event-card, .event-reveal.is-revealed > .hosts-card {
  animation: event-card-bounce 1.9s var(--card-delay, 0s) both ease-out;
}
.event-reveal > .event-bouquet { opacity: 0; transition: opacity 1.9s var(--card-delay, 0s) ease; }
.event-reveal.is-revealed > .event-bouquet { opacity: 1; }
.event-pop-item { opacity: 0; transform: translateY(5px) scale(.97); }
.event-reveal.is-revealed .event-pop-item {
  animation: event-text-bounce 1.25s calc(var(--card-delay, 0s) + var(--pop-delay, .28s)) both ease-out;
}
@keyframes event-card-bounce {
  0% { opacity: 0; transform: translateY(10px) scale(.96); }
  65% { opacity: 1; transform: translateY(0) scale(1.015); }
  84% { transform: translateY(0) scale(.997); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes event-text-bounce {
  0% { opacity: 0; transform: translateY(5px) scale(.97); }
  65% { opacity: 1; transform: translateY(0) scale(1.012); }
  84% { transform: translateY(0) scale(.998); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.gallery-section {
  padding: 2cqw 8cqw 12cqw; overflow: hidden;
  background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
}
.gallery-heading { width: 23cqw; margin: 0 auto 10cqw; }
.gallery-heading img { display: block; width: 100%; height: auto; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5cqw 3.6cqw; }
.gallery-item {
  position: relative; display: block; width: 100%; aspect-ratio: 442 / 768;
  padding: 0; border: 0; border-radius: 16% / 9%; overflow: hidden;
  background: #521125; cursor: zoom-in; opacity: 0;
  transform: translateX(-35%);
  transition: transform 1.5s var(--gallery-delay, 0s) cubic-bezier(.22,.61,.36,1), opacity 1.5s var(--gallery-delay, 0s) ease;
  -webkit-tap-highlight-color: transparent;
}
.gallery-item:nth-child(even) { transform: translateX(35%); }
.gallery-item.is-revealed, .gallery-item:focus-visible { opacity: 1; transform: translateX(0); }
.gallery-item:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.gallery-photo {
  position: absolute; inset: 1.4% 2.5%; width: 95%; height: 97.2%; object-fit: cover;
  transform: scale(var(--photo-scale, 1)); transform-origin: var(--photo-origin, center);
}
.gallery-frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
body.gallery-preview-open { overflow: hidden; }
.gallery-preview {
  position: fixed; inset: 0; width: 100%; max-width: none; height: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: 0; border: 0; background: rgba(20,9,12,.96); color: #fff;
  font-family: Arial, Helvetica, sans-serif;
}
.gallery-preview::backdrop { background: rgba(20,9,12,.96); }
.gallery-preview-shell {
  position: relative; width: 100%; height: 100%; padding: 0;
}
.gallery-preview-figure { width: 100%; height: 100%; margin: 0; }
#gallery-preview-image { display: block; width: 100%; height: 100%; object-fit: contain; }
.gallery-preview button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid #b49a71; border-radius: 50%; color: #fff; background: #14090c99; cursor: pointer; font-size: 32px; line-height: 1; }
.gallery-preview button:focus-visible { outline: 2px solid white; outline-offset: 3px; }
.gallery-preview-close { position: absolute; z-index: 2; right: 14px; top: max(12px, env(safe-area-inset-top)); }
.gallery-preview-navigation { position: absolute; z-index: 1; top: 50%; left: max(10px, env(safe-area-inset-left)); right: max(10px, env(safe-area-inset-right)); transform: translateY(-50%); display: flex; justify-content: space-between; pointer-events: none; }
.gallery-preview-navigation button { pointer-events: auto; }
.section-title { margin: 0; font-family: "Cinzel Decorative", Georgia, serif; font-size: 4.4cqw; line-height: 1.4; text-align: center; }
.rsvp-section, .gift-section, .wishes-section { background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y; }
.rsvp-section { padding-top: 4cqw; }
.rsvp-panel { position: relative; isolation: isolate; aspect-ratio: 1044 / 1233; }
.rsvp-frame { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: auto; pointer-events: none; }
.rsvp-content { position: absolute; inset: 0; padding: 24.6cqw 17cqw 0; }
.rsvp-content .section-title { font-size: 3.9cqw; line-height: 1.25; white-space: nowrap; }
.rsvp-intro { margin: 1.2cqw 0 1.5cqw; font: 2.75cqw/1.35 Arial, Helvetica, sans-serif; text-align: center; }
.rsvp-intro span { display: block; white-space: nowrap; }
#rsvp-form, #wishes-form { display: grid; gap: 3cqw; }
#rsvp-form input, #rsvp-form select, #wishes-form input, #wishes-form textarea {
  display: block; width: 100%; min-width: 0; min-height: 44px; border: 1px solid #c7b68c; border-radius: 0; padding: 2cqw;
  background: #fff; color: #665d4f; font-family: Arial, Helvetica, sans-serif; font-size: max(16px, 3.6cqw); line-height: 1.35;
}
#rsvp-form input:focus, #rsvp-form select:focus, #wishes-form input:focus, #wishes-form textarea:focus { outline: 2px solid var(--gold); outline-offset: 2px; }
.rsvp-row { display: grid; grid-template-columns: 1.7fr 1fr; gap: 2cqw; }
.rsvp-row label { display: block; margin-bottom: 1cqw; font: 2.4cqw/1.4 Arial, Helvetica, sans-serif; color: #6e6554; }
.solid-gold-button { display: flex; align-items: center; justify-content: center; gap: 2cqw; width: 100%; min-height: 44px; padding: 1.5cqw 2cqw; border: 0; background: #927b40; color: #fff; cursor: pointer; font-family: "Cinzel Decorative", Georgia, serif; font-size: 4cqw; line-height: 1.3; }
.solid-gold-button:focus-visible, .copy-button:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.solid-gold-button:disabled { opacity: .6; cursor: wait; }
/* Proporsi form mengikuti desain, terpisah dari ukuran form ucapan. */
#rsvp-form { gap: 2.4cqw; }
#rsvp-form input, #rsvp-form select { min-height: 0; height: 7.4cqw; padding: 0 2cqw; font-size: 3cqw; line-height: 1.2; }
#rsvp-form .rsvp-row { grid-template-columns: 1.7fr 1fr; gap: 2cqw; }
#rsvp-form .rsvp-row label { margin-bottom: .4cqw; font-size: 1.6cqw; line-height: 1.3; }
#rsvp-form .solid-gold-button { min-height: 0; height: 7.4cqw; margin-top: .6cqw; padding: 0 1cqw; font-size: 3.9cqw; line-height: 1.2; }
#rsvp-status { margin: 2cqw 17cqw 0; }
.form-status { margin: 0; min-height: 0; font: 3.2cqw/1.5 Arial, Helvetica, sans-serif; text-align: center; overflow-wrap: anywhere; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: #741b30; }
.form-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rsvp-panel:focus-within, .wishes-card:focus-within { opacity: 1; transform: none; }
.gift-section { padding: 0 0 12cqw; text-align: center; }
.gift-intro { margin: 3cqw 5cqw 5cqw; font: 2.9cqw/1.3 Arial, Helvetica, sans-serif; }
.gift-details { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .85s ease, opacity .85s ease; opacity: 0; }
.gift-details.is-open { grid-template-rows: 1fr; opacity: 1; }
.gift-details-inner { min-height: 0; overflow: hidden; }
.gift-bank-card, .gift-address-card { position: relative; width: 70cqw; aspect-ratio: 713 / 336; margin: 0 auto 5cqw; font-family: Arial, Helvetica, sans-serif; }
.gift-card-background { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.gift-bank-name { position: absolute; top: 2.5cqw; right: 4cqw; color: #881c32; font-size: 6cqw; font-weight: 700; }
.gift-account { position: absolute; top: 14cqw; left: 5.5cqw; margin: 0; color: #6f1023; text-align: left; font-size: 4.2cqw; line-height: 1.1; }
#gift-account-number { font-size: 4.4cqw; letter-spacing: .3cqw; }
.copy-button { position: absolute; bottom: 2cqw; left: 50%; transform: translateX(-50%); display: flex; align-items: center; justify-content: center; gap: 1.3cqw; height: 6cqw; width: 27.5cqw; padding: 0 1cqw; border: 0; border-radius: 1.5cqw; background: #721328; color: white; font: 2.2cqw/1.2 Arial, Helvetica, sans-serif; cursor: pointer; }
.copy-button img { width: 3cqw; height: 3cqw; object-fit: contain; }
.gift-location-icon { position: absolute; top: 1.3cqw; left: 47%; width: 6cqw; height: 7cqw; object-fit: contain; }
#gift-postal-address { position: absolute; top: 10cqw; left: 4%; width: 92%; margin: 0; font-size: 2.9cqw; line-height: 1.3; }
.gift-address-card .copy-button { bottom: 2.7cqw; }
.gift-toggle { width: 70cqw; min-height: 0; height: 8cqw; margin: 0 auto; padding: 0 2cqw; font-size: 5cqw; }
.gift-toggle img { width: 5cqw; height: 5.2cqw; object-fit: contain; }
#copy-status { margin: 3cqw 10cqw 0; }
.wishes-section { padding: 0 8cqw 14cqw; }
.wishes-card { min-height: 90cqw; padding: 7cqw; border: 1px solid #b49a7170; border-radius: 5cqw; background: #ffffff24; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.wishes-card .section-title { padding-bottom: 4cqw; border-bottom: 1px solid #c8bb94; font-size: 6cqw; }
#wishes-form { margin-top: 4cqw; }
#wishes-form textarea { resize: vertical; }
.wishes-count { margin: 7cqw 0 0; padding-bottom: 1.5cqw; border-bottom: 1px solid #c8bb94; font: bold 3.2cqw/1.4 Arial, Helvetica, sans-serif; }
.wish-entry { padding: 4cqw 0; border-bottom: 1px solid #d8cdaa; font: 3.5cqw/1.5 Arial, Helvetica, sans-serif; overflow-wrap: anywhere; }
.wish-entry h3 { margin: 0 0 1cqw; font-size: 3.5cqw; }
.wish-entry p { margin: 0; white-space: pre-wrap; }
.closing-section {
  position: relative; isolation: isolate; overflow: hidden; width: 100%; aspect-ratio: 4500 / 3742;
  text-align: center; background: var(--paper) var(--paper-texture) center top / 100% auto repeat-y;
  color: var(--gold); font-family: Arial, Helvetica, sans-serif;
}
.closing-message { position: absolute; top: 7.2cqw; left: 8cqw; width: 84cqw; margin: 0; font-size: 2.6cqw; font-weight: 700; line-height: 1.3; }
.closing-message span { display: block; white-space: nowrap; }
.closing-eyebrow, .closing-names { position: absolute; left: 0; width: 100%; margin: 0; font-family: "Adam & Mary", cursive; font-weight: 400; line-height: 1.15; }
.closing-eyebrow { top: 20.5cqw; font-size: 4.5cqw; }
.closing-names { top: 26cqw; font-size: 13cqw; white-space: nowrap; }
.closing-sentence { opacity: 0; transform: translateY(8px); }
.closing-section.is-revealed .closing-sentence { animation: verse-line-in 1.3s var(--closing-delay, 0s) both ease-out; }
.closing-flower { position: absolute; z-index: 0; width: 33cqw; bottom: -11cqw; opacity: 0; pointer-events: none; transition: transform 2.6s .5s cubic-bezier(.22,.61,.36,1), opacity 2s .5s ease; }
.closing-flower img { display: block; width: 100%; height: auto; }
.closing-flower-left { left: -3cqw; transform: translateX(-110%); }
.closing-flower-left img { transform: scaleX(-1); }
.closing-flower-right { right: -3cqw; transform: translateX(110%); }
.closing-section.is-revealed .closing-flower { opacity: 1; transform: translateX(0); }
.closing-support, .closing-logo, .closing-website { position: absolute; z-index: 1; margin: 0; color: inherit; text-decoration: none; }
.closing-support { top: 55cqw; left: 25cqw; width: 50cqw; font-size: 2.4cqw; }
.closing-logo { top: 60.5cqw; left: 44.85cqw; width: 10.3cqw; }
.closing-logo img { display: block; width: 100%; height: auto; border-radius: 20%; }
.closing-website { top: 75cqw; left: 24cqw; width: 52cqw; font-size: 2.6cqw; }
.closing-sponsor-pop { opacity: 0; transform: translateY(5px) scale(.92); }
.closing-section.is-revealed .closing-sponsor-pop { animation: closing-pop-in 1.35s var(--closing-delay, 0s) both ease-out; }
.closing-section:focus-within .closing-sponsor-pop { animation: none; opacity: 1; transform: none; }
.closing-logo:focus-visible, .closing-website:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; border-radius: 5px; }
@keyframes closing-pop-in {
  0% { opacity: 0; transform: translateY(5px) scale(.92); }
  65% { opacity: 1; transform: translateY(0) scale(1.045); }
  85% { opacity: 1; transform: translateY(0) scale(.995); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* Bayangan tetap: satu lapisan lembut, tidak diterapkan ke video bunga. */
.gold-frame-image { display: block; width: 100%; height: auto; filter: drop-shadow(0 2px 3px rgba(66, 43, 24, .18)); }
.profile-frame, .rsvp-frame, .countdown-border { filter: drop-shadow(0 1px 2px rgba(66, 43, 24, .14)); }
.event-card, .hosts-card, .gallery-item, .wishes-card { box-shadow: 0 3px 9px rgba(66, 43, 24, .12); }
.gift-card-background { filter: drop-shadow(0 2px 4px rgba(66, 43, 24, .14)); }
.cover-names, .couple-names, .profile-nickname, .closing-names { text-shadow: 0 2px 3px rgba(58, 34, 15, .2); }
.cover-names { text-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .content-ready .artboard > * { animation: none; opacity: 1; }
  .content-ready .artboard > .scroll-pop,
  .content-ready .artboard > .scroll-pop.is-in-view { animation: none; opacity: 1; transform: none; }
  .flower-animation { display: none; }
  .flowers.is-playing .flower-poster { opacity: 1; }
  .save-date { transition: none; }
  .verse-line, .verse-section.is-in-view .verse-line { animation: none; opacity: 1; transform: none; }
  .verse-divider, .verse-flower { opacity: 1; transition: none; }
  .verse-flower-left, .verse-flower-right { transform: none; }
  .profile-corner .profile-corner-motion { opacity: 1; transform: none; transition: none; }
  .line-reveal, .line-reveal.is-revealed { opacity: 1; transform: none; animation: none; }
  .reveal-word, .word-reveal.is-revealed .reveal-word { animation: none; opacity: 1; transform: none; }
  .event-reveal > .event-card, .event-reveal > .hosts-card,
  .event-reveal.is-revealed > .event-card, .event-reveal.is-revealed > .hosts-card,
  .event-pop-item, .event-reveal.is-revealed .event-pop-item { animation: none; opacity: 1; transform: none; }
  .event-reveal > .event-bouquet { opacity: 1; transition: none; }
  .gallery-item, .gallery-item:nth-child(even) { opacity: 1; transform: none; transition: none; }
  .gift-details { transition: none; }
  .closing-sentence, .closing-section.is-revealed .closing-sentence,
  .closing-sponsor-pop, .closing-section.is-revealed .closing-sponsor-pop { animation: none; opacity: 1; transform: none; }
  .closing-flower, .closing-flower-left, .closing-flower-right { opacity: 1; transform: none; transition: none; }
}