/* =============================================================
   PERIPLUS — Harita ekrani yeniden tasarim (Asama 3 / Faz 3.1)
   index.html chrome'unu yeni tasarim diline tasir. Markup/JS
   DEGISMEZ; yalniz mevcut class'lar reskin edilir + masaustunde
   3-sutun grid YUZEN panellere cevrilir + mobil/tablet sifirlanir.

   En SON yuklenir; layout flip'lerinde !important ile cascade'i
   garantiler (app-inline.css 3-sutun grid'i ezmek icin). Tokenlar
   ui/tokens.css'ten gelir (:root). Cam YALNIZ harita kromunda.

   Eski sayfa degiskenleri (--card/--fg/--hair...) yeni --p-* ile
   eslestirilir, boylece reskin tum bilesenlere yayilir.
   ============================================================= */

/* ---- Eski token koprusu: harita yuzeyi yeni dile uysun ------ */
body[data-build-type] {
  --card: var(--p-surface);
  --bg: var(--p-surface-2);
  --fg: var(--p-text-primary);
  --muted: var(--p-text-secondary);
  --hair: var(--p-border);
  --primary-50: var(--p-brand-soft);
  --primary-100: var(--p-brand-soft-hover);
  --primary-200: var(--p-brand-ring);
  --primary-600: var(--p-brand);
  --primary-700: var(--p-brand-deep);
  --neutral-50: var(--p-surface-3);
}

/* =============================================================
   1) UST BAR (header) — tek bilesen gorunumu
   ============================================================= */
body header {
  height: var(--p-topbar-h) !important;
  padding: 0 var(--p-space-4) !important;
  background: var(--p-surface) !important;
  border-bottom: 1px solid var(--p-border) !important;
  box-shadow: none !important;
}
.app { grid-template-rows: var(--p-topbar-h) auto 40px !important; }

body header .brand-combo { gap: 8px; }
body header .brand-gaus,
body header .brand-periplus {
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-tight);
}
body .searchbar { max-width: 560px; }
body .searchbar input {
  height: 36px !important;
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius-sm) !important;
  background: var(--p-surface-2) !important;
  color: var(--p-text-primary) !important;
  font-size: var(--p-text-base) !important;
  transition: border-color var(--p-dur-fast) var(--p-ease-out),
              box-shadow var(--p-dur-fast) var(--p-ease-out),
              background-color var(--p-dur-fast) var(--p-ease-out) !important;
}
body .searchbar input:focus {
  outline: none !important;
  border-color: var(--p-brand) !important;
  background: var(--p-surface) !important;
  box-shadow: var(--p-focus-ring) !important;
}

/* =============================================================
   2) BUTONLAR — tek dil (.btn ve turevleri)
   ============================================================= */
