html,body{
  height:100%;
  margin:0;
  font-family:-apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important;
  background:#f7f9fb;
  overflow:hidden;
}


#sidebar{
  position:absolute;
  left:0;top:0;
  width:340px;height:100%;
  background:#fff;
  border-right:1px solid #e6eef6;
  box-shadow:2px 0 6px rgba(0,0,0,0.06);
  padding:18px;
  box-sizing:border-box;
  overflow:auto;
  transition:transform .35s ease;
  z-index:1200;

  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
  overscroll-behavior: contain;
}
#sidebar.closed{transform:translateX(-100%);box-shadow:none;border-right:none;}
#toggle-btn{
  position:absolute;
  top:20px;left:340px;
  width:28px;height:48px;
  background:#fff;border:1px solid #d0d7df;border-left:none;
  border-radius:0 6px 6px 0;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;z-index:2000;
  box-shadow:0 1px 3px rgba(0,0,0,0.15);
  transition:background 0.2s ease, left .35s ease;
}
#toggle-btn:hover{background:#f3f4f6;}
#toggle-btn span{font-size:14pt;color:#e5e7eb;user-select:none;}

#sidebar .description{
font-weight:400;font-style: normal;font-size:8pt;color:#445;line-height:1.25;margin-bottom:12px;
  
  word-spacing: normal;
  letter-spacing: normal;

  
  text-align-last: left;
  text-align: left !important;
}
#search{width:100%;padding:6px 8px;font-size:16px;font-style:italic;border:1px solid #d0d7df;border-radius:6px;margin-bottom:12px;box-sizing:border-box;}
#search:focus { outline: none !important; }

.film{margin-bottom:10px;border-bottom:1px solid rgba(229,231,235,0.28);padding-bottom:8px;}
#film-list{margin-bottom:0 !important;padding-bottom:0 !important;}

.film:last-of-type{margin-bottom:0;border-bottom:none;padding-bottom:0;}
.film-title{cursor:pointer;font-weight:500;font-size:11pt;color:#e5e7eb;margin-bottom:6px;}
.mekan-list{list-style:disc;margin:0 0 0 18px;padding:0;display:none;}
.mekan-list li{font-weight:400;font-size:9pt;margin-bottom:6px;cursor:pointer;color:#e5e7eb;}
.mekan-list li:hover{text-decoration: none;}
#map{position:absolute;left:0;top:0;right:0;bottom:0;z-index:1;}
.leaflet-control-zoom{position:absolute !important;bottom: 30px;right:20px;transform: scale(0.75);border-radius:6px;box-shadow:0 1px 2px rgba(0,0,0,0.1);}
.leaflet-popup-content img{max-width:200px;height:auto;border-radius:6px;margin-top:6px;display:block;}
.leaflet-popup-content-wrapper {width:280px !important;max-width:280px !important;}
.leaflet-popup-content { font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif !important; font-weight: 400; }



.numeric-scale {
      position:absolute;
      top:8px;
      bottom:auto;
      right:8px;
      z-index:1000;
      background:rgba(255,255,255,0.7);
      border-radius:4px;
      padding:2px 6px;
      font-size:10px;
      color:#374151;
      font-family:system-ui, sans-serif;
      pointer-events:none;
    }
    .map-attribution{
      position:absolute;
      bottom:6px;
      right:8px;
      z-index:1000;
      background:rgba(255,255,255,0.7);
      border-radius:4px;
      padding:2px 6px;
      font-size:10px;
      color:#374151;
      font-family:system-ui, sans-serif;
      line-height:1.2;
    }
    .map-attribution .credit-full{ display:inline; }
    .map-attribution .credit-short{ display:none; }

.map-attribution .credit-short{ display:none; }
    }

    .map-attribution a{
      color:#374151;
      text-decoration:none;
    }
    .map-attribution a:hover{ text-decoration: none; }






.leaflet-control-zoom {
  display: none !important;
  visibility: hidden !important;
}




.leaflet-control-attribution {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}



.tab-btn.active {

  background: #e8ecf3 !important;
  
  border-color: #ccc !important;

}


.tab-btn {
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}
.tab-btn:hover {
  background: #f1f4f9 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}


.tab-content {
  display: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
.tab-content.active-visible {
  display: block;
  opacity: 1;
  visibility: visible;
  position: relative;
  z-index: 10;
}
.tab-content {
  display: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.tab-content.active-visible {
  display: block;
  opacity: 1;
}


.film-title {
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease, color 0.18s ease;
  padding:6px 8px;
  border-radius:6px;
}
.film-title:hover {
  background: #f1f4f9;
  transform: translateY(-2px);
  box-shadow: 0 1px 6px rgba(0,0,0,0.06);
  color: #111;
}
.mekan-list li {
  transition: transform 0.16s ease, color 0.16s ease, padding-left 0.16s ease;
  padding-left:2px;
  border-radius:4px;
}
.mekan-list li:hover {
  transform: translateX(4px);
  color: #111;
  text-decoration: none;
  background: rgba(0,0,0,0.01);
  padding-left:6px;
}

#filter-info { font-size:12px; color:#0f172a; display:none; }
#filter-info .btn-clear{
  /* Keep text size as-is (inherit), just reduce button box height */
  font: inherit;
  padding: 0 10px !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
  display: inline-flex;
  align-items: center;
  border-radius: 8px;
}



.film-title.selected {
  background: #e8ecf3 !important;
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  border-radius: 6px;
  transform: translateY(-1px);
}


#map-filter-info {
  color: #444455 !important;
}
#map-filter-info .btn-clear:hover {
  background: #f2f4fa !important;
}

#map-filter-info {
  color: #444455 !important;
}

