/* ============================================================
   Düğün Davetiyesi — Stil Dosyası
   Palet: kırık beyaz + gri/grafit + platin-şampanya vurgu
   ============================================================ */

:root {
  /* Palet: kırık beyaz zemin + grafit + platin/şampanya vurgu */
  --zemin:       #F7F7F5;   /* sayfa zemini */
  --zemin-koyu:  #EFEFEC;   /* ayrılmış bölümler */
  --koyu:        #2E3033;   /* grafit — başlıklar, koyu düğmeler */
  --koyu-acik:   #8B8D91;   /* ikincil gri */
  --vurgu:       #A79B84;   /* platin/şampanya — ince vurgular */
  --vurgu-acik:  #CFC8B8;
  --metin:       #32343A;
  --metin-soluk: #7A7D83;
  --beyaz:       #FFFFFF;
  --golge:       0 12px 44px rgba(32, 34, 38, .08);
  --golge-yumusak: 0 4px 18px rgba(32, 34, 38, .05);
  --yazi-baslik: 'Cormorant Garamond', Georgia, serif;
  --yazi-el:     'Great Vibes', cursive;
  --yazi-govde:  'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --kenar:       1px solid rgba(50, 52, 58, .11);
  --gecis:       .45s cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: 17px;
  line-height: 1.75;
  overflow-x: hidden;
  /* Cormorant varsayılan olarak eski usul (inip çıkan) rakam kullanır;
     tarih ve sayaçların hizalı görünmesi için düz rakama sabitliyoruz. */
  font-variant-numeric: lining-nums;
}

body.kilitli { overflow: hidden; }

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

a { color: var(--vurgu); }

/* ---------- Ortak yapı ---------- */
.bolum {
  padding: 84px 22px;
  max-width: 780px;
  margin: 0 auto;
  position: relative;
}

.bolum--genis { max-width: 1040px; }

.bolum-basi {
  text-align: center;
  margin-bottom: 48px;
}

.ust-yazi {
  font-size: 12px;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--vurgu);
  margin: 0 0 12px;
  font-weight: 500;
}

h2.baslik {
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 6vw, 44px);
  font-weight: 500;
  color: var(--koyu);
  margin: 0;
  letter-spacing: .01em;
}

/* İnce süs ayracı */
.ayrac {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 20px auto 0;
  max-width: 240px;
  color: var(--vurgu);
}
.ayrac::before, .ayrac::after {
  content: '';
  height: 1px;
  flex: 1;
  background: linear-gradient(90deg, transparent, var(--vurgu-acik));
}
.ayrac::after { background: linear-gradient(270deg, transparent, var(--vurgu-acik)); }
.ayrac svg { width: 17px; height: 17px; flex: none; opacity: .8; }

/* ============================================================
   AÇILIŞ EKRANI (zarf)
   ============================================================ */
#acilis {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: linear-gradient(160deg, #FAFAF9, #EDEDE9);
  display: grid;
  place-items: center;
  text-align: center;
  padding: 24px;
  transition: opacity .8s ease, visibility .8s;
}
#acilis.gizli { opacity: 0; visibility: hidden; pointer-events: none; }

/* ============================================================
   ZARF — katmanlı yapı ve açılma animasyonu
   Katman sırası: arka gövde → mektup → ön yüz → üst kapak → mühür
   ============================================================ */
.zarf {
  position: relative;
  width: min(300px, 78vw);
  aspect-ratio: 3 / 2;
  margin: 0 auto 34px;
  perspective: 1100px;
  animation: sallan 3.4s ease-in-out infinite;
}
/* Açılırken süzülme dursun, hareket tek yerde toplansın */
.zarf.aciliyor { animation: none; }

.zarf-arka,
.zarf-on,
.zarf-kapak,
.zarf-kagit { position: absolute; display: block; }

/* --- arka gövde --- */
.zarf-arka {
  inset: 0;
  background: var(--beyaz);
  border: var(--kenar);
  border-radius: 6px;
  box-shadow: var(--golge);
  z-index: 1;
}

