/* =========================================================
   Ezgi & Atakan · Save the Date
   Burgundy / wine themed elegant invitation — mobile-first
   ========================================================= */

:root {
  --burgundy-1: #4a1219;
  --burgundy-2: #6b1f2a;
  --burgundy-3: #8a2a36;
  --wine-glow:  #b34555;
  --cream:      #f3e8d8;
  --cream-soft: #ede1cf;
  --gold:       #c9a55b;
  --gold-soft:  #e4cb95;
  --shadow:     rgba(0,0,0,.45);

  --font-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --font-display:'Italiana', 'Cormorant Garamond', serif;
  --font-script: 'Pinyon Script', cursive;
  --font-sans:   'Montserrat', system-ui, sans-serif;
}

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

/* HTML hidden özelliği herhangi bir display kuralını yenmeli */
[hidden] { display: none !important; }

html, body { height: 100%; }

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}

body {
  font-family: var(--font-serif);
  color: var(--cream);
  background:
    radial-gradient(ellipse at 50% 30%, #5a1820 0%, #4a1219 55%, #2e0a10 100%);
  min-height: 100vh;
  min-height: 100dvh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ---------- page system ---------- */
.page {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .9s ease, visibility .9s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.page.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.vignette {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,.55) 100%);
  pointer-events: none;
}

.hint {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: .85;
  text-align: center;
}
.top-hint { margin-bottom: 14px; }
.tap-hint { margin-top: 18px; animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%,100% { opacity: .55; transform: translateY(0); }
  50%     { opacity: 1;   transform: translateY(-3px); }
}

.amp, .amp-script {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--gold);
  font-weight: 400;
}

/* =========================================================
   PAGE 1 · ENVELOPE — krem kağıt, dantel kapak, kala laleler
   ========================================================= */
/* ana açılış isimleri */
.envelope-names-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0 22px;
  padding: 0 6px;
  text-align: center;
}
.envelope-names {
  font-family: var(--font-script);
  font-size: clamp(40px, 9.5vw, 86px);
  font-weight: 400;
  color: var(--cream);
  line-height: 1.0;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
  margin: 0;
  letter-spacing: -.01em;
}
.envelope-names .amp-script { color: var(--cream); }

.envelope-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1600px;
  width: min(86vw, 480px);
}

.envelope {
  position: relative;
  width: 100%;
  aspect-ratio: 1.22 / 1;
  cursor: pointer;
  transform-style: preserve-3d;
  filter: drop-shadow(0 24px 36px rgba(0,0,0,.55));
  -webkit-tap-highlight-color: transparent;
  transition: transform .9s cubic-bezier(.7,.05,.3,1);
}
.envelope:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 8px;
  border-radius: 4px;
}

/* envelope cream body + dark V opening at top */
.env-body {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, #ece1c8 0%, #d5c8a6 100%);
  border-radius: 4px;
  box-shadow:
    inset 0 0 0 1px rgba(80,40,15,.18),
    inset 0 -10px 20px rgba(120,80,40,.08);
  overflow: hidden;
}
.env-inside-v {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 82%;
  display: block;
}

/* the V flap: rotates up to open */
.env-flap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 82%;
  z-index: 3;
  transform-origin: top center;
  transition: transform 1.1s cubic-bezier(.7,.05,.3,1);
  display: block;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.18));
}
.envelope.open .env-flap { transform: rotateX(180deg); }
.envelope.open { transform: translateY(-1%); }

/* monogram on the flap */
.flap-monogram {
  font-family: var(--font-script);
  font-size: 110px;
  font-weight: 400;
  fill: #5a1620;
  letter-spacing: -2px;
}

/* calla lilies */
.env-lilies {
  position: absolute;
  right: -14%;
  bottom: -10%;
  width: 42%;
  z-index: 4;
  pointer-events: none;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
}

/* =========================================================
   FRAME (kullanılan tüm sayfalarda ortak)
   ========================================================= */
