/* ============================================================
   DAVETİYE SAYFASI — invitation.css
   9:16 hissi veren, mobil öncelikli, premium davetiye.
   6 tema: beyaz-gold, pudra-romantik, siyah-sik,
           yesil-doga, kir-bahcesi, modern-minimal
   ============================================================ */

:root{
  --inv-bg:#fbf7ef; --inv-panel:#ffffff; --inv-ink:#2a2018;
  --inv-soft:#6b5d4d; --inv-accent:#c9a227; --inv-accent2:#e4c97e;
  --inv-line:rgba(42,32,24,.12);
  --inv-serif:"Cormorant Garamond",Georgia,serif;
  --inv-script:"Great Vibes",cursive;
  --inv-sans:"Jost",system-ui,sans-serif;
}

/* ---- Tema: Beyaz Gold ---- */
.theme-beyaz-gold{--inv-bg:#fbf7ef;--inv-panel:#fff;--inv-ink:#2a2018;
  --inv-soft:#6b5d4d;--inv-accent:#c9a227;--inv-accent2:#e4c97e;}
/* ---- Tema: Pudra Romantik ---- */
.theme-pudra-romantik{--inv-bg:#fbeeec;--inv-panel:#fff7f5;--inv-ink:#5a3a3a;
  --inv-soft:#8a6a6a;--inv-accent:#cf8b80;--inv-accent2:#eac3bc;}
/* ---- Tema: Siyah Şık ---- */
.theme-siyah-sik{--inv-bg:#15110d;--inv-panel:#1f1812;--inv-ink:#f3ecde;
  --inv-soft:#b9ab95;--inv-accent:#d4af37;--inv-accent2:#e4c97e;
  --inv-line:rgba(243,236,222,.14);}
/* ---- Tema: Yeşil Doğa ---- */
.theme-yesil-doga{--inv-bg:#eef3ec;--inv-panel:#fbfdfa;--inv-ink:#243a2c;
  --inv-soft:#577061;--inv-accent:#3f7d54;--inv-accent2:#9ec5a6;}
/* ---- Tema: Kır Bahçesi ---- */
.theme-kir-bahcesi{--inv-bg:#f6f1e4;--inv-panel:#fffdf6;--inv-ink:#46402c;
  --inv-soft:#7a6f4f;--inv-accent:#b08d3e;--inv-accent2:#d8c489;}
/* ---- Tema: Modern Minimal ---- */
.theme-modern-minimal{--inv-bg:#f4f4f2;--inv-panel:#fff;--inv-ink:#1c1c1c;
  --inv-soft:#6a6a6a;--inv-accent:#1c1c1c;--inv-accent2:#bdbdbd;
  --inv-script:"Cormorant Garamond",serif;}

*{box-sizing:border-box}
body.inv{margin:0;background:var(--inv-bg);color:var(--inv-ink);
  font-family:var(--inv-sans);line-height:1.6;overflow-x:hidden}
.inv-shell{max-width:560px;margin:0 auto;background:var(--inv-bg);
  box-shadow:0 0 80px rgba(0,0,0,.10);min-height:100vh;position:relative}
.inv .script{font-family:var(--inv-script)}
.inv-section{padding:54px 30px;position:relative}
.inv h1,.inv h2,.inv h3{font-family:var(--inv-serif);margin:0;font-weight:600;line-height:1.15}

/* reveal */
.r{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}
.r.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.r{opacity:1;transform:none}}

/* ---------- Kapak ---------- */
.inv-cover{height:100vh;min-height:620px;position:relative;display:flex;
  flex-direction:column;align-items:center;justify-content:center;text-align:center;
  color:#fff;padding:30px;overflow:hidden}
.inv-cover .bg{position:absolute;inset:0;background-size:cover;background-position:center;
  transform:scale(1.05);animation:slowZoom 14s ease-in-out infinite alternate}
@keyframes slowZoom{to{transform:scale(1.15)}}
.inv-cover .bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.28),rgba(0,0,0,.52))}
.inv-cover .inner{position:relative;z-index:2;text-shadow:0 2px 24px rgba(0,0,0,.45)}
.inv-cover .ek{letter-spacing:.42em;text-transform:uppercase;font-size:.7rem;opacity:.92;
  margin-bottom:1.2rem}
.inv-cover .names{font-family:var(--inv-script);font-size:clamp(3.4rem,15vw,5.6rem);
  line-height:.92}
.inv-cover .amp{display:block;font-size:.5em;margin:.1em 0;opacity:.9}
.inv-cover .date{margin-top:1.4rem;font-family:var(--inv-serif);font-size:1.3rem;
  letter-spacing:.1em}
.inv-cover .ornament{font-size:1.6rem;margin:1rem 0;color:var(--inv-accent2)}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);z-index:2;
  color:#fff;font-size:.75rem;opacity:.85;animation:bob 1.8s infinite}
