/* ═══════════════════════════════════════════════════════════════
   EDITORIAL NOIR — dijital düğün davetiyesi
   Mobil-öncelikli. Tüm hareket prefers-reduced-motion ile kapanır.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* palet */
  --cream:#EFEAE3;
  --cream-hi:#F6F2EC;
  --ink:#1A1815;
  --black:#121110;
  --bronze:#A8875F;
  --muted:#877E72;
  --line:#D9D2C6;
  --line-dark:#3A352E;

  /* tipografi */
  --display:"Cormorant Garamond",Georgia,"Times New Roman",serif;
  --caps:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --script:"Parisienne",cursive;

  /* ritim */
  --pad:clamp(1.5rem,6vw,3rem);
  --panel-y:clamp(5rem,14vw,9.5rem);
  --ease:cubic-bezier(.22,.61,.36,1);

  /* fotoğraf stil-kilidi: kaynak ne olursa olsun tek dile oturur */
  --photo:grayscale(1) sepia(.16) contrast(1.06) brightness(.97);
  /* kapak: tam gri degil — soluk sepya, gun batimi sicakligini korur */
  --photo-hero:saturate(.5) sepia(.24) contrast(1.06) brightness(1.03);
  /* mekan: belirgin sepya, editorial dile otursun */
  --photo-mekan:saturate(.35) sepia(.5) contrast(1.08) brightness(.95);
}

*,*::before,*::after{box-sizing:border-box}
/* SAYFA MODELI: serbest scroll degil, panel panel gecis.
   Her bolum tam ekran bir "kart"; scroll-snap her birine kilitlenir. */
html{-webkit-text-size-adjust:100%}
html,body{height:100%}
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--display); font-weight:400;
  font-size:clamp(1rem,.95rem + .4vw,1.125rem); line-height:1.75;
  overflow:hidden; -webkit-font-smoothing:antialiased;
  cursor:default; -webkit-user-select:none; user-select:none;
}
img{max-width:100%; display:block}
a{color:inherit}
/* display:grid/flex kurallari HTML'in hidden ozniteligini ezmesin */
[hidden]{display:none !important}
button,input,select,textarea{font:inherit; color:inherit}
/* imlec: yazi imleci sadece gercekten yazi girilen yerlerde */
input,textarea{cursor:text; -webkit-user-select:text; user-select:text}
select,button,a,.veil-seal,.dots button{cursor:pointer}
.venue-addr{-webkit-user-select:text; user-select:text}

/* ── film grenı + vinyet ───────────────────────────────────── */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none; opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ── okuma ilerlemesi ──────────────────────────────────────── */
.progress{position:fixed; top:0; left:0; right:0; height:2px; z-index:55; background:transparent}
.progress span{
  display:block; height:100%; width:100%; background:var(--bronze);
  transform:scaleX(var(--p,0)); transform-origin:0 50%;
}

/* ═══ 00 · ZARF ════════════════════════════════════════════════
   Artik CSS ile CIZILMIYOR — gercek el yapimi kagit zarf fotografi.
   Kapak: ayni fotografin ust ucgene kirpilmis kopyasi; acilinca 3B doner
   ve altindan zarfin ici (koyu) gorunur.
   ══════════════════════════════════════════════════════════════ */
