/* ==========================================================================
   Dilara & Erdem — Düğün Davetiyesi
   style.css
   --------------------------------------------------------------------------
   İçindekiler
   1.  Değişkenler (renk, font, ölçü)
   2.  Sıfırlama & temel
   3.  Yardımcı sınıflar (container, eyebrow, ornament, note, sr-only)
   4.  Animasyonlar (reveal)
   5.  Açılış alanı (hero)
   6.  Bölüm iskeleti
   7.  Geri sayım
   8.  Davet metni
   9.  Aile bilgileri
   10. Etkinlik kartları (nişan & nikâh)
   11. Butonlar
   12. Katılım formu
   13. Kapanış & footer
   14. Müzik butonu
   15. Erişilebilirlik & hareket tercihi
   16. Yazdırma / PDF çıktısı (tek sayfa davetiye kartı)
   ========================================================================== */


/* 1. DEĞİŞKENLER
   ========================================================================== */
:root {
  /* Renkler — "UP / YUKARI BAKALIM" PALETİ
     Zemin: macera kitabı kâğıdı (sıcak krem) + gökyüzü mavisi.
     Renk balonlardan gelir: kırmızı, turuncu, sarı, yeşil, mavi, mor, turkuaz.
     ★ Tüm sayfanın rengini buradan değiştirebilirsiniz. */
  --c-bg:            #FFF9EF;  /* macera kitabı kâğıdı — ana zemin */
  --c-bg-alt:        #E8F5FC;  /* açık gökyüzü — ara bölümler */
  --c-surface:       #FFFFFF;  /* kart / panel / form */
  --c-ink:           #2F3A44;  /* koyu gece mavisi — başlıklar, isimler */
  --c-body:          #4A5560;  /* gövde metni */
  --c-muted:         #78838E;  /* soluk gri — küçük etiketler (AA) */

  --c-sky:           #3D93DC;  /* gökyüzü mavisi — ikinci vurgu */
  --c-sky-deep:      #24628F;  /* derin mavi — küçük yazılar okunaklı olsun */
  --c-sky-soft:      #D3ECFA;  /* açık mavi — seçim rengi, pencereler */

  --c-accent:        #E4483C;  /* macera kırmızısı — ana vurgu (çatı, balon) */
  --c-accent-deep:   #B7332B;  /* koyu kırmızı */
  --c-accent-soft:   #FBDDD8;  /* açık kırmızı */

  /* Balon renkleri — .b-kirmizi, .b-sari … sınıflarıyla kullanılır */
  --balon-kirmizi:   #E4483C;
  --balon-turuncu:   #F2843B;
  --balon-sari:      #F5C43F;
  --balon-yesil:     #4FA96B;
  --balon-mavi:      #3D93DC;
  --balon-mor:       #8E6BB5;
  --balon-turkuaz:   #35B0AB;

  --c-line:          rgba(61, 147, 220, 0.42);
  --c-line-soft:     rgba(47, 58, 68, 0.14);
  --c-line-leaf:     rgba(228, 72, 60, 0.30);

  /* İsimler, bölüm başlıkları ve rakamlarda kullanılan gökyüzü–gün batımı
     degradesi: derin mavi → mavi → macera kırmızısı → turuncu */
  --grad-name: linear-gradient(96deg,
                 #24628F 0%, #3D93DC 26%, #8E6BB5 46%, #E4483C 70%, #F2843B 88%, #24628F 100%);
  /* Buton ve vurgu şeritleri */
  --grad-accent: linear-gradient(100deg, var(--c-accent-deep), var(--balon-turuncu));
  --grad-leaf:   linear-gradient(100deg, #1E5478 0%, #3D93DC 48%, #24628F 100%);

  /* Desen katmanları — tamamı satır içi SVG, ek istek oluşturmaz.
     --geo-lattice : macera defteri karesi (ince mavi ızgara + kırmızı nokta)
     --geo-band    : bölüm kenarlarındaki uçuş rotası (kesik çizgi + balon)
     --geo-stud    : çerçeve köşelerine oturan minik balon
     --geo-key     : ince kesik çizgi şerit */
  --geo-lattice: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cg fill='none' stroke='%233D93DC' stroke-width='.7' opacity='.14'%3E%3Cpath d='M0 .35H40M.35 0V40'/%3E%3C/g%3E%3Ccircle cx='20' cy='20' r='1' fill='%23E4483C' opacity='.20'/%3E%3C/svg%3E");
  --geo-band: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='14' viewBox='0 0 132 14'%3E%3Cpath d='M0 8h56M76 8h56' fill='none' stroke='%233D93DC' stroke-width='1' stroke-linecap='round' stroke-dasharray='3 5' opacity='.6'/%3E%3Cg transform='translate(66 6) scale(.24)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23E4483C'/%3E%3Cpath d='M0 21.5 3.4 27.5H-3.4Z' fill='%23E4483C' opacity='.75'/%3E%3C/g%3E%3C/svg%3E");
  --geo-stud: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cg transform='translate(7 6) scale(.24)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23F2843B'/%3E%3Cpath d='M0 21.5 3.4 27.5H-3.4Z' fill='%23F2843B' opacity='.75'/%3E%3C/g%3E%3Cpath d='M7 11v2.6' stroke='%232F3A44' stroke-width='.7' opacity='.4'/%3E%3C/svg%3E");
  --geo-key: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M0 7h28' fill='none' stroke='%233D93DC' stroke-width='1' stroke-dasharray='4 4' opacity='.35'/%3E%3C/svg%3E");

  /* Tipografi
     --f-script : el yazısı — isimler, monogram, bölüm başlıkları, imzalar
     --f-body   : serif — gövde metinleri, davet metni, bilgi değerleri
     --f-sans   : yalnızca küçük büyük-harf etiketler ve buton yazıları */
  --f-script: "Great Vibes", "Segoe Script", "Brush Script MT", cursive;
  /* --f-hand : el yazısı — macera sloganı, notlar ve küçük etiketler.
     "Up" temasının macera defteri hissini bu font taşır. */
  --f-hand: "Caveat", "Segoe Script", "Comic Sans MS", cursive;
  --f-body: "Cormorant Garamond", "Times New Roman", Georgia, serif;
  --f-sans: "Jost", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Ölçüler */
  --max-w:        62rem;
  --max-w-narrow: 40rem;
  --pad-x:        clamp(1.25rem, 6vw, 2.5rem);
  --sp-section:   clamp(4.5rem, 13vw, 8.5rem);

  /* Geçişler */
  --ease: cubic-bezier(0.22, 0.68, 0.28, 1);
}


/* 2. SIFIRLAMA & TEMEL
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Kaydırma çubuğu sağdan yer kapıp içeriği sola kaydırmasın:
     her iki kenarda da aynı payı ayırır, böylece isimler ve çelenkler
     pencerenin TAM ortasında durur. */
  scrollbar-gutter: stable both-edges;
}

body {
  margin: 0;
  background-color: var(--c-bg);
  /* Krem zemin + sayfaya yayılmış dört yumuşak renk lekesi (pembe, mercan,
     yeşil, altın). Lekeler ekrana sabitlenir (fixed), böylece kaydırırken
     sayfa canlı bir suluboya kâğıdı gibi görünür. */
  background-image:
    var(--geo-lattice),
    radial-gradient(ellipse 60% 42% at  6% 10%, rgba( 61, 147, 220, 0.09), transparent 68%),
    radial-gradient(ellipse 55% 38% at 96% 34%, rgba(242, 132,  59, 0.07), transparent 68%),
    radial-gradient(ellipse 60% 42% at 12% 76%, rgba(228,  72,  60, 0.06), transparent 68%),
    radial-gradient(ellipse 55% 36% at 92% 96%, rgba(245, 196,  63, 0.07), transparent 68%);
  background-size: 40px 40px, auto, auto, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  background-attachment: scroll, fixed, fixed, fixed, fixed;
  color: var(--c-body);
  font-family: var(--f-body);
  font-weight: 400;
  /* Cormorant Garamond küçük göründüğü için taban punto biraz yüksek */
  font-size: clamp(1.2rem, 1.1rem + 0.45vw, 1.4rem);
  line-height: 1.85;
  letter-spacing: 0.005em;
  /* Cormorant varsayılan olarak eski usul rakam kullanır; tarih ve saatlerin
     aynı yükseklikte görünmesi için düz rakamlara geçiliyor. */
  font-variant-numeric: lining-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Başlıklar el yazısı.
   word-spacing: el yazısı fontta kelimeler ve "&" birbirine yapışık
   göründüğü için sözcük araları biraz açılıyor. */
h1, h2, h3 {
  font-family: var(--f-script);
  color: var(--c-ink);
  font-weight: 400;
  line-height: 1.25;
  margin: 0;
  letter-spacing: 0.01em;
  word-spacing: 0.16em;
}

p { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a { color: inherit; }

/* display değeri atanmış öğelerde de hidden özniteliği çalışsın */
[hidden] { display: none !important; }

::selection {
  background: var(--c-accent-soft);
  color: var(--c-ink);
}


/* 3. YARDIMCI SINIFLAR
   ========================================================================== */
.container {
  width: 100%;
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: var(--pad-x);
}

.container--narrow { max-width: var(--max-w-narrow); }

/* Bölüm üstü küçük etiket */
.eyebrow {
  margin: 0 0 0.9rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  text-align: center;
}

/* Macera ayracı: çizgi — üç balon — çizgi
   Ortadaki motif, ek etiket gerektirmemesi için satır içi SVG olarak
   arka plana yerleştirilmiştir. */
.ornament {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4.75rem;                 /* ortadaki motife yer açar */
  width: min(15rem, 78%);
  margin: 1.7rem auto;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 24'%3E%3Cg fill='none' stroke='%232F3A44' stroke-width='.8' opacity='.35' stroke-linecap='round'%3E%3Cpath d='M22 12C26 16 32 19 36 20'/%3E%3Cpath d='M36 10V20'/%3E%3Cpath d='M50 12C46 16 40 19 36 20'/%3E%3C/g%3E%3Cg transform='translate(22 6) scale(.19)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%233D93DC'/%3E%3Cpath d='M0 21.5 3.4 27.5H-3.4Z' fill='%233D93DC' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(36 4) scale(.23)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23E4483C'/%3E%3Cpath d='M0 21.5 3.4 27.5H-3.4Z' fill='%23E4483C' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(50 6) scale(.19)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23F5C43F'/%3E%3Cpath d='M0 21.5 3.4 27.5H-3.4Z' fill='%23F5C43F' opacity='.75'/%3E%3C/g%3E%3C/svg%3E"),
    var(--geo-stud),
    var(--geo-stud);
  background-repeat: no-repeat;
  background-position: center, left center, right center;
  background-size: 4.5rem 1.5rem, 0.6rem 0.6rem, 0.6rem 0.6rem;
}

.ornament::before,
.ornament::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}

.ornament--sm {
  width: min(9.5rem, 70%);
  gap: 3.5rem;
  margin: 1.2rem auto;
  background-size: 3.25rem 1.1rem, 0.45rem 0.45rem, 0.45rem 0.45rem;
}


/* 3b. GEOMETRİK DESEN & ÇERÇEVELER
   --------------------------------------------------------------------------
   .deco-frame : içi boş, yalnızca süs amaçlı bir <span>. Kapsayıcısının
   içine çift çizgili bir çerçeve ve dört köşesine elmas düğme koyar.
   Kapsayıcı position: relative olmalıdır.
   ========================================================================== */
.deco-frame {
  position: absolute;
  inset: clamp(0.9rem, 3.5vw, 2rem);
  z-index: 0;
  border: 1px solid var(--c-line);
  pointer-events: none;
}

/* İkinci (iç) çizgi — yaprak yeşili, daha sessiz */
.deco-frame::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid var(--c-line-leaf);
}

/* Dört köşedeki elmas düğmeler dış çizginin üzerine oturur */
.deco-frame::after {
  content: "";
  position: absolute;
  inset: -6px;
  background-image: var(--geo-stud), var(--geo-stud), var(--geo-stud), var(--geo-stud);
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 14px 14px;
}

/* Kart içindeki çerçeve daha dar ve daha ince */
.deco-frame--card {
  inset: 9px;
  border-color: var(--c-line-soft);
}

.deco-frame--card::before { inset: 5px; border-color: transparent; }

.deco-frame--card::after {
  inset: -5px;
  background-size: 12px 12px;
}

/* Kapanış bölümünün çerçevesi daha geniş nefes alır */
.deco-frame--closing { inset: clamp(1rem, 4vw, 2.25rem); }


/* Tekrarlı elmas şerit — koyu zeminli bölümlerin üst ve alt kenarında
   ince bir bordür oluşturur. */
.section--alt::before,
.section--alt::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background-image: var(--geo-band);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 132px 14px;
  pointer-events: none;
  opacity: 0.75;
}

