/* ERKEN KAYIT AVANTAJLARI BOLUMU — /enwa-maraton90 (15.09.2026)
   Kullanici karari: "aynı figmadaki tasarımla olmak zorunda".
   Kurallar desktop-erken-kayit.css'ten BIREBIR kopyalandi, yeniden yazilmadi.
   --ek-u = clamp(0.62px, 0.0520833vw, 1px): 1920px'te 1px => Figma olculeri 1:1.
   Degiskenler :root yerine BOLUMUN KENDI kapsamina alindi; sayfanin geri
   kalani etkilenmez, maraton90'in kendi stilleriyle carpismaz. */
.maraton-early-perks-wrap {
  /* OLCEK (15.09.2026): bolum 1920px'lik /erken-kayit tasarimindan geliyor; maraton90'in
     kabugu ise 1200px. Kullanici "fontu sayfanin geri kalanindan buyuk" dedi - olculdu:
     baslik 48/40, aciklama 24/18, kart basligi 24/20, kart metni 20/18, genislik 1744/1200.
     Figma ORANLARI bozulmadan tek bir carpanla sayfanin olcegine indiriliyor:
     Olcek TIPOGRAFIYE gore secildi: 40/48 = 0.8333 -> baslik 40px ve kart basligi 20px,
     yani sayfanin .section-heading h2 / .tool-card h3 degerleriyle AYNI.
     Genislik ayrica asagida 1200px kabuga sabitlendi (tek carpan ikisini birden tutmuyor). */
  --ek-olcek: 0.8333;
  --ek-u: calc(clamp(0.62px, 0.0520833vw, 1px) * var(--ek-olcek));
  --ek-pink: #FF0073;
  --ek-pink-deep: #FF016B;
  --ek-pink-mid: #FF72AD;
  --ek-pink-soft: #FFB4D3;
  --ek-cream: #FFEFCB;
  --ek-green: #009B0F;
  --ek-num: #F42B66;
  --ek-btn-line: #F4678E;
  --ek-muted: #7C7C7C;
  --ek-container: calc(1672 * var(--ek-u));
}

.ek-pink { color: var(--ek-pink); }

.ek-badge {
  display: inline-flex;
  align-items: center;
  border-radius: calc(19 * var(--ek-u));
  background: var(--ek-pink);
  color: #ffffff;
  font-weight: 700;
  font-size: calc(24 * var(--ek-u));
  line-height: calc(27.6 * var(--ek-u));
  white-space: nowrap;
}

