/**
 * Hero (Kahraman Alanı) — Elementor widget style.
 * Sol metin + sağ görsel; yazı-görsel arası yumuşak kenar geçişi (mask),
 * köşe istatistik rozeti ve hafif giriş animasyonu.
 */

.sm-hero {
	--sm-hero-text-col: 46%;
	--sm-hero-fade: 24%;
	--sm-hero-navy: #0b2d5c;
	position: relative;
	width: 100%;
}

.sm-hero,
.sm-hero * {
	box-sizing: border-box;
}

/* ---------------- Düzen ---------------- */
.sm-hero__inner {
	display: flex;
	align-items: center;
	gap: 24px;
}

.sm-hero--media-left .sm-hero__inner {
	flex-direction: row-reverse;
}

.sm-hero__content {
	flex: 0 0 var(--sm-hero-text-col);
	max-width: var(--sm-hero-text-col);
}

.sm-hero__media {
	position: relative;
	flex: 1 1 0;
	min-width: 0;
}

/* ---------------- Metin ---------------- */
.sm-hero__title {
	margin: 0 0 18px;
	color: var(--sm-hero-navy);
	font-size: clamp(28px, 3.4vw, 46px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

.sm-hero__desc {
	margin: 0;
	color: #5b6b82;
	font-size: clamp(15px, 1.1vw, 17px);
	line-height: 1.65;
	max-width: 52ch;
}

/* ---------------- Görsel ---------------- */
.sm-hero__frame {
	position: relative;
	z-index: 1;
	width: 100%;
	border-radius: 18px;
	overflow: hidden;
}

.sm-hero__img {
	display: block;
	width: 100%;
	min-height: 340px;
	max-height: 560px;
	height: 100%;
	object-fit: cover;
	border-radius: 18px;
}

/* Yazı-görsel geçişi: görselin metne bakan kenarını arka planla harmanlar. */
.sm-hero--fade.sm-hero--media-right .sm-hero__img {
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--sm-hero-fade));
	        mask-image: linear-gradient(to right, transparent 0, #000 var(--sm-hero-fade));
}

.sm-hero--fade.sm-hero--media-left .sm-hero__img {
	-webkit-mask-image: linear-gradient(to left, transparent 0, #000 var(--sm-hero-fade));
	        mask-image: linear-gradient(to left, transparent 0, #000 var(--sm-hero-fade));
}

/* ---------------- İstatistik rozeti ---------------- */
.sm-hero__badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 12px;
	padding: 12px 20px;
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 12px 30px rgba(6, 37, 77, 0.16);
}

.sm-hero__badge--top-right    { top: 22px; right: 22px; }
.sm-hero__badge--top-left     { top: 22px; left: 22px; }
.sm-hero__badge--bottom-right { bottom: 22px; right: 22px; }
.sm-hero__badge--bottom-left  { bottom: 22px; left: 22px; }

.sm-hero__badge-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 26px;
	line-height: 1;
	color: #e5384f;
}

.sm-hero__badge-icon svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.sm-hero__badge-text {
	display: flex;
	flex-direction: column;
	line-height: 1.15;
}

.sm-hero__badge-num {
	color: var(--sm-hero-navy);
	font-size: 22px;
	font-weight: 800;
}

.sm-hero__badge-label {
	color: #5b6b82;
	font-size: 13px;
	font-weight: 600;
}

/* ---------------- Giriş animasyonu ---------------- */
@keyframes smHeroInLeft {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes smHeroInRight {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes smHeroBadgePop {
	0%   { opacity: 0; transform: scale(0.8); }
	100% { opacity: 1; transform: scale(1); }
}

.sm-hero--animate .sm-hero__content {
	animation: smHeroInLeft 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) both;
}

.sm-hero--animate .sm-hero__media {
	animation: smHeroInRight 0.7s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s both;
}

/* Görsel solda ise animasyon yönleri terse döner. */
.sm-hero--animate.sm-hero--media-left .sm-hero__content {
	animation-name: smHeroInRight;
}

.sm-hero--animate.sm-hero--media-left .sm-hero__media {
	animation-name: smHeroInLeft;
}

.sm-hero--animate .sm-hero__badge {
	animation: smHeroBadgePop 0.5s ease 0.5s both;
}

@media (prefers-reduced-motion: reduce) {
	.sm-hero--animate .sm-hero__content,
	.sm-hero--animate .sm-hero__media,
	.sm-hero--animate .sm-hero__badge {
		animation: none;
	}
}

/* ======================================================================= */
/* HERO STİLLERİ (1 / 2 / 3) — Style sekmesinden seçilir                    */
/* ======================================================================= */

/* Stil 1 ve 2'de kenar geçişi maskesi kapalıdır (görsel dolu durur). */
.sm-hero--s1 .sm-hero__img,
.sm-hero--s2 .sm-hero__img {
	-webkit-mask-image: none !important;
	        mask-image: none !important;
}

/* ---------------- Ortak dekor öğeleri ---------------- */
.sm-hero__decor-panel,
.sm-hero__decor-blob,
.sm-hero__decor-dots {
	position: absolute;
	pointer-events: none;
}

.sm-hero__decor-dots {
	--sm-hero-dot: rgba(11, 45, 92, 0.18);
	background-image: radial-gradient(var(--sm-hero-dot) 2px, transparent 2px);
	background-size: 16px 16px;
}

/* ============ STİL 1 — Katmanlı dekor + yüzen kartlar ============ */
.sm-hero--s1 .sm-hero__frame {
	box-shadow: 0 30px 60px rgba(6, 37, 77, 0.18);
}

/* Arkada ofsetli renkli panel (derinlik verir). */
.sm-hero--s1 .sm-hero__decor-panel {
	z-index: 0;
	top: 24px;
	left: 24px;
	right: -14px;
	bottom: -16px;
	border-radius: 22px;
	background-color: #0b2d5c;
}

.sm-hero--s1.sm-hero--media-left .sm-hero__decor-panel {
	left: -14px;
	right: 24px;
}

/* Yumuşak leke (blob). */
.sm-hero--s1 .sm-hero__decor-blob {
	z-index: 0;
	width: 180px;
	height: 180px;
	border-radius: 50%;
	top: -40px;
	right: -24px;
	background-color: rgba(213, 168, 75, 0.22);
	filter: blur(6px);
}

.sm-hero--s1.sm-hero--media-left .sm-hero__decor-blob {
	right: auto;
	left: -24px;
}

/* Nokta deseni (sol üst köşe rozeti). */
.sm-hero--s1 .sm-hero__decor-dots {
	z-index: 2;
	width: 104px;
	height: 84px;
	top: -18px;
	left: -18px;
}

.sm-hero--s1.sm-hero--media-left .sm-hero__decor-dots {
	left: auto;
	right: -18px;
}

/* Yüzen istatistik kartları — görselin metne bakan kenarında dizilir. */
.sm-hero__floats {
	position: absolute;
	z-index: 3;
	left: -26px;
	bottom: 34px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	align-items: flex-start;
}

.sm-hero--media-left .sm-hero__floats {
	left: auto;
	right: -26px;
	align-items: flex-end;
}

.sm-hero__float {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 15px;
	background-color: #fff;
	border-radius: 14px;
	box-shadow: 0 12px 30px rgba(6, 37, 77, 0.16);
}

.sm-hero__float-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	line-height: 1;
	color: #d5a84b;
}

.sm-hero__float-icon svg {
	width: 20px;
	height: 20px;
	fill: currentColor;
}

.sm-hero__float-text {
	display: flex;
	flex-direction: column;
	line-height: 1.12;
}

.sm-hero__float-num {
	color: #0b2d5c;
	font-size: 16px;
	font-weight: 800;
}

.sm-hero__float-label {
	color: #5b6b82;
	font-size: 12px;
	font-weight: 600;
}

/* ============ STİL 2 — İkili görsel kolaj ============ */
.sm-hero--s2 .sm-hero__media {
	margin-bottom: 26px;
}

.sm-hero--s2 .sm-hero__frame {
	box-shadow: 0 24px 50px rgba(6, 37, 77, 0.16);
}

.sm-hero__img2 {
	position: absolute;
	z-index: 2;
	width: 44%;
	max-width: 230px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 16px;
	border: 6px solid #fff;
	box-shadow: 0 18px 40px rgba(6, 37, 77, 0.22);
}

.sm-hero__img2--bottom-left  { left: -18px;  bottom: -26px; }
.sm-hero__img2--bottom-right { right: -18px; bottom: -26px; }
.sm-hero__img2--top-left     { left: -18px;  top: -26px; }
.sm-hero__img2--top-right    { right: -18px; top: -26px; }

/* ============ STİL 3 — Tam yükseklik / bleed görsel ============ */
.sm-hero--s3 .sm-hero__media {
	align-self: stretch;
	margin-right: calc(-1 * var(--sm-hero-bleed, 0px));
}

.sm-hero--s3.sm-hero--media-left .sm-hero__media {
	margin-right: 0;
	margin-left: calc(-1 * var(--sm-hero-bleed, 0px));
}

.sm-hero--s3 .sm-hero__frame {
	height: 100%;
}

.sm-hero--s3 .sm-hero__img {
	height: 100%;
	max-height: none;
	min-height: 420px;
}

/* Metin ile görsel arasında ince nokta deseni. */
.sm-hero--s3 .sm-hero__decor-dots {
	z-index: 0;
	width: 108px;
	height: 120px;
	top: 50%;
	left: -30px;
	transform: translateY(-50%);
}

.sm-hero--s3.sm-hero--media-left .sm-hero__decor-dots {
	left: auto;
	right: -30px;
}

/* ---------------- Duyarlılık ---------------- */
@media (max-width: 880px) {
	.sm-hero__inner,
	.sm-hero--media-left .sm-hero__inner {
		flex-direction: column;
		gap: 28px;
	}

	.sm-hero__content {
		flex-basis: auto;
		max-width: 100%;
		text-align: center;
	}

	.sm-hero__desc {
		max-width: none;
	}

	.sm-hero__media {
		width: 100%;
	}

	/* Dikey dizilimde kenar geçişi kapanır (görsel tam görünür). */
	.sm-hero--fade .sm-hero__img {
		-webkit-mask-image: none;
		        mask-image: none;
	}

	/* Dekor öğelerini mobilde sadeleştir (yatay taşmayı önle). */
	.sm-hero--s3 .sm-hero__media,
	.sm-hero--s3.sm-hero--media-left .sm-hero__media {
		margin-left: 0;
		margin-right: 0;
	}

	.sm-hero--s1 .sm-hero__decor-panel,
	.sm-hero--s1 .sm-hero__decor-blob,
	.sm-hero__decor-dots {
		display: none;
	}

	.sm-hero__floats,
	.sm-hero--media-left .sm-hero__floats {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		align-items: center;
		gap: 10px;
		margin-top: 16px;
	}

	.sm-hero__img2 {
		width: 38%;
		max-width: 180px;
	}

	.sm-hero__img2--bottom-left,
	.sm-hero__img2--bottom-right { bottom: -18px; }
	.sm-hero__img2--bottom-left,
	.sm-hero__img2--top-left     { left: 10px; }
	.sm-hero__img2--bottom-right,
	.sm-hero__img2--top-right    { right: 10px; }
}

@media (max-width: 480px) {
	.sm-hero__badge {
		padding: 10px 14px;
		gap: 9px;
	}

	.sm-hero__badge-num {
		font-size: 18px;
	}

	.sm-hero__badge--top-right,
	.sm-hero__badge--top-left    { top: 14px; }
	.sm-hero__badge--bottom-right,
	.sm-hero__badge--bottom-left { bottom: 14px; }
	.sm-hero__badge--top-right,
	.sm-hero__badge--bottom-right { right: 14px; }
	.sm-hero__badge--top-left,
	.sm-hero__badge--bottom-left  { left: 14px; }
}