/*
Bayi / Servis Noktası Bulucu — 05-EK-OZELLIKLER-VE-REACT.md §B8.
page-templates/bayi-bulucu.php ile eşleşir. Sayfa üst bloğu (kicker + H1 + özet + il
filtresi) sss.css'deki .dga-sss-page__header deseniyle tutarlı; kanal ikonları/link
stilleri iletisim.css'deki .dga-contact-channel deseninden esinlenildi (kopyalanmadı —
kendi .dga-bb-card sınıfı).
Token kullanımı zorunlu — ham hex/px yok (01-TASARIM-SISTEMI.md §1).
*/

/* =====================================================================
 * 1. Sayfa üst bloğu — kicker + H1 + özet + il filtresi
 * ===================================================================== */
.dga-bb-page__header {
	padding-block: var(--space-6) var(--space-4);
	text-align: center;
}

.dga-bb-page__title {
	margin-bottom: var(--space-2);
}

.dga-bb-page__ozet {
	max-width: 640px;
	margin: 0 auto;
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-text-muted);
}

.dga-bb-page__body {
	padding-bottom: var(--space-8);
}

/* ---------- İl filtresi ---------- */
.dga-bb-filter {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-top: var(--space-3);
}

.dga-bb-filter__label {
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text);
}

.dga-bb-filter__select {
	min-height: 44px; /* dokunma hedefi ≥44px — §10 / WCAG 2.5.8 */
	padding: 0 var(--space-4) 0 var(--space-2);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-input);
	background:
		var(--color-surface)
		url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c1b1b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E")
		no-repeat right 12px center / 16px 16px;
	appearance: none;
	font-family: var(--font-sans);
	font-size: 14px;
	color: var(--color-text);
	cursor: pointer;
	transition: border-color var(--transition);
}
.dga-bb-filter__select:hover {
	border-color: var(--color-text-faint);
}
.dga-bb-filter__select:focus-visible {
	border-color: var(--color-primary);
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* =====================================================================
 * 2. Boş / sonuçsuz durumlar
 * ===================================================================== */
.dga-bb-empty,
.dga-bb-no-results {
	max-width: 480px;
	margin: var(--space-4) auto 0;
	padding: var(--space-3);
	text-align: center;
	background: var(--color-surface-alt);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab);
	color: var(--color-text-muted);
	font-size: 14px;
}

/* =====================================================================
 * 3. Kart listesi
 * ===================================================================== */
.dga-bb-list {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-3);
	margin-top: var(--space-4);
}
@media (min-width: 640px) {
	.dga-bb-list {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (min-width: 1024px) {
	.dga-bb-list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.dga-bb-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	padding: var(--space-3);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-tab); /* kartlar köşeli — §4 radius hiyerarşisi */
}

.dga-bb-card__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--space-1);
}

.dga-bb-card__ad {
	font-size: 17px;
	font-weight: 800;
	color: var(--color-text);
}

.dga-bb-card__badge {
	flex: none;
	padding: 2px var(--space-1);
	border-radius: var(--radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	white-space: nowrap;
	background: var(--color-primary-soft);
	color: var(--color-primary-hover);
}
.dga-bb-card__badge--servis {
	background: var(--color-surface-alt);
	color: var(--color-text-muted);
}

.dga-bb-card__il {
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-faint);
}

.dga-bb-card__adres {
	display: flex;
	align-items: flex-start;
	gap: var(--space-1);
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-text-muted);
}

.dga-bb-card__telefon {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	font-size: 14px;
	font-weight: 600;
	color: var(--color-text);
	text-decoration: none;
	transition: color var(--transition);
}
.dga-bb-card__telefon:hover,
.dga-bb-card__telefon:focus-visible {
	color: var(--color-primary);
}

.dga-bb-card__icon {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	color: var(--color-text-faint);
}
.dga-bb-card__icon svg {
	width: 16px;
	height: 16px;
}

.dga-bb-card__harita {
	align-self: flex-start;
	margin-top: var(--space-1);
}
.dga-bb-card__harita svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2px;
	fill: none;
}