/* ===========================================================================
   Keşif sayfaları — ana sayfa, arama, harita, yakınımdakiler, cemevi ekle.
   temel.css'ten SONRA yüklenir.

   YALNIZ bu dosyada çalışılır; renk/ölçü/boşluk DEĞERİ yazılmaz,
   temel.css'teki --token'lar kullanılır. Yeni bir renk gerekiyorsa
   tasarım dili sahibine (temel.css) bırakılır.

   Sıra:
     1. ortak parçalar (çip, kısayol kartı, katlanır bölüm)
     2. ana sayfa  — giriş, Türkiye haritası, iller, ölçüm
     3. arama      — boş hal ve sonuç başlığı
     4. /harita    — süzgeç şeridi
     5. /yakınımdakiler — izin anlatımı, özet, yardım
     6. /cemevi-ekle    — adım kartları
   ======================================================================== */

/* ---------------------------------------------------------------------------
   1. ORTAK PARCALAR
   ------------------------------------------------------------------------ */

/* Cip: hem baglanti (il kisayolu) hem dugme (harita suzgeci) olarak
   kullaniliyor. Dokunma hedefi 40px'in altina dusmuyor. */
.kesif-cip {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  min-height: 40px;
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--zemin-yukseltilmis);
  color: var(--metin);
  font-size: var(--olcek-sm);
  font-weight: 600;
  white-space: nowrap;
  transition: background var(--gecis-hizli), border-color var(--gecis-hizli),
              color var(--gecis-hizli);
}

.kesif-cip:hover {
  background: var(--vurgu-acik);
  border-color: var(--vurgu);
  color: var(--vurgu);
  text-decoration: none;
}

.kesif-cip b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--metin-silik);
}

.kesif-cip:hover b { color: var(--vurgu); }
.kesif-cip svg { width: 15px; height: 15px; flex: none; }

/* inline-flex, hidden niteligini ezerdi. */
.kesif-cip[hidden] { display: none; }

.kesif-cip--dugme { cursor: pointer; }

/* Secili suzgec rengi TEK BASINA bilgi tasimasin diye aria-pressed
   kullaniliyor; ekran okuyucu "basili" diye okuyor. */
.kesif-cip--dugme[aria-pressed="true"] {
  background: var(--vurgu);
  border-color: var(--vurgu);
  color: var(--vurgu-metin);
}

.kesif-cip--dugme[aria-pressed="true"] b { color: var(--vurgu-metin); }

/* Kisayol karti: bos arama ekraninda ve konum izni reddinde cikis yollari. */
.kesif-kisayol {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: var(--bosluk-2);
}

@media (min-width: 620px) {
  .kesif-kisayol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.kesif-kisayol__oge {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  height: 100%;
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  color: var(--metin);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-orta),
              transform var(--gecis-orta);
}

.kesif-kisayol__oge:hover {
  border-color: var(--vurgu);
  box-shadow: var(--golge-md);
  transform: translateY(-2px);
  color: var(--metin);
  text-decoration: none;
}

.kesif-kisayol__ikon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.kesif-kisayol__govde { flex: 1; min-width: 0; }
.kesif-kisayol__govde b { display: block; font-size: var(--olcek-md); }

.kesif-kisayol__govde small {
  display: block;
  color: var(--metin-silik);
  font-size: var(--olcek-xs);
  line-height: 1.45;
}

.kesif-kisayol__oge > svg:last-child { flex: none; color: var(--metin-silik); }

/* Katlanir bolum: uzun listeyi ve formun teknik alanini gizler.
   Icerik HTML'de duruyor — arama motoru ve ekran okuyucu yine goruyor. */
.kesif-katlanir { margin-top: var(--bosluk-6); }

.kesif-katlanir__baslik {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-2) var(--bosluk-4);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-tam);
  background: var(--zemin-yukseltilmis);
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.kesif-katlanir__baslik::-webkit-details-marker { display: none; }

.kesif-katlanir__baslik:hover {
  border-color: var(--vurgu);
  color: var(--vurgu);
}

