* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }
 
 body {
     width: 100%;
     font-family: "Open Sans", sans-serif;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     color:  #fffefed8;
     background-color: #e4e1e1;
 
 }


 
 .navbar {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     background: #14213D;
     padding: 5vh 0;
     position: fixed;
     background-color: transparent; /* Başlangıçta şeffaf */
     z-index: 1;
     border-bottom: 0.5px solid whitesmoke;
     top: 0;
     height: 85px;
     transition: background-color 0.3s ease; /* Renk değişimi animasyonu */
   }
   .navbar__logo{
     width: 15%;
     align-items: center;
     justify-content: center;
     text-align: center;
     margin: 1vh 0;
     padding: 0;

   }
   .navbar__logo img {
     width: 90%;
     height: 40px;
     margin: 2vh 0;
     align-items: center;
     justify-content: center;
  
   }
   
   .navbar__menu {
     width: 75%;
     display: flex;
     align-items: center;
     justify-content: flex-end;
     margin: 1vh 3vh;
     padding: 2vh 2vh;
   }
   
   .menu__list {
     width: 60%;
     align-items: center;
     justify-content: space-around;
     display: flex;
     padding: 1vh;
     list-style: none;
   }
   
   .menu__item {
     padding: 0.5vh;
     position: relative;

   }
   
   .menu__item a {
     text-decoration: none;
     color: #fff;
     font-weight: 600;
     transition: color 0.3s ease, transform 0.3s ease;

   }
   .menu__item a:hover{
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
     border-bottom: 1px solid #fff;
 }
   
   .menu__item a.no-link {
     cursor: default;
   }


   
   .dropdown__sub {
     position: relative;
     flex-direction: column;
   }
   
   .menu__icon {
     display: none;
     cursor: pointer;
     font-size: 24px;
     color: #fff;
     transition: transform 0.3s ease;
   }
   
   @media (max-width: 768px) {
     .navbar {
         width: 100%;
         display: flex;
     }
     .navbar__logo {
          width: 56%;
          margin: 2vh 1vh 1vh 2vh;
     }
     .navbar__logo img {
       width: 90%;
       align-items: center;
       justify-content: center;
       text-align: center;
       margin: 0 1vh;
       
     }

     
     .menu__list {
        width: 100%;
         display: none;
         flex-direction: column;
         position: absolute;
         top: 80px;
         right: 0;
         background: #14213D;
         z-index: 1000;
         padding: 1.5vh 0 1vh 0;
         border-bottom: 0.5px solid whitesmoke;
   
       }
   
     .menu__item {
          width: 90%;
          margin: 1vh;
          
     }

     .menu__item a:hover{
          border-bottom: 1px solid whitesmoke;
     }
   
     .menu__icon {
          width: 10%;
          height: 10%;
          align-items: center;
          justify-content: center;
          text-align: center;
          font-size: 30px;
         display: block;
       
     }
   
     .menu__list.open {
         display: flex;
     }

   }
   /* menü bar son */


   /* Sabit buton css ilk */
.sabit-butonlar.left{
     position: fixed;
     left: 1px; 
     top: 90%; 
     transform: translateY(-50%); 
     background: transparent;
     display: flex;
     flex-direction: column;
     padding: 2px;
     border: 1px solid transparent;
     border-top-right-radius: 10px;
     border-bottom-right-radius: 15px;
     z-index: 2;
   
   }
   .sabit-butonlar.right{
        width: fit-content;
        position: fixed;  
        right: 1px; 
        top: 90%; 
        transform: translateY(-50%); 
        background: transparent;
        display: flex;
        flex-direction: column;
        padding: 2px;
        border: 1px solid transparent;
        border-top-left-radius: 10px;
        border-bottom-left-radius: 15px; 
        z-index: 2;
   }
   .sabit-butonlar button {
     box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); 
     margin: 10px 5px;
     padding: 2vh;
     background-color: #fff;
     cursor: pointer;
     border: none;
     border-radius: 100px;
   }
   .sabit-butonlar button i.fa-whatsapp{
     font-size: 30px;
     color: #4dc247;
   }
   .sabit-butonlar button i.fa-phone-volume{
     font-size:26px;
     color: #2ebd59;
     
     /*   #2ebd59 */
   }
   @media (max-width: 768px) {
     .sabit-butonlar {
         top: 95%; 
         transform: translateY(-50%); 
     }
     .sabit-butonlar button i.fa-phone-volume{
          font-size:19px;
          color: #2ebd59;

        }
        .sabit-butonlar button i.fa-whatsapp{
          font-size: 20px;
          color: #4dc247;
        }
        .sabit-butonlar button{
          margin: 0;
        
        }
        .sabit-butonlar.right{
        right: 0.5vh;
        bottom: 10vh ;
        }
        .sabit-butonlar.left{
          left: 0.5vh;
          bottom: 10vh ;
          }
   }  
   /* Sabit buton css son */

