/* Tüm şablonların ortak iskeleti. Renkler body üzerindeki değişkenlerden (Templates.cs),
   yazı tipleri ve süslemeler şablonun kendi dosyasından (css/t/*.css) gelir. */
:root {
  --f-display:"Great Vibes",cursive; --f-head:var(--f-display); --f-body:"Cormorant Garamond",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif;
  --ease:cubic-bezier(.22,.7,.2,1);
}
body {
  --on-primary:#fff; --field:#fff; --line:color-mix(in srgb, var(--gold) 45%, transparent); --radius:4px; --btn-radius:99px;
  --muted:color-mix(in srgb, var(--ink) 70%, var(--bg));
  --shadow:0 18px 40px color-mix(in srgb, var(--deep) 9%, transparent);
  --h2-size:clamp(2.4rem,9vw,3.1rem);
}
*,*::before,*::after { box-sizing:border-box; }
html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body {
  margin:0; min-height:100vh; color:var(--ink); font:400 1.2rem/1.6 var(--f-body); background:var(--bg);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
body::before {
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--soft) 70%, transparent), transparent 70%),
    radial-gradient(80% 50% at 100% 100%, color-mix(in srgb, var(--soft) 55%, transparent), transparent 70%);
}
body.is-sealed { overflow:hidden; }
img { display:block; max-width:100%; }
h1,h2,h3 { margin:0; font-weight:500; }
h2 { font:400 var(--h2-size)/1.1 var(--f-head); color:var(--primary); text-align:center; margin-bottom:22px; }
h3 { font:500 1.6rem/1.2 var(--f-body); }
.muted { color:var(--muted); text-align:center; margin:0 0 20px; font-style:italic; }
a { color:var(--primary); }
:focus-visible { outline:2px solid var(--gold); outline-offset:3px; }

.preview-bar { position:sticky; top:0; z-index:60; padding:10px 16px; background:#222; color:#fff; font:500 .85rem/1.4 var(--f-ui); text-align:center; }
.preview-bar a { color:#f3cf86; }

/* ——— Açılış katmanı (şablon içini kendisi çizer) ——— */
.opening {
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:28px; padding:24px;
  background:radial-gradient(90% 70% at 50% 40%, var(--paper), var(--bg)); overflow:hidden;
  transition:opacity .9s var(--ease) 1.5s, visibility 0s 2.4s;
}
.opening-eyebrow,.opening-hint { position:relative; z-index:5; margin:0; font:500 .78rem/1.3 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--primary); text-align:center; }
.opening-hint { letter-spacing:.12em; text-transform:none; font-size:.9rem; color:var(--muted); animation:pulse 2.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity:.45; } }
.open-btn { position:relative; padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; -webkit-tap-highlight-color:transparent; }
.is-opening .opening-hint { animation:none; opacity:0; transition:opacity .3s; }
.is-opening .opening { opacity:0; visibility:hidden; pointer-events:none; }
.is-done .opening { display:none; }

/* ——— Davetiye ——— */
.invite { max-width:560px; margin:0 auto; padding:0 20px calc(40px + env(safe-area-inset-bottom)); }
section { padding:56px 0; }
.reveal { opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.is-in { opacity:1; transform:none; }

.hero { min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:20px; padding:48px 0 70px; text-align:center; position:relative; }
.eyebrow { margin:0; font:500 .76rem/1.6 var(--f-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); max-width:24em; }
.is-open .hero > * { animation:rise 1.2s var(--ease) both; }
.is-open .hero > :nth-child(2) { animation-delay:.12s; } .is-open .hero > :nth-child(3) { animation-delay:.24s; } .is-open .hero > :nth-child(4) { animation-delay:.36s; } .is-open .hero > :nth-child(5) { animation-delay:.5s; } .is-open .hero > :nth-child(6) { animation-delay:.62s; }
@keyframes rise { from { opacity:0; transform:translateY(20px); } }
.names { display:flex; flex-direction:column; align-items:center; font:400 clamp(3.6rem,16vw,5.2rem)/.95 var(--f-display); color:var(--primary); }
.names em { font:italic 400 .42em/1.3 var(--f-body); color:var(--gold); }
.names span { overflow-wrap:anywhere; }
.date-line { display:flex; flex-wrap:wrap; justify-content:center; margin:0; font:500 .82rem/1.8 var(--f-ui); letter-spacing:.2em; text-transform:uppercase; }
.date-line span + span::before { content:"◆"; margin:0 .9em; font-size:.55em; vertical-align:.25em; color:var(--gold); }
.cover-photo { position:relative; width:min(72vw,300px); aspect-ratio:3/4; margin:8px 0 14px; }
.cover-photo img { width:100%; height:100%; object-fit:cover; box-shadow:0 24px 50px color-mix(in srgb, var(--deep) 28%, transparent); }

.scroll-cue { position:absolute; bottom:22px; left:50%; translate:-50% 0; width:26px; height:42px; border:1px solid color-mix(in srgb, var(--primary) 50%, transparent); border-radius:99px; }
.scroll-cue span { position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--primary); animation:cue 1.8s ease-in-out infinite; }
@keyframes cue { 60% { transform:translateY(12px); opacity:0; } 61% { transform:none; opacity:0; } }

