/* ==========================================================================
   Mobil düzeltmeler

   Not: Bileşenlerin asıl duyarlı kuralları style.css içinde
   1200 / 992 / 700 / 560 / 380 kırılımlarıyla tanımlıdır. Bu dosya style.css
   ten SONRA yüklendiği için burada aynı seçicileri tekrar tanımlamak o
   kuralları geçersiz kılar. Bu yüzden burada yalnızca style.css te
   karşılığı olmayan ekleme/düzeltmeler yer alır.
   ========================================================================== */

/* ---------- Yatay taşmaya karşı genel koruma ---------- */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

img,
svg,
video {
  max-width: 100%;
}

/* ---------- Sabit alt mobil menü için alan ---------- */
/* style.css içindeki .mobile-tabbar md altında görünür. İçeriğin
   kapanmaması için gövdeye boşluk + safe-area bırakılır. */
@media (max-width: 767.98px) {
  body {
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }

  body.page-listing-detail.has-listing-deal-sticky {
    padding-bottom: calc(132px + env(safe-area-inset-bottom, 0px));
  }

  /* Tawk.to sohbet balonu: mobil alt menünün üstünde (bottom: 75px) */
  .widget-visible iframe[title*="chat" i],
  iframe[title*="chat" i],
  iframe[id^="tawk"],
  iframe[style*="z-index:100000"] {
    bottom: calc(75px + env(safe-area-inset-bottom, 0px)) !important;
  }

  body.is-messages-page iframe[title*="chat" i],
  body.is-messages-page iframe[id^="tawk"],
  body.is-messages-page iframe[style*="z-index:100000"] {
    bottom: calc(84px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ---------- Kategori navigasyonu (nav-bar) ---------- */
/* Mobil/tablet: header nav gizlenir; kategoriler alt menüdeki
   "Kategori" butonu ile #navbarNav offcanvas üzerinden açılır. */
@media (max-width: 992px) {
  .nav-bar {
    display: none !important;
  }
}

/* ---------- Mobil kategori offcanvas ---------- */
.mobile-cats {
  width: min(88vw, 360px);
}

.mobile-cats__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-cats__row {
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--cz-border-color, rgba(0, 0, 0, .1));
}

.mobile-cats__link {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  min-width: 0;
  padding: 10px 8px 10px 16px;
  color: inherit;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}

.mobile-cats__link > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-cats__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 9px;
  background: var(--cz-tertiary-bg, rgba(0, 0, 0, .05));
}

.mobile-cats__icon img,
.mobile-cats__icon svg {
  width: 20px;
  height: 20px;
  object-fit: contain;
}

.mobile-cats__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  min-height: 52px;
  flex-shrink: 0;
  padding: 0;
  background: none;
  border: 0;
  color: inherit;
}

.mobile-cats__toggle i {
  transition: transform .2s ease;
}

.mobile-cats__toggle.collapsed i {
  transform: rotate(-90deg);
}

.mobile-cats__sub > ul {
  list-style: none;
  margin: 0;
  padding: 4px 0 8px;
  background: var(--cz-tertiary-bg, rgba(0, 0, 0, .03));
}

.mobile-cats__sub a {
  display: block;
  padding: 10px 16px 10px 62px;
  color: inherit;
  font-size: 13px;
  text-decoration: none;
  opacity: .85;
}

.mobile-cats__sub .mobile-cats__all {
  font-weight: 600;
  opacity: 1;
}

.mobile-cats__footer {
  padding: 16px;
}

/* ---------- Üst bar dokunma hedefleri ---------- */
@media (max-width: 992px) {
  .top-bar__theme,
  .top-bar__currency {
    min-width: 40px;
    min-height: 34px;
    padding: 4px 8px;
  }

  .top-bar__currency-menu {
    max-height: 60vh;
    overflow-y: auto;
  }
}

/* ---------- Footer bağlantılarının dokunma alanı ---------- */
/* Metin bağlantıları 17px yükseklikteydi; dokunmatikte hedef büyütülüyor. */
@media (max-width: 992px) {
  .site-footer__links {
    gap: 4px;
  }

  .site-footer__links a {
    min-height: 38px;
    padding: 5px 0;
  }

  /* Bağlantılar büyüdüğü için daraltılmış panelde daha fazla satır göster */
  .site-footer__panels {
    max-height: 272px;
  }
}

