/**
 * SponsorPano Ön Yüz Stilleri (BEM)
 *
 * @package SponsorPano
 * @version 1.2.0
 */

/* ==========================================================================
   1. Temel Reset ve Scoped Kapsayıcı
   ========================================================================== */

:where(.spb-pano) {
	box-sizing: border-box;
	width: 100%;
	margin-inline: auto;
	position: relative;
}

:where(.spb-pano) *,
:where(.spb-pano) *::before,
:where(.spb-pano) *::after {
	box-sizing: inherit;
}

.spb-pano__baslik {
	margin: 0 0 1.25rem 0;
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--spb-metin-renk, #1f2937);
	line-height: 1.25;
}

.spb-pano__satirlar {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	width: 100%;
}

/* ==========================================================================
   2. Satır Kapsayıcısı (Row)
   ========================================================================== */

.spb-satir {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: var(--spb-kart-radius, 8px);
}

.spb-satir__baslik {
	margin: 0 0 0.75rem 0;
	font-size: 1.125rem;
	font-weight: 600;
}

.spb-satir__rozet {
	display: inline-block;
	padding: 0.25rem 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	border-radius: 9999px;
	background-color: var(--spb-rozet-renk, #2271b1);
	color: #ffffff;
}

/* ==========================================================================
   2.1. Bölüm / Grup Başlık Kapsülleri (Section Header Badges)
   ========================================================================== */

.spb-bolum-rozet {
	display: flex;
	width: 100%;
	margin-top: 1.5rem;
	margin-bottom: 1.5rem;
}

.spb-bolum-rozet--hiza-merkez {
	justify-content: center;
}

.spb-bolum-rozet--hiza-sol {
	justify-content: flex-start;
}

.spb-bolum-rozet--hiza-sag {
	justify-content: flex-end;
}

.spb-bolum-rozet__metin {
	display: inline-block;
	background-color: var(--spb-bolum-bg, #1e40af);
	color: var(--spb-bolum-renk, #ffffff);
	font-weight: 800;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1.2;
	text-align: center;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

.spb-bolum-rozet--kapsul .spb-bolum-rozet__metin {
	border-radius: 9999px;
	padding: 0.65rem 2.5rem;
	font-size: 1.15rem;
}

.spb-bolum-rozet--ribbon .spb-bolum-rozet__metin {
	border-radius: 6px;
	padding: 0.6rem 2rem;
	font-size: 1.15rem;
	position: relative;
}

.spb-bolum-rozet--duz .spb-bolum-rozet__metin {
	border-radius: 4px;
	padding: 0.4rem 1.25rem;
	font-size: 1rem;
}

.spb-satir__viewport {
	position: relative;
	width: 100%;
	overflow: hidden;
}

/* ==========================================================================
   3. Statik Grid (Responsive Flex-Grid with Centering)
   ========================================================================== */

.spb-satir__grid {
	display: flex;
	flex-wrap: wrap;
	gap: var(--spb-gap, 24px);
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	width: 100%;
	align-items: stretch;
	justify-content: center; /* Varsayılan olarak her zaman sayfa/satır ortalı */
}

.spb-satir--hiza-sol .spb-satir__grid {
	justify-content: flex-start;
}

.spb-satir--hiza-merkez .spb-satir__grid {
	justify-content: center;
}

.spb-satir--hiza-sag .spb-satir__grid {
	justify-content: flex-end;
}

/* Doğal Kutu Genişliği: Logolar tüm satırı kaplamaz, seçilen manuel gap ile ortalanır */
.spb-satir__grid .spb-item {
	flex: 0 0 auto;
	width: auto;
	max-width: 100%;
	box-sizing: border-box;
}

/* İsteğe bağlı kolon yayılım modu (tüm genişliği doldurmak istenirse) */
.spb-satir--kolon-doldur .spb-satir__grid .spb-item,
.spb-satir--kolon-sabit .spb-satir__grid .spb-item {
	flex: 0 0 var(--spb-oge-genislik, calc((100% - (var(--spb-kolon, 6) - 1) * var(--spb-gap, 24px)) / var(--spb-kolon, 6)));
	max-width: var(--spb-oge-genislik, calc((100% - (var(--spb-kolon, 6) - 1) * var(--spb-gap, 24px)) / var(--spb-kolon, 6)));
	width: var(--spb-oge-genislik, calc((100% - (var(--spb-kolon, 6) - 1) * var(--spb-gap, 24px)) / var(--spb-kolon, 6)));
}

/* ==========================================================================
   3.1. Çoklu Satır Katılımcı Grid (Multi-row Participant Grid)
   ========================================================================== */

.spb-satir--coklu-grid .spb-satir__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--spb-gap, 16px);
}

.spb-satir--coklu-grid .spb-item {
	flex: 0 0 auto;
}

.spb-satir--coklu-grid .spb-item__medya {
	height: var(--spb-logo-maks-y, 42px);
}

.spb-satir--coklu-grid .spb-item__logo {
	max-height: var(--spb-logo-maks-y, 42px) !important;
}

/* ==========================================================================
   4. Kayan Şerit (Continuous Marquee)
   ========================================================================== */

.spb-satir--sola .spb-satir__viewport,
.spb-satir--saga .spb-satir__viewport {
	display: flex;
	width: 100%;
	overflow: hidden;
	user-select: none;
	-webkit-mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
	mask-image: linear-gradient(to right, transparent 0%, black 4%, black 96%, transparent 100%);
}

.spb-satir__track {
	display: flex;
	align-items: center;
	gap: var(--spb-gap, 24px);
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: max-content;
	flex-shrink: 0;
	will-change: transform;
}

.spb-satir--sola .spb-satir__track {
	animation: spbMarqueeSola var(--spb-sure, 25s) linear infinite;
}

.spb-satir--saga .spb-satir__track {
	animation: spbMarqueeSaga var(--spb-sure, 25s) linear infinite;
}

@keyframes spbMarqueeSola {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}

@keyframes spbMarqueeSaga {
	0% {
		transform: translate3d(-100%, 0, 0);
	}
	100% {
		transform: translate3d(0, 0, 0);
	}
}

/* Marquee duraklatma kuralları (Hover, Focus, Buton, Sekme gizli) */
.spb-satir.is-duruk .spb-satir__track,
.spb-satir.hover-durdur:hover .spb-satir__track,
.spb-satir:focus-within .spb-satir__track,
body.spb-sekme-gizli .spb-satir__track {
	animation-play-state: paused !important;
}

/* İçerik sığmışsa animasyonu kapat ve hizala */
.spb-satir.is-sigmis .spb-satir__viewport {
	-webkit-mask-image: none;
	mask-image: none;
	justify-content: center;
}

.spb-satir.is-sigmis.spb-satir--hiza-sol .spb-satir__viewport {
	justify-content: flex-start;
}

.spb-satir.is-sigmis.spb-satir--hiza-merkez .spb-satir__viewport {
	justify-content: center;
}

.spb-satir.is-sigmis.spb-satir--hiza-sag .spb-satir__viewport {
	justify-content: flex-end;
}

.spb-satir.is-sigmis .spb-satir__track {
	animation: none !important;
}

.spb-satir.is-sigmis .spb-satir__track--klon,
.spb-satir.is-sigmis .spb-satir__duraklat {
	display: none !important;
}

/* ==========================================================================
   5. Logo Kartı ve İçerik (Item)
   ========================================================================== */

.spb-item {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
}

.spb-satir--sola .spb-item,
.spb-satir--saga .spb-item {
	flex-shrink: 0;
}

.spb-item__link {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	text-decoration: none !important;
	color: inherit;
	background-color: var(--spb-kart-arkaplan, transparent);
	border-radius: var(--spb-kart-radius, 8px);
	padding: var(--spb-pad, 12px);
	transition: transform var(--spb-gecis, 200ms) ease,
	            box-shadow var(--spb-gecis, 200ms) ease,
	            filter var(--spb-gecis, 200ms) ease;
	outline: none;
}

.spb-item--linkli .spb-item__link {
	cursor: pointer;
}

.spb-item--linksiz .spb-item__link {
	cursor: default;
}

/* Hover ve Odak Halkası */
.spb-item--linkli .spb-item__link:hover,
.spb-item--linkli .spb-item__link:focus-visible {
	transform: scale(var(--spb-hover-olcek, 1.04));
	z-index: 2;
}

.spb-item__link:focus-visible {
	box-shadow: 0 0 0 3px rgba(34, 113, 177, 0.4);
}

/* ==========================================================================
   5.1. Öge Seviye Rozeti (Item Badge)
   ========================================================================== */

.spb-item__rozet {
	display: inline-block;
	font-size: 0.725rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--spb-oge-rozet-renk, #1e40af);
	text-align: center;
	margin-bottom: 0.35rem;
	line-height: 1.2;
	white-space: nowrap;
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* ==========================================================================
   6. Logo Üstü Metin Alanı (R4)
   ========================================================================== */

.spb-item__metin {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: center;
	width: 100%;
	font-size: var(--spb-metin-punto, 13px);
	font-weight: var(--spb-metin-agirlik, 600);
	color: var(--spb-metin-renk, #1f2937);
	letter-spacing: var(--spb-metin-aralik, 0.2px);
	margin-bottom: var(--spb-metin-bosluk, 8px);
	line-height: 1.35;
	transition: color var(--spb-gecis, 200ms) ease;
}

.spb-item__link:hover .spb-item__metin {
	color: var(--spb-metin-hover-renk, var(--spb-metin-renk, #1f2937));
}

/* ==========================================================================
   7. Logo Görseli ve Medya Alanı
   ========================================================================== */

.spb-item__medya {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: var(--spb-logo-maks-y, var(--spb-logo-y, 80px));
}

.spb-item__logo {
	max-width: var(--spb-logo-g, 100%) !important;
	max-height: var(--spb-logo-maks-y, var(--spb-logo-y, 80px)) !important;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
	transition: filter var(--spb-gecis, 200ms) ease;
}

/* Gri -> Renkli Hover Efekti */
.spb-satir--gri .spb-item__logo {
	filter: grayscale(100%);
	opacity: 0.85;
}

.spb-satir--gri .spb-item__link:hover .spb-item__logo,
.spb-satir--gri .spb-item__link:focus-visible .spb-item__logo {
	filter: grayscale(0%);
	opacity: 1;
}

/* Yer Tutucu (Placeholder) */
.spb-item__yer-tutucu {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	min-height: 60px;
	background: rgba(0, 0, 0, 0.05);
	border: 1px dashed rgba(0, 0, 0, 0.2);
	border-radius: var(--spb-kart-radius, 8px);
	padding: 8px;
}

.spb-item__yer-tutucu-metin {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--spb-metin-renk, #1f2937);
	text-align: center;
}

/* ==========================================================================
   8. Duraklat / Başlat Butonu (WCAG 2.2.2 Erişilebilirlik)
   ========================================================================== */

.spb-satir__duraklat {
	position: absolute;
	bottom: 8px;
	right: 8px;
	z-index: 10;
	background: rgba(31, 41, 55, 0.85);
	color: #ffffff;
	border: none;
	border-radius: 4px;
	padding: 4px 8px;
	font-size: 0.75rem;
	font-weight: 500;
	cursor: pointer;
	opacity: 0;
	transition: opacity 200ms ease, background 200ms ease;
}

.spb-satir:hover .spb-satir__duraklat,
.spb-satir__duraklat:focus-visible {
	opacity: 1;
}

.spb-satir__duraklat:focus-visible {
	outline: 2px solid #2271b1;
	outline-offset: 2px;
}

/* ==========================================================================
   9. Koyu Mod ve RTL Desteği
   ========================================================================== */

.spb-pano.spb-tema-koyu {
	--spb-metin-renk: #f3f4f6;
}

@media (prefers-color-scheme: dark) {
	.spb-pano.spb-tema-otomatik {
		--spb-metin-renk: #f3f4f6;
	}
}

.spb-pano.spb-yon-rtl {
	direction: rtl;
}

.spb-pano.spb-yon-rtl .spb-satir__duraklat {
	right: auto;
	left: 8px;
}

/* ==========================================================================
   10. Erişilebilirlik: prefers-reduced-motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	.spb-satir__track {
		animation: none !important;
		width: 100% !important;
		flex-wrap: wrap !important;
		justify-content: center !important;
	}

	.spb-satir__track--klon,
	.spb-satir__duraklat {
		display: none !important;
	}

	.spb-satir__viewport {
		-webkit-mask-image: none !important;
		mask-image: none !important;
	}
}