/**
 * Has Scroll Back to Top — Frontend Styles
 * Dinamik değerler (renk, boyut, konum) wp_add_inline_style ile eklenir.
 */

#has-sbtt-btn {
	/* Konum */
	position: fixed;
	bottom: 30px;
	z-index: 9999;

	/* Görünürlük — JS tarafından yönetilir */
	opacity: 0;
	visibility: hidden;
	transform: translateY(12px);

	/* Kutu modeli */
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	outline: none;

	/* Renk — dinamik olarak CSS değişkenleriyle atanır */
	background-color: var(--sbtt-bg, #333333);
	color: var(--sbtt-arrow, #ffffff);

	/* Gölge */
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);

	/* Geçiş animasyonları */
	transition:
		opacity      0.35s ease,
		visibility   0.35s ease,
		transform    0.35s ease,
		box-shadow   0.25s ease,
		background-color 0.25s ease;

	/* Erişilebilirlik: odak halkası */
	-webkit-tap-highlight-color: transparent;
}

/* Görünür durum — JS tarafından eklenir */
#has-sbtt-btn.has-sbtt-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Hover */
#has-sbtt-btn:hover {
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.26);
	filter: brightness(0.88);
}

/* Active / tıklama */
#has-sbtt-btn:active {
	transform: translateY(2px) scale(0.96);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.16);
}

/* Odak (klavye erişilebilirliği) */
#has-sbtt-btn:focus-visible {
	outline: 3px solid var(--sbtt-bg, #333333);
	outline-offset: 3px;
}

/* SVG ok — rengi butonun color değerinden (--sbtt-arrow) gelir */
#has-sbtt-btn svg {
	display: block;
	stroke: currentColor;
	pointer-events: none;
}

/* Küçük ekranlarda biraz kenara yaklaştır */
@media (max-width: 480px) {
	#has-sbtt-btn {
		bottom: 20px;
	}

	/* right / left değerlerini inline CSS geçersiz kılar;
	   burada sadece varsayılan sağ konumu düzeltiriz */
	#has-sbtt-btn[style*="right"] {
		right: 16px !important;
	}

	#has-sbtt-btn[style*="left"] {
		left: 16px !important;
	}
}