/* Copyright (c) 2025 by Leonam Silva de Souza (https://codepen.io/leonam-silva-de-souza/pen/vYowKqP) */
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* Yükleme Animasyonu */
.loader-container {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: var(--smoky-black);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   transition: opacity 0.5s ease, visibility 0.5s ease;
}

.loader {
   width: 60px;
   height: 60px;
   border: 5px solid var(--eerie-black1);
   border-top: 5px solid var(--orange-yellow-crayola);
   border-radius: 50%;
   animation: rotate 1s linear infinite;
}

.loaded {
   opacity: 0;
   visibility: hidden;
}

:root {
   --bg-gradient-onyx: linear-gradient(to bottom right, hsl(240, 1%, 25%) 3%, hsl(0, 0%, 19%) 97%);
   --bg-gradient-jet: linear-gradient(to bottom right, hsla(240, 1%, 18%, .251) 3%, hsla(240, 2%, 11%, 0) 100%), hsl(240, 2%, 13%);
   --bg-gradient-yellow1: linear-gradient(to bottom right, hsl(45, 100%, 71%) 0%, hsla(36, 100%, 69%, 0) 50%);
   --bg-gradient-yellow2: linear-gradient(135deg, hsla(45, 100%, 71%, .251) 0%, hsla(35, 100%, 68%, 0) 59.86%), hsl(240, 2%, 13%);
   --border-gradient-onyx: linear-gradient(to bottom right, hsl(0, 0%, 25%) 0%, hsla(0, 0%, 25%, 0) 50%);
   --text-gradient-yellow: linear-gradient(to right, hsl(45, 100%, 72%), hsl(35, 100%, 68%));

   --jet: hsl(0, 0%, 22%);
   --onyx: hsl(240, 1%, 17%);
   --eerie-black1: hsl(240, 2%, 13%);
   --eerie-black2: hsl(240, 2%, 12%);
   --smoky-black: hsl(0, 0%, 7%);
   --white1: hsl(0, 0%, 100%);
   --white2: hsl(0, 0%, 98%);
   --orange-yellow-crayola: hsl(45, 100%, 72%);
   --vegas-gold: hsl(45, 54%, 58%);
   --light-gray: hsl(0, 0%, 84%);
   --light-gray70: hsla(0, 0%, 84%, .7);
   --bittersweet-shimmer: hsl(0, 43%, 51%);

   --ff-poppins: 'Poppins', sans-serif;

   --fs1: 24px;
   --fs2: 18px;
   --fs3: 17px;
   --fs4: 16px;
   --fs5: 15px;
   --fs6: 14px;
   --fs7: 13px;
   --fs8: 12px;

   --fw300: 300;
   --fw400: 400;
   --fw500: 500;
   --fw600: 600;

   --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .25);
   --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .25);
   --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .25);
   --shadow4: 0px 25px 50px hsla(0, 0%, 0%, .15);
   --shadow5: 0px 24px 80px hsla(0, 0%, 0%, .25);

   --transition1: .25s ease;
   --transition2: .5s ease-in-out;
}

/* Animasyonlar */
@keyframes fadeIn {
   from { opacity: 0; transform: translateY(20px); }
   to { opacity: 1; transform: translateY(0); }
}

@keyframes pulse {
   0% { transform: scale(1); }
   50% { transform: scale(1.05); }
   100% { transform: scale(1); }
}

@keyframes slideInLeft {
   from { opacity: 0; transform: translateX(-30px); }
   to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
   from { opacity: 0; transform: translateX(30px); }
   to { opacity: 1; transform: translateX(0); }
}

@keyframes rotate {
   from { transform: rotate(0deg); }
   to { transform: rotate(360deg); }
}