.frame {
  position: relative;
  width: min(94vw, 620px);
  padding: 56px 18px 44px;
  border: 1px solid rgba(201,165,91,.35);
  background: linear-gradient(180deg, rgba(74,18,25,.4), rgba(44,10,16,.55));
  backdrop-filter: blur(2px);
  border-radius: 2px;
  text-align: center;
  margin: 24px 0;
}
.corner {
  position: absolute;
  width: 22px; height: 22px;
  border: 1px solid var(--gold);
}
.corner.tl { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.corner.tr { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.corner.bl { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.corner.br { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.side-letter {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-display);
  font-size: clamp(80px, 16vw, 160px);
  color: rgba(228,203,149,.10);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}
.side-letter.left  { left: -6px; }
.side-letter.right { right: -6px; }

/* =========================================================
   PAGE 2 · SAVE OUR DATE
   ========================================================= */

/* =========================================================
   AÇIK ZARF SAHNESİ — Page 2
   Yapı: laleler (yan) + zarf (orta) — zarf: flap + iç + 3 polaroid + ön V + mühür
   ========================================================= */

.page-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .65em;
  text-transform: uppercase;
  color: var(--gold-soft);
  text-align: center;
  margin: 12px 0 24px;
  opacity: .85;
}

.envelope-scene {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 12px;
}

/* Yan laleler */
.scene-lily {
  flex: 0 0 auto;
  width: clamp(60px, 12vw, 130px);
  height: auto;
  filter: drop-shadow(0 8px 14px rgba(0,0,0,.35));
  pointer-events: none;
  align-self: stretch;
}
.scene-lily.left  { transform: translateY(8%); }
.scene-lily.right { transform: translateY(8%); }

/* Mobilde laleleri gizle (yer yetmez) */
@media (max-width: 600px) {
  .scene-lily { display: none; }
  .envelope-scene { padding: 0; }
}

/* AÇIK ZARF — orta */
.open-envelope {
  position: relative;
  flex: 1 1 auto;
  width: 100%;
  max-width: 480px;
  aspect-ratio: 1 / 0.95;
  margin: 0 auto;
  filter: drop-shadow(0 22px 40px rgba(0,0,0,.55));
}

/* Açık flap — yarı daire krem kart, üstte */
.oe-flap {
  position: absolute;
  top: -2%;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 58%;
  aspect-ratio: 2.1 / 1;
  background:
    linear-gradient(180deg, #f3eada 0%, #e6d8b9 60%, #d3c39e 100%);
  border-radius: 50% 50% 6px 6px / 100% 100% 6px 6px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 6;
  padding: 18px 22px 14px;
  box-shadow:
    0 14px 26px rgba(0,0,0,.45),
    0 2px 0 rgba(255,255,255,.35) inset,
    inset 0 0 0 1px rgba(80,40,15,.12);
}
.oe-flap::before {
  /* hafif krem kağıt damarı / iç ışık */
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50% 50% 4px 4px / 100% 100% 4px 4px;
  background: radial-gradient(ellipse at 50% 30%, rgba(255,255,255,.4) 0%, transparent 70%);
  pointer-events: none;
}
.oe-flap-eyebrow {
  font-family: var(--font-sans);
  font-size: clamp(9px, 1.5vw, 11px);
  letter-spacing: .55em;
  text-transform: uppercase;
  color: #8a3540;
  margin-bottom: 4px;
  position: relative;
}
.oe-flap-title {
  font-family: var(--font-script);
  font-size: clamp(38px, 7.5vw, 56px);
  font-weight: 400;
  color: #5a1620;
  line-height: .9;
  margin: 0;
  letter-spacing: -.02em;
  position: relative;
}
.oe-flap-divider {
  display: block;
  width: 38px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b88a48, transparent);
  margin: 8px auto 6px;
}
.oe-flap-sub {
  font-family: var(--font-display);
  font-size: clamp(11px, 2vw, 14px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #6b1f2a;
  position: relative;
}
.oe-flap-sub .amp-script {
  font-family: var(--font-script);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: #b88a48;
  font-size: 1.4em;
  vertical-align: -.15em;
  margin: 0 .15em;
}

/* İç astar — koyu (envelope inside) */
.oe-inside {
  position: absolute;
  top: 24%;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 50% 0%, #5b1a23 0%, #3a0d12 60%, #2a0810 100%);
  border-radius: 4px 4px 6px 6px;
  z-index: 1;
  box-shadow:
    inset 0 6px 12px rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(80,40,15,.5);
}

/* Polaroidler — z=2, üst kısımları net görünüyor */
.oe-polaroid {
  position: absolute;
  background: linear-gradient(180deg, #f8f1de 0%, #ebe1c5 100%);
  padding: 7px 7px 22px;
  margin: 0;
  box-shadow:
    0 12px 22px rgba(0,0,0,.5),
    0 2px 5px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.4);
  z-index: 2;
}
.oe-polaroid img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #2a0e13;
  filter: saturate(.92) contrast(1.04);
}

.oe-polaroid.p1 {
  width: 36%;
  aspect-ratio: 3 / 4;
  top: 14%;
  left: 8%;
  transform: rotate(-8deg);
}
.oe-polaroid.p2 {
  width: 36%;
  aspect-ratio: 3 / 4;
  top: 12%;
  right: 8%;
  transform: rotate(7deg);
  z-index: 3;
}
.oe-polaroid.p3 {
  width: 32%;
  aspect-ratio: 3 / 4;
  top: 26%;
  left: 34%;
  transform: rotate(-2deg);
  z-index: 4;
}

/* Krem ön yüz — alttan yukarı V (fotoğrafların alt kısımlarını saklar) */
.oe-front-svg {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 76%;
  z-index: 5;
  display: block;
  filter: drop-shadow(0 -2px 4px rgba(0,0,0,.18));
}

/* DANTEL — bordo, üst köşelerde, fotoğrafların hemen arkasında */
.oe-lace {
  position: absolute;
  width: 42%;
  height: auto;
  top: 6%;
  z-index: 2;     /* iç astarın önünde, polaroidlerin arkasında */
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.35));
  opacity: .92;
}
.oe-lace.left  { left: 0%; transform: rotate(-4deg); transform-origin: left top; }
.oe-lace.right { right: 0%; transform: rotate(4deg);  transform-origin: right top; }

