@media (max-width: 900px) {
  .menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(10,10,10,0.95); backdrop-filter: blur(20px); flex-direction: column; padding: 1rem; border-bottom: 1px solid var(--line); }
  .menu.open { display: flex; }
  .menu a { padding: 10px; font-size: 1.1rem; border-bottom: 1px solid rgba(255,255,255,0.05); }
  #mb { display: block; background: none; border: none; color: var(--text); font-size: 1.5rem; cursor: pointer; }
  .sf { display: none; } /* Search mobile ma hidden */
  .hero { padding: 4rem 1.5rem; text-align: center; align-items: center; }
  
  /* Bottom Navigation for Mobile */
  #tb {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0;
    background: rgba(10, 10, 10, 0.95); backdrop-filter: blur(20px);
    border-top: 1px solid var(--line); z-index: 1000;
    justify-content: space-around; padding: 10px 5px;
    padding-bottom: env(safe-area-inset-bottom, 10px);
  }
  #tb a {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 0.7rem; color: var(--mut); font-weight: 600;
  }
  #tb a span { font-size: 1.3rem; }
  #tb a.on { color: var(--gold); }
  
  /* Adjust main content so bottom nav doesn't cover it */
  body { padding-bottom: 70px; }
  .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .card h3 { font-size: 0.9rem; padding: 8px 8px 4px; }
  .card p { font-size: 0.75rem; padding: 0 8px 8px; }
}

@media (min-width: 901px) {
  #mb { display: none; }
  #tb { display: none; }
}

@media (min-width: 1400px) {
  .grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}