/* ==========================================================================
   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;
  position: relative;

  /*
    'overflow-x: hidden' body'yi kaydırma kabına çevirir: spesifikasyon gereği
    bir eksen hidden olunca diğeri visible kalamaz ve overflow-y 'auto'ya döner.
    Bu, position:sticky'nin çalışmama sebeplerinin bir numarasıdır — sticky öğe
    viewport yerine bu kaba göre yapışmaya çalışır ve motorlar arasında farklı
    davranır. 'clip' ise kaydırma kabı YARATMAZ, sticky'ye dokunmaz.
  */
  overflow-x: clip;
}

/* clip desteklemeyen eski motorlarda eski davranışa dön (sahne sistemi
   o tarayıcılarda zaten JS öz denetimiyle kapanır — bkz. app.js). */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* Ö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. SAHNELER — VARSAYILAN (geri düşüş) durumu
   JS çalışmazsa burada kalınır: her sahne normal akan bir blok, her şey görünür.
   Sticky/absolute davranışı yalnızca html.scene-on ile devreye girer (bölüm 8b).
   -------------------------------------------------------------------------- */
.scene-track { position: relative; }

.scene-stage { position: relative; }

.scene {
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + var(--safe-top) + 24px) 24px 48px;
}

.scene-inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
}

.flow-section {
  padding: 40px 24px 60px;
  scroll-margin-top: calc(var(--header-h) + var(--safe-top));
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* --------------------------------------------------------------------------
   8b. SAHNELER — AKTİF durum (yalnızca JS devredeyken)
   -------------------------------------------------------------------------- */
@property --p { syntax: '<number>'; initial-value: 0; inherits: true; }

/*
  Track yüksekliği.
  Bu değer YALNIZCA JS ölçüm yapana kadar geçerli bir başlangıçtır; app.js
  onu sahnenin ölçülen gerçek yüksekliğinden PİKSEL olarak yeniden yazar.

  Neden: stage 100svh, track 320svh olarak ayrı ayrı hesaplanınca tarayıcılar
  svh'yi farklı anlarda/değerlerde çözdüğü için ikisi arasındaki oran kayıyordu.
  Aynı Chromium'un iki dağıtımı (Edge / Brave) bile farklı sonuç veriyordu.
  Pikselle bağlayınca oran her motorda birebir aynı olur.

  Geri düşüş sırası kritik: svh desteklenmeyen tarayıcıda ikinci bildirim
  düşer ve 320vh geçerli kalır. Önceden yalnızca svh vardı; desteklenmediğinde
  height:auto'ya düşüyor, sahneler position:absolute olduğu için track
  sıfır yüksekliğe çöküyor ve kaydırma aralığı tamamen yok oluyordu.
*/
html.scene-on .scene-track {
  height: 320vh;
  height: 320svh;
}

html.scene-on .scene-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  --p: 0;
}

