/* ==========================================================================
   ZEYNEP & VAHDETTİN — DÜĞÜN DAVETİYESİ
   Tasarım sistemi, hareket katmanı ve scroll-linked "hero → header" geçişi.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fontlar
   Google Fonts artık index.html içinde <link> ile yükleniyor. Buradaki @import
   spesifikasyon gereği @font-face'ten sonra geldiği için tarayıcı tarafından
   sessizce atılıyordu ve site Times New Roman fallback ile render oluyordu.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Kudry Classic';
  src: url('./assets/fonts/Kudry-ClassicHeadline.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. Scroll ilerlemesi için tipli özel değişkenler
   @property ile kaydetmek iki şey kazandırır: değerler sayı olarak hesaplanır
   (calc/clamp içinde güvenle kullanılır) ve stil geçersizleştirme kapsamı dar
   kalır — her frame :root'u kirletmeyiz.
   -------------------------------------------------------------------------- */
@property --p  { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --pn { syntax: '<number>'; initial-value: 0; inherits: true; }
@property --i  { syntax: '<number>'; initial-value: 0; inherits: false; }
@property --l  { syntax: '<number>'; initial-value: 0; inherits: false; }

:root {
  /* Renk paleti */
  --bg-primary: #FAF9F6;
  --bg-card: #FFFFFF;
  --text-main: #1C1C1A;
  --text-muted: #666662;
  --text-light: #8E8E8A;
  --border-line: rgba(28, 28, 26, 0.15);
  --border-strong: #211F1E;

  --accent-gold: #C5A059;
  --accent-gold-light: #F4EAD3;
  --button-bg: #211F1E;
  --button-hover: #3A3836;

  /* Gölge & yarıçap */
  --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.02);
  --button-shadow: 0 4px 14px rgba(33, 31, 30, 0.12);
  --radius-card: 16px;
  --radius-pill: 9999px;

  /* Tipografi */
  --font-kudry: 'Kudry Classic', 'Cormorant Garamond', Georgia, serif;
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Montserrat', system-ui, -apple-system, sans-serif;

  /* Ölçüler */
  --header-h: 60px;
  --safe-top: env(safe-area-inset-top, 0px);

  /* Hareket eğrileri — tek yerden yönetilir */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* --------------------------------------------------------------------------
   3. Reset & temel
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  /*
    KRİTİK: 'smooth' idi. app.js kendi rAF easing döngüsünde her frame
    window.scrollTo() çağırdığı için native yumuşatma ile çakışıyor, her frame
    bir öncekini iptal eden yeni bir native animasyon kuyruğa alınıyordu.
    Yumuşatmayı JS yaptığı için burası 'auto' olmalı.
  */
  scroll-behavior: auto;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  background-color: var(--bg-primary);
  color: var(--text-main);
  font-family: var(--font-serif);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  position: relative;
}

/* Özel kaydırma çubuğu */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: rgba(250, 249, 246, 0.8); }
::-webkit-scrollbar-thumb {
  background: rgba(197, 160, 89, 0.45);
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(197, 160, 89, 0.85); }
* { scrollbar-width: thin; scrollbar-color: rgba(197, 160, 89, 0.5) transparent; }

/* Klavye odağı — her etkileşimli öğede görünür */
:focus-visible {
  outline: 2px solid var(--accent-gold);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------------------
   4. Atmosfer katmanları
   Önceden .page-container (z-index 2, OPAK arka plan) 520px altındaki her
   ekranda bu iki katmanı tamamen örtüyordu — yani mobilde parçacıklar ve doku
   hiç görünmüyor, canvas yine de her frame çiziliyordu.
   Çözüm: container'ı şeffaf yap, arka plan rengini body taşısın.
   -------------------------------------------------------------------------- */
.bg-texture {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.25;
  background-image: radial-gradient(#d5d2c8 0.75px, transparent 0.75px);
  background-size: 24px 24px;
}

#particleCanvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Scroll ilerleme çubuğu */
#scrollProgressBar {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--accent-gold), #e0c896, var(--accent-gold));
  z-index: 9999;
  transform-origin: 0% 50%;
  transform: scaleX(0);
  will-change: transform;
  box-shadow: 0 1px 6px rgba(197, 160, 89, 0.4);
}

/* --------------------------------------------------------------------------
   5. KALICI ÜST BAŞLIK
   Scroll ile "oluşur": zemin + hairline çizgi ortadan açılır, isimler harf
   harf yerine oturur, tarih belirir. Monogram ayrı bir fixed öğe olarak
   hero'dan buraya taşınır (bkz. bölüm 6).
   -------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: calc(var(--header-h) + var(--safe-top));
  padding-top: var(--safe-top);
  z-index: 50;
  pointer-events: none; /* başlıkta etkileşimli öğe yok; altı tıklanabilir kalsın */
  --p: 0;
  --pn: 0;
}

