/* ============================================================
   DOSYA SORUMLULUGU — features-17-donut-chart.css
   ------------------------------------------------------------
   NE YAPAR   : Gunluk makro halka grafigi.
   KAYNAK     : v3.12.0'da bolundu — kurallar birebir tasindi,
                hicbir kural yeniden yazilmadi veya siralanmadi.
   SIRA       : index.html'deki <link> sirasi kaskadi belirler.
                Bu dosyanin sirasini DEGISTIRME.
   ------------------------------------------------------------
   Tam dosya listesi ve sira: BAGIMLILIK-HARITASI.md
   ============================================================ */

/* ============================================================
   DONUT CHART
   ============================================================ */
.donut-wrap {
  display: flex;
  align-items: center;
  gap: 18px;
  flex: 1;
}
.donut-canvas { flex-shrink: 0; }
.donut-legend {
  flex: 1;
  display: flex;
  align-items: center;
}
.donut-leg-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.donut-leg-table td {
  padding: 5px 0;
  white-space: nowrap;
  vertical-align: middle;
}
.donut-leg-table td.leg-name { padding-left: 6px; color: var(--text2); font-weight: 600; width: 100%; font-size: 13px; }
.donut-leg-table td.leg-val  { text-align: right; font-weight: 800; color: var(--text); padding-right: 5px; font-family: 'JetBrains Mono', monospace; font-size: 13px; }
.donut-leg-table td.leg-diff { text-align: right; font-weight: 700; font-size: 12px; font-family: 'JetBrains Mono', monospace; }
.donut-leg-diff.good { color: var(--success); }
.donut-leg-diff.bad  { color: var(--danger); }
.donut-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}
.donut-leg-name { font-size: 12px; color: var(--text2); font-weight: 500; flex: 1; }
.donut-leg-val  { font-size: 12px; font-weight: 700; color: var(--text); }
.donut-leg-diff { font-size: 11px; font-weight: 600; margin-left: 4px; }
.donut-leg-diff.good { color: var(--success); }
.donut-leg-diff.bad  { color: var(--danger); }