/**
 * Üst bar + ana menü: boşluk doldurma, orta hizalama, menü butonu (font bağımsız).
 */

/* ── Mobil üst şerit: telefon + sosyal (referans düzeni) ──
   Tema `designesia.js` 993px altında `header-mobile` ekler; `style.css` ise
   `#topbar` ve `header.header-light.header-mobile` ile çakışır. `scroll-light`
   kaldırılınca veya tablet genişliğinde eski seçiciler eşleşmeyebilir — bu blok
   her zaman uygulanır. */
@media (max-width: 992.98px) {
	header.header-light.has-topbar #topbar,
	header.header-light.header-mobile.has-topbar #topbar {
		background: #ffffff !important;
		border-bottom: 1px solid rgba(10, 37, 64, 0.08);
		padding-top: 6px;
		padding-bottom: 6px;
		opacity: 1 !important;
		visibility: visible !important;
	}
	header.header-light.has-topbar #topbar .topbar-main-row,
	header.header-light.header-mobile.has-topbar #topbar .topbar-main-row {
		min-height: 40px;
		row-gap: 6px;
	}
	header.header-light.has-topbar #topbar .topbar-widget a,
	header.header-light.has-topbar #topbar .social-icons a,
	header.header-light.header-mobile.has-topbar #topbar .topbar-widget a,
	header.header-light.header-mobile.has-topbar #topbar .social-icons a {
		color: var(--title-font-color, #0a2540) !important;
	}
	header.header-light.has-topbar #topbar .topbar-widget,
	header.header-light.header-mobile.has-topbar #topbar .topbar-widget {
		color: rgba(10, 37, 64, 0.75) !important;
	}
	header.header-light.has-topbar #topbar i,
	header.header-light.header-mobile.has-topbar #topbar i {
		color: var(--title-font-color, #0a2540) !important;
	}
	header.header-light.has-topbar #topbar svg,
	header.header-light.header-mobile.has-topbar #topbar svg {
		fill: currentColor;
		color: var(--title-font-color, #0a2540);
	}
	#topbar .topbar-widget--phone a {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		font-weight: 700;
		font-size: 0.9rem;
		white-space: nowrap;
	}
	#topbar .topbar-widget--phone .fa-phone {
		font-size: 1rem;
		opacity: 0.9;
	}
	#topbar .social-icons {
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		gap: 2px;
		flex-shrink: 0;
	}
	#topbar .social-icons a {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 36px;
		height: 36px;
		border-radius: 8px;
	}
	#topbar .social-icons a:hover {
		background: rgba(10, 37, 64, 0.06);
	}
}

@media (max-width: 380px) {
	#topbar .topbar-phone-text {
		font-size: 0.78rem;
		letter-spacing: -0.02em;
	}
	#topbar .social-icons a {
		width: 32px;
		height: 32px;
	}
	#topbar .social-icons .fa-lg {
		font-size: 1em !important;
	}
}

/* ── Üst bar: güven / kısa mesaj ── */
#topbar .topbar-trust {
	flex: 1 1 auto;
	justify-content: center;
	align-items: center;
	gap: 8px 12px;
	flex-wrap: wrap;
	min-height: 32px;
}
#topbar .topbar-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.92);
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.18);
	white-space: nowrap;
}
#topbar .topbar-pill--link {
	text-decoration: none;
	color: #fff !important;
	transition: background 0.2s ease, border-color 0.2s ease;
}
#topbar .topbar-pill--link:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.35);
}

@media (max-width: 767.98px) {
	#topbar .topbar-trust {
		display: none !important;
	}
}

/* ── Ana şerit: logo | menü (orta) | CTA + menü butonu ── */
header .site-header-bar {
	align-items: center !important;
	gap: 12px 20px;
	flex-wrap: nowrap;
}
@media (min-width: 993px) {
	header .site-header-bar .header-col-mid {
		flex: 1 1 auto;
		min-width: 0;
		display: flex !important;
		justify-content: center;
		align-items: center;
	}
	header .site-header-bar #mainmenu {
		display: flex !important;
		flex-wrap: nowrap !important;
		justify-content: center;
		align-items: center;
		row-gap: 6px;
		column-gap: 2px;
		margin: 0;
		padding: 0;
		list-style: none;
		width: 100%;
	}
	header .site-header-bar #mainmenu > li {
		position: relative;
	}
	header .site-header-bar #mainmenu > li > a.menu-item {
		padding: 10px 10px;
		white-space: nowrap;
	}
}
/*
 * Tema style.css: #mainmenu > li { float:left; margin-right:30px; display:inline }
 * Float + geniş margin satırı taşırdığında son link (İletişim) alta düşer.
 * Masaüstünde float kaldırıp flex + nowrap zorlanır (tema yükleme sırasından bağımsız).
 */
