/* Undangan pernikahan · romantis botanikal. Arah & alasan: DESIGN.md */

:root {
  --paper: #FAF5EF;
  --blush: #F3E7DF;
  --blush-2: #EFE3DA;
  --ink: #3A2E2C;
  --ink-soft: #6B5A55;
  --sage: #52654C;
  --sage-deep: #4F6249;
  --on-deep: #FAF5EF;
  --on-deep-soft: #E9DCCF;
  --rose-line: #C99A9A;
  --accent: #8E3B46;
  --accent-press: #7A303A;
  --field-line: #8A7570;

  --f-script: "Pinyon Script", "Snell Roundhand", cursive;
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-body: "Jost", "Avenir Next", "Segoe UI", sans-serif;

  --ease: cubic-bezier(.2, .7, .15, 1);
  --ease-door: cubic-bezier(.75, 0, .2, 1);

  --gutter: max(1.25rem, calc((100% - 37.5rem) / 2));
  --nav-h: 3.75rem;
  --aside-w: clamp(22.5rem, 40vw, 35rem);

  /* serat kertas katun: metafora undangan cetak */
  --grain: 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='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .22 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
/* atribut hidden selalu menang atas display: flex/grid di komponen */
[hidden] { display: none !important; }

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

body {
  margin: 0;
  background-color: var(--paper);
  background-image: var(--grain);
  color: var(--ink);
  font: 400 1rem/1.7 var(--f-body);
  overflow-x: hidden;
}
body.is-locked { overflow: hidden; }

img { max-width: 100%; display: block; }
p, h1, h2, h3 { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }

.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;
}

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.script { font-family: var(--f-script); font-weight: 400; line-height: 1.15; }
.amp { font-family: var(--f-display); font-style: italic; color: var(--accent); }

/* Placeholder foto */
.ph {
  display: grid; place-items: center;
  width: 100%; height: 100%;
  background: var(--blush-2);
  box-shadow: inset 0 0 0 1px rgba(201, 154, 154, .55);
  color: var(--ink-soft);
  font: 500 .75rem/1.4 var(--f-body);
  letter-spacing: .02em;
  text-align: center;
  padding: 1rem;
}
.ph--arch { border-radius: 999px 999px 4px 4px; }
/* foto asli menutupi placeholder; bila gagal dimuat, app.js menyembunyikannya
   sehingga label placeholder tampil kembali */
.ph { position: relative; overflow: hidden; }
.photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--pos, 50% 50%);
  /* zoom dari titik fokus yang sama; nilainya diatur di data.js / alat atur foto */
  transform: scale(var(--zoom, 1));
  transform-origin: var(--pos, 50% 50%);
}
.photo--contain { object-fit: contain; background: var(--ink); transform: none; }

/* Ranting: motif identitas */
.sprig { width: 9rem; margin-inline: auto; color: var(--rose-line); }
.sprig--small { width: 6.5rem; margin-block: .75rem; }
.sprig--light { color: var(--on-deep-soft); }
.sprig-svg { display: block; width: 100%; height: auto; overflow: visible; }
.sprig-svg path, .story__vine path {
  fill: none; stroke: currentColor; stroke-width: 1.2;
  stroke-linecap: round; stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: 0 1.5rem;
  border: 1px solid transparent; border-radius: 2px;
  font: 500 .95rem/1.2 var(--f-body); letter-spacing: .02em;
  text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease), border-color .3s var(--ease);
}
.btn--small { min-height: 2.75rem; padding: 0 1rem; font-size: .875rem; }
.btn--primary { background: var(--accent); color: var(--on-deep); }
.btn--primary:hover { background: var(--accent-press); }
.btn--primary[disabled] { opacity: .75; cursor: progress; }
.btn--line { border-color: var(--sage); color: var(--sage); background: transparent; }
.btn--line:hover, .btn--line:active { background: var(--sage); color: var(--on-deep); }
.btn--on-deep { border-color: var(--on-deep); color: var(--on-deep); background: transparent; }
.btn--on-deep:hover, .btn--on-deep:active { background: var(--on-deep); color: var(--sage-deep); }
.btn--on-deep:focus-visible { outline-color: var(--on-deep); }