.section--alt::before { top: clamp(0.9rem, 3vw, 1.5rem); }
.section--alt::after  { bottom: clamp(0.9rem, 3vw, 1.5rem); }

/* Arka arkaya iki koyu bölüm geldiğinde iki şerit üst üste binmesin */
.section--alt + .section--alt::before { content: none; }


/* ---- Çerçeveli panel ----
   .deco-frame ile aynı dil, fakat ek bir <span> gerektirmez:
   kendi kenarlığı + ::before iç çizgi + ::after köşe elmasları.
   Geri sayım, davet metni, aile bloğu ve katılım formunda kullanılır. */
.countdown,
.invitation,
.families,
.rsvp {
  position: relative;
  border: 1px solid var(--c-line);
  /* Zemin opak: altındaki gövde deseniyle üst üste binip moiré yapmasın */
  background-color: var(--c-surface);
  background-image: var(--geo-lattice);
  background-size: 40px 40px;
}

.countdown::before,
.invitation::before,
.families::before,
.rsvp::before {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid var(--c-line-leaf);
  pointer-events: none;
}

.countdown::after,
.invitation::after,
.families::after,
.rsvp::after {
  content: "";
  position: absolute;
  inset: -6px;
  background-image: var(--geo-stud), var(--geo-stud), var(--geo-stud), var(--geo-stud);
  background-repeat: no-repeat;
  background-position: left top, right top, left bottom, right bottom;
  background-size: 14px 14px;
  pointer-events: none;
}


/* ---- Çiçek buketleri (köşe süslemeleri) ----
   index.html içindeki #bl-cluster sembolünden üretilir. */
.deco-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---- Balon parçaları ----
   Balonlar dolgun ve net renklidir; ipler ve bulutlar sessiz kalır,
   böylece yazının önüne geçmezler.

   .bl-body   balon gövdesi      .bl-string  ip
   .bl-shine  balondaki parlama  .bl-cloud   bulut
   .bl-knot   balonun düğümü
   .bl-roof / .bl-wall / .bl-win / .bl-door / .bl-chimney  → uçan ev     */
.bl-body  { fill: var(--balon, var(--c-accent)); }
.bl-knot  { fill: var(--balon, var(--c-accent)); opacity: 0.75; }
.bl-shine { stroke: rgba(255, 255, 255, 0.72); stroke-width: 3.4; }

.bl-string { stroke: rgba(47, 58, 68, 0.38); stroke-width: 1.1; }

