/* ─────────────────────────────────────────────────────────────────────────────
   Site header/nav styling — shared by the PHP-rendered pages (haberler/*.php,
   admin/*.php) that can't use Astro's component-scoped <style> blocks.

   This is a plain-CSS copy of the <style> block inside
   src/components/Header.astro. Astro compiles that block into a scoped,
   hashed stylesheet that only Astro-built pages can reference, so PHP pages
   never received any of it — the mobile menu toggled its classes correctly
   (via the script in include/site-footer.php) but nothing was actually
   styled to show/hide/position as a result.

   If you change Header.astro's <style> block, mirror the change here too.
───────────────────────────────────────────────────────────────────────────── */

#logo {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 32px;
	z-index: 200;
	background: transparent;
	box-shadow: none;
	display: flex;
	align-items: center;
	animation: none !important;
	transition: none !important;
}

#logo img {
	max-height: 56px;
	width: auto;
	animation: none !important;
	transition: none !important;
}

/* Push nav items right so they don't sit behind the hanging logo */
.header-row {
	position: relative;
	padding-left: 168px;
}

/* RTL: flip logo to right side */
[dir="rtl"] #logo {
	left: auto;
	right: 32px;
}
[dir="rtl"] .header-row {
	padding-left: 0;
	padding-right: 168px;
}

@media (max-width: 575.98px) {
	#logo {
		left: 16px;
		min-width: 88px;
		padding: 10px 14px 24px;
	}
	#logo img {
		max-height: 44px;
	}
	.header-row {
		padding-left: 120px;
	}
	[dir="rtl"] .header-row {
		padding-left: 0;
		padding-right: 120px;
	}
}

/* Mobile: the padding-left above exists only to clear the floating logo
   for nav content — it also shoved the hamburger button next to the logo
   instead of the standard "logo left, menu trigger right" layout. Pull the
   trigger out of that flow and pin it to the right edge, enlarged for an
   easier tap target. */
@media (max-width: 991.98px) {
	/* Logo and the trigger below are both position:absolute, so with no
	   in-flow child left, .header-row has nothing to size itself against —
	   it collapses to 0 height and both "top: 50%" centers go to 0 too.
	   Give it back an explicit height to center against. */
	.header-row {
		min-height: 64px;
		padding-left: 0;
	}
	/* Center logo horizontally on mobile */
	#logo {
		left: 50%;
		transform: translateX(-50%) translateY(-50%);
		padding: 0;
		min-width: unset;
	}
	.primary-menu-trigger {
		position: absolute;
		top: 50%;
		right: 20px;
		transform: translateY(-50%);
		z-index: 210;
	}
	[dir="rtl"] .primary-menu-trigger {
		right: auto;
		left: 20px;
	}
	.cnvs-hamburger {
		--cnvs-hamburger-size: 1.5rem;
		--cnvs-hamburger-width: 3px;
	}
}

.mobile-quick-links {
	display: none;
}
@media (max-width: 991.98px) {
	.mobile-quick-links {
		display: flex;
		flex-direction: column;
		gap: 8px;
		padding: 4px 0 14px;
		margin-bottom: 8px;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}
	.mobile-quick-phone {
		display: flex;
		align-items: center;
		gap: 8px;
		color: rgba(255, 255, 255, 0.85);
	}
}
@media (min-width: 992px) {
	.mobile-quick-links {
		display: none !important;
	}
}

/* Desktop nav (mega-menu hover, hamburger hidden, etc.) is handled by the
   legacy theme CSS once `body.is-expanded-menu` is toggled — see the script
   in include/site-footer.php. Below 992px we provide our own lightweight
   dropdown instead of the theme's off-canvas system. */
