/**
 * ÖDEVİN — Mobil Ergonomi Katmanı
 * ============================================================
 * Amaç: dokunma hedefi boyutu ve iOS otomatik yakınlaştırma sorunları.
 * Bu dosya en son yüklenir; yalnızca erişilebilirlik tabanı belirler,
 * renk/tipografi kararlarına karışmaz.
 *
 * Ölçülen sorunlar (375px genişlik, ana sayfa):
 *   - 157 dokunulabilir öğenin 118'i 44px altında, 74'ü 24px altında
 *   - Arama formundaki select'ler 27px yüksekliğinde ve 14px yazı
 *   - iOS Safari, 16px altındaki bir form alanına odaklanınca sayfayı
 *     otomatik büyütür ve öyle bırakır (talep oluşturma formunda 8 alan)
 * ============================================================
 */

/* ── 1. iOS OTOMATİK YAKINLAŞTIRMA ──
 * Iyilestirme yalnizca dokunmatik/dar ekranlarda gecerlidir.
 * !important gereklidir: bilesen ici .op-capsule-select gibi sinif
 * secicileri (0,1,0) ciplak eleman secicisini (0,0,1) yener. Burada
 * amac tasarimi ezmek degil, erisilebilirlik tabani koymaktir. */
@media (max-width: 768px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* ── 2. DOKUNMA HEDEFİ TABANI ──
 * Apple HIG ve Material: 44x44. Birincil kontroller bu ölçüye çekilir. */
@media (max-width: 768px) {
  button,
  input[type="submit"],
  input[type="button"],
  input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]):not([type="range"]),
  select,
  textarea {
    min-height: 44px;
  }

  /* Onay kutusu ve radyo: kendileri buyutulur, etiket de hedef sayilir */
  input[type="checkbox"],
  input[type="radio"] {
    /* 22px WCAG 2.5.8 AA asgarisi olan 24px'in altindaydi. */
    width: 24px;
    height: 24px;
    min-height: 22px;
  }
  input[type="checkbox"] + label,
  input[type="radio"] + label {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  /* Ana arama kapsülü ve hero kısayolları */
  .op-capsule-field select,
  .op-capsule-select {
    min-height: 44px;
  }
  .op-popular-quick-chips a,
  .op-tc-bottom-action a,
  .oc-actions a,
  .oc-bottom-social-links a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  /* Sosyal ikonlar 30x30 tanimlanmisti; min-height yalnizca dikey ekseni
     duzeltip 30x44 uretiyordu. Yan yana 8px araliklarla dizildikleri icin
     yatay eksen de 44px'e cekilir. */
  .oc-bottom-social-links a,
  .opc-social-links a {
    min-width: 44px;
    min-height: 44px;
  }
  /* Iletisim sayfasindaki WhatsApp dugmesi (~33px) ve sosyal ikonlar (42x42)
     ergonomi listesinde yoktu; ikisi de <a>. */
  .opc-card-btn {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* ── 3. YOĞUN BAĞLANTI LİSTELERİ ──
 * Footer'daki SEO şehir bağlantıları (44 adet) ve menü bağlantıları her biri
 * 44px yapılırsa footer aşırı uzar. Bunlar için WCAG 2.5.8 asgarisi olan
 * 24px hedeflenir; dikey boşluk da ayrı ayrı dokunmayı kolaylaştırır. */
@media (max-width: 768px) {
  .oc-footer-seo-strip .oc-city-item a,
  .oc-footer-links a,
  .oc-bottom-legal-links a {
    min-height: 24px;
    /* Kisa sehir adlari ("Sile", "Sisli") 24px'den dar kaliyordu */
    min-width: 24px;
    display: inline-flex;
    align-items: center;
    padding-top: 2px;
    padding-bottom: 2px;
  }
  .oc-footer-links li + li {
    margin-top: 4px;
  }
}

/* ── 4. LEAFLET HARİTA KONTROLLERİ ──
 * Üçüncü parti; yakınlaştırma düğmeleri 30px geliyor. */
@media (max-width: 768px) {
  .leaflet-control-zoom a {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
  }
}


/* ── 5. DAR EKRANDA ASGARİ YAZI BOYUTU ──
 * 375px'te ölçülen değerler 10.1px'e kadar iniyordu. İki ayrı sebep vardı:
 *   a) rem cinsinden bilinçli küçük değerler (0.68rem = 10.9px)
 *   b) <small> öğesinin UA varsayılanı `font-size: smaller` — zaten
 *      küçültülmüş bir ebeveynin üzerine BİNİYOR. Örnek: .op-tc-hours
 *      0.76rem (12.16px) → içindeki sınıfsız <small> 10.13px.
 * Türkçe aksanlı harfler (ğ, ş, İ, ü) bu boyutlarda bulanıklaşıyor.
 *
 * !important zorunlu: bu dosya <head>'de yüklenir, şablonlar ise kendi
 * CSS'ini <body> içindeki inline <style> bloğunda tanımlar. Aynı
 * özgüllükte (0,1,0) kaynak sırası her zaman şablonu kazandırır. */
@media (max-width: 768px) {
  /* (b) — bileşen içi sınıfsız <small> öğelerinin bileşik küçülmesini durdur */
  .op-tc-hours small,
  .op-tc-rating small,
  .op-tutor-price-value small,
  .op-stat-f-box small,
  .op-dist-stat-item small,
  .opc-card-body small,
  .otr-result-head small,
  .otr-step-label small,
  .otr-rc-header small,
  .oc-footer-trust-badge small {
    font-size: 12px !important;
  }

  /* (a) — bilinçli küçük rozet ve etiketler */
  .op-tc-verified-badge,
  .op-tc-tag,
  .op-tc-location,
  .op-tc-unit,
  .op-stat-pill,
  .op-tutor-badge-verified,
  .op-tutor-online-status,
  .op-tutor-tag,
  .op-tutor-price-label,
  .op-tutor-pkg-badge,
  .opv2-tab-cnt,
  .op-dist-pill span.count,
  .sec-badge,
  .format-tag,
  .opwa-desc {
    font-size: 12px !important;
  }

  /* Eğitmen kartındaki etiketler max-width:110px ile kırpılıyordu
     ("İngilizce Konuşma" 7px kesiliyordu). Satır kaydırılabilir olmadığı
     için kırpılan kısım hiç görünmüyordu. */
  .op-tc-tags { flex-wrap: wrap !important; }
  .op-tc-tag { max-width: none !important; }
}

/* ── 6. YATAY KAYDIRICILARDA SON ÖĞE ──
 * Ölçüm: .op-testi-cards-slider / .op-popular-quick-chips / .op-map-city-tabs
 * kaydırıcılarında son çocuğun sağ kenarı scrollWidth'i 11-25px aşıyordu —
 * kabın sağ dolgusu taşma alanında kayboluyor, son kart ekranın sağ kenarına
 * yapışıyordu. `::after` boşluk öğesi bunu güvenilir biçimde çözer. */
.op-testi-cards-slider::after,
.op-popular-quick-chips::after,
.op-map-city-tabs::after {
  content: '';
  flex: 0 0 4px;
}