.veil{
  position:fixed; inset:0; z-index:70;
  display:grid; align-content:center; justify-items:center; gap:clamp(1.4rem,4.5vh,2.4rem);
  background:radial-gradient(125% 95% at 50% 24%, #E8E0D4 0%, #DCD2C2 55%, #CDC1AE 100%);
  perspective:1500px; overflow:hidden;
  transition:opacity .7s var(--ease);
}
.veil.gone{display:none}
.veil.opening{opacity:0; transition-delay:1.15s}

.zarf{
  position:relative; width:min(86vw,430px);
  transform-style:preserve-3d; cursor:pointer;
  filter:drop-shadow(0 26px 34px rgba(88,70,48,.42));
  transition:transform 1.05s var(--ease) .4s, opacity .75s ease .5s;
}
.zarf:focus-visible{outline:2px solid var(--bronze); outline-offset:12px}
.veil.opening .zarf{transform:translateY(3%) scale(1.06); opacity:0}
.zarf img{display:block}
/* alt gorsel AKISTA: kutunun yuksekligini bu belirler -> yuvarlama farki olmaz */
.zarf-foto{width:100%; height:auto}
/* kapak katmani alt gorselin uzerine BIREBIR oturur (contain degil fill) */
.zarf-kapak img{width:100%; height:100%; object-fit:fill}

/* ALT KATMAN: fotografta kapak da basili oldugu icin, ustteki kapak
   donunce arkada KAPALI kapak kaliyordu. Ters kirpimla kapak ucgenini
   alt katmandan cikariyoruz — o bolgede artik zarfin ICI gorunuyor.
   Kose sirasi: sol-ust -> sol-alt -> sag-alt -> sag-ust -> kapak ucu. */
.zarf-foto{
  clip-path:polygon(0 6.1%, 49.7% 68.1%, 100% 6.1%, 100% 100%, 0 100%);
}

/* zarfin ici: kapak kalkinca altindan cikan koyu bosluk */
.zarf-ic{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#6B5C48 0%,#8A7963 62%,#A6947A 100%);
  /* kapagin altindaki bosluk — kirpim kapakla BIREBIR ayni ucgen */
  /* ust kenar %1.5'ten baslar: kagidin disina tasip koyu bir serit birakiyordu */
  clip-path:polygon(0 1.5%, 100% 1.5%, 100% 6.1%, 49.7% 68.1%, 0 6.1%);
  /* KAPALIYKEN GORUNMEZ: kenari kapagin altindan sizip ince koyu bir
     cizgi olarak okunuyordu. Sadece kapak kalkarken beliriyor. */
  opacity:0; transition:opacity .3s ease .14s;
}
.veil.opening .zarf-ic{opacity:1}

/* ust kapak: ayni fotografin ucgen kirpimi */
.zarf-kapak{
  position:absolute; inset:0; z-index:2;
  /* OLCULDU (katlama izleri dar bantta sirt tespitiyle taranip dogru fit edildi):
     sol kat SOL kenara %8.6'da deger, sag kat SAG kenara %0.79'da (yani neredeyse
     koseye — onceki %7 tahminim asil sapmaydi), kapagin ucu %50.0 / %63.9. */
  /* Kesim degerleri zarf-ayar.html ile ELDE kalibre edildi (tahmin degil).
     Kapak, alt katmandaki delikten %0.7 daha buyuk kesilir; iki kirpim tam ayni
     cizgide olunca kenar yumusatmadan sac teli kadar dikis kaliyordu. */
  clip-path:polygon(0 0, 100% 0, 100% 6.8%, 49.7% 68.8%, 0 6.8%);
  transform-origin:50% 0; transform:rotateX(0deg);
  transition:transform 1s cubic-bezier(.62,.02,.36,1) .1s;
  backface-visibility:hidden;
  filter:drop-shadow(0 3px 4px rgba(110,92,66,.3));
}
.veil.opening .zarf-kapak{transform:rotateX(-172deg)}

/* ── mum muhru: kapagin ucunda ─────────────────────────────── */
.muhur{
  position:absolute; left:49.7%; top:68.1%; translate:-50% -50%;
  width:23%; aspect-ratio:1; z-index:3;
  display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 5px 10px rgba(88,66,40,.4));
  animation:muhurNefes 3.4s ease-in-out infinite;
}
.veil.opening .muhur{
  transform:translate(-50%,-50%) scale(.78) rotate(-9deg); opacity:0;
  transition:transform .5s var(--ease), opacity .45s ease;
}
.muhur-img{width:100%; height:100%; object-fit:contain; display:block}
.muhur-ic{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--display); font-size:clamp(1.15rem,4.6vw,1.6rem); font-weight:600;
  letter-spacing:.02em; color:#553A1C; white-space:nowrap; padding-bottom:.06em;
  text-shadow:0 1px 0 rgba(255,238,208,.5), 0 -1px 1px rgba(46,28,10,.55);
}
.muhur-ic .kalp{width:.32em; height:.32em; margin:0 .15em; fill:#6B4A24}
@keyframes muhurNefes{0%,100%{transform:scale(1)}50%{transform:scale(1.03)}}

/* ── yukleme kapisi ────────────────────────────────────────────
   Site tam hazir olmadan zarf ACILAMAZ. Yavas baglantida yarim
   yuklenmis bir sayfaya dusmek yerine misafir zarfta bekler. */
.seal-hint{
  margin:0; font-family:var(--caps); font-weight:400; font-size:.62rem;
  letter-spacing:.36em; color:#857462; min-height:1.2em;
}
.veil:not(.hazir) .zarf{cursor:progress}
.veil:not(.hazir) .seal-hint::after{
  content:"HAZIRLANIYOR"; animation:pulse 1.4s ease-in-out infinite;
}
.veil.hazir .seal-hint::after{content:"DOKUNUN"; animation:pulse 2.6s ease-in-out infinite}
.veil.opening .seal-hint{opacity:0; transition:opacity .4s ease}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.42}}

@media (prefers-reduced-motion:reduce){ .muhur{animation:none} }

