/* Mobile-specific styles */
@media screen and (max-width: 768px) {
    /* Hero section mobile adjustments */
    .hero {
        min-height: 100vh;
        padding: 0;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    /* Hero image'i sadece hero description alanında göster */
    .hero-image-wrapper {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 1 !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        clip-path: inset(0 0 0 0); /* Hero description alanıyla sınırla */
    }

    .hero-image {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 1 !important;
        overflow: hidden !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
    }

    .hero-image picture {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        z-index: 1 !important;
    }

    .hero-image img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100vh !important;
        object-fit: cover !important;
        object-position: center center !important;
        z-index: 1 !important;
        transform: none !important;
        transition: none !important;
        animation: none !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
    }

    /* Hero description'ı tek sayfa boyutunda tut */
    .hero-description {
        position: relative !important;
        z-index: 10 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        width: 100%;
        text-align: center;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden; /* İçeriğin taşmasını engelle */
    }

    /* Social links'i description içinde tut */
    .hero-social-links {
        position: absolute !important;
        bottom: 0rem !important;
        left: 25% !important;
        transform: translateX(-50%) !important;
        z-index: 15 !important;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        padding: 1rem;
        background: transparent !important; /* Arka planı kaldır */
        border: none !important; /* Border'ı kaldır */
        border-radius: 0 !important; /* Border radius'u kaldır */
        backdrop-filter: none !important; /* Blur efektini kaldır */
        width: auto;
        margin: 0 auto;
    }

    .hero-social-link {
        width: 40px;
        height: 40px;
        transition: transform 0.2s ease;
        border-radius: 50%;
        background:transparent !important; /* Arka planı kaldır */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0; /* Elemanların küçülmesini engelle */
    }

    .hero-social-link:active {
        transform: scale(0.95);
    }

    .hero-social-link img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    /* Ana hero container'ı sınırla */
    .hero {
        position: relative !important;
        z-index: 5 !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        overflow: hidden !important;
    }
    
    /* JavaScript tarafından eklenen inline stilleri override et */
    .hero-image[style],
    .hero-image-wrapper[style],
    .hero-image picture[style],
    .hero-image img[style] {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        z-index: 1 !important;
        width: 100% !important;
        height: 100vh !important;
    }

    /* Particle'ları mobilde gizle */
    .particle {
        display: none !important;
    }

    /* Tüm transform animasyonlarını devre dışı bırak */
    .hero *,
    .hero-image *,
    .hero-image-wrapper * {
        transform: none !important;
        will-change: auto !important;
        animation: none !important;
        transition: none !important;
    }

    /* Hero logo, başlık ve butonlar için responsive ayarlar */
    .hero-logo {
        display: block;
        margin: 0 auto 1.5rem;
        width: 80%;
        max-width: 250px;
    }

    .hero-logo img {
        width: 100%;
        height: auto;
    }

    .hero-description h1 {
        font-size: 1.8rem;
        line-height: 1.3;
        margin-bottom: 1rem;
        padding: 0 1rem;
        color: rgb(72, 188, 222) !important; /* Glow rengi ile aynı */
        text-shadow: 0 0 8px rgb(72 188 222 / 50%) !important;
        font-weight: bold !important;
        z-index: 20 !important;
        position: relative !important;
    }

    /* Letter animation span'ları için özel stil */
    .hero-description h1 .letter-animation {
        display: inline-block;
        animation: letterPop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards !important;
        opacity: 0;
        transform: translateY(20px) scale(0.8);
        text-shadow: 0 0 4px rgb(72 188 222 / 30%) !important;
        color: rgb(72, 188, 222) !important; /* Glow rengi ile aynı */
    }

    .hero-description p {
        font-size: 1rem;
        line-height: 1.5;
        margin-bottom: 2rem;
        padding: 0 1rem;
        color: white !important; /* Beyaz renk */
        text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.7) !important;
        z-index: 20 !important;
        position: relative !important;
    }

    /* Tüm transform animasyonlarını devre dışı bırak - letter animation hariç */
    .hero *:not(.letter-animation),
    .hero-image *,
    .hero-image-wrapper * {
        transform: none !important;
        will-change: auto !important;
        animation: none !important;
        transition: none !important;
    }

    /* Letter animation için letterPop keyframe'i tanımla */
    @keyframes letterPop {
        0% {
            opacity: 0;
            transform: translateY(20px) scale(0.8);
        }
        50% {
            transform: translateY(-5px) scale(1.1);
        }
        100% {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }

    /* Hero description için daha güçlü kontrast */
    .hero-description {
        position: relative !important;
        z-index: 10 !important;
        background: rgba(0, 0, 0, 0.7) !important; /* Arka planı daha koyu yap */
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        min-height: 100vh !important;
        max-height: 100vh !important;
        width: 100%;
        text-align: center;
        padding: 2rem 1rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        overflow: hidden;
    }

    .hero-actions {
        flex-direction: column;
        gap: 1rem;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
        padding: 0 1rem;
        display: flex;
    }

    .hero-actions .button {
        width: 100%;
        padding: 0.8rem 1.5rem;
        font-size: 1rem;
        border-radius: 4px;
        min-height: 48px;
    }

    /* Hero bottom ve spacer'ı gizle */
    .hero-bottom {
        display: none;
    }

    .hero-spacer {
        height: 0;
    }

    /* Footer hero description'dan sonra başlar */
    .hero-footer-wrapper {
        position: relative;
        z-index: 4;
        background: var(--primary-bg);
    }

    /* Gereksiz CSS kurallarını kaldır */
    .hero-image-wrapper::before {
        display: none;
    }
}