.header-surface {
  position: absolute;
  inset: 0;
  background: rgba(250, 249, 246, 0.78);
  -webkit-backdrop-filter: blur(14px) saturate(1.08);
  backdrop-filter: blur(14px) saturate(1.08);
  opacity: var(--p);
}

.header-inner {
  position: relative;
  height: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* Monogramın yerleşeceği ölçüm yuvası — görünmez, sadece hedef dikdörtgen */
.mark-slot {
  flex: 0 0 auto;
  width: 30px;
  aspect-ratio: 180 / 135;
}

/* İsimler: harf harf yerine oturur */
.header-names {
  flex: 1 1 auto;
  text-align: center;
  font-family: var(--font-serif);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-main);
  white-space: nowrap;
  overflow: hidden;
  line-height: 1;
}

.header-names .ch {
  display: inline-block;
  white-space: pre;
  /* Her harf kendi eşiğini geçtiğinde belirir → soldan sağa akan bir dizilim */
  --l: clamp(0, calc((var(--pn) - (var(--i) * 0.028)) / 0.34), 1);
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 0.55em));
}

/* Tarih: yalnızca belirir (arkadaşın tarifi: "tarih yukarıda belirecek") */
.header-date {
  flex: 0 0 auto;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  /* Altın (#C5A059) krem üstünde 2.3:1 — küçük metin için kontrast yetersiz.
     Altını yalnızca dekoratif hairline'da kullanıyoruz. */
  color: var(--text-muted);
  opacity: var(--pn);
  transform: translateY(calc((1 - var(--pn)) * 4px));
}

/* Hairline: hero'nun dikey çizgisinden devralır, ortadan iki yana açılır */
.header-rule {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(28, 28, 26, 0.18) 18%,
    rgba(197, 160, 89, 0.55) 50%,
    rgba(28, 28, 26, 0.18) 82%,
    transparent);
  transform: scaleX(var(--p));
  transform-origin: center;
}

/* --------------------------------------------------------------------------
   6. UÇAN MONOGRAM (FLIP)
   DOM genişliği hero boyutunda tutulur ve başlığa KÜÇÜLEREK gider; ölçek her
   zaman <= 1 kaldığı için görsel hiçbir aşamada bulanıklaşmaz.
   Konum/ölçek her frame JS tarafından ölçülmüş rect'lerden hesaplanır.
   -------------------------------------------------------------------------- */
/*
  İki katman ayrımı kasıtlı:
  .mark-layer  → transform'u JS her frame yazar (FLIP: konum + ölçek)
  .header-mark → açılış animasyonunu taşır (opacity + translateY)
  Aynı öğede iki farklı sistem transform yazamayacağı için ayrıldılar.
*/
.mark-layer {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 55;
  transform-origin: left top;
  pointer-events: none;
  opacity: 0;
  will-change: transform;
}

.header-mark {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.03));
}

html.dock-on .mark-layer { display: block; }
html.dock-ready .mark-layer { opacity: 1; }

/* Dock aktifken hero'daki görsel yalnızca yer tutar; görüneni #headerMark'tır. */
html.dock-on .anchor-mark-img { visibility: hidden; }

/* --------------------------------------------------------------------------
   7. Sarmalayıcı
   -------------------------------------------------------------------------- */
.page-container {
  max-width: 520px;
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  background: transparent; /* atmosfer katmanları arkasından görünsün */
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
}

/* --------------------------------------------------------------------------
   8. EKRAN 1 — Kapak
   -------------------------------------------------------------------------- */
.hero-section {
  /* 100vh mobilde URL çubuğu GİZLİYKEN'ki yüksekliktir; ilk açılışta alttaki
     "aşağı kaydırın" göstergesi ekranın dışında kalıyordu. svh doğru birim. */
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 40px 24px;
  text-align: center;
  position: relative;
}

.top-indicator-line {
  width: 1px;
  height: 60px;
  background-color: var(--text-main);
  opacity: 0.8;
  margin-bottom: 20px;
  transform-origin: top center;
}

.hero-center-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  gap: 24px;
}

.anchor-mark {
  width: 170px;
  max-width: 60vw;
}

.anchor-mark-img {
  display: block;
  width: 100%;
  height: auto;
}