.bl-cloud { fill: #FFFFFF; opacity: 0.92; }

/* Uçan ev — masal kitabı gibi konturlu */
.bl-roof    { fill: var(--c-accent);      stroke: var(--c-ink); stroke-width: 1.6; stroke-linejoin: round; }
.bl-wall    { fill: #FBF0DE;              stroke: var(--c-ink); stroke-width: 1.6; }
.bl-chimney { fill: var(--c-accent-deep); stroke: var(--c-ink); stroke-width: 1.4; }
.bl-win     { fill: var(--c-sky-soft);    stroke: var(--c-ink); stroke-width: 1.4; }
.bl-door    { fill: var(--c-sky);         stroke: var(--c-ink); stroke-width: 1.4; }
.bl-porch   { stroke: var(--c-ink); stroke-width: 1.8; }

/* ---- Balon renkleri ----
   Bir <use> öğesine bu sınıflardan biri verilir; balon o renge boyanır.
   Kullanımı:  <use href="#bl-balloon" class="b-kirmizi" ... />
   Sınıf verilmezse balon macera kırmızısı olur.                          */
.b-kirmizi { --balon: var(--balon-kirmizi); }
.b-turuncu { --balon: var(--balon-turuncu); }
.b-sari    { --balon: var(--balon-sari);    }
.b-yesil   { --balon: var(--balon-yesil);   }
.b-mavi    { --balon: var(--balon-mavi);    }
.b-mor     { --balon: var(--balon-mor);     }
.b-turkuaz { --balon: var(--balon-turkuaz); }

.hero__deco,
.section__deco {
  position: absolute;
  z-index: 0;
  width: clamp(8rem, 20vw, 15rem);
  aspect-ratio: 1;
  pointer-events: none;
  user-select: none;
}

/* Dört köşe.
   Demet tek yönde çizilmiştir: balonlar SOL ÜSTTE, ipler SAĞ ALT köşede
   (248,248) birleşir. Sağ üst ve sol alt köşelerde yatayda aynalanır.

   ★ AYNALAMA, DIŞ ÖĞEYE DEĞİL SVG'NİN İÇİNE UYGULANIR (aşağıdaki "use"
     kuralı). Dış öğeye scaleX(-1) verilseydi, salınımın dönme merkezi
     yüzünden demet bir kutu boyu yana kayardı — köşeden ayrı düşerdi. */
.hero__deco--tl,
.section__deco--tl {
  top: clamp(0.4rem, 1.6vw, 1.25rem);
  left: clamp(0.4rem, 1.6vw, 1.25rem);
}

.hero__deco--tr,
.section__deco--tr {
  top: clamp(0.4rem, 1.6vw, 1.25rem);
  right: clamp(0.4rem, 1.6vw, 1.25rem);
}

.hero__deco--bl,
.section__deco--bl {
  bottom: clamp(0.4rem, 1.6vw, 1.25rem);
  left: clamp(0.4rem, 1.6vw, 1.25rem);
}

.hero__deco--br,
.section__deco--br {
  bottom: clamp(0.4rem, 1.6vw, 1.25rem);
  right: clamp(0.4rem, 1.6vw, 1.25rem);
}

/* Aynalama SVG'nin kendi koordinat sisteminde yapılır: içerik 250 birimlik
   kutunun içinde kalır, dış kutu hiç kıpırdamaz.
   Sol tarafa bakan köşeler: sağ üst (tr) ve sol alt (bl). */
.hero__deco--tr use,
.section__deco--tr use,
.hero__deco--bl use,
.section__deco--bl use,
.print-deco--tr use,
.print-deco--bl use {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translate(250px, 0) scale(-1, 1);
}

/* ---- Demetlerin salınımı ----
   rotate/scale ayrı CSS özellikleri olduğu için dış öğenin konumunu
   bozmazlar. Dört köşe farklı süre ve gecikmeyle salınır → hareket
   mekanik değil, hafif bir rüzgâr gibi görünür. */
.hero__deco,
.section__deco {
  /* Demet, iplerin bağlandığı uçtan salınır — tıpkı elde tutulan bir
     balon demeti gibi. Aynalanan köşelerde bu uç sol alta düşer. */
  transform-origin: 100% 100%;
  animation: sway 13s ease-in-out infinite;
  will-change: rotate, scale;
}

.hero__deco--tr, .section__deco--tr,
.hero__deco--bl, .section__deco--bl { transform-origin: 0% 100%; }

.hero__deco--tl, .section__deco--tl { animation-duration: 12s;   animation-delay: -1s; }
.hero__deco--tr, .section__deco--tr { animation-duration: 15s;   animation-delay: -4s; }
.hero__deco--bl, .section__deco--bl { animation-duration: 14s;   animation-delay: -7s; }
.hero__deco--br, .section__deco--br { animation-duration: 16.5s; animation-delay: -2s; }

/* Çelenk tam merkezinden salınır — böylece salınırken bile
   yatay ortası kaymaz. */
.hero__garland,
.section__garland {
  transform-origin: 50% 50%;
  animation: sway 17s ease-in-out infinite;
}

.hero__garland--b,
.section__garland--b { animation-duration: 19s; animation-delay: -6s; }

/* ---- Kenar çelenkleri ----
   Üst ve alt kenarın ortasına oturur; geniş ekranlarda köşe buketleri
   arasında kalan boşluğu kapatarak çerçeveyi çiçekle tamamlar. */
.hero__garland,
.section__garland {
  position: absolute;
  left: 50%;
  z-index: 0;
  width: clamp(13rem, 30vw, 22rem);
  aspect-ratio: 420 / 92;
  pointer-events: none;
  user-select: none;
}

/* Çelenkler kâğıdın en ucunda değil, çerçevenin bir tık içinde durur —
   köşe buketleriyle aynı hizada, sayfanın ortasına doğru yaklaşmış olur. */
.hero__garland--t,
.section__garland--t {
  top: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(-50%);
}

/* Alttaki çelenk ters çevrilmez (balonlar baş aşağı dönmesin),
   yalnızca yatayda aynalanır ki üsttekinin kopyası gibi durmasın. */
.hero__garland--b,
.section__garland--b {
  bottom: clamp(1.5rem, 4vw, 3rem);
  transform: translateX(-50%) scaleX(-1);
}

.section__garland { opacity: 0.8; }

/* Açılıştaki alt çelenk daha küçük ve daha aşağıda durur —
   aile isimleri satırının üstüne binmesin. */
.hero__garland--b {
  width: clamp(11rem, 24vw, 18rem);
  bottom: clamp(0.35rem, 1.2vw, 0.9rem);
}

/* Dar ekranda köşe buketleri zaten kenarları dolduruyor — çelenk gizlenir */
@media (max-width: 46em) {
  .hero__garland,
  .section__garland { display: none; }
}

/* ---- UÇAN EV ----
   Yavaşça yükselip alçalır.

   • GENİŞ EKRANDA: yazıların soluna, dikeyde ortaya konumlanır —
     böylece metinle hiç çakışmaz ve boş gökyüzünü doldurur.
     ★ Sağa almak için aşağıdaki "SAĞA ALMAK İÇİN" notuna bakın.
   • DAR EKRANDA (telefon): yanda yer kalmadığı için akışın içinde,
     çizimin hemen üstünde durur.                                        */
.hero__house {
  display: block;
  width: clamp(6rem, 17vw, 8.5rem);
  aspect-ratio: 240 / 300;
  margin: 0 auto clamp(0.2rem, 1vw, 0.6rem);
  pointer-events: none;
  user-select: none;
  animation: drift 11s ease-in-out infinite;

  /* Sayfa kaydıkça ev göğe doğru uçar — bu değerleri script.js hesaplar.
     "transform" kullanılır; süzülme animasyonu ise "translate/rotate"
     kullandığı için ikisi birbirini ezmez, üst üste biner. */
  transform: translate(var(--ucus-x, 0px), var(--ucus-y, 0px)) scale(var(--ucus-olcek, 1));
  opacity: var(--ucus-opak, 1);
  will-change: transform, translate, rotate;
}

@media (min-width: 60em) {
  .hero__house {
    position: absolute;
    z-index: 0;
    top: 50%;
    width: clamp(9rem, 17vw, 14rem);
    /* Dikey ortalama "translate" ile DEĞİL, margin ile yapılır:
       translate'i süzülme animasyonu kullanıyor. */
    margin: calc(clamp(9rem, 17vw, 14rem) * -0.625) 0 0;

    /* ★ SAĞA ALMAK İÇİN: aşağıdaki "left" satırını silip yerine
         right: clamp(1rem, 5vw, 6rem);   yazmanız yeterlidir. */
    left: clamp(1rem, 5vw, 6rem);

    animation: drift-side 12s ease-in-out infinite;
  }
}

/* ---- SÜZÜLEN BULUTLAR ----
   Açılış ekranını soldan sağa geçerler. Çok yavaş ve çok soluk. */
.hero__cloud {
  position: absolute;
  z-index: 0;
  width: clamp(6rem, 16vw, 11rem);
  aspect-ratio: 2 / 1;
  opacity: 0.85;
  pointer-events: none;
  user-select: none;
  animation: cloud-pass linear infinite;
}

.hero__cloud--1 { top: 18%; animation-duration: 78s; animation-delay: -12s; }
.hero__cloud--2 { top: 46%; animation-duration: 104s; animation-delay: -60s; opacity: 0.6; width: clamp(4.5rem, 11vw, 8rem); }
.hero__cloud--3 { top: 72%; animation-duration: 92s; animation-delay: -34s; opacity: 0.75; }

/* Bölüm demetleri metnin gerisinde kalsın diye daha küçük ve daha sessiz */
.section__deco {
  width: clamp(7rem, 24vw, 11.5rem);
  opacity: 0.5;
}

/* Kapanış bölümündeki dört buket biraz daha belirgin */
.section--closing .section__deco {
  width: clamp(8rem, 28vw, 13rem);
  opacity: 0.72;
}

/* Dar ekranda demetler metnin üstüne binmesin diye küçülür */
@media (max-width: 40em) {
  .hero__deco { width: 6.5rem; }
  /* Alt köşedekiler aile isimlerinin hizasına geldiği için daha da küçük */
  .hero__deco--bl,
  .hero__deco--br { width: 5.5rem; opacity: 0.75; }

  /* Yükselen balonların yarısı gizlenir — yazıların üstünden daha az
     balon geçer, sayfa okunaklı kalır. */
  .balloons i:nth-child(2n) { display: none; }

  .section__deco { width: 5.75rem; opacity: 0.4; }
  .section--closing .section__deco { width: 7rem; opacity: 0.6; }
}

/* ---- Çift çizimleri ----
   assets/ içindeki PNG'lerin zemini saydamdır (beyaz alan silinmiş,
   çizgiler --c-ink mürekkebine boyanmıştır). Bu yüzden çerçeve, kutu veya
   karışım moduna gerek yoktur: çizim doğrudan sayfanın deseni üzerinde
   durur, sanki oraya çizilmiş gibi görünür. */
/* ★ ÇİZGİ FİLM ÇİZİMLERİ SAYFANIN BAŞ KAHRAMANIDIR
   Çizimler kurşun kalem (gri) olduğu için üç şey yapılır:
     1) arkalarına renkli, yumuşak bir madalyon konur,
     2) sıcak bir tonlama (filter) ile krem–şeftali rengine boyanır,
        böylece gri kalmaz, sayfanın paletine karışır,
     3) usulca yukarı-aşağı süzülür (float) — çizim canlı görünür.

   ★ TONLAMAYI KAPATMAK İSTERSENİZ: aşağıdaki --portrait-tint satırını
     "none" yapın; çizim orijinal gri hâline döner. */
.portrait {
  --portrait-tint: sepia(0.42) saturate(1.5) hue-rotate(-8deg) contrast(1.06) brightness(1.03);
  --blob-1: rgba( 61, 147, 220, 0.40);
  --blob-2: rgba(245, 196,  63, 0.40);

  position: relative;
  display: block;
  margin: 0 auto;
  isolation: isolate;
}

/* Arkadaki renkli madalyon — organik, hafif dönen bir leke */
.portrait::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -14% -12% -6%;
  background-image:
    radial-gradient(circle at 32% 30%, var(--blob-1), transparent 62%),
    radial-gradient(circle at 70% 68%, var(--blob-2), transparent 62%);
  border-radius: 52% 48% 44% 56% / 58% 42% 58% 42%;
  animation: blob 16s ease-in-out infinite;
}

@keyframes blob {
  0%, 100% { border-radius: 52% 48% 44% 56% / 58% 42% 58% 42%; rotate: -2deg; }
  50%      { border-radius: 44% 56% 56% 44% / 44% 56% 44% 56%; rotate:  2deg; }
}

.portrait__img {
  filter: var(--portrait-tint) drop-shadow(0 8px 16px rgba(183, 51, 43, 0.20));
  animation: float 9s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { translate: 0 0;      }
  50%      { translate: 0 -0.5rem; }
}

/* Alt kenardaki yumuşak geçiş PNG'nin alfa kanalına gömülüdür — CSS
   mask-image kullanılmaz, çünkü Chrome yazdırırken maskeli görseli
   tamamen düşürüyor ve PDF'te resim çıkmıyor. */
.portrait__img {
  display: block;
  width: 100%;
  height: auto;
}

/* Açılış ekranında — isimlerin üstünde, sayfayı açanın ilk gördüğü şey.
   Çizim öne çıksın diye büyütüldü; yine de açılış tek ekranda kalır. */
.portrait--hero {
  width: clamp(7rem, 24vw, 10rem);
  margin-bottom: clamp(0.5rem, 1.8vw, 0.9rem);
}

/* Davet metninin üstünde — en büyük hâli */
.portrait--invite {
  width: clamp(13rem, 52vw, 18rem);
  margin-bottom: clamp(1.5rem, 4.5vw, 2.25rem);
  --blob-1: rgba(242, 132, 59, 0.36);
  --blob-2: rgba( 79, 169, 107, 0.30);
}

/* Kapanış bölümünde — en küçük hâli */
.portrait--closing {
  width: clamp(6.5rem, 24vw, 9rem);
  margin-bottom: clamp(1rem, 3vw, 1.4rem);
  --blob-1: rgba(142, 107, 181, 0.30);
  --blob-2: rgba(228,  72,  60, 0.28);
}

/* Küçük açıklama notu */
.note {
  max-width: 34rem;
  margin: 2.2rem auto 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--c-muted);
  text-align: center;
  font-style: italic;
}