/* Avatar çerçeve animasyonu */
@keyframes borderPulse {
   0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
   70% { box-shadow: 0 0 0 10px rgba(255, 215, 0, 0); }
   100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

@keyframes glowing {
   0% { border-color: var(--orange-yellow-crayola); box-shadow: 0 0 5px var(--orange-yellow-crayola); }
   50% { border-color: var(--vegas-gold); box-shadow: 0 0 20px var(--vegas-gold); }
   100% { border-color: var(--orange-yellow-crayola); box-shadow: 0 0 5px var(--orange-yellow-crayola); }
}

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

*, *::before, *::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

a {text-decoration: none; }

li {list-style: none; }

img, ion-icon, a, button, time, span { display: block; }

button {
   font: inherit;
   background: none;
   border: none;
   text-align: left;
   cursor: pointer;
}

input, textarea {
   display: block;
   width: 100%;
   background: none;
   font: inherit;
}

::selection {
   background: var(--orange-yellow-crayola);
   color: var(--smoky-black);
}

:focus { outline-color: var(--orange-yellow-crayola); }

html { font-family: var(--ff-poppins); }

body { background: var(--smoky-black); }

main {
   margin: 15px 12px;
   margin-bottom: 75px;
   min-width: 259px;
}

.sidebar, article {
   background: var(--eerie-black2);
   border: 1px solid var(--jet);
   border-radius: 20px;
   box-shadow: var(--shadow1);
   z-index: 1;
   padding: 15px;
   animation: fadeIn 0.8s ease-out;
}

   .sidebar.active { max-height: 550px; }

.separator {
   width: 100%;
   height: 1px;
   background: var(--jet);
   margin: 16px 0;
}

.icon-box {
   position: relative;
   background: var(--border-gradient-onyx);
   width: 30px;
   height: 30px;
   border-radius: 8px;
   display: flex;
   justify-content: center;
   align-items: center;
   font-size: 16px;
   color: var(--orange-yellow-crayola);
   box-shadow: var(--shadow1);
   z-index: 1;
}

   .icon-box::before {
       content: '';
       position: absolute;
       inset: 1px;
       background: var(--eerie-black1);
       border-radius: inherit;
       z-index: -1;
   }

   .icon-box ion-icon { --ionicon-stroke-width: 35px; }

article { display: none; }

   article.active { 
       display: block;
       animation: fade .5s ease backwards;
   }

       @keyframes fade {
           0% { opacity: 0; }
           100% { opacity: 1; }
       }

.h2, .h3, .h4, .h5 { 
   color: var(--white2);
   text-transform: capitalize;
}

   .h2 { font-size: var(--fs1); }
   .h3 { font-size: var(--fs2); }
   .h4 { font-size: var(--fs4); }
   .h5 { 
       font-size: var(--fs7);
       font-weight: var(--fw500); 
   }

.article-title {
   position: relative;
   padding-bottom: 7px;
   animation: fadeIn 0.6s ease-out;
}

   .article-title::after {
       content: '';
       position: absolute;
       bottom: 0;
       left: 0;
       width: 30px;
       height: 3px;
       background: var(--text-gradient-yellow);
       border-radius: 3px;
   }

.content-card {
   position: relative;
   background: var(--border-gradient-onyx);
   padding: 15px;
   padding-top: 45px;
   border-radius: 14px;
   box-shadow: var(--shadow2);
   cursor: pointer;
   z-index: 1;
}

   .content-card::before {
       content: '';
       position: absolute;
       inset: 1px;
       background: var(--bg-gradient-jet);
       border-radius: inherit;
       z-index: -1;
   }

/*ASIDE - SIDEBAR*/

.sidebar {
   margin-bottom: 15px;
   max-height: 140px;
   overflow: hidden;
   padding: 18px 15px;
   transition: var(--transition2);
}

.avatar-box {
   background: var(--bg-gradient-onyx);
   border-radius: 20px;
   position: relative;
   overflow: hidden;
   padding: 3px;
   border: 2px solid var(--orange-yellow-crayola);
   background-clip: padding-box;
   min-width: 85px;
}

.avatar-box::before {
   content: '';
   position: absolute;
   top: -2px;
   left: -2px;
   right: -2px;
   bottom: -2px;
   background: linear-gradient(45deg, var(--orange-yellow-crayola), var(--vegas-gold), var(--orange-yellow-crayola), var(--vegas-gold));
   background-size: 300% 300%;
   border-radius: 20px;
   z-index: -1;
   animation: rotate-gradient 3s linear infinite;
}

.avatar-box img {
   border-radius: 18px;
   display: block;
}

.sidebar-info {
   position: relative;
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 15px;
   margin-bottom: 5px;
}

.info-content .name {
   color: var(--white2);
   font-size: var(--fs3);
   font-weight: var(--fw500);
   letter-spacing: -0.25px;
   margin-bottom: 12px;
}

.info-content .title {
   color: var(--white1);
   background: var(--onyx);
   font-size: var(--fs8);
   font-weight: var(--fw300);
   width: max-content;
   padding: 3px 12px;
   border-radius: 8px;
}

.info-more-btn {
   position: absolute;
   top: -12px;
   right: -15px;
   border-radius: 0 15px;
   font-size: 13px;
   color: var(--orange-yellow-crayola);
   background: var(--border-gradient-onyx);
   padding: 12px;
   box-shadow: var(--shadow2);
   transition: var(--transition1);
   z-index: 1;
}

   .info-more-btn::before {
       content: '';
       position: absolute;
       inset: 1px;
       border-radius: inherit;
       background: var(--bg-gradient-jet);
       transition: var(--transition1);
       z-index: -1;
   }

       .info-more-btn:hover, .info-more-btn:focus { background: var(--bg-gradient-yellow1); }
       .info-more-btn:hover::before, .info-more-btn:focus::before { background: var(--bg-gradient-yellow2); }

   .info-more-btn span { display: none; }

.sidebar-info-more {
   opacity: 0;
   visibility: hidden;
   transition: var(--transition2);
}

   .sidebar.active .sidebar-info-more {
       opacity: 1;
       visibility: visible;
   }

.contacts-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 16px;
}

