/* =====================================================================
   Sabit İletişim Butonları – ön yüz
   Değişkenler PHP tarafından basılır: --hib-wa --hib-call --hib-fg
   --hib-size --hib-x --hib-y --hib-z
   ===================================================================== */

.hib-wrap {
	--hib-wa: #25D366;
	--hib-call: #1E6FE8;
	--hib-fg: #fff;
	--hib-size: 56px;
	--hib-x: 20px;
	--hib-y: 20px;
	--hib-z: 9999;
	--hib-gap: 12px;
	--hib-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .12);

	position: fixed;
	z-index: var(--hib-z);
	bottom: calc(var(--hib-y) + env(safe-area-inset-bottom, 0px));
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--hib-gap);
	margin: 0;
	padding: 0;
	pointer-events: none;
	font-size: 15px;
	line-height: 1.2;
	box-sizing: border-box;
}
.hib-wrap *,
.hib-wrap *::before,
.hib-wrap *::after { box-sizing: border-box; }

.hib-pos-right { right: var(--hib-x); }
.hib-pos-left  { left: var(--hib-x); align-items: flex-start; }

.hib-wrap .hib-btn {
	pointer-events: auto;
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-decoration: none !important;
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
	transition: transform .2s ease, box-shadow .2s ease, filter .2s ease, max-width .3s ease, padding .3s ease;
	white-space: nowrap;
}
.hib-btn:focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }

.hib-ico-wrap { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 0; }
.hib-ico { width: 1.25em; height: 1.25em; fill: currentColor; display: block; }
.hib-text { display: inline-flex; flex-direction: column; align-items: flex-start; min-width: 0; }
.hib-label { font-weight: 700; }
.hib-sub { display: none; font-size: .78em; font-weight: 500; opacity: .9; margin-top: 2px; }
.hib-sub[hidden] { display: none !important; }

/* Görsel olarak gizli ama ekran okuyucuda okunur */
.hib-nolabel .hib-text,
.hib-t-klasik .hib-text,
.hib-t-nabiz.hib-nolabel .hib-text {
	position: absolute !important;
	width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Giriş animasyonu */
@keyframes hib-in {
	from { opacity: 0; transform: translateY(16px) scale(.9); }
	to   { opacity: 1; transform: none; }
}
.hib-anim .hib-btn { animation: hib-in .45s cubic-bezier(.2, .8, .3, 1.2) both; animation-delay: calc(.6s + var(--hib-i, 0) * .12s); }

/* =====================================================================
   1) TEMA VARSAYILANI
   Butonlar .wp-block-button__link / .wp-element-button sınıflarını alır,
   tema stili uygulanır. Aşağıdaki taban stil :where() ile 0 özgüllükte,
   yani tema her zaman kazanır.
   ===================================================================== */
:where(.hib-t-varsayilan) :where(.hib-btn) {
	background-color: #32373c;
	color: #fff;
	border: 0;
	border-radius: 9999px;
	padding: calc(.667em + 2px) calc(1.333em + 2px);
	font-size: 1.05em;
	line-height: 1.2;
	font-family: inherit;
}
.hib-t-varsayilan:not(.hib-nolabel):not(.hib-inline),
.hib-t-hap:not(.hib-nolabel):not(.hib-inline) { align-items: stretch; }
.hib-t-varsayilan .hib-btn { justify-content: center; }
.hib-t-hap .hib-btn { justify-content: flex-start; }
.hib-t-varsayilan .hib-btn { box-shadow: var(--hib-shadow); height: auto; width: auto; margin: 0; }
.hib-t-varsayilan .hib-btn:hover { transform: translateY(-2px); }
.hib-t-varsayilan .hib-ico { width: 1.2em; height: 1.2em; }
.hib-t-varsayilan.hib-nolabel .hib-btn { padding: .85em; border-radius: 9999px; aspect-ratio: 1; }
.hib-t-varsayilan.hib-nolabel .hib-ico { width: 1.45em; height: 1.45em; }
/* Özel renk modu (Renkleri temadan al kapalı) */
.hib-t-varsayilan:not(.hib-theme-colors) .hib-wa   { background-color: var(--hib-wa) !important; color: var(--hib-fg) !important; }
.hib-t-varsayilan:not(.hib-theme-colors) .hib-call { background-color: var(--hib-call) !important; color: var(--hib-fg) !important; }

/* =====================================================================
   2) KLASİK YUVARLAK
   ===================================================================== */
.hib-t-klasik .hib-btn {
	width: var(--hib-size);
	height: var(--hib-size);
	border-radius: 50%;
	color: var(--hib-fg);
	box-shadow: var(--hib-shadow);
}
.hib-t-klasik .hib-wa   { background: var(--hib-wa); }
.hib-t-klasik .hib-call { background: var(--hib-call); }
.hib-t-klasik .hib-ico  { width: calc(var(--hib-size) * .52); height: calc(var(--hib-size) * .52); }
.hib-t-klasik .hib-call .hib-ico { width: calc(var(--hib-size) * .46); height: calc(var(--hib-size) * .46); }
.hib-t-klasik .hib-btn:hover { transform: scale(1.08); }

/* =====================================================================
   3) ETİKETLİ HAP
   ===================================================================== */
.hib-t-hap .hib-btn {
	height: var(--hib-size);
	padding: 0 22px 0 calc(var(--hib-size) * .12);
	border-radius: 999px;
	color: var(--hib-fg);
	box-shadow: var(--hib-shadow);
	gap: 12px;
}
.hib-t-hap .hib-wa   { background: var(--hib-wa); }
.hib-t-hap .hib-call { background: var(--hib-call); }
.hib-t-hap .hib-ico-wrap {
	width: calc(var(--hib-size) * .76);
	height: calc(var(--hib-size) * .76);
	border-radius: 50%;
	background: rgba(255, 255, 255, .22);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25);
}
.hib-t-hap .hib-ico { width: calc(var(--hib-size) * .42); height: calc(var(--hib-size) * .42); }
.hib-t-hap .hib-sub { display: block; }
.hib-t-hap .hib-label { font-size: 1.02em; letter-spacing: .01em; }
.hib-t-hap .hib-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.hib-t-hap.hib-nolabel .hib-btn { width: var(--hib-size); padding: 0; justify-content: center; }
.hib-t-hap.hib-nolabel .hib-ico-wrap { background: none; box-shadow: none; }

