/* =========================================================
   MARKALAR SAYFASI
   ========================================================= */

.ero-brands-page {
  background: #f7efe7;
}

.ero-brands-page-hero {
  padding:
    clamp(38px, 5vw, 70px)
    0
    clamp(90px, 9vw, 130px);

  background: #f7efe7;
}


/* =========================================================
   HERO ANA YAPI
   ========================================================= */

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

  display: grid;
  grid-template-columns:
    minmax(0, .82fr)
    minmax(500px, 1.18fr);

  align-items: center;

  gap: clamp(45px, 6vw, 85px);

  min-height: 620px;

  padding:
    clamp(45px, 5vw, 72px);

  background: #fffaf4;

  border-radius:
    42px 34px 48px 37px
    /
    35px 49px 33px 44px;

  box-shadow:
    0 24px 65px rgba(61, 32, 21, .09);
}


/* El çizimi kırmızı dış hat */
.ero-brands-page-hero__frame::before {
  content: "";

  position: absolute;

  inset: 0;

  border: 3px solid #c5162e;

  border-radius:
    42px 34px 48px 37px
    /
    35px 49px 33px 44px;

  transform: rotate(-.1deg);

  pointer-events: none;
}


/* Turuncu ikinci hat */
.ero-brands-page-hero__frame::after {
  content: "";

  position: absolute;

  inset:
    7px
    -5px
    -5px
    6px;

  border: 1.5px solid rgba(242, 138, 42, .55);

  border-radius:
    35px 47px 34px 44px
    /
    48px 34px 46px 36px;

  transform: rotate(.18deg);

  pointer-events: none;
}


/* =========================================================
   SOL METİN
   ========================================================= */

.ero-brands-page-hero__content {
  position: relative;
  z-index: 4;
}

