/* CSS Variables artık layout.css'te tanımlı - Geriye dönük uyumluluk için bırakıldı */
:root {
  --light-bg: var(--color-bg-light, #f8f9fa);
  --border-color: var(--color-border, #e9ecef);
  --shadow-md: var(--shadow-md, 0 4px 6px -1px rgba(0, 0, 0, 0.1));
  --shadow-sm: var(--shadow-sm, 0 1px 2px 0 rgba(0, 0, 0, 0.05));
  --shadow-lg: var(--shadow-lg, 0 10px 15px -3px rgba(0, 0, 0, 0.1));
  --primary-color: var(--color-primary, #007bff);
  --primary-dark: var(--color-primary-dark, #0056b3);
  --text-primary: var(--color-text-primary, #212529);
}

/* Harita görünürlük geçişleri (tek #map3D) */
#map3D { transition: opacity 200ms linear; }

/* Sidebar CSS'leri sidebar.css dosyasına taşındı */
.footer-tkgm { width: 100%; max-width: 100%; text-align: center; color: #888; font-size: 0.98em; padding: 10px 0 4px 0; border-top: 1px solid #eee; background: #fff; position: fixed; left: 0; right: 0; bottom: 0; z-index: 99999; box-sizing: border-box; }
.footer-tkgm a { color: #1976d2; text-decoration: none; }
/* Body ve HTML artık layout.css'te yönetiliyor - Bu kurallar kaldırıldı */
/* Geriye dönük uyumluluk için eski map stili */
#map { width: 100%; height: 60vh; min-height: 400px; position: relative; }

/* Katman stilleri */
.centroid-marker { z-index: 1000 !important; }

/* Leaflet kaldırıldı */
.slope_info { margin: 0 1rem 1rem 1rem; font-size: 12px; }
.plot3d { width: 100%; height: 230px; background: #eee; position: relative; margin-bottom: 1rem; }

.feedback-btn-pro { background: #fff; color: #d32f2f; border: 2px solid #d32f2f; border-radius: 10px; font-weight: 600; font-size: 1.08em; padding: 14px 0; box-shadow: 0 2px 8px rgba(30,30,40,0.07); transition: all 0.18s; letter-spacing: 0.01em; display: flex; align-items: center; justify-content: center; }
.feedback-btn-pro i { font-size: 1.2em; margin-right: 8px; }
.feedback-btn-pro:hover, .feedback-btn-pro:focus { background: #d32f2f; color: #fff; border-color: #d32f2f; box-shadow: 0 4px 16px rgba(211,47,47,0.13); }



/* Button separator */
.btn-separator { display: inline-block; width: 1px; height: 30px; background: rgba(0, 0, 0, 0.2); margin: 0 8px; vertical-align: middle; }

/* 3D Toggle buton aktif durumu - parametersButtons.css'te tanımlı */

/* nodata class'ı için buton stilleri - style.css'te tanımlı */
/* layerGroup aktifken turuncu görünüm - harici CSS'te tanımlı */

#toolbar { background: rgba(255, 255, 255, 0.95); border-radius: 8px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); font-size: 12px; }
#toolbar label { display: block; margin-bottom: 5px; font-weight: 500; color: #333; }
#toolbar input[type="range"] { width: 100px; margin-right: 10px; }
#toolbar span { font-weight: bold; color: #007bff; }

/* 3D Harita Buton Stili (kaldırıldı):
   Özel attribute selector, 2D modda başlık "3D" içerdiği için yanlışlıkla mor arka plan veriyordu.
   Varsayılan `.toggle-btn.active` rengi kullanılacak. */

/* Harita altı içerik container - 2D/3D toggle için */
.below-map-container { transition: max-height 0.9s ease, opacity 0.7s ease, transform 0.7s ease; opacity: 0; max-height: 0; overflow: hidden; transform: translateY(18px); }
.below-map-container.open { opacity: 1; max-height: var(--bm-max, 1200px); transform: translateY(0); overflow: hidden; }

/* Map Area artık .pp-map-container olarak layout.css'te yönetiliyor */
/* Geriye dönük uyumluluk için eski kurallar korundu */
#mapArea {
  /* Layout.css'teki pp-map-container kuralları geçerli */
}

#map3D {
  /* Layout.css'teki pp-map kuralları geçerli */
}

.mapboxgl-canvas-container,
.mapboxgl-canvas {
  overflow: hidden !important;
}

/* Mapbox sağ üst kontrol kapsayıcısını gizle */
.mapboxgl-ctrl-top-right { display: none !important; }
#cameraControlPanel .cam-btn:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.3); }

/* Kullanıcı konum markeri */
.user-location-marker { width: 16px; height: 16px; border-radius: 50%; background: #2ecc71; border: 2px solid #ffffff; box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.35); }

/* Mapbox canvas tam doldursun */
.mapboxgl-canvas { width: 100% !important; height: 100% !important; }

/* Overlay Drawer: below-map-content mapArea üzerinde kayan çekmece */
#below-map-content { 
  position: absolute; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  max-height: 65vh; 
  height: 0; 
  transform: translateY(0); 
  opacity: 0; 
  transition: height 380ms ease, opacity 260ms ease; 
  background: rgba(255,255,255,0.96); 
  backdrop-filter: blur(6px); 
  overflow: hidden; 
  border-top: 1px solid #e9ecef; 
  will-change: height, opacity; 
  z-index: 11000; 
  pointer-events: none;
  margin: 0 !important;
  padding: 0;
}
#below-map-content.open { 
  height: min(65vh, var(--bm-h, 500px)); 
  opacity: 1; 
  overflow: auto; 
  pointer-events: auto; 
}

/* Fullscreen mask + snapshot */
#fs-mask { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity 160ms ease; z-index: 100000; }
#fs-mask.show { opacity: 1; }
#fs-snapshot { position: fixed; inset: 0; background-position: center center; background-size: cover; background-repeat: no-repeat; z-index: 100001; opacity: 0; transition: opacity 80ms linear; pointer-events: none; }

/* Info cards and camera controls extra styles */
.info-card { transition: box-shadow 0.2s; }
.info-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.13); z-index: 2; }
.curveButton { border-radius: 6px; background: #f5f6fa; border: 1px solid #e0e0e0; min-width: 60px; margin: 0 2px; }
#cameraControlPanel .camera-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; justify-items: center; margin-bottom: 6px; background: rgba(20,20,20,0.38); border: 1px solid rgba(255,255,255,0.22); padding: 6px 8px; border-radius: 10px; backdrop-filter: blur(4px); }
#cameraControlPanel .cam-dpad { position: relative; width: 170px; height: 170px; background: rgba(20,20,20,0.38); border: 1px solid rgba(255,255,255,0.22); border-radius: 16px; backdrop-filter: blur(4px); display: grid; grid-template-rows: 1fr 1fr 1fr; grid-template-columns: 1fr 1fr 1fr; align-items: center; justify-items: center; gap: 6px; padding: 10px; }
#cameraControlPanel .center-col { grid-row: 2; grid-column: 2; display: grid; gap: 6px; }
#cameraControlPanel .cam-up { grid-row: 1; grid-column: 2; }
#cameraControlPanel .cam-down { grid-row: 3; grid-column: 2; }
#cameraControlPanel .cam-left { grid-row: 2; grid-column: 1; }
#cameraControlPanel .cam-right { grid-row: 2; grid-column: 3; }
#cameraControlPanel .cam-turn-left { grid-row: 1; grid-column: 1; }
#cameraControlPanel .cam-turn-right { grid-row: 1; grid-column: 3; }
#cameraControlPanel .cam-btn { width: 32px; height: 32px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.35); background: rgba(255,255,255,0.22); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.18); transition: transform 0.08s ease, background 0.2s ease; user-select: none; }
#cameraControlPanel .cam-btn:hover { background: rgba(255,255,255,0.32); }
#cameraControlPanel .cam-btn:active { transform: scale(0.96); }
#cameraControlPanel .cam-bottom-left { grid-row: 3; grid-column: 1; }
#cameraControlPanel .cam-bottom-right { grid-row: 3; grid-column: 3; }

/* === TKGM: Parsel Bulunamadı (üst sarı banner) === */
#pp-tkgm-parcel-not-found-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 32px;
  min-height: 32px;
  display: none;
  align-items: center;
  justify-content: center;
  background: #fef08a; /* sarı */
  color: #111827;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.2px;
  z-index: 4000001; /* topbar üstü */
  box-shadow: 0 2px 10px rgba(0,0,0,0.18);
  user-select: none;
  pointer-events: none; /* tıklama banner'ı bloklamasın */
}

body.pp-banner-visible .tkgm-topbar { top: 32px; }
body.pp-banner-visible .sidebar { top: 86px !important; height: calc(100vh - 86px) !important; }
/* body.pp-banner-visible #top-button-container { top: 86px !important; } */
/* body.pp-banner-visible #top-tkgm-button-container { top: 86px !important; } */