/* --- içindeki mektup --- */
.zarf-kagit {
  left: 6%;
  right: 6%;
  top: 7%;
  height: 104%;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFAF7 100%);
  border: 1px solid rgba(50, 52, 58, .09);
  border-radius: 4px;
  box-shadow: 0 6px 20px rgba(32, 34, 38, .1);
  z-index: 2;
  overflow: hidden;
  padding: 14% 12% 0;
  text-align: center;
}
.zarf-kagit-monogram {
  width: 34%;
  max-width: 62px;
  height: auto;
  margin: 0 auto 12%;
  opacity: .85;
}
.zarf-kagit-cizgi {
  display: block;
  height: 1px;
  margin: 0 auto 9%;
  background: linear-gradient(90deg, transparent, rgba(167, 155, 132, .5), transparent);
}
.zarf-kagit-cizgi:nth-of-type(1) { width: 78%; }
.zarf-kagit-cizgi:nth-of-type(2) { width: 60%; }
.zarf-kagit-cizgi:nth-of-type(3) { width: 44%; }

/* --- ön yüz: mektubun önünde durur, üstünde V açıklık --- */
.zarf-on {
  inset: 0;
  z-index: 3;
  background: linear-gradient(180deg, #FBFAF7 0%, var(--zemin-koyu) 100%);
  border: var(--kenar);
  border-radius: 6px;
  clip-path: polygon(0 0, 50% 40%, 100% 0, 100% 100%, 0 100%);
}

/* --- üst kapak: menteşesi üst kenarda --- */
.zarf-kapak {
  top: 0;
  left: 0;
  right: 0;
  height: 62%;
  z-index: 5;
  background: linear-gradient(180deg, var(--zemin-koyu) 0%, #E7E5DE 100%);
  border-top: var(--kenar);
  border-radius: 6px 6px 0 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  transform-origin: 50% 0;
  transform: rotateX(0deg);
}

/* ---------- Açılma ---------- */
.zarf.aciliyor .zarf-muhur { animation: muhurKopar .55s cubic-bezier(.36,.07,.19,.97) forwards; }
.zarf.aciliyor .zarf-kapak { animation: kapakAcil  .95s cubic-bezier(.5,.04,.32,1) .22s forwards; }
.zarf.aciliyor .zarf-kagit { animation: kagitCik   1.05s cubic-bezier(.22,.61,.36,1) .75s forwards; }
.zarf.aciliyor .zarf-arka,
.zarf.aciliyor .zarf-on    { animation: zarfInce   .7s ease .95s forwards; }

@keyframes muhurKopar {
  0%   { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(0deg); }
  35%  { transform: translate(-50%, -50%) scale(1.08) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -34%) scale(.72) rotate(-16deg); }
}

/* Kapak 90°yi geçince mektubun arkasına düşmeli */
@keyframes kapakAcil {
  0%   { transform: rotateX(0deg);    z-index: 5; }
  49%  {                              z-index: 5; }
  50%  {                              z-index: 0; }
  100% { transform: rotateX(-174deg); z-index: 0; }
}

@keyframes kagitCik {
  0%   { transform: translateY(0)    scale(1); }
  100% { transform: translateY(-46%) scale(1.03); }
}

/* Zarf gövdesi geri plana çekilsin, mektup öne çıksın */
@keyframes zarfInce {
  to { opacity: .55; transform: translateY(4px) scale(.985); }
}

.zarf-muhur {
  position: absolute;
  left: 50%;
  top: 56%;
  transform: translate(-50%, -50%);
  width: 94px;
  height: 94px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #DCD6C8, var(--vurgu));
  display: grid;
  place-items: center;
  font-family: var(--yazi-baslik);
  color: #fff;
  font-size: 20px;
  letter-spacing: .04em;
  box-shadow: 0 4px 14px rgba(120, 114, 100, .32);
  z-index: 6;
}

/* Monogram görseli varsa mühür, damgalanmış bir fildişi disk olur */
.zarf-muhur--gorsel {
  background: radial-gradient(circle at 36% 28%, #FFFFFF 0%, #F4F2EC 58%, #E4E0D4 100%);
  border: 1px solid rgba(167, 155, 132, .55);
  box-shadow: 0 4px 16px rgba(120, 114, 100, .28),
              inset 0 1px 2px rgba(255, 255, 255, .9),
              inset 0 -2px 5px rgba(150, 142, 122, .18);
}
.zarf-muhur--gorsel img {
  width: 78%;
  height: 78%;
  object-fit: contain;
  filter: drop-shadow(0 1px 1px rgba(255, 255, 255, .7));
}

@keyframes sallan {
  0%, 100% { transform: translateY(0)   rotate(0deg); }
  50%      { transform: translateY(-9px) rotate(-1.2deg); }
}

/* Hareket azaltma tercihinde zarf anında açılmış sayılır */
@media (prefers-reduced-motion: reduce) {
  .zarf, .zarf.aciliyor { animation: none; }
  .zarf.aciliyor .zarf-muhur,
  .zarf.aciliyor .zarf-kapak,
  .zarf.aciliyor .zarf-kagit,
  .zarf.aciliyor .zarf-arka,
  .zarf.aciliyor .zarf-on { animation: none; }
  .zarf.aciliyor .zarf-muhur { opacity: 0; }
  .zarf.aciliyor .zarf-kapak { transform: rotateX(-174deg); z-index: 0; }
}

#acilis .cift-adi {
  font-family: var(--yazi-el);
  font-size: clamp(38px, 9vw, 58px);
  color: var(--koyu);
  margin: 0 0 8px;
  line-height: 1.15;
}
#acilis .alt-not {
  color: var(--metin-soluk);
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin: 0 0 30px;
}

