/* ===== HERO SECTION ===== */
.hero {
  padding-top: 140px;
  padding-bottom: 20px;
  text-align: center;
  position: relative;
}

@keyframes phoneGlowPulse {
  0%, 100% {
    opacity: 0.88;
  }
  50% {
    opacity: 1;
  }
}

@keyframes phoneGlowInner {
  0%, 100% {
    opacity: 0.52;
  }
  50% {
    opacity: 0.95;
  }
}

.hero h1 {
  font-size: 72px;
  font-weight: 600;
  line-height: 85px;
  letter-spacing: -2.88px;
  color: var(--black);
  position: relative;
  z-index: 2;
  white-space: pre-line;
  padding: 0 var(--side);
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'DM Sans', sans-serif;
  font-size: 21px;
  font-weight: 300;
  letter-spacing: normal;
  color: var(--black);
  position: relative;
  z-index: 2;
  vertical-align: baseline;
  margin-left: 12px;
  white-space: nowrap;
  text-decoration: none;
}

.hero-badge .chk {
  width: 28px;
  height: 28px;
  display: inline-block;
  vertical-align: middle;
}

/* ===== HERO COMPOSITION (FLEXBOX) & ANIMATIONS ===== */
@keyframes floatPhone {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

@keyframes floatSideLeft {
  0%, 100% {
    transform: translateY(20px);
  }
  50% {
    transform: translateY(5px);
  }
}

@keyframes floatSideRight {
  0%, 100% {
    transform: translateY(40px);
  }
  50% {
    transform: translateY(25px);
  }
}

@keyframes fadeUp {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.hero-comp {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--page-w);
  margin: 40px auto 0;
  height: 700px;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: fadeUp 1s ease-out forwards;
}

/* Left cards */
.hero-left {
  z-index: 2;
  width: 370px;
  margin-right: -20px; /* Telefona yaklaşması için negatif boşluk */
  animation: floatSideLeft 5s ease-in-out infinite;
}

/* iPhone mockup */
.hero-phone {
  z-index: 4;
  width: 341px;
  position: relative;
  animation: floatPhone 4s ease-in-out infinite;
}

/* Glow — Figma: Ellipse 409×768, #FFA365, blur 264px */
.phone-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 409px;
  height: 700px;
  background: #FFA365;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.85;
  pointer-events: none;
  z-index: 3;
  animation: phoneGlowPulse 6s ease-in-out infinite;
}

.hero-phone-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 24px 48px rgba(0, 0, 0, 0.18));
}

/* Hero side images */
.hero-side-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.08));
}

/* Right product card */
.hero-right {
  z-index: 2;
  width: 330px;
  margin-left: -20px; /* Telefona yaklaşması için negatif boşluk */
  animation: floatSideRight 6s ease-in-out infinite;
  animation-delay: 1s; /* Dalgalanma hissi için gecikme */
}

/* Store badges — bottom right (Yan Yana) */
.hero-stores-right {
  position: absolute;
  right: 60px;
  bottom: 40px;
  z-index: 5;
  display: flex;
  flex-direction: row;
  gap: 16px;
}

.sbadge {
  display: block;
  transition: transform 0.2s;
}

.sbadge:hover {
  transform: scale(1.05) translateY(-3px);
}

.sbadge img {
  height: 47px;
  width: auto;
  display: block;
}

/* Mobile store badges — centered, visible only ≤960px */
.hero-stores-mob {
  display: none;
  justify-content: center;
  gap: 12px;
  padding: 20px 0 50px;
  position: relative;
  z-index: 5;
}

.sbadge {
  height: 40px;
  display: block;
  transition: transform 0.2s;
}

.sbadge:hover {
  transform: scale(1.05);
}

.sbadge img {
  height: 40px;
  width: auto;
}