/* Arka palan rengi ve yazi tipi  */
body{

    background-color:#0f0f0f;  /* Arxa fon rengi */
    color: #e0e0e0;    /* Default yazilar ag reng */
    
    font-family: 'Segoe UI', system-ui, sans-serif;/* şrift */
    line-height: 1.7;
    overflow-x: hidden;
}





.About{
  display: flex;   /*yan yana duzur sekili   */
  aligin-items: center; /* yuxardan asagiya ortalam  */
  justify-content:space-evenly;/*  */
  gap: 50px;/*ara mesafesi   */
  padding: 100px 15%;/* Üstdən 100 piksel, sağ-soldan isə ekranın 10%-i qədər boşluq burax */
}
/* Cubugun ustundeki noqte*/
.matrix-point2{

    width: 21px;
    height: 21px;
    background-color: rgb(255, 0, 127);
    border-radius: 100%;

    position:absolute;
    top:  -5px;
    right: -13px;

} 


/*Sol kenardaki cubuq  */
.Title2{
    
    border-right: 5px solid  rgb(255, 0, 127); /* Sol tərəfə 4 piksel qalınlığında, bənövşəyi, düz bir xətt çək */
    padding-right: 30px;  /* Yazılar bu xəttə yapışmasın deyə xətlə yazı arasında boşluq qoy */


    position: relative; /* Bu çox mühümdür! Nöqtəni bu qutuya əsasən yerləşdirə bilmək üçün ünvanı sabitləyirik. */
    padding-top: 10px; /* Yazıların üzərində 10 piksel boşluq burax ki, xətt mətndən yuxarıda başlasın. */
    margin-left: 20px; /* Bütün qutunu sol divardan bir az içəri çək ki, xətt nizamla dursun. */
} 

/*   girisdeki 3 ag metin */
.End-text2{
  font-size: 2rem;
  font-weight: bold;
  max-width:90%;/* Yazı ekran boyu uzanıb çirkin durmasın, 600 pikseldən sonra alt sətrə keçsin */
  line-height: 1.5;   /* Sətirlərin arasındakı məsafəni (hündürlüyü) nizamla */
}
.Rengli-text2{
  color: rgb(255, 0, 127);
}







/* Giris metninin olcu nizamlama  */
.Head{
  display: flex;   /*yan yana duzur sekili   */
  aligin-items: center; /* yuxardan asagiya ortalam  */
  justify-content: space-between;/*  */
  gap: 50px;/*ara mesafesi   */
  padding: 100px 15%;/* Üstdən 100 piksel, sağ-soldan isə ekranın 10%-i qədər boşluq burax */
}

/* Cubugun ustundeki noqte*/
.matrix-point{

    width: 21px;
    height: 21px;
    background-color: rgb(0, 255, 127);
    border-radius: 100%;

    position:absolute;
    top:  -5px;
    left: -13px;

} 


/*Sol kenardaki cubuq  */
.Title{
    
    border-left: 5px solid  rgb(0, 255, 127); /* Sol tərəfə 4 piksel qalınlığında, bənövşəyi, düz bir xətt çək */
    padding-left: 30px;  /* Yazılar bu xəttə yapışmasın deyə xətlə yazı arasında boşluq qoy */


    position: relative; /* Bu çox mühümdür! Nöqtəni bu qutuya əsasən yerləşdirə bilmək üçün ünvanı sabitləyirik. */
    padding-top: 10px; /* Yazıların üzərində 10 piksel boşluq burax ki, xətt mətndən yuxarıda başlasın. */
    margin-left: 20px; /* Bütün qutunu sol divardan bir az içəri çək ki, xətt nizamla dursun. */
} 





/*  ilk giris metni Salan Arif  */
.Title h1{

    font-size: 4rem;   /* Yazının ölçüsünü şəkildəki kimi nəhəng et */
    font-weight: 800;   /* Yazını ekstra qalın (bold) et */

    line-height:1.2;  /* bura hi arif arasinda bosluq ucun alt alt kecende  */
    margin: 0px 0 20px 0; /* Altdakı sətirlə arasında 20 piksel boşluq burax */
   
}
.Rengli-text{
  color: rgb(255, 0, 127);
}
.el-anim {
  display: inline-block;
  animation: anim 2.5s infinite; /* 2.5 saniyede loop icinde */
  transform-origin: 70% 110%; /* elin merkezi */
}

