/* ==========================================================================
   EKSFORK – Responsive Düzeltmeleri
   Bu dosya en SON yüklenir; sayfalara gömülü kuralları güvenle ezer (override).
   Mevcut HTML/içerik/görsellere dokunulmaz. Sadece görünüm/responsive ayarı.
   ========================================================================== */

/* --------------------------------------------------------------------------
   ADIM 1 — Mobil üst bar: sosyal medya ikonları (ortada, kesilmeden)
   Sorun: .top-header .social-media kuralı position:absolute + right:35px ile
   mobilde üst barın dışına taşıyordu, son ikon kesiliyordu.
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .top-header .social-media {
    position: static !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 0 !important;
    padding: 6px 0 !important;
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;  /* ikonlar ortada */
    align-items: center !important;
    gap: 6px !important;
    list-style: none !important;
  }

  .top-header .social-media li {
    margin: 0 !important;
    display: inline-flex !important;
  }

  /* Boş sosyal medya öğesini (içi boş <i class="fab">) gizle */
  .top-header .social-media li a[href=""],
  .top-header .social-media li a[href="#"]:empty {
    display: none !important;
  }

  /* Dokunma alanı en az 40x40 (tıklaması kolay) */
  .top-header .social-media li a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 1 !important;
  }

  .top-header .social-media li a i {
    font-size: 17px !important;
  }

  /* Üst bar mobilde taşmasın */
  .top-header,
  .top-header .row {
    overflow: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   ADIM 1b — Hero başlığı (EKSFORK) ve alt başlık (İŞ MAKİNELERİ) ile
   kategori kartlarının çakışması
   Sorun 1: <h2> font-size:90px mobilde ekrana sığmıyordu.
   Sorun 2: .eksfork-category-section negatif margin (-70px) kartları yukarı
            çekip alt başlığın üstüne bindiriyordu.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Hero ana başlık: ekrana sığacak şekilde küçült */
  .wd-heading .title_b {
    font-size: 52px !important;
    line-height: 1.05 !important;
    word-break: break-word !important;
  }

  /* Hero alt başlık */
  .wd-heading .sub_title_b {
    font-size: 20px !important;
    line-height: 1.3 !important;
    margin-bottom: 0 !important;
  }

  /* Kartlar artık başlığın üstüne binmesin (negatif margin iptal) */
  .eksfork-category-section {
    margin-top: 24px !important;
  }
}

@media (max-width: 480px) {
  .wd-heading .title_b {
    font-size: 40px !important;
  }
  .wd-heading .sub_title_b {
    font-size: 18px !important;
  }
}

/* ==========================================================================
   ADIM 2 — Yatay taşma (horizontal scroll) + container/grid breakpoint
   ========================================================================== */

/* 2.1 — Genel taşma koruması (tüm ekranlarda).
   Sayfanın yatayda kaymasını kökten engeller. */
