.sakli-filtreler .views-exposed-form {
  width: 55px; float:right;
  /* max-width: 400px; */
  background: #f0f0f0;
  border: 1px solid #ccc;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  position: relative;
  overflow: hidden;
  max-height: 30px;
  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  padding: 0 15px;
  z-index:100;
}

.sakli-filtreler .views-exposed-form::before {
  content: "Filtreler";
  display: block;
  height: 45px;
  line-height: 30px;
  color: #888; /* Koyu gri */
  font-weight: bold;
  text-align: right;
  transition: opacity 0.3s;
}

.sakli-filtreler .views-exposed-form:hover::before {
  opacity: 0;
  height: 0;
}

.sakli-filtreler .views-exposed-form:focus,
.sakli-filtreler .views-exposed-form:active,
.sakli-filtreler .views-exposed-form:focus-within,
.sakli-filtreler .views-exposed-form:hover {width:95%;}
.sakli-filtreler .views-exposed-form .js-form-item,
.sakli-filtreler .views-exposed-form .form-actions {
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.sakli-filtreler .views-exposed-form:hover {
  max-height: 800px; /* İçeriğin sığacağı kadar büyük bir değer */
  cursor: default;
}

.sakli-filtreler .views-exposed-form:hover .js-form-item,
.sakli-filtreler .views-exposed-form:hover .form-actions {
 opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.sakli-filtreler .views-exposed-form {
  -webkit-mask-image: linear-gradient(to bottom, black 30px, transparent 45px);
  mask-image: linear-gradient(to bottom, black 30px, transparent 45px);
}
.views-exposed-form input ,
.views-exposed-form option {color:#888;font-size:90%}

.sakli-filtreler .views-exposed-form:hover {
  -webkit-mask-image: none;
  mask-image: none;
}

.sakli-filtreler .views-exposed-form .js-form-item {
  margin-top: 0;
}

/* sakli_filtreler.css font duzenlemeleri */
.sakli-filtreler .views-exposed-form::before {
    /* 16px -> 14px */
    font-size: clamp(0.875rem, 0.5vw + 0.8rem, 1rem);
}