/* AMARANTHUS — sağdan sarkan yeşil sarmaşık (canlılık katar) */
.oe-amaranthus {
  position: absolute;
  width: 14%;
  height: auto;
  top: -4%;
  right: 4%;
  z-index: 6;     /* polaroidlerin önünde, flap'in altında */
  pointer-events: none;
  filter: drop-shadow(0 6px 10px rgba(0,0,0,.4));
  transform-origin: 50% 0%;
  animation: amaSway 7s ease-in-out infinite alternate;
}
@keyframes amaSway {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(3deg); }
}

/* EA monogram + tarih damgası — mührün yerine, alt önde */
.oe-monogram {
  position: absolute;
  bottom: 9%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  pointer-events: none;
}
.oe-mono-letters {
  font-family: var(--font-script);
  font-size: clamp(38px, 8vw, 58px);
  color: #5a1620;
  line-height: 1;
  letter-spacing: -.02em;
  text-shadow: 0 1px 0 rgba(255,255,255,.6), 0 2px 4px rgba(80,40,15,.18);
}
.oe-mono-letters .oe-mono-amp {
  font-style: italic;
  color: #b88a48;
  font-size: .8em;
  vertical-align: -.1em;
  margin: 0 .04em;
}
.oe-mono-line {
  display: block;
  width: 90px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #b88a48 40%, #b88a48 60%, transparent);
  margin: 8px auto 6px;
  opacity: .8;
}
.oe-mono-meta {
  font-family: var(--font-sans);
  font-size: clamp(8px, 1.5vw, 10px);
  letter-spacing: .35em;
  text-transform: uppercase;
  color: #6b1f2a;
  opacity: .9;
}

/* Polaroid — siyah-beyaz + hafif sepia (zarif) */
.oe-polaroid img {
  filter: grayscale(0.88) sepia(0.18) contrast(1.05) brightness(0.98);
}
/* p3 (yüzükler) — biraz daha az bw, detay görünsün */
.oe-polaroid.p3 img {
  filter: grayscale(0.7) sepia(0.22) contrast(1.08);
}

/* Altın divider (zarf altında) */
.gold-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 36px 0 24px;
}
.gold-divider .gd-line {
  width: 120px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.gold-divider .gd-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* Aile bloğu — zarf açıldıktan sonra ilk görünen resmi bilgi */
.family-block {
  width: min(92vw, 620px);
  margin: 0 auto 26px;
  padding: 18px 18px 20px;
  border: 1px solid rgba(228,203,149,.36);
  background:
    linear-gradient(180deg, rgba(243,232,216,.08), rgba(74,18,25,.18)),
    rgba(46,10,16,.42);
  box-shadow:
    0 16px 34px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.08);
  text-align: center;
  backdrop-filter: blur(6px);
}
.family-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold-soft);
  opacity: .86;
  margin-bottom: 14px;
}
.family-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
.family-card {
  padding: 12px 10px;
  border-top: 1px solid rgba(228,203,149,.22);
}
.family-side {
  display: block;
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .38em;
  text-transform: uppercase;
  color: rgba(228,203,149,.78);
  margin-bottom: 8px;
}
.family-names {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 34px);
  font-weight: 400;
  letter-spacing: .12em;
  color: var(--cream);
  line-height: 1.15;
  text-transform: uppercase;
}
.family-amp {
  font-family: var(--font-script);
  font-style: italic;
  color: var(--gold);
  font-size: 1.25em;
  letter-spacing: 0;
  text-transform: none;
  vertical-align: -.12em;
  margin: 0 .08em;
}
.family-surname {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(11px, 2.4vw, 14px);
  font-weight: 600;
  letter-spacing: .34em;
  color: var(--gold-soft);
  text-transform: uppercase;
  margin-top: 6px;
}

