/*
 * Silver Stone — Hero Badge
 * Slayt uzerindeki rozetin gorunumu ve animasyonlari.
 * Genislik/yukseklik/kenar boslugu Nicepage'in kendi .u-image-1 kurallarindan
 * gelir; burada sadece rozetin ici cizilir.
 */

.ssh-badge {
	position: relative;
	display: block;
	box-sizing: border-box;
	padding: 0;
	border: 0;
	background: none !important;
	overflow: visible;
	pointer-events: none;
	z-index: 3;
}

.ssh-badge .ssh-link {
	display: block;
	width: 100%;
	height: 100%;
	pointer-events: auto;
	text-decoration: none;
	border: 0;
}

.ssh-enter,
.ssh-float {
	display: block;
	width: 100%;
	height: 100%;
}

.ssh-svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
	filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .38));
}

/* ---------- Yazi ---------- */

.ssh-txt text {
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	text-anchor: middle;
	dominant-baseline: auto;
}

.ssh-top,
.ssh-sub {
	font-weight: 700;
	letter-spacing: 1.2px;
	fill: #3a1e00;
}

.ssh-big {
	font-weight: 900;
	letter-spacing: -0.5px;
	fill: #ffffff;
	stroke: #7a1220;
	stroke-width: 5;
	stroke-linejoin: round;
	paint-order: stroke fill;
}

/* ---------- Animasyonlar ---------- */

@keyframes ssh-spin {
	to { transform: rotate(360deg); }
}

@keyframes ssh-spin-back {
	to { transform: rotate(-360deg); }
}

@keyframes ssh-float {
	0%   { transform: translateY(0) scale(1); }
	50%  { transform: translateY(-7px) scale(1.035); }
	100% { transform: translateY(0) scale(1); }
}

@keyframes ssh-in {
	0%   { opacity: 0; transform: translateX(-90px) rotate(-170deg) scale(.35); }
	60%  { opacity: 1; transform: translateX(0) rotate(12deg) scale(1.12); }
	80%  { transform: translateX(0) rotate(-5deg) scale(.96); }
	100% { opacity: 1; transform: translateX(0) rotate(0) scale(1); }
}

@keyframes ssh-shine {
	0%   { transform: translateX(0); }
	55%  { transform: translateX(360px); }
	100% { transform: translateX(360px); }
}

.ssh-burst {
	transform-origin: 100px 100px;
	animation: ssh-spin 26s linear infinite;
}

.ssh-ring {
	transform-origin: 100px 100px;
	animation: ssh-spin-back 16s linear infinite;
}

.ssh-shine {
	animation: ssh-shine 4.5s ease-in-out infinite;
}

.ssh-float {
	animation: ssh-float 3.8s ease-in-out infinite;
}

/* Giris: rozet her gorundugunde bastan oynar. */
.ssh-enter {
	animation: ssh-in .95s cubic-bezier(.2, .9, .25, 1) both;
}

/* Karusel icindeyken yalnizca aktif slaytta oynar. */
.u-carousel-item .ssh-enter {
	animation: none;
	opacity: 0;
}

.u-carousel-item.u-active .ssh-enter {
	animation: ssh-in .95s cubic-bezier(.2, .9, .25, 1) both;
	opacity: 1;
}

/* ---------- Erisilebilirlik ---------- */

@media (prefers-reduced-motion: reduce) {
	.ssh-burst,
	.ssh-ring,
	.ssh-shine,
	.ssh-float {
		animation: none !important;
	}
	.ssh-enter,
	.u-carousel-item.u-active .ssh-enter {
		animation: none !important;
		opacity: 1;
	}
	.u-carousel-item .ssh-enter { opacity: 1; }
}

/* ---------- Yonetim ekranindaki onizleme ---------- */

.ssh-admin-preview {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	align-items: flex-start;
	margin: 18px 0 26px;
	padding: 22px;
	border-radius: 8px;
	background: #2f3337;
}

.ssh-admin-badge {
	width: 170px;
	text-align: center;
}

.ssh-admin-badge .ssh-badge {
	width: 150px;
	height: 150px;
	margin: 0 auto;
}

.ssh-admin-caption {
	display: block;
	margin-top: 12px;
	color: #c9ced3;
	font-size: 12px;
	letter-spacing: .5px;
	text-transform: uppercase;
}