#map-filter-info .btn-clear {
  margin-left: 8px;
  cursor: pointer;
  font-weight: 500;
  background: #f2f3f7; 
  color: #333;
  border: none; 
  border-radius: 6px;
  padding: 6px 10px;
  transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.15s ease;
}

#map-filter-info .btn-clear:hover {
  background: #f2f4fa !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}


@media (max-width: 768px) {

  .tab-btn {
    color: #333 !important;
  }


  #sidebar {
    width: 200px !important;
  }


  #toggle-btn {
    left: 200px !important;
  }


  #sidebar.closed + #toggle-btn {
    left: 0 !important;
  }
}



@media (max-width: 768px){
  #sidebar{ width: 42vw !important; min-width: 170px !important; }
  #toggle-btn{ left: 42vw !important; }
  #sidebar.closed + #toggle-btn{ left: 0 !important; }
  #map-filter-info {
    width: 90% !important;
    max-width: 90% !important;
    font-size: 11px !important;
    padding: 4px 8px !important;
    text-align: center !important;
    bottom: 10px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    border-radius: 8px !important;
  }
}


@media (max-width: 768px) {
  .numeric-scale {
    display: none !important;
  }
}


@media (max-width: 768px) {
  .film-title {
    font-size: 10pt !important;
  }
}



.leaflet-popup-content img[src=""], 
.leaflet-popup-content img:not([src]), 
.leaflet-popup-content img[src*="lh3.googleusercontent.com"],
.leaflet-popup-content img[src*="mymaps.usercontent.google.com"] {
  display: none !important;
}


.carousel-container {
  margin-top: 4px;
  display: inline-block;
}

.carousel-controls {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.carousel-buttons {
  display: flex;
  gap: 4px;
}

.carousel-btn {
  border: 1px solid #d0d7df;
  background: #f5f7fa;
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  line-height: 1.2;
  cursor: pointer;
  font-family: inherit;
  color: #333;
}

.carousel-btn:hover {
  background: #e8ecf3;
}

.carousel-counter {
  font-size: 10px;
  color: #555;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #d0d7df;
  background: #f9fafb;
  font-family: inherit;
}


.period-btn {
  display:block;
  width:100%;
  text-align:left;
  padding:6px 8px;
  margin-bottom:6px;
  font-size:11pt;
  border:1px solid #f0f4f8;
  border-radius:6px;
  background:#fff;
  color:#e5e7eb;
  cursor:pointer;
  transition: background-color 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
}
.period-btn:hover {
  background:#f1f4f9;
  transform: translateY(-2px);
  box-shadow:0 1px 6px rgba(0,0,0,0.06);
}
.period-btn.active {
  background:#e8ecf3 !important;
  
  box-shadow:0 1px 4px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}

#map-filter-info .btn-clear {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.description-justify{
  text-align: justify;
  text-align-last: left;
}

.cc-license{

  font-size: 8pt;
  line-height: 1.25;
  color: #9ca3af;
  margin-top: 6px;
  
  text-align-last: left;
  text-align: left !important;
}

.cc-license a{
  color: #374151;
  text-decoration: none;
}
.cc-license a:hover{
  text-decoration: none;
}

