:root {
  --color1: #9db5b2;
  --color2: #a2c5ac;
  --color3: #d3d5d4;
  --text-color-1: white;
  --text-color-2: lightgray;
}

#map {
  height: 100vh;
  /* Altlıksız ("Boş") seçenekte altlıklar gizlenince şeffaf GL canvas'ın
     arkasında beyaz zemin görünsün. */
  background: #ffffff;
}

.rounded-rect {
  background: white;
  border-radius: 10px;
  box-shadow: 0 0 50px -25px black;
}

.flex-center {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-center.left {
  left: 0px;
  justify-content: flex-start;
  padding-left: 10px;
}

.flex-center.right {
  right: 0px;
}

.sidebar-content {
  position: absolute;
  width: 97%;
  height: 95%;
  font-family: "Lato", sans-serif !important;
  color: gray;
  background: rgb(249, 250, 250);
  border-radius: 10px;
  box-shadow: 0 0 50px -25px black;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
  /* Panel içeriği ekrandan uzun olduğunda (ör. ana sayfada Hızlı Erişim +
     Önemli Linkler + Yardım birlikte) alt kısım kesiliyordu; artık kayar. */
  overflow-y: auto;
  overscroll-behavior: contain;
  /* Windows'un kalın, oklu varsayılan kaydırma çubuğu panelin içinde kötü
     duruyor; ince ve saydam bir çubukla değiştirilir. */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.22) transparent;
}

.sidebar-content::-webkit-scrollbar {
  width: 10px;
}

.sidebar-content::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.18);
  border-radius: 8px;
  /* Şeffaf kenarlık + content-box: çubuk kenardan boşluklu, ince görünür. */
  border: 3px solid transparent;
  background-clip: content-box;
}

.sidebar-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.34);
  background-clip: content-box;
}

/* Panel içerikleri dar kolonda sıkışmasın (flex kolonda daralmayı kapat) ve
   kaydırma çubuğuna değmesin. */
.sidebar-content > * {
  flex-shrink: 0;
  max-width: 100%;
  padding-right: 2px;
}

/* Kurum logosu + uygulama adı: panel kayarken üstte sabit kalır.
   Panel kaydırılmadan başlığın zemini YOK — panelin içinde ayrı bir kutu gibi
   durmasın. Kaydırma başlayınca altından içerik geçeceği için cam zemin ve
   ince gölge yumuşak geçişle belirir. Üstteki 20px panel boşluğu da kapatılır
   ki içerik oradan sızmasın. */
.nk-home-sabit {
  position: sticky;
  /* Panelin 20px iç boşluğu kadar yukarı yapıştırılır; aksi halde başlık ile
     panel kenarı arasında içeriğin sızdığı 20px'lik bir şerit kalıyor. */
  top: -20px;
  z-index: 6;
  width: 100%;
  margin-top: -20px;
  padding: 20px 0 4px;
  background: transparent;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}

.nk-home-sabit .nk-home-logo img {
  max-width: 100px;
  max-height: 100px;
  transition: max-height 0.2s ease, max-width 0.2s ease;
}

/* Kaydırma başlayınca: cam zemin + ince gölge (içerik altından geçtiği için
   okunabilirlik gerekiyor) ve logo küçülür. */
.sidebar-content.kaydirildi .nk-home-sabit {
  background: rgba(255, 255, 255, 0.38);
  backdrop-filter: blur(var(--glass-blur, 40px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 40px));
  box-shadow: 0 8px 12px -12px rgba(0, 0, 0, 0.55);
}

.sidebar-content.kaydirildi .nk-home-sabit .nk-home-logo {
  margin-bottom: 0.25rem !important;
}

.sidebar-content.kaydirildi .nk-home-sabit .nk-home-logo img {
  max-height: 46px;
  max-width: 46px;
}

.sidebar-content.kaydirildi .nk-home-sabit .nk-home-header {
  margin-bottom: 0.5rem !important;
}