/* Cover: amplop surat undangan yang dibuka */
.cover {
  position: fixed; inset: 0; z-index: 50;
  overflow-y: auto; overscroll-behavior: contain;
  background-color: var(--blush);
  background-image: var(--grain);
  transition: opacity .9s var(--ease);
}
.cover__content {
  position: relative;
  min-height: 100dvh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* jarak ikut tinggi layar: HP 16:9 yang pendek tetap muat tanpa digulir */
  gap: clamp(.55rem, 2.2dvh, 1.25rem);
  padding: max(clamp(1rem, 4dvh, 2rem), env(safe-area-inset-top)) 1.25rem max(clamp(1rem, 3dvh, 1.5rem), env(safe-area-inset-bottom));
  text-align: center;
}
.cover__kicker, .cover__guest, .mock-note { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.cover__kicker { font: italic 500 clamp(1rem, 2.6dvh, 1.3rem)/1.3 var(--f-display); color: var(--sage); }
.cover__guest { display: grid; gap: .1rem; }
.cover__to { font-size: .85rem; color: var(--ink-soft); }
.cover__guest-name { font: 600 clamp(1.15rem, 3.2dvh, 1.5rem)/1.3 var(--f-display); overflow-wrap: anywhere; }
.cover__date { margin-top: .35rem; font: 500 clamp(.95rem, 2.4dvh, 1.15rem)/1.3 var(--f-display); color: var(--sage); }
.cover__hint { margin-top: clamp(.2rem, 1dvh, .6rem); font-size: .8rem; color: var(--ink-soft); }

/* amplop: belakang, surat, kantong depan, tutup. Tutup berputar 3D saat dibuka */
.env {
  position: relative;
  /* lebar dibatasi tinggi layar (44dvh) agar amplop + nama tamu muat di layar 16:9 maupun 20:9 */
  width: min(88vw, 26rem, 44dvh);
  aspect-ratio: 4 / 3;
  margin-top: clamp(.75rem, 6dvh, 4rem);
  perspective: 1400px;
  /* isi surat dan segel diskalakan terhadap lebar amplop (cqi) */
  container-type: inline-size;
}
.env__back, .env__letter, .env__pocket, .env__flap { position: absolute; }
.env__back {
  inset: 0; border-radius: 3px;
  background: #E4CFC4;
  transition: transform 1s var(--ease), opacity .8s var(--ease);
}
.env__letter {
  left: 5%; right: 5%; top: 5%; bottom: 4%; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .3rem; gap: 1.4cqi;
  padding: .75rem 1rem; padding: 3cqi 4cqi;
  background: var(--paper);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px rgba(201, 154, 154, .45);
  transition: transform 1.2s var(--ease);
}
.letter__sprig { width: 5.5rem; width: 24cqi; }
.letter__sprig--flip { transform: scale(-1, -1); }
.letter__intro { font: italic 500 .95rem/1.3 var(--f-display); color: var(--ink-soft); }
.letter__names { font-size: clamp(1.6rem, 7vw, 2.1rem); font-size: clamp(1.1rem, 9cqi, 2.6rem); line-height: 1.15; }
.letter__names .amp { font-size: .75em; }
.letter__date { font: 500 1rem/1.3 var(--f-display); font-size: clamp(.75rem, 4.2cqi, 1.2rem); color: var(--sage); }

/* tagline InFiNity: potongan kata ditandai warna aksen, bukan kapital acak */
.tagline { font: italic 500 1rem/1.4 var(--f-display); color: var(--ink-soft); }
.tagline__mark { font-style: normal; font-weight: 600; color: var(--accent); }
.letter__tagline { font-size: .95rem; font-size: clamp(.68rem, 3.7cqi, 1.1rem); }

.env__pocket {
  inset: 0; z-index: 3; border-radius: 3px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 0 1rem 8%;
  background-color: #EEDFD6;
  background-image: var(--grain);
  clip-path: polygon(0 0, 50% 52%, 100% 0, 100% 100%, 0 100%);
  transition: transform 1s var(--ease), opacity .8s var(--ease);
}
.env__folds { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--rose-line); }
.env__folds path { fill: none; stroke: currentColor; stroke-width: 1; vector-effect: non-scaling-stroke; }
.env__names { position: relative; font-weight: 400; font-size: clamp(1.5rem, 6.5vw, 2rem); font-size: clamp(1.1rem, 8.5cqi, 2.4rem); line-height: 1.1; }
.env__names .amp { font-size: .75em; }
.env__flap {
  left: 0; right: 0; top: 0; height: 56%; z-index: 4;
  background: linear-gradient(180deg, #E8D6CC 0%, #DCC3B7 100%);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transition: transform .9s var(--ease-door), z-index 0s linear .45s, opacity .8s var(--ease);
}

/* segel lilin: satu-satunya elemen timbul di cover */
.seal {
  position: absolute; z-index: 5; left: 50%; top: 56%;
  display: grid; place-items: center;
  width: 4.75rem; height: 4.75rem;
  width: clamp(3.5rem, 20cqi, 5.75rem); height: clamp(3.5rem, 20cqi, 5.75rem);
  padding: 0; border: 0; border-radius: 50%;
  background: none; cursor: pointer;
  color: var(--on-deep);
  transform: translate(-50%, -50%);
  transition: transform .5s var(--ease), opacity .5s var(--ease);
}
.seal__wax {
  position: absolute; inset: 0;
  border-radius: 47% 53% 50% 50% / 52% 48% 52% 48%;
  background: radial-gradient(circle at 35% 30%, #A54A56 0%, var(--accent) 55%, #6E2A33 100%);
  box-shadow: 0 6px 14px -6px rgba(110, 42, 51, .7), inset 0 0 0 4px rgba(0, 0, 0, .08), inset 0 0 0 5px rgba(255, 255, 255, .12);
  transition: transform .4s var(--ease);
}
.seal__label { position: relative; font: 600 1.05rem/1 var(--f-display); font-size: clamp(.85rem, 4.4cqi, 1.3rem); letter-spacing: .02em; }
.seal:hover .seal__wax { transform: rotate(-6deg) scale(1.05); }
.seal:active .seal__wax { transform: scale(.95); }

.locked-note { max-width: 24rem; font: italic 500 1.25rem/1.5 var(--f-display); color: var(--ink-soft); text-wrap: balance; }
.mock-note { max-width: 22rem; font-size: .75rem; line-height: 1.5; color: var(--ink-soft); }
.mock-note code { font-size: .95em; }

/* urutan membuka (kelas ditambahkan bertahap oleh app.js):
   s1 segel pecah, s2 tutup terbuka, s3 surat naik, s4 amplop turun, s5 cover memudar */
.cover.is-s1 { pointer-events: none; }
.cover.is-s1 .seal { opacity: 0; transform: translate(-50%, -50%) scale(.55) rotate(-18deg); }
.cover.is-s1 .cover__guest,
.cover.is-s1 .cover__kicker,
.cover.is-s1 .mock-note { opacity: 0; transform: translateY(8px); }
.cover.is-s2 .env__flap { transform: rotateX(180deg); z-index: 1; }
.cover.is-s3 .env__letter { transform: translateY(-62%); }
.cover.is-s4 .env__back,
.cover.is-s4 .env__pocket { transform: translateY(40%); opacity: 0; }
.cover.is-s4 .env__flap { transform: translateY(40%) rotateX(180deg); opacity: 0; }
.cover.is-s4 .env__letter { transform: translateY(-18%) scale(1.12); }
.cover.is-s5 { opacity: 0; }
.cover.is-gone { display: none; }

/* Layar lebih lebar daripada tinggi (HP mendatar, desktop): amplop kiri, nama tamu kanan.
   Lebar amplop maks 72dvh agar surat yang naik tidak terpotong. */
@media (min-aspect-ratio: 5/4) and (min-width: 36em) {
  .cover__content {
    display: grid;
    grid-template-columns: auto minmax(0, 24rem);
    grid-template-rows: 1fr auto 1fr;
    grid-template-areas: "env kicker" "env guest" "env note";
    align-items: center; justify-content: center;
    column-gap: clamp(2rem, 6vw, 6rem); row-gap: clamp(.5rem, 2dvh, 1rem);
    text-align: left;
  }
  .cover__kicker { grid-area: kicker; align-self: end; font-size: clamp(1.1rem, 1.7vw, 1.7rem); }
  .env { grid-area: env; width: min(46vw, 36rem, 72dvh); margin: 0; }
  .cover__guest { grid-area: guest; justify-items: start; }
  .cover__to { font-size: clamp(.85rem, 1vw, 1rem); }
  .cover__guest-name { font-size: clamp(1.3rem, 2.4vw, 2.2rem); }
  .cover__date { font-size: clamp(1rem, 1.4vw, 1.3rem); }
  .mock-note { grid-area: note; align-self: start; }
}
/* desktop: kolom teks ikut membesar supaya seimbang dengan amplop yang lebar */
@media (min-aspect-ratio: 5/4) and (min-width: 64em) {
  .cover__content { grid-template-columns: auto minmax(0, 28rem); }
  .cover__kicker { font-size: clamp(1.4rem, 1.9vw, 2.1rem); }
  .cover__to { font-size: 1.05rem; }
  .cover__guest-name { font-size: clamp(2rem, 2.9vw, 3rem); }
  .cover__date { font-size: clamp(1.2rem, 1.5vw, 1.5rem); }
  .cover__hint { font-size: .95rem; }
}

/* Panel kiri, hanya tampil di desktop */
.aside { display: none; }

.main {
  transition: transform 1.6s var(--ease) .3s;
}
body.is-locked .main { transform: scale(1.035); }

section { padding: clamp(3.5rem, 12vw, 6rem) var(--gutter); scroll-margin-top: 0; }

.section-title {
  font: italic 500 clamp(1.7rem, 6.5vw, 2.3rem)/1.2 var(--f-display);
  text-align: center;
  color: var(--ink);
  text-wrap: balance;
}
.section-title--left { text-align: left; }
.lead {
  max-width: 32rem; margin: 1rem auto 0;
  text-align: center; color: var(--ink-soft);
  text-wrap: pretty;
}

.hero { padding-top: clamp(2.5rem, 10vw, 4.5rem); text-align: center; }
.hero__arch {
  width: min(78%, 22rem); margin-inline: auto;
  aspect-ratio: 3 / 4;
  border-radius: 999px 999px 4px 4px;
  overflow: hidden;
}
.hero__photo { height: 116%; margin-top: -8%; will-change: transform; }
.hero__names {
  margin-top: 1.5rem;
  font-weight: 400;
  font-size: clamp(2.6rem, 11vw, 4rem);
  line-height: 1.15;
}
.hero__names:focus { outline: none; }
.hero__names:focus-visible { outline: 2px solid var(--accent); }
.hero__names .amp { font-size: .7em; margin-inline: .15em; }
.hero__date { margin-top: .5rem; font: 500 1.15rem/1.4 var(--f-display); color: var(--sage); }

/* Mempelai: komposisi berselang, bukan kartu kembar */
.couple .section-title { margin-top: 1.25rem; font-size: clamp(1.4rem, 5.2vw, 1.8rem); }
.couple__grid { margin-top: 2.75rem; }
.person__arch {
  width: 64%; aspect-ratio: 3 / 4;
  border-radius: 999px 999px 4px 4px; overflow: hidden;
}
.person__text { margin-top: 1rem; }
.person__name { font-size: clamp(2rem, 8.5vw, 2.6rem); }
.person__parents { margin-top: .4rem; color: var(--ink-soft); font-size: .95rem; }
.person--groom { text-align: right; }
.person--groom .person__arch { margin-left: auto; }
.couple__amp {
  font: italic 400 clamp(4.5rem, 20vw, 6.5rem)/1 var(--f-display);
  color: var(--accent);
  text-align: center;
  margin-block: -1.5rem -.5rem;
}

/* Hitung mundur: pita sage gelap */
.countdown {
  background: var(--sage-deep); color: var(--on-deep);
  text-align: center;
}
.countdown :focus-visible { outline-color: var(--on-deep); }
.countdown__title { font: italic 500 clamp(1.6rem, 6vw, 2.1rem)/1.2 var(--f-display); }
.countdown__clock {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 26rem; margin: 1.75rem auto 2rem;
}
.unit { display: flex; flex-direction: column; align-items: center; padding-inline: .25rem; }
.unit + .unit { border-left: 1px solid rgba(233, 220, 207, .35); }
.unit__n {
  font: 500 clamp(2.2rem, 10vw, 3.2rem)/1 var(--f-display);
  font-variant-numeric: lining-nums tabular-nums;
}
.unit__l { margin-top: .4rem; font-size: .8rem; color: var(--on-deep-soft); }
.countdown__status {
  max-width: 24rem; margin: 1.5rem auto 2rem;
  font: italic 500 1.35rem/1.4 var(--f-display);
}

/* Ornamen latar hijau: ranting di sudut, bingkai garis ganda kartu undangan, serat kertas.
   Siluet daun lebih gelap dari latar agar teks krem di atasnya justru makin kontras. */
.countdown { position: relative; overflow: clip; isolation: isolate; background-image: var(--grain); container-type: inline-size; }
.countdown::before, .countdown::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border: 1px solid rgba(233, 220, 207, .3); }
.countdown::before { inset: .75rem; }
.countdown::after { inset: 1.1rem; border-color: rgba(233, 220, 207, .16); }
.branch { position: absolute; z-index: -1; width: clamp(8rem, 14vw, 15rem); color: var(--on-deep-soft); pointer-events: none; }
.branch-svg { display: block; width: 100%; height: auto; overflow: visible; }
.branch__fill path { fill: #44573F; }
.branch__buds path { fill: var(--rose-line); opacity: .7; }
.branch__lines path {
  fill: none; stroke: currentColor; stroke-width: 1; opacity: .5;
  stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke;
}
/* pangkal ranting di sudut; ranting kiri atas dibalik vertikal, kanan bawah dibalik horizontal */
.branch--tl { top: -.5rem; left: -1.75rem; transform: scaleY(-1); }
.branch--br { bottom: -.5rem; right: -1.75rem; transform: scaleX(-1); }
/* HP: ranting lebih kecil dan lebih ke sudut agar tidak menyentuh angka dan tombol */
@media (max-width: 39.99em) {
  .countdown .branch { width: 6rem; }
  .countdown .branch--tl { top: -1.1rem; left: -2.4rem; }
  .countdown .branch--br { bottom: -1.1rem; right: -2.4rem; }
}
.countdown__title + .sprig { margin-top: .6rem; }
/* ukuran ranting mengikuti lebar pita (bukan layar): di desktop pita hanya kolom kanan */
@media (min-width: 40em) { .countdown .branch { width: clamp(8rem, 22cqi, 15rem); } }

/* Acara: akad ringkas, resepsi berbingkai */
.event--akad {
  display: grid; grid-template-columns: minmax(6.5rem, 34%) 1fr; gap: 1.25rem;
  margin-top: 2rem; padding-block: 1.5rem;
  border-top: 1px solid rgba(201, 154, 154, .6);
  border-bottom: 1px solid rgba(201, 154, 154, .6);
}
.event__label {
  font: 600 1.05rem/1.3 var(--f-display);
  font-variant: small-caps; letter-spacing: .05em;
  color: var(--sage);
}
.event__time { margin-top: .25rem; font: 500 1.15rem/1.35 var(--f-display); }
.event__time--big { font-size: clamp(1.7rem, 7vw, 2.2rem); margin-top: .35rem; }
.event__day { font: 500 1.05rem/1.4 var(--f-display); }
.event__place { margin-top: .35rem; font-weight: 500; }
.event__addr { color: var(--ink-soft); font-size: .92rem; }

.event--resepsi { margin-top: 2.5rem; }
.event__frame {
  position: relative;
  padding: 2.25rem 1.5rem 2rem;
  background: var(--blush);
  border: 1px solid rgba(201, 154, 154, .8);
  border-radius: 2px;
  text-align: center;
}
/* garis ganda khas kartu undangan */
.event__frame::before {
  content: ""; position: absolute; inset: 6px;
  border: 1px solid rgba(201, 154, 154, .45);
  pointer-events: none;
}
.event__frame .btn { margin-top: 1.25rem; position: relative; }

/* Kisah: batang sulur sebagai linimasa */
.story__track { position: relative; margin-top: 2.25rem; padding-left: 3rem; }
.story__vine {
  position: absolute; left: .25rem; top: 0;
  width: 2.5rem; height: 100%;
  color: var(--sage);
}
.story__vine path { stroke-width: 1.4; stroke-dasharray: 1; stroke-dashoffset: var(--vine, 1); }
.story__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2.5rem; }
.moment { position: relative; }
.moment::before {
  content: ""; position: absolute; left: -2.15rem; top: .55rem;
  width: .7rem; height: .7rem; border-radius: 50%;
  background: var(--paper); border: 1px solid var(--rose-line);
}
.moment__year { font: italic 500 1.05rem/1.3 var(--f-display); color: var(--sage); }
.moment__title { font: 600 1.35rem/1.3 var(--f-display); margin-top: .1rem; }
.moment__text { margin-top: .35rem; color: var(--ink-soft); }

.gallery__grid {
  list-style: none; margin: 1.75rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 9rem; grid-auto-flow: dense; gap: .5rem;
}
.gallery__grid li { min-width: 0; }
.gallery__grid li:has(.shot--tall) { grid-row: span 2; }
.gallery__grid li:has(.shot--wide) { grid-column: span 2; }
.shot {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; border-radius: 2px;
  background: none; cursor: zoom-in; overflow: hidden;
}
.shot .ph { transition: transform .8s var(--ease); }
.shot:hover .ph, .shot:focus-visible .ph { transform: scale(1.04); }

.form {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem;
  background: var(--blush);
  border: 1px solid rgba(201, 154, 154, .6);
  border-radius: 2px;
  display: grid; gap: 1.25rem;
}
.field { display: grid; gap: .4rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.field label, .field legend { font-weight: 500; font-size: .92rem; padding: 0; }
.field legend { margin-bottom: .4rem; }
.field input[type="text"], .field select, .field textarea {
  width: 100%; min-height: 3rem;
  padding: .7rem .85rem;
  background: var(--paper);
  border: 1px solid var(--field-line); border-radius: 2px;
  font-size: 1rem; /* 16px: mencegah zoom otomatis di iOS */
}
.field textarea { resize: vertical; min-height: 7rem; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-soft); opacity: 1; }
.field [aria-invalid="true"] { border-color: var(--accent); border-width: 2px; }
.field__error { font-size: .85rem; color: var(--accent); font-weight: 500; }

.choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.choice { position: relative; flex: 1 1 6.5rem; }
.choice input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.choice span {
  display: flex; align-items: center; justify-content: center;
  min-height: 2.9rem; padding: 0 .75rem;
  border: 1px solid var(--field-line); border-radius: 2px;
  background: var(--paper);
  font-size: .92rem; text-align: center;
  transition: background-color .25s var(--ease), color .25s var(--ease);
}
.choice input:checked + span { background: var(--sage-deep); border-color: var(--sage-deep); color: var(--on-deep); }
.choice input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 3px; }
#field-guests[hidden] { display: none; }

