/* ============================================================
   MOBILE — telefon için düzeltmeler (İmeks Hediyelik)
   style.css'ten SONRA yüklenmeli. Yalnızca 900px altını etkiler;
   bilgisayar görünümü değişmez.
   ============================================================ */

@media (max-width: 900px) {
  /* Daha az boşluk: bölümler arası 72px yerine 40px */
  :root { --section: 40px; --gutter: 16px; }
  .section-head { margin-bottom: 20px; gap: 12px; }
  .page-head { padding-block: 20px 18px; }
  .page-head .lede { font-size: .95rem; }

  /* Kategoriler + arama çubuğu: kaydırırken üstte sabit kalsın */
  .toolbar {
    position: sticky;
    top: var(--header-h);
    z-index: 40;
    margin-inline: calc(var(--gutter) * -1);
    padding: 8px var(--gutter);
    gap: 8px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 14px -12px rgba(20, 22, 26, .35);
  }
  .toolbar .filters {
    overflow-x: auto;
    flex-wrap: nowrap;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 2px;
    /* sağ kenarda devamı olduğunu gösteren solgunluk */
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
  .toolbar .chip,
  .chip--sub {
    min-height: 38px;            /* parmakla rahat basılır */
    padding: 8px 14px;
    font-size: .82rem;
    scroll-snap-align: start;
    flex: 0 0 auto;
  }
  .subfilters {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-top: 8px;
    margin-top: 6px;
  }
  .subfilters::-webkit-scrollbar { display: none; }

  /* Arama + sıralama tek satırda */
  .toolbar__right { display: flex; gap: 8px; flex-wrap: nowrap; }
  .toolbar__right > *:first-child { flex: 1 1 auto; min-width: 0; }
  .toolbar__right input,
  .toolbar__right select {
    font-size: 16px;             /* iPhone'da yakınlaştırma (zoom) olmasın */
    min-height: 40px;
  }
  #shop-count { display: block; margin: 10px 0 6px; font-size: .8rem; }
}

@media (max-width: 640px) {
  /* Ürünler: her telefonda yan yana 2 ürün (önceden 400px altında tek sütundu) */
  .prod-grid,
  .prod-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 18px 10px;
  }
  .card__media { margin-bottom: 8px; border-radius: 10px; }
  .card__badge { top: 6px; left: 6px; padding: 3px 7px; font-size: .55rem; }
  .card__cat {
    display: block;
    font-size: .6rem;
    letter-spacing: .08em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .card__name {
    font-size: .98rem;
    line-height: 1.22;
    margin-top: 3px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .card__meta { margin-top: 2px; font-size: .75rem; }
  .card__quick { display: none; }   /* "Ürünü incele" yazısı yer kaplıyordu */
  .card:hover { transform: none; }

  /* Ana sayfa: uzun metin bloklarını sıkılaştır */
  .hero__grid { gap: 20px; }
  .hero__intro { font-size: .95rem; }
  .why-grid, .shipband__grid { gap: 12px; }
  .footer__grid { gap: 24px; }

  /* Butonlar tam genişlik ve rahat dokunma alanı */
  .contact-cta__row .btn,
  .hero__cta .btn,
  .sup__actions .btn,
  .shipband__actions .btn { width: 100%; justify-content: center; min-height: 46px; }

  /* Form alanları: iOS'ta otomatik zoom olmasın */
  input, select, textarea { font-size: 16px; }
}

/* ---------- mobile.js'in eklediği parçalar ---------- */

/* Menüde (☰) kategori listesi */
.drawer__cats { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
.drawer__cats-title {
  display: block; font-size: .7rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 6px;
}
.drawer__cat {
  display: flex; align-items: center; justify-content: space-between;
  padding: 11px 0; font-size: .95rem; color: var(--ink);
  border-bottom: 1px solid var(--line-2);
}
.drawer__cat::after { content: "›"; color: var(--ink-3); font-size: 1.2rem; }

/* Yukarı çık butonu */
.to-top {
  position: fixed; left: 16px; bottom: 18px; z-index: 60;
  width: 44px; height: 44px; border-radius: 50%; border: 0;
  background: var(--ink); color: #fff; font-size: 1.2rem; line-height: 44px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: opacity .2s, transform .2s;
}
.to-top.is-on { opacity: 1; pointer-events: auto; transform: none; }
@media (min-width: 901px) { .to-top, .drawer__cats { display: none; } }

/* ---------- iPhone'da sayfanin saga tasmasini engelle (22.10.2026) ----------
   Kategori cubugu + arama satiri Safari'de icerik genisligine (3000px+) aciliyordu;
   sayfa uzaklasip yanda bos alan olusuyordu. Cubugu ekran genisligine kilitle. */
@media (max-width: 900px) {
  html, body { max-width: 100%; overflow-x: clip; }
  .toolbar {
    display: block;
    width: auto;
    min-width: 0;
    max-width: 100vw;
  }
  .toolbar > * { min-width: 0; max-width: 100%; }
  .toolbar .filters {
    display: flex;
    width: 100%;
    contain: inline-size;
  }
  .subfilters { max-width: 100%; contain: inline-size; }
  .toolbar__right { width: 100%; margin-top: 8px; }
  .toolbar__right .field { flex: 1 1 0; min-width: 0; }
  .toolbar__right select { flex: 0 0 auto; max-width: 45%; }
}