/* ==========================================================================
   ÜRÜN GEÇMİŞİ PENCERESİ — tek tablo (2026-10-01)

   Mesaj penceresinin kabuğunu paylaşıyor (.mesaj-ort / .mesaj-pencere): iki
   pencere aynı ekranda aynı dili konuşsun. Farkı içerik: sohbet yerine
   değişiklik tablosu, ve daha geniş — satırlar tarih+adet+sebep taşıyor.
   ========================================================================== */

/* Genişlik .mesaj-pencere'den geliyor — burada tekrarlanmıyor. */

/* Tanım başlığın ALTINDA ve soluk: kod kimliktir, tanım açıklamadır. */
.gecmis-tanim {
  font-size: var(--p-yazi-sm);
  color: var(--p-ikincil);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Tabloda kod artık düğme — düğme görünümü DEĞİL, metin görünümü.
   Kendini düğme gibi göstermesi 118 satırda 118 kutu demekti; altı çizili
   ilişkisi tıklanabilirliği söylüyor, kutuya gerek yok. */
.kod-ac {
  display: block;
  max-width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 700;
  font-size: var(--p-yazi-sm);
  /* Satır aralığı 1.2: iki satırlık kimlik (kod + tanım) 40px yer
     kaplıyordu ve grup satırlarını 58px'e çıkarıyordu; bütün satırlar
     52px olacaksa içeriğin 36px'e sığması gerekiyor (ölçüldü). */
  line-height: 1.2;
  color: inherit;
  text-align: left;
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: var(--p-cizgi-kuv);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--p-gecis), text-decoration-color var(--p-gecis);
}

.kod-ac:hover,
.kod-ac:focus-visible {
  color: var(--p-aksan-koyu);
  text-decoration-color: var(--p-aksan);
}

.kod-ac:focus-visible { outline: none; box-shadow: var(--p-odak); border-radius: 3px; }

/* ---- Pencere gövdesi ---- */

.gecmis-govde {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: none;
  background: var(--p-zemin);
}

.gecmis-panel {
  display: flex;
  flex-direction: column;
  gap: var(--p-a3);
  padding: var(--p-a4);
}

.pgt-bos {
  padding: var(--p-a3);
  font-size: var(--p-yazi-sm);
  color: var(--p-soluk);
}

/* ---- Birleşik değişiklik tablosu (2026-10-01) ----
   Çizici ERP ile ORTAK (public/gecmis-tablo.js, sınıflar pgt-*); görünüm
   burada, portalın kendi jetonlarıyla.


   Gözlem tablosunun dili: aynı başlık biçimi, aynı çizgiler. Tablo kendi
   kabında YATAY kayıyor — 7 sütun dar ekranda sığmıyor; sütunları ezmek
   yerine kap kayar, pencere kaymaz. */
.pgt-kap {
  overflow-x: auto;
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi);
  border-radius: var(--p-radius-sm);
}

.pgt-tablo {
  width: 100%;
  min-width: 860px;
  border-collapse: collapse;
}

.pgt-tablo thead th {
  padding: var(--p-a2) var(--p-a3);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  letter-spacing: var(--p-harf-etiket);
  text-transform: uppercase;
  text-align: left;
  color: var(--p-ikincil);
  background: var(--p-kart-2);
  border-bottom: 1px solid var(--p-cizgi-kuv);
  line-height: 1.25;
  vertical-align: bottom;
}

/* Başlık metni ve "?" yan yana; başlık sarılırsa düğme son satırda kalır. */
.pgt-bas { display: inline-flex; align-items: flex-end; gap: var(--p-a1); }

.pgt-tablo tbody td {
  padding: var(--p-a2) var(--p-a3);
  font-size: var(--p-yazi-sm);
  color: var(--p-ink);
  border-bottom: 1px solid var(--p-cizgi);
  vertical-align: top;
  white-space: nowrap;
}

.pgt-tablo tbody tr:last-child td { border-bottom: 0; }
.pgt-tablo th.num, .pgt-tablo td.num { text-align: right; }

/* Not ve rozet hücresi sarılır: uzun sebep kırpılırsa yanlış okunur. */
.pgt-tablo td.s-bildirim, .pgt-tablo td.s-not { white-space: normal; }
.pgt-tablo td.s-not { min-width: 160px; line-height: 1.45; }

.pgt-yok { color: var(--p-soluk); }

/* Teslimat grubu başlığı — tablonun içinde, bütün sütunları kaplayan ince
   satır ("Teslimat · 31.07.2026 · 32 adet"). Başlık şeridinin zemini. */
.pgt-tablo tbody tr.pgt-grup th {
  padding: var(--p-a1) var(--p-a3);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  text-align: left;
  color: var(--p-ikincil);
  background: var(--p-kart-2);
  text-transform: none; letter-spacing: 0;
  border-bottom: 1px solid var(--p-cizgi);
}

/* Statü rozeti — ERP'deki tip renkleri: Kesin aksan, Planlanan yeşil,
   Bakiye kehribar. Metin rengi her zeminde AAA (tokens.css). */
