/* ============================================================
   invite.css — DAVETİYENİN kendi stilleri.
   Tüm görsel çeşitlilik buradaki CSS değişkenlerinden gelir.
   Yeni tema eklemek = yeni bir palet + font çifti tanımlamak.
   ============================================================ */

/* ---------- PALETLER (tema tokenları) ---------- */
.inv[data-palette="ivory"] {
  --bg:#FBF8F3; --bg2:#F3ECE1; --ink:#2E2A24; --muted:#7A6E5D;
  --accent:#B08D57; --line:#E2D6C2; --card:#FFFFFF;
}
.inv[data-palette="sage"] {
  --bg:#F4F6F1; --bg2:#E7EDE2; --ink:#28312A; --muted:#657362;
  --accent:#7C8F6F; --line:#D6E0CE; --card:#FFFFFF;
}
.inv[data-palette="blush"] {
  --bg:#FCF6F4; --bg2:#F6E7E3; --ink:#3A2C2C; --muted:#826865;
  --accent:#C08A87; --line:#EEDBD7; --card:#FFFFFF;
}
.inv[data-palette="night"] {
  --bg:#15171B; --bg2:#1D2026; --ink:#EFEAE1; --muted:#9C958A;
  --accent:#C7A76A; --line:#2E3238; --card:#1B1E23;
}

.inv[data-palette="royal"] {
  --bg:#F5F7FB; --bg2:#E8EEF7; --ink:#1B2740; --muted:#5E6E8A;
  --accent:#2F5D9E; --line:#D3DEEC; --card:#FFFFFF;
}
.inv[data-palette="festive"] {
  --bg:#FFF9F2; --bg2:#FFEFDF; --ink:#3B2A1C; --muted:#8A6C53;
  --accent:#E0863C; --line:#F3DEC7; --card:#FFFFFF;
}
.inv[data-palette="slate"] {
  --bg:#F7F8F9; --bg2:#ECEEF1; --ink:#1A1F26; --muted:#697380;
  --accent:#2C3540; --line:#DEE2E7; --card:#FFFFFF;
}

/* ---------- PREMIUM KONSEPT PALETLERİ ----------
   Bunlar hazır paletlerden biri değil: her biri o konseptin KENDİ
   varlıklarından ölçülerek türetildi. Geçiş şeridinin (`gecis`) ve
   çelenklerin (`etek`/`tepe`) baskın renkleri alındı, zemin ve vurgu
   onlardan çıkarıldı. Böylece akış zemini süslemelerle aynı aileden
   oluyor — daha önce Kuğu Gölü'nün gümüş varlıkları sıcak krem bir
   zeminin üstünde duruyordu, ikisi alakasızdı.

   Ölçülen değerler (assets/doku/<ad>/*.webp, alfa ağırlıklı ortalama):
     swan   gecis #E0E1E6  etek #A7AAB1   → soğuk gümüş-inci
     rose   gecis #E8C9C0  etek #C69E8A   → pudra-şeftali
     sage   gecis #DFD6C7  etek #908D7A   → keten-zeytin
     spring gecis #D0A9CE  etek #E0DAD7   → lila-suluboya
     gold   gecis #363737  etek #726042   → kömür-bronz            */

/* Kuğu Gölü — inci beyazı, gümüş, buzlu su */
.inv[data-palette="swan"] {
  --bg:#F8F9FB; --bg2:#E9EBEF; --ink:#262B33; --muted:#686F7C;
  --accent:#8D96A5; --line:#DCE0E7; --card:#FFFFFF;
}
/* Gül Bahçesi — pudra, şeftali, sıcak krem */
.inv[data-palette="rosegarden"] {
  --bg:#FDF6F3; --bg2:#F4DDD4; --ink:#3C2A25; --muted:#8C6A5D;
  --accent:#C08F76; --line:#EFD6CB; --card:#FFFFFF;
}
/* Zeytin Bahçesi — keten, adaçayı, zeytin */
.inv[data-palette="sagegarden"] {
  --bg:#F7F4ED; --bg2:#E6E1D2; --ink:#2C2E24; --muted:#6E6F59;
  --accent:#8A8770; --line:#DED8C6; --card:#FFFDF8;
}
/* Suluboya Bahar — lila, leylak, kâğıt beyazı */
.inv[data-palette="springwater"] {
  --bg:#FAF6FA; --bg2:#EBDCEB; --ink:#332A38; --muted:#7B6A81;
  --accent:#A97FA7; --line:#E4D4E4; --card:#FFFFFF;
}
/* Altın Gece — kömür, bronz, altın */
.inv[data-palette="midnight"] {
  --bg:#1A1B1C; --bg2:#2A2724; --ink:#F0E9DC; --muted:#9C9285;
  --accent:#B99155; --line:#3A352E; --card:#232322;
}

/* ---------- FONT ÇİFTLERİ ---------- */
.inv[data-font="classic"] { --display:"Playfair Display", "Times New Roman", serif; --body:"Lato", -apple-system, sans-serif; --disp-sp:.01em; }
.inv[data-font="modern"]  { --display:"Cormorant Garamond", Georgia, serif;        --body:"Jost", -apple-system, sans-serif;  --disp-sp:.02em; }
.inv[data-font="warm"]    { --display:"Marcellus", Georgia, serif;                 --body:"Karla", -apple-system, sans-serif; --disp-sp:.03em; }
.inv[data-font="deco"]    { --display:"Cinzel", "Times New Roman", serif;          --body:"Jost", -apple-system, sans-serif;  --disp-sp:.06em; }
.inv[data-font="sade"]    { --display:"Tenor Sans", Optima, sans-serif;            --body:"Karla", -apple-system, sans-serif; --disp-sp:.05em; }
.inv[data-font="zarif"]   { --display:"Bodoni Moda", Didot, serif;                 --body:"Lato", -apple-system, sans-serif;  --disp-sp:.01em; }
/* El yazısı başlıklar — davetiyede en güçlü duygusal araç.
   Büyük punto ister; .cover-names ve blok başlıkları buna göre büyür. */
.inv[data-font="elyazi"]  { --display:"Great Vibes", cursive;                       --body:"Lora", Georgia, serif;             --disp-sp:0; --disp-buyut:1.35; }
.inv[data-font="ince"]    { --display:"Pinyon Script", cursive;                     --body:"EB Garamond", Georgia, serif;      --disp-sp:0; --disp-buyut:1.3; }
.inv[data-font="akici"]   { --display:"MonteCarlo", cursive;                        --body:"EB Garamond", Georgia, serif;      --disp-sp:0; --disp-buyut:1.4; }
.inv[data-font="kitap"]   { --display:"Playfair Display", Georgia, serif;           --body:"Lora", Georgia, serif;             --disp-sp:.01em; }

/* El yazısı fontlar aynı puntoda küçük görünür — başlıkları büyüt */
.inv { --disp-buyut:1; }
.cover-names { font-size:calc(40px * var(--disp-buyut)); }
.prog-bas, .finale h2, .inv h2 { font-size:calc(26px * var(--disp-buyut)); }

