/*
 * Turgutluspor header v3
 * A clean, white club identity with an unframed crest.
 */

.ts-site-header {
	background: #fff;
	box-shadow: 0 8px 30px rgba(12, 12, 14, 0.08);
	color: #121214;
}

.ts-utility-bar {
	background: #fff;
	border-bottom: 1px solid #eeeeef;
	color: #747478;
	height: 36px;
}

.ts-utility-bar__inner {
	position: relative;
}

.ts-official-label {
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.09em;
}

.ts-official-label strong {
	color: #171719;
	font-weight: 700;
}

.ts-official-label span {
	background: var(--ts-red);
	box-shadow: none;
	height: 5px;
	width: 5px;
}

.ts-utility-links {
	gap: 20px;
}

.ts-utility-links > a {
	color: #65656a;
	font-size: 9px;
	font-weight: 600;
	letter-spacing: 0.07em;
}

.ts-utility-links > a:hover {
	color: var(--ts-red);
}

.ts-social-link {
	color: #77777c;
	height: 28px;
	width: 28px;
}

.ts-social-link:hover {
	color: var(--ts-red);
	transform: translateY(-3px) scale(1.08);
}

.ts-mainbar {
	animation: ts-white-header-in 650ms cubic-bezier(0.16, 1, 0.3, 1);
	background: #fff;
	border-bottom: 1px solid #e9e9eb;
	height: 92px;
	overflow: visible;
}

.ts-mainbar__inner {
	gap: clamp(20px, 2.4vw, 42px);
	grid-template-columns: 150px minmax(0, 1fr) auto;
	overflow: visible;
}

.ts-brand,
.ts-site-header.is-scrolled .ts-brand {
	background: transparent;
	border: 0;
	box-shadow: none;
	clip-path: none;
	margin: 0;
	padding: 0;
	position: relative;
	transform: none;
	width: 150px;
	z-index: 60;
}

.ts-brand::before,
.ts-brand::after {
	display: none;
}

.ts-brand:hover {
	background: transparent;
}

.ts-brand__crest {
	animation: ts-clean-logo-in 760ms 100ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
	background: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: 0 0 0 7px #fff, 0 14px 32px rgba(13, 13, 15, 0.2);
	filter: none;
	height: 112px;
	left: 0;
	object-fit: contain;
	position: absolute;
	top: 0;
	transform: translateY(16px);
	transform-origin: center;
	transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1), height 280ms cubic-bezier(0.22, 1, 0.36, 1), width 280ms cubic-bezier(0.22, 1, 0.36, 1);
	width: 112px;
}

.ts-brand:hover .ts-brand__crest {
	transform: translateY(11px) rotate(-1.5deg) scale(1.045);
}

.ts-primary-nav > .ts-menu,
.ts-primary-nav > .menu {
	justify-content: center;
}

.ts-primary-nav > .ts-menu > li,
.ts-primary-nav > .menu > li {
	position: relative;
}

.ts-primary-nav > .ts-menu > li > a,
.ts-primary-nav > .menu > li > a {
	color: #202024;
	font-family: "Poppins", Arial, sans-serif;
	font-size: clamp(12px, 0.92vw, 14px);
	font-weight: 600;
	letter-spacing: -0.01em;
	padding-inline: clamp(9px, 0.9vw, 15px);
	text-transform: none;
}

.ts-primary-nav > .ts-menu > li > a::before,
.ts-primary-nav > .menu > li > a::before {
	background: var(--ts-red);
	border-radius: 3px 3px 0 0;
	bottom: -1px;
	height: 3px;
	width: calc(100% - 20px);
}

.ts-primary-nav > .ts-menu > li:hover > a,
.ts-primary-nav > .ts-menu > li:focus-within > a,
.ts-primary-nav > .menu > li:hover > a,
.ts-primary-nav > .menu > li:focus-within > a,
.ts-primary-nav .current-menu-item > a,
.ts-primary-nav .current_page_item > a {
	color: var(--ts-red);
}

