/* Hediye Kutusu: çizgili ambalaj, kurdele, hediye etiketi; Abril Fatface ile iddialı başlıklar. */
:root { --f-display:"Abril Fatface",Georgia,serif; --f-head:"Abril Fatface",Georgia,serif; --f-body:"DM Sans",system-ui,sans-serif; --f-ui:"DM Sans",system-ui,sans-serif; }
body { --radius:6px; --btn-radius:6px; --line:color-mix(in srgb, var(--ink) 16%, transparent); --shadow:0 16px 36px color-mix(in srgb, var(--deep) 10%, transparent);
  --h2-size:clamp(1.9rem,8vw,2.5rem); font-size:1.02rem; }
body::before { background:var(--bg); }
h2 { color:var(--ink); }
h2::after { content:""; display:block; width:90px; height:8px; margin:12px auto 0; background:repeating-linear-gradient(-45deg, var(--primary) 0 4px, var(--gold) 4px 8px); border-radius:4px; }
.lead { font-style:normal; font-size:1.1rem; line-height:1.8; }
.muted { font-style:normal; }
.d-item svg { stroke:var(--primary); }
.d-item small, .families small { color:var(--primary); font-weight:700; }
.d-item b { font-weight:700; }
.d-item span { font-style:normal; }
.detail-card, .rsvp form, .thanks { position:relative; overflow:hidden; }
.detail-card::after, .rsvp form::after { content:""; position:absolute; top:14px; right:-34px; width:120px; height:18px; rotate:45deg; background:var(--gold); }
.btn { font-weight:700; letter-spacing:.12em; }
.field input, .field select, .field textarea, .choice span { font:500 1rem var(--f-ui); }