/* ---------- TEMEL ---------- */
.inv * { box-sizing:border-box; margin:0; padding:0; }
.inv {
  background:var(--bg); color:var(--ink);
  font-family:var(--body); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.inv img { display:block; max-width:100%; }
.inv-wrap { max-width:520px; margin:0 auto; }
.inv section {
  /* Bölüm yüksekliği artık içeriğe göre. Tek satırlık bir metne
     koca bir ekran ayırmak boş ve yorucu duruyordu; kapak hariç
     hiçbir bölüm zorla tam ekran değil. */
  padding:clamp(46px,7svh,74px) 28px; text-align:center; position:relative;
  min-height:auto; display:flex; flex-direction:column;
  align-items:center; justify-content:center; scroll-snap-align:start;
}
/* arka plan görseli olan bölüm nefes alsın — fotoğraf ezilmesin */
.inv section:has(> .slide-bg), .inv section.kapak-zemin { min-height:calc(var(--svh,100svh) * .62); }
.inv section > * { width:100%; }
.inv section.short { min-height:auto; }
.inv section + section { border-top:1px solid var(--line); }
.inv .alt { background:var(--bg2); }

/* ============================================================
   ZEMİN — DÜZ RENK YOK

   Eski hali: bölümler sırayla --bg / --bg2 arasında geçiyor, aralarında
   1px'lik sert bir çizgi vardı. İki düz renk + keskin kenar = ucuz,
   "şablon" görünümü. Basılı davetiyede böyle bir şey yok: kâğıdın
   kendi dokusu var, ton sayfa boyunca yavaşça değişir, hiçbir yerde
   çizgi olmaz.

   Yeni hali, üç katman:
   1) Bütün davetiyeye yayılan TEK ton geçişi (--bg → --bg2 → vurgu fısıltısı).
      Bölümler saydam olduğu için aralarında dikiş kalmıyor.
   2) "alt" bölümler artık dikdörtgen değil: üstten ve alttan SÖNEN bir
      bant. Ritim duruyor, kenar yok.
   3) Kâğıt dokusu: ince tarama + hafif gren, mürekkep renginden türetilmiş.
      Her palette kendi tonunu alıyor, ekranda "düz renk" hissi bitiyor.
   ============================================================ */
.inv[data-flow="scroll"] {
  background-image:linear-gradient(to bottom,
    var(--bg) 0%,
    color-mix(in srgb, var(--bg2) 45%, var(--bg)) 26%,
    color-mix(in srgb, var(--bg2) 78%, var(--bg)) 58%,
    var(--bg2) 84%,
    color-mix(in srgb, var(--bg2) 92%, var(--accent)) 100%);
  background-repeat:no-repeat;
}
/* Bölümler kendi rengini boyamaz — üstteki tek geçiş görünür, dikiş kalmaz */
.inv[data-flow="scroll"] section { background:transparent; }
.inv[data-flow="scroll"] section + section { border-top:0; }
.inv[data-flow="scroll"] .bolum-grup + .bolum-grup { border-top:0; }

/* "alt" bölüm: dikdörtgen blok değil, iki ucundan sönen bir bant */
.inv[data-flow="scroll"] .alt {
  background-image:linear-gradient(to bottom,
    transparent 0%,
    color-mix(in srgb, var(--bg2) 62%, transparent) 16%,
    color-mix(in srgb, var(--bg2) 62%, transparent) 84%,
    transparent 100%);
}

/* Kart kart akışta da ton sabit kalmasın: her kart bir öncekinden
   birkaç derece koyu, geçiş fark edilmeden ilerlesin. */
.inv[data-flow="deck"] .slide {
  background-image:linear-gradient(to bottom,
    color-mix(in srgb, var(--bg2) calc(var(--i, 0) * 9%), var(--bg)),
    color-mix(in srgb, var(--bg2) calc((var(--i, 0) + 1) * 9%), var(--bg)));
}
.inv[data-flow="deck"] section { background:transparent; }
.inv[data-flow="deck"] section + section { border-top:0; }
.inv[data-flow="deck"] .alt {
  background-image:linear-gradient(to bottom,
    transparent 0%, color-mix(in srgb, var(--bg2) 45%, transparent) 18%,
    color-mix(in srgb, var(--bg2) 45%, transparent) 82%, transparent 100%);
}

/* ---- KÂĞIT DOKUSU ---- 
   feTurbulence ile gerçek gren; üstüne çok ince bir tarama.
   opacity düşük, multiply ile zemine karışıyor — palet ne olursa olsun
   kendi rengini koruyor, ekran "düz" görünmüyor. */
.inv::before {
  content:""; position:fixed; inset:0; z-index:1; pointer-events:none;
  opacity:.5; mix-blend-mode:multiply;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E"),
    repeating-linear-gradient(0deg,
      color-mix(in srgb, var(--ink) 2.5%, transparent) 0 1px, transparent 1px 3px);
  background-size:160px 160px, auto;
}
/* Koyu paletlerde çarpma zemini boğuyor — orada aydınlatarak karıştır */
.inv[data-palette="night"]::before,
.inv[data-palette="midnight"]::before,
.inv[data-palette="slate"]::before { mix-blend-mode:screen; opacity:.34; }

.inv .eyebrow {
  font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); margin-bottom:18px; font-weight:600;
}
.inv h2 { font-family:var(--display); font-weight:400; font-size:26px; letter-spacing:var(--disp-sp); margin-bottom:14px; }
.inv p  { color:var(--muted); font-size:15px; }
.inv .strong { color:var(--ink); }

/* ---------- SÜSLEME (ornament) ---------- */
.orn { display:flex; align-items:center; justify-content:center; gap:10px; color:var(--accent); margin:0 auto 22px; max-width:180px; }
.orn::before, .orn::after { content:""; height:1px; flex:1; background:linear-gradient(to right, transparent, var(--line), transparent); }
.orn svg { width:16px; height:16px; flex:none; }

/* ---------- KAPAK ---------- */
.cover { padding:0 0 48px; position:relative; }   /* süsleme kabı */
/* Kaydırmalı akışta kapak ekranı doldurur ki köşeler kartın köşesine otursun */
.inv[data-flow="scroll"] .cover{ min-height:var(--svh,100svh); display:flex;
  flex-direction:column; justify-content:center; }
.cover-media { position:relative; padding:34px 28px 0; }
.cover-photo {
  width:100%; aspect-ratio:3/4; background:var(--bg2);
  margin:0 auto; max-width:340px; overflow:hidden; position:relative;
}
.cover-photo img { width:100%; height:100%; object-fit:cover; transform-origin:center; }
.cover-photo.m-arch  { clip-path:url(#mk-arch); }
.cover-photo.m-circle{ clip-path:url(#mk-circle); }
.cover-photo.m-leaf  { clip-path:url(#mk-leaf); }
.cover-photo.m-hex   { clip-path:url(#mk-hex); }
.cover-photo.m-soft  { border-radius:14px; }
.cover-photo.m-none  { display:none; }

/* ============================================================
   KAPAK — ZEMİN KİPİ
   Fotoğraf tüm kapağı kaplar, yazı üstünde durur.
   Okunabilirliği "perde" sağlar: rengi siyah değil paletin zemin
   rengidir (--bg), böylece açık paletlerde krem, koyu paletlerde
   neredeyse siyah olur ve iki yön tek değişkenle çözülür.
   --g : perdenin gücü (0–1), editörden gelir.
   ============================================================ */
/* .inv section kuralı ortalıyor ve iç boşluk veriyor; onu yenmek için
   özgüllüğü .inv ile yükseltiyoruz (0,2,0 > 0,1,1). */
.inv .kapak-zemin{
  position:relative; padding:0;
  display:flex; flex-direction:column; justify-content:flex-end; align-items:stretch;
  overflow:hidden; isolation:isolate;
}
/* Yüzde yükseklik belirsiz kapsayıcıda çalışmaz; akışa göre gerçek yükseklik ver.
   Kart kart akışta alttaki gezinme çubuğuna 96px pay bırakılıyor. */
/* Tam ekran fotoğraf kenardan kenara gitmeli. .slide altta gezinme çubuğuna
   96px pay bırakıyor; negatif kenar boşluğuyla o payı da yiyoruz — çubuk
   kendi zemini olduğu için fotoğrafın üstünde durur. */
.inv[data-flow="deck"]   .kapak-zemin{ min-height:var(--svh,100svh); margin-bottom:-96px; padding:0; }
.inv[data-flow="deck"]   .kapak-zemin .kapak-yazi{ padding-bottom:calc(var(--svh,100svh) * .25); }
.inv[data-flow="scroll"] .kapak-zemin{ min-height:calc(var(--svh,100svh) * .86); padding:0; }
/* Galeri kartında kapak kutuyu tam doldurur; devamı kaydırınca gelir. */
.galeri .inv[data-flow="scroll"] .kapak-zemin{ min-height:var(--svh,100svh); }
.galeri .inv[data-flow="scroll"] .cover{ min-height:var(--svh,100svh); }
.cover-bg{ position:absolute; inset:0; z-index:0; }
.cover-bg .cover-lottie{ width:100%; height:100%; display:grid; place-items:center }
.cover-bg .cover-lottie svg{ width:100% !important; height:100% !important }
.cover-bg img, .cover-bg .cover-vid{
  width:100%; height:100%; object-fit:cover;
  transform-origin:center; display:block;
}
/* Hareketi kapatmış kullanıcıya video oynatma — poster karesi kalır */
@media (prefers-reduced-motion: reduce){ .cover-vid{ display:none } }

/* Yazı kalıbı sürüklenebilir: serbest konumdayken akıştan çıkar */
.inv .kapak-yazi.serbest{ position:absolute; padding-bottom:0 !important; }
.inv .cover.yazi-serbest{ position:relative; }
.inv .cover.yazi-serbest .kapak-yazi.serbest{ z-index:5; text-align:center; }
.edit-on [data-yazi]{ cursor:grab; }
.edit-on [data-yazi]:active{ cursor:grabbing; }
.edit-on [data-yazi].sec{ outline:1.5px solid var(--accent); outline-offset:10px; border-radius:4px; }
.inv .kapak-zemin .perde{ position:absolute; inset:0; z-index:1; pointer-events:none; }
/* Çizim animasyonda yazı ile çizim üst üste binmesin:
   çizim alta yaslanır, yazı onun üstünde durur. */
.inv .kapak-cizim{ justify-content:flex-start }
.inv .kapak-cizim .cover-bg{ top:auto; bottom:0; height:52% }
.inv .kapak-cizim .kapak-yazi:not(.serbest){ padding-top:16svh; padding-bottom:0 }
.inv .kapak-zemin .kapak-yazi{ position:relative; z-index:3; padding:0 24px 44px;
  text-align:center; max-width:90%; margin:0 auto; }
.inv .kapak-zemin .cover-names{ margin-top:0; padding:0; }

/* perde biçimleri — hepsi paletin zemin renginden türer */
.perde-yok  { background:none }
.perde-alt  { background:linear-gradient(to top,
                color-mix(in srgb, var(--bg) calc(var(--g) * 100%), transparent) 0%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 100%), transparent) 30%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 86%),  transparent) 50%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 42%),  transparent) 70%,
                transparent 92%) }
/* İki uçtan: üstü süslemeler, altı isimler için toparlar, orta açık kalır */
.perde-ikiuc{ background:linear-gradient(to bottom,
                color-mix(in srgb, var(--bg) calc(var(--g) * 92%), transparent) 0%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 30%), transparent) 26%,
                transparent 44%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 55%), transparent) 70%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 100%), transparent) 100%) }
.perde-cevre{ background:radial-gradient(105% 72% at 50% 40%,
                transparent 18%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 55%), transparent) 58%,
                color-mix(in srgb, var(--bg) calc(var(--g) * 100%), transparent) 100%) }
.perde-duz  { background:color-mix(in srgb, var(--bg) calc(var(--g) * 92%), transparent) }

/* Çerçeve zemin kipinde fotoğraf kutusunun değil kartın kenarına oturur.
   viewBox 300×400 + preserveAspectRatio=none olduğu için gerilerek uyar. */
