/* ==========================================================================
   TELEFON GÖRÜNÜMÜ — yeniden tasarım (Selim'in onayladığı taslak, 2026-10-06)

   Selim: "mobil telefon ekranı çok karışık, yazılar iç içe geçmiş gibi."
   Davranış public/portal/portal-telefon.js'te. YALNIZ TELEFON_SORGUSU
   (portal-mobil.js; 10-mobil-telefon.css C ile aynı). Masaüstü (fareli
   1280) ve tablet (768×1024, 1024×768 dokunmatik) görünümü değişmez:
   bu dosyanın sorgu dışındaki tek işi telefon öğelerini gizlemek.

     1. Üst alan (arama + "Süz" + Tedarikçi/Sırala seçicileri) KAYDIRMANIN
        DIŞINDA: kaydıran yalnız kart listesi, üst alan kartların üstüne
        binmez (önce yapışkan şerit kaydırılan kartları örtüyordu).
     2. Kart başına BİR ÜRÜN, içinde teslimat tablosu; kırmızı satırın
        sebebi satırın altında görünür yazı.
     3. Değişim Takibi tam ekran DİKEY ZAMAN ÇİZELGESİ.
     4. Süzgeç penceresi ve Not teslimat seçimi ALTTAN açılan panel.

   Renk yalnız jetonlardan (tokens.css, 01-temel-jetonlar.css, mesaj
   renkleri 07-not-hucresi.css); yazı ölçeği 12/14/16/19/24/32; dokunma
   hedefi ≥ 44 px; seçici yazısı 16 px (iOS odak yakınlaştırması).
   ========================================================================== */

/* Telefon öğeleri geniş ekranda YOK (gizli öğe esnek kutuda yer ve boşluk
   tutmaz — masaüstü yerleşimi piksel piksel aynı kalır). */
.tel-secimler,
.tel-segment-alan,
.suz-ac-kisa,
.p-urun-liste { display: none; }

