/**
 * Zeonika — mobil menu, hero overlay (LiteSpeed inline CSS'i cache'den sildigi icin harici dosya).
 */

/* ===== Tekil Blog Yazıları: Vanta sadece yanlarda görünsün ===== */
/* İçerik kolonu (1300px) katı lacivert arka plan alır.
   Kolonun dışı transparan kalır — Vanta kenarlardan görünür. */
body.single-post .ast-container {
	background: #0a192f;
}

/* Astra'nın boxed layout veya site-layout-container varsa da kapsaması için */
body.single-post #ast-content-area,
body.single-post #primary {
	background: #0a192f;
}

/* ===== Ödeme başarılı: blog yazıları gibi ortada lacivert, yanlarda Vanta ===== */
body.woocommerce-order-received .ast-container {
	background: #0a192f;
}

body.woocommerce-order-received #ast-content-area,
body.woocommerce-order-received #primary {
	background: #0a192f;
}

body.woocommerce-order-received,
body.woocommerce-order-received.ast-separate-container {
	background-color: transparent !important;
}

body.woocommerce-order-received .site-footer,
body.woocommerce-order-received .site-below-footer-wrap {
	background-color: #0a192f !important;
	background-image: none !important;
}

body.woocommerce-order-received .woocommerce-order h2.woocommerce-order-details__title,
body.woocommerce-order-received .woocommerce-order h2.woocommerce-column__title {
	background: rgba(255, 255, 255, 0.06);
	color: #e2e8f0;
}

body.woocommerce-order-received .woocommerce-thankyou-order-received,
body.woocommerce-order-received .woocommerce-order-overview,
body.woocommerce-order-received .woocommerce-order-overview li,
body.woocommerce-order-received .woocommerce-table {
	color: #e2e8f0;
}

body.woocommerce-order-received .woocommerce-order-overview li strong {
	color: #ffffff;
}


/* ===== Checkout /odeme/: blog gibi ortada lacivert, yanlarda Vanta ===== */
body.woocommerce-checkout .ast-container {
	background: #0a192f;
}

body.woocommerce-checkout #ast-content-area,
body.woocommerce-checkout #primary {
	background: #0a192f;
}

body.woocommerce-checkout,
body.woocommerce-checkout.ast-separate-container {
	background-color: transparent !important;
}

body.woocommerce-checkout .site-footer,
body.woocommerce-checkout .site-below-footer-wrap {
	background-color: #0a192f !important;
	background-image: none !important;
}

body.woocommerce-checkout .woocommerce-checkout h3,
body.woocommerce-checkout .woocommerce-billing-fields label,
body.woocommerce-checkout .woocommerce-additional-fields label,
body.woocommerce-checkout #order_review_heading,
body.woocommerce-checkout .woocommerce-checkout-review-order-table th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table td,
body.woocommerce-checkout .payment_box:not(.payment_method_zeonika_paytr_sub) p,
body.woocommerce-checkout .woocommerce-privacy-policy-text {
	color: #e2e8f0;
}

body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total th,
body.woocommerce-checkout .woocommerce-checkout-review-order-table .order-total td {
	color: #ffffff;
}

/* ===== PayTR ödeme adımı: blog/siparis-alindi ile aynı zemin ===== */
body.woocommerce-order-pay .ast-container,
body.woocommerce-order-pay #ast-content-area,
body.woocommerce-order-pay #primary {
	background: #0a192f;
}

body.woocommerce-order-pay,
body.woocommerce-order-pay.ast-separate-container {
	background-color: transparent !important;
}

body.woocommerce-order-pay .site-footer,
body.woocommerce-order-pay .site-below-footer-wrap {
	background-color: #0a192f !important;
	background-image: none !important;
}

body.woocommerce-order-pay .woocommerce-order-details,
body.woocommerce-order-pay .woocommerce-order-overview,
body.woocommerce-order-pay .woocommerce-order-overview li {
	color: #e2e8f0;
}

body.woocommerce-order-pay .woocommerce-order-overview li strong {
	color: #ffffff;
}

body.woocommerce-order-pay #paytriframe {
	display: block;
	width: 100%;
	min-height: 600px;
	margin-bottom: 2rem;
}