.ek-badge-limited {
  height: calc(47 * var(--ek-u));
  padding: 0 calc(38 * var(--ek-u));
  letter-spacing: calc(1.44 * var(--ek-u));
  background: linear-gradient(90deg, #FF0051 0%, #990030 100%);
  box-shadow: 0 calc(4 * var(--ek-u)) calc(14.9 * var(--ek-u)) rgba(0, 0, 0, 0.35);
}

.ek-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(365 * var(--ek-u));
  max-width: 100%;
  height: calc(63 * var(--ek-u));
  border-radius: calc(19 * var(--ek-u));
  font-weight: 900;
  font-size: calc(25 * var(--ek-u));
  line-height: calc(28.75 * var(--ek-u));
  letter-spacing: calc(1.5 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(14.9 * var(--ek-u)) rgba(0, 0, 0, 0.35);
  transition: transform .18s ease, filter .18s ease;
}

.ek-btn:hover { transform: translateY(calc(-2 * var(--ek-u))); filter: brightness(1.04); }

.ek-btn-pink { background: var(--ek-pink); color: #ffffff; }

.ek-perks { padding-top: calc(152 * var(--ek-u)); }

.ek-perks-card {
  width: min(100% - calc(48 * var(--ek-u)), 1200px);  /* sayfanin kabugu */
  margin-inline: auto;
  background: #ffffff;
  border-radius: calc(53 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(41.5 * var(--ek-u)) rgba(0, 0, 0, 0.25);
  padding: calc(44 * var(--ek-u)) calc(66 * var(--ek-u)) calc(68 * var(--ek-u));
  text-align: center;
}

.ek-perks-title {
  margin: calc(31 * var(--ek-u)) 0 0;
  font-size: calc(48 * var(--ek-u));
  font-weight: 800;
  line-height: calc(58.09 * var(--ek-u));
}

.ek-perks-desc {
  margin: calc(22 * var(--ek-u)) auto 0;
  max-width: calc(1543 * var(--ek-u));
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
}

.ek-perks-cards {
  margin-top: calc(46 * var(--ek-u));
  display: grid;
  grid-template-columns: repeat(3, calc(515 * var(--ek-u)));
  justify-content: center;
  column-gap: calc(33 * var(--ek-u));
  row-gap: calc(27 * var(--ek-u));
  text-align: left;
}

.ek-perk {
  min-height: calc(222 * var(--ek-u));
  background: #ffffff;
  border-radius: calc(16 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(18.5 * var(--ek-u)) rgba(0, 0, 0, 0.21), 0 calc(4 * var(--ek-u)) calc(18.5 * var(--ek-u)) rgba(0, 0, 0, 0.21);
  padding: calc(11 * var(--ek-u)) calc(17 * var(--ek-u)) calc(18 * var(--ek-u)) calc(15 * var(--ek-u));
}

.ek-perk-head { display: flex; align-items: center; gap: calc(17 * var(--ek-u)); min-height: calc(60 * var(--ek-u)); }

.ek-perk-icon {
  flex: 0 0 calc(60 * var(--ek-u));
  width: calc(60 * var(--ek-u));
  height: calc(60 * var(--ek-u));
  border-radius: 50%;
  background: var(--ek-bubble, #FBE4E7);
  box-shadow: 0 calc(4 * var(--ek-u)) calc(4 * var(--ek-u)) rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.ek-perk-head h3 {
  margin: 0;
  max-width: calc(344 * var(--ek-u));
  font-size: calc(24 * var(--ek-u));
  font-weight: 700;
  line-height: calc(29.045 * var(--ek-u));
}

.ek-perk > p {
  margin: calc(21 * var(--ek-u)) 0 0 calc(10 * var(--ek-u));
  width: calc(473 * var(--ek-u));
  max-width: 100%;
  font-size: calc(20 * var(--ek-u));
  font-weight: 500;
  line-height: calc(24.205 * var(--ek-u));
}

.ek-perk > p b { font-weight: 700; }

.ek-perks-cta { margin-top: calc(61 * var(--ek-u)); }

@media (max-width: 1200px) {
  .ek-perks-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-perk > p { width: auto; }
}

@media (max-width: 768px) {
  .ek-perks { padding-top: 32px; }
  .ek-perks-card { width: calc(100% - 24px); border-radius: 21px; padding: 9px 0 20px; box-shadow: 0 4px 28px rgba(0, 0, 0, 0.11); }
  .ek-badge-limited { height: 16px; padding: 0 9px; font-size: 9px; line-height: 10.35px; letter-spacing: 0.54px; }
  .ek-perks-title { margin: 14px 16px 0; font-size: 14px; line-height: 16.943px; }
  .ek-perks-desc { margin: 14px 16px 0; font-size: 10px; line-height: 12.102px; }
  .ek-perks-cards {
    margin-top: 21px;
    display: flex;
    
    justify-content: flex-start;
    grid-template-columns: none;
    gap: 25px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-left: 16px;
    padding: 4px 16px 8px;
    -webkit-overflow-scrolling: touch;
  }
  .ek-perk {
    flex: 0 0 285px;
    min-height: 130px;
    scroll-snap-align: start;
    padding: 5px 8px 10px;
    box-shadow: 0 4px 18.5px rgba(0, 0, 0, 0.10);
  }
  .ek-perk-head { gap: 12px; min-height: 37px; }
  .ek-perk-icon { flex: 0 0 37px; width: 37px; height: 37px; }
  .ek-perk-icon img { width: 60%; height: auto; }
  .ek-perk-head h3 { font-size: 15px; line-height: 18.153px; max-width: none; }
  .ek-perk > p { margin: 10px 0 0 7px; width: auto; font-size: 12px; line-height: 14.523px; }
  .ek-perks-cta { margin-top: 20px; padding-inline: 16px; }
  .ek-btn { width: 100%; max-width: 300px; height: 44px; font-size: 16px; line-height: 18px; letter-spacing: 1px; border-radius: 14px; }
  .ek-plan .ek-btn { margin: 24px auto 24px; }
}