@media (min-width: 620px) {
  .family-grid {
    grid-template-columns: 1fr 1fr;
  }
  .family-card {
    border-top: 0;
  }
  .family-card + .family-card {
    border-left: 1px solid rgba(228,203,149,.22);
  }
}

/* Page 2 alt bölüm yazıları */
.sd-tagline {
  font-family: var(--font-display);
  font-size: clamp(22px, 4.5vw, 32px);
  font-weight: 400;
  color: var(--cream);
  letter-spacing: .12em;
  text-align: center;
  margin: 0 0 18px;
  padding: 0 16px;
}
.sd-meta-line {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  letter-spacing: .12em;
  color: var(--gold-soft);
  text-align: center;
  margin-bottom: 22px;
  padding: 0 16px;
}

.sd-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 4px;
}
.sd-date-word {
  font-family: var(--font-script);
  font-size: clamp(64px, 14vw, 130px);
  font-weight: 400;
  color: var(--cream);
  line-height: .9;
  margin-bottom: 14px;
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 22px;
}
.divider .line {
  width: 80px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.divider .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }

.sd-names {
  font-family: var(--font-display);
  font-size: clamp(26px, 5vw, 40px);
  letter-spacing: .12em;
  color: var(--cream);
  margin-bottom: 6px;
}
.sd-names .amp-script { font-size: 1.2em; vertical-align: -.1em; }

.sd-sub {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 28px;
}

.sd-meta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 22px;
}
.meta-block { display: flex; flex-direction: column; align-items: center; }
.meta-num {
  font-family: var(--font-display);
  font-size: clamp(32px, 7vw, 54px);
  color: var(--cream);
  line-height: 1;
}
.meta-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-top: 6px;
}
.meta-divider {
  width: 1px;
  height: 50px;
  background: linear-gradient(180deg, transparent, var(--gold), transparent);
}

/* Geri sayım */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  max-width: 360px;
  margin: 0 auto 22px;
}
.cd-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 4px;
  border: 1px solid rgba(201,165,91,.3);
  background: rgba(0,0,0,.18);
  border-radius: 2px;
}
.cd-num {
  font-family: var(--font-display);
  font-size: clamp(22px, 5.5vw, 30px);
  color: var(--cream);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.cd-lbl {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

.sd-place {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 17px;
  letter-spacing: .15em;
  color: var(--cream);
  margin-bottom: 24px;
}

/* CTA */
.cta-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.cta {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--burgundy-1);
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 14px 28px;
  cursor: pointer;
  border-radius: 1px;
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
  min-height: 46px;
  min-width: 200px;
  text-align: center;
}
.cta:hover, .cta:focus-visible {
  transform: translateY(-2px);
  background: var(--gold-soft);
  box-shadow: 0 10px 22px rgba(0,0,0,.4);
}
.cta:active { transform: translateY(0); }
.cta-outline {
  background: transparent;
  color: var(--gold);
  border: 1px solid var(--gold);
}
.cta-outline:hover, .cta-outline:focus-visible {
  background: var(--gold);
  color: var(--burgundy-1);
}
.cta-large { width: 100%; padding: 16px 28px; }
.cta:disabled { opacity: .55; cursor: wait; transform: none; }

/* =========================================================
   MOMENTS HERO — havuz fotoğrafı arka planda, büyük EA monogram
   ========================================================= */
.moments-hero {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 56px;
  min-height: 78vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.moments-bg {
  position: absolute;
  inset: 0;
  background-image: url('img/background.png');
  background-size: cover;
  background-position: center;
  filter: brightness(.55) saturate(1.05) contrast(1.02);
  transform: scale(1.03);
}
.moments-overlay {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(74,18,25,.18) 0%, rgba(20,5,8,.55) 75%, rgba(20,5,8,.78) 100%),
    linear-gradient(180deg, rgba(20,5,8,.45) 0%, rgba(74,18,25,.25) 50%, rgba(20,5,8,.6) 100%);
}
.moments-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 60px 24px;
  color: var(--cream);
}
.moments-eyebrow {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .55em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 6px;
  opacity: .9;
}
.moments-mono {
  font-family: var(--font-script);
  font-size: clamp(140px, 36vw, 280px);
  font-weight: 400;
  line-height: .9;
  margin: 0 0 12px;
  color: var(--cream);
  text-shadow:
    0 4px 30px rgba(0,0,0,.55),
    0 1px 2px rgba(0,0,0,.5);
  letter-spacing: -.04em;
}
.moments-mono .amp-script {
  font-size: .65em;
  vertical-align: .15em;
  margin: 0 -.05em;
  color: var(--gold);
}
.moments-names {
  font-family: var(--font-display);
  font-size: clamp(22px, 5vw, 36px);
  letter-spacing: .15em;
  color: var(--cream);
  margin-bottom: 10px;
}
.moments-names .amp-script { color: var(--gold); }
.moments-meta {
  font-family: var(--font-sans);
  font-size: 11px;
  letter-spacing: .45em;
  text-transform: uppercase;
  color: var(--gold-soft);
}

