/* Kalistack — Veri Merkezi Hizmetleri sayfası (kvm-)
 *
 * Sayfanın kendi dili: sorumluluk katmanları. Grafit bir yığın; her katman
 * ikiye bölünmüş — solda bizim yaptığımız, sağda sizde kalan. Renk yerine
 * yapı ayırt ediyor: sayfanın kimliği bu ikiye bölünmüş yığın.
 */

.kvm-kap { background: #F3F4F6; }

.kvm {
	--kvm-grafit: #23262B;
	--kvm-biz: #0E7490;
	--kvm-siz: #B45309;
	--kvm-ink: #16181C;
	--kvm-sus: #5C6470;
	--kvm-cizgi: #DFE2E7;
	--kvm-yzy: #FFFFFF;
	max-width: 1100px;
	margin: 0 auto;
}

/* Ortak tepe */
.kvm-tepe { margin-bottom: 30px; text-align: center; }
.kvm-etiket {
	display: inline-block; margin: 0 0 12px;
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase; color: var(--kvm-sus);
}
.kvm-bas { margin: 0 0 10px; font-size: 30px; line-height: 1.22; font-weight: 800; color: var(--kvm-ink); }
.kvm-ack { margin: 0 auto; max-width: 660px; font-size: 15px; line-height: 1.7; color: var(--kvm-sus); }

.kvm-btn {
	display: inline-block;
	padding: 13px 24px; border-radius: 8px;
	font-size: 14.5px; font-weight: 700; text-decoration: none;
	border: 1px solid var(--kvm-grafit);
	background: var(--kvm-grafit); color: #fff;
	transition: filter .18s ease, background-color .18s ease, color .18s ease;
}
.kvm-btn:hover { filter: brightness(1.9); }
.kvm-btn--acik { background: transparent; border-color: rgba(255, 255, 255, .45); color: #fff; }
.kvm-btn--acik:hover { background: rgba(255, 255, 255, .12); filter: none; }
.kvm-btn--ikinci { background: transparent; color: var(--kvm-grafit); }
.kvm-btn--ikinci:hover { background: rgba(35, 38, 43, .07); filter: none; }
.kvm-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* =====================================================================
 * 1) Açılış — grafit kütle
 * ================================================================== */
.kvm-kap--grafit { background: var(--kvm-grafit); }
.kvm-kutle { text-align: center; }
.kvm-uetiket {
	display: inline-block; margin: 0 0 18px;
	padding: 5px 14px; border-radius: 4px;
	background: rgba(255, 255, 255, .1);
	color: rgba(255, 255, 255, .82);
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
}
.kvm-h1 { margin: 0 auto 16px; max-width: 20ch; font-size: 42px; line-height: 1.14; font-weight: 800; color: #fff; }
.kvm-giris { margin: 0 auto 30px; max-width: 620px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .74); }

/* Rakam şeridi */
.kvm-rakamlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
	gap: 0;
	margin-top: 40px;
	border-top: 1px solid rgba(255, 255, 255, .16);
}
.kvm-rakam {
	padding: 24px 16px;
	border-right: 1px solid rgba(255, 255, 255, .16);
	text-align: center;
}
.kvm-rakam:last-child { border-right: 0; }
.kvm-rdeger { display: block; font-size: 26px; font-weight: 800; color: #fff; line-height: 1.15; }
.kvm-retiket { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

/* =====================================================================
 * 2) Sorumluluk yığını
 * ================================================================== */
.kvm-yigin { border: 1px solid var(--kvm-cizgi); border-radius: 12px; overflow: hidden; background: var(--kvm-yzy); }
.kvm-ybas {
	display: grid;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	padding: 14px 20px;
	background: #EDEFF2;
	border-bottom: 1px solid var(--kvm-cizgi);
	font-size: 11px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase;
}
.kvm-ybas span:nth-child(1) { color: var(--kvm-sus); }
.kvm-ybas span:nth-child(2) { color: var(--kvm-biz); }
.kvm-ybas span:nth-child(3) { color: var(--kvm-siz); }

.kvm-katman {
	display: grid;
	grid-template-columns: minmax(0, 180px) minmax(0, 1fr) minmax(0, 1fr);
	gap: 20px;
	padding: 20px;
	border-bottom: 1px solid var(--kvm-cizgi);
}
.kvm-katman:last-child { border-bottom: 0; }
.kvm-katman:nth-child(odd) { background: #FAFBFC; }
.kvm-kad { font-size: 15.5px; font-weight: 800; color: var(--kvm-ink); }
.kvm-kalt { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.5; color: var(--kvm-sus); }
.kvm-hucre {
	position: relative; padding-left: 18px;
	font-size: 13.5px; line-height: 1.65; color: var(--kvm-ink);
}
.kvm-hucre::before {
	content: '';
	position: absolute; left: 0; top: .55em;
	width: 9px; height: 3px; border-radius: 2px;
}
.kvm-hucre--biz::before { background: var(--kvm-biz); }
.kvm-hucre--siz::before { background: var(--kvm-siz); }
.kvm-hucre--yok { color: #9AA1AC; }
.kvm-hucre--yok::before { background: #C9CED6; }
.kvm-ynot { margin: 20px auto 0; max-width: 780px; font-size: 13px; line-height: 1.7; color: var(--kvm-sus); text-align: center; }

/* =====================================================================
 * 3) Hizmetler
 * ================================================================== */
.kvm-hizmetler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 0;
	border-top: 1px solid var(--kvm-cizgi);
	border-left: 1px solid var(--kvm-cizgi);
}
.kvm-hizmet {
	padding: 26px 24px;
	background: var(--kvm-yzy);
	border-right: 1px solid var(--kvm-cizgi);
	border-bottom: 1px solid var(--kvm-cizgi);
}
.kvm-hust {
	display: block; margin-bottom: 10px;
	font-size: 10.5px; font-weight: 800;
	letter-spacing: .14em; text-transform: uppercase; color: var(--kvm-biz);
}
.kvm-hbas { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.35; color: var(--kvm-ink); }
.kvm-hmetin { margin: 0; font-size: 13.5px; line-height: 1.68; color: var(--kvm-sus); }

/* =====================================================================
 * 4) Kapanış
 * ================================================================== */
.kvm-kapanis {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
	gap: 40px;
	align-items: center;
	padding: 34px;
	border-radius: 14px;
	background: var(--kvm-yzy);
	border: 1px solid var(--kvm-cizgi);
}
.kvm-kbaslik { margin: 0 0 12px; font-size: 26px; line-height: 1.26; font-weight: 800; color: var(--kvm-ink); }
.kvm-kack { margin: 0 0 22px; font-size: 15px; line-height: 1.7; color: var(--kvm-sus); }
.kvm-kliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 11px; }
.kvm-kmad {
	position: relative; padding-left: 22px;
	font-size: 14px; line-height: 1.6; color: var(--kvm-ink);
}
.kvm-kmad::before {
	content: '';
	position: absolute; left: 3px; top: .42em;
	width: 10px; height: 5px;
	border-left: 2px solid var(--kvm-biz);
	border-bottom: 2px solid var(--kvm-biz);
	transform: rotate(-45deg);
}
.kvm-klbas {
	margin: 0 0 12px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: var(--kvm-sus);
}

/* =====================================================================
 * Duyarlı
 * ================================================================== */
@media ( max-width: 1024px ) {
	.kvm-h1 { font-size: 33px; }
	.kvm-bas { font-size: 25px; }
	.kvm-kapanis { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 26px 22px; }
	/* Yığın üç sütuna sığmaz: katman adı üstte, iki taraf altında yan yana. */
	.kvm-ybas { display: none; }
	.kvm-katman {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
		row-gap: 12px;
	}
	.kvm-kad { grid-column: 1 / -1; }
}

@media ( max-width: 620px ) {
	.kvm-h1 { font-size: 27px; max-width: none; }
	.kvm-giris { font-size: 15px; }
	.kvm-bas { font-size: 22px; }
	.kvm-dugmeler .kvm-btn { flex: 1 1 100%; text-align: center; }
	.kvm-katman { grid-template-columns: minmax(0, 1fr); padding: 18px 16px; }
	.kvm-rakam { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); }
	.kvm-hizmet { padding: 22px 18px; }
	.kvm-kbaslik { font-size: 22px; }
}

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