/* Bizim Hikayemiz - Responsive */

@media (max-width: 980px) {
  .story-grid { grid-template-columns: 1fr; }
  .story-photo { order: -1; }
  .gallery-grid { columns: 3 180px; }
}

@media (max-width: 860px) {
  .nav-links {
    position: fixed; top: 0; right: -100%; height: 100vh; width: min(80vw, 320px);
    background: var(--color-bg); flex-direction: column; align-items: flex-start; justify-content: center;
    padding: 2rem; gap: 1.6rem; box-shadow: -10px 0 40px rgba(0,0,0,.1); transition: right .35s ease;
  }
  .nav-links.is-open { right: 0; }
  .nav-toggle { display: flex; }
  .nav-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .timeline::before { left: 20px; }
  .timeline-item, .tl-left, .tl-right { width: 100%; left: 0; text-align: left; padding: 0 0 2.5rem 3.2rem; }
  .tl-left .timeline-dot, .tl-right .timeline-dot { left: 3px; right: auto; }

  .gallery-grid { columns: 2 150px; }
  .lightbox-prev { left: 6px; }
  .lightbox-next { right: 6px; }
  .lightbox-close { top: 6px; right: 6px; }
}

@media (max-width: 640px) {
  .section { padding: 3.2rem 1.1rem; }
  .hero-title { font-size: 2rem; }
  .counter-box { min-width: 76px; padding: .8rem 1rem; }
  .counter-box span { font-size: 1.4rem; }
  .gallery-grid { columns: 2 130px; }
  .music-player { left: .6rem; bottom: .6rem; padding: .4rem .7rem .4rem .4rem; }
  .mp-title, .mp-artist { max-width: 90px; }
  .letters-wrap { gap: 2rem; }
  .envelope { width: 260px; }
}

@media (max-width: 380px) {
  .gallery-grid { columns: 1 100%; }
  .counter-grid { gap: .6rem; }
}

/* Karanlik tema */
:root[data-theme="dark"] body,
body.theme-dark {
  --color-bg: #201217;
  --color-card: #2c1a20;
  --color-text: #f3e6e8;
  background: linear-gradient(180deg, #201217, #2a161c 40%, #201217);
}
body.theme-dark .site-nav.is-scrolled { background: rgba(32, 18, 23, .9); }
body.theme-dark .gf-btn,
body.theme-dark .timeline-card,
body.theme-dark .message-card,
body.theme-dark .feature-card,
body.theme-dark .date-card,
body.theme-dark .dream-card,
body.theme-dark .video-card,
body.theme-dark .counter-box { background: #2c1a20; color: #f3e6e8; }
body.theme-dark .music-player { background: rgba(44, 26, 32, .7); }