/* Dock kapalıyken (JS yok / hareket azaltma) hero yine de nefes alsın */
html.dock-static .anchor-mark-img {
  animation: floatGentle 4.5s ease-in-out infinite alternate;
}

@keyframes floatGentle {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-7px); }
}

.hero-date {
  font-family: var(--font-kudry);
  font-size: 2.2rem;
  letter-spacing: 2px;
  color: var(--text-main);
  font-weight: 400;
  line-height: 1;
}

.bottom-indicator {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  text-decoration: none;
  color: var(--text-main);
}

.bottom-indicator-line {
  width: 1px;
  height: 65px;
  background-color: var(--text-main);
  opacity: 0.6;
  position: relative;
  overflow: hidden;
}

.bottom-indicator-line::after {
  content: '';
  position: absolute;
  top: -100%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, transparent, var(--text-main), transparent);
  animation: scrollLineDrop 2.2s cubic-bezier(0.65, 0, 0.35, 1) infinite;
}

@keyframes scrollLineDrop {
  0%   { top: -100%; opacity: 0; }
  50%  { opacity: 1; }
  100% { top: 100%; opacity: 0; }
}

.scroll-text {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  letter-spacing: 0.5px;
  color: var(--text-muted);
}

/* Sadece gerçek işaretçisi olan cihazlarda hover — mobilde "yapışan hover" olmaz */
@media (hover: hover) and (pointer: fine) {
  .bottom-indicator { transition: opacity 0.3s ease, transform 0.3s ease; }
  .bottom-indicator:hover { opacity: 0.8; transform: translateY(3px); }
}

/*
  Açılış animasyonu JS'te Web Animations API ile kurulur (bkz. app.js → initHeroIntro).
  Sebebi: bu öğelerin opacity'sini scroll sürücüsü de yazıyor. CSS animasyonu
  fill-mode ile inline stilin ÜSTÜNE çıkar ve scroll'a bağlı sönümlemeyi kilitler.
  WAAPI'yi fill:'backwards' ile kullanınca animasyon bitince kontrol JS'e döner.
  JS hiç çalışmazsa da içerik animasyonsuz ama tam görünür kalır.
*/

/* --------------------------------------------------------------------------
   9. EKRAN 2 — Davetiye
   -------------------------------------------------------------------------- */
.invitation-section {
  min-height: 100vh;
  min-height: 100svh;
  /* İçerik sabit başlığın altına girmesin */
  padding: calc(var(--header-h) + var(--safe-top) + 34px) 24px 60px;
  scroll-margin-top: calc(var(--header-h) + var(--safe-top));
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}

.calligraphy-header {
  margin-bottom: 24px;
  text-align: center;
}

.calligraphy-img {
  width: 250px;
  max-width: 80vw;
  height: auto;
}

.evleniyoruz-title {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 300;
  letter-spacing: 2px;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 36px;
}

.couples-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 16px;
  align-items: center;
  width: 100%;
  text-align: center;
  margin-bottom: 30px;
}

.couple-column {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.couple-name {
  font-family: var(--font-kudry);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-main);
  text-transform: uppercase;
  white-space: nowrap;
}

.parents-names {
  font-family: var(--font-serif);
  font-size: 0.88rem;
  letter-spacing: 1px;
  color: var(--text-muted);
  line-height: 1.4;
}

.couple-surname {
  font-family: var(--font-kudry);
  font-size: 1.2rem;
  font-weight: 500;
  letter-spacing: 3px;
  color: var(--text-main);
  text-transform: uppercase;
  margin-top: 4px;
  white-space: nowrap;
}

.slash-divider {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  color: var(--text-light);
  font-weight: 300;
}

.center-divider-line {
  width: 120px;
  height: 1px;
  background-color: var(--border-line);
  margin: 24px 0 32px;
}

.event-datetime-box { text-align: center; margin-bottom: 32px; }

.event-date-main {
  font-family: var(--font-kudry);
  font-size: 1.5rem;
  letter-spacing: 3px;
  font-weight: 500;
  color: var(--text-main);
  text-transform: uppercase;
  margin-bottom: 4px;
}

.event-time-sub {
  font-family: var(--font-kudry);
  font-size: 1.25rem;
  letter-spacing: 2px;
  color: var(--text-main);
  text-transform: uppercase;
}

.location-box { text-align: center; margin-bottom: 36px; }

.venue-name {
  font-family: var(--font-serif);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 4px;
  letter-spacing: 0.5px;
}

.venue-address {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  line-height: 1.5;
  letter-spacing: 0.5px;
}

