/* ==========================================================
   MAPPYCO PROMO PRODUCT GALLERY

   MASAÜSTÜ
   %50 / %50

   KAMPANYA GÖRSELİ
   4:3

   MOBİL
   Görsel üstte
   Ürün galerisi altta

   MOBİL GÖRSEL
   4:5
========================================================== */


/* ==========================================================
   ANA BÖLÜM
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products {
  position: relative;

  display: flex;
  align-items: stretch;

  width: 100%;

  aspect-ratio: 8 / 3;

  box-sizing: border-box;

  padding-top:
    var(--section-padding-top);

  padding-bottom:
    var(--section-padding-bottom);

  padding-left:
    var(--section-padding-horizontal);

  padding-right:
    var(--section-padding-horizontal);

  overflow: hidden;

  background: #ffffff;
}


/* ==========================================================
   NORMAL YERLEŞİM

   GÖRSEL SOLDA
   ÜRÜNLER SAĞDA
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo {
  order: 1;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__products {
  order: 2;
}


/* ==========================================================
   GÖRSEL SAĞDA

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

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--promo-right
.mappyco-promo-products__promo {
  order: 2;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--promo-right
.mappyco-promo-products__products {
  order: 1;
}


/* ==========================================================
   KAMPANYA BLOĞU
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo {
  position: relative;

  flex:
    0
    0
    50%;

  width: 50%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  overflow: hidden;

  background: #f5f5f5;
}


/* ==========================================================
   KAMPANYA LINKİ
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo-link {
  display: block;

  width: 100%;
  height: 100%;

  text-decoration: none;
}


/* ==========================================================
   PICTURE
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo picture {
  display: block;

  width: 100%;
  height: 100%;
}


/* ==========================================================
   KAMPANYA GÖRSELİ
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo-image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center
    center;
}


/* ==========================================================
   ÜRÜN GALERİ BLOĞU
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__products {
  position: relative;

  flex:
    0
    0
    50%;

  width: 50%;
  height: 100%;

  min-width: 0;
  min-height: 0;

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  padding:
    clamp(
      18px,
      2vw,
      28px
    )
    clamp(
      20px,
      2.2vw,
      30px
    );

  overflow: hidden;

  background: #ffffff;
}


/* ==========================================================
   KATEGORİ BAŞLIĞI
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__title {
  flex:
    0
    0
    auto;

  display: block;

  width: 100%;

  margin:
    0
    0
    clamp(
      12px,
      1.3vw,
      18px
    )
    0;

  padding: 0;

  color: #171717;

  font-family: inherit;

  font-size:
    clamp(
      20px,
      2vw,
      26px
    );

  font-weight: 500;

  line-height: 1.15;

  letter-spacing:
    -0.02em;

  text-align: left;
}


/* ==========================================================
   SLIDER VIEWPORT
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__viewport {
  position: relative;

  flex:
    1
    1
    auto;

  display: block;

  width: 100%;

  min-width: 0;
  min-height: 0;

  overflow-x: auto;
  overflow-y: hidden;

  scroll-behavior: smooth;

  scroll-snap-type:
    x mandatory;

  scrollbar-width: none;

  -webkit-overflow-scrolling:
    touch;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__viewport::-webkit-scrollbar {
  display: none;
}


/* ==========================================================
   SLIDER TRACK
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__track {
  display: flex;

  align-items: flex-start;

  width: 100%;
  min-width: 100%;

  gap:
    var(--product-gap);
}


/* ==========================================================
   NORMAL / TERS AKIŞ

   Akış yönü esas olarak index.tsx tarafından
   başlangıç konumu ve scroll yönü üzerinden yönetilir.

   Böylece RTL scrollLeft tarayıcı problemlerine
   girmeden stabil çalışır.
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--flow-normal
.mappyco-promo-products__track, .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--flow-reverse
.mappyco-promo-products__track {
  direction: ltr;
}


/* ==========================================================
   ÜRÜN KARTI
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__card {
  flex:
    0
    0
    var(
      --desktop-card-width
    );

  width:
    var(
      --desktop-card-width
    );

  min-width:
    var(
      --desktop-card-width
    );

  display: flex;

  flex-direction: column;

  box-sizing: border-box;

  scroll-snap-align:
    start;

  background: #ffffff;
}


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

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image-link {
  display: block;

  width: 100%;

  color: inherit;

  text-decoration: none;
}


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

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image-wrapper {
  position: relative;

  width: 100%;

  aspect-ratio:
    5 / 4;

  overflow: hidden;

  box-sizing: border-box;

  padding: 5px;

  background: #ffffff;
}


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

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image {
  display: block;

  width: 100%;
  height: 100%;

  object-fit:
    contain;

  object-position:
    center;

  transition:
    transform
    0.35s
    cubic-bezier(
      0.2,
      0.6,
      0.2,
      1
    );
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__card:hover
.mappyco-promo-products__image {
  transform:
    scale(1.025);
}


/* ==========================================================
   GÖRSEL YOKSA
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image-placeholder {
  display: flex;

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

  width: 100%;
  height: 100%;

  box-sizing: border-box;

  padding: 15px;

  background: #f7f7f7;

  color: #777777;

  font-family: inherit;

  font-size: 13px;

  text-align: center;
}


/* ==========================================================
   ÜRÜN BİLGİLERİ
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__info {
  display: flex;

  flex-direction: column;

  flex: 1;

  padding-top:
    clamp(
      7px,
      0.8vw,
      11px
    );
}


/* ==========================================================
   ÜRÜN ADI
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__name {
  display: block;

  min-height: 34px;

  color: #111111;

  font-family: inherit;

  font-size:
    clamp(
      12px,
      1.1vw,
      14px
    );

  font-weight: 400;

  line-height: 1.3;

  text-decoration: none;

  transition:
    opacity
    0.2s
    ease;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__name:hover {
  opacity: 0.7;
}


/* ==========================================================
   FİYAT
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__price {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 6px;

  min-height: 22px;

  margin-top: 3px;

  font-family: inherit;

  font-size:
    clamp(
      11px,
      1vw,
      13px
    );
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__old-price {
  color: #999999;

  text-decoration:
    line-through;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__final-price {
  color: #111111;

  font-weight: 500;
}


/* ==========================================================
   ÜRÜN BUTONU
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__button {
  display: flex;

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

  width: 100%;

  min-height:
    clamp(
      34px,
      3vw,
      40px
    );

  box-sizing: border-box;

  margin-top:
    clamp(
      7px,
      0.8vw,
      11px
    );

  padding:
    7px
    8px;

  border: 0;

  border-radius: 4px;

  background:
    var(--button-bg-color, #111827);

  color: #ffffff;

  font-family: inherit;

  font-size:
    clamp(
      10px,
      0.95vw,
      12px
    );

  font-weight: 600;

  line-height: 1;

  text-align: center;

  text-decoration: none;

  transition:
    background-color
    0.2s
    ease,
    transform
    0.2s
    ease;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__button:hover {
  background:
    var(--button-bg-color, #111827);

  transform:
    translateY(-1px);
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__button:active {
  transform:
    translateY(0);
}


/* ==========================================================
   SOFT MODERN SLIDER OKLARI
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow {
  position: absolute;

  top: 44%;

  z-index: 20;

  display: flex;

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

  width:
    clamp(
      30px,
      3vw,
      36px
    );

  height:
    clamp(
      30px,
      3vw,
      36px
    );

  padding: 0;

  border:
    1px
    solid
    rgba(
      15,
      15,
      15,
      0.025
    );

  border-radius: 999px;

  background:
    rgba(
      255,
      255,
      255,
      0.82
    );

  color: transparent;

  font-size: 0;

  cursor: pointer;

  transform:
    translateY(-50%);

  box-shadow:
    0
    2px
    10px
    rgba(
      0,
      0,
      0,
      0.05
    );

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  transition:
    background-color
    0.2s
    ease,
    box-shadow
    0.2s
    ease,
    transform
    0.2s
    ease;
}


/* ==========================================================
   OK İŞARETİ
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow::before {
  content: "";

  display: block;

  width: 6px;
  height: 6px;

  border-top:
    1.2px
    solid
    rgba(
      20,
      20,
      20,
      0.68
    );

  border-right:
    1.2px
    solid
    rgba(
      20,
      20,
      20,
      0.68
    );
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--left::before {
  transform:
    rotate(-135deg);

  margin-left: 2px;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--right::before {
  transform:
    rotate(45deg);

  margin-right: 2px;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--left {
  left: 8px;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--right {
  right: 8px;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow:hover {
  background:
    rgba(
      255,
      255,
      255,
      0.98
    );

  transform:
    translateY(-50%)
    scale(1.04);

  box-shadow:
    0
    4px
    15px
    rgba(
      0,
      0,
      0,
      0.07
    );
}


/* ==========================================================
   SLIDER NOKTALARI
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__dots {
  flex:
    0
    0
    auto;

  display: flex;

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

  gap: 6px;

  padding-top:
    clamp(
      7px,
      0.8vw,
      11px
    );
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__dot {
  width: 6px;
  height: 6px;

  padding: 0;

  border: 0;

  border-radius: 999px;

  background: #d7d7d7;

  cursor: pointer;

  transition:
    width
    0.2s
    ease,
    background-color
    0.2s
    ease;
}


.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__dot.is-active {
  width: 20px;

  background: #111111;
}


/* ==========================================================
   BOŞ DURUM
========================================================== */

.cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--empty {
  min-height: 280px;

  aspect-ratio: auto;

  display: flex;

  flex-direction: column;

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

  gap: 8px;

  border:
    1px
    dashed
    #d7d7d7;

  background: #f7f7f7;

  color: #666666;
}


/* ==========================================================
   TABLET / KÜÇÜK MASAÜSTÜ
========================================================== */

@media
  (min-width: 768px)
  and
  (max-width: 1023px) {

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__products {
    padding:
      14px
      16px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__title {
    margin-bottom: 10px;

    font-size: 18px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image-wrapper {
    aspect-ratio:
      3 / 2;

    padding: 3px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__info {
    padding-top: 6px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__name {
    min-height: 28px;

    font-size: 11px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__price {
    min-height: 18px;

    margin-top: 2px;

    font-size: 10px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__button {
    min-height: 30px;

    margin-top: 5px;

    padding: 5px;

    font-size: 9px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__dots {
    padding-top: 6px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow {
    width: 29px;
    height: 29px;
  }
}


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

@media (max-width: 767px) {

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products {
    display: flex;

    flex-direction: column;

    align-items: stretch;

    width: 100%;

    height: auto;

    aspect-ratio: auto;

    overflow: visible;
  }


  /* ======================================================
     MOBİLDE HER ZAMAN:

     GÖRSEL ÜSTTE
     ÜRÜNLER ALTTA
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo, .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--promo-right
  .mappyco-promo-products__promo {
    order: 1;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__products, .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products--promo-right
  .mappyco-promo-products__products {
    order: 2;
  }


  /* ======================================================
     MOBİL KAMPANYA GÖRSELİ

     1080 × 1350
     4:5
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo {
    position: relative;

    flex: none;

    width: 100%;

    height: auto;

    min-width: 0;

    aspect-ratio:
      4 / 5;

    overflow: hidden;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo-link {
    display: block;

    width: 100%;
    height: 100%;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo picture {
    display: block;

    width: 100%;
    height: 100%;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__promo-image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position:
      center
      center;
  }


  /* ======================================================
     MOBİL ÜRÜN ALANI
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__products {
    position: relative;

    flex: none;

    width: 100%;

    height: auto;

    padding:
      22px
      16px
      20px;

    overflow: hidden;
  }


  /* ======================================================
     MOBİL BAŞLIK
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__title {
    margin:
      0
      0
      18px
      0;

    font-size: 21px;

    font-weight: 500;

    line-height: 1.2;
  }


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

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__viewport {
    flex: none;

    width: 100%;

    height: auto;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type:
      x mandatory;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__track {
    width: 100%;

    min-width: 100%;

    align-items: stretch;

    gap:
      var(--product-gap);
  }


  /* ======================================================
     MOBİL ÜRÜN KARTI
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__card {
    flex:
      0
      0
      var(
        --mobile-card-width
      );

    width:
      var(
        --mobile-card-width
      );

    min-width:
      var(
        --mobile-card-width
      );
  }


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

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image-wrapper {
    aspect-ratio:
      1 / 1;

    padding: 4px;
  }


  /* ======================================================
     MOBİL ÜRÜN BİLGİLERİ
  ====================================================== */

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__info {
    padding-top: 9px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__name {
    min-height: 34px;

    font-size: 13px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__price {
    min-height: 22px;

    margin-top: 3px;

    font-size: 12px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__button {
    min-height: 37px;

    margin-top: 9px;

    padding:
      7px
      4px;

    font-size: 11px;
  }


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

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow {
    display: flex;

    top: 47%;

    width: 32px;
    height: 32px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--left {
    left: 7px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow--right {
    right: 7px;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__dots {
    padding-top: 11px;
  }
}


/* ==========================================================
   HAREKET AZALTMA
========================================================== */

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

  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__viewport {
    scroll-behavior: auto;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__image {
    transition: none;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__card:hover
  .mappyco-promo-products__image {
    transform: none;
  }


  .cc_tb32aqjd_A7o4tcCFGU .mappyco-promo-products__arrow {
    transition: none;
  }
}