/* Kapılı (gate-fold) kart şablonlarının ortak mekanizması: kemer, zeytin, sedef, obsidyen, damask.
   Yapı: .g-inside (içteki kart), .g-door.l / .g-door.r (kanatlar: .g-face dış yüz, .g-back iç yüz), .g-wax (mühür yarısı).
   Kanat süslemesi şablonun _Door.cshtml'i (200×625 SVG); sağ kanatta aynalanır, ortada yarım çizilen öğeler birleşir.
   Şablon kendi dosyasında --g-door, --g-motif, --wax gibi değişkenlerle kartı giydirir. */
:where(body.is-kanat) {
  --g-door: var(--paper);
  --g-edge: color-mix(in srgb, var(--g-door) 94%, #000);
  --g-in: var(--paper);
  --g-lining: color-mix(in srgb, var(--g-door) 94%, #000);
  --g-motif: color-mix(in srgb, var(--g-door) 72%, #fff);
  --g-stroke: var(--g-motif);
  --g-hi: rgb(255 255 255 / .9);
  --g-lo: rgb(0 0 0 / .17);
  --g-sheen: rgb(255 255 255 / .35);
  --wax: #c7a462; --wax-lo: #9f7c3c; --wax-hi: #fff4d6; --wax-ink: #6f5222;
  --g-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='.9' 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 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.is-kanat .opening { transition:opacity .9s var(--ease) 2.5s, visibility 0s 3.4s; }
.is-kanat .opening-eyebrow { transition:opacity .4s; }
.is-kanat.is-opening .opening-eyebrow { opacity:0; }

/* Kart: telefonda ekrana sığsın diye yüksekliğe göre de küçülür. */
.kanat { --w:min(72vw, 316px, calc((100svh - 220px) * .64)); width:var(--w); aspect-ratio:.64; perspective:1700px; transform-style:preserve-3d;
  animation:gfloat 6s ease-in-out infinite; transition:transform 1.8s var(--ease) .4s; }
@keyframes gfloat { 50% { transform:translateY(-6px); } }
.is-opening .kanat { animation:none; transform:scale(.66); }
.is-stage2 .kanat { transform:scale(.72); }
:where(.kanat) > span { position:absolute; display:block; }

/* İçteki kart (kanatlar açılınca görünür) */
.g-inside { inset:0; border-radius:5px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; padding:16% 12%; text-align:center;
  background:var(--g-grain), var(--g-in); color:var(--ink);
  box-shadow:0 46px 60px -30px color-mix(in srgb, var(--deep) 75%, transparent), 0 12px 20px -12px rgb(0 0 0 / .4); }
.g-inside::before { content:""; position:absolute; inset:5%; border:1px solid color-mix(in srgb, var(--gold) 70%, transparent); border-radius:3px;
  outline:1px solid color-mix(in srgb, var(--gold) 35%, transparent); outline-offset:-6px; pointer-events:none; }
.g-inside > * { position:relative; opacity:0; transform:translateY(10px); transition:opacity .8s var(--ease), transform .8s var(--ease); }
.is-opening .g-inside > * { opacity:1; transform:none; transition-delay:1.3s; }
.is-opening .g-inside > :nth-child(2) { transition-delay:1.45s; } .is-opening .g-inside > :nth-child(3) { transition-delay:1.6s; }
.g-inside small { font:500 .72rem/1.3 var(--f-ui); letter-spacing:.32em; text-transform:uppercase; color:var(--gold); }
.g-inside b { display:flex; flex-direction:column; align-items:center; font:400 calc(var(--w) * .17)/1 var(--f-display); color:var(--primary); overflow-wrap:anywhere; }
.g-inside b i { font-size:.55em; font-style:normal; color:var(--gold); }
.g-inside em { font:italic 400 1.15rem/1.4 var(--f-body); color:var(--ink); opacity:.8; }

/* Kanatlar */
.g-door { top:0; bottom:0; width:50%; z-index:2; transform-style:preserve-3d; transition:transform 1.7s cubic-bezier(.6,.02,.22,1) .42s; }
.g-door.l { left:0; transform-origin:0 50%; }
.g-door.r { right:0; transform-origin:100% 50%; }
.is-opening .g-door.l { transform:rotateY(-158deg); }
.is-opening .g-door.r { transform:rotateY(158deg); }
.g-face, .g-back { position:absolute; inset:0; overflow:hidden; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.g-face { background:var(--g-grain), linear-gradient(to right, var(--g-door) 62%, var(--g-edge)); border-radius:5px 0 0 5px;
  box-shadow:inset -1px 0 0 rgb(0 0 0 / .14), 0 40px 56px -30px color-mix(in srgb, var(--deep) 70%, transparent), 0 10px 18px -12px rgb(0 0 0 / .35); }
.g-door.r .g-face { background:var(--g-grain), linear-gradient(to left, var(--g-door) 62%, var(--g-edge)); border-radius:0 5px 5px 0;
  box-shadow:inset 1px 0 0 rgb(255 255 255 / .25), 0 40px 56px -30px color-mix(in srgb, var(--deep) 70%, transparent), 0 10px 18px -12px rgb(0 0 0 / .35); }
/* Kâğıda ışık vurur: yavaşça geçen parıltı */
.g-face::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(112deg, transparent 38%, var(--g-sheen) 50%, transparent 62%) -160% 0/260% 100% no-repeat; animation:gsheen 6.5s ease-in-out infinite; }
.g-door.r .g-face::after { animation-delay:.25s; }
@keyframes gsheen { 0%, 30% { background-position:-160% 0; } 75%, 100% { background-position:260% 0; } }
.is-opening .g-face::after { animation:none; opacity:0; }
.g-back { transform:rotateY(180deg); background:var(--g-grain), var(--g-lining); border-radius:0 5px 5px 0; }
.g-door.r .g-back { border-radius:5px 0 0 5px; }

/* Kabartma: aynı renkte çizilen süs, üstten ışık alır, alttan gölge düşer. */
.g-face > svg, .g-hp > svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible;
  filter:drop-shadow(-.6px -.7px 0 var(--g-hi)) drop-shadow(.7px 1.1px .6px var(--g-lo)); }
.g-door.r .g-face > svg, .g-hp.r > svg { transform:scaleX(-1); }
:where(.g-face, .g-hp) .m { fill:var(--g-motif); }
:where(.g-face, .g-hp) .s { fill:none; stroke:var(--g-stroke); stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }
:where(.g-face, .g-hp) .t { fill:none; stroke:var(--g-stroke); stroke-width:.8; stroke-linecap:round; }

/* Mühür: her kanatta yarısı; kanatlar kapalıyken tek mühür görünür, açılırken ikiye ayrılır. */
.g-wax { --seal:calc(var(--w) * .27); position:absolute; top:50%; width:var(--seal); aspect-ratio:1; margin-top:calc(var(--seal) / -2);
  display:grid; place-items:center; transition:transform .45s cubic-bezier(.3,1.6,.5,1); }
.g-door.l .g-wax { right:calc(var(--seal) / -2); }
.g-door.r .g-wax { left:calc(var(--seal) / -2); }
.is-opening .g-door.l .g-wax { transform:translateX(-2px) rotate(-5deg); }
.is-opening .g-door.r .g-wax { transform:translateX(2px) rotate(5deg); }
.g-wax svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; filter:drop-shadow(0 3px 3px rgb(0 0 0 / .28)); }
.wx-drop { fill:var(--wax-lo); opacity:.75; }
.wx-body { fill:var(--wax); }
.wx-press { fill:var(--wax-lo); opacity:.35; }
.wx-rim { fill:none; stroke:var(--wax-hi); stroke-width:1.3; opacity:.55; }
.wx-line { fill:none; stroke:var(--wax-ink); stroke-width:.6; opacity:.5; }
.wx-leaf { fill:var(--wax-ink); opacity:.55; }
.wx-hi { fill:var(--wax-hi); opacity:.55; }
.wx-hi2 { fill:var(--wax-ink); opacity:.3; }
.g-ini { position:relative; display:block; font:400 calc(var(--seal) * .36)/1 var(--f-display); color:var(--wax-ink); white-space:nowrap;
  text-shadow:0 1px 0 color-mix(in srgb, var(--wax-hi) 70%, transparent), 0 -1px 0 rgb(0 0 0 / .35), 0 0 1px var(--wax-ink); padding-top:.1em; }
.g-ini i { font-style:normal; font-size:.6em; margin:0 .04em; }
.is-birthday .g-ini { font-size:calc(var(--seal) * .42); }

/* Kapak: kabartmalı kart, mühür ya da fotoğraf */
.g-hero { --w:min(64vw, 250px); position:relative; width:var(--w); aspect-ratio:.64; margin:4px 0 8px; perspective:1200px;
  filter:drop-shadow(0 26px 30px color-mix(in srgb, var(--deep) 30%, transparent)); }
.g-hp { position:absolute; top:0; bottom:0; width:50%; overflow:hidden; background:var(--g-grain), linear-gradient(to right, var(--g-door) 62%, var(--g-edge)); }
.g-hp.l { left:0; border-radius:5px 0 0 5px; transform-origin:0 50%; box-shadow:inset -1px 0 0 rgb(0 0 0 / .14); }
.g-hp.r { right:0; border-radius:0 5px 5px 0; transform-origin:100% 50%; background:var(--g-grain), linear-gradient(to left, var(--g-door) 62%, var(--g-edge)); }
.g-hero .g-wax { --seal:calc(var(--w) * .3); left:50%; margin-left:calc(var(--seal) / -2); z-index:1; }
.g-photo { position:absolute; z-index:1; left:50%; top:50%; width:58%; aspect-ratio:1; translate:-50% -50%; border-radius:50%; padding:4px;
  background:linear-gradient(135deg, var(--wax-hi), var(--wax) 45%, var(--wax-lo)); box-shadow:0 8px 18px rgb(0 0 0 / .3); }
.g-photo img { width:100%; height:100%; object-fit:cover; border-radius:50%; }

@media (prefers-reduced-motion: reduce) {
  .kanat, .g-face::after { animation:none; }
}