/* --- Temel Ayarlar --- */
body {
    background-color: #0a0a0a; /* Derin Siyah */
    color: #ffffff;
    overflow-x: hidden; /* Yatay taşmayı engelle */
}

/* --- Özel Scrollbar (Kaydırma Çubuğu) Tasarımı --- */
/* Chrome, Safari ve Edge için */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #0a0a0a; /* Arka plan */
}

::-webkit-scrollbar-thumb {
    background: #333; /* Çubuk rengi */
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #00e5ff; /* Turan rengi (hover durumunda) */
}

/* --- Animasyon Sınıfları (Vanilla JS ile tetiklenir) --- */
/* Aşağıdan yukarı süzülerek gelme efekti */
.fade-in-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease-out;
}

/* JS ile 'visible' sınıfı eklendiğinde devreye girer */
.fade-in-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animasyon Gecikmeleri (Sırayla gelmesi için) */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-500 { transition-delay: 500ms; }

/* --- Spotlight (Mouse Takip Eden Işık) Efekti --- */
.spotlight-card {
    position: relative; /* Before elementi için referans */
}

.spotlight-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    border-radius: 0.75rem; /* Kart köşeleriyle uyumlu */
    opacity: 0;
    transition: opacity 0.5s;
    pointer-events: none; /* Tıklamayı engellememesi için */
    
    /* Mouse pozisyonuna göre güncellenen degrade ışık */
    /* --mouse-x ve --mouse-y değişkenleri JavaScript ile güncellenir */
    background: radial-gradient(
        600px circle at var(--mouse-x, 0px) var(--mouse-y, 0px), 
        rgba(0, 229, 255, 0.1), /* Turan rengi, %10 opaklık */
        transparent 40%
    );
    z-index: 2;
}

.spotlight-card:hover::before {
    opacity: 1; /* Mouse üzerine gelince ışığı göster */
}