/* Yeşilay kurumsal kimlik 2025 — ana/yardımcı renkler; Averta yerine Nunito (Google, Averta’ya en yakın ücretsif alternatillerden) */
:root{
  /* Ana: P 3435 C, P 354 C */
  --brand-p3435: #124705;
  --brand-p354: #00ae42;
  /* Yardımcı */
  --brand-tint-1: #edf7ef;
  --brand-tint-2: #c4dec9;
  --brand-tint-3: #70ab70;
  --brand-black: #000000;

  --bg: #f0f1f3;
  --page: #f0f1f3;
  --card: #ffffff;
  --text: #101810;
  --text-soft: #2d3d2c;
  --muted: #5f7570;
  /* Kart / panel: ince nötr çerçeve (yeşil değil) */
  --line: #e0e0e0;
  /* Sol menü (düz zemin, referans #124734) */
  --sidebar-1: #124734;
  --sidebar-2: #124734;
  --sidebar-active: #029248;
  --footer-band: #081808;
  --green-ink: #0d8038;
  --green-bright: var(--brand-p354);
  --map-scale-1: var(--brand-p3435);
  --map-scale-2: #0d8f40;
  --map-scale-3: var(--brand-tint-3);
  --map-scale-4: var(--brand-tint-2);
  --blue: #1f6de0;
  --purple: #7c3aed;
  --orange: #ea7a1a;
  --green: var(--brand-p354);
  --shadow: 0 14px 40px rgba(6, 46, 36, 0.1);
  --radius: 16px;
  --radius-sm: 12px;
  --map-bg-image: url('assets/img/background.png');
  --footer-feature-bg: url('assets/img/footer-background.png');
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family: "Nunito", system-ui, sans-serif;
  color: var(--text);
  background: var(--page);
  line-height: 1.45;
}
.layout{
  display:grid;
  grid-template-columns:88px 1fr;
  min-height:100vh;
}
/* —— Sidebar (#124734 düz, beyaz çizgili ikonlar) —— */
.sidebar{
  background: var(--sidebar-1);
  padding: 20px 12px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  box-shadow: 4px 0 24px rgba(0, 0, 0, 0.1);
}
/* Beyaz daire + logo.png (hilal) */
.sidebar-logo{
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
  flex-shrink: 0;
}
.sidebar-logo-img{
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
  object-position: center;
}
.side-nav{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 2px;
  flex: 1;
}
.side-btn{
  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: none;
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.side-btn:hover{
  background: rgba(255, 255, 255, 0.08);
}
/* Aktif: #029248, hafif gölgeli kare */
.side-btn.active{
  background: var(--sidebar-active);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 174, 66, 0.45);
}
.side-btn .ico *,
.back-btn .ico *{
  stroke-width: 1.55;
}
/* Şubeler vb. özel piksel ikon; diğer menüdeki Feather SVG’lerle aynı hücre */
.side-btn-img{
  display:block;
  width:24px;
  height:24px;
  object-fit:contain;
  pointer-events:none;
}
.back-btn{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  margin-top: auto;
  padding: 0;
  transition: background 0.15s, border-color 0.15s;
}
.back-btn:hover{
  background: rgba(255, 255, 255, 0.06);
  border-color: #fff;
}

