/* Periplus — index.html'den çıkarılan ana inline stiller (davranış birebir korundu). */

    /* ===== CSS Değişkenleri: Tema Renkleri ===== */

    :root{

      --primary-700:#1E3A8A; --primary-600:#2546A9; --primary-100:#E6EEFF;

      --sand-600:#B87B42; --sand-100:#F2E7DA;

      --neutral-900:#0F172A; --neutral-800:#1F2937; --neutral-700:#334155; --neutral-600:#475569;

      --neutral-500:#64748B; --neutral-400:#94A3B8; --neutral-300:#CBD5E1; --neutral-200:#E2E8F0; --neutral-100:#F1F5F9; --neutral-50:#F8FAFC;

      --risk-low:#0F766E; --risk-mid:#B45309; --risk-high:#B91C1C;

      /* SİT Görselleştirme Renkleri */

      --sit-dogal-bg:#DCFCE7; --sit-dogal-fg:#166534; /* yeşil */

      --sit-arkeolojik-bg:#F2E7DA; --sit-arkeolojik-fg:#7C4A21; /* kahverengi */

      /* Metalik marka gradyanı (light) */

      --metal-1:#C7CED3; --metal-2:#F3F6F8; --metal-3:#AEB6BB; --metal-4:#FFFFFF; --metal-5:#9AA3A7; --metal-6:#E2E8EC;

      --bg: var(--neutral-50); --fg: var(--neutral-900); --card: #FFFFFF; --hair:#E5E7EB; --muted: var(--neutral-500);

      --brand-color: var(--primary-700);

    }

    .dark{

      --bg:#0B1020; --fg:#E5E7EB; --card:#0F172A; --hair:#23304A; --muted:#9CA3AF;

      --primary-700:#93C5FD; --primary-600:#60A5FA; --primary-100:#1E3A8A33;

      /* Metalik marka gradyanı (dark) */

      --metal-1:#BCC6CC; --metal-2:#ECF1F4; --metal-3:#98A2A8; --metal-4:#FFFFFF; --metal-5:#8C959B; --metal-6:#D9E1E5;

      --brand-color: var(--primary-700);

    }

    *{box-sizing:border-box}

    html,body{
      height:100%;
      height:100vh;
      height:100dvh; /* Dynamic viewport height for mobile browsers */
      width:100%;
      width:100vw;
      width:100dvw; /* Dynamic viewport width for mobile browsers */
      margin:0;
      padding:0;
      overflow:hidden;
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
    }
    
    /* Safe area insets for iPhone X and newer - sadece içerik için */
    @supports (padding: max(0px)) {
      #app {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
      }
    }
    
    /* Fullscreen mode için ekstra güvenlik */
    html:fullscreen,
    html:-webkit-full-screen,
    html:-moz-full-screen,
    html:-ms-fullscreen {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }
    
    body:fullscreen,
    body:-webkit-full-screen,
    body:-moz-full-screen,
    body:-ms-fullscreen {
      width: 100vw;
      height: 100vh;
      overflow: hidden;
    }

    body{margin:0; font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif; background:var(--bg); color:var(--fg);}
    
    /* Giriş yapılmadan içerik gizli */
    body:not(.authenticated) #app {
      display: none !important;
    }
    
    /* Authenticated durumunda login modal'ı kesinlikle gizle ve kaldır */
    body.authenticated .login-modal,
    body.authenticated #loginModal,
    body.authenticated #verifyModal {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
      z-index: -9999 !important;
      position: absolute !important;
      top: -9999px !important;
      left: -9999px !important;
      width: 0 !important;
      height: 0 !important;
      overflow: hidden !important;
    }
    
    /* Tüm yüksek z-index overlay'leri authenticated durumunda kontrol et */
    body.authenticated [style*="z-index: 100000"],
    body.authenticated [style*="z-index:100000"] {
      display: none !important;
      pointer-events: none !important;
    }
    
    /* Authenticated durumunda tüm gereksiz fixed overlay'leri gizle */
    body.authenticated > div[style*="position:fixed"][style*="z-index"]:not(#app):not(header):not(.sub-header):not(.panel):not(.filter) {
      pointer-events: none !important;
    }
    
    /* Authenticated durumunda transparent background overlay'leri gizle */
    body.authenticated div[style*="background"][style*="rgba(0, 0, 0"][style*="position:fixed"]:not([class*="modal"]):not([id*="Modal"]):not([id*="modal"]) {
      display: none !important;
      pointer-events: none !important;
      z-index: -9999 !important;
    }
    
    body.authenticated div[style*="background"][style*="rgba(15, 23, 42"][style*="position:fixed"]:not([class*="modal"]):not([id*="Modal"]):not([id*="modal"]) {
      display: none !important;
      pointer-events: none !important;
      z-index: -9999 !important;
    }
    
    /* Harita elementlerini koru - asla pointer-events: none yapma */
    body.authenticated #map,
    body.authenticated .leaflet-container,
    body.authenticated .leaflet-pane,
    body.authenticated .leaflet-control,
    body.authenticated .leaflet-control-container,
    body.authenticated .leaflet-interactive {
      pointer-events: auto !important;
    }
    
    /* Harita içindeki tüm elementleri koru - özellikle SVG ve path elementleri */
    body.authenticated #map *,
    body.authenticated .leaflet-container *,
    body.authenticated .leaflet-pane *,
    body.authenticated #map svg,
    body.authenticated #map path,
    body.authenticated .leaflet-container svg,
    body.authenticated .leaflet-container path,
    body.authenticated .leaflet-pane svg,
    body.authenticated .leaflet-pane path {
      pointer-events: auto !important;
    }
    
    /* Parsel pane ve layer'larını koru - z-index yüksek olmalı */
    body.authenticated .leaflet-pane[name="parcelPane"],
    body.authenticated .leaflet-pane[name="parcelPane"] *,
    body.authenticated .leaflet-pane.parcelPane,
    body.authenticated .leaflet-pane.parcelPane * {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
      z-index: 800 !important;
    }
    
    /* Parsel pane'in SVG'si üstte olmalı */
    body.authenticated .leaflet-pane[name="parcelPane"] svg {
      z-index: 801 !important;
      position: relative;
    }
    
    /* Diğer overlay pane'lerin SVG'leri altında olmalı (parsel pane'in altında) */
    body.authenticated .leaflet-overlay-pane svg,
    body.authenticated .leaflet-pane:not([name="parcelPane"]) svg {
      z-index: 400 !important;
    }
    
    /* Label pane - parsel layer'ının altında olmalı */
    body.authenticated .leaflet-pane[name="labelPane"],
    body.authenticated .leaflet-pane[name="labelPane"] * {
      z-index: 600 !important;
      pointer-events: none !important;
    }
    
    /* Alan feature etiketleri */
    .area-feature-label {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
    }
    
    /* Parsel label'ları tıklanamaz olmalı */
    body.authenticated .parcel-label,
    body.authenticated .parcel-label-icon,
    body.authenticated .parcel-label *,
    body.authenticated .parcel-label-icon * {
      pointer-events: none !important;
      z-index: 600 !important;
    }

    a{color:inherit}

    /* ===== Layout ===== */

    #app{
      width:100%;
      width:100vw;
      width:100dvw;
      height:100%;
      height:100vh;
      height:100dvh;
      position:fixed;
      top:0;
      left:0;
      right:0;
      bottom:0;
      overflow:hidden;
    }
    
    .app{display:grid; grid-template-rows: 48px auto 36px; height:100%; width:100%;}
    

    header{display:flex; align-items:center; justify-content:space-between; padding:0 12px; height:48px; border-bottom:1px solid var(--hair); background:var(--card); position:relative; z-index:10000}
    
    /* Alt header - ekranın alt kenarında ince bar */
    .sub-header{display:flex; align-items:center; justify-content:space-between; padding:0 12px; height:36px; border-top:1px solid var(--hair); background:var(--card); position:relative; z-index:9999; gap:12px}
    .sub-header-left{display:flex; align-items:center; gap:12px; flex:1 1 0; min-width:0}
    .sub-header-center{display:none}
    .sub-header-brand{position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); font-size:11px; color:var(--muted); white-space:nowrap; text-align:center; pointer-events:auto}
    .sub-header-right{display:flex; align-items:center; gap:8px; flex-shrink:0}
    .sub-header-loading{display:none; align-items:center; flex-shrink:0}
    .sub-header-loading.active{display:flex}
    .sub-header-loading-pct{font-style:italic; font-size:12px; color:var(--muted); font-weight:500; min-width:32px; text-align:right}
    
    /* Konum butonu - sub-header */
    .sub-header-notes-btn{display:flex; align-items:center; justify-content:center; min-width:60px; height:26px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0 8px; font-size:11px; font-weight:500; gap:4px}
    .sub-header-notes-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-notes-btn svg{width:14px; height:14px; display:block; flex-shrink:0}
    .sub-header-planning-btn{display:flex; align-items:center; justify-content:center; min-width:70px; height:26px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0 10px; font-size:12px; font-weight:500}
    .sub-header-planning-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-locate-btn{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0; position:relative; overflow:hidden}
    .sub-header-locate-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-locate-btn svg{width:14px; height:14px; display:block; transition:opacity 0.2s}
    .sub-header-locate-btn.loading{pointer-events:none}
    .sub-header-locate-loader{width:18px; height:18px; position:absolute; inset:0; margin:auto; transform:rotate(45deg); pointer-events:none; overflow:hidden}
    .sub-header-locate-loader:before,
    .sub-header-locate-loader:after{content:""; position:absolute; inset:0; border-radius:50% 50% 0 50%; background:#0000; background-image:radial-gradient(circle 4.5px at 50% 50%,#0000 94%, var(--primary-600)); overflow:hidden}
    .sub-header-locate-loader:after{animation:locate-pulse 1s infinite; transform:perspective(140px) translateZ(0px)}
    @keyframes locate-pulse{to{transform:perspective(140px) translateZ(70px); opacity:0}}
    .sub-header-map-controls{display:flex; align-items:center; gap:6px; flex-shrink:0}
    .sub-header-map-btn{display:flex; align-items:center; justify-content:center; width:26px; height:26px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0; padding:0}
    .sub-header-map-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-map-btn svg{width:14px; height:14px; display:block}
    .sub-header-map-btn.active{background:var(--primary-100); border-color:var(--primary-600); color:var(--primary-700)}
    .sub-header-map-select{height:26px; padding:0 8px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); font-size:11px; cursor:pointer; transition:all 0.15s ease; flex-shrink:0}
    .sub-header-map-select:hover{border-color:var(--primary-600)}
    .sub-header-map-select:focus{outline:none; border-color:var(--primary-600)}
    .sub-header-hint{font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:0 1 auto; min-width:150px; max-width:300px; display:block}
    .sub-header-coords{font-size:11px; color:var(--muted); white-space:nowrap; padding:0 8px; border-left:1px solid var(--hair); display:none; flex-shrink:0}
    .sub-header-coords.active{display:block}
    .sub-header-coords-hint{font-size:10px; color:var(--muted); opacity:0.7; white-space:nowrap; padding:0 8px; border-left:1px solid var(--hair); display:block; flex-shrink:0; cursor:help}
    .sub-header-coords-hint.hidden{display:none}
    .sub-header-filter-btn{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0}
    .sub-header-filter-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-filter-btn.active{background:var(--primary-100); border-color:var(--primary-600); color:var(--primary-700)}
    .sub-header-filter-btn svg{width:16px; height:16px; display:block}
    .sub-header-tools-btn{display:flex; align-items:center; justify-content:center; width:28px; height:28px; border:1px solid var(--hair); border-radius:6px; background:var(--card); color:var(--fg); cursor:pointer; transition:all 0.15s ease; flex-shrink:0; position:relative}
    .sub-header-tools-btn:hover{background:var(--neutral-50); border-color:var(--primary-600)}
    .sub-header-tools-btn.active{background:var(--primary-100); border-color:var(--primary-600); color:var(--primary-700)}
    .sub-header-tools-btn svg{width:16px; height:16px; display:block}
    .tools-dropdown-wrapper{position:relative; flex-shrink:0}
    .tools-dropdown{position:absolute; bottom:calc(100% + 4px); left:0; top:auto; background:var(--card); border:1px solid var(--hair); border-radius:8px; box-shadow:0 -4px 12px rgba(0,0,0,0.15); z-index:10000; min-width:160px; padding:4px; display:flex; flex-direction:column; gap:2px}
    .tools-dropdown .tool-item{display:flex; align-items:center; padding:8px 12px; border:none; background:transparent; color:var(--fg); cursor:pointer; border-radius:6px; font-size:13px; text-align:left; transition:all 0.15s ease; white-space:nowrap}
    .tools-dropdown .tool-item:hover{background:var(--neutral-50); color:var(--primary-600)}
    .tools-dropdown .tool-item.active{background:var(--primary-600) !important; color:white !important}
    
    /* Theme Switch - From Uiverse.io by Galahhad */
    .theme-switch {
      --toggle-size: 12px;
      --container-width: 5.625em;
      --container-height: 2.5em;
      --container-radius: 6.25em;
      --container-light-bg: #3D7EAE;
      --container-night-bg: #1D1F2C;
      --circle-container-diameter: 3.375em;
      --sun-moon-diameter: 2.125em;
      --sun-bg: #ECCA2F;
      --moon-bg: #C4C9D1;
      --spot-color: #959DB1;
      --circle-container-offset: calc((var(--circle-container-diameter) - var(--container-height)) / 2 * -1);
      --stars-color: #fff;
      --clouds-color: #F3FDFF;
      --back-clouds-color: #AACADF;
      --transition: .5s cubic-bezier(0, -0.02, 0.4, 1.25);
      --circle-transition: .3s cubic-bezier(0, -0.02, 0.35, 1.17);
    }
    .theme-switch, .theme-switch *, .theme-switch *::before, .theme-switch *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
      font-size: var(--toggle-size);
    }
    .theme-switch__container {
      width: var(--container-width);
      height: var(--container-height);
      background-color: var(--container-light-bg);
      border-radius: var(--container-radius);
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0em -0.062em 0.062em rgba(0, 0, 0, 0.25), 0em 0.062em 0.125em rgba(255, 255, 255, 0.94);
      transition: var(--transition);
      position: relative;
    }
    .theme-switch__container::before {
      content: "";
      position: absolute;
      z-index: 1;
      inset: 0;
      box-shadow: 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset, 0em 0.05em 0.187em rgba(0, 0, 0, 0.25) inset;
      border-radius: var(--container-radius);
    }
    .theme-switch__checkbox {
      display: none;
    }
    .theme-switch__circle-container {
      width: var(--circle-container-diameter);
      height: var(--circle-container-diameter);
      background-color: rgba(255, 255, 255, 0.1);
      position: absolute;
      left: var(--circle-container-offset);
      top: var(--circle-container-offset);
      border-radius: var(--container-radius);
      box-shadow: inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), inset 0 0 0 3.375em rgba(255, 255, 255, 0.1), 0 0 0 0.625em rgba(255, 255, 255, 0.1), 0 0 0 1.25em rgba(255, 255, 255, 0.1);
      display: flex;
      transition: var(--circle-transition);
      pointer-events: none;
    }
    .theme-switch__circle-container:hover {
      left: calc(var(--circle-container-offset) + 0.187em);
    }
    .theme-switch__sun-moon-container {
      pointer-events: auto;
      position: relative;
      z-index: 2;
      width: var(--sun-moon-diameter);
      height: var(--sun-moon-diameter);
      margin: auto;
      border-radius: var(--container-radius);
      background-color: var(--sun-bg);
      box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #a1872a inset;
      filter: drop-shadow(0.062em 0.125em 0.125em rgba(0, 0, 0, 0.25)) drop-shadow(0em 0.062em 0.125em rgba(0, 0, 0, 0.25));
      overflow: hidden;
      transition: var(--transition);
    }
    .theme-switch__moon {
      transform: translateX(100%);
      width: 100%;
      height: 100%;
      background-color: var(--moon-bg);
      border-radius: inherit;
      box-shadow: 0.062em 0.062em 0.062em 0em rgba(254, 255, 239, 0.61) inset, 0em -0.062em 0.062em 0em #969696 inset;
      transition: var(--transition);
      position: relative;
    }
    .theme-switch__spot {
      position: absolute;
      top: 0.75em;
      left: 0.312em;
      width: 0.75em;
      height: 0.75em;
      border-radius: var(--container-radius);
      background-color: var(--spot-color);
      box-shadow: 0em 0.0312em 0.062em rgba(0, 0, 0, 0.25) inset;
    }
    .theme-switch__spot:nth-of-type(2) {
      width: 0.375em;
      height: 0.375em;
      top: 0.937em;
      left: 1.375em;
    }
    .theme-switch__spot:nth-last-of-type(3) {
      width: 0.25em;
      height: 0.25em;
      top: 0.312em;
      left: 0.812em;
    }
    .theme-switch__clouds {
      width: 1.25em;
      height: 1.25em;
      background-color: var(--clouds-color);
      border-radius: var(--container-radius);
      position: absolute;
      bottom: -0.625em;
      left: 0.312em;
      box-shadow: 0.937em 0.312em var(--clouds-color), -0.312em -0.312em var(--back-clouds-color), 1.437em 0.375em var(--clouds-color), 0.5em -0.125em var(--back-clouds-color), 2.187em 0 var(--clouds-color), 1.25em -0.062em var(--back-clouds-color), 2.937em 0.312em var(--clouds-color), 2em -0.312em var(--back-clouds-color), 3.625em -0.062em var(--clouds-color), 2.625em 0em var(--back-clouds-color), 4.5em -0.312em var(--clouds-color), 3.375em -0.437em var(--back-clouds-color), 4.625em -1.75em 0 0.437em var(--clouds-color), 4em -0.625em var(--back-clouds-color), 4.125em -2.125em 0 0.437em var(--back-clouds-color);
      transition: 0.5s cubic-bezier(0, -0.02, 0.4, 1.25);
    }
    .theme-switch__stars-container {
      position: absolute;
      color: var(--stars-color);
      top: -100%;
      left: 0.312em;
      width: 2.75em;
      height: auto;
      transition: var(--transition);
    }
    .theme-switch__stars-container::before {
      content: "✦ ✦ ✦";
      font-size: 0.5em;
      letter-spacing: 0.3em;
    }
    .theme-switch__checkbox:checked + .theme-switch__container {
      background-color: var(--container-night-bg);
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container {
      left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter));
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__circle-container:hover {
      left: calc(100% - var(--circle-container-offset) - var(--circle-container-diameter) - 0.187em);
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__moon {
      transform: translate(0);
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__clouds {
      bottom: -4.062em;
    }
    .theme-switch__checkbox:checked + .theme-switch__container .theme-switch__stars-container {
      top: 50%;
      transform: translateY(-50%);
    }
    
    /* Weather Card - From Uiverse.io by sahilxkhadka (adapted for sub-header) */
    .weather-card {
      max-width: 220px;
      min-width: 180px;
      position: relative;
      padding: 4px 10px;
      color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      border-radius: 6px;
      overflow: hidden;
      cursor: pointer;
      transition: transform 0.2s ease;
      flex-shrink: 0;
    }
    .weather-card:hover {
      transform: scale(1.02);
    }
    .weather-card .background {
      position: absolute;
      inset: 0;
      z-index: -1;
      background: linear-gradient(90deg, #1E3A8A 0%, #152B63 100%);
    }
    .weather-card.dark .background {
      background: linear-gradient(90deg, #0F172A 0%, #0B1020 100%);
    }
    .weather-card .cloud {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .weather-card .cloud svg {
      height: 30px;
      width: 30px;
    }
    .weather-card .sun {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .weather-card .sun svg {
      height: 30px;
      width: 30px;
    }
    .weather-card.weather-sunny .sun {
      opacity: 0.4;
    }
    .weather-card.weather-sunny .cloud {
      opacity: 0;
    }
    .weather-card.weather-cloudy .cloud {
      opacity: 0.3;
    }
    .weather-card.weather-cloudy .sun {
      opacity: 0;
    }
    .weather-card .rain {
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      opacity: 0;
      transition: opacity 0.3s ease;
      pointer-events: none;
    }
    .weather-card .rain svg {
      height: 30px;
      width: 30px;
    }
    .weather-card.weather-rainy .rain {
      opacity: 0.4;
    }
    .weather-card.weather-rainy .cloud {
      opacity: 0.2;
    }
    .weather-card.weather-rainy .sun {
      opacity: 0;
    }
    .weather-card .main-text {
      font-size: 14px;
      z-index: 2;
      font-weight: 600;
      line-height: 1;
      margin-right: 8px;
      white-space: nowrap;
    }
    .weather-card .info {
      display: flex;
      flex-direction: column;
      gap: 1px;
      z-index: 2;
      flex: 1;
      min-width: 0;
    }
    .weather-card .info .text-gray {
      color: rgba(235, 235, 245, 0.60);
      font-size: 9px;
      white-space: nowrap;
    }
    .weather-card .info .info-right {
      display: none; /* Sub-header'da yer yok, gizle */
    }
    .weather-card .info .location {
      font-size: 10px;
      font-weight: 500;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .weather-card .info .description {
      font-size: 9px;
      color: rgba(235, 235, 245, 0.80);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .weather-card.loading {
      opacity: 0.6;
    }
    .weather-card.error {
      opacity: 0.8;
    }
    
    /* Weather Modal - From Uiverse.io by KSAplay (adapted for Periplus) */
    .weather-modal-card {
      background: var(--card);
      border: 1px solid var(--hair);
      border-radius: 16px;
      max-width: 900px;
      width: 100%;
      max-height: 90vh;
      overflow: hidden;
      box-shadow: 0 20px 60px rgba(0,0,0,0.3);
      display: flex;
      flex-direction: column;
    }
    .weather-modal-landscape {
      position: relative;
      width: 100%;
      height: 200px;
      overflow: hidden;
      background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 50%, #98D8C8 100%);
    }
    .weather-modal-landscape.dark {
      background: linear-gradient(to bottom, #1a1f2e 0%, #2d3548 50%, #1e2a3a 100%);
    }
    .weather-modal-sky {
      position: absolute;
      inset: 0;
      background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
    }
    .weather-modal-landscape.dark .weather-modal-sky {
      background: linear-gradient(to bottom, #1a1f2e 0%, #2d3548 100%);
    }
    .weather-modal-sun {
      position: absolute;
      top: 20px;
      right: 30px;
      width: 60px;
      height: 60px;
      background: #FFD700;
      border-radius: 50%;
      box-shadow: 0 0 40px rgba(255,215,0,0.6);
    }
    .weather-modal-landscape.dark .weather-modal-sun {
      background: #FFA500;
      box-shadow: 0 0 30px rgba(255,165,0,0.4);
    }
    .weather-modal-hill-1,
    .weather-modal-hill-2,
    .weather-modal-hill-3,
    .weather-modal-hill-4 {
      position: absolute;
      bottom: 0;
      background: #7CB342;
      border-radius: 50% 50% 0 0;
    }
    .weather-modal-landscape.dark .weather-modal-hill-1,
    .weather-modal-landscape.dark .weather-modal-hill-2,
    .weather-modal-landscape.dark .weather-modal-hill-3,
    .weather-modal-landscape.dark .weather-modal-hill-4 {
      background: #2d4a2d;
    }
    .weather-modal-hill-1 {
      width: 200px;
      height: 80px;
      left: -50px;
    }
    .weather-modal-hill-2 {
      width: 150px;
      height: 60px;
      left: 100px;
    }
    .weather-modal-hill-3 {
      width: 180px;
      height: 70px;
      right: -40px;
    }
    .weather-modal-hill-4 {
      width: 120px;
      height: 50px;
      right: 80px;
    }
    .weather-modal-ocean {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 40px;
      background: linear-gradient(to bottom, #4FC3F7 0%, #29B6F6 100%);
      overflow: hidden;
    }
    .weather-modal-landscape.dark .weather-modal-ocean {
      background: linear-gradient(to bottom, #1e3a5f 0%, #0f2a4a 100%);
    }
    .weather-modal-reflection {
      position: absolute;
      bottom: 0;
      width: 2px;
      height: 20px;
      background: rgba(255,255,255,0.3);
      animation: wave 2s ease-in-out infinite;
    }
    .weather-modal-reflection:nth-child(1) { left: 10%; animation-delay: 0s; }
    .weather-modal-reflection:nth-child(2) { left: 30%; animation-delay: 0.4s; }
    .weather-modal-reflection:nth-child(3) { left: 50%; animation-delay: 0.8s; }
    .weather-modal-reflection:nth-child(4) { left: 70%; animation-delay: 1.2s; }
    .weather-modal-reflection:nth-child(5) { left: 90%; animation-delay: 1.6s; }
    @keyframes wave {
      0%, 100% { transform: translateY(0) scaleY(1); opacity: 0.3; }
      50% { transform: translateY(-5px) scaleY(1.2); opacity: 0.5; }
    }
    .weather-modal-content-section {
      padding: 24px;
      background: var(--card);
      color: var(--fg);
    }
    .weather-modal-weather-info {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      margin-bottom: 24px;
    }
    .weather-modal-left-side {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .weather-modal-icon {
      width: 48px;
      height: 48px;
      color: var(--primary-600);
    }
    .weather-modal-icon svg {
      width: 100%;
      height: 100%;
    }
    .weather-modal-left-side p {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--muted);
    }
    .weather-modal-right-side {
      text-align: right;
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .weather-modal-location {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: 6px;
      margin-bottom: 8px;
    }
    .weather-modal-location svg {
      width: 16px;
      height: 16px;
      color: var(--primary-600);
    }
    .weather-modal-location span {
      font-size: 14px;
      font-weight: 500;
      color: var(--fg);
    }
    .weather-modal-right-side p {
      margin: 0;
      font-size: 13px;
      color: var(--muted);
    }
    .weather-modal-temperature {
      font-size: 36px !important;
      font-weight: 700 !important;
      color: var(--fg) !important;
      margin-top: 4px !important;
    }
    .weather-modal-forecast {
      display: flex;
      gap: 16px;
      padding-top: 20px;
      border-top: 1px solid var(--hair);
      overflow-x: auto;
    }
    .weather-modal-forecast > div {
      flex: 1;
      min-width: 120px;
      text-align: center;
    }
    .weather-modal-forecast p {
      margin: 4px 0;
      font-size: 13px;
      color: var(--muted);
    }
    .weather-modal-forecast p:last-child {
      font-size: 18px;
      font-weight: 600;
      color: var(--fg);
      margin-top: 8px;
    }
    .weather-modal-separator {
      width: 1px;
      background: var(--hair);
      margin: 0 8px;
    }
    .weather-modal-close-btn {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 32px;
      height: 32px;
      border: none;
      background: rgba(255,255,255,0.9);
      cursor: pointer;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--fg);
      transition: background 0.15s;
      z-index: 10;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .weather-modal-close-btn:hover {
      background: rgba(255,255,255,1);
    }
    .dark .weather-modal-close-btn {
      background: rgba(30,30,30,0.9);
      color: var(--fg);
    }
    .dark .weather-modal-close-btn:hover {
      background: rgba(40,40,40,1);
    }

    .brand{display:flex; align-items:center; gap:12px}

    .brand-mark{display:flex; flex-direction:row; align-items:baseline; gap:10px}

    .brand-title{

      font-family:"Fugaz One","Syne Mono","JetBrains Mono",monospace;

      font-size:24px; letter-spacing:.02em; line-height:1;

      /* Lacivert gradyen */

      background: linear-gradient(100deg, #0B1020 0%, #152B63 25%, #1E3A8A 55%, #2546A9 75%, #3B82F6 100%);

      -webkit-background-clip:text; background-clip:text; color:transparent;

      text-shadow: 0 .5px 0 rgba(0,0,0,.25);

    }  
    a.brand-title{ text-decoration:none }

    .brand-sub{font-size:11px; color:var(--muted); margin-top:0}
    .brand-sub-btn{ 
      height:auto; padding:0; margin:0; font-size:11px; 
      border:none !important; border-radius:0; background:transparent; 
      cursor:pointer; box-shadow:none; outline:none;
      color:var(--muted); text-decoration:none;
    }
    .brand-sub-btn:hover{ 
      background: transparent !important; 
      border: none !important; 
      box-shadow: none;
      color:var(--fg);
    }
    .brand-sub-btn:active{
      background: transparent !important;
      border: none !important;
      box-shadow: none;
      transform: none;
    }
    .brand-sub-btn:focus{
      outline: none;
      border: none !important;
      box-shadow: none;
    }
    /* Koyu temada marka gradyanı: gri/metal tonları */
    body.dark .brand-title{
      background: linear-gradient(100deg, #F3F4F6 0%, #E5E7EB 25%, #D1D5DB 55%, #9CA3AF 75%, #6B7280 100%);
      -webkit-background-clip:text; background-clip:text; color:transparent;
      text-shadow: 0 .5px 0 rgba(0,0,0,.15);
    }

    .searchbar{flex:1; max-width:600px; margin:0 12px; position:relative}

    .searchbar input{width:100%; height:30px; padding:0 12px 0 34px; border:1px solid var(--hair); border-radius:10px; background:var(--bg); color:var(--fg)}

    .searchbar .icon{position:absolute; left:10px; top:50%; transform:translateY(-50%); opacity:.7}

    .searchbar .icon svg{width:16px; height:16px; display:block}

    .header-actions{display:flex; gap:8px; align-items:center}
    
    /* Kullanıcı bilgileri konteyneri */
    .user-info-container{
      display:flex; align-items:center; gap:6px; padding:0 8px; border-radius:8px; 
      border:1px solid var(--hair); background:var(--card); cursor:pointer; 
      transition:all 0.2s ease; height:30px;
    }
    .user-info-container:hover{
      background:var(--neutral-50); border-color:var(--primary-600);
    }
    .user-info-container:active{transform:scale(0.98)}
    .user-avatar{
      width:20px; height:20px; border-radius:50%; background:linear-gradient(135deg, var(--primary-600), var(--primary-700));
      display:flex; align-items:center; justify-content:center; color:#fff; font-weight:600; font-size:10px;
      overflow:hidden; flex-shrink:0;
      flex-shrink:0;
    }
    .user-details{
      display:flex; flex-direction:column; gap:1px; min-width:0;
    }
    .user-name{
      font-size:11px; font-weight:600; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:90px; line-height:1.2;
    }
    .user-role{
      font-size:9px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
      max-width:90px; line-height:1.2;
    }

    .btn{height:36px; padding:0 12px; border-radius:8px; border:1px solid var(--hair); background:var(--card); color:var(--fg); cursor:pointer; position:relative; font-size:13px; font-weight:500; transition:all 0.15s ease}
    header .btn{height:30px; min-height:30px}
    /* #loginBtn DOUBLE-PURPOSE eleman:
       - Login değilken: "Giriş Yap" → login modal aç (her build'de görünmeli, yoksa giriş yapılamaz)
       - Admin user login sonrası: "Yönetim Paneline Giriş" → admin panel

       1) Login değilken HER ZAMAN görünür — yüksek specificity ile 1.0.3 preload'unun
          enjekte ettiği eski "her durumda gizle" rule'unu da yener.
       2) Authenticated AND user/develop'ta gizle. */
    html body:not(.authenticated) #loginBtn[data-panel-btn="true"] {
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
      pointer-events: auto !important;
    }
    html[data-build-type="user"] body.authenticated #loginBtn,
    html[data-build-type="develop"] body.authenticated #loginBtn {
      display: none !important;
      visibility: hidden !important;
      opacity: 0 !important;
      pointer-events: none !important;
    }
    .btn:hover{ background: var(--neutral-50); border-color: var(--primary-600) }
    .btn:active{ transform:translateY(0) }
    /* Marka alanını tıklanabilir yap */
    .brand-title, .brand-sub{ cursor:pointer }

    .btn.primary{background:var(--primary-600); color:#fff; border-color:transparent}

    .btn.ghost{background:transparent}

    /* Tooltip (hover) */

    .btn[data-tip]::after{

      content: attr(data-tip);

      position:absolute; left:50%; transform:translateX(-50%);

      bottom: calc(100% + 8px);

      background: var(--card); color: var(--fg);

      border:1px solid var(--hair); border-radius:8px;

      padding:6px 8px; font-size:12px; font-style: italic;

      white-space: nowrap; opacity:0; pointer-events:none;

      transition: opacity .15s ease; box-shadow:0 2px 6px rgba(0,0,0,.08); z-index:5;

    }

    .btn[data-tip]:hover::after{ opacity:1 }

    main{display:grid; grid-template-columns: 320px 1fr 360px; height:100%; overflow:hidden;}
    /* Panel kapalıyken harita tüm alanı kaplasın */
    .app.no-panel main{ grid-template-columns: 320px 1fr; }
    .app.filter-collapsed main{ grid-template-columns: 0px 1fr 360px; }
    .app.filter-collapsed.no-panel main{ grid-template-columns: 0px 1fr; }
    .app.no-panel .map{ border-right: none; }
    
    /* Orta boyutlu ekranlar için (17 inç ekranın yarısı gibi - ~960px) */
    
    /* Küçük-orta ekranlar için (~960px civarı) */
    
    /* Çok küçük orta ekranlar için (~900px civarı) */
    
    /* 960px-970px arası kritik boyutlar için özel düzenleme */
    
    /* Sidebar'lar grid layout'ta otomatik hizalanır, mobilde absolute */

    .map-wrap{
      position:relative; 
      width:100%; 
      height:100%; 
      min-height:0;
      min-width: 0; /* Grid'den gelen genişliği kullan */
    }

    .map{position:absolute; inset:0; background:linear-gradient(180deg, #e8eefc, #fff); border-right:1px solid var(--hair); width:100%; height:100%; min-width:0; min-height:0;}
    
    /* Harita container'ının resize sorunlarını önle */
    #map {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important; /* Grid'den gelen genişliği kullan */
      min-height: 0 !important;
      box-sizing: border-box !important;
      display: block !important;
      visibility: visible !important;
      opacity: 1 !important;
    }
    
    /* Map-wrap container'ının resize sorunlarını önle */
    .map-wrap {
      position: relative !important;
      width: 100% !important;
      height: 100% !important;
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: visible !important;
      display: block !important;
      visibility: visible !important;
    }
    
    /* Main grid container'ının resize sorunlarını önle */
    main {
      min-width: 0 !important;
      min-height: 0 !important;
      overflow: hidden !important;
      display: grid !important;
    }
    
    /* 958px-960px arası kritik boyutlar için özel düzenleme */
    
    /* Küçük ekranlarda harita container'ının görünürlüğünü garanti et */
    
    
    
    /* Leaflet varsayılan kontrolleri gizle (sub-header'da gösteriliyor) */
    .leaflet-control-zoom{display:none !important}
    .leaflet-control-layers{display:none !important}
    
    /* Parsel label'ları - zoom ile büyüyen, konteyner yok, merkeze hizalı, polygon içinde */
    .parcel-label {
      background: transparent !important;
      border: none !important;
      box-shadow: none !important;
      margin: 0 !important;
      padding: 0 !important;
      overflow: visible !important;
    }
    .parcel-label .leaflet-marker-icon {
      margin: 0 !important;
      border: none !important;
      background: transparent !important;
      overflow: visible !important;
    }
    .parcel-label div {
      background: transparent !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
      font-weight: 600 !important;
      color: #2546A9 !important;
      text-align: center !important;
      white-space: nowrap !important;
      pointer-events: none !important;
      box-shadow: none !important;
      user-select: none !important;
      line-height: 1.2 !important;
      transform: translate(-50%, -50%) !important;
      display: inline-block !important;
      position: relative !important;
      left: 50% !important;
      top: 50% !important;
      text-shadow: 0 0 2px rgba(255, 255, 255, 0.8), 0 0 4px rgba(255, 255, 255, 0.6) !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      box-sizing: border-box !important;
      contain: layout style paint !important;
    }

    .map-placeholder{position:absolute; inset:12px; border:2px dashed var(--hair); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px;}

    /* Ölçüm Etiketleri */
    .measurement-label {
      background: transparent !important;
      border: none !important;
    }
    
    .measurement-label-text {
      font-family: Arial, sans-serif !important;
      pointer-events: none !important;
      white-space: nowrap !important;
      text-align: center !important;
      transform-origin: center !important;
      font-weight: bold !important;
      background: rgba(255, 255, 255, 0.95) !important;
      padding: 2px 6px !important;
      border-radius: 8px !important;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
      border: 1px solid rgba(0, 0, 0, 0.1) !important;
      display: inline-block !important;
      min-width: fit-content !important;
    }

    /* Çizim Araç Çubuğu - Sub-header içinde */
    #drawToolbar {
      display: flex;
      flex-direction: row;
      gap: 4px;
      align-items: center;
      padding: 0;
      margin: 0;
      border-left: 1px solid var(--hair);
      padding-left: 8px;
      flex-shrink: 0;
    }

    #drawToolbar button {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      background: var(--card, white);
      border: 1px solid var(--hair, #e2e8f0);
      border-radius: 6px;
      font-size: 14px;
      cursor: pointer;
      color: var(--fg, #0f172a);
      font-weight: normal;
      box-shadow: none;
      transition: all 0.15s ease;
      flex-shrink: 0;
      padding: 0;
      margin: 0;
    }

    #drawToolbar button:hover {
      background: var(--neutral-50, #f8fafc);
      border-color: var(--primary-600, #3b82f6);
      transform: none;
    }

    #drawToolbar button.active {
      background: var(--primary-600, #3b82f6);
      border-color: var(--primary-600, #3b82f6);
      color: white;
    }

    /* Koordinat Popup */
    #coordinatePopup {
      position: fixed;
      top: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1001;
      background: white;
      padding: 10px 15px;
      border-radius: 8px;
      box-shadow: 0 4px 12px rgba(0,0,0,0.3);
      border: 2px solid var(--primary-600, #3b82f6);
      display: none;
      font-family: 'Courier New', monospace;
      font-size: 14px;
      font-weight: bold;
      max-width: 90vw;
    }

    #coordinatePopup > div:first-child {
      color: var(--primary-600, #3b82f6);
      margin-bottom: 5px;
    }

    #coordinateText {
      color: #333;
    }

    /* Responsive - Mobil */


    .filter{background:var(--card); border-right:1px solid var(--hair); display:flex; flex-direction:column; min-width:0; transition:width .18s ease, min-width .18s ease; position:relative; overflow:visible; height:100%;}
    .filter-head{padding:12px 16px; border-bottom:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; gap:8px;}
    .filter-title{font-weight:700; letter-spacing:.2px;}
    .filter-collapse{height:28px; width:28px; border-radius:8px; border:1px solid var(--hair); background:var(--card); color:var(--muted); cursor:pointer; display:flex; align-items:center; justify-content:center; padding:0;}
    .filter-collapse:hover{background:var(--neutral-50);}
    .filter-content{flex:1; display:flex; flex-direction:column; overflow:hidden;}
    .filter-body{flex:1; padding:12px 16px; display:flex; flex-direction:column; gap:12px; overflow:auto;}
    .filter-group{display:flex; flex-direction:column; gap:6px; position:relative;}
    .filter-group label{font-size:12px; font-weight:600; color:var(--muted);}
    .filter-group select,
    .filter-group input{height:36px; border:1px solid var(--hair); border-radius:8px; padding:0 10px; background:var(--bg); color:var(--fg);}
    .filter-group select:disabled,
    .filter-group input:disabled{opacity:.55; cursor:not-allowed;}
    .filter-group--search{position:relative;}
    .filter-options{position:absolute; top:calc(100% + 4px); left:0; right:0; max-height:240px; overflow:auto; border:1px solid var(--hair); border-radius:10px; background:var(--card); box-shadow:0 12px 32px rgba(15,23,42,.18); display:none; z-index:10005; padding:6px 0;}
    .filter-options[hidden]{display:none;}
    .filter-options__section{padding:4px 0;}
    .filter-options__title{font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:4px 12px;}
    .filter-option{all:unset; display:block; width:100%; padding:8px 12px; cursor:pointer; color:inherit;}
    .filter-option:hover{background:var(--neutral-50);}
    .filter-trail{display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--muted);}
    .filter-pill{padding:4px 8px; border-radius:999px; border:1px solid var(--hair); background:var(--bg);}
    .filter-actions{padding:12px 16px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:8px;}
    .filter-btn{height:36px; border-radius:8px; border:1px solid var(--primary-600); background:var(--primary-600); color:#fff; font-weight:600; cursor:pointer; transition:background .18s ease, border-color .18s ease;}
    .filter-btn[disabled]{opacity:.55; cursor:not-allowed;}
    .filter-hint{font-size:12px; color:var(--muted);}
    .filter-warning{font-size:12px; color:var(--risk-mid);}
    /* Filter Accordion Styles */
    .filter-accordion{border-top:1px solid var(--hair); margin-top:8px;}
    .filter-accordion__toggle{all:unset; display:flex; align-items:center; justify-content:space-between; width:100%; padding:12px 0; cursor:pointer; font-size:13px; font-weight:600; color:var(--fg);}
    .filter-accordion__toggle:hover{color:var(--primary-600);}
    .filter-accordion__icon{transition:transform .2s ease; flex-shrink:0;}
    .filter-accordion__toggle[aria-expanded="true"] .filter-accordion__icon{transform:rotate(180deg);}
    .filter-accordion__content{padding:0 0 12px 0;}
    .filter-accordion__content[hidden]{display:none;}
    .filter-area-list{display:flex; flex-direction:column; gap:4px; max-height:200px; overflow-y:auto; padding-right:4px;}
    .filter-area-list::-webkit-scrollbar{width:4px;}
    .filter-area-list::-webkit-scrollbar-track{background:var(--neutral-100); border-radius:2px;}
    .filter-area-list::-webkit-scrollbar-thumb{background:var(--neutral-300); border-radius:2px;}
    .filter-area-item{display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; color:var(--fg); transition:all .15s ease; gap:8px;}
    .filter-area-item:hover{background:var(--neutral-50);}
    .filter-area-item span{flex:1;}
    .filter-area-item .color-dot{width:12px; height:12px; border-radius:3px; flex-shrink:0; flex-grow:0; flex-basis:12px; box-shadow:0 1px 2px rgba(0,0,0,.15);}
    .filter-asset-list{display:flex; flex-direction:column; gap:8px; max-height:220px; overflow-y:auto; padding-right:4px;}
    .filter-asset-list::-webkit-scrollbar{width:4px;}
    .filter-asset-list::-webkit-scrollbar-track{background:var(--neutral-100); border-radius:2px;}
    .filter-asset-list::-webkit-scrollbar-thumb{background:var(--neutral-300); border-radius:2px;}
    .filter-asset-item{display:flex; align-items:center; justify-content:space-between; padding:6px 8px; border-radius:6px; cursor:pointer; font-size:12px; color:var(--fg); transition:background .15s ease;}
    .filter-asset-item:hover{background:var(--neutral-50);}
    .filter-asset-item span{flex:1;}
    /* Periplus Toggle Switch - Kompakt */
    .filter-toggle-wrap input[type="checkbox"]{display:none;}
    .filter-toggle{position:relative; width:28px; height:14px; background:linear-gradient(145deg, #d1d5db, #e5e7eb); border-radius:7px; box-shadow:inset 0 1px 2px rgba(0,0,0,.1); transition:all .25s ease; flex-shrink:0; cursor:pointer;}
    .filter-toggle::before{content:''; position:absolute; top:2px; left:2px; width:10px; height:10px; border-radius:50%; background:linear-gradient(145deg, #fff, #f3f4f6); box-shadow:0 1px 2px rgba(0,0,0,.15); transition:all .25s cubic-bezier(.4,0,.2,1);}
    .filter-toggle-wrap input[type="checkbox"]:checked + .filter-toggle{background:linear-gradient(145deg, #2546A9, #3b5fc9);}
    .filter-toggle-wrap input[type="checkbox"]:checked + .filter-toggle::before{left:16px;}
    .filter-toggle:hover{opacity:.9;}
    /* Loading state for filter toggles */
    .filter-toggle-wrap.loading .filter-toggle{background:linear-gradient(145deg, #fbbf24, #f59e0b); animation:pulse 1s infinite;}
    .filter-toggle-wrap.loading::after{content:''; position:absolute; right:40px; top:50%; transform:translateY(-50%); width:12px; height:12px; border:2px solid #2546A9; border-top-color:transparent; border-radius:50%; animation:spin .8s linear infinite;}
    @keyframes spin{to{transform:translateY(-50%) rotate(360deg);}}
    @keyframes pulse{0%,100%{opacity:1;}50%{opacity:.7;}}
    /* Filter popup styles */
    .filter-popup{padding:4px 0; font-size:12px; line-height:1.4;}
    .filter-popup .sit-badge, .filter-popup .asset-badge{display:inline-block; padding:2px 6px; border-radius:4px; color:#fff; font-size:10px; margin-top:4px; font-weight:500;}
    .filter-meta{padding:12px 16px; border-top:1px solid var(--hair); display:flex; flex-direction:column; gap:10px;}
    .filter-meta button{height:34px; border-radius:8px; border:1px solid var(--hair); background:var(--card); color:var(--fg); cursor:pointer;}
    .filter-meta button:hover{background:var(--neutral-50);}
    .filter-tab{display:none} /* Artık sub-header'da gösteriliyor */
    .filter.collapsed{width:0!important; min-width:0!important; border-right:none; pointer-events:none;}
    .filter.collapsed .filter-content{display:none;}
    .filter.collapsed .filter-tab{display:flex; pointer-events:auto;}
    .panel{background:var(--card); border-left:1px solid var(--hair); display:flex; flex-direction:column; height:100%; overflow:hidden;}

    /* Panel header unified with viewers */
    .panel-hd{padding:12px 16px; border-bottom:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; flex-shrink:0}
    .t1{font-weight:700; letter-spacing:.2px}
    .t2{font-size:12px; color:var(--muted)}
    /* Backward-compat for older markup if any remains */
    .panel-header{padding:12px 16px; border-bottom:1px solid var(--hair); display:flex; align-items:center; justify-content:space-between; flex-shrink:0}
    .panel-title{font-weight:700; letter-spacing:.2px}
    .panel-sub{font-size:12px; color:var(--muted)}

    .panel-body{padding:12px; display:flex; flex-direction:column; gap:8px; overflow-y:auto; overflow-x:hidden; min-height:0; flex:1 1 auto}

    .kv{display:grid; grid-template-columns:100px 1fr; gap:6px; font-size:13px; align-items:start}
    .kv > div:first-child{ font-weight:500; color:var(--muted); font-size:12px }

    .divider{height:1px; background:var(--hair); margin:6px 0}

    .chips{display:flex; flex-wrap:wrap; gap:3px; max-height:80px; overflow-y:auto; align-items:flex-start}
    .chips::-webkit-scrollbar{ width:4px; height:4px }
    .chips::-webkit-scrollbar-track{ background:transparent }
    .chips::-webkit-scrollbar-thumb{ background:#CBD5E1; border-radius:2px }
    .chips::-webkit-scrollbar-thumb:hover{ background:#94A3B8 }

    .chip{font-size:10px; padding:2px 6px; border-radius:4px; background:var(--sand-100); color:var(--sand-600); border:1px solid var(--hair); margin-bottom:3px; line-height:1.4}
    .chip.choice{cursor:pointer; border-color:var(--primary-600); color:var(--primary-600); background:rgba(37,70,169,.08);}
    .chip.choice:hover{background:var(--primary-100);}
    .chip.choice.active{background:var(--primary-600); color:#fff;}

    .selection-hint{font-size:12px; color:var(--muted); margin-top:4px;}

    /* TK_PARSEL_* renkleri - alanlar dropdown'ındaki renklerle eşleşmeli */
    .chip.sit-alan{ background:#E0F2FE; color:#0C4A6E; border-color:#0284C7 }
    .chip.sit-ark1{ background:#FEF3C7; color:#78350F; border-color:#F59E0B }
    .chip.sit-ark3{ background:#FDE68A; color:#92400E; border-color:#FBBF24 }
    .chip.sit-dog1{ background:#DCFCE7; color:#14532D; border-color:#10B981 }
    .chip.sit-dog2{ background:#BBF7D0; color:#166534; border-color:#22C55E }
    .chip.sit-dog3{ background:#86EFAC; color:#15803D; border-color:#4ADE80 }
    .chip.sit-egs{ background:#FCE7F3; color:#831843; border-color:#EC4899 }
    .chip.sit-kentark{ background:#E9D5FF; color:#581C87; border-color:#A855F7 }
    .chip.sit-kentsel{ background:#DBEAFE; color:#1E3A8A; border-color:#3B82F6 }
    /* Eski class'lar için fallback */
    .chip.sit-dogal{ background:#DCFCE7; color:#14532D; border-color:#10B981 }
    .chip.sit-arkeolojik{ background:#FEF3C7; color:#78350F; border-color:#F59E0B }

    .badge{font-size:12px; padding:2px 8px; border-radius:999px; background:transparent; border:1px solid var(--hair);} 

    .risk-low{ color:var(--risk-low); border-color:var(--risk-low);} 

    .risk-mid{ color:var(--risk-mid); border-color:var(--risk-mid);} 

    .risk-high{ color:var(--risk-high); border-color:var(--risk-high);} 

    .panel-actions{margin-top:auto; padding:8px 12px; border-top:1px solid var(--hair); display:grid !important; grid-template-columns:1fr 1fr !important; gap:8px; flex-shrink:0; background:var(--card); position:sticky; bottom:0; z-index:10;}

    .panel-actions .btn{height:40px; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; grid-column:auto !important}

    .fullrow{grid-column:1 / -1}

    /* Footer hint */

    .hint{display:none} /* Artık sub-header'da gösteriliyor */
    /* Tema düğmesi kaldırıldı */

    /* Small tweaks */

    
    /* Mobil için searchbar optimizasyonu */

    /* Status bar artık sub-header'da gösteriliyor */
    /* (removed) Desktop sol-alt statusbar hint */

    /* Toggle Switch Styles (From Uiverse.io by WhiteNervosa) - Küçük boyut */
    .slider {
      background-color: #ffffff2b;
      border-radius: 100px;
      padding: 1px;
      margin: 0;
      cursor: pointer;
      transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1) 0s;
      align-items: center;
      position: relative;
      display: block;
      width: 36px;
      height: 20px;
      box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 3px inset, rgba(0, 0, 0, 0.21) 0px 0px 0px 16px inset,
            #22cc3f 0px 0px 0px 0px inset, rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
    }

    .slider::after {
      content: "";
      display: flex;
      top: 1.5px;
      left: 1.5px;
      width: 17px;
      height: 17px;
      background-color: #e3e3e3;
      border-radius: 200px;
      position: absolute;
      box-shadow: transparent 0px 0px 0px 2px, rgba(0, 0, 0, 0.3) 0px 4px 4px;
      transition: left 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s, background-color 300ms cubic-bezier(0.4, 0, 0.2, 1) 0s;
      will-change: left, background-color;
    }

    .switch input[type="checkbox"]:checked + .slider {
      box-shadow: rgba(0, 0, 0, 0.62) 0px 0px 3px inset, #22cc3f 0px 0px 0px 2px inset, #22cc3f 0px 0px 0px 16px inset,
            rgba(224, 224, 224, 0.45) 0px 1px 0px 0px;
    }

    .switch input[type="checkbox"]:checked + .slider::after {
      left: 17px;
    }

    .switch input[type="checkbox"] {
      display: none;
    }

    /* ── Masaüstü Güncelleme Banner ─────────────────────────── */
    #periplus-update-banner {
      display: none;
      align-items: center;
      gap: 12px;
      padding: 10px 20px;
      background: #1E3A5F;
      color: #fff;
      font-size: 13px;
      z-index: 9000;
      position: relative;
    }
    #periplus-update-banner.visible { display: flex; }
    #periplus-update-banner .upd-msg { flex: 1; }
    #periplus-update-banner .upd-install {
      padding: 6px 16px;
      border: none;
      border-radius: 8px;
      background: #F59E0B;
      color: #0F172A;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer;
      display: none;
    }
    #periplus-update-banner .upd-install.ready { display: inline-block; }
    #periplus-update-banner .upd-spinner {
      width: 14px; height: 14px;
      border: 2px solid rgba(255,255,255,.3);
      border-top-color: #fff;
      border-radius: 50%;
      animation: upd-spin .8s linear infinite;
    }
    @keyframes upd-spin { to { transform: rotate(360deg); } }

    /* ═══════════════════════════════════════════════════════════
       DESKTOP UYGULAMA — Apple-style minimal layout (Electron)
       body[data-build-type] = herhangi bir Electron build
       ═══════════════════════════════════════════════════════════ */

    /* ── Sürüm ayrımı ── */
    /* NOT: #loginBtn için build-type kontrolü 1.0.4'te auth-aware CSS'e taşındı (1483).
       Buradaki eski rule HEM header'daki "Yönetim Paneline Giriş" HEM modal içindeki
       "Giris Yap" submit butonunu gizliyordu (ikisi de aynı id="loginBtn" — login.js
       modal HTML'inde) → kullanıcı user/develop'ta hiç giriş yapamıyordu. Kaldırıldı. */
    #devToolsBtn { display: none !important; }
    body[data-build-type="develop"] #devToolsBtn { display: flex !important; }

    /* ── Genel: Apple sistem fontu ── */
    body[data-build-type], body[data-build-type] * {
      font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif !important;
      -webkit-font-smoothing: antialiased !important;
    }

    /* ── App grid: header 44px, footer 32px ── */
    body[data-build-type] .app {
      grid-template-rows: 44px auto 32px !important;
    }

    /* ── Header yeniden tasarım ── */
    body[data-build-type] header {
      height: 44px !important;
      padding: 0 14px !important;
      background: rgba(255,255,255,0.92) !important;
      backdrop-filter: saturate(180%) blur(20px) !important;
      -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
      border-bottom: 1px solid rgba(0,0,0,0.08) !important;
    }

    /* ── Grid sütunları: sidebar'lar daha dar ── */
    body[data-build-type] main {
      grid-template-columns: 220px 1fr 250px !important;
    }
    body[data-build-type] .app.no-panel main {
      grid-template-columns: 220px 1fr !important;
    }
    body[data-build-type] .app.filter-collapsed main {
      grid-template-columns: 0px 1fr 250px !important;
    }
    body[data-build-type] .app.filter-collapsed.no-panel main {
      grid-template-columns: 0px 1fr !important;
    }

    /* ── Sol sidebar (filter) ── */
    body[data-build-type] .filter {
      overflow: hidden !important;
      background: #FAFAFA !important;
      border-right: 1px solid rgba(0,0,0,0.08) !important;
    }
    body[data-build-type] .filter-head {
      padding: 10px 12px 8px !important;
      background: #FAFAFA !important;
      border-bottom: 1px solid rgba(0,0,0,0.06) !important;
    }
    body[data-build-type] .filter-title {
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.04em !important;
      text-transform: uppercase !important;
      color: #6E6E73 !important;
    }
    body[data-build-type] .filter-collapse {
      width: 22px !important; height: 22px !important;
      border-radius: 50% !important;
      background: rgba(0,0,0,0.04) !important;
      border: none !important;
      color: #6E6E73 !important;
    }
    body[data-build-type] .filter-collapse:hover {
      background: rgba(0,0,0,0.08) !important;
    }
    body[data-build-type] .filter-body {
      padding: 10px 12px !important;
      gap: 6px !important;
      background: #FAFAFA !important;
    }
    body[data-build-type] .filter-group {
      margin-bottom: 0 !important;
    }
    body[data-build-type] .filter-group > label {
      font-size: 10px !important;
      font-weight: 600 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
      color: #6E6E73 !important;
      margin-bottom: 3px !important;
      display: block !important;
    }
    body[data-build-type] .filter-group select,
    body[data-build-type] .filter-group input[type="search"],
    body[data-build-type] .filter-group input[type="text"] {
      height: 28px !important;
      font-size: 12px !important;
      padding: 0 8px !important;
      border: 1px solid rgba(0,0,0,0.12) !important;
      border-radius: 6px !important;
      background: #fff !important;
      color: #1D1D1F !important;
      width: 100% !important;
      box-sizing: border-box !important;
      appearance: none !important;
    }
    body[data-build-type] .filter-group select:focus,
    body[data-build-type] .filter-group input:focus {
      outline: none !important;
      border-color: #0071E3 !important;
      box-shadow: 0 0 0 3px rgba(0,113,227,0.15) !important;
    }
    body[data-build-type] .filter-accordion__toggle {
      padding: 7px 0 !important;
      font-size: 11px !important;
      font-weight: 600 !important;
      letter-spacing: 0.03em !important;
      text-transform: uppercase !important;
      color: #6E6E73 !important;
    }
    body[data-build-type] .filter-area-item {
      font-size: 11px !important;
      padding: 3px 0 !important;
      color: #1D1D1F !important;
    }
    body[data-build-type] .filter-asset-item {
      font-size: 11px !important;
      color: #1D1D1F !important;
    }

    /* ── Sağ sidebar (panel) ── */
    body[data-build-type] .panel {
      background: #fff !important;
      border-left: 1px solid rgba(0,0,0,0.08) !important;
      box-shadow: -2px 0 12px rgba(0,0,0,0.04) !important;
    }
    body[data-build-type] .panel-hd {
      padding: 10px 14px !important;
      border-bottom: 1px solid rgba(0,0,0,0.06) !important;
      background: #FAFAFA !important;
    }
    body[data-build-type] #panelTitle {
      font-size: 12px !important;
      font-weight: 600 !important;
      color: #1D1D1F !important;
      letter-spacing: -0.01em !important;
    }
    body[data-build-type] .panel-body {
      padding: 10px 14px !important;
      font-size: 12px !important;
      gap: 6px !important;
      color: #1D1D1F !important;
      background: #fff !important;
    }
    body[data-build-type] #closePanel {
      width: 22px !important; height: 22px !important;
      padding: 0 !important;
      border-radius: 50% !important;
      background: rgba(0,0,0,0.04) !important;
      border: none !important;
      color: #6E6E73 !important;
      font-size: 12px !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
    }
    body[data-build-type] #closePanel:hover {
      background: rgba(0,0,0,0.08) !important;
    }

    /* ── Footer (sub-header) — Apple toolbar stili ── */
    body[data-build-type] .sub-header {
      height: 32px !important;
      padding: 0 10px !important;
      gap: 2px !important;
      background: rgba(255,255,255,0.92) !important;
      backdrop-filter: saturate(180%) blur(20px) !important;
      -webkit-backdrop-filter: saturate(180%) blur(20px) !important;
      border-top: 1px solid rgba(0,0,0,0.08) !important;
      overflow: visible !important;
    }
    body[data-build-type] .sub-header-brand  { display: none !important; }
    body[data-build-type] .sub-header-left   { gap: 2px !important; flex-shrink: 1 !important; min-width: 0 !important; overflow: hidden !important; align-items: center !important; }
    body[data-build-type] .sub-header-right  { gap: 2px !important; flex-shrink: 0 !important; align-items: center !important; }
    body[data-build-type] .sub-header .mu-label { display: none !important; }

    /* Tüm footer butonları — tutarlı 28×28 yuvarlak */
    body[data-build-type] .sub-header-filter-btn,
    body[data-build-type] .sub-header-tools-btn,
    body[data-build-type] .sub-header-map-btn,
    body[data-build-type] .sub-header-locate-btn,
    body[data-build-type] #devToolsBtn {
      width: 28px !important; height: 28px !important;
      padding: 0 !important;
      border-radius: 6px !important;
      border: none !important;
      background: transparent !important;
      color: #3C3C43 !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      cursor: pointer !important;
      transition: background 0.1s !important;
    }
    body[data-build-type] .sub-header-filter-btn:hover,
    body[data-build-type] .sub-header-tools-btn:hover,
    body[data-build-type] .sub-header-map-btn:hover,
    body[data-build-type] .sub-header-locate-btn:hover,
    body[data-build-type] #devToolsBtn:hover {
      background: rgba(0,0,0,0.06) !important;
    }
    body[data-build-type] .sub-header-filter-btn.active,
    body[data-build-type] .sub-header-tools-btn.active,
    body[data-build-type] .sub-header-map-btn.active,
    body[data-build-type] .sub-header-filter-btn[aria-pressed="true"] {
      background: rgba(0,113,227,0.1) !important;
      color: #0071E3 !important;
    }
    body[data-build-type] .sub-header-filter-btn svg,
    body[data-build-type] .sub-header-tools-btn svg,
    body[data-build-type] .sub-header-map-btn svg,
    body[data-build-type] .sub-header-locate-btn svg,
    body[data-build-type] #devToolsBtn svg {
      width: 14px !important; height: 14px !important;
    }

    /* Metin butonlar: Planlama, Alanlar */
    body[data-build-type] .sub-header-planning-btn,
    body[data-build-type] .sub-header-areas-btn {
      height: 26px !important;
      padding: 0 10px !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      min-width: 0 !important;
      border-radius: 6px !important;
      border: 1px solid rgba(0,0,0,0.12) !important;
      background: #fff !important;
      color: #1D1D1F !important;
      cursor: pointer !important;
      transition: background 0.1s !important;
    }
    body[data-build-type] .sub-header-planning-btn:hover,
    body[data-build-type] .sub-header-areas-btn:hover {
      background: rgba(0,0,0,0.04) !important;
    }

    /* Layer dropdown */
    body[data-build-type] #layerDropdownBtn {
      height: 26px !important;
      font-size: 11px !important;
      font-weight: 500 !important;
      min-width: 110px !important;
      padding: 0 8px !important;
      border-radius: 6px !important;
      border: 1px solid rgba(0,0,0,0.12) !important;
      background: #fff !important;
      color: #1D1D1F !important;
      cursor: pointer !important;
    }
    body[data-build-type] #layerDropdownBtn:hover {
      background: rgba(0,0,0,0.04) !important;
    }

    /* Hint metni */
    body[data-build-type] .sub-header-hint {
      font-size: 11px !important;
      color: #6E6E73 !important;
      max-width: 160px !important;
      flex-shrink: 1 !important;
      white-space: nowrap !important;
      overflow: hidden !important;
      text-overflow: ellipsis !important;
      padding: 0 4px !important;
    }

    /* Koordinat */
    body[data-build-type] .sub-header-coords-hint {
      font-size: 10px !important;
      color: #8E8E93 !important;
      padding: 0 6px !important;
      border-left: 1px solid rgba(0,0,0,0.08) !important;
    }
    body[data-build-type] .sub-header-coords {
      font-size: 10px !important;
      font-variant-numeric: tabular-nums !important;
      color: #6E6E73 !important;
    }
    body[data-build-type] .sub-header-loading-pct {
      font-size: 10px !important;
      color: #8E8E93 !important;
      font-variant-numeric: tabular-nums !important;
      min-width: 24px !important;
    }

    /* Eriadne butonu */
    body[data-build-type] .eriadne-btn {
      height: 26px !important;
      padding: 0 8px !important;
      min-width: 0 !important;
      gap: 4px !important;
      border-radius: 6px !important;
      border: 1px solid rgba(0,0,0,0.12) !important;
      background: #fff !important;
      cursor: pointer !important;
      transition: background 0.1s !important;
    }
    body[data-build-type] .eriadne-btn:hover {
      background: rgba(0,0,0,0.04) !important;
    }
    body[data-build-type] .eriadne-btn-text { font-size: 10px !important; font-weight: 500 !important; }
    body[data-build-type] #eriadne-triangle  { width: 14px !important; height: 14px !important; }

    /* Ayırıcı çizgi: sol ile sağ arasına */
    body[data-build-type] .sub-header-right {
      border-left: 1px solid rgba(0,0,0,0.08) !important;
      padding-left: 6px !important;
      margin-left: 4px !important;
    }


/* 3D Dünya (Cesium) seçeneğini katman listesinden kaldır — mobil + masaüstü.
   Cesium etiketi + üstündeki "3D Görünüm" başlığı + ayırıcı çizgiyi gizle. */
#baseLayerList > .layer-option[data-layer="cesium-3d"],
#baseLayerList > div:has(+ .layer-option[data-layer="cesium-3d"]),
#baseLayerList > div:has(+ div + .layer-option[data-layer="cesium-3d"]) {
  display: none !important;
}