/* ==========================================================================
   Yan Butonlar - Frontend
   ========================================================================== */

.ynb2-wrap {
	--ynb2-icon: 52px;
	position: static;
	font-family: inherit;
}

.ynb2-btn {
	position: fixed;
	z-index: var(--ynb2-z, 99999);

	/* Varsayılan: alttan ölç */
	bottom: var(--ynb2-pos, 22%);
	transform: translateY(50%);

	display: flex;
	align-items: center;
	gap: 12px;

	padding: 8px;
	border-radius: var(--ynb2-radius, 60px);
	text-decoration: none !important;
	line-height: 1.25;
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
	transition: box-shadow .25s ease, transform .25s ease, padding .25s ease;
	-webkit-tap-highlight-color: transparent;
	will-change: transform;
}

/* Üstten ölçüm modu */
.ynb2-anchor-top .ynb2-btn {
	bottom: auto;
	top: var(--ynb2-pos, 22%);
	transform: translateY(-50%);
}

.ynb2-btn:hover,
.ynb2-btn:focus-visible {
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
	transform: translateY(50%) scale(1.03);
	text-decoration: none !important;
}

.ynb2-anchor-top .ynb2-btn:hover,
.ynb2-anchor-top .ynb2-btn:focus-visible {
	transform: translateY(-50%) scale(1.03);
}

