/* ==========================================================================
   Desa Demir — Yerleşim: konteyner, grid, bölüm ritmi, ayraçlar
   ========================================================================== */

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

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

.container--wide {
  max-width: 92rem;
}

/* --------------------------------------------------------------------------
   Bölümler
   -------------------------------------------------------------------------- */

.section {
  padding-block: var(--section-y);
  position: relative;
}

.section--tight {
  padding-block: calc(var(--section-y) * 0.6);
}

.section--inset {
  background: var(--bg-inset);
}

.section--invert {
  background: var(--surface-invert);
  color: var(--text-invert);
}
.section--invert .h1,
.section--invert .h2,
.section--invert .h3,
.section--invert .h4 {
  color: var(--text-invert);
}
.section--invert .muted,
.section--invert .lede,
.section--invert .eyebrow {
  color: color-mix(in srgb, var(--text-invert) 66%, transparent);
}

/* Bölüm başlığı bloğu */
.section-head {
  display: grid;
  gap: var(--sp-4);
  margin-bottom: var(--sp-7);
  max-width: 52rem;
}

.section-head--split {
  max-width: none;
  grid-template-columns: 1fr;
  align-items: end;
}

@media (min-width: 56rem) {
  .section-head--split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: var(--sp-6) var(--sp-8);
  }
}

/* --------------------------------------------------------------------------
   Kesim yolu ayracı
   Bir bölümü diğerinden ayıran çizgi, lazerin izlediği yol gibi çizilir:
   pierce noktası → lead-in → kontur.
   -------------------------------------------------------------------------- */

.cut-rule {
  height: 1px;
  border: 0;
  background: var(--border);
  position: relative;
  overflow: visible;
}
.cut-rule::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  transform: translateY(-50%);
  background: var(--accent-hi);
  border-radius: 50%;
}

/* --------------------------------------------------------------------------
   Grid yardımcıları
   -------------------------------------------------------------------------- */

.grid {
  display: grid;
  gap: var(--sp-5);
}

.grid--2 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.grid--3 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.grid--4 {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
}

/* Yan yana: metin + görsel */
.split {
  display: grid;
  gap: var(--sp-6);
  align-items: center;
}
@media (min-width: 56rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--sp-8);
  }
  .split--wide-left {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  }
  .split--wide-right {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  }
}

.stack {
  display: grid;
  gap: var(--sp-4);
  justify-items: start;
}
.stack--center {
  justify-items: center;
  text-align: center;
}

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

/* --------------------------------------------------------------------------
   Teknik çizim kılavuzu
   Sadece hero ve makine parkında kullanılır: içeriğin ölçüldüğü yerlerde.
   -------------------------------------------------------------------------- */
.blueprint {
  position: relative;
  isolation: isolate;
}
.blueprint::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(to right, var(--rule) 1px, transparent 1px),
    linear-gradient(to bottom, var(--rule) 1px, transparent 1px);
  background-size: 4rem 4rem;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 78%);
}