/* ============================================================
   Türkiye Ekolojik Atlası — İnteraktif 81 İl Haritası
   Tema: coğrafya atlası · açık zemin · su mavisi · bitki örtüsü yeşilleri
   ============================================================ */

:root {
  --zemin:          #eef3f0;
  --zemin-ust:      #ffffff;
  --panel:          #ffffff;
  --panel-cizgi:    #d3ddd6;
  --panel-cizgi-koyu: #b9c7bd;

  --deniz:          #7fb8d9;
  --deniz-koyu:     #5a9dc4;
  --deniz-cizgi:    #4a8cb5;

  --il-dolgu:       #e8ece5;
  --il-cizgi:       #8a9a8e;
  --il-cizgi-hover: #3f5a46;

  --secili:         #d97706;
  --secili-acik:    #f59e0b;
  --vurgu:          #b45309;
  --yesil:          #2f7d4f;

  --metin:          #1c2a22;
  --metin-orta:     #4a5c50;
  --metin-soluk:    #6d8074;

  --golge:          0 1px 3px rgba(28, 42, 34, .08), 0 8px 24px rgba(28, 42, 34, .06);
  --golge-kart:     0 4px 16px rgba(28, 42, 34, .13), 0 12px 36px rgba(28, 42, 34, .10);
  --kose:           12px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--zemin);
  color: var(--metin);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

body {
  background:
    radial-gradient(1000px 520px at 12% -8%, #dcece2 0%, transparent 62%),
    radial-gradient(900px 480px at 108% 108%, #dbe9f2 0%, transparent 58%),
    var(--zemin);
  overflow-y: auto;
  overflow-x: hidden;
}

/* ---------------- YERLEŞİM ---------------- */

.uygulama {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  grid-template-rows: minmax(0, 1fr);
  align-items: stretch;
  gap: 16px;
  padding: 16px;
  /* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "ekranı %67 yapmam lazım ki
     yazdığımız bilgiler görünsün, yoksa altta kalıyor" dedi. Kök neden:
     height:100vh + overflow:hidden sabitti; ekran/zoom değişince mantıksal
     yükseklik büyüdüğü hâlde kap 100vh'de kalıp içeriği KESİYORDU.
     Çare (3. tur — ÖLÇÜLMÜŞ): 2. turda min-height:100vh verilince grid
     satırı yan panelin içerik yüksekliğine (1500px+) göre uzadı; harita
     paneli de uzayıp .harita-kap'ı dikeyde şişirdi. Sonuç: 1366×768'de
     ülke, 1000px yüksekliğinde bir kutunun ortasında küçük bir şerit
     olarak kalıyordu (ekran görüntüsüyle ölçüldü) ve zoom oranı bozuldu.
     Doğrusu: yükseklik VIEWPORT'a sabitlenir (harita her ekranda tam
     oturur, zoom doğru çalışır), künyeye erişim ise YAN PANELİN İÇİNDE
     kaydırmayla sağlanır. .yan-panel'e max-height + overflow-y:auto
     verildi; künye panelin son elemanı olduğu için panel içi kaydırmayla
     görünür — zoom yapmaya GEREK KALMAZ. */
  height: 100vh;
  max-width: 1900px;
  margin: 0 auto;
  /* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "diğer yaptığın haritaya zarar
     verdi sanki" dedi — panel küçültmesi geri alındı (300px → 360px).
     Harita alanı eski ferah ölçüsüne döndü. */
  grid-template-columns: minmax(0, 1fr) 360px;
}

.harita-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--panel-cizgi);
  border-radius: var(--kose);
  box-shadow: var(--golge);
  overflow: hidden;
}

/* Panel kolonlarının grid satırı aşmasını engelle: 1fr yerine minmax(0,1fr) */
.uygulama > * {
  min-height: 0;
  max-height: 100%;
}

.tam-ekranda .uygulama {
  grid-template-columns: 1fr;
  padding: 0;
  gap: 0;
  max-width: none;
  height: 100vh;
}
.tam-ekranda .yan-panel { display: none; }
.tam-ekranda .harita-panel { border-radius: 0; border: none; }


/* ---------------- BAŞLIK ---------------- */

.harita-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 16px;
  border-bottom: 1px solid var(--panel-cizgi);
  background: linear-gradient(180deg, #fbfdfb, #f4f8f5);
}

.marka { display: flex; align-items: center; gap: 12px; }

.marka-isaret {
  width: 6px; height: 38px;
  border-radius: 3px;
  background: linear-gradient(180deg, var(--yesil), var(--deniz));
  flex: none;
}

.harita-baslik h1 {
  margin: 0;
  font-size: clamp(1.02rem, 1.5vw, 1.3rem);
  letter-spacing: .2px;
  font-weight: 650;
  color: #16241c;
}

.alt-yazi {
  margin: 2px 0 0;
  font-size: .76rem;
  color: var(--metin-soluk);
}

.araclar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.katman-grubu {
  display: flex;
  gap: 3px;
  background: #eef3ef;
  border: 1px solid var(--panel-cizgi);
  border-radius: 9px;
  padding: 3px;
}

.katman-btn {
  min-height: 34px;
  padding: 0 11px;
  border: none;
  background: transparent;
  color: var(--metin-orta);
  border-radius: 7px;
  font-size: .8rem;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s, color .15s;
}

.katman-btn:hover { background: #e2ebe4; }

.katman-btn.aktif {
  background: var(--yesil);
  color: #fff;
  font-weight: 600;
}

.katman-btn:focus-visible { outline: 2px solid var(--secili); outline-offset: 1px; }

.zoom-grubu { display: flex; gap: 4px; }

.zoom-grubu button,
.tam-ekran-btn {
  width: 38px; height: 38px;
  /* NUMEX-DÜZELTME (2026-10-13): Sıfırla düğmesi artık görünür etiket taşır
     (⟲ Sıfırla) — ⌂ ikonu ne işe yaradığını anlatmıyordu. Diğerleri kare
     kalır, yalnız etiketli düğme içeriğe göre genişler. */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 1px solid var(--panel-cizgi);
  background: var(--panel);
  color: var(--metin);
  border-radius: 9px;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s, border-color .15s, transform .08s;
}

.zoom-grubu button:hover,
.tam-ekran-btn:hover { background: #e6efe8; border-color: var(--il-cizgi); }
.zoom-grubu button:active,
.tam-ekran-btn:active { transform: scale(.94); }
.zoom-grubu button:focus-visible,
.tam-ekran-btn:focus-visible { outline: 2px solid var(--secili); outline-offset: 2px; }

/* Sıfırla: etiketli tek zoom düğmesi — sabit genişlik yerine içerik kadar. */
.zoom-grubu button#zoom-sifirla {
  width: auto;
  min-width: 38px;
  padding: 0 11px 0 9px;
  font-size: .92rem;
}

.zoom-grubu button .btn-etiket {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .2px;
  /* Yazıya ölçek uygulanmasın: düğme HTML, SVG değil. */
  transform: none;
}

.tam-ekran-btn.tam { background: var(--secili); color: #fff; border-color: var(--secili); }

.olcu-gostergesi {
  min-width: 54px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-size: .8rem;
  color: var(--vurgu);
  font-weight: 600;
  border: 1px solid var(--panel-cizgi);
  background: #f7faf8;
  border-radius: 8px;
  padding: 9px 6px;
}


/* ---------------- HARİTA ---------------- */

.harita-kap {
  position: relative;
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  cursor: grab;
  background: linear-gradient(180deg, #cfe4f0 0%, #bcd8ea 55%, #a9cde3 100%);
  touch-action: none;
}

.harita-kap.surukluyor { cursor: grabbing; }

#harita {
  display: block;
  width: 100%;
  height: 100%;
}

#harita .deniz {
  fill: url(#deniz-doku);
  stroke: var(--deniz-cizgi);
  stroke-width: .5;
  pointer-events: none;
}

#harita .deniz-yazi {
  fill: #2c6c93;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-anchor: middle;
  pointer-events: none;
  opacity: .9;
  /* Yazı her şeyin üstünde ama altındaki kara/ada ile karışmasın diye
     beyaz bir dış çizgi (paint-order: stroke) veriyoruz. */
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: 3px;
  stroke-linejoin: round;
}

/* Deniz adları katmanı en üstte; kendi gizleme sınıfı yok (her zaman görünür) */
#harita .kat-deniz-yazi { pointer-events: none; }

/* Kuşaklar: illerin ALTINDA, opak ve canlı (blend-mode kullanılmaz —
   iç içe binen kuşaklarda multiply karartıp tek renge çökertiyordu) */
#harita .kusak {
  pointer-events: none;
  transition: opacity .25s;
}

#harita .kusak-kompakt {
  opacity: 1;
}