.contact-item {
   min-width: 100%;
   display: flex;
   align-items: center;
   gap: 16px;
}

.contact-info {
   max-width: calc(100% - 46px);
   width: calc(100% - 46px);
}

   .contact-info :is(.contact-link, time, address) {
       color: var(--white2);
       font-size: var(--fs7);
   }

   .contact-info address { font-style: normal; }

.contact-title {
   color: var(--light-gray70);
   font-size: var(--fs8);
   text-transform: uppercase;
   margin-bottom: 2px;
}

.social-list {
   display: flex;
   justify-content: flex-start;
   align-items: center;
   gap: 15px;
   padding-bottom: 4px;
   padding-left: 7px;
}

.social-item .social-link {
   color: var(--light-gray70);
   font-size: 18px;
}

   .social-item .social-link:hover { color: var(--light-gray); }

/*NAVBAR*/

.navbar {
   position: fixed;
   bottom: 0;
   left: 0;
   width: 100%;
   background: hsla(240, 1%, 17%, .75);
   backdrop-filter: blur(10px);
   border: 1px solid var(--jet);
   border-radius: 12px 12px 0 0;
   box-shadow: var(--shadow2);
   z-index: 5;
}

.navbar-list {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   padding: 0 10px;
}

.navbar-link {
   color: var(--light-gray);
   font-size: var(--fs8);
   padding: 20px 7px;
   transition: color var(--transition1);
}

   .navbar-link:hover, .navbar-link:focus { color: var(--light-gray70); }
   .navbar-link.active { color: var(--orange-yellow-crayola); }

/*ABOUT*/

.about .article-title { 
   margin-bottom: 15px;
   margin-top: 15px;
}

.about-text {
   color: var(--light-gray);
   font-size: var(--fs6);
   font-weight: var(--fw300);
   line-height: 1.6;
}

   .about-text p { 
       margin-bottom: 15px;
       text-align: justify;
       padding-left: 10px;
       padding-right: 10px;
       animation: slideInLeft 0.8s ease-out;
       opacity: 0;
       animation-fill-mode: forwards;
   }

   .about-text p:nth-child(1) {
       animation-delay: 0.2s;
   }

   .about-text p:nth-child(2) {
       animation-delay: 0.6s;
   }

.service { margin-bottom: 35px; }

.service-title { margin-bottom: 20px; }

.service-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 20px;
}

.service-item {
   position: relative;
   background: var(--border-gradient-onyx);
   padding: 20px;
   border-radius: 14px;
   box-shadow: var(--shadow2);
   z-index: 1;
   transition: transform 0.3s ease;
   animation: fadeIn 0.8s ease-out;
   opacity: 0;
   animation-fill-mode: forwards;
}

   .service-item:hover {
       transform: translateY(-5px);
   }

   .service-item::before {
       content: '';
       position: absolute;
       inset: 1px;
       background: var(--bg-gradient-jet);
       border-radius: inherit;
       z-index: -1;
   }

.service-item:nth-child(1) {
   animation-delay: 0.2s;
}

.service-item:nth-child(2) {
   animation-delay: 0.4s;
}

.service-item:nth-child(3) {
   animation-delay: 0.6s;
}

.service-item:nth-child(4) {
   animation-delay: 0.8s;
}

.service-item:nth-child(5) {
   animation-delay: 1s;
}

.service-item:nth-child(6) {
   animation-delay: 1.2s;
}

