.left-container {
  position: absolute;
  padding: 0;
  width: 45px;
  height: 270px;
  border-radius: 60px;
  transform: translateY(-50%);
  top: 50%;
  background: linear-gradient(180deg, light-dark(#56BAE1, #4e414e) 0%, light-dark(#629DF3, #070307) 100%);
  box-shadow: 0px 0px 10px 0px light-dark(rgba(170, 152, 179, 0.63), rgba(85, 71, 79, 0.63));
  left: 2svw;
}

.left-menu {
  display: flex;
  flex-direction: column; /* Listeyi dikey hizalar */
}

.left-item-top,
.left-item-bot,
.left-item {
  display: flex;
  width: 45px;
  height: 50px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.left-item-top,
.left-item-bot {
  height: 60px;
}

.left-item-top img,
.left-item-bot img,
.left-item img {  
  display: block;
  width: 35%; 
  height: 35%; 
  position: relative;
}

.left-item-top img {
  top: 2px;
  width: 32%; 
  height: 32%; 
} 

.left-item:hover,
.left-item-bot:hover,
.left-item-top:hover {
  background-color: light-dark(#7085a1c2, #000);
}

.left-item-bot:hover {
  border-radius: 0 0 41px 41px;
}

.left-item-top:hover {
  border-radius: 41px 41px 0 0;
}

/* Scrollbar genel ayarları */
::-webkit-scrollbar {
  width: 6px; /* İnce bir çubuk yap */
  display: block; /* Görünür hale getir */
}

/* Scrollbar arka planı */
::-webkit-scrollbar-track {
  background: light-dark(#f1f1f1, #16020e); /* Açık/Koyu tema desteği */
  border-radius: 10px;
}

/* Scrollbar kaydırma çubuğu */
::-webkit-scrollbar-thumb {
  background: light-dark(#b0b0b0, #444); /* Açık/Koyu tema desteği */
  border-radius: 10px;
}

/* Scrollbar üzerine gelince */
::-webkit-scrollbar-thumb:hover {
  background: light-dark(#909090, #666);
}


.left-box {
  display: none;
  position: absolute;
}

.left-box ul {
  position: absolute;
  display: block;
  list-style-type: none;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px light-dark(rgba(170, 152, 179, 0.63), rgba(179, 152, 168, 0.63));
  background: linear-gradient(180deg, light-dark(#f1f1f1, #4e414e) 0%, light-dark(#f1f1f1, #070307) 100%); 
  max-height: 300px;
  width: 240px;
  left: 30px; 
  border-radius: 15px;
  overflow-y: auto; /* Yatay değil, sadece dikey kaydır */
  transform: translateY(-35%);
  opacity: 0.9;
}

/* Liste elemanları */
.left-box ul li {    
  padding: 15px;
  border-bottom: 1px dotted light-dark(#c0c0c0, #000000);
  font-size: 12px;
  font-weight: 400;
  font-family: Roboto;
  text-align: center; /* Metni ortala */
}

.left-box ul li:last-child {
  border: 0;  
}

.left-box ul li:hover {  
  font-weight: 700;
}

.left-item-top#neczane::after {
  content: attr(placeholder);
  position: absolute;
  transform: translateY(-50%);
  background: light-dark(#3179b594, #16020ecb);
  color: white;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  margin-left: 10px;
}

.left-item-top#neczane:hover::after {
  content: "Nöbetçi Eczaneler";
  top: 10%;
  left: 90%;
  opacity: 1;
  visibility: visible;
}


.left-item#gkazi::after {
  content: attr(placeholder);
  position: absolute;
  transform: translateY(-50%);
  background: light-dark(#3179b594, #16020ecb);
  color: white;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  margin-left: 10px;
}

.left-item#gkazi:hover::after {
  content: "Günlük Kazılar";
  top: 50%;
  left: 90%;
  opacity: 1;
  visibility: visible;
}

.left-item#ucdmodels::after {
  content: attr(placeholder);
  position: absolute;
  transform: translateY(-50%);
  background: light-dark(#3179b594, #16020ecb);
  color: white;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  margin-left: 10px;
}

.left-item#ucdmodels:hover::after {
  content: "Su Kesintileri";
  top: 70%;
  left: 90%;
  opacity: 1;
  visibility: visible;
}

.left-item-bot#etkinlik::after {
  content: attr(placeholder);
  position: absolute;
  transform: translateY(-50%);
  background: light-dark(#3179b594, #16020ecb);
  color: white;
  font-size: 12px;
  padding: 5px 8px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  margin-left: 10px;
}

.left-item-bot#etkinlik:hover::after {
  content: "Etkinlikler";
  top: 90%;
  left: 90%;
  opacity: 1;
  visibility: visible;
}

/* İçerik listesi */
.inner-services {
  list-style: none;
  padding: 0;
  margin: 0;
  width: 200px;
  background: light-dark(#fff, #222);
  border: 1px solid light-dark(#ccc, #444);
  border-radius: 5px;
  overflow: hidden;
}

/* Sticky başlık */
.left-dd-header {
  font-weight: bold;
  font-size: 14px;
  padding: 10px;
  background-color: light-dark(#f0f0f0, #333);
  border-bottom: 1px solid light-dark(#ccc, #555);
  position: sticky;
  top: 0;
  z-index: 10;
  text-align: center;
}

/* Scrollable Liste Alanı */
.scrollable-list {
  max-height: 200px; /* Liste yüksekliği belirle */
  overflow-y: auto; /* Yalnızca dikey kaydırma aktif */
}

.left-dd-item {
  padding: 10px;
  cursor: pointer;
  transition: background 0.3s;
  text-align: center;
}

.left-dd-item:hover {
  background: light-dark(#e0e0e0, #444);
}