/**
 * Header Default Styles
 * 
 * 🇹🇷 TR: Varsayılan header stilleri - ESK yapısı
 * 🇬🇧 EN: Default header styles - ESK structure
 * 🎯 PURPOSE: Fallback header styling
 * 
 * @package GRPCMedia
 */

/* ============================================================================
   TOP BAR - Blue Background
   ============================================================================ */

:root {
	--header-top-height: 95px; /* Top bar height (for sticky calc) */
}

.header-top {
	background: linear-gradient(135deg, #2F2483 0%, #1e1850 100%);
	color: #fff;
	padding: 12px 0;
	box-shadow: 0 2px 5px rgba(0,0,0,0.1);
	height: auto; /* Auto height */
}

.header-top-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
}

/* Contact Info */
.header-top-left .contact-info {
	display: flex;
	gap: 25px;
	list-style: none;
	margin: 0;
	padding: 0;
	align-items: center;
}

.header-top-left .contact-info li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
}

.header-top-left .contact-info a {
	color: #fff;
	text-decoration: none;
	transition: opacity 0.3s;
}

.header-top-left .contact-info a:hover {
	opacity: 0.8;
}

.header-top-left .contact-info i {
	font-size: 14px;
}

/* Social Icons + CTA */
.header-top-right {
	display: flex;
	align-items: center;
	gap: 20px;
}

.header-top-right .social-icons {
	display: flex;
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.header-top-right .social-icons a {
	color: #fff;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: rgba(255,255,255,0.15);
	transition: all 0.3s;
	text-decoration: none;
}

.header-top-right .social-icons a:hover {
	background: rgba(255,255,255,0.3);
	transform: translateY(-2px);
}

/* Blog Button (NEW - soluk mavi background with icon) */
.header-top-right .btn-blog {
	background: rgba(255, 255, 255, 0.25); /* Soluk beyaz/mavi karışımı */
	color: #ffffff;
	padding: 8px 20px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.3s;
	border: 1px solid rgba(255, 255, 255, 0.3);
	white-space: nowrap;
	display: flex;
	align-items: center;
	gap: 8px;
}

.header-top-right .btn-blog:hover {
	background: rgba(255, 255, 255, 0.35);
	color: #ffffff;
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, 0.5);
}

.header-top-right .btn-cta {
	background: #fff;
	color: #2F2483;
	padding: 8px 20px;
	border-radius: 6px;
	font-weight: 600;
	font-size: 14px;
	text-decoration: none;
	transition: all 0.3s;
	box-shadow: 0 2px 8px rgba(0,0,0,0.15);
	white-space: nowrap;
}

.header-top-right .btn-cta:hover {
	background: #27243b;
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* ============================================================================
   MAIN NAV - White Background
   ============================================================================ */

/* HEADER NAV - ESK STRUCTURE (wrapper → container → inner) */
.header-nav {
	/* Just a wrapper - no special styling needed */
}

.header-nav-wrapper.navbar-scrolltofixed {
	min-width: 100%;
	transition: all 0.3s ease;
	/* JavaScript will add position: fixed dynamically! */
}

.header-nav-wrapper {
	background: white !important;
	box-shadow: 0 2px 10px rgba(0,0,0,0.08) !important;
	width: 100%;
	/* JavaScript FIXED mode - scroll aşağı: mavi kaybolur, beyaz SABİT! */
	/* position/top/z-index JavaScript tarafından dinamik ekleniyor */
}

.header-nav-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 !important; /* PADDING SIFIR - Logo tam yükseklikte */
	min-height: 98px; /* Toplam yükseklik korunuyor */
}

/* Logo - TAM YÜKSEKLİK (padding yok!) */
.site-logo {
	display: flex;
	align-items: center;
	justify-content: flex-start; /* Sol tarafa hizala */
	padding: 0 !important; /* Padding sıfır */
	margin: 0 !important; /* Margin sıfır */
	height: 98px !important; /* Tam yükseklik */
}

