/* ==========================================================================
   STD Standart Cıvata — Tablet & Mobil iyileştirme yaması
   Tema: fasteners (WordPress). layout.min.css SONRASINDA yüklenmeli.
   Kırılımlar: 1025–1279 (iPad yatay) · ≤1024 (iPad dikey) · ≤648 (telefon)
   ========================================================================== */

/* --- 0. KÖK NEDEN: yatay taşma -------------------------------------------
   GSAP, .image-container bölümlerine scale(1.1) uyguluyor → sayfa ~%10 taşıyor.
   iOS Safari body{overflow-x:hidden}'ı viewport için yok saydığından iPad/iPhone
   sayfayı uzaklaştırıp (zoom-out) kenarda boşluk gösteriyor. clip, kaydırma
   kabı oluşturmadığı için ScrollSmoother/sticky davranışını bozmaz. */
html, body { overflow-x: clip; }
#smooth-content { overflow-x: clip; }
@supports not (overflow: clip) {
  #smooth-content { overflow-x: hidden; }
}

/* --- 1. iPad yatay (1025–1279px): sıkışan masaüstü menü yerine hamburger --- */
@media (min-width: 1025px) and (max-width: 1279px) {
  header { padding: 0 3.2rem; height: 7.6rem; }
  header .logo { width: 7rem; height: 6rem; }
  header nav { position: static; }
  header .header #navbar,
  header .header .burger { display: none !important; }
  header .mobile-menu-item,
  header .mobile-menu-item .hamburger { display: block; }
  header .right,
  header .search { top: 50%; transform: translateY(-50%); height: 4rem; display: flex; align-items: center; }
  header .search .se { height: 4rem; }
  header nav .lang { width: 4rem; height: 4rem; font-size: 1.4rem; }
}

/* --- 2. Sabit yan ikonlar: içeriği kapatmasın ----------------------------- */
/* ≤1024 her cihazda; 1025–1366 yalnızca dokunmatik (iPad yatay / iPad Pro) */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) and (max-width: 1366px) {
  footer { padding-bottom: 9rem; }
  .sticky-icons {
    top: auto;
    right: 2rem;
    bottom: calc(2rem + env(safe-area-inset-bottom, 0px));
    flex-direction: row;
    border-radius: 99rem;
    overflow: hidden;
    box-shadow: 0 .8rem 2.4rem rgba(0, 35, 90, .28);
  }
  .sticky-icons a { width: 5.2rem; height: 5.2rem; border-radius: 0; margin: 0; }
  .sticky-icons a + a { border-left: 1px solid rgba(255, 255, 255, .2); }
  .sticky-icons a:focus-visible { outline: 3px solid #fff; outline-offset: -5px; }
}

/* Telefon: etiketli alt eylem çubuğu */
@media (max-width: 648px) {
  .sticky-icons {
    left: 0; right: 0; bottom: 0;
    border-radius: 0;
    background: #0057b7;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -.4rem 1.6rem rgba(0, 35, 90, .18);
  }
  .sticky-icons a {
    flex: 1 1 0;
    width: auto;
    height: 6rem;
    flex-direction: column;
    gap: .4rem;
  }
  .sticky-icons a svg { width: 2.2rem; }
  .sticky-icons a[data-label]::after {
    content: attr(data-label);
    font-size: 1.15rem;
    line-height: 1;
    letter-spacing: .02em;
    color: #fff;
    white-space: nowrap;
  }
  /* alt çubuğun footer'ı örtmemesi için */
  footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)); }
}

/* --- 3. Ürünlerimiz giriş metni: tam genişlik + okunur kontrast ---------- */
@media (max-width: 1024px) {
  .production .content,
  .production .content .caption { width: 100%; max-width: none; }
  .production .content .caption p {
    width: 100%;
    max-width: none;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    line-height: 1.55;
    color: rgba(12, 12, 14, .72); /* 0.5 → AA kontrast */
  }
}

/* --- 4. "Bir Bakışta STD" rakamları satır kırmasın ----------------------- */
@media (max-width: 1024px) {
  .yearly-data .item span {
    font-size: clamp(3rem, 7.4vw, 5.6rem);
    white-space: nowrap;
    line-height: 1.1;
  }
  .yearly-data .item small { line-height: 1.35; }
}

