/* Sayı gösteren bileşenler: istatistik kutusu (simge + ad + değer + ikincil satır; durum
   renkleri), istatistik ızgarası ve ölçer (ilerleme / doluluk çubuğu). Değerler Diyar Sans
   tablo rakamlarıyla; büyük değer istenirse .istat.buyuk (Diyar Serif). */

.istatlar { display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: var(--bosluk-3); }
.istat {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "simge ad" "deger deger" "alt alt";
  align-items: center;
  column-gap: var(--bosluk-3);
  padding: var(--bosluk-4) var(--bosluk-5) var(--bosluk-4) var(--bosluk-4);
  border-radius: var(--yaricap-2);
  border: 1px solid var(--cizgi);
  background: var(--zemin-1);
  min-width: 0;
}
.istat-simge { grid-area: simge; display: inline-flex; color: var(--yazi-3); }
.istat-simge .simge { width: 14px; height: 14px; }
.istat-ad { grid-area: ad; color: var(--yazi-2); font-size: var(--boy-2); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.istat-deger { grid-area: deger; margin-top: 2px; font: 600 var(--boy-5)/1.15 var(--aile-sans);
  color: var(--yazi-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.istat-deger small { font-size: var(--boy-2); font-weight: 400; color: var(--yazi-3); }
.istat-alt { grid-area: alt; color: var(--yazi-3); font-size: var(--boy-1); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.istat.buyuk .istat-deger { font: 600 var(--boy-7)/1.1 var(--aile-serif); }
.istat.iyi { border-color: color-mix(in srgb, var(--iyi) 45%, var(--cizgi)); }
.istat.iyi .istat-simge { color: var(--iyi); }
.istat.uyari { border-color: color-mix(in srgb, var(--uyari) 55%, var(--cizgi));
  background: var(--uyari-zemin); }
.istat.uyari .istat-simge, .istat.uyari .istat-deger { color: var(--uyari); }
.istat.kotu { border-color: color-mix(in srgb, var(--kotu) 60%, var(--cizgi));
  background: var(--kotu-zemin); }
.istat.kotu .istat-simge, .istat.kotu .istat-deger { color: var(--kotu-yazi); }

/* ölçer: <span class="olcer"><i style="width: 62%"></i></span>; .iyi .uyari .kotu .vurgu */
.olcer {
  display: flex;
  height: 6px;
  border-radius: 3px;
  background: var(--zemin-alt);
  box-shadow: inset 0 0 0 1px var(--cizgi);
  overflow: hidden;
}
.olcer > i { display: block; height: 100%; border-radius: 3px; background: var(--yazi-2);
  transition: width var(--gecis-yavas) var(--egri); }
.olcer.ince { height: 4px; }
.olcer.kalin { height: 8px; }
.olcer.iyi > i { background: var(--iyi); }
.olcer.uyari > i { background: var(--uyari); }
.olcer.kotu > i { background: var(--kotu); }
.olcer.vurgu > i { background: var(--vurgu); }
.olcer-satir { display: grid; grid-template-columns: minmax(0, auto) minmax(40px, 1fr) auto;
  align-items: center; gap: var(--bosluk-4); font-size: var(--boy-2); color: var(--yazi-2); }
.olcer-satir b { color: var(--yazi-1); font-weight: 600; }