html.scene-on .scene {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/*
  will-change üç tam ekran katmanı kalıcı olarak bellekte tutuyordu; düşük
  bellekli Android cihazlarda tarayıcı bu katmanları düşürüp animasyonu
  bozabiliyor. transform/opacity değişimi zaten kendiliğinden katman
  oluşturuyor, kalıcı ilan gereksiz. Yalnızca aktif sahnede açıyoruz.
*/
html.scene-on .scene--active { will-change: transform, opacity; }

/* Alt zaman çizelgeleri. clamp() ile 0–1 arasına sıkıştırılır. */
/*
  DİKKAT: .scene--cover'a transform UYGULANMAZ.
  #anchorMark bu sahnenin içinde ve dock'un measure() adımı onun
  getBoundingClientRect()'ini okuyor. Sahneye ölçek verilirse okunan rect de
  ölçeklenir ve FLIP'in başlangıç konumu bozulur. Kapağın çıkışını zaten
  çocuk öğeler (tarih yükselir, gösterge söner) ve monogramın dock'a gidişi
  taşıyor; sahne düzeyinde ölçek hem gereksiz hem zararlı.
*/
html.scene-on .scene--cover {
  --local: clamp(0, calc((0.42 - var(--p)) / 0.14), 1);  /* 1 → 0 (çıkış) */
  opacity: var(--local);
  pointer-events: none;
}

/* Kapak görünürken "aşağı kaydırın" bağlantısı tıklanabilir kalmalı —
   sahnenin pointer-events:none değeri onu da kapatıyordu.
   Görünmez hale geldiğinde tekrar kapatmayı sahne sürücüsü yapar (Task 4 Step 3);
   opaklıktan pointer-events türetmek saf CSS'te mümkün değil. */
html.scene-on .scene--cover #scrollHint { pointer-events: auto; }

html.scene-on .scene--cover .hero-date {
  opacity: clamp(0, calc((0.3 - var(--p)) / 0.12), 1);
  transform: translateY(calc((1 - clamp(0, calc((0.3 - var(--p)) / 0.12), 1)) * -24px));
}

html.scene-on .scene--cover #scrollHint,
html.scene-on .scene--cover .top-indicator-line {
  opacity: clamp(0, calc((0.22 - var(--p)) / 0.12), 1);
}

/* Çıpa görseli dock devredeyken yalnızca yer tutar (görünen #headerMark'tır),
   bu yüzden kapak sahnesinin opaklığı monogramı etkilemez. */

html.scene-on .scene--names {
  --local: clamp(0, calc((var(--p) - 0.28) / 0.14), 1);
  --exit:  clamp(0, calc((0.72 - var(--p)) / 0.14), 1);
  opacity: calc(var(--local) * var(--exit));
  pointer-events: none;
}

/* İmza ortadan iki yana açılır — "şekil değişiyor" hissinin ilk vuruşu */
html.scene-on .scene--names .calligraphy-img {
  --l: clamp(0, calc((var(--p) - 0.30) / 0.12), 1);
  clip-path: inset(0 calc((1 - var(--l)) * 50%) 0 calc((1 - var(--l)) * 50%));
}

html.scene-on .scene--names .evleniyoruz-title {
  --l: clamp(0, calc((var(--p) - 0.36) / 0.10), 1);
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 12px));
}

html.scene-on .scene--names .couple-column {
  --l: clamp(0, calc((var(--p) - 0.40) / 0.12), 1);
  opacity: var(--l);
}

html.scene-on .scene--names .couple-column--left {
  transform: translateX(calc((1 - var(--l)) * -40%));
}

html.scene-on .scene--names .couple-column--right {
  transform: translateX(calc((1 - var(--l)) * 40%));
}

html.scene-on .scene--names .slash-divider {
  --l: clamp(0, calc((var(--p) - 0.46) / 0.08), 1);
  opacity: var(--l);
  transform: scale(calc(0.6 + 0.4 * var(--l)));
}

html.scene-on .scene--when {
  --local: clamp(0, calc((var(--p) - 0.58) / 0.14), 1);
  opacity: var(--local);
  pointer-events: none;
}

/* İsim sütunları yukarı toplanırken zaman bloğu aşağıdan aynı alana yükselir */
html.scene-on .scene--names .couples-grid {
  --up: clamp(0, calc((var(--p) - 0.58) / 0.14), 1);
  transform: translateY(calc(var(--up) * -40px));
}

html.scene-on .scene--when .event-datetime-box {
  --l: clamp(0, calc((var(--p) - 0.60) / 0.12), 1);
  transform: translateY(calc((1 - var(--l)) * 60px));
}

html.scene-on .scene--when .location-box {
  --l: clamp(0, calc((var(--p) - 0.66) / 0.12), 1);
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 40px));
}

html.scene-on .scene--when .invitation-quote {
  --l: clamp(0, calc((var(--p) - 0.72) / 0.12), 1);
  opacity: var(--l);
  transform: translateY(calc((1 - var(--l)) * 28px));
}

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

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

.calligraphy-header {
  margin-bottom: 0;
  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; }
  .scene-track { height: auto !important; }
  .scene-stage { position: static !important; height: auto !important; overflow: visible !important; }
  .scene {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
  }
  .scene * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}

/* --------------------------------------------------------------------------
   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; }
}