/* =========================================================
   RESPONSIVE.CSS - Mobil/tablet override'ları
   TÜM diğer CSS dosyalarından SONRA yüklenir.
   ========================================================= */

@media (max-width: 960px) {
	.radio-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}

	.footer-widgets-row {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

@media (max-width: 720px) {
	:root {
		--header-height: 64px;
	}

	.site-branding-row {
		flex-wrap: wrap;
		height: auto;
		padding-block: var(--space-sm);
		gap: var(--space-sm);
	}

	.primary-menu-list {
		gap: var(--space-md);
		order: 3;
		width: 100%;
	}

	.header-actions {
		margin-left: 0;
	}

	.header-search .search-field {
		min-width: 0;
		width: 90px;
	}

	.radio-grid {
		grid-template-columns: repeat(3, 1fr);
		gap: var(--space-sm);
	}

	.radio-groups-list,
	.radio-subcategories-list {
		grid-template-columns: 1fr 1fr;
	}

	.city-full-list {
		grid-template-columns: repeat(2, 1fr);
	}

	.section-title {
		font-size: var(--fs-lg);
	}

	.slider-track > * {
		width: 110px;
	}
}

@media (max-width: 420px) {
	.radio-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.city-full-list {
		grid-template-columns: 1fr 1fr;
	}
}