/**
 * Component: Button
 * 2 tip: Primary (sade), Secondary (alt çizgi)
 * Layout: icon_text, text_icon, icon_text_stack, text_icon_stack
 *
 * @package Alpaya_x_Retodi
 */

/* ==========================================================================
   Base
   ========================================================================== */
.btn {
	border-radius: 0;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	transition: all 0.3s cubic-bezier(0.2, 0, 0.2, 1);
	border: none;
	background: none;
	font-size: 1rem;
	padding: 0.75rem 1.5rem;
	position: relative;
	font-family: inherit;
	text-decoration: none;
}

.btn:hover,
.btn:focus {
	text-decoration: none;
}

.btn:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.btn__content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.625rem;
	z-index: 3;
	position: relative;
}

.btn__icon {
	flex-shrink: 0;
}

/* Stack layouts: alt alta */
.btn--icon-text-stack .btn__content,
.btn--text-icon-stack .btn__content {
	flex-direction: column;
	gap: 0.25rem;
}

/* ==========================================================================
   Primary - Sade & Beyaz (border + arka plan)
   ========================================================================== */
.btn--primary {
	background-color: var(--btn-primary-bg, #ffffff);
	border: 1px solid var(--btn-primary-border, #ddd);
	color: var(--btn-primary-text, #333);
}

.btn--primary:hover {
	background-color: var(--btn-primary-bg-hover, #f5f5f5);
	border-color: var(--btn-primary-border-hover, #bbb);
}

/* ==========================================================================
   Secondary - Underline (alt çizgi hover)
   ========================================================================== */
.btn--secondary {
	flex-direction: column;
	color: var(--btn-secondary-text, #222);
	padding: 0.625rem 1rem;
}

.btn--secondary::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 2px;
	background-color: var(--btn-secondary-underline, #222);
	transition: width 0.3s ease;
}

.btn--secondary:hover::after {
	width: 100%;
}