* {
     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;
     background-color: #fff;
 
 }


 .navbar {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 100%;
     margin: 0 auto;
     background: #14213D;
     padding: 5vh 0;
     position: fixed;
     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 */

  /*hizmet-giriş ilk*/
  .yazilar-giris {
     width: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
     background:  linear-gradient(rgb(0, 0, 0, 0.5),rgba(0, 0, 0, 0.5) ), url(/images/anasayfa1.png); 
     background-size: cover;
     background-position: center;
     background-repeat: no-repeat;
   }
   
   .yazilar {
     width: 90%;
     display: flex;
     align-items:  center;
     justify-content: center;
     flex-direction: column;
     padding: 20vh 2vh ;
   }
   
   .yazilar h2 {
     text-align: center;
     align-items: end;
     font-size: 30px;
     width: 80%;
     color: #fff;
     padding: 1vh 2vh;
  
 
   }
   .yazilar .breadcrumb{
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin: 1vh 0;
     padding: 1vh 1vh;
   }
 
  .breadcrumb a{
   text-decoration: none;
   color: white;
   margin: 0 0.5vh;
 }
 
  .breadcrumb a:hover{
   color: #fafafa; 
     transform: scale(1.05); 
     font-weight: bold;
   transition: color ease 0.3;
  }
  a.b-on{
   border-bottom:1px dotted #878080;
  }
   @media (max-width: 768px) {
     .yazilar {
       width: 95%;
       text-align: center;
     }
   
     .yazilar h2 {
       font-size: 28px;
       text-align: center;
       margin-bottom: 3vh;
   
     }
 
   }
   /* hizmet-giriş son*/

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

    }
    .blog-column h3{
     display: flex;
     align-items: center;
     text-align: left;
     margin: 2vh 0; 
     padding: 1vh 1vh;
     font-size: 30px;
    }
    .blog-column p{
     display: flex;
     align-items: center;
     text-align: left;
     padding: 1vh 1vh;
    }
    .blog-column h4{
     font-size: 20px;
      padding: 0.5vh 1vh;
      margin: 3vh 0 0 0;
    }
    .blog-column .aciklama-column{
     width: 100%;
     display: flex;
     align-items: start;
     justify-content: space-around;
     margin: 5vh 0 ;
    }
    .aciklama-column img{
     width: 30%;
    }
    .aciklama-column .paragraf{
     width: 68%;
     margin: 0;
     padding: 1vh 1vh;
    }
    .paragraf h4{
     margin: 0;
     padding: 0 1vh;
    }
    .paragraf p{
     margin: 1vh 0 ;
     display: flex;
     align-items: center;
     text-align: left;
     padding: 1vh 1vh;
    }

    .blog-column .blog-container{
     width: 100%;
     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){
     .blogyazilar-alan {
          width: 100%;
          display: flex;
          margin: 0;
          padding: 0;
     }
     .blogyazilar-alan .blogyazilar{
          width: 90%;
          margin: 3vh 0;
          padding: 0;
     }
     .blogyazilar .blog-column{
          width: 90%;
          margin: 2vh 0;
     }
     .blog-column h3{
          align-items: center;
          text-align: left;
          font-size: 24px;
          padding: 0 2vh;

     }
     .blog-column p{
          padding: 0.5vh 2vh;
          margin: 1vh 0;
     }
     .blog-column h4{
     padding: 0.5vh 2vh;
     margin: 3vh 0 0 0;
     }
     
     .blog-column .aciklama-column{
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 3vh 0;
        padding: 0;
        justify-content: center;
     }
     .aciklama-column img{
          width: 90%;
          align-items: center;
          justify-content: center;
          text-align: center;
          margin: 1vh 2vh 1vh 2vh;
          padding: 1vh 1vh;
         }
         .aciklama-column .paragraf{
          width: 100%;
          margin:1vh  0;
          padding: 1vh 1vh;
         }
         .paragraf p{
          margin: 2vh 0 ;
          display: flex;
          align-items: center;
         }
         .blog-column  .blog-container{
          width: 100%;
          align-items: center;
          justify-content: center;
          margin: 4vh 0 1vh 0;
     }

    }

    /* footer-alan ilk */
    .footer-alan{
     width: 100%;
     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;
     color: #fff;
   }
   .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 */