/* Ana sayfa alt bilgisi: Netcad logosu + sürüm rozeti (akışın sonunda). */
.nk-home-netcad {
  width: 100%;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  text-align: center;
  cursor: pointer;
}

.nk-home-netcad img {
  width: 44px;
  display: block;
  margin: 0 auto 4px;
}

#sidebar-content-left {
  height: 100%;
}

.sidebar-toggle {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.sidebar-toggle.left {
  right: -1.5em;
}

.sidebar-toggle.right {
  left: -1.5em;
}

.sidebar-toggle:hover {
  color: #0aa1cf;
  cursor: pointer;
}

.sidebar {
  transition: transform 1s;
  z-index: 1;
  width: 400px;
  height: 100%;
}

.left.collapsed {
  transform: translateX(-395px);
}

.right.collapsed {
  transform: translateX(395px);
}

.layer-header {
  cursor: pointer;
  font-weight: bold;
  padding: 5px;
  background: #f0f0f0;
  border-radius: 5px;
  margin-top: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layer-header:hover {
  background: #e0e0e0;
}

.toggle-icon {
  cursor: pointer;
  font-size: 14px;
  padding: 5px;
}

.toggle-icon:hover {
  color: #007acc;
}

.layer-details {
  background: #fafafa;
  padding: 5px;
  border-left: 3px solid #007acc;
  border-radius: 5px;
}

.gauge-core {
  padding: 10px;
  border-radius: 50%;
  margin: 10px;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}

.gauge-core svg {
  position: absolute;
  top: 0px;
  left: 0px;
  z-index: 99999;
}

.titol {
  font-size: x-small;
}

.valor {
  font-size: x-large;
  font-weight: bolder;
  display: flex;
  justify-content: center;
  align-items: center;
}

.int {
  text-align: right;
}

.decimals {
  text-align: left;
}

.min,
.max {
  font-size: xx-small;
  position: absolute;
}

.min {
  top: 50%;
  left: 5px;
}

.max {
  top: 50%;
  right: 5px;
}

.text-light {
  text-shadow: 0 0 3px #ffffff;
  color: #333;
}

.gauge-light {
  background: rgba(255, 255, 255, 0.7);
}

.bottom-center-container {
  position: fixed;
  bottom: 20px;
  font-size: 20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--color1);
  z-index: 9999;
  padding: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  gap: 20px;
  align-items: center;
}

.bottom-center-container i {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.bottom-center-container div {
  transition: transform 0.3s ease, color 0.3s ease;
  cursor: pointer;
}

.bottom-center-container i:hover {
  transform: scaleX(1.4) scaleY(1.3);
}

.bottom-center-container i.active {
  color: #33b5e5;
  transform: scaleX(1.4) scaleY(1.3);
}

.bottom-center-container div:hover {
  transform: scaleX(1.4) scaleY(1.3);
}

.bottom-center-container div.active {
  color: #33b5e5;
  transform: scaleX(1.3) scaleY(1.3);
}

#streetSmart {
  width: 100%;
  height: 100%;
}

.left-card {
  width: 100%;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 1px 3px 1px;
  transition: all 0.3s ease;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(var(--glass-blur, 10px));
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px));
}

.left-card:hover {
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
}

.left-card h5 {
  margin: 0;
  font-weight: bold;
  color: #333;
}

.left-card p {
  margin: 4px 0;
  font-size: 0.8rem;
  color: #666;
}

.left-card i {
  color: #3b3b3b;
  margin-right: 5px;
}

.left-card .card-header {
  font-weight: 800;
  font-size: 14px;
  color: #333;
}

#nobetciEczane .left-card .card-header {
  font-weight: 700;
  font-size: 14px;
  color: red;
}

#toplanmaHTML .left-card .card-header {
  font-weight: 800;
  font-size: 14px;
  color: #00923F;

}

.left-card a {
  color: black;
}

