/* Kalistack — Node.JS sayfasi widget'lari (ksf-)
 * Kod penceresiyle ayni koyu dil: lacivert zemin, mono detaylar,
 * yesil Node vurgusu. Hover golgesi yok. */

.ksf-kap { background: #0E1726; }

.ksf {
	--ksf-vurgu: #8CC84B;
	max-width: 1200px; margin: 0 auto;
}

/* ---------------- Ortak tepe ---------------- */
.ksf-tepe { text-align: center; margin-bottom: 30px; }
.ksf-ust {
	margin: 0 0 10px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; font-weight: 700;
	letter-spacing: .16em; text-transform: uppercase; color: var(--ksf-vurgu);
}
.ksf-bas { margin: 0 0 10px; font-size: 30px; line-height: 1.22; font-weight: 800; color: #fff; }
.ksf-ack { margin: 0 auto; max-width: 640px; font-size: 15px; line-height: 1.65; color: #A7BACD; }

/* ---------------- 1) Paket kartlari ---------------- */
.ksf-izgara {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	align-items: stretch;
}

.ksf-kart {
	position: relative;
	display: flex; flex-direction: column;
	padding: 26px 24px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .10);
	transition: border-color .18s ease;
}
.ksf-kart:hover { border-color: rgba(140, 200, 75, .45); }
.ksf-kart--one {
	border-color: var(--ksf-vurgu);
	background: rgba(140, 200, 75, .07);
}

.ksf-rozet {
	position: absolute; top: 0; left: 24px;
	transform: translateY(-50%);
	padding: 4px 12px; border-radius: 999px;
	background: var(--ksf-vurgu); color: #0B1A31;
	font-size: 11px; font-weight: 700; white-space: nowrap;
}

.ksf-ad { margin: 0 0 6px; font-size: 19px; font-weight: 700; color: #fff; }
.ksf-ozet { margin: 0 0 16px; font-size: 13.5px; line-height: 1.55; color: #A7BACD; }
.ksf-fiyat { margin: 0 0 16px; font-size: 26px; font-weight: 800; color: #fff; }
.ksf-fnot { font-size: 12.5px; font-weight: 500; color: #8FA3B8; margin-left: 4px; }

/* Kaynak cubuklari */
.ksf-kaynaklar { display: flex; flex-direction: column; gap: 13px; flex: 1 1 auto; margin-bottom: 22px; }
.ksf-ksatir {
	display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
	margin-bottom: 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px;
}
.ksf-kad { color: #8FA3B8; }
.ksf-kdeger { color: #fff; font-weight: 600; }
.ksf-cubuk {
	display: block; height: 5px; border-radius: 999px;
	background: rgba(255, 255, 255, .09);
	overflow: hidden;
}
.ksf-dolgu {
	display: block; height: 100%; border-radius: 999px;
	background: var(--ksf-vurgu);
}

.ksf-btn {
	display: block; margin-top: auto;
	padding: 12px 20px; border-radius: 10px;
	border: 1px solid var(--ksf-vurgu);
	background: transparent; color: var(--ksf-vurgu);
	font-size: 14px; font-weight: 700; text-align: center; text-decoration: none;
	transition: background-color .18s ease, color .18s ease;
}
.ksf-btn:hover { background: var(--ksf-vurgu); color: #0B1A31; }
.ksf-kart--one .ksf-btn { background: var(--ksf-vurgu); color: #0B1A31; }
.ksf-kart--one .ksf-btn:hover { filter: brightness(1.08); }

/* ---------------- 2) Uyumluluk matrisi ---------------- */
.ksf-gruplar { display: flex; flex-direction: column; gap: 22px; }
.ksf-grup {
	padding: 20px 22px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(255, 255, 255, .08);
}
.ksf-gad {
	margin: 0 0 14px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; font-weight: 700;
	letter-spacing: .1em; text-transform: uppercase; color: #8FA3B8;
}
.ksf-cipler { display: flex; flex-wrap: wrap; gap: 9px; }
.ksf-cip {
	display: inline-flex; align-items: baseline; gap: 7px;
	padding: 9px 14px; border-radius: 9px;
	background: rgba(255, 255, 255, .05);
	border: 1px solid rgba(255, 255, 255, .09);
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px;
}
.ksf-cad { color: #fff; font-weight: 600; }
.ksf-csurum { font-size: 11.5px; color: #8FA3B8; }
/* Durum, sol kenardaki renkli seritle belirtilir. */
.ksf-cip--yok   { opacity: .6; }

/* ---------------- 3) Teklif blogu ---------------- */
.ksf-teklif {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
	gap: 40px;
	align-items: center;
	padding: 34px;
	border-radius: 16px;
	background: rgba(255, 255, 255, .035);
	border: 1px solid rgba(255, 255, 255, .10);
}
.ksf-tbas { margin: 0 0 12px; font-size: 27px; line-height: 1.25; font-weight: 800; color: #fff; }
.ksf-tack { margin: 0 0 22px; font-size: 15px; line-height: 1.65; color: #A7BACD; }
.ksf-btn--buyuk {
	display: inline-block; margin-top: 0;
	padding: 14px 28px;
	background: var(--ksf-vurgu); color: #0B1A31;
}
.ksf-btn--buyuk:hover { filter: brightness(1.08); background: var(--ksf-vurgu); color: #0B1A31; }
.ksf-tnot { margin: 12px 0 0; font-size: 12.5px; color: #8FA3B8; }

.ksf-lbas {
	margin: 0 0 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12.5px; color: #8FA3B8;
}
.ksf-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ksf-lmadde {
	position: relative;
	padding-left: 22px;
	font-size: 14px; line-height: 1.55; color: #DCE6F0;
}
/* Onay isareti cizimle; ikon kutuphanesine bagimli degil. */
.ksf-lmadde::before {
	content: '';
	position: absolute; left: 2px; top: .42em;
	width: 10px; height: 5px;
	border-left: 2px solid var(--ksf-vurgu);
	border-bottom: 2px solid var(--ksf-vurgu);
	transform: rotate(-45deg);
}

/* ---------------- Duyarli ---------------- */
@media ( max-width: 1024px ) {
	.ksf-izgara { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.ksf-teklif { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 28px 24px; }
	.ksf-bas { font-size: 25px; }
}
@media ( max-width: 620px ) {
	.ksf-izgara { grid-template-columns: minmax(0, 1fr); }
	.ksf-bas { font-size: 22px; }
	.ksf-tbas { font-size: 22px; }
	.ksf-grup { padding: 16px; }
	.ksf-btn--buyuk { display: block; text-align: center; }
}

@media ( prefers-reduced-motion: reduce ) {
	.ksf-kart, .ksf-btn { transition: none; }
}