.ero-brands-page-hero__eyebrow {
  margin: 0 0 15px;

  color: #c5162e;

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

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

.ero-brands-page-hero__title {
  margin: 0;

  color: #2f1a17;

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

  font-size:
    clamp(55px, 6.4vw, 96px);

  font-weight: 400;

  line-height: .91;
  letter-spacing: -.065em;
}

.ero-brands-page-hero__lead {
  max-width: 570px;

  margin:
    29px
    0
    0;

  color: #68544a;

  font-size:
    clamp(16px, 1.35vw, 19px);

  font-weight: 650;

  line-height: 1.72;
}

.ero-brands-page-hero__facts {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;

  margin-top: 32px;
}

.ero-brands-page-hero__facts span {
  display: inline-flex;
  align-items: center;

  min-height: 36px;

  padding:
    0
    14px;

  background: #fff1e7;

  color: #9e2b19;

  border: 1px solid rgba(197, 22, 46, .22);

  border-radius:
    17px 21px 16px 20px
    /
    21px 16px 20px 17px;

  font-size: 11px;
  font-weight: 900;
}


/* =========================================================
   SAĞ MARKA DUVARI
   ========================================================= */

.ero-brands-page-hero__wall {
  position: relative;
  z-index: 3;

  min-height: 470px;
}


/* Arkadaki büyük turuncu şekil */
.ero-brands-page-hero__wall::before {
  content: "";

  position: absolute;

  width: 380px;
  height: 380px;

  left: 50%;
  top: 50%;

  background: #f6a623;

  border-radius:
    48% 52% 43% 57%
    /
    55% 44% 56% 45%;

  transform:
    translate(-50%, -50%)
    rotate(-8deg);

  opacity: .13;
}


/* Logo kartları */
.ero-brands-page-hero__brand {
  position: absolute;

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

  width: 145px;
  height: 105px;

  padding: 18px;

  background: #ffffff;

  border: 1px solid rgba(197, 22, 46, .15);

  border-radius:
    25px 20px 28px 22px
    /
    21px 29px 20px 27px;

  box-shadow:
    0 13px 26px rgba(55, 30, 19, .10);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.ero-brands-page-hero__brand img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* Her logoya farklı konum */
.ero-brands-page-hero__brand--1 {
  left: 5%;
  top: 9%;
  transform: rotate(-5deg);
}

.ero-brands-page-hero__brand--2 {
  left: 34%;
  top: 1%;
  transform: rotate(3deg);
}

.ero-brands-page-hero__brand--3 {
  right: 4%;
  top: 12%;
  transform: rotate(-2deg);
}

.ero-brands-page-hero__brand--4 {
  left: 16%;
  top: 36%;
  transform: rotate(3deg);
}

.ero-brands-page-hero__brand--5 {
  left: 46%;
  top: 31%;
  transform: rotate(-3deg);
}

.ero-brands-page-hero__brand--6 {
  right: 1%;
  top: 41%;
  transform: rotate(4deg);
}

.ero-brands-page-hero__brand--7 {
  left: 3%;
  bottom: 5%;
  transform: rotate(-3deg);
}

.ero-brands-page-hero__brand--8 {
  left: 32%;
  bottom: 1%;
  transform: rotate(4deg);
}

.ero-brands-page-hero__brand--9 {
  right: 17%;
  bottom: 8%;
  transform: rotate(-4deg);
}

.ero-brands-page-hero__brand--10 {
  right: -2%;
  bottom: -1%;
  transform: rotate(2deg);
}


@media (hover: hover) and (pointer: fine) {

  .ero-brands-page-hero__brand:hover {
    z-index: 10;

    transform:
      translateY(-7px)
      rotate(0deg)
      scale(1.05);

    box-shadow:
      0 20px 36px rgba(55, 30, 19, .15);
  }

}


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

@media (max-width: 1050px) {

  .ero-brands-page-hero__frame {
    grid-template-columns: 1fr;
  }

  .ero-brands-page-hero__wall {
    min-height: 500px;
  }

}


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

@media (max-width: 600px) {

  .ero-brands-page-hero {
    padding:
      24px
      0
      70px;
  }

  .ero-brands-page-hero__frame {
    padding:
      38px
      22px
      30px;

    gap: 35px;

    border-radius: 28px;
  }

  .ero-brands-page-hero__title {
    font-size: 51px;
  }

  .ero-brands-page-hero__lead {
    font-size: 15px;
  }

  .ero-brands-page-hero__wall {
    min-height: 430px;

    transform: scale(.9);

    transform-origin: center top;
  }

  .ero-brands-page-hero__brand {
    width: 120px;
    height: 88px;

    padding: 14px;
  }

}

/* =========================================================
   MARKALAR HERO - SAKA + COLA TURKA HİZA
   ========================================================= */

.ero-brands-page-hero__brand--1 {
  left: 22% !important;
  top: 9% !important;
}

.ero-brands-page-hero__brand--2 {
  left: 53% !important;
  top: 1% !important;
}


/* =========================================================
   MARKA PORTFÖYÜ
   ========================================================= */

.ero-brand-portfolio {
  padding:
    clamp(90px, 10vw, 145px)
    0;

  background: #ffffff;
}


/* =========================================================
   BÖLÜM BAŞLIĞI
   ========================================================= */

.ero-brand-portfolio__heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.1fr)
    minmax(280px, .9fr);

  align-items: end;

  gap:
    clamp(45px, 8vw, 120px);

  margin-bottom:
    clamp(60px, 8vw, 100px);
}

.ero-brand-portfolio__eyebrow {
  margin: 0 0 12px;

  color: #c5162e;

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

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

.ero-brand-portfolio__heading h2 {
  margin: 0;

  color: #2f1a17;

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

  font-size:
    clamp(43px, 5vw, 72px);

  font-weight: 400;

  line-height: .96;
  letter-spacing: -.055em;
}

.ero-brand-portfolio__heading h2 span {
  display: block;

  color: #c5162e;
}

.ero-brand-portfolio__intro {
  max-width: 520px;

  margin: 0;

  color: #6c584d;

  font-size: 17px;
  line-height: 1.75;
}


/* =========================================================
   KATEGORİ LİSTESİ
   ========================================================= */

.ero-brand-portfolio__list {
  display: flex;
  flex-direction: column;

  gap: 30px;
}


/* =========================================================
   GENİŞ KATEGORİ ŞERİTLERİ
   ========================================================= */

.ero-brand-category {
  --category-color: #c5162e;
  --category-soft: #fff1e9;

  position: relative;
  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, .82fr)
    minmax(420px, 1.18fr);

  align-items: center;

  gap:
    clamp(35px, 6vw, 90px);

  min-height: 390px;

  padding:
    clamp(35px, 5vw, 65px);

  background: var(--category-soft);

  border-radius:
    37px 29px 43px 32px
    /
    31px 45px 28px 40px;
}


