/*
Finansman Hesaplayıcı (B14, 05-EK-OZELLIKLER-VE-REACT.md §B14) — buybox'ta fiyat kutusunun hemen
altında, vade seçim pilleri + anlık aylık taksit/toplam tutar. Markup: template-parts/components/
finansman-hesaplayici.php. Davranış: assets/js/finansman-hesaplayici.js. Token kullanımı zorunlu —
ham hex/px yok (dokunma hedefi yükseklikleri hariç, mevcut buybox/form bileşenleriyle aynı desen).
*/

.dga-finansman {
	margin-bottom: var(--space-3);
	padding: var(--space-2);
	background: var(--color-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-tab);
}

.dga-finansman__title {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	margin: 0 0 var(--space-2);
	font-size: 15px;
	font-weight: 700;
	color: var(--color-text);
}

.dga-finansman__icon {
	flex: none;
	stroke: var(--color-primary);
}

/* ---------- Vade seçim pilleri ---------- */
.dga-finansman__pills {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1);
	margin: 0 0 var(--space-2);
	padding: 0;
	border: none;
}

.dga-finansman__pill {
	position: relative;
	display: inline-flex;
}

.dga-finansman__pill input[type="radio"] {
	position: absolute;
	inset: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.dga-finansman__pill span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 40px; /* dokunma hedefi ~44px hedefiyle birlikte pill padding'i (aşağıda) tamamlar */
	padding: 0 var(--space-2);
	border-radius: var(--radius-pill);
	border: 1px solid var(--color-border-strong);
	background: var(--color-surface);
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 700;
	color: var(--color-text);
	transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}

.dga-finansman__pill input[type="radio"]:checked + span {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}

.dga-finansman__pill:hover span {
	border-color: var(--color-text-faint);
}

.dga-finansman__pill input[type="radio"]:checked:hover + span {
	border-color: var(--color-primary-hover);
	background: var(--color-primary-hover);
}

.dga-finansman__pill input[type="radio"]:focus-visible + span {
	outline: var(--focus-ring);
	outline-offset: var(--focus-ring-offset);
}

/* ---------- Sonuç (aylık taksit / toplam) ---------- */
.dga-finansman__result {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	padding: var(--space-2);
	background: var(--color-surface-alt);
	border-radius: var(--radius-tab);
}

.dga-finansman__result-row {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.dga-finansman__result-row--muted {
	opacity: 0.75;
}

.dga-finansman__result-label {
	font-size: 12px;
	color: var(--color-text-muted);
}

.dga-finansman__result-value {
	font-family: var(--font-mono);
	font-size: 20px;
	font-weight: 700;
	color: var(--color-primary);
}

.dga-finansman__result-row--muted .dga-finansman__result-value {
	font-size: 15px;
	color: var(--color-text);
}

.dga-finansman__note {
	margin: var(--space-1) 0 0;
	font-size: 12px;
	color: var(--color-text-faint);
}

/* ---------- Mobil ---------- */
@media (max-width: 480px) {
	.dga-finansman__result {
		flex-direction: column;
		gap: var(--space-1);
	}
}