*{
margin:0;
padding:0;
box-sizing:border-box;
scroll-behavior: smooth;
}

body{
font-family:'Inter',sans-serif;
 
background-image:url("arka\ plan.jpeg");
 
background-size:cover;
 
background-position:center;
 
background-attachment:fixed;
 
color:white;
 
overflow-x:hidden;
}

@keyframes bgMove{
0%{background-position:0%}
100%{background-position:100%}
}



section{
padding:120px 8%;
}



.section-title{

font-size:38px;
text-align:center;

margin-bottom:80px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

-webkit-background-clip:text;

color:transparent;

}



/* NAVBAR */

.navbar{

position:fixed;

top:0;

width:100%;

padding:20px 8%;

display:flex;

justify-content:space-between;

align-items:center;

background:rgba(15,23,42,0.7);

backdrop-filter:blur(20px);

box-shadow:
0 0 10px rgba(99,102,241,0.4),
0 0 30px rgba(99,102,241,0.3),
0 0 60px rgba(139,92,246,0.2);

z-index:1000;

}



.logo{

font-size:28px;

font-weight:800;

color:white;

text-shadow:

0 0 5px #6366f1,

0 0 20px #6366f1,

0 0 40px #8b5cf6;

}



/* MENU */

.nav-menu{

display:flex;

gap:40px;

list-style:none;

font-size:22px;

}



.nav-menu a{

color:#cbd5f5;

text-decoration:none;

position:relative;

transition:.3s;

}



.nav-menu a::after{

content:"";

position:absolute;

left:0;

bottom:-6px;

width:0%;

height:2px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

transition:.4s;

}



.nav-menu a:hover{

color:white;

}



.nav-menu a:hover::after{

width:100%;

}

/* Hamburger */
.hamburger {
  display: none;
  font-size: 28px;
  cursor: pointer;
  color: white;
}

/* 📱 Tablet & Mobil */
@media (max-width: 768px) {

  .nav-menu {
    position: absolute;
    top: 80px;
    right: 0;
    width: 100%;
    background: rgba(15,23,42,0.95);

    flex-direction: column;
    align-items: center;
    gap: 25px;
    padding: 30px 0;

    display: none;
  }

  .nav-menu.active {
    display: flex;
  }

  .hamburger {
    display: block;
  }
}

.social{

display:flex;

gap:20px;

}



.social a{

color:white;

font-size:18px;

transition:.4s;

}



.social a:hover{

transform:translateY(-4px);

text-shadow:0 0 10px #6366f1;

}



/* ABOUT */

.about-section{

display:flex;

align-items:center;

justify-content:center;

gap:80px;

flex-wrap:wrap;

text-align:center;

}



.about-image img{

width:320px;

border-radius:20px;

transition:.6s;

box-shadow:0 0 20px rgba(99,102,241,0.5);

}



.about-image img:hover{

transform:scale(1.05);

box-shadow:0 0 40px rgba(139,92,246,0.9);

}



.about-content{

max-width:500px;

font-size:20px;

}



/* CARDS */

.card{

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

border:1px solid rgba(255,255,255,0.1);

border-radius:20px;

padding:40px;

transition:.5s;

}



.card:hover{

transform:translateY(-10px);

box-shadow:

0 0 20px #6366f1,

0 0 40px #6366f1,

0 0 80px #8b5cf6;

}



/* SKILLS */

.skills-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

gap:40px;

text-align:center;

}



/* PROJECTS */

.projects-grid{

display:grid;

grid-template-columns:repeat(auto-fit,minmax(300px,1fr));

gap:40px;

}



.project-card img{

width:100%;

height:200px;

object-fit:cover;

border-radius:20px;

transition:.5s;

}



.project-card:hover img{

transform:scale(1.1);

}



.project-info{

margin-top:20px;

}



/* EXPERIENCE */

.experience-grid{

display:grid;

grid-template-columns:1fr 1fr;

gap:40px;

}



/* CONTACT */

.contact-wrapper{

display:flex;

gap:60px;

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

border-radius:25px;

padding:60px;

box-shadow:

0 0 20px rgba(99,102,241,0.5),

0 0 40px rgba(139,92,246,0.3);

border:1px solid rgba(255,255,255,0.1);

}



.contact-left,
.contact-right{

flex:1;

}



.contact-right form{

display:flex;

flex-direction:column;

gap:20px;

}



.contact-right input,
.contact-right textarea{

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

border:1px solid rgba(255,255,255,0.1);

padding:15px;

border-radius:10px;

color:white;

}



.contact-right button{

background:linear-gradient(90deg,#6366f1,#8b5cf6);

border:none;

padding:15px;

border-radius:30px;

color:white;

cursor:pointer;

transition:.4s;

}



.contact-right button:hover{

transform:translateY(-3px);

box-shadow:

0 0 15px #6366f1,

0 0 30px #6366f1,

0 0 60px #8b5cf6;

}

/* ================= FLL SECTION ================= */

.fll-container{

display:flex;

gap:60px;

align-items:center;

flex-wrap:wrap;

justify-content:center;

}



.fll-text{

max-width:500px;

font-size:18px;

line-height:1.6;

}



.fll-image img{

width:400px;

border-radius:20px;

transition:.5s;

}



.fll-image img:hover{

transform:scale(1.05);

}



.fll-info{

margin-top:20px;

text-align:center;

}



/* responsive */

@media(max-width:900px){

.fll-container{

flex-direction:column;

}

.fll-image img{

width:100%;

}

}



/* SCROLL BAR */

.scroll-bar{

position:fixed;

top:0;

left:0;

height:4px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

width:0%;

z-index:9999;

}



/* RESPONSIVE */

@media(max-width:900px){

.about-section{
flex-direction:column;
}

.experience-grid{
grid-template-columns:1fr;
}

.contact-wrapper{
flex-direction:column;
}

}