.form .btn--primary { width: 100%; }
.form__status { min-height: 1.5em; font-size: .92rem; text-align: center; }
.form__status[data-kind="error"] { color: var(--accent); font-weight: 500; }
.form__status[data-kind="ok"] { color: var(--sage); font-weight: 500; }
.form__note { font-size: .78rem; color: var(--ink-soft); text-align: center; margin-top: -.75rem; }

.wishes { margin-top: 2.5rem; }
.wishes__title { font: 600 1.4rem/1.3 var(--f-display); }
.wishes__count { font-weight: 400; color: var(--ink-soft); font-size: 1rem; }
.wishes__state { color: var(--ink-soft); font-size: .95rem; }
.wishes__state:empty { display: none; }
.wishes__state { margin-top: 1rem; padding: 1.25rem; border: 1px dashed var(--rose-line); border-radius: 2px; text-align: center; }
.wishes__list {
  list-style: none; margin: 1rem 0 0; padding: 0;
  max-height: 26rem; overflow-y: auto; overscroll-behavior: contain;
}
.wishes__list:empty { display: none; }
.wish {
  display: grid; grid-template-columns: 2.5rem 1fr; gap: .85rem;
  padding-block: 1rem;
  border-bottom: 1px solid rgba(201, 154, 154, .45);
  animation: wish-in .7s var(--ease) both;
}
.wish__initial {
  display: grid; place-items: center;
  width: 2.5rem; height: 2.5rem; border-radius: 50%;
  border: 1px solid var(--sage); color: var(--sage);
  font: 600 1.1rem/1 var(--f-display);
}
.wish__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem .6rem; }
.wish__name { font-weight: 500; overflow-wrap: anywhere; }
.wish__meta { font-size: .8rem; color: var(--ink-soft); }
.wish__text { margin-top: .25rem; overflow-wrap: anywhere; white-space: pre-line; }
@keyframes wish-in { from { opacity: 0; transform: translateY(-8px); } }