/* ═══ menü ══════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:1.1rem var(--pad); mix-blend-mode:difference; color:#fff;
  transition:padding .4s var(--ease);
}
.nav.scrolled{padding-block:.7rem}
.nav-mono{font-size:1.15rem; letter-spacing:.05em; text-decoration:none; opacity:0; pointer-events:none; transition:opacity .5s ease}
.nav.scrolled .nav-mono{opacity:1; pointer-events:auto}
.nav-mono .kalp{width:.30em; height:.30em; margin:0 .16em; vertical-align:.08em}
.nav-btn{
  display:flex; align-items:center; gap:.6rem; background:none; border:0; padding:.4rem 0; cursor:pointer;
  font-family:var(--caps); font-weight:400; font-size:.62rem; letter-spacing:.3em;
}
.nav-btn-bars{display:grid; gap:4px; width:20px}
.nav-btn-bars i{display:block; height:1px; background:currentColor; transition:transform .4s var(--ease)}
.nav-btn[aria-expanded="true"] .nav-btn-bars i:first-child{transform:translateY(2.5px) rotate(45deg)}
.nav-btn[aria-expanded="true"] .nav-btn-bars i:last-child{transform:translateY(-2.5px) rotate(-45deg)}

.nav-panel{
  position:fixed; inset:0; z-index:45; background:var(--black); color:var(--cream);
  display:grid; align-content:center; justify-items:center; gap:0;
  padding:var(--pad);
  clip-path:inset(0 0 100% 0); transition:clip-path .85s var(--ease);
}
.nav-panel.open{clip-path:inset(0 0 0 0)}
.nav-panel ul{list-style:none; margin:0; padding:0; text-align:center}
.nav-panel li{overflow:hidden}
.nav-panel li a{
  display:block; padding:.34em 0; text-decoration:none;
  font-size:clamp(1.5rem,6.5vw,2.4rem); font-weight:400; line-height:1.35;
  transform:translateY(110%); opacity:0;
  transition:transform .7s var(--ease), opacity .7s var(--ease), color .3s ease;
  transition-delay:calc(var(--i) * 55ms);
}
.nav-panel.open li a{transform:none; opacity:1}
.nav-panel li a em{
  font-family:var(--caps); font-style:normal; font-size:.5em; letter-spacing:.2em;
  color:var(--bronze); margin-right:.7em; vertical-align:.28em;
}
.nav-panel li a:hover{color:var(--bronze)}
.nav-foot{
  margin:3rem 0 0; font-family:var(--caps); font-weight:400;
  font-size:.58rem; letter-spacing:.34em; color:var(--muted);
  opacity:0; transition:opacity .6s ease .5s;
}
.nav-panel.open .nav-foot{opacity:1}

/* ═══ ortak parçalar ════════════════════════════════════════ */
.wrap{width:min(100% - (var(--pad) * 2),1120px); margin-inline:auto}
.wrap.narrow{width:min(100% - (var(--pad) * 2),620px)}
.center{text-align:center}

/* Asil kaydirma konteyneri. Yukseklik dvh: acilista ne ise o kalir,
   cunku belge kaymadigi icin tarayici cubugu gizlemiyor. */