/* --- Tab3: seçili poligon özeti + film listesi --- */
.polygon-summary{
  margin: 6px 0 10px 0;
  padding: 10px 10px;
  border: 1px solid #e63946;
  border-radius: 10px;
  background: rgba(2,6,23,0.6);
  box-shadow: 0 0 0 1px rgba(230,57,70,0.35),  0 6px 16px rgba(0,0,0,0.35);
}
.polygon-kpis{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  margin-top: 8px;
}
.polygon-kpis .k{
  display:block;
  font-size: 10px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(156,163,175,0.95);
}
.polygon-kpis .v{
  display:block;
  font-size: 14px;
  font-weight: 700;
  color: #e5e7eb;
  margin-top: 2px;
}
.polygon-kpi-sub{
  margin-top: 6px;
  font-size: 10px;
  color: rgba(156,163,175,0.95);
}

.fi-ico{display:inline-block;margin-right:8px;}
#map-filter-info .btn-clear{
  padding: 0 10px !important;
  height: 22px !important;
  min-height: 22px !important;
  line-height: 22px !important;
}
.period-row{
  margin-top: 10px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.period-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10pt;
  color: #cbd5f5;
  letter-spacing: 0.2px;
}
.period-box{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid #334155;
  background: rgba(148,163,184,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
}
.period-box.on{
  background: #e63946;
  border-color: #e63946;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.55);
}

/* Tab3: dönem göstergeleri tek satır + KPI etiketi rengi */
.period-row{
  margin-top: 10px;
  display: flex;
  gap: 12px;
  flex-wrap: nowrap;
  align-items: center;
  white-space: nowrap;
}
.period-item{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 9.5pt;
  color: #9ca3af; /* KPI etiketi (ROTA vb.) ile uyumlu */
  letter-spacing: 0.1px;
  white-space: nowrap;
}
.period-box{
  width: 10px;
  height: 10px;
  border-radius: 3px;
  border: 1px solid #334155;
  background: rgba(148,163,184,0.12);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.period-box.on{
  background: #e63946;
  border-color: #e63946;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.55);
}

/* FIX (mobil): Tab3 dönem satırı taşmasın, gerektiğinde alt satıra kırılsın */
@media (max-width: 768px){
  .period-row{
    flex-wrap: wrap !important;
    white-space: normal !important;
    gap: 10px 12px !important;
  }
  .period-item{
    font-size: 9pt !important;
  }
}


/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




.leaflet-popup-content .carousel-image {
    display: none !important;
}
.leaflet-popup-content .carousel-image.active {
    display: block !important;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* --- Sinematik koyu tema override'ları --- */

#sidebar .description{

  
  text-align-last: left;
  text-align: left !important;
}


body {
  background: #020617;
  color: #e5e7eb;
}

#sidebar {
  background: #020617;
  border-right: 1px solid #111827;
  box-shadow: 2px 0 12px rgba(0,0,0,0.65);
}

#sidebar h1 {
  color: #e5e7eb;
}

#sidebar .description{

  color: #9ca3af;
  text-align: left !important;
}

#toggle-btn {
  background: #020617;
  border-color: #111827;
}

#toggle-btn:hover {
  background: #1a2235;
}

#search {
  background: #020617;
  border-color: #1f2933;
  color: #e5e7eb;
}

#search::placeholder {
  color: #6b7280;
}

.film-title {
  display: block;
  width: 100%;
  text-align: left;
  background: #020617;
  border: 1px solid #1f2933;
  border-radius: 6px;
  padding: 6px 8px;
  margin: 0 0 6px 0;
  color: #e5e7eb;
  box-sizing: border-box;
}
.film {
  border-bottom: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 8px;
}


.film-title:hover {
  background: #1a2235;
  border-color: #334155;
  color: #e5e7eb;
}

.film-title.selected {
  background: #1a2235 !important;
  border-color: #e63946 !important;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.45);
  transform: none !important;
}

.mekan-list li {
  color: #cbd5f5;
}

.mekan-list li:hover {
  background: #1a2235;
  color: #e5e7eb;
}

.tab-btn {
  background: #020617 !important;
  border-color: #1f2933 !important;
  color: #e5e7eb !important;
}

.tab-btn:hover {
  background: #1a2235 !important;
}

.tab-btn.active {

  background: #1a2235 !important;
  border-color: #e63946 !important;

}

.period-btn {
  background: #020617;
  border-color: #1f2933;
  color: #e5e7eb;
}

.period-btn:hover {
  background: #1a2235;
}

.period-btn.active {
  background: #1a2235 !important;
  border-color: #e63946 !important;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.4);
}

.leaflet-popup-content-wrapper {
  background: #020617;
  color: #e5e7eb;
  border: 1px solid #111827;
}

