/* ----------------- NAVBAR,FOOTER BÖLÜMÜ İÇİN CSS KISMI ----------------- */
/* -webkit-backdrop-filter/clip bazı tarayıcılarda hata verme olasılığından dolayı eski tarz olarak da kullandım.
Hata verdiğinden dolayı backdrop-filterı da ekledim.
Bu kısım css'de hep flexbox yapısını kullandım ve diğer kısımlarda da kullanmaya devam edeceğim.
Daha responsive yapıda olabilmesi için pikselleri rem olarak ayarladım ki ileride sıkıntı olmasın çünkü şuan burada yaptıklarım yüksek ihtimalle
bu kodları değiştireceğim.

CLAUDE ILE GUNCELLENDI.
*/

header {
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.98) 0%, 
        rgba(250, 250, 255, 0.98) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
    padding: 1.5rem 3rem;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
    border-bottom: 1px solid rgba(102, 126, 234, 0.15);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: headerSlideDown 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes headerSlideDown {
    0% {
        transform: translateY(-100%) rotateX(-90deg);
        opacity: 0;
    }
    50% {
        transform: translateY(-50%) rotateX(-45deg);
    }
    100% {
        transform: translateY(0) rotateX(0);
        opacity: 1;
    }
}

header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 20% 50%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(118, 75, 162, 0.08) 0%, transparent 50%);
    animation: particleFloat 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes particleFloat {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.5;
    }
    33% {
        transform: translate(30px, -20px) scale(1.1);
        opacity: 0.8;
    }
    66% {
        transform: translate(-20px, 10px) scale(0.9);
        opacity: 0.6;
    }
}

header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, 
        #667eea 0%, 
        #764ba2 25%, 
        #f093fb 50%, 
        #764ba2 75%, 
        #667eea 100%);
    background-size: 200% 100%;
    animation: gradientShift 4s linear infinite;
    filter: blur(1px);
}

@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}


.logo {
    font-size: 2rem;
    font-weight: 900;
    background: linear-gradient(135deg, 
        #667eea 0%, 
        #764ba2 50%, 
        #f093fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    letter-spacing: -1px;
    cursor: pointer;
    position: relative;
    display: inline-block;
    animation: logoGradient 3s ease infinite, logoFloat 4s ease-in-out infinite;
    filter: drop-shadow(0 0 20px rgba(102, 126, 234, 0.4));
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    transform-style: preserve-3d;
}

@keyframes logoGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes logoFloat {
    0%, 100% { 
        transform: translateY(0) rotateY(0deg);
    }
    25% { 
        transform: translateY(-8px) rotateY(5deg);
    }
    75% { 
        transform: translateY(-8px) rotateY(-5deg);
    }
}

.logo::before {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: blur(15px);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.logo:hover {
    transform: scale(1.1) rotateY(10deg) rotateX(5deg);
    filter: 
        drop-shadow(0 0 30px rgba(102, 126, 234, 0.6))
        drop-shadow(0 0 60px rgba(118, 75, 162, 0.4));
    animation-play-state: paused;
}

.logo:hover::before {
    opacity: 1;
    animation: glowPulse 1.5s ease-in-out infinite;
}

@keyframes glowPulse {
    0%, 100% { 
        filter: blur(15px);
        opacity: 0.6;
    }
    50% { 
        filter: blur(25px);
        opacity: 1;
    }
}

.logo::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        #667eea 50%, 
        transparent 100%);
    transform: scaleX(0);
    transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 2px;
    filter: blur(2px);
}

.logo:hover::after {
    transform: scaleX(1);
    animation: underlineGlow 1.5s ease-in-out infinite;
}

@keyframes underlineGlow {
    0%, 100% { 
        box-shadow: 0 0 10px rgba(102, 126, 234, 0.5);
    }
    50% { 
        box-shadow: 0 0 20px rgba(102, 126, 234, 0.8);
    }
}


.nav-links {
    list-style: none;
    display: flex;
    gap: 2.5rem;
}

.nav-links li {
    position: relative;
}

.nav-links a {
    color: #2c3e50;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    position: relative;
    padding: 0.6rem 1.2rem;
    transition: all 0.3s ease;
    display: inline-block;
    border-radius: 8px;
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 3px;
    left: 50%;
    width: 0;
    height: 2px;
    background: linear-gradient(90deg, #667eea, #764ba2);
    transform: translateX(-50%);
    transition: width 0.3s ease;
    border-radius: 2px;
}

.nav-links a:hover {
    color: #667eea;
    background: rgba(102, 126, 234, 0.06);
}

.nav-links a:hover::after {
    width: 70%;
}

.nav-links a:active {
    transform: scale(0.98);
}

footer {
    background: linear-gradient(180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0.1) 100%);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 3rem 2rem;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
    margin-top: 5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 
        0 -8px 32px rgba(31, 38, 135, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(2px 2px at 20% 30%, rgba(102, 126, 234, 0.8), transparent),
        radial-gradient(2px 2px at 60% 70%, rgba(240, 147, 251, 0.8), transparent),
        radial-gradient(1px 1px at 50% 50%, rgba(118, 75, 162, 0.8), transparent),
        radial-gradient(1px 1px at 80% 10%, rgba(102, 126, 234, 0.8), transparent),
        radial-gradient(2px 2px at 90% 60%, rgba(240, 147, 251, 0.8), transparent),
        radial-gradient(1px 1px at 33% 80%, rgba(118, 75, 162, 0.8), transparent);
    background-size: 200% 200%;
    animation: starsMove 20s linear infinite;
    pointer-events: none;
}

@keyframes starsMove {
    0% { 
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.5;
    }
    50% { 
        background-position: 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%, 100% 100%;
        opacity: 1;
    }
    100% { 
        background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
        opacity: 0.5;
    }
}

footer::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    right: -50%;
    bottom: -50%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(102, 126, 234, 0.1) 45%,
        rgba(240, 147, 251, 0.1) 55%,
        transparent 70%);
    animation: auroraWave 15s ease-in-out infinite;
    pointer-events: none;
}

