/* =========================================================
   HERO SLİDER — ana sayfa üst bölümü
   ========================================================= */

.uns-hs {
	position: relative;
	border-radius: 22px;
	overflow: hidden;
	aspect-ratio: 888 / 480;
	height: var(--uns-hs-yukseklik, auto);
	isolation: isolate;
}

.uns-hs__parca {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	overflow: hidden;
}

.uns-hs__slayt {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: flex-end;
	background-size: cover;
	background-position: center;
	background-color: var(--uns-koyu, #1A2F4C);
	border-radius: inherit;
	opacity: 0;
	visibility: hidden;
	transition: opacity .6s ease;
}

.uns-hs--tek .uns-hs__slayt,
.uns-hs__slayt.is-aktif {
	opacity: 1;
	visibility: visible;
}

.uns-hs__icerik {
	position: relative;
	z-index: 2;
	padding: 56px 52px 48px;
	max-width: 700px;
	color: #fff;
	border-radius: 18px;
}

/* ---------- Dikey yer (slayt içinde) ---------- */

.uns-hs__slayt--dikey-ust { align-items: flex-start; }
.uns-hs__slayt--dikey-orta { align-items: center; }
.uns-hs__slayt--dikey-alt { align-items: flex-end; }

/* ---------- Yatay yer (içerik bloğu) ---------- */

.uns-hs__icerik--yatay-sol { margin-right: auto; }

.uns-hs__icerik--yatay-orta {
	margin: 0 auto;
	text-align: center;
}

.uns-hs__icerik--yatay-orta .uns-hs__alt,
.uns-hs__icerik--yatay-orta .uns-hs__rozet { justify-content: center; margin-left: auto; margin-right: auto; }

.uns-hs__icerik--yatay-sag {
	margin-left: auto;
	text-align: right;
}

.uns-hs__icerik--yatay-sag .uns-hs__alt { justify-content: flex-end; }
.uns-hs__icerik--yatay-sag .uns-hs__rozet { margin-left: auto; }

/* Zemin rengi olan içerik, slaydın kenarına yapışık değil, içeride
   "yüzen bir kart" gibi görünsün diye kenar boşluğu alır. Zemin
   yoksa (varsayılan, görselin üzerine doğrudan yazı) bu boşluk
   uygulanmaz — mevcut görünüm değişmez. */
.uns-hs__icerik--zeminli { margin-top: 24px; margin-bottom: 24px; }
.uns-hs__icerik--zeminli.uns-hs__icerik--yatay-sol { margin-left: 24px; }
.uns-hs__icerik--zeminli.uns-hs__icerik--yatay-sag { margin-right: 24px; }

/* ---------- Üst rozet ---------- */

.uns-hs__rozet {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255,255,255,.14);
	backdrop-filter: blur(6px);
	font-size: 13.5px;
	font-weight: 600;
	color: #fff;
	margin-bottom: 22px;
}

.uns-hs__nokta-yesil {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: #4ADE80;
	box-shadow: 0 0 0 3px rgba(74,222,128,.25);
}

/* ---------- Başlık ---------- */

.uns-hs__baslik {
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 44px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 18px;
	letter-spacing: -.01em;
	text-shadow: 0 2px 16px rgba(0,0,0,.45), 0 1px 4px rgba(0,0,0,.4);
}

.uns-hs__baslik em {
	display: inline;
	font-style: italic;
	font-weight: 400;
}

.uns-hs__aciklama {
	font-size: 16.5px;
	line-height: 1.6;
	color: rgba(255,255,255,.88);
	margin: 0 0 30px;
	max-width: 580px;
}

/* ---------- Alt satır: buton + bilgi kutusu ---------- */

.uns-hs__alt {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
}

.uns-hs__btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--uns-renk, #C47C53);
	color: var(--uns-renk-uzeri, #fff);
	padding: 15px 26px;
	border-radius: 12px;
	font-size: 15.5px;
	font-weight: 700;
	text-decoration: none;
	transition: all .18s ease;
}

.uns-hs__btn:hover {
	background: var(--uns-renk-koyu, #a8623d);
	color: var(--uns-renk-uzeri, #fff);
	transform: translateY(-1px);
}

.uns-hs__bilgi {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 11px 18px;
	border-radius: 12px;
	background: rgba(20,24,34,.55);
	backdrop-filter: blur(6px);
}

.uns-hs__bilgi-ikon {
	display: inline-flex;
	flex-shrink: 0;
	color: #fff;
	opacity: .9;
}

.uns-hs__bilgi-ikon svg { width: 20px; height: 20px; }

.uns-hs__bilgi-metin {
	font-size: 13px;
	line-height: 1.45;
	color: rgba(255,255,255,.92);
}

.uns-hs__bilgi-metin strong {
	display: block;
	font-weight: 700;
	color: #fff;
}

/* ---------- Slider navigasyonu ---------- */

.uns-hs__noktalar {
	position: absolute;
	z-index: 3;
	bottom: 24px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
}

.uns-hs__nokta {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	border: 0;
	background: rgba(255,255,255,.45);
	cursor: pointer;
	padding: 0;
	transition: all .25s ease;
}

.uns-hs__nokta.is-aktif {
	width: 26px;
	background: #fff;
}

.uns-hs__ok {
	position: absolute;
	z-index: 3;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 0;
	background: rgba(255,255,255,.16);
	backdrop-filter: blur(4px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background .18s ease;
}

.uns-hs__ok:hover { background: rgba(255,255,255,.3); }
.uns-hs__ok--sol { left: 18px; }
.uns-hs__ok--sag { right: 18px; }

/* ---------- Duyarlı ---------- */

@media (max-width: 900px) {

	.uns-hs { border-radius: 16px; height: auto; }
	.uns-hs__icerik { padding: 32px 24px 36px; max-width: 100%; }
	.uns-hs__baslik { font-size: 30px; }
	.uns-hs__aciklama { font-size: 14.5px; }
	.uns-hs__ok { width: 36px; height: 36px; }
	.uns-hs__ok--sol { left: 10px; }
	.uns-hs__ok--sag { right: 10px; }
}

/*
 * Gerçek mobil genişlikte kare oran — kullanıcı isteği:
 * masaüstündeki geniş dikdörtgen (888:480) yerine 1:1.
 * Metinler küçülür ve ortalanır ki dar/kare alanda taşmasın.
 */
@media (max-width: 640px) {

	.uns-hs { aspect-ratio: 1 / 1; height: auto; }

	.uns-hs__slayt { justify-content: center; }

	.uns-hs__icerik {
		text-align: center;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 26px 20px 28px;
	}

	.uns-hs__rozet { font-size: 12px; padding: 6px 13px; margin-bottom: 16px; }

	.uns-hs__baslik { font-size: 21px; margin-bottom: 12px; }

	.uns-hs__aciklama {
		font-size: 13px;
		margin-bottom: 20px;
		/* İki satırla sınırla — kare alan dikeyde kısıtlı, taşma kesilmesin. */
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.uns-hs__alt { flex-direction: column; align-items: center; width: 100%; }
	.uns-hs__btn { width: 100%; justify-content: center; }
	.uns-hs__bilgi { width: 100%; justify-content: center; }
}