/* Okları kaldırdığınız için ekstra bir CSS gerekmiyor. 
           Ancak isterseniz indicator noktalarını özelleştirebilirsiniz. */
           .carousel-indicators [data-bs-target] {
            width: 10px;
            height: 10px;
            border-radius: 50%;
          }
          .carousel-control-prev{
              position: absolute;
      top: 50%; /* Orta hizalama */
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arkaplan */
      border-radius: 50%; /* Yuvarlak butonlar */
      z-index: 10; /* Kartların altında kalmaması için */
  }
  .carousel-control-next {
      position: absolute;
      top: 50%; /* Orta hizalama */
      transform: translateY(-50%);
      width: 40px;
      height: 40px;
      background-color: rgba(0, 0, 0, 0.5); /* Yarı saydam arkaplan */
      border-radius: 50%; /* Yuvarlak butonlar */
      z-index: 10; /* Kartların altında kalmaması için */
  }
  
  /* Sol oka daha dışa taşıyoruz */
  .carousel-control-prev {
      left: -4% !important; /* Kartların dışına */
  }
  
  /* Sağ oka daha dışa taşıyoruz */
  .carousel-control-next {
      right: -4%; /* Kartların dışına */
  }
  
  /* Hover durumda biraz daha belirginlik */
  .carousel-control-prev:hover,
  .carousel-control-next:hover {
      background-color: rgba(0, 0, 0, 0.8);
  }
  .video-thumbnail {
              position: relative;
              cursor: pointer;
          }
  
          .video-thumbnail img {
              border-radius: 8px;
          }
  
          .play-icon {
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              font-size: 3rem;
              color: rgba(255, 255, 255, 0.8);
              z-index: 10;
          }
  
          .play-icon:hover {
              color: white;
          }