/* ==========================================================================
   8. RESPONSIVE BREAKPOINTS
   ========================================================================== */
@media (max-width: 768px) {
  .custom-mobile-menu-trigger {
    display: flex !important;
  }

  .nav-center-menu {
    display: none !important;
  }

  .header-main-row {
    grid-template-columns: min-content 1fr !important;
  }

  .site-branding img,
  .site-branding .custom-logo {
    height: 45px !important;
  }

  .custom-search-form.is-expanded .search-field {
    width: 120px !important;
  }

  .side-cart-panel {
    width: 100vw !important;
    right: -100vw !important;
  }

  .cart-item-image,
  .cart-item-image a,
  .cart-item-image img {
    flex-basis: 56px !important;
    width: 56px !important;
    height: 56px !important;
  }
}

@media (max-width: 480px) {
  .nav-inner-row {
    grid-template-columns: 1fr !important;
  }
  .site-branding {
    grid-column: 1 !important;
  }
}

/*
   Footer sütunları: 4 -> 3 -> 2 -> 1.
   - Masaüstünde (>1024px) dört widget eşit sütunda yan yana durur.
   - 3 sütuna düşünce (1024-768px) Logo/Sayfalar/Sözleşmeler üst satırı tam
     dolduruyor; Haber Bülteni (footer-widget-4 / MailPoet) tek başına 4.
     sütuna sıkışmak yerine altta tam genişlikte kendi satırına yayılıyor,
     çünkü input + buton içeren bir form dar bir sütuna göre çok daha fazla
     alana ihtiyaç duyar.
   - 2 sütuna düşünce (768-480px) 4 widget zaten 2x2 tam bölündüğü için
     Bülten widget'ı normal hücresine geri dönüyor (aşağıdaki blokta iptal
     ediliyor).
*/
@media (max-width: 1024px) {
  .site-footer {
    margin-top: 44px !important;
  }

  .site-footer .footer-widgets.row-1 {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 32px 28px !important;
    padding: 40px 0 32px 0 !important;
  }

  .site-footer .footer-widget-4 {
    grid-column: 1 / -1 !important;
  }

  .site-footer .site-info {
    padding: 20px 0 !important;
  }
}

/*
   2 sütunda 4 widget zaten çift sayıya (2x2) tam bölünüyor: Logo+Sayfalar üst
   satırda, Sözleşmeler+Bülten alt satırda. Bu yüzden bülten formunu tam
   genişliğe yaymaya gerek yok, 1024px'deki span'i burada iptal edip widget'ı
   kendi hücresine geri döndürüyoruz.
*/
@media (max-width: 768px) {
  .site-footer .footer-widgets.row-1 {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 28px 24px !important;
  }

  .site-footer .footer-widget-4 {
    grid-column: auto !important;
  }

  .site-footer .widget-title {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
  }
}

@media (max-width: 480px) {
  .site-footer {
    margin-top: 32px !important;
  }

  .site-footer .footer-widgets.row-1 {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 32px 0 24px 0 !important;
  }

  .site-footer .widget_nav_menu ul li a {
    padding: 6px 0 !important;
  }

  .site-footer .site-info {
    padding: 16px 0 !important;
  }
}