/* NUMEX-DÜZELTME (2026-10-13): Kullanıcı bildirimi: "Ekoloji tuşu hiçbir iş yapmıyor". Kök neden: app.js:1816 tuşa basınca katKusak'a `katman-gizli` sınıfını toggle ediyordu ama style.css'te `.katman-gizli` kuralı HİÇ TANIMLI DEĞİLDİ — diğer dört tuşun (akarsular-gizli, adalar-gizli, goller-gizli, etiket-gizli) kuralı vardı, ekolojinin yoktu. Sınıf ekleniyor ama hiçbir görsel etki doğmuyordu. Kural eklendi. */
/* Kuşak katmanını gizler — "Ekoloji" tuşu bu sınıfı ekler (app.js:1816). */
#harita .katman-gizli { display: none; }

#harita .akarsu {
  fill: none;
  stroke: #2f7fb0;
  stroke-width: 1.1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: .9;
  pointer-events: none;
  /* Gerçek nehir geometrisi binlerce nokta taşıyor — çizim kalitesi için */
  shape-rendering: geometricPrecision;
}

/* Akarsu adı: nehrin üstünde, zoom'da sabit boyut */
#harita .akarsu-yazi {
  fill: #17527a;
  /* %100 zoom'da okunmalı. 6px -> 8.5px -> 9.5px -> 10.5px: denetim 125 öğeyi
     "10px altı" diye işaretledi. Akarsu adları 10px sınırının altında kalıyordu;
     çakışma zaten nehirYazilari filtresiyle engellendiği için bir kademe
     büyütüldü — okunurluk arttı, karmaşa artmadı. */
  font-size: calc(10.5px * var(--yazi-olcek, 1));
  font-weight: 700;
  font-style: italic;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: calc(2px * var(--yazi-olcek, 1));
  stroke-linejoin: round;
  opacity: .9;
}

#harita .akarsular-gizli { display: none; }

/* ---------- ADALAR ----------
   Ada gövdesi il sınırlarıyla aynı dile sahip olmalı: yarı saydam beyaz + ince
   kıyı hattı. Böylece "denizin üstünde duran kara parçası" gibi okunur. */
#harita .kat-ada { pointer-events: none; }

#harita .adalar-gizli { display: none; }

#harita .ada {
  fill: #ffffff;
  fill-opacity: .55;
  stroke: #5f7064;
  stroke-width: .5;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: auto;
  cursor: help;
  transition: fill-opacity .14s ease;
}

#harita .ada:hover { fill-opacity: .8; }

#harita .ada-nokta {
  fill: #ffffff;
  fill-opacity: .7;
  stroke: #5f7064;
  stroke-width: .4;
  vector-effect: non-scaling-stroke;
  cursor: help;
}

/* Ada isimlerinin zoom kademesi: yakınlaştırma eşiğin altındayken gizle.
   (Kademe app.js gorunumuGuncelle içinde data-esik değerine göre uygulanır.) */
#harita .ada-yazi.ada-detay-gizli { display: none; }

/* ---------- GÖLLER ----------
   Kullanıcı bildirimi: "göller yok haberin olsun".
   Göl = su yüzeyi; illerin ve adaların üstünde, denizle aynı mavi ailede
   ama daha koyu (tatlı su ayrımı) çizilir. */
#harita .kat-gol { pointer-events: none; }

#harita .goller-gizli { display: none; }

#harita .gol {
  fill: #9cc9de;
  fill-opacity: .92;
  stroke: #4a7d95;
  stroke-width: .45;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  pointer-events: auto;
  cursor: help;
  transition: fill-opacity .14s ease;
  /* nonzero: çok parçalı göllerde (Tuz 4, Uluabat 4, Akgöl 4) parçaların
     birbirine değdiği yerde delik açılmasın. evenodd olsaydı, üst üste binen
     iki parça birbirini "delik" gibi oyardı. */
  fill-rule: nonzero;
}

#harita .gol:hover { fill-opacity: 1; }

#harita .gol-yazi {
  fill: #1d485c;
  font-size: calc(9px * var(--yazi-olcek, 1));
  font-weight: 650;
  font-style: italic;
  letter-spacing: .3px;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .88);
  stroke-width: calc(2.4px * var(--yazi-olcek, 1));
  stroke-linejoin: round;
  opacity: .95;
}

/* ================= HARİTA ATLASI PANELİ =================
   45 harita türü seçilebilir panel. Haritanın üstünde ortalanır,
   mobilde tam ekrana yakın açılır. */
.atlas-kap {
  position: absolute;
  inset: 0;
  z-index: 40;
  background: rgba(23, 32, 28, .55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.atlas-kap[hidden] { display: none; }

.atlas-panel {
  width: min(1080px, 96vw);
  max-height: min(88vh, 780px);
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 24px 64px rgba(20, 40, 32, .32);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgba(47, 90, 70, .14);
}

.atlas-ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 12px;
  border-bottom: 1px solid rgba(47, 90, 70, .1);
}

.atlas-ust h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 700;
  color: #17342a;
}

.atlas-alt {
  margin: 3px 0 0;
  font-size: 12.5px;
  color: #5d7268;
}

.atlas-kapat {
  flex: none;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 9px;
  background: #f1f5f2;
  color: #43604f;
  font-size: 21px;
  line-height: 1;
  cursor: pointer;
  transition: background .14s ease;
}

.atlas-kapat:hover { background: #e2ece6; }

.atlas-arama { padding: 12px 20px; }

.atlas-arama input {
  width: 100%;
  padding: 10px 13px;
  border: 1px solid rgba(47, 90, 70, .2);
  border-radius: 10px;
  font-size: 14px;
  font-family: inherit;
  color: #17342a;
  background: #fbfdfc;
}

.atlas-arama input:focus {
  outline: 2px solid #3f8f68;
  outline-offset: 1px;
  border-color: transparent;
}

.atlas-govde {
  flex: 1;
  overflow-y: auto;
  padding: 4px 20px 20px;
  scrollbar-width: thin;
}

.atlas-kategori { margin-top: 16px; }

.atlas-kategori-baslik {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: #4c6357;
  margin: 0 0 9px;
}

.atlas-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 9px;
  /* Kartlar aynı yükseklikte dursun: açıklaması uzun olan kart satırı bozmasın */
  align-items: stretch;
  grid-auto-rows: 1fr;
}

.atlas-kart {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid rgba(47, 90, 70, .15);
  border-radius: 11px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .14s ease, box-shadow .14s ease, transform .12s ease;
}

.atlas-kart:hover {
  border-color: #3f8f68;
  box-shadow: 0 4px 14px rgba(47, 90, 70, .12);
  transform: translateY(-1px);
}

.atlas-kart.secili {
  border-color: #2f7f58;
  background: #f0f8f3;
  box-shadow: inset 0 0 0 1px #2f7f58;
}

.atlas-kart.beklemede { opacity: .62; cursor: not-allowed; }
.atlas-kart.beklemede:hover { transform: none; border-color: rgba(47, 90, 70, .15); box-shadow: none; }

.atlas-kart-ad {
  font-size: 13.5px;
  font-weight: 650;
  color: #17342a;
  line-height: 1.25;
}

.atlas-kart-aciklama {
  font-size: 11.5px;
  color: #5d7268;
  line-height: 1.35;
}

.atlas-rozet {
  align-self: flex-start;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  padding: 2px 6px;
  border-radius: 5px;
  text-transform: uppercase;
}