.contentHeader {
  font-size: 20px;
  font-weight: 700;
  color: #333333;
  padding-bottom: 20px;
  text-transform: capitalize !important;
}

.poi-title {
  font-size: 15px !important;
  font-weight: 700;
  color: #000000 !important;
}

.poi-detail-items {
  font-size: 12px;
  color: #000000 !important;
}

#nobetciEczane,
#toplanmaHTML,
#poiHTML,
#ibbHTML {
  width: 100%;
  height: 90vh;
  max-height: 90vh;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: none;
}

#layerHTML {
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  padding-right: 5px;
  scrollbar-width: none;
}

/* TRACK (slider çizgisi) */
.form-range.layer-opacity {
  height: 6px;
}

/* Chrome / Edge / Safari */
.form-range.layer-opacity::-webkit-slider-runnable-track {
  height: 6px;
  background: #797878 !important;
  border-radius: 999px;
}

/* Thumb (top) */
.form-range.layer-opacity::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  margin-top: -6px;
  /* track ortalamak için */
  width: 18px;
  height: 18px;
  background: #000 !important;
  border: 2px solid #444 !important;
  border-radius: 50%;
  cursor: pointer;
}

/* Firefox */
.form-range.layer-opacity::-moz-range-track {
  height: 6px;
  background: #222 !important;
  border-radius: 999px;
}

.form-range.layer-opacity::-moz-range-thumb {
  width: 18px;
  height: 18px;
  background: #000 !important;
  border: 2px solid #444 !important;
  border-radius: 50%;
  cursor: pointer;
}

/* Focus efekti */
.form-range.layer-opacity:focus::-webkit-slider-thumb {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}

.form-range.layer-opacity:focus::-moz-range-thumb {
  box-shadow: 0 0 0 0.2rem rgba(0, 0, 0, 0.25) !important;
}


#leftContent::-webkit-scrollbar {
  width: 0px;
  display: none;
}

/* 
#categoryHTML {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}
  
*/

#categoryHTML {
  width: 100%;
  max-height: 90vh;
  min-height: 90vh;
  padding-right: 5px;
  scrollbar-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}

#btnToggleHeatmap.active {
  color: red !important;
  border: none;
}

#isochroneHTML {
  width: 100%;
  max-height: 90vh;
  min-height: 90vh;
  padding-right: 5px;
  scrollbar-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}

#depremHTML {
  width: 100%;
  max-height: 90vh;
  min-height: 90vh;
  padding-right: 5px;
  scrollbar-width: none;
  overflow-y: hidden;
  overflow-x: hidden;
}

#searchHTML {
  width: 100%;
  max-height: 90vh;
  min-height: 90vh;
  padding-right: 5px;
  scrollbar-width: none;
  overflow-y: auto;
  overflow-x: hidden;
}

#categoryHTML {}

#leftContent {
  width: 100%;
  max-height: 100vh;
  padding-right: 5px;
  scrollbar-width: none;
}

.poi-category-container h5 {
  font-weight: 600;
  margin-bottom: 1.5rem;
  font-size: 1.1rem;
}