.zemin-cerceve{ position:absolute; inset:16px; z-index:2; pointer-events:none; }
.zemin-cerceve .cover-frame{ position:absolute; inset:0; width:100%; height:100%; }

/* fotoğraf yokken: tipografik kapak */
.cover-plate {
  max-width:340px; margin:0 auto; aspect-ratio:3/4;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--bg2); border:1px solid var(--line); gap:14px; padding:24px;
}
.cover-plate.m-arch  { clip-path:url(#mk-arch); }
.cover-plate.m-circle{ clip-path:url(#mk-circle); }
.cover-plate.m-leaf  { clip-path:url(#mk-leaf); }
.cover-plate.m-hex   { clip-path:url(#mk-hex); }
.cover-plate.m-soft  { border-radius:14px; }
.cover-plate .mono { font-size:11px; letter-spacing:.3em; text-transform:uppercase; color:var(--accent); }

.cover-names { font-family:var(--display); font-weight:400; font-size:40px; line-height:1.15; margin-top:30px; padding:0 24px; letter-spacing:var(--disp-sp); }
.cover-amp { display:block; font-size:20px; color:var(--accent); margin:8px 0; font-style:italic; }
.cover-date { margin-top:16px; font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--muted); }
.bos{ opacity:.32; font-style:italic }
.greet { margin-top:22px; font-family:var(--display); font-size:17px; color:var(--accent); }

/* ---------- GERİ SAYIM ---------- */
.cd { display:flex; justify-content:center; gap:10px; margin-top:8px; }
.cd div { flex:1; max-width:88px; background:var(--card); border:1px solid var(--line); padding:14px 4px; }
.cd b { display:block; font-family:var(--display); font-size:26px; font-weight:400; color:var(--accent); }
.cd span { font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }

/* ---------- BUTONLAR ---------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  border:1px solid var(--accent); color:color-mix(in srgb, var(--accent) 62%, var(--ink)); background:transparent;
  padding:13px 24px; font-family:var(--body); font-size:12px; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:.18s; border-radius:2px;
}
.btn:hover { background:var(--accent); color:var(--bg); }
/* Dolu düğme: saf vurgu rengi üzerine açık metin 2.83 kontrast veriyordu
   (WCAG AA 4.5 ister). Vurgu rengi mürekkeple %66 karıştırıldı — konseptin
   kendi rengi korunuyor, okunabilirlik 4.5'in üstüne çıkıyor. */
.btn.solid { background:color-mix(in srgb, var(--accent) 66%, var(--ink));
             color:var(--bg); }
.btn.solid:hover { opacity:.9; }
/* Koyu paletlerde vurgu zaten açık; orada karıştırma ters çalışıyor */
.inv[data-palette="night"] .btn.solid,
.inv[data-palette="midnight"] .btn.solid {
  background:var(--accent); color:#14161A;
}
.btn-row { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-top:20px; }

/* ---------- MEKAN ---------- */
.venue-name { font-family:var(--display); font-size:22px; margin-bottom:6px; }
/* kıyafet kodu — mekanın altında tek satır, vurgu yalnız değerde */
.kiyafet { margin-top:10px; font-size:14px; color:var(--muted); }
.kiyafet b { color:var(--ink); font-weight:500; }
/* ebeveyn adları — davet metninin altında, iki taraf yan yana */
.aile { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin:22px auto 0;
        max-width:420px; font-size:14px; line-height:1.5; color:var(--muted); }
.aile.tek { grid-template-columns:1fr; }
.aile span { white-space:pre-line; }
.map-frame { margin-top:20px; border:1px solid var(--line); background:var(--card); aspect-ratio:16/10; width:100%; overflow:hidden; }
.map-frame iframe { width:100%; height:100%; border:0; }

/* ---------- PROGRAM ---------- */
/* Zaman çizgisi: solda sürekli bir çizgi, her maddede ikon dairesi.
   Çizgi ::before ile çiziliyor, ikonun arkasından geçiyor. */
.prog-bas { font-family:var(--display); font-size:26px; font-weight:400;
  margin:2px 0 22px; letter-spacing:var(--disp-sp); }
.prog { list-style:none; max-width:340px; margin:0 auto; text-align:left;
  padding:0; position:relative; }
.prog li { position:relative; display:grid; grid-template-columns:34px 1fr;
  gap:14px; padding-bottom:26px; }
.prog li:last-child { padding-bottom:0; }
/* dikey çizgi — son maddede durur */
.prog li::before { content:""; position:absolute; left:16.5px; top:32px; bottom:0;
  width:1px; background:var(--line); }
.prog li:last-child::before { display:none; }

.prog-ikon { width:34px; height:34px; border-radius:50%; display:grid;
  place-items:center; background:var(--card); border:1px solid var(--line);
  color:var(--accent); position:relative; z-index:1; }
.prog-ikon svg { width:17px; height:17px; }

.prog-ic time { display:block; font-family:var(--display); color:var(--accent);
  font-size:18px; line-height:1.2; font-variant-numeric:tabular-nums; }
.prog-ic b { display:block; font-weight:600; font-size:15.5px; margin-top:3px; }
.prog-ic small { display:block; font-size:13px; color:var(--muted); margin-top:2px; }

/* Kutulu görünüm: her madde kendi kartında (theme.panels) */
.inv:not(.no-panels) .prog li > .prog-ic { }
.no-panels .prog-ikon { background:transparent; }

/* ============================================================
   KAPANIŞ — davetiyenin son sözü, arka planlı tam sayfa
   ============================================================ */
.finale { position:relative; overflow:hidden; isolation:isolate;
  min-height:70svh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; }
.finale .fin-bg { position:absolute; inset:0; z-index:0; }
.finale .fin-bg img, .finale .fin-bg video {
  width:100%; height:100%; object-fit:cover; display:block; }
.finale .fin-perde { position:absolute; inset:0; z-index:1;
  background:color-mix(in srgb, var(--bg) 72%, transparent); }
.finale > *:not(.fin-bg):not(.fin-perde) { position:relative; z-index:2; }
.finale h2 { font-family:var(--display); font-size:clamp(26px,7vw,34px);
  font-weight:400; line-height:1.25; letter-spacing:var(--disp-sp); }
.finale p { margin-top:14px; color:var(--muted); max-width:30ch; }
.finale .fin-ad { margin-top:26px; font-family:var(--display);
  font-size:20px; color:color-mix(in srgb, var(--accent) 58%, var(--ink)); }

/* ---------- GALERİ ---------- */
.gal { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:6px; }
.gal span { display:block; aspect-ratio:1; overflow:hidden; background:var(--bg2); }
.gal img { width:100%; height:100%; object-fit:cover; transform-origin:center; }
.gal.m-arch span { clip-path:url(#mk-arch); }
.gal.m-circle span { clip-path:url(#mk-circle); }
.gal.m-leaf span { clip-path:url(#mk-leaf); }
.gal.m-hex span { clip-path:url(#mk-hex); }
.gal.m-soft span, .gal.m-none span { border-radius:8px; }

/* ---------- RSVP ---------- */
.form { max-width:340px; margin:20px auto 0; text-align:left; }
.field { margin-bottom:14px; }
.field label { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; font-weight:600; }
.field input, .field select, .field textarea {
  width:100%; padding:12px; border:1px solid var(--line); background:var(--card);
  color:var(--ink); font-family:var(--body); font-size:15px; border-radius:2px;
}
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--accent); }
.choice { display:flex; gap:8px; }
.choice button {
  flex:1; padding:13px; border:1px solid var(--line); background:var(--card); color:var(--muted);
  font-family:var(--body); font-size:13px; cursor:pointer; border-radius:2px; transition:.15s;
}
.choice button[aria-pressed="true"] { border-color:var(--accent); background:color-mix(in srgb, var(--accent) 66%, var(--ink)); color:var(--bg); font-weight:600; }
.hint { font-size:12px; color:var(--muted); margin-top:10px; text-align:center; }
.ok { padding:26px; border:1px solid var(--accent); background:var(--card); }
.ok b { font-family:var(--display); font-size:20px; font-weight:400; display:block; margin-bottom:8px; color:var(--accent); }

/* ---------- HEDİYE / IBAN ---------- */
.iban {
  display:flex; align-items:center; gap:10px; justify-content:space-between;
  max-width:340px; margin:16px auto 0; padding:14px 16px;
  border:1px solid var(--line); background:var(--card); border-radius:2px;
}
.iban code { font-family:ui-monospace,Menlo,monospace; font-size:13px; letter-spacing:.02em; color:var(--ink); }
.iban button { border:0; background:transparent; color:var(--accent); cursor:pointer; font-size:11px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; font-family:var(--body); }

/* ---------- DİLEK DEFTERİ ---------- */
.wishes { list-style:none; max-width:340px; margin:20px auto 0; text-align:left; }
.wishes li { padding:14px 16px; background:var(--card); border:1px solid var(--line); margin-bottom:8px; border-radius:2px; }
.wishes b { display:block; font-family:var(--display); font-weight:400; color:var(--accent); font-size:15px; margin-bottom:3px; }
.wishes p { font-size:14px; }

/* ---------- MÜZİK ---------- */
.music { position:fixed; right:16px; bottom:16px; z-index:50; }
.music button {
  width:46px; height:46px; border-radius:50%; border:1px solid var(--line);
  background:var(--card); color:var(--accent); cursor:pointer; display:grid; place-items:center;
  box-shadow:0 6px 20px rgba(0,0,0,.12);
}

/* ---------- FOOTER ---------- */
/* İmza, son sayfanın çelengiyle çakışıyor. Çelengi kaldırmak yerine
   imzayı ÖNE alıyoruz: çelenk imzayı çerçeveleyen bir zemin oluyor. */
.inv footer { padding:36px 28px 46px; text-align:center; position:relative; z-index:110; }
/* İmza vurgu renginde soluk kalıyordu — mürekkebe yaklaştırıldı */
.inv footer .sig { font-family:var(--display); font-size:19px; margin-bottom:6px;
  color:color-mix(in srgb, var(--accent) 55%, var(--ink)); }
.inv footer small { font-size:11px; color:var(--muted); letter-spacing:.08em; }

/* ---------- GİRİŞ ANİMASYONU ---------- */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .7s ease, transform .7s ease; }
.reveal.in { opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce) { .reveal { opacity:1; transform:none; transition:none; } }


/* ============================================================
   SAYFA SAYFA AKIŞ: aşağı kaydır butonu + ilerleme çubuğu
   ============================================================ */
html:has(.inv) { scroll-snap-type:y proximity; scroll-behavior:smooth; }

.cue {
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:60; display:grid; place-items:center; gap:4px;
  border:0; background:transparent; cursor:pointer; padding:6px 14px;
  color:var(--accent); font-family:var(--body);
  transition:opacity .35s ease, visibility .35s;
}
.cue span {
  font-size:9.5px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--muted); font-weight:700;
}
.cue i {
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--line); background:var(--card);
  display:grid; place-items:center;
  box-shadow:0 6px 18px rgba(0,0,0,.10);
  animation:cueBob 2.1s ease-in-out infinite;
}
.cue:hover i { background:var(--accent); color:var(--bg); border-color:var(--accent); }
.cue svg { width:17px; height:17px; }
.cue.hide { opacity:0; visibility:hidden; }
@keyframes cueBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(5px)} }
@media (prefers-reduced-motion:reduce){ .cue i{animation:none} }

.prog-bar {
  position:fixed; top:0; left:0; height:2px; z-index:61;
  background:var(--accent); width:0; transition:width .12s linear;
}

/* nokta göstergeler (masaüstünde) */
.dots { position:fixed; right:16px; top:50%; transform:translateY(-50%); z-index:60;
  display:none; flex-direction:column; gap:9px; }
.dots button { width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--line); background:transparent; transition:.2s; }
.dots button.on { background:var(--accent); border-color:var(--accent); transform:scale(1.35); }
@media (min-width:900px){ .dots{display:flex} }

/* müzik butonu kaydırma butonuyla çakışmasın */
.music { bottom:22px; right:18px; }


/* ============================================================
   ARKA PLAN: görsel katmanı + CSS dokuları
   ============================================================ */
.inv { position:relative; }
.bg-layer {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-size:cover; background-repeat:no-repeat;
}
/* DİKKAT: .cue/.dots/.prog-bar burada position:relative ile eziliyordu.
   Sonuç: kaydırmalı akışta ilerleme çizgisi ve "aşağı kaydır" butonu
   sabit katman olmaktan çıkıp belgenin SONUNA düşüyor — sayfanın altında
   sebepsiz bir çizgi ve boşluk olarak görünüyordu. Sadece z-index veriyoruz. */
.inv-wrap { position:relative; z-index:1; }

.inv[data-pattern="dots"]     { background-image:radial-gradient(var(--line) 1.1px, transparent 1.1px); background-size:18px 18px; }
.inv[data-pattern="grid"]     { background-image:linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size:26px 26px; }
.inv[data-pattern="diagonal"] { background-image:repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 13px); }
.inv[data-pattern="confetti"] { background-image:
  radial-gradient(var(--accent) 1.6px, transparent 1.6px),
  radial-gradient(var(--line) 1.6px, transparent 1.6px);
  background-size:46px 46px, 46px 46px; background-position:0 0, 23px 23px; opacity:1; }
.inv[data-pattern="rings"]    { background-image:radial-gradient(circle, transparent 9px, var(--line) 9px, transparent 10px); background-size:44px 44px; }
.inv[data-pattern="linen"]    { background-image:
  repeating-linear-gradient(0deg, var(--line) 0 1px, transparent 1px 5px),
  repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 5px); background-blend-mode:multiply; }

/* doku varken bölüm zeminleri hafif saydam olsun ki doku görünsün */
.inv[data-pattern]:not([data-pattern="none"]) .alt { background:color-mix(in srgb, var(--bg2) 88%, transparent); }


/* ============================================================
   KART KART AKIŞ — kaydırma yok, sayfa sayfa geçiş
   ============================================================ */
.inv[data-flow="deck"] { height:var(--svh,100svh); overflow:hidden; }
html:has(.inv[data-flow="deck"]) { scroll-snap-type:none; overflow:hidden; }

.deck { position:relative; height:var(--svh,100svh); }
/* Kaydırma: kabın kendisi flex + justify-content:center iken içerik
   taşarsa üst kısım erişilemez hale geliyordu (bilinen flex/overflow
   davranışı) — kart uzun olduğunda aşağı kaydırmak mümkün olmuyordu.
   Ortalama işi içteki kaba verildi: kısa kartta ortalı, uzun kartta akan. */
.slide {
  position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
  display:block;
  opacity:0; transform:translateX(26px); pointer-events:none;
  transition:opacity .42s ease, transform .42s cubic-bezier(.22,.61,.36,1);
}
.slide.on   { opacity:1; transform:none; pointer-events:auto; }
.slide.past { transform:translateX(-26px); }
.slide-in {
  width:100%; max-width:520px; margin:0 auto;
  min-height:100%; padding-bottom:96px;
  display:flex; flex-direction:column; justify-content:center;
}
/* kart taşıyorsa altta ince bir "devamı var" gölgesi + oku */
.slide.kaydirilir::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:110px;
  pointer-events:none; z-index:3;
  background:linear-gradient(to top, color-mix(in srgb,var(--bg) 92%, transparent), transparent);
}
/* Ortada duruyordu ve kartın dibindeki "Gönder" düğmesinin yazısını
   örtüyordu ("GÖ▼DER"). Sağ kenara alındı: içerik ortalı, kenar boş. */
.kaydir-ok{
  position:absolute; right:14px; bottom:84px; z-index:4;
  width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--card); color:var(--accent);
  opacity:0; pointer-events:none;
}
/* Sürekli zıplayan baloncuk premium görünümü bozuyordu ve formla yarışıyordu:
   sayfaya girişte ~4 sn görünür, sonra söner. Animasyon .on ile başladığı için
   kart her açıldığında yeniden oynar. */
.slide.on .kaydir-ok { animation:okGoster 4.2s ease .4s 1 both; }
@keyframes okGoster { 0%{opacity:0;transform:translateY(0)} 12%{opacity:1} 30%{transform:translateY(5px)}
  48%{transform:translateY(0)} 66%{transform:translateY(5px)} 80%{opacity:1;transform:translateY(0)} 100%{opacity:0} }
@media (prefers-reduced-motion:reduce){ .slide.on .kaydir-ok { animation:okGosterSade 4.2s linear .4s 1 both; } }
@keyframes okGosterSade { 0%,80%{opacity:1} 100%{opacity:0} }
.kaydir-ok svg{ width:15px; height:15px; }
.slide:not(.kaydirilir) .kaydir-ok{ display:none; }

/* kart içindeki bölümler artık tam ekran değil, yan yana yaşar */
.inv[data-flow="deck"] section { min-height:auto; padding:26px 28px; }
.inv[data-flow="deck"] section + section { border-top:1px solid var(--line); }
.inv[data-flow="deck"] .cover { padding:12px 0 26px; }
.inv[data-flow="deck"] .cover-media { padding-top:0; }
/* Fotoğraf kartın dışına taşamaz: genişlik kadar YÜKSEKLİK de sınırlı.
   aspect-ratio korunsun diye genişliği yüksekliğe göre türetiyoruz. */
.inv[data-flow="deck"] .cover-photo, .inv[data-flow="deck"] .cover-plate {
  width:auto; max-width:min(300px,68vw);
  height:min(calc(var(--svh,100svh) * .33), calc(min(300px,68vw) * 4 / 3));
  margin-inline:auto;
}
.inv[data-flow="deck"] .cover-names { font-size:clamp(30px,8vw,40px); margin-top:22px; }
.inv[data-flow="deck"] .map-frame { aspect-ratio:16/11; }
.inv[data-flow="deck"] footer { padding:20px 28px 4px; border-top:1px solid var(--line); }

/* ---- ALT GEZİNME ÇUBUĞU ---- */
/* Tam genişlik bir çubuk alt köşe süslemelerini kapatıyordu.
   Ortada yüzen bir hap: köşeler açıkta kalıyor. */
.deck-nav {
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:calc(10px + env(safe-area-inset-bottom)); z-index:80;
  display:flex; align-items:center; gap:12px; width:auto; max-width:calc(100% - 96px);
  padding:9px 12px; border-radius:999px;
  background:var(--card); border:1px solid var(--line);
  box-shadow:0 6px 22px -8px rgba(0,0,0,.28);
}
.nav-prev {
  width:42px; height:42px; flex:none; border-radius:50%;
  border:1px solid var(--line); background:var(--card); color:var(--accent);
  display:grid; place-items:center; cursor:pointer; transition:.18s;
}
.nav-prev svg { width:17px; height:17px; }
.nav-prev:disabled { opacity:.22; pointer-events:none; }

.nav-mid { flex:1; display:flex; flex-direction:column; align-items:center; gap:5px; }
.nav-dots { display:flex; gap:7px; justify-content:center; }
.nav-dots button {
  width:7px; height:7px; padding:0; border-radius:50%; cursor:pointer;
  border:1px solid var(--muted); background:transparent; transition:.22s;
}
.nav-dots button.on { background:var(--accent); border-color:var(--accent); width:20px; border-radius:20px; }

.nav-next {
  display:inline-flex; align-items:center; gap:7px; flex:none;
  border:1px solid var(--accent); background:var(--accent); color:var(--bg);
  padding:12px 20px; border-radius:30px; cursor:pointer;
  font-family:var(--body); font-size:12px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase; transition:.2s;
}
.nav-next svg { width:15px; height:15px; }
.nav-next:hover { opacity:.88; }
.nav-next.back { background:transparent; color:var(--accent); }
.nav-next.back svg { transform:rotate(180deg); }

.nav-count { font-size:10px; letter-spacing:.16em; color:var(--muted); font-weight:700; }

/* kart modunda giriş animasyonunu kart geçişi üstlenir */
.inv[data-flow="deck"] .reveal { opacity:1; transform:none; }
.inv[data-flow="deck"] .music { bottom:78px; }


/* ============================================================
   ÇERÇEVE + ANİMASYON KATMANI
   ============================================================ */
.frame-box { position:relative; max-width:340px; margin:0 auto; }
.inv[data-flow="deck"] .frame-box { max-width:min(300px,68vw); }
.frame-box .cover-photo, .frame-box .cover-plate { max-width:none; }
.cover-frame {
  position:absolute; inset:-14px; width:calc(100% + 28px); height:calc(100% + 28px);
  color:var(--accent); pointer-events:none; overflow:visible;
}

.anim-layer {
  position:fixed; inset:0; width:100%; height:100%;
  z-index:2; pointer-events:none;
}
/* Aynı hata kart kart akışta da vardı: .deck-nav position:absolute iken
   burada relative'e dönüyor, alt gezinme çubuğu ekranın altına taşıp
   kesiliyordu. Konumu olan öğelere yalnız z-index verilir. */
.inv-wrap, .deck { position:relative; z-index:3; }

/* ============================================================
   EDİTÖR MODU — sadece önizlemede aktif olur (yayında değil)
   ============================================================ */
.edit-on [data-edit] {
  outline:1px dashed transparent; outline-offset:3px; border-radius:3px;
  transition:outline-color .15s, background .15s; cursor:text;
}
.edit-on [data-edit]:hover { outline-color:var(--accent); background:rgba(176,141,87,.06); }
.edit-on [data-edit]:focus { outline:1.5px solid var(--accent); background:rgba(176,141,87,.08); }
.edit-on [data-photo] { cursor:grab; }
.edit-on [data-photo]:active { cursor:grabbing; }

/* nokta işaretçiler */
.spot {
  position:absolute; z-index:60; width:26px; height:26px; border-radius:50%;
  border:0; padding:0; cursor:pointer; display:grid; place-items:center;
  background:var(--accent); color:var(--bg); font-size:12px; line-height:1;
  box-shadow:0 3px 10px rgba(0,0,0,.22);
  animation:spotPulse 2.4s ease-out infinite;
}
.spot::after {
  content:attr(data-label); position:absolute; left:30px; white-space:nowrap;
  font-family:var(--body); font-size:10px; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink); background:var(--card);
  border:1px solid var(--line); border-radius:20px; padding:4px 9px;
  opacity:0; transform:translateX(-6px); transition:.18s; pointer-events:none;
}
.spot:hover::after { opacity:1; transform:none; }
@keyframes spotPulse {
  0%   { box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 0 rgba(176,141,87,.5); }
  70%  { box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 14px rgba(176,141,87,0); }
  100% { box-shadow:0 3px 10px rgba(0,0,0,.22), 0 0 0 0 rgba(176,141,87,0); }
}

/* kart hangi öğeden bahsediyor — mockup içinde belli olsun */
.spot-target {
  position:relative;
  outline:2px solid var(--accent) !important; outline-offset:6px; border-radius:4px;
  animation:targetGlow 1.8s ease-in-out infinite;
}
@keyframes targetGlow {
  0%,100% { outline-color:color-mix(in srgb, var(--accent) 45%, transparent); }
  50%     { outline-color:var(--accent); }
}

/* mini ayar popup'ı (kullanılmıyor — kart artık dışarıda) */
.pop {
  position:absolute; z-index:45; width:212px; background:var(--card);
  border:1px solid var(--line); border-radius:13px; padding:11px;
  box-shadow:0 14px 36px rgba(0,0,0,.24); font-family:var(--body);
}
.pop h4 { font-family:var(--body); font-size:10px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px; font-weight:700; }
.pop-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.pop-grid button {
  aspect-ratio:1; border:1px solid var(--line); border-radius:7px; cursor:pointer;
  background:var(--bg); padding:2px; display:grid; place-items:center; color:var(--accent);
  font-size:9px; overflow:hidden;
}
.pop-grid button.on { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent) inset; }
.pop-grid button svg { width:100%; height:100%; }
.pop-more {
  display:block; width:100%; margin-top:9px; padding:7px; border:0; border-radius:7px;
  background:var(--bg2); color:var(--ink); font-family:var(--body); font-size:11px;
  font-weight:600; cursor:pointer;
}
.pop-x { position:absolute; top:6px; right:8px; border:0; background:none; cursor:pointer;
  color:var(--muted); font-size:15px; line-height:1; }


/* ============================================================
   KULLANICI GÖRSELLERİ (PNG çıkartma)
   ============================================================ */
/* container-type: yazı süslemelerinin puntosu cqw ile KARTIN genişliğine
   bağlanır — tuvaldeki 1080px'lik sahneyle birebir aynı oran çıkar. */
/* Kaydırmalı akışta süsleme katmanının kabı — bölüm grubunu sarar */
.bolum-grup{position:relative}

/* ÇAPA KABI — bir bloğu (section) saran kap. İçindeki süsleme katmanı
   bloğun kenarına yapışır; blok uzayıp kısalsa da süsleme kaymaz.
   Sayfa yüzdesi yerine bloğun kendi ölçüsü esas alınır. */
.blok-kap{position:relative}
.blok-kap > .stk-layer{overflow:visible}

/* ---------- DİKİŞ: iki bölüm arasındaki çizgiyi örten süs ----------
   Kap yüksekliği SIFIR: akışta yer kaplamaz, hiçbir şeyi aşağı itmez.
   Süs kabın merkezine oturur → yarısı üstteki bölüme, yarısı alttakine
   taşar ve keskin çizgiyi tamamen kapatır. */
.dikis{position:relative;height:0;z-index:101;pointer-events:none;overflow:visible}
.dikis img{position:absolute;left:50%;top:0;transform:translate(-50%,-50%);
  max-width:none;height:auto;display:block;
  /* kenarları zemine karışsın; yırtık kâğıtta bu maske gerekmez */
  filter:drop-shadow(0 1px 2px rgb(0 0 0 / .06))}
@media (prefers-reduced-motion:no-preference){
  .dikis img{will-change:auto}
}
/* Süsleme katmanı EN ÜSTTE ve KESİLMEZ.
   Kart kart akışta katman zaten slaytın tamamını kaplar; kaydırmalıda
   sayfa grubunun tamamını kaplar (bkz. render.js → .bolum-grup).
   overflow:hidden idi — dikişe oturan çelenk bir sonraki bölümün
   arkasında kalıp kesiliyordu. Artık taşabilir, üstte durur. */
.stk-layer{position:absolute;inset:0;z-index:100;pointer-events:none;
  overflow:visible;container-type:inline-size}
/* Kart kart akışta taşan süsleme sahte kaydırma yaratmasın:
   slayt zaten sayfanın tamamı, dışına taşan kısım gereksiz. */
.inv[data-flow="deck"] .stk-layer{overflow:hidden}
.stk-yazi{display:block;line-height:1.15;white-space:pre-wrap;
  text-wrap:balance;font-weight:400}
.stk{position:absolute;transform-origin:center;pointer-events:none;user-select:none;
  max-width:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.10))}
