/* Kalistack — yasal metin sayfaları (khu-)
 *
 * Bu ailenin işi süslemek değil, uzun bir metni okunur kılmak: ölçülü
 * satır uzunluğu, rahat satır aralığı, yanda içindekiler. Gizlilik, KVKK,
 * Çerez, İade ve Sözleşmeler sayfalarında ortak kullanılır.
 */

.khu-kap { background: #FFFFFF; }
.khu-kap--gece { background: #1F2430; }

.khu {
	--khu-vurgu: #334155;
	--khu-vurgu-acik: #EEF1F5;
	--khu-ink: #1B2029;
	--khu-sus: #5C6675;
	--khu-cizgi: #E4E7EC;
	--khu-yzy: #FFFFFF;
	--khu-gece: #1F2430;
	--khu-gece2: #2A3140;
	--khu-gececizgi: #3C4557;
	--khu-gecemetin: #C6CDD9;
	max-width: 1040px;
	margin: 0 auto;
}

/* Ortak tepe */
.khu-tepe { margin-bottom: 26px; }
.khu-etiket {
	display: inline-block; margin: 0 0 10px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase; color: var(--khu-sus);
}
.khu-bas { margin: 0 0 8px; font-size: 25px; line-height: 1.25; font-weight: 800; color: var(--khu-ink); }
.khu-ack { margin: 0; max-width: 680px; font-size: 15px; line-height: 1.7; color: var(--khu-sus); }
.khu--gece .khu-bas { color: #F3F5F9; }
.khu--gece .khu-ack { color: var(--khu-gecemetin); }
.khu--gece .khu-etiket { color: #9AA6B8; }

.khu-altnot { margin: 24px 0 0; max-width: 760px; font-size: 12.5px; line-height: 1.7; color: var(--khu-sus); }
.khu-altnot--gece { color: #8E99AB; }

.khu-btn {
	display: inline-block;
	padding: 12px 22px; border-radius: 8px;
	font-size: 14px; font-weight: 700; text-decoration: none;
	border: 1px solid var(--khu-vurgu);
	background: var(--khu-vurgu); color: #fff;
	transition: filter .18s ease;
	white-space: nowrap;
}
.khu-btn:hover { filter: brightness(1.15); color: #fff; }
.khu--gece .khu-btn { background: #F3F5F9; border-color: #F3F5F9; color: #1F2430; }
.khu--gece .khu-btn:hover { color: #1F2430; }

/* =====================================================================
 * 1) Belge başlığı
 * ================================================================== */
.khu-belgetepe { max-width: 760px; }
.khu-h1 { margin: 0 0 14px; font-size: 32px; line-height: 1.2; font-weight: 800; color: var(--khu-ink); }
.khu-kapsam { margin: 0 0 24px; font-size: 16px; line-height: 1.75; color: var(--khu-sus); }
.khu-kunye {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
	gap: 1px;
	margin: 0;
	background: var(--khu-cizgi);
	border: 1px solid var(--khu-cizgi);
	border-radius: 10px;
	overflow: hidden;
}
.khu-ksatir { padding: 16px 18px; background: var(--khu-yzy); }
.khu-ksatir dt {
	margin: 0 0 4px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .1em; text-transform: uppercase; color: var(--khu-sus);
}
.khu-ksatir dd { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--khu-ink); }

/* =====================================================================
 * 2) Sade özet
 * ================================================================== */
.khu-ozet {
	padding: 28px 26px;
	border-radius: 12px;
	background: var(--khu-vurgu-acik);
	border: 1px solid #DDE3EA;
	max-width: 820px;
}
.khu-ozetliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.khu-ozetliste li {
	position: relative; padding-left: 24px;
	font-size: 15px; line-height: 1.7; color: var(--khu-ink);
}
.khu-ozetliste li::before {
	content: '';
	position: absolute; left: 0; top: .6em;
	width: 10px; height: 10px; border-radius: 2px;
	background: var(--khu-vurgu);
}
.khu-uyari {
	margin: 20px 0 0; padding-top: 16px;
	border-top: 1px solid #DDE3EA;
	font-size: 12.5px; line-height: 1.65; color: var(--khu-sus);
}

/* =====================================================================
 * 3) Belgenin kendisi
 * ================================================================== */
.khu-duzen {
	display: grid;
	grid-template-columns: 240px minmax(0, 1fr);
	gap: 44px;
	align-items: start;
}
.khu-dizin { position: sticky; top: 24px; max-height: calc(100vh - 60px); overflow-y: auto; }
.khu-dizin[hidden] { display: none; }
.khu-dizinbas {
	margin: 0 0 12px;
	font-size: 11px; font-weight: 800;
	letter-spacing: .12em; text-transform: uppercase; color: var(--khu-sus);
}
.khu-dizinliste { list-style: none; margin: 0; padding: 0; counter-reset: khu; }
.khu-dizinliste li { margin-bottom: 2px; }
.khu-dizinliste a {
	display: block;
	padding: 7px 10px 7px 12px;
	border-left: 2px solid var(--khu-cizgi);
	font-size: 13px; line-height: 1.45; color: var(--khu-sus);
	text-decoration: none;
	transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.khu-dizinliste a:hover { color: var(--khu-ink); border-left-color: var(--khu-vurgu); background: var(--khu-vurgu-acik); }
.khu-dizinliste a.is-etkin {
	color: var(--khu-ink); font-weight: 700;
	border-left-color: var(--khu-vurgu);
	background: var(--khu-vurgu-acik);
}

/* Belge gövdesi: uzun metin için okunabilirlik önce gelir. */
.khu-metin { max-width: 68ch; font-size: 15.5px; line-height: 1.8; color: #2B3340; }
.khu-metin > *:first-child { margin-top: 0; }
.khu-metin h1 {
	margin: 0 0 20px;
	font-size: 26px; line-height: 1.3; font-weight: 800; color: var(--khu-ink);
}
.khu-metin h2 {
	margin: 40px 0 14px;
	padding-top: 22px;
	border-top: 1px solid var(--khu-cizgi);
	font-size: 19px; line-height: 1.35; font-weight: 800; color: var(--khu-ink);
	scroll-margin-top: 90px;
}
.khu-metin h3 { margin: 28px 0 10px; font-size: 16.5px; font-weight: 800; color: var(--khu-ink); }
.khu-metin p { margin: 0 0 16px; }
.khu-metin strong { color: var(--khu-ink); font-weight: 700; }
.khu-metin ul, .khu-metin ol { margin: 0 0 18px; padding-left: 22px; }
.khu-metin li { margin-bottom: 8px; }
.khu-metin a { color: var(--khu-vurgu); text-decoration: underline; }
.khu-metin table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 14px; }
.khu-metin th, .khu-metin td { padding: 10px 12px; border: 1px solid var(--khu-cizgi); text-align: left; vertical-align: top; }
.khu-metin th { background: var(--khu-vurgu-acik); font-weight: 700; }

/* =====================================================================
 * 4) Haklarınız
 * ================================================================== */
.khu-haklar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 16px;
}
.khu-hak {
	padding: 22px 20px;
	border-radius: 12px;
	background: var(--khu-yzy);
	border: 1px solid var(--khu-cizgi);
}
.khu-hbas { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--khu-ink); }
.khu-hnasil { margin: 0; font-size: 14px; line-height: 1.7; color: var(--khu-sus); }

/* =====================================================================
 * 5) İlgili belgeler
 * ================================================================== */
.khu-belgeler {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 12px;
}
.khu-belge {
	display: flex; flex-direction: column; gap: 5px;
	padding: 20px 22px;
	border-radius: 12px;
	background: var(--khu-yzy);
	border: 1px solid var(--khu-cizgi);
	text-decoration: none;
	transition: border-color .16s ease;
}
.khu-belge:hover { border-color: var(--khu-vurgu); }
.khu-bad { font-size: 15.5px; font-weight: 700; color: var(--khu-ink); }
.khu-back { font-size: 13px; line-height: 1.55; color: var(--khu-sus); }

/* =====================================================================
 * 6) Soru
 * ================================================================== */
.khu-soru {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
	gap: 26px;
}
.khu-soru .khu-tepe { margin-bottom: 12px; }
.khu-smetin { margin: 0 0 10px; max-width: 620px; font-size: 14.5px; line-height: 1.75; color: var(--khu-gecemetin); }

/* =====================================================================
 * Duyarlı
 * ================================================================== */
@media ( max-width: 1024px ) {
	.khu-duzen { grid-template-columns: minmax(0, 1fr); gap: 26px; }
	.khu-dizin { position: static; max-height: none; }
	.khu-dizinliste {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
		gap: 2px;
	}
	.khu-metin { max-width: none; }
	.khu-h1 { font-size: 27px; }
}

@media ( max-width: 760px ) {
	.khu-h1 { font-size: 24px; }
	.khu-bas { font-size: 21px; }
	.khu-metin { font-size: 15px; }
	.khu-metin h2 { font-size: 17.5px; margin-top: 32px; }
	.khu-ozet { padding: 22px 18px; }
	/* Uzun tablolar dar ekranda kendi içinde kaydırılır. */
	.khu-metin table { display: block; overflow-x: auto; }
}

@media ( prefers-reduced-motion: reduce ) {
	.khu-btn, .khu-belge, .khu-dizinliste a { transition: none; }
}