/* Balonlar: gökyüzü, bulutlar, uçan balonlar, rengârenk tombul harfler. */
:root { --f-display:"Baloo 2",system-ui,sans-serif; --f-head:"Baloo 2",system-ui,sans-serif; --f-body:"Nunito",system-ui,sans-serif; --f-ui:"Nunito",system-ui,sans-serif; }
body { --radius:26px; --btn-radius:99px; --line:color-mix(in srgb, var(--deep) 18%, transparent); --shadow:0 10px 0 color-mix(in srgb, var(--deep) 12%, transparent);
  --h2-size:clamp(1.9rem,8vw,2.4rem); font-size:1.05rem; font-weight:600; }
body::before { background:linear-gradient(180deg, var(--soft), var(--bg) 45%, var(--bg)); }
h2 { font-weight:800; color:var(--deep); }
.lead { font-style:normal; font-size:1.15rem; font-weight:600; }
.muted { font-style:normal; }
.detail-card, .rsvp form, .thanks { border:3px solid var(--line); }
.d-item svg { stroke:var(--primary); stroke-width:2; }
.d-item small, .families small { color:var(--primary); font-weight:800; }
.d-item b { font-weight:800; }
.d-item span { font-style:normal; }
.btn { font:800 1.05rem var(--f-display); letter-spacing:.02em; text-transform:none; box-shadow:0 6px 0 var(--deep); border:0; }
.btn:hover { background:var(--primary); filter:brightness(1.06); }
.btn:active { transform:translateY(4px); box-shadow:0 2px 0 var(--deep); }
.btn.ghost { background:#fff; color:var(--deep); box-shadow:0 6px 0 var(--line); border:3px solid var(--line); }
.field { font-weight:700; }
.field input, .field select, .field textarea, .choice span { border:3px solid var(--line); border-radius:16px; font:600 1.02rem var(--f-ui); }
.choice input:checked + span { background:var(--primary); border-color:var(--primary); }

/* Açılış: balon demeti uçar */
.tpl-balon .opening { background:linear-gradient(180deg, color-mix(in srgb, var(--soft) 70%, #fff), var(--bg)); transition:opacity .7s var(--ease) 1.2s, visibility 0s 2.2s; }
.cloud { position:absolute; width:150px; height:46px; border-radius:99px; background:#fff; opacity:.9; }
.cloud::before, .cloud::after { content:""; position:absolute; border-radius:50%; background:#fff; }
.cloud::before { width:64px; height:64px; left:24px; top:-30px; }
.cloud::after { width:46px; height:46px; left:76px; top:-20px; }
.cloud.c1 { top:12%; left:-30px; animation:drift 18s linear infinite alternate; }
.cloud.c2 { bottom:16%; right:-40px; scale:.8; animation:drift 22s linear infinite alternate-reverse; }
@keyframes drift { to { transform:translateX(40px); } }
.bunch { width:260px; height:330px; }
.bl { position:absolute; width:78px; transition:transform 1.6s cubic-bezier(.5,0,.6,1); }
.bl svg { display:block; width:100%; }
.bl.b1 { left:10px; top:40px; color:var(--primary); rotate:-14deg; }
.bl.b2 { left:90px; top:0; color:var(--gold); }
.bl.b3 { right:12px; top:36px; color:var(--deep); rotate:14deg; }
.bl.b4 { left:46px; top:96px; color:var(--deep); rotate:-6deg; width:70px; }
.bl.b5 { right:46px; top:92px; color:var(--primary); rotate:8deg; width:70px; }
.bunch .bl { animation:bob 3s ease-in-out infinite alternate; }
.bunch .bl:nth-child(2n) { animation-delay:-1.4s; }
@keyframes bob { to { translate:0 -10px; } }
.sign-card { position:absolute; left:50%; bottom:0; translate:-50% 0; display:grid; gap:2px; padding:14px 22px; border-radius:20px; background:#fff; box-shadow:0 8px 0 color-mix(in srgb, var(--deep) 18%, transparent); rotate:-3deg; white-space:nowrap; transition:transform .8s var(--ease), opacity .6s; }
.sign-card small { font:700 .8rem var(--f-ui); color:var(--muted); }
.sign-card b { font:800 2.2rem/1 var(--f-display); color:var(--primary); }
.tpl-balon .opening-hint { font-weight:700; }
.is-opening .bl.b1 { transform:translate(-40px,-120vh) rotate(-10deg); }
.is-opening .bl.b2 { transform:translate(10px,-130vh); transition-duration:1.9s; }
.is-opening .bl.b3 { transform:translate(50px,-115vh) rotate(10deg); }
.is-opening .bl.b4 { transform:translate(-20px,-140vh); transition-duration:2.1s; }
.is-opening .bl.b5 { transform:translate(30px,-125vh); transition-duration:1.8s; }
.is-opening .sign-card { transform:translateY(40px) scale(.9); opacity:0; }

/* Kapak */
.hero { gap:18px; overflow:hidden; margin-inline:-20px; padding-inline:20px; }
.float { position:absolute; width:62px; pointer-events:none; animation:bob 3.2s ease-in-out infinite alternate; }
.float svg { display:block; width:100%; }
.float.f1 { left:4px; top:10%; color:var(--primary); rotate:-10deg; }
.float.f2 { right:8px; top:18%; color:var(--gold); width:54px; animation-delay:-1s; }
.float.f3 { right:22%; bottom:14%; color:var(--deep); width:44px; animation-delay:-2s; opacity:.85; }
.cloud.c3 { left:-40px; bottom:12%; scale:.9; opacity:.75; z-index:-1; }
.eyebrow { font:800 1rem/1.4 var(--f-display); letter-spacing:.02em; text-transform:none; color:var(--deep); }
.age-balloon { position:relative; display:grid; place-items:center; width:150px; height:180px; border-radius:50% 50% 48% 52% / 56% 56% 44% 44%;
  background:radial-gradient(circle at 34% 28%, color-mix(in srgb, #fff 45%, var(--primary)) 0 12%, var(--primary) 40%, color-mix(in srgb, var(--primary) 80%, #000)); color:#fff; box-shadow:0 14px 0 color-mix(in srgb, var(--deep) 14%, transparent); }
.age-balloon::after { content:""; position:absolute; bottom:-12px; left:50%; translate:-50% 0; border:9px solid transparent; border-bottom:14px solid var(--primary); border-top:0; rotate:180deg; }
.age-balloon b { font:800 5.6rem/1 var(--f-display); margin-top:10px; }
.age-balloon span { position:absolute; bottom:26px; font:800 1rem var(--f-display); opacity:.9; }
.is-open .age-balloon { animation:pop .9s cubic-bezier(.3,1.6,.5,1) both .2s; }
@keyframes pop { from { transform:scale(.3); opacity:0; } }
.bubble-photo { width:min(60vw,220px); aspect-ratio:1; margin:0; padding:8px; border-radius:50%; background:conic-gradient(var(--primary) 0 33%, var(--gold) 0 66%, var(--deep) 0); }
.bubble-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; border:4px solid #fff; }
.names { flex-direction:row; flex-wrap:wrap; justify-content:center; font:800 clamp(3.6rem,17vw,5.4rem)/1 var(--f-display); text-shadow:0 5px 0 color-mix(in srgb, var(--deep) 14%, transparent); }
.names span { display:inline-block; }
.is-open .names span { animation:jump .7s cubic-bezier(.3,1.6,.5,1) both; }
.is-open .names span:nth-child(2) { animation-delay:.06s; } .is-open .names span:nth-child(3) { animation-delay:.12s; } .is-open .names span:nth-child(4) { animation-delay:.18s; } .is-open .names span:nth-child(5) { animation-delay:.24s; } .is-open .names span:nth-child(6) { animation-delay:.3s; }
@keyframes jump { from { transform:translateY(30px) scale(.6); opacity:0; } }
.age-pill { margin:0; padding:6px 18px; border-radius:99px; background:var(--gold); color:var(--ink); font:800 1.1rem var(--f-display); }
.date-pill { display:flex; flex-wrap:wrap; justify-content:center; gap:6px 10px; margin:0; padding:12px 22px; border-radius:22px; background:#fff; box-shadow:0 6px 0 color-mix(in srgb, var(--deep) 12%, transparent); font:700 .95rem var(--f-ui); }
.date-pill b { color:var(--primary); font:800 1.15rem/1.2 var(--f-display); }
.date-pill span { color:var(--muted); }

.cd div { border:0; border-radius:50%; box-shadow:0 6px 0 color-mix(in srgb, var(--deep) 16%, transparent); background:var(--primary); }
.cd div:nth-child(2) { background:var(--gold); } .cd div:nth-child(3) { background:var(--deep); } .cd div:nth-child(4) { background:color-mix(in srgb, var(--primary) 60%, var(--gold)); }
.cd b { font:800 clamp(1.6rem,8vw,2.3rem)/1 var(--f-display); color:#fff; }
.cd small { color:#fff; opacity:.9; font-weight:800; }
.amp { font:800 2rem var(--f-display); color:var(--gold); }
.sign { font-style:normal; }
.sign b { font:800 2.4rem/1.2 var(--f-display); color:var(--primary); }
.note p { border:3px dashed var(--line); border-radius:26px; font-style:normal; font-weight:700; }
.scroll-cue { border:3px solid var(--deep); } .scroll-cue span { background:var(--deep); }
.is-open .hero > .float { animation:bob 3.2s ease-in-out infinite alternate; }
.is-open .hero > .float.f2 { animation-delay:-1s; } .is-open .hero > .float.f3 { animation-delay:-2s; }