/* =========================================================
   Şükran & Celil — Düğün Davetiyesi
   Palet: krem zemin, gül kurusu vurgu
   ========================================================= */

:root{
  --cream:#FAF6F1;
  --paper:#FFFDFB;
  --sand:#F1E9E0;
  --ink:#3B3733;
  --muted:#8B8078;
  --rose:#A67D7A;
  --rose-deep:#8A6360;
  --line:rgba(166,125,122,.28);
  --shadow:0 18px 45px -28px rgba(59,55,51,.45);

  --script:"Allura", cursive;
  --serif:"Playfair Display", Georgia, serif;
  --body:"Cormorant Garamond", Georgia, serif;

  --pad:clamp(1.25rem, 5vw, 3rem);
  --sec:clamp(4rem, 11vw, 7.5rem);
}

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

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

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--body);
  font-size:clamp(1.05rem,.98rem + .4vw,1.2rem);
  line-height:1.75;
  letter-spacing:.01em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

img,svg,iframe{ max-width:100%; display:block; }
h1,h2,h3{ margin:0; font-weight:400; }
p{ margin:0; }

svg{ fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round; }

.container{
  width:min(1080px,100%);
  margin-inline:auto;
  padding-inline:var(--pad);
}

.section{ padding-block:var(--sec); }

/* ---------- Butonlar ---------- */
.btn{
  --btn-fg:var(--rose-deep);
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem;
  min-height:48px;
  padding:.7rem 1.9rem;
  border:1px solid var(--rose);
  border-radius:999px;
  background:transparent;
  color:var(--btn-fg);
  font-family:var(--body);
  font-size:.95rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  text-decoration:none;
  cursor:pointer;
  transition:background .35s ease,color .35s ease,transform .25s ease,box-shadow .35s ease;
}
.btn:hover,.btn:focus-visible{
  background:var(--rose);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 24px -16px rgba(138,99,96,.9);
}
.btn-primary{
  background:var(--rose);
  border-color:var(--rose);
  color:#fff;
}
.btn-primary:hover,.btn-primary:focus-visible{ background:var(--rose-deep); border-color:var(--rose-deep); }

:focus-visible{ outline:2px solid var(--rose-deep); outline-offset:3px; }

/* =========================================================
   GİRİŞ — DAVETİYE KARTI
   ========================================================= */
html.is-locked,
body.is-locked{ overflow:hidden; height:100%; }

.gate{
  position:fixed; inset:0; z-index:60;
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  justify-items:center;
  gap:clamp(1.25rem,4vh,2.25rem);
  padding:clamp(1.5rem,5vh,3rem) var(--pad);
  overflow:auto;
  transition:opacity .9s ease, visibility .9s;
}

/* Fotoğraf koyarsanız: assets/img/hero.jpg — yoksa zarif degrade görünür */
.gate-bg{
  position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 0%, #FFFDFB 0%, #F6EDE6 48%, #E7D6CB 100%),
    var(--sand);
  background-size:cover;
  background-position:center;
}
.gate-bg::after{
  content:"";
  position:absolute; inset:0;
  background-image:url("../img/hero.jpg");
  background-size:cover;
  background-position:center;
}
.gate-bg::before{
  content:"";
  position:absolute; inset:0; z-index:1;
  background:radial-gradient(75% 60% at 50% 45%, rgba(255,253,251,.72) 0%, rgba(250,246,241,.86) 100%);
}

.gate-note{
  font-size:clamp(.7rem,.62rem + .35vw,.82rem);
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--rose-deep);
  text-align:center;
  animation:fadeUp 1s .1s both;
}

/* --- ZARF --- */
.envelope{
  display:grid;
  justify-items:center;
  gap:clamp(1.8rem,6vw,2.8rem);
  padding:0;
  border:0;
  background:none;
  color:inherit;
  font:inherit;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}

.env{
  --w:min(24rem,82vw);
  --h:calc(var(--w) * .68);
  --paper:#FBF3EA;
  --paper-2:#F3E6D9;
  --paper-3:#EBDACB;
  --edge:rgba(150,116,92,.35);

  position:relative;
  display:block;
  width:var(--w);
  height:var(--h);
  perspective:1100px;
  animation:envIn 1.3s .2s cubic-bezier(.22,.61,.36,1) both,
            envFloat 5.5s 1.5s ease-in-out infinite;
  transition:transform .6s cubic-bezier(.22,.61,.36,1);
}
.envelope:hover .env,
.envelope:focus-visible .env{ transform:translateY(-8px); }

