/* ===========================================================================
 * Yerlesim katmani — kapsayici, izgara, bolum ritmi
 * ======================================================================== */

@layer layout {

/* ---------------------------------------------------------------------------
 * Kapsayicilar
 * ------------------------------------------------------------------------ */

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

.container        { max-width: calc(var(--container) + var(--gutter) * 2); }
.container-wide   { max-width: calc(var(--container-wide) + var(--gutter) * 2); }
.container-narrow { max-width: calc(var(--container-narrow) + var(--gutter) * 2); }

/* ---------------------------------------------------------------------------
 * Bolum ritmi
 * ------------------------------------------------------------------------ */

.section     { padding-block: var(--section-y); }
.section--lg { padding-block: var(--section-y-lg); }
.section--sm { padding-block: var(--section-y-sm); }
.section--top-rule { border-block-start: var(--border-hair); }

/* Tam genislik bant — kapsayicidan tasar */
.bleed {
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

/* ---------------------------------------------------------------------------
 * 12 kolon izgara — asimetrik yerlesimlerin temeli
 * ------------------------------------------------------------------------ */

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--gutter);
}

@media (max-width: 62rem) {
  .grid-12 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (max-width: 40rem) {
  .grid-12 { grid-template-columns: minmax(0, 1fr); }
  .grid-12 > * { grid-column: 1 / -1 !important; }
}

/* ---------------------------------------------------------------------------
 * Cizgili izgara — ayrim gap'ten DEGIL, hairline'dan gelir.
 * Hizmet katalogu ve deger izgarasinin temeli. Surekli cetvelli bir tablo
 * gorunumu uretir; kart-golge estetiginin tam tersi.
 * ------------------------------------------------------------------------ */

.ruled-grid {
  display: grid;
  gap: 0;
  border-block-start: var(--border-hair);
}

.ruled-grid > * {
  border-block-end: var(--border-hair);
}

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

/* Kolon araligindaki dikey cizgiler */
.ruled-grid--3 > *:not(:nth-child(3n + 1)),
.ruled-grid--2 > *:not(:nth-child(2n + 1)) {
  border-inline-start: var(--border-hair);
}

@media (max-width: 62rem) {
  .ruled-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ruled-grid--3 > * { border-inline-start: 0; }
  .ruled-grid--3 > *:not(:nth-child(2n + 1)) { border-inline-start: var(--border-hair); }
}

@media (max-width: 44rem) {
  .ruled-grid--3,
  .ruled-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .ruled-grid--3 > *,
  .ruled-grid--2 > * { border-inline-start: 0; }
}

/* ---------------------------------------------------------------------------
 * Cizgili satirlar — ekip listesi, blog indeksi, SSS
 * ------------------------------------------------------------------------ */

.ruled-rows { border-block-start: var(--border-hair); }
.ruled-rows > * { border-block-end: var(--border-hair); }

/* ---------------------------------------------------------------------------
 * Iki kolonlu icerik + yan ray (hizmet detayi, uzman detayi)
 * ------------------------------------------------------------------------ */

.with-rail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 20rem;
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: start;
}

.with-rail--left {
  grid-template-columns: 21rem minmax(0, 1fr);
}

.rail {
  position: sticky;
  top: calc(var(--header-h) + var(--s-6));
}

@media (max-width: 62rem) {
  .with-rail,
  .with-rail--left { grid-template-columns: minmax(0, 1fr); }
  .rail { position: static; }
  .with-rail--left > .rail { order: -1; }
}

/* ---------------------------------------------------------------------------
 * Yigin — dikey ritim yardimcisi
 * ------------------------------------------------------------------------ */

.stack > * + * { margin-block-start: var(--stack-gap, var(--s-4)); }
.stack-2  { --stack-gap: var(--s-2); }
.stack-3  { --stack-gap: var(--s-3); }
.stack-5  { --stack-gap: var(--s-5); }
.stack-6  { --stack-gap: var(--s-6); }
.stack-8  { --stack-gap: var(--s-8); }
.stack-10 { --stack-gap: var(--s-10); }
.stack-12 { --stack-gap: var(--s-12); }

/* ---------------------------------------------------------------------------
 * Satir — yatay dizilim
 * ------------------------------------------------------------------------ */

.row {
  display: flex;
  align-items: center;
  gap: var(--row-gap, var(--s-4));
  flex-wrap: wrap;
}

.row--between { justify-content: space-between; }
.row--end     { justify-content: flex-end; }
.row--top     { align-items: flex-start; }
.row--baseline{ align-items: baseline; }
.row--tight   { --row-gap: var(--s-2); }
.row--loose   { --row-gap: var(--s-6); }
.row--nowrap  { flex-wrap: nowrap; }

}