/* ===== VANTA.JS GLOBE BACKGROUND STYLES ===== */
/* Globe animasyonu için CSS - Sadece ana sayfa için */

/* Globe container - tüm sayfanın arkasında */
#vanta-globe-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -2;
    pointer-events: none;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

#vanta-globe-bg.loaded {
    opacity: 1;
}

/* Globe canvas performans optimizasyonu */
#vanta-globe-bg canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
}

/* Gradient overlay - içeriğin okunabilirliği için */
.globe-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: 
        radial-gradient(ellipse at center, transparent 20%, rgba(10, 10, 15, 0.2) 50%, rgba(10, 10, 15, 0.5) 80%);
}

/* Globe yüklenirken gösterilecek placeholder */
.globe-loading-placeholder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -3;
    background: 
        radial-gradient(ellipse at top center, rgba(99, 102, 241, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse at bottom center, rgba(139, 92, 246, 0.05) 0%, transparent 50%),
        var(--bg-primary, #0a0a0f);
}

/* Globe animasyon hız göstergesi (debug için, production'da gizli) */
.globe-speed-indicator {
    position: fixed;
    bottom: 20px;
    left: 20px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.7);
    border-radius: 8px;
    font-size: 12px;
    color: var(--text-secondary, #a0a0b2);
    z-index: 9999;
    display: none; /* Production'da gizli */
    font-family: monospace;
}

.globe-speed-indicator.visible {
    display: block;
}

/* Mobilde globe animasyonunu optimize et */
@media (max-width: 768px) {
    #vanta-globe-bg {
        opacity: 0.7; /* Mobilde biraz daha hafif */
    }
    
    .globe-overlay {
        background: 
            radial-gradient(ellipse at center, transparent 0%, rgba(10, 10, 15, 0.5) 30%, rgba(10, 10, 15, 0.85) 60%);
    }
}

/* Reduced motion tercihi için */
@media (prefers-reduced-motion: reduce) {
    #vanta-globe-bg {
        display: none;
    }
    
    .globe-loading-placeholder {
        display: block;
    }
}

/* Düşük güçlü cihazlar için (battery saver mode vb.) */
@media (prefers-reduced-motion: reduce), (max-width: 480px) {
    #vanta-globe-bg canvas {
        animation: none !important;
    }
}

/* Globe animasyonu aktifken body scroll davranışı */
body.globe-active {
    scroll-behavior: smooth;
}

/* Globe hazır olduğunda gövde arka planını güncelle */
body.globe-ready {
    background: transparent;
}

body.globe-ready::before {
    opacity: 0.3; /* Mevcut gradient'i azalt */
}