/* giris-alan başlangıç */
.giris-alan {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0;
     padding: 0;
     position: relative;
 }
 
 .giris {
     width: 100%;
     display: flex;
     margin: 0;
     padding: 0;
     flex-direction: column;
     position: relative;
 }
 
 .giris img {
     width: 100%;
     position: absolute;
     top: 0;
     left: 0;
     opacity: 0;
     transition: opacity 1s ease-in-out;
 }
 
 /* İlk resim başlangıçta görünür */
 .giris img.active {
     opacity: 1;
 }
 

 .giris h1 {
     position: absolute;
     top: 50vh;
     bottom: 4vh;
     left: 4vh;
     color: #fff;
     padding: 1vh 2vh;
     font-size: 36px;
     z-index: 10; 
     text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.5);
     transition: opacity 1s ease-in-out, left 1s ease-in-out;
     font-family: 'Montserrat', sans-serif;
     transition: opacity 1s ease-in-out, left 1s ease-in-out;

 }

 
 .giris::before {
     content: '';
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     background: rgba(0, 0, 0, 0.4);
     z-index: 1;
 }
 

 .giris h1.hidden {
     opacity: 0;
 }
 @media (max-width: 768px) {
     .giris {
         max-width: 100%;
         height: 60vh; 
     }
 
     .giris img {
         height: 100%;
         object-fit: cover; 
     }
 
     .giris h1 {
         width: 90%;
         align-items: center;
         text-align: left;
         justify-content: center;
         font-size: 16px; 
         margin: 0;
         padding: 0.5vh 1vh;
         
     }
 }
 /* giris-alan son*/
 /* sloganilk*/
 .slogan-ilk{
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0;
     padding: 0;
     position: relative;
     top: 70vh;
 }
 .slogan-ilk .slogan{
     width: 96%;
     display: flex;
     align-items: center;
     flex-direction: column;
     margin: 2vh 0;
     padding: 2vh 1vh;

 }
 .slogan h2,p{
     width: 96%;
     align-items: center;
     justify-content: center;
     text-align: center;
     margin: 1vh 0;
     padding: 1vh 1vh;
     color: #2e2c2c;
 }
 .slogan h2{
     font-size: 26px;
 }

.slogan-container {
     width: 100%;
     display: flex;
     justify-content: center; 
     align-items: center;
     text-align: center;
     margin: 2vh 0 0 0 ; 
 }
 
 .slogan a {
     align-items: center;
     text-decoration: none;
     justify-content: center;
     text-align: center;
     margin: 1vh 0;
     padding: 1vh 1vh;
     border-radius: 6px;
     border: 1px solid #2e2c2c ;
     color: #000;
     width: 18vh; 
     transition: color 0.3s ease, transform 0.3s ease;

 }
 .slogan a:hover{
          color: #fafafa; 
          transform: scale(1.05); 
          font-weight: bold;
          background: #2e2c2c;
      }

 @media (max-width: 768px){
     .slogan-ilk{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 0;
          top: 0;
     }
     .slogan-ilk .slogan{
          width: 95%;
          display: flex;
          align-items: center;
          flex-direction: column;
     }
     .slogan h2,p{
          width: 100%;
          margin: 1vh 0;
          padding: 1vh 1vh;
          align-items: center;
          text-align: center;
          justify-content: center;
     }
     .slogan-container{
          width: 95%;
          margin-top: 3vh;
          
     }
 }
  /* slogan son*/

  /* hizmet-alan ilk */