/* Tek renkli paket parçaları maske olarak çizilir: gövde currentColor,
   yani konseptin vurgu rengi. Böylece dosya dışarıda kalır ama tema rengini alır. */
.stk-mask{color:var(--accent);background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat; mask:var(--m) center/contain no-repeat}
.edit-on .stk{pointer-events:auto;cursor:grab}
.edit-on .stk:active{cursor:grabbing}
/* Seçili öğe artık kesikli çerçeveyle değil, tutamaklı sınır kutusuyla gösteriliyor */
.edit-on .stk.sel{outline:none}

.stk-kutu{position:absolute;z-index:38;pointer-events:none;
  outline:1.5px solid var(--accent);outline-offset:0}
.stk-kutu .tut{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--card);border:1.5px solid var(--accent);pointer-events:auto;
  box-shadow:0 1px 3px rgba(0,0,0,.28)}
/* görünen tutamak küçük, vuruş alanı büyük — dokunmatikte de tutulabilsin */
.stk-kutu .tut::after{content:"";position:absolute;inset:-11px}
.stk-kutu .sol-ust{left:-6px;top:-6px;cursor:nwse-resize}
.stk-kutu .sag-ust{right:-6px;top:-6px;cursor:nesw-resize}
.stk-kutu .sol-alt{left:-6px;bottom:-6px;cursor:nesw-resize}
.stk-kutu .sag-alt{right:-6px;bottom:-6px;cursor:nwse-resize}
.stk-kutu .dondur{left:50%;top:-30px;margin-left:-5.5px;cursor:grab;
  background:var(--accent);border-color:var(--accent)}
