mucomutfak-webapp/src/components/Sections/Breakfast.vue

<template>
  <section
    ref="breakfastSectionRef"
    id="breakfast"
    class="breakfast-promo relative w-screen bg-[#fff] overflow-hidden"
    @mousemove="handleMouseMove"
  >
    <article
      v-for="(scene, index) in scenes"
      :key="`${scene.title}-${index}`"
      class="breakfast-slide relative h-screen min-h-[768px] w-screen"
      :data-scene-index="index"
    >
      <div class="pointer-events-none absolute inset-0 z-10" aria-hidden="true">
        <img
          v-if="scene.left.src"
          :src="scene.left.src"
          :alt="scene.left.alt"
          class="breakfast-promo-image breakfast-promo-image-left absolute select-none pointer-events-none object-contain will-change-transform"
          :style="{
            left: scene.left.left,
            top: scene.left.top,
          }"
          draggable="false"
        />

        <img
          v-if="scene.middle.src"
          :src="scene.middle.src"
          :alt="scene.middle.alt"
          class="breakfast-promo-image breakfast-promo-image-middle absolute select-none pointer-events-none object-contain will-change-transform"
          :style="{
            left: scene.middle.left,
            top: scene.middle.top,
          }"
          draggable="false"
        />

        <img
          v-if="scene.right.src"
          :src="scene.right.src"
          :alt="scene.right.alt"
          class="breakfast-promo-image breakfast-promo-image-right absolute select-none pointer-events-none object-contain will-change-transform"
          :style="{
            right: scene.right.right,
            top: scene.right.top,
          }"
          draggable="false"
        />

        <img
          v-if="scene.extra?.src"
          :src="scene.extra.src"
          :alt="scene.extra.alt"
          class="breakfast-promo-image breakfast-promo-image-extra absolute select-none pointer-events-none object-contain will-change-transform"
          :style="{
            right: scene.extra.right,
            left: scene.extra.left,
            top: scene.extra.top,
            bottom: scene.extra.bottom,
          }"
          draggable="false"
        />
      </div>

      <div
        class="absolute inset-0 z-20 flex items-center justify-center px-6 text-center pointer-events-none"
      >
        <h2
          class="breakfast-promo-title max-w-[1250px] font-handwritten text-[clamp(56px,9vw,92px)] font-light tracking-widest leading-[1.05] text-dark will-change-transform"
        >
          <span v-html="scene.title" />
        </h2>
      </div>
    </article>
  </section>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, onMounted, ref } from "vue";
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

interface Visual {
  src: string;
  alt: string;
  size: string;
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;

  baseRotate?: number;
  parallaxY?: number;
  parallaxX?: number;
  parallaxRotate?: number;
  parallaxScale?: number;
}

interface Scene {
  title: string;
  left: Visual;
  middle: Visual;
  right: Visual;
  extra: Visual;
}

const breakfastSectionRef = ref<HTMLElement | null>(null);

let ctx: gsap.Context | null = null;
let resizeTimer: number | null = null;
let mouseFrame: number | null = null;
let latestMouseEvent: MouseEvent | null = null;

const DESKTOP_IMAGE_PARALLAX_STRENGTH = 0.9;
const MOBILE_IMAGE_PARALLAX_STRENGTH = 0.38;

const DESKTOP_TITLE_PARALLAX_STRENGTH = 1.35;
const MOBILE_TITLE_PARALLAX_STRENGTH = 0.65;

const DESKTOP_MOUSE_PARALLAX_STRENGTH = 1.6;
const MOBILE_MOUSE_PARALLAX_STRENGTH = 0;

const isMobileParallax = (): boolean => {
  return window.innerWidth <= 768;
};

const getImageParallaxStrength = (): number => {
  return isMobileParallax()
    ? MOBILE_IMAGE_PARALLAX_STRENGTH
    : DESKTOP_IMAGE_PARALLAX_STRENGTH;
};

const getTitleParallaxStrength = (): number => {
  return isMobileParallax()
    ? MOBILE_TITLE_PARALLAX_STRENGTH
    : DESKTOP_TITLE_PARALLAX_STRENGTH;
};

const getMouseParallaxStrength = (): number => {
  return isMobileParallax()
    ? MOBILE_MOUSE_PARALLAX_STRENGTH
    : DESKTOP_MOUSE_PARALLAX_STRENGTH;
};