.hizmetler-alan {
     width: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     margin: 0;
     padding: 0;
     top: 70vh;
     background: #2e2c2c;
 }
 
 .hizmetler-alan .hizmetler {
     width: 98%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 1vh 0;
     padding: 1vh 1vh;
 }
 
 .hizmetler h2 {
     width: 90%;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 0.5vh 1vh;
     color: #fff;
 }
 
 .hizmetler .hizmet {
     width: 98%;
     display: flex;
     align-items: center;
     justify-content: flex-start;
     margin: 1vh 0;
     padding: 1vh 1vh;
     overflow: hidden;
     position: relative;
 }
 
 .hizmet .hizmet-column {
     flex: 0 0 32%; /* 3 hizmet yan yana sığacak şekilde ayarlandı */
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 1vh 1vh;
     padding: 1vh 0.5vh;
     transition: transform 0.5s ease;
 }
 
 .hizmet-column img {
     width: 80%;
     margin: 1vh 1vh;
     border-radius: 8px;
 }
 .hizmet-column a{
     text-align: center;
     align-items: center;
     justify-content: center;
     text-decoration: none; 
     color: inherit; 
     display: inline-block;  
 }
 
 .hizmet-column h3 {
     width: 80%;
     text-align: center;
     color: #fff;
     font-size: 18px;
     font-family: Arial, Helvetica, sans-serif;
 }
 
 /* Yönlendirme butonları için stil */
 .navigation {
     display: flex;
     justify-content: center;
     gap: 20px;
     margin-top: 1px;
     padding: 0.5vh;
 }
 
 .navigation button {
     background: rgba(0, 0, 0, 0.5);
     align-items: center;
     border: none;
     color: white;
     padding: 1vh 1vh;
     cursor: pointer;
     border-radius: 5px;
     font-size: 14px;
 }
 
 .navigation button:hover {
     background: rgba(0, 0, 0, 0.8);
 }
 
 .navigation button:disabled {
     background: rgba(0, 0, 0, 0.2);
     cursor: not-allowed;
 }
 @media (max-width: 768px){
     .hizmetler-alan{
          width: 100%;
          display: flex;
          top: 0;
     }
     .hizmetler-alan .hizmetler{
          width: 95%;
     }
     .hizmetler .hizmet{
          width: 100%;
          display: flex;
          flex-direction: column;
     }
     .hizmet .hizmet-column{
          width: 96%;
          display: flex;
          flex-direction: column;
          margin: 1vh 0.5vh;
          padding: 1vh 0;
     }
     .hizmetler h2{
          font-size: 20px;

     }
 }
    /* hizmetler-alan son*/

