/* Sayfa iskeleti: container, section aralıkları, koyu/açık zemin yardımcıları, temel grid. */

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

.pg-section {
  padding-block: var(--pg-gap-6);
}

.pg-section--tight {
  padding-block: var(--pg-gap-4);
}

/* Zemin varyantları */
.pg-surface {
  background: var(--pg-surface);
  color: var(--pg-ink);
}

.pg-surface-2 {
  background: var(--pg-surface-2);
  color: var(--pg-ink);
}

.pg-space {
  background: var(--pg-space);
  color: var(--pg-on-space);
}

.pg-space-deep {
  background: radial-gradient(120% 100% at 50% 0%, var(--pg-space-2) 0%, var(--pg-space-deep) 60%);
  color: var(--pg-on-space);
}

/* Basit responsive grid yardımcıları */
.pg-grid {
  display: grid;
  gap: var(--pg-gap-3);
}

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

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

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

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

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

.pg-stack {
  display: flex;
  flex-direction: column;
  gap: var(--pg-gap-3);
}

.pg-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--pg-gap-2);
}

main {
  display: block;
  /* Header artık sabit (fixed) konumlandığı için akıştan çıkıyor; içerik onun
     altında başlasın diye burada telafi ediyoruz. Koyu hero'lar zemini header'ın
     arkasına doğru uzatmak için bunu kendi negatif üst boşluklarıyla iptal eder. */
  padding-top: var(--pg-header-h);
}

body {
  min-height: 100dvh;
  overflow-x: hidden;
}