/* El çizimi dış hat */
.ero-brand-category::after {
  content: "";

  position: absolute;

  inset: 7px;

  border:
    2px solid
    color-mix(
      in srgb,
      var(--category-color) 42%,
      transparent
    );

  border-radius:
    31px 43px 29px 39px
    /
    42px 30px 41px 31px;

  transform: rotate(-.12deg);

  pointer-events: none;
}


/* Dönüşümlü yerleşim */
.ero-brand-category:nth-child(even)
.ero-brand-category__content {
  order: 2;
}

.ero-brand-category:nth-child(even)
.ero-brand-category__logos {
  order: 1;
}


/* =========================================================
   METİN
   ========================================================= */

.ero-brand-category__content {
  position: relative;
  z-index: 3;
}

.ero-brand-category__label {
  margin: 0 0 12px;

  color: var(--category-color);

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

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

.ero-brand-category h3 {
  max-width: 610px;

  margin:
    0
    0
    22px;

  color: #2f1a17;

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

  font-size:
    clamp(33px, 3.7vw, 53px);

  font-weight: 400;

  line-height: .98;
  letter-spacing: -.045em;
}

.ero-brand-category h3 span {
  display: block;

  color: var(--category-color);
}

.ero-brand-category__content > p:not(.ero-brand-category__label) {
  max-width: 560px;

  margin:
    0
    0
    27px;

  color: #665249;

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

.ero-brand-category__content > a {
  display: inline-flex;
  align-items: center;

  gap: 11px;

  color: var(--category-color);

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

  text-decoration: none;
}

.ero-brand-category__content > a span {
  font-size: 20px;

  transition:
    transform .25s ease;
}

.ero-brand-category__content > a:hover span {
  transform: translateX(5px);
}


/* =========================================================
   LOGOLAR
   ========================================================= */

.ero-brand-category__logos {
  position: relative;
  z-index: 3;

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

  gap:
    clamp(18px, 3vw, 35px);

  min-height: 245px;
}

.ero-brand-logo {
  display: flex;
  align-items: center;
  justify-content: center;

  width:
    clamp(150px, 14vw, 210px);

  height:
    clamp(120px, 11vw, 160px);

  padding:
    clamp(20px, 2vw, 29px);

  background: #ffffff;

  border:
    1px solid
    color-mix(
      in srgb,
      var(--category-color) 18%,
      transparent
    );

  border-radius:
    29px 22px 32px 25px
    /
    23px 33px 22px 30px;

  box-shadow:
    0 17px 32px rgba(50, 27, 18, .09);

  transform: rotate(-2deg);

  transition:
    transform .3s ease,
    box-shadow .3s ease;
}

.ero-brand-logo:nth-child(even) {
  transform: rotate(2deg);
}

.ero-brand-logo:nth-child(3) {
  transform: rotate(-1deg);
}

.ero-brand-logo img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* Tek logolu kategoriler biraz daha büyük */
.ero-brand-category__logos--single
.ero-brand-logo {
  width:
    clamp(190px, 18vw, 260px);

  height:
    clamp(145px, 14vw, 190px);
}


/* Hover */
@media (hover: hover) and (pointer: fine) {

  .ero-brand-logo:hover {
    transform:
      translateY(-7px)
      rotate(0deg)
      scale(1.045);

    box-shadow:
      0 23px 42px rgba(50, 27, 18, .14);
  }

}


/* =========================================================
   KATEGORİ RENKLERİ
   ========================================================= */

.ero-brand-category--water {
  --category-color: #1488b6;
  --category-soft: #edf8fc;
}

.ero-brand-category--soda {
  --category-color: #c5162e;
  --category-soft: #fff0ed;
}

.ero-brand-category--juice {
  --category-color: #df7420;
  --category-soft: #fff5e8;
}

.ero-brand-category--tea {
  --category-color: #37873e;
  --category-soft: #f0f8ed;
}

.ero-brand-category--ayran {
  --category-color: #31589b;
  --category-soft: #f0f4fb;
}

.ero-brand-category--malt {
  --category-color: #a87314;
  --category-soft: #fff7df;
}


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

@media (max-width: 1000px) {

  .ero-brand-portfolio__heading {
    grid-template-columns: 1fr;

    gap: 24px;
  }

  .ero-brand-category {
    grid-template-columns: 1fr;

    min-height: auto;
  }

  .ero-brand-category:nth-child(even)
  .ero-brand-category__content {
    order: 1;
  }

  .ero-brand-category:nth-child(even)
  .ero-brand-category__logos {
    order: 2;
  }

}


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

@media (max-width: 600px) {

  .ero-brand-portfolio {
    padding:
      70px
      0;
  }

  .ero-brand-portfolio__heading h2 {
    font-size: 42px;
  }

  .ero-brand-portfolio__intro {
    font-size: 15px;
  }

  .ero-brand-category {
    padding:
      32px
      22px;

    gap: 25px;

    border-radius: 27px;
  }

  .ero-brand-category h3 {
    font-size: 34px;
  }

  .ero-brand-category__content > p:not(.ero-brand-category__label) {
    font-size: 15px;
  }

  .ero-brand-category__logos {
    flex-wrap: wrap;

    gap: 14px;

    min-height: auto;
  }

  .ero-brand-logo {
    width: 135px;
    height: 105px;

    padding: 17px;
  }

  .ero-brand-category__logos--single
  .ero-brand-logo {
    width: 180px;
    height: 135px;
  }

}

/* =========================================================
   MARKALAR HERO - MOBİL TEMİZ DÜZEN
   360px taşma + logo kolajı düzeltmesi
   ========================================================= */

@media (max-width: 600px) {

  .ero-brands-page-hero__frame {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;

    padding:
      36px
      18px
      24px !important;

    gap: 34px !important;

    overflow: hidden !important;
  }


  /* METİN ALANI */
  .ero-brands-page-hero__content {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  .ero-brands-page-hero__title {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    font-size: clamp(41px, 12vw, 50px) !important;
    line-height: .94 !important;
    letter-spacing: -.05em !important;

    white-space: normal !important;
    overflow-wrap: normal !important;
  }

  .ero-brands-page-hero__lead {
    width: 100% !important;
    max-width: 100% !important;

    margin-top: 22px !important;

    font-size: 14px !important;
    line-height: 1.65 !important;
  }

  .ero-brands-page-hero__facts {
    width: 100% !important;
    max-width: 100% !important;

    gap: 7px !important;

    margin-top: 25px !important;
  }

  .ero-brands-page-hero__facts span {
    min-height: 32px !important;

    padding:
      0
      10px !important;

    font-size: 9px !important;
  }


  /* =========================================================
     MOBİLDE ABSOLUTE LOGO KOLAJINI KALDIR
     ========================================================= */

  .ero-brands-page-hero__wall {
    position: relative !important;

    display: grid !important;
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      13px
      12px !important;

    width: 100% !important;
    max-width: 100% !important;

    min-height: 0 !important;
    height: auto !important;

    padding:
      28px
      5px
      8px !important;

    transform: none !important;
  }


  /* Arkadaki krem şekil */
  .ero-brands-page-hero__wall::before {
    width: 280px !important;
    height: 280px !important;

    left: 50% !important;
    top: 50% !important;

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

    opacity: .12 !important;
  }


  /* TÜM LOGO KARTLARINI GRID'E AL */
  .ero-brands-page-hero__brand,
  .ero-brands-page-hero__brand--1,
  .ero-brands-page-hero__brand--2,
  .ero-brands-page-hero__brand--3,
  .ero-brands-page-hero__brand--4,
  .ero-brands-page-hero__brand--5,
  .ero-brands-page-hero__brand--6,
  .ero-brands-page-hero__brand--7,
  .ero-brands-page-hero__brand--8,
  .ero-brands-page-hero__brand--9,
  .ero-brands-page-hero__brand--10 {
    position: relative !important;

    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;

    width: 100% !important;
    height: 82px !important;

    padding:
      13px
      17px !important;

    margin: 0 !important;

    transform: none !important;

    border-radius:
      18px 14px 20px 15px
      /
      15px 21px 14px 19px !important;
  }


  .ero-brands-page-hero__brand img {
    width: 100% !important;
    height: 100% !important;

    object-fit: contain !important;
  }

}


/* =========================================================
   360PX VE ALTI
   ========================================================= */

@media (max-width: 380px) {

  .ero-brands-page-hero__frame {
    padding:
      32px
      15px
      22px !important;
  }

  .ero-brands-page-hero__title {
    font-size: 42px !important;
  }

  .ero-brands-page-hero__eyebrow {
    font-size: 9px !important;
  }

  .ero-brands-page-hero__brand {
    height: 76px !important;
    padding:
      12px
      15px !important;
  }

}