/* Wedding gift: kartu berbentuk amplop */
.envelope {
  position: relative;
  margin-top: 2.25rem;
  padding: 4.5rem 1.25rem 1.5rem;
  background: var(--blush);
  border: 1px solid rgba(201, 154, 154, .6);
  border-radius: 2px;
  display: grid; gap: 1.5rem;
  overflow: hidden;
}
.envelope__flap {
  position: absolute; left: 0; right: 0; top: 0; height: 3.5rem;
  background: var(--blush-2);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.envelope__flap::after {
  content: ""; position: absolute; left: 50%; top: 100%;
  width: .9rem; height: .9rem; border-radius: 50%;
  background: var(--accent); transform: translate(-50%, -140%);
}
.account { text-align: center; }
.account + .account { padding-top: 1.5rem; border-top: 1px solid rgba(201, 154, 154, .5); }
.account__bank { font: 600 1.05rem/1.3 var(--f-display); font-variant: small-caps; letter-spacing: .05em; color: var(--sage); }
.account__no { margin-top: .2rem; font: 500 1.5rem/1.3 var(--f-display); letter-spacing: .04em; font-variant-numeric: lining-nums; overflow-wrap: anywhere; }
.account__name { color: var(--ink-soft); font-size: .92rem; }
.account .btn { margin-top: .85rem; }

/* Penutup: foto diwarnai sage tua (multiply), blok gelap kedua setelah hitung mundur */
.closing {
  position: relative; overflow: clip;
  isolation: isolate; /* foto multiply tercampur dengan latar sage di section ini */
  text-align: center;
  padding-bottom: calc(clamp(4rem, 14vw, 7rem) + var(--nav-h) + env(safe-area-inset-bottom));
  background: var(--sage-deep); color: var(--on-deep);
}
.closing :focus-visible { outline-color: var(--on-deep); }
.closing .lead, .closing .closing__family, .closing .hashtag__lead, .closing .tagline { color: var(--on-deep-soft); }
.closing .amp { color: var(--on-deep-soft); }
.closing .sprig { color: var(--on-deep-soft); }
.closing .tagline__mark { color: #F8DCD8; }
.closing .hashtag { border-top-color: rgba(233, 220, 207, .35); }

/* foto latar samar: bergerak pelan saat digulir, tepinya memudar ke kertas */
.story { position: relative; overflow: clip; }
.bgphoto {
  position: absolute; inset: -10% 0; z-index: -1;
  pointer-events: none;
  will-change: transform;
}
.bgphoto--story {
  opacity: .14;
  filter: grayscale(1) contrast(.6) brightness(1.15);
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
  mask-image: linear-gradient(transparent, #000 18%, #000 82%, transparent);
}
.bgphoto--closing { opacity: .5; filter: grayscale(1) contrast(.85); mix-blend-mode: multiply; }

/* ranting besar di sudut: motif identitas sebagai tekstur latar */
.couple, .events, .rsvp { position: relative; overflow: clip; }
.corner {
  position: absolute; z-index: -1;
  width: clamp(11rem, 46vw, 17rem); margin: 0;
  color: var(--rose-line); opacity: .5;
  pointer-events: none;
}
.corner--tr { top: 1.25rem; right: -3.5rem; transform: rotate(-30deg); }
.corner--bl { bottom: 2rem; left: -3.5rem; transform: rotate(150deg); }
.corner--tl { top: 1rem; left: -4rem; transform: rotate(205deg) scaleY(-1); }
.closing__names { margin-block: 1.5rem 1rem; font-weight: 400; font-size: clamp(2.4rem, 10vw, 3.4rem); }
.closing__names .amp { font-size: .7em; }
.hashtag {
  margin-top: 3rem; padding-top: 2.25rem;
  border-top: 1px solid rgba(201, 154, 154, .5);
  display: grid; justify-items: center; gap: .35rem;
}
.hashtag .tagline { font-size: 1.1rem; margin-bottom: 1rem; }
.hashtag__lead { font-size: .92rem; color: var(--ink-soft); }
.hashtag__tag { font: 600 clamp(1.7rem, 7vw, 2.2rem)/1.2 var(--f-display); letter-spacing: .01em; overflow-wrap: anywhere; }
.hashtag .btn { margin-top: .75rem; }
.closing__family { margin-top: 1.25rem; font: italic 500 1.15rem/1.5 var(--f-display); color: var(--ink-soft); }

/* Nama tamu terkunci */
.locked { position: relative; }
.field .locked input {
  padding-right: 2.75rem;
  background: var(--blush-2);
  border-style: dashed;
  cursor: default;
}
.locked__icon {
  position: absolute; right: .9rem; top: 50%;
  width: 1.1rem; height: 1.1rem; transform: translateY(-50%);
  fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round;
}
.field__note { font-size: .8rem; color: var(--ink-soft); }
.field__note[data-kind="error"] { color: var(--accent); font-weight: 500; }

/* Wedding gift: tab transfer / kirim hadiah */
.gift-tabs {
  display: grid; grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid rgba(201, 154, 154, .6);
}
.gift-tab {
  position: relative;
  min-height: 2.9rem; padding: 0 .5rem;
  border: 0; background: none; cursor: pointer;
  font: 500 .95rem/1.2 var(--f-body); color: var(--ink-soft);
  transition: color .3s var(--ease);
}
.gift-tab::after {
  content: ""; position: absolute; left: 20%; right: 20%; bottom: -1px;
  height: 2px; background: var(--sage);
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.gift-tab:hover, .gift-tab[aria-selected="true"] { color: var(--ink); }
.gift-tab[aria-selected="true"]::after { transform: scaleX(1); }
.gift-panel { display: grid; gap: 1.5rem; animation: panel-in .6s var(--ease); }
.gift-panel[hidden] { display: none; }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
.address__name { margin-top: .25rem; font: 600 1.3rem/1.3 var(--f-display); }
.address__phone { color: var(--ink-soft); font-variant-numeric: lining-nums; }
.address__text { max-width: 22rem; margin: .4rem auto 0; overflow-wrap: anywhere; }
.address__note { font-size: .85rem; color: var(--ink-soft); text-align: center; }

/* Penanda pratinjau draf (hanya dengan ?draft=1) */
.draft-bar {
  position: fixed; z-index: 70; top: max(.5rem, env(safe-area-inset-top)); left: 50%;
  transform: translateX(-50%);
  max-width: calc(100% - 2rem);
  padding: .5rem .9rem; border-radius: 2px;
  background: var(--ink); color: var(--on-deep);
  font-size: .82rem; text-align: center;
}
.draft-bar a { color: var(--on-deep); text-underline-offset: 2px; }
.draft-bar a:focus-visible { outline-color: var(--on-deep); }

/* Kelopak latar */
.petals {
  position: fixed; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0; transition: opacity 2.5s var(--ease);
}
.petals.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .bgphoto { transform: none !important; } }
.main { position: relative; z-index: 1; }

.nav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; justify-content: space-around;
  padding: 0 .25rem env(safe-area-inset-bottom);
  /* satu-satunya elemen kaca: ia melayang di atas konten yang bergulir */
  background: rgba(250, 245, 239, .9);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(201, 154, 154, .5);
  transition: opacity .8s var(--ease) 1.2s, transform .8s var(--ease) 1.2s;
}
body.is-locked .nav { opacity: 0; transform: translateY(100%); visibility: hidden; }
.nav a {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: var(--nav-h); min-width: 2.75rem; padding-inline: .4rem;
  color: var(--ink-soft); text-decoration: none;
  font: 500 .85rem/1 var(--f-body);
  transition: color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 25%; right: 25%; bottom: .9rem;
  height: 1px; background: currentColor;
  transform: scaleX(0); transition: transform .45s var(--ease);
}
.nav a:hover, .nav a[aria-current="true"] { color: var(--ink); }
.nav a[aria-current="true"]::after { transform: scaleX(1); }

.music {
  position: fixed; z-index: 21;
  right: 1rem; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + .85rem);
  width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--paper); border: 1px solid var(--sage);
  color: var(--sage); cursor: pointer;
}
.music svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.music[aria-pressed="true"] .music__slash { display: none; }
.music[data-state="error"] { border-style: dashed; }