const createVisual = (
  imageNumber: number,
  config: Partial<Visual> = {},
): Visual => ({
  src: `/images/breakfast/${imageNumber}.webp`,
  alt: "",
  size: "",
  top: "50%",
  left: "50%",
  baseRotate: 0,
  parallaxX: 0,
  parallaxY: 220,
  parallaxRotate: 0,
  parallaxScale: 1.08,
  ...config,
});

const scenes: Scene[] = [
  {
    title: "SINIRSIZ Serpme Kahvaltı",
    left: createVisual(1, {
      alt: "Tulum Peyniri",
      size: "clamp(20px, 30vw, 920px)",
      left: "-2%",
      top: "0%",
      baseRotate: -8,
      parallaxY: 230,
      parallaxX: -52,
      parallaxRotate: -11,
      parallaxScale: 1.12,
    }),
    middle: createVisual(2, {
      alt: "Kırma Siyah Zeytin",
      size: "clamp(360px, 35vw, 640px)",
      left: "10%",
      top: "63%",
      baseRotate: 8,
      parallaxY: 300,
      parallaxX: 42,
      parallaxRotate: 10,
      parallaxScale: 1.1,
    }),
    right: createVisual(3, {
      alt: "Sucuk",
      size: "clamp(500px, 42vw, 900px)",
      right: "-5%",
      left: undefined,
      top: "48%",
      baseRotate: 12,
      parallaxY: 260,
      parallaxX: 58,
      parallaxRotate: 12,
      parallaxScale: 1.11,
    }),
    extra: createVisual(16, {
      alt: "Domates",
      size: "clamp(260px, 21vw, 440px)",
      right: "7%",
      left: undefined,
      top: "6%",
      baseRotate: -10,
      parallaxY: 340,
      parallaxX: -42,
      parallaxRotate: -12,
      parallaxScale: 1.14,
    }),
  },
  {
    title: "Bittikçe isteyin",
    left: createVisual(4, {
      alt: "Kaymak",
      size: "clamp(280px, 25vw, 560px)",
      left: "-3%",
      top: "5%",
      baseRotate: -10,
      parallaxY: 245,
      parallaxX: -48,
      parallaxRotate: -11,
      parallaxScale: 1.12,
    }),
    middle: createVisual(5, {
      alt: "Kurutulmuş Meyveler",
      size: "clamp(530px, 60vw, 780px)",
      left: "5%",
      top: "58%",
      baseRotate: 7,
      parallaxY: 315,
      parallaxX: 40,
      parallaxRotate: 10,
      parallaxScale: 1.1,
    }),
    right: createVisual(6, {
      alt: "Yeşil Zeytin",
      size: "clamp(420px, 36vw, 760px)",
      right: "-4%",
      left: undefined,
      top: "42%",
      baseRotate: 10,
      parallaxY: 270,
      parallaxX: 56,
      parallaxRotate: 12,
      parallaxScale: 1.11,
    }),
    extra: createVisual(7, {
      alt: "Tereyağı",
      size: "clamp(240px, 20vw, 430px)",
      right: "9%",
      left: undefined,
      top: "8%",
      baseRotate: -12,
      parallaxY: 360,
      parallaxX: -44,
      parallaxRotate: -13,
      parallaxScale: 1.14,
    }),
  },
  {
    title: "Tekrar getirelim",
    left: createVisual(8, {
      alt: "Bal",
      size: "clamp(300px, 27vw, 600px)",
      left: "-4%",
      top: "46%",
      baseRotate: 9,
      parallaxY: 285,
      parallaxX: -46,
      parallaxRotate: 11,
      parallaxScale: 1.11,
    }),
    middle: createVisual(9, {
      alt: "Lor Peynirli Reçel",
      size: "clamp(480px, 40vw, 660px)",
      left: "10%",
      top: "5%",
      baseRotate: -10,
      parallaxY: 240,
      parallaxX: 42,
      parallaxRotate: -11,
      parallaxScale: 1.12,
    }),
    right: createVisual(10, {
      alt: "Reçel",
      size: "clamp(430px, 37vw, 780px)",
      right: "-6%",
      left: undefined,
      top: "54%",
      baseRotate: 11,
      parallaxY: 330,
      parallaxX: 60,
      parallaxRotate: 12,
      parallaxScale: 1.11,
    }),
    extra: createVisual(11, {
      alt: "Salatalık",
      size: "clamp(350px, 30vw, 480px)",
      right: "10%",
      left: undefined,
      top: "-10%",
      baseRotate: -9,
      parallaxY: 370,
      parallaxX: -42,
      parallaxRotate: -12,
      parallaxScale: 1.14,
    }),
  },
  {
    title: "İçeriği bizden",
    left: createVisual(12, {
      alt: "Siyah Zeytin",
      size: "clamp(320px, 29vw, 640px)",
      left: "15%",
      top: "-5%",
      baseRotate: -11,
      parallaxY: 260,
      parallaxX: -54,
      parallaxRotate: -12,
      parallaxScale: 1.12,
    }),
    middle: createVisual(13, {
      alt: "Reçel",
      size: "clamp(300px, 40vw, 600px)",
      left: "5%",
      top: "60%",
      baseRotate: 8,
      parallaxY: 340,
      parallaxX: 42,
      parallaxRotate: 10,
      parallaxScale: 1.1,
    }),
    right: createVisual(14, {
      alt: "Patlıcan Ezmesi",
      size: "clamp(420px, 36vw, 760px)",
      right: "-4%",
      left: undefined,
      top: "42%",
      baseRotate: 12,
      parallaxY: 290,
      parallaxX: 62,
      parallaxRotate: 12,
      parallaxScale: 1.11,
    }),
    extra: createVisual(15, {
      alt: "Reçel",
      size: "clamp(240px, 20vw, 430px)",
      right: "8%",
      left: undefined,
      top: "7%",
      baseRotate: -12,
      parallaxY: 385,
      parallaxX: -46,
      parallaxRotate: -13,
      parallaxScale: 1.14,
    }),
  },
  {
    title: "Miktarı sizden",
    left: createVisual(20, {
      alt: "Ezine Peyniri",
      size: "clamp(290px, 26vw, 580px)",
      left: "-3%",
      top: "54%",
      baseRotate: 9,
      parallaxY: 300,
      parallaxX: -50,
      parallaxRotate: 11,
      parallaxScale: 1.11,
    }),
    middle: createVisual(17, {
      alt: "Menemen",
      size: "clamp(330px, 35vw, 620px)",
      left: "22%",
      top: "10%",
      baseRotate: -10,
      parallaxY: 250,
      parallaxX: 42,
      parallaxRotate: -11,
      parallaxScale: 1.12,
    }),
    right: createVisual(18, {
      alt: "Gözleme",
      size: "clamp(430px, 45vw, 780px)",
      right: "-6%",
      left: undefined,
      top: "-5%",
      baseRotate: 12,
      parallaxY: 350,
      parallaxX: 64,
      parallaxRotate: 13,
      parallaxScale: 1.11,
    }),
    extra: createVisual(19, {
      alt: "Pişi",
      size: "clamp(340px, 30vw, 430px)",
      right: "9%",
      left: undefined,
      top: "60%",
      baseRotate: -9,
      parallaxY: 400,
      parallaxX: -46,
      parallaxRotate: -12,
      parallaxScale: 1.14,
    }),
  },
];

