/* Melek & Can Eren — düğün davetiyesi
   Görsel dil: fildişi kâğıt, şampanya altını ince çizgiler, bordo vurgu, lacivert mürekkep.
   Yazı: Cormorant Garamond (başlıklar) + Jost (metin, etiket ve düğmeler).
   Okunurluk önce gelir: bilgi taşıyan yazılar büyük ve koyudur; altın yalnızca süs ve küçük etiketlerde kullanılır. */
:root {
  --murekkep: #1a2238; --fildisi: #fbf7ee; --kagit: #fffdf8;
  --altin: #c4a468; --altin-koyu: #86662f; --altin-acik: #e6d2a2;
  --bordo: #6b1d2e; --bordo-koyu: #521523;
  --cizgi: #d8cbb0; --cerceve: #c9b98f; --soluk: #5d6478;
  --gece: 0;                                   /* 0 gündüz → 1 gece; gökyüzüne göre app.js günceller */
  --p: 0;                                      /* yolculuğun ilerlemesi 0 → 1 */
  /* sahnenin üstündeki yazı renkleri: gündüz koyu, gece açık (color-mix yoksa app.js bu üçünü elle ayarlar) */
  --yazi: var(--murekkep); --vurgu: var(--altin-koyu); --hale: rgb(255 255 255 / .62);
  --serif: "Cormorant Garamond", "Cormorant", Georgia, "Times New Roman", serif;
  --sans: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --kenar: clamp(1.25rem, 5.5vw, 6rem);
  --susu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 136 11'%3E%3Cpath d='M0 5h58v1H0zM78 5h58v1H78zM68 1l4.5 4.5L68 10l-4.5-4.5z'/%3E%3C/svg%3E");   /* çizgi — baklava — çizgi */
}
@supports (color: color-mix(in oklab, red, blue)) {
  :root {
    --yazi: color-mix(in oklab, var(--fildisi) calc(var(--gece) * 100%), var(--murekkep));
    --vurgu: color-mix(in oklab, var(--altin-acik) calc(var(--gece) * 100%), var(--altin-koyu));
    --hale: color-mix(in oklab, rgb(9 14 44 / .55) calc(var(--gece) * 100%), rgb(255 255 255 / .62));
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; overflow-x: hidden; font: 400 1.0625rem/1.6 var(--sans); color: var(--yazi);
  /* tuvalin altındaki gökyüzü: dünya yüklenene kadar ve WebGL yoksa bu görünür */
  background: linear-gradient(#8fc2ee, #ffe9d0) fixed;
  background: linear-gradient(color-mix(in oklab, #070c27 calc(var(--gece) * 100%), #8fc2ee), color-mix(in oklab, #1b2452 calc(var(--gece) * 100%), #ffe9d0)) fixed;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
html[data-acilis="kapi"] body, html[data-acilis="giris"] body { overflow: hidden; }
::selection { color: var(--murekkep); background: var(--altin-acik); }
[hidden] { display: none !important; }      /* display veren kurallar (ör. .tus) hidden özniteliğini ezmesin */

#dunya { position: fixed; inset: 0; z-index: 0; display: block; width: 100%; height: 100lvh; touch-action: pan-y; }
/* overflow-x: clip — yazıların arkasındaki pus (.metin::before) ekrandan taşar; telefonda bu taşma sayfayı yana kaydırılabilir yapar,
   sabit öğeleri (üst çubuk, bölüm çizgisi, sahne) ekrandan geniş dizer. body'deki overflow-x: hidden telefonda bunu önlemez. */
main { position: relative; z-index: 1; overflow-x: clip; }
a { color: inherit; }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.atla { position: fixed; left: 1rem; top: -4rem; z-index: 60; padding: .7rem 1rem; color: var(--murekkep); background: var(--kagit); border: 1px solid var(--altin); }
.atla:focus { top: 1rem; }

/* ───────── yazı */
/* küçük etiket: iki yanında ince çizgi */
.ust-yazi { display: flex; align-items: center; gap: .85rem; margin: 0 0 1.25rem; font: 500 .78rem/1.5 var(--sans); letter-spacing: .32em; text-transform: uppercase; color: var(--vurgu); }
.ust-yazi::before, .ust-yazi::after { content: ""; flex: none; width: 1.7rem; height: 1px; background: currentColor; opacity: .8; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 500; letter-spacing: -.012em; line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere; }
h1 { font-size: clamp(3.6rem, 17vw, 8.2rem); line-height: .94; }
h2 { font-size: clamp(3rem, 13vw, 5.6rem); }
h3 { font-weight: 600; }
/* bölüm başlığının altında süs: çizgi — baklava — çizgi */
.istasyon h2::after { content: ""; display: block; width: 8.5rem; height: .7rem; margin-top: 1.2rem; background: var(--vurgu); -webkit-mask: var(--susu) center / 100% 100% no-repeat; mask: var(--susu) center / 100% 100% no-repeat; }
h1, h2, .tarih, .aileler, .not, .giris, .adres, .sayin, .ust-yazi, .sayac, .kunye, .kaydir { text-shadow: 0 0 1.1em var(--hale), 0 0 .3em var(--hale); }
.cift .ikinci { display: block; white-space: nowrap; }
.cift .ve { font-style: italic; font-weight: 400; color: var(--vurgu); margin-right: .06em; }
.tarih { margin: 1.6rem 0 0; font: 600 clamp(1.3rem, 5.2vw, 1.75rem)/1.35 var(--serif); text-wrap: balance; }
.giris, .not { margin: 1.3rem 0 0; max-width: 30rem; font-size: clamp(1.08rem, 4.3vw, 1.2rem); text-wrap: balance; }
.sayin { margin: 1.4rem 0 -.7rem; font: italic 600 clamp(1.3rem, 5.4vw, 1.7rem)/1.3 var(--serif); }
.adres { margin: 1.3rem 0 0; font: 600 clamp(1.3rem, 5.2vw, 1.7rem)/1.35 var(--serif); }
/* aileler: yan yana iki sütun, arada ince çizgi */
.aileler { display: flex; margin: 1.6rem 0 0; }
.aileler p { margin: 0; padding: .1rem 1.6rem; }
.aileler p:first-child { padding-left: 0; }
.aileler p + p { border-left: 1px solid var(--vurgu); }
.aileler b { display: block; margin-bottom: .45rem; font: 500 .7rem/1.4 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--vurgu); }
.aileler span, .aileler i { font: 600 clamp(1.2rem, 4.8vw, 1.45rem)/1.25 var(--serif); white-space: nowrap; }

/* ───────── bölümler (duraklar) */
.istasyon { min-height: 150svh; padding: clamp(5.6rem, 13svh, 9rem) calc(var(--kenar) + 1.1rem) 5rem var(--kenar); pointer-events: none; }
.metin { position: relative; max-width: 36rem; pointer-events: auto; }
/* yazının arkasında yumuşak bir pus: gündüz açık, gece koyu — sahne ne gösterirse göstersin metin okunur */
.metin::before { content: ""; position: absolute; inset: -6rem -24vw -6rem -34vw; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, var(--hale), transparent); }
.istasyon.istasyon--zirve { position: relative; min-height: 160svh; }
.istasyon.istasyon--son { display: flex; align-items: flex-end; min-height: 100lvh; padding-bottom: max(2.2rem, env(safe-area-inset-bottom)); }
.istasyon--son h2 { font-size: clamp(2.8rem, 12vw, 5rem); }
.istasyon--son .tarih { font: 400 1.05rem/1.6 var(--sans); }
.istasyon--son .tarih i { display: block; margin-bottom: .3rem; font: italic 600 1.6rem/1.2 var(--serif); color: var(--vurgu); }      /* imza */
.kaydir { position: absolute; left: var(--kenar); top: calc(100svh - 4.6rem); margin: 0; font: 500 .7rem/1 var(--sans); letter-spacing: .32em; text-transform: uppercase; }
.kaydir::after { content: ""; display: block; width: 1px; height: 1.9rem; margin: .7rem 0 0 .15rem; background: currentColor; transform-origin: top; animation: salin 2.4s ease-in-out infinite; }
@keyframes salin { 0%, 100% { transform: scaleY(.35); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }

.beliren { opacity: 0; translate: 0 1.1rem; transition: opacity 1.1s cubic-bezier(.2, .7, .2, 1), translate 1.1s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--i, 0) * 90ms); }
.beliren.gorundu { opacity: 1; translate: 0 0; }
.metin > :nth-child(2) { --i: 1; } .metin > :nth-child(3) { --i: 2; } .metin > :nth-child(4) { --i: 3; } .metin > :nth-child(5) { --i: 4; } .metin > :nth-child(n+6) { --i: 5; }

/* ───────── düğmeler: düz, ince altın iç çerçeveli */
.tuslar { display: flex; flex-wrap: wrap; gap: .9rem; margin: 1.9rem 0 0; }
.tus {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.2rem; padding: 0 1.7rem; border: 0; border-radius: .18rem;
  font: 500 .92rem/1.2 var(--sans); letter-spacing: .16em; text-transform: uppercase; text-align: center; text-decoration: none; color: var(--fildisi); background: var(--bordo); cursor: pointer;
  box-shadow: inset 0 0 0 4px var(--bordo), inset 0 0 0 5px rgb(230 210 162 / .6), 0 1rem 2rem -1.1rem rgb(20 10 40 / .65);
  transition: background .3s, box-shadow .3s, scale .12s; -webkit-tap-highlight-color: transparent; user-select: none;
}
.tus:hover { background: var(--bordo-koyu); box-shadow: inset 0 0 0 4px var(--bordo-koyu), inset 0 0 0 5px rgb(230 210 162 / .85), 0 1rem 2rem -1.1rem rgb(20 10 40 / .65); }
.tus:active { scale: .985; }
.tus--ikincil { color: var(--murekkep); background: var(--kagit); box-shadow: inset 0 0 0 1px var(--cerceve), inset 0 0 0 4px var(--kagit), inset 0 0 0 5px rgb(196 164 104 / .55), 0 1rem 2rem -1.1rem rgb(20 10 40 / .5); }
.tus--ikincil:hover { background: #fbf4e4; box-shadow: inset 0 0 0 1px var(--altin), inset 0 0 0 4px #fbf4e4, inset 0 0 0 5px var(--altin), 0 1rem 2rem -1.1rem rgb(20 10 40 / .5); }
.tus--kucuk { min-height: 2.6rem; padding: 0 1.05rem; font-size: .74rem; letter-spacing: .13em; }
.tus--buyuk { min-height: 3.8rem; padding: 0 2rem; font-size: 1.02rem; }
.tus[disabled] { opacity: .45; cursor: not-allowed; }
:is(.tus, .yuvarlak, .yazi-dugme, .imza, .hat a, .muhur, .dil-dugme):focus-visible, label.tus:focus-within { outline: 2px solid var(--altin); outline-offset: 3px; }
.yazi-dugme { padding: .5rem 0; border: 0; background: none; font: 500 .95rem/1.3 var(--sans); letter-spacing: .04em; color: inherit; text-decoration: underline 1px var(--altin); text-underline-offset: .4em; cursor: pointer; }

/* ───────── üst çubuk + bölüm çizgisi */
.ust { position: fixed; inset: 0 0 auto; z-index: 20; display: flex; align-items: center; justify-content: space-between; padding: max(.75rem, env(safe-area-inset-top)) var(--kenar) .6rem; pointer-events: none; transition: opacity .7s, translate .7s; }
.ust > * { pointer-events: auto; }
/* üst çubuğun arkasında pus: altından geçen kartlar düğmelerle karışmasın; aşağı doğru yumuşakça kaybolur.
   (Bulanıklaştırma — backdrop-filter — bilerek yok: hareketli sahnenin üstünde her karede yeniden hesaplanır, telefonu yorar.) */
.ust::before { content: ""; position: absolute; inset: 0 0 -1.4rem; z-index: -1; pointer-events: none; background: linear-gradient(var(--hale) 30%, transparent), linear-gradient(var(--hale) 45%, transparent); }
.imza { font: 600 1.75rem/1 var(--serif); letter-spacing: .02em; text-decoration: none; color: var(--yazi); text-shadow: 0 0 1em var(--hale), 0 0 .35em var(--hale); }
.imza i { margin: 0 .1em; font-weight: 400; color: var(--vurgu); }
.rakim { position: absolute; left: 50%; translate: -50% 0; display: flex; align-items: center; gap: .5rem; margin: 0; font: 500 .72rem/1 var(--sans); letter-spacing: .24em; font-variant-numeric: tabular-nums; text-shadow: 0 0 1em var(--hale); pointer-events: none; }
.rakim svg { width: .9rem; height: .9rem; fill: currentColor; }
@media (max-width: 34rem) { .rakim { display: none; } }      /* dar ekranda yer "Katılım bildir" düğmesinin */
.ust-sag { display: flex; align-items: center; gap: .55rem; }
.yuvarlak { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; padding: 0; border-radius: 50%; color: var(--yazi); background: var(--hale); border: 1px solid var(--yazi); cursor: pointer; }
.yuvarlak svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.yuvarlak .govde { fill: currentColor; }
.yuvarlak[aria-pressed="true"] .carpi, .yuvarlak[aria-pressed="false"] .dalga { display: none; }
/* dil düğmesi: geçilecek dili yazar (Türkçedeyken "EN" / "English") */
.yuvarlak.dil-dugme { font: 500 .74rem/1 var(--sans); letter-spacing: .1em; }
.kapi-dil { position: absolute; top: max(1.7rem, env(safe-area-inset-top)); right: 1.7rem; z-index: 2; min-height: 2.5rem; padding: 0 1rem; font: 500 .74rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--murekkep); background: none; border: 1px solid var(--cerceve); border-radius: .18rem; cursor: pointer; -webkit-tap-highlight-color: transparent; }

.hat { position: fixed; right: max(.5rem, env(safe-area-inset-right)); top: 50%; z-index: 15; translate: 0 -50%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; width: 1.5rem; height: min(44svh, 21rem); transition: opacity .7s; }
.hat::before { content: ""; position: absolute; inset: 0 auto 0 50%; width: 1px; background: var(--yazi); opacity: .45; }
.hat a { position: relative; display: block; width: 1.5rem; height: 1.5rem; }
.hat a::before { content: ""; position: absolute; inset: 50% auto auto 50%; width: .4rem; height: .4rem; translate: -50% -50%; rotate: 45deg; background: var(--yazi); }
.hat a::after { content: attr(data-ad); position: absolute; right: 1.8rem; top: 50%; translate: .4rem -50%; padding: .45rem .7rem; font: 500 .68rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; color: var(--murekkep); background: var(--kagit); border: 1px solid var(--cerceve); opacity: 0; pointer-events: none; transition: opacity .2s, translate .2s; }
.hat a:is(:hover, :focus-visible)::after { opacity: 1; translate: 0 -50%; }
/* bulunduğumuz yer: altın baklava */
.hat i { position: absolute; left: 50%; top: calc(.75rem + var(--p) * (100% - 1.5rem)); width: .78rem; height: .78rem; translate: -50% -50%; rotate: 45deg; background: var(--altin); outline: 1px solid var(--yazi); outline-offset: 3px; pointer-events: none; }
html:not([data-acilis="bitti"]) :is(.ust, .hat, .kaydir) { opacity: 0; pointer-events: none; }
html:not([data-acilis="bitti"]) .ust { translate: 0 -.7rem; }
html:not([data-acilis="bitti"]) .ust > * { pointer-events: none; }

/* ───────── geri sayım */
.sayac { display: flex; margin: 1.7rem 0 0; }
.sayac p { display: grid; justify-items: center; gap: .6rem; margin: 0; padding: 0 clamp(.75rem, 3.6vw, 1.7rem); }
.sayac p:first-child { padding-left: 0; } .sayac p:last-child { padding-right: 0; }
.sayac p + p { border-left: 1px solid var(--vurgu); }
.sayac b { min-width: 1.1em; font: 500 clamp(2.9rem, 13.5vw, 5.4rem)/.85 var(--serif); font-variant-numeric: lining-nums tabular-nums; text-align: center; }
.sayac span { font: 500 .66rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--vurgu); }
.sayac-bitti { font: 500 clamp(2rem, 9vw, 3.4rem)/1.1 var(--serif); }
/* son ekranda, başlığın altında */
.istasyon--son .ust-yazi { margin: 1.6rem 0 1rem; }
.istasyon--son .sayac { margin: 0; }
.istasyon--son .sayac b { font-size: clamp(2.6rem, 12vw, 4.4rem); }

/* ───────── kâğıt kartlar: fildişi kâğıt, içte ince altın çerçeve */
.kagit { position: relative; color: var(--murekkep); background: var(--kagit); border-radius: .25rem; box-shadow: 0 1.6rem 3.6rem -1.6rem rgb(8 12 40 / .6), 0 0 0 1px rgb(196 164 104 / .4); }
.kagit::after { content: ""; position: absolute; inset: .45rem; border: 1px solid rgb(196 164 104 / .65); border-radius: .1rem; pointer-events: none; }
.harita-kart { margin: 1.6rem 0 0; padding: 1rem; }
/* harita yüklenene kadar kutunun içinde "Harita yükleniyor…" yazar; yüklenince harita üstünü örter */
.harita-kart::before { content: attr(data-bekle); position: absolute; inset: 1rem; display: grid; place-items: center; font: 500 .74rem/1 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--soluk); background: #f4eee0; }
.harita { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; border: 0; }

/* ───────── program */
.tarife { display: grid; margin: 1.7rem 0 0; padding: 1.2rem 2rem; list-style: none; }
.tarife li { display: grid; grid-template-columns: 5.4rem 1fr; gap: 1rem; align-items: baseline; padding: 1.1rem 0; }
.tarife li + li { border-top: 1px solid var(--cizgi); }
.tarife time { font: 600 1.9rem/1 var(--serif); font-variant-numeric: lining-nums tabular-nums; color: var(--bordo); }
.tarife b { font: 500 1rem/1.35 var(--sans); letter-spacing: .15em; text-transform: uppercase; }
html[lang="en"] .tarife li { grid-template-columns: 6.6rem 1fr; }      /* "7:00 PM" daha geniş */
html[lang="en"] .tarife time { font-size: 1.6rem; }

.galeri { display: grid; grid-template-columns: repeat(2, 1fr); gap: .6rem; margin: 1.6rem 0 0; }
.galeri img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .2rem; cursor: zoom-in; box-shadow: 0 1rem 2.4rem -1rem rgb(8 12 40 / .6), 0 0 0 1px rgb(196 164 104 / .5); }
.buyuk { max-width: none; max-height: none; width: 100vw; height: 100dvh; padding: 0; border: 0; background: rgb(8 10 30 / .94); }
.buyuk[open] { display: grid; place-items: center; }
.buyuk::backdrop { background: rgb(8 10 30 / .94); }
.buyuk img { max-width: 94vw; max-height: 92dvh; border-radius: .2rem; }

