/* =========================================================
   Buse & Burakhan · Düğün Davetiyesi
   Renkler basılı davetiyedeki fildişi kâğıt + koyu mürekkep tonlarından alındı
   ========================================================= */
:root{
  --bg:#e6e0d4;           /* sayfa zemini */
  --paper:#f1ebdf;        /* kart kâğıdı (davetiye görseliyle aynı ton) */
  --ink:#2b2a27;          /* mürekkep */
  --ink-soft:#5d5952;
  --muted:#8c8475;
  --line:#d9d1c2;
  --shadow:0 1px 2px rgba(60,48,30,.08), 0 18px 40px -18px rgba(60,48,30,.35), 0 40px 80px -40px rgba(60,48,30,.25);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* clip: yatay taşmayı gizler ama sticky'yi bozmaz (hidden bozar) */
body{max-width:100%;overflow-x:clip}
body{
  background:var(--bg) radial-gradient(120% 70% at 50% 0%, #efeae1 0%, var(--bg) 70%) no-repeat;
  color:var(--ink);
  font-family:'Cormorant Garamond', Georgia, serif;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}

/* =========================================================
   DAVETİYE SAHNESİ — kapak (zarf) kaydırınca iki kanat hâlinde açılır
   ========================================================= */
.scene{position:relative}
.js .scene{height:190vh;height:190svh}   /* ~1 ekran boyu kaydırma = tam açılış */
.scene-sticky{
  position:sticky;top:0;
  height:100vh;height:100svh;
  overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  padding:max(16px, env(safe-area-inset-top)) 16px 72px;
}

/* kart yığını: altta davetiye, üstte kapak (oran 627/927) */
.stack{
  position:relative;
  width:min(100%, 480px, calc((100svh - 96px) * 0.6764));
  aspect-ratio:627/927;
  animation:rise-in 1.2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes rise-in{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.invite{
  position:absolute;inset:0;
  display:block;width:100%;height:100%;
  border-radius:3px;
  box-shadow:var(--shadow);
  will-change:transform;
}

.cover{
  display:none;
  position:absolute;inset:0;
  perspective:1800px;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.js .cover{display:block}
.cover:focus-visible{outline:2px solid var(--ink-soft);outline-offset:6px}

.flap{
  position:absolute;inset:0;
  transform-origin:left center;  /* menteşe sol kenarda */
  transform-style:preserve-3d;   /* not: burada opacity kullanılmamalı, 3D'yi düzleştirir */
  will-change:transform;
}

.face{
  position:absolute;inset:0;
  border-radius:3px;
  -webkit-backface-visibility:hidden;backface-visibility:hidden;
  opacity:var(--fade, 1);
}
.face.front{
  background:url("kapak.jpg") no-repeat 0 0 / 100% 100%;
  box-shadow:var(--shadow);
}
/* kapağın arka yüzü: düz kâğıt */
.face.back{
  transform:rotateY(180deg);
  background:var(--paper) linear-gradient(90deg, rgba(255,255,255,.25), rgba(60,48,30,.07));
}

/* açılırken menteşeden uzaklaştıkça gölgelenme (--shade JS'ten gelir) */
.face.front::after{
  content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:linear-gradient(90deg, rgba(60,48,30,0) 30%, rgba(60,48,30,.3));
  opacity:var(--shade, 0);
}

/* kaydırma ipuçları (sahnenin altında, aynı yerde) */
.scroll-cue{
  position:absolute;left:50%;bottom:max(14px, env(safe-area-inset-bottom));
  transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:none;border:0;cursor:pointer;
  color:var(--ink-soft);text-decoration:none;white-space:nowrap;
  font-family:'Montserrat', sans-serif;font-weight:500;
  font-size:.66rem;letter-spacing:.26em;text-transform:uppercase;
  padding:6px 12px 0 calc(12px + .26em);
}
.scroll-cue > *{animation:rise-in 1.2s .6s cubic-bezier(.2,.7,.2,1) both}
.open-cue{display:none}
.js .open-cue{display:flex}
.js .info-cue{opacity:0;pointer-events:none}
.scroll-cue svg{
  width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;
  animation:nudge 2s ease-in-out infinite;
}
@keyframes nudge{50%{transform:translateY(4px)}}

/* =========================================================
   BİLGİLER
   ========================================================= */
.info{
  width:100%;max-width:480px;
  margin:0 auto;
  padding:24px 16px 72px;
  display:flex;flex-direction:column;align-items:center;gap:40px;
  text-align:center;
}

.label{
  font-family:'Montserrat', sans-serif;font-weight:500;
  font-size:.68rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--muted);padding-left:.32em;
}

/* ---------- geri sayım ---------- */
.countdown-wrap{width:100%}
.countdown{display:grid;grid-template-columns:repeat(4, 1fr);gap:10px;margin-top:14px}
.cd-box{
  display:flex;flex-direction:column;align-items:center;
  padding:16px 4px 14px;
  background:var(--paper);
  border-radius:4px;
  box-shadow:0 1px 2px rgba(60,48,30,.07), 0 10px 24px -16px rgba(60,48,30,.4);
}
.cd-num{
  font-weight:600;font-size:clamp(1.8rem, 8vw, 2.4rem);line-height:1;
  font-variant-numeric:lining-nums tabular-nums;
}
.cd-lbl{
  margin-top:8px;
  font-family:'Montserrat', sans-serif;font-weight:500;
  font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);padding-left:.18em;
}
.cd-done{margin-top:10px;font-weight:500;font-size:1.5rem;letter-spacing:.12em;text-transform:uppercase}

/* ---------- konum kartı ---------- */
.card{
  width:100%;
  background:var(--paper);
  border-radius:4px;
  padding:30px 20px 24px;
  box-shadow:var(--shadow);
}
/* başlıklar: kapaktaki "BUSE & BURAKHAN" yazısıyla aynı stil */
.title{
  font-weight:500;
  font-size:1.5rem;letter-spacing:.2em;text-transform:uppercase;
  padding-left:.2em;line-height:1.2;
  margin-bottom:22px;
}

.facts{list-style:none;display:flex;flex-direction:column;gap:14px;text-align:left;margin:0 auto 22px;max-width:320px}
.facts li{display:flex;gap:14px;align-items:flex-start}
.facts svg{
  flex:none;width:22px;height:22px;margin-top:2px;
  fill:none;stroke:var(--ink-soft);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round;
}
.facts b{display:block;font-weight:600;font-size:1.18rem;line-height:1.25}
.facts span{display:block;font-size:1.02rem;line-height:1.45;color:var(--ink-soft)}

.actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:26px}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 10px;border-radius:40px;
  font-family:'Montserrat', sans-serif;font-weight:500;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  text-decoration:none;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);
  transition:background .25s ease, color .25s ease, transform .25s ease;
}
.btn svg{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.btn.ghost{background:transparent;color:var(--ink)}
.btn:hover{transform:translateY(-1px)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}

/* ---------- kapanış ---------- */
.closing-text{font-style:italic;font-size:1.25rem;line-height:1.55;color:var(--ink-soft)}
.closing-names{
  margin-top:18px;
  font-weight:500;font-size:clamp(1.15rem, 5.4vw, 1.4rem);
  letter-spacing:.14em;text-transform:uppercase;padding-left:.14em;
  white-space:nowrap;
}

/* ---------- kaydırınca beliren öğeler (yalnızca JS varsa) ---------- */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1)}
.js .reveal.show{opacity:1;transform:none}

@media (max-width:360px){
  .actions{grid-template-columns:1fr}
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .stack,.scroll-cue > *,.scroll-cue svg{animation:none}
  .js .reveal{opacity:1;transform:none;transition:none}
}

[hidden]{display:none !important}