/* Ok isareti kenarliktan cizildi: yazi tipine bagli bir glif kullanmamak
   icin — bazi sistemlerde ucgen karakteri emoji olarak cikiyor. */
.kesif-katlanir__baslik::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--gecis-hizli);
}

.kesif-katlanir[open] > .kesif-katlanir__baslik::after {
  transform: translateY(1px) rotate(225deg);
}

.kesif-katlanir__govde { margin-top: var(--bosluk-4); }
.kesif-katlanir--alan { margin-top: var(--bosluk-4); }

/* ---------------------------------------------------------------------------
   2. ANA SAYFA
   ------------------------------------------------------------------------ */

/* Giris bolumu kasitli olarak kisa: arama kutusu ve haritanin ust kenari
   telefonda ilk ekrana sigsin diye dikey dolgular dar tutuldu. */
.kesif-giris {
  position: relative;
  padding-block: var(--bosluk-6) var(--bosluk-5);
  background:
    radial-gradient(120% 130% at 50% 0%, var(--vurgu-acik) 0%, transparent 62%),
    var(--zemin);
  border-bottom: 1px solid var(--kenar);
  text-align: center;
}

@media (min-width: 720px) {
  .kesif-giris { padding-block: var(--bosluk-8) var(--bosluk-6); }
}

.kesif-giris__baslik {
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--bosluk-2);
  text-wrap: balance;
}

.kesif-giris__ozet {
  max-width: 52ch;
  margin-inline: auto;
  margin-bottom: var(--bosluk-5);
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
  text-wrap: pretty;
}

@media (min-width: 720px) {
  .kesif-giris__ozet { font-size: var(--olcek-lg); }
}

.kesif-giris__arama {
  max-width: 580px;
  margin-inline: auto;
}

.kesif-giris__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-3);
  justify-content: center;
  margin-top: var(--bosluk-4);
}

/* --- Turkiye haritasi: sayfanin imzasi --- */

.kesif-harita {
  padding-block: var(--bosluk-6) var(--bosluk-10);
}

.kesif-harita__ust {
  margin-bottom: var(--bosluk-4);
}

.kesif-harita__baslik {
  margin-bottom: var(--bosluk-1);
  font-size: var(--olcek-xl);
}

@media (min-width: 720px) {
  .kesif-harita__baslik { font-size: var(--olcek-2xl); }
}

.kesif-harita__ozet {
  max-width: 62ch;
  margin: 0;
  color: var(--metin-yumusak);
  font-size: var(--olcek-sm);
}

.kesif-harita__pano {
  display: grid;
  gap: var(--bosluk-4);
}

@media (min-width: 980px) {
  .kesif-harita__pano {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--bosluk-6);
    align-items: start;
  }
}

/* Tuval telefonda kenara dayaniyor: 1000x423 oranindaki harita dar
   ekranda zaten kisa kaliyor, yanlardan 16+16px daha kaybetmesin. */
.kesif-harita__tuval {
  position: relative;
  margin-inline: calc(var(--yan-bosluk) * -1);
  padding: var(--bosluk-3);
  background: var(--zemin-yukseltilmis);
  border-block: 1px solid var(--kenar);
  box-shadow: var(--golge-sm);
}

@media (min-width: 620px) {
  .kesif-harita__tuval {
    margin-inline: 0;
    padding: var(--bosluk-5);
    border: 1px solid var(--kenar);
    border-radius: var(--kose-xl);
  }
}

.kesif-harita__cizim { width: 100%; height: auto; }

.kesif-harita__yan {
  display: grid;
  gap: var(--bosluk-4);
  align-content: start;
}

/* Secim karti — fare, klavye ve parmak icin tek okuma yeri. */
.kesif-sec {
  padding: var(--bosluk-4);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  box-shadow: var(--golge-sm);
}

.kesif-sec__ust {
  margin: 0;
  font-size: var(--olcek-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--metin-silik);
}

