<style>
    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: sans-serif;
    }

    .slider {
      position: relative;
      width: 100%;
      max-width: 1000px;
      margin: auto;
      overflow: hidden;
      aspect-ratio: 1000 / 150;
    }

    .slides {
      display: flex;
      transition: transform 0.5s ease-in-out;
    }

    .slides img {
      width: 100%;
      flex-shrink: 0;
      object-fit: cover;
    }

    /* Butonlar */
    .nav-btn {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      background: rgba(0, 0, 0, 0.4);
      border: none;
      color: white;
      font-size: 30px;
      padding: 5px 10px;
      cursor: pointer;
      z-index: 2;
      transition: background 0.3s;
    }

    .nav-btn:hover {
      background: rgba(0, 0, 0, 0.6);
    }

    .prev {
      left: 10px;
    }

    .next {
      right: 10px;
    }

    /* Dot navigasyon */
    .dots {
      position: absolute;
      bottom: 10px;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      gap: 8px;
      z-index: 2;
    }

    .dot {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.6);
      cursor: pointer;
      transition: background 0.3s;
    }

    .dot.active {
      background: rgba(255, 255, 255, 1);
    }
	.slides a {
  display: block;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
}

.slides a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

    @media (max-width: 768px) {
      .nav-btn {
        font-size: 24px;
      }
      .dot {
        width: 10px;
        height: 10px;
      }
    }
  </style>


