/* Pasaport açılışı, galeri, ilham panosu, paylaşım, müzik yuvası */
:root { --leather: #23352c; --paper: #f7f1e3; }
[data-theme="terracotta"] { --leather: #5a2a22; }
[data-theme="night"] { --leather: #0d1714; --paper: #efe6d2; }

.opening { display: grid; place-items: center; gap: 2rem; position: relative; }
.intro[data-opening="envelope"] .opening-passport,
.intro[data-opening="passport"] .opening-envelope { display: none; }

/* ---------- Pasaport ---------- */
.passport { position: relative; width: min(74vw, 330px); aspect-ratio: 0.7; perspective: 1600px; transition: transform 1s var(--ease-out); }
.pp-cover, .pp-page { position: absolute; inset: 0; border-radius: 6px 14px 14px 6px; }
.pp-cover {
  z-index: 2; border: 0; cursor: pointer; transform-origin: left center; transform-style: preserve-3d;
  display: grid; place-items: center; align-content: center; gap: 1rem; padding: 2rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='4'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E"),
    radial-gradient(ellipse at 30% 20%, color-mix(in srgb, var(--leather) 70%, #fff), var(--leather) 70%);
  box-shadow: inset 6px 0 10px rgb(0 0 0 / 0.35), inset 0 0 0 10px color-mix(in srgb, var(--leather) 85%, #000), 0 30px 50px rgb(0 0 0 / 0.3);
  transition: transform 1.2s var(--ease-out);
  animation: float 5s ease-in-out infinite;
  backface-visibility: hidden;
}
.pp-cover::after { content: ""; position: absolute; inset: 18px; border: 1px solid color-mix(in srgb, var(--gold-1) 55%, transparent); border-radius: 4px 10px 10px 4px; }
.pp-cover:focus-visible { outline: 2px solid var(--gold-1); outline-offset: 6px; }
.pp-emblem { font-family: var(--serif); font-style: italic; font-size: 3rem; width: 112px; height: 112px; display: grid; place-items: center;
  border-radius: 50%; border: 1.5px solid var(--gold-1); }
.pp-title { font-family: var(--serif); font-size: 1.6rem; text-transform: uppercase; letter-spacing: 0.18em; text-align: center; line-height: 1.1; }
.pp-sub { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.4em; }
.pp-page {
  z-index: 1; background: var(--paper); overflow: visible;
  background-image: repeating-linear-gradient(0deg, transparent 0 22px, color-mix(in srgb, var(--accent) 10%, transparent) 22px 23px);
  box-shadow: 0 30px 50px rgb(0 0 0 / 0.25);
}
.pp-stamp {
  position: absolute; right: 14%; top: 10%; margin: 0; width: 96px; height: 96px; border-radius: 50%;
  border: 2px dashed var(--wax); color: var(--wax); display: grid; place-items: center; align-content: center;
  font-size: 0.6rem; letter-spacing: 0.2em; text-transform: uppercase; transform: rotate(-14deg) scale(1.6); opacity: 0;
  transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.6, 1) 1.1s, opacity 0.2s 1.1s;
}
.pp-stamp b { font-family: var(--serif); font-size: 0.95rem; letter-spacing: 0.05em; }

.intro.open .passport { transform: translateY(-14%) scale(0.88); transition-delay: 1.2s; }
.intro.open .pp-cover { transform: rotateY(-180deg); animation: none; }
.intro.open .pp-stamp { transform: rotate(-14deg) scale(1); opacity: 0.85; }

/* ---------- Biniş kartı: pasaporttan çıkıp öne kayar ---------- */
.boarding {
  position: absolute; left: 50%; top: 50%; z-index: 3; width: min(100vw - 32px, 380px);
  background: #fffdf8; color: #2b2a26; border-radius: 12px; padding: 1.1rem 1.2rem 1.2rem;
  box-shadow: 0 24px 50px rgb(0 0 0 / 0.3);
  translate: -50% -30%; transform: translateY(30%) scale(0.7); opacity: 0; pointer-events: none;
  transition: transform 1.1s var(--ease-out) 1.6s, opacity 0.6s 1.6s;
}
.boarding::before, .boarding::after { /* bilet çentikleri */
  content: ""; position: absolute; top: 2.65rem; width: 18px; height: 18px; border-radius: 50%; background: var(--bg);
}
.boarding::before { left: -9px; }
.boarding::after { right: -9px; }
.intro.open .boarding { transform: none; opacity: 1; pointer-events: auto; }
.bp-head { display: flex; justify-content: space-between; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.3em; color: #8a7b62;
  border-bottom: 1px dashed #d6ccb8; padding-bottom: 0.5rem; }
.bp-flight { color: #2b2a26; }
.bp-route { display: grid; grid-template-columns: 1fr 48px 1fr; align-items: center; margin: 0.6rem 0; text-align: center; }
.bp-route small, .bp-grid dt { display: block; font-size: 0.55rem; text-transform: uppercase; letter-spacing: 0.25em; color: #8a7b62; }
.bp-route b { font-family: var(--serif); font-weight: 500; font-size: 2rem; line-height: 1; }
.bp-route svg { color: var(--gold-1); }
.bp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem 0.6rem; margin: 0 0 0.8rem; }
.bp-grid div { min-width: 0; }
.bp-grid dd { margin: 0; font-family: var(--serif); font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bp-wide { grid-column: 1 / -1; }
.bp-wide dd { font-size: 1.35rem; font-style: italic; }
.bp-barcode { height: 34px; margin-bottom: 0.8rem;
  background: repeating-linear-gradient(90deg, #2b2a26 0 2px, transparent 2px 4px, #2b2a26 4px 5px, transparent 5px 8px, #2b2a26 8px 11px, transparent 11px 13px); }
.bp-go { width: 100%; }

/* ---------- Karşılama, kaydırma işareti ---------- */
.greeting { font-family: var(--serif); font-style: italic; font-size: 1.35rem; margin: 0 0 0.6rem; color: var(--accent); }
.scroll-cue { position: absolute; bottom: 2rem; left: 50%; width: 1px; height: 54px; background: linear-gradient(var(--gold-1), transparent);
  translate: -50% 0; animation: cue 2.2s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; }
  51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }

/* ---------- Galeri ---------- */
.gallery-block { padding: var(--space-section) 0; }
.gallery { position: relative; width: min(100% - 32px, 1000px); margin: 0 auto; aspect-ratio: 3 / 2; overflow: hidden; touch-action: pan-y;
  box-shadow: 0 40px 60px -30px rgb(0 0 0 / 0.4); }
.gallery::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgb(255 255 255 / 0.5); pointer-events: none; }
.gallery-gl, .gallery-fallback, .gallery-fallback img { position: absolute; inset: 0; width: 100%; height: 100%; }
.gallery-fallback img { object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.gallery-fallback img.on { opacity: 1; }
.gallery-dots { position: absolute; bottom: 22px; left: 0; right: 0; display: flex; justify-content: center; gap: 8px; z-index: 2; }
.gallery-dots button { width: 28px; height: 3px; padding: 0; border: 0; background: rgb(255 255 255 / 0.45); cursor: pointer; transition: background 0.3s, transform 0.3s; }
.gallery-dots button[aria-selected="true"] { background: #fff; transform: scaleY(1.6); }
.gallery-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (max-width: 560px) { .gallery { aspect-ratio: 4 / 5; } }

/* ---------- İlham panosu (Pinterest tarzı) ---------- */
.inspo { list-style: none; padding: 0; margin: 3rem 0 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.inspo li { position: relative; overflow: hidden; }
.inspo li:nth-child(1) { grid-row: span 2; }
.inspo li:nth-child(4) { grid-column: 1 / -1; aspect-ratio: 16 / 7; }
.inspo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease-out); }
.inspo li:hover img { transform: scale(1.06); }
.inspo figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 2rem 0.9rem 0.7rem; color: #fff;
  font-family: var(--serif); font-style: italic; font-size: 1.1rem; background: linear-gradient(transparent, rgb(0 0 0 / 0.5)); }
.inspo figure { margin: 0; height: 100%; }

/* ---------- Paylaşım ---------- */
.share { text-align: center; }
.share p { color: var(--muted); max-width: 44ch; margin: 0 auto 2rem; }

/* ---------- Müzik yuvası ---------- */
.audio-dock { position: fixed; top: max(14px, env(safe-area-inset-top)); right: 16px; z-index: 20; display: grid; justify-items: end; gap: 6px; }
.audio-dock .music { position: static; }
.foot { display: grid; justify-items: center; gap: 1.5rem; }
.playlist { font-family: var(--sans); font-style: normal; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink); background: var(--surface);
  padding: 0.35rem 0.6rem; border: 1px solid color-mix(in srgb, var(--gold-1) 50%, transparent); text-decoration: none; }
.playlist:hover, .playlist:focus-visible { background: var(--gold-1); color: #fff; outline: none; }

/* ---------- Gemini tur 1 ---------- */
.greeting { margin-bottom: 0.4rem; }
.families { margin: 1.4rem 0 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--muted); }
.inspo figcaption { background: linear-gradient(transparent, rgb(0 0 0 / 0.62)); text-shadow: 0 1px 6px rgb(0 0 0 / 0.45); }
.sch-place { display: block; margin-top: 0.25rem; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: none; color: var(--accent); text-decoration: none; }
a.sch-place:hover, a.sch-place:focus-visible { text-decoration: underline; outline: none; }

.stepper { display: grid; grid-template-columns: 1fr 44px 3rem 44px; align-items: center; gap: 0.4rem; }
.stepper-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.2em; color: var(--muted); }
.stepper output { text-align: center; font-family: var(--serif); font-size: 1.8rem; font-variant-numeric: tabular-nums; }
.step { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--gold-1); background: transparent; color: var(--ink); font-size: 1.2rem; cursor: pointer; transition: background 0.2s, transform 0.12s; }
.step:hover, .step:focus-visible { background: var(--gold-1); color: #fff; outline: none; }
.step:active { transform: scale(0.92); }
.reveal-field { display: grid; grid-template-rows: 0fr; opacity: 0; margin-top: -1.1rem; transition: grid-template-rows 0.45s var(--ease-out), opacity 0.35s, margin 0.45s var(--ease-out); overflow: hidden; }
.reveal-field.open { grid-template-rows: 1fr; opacity: 1; margin-top: 0; }
.rsvp .reveal-field { display: grid; }
.reveal-field input { min-height: 0; }

.rsvp-done { text-align: center; padding: 2.5rem 1rem; border: 1px solid var(--gold-1); outline: 1px solid var(--gold-1); outline-offset: -8px; animation: done-in 0.8s var(--ease-out); }
.rsvp-done:focus { outline-color: var(--gold-1); }
@keyframes done-in { from { opacity: 0; transform: translateY(16px) scale(0.98); } }
.done-mono { font-family: var(--serif); font-style: italic; font-size: 1.8rem; margin: 0; }
.done-title { font-family: var(--serif); font-size: 2.2rem; margin: 0.4rem 0; }
.done-sub { color: var(--muted); margin: 0 auto 1.6rem; max-width: 36ch; }

.gift { text-align: center; }
.gift > p { color: var(--muted); max-width: 44ch; margin: 0 auto 1.6rem; }
.gift-dialog { border: 1px solid var(--gold-1); outline: 1px solid var(--gold-1); outline-offset: -8px; background: var(--surface); color: var(--ink);
  padding: 2rem 1.5rem; width: min(100vw - 32px, 420px); text-align: center; }
.gift-dialog::backdrop { background: rgb(20 18 14 / 0.55); backdrop-filter: blur(4px); }
.gift-dialog[open] { animation: done-in 0.4s var(--ease-out); }
.gift-dialog h3 { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 1.8rem; margin: 0 0 0.6rem; }
.gift-holder { margin: 0; color: var(--muted); }
.gift-iban code { display: block; font-size: clamp(0.74rem, 3.3vw, 1rem); letter-spacing: 0; white-space: nowrap; padding: 0.9rem 0.4rem; margin: 1rem 0 1.4rem; background: var(--bg); }

/* ---------- Gemini tur 2 ---------- */
.countdown b.tick { animation: tick 0.5s var(--ease-out); }
@keyframes tick { from { transform: translateY(-35%); opacity: 0; } }
.contact-link { display: inline-block; margin-top: 1.2rem; font-size: 0.75rem; letter-spacing: 0.08em; color: var(--muted); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--gold-1) 60%, transparent); }
.contact-link:hover, .contact-link:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; }

/* ---------- Gemini tur 3 ---------- */
.greeting { font-size: 1.6rem; font-weight: 500; }
.countdown span { letter-spacing: 0.32em; }
.done-sub { margin-bottom: 2.2rem; line-height: 1.6; }

/* ---------- Kazıma açılışı ---------- */
.intro[data-opening="scratch"] .opening-envelope, .intro[data-opening="scratch"] .opening-passport,
.intro:not([data-opening="scratch"]) .opening-scratch { display: none; }
.scratch-card { width: min(100vw - 32px, 360px); padding: 2.6rem 1.6rem 2rem; text-align: center; background: var(--surface);
  border: 1px solid var(--gold-1); outline: 1px solid var(--gold-1); outline-offset: -9px; box-shadow: 0 30px 60px -25px rgb(0 0 0 / 0.35); animation: float 5s ease-in-out infinite; }
.intro.revealed .scratch-card { animation: none; }
.sc-mono { font-family: var(--serif); font-style: italic; font-size: 1.6rem; margin: 0; }
.sc-names { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 0.6rem 0 1.4rem; }
.sc-names em { display: block; font-size: 0.5em; color: var(--accent); }
.sc-label { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.32em; color: var(--muted); margin: 0 0 0.9rem; transition: color 0.4s; }
.intro.revealed .sc-label { color: var(--accent); }
.sc-area { position: relative; width: 210px; height: 110px; margin: 0 auto 1.6rem; border-radius: 55px; overflow: hidden;
  display: grid; place-items: center; background: var(--bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--gold-1) 50%, transparent); }
.sc-date { margin: 0; display: grid; font-family: var(--serif); line-height: 1.05; }
.sc-date b { font-weight: 500; font-size: 2.1rem; }
.sc-date span { font-size: 0.7rem; letter-spacing: 0.4em; font-family: var(--sans); color: var(--muted); margin-top: 0.2rem; }
#scratch { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; transition: opacity 0.8s ease, transform 0.8s var(--ease-out); }
#scratch:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
#scratch.gone { opacity: 0; transform: scale(1.15); pointer-events: none; }
.sc-go { opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.6s 0.4s, transform 0.6s var(--ease-out) 0.4s; }
.intro.revealed .sc-go { opacity: 1; transform: none; pointer-events: auto; }
.intro.revealed .sc-area { animation: glow 1.4s var(--ease-out); }
@keyframes glow { 30% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--gold-1) 35%, transparent), 0 0 40px color-mix(in srgb, var(--gold-2) 80%, transparent); } }

