/* Header menüsü: klasik Open Sans Condensed yerine sade, geometrik Jost */
#header .main-menu {
	flex-wrap: nowrap;
	white-space: nowrap;
}
#header .main-menu > li.menu-item > a {
	padding-right: 12px;
	padding-left: 12px;
	font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	white-space: nowrap;
}

/* Dar masaüstü ekranlarda menü tek satıra sığsın. Bu aralıkta header kutusu 960px; logo, menü,
   dil seçici ve iki düğme ancak böyle sığıyor (yoksa header ekrandan taşıp sayfa yana kayıyordu) */
@media (min-width: 992px) and (max-width: 1199px) {
	#header .main-menu > li.menu-item > a {
		padding-right: 5px;
		padding-left: 5px;
		font-size: 12px;
		letter-spacing: 0.02em;
	}
	#header .logo,
	#header.sticky-header .logo {
		max-width: 150px;
	}
	#header .header-main .header-right {
		padding-left: 0;
	}
	#header .theme-toggle,
	#header .lang-switcher {
		margin-left: 6px;
	}
}

/* ---------- Telefon ve tablet header'ı ----------
   Logo solda; sağda dil seçici, arama ve menü düğmesi tek sırada. Tema butonu yan menüde
   (mobile-menu.html). Eskiden Porto'nun tablo düzeninde menü düğmesi alt satıra düşüyordu. */
@media (max-width: 991px) {
	#header .header-main .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
	}
	#header .header-main .container > div {
		display: block;
	}
	#header .header-right > #main-menu {
		display: none;
	}
	#header .header-main .header-right {
		display: flex;
		flex: none;
		align-items: center;
		gap: 8px;
	}
	#header .logo {
		--porto-logo-mw: 160px;
		--porto-sticky-logo-mw: 160px;
	}
	#header .header-right > .theme-toggle[data-theme-toggle] {
		display: none;
	}
	#header .header-right > .theme-toggle {
		margin: 0;
	}
	#header .mobile-toggle {
		display: inline-grid;
		place-items: center;
		width: 36px;
		height: 36px;
		margin: 0;
		padding: 0;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.08);
		color: #fff;
		cursor: pointer;
		transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
	}
	#header .mobile-toggle:hover,
	#header .mobile-toggle:focus-visible {
		border-color: var(--lx-gold-light);
		background: var(--lx-gold-light);
		color: #1a140e;
	}
	#header .mobile-toggle svg {
		width: 18px;
		height: 18px;
	}
}
@media (max-width: 374px) {
	#header .logo {
		--porto-logo-mw: 132px;
		--porto-sticky-logo-mw: 132px;
	}
}

#header .porto-wide-sub-menu a,
#header .porto-narrow-sub-menu a {
	font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	letter-spacing: 0.03em;
}

/* Masaüstünde logo ve menü yan yana, birlikte ortada */
@media (min-width: 992px) {
	#header .header-main .container {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 40px;
	}
	#header .header-main .container > div {
		display: block;
		flex: none;
	}
	#header .header-main .header-right {
		text-align: left;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#header .header-main .container {
		gap: 14px;
	}
}
/* 1200–1299px: tam boy logo ve menü ekrana birkaç piksel sığmıyordu (1280px'li ekranlarda tema
   butonu kesiliyor, sayfa yana kayıyordu); aralıklar ve logo biraz daraltıldı */
@media (min-width: 1200px) and (max-width: 1299px) {
	#header .header-main .container {
		gap: 28px;
	}
	#header .header-main .header-right {
		padding-left: 0;
	}
	#header .main-menu > li.menu-item > a {
		padding-right: 9px;
		padding-left: 9px;
	}
	#header .logo,
	#header.sticky-header .logo {
		max-width: 180px;
	}
}

