/* =========================================================
   Ultimate Call Button — Frontend Widget Stilleri
   ========================================================= */

.ucb-widget {
	--ucb-primary: #25D366;
	--ucb-icon-color: #ffffff;
	position: fixed;
	z-index: 999999;
	display: flex;
	align-items: center;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ucb-widget.ucb-inline {
	position: relative;
	display: inline-flex;
	z-index: 1;
}

.ucb-widget.ucb-preview {
	position: absolute;
}

/* --- Konumlandırma --- */
.ucb-position-bottom-right { right: 20px; bottom: 20px; flex-direction: row-reverse; }
.ucb-position-bottom-left  { left: 20px; bottom: 20px; }
.ucb-position-top-right    { right: 20px; top: 20px; flex-direction: row-reverse; }
.ucb-position-top-left     { left: 20px; top: 20px; }
.ucb-position-bottom-center { left: 50%; bottom: 20px; transform: translateX(-50%); }
.ucb-position-top-center    { left: 50%; top: 20px; transform: translateX(-50%); }

.ucb-widget.ucb-inline.ucb-position-bottom-right,
.ucb-widget.ucb-inline.ucb-position-bottom-left,
.ucb-widget.ucb-inline.ucb-position-top-right,
.ucb-widget.ucb-inline.ucb-position-top-left,
.ucb-widget.ucb-inline.ucb-position-bottom-center,
.ucb-widget.ucb-inline.ucb-position-top-center {
	position: relative;
	right: auto; left: auto; top: auto; bottom: auto;
	transform: none;
}

/* --- Boyutlar --- */
.ucb-size-small  .ucb-channel-link,
.ucb-size-small  .ucb-main-toggle { width: 44px; height: 44px; }
.ucb-size-small  .ucb-channel-link svg { width: 20px; height: 20px; }
.ucb-size-small  .ucb-plus-icon { width: 16px; height: 16px; }

.ucb-size-medium .ucb-channel-link,
.ucb-size-medium .ucb-main-toggle { width: 56px; height: 56px; }
.ucb-size-medium .ucb-channel-link svg { width: 26px; height: 26px; }
.ucb-size-medium .ucb-plus-icon { width: 20px; height: 20px; }

.ucb-size-large  .ucb-channel-link,
.ucb-size-large  .ucb-main-toggle { width: 68px; height: 68px; }
.ucb-size-large  .ucb-channel-link svg { width: 32px; height: 32px; }
.ucb-size-large  .ucb-plus-icon { width: 24px; height: 24px; }

/* --- Temel buton görünümü (stil şablonları tarafından değiştirilir) --- */
.ucb-channel-link,
.ucb-main-toggle {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--ucb-primary);
	color: var(--ucb-icon-color);
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	text-decoration: none;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	flex-shrink: 0;
}

.ucb-channel-link:hover,
.ucb-main-toggle:hover {
	transform: scale(1.05);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
	color: var(--ucb-icon-color);
}

.ucb-channel-link svg {
	fill: var(--ucb-icon-color);
}

/* --- Stil şablonları --- */

/* Minimal: ince kenarlık, hafif gölge. */
.ucb-style-minimal .ucb-channel-link,
.ucb-style-minimal .ucb-main-toggle {
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	border: 2px solid rgba(255, 255, 255, 0.5);
}

/* Neon Işıltı (PRO) */
.ucb-style-neon .ucb-channel-link,
.ucb-style-neon .ucb-main-toggle {
	box-shadow: 0 0 0 2px var(--ucb-primary), 0 0 18px 4px var(--ucb-primary);
}

/* Cam / Glassmorphism (PRO) */
.ucb-style-glass .ucb-channel-link,
.ucb-style-glass .ucb-main-toggle {
	background: color-mix(in srgb, var(--ucb-primary) 65%, transparent);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	border: 1px solid rgba(255, 255, 255, 0.35);
}

