/* Pasta: şeker serpintili zemin, mum üfleme açılışı, Pacifico isim, rozet yaş. */
:root { --f-display:"Pacifico",cursive; --f-head:"Pacifico",cursive; --f-body:"Nunito",system-ui,sans-serif; --f-ui:"Nunito",system-ui,sans-serif; }
body { --radius:20px; --btn-radius:99px; --line:color-mix(in srgb, var(--primary) 30%, transparent); --shadow:0 12px 30px color-mix(in srgb, var(--primary) 14%, transparent);
  --h2-size:clamp(1.9rem,8vw,2.4rem); font-size:1.05rem; font-weight:600; }
body::before { background:
  linear-gradient(30deg, transparent 47%, color-mix(in srgb, var(--primary) 30%, transparent) 47% 53%, transparent 53%) 0 0/46px 46px,
  linear-gradient(-40deg, transparent 47%, color-mix(in srgb, var(--gold) 45%, transparent) 47% 53%, transparent 53%) 23px 23px/46px 46px,
  var(--bg); opacity:1; }
body::after { content:""; position:fixed; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(180deg, color-mix(in srgb, var(--bg) 55%, transparent), var(--bg) 70%); }
h2 { font-weight:400; color:var(--primary); }
.lead { font-style:normal; font-size:1.12rem; }
.muted { font-style:normal; }
.d-item svg { stroke:var(--primary); stroke-width:1.8; }
.d-item small, .families small, .eyebrow { color:var(--primary); font-weight:800; }
.d-item b { font-weight:800; }
.d-item span { font-style:normal; }
.detail-card, .rsvp form, .thanks { border:2px solid var(--line); position:relative; margin-top:12px; }
.detail-card::before, .rsvp form::before { content:""; position:absolute; left:16px; right:16px; top:-12px; height:12px; background:radial-gradient(circle at 12px 12px, var(--paper) 11px, transparent 12px) 0 0/24px 12px; }
.btn { font:800 1rem var(--f-ui); letter-spacing:.04em; text-transform:none; }
.field input, .field select, .field textarea, .choice span { border-radius:14px; font:600 1rem var(--f-ui); border-width:2px; }

/* Açılış: mumları üfle */
.tpl-pasta .opening { background:radial-gradient(70% 50% at 50% 45%, var(--paper), var(--soft)); transition:opacity .8s var(--ease) 1.9s, visibility 0s 2.7s; }
.blow { width:min(80vw,320px); }
.blow .cake { width:100%; display:block; filter:drop-shadow(0 16px 24px color-mix(in srgb, var(--deep) 18%, transparent)); }
.flame { animation:flicker .18s ease-in-out infinite alternate; transition:opacity .3s, transform .3s; }
.candle:nth-child(2n) .flame { animation-duration:.23s; }
@keyframes flicker { from { transform:scale(1,1) rotate(-2deg); } to { transform:scale(.92,1.08) rotate(2deg); } }
.smoke { opacity:0; }
.is-opening .blow .flame { opacity:0; animation:none; transform:scale(.2,.1); }
.is-opening .blow .smoke { animation:smoke 1.2s ease-out .15s both; }
@keyframes smoke { 0% { opacity:0; transform:translateY(0); } 30% { opacity:.9; } 100% { opacity:0; transform:translateY(-24px) scaleX(1.6); } }
.wish { position:absolute; left:0; right:0; top:16%; z-index:3; margin:0; text-align:center; font:800 1.2rem var(--f-ui); color:var(--deep); opacity:0; transform:scale(.6); transition:opacity .5s, transform .7s cubic-bezier(.3,1.6,.5,1); }
.wish b { font:400 3rem/1.3 var(--f-display); color:var(--primary); }
.is-stage2 .wish { opacity:1; transform:none; }
.is-stage2 .blow { transform:translateY(50px) scale(.9); transition:transform .8s var(--ease); }
.is-opening .tpl-pasta .opening-eyebrow, .tpl-pasta.is-opening .opening-eyebrow { opacity:0; transition:opacity .3s; }

/* Kapak */
.hero { gap:16px; }
.hero-cake { width:min(62vw,240px); }
.hero-cake .cake { width:100%; display:block; }
.cake-photo { width:min(62vw,240px); aspect-ratio:1; margin:0; padding:10px; border-radius:50%; background:repeating-conic-gradient(var(--primary) 0 15deg, var(--paper) 0 30deg); }
.cake-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:5px solid var(--paper); }
.names { font:400 clamp(3.6rem,17vw,5.2rem)/1.3 var(--f-display); color:var(--primary); text-shadow:3px 4px 0 color-mix(in srgb, var(--gold) 55%, transparent); }
.rosette { position:relative; display:grid; place-items:center; width:118px; height:118px; margin-top:-6px; color:#fff;
  background:var(--deep); clip-path:polygon(50% 0,61% 8%,75% 4%,80% 18%,95% 21%,92% 35%,100% 50%,92% 65%,95% 79%,80% 82%,75% 96%,61% 92%,50% 100%,39% 92%,25% 96%,20% 82%,5% 79%,8% 65%,0 50%,8% 35%,5% 21%,20% 18%,25% 4%,39% 8%); }
.rosette b { font:800 2.8rem/1 var(--f-ui); margin-top:6px; }
.rosette span { position:absolute; bottom:26px; font:800 .72rem var(--f-ui); letter-spacing:.1em; text-transform:uppercase; }
.is-open .rosette { animation:spinin 1s cubic-bezier(.3,1.5,.5,1) both .3s; }
@keyframes spinin { from { transform:rotate(-120deg) scale(.3); opacity:0; } }
.date-line { font:800 .85rem/1.8 var(--f-ui); color:var(--deep); }
.date-line span + span::before { content:"●"; color:var(--primary); }

.cd div { border-radius:20px; aspect-ratio:auto; padding:14px 0; border:2px solid var(--line); box-shadow:0 6px 0 color-mix(in srgb, var(--primary) 18%, transparent); }
.cd b { font:800 clamp(1.6rem,7vw,2.1rem)/1 var(--f-ui); }
.amp { color:var(--primary); font-family:var(--f-display); }
.sign { font-style:normal; }
.sign b { font-size:2.4rem; line-height:1.5; }
.note p { border:2px dashed var(--line); border-radius:20px; font-style:normal; }