/* --------------------------------------------------
   Global Responsive Helpers for İş Ortağım Frontend
   Bu dosya, temanın ana CSS'ine dokunmadan
   mobil uyumluluk iyileştirmeleri eklemek için kullanılır.
---------------------------------------------------*/

/* 1) Görseller ve medya elemanları ekranda taşmasın */
img,
video,
iframe {
  max-width: 100%;
  height: auto;
}

/* 2) Genel olarak yatay scroll'u engelle */
html,
body {
  width: 100%;
  overflow-x: hidden;
}

/* 3) Container ve satır paddings – küçük ekranlarda nefes aldır */
@media (max-width: 991.98px) {
  .container,
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }

  .row {
    margin-left: -15px;
    margin-right: -15px;
  }
}

/* 4) Tablolar – mobilde yan kaydırılabilir olsun, sayfayı bozmasın */
@media (max-width: 767.98px) {
  table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  thead,
  tbody {
    width: 100%;
  }
}

/* 5) Başlıklar ve section boşlukları – mobilde daha kompakt */
@media (max-width: 767.98px) {
  .top-header,
  .top-header.overlay {
    padding-top: 120px !important;
    padding-bottom: 40px !important;
    min-height: auto !important;
  }

  .top-header .heading,
  .heading {
    font-size: 26px !important;
    line-height: 1.3;
  }

  .top-header .subheading,
  .subheading {
    font-size: 14px !important;
  }

  .pb-80,
  .pb-100 {
    padding-bottom: 40px !important;
  }

  .pt-80,
  .pt-150 {
    padding-top: 40px !important;
  }
}

/* 6) Kullanıcı paneli sütunları – mobilde alt alta gelsin, aralarına boşluk girsin */
@media (max-width: 767.98px) {
  .mixcontainer #wrapper .row > [class*='col-'] {
    margin-bottom: 20px;
  }
}