/* =============================================
   HERYERPARKOUR — Cross Banners
   Çapraz kayan şeritler, bej→koyu geçiş
   ============================================= */

.cross-banners {
  position: relative;
  height: 340px;
  z-index: 5;
  overflow: hidden;
  background: linear-gradient(180deg,
    var(--bg-primary) 0%,
    #c8c0b0 8%,
    #1a1610 28%,
    #121210 50%,
    var(--bg-dark) 72%,
    var(--bg-dark) 100%
  );
}

.cross-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 50% 120% at 30% 60%, rgba(255, 77, 0, 0.08) 0%, transparent 60%),
    radial-gradient(ellipse 50% 120% at 70% 40%, rgba(0, 229, 255, 0.05) 0%, transparent 60%);
}

.cross-strip {
  position: absolute;
  left: -30%;
  right: -30%;
  overflow: hidden;
  white-space: nowrap;
}

/* Strip 1 — turuncu, sola eğik */
.strip-1 {
  top: 50%;
  transform: translateY(-80%) rotate(-7deg);
  background: var(--accent);
  padding: 22px 0;
  z-index: 3;
  box-shadow: 0 6px 40px rgba(255, 77, 0, 0.35);
}

/* Strip 2 — yarı-saydam, sağa eğik */
.strip-2 {
  top: 50%;
  transform: translateY(10%) rotate(5deg);
  background: rgba(255, 255, 255, 0.04);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  padding: 20px 0;
  z-index: 2;
  backdrop-filter: blur(4px);
}

.cross-track {
  display: flex;
  gap: 36px;
  width: max-content;
}

.track-right { animation: scrollRight 35s linear infinite; }
.track-left { animation: scrollLeft 40s linear infinite; }

.cross-item {
  font-family: var(--ff-display);
  font-size: 22px;
  text-transform: uppercase;
  letter-spacing: 4px;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
}

/* Strip 1 stilleri */
.strip-1 .cross-item { color: white; }

.strip-1 .ci-accent {
  color: var(--bg-dark);
  background: white;
  padding: 3px 18px;
  margin: 0 4px;
  clip-path: var(--clip-btn);
  font-size: 20px;
}

.strip-1 .ci-star {
  color: var(--yellow);
  font-size: 18px;
}

/* Strip 2 stilleri */
.strip-2 .cross-item { color: rgba(255, 255, 255, 0.3); }
.strip-2 .ci-accent { color: rgba(255, 255, 255, 0.65); font-weight: 900; }
.strip-2 .ci-star { color: var(--accent); font-size: 18px; opacity: 0.4; }

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .cross-banners { height: 260px; }
  .cross-item { font-size: 16px !important; letter-spacing: 2px; }
  .strip-1 .ci-accent { font-size: 14px; }
  .strip-1 { padding: 16px 0; }
  .strip-2 { padding: 14px 0; }
}