/* ============================================================
   DÜĞMELER
   ============================================================ */
.dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  padding: 15px 34px;
  border: none;
  border-radius: 100px;
  background: var(--koyu);
  color: var(--beyaz);
  font-family: var(--yazi-govde);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: var(--gecis);
  box-shadow: var(--golge-yumusak);
}
.dugme:hover { background: #1F2124; transform: translateY(-2px); box-shadow: var(--golge); }
.dugme:active { transform: translateY(0); }
.dugme:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.dugme--vurgu { background: var(--vurgu); }
.dugme--vurgu:hover { background: #8E8370; }

.dugme--cizgi {
  background: transparent;
  color: var(--koyu);
  border: 1px solid var(--koyu-acik);
  box-shadow: none;
}
.dugme--cizgi:hover { background: var(--koyu); color: var(--beyaz); }

.dugme svg { width: 17px; height: 17px; }

/* ============================================================
   HERO
   ============================================================ */
#hero {
  min-height: 100svh;
  /* Flex kullanılıyor (grid değil): grid'de mutlak konumlu çocuklar grid
     ALANINA göre hizalanır ve içerik taşınca sahne katmanları kayar. */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 90px 22px 70px;
  position: relative;
  background: linear-gradient(165deg, #FBFBFA 0%, #F3F3F0 55%, #EAEAE6 100%);
  overflow: hidden;
}
#hero.foto-var { background-size: cover; background-position: center; }
#hero.foto-var::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30,34,30,.42), rgba(30,34,30,.62));
}
#hero.foto-var .hero-ic { color: var(--beyaz); }
#hero.foto-var .hero-ic .cift,
#hero.foto-var .hero-ic .tarih-satir,
#hero.foto-var .hero-ic .ve { color: var(--beyaz); }
#hero.foto-var .hero-ic .ust-yazi { color: var(--vurgu-acik); }

.hero-ic { position: relative; z-index: 2; max-width: 660px; }

.hero-cerceve {
  border: 1px solid rgba(120, 114, 100, .34);
  border-radius: 3px;
  padding: 52px 28px 46px;
  position: relative;
}
#hero.foto-var .hero-cerceve { border-color: rgba(255,255,255,.42); }

.hero-cerceve::before,
.hero-cerceve::after {
  content: '';
  position: absolute;
  width: 34px; height: 34px;
  border: 1px solid var(--vurgu);
}
.hero-cerceve::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.hero-cerceve::after  { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.cift {
  font-family: var(--yazi-el);
  font-size: clamp(46px, 13vw, 88px);
  line-height: 1.06;
  color: var(--koyu);
  margin: 14px 0 6px;
}
.ve {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: clamp(20px, 4vw, 27px);
  font-style: italic;
  color: var(--vurgu);
  margin: 4px 0;
  font-weight: 400;
}
.tarih-satir {
  font-family: var(--yazi-baslik);
  font-size: clamp(16px, 3.4vw, 20px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--koyu);
  margin: 20px 0 0;
}
/* Aileler: solda gelinlik + gelin ailesi, sağda papyon + damat ailesi */
.aileler {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: clamp(24px, 8vw, 68px);
  margin: 30px 0 0;
}
.aile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.aile-ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  border: var(--kenar);
  color: var(--vurgu);
  background: rgba(255, 255, 255, .45);
}
.aile-ikon svg { width: 29px; height: 29px; }
.aile-ad {
  font-size: 12.5px;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  white-space: nowrap;
}
.aile-ayrac {
  width: 1px;
  align-self: center;
  height: 52px;
  background: linear-gradient(180deg, transparent, var(--vurgu-acik), transparent);
}

#hero.foto-var .aile-ad { color: rgba(255,255,255,.86); }
#hero.foto-var .aile-ikon { color: #fff; border-color: rgba(255,255,255,.4); }

/* ============================================================
   VİDEO MODU — açılışta 5 sn oynar, son karede donar,
   ardından isimler sırayla belirir.
   ============================================================ */
#hero.video-var { background: #EFE7D8; }

/* Işığı yumuşatan açık perde: yazı okunsun ama manzara solmasın */
#hero.video-var::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    radial-gradient(ellipse 70% 54% at 50% 48%,
      rgba(255, 253, 247, .95) 0%,
      rgba(255, 253, 247, .82) 40%,
      rgba(255, 253, 247, .42) 70%,
      rgba(255, 253, 247, 0)   92%),
    linear-gradient(180deg, rgba(255,253,247,.32) 0%, rgba(255,253,247,0) 24%);
  opacity: 0;
  transition: opacity 1.1s ease;
  pointer-events: none;
}
/* Perde, video donduktan sonra devreye girer — oynarken manzara net kalsın */
#hero.video-var.video-dondu::after { opacity: 1; }

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* Video modunda yazı renkleri: grafit + platin */
#hero.video-var .hero-ic        { z-index: 10; }
#hero.video-var .cift           { color: #26282B; text-shadow: 0 2px 20px rgba(255,253,247,1), 0 0 40px rgba(255,253,247,.9); }
#hero.video-var .ve             { color: #A79B84; }
#hero.video-var .tarih-satir {
  color: #24262A;
  font-size: clamp(17px, 3.6vw, 22px);
  text-shadow: 0 1px 8px rgba(255,253,247,1), 0 0 22px rgba(255,253,247,1),
               0 0 42px rgba(255,253,247,.85);
}
#hero.video-var .aile-ad {
  color: #2E3135;
  font-size: 13px;
  text-shadow: 0 1px 8px rgba(255,253,247,1), 0 0 20px rgba(255,253,247,1),
               0 0 36px rgba(255,253,247,.8);
}
#hero.video-var .aile-ikon {
  color: #6F6448;
  background: rgba(255, 253, 247, .82);
  border-color: rgba(135, 122, 95, .5);
  box-shadow: 0 0 22px rgba(255, 253, 247, .9);
}
#hero.video-var .aile-ayrac { opacity: .7; }
#hero.video-var .ust-yazi {
  color: #6F6448;
  text-shadow: 0 1px 8px rgba(255,253,247,1), 0 0 18px rgba(255,253,247,.95);
}
#hero.video-var .hero-cerceve   { border-color: rgba(135,122,95,.6); background: transparent; }

