body {

  font-family: 'Poppins', sans-serif;

  margin: 0;

  padding: 0;

  background-color: #f3f3f3;

  height: 100vh;

}





@media screen and (max-width: 768px) {

  .container {

      flex-direction: column; 

  }

}

.container {

  display: flex;

  width: 100%;

  flex-direction: row; 

  min-height: 100vh; 

}



.sidebar {

  width: 100px;

  background-color: #d6aa50;

  display: flex;

  flex-direction: column;

  justify-content: center;

  position: fixed; 

  min-height: 100vh; 

  

  

}



.sidebar ul {

  list-style: none;

  padding: 0;

  margin: 0;

}



.sidebar li {

  margin: 20px 0;

  text-align: center;

  cursor: pointer;

}



.sidebar li a {

  display: block;

  width: 100%;

  height: 100%;

  text-decoration: none;

}



.sidebar li img {

  width: 35px;

  height: 35px;

  transition: transform 0.3s ease, background-color 0.3s ease;

}



.sidebar li:hover img {

  transform: scale(1.1); /* Hover efekt */

}



.sidebar li.active {

  background-color: #b58d40; /* Seçili menü elemanı rengi */

  border-radius: 8px; /* Köşeleri yuvarlatma */

}



.content {

  flex: 1;

  display: flex;

  justify-content: center;

  align-items: center;

  background-color: #f3f3f3;

}







  

  .profile-card {

    background-color: #ffffff;

    padding: 60px;

    border-radius: 15px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 500px;

    transition: box-shadow 0.3s ease; /* Hover ile gölge animasyonu */

  }

  

  .profile-card:hover {

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);

  }

  

  .profile-image img {

    width: 150px; 

    height: 150px; 

    border-radius: 50%;

    object-fit: cover;

    margin-bottom: 20px;

  }

  

  h2 {

    font-size: 20px;

    color: #555;

  }

  

  h1 {

    font-size: 28px;

    color: #d6aa50;

    margin: 10px 0;

  }

  

  p {

    font-size: 16px;

    color: #777;

    margin-bottom: 30px;

  }

  

  .full-bio {

    background-color: #d6aa50;

    color: white;

    border: none;

    padding: 12px 24px;

    border-radius: 8px;

    font-size: 16px;

    cursor: pointer;

    transition: background-color 0.3s ease;

  }

  

  .full-bio:hover {

    background-color: #b58d40;

  }

  

  .social-icons {

    margin-top: 30px;

    display: flex;

    justify-content: center;

    gap: 20px;

  }

  

  .social-icons img {

    width: 28px;

    height: 28px;

    transition: transform 0.3s ease;

  }

  

  .social-icons img:hover {

    transform: scale(1.1);

  }

  

  /* Sağ ok simgesi */

  .next-page {

    margin-top: 30px;

    cursor: pointer;

  }

  

  .next-page img {

    width: 30px;

    height: 30px;

    transition: transform 0.3s ease;

  }

  

  .next-page img:hover {

    transform: scale(1.2);

  }

  

  

  .new-profile-card {

    background-color: #ffffff;

    padding: 60px;

    border-radius: 15px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 500px;

    display: none; /* Başlangıçta gizli */

    transition: opacity 0.5s ease-in-out;

  }

  

  /* Animasyonla geçiş için stil */

  .new-profile-card.show {

    display: block;

    opacity: 1;

  }

  

  .new-profile-card.hide {

    opacity: 0;

  }

  

  /* Responsive Design */

  @media screen and (max-width: 768px) {

    .container {

      flex-direction: column;

    }

  

    .sidebar {

      min-height: auto; 

      width: 100%; 

      position: relative; 

    }

  

    .sidebar li {

      margin: 0 15px;

    }

  

    .content {

      margin-top: 20px;

    }

  

    .profile-card {

      width: 80%;

      margin: 0 20px;

    }

  }

  

  .profile-card {

    background-color: #ffffff;

    padding: 60px;

    border-radius: 15px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    text-align: center;

    width: 600px;

    transition: box-shadow 0.3s ease;

    margin: 20px auto;

  }

  

  .profile-card h2 {

    font-size: 24px;

    color: #d6aa50;

    margin-bottom: 30px;

  }

  

  .skills-container {

    display: grid;

    grid-template-columns: repeat(3, 1fr); 

    gap: 20px;

  }

  

  .skill-box {

    background-color: #f5f5f5;

    padding: 20px;

    border-radius: 8px;

    text-align: center;

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

  }

  

  .skill-box img {

    width: 150px;

    height: 150px; 

    object-fit: cover;

    border-radius: 50%;

    margin-bottom: 15px;

  }

  

  .skill-box p {

    font-size: 16px;

    color: #555;

    margin-top: 10px;

  }

  

  .skill-box:hover {

    transform: scale(1.05);

    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

  }

  

  /* Mobil uyumlu tasarım */

  @media screen and (max-width: 768px) {

    .skills-container {

      grid-template-columns: repeat(2, 1fr); 

    }

  }

  

  @media screen and (max-width: 480px) {

    .skills-container {

      grid-template-columns: 1fr; 

    }

  }

  







  .contact-form {

    margin-top: 30px;

    text-align: left;

    background: #ffffff;

    padding: 20px 30px;

    border-radius: 15px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

  }

  

  .contact-form h3 {

    margin-bottom: 20px;

    font-size: 24px;

    color: #d6aa50;

    text-align: center;

  }

  

  .contact-form .form-group {

    margin-bottom: 15px;

  }

  

  .contact-form input, 

  .contact-form textarea {

    width: 100%;

    padding: 12px 15px;

    border: 1px solid #ccc;

    border-radius: 8px;

    font-size: 16px;

    transition: all 0.3s ease;

    outline: none;

  }

  

  .contact-form input:focus, 

  .contact-form textarea:focus {

    border-color: #d6aa50;

    box-shadow: 0 0 5px rgba(214, 170, 80, 0.5);

  }

  

  .contact-form textarea {

    resize: none;

  }

  

  .contact-form .submit-btn {

    width: 100%;

    padding: 12px 20px;

    background: #d6aa50;

    color: #fff;

    font-size: 18px;

    border: none;

    border-radius: 8px;

    cursor: pointer;

    transition: all 0.3s ease;

  }

  

  .contact-form .submit-btn:hover {

    background: #b58d40;

    box-shadow: 0 4px 15px rgba(214, 170, 80, 0.5);

    transform: translateY(-2px);

  }

  .submit-btn.clicked {

    transform: scale(0.95);

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);

  }

    







  .portfolio-header {

    text-align: center;

    margin-bottom: 40px;

}



.portfolio-header h1 {

    font-size: 36px;

    color: #d6aa50;

}



.portfolio-header p {

    font-size: 18px;

    color: #555;

}



.portfolio-grid {

    display: grid;

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

    gap: 20px;

}



.portfolio-item {

  

    background-color: #fff;

    padding: 20px;

    border-radius: 10px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);

    transition: transform 0.3s ease, box-shadow 0.3s ease;

    text-align: center;

}



.portfolio-item img {

    width: 100%;

    height: auto;

    border-radius: 8px;

    transition: transform 0.3s ease;

}



.portfolio-item h2 {

    font-size: 24px;

    color: #333;

    margin-top: 10px;

}



.portfolio-item p {

    color: #777;

    font-size: 16px;

    margin-bottom: 20px;

}



.portfolio-item:hover {

    transform: scale(1.05);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);

}



.portfolio-item:hover img {

    transform: scale(1.1);

}



.btn {

    background-color: #d6aa50;

    color: white;

    padding: 10px 20px;

    text-decoration: none;

    border-radius: 8px;

    transition: background-color 0.3s ease;

}



.btn:hover {

    background-color: #b58d40;

}