.invitation-quote {
  font-family: var(--font-serif);
  font-size: 1.05rem;
  color: var(--text-main);
  text-align: center;
  max-width: 88%;
  margin-bottom: 40px;
  line-height: 1.6;
}

/* --------------------------------------------------------------------------
   10. Geri sayım
   -------------------------------------------------------------------------- */
.countdown-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 40px;
}

.countdown-title {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  letter-spacing: 1px;
  margin-bottom: 16px;
}

.countdown-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  width: 100%;
}

.timer-card {
  background: var(--bg-card);
  border-radius: 14px;
  padding: 16px 6px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(0, 0, 0, 0.04);
  transition: transform 0.35s var(--ease-out-soft), box-shadow 0.35s var(--ease-out-soft);
}

/* Tilt sırasında geçiş kapatılır (JS) — aksi halde efekt fareyi 350ms geriden takip eder */
.timer-card.is-tilting { transition: none; }

@media (hover: hover) and (pointer: fine) {
  .timer-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.07);
  }
}

.timer-card:active { transform: translateY(-1px) scale(0.98); }

.timer-number {
  font-family: var(--font-kudry);
  font-size: 2.1rem;
  font-weight: 400;
  color: var(--text-main);
  line-height: 1;
  margin-bottom: 6px;
  display: inline-block;
}

.timer-label {
  font-family: var(--font-serif);
  font-size: 0.82rem;
  color: var(--text-muted);
  letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   11. Butonlar & ripple
   -------------------------------------------------------------------------- */
.actions-container {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 45px;
}

.btn-primary, .btn-secondary, .timer-card {
  position: relative;
  overflow: hidden;
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
  transform: scale(0);
  animation: rippleAnim 0.6s linear;
  pointer-events: none;
}

.btn-secondary .ripple-effect,
.timer-card .ripple-effect { background: rgba(28, 28, 26, 0.12); }

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

.btn-primary, .btn-secondary {
  width: 100%;
  padding: 16px 24px;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background-color 0.35s var(--ease-out-soft),
              color 0.35s var(--ease-out-soft),
              transform 0.35s var(--ease-out-soft),
              box-shadow 0.35s var(--ease-out-soft);
}

.btn-primary {
  background-color: var(--button-bg);
  color: #FFFFFF;
  border: 1px solid var(--button-bg);
  box-shadow: var(--button-shadow);
}

.btn-secondary {
  padding: 15px 24px;
  background-color: transparent;
  color: var(--button-bg);
  border: 1px solid var(--border-strong);
}

@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover {
    background-color: var(--button-hover);
    border-color: var(--button-hover);
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(33, 31, 30, 0.22);
  }
  .btn-secondary:hover {
    background-color: var(--button-bg);
    color: #FFFFFF;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(33, 31, 30, 0.12);
  }
}

.btn-primary:active,
.btn-secondary:active { transform: translateY(0) scale(0.98); }

.btn-submit { margin-top: 10px; }

/* --------------------------------------------------------------------------
   12. Footer
   -------------------------------------------------------------------------- */
.footer-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-bottom: 40px;
}

.footer-monogram {
  width: 90px;
  height: auto;
  opacity: 0.85;
  transition: transform 0.5s ease;
}

@media (hover: hover) and (pointer: fine) {
  .footer-monogram:hover { transform: scale(1.05); }
}

/* Yapımcı imzası — davetiyenin sakin diline karışmayacak kadar geri planda */
.site-credit {
  margin-top: 14px;
  font-family: var(--font-sans);
  font-size: 0.58rem;
  font-weight: 300;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
  line-height: 1.7;
}

.site-credit a {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid rgba(197, 160, 89, 0.35);
  padding-bottom: 1px;
  transition: color 0.3s ease, border-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .site-credit a:hover {
    color: var(--accent-gold);
    border-color: var(--accent-gold);
  }
}

/* --------------------------------------------------------------------------
   13. Müzik kontrolü — sağ ALT köşe (başlıkla çakışmaz)
   -------------------------------------------------------------------------- */
.audio-control-btn {
  position: fixed;
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  right: 20px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--border-line);
  color: var(--text-main);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s var(--ease-out-soft), background-color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
  .audio-control-btn:hover { transform: scale(1.06); background: #ffffff; }
}

.audio-control-btn.playing {
  color: var(--accent-gold);
  animation: pulse-border 2.4s ease-out infinite;
}