/* --- 5. Haberler: başlık ölçeği ve tablette 3 sütun ---------------------- */
@media (max-width: 1279px) {
  .news .newsList .item .title {
    font-size: clamp(1.7rem, 1.9vw, 2.2rem);
    line-height: 1.35;
  }
}
@media (min-width: 700px) and (max-width: 1024px) {
  .news .newsList { flex-wrap: nowrap; gap: 2rem; }
  .news .newsList .item { width: auto; flex: 1 1 0; max-width: none; padding: 0; }
  .news .newsList .item:nth-child(n+4) { display: none; }
}

/* --- 6. Footer alt satır: iPad yatayda kırılan bağlantılar --------------- */
@media (min-width: 1025px) and (max-width: 1279px) {
  footer .bottom > div:first-child { flex: 1 1 auto; min-width: 0; }
  footer .bottom ul { margin-left: 4rem; flex-wrap: wrap; gap: .8rem 2.4rem; }
  footer .bottom ul li { margin: 0; }
  footer .bottom ul li a,
  footer .bottom .agency a { white-space: nowrap; }
}

/* --- 7. Dokunmatik cihazlarda slider okları logoları/kartları örtmesin --- */
@media (hover: none) and (max-width: 1366px) {
  .brands .brandsSlider .swiper-button-next,
  .brands .brandsSlider .swiper-button-prev,
  .successSlidercontent .swiper-button-next,
  .successSlidercontent .swiper-button-prev { display: none; }
}

/* --- 8. Dokunma hedefleri & odak --------------------------------------- */
@media (max-width: 1024px) {
  footer .newsletter .email input[type="email"],
  footer .newsletter .email input[name="EMAIL"] { font-size: 1.6rem; } /* iOS zoom'u engeller */
  footer .newsletter .email input::placeholder { color: rgba(255, 255, 255, .7); }
}

/* --- 9. Ürün kartları (tablet): 3 kart tek satırda, ekrana ortalı -------
   Yalnızca 3 kart var; tablette kaydırmalı dizilim 3. kartı kesiyordu.
   Swiper satır içi width/margin/transform yazdığı için !important gerekli. */
@media (min-width: 700px) and (max-width: 1279px), (hover: none) and (pointer: coarse) and (max-width: 1366px) and (min-width: 700px) {
  section.pl .production .productionSlider-content { padding-left: 0; padding-right: 5vw; }
  .production .productionSlider .swiper-wrapper {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    transform: none !important;
  }
  .production .productionSlider .swiper-slide { width: auto !important; margin-right: 0 !important; }
  .production .productionSlider-content .scrolldrag,
  .production .productionSlider-content .swiper-scrollbar { display: none; }
}

/* --- 10. Banner: iPad dikeyde 60vh fazla yüksek, video aşırı kırpılıyor --- */
@media (min-width: 649px) and (max-width: 1366px) and (orientation: portrait) {
  section.start { height: max(56.25vw, 44rem); }
}

/* --- 11. Ürünlerimiz metni iPad yatayda (1025–1279) tam genişlik -------- */
@media (min-width: 1025px) and (max-width: 1279px) {
  .production .content .caption { width: 100%; max-width: none; }
  .production .content .caption p { max-width: none; font-size: 2.8rem; line-height: 1.5; color: rgba(12, 12, 14, .72); }
}

/* --- 12. Kategori filtresi (sol menü): uzun adlar haptan taşmasın --------
   a.your-class-name display:inline → iki satıra kırılınca kenarlık parçalanıyordu. */
.filterBar .catFiltTop { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .8rem; padding-bottom: 1.6rem; }
/* style.css: .product-filter-list-content .filter-sidebar .submenuItems li ul li { margin:0 10px 25px 0 } → gap ile değiştir */
.product-filter-list-content .filter-sidebar .submenuItems .catFiltTop > li,
.filterBar .catFiltTop li { height: auto; max-width: 100%; margin: 0; }
.filterBar .catFiltTop a {
  display: inline-block;
  max-width: 100%;
  line-height: 1.35;
  vertical-align: top;
}

/* --- 13. Ürün listeleme 769–900px: filtre butonu + filtre + ürünler alt alta
   (sayfadaki std-filter-ux ≤900'de "Filtrele" butonu ekliyor ama tema bu aralıkta
   satırı yatay bırakıyor → ürün listesi ~40px'e sıkışıyordu). */
@media (min-width: 769px) and (max-width: 900px) {
  .product-filter-list-content { flex-direction: column; align-items: stretch; }
  .product-filter-list-content > .std-filter-toggle,
  .product-filter-list-content > .filter-sidebar,
  .product-filter-list-content > .product-items { width: auto; max-width: none; flex: 0 0 auto; }
}