/* ============================================================
   my.rote.my.id — undangan pernikahan digital
   Satu stylesheet untuk cover, isi undangan, dan halaman hub.
   ============================================================ */

:root {
  --paper: #f7f4ed;
  --paper-2: #fffdf8;
  --ink: #1d1c19;
  --ink-70: rgba(29, 28, 25, .7);
  --ink-45: rgba(29, 28, 25, .45);
  --ink-12: rgba(29, 28, 25, .12);
  --accent: #6f7d63;
  --gold: #b99b62;
  --muted: #6b665c;
  --sans: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --col: 560px;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --dock-h: 68px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink);
  background: #ece7dd;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

/* ---------- kerangka kolom ---------- */
.inv {
  position: relative;
  max-width: var(--col);
  margin: 0 auto;
  background: var(--paper);
  overflow: hidden;
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}
@media (min-width: 700px) {
  .inv { box-shadow: 0 30px 80px rgba(29, 28, 25, .14); }
  body { padding: 0 16px; }
}

.sec {
  padding: 4.2rem 1.6rem;
}
.sec--hero { padding-top: 4.6rem; text-align: center; }
.sec--quote { padding-block: 3.2rem; }
.sec--gallery { padding-inline: 1.1rem; }
.sec--rsvp { padding-bottom: 5rem; }

.sec__head { text-align: center; margin-bottom: 2.4rem; }
.sec__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.85rem, 7.6vw, 2.5rem);
  line-height: 1.18;
  letter-spacing: -.01em;
  margin: .5rem 0 .9rem;
}
.sec__sub {
  margin: 0 auto;
  max-width: 27rem;
  color: #5c574d;
  font-size: .8rem;
  line-height: 1.75;
  font-weight: 300;
}
.eyebrow {
  margin: 0;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.eyebrow--sm { font-size: .55rem; letter-spacing: .24em; }

/* ---------- animasi masuk ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .95s var(--ease), transform .95s var(--ease);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ============================================================
   COVER
   ============================================================ */
.cover {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--paper);
  background-image:
    radial-gradient(130% 70% at 50% 0%, rgba(185, 155, 98, .14), transparent 62%),
    radial-gradient(90% 50% at 50% 100%, rgba(111, 125, 99, .09), transparent 65%);
  transition: transform 1.15s var(--ease), opacity .55s ease .45s, visibility 0s linear 0s;
}
.cover__grain {
  position: absolute;
  inset: 0;
  opacity: .035;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}
.cover__inner {
  position: relative;
  margin: auto;
  width: 100%;
  max-width: 400px;
  padding: 2.1rem 1.55rem calc(1.7rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
}
.cover__orn {
  width: 34px;
  margin: 0 auto .85rem;
  color: var(--gold);
  opacity: .85;
}
.cover__orn svg { width: 100%; height: auto; }
.cover__eyebrow {
  margin: 0 0 1.15rem;
  font-size: .54rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--accent);
}
.cover__frame {
  margin: 0 auto 1.25rem;
  width: min(68vw, 244px);
  aspect-ratio: 4 / 5;
  padding: 7px;
  border: 1px solid rgba(185, 155, 98, .45);
  border-radius: 150px 150px 12px 12px;
  background: #fff;
  box-shadow: 0 16px 40px rgba(29, 28, 25, .1);
}
.cover__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 20%;
  border-radius: 144px 144px 6px 6px;
}
.cover__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.6rem, 12.5vw, 3.4rem);
  line-height: .95;
  letter-spacing: -.015em;
  margin: 0;
  color: var(--ink);
}
.cover__names .amp {
  font-style: italic;
  font-size: .46em;
  color: var(--gold);
  padding: 0 .16em;
  vertical-align: .2em;
}
.cover__date {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.02rem;
  color: #55503f;
  margin: .55rem 0 1.35rem;
}
.guest {
  border: 1px dashed rgba(185, 155, 98, .6);
  background: rgba(185, 155, 98, .07);
  border-radius: 14px;
  padding: .78rem 1rem .85rem;
  margin: 0 auto 1.1rem;
  max-width: 21rem;
}
.guest__label {
  display: block;
  font-size: .5rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: .28rem;
}
.guest__name {
  display: block;
  font-family: var(--serif);
  font-weight: 500;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--ink);
}
.btn-open {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .92rem 1.6rem;
  border: 0;
  border-radius: 999px;
  background: var(--ink);
  color: var(--paper);
  font-size: .57rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 12px 26px rgba(29, 28, 25, .22);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background-color .3s;
}
.btn-open svg { width: 14px; height: 14px; }
.btn-open:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(29, 28, 25, .26); background: #2a2823; }
.cover__hint {
  margin: .95rem auto 0;
  max-width: 19rem;
  font-size: .57rem;
  line-height: 1.6;
  color: rgba(29, 28, 25, .5);
}

