/* ============================================
	ET Barber - Responsive Stiller
	Mobile-First Yaklaşım
	Breakpoints: 480, 640, 768, 1024, 1280
	============================================ */

/* Mobil varsayılan zaten main.css ve components.css'te tanımlı */

/* --- 480px: Küçük Mobil → Mobil --- */
@media (min-width: 480px) {
	:root {
		--container-padding: var(--space-6);
	}
}

/* --- 640px: Mobil → Tablet arası --- */
@media (min-width: 640px) {
	.hero h1 {
		font-size: 3.5rem;
	}
}

/* --- 768px: Tablet --- */
@media (min-width: 768px) {
	:root {
		--container-padding: var(--space-8);
	}

	.section {
		padding-top: var(--space-24);
		padding-bottom: var(--space-24);
	}

	/* İki kolona dönen yapılar */
	.about-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-16);
		align-items: center;
	}

	/* İletişim formu */
	.contact-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-8);
	}

	/* Hizmet fiyat tablosu */
	.services-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* --- 1024px: Küçük Desktop --- */
@media (min-width: 1024px) {
	/* Navbar masaüstü */
	.navbar-menu {
		display: flex;
	}

	.navbar-toggle {
		display: none;
	}

	.navbar-cta {
		display: inline-flex;
	}

	/* Hizmetler 3 kolon */
	.services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Galeri 3 kolon */
	.gallery-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Ekip 4 kolon */
	.team-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Rezervasyon formu yan yana */
	.reservation-layout {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
	}
}

/* --- 1280px: Büyük Desktop --- */
@media (min-width: 1280px) {
	:root {
		--container-max: 1280px;
	}
}