/* Atomic "What we do" geometrisi, Yıldız Ecza ürün gruplarına uyarlandı. */
.flow-products--editorial,
.flow-products--editorial * {
  box-sizing: border-box;
}

.flow-products--editorial {
  --products-inline: max(42px, calc((100vw - 1656px) / 2));
  --atomic-gap: 20px;
  --atomic-content-start: var(--products-inline);
  --atomic-card-width: clamp(360px, 26vw, 500px);
  --atomic-card-height: clamp(480px, 53svh, 540px);
  --products-block: clamp(68px, 7.5svh, 88px);
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 100svh;
  padding: var(--products-block) 0;
  overflow: clip;
  color: var(--green-200);
  background: var(--color-dark);
  isolation: isolate;
}

.flow-products--editorial .section-intro--products {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding: 0 var(--products-inline) 44px;
  color: inherit;
  background: transparent;
}

.flow-products--editorial .section-intro__container {
  display: block;
  width: 100%;
  margin: 0;
}

#ana-icerik .flow-products--editorial .section-intro__eyebrow {
  position: static;
  display: flex;
  width: auto;
  margin: 0;
  color: var(--color-white);
  font-size:var(--fs-label);
  font-weight:var(--fw-label);
  line-height:var(--lh-ui);
  letter-spacing:var(--ls-label);
}

.flow-products--editorial .products-heading__topline,
.flow-products--editorial .products-heading__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 36px;
}

.flow-products--editorial .products-heading__topline {
  align-items: baseline;
  margin-bottom: 24px;
}

.flow-products--editorial .products-heading__main {
  align-items: flex-end;
}

#ana-icerik .flow-products--editorial .section-intro__eyebrow img {
  display: block;
}

#ana-icerik .flow-products--editorial .section-intro__title {
  max-width: 900px;
  margin: 0;
  color: var(--color-white);
  font-size: var(--yed-h2-size, 64px);
  font-weight: var(--yed-h2-weight, 450);
  line-height: var(--yed-h2-leading, 1.2);
  letter-spacing: var(--yed-h2-tracking, -.04em);
  white-space: normal;
}

.flow-products--editorial .products-heading__accent {
  color: var(--color-heading-reveal);
  font-style: normal;
}



.flow-products--editorial .flow-products__rail {
  position: relative;
  z-index: 1;
  display: grid;
  grid-auto-columns: var(--atomic-card-width);
  grid-auto-flow: column;
  gap: var(--atomic-gap);
  width: calc(100% - var(--atomic-content-start));
  margin-left: var(--atomic-content-start);
  padding: 0;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-inline: contain;
  scrollbar-width: none;
  scroll-padding-inline: 0;
  scroll-snap-type: inline mandatory;
  touch-action: pan-x pan-y;
  cursor: grab;
}

.flow-products--editorial .flow-products__rail::-webkit-scrollbar {
  display: none;
}

.flow-products--editorial .flow-products__rail.is-dragging {
  scroll-snap-type: none;
  cursor: grabbing;
  user-select: none;
}

.flow-products--editorial .flow-product:nth-child(n) {
  --product-color: var(--green-300);
  --product-mark: color-mix(in srgb, var(--color-white) 42%, transparent);
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: var(--atomic-card-width);
  min-width: 0;
  height: var(--atomic-card-height);
  aspect-ratio: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  color: var(--color-white);
  border: 0;
  border-radius:var(--radius-card);
  background: var(--product-color);
  scroll-snap-align: start;
  isolation: isolate;
}

.flow-products--editorial .flow-product::after {
  display: none;
}

.flow-products--editorial .flow-product.flow-product--fms {
  --product-color: var(--green-300);
  --product-mark: var(--green-400);
}