main{
  height:100vh; height:100dvh;   /* dvh desteklemeyen tarayicida vh'ye duser */
  overflow-y:auto; overflow-x:hidden;
  scroll-snap-type:y mandatory; scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
main::-webkit-scrollbar{display:none}

/* her panel = bir sayfa: tam ekran, dikeyde ortali, snap noktasi */
.panel{
  position:relative; overflow:hidden;
  min-height:100%; padding-block:clamp(1.8rem,5svh,4.5rem);
  display:grid; align-content:center; align-content:safe center;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.panel.cream{background:var(--cream)}
.panel.dark{background:var(--black); color:var(--cream-hi)}
.panel.tight{padding-block:clamp(1.5rem,4svh,3.5rem)}

.eyebrow{
  margin:0; font-family:var(--caps); font-weight:400;
  font-size:.62rem; letter-spacing:.36em; color:var(--muted);
}
.eyebrow.light{color:rgba(255,255,255,.78)}

.section-title{
  margin:0 0 clamp(1.2rem,3.4svh,2.8rem); font-family:var(--caps); font-weight:400;
  font-size:.72rem; letter-spacing:.36em; line-height:2.1; color:var(--ink);
}
.section-title.light{color:var(--cream-hi)}
.section-title::after{
  content:""; display:block; width:34px; height:1px; margin:1.4rem auto 0;
  background:var(--bronze);
}

.mono{
  margin:0; font-size:clamp(3.2rem,15vw,5.5rem); font-weight:500;
  letter-spacing:.04em; line-height:1;
}
.kalp{
  display:inline-block; width:.30em; height:.30em; margin:0 .17em;
  vertical-align:.10em; fill:var(--bronze); stroke:none;
}
.mono .kalp{width:.26em; height:.26em; vertical-align:.14em}
.names{
  margin:1.6rem 0 0; font-family:var(--caps); font-weight:400;
  font-size:clamp(.82rem,3.4vw,1rem); letter-spacing:.4em;
}
.rule-date{
  margin:1rem 0 0; font-family:var(--caps); font-weight:400;
  font-size:.68rem; letter-spacing:.32em; color:var(--muted);
}
.lede{margin:2.2rem 0 0; font-size:clamp(1.02rem,1rem + .5vw,1.24rem); line-height:2.05; color:#413B33}

.sprig{width:74px; height:auto; margin:2.4rem auto 0; display:block; overflow:visible}
.sprig path{fill:none; stroke:var(--bronze); stroke-width:1; stroke-linecap:round; stroke-linejoin:round}

/* ── butonlar / bağlantılar ────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.7rem;
  padding:1.05rem 2rem; border:1px solid var(--ink); background:none; cursor:pointer;
  font-family:var(--caps); font-weight:400; font-size:.66rem; letter-spacing:.28em;
  text-decoration:none; position:relative; overflow:hidden;
  transition:color .45s var(--ease), border-color .45s var(--ease);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--ink); z-index:-1;
  transform:scaleY(var(--fill,0)); transform-origin:50% 100%; transition:transform .45s var(--ease);
}
.btn{isolation:isolate}
.btn.solid{color:var(--cream-hi); --fill:1}
@media (hover:hover){ .btn.ghost:hover{--fill:1; color:var(--cream-hi)} }

/* katilim butonlari */
.choice-btn{color:var(--ink); --fill:0}
@media (hover:hover){
  .choice-btn:not([aria-pressed="true"]):hover{--fill:1; color:var(--cream-hi)}
}
.choice-btn[aria-pressed="true"]{--fill:1; color:var(--cream-hi); border-color:var(--ink)}
.choice-btn:active{transform:scale(.984)}
.btn:active{transform:scale(.99)}
.btn{transition:color .45s var(--ease), border-color .45s var(--ease), transform .18s var(--ease)}
/* secilene ince bir onay isareti */
.choice-btn::after{
  content:""; position:absolute; right:1.1rem; top:50%; width:12px; height:6px;
  border-left:1px solid currentColor; border-bottom:1px solid currentColor;
  transform:translateY(-70%) rotate(-45deg) scale(0); transform-origin:50% 50%;
  transition:transform .4s var(--ease) .1s;
}
.choice-btn[aria-pressed="true"]::after{transform:translateY(-70%) rotate(-45deg) scale(1)}
.btn.outline.light{border-color:rgba(255,255,255,.45); color:var(--cream-hi)}
.btn.outline.light::before{background:var(--cream-hi)}
.btn.outline.light:hover{--fill:1; color:var(--ink); border-color:var(--cream-hi)}
.btn.wide{width:100%}
.btn svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.4; stroke-linecap:round; stroke-linejoin:round}
.btn .ico-inline{width:14px; height:14px}
#icsBtn svg path{fill:currentColor; stroke:none}

.link-arrow{
  display:inline-block; margin-top:2.4rem; padding-bottom:.4rem;
  font-family:var(--caps); font-weight:400; font-size:.64rem; letter-spacing:.3em;
  text-decoration:none; border-bottom:1px solid currentColor; color:inherit;
  transition:letter-spacing .4s var(--ease), color .3s ease;
}
.link-arrow span{display:inline-block; transition:transform .4s var(--ease); margin-left:.3em}
.link-arrow:hover{color:var(--bronze)}
.link-arrow:hover span{transform:translateX(5px)}
.panel.dark .link-arrow{color:rgba(255,255,255,.85)}

/* ═══ 01 · kapak ════════════════════════════════════════════ */
.hero{
  position:relative; min-height:100%; display:grid; place-items:center;
  padding:var(--pad); overflow:hidden; color:#fff; text-align:center;
  scroll-snap-align:start; scroll-snap-stop:always;
}
.hero-media{position:absolute; inset:-6%; animation:kenburns 24s var(--ease) both}
/* Dikey foto + yatay ekran = dikeyde kirpma. 50% suratlari tepeden kesiyordu. */
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:50% 30%; filter:var(--photo-hero)}
/* Iki katmanli scrim: dikey degrade + metnin ARKASINA radyal koyulastirma.
   Tek degrade yetmiyordu — gelinlik/gomlek gibi acik alanlar tarihi yutuyordu. */
.hero::after{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(ellipse 78% 34% at 50% 52%,rgba(8,7,6,.62) 0%,rgba(8,7,6,0) 100%),
    linear-gradient(180deg,rgba(10,9,8,.52) 0%,rgba(10,9,8,.26) 38%,rgba(10,9,8,.7) 100%);
}
@keyframes kenburns{from{transform:scale(1.14)} to{transform:scale(1)}}
/* fotograf acik alana denk gelince beyaz yazi kayboluyordu */
.hero-inner{position:relative; z-index:2; text-shadow:0 1px 24px rgba(8,7,6,.55), 0 1px 3px rgba(8,7,6,.35)}
.hero-names{margin:1.7rem 0 0; font-family:var(--caps); font-weight:400; font-size:clamp(.84rem,3.6vw,1.02rem); letter-spacing:.42em}
.hero-parents{
  margin:1.15rem 0 0; font-family:var(--caps); font-weight:300;
  font-size:clamp(.56rem,2.4vw,.66rem); letter-spacing:.28em; color:rgba(255,255,255,.72);
}
.hero-date{margin:.9rem 0 0; font-family:var(--caps); font-weight:300; font-size:clamp(.72rem,3vw,.84rem); letter-spacing:.5em; color:rgba(255,255,255,.82)}

.scroll-cue{
  position:absolute; bottom:clamp(1.8rem,5vw,3rem); left:50%; translate:-50% 0; z-index:2;
  display:grid; justify-items:center; gap:.9rem; text-decoration:none;
  font-family:var(--caps); font-weight:400; font-size:.58rem; letter-spacing:.34em; color:rgba(255,255,255,.9);
}
.scroll-cue svg{width:19px; fill:none; stroke:currentColor; stroke-width:1.1; animation:bob 2.4s ease-in-out infinite}
.scroll-cue.dark{position:static; translate:none; margin-top:3rem; color:var(--muted)}
@keyframes bob{0%,100%{transform:translateY(0); opacity:.75} 50%{transform:translateY(6px); opacity:1}}

/* ── geri sayım ────────────────────────────────────────────── */
.countdown{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.5rem;
  margin:3rem auto 0; max-width:360px;
}
.countdown[hidden]{display:none !important}
.countdown div{display:grid; gap:.5rem; padding:.2rem 0; position:relative}
.countdown div + div::before{content:""; position:absolute; left:0; top:18%; bottom:18%; width:1px; background:var(--line)}
.countdown b{font-weight:500; font-size:clamp(1.5rem,6vw,1.9rem); line-height:1; font-variant-numeric:tabular-nums}
.countdown span{font-family:var(--caps); font-weight:400; font-size:.5rem; letter-spacing:.22em; color:var(--muted)}

/* ═══ 03 · hikaye ═══════════════════════════════════════════ */
.timeline{list-style:none; margin:0; padding:0; position:relative}
/* Sayfa modelinde omurga scroll'a degil, SAYFA ACILISINA bagli cizilir */
.timeline::before{
  content:""; position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--line);
  transform:translateX(-50%) scaleY(0); transform-origin:50% 0;
  transition:transform 1.3s var(--ease) .15s;
}
.timeline.in::before{transform:translateX(-50%) scaleY(1)}
.tl-item{
  display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:clamp(1rem,5vw,3rem);
  padding-block:clamp(.7rem,1.9svh,1.8rem);
}
.tl-item.flip .tl-text{order:2; text-align:left}
.tl-item.flip .tl-photo{order:1}
.tl-text{text-align:right}
.tl-text b{display:block; font-weight:500; font-size:clamp(1.5rem,6vw,2.2rem); line-height:1.1}
.tl-text span{
  display:block; margin-top:.5rem; font-family:var(--caps); font-weight:400;
  font-size:.58rem; letter-spacing:.28em; color:var(--muted);
}
.tl-photo{margin:0; overflow:hidden}
/* Sayfa modelinde fotograf yuksekligi GENISLIGE degil EKRANA baglanir —
   aspect-ratio ile genis ekranda panel iki ekran boyuna cikiyordu. */
