/* =========================================================
   RASHID ÜST MENÜ — SİYAH METALİK
   AYIRICI ÇİZGİLER LİNKLERİN DIŞINDA
   HOVER KIRMIZI — AYIRICIYA TAŞMAZ
   SADECE FOOTER'DAKİ PARLAKLIK EFEKTİ EKLENDİ
   ========================================================= */

:root {
	--rashidi-accent: #386e21;
	--rashidi-hover-top: #d84848;
	--rashidi-hover-mid: #a01818;
	--rashidi-hover-dark: #500000;
}


/* =========================================================
   1) ANA MENÜ
   ========================================================= */

#rashidi-mainmenu {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;

	box-sizing: border-box;

	background:
		linear-gradient(
			to bottom,
			#858585 0%,
			#656565 8%,
			#444444 22%,
			#292929 42%,
			#181818 62%,
			#090909 84%,
			#000000 100%
		);

	border-top: 1px solid #999;
	border-bottom: 2px solid #000;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.35),
		inset 0 -2px 0 rgba(0,0,0,.95),
		inset 0 0 18px rgba(255,255,255,.06),
		0 3px 8px rgba(0,0,0,.55);

	position: relative;
	z-index: 100;
}


/* =========================================================
   MENÜ LİSTESİ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: stretch;

	width: 100%;

	margin: 0;
	padding: 0;

	list-style: none;

	background: transparent;

	box-sizing: border-box;
}


/* =========================================================
   HER MENÜ ÖĞESİ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li {

	display: flex;
	align-items: stretch;

	position: relative;

	margin: 0;
	padding: 0;

	list-style: none;

	min-width: 0;
}


/* =========================================================
   LİNK
   BUTON GÖRÜNÜMÜ YOK — SADECE FOOTER'DAKİ PARLAKLIK EFEKTİ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li a,
#rashidi-mainmenu ul.rashidi-menu li a:link,
#rashidi-mainmenu ul.rashidi-menu li a:visited {

	display: flex;

	align-items: center;
	justify-content: center;

	min-height: 44px;

	/*
	 * SAĞDA AYIRICI ÇİZGİ İÇİN BOŞLUK
	 */
	margin: 0 5px 0 0;

	padding: 10px 14px !important;

	box-sizing: border-box;

	border: 0;
	border-radius: 0;

	color: #ffffff !important;

	text-decoration: none !important;

	font-size: 13px;
	font-weight: 700;

	letter-spacing: .25px;

	line-height: 1.2;

	white-space: nowrap;

	text-align: center;

	position: relative;

	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,.19) 0%,
			rgba(255,255,255,.08) 18%,
			rgba(255,255,255,.025) 42%,
			rgba(0,0,0,.08) 65%,
			rgba(0,0,0,.32) 100%
		) !important;

	/* FOOTER'DAKİ PARLAKLIK EFEKTİ */
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.35),
		inset 0 -1px 0 rgba(0,0,0,0.6),
		0 2px 4px rgba(0,0,0,0.55);

	text-shadow:
		0 1px 2px #000,
		0 0 4px rgba(255,255,255,.15);

	transition:
		background .18s ease,
		box-shadow .18s ease,
		color .18s ease;
}


/* =========================================================
   ÜST METALİK PARLAKLIK ÇİZGİSİ
   (Footer'daki butonların üst parlak çizgisi)
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li a::before {

	content: "";

	position: absolute;

	top: 0;

	left: 8%;
	right: 8%;

	height: 1px;

	background:
		linear-gradient(
			to right,
			transparent,
			rgba(255,255,255,.55),
			transparent
		);

	opacity: .65;

	pointer-events: none;
}


/* =========================================================
   MENÜLER ARASI AYIRICI ÇİZGİ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li:not(:last-child)::after {

	content: "";

	position: absolute;

	right: 0;

	top: 0;
	bottom: 0;

	width: 1px;

	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,.10) 0%,
			rgba(255,255,255,.45) 12%,
			rgba(255,255,255,.28) 50%,
			rgba(0,0,0,.75) 88%,
			rgba(0,0,0,.95) 100%
		);

	box-shadow:
		-1px 0 0 rgba(0,0,0,.75),
		1px 0 0 rgba(255,255,255,.08);

	pointer-events: none;

	z-index: 50;

	opacity: .95;
}


/* =========================================================
   HOVER — KIRMIZI + FOOTER PARLAKLIK EFEKTİ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li a:hover,
#rashidi-mainmenu ul.rashidi-menu li a:focus,
#rashidi-mainmenu ul.rashidi-menu li a:active {

	color: #ffffff !important;

	background:
		linear-gradient(
			to bottom,
			#d84848 0%,
			#c43a3a 16%,
			#a01818 38%,
			#800000 58%,
			#570000 78%,
			#2a0000 100%
		) !important;

	text-decoration: none !important;

	/* FOOTER'DAKİ HOVER PARLAKLIK EFEKTİ */
	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.45),
		inset 0 -1px 0 rgba(0,0,0,0.45),
		0 0 14px rgba(139,0,0,0.65),
		0 2px 6px rgba(0,0,0,0.7);

	text-shadow:
		0 1px 2px rgba(0,0,0,.95),
		0 0 7px rgba(255,255,255,.55);
}


