/*
 * Ana CSS — ilk ekranın altındaki her şey.
 *
 * Engellemeden yükleniyor (inc/assets.php). Token'lar ve ilk ekran stilleri
 * satır içi basıldığı için burada tekrarlanmıyor.
 *
 * Düzen kuralı: kardeş grupları flex/grid + `gap` ile yerleşiyor, tek tek
 * `margin` ile değil — böylece boşluklar sessizce birleşmiyor ya da
 * ikiye katlanmıyor.
 */

/* ---------- Düzen: içerik + sidebar ---------- */

.kmi-govde { min-height: 60vh; }

.kmi-duzen {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kmi-s6);
	padding-block: var(--kmi-s5) var(--kmi-s7);
}

/* Sidebar yalnızca ≥1100 px (PROJE.md 6.1): içerik 780 + sidebar 300. */
@media (min-width: 1100px) {
	.kmi-duzen--sidebar {
		grid-template-columns: minmax(0, 1fr) var(--kmi-sidebar);
	}
}

.kmi-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--kmi-s4);
}

@media (max-width: 1099px) {
	.kmi-sidebar { display: none; }
}

.kmi-sidebar__yapiskan {
	position: sticky;
	top: 88px;
}

/* ---------- Breadcrumb ---------- */

.kmi-iz {
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	padding-block: var(--kmi-s3);
	border-bottom: 1px solid var(--kmi-line);
}
.kmi-iz ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kmi-s2);
	list-style: none;
	margin: 0;
	padding: 0;
}
.kmi-iz li { display: flex; align-items: center; gap: var(--kmi-s2); }
.kmi-iz li::after { content: "›"; color: var(--kmi-line); }
.kmi-iz li:last-child::after { content: none; }
.kmi-iz a { color: var(--kmi-muted); }
.kmi-iz a:hover { color: var(--kmi-blue); }
.kmi-iz [aria-current] { color: var(--kmi-ink); font-weight: 600; }

/* ---------- İlan satırı ---------- */

.kmi-liste {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	overflow: hidden;
	background: var(--kmi-ground);
}

.kmi-satir {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 150px 132px;
	align-items: center;
	gap: var(--kmi-s4);
	padding: var(--kmi-s4);
	border-bottom: 1px solid var(--kmi-line);
	background: var(--kmi-ground);
	transition: background .12s;
}
.kmi-satir:last-child { border-bottom: 0; }
.kmi-satir:hover { background: var(--kmi-panel); }

/*
 * Tekil ilan sayfasindaki kurum satiri: logo + kurum adi, basligin
 * ustunde. Kutu olculeri sabit, gorsel gec gelse de baslik kaymiyor.
 */
.kmi-ilan__kurum {
	display: flex;
	align-items: center;
	gap: var(--kmi-s3);
	margin-bottom: var(--kmi-s3);
}