.kesif-sec__ad {
  margin: var(--bosluk-1) 0 0;
  font-size: var(--olcek-xl);
  font-weight: 700;
  line-height: 1.25;
  color: var(--metin);
}

.kesif-sec__adet {
  margin: var(--bosluk-1) 0 var(--bosluk-4);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

/* .dugme display:inline-flex veriyor; hidden'in ise yaramasi icin. */
.kesif-sec__bag[hidden] { display: none; }

.kesif-sec__not {
  margin: var(--bosluk-3) 0 0;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
}

/* Secili il — hover ile ayni vurgu, ama dokunmatikte de kaliyor. */
.tr-harita__il--secili {
  fill: var(--harita-il-vurgu);
  stroke: var(--metin);
  stroke-width: 1.6;
}

.kesif-enler__baslik {
  margin: 0 0 var(--bosluk-3);
  font-size: var(--olcek-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--metin-silik);
}

.kesif-enler__liste {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

.kesif-harita__tam {
  display: flex;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--vurgu-acik);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  color: var(--metin);
  transition: border-color var(--gecis-hizli), box-shadow var(--gecis-orta);
}

.kesif-harita__tam:hover {
  border-color: var(--vurgu);
  box-shadow: var(--golge-md);
  color: var(--metin);
  text-decoration: none;
}

.kesif-harita__tam svg { flex: none; color: var(--vurgu); }
.kesif-harita__tam span { flex: 1; min-width: 0; }
.kesif-harita__tam b { display: block; font-size: var(--olcek-md); }

.kesif-harita__tam small {
  display: block;
  font-size: var(--olcek-xs);
  color: var(--metin-yumusak);
}

/* --- il listesi --- */

.kesif-iller { margin-top: var(--bosluk-8); }

.kesif-iller__baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin-bottom: var(--bosluk-3);
  font-size: var(--olcek-lg);
}

.kesif-iller__sayi {
  padding: 2px var(--bosluk-2);
  border-radius: var(--kose-tam);
  background: var(--vurgu-acik);
  color: var(--vurgu);
  font-size: var(--olcek-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* --- olcum seridi: haritanin ALTINDA, tek satir --- */

.kesif-olcum {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2) var(--bosluk-5);
  margin: var(--bosluk-8) 0 0;
  padding-top: var(--bosluk-5);
  border-top: 1px solid var(--kenar);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.kesif-olcum__oge {
  display: inline-flex;
  align-items: baseline;
  gap: var(--bosluk-1);
}

.kesif-olcum__oge b {
  font-size: var(--olcek-lg);
  font-weight: 800;
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   3. ARAMA
   ------------------------------------------------------------------------ */

.kesif-ara-form { margin-bottom: var(--bosluk-6); }

.kesif-sonuc-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--bosluk-3);
  margin-bottom: var(--bosluk-5);
}

.kesif-sonuc-bilgi {
  margin: 0;
  color: var(--metin-yumusak);
  font-size: var(--olcek-md);
}

.kesif-baslangic {
  display: grid;
  gap: var(--bosluk-6);
  margin-top: var(--bosluk-5);
}

@media (min-width: 980px) {
  .kesif-baslangic {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--bosluk-8);
    align-items: start;
  }
}

.kesif-baslangic__baslik {
  margin-bottom: var(--bosluk-3);
  font-size: var(--olcek-lg);
}

.kesif-ornek-liste {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bosluk-4);
  display: grid;
  gap: var(--bosluk-2);
}

.kesif-ornek-liste li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--bosluk-1) var(--bosluk-2);
  padding: var(--bosluk-3) var(--bosluk-4);
  background: var(--zemin-batik);
  border-radius: var(--kose-md);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.kesif-ornek-liste b { color: var(--metin); }

/* ---------------------------------------------------------------------------
   4. /harita — suzgec seridi
   ------------------------------------------------------------------------ */

.harita-sayfa__metin { min-width: 0; }

