/* ============================================================
 * Swiper 12 — Customer Owl Theme Bridge
 * Slider nav button'ları sadece .owl-prev / .owl-next class'larına sahip.
 * Swiper.js bunlara element referansı ile bağlanır (main.js navTargets).
 * Bu sayede Swiper'ın default .swiper-button-prev/next ::after SVG
 * chevron'u HİÇ tetiklenmez — customer'ın style.css'teki .owl-prev/.owl-next
 * stilizasyonu tek başına geçerli olur.
 * ============================================================ */

/* Hero slider — slide yüksekliği customer'ın .slider 450px yüksekliğini taşır */
.slider .swiper {
	min-height: 450px;
}
.slider .swiper-slide {
	min-height: 450px;
	height: auto;
}
.slider .swiper-slide .row.slider-area {
	min-height: 450px;
	position: relative;
}

.swiper-wrapper {
	box-sizing: content-box;
}

/* Nav button'lar swiper-wrapper'ın üstünde dursun — .slider-picture clip-path stacking context oluşturuyor, ok arkada kalmasın */
.swiper .owl-prev,
.swiper .owl-next {
	z-index: 10;
}

/* Mobile: hero slider yüksekliği auto */
@media (max-width: 991px) {
	.slider .swiper,
	.slider .swiper-slide,
	.slider .swiper-slide .row.slider-area {
		min-height: auto;
	}
}

/* ============================================================
 * Fixed header — yumuşak geçiş (transition both directions)
 * Base element'e transition uygulanır; class toggle'lanınca
 * background/padding/shadow/transform animasyonlu değişir.
 * ============================================================ */
.header-menu,
.header-mobile {
	transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease;
	will-change: transform, background-color, box-shadow;
}

/* Sticky pozisyona alınınca yukarıdan slide-down efekti */
.header-menu.fixed-header,
.header-mobile.fixed-header {
	animation: header-slide-down 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes header-slide-down {
	from { transform: translateY(-100%); opacity: 0; }
	to   { transform: translateY(0);     opacity: 1; }
}

/* .fixed-header default transition'ı (0.1s) override ediliyor */
.fixed-header {
	transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

/* ============================================================
 * Anasayfa İkonlar — ikon kutunun içinde tam ortalı (FA 5 → FA 7 width farklı)
 * Customer'ın translateY(40px) trick'i FA 5 glyph metriği için kalibreliydi;
 * FA 7'de `<i>` width'i 1.25em, ortalama bozuluyor. Flexbox ile düzgün ortala.
 * ============================================================ */
.icons-home .icon-box .icon {
	display: flex;
	align-items: center;
	justify-content: center;
}
.icons-home .icon-box .icon i {
	transform: rotate(-45deg);
	width: auto;
	line-height: 1;
}

/* ============================================================
 * Header & dropdown z-index — slider/section'lar üstte kalmasın.
 * .header-menu / .header-mobile element'lerine pozisyon + z-index
 * vererek stacking context yaratıyoruz; dropdown UL içinde göreceli.
 * ============================================================ */
.header-menu,
.header-mobile {
	position: relative;
	z-index: 1000;
}

.header-menu.fixed-header,
.header-mobile.fixed-header {
	z-index: 1500;
}

.main-menu .navigation > li > ul,
.main-menu .navigation > li > ul > li > ul {
	z-index: 1200;
}

/* ============================================================
 * General box (hizmet/blog/ürün) kartlarında görsel tam genişlik
 * ============================================================ */
.general-box .post-image img {
	width: 100%;
}

/* ============================================================
 * Swiper-slide ile Bootstrap .col çatışması — özellikle mobilde
 * .col flex:1 0 0% Swiper'ın inline width'ini iptal ediyor → slide görünmüyor.
 * .video-box-area .col {height:100%} ise mobilde tek slide olunca çökmesine yol açıyor.
 * ============================================================ */
.swiper-slide.col {
	flex: none;
	max-width: none;
}

.video-box-area .col.swiper-slide {
	height: auto;
}