/* —— Main + beyaz topbar (harita alanı: yatayda +12px) —— */
.main{
  display:flex;flex-direction:column;
  min-width:0;
  background: #fdfdfd;
  padding:0 16px 28px;
  padding-left:24px;
}
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  gap:20px;
  padding:12px 0 10px;
  border-bottom: none;
  background: #fafbfc;
  margin:0 -16px 8px;
  padding-left:24px;
  padding-right:16px;
  flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:0;
  min-width:0;
}
.brand-text{min-width:0}
/* Sol menü zemin tonu ( --sidebar-1 / #124734 ) ile aynı aile */
.brand h1{
  margin:0;
  font-size:clamp(22px,1.5vw+14px,30px);
  line-height:1.05;
  font-weight:800;
  letter-spacing:.04em;
  color: var(--sidebar-1);
}
.brand p{
  margin:4px 0 0;
  font-size:12px;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  /* YEŞİLAY’dan daha açık ton; kurumsal yardımcı yeşil */
  color: var(--brand-tint-3);
}
/* Sağ üst: açık gri yuvarlak, koyu outline ikon; zil: kurumsal yeşil nokta */
.top-actions{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
.top-btn{
  width:44px;height:44px;
  border-radius:50%;
  border:none;
  background:#f0f2f5;
  color:#1e2a3a;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  position:relative;
  flex-shrink:0;
  transition:background .15s,color .15s,transform .1s;
}
.top-btn:hover{background:#e5e8ee;color:#0f1724}
.top-btn:focus-visible{outline:2px solid var(--brand-p354);outline-offset:2px}
.top-btn--notify::after{
  content:"";
  position:absolute;
  right:6px;top:6px;
  width:8px;height:8px;
  border-radius:50%;
  background:var(--brand-p354);
  box-shadow:0 0 0 2px #f0f2f5;
  pointer-events:none;
}
.top-btn--notify:hover::after{box-shadow:0 0 0 2px #e5e8ee}

/* Harita: çerçeve yok; Türkiye/Leaflet arka plan tonları önceki yeşilimsi (sadece sayfa zemin gri) */
.map-card{
  position:relative;
  min-height:clamp(400px,54vh,640px);
  height:auto;
  overflow:hidden;
  border-radius:var(--radius);
  border: none;
  background:
    linear-gradient(165deg, rgba(245, 250, 247, 0.98) 0%, rgba(235, 244, 238, 0.96) 100%),
    var(--map-bg-image) center center / cover no-repeat;
  background-color: var(--brand-tint-1);
  box-shadow: var(--shadow);
}
.map-deco{
  position:absolute;inset:0;pointer-events:none;z-index:1;opacity:.1;
  background:radial-gradient(circle at 25% 25%, rgba(22, 182, 94, 0.08), transparent 55%);
}
#turkeyMap{
  position:absolute;
  inset:0;
  z-index:2;
  border-radius:calc(var(--radius) - 1px);
  overflow:hidden;
  background:transparent;
  /* 3B benzeri: levha gibi hafif yükselme (Leaflet’e transform yok, koordinat hatası olmaz) */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.5) inset,
    0 2px 0 rgba(0, 40, 28, 0.04) inset,
    0 20px 48px -12px rgba(0, 50, 36, 0.32),
    0 8px 20px rgba(0, 0, 0, 0.08);
}
#turkeyMap::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:5;
  pointer-events:none;
  border-radius:calc(var(--radius) - 1px);
  background:linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(255, 255, 255, 0) 36%,
    rgba(0, 28, 20, 0.06) 100%
  );
}
.leaflet-container{
  background:
    linear-gradient(180deg, rgba(240, 247, 242, 0.7) 0%, rgba(228, 238, 232, 0.64) 100%),
    var(--map-bg-image) center center / cover no-repeat !important;
  background-color: var(--brand-tint-1) !important;
  font-family:inherit;
}
/* Yalnız sağ üstte zoom; sol alt ölçek vb. yok */
.leaflet-control-container .leaflet-top.leaflet-left,
.leaflet-control-container .leaflet-bottom{
  display:none !important;
}
.leaflet-pane.leaflet-overlay-pane svg{overflow:visible}
/* Poligonlara ince 3B derinlik (aşıırı ağır olmaması için tek gölge) */
.leaflet-overlay-pane{
  filter:drop-shadow(0.5px 2px 2px rgba(0, 36, 26, 0.22)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.04));
}
.leaflet-pane.leaflet-provinceDots-pane{
  filter:drop-shadow(0 1px 1.5px rgba(0, 32, 22, 0.35));
}
.leaflet-top.leaflet-right{margin-top:10px;margin-right:10px}
.map-zoom.leaflet-bar{
  border:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.12) !important;
  border-radius:12px !important;
  overflow:hidden;
}
.map-zoom a{
  width:32px !important;height:32px !important;
  line-height:32px !important;
  font-size:18px !important;
  color: var(--brand-p3435) !important;
  background:#fff !important;
  border:1px solid var(--line) !important;
}
.map-zoom a:hover{background:#f4f4f4 !important}

/* Yüzer bilgi kartı (yalnızca il vurgusunda .is-visible) */
.map-info-card{
  position:absolute;z-index:600;
  min-width:240px;max-width:min(300px,92vw);
  padding:16px 18px 14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:16px;
  box-shadow:0 12px 32px rgba(15, 23, 42, 0.1);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease, visibility .18s;
}
.map-info-card.is-visible{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.map-info-card::after{
  content:"";
  position:absolute;left:50%;bottom:-8px;transform:translateX(-50%) rotate(45deg);
  width:16px;height:16px;
  background:#fff;
  border-right:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.map-info-card h3{
  margin:0 0 12px;
  font-size:17px;
  font-weight:800;
  color:var(--text);
}
.map-info-list{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:8px;
}
.map-info-line{
  display:grid;
  grid-template-columns:24px 1fr auto;
  align-items:center;
  gap:8px 10px;
  font-size:14px;
  color:var(--text-soft);
}
.map-ico{
  width:22px;height:22px;
  border-radius:7px;
  display:grid;place-items:center;
  color:#fff;
  font-size:0;
  flex-shrink:0;
}
.map-ico svg{width:12px;height:12px;stroke:currentColor;fill:none}
.map-ico--blue{background:var(--blue)}
.map-ico--purple{background:var(--purple)}
.map-ico--orange{background:var(--orange)}
.map-ico--green{background:var(--green)}
.map-info-line strong{
  font-size:15px;
  font-weight:800;
  color:var(--text);
  font-variant-numeric: tabular-nums;
}

/* KPI */
.grid{
  display:grid;
  gap:16px;
  margin-top:12px;
}
.stats-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
  margin-top:12px;
}
.two-cols{grid-template-columns:1fr 1fr}
.stat-card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  padding:16px 18px;
  display:grid;
  grid-template-columns:68px 1fr minmax(72px,90px);
  align-items:center;
  min-height:100px;
  gap:12px 14px;
  min-width:0;
}
.stat-icon{
  width:68px;height:68px;
  border-radius:50%;
  display:grid;place-items:center;
  flex-shrink:0;
}
/* KPI yuvarlak: açık ton (eski) */
.stat-icon--blue{background:rgba(31, 109, 224, 0.12)}
.stat-icon--purple{background:rgba(124, 58, 237, 0.12)}
.stat-icon--orange{background:rgba(234, 122, 26, 0.12)}
.stat-icon--green{background:rgba(0, 174, 66, 0.12)}
.stat-icon-img{
  width:36px;
  height:36px;
  object-fit:contain;
  display:block;
  pointer-events:none;
}
.stat-spark{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.stat-body h3{margin:0 0 4px;font-size:14px;font-weight:600;color:var(--text-soft)}
.stat-value{
  font-size:26px;
  font-weight:800;
  letter-spacing:-0.02em;
  margin-bottom:2px;
  color:var(--text);
}
.stat-rate{font-size:12px;font-weight:600;color:var(--muted)}
.stat-spark canvas{width:100% !important;height:36px !important;max-width:100%}

/* Paneller */
.panel{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:0 2px 8px rgba(0,0,0,0.04);
  padding:18px 20px;
}
.panel h2{
  margin:0;
  font-size:16px;
  font-weight:700;
  color:var(--text);
  min-width:0;
}
.panel-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.panel-head h2{flex:1}
.panel-see-all{
  flex-shrink:0;
  border:1px solid var(--line);
  background:var(--page);
  color:var(--text-soft);
  font-family:inherit;
  font-size:13px;
  font-weight:700;
  padding:7px 14px;
  border-radius:999px;
  cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.panel-see-all:hover{
  background:#e8eaed;
  color:var(--text);
  border-color:#d0d2d6;
}
.donut-wrap{
  display:grid;
  grid-template-columns:minmax(0, 220px) 1fr;
  gap:20px;
  align-items:center;
}
.donut-box{height:176px;min-width:0}
.legend-list{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.legend-list li{
  display:flex;justify-content:space-between;align-items:baseline;
  gap:12px;
  font-size:14px;
  color:var(--text-soft);
}
.dot{
  display:inline-block;width:10px;height:10px;border-radius:50%;
  margin-right:10px;vertical-align:middle;flex-shrink:0;
}
.dot.blue{background:var(--blue)} .dot.purple{background:var(--purple)}
.dot.orange{background:var(--orange)} .dot.green{background:var(--green)}

.records{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.records li{
  display:flex;justify-content:space-between;align-items:center;
  gap:12px;
  padding-bottom:6px;
  border-bottom:1px solid var(--line);
}
.records li:last-child{border-bottom:0;padding-bottom:0}
.rec-main{display:flex;align-items:flex-start;gap:10px;min-width:0}
.rec-main svg{flex-shrink:0;margin-top:1px;opacity:.55}
.records strong{display:block;font-size:14px;font-weight:700}
.records span{display:block;font-size:13px;color:var(--muted);margin-top:2px}
.pill{
  font-style:normal;
  font-size:11px;font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em;
  padding:6px 11px;
  border-radius:999px;flex-shrink:0;
}
.pill.blue{color:var(--blue);background:rgba(31, 109, 224, 0.1)}
.pill.purple{color:var(--purple);background:rgba(124, 58, 237, 0.1)}
.pill.orange{color:#c45f0a;background:rgba(234, 122, 26, 0.12)}
.pill.green{color:var(--green);background:rgba(20, 146, 80, 0.1)}

.chart-wrap.small{height:150px;min-width:0}
.ghost-btn{
  width:100%;
  margin-top:16px;
  border:1px solid var(--line);
  background: var(--page);
  color:var(--text);
  border-radius:var(--radius-sm);
  padding:12px 14px;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
  display:flex;justify-content:space-between;align-items:center;
  transition:background .15s;
}
.ghost-btn:hover{background:#e8eaed}

/* Özellik bandı:footer-background.png; alt bari ile bitişik değil, ayrı kart */
.feature-strip{
  margin-top:16px;
  margin-bottom:14px;
  background-image:var(--footer-feature-bg);
  background-position:center;
  background-repeat:no-repeat;
  border-radius:var(--radius);
  border:1px solid rgba(0,0,0,0.2);
  overflow:hidden;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  box-shadow:0 8px 28px rgba(0, 40, 32, 0.2);
}
.feature-strip article{
  padding:32px 20px 32px;
  color:#fff;
  min-width:0;
}
.feature-strip .feat-row{
  display:flex;
  align-items:center;
  gap:14px;
}
.feature-strip .feat-ico{
  flex-shrink:0;
  width:44px;
  height:44px;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-23px);
}
.feature-strip .feat-ico img{
  width:44px;
  height:44px;
  object-fit:contain;
  display:block;
}
.feature-strip .feat-text{min-width:0}
.feature-strip h3{
  margin:0 0 6px;
  font-size:15px;
  font-weight:800;
  letter-spacing:.02em;
  color:#fff;
}
.feature-strip p{
  margin:0;
  font-size:13px;
  line-height:1.6;
  color:rgba(255, 255, 255, 0.9);
}

/* Alt beyaz bar (üstteki yeşil şeritten ayrı kutu) */
.footer-outer{
  margin-top:0;
  padding:16px 20px 18px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.footer-brand{
  display:flex;align-items:center;gap:12px;
  min-width:0;
}
/* Sol menüdeki .sidebar-logo ile aynı: beyaz daire, içinde logo.png (hilal) */
.footer-brand .foot-logo{
  width:48px;
  height:48px;
  border-radius:50%;
  background:#fff;
  display:grid;
  place-items:center;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
  flex-shrink:0;
}
.footer-brand .foot-logo-img{
  width:30px;
  height:30px;
  display:block;
  object-fit:contain;
  object-position:center;
}
.footer-brand .fb-text strong{display:block;font-size:14px;font-weight:800;color:var(--text)}
.footer-brand .fb-text span{display:block;font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--green-ink);margin-top:2px}
.footer-copy{
  font-size:12px;
  color:var(--muted);
  text-align:center;flex:1;
  min-width:200px;
}
.socials{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
}
/* Sol menüdeki .sidebar-logo ile aynı dil: beyaz daire, hafif gölge, yeşil ikon */
.socials a{
  width:48px;height:48px;
  border-radius:50%;
  border:none;
  display:grid;place-items:center;
  color:var(--brand-p354);
  background:#fff;
  box-shadow:0 1px 4px rgba(0,0,0,0.12);
  transition:box-shadow .15s, color .15s, transform .1s;
}
.socials a:hover{
  color:var(--green-ink);
  box-shadow:0 2px 8px rgba(0,0,0,0.12);
}
.socials a svg{opacity:1}

/* Ortak inline SVG */
.ico{display:block;pointer-events:none}
.ico-24{width:24px;height:24px}

/* Leaflet gölge/clip */
#turkeyMap .leaflet-map-pane, #turkeyMap .leaflet-tile-pane{will-change:transform}

@media (max-width: 1180px){
  .stats-row,.two-cols,.feature-strip{grid-template-columns:repeat(2,1fr)}
  .map-card{min-height:clamp(480px,64vh,800px)}
}
@media (max-width: 860px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:12px 14px 20px;padding-left:20px}
  .topbar{margin:0 -14px 14px;padding-left:20px;padding-right:14px}
  .stats-row,.two-cols,.feature-strip,.donut-wrap{grid-template-columns:1fr}
  .map-card{min-height:clamp(320px,58vh,700px)}
  .footer-outer{flex-direction:column;text-align:center}
  .footer-copy{order:3}
}