/* ================================================================
   Mektuplar — zaman kapsülü zarfları ve mektup kâğıdı
   ================================================================ */
.lt-page { position: relative; z-index: 1; }
.lt-page .container { max-width: 1100px; }
.lt-eyebrow { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); }
.lt-head { text-align: center; margin-bottom: var(--space-xl); }
.lt-head h1 { margin: 6px 0 4px; }
.lt-head p { font-family: var(--font-display); font-style: italic; font-size: 1.25rem; color: var(--text-muted); }
.lt-sub { font-size: 1.6rem; margin: 28px 0 16px; }
.lt-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 26px; }

/* Zarf */
.lt-env { position: relative; aspect-ratio: 16 / 12; min-height: 250px; border: none; padding: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #3a2e24;
  background: linear-gradient(160deg, #FBF3E4, #F1E3C8); box-shadow: 0 14px 34px rgba(60,40,20,0.22), inset 0 0 0 1px rgba(120,90,60,0.14); overflow: hidden; isolation: isolate;
  transition: transform 300ms var(--ease-out), box-shadow 300ms; }
.lt-env:hover { transform: translateY(-4px) rotate(-0.4deg); box-shadow: 0 20px 44px rgba(60,40,20,0.28), inset 0 0 0 1px rgba(120,90,60,0.14); }
.lt-env::before, .lt-env::after { content: ''; position: absolute; bottom: 0; width: 60%; height: 64%; background: linear-gradient(160deg, #F4E6CD, #EAD7B4); z-index: 0; }
.lt-env::before { left: 0; clip-path: polygon(0 0, 100% 100%, 0 100%); }
.lt-env::after { right: 0; clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.lt-flap { position: absolute; inset: 0 0 auto 0; height: 44%; z-index: 2; background: linear-gradient(180deg, #EFDDBD, #E6CFA6); clip-path: polygon(0 0, 100% 0, 50% 100%); filter: drop-shadow(0 3px 3px rgba(80,50,20,0.15)); transform-origin: top; transition: transform 600ms var(--ease-out); }
.lt-env.opened .lt-flap { transform: rotateX(180deg); opacity: 0.55; }
.lt-seal { position: absolute; left: 50%; top: 44%; z-index: 3; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: rgba(255,255,255,0.9); background: radial-gradient(circle at 35% 30%, #D86A7E, #9E2F45 70%); box-shadow: 0 3px 8px rgba(90,20,30,0.45), inset 0 -2px 4px rgba(0,0,0,0.25); }
.lt-env.opened .lt-seal { opacity: 0; transform: scale(0.6); transition: 400ms; }
.lt-front { position: absolute; left: 0; right: 0; bottom: 0; z-index: 4; display: flex; flex-direction: column; gap: 3px; padding: 14px 18px 16px; }
.lt-from { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: #8a6d4a; }
.lt-front strong { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; font-weight: 600; color: #3a2e24; }
.lt-when { font-size: 0.8rem; color: #6e5a45; }
.lt-when b { font-family: var(--font-display); font-size: 1.25rem; color: #9E2F45; }
.lt-when.open { color: #3f7a55; }
.lt-lock, .lt-mine { font-style: normal; font-size: 0.72rem; color: #8a6d4a; }
.lt-mine { color: #5B8A72; }
.lt-env.sealed:not(.mine) { cursor: default; }
.lt-env.shake { animation: lt-shake 420ms; }
@keyframes lt-shake { 20% { transform: translateX(-6px) rotate(-1deg); } 40% { transform: translateX(6px) rotate(1deg); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
[data-theme="dark"] .lt-env { box-shadow: 0 14px 34px rgba(0,0,0,0.5); }

.lt-empty { text-align: center; padding: 60px 20px; color: var(--text-muted); }
.lt-empty .icon { font-size: 3rem; }
.lt-empty p { font-family: var(--font-display); font-size: 1.4rem; color: var(--text-primary); margin-top: 8px; }
.lt-empty .sub { font-family: var(--font-body); font-size: 0.9rem; color: var(--text-muted); }

/* Açılış penceresi: zarf açılır, kâğıt yukarı kayar */
.lt-modal { position: fixed; inset: 0; z-index: 9000; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(20,14,10,0.72); backdrop-filter: blur(6px); }
.lt-modal.open { display: flex; }
.lt-stage { position: relative; width: min(640px, 100%); max-height: 100%; display: flex; flex-direction: column; align-items: center; }
.lt-big-env { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; width: min(420px, 90%); aspect-ratio: 16 / 10; border-radius: 12px; background: linear-gradient(160deg, #FBF3E4, #EAD7B4); box-shadow: 0 20px 50px rgba(0,0,0,0.4); transition: opacity 500ms 900ms, transform 700ms 700ms; }
.lt-big-env .flap { position: absolute; inset: 0 0 auto 0; height: 58%; background: linear-gradient(180deg, #EFDDBD, #E6CFA6); clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: top; transition: transform 700ms var(--ease-out); }
.lt-big-env .seal { position: absolute; left: 50%; top: 58%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.4rem; background: radial-gradient(circle at 35% 30%, #D86A7E, #9E2F45 70%); transition: transform 400ms, opacity 400ms; }
.lt-paper { position: relative; width: 100%; max-height: calc(100vh - 40px); overflow-y: auto; padding: 38px clamp(22px, 5vw, 48px) 34px; border-radius: 10px; color: #3a2e24;
  background: repeating-linear-gradient(transparent 0 31px, rgba(120,90,60,0.08) 31px 32px), #FDF8EE; box-shadow: 0 30px 70px rgba(0,0,0,0.45);
  opacity: 0; transform: translateY(40px) scale(0.92); transition: opacity 600ms 900ms, transform 800ms 900ms var(--ease-out); }
.lt-modal.play .lt-big-env .seal { transform: scale(0.4); opacity: 0; }
.lt-modal.play .lt-big-env .flap { transform: rotateX(180deg); transition-delay: 250ms; }
.lt-modal.play .lt-big-env { opacity: 0; transform: translate(-50%, -20%) scale(0.9); pointer-events: none; }
.lt-modal.play .lt-paper { opacity: 1; transform: none; }
.lt-paper h2 { font-size: clamp(1.7rem, 4vw, 2.3rem); color: #3a2e24; margin: 6px 0 14px; }
.lt-body { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.75; color: #3a2e24; }
.lt-body p { margin: 0 0 1em; }
.lt-sign { margin-top: 18px; text-align: right; font-family: var(--font-display); font-style: italic; font-size: 1.3rem; color: #6e5a45; }
.lt-x { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border: none; border-radius: 50%; background: rgba(120,90,60,0.12); color: #3a2e24; font-size: 1rem; cursor: pointer; }
/* Hareketli açılış (motion.js ile birlikte) */
.lt-modal.play .lt-big-env { animation: lt-wiggle 520ms ease both; }
@keyframes lt-wiggle { 0% { rotate: 0deg; } 20% { rotate: -3deg; scale: 1.03; } 40% { rotate: 3deg; } 60% { rotate: -2deg; } 80% { rotate: 1deg; } 100% { rotate: 0deg; scale: 1; } }
.lt-modal.play .lt-big-env .seal { animation: lt-crack 420ms ease-in 60ms both; }
@keyframes lt-crack { 40% { transform: scale(1.35); opacity: 1; filter: brightness(1.3); } 100% { transform: scale(0.2) rotate(40deg); opacity: 0; } }
.lt-body > * { opacity: 0; transform: translateY(14px); filter: blur(4px); transition: opacity 700ms ease, transform 800ms cubic-bezier(.2,.8,.2,1), filter 700ms ease;
  transition-delay: calc(1500ms + var(--k, 0) * 160ms); }
.lt-modal.play .lt-body > * { opacity: 1; transform: none; filter: none; }
.lt-sign { clip-path: inset(0 0 0 100%); transition: clip-path 1400ms cubic-bezier(.6,0,.2,1) 2100ms; }
.lt-modal.play .lt-sign { clip-path: inset(0 0 0 0); }
@media (prefers-reduced-motion: reduce) { .lt-body > *, .lt-sign { opacity: 1; transform: none; filter: none; clip-path: none; transition: none; } .lt-modal.play .lt-big-env, .lt-modal.play .lt-big-env .seal { animation: none; } }
@media (prefers-reduced-motion: reduce) { .lt-big-env, .lt-paper, .lt-flap { transition: none !important; } }
@media (max-width: 560px) { .lt-list { grid-template-columns: 1fr; } }

/* Şifre kutusu (mektup şifreyle mühürlü) */
.lt-lockbox { position: relative; width: min(420px, 100%); text-align: center; padding: 34px 28px 26px; border-radius: 24px; color: #3a2e24; background: linear-gradient(170deg, #FDF8EE, #F4E6CD); box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.lt-lockbox.shake { animation: lt-shake 420ms; }
.lt-lockseal { width: 64px; height: 64px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.6rem; background: radial-gradient(circle at 35% 30%, #D86A7E, #9E2F45 70%); box-shadow: 0 6px 16px rgba(90,20,30,0.45); }
.lt-lockbox h2 { font-size: 1.8rem; color: #3a2e24; margin: 6px 0 8px; }
.lt-lockbox p { font-size: 0.92rem; color: #6e5a45; margin: 0 0 8px; }
.lt-hint { padding: 8px 12px; border-radius: 12px; background: rgba(201,84,107,0.08); }
.lt-pw { width: 100%; margin-top: 8px; padding: 12px 14px; border-radius: 12px; border: 1px solid rgba(120,90,60,0.3); background: #fff; font: inherit; font-size: 1rem; text-align: center; color: #3a2e24; }
.lt-pwerr { min-height: 1.2em; color: #9E2F45 !important; font-weight: 600; margin: 6px 0 0 !important; }
.lt-open { margin-top: 8px; border: none; border-radius: 99px; padding: 12px 26px; font: inherit; font-weight: 600; color: #fff; background: #9E2F45; cursor: pointer; }