/*
Ortak buton bileşenleri — 01-TASARIM-SISTEMI.md §8 ("Buton" satırı) + §4 (radius hiyerarşisi)
+ §6 (hover: renk koyulaşma --color-primary-hover + translateY(-2px)).
Tek aksan kuralı (§2): tüm varyantlar hover'da kırmızıya döner — mor/gradient YOK.
Token kullanımı zorunlu — ham hex/px yok.
*/

.dga-btn,
.dga-btn--primary,
.dga-btn--outline,
.dga-btn--ghost-light {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-1);
	min-height: 44px; /* dokunma hedefi ≥44px — 01-TASARIM-SISTEMI.md §10 / WCAG 2.5.8 */
	padding: var(--space-1) var(--space-3);
	border-radius: var(--radius-pill);
	font-family: var(--font-sans);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	border: 1px solid transparent;
	transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}

/* .dga-btn / .dga-btn--primary — kırmızı pill (CTA varsayılan). İkisi aynı görünüm: bazı
   bileşenler (hero-slider/campaign-banner/blog-newsletter) markup'ta "dga-btn dga-btn--primary"
   birlikte kullanıyor (isim netliği için), bazıları yalnızca "dga-btn" — ikisi de burada
   tanımlı olduğundan hangisi tek başına kullanılırsa kullanılsın stil eksiksiz gelir. */
.dga-btn,
.dga-btn--primary {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}
.dga-btn:hover,
.dga-btn:focus-visible,
.dga-btn--primary:hover,
.dga-btn--primary:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	transform: translateY(-2px);
}

/* .dga-btn--outline — antrasit çerçeve pill (açık zeminde ikincil aksiyon) */
.dga-btn--outline {
	background: transparent;
	border-color: var(--color-text);
	color: var(--color-text);
}
.dga-btn--outline:hover,
.dga-btn--outline:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-surface);
	transform: translateY(-2px);
}

/* .dga-btn--ghost-light — koyu zeminde beyaz çerçeve (hero, servis bloğu, banner) */
.dga-btn--ghost-light {
	background: transparent;
	border-color: var(--color-surface);
	color: var(--color-surface);
}
.dga-btn--ghost-light:hover,
.dga-btn--ghost-light:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--color-surface);
	transform: translateY(-2px);
}

/* .dga-btn-circle — daire ikon buton ("+", ok, zoom vb.) */
.dga-btn-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 44px;  /* dokunma hedefi ≥44px — 01-TASARIM-SISTEMI.md §10 */
	height: 44px;
	border-radius: var(--radius-icon);
	background: var(--color-primary);
	border: 1px solid var(--color-primary);
	color: var(--color-surface);
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--transition), border-color var(--transition), transform var(--transition);
}
.dga-btn-circle:hover,
.dga-btn-circle:focus-visible {
	background: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	transform: translateY(-2px);
}
.dga-btn-circle svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	stroke-width: 2px;
	fill: none;
}

/* Koyu zeminde daire buton (ör. parça bulucu zoom kontrolleri banner üstünde) */
.dga-btn-circle--on-dark {
	background: transparent;
	border-color: var(--color-surface);
	color: var(--color-surface);
}
.dga-btn-circle--on-dark:hover,
.dga-btn-circle--on-dark:focus-visible {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--color-surface);
}