@media (max-width: 600px), (max-height: 520px) {

  /* ---- 1. Gövde: üst alan sabit, kart listesi kayar ---- */
  .portal-govde {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 0;
    overflow: hidden;
  }

  /* Tedarikçi listesi telefonda "Tedarikçi" seçicisine dönüşüyor. */
  .portal-raf { display: none; }

  .portal-alan {
    flex: 1 1 auto;
    min-height: 0;
    background: var(--p-zemin);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: hidden;
  }

  .alan-bas {
    position: static;
    flex: none;
    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));
    background: var(--p-kart);
    border-bottom: 1px solid var(--p-cizgi);
  }

  /* "Gözlem Tablosu" başlığı telefonda görünmüyor (taslak); bölümün
     erişilebilir adı olarak duruyor (aria-labelledby). */
  .alan-bas > .portal-bolum-baslik { display: none; }

  .alan-sag {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--p-a2);
    width: 100%;
  }

  .alan-sag > .tablo-ara { grid-column: 1; grid-row: 1; width: auto; }
  .alan-sag > .suz-ac { grid-column: 2; grid-row: 1; }
  .alan-sag > .tel-secimler { grid-column: 1 / -1; grid-row: 2; }
  .alan-sag > .alan-bilgi { grid-column: 1 / -1; grid-row: 3; }

  /* "Süz": ikon yok, kısa ad; açık süzgeç sayısı köşede rozet. */
  .suz-ac { position: relative; padding: 0 var(--p-a4); }
  .suz-ac > i,
  .suz-ac-ad { display: none; }
  .suz-ac-kisa { display: inline; }

  .suz-rozet {
    position: absolute;
    top: calc(var(--p-a2) * -1);
    right: calc(var(--p-a2) * -1);
    color: var(--p-kart);
    background: var(--p-aksan);
    border: 2px solid var(--p-kart);
  }

  /* ---- Tedarikçi / Sırala seçicileri ----
     Ad üstte küçük, seçili değer altında 16 px kalın: aynı satırda iki
     sözcük + 16 px değer 375 px'te sığmıyor ("VSRM ta…"). Yerel açılır
     liste bütün kutuyu kaplıyor — dokunma alanı kutunun tamamı. */
  .tel-secimler {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--p-a2);
  }

  .tel-secim {
    position: relative;
    display: block;
    min-width: 0;
    height: calc(var(--p-hedef-sm) + var(--p-a1));
    border-radius: var(--p-radius-sm);
    background: var(--p-aksan-yumusak);
  }

  .tel-secim:focus-within { box-shadow: var(--p-odak); }

  .tel-secim-ad {
    position: absolute;
    top: var(--p-a1);
    left: var(--p-a3);
    font-size: var(--p-yazi-xs);
    line-height: 1.2;
    color: var(--p-ikincil);
    pointer-events: none;
  }

  .tel-secim-kutu {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 18px calc(var(--p-a3) + 20px) 0 var(--p-a3);
    font-family: var(--p-font);
    font-size: var(--p-yazi-md);
    font-weight: 700;
    color: var(--p-aksan-koyu);
    background: transparent;
    border: 0;
    border-radius: inherit;
    -webkit-appearance: none;
    appearance: none;
    text-overflow: ellipsis;
    cursor: pointer;
  }

  .tel-secim-kutu:focus-visible { outline: none; }

  .tel-secim > i {
    position: absolute;
    right: var(--p-a3);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--p-yazi-md);
    color: var(--p-aksan-koyu);
    pointer-events: none;
  }

  /* Tablo telefonda yok — yerine kart listesi (portal-telefon.js). */
  .portal-alan > .tablo-kap { display: none; }

  .p-urun-liste {
    display: flex;
    flex-direction: column;
    gap: var(--p-a3);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--p-a3) max(var(--p-a3), env(safe-area-inset-right)) var(--p-a3) max(var(--p-a3), env(safe-area-inset-left));
  }

  .p-urun-liste:empty { display: none; }

  /* Yanıt vermeyen firma uyarısı (merkez, "Tümü") — listenin ilk öğesi; görünüşü
     geniş ekrandaki `.alan-bilgi` ile aynı (portal-telefon.js telefonCiz). */
  .p-liste-uyari {
    margin: 0;
    flex: none;
    font-size: var(--p-yazi-xs);
    color: var(--p-soluk);
  }

  /* ---- 2. Ürün kartı ---- */
  .p-urun-kart {
    flex: none;
    background: var(--p-kart);
    border: 1px solid var(--p-cizgi);
    border-radius: var(--p-radius);
    box-shadow: var(--p-golge);
    overflow: hidden;
  }

  .p-kart-bas { padding: var(--p-a3) var(--p-a3) var(--p-a2); }

  .p-kart-kod {
    display: flex;
    align-items: baseline;
    gap: var(--p-a2);
    font-size: var(--p-yazi-md);
    font-weight: 900;
    line-height: 1.25;
    overflow-wrap: anywhere;
  }

  .p-kart-ad {
    margin-top: 2px;
    font-size: var(--p-yazi-sm);
    line-height: 1.3;
    color: var(--p-ikincil);
    overflow-wrap: anywhere;
  }

  /* Firma adı küçük ve sönük, normal harf — yalnız "Tümü"de (portal-telefon.js). */
  .p-kart-firma {
    margin-top: var(--p-a1);
    font-size: var(--p-yazi-xs);
    color: var(--p-soluk);
    overflow-wrap: anywhere;
  }

  /* Sütunlar SABİT oranlı: bütün kartlarda aynı sütun aynı yerde (içeriğe
     göre dağılan tabloda her kartın Termin'i başka hizadaydı). */
  .p-teslimat-tablo {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: var(--p-yazi-sm);
  }

  .p-teslimat-tablo th:nth-child(1) { width: 30%; }
  .p-teslimat-tablo th:nth-child(2) { width: 27%; }
  .p-teslimat-tablo th:nth-child(3) { width: 14%; }

  .p-teslimat-tablo th:nth-child(4),
  .p-teslimat-tablo td:nth-child(4) { padding-left: var(--p-a3); }

  .p-teslimat-tablo th {
    padding: var(--p-a1) 6px;
    font-size: var(--p-yazi-xs);
    font-weight: 700;
    line-height: 1.3;
    color: var(--p-ikincil);
    text-align: left;
    white-space: nowrap;
    border-top: 1px solid var(--p-cizgi);
  }

  .p-teslimat-tablo td {
    padding: var(--p-a2) 6px;
    line-height: 1.3;
    vertical-align: middle;
    white-space: nowrap;
    border-top: 1px solid var(--p-cizgi);
  }

  .p-teslimat-tablo th:first-child,
  .p-teslimat-tablo td:first-child { padding-left: var(--p-a3); }

  .p-teslimat-tablo th:last-child,
  .p-teslimat-tablo td:last-child { padding-right: var(--p-a3); }

  .p-teslimat-tablo .num { text-align: right; }

  /* Uzun statü adı ("Planda değil") dar ekranda satır içinde sarabilir. */
  .p-teslimat-tablo .pgt-statu { white-space: normal; }

  /* Kırmızı (uyumsuz) teslimat: kırmızı zemin + sol kırmızı çizgi; sebep
     hemen altında görünür yazı. */
  .p-teslimat-tablo tr.uyumsuz td { background: var(--red-bg); }

  .p-teslimat-tablo tr.uyumsuz td:first-child { box-shadow: inset 4px 0 0 var(--red); }

  .p-teslimat-tablo tr.p-sebep td {
    padding-top: 0;
    padding-bottom: var(--p-a2);
    font-size: var(--p-yazi-xs);
    font-weight: 700;
    color: var(--red);
    white-space: normal;
    border-top: 0;
  }

  .p-sebep i { margin-right: var(--p-a1); vertical-align: -1px; }

  /* Kart altı: iki eşit düğme. */
  .p-kart-alt {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-top: 1px solid var(--p-cizgi);
  }

  .p-kart-dugme {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--p-a2);
    min-width: 0;
    min-height: calc(var(--p-hedef-sm) + var(--p-a1));
    padding: 0 var(--p-a2);
    font-family: var(--p-font);
    font-size: var(--p-yazi-sm);
    font-weight: 700;
    color: var(--p-aksan-koyu);
    background: transparent;
    border: 0;
    cursor: pointer;
    transition: background var(--p-gecis), color var(--p-gecis);
  }

  .p-kart-dugme + .p-kart-dugme { border-left: 1px solid var(--p-cizgi); }

  .p-kart-dugme > i { font-size: var(--p-yazi-lg); }

  .p-kart-dugme:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--p-aksan); }

  .p-kart-dugme:active { background: var(--p-aksan-yumusak); }

  .p-kart-dugme:disabled {
    color: var(--p-ikincil);
    font-weight: 400;
    cursor: default;
  }

  /* Mesaj renk dili — tablodaki mesaj ikonuyla aynı (07-not-hucresi.css):
     açık ton zemin, güçlü ton ikon; yazı koyu (AAA). */
  .p-kart-not.d-gelen { background: var(--p-not-gelen-zemin); }
  .p-kart-not.d-gelen > i { color: var(--p-not-gelen-ikon); }
  .p-kart-not.d-gonderilen { background: var(--p-not-gonderilen-zemin); }
  .p-kart-not.d-gonderilen > i { color: var(--p-not-gonderilen-ikon); }

  /* ---- 3. Değişim Takibi — dikey zaman çizelgesi ---- */
  .tel-cizelge { display: flex; flex-direction: column; gap: var(--p-a4); }

  .tel-cizelge-bas {
    display: flex;
    align-items: center;
    gap: var(--p-a3);
    padding: 0 0 var(--p-a2);
    font-size: var(--p-yazi-sm);
    font-weight: 700;
    color: var(--p-ink);
  }

  .tel-cizelge-liste { margin: 0; padding: 0; list-style: none; }

  /* Nokta + dikey çizgi: kayıt kutusunun solunda. */
  .tel-olay { position: relative; padding: 0 0 var(--p-a3) calc(var(--p-a5) + var(--p-a1)); }

  .tel-olay::before {
    content: '';
    position: absolute;
    left: 4px;
    top: var(--p-a4);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--p-aksan);
  }

  .tel-olay::after {
    content: '';
    position: absolute;
    left: 9px;
    top: calc(var(--p-a4) + 14px);
    bottom: 0;
    width: 2px;
    background: var(--p-cizgi-kuv);
  }

  .tel-olay:last-child { padding-bottom: 0; }
  .tel-olay:last-child::after { display: none; }

  .tel-olay-kutu {
    padding: var(--p-a2) var(--p-a3) var(--p-a3);
    background: var(--p-kart);
    border: 1px solid var(--p-cizgi);
    border-radius: var(--p-radius-sm);
  }

  .tel-olay-zaman {
    font-size: var(--p-yazi-xs);
    font-weight: 700;
    color: var(--p-ikincil);
  }

  .tel-olay-kutu > .pgt-bildirimler { margin-top: var(--p-a1); }

  .tel-olay-alanlar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 2px var(--p-a3);
    margin: var(--p-a2) 0 0;
    font-size: var(--p-yazi-sm);
    line-height: 1.4;
  }

  .tel-olay-alanlar dt { color: var(--p-ikincil); }

  .tel-olay-alanlar dd { margin: 0; font-weight: 700; color: var(--p-ink); overflow-wrap: anywhere; }

  .tel-olay-alanlar dd .pgt-eski { font-weight: 400; color: var(--p-ikincil); }

  .tel-olay-not {
    margin-top: var(--p-a2);
    padding: var(--p-a1) var(--p-a2);
    font-size: var(--p-yazi-sm);
    color: var(--p-ink);
    background: var(--amber-bg);
    border-radius: var(--p-radius-sm);
    overflow-wrap: anywhere;
  }

  /* ---- 4. Alttan açılan panel: süzgeç ve Not teslimat seçimi ---- */
  #suzOrt,
  .tel-alt-panel-ort {
    align-items: flex-end;
    padding: env(safe-area-inset-top) 0 0;
  }

  #suzOrt > .suz-pencere,
  .tel-alt-panel {
    height: auto;
    max-height: 100%;
    border-radius: var(--p-radius) var(--p-radius) 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Süzgeç: Sırala ve Mesaj bölümlü düğme; Mesaj açılır listesi telefonda yok. */
  .tel-segment-alan { display: flex; }

  .suz-govde > .suz-ikili { display: none; }

  .tel-segment {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    background: var(--p-kart);
    border: 1px solid var(--p-cizgi-kuv);
    border-radius: var(--p-radius-sm);
    overflow: hidden;
  }

  .tel-segment > button {
    min-width: 0;
    min-height: var(--p-hedef-sm);
    padding: 0 var(--p-a1);
    font-family: var(--p-font);
    font-size: var(--p-yazi-sm);
    color: var(--p-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  .tel-segment > button + button { border-left: 1px solid var(--p-cizgi-kuv); }

  .tel-segment > button[aria-pressed="true"] {
    font-weight: 700;
    color: var(--p-kart);
    background: var(--p-aksan);
  }

  .tel-segment > button:focus-visible { outline: none; box-shadow: inset 0 0 0 3px var(--p-aksan-koyu); }

  /* Tarih aralığı yan yana (taslak) — iki kutu 375 px'te sığıyor. */
  .suz-tarih-ikili { flex-wrap: nowrap; }
  .suz-gun-sar { flex: 1 1 0; min-width: 0; }
  .suz-gun { width: 100%; }

  .suz-alt > .p-btn { flex: 1 1 0; }

  /* Not teslimat seçimi */
  .tel-alt-panel .gecmis-tanim { white-space: normal; }

  .tel-not-liste {
    display: flex;
    flex-direction: column;
    gap: var(--p-a2);
    margin: 0;
    padding: var(--p-a3) var(--p-a4) var(--p-a4);
    overflow-y: auto;
    list-style: none;
  }

  .tel-not-og {
    display: flex;
    align-items: center;
    gap: var(--p-a3);
    width: 100%;
    min-height: calc(var(--p-hedef-sm) + var(--p-a1));
    padding: 0 var(--p-a3);
    font-family: var(--p-font);
    font-size: var(--p-yazi-md);
    color: var(--p-ink);
    text-align: left;
    background: var(--p-kart);
    border: 1px solid var(--p-cizgi-kuv);
    border-radius: var(--p-radius-sm);
    cursor: pointer;
  }

  .tel-not-og:focus-visible { outline: none; box-shadow: var(--p-odak); }

  .tel-not-tarih { font-weight: 700; }

  .tel-not-isaret {
    margin-left: auto;
    padding: var(--p-a1);
    font-size: var(--p-yazi-lg);
    border-radius: var(--p-radius-sm);
  }

  .tel-not-isaret.d-gelen { color: var(--p-not-gelen-ikon); background: var(--p-not-gelen-zemin); }
  .tel-not-isaret.d-gonderilen { color: var(--p-not-gonderilen-ikon); background: var(--p-not-gonderilen-zemin); }
}

/* ---- Yatay telefon (yükseklik ≤ 520, genişlik > 600) ----
   Yükseklik az, genişlik var: arama, Süz ve iki seçici TEK SATIR; liste
   dolgusu dar — ilk ekranda en az bir kart bütün görünsün (ölçüm aracı ·
   ilk-ekran). 10-mobil-telefon.css C.11 üst çubuk ve alt çizgiyi daraltıyor. */
@media (max-height: 520px) and (min-width: 601px) {
  .alan-bas { padding-top: var(--p-a2); padding-bottom: var(--p-a2); }

  .alan-sag { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.5fr); }
  .alan-sag > .tel-secimler { grid-column: 3; grid-row: 1; }

  .p-urun-liste { padding-top: var(--p-a2); padding-bottom: var(--p-a2); gap: var(--p-a2); }

  .p-kart-bas { padding-top: var(--p-a2); padding-bottom: var(--p-a1); }

  .p-teslimat-tablo td { padding-top: var(--p-a1); padding-bottom: var(--p-a1); }

  .p-kart-dugme { min-height: var(--p-hedef-sm); }

  /* Yanıt vermeyen firma uyarısı listede ilk kartı ~10 px kesiyordu — bu boyda
     alt çubuğun solunda, tek satır; çubuğun yüksekliği değişmez (Selim 2026-10-20). */
  .p-liste-uyari { display: none; }
  .portal-alt-uyari:not(:empty) {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: var(--p-yazi-xs);
    line-height: 1.2;
    color: var(--p-soluk);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}