.toast {
  position: fixed; z-index: 60; left: 50%;
  bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 4.5rem);
  max-width: min(90vw, 24rem);
  padding: .7rem 1rem; border-radius: 2px;
  background: var(--ink); color: var(--on-deep);
  font-size: .9rem; text-align: center;
  opacity: 0; transform: translate(-50%, 8px);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
  pointer-events: none;
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

.lightbox {
  width: min(92vw, 34rem); max-height: 92dvh;
  padding: 1rem; border: 0; border-radius: 2px;
  background: var(--paper); color: var(--ink);
  /* lapisan di atas halaman: bayangan menandai elevasi */
  box-shadow: 0 24px 60px -20px rgba(58, 46, 44, .55);
}
.lightbox::backdrop { background: rgba(58, 46, 44, .72); }
.lightbox[open] { animation: lb-in .45s var(--ease); }
.lightbox__stage { aspect-ratio: 4 / 5; max-height: 70dvh; margin-inline: auto; }
.lightbox__photo { transition: opacity .3s var(--ease); }
.lightbox__caption { margin-top: .75rem; text-align: center; font: italic 500 1.05rem/1.3 var(--f-display); }
.lightbox__controls { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: center; margin-top: .75rem; }
@keyframes lb-in { from { opacity: 0; transform: translateY(12px) scale(.98); } }