/* ==================================================================
   Slayt tanitim metni (ortali blok + kanit seridi)
   ================================================================== */

.ssh-hero {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 4;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	box-sizing: border-box;
	/* Ust bosluk logo + menuyu her zaman temizler; icerik uzasa da yukari tasmaz. */
	padding: var(--ssh-hero-top, clamp(225px, 29vh, 320px)) 0 50px;
	pointer-events: none;
	/* overflow: hidden VERMEYIN — karartma 100vw genisliginde ve bu kutu
	   yalnizca 940 px'lik icerik alani kadar; kesilince kenarlarda keskin
	   dikey cizgiler olusuyor. */
}

/*
 * Video uzerinde yazinin okunmasi icin yumusak karartma.
 * MENUNUN ALTINDAN baslar: yukarisi hic karartilmaz, yoksa basliktaki siyah
 * logo ve menu karartmanin uzerinde kalip zor okunuyor. Ust kenar sert bir
 * cizgi olmasin diye iceri dogru soluyor.
 */
.ssh-hero::before {
	content: "";
	position: absolute;
	top: calc(var(--ssh-hero-top, 225px) - 95px);
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background:
		/* Merkezde yogunlasan elips — dogasi geregi dort tarafa da yumusak biter. */
		radial-gradient(ellipse 66% 58% at 50% 46%,
			rgba(0, 0, 0, .56) 0%,
			rgba(0, 0, 0, .52) 26%,
			rgba(0, 0, 0, .40) 46%,
			rgba(0, 0, 0, .24) 64%,
			rgba(0, 0, 0, .11) 80%,
			rgba(0, 0, 0, .04) 91%,
			rgba(0, 0, 0, 0) 100%),
		/* Dikey derinlik: ust ve altta cok uzun bir rampayla sifira iner. */
		linear-gradient(180deg,
			rgba(0, 0, 0, 0) 0%,
			rgba(0, 0, 0, .02) 10%,
			rgba(0, 0, 0, .07) 20%,
			rgba(0, 0, 0, .14) 34%,
			rgba(0, 0, 0, .17) 56%,
			rgba(0, 0, 0, .13) 74%,
			rgba(0, 0, 0, .06) 88%,
			rgba(0, 0, 0, .02) 95%,
			rgba(0, 0, 0, 0) 100%);
	/* Sag ve sol kenarlar da solsun (yoksa ekran kenarinda duz kesiliyor). */
	-webkit-mask-image: radial-gradient(ellipse 62% 78% at 50% 50%,
		#000 0%,
		rgba(0, 0, 0, .96) 34%,
		rgba(0, 0, 0, .78) 56%,
		rgba(0, 0, 0, .46) 74%,
		rgba(0, 0, 0, .18) 88%,
		rgba(0, 0, 0, 0) 100%);
	mask-image: radial-gradient(ellipse 62% 78% at 50% 50%,
		#000 0%,
		rgba(0, 0, 0, .96) 34%,
		rgba(0, 0, 0, .78) 56%,
		rgba(0, 0, 0, .46) 74%,
		rgba(0, 0, 0, .18) 88%,
		rgba(0, 0, 0, 0) 100%);
	pointer-events: none;
}

.ssh-hero-inner {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: 780px;
	margin: 0 auto;
	padding: 0 24px;
	text-align: center;
}

.ssh-hero--left .ssh-hero-inner {
	margin: 0;
	max-width: 640px;
	text-align: left;
}

/* ---------- Ust etiket ---------- */

.ssh-hero .ssh-hero-eyebrow {
	display: inline-block;
	margin: 0 0 20px;
	padding-bottom: 9px;
	border-bottom: 2px solid rgba(255, 161, 44, .75);
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 12px;
	line-height: 1;
	letter-spacing: .24em;
	text-transform: uppercase;
	color: #ffbe5c;
}

/* ---------- Baslik ---------- */

.ssh-hero .ssh-hero-title {
	margin: 0 0 20px;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: clamp(28px, 3.8vw, 52px);
	line-height: 1.1;
	letter-spacing: -.01em;
	color: #ffffff;
	text-shadow: 0 2px 26px rgba(0, 0, 0, .55);
	text-transform: none;
}

.ssh-hero .ssh-hero-title em {
	display: block;
	font-style: italic;
	font-weight: 500;
	color: #ffc069;
}