.kmi-ilan__logo {
	flex: 0 0 auto;
	width: 52px;
	height: 52px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kmi-ilan__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kmi-ilan__kurum-ad {
	font-family: var(--kmi-font-baslik);
	font-weight: 600;
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	line-height: 1.35;
}

/*
 * Kurum logosu (yalniz tur arsivi ve tur sekmesi).
 *
 * Gelen logolar cok degisken: 0,55-2,00 en/boy, 109-2560 px. Sabit
 * kutuya `contain` ile sigdiriliyor — kirpma yok, hicbir logo bozulmuyor
 * ve butun satirlar ayni yukseklikte kaliyor. Kutu olculeri sabit
 * oldugu icin gorsel gec yuklense de satir kaymiyor.
 */
.kmi-satir--logolu { grid-template-columns: 44px minmax(0, 1fr) 150px 132px; }

.kmi-satir__logo {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.kmi-satir__logo img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}

.kmi-satir__ana { min-width: 0; }

.kmi-satir__kurum {
	font-size: var(--kmi-fs-xs);
	color: var(--kmi-muted);
	text-transform: none;
	margin-bottom: 2px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kmi-satir__baslik {
	font-family: var(--kmi-font-baslik);
	font-weight: 700;
	font-size: var(--kmi-fs-base);
	line-height: 1.35;
	color: var(--kmi-navy);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.kmi-satir__baslik:hover { color: var(--kmi-blue); text-decoration: none; }

.kmi-satir__il {
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}
.kmi-satir__il span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kmi-satir__son {
	text-align: right;
	font-size: var(--kmi-fs-sm);
	font-variant-numeric: tabular-nums;
}
.kmi-satir__tarih { color: var(--kmi-ink); }

.kmi-kalan {
	display: inline-flex;
	align-items: center;
	height: 22px;
	padding-inline: 8px;
	border-radius: 999px;
	font-size: var(--kmi-fs-xs);
	font-weight: 600;
	margin-top: 3px;
}
.kmi-kalan--bol { background: var(--kmi-ok-soft); color: var(--kmi-ok); }
.kmi-kalan--az { background: var(--kmi-warn-soft); color: var(--kmi-warn); }
.kmi-kalan--bitti { background: var(--kmi-danger-soft); color: var(--kmi-danger); }

@media (max-width: 860px) {
	.kmi-satir {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--kmi-s2);
	}
	.kmi-satir__son { text-align: left; }
	.kmi-satir__il { order: 2; }

	/*
	 * Logolu satirda logo yiginin ustune atlamasin: dar ekranda da solda
	 * kalip metnin yaninda duruyor. Yerlesim `grid-area` ile acik
	 * yazildi — ustteki `order` kurali otomatik yerlesimi kaydiriyor,
	 * acik alan tanimi ondan etkilenmiyor.
	 */
	.kmi-satir--logolu {
		grid-template-columns: 40px minmax(0, 1fr);
		column-gap: var(--kmi-s3);
	}
	.kmi-satir--logolu .kmi-satir__logo { grid-area: 1 / 1 / 4 / 2; align-self: start; }
	.kmi-satir--logolu .kmi-satir__ana { grid-area: 1 / 2 / 2 / 3; }
	.kmi-satir--logolu .kmi-satir__il { grid-area: 2 / 2 / 3 / 3; }
	.kmi-satir--logolu .kmi-satir__son { grid-area: 3 / 2 / 4 / 3; }
	.kmi-satir--logolu .kmi-satir__logo { width: 40px; height: 40px; }
}

/* ---------- Sekmeler ---------- */

.kmi-sekmeler {
	display: flex;
	gap: var(--kmi-s1);
	overflow-x: auto;
	scrollbar-width: none;
	border-bottom: 1px solid var(--kmi-line);
	margin-bottom: var(--kmi-s4);

	/*
	 * Kaydirilabilir oldugunu gosteren kalici ipucu.
	 *
	 * Serit mobilde 3-4 sekmeden sonrasini gizliyor ve hicbir gorsel
	 * isaret vermiyordu. Sag kenardaki yumusak solma "devami var" diyor.
	 * Tek seferlik animasyondan farki: her ziyarette, her kullanicida ve
	 * JavaScript olmadan calisiyor.
	 *
	 * `mask-image` kullaniliyor — ustune gradyan bir katman koymak
	 * yerine seridin kendisini soluyor, bu yuzden arka plan rengi ne
	 * olursa olsun dogru gorunuyor. Kaydirma bitince maske
	 * `data-son="1"` ile kalkiyor.
	 */
	-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
	mask-image: linear-gradient(to right, #000 calc(100% - 36px), transparent);
}
.kmi-sekmeler[data-son="1"] {
	-webkit-mask-image: none;
	mask-image: none;
}
.kmi-sekmeler::-webkit-scrollbar { display: none; }

/* Serit tasmiyorsa maskeye gerek yok (masaustu). */
@media (min-width: 700px) {
	.kmi-sekmeler:not([data-tasiyor="1"]) {
		-webkit-mask-image: none;
		mask-image: none;
	}
}

.kmi-sekme {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 42px;
	padding-inline: var(--kmi-s4);
	background: none;
	border: 0;
	border-bottom: 2px solid transparent;
	font-family: var(--kmi-font-baslik);
	font-weight: 700;
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	cursor: pointer;
	white-space: nowrap;
}
.kmi-sekme:hover { color: var(--kmi-navy); }
.kmi-sekme[aria-selected="true"] {
	color: var(--kmi-navy);
	border-bottom-color: var(--kmi-blue);
}
.kmi-sekme__sayi {
	font-size: var(--kmi-fs-xs);
	color: var(--kmi-muted);
	font-variant-numeric: tabular-nums;
	font-weight: 400;
}

/* ---------- Tür kartları ---------- */

.kmi-kartlar {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--kmi-s3);
}
@media (max-width: 900px) { .kmi-kartlar { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kmi-kartlar { grid-template-columns: 1fr; } }

.kmi-kart {
	display: flex;
	flex-direction: column;
	gap: var(--kmi-s1);
	min-height: 108px;
	padding: var(--kmi-s4);
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	transition: border-color .12s, box-shadow .12s, transform .12s;
}
.kmi-kart:hover {
	border-color: var(--kmi-blue);
	box-shadow: var(--kmi-shadow);
	text-decoration: none;
	transform: translateY(-1px);
}
.kmi-kart__ad {
	font-family: var(--kmi-font-baslik);
	font-weight: 700;
	font-size: var(--kmi-fs-base);
	color: var(--kmi-navy);
	line-height: 1.3;
}
.kmi-kart__sayi {
	font-family: var(--kmi-font-baslik);
	font-weight: 800;
	font-size: var(--kmi-fs-xl);
	color: var(--kmi-navy);
	font-variant-numeric: tabular-nums;
	line-height: 1.1;
	margin-top: auto;
}
.kmi-kart__ek { font-size: var(--kmi-fs-xs); color: var(--kmi-ok); font-weight: 600; }
.kmi-kart--vurgu { background: var(--kmi-blue-soft); border-color: #C3D2FF; }

/* ---------- İki sütunlu bölüm ---------- */

.kmi-ikili {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--kmi-s5);
}
@media (max-width: 880px) { .kmi-ikili { grid-template-columns: 1fr; } }

/* ---------- İl ızgarası ---------- */

.kmi-iller {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: var(--kmi-s2);
}
.kmi-il {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--kmi-s2);
	min-height: 42px;
	padding-inline: var(--kmi-s3);
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-ink);
}
.kmi-il:hover {
	background: var(--kmi-blue-soft);
	border-color: var(--kmi-blue);
	text-decoration: none;
}
.kmi-il__sayi {
	font-size: var(--kmi-fs-xs);
	color: var(--kmi-muted);
	font-variant-numeric: tabular-nums;
}

/* ---------- SEO metni ---------- */

.kmi-seo {
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s5);
}
.kmi-seo h2 { font-size: var(--kmi-fs-xl); margin-bottom: var(--kmi-s3); }
.kmi-seo p { margin-bottom: var(--kmi-s3); max-width: 68ch; }
.kmi-seo p:last-child { margin-bottom: 0; }