.leaflet-popup-content {
  color: #e5e7eb;
}
.leaflet-tooltip{
  background:#020617 !important;
  color:#e5e7eb !important;
  border:1px solid #111827 !important;
  border-radius:10px !important;
  padding:6px 10px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,0.55) !important;
  
}
.leaflet-tooltip:before{
  border-top-color:#020617 !important;
  border-bottom-color:#020617 !important;
}

#map-filter-info {
  background: rgba(15,23,42,0.92) !important;
  border-color: rgba(15,23,42,1) !important;
  color: #e5e7eb !important;
}

#map-filter-info .btn-clear {
  background: #e63946 !important;
  color: #e5e7eb !important;
  border: 0 !important;
}

#map-filter-info .btn-clear:hover {
  background: #b91c1c !important;
  border-color: #f97373 !important;
}

.numeric-scale {
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
}

.map-attribution{
  background: rgba(15,23,42,0.9);
  color: #e5e7eb;
}
.map-attribution a{
  color: #cbd5f5;
}




.cc-license a{ color: #cbd5f5; }
.carousel-btn {
  background: #020617;
  border-color: #1f2933;
  color: #e5e7eb;
}

.carousel-btn:hover {
  background: #1a2235;
}

.carousel-counter {
  background: #020617;
  border-color: #1f2933;
  color: #e5e7eb;
}

#map {
  border-radius: 10px;
  box-shadow: 0 0 0 12px #0b1120 inset;
  border: 6px solid #0b1120;
  overflow: hidden;
}

/* Sidebar kapalıyken çerçeveyi kaldır */
#sidebar.closed ~ #map {
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Popup üçgenini (tip) koyu popup ile aynı renge getir – sadece rengi dokun, şekle değil */
.leaflet-popup-tip {
  background: #020617 !important;  /* popup ile aynı zemin */
  box-shadow: none !important;     /* beyaz/soluk kenar gölgesini kaldır */
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




#search:hover {
  background:#1b2236 !important;
  color:#e5e7eb !important;
}
#search:focus {
  background:#1b2236 !important;
  color:#e5e7eb !important;
  outline:none !important;
  border-color:#1f2933 !important;
  box-shadow:none !important;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




#left-edge-hotspot {
  position: fixed;
  left: 0;
  top: 0;
  width: 24px;
  height: 100vh;
  z-index: 1400;
  pointer-events: auto;
}

/* Mobilde menü açıkken sol hotspot dokunuşları çalmasın */
#sidebar:not(.closed) ~ #left-edge-hotspot { pointer-events: none; }
#sidebar.closed ~ #left-edge-hotspot { pointer-events: auto; }

#bottom-edge-hotspot {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100vw;
  height: 80px;
  z-index: 0;
  pointer-events: none;
}
#map-filter-info {
  transition: opacity 0.25s ease;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




#sidebar-slider {
  margin: 6px 0 10px 0;
}

/* Biraz daha yatay ve kompakt bir oran (yaklaşık 2.3:1) */
.slider-image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 42%;
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid #1f2933;
  background: #020617;
  box-shadow: 0 8px 20px rgba(0,0,0,0.6);
}

#sidebar-slider-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#sidebar-slider-image.visible {
  opacity: 1;
}

/* Noktaları tamamen gizle */
.slider-dots {
  display: none !important;
}

.slider-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #4b5563;
  opacity: 0.6;
  cursor: pointer;
  transition: opacity 0.2s ease, transform 0.15s ease, background-color 0.2s ease, width 0.2s ease;
}

.slider-dot.active {
  opacity: 1;
  background: #e63946;
  transform: translateY(-1px);
  width: 14px;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




#film-list mark {
  background-color: #5a70ad;
  color: #e5e7eb;
  padding: 0 1px;
  border-radius: 2px;
}

/* Tab1 arama: eşleşmeyen mekânları hafifçe soluklaştır */
.search-nonmatch{opacity:0.55;}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Film listesinde aşağıda içerik olduğunu ima eden "scroll hint" */

#scroll-hint{
  position: sticky;
  bottom: -18px;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(2,6,23,0), rgba(2,6,23,0.92) 55%, rgba(2,6,23,0.98));
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

#scroll-hint .hint-pill{
  display:flex;
  align-items:center;
  gap:8px;
  padding:6px 10px;
  border-radius:999px;
  background: rgba(15,23,42,0.85);
  border: 1px solid rgba(148,163,184,0.22);
  box-shadow: 0 6px 18px rgba(0,0,0,0.45);
  backdrop-filter: blur(6px);
}