/* =========================================================
   HOVER SIRASINDA AYIRICI AYNI KALIR
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li:hover::after {

	background:
		linear-gradient(
			to bottom,
			rgba(255,255,255,.12) 0%,
			rgba(255,255,255,.50) 12%,
			rgba(255,255,255,.30) 50%,
			rgba(0,0,0,.80) 88%,
			rgba(0,0,0,.95) 100%
		);

	opacity: 1;
}


/* =========================================================
   SON MENÜ
   ========================================================= */

#rashidi-mainmenu ul.rashidi-menu li:last-child a {

	margin-right: 0;
}


/* =========================================================
   2) NAVİGASYON
   ========================================================= */

.navigation {

	color: #333;

	font-size: 13px;

	line-height: 1.5;

	padding: 2px 0;
}


/* =========================================================
   NAVİGASYON LİNKLERİ — BUTON GÖRÜNÜMÜ YOK
   ========================================================= */

.navigation a:link,
.navigation a:visited {

	display: inline-block;

	padding: 3px 7px;

	margin: 0 1px;

	border-radius: 3px;

	color: var(--rashidi-accent);

	text-decoration: none;

	font-size: 13px;

	font-weight: 700;

	background: transparent;

	transition:
		background .18s ease,
		color .18s ease,
		box-shadow .18s ease;
}


/* =========================================================
   NAVİGASYON HOVER
   ========================================================= */

.navigation a:hover,
.navigation a:active {

	color: #ffffff !important;

	background:
		linear-gradient(
			to bottom,
			#c83c3c 0%,
			#900000 48%,
			#360000 100%
		) !important;

	text-decoration: none !important;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,.35),
		0 0 8px rgba(128,0,0,.65),
		0 2px 4px rgba(0,0,0,.3);

	text-shadow:
		0 1px 2px rgba(0,0,0,.7);
}


/* =========================================================
   AKTİF NAVİGASYON
   ========================================================= */

.navigation .active {

	color: var(--rashidi-accent);

	font-size: 13px;

	font-weight: 700;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

	#rashidi-mainmenu ul.rashidi-menu li a {

		min-height: 40px;

		margin-right: 4px;

		padding: 9px 11px !important;

		font-size: 12px;

		letter-spacing: .15px;
	}

	#rashidi-mainmenu ul.rashidi-menu li:not(:last-child)::after {

		right: 0;
	}
}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 700px) {

	#rashidi-mainmenu {

		border-top: 1px solid #777;
	}

	#rashidi-mainmenu ul.rashidi-menu {

		justify-content: center;
	}

	#rashidi-mainmenu ul.rashidi-menu li {

		flex: 0 0 auto;
	}

	#rashidi-mainmenu ul.rashidi-menu li a {

		min-height: 38px;

		margin-right: 3px;

		padding: 8px 10px !important;

		font-size: 11px;
	}

	/*
	 * MOBİLDE AYIRICILAR KALDIRILIR
	 */

	#rashidi-mainmenu ul.rashidi-menu li:not(:last-child)::after {

		display: none;
	}

	#rashidi-mainmenu ul.rashidi-menu li a::before {

		display: none;
	}
}


/* =========================================================
   ÇOK DAR EKRAN
   ========================================================= */

@media (max-width: 450px) {

	#rashidi-mainmenu ul.rashidi-menu li {

		width: 50%;
	}

	#rashidi-mainmenu ul.rashidi-menu li a {

		width: calc(100% - 3px);

		min-height: 36px;

		margin-right: 3px;

		padding: 8px 6px !important;

		font-size: 11px;
	}
}