.kmi-uyari-kutu {
	margin-top: var(--kmi-s4);
	padding: var(--kmi-s3) var(--kmi-s4);
	background: var(--kmi-warn-soft);
	border-left: 3px solid var(--kmi-warn);
	border-radius: var(--kmi-radius-sm);
	font-size: var(--kmi-fs-sm);
	color: #7A4B06;
}

/* ---------- Tekil ilan ---------- */

.kmi-ilan__baslik { margin-bottom: var(--kmi-s4); }

.kmi-bilgi {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: var(--kmi-s1) var(--kmi-s5);
	padding: var(--kmi-s5);
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	margin-bottom: var(--kmi-s5);
}
.kmi-bilgi__satir { display: flex; flex-direction: column; padding-block: var(--kmi-s2); }
.kmi-bilgi__ad { font-size: var(--kmi-fs-xs); color: var(--kmi-muted); }
.kmi-bilgi__deger { font-weight: 600; color: var(--kmi-ink); }

.kmi-basvur {
	display: inline-flex;
	align-items: center;
	gap: var(--kmi-s2);
	height: 52px;
	padding-inline: var(--kmi-s6);
	background: var(--kmi-blue);
	color: #fff;
	border-radius: var(--kmi-radius);
	font-family: var(--kmi-font-baslik);
	font-weight: 700;
	transition: background .15s;
}
.kmi-basvur:hover { background: #1E48DE; color: #fff; text-decoration: none; }

/*
 * Dugmenin kutusu icerik ile "Benzer Ilanlar" arasinda nefes birakiyor.
 *
 * Dugme icerigin altina tasinunca dogrudan bir sonraki basliga yapisiyordu
 * ve ikisi tek blok gibi gorunuyordu (Eda'nin tespiti). Ust bosluk
 * icerikten, alt bosluk sonraki bolumden ayiriyor.
 */
.kmi-basvur-kutu {
	margin: var(--kmi-s5) 0 var(--kmi-s6);
	padding-top: var(--kmi-s4);
	border-top: 1px solid var(--kmi-line);
}

.kmi-icerik { max-width: 68ch; }
.kmi-icerik h2 { font-size: var(--kmi-fs-xl); margin-block: var(--kmi-s5) var(--kmi-s3); }
.kmi-icerik h3 { margin-block: var(--kmi-s4) var(--kmi-s2); }
.kmi-icerik p { margin-bottom: var(--kmi-s3); }
.kmi-icerik ul, .kmi-icerik ol { margin-bottom: var(--kmi-s4); padding-left: var(--kmi-s5); }
.kmi-icerik li { margin-bottom: var(--kmi-s1); }
.kmi-icerik table {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--kmi-fs-sm);
	margin-bottom: var(--kmi-s4);
}
.kmi-icerik th, .kmi-icerik td {
	border: 1px solid var(--kmi-line);
	padding: var(--kmi-s2) var(--kmi-s3);
	text-align: left;
}
.kmi-icerik th { background: var(--kmi-panel); font-weight: 600; }

