:root{
   --bg-1: #f0f4f8; /* Açık Mavi/Gri (Light Blue/Gray) */
   --bg-2: #ffffff; /* Saf Beyaz (Pure White) */
   --accent: #20b2aa; /* Açık Teal/Deniz Yeşili (Light Sea Green) - Vurgu Rengi */
   --card: #e8ecf1; /* Çok Açık Gri/Kart Arka Planı (Very Light Gray) */
   --glass: rgba(0,0,0,0.05); /* Açık cam efekti */
   --glass-2: rgba(0,0,0,0.1);
   --glass-border: rgba(0,0,0,0.1);
   --text: #1f2937; /* Koyu Gri (Dark Gray) - Okunabilirlik için */
   --muted: rgba(31, 41, 55, 0.6); /* Kısık Metin (Daha Açık Koyu) */
  }
  *{box-sizing:border-box}
  body{margin:0;min-height:100vh;background:linear-gradient(180deg,var(--bg-1),var(--bg-2));color:var(--text)}
  .container{max-width:1200px;margin:0 auto;padding:48px 24px}
 
  a{text-decoration: none;color: var(--text);} /* Bağlantı metin rengi */
  /* header */
  header{display:flex;align-items:center;justify-content:space-between;}
  .brand{display:flex;align-items:center;gap:14px}

  .logo img{width:auto !important;  height: 60px; filter: invert(0);} /* Koyu logoya gerek kalmadı */
  .brand h1{margin:0;font-size:20px;letter-spacing:0.6px}
  nav a{color:var(--muted);text-decoration:none;margin-left:20px;font-size:15px;margin-right: 20px;}

  /* hero */
  .hero{align-items: center;
 
  display: flex;
  flex-wrap: wrap;
  }
  .hero-left h2{font-size:34px;line-height:1.45;margin:0 0 18px}
  .hero-left p{margin:0 0 22px;color:var(--muted);max-width:620px}
  .cta{display:inline-flex;align-items:center;gap:12px;background:var(--accent);color:white;padding:12px 18px;border-radius:10px;font-weight:600;box-shadow:0 6px 18px rgba(0,0,0,0.2);border:none;cursor:pointer}

  /* map area - use your exported map image as map-bg.png next to this HTML */
  .map-wrap{display:flex;align-items:center;justify-content:center}
  .map-wrap img{max-width:100%;height:auto;filter:drop-shadow(0 8px 24px rgba(0,0,0,0.1));}

  /* cards */
  .cards{
    display: grid;
 gap: 18px;
 margin-top: 28px;
 grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
  .card{background:linear-gradient(180deg, rgba(0,0,0,0.03), rgba(0,0,0,0.01));padding:15px;border-radius:12px;backdrop-filter:blur(6px);border:1px solid var(--glass-border);min-height:120px;display:flex;flex-direction:column;gap:8px}
  .card .icon{width:100px;height:70px;border-radius:8px;display:grid;place-items:center;background:unset;color:white;padding: 5px;} /* İkon arka planı vurgu rengi, ikonu beyaz yaptık */
  .card h3{margin:0;font-size:16px}
  .card p{margin:0;color:var(--muted);font-size:13px;font-weight: 400;}

  /* bottom hero CTA band */
  .band{margin-top:36px;background:linear-gradient(180deg, rgba(0,0,0,0.05), rgba(0,0,0,0.03));padding:26px;border-radius:12px;display:flex;align-items:center;justify-content:space-between;border:1px solid rgba(0,0,0,0.08)}
  .band .left h4{margin:0 0 6px;font-size:18px}
  .band .left p{margin:0;color:var(--muted)}

  footer{color:var(--muted);font-size:13px;text-align:center}

  /* responsive */
  @@media (max-width:1000px){
   .hero{grid-template-columns:1fr 360px}
   .cards{grid-template-columns:repeat(2,1fr)}
  }
  @@media (max-width:720px){
   .container{padding:28px 18px}
   header{flex-direction:column;align-items:flex-start;gap:12px}
   .hero{grid-template-columns:1fr;gap:22px}
   .map-wrap{order:2}
   .cards{grid-template-columns:1fr}
  }
 
  .cardssection h3{
    color:var(--text); /* Başlık rengi */
  }

/* 1. Kapsayıcı (hero-container) */
.hero-container {
 display: flex;    /* Flexbox'u etkinleştirir */
 width: 100%;     /* Tam genişlik */
 min-height: 400px;  /* Örnek için bir yükseklik */
 border: 2px solid var(--accent); /* Sınır görselleştirmesi - Vurgu Rengi */
 box-sizing: border-box;
}

.hero-left {
 flex: 0 0 55%;
 padding: 20px;
}

.map-wrap {
 flex: 0 0 45%;
 padding: 20px;
}


/* 3. Duyarlılık (Responsive) - Mobil Görünüme Geçiş */

/* Ekran genişliği 768px veya altına düştüğünde çalışır (Tablet/Mobil Kesme Noktası) */
@media (max-width: 768px) {

 .hero-container {
  /* Yan yana durmak yerine alt alta sıralanmasını sağlar */
  flex-direction: column;
 }

 .hero-left,
 .map-wrap {
  /* Her iki alan da tam genişliği (%100) kaplar */
  flex: 0 0 100%;
  /* Alt alta yığıldığında biraz boşluk bırakmak için */
  margin-bottom: 15px;
 }
}

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  font-family: "Poppins", sans-serif;
}