.ts-primary-nav > .ts-menu > .menu-item-has-children:hover > a::after,
.ts-primary-nav > .ts-menu > .menu-item-has-children:focus-within > a::after,
.ts-primary-nav > .menu > .menu-item-has-children:hover > a::after,
.ts-primary-nav > .menu > .menu-item-has-children:focus-within > a::after {
	transform: rotate(225deg) translate(-1px, -1px);
}

.ts-primary-nav > .ts-menu > li:nth-child(1),
.ts-primary-nav > .menu > li:nth-child(1) { animation: ts-nav-link-in 500ms 130ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(2),
.ts-primary-nav > .menu > li:nth-child(2) { animation: ts-nav-link-in 500ms 170ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(3),
.ts-primary-nav > .menu > li:nth-child(3) { animation: ts-nav-link-in 500ms 210ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(4),
.ts-primary-nav > .menu > li:nth-child(4) { animation: ts-nav-link-in 500ms 250ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(5),
.ts-primary-nav > .menu > li:nth-child(5) { animation: ts-nav-link-in 500ms 290ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(6),
.ts-primary-nav > .menu > li:nth-child(6) { animation: ts-nav-link-in 500ms 330ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(7),
.ts-primary-nav > .menu > li:nth-child(7) { animation: ts-nav-link-in 500ms 370ms both; }
.ts-primary-nav > .ts-menu > li:nth-child(8),
.ts-primary-nav > .menu > li:nth-child(8) { animation: ts-nav-link-in 500ms 410ms both; }

.ts-store-link {
	background: #fff;
	border: 1px solid #dedee2;
	border-radius: 12px;
	color: #19191c;
	font-family: "Poppins", Arial, sans-serif;
	font-size: 12px;
	font-weight: 600;
	gap: 10px;
	height: 48px;
	letter-spacing: 0;
	padding: 7px 15px 7px 8px;
	text-transform: none;
	transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.ts-store-link::after {
	display: none;
}

.ts-store-link svg {
	background: var(--ts-red);
	border-radius: 8px;
	color: #fff;
	height: 36px;
	padding: 8px;
	width: 36px;
}

.ts-store-link:hover {
	background: #fff;
	border-color: rgba(229, 27, 35, 0.55);
	box-shadow: 0 10px 24px rgba(229, 27, 35, 0.12);
	transform: translateY(-2px);
}

.ts-store-link:hover svg {
	animation: ts-store-icon-pop 420ms cubic-bezier(0.16, 1, 0.3, 1);
}

.ts-scroll-progress {
	height: 2px;
}

.ts-site-header.is-scrolled .ts-mainbar {
	height: 72px;
}

.ts-site-header.is-scrolled .ts-brand__crest {
	height: 82px;
	transform: translateY(10px);
	width: 82px;
}

@media (min-width: 1281px) {
	.ts-primary-nav > .ts-menu > li > .sub-menu,
	.ts-primary-nav > .menu > li > .sub-menu {
		background: rgba(255, 255, 255, 0.985);
		border: 1px solid #e7e7ea;
		border-radius: 18px;
		box-shadow: 0 28px 80px rgba(18, 18, 20, 0.2);
		display: grid;
		gap: 8px;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		left: 50%;
		opacity: 0;
		overflow: hidden;
		padding: 12px;
		pointer-events: none;
		position: absolute;
		top: calc(100% - 8px);
		transform: translate(-50%, 12px) scale(0.96);
		transform-origin: top center;
		transition: clip-path 440ms cubic-bezier(0.16, 1, 0.3, 1), opacity 190ms ease, transform 340ms cubic-bezier(0.16, 1, 0.3, 1), visibility 190ms ease;
		visibility: hidden;
		width: 520px;
		z-index: 50;
	}

	.ts-primary-nav > .ts-menu > li:nth-last-child(-n+2) > .sub-menu,
	.ts-primary-nav > .menu > li:nth-last-child(-n+2) > .sub-menu {
		left: auto;
		right: 0;
		transform: translateY(12px) scale(0.96);
		transform-origin: top right;
	}

	.ts-primary-nav > .ts-menu > li:nth-child(-n+2) > .sub-menu,
	.ts-primary-nav > .menu > li:nth-child(-n+2) > .sub-menu {
		left: 0;
		right: auto;
		transform: translateY(12px) scale(0.96);
		transform-origin: top left;
	}

	.ts-primary-nav > .ts-menu > li > .sub-menu::before,
	.ts-primary-nav > .menu > li > .sub-menu::before {
		background: linear-gradient(90deg, var(--ts-red) 0 76%, var(--ts-green) 76% 100%);
		border-radius: 999px;
		height: 3px;
		left: 18px;
		right: 18px;
		top: 0;
		width: auto;
	}

	.ts-primary-nav > .ts-menu > li:hover > .sub-menu,
	.ts-primary-nav > .ts-menu > li:focus-within > .sub-menu,
	.ts-primary-nav > .ts-menu > li.is-submenu-open > .sub-menu,
	.ts-primary-nav > .menu > li:hover > .sub-menu,
	.ts-primary-nav > .menu > li:focus-within > .sub-menu,
	.ts-primary-nav > .menu > li.is-submenu-open > .sub-menu {
		opacity: 1;
		pointer-events: auto;
		transform: translate(-50%, 0) scale(1);
		visibility: visible;
	}

	.ts-primary-nav > .ts-menu > li:nth-last-child(-n+2):hover > .sub-menu,
	.ts-primary-nav > .ts-menu > li:nth-last-child(-n+2):focus-within > .sub-menu,
	.ts-primary-nav > .ts-menu > li:nth-last-child(-n+2).is-submenu-open > .sub-menu,
	.ts-primary-nav > .menu > li:nth-last-child(-n+2):hover > .sub-menu,
	.ts-primary-nav > .menu > li:nth-last-child(-n+2):focus-within > .sub-menu,
	.ts-primary-nav > .menu > li:nth-last-child(-n+2).is-submenu-open > .sub-menu {
		transform: translateY(0) scale(1);
	}

	.ts-primary-nav > .ts-menu > li:nth-child(-n+2):hover > .sub-menu,
	.ts-primary-nav > .ts-menu > li:nth-child(-n+2):focus-within > .sub-menu,
	.ts-primary-nav > .ts-menu > li:nth-child(-n+2).is-submenu-open > .sub-menu,
	.ts-primary-nav > .menu > li:nth-child(-n+2):hover > .sub-menu,
	.ts-primary-nav > .menu > li:nth-child(-n+2):focus-within > .sub-menu,
	.ts-primary-nav > .menu > li:nth-child(-n+2).is-submenu-open > .sub-menu {
		transform: translateY(0) scale(1);
	}

	.ts-submenu-intro {
		align-items: center;
		background:
			linear-gradient(112deg, #151518 0 74%, var(--ts-red) 74% 100%);
		border: 0;
		border-radius: 13px;
		color: #fff;
		display: grid;
		grid-column: 1 / -1;
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		min-height: 88px;
		overflow: hidden;
		padding: 17px 22px;
		position: relative;
	}

	.ts-submenu-intro::after {
		background: repeating-linear-gradient(135deg, rgba(255,255,255,.16) 0 1px, transparent 1px 8px);
		content: "";
		inset: 0 0 0 74%;
		pointer-events: none;
		position: absolute;
	}

	.ts-submenu-intro__identity {
		color: rgba(255, 255, 255, 0.58);
		font-size: 9px;
		font-weight: 600;
		grid-column: 1;
		letter-spacing: 0.13em;
		text-transform: uppercase;
	}

	.ts-submenu-intro__title {
		font-size: 22px;
		font-weight: 700;
		grid-column: 1;
		letter-spacing: -0.035em;
		line-height: 1.1;
	}

	.ts-submenu-intro__year {
		align-self: center;
		color: #fff;
		font-size: 17px;
		font-weight: 700;
		grid-column: 2;
		grid-row: 1 / 3;
		letter-spacing: -0.04em;
		position: relative;
		z-index: 1;
	}

	.ts-primary-nav .sub-menu > li:not(.ts-submenu-intro) {
		border: 0;
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 220ms ease, transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ts-primary-nav > .ts-menu > li:hover > .sub-menu > li,
	.ts-primary-nav > .ts-menu > li:focus-within > .sub-menu > li,
	.ts-primary-nav > .ts-menu > li.is-submenu-open > .sub-menu > li,
	.ts-primary-nav > .menu > li:hover > .sub-menu > li,
	.ts-primary-nav > .menu > li:focus-within > .sub-menu > li,
	.ts-primary-nav > .menu > li.is-submenu-open > .sub-menu > li {
		opacity: 1;
		transform: translateY(0);
	}

	.ts-primary-nav .sub-menu > li:nth-child(2) { transition-delay: 70ms; }
	.ts-primary-nav .sub-menu > li:nth-child(3) { transition-delay: 100ms; }
	.ts-primary-nav .sub-menu > li:nth-child(4) { transition-delay: 130ms; }
	.ts-primary-nav .sub-menu > li:nth-child(5) { transition-delay: 160ms; }
	.ts-primary-nav .sub-menu > li:nth-child(6) { transition-delay: 190ms; }
	.ts-primary-nav .sub-menu > li:nth-child(7) { transition-delay: 220ms; }

	.ts-primary-nav .sub-menu li:last-child {
		border-bottom: 0;
	}

	.ts-primary-nav .sub-menu a {
		background: #f6f6f7;
		border: 1px solid transparent;
		border-radius: 11px;
		color: #2a2a2e;
		font-family: "Poppins", Arial, sans-serif;
		font-size: 12px;
		font-weight: 500;
		min-height: 58px;
		padding: 0 11px 0 15px;
		transition: background 220ms ease, border-color 180ms ease, box-shadow 220ms ease, color 180ms ease, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
	}

	.ts-primary-nav .sub-menu a:hover,
	.ts-primary-nav .sub-menu a:focus-visible {
		background: var(--ts-red);
		border-color: var(--ts-red);
		box-shadow: 0 10px 20px rgba(229, 27, 35, 0.2);
		color: #fff;
		padding-left: 15px;
		transform: translateY(-2px);
	}

	.ts-primary-nav .sub-menu svg {
		background: #fff;
		border-radius: 50%;
		color: var(--ts-red);
		height: 28px;
		padding: 6px;
		width: 28px;
	}

	.ts-primary-nav .sub-menu a:hover svg {
		transform: translateX(3px) rotate(-5deg);
	}
}

.ts-menu-toggle {
	background: #18181b;
	border-radius: 11px;
}

@keyframes ts-white-header-in {
	from { opacity: 0; transform: translateY(-18px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ts-clean-logo-in {
	from { opacity: 1; transform: translateY(4px) scale(0.92); }
	to { opacity: 1; transform: translateY(16px) scale(1); }
}

@keyframes ts-nav-link-in {
	from { opacity: 0; transform: translateY(-8px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes ts-mobile-item-in {
	from { opacity: 0; transform: translateX(22px); }
	to { opacity: 1; transform: translateX(0); }
}

@keyframes ts-store-icon-pop {
	0% { transform: scale(1) rotate(0); }
	45% { transform: scale(1.13) rotate(-7deg); }
	100% { transform: scale(1) rotate(0); }
}

@media (max-width: 1280px) {
	.ts-utility-bar {
		display: none;
	}

	.ts-mainbar,
	.ts-site-header.is-scrolled .ts-mainbar {
		height: 76px;
	}

	.ts-mainbar__inner {
		gap: 12px;
		grid-template-columns: 96px minmax(0, 1fr) auto;
		padding-left: 8px;
	}

	.ts-brand,
	.ts-site-header.is-scrolled .ts-brand {
		width: 96px;
		z-index: 1302;
	}

	.ts-brand__crest,
	.ts-site-header.is-scrolled .ts-brand__crest {
		box-shadow: 0 0 0 5px #fff, 0 10px 24px rgba(13, 13, 15, 0.18);
		height: 88px;
		transform: translateY(10px);
		width: 88px;
	}

	.ts-header-actions {
		grid-column: 3;
		position: relative;
		z-index: 1303;
	}

	.ts-store-link {
		height: 46px;
	}

	.ts-menu-toggle {
		display: grid;
		height: 46px;
		width: 46px;
	}

	.ts-primary-nav {
		background: #fff;
		border-left: 1px solid #e7e7ea;
		bottom: 0;
		box-shadow: -24px 0 70px rgba(12, 12, 14, 0.15);
		color: #161619;
		left: auto;
		opacity: 0;
		overflow-y: auto;
		padding: 28px 24px 34px;
		pointer-events: none;
		position: fixed;
		right: 0;
		top: 76px;
		transform: translateX(104%);
		transition: opacity 220ms ease, transform 430ms cubic-bezier(0.16, 1, 0.3, 1), visibility 220ms ease;
		visibility: hidden;
		width: min(450px, 100%);
		z-index: 1200;
	}

	.admin-bar .ts-primary-nav {
		top: 108px;
	}

	body.ts-menu-open .ts-primary-nav {
		opacity: 1;
		pointer-events: auto;
		transform: translateX(0);
		visibility: visible;
	}

	.ts-menu-overlay {
		display: block;
	}

	body.ts-menu-open .ts-menu-overlay {
		opacity: 1;
		pointer-events: auto;
		visibility: visible;
	}

	.ts-primary-nav > .ts-menu,
	.ts-primary-nav > .menu {
		display: block;
		height: auto;
	}

	.ts-primary-nav > .ts-menu > li,
	.ts-primary-nav > .menu > li {
		animation: none;
		background: #fff;
		border: 1px solid #e8e8eb;
		border-radius: 12px;
		display: block;
		margin-bottom: 9px;
		overflow: hidden;
		position: relative;
		transition: border-color 180ms ease, box-shadow 220ms ease, transform 220ms ease;
	}

	.ts-primary-nav > .ts-menu > li:hover,
	.ts-primary-nav > .menu > li:hover {
		transform: translateX(-3px);
	}

	body.ts-menu-open .ts-primary-nav > .ts-menu > li,
	body.ts-menu-open .ts-primary-nav > .menu > li {
		animation: ts-mobile-item-in 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
	}

	body.ts-menu-open .ts-primary-nav li:nth-child(1) { animation-delay: 80ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(2) { animation-delay: 115ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(3) { animation-delay: 150ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(4) { animation-delay: 185ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(5) { animation-delay: 220ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(6) { animation-delay: 255ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(7) { animation-delay: 290ms; }
	body.ts-menu-open .ts-primary-nav li:nth-child(8) { animation-delay: 325ms; }

	.ts-primary-nav > .ts-menu > li.is-submenu-open,
	.ts-primary-nav > .menu > li.is-submenu-open {
		border-color: rgba(229, 27, 35, 0.48);
		box-shadow: 0 9px 24px rgba(229, 27, 35, 0.08);
	}

	.ts-primary-nav > .ts-menu > li > a,
	.ts-primary-nav > .menu > li > a {
		color: #19191c;
		font-family: "Poppins", Arial, sans-serif;
		font-size: 16px;
		font-weight: 600;
		letter-spacing: -0.01em;
		min-height: 60px;
		padding: 16px 58px 16px 18px;
		text-transform: none;
	}

	.ts-primary-nav > .ts-menu > li:first-child > a,
	.ts-primary-nav > .menu > li:first-child > a {
		color: var(--ts-red);
	}

	.ts-primary-nav > .ts-menu > li > a::before,
	.ts-primary-nav > .menu > li > a::before,
	.ts-primary-nav > .ts-menu > .menu-item-has-children > a::after,
	.ts-primary-nav > .menu > .menu-item-has-children > a::after {
		display: none;
	}

	.ts-submenu-toggle {
		background: #f5f5f6;
		border: 1px solid #e4e4e7;
		border-radius: 50%;
		color: #1d1d20;
		display: grid;
		height: 38px;
		place-items: center;
		position: absolute;
		right: 11px;
		top: 11px;
		width: 38px;
	}

	.menu-item-has-children.is-submenu-open > .ts-submenu-toggle {
		background: var(--ts-red);
		border-color: var(--ts-red);
		color: #fff;
	}

	.ts-primary-nav .sub-menu {
		background: #f7f7f8;
		border-top: 1px solid #ececee;
		display: grid;
		gap: 7px;
		max-height: 0;
		overflow: hidden;
		padding-inline: 14px;
		transition: max-height 380ms cubic-bezier(0.22, 1, 0.36, 1), padding 260ms ease;
	}

	.ts-primary-nav > .ts-menu > li > .sub-menu::before,
	.ts-primary-nav > .menu > li > .sub-menu::before {
		display: none;
	}

	.ts-submenu-intro {
		display: none;
	}

	.ts-primary-nav .menu-item-has-children.is-submenu-open > .sub-menu {
		max-height: 520px;
		padding-block: 8px 12px;
	}

	.ts-primary-nav .sub-menu li + li {
		border-top: 0;
	}

	.ts-primary-nav .sub-menu a {
		background: #fff;
		border: 1px solid #e7e7ea;
		border-radius: 9px;
		color: #5b5b61;
		font-family: "Poppins", Arial, sans-serif;
		font-size: 12px;
		font-weight: 500;
		min-height: 44px;
		padding: 0 9px 0 12px;
		transition: border-color 180ms ease, color 180ms ease, transform 200ms ease;
	}

	.ts-primary-nav .sub-menu a:hover,
	.ts-primary-nav .sub-menu a:focus-visible {
		border-color: rgba(229, 27, 35, 0.45);
		color: var(--ts-red);
		transform: translateX(3px);
	}

	.ts-primary-nav .sub-menu svg {
		background: #fff0f1;
		border-radius: 50%;
		color: var(--ts-red);
		height: 26px;
		padding: 5px;
		width: 26px;
	}

	.ts-mobile-nav-footer {
		border-top: 1px solid #e8e8eb;
		display: flex;
		margin-top: 24px;
		padding-top: 22px;
	}

	.ts-mobile-nav-links a {
		color: #747479;
	}

	.ts-socials--mobile .ts-social-link {
		background: #f5f5f6;
		border-radius: 50%;
		color: #3d3d42;
	}
}

@media (max-width: 782px) {
	.admin-bar .ts-primary-nav {
		top: 122px;
	}
}

@media (max-width: 600px) {
	.admin-bar .ts-site-header {
		top: 0;
	}

	.admin-bar .ts-site-header.is-scrolled .ts-primary-nav {
		top: 76px;
	}

	.ts-mainbar__inner {
		grid-template-columns: 90px minmax(0, 1fr) auto;
		padding-right: 10px;
	}

	.ts-brand,
	.ts-site-header.is-scrolled .ts-brand {
		width: 90px;
	}

	.ts-brand__crest,
	.ts-site-header.is-scrolled .ts-brand__crest {
		height: 84px;
		width: 84px;
	}

	.ts-store-link {
		padding: 6px;
		width: 46px;
	}

	.ts-store-link span {
		display: none;
	}

	.ts-store-link svg {
		height: 36px;
		width: 36px;
	}

	.ts-primary-nav {
		padding: 72px 16px 28px;
	}

	.ts-mobile-nav-footer {
		align-items: flex-start;
		flex-direction: column;
		gap: 18px;
	}
}