body .btn {
  height: 36px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  color: var(--p-text-primary);
  font-size: var(--p-text-base);
  font-weight: var(--p-weight-medium);
  letter-spacing: var(--p-tracking-tight);
  box-shadow: var(--p-shadow-sm);
  transition: background-color var(--p-dur-fast) var(--p-ease-out),
              border-color var(--p-dur-fast) var(--p-ease-out),
              color var(--p-dur-fast) var(--p-ease-out),
              transform var(--p-dur-press) var(--p-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body .btn:hover { background: var(--p-surface-2); border-color: var(--p-slate-400); }
}
body .btn:active { transform: scale(0.97); }
body .btn:focus-visible { outline: none; box-shadow: var(--p-focus-ring); }

body .btn.primary,
body header #loginBtn {
  background: var(--p-brand);
  color: var(--p-brand-fg);
  border-color: transparent;
  box-shadow: var(--p-shadow-accent);
}
@media (hover: hover) and (pointer: fine) {
  body .btn.primary:hover,
  body header #loginBtn:hover { background: var(--p-brand-deep); }
}
body .btn.ghost { background: transparent; border-color: transparent; color: var(--p-text-secondary); box-shadow: none; }
@media (hover: hover) and (pointer: fine) {
  body .btn.ghost:hover { background: var(--p-surface-3); color: var(--p-text-primary); }
}
body .btn.danger { background: var(--p-danger); color: #fff; border-color: transparent; }

/* =============================================================
   3) MAIN — masaustunde tek katman (harita tam, paneller yuzer)
   ============================================================= */
body main {
  display: block !important;
  position: relative !important;
  height: 100% !important;
  overflow: hidden !important;
}
body main > .map-wrap { position: absolute !important; inset: 0 !important; }

/* ---- Sol panel: katman/filtre (yuzen cam kart) ------------- */
body .filter {
  position: absolute !important;
  left: var(--p-space-4);
  top: var(--p-space-4);
  width: 320px;
  max-height: calc(100% - 2 * var(--p-space-4));
  background: var(--p-glass-strong) !important;
  -webkit-backdrop-filter: var(--p-blur);
  backdrop-filter: var(--p-blur);
  border: 1px solid var(--p-glass-border) !important;
  border-radius: var(--p-radius-md) !important;
  box-shadow: var(--p-shadow-lg) !important;
  overflow: visible !important;   /* autocomplete (.filter-options) kirpilmasin */
  z-index: var(--p-z-panel);
  transition: transform var(--p-dur-drawer) var(--p-ease-out),
              opacity var(--p-dur-pop) var(--p-ease-out) !important;
}
/* Yuvarlak kose hissi icin ust/alt blok koselerini yumusat */
body .filter-head { border-radius: var(--p-radius-md) var(--p-radius-md) 0 0; }
body .filter-content { background: transparent; min-height: 0; }
/* Yuzen kart max-height ile sinirli; govde iceride kaysin */
body .filter-body { min-height: 0; }
body .panel-body { min-height: 0; overflow-y: auto; }
body .filter-head {
  padding: var(--p-space-3) var(--p-space-4);
  border-bottom: 1px solid var(--p-glass-border);
}
body .filter-title {
  font-size: var(--p-text-sm);
  font-weight: var(--p-weight-semibold);
  letter-spacing: var(--p-tracking-label);
  text-transform: uppercase;
  color: var(--p-text-secondary);
}
/* Daraltilinca: yok olmak yerine sola kayar (transform; layout sabit) */
body .filter.collapsed {
  width: 320px !important;
  min-width: 320px !important;
  transform: translateX(calc(-100% - var(--p-space-5))) !important;
  opacity: 0 !important;
  pointer-events: none !important;
  border-right: 1px solid var(--p-glass-border) !important;
}
body .filter.collapsed .filter-content { display: flex !important; }

/* ---- Sag panel: secili oge detayi (yuzen cam kart) --------- */
body .panel {
  position: absolute !important;
  right: var(--p-space-4);
  top: var(--p-space-4);
  width: 360px;
  max-height: calc(100% - 2 * var(--p-space-4));
  background: var(--p-glass-strong) !important;
  -webkit-backdrop-filter: var(--p-blur);
  backdrop-filter: var(--p-blur);
  border: 1px solid var(--p-glass-border) !important;
  border-left: 1px solid var(--p-glass-border) !important;
  border-radius: var(--p-radius-md) !important;
  box-shadow: var(--p-shadow-lg) !important;
  overflow: hidden !important;
  z-index: var(--p-z-panel);
}
body .panel-hd {
  padding: var(--p-space-3) var(--p-space-4);
  border-bottom: 1px solid var(--p-glass-border);
}
body .panel-hd .t1 { font-size: var(--p-text-md); font-weight: var(--p-weight-semibold); }
body .panel-actions { background: transparent !important; border-top: 1px solid var(--p-glass-border) !important; }

/* Form alanlari (filtre) — yeni dil */
body .filter select,
body .filter input[type="search"] {
  border: 1px solid var(--p-border-strong);
  border-radius: var(--p-radius-sm);
  background: var(--p-surface);
  color: var(--p-text-primary);
}
body .filter select:focus,
body .filter input[type="search"]:focus {
  outline: none;
  border-color: var(--p-brand);
  box-shadow: var(--p-focus-ring);
}
body .filter-btn {
  background: var(--p-brand);
  color: var(--p-brand-fg);
  border: none;
  border-radius: var(--p-radius-sm);
  font-weight: var(--p-weight-medium);
  box-shadow: var(--p-shadow-accent);
  transition: background-color var(--p-dur-fast) var(--p-ease-out),
              transform var(--p-dur-press) var(--p-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body .filter-btn:not(:disabled):hover { background: var(--p-brand-deep); }
}
body .filter-btn:active:not(:disabled) { transform: scale(0.97); }
body .filter-btn:disabled { opacity: 0.5; box-shadow: none; }

/* =============================================================
   4) ALT BAR (sub-header) — rafine
   ============================================================= */
body .sub-header {
  height: 40px !important;
  background: var(--p-surface) !important;
  border-top: 1px solid var(--p-border) !important;
}
body .sub-header-filter-btn,
body .sub-header-tools-btn,
body .sub-header-map-btn,
body .sub-header-locate-btn,
body .sub-header-planning-btn,
body .sub-header-areas-btn,
body .sub-header-notes-btn {
  border: 1px solid var(--p-border-strong) !important;
  border-radius: var(--p-radius-sm) !important;
  background: var(--p-surface) !important;
  color: var(--p-text-secondary) !important;
  transition: background-color var(--p-dur-fast) var(--p-ease-out),
              border-color var(--p-dur-fast) var(--p-ease-out),
              color var(--p-dur-fast) var(--p-ease-out),
              transform var(--p-dur-press) var(--p-ease-out) !important;
}
@media (hover: hover) and (pointer: fine) {
  body .sub-header-filter-btn:hover,
  body .sub-header-tools-btn:hover,
  body .sub-header-map-btn:hover,
  body .sub-header-locate-btn:hover,
  body .sub-header-planning-btn:hover,
  body .sub-header-areas-btn:hover,
  body .sub-header-notes-btn:hover {
    background: var(--p-surface-2) !important;
    border-color: var(--p-slate-400) !important;
    color: var(--p-text-primary) !important;
  }
}
body .sub-header-filter-btn:active,
body .sub-header-tools-btn:active,
body .sub-header-map-btn:active,
body .sub-header-locate-btn:active,
body .sub-header-planning-btn:active { transform: scale(0.95); }
body .sub-header-filter-btn.active,
body .sub-header-tools-btn.active,
body .sub-header-map-btn.active {
  background: var(--p-brand-soft) !important;
  border-color: var(--p-brand-ring) !important;
  color: var(--p-brand) !important;
}
body .tools-dropdown,
body .areas-dropdown {
  border: 1px solid var(--p-border) !important;
  border-radius: var(--p-radius-md) !important;
  box-shadow: var(--p-shadow-pop) !important;
  background: var(--p-surface) !important;
}
body .tool-item {
  border-radius: var(--p-radius-sm);
  transition: background-color var(--p-dur-fast) var(--p-ease-out);
}
@media (hover: hover) and (pointer: fine) {
  body .tool-item:hover { background: var(--p-surface-3); }
}

/* =============================================================
   7) MASAUSTU BOYUT BIRLIGI — sub-header kontrolleri tek yukseklik
   Renk reskin'i height'i birlestirmemisti: buton 36 / toggle 30 / hava ~24.
   Hepsini 30px'e oturt (alt bar 40px icinde dikey ortali, ince ve tutarli).
   ============================================================= */
body .sub-header-filter-btn,
body .sub-header-tools-btn,
body .sub-header-map-btn,
body .sub-header-locate-btn,
body .sub-header-planning-btn,
body .sub-header-areas-btn,
body .sub-header-notes-btn {
  height: 30px !important;
  min-height: 30px !important;
}
/* Hava durumu karti: tema toggle ile ayni ince yukseklik (30px).
   ESKI: yukseklik tanimsizdi (~26px); once 36 yapip kalinlastirmistik -> 30'a cektik.
   Icerik dikey ortali, tasma kirpilir. */
body .weather-card { height: 30px !important; min-height: 30px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
/* Tema toggle kendi dogal yuksekligi (2.5em * 12px = 30px) ile birakildi -> hava karti ile esit. */
/* Araclar/Alanlar dropdown ogeleri: boyut tanimsizdi -> tiklanabilir tek yukseklik */
body .tool-item {
  display: flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  cursor: pointer;
}