const getSlides = (): HTMLElement[] => {
  if (!breakfastSectionRef.value) return [];

  return gsap.utils.toArray<HTMLElement>(
    breakfastSectionRef.value.querySelectorAll(".breakfast-slide"),
  );
};

const getSlideImages = (slide: HTMLElement): HTMLElement[] => {
  return gsap.utils.toArray<HTMLElement>(
    slide.querySelectorAll(".breakfast-promo-image"),
  );
};

const getVisualByElement = (
  scene: Scene,
  element: HTMLElement,
): Visual | undefined => {
  if (element.classList.contains("breakfast-promo-image-left")) {
    return scene.left;
  }

  if (element.classList.contains("breakfast-promo-image-middle")) {
    return scene.middle;
  }

  if (element.classList.contains("breakfast-promo-image-right")) {
    return scene.right;
  }

  if (element.classList.contains("breakfast-promo-image-extra")) {
    return scene.extra;
  }

  return undefined;
};

const waitForImages = async (): Promise<void> => {
  if (!breakfastSectionRef.value) return;

  const images = Array.from(
    breakfastSectionRef.value.querySelectorAll<HTMLImageElement>(
      ".breakfast-promo-image",
    ),
  );

  await Promise.all(
    images.map(async (img) => {
      if (!img.complete || img.naturalWidth === 0) {
        await new Promise<void>((resolve) => {
          img.addEventListener("load", () => resolve(), { once: true });
          img.addEventListener("error", () => resolve(), { once: true });
        });
      }

      try {
        await img.decode();
      } catch {
        // Decode hata verse bile animasyonu bloklama.
      }
    }),
  );
};