@keyframes anim {
  0% { transform: rotate( 0.0deg) }
  10% { transform: rotate(14.0deg) }  /* saga yuxari  qaldirma */
  20% { transform: rotate(-8.0deg) }  /*sola tereg - */
  30% { transform: rotate(14.0deg) }
  40% { transform: rotate(-4.0deg) }
  50% { transform: rotate( 10.0deg) }
  60% { transform: rotate( 0.0deg) }  /* gozle  */
  100% { transform: rotate( 0.0deg) }
}






/* //animasiyali regnli text  */
.Subtitle{
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 15px 0;
}
#yazi-anim{
   color: rgb(0, 255, 127);
}
.typed-cursor{
  color: rgb(0, 255, 127);
}





/*   girisdeki 3 ag metin */
.End-text{
  font-size: 2rem;
  font-weight: bold;
  max-width:90%;/* Yazı ekran boyu uzanıb çirkin durmasın, 600 pikseldən sonra alt sətrə keçsin */
  line-height: 1.5;   /* Sətirlərin arasındakı məsafəni (hündürlüyü) nizamla */
}




/*---------------------SKILLS----------------------------------------*/

#skills {
    padding: 120px 15%; /* logolar arxa plan  kenar ve rengi  */
    background: #0a0a0a;
    
}

#skills .section-title {
    text-align:center;          /* Skils yazi metin ayalari*/
    color: rgb(0, 255, 127);     
    font-size: 40px;           
    font-weight: 700;           
    margin-bottom: 40px;        /* logolaar ile ara bosluq */
}


.marquee-container {/* logo ust bosluqlar */
    overflow:hidden;/* overflow gizletmey*/
    padding: 40px 0;
    background: rgba(0, 255, 127, 0.03);/* seffaf arxa plan  */

    border-top: 1px solid #00ff7f20;
    border-bottom: 1px solid #00ff7f20;
}

.icon-container {
    display: flex;
    gap: 70px;
    width: max-content;
    animation: marquee 20s linear infinite;/* animasiya suret*/ 
}

.icon-container:hover {
    animation-play-state: paused;/*kurseor gelende diyan */
}

.skill-icon {
    font-size: 95px;           /* iconlarin boyu */
    color: #ddd;
    transition: all 0.4s ease;
    flex-shrink: 0;
}

.skill-icon:hover {
    transform: scale(1.35);
    color: #00ff7f;
    filter: drop-shadow(0 0 25px #00ff7f);
}

@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/* EN sondaki muellif texti ------------------------------ */
footer{
    text-align: center;
    padding: 3rem;
    color:#00ff7f;
    border-top: 1px solid #222;
    

}




/* ------------------- MOBIL UYUMLULUK (RESPONSIVE) ------------------- */
@media (max-width: 768px) {
    
    /* 1. Giriş Bölümü: Yazı üstte, Animasyon altta */
    .Head {
        flex-direction: column;
        padding: 50px 6%; /* Sağdan soldan boşluğu mobile göre daralttık */
        gap: 30px;
    }

    /* 2. Hakkımda Bölümü: Yazı üstte, Animasyon altta dursun diye column-reverse yaptık */
    .About {
        flex-direction: column-reverse; 
        padding: 50px 6%;
        gap: 30px;
    }

    /* 3. Animasyonların Boyutunu Mobile Göre Küçültme */
    dotlottie-wc {
        width: 100% !important;   /* Ekran genişliğine uyum sağla */
        height: auto !important;  /* Oranı koru */
        max-width: 320px;         /* Telefondan bakınca çok devasa durmasın */
        margin: 0 auto;           /* Ortala */
    }

    /* 4. Yazı Boyutlarını Mobile Göre Küçültme */
    .Title h1 {
        font-size: 2.5rem; /* 4rem mobilde çok büyüktü, ideal boyuta çektik */
    }

    .Subtitle {
        font-size: 1.5rem;
    }

    .End-text, .End-text2 {
        font-size: 1.2rem;
        max-width: 100%; /* Yazı tüm genişliği kaplasın */
    }

    /* 5. Skills Bölümü Mobil Ayarı */
    #skills {
        padding: 60px 6%;
    }

    #skills .section-title {
        font-size: 2.5rem;
    }

    .skill-icon {
        font-size: 70px; /* Logolar mobilde biraz daha kibar dursun */
    }

    .icon-container {
        gap: 40px; /* Logoların arası birbirine biraz daha yaklaşsın */
    }
}