/* ============================================================================
   header-modern.css — Premium / modern header KATMANI (yalnızca görsel)
   ----------------------------------------------------------------------------
   GÜVENLİK İLKESİ: Hiçbir HTML değişmez. Mevcut menü plugin'inin (custom.js
   $.navigation) ve sticky JS'in (scroll>=50 -> .header-fixed) kullandığı
   class/ID'ler KORUNUR. Burada SADECE renk/blur/spacing/tipografi/hover/geçiş
   eklenir; konumlandırma (drawer slide, position:fixed) mekanizmasına dokunulmaz.
   custom.css'TEN SONRA yüklenir -> override eder. Silinince eski görünüm döner.
   ============================================================================ */

:root{
	--hm-navy: #13213a;       /* mevcut tema lacivert */
	--hm-ink:  #1c2942;       /* menü metin */
	--hm-gold: #faa914;       /* BRAND TURUNCU (aksan: CTA/hover/underline) */
	--hm-orange-dark: #e09600;/* turuncu hover koyu */
	--hm-glass: rgba(255,255,255,.72);
	--hm-ease: cubic-bezier(.2,.7,.2,1);
}

/* ---- Başlık taban geçişleri (CLS-safe: boyutlar ilk boyamada uygulanır) ---- */
.header{
	transition: background .3s var(--hm-ease), box-shadow .3s var(--hm-ease),
	            padding .3s var(--hm-ease);
	will-change: background, box-shadow;
}

/* Logo: retina/crisp + bar içinde dengeli yükseklik (pre-paint -> CLS yok) */
.header .nav-brand .logo{
	height: auto;
	width: auto;
	max-height: 46px;
	transition: max-height .3s var(--hm-ease);
}
/* Yanındaki TURSAB metni: daha rafine tipografi (içerik korunur) */
.header .nav-brand span{
	font-size: 11px;
	line-height: 1.3;
	color: #7a8699;
	letter-spacing: .2px;
}

/* ---- STICKY + GLASSMORPHISM (mevcut .header-fixed JS toggle'ı kullanılır) ---- */
.header.header-fixed{
	background: var(--hm-glass);
	-webkit-backdrop-filter: saturate(160%) blur(14px);
	backdrop-filter: saturate(160%) blur(14px);
	box-shadow: 0 6px 28px rgba(12, 22, 54, .10);
}
/* scroll'da hafif küçülen header (premium) — fixed olduğu için reflow/CLS yok */
.header.header-fixed{ padding-top: 4px; padding-bottom: 4px; }
.header.header-fixed .nav-brand .logo{ max-height: 38px; }
/* backdrop-filter desteklenmiyorsa okunaklı opak fallback */
@supports not ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
	.header.header-fixed{ background: rgba(255,255,255,.97); }
}

