/* ==========================================================================
   Alperen AI — Header & Navigation
   Sabit header, glassmorphism, responsive mobil menü.
   ========================================================================== */

/* ── Site Header ───────────────────────────────────────────────────────── */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--z-header);
	height: var(--header-height);
	background: transparent;
	border-bottom: 1px solid transparent;
	transition: background-color var(--duration-normal) var(--ease-out),
	            backdrop-filter var(--duration-normal) var(--ease-out),
	            border-color var(--duration-normal) var(--ease-out),
	            box-shadow var(--duration-normal) var(--ease-out);
}

/* Scroll durumunda arka planı belirginleştir */
.site-header.site-header--scrolled {
	background: rgba(3, 0, 20, 0.75);
	backdrop-filter: blur(16px) saturate(1.8);
	-webkit-backdrop-filter: blur(16px) saturate(1.8);
	border-bottom: 1px solid var(--color-border);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

[data-theme="light"] .site-header.site-header--scrolled {
	background: rgba(248, 250, 252, 0.8);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
}

.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 100%;
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--container-px);
}

@media (min-width: 640px) {
	.site-header__inner {
		padding: 0 var(--space-6);
	}
}

@media (min-width: 1024px) {
	.site-header {
		height: var(--header-height-lg);
	}

	.site-header__inner {
		padding: 0 var(--space-8);
	}
}

/* ── Brand / Logo ──────────────────────────────────────────────────────── */
.site-brand {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	text-decoration: none;
	flex-shrink: 0;
}

.site-brand:hover {
	color: var(--color-text-primary);
}

.site-brand__monogram {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-lg);
	background: var(--gradient-accent);
	color: #fff;
	font-family: var(--font-display);
	font-weight: var(--font-extrabold);
	font-size: var(--text-sm);
	letter-spacing: 0.05em;
	box-shadow: var(--shadow-glow-purple);
	transition: box-shadow var(--duration-normal) var(--ease-out);
}

.site-brand:hover .site-brand__monogram {
	box-shadow: 0 0 30px var(--color-accent-purple-glow);
}

.site-brand__name {
	font-family: var(--font-display);
	font-weight: var(--font-bold);
	font-size: var(--text-base);
	color: var(--color-text-primary);
	white-space: nowrap;
	transition: color var(--duration-fast) var(--ease-out);
}

/* ── Desktop Navigation ────────────────────────────────────────────────── */
.site-nav {
	display: none;
}

@media (min-width: 1024px) {
	.site-nav {
		display: flex;
		align-items: center;
	}
}

.site-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-1);
	list-style: none;
	margin: 0;
	padding: 0;
}

.site-nav__list li {
	position: relative;
}

.site-nav__list a {
	display: block;
	padding: var(--space-2) var(--space-3);
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
	color: var(--color-text-secondary);
	white-space: nowrap;
	border-radius: var(--radius-md);
	transition: color var(--duration-fast) var(--ease-out),
	            background-color var(--duration-fast) var(--ease-out);
}

.site-nav__list a:hover,
.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--color-text-primary);
	background-color: var(--color-surface-hover);
}

.site-nav__list .current-menu-item > a,
.site-nav__list .current_page_item > a {
	color: var(--color-accent-cyan);
}

/* ── Header Aksiyonları ────────────────────────────────────────────────── */
.site-header__actions {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

/* ── Tema Geçiş Butonu ─────────────────────────────────────────────────── */
.theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	border-radius: var(--radius-lg);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	color: var(--color-text-secondary);
	transition: color var(--duration-fast) var(--ease-out),
	            background-color var(--duration-fast) var(--ease-out),
	            border-color var(--duration-fast) var(--ease-out);
}

.theme-toggle:hover {
	color: var(--color-text-primary);
	border-color: var(--color-accent-purple);
	background: var(--color-surface-hover);
}

/* Temaya göre güneş/ay ikonu göster/gizle */
[data-theme="dark"] .theme-toggle__icon--sun  { display: block; }
[data-theme="dark"] .theme-toggle__icon--moon { display: none; }
[data-theme="light"] .theme-toggle__icon--sun  { display: none; }
[data-theme="light"] .theme-toggle__icon--moon { display: block; }