.stk-kutu .sap{position:absolute;left:50%;top:-24px;width:1.5px;height:24px;
  background:var(--accent);opacity:.7}

/* sürüklerken ortaya yapıştığını gösteren kılavuz */
.stk-kilavuz{position:absolute;z-index:39;pointer-events:none;
  background:var(--accent);opacity:.85}

.stk-bar{position:absolute;z-index:40;display:flex;align-items:center;gap:2px;padding:3px;
  background:var(--card);border:1px solid var(--line);border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.16);font:12px -apple-system,sans-serif;color:var(--ink)}

.stk-bar b{padding:0 6px;font-size:11px;color:var(--muted)}
.stk-bar button{width:26px;height:26px;border:0;border-radius:7px;background:transparent;
  color:inherit;font-size:13px;line-height:1;cursor:pointer}
.stk-bar button:hover{background:var(--bg2)}

/* ============================================================
   SAYFA GEÇİŞ ÇUBUĞU — konseptin rengini alır
   ============================================================ */
.deck-nav{backdrop-filter:blur(8px)}
.inv[data-palette="night"] .deck-nav,
.inv[data-palette="slate"] .deck-nav{background:color-mix(in srgb,var(--card) 88%,transparent)}
.nav-next{box-shadow:0 4px 14px color-mix(in srgb,var(--accent) 35%,transparent)}
.nav-next.back{box-shadow:none}