.env-shadow{
  position:absolute;
  left:8%; right:8%; bottom:-9%;
  height:14%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(59,55,51,.34), transparent 70%);
  filter:blur(6px);
  animation:shadowBreath 5.5s 1.5s ease-in-out infinite;
}

/* gövde */
.env-body{
  position:absolute; inset:0;
  border-radius:5px;
  background:linear-gradient(160deg,var(--paper) 0%,var(--paper-2) 100%);
  box-shadow:
    inset 0 0 0 1px var(--edge),
    0 26px 55px -26px rgba(59,55,51,.6);
  overflow:hidden;
}

/* ön yüzdeki katlama üçgenleri */
.env-fold{ position:absolute; inset:0; }
.env-fold.left{
  background:linear-gradient(115deg,var(--paper-2),var(--paper));
  clip-path:polygon(0 0, 52% 52%, 0 100%);
  box-shadow:inset -1px 0 0 var(--edge);
}
.env-fold.right{
  background:linear-gradient(245deg,var(--paper-2),var(--paper));
  clip-path:polygon(100% 0, 48% 52%, 100% 100%);
  box-shadow:inset 1px 0 0 var(--edge);
}
.env-fold.bottom{
  background:linear-gradient(0deg,var(--paper-3),var(--paper-2));
  clip-path:polygon(0 100%, 50% 47%, 100% 100%);
}
.env-fold.bottom::after{
  content:"";
  position:absolute; inset:0;
  clip-path:polygon(0 100%, 50% 47%, 100% 100%);
  box-shadow:inset 0 1px 0 var(--edge);
}

/* kapak */
.env-flap{
  position:absolute;
  top:0; left:0;
  width:100%; height:56%;
  transform-origin:top center;
  transform-style:preserve-3d;
  background:linear-gradient(185deg,var(--paper) 0%,var(--paper-3) 100%);
  clip-path:polygon(0 0, 100% 0, 50% 100%);
  filter:drop-shadow(0 3px 4px rgba(59,55,51,.14));
  z-index:3;
  transition:transform .85s cubic-bezier(.55,.06,.3,1);
}

/* mühür */
.env-seal{
  position:absolute;
  top:56%; left:50%;
  translate:-50% -50%;
  width:clamp(58px,17%,78px);
  aspect-ratio:1;
  z-index:4;
  display:grid; place-items:center;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1), opacity .45s ease;
}

.seal-glow{
  position:absolute; inset:-42%;
  border-radius:50%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(178,42,42,.42) 0%, rgba(178,42,42,.14) 45%, transparent 72%);
  animation:sealBreath 2.8s ease-in-out infinite;
}

.seal-wax{
  position:relative;
  display:grid; place-items:center;
  width:100%; height:100%;
  border-radius:48% 52% 51% 49% / 50% 48% 52% 50%;
  background:
    radial-gradient(60% 55% at 34% 30%, #D4544C 0%, #B32C2C 42%, #8E1D22 78%, #7A161C 100%);
  box-shadow:
    inset 0 2px 5px rgba(255,255,255,.28),
    inset 0 -4px 9px rgba(80,10,14,.65),
    0 6px 14px -5px rgba(122,22,28,.75);
  animation:sealPulse 2.8s ease-in-out infinite;
}
.seal-wax::before{  /* mumun düzensiz kenarı */
  content:"";
  position:absolute; inset:-6%;
  border-radius:52% 48% 47% 53% / 48% 52% 49% 51%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(160,28,32,.9) 60%, rgba(140,22,26,.55) 78%, transparent 82%);
  z-index:-1;
}
.seal-wax::after{  /* ışık parlaması */
  content:"";
  position:absolute;
  top:14%; left:18%;
  width:34%; height:24%;
  border-radius:50%;
  background:linear-gradient(120deg, rgba(255,255,255,.5), rgba(255,255,255,0));
  filter:blur(2px);
}
.seal-wax svg{
  position:relative;
  width:74%; height:74%;
  stroke:rgba(255,228,222,.72);
  stroke-width:1.6;
}
.seal-mark{ fill:rgba(255,225,220,.22); }
.seal-ring{ opacity:.55; stroke-dasharray:2.5 3.5; }

/* ipucu */
.env-hint{
  display:inline-flex; align-items:center; gap:.5rem;
  font-size:clamp(.72rem,.66rem + .3vw,.82rem);
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--rose-deep);
  animation:fadeUp 1s 1.3s both, bob 2.6s 2.3s ease-in-out infinite;
}
.env-hint svg{ width:17px; height:17px; flex:none; }

