/* Altın Varak: gece rengi zarf, altın varak yelpaze astar, art deco mühür, parıltı; kapakta güneş ışınlı kemer. */
:root { --f-display:"Poiret One",system-ui,sans-serif; --f-head:"Poiret One",system-ui,sans-serif; --f-body:"Cormorant",Georgia,serif; --f-ui:"Josefin Sans",system-ui,sans-serif; }
body {
  --on-primary:var(--deep); --field:color-mix(in srgb, var(--paper) 70%, #000); --radius:0px; --btn-radius:0px;
  --muted:color-mix(in srgb, var(--ink) 66%, var(--bg)); --line:color-mix(in srgb, var(--gold) 45%, transparent); --shadow:0 20px 50px rgb(0 0 0 / .45);
  --foil:linear-gradient(120deg, #8a6a2c, #f3dc9c 28%, #b98d3c 48%, #f6e4ad 70%, #8a6a2c);
  --z-paper:var(--paper); --z-card:var(--soft);
  --z-liner:radial-gradient(circle at 50% 100%, transparent 0 7px, rgb(0 0 0 / .32) 7px 8px, transparent 8px 13px, rgb(0 0 0 / .32) 13px 14px, transparent 14px) 0 0/28px 14px, var(--foil);
  --z-flap:polygon(0 0, 100% 0, 100% 6%, 57% 90%, 50% 100%, 43% 90%, 0 6%);
  --h2-size:clamp(1.9rem,8vw,2.4rem);
}
body::before { background:radial-gradient(100% 60% at 50% 0%, color-mix(in srgb, var(--gold) 12%, transparent), transparent 70%); }
h2 { color:var(--gold); letter-spacing:.12em; text-transform:uppercase; }
.tpl-varak .opening { background:radial-gradient(90% 70% at 50% 40%, var(--soft), var(--bg)); }
.tpl-varak .opening-eyebrow { color:var(--gold); }
.tpl-varak .opening-hint { color:color-mix(in srgb, var(--ink) 65%, transparent); }
.btn { color:var(--deep); background:var(--foil); border-color:var(--gold); }
.btn.ghost { background:transparent; color:var(--gold); }
.detail-card, .rsvp form, .thanks { outline:1px solid color-mix(in srgb, var(--gold) 30%, transparent); outline-offset:-7px; }
.cd div { border-radius:0; rotate:45deg; scale:.8; }
.cd div > * { rotate:-45deg; }
.cd div small { display:none; }

.z-pocket { --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 100' fill='none' stroke='%23d4ae62' stroke-opacity='.55' stroke-width='.8' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.z-flap > i { background:linear-gradient(transparent, transparent), var(--z-paper); }
.z-flap { filter:drop-shadow(0 0 .6px var(--gold)) drop-shadow(0 4px 3px rgb(0 0 0 / .4)); }
.z-letter { outline:1px solid var(--gold); outline-offset:-6px; }
.z-letter b { font-size:clamp(1.25rem,5.6vw,1.6rem); letter-spacing:.06em; text-transform:uppercase; color:var(--gold); }
.v-frame { inset:5%; z-index:2; border:1px solid color-mix(in srgb, var(--gold) 55%, transparent); outline:1px solid color-mix(in srgb, var(--gold) 25%, transparent); outline-offset:3px; transition:opacity .3s; pointer-events:none; }
.is-opening .v-frame { opacity:0; }
.v-shine { inset:0; z-index:6; pointer-events:none; border-radius:var(--z-r); overflow:hidden; }
.v-shine::after { content:""; position:absolute; top:-20%; bottom:-20%; width:30%; left:-40%; rotate:18deg; background:linear-gradient(90deg, transparent, rgb(255 236 180 / .22), transparent); animation:vshine 3.6s ease-in-out infinite 1s; }
@keyframes vshine { 0% { left:-40%; } 55%, 100% { left:120%; } }
.is-opening .v-shine { display:none; }
.v-seal { width:94px; height:94px; display:grid; place-items:center; top:58% !important; filter:drop-shadow(0 6px 8px rgb(0 0 0 / .5)); }
.v-seal svg { position:absolute; inset:0; width:100%; height:100%; }
.v-seal > span { position:relative; font:400 1.15rem/1 var(--f-display); color:var(--gold); letter-spacing:.02em; }
.v-seal i { font-style:normal; font-size:.7em; margin:0 .08em; }

/* Kapak: art deco kemer */
.v-arch { position:relative; width:min(100%,370px); padding:70px 22px 54px; }
.v-line { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.v-line path { fill:none; stroke:var(--gold); stroke-width:1.2; vector-effect:non-scaling-stroke; }
.v-line path.thin { stroke-width:.6; opacity:.7; }
.v-rays { position:absolute; left:6%; right:6%; top:2%; width:88%; opacity:.35; }
.v-rays line { stroke:var(--gold); stroke-width:.4; }
.v-inner { position:relative; display:flex; flex-direction:column; align-items:center; gap:18px; }
.v-mono { display:grid; place-items:center; width:110px; height:110px; rotate:45deg; border:1px solid var(--gold); outline:1px solid color-mix(in srgb, var(--gold) 40%, transparent); outline-offset:5px; margin:14px 0;
  font:400 2.2rem/1 var(--f-display); color:var(--gold); }
.v-mono > * { rotate:-45deg; }
.v-mono { text-indent:0; }
.v-mono i { font-style:normal; font-size:.7em; }
.v-photo { margin:0; width:min(60vw,220px); aspect-ratio:3/4; border:1px solid var(--gold); padding:6px; border-radius:999px 999px 0 0; }
.v-photo img { width:100%; height:100%; object-fit:cover; border-radius:999px 999px 0 0; }
.names { font:400 clamp(2.4rem,11vw,3.3rem)/1.1 var(--f-display); letter-spacing:.1em; text-transform:uppercase; color:var(--ink); }
.names em { font:italic 400 .5em/1.6 var(--f-body); letter-spacing:0; text-transform:none; color:var(--gold); }
.is-birthday .names em { font-size:.34em; }
.eyebrow { color:var(--gold); }