/* Parti Bileti: koyu zarftan altın bir giriş bileti çıkar (yan çentikler, barkod, VIP çıkartması). Kapakta koçanlı büyük bilet. */
:root { --f-display:"Bebas Neue",Impact,sans-serif; --f-head:"Bebas Neue",Impact,sans-serif; --f-body:"Archivo",system-ui,sans-serif; --f-ui:"Archivo",system-ui,sans-serif; }
body {
  --z-paper:color-mix(in srgb, var(--primary) 70%, var(--deep)); --z-card:var(--gold); --z-r:6px; --radius:10px; --btn-radius:8px;
  --z-liner:repeating-linear-gradient(-45deg, var(--gold) 0 10px, var(--deep) 10px 20px);
  --z-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='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .06 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --bar:repeating-linear-gradient(90deg, currentColor 0 2px, transparent 2px 4px, currentColor 4px 5px, transparent 5px 8px, currentColor 8px 11px, transparent 11px 12px, currentColor 12px 13px, transparent 13px 16px);
  --notch:radial-gradient(circle 12px at 0 50%, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 12px at 100% 50%, #0000 98%, #000) right/51% 100% no-repeat;
  --h2-size:clamp(2.4rem,11vw,3rem); font-size:1rem;
}
h2 { letter-spacing:.04em; }
.lead, .muted { font-style:normal; }
.tpl-bilet .opening { background:radial-gradient(70% 50% at 50% 45%, color-mix(in srgb, var(--gold) 30%, var(--bg)), var(--bg)); }
.tpl-bilet .opening-eyebrow { font:400 1.3rem var(--f-display); letter-spacing:.2em; }
.btn { font:600 .9rem var(--f-ui); }
.cd b { font:400 clamp(2rem,9vw,2.8rem)/1 var(--f-display); }
.cd div { border-radius:10px; }
.d-item b { font-weight:600; }
.d-item span { font-style:normal; }
.d-item small, .families small { color:var(--primary); font-weight:600; }
.detail-card, .rsvp form, .thanks { border:2px solid var(--ink); box-shadow:6px 6px 0 var(--gold); }
.field input, .field select, .field textarea, .choice span { font:500 1rem var(--f-ui); }

.z-flap > i { background:var(--z-grain), linear-gradient(170deg, color-mix(in srgb, var(--primary) 92%, #fff), var(--z-paper)); }
.b-ticket { left:9% !important; right:9% !important; height:80% !important; padding:7% 8% 0 !important; gap:3px !important; border-radius:6px !important; color:var(--deep);
  background:var(--z-grain), linear-gradient(115deg, color-mix(in srgb, var(--gold) 80%, #fff), var(--gold) 40%, color-mix(in srgb, var(--gold) 75%, #000) 100%) !important;
  -webkit-mask:var(--notch); mask:var(--notch); transition:transform 1.1s cubic-bezier(.3,1.35,.5,1) !important; }
.b-ticket small { color:var(--deep) !important; font:600 .56rem var(--f-ui) !important; letter-spacing:.32em !important; }
.b-ticket b { font:400 clamp(1.8rem,8.4vw,2.4rem)/1 var(--f-display) !important; color:var(--deep) !important; letter-spacing:.04em; }
.b-ticket b i { font-style:normal; font-size:.7em; margin:0 .15em; }
.b-row { display:flex; justify-content:space-between; width:100%; padding-top:6px; border-top:1.5px dashed color-mix(in srgb, var(--deep) 50%, transparent); font:600 .58rem var(--f-ui); letter-spacing:.14em; }
.b-bar { display:block; width:74%; height:22px; margin-top:6px; background:var(--bar); color:var(--deep); opacity:.85; }
.is-open .b-ticket { transform:translateY(-62%) rotate(-4deg) scale(1.06) !important; }
.b-vip { width:66px; height:66px; display:grid; place-items:center; border-radius:50%;
  background:conic-gradient(from 20deg, color-mix(in srgb, var(--gold) 60%, #fff), var(--gold), color-mix(in srgb, var(--gold) 65%, #000), var(--gold), color-mix(in srgb, var(--gold) 60%, #fff));
  box-shadow:0 0 0 3px var(--deep), 0 0 0 5px var(--gold), 0 6px 10px rgb(0 0 0 / .4); }
.b-vip span { font:400 1.5rem/1 var(--f-display); color:var(--deep); letter-spacing:.06em; padding-top:3px; }

/* Kapak: koçanlı büyük bilet */
.b-big { width:min(100%,360px); filter:drop-shadow(0 18px 24px color-mix(in srgb, var(--deep) 22%, transparent)); rotate:-1.5deg; }
.b-top, .b-stub { position:relative; display:flex; flex-direction:column; align-items:center; text-align:center; }
.b-top { gap:10px; padding:34px 22px 30px; border-radius:14px 14px 0 0; color:var(--paper);
  background:var(--z-grain), radial-gradient(120% 80% at 50% 0, color-mix(in srgb, var(--primary) 80%, #fff 8%), var(--primary) 60%, var(--deep));
  -webkit-mask:radial-gradient(circle 14px at 0 100%, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 100%, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 14px at 100% 100%, #0000 98%, #000) right/51% 100% no-repeat; }
.b-top::before { content:""; position:absolute; inset:10px; border:1.5px solid color-mix(in srgb, var(--gold) 60%, transparent); border-radius:8px; pointer-events:none; }
.b-head { margin:0; font:400 1.5rem/1 var(--f-display); letter-spacing:.24em; color:var(--gold); }
.b-head span { font-size:.7em; vertical-align:.15em; }
.b-top .eyebrow { color:color-mix(in srgb, var(--paper) 80%, transparent); }
.b-photo { margin:0; width:min(56vw,210px); aspect-ratio:1; border:4px solid var(--gold); border-radius:10px; overflow:hidden; }
.b-photo img { width:100%; height:100%; object-fit:cover; }
.names { font:400 clamp(3.6rem,17vw,5rem)/.92 var(--f-display); color:var(--paper); letter-spacing:.03em; }
.names em { font:italic 400 .3em/1.6 var(--f-body); color:var(--gold); letter-spacing:0; }
.b-age { margin:-6px 0 0; font:400 6.4rem/.85 var(--f-display); color:transparent; -webkit-text-stroke:2px var(--gold); }
.b-age ~ * { }
.is-birthday .b-top .names em { display:none; }
.b-stub { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; padding:24px 18px 22px; border-radius:0 0 14px 14px; color:var(--deep);
  background:var(--z-grain), var(--gold); border-top:2px dashed color-mix(in srgb, var(--deep) 45%, transparent);
  -webkit-mask:radial-gradient(circle 14px at 0 0, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, #0000 98%, #000) right/51% 100% no-repeat;
          mask:radial-gradient(circle 14px at 0 0, #0000 98%, #000) left/51% 100% no-repeat, radial-gradient(circle 14px at 100% 0, #0000 98%, #000) right/51% 100% no-repeat; }
.b-stub div { display:grid; gap:2px; }
.b-stub small { font:600 .6rem var(--f-ui); letter-spacing:.2em; text-transform:uppercase; opacity:.75; }
.b-stub b { font:400 1.3rem/1.1 var(--f-display); letter-spacing:.04em; }
.b-stub .b-bar { grid-column:1/-1; justify-self:center; width:80%; height:36px; margin-top:8px; }
.is-open .b-big { animation:tk 1.2s cubic-bezier(.3,1.4,.5,1) both .1s; }
@keyframes tk { from { transform:translateY(60px) rotate(6deg); opacity:0; } }