/* =========================================================
   ÜRÜNLER SAYFASI
   ========================================================= */

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

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

  background: #f7efe7;
}


/* =========================================================
   HERO ÇERÇEVE
   ========================================================= */

.ero-products-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, 90px);

  min-height: 630px;

  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);
}


/* Kırmızı el çizimi çerçeve */
.ero-products-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;
}


/* İkinci turuncu çizgi */
.ero-products-page-hero__frame::after {
  content: "";

  position: absolute;

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

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

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

  transform: rotate(.18deg);

  pointer-events: none;
}


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

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

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

  color: #c5162e;

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

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

.ero-products-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-products-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-products-page-hero__categories {
  display: flex;
  flex-wrap: wrap;

  gap: 9px;

  margin-top: 31px;
}

.ero-products-page-hero__categories span {
  display: inline-flex;
  align-items: center;

  min-height: 35px;

  padding:
    0
    13px;

  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;
}


/* =========================================================
   ÜRÜN VİTRİNİ
   ========================================================= */

.ero-products-page-hero__showcase {
  position: relative;
  z-index: 3;

  min-height: 490px;
}


/* Arkadaki ana grafik */
.ero-products-page-hero__shape {
  position: absolute;

  left: 50%;
  top: 50%;

  width: 450px;
  height: 390px;

  background:
    linear-gradient(
      145deg,
      #c5162e 0%,
      #e54823 58%,
      #f28a2a 100%
    );

  border-radius:
    48% 52% 43% 57%
    /
    56% 44% 59% 41%;

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

  opacity: .96;
}


/* Krem ikinci şekil */
.ero-products-page-hero__shape::after {
  content: "";

  position: absolute;

  width: 250px;
  height: 190px;

  right: -74px;
  top: -46px;

  background: #ffc44b;

  border-radius:
    53% 47% 58% 42%
    /
    44% 59% 41% 56%;

  transform: rotate(17deg);

  opacity: .9;
}


/* =========================================================
   ÜRÜNLER
   ========================================================= */

.ero-products-page-hero__product {
  position: absolute;
  z-index: 4;

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

.ero-products-page-hero__product img {
  display: block;

  width: auto;
  height: 100%;

  object-fit: contain;

  filter:
    drop-shadow(8px 12px 10px rgba(39, 20, 15, .17));
}


/* SAKA */
.ero-products-page-hero__product--saka {
  left: 7%;
  bottom: 67px;

  height: 265px;

  transform: rotate(-4deg);
}


/* ÇAMLICA */
.ero-products-page-hero__product--camlica {
  left: 25%;
  bottom: 56px;

  height: 295px;

  transform: rotate(2deg);
}


/* TAMEK */
.ero-products-page-hero__product--tamek {
  left: 44%;
  bottom: 61px;

  height: 280px;

  transform: rotate(-2deg);
}


/* DİDİ */
.ero-products-page-hero__product--didi {
  right: 20%;
  bottom: 58px;

  height: 272px;

  transform: rotate(3deg);
}


/* BALKAN */
.ero-products-page-hero__product--balkan {
  right: 2%;
  bottom: 64px;

  height: 205px;

  transform: rotate(-3deg);
}


/* MALTANA */
.ero-products-page-hero__product--maltana {
  right: -3%;
  top: 31px;

  height: 235px;

  transform: rotate(5deg);
}


/* =========================================================
   KÜÇÜK VURGU
   ========================================================= */

.ero-products-page-hero__caption {
  position: absolute;
  z-index: 5;

  left: 25px;
  top: 27px;

  display: flex;
  flex-direction: column;

  padding:
    10px
    15px;

  background: rgba(255, 250, 244, .94);

  border-radius:
    16px 20px 15px 19px
    /
    20px 15px 19px 16px;

  box-shadow:
    0 8px 19px rgba(48, 26, 18, .11);

  transform: rotate(-3deg);
}

.ero-products-page-hero__caption span {
  color: #c5162e;

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

  letter-spacing: .14em;
}

.ero-products-page-hero__caption strong {
  color: #2f1a17;

  font-size: 15px;
  line-height: 1.05;
}


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

@media (max-width: 1050px) {

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

  .ero-products-page-hero__showcase {
    min-height: 500px;
  }

}


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

@media (max-width: 600px) {

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

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

    gap: 30px;

    border-radius: 28px;
  }

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

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

  .ero-products-page-hero__showcase {
    min-height: 380px;

    transform: scale(.82);
    transform-origin: center top;
  }

  .ero-products-page-hero__shape {
    width: 390px;
    height: 340px;
  }

}

