@font-face {
    font-family: 'Exo';
    src: url('../../assets/Exo-VariableFont_wght.ttf') format('truetype');
  }
  body {
    font-family: 'Exo', sans-serif;
  }

  p,span,li{

    font-size: 14px;
  }

  .fontsize-11{

    font-size: 11px;
  }

    .fontsize-12{

    font-size: 12px;
  }

    .fontsize-13{

    font-size: 13px;
  }

    .fontsize-14{

    font-size: 14px;
  }

  .fontsize-15{

    font-size: 15px;
  }

  .fontsize-16{

    font-size: 16px;
  }

  .fontsize-17{

    font-size: 17px;
  }

  .dropdown-menu {
              min-width: auto!important; /* Varsayılan 10rem yerine otomatik genişlik */
            }


  .bg-primary{

    background-color: #449d4a!important;
  }

  .btn-primary  {
    border-color: #449d4a!important;
    background-color: #449d4a!important;
  }

   .btn-outline-primary {
    border-color: #449d4a!important;

    color: #449d4a!important;
  }

  .btn-outline-primary:hover {
    background-color: #449d4a!important;
    color: white;
  }

  .btn-outline-primary:hover i {
    color: white;
  }

  .bg-primary, .bg-success{
    background-color: #449d4a!important;
  }



/* Tüm <a> ve <button> içindeki <i> ikonlara geçiş efekti */
.btnHover i {
  display: inline-block; /* animasyonun çalışması için şart */
  transition: transform 0.3s ease;
}

/* Hover olduğunda ikonu sağa kaydır */
.btnHover:hover i {
  transform: translateX(7px);
}

.btnHover:hover {
  text-decoration: none!important;
}

.lazy-bg {
  position: relative;
  width: 100%;
  height: clamp(45vh, 60vw, 70vh);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  border-radius: 10px;
}
/* Daha belirgin Skeleton Loader Efekti */
.skeleton-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #ddd;  /* Daha parlak temel renk */
  background-image: linear-gradient(
    90deg,
    #ddd 0%,
    #fff 30%,  /* Beyaz bölgeyi biraz genişlettik */
    #fff 70%,
    #ddd 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.2s infinite linear; /* Animasyon süresini hafif kısalttık */
  z-index: 2;
  border-radius: 8px; /* Köşe yumuşatma opsiyonu, isteğe bağlı */
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}
.slide-content {
  position: absolute;
  bottom: 20px;
  left: 20px;
  z-index: 3;
  color: white;
}




    .slide-image {
        width: 100%;
        height: 70vh; /* ekran boyutuna göre büyür veya küçülür */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        transition: height 0.3s ease;
      }

      .slide-proje {
        width: 100%;
        height: clamp(35vh, 30vw, 60vh); /* ekran boyutuna göre büyür veya küçülür */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        border-radius: 10px;
        transition: height 0.3s ease;
      }




      /* Arka plan resmi için sütun stili */
    .bg-cover {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      /* Kartın yüksekliği satırın tamamını doldurabilsin diye min-height belirliyoruz */
      min-height: 300px; 
    }


    *:focus {
  outline: none !important;
  box-shadow: none !important;
}


.proje-img {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      transition: height 0.3s ease;
      /* Varsayılan yükseklik: mobilde */
      height: 200px;
    }
    /* Daha büyük ekranlarda (md ve üzeri) yüksekliği arttırabilirsiniz */
    @media (min-width: 768px) {
      .proje-img {
        height: 350px;
      }
    }


    .proje-img-small {
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      border-radius: 10px;
      transition: height 0.3s ease;
      /* Varsayılan yükseklik: mobilde */
      height: 150px;
    }
    /* Daha büyük ekranlarda (md ve üzeri) yüksekliği arttırabilirsiniz */
    @media (min-width: 768px) {
      .proje-img-small {
        height: 150px;
      }
    }