/* 🔀 POI liste kapsamı anahtarı: Ekrandakiler / Tümü — glass efekt uyumlu */
.poi-scope-switch {
  display: flex;
  gap: 4px;
  background: rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(var(--glass-blur, 10px)) saturate(160%);
  -webkit-backdrop-filter: blur(var(--glass-blur, 10px)) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 12px;
  padding: 3px;
  margin-top: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.poi-scope-btn {
  flex: 1;
  border: none;
  background: transparent;
  border-radius: 9px;
  padding: 5px 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: #333;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.poi-scope-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  color: #000;
}
.poi-scope-btn.active {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: #000;
  font-weight: 800;
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.poi-scope-count {
  background: rgba(255, 255, 255, 0.55);
  color: #000;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 999px;
  padding: 0 7px;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
}
.poi-scope-btn:not(.active) .poi-scope-count {
  background: rgba(255, 255, 255, 0.3);
  color: #444;
  border-color: rgba(0, 0, 0, 0.06);
}

/* Kategori kutusu */
.category-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

/* İkon kutusu */
.category-icon {
  width: 40px;
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
}

/* İkon resmi */
.category-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.category-text {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 5px;
  font-weight: 700;
  color: black;
  text-align: center;
}

.poi-list-container {
  height: 100%;
  display: flex;
  flex-direction: column;
}


.poi-card-list {
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: none;
}

.poi-card {
  background-color: var(--color2);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.75rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: background-color 0.3s, transform 0.2s;
}

.poi-card:hover {
  background-color: var(--color1);
  transform: scale(1.005);
}

.poi-title {
  font-weight: 600;
  margin-bottom: 0.25rem;
  color: var(--text-color-2);
}

.poi-sub {
  font-size: 0.875rem;
  color: var(--text-color-1);
  margin-bottom: 0.25rem;
}

.poi-address {
  font-size: 0.8rem;
  color: var(--text-color-1);
}

.grid-stack-item-content {
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  border-radius: 5px;
}

.swiper-slide {
  height: 100vh;
  overflow: hidden;
  /* aşağıya scroll olmasın */
  display: flex;
  flex-direction: column;
}

.grid-stack {
  flex: 1;
  overflow: hidden;
  /* grid taşarsa scroll yapmasın */
}

.dx-chart {
  z-index: 9999 !important;
  position: relative;
}

#streetPanel {
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #f0f0f0;
  overflow: hidden;
  transition: width 0.3s ease;
  z-index: 10;
  pointer-events: none;
}

#streetPanel.active {
  width: 45vw;
  pointer-events: auto;
}

#streetBody {
  width: 100%;
  height: 100%;
  padding: 20px;
}

#resizeHandle {
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 100%;
  cursor: ew-resize;
  background: rgba(0, 0, 0, 0.1);
  z-index: 222;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.layer-card .toggle-content i {
  transition: transform 0.2s ease;
}

#custom-logo {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  border-radius: 10%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  z-index: 10;
}

#custom-logo2 {
  position: absolute;
  top: 15px;
  background-color: black;
  opacity: 0.35;
  right: 15px;
  width: 30px;
  height: 30px;
  background-size: cover;
  background-position: center;
  border-radius: 10%;
  z-index: 9;
}

.calculation-box {
  height: 75px;
  width: 150px;
  position: absolute;
  bottom: 140px;
  left: 10px;
  background-color: rgba(255, 255, 255, 0.9);
  padding: 15px;
  text-align: center;
}

#addUserLayerModalContent {
  height: 600px;
}

#resultList li.selected {
  background-color: #f0f0f0;
}

.solbuton {
  font-size: 15px;
}

.style-flipper-control.collapsed-flipper button:not(.active) {
  display: none;
}

#coordContainer {
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 8px 10px;
  color: black;
  min-width: 200px;
}

#coordContainer select {
  color: black;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 12px;
  outline: none;
}

#coordContainer select option {
  color: #000;
}





.fancybox__container {
  z-index: 999999 !important;
}

#toggleCoordBtn {
  background: #426a5a;
  color: white;
  border: none;
  border-radius: 3px;
  padding: 2px 6px;
  cursor: pointer;
  font-size: 13px;
}

#toggleCoordBtn:hover {
  background: #314c42;
}

.bottom-icon-img {
  width: 20px;
  height: 20px;
  margin: 0 4px;
  cursor: pointer;
  filter: grayscale(0%);
  transition: 0.2s;
}

.bottom-icon-img:hover {
  filter: brightness(1.1);
}

