/*----------------------------------------------------
    CSS DEĞİŞKENLERİ
----------------------------------------------------*/
:root {
	--primary-color: #0a4b6e;
	--primary-dark: #083a57;
	--primary-light: #1977a8;
	--primary-gradient: linear-gradient(135deg, #0a4b6e 0%, #16658f 100%);
	--text-color: #ffffff;
	--shadow-color: rgba(0, 0, 0, 0.15);
	--hover-bg: rgba(255, 255, 255, 0.12);
	--dropdown-radius: 16px;
	--transition-speed: 0.3s;
}

/*----------------------------------------------------
    TEMEL NAV
----------------------------------------------------*/
nav {
	margin: 0;
	padding: 0;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
	position: relative;
	z-index: 99;
}

	nav:after {
		content: "";
		display: table;
		clear: both;
	}


.sticky {
	position: sticky !important;
	top: 0 !important;
	z-index: 99 !important;
	background: var(--bg1-degisken);
}


/*----------------------------------------------------
    LOGO
----------------------------------------------------*/
#logo {
	display: block;
	float: left;
	padding: 0 30px;
	font-size: 22px;
	font-weight: 600;
	line-height: 60px;
	color: #fff;
	letter-spacing: 0.5px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/*----------------------------------------------------
    MENU LİSTESİ
----------------------------------------------------*/
nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
	position: relative;
}

	nav ul li {
		position: relative;
		float: left;
		background: var(--bg1-degisken);
	}

/*----------------------------------------------------
    MENU BAĞLANTILARI
----------------------------------------------------*/
nav a {
	display: block;
	padding: 0 28px;
	color: var(--text-color);
	text-decoration: none;
	font-size: 15px;
	font-weight: 400;
	line-height: 55px;
	transition: all var(--transition-speed) ease;
	position: relative;
	letter-spacing: 0.3px;
}

/* Hover efekti - alt çizgi */
nav > ul > li > a::after {
	content: '';
	position: absolute;
	bottom: 12px;
	left: 50%;
	width: 0;
	height: 2.5px;
	background: #fff;
	border-radius: 4px;
	transform: translateX(-50%);
	transition: all var(--transition-speed) ease;
	box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}

nav > ul > li > a:hover::after {
	width: 50%;
}

nav > ul > li > a:hover {
 }

nav > ul > li > a:active {
	transform: scale(0.97);
}

/*----------------------------------------------------
    DROPDOWN - 1. SEVİYE
----------------------------------------------------*/
nav ul ul {
	position: absolute;
	top: calc(100% + 4px);
	left: 50%;
	transform: translateX(-50%) translateY(10px);
	min-width: 240px;
	background: #ffffff;
	border-radius: var(--dropdown-radius);
	padding: 8px 0;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.20), 0 5px 20px rgba(0, 0, 0, 0.06);
	opacity: 0;
	visibility: hidden;
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 9999;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

	/* Dropdown ok */
	nav ul ul::before {
		content: '';
		position: absolute;
		top: -8px;
		left: 50%;
		transform: translateX(-50%) rotate(45deg);
		width: 16px;
		height: 16px;
		background: #ffffff;
		border-radius: 3px 0 0 0;
		box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.04);
	}

nav > ul > li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(-50%) translateY(0);
}

/*----------------------------------------------------
    DROPDOWN ÖĞELERİ - 1. SEVİYE
----------------------------------------------------*/
nav ul ul li {
	width: 100%;
	float: none;
	background: transparent;
}

	nav ul ul li a {
		padding: 10px 22px 10px 10px;
		line-height: 1.6;
		font-size: 15px;
		font-weight: 400;
		color: #1a1a2e;
		background: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
		transition: all 0.25s ease;
		position: relative;
	}

	nav ul ul li:last-child a {
		border-bottom: none;
	}

	/* Öğe iconu */
	nav ul ul li a::before {
		content: "→";
		color: var(--primary-light);
		font-size: 15px;
		margin-right: 10px;
		opacity: 0.5;
		transition: all 0.25s ease;
		display: inline-block;
	}

	nav ul ul li a:hover {
		background: #f0f7fc;
		padding-left: 28px;
		color: var(--primary-dark);
	}

		nav ul ul li a:hover::before {
			opacity: 1;
			transform: translateX(4px);
		}

	/* İlk ve son öğe radius */
	nav ul ul li:first-child a {
		border-radius: var(--dropdown-radius) var(--dropdown-radius) 0 0;
	}

	nav ul ul li:last-child a {
		border-radius: 0 0 var(--dropdown-radius) var(--dropdown-radius);
	}

	nav ul ul li:only-child a {
		border-radius: var(--dropdown-radius);
	}

