.seo-hero {
    background-color: #0b0c10;
    background-image: 
        radial-gradient(at 0% 0%, rgba(76, 201, 240, 0.1) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(67, 97, 238, 0.1) 0px, transparent 50%);
    position: relative;
    overflow: hidden;
    padding-top: 180px;
    padding-bottom: 120px;
    color: white;
}

/* Yükselen Data Çizgileri */
.data-rain {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none; z-index: 0;
}
.data-line {
    position: absolute; bottom: -100%; width: 1px;
    background: linear-gradient(to top, transparent, rgba(76, 201, 240, 0.5), transparent);
    animation: rise-up linear infinite;
}
@keyframes rise-up { 0% { bottom: -100%; opacity: 0; } 50% { opacity: 1; } 100% { bottom: 100%; opacity: 0; } }

/* 2. Rank Up Animasyonu (Sıralama Yükselişi) */
.rank-container {
    position: relative;
    width: 100%; max-width: 400px;
    height: 350px;
    margin: 0 auto;
    perspective: 1000px;
}
.search-result-card {
    background: #1f2833;
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid #45a29e;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    display: flex; flex-direction: column; gap: 8px;
    opacity: 0.5; transform: scale(0.9);
    transition: all 0.5s;
    position: absolute; width: 100%;
}
/* Google Sonuç Simülasyonu */
.result-url { height: 8px; width: 40%; background: #45a29e; border-radius: 4px; opacity: 0.7; }
.result-title { height: 16px; width: 80%; background: #66fcf1; border-radius: 4px; }
.result-desc { height: 8px; width: 90%; background: #c5c6c7; border-radius: 4px; opacity: 0.5; }

/* Animasyonlu Kart (Bizim Site) */
.hero-card {
    z-index: 10;
    background: #0b0c10;
    border: 2px solid #66fcf1;
    box-shadow: 0 0 30px rgba(102, 252, 241, 0.2);
    animation: rank-climb 6s ease-in-out infinite;
}

@keyframes rank-climb {
    0% { top: 250px; opacity: 0.6; transform: scale(0.95); } /* 3. Sıra */
    30% { top: 130px; opacity: 0.8; transform: scale(0.98); } /* 2. Sıra */
    60% { top: 10px; opacity: 1; transform: scale(1.05) translateZ(20px); box-shadow: 0 20px 50px rgba(102, 252, 241, 0.4); } /* 1. Sıra */
    80% { top: 10px; opacity: 1; transform: scale(1.05) translateZ(20px); } /* Bekle */
    100% { top: 10px; opacity: 1; transform: scale(1.05); } /* Loop reset için fade out yapılabilir ama loop güzel dursun */
}

/* Arka Plandaki Sabit Kartlar */
.competitor-1 { top: 10px; opacity: 0.3; animation: rank-drop-1 6s ease-in-out infinite; }
.competitor-2 { top: 130px; opacity: 0.4; animation: rank-drop-2 6s ease-in-out infinite; }

@keyframes rank-drop-1 { 0% { top: 10px; } 60% { top: 130px; } 100% { top: 130px; } }
@keyframes rank-drop-2 { 0% { top: 130px; } 60% { top: 250px; } 100% { top: 250px; } }

/* 3. Neon Text */
.neon-text { color: #66fcf1; text-shadow: 0 0 10px rgba(102, 252, 241, 0.5); }

/* 4. Scanner Efekti (Teknik SEO) */
.scanner-box {
    position: relative;
    background: #1f2833;
    border-radius: 1rem;
    padding: 2rem;
    overflow: hidden;
    border: 1px solid #45a29e;
}
.scanner-line {
    position: absolute; top: 0; left: 0; width: 100%; height: 4px;
    background: #66fcf1;
    box-shadow: 0 0 15px #66fcf1;
    animation: scan-vertical 3s linear infinite;
    opacity: 0.5;
}
@keyframes scan-vertical { 0% { top: 0; } 100% { top: 100%; opacity: 0; } }

.code-snippet {
    font-family: monospace; font-size: 0.8rem; color: #c5c6c7; line-height: 1.6; opacity: 0.7;
}
.code-highlight { color: #66fcf1; font-weight: bold; }

/* 5. Keyword Cloud (Yüzen Kelimeler) */
.keyword-cloud { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; opacity: 0.6; }
.keyword-tag {
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
    padding: 5px 15px; border-radius: 20px; font-size: 0.8rem; color: #c5c6c7;
    animation: float-tag 4s ease-in-out infinite;
}
.keyword-tag:nth-child(even) { animation-duration: 5s; animation-delay: 1s; }
@keyframes float-tag { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

/* 6. Growth Graph (Büyüme Grafiği) */
.graph-wrapper {
    position: relative; height: 200px; border-left: 2px solid #45a29e; border-bottom: 2px solid #45a29e;
    display: flex; align-items: flex-end; gap: 5px; padding-left: 10px; padding-bottom: 5px;
}
.graph-bar {
    width: 100%; background: linear-gradient(to top, #1f2833, #66fcf1);
    opacity: 0.7; border-top-left-radius: 4px; border-top-right-radius: 4px;
    animation: grow-bar 2s ease-out forwards; height: 0;
}
@keyframes grow-bar { to { height: var(--h); } }

@media (max-width: 1024px) {
    #analiz .rounded-full {
        border-radius: 0 !important;
    }
}