/* ==========================================================================
   MOBİL UYUMLULUK — 16 Eylül denetimi

   Panel telefondan (390-430px) kullanılıyor. style.css'in üstüne gelen
   düzeltmeler burada toplanıyor; style.css'e dokunulmadı. Yeni kural
   eklerken önce buraya bak: aynı sorun büyük ihtimalle bir kez çözüldü.

   Bölümler:
     1. Taşma: görsel/video/uzun metin kutuyu genişletmesin
     2. Form alanları: tarih/sayı/url alanları da 16px ve tam genişlik
     3. Dokunma hedefleri: her tıklanabilir şey ≥44px
     4. Okunabilirlik: 11px altı mono meta yazılar büyütüldü
     5. Üst çubuk / süzgeç: kabuk 12px padding'e hizalandı
     6. Sayfa özel: durum, işler, kararlar, izleyiciler
     7. Masaüstü (≥720px): burada hiçbir kural yok — geriye gitmesin
   ========================================================================== */

/* ---------- 1. taşma ---------- */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

img, video, svg, canvas { max-width: 100%; }
img, video { height: auto; }

/* Uzun kimlik/kullanıcı adı, SSH adresi, hata mesajı, URL: kır, taşma. */
.kart dd, .izgara dd,
.hesap-satir strong, .hesap-satir span,
.kimlik-kart strong, .kimlik-kart span,
.calisan__ad, .calisan__asama,
.karar__meta, .karar__soru,
.uyari, .bilgi, .ipucu, .alt-metin, .derinlik, .ref-aciklama, .ref-not,
.profil__ad strong, .profil__ad span,
.ozet-kutu span, .model-kutu span,
.is-satir__sablon, .is-satir__hata,
.mi__sonuc, .karar__sonuc,
footer { min-width: 0; overflow-wrap: anywhere; }

/* Yatay kaydırma gerçekten gereken tek yer: düz tablo. */
.tw { max-width: 100%; }

/* ---------- 2. form alanları ----------

   style.css yalnızca text/password/url alanlarını biçimliyordu; hesaplar
   sayfasındaki tarih ve sayı alanları tarayıcı varsayılanıyla (13px,
   iOS'ta odaklanınca yakınlaştırma, 8em genişlik) geliyordu. */

/* Yalnızca bu dosyanın sahibi olduğu form kapları (.satir-form, .giris);
   şablon/eğitim sayfalarının kendi alanları (.sk-sec, .sk-suzgec__ara)
   etkilenmesin diye genel `input[type=...]` seçicisi kullanılmadı. */
.satir-form :where(input[type="date"], input[type="number"], input[type="search"],
                   input[type="email"], input[type="tel"], input[type="url"], select),
.giris :where(input, select) {
  width: 100%;
  font-family: var(--f-body);
  font-size: 16px;                 /* iOS: 16px altı odakta yakınlaştırır */
  padding: 12px 14px;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  color: var(--ink);
  -webkit-appearance: none;
  appearance: none;
}
.satir-form input[type="date"] { display: block; text-align: left; }
.satir-form input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.satir-form input[type="number"] { -moz-appearance: textfield; }

.satir-form :where(input, select):focus-visible,
.giris :where(input):focus-visible,
.karar__not textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Satır formunda dar alan (ör. "en fazla video"). Telefonda tam genişlik. */
.satir-form .alan--dar { flex: 0 1 11em; }
@media (max-width: 560px) {
  .satir-form { gap: 10px; }
  .satir-form .alan--dar { flex: 1 1 100%; }
  .satir-form button { min-height: 48px; }
}

/* Uyarı kutusu: küçük ekranda başlık ve gövde nefes alsın; içindeki
   düğme tam genişlik. */
@media (max-width: 560px) {
  .uyari, .bilgi { padding: 12px 14px; line-height: 1.5; }
  .uyari .dugme-birincil, .uyari .dugme-ikincil { width: 100%; margin-top: 10px; }
}

/* ---------- 3. dokunma hedefleri ----------

   Parmak için asgari 44px. Fareyle (≥720px ve ince işaretçi) eski
   ölçüler kalıyor; kural yalnızca telefon/tablet için. */