/* --- Mobil menu: Transparent Header acik renk + acik zemin = okunamaz --- */
@media (max-width: 921px) {
	body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-content,
	body.ast-main-header-nav-open #ast-mobile-header .ast-mobile-header-wrap .ast-mobile-header-content {
		background-color: #ffffff !important;
	}

	body.ast-main-header-nav-open.ast-theme-transparent-header #ast-mobile-header .main-header-menu .menu-link,
	body.ast-main-header-nav-open.ast-theme-transparent-header #ast-mobile-header .main-header-menu .menu-item > .menu-link,
	body.ast-main-header-nav-open #ast-mobile-header #ast-hf-menu-1-mobile .menu-link,
	body.ast-main-header-nav-open #ast-mobile-header .sub-menu .menu-link {
		color: #0a192f !important;
		-webkit-text-fill-color: #0a192f !important;
		opacity: 1 !important;
	}

	/* Alt menu acma oku — link ile ayni koyu renk */
	body.ast-main-header-nav-open #ast-mobile-header .menu-item-has-children > .ast-menu-toggle {
		color: #0a192f !important;
		opacity: 1 !important;
	}

	body.ast-main-header-nav-open #ast-mobile-header .ast-menu-toggle .ast-arrow-svg,
	body.ast-main-header-nav-open #ast-mobile-header .ast-menu-toggle svg {
		fill: currentColor !important;
	}

	body.ast-main-header-nav-open #ast-mobile-header .menu-item-has-children > .ast-menu-toggle::before {
		color: #0a192f !important;
		opacity: 1 !important;
	}

	body.ast-main-header-nav-open #ast-mobile-header .ast-submenu-expanded > .ast-menu-toggle::before {
		transform: rotateX(180deg);
	}

	body.ast-main-header-nav-open #ast-mobile-header .sub-menu {
		background-color: #ffffff !important;
		border-top: 1px solid #e2e8f0 !important;
	}

	body.ast-main-header-nav-open #ast-mobile-header .sub-menu .menu-item > .menu-link:hover,
	body.ast-main-header-nav-open #ast-mobile-header .sub-menu .menu-item > .menu-link:focus {
		color: #0a192f !important;
		-webkit-text-fill-color: #0a192f !important;
		background-color: #f1f5f9 !important;
	}

	body.ast-main-header-nav-open #ast-mobile-header .sub-menu .menu-item.current-menu-item > .menu-link {
		color: #6c63ff !important;
		-webkit-text-fill-color: #6c63ff !important;
	}
}

/* --- Hero mobil overlay --- */
/* Sorun: iOS Safari video elementlerini ayrı GPU katmanında render eder,
   bu yüzden z-index ile video üzerine overlay koyamayız.
   Çözüm: video wrapper içine ::after overlay + container ::before fallback */
@media (max-width: 921px) {
	/* Video wrapper'ı normal stacking context'e al (z-index: -1 yerine 0) */
	.wp-block-spectra-container[data-spectra-id="005ae473"] > .spectra-background-video__wrapper {
		z-index: 0 !important;
	}

	/* Video'nun hemen üzerine overlay (iOS Safari için wrapper içinde) */
	.wp-block-spectra-container[data-spectra-id="005ae473"] > .spectra-background-video__wrapper::after {
		background-color: rgba(10, 25, 47, 0.5);
		content: "";
		inset: 0;
		pointer-events: none;
		position: absolute;
		z-index: 1;
	}

	/* Container ::before — video wrapper'ın üstünde lacivert overlay (standart tarayıcılar) */
	.wp-block-spectra-container[data-spectra-id="005ae473"]::before {
		background-color: #0a192f !important;
		opacity: 0.5 !important;
		z-index: 1 !important;
		pointer-events: none;
	}

	/* İçerik her şeyin üstünde */
	.wp-block-spectra-container[data-spectra-id="005ae473"] > :not(.spectra-background-video__wrapper) {
		position: relative;
		z-index: 2;
	}
}

/* --- Ana sayfa Hakkımızda: mobilde tam genişlik koyu zemin (Vanta kenarlarda görünmesin) --- */
@media (max-width: 921px) {
	body.home .wp-block-spectra-container[data-spectra-id="spectra-mfwkapvh-57i8o1"].spectra-background-color {
		padding-left: 0 !important;
		padding-right: 0 !important;
		background-color: var(--ast-global-color-2, #0a192f) !important;
	}

	body.home .wp-block-spectra-container[data-spectra-id="spectra-mfwkapvh-57i8o1"].spectra-background-color::before {
		background-color: var(--ast-global-color-2, #0a192f) !important;
		opacity: 1 !important;
	}

	body.home .wp-block-spectra-container[data-spectra-id="spectra-mfwk2cj0-epk8n0"],
	body.home .wp-block-spectra-container[data-spectra-id="spectra-e69306c5-root"] {
		width: 100% !important;
		max-width: 100% !important;
	}

	body.home .wp-block-spectra-container[data-spectra-id="spectra-e69306c5-root"] {
		padding-left: 16px !important;
		padding-right: 16px !important;
	}
}