const applyMouseMove = (event: MouseEvent): void => {
  if (!breakfastSectionRef.value) return;
  if (window.innerWidth <= 1024) return;

  const mouseStrength = getMouseParallaxStrength();

  if (mouseStrength === 0) return;

  const section = breakfastSectionRef.value;
  const rect = section.getBoundingClientRect();

  const x = (event.clientX - rect.left) / rect.width - 0.5;
  const y = (event.clientY - rect.top) / rect.height - 0.5;

  const images = gsap.utils.toArray<HTMLElement>(
    section.querySelectorAll(".breakfast-promo-image"),
  );

  gsap.to(images, {
    x: `+=${x * 8 * mouseStrength}`,
    y: `+=${y * 8 * mouseStrength}`,
    rotateX: y * -4 * mouseStrength,
    rotateY: x * 4 * mouseStrength,
    duration: 0.25,
    ease: "power2.out",
    overwrite: "auto",
  });
};

const handleMouseMove = (event: MouseEvent): void => {
  latestMouseEvent = event;

  if (mouseFrame) return;

  mouseFrame = window.requestAnimationFrame(() => {
    mouseFrame = null;

    if (!latestMouseEvent) return;

    applyMouseMove(latestMouseEvent);
  });
};

const setInitialSlideState = (slide: HTMLElement, scene: Scene): void => {
  const images = getSlideImages(slide);
  const title = slide.querySelector<HTMLElement>(".breakfast-promo-title");

  if (title) {
    gsap.set(title, {
      y: 0,
      scale: 1,
    });
  }

  images.forEach((image) => {
    const visual = getVisualByElement(scene, image);

    if (!visual) return;

    gsap.set(image, {
      x: 0,
      y: 0,
      rotate: visual.baseRotate ?? 0,
      scale: 1,
      transformOrigin: "center center",
      transformStyle: "preserve-3d",
    });
  });
};

const initSlideParallax = (slide: HTMLElement, scene: Scene): void => {
  const images = getSlideImages(slide);
  const title = slide.querySelector<HTMLElement>(".breakfast-promo-title");

  setInitialSlideState(slide, scene);

  const parallaxTl = gsap.timeline({
    scrollTrigger: {
      trigger: slide,
      start: "top bottom",
      end: "bottom top",
      scrub: 0.9,
      invalidateOnRefresh: true,
    },
  });

  images.forEach((image) => {
    const visual = getVisualByElement(scene, image);

    if (!visual) return;

    const imageParallaxStrength = getImageParallaxStrength();

    const parallaxX = (visual.parallaxX ?? 0) * imageParallaxStrength;
    const parallaxY = (visual.parallaxY ?? 220) * imageParallaxStrength;
    const parallaxRotate = (visual.parallaxRotate ?? 0) * imageParallaxStrength;

    const baseRotate = visual.baseRotate ?? 0;
    const parallaxScale = 1 + ((visual.parallaxScale ?? 1.08) - 1) * 1.6;

    parallaxTl.fromTo(
      image,
      {
        x: -parallaxX * 0.9,
        y: -parallaxY * 0.6,
        rotate: baseRotate - parallaxRotate * 0.75,
        scale: 0.96,
      },
      {
        x: parallaxX,
        y: parallaxY,
        rotate: baseRotate + parallaxRotate,
        scale: parallaxScale,
        ease: "none",
      },
      0,
    );
  });

  if (title) {
    parallaxTl.fromTo(
      title,
      {
        y: -70,
        scale: 1.05,
      },
      {
        y: 90 * getTitleParallaxStrength(),
        scale: 0.94,
        ease: "none",
      },
      0,
    );
  }
};