@keyframes auroraWave {
    0%, 100% {
        transform: rotate(0deg) scale(1);
        opacity: 0.3;
    }
    50% {
        transform: rotate(180deg) scale(1.2);
        opacity: 0.6;
    }
}

footer p {
    color: #2c3e50;
    font-weight: 700;
    margin-bottom: 1.5rem;
    font-size: 1.1rem;
    position: relative;
    z-index: 1;
    opacity: 0;
    animation: textFloat 1s ease-out 0.3s forwards;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

@keyframes textFloat {
    0% {
        opacity: 0;
        transform: translateY(30px) rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateX(0);
    }
}


.socials {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
    position: relative;
    z-index: 1;
    perspective: 1000px;
}

.socials a {
    color: #667eea;
    text-decoration: none;
    font-weight: 700;
    padding: 1rem 2rem;
    border: 2px solid transparent;
    border-radius: 16px;
    transition: all 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    font-size: 1rem;
    position: relative;
    overflow: hidden;
    opacity: 0;
    animation: cardReveal 0.8s ease-out forwards;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0.05) 100%);
    webkit-backdrop-filter: blur(10px);
    box-shadow: 
        0 8px 32px rgba(31, 38, 135, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transform-style: preserve-3d;
}

@keyframes cardReveal {
    0% {
        opacity: 0;
        transform: translateY(50px) rotateY(-90deg) scale(0.5);
    }
    70% {
        transform: translateY(-10px) rotateY(10deg) scale(1.05);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotateY(0) scale(1);
    }
}

.socials a:nth-child(1) { animation-delay: 0.4s; }
.socials a:nth-child(2) { animation-delay: 0.5s; }
.socials a:nth-child(3) { animation-delay: 0.6s; }
.socials a:nth-child(4) { animation-delay: 0.7s; }


.socials a::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg,
        #667eea 0%,
        #764ba2 25%,
        #f093fb 50%,
        #764ba2 75%,
        #667eea 100%);
    background-size: 300% 300%;
    border-radius: 16px;
    z-index: -1;
    opacity: 0;
    transition: opacity 0.5s ease;
    animation: gradientRotate 3s linear infinite;
}

@keyframes gradientRotate {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.socials a::after {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.3) 50%,
        transparent 70%);
    transform: rotate(45deg);
    transition: all 0.6s ease;
}

.socials a:hover {
    color: white;
    transform: translateY(-10px) rotateY(10deg) rotateX(5deg) scale(1.08);
    box-shadow: 
        0 20px 60px rgba(102, 126, 234, 0.5),
        0 0 0 8px rgba(102, 126, 234, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.4),
        0 0 40px rgba(240, 147, 251, 0.3);
    background: linear-gradient(135deg, 
        rgba(102, 126, 234, 0.8) 0%, 
        rgba(118, 75, 162, 0.8) 100%);
}

.socials a:hover::before {
    opacity: 1;
}

.socials a:hover::after {
    transform: rotate(45deg) translate(50%, 50%);
}

.socials a:active {
    transform: translateY(-5px) scale(0.95);
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    z-index: 1001;
    padding: 0.8rem;
    position: relative;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.1);
    webkit-backdrop-filter: blur(10px);
}

.hamburger:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
}