/* --- Metin girişi ---
   ÖNEMLİ: giriş, keyframe animasyonu yerine GEÇİŞ (transition) ile yapılır.
   Böylece animasyonlar herhangi bir sebeple çalışmazsa (gizli sekme, eski
   tarayıcı, düşük güç modu) metin kaybolmaz; doğrudan görünür duruma atlar. */
#hero.video-var .ust-yazi,
#hero.video-var .cift,
#hero.video-var .ve,
#hero.video-var .tarih-satir,
#hero.video-var .aileler,
#hero.video-var .hero-cerceve {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .9s ease, transform 1s cubic-bezier(.22, .61, .36, 1);
}
#hero.video-var .hero-cerceve { transform: scale(1.03); }

/* Ok yalnızca sönümlenir — zıplama animasyonu transform'u kullanıyor */
#hero.video-var .asagi-ok {
  opacity: 0;
  transition: opacity .9s ease;
}

/* --- Video donunca sırayla belirir --- */
#hero.video-var.video-dondu .ust-yazi,
#hero.video-var.video-dondu .cift,
#hero.video-var.video-dondu .ve,
#hero.video-var.video-dondu .tarih-satir,
#hero.video-var.video-dondu .aileler,
#hero.video-var.video-dondu .hero-cerceve {
  opacity: 1;
  transform: none;
}
#hero.video-var.video-dondu .asagi-ok { opacity: 1; }

