/* Kraft Zarf: kraft kâğıt, sicim fiyonk, isim etiketi ve kuru lavanta; kapakta bantlı kart ve ıslak mühür tarihi. */
:root { --f-display:"Caveat",cursive; --f-head:"Caveat",cursive; --f-body:"Lora",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
body {
  --kraft:#b98d5e; --twine:#e6d5b5;
  --z-paper:var(--kraft); --z-card:var(--paper); --z-flap-delay:.95s;
  --z-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6 .08' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .2 0 0 0 0 .12 0 0 0 0 .05 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --z-liner:repeating-linear-gradient(0deg, color-mix(in srgb, var(--primary) 32%, transparent) 0 8px, transparent 8px 16px),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--primary) 32%, transparent) 0 8px, transparent 8px 16px), var(--paper);
  --radius:2px; --btn-radius:4px; --h2-size:clamp(2.6rem,11vw,3.4rem);
}
.tpl-kraft .opening { background:var(--z-grain), radial-gradient(90% 70% at 50% 40%, var(--paper), var(--soft)); }
.names { font:700 clamp(3.6rem,17vw,5rem)/.95 var(--f-display); }
.names em { font:italic 400 .36em/1.5 var(--f-body); }
.z-letter b { font-weight:700; }
.detail-card, .rsvp form, .thanks { background:var(--z-grain), var(--paper); }

.kf-tw { z-index:4; background:repeating-linear-gradient(55deg, var(--twine) 0 2.2px, color-mix(in srgb, var(--twine) 60%, #6b4a28) 2.2px 4px); box-shadow:0 1px 1.5px rgb(0 0 0 / .35); transition:transform .6s cubic-bezier(.6,0,.4,1) .2s, opacity .4s .4s; }
.kf-tw.v { left:calc(50% - 2px); width:4px; top:-2%; bottom:-2%; transform-origin:50% 100%; }
.kf-tw.h { top:calc(57% - 2px); height:4px; left:-2%; right:-2%; transform-origin:100% 50%; background:repeating-linear-gradient(35deg, var(--twine) 0 2.2px, color-mix(in srgb, var(--twine) 60%, #6b4a28) 2.2px 4px); }
.is-opening .kf-tw.v { transform:scaleY(0); opacity:0; }
.is-opening .kf-tw.h { transform:scaleX(0); opacity:0; }
.kf-sp { z-index:4; left:28%; top:6%; width:16%; rotate:-38deg; transition:transform .7s var(--ease), opacity .5s; filter:drop-shadow(0 2px 2px rgb(0 0 0 / .25)); }
.kf-sp svg, .kf-hero-sp svg { display:block; width:100%; }
.kf-bud { fill:var(--primary); }
.kf-bud.light { fill:color-mix(in srgb, var(--primary) 55%, #fff); }
.kf-tag { z-index:5; left:55%; top:64%; width:74px; padding:16px 6px 8px; display:grid; justify-items:center; background:var(--z-grain), var(--paper);
  clip-path:polygon(22% 0, 78% 0, 100% 16%, 100% 100%, 0 100%, 0 16%); rotate:-12deg; transform-origin:30% 0; box-shadow:0 2px 4px rgb(0 0 0 / .2);
  animation:tagsway 3.2s ease-in-out infinite; transition:transform .7s var(--ease), opacity .5s; }
.kf-tag::before { content:""; position:absolute; top:6px; left:50%; width:7px; height:7px; margin-left:-3.5px; border-radius:50%; background:var(--kraft); box-shadow:inset 0 1px 2px rgb(0 0 0 / .4); }
.kf-tag b { font:700 1.3rem/1 var(--f-display); color:var(--primary); white-space:nowrap; }
.kf-tag b i { font-style:normal; font-size:.75em; color:var(--muted); }
.kf-tag small { font:500 .55rem var(--f-ui); letter-spacing:.14em; color:var(--muted); }
@keyframes tagsway { 50% { rotate:-6deg; } }
.is-opening .kf-tag { animation:none; transform:translate(30px,140px) rotate(40deg); opacity:0; }
.is-opening .kf-sp { transform:translate(-40px,150px) rotate(-60deg); opacity:0; }
.kf-knot { width:96px; height:68px; top:58% !important; z-index:6; }
.kf-knot svg { width:100%; height:100%; overflow:visible; filter:drop-shadow(0 1px 1px rgb(0 0 0 / .4)); }
.kf-cord { stroke:var(--twine); stroke-width:4; }
.kf-nub { fill:color-mix(in srgb, var(--twine) 80%, #6b4a28); }

/* Kapak: kraft pano üzerinde bantlı kart */
.hero { gap:0; }
.kf-board { position:relative; display:flex; flex-direction:column; align-items:center; gap:14px; width:min(100%,370px); margin:24px 0 10px; padding:46px 22px 34px;
  background:var(--z-grain), var(--paper); box-shadow:0 0 0 14px var(--kraft), 0 0 0 15px color-mix(in srgb, var(--kraft) 70%, #000), var(--shadow); rotate:.8deg; }
.kf-tape { position:absolute; top:-22px; width:96px; height:30px; background:color-mix(in srgb, var(--primary) 30%, #fff8); opacity:.85;
  clip-path:polygon(2% 0, 98% 4%, 100% 30%, 97% 60%, 100% 100%, 3% 96%, 0 70%, 3% 40%);
  box-shadow:0 1px 2px rgb(0 0 0 / .08); }
.kf-tape.t1 { left:10px; rotate:-14deg; } .kf-tape.t2 { right:10px; rotate:12deg; }
.kf-hero-sp { position:absolute; right:8px; top:36px; width:38px; rotate:22deg; opacity:.95; }
.kf-photo { margin:0; padding:8px 8px 30px; background:#fff; box-shadow:0 6px 16px rgb(0 0 0 / .15); rotate:-2.5deg; width:min(60vw,220px); }
.kf-photo img { width:100%; aspect-ratio:1; object-fit:cover; }
.kf-stamp { display:grid; justify-items:center; width:118px; aspect-ratio:1; align-content:center; border-radius:50%; color:var(--primary);
  border:2.5px solid currentColor; outline:1px solid currentColor; outline-offset:-9px; rotate:-10deg; opacity:.85; mix-blend-mode:multiply;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.2 1.9'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.kf-stamp small { font:600 .58rem var(--f-ui); letter-spacing:.24em; text-transform:uppercase; }
.kf-stamp b { font:700 2.6rem/1 var(--f-display); }
.kf-stamp span { font:500 .62rem var(--f-ui); letter-spacing:.16em; text-transform:uppercase; }
.date-line { font-size:.74rem; }