/* Save the Date sayfası: açık zarf + countdown + buttons + hero alt alta */
.page-savedate {
  justify-content: flex-start;
  align-items: center;
  padding: max(28px, env(safe-area-inset-top)) 16px max(28px, env(safe-area-inset-bottom));
  gap: 0;
}
.page-savedate > .envelope-scene,
.page-savedate > .countdown,
.page-savedate > .cta-row,
.page-savedate > .sd-tagline,
.page-savedate > .sd-meta-line,
.page-savedate > .family-block,
.page-savedate > .gold-divider,
.page-savedate > .page-eyebrow {
  flex: 0 0 auto;
}
.page-savedate > .moments-hero { margin-top: 48px; }

/* =========================================================
   PAGE 3 · DETAILS
   ========================================================= */
.dt-content { display: flex; flex-direction: column; align-items: center; }

.dt-eyebrow {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-soft);
  margin-bottom: 12px;
}
.dt-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 5vw, 38px);
  font-weight: 400;
  letter-spacing: .06em;
  color: var(--cream);
  margin-bottom: 24px;
  line-height: 1.25;
}

.venue-photo {
  width: 100%;
  max-width: 480px;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  border: 1px solid rgba(201,165,91,.45);
  padding: 5px;
  margin-bottom: 16px;
  background: rgba(0,0,0,.2);
}
.venue-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(1.05) contrast(1.02);
}

.venue-name {
  font-family: var(--font-script);
  font-size: clamp(32px, 6vw, 48px);
  color: var(--cream);
  margin-bottom: 20px;
  line-height: 1;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  width: 100%;
  max-width: 480px;
  margin-bottom: 24px;
  text-align: center;
}
.info-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  padding: 12px 8px;
  border-top: 1px solid rgba(201,165,91,.18);
}
.info-item:first-child { border-top: 0; }
.info-key {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .4em;
  text-transform: uppercase;
  color: var(--gold-soft);
}
.info-val {
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--cream);
  line-height: 1.45;
}

.dt-signoff {
  margin-top: 18px;
  font-family: var(--font-script);
  font-size: clamp(34px, 6vw, 48px);
  color: var(--cream);
  text-align: center;
}
.dt-signoff .amp-script { color: var(--gold); }

/* =========================================================
   PAGE 4 · RSVP FORM
   ========================================================= */
.rsvp-form {
  width: 100%;
  max-width: 480px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}

.field { display: flex; flex-direction: column; gap: 8px; }
.field-label {
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: uppercase;
  color: var(--gold-soft);
  display: block;
}
.field-label em {
  font-style: normal;
  color: var(--gold);
  margin-left: 4px;
}
.field-label em.opt {
  color: rgba(228,203,149,.5);
  letter-spacing: .15em;
  text-transform: none;
  font-size: 11px;
}