/* Gradyan Dalga (PRO) */
.ucb-style-gradient .ucb-channel-link,
.ucb-style-gradient .ucb-main-toggle {
	background: linear-gradient(135deg, var(--ucb-primary) 0%, color-mix(in srgb, var(--ucb-primary) 60%, #000) 100%);
}

/* =========================================================
   Animasyonlar — sade, ölçülü, tek amacı dikkat çekmek olan
   "dalgalanma/zıplama" efektleri yerine ince ve profesyonel.
   ========================================================= */

/* Yumuşak Nabız: çok hafif, yavaş bir ölçek "nefesi". Halka/dalga YOK. */
.ucb-anim-breathe .ucb-channel-link,
.ucb-anim-breathe .ucb-main-toggle {
	animation: ucb-breathe 2.6s ease-in-out infinite;
}
@keyframes ucb-breathe {
	0%, 100% { transform: scale(1); }
	50%      { transform: scale(1.045); }
}

/* Giriş Animasyonu (PRO): sayfa yüklenince BİR KEZ oynar, sonra durağan kalır.
   Sadece opaklık kullanılır; merkez pozisyonlardaki translateX(-50%) ile
   çakışmaması için transform'a dokunmaz. */
.ucb-anim-entrance.ucb-widget {
	animation: ucb-entrance 0.6s ease-out both;
}
@keyframes ucb-entrance {
	0%   { opacity: 0; }
	100% { opacity: 1; }
}

/* --- Etiket metni --- */
.ucb-label {
	background: #1d2327;
	color: #fff;
	font-size: 13px;
	font-weight: 500;
	padding: 8px 14px;
	border-radius: 6px;
	margin: 0 10px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* =========================================================
   Çoklu kanal — PRO
   İki mod: "inline" (kompakt, hep görünür) ve "expand" (aç-kapa speed-dial)
   ========================================================= */

.ucb-multi {
	align-items: center;
	gap: 10px;
}

/* --- Inline / Kompakt mod: tüm kanallar sürekli yan yana --- */
.ucb-multi.ucb-inline-mode {
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}
.ucb-position-bottom-right.ucb-multi.ucb-inline-mode,
.ucb-position-top-right.ucb-multi.ucb-inline-mode {
	flex-direction: row-reverse;
}

/* --- Expand / Speed-dial modu ---
   DOM sırası: [ana düğme, alt-butonlar-kutusu]. column-reverse ile ana düğme
   DOM'daki İLK öğe olduğu için sabit köşede kalır; alt butonlar onun
   üzerinde (alt pozisyonlarda) ya da altında (üst pozisyonlarda) açılır. */
.ucb-multi:not(.ucb-inline-mode) {
	flex-direction: column-reverse;
}
.ucb-position-top-right.ucb-multi:not(.ucb-inline-mode),
.ucb-position-top-left.ucb-multi:not(.ucb-inline-mode),
.ucb-position-top-center.ucb-multi:not(.ucb-inline-mode) {
	flex-direction: column;
}

.ucb-multi:not(.ucb-inline-mode) .ucb-sub-buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	max-height: 0;
	overflow: hidden;
	opacity: 0;
	transform: translateY(8px);
	transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}
.ucb-position-top-right .ucb-sub-buttons,
.ucb-position-top-left .ucb-sub-buttons,
.ucb-position-top-center .ucb-sub-buttons {
	transform: translateY(-8px);
}
.ucb-multi.ucb-open:not(.ucb-inline-mode) .ucb-sub-buttons {
	max-height: 500px;
	opacity: 1;
	transform: translateY(0);
}

/* --- Aç-kapa düğmesi ikonu: sade, dönerek "+" den "×" e geçen iki çizgi --- */
.ucb-plus-icon {
	position: relative;
	display: inline-block;
	width: 20px;
	height: 20px;
}
.ucb-plus-bar {
	position: absolute;
	top: 50%;
	left: 50%;
	background: var(--ucb-icon-color);
	border-radius: 2px;
	transition: transform 0.25s ease;
}
.ucb-bar-h { width: 100%; height: 2px; transform: translate(-50%, -50%) rotate(0deg); }
.ucb-bar-v { width: 2px; height: 100%; transform: translate(-50%, -50%) rotate(0deg); }

.ucb-multi.ucb-open .ucb-bar-h { transform: translate(-50%, -50%) rotate(45deg); }
.ucb-multi.ucb-open .ucb-bar-v { transform: translate(-50%, -50%) rotate(-45deg); }

/* Telefon ikonu varyantı: kapalıyken telefon ikonu, açıkken × gösterir. */
.ucb-toggle-icon-phone .ucb-icon-closed svg { width: 60%; height: 60%; fill: var(--ucb-icon-color); display: block; }
.ucb-toggle-icon-phone .ucb-icon-opened {
	display: none;
	font-size: 22px;
	line-height: 1;
	color: var(--ucb-icon-color);
}
.ucb-multi.ucb-open .ucb-toggle-icon-phone .ucb-icon-closed { display: none; }
.ucb-multi.ucb-open .ucb-toggle-icon-phone .ucb-icon-opened { display: block; }

.ucb-multi.ucb-open .ucb-main-toggle {
	background: #1d2327;
}

@media (max-width: 480px) {
	.ucb-position-bottom-right,
	.ucb-position-bottom-left { right: 14px; left: auto; bottom: 14px; }
	.ucb-position-top-right,
	.ucb-position-top-left { right: 14px; left: auto; top: 14px; }
	.ucb-position-bottom-center { bottom: 14px; }
	.ucb-position-top-center { top: 14px; }
}