.site-logo a,
.site-logo .custom-logo-link {
	display: flex !important;
	align-items: center !important;
	padding: 0 !important;
	margin: 0 !important;
	height: 98px !important;
	line-height: 1 !important;
}

/* ULTRA STRONG SELECTORS - TAM YÜKSEKLİK! */
.site-logo img,
.site-logo .custom-logo,
.site-logo a img,
.site-logo a .custom-logo,
header#header .site-logo img,
header#header .site-logo .custom-logo,
header#header .site-logo a img,
.header-nav .site-logo img,
div.site-logo img[class*="custom-logo"] {
	max-height: 98px !important; /* TAM YÜKSEKLİK (54px → 98px) */
	width: auto !important; /* Width otomatik ayarlanır */
	height: 98px !important; /* HEIGHT = 98px (TAM!) */
	min-width: 0 !important; /* Reset min-width */
	max-width: none !important; /* No max-width limit */
	object-fit: contain !important;
	transition: all 0.3s ease !important;
	display: inline-block !important;
	padding: 0 !important; /* Padding sıfır */
	margin: 0 !important; /* Margin sıfır */
	vertical-align: middle !important;
}

.site-logo .site-name {
	color: #2F2483;
	font-size: 18px;
	font-weight: 700;
	text-decoration: none;
	line-height: 40px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Desktop Menu */
.primary-nav.desktop-menu {
	display: flex;
	gap: 5px;
	align-items: center;
}

.primary-nav .nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 5px;
}

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

.primary-nav .nav-menu > li > a {
	color: #27243b;
	text-decoration: none;
	padding: 10px 18px;
	font-weight: 500;
	font-size: 15px;
	transition: all 0.3s;
	border-radius: 6px;
	display: flex;
	align-items: center;
	gap: 5px;
}

.primary-nav .nav-menu > li > a:hover {
	background: rgba(47, 36, 131, 0.08);
	color: #2F2483;
}

/* Dropdown */
.primary-nav .nav-menu > li > .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	box-shadow: 0 4px 20px rgba(0,0,0,0.12);
	border-radius: 8px;
	min-width: 220px;
	padding: 10px 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: all 0.3s;
	z-index: 1000;
	list-style: none;
	margin: 0;
}

.primary-nav .nav-menu > li:hover > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.primary-nav .sub-menu li a {
	display: block;
	padding: 10px 20px;
	color: #27243b;
	text-decoration: none;
	font-size: 14px;
	transition: all 0.3s;
}

.primary-nav .sub-menu li a:hover {
	background: #f5f5f5;
	color: #2F2483;
	padding-left: 25px;
}

/* Mobile Hamburger */
.mobile-menu-toggle {
	display: none;
	background: none;
	border: none;
	font-size: 24px;
	color: #27243b;
	cursor: pointer;
	padding: 8px;
	flex-direction: column;
	gap: 4px;
}

.mobile-menu-toggle .hamburger-line {
	width: 25px;
	height: 3px;
	background: #27243b;
	transition: all 0.3s;
	border-radius: 2px;
}

/* ============================================================================
   MENUZORD NAVIGATION (ESK INTEGRATION)
   ============================================================================ */

/* Menuzord container - FULL WIDTH! */
.menuzord,
nav#top-primary-nav {
	padding: 0 !important; /* Remove default padding */
	width: 100% !important; /* FULL WIDTH (menü için alan) */
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* Desktop menu - LOGO SOL + TÜM MENÜ SAĞ */
@media (min-width: 1025px) {
	.header-nav-inner {
		display: flex !important;
		justify-content: space-between !important; /* Logo sol, menü sağ */
		align-items: center !important;
	}
	
	.menuzord,
	nav#top-primary-nav {
		display: flex !important;
		justify-content: flex-end !important; /* TÜM MENÜ SAĞ */
		flex: 1 !important; /* Geri kalan alanı kapla */
	}
	
	.menuzord-menu {
		display: flex !important;
		justify-content: flex-end !important; /* İtemlar sağda */
		width: 100% !important;
	}
	
	/* SCROLLABLE-FIX KIRMIZI ALAN - TAM GİZLE! */
	.scrollable-fix,
	li.scrollable-fix,
	.menuzord-menu > .scrollable-fix,
	.menuzord-menu .scrollable-fix {
		display: none !important;
		width: 0 !important;
		height: 0 !important;
		margin: 0 !important;
		padding: 0 !important;
		visibility: hidden !important;
	}
}

