/* ==========================================================================
   MOBİL — DOKUNMATİK ve TELEFON
   KD-0087, Selim 2026-10-05: "Bu portal mobil uyumlu olsun, buna dikkat."
   Otokar gözlemcileri telefondan bakıyor.

   Önceki parçalar tablet (1024) ve dikey tablet (820, 09-…css) için yazıldı;
   telefon hiç ölçülmemişti. Ölçüm (tools/portal-mobil-olcum.mjs, 375/390 px):
   tabloya 290 px kalıyordu, tedarikçi listesi gizlenince açma düğmesi 0 px
   satıra düşüp KAYBOLUYORDU (≤ 820'de liste bir daha açılamıyordu), zil
   paneli ekranın soluna taşıyordu, giriş düğmesi klavye açıkken
   ulaşılamıyordu, giriş kutuları < 16 px (iOS odakta sayfayı büyütür) ve
   pencere araçları 35 px idi.

   Bu dosya YALNIZ YERLEŞİM ve DAVRANIŞ: yeni alan, sütun, metin yok; var
   olan hiçbir bilgi gizlenmiyor (dar ekranda sütunlar kart içinde yer
   değiştiriyor, kaybolmuyor).

   KURALLAR BİLEŞEN DÜZEYİNDE (yeni ekranlar — çok firmalı portal, firma
   seçici — aynı kalıbı kullansın):
     .p-kart-tablo     telefonda satır başına kart, başlıklar sıralama çipi
                       (+ portal-mobil.js · kartEtiketle)
     pencere           (.mesaj-ort / .mesaj-pencere) telefonda tam ekran
     açılır panel      (.zil-panel, .kullanici-panel) üst çubuğa yaslı
     dokunma hedefi    dokunmatikte her denetim ≥ 44 px, giriş yazısı 16 px
     .p-ipucu-soru     dokunmatikte `title` ipucunu açan "?" (portal-mobil.js
                       · ipucuDugmesi)
     .p-kaydirma-ipucu yana kayan kabın kayabildiği kenar solarak biter
                       (portal-mobil.js · kaydirmaIpucu; D bölümü)

   Üç sorgu, portal-mobil.js ile AYNI (test/portal-mobil.test.js):
     LISTE_USTTE  (max-width: 820px), (max-height: 520px)
                  — liste tablonun üstünde (dikey tablet, telefon)
     DOKUNMATIK   LISTE_USTTE + (pointer: coarse)
                  — GİRİŞ TÜRÜ: iPad yatay (1024) da parmakla kullanılıyor;
                    fareli masaüstü bu bloğa girmez, görünümü değişmez
     TELEFON      (max-width: 600px), (max-height: 520px)
   820 = 09-…css'teki dikey tablet sınırı.
   ========================================================================== */

/* ---- 0. Mesaj düğmesi hücresine SIĞAR (her genişlikte) ----
   Düğme 100 px, hücrenin KENDİSİ ~98 px'ti (sütun 96 px, tablo genişliğine
   göre dağıtılıyor): iki yanından 1'er px hücrenin `overflow: hidden`ına
   kesiliyordu (768/1024/1280; ölçüm aracının kırpma dedektörü düzeltilince
   görüldü, main'de de vardı). Dolgu kırpmayı etkilemiyor (kesim dolgu
   kutusunda) — hücrenin yan dolgusu kalktı, düğme en çok hücre kadar.
   Ortası yerinde: düğme zaten ortalı ve görünen kısmı bugün de 98 px idi. */
.gozlem-tablo tbody td.hucre-not { padding-left: 0; padding-right: 0; }
.not-mesaj { max-width: 100%; }

/* ==========================================================================
   A. LİSTE ÜSTTE — ≤ 820 (dikey tablet, telefon) ya da yükseklik ≤ 520
      (yatay telefon: iPhone yatayda 844–932 px geniş)
   ========================================================================== */