/* =====================================================================
   4) ALT ŞERİT (tam genişlik)
   ===================================================================== */
.hib-t-alt-bar {
	--hib-bar-h: 56px;
	left: 0 !important;
	right: 0 !important;
	bottom: 0;
	flex-direction: row;
	align-items: stretch;
	gap: 0;
	padding-bottom: env(safe-area-inset-bottom, 0px);
	background: var(--hib-call);
	box-shadow: 0 -4px 18px rgba(0, 0, 0, .16);
}
.hib-t-alt-bar .hib-btn {
	flex: 1 1 0;
	min-height: var(--hib-bar-h);
	padding: 8px 12px;
	color: var(--hib-fg);
	border-radius: 0;
	gap: 10px;
}
.hib-t-alt-bar .hib-wa   { background: var(--hib-wa); }
.hib-t-alt-bar .hib-call { background: var(--hib-call); }
.hib-t-alt-bar .hib-btn + .hib-btn { box-shadow: inset 1px 0 0 rgba(255, 255, 255, .25); }
.hib-t-alt-bar .hib-ico { width: 24px; height: 24px; }
.hib-t-alt-bar .hib-label { font-size: 16px; }
.hib-t-alt-bar .hib-sub { display: block; font-size: 12px; }
.hib-t-alt-bar .hib-btn:active { filter: brightness(.92); }
.hib-t-alt-bar.hib-anim .hib-btn { animation: none; }
.hib-t-alt-bar.hib-anim { animation: hib-bar-in .4s ease-out .5s both; }
@keyframes hib-bar-in { from { transform: translateY(100%); } to { transform: none; } }
/* Masaüstünde çok geniş görünmesin: içerik ortalanır */
@media (min-width: 1025px) {
	.hib-t-alt-bar .hib-text { flex-direction: row; align-items: baseline; gap: 10px; }
}

/* =====================================================================
   5) NABIZ EFEKTLİ
   ===================================================================== */
