/* Ping ve port testi. Renkler tema degiskenlerinden; durum renkleri ortak arac paletinden. */
.pg-giris { display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 120px auto; align-items: end; }
.pg-aciklama { margin: 0; }
#pg-cipler button small { margin-left: 3px; font-size: 11.5px; color: var(--muted); }
#pg-cipler button[aria-pressed=true] small { color: inherit; }
.pg-sonuc { display: grid; gap: 14px; }
.pg-sonuc[hidden] { display: none; }
.pg-karar { display: grid; gap: 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pg-karar p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--muted); }
.pg-karar-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.pg-rozet { display: inline-flex; padding: 5px 13px; border-radius: 999px; border: 1px solid; font-size: 15px; font-weight: 700; white-space: nowrap; }
.pg-hedef { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; color: var(--text); overflow-wrap: anywhere; }
.pg-hedef small { color: var(--muted); }
.pg-karar.acik { border-color: color-mix(in srgb, #34d399 50%, var(--line)); background: color-mix(in srgb, #34d399 6%, var(--bg)); }
.pg-karar.acik .pg-rozet { color: #10a571; border-color: color-mix(in srgb, #34d399 55%, transparent); background: color-mix(in srgb, #34d399 14%, transparent); }
.pg-karar.kapali { border-color: color-mix(in srgb, #f87171 50%, var(--line)); background: color-mix(in srgb, #f87171 6%, var(--bg)); }
.pg-karar.kapali .pg-rozet { color: #e05252; border-color: color-mix(in srgb, #f87171 55%, transparent); background: color-mix(in srgb, #f87171 14%, transparent); }
.pg-karar.filtreli { border-color: color-mix(in srgb, #f5a524 50%, var(--line)); background: color-mix(in srgb, #f5a524 6%, var(--bg)); }
.pg-karar.filtreli .pg-rozet { color: #c7820a; border-color: color-mix(in srgb, #f5a524 55%, transparent); background: color-mix(in srgb, #f5a524 14%, transparent); }
.pg-istatistik { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pg-istatistik .arac-sonuc > strong { font-size: 24px; }
.pg-denemeler { display: grid; gap: 10px; margin: 0; padding: 14px 16px; list-style: none; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.pg-deneme { display: grid; grid-template-columns: 82px minmax(0, 1fr) 170px; align-items: center; gap: 12px; min-width: 0; }
.pg-deneme-no { font-size: 13px; color: var(--muted); white-space: nowrap; }
.pg-iz { display: block; height: 12px; border-radius: 999px; background: var(--surface2); overflow: hidden; }
.pg-iz > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.pg-deneme.kapali .pg-iz > span { background: #f87171; opacity: .35; }
.pg-deneme.zaman_asimi .pg-iz > span, .pg-deneme.hata .pg-iz > span {
  background: repeating-linear-gradient(135deg, color-mix(in srgb, #f5a524 45%, transparent) 0 6px, transparent 6px 12px);
}
.pg-deneme-deger { display: flex; align-items: baseline; justify-content: flex-end; gap: 7px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.pg-deneme-deger strong { font-size: 14px; color: var(--text); }
.pg-deneme-deger small { font-size: 12px; color: var(--muted); }
@media (max-width: 720px) {
  .pg-giris { grid-template-columns: minmax(0, 1fr) 96px; }
  .pg-giris .pg-host { grid-column: 1 / -1; }
  .pg-giris .arac-dugme { width: 100%; }
}
@media (max-width: 560px) {
  .pg-istatistik { gap: 8px; }
  .pg-istatistik .arac-sonuc { padding: 12px; }
  .pg-istatistik .arac-sonuc > strong { font-size: 19px; }
  .pg-deneme { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .pg-iz { grid-column: 1 / -1; grid-row: 2; }
  .pg-denemeler { padding: 12px; gap: 14px; }
}