.frat-referanslar-wrap {
	--frat-bg: #eef1f5;
	--frat-title: #1f2937;
	--frat-box-h: 125px;
	--frat-box-w: 240px;
	--frat-m-box-h: 78px;
	--frat-m-box-w: 160px;
	--frat-gap: 18px;
	--frat-shadow: 0 12px 32px rgba(15, 23, 42, 0.1);
	--frat-speed: 35s;
	width: 100%;
}

.frat-referanslar-title {
	margin: 0 0 24px;
	text-align: center;
	font-size: clamp(1.4rem, 2.2vw, 2.1rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: 0.01em;
	color: var(--frat-title);
	text-wrap: balance;
}

.frat-referanslar-viewport {
	width: 100%;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, #000 10%, #000 90%, transparent 100%);
}

.frat-referanslar-track {
	display: flex;
	align-items: center;
	gap: var(--frat-gap);
	width: max-content;
	will-change: transform;
}

.frat-referanslar-track.is-animated {
	animation: frat-marquee var(--frat-speed) linear infinite;
}

.frat-referanslar-wrap[data-infinite="0"] .frat-referanslar-track.is-animated {
	animation-iteration-count: 1;
}

.frat-referanslar-item {
	margin: 0;
	flex: 0 0 auto;
	height: var(--frat-box-h);
	width: var(--frat-box-w);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.93);
	box-shadow: var(--frat-shadow);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 14px 18px;
	backdrop-filter: blur(3px);
	transform: translateZ(0);
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.frat-referanslar-wrap[data-hover="1"] .frat-referanslar-item:hover {
	transform: translateY(-2px) scale(1.04);
	box-shadow: 0 16px 30px rgba(15, 23, 42, 0.14);
}

.frat-referanslar-item img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	filter: saturate(0.94);
}

.frat-referanslar-wrap:hover .frat-referanslar-track.is-animated {
	animation-play-state: paused;
}

@keyframes frat-marquee {
	from {
		transform: translate3d(0, 0, 0);
	}
	to {
		transform: translate3d(calc(-1 * var(--frat-loop-distance, 50%)), 0, 0);
	}
}

@media (max-width: 1024px) {
	/* Bilerek bos: spacing ve wrapper tasarimi tema tarafinda yonetilecek. */
}

@media (max-width: 768px) {
	.frat-referanslar-wrap {
		--frat-box-h: var(--frat-m-box-h);
		--frat-box-w: var(--frat-m-box-w);
		--frat-gap: clamp(10px, 2.4vw, 14px);
	}

	.frat-referanslar-title {
		margin-bottom: 16px;
	}

	.frat-referanslar-item {
		padding: 10px 12px;
	}
}

@media (max-width: 480px) {
	.frat-referanslar-viewport {
		-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
		mask-image: linear-gradient(to right, transparent 0%, #000 6%, #000 94%, transparent 100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.frat-referanslar-track.is-animated {
		animation: none;
	}
}

@media (prefers-color-scheme: dark) {
	.frat-referanslar-wrap {
		--frat-shadow: 0 14px 34px rgba(0, 0, 0, 0.38);
	}

	.frat-referanslar-item {
		background: color-mix(in srgb, #ffffff 88%, #e2e8f0);
	}
}