/* ---- hazır süslemeler: satır içi SVG, tema rengini alır ---- */
.stk-svg{display:block;color:var(--accent);line-height:0}
.stk-svg svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.10))}

/* ---- sayfaya özel arka plan görseli ---- */
.slide-bg{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:cover;background-repeat:no-repeat}
.slide > .slide-in{position:relative;z-index:2}

/* ---- yazı arkası panelleri kaldırma ---- */
.inv.no-panels section.alt{background:transparent}
.inv.no-panels .cd div,
.inv.no-panels .prog li,
.inv.no-panels .iban,
.inv.no-panels .wishes li{background:transparent;border-color:transparent}
.inv.no-panels .prog li{border-bottom:1px dashed var(--line)}
.inv.no-panels .map-frame{border-color:transparent}
.inv.no-panels section + section{border-top-color:transparent}

/* ---------- VİDEOLU ZARF ---------- */
.zarf-video{ padding:0; display:block; overflow:hidden; }
.zarf-video .zarf-film{ position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; }
.zarf-video .zarf-alt{ position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:26px 24px calc(30px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column; align-items:center; gap:9px;
  background:linear-gradient(to top,
    color-mix(in srgb, var(--bg) 90%, transparent) 0%,
    color-mix(in srgb, var(--bg) 72%, transparent) 55%, transparent 100%);
  transition:opacity .4s ease; }
.zarf-video.aciliyor .zarf-alt{ opacity:0; }
.zarf-video .zarf-alt b{ font-family:var(--display); font-weight:400;
  font-size:calc(23px * var(--disp-buyut)); line-height:1.2;
  letter-spacing:var(--disp-sp); color:var(--ink); }

/* ============================================================
   ZARF AÇILIŞI
   Kapak 3D rotateX ile üstten açılır, kart yukarı süzülür,
   sonra perde kalkar. Mühür konseptin süslemesini ve rengini alır.
   Katman sırası: arka(1) < kart(2) < ön(3) < kapak(4, açılırken 0)
   ============================================================ */
.zarf{ position:fixed; inset:0; z-index:900; background:var(--bg);
  display:grid; place-items:center; perspective:1400px;
  transition:opacity .6s ease, visibility .6s; }
.zarf.acildi{ opacity:0; visibility:hidden; pointer-events:none; }

.zarf-kutu{ display:flex; flex-direction:column; align-items:center; gap:30px; }
.zarf-govde{ position:relative; width:min(300px,74vw); aspect-ratio:3/2;
  transform-style:preserve-3d; }

/* zarfın gövdesi ve ağzı */
.zarf-arka{ position:absolute; inset:0; z-index:1; background:var(--bg2);
  border:1px solid var(--line); border-radius:4px; }

/* Kartın görünen ucu: ön yüzün ARKASINDA durur, sadece üst kısmı görünür.
   Açılınca yukarı süzülüp öne geçer. */
.zarf-kart{ position:absolute; left:10%; right:10%; top:24%; z-index:2;
  opacity:0; padding:14px 12px 16px; background:var(--card);
  border:1px solid var(--line); border-radius:3px; text-align:center;
  box-shadow:0 2px 10px rgb(0 0 0 / .07);
  transition:transform 1s cubic-bezier(.34,.9,.3,1) .3s,
             opacity .25s ease .35s, z-index 0s .55s; }
.zarf.aciliyor .zarf-kart{ transform:translateY(-78%); z-index:6; opacity:1; }

/* ön yüz — kartın üstünü örter */
.zarf-on{ position:absolute; inset:0; z-index:3; border-radius:4px;
  background:linear-gradient(165deg, var(--bg2),
    color-mix(in srgb, var(--bg2) 78%, var(--line)));
  border:1px solid var(--line); border-top:0;
  clip-path:polygon(0 26%, 50% 74%, 100% 26%, 100% 100%, 0 100%); }

/* üst kapak — açılan parça, mühür üstünde */
.zarf-kapak{ position:absolute; inset:0; z-index:4; transform-origin:top center;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg2) 88%, var(--ink)), var(--bg2));
  border:1px solid var(--line); border-radius:4px 4px 0 0;
  clip-path:polygon(0 0, 100% 0, 50% 76%);
  transition:transform .9s cubic-bezier(.6,.02,.2,1); }
.zarf.aciliyor .zarf-kapak{ transform:rotateX(-176deg); z-index:0; }