.service-icon-box { 
   margin-bottom: 10px; 
   transition: transform 0.5s ease;
}

   .service-icon-box:hover {
       animation: pulse 1s infinite;
   }
   
   .service-icon-box img { margin: auto; }

.service-content-box { text-align: center; }
.service-item-title { margin-bottom: 7px; }

.service-item-text {
   color: var(--light-gray);
   font-size: var(--fs6);
   font-weight: var(--fw300);
   line-height: 1.6;
}

/*SKILLS*/

.skills-title { margin-bottom: 20px; animation: slideInLeft 0.6s ease-out; }

.skills-list { padding: 20px; animation: fadeIn 0.8s ease-out; }

.skills-item {
   animation: slideInRight 0.5s ease-out;
   opacity: 0;
   animation-fill-mode: forwards;
}

.skills-item:not(:last-child) {margin-bottom: 15px; }

.skills-item:nth-child(1) {
   animation-delay: 0.2s;
}

.skills-item:nth-child(2) {
   animation-delay: 0.5s;
}

.skills-item:nth-child(3) {
   animation-delay: 0.8s;
}

.skills-item:nth-child(4) {
   animation-delay: 1.1s;
}

.skill .title-wrapper {
   display: flex;
   align-items: center;
   gap: 5px;
   margin-bottom: 8px;
}

   .skill .title-wrapper data {
       color: var(--light-gray);
       font-size: var(--fs7);
       font-weight: var(--fw300);
   }

.skills-progress-bg {
   background: var(--jet);
   width: 100%;
   height: 8px;
   border-radius: 10px;
}

/* Beceri Çubukları Animasyonu */
@keyframes fillBar {
   from { width: 0; }
   to { width: 100%; }
}

.skills-progress-fill {
   background: var(--text-gradient-yellow);
   height: 100%;
   border-radius: inherit;
   transition: width 1s ease-in-out;
   position: relative;
   width: 0;
   animation: fillBar 1.5s forwards;
}

.skills-item:nth-child(1) .skills-progress-fill {
   animation-delay: 0.5s;
}

.skills-item:nth-child(2) .skills-progress-fill {
   animation-delay: 0.8s;
}

.skills-item:nth-child(3) .skills-progress-fill {
   animation-delay: 1.1s;
}

.skills-item:nth-child(4) .skills-progress-fill {
   animation-delay: 1.4s;
}

/* Servis Öğeleri için hover efekti */
.service-item:hover .service-icon-box {
   transform: scale(1.1) rotate(5deg);
}

/* Başlık animasyonları */
.service-title, .skills-title {
   position: relative;
   overflow: hidden;
}

.service-title::before, .skills-title::before {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   height: 2px;
   background: var(--text-gradient-yellow);
   transform: translateX(-100%);
   animation: slideRight 1s forwards 0.5s;
}

@keyframes slideRight {
   from { transform: translateX(-100%); }
   to { transform: translateX(0); }
}

/*PROJELER*/

.projects-list {
   display: grid;
   grid-template-columns: 1fr;
   gap: 25px;
   margin-top: 25px;
}

.project-card {
   overflow: hidden;
   padding: 20px;
   display: flex;
   flex-direction: column;
   transition: transform 0.3s ease;
   animation: fadeIn 0.6s ease-out;
}

.project-card:hover {
   transform: translateY(-5px);
}

.project-image {
   overflow: hidden;
   border-radius: 10px;
   margin-bottom: 15px;
}

.project-image img {
   width: 100%;
   height: auto;
   transition: transform 0.5s ease;
   object-fit: cover;
}

.project-card:hover .project-image img {
   transform: scale(1.05);
}

.project-title {
   margin-bottom: 10px;
   color: var(--white2);
}

.project-description {
   color: var(--light-gray);
   font-size: var(--fs6);
   margin-bottom: 15px;
   line-height: 1.6;
}

.project-tech {
   display: flex;
   flex-wrap: wrap;
   gap: 8px;
   margin-bottom: 15px;
}

.tech-tag {
   background: var(--onyx);
   color: var(--orange-yellow-crayola);
   font-size: var(--fs8);
   padding: 5px 10px;
   border-radius: 5px;
   display: inline-block;
}

.project-link {
   color: var(--orange-yellow-crayola);
   font-size: var(--fs7);
   font-weight: var(--fw500);
   text-transform: uppercase;
   align-self: flex-end;
   transition: color 0.3s ease;
}