/* Geniş içerik yatayda kendi kabında kaysın; sayfa gövdesi asla kaymaz. */
.kmi-kaydir { overflow-x: auto; }

/* ---------- Sayfalama ---------- */

.kmi-sayfalama {
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmi-s2);
	justify-content: center;
	margin-top: var(--kmi-s6);
}
.kmi-sayfalama a,
.kmi-sayfalama span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding-inline: var(--kmi-s3);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
	font-size: var(--kmi-fs-sm);
	font-variant-numeric: tabular-nums;
	color: var(--kmi-ink);
}
.kmi-sayfalama a:hover { border-color: var(--kmi-blue); color: var(--kmi-blue); text-decoration: none; }
.kmi-sayfalama .current {
	background: var(--kmi-navy);
	border-color: var(--kmi-navy);
	color: #fff;
	font-weight: 700;
}

/* ---------- Öneri kutusu (arama) ---------- */

.kmi-oneri {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	box-shadow: var(--kmi-shadow-lift);
	z-index: 50;
	max-height: 340px;
	overflow-y: auto;
}
.kmi-oneri:empty { display: none; }
.kmi-oneri__satir {
	display: block;
	padding: var(--kmi-s3) var(--kmi-s4);
	border-bottom: 1px solid var(--kmi-line);
	color: var(--kmi-ink);
	font-size: var(--kmi-fs-sm);
}
.kmi-oneri__satir:last-child { border-bottom: 0; }
.kmi-oneri__satir:hover,
.kmi-oneri__satir[aria-selected="true"] {
	background: var(--kmi-blue-soft);
	text-decoration: none;
}
.kmi-oneri__ad { font-weight: 600; color: var(--kmi-navy); display: block; }
.kmi-oneri__ek { font-size: var(--kmi-fs-xs); color: var(--kmi-muted); }
.kmi-oneri__bos { padding: var(--kmi-s4); color: var(--kmi-muted); font-size: var(--kmi-fs-sm); }

/* ---------- Mobil menü ---------- */

.kmi-mobil-menu {
	display: none;
	border-top: 1px solid var(--kmi-line);
	padding-block: var(--kmi-s3);
}
.kmi-mobil-menu[data-acik="1"] { display: block; }
.kmi-mobil-menu a {
	display: block;
	padding: var(--kmi-s3) 0;
	font-family: var(--kmi-font-baslik);
	font-weight: 700;
	color: var(--kmi-navy);
	border-bottom: 1px solid var(--kmi-line);
}
.kmi-mobil-menu a:last-child { border-bottom: 0; }

