/* =========================================================
   Florina & Can — Dijital Düğün Davetiyesi
   ========================================================= */

:root {
  --krem:        #FBF7EF;
  --krem-koyu:   #F4ECDD;
  --kagit:       #FEFCF8;
  --altin:       #C2A063;
  --altin-acik:  #E0CCA4;
  --altin-koyu:  #A8874A;
  --metin:       #6E6050;
  --metin-koyu:  #4A3F33;
  --metin-acik:  #93816C;
  --hata:        #B4573F;

  --yazi-script: 'Parisienne', cursive;
  --yazi-serif:  'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --yazi-ui:     'Jost', -apple-system, 'Segoe UI', sans-serif;

  --golge-yumusak: 0 18px 60px -24px rgba(120, 96, 58, .28);
  --gecis: 320ms cubic-bezier(.22, .61, .36, 1);
}

*,
*::before,
*::after { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--krem);
  color: var(--metin);
  font-family: var(--yazi-serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* çok ince kağıt dokusu */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image:
    radial-gradient(circle at 18% 22%, rgba(194, 160, 99, .07), transparent 42%),
    radial-gradient(circle at 82% 78%, rgba(194, 160, 99, .06), transparent 46%);
}

main { position: relative; z-index: 1; }

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

::selection { background: var(--altin-acik); color: var(--metin-koyu); }

/* ---------- Giriş animasyonu ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22, .61, .36, 1);
}
.reveal.gorunur { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   DAVETİYE KARTI
   ========================================================= */
.davetiye {
  padding: clamp(14px, 3vw, 48px) clamp(12px, 3vw, 32px) clamp(24px, 4vw, 56px);
  display: flex;
  justify-content: center;
}

.kart {
  position: relative;
  width: 100%;
  max-width: 680px;
  background: var(--kagit);
  border-radius: 3px;
  padding: clamp(52px, 9vw, 88px) clamp(22px, 6vw, 66px) clamp(36px, 6vw, 62px);
  overflow: hidden;
  box-shadow: var(--golge-yumusak);
  isolation: isolate;
}

/* ince altın iç çerçeve */
.kart::after {
  content: '';
  position: absolute;
  inset: 14px;
  border: 1px solid rgba(194, 160, 99, .3);
  border-radius: 2px;
  pointer-events: none;
  z-index: 3;
}

.kart-icerik { position: relative; z-index: 2; text-align: center; }

/* ---------- Köşe yaprak süsleri ---------- */
.sus {
  position: absolute;
  width: clamp(140px, 30vw, 240px);
  color: var(--altin);
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}
.sus .yapraklar { fill: rgba(224, 204, 164, .28); }

.sus--sol-ust  { top: -30px;    left: -52px;  transform: scaleX(-1) rotate(-8deg); }
.sus--sag-ust  { top: -34px;    right: -56px; transform: rotate(8deg); }
.sus--sol-alt  { bottom: -38px; left: -54px;  transform: rotate(180deg) scaleX(-1); opacity: .36; }
.sus--sag-alt  { bottom: -36px; right: -50px; transform: rotate(180deg); opacity: .36; }

/* ---------- Çift illüstrasyonu (opsiyonel görsel) ---------- */
.cift-gorsel {
  position: absolute;
  top: 19%;
  left: 50%;
  width: min(84%, 505px);
  transform: translateX(-50%);
  opacity: .4;
  /* multiply sayesinde gelinliğin beyazı kağıda karışıyor, koyu takım
     elbise öne çıkıyor — fiziki davetiyedeki filigranla aynı etki. */
  mix-blend-mode: multiply;
  z-index: 1;
  pointer-events: none;
  user-select: none;
}

/* ---------- İsimler ---------- */
.isimler h1 {
  margin: 0;
  font-family: var(--yazi-script);
  font-weight: 400;
  color: var(--altin-koyu);
  line-height: .96;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.isim {
  font-size: clamp(52px, 13.5vw, 100px);
  display: block;
  padding: 0 .08em;
}
.isim--ilk    { align-self: center; margin-left: -.1em; }
.isim--ikinci { align-self: center; margin-left: .06em; }

.ve {
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1;
  margin: -.14em 0 -.1em;
  color: var(--altin);
}

/* ---------- Aileler ---------- */
.aileler {
  margin: clamp(150px, 34vw, 260px) 0 0;   /* çift görseli için boşluk */
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(14px, 4vw, 34px);
}

.aile {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--metin-koyu);
}
.aile-ad {
  font-size: clamp(16px, 4vw, 23px);
  font-weight: 500;
  letter-spacing: .01em;
}
.aile-soyad {
  font-size: clamp(17px, 4.4vw, 25px);
  font-weight: 500;
  letter-spacing: .06em;
}

