/* Kalistack — "Neler yapıyoruz?" sayfası (kny-)
 *
 * Sayfanın kendi dili: soluk çam yeşili kâğıt, numaralı dosya sırtları ve
 * koyu yeşil bir "yapmadıklarımız" bölümü. Görsel dosya yok.
 */

.kny-kap { background: #FFFFFF; }
.kny-kap--gece { background: #0C2B27; }

.kny {
	--kny-vurgu: #0F766E;
	--kny-vurgu-acik: #E6F4F1;
	--kny-ink: #1C2B29;
	--kny-sus: #5F7370;
	--kny-cizgi: #DEE9E7;
	--kny-yzy: #FFFFFF;
	--kny-gece: #0C2B27;
	--kny-gece2: #123A34;
	--kny-gececizgi: #1F5349;
	--kny-gecemetin: #BDD8D2;
	max-width: 1100px;
	margin: 0 auto;
}

/* Ortak tepe */
.kny-tepe { margin-bottom: 32px; }
.kny-etiket {
	display: inline-block; margin: 0 0 12px;
	font-size: 11.5px; font-weight: 800;
	letter-spacing: .18em; text-transform: uppercase; color: var(--kny-vurgu);
}
.kny-bas { margin: 0 0 10px; font-size: 30px; line-height: 1.22; font-weight: 800; color: var(--kny-ink); }
.kny-ack { margin: 0; max-width: 700px; font-size: 15px; line-height: 1.7; color: var(--kny-sus); }
.kny--gece .kny-bas { color: #ECFDF5; }
.kny--gece .kny-ack { color: var(--kny-gecemetin); }
.kny--gece .kny-etiket { color: #6EE7B7; }

.kny-altnot { margin: 26px 0 0; max-width: 800px; font-size: 13px; line-height: 1.7; color: var(--kny-sus); }
.kny-altnot--gece { color: #8FB3AC; }

.kny-btn {
	display: inline-block;
	padding: 13px 24px; border-radius: 9px;
	font-size: 14.5px; font-weight: 700; text-decoration: none;
	border: 1px solid var(--kny-vurgu);
	background: var(--kny-vurgu); color: #fff;
	transition: filter .18s ease, background-color .18s ease, color .18s ease;
}
.kny-btn:hover { filter: brightness(1.1); color: #fff; }
.kny-btn--ikinci { background: transparent; color: var(--kny-vurgu); }
.kny-btn--ikinci:hover { background: var(--kny-vurgu-acik); filter: none; color: var(--kny-vurgu); }
.kny-dugmeler { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* =====================================================================
 * 1) İşimiz
 * ================================================================== */
.kny-giris { max-width: 760px; margin-bottom: 40px; }
.kny-h1 { margin: 0 0 16px; font-size: 40px; line-height: 1.14; font-weight: 800; color: var(--kny-ink); }
.kny-girisack { margin: 0; font-size: 16.5px; line-height: 1.72; color: var(--kny-sus); }

.kny-alanlar {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
	gap: 1px;
	background: var(--kny-cizgi);
	border: 1px solid var(--kny-cizgi);
	border-radius: 14px;
	overflow: hidden;
}
.kny-alan { padding: 26px 22px; background: var(--kny-yzy); }
.kny-anum {
	display: block; margin-bottom: 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 12px; font-weight: 700; color: var(--kny-vurgu);
}
.kny-aad { margin: 0 0 6px; font-size: 17px; font-weight: 800; color: var(--kny-ink); }
.kny-anot { margin: 0; font-size: 13.5px; line-height: 1.6; color: var(--kny-sus); }

/* =====================================================================
 * 2) Hizmet dosyaları
 * ================================================================== */
.kny-dosyalar { border-top: 1px solid var(--kny-cizgi); }
.kny-dosya { border-bottom: 1px solid var(--kny-cizgi); }
.kny-dbas { margin: 0; }
.kny-dac {
	display: flex; align-items: center; gap: 18px;
	width: 100%; padding: 22px 4px;
	background: none; border: 0;
	font-family: inherit; text-align: left; cursor: pointer;
}
.kny-dac:focus-visible { outline: 2px solid var(--kny-vurgu); outline-offset: -2px; }
.kny-dsira {
	flex: 0 0 auto;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 13px; font-weight: 700; color: #9CB3AF;
}
.kny-dmetin { flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.kny-dad { font-size: 18px; font-weight: 700; color: var(--kny-ink); }
.kny-dozet { font-size: 13.5px; line-height: 1.55; color: var(--kny-sus); }
.kny-drozet {
	flex: 0 0 auto;
	padding: 4px 12px; border-radius: 999px;
	background: var(--kny-vurgu-acik);
	font-size: 11.5px; font-weight: 700; color: var(--kny-vurgu);
	white-space: nowrap;
}
.kny-dok { position: relative; flex: 0 0 auto; width: 13px; height: 13px; }
.kny-dok::before, .kny-dok::after {
	content: '';
	position: absolute; left: 50%; top: 50%;
	background: var(--kny-sus);
	transform: translate(-50%, -50%);
	transition: opacity .16s ease;
}
.kny-dok::before { width: 13px; height: 2px; }
.kny-dok::after { width: 2px; height: 13px; }
.kny-dac[aria-expanded="true"] .kny-dok::after { opacity: 0; }
.kny-dac[aria-expanded="true"] .kny-dad { color: var(--kny-vurgu); }
.kny-dicerik { padding: 0 4px 26px 55px; }
.kny-dliste {
	list-style: none; margin: 0 0 16px; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 10px 24px;
}
.kny-dliste li {
	position: relative; padding-left: 20px;
	font-size: 14px; line-height: 1.6; color: var(--kny-ink);
}
.kny-dliste li::before {
	content: '';
	position: absolute; left: 0; top: .55em;
	width: 8px; height: 8px; border-radius: 2px;
	background: var(--kny-vurgu);
}
.kny-dnot { margin: 0 0 16px; font-size: 13px; line-height: 1.65; color: var(--kny-sus); }
.kny-dbag {
	font-size: 14px; font-weight: 700; color: var(--kny-vurgu);
	text-decoration: none; border-bottom: 2px solid var(--kny-vurgu); padding-bottom: 2px;
}

/* =====================================================================
 * 3) Yapmadıklarımız
 * ================================================================== */
.kny-yapmaz {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 20px;
}
.kny-ykalem {
	padding: 24px 22px;
	border-radius: 14px;
	background: var(--kny-gece2);
	border: 1px solid var(--kny-gececizgi);
}
.kny-ycizgi {
	display: block; width: 34px; height: 3px; margin-bottom: 16px;
	border-radius: 2px; background: #6EE7B7; opacity: .5;
}
.kny-yis { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: #ECFDF5; }
.kny-yneden { margin: 0; font-size: 13.5px; line-height: 1.7; color: var(--kny-gecemetin); }

/* =====================================================================
 * 4) Kime uygunuz
 * ================================================================== */
.kny-kime {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
	gap: 18px;
}
.kny-kutu {
	padding: 28px 26px;
	border-radius: 14px;
	background: var(--kny-yzy);
	border: 1px solid var(--kny-cizgi);
}
.kny-kutu--evet { border-top: 3px solid var(--kny-vurgu); }
.kny-kutu--hayir { border-top: 3px solid #B0BFBC; }
.kny-kbas { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: var(--kny-ink); }
.kny-kliste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.kny-kliste li {
	position: relative; padding-left: 22px;
	font-size: 14.5px; line-height: 1.65; color: var(--kny-ink);
}
.kny-kliste li::before {
	content: '';
	position: absolute; left: 0; top: .55em;
	width: 9px; height: 9px; border-radius: 50%;
	background: var(--kny-vurgu);
}
.kny-kutu--hayir .kny-kliste li { color: var(--kny-sus); }
.kny-kutu--hayir .kny-kliste li::before { background: #B0BFBC; }

/* =====================================================================
 * 5) Nasıl çalışıyoruz
 * ================================================================== */
.kny-akis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
	gap: 0;
}
.kny-adim {
	position: relative;
	padding: 26px 22px 26px 0;
}
.kny-adim::after {
	/* Adımları birleştiren yatay çizgi */
	content: '';
	position: absolute; left: 6px; right: 0; top: 32px;
	height: 2px; background: var(--kny-cizgi);
	z-index: 0;
}
.kny-adim:last-child::after { display: none; }
.kny-nokta {
	position: relative; z-index: 1;
	display: block; width: 14px; height: 14px; margin-bottom: 22px;
	border-radius: 50%;
	background: var(--kny-vurgu);
	box-shadow: 0 0 0 5px var(--kny-vurgu-acik);
}
.kny-nbas { margin: 0 0 8px; font-size: 16.5px; font-weight: 800; color: var(--kny-ink); }
.kny-nmetin { margin: 0; padding-right: 16px; font-size: 13.5px; line-height: 1.65; color: var(--kny-sus); }

/* =====================================================================
 * 6) Başlangıç
 * ================================================================== */
.kny-baslangic {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: 40px;
	align-items: center;
}
.kny-baslangic .kny-tepe { margin-bottom: 0; }
.kny-bliste {
	list-style: none; margin: 0; padding: 26px 24px;
	border-radius: 14px;
	background: var(--kny-yzy);
	border: 1px solid var(--kny-cizgi);
	display: flex; flex-direction: column; gap: 12px;
}
.kny-bliste li {
	position: relative; padding-left: 24px;
	font-size: 14.5px; line-height: 1.6; color: var(--kny-ink);
}
.kny-bliste li::before {
	content: '';
	position: absolute; left: 0; top: .45em;
	width: 14px; height: 14px; border-radius: 50%;
	border: 2px solid var(--kny-vurgu);
}

/* =====================================================================
 * Duyarlı
 * ================================================================== */
@media ( max-width: 1024px ) {
	.kny-h1 { font-size: 33px; }
	.kny-bas { font-size: 25px; }
	.kny-baslangic { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}

@media ( max-width: 760px ) {
	.kny-h1 { font-size: 27px; }
	.kny-bas { font-size: 22px; }
	.kny-girisack { font-size: 15px; }
	.kny-dac { flex-wrap: wrap; gap: 10px 14px; padding: 18px 2px; }
	.kny-dmetin { flex: 1 1 100%; order: 2; }
	.kny-dsira { order: 1; }
	.kny-drozet { order: 1; }
	.kny-dok { order: 1; margin-left: auto; }
	.kny-dicerik { padding: 0 2px 22px; }
	/* Yatay akış çizgisi dikeye döner. */
	.kny-adim { padding: 0 0 26px 30px; }
	.kny-adim::after { left: 6px; right: auto; top: 20px; bottom: -6px; width: 2px; height: auto; }
	.kny-nokta { position: absolute; left: 0; top: 4px; margin-bottom: 0; }
	.kny-nmetin { padding-right: 0; }
}

@media ( prefers-reduced-motion: reduce ) {
	.kny-btn, .kny-dok::before, .kny-dok::after { transition: none; }
}