const initBreakfastPromo = (): void => {
  ctx?.revert();
  ctx = null;

  if (!breakfastSectionRef.value) return;

  const section = breakfastSectionRef.value;

  ctx = gsap.context(() => {
    const slides = getSlides();

    slides.forEach((slide, index) => {
      const scene = scenes[index];

      if (!scene) return;

      initSlideParallax(slide, scene);
    });

    ScrollTrigger.refresh();
  }, section);
};

const handleResize = (): void => {
  if (resizeTimer) {
    window.clearTimeout(resizeTimer);
  }

  resizeTimer = window.setTimeout(() => {
    initBreakfastPromo();
  }, 180);
};

onMounted(async () => {
  await nextTick();

  try {
    await waitForImages();
  } finally {
    initBreakfastPromo();
  }

  window.addEventListener("resize", handleResize, {
    passive: true,
  });
});

onBeforeUnmount(() => {
  window.removeEventListener("resize", handleResize);

  if (resizeTimer) {
    window.clearTimeout(resizeTimer);
  }

  if (mouseFrame) {
    window.cancelAnimationFrame(mouseFrame);
  }

  ctx?.revert();
  ctx = null;
  resizeTimer = null;
});
</script>

<style scoped>
.breakfast-promo {
  isolation: isolate;
}

.breakfast-slide {
  isolation: isolate;
}

.breakfast-promo-image {
  z-index: 4;
  max-width: none;
  height: auto;
  transform-style: preserve-3d;
  will-change: transform;
  backface-visibility: hidden;
}

.breakfast-promo-image-extra {
  z-index: 6;
}

.breakfast-promo-title {
  position: relative;
  z-index: 20;
  width: min(72vw, 1120px);
  margin-inline: auto;
  font-size: clamp(56px, 9vw, 92px);
  line-height: 1.05;
  transform-style: preserve-3d;
  will-change: transform;
}

/* =========================================================
   1440+ BASE LAYOUT
   Bu mizanpaj referans alınır.
   Diğer ekranlar bu oranların küçültülmüş versiyonudur.
========================================================= */

.breakfast-promo-image-left {
  width: clamp(250px, 23vw, 410px);
}

.breakfast-promo-image-middle {
  width: clamp(240px, 24vw, 420px);
}

.breakfast-promo-image-right {
  width: clamp(330px, 31vw, 560px);
}

.breakfast-promo-image-extra {
  width: clamp(170px, 17vw, 300px);
}

/* Scene 0 — SINIRSIZ KAHVALTI */
.breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
  width: clamp(240px, 24vw, 430px);
}

.breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
  width: clamp(260px, 28vw, 450px);
}

.breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
  width: clamp(330px, 32vw, 580px);
}

.breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
  width: clamp(180px, 20vw, 340px);
}

/* Scene 1 — Bittikçe isteyin */
.breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
  width: clamp(300px, 29vw, 500px);
}

.breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
  width: clamp(320px, 31vw, 520px);
}

.breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
  width: clamp(330px, 32vw, 540px);
}

.breakfast-slide[data-scene-index="1"] .breakfast-promo-image-extra {
  width: clamp(170px, 17vw, 290px);
}

/* Scene 2 — Tekrar getirelim */
.breakfast-slide[data-scene-index="2"] .breakfast-promo-image-left {
  width: clamp(260px, 25vw, 430px);
}

.breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
  width: clamp(310px, 30vw, 510px);
}

.breakfast-slide[data-scene-index="2"] .breakfast-promo-image-right {
  width: clamp(330px, 32vw, 540px);
}

.breakfast-slide[data-scene-index="2"] .breakfast-promo-image-extra {
  width: clamp(210px, 21vw, 350px);
}

/* Scene 3 — İçeriği bizden */
.breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
  width: clamp(250px, 24vw, 420px);
}

.breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
  width: clamp(260px, 27vw, 450px);
}

.breakfast-slide[data-scene-index="3"] .breakfast-promo-image-right {
  width: clamp(330px, 31vw, 540px);
}

.breakfast-slide[data-scene-index="3"] .breakfast-promo-image-extra {
  width: clamp(210px, 21vw, 350px);
}

