/* ============================================================
   UTILITIES — Tek amaçlı helper class'ları.
   Component CSS'lerinde tekrar etmek yerine bunları kullan.
   ============================================================ */

/* Display */
.hidden        { display: none !important; }
.block         { display: block; }
.inline-block  { display: inline-block; }
.flex          { display: flex; }
.inline-flex   { display: inline-flex; }
.grid          { display: grid; } /* Not: layout.css'teki .grid bu utility ile uyumlu */

/* Flex helpers */
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-center  { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }

/* Text */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* Rehber: başlık/eyebrow için uppercase + tracking-wider */
.uppercase    {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.uppercase-tight  {
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
}
.lowercase    { text-transform: lowercase; }
.italic       { font-style: italic; }

/* Renk varyantları */
.text-muted   { color: var(--color-text-muted); }
.text-heading { color: var(--color-heading); }
.text-accent  { color: var(--color-accent); }

/* Eyebrow / küçük etiket — rehberde sık kullanılan pattern */
.eyebrow {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  color: var(--color-text-muted);
  font-weight: var(--weight-medium);
}

/* Font weight */
.font-light    { font-weight: var(--weight-light); }
.font-regular  { font-weight: var(--weight-regular); }
.font-medium   { font-weight: var(--weight-medium); }
.font-semibold { font-weight: var(--weight-semibold); }
.font-bold     { font-weight: var(--weight-bold); }

/* Width */
.w-full      { width: 100%; }
.max-w-prose { max-width: 65ch; }

/* Position */
.relative { position: relative; }
.absolute { position: absolute; }
.sticky   { position: sticky; }

/* Background variants */
.bg-alt    { background: var(--color-bg-alt); }
.bg-accent { background: var(--color-accent); color: var(--color-accent-ink); }

/* Accessibility */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Aspect ratio — rehber: 16:9, 4:3, 3:2 tutarlılığı */
.aspect-square    { aspect-ratio: 1 / 1; }
.aspect-video     { aspect-ratio: 16 / 9; }
.aspect-photo     { aspect-ratio: 4 / 3; }
.aspect-classic   { aspect-ratio: 3 / 2; }
.aspect-portrait  { aspect-ratio: 3 / 4; }

/* Object fit */
.object-cover   { object-fit: cover; }
.object-contain { object-fit: contain; }