body {
      font-family: Arial, sans-serif;
      margin: 0;
      padding: 0;
      color: #333;
    }
    
    header {
      background-color: #6f94b8; /* Mavi header */
      color: white;
      padding: 1em;
      text-align: center;
    }
    
    nav {
      text-align: center;
      margin: 1em 0;
    }
    
    nav a {
      color: #007bff;
      margin: 0 1em;
      text-decoration: none;
    }

    /* Ana İçerik */
    .content {
      padding: 1em;
    }

    .service {
      display: flex;
      flex-wrap: wrap;
      gap: 1em;
    }

    .service-item {
      flex: 1 1 calc(33.333% - 1em);
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
      padding: 1em;
      background-color: #f9f9f9;
      border-radius: 5px;
    }

    /* Mobil Uyumluluk */
    @media (max-width: 768px) {
      .service-item {
        flex: 1 1 100%;
      }
    }

    footer {
      background-color: #007bff;
      color: white;
      text-align: center;
      padding: 1em;
      margin-top: 2em;
    }
    .sosyal-medya {
        display: flex; /* Simge kutularını yan yana dizmek için */
        justify-content: center; /* Ortalamak için */
        margin-top: 20px; /* Üstten boşluk */
    }
    .sosyal-medya img {
        width: 50px; /* Simge genişliği */
        height: 50px; /* Simge yüksekliği */
        margin: 0 10px; /* Simgeler arasında boşluk */
        cursor: pointer; /* Üzerine gelindiğinde imleci değiştir */
    }
    .slider {
        position: relative;
        max-width: 100%;
        height: 500px;
        overflow: hidden;
      }
  
      .slides {
        display: flex;
        transition: transform 0.5s ease-in-out;
      }
  
      .slide {
        min-width: 100%;
        height: 500px;
        background-size: cover;
        background-position: center;
      }
  
      /* Kaydırıcıda Gezinme Okları */
      .prev, .next {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        background-color: rgba(0, 0, 0, 0.5);
        color: white;
        padding: 10px;
        cursor: pointer;
      }
  
      .prev { left: 10px; }
      .next { right: 10px; }
  
      /* Alttaki Noktalar */
      .dots {
        text-align: center;
        position: absolute;
        bottom: 15px;
        width: 100%;
      }
  
      .dot {
        display: inline-block;
        width: 10px;
        height: 10px;
        margin: 5px;
        background-color: #bbb;
        border-radius: 50%;
        cursor: pointer;
      }
  
      .active { background-color: #717171; }
      .buton {
        display: inline-block; /* Butonların yan yana görünmesi için */
        padding: 10px 100px; /* İç boşluk */
        margin: 10px; /* Dış boşluk */
        background-color: rgb(255, 255, 255); /* Arka plan rengi */
        
        color: black; /* Yazı rengi */
        text-align: center; /* Yazıyı ortala */
        text-decoration: none; /* Altını çizgi kaldır */
        border-radius: 10px; /* Kenar yuvarlama */
        border: 2px solid blue; /* Kenar rengi */
        transition: background-color 0.3s, transform 0.3s; /* Geçiş efekti */
        cursor: pointer; /* Tıklama işareti */
    }

    .buton:hover {
        background-color: deepskyblue; /* Üzerine gelindiğinde arka plan rengi değişimi */
        transform: scale(1.1); /* Üzerine gelindiğinde büyütme efekti */
    }