html, body {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* 2.2 — Hiçbir görsel/video/iframe/tablo konteynerini aşmasın */
img, video, iframe, embed, object, svg {
  max-width: 100% !important;
  height: auto;
}
iframe { height: auto; }

/* --------------------------------------------------------------------------
   2.3 — Mobil taşma kaynakları (max-width: 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Kayan dekoratif İngilizce metin – yatay scroll'un ana sebebi */
  .bg-parallax-text {
    overflow: hidden !important;
    max-width: 100% !important;
  }
  .bg-parallax-text > div {
    white-space: normal !important;
  }

  /* WPBakery tam-genişlik (100vw) blokları taşmasın */
  .vc_row[data-vc-full-width],
  .vc_row.vc_row-fluid {
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: auto !important;
    right: auto !important;
  }

  /* Ana satır/kolon konteynerleri ekrana otursun */
  .l-main.row,
  .row {
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .columns {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Müşteri logoları carousel'i taşmasın */
  .wd-clients-carousel {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

/* --------------------------------------------------------------------------
   2.4 — Grid breakpoint yönetimi
   Kategori kartları: 3 sütun → tablet 2 → mobil 1
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
  /* Mobilde kartlar TEK SÜTUN, alt alta */
  .eksfork-category-wrapper {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .eksfork-category-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Başlıklar bölünmesin (MİNİ EKSKAVATÖR tek satır akışında) */
  .eksfork-category-content h3 {
    word-break: normal !important;
    overflow-wrap: normal !important;
  }
}

@media (max-width: 480px) {
  .eksfork-category-wrapper {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ==========================================================================
   ADIM 3 — Mobil menü + dokunma alanları (48px) + tipografi
   mobile-menu.js ile birlikte çalışır.
   ========================================================================== */

@media (max-width: 768px) {

  /* 3.1 — ÇİFT HAMBURGER DÜZELTME
     Sağdaki fazla Max-Mega-Menu hamburger'ını gizle, tek (sol) kalsın. */
  .top-bar-right .mega-menu-toggle {
    display: none !important;
  }

  /* Sol üstteki tek hamburger – 48x48 dokunma alanı */
  .site-title-bar .menu-toggle,
  .menu-icon.menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 48px !important;
    height: 48px !important;
    cursor: pointer !important;
  }

  /* Sayfa içindeki ESKİ mega menüyü mobilde tamamen gizle
     (artık <body> altına kopyalanan .eksfork-mnav paneli kullanılıyor) */
  .l-header #mega-menu-primary,
  .l-header ul.mega-menu,
  #mobile-menu {
    display: none !important;
  }
}

/* 3.2 — MOBİL MENÜ PANELİ (<body> altına JS ile eklenir; header'ın
   transform/perspective etkisinden bağımsızdır). Medya sorgusu DIŞINDA
   tanımlı; görünürlüğü yalnızca .eksfork-open kontrol eder. */
.eksfork-mnav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 86% !important;
  max-width: 360px !important;
  height: 100% !important;
  background: #1D1D1D !important;
  z-index: 1000000 !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch !important;
  padding: 64px 0 40px 0 !important;
  box-shadow: 2px 0 24px rgba(0,0,0,0.45) !important;
  margin: 0 !important;
  list-style: none !important;
  transform: translateX(-105%);
  transition: transform 0.28s ease !important;
}
.eksfork-mnav.eksfork-open {
  transform: translateX(0) !important;
}

/* Arka plan karartma */
.eksfork-mnav-backdrop {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,0.5) !important;
  z-index: 999999 !important;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease !important;
}
.eksfork-mnav-backdrop.eksfork-open {
  opacity: 1;
  visibility: visible;
}

/* Kapatma (X) butonu */
.eksfork-mnav-close {
  position: absolute !important;
  top: 12px !important;
  right: 14px !important;
  width: 44px !important;
  height: 44px !important;
  background: transparent !important;
  border: 0 !important;
  color: #fff !important;
  font-size: 32px !important;
  line-height: 1 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

/* Menü açıkken arka plan kaymasın */
body.eksfork-menu-open {
  overflow: hidden !important;
}

/* Üst seviye menü öğeleri */
.eksfork-mnav .mega-menu-item {
  display: block !important;
  width: 100% !important;
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  float: none !important;
  margin: 0 !important;
}
.eksfork-mnav > .mega-menu-item:last-child,
.eksfork-mnav .mega-menu-item:last-child {
  border-bottom: 0 !important;
}
.eksfork-mnav .mega-menu-link {
  display: flex !important;
  align-items: center !important;
  min-height: 52px !important;
  padding: 14px 22px !important;
  color: #fff !important;
  font-size: 15.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.3px !important;
  line-height: 1.3 !important;
  text-decoration: none !important;
  transition: background 0.2s ease, color 0.2s ease, padding-left 0.2s ease !important;
}
.eksfork-mnav > .mega-menu-item > .mega-menu-link:hover,
.eksfork-mnav > .mega-menu-item > .mega-menu-link:active {
  background: rgba(245,180,0,0.10) !important;
  color: #f5b400 !important;
  padding-left: 26px !important;
}
/* Açık üst öğe vurgusu (sol turuncu şerit) */
.eksfork-mnav .eksfork-sub-open > .mega-menu-link {
  background: rgba(245,180,0,0.08) !important;
  box-shadow: inset 3px 0 0 #f5b400 !important;
  color: #f5b400 !important;
}

/* Alt menüler – kapalı; .eksfork-sub-open ile açılır (yumuşak açılış) */
.eksfork-mnav .mega-sub-menu {
  position: static !important;
  width: 100% !important;
  background: rgba(0,0,0,0.30) !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  left: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  list-style: none !important;
  max-height: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.3s ease !important;
  display: block !important;
}
.eksfork-mnav .eksfork-sub-open > .mega-sub-menu {
  max-height: 1500px !important;   /* açılış animasyonu */
}

/* Alt menü öğeleri */
.eksfork-mnav .mega-sub-menu > .mega-menu-item {
  border-bottom: 1px solid rgba(255,255,255,0.05) !important;
}
.eksfork-mnav .mega-sub-menu .mega-menu-link {
  padding: 12px 22px 12px 40px !important;
  font-size: 14.5px !important;
  font-weight: 500 !important;
  color: #cfcfcf !important;
  min-height: 46px !important;
}
.eksfork-mnav .mega-sub-menu .mega-menu-link:hover {
  background: rgba(255,255,255,0.05) !important;
  color: #f5b400 !important;
  padding-left: 44px !important;
}

/* Görselli alt blok (Mini Ekskavatörler / Paletli Traktörler / Forkliftler):
   başlık + görsel yan yana, derli toplu kart gibi */
.eksfork-mnav .mega-sub-menu .mega-block-title {
  margin: 0 !important;
  padding: 12px 22px 6px 40px !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: #fff !important;
  text-transform: uppercase !important;
  letter-spacing: 0.4px !important;
}
.eksfork-mnav .mega-sub-menu li[class*="widget_media_image"] {
  padding-bottom: 10px !important;
}
.eksfork-mnav .mega-sub-menu li[class*="widget_media_image"] > a {
  display: block !important;
  padding: 0 22px 0 40px !important;
}
.eksfork-mnav .mega-sub-menu img {
  display: block !important;
  width: 100% !important;
  max-width: 150px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 8px !important;
  background: #fff !important;
  padding: 6px !important;
  box-sizing: border-box !important;
}

/* Açılır/kapanır ok göstergesi (+ / –) – alt menüsü OLAN TÜM öğelerde
   (üst seviye + iç içe alt menüler) ki açılır menü olduğu anlaşılsın */
.eksfork-mnav .mega-indicator { display: none !important; }
.eksfork-mnav .mega-menu-item-has-children > .mega-menu-link::after {
  content: "+" !important;
  margin-left: auto !important;
  color: #f5b400 !important;
  font-size: 24px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  flex: 0 0 auto !important;
  padding-left: 10px !important;
}
.eksfork-mnav .eksfork-sub-open > .mega-menu-link::after {
  content: "\2013" !important;  /* – (açıkken) */
}

@media (max-width: 768px) {
  /* 3.3 — Genel dokunma alanları: butonlar & form alanları en az 44-48px */
  a.button, button, input[type="submit"], .wpcf7-submit,
  .eksfork-all-category-btn, .eksfork-category-card {
    min-height: 44px !important;
  }
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="search"], textarea, select {
    min-height: 44px !important;
    font-size: 16px !important;  /* iOS'ta zoom'u engeller */
  }

  /* 3.4 — Tipografi: mobilde okunaklı boyutlar */
  body { font-size: 15px !important; line-height: 1.55 !important; }
  h1 { font-size: 30px !important; line-height: 1.2 !important; }
  h2 { font-size: 24px !important; line-height: 1.25 !important; }
  h3 { font-size: 20px !important; line-height: 1.3 !important; }
  p  { font-size: 15px !important; line-height: 1.6 !important; }
}

/* ==========================================================================
   ADIM 4 — Görsel / slider / medya: aspect-ratio koruyarak ölçekleme
   ========================================================================== */

/* 4.1 — Tüm görseller en-boy oranını koruyarak ölçeklensin (her ekran) */
img {
  max-width: 100% !important;
  height: auto !important;
}
/* width/height attribute'u olan görsellerde oran korunsun, bozulmasın */
img[width][height] {
  height: auto !important;
}

/* 4.2 — Video / iframe / embed: 16:9 oranında responsive */
video, iframe, embed, object {
  max-width: 100% !important;
}

/* 4.3 — WPBakery tek görsel (vc_single_image) blokları taşmasın */
.wpb_single_image,
.vc_single_image-wrapper,
.wpb_single_image img,
.vc_single_image-img {
  max-width: 100% !important;
  height: auto !important;
}

@media (max-width: 768px) {
  /* Tek görsel blokları ortalansın ve tam genişlik olsun */
  .wpb_single_image {
    text-align: center !important;
  }
  .wpb_single_image .vc_single_image-wrapper {
    display: inline-block !important;
    width: auto !important;
    max-width: 100% !important;
  }

  /* 4.4 — Slider Revolution alanı (varsa) mobilde sabit yükseklikle ezilmesin */
  .rev_slider_wrapper,
  .rev_slider,
  rs-module-wrap,
  rs-module {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
  }
  rs-module-wrap img,
  .rev_slider img {
    object-fit: contain !important;
  }

  /* 4.5 — Müşteri logoları carousel (slick) – logolar oranını korusun */
  .wd-clients-carousel-item img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* 4.6 — Kategori kartı görselleri: sabit alan + oran koru (kırpma yerine sığdır) */
  .eksfork-category-image img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* 4.7 — Hero / sayfa başlık arka plan görseli mobilde düzgün otursun */
  .l-header,
  .page-header,
  [class*="vc_custom_"][style*="background-image"] {
    background-size: cover !important;
    background-position: center center !important;
  }
}

/* 4.8 — Galeri/figür içindeki görseller taşmasın */
figure, .gallery-item, .wp-caption {
  max-width: 100% !important;
}
figure img, .wp-caption img {
  width: 100% !important;
  height: auto !important;
}

/* ==========================================================================
   ADIM 5 — FİNAL: kategori kartı görselleri + WhatsApp + genel cila
   (Tüm ekran boyutlarında geçerli; hiçbir içerik silinmez)
   ========================================================================== */

/* 5.1 — KATEGORİ KARTI GÖRSELLERİ (Mini Ekskavatör / Paletli Traktör / Forklift)
   Sorun: .eksfork-category-image yüksekliği 200px ve "padding:px" (geçersiz)
   olduğu için ürün görselleri kırpılıyordu. Alanı büyütüp nefes payı veriyoruz. */
.eksfork-category-image {
  height: 240px !important;
  padding: 18px !important;
  background: #ffffff !important;
  box-sizing: border-box !important;
}
.eksfork-category-image img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;   /* kırpma yok, tam sığar */
  object-position: center !important;
}

/* Tablet & mobilde kart görsel yüksekliği */
@media (max-width: 1024px) {
  .eksfork-category-image { height: 230px !important; }
}
@media (max-width: 768px) {
  .eksfork-category-image { height: 250px !important; }
  /* "Tüm Kategoriler" butonu ekrana sığsın (min-width:460px taşmasın) */
  .eksfork-all-category-btn {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
}
@media (max-width: 480px) {
  .eksfork-category-image { height: 230px !important; }
}

/* 5.2 — Kart başlık ve ok hizası (okunabilirlik) */
.eksfork-category-content h3 {
  font-size: 18px !important;
  line-height: 1.25 !important;
  padding-right: 40px !important;   /* ok ile çakışmasın */
}

/* ==========================================================================
   ADIM 6 — Masaüstü header: E-TİCARET/E-KATALOG kutusu İLETİŞİM linkini
   kapatıyordu. Kutuyu üst (siyah) bara, sosyal ikonların soluna taşı; menü
   satırı serbest kalsın ve İLETİŞİM görünsün.
   ========================================================================== */
@media (min-width: 992px) {
  /* Hızlı erişim kutusunu menü hizasından çıkar, üst bara yerleştir */
  .eksfork-top-actions {
    top: 8px !important;
    right: 220px !important;          /* sosyal ikonların soluna */
    transform: none !important;        /* scale(1.2) iptal: taşmayı önler */
    padding: 4px 10px !important;
    z-index: 100000 !important;
  }
  .eksfork-action-item {
    font-size: 12px !important;
    padding: 0 10px !important;
  }

  /* Menüyü 90px sağa iten kural İLETİŞİM'i sağ kenara taşıyordu; sıfırla */
  header.l-header .top-bar-container .top-bar .top-bar-right #menu-primary-menu,
  header.l-header .top-bar-container .top-bar .top-bar-right #mega-menu-primary {
    transform: none !important;
  }

  /* Menü öğeleri kesilmesin / sığsın */
  #mega-menu-primary {
    flex-wrap: nowrap !important;
  }
  #mega-menu-primary > .mega-menu-item > .mega-menu-link {
    white-space: nowrap !important;
  }

  /* Son menü öğesi (İLETİŞİM) sağ kenarda kesilmesin */
  .top-bar-right {
    padding-right: 16px !important;
  }
}

