/* ==========================================================================
   UTILITIES.CSS — Tekrar kullanılabilir yardımcı sınıflar
   ========================================================================== */

.text-center { text-align: center; }
.text-accent { color: var(--color-accent-strong); }
.text-primary { color: var(--color-primary); }
.text-white { color: #fff; }
.text-muted { color: var(--ink-500); }

.flex { display: flex; }
.flex--center { align-items: center; justify-content: center; }
.flex--between { align-items: center; justify-content: space-between; }
.flex--wrap { flex-wrap: wrap; }
.flex--col { flex-direction: column; }
.gap-1 { gap: 8px; }
.gap-2 { gap: 16px; }
.gap-3 { gap: 24px; }

.mt-1 { margin-top: 8px; }
.mt-2 { margin-top: 16px; }
.mt-3 { margin-top: 24px; }
.mt-4 { margin-top: 32px; }
.mt-5 { margin-top: 48px; }
.mb-2 { margin-bottom: 16px; }
.mb-3 { margin-bottom: 24px; }

.hidden { display: none !important; }

.bg-surface { background: var(--surface-100); }
.bg-support { background: var(--color-support); }

.max-w-prose { max-width: 65ch; }

.icon {
  width: 22px; height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--lg { width: 28px; height: 28px; }
.icon--sm { width: 16px; height: 16px; }

.visually-hidden-focusable:not(:focus) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0);
}

.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin-block: var(--space-5);
}

.lazy-img {
  background: var(--surface-200);
}