/* ==========================================================================
   DorukCRM — 14-mobile-lists.css
   Telefonda TABLO YOK. 12/13-mobile'ın devamı; en sonda yükleniyor.

   NEDEN AYRI BİR DOSYA: 12-mobile.css 16 KB sınırına 100 baytlık mesafede;
   gerekçe 13-mobile-screens.css'in başlığında yazılı.

   NEDEN VAR: telefonda ölçülen ilk şey buydu. Kişiler ekranı 390 piksellik
   bir ekranda altı sütunlu bir tabloydu: "Ahmet ÇAKMAK" iki satıra, telefon
   numarası dört satıra kırılıyor, "WhatsApp profil adı" sütunu ekranın
   dışında kalıyor ve kullanıcı onu görmek için tabloyu YANA kaydırıyordu.
   Yana kaydırılan bir liste, bir uygulamanın değil bir web sayfasının
   davranışıdır — ve tam olarak "web sitesinin telefona aktarılmışı" denen
   şey odur.

   Tablo, dar ekranda yanlış bir kap. Sütun başlıkları değerleri ancak
   yatayda hizalanabildiklerinde açıklıyor; yatay yer kalmadığında başlık
   satırı sadece bir yük. Bu dosya tabloyu SATIR LİSTESİNE çeviriyor: her
   kayıt bir blok, her alan kendi satırı, başlık her değerin önünde
   (data-label).
   ========================================================================== */

@media (max-width: 720px) {

  /* --- her tablo: kayıt başına bir blok ------------------------------------ */
  /* Yatay kaydırma kutusu artık boş bir sarmalayıcı; kaydıracak bir şey yok. */
  .table-wrap { overflow-x: visible; }

  /* Başlık satırı kalkıyor. Değerlerin başlıkları aşağıda, her birinin
     kendi önünde duruyor — yani bilgi GÖRSEL OLARAK kaybolmuyor, yer
     değiştiriyor.

     Ama erişilebilirlik ağacı için aynı şey geçerli değildi: `display:none`
     başlık hücrelerini ağaçtan tamamen çıkarıyor ve `display:block`
     tarayıcıların örtük table/row/cell rollerini düşürüyor. Yerine konan tek
     şey `td[data-label]::before` idi; üretilen içerik (::before) ekran
     okuyucularda güvenilir biçimde okunmuyor — özellikle iOS VoiceOver'da.
     Sonuç, telefonda kayıt-alan ilişkisinin kaybolmasıydı; masaüstünde
     sorun yoktu, yani ayrım yalnız mobildeydi (denetim 2026-08-31, A11Y-503).

     Başlıklar artık KALDIRILMIYOR, görsel olarak gizleniyor (.sr-only ile
     aynı teknik): ekran okuyucu başlık satırını okumaya devam ediyor.
     Roller de şablonlarda açıkça yazılı (role="table"/"row"/"cell"), çünkü
     açık bir ARIA rolünü `display` ezemez. */
  .table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .table,
  .table tbody,
  .table tr,
  .table td { display: block; width: auto; }

  .table tr {
    padding: .75rem .875rem;
    border-bottom: 1px solid var(--border);
  }
  .table tbody tr:last-child { border-bottom: 0; }
  .table tbody tr:hover { background: transparent; }

  .table td {
    padding: 0;
    border: 0;
    /* Uzun bir numara ya da e-posta satırı taşırmasın. */
    overflow-wrap: anywhere;
  }

  /* İlk hücre kaydın ADI: kalın ve önce. Sonrakiler onun altında, sönük. */
  .table td:first-child { font-weight: 600; }
  .table td + td { margin-top: .1875rem; font-size: .8125rem; }

  /* Sütun başlığı, değerin önünde. data-label taşımayan hücrede hiçbir şey
     çizilmiyor — kural sessizce yok sayılıyor, bozulmuyor. */
  .table td[data-label]::before {
    content: attr(data-label) ": ";
    color: var(--text-faint);
    font-weight: 400;
  }

  /* Eylemler kaydın altında, tam genişlikte bir düğme sırası. Masaüstünde
     sağa yaslı dar bir sütundu ve o sütun telefonda 40 piksele iniyor,
     düğmeler harf harf kırılıyordu. */
  .table__actions {
    width: auto;
    text-align: left;
    white-space: normal;
    margin-top: .5rem;
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
  }
  .table__actions .btn + .btn { margin-left: 0; }

  /* --- kişi listesi: WhatsApp satırı --------------------------------------
     Kişiler ekranı genel kuralın dışında, çünkü orada bir tablo değil bir
     KİŞİ LİSTESİ var ve kişi listesinin telefondaki biçimi bellidir: solda
     yuvarlak avatar, yanında ad ve numara alt alta, sağda eylemler.
     Hücreler ızgaranın sütunlarına adlarıyla yerleşiyor (bkz.
     pages/contacts/view.php). */
  .table--list tbody tr {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0 .75rem;
    padding: .625rem .875rem;
    align-items: start;
  }
  .table--list td { grid-column: 2; }
  /* İKİ SATIR BOYUNCA: avatar tek satıra konsaydı o satır avatarın boyuna
     (44px) uzar ve adın hemen altındaki numara, adla arasında bir satır
     boşluk bırakırdı — ölçüldüğünde iki metin birbirinden kopuk görünüyordu.
     İki satıra yayılınca satır yükseklikleri metnin kendi boyu kalıyor. */
  .table--list .td--avatar { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .table--list .td--avatar .avatar { width: 44px; height: 44px; font-size: .875rem; }
  .table--list .td--name { font-size: .9375rem; }
  .table--list .table__actions {
    grid-column: 3;
    grid-row: 1 / span 2;
    margin-top: 0;
    flex-wrap: nowrap;
    align-self: center;
  }
  /* Avatarın ve ad satırının hizası bozulmasın diye ilk metin hücresinin
     üst boşluğu yok; "td + td" kuralı onu da yakalıyordu. */
  .table--list .td--name { margin-top: 0; }

  /* --- başlık şeridindeki araç çubuğu -------------------------------------
     Arama kutusu masaüstünde başlığın sağ ucunda 280 piksellik bir alan.
     Telefonda o genişlik yok: kutu başlıkla, rozetle ve hesap avatarıyla
     aynı satırda yarışıp 60 piksele iniyordu — içine yazılan şey
     görünmüyordu. Şerit ikiye ayrılıyor: üstte ad, altta arama. */
  .topbar { flex-wrap: wrap; height: auto; min-height: var(--header-h); padding-top: .5rem; padding-bottom: .5rem; }
  .topbar__search { flex: 1 0 100%; width: auto; }

  /* Ayar ekranlarında hesap menüsünün soluna çizilen ayıraç, altındaki
     bölüm rayının devamı olduğu için var. Telefonda ray yatay bir şeride
     döndü ve menü 46 piksele indi: çizgi artık hiçbir şeyin devamı değil,
     başlığın ortasında duran yetim bir dikey çubuk. */
  .main:has(.settings) .account { border-left: 0; }
}