/* Çok geniş ekranlarda kutu ile sosyal ikonlar arası ferah dursun */
@media (min-width: 1400px) {
  .eksfork-top-actions {
    right: 240px !important;
  }
}

/* 5.3 — WHATSAPP BUTONU – mobilde düzgün otursun, yazısı kesilmesin */
[class*="whatsapp"], [id*="whatsapp"],
a[href*="wa.me"], a[href*="api.whatsapp"], a[href*="whatsapp"] {
  max-width: 92vw !important;
}
@media (max-width: 768px) {
  /* Genelde sol-alt sabit WhatsApp balonu: taşmayı engelle */
  a[href*="wa.me"], a[href*="whatsapp"],
  [class*="whatsapp-"][style*="fixed"],
  [id*="whatsapp"] {
    left: 12px !important;
    right: auto !important;
    bottom: 12px !important;
    z-index: 99998 !important;
  }
}

/* 5.4 — Bağlantıların (link) her zaman tıklanabilir olması:
   bazı kart/overlay yapılarında üst katman linki engelleyebiliyor */
.eksfork-category-card,
.mega-menu-link,
.menu a, .footer a, a.button {
  position: relative;
  z-index: 1;
}

/* 5.5 — Genel okunabilirlik & taşma güvenliği (her ekran) */
* { -webkit-text-size-adjust: 100%; }
.row, .columns, .wpb_column, .vc_column-inner, .wpb_wrapper {
  min-width: 0 !important;   /* flex/grid içinde taşmayı önler */
}
table { max-width: 100% !important; display: block; overflow-x: auto; }

/* 5.6 — Footer mobilde tek sütun, ortalı ve okunaklı */
@media (max-width: 768px) {
  .l-footer .columns,
  footer .columns,
  .footer-widgets .columns {
    width: 100% !important;
    float: none !important;
    margin-bottom: 18px !important;
  }
}

/* 5.7 — Uzun başlıkların mobilde taşmaması */
@media (max-width: 768px) {
  h1, h2, h3, h4, .title_b, .sub_title_b {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}