/* ----- RB Logos (rb- prefix çakışmayı önler) ----- */
.rb-logos {
    --rb-gap: 32px;
    --rb-max-h: 80px;      /* desktop */
    --rb-max-h-md: 68px;   /* tablet */
    --rb-max-h-sm: 56px;   /* mobile */
  }

  .rb-logos {
    padding: 75px 140px !important;
      }

  @media screen and (max-width: 1600px) {
    .rb-logos {
        padding: 50px 30px 50px 30px !important;
    }
}



  @media screen and (max-width: 780px) {
    .rb-logos {
        padding: 20px !important;
    }

    .divider {
      width: 100%;
      height: 1px;
      background-color: transparent;
      background-image: linear-gradient(90deg, rgba(206, 211, 246, 0) 0, #c1c1c1 21%, #bbb 81%, rgba(206, 211, 246, 0) 99%);
      opacity: .4;
      border: none;
      margin: 0;
      color: #6c757d;
      margin-top: 0px !important;
    }
  }

  .divider {
    width: 100%;
    height: 1px;
    background-color: transparent;
    background-image: linear-gradient(90deg, rgba(206, 211, 246, 0) 0, #c1c1c1 21%, #bbb 81%, rgba(206, 211, 246, 0) 99%);
    opacity: .4;
    border: none;
    margin: 0;
    color: #6c757d;
    margin-top: 40px;
  }

 
  
  .rb-logos__splide { padding: 24px 8px; }
  
  .rb-logos__slide {
    display: grid;
    place-items: center;
    height: auto; /* hizalama alanı */
  }
  
  .rb-logos__img {
    max-width: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Varsayılan: siyah görünüm */
    filter: grayscale(1) brightness(0) contrast(1);
    opacity: 0.9;
    transition: filter 300ms ease, opacity 300ms ease, transform 300ms ease;
    
  }
  .rb-logos__img:hover { filter: none; opacity: 1; }
  
  @media (max-width: 1024px) { .rb-logos__img { max-height: var(--rb-max-h-md); } }
  @media (max-width: 640px)  { .rb-logos__img { max-height: var(--rb-max-h-sm); } }
  
  /* Reduced motion: istenirse animasyonu durduracağız (JS’de AutoScroll pause/play) */
  @media (prefers-reduced-motion: reduce) {
    .rb-logos__img { transition: none; }
  }
  

  /* ==== Hover'da renge dönüşü YAVAŞ ve YUMUŞAK yap ==== */
.rb-logos {
    /* süreyi burada kontrol et: 900ms–1200ms aralığı keyifli */
    --rb-color-fade: 600ms;
    /* yumuşak easing: ease-out benzeri */
    --rb-color-ease: cubic-bezier(.22, .61, .36, 1);
  }
  
  /* varsayılanı tam siyah yerine çok koyu gri yaparsak geçiş daha doğal görünür */
  .rb-logos__img {
    filter: grayscale(1) brightness(1) contrast(1);
    opacity: 0.9;
    transition:
      filter var(--rb-color-fade) var(--rb-color-ease),
      opacity var(--rb-color-fade) var(--rb-color-ease);
    will-change: filter, opacity;
    backface-visibility: hidden; /* Safari/Chrome'da pürüzsüzleştirir */
  }
  
  /* hover'da renkli hale YAVAŞÇA dönsün */
  .rb-logos__img:hover {
    filter: none;
    opacity: 1;
  }
  
  /* (İsteğe bağlı) Hover-dan çıkarken daha hızlı toparlasın istiyorsan: */
  .rb-logos__img:hover {
    transition-duration: var(--rb-color-fade);          /* hover'a giriş */
  }
  .rb-logos__img:not(:hover) {
    transition-duration: 450ms;                         /* hover'dan çıkış daha hızlı */
  }

  /* Splide iç layout'unu rb-logos scope'unda sabitle */
  .rb-logos .splide__track {
    position: relative;
    overflow: hidden;            /* taşmaları kes */
  }

  .rb-logos .splide__list {
    display: flex !important;    /* bazı temalar flex'i bozabiliyor */
    flex-wrap: nowrap !important;/* wrap olursa slaytlar alta taşar/üst üste biner */
    align-items: center;
    margin: 0;
    padding: 0;
  }

  .rb-logos .splide__slide {
    flex: 0 0 auto;              /* shrink yok, Splide’ın width hesabı korunur */
    box-sizing: border-box;
  }

  @media (max-width: 1024px) {
    .rb-logos__slide { height: auto; }
  }
  @media (max-width: 640px) {
    .rb-logos__slide { height: auto; }
  }

  @media (max-width: 640px) {
    .rb-logos__img { max-height: var(--rb-max-h-sm); }  /* zaten tanımlı: 56px */
  }