/* --- Konumlar ------------------------------------------------------------ */
.ynb2-left {
	left: var(--ynb2-offset, 0px);
	background: var(--ynb2-left-bg, #1F0938) !important;
	color: var(--ynb2-left-fg, #fff) !important;
	padding-right: 22px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
}

.ynb2-right {
	right: var(--ynb2-offset, 0px);
	background: var(--ynb2-right-bg, #82BB26) !important;
	color: var(--ynb2-right-fg, #fff) !important;
	padding-left: 22px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* --- İkon ---------------------------------------------------------------- */
.ynb2-icon {
	position: relative;
	flex: 0 0 auto;
	width: var(--ynb2-icon);
	height: var(--ynb2-icon);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* İkon diski (halkaların üstünde durur) */
.ynb2-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	z-index: 1;
}

.ynb2-icon .ynb2-svg {
	position: relative;
	z-index: 2;
	width: 55%;
	height: 55%;
	color: currentColor;
	display: block;
}

/* WhatsApp glifi biraz daha büyük dursun */
.ynb2-icon .ynb2-svg-wa {
	width: 64%;
	height: 64%;
}

/* --- Nabız (pulse) halkaları --------------------------------------------- */
.ynb2-ring {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: currentColor;
	opacity: 0;
	z-index: 0;
	pointer-events: none;
}

.ynb2-pulse-on .ynb2-ring {
	animation: ynb2-pulse var(--ynb2-pulse-speed, 2s) cubic-bezier(.4, 0, .2, 1) infinite;
}

.ynb2-pulse-on .ynb2-ring-2 {
	animation-delay: calc(var(--ynb2-pulse-speed, 2s) / 2);
}

/* İkonun kendisi de hafifçe nefes alsın */
.ynb2-pulse-on .ynb2-svg {
	animation: ynb2-breathe var(--ynb2-pulse-speed, 2s) ease-in-out infinite;
	transform-origin: center;
}

@keyframes ynb2-pulse {
	0%   { transform: scale(1);   opacity: .45; }
	70%  { transform: scale(1.9); opacity: 0; }
	100% { transform: scale(1.9); opacity: 0; }
}

@keyframes ynb2-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.12); }
}

/* --- Yazılar ------------------------------------------------------------- */
.ynb2-text {
	display: flex;
	flex-direction: column;
	white-space: nowrap;
}

/* Tema renklerini ez - yazılar butonun rengini miras alsın */
.ynb2-btn,
.ynb2-btn:link,
.ynb2-btn:visited,
.ynb2-btn:hover,
.ynb2-btn:active,
.ynb2-btn:focus { text-decoration: none !important; }

.ynb2-text,
.ynb2-title,
.ynb2-sub,
.ynb2-icon .ynb2-svg { color: inherit !important; }

.ynb2-right .ynb2-text {
	align-items: flex-end;
	text-align: right;
}

.ynb2-title {
	font-size: var(--ynb2-font, 14px);
	font-weight: 700;
	letter-spacing: .01em;
}

.ynb2-sub {
	font-size: calc(var(--ynb2-font, 14px) - 2px);
	font-weight: 500;
	opacity: .92;
}

/* --- Mobil --------------------------------------------------------------- */
@media (max-width: 768px) {
	.ynb2-wrap { --ynb2-icon: 46px; }

	.ynb2-btn {
		padding: 6px;
		box-shadow: 0 4px 14px rgba(0, 0, 0, .22);
	}

	/* Sadece ikon modu */
	.ynb2-mobile-compact .ynb2-btn .ynb2-text { display: none; }
	.ynb2-mobile-compact .ynb2-left  { padding-right: 6px; border-radius: 50%; }
	.ynb2-mobile-compact .ynb2-right { padding-left: 6px;  border-radius: 50%; }
	.ynb2-mobile-compact .ynb2-left  { left: max(6px, var(--ynb2-offset, 0px)); }
	.ynb2-mobile-compact .ynb2-right { right: max(6px, var(--ynb2-offset, 0px)); }

	/* Yazılı mod - küçültülmüş */
	.ynb2-mobile-full { --ynb2-icon: 40px; }
	.ynb2-mobile-full .ynb2-title { font-size: calc(var(--ynb2-font, 14px) - 3px); }
	.ynb2-mobile-full .ynb2-sub   { font-size: calc(var(--ynb2-font, 14px) - 5px); }
	.ynb2-mobile-full .ynb2-left  { padding-right: 12px; }
	.ynb2-mobile-full .ynb2-right { padding-left: 12px; }
	.ynb2-mobile-full .ynb2-btn   { gap: 8px; padding: 5px; }
}

/* Dar telefonlar: yazılı modda iki buton ortada çakışmasın */
@media (max-width: 400px) {
	.ynb2-mobile-full { --ynb2-icon: 36px; }
	.ynb2-mobile-full .ynb2-title { font-size: calc(var(--ynb2-font, 14px) - 4px); }
	.ynb2-mobile-full .ynb2-sub   { font-size: calc(var(--ynb2-font, 14px) - 5px); }
	.ynb2-mobile-full .ynb2-left  { padding-right: 10px; }
	.ynb2-mobile-full .ynb2-right { padding-left: 10px; }
	.ynb2-mobile-full .ynb2-btn   { gap: 6px; }
}

/* Çok kısa ekranlar (yatay telefon) */
@media (max-height: 480px) {
	.ynb2-btn { bottom: 50%; }
	.ynb2-anchor-top .ynb2-btn { top: 50%; bottom: auto; }
	.ynb2-wrap { --ynb2-icon: 42px; }
}

/* --------------------------------------------------------------------------
   Tema çakışmalarına karşı yüksek öncelikli override
   (bazı temalar .entry-content a gibi seçicilerle rengi eziyor)
   -------------------------------------------------------------------------- */
.ynb2-wrap .ynb2-btn.ynb2-left,
.ynb2-wrap .ynb2-btn.ynb2-left:link,
.ynb2-wrap .ynb2-btn.ynb2-left:visited,
.ynb2-wrap .ynb2-btn.ynb2-left:hover,
.ynb2-wrap .ynb2-btn.ynb2-left:focus,
.ynb2-wrap .ynb2-btn.ynb2-left:active {
	background: var(--ynb2-left-bg, #1F0938) !important;
	color: var(--ynb2-left-fg, #fff) !important;
}

.ynb2-wrap .ynb2-btn.ynb2-right,
.ynb2-wrap .ynb2-btn.ynb2-right:link,
.ynb2-wrap .ynb2-btn.ynb2-right:visited,
.ynb2-wrap .ynb2-btn.ynb2-right:hover,
.ynb2-wrap .ynb2-btn.ynb2-right:focus,
.ynb2-wrap .ynb2-btn.ynb2-right:active {
	background: var(--ynb2-right-bg, #82BB26) !important;
	color: var(--ynb2-right-fg, #fff) !important;
}

.ynb2-wrap .ynb2-btn .ynb2-text,
.ynb2-wrap .ynb2-btn .ynb2-title,
.ynb2-wrap .ynb2-btn .ynb2-sub,
.ynb2-wrap .ynb2-btn .ynb2-svg {
	color: inherit !important;
	background: none !important;
	text-shadow: none !important;
}

/* Hareket azaltma tercihi */
@media (prefers-reduced-motion: reduce) {
	.ynb2-pulse-on .ynb2-ring,
	.ynb2-pulse-on .ynb2-svg { animation: none; }
	.ynb2-btn { transition: none; }
}