/* ===== Sinematik açılış sahneleri ===== */
.inv { --seal: var(--accent); --env: color-mix(in srgb, var(--accent2) 22%, var(--paper)); }

/* kâğıt dokusu (SVG gürültü) */
.paper-tex {
  background-color: var(--env);
  background-image: 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 0 0 0 0 0 0 0 0 0 0 0 .22 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(160deg, rgba(255,255,255,.35), rgba(0,0,0,.04));
}
/* zarf iç astarı: koyu zemin, altın desen */
.liner {
  background-color: color-mix(in srgb, var(--seal) 78%, #000);
  background-image:
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent2) 70%, #fff) 1.4px, transparent 1.8px),
    radial-gradient(circle at 0 0, transparent 9px, color-mix(in srgb, var(--accent2) 45%, transparent) 9.5px, transparent 10.5px),
    linear-gradient(115deg, rgba(255,255,255,.12), transparent 40%, rgba(255,255,255,.08) 60%, transparent);
  background-size: 18px 18px, 18px 18px, 100% 100%;
}

/* varak yazı */
.foil, .foil * {
  background: linear-gradient(105deg, color-mix(in srgb, var(--accent) 70%, #000) 0%, var(--accent) 22%, color-mix(in srgb, var(--accent) 30%, #fff) 34%, var(--accent) 46%, color-mix(in srgb, var(--accent) 70%, #000) 62%, var(--accent) 78%, color-mix(in srgb, var(--accent) 30%, #fff) 90%, var(--accent) 100%);
  background-size: 280% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important;
  animation: foil 5.5s ease-in-out infinite alternate;
}
.foil * { animation: none; background: none; }
@keyframes foil { from { background-position: 0% 50%; } to { background-position: 100% 50%; } }

/* ortak: hitap ve toz */
.intro .to { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: opacity .5s, transform .5s; position: relative; z-index: 3; }
.to-label { font-family: var(--f-display); font-size: 11px; letter-spacing: .38em; text-transform: uppercase; color: var(--accent); }
.to-name { font-family: var(--f-script); font-size: clamp(30px, 10cqi, 42px); color: var(--ink); line-height: 1.15; }
.dark .to-name, .intro-doors .to-name, .intro-candle .to-name { color: var(--ink); }
.intro.opening .to, .intro.opening .intro-hint { opacity: 0; transform: translateY(12px); animation: none; }
.dust { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dust b, .sky b { position: absolute; left: var(--x); top: var(--y); width: calc(3px * var(--s)); height: calc(3px * var(--s)); border-radius: 50%; background: color-mix(in srgb, var(--foil, var(--accent)) 55%, #fff); box-shadow: 0 0 8px 1px color-mix(in srgb, var(--foil, var(--accent)) 70%, transparent); animation: twinkle var(--d) ease-in-out var(--delay) infinite; }

/* ================= ZARF ================= */
.intro-envelope { background: radial-gradient(90% 65% at 50% 42%, var(--paper) 0%, var(--bg) 70%, color-mix(in srgb, var(--bg) 80%, #000) 130%); gap: 34px; }
.lux-rays { position: absolute; left: 50%; top: 42%; width: 190cqi; aspect-ratio: 1; transform: translate(-50%, -50%); pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--foil, var(--accent)) 10%, transparent) 0deg 4deg, transparent 4deg 13deg);
  -webkit-mask-image: radial-gradient(circle, #000 0%, transparent 55%); mask-image: radial-gradient(circle, #000 0%, transparent 55%);
  animation: spin 80s linear infinite; transition: opacity 1.2s; }
.intro-envelope.opening .lux-rays { opacity: 2; animation-duration: 12s; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

.env-stage { position: relative; z-index: 2; perspective: 1400px; animation: envFloat 5.5s ease-in-out infinite; }
@keyframes envFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
.env { position: relative; width: min(84cqi, 360px); aspect-ratio: 360 / 250;
  transform: rotateX(calc(var(--ty, 0) * -12deg)) rotateY(calc(var(--tx, 0) * 16deg)); transition: transform .4s ease-out; }
.env-shadow { position: absolute; left: 8%; right: 8%; bottom: -26px; height: 26px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.28), transparent); filter: blur(4px); transition: opacity .6s; }
.env-back { position: absolute; inset: 0; border-radius: 10px; z-index: 1; filter: brightness(.9); }
.env-letter { position: absolute; left: 5%; right: 5%; top: 4%; height: 92%; z-index: 2; border-radius: 3px; background-color: var(--paper); box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.letter-in { position: absolute; inset: 7px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); outline: 1px solid color-mix(in srgb, var(--accent) 22%, transparent); outline-offset: -5px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 9%; gap: 6px; text-align: center; }
.l-eb { font-family: var(--f-display); font-size: 8px; letter-spacing: .34em; text-transform: uppercase; color: var(--accent); }
.l-names { font-family: var(--f-script); font-size: clamp(22px, 8cqi, 32px); color: var(--ink); line-height: 1.1; }
.l-names i { font-style: normal; font-size: .7em; color: var(--accent); }
.l-rule { width: 40px; height: 1px; background: var(--accent); opacity: .6; }
.l-date { font-family: var(--f-display); font-size: 12px; letter-spacing: .2em; color: var(--muted); }
.env-pocket { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; filter: drop-shadow(0 -1px 1px rgba(0,0,0,.06)); }
.env-pocket .pk-a { stop-color: color-mix(in srgb, var(--env) 92%, #000); }
.env-pocket .pk-b { stop-color: var(--env); }
.env-pocket .pk-c { stop-color: color-mix(in srgb, var(--env) 80%, #fff); }
.pocket-tex { position: absolute; inset: 0; z-index: 3; pointer-events: none; background-color: transparent; opacity: .55; mix-blend-mode: multiply; border-radius: 10px;
  clip-path: polygon(0 0, 49% 51%, 51% 51%, 100% 0, 100% 100%, 0 100%); }
.flap-wrap { position: absolute; left: 0; right: 0; top: 0; height: 60%; z-index: 4; perspective: 1100px; transition: z-index 0s linear .85s; }
.flap { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.55,0,.25,1) .4s; }
.flap-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 10px 10px 0 0;
  clip-path: polygon(0 0, 100% 0, 54% 94%, 50% 100%, 46% 94%); }
.flap-out { filter: brightness(1.04); box-shadow: inset 0 -2px 0 rgba(0,0,0,.05); }
.flap-out::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,.07)); }
.flap-in { transform: rotateY(180deg); }
.flap-in::after { content: ''; position: absolute; inset: 6px 6px 0; border: 1px solid color-mix(in srgb, var(--accent2) 60%, transparent); clip-path: inherit; }

.seal { position: absolute; left: 50%; top: 60%; width: 26%; aspect-ratio: 1; z-index: 6; transform: translate(-50%, -50%); filter: drop-shadow(0 4px 5px rgba(0,0,0,.35)); }
.seal-half { position: absolute; inset: 0; transition: transform 1.05s cubic-bezier(.5,.02,.85,.5), opacity .45s ease .6s; }
.seal-half svg { width: 100%; height: 100%; display: block; overflow: visible; }
.seal-half.l { clip-path: polygon(-20% -20%, 53% -20%, 46% 20%, 56% 38%, 46% 57%, 55% 76%, 49% 120%, -20% 120%); }
.seal-half.r { clip-path: polygon(53% -20%, 120% -20%, 120% 120%, 49% 120%, 55% 76%, 46% 57%, 56% 38%, 46% 20%); }
.seal-txt { font-family: var(--f-display); font-size: 21px; font-weight: 600; letter-spacing: .5px; }
.seal-flash { position: absolute; inset: 20%; border-radius: 50%; pointer-events: none; }
.seal::after { content: ''; position: absolute; inset: -14%; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); animation: sealPulse 2.6s ease-out infinite; }
@keyframes sealPulse { 0% { transform: scale(.8); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }

.intro-envelope.opening .env-stage { animation: none; }
.intro-envelope.opening .env { transform: none; }
.intro-envelope.opening .seal::after { display: none; }
.intro-envelope.opening .seal-half.l { transform: translate(-55%, 210%) rotate(-62deg); opacity: 0; }
.intro-envelope.opening .seal-half.r { transform: translate(50%, 230%) rotate(48deg); opacity: 0; }
.intro-envelope.opening .seal-flash { animation: flash .7s ease-out forwards; }
@keyframes flash { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, #fff); opacity: 1; } 100% { box-shadow: 0 0 0 60px transparent; opacity: 0; } }
.intro-envelope.opening .flap { transform: rotateX(180deg); }
.intro-envelope.opening .flap-wrap { z-index: 1; }
.intro-envelope.opening .env-letter { animation: letterOut 2.5s cubic-bezier(.45,0,.2,1) 1.25s forwards; }
@keyframes letterOut {
  0% { transform: translateY(0); z-index: 2; opacity: 1; }
  42% { transform: translateY(-70%); z-index: 2; opacity: 1; box-shadow: 0 10px 30px rgba(0,0,0,.18); }
  54% { transform: translateY(-70%); z-index: 7; opacity: 1; }
  80% { transform: translateY(-20%) scale(2.2); z-index: 7; opacity: 1; }
  100% { transform: translateY(-6%) scale(3.2); z-index: 7; opacity: 0; }
}
.intro-envelope.opening .env-back, .intro-envelope.opening .env-pocket, .intro-envelope.opening .pocket-tex, .intro-envelope.opening .flap-wrap { animation: envDrop 1s cubic-bezier(.5,0,.9,.5) 2.35s forwards; }
.intro-envelope.opening .env-shadow { opacity: 0; transition-delay: 2.3s; }
@keyframes envDrop { to { transform: translateY(85%); opacity: 0; } }

/* ================= SARAY KAPISI ================= */
.intro-doors { background: radial-gradient(80% 60% at 50% 42%, color-mix(in srgb, var(--accent) 16%, var(--bg)), color-mix(in srgb, var(--bg) 55%, #000) 100%); gap: 30px; --door: color-mix(in srgb, var(--accent2) 70%, var(--bg)); }
.doors-stage { position: relative; z-index: 2; width: min(66cqi, 280px); aspect-ratio: .64; transform-origin: 50% 58%; }
.door-arch-out { position: absolute; inset: -16px -16px -2px; border-radius: 999px 999px 0 0; border: 2px solid var(--accent); box-shadow: inset 0 0 0 5px color-mix(in srgb, var(--bg) 60%, #000), inset 0 0 0 6px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 50px color-mix(in srgb, var(--accent) 25%, transparent); }
.door-arch-out::before { content: ''; position: absolute; top: -26px; left: 50%; width: 30px; height: 30px; transform: translateX(-50%) rotate(45deg); border: 2px solid var(--accent); background: color-mix(in srgb, var(--bg) 60%, #000); }
.door-frame { position: absolute; inset: 0; border-radius: 999px 999px 3px 3px; overflow: hidden; perspective: 1300px; box-shadow: 0 30px 60px -10px rgba(0,0,0,.7); }
.door-light { position: absolute; inset: 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 62%, #fffaf0 0%, color-mix(in srgb, var(--accent) 45%, #fff) 30%, color-mix(in srgb, var(--accent) 60%, #000) 100%); }
.dl-names { font-family: var(--f-script); font-size: clamp(28px, 10cqi, 40px); color: color-mix(in srgb, var(--accent) 60%, #000); opacity: 0; transform: scale(.8); transition: all 1.2s ease .9s; text-align: center; line-height: 1.1; padding: 0 10px; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform 1.9s cubic-bezier(.62,0,.2,1) .15s; }
.door.l { left: 0; transform-origin: 0 50%; } .door.r { right: 0; transform-origin: 100% 50%; }
.door-face { position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.28), transparent 18%, rgba(255,255,255,.05) 50%, transparent 82%, rgba(0,0,0,.32)),
    repeating-linear-gradient(90deg, rgba(0,0,0,.06) 0 3px, transparent 3px 9px), color-mix(in srgb, var(--door) 78%, #000); }
.door.l .door-face { border-right: 1px solid rgba(0,0,0,.6); } .door.r .door-face { border-left: 1px solid rgba(255,255,255,.08); }
.dp { position: absolute; left: 15%; right: 15%; border: 1.5px solid color-mix(in srgb, var(--accent) 85%, transparent); box-shadow: inset 0 0 0 4px rgba(0,0,0,.18), inset 0 0 0 5px color-mix(in srgb, var(--accent) 35%, transparent), 0 1px 0 rgba(255,255,255,.06); }
.dp-top { top: 13%; height: 29%; border-radius: 999px 999px 4px 4px; background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--accent) 22%, transparent), transparent 70%); }
.dp-mid { top: 47%; height: 20%; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 80%, transparent) 1.3px, transparent 1.8px) 0 0 / 11px 11px; }
.dp-low { top: 72%; height: 20%; }
.ring { position: absolute; top: 55%; width: 20px; height: 20px; border-radius: 50%; border: 2.5px solid var(--accent); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.ring::before { content: ''; position: absolute; left: 50%; top: -9px; width: 10px; height: 10px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff6d8, var(--accent) 60%); }
.door.l .ring { right: 7%; } .door.r .ring { left: 7%; }
.door-medal { position: absolute; left: 50%; top: 30%; width: 62px; height: 62px; transform: translate(-50%, -50%); border-radius: 50%; z-index: 3; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--accent) 40%, #fff), var(--accent) 55%, color-mix(in srgb, var(--accent) 55%, #000)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--bg) 60%, #000), 0 0 0 4px var(--accent), 0 6px 14px rgba(0,0,0,.5);
  font-family: var(--f-script); font-size: 22px; color: color-mix(in srgb, var(--accent) 35%, #000); transition: transform .5s ease, opacity .5s; }
.door-medal i { font-style: normal; font-size: .6em; }
.door-steps { position: absolute; left: -30px; right: -30px; bottom: -14px; height: 14px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 40%, #000), color-mix(in srgb, var(--bg) 50%, #000)); border-radius: 2px; }
.intro-doors.opening .door-medal { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
.intro-doors.opening .door.l { transform: rotateY(104deg); }
.intro-doors.opening .door.r { transform: rotateY(-104deg); }
.intro-doors.opening .dl-names { opacity: 1; transform: none; }
.intro-doors.opening .doors-stage { animation: through 1.4s cubic-bezier(.6,0,.4,1) 1.7s forwards; }
@keyframes through { to { transform: scale(5.5); opacity: 0; } }
.intro-doors::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #fffaf0, color-mix(in srgb, var(--accent) 40%, #fff) 60%); opacity: 0; pointer-events: none; transition: opacity 1s ease 2s; }
.intro-doors.opening::after { opacity: .9; }

/* ================= MASAL KİTABI ================= */
.intro-book { background: radial-gradient(80% 60% at 50% 45%, var(--paper), var(--bg) 75%, color-mix(in srgb, var(--bg) 82%, #000)); gap: 36px; }
.book-stage { position: relative; z-index: 2; perspective: 1800px; }
.book { position: relative; width: min(52cqi, 240px); aspect-ratio: .72; transform-style: preserve-3d;
  transform: rotateX(10deg) rotateY(calc(var(--tx, 0) * 14deg - 8deg)); transition: transform 1.3s cubic-bezier(.5,0,.2,1); }
.book-shadow { position: absolute; left: 0; right: -10%; bottom: -22px; height: 24px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.3), transparent); filter: blur(5px); transition: transform 1.3s; }
.page, .leaf { position: absolute; inset: 0; transform-origin: 0 50%; transform-style: preserve-3d; }
.page.p-last { transform: translateZ(0); background-color: var(--paper); border-radius: 2px 6px 6px 2px; box-shadow: 1px 1px 0 #e9e2d6, 2px 2px 0 #ddd3c3, 3px 3px 0 #e9e2d6, 4px 4px 0 #d6cbb8, 6px 8px 18px rgba(0,0,0,.25); }
.page-in { position: absolute; inset: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; }
.leaf { transition: transform 1.25s cubic-bezier(.6,0,.25,1); }
.leaf.cover { transform: translateZ(3px); } .leaf-1 { transform: translateZ(2px); } .leaf-2 { transform: translateZ(1px); }
.leaf-front, .leaf-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 2px 6px 6px 2px; overflow: hidden; }
.leaf-front.paper-tex, .leaf-back.paper-tex { background-color: var(--paper); }
.leaf-back { transform: rotateY(180deg); border-radius: 6px 2px 2px 6px; background-image: linear-gradient(270deg, rgba(0,0,0,.14), transparent 14%) !important; }
.leaf-front:not(.cover-front)::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,0,0,.14), transparent 14%); }
.tale { position: absolute; left: 13%; right: 11%; top: 50%; transform: translateY(-50%); margin: 0; font-family: var(--f-body); font-style: italic; font-size: clamp(13px, 4.4cqi, 17px); line-height: 1.6; color: var(--ink); }
.tale .drop { float: left; font-family: var(--f-display); font-style: normal; font-size: 3em; line-height: .85; margin: 4px 6px 0 0; color: var(--accent); }
.leaf-2 .tale { text-align: center; font-size: clamp(15px, 5.2cqi, 20px); }
.cover-front { background-color: color-mix(in srgb, var(--accent2) 72%, #000);
  background-image: linear-gradient(90deg, rgba(0,0,0,.45) 0, rgba(255,255,255,.1) 3.5%, rgba(0,0,0,.15) 7%, transparent 11%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .35 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.06), 4px 6px 16px rgba(0,0,0,.35); }
.cover-frame { position: absolute; inset: 9% 11% 9% 15%; border: 1.5px solid var(--accent); outline: 1px solid color-mix(in srgb, var(--accent) 50%, transparent); outline-offset: 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 10px; }
.cv-orn { color: var(--accent); font-size: 22px; }
.cv-eb { font-family: var(--f-display); font-size: 9px; letter-spacing: .3em; text-transform: uppercase; color: var(--accent); }
.cv-names { font-family: var(--f-script); font-size: clamp(24px, 9cqi, 36px); line-height: 1.1; }
.cv-names i { font-style: normal; font-size: .7em; display: block; }
.endpaper { background-color: color-mix(in srgb, var(--accent2) 72%, #000) !important;
  background-image: radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--accent) 80%, transparent) 1.2px, transparent 1.6px), radial-gradient(circle at 0 0, transparent 8px, color-mix(in srgb, var(--accent) 40%, transparent) 8.5px, transparent 9.5px), linear-gradient(270deg, rgba(0,0,0,.3), transparent 14%) !important;
  background-size: 16px 16px, 16px 16px, 100% 100% !important; }
.intro-book.opening .book { transform: translateX(50%) rotateX(4deg) scale(.86); }
.intro-book.opening .book-shadow { transform: translateX(-10%) scaleX(1.9); }
.intro-book.opening .leaf.cover { transform: rotateY(-178deg) translateZ(3px); transition-delay: .1s; }
.intro-book.opening .leaf-1 { transform: rotateY(-176deg) translateZ(2px); transition-delay: 1.35s; }
.intro-book.opening .leaf-2 { transform: rotateY(-174deg) translateZ(1px); transition-delay: 2.05s; }
.intro-book.opening .book-stage { animation: bookZoom 1.1s cubic-bezier(.6,0,.4,1) 2.9s forwards; }
@keyframes bookZoom { to { transform: translateX(-24%) scale(2.4); opacity: 0; } }

/* ================= MUM IŞIĞI ================= */
.intro-candle { background: radial-gradient(70% 50% at 50% 72%, #1c130c, #060403 70%); }
.intro-candle::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease;
  background: radial-gradient(circle at 50% 68%, #fff4dc 0%, color-mix(in srgb, var(--bg) 70%, #ffe7c2) 55%, var(--bg) 100%); }
.intro-candle.stage2::after { opacity: 1; }
.candle-glow { position: absolute; left: 50%; top: 66%; width: 200cqi; aspect-ratio: 1; transform: translate(-50%, -50%) scale(0); border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,196,120,.5) 0%, rgba(255,150,60,.18) 25%, rgba(255,120,40,.05) 45%, transparent 60%); transition: transform 3s cubic-bezier(.2,.6,.2,1) .3s; animation: glowPulse 3s ease-in-out infinite; }
@keyframes glowPulse { 50% { filter: brightness(1.15); } }
.intro-candle.opening .candle-glow { transform: translate(-50%, -50%) scale(1); }
.candles { position: absolute; bottom: 17%; left: 50%; transform: translateX(-50%); display: flex; align-items: flex-end; gap: 22px; z-index: 2; }
.candle { position: relative; width: 34px; height: calc(150px * var(--h)); display: flex; flex-direction: column; align-items: center; }
.wax { position: relative; width: 100%; height: 100%; border-radius: 4px 4px 3px 3px; background: linear-gradient(90deg, #6f6355, #b8a990 30%, #d6c9b2 50%, #8a7c69); transition: background 1.2s var(--ld), box-shadow 1.2s var(--ld); }
.wax::before { content: ''; position: absolute; top: -5px; left: 0; right: 0; height: 10px; border-radius: 50%; background: #9c8e78; transition: background 1.2s var(--ld); }
.drip { position: absolute; top: 2px; left: 62%; width: 7px; height: 22px; border-radius: 0 0 6px 6px; background: inherit; filter: brightness(1.05); }
.wick { position: absolute; top: -14px; width: 2px; height: 11px; background: #1a1410; border-radius: 1px; z-index: 2; }
.flame { position: absolute; bottom: calc(100% + 8px); width: 18px; height: 40px; transform: scale(0); transform-origin: 50% 100%; transition: transform .55s cubic-bezier(.3,1.7,.5,1) var(--ld); }
.flame::after { content: ''; position: absolute; left: 50%; top: 40%; width: 120px; height: 120px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(255,190,100,.45), transparent 65%); }
.flame i { position: absolute; inset: 0; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%; transform-origin: 50% 100%;
  background: radial-gradient(ellipse at 50% 78%, #fff 0, #fff3c4 18%, #ffc85e 45%, rgba(255,128,30,.6) 68%, transparent 80%); animation: flicker 1.6s ease-in-out infinite; filter: blur(.4px); }
.flame i:nth-child(2) { inset: 55% 30% 4%; background: radial-gradient(ellipse at 50% 70%, rgba(120,160,255,.85), rgba(80,120,255,0) 70%); animation-duration: 1.1s; }
@keyframes flicker { 0%, 100% { transform: scale(1, 1) skewX(0); } 20% { transform: scale(.95, 1.08) skewX(2deg); } 45% { transform: scale(1.03, .94) skewX(-2.5deg); } 70% { transform: scale(.97, 1.05) skewX(1deg); } }
.intro-candle.opening .flame { transform: scale(1); }
.intro-candle.opening .wax { background: linear-gradient(90deg, #cdb998, #fbefd9 35%, #fff8ea 52%, #d4bf9d); box-shadow: inset 0 10px 14px -6px rgba(255,170,70,.75); }
.intro-candle.opening .wax::before { background: #ffe6b0; }
.candle-copy { position: absolute; top: 18%; left: 0; right: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; opacity: 0; transform: translateY(16px); filter: blur(8px); transition: opacity 1.4s ease .8s, transform 1.4s ease .8s, filter 1.4s ease .8s; }
.cc-to { font-family: var(--f-display); font-size: 11px; letter-spacing: .34em; text-transform: uppercase; color: #e9c98f; }
.cc-names { font-family: var(--f-script); font-size: clamp(40px, 14cqi, 60px); color: #fbe7c3; line-height: 1.05; text-shadow: 0 0 28px rgba(255,180,90,.55); padding: 0 16px; }
.cc-names i { font-style: normal; font-size: .6em; display: block; }
.cc-date { font-family: var(--f-display); letter-spacing: .28em; font-size: 13px; color: #d9b98a; text-transform: uppercase; }
.intro-candle.opening .candle-copy { opacity: 1; transform: none; filter: none; }
.intro-candle .intro-hint { position: absolute; bottom: 8%; color: #b8a080; }

/* ================= ÇİÇEK AÇILIŞI ================= */
.intro-bloom { background: radial-gradient(85% 60% at 50% 45%, var(--paper), var(--bg) 75%); gap: 30px; }
.bloom-stage { position: relative; z-index: 2; width: min(74cqi, 300px); aspect-ratio: 1; animation: sway 6s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
.bloom { position: absolute; inset: 0; transform: rotate(calc(var(--tx, 0) * 10deg)); transition: transform .5s; }
.petal { position: absolute; left: 50%; bottom: 50%; width: 26%; height: 47%; margin-left: -13%; transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 64% 64% 36% 36%;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 65%, #000) 0%, var(--accent) 38%, color-mix(in srgb, var(--accent) 55%, var(--accent2)) 78%, var(--accent2) 100%);
  box-shadow: inset 0 -14px 22px rgba(0,0,0,.14), inset 4px 0 10px rgba(255,255,255,.25), 0 3px 8px rgba(0,0,0,.12);
  transform: rotate(calc((var(--i) / var(--n) - .5) * 44deg)) scale(.62, .78);
  transition: transform 1.55s cubic-bezier(.3,1.25,.4,1) calc(var(--i) * 45ms); }
.petal::after { content: ''; position: absolute; left: 50%; top: 14%; bottom: 6%; width: 1px; background: linear-gradient(transparent, rgba(255,255,255,.45)); }
.petal.in { width: 20%; margin-left: -10%; height: 37%; filter: brightness(1.15); transform: rotate(calc((var(--i) / var(--n) - .5) * 26deg)) scale(.6, .7); }
.petal.mid { width: 23%; margin-left: -11.5%; height: 42%; filter: brightness(1.07); transform: rotate(calc((var(--i) / var(--n) - .5) * 34deg)) scale(.6, .74); }
.bloom-core { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; transform: translate(-50%, -50%) scale(.2); opacity: 0; z-index: 3; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #fff8e4, color-mix(in srgb, var(--accent2) 60%, #f3d48e) 55%, color-mix(in srgb, var(--accent2) 50%, #8a6a2f)); box-shadow: 0 0 0 3px rgba(255,255,255,.6), 0 8px 24px rgba(0,0,0,.25);
  font-family: var(--f-script); font-size: clamp(22px, 7cqi, 30px); color: var(--ink); transition: transform 1.1s cubic-bezier(.3,1.5,.5,1) .7s, opacity .6s .7s; }
.bloom-core i { font-style: normal; font-size: .6em; }
.intro-bloom.opening .bloom-stage { animation: none; }
.intro-bloom.opening .petal.out { transform: rotate(var(--a)) scale(1); }
.intro-bloom.opening .petal.mid { transform: rotate(var(--a)) scale(.96); transition-delay: calc(.12s + var(--i) * 40ms); }
.intro-bloom.opening .petal.in { transform: rotate(var(--a)) scale(.92); transition-delay: calc(.25s + var(--i) * 40ms); }
.intro-bloom.opening .bloom-core { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.intro-bloom.opening .petal { animation: petalFly 1.3s cubic-bezier(.5,0,.7,.4) calc(1.75s + var(--i) * 30ms) forwards; }
@keyframes petalFly { to { transform: rotate(var(--a)) translateY(-190%) scale(1.35); opacity: 0; } }
.intro-bloom.opening .bloom-core { animation: coreOut 1s ease-in 2.1s forwards; }
@keyframes coreOut { to { transform: translate(-50%, -50%) scale(3.4); opacity: 0; } }

/* ================= PERDE ================= */
.intro-curtain { background: #000; }
.spot { position: absolute; inset: 0; background: radial-gradient(60% 50% at 50% 0%, rgba(255,236,190,.4), transparent 70%); opacity: 0; transition: opacity 1s .6s; z-index: 4; pointer-events: none; }
.curtain { position: absolute; top: 0; bottom: 0; width: 51%; z-index: 1; transition: transform 1.6s cubic-bezier(.7,0,.2,1);
  background: linear-gradient(90deg, rgba(0,0,0,.42), transparent 28%, rgba(255,255,255,.07) 50%, transparent 72%, rgba(0,0,0,.42)) 0 0 / 44px 100%, color-mix(in srgb, var(--bg) 82%, #000); }
.curtain.left { left: 0; transform-origin: 0 50%; border-right: 3px solid var(--accent); box-shadow: inset -24px 0 40px rgba(0,0,0,.45); }
.curtain.right { right: 0; transform-origin: 100% 50%; border-left: 3px solid var(--accent); box-shadow: inset 24px 0 40px rgba(0,0,0,.45); }
.curtain::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 14px; background: repeating-linear-gradient(90deg, var(--accent) 0 2px, transparent 2px 5px); opacity: .8; }
.tie { position: absolute; top: 56%; left: -10%; right: -10%; height: 9px; border-radius: 9px; background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 50%, #fff), var(--accent), color-mix(in srgb, var(--accent) 60%, #000)); opacity: 0; transition: opacity .4s 1.2s; }
.curtain-valance { position: absolute; top: 0; left: 0; right: 0; height: 52px; z-index: 2; border-bottom: 2px solid var(--accent);
  background: radial-gradient(circle at 50% 0, transparent 19px, color-mix(in srgb, var(--bg) 66%, #000) 20px) 0 100% / 44px 26px repeat-x, linear-gradient(color-mix(in srgb, var(--bg) 66%, #000), color-mix(in srgb, var(--bg) 66%, #000)) 0 0 / 100% 26px no-repeat;
  transition: transform 1.2s ease .5s; }
.curtain-center { position: relative; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 20px; transition: opacity .5s, transform .8s; }
.curtain-center .monogram { background: color-mix(in srgb, var(--bg) 60%, #000); box-shadow: 0 0 50px color-mix(in srgb, var(--accent) 35%, transparent); }
.intro-curtain.opening .curtain { transform: scaleX(.13); }
.intro-curtain.opening .tie, .intro-curtain.opening .spot { opacity: 1; }
.intro-curtain.opening .curtain-valance { transform: translateY(-100%); }
.intro-curtain.opening .curtain-center { opacity: 0; transform: scale(.85); }
.intro-curtain.opening { background: transparent; transition-delay: .5s; }

/* ================= YILDIZLAR ================= */
.intro-stars { background: radial-gradient(100% 70% at 50% 30%, color-mix(in srgb, var(--accent2) 32%, var(--bg)), var(--bg) 70%, color-mix(in srgb, var(--bg) 60%, #000)); }
.sky { position: absolute; inset: 0; transition: transform 1.6s cubic-bezier(.6,0,.4,1), opacity 1.4s; }
.stars-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 20px; transition: transform 1.3s ease, opacity 1s; }
.shooting { position: absolute; top: 18%; left: 110%; width: 160px; height: 2px; background: linear-gradient(90deg, #fff, var(--accent), transparent); transform: rotate(-24deg); animation: shoot 5s ease-in 1s infinite; border-radius: 2px; }
.shooting.s2 { animation-delay: 3.4s; animation-duration: 6s; }
@keyframes shoot { 0%, 70% { left: 110%; top: 12%; opacity: 0; } 72% { opacity: 1; } 100% { left: -40%; top: 48%; opacity: 0; } }
.intro-stars.opening .sky { transform: scale(3); opacity: 0; }
.intro-stars.opening .stars-center { transform: scale(2.4); opacity: 0; }

/* kazı-kazan ek */
.intro-scratch .scratch-wrap { position: relative; z-index: 2; }
.intro-scratch.revealed .scratch-secret { animation: pop .6s cubic-bezier(.3,1.6,.5,1); }

@media (prefers-reduced-motion: reduce) { .lux-rays, .dust, .env-stage, .bloom-stage { animation: none !important; } }
.env-letter::before { content: ''; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.75), rgba(255,255,255,.45)); border-radius: inherit; }

/* tomurcuğun sapı ve yaprağı */
.bloom-stage::before { content: ''; position: absolute; left: calc(50% - 2px); top: 50%; width: 4px; height: 46%; border-radius: 4px; background: linear-gradient(90deg, #4f6a42, #7d9a66, #4f6a42); transition: opacity .6s; }
.bloom-stage::after { content: ''; position: absolute; left: 50%; top: 72%; width: 26%; height: 9%; border-radius: 0 100% 0 100%; background: linear-gradient(135deg, #8aa872, #4f6a42); transform-origin: 0 100%; transform: rotate(-24deg); transition: opacity .6s; }
.intro-bloom.opening .bloom-stage::before, .intro-bloom.opening .bloom-stage::after { opacity: 0; }
.bloom { z-index: 1; }

/* ================= TAM EKRAN ZARF ================= */
.intro-fullenv { z-index: 7; display: block; background: var(--env); perspective: 1000px; }
.intro-fullenv::after { content: ''; position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .16 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.fe-inside { position: absolute; inset: 0; background: color-mix(in srgb, var(--env) 82%, #000); }
.fe-inside.has-art { background: var(--paper); }
.fe-inside svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .95; }
.fe-letter { position: absolute; left: 13%; right: 13%; top: 20%; height: 52%; z-index: 2; border-radius: 4px; background-color: var(--paper); box-shadow: 0 4px 18px rgba(0,0,0,.14); }
.fe-letter .letter-in { padding-top: 14%; gap: 10px; }
.fe-letter .l-names { font-size: clamp(30px, 11cqi, 46px); }
.fe-letter .l-eb { font-size: 10px; }
.fe-pocket { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; filter: drop-shadow(0 -2px 3px rgba(0,0,0,.08)); }
.fe-pocket .pp, .fe-out .pp { fill: var(--env); }
.fe-pocket .side { fill: color-mix(in srgb, var(--env) 93%, #000); }
.fe-flap-wrap { position: absolute; inset: 0; z-index: 4; perspective: 1100px; pointer-events: none; transition: z-index 0s linear .75s; }
.fe-flap { position: absolute; inset: 0; transform-origin: 50% 0; transform-style: preserve-3d; transition: transform 1.15s cubic-bezier(.55,0,.25,1) .3s; }
.fe-face { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.fe-in { transform: rotateY(180deg); }
.fe-in .pin { fill: color-mix(in srgb, var(--env) 86%, #000); }
.fe-in .pin.art { fill: var(--paper); }
.fe-seal { position: absolute; left: 50%; z-index: 6; width: min(25cqi, 104px); aspect-ratio: 1; transform: translate(-50%, -50%); filter: drop-shadow(0 5px 6px rgba(0,0,0,.3)); }
.fe-seal .seal-half { position: absolute; inset: 0; transition: transform 1.05s cubic-bezier(.5,.02,.85,.5), opacity .45s ease .6s; }
.seal-pearl .fe-seal { width: 46px; }
.pearl { display: block; width: 100%; height: 100%; border-radius: 50%; position: relative; transition: transform .7s cubic-bezier(.5,0,.8,.4), opacity .5s .3s;
  background: radial-gradient(circle at 34% 28%, #fff 0, #fdfbf6 16%, #ece6da 50%, #d3c9b7 82%, #bcb19c 100%);
  box-shadow: 0 4px 8px rgba(0,0,0,.25), inset -3px -5px 9px rgba(0,0,0,.1), inset 2px 3px 5px rgba(255,255,255,.95); }
.pearl::after { content: ''; position: absolute; inset: 18% 22% 46% 26%; border-radius: 50%; background: radial-gradient(circle, rgba(255,240,245,.9), transparent 70%); }
.fe-copy { position: absolute; left: 0; right: 0; top: calc(var(--pk, 60%) + 7%); z-index: 6; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .5s; }
.fe-hint { margin: 0; font-family: var(--f-script); font-size: clamp(26px, 9cqi, 34px); color: var(--ink); opacity: .75; animation: breathe 2.6s ease-in-out infinite; }
.intro-fullenv.opening .fe-copy { opacity: 0; }
.intro-fullenv.opening .seal-half.l { transform: translate(-60%, 220%) rotate(-62deg); opacity: 0; }
.intro-fullenv.opening .seal-half.r { transform: translate(55%, 240%) rotate(48deg); opacity: 0; }
.intro-fullenv.opening .pearl { transform: translateY(260%) scale(.6); opacity: 0; }
.intro-fullenv.opening .fe-flap { transform: rotateX(180deg); }
.intro-fullenv.opening .fe-flap-wrap { z-index: 1; }
.fe-letter { transition: transform 1.1s cubic-bezier(.4,0,.2,1), box-shadow 1s ease, border-radius .8s; will-change: transform; }
.fe-letter .letter-in { transition: opacity .6s ease; }
.fe-pocket, .fe-inside, .fe-seal { transition: transform 1.15s cubic-bezier(.55,0,.35,1), opacity .9s ease; }
.fe-flap-wrap { transition: z-index 0s linear .75s, opacity .3s ease; }
.fe-out { transition: filter 1.15s ease .3s; }
.intro-fullenv.opening .fe-out { filter: brightness(.86); }
/* 2. aşama: kart yükselir, zarf aşağı kayar (kart zarftan çekiliyormuş gibi) */
.intro-fullenv.s2 { background: var(--bg); transition: background 1s ease; }
.intro-fullenv.s2 .fe-flap-wrap { opacity: 0; }
.intro-fullenv.s2 .fe-letter { transform: translateY(var(--ly, 0)) scale(1.05); box-shadow: 0 24px 50px -12px rgba(0,0,0,.28); }
.intro-fullenv.s2 .fe-pocket, .intro-fullenv.s2 .fe-inside, .intro-fullenv.s2 .fe-seal { transform: translateY(78%); }
.intro-fullenv.s2 .fe-inside { opacity: 0; }
/* 3. aşama: kart ekranı doldurur ve davetiyeye dönüşür */
.intro-fullenv.s3 .fe-letter { z-index: 8; transform: translateY(var(--ly, 0)) scale(var(--ls, 2)); box-shadow: none; border-radius: 0; transition-duration: 1.15s; transition-timing-function: cubic-bezier(.65,0,.25,1); }
.intro-fullenv.s3 .fe-letter .letter-in { opacity: 0; }
.intro-fullenv.s3 { background: transparent; }
.intro-fullenv.s3 .fe-pocket, .intro-fullenv.s3 .fe-seal { opacity: 0; }
.intro-fullenv.s4 .fe-letter { opacity: 0; transition: opacity .8s ease; }
.intro-fullenv.s4::after { opacity: 0; transition: opacity .8s; }
.intro-fullenv.gone { transition: opacity .6s ease, visibility .6s; }

/* ================= TÜL PERDE ================= */
.intro-tulle { z-index: 6; background: color-mix(in srgb, var(--paper) 70%, transparent); transition: background 1.6s ease .3s, opacity .9s ease, visibility .9s; }
.intro-tulle.chained { cursor: default; background: var(--paper); }
.intro-tulle.chained.ready { background: color-mix(in srgb, var(--paper) 55%, transparent); }
.tl-glow { position: absolute; inset: 0; background: radial-gradient(45% 35% at 50% 45%, rgba(255,255,255,.95), transparent 75%); transition: opacity 1.4s; z-index: 0; }
/* perde: rot üstte sabit, pliler esnek; açılırken genişlik daralır ve pliler sıklaşır */
.tl-curtain { position: absolute; top: 0; bottom: 0; width: 54%; z-index: 1; transition: width 2.3s cubic-bezier(.62,0,.22,1), clip-path 1.3s cubic-bezier(.4,0,.2,1) 1.25s; }
.tl-curtain.l { left: 0; clip-path: polygon(0 0, 100% 0, 100% 60%, 100% 100%, 0 100%); }
.tl-curtain.r { right: 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 0 60%); }
.tl-sway { position: absolute; inset: 0; display: flex; transform-origin: 50% 0; }
.tl-curtain.r .tl-sway { flex-direction: row-reverse; }
.tl-sway i { flex: var(--w) 1 0; min-width: 0; position: relative;
  background: linear-gradient(90deg, rgba(196,188,170,.55) 0%, rgba(255,255,255,.86) 28%, rgba(255,255,255,.98) 50%, rgba(244,240,232,.84) 70%, rgba(190,182,164,.52) 100%);
  backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); }
.tl-sway i::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.25), transparent 40%, rgba(255,255,255,.18) 85%, rgba(255,255,255,.45)); }
/* tülün üzerinde gezinen ışık */
.tl-curtain::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); background-size: 260% 100%; animation: tlSheen 5s ease-in-out infinite; }
@keyframes tlSheen { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
.intro-tulle.opening .tl-curtain { width: 22%; }
.intro-tulle.opening .tl-curtain.l { clip-path: polygon(0 0, 100% 0, 44% 60%, 100% 100%, 0 100%); }
.intro-tulle.opening .tl-curtain.r { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 56% 60%); }
.intro-tulle.opening .tl-curtain.l .tl-sway { animation: swayL 2.6s cubic-bezier(.4,0,.3,1); }
.intro-tulle.opening .tl-curtain.r .tl-sway { animation: swayR 2.6s cubic-bezier(.4,0,.3,1); }
@keyframes swayL { 0% { transform: skewX(0); } 30% { transform: skewX(-4deg); } 62% { transform: skewX(2deg); } 82% { transform: skewX(-.8deg); } 100% { transform: skewX(0); } }
@keyframes swayR { 0% { transform: skewX(0); } 30% { transform: skewX(4deg); } 62% { transform: skewX(-2deg); } 82% { transform: skewX(.8deg); } 100% { transform: skewX(0); } }
.intro-tulle.opening .tl-glow { opacity: 0; }
.intro-tulle.opening, .intro-tulle.chained.opening { background: transparent; }
/* üst saçak: yarı saydam, dalgalı alt kenar */
.tl-swag { position: absolute; top: 0; left: 0; right: 0; height: 12%; z-index: 2; pointer-events: none;
  background: linear-gradient(180deg, #ece5d6 0 8px, rgba(255,255,255,.9) 8px, rgba(244,240,232,.75));
  -webkit-mask: linear-gradient(#000 0 0) top / 100% calc(100% - 26px) no-repeat, radial-gradient(52% 26px at 50% 0, #000 98%, transparent) bottom / 33.4% 26px repeat-x;
  mask: linear-gradient(#000 0 0) top / 100% calc(100% - 26px) no-repeat, radial-gradient(52% 26px at 50% 0, #000 98%, transparent) bottom / 33.4% 26px repeat-x;
  filter: drop-shadow(0 3px 4px rgba(0,0,0,.08)); }
.tl-tie { position: absolute; top: calc(60% - 56px); width: min(30cqi, 118px); z-index: 3; opacity: 0; transform: scale(.3) rotate(-25deg); transition: opacity .6s ease 1.7s, transform .9s cubic-bezier(.3,1.5,.5,1) 1.7s; }
.tl-tie svg, .tl-tie img { display: block; width: 100%; height: auto; filter: drop-shadow(0 3px 4px rgba(0,0,0,.15)); }
.tl-tie.l { left: calc(9.7% - 59px); } .tl-tie.r { right: calc(9.7% - 59px); }
.intro-tulle.opening .tl-tie { opacity: 1; transform: none; }
.tl-copy { position: absolute; left: 0; right: 0; bottom: 14%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 12px; transition: opacity .5s; }
.intro-tulle.opening .tl-copy { opacity: 0; }

/* ================= KABARTMA KANATLI KART ================= */
.intro-gatefold { z-index: 6; background: color-mix(in srgb, var(--bg) 80%, #000); perspective: 1500px; display: block; }
.gf-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--paper), var(--bg)); transition: opacity .8s ease .4s; }
.gf-panel { position: absolute; top: 0; bottom: 0; width: 50%; transform-style: preserve-3d; transition: transform 1.8s cubic-bezier(.6,0,.2,1) .2s; }
.gf-panel.l { left: 0; transform-origin: 0 50%; z-index: 2; }
.gf-panel.r { right: 0; transform-origin: 100% 50%; z-index: 1; }
.gf-panel::after { content: ''; position: absolute; inset: 0; transform: rotateY(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; background: color-mix(in srgb, var(--paper) 90%, #000); }
.gf-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: color-mix(in srgb, var(--paper) 90%, var(--accent2));
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .12 0 0 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.gf-panel.l .gf-face { box-shadow: inset -10px 0 16px -10px rgba(0,0,0,.28); }
.gf-panel.r .gf-face { box-shadow: inset 10px 0 16px -10px rgba(0,0,0,.22); }
.gf-lace { position: absolute; width: 96%; pointer-events: none; }
.gf-lace svg { display: block; width: 100%; height: auto; }
.gf-panel.l .gf-lace.tl { top: 0; left: 0; } .gf-panel.l .gf-lace.bl { bottom: 0; left: 0; } .gf-panel.l .gf-lace.tr { top: 22%; right: 0; width: 56%; }
.gf-panel.r .gf-lace.tr { top: 0; right: 0; } .gf-panel.r .gf-lace.br { bottom: 0; right: 0; } .gf-panel.r .gf-lace.bl { bottom: 24%; left: 0; width: 56%; }
.gf-medal { position: absolute; top: 50%; right: 0; width: min(23cqi, 92px); transform: translate(50%, -50%); z-index: 3; filter: drop-shadow(0 4px 6px rgba(0,0,0,.22)); backface-visibility: hidden; }
.gf-medal svg { display: block; width: 100%; height: auto; }
.gf-copy { position: absolute; left: 0; right: 0; bottom: 7%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 8px; transition: opacity .4s; }
.gf-copy .to-name { color: var(--ink); }
.intro-gatefold.opening .gf-copy { opacity: 0; }
.intro-gatefold.opening .gf-panel.l { transform: rotateY(-106deg); }
.intro-gatefold.opening .gf-panel.r { transform: rotateY(106deg); }
.intro-gatefold.opening .gf-backdrop { opacity: 0; }
.intro-gatefold.opening { background: transparent; transition: background .6s ease .5s; }
.fe-letter::before { content: ""; position: absolute; inset: 0; background: linear-gradient(170deg, rgba(255,255,255,.8), rgba(255,255,255,.55)); border-radius: inherit; }

.intro-fullenv.edge-lace::after { opacity: .28; }

.tl-curtain::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 70%, rgba(255,255,255,.5)); }
.intro-fullenv.edge-lace .fe-inside { background: color-mix(in srgb, var(--env) 94%, #000); }

.fe-letter .letter-in, .fe-letter.has-photo .letter-in { justify-content: center; padding-top: 0; gap: 12px; }
.fe-letter .l-date { font-size: 13px; }

/* ===== çiçek türleri ===== */
.bloom-peony .petal { width: 30%; margin-left: -15%; height: 42%; border-radius: 48% 52% 46% 54% / 60% 58% 42% 40%; }
.bloom-peony .petal.mid { width: 25%; margin-left: -12.5%; height: 35%; }
.bloom-peony .petal.in { width: 19%; margin-left: -9.5%; height: 27%; filter: brightness(1.14); }
.bloom-peony .petal::after { display: none; }

.bloom-sunflower .petal { width: 11%; margin-left: -5.5%; height: 47%; border-radius: 50% 50% 50% 50% / 88% 88% 12% 12%;
  background: linear-gradient(to top, #b8700f, var(--accent) 28%, #f7c843 68%, #fde28a); }
.bloom-sunflower .petal.in { width: 9%; margin-left: -4.5%; height: 40%; filter: brightness(.9); }
.bloom-sunflower .bloom-core { width: 38%; color: #fbe7b0;
  background: radial-gradient(circle, #2e1b0d 0 1.4px, transparent 1.9px) 0 0 / 6px 6px, radial-gradient(circle at 40% 35%, #8a5a26, #4a2c12 70%);
  box-shadow: 0 0 0 3px #5a3616, 0 8px 22px rgba(0,0,0,.3); }

.bloom-magnolia .petal { width: 34%; margin-left: -17%; height: 50%; border-radius: 50% 50% 50% 50% / 74% 74% 26% 26%;
  background: linear-gradient(to top, color-mix(in srgb, var(--accent) 80%, #000) 0%, var(--accent) 16%, var(--accent2) 42%, #fffaf6 86%); }
.bloom-magnolia .petal.in { width: 26%; margin-left: -13%; height: 40%; }
.bloom-magnolia .bloom-core { width: 22%; }

.bloom-poppy .petal { width: 46%; margin-left: -23%; height: 44%; border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background: repeating-linear-gradient(82deg, rgba(0,0,0,.07) 0 2px, transparent 2px 8px), radial-gradient(ellipse at 50% 100%, #1e1210 0 9%, #8c1d18 15%, var(--accent) 36%, #ef6a4c 80%, #f59a6e 100%); }
.bloom-poppy .petal.in { width: 38%; margin-left: -19%; height: 36%; filter: brightness(.94); }
.bloom-poppy .petal::after { display: none; }
.bloom-poppy .bloom-core { width: 24%; color: #f4d36b;
  background: radial-gradient(circle, #f4d36b 0 1.5px, transparent 2px) 0 0 / 7px 7px, radial-gradient(circle, #3a2a20, #120b09 70%); box-shadow: 0 0 0 4px rgba(20,12,10,.55); }

.bloom-sakura .petal { width: 34%; margin-left: -17%; height: 44%; border-radius: 50% 50% 50% 50% / 58% 58% 42% 42%;
  background: linear-gradient(to top, #e58aa8 0%, #f7bdd0 40%, #fde7ee 85%, #fff 100%);
  -webkit-mask: radial-gradient(ellipse 15% 11% at 50% 0, transparent 97%, #000); mask: radial-gradient(ellipse 15% 11% at 50% 0, transparent 97%, #000); }
.bloom-sakura .bloom-core { width: 26%; background: radial-gradient(circle, #e58aa8 0 2px, transparent 2.6px) 0 0 / 8px 8px, radial-gradient(circle, #fff6f8, #f7c6d6); }

/* açık zeminde varak: parlak kısım zeminle karışmasın */
.inv:not(.dark) .foil, .inv:not(.dark) .foil * {
  background-image: linear-gradient(105deg, color-mix(in srgb, var(--accent) 62%, #000) 0%, var(--accent) 24%, color-mix(in srgb, var(--accent) 72%, #fff) 36%, var(--accent) 48%, color-mix(in srgb, var(--accent) 62%, #000) 64%, var(--accent) 80%, color-mix(in srgb, var(--accent) 72%, #fff) 91%, var(--accent) 100%);
}
.inv:not(.dark) .foil * { background-image: none; }
.bloom-magnolia .petal { box-shadow: inset 0 -16px 24px rgba(120,70,85,.22), inset 3px 0 8px rgba(255,255,255,.6), 0 6px 14px rgba(120,80,90,.22); }
.bloom-magnolia .petal.in { filter: brightness(1.02); }

/* zarftan tüle yumuşak geçiş */
.intro-fullenv.melt { opacity: 0; transition: opacity 1.5s cubic-bezier(.4,0,.2,1); pointer-events: none; }
.intro-fullenv.melt .fe-letter { transform: translateY(var(--ly, 0)) scale(calc(var(--ls, 2) * 1.04)); transition: transform 1.6s ease-out; }
.intro-tulle.chained { opacity: 0; transform: scale(1.06); filter: blur(10px); transition: opacity 1.4s ease, transform 2s cubic-bezier(.2,.7,.2,1), filter 1.6s ease; }
.intro-tulle.chained.ready { opacity: 1; transform: none; filter: none; }
.intro-tulle.chained.gone { opacity: 0; transition: opacity 1.2s ease; }