/* cover terbuka */
body.is-open .cover {
  transform: translateY(-101%);
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  transition: transform 1.15s var(--ease), opacity .5s ease .45s, visibility 0s linear 1.2s;
}

/* ---------- progress ---------- */
.progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0;
  z-index: 40;
  background: linear-gradient(90deg, var(--gold), var(--accent));
  transition: width .12s linear;
}

/* ============================================================
   HERO
   ============================================================ */
.orn {
  width: 46px;
  margin: 0 auto 1.1rem;
  color: var(--gold);
  opacity: .9;
}
.orn svg { width: 100%; height: auto; }
.hero__names {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2.9rem, 14vw, 4.2rem);
  line-height: 1;
  letter-spacing: -.01em;
  margin: .35rem 0 .55rem;
}
.hero__names em {
  font-style: italic;
  color: var(--gold);
  font-size: .62em;
  vertical-align: .1em;
}
.hero__date {
  font-family: var(--serif);
  font-size: 1.18rem;
  font-style: italic;
  letter-spacing: .01em;
  color: #4a463d;
  margin: .1rem 0 .2rem;
}
.hero__rule {
  width: 42px;
  height: 1px;
  background: var(--gold);
  opacity: .55;
  margin: 1.35rem auto 1.5rem;
}
.count {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  border-block: 1px solid var(--ink-12);
  padding: 1.15rem 0;
  margin: 0 auto 2rem;
  max-width: 24rem;
}
.count__cell b {
  display: block;
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.75rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  letter-spacing: .01em;
  line-height: 1;
}
.count__cell span {
  display: block;
  margin-top: .45rem;
  font-size: .53rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 28, 25, .58);
}
.count i { width: 1px; height: 26px; background: var(--ink-12); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .7rem 1.15rem;
  border: 1px solid rgba(111, 125, 99, .4);
  border-radius: 999px;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  font-weight: 600;
  transition: background-color .3s, border-color .3s;
}
.link-arrow:hover { background: rgba(111, 125, 99, .08); border-color: var(--accent); }
.link-arrow svg { width: 16px; height: 16px; transition: transform .35s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

/* ---------- foto penuh ---------- */
.bleed { margin: 0; position: relative; }
.bleed img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 40%;
  filter: saturate(.96);
}
.bleed__media { aspect-ratio: 4 / 5; }
.bleed figcaption {
  padding: .85rem 1.6rem 0;
  text-align: center;
  font-size: .55rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- kutipan ---------- */
blockquote {
  margin: 0 auto;
  max-width: 26rem;
  text-align: center;
}
blockquote p {
  font-family: var(--serif);
  font-size: 1.22rem;
  line-height: 1.55;
  font-style: italic;
  color: #2e2c26;
  margin: 0 0 .9rem;
}
blockquote cite {
  font-style: normal;
  font-size: .55rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- mempelai ---------- */
.person {
  padding-top: 1.6rem;
  border-top: 1px solid var(--ink-12);
  text-align: center;
}
.person__role {
  margin: 0 0 .55rem;
  font-size: .53rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.person__name {
  font-family: var(--serif);
  font-weight: 400;
  font-size: 1.62rem;
  line-height: 1.25;
  margin: 0 0 .55rem;
}
.person__parents {
  margin: 0 0 1rem;
  font-size: .79rem;
  line-height: 1.85;
  color: #56504a;
  font-weight: 300;
}
.person__order {
  font-size: .7rem;
  letter-spacing: .01em;
  color: rgba(29, 28, 25, .5);
}
.person__parents b { font-weight: 500; color: #3a362d; }
.person--first { border-top: 0; padding-top: 0; }
.chip-ig {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .36rem .8rem;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  font-size: .62rem;
  letter-spacing: .06em;
  color: var(--ink-70);
  text-decoration: none;
  transition: border-color .3s, color .3s;
}
.chip-ig svg { width: 13px; height: 13px; }
.chip-ig:hover { border-color: var(--accent); color: var(--accent); }

.amp-line {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin: 1.9rem 0;
  color: var(--gold);
}
.amp-line::before,
.amp-line::after { content: ""; width: 34px; height: 1px; background: rgba(185, 155, 98, .45); }
.amp-line span { font-family: var(--serif); font-style: italic; font-size: 1.45rem; line-height: 1; color: var(--gold); }

/* ---------- cerita ---------- */
.story { list-style: none; margin: 0; padding: 0; }
.story__item {
  position: relative;
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .2rem 1rem;
  padding-bottom: 1.9rem;
}
.story__item::before {
  content: "";
  position: absolute;
  left: 4.2rem;
  top: .55rem;
  bottom: 0;
  width: 1px;
  background: var(--ink-12);
}
.story__item:last-child::before { display: none; }
.story__year {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1rem;
  color: var(--gold);
  line-height: 1.4;
}
.story__body { position: relative; padding-left: 1.15rem; }
.story__body::before {
  content: "";
  position: absolute;
  left: -3px;
  top: .48rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.story__body h3 {
  margin: 0 0 .3rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.story__body p {
  margin: 0;
  font-size: .78rem;
  line-height: 1.75;
  font-weight: 300;
  color: var(--muted);
}

/* ---------- acara ---------- */
.event {
  background: var(--paper-2);
  border: 1px solid var(--ink-12);
  border-radius: 18px;
  padding: 1.5rem 1.35rem 1.25rem;
  text-align: center;
  margin-bottom: .9rem;
}
.event__name {
  margin: 0 0 .35rem;
  font-size: .55rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.event__date {
  margin: 0 0 .1rem;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 28, 25, .45);
}
.event__time {
  font-family: var(--serif);
  font-size: 1.42rem;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "lnum" 1, "tnum" 1;
  margin: 0 0 .9rem;
}
.event__rule {
  height: 1px;
  background: repeating-linear-gradient(90deg, var(--ink-12) 0 4px, transparent 4px 8px);
  margin: 0 auto .9rem;
  max-width: 8rem;
}
.event__place { margin: 0 0 .25rem; font-size: .86rem; font-weight: 600; }
.event__addr { margin: 0 0 1.1rem; font-size: .72rem; line-height: 1.65; color: var(--muted); font-weight: 300; }
.event__actions { display: flex; justify-content: center; }

/* ---------- tombol ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  padding: .78rem 1.25rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform .3s var(--ease), background-color .3s, color .3s, border-color .3s;
}
.btn svg { width: 15px; height: 15px; }
.btn--ghost { border-color: rgba(29, 28, 25, .22); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--accent); }
.btn--wide { display: flex; width: 100%; margin-top: .75rem; }
.btn--sm { padding: .6rem 1rem; font-size: .52rem; }

/* ---------- galeri ---------- */
.gal {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .5rem;
}
.gal__item {
  padding: 0;
  border: 0;
  background: #e7e2d8;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 1;
}
.gal__item:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
.gal__item:nth-child(4):last-child { grid-column: span 2; aspect-ratio: 16 / 10; }
.gal__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 22%;
  transition: transform .7s var(--ease), filter .5s;
  filter: saturate(.95);
}
.gal__item:hover img { transform: scale(1.05); filter: saturate(1.05); }

/* ---------- hadiah ---------- */
.bank {
  background: var(--paper-2);
  border: 1px solid var(--ink-12);
  border-radius: 16px;
  padding: 1.1rem 1.15rem;
  margin-bottom: .7rem;
}
.bank__top { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .55rem; }
.bank__name { font-size: .56rem; letter-spacing: .22em; text-transform: uppercase; font-weight: 600; color: var(--accent); }
.bank__holder { font-size: .62rem; color: var(--muted); }
.bank__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.bank__num {
  font-size: .95rem;
  font-variant-numeric: lining-nums tabular-nums;
  letter-spacing: .04em;
  font-weight: 500;
}
.btn-copy {
  border: 1px solid var(--ink-12);
  background: transparent;
  border-radius: 999px;
  padding: .38rem .8rem;
  font-size: .5rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .3s, color .3s, border-color .3s;
  white-space: nowrap;
}
.btn-copy:hover { border-color: var(--accent); color: var(--accent); }
.btn-copy.is-done { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-copy--text { margin-top: .5rem; }

.gift-address {
  margin-top: 1.2rem;
  padding: 1.1rem 1.15rem;
  border-radius: 16px;
  background: rgba(111, 125, 99, .07);
  border: 1px dashed rgba(111, 125, 99, .35);
}
.gift-address p { margin: 0; font-size: .74rem; line-height: 1.7; color: var(--muted); }

/* ---------- statistik + form ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-bottom: 1.6rem;
}
.stats div {
  text-align: center;
  border: 1px solid var(--ink-12);
  border-radius: 14px;
  padding: .8rem .3rem;
  background: var(--paper-2);
}
.stats b {
  display: block;
  font-family: var(--serif);
  font-size: 1.45rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.stats span {
  display: block;
  margin-top: .35rem;
  font-size: .46rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-45);
}

.form { display: grid; gap: 1.1rem; }
.field { display: block; }
.field > span {
  display: block;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(29, 28, 25, .55);
  margin-bottom: .15rem;
}
.field > span em { font-style: normal; text-transform: none; letter-spacing: 0; }
.field input,
.field textarea {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--ink-12);
  background: transparent;
  font-family: var(--sans);
  font-size: .88rem;
  color: var(--ink);
  padding: .6rem 0;
  border-radius: 0;
  outline: none;
  transition: border-color .3s;
}
.field textarea { resize: vertical; min-height: 4.6rem; line-height: 1.6; }
.field input:focus,
.field textarea:focus { border-color: var(--accent); }
.field input::placeholder,
.field textarea::placeholder { color: rgba(29, 28, 25, .38); }

.choice { border: 0; padding: 0; margin: 0; }
.choice legend {
  padding: 0;
  font-size: .56rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-45);
  margin-bottom: .5rem;
}
.choice__row { display: flex; gap: .4rem; flex-wrap: wrap; }
.choice__btn {
  flex: 1;
  min-width: 6rem;
  padding: .65rem .5rem;
  border-radius: 12px;
  border: 1px solid var(--ink-12);
  background: transparent;
  font-size: .62rem;
  letter-spacing: .04em;
  cursor: pointer;
  transition: background-color .25s, color .25s, border-color .25s;
}
.choice__btn.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

.field--pax {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.field--pax > span { margin: 0; }
.stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--ink-12);
  border-radius: 999px;
  overflow: hidden;
}
.stepper button {
  width: 2.2rem;
  height: 2.1rem;
  border: 0;
  background: transparent;
  font-size: 1rem;
  cursor: pointer;
  color: var(--ink-70);
}
.stepper button:hover { background: rgba(29, 28, 25, .05); }
.stepper output { min-width: 1.9rem; text-align: center; font-size: .82rem; font-variant-numeric: tabular-nums; }

.form__note {
  min-height: 1.2rem;
  margin: 0;
  font-size: .68rem;
  color: var(--accent);
}
.form__note.is-error { color: #a8452f; }

/* ---------- ucapan ---------- */
.wishes { margin-top: 2.2rem; display: grid; gap: 1.15rem; }
.wish { display: flex; gap: .8rem; }
.wish__ava {
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(111, 125, 99, .14);
  color: var(--accent);
  font-family: var(--serif);
  font-size: .95rem;
}
.wish__body { min-width: 0; }
.wish__top { margin: 0 0 .2rem; display: flex; align-items: center; gap: .45rem; flex-wrap: wrap; }
.wish__top strong { font-size: .76rem; font-weight: 600; }
.badge {
  font-size: .44rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: .16rem .45rem;
  border-radius: 999px;
  border: 1px solid var(--ink-12);
  color: var(--ink-45);
}
.badge.hadir { border-color: rgba(111, 125, 99, .45); color: var(--accent); }
.badge.tidak { border-color: rgba(168, 69, 47, .35); color: #a8452f; }
.wish__msg { margin: 0; font-size: .76rem; line-height: 1.7; font-weight: 300; color: #3b382f; }


/* ---------- dress code ---------- */
.palette {
  display: flex;
  justify-content: center;
  gap: .9rem;
  flex-wrap: wrap;
}
.swatch { text-align: center; width: 62px; }
.swatch i {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto .45rem;
  border-radius: 50%;
  border: 1px solid rgba(29, 28, 25, .22);
  box-shadow: inset 0 -6px 12px rgba(0, 0, 0, .08);
}
.swatch b {
  display: block;
  font-size: .5rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* ---------- kartu akses / QR ---------- */
.pass {
  background: #221f19;
  color: rgba(247, 244, 237, .9);
  border-radius: 18px;
  padding: 1.5rem 1.35rem 1.15rem;
  box-shadow: 0 18px 40px rgba(29, 28, 25, .18);
  overflow: hidden;
}
.pass__kicker {
  margin: 0 0 .5rem;
  font-size: .5rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--gold);
}
.pass__pair {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.75rem;
  line-height: 1.1;
  color: #f7f4ed;
}
.pass__date {
  margin: .3rem 0 0;
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, .5);
}
.pass__perf {
  height: 1px;
  margin: 1.15rem -1.35rem;
  background: repeating-linear-gradient(90deg, rgba(247, 244, 237, .28) 0 6px, transparent 6px 12px);
}
.pass__body {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.pass__info { flex: 1; min-width: 0; }
.pass__label {
  margin: .7rem 0 .1rem;
  font-size: .46rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, .45);
}
.pass__info .pass__label:first-child { margin-top: 0; }
.pass__guest {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.25;
  color: #f7f4ed;
  overflow-wrap: anywhere;
}
.pass__val {
  margin: 0;
  font-size: .68rem;
  line-height: 1.45;
  color: rgba(247, 244, 237, .78);
}
.pass__qrbox {
  flex: 0 0 96px;
  background: #fff;
  border-radius: 10px;
  padding: 7px;
}
.pass__qr { width: 100%; height: auto; display: block; }
.pass__code {
  margin: 1rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid rgba(247, 244, 237, .14);
  font-size: .55rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(247, 244, 237, .55);
  text-align: center;
}
.pass__code b { color: #f7f4ed; letter-spacing: .22em; font-weight: 600; }
.nowrap { white-space: nowrap; }
.pass__note {
  margin: .5rem 0 0;
  font-size: .52rem;
  letter-spacing: .06em;
  color: rgba(247, 244, 237, .45);
  text-align: center;
}

.cover__qr {
  display: inline-block;
  margin-top: .9rem;
  font-size: .55rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(111, 125, 99, .35);
  padding-bottom: 2px;
}

/* ---------- turut mengundang ---------- */
.inviters {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}
@media (min-width: 430px) {
  .inviters { grid-template-columns: 1fr 1fr; gap: 1.3rem; }
}
.inviters__label {
  margin: 0 0 .6rem;
  padding-bottom: .45rem;
  border-bottom: 1px solid var(--ink-12);
  font-size: .5rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 600;
}
.inviters ul { margin: 0; padding: 0; list-style: none; }
.inviters li {
  font-size: .74rem;
  line-height: 1.55;
  padding: .22rem 0;
  color: #3b382f;
  font-weight: 300;
}
.inviters__closing {
  margin: 1.7rem 0 0;
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink-12);
  font-size: .76rem;
  line-height: 1.85;
  color: var(--muted);
  text-align: center;
  font-weight: 300;
}

/* ---------- footer ---------- */
.foot {
  padding: 3.2rem 1.6rem 2.4rem;
  text-align: center;
  background: #221f19;
  color: rgba(247, 244, 237, .82);
}
.foot__thanks { margin: 0 0 1.1rem; font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(247, 244, 237, .55); }
.foot__pair { font-family: var(--serif); font-size: 2rem; line-height: 1; margin: 0 0 1.6rem; color: #f7f4ed; }
.foot__share { display: flex; justify-content: center; margin-bottom: 1.8rem; }
.foot .btn--ghost { border-color: rgba(247, 244, 237, .25); color: rgba(247, 244, 237, .8); }
.foot .btn--ghost:hover { border-color: var(--gold); color: var(--gold); }
.foot__credit { margin: 0; font-size: .5rem; letter-spacing: .16em; text-transform: uppercase; color: rgba(247, 244, 237, .38); }
.foot__credit a { color: rgba(247, 244, 237, .6); text-decoration: none; }

/* ---------- dock ---------- */
.dock {
  position: fixed;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 100%;
  max-width: var(--col);
  z-index: 45;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  background: rgba(247, 244, 237, .9);
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border-top: 1px solid var(--ink-12);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}
body.is-open .dock { opacity: 1; pointer-events: auto; transition-delay: .8s; }
.dock__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .22rem;
  padding: .6rem .2rem .55rem;
  text-decoration: none;
  color: rgba(29, 28, 25, .42);
  font-size: .46rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  transition: color .3s;
  position: relative;
}
.dock__item svg { width: 19px; height: 19px; }
.dock__item.is-on { color: var(--accent); font-weight: 600; }
.dock__item.is-on::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 22px;
  height: 2px;
  border-radius: 0 0 2px 2px;
  background: var(--accent);
}

/* ---------- musik ---------- */
.music {
  position: fixed;
  right: max(1rem, calc(50% - var(--col) / 2 + 1rem));
  bottom: calc(var(--dock-h) + 1rem + env(safe-area-inset-bottom, 0px));
  z-index: 46;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(29, 28, 25, .14);
  background: rgba(247, 244, 237, .92);
  backdrop-filter: blur(10px);
  color: var(--accent);
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(29, 28, 25, .12);
}
.music svg { width: 18px; height: 18px; }
.music.is-playing svg { animation: spin 5s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 70;
  background: rgba(16, 15, 12, .95);
  display: grid;
  place-items: center;
  padding: 1.2rem;
  animation: fade .3s ease;
}
@keyframes fade { from { opacity: 0; } }
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 88vh;
  border-radius: 10px;
  object-fit: contain;
}
.lightbox__close {
  position: absolute;
  top: .8rem;
  right: .9rem;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .25);
  background: transparent;
  color: #fff;
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}

/* ============================================================
   HUB (daftar undangan)
   ============================================================ */
.page-hub {
  background: #ece7dd;
  min-height: 100vh;
}
.hub {
  max-width: 780px;
  margin: 0 auto;
  padding: 3.5rem 1.4rem 4rem;
}
.hub__head { text-align: center; margin-bottom: 2.8rem; }
.hub__title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(2rem, 7vw, 2.9rem);
  line-height: 1.1;
  margin: .5rem 0 .8rem;
}
.hub__sub { margin: 0 auto; max-width: 26rem; font-size: .8rem; color: var(--muted); font-weight: 300; line-height: 1.7; }
.hub__list { display: grid; gap: .9rem; }
.card {
  display: grid;
  grid-template-columns: 88px 1fr auto;
  align-items: center;
  gap: 1rem;
  background: var(--paper-2);
  border: 1px solid var(--ink-12);
  border-radius: 16px;
  padding: .7rem;
  text-decoration: none;
  color: inherit;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover { transform: translateY(-2px); box-shadow: 0 14px 30px rgba(29, 28, 25, .08); border-color: rgba(111, 125, 99, .4); }
.card__img { width: 88px; height: 88px; border-radius: 12px; overflow: hidden; background: #e7e2d8; }
.card__img img { width: 100%; height: 100%; object-fit: cover; }
.card__pair { font-family: var(--serif); font-size: 1.3rem; line-height: 1.2; margin: 0 0 .2rem; }
.card__meta { margin: 0; font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }
.card__go {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--ink-12);
  color: var(--accent);
}
.card__go svg { width: 15px; height: 15px; }
.hub__foot { margin-top: 3rem; text-align: center; font-size: .55rem; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-45); }
.hub__foot a { color: var(--ink-70); text-decoration: none; }
.empty {
  text-align: center; padding: 2.5rem 1rem; border: 1px dashed var(--ink-12);
  border-radius: 16px; color: var(--muted); font-size: .8rem;
}

/* ---------- 404 ---------- */
.err {
  min-height: 100vh; display: grid; place-items: center; text-align: center;
  padding: 2rem; background: var(--paper);
}
.err h1 { font-family: var(--serif); font-weight: 300; font-size: 3rem; margin: 0 0 .6rem; }
.err p { color: var(--muted); font-size: .82rem; margin: 0 0 1.6rem; }

@media (max-width: 380px) {
  .count__cell b { font-size: 1.5rem; }
  .bank__num { font-size: .86rem; }
}


/* ============================================================
   LAPISAN GERAK & ORNAMEN
   ============================================================ */

/* butiran kertas halus di seluruh halaman */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: .022;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* kelopak */
.petals {
  position: fixed;
  inset: 0;
  z-index: 61;
  pointer-events: none;
  opacity: .6;
  transition: opacity .9s ease;
}
body.is-open .petals,
body.is-opening .petals {
  opacity: 0;
  visibility: hidden;
  transition: opacity .8s ease, visibility 0s linear .9s;
}

/* ---------- masuknya cover, berurutan ---------- */
@keyframes coverRise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}
@keyframes archIn {
  from { opacity: 0; transform: translateY(22px) scale(.965); }
  to   { opacity: 1; transform: none; }
}
@keyframes kenburns {
  from { transform: scale(1.02) translateY(0); }
  to   { transform: scale(1.08) translateY(-6px); }
}
@keyframes shimmer {
  0%, 100% { opacity: .5; }
  50%      { opacity: 1; }
}
.cover__orn { animation: coverRise .9s var(--ease) both, shimmer 5s ease-in-out 1.2s infinite; }
.cover__eyebrow { animation: coverRise .9s var(--ease) .12s both; }
.cover__frame { animation: archIn 1.15s var(--ease) .22s both; }
.cover__frame img { animation: kenburns 22s ease-in-out 1.4s infinite alternate; }
.cover__names { animation: coverRise 1s var(--ease) .38s both; }
.cover__date { animation: coverRise .9s var(--ease) .5s both; }
.guest { animation: coverRise .9s var(--ease) .62s both; }
.btn-open { animation: coverRise .9s var(--ease) .74s both; }
.cover__qr, .cover__hint { animation: coverRise .9s var(--ease) .86s both; }

/* ---------- membuka cover: seperti melangkah menembus lengkungan ---------- */
body.is-opening .cover { transform: scale(1.05); opacity: 0; transition: transform 1.1s var(--ease), opacity .9s ease .15s; }
body.is-opening .cover__frame { transform: scale(1.28); opacity: .0; transition: transform 1.05s var(--ease), opacity .8s ease .1s; }
body.is-opening .cover__names,
body.is-opening .cover__date,
body.is-opening .guest,
body.is-opening .btn-open,
body.is-opening .cover__qr,
body.is-opening .cover__hint,
body.is-opening .cover__eyebrow,
body.is-opening .cover__orn { opacity: 0; transform: translateY(-10px); transition: opacity .5s ease, transform .6s var(--ease); }

/* ---------- judul dipecah per kata ---------- */
[data-split] .w { display: inline-block; }
[data-split] .w > i {
  display: inline-block;
  font-style: inherit;
  transform: translateY(20px);
  opacity: 0;
  transition: transform .95s var(--ease), opacity .8s ease;
}
[data-split].split-in .w > i { transform: none; opacity: 1; }

/* ---------- garis emas menggambar ---------- */
[data-draw] {
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 1.4s var(--ease);
  opacity: .9;
}
[data-draw].drawn { transform: scaleX(1); }
[data-draw="path"] { transform: none; }
[data-draw="path"] path {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 2s var(--ease);
}
[data-draw="path"].drawn path { stroke-dashoffset: 0; }

/* ---------- foto dengan parallax ---------- */
.bleed__media {
  overflow: hidden;
  position: relative;
  background: #e7e2d8;
}
.bleed__media img {
  width: 100%;
  height: 100%;
  min-height: 100%;
  object-fit: cover;
  object-position: 50% 28%;
  transform: scale(1.16);
  will-change: transform;
}

/* bingkai tipis di dalam foto */
.bleed__media::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: 2px;
  pointer-events: none;
}

/* ---------- angka countdown flip ---------- */
@keyframes digitFlip {
  0%   { transform: translateY(-5px); opacity: .45; }
  100% { transform: none; opacity: 1; }
}
.count__cell b.flip { animation: digitFlip .34s var(--ease); }

/* ---------- monogram ---------- */
.mono {
  width: 58px;
  margin: 0 auto 1rem;
  color: var(--gold);
  opacity: .9;
}
.mono svg { width: 100%; height: auto; }

/* ---------- dock: indikator bergeser ---------- */
.dock { position: fixed; }
.dock__pill {
  position: absolute;
  top: 0;
  left: 0;
  width: 20%;
  height: 2px;
  background: var(--accent);
  border-radius: 0 0 2px 2px;
  transition: transform .45s var(--ease);
  pointer-events: none;
}
.dock__item.is-on::before { display: none; }

/* ---------- musik: denyut ---------- */
@keyframes pulseRing {
  0%   { box-shadow: 0 0 0 0 rgba(138, 111, 61, .35); }
  70%  { box-shadow: 0 0 0 12px rgba(138, 111, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(138, 111, 61, 0); }
}
.music.is-playing { animation: pulseRing 2.6s ease-out infinite; }

/* ---------- ledakan kelopak saat RSVP ---------- */
.burst {
  position: fixed;
  z-index: 80;
  width: 0;
  height: 0;
  pointer-events: none;
}
.burst.is-on i {
  position: absolute;
  width: 7px;
  height: 10px;
  border-radius: 60% 60% 45% 45%;
  animation: burstOut .95s cubic-bezier(.2, .7, .3, 1) forwards;
  opacity: 0;
}
@keyframes burstOut {
  0%   { transform: translate(0, 0) rotate(0); opacity: 1; }
  100% { transform: translate(var(--x), var(--y)) rotate(var(--r)); opacity: 0; }
}

/* ---------- galeri: zoom dari titik sentuh ---------- */
.lightbox img { transform: scale(.94); opacity: 0; transition: transform .38s var(--ease), opacity .3s ease; }
.lightbox.is-shown img { transform: none; opacity: 1; }
.gal__item { transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.gal__item:active { transform: scale(.985); }

/* ---------- kartu akses: kilau tepi ---------- */
.pass { position: relative; }
.pass::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(185, 155, 98, .35);
  border-radius: 13px;
  pointer-events: none;
}

/* ---------- hormati preferensi gerak minimal ---------- */
@media (prefers-reduced-motion: reduce) {
  .cover__orn, .cover__eyebrow, .cover__frame, .cover__frame img, .cover__names,
  .cover__date, .guest, .btn-open, .cover__qr, .cover__hint { animation: none !important; }
  [data-split] .w > i { transform: none; opacity: 1; transition: none; }
  [data-draw] { transform: none; }
  [data-draw="path"] path { stroke-dashoffset: 0; }
  .petals { display: none; }
  .bleed__media img { transform: none; }
}