/* ============================================================================
   Studyflow — Responsive Polish Layer
   ----------------------------------------------------------------------------
   Mobil + tablet uyumluluk için KORUYUCU, eklemeli (additive) kurallar.
   Amaç: mevcut tasarımı bozmadan, ekranlarda kayma/taşma ve okunabilirlik
   sorunlarını engellemek. Sadece güvenli, düşük-riskli kurallar içerir.
   ============================================================================ */

/* 1) Kutu modeli güvenliği — padding/border genişliği patlatmaz */
*, *::before, *::after { box-sizing: border-box; }

/* 2) Yatay kayma kilidi — hiçbir şey sayfayı yana taşırmasın */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

/* 3) Medya öğeleri kapsayıcıyı asla aşmaz */
img, svg, video, canvas, picture, iframe, embed, object {
  max-width: 100%;
}
img, video, canvas, picture { height: auto; }

/* 4) AI çıktısı / uzun metin taşmasını engelle
   (özet, açıklama, çözüm, quiz, formül, URL, uzun kelimeler) */
p, li, span, td, th, h1, h2, h3, h4, h5, h6,
.markdown-body, .summary-content, .ai-output, .explanation,
.solution-text, [class*="content"], [class*="answer"], [class*="question"] {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* 5) Kod / önbiçimli bloklar mobilde kaydırılabilir, taşmaz */
pre, code, kbd, samp {
  overflow-wrap: break-word;
  word-break: break-word;
  white-space: pre-wrap;
}
pre { max-width: 100%; overflow-x: auto; }

/* 6) Matematik (KaTeX) formülleri taşarsa yatay kaydırılsın, sayfayı itmesin */
.katex-display, .katex {
  max-width: 100%;
}
.katex-display { overflow-x: auto; overflow-y: hidden; }

/* 7) Tablolar dar ekranda yatay kaydırılabilir olsun */
table { max-width: 100%; }
.table-responsive, .table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ============================================================================
   MOBİL (<= 640px)
   ============================================================================ */
@media (max-width: 640px) {
  /* iOS Safari, font-size < 16px olan inputlara odaklanınca sayfayı zoomlar.
     Bunu engelle — sadece form alanlarını etkiler. */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  textarea, select {
    font-size: 16px;
  }

  /* Çok uzun butonlar/linkler ekranı aşmasın */
  button, .btn, a[class*="btn"] {
    max-width: 100%;
  }
}

/* ============================================================================
   TABLET (641px – 1024px)
   ----------------------------------------------------------------------------
   Masaüstü layout bu aralıkta korunur; sadece kenar nefesi + medya güvenliği.
   ============================================================================ */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Tabletde içerik kenarlara yapışmasın — yalnızca hiç yatay padding'i
     olmayan ana sarmalayıcılara dokun (var olan padding'i ezmez). */
  body { -webkit-text-size-adjust: 100%; }
}