/* ---------- Footer ---------- */

.kmi-footer {
	background: var(--kmi-navy);
	color: rgba(255,255,255,.78);
	padding-block: var(--kmi-s7) var(--kmi-s5);
	margin-top: var(--kmi-s8);
	font-size: var(--kmi-fs-sm);
}
/* Sutun sayisi sabit degil: "Hizli Listeler" eklenince 5 sutun oldu ve
   sabit 4'luk izgarada besinci sutun tek basina alta dusuyordu. */
.kmi-footer__ic {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
	gap: var(--kmi-s6);
}
@media (max-width: 880px) { .kmi-footer__ic { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kmi-footer__ic { grid-template-columns: 1fr; } }

.kmi-footer h3 {
	color: #fff;
	font-size: var(--kmi-fs-sm);
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: var(--kmi-s3);
}
.kmi-footer ul { display: flex; flex-direction: column; gap: var(--kmi-s2); }
.kmi-footer a { color: rgba(255,255,255,.78); }
.kmi-footer a:hover { color: #fff; }

.kmi-footer__alt {
	margin-top: var(--kmi-s6);
	padding-top: var(--kmi-s4);
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex;
	flex-wrap: wrap;
	gap: var(--kmi-s4);
	justify-content: space-between;
	font-size: var(--kmi-fs-xs);
	color: rgba(255,255,255,.6);
}

/* ---------- Sidebar kutuları ---------- */

.kmi-kutu {
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	padding: var(--kmi-s4);
}
.kmi-kutu h3 { font-size: var(--kmi-fs-base); margin-bottom: var(--kmi-s3); }
.kmi-kutu ul { display: flex; flex-direction: column; gap: var(--kmi-s2); font-size: var(--kmi-fs-sm); }


/* ---------- Boş durum ---------- */

.kmi-bos {
	padding: var(--kmi-s7) var(--kmi-s5);
	text-align: center;
	color: var(--kmi-muted);
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
}

/* Bölüm içi ikincil başlık */
.kmi-alt-baslik { font-size: var(--kmi-fs-xl); }


/* ---------- Footer: sosyal ---------- */

.kmi-footer__aciklama { margin-bottom: var(--kmi-s3); }

.kmi-sosyal { display: flex; flex-direction: column; gap: var(--kmi-s2); }
.kmi-sosyal a {
	display: inline-flex;
	align-items: center;
	gap: var(--kmi-s2);
	min-height: 32px;
}
.kmi-sosyal svg { flex: 0 0 auto; }

/* Bölüm içi gezinme (engelli hub ↔ alt sayfalar) */
.kmi-bolum-gezinme { margin-bottom: var(--kmi-s5); }

/* Süresi dolan ilanda güncel listeye çıkış */
.kmi-guncel-cikis { margin-top: var(--kmi-s5); }

/* ---- Filtre şeridi (eski temadaki arşiv filtresinin karşılığı) ---- */
.kmi-filtre {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kmi-s2);
	margin-bottom: var(--kmi-s4);
	padding: var(--kmi-s3);
	background: var(--kmi-panel);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
}
.kmi-filtre__alan { flex: 1 1 11rem; min-width: 0; }
.kmi-filtre__alan--ara { flex: 2 1 14rem; }
.kmi-filtre select,
.kmi-filtre input[type="search"] {
	width: 100%;
	padding: .55rem .7rem;
	font: inherit;
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-ink);
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
}
.kmi-filtre select:focus-visible,
.kmi-filtre input:focus-visible { outline: 2px solid var(--kmi-blue); outline-offset: 1px; }
.kmi-filtre__btn { flex: 0 0 auto; }
.kmi-filtre__temizle {
	flex: 0 0 auto;
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	text-decoration: underline;
}
@media (max-width: 600px) {
	.kmi-filtre__alan, .kmi-filtre__alan--ara { flex: 1 1 100%; }
	.kmi-filtre__btn { flex: 1 1 100%; }
}