@keyframes bob{50%{transform:translate(-50%,8px)}}

/* ---------- Geri sayım ---------- */
.countdown{display:flex;justify-content:center;gap:12px;margin:8px 0 4px}
.cd-box{background:var(--inv-panel);border:1px solid var(--inv-line);border-radius:16px;
  padding:14px 6px;min-width:70px;box-shadow:0 6px 20px rgba(0,0,0,.06)}
.cd-box b{display:block;font-family:var(--inv-serif);font-size:2rem;color:var(--inv-accent);
  line-height:1}
.cd-box span{font-size:.66rem;text-transform:uppercase;letter-spacing:.12em;color:var(--inv-soft)}
.passed-msg{text-align:center;font-family:var(--inv-serif);font-size:1.5rem;
  color:var(--inv-accent);padding:10px 0}

/* ---------- Ortak başlık ---------- */
.inv-title{text-align:center;margin-bottom:1.8rem}
.inv-title .ek{letter-spacing:.3em;text-transform:uppercase;font-size:.7rem;
  color:var(--inv-accent);margin-bottom:.5rem}
.inv-title h2{font-size:2rem}
.inv-divider{width:60px;height:1px;background:var(--inv-accent);margin:14px auto;position:relative}
.inv-divider::before{content:"❦";position:absolute;top:50%;left:50%;
  transform:translate(-50%,-50%);background:var(--inv-bg);padding:0 10px;color:var(--inv-accent)}

/* ---------- Davetiye metni ---------- */
.inv-text{text-align:center}
.inv-text .romantic{font-family:var(--inv-script);font-size:2rem;color:var(--inv-accent);
  margin-bottom:1rem}
.inv-text .main{font-family:var(--inv-serif);font-size:1.35rem;line-height:1.6;
  max-width:30rem;margin:0 auto}
.inv-text .note{margin-top:1.2rem;color:var(--inv-soft);font-style:italic}

/* ---------- Bilgi kartı (tarih/mekan) ---------- */
.inv-info{display:grid;gap:14px}
.info-card{background:var(--inv-panel);border:1px solid var(--inv-line);border-radius:16px;
  padding:20px;display:flex;gap:14px;align-items:center;box-shadow:0 4px 16px rgba(0,0,0,.05)}
.info-card .ic{width:46px;height:46px;border-radius:12px;flex:none;display:grid;place-items:center;
  font-size:1.3rem;background:var(--inv-accent2);color:var(--inv-ink)}
.info-card .tx b{display:block;font-family:var(--inv-serif);font-size:1.15rem}
.info-card .tx span{font-size:.9rem;color:var(--inv-soft)}

/* ---------- Butonlar ---------- */
.inv-btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:18px}
.inv-btn{display:inline-flex;align-items:center;gap:.5rem;padding:.8rem 1.3rem;
  border-radius:999px;font-family:var(--inv-sans);font-weight:600;font-size:.92rem;
  background:var(--inv-accent);color:#fff;border:1px solid var(--inv-accent);cursor:pointer;
  transition:transform .2s,box-shadow .2s;box-shadow:0 8px 22px rgba(0,0,0,.12)}