.note--center { margin-top: 1.6rem; }

/* Henüz doldurulmamış [KÖŞELİ PARANTEZ] alanlar */
.is-placeholder {
  color: var(--c-muted);
  text-decoration: underline dashed rgba(61, 147, 220, 0.65);
  text-underline-offset: 0.3em;
  text-decoration-thickness: 1px;
}

/* Ekran okuyucu metni */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 100;
  background: var(--c-ink);
  color: var(--c-bg);
  padding: 0.6rem 1.2rem;
  font-family: var(--f-sans);
  font-size: 0.85rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  border-radius: 0 0 4px 4px;
  transition: transform 0.2s var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 4px;
  border-radius: 2px;
}


/* 4. ANİMASYONLAR
   ========================================================================== */
/* Gizleme yalnızca JavaScript çalışıyorsa uygulanır (html.js sınıfı),
   böylece JS kapalıyken sayfa boş görünmez. */
.js .reveal {
  opacity: 0;
  transform: translateY(1.4rem);
  transition:
    opacity 1s var(--ease),
    transform 1s var(--ease);
  transition-delay: calc(var(--delay, 0) * 110ms);
}

.js .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---- Sayfaya hayat veren yavaş hareketler ----
   Hepsi çok yavaş ve küçük genlikli: göz yormaz, sayfa "nefes alıyor"
   gibi görünür. prefers-reduced-motion açıksa hepsi durur (bkz. bölüm 15). */

/* Balon demetleri hafifçe salınır.
   ★ ÖNEMLİ: burada "transform" DEĞİL, bağımsız "rotate" / "scale"
   özellikleri kullanılır. Aksi hâlde animasyon, öğenin kendi
   transform'unu (çelenkleri ortalayan translateX(-50%) ve sağ köşeleri
   aynalayan scaleX(-1)) ezer; çelenkler ortadan kayar. */
@keyframes sway {
  0%, 100% { rotate: -1.6deg; scale: 1;    }
  50%      { rotate:  1.6deg; scale: 1.03; }
}

/* Uçan evin yavaş süzülmesi */
@keyframes drift {
  0%, 100% { translate: 0 0;        rotate: -1.2deg; }
  50%      { translate: 0 -1.1rem;  rotate:  1.2deg; }
}

/* Yanda dururken biraz daha geniş bir süzülme */
@keyframes drift-side {
  0%, 100% { translate: 0 0;              rotate: -1.6deg; }
  50%      { translate: 0.7rem -1.6rem;   rotate:  1.6deg; }
}

/* Bulutların yatay geçişi */
@keyframes cloud-pass {
  from { transform: translateX(-16vw); }
  to   { transform: translateX(116vw); }
}

/* Isim ve başlıklardaki degradenin usulca kayması */
@keyframes shimmer {
  0%, 100% { background-position:   0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* Renk lekelerinin yavaşça yer değiştirmesi */
@keyframes aurora {
  0%   { transform: translate3d(0, 0, 0) scale(1);          }
  33%  { transform: translate3d(2.5%, -2%, 0) scale(1.08);  }
  66%  { transform: translate3d(-2%, 2.5%, 0) scale(1.04);  }
  100% { transform: translate3d(0, 0, 0) scale(1);          }
}

/* Nabız gibi büyüyüp küçülen küçük vurgular (monogram &, kalp) */
@keyframes beat {
  0%, 100% { transform: scale(1);    opacity: 1;    }
  50%      { transform: scale(1.14); opacity: 0.82; }
}

/* Saniye rakamının hafif atışı — saatin tik'i gibi, çok küçük */
@keyframes tick {
  0%, 70%, 100% { transform: scale(1);    }
  85%           { transform: scale(1.06); }
}

/* Yükselen balonlar — aşağıdan çıkıp yukarı süzülürler */
@keyframes balloon-rise {
  0%   { transform: translate3d(0, 12vh, 0)   rotate(-6deg); opacity: 0; }
  10%  {                                                     opacity: var(--balon-op, 0.75); }
  50%  { transform: translate3d(4vw, -50vh, 0) rotate(5deg); opacity: var(--balon-op, 0.75); }
  90%  {                                                     opacity: var(--balon-op, 0.75); }
  100% { transform: translate3d(-2vw, -112vh, 0) rotate(-4deg); opacity: 0; }
}


/* ---- Yükselen balonlar katmanı ----
   index.html'de <div class="balloons"> içindeki boş <i> öğeleridir.
   Balon sayısını azaltmak/çoğaltmak için orada <i> ekleyip çıkarın. */
.balloons {
  position: fixed;
  inset: 0;
  z-index: 45;
  overflow: hidden;
  pointer-events: none;
}

.balloons i {
  position: absolute;
  bottom: 0;
  left: var(--x, 50%);
  width: var(--size, 22px);
  aspect-ratio: 34 / 55;
  background: var(--balon-img) no-repeat center / contain;
  animation: balloon-rise var(--dur, 26s) linear var(--delay, 0s) infinite;
  will-change: transform;
}

/* Balon çizimi — gövde + parlama + ip.
   Renk sırası: kırmızı · sarı · mavi · turuncu (dörtlü döner) */
.balloons i {
  --balon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 55'%3E%3Cpath d='M17 1C26.4 1 34 8.6 34 18.4 34 27.2 28.4 35.6 20.4 40.8L17 47 13.6 40.8C5.6 35.6 0 27.2 0 18.4 0 8.6 7.6 1 17 1Z' fill='%23E4483C'/%3E%3Cpath d='M17 45.5 20.4 51H13.6Z' fill='%23E4483C' opacity='.75'/%3E%3Cpath d='M17 51C17 53 15 54 17 55' stroke='%232F3A44' stroke-width='.9' fill='none' opacity='.4'/%3E%3Cpath d='M7.6 9.6C9.6 6.2 12.8 4.4 15.8 4.6' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' fill='none' opacity='.7'/%3E%3C/svg%3E");
}

.balloons i:nth-child(4n + 2) {
  --balon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 55'%3E%3Cpath d='M17 1C26.4 1 34 8.6 34 18.4 34 27.2 28.4 35.6 20.4 40.8L17 47 13.6 40.8C5.6 35.6 0 27.2 0 18.4 0 8.6 7.6 1 17 1Z' fill='%23F5C43F'/%3E%3Cpath d='M17 45.5 20.4 51H13.6Z' fill='%23F5C43F' opacity='.75'/%3E%3Cpath d='M17 51C17 53 15 54 17 55' stroke='%232F3A44' stroke-width='.9' fill='none' opacity='.4'/%3E%3Cpath d='M7.6 9.6C9.6 6.2 12.8 4.4 15.8 4.6' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' fill='none' opacity='.7'/%3E%3C/svg%3E");
}

.balloons i:nth-child(4n + 3) {
  --balon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 55'%3E%3Cpath d='M17 1C26.4 1 34 8.6 34 18.4 34 27.2 28.4 35.6 20.4 40.8L17 47 13.6 40.8C5.6 35.6 0 27.2 0 18.4 0 8.6 7.6 1 17 1Z' fill='%233D93DC'/%3E%3Cpath d='M17 45.5 20.4 51H13.6Z' fill='%233D93DC' opacity='.75'/%3E%3Cpath d='M17 51C17 53 15 54 17 55' stroke='%232F3A44' stroke-width='.9' fill='none' opacity='.4'/%3E%3Cpath d='M7.6 9.6C9.6 6.2 12.8 4.4 15.8 4.6' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' fill='none' opacity='.7'/%3E%3C/svg%3E");
}

.balloons i:nth-child(4n) {
  --balon-img: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 55'%3E%3Cpath d='M17 1C26.4 1 34 8.6 34 18.4 34 27.2 28.4 35.6 20.4 40.8L17 47 13.6 40.8C5.6 35.6 0 27.2 0 18.4 0 8.6 7.6 1 17 1Z' fill='%23F2843B'/%3E%3Cpath d='M17 45.5 20.4 51H13.6Z' fill='%23F2843B' opacity='.75'/%3E%3Cpath d='M17 51C17 53 15 54 17 55' stroke='%232F3A44' stroke-width='.9' fill='none' opacity='.4'/%3E%3Cpath d='M7.6 9.6C9.6 6.2 12.8 4.4 15.8 4.6' stroke='%23ffffff' stroke-width='3.4' stroke-linecap='round' fill='none' opacity='.7'/%3E%3C/svg%3E");
}


/* 5. AÇILIŞ ALANI (HERO)
   ========================================================================== */
.hero {
  position: relative;
  /* AÇILIŞ = GÖKYÜZÜ. Üstte açık mavi, aşağı indikçe kâğıt kremine döner;
     böylece uçan ev gökte, yazılar yerde durur gibi görünür. */
  background-image:
    linear-gradient(180deg,
      #B7E1F5 0%,
      #D5EEFA 26%,
      #EDF6F6 52%,
      var(--c-bg) 82%);
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* Uçan ev artık akışın içinde olduğu için üstte fazladan yer gerekmez;
     paylar yalnızca köşe demetleri ve alt çelenk içindir. */
  padding: clamp(5rem, 11vh, 7.5rem) 0 clamp(7rem, 15vh, 10rem);
  overflow: hidden;
}

/* Açılış çerçevesi .deco-frame--hero <span>'ı ile çiziliyor
   (çift çizgi + köşe elmasları). Buradaki üçüncü, en dış çizgi
   çerçeveye derinlik verir. */
.hero::before {
  content: "";
  position: absolute;
  inset: clamp(0.4rem, 1.8vw, 1rem);
  border: 1px solid rgba(61, 147, 220, 0.32);
  pointer-events: none;
  z-index: 1;
}

/* Gökyüzündeki ağır ağır yer değiştiren ışık — güneşin gökte gezinmesi
   gibi. Metnin altında kalır, tıklamayı engellemez. */
.hero::after {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at 24% 20%, rgba(255, 232, 160, 0.42), transparent 34%),
    radial-gradient(circle at 78% 32%, rgba(255, 255, 255, 0.55), transparent 32%),
    radial-gradient(circle at 58% 62%, rgba(61, 147, 220, 0.10), transparent 36%);
  filter: blur(14px);
  animation: aurora 30s ease-in-out infinite;
  will-change: transform;
}

/* NOT: burada bilerek "position: relative" YOKTUR — uçan evin geniş
   ekranda sayfanın soluna konumlanabilmesi için konum çerçevesi .hero
   olmalıdır. Esnek kutu öğesi olduğu için z-index konumsuz da çalışır. */
.hero__inner {
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Monogram */
.monogram {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: clamp(5.5rem, 20vw, 6.75rem);
  height: clamp(5.5rem, 20vw, 6.75rem);
  border: 1px solid var(--c-line);
  border-radius: 50%;
  font-family: var(--f-script);
  font-size: clamp(1.9rem, 7vw, 2.45rem);
  line-height: 1;
  letter-spacing: 0.02em;
  color: var(--c-ink);
  margin-bottom: clamp(1.75rem, 5vw, 2.5rem);
}

.monogram__amp {
  color: var(--balon-turuncu);
  font-size: 0.8em;
  animation: beat 5.5s ease-in-out infinite;
}

.monogram--sm {
  width: 4.5rem;
  height: 4.5rem;
  font-size: 1.4rem;
  margin: 0 auto clamp(1.5rem, 5vw, 2rem);
}

/* Açılıştaki aile isimleri — tören bilgilerinin altında.
   Serif + büyük harf: bir etiket gibi değil, isim gibi okunur.

   HİZALAMA: Üstteki .hero-summary ile BİREBİR aynı ızgara ve aynı
   max-width kullanılır. Böylece her aile kendi töreninin sütunuyla,
   ortadaki ✦ da üstteki dikey ayraç çizgisiyle tam aynı eksene gelir. */
.hero__families {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 30rem;                       /* .hero-summary ile aynı */
  margin: clamp(1.35rem, 4vw, 1.9rem) auto 0;
  font-family: var(--f-body);
  font-size: clamp(0.9rem, 3.2vw, 1.06rem);
  line-height: 1.6;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--c-body);
}

/* Simetrik iç boşluk — hizalama ızgaradan geldiği için dar tutulabilir,
   böylece "FATMA & MUSTAFA" gibi uzun satırlar tek satırda kalır. */
.hero__family { padding-inline: 0.3rem; }

/* Soyadı burada da bir satır altında */
.hero__family-surname {
  display: block;
  margin-top: 0.05rem;
  letter-spacing: 0.14em;
}

.hero__family-amp {
  color: var(--c-accent);
  font-family: var(--f-script);
  font-size: 1.3em;
  text-transform: none;
  letter-spacing: 0;
  padding-inline: 0.1em;
}

/* Ayraç, ızgaranın tam ortasına sabitlenir — üstteki çizgiyle aynı eksen */
.hero__families-sep {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: var(--c-accent);
  font-size: 0.78rem;
  line-height: 1;
}

/* El yazısı fontun uzantıları kesilmesin diye line-height 1'in üzerinde */
.hero__names {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(3.6rem, 18vw, 7rem);
  line-height: 1.16;
  letter-spacing: 0.01em;
  margin: 0;
}

/* İsimler artık düz mürekkep değil, gül–mercan degradesi.
   background-size %220 olduğu için degrade harflerin üzerinde ağır ağır
   kayar (shimmer) — yazı canlı, ışık alıyormuş gibi durur. */
.hero__name {
  display: block;
  background-image: var(--grad-name);
  background-size: 220% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 16s ease-in-out infinite;
}

/* İkinci isim (Erdem) degradeyi yarım tur kaymış hâlde kullanır —
   iki isim aynı anda aynı rengi almaz. */
.hero__name:last-of-type { animation-delay: -8s; }

.hero__amp {
  display: block;
  font-size: 0.5em;
  color: var(--balon-turuncu);
  line-height: 1.1;
  margin-block: -0.08em;
  animation: beat 5.5s ease-in-out infinite;
}

/* ---- Macera sloganı ----
   Ayracın yerini tutar: iki yanında kesik çizgi, ortada el yazısı metin.
   Böylece fazladan dikey yer kaplamaz. */
.hero__tagline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.9rem;
  width: min(24rem, 92%);
  margin: clamp(0.9rem, 3vw, 1.5rem) auto clamp(0.9rem, 3vw, 1.4rem);
  font-family: var(--f-hand);
  font-size: clamp(1.32rem, 4.9vw, 1.72rem);
  line-height: 1.2;
  color: var(--c-accent-deep);
}