/* ---------- Masanı bul ---------- */
.table-card { display: inline-grid; justify-items: center; gap: 0.1rem; margin: 2.2rem 0 0; padding: 0.9rem 2.2rem;
  border: 1px solid var(--gold-1); background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(4px); animation: done-in 0.9s var(--ease-out) 0.3s both; }
.table-card span { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.35em; color: var(--muted); }
.table-card b { font-family: var(--serif); font-weight: 500; font-size: 2.4rem; line-height: 1; }

/* ---------- Canlı akış ---------- */
.live { position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; translate: -50% 0; z-index: 30; display: flex; align-items: center; gap: 0.6rem;
  max-width: calc(100vw - 100px); padding: 0.55rem 1rem; background: var(--surface); border: 1px solid var(--gold-1); box-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.3); font-size: 0.78rem; }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #c0392b; box-shadow: 0 0 0 0 rgb(192 57 43 / 0.6); animation: ping 1.8s infinite; flex: none; }
@keyframes ping { 70% { box-shadow: 0 0 0 8px rgb(192 57 43 / 0); } 100% { box-shadow: 0 0 0 0 rgb(192 57 43 / 0); } }
.live span { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.25em; color: var(--muted); }
.live b { font-family: var(--serif); font-weight: 500; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.live.pulse { animation: done-in 0.6s var(--ease-out); }

/* ---------- Düğün sonrası ---------- */
.after-msg { max-width: 34ch; margin: 2rem auto 0; font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.5; color: var(--muted); }
.album-block { padding: var(--space-section) 16px; text-align: center; }
.album-sub { color: var(--muted); margin: -1.4rem 0 2rem; font-size: 0.8rem; letter-spacing: 0.08em; }
.album { list-style: none; padding: 0; margin: 0 auto; max-width: 1000px; columns: 2 160px; column-gap: 8px; }
.album li { break-inside: avoid; margin-bottom: 8px; }
.album button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.album img { width: 100%; display: block; transition: transform 0.8s var(--ease-out); }
.album button:hover img, .album button:focus-visible img { transform: scale(1.04); }
.lightbox { border: 0; padding: 0; background: transparent; max-width: 94vw; max-height: 92vh; }
.lightbox::backdrop { background: rgb(12 12 10 / 0.88); }
.lightbox img { max-width: 94vw; max-height: 84vh; display: block; border: 8px solid #fdfaf3; }
.lightbox p { color: #efe6d2; font-family: var(--serif); font-style: italic; font-size: 1.3rem; text-align: center; }
.lb-x { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgb(255 255 255 / 0.4); background: none; color: #fff; font-size: 1.4rem; cursor: pointer; }

/* ---------- Sesli anı ---------- */
.voice { text-align: center; }
.voice > p { color: var(--muted); max-width: 44ch; margin: 0 auto 2rem; }
.rec { display: grid; justify-items: center; gap: 0.9rem; }
.rec-btn { display: inline-flex; align-items: center; gap: 0.8rem; font: inherit; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.22em;
  padding: 1rem 1.6rem; border: 1px solid var(--gold-1); border-radius: 999px; background: var(--bg); color: var(--ink); cursor: pointer; transition: background 0.3s, transform 0.15s; }
.rec-btn:hover, .rec-btn:focus-visible { background: #fff; outline: none; }
.rec-btn:active { transform: scale(0.97); }
.rec-dot { width: 12px; height: 12px; border-radius: 50%; background: #c0392b; }
.rec-btn[aria-pressed="true"] .rec-dot { animation: ping 1.2s infinite; border-radius: 2px; }
.rec-time { font-family: var(--serif); font-size: 1.6rem; font-variant-numeric: tabular-nums; }
.rec-wave { width: min(300px, 100%); height: 48px; }
.rec-review { display: grid; justify-items: center; gap: 1rem; margin-top: 1.2rem; }
.rec-review audio { width: min(320px, 100%); }
.live { max-width: calc(100vw - 32px); padding: 0.5rem 1.1rem 0.5rem 0.9rem; gap: 0.55rem; }
.live span { white-space: nowrap; flex: none; }
.live b { font-size: 1rem; min-width: 0; }
body:has(.audio-dock:not([hidden])) .live { max-width: calc(100vw - 110px); }

/* ---------- Miras buketi ---------- */
.seed { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px dashed color-mix(in srgb, var(--gold-1) 60%, transparent); }
.seed-title { font-family: var(--serif); font-style: italic; font-size: 1.6rem; margin: 0; }
.seed-sub { color: var(--muted); font-size: 0.85rem; max-width: 30ch; margin: 0.3rem auto 1rem; min-height: 2.6em; }
.seed-pad { width: 220px; height: 220px; border-radius: 50%; cursor: pointer; touch-action: manipulation;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 12%, var(--surface)), var(--surface) 70%); }
.seed-pad:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.garden-block { padding: var(--space-section) 16px; text-align: center;
  background: radial-gradient(ellipse at 50% 100%, color-mix(in srgb, var(--accent) 16%, transparent), transparent 70%); }
.garden-sub { color: var(--muted); margin: -1.4rem 0 1.5rem; font-size: 0.8rem; letter-spacing: 0.1em; }
.garden { width: min(100%, 900px); height: 360px; display: block; margin: 0 auto; }
.garden-note { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--muted); max-width: 36ch; margin: 1.5rem auto 0; }

/* ---------- Işık senfonisi ---------- */
.symphony { position: fixed; inset: 0; z-index: 100; background: #000; }
.symphony canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sym-text { position: absolute; left: 0; right: 0; bottom: max(8vh, env(safe-area-inset-bottom)); text-align: center; color: #fbf3df; pointer-events: none; }
.sym-k { font-size: 0.7rem; letter-spacing: 0.5em; text-transform: uppercase; margin: 0; opacity: 0.8; }
.sym-names { font-family: var(--serif); font-size: 2.6rem; line-height: 1; margin: 0.4rem 0; }
.sym-names em { font-size: 0.6em; margin: 0 0.3em; color: #e9cf94; }
.sym-hint { font-size: 0.75rem; opacity: 0.6; margin: 0; }
.sym-x { position: absolute; top: max(16px, env(safe-area-inset-top)); right: 16px; width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgb(255 255 255 / 0.35); background: rgb(0 0 0 / 0.2); color: #fff; font-size: 1.4rem; cursor: pointer; }