/* Mektup: uçak postası zarfı (adres yüzü, pul, damga) döner, arka yüzde kapak açılır; kapakta pullu mektup kâğıdı. */
:root { --f-display:"Petit Formal Script",cursive; --f-head:"Petit Formal Script",cursive; --f-body:"Lora",Georgia,serif; --f-ui:"Courier Prime","Courier New",monospace; }
body { --z-paper:var(--soft); --z-card:var(--paper); --z-flap-delay:1.1s; --radius:2px; --btn-radius:2px;
  --air:repeating-linear-gradient(-45deg, var(--primary) 0 10px, transparent 10px 16px, var(--deep) 16px 26px, transparent 26px 32px);
  --z-liner:repeating-linear-gradient(-45deg, var(--primary) 0 8px, var(--paper) 8px 12px, var(--deep) 12px 20px, var(--paper) 20px 24px);
  --h2-size:clamp(2rem,8vw,2.6rem); font-size:1.1rem; }
.tpl-mektup .opening { background:radial-gradient(90% 70% at 50% 40%, var(--paper), color-mix(in srgb, var(--bg) 85%, var(--deep))); transition:opacity 1s var(--ease) 3.1s, visibility 0s 4.1s; }
.eyebrow, .date-line { color:var(--deep); }
.date-line span + span::before { content:"/"; font-size:1em; vertical-align:0; color:var(--primary); }
.detail-card, .rsvp form, .thanks { border-top:6px solid transparent; border-image:var(--air) 6; }

/* Adres yüzü: önce görünür, zarf dönünce kaybolur */
.m-face { inset:0; z-index:7; border-radius:var(--z-r); padding:10px; background:var(--air), var(--paper); box-shadow:0 30px 44px -22px color-mix(in srgb, var(--deep) 60%, transparent); }
.m-face::before { content:""; position:absolute; inset:9px; background:var(--z-grain), var(--soft); border-radius:2px; }
.m-face > * { position:absolute; }
.m-air { left:7%; top:12%; padding:3px 8px; border:1.5px solid var(--deep); color:var(--deep); font:700 .55rem/1.3 var(--f-ui); letter-spacing:.14em; text-transform:uppercase; rotate:-2deg; }
.m-face .m-stamp { right:7%; top:10%; width:17%; rotate:3deg; filter:drop-shadow(0 1px 1px rgb(0 0 0 / .2)); }
.m-hole { fill:var(--soft); }
.m-paper .m-hole { fill:var(--paper); }
.m-stamp-t { font:700 5.4px var(--f-ui); fill:#fff; letter-spacing:.06em; }
.m-face .m-post { right:12%; top:22%; width:42%; color:color-mix(in srgb, var(--deep) 70%, transparent); rotate:-10deg; mix-blend-mode:multiply; }
.m-post-ring { font:700 6.2px var(--f-ui); fill:currentColor; letter-spacing:.1em; }
.m-post-d { font:700 10px var(--f-ui); fill:currentColor; }
.m-post-y { font:700 7px var(--f-ui); fill:currentColor; }
.m-to { left:16%; right:10%; bottom:16%; display:grid; gap:2px; text-align:left; }
.m-to small { font:400 .7rem var(--f-ui); color:var(--muted); }
.m-to b { font:400 clamp(1.1rem,5vw,1.4rem)/1.5 var(--f-display); color:var(--ink); border-bottom:1px dashed color-mix(in srgb, var(--ink) 35%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.m-to em { font:italic 400 .72rem/1.6 var(--f-ui); color:var(--muted); border-bottom:1px dashed color-mix(in srgb, var(--ink) 25%, transparent); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.is-opening .zarf { animation:mflip .9s ease-in-out; }
.is-opening .m-face { animation:mhide .9s linear forwards; }
@keyframes mflip { 0% { transform:none; } 50% { transform:scaleX(.02) rotate(-2deg); } 100% { transform:none; } }
@keyframes mhide { 0%, 49% { opacity:1; } 50%, 100% { opacity:0; visibility:hidden; } }

.m-seal { width:58px; height:58px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--primary) 70%, #fff), var(--primary) 50%, color-mix(in srgb, var(--primary) 60%, #000));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 80%, #000), 0 5px 10px rgb(0 0 0 / .3); transition-delay:.95s !important; }
.m-seal span { font:400 1.15rem/1 var(--f-display); color:#fff; }
.m-seal i { font-style:normal; font-size:.75em; }
.z-letter small { color:var(--primary); font-weight:700; }
.z-letter b { font-size:clamp(1.3rem,6vw,1.75rem); line-height:1.4; }
.z-letter em { font:400 .72rem/1.4 var(--f-ui); }

/* Kapak: pullu mektup kâğıdı */
.m-paper { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; width:min(100%,400px); padding:118px 22px 40px;
  background:var(--z-grain), repeating-linear-gradient(transparent 0 31px, color-mix(in srgb, var(--deep) 9%, transparent) 31px 32px), var(--paper);
  border-top:10px solid transparent; border-image:var(--air) 10; box-shadow:var(--shadow); rotate:-.6deg; }
.m-corner { position:absolute; top:16px; right:14px; width:170px; height:90px; }
.m-corner .m-stamp { position:absolute; right:0; top:0; width:62px; rotate:4deg; filter:drop-shadow(0 2px 2px rgb(0 0 0 / .15)); }
.m-corner .m-post { position:absolute; right:30px; top:14px; width:150px; color:color-mix(in srgb, var(--deep) 60%, transparent); rotate:-8deg; mix-blend-mode:multiply; }
.m-photo { margin:0; padding:10px 10px 34px; background:#fff; box-shadow:0 8px 20px rgb(0 0 0 / .15); rotate:2deg; width:min(62vw,230px); }
.m-photo img { width:100%; aspect-ratio:1; object-fit:cover; }
.names { font-size:clamp(2.6rem,12vw,3.6rem); line-height:1.25; }
.names em { font-size:.5em; color:var(--primary); font-style:normal; font-family:var(--f-display); }
.is-birthday .names em { font:italic 400 .34em/1.5 var(--f-body); }