/* project-detail.css */

@media (max-width: 768px) {
    .project-headers {
        padding: 60px 30px;
        text-align: center;
        min-height: auto !important;
    }

        .project-headers h1 {
            font-size: 1.8rem;
        }

    .project-meta {
        padding: 1.5rem;
    }

    .project-actions {
        flex-direction: column;
        align-items: center;
    }

        .project-actions a {
            width: 100%;
            text-align: center;
        }

    .project-headers img {
        max-width: 100%;
        height: auto;
    }



    .project-info {
        padding: 60px 30px;
        text-align: center;
        min-height: 60vh !important;
    }
    .project-overview {
        padding: 60px 30px;
        text-align: center;
        min-height: 60vh !important;
    }

    .project-gallery-section {
        padding: 60px 30px;
        text-align: center;
        min-height: 60vh !important;
    }

    .filter-buttons {
        flex-direction: row !important;
        gap: 0.5rem !important;
    }

    .filter-btn {
        font-size: 0.8rem !important;
    }
}


.project-headers {
    background: linear-gradient(135deg, #121212, #000000);
    min-height: 90vh;
    overflow-x: hidden;
    width: 100%;
}






.project-meta {
    background-color: transparent !important;
}


.project-meta li {
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

.project-meta .badge {
    background-color: #ff5c33;
    font-weight: 500;
    font-size: 0.9rem;
    padding: 0.4em 0.8em;
    border-radius: 0.5rem;
}

.project-actions .btn-accent {
    background-color: #ff5c33;
    color: #fff;
    transition: background 0.3s ease;
}

    .project-actions .btn-accent:hover {
        background-color: #e24a21;
        color: #fff;
    }


.mockup-container img{
    box-shadow: none !important;
}






.project-gallery-section .gallery-image {
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    box-shadow: 0 0 0 transparent;
}

    .project-gallery-section .gallery-image:hover {
        transform: scale(1.02);
    }



.hero-blob {
    position: absolute;
    width: 600px;
    height: 600px;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle at center, rgba(255,92,51,0.4), transparent 70%);
    filter: blur(120px);
    animation: blobMove 8s infinite alternate ease-in-out;
}

@keyframes blobMove {
    0% {
        transform: translate(-50%, -50%) scale(1);
    }

    100% {
        transform: translate(-45%, -55%) scale(1.1);
    }
}

.project-meta {
    background-color: #121212;
    border-radius: 1rem;
    padding: 2rem;
    margin: 3rem 0;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.05);
}

    .project-meta p {
        font-size: 0.95rem;
        color: #bbb;
        margin-bottom: 0.5rem;
    }

    .project-meta strong {
        color: #fff;
        display: block;
        font-weight: 600;
        margin-bottom: 0.25rem;
    }

.section-title {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 2rem;
    text-align: center;
    color: white;
}




/* project-link-section */

.project-link-section {
    position: relative;
    overflow: hidden;
}

.project-link-box {
    backdrop-filter: blur(15px);
    transition: transform 0.3s ease;
}

    .project-link-box:hover {
        transform: scale(1.01);
    }

.btn-accent {
    border: 1px solid #ff5c33;
    color: #ffffff;
    font-weight: 500;
    transition: background 0.3s ease;
}

    .btn-accent:hover {
        background-color: #e24a21;
        color: #fff;
    }




/* cta alanı */

.cta-final-section {
    background-color: #0b0b0b;
    position: relative;
    z-index: 1;
}

/* Arka hareketli blob */
.abstract-blob {
    background: radial-gradient(circle at 30% 30%, rgba(255, 92, 51, 0.3), transparent 60%), radial-gradient(circle at 70% 70%, rgba(255, 128, 64, 0.2), transparent 60%);
    filter: blur(120px);
    animation: blobMove2 22s infinite alternate ease-in-out;
    z-index: 0;
}

@keyframes blobMove2 {
    0% {
        transform: translate(0, 0);
    }

    50% {
        transform: translate(-80px, 60px);
    }

    100% {
        transform: translate(40px, -50px);
    }
}

/* Futuristic görsel hareketi */
.abstract-futuristic {
    animation: futuristicMove 30s infinite alternate ease-in-out;
    position: absolute;
    left: 50px; /* zaten solda tutuyorduk */
    top: -100px; /* burada oynarsın */
    width: 500px;
}

@keyframes futuristicMove {
    0% {
        transform: translate(0px, 0px);
    }

    50% {
        transform: translate(20px, -15px);
    }

    100% {
        transform: translate(-15px, 10px);
    }
}

.futuristic-img {
    max-width: 400px;
    filter: drop-shadow(0 0 80px rgba(255, 92, 51, 0.5));
}

.cta-final-link h2 {
    color: white;
    transition: transform 0.3s ease, color 0.3s ease;
}

.cta-final-link:hover h2 {
    transform: scale(1.07);
    color: #FF5C33;
}


@media (max-width: 768px) {

    .cta-final-section {
        min-height: 20vh !important;
    }

    .abstract-futuristic {
        top: -10px; /* burada oynarsın */
        z-index: -1;
    }
}