:root {
  --bg: #f4f5f7; --panel: #fff; --text: #1d2330; --muted: #667085; --line: #e3e6eb;
  --primary: #1f5fbf; --primary-d: #174a96; --ok: #18794e; --warn: #b54708; --err: #b42318;
  --imar: #1f5fbf; --yerlesik: #e11d48;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif; color: var(--text); background: var(--bg); }
a { color: var(--primary); }
h1, h2, h3 { margin: 0 0 .5em; line-height: 1.2; }
h2 { font-size: 18px; } h3 { font-size: 15px; }
button, .btn {
  font: inherit; border: 1px solid var(--primary); background: var(--primary); color: #fff;
  padding: 7px 14px; border-radius: 6px; cursor: pointer; text-decoration: none; display: inline-block;
}
button:hover, .btn:hover { background: var(--primary-d); }
button.ikincil, .btn.ikincil { background: #fff; color: var(--primary); }
button.ikincil:hover { background: #eef3fb; }
button.tehlike { background: #fff; color: var(--err); border-color: var(--err); }
button:disabled { opacity: .55; cursor: default; }
input, select, textarea {
  font: inherit; padding: 7px 9px; border: 1px solid #cfd4dc; border-radius: 6px; width: 100%; background: #fff; color: var(--text);
}
textarea { min-height: 70px; }
label { display: block; font-size: 12px; color: var(--muted); margin: 8px 0 3px; }
.satir { display: flex; gap: 8px; } .satir > * { flex: 1; }
.kart { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 16px; }
.mesaj { padding: 8px 10px; border-radius: 6px; margin: 8px 0; font-size: 13px; }
.mesaj.hata { background: #fef3f2; color: var(--err); }
.mesaj.ok { background: #ecfdf3; color: var(--ok); }
.mesaj.bilgi { background: #eff4ff; color: var(--primary-d); }
.gizli { display: none !important; }
.soluk { color: var(--muted); font-size: 12px; }
table { border-collapse: collapse; width: 100%; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 12px; color: var(--muted); font-weight: 600; }
.rozet { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 12px; background: #eef1f5; }
.rozet.aktif { background: #ecfdf3; color: var(--ok); }
.rozet.beklemede { background: #fffaeb; color: var(--warn); }
.rozet.pasif, .rozet.bitti { background: #fef3f2; color: var(--err); }
.rozet.imar { background: #eff4ff; color: var(--imar); }
.rozet.yerlesik { background: #fff1f2; color: var(--yerlesik); }
.rozet.parsel { background: #fefce8; color: #a16207; }
.rozet.koruma { background: #f5f3ff; color: #6d28d9; }

/* Üst çubuk */
.ust { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 52px; background: #13294b; color: #fff; }
.ust .logo { font-weight: 700; font-size: 16px; letter-spacing: .2px; }
.ust .bosluk { flex: 1; }
.ust a, .ust button { color: #fff; border-color: rgba(255,255,255,.4); background: transparent; padding: 5px 10px; }
.ust .kim { font-size: 13px; opacity: .85; }

/* Giriş */
.giris-sayfa { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 16px;
  background: linear-gradient(135deg, #13294b, #1f5fbf); }
.giris-kutu { width: 100%; max-width: 420px; }
.sekmeler { display: flex; gap: 4px; margin-bottom: 12px; border-bottom: 1px solid var(--line); }
.sekmeler button { background: none; color: var(--muted); border: none; border-bottom: 2px solid transparent; border-radius: 0; padding: 8px 12px; }
.sekmeler button.secili { color: var(--primary); border-bottom-color: var(--primary); }

/* Harita sayfası */
.harita-duzen { display: flex; height: calc(100% - 52px); }
.yan { width: 400px; max-width: 100%; overflow-y: auto; background: var(--panel); border-right: 1px solid var(--line); padding: 14px; }
#harita { flex: 1; }
.sonuc-blok { border: 1px solid var(--line); border-radius: 8px; padding: 12px; margin-top: 12px; }
.sonuc-blok dl { display: grid; grid-template-columns: 45% 55%; margin: 6px 0 0; }
.sonuc-blok dt { color: var(--muted); font-size: 12px; padding: 3px 0; }
.sonuc-blok dd { margin: 0; padding: 3px 0; font-weight: 500; }
.hesap-tablo td:last-child { text-align: right; font-weight: 600; }
.lejant { position: absolute; z-index: 500; right: 10px; bottom: 24px; background: #fff; padding: 6px 10px; border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,.25); font-size: 12px; }
.lejant i { display: inline-block; width: 12px; height: 12px; margin-right: 5px; vertical-align: -2px; border: 2px solid; }

/* Harita üstü sonuç kartı ve sağ tık menüsü */
.bilgi-kart { position: absolute; z-index: 700; top: 10px; right: 54px; width: 360px; max-width: calc(100% - 70px);
  max-height: calc(100% - 150px); overflow-y: auto; background: var(--panel); border-radius: 10px; padding: 12px 14px;
  box-shadow: 0 4px 18px rgba(0,0,0,.28); }
.bilgi-kart .sonuc-blok:first-child, .bilgi-kart .mesaj:first-child { margin-top: 0; }
.kart-kapat { position: sticky; top: 0; float: right; margin: -4px -6px 0 6px; width: 28px; height: 28px; padding: 0;
  border: none; border-radius: 50%; background: #eef1f5; color: #333; font-size: 18px; line-height: 28px; z-index: 1; }
.kart-kapat:hover { background: #dfe3ea; }
.sag-menu { position: absolute; z-index: 800; min-width: 220px; background: #fff; border-radius: 8px; padding: 4px;
  box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.sag-menu button { display: block; width: 100%; text-align: left; background: none; border: none; color: var(--text);
  padding: 7px 10px; border-radius: 5px; font-size: 13px; line-height: 1.35; }
.sag-menu button:hover:not(:disabled) { background: #eef3fb; }
.sag-menu button:disabled { color: #aab; }
.sag-menu hr { border: none; border-top: 1px solid var(--line); margin: 4px 0; }

/* Leaflet karoları plus-lighter ile karıştırıyor: üst üste gelen pikseller toplanıp parlıyor, karo sınırları
   beyaz çizgi oluyordu. Normal karışımda 1 piksellik bindirme (ortak.js) sınırları görünmez yapar. */
.leaflet-container img.leaflet-tile { mix-blend-mode: normal; }
/* Yüklenmemiş karolar açık gri parlamasın: uydu görüntüsüne yakın koyu zemin */
.leaflet-container { background: #3b4034; }

/* Bilgi balonlu çizimler klavye odağı alıyor; tıklanınca tarayıcı etrafına dikdörtgen odak çerçevesi çiziyordu */
.leaflet-container path:focus, .leaflet-container path:focus-visible { outline: none; }

/* Leaflet katman menüsü: genel form stilleri (blok label, tam genişlik input) buraya uymasın */
.leaflet-control-layers label { display: block; margin: 0; color: var(--text); font-size: 13px; }
.leaflet-control-layers label > span { display: flex; align-items: center; gap: 6px; padding: 2px 0; }
.leaflet-control-layers input { width: auto; padding: 0; margin: 0; }
.leaflet-control-layers-separator { margin: 6px 0; }

/* OSM yol / yer adları: beyaz yazı, koyu hale; uydu görüntüsünde okunur */
.osm-yol-etiket, .osm-yer-etiket { background: none; border: none; box-shadow: none; padding: 0; color: #fff;
  font-weight: 600; white-space: nowrap; text-shadow: 0 0 2px #000, 0 0 3px #000, 0 0 4px #000; }
.osm-yol-etiket { font-size: 12px; font-style: italic; }
.osm-yer-etiket { font-size: 14px; letter-spacing: .4px; text-transform: uppercase; }
.osm-yol-etiket::before, .osm-yer-etiket::before { display: none; }

/* Seçili parsel parçaları (yeşil: planlı alan içi, turuncu: dışı) */
.parca-renk { display: inline-block; width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; flex: none; }
.parca-renk.uygun { background: #16a34a6b; border: 2px solid #15803d; }
.parca-renk.disarida { background: #ea580c6b; border: 2px solid #c2410c; }
.lejant .parca-renk { width: 12px; height: 12px; margin-right: 5px; }

/* Sonuç kartının başı: yerleşik alan durumu, içeride kalan alan, taban alanı */
.ozet { border-radius: 8px; padding: 10px 12px; margin-bottom: 10px; border-left: 5px solid; }
.ozet.tam { background: #ecfdf3; border-color: #15803d; }
.ozet.kismi { background: #fffbeb; border-color: #d97706; }
.ozet.disarida { background: #fff4ed; border-color: #c2410c; }
.ozet-baslik { font-size: 17px; font-weight: 700; line-height: 1.25; padding-right: 22px; }
.ozet.tam .ozet-baslik { color: #166534; }
.ozet.kismi .ozet-baslik { color: #92400e; }
.ozet.disarida .ozet-baslik { color: #9a3412; }
.ozet-alt { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ozet-cubuk { height: 8px; border-radius: 4px; background: #ea580c; overflow: hidden; margin-top: 10px; }
.ozet-cubuk i { display: block; height: 100%; background: #16a34a; }
.ozet-ikili { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.ozet-kutu, .ozet-taban { background: #fff; border-radius: 6px; padding: 6px 9px; }
.ozet-kutu span, .ozet-taban span { display: block; font-size: 12px; color: var(--muted); }
.ozet-kutu b { display: block; font-size: 16px; }
.ozet-kutu.ic b { color: #166534; }
.ozet-kutu.dis b { color: #9a3412; }
.ozet-kutu small, .ozet-taban small { display: block; font-size: 11px; color: var(--muted); }
.ozet-taban { margin-top: 8px; }
.ozet-taban b { display: block; font-size: 22px; line-height: 1.2; color: var(--text); }

/* Köy / mahalle adı (uzak görünümde) */
.mahalle-etiket { background: rgba(17,24,39,.78); color: #fff; border: none; border-radius: 6px; box-shadow: none;
  font-size: 15px; font-weight: 700; letter-spacing: .3px; padding: 4px 10px; }
.mahalle-etiket::before { display: none; }
.mahalle-adi-gizli .mahalle-etiket { display: none; }
.parsel-acik .leaflet-pane > svg path.alan-ust { pointer-events: stroke; }

/* Ölçüm araçları */
.olcum-arac button { display: block; width: 34px; height: 34px; padding: 0; border: none; border-bottom: 1px solid #ccc;
  border-radius: 0; background: #fff; color: #222; font-size: 16px; line-height: 34px; }
.olcum-arac button:last-child { border-bottom: none; }
.olcum-arac button:hover { background: #f4f4f4; }
.olcum-arac button.secili { background: #f97316; color: #fff; }
.olcum-modu, .olcum-modu .leaflet-interactive { cursor: crosshair !important; }
.olcum-etiket { font-weight: 600; font-size: 13px; }
#olcum-ipucu { position: absolute; z-index: 600; left: 50%; top: 10px; transform: translateX(-50%); background: #1d2330e6;
  color: #fff; padding: 5px 12px; border-radius: 6px; font-size: 12px; white-space: nowrap; }
.pro-kilit { border: 1px dashed #d4a017; background: #fffbeb; border-radius: 8px; padding: 10px; margin-top: 12px; font-size: 13px; }
.rozet.pro { background: #fef3c7; color: #92400e; font-weight: 600; }

/* Admin */
.admin-duzen { max-width: 1200px; margin: 0 auto; padding: 16px; }
.admin-sekmeler { display: flex; gap: 4px; margin-bottom: 14px; flex-wrap: wrap; }
.admin-sekmeler button { background: #fff; color: var(--text); border-color: var(--line); }
.admin-sekmeler button.secili { background: var(--primary); color: #fff; border-color: var(--primary); }
.ozet-kutular { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.ozet-kutular .kart b { display: block; font-size: 24px; }
.tablo-kap { overflow-x: auto; }
.izgara2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

@media (max-width: 800px) {
  .harita-duzen { flex-direction: column-reverse; height: auto; }
  #harita { height: 55vh; flex: none; }
  .yan { width: 100%; border-right: none; }
  .bilgi-kart { top: auto; bottom: 8px; right: 8px; left: 8px; width: auto; max-width: none; max-height: 60%; }
  .izgara2 { grid-template-columns: 1fr; }
  .ust .kim { display: none; }
}