/* Kalistack — Ücretsiz SSL Sertifikası sayfası (kds-)
 *
 * Sayfanın kendi dili: koyu deniz yeşili bir kütle ve içinde tek bir iri
 * rakam; altında nane yeşili işaretli kapsam listesi ve senaryo tablosu.
 * SSL Kurulumu (fildişi sertifika belgesi) ve SSL Nedir (serif başvuru
 * kitabı) sayfalarıyla kasıtlı olarak farklı; bu sayfa teknik değil ticari.
 */

.kds-kap { background: #F5F9F8; }

.kds {
	--kds-deniz: #0F3D3E;
	--kds-nane: #34D399;
	--kds-ink: #0B1B1B;
	--kds-sus: #566566;
	--kds-cizgi: #DCE7E5;
	--kds-yzy: #FFFFFF;
	max-width: 1060px;
	margin: 0 auto;
}

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

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

/* =====================================================================
 * 1) Sıfır kütlesi
 * ================================================================== */
.kds-kap--deniz { background: var(--kds-deniz); }
.kds-kutle { text-align: center; }
.kds-uetiket {
	display: inline-block; margin: 0 0 22px;
	padding: 6px 15px; border-radius: 999px;
	background: rgba(52, 211, 153, .16);
	border: 1px solid rgba(52, 211, 153, .38);
	color: var(--kds-nane);
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .16em; text-transform: uppercase;
}
.kds-sifir {
	display: block; margin: 0 0 6px;
	font-size: 108px; line-height: .9; font-weight: 800; color: var(--kds-nane);
	font-variant-numeric: tabular-nums;
	letter-spacing: -.03em;
}
.kds-salt {
	margin: 0 0 24px;
	font-size: 14px; font-weight: 700;
	letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .6);
}
.kds-h1 {
	margin: 0 auto 16px; max-width: 20ch;
	font-size: 38px; line-height: 1.16; font-weight: 800; color: #fff;
}
.kds-giris { margin: 0 auto 30px; max-width: 580px; font-size: 16px; line-height: 1.7; color: rgba(255, 255, 255, .78); }

/* =====================================================================
 * 2) Kapsam — nane işaretli liste
 * ================================================================== */
.kds-kapsam {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 14px 34px;
}
.kds-kmadde {
	display: grid; grid-template-columns: 24px minmax(0, 1fr);
	align-items: start; gap: 14px;
	padding: 15px 0;
	border-bottom: 1px solid var(--kds-cizgi);
}
/* Onay işareti — çizimle, ikon kütüphanesine bağımlı değil */
.kds-tik {
	position: relative;
	width: 22px; height: 22px; margin-top: 1px;
	border-radius: 50%;
	background: rgba(52, 211, 153, .2);
}
.kds-tik::after {
	content: '';
	position: absolute; left: 6px; top: 7px;
	width: 9px; height: 4px;
	border-left: 2px solid #0B7A56;
	border-bottom: 2px solid #0B7A56;
	transform: rotate(-45deg);
}
.kds-kad { display: block; font-size: 15.5px; font-weight: 700; color: var(--kds-ink); }
.kds-kack { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.6; color: var(--kds-sus); }
.kds-knot { margin: 22px auto 0; max-width: 760px; font-size: 13px; line-height: 1.65; color: var(--kds-sus); text-align: center; }

/* =====================================================================
 * 3) Senaryolar — ne zaman yetmez
 * ================================================================== */
.kds-senaryolar { border-top: 2px solid var(--kds-ink); }
.kds-senaryo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 168px;
	align-items: center; gap: 26px;
	padding: 20px 6px;
	border-bottom: 1px solid var(--kds-cizgi);
}
.kds-sad { font-size: 15.5px; font-weight: 700; color: var(--kds-ink); }
.kds-sack { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.6; color: var(--kds-sus); }
.kds-karar {
	justify-self: end;
	padding: 7px 14px; border-radius: 999px;
	font-size: 12.5px; font-weight: 800;
	text-align: center; white-space: nowrap;
}
.kds-karar--yeter { background: rgba(52, 211, 153, .18); color: #0B6B4C; }
.kds-karar--yetmez { background: #FBEAE7; color: #A03A24; }
.kds-snot { margin: 22px auto 0; max-width: 760px; font-size: 13px; line-height: 1.7; color: var(--kds-sus); text-align: center; }

/* =====================================================================
 * 4) Sorular + yönlendirme
 * ================================================================== */
.kds-sorular { max-width: 800px; margin: 0 auto; }
.kds-soru {
	padding: 22px 0;
	border-bottom: 1px solid var(--kds-cizgi);
}
.kds-sorubas { margin: 0 0 8px; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--kds-ink); }
.kds-cevap { margin: 0; font-size: 14.5px; line-height: 1.75; color: var(--kds-sus); }

.kds-yonlendirme {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 16px;
	margin-top: 34px;
}
.kds-kutu {
	display: block;
	padding: 24px 22px;
	border-radius: 14px;
	background: var(--kds-yzy);
	border: 1px solid var(--kds-cizgi);
	text-decoration: none;
	transition: border-color .18s ease, transform .18s ease;
}
a.kds-kutu:hover { border-color: var(--kds-deniz); transform: translateY(-2px); }
.kds-kutubas { display: block; margin-bottom: 7px; font-size: 16.5px; font-weight: 800; color: var(--kds-ink); }
.kds-kutumetin { display: block; font-size: 13.5px; line-height: 1.65; color: var(--kds-sus); }
.kds-kutuok { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 700; color: var(--kds-deniz); }

/* =====================================================================
 * Duyarlı
 * ================================================================== */
@media ( max-width: 1024px ) {
	.kds-sifir { font-size: 84px; }
	.kds-h1 { font-size: 31px; }
	.kds-bas { font-size: 25px; }
}

@media ( max-width: 620px ) {
	.kds-sifir { font-size: 66px; }
	.kds-h1 { font-size: 26px; max-width: none; }
	.kds-giris { font-size: 15px; }
	.kds-bas { font-size: 22px; }
	.kds-dugmeler .kds-btn { flex: 1 1 100%; text-align: center; }
	/* Karar rozeti kendi satırına iner, sola yaslanır. */
	.kds-senaryo { grid-template-columns: minmax(0, 1fr); row-gap: 12px; }
	.kds-karar { justify-self: start; }
	.kds-kutu:hover { transform: none; }
}

@media ( prefers-reduced-motion: reduce ) {
	.kds-btn, .kds-kutu { transition: none; }
	a.kds-kutu:hover { transform: none; }
}