/* Kalistack — Referanslar sayfasi widget'lari (ksb-vitrin, ksb-kanit)
 * Hover golgesi bilinçli olarak yok; sayfa genelindeki kararla ayni. */

/* ---------------- Proje vitrini ---------------- */
.ksv-kap { position: relative; }
.ksv { max-width: 1120px; margin: 0 auto; }

.ksv-tepe { text-align: center; margin-bottom: 22px; }
.ksv-ust {
	margin: 0 0 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: #f5821f;
}
.ksv-bas { margin: 0 0 8px; font-size: 28px; line-height: 1.25; font-weight: 700; color: #083C64; }
.ksv-ack { margin: 0 auto; max-width: 620px; font-size: 15px; line-height: 1.6; color: #5A6B7B; }

.ksv-filtreler {
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 8px; margin: 0 0 20px;
}
.ksv-filtre {
	appearance: none; border: 0; cursor: pointer;
	padding: 8px 16px; border-radius: 999px;
	background: #EEF3F8; color: #083C64;
	font-size: 13px; font-weight: 600; font-family: inherit;
	transition: background-color .18s ease, color .18s ease;
}
.ksv-filtre:hover { background: #E2EAF2; }
.ksv-filtre.ksv-aktif { background: #083C64; color: #fff; }

.ksv-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }

.ksv-kart {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid #E2E8F0; border-radius: 14px;
	overflow: hidden; text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
a.ksv-kart:hover { border-color: #f5821f; }
.ksv-kart[hidden] { display: none; }

.ksv-gorsel {
	height: 150px; flex: 0 0 auto;
	display: flex; align-items: center; justify-content: center;
	background-color: #083C64; background-size: cover; background-position: center;
}
.ksv-ikon { font-size: 34px; line-height: 1; color: #fff; opacity: .9; }
.ksv-ikon svg { width: 34px; height: 34px; fill: currentColor; }

.ksv-govde { padding: 18px; display: flex; flex-direction: column; gap: 8px; }
.ksv-etiket {
	align-self: flex-start; padding: 4px 10px; border-radius: 999px;
	background: #FEF0E4; color: #B4590E;
	font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ksv-kbas { margin: 0; font-size: 17px; line-height: 1.35; font-weight: 700; color: #083C64; }
.ksv-kack { margin: 0; font-size: 14px; line-height: 1.6; color: #5A6B7B; }

.ksv-rozetler { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ksv-rozet {
	padding: 5px 10px; border-radius: 8px;
	background: #F1F5F9; color: #42576B;
	font-size: 12px; font-weight: 600;
}

/* ---------------- Kanit seridi ---------------- */
.ksk-kap { background: #F6F9FC; }
.ksk { max-width: 1060px; margin: 0 auto; }
.ksk-bas { margin: 0 0 8px; font-size: 26px; line-height: 1.3; font-weight: 700; color: #083C64; text-align: center; }
.ksk-ack { margin: 0 auto 22px; max-width: 580px; font-size: 15px; line-height: 1.6; color: #5A6B7B; text-align: center; }

.ksk-izgara { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ksk-kart {
	background: #fff; border: 1px solid #DCE7F0; border-radius: 14px;
	padding: 20px 20px 18px;
	display: flex; flex-direction: column; gap: 8px;
}
.ksk-ikon { font-size: 22px; line-height: 1; color: #f5821f; }
.ksk-ikon svg { width: 22px; height: 22px; fill: currentColor; }
.ksk-kbas { margin: 0; font-size: 16px; line-height: 1.35; font-weight: 700; color: #083C64; }
.ksk-kack { margin: 0; font-size: 14px; line-height: 1.6; color: #5A6B7B; flex: 1 1 auto; }
.ksk-kaynak {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 13px; font-weight: 600; color: #0C5688; text-decoration: none;
}
.ksk-kaynak i { font-size: 11px; }
a.ksk-kaynak:hover { text-decoration: underline; }
.ksk-kaynak--duz { color: #7A8C9C; font-weight: 500; }

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1024px ) {
	.ksv-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ksk-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media ( max-width: 640px ) {
	.ksv-izgara,
	.ksk-izgara { grid-template-columns: minmax(0, 1fr); }
	.ksv-bas { font-size: 23px; }
	.ksk-bas { font-size: 22px; }
}
/* Kalistack — Logo Duvari (ksb-logolar). refs.css sonuna eklenir. */

.ksg { max-width: 1120px; margin: 0 auto; }

.ksg-tepe { text-align: center; margin-bottom: 22px; }
.ksg-ust {
	margin: 0 0 8px; font-size: 12px; font-weight: 700;
	letter-spacing: .12em; text-transform: uppercase; color: #f5821f;
}
.ksg-bas { margin: 0 0 8px; font-size: 26px; line-height: 1.3; font-weight: 700; color: #083C64; }
.ksg-ack { margin: 0 auto; max-width: 620px; font-size: 15px; line-height: 1.6; color: #5A6B7B; }

.ksg-izgara {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.ksg {
	--ksg-sure: 220ms;
	--ksg-olcek: 1.06;
	--ksg-kalk: -5px;
	--ksg-egim: -2deg;
	--ksg-hv-kenar: #f5821f;
	--ksg-hv-zemin: #FFF7F0;
}

.ksg-logo {
	/* Efektler bu degiskenleri degistirir; transform tek yerde kurulur. */
	--t-y: 0px; --t-s: 1; --t-r: 0deg;
	display: flex; align-items: center; justify-content: center;
	min-height: 96px; padding: 14px 18px;
	border-radius: 12px;
	text-decoration: none;
	background: #fff; border: 1px solid #E6ECF3;
	transform: translateY(var(--t-y)) scale(var(--t-s)) rotate(var(--t-r));
	transition:
		border-color var(--ksg-sure) ease,
		background-color var(--ksg-sure) ease,
		transform var(--ksg-sure) ease;
}
.ksg--sade .ksg-logo { background: transparent; border-color: transparent; }

.ksg-logo img {
	--f-g: 0; --f-b: 1;
	max-height: 44px; max-width: 100%;
	width: auto; height: auto;
	object-fit: contain;
	filter: grayscale(var(--f-g)) brightness(var(--f-b));
	transition: filter var(--ksg-sure) ease, opacity var(--ksg-sure) ease;
}
/* Duragan durum: gri secilmisse gri durur ve hover'da da oyle kalir;
   yalnizca "renklensin" efekti secilirse renklenir. */
.ksg--gri .ksg-logo img { --f-g: 1; opacity: .62; }

/* ---- Secilebilir hover efektleri (birden fazlasi birlikte calisir) ---- */
.ksg--hv-renklen .ksg-logo:hover img { --f-g: 0; opacity: 1; }
.ksg--hv-parlak  .ksg-logo:hover img { --f-b: 1.18; }
.ksg--hv-buyut   .ksg-logo:hover { --t-s: var(--ksg-olcek); }
.ksg--hv-yukari  .ksg-logo:hover { --t-y: var(--ksg-kalk); }
.ksg--hv-egik    .ksg-logo:hover { --t-r: var(--ksg-egim); }
.ksg--hv-kenar   .ksg-logo:hover { border-color: var(--ksg-hv-kenar) !important; }
.ksg--hv-zemin   .ksg-logo:hover { background-color: var(--ksg-hv-zemin) !important; }

/* Hareketi azalt tercihi: yalnizca renk gecisleri kalir. */
@media ( prefers-reduced-motion: reduce ) {
	.ksg-logo { transform: none !important; transition: border-color .2s ease, background-color .2s ease; }
}

/* ---------------- Kayan serit ---------------- */
.ksg-serit {
	overflow: hidden;
	/* Iki uc yumusak bitsin. */
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.ksg-akis {
	display: flex; gap: 14px; width: max-content;
	animation: ksg-kay 40s linear infinite;
}
.ksg-serit:hover .ksg-akis { animation-play-state: paused; }
.ksg-akis .ksg-logo { flex: 0 0 auto; min-width: 160px; }

@keyframes ksg-kay {
	from { transform: translateX(0); }
	/* Liste iki kez basildigi icin yarisi kadar kaydirmak yeterli. */
	to   { transform: translateX(-50%); }
}

@media ( prefers-reduced-motion: reduce ) {
	.ksg-akis { animation: none; }
	.ksg-serit { overflow-x: auto; }
}

@media ( max-width: 1024px ) {
	.ksg-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media ( max-width: 600px ) {
	.ksg-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ksg-bas { font-size: 22px; }
}
/* Kalistack — Uzanti Fiyat Seridi (ksb-tld-serit). refs.css sonuna eklenir. */

.kst {
	--kst-vurgu: #f5821f;
	max-width: 1160px; margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 14px;
}

.kst-kutu {
	position: relative;
	display: flex; align-items: center; justify-content: center;
	gap: 14px;
	min-height: 56px; padding: 12px 18px;
	background: #fff;
	border: 1px solid #ECEFF4;
	border-radius: 12px;
	text-decoration: none;
	transition: border-color .18s ease;
}
a.kst-kutu:hover { border-color: var(--kst-vurgu); }

/* One cikan kutucuk: kesik cizgi + ustte rozet */
.kst-kutu--one {
	border-style: dashed;
	border-color: var(--kst-vurgu);
	background: #FFF9F4;
}
.kst-kutu--one .kst-fiyat { color: var(--kst-vurgu); }

.kst-rozet {
	position: absolute;
	top: 0; left: 50%;
	transform: translate(-50%, -50%);
	padding: 3px 12px;
	border-radius: 999px;
	background: var(--kst-vurgu); color: #fff;
	font-size: 11px; font-weight: 700; line-height: 1.5;
	white-space: nowrap;
}

.kst-tld {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: 17px; font-weight: 800; color: #0F2440;
	line-height: 1;
}
.kst-tld img,
.kst-tld svg { height: 20px; width: auto; display: block; }

/* Logo varken uzanti yazisi ekran okuyucuda kalir, gorunmez. */
.kst-tld .ksw-sr {
	position: absolute; width: 1px; height: 1px;
	padding: 0; margin: -1px; overflow: hidden;
	clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.kst-ayrac {
	width: 1px; align-self: stretch;
	margin: 2px 0;
	background: #E3E8EF;
	flex: 0 0 auto;
}

.kst-fiyat {
	font-size: 15px; font-weight: 700; color: #0F2440;
	white-space: nowrap;
}

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1024px ) {
	.kst { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media ( max-width: 700px ) {
	.kst { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* Yatay kaydirma acikken tek sira halinde kalir. */
	.kst--kaydir {
		display: flex;
		overflow-x: auto;
		scroll-snap-type: x proximity;
		padding-top: 10px;
		-webkit-overflow-scrolling: touch;
	}
	.kst--kaydir .kst-kutu {
		flex: 0 0 auto;
		min-width: 168px;
		scroll-snap-align: start;
	}
}