/* --- açılış animasyonu ---
   1) .is-breaking : mühür kırılır, kapak açılır, zarf yükselir
   2) .is-open     : perde solar ve kalkar                       */
.gate.is-breaking{ pointer-events:none; }
.gate.is-breaking .gate-note,
.gate.is-breaking .env-hint{
  opacity:0;
  animation:none;
  transition:opacity .35s ease;
}
.gate.is-breaking .env{
  animation:none;
  transform:translateY(-26px) scale(1.05);
  transition:transform 1.1s .3s cubic-bezier(.4,0,.2,1);
}
.gate.is-breaking .env-seal{
  transform:translate(-50%,-50%) scale(1.55) rotate(10deg);
  opacity:0;
}
.gate.is-breaking .env-seal .seal-glow,
.gate.is-breaking .env-seal .seal-wax{ animation:none; }
.gate.is-breaking .env-flap{ transform:rotateX(-172deg); }
.gate.is-breaking .env-shadow{ animation:none; opacity:0; transition:opacity .6s ease; }

.gate.is-open{ opacity:0; visibility:hidden; pointer-events:none; }
.gate[hidden]{ display:none; }

.main{ animation:none; }
.main.is-revealed{ animation:fadeIn 1.1s ease both; }

/* =========================================================
   DAVET
   ========================================================= */
/* Zarf açılınca gelen ilk ekran: tam ekranı kaplar */
.invite{
  position:relative;
  min-height:100svh;
  display:grid;
  align-content:center;
  padding-block:clamp(4rem,12vh,7rem);
  background:var(--paper);
  text-align:center;
  border-block:1px solid var(--line);
}

.invite-scroll{
  position:absolute;
  bottom:clamp(1.25rem,3.5vh,2.25rem);
  left:50%; translate:-50% 0;
  display:grid; justify-items:center; gap:.45rem;
  color:var(--rose);
}
.invite-scroll span{ width:1px; height:2.2rem; background:linear-gradient(var(--line),var(--rose)); }
.invite-scroll svg{ width:18px; height:18px; animation:bob 2.2s ease-in-out infinite; }

.eyebrow{
  font-size:.82rem;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--rose-deep);
  margin-bottom:2rem;
}

.couple{
  font-family:var(--script);
  font-size:clamp(3.4rem,13vw,6.5rem);
  line-height:1;
  display:flex; flex-direction:column; align-items:center; gap:.05em;
}
.couple-amp{
  font-family:var(--serif);
  font-style:italic;
  font-size:.3em;
  color:var(--rose);
}

.date-strip{
  display:flex; align-items:center; justify-content:center;
  gap:clamp(.9rem,3vw,1.8rem);
  margin:2.5rem 0 2rem;
}
.ds-sep{ width:1px; height:2.6rem; background:var(--line); }
.ds-num{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.2rem + 2vw,2.5rem);
  letter-spacing:.06em;
}
.ds-word{
  font-family:var(--serif);
  font-style:italic;
  font-size:clamp(1.3rem,1.1rem + 1.2vw,1.9rem);
  color:var(--rose-deep);
}

.quote{
  font-style:italic;
  color:var(--muted);
  max-width:34rem;
  margin-inline:auto;
}

/* =========================================================
   AİLELER — telefonda da yan yana
   ========================================================= */
.families{ padding-block:clamp(3.5rem,10vw,5.5rem); }

.family-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:start;
  column-gap:clamp(.75rem,4vw,2rem);
  row-gap:2rem;
  text-align:center;
  max-width:46rem;
  margin-inline:auto;
}
.family-mark{ grid-column:1 / -1; order:-1; }

.family-label{
  font-size:clamp(.64rem,.58rem + .28vw,.78rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--rose);
  margin-bottom:.7rem;
}
.family-names{
  font-family:var(--serif);
  font-size:clamp(1.05rem,.94rem + .55vw,1.7rem);
  line-height:1.4;
  text-wrap:balance;
  min-height:2.8em;   /* iki sütunun soyadları aynı hizada dursun */
}
.family-names .nick{ font-style:italic; color:var(--muted); }
.family-surname{
  font-family:var(--serif);
  font-size:clamp(1rem,.92rem + .4vw,1.4rem);
  letter-spacing:.18em;
  color:var(--rose-deep);
  margin-top:.3rem;
}
.family-mark{ color:var(--rose); opacity:.5; justify-self:center; }
.family-mark svg{ width:clamp(44px,12vw,56px); height:clamp(44px,12vw,56px); }

