/* Sevimli Mektup: puantiyeli renkli zarf, yuvarlak kapak, çıkartmalar; kart zıplayarak çıkar. Kapakta tırtıllı kenarlı parti kartı. */
:root { --f-display:"Fredoka",system-ui,sans-serif; --f-head:"Fredoka",system-ui,sans-serif; --f-body:"Nunito",system-ui,sans-serif; --f-ui:"Nunito",system-ui,sans-serif; }
body {
  --z-paper:var(--primary); --z-card:var(--paper); --z-r:14px; --radius:18px; --btn-radius:99px;
  --z-flap:ellipse(64% 100% at 50% 0); --z-flap-h:60%;
  --z-liner:repeating-linear-gradient(135deg, var(--gold) 0 12px, var(--paper) 12px 18px, var(--deep) 18px 30px, var(--paper) 30px 36px);
  --dots:radial-gradient(circle, rgb(255 255 255 / .35) 0 3px, transparent 3.5px) 0 0/22px 22px;
  --h2-size:clamp(1.9rem,8vw,2.4rem); --line:color-mix(in srgb, var(--primary) 30%, transparent); font-size:1.05rem;
}
h2 { font-weight:700; }
.lead, .muted { font-style:normal; }
.tpl-pul .opening { background:var(--dots), linear-gradient(180deg, var(--soft), var(--bg)); background-size:28px 28px, auto; }
.tpl-pul .opening-eyebrow { font:700 .9rem var(--f-display); letter-spacing:.14em; }
.tpl-pul .opening-hint { font:700 1rem var(--f-display); color:var(--deep); }
.btn { font:700 1rem var(--f-display); letter-spacing:.04em; text-transform:none; }
.cd div { border-radius:18px; box-shadow:0 6px 0 color-mix(in srgb, var(--primary) 30%, transparent); }
.cd div:nth-child(2) { rotate:3deg; } .cd div:nth-child(3) { rotate:-3deg; }
.cd b { font-family:var(--f-display); font-weight:700; }
.detail-card, .rsvp form, .thanks { border-width:2px; border-style:dashed; border-color:color-mix(in srgb, var(--primary) 45%, transparent); }
.d-item small, .families small { color:var(--primary); font-weight:700; }
.d-item svg { stroke:var(--primary); stroke-width:1.8; }
.field input, .field select, .field textarea, .choice span { font:600 1.02rem var(--f-ui); }

.z-pocket { background:var(--z-folds), var(--dots), var(--z-paper); background-size:100% 100%, 22px 22px, auto; }
.z-flap > i { background:var(--dots), color-mix(in srgb, var(--primary) 88%, #000); background-size:22px 22px, auto; }
.z-letter { transition:transform 1s cubic-bezier(.3,1.6,.5,1); border-radius:12px; }
.z-letter small { color:var(--primary); font-weight:700; }
.z-letter b { font:700 clamp(1.5rem,7vw,2rem)/1.05 var(--f-display); color:var(--deep); }
.z-letter em { font:600 .76rem/1.4 var(--f-ui); font-style:normal; color:var(--primary); }

.p-st { z-index:4; transition:transform .45s cubic-bezier(.4,-.6,.6,1), opacity .4s; filter:drop-shadow(0 2px 2px rgb(0 0 0 / .2)); }
.p-st.heart { left:9%; top:62%; width:42px; height:38px; rotate:-14deg; background:#ff4f7b;
  clip-path:path("M21 37C8 28 0 20 0 11 0 4 5 0 11 0c4 0 8 2 10 6 2-4 6-6 10-6 6 0 11 4 11 11 0 9-8 17-21 26z"); }
.p-st.star2 { right:10%; top:66%; width:40px; height:40px; rotate:12deg; background:#fff;
  clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.p-st.rainbow { left:68%; top:82%; width:62px; rotate:-8deg; }
.p-st.rainbow svg { display:block; width:100%; }
.p-st.dot { left:22%; top:84%; width:22px; height:22px; border-radius:50%; background:var(--gold); box-shadow:inset 0 0 0 4px #fff; }
.is-opening .p-st { transform:scale(1.4) translateY(-30px); opacity:0; }
.is-opening .p-st:nth-of-type(odd) { transition-delay:.1s; }
.p-star { width:78px; height:78px; display:grid; place-items:center; top:56% !important; background:var(--gold);
  clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); filter:drop-shadow(0 3px 0 rgb(0 0 0 / .15)); }
.p-star b { font:700 1.5rem/1 var(--f-display); color:var(--deep); padding-top:6px; }

/* Kapak: tırtıllı kenarlı parti kartı */
.p-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; width:min(100%,370px); padding:56px 22px 52px; background:var(--paper);
  -webkit-mask:radial-gradient(11px at 50% 11px, #000 98%, #0000) 50% 0/22px 22px repeat-x, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, radial-gradient(11px at 50% calc(100% - 11px), #000 98%, #0000) 50% 100%/22px 22px repeat-x;
          mask:radial-gradient(11px at 50% 11px, #000 98%, #0000) 50% 0/22px 22px repeat-x, linear-gradient(#000 0 0) 0 11px/100% calc(100% - 22px) no-repeat, radial-gradient(11px at 50% calc(100% - 11px), #000 98%, #0000) 50% 100%/22px 22px repeat-x;
  box-shadow:inset 0 0 0 10px color-mix(in srgb, var(--soft) 70%, transparent); }
.hero { filter:drop-shadow(0 14px 22px color-mix(in srgb, var(--deep) 16%, transparent)); }
.p-deco { position:absolute; width:26px; height:26px; background:var(--gold); clip-path:polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.p-deco.s1 { left:18px; top:34px; rotate:-12deg; }
.p-deco.s2 { right:22px; top:46px; width:18px; height:18px; background:var(--primary); border-radius:50%; clip-path:none; }
.p-deco.s3 { left:26px; bottom:44px; width:16px; height:16px; background:var(--deep); border-radius:50%; clip-path:none; }
.p-deco.s4 { right:20px; bottom:36px; rotate:16deg; background:var(--primary); }
.eyebrow { color:var(--primary); font:700 .82rem/1.5 var(--f-display); letter-spacing:.12em; }
.p-photo { margin:0; width:min(52vw,200px); aspect-ratio:1; border-radius:50%; overflow:hidden; border:6px solid var(--gold); outline:3px dashed var(--primary); outline-offset:5px; }
.p-photo img { width:100%; height:100%; object-fit:cover; }
.p-age { position:relative; display:grid; place-items:center; width:132px; aspect-ratio:1; border-radius:50%; background:var(--primary); color:#fff; box-shadow:0 8px 0 var(--deep); rotate:-6deg; }
.p-age b { font:700 4.6rem/.9 var(--f-display); }
.p-age span { position:absolute; bottom:14px; font:700 .8rem var(--f-display); letter-spacing:.2em; text-transform:uppercase; }
.is-open .p-age { animation:boing 1s cubic-bezier(.3,1.8,.5,1) both .3s; }
@keyframes boing { from { transform:scale(.3); } }
.names { font:700 clamp(2.8rem,13vw,3.8rem)/1 var(--f-display); color:var(--deep); }
.names em { font:700 .36em/1.5 var(--f-ui); color:var(--primary); font-style:normal; }
.date-line { font:700 .8rem/1.8 var(--f-ui); letter-spacing:.1em; }
.p-age ~ .names em { display:none; }