/* Desktop: Hide showhide button */
.menuzord .showhide {
	display: none;
}

/* Desktop Menu: Horizontal layout with rounded buttons */
.menuzord-menu {
	display: flex !important;
	flex-direction: row;
	align-items: center;
	gap: 0;
}

.menuzord-menu > li {
	display: inline-block;
	float: none;
	margin: 0;
	padding: 0;
}

.menuzord-menu > li > a {
	padding: 10px 18px;
	border-radius: 25px;
	font-size: 15px;
	font-weight: 600;
	color: #333333;
	transition: all 0.3s;
}

/* Theme Color (Blue - #2F2483) */
.menuzord.theme-color1 .menuzord-menu > li.active > a,
.menuzord.theme-color1 .menuzord-menu > li:hover > a {
	background: #2F2483 !important; /* GRPCMedia primary blue */
	color: #ffffff !important;
}

.menuzord.theme-color1 .menuzord-menu ul.dropdown li:hover > a {
	background: linear-gradient(90deg, rgba(47, 36, 131, 0.06), rgba(47, 36, 131, 0.02)) !important;
	color: #2F2483 !important;
	padding-left: 28px !important;
	border-left: 3px solid #2F2483 !important;
}

/* ====== DESKTOP DROPDOWN - ESK Style (Clean & Simple) ====== */
.menuzord-menu ul.dropdown {
	background: #ffffff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	border-radius: 0;
	padding: 0;
	min-width: 230px;
	border: none;
}

.menuzord-menu ul.dropdown li {
	border-bottom: 1px solid #f5f5f5;
}

.menuzord-menu ul.dropdown li:last-child {
	border-bottom: none;
}

.menuzord-menu ul.dropdown li a {
	color: #555555;
	padding: 12px 25px 12px 22px;
	font-size: 14px;
	font-weight: 500;
	display: block;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	background: none;
	border-left: 3px solid transparent;
	position: relative;
}

.menuzord-menu ul.dropdown li:hover > a {
	padding-left: 28px;
	padding-right: 25px;
	color: #2F2483;
	background: linear-gradient(90deg, rgba(47, 36, 131, 0.06), rgba(47, 36, 131, 0.02));
	border-left: 3px solid #2F2483;
	font-weight: 600;
	box-shadow: inset 0 1px 0 rgba(47, 36, 131, 0.08);
}

/* ============================================================================
   MENUZORD RESPONSIVE MODE (< 1200px)
   ============================================================================ */