.aile-ayirac {
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(168, 135, 74, .6), transparent);
  flex: 0 0 1px;
}

/* ---------- Davet cümlesi ---------- */
.davet-metni {
  margin: clamp(26px, 5vw, 40px) auto 0;
  max-width: 30ch;
  font-style: italic;
  font-size: clamp(14.5px, 3.4vw, 19px);
  font-weight: 400;
  line-height: 1.55;
  color: var(--metin);
}

/* ---------- Tarih bloğu ---------- */
.tarih { margin-top: clamp(26px, 5vw, 40px); color: var(--metin-koyu); }

.ay {
  font-size: clamp(13px, 3vw, 17px);
  letter-spacing: .48em;
  text-indent: .48em;
  font-weight: 500;
}

.tarih-satiri {
  margin-top: clamp(6px, 1.6vw, 12px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 3vw, 22px);
}

.tarih-cizgi {
  flex: 1 1 auto;
  height: 1px;
  background: rgba(168, 135, 74, .55);
  max-width: 130px;
}

.gun-adi,
.saat {
  font-size: clamp(11.5px, 2.8vw, 15px);
  letter-spacing: .32em;
  text-indent: .32em;
  white-space: nowrap;
}

.gun-sayi {
  font-family: var(--yazi-script);
  font-size: clamp(40px, 10vw, 62px);
  line-height: .9;
  color: var(--altin-koyu);
  padding: 0 .06em;
}

.yil {
  margin-top: clamp(6px, 1.6vw, 12px);
  font-size: clamp(13px, 3vw, 17px);
  letter-spacing: .42em;
  text-indent: .42em;
}

/* ---------- Mekân ---------- */
.mekan { margin-top: clamp(26px, 5vw, 42px); color: var(--metin-koyu); }

.mekan-ad {
  font-size: clamp(15px, 3.6vw, 21px);
  letter-spacing: .26em;
  text-indent: .26em;
  font-weight: 500;
}

.mekan-adres {
  margin-top: clamp(8px, 2vw, 14px);
  font-style: normal;
  font-size: clamp(12px, 2.9vw, 16px);
  letter-spacing: .16em;
  line-height: 1.85;
  color: var(--metin);
}

/* Küçük bilgi notu — davetiyenin akışını bozmayacak kadar sessiz */
.mekan-not {
  margin: clamp(16px, 3.4vw, 24px) auto 0;
  max-width: 40ch;
  font-style: italic;
  font-size: clamp(11.5px, 2.6vw, 14px);
  letter-spacing: .03em;
  line-height: 1.55;
  color: var(--metin-acik);
  text-wrap: balance;   /* dar ekranda satırlar dengeli bölünsün */
}

.mekan-not::before {
  content: '';
  display: block;
  width: 26px;
  height: 1px;
  margin: 0 auto clamp(12px, 2.4vw, 16px);
  background: rgba(168, 135, 74, .4);
}

.kule-gorsel {
  width: clamp(90px, 22vw, 140px);
  margin: clamp(22px, 4vw, 34px) auto 0;
  opacity: .85;
}

/* =========================================================
   ORTAK BÖLÜM / BAŞLIK
   ========================================================= */
.bolum { padding: clamp(46px, 9vw, 88px) clamp(16px, 4vw, 32px); }

.ic-kap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.bolum-baslik {
  margin: 0 0 clamp(22px, 4vw, 34px);
  text-align: center;
  font-family: var(--yazi-serif);
  font-weight: 400;
  font-size: clamp(22px, 5vw, 30px);
  letter-spacing: .14em;
  text-indent: .14em;
  color: var(--altin-koyu);
  text-transform: uppercase;
}
.bolum-baslik::after {
  content: '';
  display: block;
  width: 54px;
  height: 1px;
  margin: 14px auto 0;
  background: rgba(168, 135, 74, .5);
}

/* =========================================================
   GERİ SAYIM
   ========================================================= */
.geri-sayim-bolumu {
  background: linear-gradient(to bottom, transparent, var(--krem-koyu) 45%, transparent);
}

/* Davetiyedeki ince altın çerçeve dilini tekrar eden kart */
.geri-sayim-cerceve {
  position: relative;
  max-width: 520px;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 46px) clamp(12px, 3vw, 30px) clamp(26px, 5vw, 40px);
  text-align: center;
}