#hero.video-var.video-dondu .hero-cerceve  { transition-delay: .25s; }
#hero.video-var.video-dondu .ust-yazi      { transition-delay: .45s; }
#hero.video-var.video-dondu .cift          { transition-delay: .7s; }
#hero.video-var.video-dondu .ve            { transition-delay: 1.05s; }
#hero.video-var.video-dondu .tarih-satir   { transition-delay: 1.25s; }
#hero.video-var.video-dondu .aileler       { transition-delay: 1.5s; }
#hero.video-var.video-dondu .asagi-ok      { transition-delay: 1.85s; }

/* Hareket azaltma tercihinde her şey anında görünsün */
@media (prefers-reduced-motion: reduce) {
  #hero.video-var .ust-yazi,
  #hero.video-var .cift,
  #hero.video-var .ve,
  #hero.video-var .tarih-satir,
  #hero.video-var .aileler,
  #hero.video-var .hero-cerceve,
  #hero.video-var .asagi-ok {
    opacity: 1;
    transform: none;
    transition: none;
  }
}


.asagi-ok {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  /* Sahne katmanlarının (en üstte sis: 7) üzerinde kalmalı */
  z-index: 9;
  color: var(--vurgu);
  animation: zipla 2.1s ease-in-out infinite;
}
.asagi-ok svg { width: 26px; height: 26px; }
@keyframes zipla {
  0%, 100% { transform: translate(-50%, 0);     opacity: .55; }
  50%      { transform: translate(-50%, 9px);   opacity: 1; }
}

/* ============================================================
   GERİ SAYIM
   ============================================================ */
#gerisayim { background: var(--beyaz); border-block: var(--kenar); }

.sayac {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
}
.sayac-kutu {
  background: var(--zemin);
  border: var(--kenar);
  border-radius: 4px;
  padding: 22px 6px 16px;
  text-align: center;
}
.sayac-sayi {
  font-family: var(--yazi-baslik);
  font-size: clamp(30px, 8vw, 46px);
  line-height: 1;
  color: var(--koyu);
  font-variant-numeric: lining-nums tabular-nums;
  display: block;
}
.sayac-etiket {
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--metin-soluk);
  margin-top: 9px;
  display: block;
}
.sayac-bitti {
  text-align: center;
  font-family: var(--yazi-el);
  font-size: 34px;
  color: var(--vurgu);
}

/* ============================================================
   DAVET METNİ
   ============================================================ */