.hero__tagline::before,
.hero__tagline::after {
  content: "";
  flex: 1;
  height: 1px;
  background-image: linear-gradient(90deg, transparent, var(--c-sky) 45%, var(--c-sky) 55%, transparent);
  opacity: 0.55;
}

.hero__text {
  max-width: 33rem;
  margin: 0 auto;
  font-size: clamp(1.08rem, 1rem + 0.45vw, 1.26rem);
  line-height: 1.9;
  color: var(--c-body);
}

/* ---- Açılış özeti: iki törenin tarih / saat / mekân / şehir bilgisi ----
   Amaç: misafir aşağı kaydırmadan tüm özeti ilk ekranda görsün. */
.hero-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  max-width: 30rem;
  margin: clamp(1.5rem, 4.5vw, 2.25rem) auto 0;
  padding-top: clamp(1.1rem, 3.5vw, 1.6rem);
  border-top: 1px solid var(--c-line);
}

.hero-summary__item {
  position: relative;
  padding-inline: clamp(0.4rem, 2.5vw, 1rem);
}

/* İki tören arasındaki ince pembe ayraç */
.hero-summary__item + .hero-summary__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4%;
  height: 92%;
  width: 1px;
  background: var(--c-line);
}

.hero-summary__label {
  margin: 0 0 0.5rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  text-indent: 0.28em;
}

.hero-summary__value { margin: 0; }

.hero-summary__date,
.hero-summary__time {
  display: block;
  font-family: var(--f-body);
  font-size: clamp(1.08rem, 4vw, 1.28rem);
  line-height: 1.4;
  color: var(--c-ink);
}

.hero-summary__place {
  display: block;
  margin-top: 0.45rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.13em;
  line-height: 1.65;
  text-transform: uppercase;
  color: var(--c-muted);
}

.hero-summary__place > span { display: block; }

.hero-summary__city { color: var(--c-accent-deep); }

/* Açılış özetindeki doldurulmamış alanlar daha sessiz görünsün */
.hero-summary .is-placeholder {
  text-decoration-color: rgba(61, 147, 220, 0.50);
}

/* Kısa ekranlarda (yatay telefon, küçük telefonlar) açılış alanı sıkışır —
   aile isimleri, çift adı ve iki törenin özeti tek ekrana sığsın diye. */
@media (max-height: 900px) {
  .hero { padding-block: clamp(2.25rem, 5.5vh, 3.25rem) clamp(3.5rem, 8vh, 4.75rem); }

  /* Alçak ekranda süslemeler de küçülür — metnin üstüne binmesinler */
  .hero__deco { width: clamp(6.5rem, 16vw, 9.5rem); }
  .hero__garland { width: clamp(11rem, 24vw, 16rem); }

  .monogram {
    width: clamp(4.25rem, 14vw, 5rem);
    height: clamp(4.25rem, 14vw, 5rem);
    font-size: clamp(1.35rem, 4.5vw, 1.6rem);
    margin-bottom: clamp(0.9rem, 2.5vw, 1.25rem);
  }

  /* Alçak ekranda uçan ev ve çizim küçülür ki her şey tek ekrana sığsın */
  .hero__house {
    width: clamp(5.25rem, 15vw, 7rem);
    margin-bottom: 0;
  }

  .portrait--hero {
    width: clamp(5.5rem, 17vw, 7rem);
    margin-bottom: clamp(0.3rem, 1.2vw, 0.6rem);
  }

  .hero__families { margin-bottom: clamp(0.7rem, 2vw, 1rem); }

  .hero__names { font-size: clamp(2.8rem, 13vw, 4.25rem); }

  .hero .ornament,
  .hero__tagline { margin-block: clamp(0.5rem, 1.6vw, 0.85rem); }

  .hero__text {
    font-size: clamp(0.9rem, 3.4vw, 1rem);
    line-height: 1.75;
  }

  .hero-summary {
    margin-top: clamp(1rem, 3vw, 1.5rem);
    padding-top: clamp(0.85rem, 2.5vw, 1.2rem);
  }

  .hero__families { margin-top: clamp(1rem, 3vw, 1.4rem); }
}

/* Çok alçak ekranda (dizüstü, yatay telefon) çelenk tamamen kalkar,
   böylece açılış içeriği tek ekrana daha rahat sığar. */
@media (max-height: 760px) {
  .hero__garland { display: none; }
}


/* 6. BÖLÜM İSKELETİ
   ========================================================================== */
.section {
  padding-block: var(--sp-section);
  text-align: center;
  position: relative;
  overflow: hidden;   /* köşe buketleri taşmasın */
}

/* İçerik her zaman süslemelerin (buket, şerit, çerçeve) üstünde kalır */
.section > .container {
  position: relative;
  z-index: 1;
}

/* Koyu zeminli bölümler gövdenin dokusunu örttüğü için deseni
   kendileri taşır. */
.section--alt {
  background-color: var(--c-bg-alt);
  background-image:
    var(--geo-lattice),
    radial-gradient(ellipse 70% 60% at 15% 0%,   rgba(242, 132, 59, 0.16), transparent 70%),
    radial-gradient(ellipse 70% 60% at 85% 100%, rgba( 92, 154,  95, 0.16), transparent 70%);
  background-size: 40px 40px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
  border-block: 1px solid var(--c-line);
}

