/* =========================================================
   ÖZDEN EROĞLU TİCARET
   MARKALAR - KAMYON KONVOYU
   ========================================================= */

.ero-brands {
  position: relative;
  overflow: hidden;

  padding-top: clamp(75px, 8vw, 115px);

  background: #f7efe7;

  color: #2f1a17;
}


/* =========================================================
   BAŞLIK
   ========================================================= */

.ero-brands__heading {
  position: relative;
  z-index: 2;

  text-align: center;

  margin-bottom: clamp(30px, 4vw, 55px);
}

.ero-brands__eyebrow {
  margin: 0 0 12px;

  color: #c3381c;

  font-size: 12px;
  font-weight: 900;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.ero-brands__title {
  margin: 0;

  color: #c5162e;

  font-family:
    "Archivo Black",
    "Arial Black",
    sans-serif;

  font-size: clamp(29px, 3vw, 42px);

  font-weight: 400;

  line-height: 1;
  letter-spacing: -.04em;
}

.ero-brands__description {
  max-width: 590px;

  margin: 17px auto 0;

  color: #715b4f;

  font-size: 16px;
  line-height: 1.65;
}


/* =========================================================
   YOL / HAREKET ALANI
   ========================================================= */

.ero-brands__road {
  position: relative;

  overflow: hidden;

  width: 100%;

  padding-top: 30px;
  padding-bottom: 38px;
}


/* Yol zemini */

.ero-brands__road::before {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 24px;

  height: 2px;

  background:
    rgba(58, 40, 31, .14);

  pointer-events: none;
}


/* Kesikli yol çizgisi */

.ero-brands__road::after {
  content: "";

  position: absolute;

  left: 0;
  right: 0;

  bottom: 16px;

  height: 2px;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(195, 56, 28, .35) 0,
      rgba(195, 56, 28, .35) 34px,
      transparent 34px,
      transparent 62px
    );

  pointer-events: none;
}


/* =========================================================
   SONSUZ TRACK
   ========================================================= */

.ero-brands__track {
  display: flex;

  width: max-content;

  will-change: transform;

  animation:
    eroTruckConvoy
    56s
    linear
    infinite;

  /*
   Hover kesinlikle durdurmaz.
   */
  animation-play-state: running !important;
}


/* Aynı iki filo */

.ero-brands__fleet {
  display: flex;
  align-items: flex-end;

  flex: 0 0 auto;

  gap: clamp(25px, 3vw, 48px);

  padding-right: clamp(25px, 3vw, 48px);
}


/* =========================================================
   TEK KAMYON
   ========================================================= */

.ero-brand-truck {
  position: relative;

  flex: 0 0 auto;

  width:
    clamp(
      420px,
      37vw,
      610px
    );

  aspect-ratio: 16 / 9;

  transform: translateZ(0);
}


/* Kamyon */

.ero-brand-truck__vehicle {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;

  user-select: none;

  pointer-events: none;
}


/* =========================================================
   KAMYON KASA LOGO ALANI
   ========================================================= */

/*
   Kamyon sola bakıyor.

   Kasa yaklaşık:
   sol %28 → sağ %96
   üst %12 → alt %67

   Logo bu alanın merkezinde.
*/

.ero-brand-truck__panel {
  position: absolute;

  z-index: 2;

  left: 43%;
  top: 27%;

  width: 37%;
  height: 27%;

  display: flex;
  align-items: center;
  justify-content: center;

  transform:
    translate(
      -50%,
      -50%
    );

  pointer-events: none;
}


/* Marka logosu */

.ero-brand-truck__logo {
  display: block;

  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  object-position: center;

  filter:
    drop-shadow(
      0
      2px
      2px
      rgba(0,0,0,.05)
    );
}


/* =========================================================
   SONSUZ HAREKET
   ========================================================= */

@keyframes eroTruckConvoy {

  from {
    transform:
      translate3d(
        0,
        0,
        0
      );
  }

  to {
    transform:
      translate3d(
        -50%,
        0,
        0
      );
  }

}


/* =========================================================
   HAFİF DOĞAL HAREKET
   ========================================================= */

.ero-brand-truck:nth-child(3n + 1) {
  transform:
    translateY(0);
}

.ero-brand-truck:nth-child(3n + 2) {
  transform:
    translateY(2px);
}

.ero-brand-truck:nth-child(3n + 3) {
  transform:
    translateY(-1px);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1024px) {

  .ero-brand-truck {
    width:
      clamp(
        360px,
        52vw,
        500px
      );
  }

  .ero-brands__track {
    animation-duration: 50s;
  }

}


/* =========================================================
   MOBİL
   ========================================================= */

@media (max-width: 600px) {

  .ero-brands {
    padding-top: 65px;
  }

  .ero-brands__heading {
    margin-bottom: 22px;
  }

  .ero-brands__title {
    font-size: 30px;
  }

  .ero-brands__description {
    max-width: 320px;

    font-size: 14px;
  }

  .ero-brands__road {
    padding-top: 18px;
    padding-bottom: 26px;
  }

  .ero-brand-truck {
    width: 310px;
  }

  .ero-brands__fleet {
    gap: 16px;
    padding-right: 16px;
  }

  .ero-brands__track {
    animation-duration: 44s;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .ero-brands__track {
    animation: none;
  }

  .ero-brands__road {
    overflow-x: auto;
  }

}

/* =========================================================
   KAMYON KASA LOGO HİZASI
   ========================================================= */

.ero-brand-truck__panel {
  left: 61.5% !important;
  top: 35% !important;

  width: 45% !important;
  height: 30% !important;

  transform: translate(-50%, -50%) !important;

  display: flex;
  align-items: center;
  justify-content: center;
}

.ero-brand-truck__logo {
  width: 100%;
  height: 100%;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;
  object-position: center;
}

/* =========================================================
   KAMYON YOL HİZASI
   ========================================================= */

/* Ana yol çizgisini tekerlek seviyesine çıkar */
.ero-brands__road::before {
  bottom: 66px !important;
}

/* Kesikli yol çizgisi */
.ero-brands__road::after {
  bottom: 57px !important;
}

@media (max-width: 1024px) {
  .ero-brands__road::before {
    bottom: 60px !important;
  }

  .ero-brands__road::after {
    bottom: 52px !important;
  }
}

@media (max-width: 600px) {
  .ero-brands__road::before {
    bottom: 48px !important;
  }

  .ero-brands__road::after {
    bottom: 41px !important;
  }
}