.field input[type="text"],
.field input[type="tel"],
.field input[type="number"],
.field textarea {
  width: 100%;
  font-family: var(--font-serif);
  font-size: 16px;
  color: var(--cream);
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(201,165,91,.3);
  padding: 12px 14px;
  border-radius: 1px;
  transition: border-color .2s ease, background .2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(243,232,216,.35); }
.field input:focus,
.field textarea:focus {
  border-color: var(--gold);
  background: rgba(0,0,0,.35);
}
.field textarea {
  resize: vertical;
  min-height: 80px;
  font-family: var(--font-serif);
}

.choice-field { border: none; }
.choice-field legend { padding: 0; margin-bottom: 8px; }
.choice-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.choice {
  position: relative;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-box {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 12px;
  border: 1px solid rgba(201,165,91,.3);
  background: rgba(0,0,0,.2);
  text-align: center;
  transition: all .25s ease;
  border-radius: 1px;
}
.choice-title {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--cream);
  letter-spacing: .04em;
}
.choice-sub {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: rgba(228,203,149,.55);
}
.choice input:checked + .choice-box {
  border-color: var(--gold);
  background: rgba(201,165,91,.12);
  box-shadow: inset 0 0 0 1px var(--gold);
}
.choice input:checked + .choice-box .choice-sub { color: var(--gold-soft); }

/* counters */
.counts-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.counter { display: flex; flex-direction: column; gap: 8px; align-items: center; text-align: center; }
.counter-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(0,0,0,.25);
  border: 1px solid rgba(201,165,91,.3);
  padding: 4px;
  border-radius: 1px;
}
.counter-btn {
  width: 40px;
  height: 40px;
  background: transparent;
  border: 1px solid rgba(201,165,91,.4);
  color: var(--gold);
  font-size: 22px;
  font-family: var(--font-sans);
  cursor: pointer;
  border-radius: 1px;
  transition: all .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.counter-btn:hover, .counter-btn:active {
  background: var(--gold);
  color: var(--burgundy-1);
}
.counter input {
  width: 50px;
  text-align: center;
  background: transparent !important;
  border: none !important;
  font-family: var(--font-display);
  font-size: 22px !important;
  color: var(--cream);
  padding: 4px !important;
  -moz-appearance: textfield;
}
.counter input::-webkit-outer-spin-button,
.counter input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.counter-hint {
  font-family: var(--font-sans);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(228,203,149,.4);
}

.form-error {
  min-height: 18px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: #f0a4a4;
  text-align: center;
  letter-spacing: .05em;
}

/* RSVP success */
.rsvp-success {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  animation: fadeUp .6s ease both;
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.success-mark {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--gold);
  color: var(--gold);
  display: grid;
  place-items: center;
  font-size: 32px;
  background: rgba(201,165,91,.08);
}
.success-title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 400;
  color: var(--cream);
  letter-spacing: .06em;
}
.success-text {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--cream-soft);
  text-align: center;
  font-size: 16px;
  line-height: 1.5;
  max-width: 340px;
}

/* back navigation */
.nav-back {
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  background: rgba(44,10,16,.7);
  border: 1px solid rgba(228,203,149,.4);
  color: var(--gold-soft);
  font-family: var(--font-sans);
  font-size: 10px;
  letter-spacing: .35em;
  text-transform: lowercase;
  padding: 8px 14px;
  cursor: pointer;
  transition: all .25s ease;
  backdrop-filter: blur(4px);
  z-index: 50;
  -webkit-tap-highlight-color: transparent;
}
.nav-back:hover, .nav-back:active {
  background: var(--gold);
  color: var(--burgundy-1);
  border-color: var(--gold);
}

/* =========================================================
   responsive — desktop refinements
   ========================================================= */
@media (min-width: 600px) {
  .frame { padding: 64px 32px 56px; }
  .info-grid { grid-template-columns: 1fr 1fr; gap: 16px 24px; text-align: left; }
  .info-item {
    align-items: flex-start;
    border-top: 0;
    padding: 0;
  }
  .info-item.full { grid-column: 1 / -1; align-items: center; text-align: center; }
  .cta-row { flex-direction: row; justify-content: center; gap: 14px; }
  .cta { min-width: 180px; }
  .countdown { gap: 12px; max-width: 420px; }
  .cd-cell { padding: 14px 6px; }
}

@media (min-width: 480px) {
  .couple-photo { width: 150px; height: 150px; }
}