@media (max-width: 1199.98px) {
	/* Show hamburger button */
	.menuzord-responsive .showhide {
		display: block !important;
		margin: 0;
		float: right;
		z-index: 10000 !important; /* Above menu */
		position: relative !important;
	}
	
	/* Menu background (dark gray - resimdeki gibi!) */
	.menuzord-responsive .menuzord-menu,
	.menuzord-responsive.menuzord .menuzord-menu,
	nav.menuzord-responsive .menuzord-menu {
		background: #3e3e3e !important; /* Dark gray */
		width: 96vw !important; /* 96% of VIEWPORT WIDTH (parent constraint yok!) */
		min-width: 96vw !important; /* MIN WIDTH - Viewport based */
		max-width: 96vw !important; /* MAX WIDTH - Viewport based */
		float: none !important;
		display: none !important; /* DEFAULT: HIDDEN! (Menuzord slideDown ile açacak) */
		flex-direction: column !important; /* ALT ALTA (vertical) */
		align-items: stretch !important; /* Full width items */
		gap: 0 !important; /* No gap between items */
		height: auto !important; /* AUTO HEIGHT (sadece içerik kadar - 2. resim gibi!) */
		max-height: calc(100vh - 120px) !important; /* Max height (ekrandan taşmasın) */
		position: fixed !important; /* FIXED (parent constraint KALDIRILDI!) */
		top: auto !important; /* Auto top */
		left: 50% !important; /* ORTALANMIŞ (centered - viewport'a göre) */
		right: auto !important; /* Right auto (left/transform yeterli) */
		transform: translateX(-50%) !important; /* Perfect centering */
		z-index: 9999 !important; /* Above everything */
		overflow-y: auto !important; /* Scrollable */
		-webkit-overflow-scrolling: touch !important;
		padding: 0 !important; /* No extra padding */
		margin: 10px 0 !important; /* Top margin */
		border-radius: 8px !important; /* Rounded corners (modern) */
		box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important; /* Shadow (depth) */
		box-sizing: border-box !important; /* Padding içeride hesapla */
		
		/* SMOOTH ANIMATION (ESK Menuzord - 250ms slideDown/slideUp) */
		opacity: 0 !important;
		transition: opacity 0.25s ease-out !important;
	}
	
	/* Menu OPEN state - Smooth fade in + flex layout */
	.menuzord-responsive .menuzord-menu[style*="display: block"],
	.menuzord-responsive .menuzord-menu[style*="display: flex"] {
		opacity: 1 !important; /* Fade in */
		display: flex !important; /* Convert block to flex for vertical layout */
	}
	
	/* Menu items - ALT ALTA (vertical) layout */
	.menuzord-responsive .menuzord-menu > li {
		width: 100% !important; /* Full width */
		display: block !important; /* Block layout */
		position: relative !important;
		margin: 0 !important;
		padding: 0 !important;
	}
	
	/* Menu items - white text, full width */
	.menuzord-responsive .menuzord-menu > li > a {
		width: 100% !important; /* Full width */
		display: block !important; /* Block layout */
		color: #ffffff !important;
		padding: 12px 20px !important; /* ESK padding */
		border-bottom: solid 1px #f0f0f0 !important; /* ESK border */
		border-radius: 0 !important; /* No border radius on mobile */
		font-size: 15px !important;
		font-weight: 400 !important; /* Normal weight */
	}
	
	/* First item border-top */
	.menuzord-responsive .menuzord-menu > li:first-child > a {
		border-top: solid 1px #f0f0f0 !important;
	}
	
	/* Dropdown container - Modern design + ORTALANMIŞ! */
	.menuzord-responsive .menuzord-menu ul.dropdown {
		padding: 12px 0 !important; /* Üst/alt padding */
		background: rgba(255, 255, 255, 0.05) !important; /* Subtle light background */
		position: static !important; /* STATIC position (alttaki item'ları iter!) */
		width: 90% !important; /* 90% genişlik (ortalanmış için) */
		max-width: 350px !important; /* Max 350px */
		box-sizing: border-box !important; /* Padding içeride */
		display: none !important; /* Default hidden */
		margin: 0 auto !important; /* ORTALANMIŞ (auto margin) */
		left: auto !important;
		right: auto !important;
	}
	
	/* Dropdown OPEN state - Menuzord slideDown ile açar */
	.menuzord-responsive .menuzord-menu ul.dropdown[style*="display: block"] {
		display: block !important;
	}
	
	/* Sub-menu items - MODERN ROUNDED BUTTON STYLE! */
	.menuzord-responsive .menuzord-menu ul.dropdown li {
		margin: 0 0 10px 0 !important; /* Sadece alt margin */
		width: 100% !important; /* TAM GENİŞLİK */
		box-sizing: border-box !important;
		list-style: none !important;
		padding: 0 15px !important; /* Sol/sağ padding (container'da) */
	}
	
	.menuzord-responsive .menuzord-menu ul.dropdown li:last-child {
		margin-bottom: 8px !important; /* Alt margin da olsun */
	}
	
	.menuzord-responsive .menuzord-menu ul.dropdown li a {
		color: #555555 !important; /* Dark gray text (default) */
		background: linear-gradient(180deg, #f5f5f5 0%, #e8e8e8 100%) !important; /* Light gray gradient */
		padding: 12px 16px !important; /* Comfortable padding */
		border-radius: 8px !important; /* Rounded corners (modern) */
		font-size: 14px !important;
		font-weight: 500 !important;
		transition: all 0.35s ease !important; /* Smooth animation */
		display: block !important;
		width: 100% !important; /* TAM GENİŞLİK */
		box-sizing: border-box !important;
		text-align: center !important; /* ORTALANMIŞ TEXT! */
		border: 1px solid rgba(0,0,0,0.05) !important; /* Subtle border */
		box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important; /* Shadow */
	}
	
	/* Dropdown item HOVER - Light blue (resimdeki gibi!) */
	.menuzord-responsive .menuzord-menu ul.dropdown li a:hover,
	.menuzord-responsive .menuzord-menu ul.dropdown li.active > a {
		color: #2F2483 !important; /* Blue text */
		background: linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%) !important; /* Light blue gradient */
		border-color: #2F2483 !important; /* Blue border */
		box-shadow: 0 2px 6px rgba(47, 36, 131, 0.15) !important; /* Blue shadow */
		transform: translateY(-1px) !important; /* Subtle lift effect */
	}
	
	/* Indicator (toggle button) - ESK EXACT STYLE! */
	.menuzord-responsive .menuzord-menu li .indicator {
		width: 60px !important; /* ESK width */
		height: 45px !important; /* ESK height */
		position: absolute !important;
		right: 0 !important;
		top: 0 !important;
		font-size: 22px !important; /* ESK font size */
		text-align: center !important;
		line-height: 43px !important;
		color: #2F2483 !important; /* Blue chevron (ESK exact color) */
		border-left: solid 1px rgba(255,255,255,0.1) !important;
		cursor: pointer !important;
		transition: transform 0.3s ease !important;
	}
	
	/* Indicator hover */
	.menuzord-responsive .menuzord-menu li .indicator:hover {
		background: rgba(47, 36, 131, 0.1) !important;
	}
	
	/* Active indicator (rotated DOWN) */
	.menuzord-responsive .menuzord-menu li .indicator.active {
		transform: rotate(180deg) !important;
	}
}

