/* ── Ölçüm analizleri (js/olcum.js ile): şut haritası · atak yönü · bölge hakimiyeti ──
   Mobil ikizi: mobil/lib/analiz/olcum_sayfalari.dart. gece-maci.css'ten SONRA yüklenir.
   Saha çizimi GÖRSEL yüzeydir: iki modda gece paleti (mobil Renk.gorsel) —
   gece-maci.css sabitleri --saha-zemin / --gorsel-ink / --gorsel-cim + aşağıdaki
   --olc-gorsel-* türevleri (ham --sz-gm-* token'larından; gündüzde yeniden tanımlanmaz).
   Sayfanın kalanı rol token'larıyla iki modda. Büyük harf CSS'e bırakılmaz. ── */
.olc, .olc-svg {
  --olc-gorsel-amber: var(--sz-gm-amber);   /* mobil Renk.gorsel.amber */
  --olc-gorsel-ink2:  var(--sz-gm-ink2);    /* mobil Renk.gorsel.murekkep2 */
}

.olc { display: flex; flex-direction: column; gap: 12px; }
.olc [hidden] { display: none; }

/* Takım çipleri (mobil _cip) */
.olc-cipler { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.olc-cip {
  flex-shrink: 0; padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--cizgi2); background: none; color: var(--ink2);
  font-family: inherit; font-size: 11.5px; font-weight: 700; line-height: 1.2;
}
.olc-cip:hover { color: var(--ink); }
.olc-cip[aria-pressed="true"] { background: var(--cim-dim); color: var(--cim); border-color: transparent; }
.olc-cip:focus-visible { outline: 2px solid var(--cim); outline-offset: 2px; }

/* Saha SVG'si: yerel çizim ya da GMAnaliz.saha; üstüne .olc-katman */
.olc-saha { border-radius: 8px; overflow: hidden; }
.olc-svg { display: block; width: 100%; height: auto; }
.olc-svg .olc-zemin { fill: var(--saha-zemin); }
.olc-svg .olc-cizgi { fill: none; stroke: var(--gorsel-ink); stroke-opacity: .16; stroke-width: 1; }
.olc-svg text { font-family: var(--govde); font-weight: 800; fill: var(--gorsel-ink); }
.olc-svg .olc-yazi2 { font-weight: 700; fill: var(--olc-gorsel-ink2); }

/* Şut noktaları: gol dolu amber + hale, kurtarış çim halka, diğer soluk halka */
.olc-svg .olc-sut-n { pointer-events: all; }
.olc-svg .olc-gol { fill: var(--olc-gorsel-amber); }
.olc-svg .olc-gol-hale { fill: none; stroke: var(--olc-gorsel-amber); stroke-opacity: .45; stroke-width: 1.2; }
.olc-svg .kurtaris { fill: none; stroke: var(--gorsel-cim); stroke-width: 1.8; }
.olc-svg .diger { fill: none; stroke: var(--olc-gorsel-ink2); stroke-width: 1.8; }

/* Atak şeritleri ve bölge dilimleri: saydamlık JS'te (fill-opacity) */
.olc-svg .olc-serit { fill: var(--gorsel-cim); }
.olc-svg .olc-dilim.s { fill: var(--gorsel-cim); }
.olc-svg .olc-dilim.b { fill: var(--gorsel-ink); }
.olc-svg .olc-dilim-ayrac { stroke: var(--gorsel-ink); stroke-opacity: .10; stroke-width: 1; }

/* Lejant (mobil _lejantNoktasi; renkler görsel sabit, mobildeki gibi) */
.olc-lejant { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 12px; }
.olc-lejant .mikro { display: inline-flex; align-items: center; gap: 6px; letter-spacing: .02em; }
.olc-nokta { display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.4px solid var(--olc-gorsel-ink2); }
.olc-nokta.gol { background: var(--olc-gorsel-amber); border-color: var(--olc-gorsel-amber); }
.olc-nokta.kurtaris { border-color: var(--gorsel-cim); }

.olc-not { margin: 8px 0 0; font-size: 11px; line-height: 1.4; color: var(--soluk); }
.olc-dipnot { margin: 0; font-size: 11px; line-height: 1.45; color: var(--soluk); }

/* Okuma kartı (mobil OkumaKarti): tek cümle, vurgular çim / amber */
.olc-okuma p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.olc-v { color: var(--cim); font-weight: 700; }
.olc-v.amber { color: var(--amber); }

/* En yakından atılanlar */
.olc-liste { padding-top: 6px; padding-bottom: 6px; }
.olc-liste-baslik { padding: 8px 0; letter-spacing: .02em; }
.olc-satir { display: flex; align-items: center; gap: 10px; padding: 9px 0; }
.olc-dk { width: 30px; flex-shrink: 0; font-size: 12.5px; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; }
.yelek.olc-yelek { width: 24px; height: 24px; border-radius: 7px; font-size: 10px; }
.yelek.olc-yelek-k { width: 20px; height: 20px; border-radius: 6px; font-size: 9px; }
.olc-sonuc { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.olc-sonuc.gol { color: var(--amber); }
.olc-m { font-size: 13px; font-weight: 800; color: var(--cim); font-variant-numeric: tabular-nums; }
.olc-bos { margin: 6px 0; font-size: 12.5px; color: var(--ink2); }

/* Haritaya konmayan şutlar (web eki: sebep notu, katlanır) */
.olc-belirsiz { font-size: 12px; color: var(--ink2); }
.olc-belirsiz summary { cursor: pointer; font-weight: 600; }
.olc-belirsiz ul { list-style: none; margin: 8px 0 0; padding: 0; }
.olc-belirsiz li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--cizgi); }
.olc-belirsiz-not { flex: 1; min-width: 0; color: var(--soluk); }

/* Atak yönü çubukları (mobil LinearProgressIndicator: 6 px, yüzey2 zemin, çim) */
.olc-cubuk-satir { display: flex; align-items: center; padding: 8px 0; }
.olc-cubuk-ad { width: 78px; flex-shrink: 0; font-size: 12.5px; font-weight: 600; color: var(--ink); }
.olc-cubuk { flex: 1; height: 6px; border-radius: 3px; background: var(--yuzey2); overflow: hidden; }
.olc-cubuk i { display: block; height: 100%; background: var(--cim); }
.olc-cubuk-deger { width: 46px; flex-shrink: 0; text-align: right; font-size: 13px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; }

/* Bölge hakimiyeti: kale satırı + dilim listesi (S/B çubuğu gece-maci.css .vs-bar) */
.olc-kaleler { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.olc-kaleler .mikro { letter-spacing: .02em; }
.olc-bosluk { flex: 1; }
.olc-dilimler { padding-top: 6px; padding-bottom: 6px; }
.olc-dilim-satir { display: flex; align-items: center; gap: 8px; padding: 9px 0; }
.olc-dilim-ad { width: 96px; flex-shrink: 0; letter-spacing: .02em; }
.olc-dilim-satir .vs-bar i { flex-basis: 0%; min-width: 0; }
.olc-dilim-deger { width: 84px; flex-shrink: 0; text-align: right; font-size: 12.5px; font-weight: 800; color: var(--ink2); font-variant-numeric: tabular-nums; }

@media (max-width: 420px) {
  .olc-dilim-ad { width: 78px; }
  .olc-cubuk-ad { width: 68px; }
}