/* ============================================================
   DÜĞÜN DAVETİYESİ — style.css
   Tema: tamamen açık & ferah · beyaz zemin · ten/altın vurgular
   Gövde: Montserrat · Başlık ve isimler: Playfair Display Italic
   Kartlar: tek ince çizgi, hafif yuvarlak köşe · gölgesiz
   ============================================================ */
:root{
  --bg:#ffffff;
  --bg-soft:#faf8f5;
  --ink:#3a352f;
  --grey:#6d675f;
  --tan:#a68a64;
  --tan-soft:#b49a76;
  --frame:#c3b299;
  --serif-it:"Playfair Display", Georgia, serif;
  --sans:"Montserrat", "Helvetica Neue", system-ui, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans);
  font-weight:300;
  font-size:1.05rem;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* Başlık stili — italik serif, gölgesiz */
.echo{
  font-family:var(--serif-it);
  font-style:italic;
  font-weight:500;
  color:var(--tan);
}

/* ===================== KAPAK ===================== */
.cover{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(80% 60% at 18% 8%, #dfe4dc 0%, transparent 55%),
    radial-gradient(70% 55% at 88% 88%, #dae0d7 0%, transparent 55%),
    radial-gradient(130% 100% at 50% 40%, #f6f4f0 0%, #ebeae5 55%, #e0e2dc 100%);
  transition:opacity .9s ease, visibility .9s ease;
}
.cover.hide{ opacity:0; visibility:hidden; }
.cover-inner{ position:relative; text-align:center; padding:2rem; }
.cover-title{
  font-size:clamp(1.05rem,4vw,1.35rem);
  font-weight:400;
  letter-spacing:.04em;
  color:#4d4a44;
}
.cover-date{
  font-family:var(--serif-it); font-style:italic; font-weight:500;
  font-size:clamp(2.1rem,7.5vw,3rem);
  margin:1rem 0 .6rem; color:var(--tan);
}
.cover-line{ display:block; width:34px; height:1px; background:#8b857b; opacity:.6; margin:.6rem auto 2.2rem; }
.open-btn{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.05rem,3.8vw,1.2rem);
  color:#fff; cursor:pointer;
  padding:.95rem 2.1rem; border-radius:10px;
  background:#a68b63;
  border:none;
  box-shadow:0 12px 30px -12px rgba(90,75,55,.45);
  transition:transform .25s ease, box-shadow .25s ease;
}
.open-btn:hover{ transform:translateY(-2px); box-shadow:0 18px 38px -14px rgba(90,75,55,.55); }

/* ===================== DAVETİYE ===================== */
.invite{ opacity:0; transition:opacity 1s ease .1s; }
.invite.show{ opacity:1; }

/* GİRİŞ BLOĞU — açık zemin */
.hero{
  background:var(--bg-soft);
  color:var(--ink);
  text-align:center;
  padding:clamp(4rem,12vw,7rem) 1.4rem clamp(4.5rem,13vw,7.5rem);
  border-bottom:1px solid #eee9e1;
}
.hero-frame{
  max-width:400px;
  margin:0 auto clamp(2.6rem,8vw,3.6rem);
  padding:clamp(2.4rem,8vw,3.2rem) 1.5rem;
  border:1px solid var(--frame);
  border-radius:12px;
  background:var(--bg);
}
.mono{
  font-family:var(--serif-it); font-style:italic; font-weight:500;
  font-size:clamp(2.8rem,10vw,3.8rem);
  letter-spacing:.18em; text-indent:.18em;
  color:var(--tan);
  line-height:1;
  margin-bottom:1.1rem;
}
.mono-date{
  font-family:var(--sans); font-weight:400;
  letter-spacing:.28em; text-indent:.28em;
  font-size:clamp(.9rem,3.2vw,1.05rem);
  color:var(--grey); text-transform:uppercase;
}
.hero-msg{
  max-width:38ch;
  margin:0 auto 1.8rem;
  font-weight:300;
  letter-spacing:.1em;
  font-size:clamp(.98rem,3.6vw,1.15rem);
  line-height:2;
  color:var(--grey);
  text-transform:uppercase;
}
.names{
  font-family:var(--serif-it); font-style:italic; font-weight:500;
  font-size:clamp(2.5rem,10vw,4rem);
  color:var(--tan);
  line-height:1.3;
  margin-bottom:1.6rem;
}
.hero-date{
  font-family:var(--sans); font-weight:400;
  letter-spacing:.26em; text-indent:.26em;
  font-size:clamp(.95rem,3.4vw,1.1rem);
  color:var(--ink); text-transform:uppercase;
  margin:.35rem 0;
}

/* MONOGRAM AYRAÇ */
.split{ text-align:center; padding:clamp(3.5rem,10vw,5rem) 1.4rem 0; }
.split-mono{
  display:inline-flex; align-items:flex-start; justify-content:center; gap:1.1rem;
}
.split-mono span:not(.split-bar){
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  font-size:clamp(3rem,11vw,4rem);
  line-height:1;
  color:#cec7ba;
}
.split-mono span#splitB{ color:#ddd5c6; }
.split-bar{
  width:1px; align-self:stretch;
  min-height:clamp(7rem,24vw,10rem);
  background:#4d4a44;
}

/* SADE ÇERÇEVELİ KART */
.frame-card{
  max-width:640px;
  margin:0 auto;
  padding:clamp(3rem,10vw,4.2rem) clamp(1.5rem,6vw,2.8rem);
  border:1px solid var(--frame);
  border-radius:14px;
  background:var(--bg);
  text-align:center;
}

/* AİLELER */
.families{ padding:clamp(3rem,9vw,5rem) 1.25rem; }
.families .frame-card{
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(1.8rem,6vw,2.6rem);
}
.fam-name{
  font-family:var(--serif-it); font-style:italic; font-weight:500;
  font-size:clamp(2.3rem,9vw,3.1rem);
  color:var(--tan);
  line-height:1.3;
  margin-bottom:.5rem;
}
.fam-sur{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(1.25rem,4.6vw,1.55rem);
  color:var(--ink);
  line-height:1.4;
}
.amp{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  font-size:clamp(2.2rem,8vw,3rem);
  color:var(--ink);
}

/* DAVET METNİ */
.verse{
  text-align:center; max-width:640px;
  margin:0 auto;
  padding:clamp(3.5rem,10vw,6rem) 1.6rem;
}
.verse-text{
  font-family:var(--serif-it); font-style:italic; font-weight:400;
  font-size:clamp(1.15rem,4.2vw,1.4rem);
  line-height:1.95; color:#4a4239;
}
.verse-src{
  font-family:var(--sans); font-weight:400;
  letter-spacing:.2em; text-indent:.2em;
  font-size:clamp(.85rem,3vw,.95rem);
  text-transform:uppercase; color:var(--tan);
  margin-top:1.6rem;
}

/* ETKİNLİK KARTLARI */
.events{
  display:flex; flex-direction:column;
  gap:clamp(2.2rem,7vw,3rem);
  padding:clamp(1rem,4vw,2rem) 1.25rem clamp(3rem,9vw,5rem);
}
.event .ev-title{
  font-size:clamp(2.3rem,9.5vw,3rem);
  line-height:1.25;
  margin-bottom:1.4rem;
}
.event .ev-venue{
  font-family:var(--sans); font-weight:400;
  font-size:clamp(1.45rem,5.8vw,1.9rem);
  color:var(--ink);
  line-height:1.4;
  margin-bottom:1.1rem;
}
.event .ev-line{
  font-weight:300;
  font-size:clamp(1.05rem,4vw,1.2rem);
  color:var(--grey);
  margin:.4rem 0;
}
.event .ev-ic{
  display:block; margin:1.7rem auto 1.3rem;
  color:var(--tan);
}
.event .ev-addr{
  font-weight:300;
  font-size:clamp(1.02rem,3.9vw,1.15rem);
  line-height:1.7;
  color:var(--ink);
  max-width:34rem;
  margin:0 auto 1.8rem;
}
.map-btn{
  display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:400;
  font-size:clamp(.98rem,3.6vw,1.1rem);
  color:#fff; text-decoration:none;
  padding:.8rem 1.8rem; border-radius:10px;
  background:#a68b63;
  transition:transform .2s ease;
  box-shadow:0 10px 24px -12px rgba(90,75,55,.4);
}
.map-btn:hover{ transform:translateY(-2px); }

/* GERİ SAYIM */
.countdown{ text-align:center; padding:clamp(3rem,9vw,5rem) 1.4rem; }
.section-title{
  font-size:clamp(2.2rem,9vw,2.8rem);
  margin-bottom:clamp(2rem,7vw,3rem);
}
.cd-grid{
  display:flex; justify-content:center;
  gap:clamp(1.6rem,7vw,3.4rem);
  flex-wrap:wrap;
}
.cd-item{ display:flex; flex-direction:column; align-items:center; min-width:64px; }
.cd-item span{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(2.1rem,7.5vw,2.7rem);
  color:var(--grey); line-height:1;
}
.cd-item small{
  font-family:var(--sans); font-weight:300;
  font-size:clamp(.95rem,3.4vw,1.1rem);
  color:var(--grey); margin-top:.35rem;
}

/* FOOTER */
.foot{ text-align:center; padding:clamp(3rem,9vw,5rem) 1.6rem clamp(4rem,11vw,6rem); }
.thanks{
  font-family:var(--serif-it); font-style:italic;
  font-size:clamp(1.3rem,4.8vw,1.6rem);
  color:#443e37;
  margin-bottom:2.2rem;
}
.heart-divider{
  display:flex; align-items:center; justify-content:center;
  gap:1.2rem; color:#9b825f;
  max-width:580px; margin:0 auto 2.4rem;
}
.hd-line{ flex:1; height:1px; background:#c3b299; }
.foot-names{
  font-family:var(--serif-it); font-style:italic; font-weight:500;
  font-size:clamp(2rem,8vw,2.7rem);
  color:var(--tan);
}

/* MÜZİK BUTONU */
.music-btn{
  position:fixed; right:18px; bottom:22px; z-index:90;
  width:54px; height:54px; border-radius:50%;
  border:1px solid var(--frame);
  background:#fff; color:var(--tan);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
  box-shadow:0 10px 26px -12px rgba(0,0,0,.25);
  transition:transform .2s ease;
}
.music-btn:hover{ transform:scale(1.06); }
.music-btn.playing{ animation:spin 6s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

/* Reveal animasyonu */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity .9s ease, transform .9s ease; }
.reveal.in{ opacity:1; transform:none; }

/* İsimlerde soldan açılma */
.handwrite{
  -webkit-mask-image:linear-gradient(90deg, #000 70%, rgba(0,0,0,0));
  mask-image:linear-gradient(90deg, #000 70%, rgba(0,0,0,0));
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-size:0% 100%; mask-size:0% 100%;
}
.handwrite.writing{ animation:handwrite 1.8s cubic-bezier(.62,.03,.26,1) forwards; }
@keyframes handwrite{
  from{ -webkit-mask-size:0% 100%; mask-size:0% 100%; }
  to{ -webkit-mask-size:140% 100%; mask-size:140% 100%; }
}

/* Hero girişi */
.invite.show .hero-frame{ animation:cardIn 1.1s ease .2s both; }
.invite.show .hero-msg{ animation:fadeUp 1s ease .35s both; }
@keyframes fadeUp{ from{ opacity:0; transform:translateY(16px);} to{ opacity:1; transform:none; } }
@keyframes cardIn{ from{ opacity:0; transform:translateY(22px);} to{ opacity:1; transform:none; } }

/* Geri sayım rakamları pop */
.cd-item{ opacity:0; }
.countdown.in .cd-item{ animation:pop .6s ease forwards; }
.countdown.in .cd-item:nth-child(1){ animation-delay:.05s; }
.countdown.in .cd-item:nth-child(2){ animation-delay:.15s; }
.countdown.in .cd-item:nth-child(3){ animation-delay:.25s; }
.countdown.in .cd-item:nth-child(4){ animation-delay:.35s; }
@keyframes pop{
  from{ opacity:0; transform:translateY(14px) scale(.9); }
  to{ opacity:1; transform:none; }
}

/* ===================== GENİŞ EKRAN ===================== */
@media (min-width:900px){
  .families .frame-card{ max-width:720px; }
  .events{ max-width:1100px; margin:0 auto; }
}

@media (prefers-reduced-motion:reduce){
  .reveal{ transition:none; opacity:1; transform:none; }
  .music-btn.playing{ animation:none; }
  .handwrite{ -webkit-mask:none; mask:none; }
  .handwrite.writing{ animation:none; }
  .cd-item, .hero-frame, .hero-msg{ opacity:1 !important; animation:none !important; transform:none !important; }
}