.pgt-statu {
  display: inline-block;
  padding: 1px var(--p-a2);
  border: 1px solid var(--p-cizgi-kuv);
  border-radius: 999px;
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  color: var(--p-ikincil);
  background: var(--p-kart-2);
}
.pgt-statu.kesin { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }
.pgt-statu.planlanan { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.pgt-statu.bakiye { color: var(--amber-ink); background: var(--amber-bg); border-color: var(--amber-line); }

/* Değişiklik bildirimi rozetleri — bir satırda birden çok olabilir. */
.pgt-bildirimler { display: flex; flex-wrap: wrap; gap: var(--p-a1); }
.pgt-bil {
  display: inline-block;
  padding: 1px var(--p-a2);
  border: 1px solid var(--p-cizgi-kuv);
  border-radius: var(--p-radius-sm);
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  color: var(--p-ikincil);
  background: var(--p-kart-2);
  white-space: nowrap;
}
.pgt-bil.eklendi { color: var(--green); background: var(--green-bg); border-color: var(--green-line); }
.pgt-bil.cikti { color: var(--red); background: var(--red-bg); border-color: var(--red-line); }
.pgt-bil.termin { color: var(--brand-dark); background: var(--brand-soft); border-color: var(--brand-line); }

/* "?" düğmesi — gerçek düğme; tıklayınca sütunun anlamı açılır. */
.pgt-soru {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--p-cizgi-kuv);
  border-radius: 50%;
  background: var(--p-kart);
  font: inherit;
  font-size: var(--p-yazi-xs);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  color: var(--p-ikincil);
  cursor: pointer;
}
.pgt-soru:hover, .pgt-soru[aria-expanded="true"] { color: var(--p-aksan-koyu); border-color: var(--p-aksan); }
.pgt-soru:focus-visible { outline: none; box-shadow: var(--p-odak); }

/* Çekim saati rozeti — tarihin yanında, "?" düğmesiyle aynı daire (gecmis-tablo.js · saatDugmesi). */
.pgt-cekim { display: inline-flex; align-items: center; gap: var(--p-a1); white-space: nowrap; }
.pgt-saat svg { display: block; width: 12px; height: 12px; margin: auto; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }

/* Açılır açıklama — public/gecmis-tablo.js pencerenin DIŞ kabına
   (#gecmisOrt) ekliyor, sabit konumlu: tablo kabı yatay kaydırmalı. */
.pgt-balon {
  position: fixed;
  z-index: 1;
  max-width: 340px;
  padding: var(--p-a3);
  background: var(--p-kart);
  border: 1px solid var(--p-cizgi-kuv);
  border-radius: var(--p-radius-sm);
  box-shadow: var(--p-golge);
  font-size: var(--p-yazi-sm);
  line-height: 1.45;
  color: var(--p-ink);
}
.pgt-balon b { display: block; margin-bottom: var(--p-a1); }
/* Statü açıklaması: rozet + açıklama, alt alta satırlar (Selim 2026-10-02). */
.pgt-balon-liste {
  display: grid;
  grid-template-columns: max-content 1fr;
  align-items: center;
  gap: var(--p-a2) var(--p-a3);
  margin: var(--p-a2) 0 0;
}
.pgt-balon-liste dt, .pgt-balon-liste dd { margin: 0; }

/* Eskimiş değer — sonraki değişiklikle geçerliliğini yitirdi (Selim
   2026-10-01: "çok hafif çizgi"). Metnin rengi aynı (AAA), yalnız ince ve
   yarı saydam bir çizgi; rozetin içine ayrıca veriliyor çünkü çizgi
   satır içi-blok öğeye kendiliğinden geçmiyor. */
.pgt-eski, .pgt-eski .pgt-statu {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, var(--p-ikincil) 55%, transparent);
}

/* ---- 2.3 Alt çizgi ---- */

.portal-alt {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--p-a3);
  padding: var(--p-a3) var(--p-a5);
  background: var(--p-kart);
  border-top: 1px solid var(--p-cizgi);
}

/* Sağ altta yalnız zoprey.ERP. Marka dosyası "zoprey." taşıyor; "ERP"
   metin olarak ekleniyor — giriş ekranıyla aynı kalıp. */
/* Yanıt vermeyen firma uyarısı — yalnız yatay telefonda (11-telefon.css). */
.portal-alt-uyari { display: none; }

.portal-alt-sag {
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.palt-zoprey { height: 20px; width: auto; align-self: center; }

.palt-erp {
  font-size: var(--p-yazi-md);
  font-weight: 900;
  letter-spacing: -.01em;
  color: var(--p-ink);
}

/* ==========================================================================
   3. DAR / DİKEY TABLET — liste üstte şerit
   ========================================================================== */

@media (max-width: 820px) {
  .pgiris {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .pgiris-kimlik {
    gap: var(--p-a3);
    padding: var(--p-a5);
  }
  .pgiris-kimlik::after { width: 320px; height: 320px; right: -140px; bottom: -160px; }
  .pgiris-marka { width: 170px; }
  .pgiris-ad { font-size: var(--p-yazi-xl); }

  .portal-govde {
    grid-template-columns: 1fr;
    grid-template-rows: minmax(220px, 38%) 1fr;
    transition: grid-template-rows var(--p-gecis), gap var(--p-gecis);
  }

  /* Dikey düzende liste ÜSTTE duruyor, o yüzden kapanan şey satır. */
  .portal-govde.raf-gizli {
    grid-template-columns: 1fr;
    grid-template-rows: 0 1fr;
  }
}

/* Çok geniş ekran: içerik sonsuza kadar esnemesin, ortada dursun.
   (PC için ayrı kompozisyon YAPILMADI — kullanıcı kararı 2026-09-10:
   "PC konusunu unut". Hedef cihaz tablet.) */
@media (min-width: 1800px) {
  .portal-govde,
  .portal-ust,
  .portal-alt {
    max-width: 1720px;
    margin-inline: auto;
    width: 100%;
  }
}