.atlas-rozet.hazir { background: #dff3e6; color: #1f6b43; }
.atlas-rozet.uretim { background: #fdf1dc; color: #8a5a12; }

.atlas-altlik {
  padding: 10px 20px;
  border-top: 1px solid rgba(47, 90, 70, .1);
  background: #fafcfb;
  font-size: 12.5px;
  color: #4c6357;
  min-height: 40px;
  display: flex;
  align-items: center;
}

.atlas-bos {
  padding: 32px 8px;
  text-align: center;
  color: #6b8478;
  font-size: 13.5px;
}

/* Atlas düğmesi: diğer katman düğmelerinden ayrışsın (birincil eylem) */
.katman-btn.atlas-btn {
  background: #2f7f58;
  color: #ffffff;
  border-color: #2f7f58;
  font-weight: 650;
}

.katman-btn.atlas-btn:hover { background: #276b4a; border-color: #276b4a; }

/* Galeri düğmesi — ayrı sayfaya (galeri.html) gider; görsel dil Atlas
   düğmesiyle aynı, ama bağlantı olduğu için alt çizgi yok. */
.katman-btn.galeri-btn {
  background: #8a5a2b;
  border-color: #8a5a2b;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.katman-btn.galeri-btn:hover { background: #71481f; border-color: #71481f; }

.katman-btn.galeri-btn:focus-visible {
  outline: 2px solid #8a5a2b;
  outline-offset: 2px;
}

/* ---------- VERİ KATMANI LEJANTI ----------
   Tematik harita boyandığında sol alt köşede renk basamağını gösterir. */
.veri-lejant {
  position: absolute;
  left: 12px;
  bottom: 56px;
  z-index: 12;
  background: rgba(255, 255, 255, .95);
  border: 1px solid rgba(47, 90, 70, .18);
  border-radius: 10px;
  padding: 9px 11px;
  box-shadow: 0 4px 16px rgba(20, 40, 32, .13);
  font-size: 11.5px;
  color: #29473a;
  max-width: 230px;
}

.veri-lejant[hidden] { display: none; }

.veri-lejant-baslik {
  font-weight: 700;
  font-size: 12px;
  margin-bottom: 6px;
  color: #17342a;
}

.veri-lejant-liste { display: flex; flex-direction: column; gap: 3px; }

.veri-lejant-satir {
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  /* Sayılar hizalı dursun: 277.226 ile 1.284.517 aynı sütunda biter */
  font-variant-numeric: tabular-nums;
}

.veri-lejant-renk {
  flex: none;
  width: 16px;
  height: 11px;
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, .1);
}

/* Atlas'ın yönettiği geçici gizleme sınıfları —
   katmanKontrol fonksiyonları bunları kullanır. */
#harita .iller-gizli { display: none; }
#harita .denizsiz { display: none; }
#harita .deniz-yazisiz .deniz-yazi { display: none; }
#harita .kusaksiz { display: none; }
#harita .ada-yazisiz .ada-yazi { display: none; }

/* ---------------- YÜKSEKLİK BOYAMA MODU ----------------
   NOT (2026-10-13): Bu mod eskiden "3D" düğmesiyle açılıyordu ve gerçek
   kabartmayla karışıyordu — düğme KALDIRILDI. Artık yalnız atlas türünden
   (Fiziki Yükselti / Kabartma Haritası) yönetilir; gerçek topoğrafya
   `arazi-modu`dur (aşağıda).

   Yöntem: her il kendi ağırlık merkezinden rakımına göre ölçeklenir ve
   yukarı kaydırılır (app.js: yukseklikBoyamaUygula). Yükseklik farkı böylece
   gerçekten görünür olur: Erzurum (1923 m) kabarır ve öne çıkar,
   Antalya (62 m) düz kalır. Gölge yönü hep aynı (güneş kuzeybatıdan)
   — ışık tutarlılığı haritayı okunur tutar.
   Transform + gölge kullanılır; SVG filtresi (feDropShadow) DEĞİL:
   filtre 81 path'te ağır çalışıyor ve ölçeklenirken bulanıklaşıyordu. */

/* 3D modda iller saydamlığını kaybeder: yükseklik farkı ancak dolu
   yüzeyde okunur. Kuşak katmanı altta kalır, "kabartma" hissi korunur. */
#harita.yukseklik-modu .il {
  fill-opacity: .82;
  transition: none;
}

/* Kabartma sıralaması: yüksek il ÖNE gelmeli (üstte çizilsin), yoksa
   komşusunun altında kalıp "çukur" gibi görünür. z-index SVG'de işlemez;
   app.js katman sırasını yeniden dizer. Burada yalnız gölge tanımlı. */
#harita.yukseklik-modu .il {
  filter: none;
}

/* Kıyı şeridi: 3D modda kenar çizgisi biraz koyulaşır — kabaran yüzeylerin
   rengi koyulaştığı için ince hat kaybolmasın. */
#harita.yukseklik-modu .il {
  stroke: #46584c;
  stroke-width: .7;
  vector-effect: non-scaling-stroke;
}

/* Seçili il 3D modda da parlar; gölgesini kaybetmez (öne çıkmış görünür). */
#harita.yukseklik-modu .il.secili {
  fill: url(#secili-parlak);
  fill-opacity: 1;
  stroke: #b45309;
  stroke-width: 1.2;
}

/* Seçili il (arazi kapalı): parlak degradeyle DOLDURMAK ilin bütün içini sarıya
   boyuyordu (kullanıcı: "seçim ışığı düzgün parlamıyor"). Işık artık gövde
   dolgusu değil, KENAR hattı: seçili il kalın sıcak hatla çevrilir. */
/* NUMEX-DÜZELTME (2026-10-13): Kullanıcı Kıyı/Denizler haritasında Isparta'yı
   seçtiğinde ışık soluk kaldı (fill-opacity .62 + zemin deniz mavisi olunca
   kayboluyor). Dolgu doygunluğu artırıldı ve kenar bir tık kalınlaştı —
   ışık artık zemin renginden bağımsız okunuyor. */
#harita:not(.arazi-modu):not(.yukseklik-modu) .il.secili {
  fill-opacity: .82;
  stroke: #92400e;
  stroke-width: 2.6;
  stroke-linejoin: round;
  filter: url(#il-kabartma);
}

#harita:not(.arazi-modu):not(.yukseklik-modu) .il.secili:hover {
  fill: url(#secili-parlak-hover);
  fill-opacity: .85;
  stroke: #92400e;
  stroke-width: 2.6;
}

/* ---------------- GERÇEK TOPOĞRAFİK KABARTMA ----------------
   DEM (SRTM) verisinden üretilen hillshade görüntüsü. İl sınırları ÜSTÜNDE
   kalır ama yarı saydamlaşır: arazi okunur, idari sınır da kaybolmaz.
   Ölçüldü: tam opak il dolgusu kabartmayı tamamen örtüyordu. */

#harita .kat-arazi {
  image-rendering: auto;
}

/* Kabartma modunda il dolgusu saydamlaşır, yalnız sınır çizgisi kalır. */
#harita.arazi-modu .il {
  fill-opacity: .16;
  stroke: #3f4a3f;
  stroke-width: .55;
  vector-effect: non-scaling-stroke;
}

/* Ekoloji kuşakları kabartmanın altında ezilmesin: kabartma açıkken
   kuşak katmanı iyice solar (arazi renkleri zaten hipsometrik). */
#harita.arazi-modu .kusak {
  opacity: .18;
}

/* Seçili il kabartma modunda yine belirgin olsun. */
#harita.arazi-modu .il.secili {
  fill: url(#secili-parlak);
  fill-opacity: .55;
  stroke: #b45309;
  stroke-width: 1.3;
}

/* NOT (2026-10-13): Burada `#harita .il-etiket.etiket-kapali { display:none }`
   kuralı vardı; artık GEREKSİZ — yazı-bazlı gizleme kaldırıldı (app.js:904).
   Katman grubu gizlemesi tek yol: `#harita .etiket-gizli` (yukarıda). */

/* Kabartma düğmesi vurgusu — 3D'den farklı renk: yeşil-kahve (arazi) */
.katman-btn#katman-arazi.aktif {
  background: linear-gradient(180deg, #4a6741, #35492e);
  border-color: #2a3a25;
  color: #f0f7ea;
}

@media (max-width: 640px) {
  .atlas-kap { padding: 0; }
  .atlas-panel { width: 100%; max-height: 100%; border-radius: 0; height: 100%; }
  .atlas-izgara { grid-template-columns: 1fr; }
  .atlas-ust { padding: 14px 16px 10px; }
  .atlas-arama, .atlas-govde { padding-left: 16px; padding-right: 16px; }
}

/* Ada adı: noktanın üstünde, kara üzerinde bile okunur kalmalı */
#harita .ada-yazi {
  fill: #2b4a3f;
  /* Ölçüm: 8px çok küçüktü (sayfada 10px altı 149 öğe çıkıyordu).
     10px + kalın beyaz dış çizgi ile ada adları artık okunur. */
  font-size: calc(10px * var(--yazi-olcek, 1));
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: calc(2.5px * var(--yazi-olcek, 1));
  stroke-linejoin: round;
  letter-spacing: .2px;
  opacity: .92;
}

/* İlçe sınırları: seçili ilin iç bölünmesi. İnce kesikli hat —
   il sınırlarıyla karışmasın (il = düz çizgi, ilçe = kesikli ince). */
#harita .kat-ilce { pointer-events: none; }

#harita .ilceler-gizli { display: none; }

#harita .ilce-sinir {
  fill: none;
  stroke: #7c2d12;
  /* Kalınlık: %100 zoom'da da görünsün diye 1.4 (önce .7 çok inceydi) */
  stroke-width: 1.4;
  stroke-dasharray: 3.5 2.2;
  stroke-linejoin: round;
  opacity: .85;
  vector-effect: non-scaling-stroke;
  pointer-events: stroke;
}

/* İlçe sınırları seçili ilin sınırıyla KIRPILIR — taşma olmasın diye.
   Kırpma burada DEĞİL, app.js:1023'te her ilçe path'ine ayrı uygulanır:
   kat-ilce grubu transform taşıyan #harita-kok içinde, maske ise defs'te
   ölçeklenmemiş koordinatlarda durur → CSS katman kuralı kayıyordu (ölçüldü). */

#harita .kat-ilce:hover .ilce-sinir { opacity: .5; }
#harita .ilce-sinir:hover { opacity: 1; stroke-width: 1.6; stroke-dasharray: none; }