/* ---------- Görselli mega menü ---------- */
@media (min-width: 992px) {
	/* Paneller header'ın ortasına göre konumlansın */
	#header .header-main .container > .header-right,
	#header #main-menu,
	#header .main-menu > li.lx-mega {
		position: static;
	}

	/* Linkten panele inerken aradaki boşlukta menü kapanmasın: görünmez köprü */
	#header .main-menu > li.lx-mega > a {
		position: relative;
	}
	#header .main-menu > li.lx-mega > a::before {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 40px;
	}

	#header .main-menu > li.lx-mega > a::after {
		content: "";
		display: inline-block;
		width: 5px;
		height: 5px;
		margin: 0 0 3px 8px;
		border-right: 1.5px solid currentColor;
		border-bottom: 1.5px solid currentColor;
		opacity: 0.7;
		transform: rotate(45deg);
		transition: transform 0.25s ease, margin 0.25s ease;
	}
	#header .main-menu > li.lx-mega:hover > a::after,
	#header .main-menu > li.lx-mega:focus-within > a::after {
		margin-bottom: 0;
		transform: rotate(225deg);
	}

	.lx-mega__panel {
		position: absolute;
		top: 100%;
		left: 50%;
		z-index: 1000;
		width: min(1100px, calc(100vw - 48px));
		padding-top: 10px; /* fare menüden panele geçerken kapanmasın */
		opacity: 0;
		visibility: hidden;
		transform: translate(-50%, 14px);
		transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.3s;
	}
	/* Panelin üstünde, tüm genişliği boyunca görünmez köprü: başlıktan panele çapraz inerken
	   fare başlık ile panel arasındaki boşluğa (normalde 37px, yapışkan header'da 35px) düşüp
	   menüyü kapatmasın. Yalnızca panel açıkken vardır; menü başlıklarının üstüne binmez. */
	.lx-mega__panel::before {
		content: "";
		position: absolute;
		right: 0;
		bottom: 100%;
		left: 0;
		height: 37px;
	}
	#header .main-menu > li.lx-mega:hover > .lx-mega__panel,
	#header .main-menu > li.lx-mega:focus-within > .lx-mega__panel {
		opacity: 1;
		visibility: visible;
		transform: translate(-50%, 0);
		transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s;
	}
	/* Açık panelin köprüsü header satırının alt kısmına da uzanıyor; satırdaki menü başlıkları,
	   dil seçici ve düğmeler onun üstünde kalsın ki menü açıkken de üzerlerine gelinebilsin.
	   Başlıkların alt köprüsü yalnızca kendi menüsü açıkken var (açık panelin üstünü kapatmasın) */
	#header .main-menu > li.menu-item > a,
	#header .header-right > .theme-toggle {
		position: relative;
		z-index: 1001;
	}
	#header .lang-pill {
		z-index: 1001;
	}
	#header .main-menu > li.lx-mega:not(:hover):not(:focus-within) > a::before {
		display: none;
	}
	/* Bağlantısız başlıklar (tema .nolink'e pointer-events: none veriyor) da fareyi yakalasın;
	   tıklama header.html'de engelleniyor, sayfa "#"e zıplamaz */
	#header .main-menu > li.lx-mega > a.nolink {
		pointer-events: auto;
		cursor: default;
	}

	.lx-mega__inner {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 44px;
		max-height: calc(100vh - 130px);
		overflow-y: auto;
		padding: 34px 34px 34px 44px;
		border: 1px solid var(--lx-line);
		border-top: 2px solid var(--lx-gold);
		border-radius: 0 0 10px 10px;
		background: var(--lx-panel-bg);
		-webkit-backdrop-filter: blur(12px);
		backdrop-filter: blur(12px);
		box-shadow: var(--lx-shadow);
		text-align: left;
		white-space: normal;
	}

	.lx-mega__heading {
		display: flex;
		align-items: center;
		gap: 16px;
		margin: 0 0 18px;
		color: var(--lx-heading);
		font-family: "Playfair Display", Georgia, serif;
		font-size: 26px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: 0;
		text-transform: none;
	}
	.lx-mega__heading::after {
		content: "";
		flex: 1;
		height: 1px;
		background: linear-gradient(90deg, var(--lx-line-strong), transparent);
	}

	.lx-mega__links {
		margin: 0;
		padding: 0;
		list-style: none;
		column-count: var(--cols, 1);
		column-gap: 36px;
	}
	.lx-mega__links li {
		break-inside: avoid;
	}
	#header .lx-mega__links a {
		position: relative;
		display: inline-block;
		padding: 7px 0;
		color: var(--lx-body);
		font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
		font-size: 15px;
		font-weight: 400;
		line-height: 1.35;
		letter-spacing: 0.02em;
		text-decoration: none;
		text-transform: none;
		transition: color 0.2s ease, padding-left 0.25s ease;
	}
	/* Üzerine gelince yazı sağa kayar ama bağlantının sol kenarı yerinde kalır (padding büyür);
	   eskiden bağlantının tamamı kaydığı için imlecin altından çekilip hover açılıp kapanıyordu */
	#header .lx-mega__links a::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 0;
		width: 10px;
		height: 1px;
		background: var(--lx-gold);
		opacity: 0;
		transition: opacity 0.2s ease;
	}
	#header .lx-mega__links a:hover,
	#header .lx-mega__links a:focus-visible {
		padding-left: 16px;
		color: var(--lx-gold);
	}
	#header .lx-mega__links a:hover::before,
	#header .lx-mega__links a:focus-visible::before {
		opacity: 1;
	}

	#header .lx-mega__feature {
		position: relative;
		display: flex;
		align-items: flex-end;
		min-height: 300px;
		overflow: hidden;
		border-radius: 8px;
		color: #fff;
		text-decoration: none;
	}
	.lx-mega__feature img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.9s cubic-bezier(0.2, 0.6, 0.3, 1);
	}
	.lx-mega__feature::after {
		content: "";
		position: absolute;
		inset: 0;
		background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.15) 60%, rgba(0, 0, 0, 0) 100%);
	}
	.lx-mega__feature:hover img,
	.lx-mega__feature:focus-visible img {
		transform: scale(1.06);
	}
	.lx-mega__feature-body {
		position: relative;
		z-index: 1;
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 22px;
		font-family: "Jost", "Helvetica Neue", Arial, sans-serif;
		letter-spacing: 0;
		text-transform: none;
	}
	.lx-mega__feature-kicker {
		color: var(--lx-gold-light);
		font-size: 11px;
		font-weight: 500;
		letter-spacing: 0.25em;
		text-transform: uppercase;
	}
	.lx-mega__feature-body strong {
		font-family: "Playfair Display", Georgia, serif;
		font-size: 22px;
		font-weight: 700;
		line-height: 1.2;
	}
	.lx-mega__feature-text {
		color: rgba(255, 255, 255, 0.78);
		font-size: 14px;
		line-height: 1.5;
	}
	.lx-mega__feature-more {
		margin-top: 6px;
		color: var(--lx-gold-light);
		font-size: 12px;
		font-weight: 500;
		letter-spacing: 0.18em;
		text-transform: uppercase;
	}

	/* ---------- Açılış animasyonu ----------
	   Panel açılınca başlık çizgisi soldan uzar, bağlantılar sırayla (her biri
	   --i ile biraz gecikmeli) aşağıdan gelir, öne çıkan kart yükselir ve
	   fotoğrafı hafifçe uzaklaşır. Kapanırken hepsi birlikte söner. */
	.lx-mega__heading,
	.lx-mega__links li,
	#header .lx-mega__feature {
		opacity: 0;
		transform: translateY(10px);
		transition: opacity 0.25s ease, transform 0.25s ease;
	}
	.lx-mega__heading::after {
		transform: scaleX(0);
		transform-origin: left center;
		transition: transform 0.3s ease;
	}
	.lx-mega__feature img {
		transform: scale(1.12);
	}

	#header .main-menu > li.lx-mega:hover .lx-mega__heading,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__heading,
	#header .main-menu > li.lx-mega:hover .lx-mega__links li,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__links li,
	#header .main-menu > li.lx-mega:hover .lx-mega__feature,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__feature {
		opacity: 1;
		transform: none;
		transition: opacity 0.45s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	#header .main-menu > li.lx-mega:hover .lx-mega__heading,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__heading {
		transition-delay: 0.05s;
	}
	#header .main-menu > li.lx-mega:hover .lx-mega__heading::after,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__heading::after {
		transform: scaleX(1);
		transition: transform 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s;
	}
	#header .main-menu > li.lx-mega:hover .lx-mega__links li,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__links li {
		transition-delay: calc(0.1s + min(var(--i, 0), 12) * 0.03s);
	}
	#header .main-menu > li.lx-mega:hover .lx-mega__feature,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__feature {
		transition-delay: 0.12s;
	}
	#header .main-menu > li.lx-mega:hover .lx-mega__feature img,
	#header .main-menu > li.lx-mega:focus-within .lx-mega__feature img {
		transform: scale(1);
		transition: transform 1.4s cubic-bezier(0.2, 0.6, 0.3, 1);
	}
	#header .main-menu > li.lx-mega .lx-mega__feature:hover img,
	#header .main-menu > li.lx-mega .lx-mega__feature:focus-visible img {
		transform: scale(1.06);
		transition-duration: 0.9s;
	}

	/* Arama kutusu açılırken hafifçe aşağı süzülsün */
	#header .searchform-popup .searchform {
		animation: lx-drop 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
	}
	@keyframes lx-drop {
		from {
			opacity: 0;
			transform: translateY(-8px);
		}
	}
}