.hib-t-nabiz .hib-btn {
	width: var(--hib-size);
	height: var(--hib-size);
	border-radius: 50%;
	color: var(--hib-fg);
	box-shadow: var(--hib-shadow);
	--hib-c: var(--hib-wa);
	background: var(--hib-c);
}
.hib-t-nabiz .hib-call { --hib-c: var(--hib-call); }
.hib-t-nabiz .hib-ico  { width: calc(var(--hib-size) * .5); height: calc(var(--hib-size) * .5); position: relative; z-index: 1; }
.hib-t-nabiz .hib-call .hib-ico { width: calc(var(--hib-size) * .44); height: calc(var(--hib-size) * .44); }
.hib-t-nabiz .hib-btn::before,
.hib-t-nabiz .hib-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: var(--hib-c);
	z-index: -1;
	opacity: 0;
}
.hib-t-nabiz.hib-anim .hib-btn::before { animation: hib-pulse 2.4s ease-out infinite; animation-delay: calc(1s + var(--hib-i, 0) * .6s); }
.hib-t-nabiz.hib-anim .hib-btn::after  { animation: hib-pulse 2.4s ease-out infinite; animation-delay: calc(1.8s + var(--hib-i, 0) * .6s); }
@keyframes hib-pulse {
	0%   { transform: scale(1);   opacity: .55; }
	100% { transform: scale(1.9); opacity: 0; }
}
/* Etiket = baloncuk */
.hib-t-nabiz .hib-text {
	position: absolute;
	top: 50%;
	right: calc(100% + 14px);
	transform: translate(6px, -50%);
	background: #111827;
	color: #fff;
	padding: 8px 12px;
	border-radius: 8px;
	font-size: 14px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .2s, transform .2s, visibility .2s;
	pointer-events: none;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .2);
}
.hib-t-nabiz .hib-text::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 100%;
	margin-top: -6px;
	border: 6px solid transparent;
	border-left-color: #111827;
}
.hib-t-nabiz.hib-pos-left .hib-text { right: auto; left: calc(100% + 14px); transform: translate(-6px, -50%); }
.hib-t-nabiz.hib-pos-left .hib-text::after { left: auto; right: 100%; border-left-color: transparent; border-right-color: #111827; }
.hib-t-nabiz .hib-btn:hover .hib-text,
.hib-t-nabiz .hib-btn:focus-visible .hib-text { opacity: 1; visibility: visible; transform: translate(0, -50%); }
.hib-t-nabiz .hib-btn:hover { transform: scale(1.06); }

/* =====================================================================
   6) KENAR SEKMESİ
   ===================================================================== */
.hib-t-kenar { --hib-gap: 6px; }
.hib-t-kenar.hib-pos-right { right: 0; }
.hib-t-kenar.hib-pos-left  { left: 0; }
.hib-t-kenar .hib-btn {
	height: var(--hib-size);
	min-width: var(--hib-size);
	padding: 0 calc(var(--hib-size) * .26);
	justify-content: flex-start;
	color: var(--hib-fg);
	box-shadow: var(--hib-shadow);
	gap: 0;
}
.hib-t-kenar.hib-pos-right .hib-btn { border-radius: 14px 0 0 14px; }
.hib-t-kenar.hib-pos-left  .hib-btn { border-radius: 0 14px 14px 0; flex-direction: row-reverse; }
.hib-t-kenar .hib-wa   { background: var(--hib-wa); }
.hib-t-kenar .hib-call { background: var(--hib-call); }
.hib-t-kenar .hib-ico  { width: calc(var(--hib-size) * .46); height: calc(var(--hib-size) * .46); }
.hib-t-kenar .hib-text {
	max-width: 0;
	overflow: hidden;
	opacity: 0;
	transition: max-width .3s ease, opacity .2s ease, margin .3s ease;
}
.hib-t-kenar .hib-btn:hover .hib-text,
.hib-t-kenar .hib-btn:focus-visible .hib-text { max-width: 220px; opacity: 1; margin: 0 6px 0 10px; }
.hib-t-kenar.hib-pos-left .hib-btn:hover .hib-text,
.hib-t-kenar.hib-pos-left .hib-btn:focus-visible .hib-text { margin: 0 10px 0 6px; }
.hib-t-kenar.hib-anim .hib-btn { animation-name: hib-slide-r; }
.hib-t-kenar.hib-pos-left.hib-anim .hib-btn { animation-name: hib-slide-l; }
@keyframes hib-slide-r { from { transform: translateX(100%); } to { transform: none; } }
@keyframes hib-slide-l { from { transform: translateX(-100%); } to { transform: none; } }

/* =====================================================================
   Kısa kod (sayfa içi) kullanımı
   ===================================================================== */
.hib-wrap.hib-inline {
	position: static;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	pointer-events: auto;
	margin: 1em 0;
	z-index: auto;
}
.hib-inline .hib-btn { box-shadow: none; }

/* Hareket hassasiyeti */
@media (prefers-reduced-motion: reduce) {
	.hib-wrap,
	.hib-wrap .hib-btn,
	.hib-wrap .hib-btn::before,
	.hib-wrap .hib-btn::after { animation: none !important; transition: none !important; }
}

@media print { .hib-wrap:not(.hib-inline) { display: none !important; } }