*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  color: #fff;
  font-family: "SF Pro Display", serif;
}
body{
  background-color:#0f192b;
  min-height:100svh;           /* mobil tarayıcı çubukları için daha güvenli */
  display:grid;                /* tek elemanı ortalamak için pratik */
  place-items:center;          /* hem yatay hem dikey merkez */
  padding:16px;                             
}



.container{
  width: 100%;
  max-width: 1140px;
  margin: 0;
  background: #131D2E;
  border:1px solid #3B4558;
  border-radius: 50px;
  box-shadow: 0 15px 40px #00000055 inset, 0 15px 40px #00000033;
  padding: 28px 28px 36px;
}


.search-bar{
      max-width: 420px;
      margin: 0 auto 18px;
      color: #fff;
    }
.search-bar .form-control{
      width: 100%;
      background: #0d182a;
      color: #e6e9ee;
      border: 1px solid #ffffff2a;
      border-radius: 50px;
      padding: .7rem 1.1rem;
      padding-right: 48px; /* buton için sağ boşluk */
      position: relative;  /* stacking context */
      z-index: 1;          /* input'un kendi seviyesi */
}
.search-wrap{
  position: relative;
  overflow: visible;   /* olası kırpmayı önler */
}
.search-bar .form-control::placeholder{ 
  color:#9aa5b4; 
}
.search-bar .form-control:focus{
  outline: none;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.18); /* istersen kaldırabilirsin */
  position: relative;
  z-index: 1; /* buton (z-index:2) üstte kalsın */
}





.search-btn {
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50px !important;
  background: #1f356a; /* mavi buton */
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, transform .15s ease;
  z-index: 2;
}

.search-btn:hover {
  background: #17306b;
  transform: translateY(-50%) scale(1.05);
}

.search-btn i {
  font-size: 1rem;
  line-height: 1;
}






.city-dropdown{
  position:absolute; left:0; right:0; top:100%; margin-top:8px; z-index:3;
  background:#0d182a; border:1px solid #ffffff2a; border-radius:16px;
  box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.04);
  max-height:280px; overflow:auto;
}
.city-item{
  padding:.6rem 1rem; cursor:pointer; color:#e6e9ee;
  display:flex; align-items:center; gap:.5rem;
}
.city-item:hover, .city-item.active{ background:rgba(255,255,255,.06); }
.city-item small{ color:#9aa5b4; }
.hidden{ display:none; }

/* Scrollbar isteğe bağlı */
.city-dropdown::-webkit-scrollbar{ width:8px; }
.city-dropdown::-webkit-scrollbar-thumb{ background:#2a3956; border-radius:8px; }



/* burasıı orta bölüm */


.display-city, 
.display-temp{
  font-weight: 500;
  font-size: 40px;
  text-align: center;
}


.display-date{
  font-weight: 700;
  font-size: 40px;
  text-align: center;
}

.img-weather{
  align-items: center;
  max-width: 200px;
  height: auto;
}





.mini-card{
  background-color: #131D2E;
  border: 1px solid #3B4558;
  border-radius: 50px;
  padding: 18px 16px;
  text-align:center;
  height: 100%;
  box-shadow: inset 0 10px 30px #00000042;
}

.mini-card .min-max{
  font-weight: 700;
  font-size: 30px;
  color: rgb(255, 255, 255);
}

.mini-card .chip{
  background-color: #0d182a;
  border: 1px solid #3B4558;
  border-radius: 50px;
  padding: 0.7rem;
  width: 80%;
}





/* Card Bölümü */


.day-card{
      background: linear-gradient(180deg, #223149, #0d131d);
      border:1px solid #3B4558;
      border-radius: 50px;
      padding: 18px 16px;
      text-align:center;
      height: 100%;
      box-shadow: inset 0 10px 30px #00000042;
    }
.day-card .day-top{
      color: #c6cbd6;
      font-size: 1rem;
    }
.day-top .date-text{
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
}
.day-top .day-text{
  font-size: 1.1rem;
  font-weight: 400;
  text-align: center;
}
.day-card .day-temp{
      font-weight:800;
      font-size: 40px;
      margin: 6px 0 4px;
    }
.emoji{
      max-width: 64px;
      font-size: 40px; 
      line-height:1; 
      margin: 6px 0;
      text-align: center;
      filter: drop-shadow(0 3px 6px #0009);
}
.day-card .soft{
  font-size: 1.2rem;
  font-weight: 400;
}

















@media (max-width: 576px) {
  .container {
    margin: 1rem;
    border-radius: 20px;
  }
  .day-card .day-temp {
    font-size: 24px;
  }

  .display-city, 
  .display-temp{
    font-weight: 500;
    font-size: 32px;
    text-align: center;
  }

  .weather-desc{
    font-size: 25px;
    margin: 1rem 0;
  }


  .display-date{
    margin: 1rem 0;
    font-size: 28px;   
    font-weight: 600;
  }

  .img-weather{
    align-items: center;
    max-width: 120px;
    height: auto;
  }

  .mini-card{
    max-width: 400px;
    margin-left: auto;
    margin-right: auto; 
  }



/* Alttaki mini card bölümü */


.card-bottom{
  margin-bottom: 1rem;
}

.day-card .day-top span{
  font-size: 1.9rem;
  font-weight: 500;
}
.day-card .day-text{
  font-size: 1.5rem;
}
.emoji{
  max-width: 100px;
}

.day-card .day-temp{
  font-size: 40px;
}
.day-card .soft{
  font-size: 24px;
  font-weight: 400;
}

}





@media (min-width: 577px) and (max-width: 1024px) {
  .container {
    width: 94vw;
    padding: 16px;
    border-radius: 20px;
  }
  .img-weather {
    max-width: 140px;
  }
  .display-city, 
  .display-temp{
  font-weight: 600;
  font-size: 40px;
  text-align: center;
}

.weather-desc{
  font-size: 22px;
  font-weight: 400;
}


.display-date{
    margin: 1rem 0;
    font-size: 28px;   
    font-weight: 600;
  }

.mini-card{
  max-width: 600px;
  margin: 0 auto 0 auto;
}



.day-card{
      max-width: 600px;
      margin: 0 auto 0 auto;
    }

.day-top .date-text{
  font-size: 1.8rem;
  font-weight: 600;
  text-align: center;
}
.day-top .day-text{
  font-size: 1.4rem;
  font-weight: 400;
  text-align: center;
}
.day-card .day-temp{
      font-weight:800;
      font-size: 40px;
      margin: 6px 0 4px;
    }
.day-card .soft{
  font-size: 1.4rem;
  font-weight: 400;
}

.emoji{
      max-width: 100px;
}
}


@media (min-width: 1025px) {
  .img-weather {
    max-width: 140px;
  }
}