/* =========================================
   MOBILE ADAPTATION (Max-width: 768px)
   ========================================= */

@media (max-width: 768px) {
  /* 1. Общие настройки */
  :root {
    --header-height: 70px; /* Немного ниже для мобильных */
  }

  body {
    font-size: 14px;
  }

  .container {
    padding: 0 15px;
  }

  /* 2. Шапка и навигация */
  .main-header {
    height: var(--header-height);
  }

  .logo img {
    max-height: 45px;
  }

  /* Скрываем десктопное меню, если у вас еще нет скрипта для бургер-меню */
  .nav-menu {
    display: none;
  }

  .nav-auth-group {
    gap: 10px;
  }

  .btn-reg {
    padding: 8px 15px;
    font-size: 0.75rem;
  }

  /* 3. Hero секция */
  .hero-section {
    padding-top: 100px;
    padding-bottom: 40px;
    text-align: center;
  }

  .hero-container {
    flex-direction: column;
  }

  .hero-title {
    font-size: 2.2rem;
  }

  .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 30px;
  }

  .hero-btns {
    flex-direction: column;
    width: 100%;
  }

  .hero-btns .btn {
    width: 100%;
    justify-content: center;
  }

  /* 4. Секция DOMS */
  .doms-wrapper {
    flex-direction: column;
    padding: 20px !important;
  }

  .badge {
    font-size: 14px;
    padding: 6px 15px;
    margin-bottom: 20px;
  }

  .doms-logo-placeholder img {
    max-width: 200px !important;
  }

  .doms-instagram-embed {
    width: 100%;
    height: 400px; /* Уменьшаем высоту для мобильных */
  }

  /* 5. Бегущая строка (Бренды) */
  .brand-item {
    height: 100px;
    width: 140px;
  }

  .client-item {
    height: 80px;
    width: 120px;
  }

  /* 6. Сетка товаров */
  .section-title {
    font-size: 1.8rem;
    margin-bottom: 40px;
  }

  .products-grid {
    grid-template-columns: 1fr; /* По одному в ряд */
    gap: 20px;
  }

  .product-card {
    padding: 30px 20px;
  }

  /* 7. Секция событий и Haqqımızda */
  .info-grid,
  .events-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .event-block {
    padding: 20px;
  }

  .event-img-placeholder {
    height: 180px;
  }

  /* 8. Контакты и Карты */
  .contacts-grid {
    grid-template-columns: 1fr; /* Стек: инфо сверху, карты снизу */
  }

  .contact-info {
    padding: 25px;
  }

  .info-item p {
    font-size: 0.95rem;
  }

  .map-frame {
    height: 200px;
  }

  /* 9. Футер */
  .footer-content {
    flex-direction: column;
    text-align: center;
    gap: 25px;
  }

  .scroll-top-btn {
    width: 100%;
    justify-content: center;
  }
}

/* Фикс для очень маленьких экранов (iPhone 5/SE) */
@media (max-width: 380px) {
  .hero-title {
    font-size: 1.8rem;
  }

  .btn-reg {
    display: none; /* Скрываем регистрацию, оставляем только вход для экономии места */
  }
}