.davet-metni {
  font-family: var(--yazi-baslik);
  font-size: clamp(19px, 3.6vw, 24px);
  font-style: italic;
  line-height: 1.85;
  text-align: center;
  color: var(--metin);
  margin: 0;
}

/* ============================================================
   PROGRAM
   ============================================================ */
#program { background: var(--beyaz); border-block: var(--kenar); }

.program-liste {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  max-width: 470px;
  position: relative;
}
.program-liste::before {
  content: '';
  position: absolute;
  left: 27px; top: 30px; bottom: 30px;
  width: 1px;
  background: linear-gradient(180deg, transparent, var(--vurgu-acik) 12%, var(--vurgu-acik) 88%, transparent);
}
.program-sat {
  display: grid;
  grid-template-columns: 56px 1fr;
  align-items: center;
  gap: 20px;
  padding: 15px 0;
  position: relative;
}
.program-ikon {
  width: 55px; height: 55px;
  border-radius: 50%;
  background: var(--zemin);
  border: var(--kenar);
  display: grid;
  place-items: center;
  color: var(--vurgu);
  position: relative;
  z-index: 2;
}
.program-ikon svg { width: 23px; height: 23px; }
.program-saat {
  font-family: var(--yazi-baslik);
  font-size: 22px;
  color: var(--vurgu);
  line-height: 1.2;
}
.program-baslik {
  font-size: 16px;
  letter-spacing: .07em;
  color: var(--koyu);
  font-weight: 500;
}

/* ============================================================
   MEKÂN
   ============================================================ */
.mekan-ad {
  font-family: var(--yazi-baslik);
  font-size: clamp(24px, 5vw, 31px);
  color: var(--koyu);
  text-align: center;
  margin: 0 0 8px;
}
.mekan-adres {
  text-align: center;
  color: var(--metin-soluk);
  font-size: 15.5px;
  margin: 0 0 30px;
}
.harita {
  width: 100%;
  height: 330px;
  border: var(--kenar);
  border-radius: 5px;
  filter: grayscale(.35) sepia(.12);
  background: var(--zemin-koyu);
}
.mekan-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin-top: 26px;
}

/* ============================================================
   GALERİ
   ============================================================ */
.galeri-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
}
.galeri-izgara img {
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 4px;
  border: var(--kenar);
  cursor: pointer;
  transition: var(--gecis);
}
.galeri-izgara img:hover { transform: scale(1.025); box-shadow: var(--golge); }

/* Büyük görüntüleyici */
#lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(28, 30, 28, .93);
  display: none;
  place-items: center;
  padding: 24px;
}
#lightbox.acik { display: grid; }
#lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 4px; object-fit: contain; }
#lightbox .kapat {
  position: absolute; top: 18px; right: 20px;
  background: none; border: none; color: #fff;
  font-size: 34px; line-height: 1; cursor: pointer;
}

/* ============================================================
   FORMLAR (LCV, dilek, yükleme)
   ============================================================ */
#lcv { background: var(--beyaz); border-block: var(--kenar); }

.form-kart {
  background: var(--zemin);
  border: var(--kenar);
  border-radius: 6px;
  padding: 34px 26px;
  box-shadow: var(--golge-yumusak);
}
#lcv .form-kart { background: var(--beyaz); }

.alan { margin-bottom: 20px; }

/* Alan başlıkları — seçenek/onay etiketlerini kapsamaz (onların kendi stili var) */
.alan label:not(.secenek):not(.onay),
.grup-baslik {
  display: block;
  font-size: 12px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--koyu);
  margin-bottom: 9px;
  font-weight: 500;
}

.alan input[type=text],
.alan input[type=tel],
.alan input[type=email],
.alan input[type=number],
.alan select,
.alan textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid rgba(50, 52, 58, .2);
  border-radius: 4px;
  background: var(--beyaz);
  color: var(--metin);
  font-family: var(--yazi-govde);
  font-size: 16px;
  transition: border-color .25s, box-shadow .25s;
}
.alan textarea { min-height: 105px; resize: vertical; line-height: 1.65; }