/* dört köşede kısa altın hatlar */
.geri-sayim-cerceve .kose {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 1px solid rgba(194, 160, 99, .55);
  pointer-events: none;
}
/* Not: seçiciler .geri-sayim-cerceve ile başlamalı, yoksa yukarıdaki
   `border: 1px solid` kuralı specificity'de kazanıp köşeler kare görünür. */
.geri-sayim-cerceve .kose--sol-ust { top: 0; left: 0;     border-right: 0; border-bottom: 0; }
.geri-sayim-cerceve .kose--sag-ust { top: 0; right: 0;    border-left: 0;  border-bottom: 0; }
.geri-sayim-cerceve .kose--sol-alt { bottom: 0; left: 0;  border-right: 0; border-top: 0; }
.geri-sayim-cerceve .kose--sag-alt { bottom: 0; right: 0; border-left: 0;  border-top: 0; }

/* ---------- Başlık: iki yanı hairline ---------- */
.geri-sayim-baslik {
  margin: 0 0 clamp(24px, 5vw, 40px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(12px, 3vw, 22px);
  font-family: var(--yazi-serif);
  font-weight: 400;
}

.baslik-yazi {
  flex: 0 0 auto;
  font-size: clamp(13px, 3.2vw, 17px);
  letter-spacing: .3em;
  text-indent: .3em;
  text-transform: uppercase;
  color: var(--altin-koyu);
  white-space: nowrap;
}

.baslik-cizgi {
  flex: 1 1 auto;
  max-width: 90px;
  height: 1px;
  background: rgba(168, 135, 74, .5);
}
.geri-sayim-baslik .baslik-cizgi:first-child {
  background: linear-gradient(to right, transparent, rgba(168, 135, 74, .55));
}
.geri-sayim-baslik .baslik-cizgi:last-child {
  background: linear-gradient(to left, transparent, rgba(168, 135, 74, .55));
}

/* ---------- Sayaçlar: kutu yok, ince ayıraçlar ---------- */
.geri-sayim {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.sayac {
  position: relative;
  padding: 0 clamp(2px, 1.5vw, 12px);
  text-align: center;
}

/* birimler arası dikey hairline */
.sayac + .sayac::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 22%;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(168, 135, 74, .4) 30%, rgba(168, 135, 74, .4) 70%, transparent);
}

.sayac-deger {
  display: block;
  font-size: clamp(40px, 11vw, 66px);
  line-height: 1;
  font-weight: 300;
  color: var(--altin-koyu);
  font-feature-settings: 'onum' 1;
}

.sayac-etiket {
  display: block;
  margin-top: clamp(10px, 2.4vw, 16px);
  font-family: var(--yazi-ui);
  font-size: clamp(9px, 2.1vw, 10.5px);
  font-weight: 400;
  letter-spacing: .26em;
  text-indent: .26em;
  text-transform: uppercase;
  color: var(--metin-acik);
}

/* ---------- Alt tarih satırı ---------- */
.geri-sayim-tarih {
  margin: clamp(26px, 5vw, 40px) 0 0;
  font-size: clamp(12px, 2.9vw, 15px);
  letter-spacing: .18em;
  text-indent: .18em;
  color: var(--metin);
}

/* ---------- Gün geldiğinde ---------- */
.geri-sayim.gecti {
  grid-template-columns: 1fr;
  font-family: var(--yazi-script);
  font-size: clamp(30px, 7vw, 44px);
  line-height: 1.2;
  color: var(--altin-koyu);
}

.aksiyonlar {
  margin-top: clamp(20px, 4vw, 30px);
  display: flex;
  justify-content: center;
}

