/* =========================================
   ZERO ONE - FOOTER ARCHITECTURAL STYLES
   Technique: CSS Masking & GPU Acceleration
   ========================================= */

#footer {
    background-color: #050505;
    position: relative;
    /* SEO/Performans: İçerik ekrana girmeden render maliyeti oluşturmaz (Lazy Render) */
    content-visibility: auto;
}

/* ------------------------------------------------
   1. FOOTER LINKS (Technical Hover Effect)
   ------------------------------------------------ */
.footer-link {
    display: inline-block;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s ease;
    color: #9ca3af; /* Gray-400 */
    text-decoration: none;
    /* Font kenarlarını pürüzsüzleştirir */
    -webkit-font-smoothing: antialiased;
}

/* Linkin solundaki "/" işareti */
.footer-link::before {
    content: "/";
    position: absolute;
    left: -15px;
    opacity: 0;
    color: #e60000; /* Z-Red */
    transition: all 0.3s ease;
    font-weight: bold;
    font-family: monospace; /* Teknik kod görünümü */
}

.footer-link:hover {
    color: #ffffff;
    /* X ekseninde kaydırma (Performans dostu) */
    transform: translateX(15px);
}

.footer-link:hover::before {
    opacity: 1;
    left: -10px;
}

/* ------------------------------------------------
   2. SOCIAL MEDIA ICONS (Clean Box Design)
   ------------------------------------------------ */
.social-link {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9ca3af;
    background-color: transparent;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.social-link:hover {
    background-color: #ffffff;
    color: #050505;
    border-color: #ffffff;
    /* Hafif kalkış efekti */
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

/* ------------------------------------------------
   3. LOGO COLOR TRANSITION (Minimalist Style - Reference Based)
   Görsel referansına göre minimalist ve yumuşak geçiş efekti
   ------------------------------------------------ */

.footer-logo-link {
    display: inline-block;
    line-height: 0;
    position: relative;
}

.footer-logo-link img {
    /* Başlangıç: Beyaz logo görünür */
    opacity: 1;
    filter: brightness(0) invert(1);

    /* Çok Yavaş ve Yumuşak Geçiş - Minimalist Stil */
    transition: filter 4s cubic-bezier(0.33, 0, 0.67, 1);

    /* GPU Optimizasyonu */
    will-change: filter;
}

/* HOVER DURUMU - Logo Kırmızı Olur (Minimalist Geçiş) */
.footer-logo-link:hover img {
    /* Beyaz logoyu kırmızıya çevir - Yumuşak geçiş */
    filter: brightness(0) saturate(100%) invert(9%) sepia(100%) saturate(7471%)
        hue-rotate(0deg) brightness(90%) contrast(90%);
}

/* Kırmızı Nokta Efekti (Görsel Referansı) */
.footer-logo-link::after {
    content: "";
    position: absolute;
    right: -8px;
    bottom: 2px;
    width: 6px;
    height: 6px;
    background-color: #e60000;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 4s cubic-bezier(0.33, 0, 0.67, 1);
    pointer-events: none;
}

.footer-logo-link:hover::after {
    opacity: 1;
}