/* mühür: kapağın ucunda, gövdeye göre konumlanır */
.zarf-muhur{ position:absolute; left:50%; top:60%; z-index:5;
  transform:translate(-50%,-50%); width:58px; height:58px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,
    color-mix(in srgb, var(--accent) 82%, #fff), var(--accent) 60%,
    color-mix(in srgb, var(--accent) 74%, #000));
  box-shadow:0 3px 10px rgb(0 0 0 / .3), inset 0 -2px 5px rgb(0 0 0 / .24),
    inset 0 2px 5px rgb(255 255 255 / .32);
  display:grid; place-items:center; color:var(--card);
  transition:transform .4s ease, opacity .4s ease; }
.zarf-muhur svg{ width:30px; height:30px; }
.zarf.aciliyor .zarf-muhur{ transform:translate(-50%,-50%) scale(.7); opacity:0; }

.zarf-kart b{ display:block; font-family:var(--display); font-weight:400;
  font-size:calc(19px * var(--disp-buyut)); line-height:1.25; margin:6px 0 5px;
  letter-spacing:var(--disp-sp); color:var(--ink); }
.zarf-kicker, .zarf-tarih{ display:block; font-size:8.5px; letter-spacing:.24em;
  text-transform:uppercase; color:var(--muted); }

.zarf-ac{ border:1px solid var(--accent); background:transparent; color:var(--accent);
  border-radius:999px; padding:11px 26px; cursor:pointer;
  font-family:var(--body); font-size:13px; letter-spacing:.11em;
  text-transform:uppercase; transition:background .2s, color .2s; }
.zarf-ac:hover{ background:var(--accent); color:var(--card); }
.zarf.aciliyor .zarf-ac{ opacity:0; transition:opacity .3s; }

/* Hareketi azalt: animasyon yok, tek dokunuşla geçilir */
@media (prefers-reduced-motion: reduce){
  .zarf-kapak, .zarf-kart, .zarf-muhur, .zarf{ transition:none }
}


/* ============================================================
   DİKEY SAHNE — davetiye her ekranda telefon oranında durur.

   Telefonda hiçbir şey değişmez: davetiye ekranı doldurur.
   Ekran telefondan genişse (masaüstü, tablet yatay) davetiye
   9:16'lık dikey bir sütuna oturur — 1080×1920 mantığı — ve
   çevresi koyu zemin olur. Böylece zarf videosu, süslemeler ve
   metin sütunu aynı orana bakar; kırpılma ve orantısızlık biter.

   Sütun genişliği ekran YÜKSEKLİĞİNDEN türetilir: var(--svh,100svh) × 9/16.
   Tam ekran katmanlar (zarf, animasyon, arka plan) da bu sütuna
   kısılır — yoksa 1440px genişliğe yayılıp orantıyı bozuyorlardı.
   ============================================================ */
.inv { --sahne:100%; }

@media (min-aspect-ratio: 10/16) {
  html:has(.inv), body:has(.inv) { background:#0B0C0F; }

  .inv {
    --sahne:calc(var(--svh,100svh) * 9 / 16);
    width:var(--sahne); max-width:100vw; margin-inline:auto;
    box-shadow:0 0 0 1px rgb(255 255 255 / .05), 0 24px 80px -28px rgb(0 0 0 / .85);
  }
  .inv[data-flow="deck"] { border-radius:20px; }

  /* viewport'a değil sahneye yapışan katmanlar */
  .zarf, .anim-layer, .bg-layer {
    left:50%; right:auto; width:var(--sahne); max-width:100vw;
    transform:translateX(-50%);
  }
  .zarf[hidden] { display:none; }

  /* sabit arayüz parçaları sahnenin içinde kalsın */
  .cue   { left:50%; }
  .dots  { right:calc(50vw - min(var(--sahne),100vw) / 2 + 14px); }
  .music { right:calc(50vw - min(var(--sahne),100vw) / 2 + 16px); }

  /* Kaydırmalı akış sahnede: kapak sahnenin tamamı,
     diğer bölümler yine içeriği kadar. */
  .inv[data-flow="scroll"] .cover { min-height:var(--svh,100svh); }
}

/* Zarf açıkken arka plan kaymasın — perde kalkmadan sayfa gezilemez */
html:has(.zarf:not(.acildi)) { overflow:hidden; }


/* ============================================================
   ERİŞİLEBİLİRLİK
   · Klavyeyle gezen kullanıcı nerede olduğunu görmeli — tarayıcı
     varsayılan halkası bazı zeminlerde kayboluyordu.
   · Hareketi azalt tercihi bütün geçişleri kapatır.
   · Kontrast: soluk metinler WCAG AA altındaydı, koyulaştırıldı.
   ============================================================ */
.inv a:focus-visible, .inv button:focus-visible,
.inv input:focus-visible, .inv select:focus-visible, .inv textarea:focus-visible,
.inv [tabindex]:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px;
  border-radius:4px;
}
/* Odak halkası koyu zeminde de görünsün */
.inv[data-palette="night"] :focus-visible,
.inv[data-palette="midnight"] :focus-visible { outline-color:#FFE9B8; }

/* Klavye kullanıcısı için "içeriğe atla" */
.atla{position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--card);color:var(--ink);padding:12px 18px;border-radius:0 0 10px 0;
  font:600 14px/1 var(--body);text-decoration:none;box-shadow:0 4px 16px rgba(0,0,0,.2)}
.atla:focus{left:0}

@media (prefers-reduced-motion: reduce){
  .inv *, .inv *::before, .inv *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* WhatsApp ile ilet — sunucu gelene kadar yanıtı sahibine ulaştıran köprü */
.btn.wa{background:#25D366;border-color:#25D366;color:#fff}
.btn.wa:hover{filter:brightness(1.06)}
.wa-not{font-size:12.5px;color:var(--muted);margin-top:10px}


/* ============================================================
   AÇILIŞ KİPLERİ — kazı-kazan · mührü sürükle · kapı
   Davetlinin gördüğü ilk etkileşim. Hepsi perdeyi kaldırır;
   fark yapılan jestte. (render.js → ZARF_KIP)
   ============================================================ */
.zarf-ipuc{ font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); opacity:.9; }

/* --- kazı-kazan --- */
.zarf-kazi{ position:absolute; inset:0; z-index:3; width:100%; height:100%;
  cursor:crosshair; touch-action:none; }
.zarf-kazi-ipuc{ position:absolute; left:50%; top:50%; z-index:4;
  transform:translate(-50%,-50%); pointer-events:none;
  font-size:12px; letter-spacing:.2em; text-transform:uppercase;
  color:#5A4A22; background:#FFFFFF66; padding:8px 16px; border-radius:999px;
  backdrop-filter:blur(3px); transition:opacity .4s;
  animation:kaziNefes 2.4s ease-in-out infinite; }
@keyframes kaziNefes{ 0%,100%{ transform:translate(-50%,-50%) scale(1) }
  50%{ transform:translate(-50%,-50%) scale(1.06) } }

/* --- mührü sürükle --- */
.zarf-muhur-kip{ position:absolute; inset:0; z-index:3; pointer-events:none; }
.zarf-muhur-kip .muhur-tut{ position:absolute; left:50%; top:50%;
  transform:translate(-50%,-50%); pointer-events:auto; cursor:grab;
  touch-action:none; width:96px; height:96px; }
.zarf-muhur-kip.tutuluyor .muhur-tut{ cursor:grabbing; }
.zarf-muhur-kip .muhur-tut svg{ width:46px; height:46px; }
.zarf-muhur-kip .muhur-ok{ position:absolute; left:50%; top:calc(50% + 74px);
  transform:translateX(-50%); font-size:26px; color:var(--accent); opacity:.55;
  animation:okAsagi 1.9s ease-in-out infinite; }
@keyframes okAsagi{ 0%,100%{ transform:translateX(-50%) translateY(0); opacity:.35 }
  50%{ transform:translateX(-50%) translateY(9px); opacity:.8 } }

/* --- kapı --- */
.zarf-kapi{ position:absolute; inset:0; z-index:3; display:grid; place-items:center; }
.zarf-kapi .kapi-kanat{ position:absolute; top:0; bottom:0; width:50%;
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--bg2) 92%, var(--ink)), var(--bg2));
  border:1px solid var(--line);
  transition:transform 1s cubic-bezier(.62,.02,.24,1); }