.tl-photo img{
  width:100%; height:clamp(80px,15svh,190px); object-fit:cover; filter:var(--photo);
  transform:scale(1.08); transition:transform 1.4s var(--ease), clip-path 1.2s var(--ease);
  clip-path:inset(0 0 100% 0);
}
.reveal.in .tl-photo img,.tl-item.in .tl-photo img{transform:scale(1); clip-path:inset(0 0 0 0)}

.closing-note{
  margin:clamp(1.2rem,3.4svh,3rem) 0 0; text-align:center; line-height:2.1;
  font-size:clamp(1rem,1rem + .35vw,1.15rem); color:#4A443C; font-style:italic;
}

/* ═══ 04 · detaylar ═════════════════════════════════════════ */
.details-list{margin:0; padding:0}
.det{padding-block:clamp(.9rem,2.3svh,2.4rem); position:relative}
.det + .det::before{content:""; position:absolute; top:0; left:50%; translate:-50% 0; width:min(100%,180px); height:1px; background:var(--line-dark)}
.det .ico{width:34px; height:auto; margin:0 auto 1.2rem; display:block; fill:none; stroke:var(--bronze); stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; overflow:visible}
.det dt{font-family:var(--caps); font-weight:400; font-size:.6rem; letter-spacing:.34em; color:rgba(255,255,255,.55)}
.det dd{margin:.9rem 0 0; font-family:var(--caps); font-weight:400; font-size:.78rem; letter-spacing:.24em; line-height:2}
.det dd i{font-style:normal; font-size:.68rem; letter-spacing:.24em; color:rgba(255,255,255,.55)}

