/* ==========================================================================
   YAPIOK DUYARLI KATMAN (27.09.2026) — bütün vitrin, tema style.css'ten SONRA yüklenir (layouts/main.blade.php).
   Kaynak: 22 şablon × 12 genişlik (320–1920 px) otomatik denetimi (yatay taşma, dokunma hedefi, iOS yakınlaştırma).
   İlkeler: WCAG 2.2 — 1.4.10 Reflow (320 CSS px'te yatay kaydırma yok), 2.5.8 hedef ≥ 24×24 (dokunmatikte 44×44 Apple HIG /
   48 Material hedeflenir), iOS'ta 16 px altı form alanı odakta sayfayı yakınlaştırır. Masaüstü görünüm değişmez; kurallar
   yalnız dar ekran (max-width) ya da dokunmatik (pointer: coarse) koşullarında devreye girer.
   ========================================================================== */

/* ---------- 1. Yatay taşma güvencesi ---------------------------------------------------------------------------------
   Karuseller (owl/slick izleri) ve kart üstü eylem düğmeleri kasıtlı olarak ekran dışına uzanıyor; sayfa genişliğini
   büyütmesinler. `clip` kaydırma kabı OLUŞTURMAZ → yapışkan başlık (position: sticky) bozulmaz (hidden bozardı). */
@supports (overflow: clip) {
  html, body { overflow-x: clip; }
}

/* Ana sayfa kaydırıcısı: son göstergenin üzerine gelince açılan önizleme görseli sağ kenardan 54 px taşıyordu (1024 px) */
.ei-slider-thumbs li:last-child img { left: auto !important; right: 0; }
@media (hover: none) { .ei-slider-thumbs li img { display: none !important; } }   /* dokunmatikte üzerine gelme yok */

/* Konteynersiz .row'un -15 px kenar boşluğu (marka ve mağaza sayfaları) — kök neden */
#content-wrapper > .row { margin-left: 0; margin-right: 0; }
/* .container.px-2 (8 px) içindeki satır -15 px değil -8 px olmalı (markalar, mağazalar) */
.container.px-2 > .page-header > .row { margin-left: -.5rem; margin-right: -.5rem; }

/* Kayıt formu: sabit genişlikli kutu dar ekranda taşıyordu */
.login-box, .login-box .box, .login-section, .login-section .form-container { max-width: 100%; }
@media (max-width: 575.98px) {
  .login-box { width: auto; margin-left: 12px; margin-right: 12px; }
  /* display: table en geniş çocuğa göre büyüyordu (390 px ekranda 417 px) */
  .login-section .form-container, .login-section .login-form-section { display: block; width: auto; }
}

/* reCAPTCHA 304 px sabit: 360 px altında orantılı küçült */
@media (max-width: 379.98px) {
  .g-recaptcha { transform: scale(.84); transform-origin: 0 0; margin-bottom: -12px; }
}

/* İçerik alanlarında görsel ve tablo taşmasın (ürün açıklaması, blog, bilgi sayfaları) */
#desc_tab img, .product-description img, .blog-content img, .yk-icerik img, .page-content img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  #desc_tab table, .product-description table, .blog-content table, .yk-icerik table, .page-content table {
    display: block; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
}

/* ---------- 2. iOS yakınlaştırma: dokunmatikte form alanları en az 16 px ------------------------------------------- */
@media (pointer: coarse) and (max-width: 991.98px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=submit]):not([type=button]):not([type=image]),
  select, textarea { font-size: 16px !important; }
}