.zarf-kapi .kapi-kanat.sol{ left:0; transform-origin:left center;
  box-shadow:inset -14px 0 26px -18px #0007; }
.zarf-kapi .kapi-kanat.sag{ right:0; transform-origin:right center;
  box-shadow:inset 14px 0 26px -18px #0007; }
.zarf.aciliyor .kapi-kanat.sol{ transform:perspective(1200px) rotateY(-104deg); }
.zarf.aciliyor .kapi-kanat.sag{ transform:perspective(1200px) rotateY(104deg); }
.kapi-dug{ position:relative; z-index:2; }
.zarf.aciliyor .kapi-dug{ opacity:0; transition:opacity .3s; }

@media (prefers-reduced-motion: reduce){
  .zarf-kazi-ipuc, .zarf-muhur-kip .muhur-ok{ animation:none }
  .zarf-kapi .kapi-kanat{ transition:none }
}


/* ============================================================
   KÂĞIT KİTİ — basılı davetiye katmanı (render.js → KAGIT)
   15 Ekim 2026 pilotu: Kemer (açık) + Gece (koyu).
   Görsel yolları .inv üzerindeki --kg-* değişkenlerinden gelir;
   bu bloğun hiçbir kuralı data-kagit taşımayan temaya dokunmaz.
   ============================================================ */
.inv[data-kagit]::before { display:none; }          /* gerçek doku var, sahte gren gereksiz */
/* --kg-boya: açık temalarda ortak fildişi kâğıt paletin zemin rengiyle çarpılır */
.inv[data-kagit][data-flow="deck"] .slide {
  background:linear-gradient(var(--kg-boya, transparent), var(--kg-boya, transparent)),
             var(--kg-zemin) center / cover;
  background-blend-mode:multiply; }
.inv[data-kagit][data-flow="scroll"] {
  background:linear-gradient(var(--kg-boya, transparent), var(--kg-boya, transparent)),
             var(--kg-zemin) center top / 700px repeat;
  background-blend-mode:multiply; }
.inv[data-kagit] .alt { background:none; }
/* Açık temada varak biraz koyultulur: düz altın krem kâğıtta okunmuyor */
.inv[data-kagit]:not([data-palette="night"]) {
  --kg-varak-perde:linear-gradient(rgba(92,64,22,.42), rgba(92,64,22,.42)); }

/* ---- Kart: iç sayfalar tırtıklı kenarlı kâğıda basılı ---- */
.kagit-kart {
  position:relative; margin:26px 14px 10px;
  border:28px solid transparent;
  border-image-source:var(--kg-kart); border-image-slice:70 fill;
  border-image-width:28px; border-image-repeat:stretch;
  filter:drop-shadow(0 12px 22px rgba(60,42,18,.18));
}
.inv[data-palette="night"] .kagit-kart { filter:drop-shadow(0 16px 28px rgba(0,0,0,.6)); }
.inv[data-kagit][data-flow="deck"] .kagit-kart section { padding:20px 6px; }
.inv[data-kagit][data-flow="deck"] .kagit-kart section + section { border-top:0; }
/* köşe süsü: sol üst + (çevrilmiş) sağ alt */
/* Her sayfada süs olunca göz yoruluyordu: köşeler yalnız davet sayfasında */
.slide[data-id="invite"] .kagit-kart::before, .slide[data-id="invite"] .kagit-kart::after {
  content:""; position:absolute; width:76px; height:86px; z-index:2; pointer-events:none;
  background:var(--kg-kose) left top / contain no-repeat;
}
.slide[data-id="invite"] .kagit-kart::before { left:-24px; top:-26px; }
.slide[data-id="invite"] .kagit-kart::after  { right:-24px; bottom:-26px; transform:rotate(180deg); }

/* ---- Ayraç: çizgi + elmas yerine basılı ayraç ---- */
.inv[data-kagit] .orn { height:16px; max-width:220px;
  background:var(--kg-ayrac) center / contain no-repeat; }
.inv[data-kagit] .orn::before, .inv[data-kagit] .orn::after, .inv[data-kagit] .orn svg { display:none; }

/* ---- Varak yazı: isimler ve monogram; açılışta bir kez ışık kayar ---- */
.inv[data-kagit] .varak, .inv[data-kagit] .varak * {
  color:transparent; -webkit-text-fill-color:transparent; }
.inv[data-kagit] .varak {
  background-image:
    linear-gradient(105deg, transparent 38%, rgba(255,250,235,.8) 50%, transparent 62%),
    var(--kg-varak-perde, linear-gradient(transparent, transparent)),
    var(--kg-varak);
  background-size:260% 100%, cover, 240px;
  background-position:130% 0, 0 0, center;
  -webkit-background-clip:text; background-clip:text;
  animation:varakIsik 2.8s ease 1s 1 both;
}
@keyframes varakIsik { from { background-position:130% 0, 0 0, center; }
                       to   { background-position:-70% 0, 0 0, center; } }
@media (prefers-reduced-motion:reduce) { .inv[data-kagit] .varak { animation:none; } }

/* ---- Monogram: arma maskesi + baş harfler ---- */
.inv .monogram { position:relative; width:var(--mg,82px); height:var(--mg,82px);
  margin:0 auto 14px; display:grid; place-items:center; }
.mg-arma { position:absolute; inset:0;
  -webkit-mask:var(--kg-arma) center / contain no-repeat; mask:var(--kg-arma) center / contain no-repeat;
  background:var(--kg-varak-perde, linear-gradient(transparent, transparent)), var(--kg-varak) center / cover; }
.mg-harf { position:relative; font-family:var(--display); line-height:1; white-space:nowrap;
  font-size:calc(var(--mg,82px) * .25); letter-spacing:.03em; }
.mg-harf em { font-style:italic; font-size:.6em; margin:0 .1em; }
.mg-kapanis { --mg:150px; margin-bottom:24px; }

/* ---- Kapak: kemerin ortası yazıya ayrıldı ---- */
.inv .kapak-kagit { justify-content:center; }
.inv[data-flow="deck"] .kapak-kagit .kapak-yazi { padding-bottom:calc(var(--svh,100svh) * .03); }
.inv .kapak-kagit .kapak-yazi { max-width:68%; }
.kapak-kagit .kapak-resim { animation:kapakNefes 26s ease-in-out infinite alternate; }
@keyframes kapakNefes { from { transform:scale(1); } to { transform:scale(1.025); } }
@media (prefers-reduced-motion:reduce) { .kapak-kagit .kapak-resim { animation:none; } }

/* ---- Geri sayım: kutu yok, ince dikey çizgiler ---- */
.inv[data-kagit] .cd { gap:0; }
.inv[data-kagit] .cd div { background:none; border:0; border-left:1px solid var(--line); padding:6px 4px; }
.inv[data-kagit] .cd div:first-child { border-left:0; }

/* ---- Mekân: kartpostal ---- */
.inv[data-kagit] .kartpostal { text-align:left; align-items:flex-start; padding-right:84px !important; }
.inv[data-kagit] .kartpostal .venue-name { font-size:27px; line-height:1.2; }
.inv[data-kagit] .kartpostal .btn-row { justify-content:flex-start; }
.inv[data-kagit] .kartpostal .map-frame { margin-right:-78px; width:calc(100% + 78px); }
.inv .kp-pul { position:absolute; top:6px; right:0; width:66px; transform:rotate(4deg); z-index:1; }
.kp-pul img { width:100%; }
.kp-pul b { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--display); font-weight:400; font-size:15px; }
.inv .kp-damga { position:absolute; top:62px; right:-8px; width:76px; opacity:.5;
  transform:rotate(-9deg); pointer-events:none; }

/* ---- Program: bilet yok. Kemer ince çizgili sade kart, Gece Art Deco satır.
   Saat solda, büyük; süs yok — göz önce saati ve başlığı görsün. ---- */
.prog.prog-kagit { max-width:320px; }
.prog-kagit li { grid-template-columns:72px 1fr; column-gap:14px; align-items:baseline; padding:14px 4px; }
.prog-kagit li::before { display:none; }
.prog-kagit .prog-ikon { display:none; }
.prog-kagit .prog-ic { display:contents; }
.prog-kagit .prog-ic time { grid-column:1; grid-row:1 / span 2; font-size:22px; text-align:right; }
.prog-kagit .prog-ic b { grid-column:2; margin:0; }
.prog-kagit .prog-ic small { grid-column:2; }
.inv[data-kagit]:not([data-kagit="gece"]) .prog-kagit time { color:color-mix(in srgb, var(--accent) 70%, var(--ink)); }
.inv[data-kagit]:not([data-kagit="gece"]) .prog-kagit li { border:1px solid color-mix(in srgb, var(--accent) 38%, transparent);
  padding:14px 16px 14px 8px; margin-bottom:10px; }
.inv[data-kagit]:not([data-kagit="gece"]) .prog-kagit li:last-child { margin-bottom:0; padding-bottom:14px; }
.inv[data-kagit="gece"] .prog-kagit li { border-bottom:1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
.inv[data-kagit="gece"] .prog-kagit li:last-child { border-bottom:0; }

/* ---- Katılım: kâğıt üstünde çizgili form ---- */
/* .inv section > * genişliği %100 yapıyor — boyutlar .inv ile sabitlenir */
.inv[data-kagit] .field input, .inv[data-kagit] .field select, .inv[data-kagit] .field textarea {
  background:transparent; border:0; border-radius:0; padding:10px 2px;
  border-bottom:1px solid color-mix(in srgb, var(--ink) 30%, transparent); }
.inv[data-kagit] .field input:focus, .inv[data-kagit] .field select:focus,
.inv[data-kagit] .field textarea:focus { border-bottom-color:var(--accent); }
.inv[data-kagit] .field select option { background:var(--bg); color:var(--ink); }
.inv[data-kagit] .field input::placeholder, .inv[data-kagit] .field textarea::placeholder {
  color:color-mix(in srgb, var(--ink) 52%, transparent); }
.inv[data-kagit="gece"] .field label, .inv[data-kagit="gece"] [data-rsvp] > p {
  color:color-mix(in srgb, var(--ink) 78%, transparent); }
.inv[data-kagit] .choice button:not([aria-pressed="true"]) {
  color:color-mix(in srgb, var(--ink) 82%, transparent);
  border-color:color-mix(in srgb, var(--ink) 34%, transparent); }
.inv[data-kagit] .choice button:not([aria-pressed="true"]) { background:transparent; }
/* Doku formun arkasında değil: zemin düz kâğıt, kart dolgusu hafif örtülür */
.inv[data-kagit] .kagit-kart [data-rsvp] { background:color-mix(in srgb, var(--card) 55%, transparent); }
.inv[data-kagit] .ok { background:transparent; border:0; }
/* IBAN kutusu kâğıdın üstünde bembeyaz sırıtıyordu: kâğıda basılı çerçeve */
.inv[data-kagit] .iban { background:transparent; border:1px solid color-mix(in srgb, var(--accent) 40%, transparent); }
.inv[data-kagit] .ok-kart::before { content:""; display:block; width:64px; height:64px;
  margin:0 auto 12px; background:var(--kg-muhur) center / contain no-repeat; }

/* ============================================================
   KATILIM ONAY KARTI — bütün temalar.
   Davetlinin adı kartın üstüne mürekkeple yazılıyormuş gibi belirir.
   ============================================================ */
.ok-kart { text-align:center; }
.ok-ust { display:block; font-size:11px; letter-spacing:.28em; text-transform:uppercase;
  color:var(--muted); font-weight:600; }
.ok-ad { font-family:var(--display); font-size:clamp(30px, 9vw, 40px); line-height:1.2;
  color:color-mix(in srgb, var(--accent) 66%, var(--ink)); margin:10px 0 6px;
  clip-path:inset(0 100% 0 0); animation:murekkep 1.6s cubic-bezier(.4,0,.2,1) .25s forwards; }
@keyframes murekkep { to { clip-path:inset(0 0 0 0); } }
@media (prefers-reduced-motion:reduce) { .ok-ad { animation:none; clip-path:none; } }
.ok-tarih { margin-top:14px; font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--muted); }


/* Premium çelenk (etek) davet metni ile geri sayımın ARASINA oturur. Arada yer
   yoktu, çelenk metni örtüyordu (Gül Bahçesi %99). Geri sayımın üstüne boşluk
   açılır, çelenk DOKU_PLAN'da bu boşluğun ortasına yazılır (dy 66). */
.inv[data-doku="rose"] .blok-kap[data-blok="countdown"],
.inv[data-doku="gold"] .blok-kap[data-blok="countdown"],
.inv[data-doku="kina"] .blok-kap[data-blok="countdown"],
.inv[data-doku="parti"] .blok-kap[data-blok="countdown"] { padding-top:132px; }

/* Doku taşıyan temada kaydırmalı akışın bölüm boşluğu SABİT. Normalde ekran
   yüksekliğiyle değişiyor (7svh); galeri kartı kısa olduğu için boşluk daralıp
   süsler yazıya biniyordu (Zeytin Bahçesi: çelenk "Takvime ekle" üstünde).
   59 px = 844 px yükseklikteki değer; süs konumları o ölçüde doğrulandı. */
.inv[data-doku][data-flow="scroll"] section { padding-top:59px; padding-bottom:59px; }
/* Zeytin Bahçesi: mekânın üstündeki çelenk kaydırmalı akışta "Takvime ekle"
   düğmesine değiyordu; kart kart akışta ise bu yükseklik gerekli. Yalnız
   kaydırmalıda mekân bölümü aşağı itilir, çelenk onunla birlikte iner. */
.inv[data-doku="sage"][data-flow="scroll"] .blok-kap[data-blok="venue"] { margin-top:56px; }

/* Koyu kapak (Kına: bordo perde) — tarih ve kapanış yazıları açık renk */
.inv[data-kapak-koyu] .kapak-kagit .cover-date,
.inv[data-kapak-koyu] .kapak-kagit .greet { color:#F1E2C8; }
/* Doku temasında kapanış, kapak çiziminin üstünde (ortası yazıya boş üretildi) */
/* kart kart akışta bölümler min-height:auto alıyor (0,2,1) — .inv ile yenilir */
.inv .finale.fin-kagit { min-height:calc(var(--svh,100svh) - 96px); }
.inv[data-kapak-koyu] .finale.fin-kagit h2,
.inv[data-kapak-koyu] .finale.fin-kagit p,
.inv[data-kapak-koyu] .finale.fin-kagit .fin-ad { color:#F6EBDD; }

/* editör önizlemesinin bölüm çapası — yer kaplamaz */
.sf-capa { display:block; height:0; overflow:hidden; }

/* müzik künyesi (CC BY lisans şartı) — imzanın altında, göze batmadan */
.inv footer .muz-kunye { display:block; margin-top:10px; font-size:10px; letter-spacing:.02em; opacity:.6; }
.inv footer .muz-kunye a { color:inherit; text-decoration:underline; text-underline-offset:2px; }