/* Scene 4 — Miktarı sizden */
.breakfast-slide[data-scene-index="4"] .breakfast-promo-image-left {
  width: clamp(260px, 25vw, 430px);
}

.breakfast-slide[data-scene-index="4"] .breakfast-promo-image-middle {
  width: clamp(280px, 28vw, 470px);
  scale: 0.9 !important;
  top: 0% !important;
}

.breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
  width: clamp(340px, 34vw, 560px);
}

.breakfast-slide[data-scene-index="4"] .breakfast-promo-image-extra {
  width: clamp(230px, 23vw, 380px);
}

/* =========================================================
   <= 1440
   1440 mizanpajını koru, sadece çok hafif sıkıştır.
========================================================= */

@media (max-width: 1440px) {
  .breakfast-promo-title {
    width: min(70vw, 980px);
    font-size: clamp(54px, 8vw, 82px);
  }

  .breakfast-promo-image-left {
    width: clamp(230px, 22vw, 380px);
  }

  .breakfast-promo-image-middle {
    width: clamp(220px, 23vw, 390px);
  }

  .breakfast-promo-image-right {
    width: clamp(300px, 30vw, 510px);
  }

  .breakfast-promo-image-extra {
    width: clamp(160px, 16vw, 270px);
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
    width: clamp(230px, 23vw, 390px);
    top: 2% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
    width: clamp(240px, 27vw, 410px);
    left: 9% !important;
    top: 62% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
    width: clamp(300px, 31vw, 520px);
    right: -7% !important;
    top: 48% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
    width: clamp(165px, 35vw, 300px);
    right: 8% !important;
    top: 5% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
    width: clamp(280px, 28vw, 450px);
    left: 0% !important;
    top: 6% !important;
    scale: 1.2 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
    width: clamp(300px, 30vw, 470px);
    left: 4% !important;
    top: 50% !important;
    scale: 1.2 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
    width: clamp(300px, 31vw, 490px);
    right: -6% !important;
    top: 42% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-extra {
    width: clamp(155px, 16vw, 250px);
    right: 9% !important;
    top: 8% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
    width: clamp(290px, 30vw, 470px);
    left: 9% !important;
    top: 10% !important;
    scale: 1.5 !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-extra {
    width: clamp(190px, 20vw, 320px);
    right: 10% !important;
    top: -5% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
    left: 13% !important;
    top: -3% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
    width: clamp(240px, 26vw, 400px);
    left: 5% !important;
    top: 61% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-extra {
    width: clamp(190px, 20vw, 320px);
    right: 8% !important;
    top: 7% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
    width: clamp(310px, 33vw, 500px);
    right: -6% !important;
    top: -3% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-extra {
    width: clamp(210px, 22vw, 340px);
    right: 9% !important;
    top: 61% !important;
  }
}

/* =========================================================
   <= 1200
========================================================= */

@media (max-width: 1200px) {
  .breakfast-promo-title {
    width: min(74vw, 860px);
    font-size: clamp(50px, 8vw, 76px);
  }

  .breakfast-promo-image-left {
    width: clamp(210px, 23vw, 330px);
  }

  .breakfast-promo-image-middle {
    width: clamp(205px, 24vw, 340px);
  }

  .breakfast-promo-image-right {
    width: clamp(270px, 31vw, 440px);
  }

  .breakfast-promo-image-extra {
    width: clamp(140px, 17vw, 220px);
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
    width: clamp(210px, 25vw, 350px);
    left: -4% !important;
    top: 3% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
    width: clamp(220px, 29vw, 370px);
    left: 7% !important;
    top: 63% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
    width: clamp(280px, 33vw, 460px);
    right: -9% !important;
    top: 50% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
    scale: 1.4 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
    width: clamp(250px, 29vw, 390px);
    left: -8% !important;
    top: 8% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
    width: clamp(260px, 31vw, 410px);
    left: 3% !important;
    top: 62% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
    width: clamp(270px, 32vw, 420px);
    right: -9% !important;
    top: 43% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
    width: clamp(260px, 31vw, 410px);
    left: 7% !important;
    top: 7% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-right {
    width: clamp(275px, 32vw, 430px);
    right: -9% !important;
    top: 55% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
    width: clamp(220px, 25vw, 350px);
    left: 10% !important;
    top: -2% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
    width: clamp(220px, 28vw, 360px);
    left: 4% !important;
    top: 63% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-middle {
    width: clamp(240px, 29vw, 380px);
    left: 18% !important;
    top: 11% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
    width: clamp(280px, 34vw, 430px);
    right: -10% !important;
    top: -2% !important;
  }
}

/* =========================================================
   <= 1024
   Tablet: yan görseller merkeze yaklaşmasın.
========================================================= */

@media (max-width: 1024px) {
  .breakfast-promo-title {
    width: min(78vw, 760px);
    font-size: clamp(48px, 8.5vw, 70px);
  }

  .breakfast-promo-image-left {
    width: clamp(180px, 25vw, 280px);
  }

  .breakfast-promo-image-middle {
    width: clamp(180px, 26vw, 290px);
  }

  .breakfast-promo-image-right {
    width: clamp(230px, 33vw, 370px);
  }

  .breakfast-promo-image-extra {
    width: clamp(120px, 18vw, 190px);
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
    width: clamp(190px, 28vw, 310px);
    left: -7% !important;
    top: 4% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
    width: clamp(200px, 31vw, 330px);
    left: 4% !important;
    top: 66% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
    width: clamp(240px, 36vw, 390px);
    right: -12% !important;
    top: 53% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
    width: clamp(130px, 20vw, 220px);
    right: 8% !important;
    top: 6% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
    width: clamp(210px, 31vw, 340px);
    left: -11% !important;
    top: 10% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
    width: clamp(220px, 34vw, 350px);
    left: 0% !important;
    top: 66% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
    width: clamp(230px, 35vw, 360px);
    right: -13% !important;
    top: 46% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-left {
    left: -10% !important;
    top: 48% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
    width: clamp(220px, 34vw, 350px);
    left: 4% !important;
    top: 9% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-right {
    right: -13% !important;
    top: 57% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-extra {
    width: clamp(150px, 24vw, 250px);
    right: 8% !important;
    top: -2% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
    left: 8% !important;
    top: 0% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
    left: 2% !important;
    top: 66% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-right {
    right: -12% !important;
    top: 45% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-left {
    left: -10% !important;
    top: 56% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-middle {
    left: 14% !important;
    top: 12% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
    right: -13% !important;
    top: 0% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-extra {
    width: clamp(160px, 25vw, 260px);
    right: 8% !important;
    top: 63% !important;
  }
}

/* =========================================================
   <= 768
   Mobil/tablet dikey: yazının etrafında nefes bırak.
========================================================= */

@media (max-width: 768px) {
  .breakfast-promo-title {
    width: min(84vw, 640px);
    font-size: clamp(44px, 11vw, 68px);
    line-height: 1;
    letter-spacing: 0.08em;
  }

  .breakfast-promo-image-left {
    width: clamp(145px, 32vw, 230px);
  }

  .breakfast-promo-image-middle {
    width: clamp(145px, 33vw, 240px);
  }

  .breakfast-promo-image-right {
    width: clamp(180px, 40vw, 300px);
  }

  .breakfast-promo-image-extra {
    width: clamp(95px, 23vw, 165px);
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
    width: clamp(155px, 36vw, 260px);
    left: -10% !important;
    top: 6% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
    width: clamp(165px, 38vw, 270px);
    left: -3% !important;
    top: 69% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
    width: clamp(200px, 47vw, 340px);
    right: -18% !important;
    top: 55% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
    width: clamp(105px, 25vw, 180px);
    right: 15% !important;
    top: 10% !important;
    scale: 2 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
    width: clamp(170px, 40vw, 290px);
    left: -17% !important;
    top: 12% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
    width: clamp(180px, 42vw, 300px);
    left: -6% !important;
    top: 60% !important;
    scale: 1.6 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
    width: clamp(185px, 43vw, 310px);
    right: -20% !important;
    top: 49% !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-extra {
    right: 6% !important;
    top: 9% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-left {
    left: -10% !important;
    top: 60% !important;
    scale: 0.7 !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
    width: clamp(180px, 42vw, 300px);
    left: 0% !important;
    top: 20% !important;
    scale: 2 !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-right {
    right: -21% !important;
    top: 60% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-extra {
    width: clamp(120px, 29vw, 210px);
    right: 5% !important;
    top: 0% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
    left: 2% !important;
    top: 20% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
    left: -5% !important;
    top: 60% !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-right {
    right: -20% !important;
    top: 49% !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-left {
    left: -16% !important;
    top: 58% !important;
    scale: 0.8 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-middle {
    left: 0% !important;
    top: 13% !important;
    scale: 1.1 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
    right: -25% !important;
    top: 2% !important;
    scale: 1.1 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-extra {
    width: clamp(130px, 32vw, 225px);
    right: 6% !important;
    top: 66% !important;
    scale: 1.6 !important;
  }
}
/* =========================================================
   <= 425
   768 mizanpajının oranlı küçültülmüş versiyonu.
========================================================= */

@media (max-width: 425px) {
  .breakfast-promo-title {
    width: min(86vw, 390px);
    font-size: clamp(40px, 12.5vw, 58px);
    line-height: 1;
    letter-spacing: 0.06em;
  }

  .breakfast-promo-image-left {
    width: clamp(128px, 34vw, 180px);
  }

  .breakfast-promo-image-middle {
    width: clamp(132px, 35vw, 185px);
  }

  .breakfast-promo-image-right {
    width: clamp(158px, 42vw, 235px);
  }

  .breakfast-promo-image-extra {
    width: clamp(82px, 23vw, 128px);
  }

  /* Scene 0 */
  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-left {
    width: clamp(138px, 37vw, 200px);
    left: 0% !important;
    top: 7% !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-middle {
    width: clamp(148px, 39vw, 215px);
    left: 0% !important;
    top: 60% !important;
    scale: 1.6 !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-right {
    width: clamp(175px, 47vw, 270px);
    right: -10% !important;
    top: 60% !important;
    scale: 1.4 !important;
  }

  .breakfast-slide[data-scene-index="0"] .breakfast-promo-image-extra {
    width: clamp(92px, 25vw, 145px);
    right: 12% !important;
    top: 10% !important;
    scale: 2.4 !important;
  }

  /* Scene 1 */
  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-left {
    width: clamp(150px, 40vw, 230px);
    left: 5% !important;
    top: 0% !important;
    scale: 1.9 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-middle {
    width: clamp(158px, 42vw, 240px);
    left: 0% !important;
    top: 62% !important;
    scale: 1.9 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-right {
    width: clamp(162px, 43vw, 245px);
    right: 0% !important;
    top: 55% !important;
    scale: 1.7 !important;
  }

  .breakfast-slide[data-scene-index="1"] .breakfast-promo-image-extra {
    right: 6% !important;
    top: 10% !important;
    scale: 0.8 !important;
  }

  /* Scene 2 */
  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-left {
    left: -20% !important;
    top: 60% !important;
    scale: 0.5 !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-middle {
    width: clamp(158px, 42vw, 240px);
    left: -1% !important;
    top: 15% !important;
    scale: 2.5 !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-right {
    right: -20% !important;
    top: 61% !important;
  }

  .breakfast-slide[data-scene-index="2"] .breakfast-promo-image-extra {
    width: clamp(105px, 29vw, 165px);
    right: 5% !important;
    top: 1% !important;
  }

  /* Scene 3 */
  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-left {
    left: 2% !important;
    top: 20% !important;
    scale: 0.8 !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-middle {
    left: -5% !important;
    top: 62% !important;
    scale: 0.8 !important;
  }

  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-right {
    right: -20% !important;
    top: 50% !important;
  }
  .breakfast-slide[data-scene-index="3"] .breakfast-promo-image-extra {
    top: 0% !important;
    scale: 1.2 !important;
  }

  /* Scene 4 */
  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-left {
    left: -5% !important;
    top: 50% !important;
    scale: 0.7 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-middle {
    left: 0% !important;
    top: 10% !important;
    scale: 1 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-right {
    right: -23% !important;
    top: -10% !important;
    scale: 0.9 !important;
  }

  .breakfast-slide[data-scene-index="4"] .breakfast-promo-image-extra {
    width: clamp(116px, 32vw, 180px);
    right: 6% !important;
    top: 70% !important;
    scale: 1.1 !important;
  }
}
</style>