/* Zarf şablonlarının ortak mekanizması (dantel, kraft, mektup, kurdele, varak, cicek, ebru, pul, bilet).
   Yapı: .z-back (zarfın içi + astar), .z-letter (çıkan kart), .z-pocket (ön yüz), .z-flap (kapak: i = dış, b = astar), .z-seal.
   Şablon kendi dosyasında --z-paper, --z-liner, --z-flap gibi değişkenlerle zarfı giydirir. */
:where(body.is-zarf) {
  --z-paper: var(--soft);
  --z-shade: color-mix(in srgb, var(--z-paper) 86%, #000);
  --z-card: var(--paper);
  --z-liner: var(--primary);
  --z-liner-size: auto;
  --z-flap: polygon(0 0, 100% 0, 50% 100%);
  --z-flap-h: 58%;
  --z-r: 7px;
  --z-seal-top: 57%;
  --z-flap-delay: .45s;
  --z-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --z-folds: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 100L50 60L100 100Z' fill='%23000' fill-opacity='.045'/%3E%3Cpath d='M0 100L50 60L100 100' fill='none' stroke='%23000' stroke-opacity='.13' stroke-width='.7' vector-effect='non-scaling-stroke'/%3E%3Cpath d='M0 0L50 54L100 0' fill='none' stroke='%23fff' stroke-opacity='.35' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}
.is-zarf .opening { transition:opacity 1s var(--ease) 2.7s, visibility 0s 3.7s; }
.is-zarf .opening-hint { position:relative; z-index:6; }
.is-zarf .opening-eyebrow { transition:opacity .4s; }
.is-zarf.is-opening .opening-eyebrow { opacity:0; }

.zarf { width:min(86vw,380px); aspect-ratio:1.45; perspective:1800px; animation:zfloat 5s ease-in-out infinite; transition:transform 1.4s var(--ease); }
@keyframes zfloat { 50% { transform:translateY(-6px) rotate(-.6deg); } }
.is-opening .zarf { animation:none; }
:where(.zarf) > span { position:absolute; display:block; }

.z-back { inset:0; border-radius:var(--z-r); background:var(--z-grain), var(--z-shade);
  box-shadow:0 34px 50px -22px color-mix(in srgb, var(--deep) 70%, transparent), 0 8px 14px -8px rgb(0 0 0 / .3); }
.z-back::after { content:""; position:absolute; inset:4.5% 4.5% 32%; border-radius:4px 4px 0 0; background:var(--z-liner); background-size:var(--z-liner-size); }

.z-letter {
  left:6.5%; right:6.5%; top:6.5%; height:87%; z-index:1; display:flex; flex-direction:column; align-items:center; gap:4px; padding:8% 7% 0;
  background:var(--z-grain), var(--z-card); border-radius:3px; box-shadow:0 1px 4px rgb(0 0 0 / .14); text-align:center; color:var(--ink);
  transition:transform 1.4s var(--ease);
}
.z-letter small { font:500 .58rem/1.4 var(--f-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.z-letter b { display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; column-gap:.25em; max-width:100%; font:400 clamp(1.6rem,7.6vw,2.15rem)/1.05 var(--f-display); color:var(--primary); }
.z-letter b i { font-style:normal; font-size:.7em; color:var(--gold); }
.z-letter em { font:italic 400 .82rem/1.3 var(--f-body); color:var(--muted); }

.z-pocket { inset:0; z-index:2; border-radius:var(--z-r); background:var(--z-folds), var(--z-grain), var(--z-paper); background-size:100% 100%, auto, auto;
  clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }

.z-flap { left:0; right:0; top:0; height:var(--z-flap-h); z-index:3; transform-origin:50% 0;
  filter:drop-shadow(0 3px 2px rgb(0 0 0 / .16)); transition:transform 1s cubic-bezier(.55,.05,.3,1) var(--z-flap-delay); }
.z-flap > i, .z-flap > b { position:absolute; inset:0; clip-path:var(--z-flap); border-radius:var(--z-r) var(--z-r) 0 0; }
.z-flap > i { background:var(--z-grain), var(--z-flap-bg, var(--z-paper)); }
.z-flap > b { background:var(--z-liner); background-size:var(--z-liner-size); opacity:0; transition:opacity 0s calc(var(--z-flap-delay) + .5s); }
.is-opening .z-flap { transform:rotateX(180deg); }
.is-opening .z-flap > b { opacity:1; }
.flap-back .z-flap { z-index:0; }
.flap-back .z-letter { transform:translateY(-56%); }
.is-open .zarf { transform:translateY(16%) scale(.97); }
.is-open .z-letter { transform:translateY(-60%) scale(1.05); }

.z-seal { z-index:5; left:50%; top:var(--z-seal-top); translate:-50% -50%; transition:transform .55s var(--ease), opacity .45s; }
.zarf:hover .z-seal { transform:scale(1.06) rotate(-4deg); }
.is-opening .z-seal { transform:scale(1.35) rotate(-14deg); opacity:0; }

/* Kapakta kullanılan kâğıt kart */
.z-sheet { position:relative; width:min(100%,380px); background:var(--z-grain), var(--paper); box-shadow:var(--shadow); }

@media (prefers-reduced-motion:reduce) { .zarf { animation:none; } }