@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/Poppins-Regular.woff2') format('woff2'),
         url('../assets/fonts/Poppins-Regular.woff') format('woff');
    font-weight: 400; /* Regular ağırlık */
    font-style: normal;
    font-display: swap; /* Font yüklenene kadar yedek font göster */
}

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/Poppins-Bold.woff2') format('woff2'),
         url('../assets/fonts/Poppins-Bold.woff') format('woff');
    font-weight: 700; /* Bold ağırlık */
    font-style: normal;
    font-display: swap;
}



body {
    font-family: 'Poppins', sans-serif !important; 
}

.mainLinks {
    color: white;
}

.rounded-header-special {

  border-top-left-radius: 0;
  border-top-right-radius: 0;


  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;


}
#logoImg {
  transition: filter 0.5s ease, transform 0.5s ease;
  filter: invert(1) brightness(15);
}
.slider-progress-container {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute; /* Header üzerindeyse */
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
}

/* Her bir nokta (dot) */
.progress-dot {
    position: relative;
    width: 32px; /* Dairenin dış boyutunu belirler */
    height: 32px;
    margin: 0 10px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

/* İçindeki küçük nokta */
.dot-inner {
    width: 8px;
    height: 8px;
    background-color: white; /* Varsayılan renk */
    border-radius: 50%;
    z-index: 2; /* İlerleme halkasının (SVG) üstünde kalmasını sağlar */
    transition: background-color 0.3s;
 
    
}



/* ------------------ SVG İlerleme Çubuğu CSS'i ------------------ */

.progress-ring {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotate(-90deg); /* Animasyonun üstten başlaması için */
    z-index: 1; /* İçteki noktanın altında kalmasını sağlar (dot-inner z-index: 2 olduğu için) */
}

.ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.4); /* Gri/saydam arka plan */
    stroke-width: 2;
}

.ring-progress {
    fill: none;
    stroke: white; /* İlerleyen kısım */
    stroke-width: 3;
    stroke-linecap: round;
    /* Dairenin çevresi (2 * Pi * r) = 2 * 3.14159 * 15.9155 ≈ 100 */
    stroke-dasharray: 100; 
    stroke-dashoffset: 100; /* Başlangıçta tam gizli */
    transition: stroke-dashoffset 0s linear; /* JavaScript ile kontrol edeceğimiz için 0s */
}

/* Sadece aktif noktada ilerleme halkasını göster */
.progress-dot:not(.active) .progress-ring {
    display: none;
}



#sliderImage {
  transition: opacity 1.2s ease-in-out;
  opacity: 1;
}

/* Metin animasyonları */
@keyframes textFadeUpIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes textFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-10px); }
}

.anim-in { animation: textFadeUpIn 600ms ease forwards; }
.anim-out { animation: textFadeOut 400ms ease forwards; }

#sliderTitle, #sliderDescription, #sliderButton1, #sliderButton2 {
  opacity: 1;
  transition: opacity 0.5s ease-in-out;
}