.project-link:hover {
   color: var(--vegas-gold);
}

/*MEDIA QUERIES*/

@media (min-width: 580px) {
   :root {
       --fs1: 32px;
       --fs2: 24px;
       --fs3: 26px;
       --fs4: 18px;
       --fs6: 15px;
       --fs7: 15px;
       --fs8: 12px;
   }

   .sidebar, article {
       width: 520px;
       margin-inline: auto;
       padding: 30px;
   }

   .article-title {
       font-weight: var(--fw600);
       padding-bottom: 15px;
   }

       .article-title::after {
           width: 40px;
           height: 5px;
       }

   .icon-box {
       width: 48px;
       height: 48px;
       border-radius: 12px;
       font-size: 18px;
   }

   main {
       margin-top: 60px;
       margin-bottom: 100px;
   }

   .sidebar {
       max-height: 200px;
       margin-bottom: 30px;
   }

       .sidebar.active { max-height: 650px; }

   .sidebar-info { gap: 25px; }

   .avatar-box { 
       border-radius: 30px;
   }
   
   .avatar-box::before {
       border-radius: 30px;
   }
   
   .avatar-box img { 
       width: 120px; 
       border-radius: 27px;
   }

   .info-content .name { margin-bottom: 15px; }
   .info-content .title { padding: 5px 10px; }

   .info-more-btn {
       top: -30px;
       right: -30px;
       padding: 10px 15px;
   }

       .info-more-btn span {
           display: block;
           font-size: var(--fs8);
       }

       .info-more-btn ion-icon { display: none; }

   .separator { margin: 32px 0; }

   .contacts-list { gap: 20px; }

   .contact-info {
       max-width: calc(100% - 64px);
       width: calc(100% - 64px);
   }

   .navbar { border-radius: 20px 20px 0 0; }

   .navbar-list { gap: 20px; }
   .navbar-link { --fs8: 14px; }

   .about .article-title { margin-bottom: 20px; }
   .about-text { margin-bottom: 40px; }

   .service-item {
       display: flex;
       justify-content: flex-start;
       align-items: flex-start;
       gap: 18px;
       padding: 30px;
   }

   .service-icon-box {
       margin-bottom: 0;
       margin-top: 5px;
   }

   .service-content-box { text-align: left; }

   .projects-list {
       padding: 0 20px;
   }

   .form {
       max-width: 500px;
       margin-inline: auto;
   }
}

@media (min-width: 768px) {

   .sidebar, article { width: 700px; }

   .contacts-list {
       grid-template-columns: 1fr 1fr;
       gap: 30px 15px;
   }

   .navbar-link { --fs8: 15px; }

   .article-title { padding-bottom: 20px; }

   .service-list { grid-template-columns: 1fr 1fr; }

   .projects-list {
       grid-template-columns: 1fr 1fr;
       gap: 25px;
   }

   .input-wrapper {
       grid-template-columns: 1fr 1fr;
   }
}

@media (min-width: 1024px) {

   :root {
       --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .125);
       --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .125);
       --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .125);
   }

   .sidebar, article {
       width: 950px;
       box-shadow: var(--shadow5);
   }

   main { margin-bottom: 60px; }

   .main-content {
       position: relative;
       width: max-content;
       margin: auto;
   }

   .navbar {
       position: absolute;
       bottom: auto;
       top: 0;
       left: auto;
       right: 0;
       width: max-content;
       border-radius: 0 20px;
       padding: 0 20px;
       box-shadow: none;
   }

   .navbar-list {
       gap: 30px;
       padding: 0 20px;
   }

   .navbar-link { font-weight: var(--fw500); }

   .service-list {
       grid-template-columns: 1fr 1fr;
       gap: 20px 25px;
   }

   .projects-list {
       grid-template-columns: repeat(3, 1fr);
   }
}

