/* ==========================================================================
   DEĞER MOTORU - GELIŞMIŞ AKAN ANİMASYON + HOVER SİSTEMİ
   Profesyonel SVG stroke animasyonları ve interaktif efektler
   ========================================================================== */

/* ============================================
   1. TEMEL AKAN ANİMASYON
   ============================================ */

.neon-flow-path {
    stroke-dasharray: 20 10;
    /* Çizgi uzunluğu: 20px, Boşluk: 10px */
    stroke-dashoffset: 0;
    animation: flow-animation 3s linear infinite;
    /* Hız: 3 saniye (buradan ayarla) */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes flow-animation {
    0% {
        stroke-dashoffset: 0;
    }

    100% {
        stroke-dashoffset: 30;
        /* dasharray toplamı (20+10) */
    }
}

.neon-flow-path.boost-mode {
    animation-duration: 0.4s !important;
    stroke-width: 5px !important;
    filter: drop-shadow(0 0 25px #00ffff) !important;
}

/* ============================================
   1A. GİRİŞ VE ÇIKIŞ YÖN FARKLARI
   ============================================ */

/* Giriş akışı: yukarıdan merkeze (enerjik ve toplanan) */
.neon-flow-path.input {
    animation-duration: 3s;
    animation-direction: reverse;
    /* Yukardan aşağı akış için */
    opacity: 0.8;
}

/* Çıkış akışı: merkezden aşağı (dağılan ve hızlı) */
.neon-flow-path.output {
    animation-duration: 2.5s;
    animation-direction: reverse;
    opacity: 0.9;
}

/* ============================================
   1B. FAZ FARKI İLE BAŞLATMA
   ============================================ */

.path-1 {
    animation-delay: 0s;
}

.path-2 {
    animation-delay: 0.5s;
}

.path-3 {
    animation-delay: 1s;
}

.path-4 {
    animation-delay: 1.5s;
}

/* ============================================
   2. BAĞLANTI GLOW EFEKTİ
   ============================================ */

.neon-flow-path::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    filter: blur(8px);
}

/* Başlangıç opacity'si düşük tutuldu */
.components-to-motor-connector .neon-flow-path {
    opacity: 0.7;
}

/* ============================================
   3. ÜST MODÜLLER - HOVER EFEKTİ
   ============================================ */

.components-grid {
    position: relative;
    z-index: 10;
}

.engine-component {
    position: relative;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.engine-component::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: linear-gradient(135deg, transparent, rgba(0, 212, 255, 0.2));
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.engine-component:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 15px 35px rgba(0, 212, 255, 0.3);
}

.engine-component:hover::before {
    opacity: 1;
}

/* ============================================
   4. MERKEZ MOTOR - PULSING EFFECT
   ============================================ */

.engine-core {
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    animation: subtle-pulse 4s ease-in-out infinite;
}

@keyframes subtle-pulse {

    0%,
    100% {
        box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    }

    50% {
        box-shadow: 0 0 50px rgba(0, 212, 255, 0.5);
    }
}

.engine-core:hover {
    animation: none;
}

/* ============================================
   4A. MERKEZ ENERJİ HALKASI
   ============================================ */

.core-energy-ring {
    position: absolute;
    inset: -20px;
    border-radius: 50%;
    border: 2px solid rgba(0, 255, 255, 0.3);
    animation: core-energy 2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes core-energy {
    0% {
        transform: scale(0.9);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.05);
        opacity: 0.8;
    }

    100% {
        transform: scale(0.9);
        opacity: 0.3;
    }
}

/* Merkez hover'da tüm path'ler parlar */
.value-engine-section:has(.engine-core:hover) .neon-flow-path {
    stroke: #00ffff !important;
    stroke-width: 4;
    opacity: 1;
    animation: intense-flow 1.5s linear infinite;
}

@keyframes intense-flow {
    0% {
        stroke-dashoffset: 0;
        filter: drop-shadow(0 0 10px #00ffff);
    }

    50% {
        filter: drop-shadow(0 0 25px #00ffff);
    }

    100% {
        stroke-dashoffset: 30;
        filter: drop-shadow(0 0 10px #00ffff);
    }
}

/* ============================================
   5. ALT ÇIKTILAR - REVEAL EFFECT
   ============================================ */

.output-item {
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.output-item::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent, rgba(0, 255, 255, 0.1));
    opacity: 0;
    border-radius: inherit;
    transition: opacity 0.4s ease;
}

.output-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(0, 212, 255, 0.25);
}

.output-item:hover::after {
    opacity: 1;
}

/* ============================================
   6. PERFORMANS OPTİMİZASYONU
   ============================================ */

.neon-flow-path,
.engine-component,
.engine-core,
.output-item {
    will-change: transform, opacity, filter;
}

/* GPU ivmesi */
.value-engine-section svg {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
    overflow: visible !important;
}

.components-to-motor-connector,
.value-engine-diagram,
.cascade-animation-container {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100% !important;
}

.cascade-animation-container {
    position: relative;
    height: 120px;
    overflow: visible;
}

.neon-flow-path {
    stroke-width: 3;
    filter: drop-shadow(0 0 5px rgba(0, 212, 255, 0.5));
}

/* ============================================
   7. RESPONSİVE AYARLAR
   ============================================ */

@media (max-width: 1024px) {

    /* Tablet için animasyonu hızlandır */
    .neon-flow-path {
        animation-duration: 2.5s;
    }

    .neon-flow-path.input {
        animation-duration: 3s;
    }

    .neon-flow-path.output {
        animation-duration: 1.5s;
    }
}

@media (max-width: 768px) {

    /* Mobilde basitleştir */
    .neon-flow-path {
        animation-duration: 2s;
        stroke-width: 2;
    }

    .neon-flow-path.input {
        animation-duration: 2.5s;
    }

    .neon-flow-path.output {
        animation-duration: 1.5s;
    }

    /* Hover yerine active kullan */
    .engine-component:active {
        transform: scale(0.98);
    }

    /* Glow efektlerini azalt (performans) */
    .engine-core {
        animation: none;
    }

    /* Enerji halkasını gizle */
    .core-energy-ring {
        display: none;
    }

    /* Bağlantıları gizlemek için yorumu kaldır:
    .components-to-motor-connector,
    .value-engine-diagram > svg,
    .cascade-animation-container {
        display: none;
    }
    */
}

@media (max-width: 480px) {

    /* Küçük mobilde animasyonu tamamen basitleştir */
    .neon-flow-path {
        animation: none;
        stroke-dasharray: none;
        opacity: 0.5 !important;
    }
}

/* ============================================
   8. ANİMASYON VARYASYONLARİ (OPSİYONEL)
   ============================================ */

/* Yavaş Akan - Daha ağırbaşlı */
.neon-flow-path.slow-flow {
    animation-duration: 5s;
}

/* Hızlı Akan - Daha dinamik */
.neon-flow-path.fast-flow {
    animation-duration: 1.5s;
}

/* Ters Yön Akan */
@keyframes flow-reverse {
    0% {
        stroke-dashoffset: 30;
    }

    100% {
        stroke-dashoffset: 0;
    }
}

.neon-flow-path.reverse {
    animation-name: flow-reverse;
}

/* ============================================
   9. ACCESSIBILITY (ERİŞİLEBİLİRLİK)
   ============================================ */

/* Reduced motion tercih edenler için */
@media (prefers-reduced-motion: reduce) {

    .neon-flow-path,
    .engine-core,
    .engine-component,
    .output-item {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   10. ÖZEL HOVER STATES (JS İLE KONTROL EDİLİR)
   ============================================ */

/* JS tarafından .active class'ı eklendiğinde */
.neon-flow-path.active {
    stroke: #00ffff;
    stroke-width: 4;
    opacity: 1;
    filter: drop-shadow(0 0 20px #00ffff);
}

/* ============================================
   KULLANIM KILAVUZU
   ============================================

   📌 ANİMASYON HIZI AYARLAMA:
   - Satır 13: animation-duration değerini değiştir
   - Önerilen: 2s-5s arası (kurumsal)

   📌 ÇİZGİ DESENİ AYARLAMA:
   - Satır 11: stroke-dasharray değerlerini değiştir
   - İlk değer: çizgi uzunluğu
   - İkinci değer: boşluk

   📌 HOVER PARLAKLĞI:
   - Satır 163: drop-shadow miktarını ayarla
   - stroke-width değerini artır/azalt

   📌 RENK PALETİ:
   - #00d4ff → Normal durum (açık mavi)
   - #00ffff → Hover/Active (cyan)
   - RGB(0, 212, 255) → Glow efekti

   📌 MOBİLDE GİZLEME:
   - Satır 200-205: Yorum satırlarını kaldır

   📌 PERFORMANS:
   - will-change kullanımı optimize edildi
   - GPU ivmesi aktif
   - Reduced motion desteği var

   ============================================ */