.bottom-icon-img.active {
  filter: drop-shadow(0 0 2px #333);
}

.search-wrapper {
  padding: 0;
  /* padding tamamen kaldırıldı */
  max-width: 400px;
  min-width: 280px;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 6px;
}

.search-input-wrapper {
  position: relative;
  flex-grow: 1;
}

.search-input-wrapper .form-control {
  padding: 0 8px 0 8px;
  /* sadece yatay daraltılmış padding */
  height: 34px;
  font-size: 14px;
  border: none;
  border-radius: 0;
  box-shadow: none;
}

.search-inside-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: none;
  color: #666;
  cursor: pointer;
  font-size: 14px;
  padding: 0;
  line-height: 1;
}

.search-inside-btn:hover {
  color: #000;
}

.search-bar .btn {
  height: 34px;
  width: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}

/* 🔎 Ana sayfa arama kutusu — üstteki arama çubuğuyla uyumlu kompakt görünüm */
.home-search-box {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  padding: 3px 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.home-search-box .home-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  padding: 0 4px;
  color: #000;
}
.home-search-box .home-search-tam {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  font-size: 13px;
  color: #444;
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
}
.home-search-box .home-search-tam input {
  cursor: pointer;
  margin: 0;
}
.home-search-box .home-search-btn,
.home-search-box .home-search-clear {
  border: none;
  background: none;
  color: #555;
  cursor: pointer;
  font-size: 15px;
  padding: 4px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.home-search-box .home-search-btn:hover,
.home-search-box .home-search-clear:hover {
  color: #000;
}

/* Chrome, Safari, Edge için autofill iptali */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-internal-autofill-selected {
  box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-box-shadow: 0 0 0px 1000px white inset !important;
  -webkit-text-fill-color: #000 !important;
  transition: background-color 9999s ease-in-out 0s !important;
}

.dropdown-btn {
  background-color: #b30a6c;
  color: white;
  padding: 6px 12px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 14px;
  position: relative;
  user-select: none;
}

.dropdown-list {
  position: absolute;
  top: 45px;
  left: 0;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  padding: 6px 0;
  display: none;
  z-index: 99999;
  list-style: none;
  min-width: 140px;
}

.dropdown-list li {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-list li:hover {
  background-color: #f0f0f0;
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 6px;
  background: transparent;
}

.search-icon {
  font-size: 16px;
  color: #b30a6c;
  cursor: pointer;
  padding: 4px;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 0;
  background: white;
  list-style: none;
  width: 100%;
  margin-top: 6px;
  padding: 0;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  max-height: 200px;
  overflow-y: auto;
  z-index: 10000;
}

.search-results li {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}

.search-results li:hover {
  background: #f8f8f8;
}

.no-result {
  padding: 8px 12px;
  color: #888;
  font-style: italic;
}

@font-face {
  font-family: "icomoon";
  src: url("fonts/icomoon.eot?lavnf6");
  src: url("fonts/icomoon.eot?lavnf6#iefix") format("embedded-opentype"),
    url("fonts/icomoon.ttf?lavnf6") format("truetype"),
    url("fonts/icomoon.woff?lavnf6") format("woff"),
    url("fonts/icomoon.svg?lavnf6#icomoon") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: "icomoon" !important;
  /*speak: never;*/
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-toplanma:before {
  content: "\e902";
}

.icon-eczane:before {
  content: "\e901";
}

.icon-ibb:before {
  content: "\e900";
}

.icon-toplanma:before+.active {
  color: red !important;
}

.bottom-center-container .icon-toplanma.active {
  color: #00923f !important;
  transform: scaleX(1.3) scaleY(1.2);
}

.bottom-center-container .icon-eczane.active {
  color: red !important;
  transform: scaleX(1.3) scaleY(1.2);
}

.search-result-item.active {
  background-color: #f0f8ff;
  border-left: 4px solid #007bff;
}

.search-clear-icon {
  position: absolute;
  right: 12px;
  top: 10px;
  font-size: 14px;
  color: #888;
  z-index: 2;
}

.ts-dropdown .optgroup-header {
  font-weight: bold;
  font-size: 13px;
  color: #555;
  padding: 6px 10px;
  background-color: #f5f5f5;
  border-bottom: 1px solid #ddd;
  margin-top: 5px;
}

#predefinedWmsSelect>.ts-dropdown {
  max-height: 350px !important;
  overflow-y: auto !important;
}

.form-check-input {
  width: 1.75em;
  height: 1.25em;
}

/* .btn-outline-secondary:focus{
  border: 1px solid white !important;
  background-color: #0d6efd !important;
  color: white !important;
}

.btn-outline-secondary:hover{
  border: 1px solid white !important;
  background-color: #0d6efd !important;
  color: white !important;
}
.btn-outline-secondary{
  width: 33px !important;
    border: 1px solid #0d6efd !important;
  background-color: transparent !important;
  color:#0d6efd !important;
}

.btn-outline-secondary.active{
  border: 1px solid white !important;
  background-color: #0d6efd !important;
  color: white !important;
} */

.btn-colorpicker {
  padding: 0;
  width: 33px;
  height: 33px;
}

.side-panel {
  position: fixed;
  top: 0;
  right: 0;
  height: 100%;
  width: 500px;
  background: #fff;
  z-index: 9999;
  display: none;
  flex-direction: row;
  /* Sol handle - sağ içerik */
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
}

.resizeHandle.left-resize {
  width: 40px;
  height: 100%;
  background: #eee;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 10px 5px;
  cursor: ew-resize;
}

.close-btn {
  background: rgba(0, 0, 0, 0.6);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 18px;
  cursor: pointer;
}

.resize-icon {
  font-size: 16px;
  color: #333;
}

.accordion-button {
  font-weight: 700;
  color: black !important;
}

.accordion-button:not(.collapsed) {
  background-color: #e3e3e3 !important;
}

.help-link {
  color: black !important;
}

.accordion-body {
  padding: 5% !important;
}

.accordion-body {
  font-size: 14px !important;
}

.draw-label {
  background-color: #2c3e50;
  color: white;
  padding: 3px 6px;
  font-size: 12px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  white-space: nowrap;
}

.aqi-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.1);
  padding: 1rem;
  width: 300px;
  font-family: sans-serif;
  margin-bottom: 10px;
}