.flow-products--editorial .flow-product.flow-product--toksin {
  --product-color: var(--color-primary);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product.flow-product--filler {
  --product-color: var(--green-300);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product.flow-product--mezoterapi {
  --product-color: var(--green-300);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product.flow-product--needle {
  --product-color: var(--green-400);
  --product-mark: var(--green-400);
}

.flow-products--editorial .flow-product.flow-product--cannula {
  --product-color: var(--green-400);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product.flow-product--vaccine {
  --product-color: var(--green-400);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product.flow-product--womens-health {
  --product-color: var(--green-400);
  --product-mark: var(--green-200);
}

.flow-products--editorial .flow-product > img:not(.flow-product__star) {
  position: absolute;
  z-index: 2;
  top: auto;
  right: 10%;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 58%;
  max-width: none;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 18px 18px color-mix(in srgb, var(--color-dark) 14%, transparent));
  transform: translate3d(0, 0, 0) scale(1);
  transform-origin: 50% 70%;
  transition: transform 600ms ease-in-out;
  user-select: none;
  -webkit-user-drag: none;
}

.flow-products--editorial .flow-product__star {
  position: absolute;
  z-index: 5;
  inset: auto;
  top: 42px;
  left: 50%;
  width: 18px;
  height: 19px;
  overflow: visible;
  fill: var(--color-white);
  filter: none;
  transform: translateX(-50%) rotate(0deg);
  transform-origin: center;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
  pointer-events: none;
}

.flow-products--editorial .flow-product__copy {
  position: relative;
  z-index: 4;
  inset: auto;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: clamp(78px, calc(6.346vw - 3.85px), 100px);
  padding: 0 24px;
  pointer-events: none;
}

#ana-icerik .flow-products--editorial .flow-product h3 {
  max-width: none;
  margin: 0;
  color: var(--color-white);
  font-size:var(--fs-h3);
  font-weight:var(--fw-heading);
  line-height:var(--lh-h3);
  letter-spacing:var(--ls-h3);
  text-align: center;
  white-space: nowrap;
}

.flow-product__title-line {
  display: inline-flex;
}

.flow-product__char-mask,
.flow-product__char-track {
  position: relative;
  display: inline-block;
}

.flow-product__char-mask {
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.flow-product__char--next,
.flow-product__char--current {
  display: inline-block;
  transition: transform var(--hover-wave-duration) cubic-bezier(.4, 0, .2, 1);
  transition-delay: calc(var(--char-index) * var(--hover-wave-stagger) / var(--hover-wave-steps, 1));
}

.flow-product__char--next {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateY(-110%);
}

.flow-product__char--current {
  transform: translateY(0);
}

@media (hover: hover) and (pointer: fine) {
  .flow-products--editorial .flow-product:hover > img:not(.flow-product__star) {
    transform: translate3d(0, 0, 0) scale(1.03);
  }

  .flow-products--editorial .flow-product:hover .flow-product__star {
    transform: translateX(-50%) rotate(180deg) scale(1.08);
  }

  .flow-products--editorial .flow-product:hover .flow-product__char--next {
    transform: translateY(0);
  }

  .flow-products--editorial .flow-product:hover .flow-product__char--current {
    transform: translateY(110%);
  }
}

.flow-products--editorial .flow-product:focus-visible > img:not(.flow-product__star) {
  transform: translate3d(0, 0, 0) scale(1.03);
}

.flow-products--editorial .flow-product:focus-visible .flow-product__star {
  transform: translateX(-50%) rotate(180deg) scale(1.08);
}

.flow-products--editorial .flow-product:focus-visible .flow-product__char--next {
  transform: translateY(0);
}

.flow-products--editorial .flow-product:focus-visible .flow-product__char--current {
  transform: translateY(110%);
}

.flow-products--editorial .flow-product:focus-visible,
.flow-products--editorial .flow-products__rail:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: -3px;
}

.flow-products--editorial .flow-products__controls {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  padding-bottom: 3.75px;
}

.flow-products--editorial .flow-products__controls button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  padding: 0;
  
  border: 0;
  border-radius:var(--radius-control);
  
  cursor: pointer;
  
}

.flow-products--editorial .flow-products__controls svg {
  width: 11.25px;
  height: 11.25px;
  fill: currentColor;
  stroke: none;
}

.flow-products--editorial .flow-products__controls [data-products-prev] svg {
  transform: rotate(180deg);
}

.flow-products--editorial .flow-products__controls [data-products-prev]:hover:not(:disabled) {
  
  
}

.flow-products--editorial .flow-products__controls [data-products-next]:hover:not(:disabled) {
  
  
}

.flow-products--editorial .flow-products__controls button:disabled {
  opacity: .55;
  cursor: default;
}

.flow-products--editorial .flow-products__position {
  color: var(--color-text);
  font-size:var(--fs-small);
  font-variant-numeric: tabular-nums;
}

.flow-products--editorial + .order-delivery .order-delivery__container {
  width: calc(100% - 2 * var(--page-gutter));
  max-width: var(--content-max);
}

@media (max-width: 1023px) {
  .flow-products--editorial {
    --products-inline: var(--page-gutter);
    --atomic-content-start: var(--page-gutter);
    --atomic-card-width: min(72vw, 420px);
    --atomic-gap: 14px;
    --products-block: clamp(56px, 8vw, 72px);
    min-height: 0;
    padding: var(--products-block) 0;
  }

  .flow-products--editorial .section-intro--products {
    min-height: 0;
    padding: 0 var(--page-gutter) 42px;
  }

  .flow-products--editorial .section-intro__container {
    display: block;
  }

  #ana-icerik .flow-products--editorial .section-intro__eyebrow {
    position: static;
    width: auto;
    margin: 0;
    font-size:var(--fs-label);
    line-height:var(--lh-ui);
    letter-spacing:var(--ls-label);
  }

  #ana-icerik .flow-products--editorial .section-intro__title {
    font-size:var(--fs-h2);
    line-height:var(--lh-h2);
    white-space: normal;
  }

  .flow-products--editorial .flow-products__rail {
    width: calc(100% - var(--page-gutter));
    margin-left: var(--page-gutter);
  }

  .flow-products--editorial .flow-product:nth-child(n) {
    width: var(--atomic-card-width);
    height: auto;
    aspect-ratio: 5 / 6;
  }

}

@media (max-width: 600px) {
  .flow-products--editorial {
    --atomic-card-width: 82vw;
  }

  .flow-products--editorial .section-intro--products {
    padding-top: 0;
    padding-bottom: 32px;
  }

  .flow-products--editorial .products-heading__topline {
    gap: 20px;
    margin-bottom: 24px;
  }

  .flow-products--editorial .products-heading__main {
    display: block;
  }

  .flow-products--editorial .flow-products__controls {
    padding-bottom: 0;
  }

  .flow-products--editorial .products-heading__main > .flow-products__all {
    margin-top: 26px;
  }

  #ana-icerik .flow-products--editorial .section-intro__title {
    font-size:var(--fs-h2);
  }

  .flow-products--editorial .flow-products__controls button {
    width: 49.5px;
    height: 36px;
  }

  .flow-products--editorial .flow-products__position {
    display: none;
  }

}

@media (prefers-reduced-motion: reduce) {
  .flow-products--editorial *,
  .flow-products--editorial *::before,
  .flow-products--editorial *::after {
    scroll-behavior: auto !important;
    transition: none !important;
  }
}