/* ========================================
   TEXT MARQUEE (REFERANSLARIMIZ)
   ======================================== */

.references-section {
  padding-bottom: 0;
}

.marquee-container {
  background-color: #ffffff !important;
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15) inset, 0 10px 20px rgba(0,0,0,0.2) !important;
  padding: 35px 0 !important;
  margin-top: 50px;
}

/* Update fade masks to match the white background */
.marquee-container::before {
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%) !important;
}

.marquee-container::after {
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%) !important;
}

.text-marquee {
  gap: 0 !important;
  animation: scrollTextMarquee 60s linear infinite !important;
}

.reference-text {
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  color: #0a0a1a;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  padding: 0 50px;
  position: relative;
  display: flex;
  align-items: center;
  transition: color 0.3s ease, transform 0.3s ease;
  cursor: default;
}

.reference-text:hover {
  color: #f4a01c;
  transform: scale(1.05);
}

.reference-text::after {
  content: '';
  position: absolute;
  right: -4px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  background-color: #f4a01c;
  border-radius: 50%;
  box-shadow: 0 0 12px rgba(244, 160, 28, 0.8);
}

@keyframes scrollTextMarquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
  .marquee-container {
    padding: 25px 0 !important;
    margin-top: 30px;
  }
  .text-marquee {
      animation: scrollTextMarquee 80s linear infinite !important;
  }
  .reference-text {
    font-size: 1.1rem;
    padding: 0 30px;
  }
  .reference-text::after {
    width: 6px;
    height: 6px;
    right: -3px;
  }
}