/*----------------------------------------------------
    DROPDOWN - 2. SEVİYE (Third Level)
----------------------------------------------------*/
nav ul ul ul {
	position: absolute;
	top: -6px;
	left: calc(100% + 6px);
	min-width: 220px;
	background: #ffffff;
	border-radius: var(--dropdown-radius);
	padding: 8px 0;
	box-shadow: 0 15px 50px rgba(0, 0, 0, 0.18), 0 5px 20px rgba(0, 0, 0, 0.05);
	opacity: 0;
	visibility: hidden;
	transform: translateX(12px);
	transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 99999;
	border: 1px solid rgba(255, 255, 255, 0.08);
}

	/* 2. seviye ok */
	nav ul ul ul::before {
		content: '';
		position: absolute;
		top: 18px;
		left: -7px;
		transform: rotate(45deg);
		width: 14px;
		height: 14px;
		background: #ffffff;
		border-radius: 2px 0 0 0;
		box-shadow: -4px -4px 12px rgba(0, 0, 0, 0.04);
	}

nav ul ul li:hover > ul {
	opacity: 1;
	visibility: visible;
	transform: translateX(0);
}

nav ul ul ul li a {
	padding-left: 52px;
	font-size: 14px;
	color: rgba(255,255,255,.85);
	background: transparent;
	border-bottom: 1px solid rgba(255,255,255,.03);
}

	nav ul ul ul li a:hover {
		background: var(--bg1-degisken);
		color: #fff;
		padding-left: 58px;
	}

	nav ul ul ul li a::before {
		content: "•";
		font-size: 18px;
		color: var(--primary-light);
		opacity: 0.4;
		margin-right: 10px;
	}

 

		nav ul ul ul li a:hover::before {
			opacity: 1;
		}

nav ul ul ul li:first-child a {
	border-radius: var(--dropdown-radius) var(--dropdown-radius) 0 0;
}

nav ul ul ul li:last-child a {
	border-radius: 0 0 var(--dropdown-radius) var(--dropdown-radius);
}

nav ul ul ul li:only-child a {
	border-radius: var(--dropdown-radius);
}

/*----------------------------------------------------
    PLUS ICON
----------------------------------------------------*/



/*----------------------------------------------------
    RESPONSIVE - TABLET
----------------------------------------------------*/
@media all and (max-width: 1120px) {
	#logo {
		display: block;
		width: 100%;
		padding: 0;
		text-align: center;
		float: none;
		line-height: 60px;
	}
}

.toggle,
[id^=drop] {
	display: none;
}

