/* İstatistikler sayfası. Tek seri, tek renk: vurgu mavisi (#1f5bff) yalnızca veri işaretlerinde. */
.ist { padding-top: 24px; padding-bottom: 80px; }
.ist-bas { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 8px; }
.ist h1 { margin: 0 0 6px; font-size: clamp(2rem, 4vw, 2.75rem); letter-spacing: -.03em; line-height: 1.1; }
.ist-alt { margin: 0; color: var(--ikincil); }
.ist h2 { margin: 0 0 14px; font-size: 1.05rem; letter-spacing: -.01em; }

.donem { display: inline-flex; background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 999px; padding: 3px; }
.donem button {
  font: inherit; font-size: .875rem; border: 0; background: none; color: var(--murekkep);
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
}
.donem button[aria-pressed="true"] { background: var(--murekkep); color: #fff; }

.ist-durum { min-height: 1.5em; margin: 8px 0 16px; font-size: .875rem; color: var(--ikincil); }

.kutular { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 12px; }
.kutu {
  background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 16px 18px;
  display: flex; flex-direction: column; gap: 2px;
}
.kutu-ad { font-size: .85rem; color: var(--ikincil); }
.kutu strong { font-size: clamp(1.6rem, 3vw, 2.1rem); letter-spacing: -.02em; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kutu-not { font-size: .78rem; color: var(--ikincil); }

.kartlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.kart { background: var(--yuzey); border: 1px solid var(--cizgi); border-radius: 14px; padding: 18px 20px; min-width: 0; }
.kart.genis { grid-column: 1 / -1; }
.ist > .kart { margin-bottom: 12px; }

/* Çubuk listesi */
.liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.liste li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; align-items: baseline; }
.liste .ad { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.liste .deger { font-size: .85rem; font-variant-numeric: tabular-nums; color: var(--murekkep); }
.liste .deger small { color: var(--ikincil); margin-left: 6px; font-size: .78rem; }
.liste .cubuk { grid-column: 1 / -1; height: 8px; background: #e6ebf1; border-radius: 4px; overflow: hidden; }
.liste .cubuk span { display: block; height: 100%; background: #1f5bff; border-radius: 0 4px 4px 0; min-width: 4px; }
.bos { margin: 0; font-size: .875rem; color: var(--ikincil); }

/* Günlük grafik */
.grafik { position: relative; }
.grafik svg { display: block; width: 100%; height: 220px; overflow: visible; }
.grafik .eksen { font: 11px var(--metin); fill: #6b7785; }
.grafik .izgara { stroke: #e3e8ee; stroke-width: 1; }
.grafik .taban { stroke: #c9d3de; stroke-width: 1; }

.grafik rect.isabet { fill: transparent; cursor: default; }


.ipucu {
  position: fixed; z-index: 50; pointer-events: none; background: #13202e; color: #fff;
  border-radius: 8px; padding: 8px 10px; font-size: .8rem; line-height: 1.45; white-space: nowrap;
  box-shadow: 0 4px 14px rgba(19, 32, 46, .18);
}
.ipucu b { font-weight: 600; }

.bolum-ist { margin-top: 36px; }
.bolum-bas { margin-bottom: 14px; }
.bolum-bas h2 { font-size: 1.45rem; letter-spacing: -.02em; margin: 0 0 4px; }
.bolum-bas p { margin: 0; color: var(--ikincil); max-width: 72ch; font-size: .95rem; }
.bolum-bas p span { color: var(--murekkep); font-weight: 600; font-variant-numeric: tabular-nums; }
.kart h2 small { font-weight: 400; color: var(--ikincil); font-size: .78rem; margin-left: 4px; }

/* Yönetim paneli: son olaylar tablosu */
.sayma { display: inline-flex; align-items: center; gap: 8px; margin-top: 10px; font-size: .875rem; color: var(--ikincil); cursor: pointer; }
.tablo-kap { overflow-x: auto; }
.olaylar { width: 100%; border-collapse: collapse; font-size: .82rem; }
.olaylar th, .olaylar td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--cizgi); white-space: nowrap; }
.olaylar th { color: var(--ikincil); font-weight: 600; position: sticky; top: 0; background: var(--yuzey); }
.olaylar td.gpu { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.gizlilik-notu { margin-top: 40px; max-width: 72ch; }
.gizlilik-notu p { color: var(--ikincil); font-size: .95rem; }

@media (max-width: 900px) {
  .kutular { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kartlar { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ust .menu { gap: 12px; font-size: .85rem; }
  .ust .menu a { font-size: .85rem; }
  .donem button { padding: 6px 10px; }
}
.liste .ad a { color: var(--murekkep); text-decoration: none; }
.liste .ad a:hover { color: var(--sinyal); text-decoration: underline; }
.alt-bas { margin-top: 24px; }
.alt-bas h3 { margin: 0 0 4px; font-size: 1.1rem; }