/* ================================================================
   Yılımızın özeti — tam ekran hikâye kartları
   ================================================================ */
.sm-body .nav, .sm-body .tabbar, .sm-body .particles-container { display: none !important; }
.sm-body { overflow: hidden; background: #1C1C1A; }
.sm-stage { position: fixed; inset: 0; z-index: 50; color: #fff; overflow: hidden; }
.sm-bars { position: absolute; top: calc(14px + env(safe-area-inset-top)); left: 14px; right: 60px; z-index: 5; display: flex; gap: 5px; }
.sm-bars span { flex: 1; height: 3px; border-radius: 3px; background: rgba(255,255,255,0.3); overflow: hidden; }
.sm-bars i { display: block; height: 100%; width: 0; background: #fff; }
.sm-bars span.done i { width: 100%; }
.sm-bars span.now i { animation: sm-fill 6s linear forwards; }
@keyframes sm-fill { to { width: 100%; } }
.sm-close { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 12px; z-index: 6; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-size: 1.1rem; background: rgba(255,255,255,0.12); }
.sm-tap { position: absolute; top: 0; bottom: 0; z-index: 3; width: 40%; border: none; background: transparent; cursor: pointer; }
.sm-tap.prev { left: 0; width: 30%; }
.sm-tap.next { right: 0; width: 70%; }
.sm-slide { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 70px 28px 40px;
  opacity: 0; transform: scale(1.04); transition: opacity 600ms ease, transform 800ms cubic-bezier(.2,.8,.2,1); pointer-events: none; }
.sm-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.sm-slide.on > * { animation: sm-in 700ms both; }
.sm-slide.on > *:nth-child(2) { animation-delay: 120ms; } .sm-slide.on > *:nth-child(3) { animation-delay: 240ms; } .sm-slide.on > *:nth-child(4) { animation-delay: 360ms; }
@keyframes sm-in { from { opacity: 0; transform: translateY(18px); } }
.sm-eye { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.24em; text-transform: uppercase; opacity: 0.85; }
.sm-slide h1 { font-family: var(--font-display); font-size: clamp(2.8rem, 12vw, 5.5rem); line-height: 1; color: #fff; font-weight: 500; }
.sm-slide h1 em { color: #F2C9A0; }
.sm-slide h2 { font-family: var(--font-display); font-size: clamp(1.8rem, 7vw, 3rem); line-height: 1.05; color: #fff; font-weight: 500; }
.sm-big { font-family: var(--font-display); font-size: clamp(5rem, 26vw, 10rem); line-height: 0.95; font-weight: 600; font-variant-numeric: lining-nums; }
.sm-big small { font-size: 0.4em; opacity: 0.7; }
.sm-slide p { max-width: 460px; font-size: 1.05rem; line-height: 1.55; opacity: 0.92; }
.sm-slide p b { color: #FFE3C4; }
.sm-hint { margin-top: 20px; font-size: 0.8rem; opacity: 0.6; animation: bob 2s ease-in-out infinite; }
.sm-emos { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; font-size: 1.8rem; max-width: 360px; }
.sm-home { position: relative; z-index: 4; margin-top: 16px; padding: 12px 26px; border-radius: 99px; background: #fff; color: #1C1C1A; font-weight: 600; }
.s-intro { background: radial-gradient(circle at 30% 20%, #7a4a5c, #2a1d24 70%); }
.s-days { background: radial-gradient(circle at 70% 30%, #C9546B, #4a1f2c 75%); }
.s-firsts { background: radial-gradient(circle at 30% 70%, #8E7BB8, #2c2440 75%); }
.s-places { background: radial-gradient(circle at 60% 30%, #4E9BB8, #173340 75%); }
.s-trips { background: radial-gradient(circle at 40% 30%, #5B8A72, #1a2e24 75%); }
.s-photos { background: radial-gradient(circle at 50% 20%, #D98A4E, #43240f 75%); }
.s-words { background: radial-gradient(circle at 30% 30%, #B8956A, #3a2c1c 75%); }
.s-letters { background: radial-gradient(circle at 60% 60%, #9E2F45, #2e0f17 75%); }
.s-bucket { background: radial-gradient(circle at 40% 40%, #5A8A6A, #18291e 75%); }
.s-outro { background: radial-gradient(circle at 50% 40%, #D97BA8, #3a1a2c 75%); }
/* ---------- Hareketli tasarım katmanı (motion.css + motion.js) ---------- */
.sm-slide > :where(:not(.mo-marq):not(.mo-canvas)) { position: relative; z-index: 1; }
.sm-slide > .sm-home { z-index: 4; }   /* dokunma alanlarının (z 3) üstünde kalsın, yoksa tıklanamaz */
.sm-slide.on > .mo-marq, .sm-slide.on > .mo-canvas { animation: sm-bg 1400ms ease both; }
@keyframes sm-bg { from { opacity: 0; } }
.sm-slide.on > .mo-split { animation: none; }
/* Göz başlığı renkli bir şeridin içinden açılır */
.sm-eye { padding: 6px 14px; }
.sm-eye::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 4px; background: rgba(255,255,255,0.14); transform-origin: left; transform: scaleX(0); }
.sm-slide.on .sm-eye::before { animation: sm-band 700ms cubic-bezier(.7,0,.2,1) 60ms both; }
@keyframes sm-band { to { transform: scaleX(1); } }
.sm-big { display: flex; align-items: baseline; justify-content: center; text-shadow: 0 10px 50px rgba(0,0,0,0.25); }
/* Emojiler/bayraklar yaylı zıplayarak tek tek gelir */
.sm-slide.on .sm-emos span { display: inline-block; animation: sm-pop 700ms cubic-bezier(.3,1.7,.5,1) calc(var(--i, 0) * 70ms + 650ms) both; }
@keyframes sm-pop { from { opacity: 0; transform: translateY(24px) scale(0.3) rotate(-20deg); } }
.sm-spacer { height: min(34vh, 260px); }
.s-intro h1 { text-shadow: 0 6px 40px rgba(30,10,20,0.55); }
@media (prefers-reduced-motion: reduce) { .sm-slide.on .sm-emos span, .sm-slide.on .sm-eye::before { animation: none; transform: none; } }
@media (prefers-reduced-motion: reduce) { .sm-slide, .sm-slide.on > * { transition: none; animation: none; } .sm-bars span.now i { animation: none; width: 100%; } }