/* Animasi muncul saat digulir, hanya bila JS aktif (.js) */
.js .branch[data-reveal="draw"] .branch__lines path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.3s var(--ease);
  transition-delay: calc(.2s + var(--i, 0) * .07s);
}
.js .branch[data-reveal="draw"] .branch__lines path:first-child { transition-duration: 2s; }
.js .branch[data-reveal="draw"].is-in .branch__lines path { stroke-dashoffset: 0; }
.js .branch .branch__fill, .js .branch .branch__buds { opacity: 0; transition: opacity 1.6s var(--ease) .8s; }
.js .branch.is-in .branch__fill, .js .branch.is-in .branch__buds { opacity: 1; }

.js [data-reveal]:not([data-reveal="arch"]):not([data-reveal="draw"]) {
  opacity: 0; transform: translateY(18px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal]:not([data-reveal="arch"]):not([data-reveal="draw"]).is-in { opacity: 1; transform: none; }

.js [data-reveal="arch"] {
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.5s var(--ease);
  transition-delay: var(--d, 0s);
}
.js [data-reveal="arch"] .ph:not([data-parallax]) { transform: scale(1.12); transition: transform 1.8s var(--ease); transition-delay: var(--d, 0s); }
.js [data-reveal="arch"].is-in { clip-path: inset(0 0 0 0); }
.js [data-reveal="arch"].is-in .ph:not([data-parallax]) { transform: none; }

.js [data-reveal="draw"] path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--ease);
}
.js [data-reveal="draw"] path:nth-child(n+2) { transition-delay: .5s; transition-duration: 1.1s; }
.js [data-reveal="draw"] path:last-child { transition-delay: .9s; }
.js [data-reveal="draw"].is-in path { stroke-dashoffset: 0; }

