/* growthcounter.css */

/* Growth Indicator Base Styles */
.growth-indicator {
    opacity: 0;
    transform: translateY(10px);
}

.growth-chart-container {
    opacity: 0;
    transform: translateY(10px);
}

/* Yazı animasyonu (İmleç Kaldırıldı) */
.growth-text {
    width: 0;
    display: inline-block;
    border-right: none;
    box-sizing: content-box;
    /* Animasyon süresi JS tarafından dinamik olarak ayarlanacaktır. */
}

/* Chart bar animations */
.chart-bar {
    transform: scaleY(0);
    /* Alt hizalamayı ve alttan büyümeyi sağlar */
    transform-origin: bottom;
    transition: transform 0.6s ease;
}

    /* Yüksekliklerin ve Gecikmelerin CSS ile Kontrolü (Soldan sağa artan 6 basamak) */
    .chart-bar:nth-child(1) {
        height: 1rem;
        transition-delay: 0.1s;
    }

    .chart-bar:nth-child(2) {
        height: 1.5rem;
        transition-delay: 0.2s;
    }

    .chart-bar:nth-child(3) {
        height: 2rem;
        transition-delay: 0.3s;
    }

    .chart-bar:nth-child(4) {
        height: 2.5rem;
        transition-delay: 0.4s;
    }

    .chart-bar:nth-child(5) {
        height: 3rem;
        transition-delay: 0.5s;
    }

    .chart-bar:nth-child(6) {
        height: 3.5rem;
        transition-delay: 0.6s;
    }


/* Animations */
@keyframes typing {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

/* SVG bounce animation */
.growth-indicator svg {
    animation: bounce 2s ease-in-out infinite;
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(-6px);
    }

    60% {
        transform: translateY(-3px);
    }
}

/* Show animations */
.show-element {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Responsive */
@media (max-width: 768px) {
    .growth-indicator svg {
        height: 2.5rem !important;
        width: 2.5rem !important;
    }

    .growth-text {
        font-size: 1rem !important;
    }

    .growth-chart {
        height: 4rem !important;
    }

    .chart-bar {
        width: 0.5rem !important;
    }

        /* Responsive yükseklik ayarları */
        .chart-bar:nth-child(1) {
            height: 0.5rem;
        }

        .chart-bar:nth-child(2) {
            height: 1rem;
        }

        .chart-bar:nth-child(3) {
            height: 1.5rem;
        }

        .chart-bar:nth-child(4) {
            height: 2rem;
        }

        .chart-bar:nth-child(5) {
            height: 2.5rem;
        }

        .chart-bar:nth-child(6) {
            height: 3rem;
        }
}