@media (min-width: 992px) and (max-width: 1199px) {
	.lx-mega__panel {
		width: calc(100vw - 32px);
	}
	.lx-mega__inner {
		grid-template-columns: minmax(0, 1fr) 240px;
		gap: 30px;
		padding: 28px 28px 28px 36px;
	}
	.lx-mega__links {
		column-gap: 24px;
	}
	#header .lx-mega__links a {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.lx-mega__panel,
	#header .lx-mega__links a,
	.lx-mega__feature img,
	.lx-mega__heading,
	.lx-mega__heading::after,
	.lx-mega__links li,
	#header .lx-mega__feature,
	#header .main-menu > li.lx-mega .lx-mega__heading,
	#header .main-menu > li.lx-mega .lx-mega__heading::after,
	#header .main-menu > li.lx-mega .lx-mega__links li,
	#header .main-menu > li.lx-mega .lx-mega__feature,
	#header .main-menu > li.lx-mega .lx-mega__feature img {
		transition: none !important;
	}
	#header .searchform-popup .searchform {
		animation: none;
	}
}

/* Eski WordPress sayfalarının pageCss'indeki "#header { border-top: 2px solid #ededed }"
   kuralı fotoğrafın en üstünde açık gri bir şerit bırakıyordu */
html #header,
html .sticky-header .header-main.sticky {
	border-top: 0;
}