/* =====================================================================
   /erken-kayit  —  Figma "Erken Kayıt" (w12NU3XphETcUxUHSK4m66)
   Masaustu referans karesi: 1920x7527 (node 1:166)
   Mobil referans karesi:     390x5487 (node 1:430)
   Tum olculer/renkler dogrudan Figma dugumlerinden alinmistir; koordinat
   yorumu icin bkz. handoff.md 09.09.2026 kaydi.
   ===================================================================== */

:root {
  /* AKICI OLCEK (09.09.2026). Tasarim 1920px'e gore cizildi; bu bolumdeki TUM
     olculer bu birimin katidir. 1920'de --ek-u = 1px (tasarimin birebir kendisi),
     daha dar ekranlarda oransal kuculur: 1440px'te 0.75px -> kullanicinin
     tarayicida %75 zoom yapinca gordugu goruntunun AYNISI, ama zoom yapmadan.
     0.0520833vw = 100vw / 1920. Taban 0.62px (~1190px'te doluyor); altinda
     1200px kirilimi devreye girip duzeni yeniden diziyor. Kenarlik kalinliklari
     (border/outline) bilerek sabit birakildi - olceklenince bulaniklasirlar. */
  --ek-u: clamp(0.62px, 0.0520833vw, 1px);
  --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-body {
  margin: 0;
  background: #ffffff;
  color: #000000;
  font-family: "Inter", "Open Sans", sans-serif;
  -webkit-font-smoothing: antialiased;
}

.ek-page * { box-sizing: border-box; }
.ek-page img { display: block; max-width: 100%; }
/* `color: inherit` BUTONLARI DISARIDA BIRAKIR (11.09.2026, Figma geri bildirimi
   "pembe butonun fontu beyaz olmali"). Eski kural `.ek-page a` (oncelik 0,1,1)
   `.ek-btn-pink`/`.ek-btn-ghost` (0,1,0) kurallarini eziyordu; UC butonun da yazisi
   siyah cikiyordu (canlida olculdu: rgb(0,0,0)). */
/* KAPSAM `main` ILE SINIRLI (11.09.2026). `color: inherit` PAYLASILAN FOOTER'A
   da uyguleniyordu: `.ek-page a` (0,1,1) ile `.site-footer a` (0,1,1) esit
   oncelikte ve bu dosya shared-header-footer.css'ten SONRA yuklendigi icin
   kazaniyor, footer linkleri koyu zeminde SIYAH kaliyordu (canlida olculdu:
   rgb(0,0,0); ayni footer /sepet'te rgb(246,246,246)). Kural zaten yalnizca
   landing icerigi icindi; paylasilan kabuk disarida birakildi. */
.ek-page main a { text-decoration: none; }
.ek-page main a:not(.ek-btn) { color: inherit; }
.ek-page button, .ek-page input, .ek-page select { font: inherit; }

.ek-c {
  width: min(100% - calc(48 * var(--ek-u)), var(--ek-container));
  margin-inline: auto;
}

.ek-pink { color: var(--ek-pink); }
.ek-w500 { font-weight: 500; }
.ek-w400 { font-weight: 400 !important; }

.ek-h2 {
  margin: 0;
  font-size: calc(48 * var(--ek-u));
  font-weight: 800;
  line-height: calc(58.09 * var(--ek-u));
  text-align: center;
}

/* ---------- ortak rozet ---------- */
.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;
}