/* =========================================================
   GERİ SAYIM
   ========================================================= */
.countdown-section{
  background:var(--paper);
  border-block:1px solid var(--line);
  text-align:center;
}

.section-script{
  font-family:var(--script);
  font-size:clamp(2.2rem,8vw,3.6rem);
  line-height:1.15;
  color:var(--ink);
  padding-inline:.35em;   /* Allura'nın taşan kuyrukları için pay */
  text-wrap:balance;
}
.section-sub{
  font-family:var(--serif);
  font-style:italic;
  color:var(--muted);
  margin-top:.6rem;
}

.countdown{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:clamp(.5rem,2vw,1.25rem);
  max-width:34rem;
  margin:3rem auto 1.5rem;
}
.cd-box{
  display:grid; gap:.35rem;
  padding:clamp(.9rem,3vw,1.4rem) .35rem;
  background:var(--cream);
  border:1px solid var(--line);
  border-radius:14px;
}
.cd-num{
  font-family:var(--serif);
  font-size:clamp(1.6rem,1.1rem + 2.4vw,2.6rem);
  line-height:1;
  font-variant-numeric:tabular-nums;
}
.cd-label{
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.cd-caption{
  font-style:italic;
  color:var(--rose-deep);
  letter-spacing:.05em;
}

/* =========================================================
   PROGRAM / ETKİNLİK KARTLARI
   ========================================================= */
.section-head{ text-align:center; margin-bottom:clamp(2.5rem,6vw,4rem); }

.event-card{
  display:grid;
  grid-template-columns:1fr;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:20px;
  overflow:hidden;
  box-shadow:var(--shadow);
}
.event-divider{
  display:flex; align-items:center; justify-content:center; gap:1rem;
  margin:clamp(2rem,5vw,3rem) auto;
  max-width:18rem;
  color:var(--rose);
  opacity:.7;
}
.event-divider span{ flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--line),transparent); }
.event-divider svg{ width:20px; height:20px; flex:none; }
.event-card.is-highlight{ border-color:var(--rose); }

.event-body{
  padding:clamp(1.75rem,5vw,3rem);
  text-align:center;
  display:grid;
  align-content:center;
  gap:.35rem;
}
/* kına / düğün rozeti */
.event-kicker{
  justify-self:center;
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  margin-bottom:1.4rem;
  padding:.5rem 1.5rem .45rem;
  border:1px solid var(--rose);
  border-radius:999px;
  background:rgba(166,125,122,.09);
  font-family:var(--serif);
  font-size:clamp(.82rem,.74rem + .4vw,.98rem);
  font-weight:500;
  letter-spacing:.26em;
  text-indent:.26em;   /* letter-spacing'in sağdaki boşluğunu dengeler */
  text-transform:uppercase;
  color:var(--rose-deep);
}
.is-highlight .event-kicker{
  border-color:var(--rose-deep);
  background:var(--rose-deep);
  color:#fff;
}
.event-venue{
  font-family:var(--serif);
  font-size:clamp(1.5rem,1.2rem + 1.4vw,2.1rem);
  line-height:1.25;
}
.event-address{ color:var(--muted); font-size:1rem; }