/* ---------- Aciklama ---------- */

.ssh-hero .ssh-hero-text {
	max-width: 560px;
	margin: 0 auto 30px;
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: clamp(15px, 1.3vw, 18px);
	line-height: 1.65;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}

.ssh-hero--left .ssh-hero-text { margin-left: 0; }

/* ---------- Buton ---------- */

.ssh-hero .ssh-hero-cta {
	display: inline-block;
	padding: 15px 34px;
	border: 0;
	border-radius: 2px;
	background: #ffa12c;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .34);
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 13px;
	line-height: 1;
	letter-spacing: .16em;
	text-transform: uppercase;
	text-decoration: none;
	color: #141414;
	pointer-events: auto;
	transition: background .2s ease, transform .2s ease;
}

.ssh-hero .ssh-hero-cta:hover,
.ssh-hero .ssh-hero-cta:focus {
	background: #ff940e;
	color: #141414;
	text-decoration: none;
	transform: translateY(-2px);
}

/* ---------- Kanit seridi ---------- */

.ssh-facts {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	max-width: 760px;
	margin: 34px auto 0;
}

.ssh-hero--left .ssh-facts {
	justify-content: flex-start;
	margin-left: 0;
}

.ssh-fact {
	box-sizing: border-box;
	padding: 2px 30px;
	text-align: center;
	border-left: 1px solid rgba(255, 255, 255, .24);
}

.ssh-fact:first-child { border-left: 0; }
.ssh-hero--left .ssh-fact:first-child { padding-left: 0; }

.ssh-fact-value {
	display: block;
	font-family: "Playfair Display", Georgia, "Times New Roman", serif;
	font-weight: 500;
	font-size: 27px;
	line-height: 1.2;
	color: #ffffff;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .5);
}

.ssh-fact-label {
	display: block;
	margin-top: 7px;
	font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 700;
	font-size: 11px;
	line-height: 1.3;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .64);
}

/* ---------- Giris animasyonu (slayt her aktif olduğunda) ---------- */

@keyframes ssh-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: translateY(0); }
}

.ssh-hero-inner > * {
	animation: ssh-rise .85s cubic-bezier(.2, .8, .25, 1) both;
}

.u-carousel-item .ssh-hero-inner > * {
	animation: none;
	opacity: 0;
}

.u-carousel-item.u-active .ssh-hero-inner > * {
	animation: ssh-rise .85s cubic-bezier(.2, .8, .25, 1) both;
	opacity: 1;
}

.ssh-hero-inner > *:nth-child(1) { animation-delay: .10s; }
.ssh-hero-inner > *:nth-child(2) { animation-delay: .22s; }
.ssh-hero-inner > *:nth-child(3) { animation-delay: .34s; }
.ssh-hero-inner > *:nth-child(4) { animation-delay: .46s; }
.ssh-hero-inner > *:nth-child(5) { animation-delay: .58s; }

/* ---------- Kucuk ekranlar ---------- */

@media (max-width: 991px) {
	.ssh-hero { padding: var(--ssh-hero-top, clamp(195px, 25vh, 260px)) 0 44px; }
	.ssh-facts { margin-top: 30px; }
	.ssh-fact { padding: 2px 20px; }
	.ssh-fact-value { font-size: 22px; }
	.ssh-fact-label { font-size: 10px; letter-spacing: .1em; }
}