.section--flush { padding-block: clamp(3rem, 9vw, 5rem); }

/* Bölüm başlıkları da isimlerle aynı degradeyi kullanır — sayfa boyunca
   tekrar eden sıcak bir renk vurgusu olur. */
.section__title,
.event-card__title {
  font-size: clamp(2.7rem, 10vw, 3.9rem);
  line-height: 1.2;
  padding-bottom: 0.1em;   /* el yazısı uzantıları için pay */
  background-image: var(--grad-name);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 18s ease-in-out infinite;
}

.section__text {
  max-width: 33rem;
  margin: 0 auto;
  line-height: 1.9;
}


/* 7. GERİ SAYIM
   ========================================================================== */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: 34rem;
  margin: clamp(1.75rem, 5vw, 2.5rem) auto 0;
  padding: clamp(1.1rem, 3.5vw, 1.6rem) clamp(0.5rem, 2.5vw, 1.25rem);
}

.countdown__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  padding: 0.5rem clamp(0.15rem, 1.5vw, 0.75rem);
}

.countdown__item + .countdown__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15%;
  height: 70%;
  width: 1px;
  background: var(--c-line);
}

/* Rakamlar okunaklı kalsın diye serif — el yazısı kullanılmaz.
   Renk: gül–mercan degradesi, yavaşça kayar. */
.countdown__value {
  font-family: var(--f-body);
  font-size: clamp(2.4rem, 12vw, 3.9rem);
  font-weight: 400;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  background-image: var(--grad-name);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: shimmer 10s ease-in-out infinite;
}

/* Saniye hanesi, saat gibi usulca atar */
.countdown__item:last-child .countdown__value {
  animation: shimmer 10s ease-in-out infinite, tick 1s ease-in-out infinite;
}

.countdown__label {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: clamp(0.68rem, 2.8vw, 0.8rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
}

/* Tarih henüz girilmemişken görünen bilgi satırı */
.countdown__note {
  max-width: 30rem;
  margin: clamp(1.75rem, 5vw, 2.25rem) auto 0;
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(1.26rem, 4.4vw, 1.46rem);
  color: var(--c-muted);
}

.countdown__done {
  margin-top: 1.75rem;
  font-family: var(--f-script);
  font-size: 1.9rem;
  line-height: 1.4;
  color: var(--c-accent-deep);
}


/* 8. DAVET METNİ
   ========================================================================== */
.invitation {
  margin: clamp(2rem, 6vw, 2.75rem) 0 0;
  padding: clamp(2.5rem, 7vw, 3.25rem) clamp(1.5rem, 5vw, 2.75rem) clamp(2rem, 6vw, 2.75rem);
  font-size: clamp(1.3rem, 1.18rem + 0.55vw, 1.55rem);
  line-height: 1.95;
  color: var(--c-body);
}

/* Davet metninin üstünde, çerçevenin iç kenarına oturan küçük dal */
.invitation__sprig {
  position: absolute;
  top: clamp(0.9rem, 3vw, 1.25rem);
  left: 50%;
  width: clamp(6.5rem, 26vw, 9rem);
  height: auto;
  aspect-ratio: 140 / 44;
  transform: translateX(-50%);
  pointer-events: none;
}

.invitation p { margin-bottom: 1.5em; }

.invitation__sign {
  margin-top: 2.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.invitation__sign cite {
  font-family: var(--f-script);
  font-style: normal;
  font-size: clamp(2.2rem, 8.5vw, 2.9rem);
  line-height: 1.4;
  color: var(--c-ink);
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
}


/* 9. AİLE BİLGİLERİ
   ========================================================================== */
/* İki aile bloğu üstten hizalanır; isimler farklı uzunlukta olsa da
   başlıklar aynı satırda başlar. */
.families {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 6vw, 2.75rem);
  align-items: start;
  max-width: 48rem;
  margin: clamp(2rem, 6vw, 3rem) auto 0;
  padding: clamp(1.75rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2.25rem);
}

/* Masaüstünde yan yana, aralarında ince pembe ayraç */
@media (min-width: 44em) {
  .families { grid-template-columns: 1fr auto 1fr; }
}

.families__divider {
  width: min(9rem, 55%);
  height: 1px;
  justify-self: center;
  align-self: center;
  background: linear-gradient(90deg, transparent, var(--c-line), transparent);
}

@media (min-width: 44em) {
  .families__divider {
    width: 1px;
    height: 6rem;
    background: linear-gradient(180deg, transparent, var(--c-line), transparent);
  }
}

.family__title {
  margin: 0 0 0.9rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--c-accent-deep);
  text-indent: 0.3em;
}

.family__parents {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.38rem, 5vw, 1.68rem);
  line-height: 1.75;
  color: var(--c-ink);
}

.family__amp {
  color: var(--c-accent);
  font-family: var(--f-script);
  font-size: 1.25em;
  padding-inline: 0.15em;
}

/* Soyadı isimlerin bir satır altındadır ama AYNI tipografiyi kullanır
   (aynı font, aynı punto, aynı renk) — ayrı bir alt yazı gibi kopmaz.
   Yalnızca büyük harf ve hafif harf aralığıyla ayrışır:
        Ferya & Bülent
            ÇOLAK
   Aynı satırda istersen: display: inline; */
.family__surname {
  display: block;
  margin-top: 0.1rem;
  font-family: inherit;
  font-size: inherit;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: inherit;
}


/* 10. ETKİNLİK KARTLARI (NİŞAN & NİKÂH)
   Aynı iskelet, farklı vurgu rengi ve ikon.
   ========================================================================== */
.events {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(1.5rem, 4vw, 2rem);
  max-width: 56rem;
  margin: clamp(2rem, 6vw, 3rem) auto 0;
}

/* Masaüstünde yan yana, mobilde alt alta.
   align-items: stretch (varsayılan) + .actions--stacked'deki margin-top:auto
   sayesinde iki kart eşit yükseklikte olur ve butonları aynı hizada biter. */
@media (min-width: 52em) {
  .events { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.event-card {
  --accent: var(--c-accent-deep);
  --accent-soft: rgba(61, 147, 220, 0.13);
  --accent-grad: var(--grad-accent);

  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(2.25rem, 6vw, 2.75rem) clamp(1.5rem, 5vw, 2.25rem) clamp(1.75rem, 5vw, 2.25rem);
  background-color: var(--c-surface);
  background-image:
    var(--geo-lattice),
    radial-gradient(ellipse 90% 55% at 50% 0%, var(--accent-soft), transparent 70%);
  background-size: 40px 40px, auto;
  background-repeat: repeat, no-repeat;
  border: 1px solid var(--c-line);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 10px 30px -18px rgba(183, 51, 43, 0.45);
  transition: transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}

/* Fareyle üzerine gelince kart hafifçe yükselir */
@media (hover: hover) {
  .event-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -24px rgba(183, 51, 43, 0.55);
  }
}

/* Kapanış imzasının altındaki küçük dal */
.closing__sprig {
  display: block;
  width: clamp(7rem, 30vw, 10rem);
  height: auto;
  aspect-ratio: 140 / 44;
  margin: clamp(1rem, 3vw, 1.4rem) auto 0;
}

/* Kartın üstündeki vurgu şeridi — düz renk değil, degrade */
.event-card__accent {
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-image: var(--accent-grad);
  background-size: 200% 100%;
  animation: shimmer 12s ease-in-out infinite;
}

/* Kartın sağ üst köşesindeki ince yaprak dalı */
.event-card::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 0;
  width: clamp(5rem, 22vw, 7rem);
  aspect-ratio: 1;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%232F3A44' stroke-width='1.1' opacity='.3' stroke-linecap='round'%3E%3Cpath d='M78 20C70 38 56 54 34 64'/%3E%3Cpath d='M92 26C86 44 72 58 52 68'/%3E%3Cpath d='M64 16C60 36 50 52 32 62'/%3E%3C/g%3E%3Cg transform='translate(78 18) scale(.42)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23E4483C' opacity='.75'/%3E%3C/g%3E%3Cg transform='translate(92 24) scale(.34)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%23F5C43F' opacity='.7'/%3E%3C/g%3E%3Cg transform='translate(63 14) scale(.3)'%3E%3Cpath d='M0-23C9.4-23 17-15.6 17-5.8 17 3 11.4 11.4 3.4 16.6L0 23-3.4 16.6C-11.4 11.4-17 3-17-5.8-17-15.6-9.4-23 0-23Z' fill='%233D93DC' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") no-repeat top right / contain;
}

/* Nikâh kartı: canlı yeşil vurgu — nişan kartından net ayrılır */
.event-card--wedding {
  --accent: #24628F;
  --accent-soft: rgba(61, 147, 220, 0.16);
  --accent-grad: var(--grad-leaf);
  border-color: rgba(61, 147, 220, 0.45);
  box-shadow: 0 10px 30px -18px rgba(36, 98, 143, 0.45);
}

@media (hover: hover) {
  .event-card--wedding:hover { box-shadow: 0 22px 44px -24px rgba(36, 98, 143, 0.55); }
}

/* Nikâh kartının başlığı da yeşil degradeyi kullanır */
.event-card--wedding .event-card__title { background-image: var(--grad-leaf); }

.event-card__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-bottom: 1rem;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.event-card__eyebrow {
  margin: 0 0 0.55rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--accent);
  text-indent: 0.3em;
}

.event-card__title {
  margin: 0;
  font-size: clamp(2.2rem, 8vw, 2.85rem);
  line-height: 1.25;
  padding-bottom: 0.08em;
}

.event-card__list {
  width: 100%;
  margin: 0.75rem 0 0;
  padding: 0;
  text-align: left;
}

.event-row {
  padding: 0.9rem 0;
  border-top: 1px solid var(--c-line-soft);
}