header {
  min-height: 10vh;
  display: flex;
}

#all {
  flex: 1;
  /* Arka planı açık tonlara çevirdik */
  background: linear-gradient(207deg, #e8f0ff 0%, #ffffff 100%);
  filter: progid: DXImageTransform.Microsoft.gradient( startColorstr="#e8f0ff", endColorstr="#ffffff", GradientType=1 );
  min-height: 90vh;
}


#svg-turkiye-haritasi path {
  fill: #79a6d2; /* Açık mavi ton */
}


#all .title-bg {
  background: linear-gradient(207deg, #00608b 0%, #187299 100%);
  box-shadow: 0 2px 8px rgba(32, 178, 170, 0.3);
}

.svg-turkiye-haritasi {
  max-width: 100% !important;
}


/* Ana Kart Konteyneri */
.custom-job-count-card {
  background-color: #f3f4f6; /* Çok açık gri */
  border-radius: 8px;
  padding: 15px;
  position: relative;
  overflow: hidden;
  color: var(--text); /* Koyu metin rengi */
  font-family: "Poppins", sans-serif;
  margin-top: 20px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.custom-job-count-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 25%;
  height: 65%;
  border-top: 2px solid var(--accent); /* Vurgu Rengi */
  border-left: 2px solid var(--accent); /* Vurgu Rengi */
  border-top-left-radius: 8px;
}


.custom-job-count-card .card-header-text {
  font-size: 0.8rem;
  opacity: 0.7;
  margin-bottom: 5px;
  letter-spacing: 0.5px;
}


.custom-job-count-card .job-count {
  display: flex;
  align-items: center;
  font-size: 2rem;
  font-weight: 700;
}


footer{
  background: #00000010;
  width: 100%;
  min-height: 5vh;
  font-size:0.75em;
  color: var(--muted);
display: flex;
align-items: center;
}

a {
  color: var(--text); /* Bağlantı rengi koyu */
  text-decoration: none;
}

.buttonSet{
  position:absolute;
  right:1%;
  margin-top:1%;
  color:white; /* Navigasyon çubuğu koyu olduğu için beyaz kalabilir */
  z-index: 99;
}

.vurgulanan-il path{ fill: #086b97  !important; }

#all{
    background: linear-gradient(207deg, #ffffff 0%, #cdd7e1 100%);
}

#area1 .bg-secondary{
    background: #fff !important;
}

#area3 .bg-secondary{
    background: #fff !important;
}

#area1 .text-white-50{
    color:#000 !important;
}

#area1 .card-body{
    color:#fff !important;
}

#area1 .card-body .h5{
    color:#000 !important;
}

#area1 .shadow-lg{
    box-shadow: unset !important;
}

.card-header-text{
    color:#000;
}

.job-count{
    color:#000;
}

.custom-job-count-card::before{
    border-top: 2px solid #096790;
    border-left: 2px solid #0b6891;
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: rgb(0 0 0 / 62%) !important;
}

.text-white {
    --bs-text-opacity: 1;
    color: rgba(0 0 0 / 90%) !important;
}

.logoproje {
    position: absolute;
    width: 10%;
    right: 10px;
    bottom: 15px;
}

.iseyerlestirme .odometer {
    font-size: 48px;
}

.odometer {
    display: flex;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1;
    width: fit-content;
    margin: 0 auto;
}

.odometer-digit {
    display: inline-block;
    overflow: hidden;
    height: 1em;
    line-height: 1em;
}

.odometer-digit-inner {
    display: flex;
    flex-direction: column;
}

.odometer-digit-inner span {
    height: 1em;
    line-height: 1em;
}

.vurgulanan-il {
    animation: ilPulse 0.8s ease-out;
}

@keyframes ilPulse {
    0% { fill-opacity: 0.6; }
    50% { fill-opacity: 1; }
    100% { fill-opacity: 0.8; }
}

.iskur-pin-icon {
    will-change: top, left, transform;
}

/* Seçilen il */
.vurgulanan-il {
    transform-origin: center center;
    animation: ilZoomPulse 0.6s ease-out;
}

@keyframes ilZoomPulse {
    0% {
        transform: scale(1);
        fill-opacity: 0.7;
    }
    40% {
        transform: scale(1.08); /* minik zoom */
        fill-opacity: 1;
    }
    100% {
        transform: scale(1);
        fill-opacity: 0.85;
    }
}

.acikis .card{
    --bs-bg-opacity: .35;
    background-color: #fff !important;
}

.main{
    height:95vh;
}

.navbar-brand {
    color: #1f2937;
}

.navbar-toggler-icon {
    color:#2d3643;
    width: auto;
    height: auto;
}

.navbar-brand:focus, .navbar-brand:hover {
    color: #1f2937;
}

.orangeicon {
    font-size: 2.5em !important;
    color: #cf812f;
}

.filter-remove-button{
    border: 1px solid;
    border-radius: 5px;
    padding: 2px 5px;
    height: fit-content;
    font-size: 10px;
}