@media (min-width: 1250px) {

   body::-webkit-scrollbar { width: 20px; }
   body::-webkit-scrollbar-track { background: var(--smoky-black); }

   body::-webkit-scrollbar-thumb {
       border: 5px solid var(--smoky-black);
       background: hsla(0, 0%, 100%, .1);
       border-radius: 20px;
       box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, .11), inset -1px -1px 0 hsla(0, 0%, 100%, .11);
   }

   body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, .15); }
   body::-webkit-scrollbar-button { height: 60px; }

   .sidebar, article { width: auto; }

   article { min-height: 100%; }

   main {
       max-width: 1200px;
       margin-inline: auto;
       display: flex;
       justify-content: center;
       align-items: stretch;
       gap: 25px;
   }

   .main-content {
       min-width: 75%;
       width: 75%;
       margin: 0;
   }

   .sidebar {
       position: sticky;
       top: 60px;
       max-height: max-content;
       height: 100%;
       margin-bottom: 0;
       padding-top: 60px;
       z-index: 1;
   }

   .sidebar-info { flex-direction: column; }

   .avatar-box img { width: 150px; }
   
   .avatar-box { 
       margin-bottom: 15px; 
       padding: 5px;
   }
   
   .avatar-box::before {
       animation: rotate-gradient 4s linear infinite, glowing 3s infinite;
   }

   .info-content .name {
       white-space: nowrap;
       text-align: center;
   }

   .info-content .title { margin: auto; }

   .info-more-btn { display: none; }

   .sidebar-info-more {
       opacity: 1;
       visibility: visible;
   }

   .contacts-list { grid-template-columns: 1fr; }

   .contact-info :is(.contact-link) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .contact-info :is(.contact-link, time, address) {
       --fs7: 14px;
       font-weight: var(--fw300);
   }

   .separator:last-of-type {
       margin: 15px 0;
       opacity: 0;
   }

   .social-list { justify-content: center; }
}

/*İLETİŞİM*/

.contact-form {
   margin-top: 25px;
}

.form-title {
   margin-bottom: 20px;
   color: var(--white2);
}

.form {
   display: grid;
   gap: 25px;
   animation: fadeIn 0.6s ease-out;
}

.input-wrapper {
   display: grid;
   gap: 15px;
}

.form-input {
   color: var(--white2);
   font-size: var(--fs7);
   padding: 15px;
   border: 1px solid var(--jet);
   border-radius: 14px;
   outline: none;
   background: var(--eerie-black1);
   transition: border-color 0.3s ease;
}

.form-input:focus {
   border-color: var(--orange-yellow-crayola);
}

.form-input::placeholder {
   color: var(--light-gray70);
}

textarea.form-input {
   min-height: 150px;
   max-height: 250px;
   resize: vertical;
   margin-bottom: 10px;
}

.form-btn {
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 8px;
   padding: 12px 25px;
   border-radius: 14px;
   background: var(--border-gradient-onyx);
   color: var(--orange-yellow-crayola);
   font-size: var(--fs7);
   text-transform: uppercase;
   font-weight: var(--fw500);
   cursor: pointer;
   position: relative;
   z-index: 1;
   transition: all 0.3s ease;
}

.form-btn::before {
   content: '';
   position: absolute;
   inset: 1px;
   background: var(--bg-gradient-jet);
   border-radius: inherit;
   z-index: -1;
   transition: background 0.3s ease;
}

.form-btn:hover {
   background: var(--bg-gradient-yellow1);
}

.form-btn:hover::before {
   background: var(--bg-gradient-yellow2);
}

.form-btn:disabled {
   opacity: 0.7;
   cursor: not-allowed;
}

.form-btn ion-icon {
   font-size: 18px;
}

@media (min-width: 580px) {
   .form {
       max-width: 500px;
       margin-inline: auto;
   }
}

@media (min-width: 768px) {
   .input-wrapper {
       grid-template-columns: 1fr 1fr;
   }
}

/*DENEYİMLER*/

.timeline {
   position: relative;
   margin: 30px 0;
}

.timeline::before {
   content: '';
   position: absolute;
   top: 0;
   left: 7px;
   height: 100%;
   width: 2px;
   background: var(--jet);
}

.timeline-item {
   position: relative;
   padding-left: 45px;
   margin-bottom: 40px;
}

.timeline-item:last-child {
   margin-bottom: 0;
}

.timeline-dot {
   position: absolute;
   top: 5px;
   left: 0;
   width: 15px;
   height: 15px;
   border-radius: 50%;
   background: var(--text-gradient-yellow);
   box-shadow: 0 0 0 4px var(--eerie-black1);
}

.timeline-content {
   position: relative;
   padding: 20px;
   animation: fadeIn 0.6s ease-out forwards;
   opacity: 0;
}

.timeline-item:nth-child(1) .timeline-content {
   animation-delay: 0.2s;
}

.timeline-item:nth-child(2) .timeline-content {
   animation-delay: 0.4s;
}

.timeline-item:nth-child(3) .timeline-content {
   animation-delay: 0.6s;
}