.js .letter__sprig path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.6s var(--ease) .5s;
}
.js .cover.is-s3 .letter__sprig path { stroke-dashoffset: 0; }

/* amplop muncul perlahan saat halaman dimuat */
.js .env, .js .cover__guest { opacity: 0; transform: translateY(14px); }
.js .env { transition: opacity 1.2s var(--ease), transform 1.2s var(--ease); }
.js .cover.is-ready .env { opacity: 1; transform: none; }
.js .cover.is-ready .cover__guest { opacity: 1; transform: none; transition-delay: .5s; }
/* amplop turun sedikit saat surat naik, supaya surat tetap di dalam layar pendek */
.js .cover.is-ready.is-s3 .env { transform: translateY(22%); }
.js .cover.is-ready.is-s1 .cover__guest { opacity: 0; transform: translateY(8px); transition-delay: 0s; }

/* Tablet: konten mulai muat dua kolom */
@media (min-width: 40em) {
  .couple__grid {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; gap: 0 1rem;
  }
  .person__arch { width: 100%; }
  .person__name { font-size: clamp(1.8rem, 3vw, 2.1rem); }
  .person--groom { margin-top: 4.5rem; }
  .couple__amp { align-self: center; margin: 0; }
  .person--bride { text-align: left; }

  .event--akad { grid-template-columns: 11rem 1fr; }
  .gallery__grid { grid-auto-rows: 12rem; gap: .75rem; }
  .form { padding: 2rem; }
  .envelope { padding-top: 5rem; }
  .gift-panel--transfer { grid-template-columns: 1fr 1fr; }
  .gift-panel--transfer .account + .account { padding-top: 0; border-top: 0; border-left: 1px solid rgba(201, 154, 154, .5); }
  .envelope__flap { height: 4rem; }

  .nav {
    left: 50%; right: auto; bottom: max(1rem, env(safe-area-inset-bottom));
    width: min(34rem, calc(100% - 2rem));
    transform: translateX(-50%);
    border: 1px solid rgba(201, 154, 154, .5); border-radius: 2px;
    padding: 0 .5rem;
  }
  body.is-locked .nav { transform: translate(-50%, 140%); }
  .music { bottom: calc(var(--nav-h) + 2rem); right: 1.25rem; }
}