#scroll-hint .hint-icon{
  font-size: 22px;
  line-height: 1;
  color: #e5e7eb;
  text-shadow: 0 2px 8px rgba(0,0,0,0.55);
  animation: scrollPulse 1.35s ease-in-out infinite;
}

#scroll-hint .hint-text{
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(229,231,235,0.82);
}

@keyframes scrollPulse{
  0%   { transform: translateY(0); opacity: .65; }
  50%  { transform: translateY(7px); opacity: 1; }
  100% { transform: translateY(0); opacity: .65; }
}

/* Desktop'ta daha minimal istersen yazıyı kapat */
@media (min-width: 769px){
  #scroll-hint .hint-text{ opacity: 0.0; width:0; overflow:hidden; padding:0; margin:0; }
  #scroll-hint .hint-pill{ padding:6px 12px; }
}
50%  { transform: translateY(6px); opacity: 1; }
  100% { transform: translateY(0); opacity: .4; }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Tab3 (Bölgeler): scroll hint, Tab1 ile aynı görünüm */
#scroll-hint-bolgeler{
  position: sticky;
  bottom: -18px;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(2,6,23,0), rgba(2,6,23,0.92) 55%, rgba(2,6,23,0.98));
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* FIX: Seçili (active) dönem butonu yukarı kaymasın — sadece active durumda transform'u sıfırla */
.period-btn.active,
.period-btn.active:hover,
.period-btn.active:focus,
.period-btn.active:focus-visible{
  transform: none !important;
}


/* FIX — tooltip'teki ters (yukarı bakan) küçük üçgeni kaldır, aşağı bakan kuyruk kalsın */
.leaflet-tooltip-top:before,
.leaflet-tooltip-top:after{
  border-bottom-color: transparent !important;
}
.leaflet-tooltip-bottom:before,
.leaflet-tooltip-bottom:after{
  border-top-color: transparent !important;
}


/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