/* İller: kuşağın rengi alttan görünsün diye yarı saydam + kağıt dokusu */
#harita .il {
  fill: #ffffff;
  fill-opacity: .38;
  stroke: #5f7064;
  stroke-width: .55;
  stroke-linejoin: round;
  cursor: pointer;
  transition: fill-opacity .14s ease, stroke .14s ease, fill .14s ease;
  vector-effect: non-scaling-stroke;
}

/* Hover: il hafifçe aydınlanır, ince sıcak hat — kalın çerçeve yok */
#harita .il:hover {
  fill: #fbbf24;
  fill-opacity: .58;
  stroke: #b45309;
  stroke-width: .9;
}

/* Seçili il: içten aydınlanır, haritadan yükselir. Kalın çerçeve YOK. */
#harita .il.secili {
  fill: url(#secili-parlak);
  fill-opacity: 1;
  stroke: #b45309;
  stroke-width: 1;
  filter: url(#il-kabartma);
}

#harita .il.secili:hover {
  fill: url(#secili-parlak-hover);
  stroke: #92400e;
  stroke-width: 1.3;
}

/* Seçili ilin iç ışık yansıması (radyal degrade, SVG defs'ta tanımlı) */

/* Odak halkası: tarayıcının varsayılan kalın çerçevesi yerine ince, şık bir hat */
#harita .il:focus { outline: none; }

#harita .il:focus-visible {
  outline: none;
  stroke: #1d4ed8;
  stroke-width: 1.6;
  stroke-dasharray: 3 2;
}

#harita .il.soluk { opacity: .12; }

#harita .il.ara-vurgu {
  fill: #fbbf24;
  fill-opacity: .9;
  stroke: #78350f;
  stroke-width: 1.4;
}

#harita .il:focus-visible {
  outline: none;
  stroke: #1c2a22;
  stroke-width: 2;
}

/* İl etiketi — font-size calc ile ÖLÇEĞE BÖLÜNÜR: yakınlaştırınca yazı
   ekranda sabit kalır (yoksa %800'de ekranı kaplıyordu, ölçüldü).
   NUMEX-DÜZELTME (2026-10-12): 7.5px idi — "125 öğe 10px altı" bulgusunun
   baş kaynağı (81 il etiketi). 10px'e çıkarıldı; yanına çakışma filtresi
   eklendiği için (app.js ilEtiketiCiz) yazılar birbirine girmiyor. */
#harita .il-etiket {
  fill: #1c2a22;
  font-size: calc(10px * var(--yazi-olcek, 1));
  font-weight: 700;
  text-anchor: middle;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: calc(2.6px * var(--yazi-olcek, 1));
  stroke-linejoin: round;
}

/* İlçe adı — aynı mantık: zoom'da sabit boyut.
   NUMEX-DÜZELTME (2026-10-12): 6.2px haritadaki EN KÜÇÜK yazıydı (denetim:
   125 öğe 10px altı). 9px'e çıkarıldı — il etiketinden küçük kaldı ki
   il/ilçe hiyerarşisi korunsun, ama artık okunur. */
#harita .ilce-yazi {
  fill: #7c2d12;
  font-size: calc(9px * var(--yazi-olcek, 1));
  font-weight: 700;
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 255, 255, .95);
  stroke-width: calc(2.2px * var(--yazi-olcek, 1));
  stroke-linejoin: round;
  letter-spacing: .1px;
}

/* Katman grubu gizleme (tüm il adları) — "Etiket" düğmesi için */
#harita .etiket-gizli { display: none; }


/* ---------------- İL BİLGİ KARTI (hover) ---------------- */

.il-kart {
  position: absolute;
  pointer-events: none;
  z-index: 25;
  min-width: 190px;
  max-width: 260px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid var(--panel-cizgi-koyu);
  border-radius: 11px;
  box-shadow: var(--golge-kart);
  padding: 11px 13px;
  transform: translate(-50%, calc(-100% - 14px));
}

.il-kart .k-ad {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 7px;
  padding-bottom: 7px;
  border-bottom: 1px solid #e6ece8;
}

.il-kart .k-plaka {
  font-size: .7rem;
  font-weight: 700;
  color: #fff;
  background: var(--yesil);
  border-radius: 4px;
  padding: 2px 6px;
  font-variant-numeric: tabular-nums;
}

.il-kart .k-isim {
  font-size: 1.02rem;
  font-weight: 700;
  color: #16241c;
}

.il-kart .k-satir {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: .78rem;
  line-height: 1.7;
}

.il-kart .k-etiket { color: var(--metin-soluk); }
.il-kart .k-deger { font-weight: 600; color: #22322a; text-align: right; }

.il-kart .k-kusak {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid #e6ece8;
  font-size: .74rem;
  color: var(--metin-orta);
}

.il-kart .k-renk {
  width: 11px; height: 11px;
  border-radius: 3px;
  flex: none;
  border: 1px solid rgba(0, 0, 0, .18);
}

/* ---------------- LEJANT ---------------- */

.lejant {
  position: absolute;
  top: 12px;
  right: 12px;
  z-index: 15;
  width: 218px;
  max-width: 40%;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(4px);
  border: 1px solid var(--panel-cizgi-koyu);
  border-radius: 11px;
  box-shadow: var(--golge);
  overflow: hidden;
  /* Haritayı gereksiz kapatmasın: kapalıyken sadece başlık şeridi kalsın */
  transition: box-shadow .2s;
}

/* Lejant başlığı: haritayı kapatmasın diye ince şerit + "çıkart" görünümü */
.lejant-baslik:hover { background: #e9f2ec; }

/* Lejant katlanabilir: kapalıyken sadece ince şerit kalır (harita tam görünür) */
.lejant.kapali {
  width: auto;
  background: rgba(255, 255, 255, 0.88);
}
.lejant.kapali .lejant-baslik {
  border-bottom: none;
  border-radius: 11px;
  padding: 8px 12px;
}

.lejant-baslik {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 11px;
  border: none;
  background: #f4f8f5;
  border-bottom: 1px solid var(--panel-cizgi);
  font-family: inherit;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--metin-orta);
  cursor: pointer;
}

.lejant-baslik .ok { transition: transform .2s; }
.lejant.kapali .lejant-baslik .ok { transform: rotate(-90deg); }
.lejant.kapali .lejant-liste { display: none; }

.lejant-liste {
  list-style: none;
  margin: 0;
  padding: 6px;
  max-height: 40vh;
  overflow-y: auto;
}

.lejant-liste li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 5px 6px;
  border-radius: 6px;
  font-size: .74rem;
  color: var(--metin-orta);
  line-height: 1.4;
}

