/* REFERANS KAYDIRICISI (2026-11-10, Ayhan: "en altta 10 referansın geçtiği bir slide yapabiliriz … ayrı bir css'de dursun,
   başka sayfalarda kullanılırsa oradan çekilsin, anacss'i şişirmesin").
   İşaretleme: Views/AnaSayfa/_Referanslar.cshtml. Başka bir sayfada kullanılacaksa o sayfanın Styles bölümüne
   <link href="~/css/referans-kaydirici.css" asp-append-version="true"> eklenir. Betik gerekmez: kartlar CSS animasyonuyla
   kayar (liste iki kez yazılır, ray yarı genişliği kadar kayıp başa döner); üstüne gelince durur, durdur düğmesi
   mermer.js "LOGO ŞERİDİ DURDUR". Yön bağımsız yazıldı (mantıksal özellikler) — sağdan sola aynası gerekmez;
   sağdan sola sayfada kayma yönü ters çevrilir. Renkler şablonun değişkenlerinden. */

.referans-kaydirici {
	position: relative;
	overflow: hidden;
	padding: 20px 0 30px;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.referans-kaydirici__ray {
	display: flex;
	width: max-content;
	animation: referans-kaydirici-kay 45s linear infinite;
}

.referans-kaydirici:hover .referans-kaydirici__ray,
.referans-kaydirici:focus-within .referans-kaydirici__ray,
.logo-seridi--durdu .referans-kaydirici__ray {
	animation-play-state: paused;
}

.referans-kaydirici__liste {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0 12px;
	list-style: none;
}

.referans-kaydirici__kart {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-start;
	gap: 6px;
	width: 220px;
	padding: 22px 18px 20px;
	background: #fff;
	border: 1px solid rgba(18, 18, 18, .08);
	border-radius: 12px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .06);
	text-align: center;
	transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

.referans-kaydirici__kart:hover {
	transform: translateY(-4px);
	border-color: var(--theme-color);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .10);
}

.referans-kaydirici__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 80px;
	margin-block-end: 8px;
}

.referans-kaydirici__logo img {
	max-width: 160px;
	max-height: 80px;
	width: auto;
	height: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .85;
	transition: filter .3s ease, opacity .3s ease;
}

.referans-kaydirici__kart:hover .referans-kaydirici__logo img {
	filter: none;
	opacity: 1;
}

.referans-kaydirici__ad {
	font-family: var(--title-font);
	font-weight: 700;
	font-size: 15px;
	line-height: 1.35;
	color: var(--title-color);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.referans-kaydirici__alt {
	font-size: 13px;
	line-height: 1.4;
	color: #5f5e66;
}

.referans-kaydirici .logo-seridi__durdur {
	position: absolute;
	inset-inline-end: 12px;
	inset-block-start: 0;
	z-index: 2;
}

@keyframes referans-kaydirici-kay {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

[dir="rtl"] .referans-kaydirici__ray {
	animation-name: referans-kaydirici-kay-rtl;
}

@keyframes referans-kaydirici-kay-rtl {
	from { transform: translateX(0); }
	to { transform: translateX(50%); }
}

@media (max-width: 575px) {
	.referans-kaydirici__kart { width: 180px; padding: 18px 14px; }
	.referans-kaydirici__logo { height: 64px; }
	.referans-kaydirici__logo img { max-width: 130px; max-height: 64px; }
}

/* Hareketi azaltmak isteyene kaymaz; kartlar sarılarak dizilir, ikinci kopya gizlenir. */
@media (prefers-reduced-motion: reduce) {
	.referans-kaydirici { -webkit-mask-image: none; mask-image: none; }
	.referans-kaydirici__ray { animation: none; width: auto; justify-content: center; }
	.referans-kaydirici__liste { flex-wrap: wrap; justify-content: center; }
	.referans-kaydirici__liste[aria-hidden="true"] { display: none; }
	.referans-kaydirici .logo-seridi__durdur { display: none; }
}