@font-face {
    font-family: 'Figtree';
    src: url('/fonts/Figtree/Figtree-VariableFont_wght.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}


body {
    font-family: 'Figtree', sans-serif;
}

/* 1. Kaydırma çubuğunun genel genişliği */
::-webkit-scrollbar {
    width: 12px;
}

/* 2. Kaydırma çubuğunun arka planı (Kanalı) */
::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 10px;
}
 
/* 3. Hareket eden kaydırma butonu */
::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
}

/* 4. Kullanıcı üzerine gelince butonun rengi */
::-webkit-scrollbar-thumb:hover {
    background: #555; 
    --p: 2px; /* İsteğe bağlı */
}


@import "tailwindcss";

@theme {
    --animate-glow: glow 4s ease-in-out infinite;
    --animate-pulseRing: pulseRing 2.5s ease-out infinite;
    --animate-starGlow: starGlow 2s ease-in-out infinite;
    --animate-starFloat: starFloat 2s ease-in-out infinite;
    --animate-brandReveal: brandReveal 1s ease-out forwards;
    --animate-fadeIn: fadeIn 1s ease-out forwards;
    --animate-loadingDot: loadingDot 1.4s ease-in-out infinite;
}

@keyframes glow {
    0%, 100% {
        opacity: 0.4;
        transform: scale(0.9);
    }

    50% {
        opacity: 0.8;
        transform: scale(1.1);
    }
}

@keyframes pulseRing {
    0% {
        transform: scale(0.5);
        opacity: 0.8;
    }

    70% {
        transform: scale(1.8);
        opacity: 0;
    }

    100% {
        transform: scale(1.8);
        opacity: 0;
    }
}

@keyframes starGlow {
    0%, 100% {
        transform: scale(0.8);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.3);
        opacity: 0.8;
    }
}

@keyframes starFloat {
    0%, 100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-4px) scale(1.04);
    }
}

@keyframes brandReveal {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes loadingDot {
    0%, 100% {
        transform: translateY(0);
        opacity: 0.25;
    }

    50% {
        transform: translateY(-3px);
        opacity: 1;
    }
}