/* text-effect.css - YAZMA VE SİLME EFEKTLİ */

/* Ana wrapper */
.typewriter-wrapper {
    display: inline-block;
    position: relative;
}

/* Yazıcı efekti için ana element */
.typewriter-text {
    color: #FFD700;
    font-size: inherit;
    display: inline-block;
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    border-right: 3px solid #FFD700;
    animation: blinkCursor 0.7s infinite;
}

/* İmleç yanıp sönme */
@keyframes blinkCursor {
    0%, 100% { border-color: #FFD700; }
    50% { border-color: transparent; }
}

/* YAZMA EFEKTİ */
.typewriter-text.typing {
    animation: typeWriter 3s steps(30, end) forwards;
}

@keyframes typeWriter {
    from { width: 0; }
    to { width: 100%; }
}

/* SİLME EFEKTİ - GELİŞTİRİLMİŞ */
.typewriter-text.erasing {
    animation: eraseWithEffect 2s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
    border-right-color: #FFD700;
}

@keyframes eraseWithEffect {
    0% { 
        width: 100%; 
        opacity: 1;
        transform: translateX(0);
    }
    20% { 
        width: 80%; 
        opacity: 0.9;
        transform: translateX(-5px);
        letter-spacing: 2px;
    }
    40% { 
        width: 60%; 
        opacity: 0.7;
        transform: translateX(5px);
        text-shadow: 0 0 10px #FFD700;
    }
    60% { 
        width: 40%; 
        opacity: 0.5;
        transform: translateX(-5px);
        letter-spacing: 5px;
    }
    80% { 
        width: 20%; 
        opacity: 0.3;
        transform: translateX(5px);
        text-shadow: 0 0 20px #FFD700;
    }
    100% { 
        width: 0; 
        opacity: 0;
        transform: translateX(0);
        letter-spacing: normal;
        text-shadow: none;
    }
}

/* Alternatif silme efekti - fadeOut */
.typewriter-text.erasing-fade {
    animation: fadeOutErase 1.5s ease-in forwards;
}

@keyframes fadeOutErase {
    0% {
        width: 100%;
        opacity: 1;
    }
    50% {
        width: 50%;
        opacity: 0.5;
        letter-spacing: 8px;
    }
    100% {
        width: 0;
        opacity: 0;
        letter-spacing: normal;
    }
}

/* Alternatif silme efekti - slideOut */
.typewriter-text.erasing-slide {
    animation: slideOutErase 1.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

@keyframes slideOutErase {
    0% {
        width: 100%;
        transform: translateX(0) rotate(0deg);
        opacity: 1;
    }
    30% {
        width: 70%;
        transform: translateX(-30px) rotate(-5deg);
        opacity: 0.8;
    }
    60% {
        width: 40%;
        transform: translateX(30px) rotate(5deg);
        opacity: 0.4;
    }
    100% {
        width: 0;
        transform: translateX(-100px) rotate(-10deg);
        opacity: 0;
    }
}

/* Alternatif silme efekti - zoomOut */
.typewriter-text.erasing-zoom {
    animation: zoomOutErase 1.6s ease-out forwards;
}

@keyframes zoomOutErase {
    0% {
        width: 100%;
        transform: scale(1);
        opacity: 1;
    }
    50% {
        width: 50%;
        transform: scale(0.5);
        opacity: 0.5;
    }
    100% {
        width: 0;
        transform: scale(0);
        opacity: 0;
    }
}