/* Misafirin yolculuğu: mektuplar, kapı kartı, herbaryum */
:root {
  --paper: color-mix(in srgb, var(--surface) 82%, #fff);
  --paper-line: color-mix(in srgb, var(--gold-1) 22%, transparent);
  --hand: var(--serif);
}
.kicker { font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--gold-1); text-align: center; margin: 0 0 0.8rem; }

/* ---------- Bekleyiş mektupları ---------- */
.letters-block { padding: var(--space-section) 16px; text-align: center; max-width: 820px; margin: 0 auto; }
.letters-block h2 { margin-bottom: 0.8rem; }
.letters-sub { color: var(--muted); max-width: 34ch; margin: 0 auto 4.2rem; min-height: 1.7em; }
.letters { list-style: none; margin: 0 auto 2rem; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 4.4rem 1.2rem; }
.letter { display: grid; justify-items: center; gap: 0.8rem; }
/* Zarf: kâğıt dokulu, üst kapak üçgen, ortada mühür */
.lt-env {
  position: relative; width: 132px; aspect-ratio: 3 / 2; border: 0; padding: 0; cursor: pointer;
  background:
    linear-gradient(to top right, transparent 49.5%, var(--env-dark, #d9cbb0) 50%) left bottom / 50% 62% no-repeat,
    linear-gradient(to top left, transparent 49.5%, var(--env-dark, #d9cbb0) 50%) right bottom / 50% 62% no-repeat,
    var(--env, #e9dfcc);
  box-shadow: 0 14px 26px -16px rgb(40 30 10 / 0.5), 0 0 0 1px color-mix(in srgb, var(--gold-1) 25%, transparent);
  transform: rotate(calc((var(--i) - 1.5) * 1.6deg));
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s var(--ease-out);
}
.lt-flap {
  position: absolute; inset: 0 0 auto; height: 58%; background: color-mix(in srgb, var(--env-dark, #d9cbb0) 92%, #000);
  clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 0.6s var(--ease-out);
}
.lt-seal {
  position: absolute; left: 50%; top: 58%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 47% 53% 50% 48%;
  display: grid; place-items: center; font: italic 0.8rem var(--serif); color: #f0d9a8;
  background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wax) 60%, #fff), var(--wax) 55%, color-mix(in srgb, var(--wax) 70%, #000));
  box-shadow: 0 2px 5px rgb(0 0 0 / 0.35);
}
.letter.is-new .lt-env { animation: lt-call 2.8s var(--ease-out) infinite; }
.letter.is-new .lt-seal::after { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--gold-1); animation: lt-ring 2.8s ease-out infinite; }
.lt-env:not(:disabled):hover, .lt-env:focus-visible { transform: translateY(-6px) rotate(0); box-shadow: 0 22px 34px -18px rgb(40 30 10 / 0.55), 0 0 0 1px var(--gold-1); outline: none; }
.letter.is-read .lt-flap { transform: rotateX(180deg); filter: brightness(1.05); }
.letter.is-read .lt-seal { opacity: 0; }
.letter.is-locked .lt-env { cursor: default; filter: saturate(0.4); opacity: 0.6; }
.letter.is-locked .lt-seal { background: color-mix(in srgb, var(--muted) 70%, var(--bg)); color: var(--bg); }
.lt-meta { margin: 0; display: grid; gap: 0.15rem; }
.lt-when { font-family: var(--serif); font-style: italic; font-size: 1.15rem; }
.lt-state { font-size: 0.66rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.letter.is-new .lt-state { color: var(--accent, var(--wax)); font-weight: 500; }
@keyframes lt-call { 0%, 100% { transform: rotate(calc((var(--i) - 1.5) * 1.6deg)); } 12% { transform: translateY(-5px) rotate(-2deg); } 20% { transform: translateY(-5px) rotate(2deg); } 30% { transform: rotate(calc((var(--i) - 1.5) * 1.6deg)); } }
@keyframes lt-ring { from { transform: scale(0.8); opacity: 0.9; } to { transform: scale(1.7); opacity: 0; } }

.letters-grow { display: grid; justify-items: center; gap: 0.4rem; margin: 0 auto 1.8rem; }
.grow-cv { width: 150px; height: 150px; }
.grow-text { margin: 0; font-family: var(--serif); font-style: italic; font-size: 1.15rem; max-width: 30ch; }

/* Mektup penceresi: zarf iner, kâğıt yukarı süzülür */
.letter-dlg { border: 0; padding: 0; background: transparent; width: min(92vw, 460px); max-height: 92vh; overflow: visible; color: var(--ink); }
.letter-dlg::backdrop { background: rgb(20 18 12 / 0.55); backdrop-filter: blur(4px); }
.ld-env { position: absolute; left: 6%; right: 6%; bottom: -18px; height: 120px; background: var(--env, #e9dfcc); box-shadow: 0 20px 40px -10px rgb(0 0 0 / 0.5); }
.ld-flap { position: absolute; inset: 0 0 auto; height: 70%; background: var(--env-dark, #d9cbb0); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transform: rotateX(180deg); }
.ld-paper {
  position: relative; text-align: left; padding: 2.4rem 2rem 2rem; background: var(--paper);
  box-shadow: 0 30px 60px -20px rgb(0 0 0 / 0.55); transform: translateY(40%) scale(0.92); opacity: 0;
  transition: transform 0.9s var(--ease-out) 0.15s, opacity 0.6s var(--ease-out) 0.15s;
}
.letter-dlg.opened .ld-paper { transform: none; opacity: 1; }
.ld-when { font-size: 0.66rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--gold-1); margin: 0; }
.ld-title { font-family: var(--serif); font-weight: 400; font-style: italic; font-size: 2.1rem; line-height: 1.1; margin: 0.4rem 0 1rem; }
.ld-body { font-family: var(--hand); font-size: 1.25rem; line-height: 1.9em; margin: 0; white-space: pre-line;
  background-image: repeating-linear-gradient(to bottom, transparent 0 calc(1.9em - 1px), var(--paper-line) calc(1.9em - 1px) 1.9em); }
.ld-sign { font-family: var(--serif); font-style: italic; font-size: 1.3rem; text-align: right; margin: 1.2rem 0 0; color: var(--gold-3, var(--gold-1)); }
.ld-sign::before { content: "— "; }
.ld-x { position: absolute; top: -14px; right: -6px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--gold-1); background: var(--surface); color: var(--ink); font-size: 1.4rem; cursor: pointer; z-index: 2; }

/* ---------- Düğün günü kapı kartı ---------- */
body.door-open { overflow: hidden; }
.door {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; overflow-y: auto;
  background: radial-gradient(ellipse at 50% 30%, var(--surface), var(--bg) 75%);
  opacity: 0; transition: opacity 0.6s var(--ease-out);
}
.door.in { opacity: 1; }
.door.out { opacity: 0; pointer-events: none; }
.door-card { width: min(100%, 400px); text-align: center; padding: 2rem 1.4rem 1.6rem; border: 1px solid var(--gold-1); outline: 1px solid color-mix(in srgb, var(--gold-1) 40%, transparent); outline-offset: 6px; background: var(--paper); }
.door-k { font-family: var(--serif); font-style: italic; font-size: 1.6rem; margin: 0; }
.door-h { font-size: clamp(1.9rem, 1.4rem + 2vw, 2.4rem); margin: 0.4rem 0 1rem; }
.door-t { margin: 0; display: grid; }
.door-t span { font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase; color: var(--muted); }
.door-t b { font-family: var(--serif); font-weight: 400; font-size: clamp(5rem, 4rem + 8vw, 7rem); line-height: 1; color: var(--ink);
  transform: scale(0.6); opacity: 0; transition: transform 1s var(--ease-out) 0.25s, opacity 0.8s var(--ease-out) 0.25s; }
.door.in .door-t b { transform: none; opacity: 1; }
.door-hint { font-family: var(--serif); font-style: italic; font-size: 1.1rem; margin: 0.4rem 0 1.2rem; min-height: 1.5em; }
.door .btn-row { justify-content: center; }

/* Salon planı (kapı kartı + panel) */
.salon { width: 100%; height: auto; display: block; margin: 1.2rem 0 0.2rem; overflow: visible; }
.s-stage { fill: color-mix(in srgb, var(--gold-1) 30%, transparent); stroke: var(--gold-1); }
.s-floor { fill: none; stroke: var(--gold-1); stroke-dasharray: 2 4; }
.s-cap { font: 500 7.5px var(--sans); letter-spacing: 0.3em; fill: var(--muted); text-anchor: middle; }
.s-table circle { fill: var(--surface); stroke: color-mix(in srgb, var(--gold-1) 70%, transparent); }
.s-table text { font: 500 10px var(--sans); fill: var(--muted); text-anchor: middle; }
.s-table .s-count { font-size: 7px; letter-spacing: 0.05em; }
.s-table.mine circle { fill: var(--wax); stroke: var(--gold-1); }
.s-table.mine text { fill: #f6e7c4; font-weight: 600; }
.s-table.mine .s-halo { fill: none; stroke: var(--wax); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: s-halo 2s ease-out infinite; }
.s-path { fill: none; stroke: var(--wax); stroke-width: 1.6; stroke-dasharray: 3 4; stroke-linecap: round; animation: s-walk 1.2s linear infinite; }
@keyframes s-halo { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.5); opacity: 0; } }
@keyframes s-walk { to { stroke-dashoffset: -14; } }

/* ---------- Yıldönümü herbaryumu ---------- */
.herbarium { padding: var(--space-section) 16px; max-width: 900px; margin: 0 auto; text-align: center; }
.herbarium h2 { margin-bottom: 0.8rem; }
.herb-sub { color: var(--muted); max-width: 40ch; margin: 0 auto 2.6rem; }
/* Kurutulmuş çiçek: soluk, sepya, kâğıda bantlanmış */
.specimen { position: relative; margin: 0; padding: 14px 14px 10px; background: var(--paper); transform: rotate(var(--tilt, 0deg));
  box-shadow: 0 10px 22px -14px rgb(40 30 10 / 0.45), 0 0 0 1px var(--paper-line); }
.specimen canvas { display: block; width: 100%; aspect-ratio: 1; filter: sepia(0.35) saturate(0.9) contrast(1.18) brightness(0.96); mix-blend-mode: multiply; }
/* Köşelerde yarı saydam kâğıt bant */
.specimen::before, .specimen::after { content: ""; position: absolute; top: -7px; width: 40px; height: 13px; background: color-mix(in srgb, var(--gold-2) 45%, transparent); box-shadow: 0 1px 2px rgb(0 0 0 / 0.06); }
.specimen::before { left: 8px; transform: rotate(-9deg); }
.specimen::after { right: 8px; transform: rotate(8deg); }
.specimen figcaption { display: grid; gap: 1px; padding-top: 6px; border-top: 1px solid var(--paper-line); text-align: left; }
.sp-no { font: 500 0.58rem var(--sans); letter-spacing: 0.24em; color: var(--muted); }
.sp-name { font-family: var(--serif); font-style: italic; font-size: 1rem; }
.sp-date { font-size: 0.68rem; color: var(--muted); }
.herb-mine { max-width: 300px; margin: 0 auto 3rem; }
.herb-mine .specimen { padding: 22px 22px 14px; }
.herb-mine .sp-name { font-size: 1.5rem; }
.herb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 1.4rem 0.9rem; margin-bottom: 2.6rem; }
body.anniversary .countdown { display: none; }

@media (prefers-reduced-motion: reduce) {
  .letter.is-new .lt-env, .letter.is-new .lt-seal::after, .s-path, .s-table.mine .s-halo { animation: none; }
  .ld-paper, .door, .door-t b { transition: none; }
}