.kl{--kl-accent:var(--brl-accent);--kl-cizgi:var(--brl-cizgi);--kl-metin:var(--brl-metin);
--kl-soluk:var(--brl-soluk);--kl-zemin:var(--brl-zemin);
--kl-ok:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='%23000'/%3E%3C/svg%3E");
box-sizing:border-box;color:var(--kl-metin);font-size:15px;line-height:1.45}
.kl *,.kl *::before,.kl *::after{box-sizing:inherit}
.kl-grup+.kl-grup{margin-top:34px}

/* Başlık */
.kl-baslik{display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:8px 0 8px 12px;
border-left:3px solid var(--kl-accent);background:var(--kl-zemin)}
.kl-baslik-ad{font-size:16px;font-weight:700;letter-spacing:.2px}
.kl-baslik-ek{font-size:12px;font-weight:400;letter-spacing:.2px;color:var(--kl-soluk)}
.kl-baslik-sayi{margin-left:auto;padding-right:12px;font-size:11px;font-weight:600;letter-spacing:.8px;
text-transform:uppercase;color:var(--kl-soluk)}

/* Kart ızgarası */
/* Sabit 5 sütun; dar ekranlarda kademeli iner. */
.kl-izgara{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.kl-card{display:flex;flex-direction:column;background:var(--brl-kutu);border:1px solid var(--kl-cizgi);
border-top:3px solid var(--kl-cizgi);transition:border-color .15s ease,box-shadow .15s ease}
.kl-card:hover{border-top-color:var(--kl-accent);box-shadow:0 2px 10px var(--brl-golge)}
.kl-card-foto{position:relative;aspect-ratio:1/1;background:var(--kl-zemin);overflow:hidden}
.kl-card-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:center top}
.kl-card-bh{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-size:34px;font-weight:700;letter-spacing:1px;color:var(--brl-yertutucu)}
.kl-card-govde{padding:12px 14px 14px;text-align:center}
.kl-card-ad{display:block;font-size:15px;font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.kl-card-meta{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.8px;
text-transform:uppercase;color:var(--kl-soluk);overflow-wrap:anywhere}

/* Araç çubuğu: ilçe seçimi + arama */
.kl-arac{display:flex;gap:10px;margin:0 0 16px;min-height:55px;padding:8px 10px;
background:var(--kl-zemin);border:1px solid var(--kl-cizgi);border-left:3px solid var(--kl-accent)}
.kl-arac-alan{display:flex;align-items:stretch;margin:0}
.kl-arac-ilce{flex:0 0 240px;max-width:45%}
.kl-arac-ara{flex:1 1 auto;min-width:0}
.kl-arac select,.kl-arac input{width:100%;height:39px;padding:0 12px;background:var(--brl-kutu);
border:1px solid var(--kl-cizgi);border-radius:0;box-shadow:none;color:var(--kl-metin);
font-family:inherit;font-size:14px;line-height:normal;-webkit-appearance:none;appearance:none}
/* Ok, data URI yerine maske: renk var(--kl-soluk)'ten geliyor, data URI
   içinde var() çalışmadığı için. Maske desteklenmezse ok görünmez, seçim
   kutusu yine çalışır. */
.kl-arac select{padding-right:32px;cursor:pointer;position:relative}
.kl-arac-ilce{position:relative}
.kl-arac-ilce::after{content:"";position:absolute;top:50%;right:12px;width:11px;height:8px;
margin-top:-4px;pointer-events:none;background-color:var(--kl-soluk);
-webkit-mask:var(--kl-ok) no-repeat center/11px 8px;mask:var(--kl-ok) no-repeat center/11px 8px}
.kl-arac select:focus,.kl-arac input:focus{outline:none;border-color:var(--kl-accent)}
.kl-arac input::-webkit-search-cancel-button{cursor:pointer}

.kl-sayac{margin:0 0 12px;font-size:11px;font-weight:600;letter-spacing:.8px;
text-transform:uppercase;color:var(--kl-soluk)}
.kl-yok{padding:14px;background:var(--kl-zemin);border-left:3px solid var(--kl-accent);font-size:14px}
.kl-yok button{margin-left:6px;padding:0;background:none;border:0;
color:var(--kl-accent);font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.kl [hidden]{display:none!important}
.kl .screen-reader-text{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Muhtar satırları */
.kl-liste{display:flex;flex-direction:column;gap:6px}
.kl-satir,.kl-bas{display:flex;align-items:center;gap:14px;padding:8px 14px}
.kl-satir{min-height:46px;background:var(--brl-kutu);
border:1px solid var(--kl-cizgi);border-left:3px solid var(--kl-cizgi);
transition:border-color .15s ease,background .15s ease}
.kl-satir:hover{border-left-color:var(--kl-accent);background:var(--kl-zemin)}
.kl-satir-mahalle,.kl-bas-mahalle{flex:0 0 32%;min-width:0;overflow-wrap:anywhere}
.kl-satir-ad,.kl-bas-ad{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.kl-satir-tel,.kl-bas-tel{flex:0 0 155px;white-space:nowrap}
.kl-satir-mahalle{font-weight:700}
.kl-satir-mh{font-size:12px;font-weight:400;color:var(--kl-soluk)}
.kl-satir-tel{font-size:13px;font-weight:600;letter-spacing:.4px;color:var(--kl-soluk);
text-decoration:none}
.kl-satir-tel i{margin-right:6px;color:var(--kl-accent)}
a.kl-satir-tel:hover,a.kl-satir-tel:focus{color:var(--kl-accent)}

/* Sütun başlıkları — satırlarla aynı yatay ölçüde, çerçevesiz. */
.kl-bas{padding-top:2px;padding-bottom:6px;border-left:3px solid transparent;
font-size:10px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--kl-soluk)}

.kl-bos{margin:0;padding:12px 14px;background:var(--kl-zemin);border-left:3px solid var(--kl-accent);
font-size:14px;color:var(--kl-soluk)}

@media (max-width:1100px){.kl-izgara{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:880px){.kl-izgara{grid-template-columns:repeat(3,minmax(0,1fr))}}

@media (max-width:560px){
.kl-izgara{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kl-card-ad{font-size:14px}
.kl-card-bh{font-size:26px}
.kl-satir{flex-wrap:wrap;gap:2px 12px;padding:10px 12px}
.kl-satir-mahalle{flex:1 0 100%}
.kl-satir-ad{flex:1 1 auto}
.kl-satir-tel{flex:0 0 auto}
/* Satırlar sardığı için sütun hizası kalmıyor; başlık yanıltıcı olurdu. */
.kl-bas{display:none}
.kl-arac{flex-wrap:wrap;min-height:0}
.kl-arac-ilce,.kl-arac-ara{flex:1 0 100%;max-width:none}
}