.leaflet-control-attribution a:hover{ text-decoration:none; opacity:1; }

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* FIX: Map credits (CARTO / OSM) links should be underlined ONLY on hover (remain clickable) */
.map-attribution a,
.map-attribution a:visited,
.map-attribution a:active,
.map-attribution a:focus,
.map-attribution a:focus-visible{
  text-decoration: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.map-attribution a:hover{
  text-decoration: none; !important;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* MOBILE FIX: move custom map credits box to top-right (so scale control has room) */
@media (max-width: 768px){
  .map-attribution{
    bottom: auto !important;
    top: 8px !important;
    right: 8px !important;
    left: auto !important;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Thesis title: very light emphasis (medium, not bold) */
.thesis-title{
  font-style: normal;
  font-weight: 600;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* --- Tab1 Arama: daha efektif UI --- */
.search-wrap{ margin-bottom: 12px; }
.search-row{ position: relative; display:flex; align-items:center; }
#search{
  width:100%;
  padding-right: 34px; /* clear butonu için */
}
.search-clear{
  position:absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  border-radius: 8px;
  border: 1px solid rgba(148,163,184,0.25);
  background: rgba(15,23,42,0.75);
  color: rgba(229,231,235,0.95);
  cursor: pointer;
  line-height: 1;
  display: none; /* boşken gizle */
}
.search-clear:hover{ background: rgba(26,34,53,0.9); }
.search-chips{
  margin-top: 8px;
  display:flex;
  flex-wrap: wrap;
  gap: 6px;
}
.search-chips .chip{
  font: inherit;
  font-size: 8.5pt;
  padding: 4px 8px;
  border-radius: 999px;
  border: 1px solid rgba(148,163,184,0.22);
  background: rgba(15,23,42,0.45);
  color: rgba(203,213,245,0.95);
  cursor: pointer;
  transition: transform 0.12s ease, background-color 0.18s ease, border-color 0.18s ease;
}
.search-chips .chip:hover{
  transform: translateY(-1px);
  background: rgba(26,34,53,0.75);
  border-color: rgba(230,57,70,0.35);
}
.search-status{
  margin-top: 8px;
  font-size: 8.5pt;
  color: rgba(156,163,175,0.95);
}
.search-help{
  margin-top: 6px;
  font-size: 8pt;
  color: rgba(107,114,128,0.95);
}
.search-help .k{
  display:inline-block;
  padding: 0 6px;
  border: 1px solid rgba(148,163,184,0.18);
  border-radius: 6px;
  background: rgba(15,23,42,0.35);
  color: rgba(229,231,235,0.92);
  font-style: normal;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Search input: avoid iOS zoom (keep 16px on mobile) but make it look smaller without narrowing the field */
@media (max-width: 768px) {
  #search{
    font-size:16px !important;         /* iOS Safari zoom engeli */
    transform: scale(0.9);             /* metin+kutuyu optik olarak küçült */
    transform-origin: left center;

    /* Görsel genişlik 100% kalsın: (111.111% * 0.9 ≈ 100%) */
    width: 111.111% !important;
    margin-right: -11.111% !important;

    box-sizing: border-box !important;
  }
}

/* Desktop: arama metni biraz daha küçük olsun */
@media (min-width: 769px) {
  #search{
    font-size:14px !important;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}





/* --- Künye & lisans: minimal, metin gibi --- */
.credits-wrap{
  margin: 4px 0 6px 0;
}
.credits-label{
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  border: none;
  background: none;
  color: #9ca3af;              /* description rengi */
  font-size: 9pt;              /* description'dan bir tık büyük */
  font-weight: 400;
  cursor: pointer;
  user-select: none;
}
.credits-label:hover{
  text-decoration: none;
}

/* Mobilde: açıkken başlık rengi de vurgulansın */
@media (max-width: 768px){
  .credits-wrap.open .credits-label{
    color: #cbd5f5;
  }
}
.credits-ico{
  font-size: 10pt;
  line-height: 1;
}

/* Desktop: içerik açık olduğu sürece başlık vurgulu kalsın */
@media (min-width: 769px){
  .credits-wrap:hover .credits-label{
    color: #cbd5f5;
  }
}
.credits-content{
  margin-top: 6px;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.18s ease;
}

/* Desktop: hover ile aç */
@media (min-width: 769px){
  .credits-wrap:hover .credits-content{
    max-height: 360px;
    opacity: 1;
  }
}

/* Mobile: class ile aç/kapa */
@media (max-width: 768px){
  .credits-wrap.open .credits-content{
    max-height: 420px;
    opacity: 1;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Sidebar başlık ayarı: mobil aynı, masaüstü bir tık daha büyük */
#sidebar h1{
  font-weight:700;
  font-size:12pt;
  margin:4px 0 6px;
}

@media (min-width: 769px){
  #sidebar h1{
    font-size:13.5pt;
    line-height:1.25;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Başlık: bilinçli satır kırımı (yalnızca masaüstü) */
#sidebar h1 .title-top,
#sidebar h1 .title-bottom{
  display: inline; /* mobilde eski davranış: tarayıcı doğal sarsın */
}

@media (min-width: 769px){
  #sidebar h1 .title-top,
  #sidebar h1 .title-bottom{
    display: block; /* masaüstü: Ankara’nın ilk satır, kalan ikinci satır */
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* --- Sidebar scroll davranışı: sadece listeler kayar --- */
#sidebar{
  overflow: hidden !important;          /* tüm sidebar kaymasın */
  display: flex !important;
  flex-direction: column !important;
}

/* Tab içerikleri sidebar içinde kalan alanı doldursun */
#tab-filmler, #tab-yogunluk, #tab-bolgeler{
  flex: 1 1 auto;
  min-height: 0;                         /* flex içinde scroll için kritik */
}

/* Aktif tab: flex kolon (içeride sabit üst + scroll liste) */
#tab-filmler.active-visible,
#tab-yogunluk.active-visible,
#tab-bolgeler.active-visible{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* Tab1: sadece film listesi alanı kayar */
.film-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Tab3: sadece poligon film listesi alanı kayar */
.polygon-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Scroll hint'ler scroll alanının içinde sticky kalsın */

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* --- Sidebar: sadece listeler kayar (Tab1 + Tab3) --- */
#sidebar{
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Aktif tab'lar kalan yüksekliği doldursun */
#tab-filmler.active-visible,
#tab-yogunluk.active-visible,
#tab-bolgeler.active-visible{
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  flex: 1 1 auto !important;
}

/* Tab1 scroll alanı */
.film-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* Tab3 panel + scroll alanı */
#polygon-panel{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
#polygon-summary{ flex: 0 0 auto; }

.polygon-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Mobil: Tab3 dönem yılları daha kompakt (taşma olmasın) */
@media (max-width: 768px){
  .period-row{
    flex-wrap: nowrap !important;
    justify-content: space-between;
    gap: 8px;
  }
  .period-item{
    font-size: 8pt;          /* bir tık daha küçük */
    line-height: 1.1;
    white-space: nowrap;
  }
  .period-box{
    width: 7px;
    height: 7px;
    flex: 0 0 7px;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* Mobil: Tab3 dönem etiketlerini kısalt (apostrofsuz) */
.period-short{ display:none; }

@media (max-width: 768px){
  .period-full{ display:none; }
  .period-short{
    display:inline;
    font-size: 8pt;
    line-height: 1.1;
    white-space: nowrap;
  }
}

/* --- During search, don't show film as selected (only highlight marks) --- */
body.search-active .film-title.selected{
  background: inherit !important;
  border-color: inherit !important;
  box-shadow: none !important;
}


/* --- During search: film titles should NOT look selected at all --- */
body.search-active .film-title{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}
body.search-active .film-title.selected{
  border-color: transparent !important;
  box-shadow: none !important;
  outline: none !important;
}




/* FIX: Arama sırasında seçili görünüm yalnızca kullanıcı tıklarsa gelsin */
body.search-active:not(.search-has-selection) .film-title.selected{
  background: inherit !important;
  border-color: transparent !important;
  box-shadow: none !important;
}
body.search-active.search-has-selection .film-title.selected{
  background: #1a2235 !important;
  border-color: #e63946 !important;
  box-shadow: 0 0 0 1px rgba(230,57,70,0.45) !important;
}



/* SEARCH DISABLED (non-destructive): keep DOM to preserve layout */
#search{ display:none !important; }
.search-wrap, .search-row, .search-chips, .search-status, .search-help, .search-clear{ display:none !important; }



/* TOP scroll hint: Tab1 alt okun birebir aynısı (rotate) */
#scroll-hint-top{
  position: sticky;
  top: -18px;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(2,6,23,0), rgba(2,6,23,0.92) 55%, rgba(2,6,23,0.98));
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  transform: rotate(180deg);
}

#scroll-hint-top-bolgeler{
  position: sticky;
  top: -18px;
  width: calc(100% + 36px);
  margin-left: -18px;
  margin-right: -18px;
  height: 52px;
  background: linear-gradient(to bottom, rgba(2,6,23,0), rgba(2,6,23,0.92) 55%, rgba(2,6,23,0.98));
  display: none;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 30;
  transform: rotate(180deg);
}



/* FIX: İlk film kartı hover'da yukarı taşınca üstten kırpılmasın */
.film-scroll .film:first-child{ margin-top: 10px; }
.polygon-scroll .polygon-item:first-child{ margin-top: 10px; }
/* Eğer Tab3 listesinde class adı farklıysa güvenli ek: ilk wrapper'a da boşluk */
.polygon-scroll > :first-child{ margin-top: 10px; }


/* === MOBILE FIX (sidebar daraldıktan sonra): Tab menüsü taşmasın + Tab3 paneli bozulmasın === */
@media (max-width: 768px){
  /* 3 sekme butonu sağa taşmasın */
  #tab-menu{ 
    flex-wrap: wrap !important; 
    gap: 6px !important;
  }
  #tab-menu .tab-btn{
    flex: 1 1 calc(33.333% - 6px) !important;
    min-width: 0 !important;           /* flex içinde kritik: taşmayı engeller */
    padding: 6px 4px !important;
    font-size: 10pt !important;
    line-height: 1.15 !important;
    white-space: normal !important;     /* iki satıra düşebilir */
  }

  /* Tab3 (Kentsel Odaklar): kırmızı özet kutusu dar alanda düzenli kalsın */
  .polygon-summary{ padding: 8px 8px !important; }
  .polygon-kpis{ grid-template-columns: 1fr !important; } /* 2 sütun dar alanda bozuluyor */

  /* Dönem satırı: dar sidebar'da taşmasın (dosyada sonradan gelen nowrap override'ını ez) */
  .period-row{
    flex-wrap: wrap !important;
    white-space: normal !important;
    justify-content: flex-start !important;
    gap: 8px 10px !important;
  }
}


