/* Kalistack — Urun Panosu (ksb-pano)
 * Solda katmanli gorsel blogu, sagda degisken genislikte kartlar.
 * Hover golgesi yok; sayfa genelindeki kararla ayni. */

.ksu-kap { background: #F4F6FA; }

.ksu {
	--ksu-vurgu: #f5821f;
	max-width: 1300px; margin: 0 auto;
	display: grid;
	grid-template-columns: var(--ksu-medya-en, 300px) minmax(0, 1fr);
	gap: 16px;
	align-items: stretch;
}
.ksu--medyasiz { grid-template-columns: minmax(0, 1fr); }

/* ---------------- Gorsel blogu (katmanli) ---------------- */
.ksu-medya {
	position: relative;
	background: var(--ksu-vurgu);
	border-radius: 14px;
	min-height: 260px;
	overflow: hidden;
}
/* Tasan katman varsa blok kirpmayi birakir. */
.ksu--tasma .ksu-medya { overflow: visible; z-index: 3; }

/* Her gorsel bir katman. DOM sirasi yigin sirasidir:
   ilk satir en altta, son satir en ustte. */
.ksu-kat {
	position: absolute;
	top: 0; right: 0; bottom: 0; left: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	border-radius: inherit;
	transform: translate(var(--ksu-x, 0px), var(--ksu-y, 0px)) scale(var(--ksu-olcek, 1));
}

/* Tasmayan katman blokla ayni koseleri alir (border-radius: inherit zaten
   zemini kirpar). Tasan katmanda yuvarlak kose istenmez. */
.ksu-kat--tasan { border-radius: 0; }

/* ---------------- Kart izgarasi ---------------- */
.ksu-izgara {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	align-content: start;
}

.ksu-kart {
	position: relative;
	min-height: 190px;
	padding: 22px 24px;
	border-radius: 14px;
	border: 1px solid transparent;
	display: flex; flex-direction: column;
	overflow: hidden;
}
.ksu-kart--acik { background: #fff; border-color: #EAEEF4; }
.ksu-kart--koyu { background: #0B1220; }

/* Basligin solundaki vurgu cubugu */
.ksu-kart::before {
	content: none;
	position: absolute;
	left: 0; top: 24px;
	width: 4px; height: 22px;
	background: var(--ksu-vurgu);
	border-radius: 0 3px 3px 0;
}

/* Kose ikonu — ortak temel. Bicime gore asagida degisir. */
.ksu-ikon {
	position: absolute;
	top: 0; right: 0;
	width: 44px; height: 44px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 0 14px 0 14px;
	background: #FEF0E4; color: var(--ksu-vurgu);
	font-size: 16px;
	z-index: 1;
}
.ksu-kart--koyu .ksu-ikon { background: var(--ksu-vurgu); color: #fff; }
.ksu-ikon svg { width: 16px; height: 16px; fill: currentColor; }

/* 2) Yuvarlak rozet — kosecikten iceri alinmis daire */
.ksu--ikon-daire .ksu-ikon {
	top: 16px; right: 16px;
	border-radius: 50%;
}

/* 3) Sade ikon — zemin yok, yalniz ikon.
   Zemin kontrolu bu bicimde anlamsiz oldugu icin bastirilir. */
.ksu--ikon-sade .ksu-ikon {
	top: 18px; right: 20px;
	width: auto !important; height: auto !important;
	background: transparent !important;
	border-radius: 0;
}

/* 4) Serit — sag kenara yapisik yarim kapsul */
.ksu--ikon-serit .ksu-ikon {
	top: 20px; right: 0;
	border-radius: 999px 0 0 999px;
	padding-right: 4px;
}

/* 5) Filigran — buyuk, soluk, metnin arkasinda */
.ksu--ikon-filigran .ksu-ikon {
	top: -8px; right: -6px;
	width: auto !important; height: auto !important;
	background: transparent !important;
	border-radius: 0;
	font-size: 74px;
	opacity: .1;
	z-index: 0;
}
.ksu--ikon-filigran .ksu-ikon svg { width: 74px; height: 74px; }

/* Filigran arkada kalsin diye kart icerigi one alinir. */
.ksu-kart > *:not(.ksu-ikon) { position: relative; z-index: 1; }

.ksu-kbas {
	margin: 0 52px 10px 0;
	font-size: 18px; line-height: 1.3; font-weight: 700;
	color: #0F2440;
}
/* Ikon yoksa ya da yer kaplamiyorsa baslik tam genislige yayilir. */
.ksu-kart--ikonsuz .ksu-kbas,
.ksu--ikon-filigran .ksu-kbas { margin-right: 0; }
.ksu--ikon-sade .ksu-kbas { margin-right: 38px; }
.ksu-kart--koyu .ksu-kbas { color: #fff; }

.ksu-kack {
	margin: 0 0 14px;
	font-size: 13.5px; line-height: 1.55;
	color: #5A6B7B;
}
.ksu-kart--koyu .ksu-kack { color: #C3CEDC; }

/* ---------------- Fiyat + dugme ---------------- */
.ksu-alt {
	margin-top: auto;
	display: flex; flex-direction: column; gap: 14px;
	align-items: flex-start;
}
.ksu-alt--yan {
	flex-direction: row; align-items: flex-end;
	justify-content: space-between; gap: 16px; flex-wrap: wrap;
}

.ksu-fkutu { display: flex; flex-direction: column; gap: 2px; }
.ksu-fiyat { font-size: 26px; line-height: 1.15; font-weight: 700; color: #0F2440; }
.ksu-kart--koyu .ksu-fiyat { color: #fff; }
.ksu-fnot { font-size: 12.5px; color: #6B7C90; }
.ksu-kart--koyu .ksu-fnot { color: #9FB0C2; }

.ksu-btn {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 11px 20px; border-radius: 8px;
	font-size: 14px; font-weight: 600; text-decoration: none;
	border: 1px solid var(--ksu-vurgu);
	transition: background-color .18s ease, color .18s ease;
	white-space: nowrap;
}
.ksu-btn i { font-size: 11px; }
.ksu-btn--cizgili { background: transparent; color: var(--ksu-vurgu); }
.ksu-btn--cizgili:hover { background: var(--ksu-vurgu); color: #fff; }
.ksu-btn--dolu { background: var(--ksu-vurgu); color: #fff; }
.ksu-btn--dolu:hover { background: #dd6f10; border-color: #dd6f10; color: #fff; }

/* Dar kartta dugme tam genislik dursun. */
.ksu-alt:not(.ksu-alt--yan) .ksu-btn { width: 100%; justify-content: center; }

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1024px ) {
	.ksu { grid-template-columns: minmax(0, 1fr); }
	.ksu-medya { min-height: 220px; }

	/* Dar ekranda tasma yatay kaydirma yaratmasin: her katman bloga geri girer. */
	.ksu--tasma .ksu-medya { overflow: hidden; }
	.ksu-kat {
		top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important;
		transform: none !important;
		border-radius: inherit;
	}
}
@media ( max-width: 600px ) {
	.ksu-kart { grid-column: auto !important; }
	.ksu-alt--yan { flex-direction: column; align-items: flex-start; }
	.ksu-alt--yan .ksu-btn { width: 100%; justify-content: center; }
}