/* HEXAGON arka plan ve genel stil */
.sidebar__nav li a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0px;
  justify-content: flex-start;
  padding: 0 20px;
  height: 44px;
  line-height: 44px;
  background-color: #090f29;
  color: white;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  font-family: Helvetica, Arial, sans-serif;
  box-sizing: border-box;
  border: none;
  clip-path: polygon(
    7% 0%, 93% 0%, 98% 50%,
    93% 100%, 7% 100%, 2% 50%
  );
  transition: 0.3s ease;
  z-index: 1;
}

/* Hover + active: mavi → biraz daha açık mavi geçiş */
.sidebar__nav li a:hover,
.sidebar__nav li.active a {
    background: linear-gradient(to right, #0077FF 0%, #33A0FF 100%) !important;
    color: #ffffff !important;
    transition: background 0.25s ease-in-out;
}

/* ICON renkleri hover & aktif durumdayken beyaz */
.sidebar__nav li a:hover .svg-icon,
.sidebar__nav li.active a .svg-icon {
  fill: #ffffff !important;
  color: #ffffff !important;
}

.sidebar__nav li a:hover .svg-icon path,
.sidebar__nav li.active a .svg-icon path {
  fill: #ffffff !important;
}

/* Hover ve active durumunda metni beyaz yap */
.sidebar__nav li a:hover,
.sidebar__nav li.active a {
  background-color: #0077ff;
  color: #ffffff !important;
}

/* Ekstra garanti için span, strong, text vb. içerik elemanlarını da kapsa */
.sidebar__nav li a:hover *,
.sidebar__nav li.active a * {
  color: #ffffff !important;
  fill: #ffffff !important;
}


/* SVG ikonların arkasına mavi hexagon arkaplan */
.sidebar__nav li a .svg-icon {
  position: relative;
  z-index: 1;
}

/* Hexagon arka plan */
.sidebar__nav li a .svg-icon::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background-color: #0077ff;
clip-path: polygon(25% 0%, /* Sol üst */ 75% 0%, /* Sağ üst */ 100% 50%, /* Sağ orta */ 75% 100%, /* Sağ alt */ 25% 100%, /* Sol alt */ 0% 50% /* Sol orta */);
  z-index: -1;
}

.sidebar__nav li a .svg-icon {
    position: relative;
    z-index: 1;
    background-color: #0077ff;
    clip-path: polygon(30% 0%, /* Sol üst */ 70% 0%, /* Sağ üst */ 100% 50%, /* Sağ orta */ 70% 100%, /* Sağ alt */ 30% 100%, /* Sol alt */ 0% 50% /* Sol orta */);
    padding: 7px;
    width: 40px;
    height: 35px;
}

.sidebar__nav li a .svg-icon {
  position: relative;
  z-index: 1;
  background-color: #0077ff; /* Normal hali */
  clip-path: polygon(
    30% 0%,   /* Sol üst */
    70% 0%,   /* Sağ üst */
    100% 50%, /* Sağ orta */
    70% 100%, /* Sağ alt */
    30% 100%, /* Sol alt */
    0% 50%    /* Sol orta */
  );
  padding: 7px;
  width: 40px;
  height: 35px;
}

/* Aktif veya hover durumunda arka plan rengini #090f29 yap */
.sidebar__nav li.active a .svg-icon,
.sidebar__nav li a:hover .svg-icon {
  background-color: #090f29;
  margin-left: -10px;
}

.sidebar__nav li.active a {
  box-shadow: 0 0 8px 3px rgba(0, 119, 255, 0.4);
}