/* ==========================================================================
   Telefon ve tablet düzeni
   Masaüstünde hiçbir şeyi değiştirmez; 860px altında menü üstte yatay şerit olur.
   ========================================================================== */

/* Kötü Çocuk bildirimi kapalıyken tamamen ekran dışında kalsın (dar ekranda çok satıra bölününce görünüyordu) */
.beret-toast:not(.show) { transform: translateX(-50%) translateY(calc(100% + 60px)) !important; visibility: hidden; }
.beret-toast { max-width: calc(100vw - 32px); text-align: center; }

@media (max-width: 860px) {
  html, body { overflow-x: hidden; }

  /* üst çubuk */
  .navbar { height: 58px; padding: 0 max(12px, env(safe-area-inset-left, 0px)); gap: 8px;
            padding-top: env(safe-area-inset-top, 0px); height: calc(58px + env(safe-area-inset-top, 0px)); }
  .nav-brand { font-size: 1rem; gap: 2px; flex: none; }
  .nav-brand span:nth-child(3) { display: none; }
  .nav-countdown-container { padding: 5px 10px; font-size: .78rem; gap: 6px; white-space: nowrap; }
  .nav-countdown-container > span:first-child { font-size: 0; }
  .nav-countdown-container > span:first-child::before { content: '🕒'; font-size: .9rem; }
  .nav-actions { gap: 6px; flex: none; }
  .nav-profile-indicator { padding: 5px 9px; }
  .nav-profile-indicator .user-name { display: none; }
  .app-container { padding-top: calc(66px + env(safe-area-inset-top, 0px)); }

  /* menü: üstte yatay kaydırılan şerit */
  .main-layout { flex-direction: column; padding: 8px max(10px, env(safe-area-inset-left, 0px)) 120px; gap: 12px; }
  .sidebar { position: sticky; top: calc(64px + env(safe-area-inset-top, 0px)); z-index: 60; width: 100%; flex-direction: row;
             overflow-x: auto; overflow-y: hidden; padding: 8px; gap: 6px; border-radius: 16px; scroll-snap-type: x proximity;
             -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .sidebar::-webkit-scrollbar { display: none; }
  .nav-tab-item { flex: none; padding: 9px 13px; font-size: .86rem; gap: 7px; white-space: nowrap; scroll-snap-align: start; border-radius: 11px; }
  html.hareket-canli .nav-tab-item:hover, html.hareket-catapat .nav-tab-item:hover { transform: none; }

  /* içerik */
  .content-area { width: 100%; }
  .tab-header { flex-wrap: wrap; gap: 10px; }
  .tab-title { font-size: 1.45rem !important; }
  .tab-pane h2 { font-size: 1.45rem !important; }
  .tab-pane .glass-panel[style*="padding: 30px"], .tab-pane .glass-panel[style*="padding:30px"] { padding: 18px !important; }
  .glass-button { padding: 10px 16px; font-size: .92rem; }
  .modal-overlay { padding: 10px; align-items: flex-end; }
  .modal-content { max-width: 100% !important; padding: 20px !important; max-height: 88vh; border-radius: 20px 20px 14px 14px; }

  /* ızgaralar ekrana sığsın */
  .gallery-grid, .masterpieces-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .movies-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; }
  .capsules-grid, .arcade-games-grid, .arcade-score-layout, .music-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .todo-layout, .map-layout-container, .calendar-grid-container, .pomodoro-cats-section { flex-direction: column; }
  .map-sidebar-list { width: 100% !important; max-height: 260px; }
  .gallery-meta-preview, .masterpiece-info { padding: 10px !important; }
  .gallery-caption, .masterpiece-title { font-size: .85rem; }
  .movie-title { font-size: .95rem; }
  .form-row { flex-direction: column; }
  .pomodoro-cat-avatar { min-width: 0; width: 100%; }
  .scoreboard-stats-row { gap: 6px; }

  /* resimler ve gömülü içerik taşmasın */
  .tab-pane img, .tab-pane iframe, .tab-pane video { max-width: 100%; }
  .tab-pane table { display: block; overflow-x: auto; }
}

@media (max-width: 420px) {
  .gallery-grid, .masterpieces-grid, .movies-grid { gap: 8px !important; }
  .nav-countdown-container { padding: 4px 8px; }
  #dark-mode-beret-btn { display: none; }
}