/* ==========================================================================
   Destekçi için — "sevdiğim için ne yapabilirim" diye gelen kişiye
   ========================================================================== */

.destekci { background: var(--renk-zemin-2); }

.destekci .bolum__baslik {
  font-family: var(--yazi-soz);
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* ── Araçlar — bento düzeni, eşit kutu değil ─────────────────────────────── */

.araclar {
  display: grid;
  gap: var(--bosluk-s);
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4rem);
}

@media (min-width: 58rem) {
  .araclar {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
    gap: var(--bosluk-m);
  }
  .arac--genis { grid-row: 1 / span 2; }
}

.arac {
  display: flex;
  flex-direction: column;
  padding: clamp(1.25rem, 0.9rem + 1.6vw, 2.25rem);
  border: 1px solid var(--renk-cizgi-koyu);
  border-radius: var(--yuvarlak-kart) var(--yuvarlak-s) var(--yuvarlak-kart) var(--yuvarlak-kart);
  background: var(--renk-yuzey);
  box-shadow: var(--golge-1);
}

.arac--genis {
  justify-content: center;
  border-radius: 3rem var(--yuvarlak-kart) var(--yuvarlak-kart) var(--yuvarlak-kart);
  background: linear-gradient(
    195deg,
    var(--renk-birincil-acik) 0%,
    var(--renk-yuzey) 55%
  );
  border-color: color-mix(in oklab, var(--renk-birincil) 32%, transparent);
}

.arac__rozet {
  align-self: flex-start;
  margin-bottom: var(--bosluk-s);
  padding: 0.22rem 0.55rem 0.26rem;
  border-radius: var(--yuvarlak-xs);
  background: var(--renk-birincil);
  color: var(--renk-yuzey);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  line-height: 1.3;
}

.arac__rozet--acik {
  background: var(--renk-dikkat);
  color: var(--renk-dikkat-uzeri);
}

.arac__baslik {
  margin-bottom: var(--bosluk-2xs);
  font-family: var(--yazi-soz);
  font-weight: 400;
  letter-spacing: -0.02em;
}

.arac--genis .arac__baslik { font-size: var(--ol-dev); line-height: 1.15; }

.arac__ozet { color: var(--renk-ikincil); }
.arac--genis .arac__ozet { font-size: var(--ol-govde-buyuk); max-width: 30rem; }

.arac__sinir {
  margin-top: var(--bosluk-s);
  padding-top: var(--bosluk-s);
  border-top: 1px dashed var(--renk-cizgi-koyu);
  font-size: var(--ol-mini);
  color: var(--renk-ikincil);
}

/* ── Simetri kuralı ──────────────────────────────────────────────────────── */

.simetri {
  margin-top: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
  padding: clamp(1.75rem, 1rem + 3vw, 3.5rem) clamp(1.25rem, 0.8rem + 2.5vw, 3.5rem);
  border-radius: var(--yuvarlak-kart);
  background: var(--renk-metin-koyu);
  color: oklch(88% 0.012 80);
  box-shadow: var(--golge-2);
}

.simetri__soz {
  max-width: 26ch;
  margin-bottom: var(--bosluk-s);
  font-family: var(--yazi-soz);
  font-size: var(--ol-dev);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -0.028em;
  color: var(--renk-zemin);
}

.simetri__aciklama {
  max-width: 46rem;
  font-size: var(--ol-kucuk);
}

/* ── Sınırlar ────────────────────────────────────────────────────────────── */

.sinirlar {
  display: grid;
  gap: var(--bosluk-m);
  margin-top: clamp(2rem, 1.2rem + 3vw, 3.5rem);
}

@media (min-width: 50rem) {
  .sinirlar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-l); }
}

.sinirlar li {
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-3xs);
  padding-top: var(--bosluk-s);
  border-top: 2px solid var(--renk-cizgi-koyu);
}

.sinirlar b {
  font-family: var(--yazi-soz);
  font-size: clamp(1.75rem, 1.3rem + 1.8vw, 2.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--renk-birincil);
}

.sinirlar span {
  font-size: var(--ol-kucuk);
  color: var(--renk-ikincil);
}