.timeline-item:nth-child(4) .timeline-content {
   animation-delay: 0.8s;
}

.timeline-item:nth-child(5) .timeline-content {
   animation-delay: 1s;
}

.timeline-item:nth-child(6) .timeline-content {
   animation-delay: 1.2s;
}

.timeline-title {
   margin-bottom: 10px;
   color: var(--white2);
}

.timeline-date, .timeline-place {
   display: block;
   color: var(--orange-yellow-crayola);
   font-size: var(--fs7);
   margin-bottom: 5px;
}

.timeline-place {
   font-style: italic;
   color: var(--light-gray);
}

.timeline-description {
   color: var(--light-gray);
   font-size: var(--fs6);
   line-height: 1.6;
   margin-top: 10px;
}

@media (min-width: 580px) {
   .timeline::before {
       left: 20px;
   }
   
   .timeline-item {
       padding-left: 60px;
   }
   
   .timeline-dot {
       width: 20px;
       height: 20px;
       left: 10px;
   }
}

@media (min-width: 768px) {
   .education-list {
       grid-template-columns: 1fr 1fr;
   }
}

@media (min-width: 1024px) {

   :root {
       --shadow1: -4px 8px 24px hsla(0, 0%, 0%, .125);
       --shadow2: 0px 16px 30px hsla(0, 0%, 0%, .125);
       --shadow3: 0px 16px 40px hsla(0, 0%, 0%, .125);
   }

   .sidebar, article {
       width: 950px;
       box-shadow: var(--shadow5);
   }

   main { margin-bottom: 60px; }

   .main-content {
       position: relative;
       width: max-content;
       margin: auto;
   }

   .navbar {
       position: absolute;
       bottom: auto;
       top: 0;
       left: auto;
       right: 0;
       width: max-content;
       border-radius: 0 20px;
       padding: 0 20px;
       box-shadow: none;
   }

   .navbar-list {
       gap: 30px;
       padding: 0 20px;
   }

   .navbar-link { font-weight: var(--fw500); }

   .service-list {
       grid-template-columns: 1fr 1fr;
       gap: 20px 25px;
   }

   .projects-list {
       grid-template-columns: repeat(3, 1fr);
   }
}

@media (min-width: 1250px) {

   body::-webkit-scrollbar { width: 20px; }
   body::-webkit-scrollbar-track { background: var(--smoky-black); }

   body::-webkit-scrollbar-thumb {
       border: 5px solid var(--smoky-black);
       background: hsla(0, 0%, 100%, .1);
       border-radius: 20px;
       box-shadow: inset 1px 1px 0 hsla(0, 0%, 100%, .11), inset -1px -1px 0 hsla(0, 0%, 100%, .11);
   }

   body::-webkit-scrollbar-thumb:hover { background: hsla(0, 0%, 100%, .15); }
   body::-webkit-scrollbar-button { height: 60px; }

   .sidebar, article { width: auto; }

   article { min-height: 100%; }

   main {
       max-width: 1200px;
       margin-inline: auto;
       display: flex;
       justify-content: center;
       align-items: stretch;
       gap: 25px;
   }

   .main-content {
       min-width: 75%;
       width: 75%;
       margin: 0;
   }

   .sidebar {
       position: sticky;
       top: 60px;
       max-height: max-content;
       height: 100%;
       margin-bottom: 0;
       padding-top: 60px;
       z-index: 1;
   }

   .sidebar-info { flex-direction: column; }

   .avatar-box img { width: 150px; }
   
   .avatar-box { 
       margin-bottom: 15px; 
       padding: 5px;
   }
   
   .avatar-box::before {
       animation: rotate-gradient 4s linear infinite, glowing 3s infinite;
   }

   .info-content .name {
       white-space: nowrap;
       text-align: center;
   }

   .info-content .title { margin: auto; }

   .info-more-btn { display: none; }

   .sidebar-info-more {
       opacity: 1;
       visibility: visible;
   }

   .contacts-list { grid-template-columns: 1fr; }

   .contact-info :is(.contact-link) {
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
   }

   .contact-info :is(.contact-link, time, address) {
       --fs7: 14px;
       font-weight: var(--fw300);
   }

   .separator:last-of-type {
       margin: 15px 0;
       opacity: 0;
   }

   .social-list { justify-content: center; }
}

/* Gelişmiş Animasyonlar */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