/* ---- İletişim formu (Contact Form 7) ---- */
.kmi-form__satir { margin-bottom: var(--kmi-s4); max-width: 34rem; }
.kmi-form__satir label { display: block; font-weight: 600; margin-bottom: var(--kmi-s1); }
.kmi-form__satir small { display: block; margin-top: var(--kmi-s1); color: var(--kmi-muted); font-size: var(--kmi-fs-sm); }
.kmi-icerik input[type="text"],
.kmi-icerik input[type="email"],
.kmi-icerik select,
.kmi-icerik textarea {
	width: 100%;
	padding: .6rem .75rem;
	font: inherit;
	color: var(--kmi-ink);
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
}
.kmi-icerik textarea { resize: vertical; min-height: 9rem; }
.kmi-icerik input:focus-visible,
.kmi-icerik select:focus-visible,
.kmi-icerik textarea:focus-visible { outline: 2px solid var(--kmi-blue); outline-offset: 1px; }
.kmi-form__not {
	max-width: 34rem;
	padding: var(--kmi-s3);
	background: var(--kmi-warn-soft);
	border-left: 3px solid var(--kmi-warn);
	border-radius: var(--kmi-radius-sm);
	font-size: var(--kmi-fs-sm);
}
.wpcf7-not-valid-tip { color: var(--kmi-danger); font-size: var(--kmi-fs-sm); margin-top: var(--kmi-s1); }
.wpcf7-response-output {
	max-width: 34rem;
	margin-top: var(--kmi-s4);
	padding: var(--kmi-s3);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
}
.wpcf7 form.sent .wpcf7-response-output { border-color: var(--kmi-ok); background: var(--kmi-ok-soft); }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output { border-color: var(--kmi-danger); background: var(--kmi-danger-soft); }
.wpcf7-spinner { display: inline-block; margin-left: var(--kmi-s2); }

/* ---- Blog listesi ---- */
.kmi-yazilar {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: var(--kmi-s4);
	margin-bottom: var(--kmi-s5);
}
.kmi-yazi {
	display: flex;
	flex-direction: column;
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius);
	overflow: hidden;
}
.kmi-yazi__gorsel {
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--kmi-panel);
	overflow: hidden;
}
.kmi-yazi__gorsel img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kmi-yazi__ic { display: flex; flex-direction: column; gap: var(--kmi-s2); padding: var(--kmi-s3); flex: 1; }
.kmi-yazi__kat a {
	font-size: var(--kmi-fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--kmi-blue);
	text-decoration: none;
}
.kmi-yazi__baslik { font-size: var(--kmi-fs-base); line-height: 1.35; margin: 0; }
.kmi-yazi__baslik a { color: var(--kmi-ink); text-decoration: none; }
.kmi-yazi__baslik a:hover { color: var(--kmi-blue); }
.kmi-yazi__ozet { margin: 0; font-size: var(--kmi-fs-sm); color: var(--kmi-muted); }
.kmi-yazi__alt { margin-top: auto; font-size: var(--kmi-fs-xs); color: var(--kmi-muted); }

/* ---- İlgili yazılar listesi ---- */
.kmi-ilgili { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--kmi-s2); }
.kmi-ilgili li {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--kmi-s2);
	padding: var(--kmi-s3);
	background: var(--kmi-ground);
	border: 1px solid var(--kmi-line);
	border-radius: var(--kmi-radius-sm);
}
.kmi-ilgili a { font-weight: 600; text-decoration: none; flex: 1 1 16rem; }
.kmi-ilgili time { font-size: var(--kmi-fs-xs); color: var(--kmi-muted); white-space: nowrap; }

/* ---- Blog başlık bandı ---- */
/* Hafif zemin: koyu bir bant blog listesinde agir duruyordu, ayrica
   sayfanin geri kalaniyla kontrasti gereginden sert yapiyordu. */
