/* ==========================================================================
   layout.css — Container, grid, section, utility layout sınıfları
   ========================================================================== */

/* ----- Container ---------------------------------------------------------
   Default: tam genişlik, fluid padding (clamp 16-64px). Header, footer ve
   section'lar hep aynı düzen. Uzun yazı içeren sayfalar `--narrow` ile 720px
   sınırına alınır (tek blog yazısı, üretici bio gibi).
   ------------------------------------------------------------------------- */
.container {
	width: 100%;
	margin-inline: auto;
	padding-inline: clamp(1rem, 3.5vw, 4rem);
}

.container--narrow {
	max-width: var(--content-max);
	padding-inline: var(--container-pad);
}

/* Eski max-width kullanımını isteyen yerler için; section'lar için kullanılmaz */
.container--bound {
	max-width: var(--container-max);
}

/* ----- Section ----------------------------------------------------------- */
.section {
	padding-block: var(--section-py);
}

@media (min-width: 768px) {
	.section {
		padding-block: var(--section-py-lg);
	}
}

.section--tight   { padding-block: var(--space-7); }
.section--flush   { padding-block: 0; }

.section--cream   { background-color: var(--brand-cream); }
.section--white   { background-color: var(--brand-white); }
.section--dark    { background-color: var(--brand-dark); color: var(--brand-cream); }
.section--dark h1, .section--dark h2, .section--dark h3,
.section--dark h4, .section--dark h5, .section--dark h6 {
	color: var(--brand-cream);
}

/* Section header — başlık + lede + opsiyonel CTA */
.section__header {
	margin-bottom: var(--space-7);
	max-width: 48rem;
}

.section__header--center {
	margin-inline: auto;
	text-align: center;
}

.section__header--with-action {
	display: flex;
	flex-wrap: wrap;
	align-items: end;
	justify-content: space-between;
	gap: var(--space-5);
	max-width: 100%;
}

.section__title {
	margin-bottom: var(--space-3);
}

.section__lede {
	font-size: var(--text-lg);
	color: var(--brand-muted);
	line-height: var(--lh-snug);
	margin: 0;
}

/* ----- Grid -------------------------------------------------------------- */
.grid {
	display: grid;
	gap: var(--space-5);
}

.grid--gap-sm  { gap: var(--space-3); }
.grid--gap-md  { gap: var(--space-5); }
.grid--gap-lg  { gap: var(--space-7); }

/* Sütun varyantları — mobile single, sonra responsive */
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }
.grid--4 { grid-template-columns: repeat(2, 1fr); }

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

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

/* ----- Stack & cluster (flex utilities) --------------------------------- */
.stack {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}

.stack--sm { gap: var(--space-2); }
.stack--md { gap: var(--space-4); }
.stack--lg { gap: var(--space-6); }

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

/* ----- Two-column hero / split ------------------------------------------ */
.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-7);
	align-items: center;
}

@media (min-width: 768px) {
	.split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-9);
	}
	.split--reverse > :first-child { order: 2; }
}

/* ----- Aspect ratio yardımcıları ---------------------------------------- */
.ratio {
	position: relative;
	overflow: hidden;
	background-color: var(--brand-border);
}

.ratio > img,
.ratio > video,
.ratio > picture > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.ratio--1\/1 { aspect-ratio: 1 / 1; }
.ratio--4\/3 { aspect-ratio: 4 / 3; }
.ratio--3\/4 { aspect-ratio: 3 / 4; }
.ratio--16\/9 { aspect-ratio: 16 / 9; }
.ratio--3\/2 { aspect-ratio: 3 / 2; }