/* ============================================================================
   MENUZORD CUSTOM OVERRIDES (OLD MOBILE-MENU CSS REMOVED)
   ============================================================================ */

/* Note: Menuzord.css handles all responsive behavior automatically.
   Custom theme colors and minor adjustments are in the @media section above. */

/* ============================================================================
   RESPONSIVE
   ============================================================================ */

@media (max-width: 992px) {
	.desktop-menu {
		display: none !important;
	}
	
	.mobile-menu-toggle {
		display: flex !important;
	}
	
	.header-top-inner {
		flex-direction: column;
		gap: 15px;
	}
	
	.header-top-left,
	.header-top-right {
		width: 100%;
		justify-content: center;
	}
	
	.header-top-left .contact-info {
		flex-wrap: wrap;
		justify-content: center;
		font-size: 12px;
	}
}

@media (max-width: 576px) {
	.header-top {
		padding: 10px 0;
	}
	
	.header-top-left .contact-info {
		flex-direction: column;
		gap: 8px;
		text-align: center;
	}
	
	.header-nav-inner {
		padding: 15px 0; /* Mobile - orantılı yükseklik (40px logo + 30px padding = 70px) */
	}
	
	/* Mobile logo - ESK exact */
	.site-logo img,
	.site-logo .custom-logo,
	.site-logo a img,
	header#header .site-logo img,
	div.site-logo img[class*="custom-logo"] {
		max-height: 40px !important; /* ESK mobile exact */
		max-width: 200px !important; /* ESK mobile exact */
	}
}