/* =========================================================================
   blacklybox.com — Global Mobile Compatibility Fix
   Eklenme: 2026-05-04
   Amaç: Tüm sayfalarda yatay kaydırmayı engellemek + tüm cihazlarla uyumluluk
   Yükleme sırası: en sona, override için
   ========================================================================= */

/* --------- 1) Yatay taşma kilidi (ROOT) --------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* --------- 2) Medya elemanları taşmasın --------- */
img, video, iframe, embed, object, svg, canvas {
  max-width: 100%;
  height: auto;
}

/* iframe'lerin height: auto bozmasın diye ayrı bırakılır */
iframe {
  height: auto;
}

/* --------- 3) Tablolar ve preformatted blocklar --------- */
table {
  max-width: 100%;
  table-layout: auto;
}

pre, code {
  max-width: 100%;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
  word-break: break-word;
}

/* Uzun URL/hash kelimeler ekrandan taşmasın */
p, h1, h2, h3, h4, h5, h6, span, a, li, dd, dt, td, th, label {
  word-wrap: break-word;
  overflow-wrap: break-word;
}

/* --------- 4) Genel container koruması --------- */
.container, .container-fluid, .row,
.wrap, .wrapper, .section, .content, main, header, footer, nav, aside {
  max-width: 100%;
}

/* Bootstrap row negative margin overflow guard */
.row {
  margin-left: 0;
  margin-right: 0;
}

/* --------- 5) Tablet ve altı (≤1024px) --------- */
@media (max-width: 1024px) {
  /* Geniş .container'ları viewport'a sığdır */
  .container {
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* --------- 6) Mobil tablet (≤768px) --------- */
@media (max-width: 768px) {
  html { -webkit-text-size-adjust: 100%; }

  /* Çok kolonlu grid'leri tek kolon yap (genel fallback) */
  .features,
  .compare-grid,
  .pricing-grid,
  .footer-grid,
  .login-section,
  .stats {
    grid-template-columns: 1fr !important;
  }

  /* Padding'leri küçült */
  .compare,
  .pricing,
  .login-section,
  .features,
  .pricing,
  .footer-bottom,
  .footer-grid,
  section,
  .section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* Hero/title'lar küçük ekranda taşmasın */
  h1 { font-size: clamp(22px, 7vw, 36px); line-height: 1.2; }
  h2 { font-size: clamp(20px, 6vw, 28px); line-height: 1.25; }
  h3 { font-size: clamp(18px, 5vw, 22px); }

  /* Form input'ları full-width */
  input[type="text"],
  input[type="tel"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="search"],
  textarea,
  select {
    max-width: 100%;
    width: 100%;
    font-size: 16px; /* iOS Safari zoom önlemek için ≥16px gerekir */
  }

  /* Buton alanları da daralsın */
  .btn, button {
    max-width: 100%;
  }

  /* Tabloyu wrapper'sız yatay-scroll yap */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Header/nav: çok geniş .nav padding'i kıs */
  header .nav,
  .topbar,
  nav {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}

/* --------- 7) Telefon (≤480px) --------- */
@media (max-width: 480px) {
  body {
    font-size: 15px;
  }

  /* Çok grid varsayılanı tek kolon */
  [class*="grid-cols-"],
  [style*="grid-template-columns"] {
    /* Inline olanlara müdahale etmiyoruz; class-based grid'lere fallback */
  }

  /* Padding'leri daha da kıs */
  section, .section,
  .compare, .pricing, .login-section, .features, .footer-grid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  /* Hero başlığı yumuşat */
  h1 { font-size: clamp(20px, 6.5vw, 30px); }

  /* Modal'lar tam ekran neredeyse */
  .modal-card,
  .modal-overlay .modal-card {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
    margin: 12px !important;
  }

  /* CTA butonları genişlesin */
  .cta, .cta-row .btn, .hero-cta .btn {
    width: 100%;
  }
}

/* --------- 8) Touch hedefleri (a11y) --------- */
@media (hover: none) and (pointer: coarse) {
  a, button, .btn, [role="button"], input[type="submit"], input[type="button"] {
    min-height: 40px;
  }
}

/* --------- 9) Notch / safe-area --------- */
@supports (padding: max(0px)) {
  body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}