.hamburger span {
    width: 28px;
    height: 4px;
    background: linear-gradient(90deg, #667eea, #764ba2, #f093fb);
    background-size: 200% 100%;
    transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    border-radius: 4px;
    box-shadow: 
        0 0 10px rgba(102, 126, 234, 0.5),
        0 0 20px rgba(118, 75, 162, 0.3);
    position: relative;
    transform-origin: center;
    animation: lineGlow 2s ease-in-out infinite;
}

@keyframes lineGlow {
    0%, 100% {
        box-shadow: 
            0 0 10px rgba(102, 126, 234, 0.5),
            0 0 20px rgba(118, 75, 162, 0.3);
        background-position: 0% 50%;
    }
    50% {
        box-shadow: 
            0 0 20px rgba(102, 126, 234, 0.8),
            0 0 40px rgba(118, 75, 162, 0.6);
        background-position: 100% 50%;
    }
}

.hamburger span:nth-child(1) { animation-delay: 0s; }
.hamburger span:nth-child(2) { animation-delay: 0.2s; }
.hamburger span:nth-child(3) { animation-delay: 0.4s; }

.hamburger.toggle span:nth-child(1) { 
    transform: rotate(45deg) translate(9px, 9px) scale(1.1);
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 
        0 0 20px rgba(239, 68, 68, 0.8),
        0 0 40px rgba(220, 38, 38, 0.6);
}

.hamburger.toggle span:nth-child(2) { 
    opacity: 0;
    transform: translateX(30px) scale(0);
}

.hamburger.toggle span:nth-child(3) { 
    transform: rotate(-45deg) translate(9px, -9px) scale(1.1);
    background: linear-gradient(90deg, #ef4444, #dc2626);
    box-shadow: 
        0 0 20px rgba(239, 68, 68, 0.8),
        0 0 40px rgba(220, 38, 38, 0.6);
}

.hamburger.toggle {
    animation: hamburgerSpin 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    background: rgba(239, 68, 68, 0.1);
}

@keyframes hamburgerSpin {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.3) rotate(180deg); }
    100% { transform: scale(1) rotate(180deg); }
}


/* RESPONSİVE TASARIM */

@media (max-width: 768px) {
    header {
        padding: 1.2rem 1.5rem;
    }

    .hamburger {
        display: flex;
    }

    .nav-links {
        position: fixed; 
        top: 0;
        right: 0;
        height: 100vh; 
        width: 75%;    
        background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(250, 250, 255, 0.98) 100%);
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
        display: flex;
        flex-direction: column; 
        align-items: center;
        justify-content: center;
        gap: 3rem; 
        transform: translateX(100%); 
        transition: transform 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
        box-shadow: -10px 0 50px rgba(0, 0, 0, 0.15);
        z-index: 1000;
        border-left: 2px solid rgba(102, 126, 234, 0.3);
    }

    .nav-links::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: 
            radial-gradient(circle at 20% 80%, rgba(102, 126, 234, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 80% 20%, rgba(240, 147, 251, 0.15) 0%, transparent 50%),
            radial-gradient(circle at 40% 40%, rgba(118, 75, 162, 0.1) 0%, transparent 40%);
        animation: menuGradient 8s ease-in-out infinite;
        pointer-events: none;
    }

    @keyframes menuGradient {
        0%, 100% { opacity: 0.5; transform: scale(1) rotate(0deg); }
        50% { opacity: 1; transform: scale(1.1) rotate(10deg); }
    }

    .nav-links.active {
        transform: translateX(0);
        animation: menuSlideIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    }

    @keyframes menuSlideIn {
        0% {
            transform: translateX(100%) rotateY(90deg);
            opacity: 0;
        }
        60% {
            transform: translateX(-5%) rotateY(-5deg);
        }
        100% {
            transform: translateX(0) rotateY(0);
            opacity: 1;
        }
    }

    .nav-links.active li {
        animation: menuItemPop 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
        opacity: 0;
        transform: translateX(100px) rotateY(90deg) scale(0.5);
    }

    .nav-links.active li:nth-child(1) { animation-delay: 0.15s; }
    .nav-links.active li:nth-child(2) { animation-delay: 0.25s; }
    .nav-links.active li:nth-child(3) { animation-delay: 0.35s; }
    .nav-links.active li:nth-child(4) { animation-delay: 0.45s; }
    .nav-links.active li:nth-child(5) { animation-delay: 0.55s; }

    @keyframes menuItemPop {
        0% {
            opacity: 0;
            transform: translateX(100px) rotateY(90deg) scale(0.5);
        }
        70% {
            transform: translateX(-10px) rotateY(-10deg) scale(1.05);
        }
        100% {
            opacity: 1;
            transform: translateX(0) rotateY(0) scale(1);
        }
    }

    .socials {
        gap: 1.5rem;
    }

    .socials a {
        padding: 0.8rem 1.5rem;
        font-size: 0.9rem;
    }
}


body.dark-mode header {
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.98) 0%, 
        rgba(20, 28, 50, 0.98) 100%);
    border-bottom: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 
        0 4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode .nav-links a {
    color: #e2e8f0;
}

body.dark-mode footer {
    background: linear-gradient(180deg,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(20, 28, 50, 0.98) 100%);
    border-top: 1px solid rgba(102, 126, 234, 0.2);
    box-shadow: 
        0 -4px 20px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.dark-mode footer p {
    color: #e2e8f0;
}

body.dark-mode .socials a {
    color: #f4a261;
    background: linear-gradient(135deg, 
        rgba(15, 23, 42, 0.8) 0%, 
        rgba(30, 41, 59, 0.8) 100%);
}

body.dark-mode .nav-links {
    background: linear-gradient(135deg,
        rgba(15, 23, 42, 0.98) 0%,
        rgba(20, 28, 50, 0.98) 100%);
    border-left: 2px solid rgba(244, 162, 97, 0.3);
    box-shadow: -10px 0 50px rgba(0, 0, 0, 0.5);
}