/* Kurdeleli Zarf: saten kurdele ve fiyonk; çözülünce zarf açılır. Kapakta kırlangıç kuyruklu kurdele başlık. */
:root { --f-display:"Corinthia",cursive; --f-body:"Cormorant Garamond",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
body {
  --z-paper:color-mix(in srgb, var(--soft) 65%, var(--paper)); --z-flap-delay:.95s;
  --z-liner:radial-gradient(circle, color-mix(in srgb, var(--paper) 80%, transparent) 0 1.8px, transparent 2.2px) 0 0/14px 14px,
    repeating-linear-gradient(90deg, var(--primary) 0 9px, color-mix(in srgb, var(--primary) 78%, #fff) 9px 18px);
  --satin-v:linear-gradient(90deg, var(--deep), var(--primary) 22%, color-mix(in srgb, var(--primary) 45%, #fff) 48%, var(--primary) 72%, var(--deep));
  --satin-h:linear-gradient(180deg, var(--deep), var(--primary) 22%, color-mix(in srgb, var(--primary) 45%, #fff) 48%, var(--primary) 72%, var(--deep));
}
.tpl-kurdele .opening { background:radial-gradient(90% 70% at 50% 40%, var(--paper), var(--soft)); }
.names { font-size:clamp(4rem,18vw,5.8rem); line-height:.9; }
.detail-card { border-top:4px solid var(--primary); }

.zarf .k-bow { top:57% !important; }
.k-rib { z-index:4; box-shadow:0 1px 3px rgb(0 0 0 / .25); transition:transform .7s cubic-bezier(.6,0,.4,1) .3s, opacity .5s .45s; }
.k-v { left:46%; width:8%; top:0; bottom:0; background:var(--satin-v); }
.k-h { left:0; right:0; top:52%; height:11%; background:var(--satin-h); }
.is-opening .k-v { transform:translateY(105%); opacity:0; }
.is-opening .k-h { transform:translateX(-105%); opacity:0; }

.k-bow { width:132px; height:96px; filter:drop-shadow(0 5px 6px rgb(0 0 0 / .25)); }
.k-bow > * { position:absolute; display:block; }
.k-bow .lp { top:12px; width:62px; height:44px; background:radial-gradient(60% 70% at 50% 50%, var(--deep) 0 30%, var(--primary) 52%, color-mix(in srgb, var(--primary) 55%, #fff) 78%, var(--primary)); border-radius:50% 46% 46% 50% / 60% 50% 50% 60%; transition:transform .5s var(--ease), opacity .4s; }
.k-bow .lp.l { left:6px; rotate:-14deg; border-radius:60% 30% 30% 60% / 70% 40% 40% 70%; }
.k-bow .lp.r { right:6px; rotate:14deg; border-radius:30% 60% 60% 30% / 40% 70% 70% 40%; }
.k-bow .tl { top:44px; width:20px; height:52px; background:var(--satin-v); clip-path:polygon(0 0, 100% 0, 100% 100%, 50% 84%, 0 100%); transform-origin:50% 0; transition:transform .6s var(--ease), opacity .5s; }
.k-bow .tl.l { left:46px; rotate:24deg; } .k-bow .tl.r { right:46px; rotate:-24deg; }
.k-bow b { left:50%; top:24px; width:24px; height:26px; translate:-50% 0; border-radius:8px; background:var(--satin-v); box-shadow:inset 0 -3px 5px rgb(0 0 0 / .2); }
.is-opening .zarf .k-bow .lp.l { transform:translate(-30px,-16px) rotate(-50deg) scale(.4); opacity:0; }
.is-opening .zarf .k-bow .lp.r { transform:translate(30px,-16px) rotate(50deg) scale(.4); opacity:0; }
.is-opening .zarf .k-bow .tl { transform:translateY(40px) rotate(0); opacity:0; }
.tpl-kurdele .is-opening .z-seal, .is-opening .k-bow.z-seal { transform:none; opacity:0; transition:opacity .4s .25s; }

/* Kapak */
.k-banner { position:relative; margin:0 0 6px; padding:12px 44px; max-width:min(100%,380px); background:var(--satin-h); color:#fff;
  clip-path:polygon(0 0, 100% 0, 94% 50%, 100% 100%, 0 100%, 6% 50%); filter:drop-shadow(0 4px 5px rgb(0 0 0 / .15)); }
.k-banner span { display:block; font:500 .74rem/1.5 var(--f-ui); letter-spacing:.24em; text-transform:uppercase; text-shadow:0 1px 1px rgb(0 0 0 / .2); }
.k-oval { position:relative; width:min(60vw,230px); aspect-ratio:4/5; margin:30px 0 8px; display:grid; place-items:center; border-radius:50%;
  background:var(--paper); box-shadow:0 0 0 6px var(--paper), 0 0 0 7px var(--primary), 0 0 0 12px var(--paper), 0 0 0 13px color-mix(in srgb, var(--gold) 70%, transparent), var(--shadow); }
.k-oval img { width:100%; height:100%; object-fit:cover; border-radius:50%; }
.k-mono { font:400 clamp(3.8rem,17vw,4.8rem)/1 var(--f-display); color:var(--primary); }
.k-mono i { font-style:normal; font-size:.6em; color:var(--gold); }
.is-birthday .k-mono { font:500 clamp(3.6rem,16vw,4.6rem)/1 var(--f-body); }
.k-mini { position:absolute; top:-50px; left:50%; translate:-50% 0; scale:.75; z-index:2; }
.is-birthday .names em { font-size:.34em; }