/* very short screens — reduce vertical paddings */
@media (max-height: 700px) {
  .frame { padding: 48px 18px 36px; margin: 16px 0; }
  .sd-date-word { font-size: clamp(54px, 11vw, 90px); margin-bottom: 8px; }
  .couple-photo { width: 100px; height: 100px; margin-bottom: 14px; }
  .sd-meta { margin-bottom: 14px; }
  .countdown { margin-bottom: 14px; }
  .sd-place { margin-bottom: 16px; }
  .sd-sub { margin-bottom: 18px; }
}

/* =========================================================
   ANIMASYONLAR — sayfa girişleri + idle ambient
   ========================================================= */

/* PAGE 1 — idle / ambient (zarf yavaşça nefes alır gibi) */
.page-envelope.active .envelope-names-wrap {
  animation: namesIn 1.2s cubic-bezier(.2,.7,.3,1) .2s both;
}
.page-envelope.active .top-hint {
  animation: hintIn 1s ease .05s both;
}
.page-envelope.active .envelope-stage {
  animation: envIn 1.1s cubic-bezier(.2,.7,.3,1) .25s both;
}
.page-envelope.active .tap-hint {
  animation: hintIn 1s ease .9s both, hintPulse 2.6s ease-in-out 2s infinite;
}
.envelope-stage::after {
  content: "";
  position: absolute;
  inset: -8% -12%;
  background:
    radial-gradient(ellipse at 30% 30%, rgba(228,203,149,.12), transparent 50%),
    radial-gradient(ellipse at 70% 70%, rgba(179,69,85,.10), transparent 55%);
  filter: blur(20px);
  z-index: -1;
  pointer-events: none;
  animation: glowDrift 14s ease-in-out infinite alternate;
}
.envelope:not(.open) .env-body {
  animation: bodyBreathe 5s ease-in-out infinite;
  transform-origin: center 60%;
}
.env-lilies {
  animation: lilySway 7s ease-in-out infinite alternate;
  transform-origin: 50% 100%;
}
@keyframes bodyBreathe {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.01); filter: brightness(1.04); }
}

/* zarf etrafında dolaşan minik parıltılar (CSS-only) */
.page-envelope::before,
.page-envelope::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold-soft);
  box-shadow: 0 0 12px var(--gold-soft);
  pointer-events: none;
  opacity: 0;
  z-index: 1;
}
.page-envelope.active::before {
  top: 24%; left: 18%;
  animation: spark 6.5s ease-in-out 1.4s infinite;
}
.page-envelope.active::after {
  top: 38%; right: 16%;
  animation: spark 7.5s ease-in-out 2.8s infinite;
}

/* PAGE 2 — open envelope sahne girişi */
.page-savedate.active .page-eyebrow {
  animation: fadeUp .9s ease-out .1s both;
}
.page-savedate.active .open-envelope {
  animation: envSceneIn 1.0s cubic-bezier(.25,.6,.3,1) .15s both;
}
.page-savedate.active .scene-lily.left {
  animation: lilyInLeft 1.1s cubic-bezier(.25,.6,.3,1) .8s both, lilySway 9s ease-in-out 2s infinite alternate;
}
.page-savedate.active .scene-lily.right {
  animation: lilyInRight 1.1s cubic-bezier(.25,.6,.3,1) .8s both, lilySwayRev 9s ease-in-out 2s infinite alternate;
}

/* iç astar fade in */
.page-savedate.active .oe-inside {
  animation: fadeIn .6s ease-out .35s both;
}

/* dantel — yukarıdan iniş */
.page-savedate.active .oe-lace.left {
  animation: laceInL 1.0s cubic-bezier(.3,.7,.3,1) 1.0s both;
}
.page-savedate.active .oe-lace.right {
  animation: laceInR 1.0s cubic-bezier(.3,.7,.3,1) 1.05s both;
}

/* polaroidler — sırayla aşağıdan yukarı çıkar */
.page-savedate.active .oe-polaroid.p1 {
  animation: photoRise 1.0s cubic-bezier(.2,.7,.3,1) .55s both;
}
.page-savedate.active .oe-polaroid.p2 {
  animation: photoRise 1.0s cubic-bezier(.2,.7,.3,1) .75s both;
}
.page-savedate.active .oe-polaroid.p3 {
  animation: photoRise 1.0s cubic-bezier(.2,.7,.3,1) .95s both;
}

/* amaranthus — yukarıdan kayar */
.page-savedate.active .oe-amaranthus {
  animation: amaIn 1.2s cubic-bezier(.25,.6,.3,1) 1.1s both, amaSway 7s ease-in-out 2.2s infinite alternate;
}