.alan input:focus,
.alan select:focus,
.alan textarea:focus {
  outline: none;
  border-color: var(--vurgu);
  box-shadow: 0 0 0 3px rgba(120, 114, 100, .12);
}

.ikili {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Katılım seçenekleri — kart tipi radyo */
.secenekler { display: grid; gap: 10px; }
.secenek {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 17px;
  border: 1px solid rgba(50, 52, 58, .18);
  border-radius: 5px;
  background: var(--beyaz);
  cursor: pointer;
  transition: var(--gecis);
  font-size: 15.5px;
}
.secenek input { position: absolute; opacity: 0; pointer-events: none; }
.secenek .isaret {
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--koyu-acik);
  flex: none;
  display: grid; place-items: center;
  transition: var(--gecis);
}
.secenek .isaret::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--vurgu);
  transform: scale(0);
  transition: transform .22s cubic-bezier(.34,1.56,.64,1);
}
.secenek:has(input:checked) {
  border-color: var(--vurgu);
  background: rgba(185, 148, 86, .07);
}
.secenek:has(input:checked) .isaret { border-color: var(--vurgu); }
.secenek:has(input:checked) .isaret::after { transform: scale(1); }

/* Onay kutuları */
.onay {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 12px;
  color: var(--metin);
}
.onay input {
  appearance: none;
  width: 19px; height: 19px;
  flex: none;
  margin-top: 2px;
  border: 1.5px solid var(--koyu-acik);
  border-radius: 3px;
  background: var(--beyaz);
  cursor: pointer;
  transition: var(--gecis);
  position: relative;
}
.onay input:checked { background: var(--vurgu); border-color: var(--vurgu); }
.onay input:checked::after {
  content: '';
  position: absolute;
  left: 5.5px; top: 1.5px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* Kişi/çocuk sayısı alanı — katılmıyorum seçilince gizlenir */
.kosullu {
  overflow: hidden;
  max-height: 260px;
  opacity: 1;
  transition: max-height .45s ease, opacity .3s ease, margin .45s ease;
}
.kosullu.gizli { max-height: 0; opacity: 0; margin-bottom: 0; }

.form-alt { margin-top: 26px; text-align: center; }
.form-alt .dugme { width: 100%; max-width: 320px; }

/* Bildirim mesajı */
.bildirim {
  padding: 14px 17px;
  border-radius: 5px;
  font-size: 15px;
  margin-bottom: 18px;
  display: none;
  line-height: 1.6;
}
.bildirim.goster { display: block; }
.bildirim.basari { background: rgba(46, 48, 51, .07);  color: var(--koyu); border: 1px solid rgba(46, 48, 51, .18); }
.bildirim.hata   { background: rgba(150, 60, 60, .07); color: #8E3A3A;     border: 1px solid rgba(150, 60, 60, .2); }

/* Teşekkür ekranı */
.tesekkur { text-align: center; padding: 20px 0; display: none; }
.tesekkur.goster { display: block; }
.tesekkur .kalp { color: var(--vurgu); margin: 0 auto 16px; width: 46px; height: 46px; }
.tesekkur h3 {
  font-family: var(--yazi-el);
  font-size: 36px;
  color: var(--koyu);
  margin: 0 0 10px;
  font-weight: 400;
}
.tesekkur p { color: var(--metin-soluk); margin: 0; }

/* ============================================================
   ANI PAYLAŞIMI
   ============================================================ */
.birak-alan {
  border: 1.5px dashed var(--vurgu-acik);
  border-radius: 6px;
  padding: 38px 20px;
  text-align: center;
  background: var(--beyaz);
  cursor: pointer;
  transition: var(--gecis);
  color: var(--metin-soluk);
}
.birak-alan:hover, .birak-alan.uzerinde {
  background: rgba(185, 148, 86, .06);
  border-color: var(--vurgu);
}
.birak-alan svg { width: 38px; height: 38px; color: var(--vurgu); margin: 0 auto 12px; }
.birak-alan strong { color: var(--koyu); display: block; margin-bottom: 5px; font-weight: 500; }
.birak-alan small { font-size: 13px; }

.onizleme {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 9px;
  margin-top: 16px;
}
.onizleme figure {
  margin: 0; position: relative;
  aspect-ratio: 1; border-radius: 4px; overflow: hidden;
  border: var(--kenar);
}
.onizleme img { width: 100%; height: 100%; object-fit: cover; }
.onizleme button {
  position: absolute; top: 3px; right: 3px;
  width: 21px; height: 21px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.6); color: #fff;
  font-size: 14px; line-height: 1; cursor: pointer;
  display: grid; place-items: center;
}

/* ============================================================
   DİLEK DEFTERİ
   ============================================================ */
.dilek-liste { display: grid; gap: 14px; margin-bottom: 30px; }
.dilek {
  background: var(--beyaz);
  border: var(--kenar);
  border-left: 3px solid var(--vurgu-acik);
  border-radius: 4px;
  padding: 18px 20px;
}
.dilek p {
  margin: 0 0 9px;
  font-family: var(--yazi-baslik);
  font-style: italic;
  font-size: 18px;
  line-height: 1.7;
}
.dilek cite {
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--vurgu);
}