@media (max-width: 820px), (max-height: 520px) {
  /* ---- A.1 Liste gizliyken ŞERİT görünür kalır ----
     09-…css'te dikey düzende kapanan satır `0` yükseklik alıyordu: şerit
     (açma düğmesi + seçili firma) o satırın içinde 0 px'e iniyor ve liste
     bir daha açılamıyordu. Satır artık şeridin kendi yüksekliğini alıyor;
     şerit yatay yatıyor, firma adı soldan sağa okunuyor. */
  .portal-govde.raf-gizli { grid-template-rows: auto 1fr; }

  /* Satır tanımının CSS geçişi (09-…css) kapalı: `minmax(220px, 38%)` ↔
     `auto` ara değer taşımıyor, tarayıcı geçişin ortasında (80 ms) bir anda
     değiştiriyordu. Yumuşak geçişi artık portal-mobil.js · yumusakYukseklik
     yapıyor; o da yeni yüksekliği değişimin HEMEN ardından ölçmek zorunda. */
  .portal-govde { transition: none; }

  .raf-gizli .raf-serit {
    flex-direction: row;
    align-items: center;
    gap: var(--p-a3);
    padding: var(--p-a2) var(--p-a3);
  }

  .raf-serit-ad {
    writing-mode: horizontal-tb;
    transform: none;
    min-width: 0;
  }

  /* Liste ÜSTTE: gizleme yukarı, gösterme aşağı bakar (ikonlar aynı, döndürülmüş). */
  .raf-gizle i,
  .raf-ac i { transform: rotate(90deg); }

  /* Giriş ekranının kimlik alanı içeriğini KIRPMASIN: `overflow: hidden`
     ızgara öğesinin en küçük yüksekliğini 0'a indiriyor; 667×375'te alan
     48 px'e sıkışıp logo ve "Gözlem Portalı" kesiliyordu (ölçüldü). Fazlası
     giriş ekranının kendi kaydırmasında (A.4). */
  .pgiris-kimlik { min-height: min-content; }
}

/* ==========================================================================
   B. DOKUNMATİK — A + `(pointer: coarse)` (parmakla kullanılan her ekran)
   ========================================================================== */