/* Masaüstü menü: flex + nowrap + max-content (1927 / bundle yaklaşımı ile uyumlu) */
@media (min-width: 993px) {
	header ul#mainmenu,
	header.header-light.has-topbar .site-header-bar #mainmenu,
	header.header-light.has-topbar #mainmenu,
	header .site-header-bar #mainmenu {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: center !important;
		float: none !important;
		width: max-content !important;
		max-width: 100% !important;
		min-width: 0 !important;
		margin-left: auto !important;
		margin-right: auto !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		gap: 0 !important;
	}
	header ul#mainmenu > li,
	header.header-light.has-topbar .site-header-bar #mainmenu > li,
	header.header-light.has-topbar #mainmenu > li,
	header .site-header-bar #mainmenu > li {
		float: none !important;
		display: block !important;
		margin-top: 0 !important;
		margin-bottom: 0 !important;
		margin-left: 0 !important;
		margin-right: 8px !important;
		flex: 0 0 auto !important;
		min-width: 0 !important;
	}
	header ul#mainmenu > li:last-child,
	header.header-light.has-topbar .site-header-bar #mainmenu > li:last-child,
	header.header-light.has-topbar #mainmenu > li:last-child,
	header .site-header-bar #mainmenu > li:last-child {
		margin-right: 0 !important;
	}
	header .header-col-mid,
	header .site-header-bar .header-col-mid {
		flex: 1 1 auto !important;
		display: flex !important;
		justify-content: center !important;
		align-items: center !important;
		min-width: 0 !important;
	}
	header.header-light.has-topbar .site-header-bar #mainmenu > li > a.menu-item,
	header.header-light.has-topbar #mainmenu > li > a.menu-item,
	header .site-header-bar #mainmenu > li > a.menu-item {
		padding: 10px clamp(4px, 0.5vw, 9px) !important;
		white-space: nowrap !important;
	}
	header .site-header-bar {
		gap: 8px 10px;
	}
}
@media (min-width: 993px) and (max-width: 1399.98px) {
	header.header-light.has-topbar .site-header-bar #mainmenu > li > a.menu-item,
	header.header-light.has-topbar #mainmenu > li > a.menu-item,
	header .site-header-bar #mainmenu > li > a.menu-item {
		font-size: 0.92rem !important;
		padding: 10px clamp(3px, 0.4vw, 7px) !important;
	}
}
header .site-header-bar .menu_side_area {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	flex-shrink: 0;
	flex-wrap: wrap;
	justify-content: flex-end;
}

/* Fix for topbar SVG icons */
.fa-svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -.125em;
	overflow: hidden;
}

/* === Mobil Arayüzü Beyaz Yap ve Menüyü Düzelt === */
#menu-btn {
	display: none;
	float: right;
	width: 32px;
	height: 24px;
	cursor: pointer;
	margin-top: 4px;
	margin-left: 20px;
	/* 3 çizgili beyaz hamburger menüyü CSS ile çiziyoruz */
	border-top: 3px solid #ffffff;
	border-bottom: 3px solid #ffffff;
	position: relative;
	/* Yabancı ikonların yaratabileceği siyah kareleri gizler ve tıklandığındaki gri arka planı yok eder */
	color: transparent !important;
	font-size: 0 !important;
	-webkit-tap-highlight-color: transparent;
}

#menu-btn::before {
	content: "";
	position: absolute;
	top: 7.5px; /* Ortadaki çizgi */
	left: 0;
	width: 100%;
	height: 3px;
	background: #ffffff;
}

/* Yabancı font ikonları veya ::after elementleri siyah kare yaratıyorsa gizleyelim */
#menu-btn::after {
	display: none !important;
	content: none !important;
}

@media (max-width: 992.98px) {
	/* Mobilde header beyaz arka plan (sadece topbar için) 
	   Header arka planı inline olarak header.php'de koyu mavi (0a2540) olarak ayarlandığı için header'ı beyaz yapmıyoruz,
	   böylece logodaki beyaz kısımlar görünür. */
	/* Mobilde header beyaz arka plan (sadece topbar için) 
	   Header arka planı inline olarak header.php'de koyu mavi (0a2540) olarak ayarlandığı için header'ı beyaz yapmıyoruz,
	   böylece logodaki beyaz kısımlar görünür. */
	#topbar {
		background: #ffffff !important;
	}

	/* Koyu mavi header üzerine logonun beyaz görünmesi için CSS filter ile rengini tersine çeviriyoruz. 
	   (logo-light.png dosyası sunucuda olmadığı için kırık ikon sorununu böylece kökten çözüyoruz) */
	header .logo-mobile {
		filter: brightness(0) invert(1) !important;
	}

	/* Mobilde header'ın kaybolmaması için */
	header.header-mobile {
		opacity: 1 !important;
		position: fixed !important;
		top: 0;
		z-index: 1001;
	}

	#topbar a, #topbar i, .topbar-widget a, .topbar-widget svg { color: var(--primary-color) !important; }
	#topbar .social-icons a, #topbar .social-icons svg { color: var(--primary-color) !important; }

	header .site-header-bar {
		display: flex !important;
		justify-content: space-between !important;
		align-items: center !important;
		width: 100%;
		flex-wrap: wrap !important;
	}

	header .site-header-bar .header-col-mid {
		order: 3;
		width: 100%;
	}

	#menu-btn {
		display: block !important;
	}

	/* Mobilde sadece telefon ve sosyal ağların kalması için ekstra topbar nesnelerini gizle */
	.xs-hide {
		display: none !important;
	}

	/* Mobilde menünün varsayılan olarak kapalı kalmasını sağla */
	#mainmenu,
	header.header-mobile #mainmenu {
		display: none !important;
	}
	
	/* Burger menüye tıklandığında (menu-open class'ı geldiğinde) aç */
	header.menu-open #mainmenu {
		display: block !important;
		width: 100%;
	}
}