/* ==========================================================================
   layout.css — container'lar, bölüm ritmi, grid yardımcıları (§1.3)
   ========================================================================== */

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: max(var(--container-pad), env(safe-area-inset-left));
}

/* İç içerik genişlikleri */
.wrap {
	max-width: var(--wrap-content);
	margin-inline: auto;
}

.wrap--article {
	max-width: var(--wrap-article);
}

.wrap--about {
	max-width: var(--wrap-about);
}

/* Sabit navbar'ın altından başlayan sayfa gövdesi */
.site-main {
	padding-top: calc(var(--nav-h) + 2.5rem);
	padding-bottom: var(--section-y);
}

.site-main--flush {
	padding-top: 0;
}

/* Bölüm dikey ritmi */
.section {
	padding-block: var(--section-y);
}

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

.section__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

/* Grid'ler — 3 sütun (tablet 2, mobil 1) */
.grid {
	display: grid;
	gap: 1.5rem;
	grid-template-columns: 1fr;
}

@media (min-width: 640px) {
	.grid--2,
	.grid--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.grid--3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Dikey yığın */
.stack {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.stack--sm {
	gap: .5rem;
}

.stack--lg {
	gap: 2rem;
}

/* Yatay sıra */
.row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem;
}