@media (max-width: 820px), (max-height: 520px), (pointer: coarse) {
  /* ---- B.1 Dokunma hedefi ≥ 44 px (uygulama-arayuz-kontrol §2) ----
     Görsel ölçü korunuyor, basılan alan büyüyor. Fareli masaüstü bu bloğa
     girmez — oradaki ölçüler kullanıcı kararı. */
  .p-btn.mesaj-arac,
  .p-btn.mesaj-kapat {
    width: var(--p-hedef-sm); height: var(--p-hedef-sm);
    min-width: var(--p-hedef-sm); min-height: var(--p-hedef-sm);
  }

  .sohbet-ara-gez { min-width: var(--p-hedef-sm); }

  /* Onay kutusu etiketiyle basılıyor — etiket satırı 44 px. */
  .suz-onay { min-height: var(--p-hedef-sm); margin-top: 0; }

  /* Tablo içi düğmeler: hücre dolgusu 8 → 4 px, düğme 44 px — satır yine
     52 px (05-…css "bütün satırlar aynı yükseklikte"). Ürün kodu blok kalıyor
     (uzun kodda üç nokta çalışsın), yüksekliği dolguyla 44'e çıkıyor. */
  .gozlem-tablo tbody td.hucre-kimlik,
  .gozlem-tablo tbody td.hucre-takip { padding-top: var(--p-a1); padding-bottom: var(--p-a1); }

  .kod-ac { padding-block: calc((var(--p-hedef-sm) - 1.2em) / 2); }
  /* Kısa ürün kodunda (ör. "KM-1") düğme 44 px'ten dar kalıyordu — ölçüldü
     2026-10-20, Gözlem Portalı merkezi ölçümü (portal-mobil --merkez). */
  .kod-ac,
  .hucre-kod-satir .kod-ac { min-width: var(--p-hedef-sm); }   /* 06-…css `min-width: 0` (üç nokta için) ile aynı özgüllük, sonra gelir */

  .pgt-takip { min-height: var(--p-hedef-sm); }

  .not-mesaj { height: var(--p-hedef-sm); }

  /* "?" düğmesi: 22 px'lik daire GÖRÜNÜYOR, 44 px'lik alan basılıyor. Daire
     arka plan olarak çiziliyor; eksi kenar boşluğu yerleşimdeki yerini 22 px
     tutuyor — başlık satırı büyümüyor. */
  .pgt-soru {
    width: var(--p-hedef-sm);
    height: var(--p-hedef-sm);
    margin: -11px;
    border-color: transparent;
    background: radial-gradient(circle closest-side, var(--p-kart) 0 10px,
      var(--p-cizgi-kuv) 10px 11px, transparent 11.5px);
  }

  .pgt-soru:hover,
  .pgt-soru[aria-expanded="true"] {
    border-color: transparent;
    background: radial-gradient(circle closest-side, var(--p-kart) 0 10px,
      var(--p-aksan) 10px 11px, transparent 11.5px);
  }

  /* Kırmızı satırın sebebi "?" (portal-tablo.js · uyumsuzSebep, yalnız
     dokunmatikte çizilir): tarih + 44 px'lik düğme tek satırda. Düğmenin
     görünen dairesi 22 px; basılan alan tam 44 — burada eksi kenar boşluğu
     YOK, çünkü hücre `overflow: hidden` (taşan yarım alan kesilirdi). Yer
     açmak için tarih hücresinin yan dolgusu kalktı (tarih ortalı, öteki
     satırlarda görünüm aynı) ve dikey dolgu 4 px (satır yine 52 px). Düğme
     görünen yarıçapı kadar tarihe yaklaşıyor — boşluk dairenin kendi payı. */
  .gozlem-tablo tbody td.hucre-tarih {
    padding-left: 0; padding-right: 0;
    padding-top: var(--p-a1); padding-bottom: var(--p-a1);
  }

  .p-ipucu-sar { display: inline-flex; align-items: center; max-width: 100%; vertical-align: middle; }

  .pgt-soru.p-ipucu-soru { flex: none; margin: 0; }

  /* Tarih hiç bölünmez (kartta `overflow-wrap: anywhere` "22.09.20 / 26"
     diye kırıyordu). */
  .p-ipucu-sar > span { white-space: nowrap; overflow-wrap: normal; }
  /* ---- B.2 Giriş kutusu yazısı 16 px ----
     iOS Safari 16 px'ten küçük yazılı kutuya odaklanınca sayfayı büyütüyor
     ve geri almıyor. Kutular 12/14 px'ti (02-, 04-, 05-, 08-…css). */
  .ted-ara .p-girdi,
  .tablo-ara .p-girdi,
  .sohbet-ara .p-girdi,
  .p-girdi.suz-gun,
  .p-girdi.suz-secim,
  .suz-gun-sar.bos::after { font-size: var(--p-yazi-md); }

  /* 16 px'te "gg.aa.yyyy" + takvim ikonu 128 px'e sığmıyor. */
  .suz-gun { width: 150px; }

  /* ---- B.3 Giriş ekranı klavye açıkken kayar ----
     `inset: 0` + taşmasız ızgara: klavye açılınca (görünür alan küçülünce)
     Giriş Yap düğmesi alanın altında kalıyordu ve ulaşılamıyordu. Yükseklik
     görünür alandan (`--vv-h`, portal-acilis.js · gorunurAlaniTazele),
     fazlası kendi içinde kayar. */
  .pgiris {
    bottom: auto;
    height: var(--vv-h, 100%);
    overflow-y: auto;
    overscroll-behavior: none;
  }
}

/* 05-…css'in ≤ 420 kuralı (tarih ikilisi alt alta, kutu tam genişlik) B'deki
   150 px'ten SONRA gelmeli — yoksa ezilir. */
@media (max-width: 420px) {
  .suz-gun { width: 100%; }
}

/* ==========================================================================
   C. TELEFON — dar (≤ 600) ya da yatay telefon (yükseklik ≤ 520)
   ========================================================================== */

