/* ==========================================================================
   Marka Logo Karuseli - Frontend Styles
   ========================================================================== */

.mlk-wrap {
	width: 100%;
	max-width: 1200px;
	margin: 40px auto;
	overflow: hidden;
	font-family: inherit;
	--mlk-speed: 28s;
	--mlk-height: 56px;
}

.mlk-marquee-row {
	display: flex;
	width: max-content;
	overflow: hidden;
	position: relative;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.mlk-marquee-row + .mlk-marquee-row {
	margin-top: 28px;
}

.mlk-marquee-track {
	display: flex;
	align-items: center;
	flex-shrink: 0;
	gap: 56px;
	padding-right: 56px;
	animation: mlk-scroll var(--mlk-speed) linear infinite;
}

.mlk-marquee-row.mlk-reverse .mlk-marquee-track {
	animation-direction: reverse;
}

.mlk-marquee-row:hover .mlk-marquee-track {
	animation-play-state: paused;
}

.mlk-marquee-track img {
	height: var(--mlk-height);
	width: auto;
	max-width: 160px;
	object-fit: contain;
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.mlk-marquee-track img:hover {
	filter: grayscale(0%);
	opacity: 1;
	transform: translateY(-3px);
}

@keyframes mlk-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(calc(-100% - 0px)); }
}

@media (max-width: 768px) {
	.mlk-marquee-track img { max-width: 110px; }
	.mlk-marquee-track { gap: 36px; padding-right: 36px; }
}