/* ön yüz — fade */
.page-savedate.active .oe-front-svg {
  animation: fadeIn .5s ease-out .25s both;
}

/* flap — yukarıdan iner */
.page-savedate.active .oe-flap {
  animation: flapIn 1.0s cubic-bezier(.3,.7,.3,1) 1.2s both;
}
.page-savedate.active .oe-monogram {
  animation: fadeUp .8s ease-out 1.4s both;
}

/* divider + altındaki içerikler */
.page-savedate.active .gold-divider { animation: fadeUp .7s ease .9s both; }
.page-savedate.active .family-block { animation: fadeUp .75s ease 1.05s both; }
.page-savedate.active .sd-tagline   { animation: fadeUp .7s ease 1.22s both; }
.page-savedate.active .countdown    { animation: fadeUp .7s ease 1.38s both; }
.page-savedate.active .sd-meta-line { animation: fadeUp .7s ease 1.52s both; }
.page-savedate.active .cta-row      { animation: fadeUp .7s ease 1.66s both; }

/* PAGE 3 / 4 — yumuşak fade */
.page-details.active .frame,
.page-rsvp.active .frame {
  animation: fadeUp .8s cubic-bezier(.25,.6,.3,1) .15s both;
}

/* ---------- KEYFRAMES ---------- */
@keyframes namesIn {
  from { opacity: 0; transform: translateY(-14px) scale(.96); letter-spacing: .04em; }
  to   { opacity: 1; transform: translateY(0) scale(1); letter-spacing: .02em; }
}
@keyframes hintIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: .85; transform: translateY(0); }
}
@keyframes hintPulse {
  0%, 100% { opacity: .85; }
  50%      { opacity: .35; }
}
@keyframes envIn {
  from { opacity: 0; transform: translateY(20px) scale(.92); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes glowDrift {
  0%   { transform: translate(0,0) scale(1); opacity: .8; }
  100% { transform: translate(2%, -2%) scale(1.06); opacity: 1; }
}
@keyframes lilySway {
  0%   { transform: rotate(-2deg); }
  100% { transform: rotate(2deg); }
}
@keyframes lilySwayRev {
  0%   { transform: rotate(2deg); }
  100% { transform: rotate(-2deg); }
}
@keyframes spark {
  0%, 100% { opacity: 0; transform: translateY(0) scale(.5); }
  35%      { opacity: 1; transform: translateY(-12px) scale(1); }
  70%      { opacity: .4; transform: translateY(-22px) scale(.8); }
}
@keyframes envSceneIn {
  from { opacity: 0; transform: translateY(40px) scale(.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes lilyInLeft {
  from { opacity: 0; transform: translateX(-30px) translateY(8%) rotate(-8deg); }
  to   { opacity: 1; transform: translateX(0) translateY(8%) rotate(0deg); }
}
@keyframes lilyInRight {
  from { opacity: 0; transform: translateX(30px) translateY(8%) rotate(8deg); }
  to   { opacity: 1; transform: translateX(0) translateY(8%) rotate(0deg); }
}
/* photoRise — her polaroid'in son rotation'ı kendi --rot değişkeninden gelir */
.page-savedate.active .oe-polaroid.p1 { --rot: -8deg; }
.page-savedate.active .oe-polaroid.p2 { --rot:  7deg; }
.page-savedate.active .oe-polaroid.p3 { --rot: -2deg; }
@keyframes photoRise {
  from { opacity: 0; transform: translateY(75%) rotate(0deg) scale(.86); }
  60%  { opacity: 1; }
  to   { opacity: 1; transform: translateY(0) rotate(var(--rot, 0deg)) scale(1); }
}
@keyframes flapIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-30%) rotate(-1.5deg) scale(.9); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0) rotate(-1.5deg) scale(1); }
}
@keyframes laceInL {
  from { opacity: 0; transform: translateY(-30%) rotate(-12deg); }
  to   { opacity: .92; transform: translateY(0) rotate(-4deg); }
}
@keyframes laceInR {
  from { opacity: 0; transform: translateY(-30%) rotate(12deg); }
  to   { opacity: .92; transform: translateY(0) rotate(4deg); }
}
@keyframes amaIn {
  from { opacity: 0; transform: translateY(-25%) rotate(-2deg); }
  to   { opacity: 1; transform: translateY(0) rotate(-2deg); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}