/* Lale: İznik çinisi; lale motifleri, mihrap kemeri, açılan çini kapılar. */
:root { --f-display:"Alex Brush",cursive; --f-head:"Marcellus",Georgia,serif; --f-body:"Lora",Georgia,serif; --f-ui:"Jost",system-ui,sans-serif; }
body { --radius:2px; --h2-size:clamp(1.5rem,6vw,1.9rem); --line:color-mix(in srgb, var(--primary) 35%, transparent); font-size:1.08rem; }
body::before { background:
  radial-gradient(circle at 0 0, color-mix(in srgb, var(--primary) 7%, transparent) 9px, transparent 10px) 0 0/34px 34px,
  radial-gradient(circle at 17px 17px, color-mix(in srgb, var(--gold) 9%, transparent) 4px, transparent 5px) 0 0/34px 34px,
  var(--bg); }
h2 { letter-spacing:.1em; text-transform:uppercase; color:var(--primary); }
h2::before, h2::after { content:"❦"; display:inline-block; margin:0 .5em; font-size:.7em; color:var(--gold); vertical-align:.15em; }
h2::before { transform:scaleX(-1); }
.lead { font-size:1.15rem; }
.detail-card, .rsvp form, .thanks { border:2px solid var(--primary); outline:1px solid var(--gold); outline-offset:-7px; box-shadow:none; }
.d-item svg { stroke:var(--primary); }
.d-item small, .families small { color:var(--gold); }

/* Açılış: çini kapılar */
.tpl-lale .opening { background:var(--deep); perspective:1600px; transition:opacity .8s var(--ease) 1.2s, visibility 0s 2.3s; }
.door { position:absolute; top:0; bottom:0; width:50%; z-index:1; border:10px solid var(--primary); outline:2px solid var(--gold); outline-offset:-18px;
  background:
    repeating-conic-gradient(from 45deg, color-mix(in srgb, var(--primary) 16%, var(--paper)) 0 25%, var(--paper) 0 50%) 0 0/44px 44px;
  transition:transform 1.3s cubic-bezier(.6,0,.25,1); backface-visibility:hidden; }
.door i { position:absolute; inset:34px; border:2px solid var(--gold); background:radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--gold) 30%, transparent) 3px, transparent 4px) 0 0/22px 22px; }
.door.left { left:0; transform-origin:0 50%; border-right-width:5px; }
.door.right { right:0; transform-origin:100% 50%; border-left-width:5px; }
.medallion { z-index:3; display:grid; justify-items:center; gap:10px; }
.medallion svg { width:150px; height:150px; filter:drop-shadow(0 12px 20px rgb(0 0 0 / .25)); transition:transform .8s var(--ease); }
.medallion b { padding:6px 16px; background:var(--paper); border:1px solid var(--gold); font:400 1.9rem/1.2 var(--f-display); color:var(--primary); white-space:nowrap; }
.tpl-lale .opening-eyebrow { z-index:3; padding:6px 12px; background:var(--paper); }
.tpl-lale .opening-hint { z-index:3; padding:4px 12px; background:var(--paper); border-radius:99px; color:var(--ink); }
.is-opening .medallion { opacity:0; transform:scale(.7); transition:opacity .4s, transform .5s; }
.is-opening .tpl-lale .opening-eyebrow, .tpl-lale.is-opening .opening-eyebrow { opacity:0; transition:opacity .3s; }
.is-stage2 .door.left { transform:rotateY(100deg); }
.is-stage2 .door.right { transform:rotateY(-100deg); }

/* Kapak */
.hero { gap:22px; padding-top:0; }
.tile-band { display:grid; grid-template-columns:repeat(5,1fr); width:calc(100% + 40px); margin:0 -20px 10px; color:var(--primary); border-bottom:3px solid var(--gold); }
.tile-band svg { display:block; width:100%; height:auto; }
.mihrab { position:relative; width:min(62vw,240px); aspect-ratio:3/4; padding:9px; background:var(--primary);
  clip-path:polygon(50% 0, 66% 7%, 82% 19%, 94% 36%, 100% 52%, 100% 100%, 0 100%, 0 52%, 6% 36%, 18% 19%, 34% 7%); }
.mihrab > img, .mihrab-in { width:100%; height:100%; object-fit:cover;
  clip-path:polygon(50% 0, 66% 7%, 82% 19%, 94% 36%, 100% 52%, 100% 100%, 0 100%, 0 52%, 6% 36%, 18% 19%, 34% 7%); }
.mihrab-in { display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px; padding-bottom:22px; color:var(--primary);
  background:repeating-conic-gradient(from 45deg, color-mix(in srgb, var(--primary) 10%, var(--paper)) 0 25%, var(--paper) 0 50%) 0 0/26px 26px; }
.mihrab-in svg { width:46%; }
.mihrab-in span { font:400 1.2rem var(--f-head); letter-spacing:.2em; color:var(--primary); background:var(--paper); padding:2px 10px; }
.names { font:400 clamp(3.4rem,15vw,4.8rem)/1 var(--f-display); color:var(--primary); }
.names em { font:400 .5em/1.3 var(--f-head); color:var(--gold); font-style:normal; }
.eyebrow { color:var(--primary); font-weight:600; }
.date-line { font-family:var(--f-head); letter-spacing:.14em; }
.date-line span + span::before { content:"❀"; font-size:.8em; vertical-align:0; color:var(--gold); }

.cd div { border:0; border-radius:0; box-shadow:none; background:var(--primary); clip-path:polygon(29% 0,71% 0,100% 29%,100% 71%,71% 100%,29% 100%,0 71%,0 29%); }
.cd b { font-family:var(--f-head); color:var(--paper); }
.cd small { color:color-mix(in srgb, var(--paper) 80%, transparent); }
.amp { font-family:var(--f-display); }
.sign b { font-size:3rem; }
.note p { border-block:2px solid var(--primary); }
