* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif;
}

body {

    background:
    radial-gradient(circle at top right, rgba(212,175,55,0.15), transparent 35%),
    radial-gradient(circle at bottom left, rgba(255,255,255,0.05), transparent 30%),
    #080808;

    color:white;

}

/* NAVBAR */

.navbar {

width:90%;

margin:20px auto;

padding:18px 30px;

display:flex;

justify-content:space-between;

align-items:center;

position:relative;

z-index:999;

}

.logo img {

    width:100px;

    height:100px;

    object-fit:cover;

    border-radius:50%;

    display:block;

    border:2px solid #d4af37;

    filter:drop-shadow(0 0 15px rgba(212,175,55,.5));

}


.navbar ul {
    display: flex;
    gap: 30px;
    list-style: none;
}


.navbar a {

    color:#ddd;

    text-decoration:none;

    position:relative;

    font-weight:500;

    transition:.3s;

}


.navbar a:hover {
    color: #d4af37;
}



/* HERO */

.hero {

    min-height:80vh;

    display:flex;

    align-items:center;

    justify-content:space-between;

    width:90%;

    margin:auto;

    gap:50px;

}

.hero-text {
    max-width: 650px;
}


.hero h1 {

    font-size:70px;

    line-height:1.1;

    font-weight:800;

    letter-spacing:-2px;

}

.hero span {
    color: #d4af37;
}


.hero p {
    margin-top: 20px;
    font-size: 20px;
    color: #ccc;
}


button {

    margin-top:30px;

    padding:16px 40px;

    background:linear-gradient(45deg,#d4af37,#f5d76e);

    border:none;

    color:#111;

    font-weight:700;

    border-radius:50px;

    cursor:pointer;

    transition:.3s;

}


button:hover {
    transform: scale(1.05);
}



/* ABOUT */

.about {

    width: 70%;
    margin: 80px auto;

    text-align: center;
}


.about h2 {

    color:#d4af37;
    font-size:40px;

}


.about p {

    margin-top:20px;
    color:#ccc;
    font-size:18px;

}
/* SERVICES */

.services {

    width:90%;
    margin:100px auto;

    text-align:center;

}


.services h2 {

    color:#d4af37;
    font-size:40px;

}



.service-container {

    display:flex;
    justify-content:center;
    gap:30px;

    margin-top:50px;

}



.card {

    background:rgba(255,255,255,0.05);

    backdrop-filter:blur(10px);

}



.card:hover {

    transform:translateY(-10px);

    border-color:#d4af37;

}



.card h3 {

    color:#d4af37;

    margin-bottom:15px;

}



.card p {

    color:#ccc;

    line-height:1.6;

}
/* PROJECTS */


.projects {

    width:90%;
    margin:100px auto;

    text-align:center;

}


.projects h2 {

    color:#d4af37;
    font-size:40px;

}



.project-container {

    display:flex;
    justify-content:center;

    margin-top:50px;

}



.project-card {


    transition:.4s ease;


}



.project-card:hover {


    transform:translateY(-12px);


    box-shadow:

    0 20px 60px rgba(212,175,55,.25);


}



.project-card img {


    transition:.5s;


}



.project-card:hover img {


    transform:scale(1.08);


}



.project-card:hover {

    transform:translateY(-10px);

    border-color:#d4af37;

}



.project-card img {

    width:100%;

    height:220px;

    object-fit:cover;

}



.project-info {

    padding:25px;

}



.project-info h3 {

    color:#d4af37;

    margin-bottom:15px;

}



.project-info p {

    color:#ccc;

    line-height:1.5;

}



.project-info a {

    display:inline-block;

    margin-top:20px;

    padding:10px 25px;

    background:#d4af37;

    color:black;

    text-decoration:none;

    border-radius:25px;

    font-weight:bold;

}
/* CONTACT */

.contact {

    width:90%;
    margin:100px auto;

    text-align:center;

}


.contact h2 {

    color:#d4af37;
    font-size:40px;

}


.contact p {

    color:#ccc;
    margin:20px 0;

}


.contact-links {

    display:flex;
    justify-content:center;
    gap:20px;

}


.contact-links a {

    padding:12px 30px;

    background:#d4af37;

    color:black;

    text-decoration:none;

    border-radius:30px;

    font-weight:bold;

    transition:.3s;

}


.contact-links a:hover {

    transform:scale(1.05);

}
.hero::before {

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    background:#d4af37;

    filter:blur(180px);

    opacity:0.25;

    right:-150px;
    top:100px;

}
/* HERO BOX */


.hero {

    justify-content:space-between;

}



.hero-box {

    width:350px;

    height:350px;

    display:flex;

    align-items:center;

    justify-content:center;

}



.circle {


    width:280px;

    height:280px;


    border-radius:50%;


    background:

    linear-gradient(145deg,#d4af37,#111);


    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


    box-shadow:

    0 0 80px rgba(212,175,55,0.35);


    animation:float 4s infinite ease-in-out;

}



.circle h2 {

    font-size:35px;

    color:#111;

    margin:0;

}


.circle p {

    color:#111;

    font-size:18px;

    font-weight:bold;

}



.circle p {

    color:#111;

    font-size:22px;

    font-weight:bold;

}



@keyframes float {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-15px);

    }


    100% {

        transform:translateY(0);

    }

}
.code-icon {

    width:80px;

    height:80px;

    background:#111;

    border-radius:20px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin-bottom:20px;

    box-shadow:0 0 30px rgba(0,0,0,0.5);

}