/* ---- Menü linkleri: tipografi + animasyonlu alt çizgi hover ---- */
.header .nav-menu > li > a{
	color: var(--hm-ink);
	font-weight: 600;
	letter-spacing: .2px;
	position: relative;
	transition: color .2s var(--hm-ease);
}
.header .nav-menu > li > a::after{
	content: "";
	position: absolute;
	left: 14px; right: 14px; bottom: 10px;
	height: 2px;
	background: var(--hm-gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .28s var(--hm-ease);
	border-radius: 2px;
}
.header .nav-menu > li > a:hover,
.header .nav-menu > li.active > a,
.header .nav-menu > li.nav-submenu-open > a{ color: var(--hm-navy); }
.header .nav-menu > li > a:hover::after,
.header .nav-menu > li.active > a::after{ transform: scaleX(1); }

/* ---- CTA: arama butonu güçlü TURUNCU pill (onclick=openSearch korunur) ---- */
.header .openBtn{
	background: var(--hm-gold);
	color: #fff;
	border: 0;
	border-radius: 999px;
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	cursor: pointer;
	transition: background .2s var(--hm-ease), transform .2s var(--hm-ease),
	            box-shadow .2s var(--hm-ease);
	box-shadow: 0 4px 14px rgba(250,169,20,.35);
}
.header .openBtn:hover{ background: var(--hm-orange-dark); transform: translateY(-1px); }
.header .openBtn:active{ transform: translateY(0); }

/* Currency dropdown: modern yüzey */
.header .dropdown-currency > a{
	font-weight: 600;
	color: var(--hm-ink);
	border-radius: 10px;
	transition: background .2s var(--hm-ease);
}
.header .dropdown-currency > a:hover{ background: rgba(19,33,58,.06); }

/* ---- Mobil hamburger: modern, dokunma-dostu ---- */
.navigation-portrait .nav-toggle{
	border-radius: 10px;
	transition: background .2s var(--hm-ease);
}
.navigation-portrait .nav-toggle:hover{ background: rgba(19,33,58,.06); }
.navigation-portrait .openBtnmobil{
	background: var(--hm-navy);
	color:#fff;
	border:0;
	border-radius: 999px;
	width: 40px; height: 40px;
}

/* ---- Mobil drawer: premium yüzey + dokunma-dostu hedefler ----
   (slide/position mekanizması plugininde kalır; yalnız görsel/spacing) */
@media (max-width: 991px){
	.navigation-portrait .nav-menus-wrapper{
		background: rgba(255,255,255,.98);
		-webkit-backdrop-filter: blur(8px);
		backdrop-filter: blur(8px);
		box-shadow: 0 20px 60px rgba(12,22,54,.18);
	}
	.navigation-portrait .nav-menu > li > a{
		padding: 15px 22px;        /* >=44px dokunma hedefi */
		font-size: 16px;
		border-bottom: 1px solid rgba(19,33,58,.06);
	}
	.navigation-portrait .nav-menu > li > a::after{ display: none; } /* mobilde alt çizgi yok */
}
/* Açıkken arka plan overlay'i daha yumuşak (plugin .nav-overlay-panel ekler) */
.nav-overlay-panel{
	-webkit-backdrop-filter: blur(3px);
	backdrop-filter: blur(3px);
}

/* ---- Erişilebilirlik ---- */
.header a:focus-visible,
.header button:focus-visible{
	outline: 3px solid var(--hm-gold);
	outline-offset: 2px;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce){
	.header, .header *, .header .nav-menu > li > a::after{
		transition: none !important;
	}
}

/* ============================================================================
   TOPBAR — header üstü ince premium şerit (TURSAB acenta bilgisi)
   Sticky DEĞİL: akışta kalır, scroll'da kayar (header pinlenir). notch-safe.
   ============================================================================ */
.vt-topbar{
	background: linear-gradient(90deg, var(--hm-navy) 0%, #1b2c4d 100%);
	color: #eef2f8;
	font-size: 12.5px;
	line-height: 1.2;
	text-align: center;
	padding: 7px 16px;
	padding-left: max(16px, env(safe-area-inset-left));
	padding-right: max(16px, env(safe-area-inset-right));
	position: relative;
	z-index: 1;                         /* fixed header (z-index:999) altında */
	border-bottom: 2px solid var(--hm-gold);
}
.vt-topbar .vt-topbar-text{
	display: inline-block;
	max-width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;            /* mobilde TAŞMAZ */
	vertical-align: middle;
	letter-spacing: .2px;
	font-weight: 500;
}
.vt-topbar .vt-topbar-text strong{ color: var(--hm-gold); font-weight: 700; }
@media (max-width: 575px){
	.vt-topbar{ font-size: 11px; padding: 6px 12px; }
}

/* ============================================================================
   SUBMENU / DROPDOWN — glass + premium gölge (plugin .nav-submenu & .dropdown-menu)
   Yalnız görsel; aç/kapa mekanizması plugininde kalır.
   ============================================================================ */
.header .nav-submenu,
.header .dropdown-menu{
	border: 0 !important;
	border-radius: 14px !important;
	box-shadow: 0 18px 50px rgba(12,22,54,.18) !important;
	overflow: hidden;
	padding: 8px !important;
}
@supports ((-webkit-backdrop-filter: blur(2px)) or (backdrop-filter: blur(2px))){
	.header .nav-submenu,
	.header .dropdown-menu{
		background: rgba(255,255,255,.92);
		-webkit-backdrop-filter: saturate(160%) blur(12px);
		backdrop-filter: saturate(160%) blur(12px);
	}
}
.header .nav-submenu > li > a,
.header .dropdown-menu > li > a{
	border-radius: 9px;
	transition: background .18s var(--hm-ease), color .18s var(--hm-ease);
}
.header .nav-submenu > li > a:hover,
.header .dropdown-menu > li > a:hover{ background: rgba(250,169,20,.12); }

/* ============================================================================
   NOTCH / SAFE-AREA — fixed header iPhone çentik/landscape güvenli
   ============================================================================ */
.header.header-fixed{
	padding-left: env(safe-area-inset-left);
	padding-right: env(safe-area-inset-right);
}