/* Tek kolona düşen sütun grupları arasındaki boşluk listeyi bölük gösteriyordu.
   Boşluğun kaynağı Bootstrap'in <ul> için verdiği alt kenar boşluğuydu. */
@media (max-width: 560px) {
  .site-footer__cols {
    gap: 4px;
  }

  .site-footer__links {
    margin-bottom: 0;
  }
}

/* ---------- Yatay kaydırılan şeritlere kaydırma ipucu ---------- */
@media (max-width: 992px) {
  .hero-slider__tabs,
  .site-footer__tabs,
  .featured-listings__tabs {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
  }

  .hero-slider__tabs > *,
  .site-footer__tabs > *,
  .featured-listings__tabs > * {
    scroll-snap-align: start;
  }
}

/* ---------- Sepet ikonundaki sayaç taşması ---------- */
@media (max-width: 992px) {
  .icon-btn--cart span {
    overflow: visible;
  }

  .icon-btn__badge {
    pointer-events: none;
  }
}

/* ---------- Öne çıkan ilanlar başlık çubuğu sırası ---------- */
/* Mobilde önce başlık, sonra sekmeler, en sona "İlan Pazarı" bağlantısı. */
@media (max-width: 560px) {
  .featured-listings__toolbar {
    row-gap: 10px;
  }

  .featured-listings__tabs {
    order: 2;
  }

  .featured-listings__market {
    order: 3;
  }
}

/* ---------- İki kolonlu ilan kartında satıcı satırı ---------- */
/* Kart ~170px genişliğe düştüğü için satıcı adı "n..." şeklinde kırpılıyordu.
   Avatar ve puan rozetini küçültüp isme yer açıyoruz. */
@media (max-width: 560px) {
  .listing-cards-grid .listing-card__seller {
    gap: 6px;
    padding: 10px 10px 8px;
  }

  .listing-cards-grid .listing-card__seller-name {
    max-width: calc(100% - 58px);
    gap: 5px;
    padding: 3px 7px 3px 3px;
    font-size: 11px;
  }

  .listing-cards-grid .listing-card__seller-name i {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }

  .listing-cards-grid .listing-card__rating {
    gap: 3px;
    padding: 3px 7px;
    font-size: 11px;
  }

  .listing-cards-grid .listing-card__rating i {
    font-size: 11px;
  }

  .listing-cards-grid .listing-card__rating span {
    font-size: 10px;
  }
}

/* ---------- Çok küçük ekranlarda ilan kartı ---------- */
@media (max-width: 400px) {
  /* Satış sayısı yerine ismi göstermek daha faydalı */
  .listing-cards-grid .listing-card__rating span {
    display: none;
  }

  .listing-cards-grid .listing-card__seller-name {
    max-width: calc(100% - 46px);
  }
}

/* ---------- Mobil: sepete ekle sadece ikon ---------- */
@media (max-width: 767.98px) {
  .listing-card__footer,
  .listing-cards-grid .listing-card__footer {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 8px;
  }

  .listing-card__price,
  .listing-cards-grid .listing-card__price {
    flex: 0 0 auto;
    width: fit-content;
    max-width: 100%;
    min-width: 0;
  }

  .listing-card__cart-form,
  .listing-cards-grid .listing-card__cart-form {
    flex-shrink: 0;
  }

  .listing-card__cart-btn,
  .listing-cards-grid .listing-card__cart-btn {
    width: 36px;
    min-width: 36px;
    height: 36px;
    min-height: 36px;
    padding: 0;
    gap: 0;
    justify-content: center;
  }

  .listing-card__cart-btn span,
  .listing-cards-grid .listing-card__cart-btn span {
    display: none;
  }

  .listing-card__cart-btn i,
  .listing-cards-grid .listing-card__cart-btn i {
    font-size: 15px;
    margin: 0;
  }
}

/* ---------- Mesajlaşma: SMS ile sohbete çağır butonu ---------- */
@media (max-width: 767.98px) {
  .messages-chat__sms-text {
    display: none;
  }
}