.event-when{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.25rem;
  margin:1.75rem 0;
  padding-block:1.25rem;
  border-block:1px solid var(--line);
}
.ew-date{ display:flex; align-items:center; gap:.7rem; }
.ew-num{
  font-family:var(--serif);
  font-size:clamp(2.6rem,2rem + 3vw,3.6rem);
  line-height:1;
  color:var(--rose-deep);
}
.ew-mon{
  font-family:var(--serif);
  font-style:italic;
  font-size:1rem;
  line-height:1.25;
  text-align:left;
  color:var(--muted);
}
.ew-meta{
  display:grid;
  gap:.15rem;
  padding-left:1.25rem;
  border-left:1px solid var(--line);
  font-size:.95rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.ew-time{
  font-family:var(--serif);
  font-size:1.35rem;
  letter-spacing:.1em;
  color:var(--ink);
}

.event-actions{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:.75rem;
}

.event-map{ min-height:260px; background:var(--sand); }
.event-map iframe{ width:100%; height:100%; min-height:260px; border:0; filter:grayscale(.35) sepia(.12); }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{
  padding-block:clamp(3.5rem,9vw,6rem);
  text-align:center;
  background:var(--cream);
}
.footer-rings{
  width:64px; height:40px;
  margin:0 auto 1.75rem;
  color:var(--rose);
  opacity:.6;
}
.footer-couple{
  font-family:var(--script);
  font-size:clamp(2.6rem,9vw,4rem);
  line-height:1.05;
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center; gap:.4rem;
}
.footer-thanks{
  font-style:italic;
  color:var(--muted);
  margin-top:1rem;
}

/* =========================================================
   MÜZİK DÜĞMESİ
   ========================================================= */
.music-toggle{
  position:fixed;
  right:clamp(.9rem,3vw,1.6rem);
  bottom:clamp(.9rem,3vw,1.6rem);
  z-index:50;
  width:52px; height:52px;
  display:grid; place-items:center;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,253,251,.9);
  backdrop-filter:blur(8px);
  color:var(--rose-deep);
  cursor:pointer;
  box-shadow:0 10px 30px -18px rgba(59,55,51,.8);
  transition:transform .3s ease,background .3s ease,color .3s ease;
}
.music-toggle[hidden]{ display:none; }
.music-toggle:hover{ transform:scale(1.07); }
.music-toggle svg{ width:22px; height:22px; }
.music-toggle .ico-on{ display:none; }
.music-toggle .ico-off{ display:block; }
.music-toggle[aria-pressed="true"]{ background:var(--rose); color:#fff; border-color:var(--rose); }
.music-toggle[aria-pressed="true"] .ico-on{ display:block; }
.music-toggle[aria-pressed="true"] .ico-off{ display:none; }
.music-toggle[aria-pressed="true"] .ico-on{ animation:pulse 2.4s ease-in-out infinite; }

/* =========================================================
   ANİMASYON
   ========================================================= */
.reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity 1s cubic-bezier(.22,.61,.36,1), transform 1s cubic-bezier(.22,.61,.36,1);
}
.reveal.is-visible{ opacity:1; transform:none; }

@keyframes fadeUp{
  from{ opacity:0; transform:translateY(22px); }
  to{ opacity:1; transform:none; }
}
@keyframes fadeIn{
  from{ opacity:0; }
  to{ opacity:1; }
}
@keyframes envIn{
  from{ opacity:0; transform:translateY(44px) scale(.94); }
  to{ opacity:1; transform:none; }
}
@keyframes envFloat{
  0%,100%{ transform:translateY(0) rotate(0deg); }
  50%{ transform:translateY(-9px) rotate(-.35deg); }
}
@keyframes shadowBreath{
  0%,100%{ opacity:.85; transform:scaleX(1); }
  50%{ opacity:.5; transform:scaleX(.9); }
}
/* mühürün nefes alan parlaması */
@keyframes sealBreath{
  0%,100%{ opacity:.55; transform:scale(.92); }
  50%{ opacity:1; transform:scale(1.12); }
}
@keyframes sealPulse{
  0%,100%{
    transform:scale(1);
    box-shadow:
      inset 0 2px 5px rgba(255,255,255,.28),
      inset 0 -4px 9px rgba(80,10,14,.65),
      0 6px 14px -5px rgba(122,22,28,.75),
      0 0 0 0 rgba(178,42,42,.35);
  }
  50%{
    transform:scale(1.045);
    box-shadow:
      inset 0 2px 5px rgba(255,255,255,.34),
      inset 0 -4px 9px rgba(80,10,14,.6),
      0 8px 20px -5px rgba(122,22,28,.8),
      0 0 22px 6px rgba(190,50,50,.28);
  }
}
@keyframes bob{
  0%,100%{ transform:translateY(0); opacity:.7; }
  50%{ transform:translateY(5px); opacity:1; }
}
@keyframes pulse{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.12); }
}

/* =========================================================
   MASAÜSTÜ
   ========================================================= */
@media (min-width:720px){
  /* geniş ekranda süsleme iki ailenin arasına döner */
  .family-grid{ grid-template-columns:1fr auto 1fr; align-items:center; gap:2rem; }
  .family-mark{ grid-column:auto; order:0; }
  .family-names{ min-height:0; }
  .event-card{ grid-template-columns:1.15fr .85fr; }
  .event-card.is-highlight{ grid-template-columns:.85fr 1.15fr; }
  .event-card.is-highlight .event-body{ order:2; }
  .event-map{ min-height:380px; }
  .event-map iframe{ min-height:380px; }
}

/* =========================================================
   ERİŞİLEBİLİRLİK / YAZDIRMA
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

@media print{
  .music-toggle,.gate,.event-map{ display:none !important; }
  body{ background:#fff; }
  .reveal{ opacity:1; transform:none; }
}