/* ---------- ortak buton ---------- */
.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-btn-plan { border: 2px solid var(--ek-btn-line); }
.ek-btn-ghost { background: #ffffff; border: 2px solid var(--ek-btn-line); color: var(--ek-pink); }

/* =====================================================================
   1) Duyuru seridi  (Figma 1:207 — 1920x52, #FF0073)
   ===================================================================== */
.ek-topbar {
  position: relative;
  height: calc(52 * var(--ek-u));
  background: var(--ek-pink);
  box-shadow: 0 calc(4 * var(--ek-u)) calc(33.2 * var(--ek-u)) rgba(0, 0, 0, 0.25);
  overflow: hidden;
  z-index: 5;
}
.ek-topbar-bolt { position: absolute; filter: blur(calc(9.4 * var(--ek-u))); pointer-events: none; }
.ek-topbar-bolt img { width: 100%; height: 100%; }
.ek-topbar-bolt-l1 { left: calc(15 * var(--ek-u));  top: calc(-21 * var(--ek-u)); width: calc(114 * var(--ek-u)); height: calc(114 * var(--ek-u)); }
.ek-topbar-bolt-l2 { left: calc(175 * var(--ek-u)); top: calc(-21 * var(--ek-u)); width: calc(55 * var(--ek-u));  height: calc(55 * var(--ek-u)); }
.ek-topbar-bolt-l3 { left: calc(296 * var(--ek-u)); top: calc(22 * var(--ek-u));  width: calc(49 * var(--ek-u));  height: calc(49 * var(--ek-u)); }
.ek-topbar-bolt-r1 { right: calc(344 * var(--ek-u)); top: calc(-21 * var(--ek-u)); width: calc(114 * var(--ek-u)); height: calc(114 * var(--ek-u)); }
.ek-topbar-bolt-r2 { right: calc(243 * var(--ek-u)); top: calc(-21 * var(--ek-u)); width: calc(55 * var(--ek-u));  height: calc(55 * var(--ek-u)); }
.ek-topbar-bolt-r3 { right: calc(128 * var(--ek-u)); top: calc(22 * var(--ek-u));  width: calc(49 * var(--ek-u));  height: calc(49 * var(--ek-u)); }

.ek-topbar-inner {
  position: relative;
  z-index: 1;
  height: calc(52 * var(--ek-u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ek-topbar-icon { width: calc(28 * var(--ek-u)); height: calc(28 * var(--ek-u)); margin: 0 calc(75 * var(--ek-u)) 0 calc(76 * var(--ek-u)); }
.ek-topbar-arrow { width: calc(24 * var(--ek-u)); height: calc(24 * var(--ek-u)); }
.ek-topbar-arrow-prev { transform: scaleX(-1); }
.ek-topbar-arrow-next { margin-left: calc(179 * var(--ek-u)); }
.ek-topbar-text {
  color: #ffffff;
  font-size: calc(16 * var(--ek-u));
  font-weight: 400;
  line-height: calc(24 * var(--ek-u));
  letter-spacing: calc(-0.176 * var(--ek-u));
  text-align: center;
}
.ek-topbar-text u { font-weight: 500; }

/* =====================================================================
   2) Hero  (Figma 1:218 basligi 124,230 / form 1013,158 / gorsel 1408,186)
   ===================================================================== */
.ek-hero {
  position: relative;
  padding: calc(106 * var(--ek-u)) 0 0;
  overflow: hidden;
}
.ek-hero::after {           /* Rectangle 10 — gorselin ARKASINDAKI acik pembe serit */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(14 * var(--ek-u));
  background: var(--ek-pink-soft);
  z-index: 0;
}
.ek-hero-inner {
  position: relative;
  display: grid;
  grid-template-columns: calc(889 * var(--ek-u)) calc(527 * var(--ek-u));
  justify-content: start;
  align-items: start;
  padding-bottom: calc(46 * var(--ek-u));      /* form karti alti 953 -> bolum sonu 999 */
}

.ek-hero-left { position: relative; z-index: 1; }
.ek-badge-hero { height: calc(47 * var(--ek-u)); padding: 0 calc(27 * var(--ek-u)); margin-left: calc(3 * var(--ek-u)); letter-spacing: calc(-0.264 * var(--ek-u)); }
.ek-hero-title {
  margin: calc(25 * var(--ek-u)) 0 0;
  font-size: calc(60 * var(--ek-u));
  font-weight: 800;
  line-height: calc(69 * var(--ek-u));
  letter-spacing: calc(-0.66 * var(--ek-u));
}
.ek-hero-desc {
  margin: calc(49 * var(--ek-u)) 0 0;
  width: calc(895 * var(--ek-u));
  font-size: calc(36 * var(--ek-u));
  font-weight: 400;
  line-height: calc(43.568 * var(--ek-u));
}
.ek-hero-features {
  list-style: none;
  margin: calc(50 * var(--ek-u)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: calc(422 * var(--ek-u)) auto;
  row-gap: calc(50 * var(--ek-u));
}
.ek-hero-features li { display: flex; align-items: center; gap: calc(14 * var(--ek-u)); min-height: calc(34 * var(--ek-u)); }
.ek-hero-features li span {
  font-size: calc(24 * var(--ek-u));
  font-weight: 600;
  line-height: calc(27.6 * var(--ek-u));
  letter-spacing: calc(-0.264 * var(--ek-u));
}
.ek-page .ek-hf-pink { display: none; }

/* --- form karti --- */
.ek-hero-form {
  position: relative;
  scroll-margin-top: calc(120 * var(--ek-u));
  z-index: 1;
  background: #ffffff;
  border: 1px solid #BDBDBD;
  border-radius: calc(35 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(20 * var(--ek-u)) rgba(0, 0, 0, 0.18);
  padding: calc(26 * var(--ek-u)) calc(40 * var(--ek-u)) calc(27 * var(--ek-u));
}
.ek-form-title {
  width: calc(556 * var(--ek-u));
  margin: 0 calc(-55 * var(--ek-u)) 0 calc(-54 * var(--ek-u));
  font-size: calc(32 * var(--ek-u));
  font-weight: 800;
  line-height: calc(43.382 * var(--ek-u));
  text-align: center;
}
.ek-form-title span { font-weight: 400; }
.ek-form-title b { font-weight: 800; }

.ek-form { margin-top: calc(35 * var(--ek-u)); }
.ek-field { margin-bottom: calc(18 * var(--ek-u)); }
.ek-field input[type="text"],
.ek-field input[type="email"],
.ek-field input[type="tel"] {
  width: 100%;
  height: calc(59 * var(--ek-u));
  padding: 0 calc(16 * var(--ek-u));
  border: 1px solid #D9D9D9;
  border-radius: calc(8 * var(--ek-u));
  background: #ffffff;
  font-size: calc(20 * var(--ek-u));
  font-weight: 400;
  line-height: calc(20 * var(--ek-u));
  color: #000000;
  outline: none;
}
.ek-field input::placeholder { color: #B3B3B3; }
.ek-field input:focus { border-color: var(--ek-pink); }

.ek-field-phone { display: flex; gap: calc(11 * var(--ek-u)); margin-bottom: 0; }
.ek-phone-code {
  position: relative;
  flex: 0 0 calc(120 * var(--ek-u));
  height: calc(59 * var(--ek-u));
  display: flex;
  align-items: center;
  padding: 0 calc(16 * var(--ek-u));
  border: 1px solid #D9D9D9;
  border-radius: calc(8 * var(--ek-u));
  background: #000000;
  color: #ffffff;
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(24 * var(--ek-u));
}
.ek-phone-code select {
  position: absolute;
  inset: 0;
  opacity: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.ek-field-phone input { flex: 1 1 auto; min-width: 0; }

/* --- onay kutulari --- */
.ek-check {
  display: flex;
  align-items: flex-start;
  gap: calc(10 * var(--ek-u));
  color: var(--ek-muted);
  cursor: pointer;
}
.ek-check input[type="checkbox"] {
  flex: 0 0 calc(26 * var(--ek-u));
  width: calc(26 * var(--ek-u));
  height: calc(26 * var(--ek-u));
  margin: 0;
  border: 1px solid #000000;
  border-radius: calc(2 * var(--ek-u));
  background: #ffffff;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
}
.ek-check input[type="checkbox"]:checked { background: var(--ek-pink); border-color: var(--ek-pink); }
.ek-check input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: calc(8 * var(--ek-u)); top: calc(3 * var(--ek-u));
  width: calc(7 * var(--ek-u)); height: calc(13 * var(--ek-u));
  border: solid #ffffff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.ek-check-all { margin-top: calc(24 * var(--ek-u)); }
.ek-check-all span { font-size: calc(20 * var(--ek-u)); font-weight: 400; line-height: calc(23 * var(--ek-u)); letter-spacing: calc(-0.22 * var(--ek-u)); margin-top: calc(2 * var(--ek-u)); }
.ek-check-kvkk { margin-top: calc(17 * var(--ek-u)); }
.ek-check-eti { margin-top: calc(13 * var(--ek-u)); }
.ek-check-kvkk span,
.ek-check-eti span { font-size: calc(16 * var(--ek-u)); font-weight: 400; line-height: calc(18.4 * var(--ek-u)); letter-spacing: calc(-0.176 * var(--ek-u)); }
.ek-check-kvkk a { color: #474545; font-weight: 500; text-decoration: underline; }
.ek-check-kvkk b { color: #474545; font-weight: 500; }
.ek-check-eti span { color: #757575; }

.ek-submit {
  width: 100%;
  height: calc(62 * var(--ek-u));
  margin-top: calc(24 * var(--ek-u));
  border: 0;
  border-radius: calc(16 * var(--ek-u));
  background: var(--ek-pink);
  color: #ffffff;
  font-size: calc(24 * var(--ek-u));
  font-weight: 700;
  line-height: calc(24 * var(--ek-u));
  cursor: pointer;
  transition: filter .18s ease;
}
.ek-submit:hover { filter: brightness(1.06); }
.ek-form .form-feedback { margin: calc(14 * var(--ek-u)) 0 0; font-size: calc(16 * var(--ek-u)); line-height: 1.45; }
.ek-form .form-feedback[hidden] { display: none; }
.ek-form .form-feedback.is-error { color: #C62828; }
.ek-form .form-feedback.is-success { color: #1B7F3B; }

/* --- hero gorseli (Figma 1:203) --- */
.ek-hero-visual {
  /* Konumun dayanagi `.ek-hero-form` (position:relative). Ofsetler kartin PADDING
     kutusuna gore olculur; kartin 1px cercevesi bu yuzden hesaba katilmistir:
       padding kutusu sag kenari 1538.96, ust kenari 158.97
       hedef (Figma image342)   sag kenar 1952.00, ust kenar 186.00
       -> right = 1538.96 - 1952 = -413   |   top = 186 - 158.97 = 27
     Tarayicida olculdu: x 1407.98 / y 185.95 (Figma 1408.24 / 186.00). */
  position: absolute;
  top: calc(27 * var(--ek-u));
  right: calc(-413 * var(--ek-u));
  width: calc(544 * var(--ek-u));
  height: calc(816 * var(--ek-u));
  margin: 0;
  z-index: 2;
  pointer-events: none;
}
.ek-hero-visual img { width: calc(544 * var(--ek-u)); height: calc(816 * var(--ek-u)); object-fit: contain; }
.ek-hero-visual::before {           /* image 343 — bulanik/soluk kopya */
  content: "";
  position: absolute;
  left: calc(-16 * var(--ek-u));
  top: calc(4 * var(--ek-u));
  width: calc(544 * var(--ek-u));
  height: calc(816 * var(--ek-u));
  background: url("../img/erken-kayit/hero-danisman.webp?v=20260910-2") center/contain no-repeat;
  opacity: .12;
  filter: blur(calc(15.2 * var(--ek-u)));
}

/* =====================================================================
   3) Pembe seritler  (Figma 1:206 / 1:237 / 1:427)
   ===================================================================== */
.ek-stripes { position: relative; }
.ek-stripe-2 { display: block; height: calc(14 * var(--ek-u)); background: var(--ek-pink-mid); }
.ek-stripe-3 {
  height: calc(68 * var(--ek-u));
  background: var(--ek-pink-deep);
  box-shadow: 0 calc(4 * var(--ek-u)) calc(29 * var(--ek-u)) rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 calc(24 * var(--ek-u));
}
.ek-stripe-text {
  margin: 0;
  max-width: calc(1143 * var(--ek-u));
  color: #ffffff;
  font-size: calc(20 * var(--ek-u));
  font-weight: 400;
  line-height: calc(30 * var(--ek-u));
  letter-spacing: calc(-0.22 * var(--ek-u));
  text-align: center;
}
.ek-stripe-text b { font-weight: 700; }

/* =====================================================================
   4) Maraton90  (Figma 1:219 ... 1:254 + video 1:238)
   ===================================================================== */
.ek-program { padding-top: calc(139 * var(--ek-u)); }
.ek-program-inner {
  display: grid;
  grid-template-columns: calc(1032 * var(--ek-u)) calc(616 * var(--ek-u));
  column-gap: calc(14 * var(--ek-u));
  align-items: start;
}
.ek-badge-maraton {
  height: calc(47 * var(--ek-u));
  padding: 0 calc(37 * var(--ek-u));
  letter-spacing: calc(5.76 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(14.9 * var(--ek-u)) rgba(0, 0, 0, 0.35);
}
.ek-program-title {
  margin: calc(21 * var(--ek-u)) 0 0;
  width: calc(977 * var(--ek-u));
  font-size: calc(60 * var(--ek-u));
  font-weight: 800;
  line-height: calc(72.614 * var(--ek-u));
}
.ek-program-desc {
  margin: calc(38 * var(--ek-u)) 0 0;
  font-size: calc(36 * var(--ek-u));
  font-weight: 400;
  line-height: calc(43.568 * var(--ek-u));
}
.ek-program-sub {
  margin: calc(38 * var(--ek-u)) 0 0;
  font-size: calc(40 * var(--ek-u));
  font-weight: 700;
  line-height: calc(48.409 * var(--ek-u));
}
.ek-program-list {
  list-style: none;
  margin: calc(63 * var(--ek-u)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: calc(465 * var(--ek-u)) 1fr;
  row-gap: calc(44 * var(--ek-u));
}
.ek-program-list li { position: relative; padding-left: calc(38 * var(--ek-u)); }
.ek-program-list li img { position: absolute; left: 0; top: calc(3 * var(--ek-u)); width: calc(30 * var(--ek-u)); height: calc(30 * var(--ek-u)); }
.ek-program-list h4 {
  margin: 0;
  font-size: calc(20 * var(--ek-u));
  font-weight: 700;
  line-height: calc(24.205 * var(--ek-u));
}
.ek-program-list p {
  margin: calc(21 * var(--ek-u)) 0 0 calc(-38 * var(--ek-u));
  font-size: calc(20 * var(--ek-u));
  font-weight: 500;
  line-height: calc(24.205 * var(--ek-u));
}
.ek-program-list li:nth-child(1) p { width: calc(430 * var(--ek-u)); }
.ek-program-list li:nth-child(2) p { width: calc(539 * var(--ek-u)); }
.ek-program-list li:nth-child(3) p { width: calc(405 * var(--ek-u)); }
.ek-program-list li:nth-child(4) p { width: calc(503 * var(--ek-u)); }
.ek-program-list li:nth-child(5) p { width: calc(405 * var(--ek-u)); }
.ek-program-list li:nth-child(6) p { width: calc(503 * var(--ek-u)); }

.ek-program-video {
  position: relative;
  margin: calc(59 * var(--ek-u)) 0 0;
  width: calc(616 * var(--ek-u));
  height: calc(1082 * var(--ek-u));
  border-radius: calc(20 * var(--ek-u));
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 calc(4 * var(--ek-u)) calc(54.3 * var(--ek-u)) rgba(0, 0, 0, 0.25);
}
/* <picture> satir ici bir ogedir; icindeki img'nin height:100%'i cozunebilsin diye
   blok yapilip cerceveyi doldurmasi gerekiyor. */
.ek-program-video picture { display: block; width: 100%; height: 100%; }
.ek-program-video img { width: 100%; height: 100%; object-fit: cover; }
/* Oynat dugmesi: Figma'daki kapak goruntusunde oynat simgesi GOMULUYDU (ham YouTube
   ekran goruntusuydu). Gercek kapak gorseli temiz oldugu icin simge CSS ile ciziliyor -
   boylece olcekle birlikte buyuyup kuculuyor ve video oynayinca kayboluyor. */
.ek-video-play {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: calc(96 * var(--ek-u));
  height: calc(96 * var(--ek-u));
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: background .2s ease, transform .2s ease;
}
.ek-video-play::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: calc(17 * var(--ek-u)) 0 calc(17 * var(--ek-u)) calc(28 * var(--ek-u));
  border-color: transparent transparent transparent #ffffff;
}
.ek-program-video:hover .ek-video-play { background: rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%) scale(1.06); }
.ek-program-video.is-playing .ek-video-play { display: none; }
.ek-program-video iframe { border: 0; display: block; width: 100%; height: 100%; }
.ek-program-video.is-playing { background: #000000; cursor: default; }
.ek-program-video.is-playing picture,
.ek-program-video.is-playing > img:first-child { display: none; }

/* =====================================================================
   5) Erken kayit avantajlari karti  (Figma 1:255)
   ===================================================================== */
.ek-perks { padding-top: calc(152 * var(--ek-u)); }
.ek-perks-card {
  width: min(100% - calc(48 * var(--ek-u)), calc(1744 * var(--ek-u)));
  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-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-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)); }

/* =====================================================================
   6) Bir seviye nasil ilerliyor  (Figma 1:297 ... 1:349)
   ===================================================================== */
.ek-steps { padding-top: calc(122 * var(--ek-u)); }
.ek-steps-sub {
  margin: calc(19 * var(--ek-u)) 0 0;
  font-size: calc(36 * var(--ek-u));
  font-weight: 600;
  line-height: calc(43.568 * var(--ek-u));
  text-align: center;
}
.ek-steps-desc {
  margin: calc(19 * var(--ek-u)) auto 0;
  max-width: calc(1402 * var(--ek-u));
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
  text-align: center;
}
.ek-steps-row {
  list-style: none;
  margin: calc(93 * var(--ek-u)) auto 0;
  padding: 0;
  width: min(100%, calc(1719 * var(--ek-u)));
  display: grid;
  grid-template-columns: repeat(4, calc(350 * var(--ek-u)));
  justify-content: space-between;
}
.ek-step { position: relative; }
.ek-step::after {
  content: "";
  position: absolute;
  left: calc(355 * var(--ek-u));
  top: calc(38 * var(--ek-u));
  width: calc(62 * var(--ek-u));
  height: calc(62 * var(--ek-u));
  background: url("../img/erken-kayit/chevron-double.svg") center/contain no-repeat;
}
.ek-step:last-child::after { content: none; }
.ek-step-art { position: relative; display: block; height: calc(119 * var(--ek-u)); }
.ek-step-bubble {
  position: absolute;
  left: calc(85 * var(--ek-u));
  top: calc(3 * var(--ek-u));
  width: calc(116 * var(--ek-u));
  height: calc(116 * var(--ek-u));
  border-radius: 50%;
  background: var(--ek-bubble, #FFD7DA);
  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-step-num {
  position: absolute;
  left: calc(63 * var(--ek-u));
  top: 0;
  width: calc(54 * var(--ek-u));
  height: calc(54 * var(--ek-u));
  border-radius: 50%;
  background: var(--ek-num);
  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;
  color: #ffffff;
  font-size: calc(32 * var(--ek-u));
  font-weight: 700;
  line-height: calc(38.727 * var(--ek-u));
}
.ek-step h4 {
  margin: calc(29 * var(--ek-u)) 0 0;
  font-size: calc(32 * var(--ek-u));
  font-weight: 700;
  line-height: calc(38.727 * var(--ek-u));
}
.ek-step p {
  margin: calc(8 * var(--ek-u)) 0 0;
  font-size: calc(20 * var(--ek-u));
  font-weight: 500;
  line-height: calc(24.205 * var(--ek-u));
}

/* =====================================================================
   7) Ogrenci yorumlari  (Figma 1:167 — tam genislik #FFEFCB)
   ===================================================================== */
.ek-voices {
  margin-top: calc(144 * var(--ek-u));
  padding: calc(60 * var(--ek-u)) 0 calc(78 * var(--ek-u));
  background: var(--ek-cream);
  text-align: center;
}
/* 10.09.2026 — bolum artik GERCEK yazili yorumlari gosteriyor (video yorumlari
   hazir olana kadar). Kart tasarimi sitenin `review-card` desenini ek-* ad
   alaninda tekrarlar; boylece bu sayfa baska bir sayfanin CSS'ine bagimli olmaz. */
.ek-badge-reviews {
  gap: calc(8 * var(--ek-u));
  height: calc(47 * var(--ek-u));
  padding: 0 calc(20 * var(--ek-u));
  margin: 0 auto calc(20 * var(--ek-u));
  background: var(--ek-cream);
  border: 1px solid #F0C86A;
  color: #7A5A00;
  font-size: calc(22 * var(--ek-u));
}
.ek-badge-reviews img { width: calc(20 * var(--ek-u)); height: calc(20 * var(--ek-u)); }
.ek-reviews-grid {
  margin: calc(48 * var(--ek-u)) auto 0;
  width: min(100%, calc(1640 * var(--ek-u)));
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: calc(32 * var(--ek-u));
  text-align: left;
}
.ek-review {
  margin: 0;
  background: #ffffff;
  border-radius: calc(20 * var(--ek-u));
  padding: calc(28 * var(--ek-u)) calc(30 * var(--ek-u));
  box-shadow: 0 calc(2 * var(--ek-u)) calc(14 * var(--ek-u)) rgba(0, 0, 0, .06);
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--ek-u));
}
.ek-review-head { display: flex; align-items: flex-start; justify-content: space-between; gap: calc(16 * var(--ek-u)); }
.ek-review-user { display: flex; align-items: center; gap: calc(14 * var(--ek-u)); min-width: 0; }
.ek-review-avatar {
  width: calc(52 * var(--ek-u));
  height: calc(52 * var(--ek-u));
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.ek-review-user-text { min-width: 0; }
.ek-review-user-text strong { display: block; font-size: calc(24 * var(--ek-u)); font-weight: 700; line-height: calc(29 * var(--ek-u)); }
.ek-review-user-text span { display: block; margin-top: calc(4 * var(--ek-u)); font-size: calc(20 * var(--ek-u)); font-weight: 400; line-height: calc(24 * var(--ek-u)); color: var(--ek-muted); }
.ek-review-meta { display: flex; flex-direction: column; align-items: flex-end; gap: calc(8 * var(--ek-u)); flex-shrink: 0; }
.ek-review-rating {
  display: inline-flex;
  align-items: center;
  gap: calc(5 * var(--ek-u));
  background: var(--ek-pink);
  color: #ffffff;
  border-radius: calc(999 * var(--ek-u));
  padding: calc(3 * var(--ek-u)) calc(11 * var(--ek-u));
  font-size: calc(18 * var(--ek-u));
  font-weight: 700;
  line-height: calc(22 * var(--ek-u));
}
.ek-review-rating img { width: calc(12 * var(--ek-u)); height: calc(12 * var(--ek-u)); }
.ek-review-date { font-size: calc(18 * var(--ek-u)); font-weight: 400; line-height: calc(22 * var(--ek-u)); color: var(--ek-muted); white-space: nowrap; }
.ek-review p { margin: 0; font-size: calc(22 * var(--ek-u)); font-weight: 400; line-height: calc(30 * var(--ek-u)); }

/* =====================================================================
   8) Paketler  (Figma 1:322 / 1:354 / 1:367)
   ===================================================================== */
.ek-plans { padding-top: calc(62 * var(--ek-u)); }
.ek-plans-desc {
  margin: calc(23 * var(--ek-u)) auto 0;
  max-width: calc(1402 * var(--ek-u));
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
  text-align: center;
}
.ek-plans-row {
  margin: calc(78 * var(--ek-u)) auto 0;
  width: min(100%, calc(1639 * var(--ek-u)));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(23 * var(--ek-u));
}
.ek-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: calc(602 * var(--ek-u));
  background: #ffffff;
  border: 1px solid #C7C7C7;
  border-radius: calc(16 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(40 * var(--ek-u)) rgba(0, 0, 0, 0.12);
  padding: calc(33 * var(--ek-u)) calc(11 * var(--ek-u)) 0;
  text-align: center;
}
/* Vurgulu kart: kalin kenarlik YERINE ic outline. `border: 4px` (digerleri 1px)
   ic yuksekligi 3px kisaltip butonu yukari kaydiriyordu; outline duzeni etkilemez,
   gorunum ayni kalir. */
.ek-plan-featured {
  border-color: var(--ek-pink);
  outline: 3px solid var(--ek-pink);
  outline-offset: -3px;
}
.ek-plan-flag {
  position: absolute;
  top: calc(-35 * var(--ek-u));
  left: 50%;
  transform: translateX(-50%);
  width: calc(365 * var(--ek-u));
  height: calc(63 * var(--ek-u));
  border-radius: calc(19 * var(--ek-u));
  background: var(--ek-pink);
  border: 2px solid var(--ek-btn-line);
  box-shadow: 0 calc(4 * var(--ek-u)) calc(14.9 * var(--ek-u)) rgba(0, 0, 0, 0.35);
  color: #ffffff;
  font-size: calc(25 * var(--ek-u));
  font-weight: 900;
  line-height: calc(28.75 * var(--ek-u));
  letter-spacing: calc(1.5 * var(--ek-u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.ek-plan h3 {
  margin: 0;
  font-size: calc(40 * var(--ek-u));
  font-weight: 800;
  line-height: calc(48.409 * var(--ek-u));
}
.ek-plan-price {
  margin: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: calc(10 * var(--ek-u));
}
.ek-plan-price strong { font-size: calc(40 * var(--ek-u)); font-weight: 800; line-height: calc(48.409 * var(--ek-u)); }
.ek-plan-price span { font-size: calc(20 * var(--ek-u)); font-weight: 500; line-height: calc(24.205 * var(--ek-u)); }
.ek-plan-meta {
  margin: calc(6 * var(--ek-u)) 0 0;
  font-size: calc(20 * var(--ek-u));
  font-weight: 400;
  line-height: calc(24.205 * var(--ek-u));
}
.ek-plan hr {
  width: calc(100% + calc(22 * var(--ek-u)));
  margin: calc(17 * var(--ek-u)) calc(-11 * var(--ek-u)) 0;
  height: calc(3 * var(--ek-u));
  border: 0;
  background: #000000;
  opacity: .54;
}
.ek-plan-lead {
  margin: calc(27 * var(--ek-u)) auto 0;
  max-width: calc(509 * var(--ek-u));
  font-size: calc(20 * var(--ek-u));
  font-weight: 700;
  line-height: calc(24.205 * var(--ek-u));
}
.ek-plan ul {
  margin: calc(24 * var(--ek-u)) 0 0;
  padding: 0 0 0 calc(32 * var(--ek-u));
  text-align: left;
  list-style: disc;
}
.ek-plan ul li {
  font-size: calc(20 * var(--ek-u));
  font-weight: 500;
  line-height: calc(30.391 * var(--ek-u));
}
/* Buton kartin DIBINE yapisir; kartlarin ic metni farkli uzunlukta oldugu icin
   aksi halde 27px kayik duruyordu (canlida olculdu). `margin-top: auto` bos alani
   yutar; asgari bosluk listenin alt bosluguyla korunur. */
.ek-plan ul { margin-bottom: calc(40 * var(--ek-u)); }
.ek-plan .ek-btn { margin: calc(40 * var(--ek-u)) auto calc(48 * var(--ek-u)); margin-top: auto; }
.ek-plans-note {
  margin: calc(37 * var(--ek-u)) auto 0;
  max-width: calc(1075 * var(--ek-u));
  color: #7E7D7D;
  font-size: calc(24 * var(--ek-u));
  font-style: italic;
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
  text-align: center;
}

/* =====================================================================
   9) Tum programlara dahil ozellikler  (Figma 1:333)
   ===================================================================== */
.ek-included { padding-top: calc(57 * var(--ek-u)); }
.ek-included-box {
  width: min(100% - calc(48 * var(--ek-u)), calc(1487 * var(--ek-u)));
  margin-inline: auto;
  background: #ffffff;
  border: 3px solid var(--ek-green);
  border-radius: calc(43 * var(--ek-u));
  box-shadow: 0 calc(4 * var(--ek-u)) calc(40 * var(--ek-u)) rgba(0, 0, 0, 0.11);
  padding: calc(35 * var(--ek-u)) calc(85 * var(--ek-u)) calc(71 * var(--ek-u)) calc(95 * var(--ek-u));
}
.ek-included-title {
  margin: 0;
  font-size: calc(48 * var(--ek-u));
  font-weight: 800;
  line-height: calc(58.09 * var(--ek-u));
  text-align: center;
}
.ek-included-list {
  list-style: none;
  margin: calc(69 * var(--ek-u)) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: calc(424 * var(--ek-u)) calc(424 * var(--ek-u)) 1fr;
  row-gap: calc(69 * var(--ek-u));
}
.ek-included-list li { display: grid; grid-template-columns: calc(38 * var(--ek-u)) 1fr; align-items: start; }
.ek-included-list img { width: calc(25 * var(--ek-u)); height: calc(25 * var(--ek-u)); margin-top: calc(2 * var(--ek-u)); }
.ek-included-list span {
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
}
.ek-included-list b { font-weight: 700; }

/* =====================================================================
   10) SSS  (Figma 1:378 / 1:428)
   ===================================================================== */
.ek-faq { padding: calc(148 * var(--ek-u)) 0 calc(100 * var(--ek-u)); }
.ek-faq-inner {
  width: min(100% - calc(48 * var(--ek-u)), calc(1626 * var(--ek-u)));
  display: grid;
  grid-template-columns: calc(663 * var(--ek-u)) calc(813 * var(--ek-u));
  column-gap: calc(150 * var(--ek-u));
  align-items: start;
}
.ek-faq-intro h2 {
  margin: 0;
  font-size: calc(48 * var(--ek-u));
  font-weight: 800;
  line-height: calc(58.09 * var(--ek-u));
}
.ek-faq-intro p {
  margin: calc(29 * var(--ek-u)) 0 0;
  font-size: calc(24 * var(--ek-u));
  font-weight: 400;
  line-height: calc(29.045 * var(--ek-u));
}
.ek-faq-item { border-bottom: 1px solid #000000; }
.ek-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(24 * var(--ek-u));
  padding: calc(24 * var(--ek-u)) calc(17 * var(--ek-u)) calc(24 * var(--ek-u)) 0;
  background: none;
  border: 0;
  cursor: pointer;
  text-align: left;
}
.ek-faq-q span {
  font-family: "Open Sans", sans-serif;
  font-size: calc(30 * var(--ek-u));
  font-weight: 400;
  line-height: calc(36 * var(--ek-u));
}
.ek-faq-q img { flex: 0 0 calc(17 * var(--ek-u)); width: calc(17 * var(--ek-u)); height: calc(9 * var(--ek-u)); transition: transform .25s ease; }
.ek-faq-item.is-open .ek-faq-q img { transform: rotate(180deg); }
.ek-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.ek-faq-item.is-open .ek-faq-a { grid-template-rows: 1fr; }
.ek-faq-a > div { overflow: hidden; }
.ek-faq-a p {
  margin: 0 calc(17 * var(--ek-u)) calc(26 * var(--ek-u)) 0;
  font-size: calc(20 * var(--ek-u));
  font-weight: 400;
  line-height: calc(30 * var(--ek-u));
  color: #333333;
}

/* =====================================================================
   Yapisal kirilim — 1200px altinda duzen yeniden dizilir
   (1200-1920 arasi icin AYRI kural YOK: --ek-u tasarimi oransal kucultuyor.)
   ===================================================================== */
@media (max-width: 1200px) {
  .ek-hero { padding-top: 64px; }
  .ek-hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .ek-hero-title, .ek-hero-desc, .ek-program-title { width: auto; }
  .ek-hero-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-hero-form { max-width: 527px; }
  .ek-form-title { width: auto; margin-inline: 0; }
  .ek-hero-visual { display: none; }
  .ek-program-inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ek-program-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 35px; }
  .ek-program-list li:nth-child(n) p { width: auto; }
  .ek-program-video { margin-inline: auto; width: 420px; height: 738px; }
  .ek-perks-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-perk > p { width: auto; }
  .ek-reviews-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ek-plans-row { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .ek-included-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }
  .ek-included-box { padding-inline: 40px; }
  .ek-faq-inner { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .ek-step::after { display: none; }
  .ek-steps-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 48px; }
}

/* =====================================================================
   MOBIL  (Figma 1:430 — 390x5487)
   ===================================================================== */
@media (max-width: 768px) {
  .ek-c { width: calc(100% - 48px); }

  /* 1) duyuru seridi: 44px, 10px metin */
  .ek-topbar { height: 44px; box-shadow: 0 4px 11.7px rgba(0, 0, 0, 0.25); }
  .ek-topbar-inner { height: 44px; }
  .ek-topbar-text { font-size: 10px; line-height: 15px; letter-spacing: -0.11px; }
  .ek-topbar-icon { display: none; }
  .ek-topbar-arrow { width: 10px; height: 10px; }
  .ek-topbar-arrow-prev { margin-right: 12px; }
  .ek-topbar-arrow-next { margin-left: 12px; }
  .ek-topbar-bolt { filter: blur(2.5px); }
  .ek-topbar-bolt-l1 { left: -5px; top: 0; width: 67px; height: 67px; }
  .ek-topbar-bolt-l2 { left: 59px; top: -16px; width: 32px; height: 32px; }
  .ek-topbar-bolt-l3 { left: 81px; top: 27px; width: 29px; height: 29px; }
  .ek-topbar-bolt-r1 { right: -6px; top: 0; width: 67px; height: 67px; }
  .ek-topbar-bolt-r2 { right: 58px; top: -16px; width: 32px; height: 32px; }
  .ek-topbar-bolt-r3 { right: 82px; top: 27px; width: 29px; height: 29px; }

  /* 2) hero: ortali */
  .ek-hero { padding: 23px 0 0; }
  .ek-hero::after { display: none; }
  .ek-hero-inner { grid-template-columns: minmax(0, 1fr); row-gap: 0; padding-bottom: 0; text-align: center; }
  .ek-hero-left { display: flex; flex-direction: column; align-items: center; }
  .ek-badge-hero { height: 19px; padding: 0 7px; margin: 0; font-size: 10px; line-height: 11.5px; letter-spacing: -0.11px; border-radius: 19px; }
  .ek-hero-title { margin: 12px 0 0; font-size: 21px; line-height: 24.15px; letter-spacing: -0.231px; }
  .ek-hero-desc { margin: 18px 0 0; font-size: 12px; line-height: 14.523px; }
  .ek-hero-features {
    margin: 30px 0 0;
    width: 100%;
    max-width: 300px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 15px;
    column-gap: 12px;
    text-align: left;
  }
  .ek-hero-features li { gap: 6px; min-height: 16px; }
  .ek-hero-features li span { font-size: 10px; line-height: 11.5px; letter-spacing: -0.11px; }
  .ek-page .ek-hf-dark { display: none; }
  .ek-page .ek-hf-pink { display: block; }

  .ek-hero-form { margin: 31px 0 0; border-radius: 18px; padding: 14px 20px 18px; }
  .ek-form-title { width: auto; margin: 0; font-size: 14px; line-height: 18.98px; }
  .ek-form { margin-top: 18px; }
  .ek-field { margin-bottom: 9px; }
  .ek-field input[type="text"],
  .ek-field input[type="email"],
  .ek-field input[type="tel"] { height: 40px; font-size: 14px; line-height: 14px; }
  .ek-field-phone { gap: 5px; }
  .ek-phone-code { flex: 0 0 62px; height: 40px; font-size: 16px; line-height: 16px; border-radius: 7px; padding: 0 10px; }
  .ek-check { gap: 4px; }
  .ek-check input[type="checkbox"] { flex: 0 0 14px; width: 14px; height: 14px; }
  .ek-check input[type="checkbox"]:checked::after { left: 4px; top: 1px; width: 4px; height: 7px; border-width: 0 1.5px 1.5px 0; }
  .ek-check-all { margin-top: 16px; }
  .ek-check-all span { font-size: 10px; line-height: 11.5px; letter-spacing: -0.11px; margin-top: 1px; }
  .ek-check-kvkk { margin-top: 8px; }
  .ek-check-eti { margin-top: 8px; }
  .ek-check-kvkk span, .ek-check-eti span { font-size: 10px; line-height: 11.5px; letter-spacing: -0.11px; }
  .ek-check-kvkk br, .ek-check-eti br { display: none; }
  .ek-submit { height: 42px; margin-top: 14px; border-radius: 10px; font-size: 15px; line-height: 15px; }

  /* Hero gorseli MOBILDE DE VAR (Figma mobil 1:430 > Group 3 = 1:474).
     Onceden `display:none` idi; tasarimda kadin form kartinin sag alt kosesinde
     duruyor ve ekranin sag kenarindan tasarak kirpiliyor. Olculer Figma'nin 390
     karesinden birebir:
       image 342 (asil)   x 153.12  y 448.00  w 301.40  h 315.57
       image 343 (bulanik) x 143.96 y 463.12  w 300.85  h 311.75  opacity .08
       form karti          x  13.00  y 351.00  w 361.00  h 346.00
     `.ek-hero-inner` mobilde tek sutun + row-gap:0 + padding-bottom:0 oldugu icin
     ALT ve SAG kenari form kartiyla ayni; konum bu iki kenardan veriliyor.
     Dikdortgen orani (0.955) fotografin oraniyla (0.667) ayni olmadigindan Figma
     FILL yapiyor -> CSS'te `object-fit: cover`. */
  /* Hero gorseli MOBILDE GIZLI (kullanici karari, 10.09.2026).
     Figma mobil karesinde kadin form kartinin uzerine biniyor (Group 3 = 1:474:
     kartin ust kenarindan 97px asagida, sag kenarindan 80.5px disari tasiyor).
     Bu birebir uygulandi ve olculerek dogrulandi, ama CANLIDA CALISMIYOR: Figma'nin
     mobil form karti "Gonder" dugmesini HIC icermiyor (tasarim eksigi), bu yuzden
     gercek kartimiz 132px daha uzun. Kadin ya dugmenin uzerine biniyor ya da
     tasarimdakinden daha buyuk gorunuyor; ikisi de kabul edilmedi.
     TEKRAR ACILACAKSA once mobil form kartinin yuksekligi Figma'yla hizalanmali. */
  .ek-hero-visual { display: none; }

  /* 3) seritler */
  .ek-stripes { margin-top: 25px; }
  .ek-stripe-2 { height: 10px; }
  .ek-stripe-3 { height: 48px; padding: 0 16px; }
  .ek-stripe-text { font-size: 10px; line-height: 15px; letter-spacing: -0.11px; }

  /* 4) Maraton90 */
  .ek-program { padding-top: 27px; }
  .ek-program-inner { row-gap: 0; text-align: center; }
  .ek-program-left { display: flex; flex-direction: column; align-items: center; }
  .ek-badge-maraton { height: 19px; padding: 0 7px; font-size: 10px; line-height: 11.5px; letter-spacing: 4px; }
  .ek-program-title { margin: 10px 0 0; font-size: 17px; line-height: 19.55px; letter-spacing: -0.187px; }
  .ek-program-desc { margin: 10px 0 0; font-size: 12px; line-height: 14.523px; }
  /* Mobilde video `order:-1` ile en uste aliniyor ve `.ek-program-inner` row-gap 0;
     alt bosluk 0 kaldigi icin "MARATON 90" rozetine yapisik duruyordu (Figma notu:
     "video alttaki maraton90 yazisina cok yakin"). Alt pay 18px verildi. */
  .ek-program-video { order: -1; margin: 22px auto 18px; width: 245px; height: 431px; border-radius: 14px; }
  .ek-video-play { width: 54px; height: 54px; }
  .ek-video-play::after { border-width: 10px 0 10px 16px; }
  .ek-program-sub { margin: 20px 0 0; font-size: 15px; line-height: 17.25px; letter-spacing: -0.165px; }
  .ek-program-list { margin: 24px 0 0; grid-template-columns: minmax(0, 1fr); row-gap: 22px; text-align: left; width: 100%; }
  .ek-program-list li { padding-left: 27px; }
  .ek-program-list li img { width: 18px; height: 18px; top: 1px; }
  .ek-program-list h4 { font-size: 15px; line-height: 18.153px; }
  .ek-program-list p { margin: 8px 0 0 -27px; font-size: 12px; line-height: 14.523px; }

  /* 5) avantajlar — mobilde yatay kaydirmali kart dizisi (Figma 1:503) */
  .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;
    /* masaustu kuralindaki justify-content:center yatay kaydirmada icerigi
       ortalayip ilk karti erisilmez kiliyordu (scrollLeft=0 iken 3. kart
       gorunuyordu) - kaydirmali modda basa hizalanir. */
    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; }

  /* 6) adimlar — 2x2 */
  .ek-steps { padding-top: 47px; }
  .ek-steps-sub { margin: 5px 0 0; font-size: 10px; line-height: 12.102px; }
  .ek-steps-desc { margin: 9px 0 0; font-size: 10px; line-height: 12.102px; }
  .ek-steps-row { margin: 27px 0 0; width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; row-gap: 40px; text-align: center; }
  .ek-step-art { height: 36px; }
  .ek-step-bubble { left: 50%; transform: translateX(-38%); top: 1px; width: 35px; height: 35px; }
  .ek-step-bubble img { width: 46%; height: auto; }
  .ek-step-num { left: 50%; transform: translateX(-115%); top: 0; width: 16px; height: 16px; font-size: 10px; line-height: 12.102px; }
  .ek-step h4 { margin: 15px 0 0; font-size: 12px; line-height: 14.523px; }
  .ek-step p { margin: 6px 0 0; font-size: 8px; line-height: 9.682px; }

  /* 7) ogrenci yorumlari — mobilde tek sutun kartlar */
  .ek-voices { margin-top: 45px; padding: 22px 0 27px; }
  .ek-voices .ek-c { width: 100%; padding: 0 24px; }
  .ek-h2 { font-size: 14px; line-height: 16.943px; }
  .ek-badge-reviews { height: 22px; padding: 0 10px; margin-bottom: 10px; gap: 5px; font-size: 10px; line-height: 11.5px; border-radius: 22px; }
  .ek-badge-reviews img { width: 11px; height: 11px; }
  .ek-reviews-grid { margin-top: 16px; width: 100%; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ek-review { border-radius: 14px; padding: 14px 16px; gap: 10px; box-shadow: 0 1px 8px rgba(0, 0, 0, .06); }
  .ek-review-head { gap: 10px; }
  .ek-review-user { gap: 9px; }
  .ek-review-avatar { width: 34px; height: 34px; }
  .ek-review-user-text strong { font-size: 13px; line-height: 16px; }
  .ek-review-user-text span { margin-top: 2px; font-size: 10px; line-height: 12px; }
  .ek-review-meta { gap: 5px; }
  .ek-review-rating { padding: 2px 7px; font-size: 10px; line-height: 12px; gap: 3px; }
  .ek-review-rating img { width: 9px; height: 9px; }
  .ek-review-date { font-size: 9px; line-height: 11px; }
  .ek-review p { font-size: 11px; line-height: 15px; }

  /* 8) paketler — alt alta */
  .ek-plans { padding-top: 21px; }
  .ek-plans-desc { margin: 8px 0 0; font-size: 12px; line-height: 14.523px; }
    /* Mobilde aciklama yazisi ile ilk paket karti arasi 60px idi (canlida olculdu);
     Figma geri bildirimi "pay fazla kalmis" diyor, 28px yapildi. Kartlar arasi
     bosluk (gap) AYNEN korundu. */
  .ek-plans-row { margin: 28px auto 0; width: 100%; max-width: 360px; gap: 56px; }
  .ek-plan { min-height: 0; padding: 20px 14px 0; border-radius: 16px; }
  .ek-plan-flag { top: -22px; width: 200px; height: 40px; font-size: 15px; line-height: 17px; border-radius: 14px; }
  .ek-plan h3, .ek-plan-price strong { font-size: 26px; line-height: 32px; }
  .ek-plan-price span, .ek-plan-meta { font-size: 14px; line-height: 18px; }
  .ek-plan hr { width: calc(100% + 28px); margin-inline: -14px; height: 2px; }
  .ek-plan-lead { margin-top: 18px; font-size: 15px; line-height: 19px; }
  .ek-plan ul { margin-top: 16px; padding-left: 22px; }
  .ek-plan ul li { font-size: 14px; line-height: 24px; }
  .ek-plan .ek-btn { margin: 24px auto 24px; }
  .ek-plans-note { margin: 22px 0 0; font-size: 12px; line-height: 14.523px; }

  /* 9) tum programlara dahil */
  .ek-included { padding-top: 35px; }
  .ek-included-box { width: calc(100% - 36px); border-radius: 43px; padding: 19px 18px 24px; }
  .ek-included-title { font-size: 20px; line-height: 24.205px; }
  .ek-included-list { margin-top: 21px; grid-template-columns: minmax(0, 1fr); row-gap: 21px; }
  .ek-included-list li { grid-template-columns: 22px 1fr; }
  .ek-included-list img { width: 17px; height: 17px; margin-top: 1px; }
  .ek-included-list span { font-size: 16px; line-height: 19.364px; }
  .ek-included-list br { display: none; }

  /* 10) SSS */
  .ek-faq { padding: 30px 0 40px; }
  .ek-faq-inner { row-gap: 20px; }
  .ek-faq-intro { text-align: center; }
  .ek-faq-intro h2 { font-size: 25px; line-height: 30.256px; }
  .ek-faq-intro p { margin-top: 8px; font-size: 15px; line-height: 18.153px; }
  .ek-faq-q { padding: 12px 4px 12px 0; gap: 12px; }
  .ek-faq-q span { font-size: 13px; line-height: 18px; }
  .ek-faq-q img { flex: 0 0 12px; width: 12px; height: 7px; }
  .ek-faq-a p { margin: 0 0 14px; font-size: 13px; line-height: 20px; }
}


/* ===================================================================
   LEAD EK BİLGİ MODALI (11.09.2026)
   ===================================================================
   Modalı `shared-header-footer.js` ÜRETİYOR (ensureMaraton90LeadExtraModal),
   yani bileşen paylaşılan; ama stili bu projede SAYFA BAŞINA tutuluyor:
   aynı kurallar `desktop-enwa-maraton90.css` ve `desktop-deneme-dersi.css`
   içinde de var. Erken kayıt sayfası ikisini de yüklemediği için modal
   stilsiz açılıyor, sayfanın sonuna düz akıyordu (kullanıcı ekran görüntüsü).

   NEDEN paylaşılan dosyaya (shared-header-footer.css) KONMADI: maraton90
   şablonunda `shared-header-footer.css` sayfa CSS'inden SONRA yükleniyor
   (enwa-maraton90.template.html:11-12). Paylaşılana konsaydı o sayfanın
   kendi modal stilini ezer, canlı landing sayfasında görünüm değiştirirdi.

   Kaynak: `desktop-deneme-dersi.css` temel bloğu (trial-form'a özel
   kurallar çıkarıldı - burada "default" bağlam kullanılıyor).

   TEKNİK BORÇ: aynı CSS artık ÜÇ dosyada. Birleştirmek için önce maraton90
   şablonundaki stylesheet sırası düzeltilmeli (paylaşılan önce), sonra üç
   kopya tek yere alınabilir. Ayrı iş.
   =================================================================== */
.lead-extra-modal-backdrop {
  align-items: center;
  background: rgba(18, 22, 34, 0.46);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 24px;
  position: fixed;
  z-index: 9999;
}

.lead-extra-modal-backdrop[hidden] {
  display: none !important;
}

.lead-extra-modal {
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 24px 80px rgba(17, 24, 39, 0.26);
  color: #171717;
  max-height: min(760px, calc(100vh - 48px));
  overflow-y: auto;
  padding: 48px 56px 44px;
  position: relative;
  text-align: center;
  width: min(100%, 1040px);
}

.lead-extra-close {
  align-items: center;
  background: #ffffff;
  border: 3px solid #0f172a;
  border-radius: 999px;
  color: #0f172a;
  cursor: pointer;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  height: 34px;
  justify-content: center;
  position: absolute;
  right: 28px;
  top: 26px;
  width: 34px;
}

.lead-extra-close:hover {
  background: #f8fafc;
}

.lead-extra-step-label {
  color: #111827;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 48px 10px;
}

.lead-extra-progress {
  background: #e8edf2;
  border-radius: 999px;
  height: 10px;
  margin: 0 auto 42px;
  overflow: hidden;
  width: min(430px, 100%);
}

.lead-extra-progress-fill {
  background: #ff7a00;
  border-radius: inherit;
  display: block;
  height: 100%;
  transition: width 0.22s ease;
}

.lead-extra-modal h2 {
  color: #000000;
  font-size: 40px;
  font-weight: 800;
  line-height: 1.12;
  margin: 0;
}

.lead-extra-subtitle {
  color: #000000;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.18;
  margin: 8px auto 70px;
  max-width: 900px;
}

.lead-extra-whatsapp-cta {
  align-items: center;
  background: #10b25b;
  border-radius: 999px;
  color: #ffffff;
  display: inline-flex;
  font-size: 18px;
  font-weight: 800;
  justify-content: center;
  line-height: 1.2;
  margin: 0 auto 24px;
  min-height: 46px;
  padding: 12px 24px;
  text-decoration: none;
}

.lead-extra-whatsapp-cta:hover {
  background: #0c914a;
}

.lead-extra-whatsapp-cta[hidden],
.lead-extra-helper[hidden] {
  display: none !important;
}

.lead-extra-helper {
  color: #000000;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.26;
  margin: 0 auto 42px;
  max-width: 820px;
}


.lead-extra-form {
  display: grid;
  gap: 30px;
  margin: 0 auto;
  max-width: 760px;
}

.lead-extra-question {
  border: 0;
  margin: 0;
  padding: 0;
}

.lead-extra-question[hidden] {
  display: none !important;
}

.lead-extra-question legend {
  color: #202020;
  font-size: 19px;
  font-weight: 800;
  line-height: 1.35;
  margin: 0 0 14px;
  padding: 0;
  text-align: left;
}

.lead-extra-options {
  display: grid;
  gap: 14px 26px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lead-extra-option {
  align-items: center;
  background: #ffffff;
  border: 2px solid #2386d9;
  border-radius: 9px;
  cursor: pointer;
  display: flex;
  gap: 12px;
  line-height: 1.35;
  min-height: 68px;
  padding: 16px 18px;
  text-align: left;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.lead-extra-option:hover,
.lead-extra-option:has(input:checked) {
  background: #fffaf4;
  border-color: #ff7a00;
  box-shadow: 0 10px 22px rgba(255, 122, 0, 0.12);
}

.lead-extra-option input {
  appearance: none;
  background: #d9d9d9;
  border: 0;
  border-radius: 999px;
  flex: 0 0 auto;
  height: 18px;
  margin: 0;
  position: relative;
  width: 18px;
}

.lead-extra-option input::after {
  color: #ffffff;
  content: "✓";
  font-size: 12px;
  font-weight: 900;
  left: 50%;
  line-height: 1;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
}

.lead-extra-option input:checked {
  background: #ff7a00;
}

.lead-extra-option span {
  color: #333333;
  font-size: 20px;
  font-weight: 600;
}

.lead-extra-back {
  background: transparent;
  border: 0;
  color: #ff7a00;
  cursor: pointer;
  font-size: 18px;
  font-weight: 800;
  justify-self: center;
  padding: 10px 16px;
}

.lead-extra-back:hover {
  color: #d46100;
}

.lead-extra-back[hidden] {
  display: none !important;
}

.lead-extra-submit {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.lead-extra-feedback {
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  justify-self: center;
  line-height: 1.4;
  margin: 0;
  max-width: 520px;
  padding: 10px 12px;
  text-align: center;
  width: 100%;
}

.lead-extra-feedback.is-success {
  background: #ecfdf3;
  color: #087443;
}

.lead-extra-feedback.is-error {
  background: #fff1f2;
  color: #b42318;
}

.lead-extra-option input:disabled,
.lead-extra-option input:disabled + span,
.lead-extra-back:disabled {
  cursor: wait;
  opacity: 0.7;
}

@media (max-width: 760px) {
  .lead-extra-modal-backdrop {
    align-items: flex-end;
    padding: 12px;
  }

  .lead-extra-modal {
    border-radius: 18px 18px 12px 12px;
    max-height: calc(100vh - 24px);
    padding: 32px 18px 24px;
  }

  .lead-extra-close {
    right: 16px;
    top: 16px;
  }

  .lead-extra-step-label {
    font-size: 15px;
    margin-left: 42px;
    margin-right: 42px;
  }

  .lead-extra-progress {
    height: 8px;
    margin-bottom: 28px;
    width: min(300px, calc(100% - 72px));
  }

  .lead-extra-modal h2 {
    font-size: 30px;
  }

  .lead-extra-subtitle {
    font-size: 20px;
    line-height: 1.28;
    margin-bottom: 34px;
  }


  .lead-extra-whatsapp-cta {
    font-size: 15px;
    margin-bottom: 18px;
    min-height: 42px;
    padding: 11px 18px;
  }

  .lead-extra-helper {
    font-size: 17px;
    margin-bottom: 28px;
  }

  .lead-extra-question legend {
    font-size: 16px;
  }

  .lead-extra-options {
    grid-template-columns: 1fr;
  }

  .lead-extra-option {
    min-height: 58px;
    padding: 13px 14px;
  }

  .lead-extra-option span {
    font-size: 16px;
  }
}