.lejant-liste li:hover { background: #f1f6f2; }

.lejant-renk {
  width: 13px; height: 13px;
  border-radius: 3px;
  flex: none;
  margin-top: 1px;
  border: 1px solid rgba(0, 0, 0, .2);
}

.lejant-ad { font-weight: 600; color: #22322a; }
.lejant-adet { font-size: .68rem; color: var(--metin-soluk); }

/* ---------------- KILAVUZ ---------------- */

.kilavuz {
  position: absolute;
  left: 12px;
  bottom: 12px;
  display: flex;
  gap: 13px;
  flex-wrap: wrap;
  font-size: .72rem;
  color: var(--metin-orta);
  background: rgba(255, 255, 255, .93);
  border: 1px solid var(--panel-cizgi);
  border-radius: 8px;
  padding: 7px 11px;
  pointer-events: none;
}

kbd {
  background: #f0f5f1;
  border: 1px solid var(--panel-cizgi-koyu);
  border-bottom-width: 2px;
  border-radius: 5px;
  padding: 1px 6px;
  font-size: .7rem;
  color: var(--vurgu);
  font-weight: 600;
  font-family: inherit;
}


/* ---------------- YAN PANEL ---------------- */

/* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "yaptığın haritaya zarar verdi
   sanki" dedi. Kök neden: sağ paneli 300px'e indirip il listesini TEK
   kolona düşürmüştüm; liste 81 satıra uzayıp panel dengesini bozdu ve
   araya sıkıştırılan bu blok, aşağıdaki asıl .il-listesi kuralını
   (iki kolon) gölgeliyordu. Panel küçültme geri alındı: genişlik 360px,
   liste yeniden İKİ KOLON. Satır ölçüleri asıl kurallardan (aşağıda)
   okunur — buradan EZİLMESİN diye bu blok boşaltıldı. */

/* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "bu yazılar sabit görünecek,
   tekerlek olmayacak" dedi. Kök neden: künye kutusu (max-height:92px +
   overflow-y:auto) kendi içinde kayıyordu; 5 veri satırının yalnız ilk
   1.5'i görünüyor, gerisi tekerlekle geliyordu. Çare: künye kompakt tek
   satır/satır düzenine indi, yükseklik sınırı ve kaydırma kaldırıldı —
   5 satırın tamamı sabit ve birlikte görünür. Panel KAYDIRMAZ kalır;
   yalnız il listesi kendi içinde kayar. */
.yan-panel {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding-right: 2px;
  /* NUMEX-DÜZELTME (2026-10-13): İl seçilince üstteki seçim kartı büyüyor;
     tarayıcının scroll-anchoring'i bu büyümeyi "kaydırma" sanıp paneli
     aşağı oynatabiliyordu. Panelin kendisi kaydırmadığı için anchoring
     kapatıldı — seçim yapmak panel konumunu değiştirmez. */
  overflow-anchor: none;
}

/* Künye panelin dibinde SABİT: kaydırma alanının dışında, flex ile dibe
   yapışır (flex:none + margin-top:auto). Panel içeriği taşarsa yalnız
   liste kayar, künye yerinden oynamaz. */
.yan-panel > .alt-not {
  flex: 0 0 auto;
  margin-top: auto;
  /* NUMEX-DÜZELTME (2026-10-13): Künye panel dibinde sabitken max-height:42vh ile ekranın yarısını kaplıyor, il listesine yalnız ~2 satır (4 il) kalıyordu. Sınır 168px'e çekildi ve kendi içinde kaydırılabilir yapıldı: künye her zaman görünür kalır, içerik kaybolmaz, liste 81 ili kaydırarak gösterecek yeri bulur. */
  /* Künye sabit ama ekranı yemesin: kendi içinde kayar, yüksekliği
     sınırlıdır. 42vh → 2 satıra düşüren buydu; 168px ile künye
     okunur kalır, il listesine ferah yer açılır. */
  /* NUMEX-DÜZELTME (2026-10-13): İmza şeridi künyenin dışına taşındıktan
     sonra ölçüm 1366x768'de panelin 282px taştığını ve "powered by numexai"
     imzasının ekran dışında kaldığını gösterdi. Künye kutusu 168px → 104px'e
     indirildi (içeriği kendi içinde kayar, kaybolmaz) ki panel dibindeki
     imza şeridine ve il listesine yer kalsın. */
  /* NUMEX-DÜZELTME (2026-10-13): Künyede kaydırma YOK. Yükseklik sınırı ve
     overflow kaldırıldı; künye doğal yüksekliğinde durur ve 5 satırın
     tamamı birlikte görünür. Yer kazanmak için satırlar sıkılaştırıldı. */
  /* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "ile tıklayınca aşağı kayıyor"
     dedi. Kök neden: .secili-kart flex:none ile KÜÇÜLEMİYOR; bir il
     seçilince kart ~40px'ten ~250px'e çıkıyor, .liste-kap min-height:140px
     tabanı da küçülmeye izin vermiyordu. Toplam yükseklik paneli aşınca flex
     dağıtımı ALTTAN kırpıyor: künye ve imza şeridi aşağı itilip ekrandan
     kayıyordu (kullanıcının gördüğü "aşağı kayma"). Çare: künye taşma
     tamponu olmaktan çıkarıldı (flex: 0 1 auto + min-height:0) — kart
     büyürse önce künye değil, sıralı olarak alt blok kısalır. */
  max-height: none;
  overflow: visible;
  border-bottom: 0;
  /* Kırpılamaz: taşma payı esnek liste kabından karşılanır (bkz. .liste-kap) */
  flex: 0 0 auto;
}

/* Liste kabı panelde kalan yeri kaplar, içeriği kendi içinde kaydırır.
   Künye panele sabitlendiği için bu kabın KÜÇÜLEBİLMESİ gerekir; aksi
   hâlde min-height tabanı künyeyi ekrandan aşağı iter. */
.liste-kap {
  flex: 1 1 auto;
  /* Taban: künye 104px'e indi, imza şeridi panele eklendi. 768px yükseklikte
     hepsinin sığması için liste tabanı 140px — liste zaten kendi içinde
     kaydırmalı, 81 il bu alanda gezilebilir. */
  /* NUMEX-DÜZELTME (2026-10-13): Kullanıcı "ile tıklayınca aşağı kayıyor"
     dedi. Ölçüm: panelin doğal yüksekliği (seçim kartı + ilçeler + istatistik
     + filtreler + liste + künye + imza) 768px'i aşıyor; .yan-panel
     overflow:hidden ile taşanı EN ALTTAN kırpıyordu. Bir il seçilince kart
     büyüyüp ilçe kutusu da açılınca taşma büyüyor, künye ve imza şeridi
     ekrandan aşağı kayıyordu. Çare: liste kabı panelin ESNEK tek parçası olur
     (flex:1 1 auto + min-height:0) — taşma payı önce buradan karşılanır, 81 il
     zaten kendi içinde kaydırmalı gezdirilir; künye/imza ise flex:0 0 auto ile
     kırpılamaz kalır. Kart büyüdüğünde küçülen KÜNYE değil, LİSTE olur. */
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

  .liste-kap .il-listesi {
  flex: 1 1 auto;
  min-height: 0;             /* taşma kökü: min-height:0 olmadan flex küçülmüyordu */
  overflow-y: auto;
  overflow-x: hidden;
}

.yan-panel::-webkit-scrollbar { width: 8px; }
.yan-panel::-webkit-scrollbar-thumb { background: #c8d5cb; border-radius: 4px; }
.yan-panel::-webkit-scrollbar-thumb:hover { background: #aebfb3; }

.secili-kart,
.ilce-kutu,
.istatistik,
.filtre-grubu,
.liste-kap {
  background: var(--panel);
  border: 1px solid var(--panel-cizgi);
  border-radius: var(--kose);
  box-shadow: var(--golge);
}

.secili-kart { padding: 11px 12px; flex: none; }

.kart-ust { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

.secili-kart h2 {
  margin: 0;
  font-size: 1.06rem;
  color: #16241c;
  font-weight: 700;
  min-height: 1.35em;
}

.plaka-rozet {
  font-size: .68rem;
  font-weight: 700;
  color: #fff;
  background: var(--yesil);
  border-radius: 5px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
  flex: none;
}

.secili-alt {
  margin: 4px 0 0;
  font-size: .73rem;
  color: var(--metin-soluk);
  line-height: 1.4;
}

.secili-bilgi {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px 10px;
  margin: 8px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--panel-cizgi);
}

/* NUMEX-DÜZELTME (2026-10-13): Kök neden — .secili-bilgi ve .rozet-satir
   HTML'de hidden olsa da display:grid/flex [hidden]'ı eziyordu; il
   seçilmeden boş ızgara panelde ~100px yer yiyip imzayı ekrandan itiyordu.
   Genel [hidden] kuralı geri eklendi. */
[hidden] { display: none !important; }

.secili-bilgi > div { min-width: 0; }

.secili-bilgi dt {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: var(--metin-soluk);
  font-weight: 600;
}

.secili-bilgi dd {
  margin: 1px 0 0;
  font-size: .8rem;
  color: #16241c;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
}

.rozet-satir {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
  padding-top: 7px;
  border-top: 1px solid var(--panel-cizgi);
}

.rozet {
  font-size: .65rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  background: #e6f2e9;
  color: #22603a;
  border: 1px solid #c3e0cc;
}

/* İlçe kutusu */
.ilce-kutu {
  padding: 0;
  overflow: hidden;
  flex: none;
  display: flex;
  flex-direction: column;
}

.ilce-kutu[hidden] { display: none; }

.ilce-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  border-bottom: 1px solid var(--panel-cizgi);
  background: #f7faf8;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .6px;
  text-transform: uppercase;
  color: var(--metin-orta);
}

.ilce-listesi {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 9px;
  max-height: 132px;
  overflow-y: auto;
}

.ilce-listesi.acik { max-height: 320px; }

.ilce-listesi::-webkit-scrollbar { width: 7px; }
.ilce-listesi::-webkit-scrollbar-thumb { background: #c8d5cb; border-radius: 4px; }

.ilce-cip {
  font-size: .72rem;
  padding: 4px 8px;
  border-radius: 6px;
  background: #f0f5f1;
  border: 1px solid #dbe6de;
  color: var(--metin-orta);
  white-space: nowrap;
}

.ilce-cip .n { color: var(--metin-soluk); font-size: .66rem; }

/* İstatistik */
.istatistik {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding: 7px 6px;
  text-align: center;
  flex: none;
}

.ist-kutu { display: flex; flex-direction: column; gap: 2px; }
.ist-kutu + .ist-kutu { border-left: 1px solid var(--panel-cizgi); }

.ist-sayi {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--yesil);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.ist-etiket {
  font-size: .6rem;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--metin-soluk);
  font-weight: 600;
}

/* Filtreler */
.filtre-grubu {
  padding: 7px 11px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: none;
}

.filtre-grubu label {
  font-size: .63rem;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--metin-soluk);
  font-weight: 600;
}

.filtre-grubu input,
.filtre-grubu select {
  width: 100%;
  padding: 6px 10px;
  min-height: 36px;
  background: #fbfdfc;
  border: 1px solid var(--panel-cizgi-koyu);
  border-radius: 9px;
  color: var(--metin);
  font-size: .82rem;
  font-family: inherit;
  transition: border-color .15s, box-shadow .15s;
}

.filtre-grubu input:focus,
.filtre-grubu select:focus {
  outline: none;
  border-color: var(--yesil);
  box-shadow: 0 0 0 3px rgba(47, 125, 79, .13);
}

.filtre-grubu input::placeholder { color: #9fb0a5; }


/* Liste — panelde KALAN yeri kaplar ve İÇİNDE kaydırır.
   Taşma kökü: flex-basis 170px verilince panel içeriği viewport'tan
   uzun olduğunda kutu küçülmüyordu; min-height:0 + basis:auto ile düzeldi. */
.liste-kap {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 140px;
  overflow: hidden;
}

.liste-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 12px;
  border-bottom: 1px solid var(--panel-cizgi);
  font-size: .66rem;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--metin-orta);
  font-weight: 700;
  background: #f7faf8;
}

.baglanti-btn {
  background: none;
  border: none;
  color: var(--yesil);
  font-size: .72rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: 6px;
  min-height: 32px;
  text-transform: none;
  letter-spacing: 0;
  transition: background .15s;
}

.baglanti-btn:hover { background: #e6f2e9; }
.baglanti-btn:focus-visible { outline: 2px solid var(--yesil); outline-offset: 1px; }

.il-listesi {
  list-style: none;
  margin: 0;
  padding: 6px;
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  align-content: start;
}

.il-listesi::-webkit-scrollbar { width: 7px; }
.il-listesi::-webkit-scrollbar-thumb { background: #c8d5cb; border-radius: 4px; }
.il-listesi::-webkit-scrollbar-thumb:hover { background: #aebfb3; }

.il-listesi li { min-width: 0; }

.il-ogesi {
  width: 100%;
  min-height: 32px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--metin);
  font-family: inherit;
  /* Okunabilirlik: 10px altı kabul edilmez (akıllı tahtada uzaktan okunmalı) */
  font-size: .78rem;
  text-align: left;
  cursor: pointer;
  transition: background .13s, border-color .13s;
}

.il-ogesi:hover { background: #f0f5f1; border-color: var(--panel-cizgi); }
.il-ogesi:focus-visible { outline: 2px solid var(--yesil); outline-offset: 1px; }

.il-ogesi.secili {
  background: #fef3c7;
  border-color: var(--secili);
  color: #78350f;
  font-weight: 700;
}

.il-plaka {
  flex: none;
  min-width: 26px;
  text-align: center;
  font-size: .72rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--metin-soluk);
  background: #eef3ef;
  border-radius: 5px;
  padding: 2px 4px;
}

.il-ogesi.secili .il-plaka { color: #fff; background: var(--secili); }

.il-ad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bos-uyari {
  grid-column: 1 / -1;
  padding: 18px 10px;
  text-align: center;
  font-size: .8rem;
  color: var(--metin-soluk);
}

/* NUMEX-DÜZELTME (2026-10-13): index.html'e eklenen veri künyesi/footer bloğunun 10 CSS sınıfı tanımsızdı (HTML/CSS tutarlılık uyarısı); ayrıca erişilebilirlik ölçümünün "23 öğede 10px'ten küçük yazı" bulgusunun baş kaynağı olan .66rem (10.5px) taban yazı boyu okunabilir en küçük boya çekildi. */
/* NUMEX-DÜZELTME (2026-10-13): Erişilebilirlik ölçümü 23 öğede 10px'in altında
   yazı buldu; bu bloktaki .66rem (10.5px) onların baş kaynağıydı. Okunabilir
   en küçük boya çekildi ve künye bloğu eklenince yapı genişledi. */
.alt-not {
  /* NUMEX-DÜZELTME (2026-10-13): Künye kompaktlaştırıldı — kaydırma olmadan
     5 satır sığsın diye yazı .66rem, satır aralığı 1.34, iç boşluk 5px. */
  font-size: .66rem;
  color: var(--metin-soluk);
  text-align: left;
  line-height: 1.34;
  padding: 5px 6px 4px;
  flex: none;
  border-top: 1px solid var(--panel-cizgi);
  margin-top: 3px;
}

/* ---- Veri künyesi (alt bilgi) ---- */
.kunye-baslik {
  margin: 0 0 4px;
  font-size: .66rem;
  line-height: 1.36;
}

.kunye-baslik strong {
  color: var(--metin);
  font-weight: 700;
}

.kunye-baslik a,
.kunye-liste a {
  color: #1d4ed8;
  text-decoration: none;
  border-bottom: 1px solid rgba(29, 78, 216, .35);
}

.kunye-baslik a:hover,
.kunye-liste a:hover {
  border-bottom-color: #1d4ed8;
}

/* NUMEX-DÜZELTME (2026-10-13): Liste her satırda etiket + değer tek satırda
   akar (önce iki sütunlu ızgaraydı; uzun değerler alt satıra taşıp
   yüksekliği şişiriyordu). Satır sayısı 5'te sabit, kaydırma gerekmez. */
.kunye-liste {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: grid;
  gap: 2px;
  font-size: .65rem;
}

.kunye-liste li {
  display: block;
  line-height: 1.34;
}

.kunye-liste li > span {
  font-weight: 600;
  color: var(--metin);
  white-space: nowrap;
}

.kunye-not {
  margin: 0;
  font-size: .64rem;
  font-style: italic;
  line-height: 1.34;
  opacity: .85;
}

/* ---- Numex imzası (panel dibinde sabit, ortada, tıklanabilir) ----
   NUMEX-DÜZELTME (2026-10-13): Kullanıcı "powered by ı ve evreni orta alta
   boşluk var oraya al" dedi. Kök neden: imza satırı .alt-not (kaydırılabilir
   künye kutusu) içindeydi; künye yüksekliği sınırlı olduğu için imza
   kaydırma alanının dibinde kalıyor, ekranda görünmüyordu. İmza artık
   künyenin dışında, panelin DİBİNDE sabit ayrı bir şerit: her zaman
   görünür, tam ortalanmış ve tıklanabilir. */
.panel-imza {
  /* Kırpılamaz: panel taşarsa önce liste kısalır, imza yerinde kalır. */
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 6px 0;
  border-top: 1px dashed var(--panel-cizgi);
}

.numex-baglanti {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  background: linear-gradient(180deg, #0e6b8a, #0b5570);
  color: #fff;
  text-decoration: none;
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .2px;
  box-shadow: 0 1px 3px rgba(11, 85, 112, .28);
  transition: transform .14s ease, box-shadow .14s ease;
}

/* NUMEX-DÜZELTME (2026-10-13): Kullanıcı bildirimi "sağ panelde mouse hareketi
   olmasın". Kök neden: bu rozet hover'da translateY(-1px) ile yukarı kayıyordu;
   künye bloğunun en altındaki eleman olduğu için fare üzerine gelince imza
   zıplıyor, gözü rahatsız ediyordu. Hareket kaldırıldı; hover yalnız gölgeyle
   belirtilir (görsel geri bildirim korunur, sayfa oynamaz). */
.numex-baglanti:hover {
  box-shadow: 0 3px 8px rgba(11, 85, 112, .34);
}

.numex-baglanti strong {
  font-weight: 800;
  letter-spacing: .3px;
}

.numex-isaret {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #7cc36b;
  box-shadow: 0 0 0 2px rgba(124, 195, 107, .3);
  flex: none;
}

.kunye-ayrac {
  color: var(--metin-soluk);
  opacity: .6;
}

.evren-baglanti {
  font-size: .72rem;
  color: var(--metin-soluk);
  text-decoration: none;
  border-bottom: 1px dotted currentColor;
}

.evren-baglanti:hover {
  color: var(--metin);
}

.kunye-alt-satir {
  flex: 0 0 auto;
  margin: 0 0 1px;
  text-align: center;
  font-size: .65rem;
  opacity: .7;
  letter-spacing: .2px;
}


/* ---------------- PAYLAŞ BUTONU ---------------- */

.paylas-btn {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 600;
  font-family: inherit;
  color: #1d4ed8;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 20px;
  padding: 4px 11px;
  min-height: 30px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}

.paylas-btn:hover { background: #e0e7ff; border-color: #a5b4fc; }
.paylas-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 1px; }
.paylas-btn.kopyalandi {
  color: #15803d;
  background: #dcfce7;
  border-color: #86efac;
}


/* ---------------- KARŞILAŞTIRMA ---------------- */

.karsilastirma {
  background: var(--panel);
  border: 1px solid var(--panel-cizgi);
  border-radius: var(--kose);
  box-shadow: var(--golge);
  overflow: hidden;
  flex: none;
}

.kars-baslik {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 13px;
  border-bottom: 1px solid var(--panel-cizgi);
  background: linear-gradient(180deg, #fbfdfb, #f4f8f5);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .7px;
  text-transform: uppercase;
  color: var(--metin-orta);
}

.kars-tablo-kap {
  overflow-x: auto;
  scrollbar-width: thin;
}
.kars-tablo-kap::-webkit-scrollbar { height: 7px; }
.kars-tablo-kap::-webkit-scrollbar-thumb { background: #c8d5cb; border-radius: 4px; }

.kars-tablo {
  width: 100%;
  border-collapse: collapse;
  font-size: .7rem;
  /* 4 il de eşit genişlikte sığsın (taşma kökü: table-layout auto) */
  table-layout: fixed;
}

.kars-tablo th,
.kars-tablo td {
  padding: 6px 5px;
  text-align: left;
  border-bottom: 1px solid #eef3f0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kars-tablo thead th:first-child,
.kars-tablo tbody th:first-child { width: 58px; }

.kars-tablo thead th {
  font-size: .64rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--metin-soluk);
  background: #f7faf8;
  padding: 6px 9px;
  font-weight: 700;
}

.kars-tablo thead th.siralanabilir {
  cursor: pointer;
  user-select: none;
}
.kars-tablo thead th.siralanabilir:hover { background: #eef4f0; color: var(--yesil); }

.kars-tablo .sira-ok { font-size: .6rem; opacity: .55; margin-left: 3px; }

.kars-tablo tbody th {
  font-weight: 600;
  color: var(--metin-orta);
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.kars-tablo tbody td {
  font-variant-numeric: tabular-nums;
  font-weight: 600;
  color: #16241c;
}

/* En yüksek değer vurgusu — öğretmen "hangisi büyük" diye sorunca göze çarpsın */
.kars-tablo td.en-yuksek {
  background: #fef9e7;
  color: #92400e;
}

.kars-not {
  margin: 0;
  padding: 7px 12px 9px;
  font-size: .64rem;
  color: var(--metin-soluk);
  border-top: 1px solid #eef3f0;
}


/* ---------------- RESPONSIVE ----------------
   Kademeler:
     ≥2400px  ultra geniş / 4K monitör + TV
     ≥1800px  akıllı tahta (etkileşimli tahta) + büyük monitör
     ≥1400px  masaüstü
     1180px   küçük dizüstü
     1080px   tablet yatay  → tek kolon
     700px    tablet dikey / telefon yatay
     400px    küçük telefon
   Yalnız max-width ile KÜÇÜLMEK yetmiyordu: akıllı tahtada (1920×1080
   veya 3840×2160) arayüz sol üstte minicik kalıyor, öğretmen uzaktan
   okuyamıyordu ("ekrana sığmıyor" şikâyeti). Büyük ekranlarda punto,
   boşluk ve kolon genişliği ORANLI büyür. */

/* --- Akıllı tahta ve büyük monitör: uzaktan okunur punto --- */
@media (min-width: 1800px) {
  .uygulama {
    grid-template-columns: minmax(0, 1fr) 420px;
    gap: 20px;
    padding: 20px;
    max-width: 2300px;
  }
  .harita-baslik h1 { font-size: 1.5rem; }
  .alt-yazi { font-size: .92rem; }
  .katman-btn { padding: 0 14px; font-size: .88rem; }
  .zoom-grubu button { width: 44px; height: 44px; font-size: 1.3rem; }
  .olcu-gostergesi { font-size: .88rem; }
  .secili-kart h2 { font-size: 1.5rem; }
  .secili-bilgi dd { font-size: 1.02rem; }
  /* NUMEX-DÜZELTME (2026-10-13): Geniş ekranda panel 380px'e inince iki
     kolon sıkışıyordu; tek kolon korunur, punto büyür. */
  .il-listesi { grid-template-columns: 1fr; }
  .il-ogesi { min-height: 38px; font-size: .86rem; }
}

/* --- 4K / TV: tahtadan da büyük, satırlar sonsuza uzamasın --- */
@media (min-width: 2400px) {
  .uygulama {
    grid-template-columns: minmax(0, 1fr) 520px;
    gap: 26px;
    padding: 26px;
    max-width: 2800px;
  }
  .harita-baslik h1 { font-size: 1.75rem; }
  .alt-yazi { font-size: 1rem; }
  .katman-btn { padding: 0 17px; font-size: .96rem; }
  .zoom-grubu button { width: 50px; height: 50px; font-size: 1.45rem; }
  .tam-ekran-btn { width: 50px; height: 50px; font-size: 1.3rem; }
  .olcu-gostergesi { font-size: .96rem; padding: 13px 9px; }
  .secili-kart h2 { font-size: 1.7rem; }
  .secili-kart { padding: 22px; }
  .secili-bilgi dt { font-size: .82rem; }
  .secili-bilgi dd { font-size: 1.12rem; }
  .liste-baslik { font-size: 1.02rem; }
  .il-plaka { font-size: .9rem; }
  .il-listesi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ist-sayi { font-size: 1.9rem; }
  .veri-lejant { font-size: .95rem; max-width: 300px; }
  .kilavuz { font-size: .82rem; padding: 9px 13px; }
}

/* --- Yatay telefon / kısa ekran: yükseklikten kazan --- */
@media (max-height: 520px) and (min-width: 701px) {
  .uygulama {
    height: auto;
    max-height: none;
    min-height: 100vh;
    padding: 8px;
    gap: 8px;
    overflow: visible;
  }
  .uygulama > * { max-height: none; }
  .harita-panel { height: auto; }
  .yan-panel { height: auto; max-height: none; overflow: visible; }
  .harita-baslik { padding: 6px 10px; }
  .harita-baslik h1 { font-size: .95rem; }
  .alt-yazi { display: none; }
  .harita-kap { height: 84vh; min-height: 260px; }
  .lejant-liste { max-height: 34vh; }
  .kilavuz { display: none; }
}

/* --- Çok kısa ekran (yatay telefon, tarayıcı çubuğu açık) --- */
@media (max-height: 420px) {
  .harita-kap { height: 88vh; min-height: 220px; }
  .araclar { gap: 4px; }
  .katman-btn { padding: 0 6px; font-size: .68rem; }
}

@media (max-width: 1180px) {
  /* NUMEX-DÜZELTME (2026-10-13): Panel küçültmesi geri alındı (280px → 320px). */
  .uygulama { grid-template-columns: minmax(0, 1fr) 320px; }
}

@media (max-width: 1080px) {
  .uygulama {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    height: auto;
    max-height: none;
    min-height: 100vh;
    padding: 12px;
    gap: 12px;
    overflow: visible;
  }
  .uygulama > * { max-height: none; }

  /* Mobil/tablette ÖNCE harita gelir (panel değil) */
  .harita-panel { height: auto; order: 1; }
  .yan-panel   { height: auto; max-height: none; overflow: visible; order: 2; }

  .harita-kap { height: 62vh; min-height: 360px; }
  .liste-kap { max-height: 420px; flex: none; min-height: 0; }
  .lejant { width: 200px; }
}

@media (max-width: 700px) {
  .uygulama { padding: 9px; gap: 9px; }

  /* Kök neden (ölçüldü 390×844): .harita-baslik bir FLEX kapsayıcı; .araclar
     orada bir flex ÖĞESİ olduğu için "flex-direction: column" ona alta
     inme yetkisi vermiyordu — yan tarafta sıkışıp katman şeridi ile zoom
     düğmeleri üst üste biniyor, "Atlas" ve "3D" sağa taşıp kayboluyordu.
     Çözüm: başlık satırını mobilde DİKEY YIĞINA çevir — marka üstte,
     araçlar altta TAM GENİŞLİK. */
  .harita-baslik {
    flex-direction: column;
    align-items: stretch;
    padding: 9px 11px;
    gap: 8px;
  }
  .harita-baslik h1 { font-size: 1rem; }
  .alt-yazi { font-size: .68rem; }

  /* Ölçüldü (2026-10-13, 390×844): 3D düğmesi eklenince araç şeridi sağa
     taştı — "3D" ve "Atlas" yarım kesiliyordu; şeridi kaydırılabilir
     yapmak kesilmeyi önledi ama zoom düğmeleri katman düğmeleriyle aynı
     satırda sıkışıp "su" (Akarsular) kırpılmış görünüyordu.
     Çözüm: mobilde araç çubuğu İKİ SATIRA ayrılır —
       satır 1: katman düğmeleri (yatay kaydırılır)
       satır 2: zoom / ölçü / tam ekran
     Hiçbir düğme kesilmez, parmakla erişim rahat kalır. */
  /* Araç bandı — üç denemenin sonucu (hepsi 390×844'te ölçüldü):
       1) tek satır + kaydırma  → 3D ve Atlas sağa taşıp görünmedi
       2) dikey kolon           → zoom grubu haritadan kopuk banda taşındı
       3) tek satır + nowrap    → şerit sıkıştı, düğmeler üst üste bindi
     KAZANAN: düğmeler SARILIR (wrap). Kaydırma yok, taşma yok, sıkışma yok.
     Katman düğmeleri kendi satır(lar)ına dağılır; zoom grubu en altta
     sağa yaslanır. Telefonda 2 satır, tahtada tek satır olur. */
  .araclar {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
  }

  /* Katman grubu: düğmeler sarılır, kaydırma YOK.
     Kaydırma denemesi iki kez başarısız oldu (taşma ve sıkışma) — wrap
     hem taşmayı hem kesilmeyi kökten çözer. Düğmeler 44px hedefini korur. */
  .katman-grubu {
    flex: 1 1 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    row-gap: 6px;
  }

  /* Zoom grubu kendi satırında, sağa yaslı kalır. */
  .araclar .zoom-grubu {
    flex: 0 0 auto;
    margin-left: auto;
  }

  /* İkinci satır: zoom + ölçü + tam ekran. Ölçüldü (390×844): "margin-left:auto"
     tek başına yetmiyordu; zoom grubu satırın sağına yaslanıp harita üstünde
     yüzüyordu. Doğrusu: satır flex + space-between → ölçü solda, zoom sağda,
     ikisi de haritanın ÜSTÜNDE ayrı bantta kalır. */
  .araclar .zoom-grubu {
    justify-content: flex-end;
    margin-left: auto;
  }
  .araclar { position: relative; }

  /* Düğmeler dar ekranda taşmasın: kompakt ama 44px dokunma hedefi korunur. */
  .katman-btn { padding: 0 9px; font-size: .72rem; white-space: nowrap; }
  .zoom-grubu button,
  .tam-ekran-btn { width: 44px; height: 44px; font-size: 1.15rem; }
  .olcu-gostergesi { min-width: 48px; padding: 12px 5px; font-size: .74rem; }

  /* Harita kabı: haritanın en-boy oranı ~2.37:1 (viewBox 1000×422).
     Ölçüldü (390×844): sabit 56vh yükseklikte harita ortada küçük kalıp
     üstte/altta boş deniz birikiyordu; ayrıca .harita-kap zaten "flex: 1"
     taşıdığı için height ile çakışıp zoom düğmelerini haritadan koparıyordu.
     Çözüm: mobilde flex esnemesi KAPATILIR, yükseklik en-boy oranından
     türetilir — kutu tam haritanın oranında olur, boşluk kalmaz. */
  /* Harita kabı — ölçüm notu (390×844, 2026-10-13):
     Önce aspect-ratio denendi (1000/423): kutu doğru oranda oldu ama
     ekran görüntüsünde haritanın üstünde boş bant kaldı; çünkü 1080px
     bloğundaki "min-height: 360px" bu kutuya taban yükseklik veriyor,
     SVG ise kendi oranıyla "meet" yapıp içeride ortalanıyor.
     Çözüm: mobilde harita kabı ESNEK yükseklik alır (ekranın bir kısmı),
     SVG kabı tamamen doldurur — boş bant kalmaz, harita büyür. */
  .harita-kap {
    flex: none;
    height: 52vh;
    min-height: 280px;
    max-height: 560px;
  }

  /* Küçük ekranda lejant haritayı kapatmasın: daralt, liste yalnız istendiğinde */
  .lejant {
    width: auto;
    max-width: 54%;
    top: 8px;
    right: 8px;
  }
  .lejant-baslik { padding: 8px 10px; font-size: .66rem; }
  .lejant-liste { max-height: 30vh; font-size: .7rem; }

  /* Mobilde lejant listesi varsayılan KAPALI (harita görünür kalsın) */
  .lejant:not(.kullanici-acti) .lejant-liste { display: none; }
  .lejant:not(.kullanici-acti) .lejant-baslik .ok { transform: rotate(-90deg); }

  .kilavuz { gap: 9px; font-size: .66rem; padding: 6px 9px; left: 8px; bottom: 8px; }
  .kilavuz span:nth-child(2) { display: none; }

  .il-listesi { grid-template-columns: 1fr; }
  .ist-sayi { font-size: 1.15rem; }
  .secili-kart { padding: 13px; }
  .secili-kart h2 { font-size: 1.1rem; }

  .il-kart { min-width: 165px; max-width: 220px; padding: 9px 11px; }
}

@media (max-width: 400px) {
  .kilavuz { display: none; }
  .secili-bilgi { grid-template-columns: 1fr; }
  .lejant { max-width: 70%; }
}

/* ---------------- YAZDIRMA (öğretmen çıktısı) ----------------
   Hedef: A4 yatay/dikey tek sayfa — harita büyük, lejant yanda,
   seçili il bilgisi altta, gereksiz arayüz gizli. */
@media print {
  @page {
    size: A4 landscape;
    margin: 10mm;
  }

  html, body {
    background: #fff !important;
    height: auto !important;
    overflow: visible !important;
    font-size: 11pt;
  }

  /* Arayüz öğeleri çıktıya girmez */
  .araclar,
  .kilavuz,
  .filtre-grubu,
  .il-listesi,
  .liste-kap,
  .istatistik,
  .paylas-btn,
  .kars-not,
  .kars-baslik .baglanti-btn,
  .alt-not { display: none !important; }

  .uygulama {
    display: block !important;
    grid-template-columns: none !important;
    height: auto !important;
    max-height: none !important;
    max-width: none !important;
    padding: 0 !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  .harita-panel {
    box-shadow: none !important;
    border: none !important;
    height: auto !important;
    overflow: visible !important;
  }

  .harita-baslik {
    border-bottom: 1.5pt solid #333 !important;
    background: none !important;
    padding: 0 0 6pt 0 !important;
    margin-bottom: 6pt;
  }

  .harita-baslik h1 { font-size: 16pt !important; color: #000 !important; }
  .alt-yazi { font-size: 9pt !important; color: #444 !important; }

  .harita-kap {
    height: 130mm !important;
    min-height: 0 !important;
    border: 1pt solid #999 !important;
    border-radius: 4pt;
    overflow: hidden !important;
    background: #dceaf4 !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Harita renkleri çıktıda korunur */
  #harita .kusak,
  #harita .il,
  #harita .deniz { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  #harita .il.secili {
    filter: none !important;
    fill: #d97706 !important;
    stroke: #7c2d12 !important;
    stroke-width: 1.4 !important;
  }

  /* Lejant çıktıda YANDA kalır (haritayı kapatmasın) */
  .lejant {
    position: static !important;
    width: 100% !important;
    max-width: none !important;
    margin-top: 5pt;
    border: 1pt solid #999 !important;
    background: #fff !important;
    box-shadow: none !important;
    border-radius: 4pt;
  }

  .lejant-baslik {
    background: #f0f0f0 !important;
    font-size: 8pt !important;
    border-bottom: 1pt solid #bbb !important;
    padding: 4pt 6pt !important;
  }

  .lejant-liste {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 8pt;
    max-height: none !important;
    overflow: visible !important;
  }

  .lejant-liste li { font-size: 8pt !important; padding: 3pt 0 !important; break-inside: avoid; }
  .lejant-renk { width: 9pt !important; height: 9pt !important; }

  /* Bilgi paneli: sadece seçili il ve karşılaştırma basılır */
  .yan-panel {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    margin-top: 6pt;
    gap: 6pt;
  }

  .secili-kart,
  .ilce-kutu,
  .karsilastirma {
    box-shadow: none !important;
    border: 1pt solid #bbb !important;
    break-inside: avoid;
    margin-bottom: 6pt;
  }

  .secili-kart { padding: 8pt !important; }
  .secili-kart h2 { font-size: 14pt !important; }
  .secili-bilgi { grid-template-columns: repeat(4, 1fr) !important; gap: 5pt 8pt !important; }
  .secili-bilgi dt { font-size: 7pt !important; }
  .secili-bilgi dd { font-size: 10pt !important; }

  .ilce-listesi { max-height: none !important; overflow: visible !important; }
  .ilce-cip { font-size: 7.5pt !important; border: 0.5pt solid #ccc !important; }

  .kars-tablo { font-size: 8pt !important; }
  .kars-tablo th, .kars-tablo td { padding: 3pt 5pt !important; }
  .kars-tablo td.en-yuksek { background: #fef9e7 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  /* Sayfa sonunda boş sayfa oluşmasın */
  .yan-panel::after { display: none; }
}

/* Not: Fotoğraflar (galeri) artık AYRI bir sayfadır (galeri.html) ve
   stilleri galeri.css içindedir. Kullanıcı isteği: "aynı indexe gömme,
   ayrı yerde olsun, galeri tuşu olsun, tıklayınca geçsin."
   Bu dosya yalnız harita sayfasının (index.html) stillerini taşır. */