/* Dantel Zarf: dantel kuşak, inci broş, damask astar; kapakta dantel örtü (doily) madalyon. */
:root { --f-display:"Allura",cursive; --f-body:"Cormorant",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif;
  --lace:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='none' stroke='%23fff' stroke-width='1.1'%3E%3Ccircle cx='18' cy='18' r='7'/%3E%3Ccircle cx='18' cy='18' r='2.6'/%3E%3Cpath d='M0 0l36 36M36 0L0 36' stroke-opacity='.5' stroke-width='.5'/%3E%3C/g%3E%3Cg fill='%23fff'%3E%3Cellipse cx='18' cy='8.5' rx='1.7' ry='2.6'/%3E%3Cellipse cx='18' cy='27.5' rx='1.7' ry='2.6'/%3E%3Cellipse cx='8.5' cy='18' rx='2.6' ry='1.7'/%3E%3Cellipse cx='27.5' cy='18' rx='2.6' ry='1.7'/%3E%3Ccircle r='3.2'/%3E%3Ccircle cx='36' r='3.2'/%3E%3Ccircle cy='36' r='3.2'/%3E%3Ccircle cx='36' cy='36' r='3.2'/%3E%3C/g%3E%3C/svg%3E"); }
body {
  --z-paper:var(--soft); --z-card:var(--paper);
  --z-liner:
    radial-gradient(circle, color-mix(in srgb, var(--gold) 70%, transparent) 0 1.6px, transparent 2px) 0 0/16px 16px,
    radial-gradient(ellipse 4px 7px, color-mix(in srgb, var(--paper) 40%, transparent) 70%, transparent 74%) 8px 8px/16px 16px,
    linear-gradient(var(--primary), var(--deep));
  --line:color-mix(in srgb, var(--gold) 45%, transparent);
}
.tpl-dantel .opening { background:radial-gradient(90% 70% at 50% 40%, var(--paper), var(--soft)); }
.detail-card { outline:1px solid color-mix(in srgb, var(--gold) 30%, transparent); outline-offset:-7px; }

/* Zarf: dantel kuşak + inci broş */
.d-band {
  left:-1.5%; right:-1.5%; top:47%; height:24%; z-index:4;
  background:var(--lace) center/18px 18px, linear-gradient(rgb(255 255 255 / .28), rgb(255 255 255 / .38));
  -webkit-mask:radial-gradient(5px at 50% 0, #0000 96%, #000) 50% 0/10px 51% repeat-x, radial-gradient(5px at 50% 100%, #0000 96%, #000) 50% 100%/10px 51% repeat-x;
          mask:radial-gradient(5px at 50% 0, #0000 96%, #000) 50% 0/10px 51% repeat-x, radial-gradient(5px at 50% 100%, #0000 96%, #000) 50% 100%/10px 51% repeat-x;
  filter:drop-shadow(0 1px 1px rgb(0 0 0 / .2));
  transition:transform .5s var(--ease), opacity .45s;
}
.is-opening .d-band { transform:translateY(70%) scaleX(1.06); opacity:0; }
.d-brooch { width:84px; height:84px; top:59% !important; display:grid; place-items:center; filter:drop-shadow(0 6px 8px rgb(0 0 0 / .3)); }
.d-brooch svg { position:absolute; inset:0; width:100%; height:100%; }
.d-brooch > span { position:relative; font:400 2.1rem/1 var(--f-display); color:#f6e4b8; padding-top:.12em; text-shadow:0 1px 2px rgb(0 0 0 / .4); }
.d-brooch i { font-style:normal; font-size:.7em; margin:0 .05em; }

/* Kapak */
.d-lace { width:calc(100% + 40px); margin:-48px -20px 6px; height:46px;
  background:var(--lace) center/18px 18px, color-mix(in srgb, var(--primary) 70%, var(--soft));
  -webkit-mask:radial-gradient(6px at 50% 100%, #0000 96%, #000) 50% 100%/12px 100% repeat-x;
          mask:radial-gradient(6px at 50% 100%, #0000 96%, #000) 50% 100%/12px 100% repeat-x; opacity:.75; }
.doily { position:relative; width:min(72vw,280px); aspect-ratio:1; margin:6px 0 10px; display:grid; place-items:center; filter:drop-shadow(0 18px 26px color-mix(in srgb, var(--deep) 18%, transparent)); }
.doily svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.dl-scallop, .dl-fill { fill:var(--paper); stroke:color-mix(in srgb, var(--gold) 70%, transparent); stroke-width:.6; }
.dl-fill { stroke:none; }
.dl-hole { fill:var(--bg); stroke:color-mix(in srgb, var(--gold) 70%, transparent); stroke-width:.5; }
.dl-dot { fill:var(--gold); opacity:.75; }
.dl-petal { fill:none; stroke:var(--gold); stroke-width:.8; }
.dl-ring { fill:none; stroke:var(--gold); stroke-width:.9; }
.dl-ring.thin { stroke-width:.4; }
.doily img { position:relative; width:57%; aspect-ratio:1; object-fit:cover; border-radius:50%; }
.doily > span { position:relative; font:400 clamp(3.2rem,14vw,4.2rem)/1 var(--f-display); color:var(--primary); padding-top:.15em; }
.doily > span i { font-style:normal; font-size:.55em; color:var(--gold); margin:0 .04em; }
.doily .mono-one { font:500 clamp(3.4rem,15vw,4.4rem)/1 var(--f-body); padding:0; }
.names { font-size:clamp(3.8rem,17vw,5.4rem); }
.is-birthday .names em { font-size:.36em; }