@media (max-width: 719px), (pointer: coarse) {
  .dugme-kucuk, .dugme-ikincil, .dugme-sil, .dugme-birincil,
  .dugme-birincil.dugme-kucuk,
  .suzgec__dugme, a.suzgec__dugme,
  .sekmeler a,
  .geri-al, .geri-baglanti,
  .karar__sec, .toplu__hepsi, .toplu__kutu,
  .kuyruk-serit__link, .sablon-kart__sayac,
  .ust__cikis,
  .mi__dugme, .mi__karar, .mi__karar--geri, .mi__songeri button,
  .izleyici__dugme, .izleyici__ok, .mi__ok,
  .model-ac > summary, .ekle-ac > summary { min-height: 44px; }

  .sekmeler a { display: inline-flex; align-items: center; }
  .ust__cikis { min-width: 44px; justify-content: center; }
  .mi__dugme, .izleyici__dugme { width: 44px; height: 44px; }

  /* Yan yana düğmeler arası en az 8px; yanlış düğmeye basma azalsın. */
  .baslik-eylem, .is-satir__alt, .mi__kararlar, .karar__dugmeler { gap: 10px; }
  .hesap-satir { gap: 12px; }
  .hesap-satir .dugme-sil { padding: 0 14px; }

  /* Onay kutuları parmakla tutulsun. */
  .karar__sec input, .toplu__hepsi input, .toplu__kutu input { width: 22px; height: 22px; }
  .model-kutu input { width: 20px; height: 20px; }

  /* Sayfa altı bağlantıları (durum) satır içi metin değil, düğme. */
  footer a {
    display: inline-flex; align-items: center; min-height: 44px;
    padding: 0 6px; color: var(--accent); text-decoration: none;
  }
}

/* ---------- 4. okunabilirlik ----------

   10-11px mono meta satırları telefonda okunmuyordu; alt sınır ~11.8px.
   Rozet 10px → 11px. Ölçek masaüstünde de zararsız. */

.rozet { font-size: 11px; padding: 3px 8px; }
.geri-baglanti { font-size: .78rem; }
.cikti-kart__meta, .is-satir__meta, .is-satir__hata, .is-satir__model,
.karar__meta, .karar__ipucu, .karar__not > span, .karar__sec,
.baslik-sayac, .calisan__asama, .kuyruk-serit__asama, .kuyruk-serit__link,
.model-kart__meta, .ref-kart__sayi, .sekme a, .ozet-kutu span,
.mi__sayac, .mi__bilgi span, .mi__ipucu, .mi__songeri span,
.izleyici__bilgi span, .yuz-kart__alt > span, .karar__tekyuz span,
.hesap-satir span, .kimlik-kart span, .profil__ad span { font-size: .76rem; }
.model-kutu small { font-size: .72rem; }
.sekme a { font-size: 11px; }
.izgara dt, .uretim-modeli__baslik, .model-sec__baslik { font-size: 11px; }

/* Odak halkası her yerde görünür (klavye + harici klavye/ekran okuyucu). */
:where(a, button, summary, label, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px;
}

/* ---------- 5. üst çubuk ve süzgeç: kabuk hizası ----------

   ≤560px'te .kabuk 12px padding kullanıyor ama .ust ve .suzgec -16px
   taşıyordu: her iki yanda 4px ekran dışı, çıkış düğmesi kenara yapışık. */

@media (max-width: 560px) {
  .ust {
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
  }
  .suzgec {
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
    scroll-padding-left: 12px;
  }
  .ust__yol { font-size: .74rem; }
}

/* Alt sekme: etkin sekme çubukla değil dolgu ile de belli olsun;
   dokununca ne olduğu görülsün. */
.sekme a[aria-current="page"] { font-weight: 600; }
.sekme a:active { background: var(--accent-bg); }

/* Sabit çubuklar birbirini ve içeriği örtmesin. Katman düzeni:
   .ust 40 · .toplu-cubuk 30 (sekmenin 72px üstünde) · .sekme 50 ·
   .alt-cubuk 55 (sekmenin üstünde) · .izleyici 100 · .mi 120.
   Klavye açıkken (odaklı alan) alt sekme çubuğu gizlenir: Android'de
   klavye üstünde kalıp formu örtüyordu. */
@media (max-width: 719px) {
  body:has(input:is([type="text"], [type="password"], [type="date"], [type="number"],
                    [type="url"], [type="search"], [type="email"], [type="tel"]):focus,
           textarea:focus, select:focus) .sekme { display: none; }
}

/* ---------- 6. sayfa özel ---------- */

/* Kimlik listesi: kart başına ≥56px, tümü dokunulabilir. */
.kimlik-kart { min-height: 56px; justify-content: center; }

