<svg viewBox="0 0 120 120" class="donut-chart">
  <!-- Arka plan ring -->
  <circle cx="60" cy="60" r="45"
    fill="none" stroke="var(--border)" stroke-width="18"/>
  <!-- Veri dilimi — stroke-dasharray: circumference = 2πr ≈ 283 -->
  <circle cx="60" cy="60" r="45"
    fill="none"
    stroke="var(--accent)"
    stroke-width="18"
    stroke-dasharray="190 93"   /* %67 doluluk */
    stroke-dashoffset="70.75"  /* -90deg start */
    stroke-linecap="round"
    transform="rotate(-90 60 60)"
  />
  <!-- Center text -->
  <text x="60" y="65" text-anchor="middle"
    font-family="var(--font-display)" font-size="18" fill="var(--text)">67%</text>
</svg>