/*----------------------------------------------------
    RESPONSIVE - MOBİL
----------------------------------------------------*/
@media all and (max-width: 1100px) {
	#logo {
		width: 100%;
		float: none;
		text-align: center;
		padding: 0;
		font-size: 18px;
		line-height: 55px;
	}

	nav {
		background: var(--primary-color);
		box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
	}

	.menu {
		display: none;
		max-height: 550px;
		overflow-y: auto;
		background: var(--primary-dark);
		border-top: 1px solid rgba(255, 255, 255, 0.06);
	}

	.toggle + a {
		display: none;
	}

	.toggle {
		display: block;
		background: var(--bg1-degisken);
		color: #fff;
		padding: 0 18px;
		line-height: 55px;
		text-decoration: none;
		font-size: 16px;
		font-weight: 500;
		cursor: pointer;
		user-select: none;
		transition: background 0.3s ease;
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

		.toggle:hover {
			background: var(--bg1-degisken);
		}

 

	[id^=drop]:checked + .menu {
		display: block;
	}

	nav ul li {
		width: 100%;
		float: none;
		background: var(--bg1-degisken);
	}

		nav ul li a {
			font-weight: 500;
			line-height: 44px;
			padding: 0 18px;
			font-size: 16px;
			border-bottom: 1px solid rgba(255, 255, 255, 0.04);
			color: #fff;
		}

	nav > ul > li > a::after {
		display: none;
	}

	nav > ul > li > a:hover {
		background: rgba(255, 255, 255, 0.06);
	}

	/* Mobil dropdown */
	nav ul ul {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		display: none;
		width: 100%;
		min-width: 100%;
		border-radius: 0;
		box-shadow: none;
		background: var(--bg1-degisken);
		padding: 0;
		border: none;
		margin: 0;
	}

		nav ul ul::before {
			display: none;
		}

		nav ul ul li {
			width: 100%;
			background: transparent;
		}

			nav ul ul li a {
				padding-left: 35px;
				background: transparent;
				color: rgba(255, 255, 255, 0.85);
				border-bottom: 1px solid rgba(255, 255, 255, 0.03);
				border-radius: 0 !important;
			}

				nav ul ul li a::before {
					content: "›";
					font-size: 16px;
					color: rgba(255, 255, 255, 0.3);
					margin-right: 8px;
				}

				nav ul ul li a:hover {
					background: rgba(255, 255, 255, 0.06);
					padding-left: 42px;
					color: #fff;
				}

		nav ul ul ul {
			position: static;
			margin: 0;
			padding: 0;
			border-radius: 0;
			box-shadow: none;
			background: rgba(0, 0, 0, 0.15);
		}

			nav ul ul ul::before {
				display: none;
			}

			nav ul ul ul li a {
				padding-left: 52px;
				font-size: 16px;
			}

				nav ul ul ul li a::before {
					content: "◦";
					font-size: 14px;
				}

				nav ul ul ul li a:hover {
					padding-left: 58px;
				}

	nav ul li:hover > ul {
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	li > a:after {
		content: " ▾";
		font-size: 10px;
		opacity: 0.5;
		float: right;
	}

	nav > ul > li:hover > a:after {
		transform: none;
	}

	input[id^="drop-"]:checked + ul {
		display: block;
	}
}

/*----------------------------------------------------
    RESPONSIVE - KÜÇÜK MOBİL
----------------------------------------------------*/
@media all and (max-width: 480px) {
	#logo {
		font-size: 16px;
		line-height: 48px;
	}

	.toggle {
		line-height: 50px;
		font-size: 16px;
	}

	nav ul li a {
		font-size: 16px;
		line-height: 38px;
		padding: 0px 18px;

;
		font-weight:500;
	}

	nav ul ul li a {
		padding-left: 28px;
		font-size: 16px;
	}

	nav ul ul ul li a {
		padding-left: 44px;
		font-size: 16px;
	}
}

/*----------------------------------------------------
    SCROLLBAR - MOBİL
----------------------------------------------------*/
@media all and (max-width: 1100px) {
	.menu::-webkit-scrollbar {
		width: 4px;
	}

	.menu::-webkit-scrollbar-track {
		background: rgba(255, 255, 255, 0.05);
	}

	.menu::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 4px;
	}

		.menu::-webkit-scrollbar-thumb:hover {
			background: rgba(255, 255, 255, 0.3);
		}


}

/* Sadece dropdown içindeki alt menüler için + göster */
nav ul ul > li > a:not(:only-child)::after {
	content: "+";
	float: right;
	font-size: 14px;
	font-weight: 600;
	opacity: .7;
	color: var(--primary-light);
}


@media all and (max-width:1100px) {

	nav ul ul li:hover > ul {
		display: none;
		opacity: 0;
		visibility: hidden;
	}

	input[id^="drop-"]:checked + ul {
		display: block !important;
		opacity: 1;
		visibility: visible;
	}
	.plus-icon {
		display: none;
	}

	}

@media (min-width:1100px) {

	nav ul ul ul li a {
		line-height: 1.6;
		font-size: 14px;
		font-weight: 400;
		color: #1a1a2e;
		background: transparent;
		border-bottom: 1px solid rgba(0, 0, 0, 0.04);
		transition: all 0.25s ease;
		padding: 10px 22px 10px 10px;
	}

		nav ul ul ul li a:hover {
			color: var(--primary-dark);
			background: rgba(255,255,255,.06) !important;
			padding: 10px 22px 10px 10px;
		}


	.plus-icon {
		position: absolute;
		right: 10px;
		top: 50%;
		transform: translateY(-50%);
		color: #fff;
		font-size: 12px;
		pointer-events: none;
	}

	nav ul > li {
		position: relative;
	}

}