/* SiberMuhbir Canlı Harita — klona özgü düzen.
   Panel ve efsane görünümü Ülgen'den gelir (siber_ulgen.css, otomatik üretilir);
   burada yalnız Ülgen'in test sayfasında olmayan parçalar ve konum farkları var. */

html, body { background: #04070d; color: #dbe8f4; margin: 0; height: 100%; }

/* Ülgen'de çekmecenin solunda katman menüsü (250 px) var; klonda yok */
.sb-cekmece { left: 14px; }

/* ── üst çubuk ─────────────────────────────────────────────────────── */
#kl-ust {
  position: absolute; top: 10px; left: 12px; right: 12px; z-index: 8;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  pointer-events: none;
}
#kl-ust > * { pointer-events: auto; }
.kl-baslik {
  font-family: 'Cinzel', serif; font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: #8fd4f5;
  text-shadow: 0 0 10px rgba(47, 216, 232, .35);
}
.kl-rozet {
  font: 11px/1 'Inter', system-ui, sans-serif; color: #9cb2c6;
  background: rgba(9, 19, 33, .72); border: 1px solid rgba(92, 182, 230, .22);
  border-radius: 999px; padding: 5px 9px; white-space: nowrap;
}
.kl-rozet b { color: #ffcc33; font-variant-numeric: tabular-nums; margin-right: 3px; }
.kl-bosluk { flex: 1; }
.kl-dugme {
  font: 600 11px/1 'Inter', system-ui, sans-serif; letter-spacing: .04em;
  color: #dbe8f4; background: rgba(9, 19, 33, .8);
  border: 1px solid rgba(92, 182, 230, .32); border-radius: 6px;
  padding: 7px 11px; cursor: pointer;
}
.kl-dugme:hover { border-color: #5cb6e6; color: #fff; }
.kl-tam { border-color: rgba(255, 51, 51, .55); }
.kl-tam:hover { border-color: #ff3333; }

.kl-durum {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%); z-index: 8;
  font: 11px/1.3 'Inter', system-ui, sans-serif; color: #ffcc33;
  background: rgba(40, 28, 6, .85); border: 1px solid rgba(255, 204, 51, .4);
  border-radius: 6px; padding: 5px 10px; max-width: calc(100% - 40px);
}
.kl-durum[hidden] { display: none; }

#kl-kunye {
  position: absolute; left: 12px; bottom: 10px; z-index: 5;
  font: 10px/1.3 'Inter', system-ui, sans-serif; color: #5e7488;
}
#kl-kunye a { color: #7d93a8; text-decoration: none; }
#kl-kunye a:hover { color: #9cb2c6; text-decoration: underline; }

/* ── gömülü görünüm (sitenin sayfasındaki iframe) ──────────────────── */
.kl-ipucu { display: none; }
body.gomulu .kl-ipucu {
  display: block; position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 5; font: 11px/1 'Inter', system-ui, sans-serif; color: #9cb2c6;
  background: rgba(9, 19, 33, .7); border-radius: 999px; padding: 6px 12px;
  pointer-events: none; white-space: nowrap;
}
body.gomulu #siber-cekmece-yuva, body.gomulu #kl-kip { display: none; }
body.gomulu #harita { cursor: pointer; }
/* Gömülüyken efsane üste: altta OpenStreetMap atfı (lisans gereği görünür kalır) ve künye var */
body.gomulu #efsane { top: 46px; bottom: auto; }

/* MapLibre atfı: beyaz kutu koyu temada göz alıyordu — içerik aynı, yalnız renk */
.maplibregl-ctrl.maplibregl-ctrl-attrib { background: rgba(4, 7, 13, .72); color: #7d93a8; }
.maplibregl-ctrl-attrib a { color: #9cb2c6; }
.maplibregl-ctrl-attrib.maplibregl-compact .maplibregl-ctrl-attrib-button { filter: invert(.85); background-color: transparent; }

/* ── tam görünüm: çekmece altta, efsane üst çubuğun altında ────────── */
body.cekmece-acik #efsane { top: 50px; bottom: auto; }
body.cekmece-acik #kl-kunye { top: 50px; bottom: auto; left: auto; right: 12px; }
body.cekmece-acik .kl-ipucu { display: none; }

/* ── haftalık sekmesi: özet yokken ─────────────────────────────────── */
.kl-haftalik-yok { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 6px 2px; }
.kl-talep { --s-renk: #33ffff; }
.kl-talep[disabled] { opacity: .7; cursor: default; }

.kl-noscript { position: absolute; inset: 40% 0 auto; text-align: center; font: 14px 'Inter', sans-serif; }

/* ── dar ekran ─────────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .kl-baslik { font-size: 10px; letter-spacing: .12em; flex-basis: 100%; }
  /* ⚠️ ÖLÇÜLDÜ 390 px: efsane gömülüde üç satıra taşıp haritayı örtüyordu, tam görünümde
     Ülgen'in masaüstü kuralı (max-width: 100% - 620px) yüzünden dar bir sütuna sıkışıyordu.
     Renkler günlük rozetlerinde ve süzgeçlerde zaten var. */
  #efsane, body.gomulu #kl-yay-rozet { display: none !important; }
  /* Gömülü dar ekranda harita atfı (OpenStreetMap, lisans gereği kalır), künye ve ipucu
     alt kenarda üst üste biniyordu: künye ve ipucu çekilir, harita zaten dokunulabilir. */
  body.gomulu #kl-kunye, body.gomulu .kl-ipucu { display: none; }
  /* Üst düzey sayfada (yeni sekme) tam ekran düğmesi telefonda yer kaplar, işlevi yok */
  body.ust-duzey:not(.tam-ekranda) .kl-tam { display: none; }
  body.cekmece-acik #efsane, body.cekmece-acik #kl-kunye { top: 72px; }
  body.cekmece-acik #kl-kunye { display: none; }
  .kl-durum { top: 70px; }
}