@keyframes textGlow {
    0% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.1); }
    50% { text-shadow: 0 0 15px rgba(255, 215, 0, 0.5); }
    100% { text-shadow: 0 0 4px rgba(255, 215, 0, 0.1); }
}

@keyframes borderFlash {
    0% { border-color: var(--orange-yellow-crayola); }
    50% { border-color: var(--vegas-gold); }
    100% { border-color: var(--orange-yellow-crayola); }
}

@keyframes page-enter {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes page-exit {
    0% { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}

@keyframes shine {
    0% { background-position: -200% center; }
    100% { background-position: 200% center; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

@keyframes fadeSlideUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Gelişmiş Animasyon Sınıfları */
.page-enter {
    animation: page-enter 0.6s ease forwards;
}

.page-exit {
    animation: page-exit 0.4s ease forwards;
}

/* Avatar animasyonu */
.avatar-box {
    position: relative;
    overflow: hidden;
    animation: float 5s ease-in-out infinite;
}

/* Sosyal medya ikonları animasyonu */
.social-pulse {
    animation: pulse 0.6s ease-in-out;
    color: var(--orange-yellow-crayola) !important;
}

.social-item .social-link:hover ion-icon {
    transform: scale(1.2) rotate(5deg);
    transition: transform 0.3s ease;
}

/* Servis kartları animasyonu */
.animate-service {
    animation: fadeSlideUp 0.6s ease forwards;
}

/* Navbar hover efektleri */
.navbar-link {
    position: relative;
    overflow: hidden;
}

.navbar-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--orange-yellow-crayola);
    transition: width 0.3s ease;
}

.navbar-link:hover::after,
.navbar-link.active::after {
    width: 100%;
}

/* Sidebar hover efekti */
.sidebar-hover:not(.active) {
    transform: translateY(-5px);
    box-shadow: 0px 20px 35px hsla(0, 0%, 0%, .3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hakkımda metni animasyonu */
.about-text p {
    position: relative;
}

.about-text p::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 10px;
    width: 0;
    height: 1px;
    background: var(--orange-yellow-crayola);
    transition: width 0.6s ease;
}

.about-text p:hover::after {
    width: calc(100% - 20px);
}

/* Servis kartları parıltı efekti */
.service-item::before {
    background-size: 200% 100%;
    background-image: linear-gradient(90deg, 
        var(--bg-gradient-jet) 0%, 
        var(--bg-gradient-jet) 35%, 
        var(--bg-gradient-jet) 45%, 
        rgba(255,215,0,0.15) 50%, 
        var(--bg-gradient-jet) 55%, 
        var(--bg-gradient-jet) 65%, 
        var(--bg-gradient-jet) 100%);
    animation: shine 3s ease-in-out infinite;
    animation-play-state: paused;
}

.service-item:hover::before {
    animation-play-state: running;
}

/* Beceri çubukları gelişmiş animasyonu */
.skills-progress-fill {
    position: relative;
    overflow: hidden;
}

.skills-progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    animation: skillShine 2s ease-in-out infinite;
}

@keyframes skillShine {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* Zaman çizgisi gelişmiş animasyonu */
.timeline-dot {
    animation: pulse 2s infinite;
}

.timeline-item {
    transition: transform 0.3s ease;
}

.timeline-item:hover {
    transform: scale(1.02);
}

.timeline-item:hover .timeline-dot {
    animation-duration: 1s;
}

/* Proje kartları için 3D efekti */
.project-card {
    transform-style: preserve-3d;
    perspective: 1000px;
    transition: transform 0.5s ease, box-shadow 0.5s ease;
}

.project-card:hover {
    transform: translateY(-10px) scale(1.01);
    box-shadow: 0px 15px 30px rgba(0, 0, 0, 0.35);
}

.project-image img {
    backface-visibility: hidden;
    transition: transform 0.5s ease;
}

/* Parti̇kül efekti için stil */
#particle-canvas {
    opacity: 0.3;
    transition: opacity 0.5s ease;
}

/* Animasyonlu başlık stilllendirme */
.article-title span {
    display: inline-block;
    transition: color 0.3s ease;
}

.article-title:hover span {
    animation: textGlow 2s ease-in-out infinite;
    color: var(--orange-yellow-crayola);
}

/* Geniş ekranlarda daha güçlü hover efektleri */
@media (min-width: 1024px) {
    .service-item:hover {
        transform: translateY(-8px);
    }
    
    /* Particle efekti */
    #particle-canvas {
        opacity: 0.5;
    }
}