.inv-btn:hover{transform:translateY(-2px)}
.inv-btn.ghost{background:transparent;color:var(--inv-accent)}
.inv-btn.wa{background:#25d366;border-color:#25d366}
.theme-siyah-sik .inv-btn{color:#15110d}

/* ---------- Galeri (lightbox) ---------- */
.inv-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.inv-gallery img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;cursor:pointer;
  transition:transform .3s,filter .3s}
.inv-gallery img:hover{transform:scale(1.03);filter:brightness(1.05)}
.lightbox{position:fixed;inset:0;background:rgba(10,8,6,.92);z-index:200;
  display:none;align-items:center;justify-content:center;padding:20px}
.lightbox.open{display:flex}
.lightbox img{max-width:92vw;max-height:86vh;border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lightbox .x{position:absolute;top:18px;right:22px;color:#fff;font-size:2rem;cursor:pointer;
  background:none;border:0}
.lightbox .nav{position:absolute;top:50%;transform:translateY(-50%);color:#fff;font-size:2.4rem;
  cursor:pointer;background:none;border:0;padding:0 18px;opacity:.8}
.lightbox .prev{left:0}.lightbox .next{right:0}

/* ---------- Aile ---------- */
.inv-family{display:grid;grid-template-columns:1fr 1fr;gap:16px;text-align:center}
.fam-col{background:var(--inv-panel);border:1px solid var(--inv-line);border-radius:16px;padding:20px}
.fam-col .who{font-family:var(--inv-script);font-size:1.6rem;color:var(--inv-accent);margin-bottom:.5rem}
.fam-col p{margin:.2rem 0;font-size:1rem}
.fam-col small{color:var(--inv-soft)}
@media(max-width:420px){.inv-family{grid-template-columns:1fr}}

/* ---------- Program akışı (timeline) ---------- */
.timeline{position:relative;padding-left:32px}
.timeline::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:2px;
  background:var(--inv-accent2)}
.tl-item{position:relative;padding-bottom:26px}
.tl-item::before{content:"";position:absolute;left:-31px;top:4px;width:20px;height:20px;
  border-radius:50%;background:var(--inv-accent);border:4px solid var(--inv-bg)}
.tl-item h3{font-size:1.25rem}
.tl-item .meta{color:var(--inv-soft);font-size:.92rem;margin:.2rem 0}
.tl-item a{color:var(--inv-accent);font-size:.88rem;font-weight:600}

/* ---------- RSVP ---------- */
.rsvp-card{background:var(--inv-panel);border:1px solid var(--inv-line);border-radius:20px;
  padding:26px;box-shadow:0 10px 30px rgba(0,0,0,.06)}
.rsvp-card label{display:block;font-weight:600;font-size:.88rem;margin:0 0 .35rem}
.rsvp-card .f{margin-bottom:1rem}
.rsvp-card input,.rsvp-card select,.rsvp-card textarea{width:100%;padding:.8rem .9rem;
  border:1px solid var(--inv-line);border-radius:12px;font-family:var(--inv-sans);font-size:1rem;
  background:var(--inv-bg);color:var(--inv-ink)}
.rsvp-radio{display:flex;gap:10px}
.rsvp-radio label{flex:1;text-align:center;padding:.75rem;border:1px solid var(--inv-line);
  border-radius:12px;cursor:pointer;font-weight:600;transition:.2s;margin:0}
.rsvp-radio input{display:none}
.rsvp-radio input:checked+span{color:var(--inv-accent)}
.rsvp-radio label:has(input:checked){border-color:var(--inv-accent);background:var(--inv-accent2)}

/* ---------- Müzik düğmesi ---------- */
.music-toggle{position:fixed;bottom:20px;right:20px;z-index:120;width:52px;height:52px;
  border-radius:50%;background:var(--inv-accent);color:#fff;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:1.3rem;box-shadow:0 10px 26px rgba(0,0,0,.25)}
.music-toggle.playing{animation:spin 4s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- Footer ---------- */
.inv-footer{text-align:center;padding:40px 30px 60px;color:var(--inv-soft);font-size:.85rem}
.inv-footer .heart{color:var(--inv-accent);font-size:1.4rem;margin-bottom:.4rem}
.inv-footer a{color:var(--inv-accent);font-weight:600}

/* Demo şeridi */
.demo-ribbon{position:fixed;top:14px;left:14px;z-index:130;background:var(--inv-accent);
  color:#fff;font-size:.75rem;font-weight:700;padding:.4rem .8rem;border-radius:999px;
  box-shadow:0 6px 18px rgba(0,0,0,.2)}

/* Toast */
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--inv-ink);color:var(--inv-bg);padding:.8rem 1.4rem;border-radius:999px;
  font-size:.9rem;z-index:140;opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}