@keyframes pulse-border {
  0%   { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0.4); }
  70%  { box-shadow: 0 0 0 10px rgba(197, 160, 89, 0); }
  100% { box-shadow: 0 0 0 0 rgba(197, 160, 89, 0); }
}

.audio-icon { display: flex; }
.audio-icon svg { display: block; }

/* --------------------------------------------------------------------------
   14. Modal
   -------------------------------------------------------------------------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  overflow-y: auto;
  transition: opacity 0.4s var(--ease-out-soft), visibility 0.4s ease;
}

.modal-overlay.active { opacity: 1; visibility: visible; }

.modal-card {
  background: var(--bg-card);
  border-radius: 20px;
  padding: 32px 24px;
  width: 100%;
  max-width: 420px;
  position: relative;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.18);
  transform: scale(0.92) translateY(24px);
  transition: transform 0.4s var(--ease-out-soft);
}

.modal-overlay.active .modal-card { transform: scale(1) translateY(0); }

.modal-close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--text-muted);
  border-radius: 50%;
}

.modal-title {
  font-family: var(--font-kudry);
  font-size: 1.4rem;
  color: var(--text-main);
  text-align: center;
  margin-bottom: 8px;
}

.modal-subtitle {
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 24px;
}

.rsvp-form { display: flex; flex-direction: column; gap: 16px; }

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  text-align: left;
}

.form-group label {
  font-family: var(--font-sans);
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted);
}

.form-input, .form-select {
  padding: 12px 16px;
  border-radius: 10px;
  border: 1px solid var(--border-line);
  font-family: var(--font-serif);
  /* iOS Safari 16px altındaki girdilerde otomatik zoom yapar — 1rem şart */
  font-size: 1rem;
  outline: none;
  background: var(--bg-primary);
  color: var(--text-main);
  transition: border-color 0.25s ease;
}

.form-input:focus, .form-select:focus { border-color: var(--button-bg); }

.form-error {
  font-family: var(--font-sans);
  font-size: 0.76rem;
  letter-spacing: 0.4px;
  color: #A5372C;
}

/* --------------------------------------------------------------------------
   15. Scroll reveal
   -------------------------------------------------------------------------- */
.fade-in-up {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: opacity 0.85s var(--ease-out-soft), transform 0.85s var(--ease-out-soft);
}

.fade-in-up.visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* --------------------------------------------------------------------------
   16. Hareket azaltma tercihi
   Son iki kural kritik: yalnızca süreleri sıfırlarsak reveal öğeleri
   opacity:0'da takılır ve içerik HİÇ görünmez.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in-up {
    opacity: 1 !important;
    transform: none !important;
  }
  .header-names .ch { opacity: 1 !important; transform: none !important; }
  .bottom-indicator-line::after { display: none; }
}

/* --------------------------------------------------------------------------
   17. Duyarlılık
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
  :root { --header-h: 56px; }

  .anchor-mark { width: 150px; }
  .hero-date { font-size: 1.9rem; }
  .header-names { font-size: 0.62rem; letter-spacing: 0.13em; }
  .header-date { font-size: 0.55rem; }
  .header-inner { padding: 0 18px; gap: 10px; }

  .couples-grid { gap: 6px; }
  .couple-name, .couple-surname { font-size: 1.05rem; letter-spacing: 1.5px; }
  .parents-names { font-size: 0.8rem; letter-spacing: 0.5px; }
  .timer-number { font-size: 1.75rem; }
  .timer-label { font-size: 0.75rem; }
  .btn-primary, .btn-secondary {
    padding: 14px 18px;
    font-size: 0.78rem;
    letter-spacing: 1.5px;
  }
}

/* Çok dar ekranlarda isimleri gizle — monogram + tarih yeterli */
@media (max-width: 340px) {
  .header-names { display: none; }
}

/*
  Masaüstü: temel ölçüler 375px telefona göre kurulduğu için geniş ekranda
  başlık tipografisi bara göre küçük kalıyordu. Bar tam genişlikte olduğundan
  metnin de ölçek olarak büyümesi gerekiyor.
  Not: .mark-slot burada büyüdüğünde uçan monogramın hedef ölçeği kendiliğinden
  güncellenir — app.js sabit piksel kullanmıyor, yuvayı ÖLÇÜYOR.
*/
@media (min-width: 600px) {
  :root { --header-h: 68px; }

  .header-inner { padding: 0 28px; gap: 18px; }
  .mark-slot { width: 36px; }
  .header-names { font-size: 0.86rem; letter-spacing: 0.18em; }
  .header-date { font-size: 0.72rem; letter-spacing: 0.12em; }
}