.num-blue {
    background: #03a9f4;
}
.num-orange {
    background: #ff9800;
}
.num-green {
    background: #4caf50;
}
.num-purple {
    background: #673ab7;
}
.num-teal {
    background: #009688;
}
.num-pink {
    background: #e91e63;
}
.process-icon-circle img.process-icon {
    width: 100%;
    /* İkon görseli kapsayıcı genişliğini tamamen doldurur */
    height: 100%;
    /* İkon görseli kapsayıcı yüksekliğini tamamen doldurur */
    object-fit: cover;
    /* Görsel, oranı bozulmadan daireyi doldurur; taşan kısımlar kırpılır */
    border-radius: 50%;
    /* Görseli daire formuna getirir */
}
.process-number-circle {
    display: inline-flex;
    /* İçerik boyutuna göre esneyen satır içi esnek konteyner */
    align-items: center;
    /* Daire içindeki içeriği dikeyde ortalar */
    justify-content: center;
    /* Daire içindeki içeriği yatayda ortalar */
    width: 34px;
    /* Numara dairesinin genişliği */
    height: 34px;
    /* Numara dairesinin yüksekliği */
    border-radius: 50%;
    /* Tam daire formu verir */
    font-size: 0.9rem;
    /* Numara yazı boyutu */
    font-weight: 700;
    /* Numara yazı kalınlığı (bold) */
    color: #fff;
    /* Numara yazı rengi (beyaz) */
    transition: box-shadow 0.25s ease;
    /* Hover durumunda gölge geçiş animasyonu */
}
.process-number-circle:hover {
    box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
    /* Üzerine gelindiğinde numara dairesine hafif parlama/gölge efekti ekler */
}
@media (max-width: 600px) {

    /* 600px ve altı ekranlar (küçük mobil cihazlar) için */
    .process-number-circle {
        width: 28px !important;
        /* Küçük ekranda numara dairesini biraz küçültür (genişlik) */
        height: 28px !important;
        /* Küçük ekranda numara dairesini biraz küçültür (yükseklik) */
        font-size: 0.78rem !important;
        /* Numara yazı boyutunu küçültür */
        margin-right: 6px !important;
        /* Dairenin sağ tarafına küçük bir boşluk ekler */
    }
}
@media (min-width: 992px) {
    .reveal-fade-up {
        opacity: 0;
        transform: translateY(40px);
        transition: all 0.8s ease-out;
    }
    .reveal-fade-up.visible {
        opacity: 1;
        transform: translateY(0);
    }
    .reveal-fade-up {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 1.6s ease, transform 1.6s ease;
    }
    .wave-1 {
        transition-delay: 0.00s !important;
    }
    .wave-2 {
        transition-delay: 0.25s !important;
    }
    .wave-3 {
        transition-delay: 0.55s !important;
    }
    .wave-4 {
        transition-delay: 0.85s !important;
    }
    .wave-5 {
        transition-delay: 1.15s !important;
    }
    .reveal-active {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
    .process-item {
        position: relative;
    }
    .process-icon-circle {
        width: 78px;
        height: 78px;
        border-radius: 50%;
        padding: 4px;
        background: #ffffff;
        border: 2px dashed rgba(0, 0, 0, 0.10);
        box-shadow:
            0 12px 26px rgba(0, 0, 0, 0.18),
            0 3px 6px rgba(0, 0, 0, 0.12);
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
    }
    .process-icon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        object-fit: cover;
        transform: scale(1.03);
        transition:
            transform 0.45s cubic-bezier(.22, .61, .36, 1),
            filter 0.45s ease;
    }
    .process-item:hover .process-icon {
        transform: scale(1.10);
        filter: saturate(1.08);
    }
    .process-item:hover .process-number-circle {
        transform: translateY(-2px);
        box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
    }