/* Kimlik sayfası: başlık eylemleri 390px'te ikişer sütun kaplar, her
   biri parmak boyu; sağa dizilip küçülmesin. */
@media (max-width: 480px) {
  .baslik-eylem { width: 100%; }
  .baslik-eylem > .dugme-kucuk { flex: 1 1 calc(50% - 5px); max-width: 100%; }
}

/* Üretim modeli seçimi: telefonda dikey, her seçenek tam genişlik. */
@media (max-width: 560px) {
  .uretim-modeli { align-items: stretch; }
  .uretim-modeli__liste { flex-direction: column; }
  .uretim-modeli .model-kutu { width: 100%; }
  .uretim-modeli > .dugme-kucuk { width: 100%; }
}

/* Referans onayı: 80px görsel + metin; 390px'te alt alta. */
@media (max-width: 480px) {
  .referans-onay > div { min-width: 0; flex: 1 1 100%; }
  .referans-onay button { width: 100%; }
}

/* Karar çağrısı: "Karar ver →" düğmesi telefonda tam genişlik. */
@media (max-width: 480px) {
  .karar-cagri .dugme-kucuk { margin-left: 0; width: 100%; }
}

/* Hesaplar: satır bağlantısı da parmak boyu. */
.hesap-satir > a { min-height: 44px; justify-content: center; }

/* İşler: kart satırı — kimlik + rozet, şablon adı, meta + düğmeler.
   Uzun hata metni katlanır (details); 120 karakteri aşınca. */
.is-satir__hata summary {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center;
  min-height: 36px; color: var(--risk); font-weight: 500;
}
.is-satir__hata summary::-webkit-details-marker { display: none; }
.is-satir__hata summary::after { content: " ▾"; margin-left: 4px; }
.is-satir__hata[open] summary::after { content: " ▴"; }
.is-satir__hata pre {
  margin: 4px 0 0; white-space: pre-wrap; overflow-wrap: anywhere;
  font: inherit; max-height: 40vh; overflow-y: auto;
}
@media (max-width: 480px) {
  .is-satir__alt { flex-wrap: wrap; }
  .is-satir__meta { flex: 1 1 100%; white-space: normal; }
  .is-satir__alt .dugme-kucuk { margin-left: 0; flex: 1 1 calc(50% - 5px); }
}

/* Durum kartı: SSH adresi tek parça kalsın, sığmazsa kırılsın. */
.kart dd { font-size: .82rem; }
@media (max-width: 400px) {
  .izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .izgara > div { padding: 12px 12px; }
}

/* Kararlar: not alanı ve düğmeler; toplu çubuk alt sekmenin üstünde. */
.karar__not textarea { min-height: 56px; }
@media (max-width: 400px) {
  .karar__dugmeler { grid-template-columns: 1fr; }
  .karar__dugmeler--coklu { grid-template-columns: 1fr; }
}

/* Galeri (Instagram seçimi): sekmeler kaydırılır şerit; kenara yapışmasın. */
@media (max-width: 560px) {
  .sekmeler {
    margin-left: -12px; margin-right: -12px;
    padding-left: 12px; padding-right: 12px;
    scrollbar-width: none;
  }
  .sekmeler::-webkit-scrollbar { display: none; }
  .daha .dugme-ikincil { width: 100%; }
  .toplu__kutu { width: 100%; }
}

/* Tamamlananlar: model kartı adı iki satıra sarabilsin. */
.model-kart__ad { overflow-wrap: anywhere; }
.cikti-kart__ad { white-space: normal; overflow-wrap: anywhere;
                  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* İzleyiciler: alt panel telefonda tıklanacak kadar geniş; video kontrol
   çubuğu üstüne hiçbir şey binmiyor (ızgara satırları). */
@media (max-width: 719px) {
  .mi__alt { gap: 8px; }
  .mi__kararlar { gap: 8px; }
  .mi__karar { flex: 1 1 calc(50% - 4px); }
  .mi__karar--geri { flex: 1 1 100%; }
}

/* Giriş: alanlar ve düğme 48px; hata kutusu formun hemen üstünde. */
.giris input, .giris button { min-height: 48px; }
.giris .uyari { margin-bottom: 14px; }

/* ---------- 7. hareket tercihi ---------- */
@media (prefers-reduced-motion: reduce) {
  .sekme a, .is-satir__hata summary { transition: none; }
}