.aqi-header {
  display: flex;
  justify-content: space-between;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.aqi-location {
  color: #2b2b2b;
}

.aqi-status {
  color: #13a261;
}

.aqi-gauge {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0.5rem 0;
}

.gauge {
  width: 100%;
  height: auto;
}

.aqi-values {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  font-size: 0.85rem;
  text-align: center;
  gap: 0.5rem 0;
}

.aqi-values span {
  display: block;
  color: #666;
}

.aqi-values strong {
  display: block;
  font-size: 1rem;
  font-weight: bold;
  margin-top: 2px;
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin: 2px auto 0;
}

.dot.green {
  background: #13a261;
}

.dot.gray {
  background: #ccc;
}

.svg-inline-loader {
  width: 24px;
  height: 24px;
  display: inline-block;
}

.svg-inline-loader svg {
  width: 100%;
  height: 100%;
  display: block;
}

.circle-badge {
  width: 62px !important;
  height: 62px;
  border-radius: 50%;
  color: white;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* 🔝 Sekme başlığı: kaydırma alanının DIŞINDA sabit durur (yükseklik/scroll
   JS ile ayarlanır — setupSearchPanelLayout). Bu yüzden ağır cam kutuya gerek
   yok; panelle akışkan, hafif bir ayraç yeterli. */
#aramageneldiv {
  background: transparent;
  padding: 2px 2px 6px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* 🎓 YKR Öğretici Tur (Intro.js override + "bir daha gösterme") */
.ykr-tour-tooltip {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(14px) saturate(160%);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3) !important;
  max-width: 340px !important;
  min-width: 260px !important;
}
.ykr-tour-tooltip .introjs-tooltip-title {
  font-weight: 700;
  color: #111;
}
.ykr-tour-tooltip .introjs-tooltiptext {
  color: #222;
  font-size: 13.5px;
  line-height: 1.45;
}
.ykr-tour-tooltip .introjs-button {
  border-radius: 8px;
  padding: 4px 14px;
  font-size: 12.5px;
  text-shadow: none;
  background: #f3f4f6;
  border: 1px solid #d9dbe0;
  color: #111;
}
.ykr-tour-tooltip .introjs-nextbutton,
.ykr-tour-tooltip .introjs-donebutton {
  background: #1a73e8 !important;
  border-color: #1a73e8 !important;
  color: #fff !important;
  text-shadow: none !important;
  background-image: none !important;
}
/* Intro.js varsayılan hover/active/focus stilleri maviyi bozuyor — düzelt */
.ykr-tour-tooltip .introjs-nextbutton:hover,
.ykr-tour-tooltip .introjs-donebutton:hover {
  background: #1557b0 !important;
  border-color: #1557b0 !important;
  color: #fff !important;
}
.ykr-tour-tooltip .introjs-nextbutton:active,
.ykr-tour-tooltip .introjs-nextbutton:focus,
.ykr-tour-tooltip .introjs-donebutton:active,
.ykr-tour-tooltip .introjs-donebutton:focus {
  background: #124a96 !important;
  border-color: #124a96 !important;
  color: #fff !important;
  box-shadow: 0 0 0 3px rgba(26, 115, 232, 0.25) !important;
}
.ykr-tour-tooltip .introjs-prevbutton:hover,
.ykr-tour-tooltip .introjs-prevbutton:focus,
.ykr-tour-tooltip .introjs-prevbutton:active {
  background: #e8eaee !important;
  border-color: #c9ccd3 !important;
  color: #111 !important;
  box-shadow: none !important;
}
.ykr-tour-highlight {
  border-radius: 10px;
}
.ykr-tour-dsa {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 8px 12px 10px;
  font-size: 12px;
  color: #444;
  cursor: pointer;
  user-select: none;
}
.ykr-tour-dsa input {
  cursor: pointer;
  margin: 0;
}
#ykrHelpTourBtn {
  width: 29px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

/* 🏙️ İmar Durumu modalı: neredeyse tam ekran ama kenarlarda backdrop görünsün
   ki bir modal olduğu belli olsun (kenardan kenara "modal-fullscreen" değil).
   Sınıflar/yükseklikler JS'te uygulanır — index.html değiştirilmez. */
#imarModal .modal-dialog.modal-imar {
  max-width: 92vw;
  width: 92vw;
  margin: 4vh auto;
}
#imarModal .modal-imar .modal-content {
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45);
}