/* ---------- 3. Dokunma hedefleri (yalnız dokunmatik) ------------------------------------------------------------------ */
@media (pointer: coarse) {
  /* başlık: menü düğmesi ve simgeler 44×44 */
  #header-main .header-menu-toggler a.main-menu-toggle,
  #header-main .header-utility ul > li > a {
    display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  }
  #header-main .header-utility ul { gap: 0; }
  #header-main .header-utility ul > li { margin: 0; padding: 0; }

  /* içerik haritası */
  .breadcrumb a { display: inline-block; padding-top: 6px; padding-bottom: 6px; }

  /* alt bilgi: bağlantı listeleri ve iletişim satırları */
  .footer-content-box-links ul > li > a,
  .footer-content-box-number > a, .footer-content-box-website > a, .footer-logo > a,
  .links-list > li > a {
    display: inline-block; padding-top: 8px; padding-bottom: 8px;
  }
  .footer-content-box-links ul > li { margin-bottom: 0; }

  /* ürün sayfası paylaşım düğmeleri */
  .share .social-share-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; min-height: 40px; }

  /* mobil menü satırları */
  .menu-list > li > a { display: flex; align-items: center; min-height: 48px; }

  /* kart yıldızları (19×14 bağlantı, her yıldız ayrı): kartın tamamı zaten ürüne gidiyor; parmakla hedeflenemeyen yıldız
     bağlantıları dokunmayı kartın kendisine bıraksın */
  .box-ratting a, .product-info-rating a { pointer-events: none; }
  /* ana sayfa kaydırıcı göstergeleri: 4 px çubuk → dokunulabilir alan (çubuk görünümü korunur) */
  .ei-slider-thumbs li { padding-top: 10px; padding-bottom: 10px; background-clip: content-box; }
}
/* küçük telefonlarda başlık simgeleri sığsın */
@media (pointer: coarse) and (max-width: 374.98px) {
  #header-main .header-menu-toggler a.main-menu-toggle,
  #header-main .header-utility ul > li > a { min-width: 38px; }
}

/* ---------- 4. Mobil başlık: arama kutusu her zaman görünür (tam genişlik ikinci satır) ------------------------------
   Tema arama kutusunu büyüteç simgesiyle açılan sabit katmanda gizliyordu; e-ticarette mobil kullanıcının ilk eylemi arama. */
@media (max-width: 991.98px) {
  #header-main .global-search {
    position: static !important; display: block !important; visibility: visible !important; opacity: 1 !important;
    order: 3; flex: 0 0 100%; max-width: 100%; width: 100% !important; top: auto !important; left: auto !important;
    padding: 0 15px 10px !important; transition: none !important; z-index: auto;
  }
  #header-main .global-search .header-search { max-width: none; margin: 0 !important; padding: 0 !important; background: transparent; }
  #header-main .global-search .header-search > form { width: 100% !important; }
  #header-main .global-search .search-box { width: 100%; }
  #header-main .exit-search, #header-main .header-utility .search-btn { display: none !important; }
  #header-main .global-search .trending-words { display: none; }
  .headerSticky #header-main .global-search, .headerSticky .header-search { display: block !important; }
}

/* ---------- 5. Ürün listeleri: telefonda 2 sütun (tema 414 px altında tek sütuna düşürüyordu) --------------------------- */
@media (max-width: 575.98px) {
  .product-2nd-parent { column-gap: 8px; row-gap: 0; }
  .product-2nd-parent > .categoryCard, .product-2nd-parent > .list-view-card {
    flex-basis: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important;
  }
  .categoryCard .product-info { padding-left: 8px; padding-right: 8px; }
  .categoryCard .product-info-title {
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-size: 13px; line-height: 18px; min-height: 36px;
  }
  .categoryCard .product-img-wrap { height: 150px; }
  .categoryCard .product-img-wrap img { max-height: 140px; object-fit: contain; }
  /* "Nakliye dahil" rozeti yarım genişlik kartta görselin yarısını örtüyordu */
  .categoryCard .product-img-wrap > img:not(.product-img-primary):not(.product-img-alt) { width: 34px !important; height: 34px !important; }
}

/* ---------- 6. Ürün sayfası: sekmeler yatay kaydırılabilir şerit (iki satıra kırılmasın) --------------------------------- */
@media (max-width: 767.98px) {
  #product-desc-section .nav-tabs.nav-justified {
    display: flex; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px;
  }
  #product-desc-section .nav-tabs.nav-justified::-webkit-scrollbar { display: none; }
  #product-desc-section .nav-tabs.nav-justified > li { flex: 0 0 auto; }
  #product-desc-section .nav-tabs.nav-justified > li > a { white-space: nowrap; min-height: 44px; display: flex; align-items: center; }
}