/* Açılış: hediye kutusu */
.tpl-hediye .opening { background:repeating-linear-gradient(-45deg, var(--soft) 0 18px, var(--paper) 18px 36px); transition:opacity .8s var(--ease) 1.2s, visibility 0s 2.3s; }
.rays { position:absolute; left:50%; top:50%; width:160vmax; height:160vmax; translate:-50% -50%; opacity:0; background:repeating-conic-gradient(color-mix(in srgb, var(--gold) 40%, transparent) 0 8deg, transparent 8deg 22deg); transition:opacity .6s; }
.is-opening .rays { opacity:1; animation:rot 6s linear infinite; }
@keyframes rot { to { rotate:360deg; } }
.gift { width:220px; height:230px; }
.gift > span { position:absolute; left:50%; translate:-50% 0; }
.g-box { bottom:0; width:190px; height:150px; border-radius:6px; background:linear-gradient(90deg, transparent 42%, var(--gold) 42% 58%, transparent 58%), var(--primary); box-shadow:inset 0 -18px 30px rgb(0 0 0 / .18), 0 24px 40px color-mix(in srgb, var(--deep) 30%, transparent); display:flex; align-items:flex-end; justify-content:center; padding-bottom:16px; }
.g-name { padding:4px 12px; border-radius:4px; background:var(--paper); color:var(--ink); font:400 1.1rem var(--f-display); rotate:-4deg; box-shadow:0 4px 8px rgb(0 0 0 / .15); white-space:nowrap; }
.g-lid { bottom:146px; width:212px; height:44px; border-radius:6px; background:linear-gradient(90deg, transparent 43%, var(--gold) 43% 57%, transparent 57%), color-mix(in srgb, var(--primary) 88%, #fff); box-shadow:0 6px 10px rgb(0 0 0 / .15); transition:transform 1s cubic-bezier(.5,-.3,.4,1.2) .25s; z-index:2; }
.g-bow { bottom:180px; width:110px; height:56px; z-index:3; transition:transform .45s var(--ease), opacity .4s; }
.g-bow i { position:absolute; bottom:0; width:56px; height:44px; border:9px solid var(--gold); border-radius:50% 50% 50% 50% / 60% 60% 40% 40%; }
.g-bow i:first-child { left:0; rotate:-22deg; } .g-bow i:last-child { right:0; rotate:22deg; }
.g-bow::after { content:""; position:absolute; left:50%; bottom:2px; width:20px; height:20px; translate:-50% 0; border-radius:50%; background:var(--gold); }
.gift:hover .g-bow { transform:rotate(-6deg); }
.is-opening .g-bow { transform:translateY(-40px) scale(.2) rotate(140deg); opacity:0; }
.is-opening .g-lid { transform:translate(60px,-70vh) rotate(60deg); }
.is-stage2 .gift { transform:scale(1.12); transition:transform .8s var(--ease); }

/* Kapak: hediye etiketi */
.hero { gap:0; padding-top:0; }
.wrap-band { position:relative; width:calc(100% + 40px); margin:0 -20px; height:120px; background:repeating-linear-gradient(-45deg, var(--primary) 0 16px, color-mix(in srgb, var(--primary) 82%, #fff) 16px 32px); }
.wrap-band::before { content:""; position:absolute; left:50%; top:0; bottom:-40px; width:26px; translate:-50% 0; background:var(--gold); }
.knot { position:absolute; left:50%; bottom:-30px; width:120px; height:60px; translate:-50% 0; }
.knot i { position:absolute; bottom:6px; width:60px; height:46px; border:10px solid var(--gold); border-radius:50%; background:transparent; }
.knot i:first-child { left:0; rotate:-18deg; } .knot i:last-child { right:0; rotate:18deg; }
.knot::after { content:""; position:absolute; left:50%; bottom:12px; width:26px; height:26px; translate:-50% 0; border-radius:50%; background:var(--gold); box-shadow:0 4px 8px rgb(0 0 0 / .15); }
.tag { position:relative; display:flex; flex-direction:column; align-items:center; gap:16px; width:min(100%,360px); margin-top:58px; padding:58px 22px 30px; background:var(--paper); border-radius:6px; box-shadow:var(--shadow);
  clip-path:polygon(16% 0, 84% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); }
.tag-hole { position:absolute; top:18px; left:50%; width:22px; height:22px; translate:-50% 0; border-radius:50%; background:var(--bg); box-shadow:inset 0 2px 4px rgb(0 0 0 / .2); }
.tag::before { content:""; position:absolute; top:0; left:50%; width:2px; height:20px; translate:-50% 0; background:var(--gold); }
.is-open .tag { animation:swing 1.8s ease-out both .2s; transform-origin:50% 0; }
@keyframes swing { 0% { transform:rotate(8deg); } 30% { transform:rotate(-5deg); } 60% { transform:rotate(2deg); } 100% { transform:none; } }
.eyebrow { color:var(--primary); font-weight:700; }
.tag-photo { width:min(56vw,210px); aspect-ratio:1; margin:0; border:8px solid var(--soft); }
.tag-photo img { width:100%; height:100%; object-fit:cover; }
.names { font:400 clamp(3.2rem,15vw,4.6rem)/1 var(--f-display); color:var(--ink); }
.names em { font:italic 400 .4em/1.4 var(--f-body); color:var(--primary); }
.big-age { display:flex; align-items:center; gap:12px; margin:0; }
.big-age b { font:400 5rem/.9 var(--f-display); color:transparent; -webkit-text-stroke:2px var(--primary); background:repeating-linear-gradient(-45deg, var(--primary) 0 3px, transparent 3px 7px); -webkit-background-clip:text; background-clip:text; }
.big-age span { font:700 .8rem/1.3 var(--f-ui); letter-spacing:.18em; text-transform:uppercase; text-align:left; color:var(--muted); }
.date-line { font:700 .78rem/1.8 var(--f-ui); }
.date-line span + span::before { content:"✦"; color:var(--gold); vertical-align:0; font-size:.8em; }

.cd div { border-radius:6px; aspect-ratio:auto; padding:14px 0; box-shadow:none; border:2px solid var(--ink); background:var(--paper); }
.cd b { font:400 clamp(1.7rem,8vw,2.3rem)/1 var(--f-display); color:var(--primary); }
.amp { font-family:var(--f-display); color:var(--primary); }
.sign { font-style:normal; }
.sign b { font:400 2.3rem/1.3 var(--f-display); color:var(--ink); }
.note p { border:0; background:repeating-linear-gradient(-45deg, var(--soft) 0 10px, transparent 10px 20px); border-radius:6px; font-style:normal; font-weight:500; }