/* ==========================================================================
   Sayfa Başlığı (Hero) — Frontend
   ========================================================================== */

.sb-hero {
	position: relative;
	width: 100%;
	display: flex;
	overflow: hidden;
	box-sizing: border-box;
	--sb-alt: #eaf4fb;
}
.sb-hero * { box-sizing: border-box; }

/* Arka plan görseli */
.sb-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	z-index: 0;
}

/* Görsel yoksa mavi degrade zemin */
.sb-hero.sb-gorselsiz {
	background: linear-gradient(120deg, #1a3a78 0%, #2a6df4 100%);
}

/* --- Kaplama (degrade) --- */
.sb-overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

/* MAVI kaplama: marka mavisi tonu + alta doğru bir sonraki bölüme geçiş */
.sb-kaplama-mavi.sb-hiz-sol .sb-overlay {
	background:
		linear-gradient(180deg, rgba(234,244,251,0) 55%, var(--sb-alt) 100%),
		linear-gradient(105deg, rgba(13,30,68,.86) 0%, rgba(15,42,110,.55) 42%, rgba(20,60,150,.18) 72%, rgba(20,60,150,0) 100%);
}
.sb-kaplama-mavi.sb-hiz-orta .sb-overlay {
	background:
		linear-gradient(180deg, rgba(13,30,68,.55) 0%, rgba(13,30,68,.30) 35%, rgba(234,244,251,0) 60%, var(--sb-alt) 100%),
		linear-gradient(0deg, rgba(15,42,110,.35), rgba(15,42,110,.35));
}

/* KOYU kaplama: nötr koyu ton */
.sb-kaplama-koyu.sb-hiz-sol .sb-overlay {
	background:
		linear-gradient(180deg, rgba(234,244,251,0) 58%, var(--sb-alt) 100%),
		linear-gradient(105deg, rgba(8,12,22,.85) 0%, rgba(8,12,22,.5) 45%, rgba(8,12,22,.1) 78%, rgba(8,12,22,0) 100%);
}
.sb-kaplama-koyu.sb-hiz-orta .sb-overlay {
	background:
		linear-gradient(180deg, rgba(8,12,22,.6) 0%, rgba(8,12,22,.3) 35%, rgba(234,244,251,0) 60%, var(--sb-alt) 100%),
		linear-gradient(0deg, rgba(8,12,22,.3), rgba(8,12,22,.3));
}

/* HAFIF kaplama: sadece okunabilirlik + alt geçiş */
.sb-kaplama-hafif .sb-overlay {
	background:
		linear-gradient(180deg, rgba(10,18,35,.35) 0%, rgba(10,18,35,.12) 40%, rgba(234,244,251,0) 62%, var(--sb-alt) 100%);
}

/* --- İçerik --- */
.sb-ic {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 24px 96px;
	display: flex;
	flex-direction: column;
}

/* Dikey konum */
.sb-dik-ust  .sb-ic { justify-content: flex-start; }
.sb-dik-orta .sb-ic { justify-content: center; }
.sb-dik-alt  .sb-ic { justify-content: flex-end; }

/* Yatay hizalama */
.sb-hiz-sol  .sb-ic-inner { text-align: left; max-width: 640px; margin-right: auto; }
.sb-hiz-orta .sb-ic-inner { text-align: center; max-width: 760px; margin: 0 auto; }

/* --- Metinler --- */
.sb-etiket {
	display: inline-block;
	text-transform: uppercase;
	letter-spacing: 3px;
	font-size: 13px;
	font-weight: 700;
	color: #cfe0f5;
	margin-bottom: 18px;
}

.sb-baslik {
	font-family: Georgia, "Times New Roman", serif;
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.1;
	font-weight: 700;
	color: #fff;
	margin: 0;
	text-shadow: 0 2px 18px rgba(0,0,0,.25);
}

.sb-altbaslik {
	color: #e6eef9;
	font-size: clamp(16px, 1.6vw, 20px);
	line-height: 1.6;
	margin: 22px 0 0;
	max-width: 560px;
}
.sb-hiz-orta .sb-altbaslik { margin-left: auto; margin-right: auto; }

.sb-buton {
	display: inline-block;
	margin-top: 30px;
	background: #2a6df4;
	color: #fff;
	text-decoration: none;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .4px;
	padding: 15px 34px;
	border-radius: 14px;
	transition: background .2s, transform .1s;
	box-shadow: 0 10px 26px rgba(42,109,244,.4);
}
.sb-buton:hover { background: #1e5ad6; }
.sb-buton:active { transform: scale(.98); }

/* --- Responsive --- */
@media (max-width: 768px) {
	.sb-ic { padding: 44px 18px 80px; }
	.sb-hiz-sol .sb-ic-inner,
	.sb-hiz-orta .sb-ic-inner { max-width: 100%; }
}