/* ---------- 7. Mobil menü alt kısayolları: 280 px'lik tek satır taşıyor, son öğeler kesiliyordu → 3 sütunlu ızgara ----- */
@media (max-width: 991.98px) {
  .main-menu-bottom .main-menu-bottom-box { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; flex-wrap: wrap; }
  .main-menu-bottom .main-menu-bottom-item { width: auto !important; min-width: 0; margin: 0 !important; }
  .main-menu-bottom .main-menu-bottom-item > a { width: 100%; min-height: 56px; }
}

/* ---------- 8. Ürün sayfası yapışkan satın alma çubuğu (duyarli.js oluşturur; yalnız ≤ 991 px) --------------------------- */
.yk-alt-cubuk { display: none; }
@media (max-width: 991.98px) {
  .yk-alt-cubuk {
    display: flex; align-items: center; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid #dbe3ee;
    box-shadow: 0 -4px 16px rgba(20, 34, 56, .08); transform: translateY(110%); transition: transform .2s ease;
  }
  .yk-alt-cubuk.acik { transform: none; }
  .yk-alt-cubuk__fiyat { flex: 1 1 auto; min-width: 0; line-height: 1.15; }
  .yk-alt-cubuk__fiyat strong { display: block; font-size: 17px; color: #1f2d42; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yk-alt-cubuk__fiyat small { display: block; font-size: 12px; color: #5b6878; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .yk-alt-cubuk__dugme {
    flex: 0 0 auto; min-height: 48px; padding: 0 18px; border: 0; border-radius: 8px; font-size: 15px; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; color: #fff; background: #e53935; text-decoration: none;
  }
  .yk-alt-cubuk__dugme--teklif { background: #2c3e5a; }
  .yk-alt-cubuk__dugme:focus-visible { outline: 3px solid #1f2d42; outline-offset: 2px; }
  body.yk-alt-cubuk-var { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  /* yüzen sohbet düğmeleri çubuğun üstüne çıksın */
  body.yk-alt-cubuk-var #yka-ac { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body.yk-alt-cubuk-var #zcart_chat { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }   /* canlı destek balonu */
}
@media (prefers-reduced-motion: reduce) {
  .yk-alt-cubuk { transition: none; }
}
/* araçların kendi alt çubukları (planlayıcı özeti, showroom ürün çubuğu) varken de sohbet düğmeleri üstte kalsın */
@media (max-width: 991.98px) {
  body:has(.yt-pl-mobil-cubuk) #yka-ac, body:has(.yt-sr-alt-cubuk:not([hidden])) #yka-ac { bottom: calc(84px + env(safe-area-inset-bottom)); }
  body:has(.yt-pl-mobil-cubuk) #zcart_chat, body:has(.yt-sr-alt-cubuk:not([hidden])) #zcart_chat { bottom: calc(72px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- 9. Okunabilirlik: telefonda ikincil etiketler en az 12 px (denetimde 10,5–11,5 px çıkanlar) ------------------- */
@media (max-width: 575.98px) {
  .yt-rozet, .yt-urun__marka, .yt-mini__marka, .yks-neden li, .yks-adet, .ykg-kart__marka, .ykg-kart__mekan,
  .product-info-feature-list li, .seller-badge-pill, .yk-rozet,
  .yk-shops__yer, .yk-shops__durum, .yk-shops__rozet, .yk-shops__not, .yk-shops__sifirla, .yk-shops__loc, .yk-shops__btn {
    font-size: 12px !important;
  }
}

/* bülten: "Abone Ol" dar ekranda iki satıra kırılıyordu; alan esnesin, düğme tek satır kalsın */
@media (max-width: 575.98px) {
  .footer-newsletter-box-form-box { display: flex; }
  .footer-newsletter-box-form-box > input { flex: 1 1 auto; min-width: 0; }
  .footer-newsletter-box-form-box > button { flex: 0 0 auto; white-space: nowrap; padding-left: 16px; padding-right: 16px; }
}

/* ---------- 10. Çentikli ekranlar: sabit alt öğeler güvenli alanda -------------------------------------------------- */
@supports (padding: env(safe-area-inset-bottom)) {
  #yka-ac { margin-bottom: env(safe-area-inset-bottom); }
}