/* ── Mobil Menü Butonu (Hamburger) ─────────────────────────────────────── */
.mobile-menu-toggle {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 5px;
	width: 2.5rem;
	height: 2.5rem;
	padding: var(--space-2);
	border-radius: var(--radius-lg);
	background: transparent;
	transition: background-color var(--duration-fast) var(--ease-out);
}

.mobile-menu-toggle:hover {
	background: var(--color-surface-hover);
}

@media (min-width: 1024px) {
	.mobile-menu-toggle {
		display: none;
	}
}

.mobile-menu-toggle__bar {
	display: block;
	width: 20px;
	height: 2px;
	background-color: var(--color-text-primary);
	border-radius: 1px;
	transition: transform var(--duration-normal) var(--ease-out),
	            opacity var(--duration-normal) var(--ease-out);
}

/* Hamburger → X dönüşüm animasyonu */
.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(1) {
	transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(2) {
	opacity: 0;
}

.mobile-menu-toggle[aria-expanded="true"] .mobile-menu-toggle__bar:nth-child(3) {
	transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobil Menü Overlay ────────────────────────────────────────────────── */
.mobile-menu {
	position: fixed;
	top: var(--header-height);
	left: 0;
	right: 0;
	bottom: 0;
	z-index: var(--z-mobile-menu);
	background: var(--color-bg-primary);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity var(--duration-normal) var(--ease-out),
	            visibility var(--duration-normal) var(--ease-out),
	            transform var(--duration-normal) var(--ease-out);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: var(--space-8);
	overflow-y: auto;
}

.mobile-menu.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Admin bar düzeltmesi — mobil menü konumu */
body.admin-bar .mobile-menu {
	top: calc(var(--header-height) + 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar .mobile-menu {
		top: calc(var(--header-height) + 46px);
	}
}

@media (min-width: 1024px) {
	.mobile-menu {
		display: none !important;
	}
}

.mobile-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 100%;
}

.mobile-menu__list li {
	margin-bottom: var(--space-2);
}

.mobile-menu__list a {
	display: block;
	padding: var(--space-4);
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-semibold);
	color: var(--color-text-secondary);
	border-radius: var(--radius-xl);
	transition: color var(--duration-fast) var(--ease-out),
	            background-color var(--duration-fast) var(--ease-out);
}

.mobile-menu__list a:hover,
.mobile-menu__list a:focus-visible {
	color: var(--color-text-primary);
	background-color: var(--color-surface-hover);
}

.mobile-menu__list .current-menu-item > a,
.mobile-menu__list .current_page_item > a {
	color: var(--color-accent-cyan);
}

/* Mobil menü içi tema butonu */
.theme-toggle--mobile {
	margin-top: var(--space-8);
	width: auto;
	padding: var(--space-3) var(--space-6);
	gap: var(--space-3);
	border-radius: var(--radius-full);
}

.theme-toggle--mobile span {
	font-size: var(--text-sm);
	font-weight: var(--font-medium);
}


/* ── Header CTA Butonu ─────────────────────────────────────────────────── */
.btn--header-cta {
	display: none;
	padding: var(--space-2) var(--space-4) !important;
	font-size: var(--text-xs) !important;
	border-radius: var(--radius-full) !important;
	box-shadow: 0 4px 15px var(--color-accent-purple-glow) !important;
}

@media (min-width: 1024px) {
	.btn--header-cta {
		display: inline-flex;
	}
}

.btn--header-cta:hover {
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4) !important;
}

/* Mobil menü CTA link stili */
.mobile-cta-link {
	background: var(--gradient-accent) !important;
	color: #fff !important;
	margin-top: var(--space-4);
	box-shadow: 0 4px 15px var(--color-accent-purple-glow);
}

.mobile-cta-link:hover {
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.4);
}

