@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* --- Temel Ayarlar --- */
body {
    font-family: 'Outfit', sans-serif;
}

/* --- Scroll Bar Özelleştirme --- */
/* Tarayıcının sağındaki kaydırma çubuğunun tasarımı */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* --- Hero Bölümü Arka Plan Efektleri (Blob) --- */
/* Ana sayfadaki o yumuşak renkli hareketli toplar */
.hero-blob {
    position: absolute;
    filter: blur(80px);
    z-index: 0;
    opacity: 0.6;
    animation: blob-bounce 10s infinite alternate;
}

@keyframes blob-bounce {
    0% { transform: translate(0, 0) scale(1); }
    100% { transform: translate(20px, -20px) scale(1.1); }
}

/* --- Referanslar İçin Sonsuz Kayan Bant (Marquee) --- */
/* Logoların sağa ve sola otomatik kaymasını sağlayan yapı */
.marquee-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Kenarlarda yumuşak geçiş (silikleşme) maskesi */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    width: max-content;
    gap: 2rem; /* Logolar arasındaki boşluk */
}

/* Sola Kayan Animasyon */
.animate-scroll {
    animation: scroll 40s linear infinite;
}

/* Sağa Kayan Animasyon */
.animate-scroll-reverse {
    animation: scroll-reverse 40s linear infinite;
}

/* Üzerine gelince durdurma özelliği */
.marquee-container:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes scroll {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@keyframes scroll-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
}

/* --- Telefon İkonu Titreme Efekti --- */
/* Header ve butonlardaki telefon ikonunun dikkat çekmesi için */
@keyframes phone-shake {
    0% { transform: rotate(0deg); }
    25% { transform: rotate(15deg); }
    50% { transform: rotate(0deg); }
    75% { transform: rotate(-15deg); }
    100% { transform: rotate(0deg); }
}

.animate-phone-shake {
    animation: phone-shake 2s ease-in-out infinite;
    display: inline-block;
}

/* --- Buton Parlama (Shimmer) Efekti --- */
/* "Teklif Al" butonunun üzerinden ışık geçmesini sağlayan efekt */
@keyframes shimmer {
    0% { transform: translateX(-100%) skewX(-12deg); }
    100% { transform: translateX(200%) skewX(-12deg); }
}

.animate-shimmer {
    animation: shimmer 2s infinite;
}

/* --- Cam Efekti (Glassmorphism) --- */
/* Header arkasının buzlu cam gibi görünmesi */
.glass-effect {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(229, 231, 235, 0.5);
}