/* =========================================================
   ÜRÜN GRUPLARI
   ========================================================= */

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

  background: #ffffff;
}


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

.ero-product-groups__heading {
  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(300px, .95fr);

  align-items: end;

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

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

.ero-product-groups__eyebrow {
  margin:
    0
    0
    12px;

  color: #c5162e;

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

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

.ero-product-groups__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-product-groups__heading h2 span {
  display: block;

  color: #c5162e;
}

.ero-product-groups__heading-text > p {
  margin:
    0
    0
    20px;

  color: #6c584d;

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


/* Bilgi notu */
.ero-product-groups__notice {
  position: relative;

  padding:
    18px
    21px;

  background: #fff4e9;

  color: #765347;

  border-radius:
    21px 17px 23px 18px
    /
    18px 23px 17px 22px;

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

  line-height: 1.6;
}

.ero-product-groups__notice::after {
  content: "";

  position: absolute;

  inset:
    -2px
    2px
    2px
    -2px;

  border:
    1px solid rgba(226, 104, 38, .38);

  border-radius:
    18px 23px 17px 22px
    /
    23px 18px 22px 17px;

  transform: rotate(-.25deg);

  pointer-events: none;
}


/* =========================================================
   LİSTE
   ========================================================= */

.ero-product-groups__list {
  display: flex;
  flex-direction: column;

  gap: 32px;
}


/* =========================================================
   ÜRÜN GRUBU
   ========================================================= */

.ero-product-group {
  --group-color: #c5162e;
  --group-soft: #fff2ec;

  position: relative;
  overflow: hidden;

  display: grid;

  grid-template-columns:
    minmax(0, 1.05fr)
    minmax(360px, .95fr);

  align-items: center;

  gap:
    clamp(40px, 7vw, 100px);

  min-height: 500px;

  padding:
    clamp(38px, 5vw, 68px);

  background: var(--group-soft);

  border-radius:
    39px 31px 44px 34px
    /
    32px 46px 30px 42px;
}


/* Çerçeve */
.ero-product-group::after {
  content: "";

  position: absolute;

  inset: 7px;

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

  border-radius:
    32px 44px 30px 41px
    /
    43px 31px 42px 32px;

  transform: rotate(-.12deg);

  pointer-events: none;
}


/* Her ikinci bölüm ters */
.ero-product-group:nth-child(even)
.ero-product-group__content {
  order: 2;
}

.ero-product-group:nth-child(even)
.ero-product-group__visual {
  order: 1;
}


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

.ero-product-group__content {
  position: relative;
  z-index: 3;
}

.ero-product-group__label {
  margin:
    0
    0
    11px;

  color: var(--group-color);

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

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

.ero-product-group h3 {
  margin:
    0
    0
    23px;

  color: #2f1a17;

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

  font-size:
    clamp(37px, 4vw, 58px);

  font-weight: 400;

  line-height: .97;
  letter-spacing: -.05em;
}

.ero-product-group__text {
  max-width: 600px;

  margin:
    0
    0
    31px;

  color: #665249;

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


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

.ero-product-group__brands {
  margin-top: 30px;
}

.ero-product-group__brands-label {
  display: block;

  margin-bottom: 13px;

  color: #816b60;

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

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

.ero-product-group__brand-list {
  display: flex;
  flex-wrap: wrap;

  gap: 10px;
}

.ero-product-group__brand {
  display: flex;
  align-items: center;
  justify-content: center;

  width: 105px;
  height: 68px;

  padding:
    11px
    14px;

  background: #fff;

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

  border-radius:
    17px 14px 19px 15px
    /
    14px 20px 13px 18px;

  box-shadow:
    0 7px 16px rgba(44, 24, 17, .06);
}

.ero-product-group__brand img {
  width: 100%;
  height: 100%;

  object-fit: contain;
}


/* =========================================================
   LINK
   ========================================================= */

.ero-product-group__link {
  display: inline-flex;
  align-items: center;

  gap: 10px;

  margin-top: 31px;

  color: var(--group-color);

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

  text-decoration: none;
}

.ero-product-group__link span {
  font-size: 20px;

  transition:
    transform .25s ease;
}

.ero-product-group__link:hover span {
  transform: translateX(5px);
}


/* =========================================================
   ÜRÜN GÖRSELİ
   ========================================================= */

.ero-product-group__visual {
  position: relative;
  z-index: 3;

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

  min-height: 355px;
}

.ero-product-group__shape {
  position: absolute;

  width: 310px;
  height: 270px;

  background:
    color-mix(
      in srgb,
      var(--group-color) 16%,
      white
    );

  border-radius:
    48% 52% 43% 57%
    /
    56% 44% 59% 41%;

  transform: rotate(-8deg);
}

.ero-product-group__image {
  position: relative;
  z-index: 2;

  display: block;

  width: auto;
  height: 315px;

  max-width: 76%;

  object-fit: contain;

  filter:
    drop-shadow(
      8px
      12px
      10px
      rgba(43, 24, 17, .14)
    );
}


/* Temsili görsel notu */
.ero-product-group__sample {
  position: absolute;
  z-index: 3;

  right: 8px;
  bottom: 7px;

  color: rgba(79, 58, 48, .62);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: .05em;
}


/* =========================================================
   RENKLER
   ========================================================= */

.ero-product-group--water {
  --group-color: #1588b8;
  --group-soft: #edf8fc;
}

.ero-product-group--soda {
  --group-color: #c5162e;
  --group-soft: #fff0ed;
}

.ero-product-group--juice {
  --group-color: #df7420;
  --group-soft: #fff5e8;
}

.ero-product-group--tea {
  --group-color: #37873e;
  --group-soft: #eff8ed;
}

.ero-product-group--ayran {
  --group-color: #31589b;
  --group-soft: #eff4fb;
}

.ero-product-group--malt {
  --group-color: #a87314;
  --group-soft: #fff7df;
}


/* Balkan geniş olduğu için */
.ero-product-group--ayran
.ero-product-group__image {
  height: 245px;

  max-width: 80%;
}


/* =========================================================
   GÜNCEL ÜRÜN CTA
   ========================================================= */

.ero-product-contact {
  position: relative;
  overflow: hidden;

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

  gap: 45px;

  margin-top:
    clamp(65px, 8vw, 105px);

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

  background: #2f1a17;

  border-radius:
    33px 26px 37px 29px
    /
    27px 39px 25px 35px;
}

.ero-product-contact__content {
  position: relative;
  z-index: 2;

  max-width: 760px;
}

.ero-product-contact__eyebrow {
  margin:
    0
    0
    10px;

  color: #f2a12a;

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

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

.ero-product-contact h2 {
  margin: 0;

  color: #fff;

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

  font-size:
    clamp(34px, 4vw, 54px);

  font-weight: 400;

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

.ero-product-contact h2 span {
  color: #f2a12a;
}

.ero-product-contact__content > p:not(.ero-product-contact__eyebrow) {
  max-width: 690px;

  margin:
    20px
    0
    0;

  color: rgba(255, 247, 239, .77);

  font-size: 15px;
  line-height: 1.7;
}

.ero-product-contact__button {
  position: relative;
  z-index: 2;

  flex: 0 0 auto;

  display: inline-flex;
  align-items: center;

  gap: 11px;

  min-height: 54px;

  padding:
    0
    23px;

  background: #f2a12a;

  color: #461d18;

  border-radius:
    24px 20px 26px 21px
    /
    20px 27px 21px 25px;

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

  text-decoration: none;
}

.ero-product-contact__button span {
  font-size: 20px;
}


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

@media (max-width: 950px) {

  .ero-product-groups__heading,
  .ero-product-group {
    grid-template-columns: 1fr;
  }

  .ero-product-group:nth-child(even)
  .ero-product-group__content {
    order: 1;
  }

  .ero-product-group:nth-child(even)
  .ero-product-group__visual {
    order: 2;
  }

  .ero-product-contact {
    align-items: flex-start;
    flex-direction: column;
  }

}


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

@media (max-width: 600px) {

  .ero-product-groups {
    padding:
      70px
      0;
  }

  .ero-product-groups__heading h2 {
    font-size: 42px;
  }

  .ero-product-groups__heading-text > p {
    font-size: 15px;
  }

  .ero-product-group {
    min-height: auto;

    padding:
      32px
      22px;

    gap: 24px;

    border-radius: 27px;
  }

  .ero-product-group h3 {
    font-size: 36px;
  }

  .ero-product-group__text {
    font-size: 15px;
  }

  .ero-product-group__visual {
    min-height: 290px;
  }

  .ero-product-group__image {
    height: 255px;
  }

  .ero-product-group--ayran
  .ero-product-group__image {
    height: 200px;
  }

  .ero-product-group__shape {
    width: 250px;
    height: 220px;
  }

  .ero-product-contact {
    padding:
      32px
      23px;
  }

  .ero-product-contact__button {
    width: 100%;

    justify-content: center;
  }

}

/* =========================================================
   ÜRÜNLER HERO - MOBİL ÜRÜN VİTRİNİ
   3 sütun / 2 sıra
   ========================================================= */

@media (max-width: 600px) {

  .ero-products-page-hero__showcase {
    position: relative !important;

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

    align-items: end !important;
    justify-items: center !important;

    gap: 10px 6px !important;

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

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

    padding:
      62px
      8px
      20px !important;

    transform: none !important;
  }


  /* Arkadaki renkli şekil */
  .ero-products-page-hero__shape {
    position: absolute !important;

    z-index: 0 !important;

    width: 92% !important;
    height: 78% !important;

    left: 50% !important;
    top: 55% !important;
    right: auto !important;

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

    opacity: .94 !important;
  }


  .ero-products-page-hero__shape::after {
    width: 48% !important;
    height: 42% !important;

    right: -8% !important;
    top: -7% !important;
  }


  /* =========================================================
     BÜTÜN ÜRÜNLER ABSOLUTE KONUMDAN ÇIKSIN
     ========================================================= */

  .ero-products-page-hero__product,
  .ero-products-page-hero__product--saka,
  .ero-products-page-hero__product--camlica,
  .ero-products-page-hero__product--tamek,
  .ero-products-page-hero__product--didi,
  .ero-products-page-hero__product--balkan,
  .ero-products-page-hero__product--maltana {
    position: relative !important;

    z-index: 2 !important;

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

    display: flex !important;
    align-items: flex-end !important;
    justify-content: center !important;

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

    margin: 0 !important;

    transform: none !important;
  }


  .ero-products-page-hero__product img {
    display: block !important;

    width: auto !important;
    height: 125px !important;

    max-width: 90% !important;
    max-height: 125px !important;

    object-fit: contain !important;

    filter:
      drop-shadow(
        4px
        7px
        6px
        rgba(39, 20, 15, .16)
      ) !important;
  }


  /* Ürün tiplerine göre küçük denge ayarı */

  .ero-products-page-hero__product--saka img {
    height: 130px !important;
  }

  .ero-products-page-hero__product--camlica img {
    height: 132px !important;
  }

  .ero-products-page-hero__product--tamek img {
    height: 125px !important;
  }

  .ero-products-page-hero__product--didi img {
    height: 126px !important;
  }

  .ero-products-page-hero__product--balkan img {
    height: 105px !important;
    max-width: 96% !important;
  }

  .ero-products-page-hero__product--maltana img {
    height: 132px !important;
  }


  /* TEDARİK / TEK NOKTADA etiketi */
  .ero-products-page-hero__caption {
    left: 50% !important;
    right: auto !important;
    top: 10px !important;

    transform:
      translateX(-50%)
      rotate(-2deg) !important;

    white-space: nowrap !important;
  }

}


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

@media (max-width: 380px) {

  .ero-products-page-hero__showcase {
    grid-template-rows:
      repeat(2, 132px) !important;

    gap: 7px 4px !important;

    padding:
      57px
      4px
      17px !important;
  }

  .ero-products-page-hero__product img {
    height: 113px !important;
    max-height: 113px !important;
  }

  .ero-products-page-hero__product--saka img {
    height: 118px !important;
  }

  .ero-products-page-hero__product--camlica img {
    height: 120px !important;
  }

  .ero-products-page-hero__product--didi img {
    height: 115px !important;
  }

  .ero-products-page-hero__product--balkan img {
    height: 96px !important;
  }

  .ero-products-page-hero__product--maltana img {
    height: 120px !important;
  }

}