@media (max-width: 991.98px) {
	nav.primary-menu .menu-container {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		max-height: calc(100vh - 80px);
		overflow-y: auto;
		background: #141414;
		flex-direction: column;
		z-index: 100;
		padding: 10px 20px 24px;
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
		border-radius: 0 0 8px 8px;
		border-top: 2px solid var(--gg-gold, #b8942a);
	}
	nav.primary-menu .menu-container .menu-link {
		color: rgba(255, 255, 255, 0.85) !important;
	}
	nav.primary-menu .menu-container .menu-item {
		border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	}
	nav.primary-menu .menu-container .menu-item.current > .menu-link,
	nav.primary-menu .menu-container .menu-link:hover {
		color: var(--gg-gold, #b8942a) !important;
	}
	nav.primary-menu.menu-open .menu-container {
		display: flex;
	}
	nav.primary-menu .menu-item {
		width: 100%;
	}
	nav.primary-menu .mega-menu-content {
		position: static !important;
		width: 100% !important;
		display: none;
		box-shadow: none;
		padding: 0 0 0 12px;
	}
	nav.primary-menu .mega-menu.menu-open .mega-menu-content {
		display: block;
	}
	nav.primary-menu .mega-menu-content .row {
		display: block;
	}

	/* Language section — mobile: always visible inline */
	.lang-menu {
		border-top: 1px solid rgba(255, 255, 255, 0.1);
		padding-top: 10px !important;
		margin-top: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 10px;
		flex-wrap: wrap;
	}
	.lang-trigger {
		display: none;
	}
	.lang-trigger::after {
		content: none;
	}
	.lang-dropdown {
		list-style: none;
		padding: 0;
		margin: 0;
		display: flex;
		gap: 4px;
		align-items: center;
	}
	.lang-dropdown li {
		border-top: none !important;
	}
	.lang-dropdown li + li::before {
		content: "·";
		color: rgba(255, 255, 255, 0.3);
		margin-right: 4px;
	}
	.lang-dropdown li a {
		display: inline;
		padding: 4px 2px;
		font-size: 0.82rem;
		font-weight: 600;
		color: rgba(255, 255, 255, 0.55);
		text-transform: uppercase;
		letter-spacing: 0.05em;
	}
	.lang-dropdown li a.lang-active {
		color: var(--gg-gold, #b8942a);
		font-weight: 700;
	}
}

/* Desktop language dropdown */
@media (min-width: 992px) {
	.lang-menu {
		position: relative;
	}
	.lang-trigger::after {
		display: none;
	}
	body.is-expanded-menu .menu-container > .menu-item.lang-menu > .lang-trigger {
		font-size: 1.5rem !important;
		padding: 0 8px !important;
	}
	.lang-dropdown {
		list-style: none;
		padding: 8px 0;
		margin: 0;
		position: absolute;
		top: 100%;
		right: 0;
		background: #141414;
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-top: 2px solid var(--gg-gold, #b8942a);
		border-radius: 6px;
		box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
		min-width: 150px;
		display: none;
		z-index: 300;
	}
	.lang-menu:hover .lang-dropdown,
	.lang-menu.lang-open .lang-dropdown {
		display: block;
	}
	.lang-dropdown li a {
		display: block;
		padding: 8px 18px;
		font-size: 0.82rem;
		color: rgba(255, 255, 255, 0.7);
		white-space: nowrap;
	}
	.lang-dropdown li a:hover {
		background: rgba(255, 255, 255, 0.06);
		color: var(--gg-gold-lt, #d4aa40);
	}
	.lang-dropdown li a.lang-active {
		font-weight: 700;
		color: var(--gg-gold, #b8942a);
	}
}

/* Dropdown affordance: chevron next to "HİZMETLERİMİZ" */
/* The mega-menu trigger link wraps its label in a <div>, which is block-level
   and pushes the chevron onto its own line — lay it out as a row instead. */
.mega-menu > a.menu-link {
	display: inline-flex !important;
	align-items: center;
	gap: 4px;
}
.sub-menu-indicator {
	font-size: 0.62rem;
	transition: transform 0.3s ease;
	display: inline-block;
}
.mega-menu:hover .sub-menu-indicator,
.mega-menu.menu-open .sub-menu-indicator {
	transform: rotate(180deg);
}

/* Per-service icon inside the mega-menu dropdown */
.sub-menu-icon {
	color: var(--gg-gold, #b8942a);
	font-size: 0.95rem;
	margin-right: 10px;
	width: 18px;
	display: inline-block;
	text-align: center;
}

/* Premium quote CTA button (specificity bumped w/ body to beat the theme's
   .menu-container .button.bg-gradient dark-override rule) */
body .menu-container .button.quote-cta {
	background: linear-gradient(90deg, var(--gg-gold, #b8942a), var(--gg-gold-lt, #d4aa40)) !important;
	color: #141414 !important;
	font-weight: 700 !important;
	box-shadow: 0 4px 16px rgba(184, 148, 42, 0.3);
}
body .menu-container .button.quote-cta:hover {
	filter: brightness(1.08);
	background: linear-gradient(90deg, var(--gg-gold, #b8942a), var(--gg-gold-lt, #d4aa40)) !important;
}

@media (max-width: 991.98px) {
	nav.primary-menu .mega-menu-content {
		border-top: 1px solid rgba(255, 255, 255, 0.08);
	}
	.sub-menu-icon {
		color: var(--gg-gold, #b8942a);
	}
}