/* Desktop: panel sage tetap di kiri, isi bergulir di kanan */
@media (min-width: 64em) {
  body { display: grid; grid-template-columns: var(--aside-w) minmax(0, 1fr); }
  .aside {
    display: grid; place-items: center;
    position: sticky; top: 0; height: 100dvh; z-index: 2;
    overflow: clip; isolation: isolate; background-image: var(--grain);
    padding: 3rem 2.5rem 7rem;
    background-color: var(--sage-deep); color: var(--on-deep);
    text-align: center;
  }
  .aside__inner {
    width: 100%; max-width: 22rem;
    padding: 4.5rem 1.5rem 3rem;
    border: 1px solid rgba(233, 220, 207, .45);
    border-radius: 999px 999px 2px 2px;
    display: grid; gap: 1.25rem;
  }
  .aside__kicker { font: italic 500 1.2rem/1.3 var(--f-display); color: var(--on-deep-soft); }
  .aside__names { font-size: clamp(2.6rem, 3.6vw, 3.6rem); line-height: 1.15; }
  .aside__names .script { display: block; }
  .aside__amp { font: italic 400 .7em/1 var(--f-display); color: var(--on-deep-soft); }
  .aside__date { font: 500 1.2rem/1.4 var(--f-display); }
  .aside__tag { font: 600 1.05rem/1.3 var(--f-display); color: var(--on-deep-soft); letter-spacing: .02em; }

  .countdown { margin-inline: 0; }
  .closing { padding-bottom: clamp(4rem, 8vw, 7rem); }

  .nav {
    left: 0; right: auto; bottom: 1.75rem; transform: none;
    width: var(--aside-w);
    justify-content: center; flex-wrap: wrap; gap: 0 .5rem;
    background: transparent; border: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  body.is-locked .nav { transform: translateY(20px); }
  .nav a { color: var(--on-deep-soft); min-height: 2.75rem; }
  .nav a:hover, .nav a[aria-current="true"] { color: var(--on-deep); }
  .nav a::after { bottom: .55rem; }
  .nav a:focus-visible { outline-color: var(--on-deep); }
  .music { bottom: 1.5rem; right: 1.5rem; }
  .toast { left: calc(var(--aside-w) + (100% - var(--aside-w)) / 2); bottom: 5.5rem; }
}

/* Monitor besar (2K/4K): skala rem sedikit membesar */
@media (min-width: 100em) { html { font-size: 112.5%; } }
@media (min-width: 140em) { html { font-size: 125%; } }

/* Pratinjau latar di admin (?preview=): tanpa transisi agar perubahan crop langsung terlihat */
.is-preview *, .is-preview *::before, .is-preview *::after { transition: none !important; animation: none !important; }
.is-preview.is-editing-bg .bgphoto .photo { opacity: .9 !important; filter: none !important; mix-blend-mode: normal !important; }

/* Gerak dikurangi: semua langsung di keadaan akhir */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important; transition-delay: 0s !important;
    animation-duration: .01ms !important;
  }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .js [data-reveal] path, .js .letter__sprig path { stroke-dashoffset: 0 !important; }
  .js .branch .branch__fill, .js .branch .branch__buds { opacity: 1 !important; }
  .story__vine path { stroke-dashoffset: 0 !important; }
  .hero__photo { transform: none !important; }
}