/* ============================================================
   MÜZİK DÜĞMESİ
   ============================================================ */
#muzik-dugme {
  position: fixed;
  right: 18px; bottom: 18px;
  z-index: 500;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: var(--kenar);
  background: var(--beyaz);
  color: var(--vurgu);
  cursor: pointer;
  display: grid; place-items: center;
  box-shadow: var(--golge);
  transition: var(--gecis);
}
#muzik-dugme:hover { transform: scale(1.08); }
#muzik-dugme svg { width: 21px; height: 21px; }
#muzik-dugme.calıyor { background: var(--vurgu); color: #fff; }

/* ============================================================
   ALT BİLGİ
   ============================================================ */
footer {
  text-align: center;
  padding: 54px 22px 40px;
  background: var(--koyu);
  color: rgba(255, 253, 249, .8);
  font-size: 14px;
}
footer .cift-alt {
  font-family: var(--yazi-el);
  font-size: 40px;
  color: var(--vurgu-acik);
  margin: 0 0 10px;
  line-height: 1.2;
}
footer .iletisim { margin-top: 18px; font-size: 13.5px; }
footer a { color: var(--vurgu-acik); text-decoration: none; }
footer a:hover { text-decoration: underline; }

/* ============================================================
   GİRİŞ ANİMASYONU
   ============================================================ */
.beliren {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s ease, transform .9s cubic-bezier(.22,.61,.36,1);
}
.beliren.gorundu { opacity: 1; transform: none; }

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

/* ============================================================
   MOBİL
   ============================================================ */
@media (max-width: 600px) {
  body { font-size: 16px; }
  .bolum { padding: 62px 18px; }
  .hero-cerceve { padding: 40px 14px 34px; }
  .zarf-muhur { width: 82px; height: 82px; }
  /* Tarih satırı dar ekranda tek satıra sığsın */
  .tarih-satir,
  #hero.video-var .tarih-satir { font-size: 14px; letter-spacing: .11em; }
  .sayac { gap: 7px; }
  .sayac-kutu { padding: 16px 3px 12px; }
  .ikili { grid-template-columns: 1fr; }
  .form-kart { padding: 26px 18px; }
  .harita { height: 260px; }
  .program-sat { grid-template-columns: 48px 1fr; gap: 15px; }
  .program-ikon { width: 47px; height: 47px; }
  .program-liste::before { left: 23px; }
  .mekan-dugmeler .dugme { width: 100%; }
}

/* ---------- KOPYA rozeti ---------- */
.kopya-rozet {
  position: fixed;
  top: 14px;
  left: 14px;
  z-index: 9999;
  padding: 6px 14px;
  border-radius: 100px;
  background: #B3452F;
  color: #fff;
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  box-shadow: 0 4px 14px rgba(120, 40, 25, .35);
  pointer-events: none;
  user-select: none;
}