/* ── Dedicated close button inside mobile menu ── */
.mobile-menu-close {
	position: absolute;
	top: var(--space-4);
	right: var(--space-4);
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-text-secondary);
	background: transparent;
	border: none;
	border-radius: var(--radius-lg);
	cursor: pointer;
	transition: color var(--duration-fast) var(--ease-out),
	            background-color var(--duration-fast) var(--ease-out);
	z-index: 20;
}

.mobile-menu-close:hover,
.mobile-menu-close:focus-visible {
	color: var(--color-text-primary);
	background-color: var(--color-surface-hover);
}

/* ── Mobile Menu Media Query Override for screens <= 1023px ── */
@media (max-width: 1023px) {
	/* Hide desktop actions in mobile header */
	.site-header__actions .btn--header-cta,
	.site-header__actions #theme-toggle {
		display: none !important;
	}

	/* Enforce 16px padding on header for mobile layout */
	.site-header__inner {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}

	/* Scale logo name & prevent overflow */
	.site-brand {
		max-width: calc(100% - 60px) !important;
		overflow: hidden;
	}

	.site-brand__name {
		font-size: 1.1rem !important;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.custom-logo-link {
		max-width: 100% !important;
	}

	.custom-logo-link img.custom-logo {
		max-width: 100% !important;
		height: auto !important;
		object-fit: contain;
	}

	/* Hide the duplicate dedicated close button inside mobile menu */
	.mobile-menu-close {
		display: none !important;
	}

	.mobile-menu {
		position: absolute;
		top: var(--header-height);
		left: 0;
		right: 0;
		bottom: auto;
		height: auto;
		max-height: calc(100vh - var(--header-height));
		background: var(--color-bg-primary);
		border-bottom: 1px solid var(--color-border);
		box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
		padding: var(--space-4) var(--space-6) var(--space-4); /* compact vertical padding */
		display: flex;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		overflow-y: auto;
		overflow-x: hidden;
	}

	.mobile-menu__list {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		width: 100%;
		gap: 2px; /* reduced gap */
		margin: 0;
		padding: 0;
	}

	.mobile-menu__list li {
		width: 100%;
		margin-bottom: 0;
	}

	.mobile-menu__list a {
		display: block;
		padding: var(--space-2) var(--space-4); /* reduced padding for tighter list */
		font-family: var(--font-display);
		font-size: var(--text-base) !important;
		font-weight: var(--font-semibold);
		color: var(--color-text-secondary);
		text-align: center;
		border-radius: var(--radius-lg);
		white-space: normal;
		transition: color var(--duration-fast) var(--ease-out),
		            background-color var(--duration-fast) var(--ease-out);
	}

	.mobile-menu__list a:hover,
	.mobile-menu__list a:focus-visible {
		color: var(--color-text-primary);
		background-color: var(--color-surface-hover);
	}

	.mobile-menu__list .current-menu-item > a,
	.mobile-menu__list .current_page_item > a {
		color: var(--color-accent-cyan);
		background-color: rgba(6, 182, 212, 0.05);
	}

	/* İletişime Geç button inside mobile menu panel */
	.mobile-menu__list .mobile-cta-link {
		display: block;
		background: var(--gradient-accent) !important;
		color: #fff !important;
		font-weight: var(--font-bold);
		text-align: center;
		border-radius: var(--radius-full);
		margin-top: var(--space-2); /* reduced margin */
		padding: var(--space-2) var(--space-4) !important; /* tighter button */
		box-shadow: 0 4px 15px var(--color-accent-purple-glow);
	}

	.mobile-menu__list .mobile-cta-link:hover {
		box-shadow: 0 4px 20px rgba(124, 58, 237, 0.5);
	}

	/* Theme toggle mobile button */
	.theme-toggle--mobile {
		margin-top: var(--space-3); /* reduced margin */
		align-self: center;
		width: auto;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: var(--space-2) var(--space-5); /* tighter padding */
		gap: var(--space-2);
		border-radius: var(--radius-full);
		border: 1px solid var(--color-border);
		background: var(--color-surface);
	}

	/* Prevent fixed header from overlapping sections on mobile scroll */
	.about,
	.focus-areas {
		scroll-margin-top: calc(var(--header-height) + 1.5rem) !important;
	}
}