/* Hareketli şehir yazısı için stiller */
.tp-hero-2-title {
    position: relative;
}

.static-text {
    display: inline;
}

/* Dynamic text sadece mobilde görünsün */
.dynamic-text {
    display: none; /* Varsayılan olarak gizli */
    color: #ffca00;
    font-weight: bold;
    font-size: 0.6em; /* Reklam Ajansı yazısından daha küçük */
    line-height: 1;
    margin-top: -60px; /* Üst yazıya çok daha yaklaştır */
    text-align: center;
    position: relative;
    z-index: 2;
    text-shadow: 0 0 10px rgba(255, 202, 0, 0.5);
    transform: perspective(1000px);
    backface-visibility: hidden;
    will-change: transform, opacity, filter;
}

/* Mobil ekranlarda dynamic text'i göster */
@media (max-width: 767px) {
    .dynamic-text {
        display: block;
    }
}

.dynamic-text.typing {
    animation: typing 2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dynamic-text.deleting {
    animation: deleting 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dynamic-text.glitch {
    animation: glitch 2.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dynamic-text.neon {
    animation: neon 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dynamic-text.matrix {
    animation: matrix 2.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.dynamic-text.hologram {
    animation: hologram 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes typing {
    0% {
        opacity: 0;
        transform: translateY(100px) scale(0.1) rotateX(90deg);
        filter: blur(20px) hue-rotate(0deg) brightness(0);
        text-shadow: 0 0 50px #ffca00;
    }
    15% {
        opacity: 0.2;
        transform: translateY(70px) scale(0.3) rotateX(60deg);
        filter: blur(15px) hue-rotate(60deg) brightness(0.2);
        text-shadow: 0 0 40px #ffca00, 0 0 80px #ffca00;
    }
    30% {
        opacity: 0.4;
        transform: translateY(40px) scale(0.6) rotateX(30deg);
        filter: blur(10px) hue-rotate(120deg) brightness(0.4);
        text-shadow: 0 0 30px #ffca00, 0 0 60px #ffca00;
    }
    50% {
        opacity: 0.7;
        transform: translateY(10px) scale(1.1) rotateX(10deg);
        filter: blur(5px) hue-rotate(180deg) brightness(0.7);
        text-shadow: 0 0 20px #ffca00, 0 0 40px #ffca00;
    }
    70% {
        opacity: 0.9;
        transform: translateY(-5px) scale(1.05) rotateX(2deg);
        filter: blur(2px) hue-rotate(240deg) brightness(0.9);
        text-shadow: 0 0 10px #ffca00, 0 0 20px #ffca00;
    }
    85% {
        opacity: 0.95;
        transform: translateY(2px) scale(0.98) rotateX(0deg);
        filter: blur(1px) hue-rotate(300deg) brightness(0.95);
        text-shadow: 0 0 5px #ffca00;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateX(0deg);
        filter: blur(0px) hue-rotate(360deg) brightness(1);
        text-shadow: none;
    }
}

@keyframes deleting {
    0% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg) skewX(0deg);
        filter: blur(0px) brightness(1) contrast(1);
        text-shadow: 0 0 10px #ffca00;
    }
    20% {
        opacity: 0.9;
        transform: translateY(-10px) scale(1.2) rotate(-5deg) skewX(-5deg);
        filter: blur(2px) brightness(1.3) contrast(1.2);
        text-shadow: 0 0 15px #ffca00, 0 0 30px #ffca00;
    }
    40% {
        opacity: 0.7;
        transform: translateY(-25px) scale(0.9) rotate(-15deg) skewX(-10deg);
        filter: blur(4px) brightness(1.6) contrast(1.5);
        text-shadow: 0 0 20px #ffca00, 0 0 40px #ffca00;
    }
    60% {
        opacity: 0.4;
        transform: translateY(-45px) scale(0.6) rotate(-25deg) skewX(-15deg);
        filter: blur(8px) brightness(2) contrast(2);
        text-shadow: 0 0 25px #ffca00, 0 0 50px #ffca00;
    }
    80% {
        opacity: 0.2;
        transform: translateY(-70px) scale(0.3) rotate(-35deg) skewX(-20deg);
        filter: blur(12px) brightness(2.5) contrast(2.5);
        text-shadow: 0 0 30px #ffca00, 0 0 60px #ffca00;
    }
    100% {
        opacity: 0;
        transform: translateY(-100px) scale(0.1) rotate(-45deg) skewX(-25deg);
        filter: blur(20px) brightness(3) contrast(3);
        text-shadow: 0 0 40px #ffca00, 0 0 80px #ffca00;
    }
}

@keyframes glitch {
    0% {
        opacity: 0;
        transform: translateX(-50px) skewX(-25deg) scale(0.5);
        filter: hue-rotate(0deg) contrast(0) brightness(0);
        text-shadow: 
            5px 0 #ff0000,
            -5px 0 #00ff00,
            0 5px #0000ff,
            5px 5px #ffff00;
    }
    8% {
        opacity: 0.2;
        transform: translateX(40px) skewX(20deg) scale(0.7);
        filter: hue-rotate(45deg) contrast(0.3) brightness(0.2);
        text-shadow: 
            -4px 0 #ff0000,
            4px 0 #00ff00,
            0 -4px #0000ff,
            -4px -4px #ffff00;
    }
    16% {
        opacity: 0.4;
        transform: translateX(-30px) skewX(-15deg) scale(0.8);
        filter: hue-rotate(90deg) contrast(0.5) brightness(0.4);
        text-shadow: 
            3px 0 #ff0000,
            -3px 0 #00ff00,
            0 3px #0000ff,
            3px 3px #ffff00;
    }
    24% {
        opacity: 0.6;
        transform: translateX(25px) skewX(12deg) scale(0.9);
        filter: hue-rotate(135deg) contrast(0.7) brightness(0.6);
        text-shadow: 
            -2px 0 #ff0000,
            2px 0 #00ff00,
            0 -2px #0000ff,
            -2px -2px #ffff00;
    }
    32% {
        opacity: 0.8;
        transform: translateX(-15px) skewX(-8deg) scale(1.05);
        filter: hue-rotate(180deg) contrast(0.8) brightness(0.8);
        text-shadow: 
            1px 0 #ff0000,
            -1px 0 #00ff00,
            0 1px #0000ff,
            1px 1px #ffff00;
    }
    40% {
        opacity: 0.9;
        transform: translateX(10px) skewX(5deg) scale(1.02);
        filter: hue-rotate(225deg) contrast(0.9) brightness(0.9);
        text-shadow: 
            -0.5px 0 #ff0000,
            0.5px 0 #00ff00,
            0 -0.5px #0000ff,
            -0.5px -0.5px #ffff00;
    }
    50% {
        opacity: 1;
        transform: translateX(0) skewX(0deg) scale(1);
        filter: hue-rotate(270deg) contrast(1) brightness(1);
        text-shadow: none;
    }
    60% {
        opacity: 0.95;
        transform: translateX(2px) skewX(1deg) scale(0.98);
        filter: hue-rotate(315deg) contrast(1.1) brightness(0.95);
        text-shadow: 
            0.2px 0 #ff0000,
            -0.2px 0 #00ff00,
            0 0.2px #0000ff;
    }
    70% {
        opacity: 1;
        transform: translateX(-1px) skewX(-0.5deg) scale(1.01);
        filter: hue-rotate(360deg) contrast(1) brightness(1);
        text-shadow: none;
    }
    100% {
        opacity: 1;
        transform: translateX(0) skewX(0deg) scale(1);
        filter: hue-rotate(0deg) contrast(1) brightness(1);
        text-shadow: none;
    }
}

@keyframes neon {
    0% {
        opacity: 0;
        transform: scale(0.05) rotate(360deg) translateZ(-100px);
        filter: brightness(0) drop-shadow(0 0 2px #ffca00) hue-rotate(0deg);
        text-shadow: 
            0 0 2px #ffca00,
            0 0 4px #ffca00,
            0 0 6px #ffca00,
            0 0 8px #ffca00;
    }
    12% {
        opacity: 0.1;
        transform: scale(0.2) rotate(270deg) translateZ(-75px);
        filter: brightness(0.2) drop-shadow(0 0 4px #ffca00) hue-rotate(45deg);
        text-shadow: 
            0 0 4px #ffca00,
            0 0 8px #ffca00,
            0 0 12px #ffca00,
            0 0 16px #ffca00;
    }
    25% {
        opacity: 0.3;
        transform: scale(0.4) rotate(180deg) translateZ(-50px);
        filter: brightness(0.4) drop-shadow(0 0 8px #ffca00) hue-rotate(90deg);
        text-shadow: 
            0 0 6px #ffca00,
            0 0 12px #ffca00,
            0 0 18px #ffca00,
            0 0 24px #ffca00;
    }
    38% {
        opacity: 0.5;
        transform: scale(0.7) rotate(90deg) translateZ(-25px);
        filter: brightness(0.6) drop-shadow(0 0 12px #ffca00) hue-rotate(135deg);
        text-shadow: 
            0 0 8px #ffca00,
            0 0 16px #ffca00,
            0 0 24px #ffca00,
            0 0 32px #ffca00;
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1) rotate(0deg) translateZ(0px);
        filter: brightness(0.8) drop-shadow(0 0 16px #ffca00) hue-rotate(180deg);
        text-shadow: 
            0 0 10px #ffca00,
            0 0 20px #ffca00,
            0 0 30px #ffca00,
            0 0 40px #ffca00;
    }
    62% {
        opacity: 0.85;
        transform: scale(1.2) rotate(-45deg) translateZ(25px);
        filter: brightness(1) drop-shadow(0 0 20px #ffca00) hue-rotate(225deg);
        text-shadow: 
            0 0 12px #ffca00,
            0 0 24px #ffca00,
            0 0 36px #ffca00,
            0 0 48px #ffca00;
    }
    75% {
        opacity: 0.95;
        transform: scale(1.05) rotate(-90deg) translateZ(50px);
        filter: brightness(1.1) drop-shadow(0 0 18px #ffca00) hue-rotate(270deg);
        text-shadow: 
            0 0 10px #ffca00,
            0 0 20px #ffca00,
            0 0 30px #ffca00,
            0 0 40px #ffca00;
    }
    88% {
        opacity: 0.98;
        transform: scale(0.98) rotate(-45deg) translateZ(25px);
        filter: brightness(1.05) drop-shadow(0 0 14px #ffca00) hue-rotate(315deg);
        text-shadow: 
            0 0 8px #ffca00,
            0 0 16px #ffca00,
            0 0 24px #ffca00,
            0 0 32px #ffca00;
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0deg) translateZ(0px);
        filter: brightness(1) drop-shadow(0 0 10px #ffca00) hue-rotate(360deg);
        text-shadow: 
            0 0 6px #ffca00,
            0 0 12px #ffca00,
            0 0 18px #ffca00,
            0 0 24px #ffca00;
    }
}

@keyframes matrix {
    0% {
        opacity: 0;
        transform: translateY(80px) scale(0.2) rotateZ(180deg);
        filter: hue-rotate(0deg) saturate(0) brightness(0) contrast(0);
        text-shadow: 
            0 0 15px #00ff00,
            0 0 30px #00ff00,
            0 0 45px #00ff00,
            0 0 60px #00ff00;
    }
    15% {
        opacity: 0.15;
        transform: translateY(60px) scale(0.4) rotateZ(135deg);
        filter: hue-rotate(36deg) saturate(0.2) brightness(0.2) contrast(0.2);
        text-shadow: 
            0 0 12px #00ff00,
            0 0 24px #00ff00,
            0 0 36px #00ff00,
            0 0 48px #00ff00;
    }
    30% {
        opacity: 0.3;
        transform: translateY(40px) scale(0.6) rotateZ(90deg);
        filter: hue-rotate(72deg) saturate(0.4) brightness(0.4) contrast(0.4);
        text-shadow: 
            0 0 9px #00ff00,
            0 0 18px #00ff00,
            0 0 27px #00ff00,
            0 0 36px #00ff00;
    }
    45% {
        opacity: 0.5;
        transform: translateY(20px) scale(0.8) rotateZ(45deg);
        filter: hue-rotate(108deg) saturate(0.6) brightness(0.6) contrast(0.6);
        text-shadow: 
            0 0 6px #00ff00,
            0 0 12px #00ff00,
            0 0 18px #00ff00,
            0 0 24px #00ff00;
    }
    60% {
        opacity: 0.7;
        transform: translateY(0px) scale(1.1) rotateZ(0deg);
        filter: hue-rotate(144deg) saturate(0.8) brightness(0.8) contrast(0.8);
        text-shadow: 
            0 0 3px #00ff00,
            0 0 6px #00ff00,
            0 0 9px #00ff00,
            0 0 12px #00ff00;
    }
    75% {
        opacity: 0.85;
        transform: translateY(-10px) scale(1.05) rotateZ(-22deg);
        filter: hue-rotate(180deg) saturate(0.9) brightness(0.9) contrast(0.9);
        text-shadow: 
            0 0 2px #00ff00,
            0 0 4px #00ff00,
            0 0 6px #00ff00;
    }
    90% {
        opacity: 0.95;
        transform: translateY(-5px) scale(0.98) rotateZ(-11deg);
        filter: hue-rotate(216deg) saturate(0.95) brightness(0.95) contrast(0.95);
        text-shadow: 
            0 0 1px #00ff00,
            0 0 2px #00ff00,
            0 0 3px #00ff00;
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotateZ(0deg);
        filter: hue-rotate(360deg) saturate(1) brightness(1) contrast(1);
        text-shadow: none;
    }
}

@keyframes hologram {
    0% {
        opacity: 0;
        transform: translateZ(-200px) scale(0.05) rotateY(180deg);
        filter: hue-rotate(0deg) saturate(0) brightness(0) contrast(0) blur(30px);
        text-shadow: 
            0 0 30px rgba(255, 202, 0, 0.9),
            0 0 60px rgba(255, 202, 0, 0.7),
            0 0 90px rgba(255, 202, 0, 0.5),
            0 0 120px rgba(255, 202, 0, 0.3);
    }
    12% {
        opacity: 0.1;
        transform: translateZ(-150px) scale(0.15) rotateY(135deg);
        filter: hue-rotate(30deg) saturate(0.2) brightness(0.2) contrast(0.2) blur(25px);
        text-shadow: 
            0 0 25px rgba(255, 202, 0, 0.9),
            0 0 50px rgba(255, 202, 0, 0.7),
            0 0 75px rgba(255, 202, 0, 0.5),
            0 0 100px rgba(255, 202, 0, 0.3);
    }
    25% {
        opacity: 0.25;
        transform: translateZ(-100px) scale(0.3) rotateY(90deg);
        filter: hue-rotate(60deg) saturate(0.4) brightness(0.4) contrast(0.4) blur(20px);
        text-shadow: 
            0 0 20px rgba(255, 202, 0, 0.9),
            0 0 40px rgba(255, 202, 0, 0.7),
            0 0 60px rgba(255, 202, 0, 0.5),
            0 0 80px rgba(255, 202, 0, 0.3);
    }
    38% {
        opacity: 0.4;
        transform: translateZ(-50px) scale(0.5) rotateY(45deg);
        filter: hue-rotate(90deg) saturate(0.6) brightness(0.6) contrast(0.6) blur(15px);
        text-shadow: 
            0 0 15px rgba(255, 202, 0, 0.9),
            0 0 30px rgba(255, 202, 0, 0.7),
            0 0 45px rgba(255, 202, 0, 0.5),
            0 0 60px rgba(255, 202, 0, 0.3);
    }
    50% {
        opacity: 0.6;
        transform: translateZ(0px) scale(0.8) rotateY(0deg);
        filter: hue-rotate(120deg) saturate(0.8) brightness(0.8) contrast(0.8) blur(10px);
        text-shadow: 
            0 0 10px rgba(255, 202, 0, 0.9),
            0 0 20px rgba(255, 202, 0, 0.7),
            0 0 30px rgba(255, 202, 0, 0.5),
            0 0 40px rgba(255, 202, 0, 0.3);
    }
    62% {
        opacity: 0.75;
        transform: translateZ(50px) scale(1.05) rotateY(-22deg);
        filter: hue-rotate(150deg) saturate(0.9) brightness(0.9) contrast(0.9) blur(5px);
        text-shadow: 
            0 0 8px rgba(255, 202, 0, 0.9),
            0 0 16px rgba(255, 202, 0, 0.7),
            0 0 24px rgba(255, 202, 0, 0.5),
            0 0 32px rgba(255, 202, 0, 0.3);
    }
    75% {
        opacity: 0.85;
        transform: translateZ(100px) scale(1.15) rotateY(-45deg);
        filter: hue-rotate(180deg) saturate(0.95) brightness(0.95) contrast(0.95) blur(2px);
        text-shadow: 
            0 0 6px rgba(255, 202, 0, 0.9),
            0 0 12px rgba(255, 202, 0, 0.7),
            0 0 18px rgba(255, 202, 0, 0.5),
            0 0 24px rgba(255, 202, 0, 0.3);
    }
    88% {
        opacity: 0.95;
        transform: translateZ(150px) scale(1.08) rotateY(-67deg);
        filter: hue-rotate(210deg) saturate(0.98) brightness(0.98) contrast(0.98) blur(1px);
        text-shadow: 
            0 0 4px rgba(255, 202, 0, 0.9),
            0 0 8px rgba(255, 202, 0, 0.7),
            0 0 12px rgba(255, 202, 0, 0.5),
            0 0 16px rgba(255, 202, 0, 0.3);
    }
    100% {
        opacity: 1;
        transform: translateZ(0px) scale(1) rotateY(0deg);
        filter: hue-rotate(360deg) saturate(1) brightness(1) contrast(1) blur(0px);
        text-shadow: 
            0 0 2px rgba(255, 202, 0, 0.9),
            0 0 4px rgba(255, 202, 0, 0.7),
            0 0 6px rgba(255, 202, 0, 0.5),
            0 0 8px rgba(255, 202, 0, 0.3);
    }
}