/* MOBILE: tab button font slightly smaller to prevent overlap */
@media (max-width: 768px){
  #tab-menu .tab-btn{
    font-size: 9pt !important;
    padding: 5px 3px !important;
    letter-spacing: -0.1px !important;
  }
}


/* === MOBILE: use sidebar width more efficiently + prevent tab buttons from overlapping === */
@media (max-width: 768px){

  /* Sidebar iç padding'i küçült: içerik daha fazla yer kazansın */
  #sidebar{
    padding: 10px !important;
  }

  /* Tab menüsünü grid yap: 2 üst + altta tek (Tab3) */
  #tab-menu{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
    margin-bottom: 10px !important;
  }
  #tab-menu .tab-btn{
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 4px !important;
    font-size: 9pt !important;
    line-height: 1.15 !important;
    white-space: normal !important;
  }
  /* 3. buton (Tab3) tam satır kaplasın */
  #tab-menu .tab-btn:nth-child(3){
    grid-column: 1 / -1 !important;
  }

  /* Scroll hint genişlik/marjinleri yeni padding'e uysun (18px -> 12px) */
  #scroll-hint,
  #scroll-hint-top,
  #scroll-hint-bolgeler,
  #scroll-hint-top-bolgeler{
    width: calc(100% + 20px) !important;
    margin-left: -10px !important;
    margin-right: -10px !important;
  }
}