.harita-sayfa__eylem {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

/* Serit esnek kutunun sabit yuksekli uyesi: harita kalan alani alsin. */
.kesif-suzgec {
  flex: none;
  background: var(--zemin-yukseltilmis);
  border-top: 1px solid var(--kenar);
  border-bottom: 1px solid var(--kenar);
}

.kesif-suzgec__kaydir {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-3) var(--yan-bosluk);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (min-width: 980px) {
  .kesif-suzgec__kaydir {
    max-width: var(--icerik-max);
    margin-inline: auto;
    flex-wrap: wrap;
    overflow-x: visible;
  }
}

/* Dokunmatikte kaydirma cubugu yer kapliyor; parmakla kaydirma zaten
   kesif edilebilir oldugu icin gizleniyor. Farede duruyor. */
@media (hover: none) {
  .kesif-suzgec__kaydir { scrollbar-width: none; }
  .kesif-suzgec__kaydir::-webkit-scrollbar { display: none; }
}

.kesif-suzgec__ayirac {
  flex: none;
  width: 1px;
  height: 24px;
  background: var(--kenar);
}

/* ---------------------------------------------------------------------------
   5. /yakinimdakiler
   ------------------------------------------------------------------------ */

.kesif-izin {
  padding: var(--bosluk-5);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  margin-bottom: var(--bosluk-6);
}

.kesif-izin__baslik {
  margin: 0 0 var(--bosluk-4);
  font-size: var(--olcek-lg);
}

.kesif-izin__adimlar {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-3);
}

@media (min-width: 720px) {
  .kesif-izin__adimlar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.kesif-izin__adim {
  display: flex;
  gap: var(--bosluk-3);
  align-items: flex-start;
}

.kesif-izin__ikon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: none;
  border-radius: var(--kose-md);
  background: var(--vurgu-acik);
  color: var(--vurgu);
}

.kesif-izin__govde { min-width: 0; }
.kesif-izin__govde b { display: block; font-size: var(--olcek-sm); }

.kesif-izin__govde small {
  display: block;
  margin-top: 2px;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
  line-height: 1.5;
}

.kesif-izin__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: end;
  gap: var(--bosluk-3);
}

.kesif-izin__eylem .dugme { min-height: 46px; }

.kesif-izin__yaricap {
  display: grid;
  gap: var(--bosluk-1);
  min-width: 150px;
}

.kesif-izin__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin: var(--bosluk-4) 0 0;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
}

.kesif-izin__not svg { flex: none; margin-top: 2px; }

/* Sonuc gelince anlatim kucuk bir denetim seridine doner: yaricap ve
   yeniden deneme erisimde kalsin diye blok gizlenmiyor. */
.kesif-izin--sonuc {
  padding: var(--bosluk-3) var(--bosluk-4);
}

.kesif-izin--sonuc .kesif-izin__baslik,
.kesif-izin--sonuc .kesif-izin__adimlar,
.kesif-izin--sonuc .kesif-izin__not { display: none; }

/* .durum-kutu display:grid aldigi icin hidden niteligi ise yaramiyordu;
   sonuclar gelince yerinde 96px'lik bos bir blok kaliyordu. */
.durum-kutu[hidden] { display: none; }

.kesif-yakin-ozet {
  margin: 0 0 var(--bosluk-4);
  font-weight: 600;
  color: var(--metin);
}

.kesif-yakin-ozet[hidden] { display: none; }
.kesif-yakin-harita { height: 320px; }
.kesif-yakin-harita[hidden] { display: none; }

.kesif-yardim {
  display: grid;
  gap: var(--bosluk-4);
  padding: var(--bosluk-5);
  margin-bottom: var(--bosluk-6);
  background: var(--uyari-acik);
  border: 1px solid var(--kehribar-300);
  border-radius: var(--kose-lg);
}

.kesif-yardim[hidden] { display: none; }

.kesif-yardim__baslik {
  display: flex;
  align-items: center;
  gap: var(--bosluk-2);
  margin: 0;
  font-size: var(--olcek-lg);
  color: var(--uyari);
}