@media (max-width: 600px), (max-height: 520px) {
  /* ---- C.1 Üst çubuk ---- */
  .portal-ust {
    position: relative;   /* açılır paneller çubuğa yaslanıyor (C.2) */
    gap: var(--p-a2);
    padding: var(--p-a3) max(var(--p-a4), env(safe-area-inset-right)) var(--p-a3) max(var(--p-a4), env(safe-area-inset-left));
  }

  /* Marka satırı telefonda küçülür; ad yine tam okunur. */
  .portal-kimlik { --logo-g: 84px; }
  .portal-marka-erp { font-size: var(--p-yazi-sm); }

  /* Portalın adı kısalmasın: 14 px, gerekirse iki satır. */
  .portal-ad {
    font-size: var(--p-yazi-sm);
    line-height: 1.2;
    white-space: normal;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
  }

  .portal-ust-sag { gap: var(--p-a2); flex: none; }

  .portal-kullanici { padding: 0 var(--p-a3); }

  /* ---- C.2 Açılır paneller ekranın içinde ----
     Panel düğmesinin sağına yaslıydı ve sola doğru 300 px açılıyordu; zil
     sağ kenarda olmadığı için panel ekranın SOLUNDAN taşıyordu (375 px'te
     −129). Telefonda iki panel de üst çubuğun iki kenarına yaslı. Sarmal
     konumsuz kalınca zil rozeti düğmenin kendisine bağlanıyor. */
  .zil-sarmal,
  .kullanici-sarmal { position: static; }

  .portal-ust .p-btn.zil { position: relative; }

  .zil-panel,
  .kullanici-panel {
    top: calc(100% - var(--p-a1));
    left: var(--p-a3);
    right: var(--p-a3);
    width: auto;
  }

  /* ---- C.3–C.5 Gövde, tedarikçi listesi, gözlem alanı ----
     Telefon yeniden tasarımıyla (Selim 2026-10-06) 11-telefon.css'e geçti:
     üst alan kaydırmanın dışında, liste yerine "Tedarikçi" seçicisi, tablo
     yerine ürün kartları. Burada yalnız tablo hata metni kuralı kaldı. */

  /* Hata metni (tablo çekilemedi) sığmazsa sarar, kesilmez. */
  .alan-bilgi { white-space: normal; }
  .alan-bilgi:empty { display: none; }

  /* ---- C.6 KART TABLO (.p-kart-tablo) — bileşen ----
     Satır kart, hücre etiketli kutu. Etiket `data-etiket` (portal-mobil.js,
     sütun başlığının kendisi). Başlık satırı sıralamayı TAŞIMAYA devam
     ediyor: başlıklar yana kayan çip sırasına dönüşüyor, basınca aynı
     sıralama (portal-gecmis-suzgec.js) çalışıyor. Sıralanamayan başlık çip
     olmuyor — adı kartta, ilgili hücrenin etiketinde duruyor. */
  .p-kart-tablo,
  .p-kart-tablo.firma-var {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .p-kart-tablo colgroup { display: none; }

  .p-kart-tablo thead { display: block; border-bottom: 1px solid var(--p-cizgi-kuv); }

  .p-kart-tablo thead tr {
    display: flex;
    gap: var(--p-a2);
    padding: var(--p-a1) var(--p-a3);
    overflow-x: auto;
    overscroll-behavior: none;
  }

  .p-kart-tablo thead th,
  .p-kart-tablo thead th:first-child {
    position: static;
    flex: none;
    display: inline-flex;
    align-items: center;
    min-height: var(--p-hedef-sm);
    padding: 0 var(--p-a3);
    white-space: nowrap;
    border: 1px solid var(--p-cizgi-kuv);
    border-radius: 999px;
  }

  .p-kart-tablo thead th:not(.sirali) { background: var(--p-kart); }

  .p-kart-tablo thead th:not([data-sort]) { display: none; }

  .p-kart-tablo tbody { display: block; }

  .p-kart-tablo tbody tr {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    /* Satır aralığı ve dolgu sıkı: 375×667'de ilk kart ilk ekrana bütün
       sığsın (ölçüm aracı · ilk-ekran). */
    gap: var(--p-a1) var(--p-a3);
    height: auto;
    padding: var(--p-a2) var(--p-a3);
    background: var(--p-kart);
    border-top: 1px solid var(--p-cizgi);
  }

  .p-kart-tablo tbody td {
    display: block;
    position: static;
    min-width: 0;
    padding: 0;
    border: 0;
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
  }

  /* Hücre zemini SATIRDA: tablo görünümünün zebra / sabit sütun / uyumsuz
     zeminleri hücre başına yazılı ve özgüllükleri (0,4,3)'e kadar çıkıyor;
     kartta hücre zemini olursa kart yamalı görünür. Tek istisna bu. */
  .p-kart-tablo tbody tr > td { background: transparent !important; box-shadow: none !important; }

  /* Sabit ilk sütunun ayırma çizgisi (06-…css) kartta anlamsız. */
  .p-kart-tablo tbody tr > td:first-child { border-right: 0; }

  /* Boş hücre (aynı ürünün sonraki satırında kimlik tekrar yazılmıyor —
     KD-0046) kartta yer kaplamıyor. */
  .p-kart-tablo tbody td:empty { display: none; }

  .p-kart-tablo tbody td[data-etiket]::before {
    content: attr(data-etiket);
    display: block;
    margin-bottom: 2px;
    font-size: var(--p-yazi-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--p-ikincil);
  }

  /* ---- C.7 Gözlem tablosunun kartı ----
     Telefonda gözlem tablosu GİZLİ; yerine ürün başına kart (11-telefon.css,
     portal-telefon.js — Selim 2026-10-06). C.6 bileşeni yeni ekranlar için
     duruyor. */

  /* ---- C.8 Pencereler TAM EKRAN ----
     920 px'lik pencere telefonda 24 px kenar boşluğuyla ortada asılı
     kalıyordu; yazışmanın üstünde ve altında boş, yarı saydam şerit. */
  .mesaj-ort {
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    align-items: stretch;
  }

  .mesaj-pencere {
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }

  .suz-govde { flex: 1; }

  /* Mesaj penceresinde dört araç (44 px) başlığın yarısını alıyor ve ürün
     adı dört satıra kırılıyordu: araçlar başlığın üst satırında sağda, ad
     altında tam genişlikte. Yalnız araç takımı olan başlıkta (süzgeç ve
     geçmiş penceresinde tek kapatma düğmesi var, onlar tek satır kalıyor). */
  .mesaj-bas:has(.mesaj-araclar) { flex-wrap: wrap; }
  .mesaj-bas:has(.mesaj-araclar) .mesaj-araclar { order: -1; width: 100%; justify-content: flex-end; }
  .mesaj-bas:has(.mesaj-araclar) .mesaj-kimlik { flex: 1 1 100%; }

  .mesaj-urun { font-size: var(--p-yazi-md); overflow-wrap: anywhere; }

  .balon { max-width: 88%; }

  /* ---- C.9 Alt çizgi ---- */
  .portal-alt {
    padding: var(--p-a2) max(var(--p-a4), env(safe-area-inset-right)) max(var(--p-a2), env(safe-area-inset-bottom)) max(var(--p-a4), env(safe-area-inset-left));
  }

  /* ---- C.10 Giriş ekranı ---- */
  .pgiris-form-kabi { padding: var(--p-a6) var(--p-a5); }
}

/* ---- C.11 Yatay telefon — yükseklik az, genişlik var ----
   667×375'te ilk ekranda HİÇ kart görünmüyordu (koordinatör, ölçüldü).
   Üst çubuk ve alt çizgi dolgusuz; üst alan tek satır ve kart yerleşimi
   11-telefon.css'te. Ölçüt (tools/portal-mobil-olcum.mjs · ilk-ekran): ilk
   ekranda en az bir kart BÜTÜN görünür. */
@media (max-height: 520px) and (min-width: 601px) {
  .portal-ust { padding-top: var(--p-a1); padding-bottom: var(--p-a1); }

  .portal-alt { padding-top: var(--p-a1); padding-bottom: max(var(--p-a1), env(safe-area-inset-bottom)); }

  /* Liste ve kart yerleşimi 11-telefon.css'te (yatay telefon dahil). */

  /* Mesaj başlığı yatayda TEK satır sığıyor: araçlar yine sağda, ad solda. */
  .mesaj-bas:has(.mesaj-araclar) { flex-wrap: nowrap; }
  .mesaj-bas:has(.mesaj-araclar) .mesaj-araclar { order: 0; width: auto; }
  .mesaj-bas:has(.mesaj-araclar) .mesaj-kimlik { flex: 1 1 auto; }
}

/* ==========================================================================
   D. KAYDIRMA İPUCU (.p-kaydirma-ipucu) — bileşen, her genişlikte
   Yana kayan kabın içeriğin devam ettiği kenarı 32 px'te solarak bitiyor:
   "buradan devamı var" metinsiz okunuyor (koordinatör kararı, KD-0087 —
   ürün geçmişi tablosu telefonda yana kayıyordu ama bunu gösteren bir şey
   yoktu). Öznitelikleri portal-mobil.js · kaydirmaIpucu yazıyor; kap
   kaymıyorsa (geniş ekran) öznitelik yok → kural yok, görünüm aynı.
   Maske yalnız saydamlık: renk değil, palet dışı değer yok.
   ========================================================================== */
.p-kaydirma-ipucu[data-kay-sag] {
  -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, black calc(100% - 32px), transparent);
}

.p-kaydirma-ipucu[data-kay-sol] {
  -webkit-mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to left, black calc(100% - 32px), transparent);
}

.p-kaydirma-ipucu[data-kay-sol][data-kay-sag] {
  -webkit-mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
  mask-image: linear-gradient(to right, transparent, black 32px, black calc(100% - 32px), transparent);
}