/* Yıldızlı Gece: koyu gökyüzü, parlayan ay, takımyıldız çizgileri, ışıltılı el yazısı. */
:root { --f-display:"Pinyon Script",cursive; --f-head:"Pinyon Script",cursive; --f-body:"Cormorant Garamond",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
body { --on-primary:var(--deep); --field:color-mix(in srgb, var(--paper) 75%, #fff 8%); --line:color-mix(in srgb, var(--gold) 40%, transparent);
  --muted:color-mix(in srgb, var(--ink) 70%, var(--bg)); --shadow:0 20px 50px rgb(0 0 0 / .4); --radius:16px; }
body::before { background:
  radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent), radial-gradient(1px 1px at 28% 62%, #fff 50%, transparent),
  radial-gradient(1.5px 1.5px at 44% 30%, #fff 50%, transparent), radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent),
  radial-gradient(2px 2px at 78% 44%, color-mix(in srgb, var(--gold) 80%, #fff) 50%, transparent), radial-gradient(1px 1px at 88% 78%, #fff 50%, transparent),
  radial-gradient(1.5px 1.5px at 8% 86%, #fff 50%, transparent), radial-gradient(1px 1px at 52% 92%, #fff 50%, transparent),
  radial-gradient(1px 1px at 35% 8%, #fff 50%, transparent), radial-gradient(1.5px 1.5px at 94% 22%, #fff 50%, transparent),
  radial-gradient(90% 60% at 50% 0%, var(--soft), transparent 70%),
  linear-gradient(180deg, var(--bg), var(--deep));
  background-size:auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto, auto; }
h2 { color:var(--gold); text-shadow:0 0 18px color-mix(in srgb, var(--gold) 45%, transparent); }
.btn:hover { background:var(--ink); border-color:var(--ink); color:var(--deep); }
.btn.ghost { color:var(--gold); border-color:color-mix(in srgb, var(--gold) 60%, transparent); }
.detail-card, .rsvp form, .thanks { background:color-mix(in srgb, var(--paper) 70%, transparent); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); }
.field input, .field select, .field textarea, .choice span { border-color:color-mix(in srgb, var(--ink) 25%, transparent); }
.choice input:checked + span { color:var(--deep); }
.form-error { background:#3a1630; color:#ffd5e4; }
.d-item b { color:var(--ink); }

/* Açılış: ay doğar */
.tpl-gece .opening { background:linear-gradient(180deg, var(--deep), var(--bg) 60%, var(--soft)); transition:opacity 1s var(--ease) 1.3s, visibility 0s 2.5s; }
.sky { position:absolute; inset:0; background:inherit; }
.sky::before, .sky::after { content:""; position:absolute; inset:0; background:
  radial-gradient(1.5px 1.5px at 10% 20%, #fff 50%, transparent), radial-gradient(1px 1px at 30% 50%, #fff 50%, transparent),
  radial-gradient(2px 2px at 50% 12%, #fff 50%, transparent), radial-gradient(1px 1px at 70% 40%, #fff 50%, transparent),
  radial-gradient(1.5px 1.5px at 85% 15%, #fff 50%, transparent), radial-gradient(1px 1px at 20% 75%, #fff 50%, transparent),
  radial-gradient(1.5px 1.5px at 62% 70%, #fff 50%, transparent), radial-gradient(1px 1px at 92% 60%, #fff 50%, transparent);
  animation:tw 3s ease-in-out infinite alternate; }
.sky::after { transform:translate(13%, 9%); animation-delay:1.5s; opacity:.7; }
@keyframes tw { from { opacity:.25; } to { opacity:1; } }
.shoot { position:absolute; top:14%; left:-20%; width:120px; height:2px; background:linear-gradient(90deg, transparent, #fff); rotate:18deg; opacity:0; }
.is-opening .shoot { animation:shoot 1.1s ease-in .2s; }
@keyframes shoot { 0% { opacity:0; transform:translateX(0); } 20% { opacity:1; } 100% { opacity:0; transform:translateX(130vw); } }
.moonbtn { z-index:2; display:grid; justify-items:center; gap:22px; }
.moon { width:120px; height:120px; border-radius:50%; background:radial-gradient(circle at 38% 35%, #fff, color-mix(in srgb, var(--gold) 70%, #fff) 45%, var(--gold));
  box-shadow:0 0 30px color-mix(in srgb, var(--gold) 60%, transparent), 0 0 90px color-mix(in srgb, var(--gold) 30%, transparent);
  -webkit-mask:radial-gradient(circle at 72% 36%, transparent 40%, #000 41%); mask:radial-gradient(circle at 72% 36%, transparent 40%, #000 41%);
  transition:transform 1.4s var(--ease), -webkit-mask-position 1s, filter 1s; translate:0 40px; }
.moonbtn b { font:400 2.6rem/1.2 var(--f-display); color:var(--ink); text-shadow:0 0 14px color-mix(in srgb, var(--gold) 50%, transparent); transition:opacity .6s; }
.tpl-gece .opening-eyebrow { color:var(--gold); }
.tpl-gece .opening-hint { color:color-mix(in srgb, var(--ink) 70%, transparent); }
.is-opening .moon { transform:translateY(-90px) scale(1.5); -webkit-mask:none; mask:none; filter:brightness(1.15); }
.is-opening .moonbtn b { opacity:0; }

/* Kapak */
.hero { gap:18px; }
.night { width:min(84vw,330px); color:var(--gold); }
.night svg { width:100%; display:block; overflow:visible; }
.crescent { filter:drop-shadow(0 0 10px color-mix(in srgb, var(--gold) 70%, transparent)); }
.is-open .const path { stroke-dasharray:420; animation:draw 2.6s var(--ease) both .4s; }
@keyframes draw { from { stroke-dashoffset:420; } }
.is-open .night circle { animation:tw 2.4s ease-in-out infinite alternate; }
.is-open .night circle:nth-child(2n) { animation-delay:1.2s; }
.moon-photo { width:min(60vw,220px); aspect-ratio:1; margin:0; border-radius:50%; padding:6px; background:conic-gradient(from 200deg, var(--gold), transparent 60%, var(--gold)); }
.moon-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.names { font:400 clamp(3.6rem,16vw,5.2rem)/1.05 var(--f-display); color:var(--ink); text-shadow:0 0 22px color-mix(in srgb, var(--gold) 45%, transparent); }
.names em { color:var(--gold); text-shadow:none; }
.date-line { color:var(--ink); }

.cd div { background:color-mix(in srgb, var(--paper) 70%, transparent); box-shadow:0 0 18px color-mix(in srgb, var(--gold) 20%, transparent); border-color:var(--line); }
.cd b { color:var(--gold); }
.amp { color:var(--gold); }
.sign b { color:var(--ink); text-shadow:0 0 18px color-mix(in srgb, var(--gold) 45%, transparent); }
.scroll-cue { border-color:var(--gold); } .scroll-cue span { background:var(--gold); }
.credit { color:color-mix(in srgb, var(--ink) 55%, transparent); }