/* blog-alan ilk */
.blog-alan {
     width: 100%;
     position: relative;
     display: flex;
     align-items: center;
     justify-content: center;
     top: 70vh;
     margin: 0;
     padding: 0;
     overflow: hidden; /* Taşan içeriği gizle */
 }
 
 .blog-alan .blog {
     width: 96%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 2vh 0;
     padding: 1vh 1vh;
 }
 
 .blog h2 {
     width: 90%;
     align-items: center;
     text-align: center;
     margin: 1vh;
     color: #2e2c2c;
 }
 
 .blog .blog-column {
     width: 98%;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin: 1vh 1vh;
 }
 
 .blog-column .column {
     width: 98%;
     display: flex;
     align-items: center;
     justify-content: space-around;
     margin: 1vh 1vh;
     padding: 0 1vh;
     opacity: 0; /* Başlangıçta görünmez */
     transition: opacity 1s ease; 
 }
 
 .blog-column .column.animate {
     opacity: 1; /* Görünür hale getir */
 }
 
 .column img {
     width: 100%;
     padding: 2vh 1vh;
     margin: 1vh 1vh 0 0;
     transform: translateX(-100%); 
     transition: transform 1s ease;
     border-radius: 20px;
 }
 
 .column.animate img {
     transform: translateX(0); 
 }
 
 .column .icerik {
     width: 90%;
     align-items: center;
     margin: 0 1vh;
     padding: 1vh 1vh;
     transform: translateX(100%); 
     transition: transform 1s ease;
 }
 
 .column.animate .icerik {
     transform: translateX(0); 
 }
 
 .icerik p {
     width: 80%;
     align-items: center;
     text-align: left;
     margin: 5vh 0;
     color: #878080;
 }
 
 .icerik h3 {
     width: 80%;
     text-decoration: none;
     align-items: center;
     text-align: left;
     border-bottom: none;
     padding: 1vh 1vh;
     margin: 1vh 0;
     font-size: 30px;
     color: #2e2c2c;
     }

     .blog .blog-container{
          width: 20%;
          display: flex;
          justify-content: center; 
          align-items: center;
          text-align: center;
          margin: 2vh 0 0 0 ;
     }
     .blog-container a {
          align-items: center;
          text-decoration: none;
          justify-content: center;
          text-align: center;
          margin: 1vh 0;
          padding: 1vh 1vh;
          border-radius: 6px;
          border: 1px solid #2e2c2c ;
          color: #000;
          width: 28vh; 
          transition: color 0.3s ease, transform 0.3s ease;

     }
    .blog-container a:hover {
          color: #fafafa; 
          transform: scale(1.05); 
          font-weight: bold;
          background: #2e2c2c;
     }

     @media (max-width: 768px){
     .blog-alan{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 2vh 2vh;
          top: 0;
          } 
     .blog-alan .blog{
          width: 96%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 1vh 1vh;
          }
      .blog h2{
          font-size: 20px;
      }   
     .blog .blog-column{
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          margin: 0;
          padding: 1vh 0;
          justify-content: center;

     } 
     .blog-column .column{
          width: 96%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          margin: 3vh 0;
          padding: 1vh 1vh;

     }
     .column img{
          width: 100%;
          align-items: center;
          justify-content: center;
          margin:0;
          padding: 1vh 2vh;
          border-radius: 8px;
      
     }
     .column .icerik{
          width: 100%;
          margin: 0;
          padding: 0;
          align-items: center;
          justify-content: center;
     }
     .icerik p{
          width: 95%;
          align-items: center;
          justify-content: center;
          margin: 1vh 1vh;
          padding: 1vh 1vh;
     }
     .icerik h3{
          width: 95%;
          align-items: center;
          justify-content: center;
          margin: 1vh 1vh;
          font-size: 24px;
     }
     .blog .blog-container{
          width: 70%;
          align-items: center;
          justify-content: center;
          margin: 2vh 0;
     }
     }

    /* blog-alan son */


 /* Referanslar Alanı */
.referans-alan {
     width: 100%;
     display: flex;
     position: relative;
     justify-content: center;
     top: 70vh;
     margin: 0;
     padding: 2vh 0;
     background: #fff;
     text-align: center;
 }
 
 .referanslar {
     width: 96%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 0 auto;
     padding: 1vh 0;
 }
 
 .referanslar h3 {
     width: 96%;
     font-size: 24px;
     margin: 5vh 0 3vh 5vh ;
     text-align: left;
     color: #2e2c2c;
 }
 
 /* Karosel Yapısı */
 .karosel {
     width: 98%;
     position: relative;
     overflow: hidden;
     padding: 0.5 1vh;
 }
 
 .gorseller {
     display: flex;
     transition: transform 0.5s ease;
     margin: 1vh 1vh;
     padding: 0;
 }
 
 .kategori {
     min-width: 100%;
     display: flex;
     justify-content: space-around;
     box-sizing: border-box;
     padding: 10px;
 }
 