/* MOBILE: tighter spacing between title, credits, and cover */
@media (max-width: 768px){
  #sidebar h1{
    margin-bottom: 4px !important; /* 4 + credits-wrap top 2 = 6px */
  }
  .credits-wrap{
    margin-top: 2px !important;
    margin-bottom: 2px !important; /* 2 + slider top 2 = 4px */
  }
  #sidebar-slider{
    margin-top: 2px !important;
  }
}



/* Mobile tab label shortening */
.tab-short{ display:none; }
@media (max-width:768px){
  .tab-full{ display:none !important; }
  .tab-short{ display:inline !important; }
}


/* FIX: Tab1 üst boşluğu Tab2 ile aynı olsun (ilk öğe margin-top'u kaldır) */
.film-scroll .film:first-child{ margin-top: 0 !important; }
.polygon-scroll .polygon-item:first-child{ margin-top: 0 !important; }
.polygon-scroll > :first-child{ margin-top: 0 !important; }

/* Hover'da üstten kırpılmayı önlemek için: ilk öğe yukarı zıplamasın */
.film-scroll .film:first-child .film-title:hover{ transform: none !important; }
.polygon-scroll > :first-child .film-title:hover{ transform: none !important; }


/* FINAL MOBILE FIX: force Film | Isı | Odak on one line */
@media (max-width:768px){

  #tab-menu{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:3px !important;
  }

  #tab-menu .tab-btn{
    flex:1 1 0 !important;
    min-width:0 !important;
    font-size:8.5pt !important;
    padding:6px 1px !important;
    white-space:nowrap !important;
  }

}




/* === Popup carousel: swipe support (mobile) === */
.leaflet-popup-content .carousel-container{
  touch-action: pan-y;
  -webkit-user-select: none;
  user-select: none;
}
.leaflet-popup-content img{
  -webkit-user-drag: none;
}



/* === Minimal size override for red "Tümünü Göster" button (desktop + mobile) === */
#map-filter-info .btn-clear{
  padding: 2px 8px !important;
  height: auto !important;
  min-height: 0 !important;
  line-height: 1.2 !important;
  display: inline-flex !important;
  align-items: center !important;
}


/* === TAB MENU FIX (keep existing style, restore 2x2 layout) === */

/* restore wrapping in all viewports */
#tab-menu{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:6px !important;
}

/* each button takes half width */
#tab-menu .tab-btn{
  flex:1 1 calc(50% - 6px) !important;
  min-width:0 !important;
  white-space:normal !important;
}

/* ensure mobile rule that forced one row is overridden */
@media (max-width:768px){
  #tab-menu{
    flex-wrap:wrap !important;
  }
  #tab-menu .tab-btn{
    flex:1 1 calc(50% - 6px) !important;
    white-space:normal !important;
  }
  .tab-full{ display:inline !important; }
  .tab-short{ display:none !important; }
}

/* divider below the whole tab block without affecting layout */
#tab-menu::after{
  content:"";
  flex-basis:100%;
  height:0;
  border-bottom:1px solid rgba(229,231,235,0.28);
  margin-top:6px;
}


/* FORCE tab button text size (final override) */
#tab-menu .tab-btn{
  font-size:11.5pt !important;
}


/* --- Tab3 başlangıç odak listesi --- */
#polygon-empty{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.polygon-empty-text{
  margin: 2px 0 10px 0;
  color: #9ca3af;
  font-size: 10pt;
  line-height: 1.3;
}
.polygon-start-scroll{
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
#bolgeler-list{
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}
#bolgeler-list .film{
  margin-bottom: 8px;
  border-bottom: none !important;
  padding-bottom: 0 !important;
}
#bolgeler-list .film:last-of-type{
  margin-bottom: 0;
}
#bolgeler-list .film-title{
  margin-bottom: 0;
}



/* Tab1 + Tab3 list typography sync */
.film-title,
#bolgeler-list .film-title{
  font-size: 11pt !important;
  font-weight: 400 !important;
}
@media (max-width: 768px){
  .film-title,
  #bolgeler-list .film-title{
    font-size: 11pt !important;
    font-weight: 400 !important;
  }
}