.event-row:first-child { border-top: 0; }

.event-row__label {
  margin: 0 0 0.2rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.74rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-indent: 0.26em;
}

.event-row__value {
  margin: 0;
  font-family: var(--f-body);
  font-size: clamp(1.26rem, 4.4vw, 1.46rem);
  line-height: 1.5;
  color: var(--c-ink);
}

.event-row__value--sm {
  font-size: clamp(1.12rem, 3.8vw, 1.24rem);
  line-height: 1.6;
}

.event-row__sub {
  display: block;
  margin-top: 0.25rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.event-card__note {
  margin: 1.5rem 0 0;
  padding: 1rem 1.1rem;
  width: 100%;
  background: var(--accent-soft);
  font-family: var(--f-body);
  font-style: italic;
  font-size: clamp(1.1rem, 4vw, 1.22rem);
  line-height: 1.7;
  color: var(--c-body);
}

/* Nişan kartındaki küçük geri sayım */
.mini-countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 100%;
  margin-top: 1.5rem;
  padding-top: 1.35rem;
  border-top: 1px solid var(--c-line);
}

.mini-countdown__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.mini-countdown__value {
  font-family: var(--f-body);
  font-size: clamp(1.65rem, 6.4vw, 2.05rem);
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: lining-nums tabular-nums;
}

.mini-countdown__label {
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.68rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--c-muted);
}


/* 11. BUTONLAR
   ========================================================================== */
.actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(2rem, 6vw, 2.75rem);
}

/* Kart içinde butonlar her zaman alt alta ve tam genişlik */
.actions--stacked {
  flex-direction: column;
  width: 100%;
  gap: 0.7rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 4vw, 1.85rem);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  min-height: 3.25rem;
  padding: 0.9rem 1.9rem;
  border: 1px solid var(--c-accent);
  background: transparent;
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.4s var(--ease),
    color 0.4s var(--ease),
    border-color 0.4s var(--ease),
    transform 0.25s var(--ease);
}

.btn__icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.3;
  stroke-linecap: round;
  stroke-linejoin: round;
  flex-shrink: 0;
}

.btn--block { width: 100%; }

/* Ana buton artık siyah değil — gül'den mercana giden dolu bir degrade */
.btn--primary {
  background-image: var(--grad-accent);
  background-size: 200% 100%;
  background-position: 0% 50%;
  border-color: transparent;
  color: #FFF;
  box-shadow: 0 10px 24px -12px rgba(183, 51, 43, 0.65);
  transition:
    background-position 0.6s var(--ease),
    box-shadow 0.4s var(--ease),
    transform 0.25s var(--ease);
}

/* Kart içindeki ikincil buton — daha sessiz */
.btn--soft {
  border-color: var(--c-line-soft);
  color: var(--c-muted);
  font-size: 0.8rem;
  min-height: 3rem;
}

/* Bağlantı henüz tanımlanmamış buton */
.btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

/* Kart içindeki butonlar kartın vurgu rengini kullanır */
.event-card .btn--ghost { border-color: var(--accent); }

@media (hover: hover) {
  .btn--ghost:hover {
    background: var(--c-accent);
    border-color: var(--c-accent);
    color: #fff;
  }
  .event-card .btn--ghost:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
  }
  .btn--soft:hover {
    border-color: var(--c-muted);
    color: var(--c-ink);
  }
  .btn--primary:hover {
    background-position: 100% 50%;
    box-shadow: 0 16px 30px -12px rgba(183, 51, 43, 0.75);
  }
  .btn:hover { transform: translateY(-2px); }
  .btn--disabled:hover { transform: none; }
}

.btn:active { transform: translateY(0); }

/* Mobilde bölüm butonları tam genişlik */
@media (max-width: 26em) {
  .actions { flex-direction: column; }
  .btn { width: 100%; }
}


/* 12. KATILIM FORMU
   ========================================================================== */
.rsvp {
  max-width: 30rem;
  margin: clamp(2rem, 6vw, 2.75rem) auto 0;
  padding: clamp(1.6rem, 5vw, 2.25rem) clamp(1.25rem, 4vw, 1.85rem);
  text-align: left;
}

.rsvp__group {
  margin: 0 0 1.75rem;
  padding: 0;
  border: 0;
}

.rsvp__legend {
  display: block;
  width: 100%;
  margin-bottom: 0.9rem;
  padding: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
  text-align: center;
}

.rsvp__options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
}

@media (max-width: 24em) {
  .rsvp__options { grid-template-columns: 1fr; }
}

.rsvp__option {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--c-line);
  background: rgba(255, 255, 255, 0.75);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.8rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--c-body);
  text-align: center;
  cursor: pointer;
  transition:
    background-color 0.3s var(--ease),
    border-color 0.3s var(--ease),
    color 0.3s var(--ease);
}

/* Gerçek radio görünmez ama klavye ile erişilebilir kalır */
.rsvp__option input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}

/* Seçilen kutu koyu gri değil, degradeli ve hafif kabarık */
.rsvp__option.is-checked {
  background-image: var(--grad-accent);
  border-color: transparent;
  color: #FFF;
  box-shadow: 0 8px 20px -10px rgba(183, 51, 43, 0.7);
  transform: translateY(-1px);
}

/* "Katılamıyorum" seçeneği seçilince daha sakin bir renk alır */
.rsvp__option--decline.is-checked {
  background-image: linear-gradient(100deg, #5F6B75, #7C8792);
  box-shadow: 0 8px 20px -10px rgba(74, 85, 96, 0.6);
}

.rsvp__option:focus-within {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

@media (hover: hover) {
  .rsvp__option:not(.is-checked):hover {
    border-color: var(--c-accent);
    background: var(--c-accent-soft);
    color: var(--c-accent-deep);
  }
}

.field { margin-bottom: 1.25rem; }

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.76rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-muted);
}

.field__input {
  display: block;
  width: 100%;
  min-height: 3.25rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--c-line);
  border-radius: 0;
  background: rgba(255, 255, 255, 0.85);
  font-family: var(--f-body);
  /* 16px altına düşmemeli — iOS'ta otomatik yakınlaşmayı önler */
  font-size: 1.1rem;
  color: var(--c-ink);
  -webkit-appearance: none;
  appearance: none;
  transition: border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}

.field__input::placeholder {
  color: var(--c-muted);
  opacity: 0.7;
}

.field__input:focus {
  outline: none;
  border-color: var(--c-accent);
  box-shadow: 0 0 0 1px var(--c-accent);
}

.rsvp__error {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 2px solid #A4573F;
  background: rgba(164, 87, 63, 0.07);
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.55;
  color: #7E4330;
}


/* 13. KAPANIŞ & FOOTER
   ========================================================================== */
/* Kapanış bölümünde ilk öğe çizimdir; üstteki balon çelengiyle çakışmasın
   diye bu bölüme fazladan üst boşluk verilir. */
.section--closing {
  padding-top: calc(var(--sp-section) + clamp(2rem, 6vw, 4.5rem));
  background-color: var(--c-bg-alt);
  background-image: var(--geo-lattice);
  background-size: 40px 40px;
  border-top: 1px solid var(--c-line-soft);
  overflow: hidden;
}

/* Uzun cümle olduğu için el yazısı değil, serif italik — okunaklılık önemli */
.closing__text {
  max-width: 30rem;
  margin: 0 auto;
  font-family: var(--f-body);
  font-size: clamp(1.55rem, 6vw, 2.15rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.55;
}

.closing__sign {
  margin: 0;
  font-family: var(--f-script);
  font-size: clamp(2.1rem, 8vw, 2.8rem);
  line-height: 1.4;
  letter-spacing: 0.02em;
  word-spacing: 0.16em;
  color: var(--c-accent-deep);
}

.footer {
  position: relative;
  background-color: var(--c-bg-alt);
  background-image: var(--geo-lattice);
  background-size: 40px 40px;
  padding: clamp(1.75rem, 5vw, 2.25rem) var(--pad-x) clamp(2.25rem, 7vw, 3rem);
  text-align: center;
}

/* Sayfayı kapatan elmas bordür */
.footer::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: clamp(0.6rem, 2.5vw, 1rem);
  height: 12px;
  background-image: var(--geo-band);
  background-repeat: repeat-x;
  background-position: center;
  background-size: 132px 14px;
  opacity: 0.7;
  pointer-events: none;
}

.footer__year {
  margin: 0;
  font-family: var(--f-sans);
  font-weight: 400;
  font-size: 0.78rem;
  letter-spacing: 0.38em;
  text-indent: 0.4em;
  color: var(--c-muted);
}

/* PDF / yazdırma butonu */
.footer__print {
  margin: 0 auto clamp(1.25rem, 4vw, 1.6rem);
  min-height: 2.75rem;
  padding-inline: 1.5rem;
}


/* 14. MÜZİK BUTONU
   ========================================================================== */
.music-btn {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 50;
  width: 3rem;
  height: 3rem;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid var(--c-line);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.90);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--c-body);
  cursor: pointer;
  box-shadow: 0 4px 18px rgba(51, 50, 45, 0.12);
  transition: color 0.3s var(--ease), border-color 0.3s var(--ease);
}