/* =========================================================
   DÜĞMELER
   ========================================================= */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 30px;
  border: 1px solid var(--altin);
  border-radius: 2px;
  background: transparent;
  color: var(--altin-koyu);
  font-family: var(--yazi-ui);
  font-size: 12.5px;
  font-weight: 400;
  letter-spacing: .18em;
  text-indent: .18em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis), border-color var(--gecis), transform var(--gecis);
}
.dugme:hover { background: var(--altin); color: #fff; }
.dugme:active { transform: translateY(1px); }

/* Geri sayımın altındaki ikincil bağlantı: bilerek küçük ve sakin */
.dugme--ince {
  padding: 10px 22px;
  font-size: 10.5px;
  letter-spacing: .16em;
  text-indent: .16em;
  border-color: rgba(194, 160, 99, .45);
  color: var(--metin-acik);
}
.dugme--ince:hover {
  background: transparent;
  border-color: var(--altin);
  color: var(--altin-koyu);
}

.dugme--dolu {
  background: var(--altin-koyu);
  border-color: var(--altin-koyu);
  color: #fff;
  padding: 15px 42px;
}
.dugme--dolu:hover { background: var(--metin-koyu); border-color: var(--metin-koyu); }
.dugme--dolu:disabled { opacity: .55; cursor: progress; }

.metin-dugme {
  background: none;
  border: 0;
  padding: 10px 6px;
  color: var(--metin-acik);
  font-family: var(--yazi-ui);
  font-size: 13px;
  letter-spacing: .04em;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color var(--gecis), border-color var(--gecis);
}
.metin-dugme:hover { color: var(--altin-koyu); border-bottom-color: var(--altin); }

:where(button, a, input, textarea):focus-visible {
  outline: 2px solid var(--altin-koyu);
  outline-offset: 3px;
}

/* =========================================================
   RSVP FORMU
   ========================================================= */
.form-kart {
  position: relative;
  background: var(--kagit);
  border: 1px solid rgba(194, 160, 99, .3);
  border-radius: 3px;
  padding: clamp(28px, 6vw, 54px) clamp(20px, 5vw, 52px) clamp(26px, 5vw, 46px);
  box-shadow: var(--golge-yumusak);
}

.form-baslik { text-align: center; margin-bottom: clamp(24px, 4vw, 36px); }

.form-uzeri {
  display: block;
  font-family: var(--yazi-ui);
  font-size: 10px;
  letter-spacing: .1em;
  color: var(--altin);
  text-transform: uppercase;
}

.form-baslik h2 {
  margin: 12px 0 0;
  font-family: var(--yazi-serif);
  font-weight: 400;
  font-size: clamp(26px, 6vw, 36px);
  letter-spacing: .06em;
  color: var(--metin-koyu);
}

.form-alt {
  margin: 12px auto 0;
  max-width: 38ch;
  font-size: clamp(14px, 3.2vw, 16px);
  color: var(--metin-acik);
}
.form-alt strong { color: var(--metin); font-weight: 500; }

.tuzak {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.alan { margin-bottom: clamp(18px, 3.2vw, 24px); border: 0; padding: 0; }

.alan > label,
.alan legend {
  display: block;
  margin-bottom: 9px;
  padding: 0;
  font-family: var(--yazi-ui);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: .05em;
  color: var(--metin-koyu);
}

.zorunlu { color: var(--altin-koyu); }
.istege-bagli { color: var(--metin-acik); font-size: 12px; }

.alan-ipucu {
  margin: -4px 0 10px;
  font-family: var(--yazi-ui);
  font-size: 12px;
  line-height: 1.5;
  color: var(--metin-acik);
}

input[type='text'],
input[type='tel'],
input[type='number'],
textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid rgba(168, 135, 74, .35);
  border-radius: 2px;
  background: #fff;
  color: var(--metin-koyu);
  font-family: var(--yazi-ui);
  font-size: 15px;
  font-weight: 300;
  transition: border-color var(--gecis), box-shadow var(--gecis);
}

input::placeholder,
textarea::placeholder { color: #BCAE99; }

input[type='text']:focus,
input[type='tel']:focus,
input[type='number']:focus,
textarea:focus {
  outline: 0;
  border-color: var(--altin);
  box-shadow: 0 0 0 3px rgba(194, 160, 99, .14);
}

textarea { resize: vertical; min-height: 84px; line-height: 1.6; }

.alan.hatali input,
.alan.hatali textarea { border-color: var(--hata); }
.alan.hatali legend { color: var(--hata); }

/* ---------- Radyo seçenekleri ---------- */
.secenekler { display: grid; gap: 10px; }

/* Radyo girdisi kutunun tamamını kaplar: tıklama her zaman girdiye düşer. */
.secenek { display: block; position: relative; cursor: pointer; }

.secenek input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.secenek-kutu {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  border: 1px solid rgba(168, 135, 74, .32);
  border-radius: 2px;
  background: #fff;
  transition: border-color var(--gecis), background var(--gecis);
}
.secenek:hover .secenek-kutu { border-color: var(--altin); }

.secenek-isaret {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid var(--altin);
  border-radius: 50%;
  position: relative;
}
.secenek-isaret::after {
  content: '';
  position: absolute;
  inset: 3px;
  border-radius: 50%;
  background: var(--altin-koyu);
  transform: scale(0);
  transition: transform var(--gecis);
}

.secenek-yazi {
  font-family: var(--yazi-ui);
  font-size: 15px;
  font-weight: 300;
  color: var(--metin-koyu);
}

.secenek input:checked + .secenek-kutu {
  border-color: var(--altin-koyu);
  background: rgba(224, 204, 164, .16);
}
.secenek input:checked + .secenek-kutu .secenek-isaret::after { transform: scale(1); }
.secenek input:focus-visible + .secenek-kutu { outline: 2px solid var(--altin-koyu); outline-offset: 2px; }

/* ---------- Kişi sayısı ---------- */
.alan--kisi[hidden] { display: none; }

.alan--kisi {
  animation: acil .42s cubic-bezier(.22, .61, .36, 1);
}
@keyframes acil {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

.sayac-girdi { display: flex; align-items: stretch; max-width: 190px; }

.sayac-girdi input {
  width: 76px;
  text-align: center;
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  font-size: 17px;
  -moz-appearance: textfield;
}
.sayac-girdi input::-webkit-outer-spin-button,
.sayac-girdi input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.sayac-dugme {
  width: 46px;
  border: 1px solid rgba(168, 135, 74, .35);
  background: #fff;
  color: var(--altin-koyu);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--gecis), color var(--gecis);
}
.sayac-dugme:first-child { border-radius: 2px 0 0 2px; }
.sayac-dugme:last-child  { border-radius: 0 2px 2px 0; }
.sayac-dugme:hover { background: var(--altin); color: #fff; }

/* ---------- Uyarı & aksiyon ---------- */
.form-uyari {
  margin: 0 0 18px;
  padding: 12px 15px;
  border-left: 2px solid var(--hata);
  background: rgba(180, 87, 63, .07);
  font-family: var(--yazi-ui);
  font-size: 13.5px;
  color: var(--hata);
}
.form-uyari[hidden] { display: none; }

.form-aksiyon {
  margin-top: clamp(22px, 4vw, 30px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}

/* ---------- Teşekkür ---------- */
.tesekkur {
  text-align: center;
  padding: clamp(10px, 3vw, 26px) 0;
  animation: acil .5s cubic-bezier(.22, .61, .36, 1);
}
.tesekkur[hidden] { display: none; }

.tesekkur-ikon { width: 62px; height: 62px; color: var(--altin); margin: 0 auto 18px; }

.tesekkur h3 {
  margin: 0;
  font-family: var(--yazi-script);
  font-weight: 400;
  font-size: clamp(34px, 8vw, 46px);
  color: var(--altin-koyu);
  line-height: 1.1;
}

.tesekkur p {
  margin: 14px auto 20px;
  max-width: 34ch;
  font-size: clamp(15px, 3.4vw, 17px);
  color: var(--metin);
}

/* =========================================================
   ALT BİLGİ
   ========================================================= */
.alt-bilgi {
  position: relative;
  overflow: hidden;
  padding: clamp(40px, 7vw, 64px) 20px clamp(64px, 11vw, 104px);
  text-align: center;
  border-top: 1px solid rgba(194, 160, 99, .22);
  margin: 0 clamp(16px, 4vw, 32px);
}

.alt-icerik { position: relative; z-index: 2; }

/* Sayfanın sol ve sağ altındaki yaprak süsleri */
.alt-bilgi .sus--dip-sol {
  bottom: -30px;
  left: clamp(-56px, -8vw, -24px);
  transform: rotate(180deg) scaleX(-1);
  opacity: .4;
}
.alt-bilgi .sus--dip-sag {
  bottom: -30px;
  right: clamp(-56px, -8vw, -24px);
  transform: rotate(180deg);
  opacity: .4;
}

.alt-isimler {
  display: block;
  font-family: var(--yazi-script);
  font-size: clamp(30px, 7vw, 42px);
  color: var(--altin-koyu);
  line-height: 1.2;
}

.alt-tarih {
  display: block;
  margin-top: 8px;
  font-family: var(--yazi-ui);
  font-size: 12px;
  letter-spacing: .34em;
  text-indent: .34em;
  color: var(--metin-acik);
}

/* =========================================================
   KÜÇÜK EKRAN DÜZELTMELERİ
   ========================================================= */
@media (max-width: 420px) {
  .aileler { gap: 12px; }
  .aile-ad, .aile-soyad { letter-spacing: 0; }
  .tarih-cizgi { max-width: 34px; }
  .form-aksiyon { flex-direction: column-reverse; align-items: stretch; }
  .form-aksiyon .dugme--dolu { width: 100%; }
}

/* assets/cift.png yoksa isimler ile aileler arasındaki boşluğu kapat
   (sınıfı js/main.js ekler) */
.kart--gorselsiz .aileler { margin-top: clamp(38px, 8vw, 68px); }

@media print {
  .bolum, .alt-bilgi { display: none; }
  body { background: #fff; }
  .kart { box-shadow: none; }
}