.kmi-blog-ust {
	background: var(--kmi-panel);
	padding-block: var(--kmi-s5) var(--kmi-s4);
	margin-bottom: var(--kmi-s5);
	border-bottom: 1px solid var(--kmi-line);
	box-shadow: inset 0 3px 0 var(--kmi-blue);
}
.kmi-blog-ust__baslik { margin: 0 0 var(--kmi-s2); max-width: 24ch; }
.kmi-blog-ust__alt {
	margin: 0;
	max-width: 62ch;
	color: var(--kmi-muted);
	font-size: var(--kmi-fs-lg);
}
.kmi-blog-ust__sayi {
	margin: var(--kmi-s3) 0 0;
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
	font-variant-numeric: tabular-nums;
}

/* ---- Blog yazısı künyesi ---- */
.kmi-yazi-kunye {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--kmi-s2) var(--kmi-s4);
	margin-bottom: var(--kmi-s5);
	padding-bottom: var(--kmi-s3);
	border-bottom: 1px solid var(--kmi-line);
	font-size: var(--kmi-fs-sm);
	color: var(--kmi-muted);
}
.kmi-yazi-kunye__kat {
	font-weight: 700;
	font-size: var(--kmi-fs-xs);
	text-transform: uppercase;
	letter-spacing: .06em;
	color: #fff;
	background: var(--kmi-blue);
	padding: .2rem .6rem;
	border-radius: var(--kmi-radius-sm);
	text-decoration: none;
}
.kmi-yazi-kunye__kat:hover { background: var(--kmi-navy); color: #fff; }
.kmi-yazi-kunye__guncel { color: var(--kmi-ok); font-weight: 600; }
/* Gövdede zaten `.meta-info` bloğu varsa künye sadeleşir: iki kutu üst üste
   gelmesin, ama okuma süresi gibi şablondan gelen bilgi kaybolmasın. */
.kmi-yazi-kunye--sade { border-bottom: none; padding-bottom: 0; margin-bottom: var(--kmi-s3); }
.kmi-yazi-kunye--sade .kmi-yazi-kunye__guncel { display: none; }

/*
 * Iletisim formundaki tuzak alani. Ekranda ve ekran okuyucuda yok, ama
 * DOM'da duruyor: formu ayristirip her alani dolduran botlar buraya da
 * yaziyor, insan yazmiyor. display:none yerine konum disina alindi —
 * bazi botlar display:none alanlari atliyor.
 */
.kmi-tuzak {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/*
 * Yukari cik dugmesi — kritik CSS'ten tasindi.
 * Ekranin ust kisminda gorunmuyor (yalnizca kaydirinca beliriyor),
 * dolayisiyla ilk boyamada duzeni etkilemiyor.
 */
/* ---------- Yukarı çık ---------- */

.kmi-yukari {
	position: fixed;
	right: var(--kmi-s4);
	bottom: var(--kmi-s4);
	width: var(--kmi-tap);
	height: var(--kmi-tap);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--kmi-navy);
	color: #fff;
	border: 0;
	border-radius: 50%;
	box-shadow: var(--kmi-shadow-lift);
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(6px);
	transition: opacity .18s, transform .18s, visibility .18s;
	z-index: 45;
}
.kmi-yukari[data-gorunur="1"] {
	opacity: 1;
	visibility: visible;
	transform: none;
}
.kmi-yukari:hover { background: var(--kmi-navy-2); }

/*
 * Kritik CSS'ten tasinan hover/focus kurallari.
 * Yalnizca renk ve anahat degistiriyorlar; ilk boyamada duzeni
 * etkilemedikleri icin kritik degiller.
 */
a:hover { text-decoration: underline; }
.kmi-ust a:hover { color: #fff; }
.kmi-logo:hover { text-decoration: none; }
.kmi-ara-kutu:focus-within {
	border-color: var(--kmi-blue);
	background: var(--kmi-ground);
}
.kmi-nav__liste a:hover { color: var(--kmi-blue); text-decoration: none; }
.kmi-buyuk-ara__alan:focus,
.kmi-buyuk-ara select:focus { border-color: var(--kmi-blue); }
.kmi-btn:hover { background: var(--kmi-navy-2); text-decoration: none; color: #fff; }
.kmi-etiket:hover {
	background: var(--kmi-blue-soft);
	border-color: var(--kmi-blue);
	color: var(--kmi-navy);
	text-decoration: none;
}