/* 📊 Ek Detaylar tablosu: tıkla-sırala başlıkları */
.feature-sort-table th.ft-sortable {
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  position: relative;
  padding-right: 18px !important;
}
.feature-sort-table th.ft-sortable::after {
  content: "⇅";
  position: absolute;
  right: 5px;
  opacity: 0.35;
  font-size: 11px;
}
.feature-sort-table th.ft-sortable:hover::after {
  opacity: 0.7;
}
.feature-sort-table th.ft-sortable.ft-asc::after {
  content: "▲";
  opacity: 1;
}
.feature-sort-table th.ft-sortable.ft-desc::after {
  content: "▼";
  opacity: 1;
}

/* 🗒️ Lejant: uzun GetLegendGraphic görselleri sayfadan taşmasın —
   maksimum yükseklik verilir, aşınca kutu içinde kaydırılır. */
#legendContainer {
  max-height: 50vh;
  overflow: hidden;
}
#legendContainer #legendInner {
  max-height: calc(50vh - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* 📦 Sekme içerik kutusu */
.search-tabs-container .tab-pane {
  border-top: none;
  padding: 6px 8px;
}

.search-tabs-container .left-card {
  border-radius: 4px;
  margin-bottom: 6px;
  transition: background 0.2s ease, border-color 0.2s ease;
  cursor: pointer;
  padding: 4px 6px;
}

.search-tabs-container .left-card:hover {
  background: #f5f5f5;
}


.search-tabs-container .left-card .card-header {
  font-size: 12.5px;
  font-weight: 500;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
}

/* 🔘 Kart içi butonlar */
.search-tabs-container .left-card .btn {
  font-size: 11px;
  padding: 1px 5px;
  color: #333;
}

.search-tabs-container .left-card .btn:hover {
  background-color: #e6e6e6;
  border-color: #999;
}

/* 🧱 Accordion */
.search-tabs-container .accordion-item {
  border-radius: 4px;
  margin-bottom: 4px;
  overflow: hidden;
}

.search-tabs-container .accordion-button {
  font-size: 12.5px;
  padding: 6px 10px;
  background-color: #f8f9fa;
  color: #212529;
}

.search-tabs-container .accordion-button:not(.collapsed) {
  background-color: #e4e4e4;
  color: #000;
}

.search-tabs-container .accordion-body {
  background: #ffffff;
  padding: 6px 8px;
}

.periodMain {
  color: black !important;
}


.btn-outline-secondary:hover {
  background-color: white;
  color: #6c757d;
  /* Ya da istediğin bir renk */
}

.btn-outline-secondary:click {
  background-color: white;
  color: #6c757d;
  /* Ya da istediğin bir renk */
}

/* ============================= */
/*  POI ICON BOX – COMPACT      */
/* ============================= */

/* 4 box yan yana */
.poi-category-container .row>.col {
  flex: 0 0 25%;
  max-width: 25%;
}

/* Box */
.category-box {
  background: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  min-height: 86px;
  /* YÜKSEKLİK KÜÇÜLDÜ */
  transition: border-color 0.15s ease, transform 0.1s ease;
}

/* Hover */
.category-box:hover {
  border-color: #cfcfcf;
  transform: translateY(-1px);
}

/* İkon alanı */
.category-icon {
  width: 32px;
  height: 32px;
  margin-bottom: 2px;
  /* ikon–yazı arası azaldı */
}

/* İkon */
.category-icon img {
  width: 24px;
  height: 24px;
}

/* Yazı */
.category-text {
  font-size: 11px;
  /* küçüldü */
  font-weight: 600;
  line-height: 1.1;
  margin-top: 2px;
  padding: 0;
  color: #222;
  text-align: center;
}

/* Tablet: 3 kolon */
@media (max-width: 992px) {
  .poi-category-container .row>.col {
    flex: 0 0 33.3333%;
    max-width: 33.3333%;
  }
}

/* Mobil: 2 kolon */
@media (max-width: 576px) {
  .poi-category-container .row>.col {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

/* POI üst kategori başlığı */
.poi-group-header {
  border-bottom: 1px solid #ddd;
  /* ALT ÇİZGİ */
  cursor: pointer;
}

.poi-group-title {
  font-size: 12px;
  font-weight: 600;
  color: #222;
}

/* Chevron */
.poi-group-toggle {
  font-size: 12px;
  color: #666;
  transition: transform 0.2s ease;
}

/* Açıkken çevir */
.poi-group-header[aria-expanded="true"] .poi-group-toggle {
  transform: rotate(180deg);
}

#searchInput {
  background: transparent !important
}

.winbox {
  z-index: 99999 !important;
}

.form-check-input {
  cursor: pointer;
}

.form-check-input:hover {
  border-color: black;
}

.form-check-input:focus {
  border-color: black;
  box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .25);
}

.form-check-input:checked {
  background-color: black;
  border-color: black;
}

.form-check-input:checked:hover {
  background-color: black;
  border-color: black;
}

.form-check-input:active {
  filter: brightness(0.95);
}

.form-check-input:checked:focus {
  box-shadow: 0 0 0 .2rem rgba(108, 117, 125, .35);
}