@media (max-width: 767px) {
	.ssh-hero {
		padding: var(--ssh-hero-top, clamp(165px, 22vh, 215px)) 0 24px;
		justify-content: flex-start;
	}
	/* Mobilde slayt 500 px; blogun tasmamasi icin olculer kuculur. */
	.ssh-hero .ssh-hero-eyebrow {
		margin-bottom: 12px;
		padding-bottom: 6px;
	}
	.ssh-hero .ssh-hero-title {
		margin-bottom: 12px;
		font-size: 25px;
		line-height: 1.16;
	}
	.ssh-hero .ssh-hero-text {
		margin-bottom: 18px;
		font-size: 13.5px;
		line-height: 1.5;
	}
	.ssh-hero .ssh-hero-cta {
		padding: 12px 24px;
		font-size: 12px;
		letter-spacing: .12em;
	}
	.ssh-hero--left .ssh-hero-inner {
		margin: 0 auto;
		text-align: center;
	}
	.ssh-hero .ssh-hero-text { margin-left: auto; margin-right: auto; }
	.ssh-hero--left .ssh-facts { justify-content: center; margin-left: auto; }
	.ssh-hero::before {
		top: calc(var(--ssh-hero-top, 175px) - 60px);
		background:
			radial-gradient(ellipse 96% 72% at 50% 52%,
				rgba(0, 0, 0, .54) 0%,
				rgba(0, 0, 0, .44) 46%,
				rgba(0, 0, 0, .22) 72%,
				rgba(0, 0, 0, .06) 90%,
				rgba(0, 0, 0, 0) 100%),
			linear-gradient(180deg,
				rgba(0, 0, 0, 0) 0%,
				rgba(0, 0, 0, .16) 16%,
				rgba(0, 0, 0, .40) 46%,
				rgba(0, 0, 0, .40) 82%,
				rgba(0, 0, 0, .16) 96%,
				rgba(0, 0, 0, 0) 100%);
		-webkit-mask-image: linear-gradient(90deg,
			rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 8%, #000 18%,
			#000 82%, rgba(0, 0, 0, .7) 92%, rgba(0, 0, 0, 0) 100%);
		mask-image: linear-gradient(90deg,
			rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .7) 8%, #000 18%,
			#000 82%, rgba(0, 0, 0, .7) 92%, rgba(0, 0, 0, 0) 100%);
	}
	.ssh-facts { display: none; }
	.ssh-hero .ssh-hero-eyebrow { font-size: 11px; letter-spacing: .18em; }
}

@media (prefers-reduced-motion: reduce) {
	.ssh-hero-inner > *,
	.u-carousel-item.u-active .ssh-hero-inner > * {
		animation: none !important;
		opacity: 1;
	}
	.u-carousel-item .ssh-hero-inner > * { opacity: 1; }
	.ssh-hero .ssh-hero-cta { transition: none; }
}

/* ==================================================================
   Baslik (logo + menu) videonun uzerindeyken okunurluk
   Yalnizca gövdesinde ssh-header-* sinifi olan sayfalara uygulanir;
   o sinifi eklenti sadece basligin seffaf bindigi sayfalara koyar.

   DIKKAT: Bu sayfalarda Nicepage basligi "position: absolute; z-index: 20"
   ile icerigin uzerine bindiriyor. position ya da z-index'e DOKUNMAYIN —
   bindirme bozulur, baslik akisa girer ve kendi gri zemini gorunur.
   Yigin baglami zaten var; ::before bu yuzden basligin icinde kaliyor.
   ================================================================== */

.ssh-header-light .u-header,
.ssh-header-white .u-header {
	isolation: isolate;
}

.ssh-header-light .u-header::before,
.ssh-header-white .u-header::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	pointer-events: none;
}

/* A — Menu siyah kalir, arkasi acilir. */
.ssh-header-light .u-header::before {
	background: linear-gradient(180deg,
		rgba(255, 255, 255, .92) 0%,
		rgba(255, 255, 255, .88) 55%,
		rgba(255, 255, 255, .78) 82%,
		rgba(255, 255, 255, .30) 95%,
		rgba(255, 255, 255, 0) 100%);
}

/* B — Menu ve logo beyaz, arkasi hafif koyulasir. */
.ssh-header-white .u-header::before {
	background: linear-gradient(180deg,
		rgba(0, 0, 0, .52) 0%,
		rgba(0, 0, 0, .32) 55%,
		rgba(0, 0, 0, 0) 100%);
}

.ssh-header-white .u-header .u-nav-link,
.ssh-header-white .u-header .u-nav-link:visited,
.ssh-header-white .u-header a.u-nav-link.u-text-black {
	color: #ffffff !important;
	text-shadow: 0 1px 12px rgba(0, 0, 0, .55), 0 0 2px rgba(0, 0, 0, .4);
}

.ssh-header-white .u-header .u-nav-link:hover,
.ssh-header-white .u-header .u-nav-link:focus,
.ssh-header-white .u-header a.u-nav-link.u-text-black:hover {
	color: #ffbe5c !important;
}

/* Acik seritte siyah yazi zaten okunur; yine de hafif bir ayrim. */
.ssh-header-light .u-header .u-nav-link {
	text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
}