.code-icon span {

    color:#d4af37;

    font-size:40px;

    font-weight:bold;

    font-family:monospace;

}
.code-lines {

    display:flex;

    gap:10px;

    margin-bottom:15px;

}


.code-lines span {

    background:#111;

    color:#d4af37;

    padding:5px 10px;

    border-radius:10px;

    font-size:12px;

    font-family:monospace;

    animation:codeMove 3s infinite;

}


.code-lines span:nth-child(2){

    animation-delay:.5s;

}


.code-lines span:nth-child(3){

    animation-delay:1s;

}



@keyframes codeMove {


    0% {

        transform:translateY(0);

        opacity:.5;

    }


    50% {

        transform:translateY(-8px);

        opacity:1;

    }


    100% {

        transform:translateY(0);

        opacity:.5;

    }

}
.navbar a::after {


    content:"";


    position:absolute;


    width:0;


    height:2px;


    background:#d4af37;


    left:0;


    bottom:-8px;


    transition:.3s;


}



.navbar a:hover {


    color:#d4af37;


}



.navbar a:hover::after {


    width:100%;


}
/* SCROLL ANIMATIONS */


.about,
.services,
.projects,
.contact {

    opacity:1;

    transform:translateY(0);

    transition:all .8s ease;

}


.show {

    opacity:1;

    transform:translateY(0);

}
/* SERVICE CARD EFFECT */


.card {

    position:relative;

    overflow:hidden;

    transition:.4s ease;

    border:1px solid rgba(212,175,55,.1);

}



.card:hover {


    transform:translateY(-15px) scale(1.03);


    border-color:#d4af37;


    box-shadow:

    0 20px 50px rgba(212,175,55,.25);


}



/* ALTIN IŞIK EFEKTİ */


.card::before {


    content:"";


    position:absolute;


    width:120px;

    height:120px;


    background:#d4af37;


    filter:blur(80px);


    opacity:0;


    transition:.4s;


    top:-40px;

    right:-40px;


}



.card:hover::before {


    opacity:.5;


}
/* MOBIL TASARIM */

@media(max-width:768px){


    .navbar {

        width:90%;

        padding:15px 20px;

    }



    .logo img {

        width:60px;

        height:60px;

    }



    .navbar ul {

        gap:15px;

        font-size:14px;

    }



    .hero {


        flex-direction:column;


        text-align:center;


        min-height:auto;


        padding:80px 0;


    }



    .hero-text {


        max-width:100%;


    }



    .hero h1 {


        font-size:42px;


    }



    .hero p {


        font-size:16px;


    }



    .hero-box {


        margin-top:50px;


        width:280px;


        height:280px;


    }



    .circle {


        width:230px;


        height:230px;


    }



    .circle h2 {


        font-size:28px;


    }




    .service-container {


        flex-direction:column;


        gap:25px;


    }




    .card {


        width:100%;


    }




    .project-container {


        width:100%;


    }




    .project-card img {


        width:100%;


    }




    .contact-links {


        flex-direction:column;


        align-items:center;


    }



    .contact-links a {


        width:80%;


        text-align:center;


    }



}
.menu-btn {

    display:none;

    font-size:30px;

    color:#d4af37;

    cursor:pointer;

}



@media(max-width:768px){


    .menu-btn {

        display:block;

    }



    .navbar ul {


        position:absolute;


        top:90px;

        left:5%;


        width:90%;


        background:#111;


        border-radius:20px;


        flex-direction:column;


        align-items:center;


        padding:25px;


        display:none;


        border:1px solid rgba(212,175,55,.3);


    }



    .navbar ul.active {


        display:flex;


    }



}
section {
    scroll-margin-top:120px;
}
/* HERO TAG */

.hero-tag {

    display:inline-block;

    padding:10px 20px;

    margin-bottom:25px;


    border-radius:30px;


    background:rgba(212,175,55,.1);


    border:1px solid rgba(212,175,55,.4);


    color:#d4af37;


    font-size:13px;


    letter-spacing:2px;


    font-weight:600;


    animation:tagMove 3s infinite ease-in-out;

}



@keyframes tagMove {


    0% {

        transform:translateY(0);

    }


    50% {

        transform:translateY(-5px);

    }


    100% {

        transform:translateY(0);

    }

}
/* PROJECT TAGS */


.project-tags {

    display:flex;

    gap:10px;

    flex-wrap:wrap;

    margin:20px 0;

}



.project-tags span {


    background:rgba(212,175,55,.15);


    color:#d4af37;


    border:1px solid rgba(212,175,55,.4);


    padding:6px 12px;


    border-radius:20px;


    font-size:12px;


    font-weight:600;


}
.copyright {

    text-align:center;

    width:100%;

    display:block;

    color:#777;

    font-size:14px;

    margin-top:25px;

}