/* ============================================================
   KİKARAR — Responsive / Mobil UX katmanı
   En son yüklenir; mevcut inline-style'ları !important ile geçer.
   Mobil-öncelikli değil, hedefli override (site desktop-first).
   Breakpoint'ler: 1024 (tablet), 768 (küçük tablet), 640/480 (mobil).
   ============================================================ */

/* -------- FAZ 0: Global taşma & güvenlik ağı -------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }

/* Medya ve gömülüler asla taşmasın */
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
iframe { max-width: 100%; }

/* Uzun kelimeler/URL'ler kart dışına taşmasın */
p, h1, h2, h3, h4, li, td, th, span, a { overflow-wrap: break-word; }

/* Tablolar: küçük ekranda yatay kaydırılabilir sarmalayıcı */
.table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

@media (max-width: 768px) {
  /* Geniş tabloları yatay kaydırılabilir yap (kapsayıcı .table-responsive yoksa da) */
  table { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}

/* iOS'ta input odağında otomatik zoom'u engelle (font-size >= 16px) */
@media (max-width: 640px) {
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="tel"], input[type="number"],
  textarea, select { font-size: 16px !important; }
}

/* Dokunma hedefleri: mobilde buton/sekme min yükseklik */
@media (max-width: 640px) {
  button, .nav-lnk, .btn-ghost-nav, .btn-orange-nav, .btn-danismanlik { min-height: 40px; }
}

/* ============================================================
   FAZ 1: ANASAYFA (tema/anasayfa.php)
   ============================================================ */

/* Hero iç kapsayıcı: width:100% + padding birlikte taşma yapıyordu → border-box şart.
   Padding'i mobilde azalt (hook: .hero-inner) */
.hero-inner { box-sizing: border-box !important; }
@media (max-width: 768px) {
  .hero-inner { padding-top: 72px !important; padding-bottom: 56px !important;
    padding-left: 14px !important; padding-right: 14px !important; }
}
@media (max-width: 480px) {
  .hero-inner { padding-top: 64px !important; padding-bottom: 44px !important; }
}

/* Hero arama formu: mobilde input + "Ara" butonunu dikey yığ, buton tam genişlik.
   Kullanıcı önceliği: arama kutusu mobilde çok rahat kullanılsın. */
@media (max-width: 640px) {
  #hero-search-form { flex-direction: column !important; gap: 12px !important; }
  /* arama kutusu tam genişlik, rahat yükseklik, sabit min-width yok */
  #tagsInput_hero { min-height: 54px !important; width: 100% !important; }
  .tag-input_hero { min-width: 0 !important; width: 100% !important; padding: 15px 0 !important; font-size: 16px !important; }
  /* "Ara" butonu tam genişlik ve belirgin (büyük dokunma hedefi) */
  #hero-search-form > button {
    width: 100% !important; padding: 16px 20px !important;
    font-size: 16px !important; border-radius: 12px !important;
  }
}

/* Hero ana 3 sekme: dar ekranda ikon+yazı dikey, daha küçük yazı/padding */
@media (max-width: 560px) {
  #hero-tabs button { flex-direction: column !important; gap: 4px !important;
    font-size: 11.5px !important; padding: 11px 4px !important; line-height: 1.2 !important; }
  #hero-tabs button i { font-size: 16px !important; }
  #hero-tabs button span { font-size: 11px !important; }
}

/* Alt sekme satırı (#sub-tabs + Gelişmiş Filtreler): mobilde dikey yığ,
   sub-tab'lar yatay kaydırılabilir tek satır, filtre butonu tam genişlik */
@media (max-width: 640px) {
  .hero-subtab-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  #sub-tabs {
    width: 100% !important; flex-wrap: nowrap !important;
    overflow-x: auto !important; -webkit-overflow-scrolling: touch;
    padding-bottom: 4px; scrollbar-width: none;
  }
  #sub-tabs::-webkit-scrollbar { display: none; }
  #sub-tabs .sub-tab-btn { flex: 0 0 auto !important; white-space: nowrap !important; }
  /* "Gelişmiş Filtreler" butonu tam genişlik, çerçeveli, dokunma dostu */
  .hero-adv-btn {
    width: 100% !important; justify-content: center !important;
    padding: 12px 14px !important; font-size: 14px !important;
    border: 1px solid #d1d5db !important; border-radius: 10px !important;
    background: #fff !important; color: hsl(218,89%,25%) !important; font-weight: 600 !important;
  }
}

/* Arama kartı: mobilde iç padding'i azalt, ekranı doldur */
@media (max-width: 480px) {
  #hero-search-form { padding: 0 !important; }
}

/* Gelişmiş filtre alanı: mobilde tek kolon ve dokunma dostu select'ler.
   (.hero-filter-grid zaten 1 kolon, burada select/multiple-select genişliğini garanti et) */
@media (max-width: 768px) {
  .hero-filter-grid { grid-template-columns: 1fr !important; }
  .hero-checkbox-grid { grid-template-columns: 1fr !important; }
  .hero-filter-card { padding: 14px !important; }
  /* nice-select2 / multiple-select / native select'ler tam genişlik */
  .hero-filter-card .nice-select,
  .hero-filter-card .ms-parent,
  .hero-filter-card select,
  .hero-filter-card .hero-filter-input { width: 100% !important; box-sizing: border-box; }
  .hero-filter-card .nice-select, .hero-filter-card .ms-choice { min-height: 46px !important; }
}

/* İstatistik / kart grid'lerini mobilde tek/iki kolona indir */
@media (max-width: 640px) {
  #stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 400px) {
  #stats-grid { grid-template-columns: 1fr !important; }
}

/* ============================================================
   FAZ 2: ARAMA SONUÇ SAYFASI (page/search.php)
   ============================================================ */

/* Arama input'u: 500px sabit min genişliği mobilde kaldır (P1 bug) */
@media (max-width: 768px) {
  .tag-input { min-width: 0 !important; }
  #tagsInput { flex-wrap: wrap; }
}

/* Sidebar + içerik grid'i: tablet/mobilde tek kolona yığ
   (kihale-layout zaten 1054px'te yığılıyor; daha güvenli hale getir) */
@media (max-width: 1024px) {
  .kihale-layout { grid-template-columns: 1fr !important; }
}