/* Çiçek Bahçesi: çiçek desenli astar; zarf açılınca arkasından çiçekler taşar. Kapakta köşe buketli kart. */
:root { --f-display:"Italianno",cursive; --f-body:"Cormorant Garamond",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
body {
  --z-paper:var(--paper); --z-card:var(--paper);
  --z-liner:
    radial-gradient(circle at 25% 30%, color-mix(in srgb, var(--primary) 75%, #fff) 0 5px, transparent 5.5px) 0 0/36px 36px,
    radial-gradient(circle at 25% 30%, #f2c95c 0 2px, transparent 2.5px) 0 0/36px 36px,
    radial-gradient(circle at 72% 72%, color-mix(in srgb, var(--primary) 45%, #fff) 0 4px, transparent 4.5px) 0 0/36px 36px,
    radial-gradient(ellipse 3px 7px at 50% 55%, var(--gold) 90%, transparent) 0 0/36px 36px,
    var(--soft);
  --line:color-mix(in srgb, var(--gold) 40%, transparent);
}
.tpl-cicek .opening { background:radial-gradient(90% 70% at 50% 40%, var(--paper), var(--soft)); }
.names { font-size:clamp(4.4rem,20vw,6.2rem); line-height:.85; }
.names em { color:var(--gold); }
.d-item svg { stroke:var(--primary); }
.c-defs { position:absolute; width:0; height:0; }
.fl { color:var(--primary); overflow:visible; }
.fl.light { color:color-mix(in srgb, var(--primary) 55%, #fff); }

.c-burst { inset:0; z-index:1; }
.c-burst svg { position:absolute; left:50%; top:30%; overflow:visible; transform:translate(-50%,-50%) scale(0); transition:transform 1.1s cubic-bezier(.3,1.4,.5,1); }
.c-burst .fl { width:84px; height:84px; }
.c-burst .lf { width:30px; height:76px; }
.is-stage2 .c-burst .f1 { transform:translate(-205%,-120%) rotate(-20deg) scale(1.05); }
.is-stage2 .c-burst .f2 { transform:translate(-120%,-175%) rotate(15deg) scale(.75); transition-delay:.08s; }
.is-stage2 .c-burst .f3 { transform:translate(110%,-150%) rotate(30deg) scale(1.15); transition-delay:.12s; }
.is-stage2 .c-burst .f4 { transform:translate(190%,-80%) rotate(-10deg) scale(.7); transition-delay:.18s; }
.is-stage2 .c-burst .f5 { transform:translate(-30%,-215%) rotate(40deg) scale(.6); transition-delay:.22s; }
.is-stage2 .c-burst .f6 { transform:translate(-250%,-30%) rotate(10deg) scale(.6); transition-delay:.26s; }
.is-stage2 .c-burst .l1 { transform:translate(-320%,-100%) rotate(-55deg); }
.is-stage2 .c-burst .l2 { transform:translate(220%,-110%) rotate(50deg); transition-delay:.1s; }
.is-stage2 .c-burst .l3 { transform:translate(-80%,-150%) rotate(-15deg); transition-delay:.15s; }
.is-stage2 .c-burst .l4 { transform:translate(330%,-40%) rotate(75deg); transition-delay:.2s; }

.c-sticker { width:70px; height:70px; display:grid; place-items:center; border-radius:50%; background:var(--z-grain), var(--paper);
  box-shadow:0 0 0 1px color-mix(in srgb, var(--gold) 50%, transparent), 0 0 0 5px var(--paper), 0 0 0 6px color-mix(in srgb, var(--primary) 40%, transparent), 0 6px 10px rgb(0 0 0 / .2); }
.c-sticker svg { width:52px; height:52px; color:var(--primary); }

/* Kapak: köşe buketli kart */
.c-frame { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; width:min(100%,380px); margin:30px 0; padding:92px 24px 84px;
  background:var(--z-grain), var(--paper); border:1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline:1px solid color-mix(in srgb, var(--primary) 25%, transparent); outline-offset:-10px; box-shadow:var(--shadow); }
.c-corner { position:absolute; width:150px; height:150px; overflow:visible; pointer-events:none; }
.c-corner.tl { left:4px; top:-24px; }
.c-corner.br { right:4px; bottom:-24px; rotate:180deg; width:124px; height:124px; }
.c-photo { margin:0; width:min(58vw,220px); aspect-ratio:1; border-radius:50%; overflow:hidden; box-shadow:0 0 0 6px var(--soft); }
.c-photo img { width:100%; height:100%; object-fit:cover; }
.is-open .c-corner { animation:bloom 1.4s cubic-bezier(.3,1.3,.5,1) both .3s; }
@keyframes bloom { from { transform:scale(.4) rotate(-20deg); opacity:0; } }
.is-birthday .names em { font:italic 400 .3em/1.5 var(--f-body); }