.kesif-yardim__ozet { margin: 0; color: var(--metin-yumusak); }

.kesif-yardim__liste {
  margin: 0;
  padding-inline-start: var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-2);
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
}

.kesif-yardim__liste b { color: var(--metin); }
.kesif-yardim__liste i { font-style: normal; font-weight: 600; }

/* ---------------------------------------------------------------------------
   6. /cemevi-ekle — adim kartlari
   ------------------------------------------------------------------------ */

/* Form sutunu dar tutuluyor (uzun satir okunmaz) ama ORTALANMIYOR:
   baslik, kirilma ve form ayni sol kenardan basliyor. */
.kesif-adim-sira,
.kesif-form { max-width: 860px; }

/* Adim dizini: formun uzunlugu bastan gorunsun. Baglanti DEGIL — form
   icinde gezinme beklentisi yaratmasin diye. */
.kesif-adim-sira {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--bosluk-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--bosluk-2);
}

.kesif-adim-sira__oge {
  display: inline-flex;
  align-items: center;
  gap: var(--bosluk-2);
  padding: var(--bosluk-1) var(--bosluk-3);
  border: 1px dashed var(--kenar-koyu);
  border-radius: var(--kose-tam);
  font-size: var(--olcek-xs);
  color: var(--metin-yumusak);
}

.kesif-adim-sira__no {
  font-weight: 800;
  color: var(--vurgu);
  font-variant-numeric: tabular-nums;
}

.kesif-adim-sira__oge small { color: var(--metin-silik); }

.kesif-form {
  display: grid;
  gap: var(--bosluk-5);
}

.kesif-adim {
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
  overflow: hidden;
}

.kesif-adim__ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--bosluk-3);
  padding: var(--bosluk-4);
  background: var(--zemin-batik);
  border-bottom: 1px solid var(--kenar);
}

.kesif-adim__no {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: var(--kose-tam);
  background: var(--vurgu);
  color: var(--vurgu-metin);
  font-size: var(--olcek-sm);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.kesif-adim__metin { flex: 1 1 180px; min-width: 0; }

.kesif-adim__baslik {
  margin: 0;
  font-size: var(--olcek-lg);
}

.kesif-adim__ozet {
  margin: 2px 0 0;
  font-size: var(--olcek-sm);
  color: var(--metin-yumusak);
  line-height: 1.5;
}

.kesif-adim__rozet { flex: none; }
.kesif-adim__govde { padding: var(--bosluk-4); }

@media (min-width: 620px) {
  .kesif-adim__ust,
  .kesif-adim__govde { padding: var(--bosluk-5); }
}

/* .alan kendi alt bosluguna sahip; izgara zaten bosluk veriyor, ikisi
   ust uste binince satirlar arasi dengesiz aciliyordu. */
.kesif-adim__govde .form-izgara .alan { margin-bottom: 0; }

/* .alan bir izgara; satirlari esnetmeyince komsu alanlarin girdileri
   farkli yukseklikte cikiyordu (yardim metni olan hucre digerini uzatiyor). */
.kesif-adim__govde .alan { align-content: start; }
.kesif-adim__govde > .alan:last-child { margin-bottom: 0; }

.kesif-hata-liste {
  margin: var(--bosluk-2) 0 0;
  padding-inline-start: var(--bosluk-5);
  display: grid;
  gap: var(--bosluk-1);
  font-size: var(--olcek-sm);
}

.kesif-gonder {
  padding: var(--bosluk-5);
  background: var(--zemin-yukseltilmis);
  border: 1px solid var(--kenar);
  border-radius: var(--kose-lg);
}

.kesif-gonder .dugme { min-height: 52px; }

.kesif-gonder__not {
  display: flex;
  align-items: flex-start;
  gap: var(--bosluk-2);
  margin: var(--bosluk-3) 0 0;
  font-size: var(--olcek-xs);
  color: var(--metin-silik);
  line-height: 1.5;
}

.kesif-gonder__not svg { flex: none; margin-top: 2px; }