.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--wide {
  max-width: var(--container-wide);
}

.container--narrow {
  max-width: 760px;
}

/* ─── Grid ──────────────────────────────────── */
.grid {
  display: grid;
  gap: var(--grid-gap);
}

.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.grid-auto {
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
}

.grid-auto-sm {
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}

/* ─── Flex ──────────────────────────────────── */
.flex         { display: flex; }
.flex-col     { display: flex; flex-direction: column; }
.flex-center  { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-wrap    { flex-wrap: wrap; }
.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }

/* ─── Sections ──────────────────────────────── */
.section {
  padding-block: var(--section-padding);
}

.section--sm {
  padding-block: clamp(2rem, 5vw, 4rem);
}

.section-header {
  margin-bottom: var(--space-12);
}

.section-header--row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: var(--space-12);
  gap: var(--space-4);
}

/* ─── Divider ───────────────────────────────── */
.divider {
  height: 1px;
  background: var(--color-border);
  border: none;
  margin-block: var(--space-8);
}

/* ─── Spacers ───────────────────────────────── */
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }

/* ─── Visibility ─────────────────────────────── */
.hidden { display: none !important; }
.invisible { visibility: hidden; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ─── Reveal animasyonu (IntersectionObserver) ── */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}

.reveal.revealed {
  opacity: 1;
  transform: translateY(0);
}

.reveal--delay-1 { transition-delay: 100ms; }
.reveal--delay-2 { transition-delay: 200ms; }
.reveal--delay-3 { transition-delay: 300ms; }
.reveal--delay-4 { transition-delay: 400ms; }

/* ─── Responsive ─────────────────────────────── */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 { grid-template-columns: 1fr; }

  .section-header--row {
    flex-direction: column;
    align-items: flex-start;
  }
}