/* Mühür: mühürlü zarf, defne çelengi, el yazısı isimler. */
:root { --f-display:"Great Vibes",cursive; --f-body:"Cormorant Garamond",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
.detail-card { outline:1px solid color-mix(in srgb, var(--gold) 30%, transparent); outline-offset:-7px; }

.envelope { width:min(84vw,360px); aspect-ratio:1.42; perspective:1400px; filter:drop-shadow(0 22px 30px color-mix(in srgb, var(--deep) 32%, transparent)); }
.envelope > span { position:absolute; inset:0; border-radius:6px; }
.env-back { background:var(--deep); }
.env-card {
  inset:7% 6% auto !important; height:86%; z-index:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:6px; padding-top:9%;
  background:var(--paper); border:1px solid color-mix(in srgb, var(--gold) 60%, transparent); outline:1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline-offset:-8px;
  transition:transform 1.1s var(--ease) .1s;
}
.env-card small { font:500 .62rem var(--f-ui); letter-spacing:.3em; text-transform:uppercase; color:var(--gold); }
.env-card b { font:400 2rem/1 var(--f-display); color:var(--primary); white-space:nowrap; }
.env-card i { font-style:normal; margin:0 .2em; color:var(--gold); }
.env-front { z-index:2; background:linear-gradient(160deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--primary)); clip-path:polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); }
.env-front::after { content:""; position:absolute; inset:0; background:linear-gradient(to top right, transparent 49.6%, rgb(0 0 0 / .1) 50%, transparent 50.4%), linear-gradient(to top left, transparent 49.6%, rgb(0 0 0 / .1) 50%, transparent 50.4%); }
.env-flap {
  z-index:3; height:58%; bottom:auto !important; background:linear-gradient(180deg, var(--deep), color-mix(in srgb, var(--primary) 85%, var(--deep)));
  clip-path:polygon(0 0, 100% 0, 50% 100%); transform-origin:top center; transition:transform .8s var(--ease);
}
.seal {
  z-index:4; inset:auto !important; left:50% !important; top:57% !important; width:76px; height:76px; border-radius:50% !important; translate:-50% -50%;
  display:grid; place-items:center;
  background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--gold) 80%, #fff), var(--gold) 45%, color-mix(in srgb, var(--gold) 55%, #000));
  box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 70%, #000 8%), 0 6px 14px rgb(0 0 0 / .3), inset 0 2px 4px rgb(255 255 255 / .35), inset 0 -3px 6px rgb(0 0 0 / .25);
  transition:transform .5s var(--ease), opacity .4s;
}
.seal::before { content:""; position:absolute; inset:8px; border-radius:50%; border:1px dashed rgb(255 255 255 / .45); }
.seal span { font:400 1.65rem/1 var(--f-display); color:#fff; text-shadow:0 1px 2px rgb(0 0 0 / .3); }
.seal i { font-style:normal; font-size:.75em; margin:0 .08em; }
.envelope:hover .seal { transform:scale(1.05) rotate(-4deg); }
.is-opening .seal { transform:scale(1.35) rotate(-14deg); opacity:0; }
.is-opening .env-flap { transform:rotateX(180deg); }
.flap-back .env-flap { z-index:0; }
.flap-back .env-card { transform:translateY(-58%); z-index:2; }

.arch { position:relative; width:min(72vw,300px); aspect-ratio:3/4; margin:8px 0 14px; }
.arch img { width:100%; height:100%; object-fit:cover; border-radius:999px 999px 6px 6px; box-shadow:0 24px 50px color-mix(in srgb, var(--deep) 28%, transparent); }
.arch::before { content:""; position:absolute; inset:-11px; border:1px solid var(--gold); border-radius:999px 999px 10px 10px; }

.monogram { position:relative; width:min(62vw,240px); aspect-ratio:1; color:var(--gold); }
.monogram svg { width:100%; height:100%; }
.monogram span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:400 clamp(3.6rem,15vw,4.6rem)/1 var(--f-display); color:var(--primary); padding-top:.12em; }
.monogram .mono-one { font:500 clamp(4rem,17vw,5.2rem)/1 var(--f-body); padding-top:0; }
.monogram i { font-style:normal; font-size:.55em; color:var(--gold); margin:0 .02em; }
.is-birthday .names em { font-size:.36em; letter-spacing:.04em; }