/* ───────── katılım bildirimi (LCV): büyük yazı, büyük düğmeler — herkes kolayca doldurabilsin */
.bilet { margin: 1.7rem 0 0; }
.bilet-bas { display: grid; justify-items: center; gap: .5rem; margin: 0 1.5rem; padding: 2rem 0 1.35rem; text-align: center; border-bottom: 1px solid var(--cizgi); }
.bilet-bas small { font: 500 .7rem/1.5 var(--sans); letter-spacing: .15em; text-transform: uppercase; text-wrap: balance; color: var(--altin-koyu); }
.bilet-bas b { font: 600 clamp(1.55rem, 6.6vw, 1.95rem)/1.1 var(--serif); }
form { margin: 0; padding: 1.5rem 1.5rem 1.7rem; }
.alan { display: block; min-width: 0; margin: 0 0 1.2rem; padding: 0; border: 0; }
.alan small { display: block; margin: .45rem 0 0; font-size: .9rem; line-height: 1.4; color: var(--soluk); }      /* alanın altındaki açıklama */
.alan > span, .alan > legend, .alan > label[for] { display: block; margin: 0 0 .55rem; padding: 0; font: 500 1.06rem/1.3 var(--sans); color: var(--murekkep); }
input:not([type="radio"], [type="checkbox"], [type="file"]), textarea {
  display: block; width: 100%; padding: 1rem; font: 400 1.15rem/1.3 var(--sans); color: var(--murekkep);
  background: #fff; border: 1.5px solid var(--cerceve); border-radius: .18rem; transition: border-color .2s, box-shadow .2s;
}
textarea { resize: vertical; min-height: 5.4rem; }
::placeholder { color: #a39d93; }
:is(input, textarea):focus-visible { outline: 0; border-color: var(--altin-koyu); box-shadow: 0 0 0 3px rgb(196 164 104 / .3); }
.secenek { display: flex; align-items: center; gap: .8rem; margin: 0 0 .55rem; padding: 1.05rem 1rem; font-size: 1.15rem; background: #fff; border: 1.5px solid var(--cerceve); border-radius: .18rem; cursor: pointer; transition: border-color .2s, background .2s; }
.secenek:has(:checked) { border-color: var(--bordo); background: #fbf2ee; font-weight: 500; }
.secenek input, .onay input { flex: none; width: 1.4rem; height: 1.4rem; margin: 0; accent-color: var(--bordo); }
.onay { display: flex; align-items: flex-start; gap: .7rem; margin: 0 0 1rem; font-size: 1.02rem; cursor: pointer; }
.onay input { margin-top: .12rem; }
/* kişi sayısı: büyük − / + düğmeleri */
.sayici { display: grid; grid-template-columns: 4.2rem 1fr 4.2rem; gap: .6rem; }
.sayici button { min-height: 3.7rem; padding: 0 0 .2rem; font: 500 2.3rem/1 var(--serif); color: var(--murekkep); background: #fbf4e4; border: 1.5px solid var(--cerceve); border-radius: .18rem; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .2s; }
.sayici button:active { background: var(--altin-acik); }
.sayici input { text-align: center; font: 600 1.9rem/1 var(--serif); font-variant-numeric: lining-nums; -moz-appearance: textfield; appearance: textfield; }
.sayici input::-webkit-inner-spin-button, .sayici input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
/* isteğe bağlı alanlar kapalı gelir: form kısa kalsın */
.ek { margin: 0 0 1.3rem; padding: 0 1rem; border: 1px dashed var(--cerceve); border-radius: .18rem; }
.ek summary { padding: 1rem 0; font-size: 1.02rem; line-height: 1.35; color: var(--soluk); cursor: pointer; }
.ek[open] summary { margin-bottom: .4rem; }
#lcv-form:has(input[value="gelmiyorum"]:checked) #kisi-alan { display: none; }
.bal { position: absolute; left: -200vw; width: 1px; height: 1px; opacity: 0; }
form .tus { width: 100%; }
form .yazi-dugme { display: block; margin: 1.1rem auto 0; font-size: 1.02rem; }
.bildirim { margin: 0 0 1.1rem; padding: .85rem 1rem; border-radius: .18rem; font-weight: 500; font-size: .98rem; color: #7d1d2b; background: #fbeceb; border-left: 2px solid #b34a58; }
.bildirim.iyi { color: #2c5a42; background: #edf5ee; border-left-color: #5d9475; }
/* gönderilen bildirimin kartı */
.tesekkur { padding: 2.1rem 1.6rem 1.9rem; text-align: center; }
.tesekkur:focus { outline: 0; }
.damga { display: flex; align-items: center; justify-content: center; gap: .8rem; margin: 0 0 .9rem; font: 500 .72rem/1 var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--altin-koyu); }
.damga::before, .damga::after { content: ""; width: 1.6rem; height: 1px; background: currentColor; }
.tesekkur h3 { font-size: clamp(2rem, 8.4vw, 2.6rem); line-height: 1.05; }
.tesekkur p:not(.damga) { margin: .9rem 0 0; font-size: 1.08rem; }
.tesekkur p.kayit-baslik { margin: 1.1rem 0 0; font-size: .95rem; color: var(--soluk); }
.kayitlar { margin: .2rem 0 0; padding: 0; list-style: none; }
.kayitlar li { padding: .6rem 0; font: 600 1.4rem/1.25 var(--serif); border-bottom: 1px solid var(--cizgi); overflow-wrap: anywhere; }
.tesekkur .tuslar { justify-content: center; margin-top: 1.5rem; }

/* ───────── hediye: hesap kartları */
.hesaplar { display: grid; gap: .9rem; margin: 1.6rem 0 0; }
.hesap { padding: 1.7rem 1.6rem 1.6rem; }
.hesap small { display: block; margin: 0 0 .6rem; font: 500 .7rem/1 var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--altin-koyu); }
.hesap h3 { font-size: 1.7rem; line-height: 1.1; }
.hesap .banka { margin: .3rem 0 .9rem; font-size: .96rem; color: var(--soluk); }
.iban { margin: 0 0 1rem; padding: .8rem .7rem; font: 500 clamp(.72rem, 3.2vw, 1.05rem)/1.35 var(--sans); font-variant-numeric: tabular-nums; letter-spacing: .02em; white-space: nowrap; overflow-x: auto; background: #fff; border: 1px dashed var(--cerceve); border-radius: .18rem; -webkit-user-select: all; user-select: all; }

/* ───────── fotoğraf gönderme ve bulma */
/* gönderim yalnızca düğün günü açık: bölümün durumuna (data-foto) uymayan parçalar gizlenir */
#ani[data-foto="once"] [data-gor]:not([data-gor~="once"]), #ani[data-foto="acik"] [data-gor]:not([data-gor~="acik"]), #ani[data-foto="sonra"] [data-gor]:not([data-gor~="sonra"]) { display: none; }
.ani { margin-top: 1.6rem; }
.ani .tesekkur h3 { font-size: clamp(1.6rem, 6.6vw, 2rem); line-height: 1.18; text-wrap: balance; }      /* "düğün günü açılacaktır": uzun cümle, biraz küçük */
.birak { display: grid; justify-items: center; gap: .3rem; margin: 0 0 1.2rem; padding: 1.8rem 1rem; text-align: center; background: #fff; border: 1px dashed var(--altin); border-radius: .18rem; cursor: pointer; transition: border-color .2s, background .2s; }
.birak b { font: 600 1.5rem/1.2 var(--serif); } .birak span { font-size: .95rem; color: var(--soluk); }
.birak:is(.uzerinde, :focus-within, :hover) { border-color: var(--bordo); background: #fbf4e4; }
.onizleme { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5rem; margin: 0 0 1.2rem; }
.onizleme:empty { display: none; }
.onizleme figure { position: relative; margin: 0; aspect-ratio: 1; overflow: hidden; border-radius: .15rem; background: #efe6d3; }
.onizleme img { width: 100%; height: 100%; object-fit: cover; }
.onizleme button { position: absolute; top: .3rem; right: .3rem; width: 1.7rem; height: 1.7rem; padding: 0; border: 0; border-radius: 50%; font: 500 1.1rem/1 var(--sans); color: #fff; background: rgb(26 34 56 / .8); cursor: pointer; }
.kucuk { margin: 1rem 0 0; font-size: .9rem; line-height: 1.45; color: var(--soluk); }
.bul { margin: 1rem 0 0; padding: 1.9rem 1.5rem 1.6rem; }
.bul h3 { font-size: 1.8rem; line-height: 1.1; }
.bul > p:not(.kucuk, .bildirim) { margin: .5rem 0 1.2rem; font-size: 1.06rem; }
.bul .tus { width: 100%; }
.bul .bildirim { margin: 1rem 0 0; }
.bul .galeri { margin-top: 1rem; }
.bul .galeri:empty { display: none; }
.bul .galeri img { aspect-ratio: 1; box-shadow: none; }

/* ───────── dilekler */
.dilek-liste { display: grid; gap: .9rem; margin: 1.7rem 0 0; text-align: left; }
.dilek { margin: 0; padding: 1.4rem 1.5rem 1.3rem; color: var(--fildisi); background: rgb(11 17 46 / .66); border: 1px solid rgb(230 210 162 / .5); border-radius: .2rem; }
.dilek p { margin: 0 0 .8rem; font: italic 500 1.35rem/1.4 var(--serif); white-space: pre-line; overflow-wrap: anywhere; }
.dilek cite { font: 500 .7rem/1.4 var(--sans); letter-spacing: .26em; font-style: normal; text-transform: uppercase; color: var(--altin-acik); }
.dilek cite::before { content: "— "; }
.balon { position: fixed; z-index: 30; max-width: min(21rem, 84vw); padding: 1.1rem 1.25rem 1rem; translate: -50% calc(-100% - 1rem); font: italic 500 1.25rem/1.38 var(--serif); color: var(--murekkep); background: var(--kagit); border: 1px solid var(--altin); border-radius: .2rem; box-shadow: 0 1.2rem 2.6rem -1rem rgb(0 0 0 / .6); pointer-events: none; animation: balon .45s cubic-bezier(.2, .8, .2, 1) both; }
.balon.alt { translate: -50% 1.2rem; }
.balon b { display: block; margin-top: .6rem; font: 500 .68rem/1.3 var(--sans); letter-spacing: .24em; font-style: normal; text-transform: uppercase; color: var(--altin-koyu); }
@keyframes balon { from { opacity: 0; } }
.kunye { margin: 1.9rem 0 0; font-size: .95rem; text-wrap: balance; }
.baglantilar { display: flex; flex-wrap: wrap; gap: .1rem 1.6rem; margin: .7rem 0 0; }

/* ───────── açılış: fildişi bir davetiye kartı, ortalanmış */
.kapi { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 4.6rem 2rem 2.6rem; overflow-y: auto; text-align: center; color: var(--murekkep); background: radial-gradient(120% 80% at 50% 0%, #fffefb, #fbf5e9 55%, #f3e8d2); transition: opacity 1.2s ease, visibility 1.2s; }
/* çift ince altın çerçeve */
.kapi::before { content: ""; position: fixed; inset: .8rem; border: 1px solid var(--altin); outline: 1px solid rgb(196 164 104 / .5); outline-offset: -.4rem; pointer-events: none; }
.kapi::after { content: ""; position: fixed; inset: 0; opacity: .5; pointer-events: none; background: 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='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .5 0 0 0 0 .4 0 0 0 0 .25 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kapi[data-durum="aciliyor"] { opacity: 0; visibility: hidden; pointer-events: none; }
.kapi-ic { position: relative; z-index: 1; width: min(48rem, 100%); }
.kapi .ust-yazi { justify-content: center; margin-bottom: 1.5rem; color: var(--altin-koyu); }
.kapi-sayin { margin: 0 0 .5rem; font: italic 600 clamp(1.25rem, 5.2vw, 1.6rem)/1.25 var(--serif); }
.kapi-adlar { margin: 0; font: 500 clamp(3.1rem, 14.5vw, 6.6rem)/.98 var(--serif); letter-spacing: -.012em; }
.kapi-adlar i { display: block; margin: .02em 0 .06em; font-size: .82em; font-weight: 400; line-height: .9; color: var(--altin); }
.kapi-adlar::after { content: ""; display: block; width: 8.5rem; height: .7rem; margin: 1.5rem auto 0; background: var(--altin); -webkit-mask: var(--susu) center / 100% 100% no-repeat; mask: var(--susu) center / 100% 100% no-repeat; }
.kapi-tarih { margin: 1.3rem 0 0; font: 600 clamp(1.25rem, 5vw, 1.6rem)/1.45 var(--serif); }
.kapi-tuslar { display: grid; justify-items: center; gap: 1.5rem; margin-top: 2.1rem; }
.muhur { display: grid; justify-items: center; gap: 1rem; padding: 0; border: 0; background: none; color: var(--murekkep); cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* mum mühür: bordo mum, altın yaldızlı harfler */
.muhur-mum { display: flex; align-items: center; justify-content: center; width: 6.1rem; height: 6.1rem; font: 600 1.75rem/1 var(--serif); letter-spacing: .01em; color: var(--altin-acik);
  border-radius: 47% 53% 50% 50% / 52% 47% 53% 48%; background: radial-gradient(circle at 34% 28%, #a03a4e, var(--bordo) 52%, #47111f);
  box-shadow: inset 0 0 0 .36rem rgb(71 17 31 / .55), inset 0 0 0 .44rem rgb(230 210 162 / .28), inset 0 .5rem .9rem rgb(255 255 255 / .16), 0 .9rem 1.7rem -.5rem rgb(71 17 31 / .65);
  text-shadow: 0 -1px 0 rgb(50 10 20 / .8), 0 1px 0 rgb(255 255 255 / .18); transition: scale .35s cubic-bezier(.2, .8, .2, 1); animation: nabiz 3.2s ease-in-out infinite; }
.muhur-mum i { margin: 0 .08em; font-size: .78em; font-weight: 400; }
@keyframes nabiz { 50% { box-shadow: inset 0 0 0 .36rem rgb(71 17 31 / .55), inset 0 0 0 .44rem rgb(230 210 162 / .28), inset 0 .5rem .9rem rgb(255 255 255 / .16), 0 .9rem 1.7rem -.5rem rgb(71 17 31 / .65), 0 0 0 .8rem rgb(196 164 104 / .16); } }
.muhur:hover .muhur-mum { scale: 1.05; }
.muhur:active .muhur-mum { scale: .96; }
.muhur-yazi { padding-bottom: .4rem; font: 500 .84rem/1 var(--sans); letter-spacing: .28em; text-transform: uppercase; border-bottom: 1px solid var(--altin); }
.kapi-tuslar .tus { min-width: min(17rem, 100%); }
.kapi-not { margin: 1.5rem 0 0; font: italic 500 1.12rem/1.4 var(--serif); color: var(--soluk); }
html[data-hizli] :is(.kapi, .beliren, .ust, .hat) { transition: none; }
html[data-hizli] { scroll-behavior: auto; }
html[data-hizli="og"] :is(.ust, .hat, .kaydir, .giris, .tuslar) { display: none; }   /* ?hizli&og: paylaşım görseli (og.jpg) çekimi */

/* ───────── telefon: başlıklar ortalı, kartların içi sola dayalı */
@media (max-width: 47.99rem) {
  .metin { text-align: center; }
  .ust-yazi, .tuslar, .sayac, .aileler, .baglantilar { justify-content: center; }
  .istasyon h2::after, .giris, .not { margin-inline: auto; }
  .kagit { text-align: left; }
  .aileler p, .aileler p:first-child { flex: 1 1 0; padding: .1rem .5rem; }      /* iki eşit sütun; anne ve baba adı alt alta */
  .aileler span { display: block; }
  .aileler i { display: none; }
  .kaydir { display: none; }      /* telefonda yer yok; "aşağı kaydırın" zaten metinde yazıyor */
  /* giriş ekranı: tek büyük düğme; "Yol tarifi" küçük bir bağlantı olur, altta sahneye yer kalır */
  .istasyon--zirve .tuslar { gap: .3rem; margin-top: 1.5rem; }
  .istasyon--zirve .tuslar .tus--ikincil { flex: 0 0 auto; min-height: 2.6rem; padding: 0 .4rem; font: 500 1rem/1.3 var(--sans); letter-spacing: .04em; text-transform: none; color: inherit; background: none; box-shadow: none; text-decoration: underline 1px var(--vurgu); text-underline-offset: .4em; text-shadow: 0 0 1.1em var(--hale), 0 0 .3em var(--hale); }
  .tuslar .tus { flex: 1 1 100%; }      /* düğmeler alt alta, aynı genişlikte */
  h1 { font-size: clamp(3.3rem, 15.5vw, 6rem); }
  .cift .ve { display: block; margin: .04em 0 .08em; font-size: .8em; line-height: .9; }      /* isimler üç satır: Melek / & / Can Eren */
}
/* kısa ekran: açılış kartı sığsın */
@media (max-height: 44rem) {
  .kapi { padding-top: 4rem; }
  .kapi-adlar { font-size: clamp(2.6rem, 12vw, 5rem); }
  .kapi-adlar::after { margin-top: 1rem; }
  .muhur-mum { width: 5rem; height: 5rem; font-size: 1.45rem; }
  .kapi-tuslar { gap: 1.1rem; margin-top: 1.4rem; }
  .kapi-not { margin-top: 1rem; }
}
/* ───────── geniş ekran */
@media (min-width: 48rem) {
  .kapi-ic { width: min(62rem, 100%); }
  .kapi-adlar { font-size: min(6.6rem, 9.5vw); white-space: nowrap; }
  .kapi-adlar i { display: inline; margin: 0 .14em; font-size: 1em; }
}
@media (min-width: 60rem) {
  .istasyon { min-height: 140vh; }
  .metin { max-width: 38rem; }
  .galeri { grid-template-columns: repeat(3, 1fr); }
  .hat { right: 1.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .beliren { opacity: 1; translate: none; transition: none; }
  .kaydir::after, .muhur-mum, .balon { animation: none; }
}