.music-btn svg {
  width: 1.15rem;
  height: 1.15rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.music-btn .icon-on { display: none; }
.music-btn .icon-off { display: block; }

.music-btn[aria-pressed="true"] {
  color: var(--c-accent);
  border-color: var(--c-accent);
}

.music-btn[aria-pressed="true"] .icon-on { display: block; }
.music-btn[aria-pressed="true"] .icon-off { display: none; }


/* 15. ERİŞİLEBİLİRLİK & HAREKET TERCİHİ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .js .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .scroll-cue__icon { animation: none; }

  /* Hareket tercihi kapalıysa düşen yapraklar hiç görünmez;
     salınım, parıltı ve renk bulutu da durur — renkler yerinde kalır. */
  .balloons { display: none; }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* 16. YAZDIRMA / PDF ÇIKTISI — TEK SAYFA DAVETİYE KARTI
   --------------------------------------------------------------------------
   Ekran düzeni yazdırılmaz; onun yerine index.html'in sonundaki ayrı
   .print-sheet düzeni basılır. Çıktı, ekrandaki uzun kaydırmalı sayfadan
   bağımsız, TEK bir davetiye kartıdır.

   Varsayılan boyut: 130 × 180 mm (13 × 18 cm) — Türkiye'de en yaygın
   davetiye kartı ölçüsü, 5×7 inç standardına da çok yakındır.

   ★ BOYUTU DEĞİŞTİRMEK İÇİN aşağıdaki üç değeri BİRLİKTE güncelleyin:

       kart            @page size          width      height
       ---------------------------------------------------------
       13 × 18 cm      130mm 180mm         130mm      179.6mm   (varsayılan)
       5 × 7 inç       127mm 178mm         127mm      177.6mm
       A5              A5 portrait         148mm      209.6mm
       A6              A6 portrait         105mm      147.6mm

   (yükseklik kâğıttan ~0.4mm kısadır; yuvarlama yüzünden arkasına fazladan
    boş bir sayfa eklenmesini engeller.)

   Kart, kâğıt daha büyük gelirse (ör. tarayıcı A4'e zorlarsa) sayfada
   yatayda ortalanır; çıktı yine tek sayfa kalır, kesilerek kullanılabilir.
   ========================================================================== */

/* Yazdırma düzeni ekranda hiç görünmez */
.print-sheet { display: none; }

@media print {

  @page {
    size: 130mm 180mm;
    margin: 0;
  }

  html { scroll-behavior: auto; }

  html,
  body {
    margin: 0;
    padding: 0;
    width: auto;
    background: none;
    /* Zemin rengi, doku ve pembe süslemeler yazıcıda da çıksın */
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Ekran düzeninin tamamı gizlenir. .deco-defs (SVG sembol tanımları)
     gizlenmez — kart o sembollere <use> ile bağlıdır. */
  .skip-link,
  .hero,
  main,
  .footer,
  .balloons,
  .music-btn { display: none !important; }

  .print-sheet { display: block; }

  /* Reveal animasyonları yazdırmada devre dışı */
  .js .reveal {
    opacity: 1 !important;
    transform: none !important;
  }

  /* ---- Kart gövdesi ---- */
  .print-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 130mm;
    height: 179.6mm;
    margin: 0 auto;          /* kâğıt daha genişse kart ortalanır */
    padding: 10mm 10mm;
    overflow: hidden;
    text-align: center;
    background-color: #FFFFFF;
    background-image: var(--geo-lattice);
    background-size: 9mm 9mm;   /* macera defteri karesi — ince ve sık */
    color: var(--c-body);
    font-family: var(--f-body);
    font-size: 9.5pt;
    line-height: 1.65;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-card__inner {
    position: relative;
    z-index: 1;
    width: 100%;
  }

  /* ---- Çerçeve ve köşe buketleri ---- */
  .deco-frame--print { inset: 6.5mm; }
  .deco-frame--print::before { inset: 1.4mm; }
  .deco-frame--print::after {
    inset: -1.5mm;
    background-size: 3mm 3mm;
  }

  .print-deco {
    position: absolute;
    z-index: 0;
    width: 26mm;
    height: 26mm;
    opacity: 0.7;
  }

  /* Alt köşedekiler aile isimleri hizasına geldiği için daha küçük ve
     daha sessizdir — isimler balonların altında kalmaz. */
  .print-deco--bl,
  .print-deco--br {
    width: 15mm;
    height: 15mm;
    opacity: 0.45;
  }

  /* Aynalama, ekranda olduğu gibi SVG'nin içinde yapılır (yukarıdaki
     ".print-deco--tr use" kuralı) — balonlar hiçbir köşede ters dönmez. */
  .print-deco--tl { top: 4mm; left: 4mm; }
  .print-deco--tr { top: 4mm; right: 4mm; }
  .print-deco--bl { bottom: 4mm; left: 4mm; }
  .print-deco--br { bottom: 4mm; right: 4mm; }

  /* Üst ve alt kenarın ortasındaki çelenk — köşe buketleri arasını kapatır.
     Kartın en ucunda değil, çerçevenin içinde durur; bunun için biraz
     küçültülür ki metinle arasında nefes payı kalsın. */
  .print-garland {
    position: absolute;
    z-index: 0;
    left: 50%;
    width: 42mm;
    height: 9.2mm;
    opacity: 0.6;
  }

  .print-garland--b { bottom: 3.5mm; transform: translateX(-50%) scaleX(-1); }

  /* ---- Uçan ev (kartın üstünde, çizimin hemen üzerinde) ---- */
  /* ★ Boyutunu buradan büyütüp küçültebilirsiniz; kartta yer kalması için
     genişlik ve yükseklik 4:5 oranında birlikte değişmelidir. */
  .print-house {
    display: block;
    width: 13.5mm;
    height: 16.9mm;
    margin: 0 auto 1mm;
  }

  /* ---- Ayraç motifi ---- */
  .print-card .ornament {
    width: 42mm;
    gap: 13mm;
    margin: 3mm auto;
    background-size: 13mm 4.3mm, 1.8mm 1.8mm, 1.8mm 1.8mm;
  }

  /* Ayracın yan çizgileri ekranda degrade ile solar. Chrome bunu PDF'e
     "ShadingType 1" olarak yazıyor ve bazı görüntüleyiciler onu yanlış
     (pembe) basıyor. Baskıda düz pembe saç teli çizgi kullanılır. */
  .print-card .ornament::before,
  .print-card .ornament::after {
    height: 0.3mm;
    background: var(--c-line);
  }

  /* ---- Çift çizimi (kartın görsel merkezi) ----
     PNG'nin zemini saydam olduğu için çizim kartın deseni üzerinde
     çerçevesiz durur. */
  .print-portrait {
    display: block;
    margin: 0 auto 3mm;
  }

  .print-portrait__img {
    display: block;
    width: auto;
    height: 24mm;
    margin: 0 auto;
  }

  /* ---- Monogram (çizim yoksa kullanılır) ---- */
  .print-monogram {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.9mm;
    width: 16mm;
    height: 16mm;
    margin-bottom: 5mm;
    border: 0.3mm solid var(--c-line);
    border-radius: 50%;
    font-family: var(--f-script);
    font-size: 12pt;
    line-height: 1;
    color: var(--c-ink);
  }

  .print-monogram__amp { color: var(--c-accent); font-size: 0.8em; }

  /* ---- İsimler ---- */
  .print-names {
    margin: 0;
    font-family: var(--f-script);
    font-size: 29pt;
    line-height: 1.16;
    color: var(--c-ink);
    word-spacing: 0.16em;
  }

  .print-names > span { display: block; }

  .print-names__amp {
    font-size: 0.5em;
    color: var(--c-accent);
    margin-block: -0.06em;
  }

  /* ---- Kısa davet cümlesi ---- */
  .print-lead {
    max-width: 86mm;
    margin: 0 auto;
    font-size: 9pt;
    line-height: 1.7;
    color: var(--c-body);
  }

  /* ---- İki tören: tarih / saat / mekân / adres ---- */
  .print-events {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 4mm 0 0;
    padding-top: 4mm;
    border-top: 0.3mm solid var(--c-line);
  }

  .print-event {
    position: relative;
    padding-inline: 3.5mm;
  }

  .print-event + .print-event::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4%;
    height: 92%;
    width: 0.3mm;
    background: var(--c-line);
  }

  .print-event__label {
    margin: 0 0 1.6mm;
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 6.2pt;
    letter-spacing: 0.28em;
    text-indent: 0.28em;
    text-transform: uppercase;
    color: var(--c-accent-deep);
  }

  .print-event__body { margin: 0; }

  .print-event__body > span { display: block; }

  .print-event__date,
  .print-event__time {
    font-size: 9.5pt;
    line-height: 1.4;
    color: var(--c-ink);
  }

  .print-event__venue {
    margin-top: 1.4mm;
    font-size: 9pt;
    line-height: 1.4;
    color: var(--c-ink);
  }

  .print-event__addr {
    margin-top: 0.8mm;
    font-size: 7.5pt;
    line-height: 1.45;
    color: var(--c-body);
  }

  .print-event__city {
    margin-top: 1mm;
    font-family: var(--f-sans);
    font-weight: 400;
    font-size: 6.2pt;
    letter-spacing: 0.16em;
    line-height: 1.5;
    text-transform: uppercase;
    color: var(--c-muted);
  }

  /* ---- Aile isimleri ---- */
  .print-families {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    width: 100%;
    margin: 4.5mm 0 0;
    padding-top: 4mm;
    /* Yanlardaki balon demetlerinin altında kalmasın diye içeri alınır */
    padding-inline: 14mm;
    border-top: 0.3mm solid var(--c-line);
    font-size: 8pt;
    line-height: 1.55;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--c-body);
  }

  .print-family__surname {
    display: block;
    margin-top: 0.3mm;
    letter-spacing: 0.14em;
  }

  .print-family__amp {
    color: var(--c-accent);
    font-family: var(--f-script);
    font-size: 1.3em;
    text-transform: none;
    letter-spacing: 0;
    padding-inline: 0.1em;
  }

  .print-families__sep {
    position: absolute;
    left: 50%;
    top: calc(50% + 2.2mm);
    transform: translate(-50%, -50%);
    color: var(--c-accent);
    font-size: 6.5pt;
    line-height: 1;
  }

  /* Doldurulmamış [KÖŞELİ PARANTEZ] alanlar çıktıda da belli olsun */
  .print-sheet .is-placeholder {
    color: var(--c-muted);
    text-decoration: underline dashed rgba(168, 84, 116, 0.55);
    text-underline-offset: 0.25em;
  }
}