/* ═══ 05 · mekan ════════════════════════════════════════════ */
.framed{margin:0 0 2.4rem; overflow:hidden}
.framed img{width:100%; height:clamp(160px,30svh,340px); object-fit:cover; filter:var(--photo); transform:scale(1.06); transition:transform 1.6s var(--ease)}
.reveal.in.framed img{transform:scale(1)}
.venue-name{margin:0; font-family:var(--caps); font-weight:400; font-size:.8rem; letter-spacing:.3em; line-height:2.2}
.venue-addr{margin:1.1rem 0 0; font-size:.98rem; line-height:1.9; color:var(--muted)}

/* ═══ 06 · dress code ═══════════════════════════════════════ */
.panel.photo{color:#fff}
.photo-media{position:absolute; inset:-6%; z-index:0}
.photo-media img{width:100%; height:100%; object-fit:cover; filter:var(--photo)}
/* Mekan: genis foto, dar ekran. Yatay pencere binanin KAPISINA nisanlanir. */
.venue-media img{object-position:51% 38%; filter:var(--photo-mekan)}
.panel.photo::after{content:""; position:absolute; inset:0; background:rgba(12,10,9,.52); z-index:1}
.panel.photo .wrap{position:relative; z-index:2}
.photo-media.dim + .wrap{position:relative; z-index:2}
.panel.dark.photo::after{background:rgba(12,10,9,.74)}
.dress-title{margin:1.4rem 0 0; font-weight:400; font-size:clamp(1.8rem,8vw,2.8rem); letter-spacing:.16em}
.swatches{display:flex; justify-content:center; gap:.7rem; list-style:none; margin:2.2rem 0 0; padding:0}
.swatches li{
  width:clamp(30px,8vw,38px); aspect-ratio:1; border-radius:50%; background:var(--c);
  box-shadow:0 0 0 1px rgba(255,255,255,.25);
  transform:scale(0); transition:transform .6s var(--ease); transition-delay:calc(var(--si,0) * 90ms);
}
.reveal.in.swatches li{transform:scale(1)}
.dress-note{margin:2.4rem 0 0; line-height:2; font-size:1.02rem}
.heart{width:26px; margin:1.6rem auto 0; display:block; fill:none; stroke:currentColor; stroke-width:1.2}

/* ═══ 07 · rsvp ═════════════════════════════════════════════ */
.rsvp-deadline{margin:0 0 2.6rem; line-height:2.05; color:#4A443C}
.rsvp-deadline b{font-weight:500}
.choice{display:grid; gap:.8rem}
.rsvp-fields{display:grid; gap:1.4rem; margin-top:2rem; text-align:left}
.rsvp-fields label{display:grid; gap:.55rem}
.rsvp-fields label > span{font-family:var(--caps); font-weight:400; font-size:.56rem; letter-spacing:.28em; color:var(--muted)}
.rsvp-fields label > span i{font-style:normal; opacity:.7}
.rsvp-fields input,.rsvp-fields select,.rsvp-fields textarea{
  width:100%; padding:.85rem .2rem; background:none; border:0; border-bottom:1px solid var(--line);
  font-family:var(--display); font-size:1.02rem; border-radius:0; -webkit-appearance:none; appearance:none;
  transition:border-color .35s ease;
}
.rsvp-fields textarea{resize:vertical}
.rsvp-fields :is(input,select,textarea):focus{outline:none; border-color:var(--bronze)}
.rsvp-status{margin:1.4rem 0 0; min-height:1.4em; font-size:.95rem; color:var(--muted)}
.rsvp-status.ok{color:#4B6B4E}
.rsvp-status.err{color:#8C4A3F}
.contacts{margin-top:3.2rem}
.contacts-title{margin:0 0 .9rem; font-family:var(--caps); font-weight:400; font-size:.58rem; letter-spacing:.32em; color:var(--muted)}
.contacts p{margin:.3rem 0; font-size:.98rem}
.contacts a{text-decoration:none; border-bottom:1px solid var(--line)}

/* ═══ 08 · takvim ═══════════════════════════════════════════ */
.cal-btns{display:grid; gap:.9rem; max-width:340px; margin-inline:auto}

/* ═══ 09 · konum ════════════════════════════════════════════ */
.qr{margin:0 0 2rem; display:grid; place-items:center}
.qr img{width:clamp(118px,21svh,185px); padding:1rem; background:var(--cream-hi); box-shadow:0 0 0 1px var(--line)}
/* script yuz genis: 9vw'de "Melike & Levent" dar telefonda tasiyordu */
.signature{
  margin:clamp(1.4rem,4svh,3.2rem) 0 0; font-family:var(--script); font-size:clamp(1.6rem,6.4vw,2.7rem);
  line-height:1.35; color:var(--ink); overflow-wrap:break-word;
}

/* ═══ alt bilgi (son sayfanin icinde) ═══════════════════════ */
.foot-line{
  margin:clamp(2.5rem,7vw,4rem) 0 0; font-family:var(--caps); font-weight:400;
  font-size:.55rem; letter-spacing:.36em; color:var(--muted);
}

/* ═══ sayfa gostergesi ══════════════════════════════════════ */
.dots{
  position:fixed; right:clamp(.7rem,2.5vw,1.4rem); top:50%; translate:0 -50%; z-index:40;
  display:grid; gap:.75rem; margin:0; padding:0; list-style:none;
  mix-blend-mode:difference;
}
.dots button{
  display:block; width:7px; height:7px; padding:0; border:1px solid #fff; border-radius:50%;
  background:transparent; cursor:pointer; opacity:.45;
  transition:opacity .4s var(--ease), background-color .4s var(--ease), transform .4s var(--ease);
}
.dots button[aria-current="true"]{opacity:1; background:#fff; transform:scale(1.25)}
.dots button:hover{opacity:.9}
@media (max-width:400px){.dots{display:none}}

/* ═══ ortaya çıkma animasyonları ════════════════════════════ */
.js .reveal,.js .anim{
  opacity:0; transform:translateY(30px);
  transition:opacity 1s var(--ease) var(--d,0s), transform 1s var(--ease) var(--d,0s);
}
.js .reveal.in,.js .anim.in{opacity:1; transform:none}
.js .sprig path{stroke-dasharray:140; stroke-dashoffset:140; transition:stroke-dashoffset 1.8s var(--ease) .35s}
.js .sprig.in path{stroke-dashoffset:0}

/* ═══ geniş ekran ═══════════════════════════════════════════ */
@media (min-width:768px){
  .choice{grid-template-columns:1fr 1fr}
  .cal-btns{grid-template-columns:1fr 1fr; max-width:520px}
  /* Eleman sayisi degisince (YER kalkti) sabit 3 kolon iceri sola kaydiriyordu.
     Flex kac eleman olursa olsun ortalar. */
  .details-list{display:flex; justify-content:center; align-items:stretch}
  .det{flex:1 1 0; max-width:300px}
  .det + .det::before{top:12%; bottom:12%; left:0; translate:none; width:1px; height:auto}
  .rsvp-fields{grid-template-columns:1fr 1fr}
  .rsvp-fields label:nth-child(4),.rsvp-fields .btn{grid-column:1 / -1}
  .wrap.narrow{width:min(100% - (var(--pad) * 2),680px)}
  /* 3 kolonda "FOUR SEASONS BOSPHORUS" kolonu kenar kenara dolduruyordu */
  #details .wrap.narrow{width:min(100% - (var(--pad) * 2),860px)}
}
@media (min-width:1024px){
  .tl-item{gap:5rem}
  .timeline{max-width:900px; margin-inline:auto}
}

/* ═══ cok kisa gorunum (yatay telefon) ══════════════════════
   Sayfa modelinde her panel ekrana SIGMAK zorunda; 700px altinda
   ikonlar ve satir araliklari kisilir. */
@media (max-height:700px){
  .det .ico{width:26px; margin-bottom:.5rem}
  .det dd{margin-top:.5rem; line-height:1.7}
  .det dt{font-size:.55rem}
  .section-title::after{margin-top:.7rem}
  .sprig{margin-top:1rem; width:56px}
  .lede{margin-top:1.2rem; line-height:1.8}
  .heart{margin-top:.8rem}
}

/* ═══ hareket azaltma ═══════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
  .js .reveal,.js .anim{opacity:1; transform:none}
  .tl-photo img,.framed img{transform:none; clip-path:none}
  .swatches li{transform:scale(1)}
  .timeline::before{transform:translateX(-50%) scaleY(1)}
  .hero-media{animation:none}
}

/* ═══ baskı: PDF davetiye çıktısı ═══════════════════════════ */
@media print{
  html{scroll-snap-type:none}
  .veil,.nav,.nav-panel,.grain,.progress,.scroll-cue,.rsvp-form,.dots{display:none !important}
  .panel,.hero{min-height:0; padding-block:2rem; page-break-inside:avoid; scroll-snap-align:none}
  .panel.dark{background:#fff; color:#000}
  body{background:#fff}
}


/* ═══ banner (ailelerimiz / tesekkurler) ════════════════════════ */
.banner{
  margin:clamp(1.4rem,4svh,2.8rem) auto 0; max-width:340px;
  padding:clamp(.85rem,2.2svh,1.35rem) 1.4rem;
  border:1px solid var(--line); position:relative;
}
.banner.light{border-color:rgba(255,255,255,.2)}
.banner-label{
  position:absolute; top:0; left:50%; translate:-50% -50%;
  padding:0 .7em; background:var(--cream);
  font-family:var(--caps); font-weight:400; font-size:.52rem; letter-spacing:.34em;
  color:var(--bronze); white-space:nowrap;
}
.panel.dark .banner-label{background:var(--black)}
/* fotograf uzerinde seffaf etiket okunmuyordu; perdeyle ayni tonda cip */
.panel.photo .banner-label{background:rgba(16,14,13,.94)}
.banner-body{
  margin:.25rem 0 0; font-family:var(--caps); font-weight:400;
  font-size:.66rem; letter-spacing:.24em; line-height:2.1;
}
.banner.light .banner-body{color:rgba(255,255,255,.9)}
.banner-sep{display:block; width:18px; height:1px; background:var(--bronze); opacity:.6; margin:.45rem auto}


/* ═══ masaustu iyilestirmeleri ══════════════════════════════════ */
@media (min-width:1024px){
  .hero-names{letter-spacing:.5em}
  .hero-date{letter-spacing:.58em}
  .section-title{font-size:.78rem; letter-spacing:.42em}
  .det dd{font-size:.86rem}
  .venue-name{font-size:.92rem; letter-spacing:.34em}
  .venue-addr{font-size:1.05rem}
  .banner{max-width:420px}
  .banner-body{font-size:.72rem}
  .mono{font-size:clamp(4.5rem,7vw,6.5rem)}
  .lede,.dress-note{font-size:1.2rem}
}
@media (min-width:1440px){
  .wrap.narrow{width:min(100% - (var(--pad) * 2),760px)}
  #details .wrap.narrow{width:min(100% - (var(--pad) * 2),920px)}
}


/* Mekan sayfasi: amaci MEKANI GOSTERMEK — duz koyu perde binayi yutuyordu.
   Ust bant acik (kapi gorunur), metnin oldugu bant koyu. */
#venue::after{
  background:linear-gradient(180deg,
    rgba(12,10,9,.34) 0%,
    rgba(12,10,9,.42) 26%,
    rgba(12,10,9,.74) 52%,
    rgba(12,10,9,.80) 100%) !important;
}
#venue .venue-addr{color:rgba(255,255,255,.86)}
#venue .venue-name{color:#fff}


/* ═══ kapanis metni (son sayfa) ═════════════════════════════════ */
.kapanis{margin-top:clamp(1.6rem,4.5svh,3rem)}
.kapanis p{
  margin:0 0 .9rem; font-size:clamp(.98rem,.95rem + .3vw,1.12rem);
  line-height:2.05; color:rgba(255,255,255,.9);
}
.kapanis p:last-of-type{margin-bottom:1.2rem}
.kapanis-imza{
  display:inline-block; font-family:var(--caps); font-weight:400;
  font-size:.58rem; letter-spacing:.36em; color:var(--bronze);
}
.kapanis-imza::before{
  content:""; display:block; width:26px; height:1px; background:var(--bronze);
  opacity:.6; margin:0 auto .9rem;
}

/* zarf kat izlerini biraz daha okunur yap */
/* Kat izi: clip-path'in kendi kenari + kagit golgesi. Elle cizilen
   diyagonal cizgiler ters yone bakip "cati" gibi okunuyordu. */
.zarf-kapak{filter:drop-shadow(0 3px 4px rgba(122,104,80,.22))}
.zarf-alt{filter:drop-shadow(0 -2px 3px rgba(122,104,80,.14))}

.countdown-alt{
  margin:1rem 0 0; font-family:var(--caps); font-weight:500;
  font-size:.62rem; letter-spacing:.34em; color:var(--muted);
}
.kapanis-selam{margin:0 0 .5rem !important; font-style:italic}