.orn { display:block; width:200px; max-width:70%; height:24px; margin:0 auto 24px; color:var(--gold); overflow:visible; }
.message { text-align:center; }
.lead { margin:0 auto; max-width:26em; font-size:1.35rem; line-height:1.7; font-style:italic; }
.families { display:flex; align-items:center; justify-content:center; gap:16px; margin-top:34px; }
.families div { flex:1; display:grid; gap:2px; max-width:240px; }
.families small { font:500 .68rem var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.families b { font-weight:500; font-size:1.15rem; }
.amp { font:400 2.4rem/1 var(--f-display); color:var(--gold); }

.countdown { text-align:center; }
.cd { display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.cd div { aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:0; border-radius:50%; background:var(--paper); border:1px solid var(--line); box-shadow:0 0 0 5px var(--paper), 0 0 0 6px color-mix(in srgb, var(--gold) 30%, transparent); }
.cd b { font:500 clamp(1.5rem,7vw,2.2rem)/1 var(--f-body); color:var(--primary); font-variant-numeric:tabular-nums; }
.cd small { margin-top:4px; font:500 .6rem var(--f-ui); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }

.detail-card { display:grid; gap:0; padding:8px 24px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.d-item { display:flex; gap:16px; align-items:flex-start; padding:18px 0; text-align:left; }
.d-item + .d-item { border-top:1px solid color-mix(in srgb, var(--gold) 28%, transparent); }
.d-item svg { width:26px; height:26px; flex:none; margin-top:4px; fill:none; stroke:var(--gold); stroke-width:1.3; stroke-linecap:round; stroke-linejoin:round; }
.d-item div { display:grid; min-width:0; }
.d-item small { font:500 .66rem var(--f-ui); letter-spacing:.24em; text-transform:uppercase; color:var(--gold); }
.d-item b { font-weight:600; font-size:1.3rem; line-height:1.3; overflow-wrap:anywhere; }
.d-item span { font-style:italic; color:var(--muted); overflow-wrap:anywhere; }

.actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:22px; }
.btn { display:inline-flex; align-items:center; justify-content:center; min-height:50px; padding:0 26px; border:1px solid var(--primary); border-radius:var(--btn-radius); background:var(--primary); color:var(--on-primary); font:500 .85rem var(--f-ui); letter-spacing:.12em; text-transform:uppercase; text-decoration:none; cursor:pointer; transition:background .25s, color .25s, transform .25s, border-color .25s; }
.btn:hover { background:var(--deep); border-color:var(--deep); color:#fff; }
.btn:active { transform:scale(.98); }
.btn.ghost { background:transparent; color:var(--primary); }
.btn.ghost:hover { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.btn.wide { width:100%; }
.btn:disabled { opacity:.6; cursor:wait; }

.g-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.g-grid button { padding:0; border:0; background:none; cursor:zoom-in; overflow:hidden; border-radius:var(--radius); }
.g-grid img { width:100%; aspect-ratio:4/5; object-fit:cover; transition:transform .8s var(--ease); }
.g-grid button:hover img { transform:scale(1.04); }
.g-grid button:nth-child(odd):last-child, .g-grid.one button { grid-column:1/-1; }
.g-grid button:nth-child(odd):last-child img, .g-grid.one img { aspect-ratio:4/3; }

.note p { margin:0; padding:26px 20px; text-align:center; font-style:italic; font-size:1.3rem; border-block:1px solid var(--line); }

.rsvp form, .thanks { display:grid; gap:16px; padding:26px 22px; background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow); }
.field { display:grid; gap:6px; font:500 .8rem var(--f-ui); letter-spacing:.06em; }
.field small { font-weight:400; color:var(--muted); letter-spacing:0; }
.field input, .field select, .field textarea { width:100%; min-height:50px; padding:10px 14px; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius:calc(var(--radius) * .75); background:var(--field); color:var(--ink); font:400 1.12rem var(--f-body); }
.field select option { color:#222; background:#fff; }
.field textarea { resize:vertical; min-height:90px; }
.field input:focus, .field select:focus, .field textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent); }
.choice { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0; padding:0; border:0; min-width:0; }
.choice legend { padding:0; margin-bottom:6px; font:500 .8rem var(--f-ui); letter-spacing:.06em; }
.choice label { position:relative; cursor:pointer; min-width:0; }
.choice input { position:absolute; opacity:0; }
.choice span { display:flex; align-items:center; justify-content:center; min-height:52px; padding:0 8px; border:1px solid color-mix(in srgb, var(--ink) 18%, transparent); border-radius:calc(var(--radius) * .75); background:var(--field); font:500 1.1rem var(--f-body); text-align:center; transition:all .2s; }
.choice input:checked + span { border-color:var(--primary); background:var(--primary); color:var(--on-primary); }
.choice input:focus-visible + span { outline:2px solid var(--gold); outline-offset:2px; }
.if-yes { display:grid; gap:16px; }
.if-yes[hidden] { display:none; }
.hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.form-error { margin:0; padding:10px 14px; border-radius:3px; background:#fdecee; color:#a3223b; font:500 .9rem var(--f-ui); }
.thanks { text-align:center; justify-items:center; }
.thanks[hidden] { display:none; }
.thanks .orn { margin-bottom:0; }
.thanks p { margin:0; font-style:italic; }
.link { border:0; background:none; padding:6px; color:var(--primary); font:500 .82rem var(--f-ui); letter-spacing:.08em; text-decoration:underline; text-underline-offset:4px; cursor:pointer; }

.contact { text-align:center; padding-top:20px; }
.contact .muted { margin-bottom:0; }

.foot { padding:40px 0 30px; text-align:center; }
.sign { margin:0; font-style:italic; }
.sign b { display:block; font:400 2.8rem/1.2 var(--f-display); color:var(--primary); overflow-wrap:anywhere; }
.sign i { font-style:normal; color:var(--gold); font-size:.7em; }
.credit { display:inline-block; margin-top:26px; font:500 .7rem var(--f-ui); letter-spacing:.2em; text-transform:uppercase; color:color-mix(in srgb, var(--ink) 50%, var(--bg)); text-decoration:none; }

.music { position:fixed; right:16px; bottom:calc(16px + env(safe-area-inset-bottom)); z-index:40; width:50px; height:50px; display:grid; place-items:center; border:1px solid var(--line); border-radius:50%; background:var(--paper); color:var(--primary); box-shadow:0 8px 20px color-mix(in srgb, var(--deep) 20%, transparent); cursor:pointer; }
.music svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
.music[aria-pressed="true"] svg { animation:spin 5s linear infinite; }
.music[aria-pressed="false"]::after { content:""; position:absolute; width:28px; height:1.6px; background:currentColor; rotate:-45deg; }
@keyframes spin { to { rotate:360deg; } }

.lightbox { position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:16px; background:rgb(10 5 8 / .92); }
.lightbox[hidden] { display:none; }
.lightbox img { max-width:100%; max-height:88vh; border-radius:3px; }
.lb-close { position:absolute; top:12px; right:12px; width:48px; height:48px; border:0; border-radius:50%; background:rgb(255 255 255 / .12); color:#fff; font-size:1.8rem; line-height:1; cursor:pointer; }

/* Konfeti (balon, pasta, hediye) */
.confetti { position:fixed; inset:0; z-index:55; pointer-events:none; overflow:hidden; }
.confetti i { position:absolute; top:-20px; width:9px; height:14px; border-radius:2px; opacity:.95; animation:fall var(--d,3s) cubic-bezier(.3,.6,.5,1) var(--w,0s) forwards; }
.confetti i:nth-child(3n) { border-radius:50%; width:10px; height:10px; }
@keyframes fall {
  0% { transform:translate3d(0,0,0) rotate(0); }
  100% { transform:translate3d(var(--x,0px),110vh,0) rotate(var(--r,540deg)); opacity:.9; }
}

@media (min-width:700px) {
  .invite { padding-inline:32px; }
  .g-grid { grid-template-columns:repeat(3,1fr); }
  .g-grid button:nth-child(odd):last-child { grid-column:auto; }
  .g-grid button:nth-child(odd):last-child img { aspect-ratio:4/5; }
}
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
  .confetti { display:none; }
}

/* Anı albümü daveti (albüm açıkken) */
.album-cta { text-align:center; }
.album-cta .muted { max-width:26em; margin-inline:auto; }

.rsvp-kvkk { margin:-4px 0 0; font:400 .78rem/1.45 var(--f-ui); color:var(--muted); text-align:center; }
.rsvp-kvkk a { color:inherit; }