/* Görsellere Tıklanabilirlik Eklemek için */
.kategori a {
     display: block;
     width: 23%; 
     text-decoration: none; 
 }
 
 .kategori img {
     width: 100%; 
     height: auto;
     border-radius: 10px;
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     transition: transform 0.3s ease; 
    
 }
 
 .kategori img:hover {
     transform: scale(1.05); 
 }
 
/* Yönlendirme Okları */
.karosel-oklar {
     display: flex;
     justify-content: center;
     gap: 20px; 
     margin: 2vh 0 1vh 0; 
 }
 .karosel-ok {
     background: rgba(0, 0, 0, 0.5);
     align-items: center;
     border: none;
     color: #000;
     padding: 1vh 1vh;
     cursor: pointer;
     border-radius: 5px;
     font-size: 14px;
 }
 .karosel-ok:hover {
     background: rgba(0, 0, 0, 0.8);
     color: #fff;
 }
 
 .karosel-ok:disabled {
     background: rgba(0, 0, 0, 0.2);
     cursor: not-allowed;
 }
/* Mobil uyumluluk */
@media screen and (max-width: 768px) {
     .referans-alan {
         top: 0; /* Mobilde daha iyi görünüm için yukarı çekildi */
         padding: 5vh 0;
     }
     .referanslar h3 {
          text-align: center;
          margin: 2vh 0 2vh 0;
     }
 
     .karosel {
         width: 100%;
         padding: 0;
     }
 
     .gorseller {
         margin: 0;
         display: flex;
         transition: transform 0.5s ease-in-out;
     }
 
     .kategori {
         flex-direction: column; /* Mobilde dikey hizalama */
         align-items: center;
         justify-content: center;
         gap: 15px;
     }
 
     .kategori a {
         width: 90%; /* Mobilde görseller tam ekranı kaplamasın */
     }
 
     .kategori img {
         width: 90%;
         max-width: 300px; /* Mobilde aşırı büyük olmasını önler */
         height: auto;

     }
 
     /* Yönlendirme butonları */
     .karosel-oklar {
         position: absolute;
         width: 100%;
         top: 50%;
         display: flex;
         justify-content: space-between;
         transform: translateY(-50%);
     }
 
     .karosel-ok {
         background: rgba(0, 0, 0, 0.6);
         color: #fff;
         font-size: 14px;
         padding: 8px 12px;
         border-radius: 8px;
     }
 
     .karosel-ok:hover {
         background: rgba(0, 0, 0, 0.8);
     }
 }
 
 
 

   /* footer-alan ilk */
   .footer-alan{
     position: relative;
     width: 100%;
     top: 70vh;
     height: auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: column;
     margin:0;
     padding: 0;
     background: #14213D;
  
   }
   .footer-alan .footer{
     width: 96%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     margin: 2vh 0;    
   }
    .footer .ilk-alan{
     width: 100%;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin: 2vh 0;
     padding: 1vh 1vh;
     border-bottom: 1px solid #fff;
    }
     

   .footer a.icon{
     width: 55px;
     height: 55px;
     font-size: 28px;
     color: #fff;
     padding: 1vh;
     align-items: center;
     justify-content: center;
     text-align: center;
     border-radius: 100%;
     border: 1px solid #fff;
     margin: 2vh 0;
    }
   

   .footer .konum{
     width: 23%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
     
   }
   .footer .harita {
     width: 23%;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 3vh;
     padding: 1vh 1vh;
 }
 
 .harita iframe {
     width: 100%; /* Haritanın genişliği tam olarak kaplar */
     height: 300px; /* Haritanın yüksekliği */
     border: none; /* Kenarlık kaldırılır */
     border-radius: 10px; /* Köşeleri yuvarlak yapar */
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Hafif gölge efekti */
 }
   .footer h3{
     width: 90%;
    font-size: 22px;
     margin: 1vh 0;
     padding: 1vh ;
     align-items: center;
     text-align: center;
   }
   .konum a.link{
     width: 90%;
     margin: 1vh 0;
     padding: 1vh ;
     align-items: center;
     text-align: center;
     text-decoration: none;
     color: #fff;
     font-size: 14px;
     transition: color 0.3s ease, transform 0.3s ease;

   }
   .konum a:hover {
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
 }
   
   .footer .iletisim{
     width: 23%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
   }
   .iletisim .mail{
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     border-bottom: 1px solid #fff; 
   }
   .mail a.link{
     width: 90%;
     margin: 1vh 0;
     padding: 1vh ;
     align-items: center;
     text-align: center;
     text-decoration: none;
     color: #fff;
     font-size: 14px;
     transition: color 0.3s ease, transform 0.3s ease;

   }
   .mail a:hover {
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
 }

   .iletisim .telefon{
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     text-align: center;
     margin: 1vh 1vh;
   }

   .telefon a.link{
     width: 90%;
     margin: 1vh 0;
     padding: 1vh ;
     align-items: center;
     text-align: center;
     text-decoration: none;
     color: #fff;
     font-size: 14px;
     transition: color 0.3s ease, transform 0.3s ease;
   }
   .telefon a:hover {
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
 }
   .sosyal p{
     width: 90%;
     margin: 1vh 0;
     padding: 1vh ;
     align-items: center;
     text-align: center;
     text-decoration: none;
     color: #fff;
     font-size: 16px;
   }
   .footer .sosyal{
     width: 23%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
   }
   .sosyal .social-icons{
     width: 90%;
     margin: 1vh 1vh;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding: 1vh 1vh;
 
   }
   .social-icons a{
     width: 95%;
     font-size: 32px;
     padding: 0 1.5vh;
     color: #fff;
     transition: color 0.3s ease, transform 0.3s ease;
   }

   .footer .son-alan{
     width: 90%;
     display: flex;
     align-items: flex-start;
     justify-content: space-between;
     margin: 2vh 0;
     padding: 1vh 1vh;
   }
   .son-alan .menu{
     width: 30%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
   }
   .son-alan .hizmetler{
     width: 30%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
   }
   .son-alan .diger{
     width: 30%;
     display: flex;
     flex-direction: column;
     align-items: center;
     padding: 1vh 1vh;
   }
   .son-alan h3{
     text-align: left;
     margin: 1vh 1vh;
   }
   .son-alan a{
     width: 90%;
     text-decoration: none;
     margin: 1vh 1vh;
     padding: 0.5vh 1vh;
     align-items: center;
     color: #fff ;
     transition: color 0.3s ease, transform 0.3s ease;
   }
   .son-alan a:hover {
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
   }
     .skydo {
     width: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 3.5vh 0;
     bottom: 0;
     color:  #fff; 
     font-size: 14px; 
   }
   
   .skydo p {
     width: 80%;
     margin: 0;
     line-height: 1.5;
   }
   
   .skydo a {
     width: 100%;
     text-decoration: none;
     color: #fff ;
     transition: color 0.3s ease, transform 0.3s ease;
   }
   
   .skydo a:hover {
     color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
   }
 
 @media (max-width: 768px){
     .footer-alan{
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0;
          padding: 0;
          top: 0;
     }
     .footer-alan .footer{
          width: 95%;
          display: flex;
          flex-direction: column;
         padding: 0.5vh 0;
     }
     .footer .ilk-alan{
          width: 95%;
          display: flex;
          flex-direction: column;
          text-align: center;
          margin: 0;
          padding: 0;
          border-bottom: none;
     }
          .ilk-alan .konum{
          width: 96%;
          align-items: center;
          justify-content: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin: 1vh 1vh;
          }
          .ilk-alan .harita{
               width: 96%;
               align-items: center;
               justify-content: center;
               text-align: center;
               display: flex;
               flex-direction: column;
               margin: 1vh 1vh;
          }

     .ilk-alan .iletisim{
          width: 96%;
          align-items: center;
          justify-content: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin: 1vh 1vh;
         }
         .ilk-alan .sosyal{
          width: 96%;
          align-items: center;
          justify-content: center;
          text-align: center;
          display: flex;
          flex-direction: column;
          margin: 1vh 1vh;
         }
     .footer a.icon{
          width: 45px;
          height: 45px;
          font-size: 22px;
          color: #fff;
          padding: 1vh;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-radius: 100%;
          border: 1px solid #fff;
    
         }

         .konum .telefon .sosyal a.link{
          width: 90%;
          margin:0;
          padding: 1vh ;
          align-items: center;
          text-align: center;
          text-decoration: none;
          color: #fff;
          font-size: 14px;
        }
        .footer h3{
          width: 100%;
          font-size: 20px;
          margin: 0;
          padding: 0.5vh 0;
        }

        .sosyal .social-icons{
          width: 95%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin: 1vh 0 0 0 ;
          padding: 0;
        }
        .social-icons a{
          width: 100%;
          font-size: 28px;
          padding: 0 1vh;
          color: #fff;
        }
        .footer .son-alan{
           width: 95%;
           display: flex;
           flex-direction: column;
           text-align: center;
           justify-content: center;
           text-align: center;
           margin: 1vh 0;
           padding: 0;
          
        }
        .son-alan h3{
          width: 90%;
          text-align: left;
          margin: 1vh 1vh;
          padding: 0.5vh 0.5vh ;
        }

        .son-alan a{
          width: 96%;
          margin: 1vh 1vh;
          padding: 0.5vh 2vh ;
        }
        .son-alan .menu{
          width: 90%;
          display: flex;
          align-items: center;
          text-align: left;
          margin: 1vh 1vh;
          padding: 0.5vh 2vh ;
        }
        .son-alan .hizmetler{
          width: 90%;
          display: flex;
          align-items: center;
          text-align: left;
          margin: 1vh 1vh;
          padding: 0.5vh 2vh ;
        }
        .son-alan .diger{
          width: 90%;
          display: flex;
          align-items: center;
          text-align: left;
          margin: 1vh 1vh;
          padding: 0.5vh 2vh ;
        }
        .sosyal p{
          margin-top: 3vh;
        }

 }


 /* sosyal icon hover  ilk */
   .fa-instagram {
     color: #fff;
     transition: color 0.3s ease; 
 }
 
 .fa-instagram:hover {
     background: linear-gradient(45deg, #f9ce34, #ee2a7b, #6228d7);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
 }
 .fa-facebook {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 
 .fa-facebook:hover {
     background: linear-gradient(45deg, #1877F2, #0A58CA);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
 }

 .fa-youtube {
     color: #fff; 
     transition: color 0.3s ease, transform 0.3s ease; 
 }
 
 
.fa-youtube:hover {
     background: linear-gradient(45deg, #FF0000, #CC0000);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
 }
 
 .fa-tiktok {
     color: #fff; 
     transition: color 0.3s ease, transform 0.3s ease; 
 }
 
 .fa-tiktok:hover {
     background: linear-gradient(45deg, #69C9D0, #EE1D52);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
}
 .fa-x-twitter {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 
 .fa-x-twitter:hover {
     color: #878080; 
     transform: scale(1.05); 
     font-weight: bold;
 }
  /* sosyal icon hover  son */

 /* icon hover ilk */
.fa-globe {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 
 
.fa-globe:hover {
     background: linear-gradient(45deg, #1E90FF, #00BFFF);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
 }
 .fa-location-dot {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 .fa-location-dot:hover {
     background: linear-gradient(45deg, #FF5733, #FF8D1A);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     transform: scale(1.05);
     font-weight: bold;
 }
 

 .fa-envelope {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 
 .fa-envelope:hover {
     color: #d44638; 
 }
 .fa-phone {
     color: #fff; 
     transition: color 0.3s ease; 
 }
 
 .fa-phone:hover {
     color: #25d366; 
 }
 /* icon hover son */
/* footer-alan son */