/* Süper Zeka Kulübü · ana sayfa stilleri
   Imagica açılışı + Fintech bölüm dili + Glow In The Dark yayı,
   Apple tipografisi ve liquid glass yüzeyler (web yaklaşımı). Mobil öncelikli. */

/* Geist: OFL lisanslı, sitenin kendi sunucusundan. Apple cihazlarda önce SF Pro kullanılır. */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329,
    U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/geist-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --zemin: #020203;
  --metin: #f5f5f7;
  --metin-2: #a1a1aa;
  --metin-3: #a1a1aa; /* erişilebilirlik: koyu cam üstünde en az 4,5:1 */
  /* Vice City gün batımı: neon pembe, turuncu, altın; derinlik için mor, serinlik için camgöbeği */
  --pembe: #ff3d9a;
  --pembe-acik: #ff9fcf;
  --turuncu: #ff8a3d;
  --altin: #ffc15e;
  --mor: #7b2ff7;
  --camgobegi: #2ad4ff;
  --gunbatimi: linear-gradient(100deg, #ff3d9a 0%, #ff6f6a 50%, #ffb347 100%);
  --vurgu: linear-gradient(92deg, #ff5fae 0%, #ff7d68 50%, #ffb84f 100%);

  --sans: -apple-system, BlinkMacSystemFont, "Geist", system-ui, "Segoe UI", Roboto, "Helvetica Neue", Arial,
    sans-serif;

  /* Köşe sistemi: buton hap (999px), kart 16px, panel 24px, karo %26 */
  --r-kart: 16px;
  --r-panel: 24px;

  --kap: 1120px;
  --oluk: clamp(20px, 4.5vw, 48px);
  --ust-y: 76px;
  --yumusak: cubic-bezier(0.16, 1, 0.3, 1);
  --gecis: 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* ---------------------------------------------------------------- Temel */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--ust-y) + 12px);
  background: var(--zemin);
}

body {
  margin: 0;
  background: var(--zemin);
  color: var(--metin);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

@media (min-width: 760px) {
  body {
    font-size: 1.0625rem;
  }
}

img,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

img {
  height: auto;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

p {
  margin: 0;
  text-wrap: pretty;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

button {
  font: inherit;
  color: inherit;
}

.ikon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
}

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
  border-radius: 6px;
}

.gizli {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.atla {
  position: fixed;
  left: 16px;
  top: -80px;
  z-index: 400;
  padding: 12px 18px;
  border-radius: 999px;
  background: var(--metin);
  color: #0a0a12;
  font-weight: 600;
  text-decoration: none;
}

.atla:focus {
  top: 12px;
}

.kap {
  width: 100%;
  max-width: calc(var(--kap) + var(--oluk) * 2);
  margin-inline: auto;
  padding-inline: var(--oluk);
}

.bolum {
  position: relative;
  padding-block: clamp(88px, 11vw, 150px);
}

.bolum__bas {
  max-width: 46rem;
  margin: 0 auto clamp(40px, 6vw, 64px);
  text-align: center;
}

.bolum__bas h2,
.sss h2 {
  font-size: clamp(2rem, 4.3vw, 3.375rem);
}

.bolum__bas p {
  margin-top: 16px;
  color: var(--metin-2);
  font-size: clamp(1rem, 1.35vw, 1.125rem);
}

.bolum__bas .ust-ifade {
  margin-top: 0;
  font-size: 0.9375rem;
  color: var(--pembe-acik);
}

.bolum__bas p + p {
  margin-top: 10px;
}

.vurgu {
  background: var(--vurgu);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.vurgu--acik {
  background: linear-gradient(92deg, #ffe1f0, #fff1e2 60%, #ffd6b3);
  -webkit-background-clip: text;
  background-clip: text;
}

.ust-ifade {
  margin-bottom: 14px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

::selection {
  background: rgb(255 61 154 / 0.38);
  color: #fff;
}

.fiyat-satiri {
  font-size: 0.875rem;
  color: var(--metin-2);
}

/* ---------------------------------------------------------------- Butonlar (hap) */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--gunbatimi);
  color: #1a0820;
  font: 600 0.9375rem/1 var(--sans);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 12px 32px -14px rgb(255 61 154 / 0.75);
  transition:
    background-color var(--gecis),
    box-shadow var(--gecis),
    filter var(--gecis),
    transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.btn:hover {
  filter: brightness(1.07) saturate(1.06);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.4),
    0 16px 38px -14px rgb(255 61 154 / 0.9);
}

/* Bağlantısı henüz eklenmemiş buton: aynı görünür ama hiçbir yere gitmez. */
.btn[aria-disabled="true"] {
  cursor: default;
}

.taslak .btn[aria-disabled="true"] {
  outline: 1.5px dashed rgb(255 211 107 / 0.85);
  outline-offset: 3px;
}

.btn:active {
  transform: scale(0.97);
}

.btn--buyuk {
  min-height: 54px;
  padding: 0 30px;
  font-size: 1rem;
}

.btn--kucuk {
  min-height: 38px;
  padding: 0 16px;
  font-size: 0.875rem;
}

.btn--blok {
  width: 100%;
}

.btn--beyaz {
  background: var(--metin);
  color: #0a0a12;
  box-shadow: 0 12px 32px -18px rgb(255 255 255 / 0.5);
}

.btn--beyaz:hover {
  background: #fff;
  filter: none;
}

.btn--cerceve {
  background: rgb(255 255 255 / 0.04);
  color: var(--metin);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.28);
}

.btn--cerceve:hover {
  background: rgb(255 255 255 / 0.1);
}

/* Prizma kenarlı cam düğme (BEMACCI'deki onaylı tarif, mor-mavi paletle) */
.btn--prizma {
  isolation: isolate;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0.045) 55%, rgb(255 255 255 / 0.09));
  -webkit-backdrop-filter: blur(16px) saturate(1.5);
  backdrop-filter: blur(16px) saturate(1.5);
  color: #fff;
  text-shadow: 0 1px 12px rgb(0 0 0 / 0.45);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.32),
    inset 0 -10px 22px rgb(255 255 255 / 0.05),
    0 14px 44px rgb(0 0 0 / 0.55);
}

.btn--prizma:hover {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0.07) 55%, rgb(255 255 255 / 0.12));
  filter: none;
}

/* Işık, konik degradenin açısı döndürülerek akar (BEMACCI'deki gibi). Maskeli kenarın içinde ayrıca dönen bir kare
   olmamalı: iPhone Safari o katmana maskeyi uygulamıyor, gökkuşağı düğmenin tamamını kaplıyor ve yazı okunmuyordu
   (Berke 28.10). Kaydırırken açı durur (html.kayiyor), yeniden çizim olmaz. */
@property --prizma-a {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.prizma__kenar,
.prizma__isik {
  position: absolute;
  border-radius: inherit;
  pointer-events: none;
}

.prizma__kenar {
  inset: 0;
  padding: 1.5px;
  background: conic-gradient(
    from var(--prizma-a),
    rgb(255 255 255 / 0.95) 0deg,
    rgb(255 255 255 / 0.2) 28deg,
    rgb(255 179 71 / 0.95) 62deg,
    rgb(255 61 154 / 0.9) 98deg,
    rgb(255 255 255 / 0.18) 140deg,
    rgb(255 255 255 / 0.85) 168deg,
    rgb(42 212 255 / 0.85) 208deg,
    rgb(160 90 255 / 0.9) 246deg,
    rgb(255 255 255 / 0.16) 290deg,
    rgb(255 205 230 / 0.9) 326deg,
    rgb(255 255 255 / 0.95) 360deg
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
}

.prizma__isik {
  inset: -7px;
  z-index: -1;
  background: conic-gradient(
    from calc(var(--prizma-a) + 20deg),
    transparent 0deg,
    rgb(255 179 71 / 0.55) 60deg,
    rgb(255 61 154 / 0.55) 100deg,
    transparent 150deg,
    rgb(42 212 255 / 0.4) 210deg,
    rgb(160 90 255 / 0.5) 250deg,
    transparent 300deg
  );
  filter: blur(16px);
  opacity: 0.45;
  transition: opacity 300ms ease;
}

.btn--prizma:hover .prizma__isik {
  opacity: 0.75;
}

@keyframes prizma-don {
  to {
    --prizma-a: 360deg;
  }
}

/* Dönüş yalnız düğmenin bölümü ekrandayken tanımlıdır (site.js → hareket-aktif); beklerken kare üretmez */
@media (prefers-reduced-motion: no-preference) {
  html.js .hareket-aktif :is(.prizma__kenar, .prizma__isik) {
    animation: prizma-don 7s linear infinite;
  }
}

/* ---------------------------------------------------------------- Liquid glass yüzey */

.cam {
  background: linear-gradient(180deg, rgb(255 255 255 / 0.085), rgb(255 255 255 / 0.025) 60%, rgb(255 255 255 / 0.045));
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgb(255 255 255 / 0.12);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    inset 0 -18px 36px rgb(255 255 255 / 0.025),
    0 30px 70px -40px rgb(0 0 0 / 0.9);
}

/* İmlecin peşinden gelen ışık (yalnız fare ile) */
.cam--isik {
  position: relative;
}

.cam--isik::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, -30%), rgb(255 255 255 / 0.1), transparent 60%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}

@media (hover: hover) {
  .cam--isik:hover::after {
    opacity: 1;
  }
}

@media (prefers-reduced-transparency: reduce) {
  .cam,
  .btn--prizma,
  .ust.kaydirildi {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: #14141d !important;
  }
}

@media (prefers-contrast: more) {
  .cam,
  .modul-kart,
  .paket,
  .sss__oge {
    border-color: rgb(255 255 255 / 0.55) !important;
  }
}

/* ---------------------------------------------------------------- Üst menü
   Ekranın üstünde yüzen sıvı cam kapsül (YK gibi): solda "Ücretsiz başla", tam ortada Eren Hocaoğlu yazı logosu,
   sağda menü. Bölüm bağlantıları ve üye girişi her ekranda menünün içinde. Kapsül ekranın kenarına değmez:
   iPhone Safari (iOS 26+) kenara değen tam genişlikteki sabit öğenin rengini durum çubuğuna düz bant olarak yayar. */

.ust {
  position: fixed;
  top: 12px;
  right: max(12px, env(safe-area-inset-right));
  left: max(12px, env(safe-area-inset-left));
  z-index: 50;
  pointer-events: none;
}

.ust__hap {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: min(1200px, 100%);
  min-height: 56px;
  margin-inline: auto;
  padding: 6px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03)),
    rgb(14 11 22 / 0.36);
  -webkit-backdrop-filter: blur(18px) saturate(1.8);
  backdrop-filter: blur(18px) saturate(1.8);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.24),
    0 16px 40px -22px rgb(0 0 0 / 0.9);
  pointer-events: auto;
  transition: background-color 0.35s ease;
}

.ust.kaydirildi .ust__hap {
  background:
    linear-gradient(180deg, rgb(255 255 255 / 0.1), rgb(255 255 255 / 0.03)),
    rgb(14 11 22 / 0.62);
}

.ust__sol,
.ust__sag {
  display: flex;
  align-items: center;
  min-width: 0;
}

.ust__sol {
  justify-self: start;
}

.ust__sag {
  justify-self: end;
}

.ust__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding-inline: 12px;
  color: #f4f1ea;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ust__logo:active {
  transform: scale(0.96);
}

.ust__logo .eh-logo {
  display: block;
  width: auto;
  height: clamp(11px, 3.6vw, 15px);
}

@media (min-width: 900px) {
  .ust__logo .eh-logo {
    height: 18px;
  }
}

/* Telefonda logo ortada sığsın diye düğme kısalır: "Başla" */
.ust__kisa {
  display: none;
}

@media (max-width: 599px) {
  .ust__uzun {
    display: none;
  }

  .ust__kisa {
    display: inline;
  }
}

.menu-dugme {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  color: inherit;
  cursor: pointer;
}

.menu-dugme__cizgi,
.menu-dugme__cizgi::before,
.menu-dugme__cizgi::after {
  display: block;
  width: 17px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition:
    transform var(--gecis),
    background-color var(--gecis);
}

.menu-dugme__cizgi {
  position: relative;
}

.menu-dugme__cizgi::before,
.menu-dugme__cizgi::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-dugme__cizgi::before {
  transform: translateY(-5.5px);
}

.menu-dugme__cizgi::after {
  transform: translateY(5.5px);
}

.ust[data-menu-acik] .menu-dugme__cizgi {
  background: transparent;
}

.ust[data-menu-acik] .menu-dugme__cizgi::before {
  transform: rotate(45deg);
}

.ust[data-menu-acik] .menu-dugme__cizgi::after {
  transform: rotate(-45deg);
}


@media (max-width: 359.98px) {
  .ust__logo {
    padding-inline: 6px;
  }

  .ust__sol .btn--kucuk {
    padding: 0 12px;
  }
}

/* ---------------------------------------------------------------- Kapsülde bölüm barları (Berke 27.10)
   Açılış geçilince yan panelin yerine bölümler kapsülde yatay barlar olarak belirir (GTA göstergesi gibi):
   logo ve "Ücretsiz başla" silinir, kapsül buzlu cama döner (YK'deki gibi süt beyazı ışık). En üste dönünce
   eski hâli geri gelir. Barların doluluğu yan halkalarla aynı adımlarla gelir (site.js); geçişler yalnız durum
   değişince CSS'te çalışır, kaydırmaya bağlı iş yok. */

/* Buzlu cam katmanı: kapsülün kendi bulanıklığının üstünde süt beyazı ışık; yalnız saydamlığı değişir */
.ust__hap::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background:
    radial-gradient(120% 150% at 50% -50%, rgb(255 255 255 / 0.2), transparent 62%),
    linear-gradient(180deg, rgb(255 255 255 / 0.15), rgb(255 255 255 / 0.06));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.46),
    inset 0 0 24px rgb(255 255 255 / 0.07);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s ease;
}

.ust.bar-modu .ust__hap::before {
  opacity: 1;
}

/* Buzlu cam: arkadaki yazı okunmaz, yalnız renk ve ışık geçer */
.ust__hap {
  transition:
    background-color 0.35s ease,
    -webkit-backdrop-filter 0.45s ease,
    backdrop-filter 0.45s ease;
}

.ust.bar-modu .ust__hap {
  -webkit-backdrop-filter: blur(30px) saturate(1.8);
  backdrop-filter: blur(30px) saturate(1.8);
}

.ust__sol,
.ust__logo {
  transition:
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.4s ease 0.1s,
    translate 0.6s var(--yumusak) 0.1s,
    visibility 0s;
}

.ust.bar-modu .ust__sol,
.ust.bar-modu .ust__logo {
  visibility: hidden;
  opacity: 0;
  translate: 0 -8px;
  transition:
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 0.2s ease,
    translate 0.3s ease,
    visibility 0s linear 0.3s;
}

.ust-bar {
  position: absolute;
  inset: 6px 62px 6px 14px;
  display: flex;
  align-items: center;
  visibility: hidden;
  transition: visibility 0s linear 0.3s;
}

.ust.bar-modu .ust-bar {
  visibility: visible;
  transition: visibility 0s;
}

.ust-bar__liste {
  display: flex;
  gap: 6px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Barlar soldan sağa sırayla yerine oturur; çıkarken birlikte silinir */
.ust-bar__liste li {
  flex: 1 1 0;
  min-width: 0;
  opacity: 0;
  translate: 0 6px;
  transition:
    opacity 0.2s ease,
    translate 0.3s ease;
}

.ust.bar-modu .ust-bar__liste li {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.4s ease calc(0.1s + var(--sira) * 0.045s),
    translate 0.6s var(--yumusak) calc(0.1s + var(--sira) * 0.045s);
}

.ust-bar a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  padding-inline: 2px;
  color: var(--metin);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.ust-bar a:active {
  transform: scale(0.94);
}

.ust-bar a:focus-visible {
  outline: 2px solid var(--metin);
  outline-offset: 2px;
  border-radius: 10px;
}

.ust-bar__bas {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
}

.ust-bar .ri {
  width: 19px;
  height: 19px;
  opacity: 0.5;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--yumusak);
}

.ust-bar a.gecildi .ri {
  opacity: 0.78;
}

.ust-bar a.aktif .ri {
  opacity: 1;
  transform: scale(1.1);
}

/* GTA barı: koyu yuva, bölümün rengiyle soldan dolan şerit (yan halkayla aynı oran) */
.ust-bar__iz {
  position: relative;
  display: block;
  height: 5px;
  overflow: hidden;
  border-radius: 1.5px;
  background: rgb(0 0 0 / 0.4);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  transition: box-shadow 0.3s ease;
}

.ust-bar__dolum {
  position: absolute;
  inset: 0;
  background: var(--bar);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bar) 62%, #fff), var(--bar) 70%);
  opacity: 0.72;
  transform: scaleX(0);
  transform-origin: left center;
  transition:
    transform 0.6s var(--yumusak),
    opacity 0.3s ease;
}

.ust-bar a.aktif .ust-bar__iz {
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 0 12px -3px var(--bar);
}

.ust-bar a.aktif .ust-bar__dolum {
  opacity: 1;
}

/* Telefon ve tablette yalnız ikon + bar; bölüm değişince adı kapsülün altında kısa süre görünür */
.ust-bar__ad {
  --x: -50%;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(22 17 32 / 0.94);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.28),
    0 14px 30px -16px rgb(0 0 0 / 0.9);
  color: var(--metin);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(var(--x), -4px);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--yumusak);
}

.ust-bar li:first-child .ust-bar__ad {
  --x: 0%;
  left: 0;
}

.ust-bar li:last-child .ust-bar__ad {
  --x: 0%;
  right: 0;
  left: auto;
}

.ust-bar a.etiketli .ust-bar__ad {
  opacity: 1;
  transform: translate(var(--x), 0);
}

/* Geniş ekranda her barın adı ikonunun yanında hep görünür */
@media (min-width: 1000px) {
  .ust-bar {
    inset-inline: 22px 70px;
  }

  .ust-bar__liste {
    gap: 16px;
  }

  .ust-bar__bas {
    justify-content: flex-start;
  }

  .ust-bar a .ust-bar__ad,
  .ust-bar a.etiketli .ust-bar__ad {
    position: static;
    overflow: hidden;
    padding: 0;
    background: none;
    box-shadow: none;
    text-overflow: ellipsis;
    opacity: 0.62;
    transform: none;
    transition: opacity 0.3s ease;
  }

  .ust-bar a.aktif .ust-bar__ad,
  .ust-bar a:hover .ust-bar__ad {
    opacity: 1;
  }
}

/* Doluluk işaretleri (.yan-olcu) bölümün kendisine yerleşir: Eren sayfasının bu bölümleri konumsuzdu, barlar boş kalıyordu */
.ep-tarihce,
.ep-kamera,
.ep-anlayis {
  position: relative;
}

/* Barlar varken yan panel görünmez: aynı bölüm menüsü üstte */
.ust.bar-modu ~ .yan {
  visibility: hidden;
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .ust__hap::before,
  .ust__sol,
  .ust__logo,
  .ust-bar__liste li,
  .ust-bar__dolum,
  .ust-bar__ad,
  .ust-bar .ri {
    transition-duration: 0.01ms !important;
    transition-delay: 0s !important;
  }
}

/* Alt bilgideki marka: çip + ad */
.marka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  white-space: nowrap;
  text-decoration: none;
}

.marka__isaret {
  display: inline-grid;
  width: 34px;
  height: 34px;
}

.marka__isaret .cip {
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------- Giriş (hero)
   Eren'in sinematik portresi siyahtan aydınlanır, pembe ve turuncu ışık yanar, başlık odaklanarak gelir,
   cam ikonlar etrafında süzülür. Yalnız transform ve opaklık canlanır (telefonda takılmaz). */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: 100svh;
  padding-block: calc(var(--ust-y) + 48px) 96px;
  overflow: hidden;
  background: #000;
}

.hero__sahne {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* İkonlar portrenin ekrandaki kutusuna göre konumlanır (cqw/cqh) */
  container-type: size;
}

.hero__portre,
.hero__portre img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 72% 30%;
}

/* Yaklaşan portre kendi kutusunda kalır; telefonda perdenin altından şerit olarak sızmaz */
.hero__portre {
  overflow: hidden;
}

/* Portre üst şeridin altından başlar; şerit Eren'in başına binmez */
.hero__portre img {
  top: 34px;
}

/* Metin tarafını ve alt kenarı karartır */
.hero__sahne::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(90deg, rgb(2 2 3 / 0.94) 0%, rgb(2 2 3 / 0.8) 30%, rgb(2 2 3 / 0.22) 58%, transparent 72%),
    linear-gradient(to bottom, rgb(2 2 3) 0, rgb(2 2 3) 34px, rgb(2 2 3 / 0.55) 90px, transparent 20%, transparent 70%, var(--zemin) 100%);
}

/* Giriş perdesi: sayfa açılınca siyahtan aydınlanır */
.hero__sahne::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #000;
  opacity: 0;
  pointer-events: none;
}

.hero__isik {
  position: absolute;
  z-index: 2;
  width: 52vmax;
  aspect-ratio: 1;
  border-radius: 50%;
  pointer-events: none;
}

.hero__isik--sol {
  left: 34%;
  top: -6%;
  background: radial-gradient(closest-side, rgb(255 61 154 / 0.26), transparent);
}

.hero__isik--sag {
  right: -18%;
  top: 14%;
  background: radial-gradient(closest-side, rgb(255 138 61 / 0.24), transparent);
}

.hero__ikonlar {
  position: absolute;
  inset: 0;
  z-index: 2;
}

.hero__ikon {
  --boy: clamp(56px, 4.9vw, 76px);
  position: absolute;
  display: grid;
  place-items: center;
  width: var(--boy);
  height: var(--boy);
  margin: calc(var(--boy) / -2) 0 0 calc(var(--boy) / -2);
  /* --x/--y fotoğrafta oran (0–1). Portre cover + object-position 72% 30% + üstten 34px; ikon o noktaya oturur,
     dar ekranda kenara, çok geniş ekranda üst şeride taşmaz. */
  --iw: max(100cqw, 100cqh * 16 / 9);
  --ih: max(100cqh, 100cqw * 9 / 16);
  left: clamp(calc(var(--boy) / 2 + 16px), calc((100cqw - var(--iw)) * 0.72 + var(--x) * var(--iw)), calc(100cqw - var(--boy) / 2 - 16px));
  top: clamp(calc(var(--boy) / 2 + 84px), calc(34px + (100cqh - var(--ih)) * 0.3 + var(--y) * var(--ih)), calc(100cqh - var(--boy) / 2 - 12px));
  overflow: hidden;
  border-radius: 30%;
  background:
    radial-gradient(120% 85% at 28% 6%, rgb(255 255 255 / 0.34), transparent 56%),
    linear-gradient(160deg, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.03) 55%, rgb(255 255 255 / 0.09));
  -webkit-backdrop-filter: blur(14px) saturate(1.8) brightness(1.08);
  backdrop-filter: blur(14px) saturate(1.8) brightness(1.08);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.6),
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 -16px 26px -16px var(--renk),
    0 20px 44px -18px var(--renk),
    0 0 80px -26px var(--renk);
}

/* Camın üstünden geçen ışık süpürmesi */
.hero__ikon::after {
  content: "";
  position: absolute;
  inset: -40% -70%;
  background: linear-gradient(105deg, transparent 42%, rgb(255 255 255 / 0.34) 50%, transparent 58%);
  transform: translateX(-60%);
  pointer-events: none;
}

.hero__ikon .ri,
.hero__ikon .arac-logo {
  position: relative;
  width: 46%;
  height: 46%;
  filter: drop-shadow(0 2px 6px rgb(0 0 0 / 0.35)) drop-shadow(0 0 10px var(--renk));
}

.hero__icerik {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
}

.hero__icerik > * {
  max-width: 40rem;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero__sahne::before {
    animation: perde-kalk 1.7s ease 0.1s both;
  }

  html.js .hero__portre img {
    animation: portre-gel 3s var(--yumusak) both;
  }

  html.js .hero__isik {
    animation: isik-yan 2.6s ease 0.8s both;
  }

  html.js .hero__icerik > * {
    animation: yazi-gel 1.1s var(--yumusak) both;
  }

  html.js .hero__icerik > :nth-child(1) {
    animation-delay: 0.45s;
  }

  html.js .hero__icerik > :nth-child(2) {
    animation-delay: 0.58s;
  }

  html.js .hero__icerik > :nth-child(3) {
    animation-delay: 0.72s;
  }

  html.js .hero__icerik > :nth-child(4) {
    animation-delay: 0.86s;
  }

  html.js .hero__icerik > :nth-child(5) {
    animation-delay: 0.98s;
  }

  html.js .hero__icerik > :nth-child(6) {
    animation-delay: 1.1s;
  }

  html.js .hero__ikon {
    animation:
      ikon-gel 1.1s var(--yumusak) var(--gec) both,
      ikon-suzul 8s ease-in-out calc(var(--gec) + 1.1s + var(--suzul)) infinite;
  }

  html.js .hero__ikon::after {
    animation: ikon-isik 7s ease-in-out calc(var(--gec) + 1.8s - var(--suzul)) infinite;
  }

  html.js .hero__ikon .ri,
  html.js .hero__ikon .arac-logo {
    animation: ikon-derinlik 8s ease-in-out calc(var(--gec) + 1.1s + var(--suzul)) infinite;
  }

  html.js .hero:not(.hareket-aktif) .hero__ikon::after,
  html.js .hero:not(.hareket-aktif) .hero__ikon .ri,
  html.js .hero:not(.hareket-aktif) .hero__ikon .arac-logo {
    animation-play-state: paused;
  }

  /* Giriş (ikon-gel) her durumda oynar; giriş ekranda değilken yalnız süzülme döngüsü durur */
  html.js .hero:not(.hareket-aktif) .hero__ikon {
    animation-play-state: running, paused;
  }
}

@keyframes perde-kalk {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes portre-gel {
  from {
    transform: scale(1.12);
  }
}

@keyframes isik-yan {
  from {
    opacity: 0;
  }
}

@keyframes yazi-gel {
  from {
    opacity: 0;
    translate: 0 22px;
    filter: blur(8px);
  }
}

@keyframes ikon-gel {
  from {
    opacity: 0;
    scale: 0.4;
  }
}

/* Karo hafifçe süzülür ve eğilir; ikon camın içinde ters yöne kayar (derinlik) */
@keyframes ikon-suzul {
  0%,
  100% {
    translate: 0 0;
    rotate: var(--egim, -4deg);
  }

  50% {
    translate: 0 -12px;
    rotate: calc(var(--egim, -4deg) * -0.6);
  }
}

@keyframes ikon-derinlik {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(3px);
  }
}

@keyframes ikon-isik {
  0%,
  64% {
    transform: translateX(-60%);
  }

  100% {
    transform: translateX(60%);
  }
}

/* Dikey ekran: portre üstte, başlık ve butonlar onun alt kısmına biner */
@media (max-aspect-ratio: 1/1) {
  .hero {
    display: block;
    min-height: 0;
    padding: 0 0 56px;
  }

  .hero__sahne {
    position: relative;
    z-index: 0;
    height: min(47svh, 104vw);
  }

  .hero__portre,
  .hero__portre img {
    object-position: 50% 30%;
  }

  .hero__portre img {
    top: 44px;
  }

  .hero__sahne::after {
    background: linear-gradient(to bottom, rgb(2 2 3 / 0.55) 0%, transparent 20%, transparent 66%, rgb(2 2 3 / 0.82) 88%, var(--zemin) 100%);
  }

  .hero__isik--sol {
    left: -30%;
    top: 4%;
  }

  .hero__isik--sag {
    right: -36%;
    top: 26%;
  }

  .hero__ikon {
    --boy: 52px;
    left: var(--mx);
    top: var(--my);
  }

  .hero__icerik {
    margin-top: -26px;
    align-items: center;
    text-align: center;
  }

  .hero__icerik > * {
    max-width: 100%;
  }

  .hero__icerik .hero__eylem {
    justify-content: center;
  }

  .hero__icerik .hero__birincil {
    align-items: center;
  }

  /* Karşılama başlığa yakın (Berke: biraz daha aşağıda): fotoğrafın alt kenarından iner, başlık yerinde kalır */
  .hero__icerik .hero__karsilama {
    margin-top: 16px;
    margin-bottom: 0;
  }

  .hero__icerik .hero__baslik {
    margin-top: 12px;
  }

  .hero__icerik .hero__aciklama {
    margin-top: 14px;
  }

  .hero__icerik .hero__eylem {
    margin-top: 20px;
  }

  .hero__formul {
    justify-content: center;
  }
}

.hero__baslik {
  margin-top: 0;
  font-size: clamp(2.25rem, 1rem + 5.4vw, 4.5rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.hero__baslik > span {
  display: block;
  padding-bottom: 0.06em;
}

.hero__baslik > span:first-child {
  background: linear-gradient(180deg, #ffffff 30%, #d9d9e3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__baslik-ikinci {
  background: linear-gradient(180deg, #c9c9d4 0%, #7f7f8c 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* "öğren." ve "dönüştür.": gün batımı neonu (GTA 6 tadında parlayan degrade + ışıma, ara ara üstünden ışık geçer) */
.hero__neon {
  background: linear-gradient(100deg, #ff3d9a 0%, #ff5f7e 28%, #ff8a3d 50%, #ffc15e 62%, #fff0c9 70%, #ffb347 78%, #ff3d9a 100%);
  background-size: 260% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 10px rgb(255 61 154 / 0.55)) drop-shadow(0 0 28px rgb(255 138 61 / 0.38));
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero__neon {
    animation: neon-parla 7s ease-in-out 1.6s infinite;
  }

  html.js .hero:not(.hareket-aktif) .hero__neon {
    animation-play-state: paused;
  }
}

@keyframes neon-parla {
  0%,
  58% {
    background-position: 0% 0;
  }

  82%,
  100% {
    background-position: 100% 0;
  }
}

.hero__aciklama {
  max-width: 34rem;
  margin-top: 22px;
  font-size: clamp(1rem, 1.45vw, 1.1875rem);
  color: var(--metin-2);
}

.hero__eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 14px 14px;
  margin-top: 34px;
}

.hero__birincil {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hero__not {
  font-size: 0.875rem;
  color: rgb(245 245 247 / 0.78);
}

/* Portrenin parlak yerine denk gelirse okunsun diye koyu cam zemin */
.hero .btn--cerceve {
  background: rgb(12 4 20 / 0.5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.hero .btn--cerceve:hover {
  background: rgb(40 14 52 / 0.6);
}

@media (max-width: 559.98px) {
  .hero__eylem {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 360px;
  }

  .hero__eylem .btn {
    width: 100%;
  }
}

/* ---------------------------------------------------------------- Eğitmen ve konu şeridi */

.serit-bar-kap {
  position: relative;
  z-index: 2;
}

/* Eğitmen şeridi: Eren'in kamera karşısındaki gerçek fotoğrafı cama yumuşakça karışır; yanında ad ve konular */
.serit-bar {
  display: grid;
  overflow: hidden;
  border-radius: 22px;
}

.serit-bar__foto {
  aspect-ratio: 4 / 3.1;
  overflow: hidden;
}

.serit-bar__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 40% 30%;
  -webkit-mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 52%, transparent 100%);
}

.serit-bar__govde {
  position: relative;
  display: grid;
  gap: 16px;
  margin-top: -34px;
  padding: 0 20px 22px;
}

.serit-bar__eren p {
  display: grid;
  line-height: 1.25;
}

.serit-bar__eren span {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.serit-bar__eren strong {
  font-size: 1.375rem;
  font-weight: 650;
  letter-spacing: -0.02em;
}

.serit-bar__eren .serit-bar__not {
  display: block;
  margin-top: 6px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--metin-2);
}

.serit-bar__ayrac {
  height: 1px;
  background: rgb(255 255 255 / 0.12);
}

.serit-bar__konular {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 16px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.serit-bar__konular li {
  display: flex;
  align-items: center;
  gap: 9px;
  color: rgb(245 245 247 / 0.9);
}

.serit-bar__konular .ri,
.serit-bar__konular .arac-logo {
  flex: none;
  width: 22px;
  height: 22px;
}

.serit-bar__konular .arac-logo {
  padding: 1px;
}

@media (min-width: 900px) {
  .serit-bar {
    grid-template-columns: minmax(300px, 34%) minmax(0, 1fr);
    align-items: center;
  }

  .serit-bar__foto {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 290px;
  }

  .serit-bar__foto img {
    -webkit-mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 55%, transparent 100%);
  }

  .serit-bar__govde {
    margin-top: 0;
    padding: 28px 34px 28px 6px;
    gap: 20px;
  }

  .serit-bar__konular {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ---------------------------------------------------------------- Ücretsiz başlangıç */

.ucretsiz {
  background:
    radial-gradient(45% 50% at 82% 45%, rgb(255 61 154 / 0.14), transparent 70%),
    radial-gradient(40% 40% at 95% 85%, rgb(255 138 61 / 0.1), transparent 70%);
}

.ucretsiz__ic {
  display: grid;
  gap: clamp(36px, 6vw, 72px);
  align-items: center;
}

@media (min-width: 900px) {
  .ucretsiz__ic {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.ucretsiz__metin h2 {
  font-size: clamp(2rem, 4.3vw, 3.375rem);
}

.ucretsiz__metin > p:not([class]) {
  max-width: 34rem;
  margin-top: 18px;
  font-size: clamp(1rem, 1.35vw, 1.125rem);
  color: var(--metin-2);
}

.kapsam {
  display: grid;
  gap: 12px;
  margin-top: 26px;
}

.kapsam li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 1.0625rem;
  font-weight: 500;
}

.kapsam .ikon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  padding: 4px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  stroke-width: 2.6;
}

.kapsam__ad {
  display: block;
  font-size: 0.875rem;
  font-weight: 400;
  color: var(--metin-2);
}

.ucretsiz__sinir,
.topluluk__not,
.paket-notlari p {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--metin-2);
}

.ucretsiz__sinir .ikon,
.topluluk__not .ikon,
.paket-notlari .ikon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
  color: var(--pembe-acik);
}

.ucretsiz__sinir {
  max-width: 34rem;
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.ucretsiz__eylem {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-top: 30px;
}

.ucretsiz__not {
  font-size: 0.875rem;
  color: var(--metin-2);
}

/* Skool (Berke 25.10): öne çıkan marka kulüp. Skool yalnız altyapı: tek renk beyaz yazı logosu, kısık */
.skool-logo {
  display: block;
  width: 40px;
  height: auto;
  opacity: 0.62;
}

.skool-rozet {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
  color: rgb(245 245 247 / 0.5);
}

.skool-rozet .skool-logo {
  width: 38px;
  transform: translateY(1px);
}

.son__eylem .skool-rozet {
  justify-content: center;
}

/* Üyelik kartı: koyu kart, gün batımı saç teli çerçeve, halkalı portre */
.skool-kart {
  --kart-zemin: #0b0810;
  display: flex;
  flex-direction: column;
  width: min(100%, 420px);
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 61 154 / 0.16), transparent 55%),
    radial-gradient(90% 80% at 100% 100%, rgb(255 179 71 / 0.1), transparent 60%),
    linear-gradient(var(--kart-zemin), var(--kart-zemin)) padding-box,
    linear-gradient(125deg, rgb(255 95 174 / 0.7), rgb(255 125 104 / 0.35) 45%, rgb(255 255 255 / 0.08) 70%, rgb(255 184 79 / 0.45)) border-box;
  box-shadow: 0 24px 60px -34px rgb(255 61 154 / 0.55), inset 0 1px 0 rgb(255 255 255 / 0.08);
  color: var(--metin);
  text-decoration: none;
  transition: transform var(--gecis), box-shadow var(--gecis);
}

.skool-kart:hover {
  transform: translateY(-2px);
  box-shadow: 0 30px 70px -32px rgb(255 61 154 / 0.7), inset 0 1px 0 rgb(255 255 255 / 0.1);
}

.skool-kart__ust {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 16px 14px;
}

.skool-kart__portre {
  flex: none;
  width: 54px;
  height: 54px;
  padding: 2px;
  border-radius: 50%;
  background: var(--gunbatimi);
  box-shadow: 0 0 22px -4px rgb(255 61 154 / 0.6);
}

.skool-kart__portre img {
  display: block;
  width: 100%;
  height: 100%;
  border: 2px solid var(--kart-zemin);
  border-radius: 50%;
  object-fit: cover;
}

.skool-kart__metin {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

.skool-kart__etiket {
  margin-bottom: 3px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pembe-acik);
}

.skool-kart__metin strong {
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.skool-kart__aciklama {
  margin-top: 2px;
  font-size: 0.8125rem;
  color: var(--metin-2);
  text-wrap: balance;
}

.skool-kart__ok {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.08);
  border: 1px solid rgb(255 255 255 / 0.14);
  transition: background var(--gecis), transform var(--gecis);
}

.skool-kart__ok .ikon {
  width: 16px;
  height: 16px;
}

.skool-kart:hover .skool-kart__ok {
  background: rgb(255 255 255 / 0.16);
  transform: translateX(2px);
}

/* Telefonda sağ kenarda yan menü çıkıntısı var: ok yerine kartın tamamı dokunulur */
@media (max-width: 599px) {
  .skool-kart__ok {
    display: none;
  }
}

.skool-kart__serit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px 12px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgb(245 245 247 / 0.42);
}

.skool-kart__serit .skool-logo {
  width: 36px;
  opacity: 0.5;
}

.davet {
  width: min(100%, 320px);
  margin-inline: auto;
}

@media (min-width: 900px) {
  .davet {
    width: min(100%, 420px);
  }
}

@media (max-width: 899.98px) {
  .ucretsiz__ic {
    gap: 0;
  }

  .davet {
    order: -1;
    width: min(46vw, 190px);
    margin-bottom: 6px;
  }
}

.davet__ic {
  position: relative;
}

.davet__kart {
  width: 100%;
}

.davet__ikon {
  position: absolute;
  top: 46%;
  left: 50%;
  width: 34%;
  aspect-ratio: 1;
  transform: translate(-50%, -50%) rotate(-10deg);
}

.davet__ikon .ri {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 0 16px var(--parilti));
}

@media (prefers-reduced-motion: no-preference) {
  .davet__ic {
    animation: davet-suzul 9s ease-in-out infinite;
    animation-play-state: paused;
  }

  .davet.hareket-aktif .davet__ic {
    animation-play-state: running;
  }
}

@keyframes davet-suzul {
  50% {
    transform: translateY(-12px) rotate(1.2deg);
  }
}

.ornek-ders {
  margin: 0;
  padding: 14px;
  border-radius: var(--r-panel);
}

.ornek-ders__ust {
  margin: 4px 6px 12px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.ornek-ders__oran {
  overflow: hidden;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  background: #000;
}

.ornek-ders__oran iframe,
.ornek-ders__oran video {
  width: 100%;
  height: 100%;
  border: 0;
}

.ornek-ders figcaption {
  margin: 12px 6px 4px;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

/* ---------------------------------------------------------------- Eğitim programı (Fintech ızgarası) */

.moduller {
  background: radial-gradient(60% 40% at 0% 60%, rgb(123 47 247 / 0.16), transparent 70%);
}

.modul-izgara {
  display: grid;
  gap: 12px;
}

@media (min-width: 640px) {
  .modul-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 980px) {
  .modul-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.modul-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.13);
  border-radius: var(--r-kart);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.045), rgb(255 255 255 / 0.012));
  transition:
    transform 0.4s var(--yumusak),
    border-color 0.3s ease,
    background-color 0.3s ease,
    box-shadow 0.3s ease;
}

/* Kartın üstünde Eren'in o işi yaparken görseli; telefonda solda küçük kare (ayrı kırpım) */
.modul-kart__resim {
  position: relative;
  display: block;
  overflow: hidden;
}

.modul-kart__resim::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 45%;
  background: linear-gradient(180deg, transparent, rgb(12 6 20 / 0.55));
  pointer-events: none;
}

.modul-kart__gorsel {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--yumusak);
}

.modul-kart__govde {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 20px 22px 22px;
}

.modul-kart__ozet {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(245 245 247 / 0.82);
}

.modul-kart__detay {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--metin-2);
}

@media (hover: hover) {
  .modul-kart:hover .modul-kart__gorsel {
    transform: scale(1.04);
  }
}

/* Telefon: görselli kartlar kompakt satır olur (solda kare, sağda ad + özet, ayrıntı altta tam genişlik) */
@media (max-width: 639.98px) {
  .modul-kart:has(> .modul-kart__resim) {
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 4px;
    padding: 12px 14px 12px 12px;
  }

  .modul-kart:has(> .modul-kart__resim) .modul-kart__govde {
    display: contents;
  }

  .modul-kart:has(> .modul-kart__resim) .modul-kart__ust {
    display: none;
  }

  .modul-kart__resim {
    grid-row: 1 / span 2;
    width: 84px;
    height: 84px;
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  }

  .modul-kart__resim::after {
    display: none;
  }

  .modul-kart__resim .modul-kart__gorsel {
    width: 84px;
    height: 84px;
    aspect-ratio: 1;
  }

  .modul-kart:has(> .modul-kart__resim) h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    font-size: 1.0625rem;
  }

  .modul-kart:has(> .modul-kart__resim) .modul-kart__ozet {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
    font-size: 0.875rem;
    line-height: 1.45;
  }

  .modul-kart:has(> .modul-kart__resim) .detay {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

.modul-kart__ust {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}

.modul-kart__ikon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 15px;
  background: linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.12),
    inset 0 1px 0 rgb(255 255 255 / 0.16);
}

.modul-kart__ikon .ri {
  width: 28px;
  height: 28px;
}

.modul-kart__etiket {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.modul-kart h3 {
  font-size: 1.25rem;
  line-height: 1.25;
  letter-spacing: -0.02em;
}

.modul-kart__metin {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--metin-2);
}

.kazanim {
  display: grid;
  gap: 14px;
  margin: 10px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.kazanim > div {
  display: grid;
  gap: 4px;
}

.kazanim dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--metin-3);
}

.kazanim dd {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: rgb(245 245 247 / 0.84);
}

.kazanim > div:nth-child(2) dd {
  font-weight: 500;
  color: #fff;
}

@media (hover: hover) {
  .modul-kart:not(.modul-kart--davet):hover {
    transform: translateY(-4px);
    border-color: rgb(255 159 207 / 0.45);
    background-color: rgb(255 61 154 / 0.07);
    box-shadow: 0 30px 60px -36px rgb(255 61 154 / 0.7);
  }
}

.modul-kart--davet {
  align-items: flex-start;
  justify-content: center;
  gap: 12px;
  padding: 22px;
  border-color: rgb(255 159 207 / 0.35);
  background:
    radial-gradient(120% 90% at 0% 0%, rgb(255 61 154 / 0.3), transparent 60%),
    radial-gradient(90% 80% at 100% 100%, rgb(255 138 61 / 0.22), transparent 60%),
    rgb(255 255 255 / 0.02);
}

.modul-kart--davet .modul-kart__ikon {
  width: 60px;
  height: 60px;
  border-radius: 17px;
}

.modul-kart--davet .modul-kart__ikon .ri {
  width: 34px;
  height: 34px;
}

.modul-kart--davet h3 {
  font-size: 1.5rem;
}

.modul-kart--davet .btn {
  margin-top: 4px;
}

/* ---------------------------------------------------------------- Kimler için: hedef seçimi (gün batımı bandı) */

.hedef {
  overflow: hidden;
  background:
    radial-gradient(70% 55% at 50% 0%, rgb(255 61 154 / 0.5), transparent 70%),
    radial-gradient(55% 55% at 100% 100%, rgb(255 138 61 / 0.42), transparent 70%),
    radial-gradient(45% 45% at 0% 92%, rgb(42 212 255 / 0.16), transparent 70%),
    linear-gradient(180deg, #2a0a4f 0%, #43106b 50%, #250a45 100%);
}

.hedef .bolum__bas p {
  color: rgb(255 255 255 / 0.82);
}

.hedef .ust-ifade,
.hedef__davet-ust {
  color: #ffd6ea;
}

.hedef__secenekler {
  display: grid;
  gap: 14px;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

@media (min-width: 600px) {
  .hedef__secenekler {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .hedef__secenekler {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.hedef__kart {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 214px;
  padding: 18px;
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r-kart);
  background: #1a0b2e;
  cursor: pointer;
  transition:
    transform 0.4s var(--yumusak),
    background-color 0.3s ease,
    border-color 0.3s ease,
    color 0.3s ease,
    box-shadow 0.3s ease;
}

.hedef__kart input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}

.hedef__ust {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.hedef__gorsel {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 30%;
  transition: transform 0.8s var(--yumusak);
}

/* Yazı okunsun: üstte hafif, altta koyu */
.hedef__kart::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgb(16 5 30 / 0.2) 0%, rgb(16 5 30 / 0.45) 42%, rgb(12 4 24 / 0.92) 100%);
  transition: background-color 0.3s ease;
}

.hedef__ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: rgb(10 4 20 / 0.62);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.2),
    inset 0 1px 0 rgb(255 255 255 / 0.24);
}

.hedef__ikon .ri {
  width: 26px;
  height: 26px;
}

.hedef__isaret {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgb(255 255 255 / 0.7);
  border-radius: 50%;
  background: rgb(10 4 20 / 0.35);
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.hedef__isaret .ikon {
  width: 15px;
  height: 15px;
}

.hedef__tik {
  display: none;
}

.hedef__metin {
  margin-top: auto;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.015em;
  color: #fff;
  text-shadow: 0 1px 14px rgb(0 0 0 / 0.65);
}

@media (hover: hover) {
  .hedef__kart:hover {
    transform: translateY(-4px);
    border-color: rgb(255 255 255 / 0.65);
  }

  .hedef__kart:hover .hedef__gorsel {
    transform: scale(1.06);
  }
}

.hedef__kart.secili,
.hedef__kart.secili:hover {
  border-color: #fff;
  box-shadow:
    0 0 0 2px #fff,
    0 30px 60px -28px rgb(255 61 154 / 0.75);
}

.hedef__kart.secili::before {
  background: linear-gradient(180deg, rgb(255 61 154 / 0.2) 0%, rgb(16 5 30 / 0.4) 42%, rgb(12 4 24 / 0.92) 100%);
}

.hedef__kart.secili .hedef__isaret {
  border-color: transparent;
  background: var(--gunbatimi);
  color: #1a0820;
}

.hedef__kart.secili .hedef__ok {
  display: none;
}

.hedef__kart.secili .hedef__tik {
  display: block;
}

.hedef__kart:has(input:focus-visible) {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

@supports not selector(:has(*)) {
  .hedef__kart:focus-within {
    outline: 2px solid #fff;
    outline-offset: 3px;
  }
}

.hedef__sonuc {
  display: none;
  gap: 14px;
  margin-top: 18px;
  scroll-margin-top: calc(var(--ust-y) + 16px);
}

.hedef[data-secim] .hedef__sonuc {
  display: grid;
}

@media (min-width: 900px) {
  .hedef[data-secim] .hedef__sonuc {
    grid-template-columns: 7fr 5fr;
  }
}

.hedef__oneriler,
.hedef__davet {
  padding: clamp(22px, 3vw, 32px);
  border-radius: var(--r-panel);
}

.hedef__oneri {
  display: none;
}

.hedef[data-secim="ogrenmek"] [data-sonuc="ogrenmek"],
.hedef[data-secim="is"] [data-sonuc="is"],
.hedef[data-secim="girisim"] [data-sonuc="girisim"],
.hedef[data-secim="musteri"] [data-sonuc="musteri"] {
  display: block;
}

.hedef__aciklama {
  font-size: 1.0625rem;
  color: rgb(255 255 255 / 0.92);
}

.hedef__etiket {
  margin-top: 22px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: rgb(255 255 255 / 0.7);
}

.oneri-liste {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

@media (min-width: 640px) {
  .oneri-liste {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.oneri-liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 10px 14px 10px 10px;
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: 14px;
  background: rgb(255 255 255 / 0.06);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
}

.oneri-liste a:hover {
  border-color: rgb(255 255 255 / 0.32);
  background: rgb(255 255 255 / 0.12);
}

.oneri-liste__ikon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border-radius: 11px;
  background: rgb(8 4 28 / 0.45);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.oneri-liste__ikon .ri {
  width: 21px;
  height: 21px;
}

.oneri-liste__ok {
  width: 15px;
  height: 15px;
  margin-left: auto;
  opacity: 0.7;
}

.hedef__davet {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.hedef__davet-ust {
  font-size: 0.875rem;
  font-weight: 600;
}

.hedef__davet h3 {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
}

.hedef__davet > p:not([class]) {
  color: rgb(255 255 255 / 0.82);
}

.hedef__davet .btn {
  margin-top: 6px;
}

.hedef__davet .fiyat-satiri {
  color: rgb(255 255 255 / 0.76);
}

@media (prefers-reduced-motion: no-preference) {
  .hedef[data-secim] .hedef__oneri,
  .hedef[data-secim] .hedef__davet {
    animation: maddelesme 0.5s var(--yumusak) both;
  }

  .hedef[data-secim] .hedef__oneri .oneri-liste > li {
    animation: detay-ac 420ms var(--yumusak) both;
  }

  .hedef[data-secim] .oneri-liste > li:nth-child(2) { animation-delay: 45ms; }
  .hedef[data-secim] .oneri-liste > li:nth-child(n + 3) { animation-delay: 90ms; }

  .hedef[data-secim] .hedef__davet {
    animation-delay: 70ms;
  }
}

@keyframes maddelesme {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
  }
}

/* ---------------------------------------------------------------- Eğitmen: parlayan karolar yayı */

.eren {
  overflow: hidden;
  padding-top: clamp(48px, 6vw, 80px);
  background:
    radial-gradient(55% 40% at 50% 28%, rgb(123 47 247 / 0.18), transparent 70%),
    radial-gradient(35% 30% at 50% 45%, rgb(255 61 154 / 0.1), transparent 70%);
}

.yay {
  --R: clamp(158px, 40vw, 400px);
  --karo: clamp(50px, 6.6vw, 88px);
  position: relative;
  display: grid;
  justify-items: center;
  padding-inline: var(--oluk);
  padding-top: calc(var(--R) * 0.5 + var(--karo));
}

.yay__karolar {
  position: absolute;
  top: calc(var(--R) + var(--karo) * 0.75);
  left: 50%;
  width: 0;
  height: 0;
}

/* Koyu cam karo, içinde renkli ikon; karo ikonun renginde parlar (Glow In The Dark yayı). */
.karo {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  place-items: center;
  width: var(--karo);
  height: var(--karo);
  margin: calc(var(--karo) / -2) 0 0 calc(var(--karo) / -2);
  border-radius: 26%;
  background:
    linear-gradient(160deg, rgb(255 255 255 / 0.13), rgb(255 255 255 / 0.03) 60%),
    rgb(12 8 20 / 0.9);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.3),
    inset 0 0 0 1px rgb(255 255 255 / 0.14),
    0 12px 40px -10px var(--renk),
    0 0 70px -14px var(--renk);
  transform: translate(calc(var(--x) * var(--R)), calc(var(--y) * var(--R))) rotate(var(--egim));
  transition:
    transform 1.2s var(--yumusak) var(--gec),
    opacity 0.8s ease var(--gec);
}

.karo .ri {
  width: 54%;
  height: 54%;
}

.karo img {
  width: 100%;
  height: 100%;
}

.karo--eren {
  z-index: 2;
  width: calc(var(--karo) * 1.4);
  height: calc(var(--karo) * 1.4);
  margin: calc(var(--karo) * -0.7) 0 0 calc(var(--karo) * -0.7);
  background: none;
  box-shadow:
    0 12px 40px -10px var(--renk),
    0 0 70px -14px var(--renk);
}

.karo--eren::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.35),
    inset 0 0 0 1px rgb(255 255 255 / 0.18);
  pointer-events: none;
}

.karo--eren img {
  border-radius: inherit;
  object-fit: cover;
}

html.js .yay:not(.acik) .karo {
  opacity: 0;
  transform: translate(0, calc(var(--R) * -0.4)) rotate(0deg) scale(0.35);
}

@media (prefers-reduced-motion: no-preference) {
  .yay.acik .karo .ri,
  .yay.acik .karo > img {
    animation: suzul 7s ease-in-out var(--suzul) infinite;
    animation-play-state: paused;
  }

  .yay.hareket-aktif .karo .ri,
  .yay.hareket-aktif .karo > img {
    animation-play-state: running;
  }
}

@keyframes suzul {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

.yay__metin {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  max-width: 32rem;
  text-align: center;
}

.yay__metin .ust-ifade {
  margin-bottom: 0;
}

.yay__metin h2 {
  font-size: clamp(1.875rem, 4vw, 3.125rem);
}

.yay__metin p:not([class]) {
  color: var(--metin-2);
}

.yay__metin .btn {
  margin-top: 8px;
}

@media (max-width: 559.98px) {
  .yay {
    padding-top: calc(var(--R) * 1.3 + var(--karo));
  }

  .yay__karolar {
    top: calc(var(--R) + var(--karo) * 0.7);
  }
}

.eren-kart {
  position: relative;
  display: grid;
  overflow: hidden;
  margin-top: clamp(56px, 8vw, 96px);
  border-radius: var(--r-panel);
}

.eren-kart__gorsel {
  display: block;
  aspect-ratio: 1;
}

.eren-kart__gorsel img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 12%;
}

.eren-kart__metin {
  padding: 24px 22px 28px;
}

.eren-kart h3 {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
}

.eren-kart__unvan {
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.eren-kart__metin > p:not([class]) {
  margin-top: 18px;
  color: var(--metin-2);
}

.eren-kart__biyografi {
  display: grid;
  gap: 10px;
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
  color: var(--metin-2);
}

.eren-kart__projeler {
  display: grid;
  gap: 8px;
}

.eren-kart__projeler li {
  display: grid;
}

.eren-kart__video {
  margin-top: 20px;
}

.metin-baglanti {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 5px;
  text-decoration-color: rgb(255 255 255 / 0.4);
}

@media (min-width: 900px) {
  .eren-kart {
    min-height: 520px;
    align-items: center;
  }

  .eren-kart__gorsel {
    position: absolute;
    inset: 0 0 0 auto;
    width: 60%;
    aspect-ratio: auto;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
    mask-image: linear-gradient(90deg, transparent 0%, #000 34%);
  }

  .eren-kart__gorsel img {
    object-position: 50% 30%;
  }

  .eren-kart__metin {
    position: relative;
    max-width: 48%;
    padding: 56px;
  }
}

.eren-kart__gorsel {
  overflow: hidden;
}

.eren-kart__gorsel img {
  object-position: 50% 22%;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .eren-kart__gorsel img {
    animation: yavas-yaklas 18s ease-in-out infinite alternate;
  }

  html.js .eren:not(.hareket-aktif) .eren-kart__gorsel img {
    animation-play-state: paused;
  }
}

@keyframes yavas-yaklas {
  to {
    transform: scale(1.07) translate(-1%, -1.2%);
  }
}

/* ---------------------------------------------------------------- Uygulama örnekleri ve izinli yorumlar (yalnız gerçek içerik varsa) */

.ornek-izgara {
  display: grid;
  gap: 16px;
}

@media (min-width: 760px) {
  .ornek-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1080px) {
  .ornek-izgara {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ornek-kart {
  overflow: hidden;
  border-radius: var(--r-kart);
}

.ornek-kart__gorsel {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.ornek-kart__metin {
  display: grid;
  gap: 8px;
  padding: 20px 22px 24px;
}

.ornek-kart h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
}

.ornek-kart p {
  font-size: 0.9375rem;
  color: var(--metin-2);
}

.ornek-kart__kaynak {
  font-size: 0.8125rem;
  color: var(--metin-3);
}

.yorum-izgara {
  display: grid;
  gap: 16px;
  margin-top: 24px;
}

@media (min-width: 760px) {
  .yorum-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.yorum-kart {
  padding: 24px;
  border-radius: var(--r-kart);
}

.yorum-kart blockquote {
  margin: 0;
  font-size: 1.0625rem;
}

.yorum-kart__kim {
  display: grid;
  margin-top: 14px;
  font-size: 0.875rem;
  color: var(--metin-2);
}

.yorum-kart__kim strong {
  font-weight: 600;
  color: var(--metin);
}

/* ---------------------------------------------------------------- Topluluk (gün batımı kartları) */

.topluluk__kartlar {
  display: grid;
  gap: 76px 20px;
  margin-top: 84px;
}

@media (min-width: 820px) {
  .topluluk__kartlar {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.topluluk-kart {
  position: relative;
  padding: 76px 24px 28px;
  border-radius: var(--r-kart);
  background: linear-gradient(170deg, #e2328c 0%, #a3218f 48%, #4d1786 100%);
  text-align: center;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.25),
    0 34px 70px -36px rgb(255 61 154 / 0.75);
  transition: transform 0.4s var(--yumusak);
}

@media (hover: hover) {
  .topluluk-kart:hover {
    transform: translateY(-4px);
  }
}

.topluluk-kart__ikon {
  position: absolute;
  top: -50px;
  left: 50%;
  display: grid;
  place-items: center;
  width: 100px;
  height: 100px;
  border: 3px solid #0b0610;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%),
    #140b1f;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 0.3),
    0 18px 36px -12px rgb(0 0 0 / 0.85),
    0 0 48px -8px var(--renk);
  transform: translateX(-50%);
}

.topluluk-kart__ikon .ri {
  width: 50px;
  height: 50px;
}

.topluluk-kart h3 {
  font-size: 1.25rem;
}

.topluluk-kart p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: rgb(255 255 255 / 0.9);
}

.topluluk__not {
  justify-content: center;
  margin-top: 36px;
}

/* ---------------------------------------------------------------- Üyelik paketleri (üçü aynı satırlarla, karşılaştırılabilir) */

.uyelik {
  background:
    radial-gradient(45% 40% at 50% 38%, rgb(255 61 154 / 0.16), transparent 70%),
    radial-gradient(35% 35% at 85% 70%, rgb(255 138 61 / 0.1), transparent 70%),
    radial-gradient(35% 35% at 12% 70%, rgb(123 47 247 / 0.14), transparent 70%);
}

.paketler {
  display: grid;
  gap: 34px 16px;
}

.paket {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 22px;
  padding: clamp(24px, 2.6vw, 30px);
  border-radius: var(--r-panel);
}

@media (min-width: 900px) {
  .paketler {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  @supports (grid-template-rows: subgrid) {
    .paketler {
      grid-template-rows: auto auto auto;
    }

    .paket {
      display: grid;
      grid-row: span 3;
      grid-template-rows: subgrid;
    }
  }
}

.paket--yillik {
  border-color: rgb(255 159 207 / 0.5);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.22),
    0 30px 80px -40px rgb(255 61 154 / 0.75);
}

/* Avantaj etiketi kartın üst kenarında: satır hizasını bozmaz. */
.paket__rozet {
  position: absolute;
  top: 0;
  left: 50%;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--gunbatimi);
  color: #1a0820;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  box-shadow: 0 10px 24px -10px rgb(255 61 154 / 0.8);
}

.paket__bas {
  display: grid;
  align-content: start;
  gap: 6px;
}

.paket h3 {
  font-size: 1.25rem;
  letter-spacing: -0.02em;
}

.paket__fiyat {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin-top: 10px;
}

.paket__tutar {
  font-size: clamp(2.25rem, 3.6vw, 2.75rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.04em;
}

.paket__donem {
  font-size: 1rem;
  color: var(--metin-2);
}

.paket__odeme {
  margin-top: 8px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.paket__ek {
  font-size: 0.875rem;
  color: var(--metin-2);
}

.paket__liste {
  display: grid;
  align-content: start;
  gap: 11px;
  padding-top: 20px;
  border-top: 1px solid rgb(255 255 255 / 0.1);
}

.paket__liste li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 0.9375rem;
  line-height: 1.45;
}

.paket__liste .ikon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  margin-top: 2px;
}

.paket__liste .var .ikon {
  color: var(--pembe-acik);
}

.paket__liste .yok {
  color: var(--metin-3);
}

.paket__liste .yok .ikon {
  color: rgb(255 255 255 / 0.32);
}

.paket .btn {
  align-self: end;
}

.paket-notlari {
  display: grid;
  gap: 10px;
  max-width: 820px;
  margin: 30px auto 0;
  padding: 18px 20px;
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.03);
}

.paket-notlari p {
  color: rgb(245 245 247 / 0.86);
}

.paket-notlari strong {
  font-weight: 600;
  color: #fff;
}

/* ---------------------------------------------------------------- SSS */

.sss__ic {
  max-width: calc(820px + var(--oluk) * 2);
}

.sss h2 {
  margin-bottom: clamp(32px, 5vw, 48px);
  text-align: center;
}

.sss__liste {
  display: grid;
  gap: 10px;
}

.sss__oge {
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: 16px;
  background: rgb(255 255 255 / 0.025);
  transition:
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.sss__oge[open] {
  border-color: rgb(255 159 207 / 0.42);
  background: rgb(255 61 154 / 0.06);
}

.sss__oge summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 20px;
  list-style: none;
  cursor: pointer;
}

.sss__oge summary::-webkit-details-marker {
  display: none;
}

.sss__oge h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
  letter-spacing: -0.015em;
}

.sss__isaret {
  position: relative;
  flex: 0 0 32px;
  height: 32px;
  border: 1px solid rgb(255 255 255 / 0.22);
  border-radius: 50%;
  transition:
    background-color 0.3s ease,
    border-color 0.3s ease;
}

.sss__isaret::before,
.sss__isaret::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
}

.sss__isaret::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s var(--yumusak);
}

.sss__oge[open] .sss__isaret {
  border-color: transparent;
  background: var(--gunbatimi);
  color: #1a0820;
}

.sss__oge[open] .sss__isaret::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.sss__yanit {
  padding: 0 20px 20px;
  color: var(--metin-2);
}

@supports (interpolate-size: allow-keywords) {
  @media (prefers-reduced-motion: no-preference) {
    .sss__oge {
      interpolate-size: allow-keywords;
    }

    .sss__oge::details-content {
      height: 0;
      overflow: clip;
      transition:
        height 0.3s var(--yumusak),
        content-visibility 0.3s allow-discrete;
    }

    .sss__oge[open]::details-content {
      height: auto;
    }
  }
}

/* ---------------------------------------------------------------- Son çağrı (gün batımı ışık kubbesi) */

/* Başlık "İlk adımı ücretsiz at." SSS'ye yakın (Berke: iki parmak, sonra biraz daha yukarı). SSS'nin alt payı
   bu bölüme taşındı: düğmeyle başlık arasındaki boşluğun tamamı .son kutusunda, başlığın arkasındaki ışıma
   üstte kesilmeden söner; iki bölüm üst üste binmediği için SSS düğmesi hep tıklanır. */
.bolum.sss {
  padding-bottom: 0;
}

.son {
  overflow: hidden;
  padding-block: calc(clamp(44px, 5.5vw, 84px) + clamp(16px, 3vw, 44px)) clamp(96px, 11vw, 140px);
  text-align: center;
}

/* Gökkuşağı yayı başlığa bağlı: parlak çizgi "ücretsiz at."ın hemen altından ufuk gibi geçer,
   renkli ışıması başlığın arkasında kalır (çember çapının %6,7'si = çizginin üst noktası). */
.son__ufuk {
  position: relative;
  display: flex;
  justify-content: center;
}

.son__ufuk h2 {
  position: relative;
}

.son__kubbe {
  position: absolute;
  top: calc(100% + 10px - max(1100px, 118vw) * 0.067);
  left: 50%;
  width: max(1100px, 118vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(
      circle closest-side,
      transparent 0 84%,
      rgb(255 238 214 / 0.95) 86.6%,
      rgb(255 170 80 / 0.85) 88%,
      rgb(255 61 154 / 0.6) 90.5%,
      rgb(123 47 247 / 0.24) 94%,
      transparent 99%
    );
  filter: blur(10px);
  transform: translateX(-50%);
  pointer-events: none;
}

.son__ic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.son h2 {
  max-width: 15ch;
  font-size: clamp(2.5rem, 6vw, 4.75rem);
  letter-spacing: -0.045em;
}

.egitmen-cta__ozet {
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--metin-2);
}

.son__eylem {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
}

/* GTA renklerinde akan neon: renkler yazının içinden kesintisiz akar (bölüm ekrandayken) */
.neon {
  background: linear-gradient(90deg, #ff3d9a 0%, #ff8a3d 8%, #ffc15e 16%, #fff0c9 25%, #ffc15e 34%, #ff8a3d 42%, #ff3d9a 50%, #ff8a3d 58%, #ffc15e 66%, #fff0c9 75%, #ffc15e 84%, #ff8a3d 92%, #ff3d9a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgb(255 61 154 / 0.6)) drop-shadow(0 0 30px rgb(255 138 61 / 0.4));
}

@media (prefers-reduced-motion: no-preference) {
  html.js .neon {
    animation: neon-akis 5s linear 2;
  }

  html.js .son:not(.hareket-aktif) .neon {
    animation-play-state: paused;
  }
}

@keyframes neon-akis {
  to {
    background-position: 100% 0;
  }
}

/* Eğitmen kartı: Eren'in fotoğrafı kartın camına karışır; yanında güven + ana düğme */
.egitmen-cta {
  position: relative;
  display: grid;
  overflow: hidden;
  width: min(100%, 900px);
  margin-top: clamp(30px, 3.6vw, 44px);
  border-radius: var(--r-panel);
  text-align: left;
}

.egitmen-cta__foto {
  aspect-ratio: 1 / 1.02;
  overflow: hidden;
}

.egitmen-cta__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 16%;
  -webkit-mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 58%, transparent 100%);
}

.egitmen-cta__metin {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-top: -56px;
  padding: 0 24px 28px;
}

.egitmen-cta__metin .ust-ifade {
  margin-bottom: 0;
}

.egitmen-cta h3 {
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.12;
  letter-spacing: -0.03em;
}

.egitmen-cta__guven {
  display: grid;
  gap: 9px;
  margin: 2px 0 4px;
  padding: 0;
  list-style: none;
}

.egitmen-cta__guven li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(245 245 247 / 0.9);
}

.egitmen-cta__guven .ikon {
  flex: none;
  width: 20px;
  height: 20px;
  padding: 3px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  stroke-width: 2.6;
}

.egitmen-cta .son__eylem {
  align-items: flex-start;
  margin-top: 6px;
}

.son__karsilastir {
  position: relative;
  margin-top: 26px;
  font-size: 0.9375rem;
}

@media (min-width: 760px) {
  .egitmen-cta {
    grid-template-columns: minmax(260px, 40%) minmax(0, 1fr);
    align-items: center;
  }

  .egitmen-cta__foto {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 440px;
  }

  .egitmen-cta__foto img {
    -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
    mask-image: linear-gradient(90deg, #000 62%, transparent 100%);
  }

  .egitmen-cta__metin {
    margin-top: 0;
    padding: 40px 44px 40px 8px;
  }
}

/* ---------------------------------------------------------------- Alt bilgi */

.alt {
  padding-block: 56px 28px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  font-size: 0.9375rem;
  color: var(--metin-3);
}

.alt__ic {
  display: grid;
  gap: 36px;
}

.alt .marka {
  margin-bottom: 12px;
  font-size: 1.125rem;
  color: var(--metin);
}

.alt__marka p:not(.marka) {
  max-width: 26rem;
}

/* Eren'in hesapları: alt bilgide yalnız logo (44 px dokunma alanı), Eren sayfasında logo + ad */
.sosyal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.sosyal a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 44px;
  min-height: 44px;
  color: var(--metin-3);
  text-decoration: none;
  transition: color var(--gecis);
}

.sosyal a:hover {
  color: var(--metin);
}

.sosyal svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.alt .sosyal {
  margin: 12px 0 0 -12px;
}

.ep-sosyal {
  gap: 0 22px;
  margin-top: 16px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.ep-sosyal a {
  min-width: 0;
  color: var(--metin-2);
}

.ep-sosyal svg {
  width: 18px;
  height: 18px;
}

.alt__baglantilar {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 32px;
}

.alt__baglantilar a {
  text-decoration: none;
  transition: color var(--gecis);
}

.alt__baglantilar a:hover {
  color: var(--metin);
}

.alt__dip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 24px;
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
}

.alt__dip p {
  font-size: 0.8125rem;
}

/* Made by BEMACCI: harfler karışır, BEMACCI harf harf çözülür (BEMACCI imzası, Şifre) */
.bm-made {
  --bm-g1: #b8955a;
  --bm-g2: #e2c98f;
  --bm-g3: #fff4d8;
  --bm-wm: url("assets/bemacci-imza.png");
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 8px 4px;
  color: rgb(255 255 255 / 0.62);
  font: 500 10px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition: color 0.25s ease;
}

.bm-made:hover {
  color: rgb(255 255 255 / 0.92);
}

.bm-made:focus-visible {
  outline: 1px solid var(--bm-g2);
  outline-offset: 4px;
}

.bm-made__t {
  display: inline-block;
  white-space: nowrap;
  text-align: left;
}

.bm-made__w {
  position: relative;
  display: inline-flex;
  flex: none;
}

.bm-made__logo {
  position: relative;
  display: block;
  height: 14px;
  aspect-ratio: 1033 / 161;
  overflow: hidden;
  background: linear-gradient(100deg, var(--bm-g1), var(--bm-g2) 50%, var(--bm-g1));
  -webkit-mask: var(--bm-wm) no-repeat center / contain;
  mask: var(--bm-wm) no-repeat center / contain;
  clip-path: inset(-20% calc(100% - var(--bm-r, 100%)) -20% 0);
}

.bm-made__logo::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 300%;
  background: linear-gradient(100deg, transparent 42%, var(--bm-g3) 50%, transparent 58%);
  transform: translateX(-60%);
  animation: bm-parilti 5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.bm-made:hover .bm-made__logo::after {
  animation-duration: 1.8s;
}

.bm-made__g {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  font: 500 13px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-style: normal;
  letter-spacing: 0;
  color: var(--bm-g2);
  opacity: 0;
  pointer-events: none;
}

.bm-made.is-dec .bm-made__g:not(.ok) {
  opacity: 1;
}

.bm-made.is-armed:not(.is-in) .bm-made__w {
  --bm-r: 0%;
}

@keyframes bm-parilti {
  0% {
    transform: translateX(-60%);
  }

  32%,
  100% {
    transform: translateX(-6.67%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .bm-made__logo::after {
    animation: none;
    opacity: 0;
  }
}

@media (max-width: 559.98px) {
  .alt__dip {
    flex-direction: column;
    justify-content: center;
    text-align: center;
  }

  .bm-made {
    min-height: 44px;
  }
}

@media (min-width: 800px) {
  .alt__ic {
    grid-template-columns: 1.3fr 1fr;
    gap: 64px;
  }
}

/* ---------------------------------------------------------------- Renkli cam ikonlar (sitenin tek ikon dili) */

.ikon-kaynagi {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.ri {
  width: 1.375em;
  height: 1.375em;
  flex: 0 0 auto;
  overflow: visible;
  filter: drop-shadow(0 0 5px var(--parilti, transparent));
}

/* ---------------------------------------------------------------- Yan bölüm menüsü (telefon, tablet, masaüstü)
   Sıvı cam sekme: ekranın sağ kenarına içbükey köşelerle bağlanan panel. Halkalar her bölümün ne kadarının
   geçildiğini gösterir. Dinlenirken yalnız etkin halka ve damla kalır; bu küçük cam
   damla bölüm değiştikçe kenar boyunca kayar. Maddeler yerinden oynamaz; şekil (clip-path + kenar ışığı)
   kaydırmayla değil, yalnız durum değişince çizilir. */

.yan {
  position: fixed;
  top: 50%;
  right: 0;
  z-index: 45;
  display: none;
  width: 66px;
  padding: 26px 0;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transform: translate(28px, -50%);
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--yumusak),
    visibility 0s linear 0.6s;
}

@media (min-height: 540px) {
  .yan {
    display: block;
  }
}

/* Masaüstü: fare panelin üstüne gelince açılır (site.js); halkanın adı yanında belirir */
@media (hover: hover) and (pointer: fine) {
  .yan a:hover {
    transform: scale(1.06);
  }

  .yan a:hover .yan__etiket,
  .yan a:focus-visible .yan__etiket {
    opacity: 1;
    transform: translate(0, -50%);
  }
}

.yan.gorunur {
  visibility: visible;
  opacity: 1;
  transform: translate(0, -50%);
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--yumusak),
    visibility 0s;
}

.yan.gorunur.menu-acik {
  visibility: hidden;
  opacity: 0;
}

/* Henüz menüdeki bir bölüme gelinmediyse (film, sonuçlar) dinlenen panel kenara çekilip gizlenir: boş cam şekli kalmaz */
.yan.gorunur.dinlen.bos:not(:focus-within) {
  visibility: hidden;
  opacity: 0;
  transform: translate(28px, -50%);
  transition:
    opacity 0.4s ease,
    transform 0.6s var(--yumusak),
    visibility 0s linear 0.6s;
}

/* Cam gövde: arkasındaki sayfayı hafifçe bulanıklaştırıp parlatır; şekli JS çizer */
.yan__cam,
.yan__kenar {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.yan__cam {
  background:
    radial-gradient(80% 26% at 34% 0%, rgb(255 255 255 / 0.26), transparent 74%),
    linear-gradient(90deg, rgb(255 255 255 / 0.14), transparent 26%),
    linear-gradient(180deg, rgb(255 255 255 / 0.08), rgb(255 255 255 / 0.02) 50%, rgb(255 255 255 / 0.07)),
    rgb(14 10 22 / 0.36);
  -webkit-backdrop-filter: blur(9px) saturate(2) brightness(1.08);
  backdrop-filter: blur(9px) saturate(2) brightness(1.08);
  clip-path: inset(50% 0 50% 100%);
}

.yan__kenar {
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* İç kenardaki kalın cam ışığı ve ince parlak çizgi */
.yan__kenar-ic {
  fill: none;
  stroke: rgb(255 255 255 / 0.1);
  stroke-width: 10;
}

.yan__kenar-cizgi {
  fill: none;
  stroke: url(#yan-isik);
  stroke-width: 1.3;
}

/* Etkin halkanın arkasındaki cam mercek: bölümler arasında yaylanarak kayar */
.yan__mercek {
  position: absolute;
  top: 0;
  left: 12px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 0.28), rgb(255 255 255 / 0.07) 58%, rgb(255 255 255 / 0.13));
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.24),
    inset 0 1px 1px rgb(255 255 255 / 0.55),
    0 8px 18px -8px var(--etkin-renk, transparent);
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, var(--mercek-y, 0px), 0);
  transition:
    transform 0.62s cubic-bezier(0.34, 1.3, 0.5, 1),
    opacity 0.3s ease;
}

.yan__mercek.var {
  opacity: 1;
}

.yan__mercek.anlik {
  transition: opacity 0.3s ease;
}

.yan__liste {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0 0 0 6px;
  list-style: none;
}

.yan a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  color: var(--metin);
  text-decoration: none;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity 0.35s ease,
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.yan a:active {
  transform: scale(0.92);
}

.yan a:focus-visible {
  outline: 2px solid var(--metin);
  outline-offset: 2px;
  border-radius: 16px;
}

.yan__halka {
  position: relative;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
}

.yan__halka svg:not(.ri) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform: rotate(-90deg);
}

.yan__iz,
.yan__dolum {
  fill: none;
  stroke-width: 3.2;
}

.yan__iz {
  stroke: rgb(255 255 255 / 0.17);
}

/* Halka: bölümün geçilen kısmı (çevre 2π·19); adım adım dolar, CSS geçişiyle akar */
.yan__dolum {
  stroke: var(--halka);
  stroke-linecap: round;
  stroke-dasharray: 119.38;
  stroke-dashoffset: 119.38;
  opacity: 0;
  filter: drop-shadow(0 0 3px var(--halka));
  transition:
    stroke-dashoffset 0.6s var(--yumusak),
    opacity 0.3s ease;
}

.yan .ri {
  position: relative;
  width: 22px;
  height: 22px;
  filter: saturate(1.1) drop-shadow(0 0 5px var(--parilti));
  transition: transform 0.45s var(--yumusak);
}

.yan a.aktif .ri {
  transform: scale(1.08);
}

/* Dinlenirken diğer halkalar yerinde silinir; görünen yalnız etkin halka */
.yan.dinlen .yan__liste a:not(.aktif) {
  opacity: 0;
  pointer-events: none;
}

.yan__etiket {
  position: absolute;
  top: 22px;
  right: calc(100% + 12px);
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(18 13 28 / 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.8);
  backdrop-filter: blur(14px) saturate(1.8);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    inset 0 1px 0 rgb(255 255 255 / 0.3);
  color: var(--metin);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  transform: translate(8px, -50%);
  pointer-events: none;
  transition:
    opacity 0.3s ease,
    transform 0.45s var(--yumusak);
}

.yan a.etiketli .yan__etiket {
  opacity: 1;
  transform: translate(0, -50%);
}

/* Halka doluluğu için bölüm içindeki görünmez ölçü işaretleri */
.yan-olcu {
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.yan-olcu i {
  position: absolute;
  left: 0;
  width: 1px;
  height: 5%;
}

@media (prefers-reduced-transparency: reduce) {
  .yan__cam,
  .yan__etiket {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: #15111d;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yan,
  .yan.gorunur,
  .yan__mercek,
  .yan__dolum,
  .yan .ri,
  .yan__etiket {
    transition-duration: 0.01ms;
  }
}

/* ---------------------------------------------------------------- Kaydırınca görünme (bir kez) */

@media (prefers-reduced-motion: no-preference) {
  html.hareket-hazir [data-goster].gorundu {
    transition:
      opacity 0.7s var(--yumusak) var(--gecikme, 0ms),
      translate 0.8s var(--yumusak) var(--gecikme, 0ms),
      transform 0.4s var(--yumusak),
      border-color 0.3s ease,
      background-color 0.3s ease,
      box-shadow 0.3s ease,
      color 0.3s ease;
  }

  html.hareket-hazir [data-goster]:not(.gorundu):not(:focus-within) {
    opacity: 0;
    translate: 0 22px;
  }

  html.hareket-hazir [data-goster]:focus-within {
    transition: none;
  }

  /* Kartın fotoğrafı ayrı katmanda yerine oturur (scale); üzerine gelince büyüme transform ile ayrı kalır. */
  html.hareket-hazir :is(.modul-kart__gorsel, .hedef__gorsel, .serit-bar__foto img, .egitmen-cta__foto img, .eren-kart__gorsel img) {
    transition:
      scale 0.9s var(--yumusak) var(--gecikme, 0ms),
      opacity 1.2s var(--yumusak) calc(var(--gecikme, 0ms) + 120ms),
      transform 0.7s var(--yumusak);
  }

  html.hareket-hazir [data-goster]:not(.gorundu):not(:focus-within) :is(.modul-kart__gorsel, .hedef__gorsel, .serit-bar__foto img, .egitmen-cta__foto img, .eren-kart__gorsel img) {
    scale: 1.06;
  }

  /* Eren'in fotoğrafları kartla birlikte değil, bir an sonra solarak belirir */
  html.hareket-hazir [data-goster]:not(.gorundu):not(:focus-within) :is(.serit-bar__foto img, .egitmen-cta__foto img, .eren-kart__gorsel img) {
    opacity: 0;
  }
}

/* ---------------------------------------------------------------- Taslak araçları (yayında yok) */

mark.yer {
  padding: 0.05em 0.35em;
  border: 1px dashed rgb(255 211 107 / 0.75);
  border-radius: 6px;
  background: rgb(255 207 77 / 0.12);
  color: #ffd36b;
  font-family: var(--sans);
  font-size: 0.82em;
  font-style: normal;
  font-weight: 600;
  letter-spacing: 0.01em;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  -webkit-text-fill-color: #ffd36b;
}

.dogrula {
  text-decoration: underline dotted #ffd36b;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.editor-notu {
  display: block;
  margin-top: 6px;
  padding: 8px 12px;
  border-left: 3px solid #ffd36b;
  border-radius: 0 8px 8px 0;
  background: rgb(255 207 77 / 0.1);
  color: #ffe2a0;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-style: normal;
  line-height: 1.45;
  text-align: left;
}

.yer-blok {
  margin-top: 4px;
}

.taslak-dugme {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 60;
  padding: 10px 14px;
  border: 1px solid #b98200;
  border-radius: 999px;
  background: #fff4d1;
  color: #5f4200;
  font: 600 0.8125rem/1 var(--sans);
  cursor: pointer;
  box-shadow: 0 10px 24px -12px rgb(0 0 0 / 0.7);
}

.taslak-panel {
  width: min(680px, calc(100vw - 24px));
  max-height: min(84vh, 820px);
  padding: 0 24px 24px;
  border: 0;
  border-radius: var(--r-panel);
  background: #111119;
  color: var(--metin);
  font-size: 0.9375rem;
  box-shadow: 0 0 0 1px rgb(255 255 255 / 0.1);
}

.taslak-panel::backdrop {
  background: rgb(0 0 0 / 0.7);
}

.taslak-panel__bas {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 0 12px;
  background: #111119;
}

.taslak-panel h2 {
  font-size: 1.375rem;
}

.taslak-panel h3 {
  margin: 24px 0 8px;
  font-size: 0.875rem;
  color: var(--metin-2);
}

.taslak-panel__giris {
  color: var(--metin-2);
}

.taslak-panel code {
  padding: 0.1em 0.35em;
  border-radius: 4px;
  background: rgb(255 255 255 / 0.08);
  font-size: 0.85em;
}

.taslak-panel__kapat {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.18);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.taslak-panel__kapat .ikon {
  width: 16px;
  height: 16px;
}

.taslak-liste li {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid rgb(255 255 255 / 0.08);
}

.taslak-liste__durum {
  grid-row: span 2;
  align-self: start;
  justify-self: start;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.taslak-liste .eksik .taslak-liste__durum {
  background: rgb(255 207 77 / 0.18);
  color: #ffd36b;
}

.taslak-liste .tamam .taslak-liste__durum {
  background: rgb(52 211 153 / 0.16);
  color: #6ee7b7;
}

.taslak-liste .istege-bagli .taslak-liste__durum {
  background: rgb(255 255 255 / 0.08);
  color: var(--metin-2);
}

.taslak-liste__ad {
  font-weight: 600;
}

.taslak-liste__yer {
  font-size: 0.8125rem;
  color: var(--metin-2);
}

.taslak-notlar {
  display: grid;
  gap: 8px;
}

.taslak-notlar li {
  position: relative;
  padding-left: 16px;
  color: var(--metin-2);
}

.taslak-notlar li::before {
  content: "";
  position: absolute;
  top: 0.62em;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #ffd36b;
}

.bildirim {
  position: fixed;
  bottom: 20px;
  left: 50%;
  z-index: 70;
  max-width: calc(100vw - 32px);
  padding: 12px 16px;
  border-radius: 14px;
  background: rgb(30 30 42 / 0.92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  font-size: 0.9375rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, 12px);
  transition:
    opacity var(--gecis),
    transform var(--gecis);
}

.bildirim.gorunur {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ---------------------------------------------------------------- Azaltılmış hareket */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-goster] {
    opacity: 1;
    translate: none;
    transform: none;
  }

  html.js .yay:not(.acik) .karo {
    opacity: 1;
    filter: none;
  }

  html.js .yay:not(.acik) .karo {
    transform: translate(calc(var(--x) * var(--R)), calc(var(--y) * var(--R))) rotate(var(--egim));
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------------------------------------------------------------- Topluluk odaklı bölümler
   Sıfırdan başlayana güvence, nasıl işler, günlük hayattan örnekler, örnek durumlar (gerçek kişi değil),
   kulübün varlık nedeni ve değerleri. Hepsi aynı cam bilgi kartını kullanır. */

.bilgi-izgara {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .bilgi-izgara--2,
  .bilgi-izgara--3,
  .bilgi-izgara--4 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1000px) {
  .bilgi-izgara--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .bilgi-izgara--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.bilgi-kart,
.profil {
  position: relative;
  padding: 22px 22px 24px;
  border-radius: var(--r-kart);
}

.bilgi-kart__ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 14px;
  background:
    radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%),
    #140b1f;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 10px 26px -12px var(--renk),
    0 0 34px -14px var(--renk);
}

.bilgi-kart__ikon .ri {
  width: 26px;
  height: 26px;
}

.bilgi-kart :is(h3, h4) {
  font-size: 1.0625rem;
  line-height: 1.3;
}

.bilgi-kart p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

/* Nasıl işler: numaralı adımlar */
.adim__no {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  font-size: 0.875rem;
  font-weight: 700;
}

/* Örnek durumlar: açıkça örnek, gerçek kişi ya da yorum değil */
.profil__etiket {
  display: inline-block;
  margin-bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--metin-2);
}

.profil__bas {
  display: flex;
  align-items: center;
  gap: 14px;
}

.profil__bas .bilgi-kart__ikon {
  flex: none;
  margin-bottom: 0;
}

.profil__bas :is(h3, h4) {
  font-size: 1.125rem;
  line-height: 1.3;
}

.profil dl {
  display: grid;
  gap: 12px;
  margin: 18px 0 0;
}

.profil dt {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pembe-acik);
}

.profil dl div + div dt {
  color: var(--altin);
}

.profil dd {
  margin: 4px 0 0;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

/* ------------------------------------------------------------------
   Kısa ana sayfa: ayrıntılar "Daha fazla bilgi" düğmesinin arkasında.
   İçerik ilk HTML'de durur (arama motoru ve JS'siz görünüm için); açılış
   yalnız opacity + transform ile oynar, kaydırmaya bağlı iş yok.
   ------------------------------------------------------------------ */
.detay {
  margin-top: 22px;
}

.detay__dugme {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 16px 10px 20px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: var(--metin);
  font-size: 0.9375rem;
  font-weight: 600;
  list-style: none;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    background-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 350ms var(--yumusak);
}

.detay__dugme::-webkit-details-marker {
  display: none;
}

.detay__dugme:hover {
  background: rgb(255 255 255 / 0.09);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.5), 0 0 28px -10px rgb(255 61 154 / 0.6);
}

.detay__dugme:active {
  transform: scale(0.97);
}

.detay__dugme:focus-visible {
  outline: 2px solid var(--pembe-acik);
  outline-offset: 3px;
}

.detay__ok {
  width: 18px;
  height: 18px;
  flex: none;
  transition: transform 0.4s var(--yumusak);
}

.detay[open] > .detay__dugme .detay__ok {
  transform: rotate(180deg);
}

.detay__kapat,
.detay[open] > .detay__dugme .detay__ac {
  display: none;
}

.detay[open] > .detay__dugme .detay__kapat {
  display: inline;
}

.detay[open] > .detay__dugme {
  background: rgb(255 61 154 / 0.08);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.42);
}

.detay__icerik {
  margin-top: 22px;
  text-align: left;
}

.detay--genis,
.detay--ortala,
.detay--film {
  text-align: center;
}

.detay--orta > .detay__icerik {
  max-width: 52rem;
  margin-inline: auto;
}

.detay--film > .detay__icerik {
  margin-top: 28px;
}

.modul-kart .detay {
  margin-top: 4px;
}

.modul-kart .detay__dugme {
  min-height: 40px;
  padding: 8px 12px 8px 16px;
  font-size: 0.875rem;
}

.modul-kart .detay__icerik {
  margin-top: 14px;
}

.modul-kart .kazanim {
  margin-top: 14px;
}

@media (prefers-reduced-motion: no-preference) {
  .detay:not(.detay--film)[open] > .detay__icerik > :not(:has([data-goster])):not(.kazanim):not(.adimlar-liste),
  .detay[open] .kazanim > div,
  .detay[open] .adimlar-liste > li,
  .sss__oge[open] > .sss__yanit,
  .sss__tum.acik > .sss__oge {
    animation: detay-ac 420ms var(--yumusak) both;
  }

  .detay[open] :is(.kazanim > div, .adimlar-liste > li):nth-child(2),
  .sss__tum.acik > .sss__oge:nth-child(2) {
    animation-delay: 45ms;
  }

  .detay[open] :is(.kazanim > div, .adimlar-liste > li):nth-child(n + 3),
  .sss__tum.acik > .sss__oge:nth-child(n + 3) {
    animation-delay: 90ms;
  }

  .sss__tum.acik > .sss__oge:focus-within {
    animation: none;
  }
}

@keyframes detay-ac {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* Karşılama satırı: başlığın üstünde, canlı nokta ile */
.hero__karsilama {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-size: clamp(0.9375rem, 1.3vw, 1.0625rem);
  font-weight: 600;
  letter-spacing: 0.005em;
  color: var(--pembe-acik);
}

.hero__karsilama::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--gunbatimi);
  box-shadow: 0 0 12px rgb(255 61 154 / 0.9);
}

@media (prefers-reduced-motion: no-preference) {
  .hero__karsilama::before {
    animation: karsilama-nabiz 2.4s ease-in-out infinite;
    animation-play-state: paused;
  }

  .hero.hareket-aktif .hero__karsilama::before {
    animation-play-state: running;
  }
}

@keyframes karsilama-nabiz {
  50% {
    opacity: 0.45;
    transform: scale(0.7);
  }
}

.hero__guven {
  margin-top: -4px;
  font-size: 0.8125rem;
  color: var(--metin-3);
}

/* Ücretsiz panel: ilk kez deneyenler için güvence çipleri */
.guven-cipleri {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.guven-cipleri li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px 7px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
  font-weight: 500;
  color: rgb(245 245 247 / 0.88);
}

.guven-cipleri .ri {
  width: 18px;
  height: 18px;
  flex: none;
}

/* Nasıl işler: dikey zaman çizgisi */
.adimlar-liste {
  display: grid;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.adimlar-liste li {
  position: relative;
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 14px;
}

.adimlar-liste li:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 34px;
  bottom: -14px;
  left: 13.5px;
  width: 1px;
  background: linear-gradient(180deg, rgb(255 159 207 / 0.5), rgb(255 255 255 / 0.08));
}

.adimlar-liste .adim__no {
  position: static;
}

.adimlar-liste h3 {
  font-size: 1rem;
  line-height: 1.35;
}

.adimlar-liste p {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

/* Açılır içerikteki ara başlıklar */
.ornekler__baslik {
  margin-top: 36px;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.25;
}

.detay__icerik > .ornekler__baslik:first-child {
  margin-top: 0;
}

.ornekler__metin {
  max-width: 46rem;
  margin: 8px 0 18px;
  color: var(--metin-2);
}

.ornekler__baslik + .bilgi-izgara {
  margin-top: 18px;
}

/* Süper zekâ kavramı */
.topluluk .bolum__bas {
  margin-bottom: 0;
}

.kavram__metin {
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  color: rgb(245 245 247 / 0.86);
}

.kavram__soru {
  margin-top: 20px;
  padding: 18px 20px;
  border-radius: var(--r-kart);
  background: rgb(255 61 154 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.24);
}

.kavram__soru h3 {
  font-size: 1.0625rem;
  line-height: 1.35;
}

.kavram__soru p {
  margin-top: 8px;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

.topluluk__alt {
  max-width: 46rem;
  margin: clamp(56px, 8vw, 88px) auto clamp(28px, 4vw, 40px);
  text-align: center;
}

.topluluk__alt h3 {
  font-size: clamp(1.5rem, 2.8vw, 2.125rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.topluluk__alt p {
  margin-top: 12px;
  color: var(--metin-2);
}

/* SSS: ilk sorular görünür, kalanı "Tüm soruları gör" ile açılır (JS yoksa hepsi açık) */
.sss__tum {
  margin-top: 10px;
}

.js .sss__tum:not(.acik) {
  display: none;
}

.sss__daha {
  display: flex;
  margin: 26px auto 0;
}

html:not(.js) .sss__daha {
  display: none;
}

.sss__daha-kapat,
.sss__daha[aria-expanded="true"] .sss__daha-ac {
  display: none;
}

.sss__daha[aria-expanded="true"] .sss__daha-kapat {
  display: inline;
}

/* ---------------------------------------------------------------- Etkileşim cilası (yalnız ana içerik) */
main .btn {
  max-width: 100%;
  white-space: normal;
  text-align: center;
  line-height: 1.3;
  padding-block: 12px;
  transition:
    background-color var(--gecis),
    box-shadow var(--gecis),
    filter var(--gecis),
    transform 480ms cubic-bezier(0.22, 1.35, 0.36, 1);
}

main .btn:active,
.detay__dugme:active {
  transform: scale(0.97);
  transition-duration: 90ms;
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  main .btn:hover:not(:active) {
    transform: translateY(-2px);
  }

  .hero__ikonlar {
    transition: transform 180ms var(--yumusak);
  }

  main .btn--prizma:focus-visible .prizma__isik {
    opacity: 0.75;
  }
}

/* Tercih sayfa açıkken değişse de gecikme ve hover ölçeği kalmaz. */
@media (prefers-reduced-motion: reduce) {
  main .btn,
  main .btn::before,
  main .btn::after,
  main [data-goster],
  main [data-goster] img,
  .hero__ikonlar,
  .hero__karsilama::before,
  .davet__ic,
  .yay .karo,
  .yay .karo .ri,
  .yay .karo > img,
  .detay__dugme,
  .detay__ok,
  .detay__icerik *,
  .sss__oge,
  .sss__yanit,
  .sss__isaret::after,
  .hedef__sonuc * {
    animation: none !important;
    transition: none !important;
  }

  main .btn,
  .detay__dugme,
  .hero__ikonlar,
  main [data-goster],
  main [data-goster] img {
    transform: none !important;
  }
}

/* AI + Sen = SI: süper zekâ yaklaşımı tek bakışta (yapay zekâyı küçümsemeden, insanı öne koyar) */
.hero__formul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
}

.hero__formul-oge {
  position: relative;
  display: inline-grid;
  place-items: center;
  min-width: 46px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--metin);
}

.hero__formul-isaret {
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--metin-2);
}

.hero__formul-si {
  background: var(--gunbatimi);
  color: #1a0820;
  box-shadow: 0 8px 26px -10px rgb(255 61 154 / 0.9);
}

.hero__formul-si::after {
  content: "";
  position: absolute;
  inset: -5px;
  border-radius: inherit;
  box-shadow: 0 0 22px 2px rgb(255 61 154 / 0.65);
  opacity: 0.35;
  pointer-events: none;
}

.hero__formul-not {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero__formul-si::after {
    animation: si-nabiz 2.8s ease-in-out infinite;
  }

  html.js .hero:not(.hareket-aktif) .hero__formul-si::after {
    animation-play-state: paused;
  }
}

@keyframes si-nabiz {
  50% {
    opacity: 0.9;
    transform: scale(1.06);
  }
}

.hero__program {
  margin-top: 18px;
  font-size: 0.9375rem;
}

/* Son çağrı: yay güneş doğar gibi yükselip açılır, ardından eğitmen kartı aşağıdan gelir (bir kez, IO + CSS geçişi) */
@media (prefers-reduced-motion: no-preference) {
  html.hareket-hazir .son__kubbe {
    transition:
      opacity 1.4s var(--yumusak) 0.1s,
      translate 1.7s var(--yumusak) 0.1s,
      scale 1.7s var(--yumusak) 0.1s;
  }

  html.hareket-hazir .son__ufuk:not(.gorundu) .son__kubbe {
    opacity: 0;
    translate: 0 48px;
    scale: 0.93;
  }

  html.hareket-hazir .egitmen-cta {
    transition:
      opacity 0.9s var(--yumusak) calc(var(--gecikme, 0ms) + 0.3s),
      translate 1.1s var(--yumusak) calc(var(--gecikme, 0ms) + 0.3s),
      scale 1.1s var(--yumusak) calc(var(--gecikme, 0ms) + 0.3s);
  }

  html.hareket-hazir .egitmen-cta:not(.gorundu):not(:focus-within) {
    opacity: 0;
    translate: 0 64px;
    scale: 0.95;
  }
}

/* ==================================================================
   Eğitim ayrıntı sayfaları (/egitim/<slug>/) — BEMACCI hizmet sayfası düzeni, gün batımı paleti.
   Her sayfa kendi eğitim rengini taşır (--eg-renk). Hareketler transform/opacity, IO ile bir kez.
   ================================================================== */
.eg {
  --eg-renk: #ff3d9a;
}

.eg-giris {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ust-y) + 28px) 0 clamp(56px, 8vw, 96px);
}

.eg-giris__isik {
  position: absolute;
  inset: -20% -10% auto 20%;
  height: 90%;
  background:
    radial-gradient(40% 50% at 70% 40%, color-mix(in srgb, var(--eg-renk) 34%, transparent), transparent 70%),
    radial-gradient(36% 40% at 30% 10%, rgb(255 138 61 / 0.18), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.eg-izler {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: clamp(20px, 3vw, 32px);
  font-size: 0.8125rem;
  color: var(--metin-3);
}

.eg-izler a {
  color: var(--metin-2);
  text-decoration: none;
}

.eg-izler a:hover {
  color: var(--metin);
}

.eg-giris__ic {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}

@media (min-width: 980px) {
  .eg-giris__ic {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  }
}

.eg-ust {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.eg-ust__ikon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%), #140b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0 26px -10px var(--eg-renk);
}

.eg-ust__ikon .ri {
  width: 22px;
  height: 22px;
}

.eg-giris h1 {
  font-size: clamp(2.25rem, 5.2vw, 4rem);
  line-height: 1.04;
  letter-spacing: -0.04em;
  text-wrap: balance;
}

/* Neon cümle kendi satırında başlar: telefonda "var? ChatGPT’yle" gibi cümle ortasından kırılmasın */
.eg-neon {
  display: block;
  background: linear-gradient(90deg, #ff3d9a 0%, #ff8a3d 12%, #ffc15e 25%, #fff0c9 33%, #ffc15e 41%, #ff8a3d 50%, #ff3d9a 58%, #ff8a3d 70%, #ffc15e 83%, #ff3d9a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 12px rgb(255 61 154 / 0.5)) drop-shadow(0 0 28px rgb(255 138 61 / 0.32));
}

.eg-giris__aciklama {
  max-width: 36rem;
  margin-top: 20px;
  font-size: clamp(1rem, 1.4vw, 1.1875rem);
  color: var(--metin-2);
}

.eg-eylem {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 22px;
  margin-top: 28px;
}

.eg-not {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--metin-3);
}

.eg-bilgiler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.eg-bilgiler li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
  font-size: 0.8125rem;
  font-weight: 500;
}

.eg-bilgiler .ikon,
.eg-ciktilar .ikon,
.eg-donusum__kazanc .ikon,
.eg-ornek-sonuc .ikon {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  stroke-width: 2.6;
  flex: none;
}

.eg-giris__gorsel {
  position: relative;
  margin: 0;
}

.eg-giris__cerceve {
  overflow: hidden;
  border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 40px 90px -40px color-mix(in srgb, var(--eg-renk) 70%, transparent);
}

.eg-giris__cerceve img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.eg-giris__rozet {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: 16px;
  background: rgb(18 10 28 / 0.62);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18), 0 18px 40px -18px rgb(0 0 0 / 0.8);
}

.eg-giris__rozet--ikon {
  top: -18px;
  right: 22px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
}

.eg-giris__rozet--ikon .ri {
  width: 30px;
  height: 30px;
}

.eg-giris__rozet--formul {
  left: -14px;
  bottom: 22px;
  padding: 8px 12px;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--metin-2);
}

.eg-giris__rozet--formul span {
  padding: 3px 9px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--metin);
}

.eg-si {
  background: var(--gunbatimi) !important;
  color: #1a0820 !important;
  box-shadow: 0 0 18px -2px rgb(255 61 154 / 0.7);
}

@media (max-width: 559.98px) {
  .eg-giris__rozet--formul {
    left: 10px;
    bottom: 10px;
  }

  .eg-giris__rozet--ikon {
    right: 12px;
  }
}

/* Bölüm düzeni */
.eg-bolum {
  position: relative;
  padding-block: clamp(56px, 8vw, 104px);
}

.eg-bas {
  max-width: 44rem;
  margin-bottom: clamp(26px, 4vw, 44px);
}

.eg-bas h2,
.eg-proje h2,
.eg-eren h2,
.eg-diger-bolum h2,
#sss.eg-bolum h2 {
  font-size: clamp(1.875rem, 3.8vw, 3rem);
  line-height: 1.08;
  letter-spacing: -0.035em;
}

/* Tanıdık mı? */
.eg-dertler {
  display: grid;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .eg-dertler {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.eg-dert {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 22px;
  border-radius: var(--r-kart);
}

.eg-dert__ikon,
.eg-adim__ikon,
.eg-yaklasim__ikon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex: none;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%), #140b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 10px 26px -12px var(--renk, var(--eg-renk)), 0 0 34px -14px var(--renk, var(--eg-renk));
}

.eg-dert__ikon .ri,
.eg-adim__ikon .ri,
.eg-yaklasim__ikon .ri {
  width: 26px;
  height: 26px;
}

.eg-dert p {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.4;
}

.eg-empati {
  position: relative;
  max-width: 46rem;
  margin: clamp(32px, 5vw, 52px) auto 0;
  padding: 26px 28px 26px 34px;
  border-radius: var(--r-panel);
  background: linear-gradient(120deg, rgb(255 61 154 / 0.12), rgb(255 138 61 / 0.06) 60%, transparent);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.26);
  font-size: clamp(1.1875rem, 2.1vw, 1.5rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.015em;
}

.eg-empati::before {
  content: "";
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 16px;
  width: 3px;
  border-radius: 3px;
  background: var(--gunbatimi);
}

/* Bugün → eğitimden sonra (Eren 25.10: "fevkalade olmalı"): her satır bir dönüşüm, sonuçta kazanç etiketi.
   Altında gerçek Skool derslerinden "eğitimin sonunda elinde olacaklar". */
.eg-donusum {
  display: grid;
  gap: 14px;
  max-width: 64rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-donusum__satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.15fr);
  align-items: stretch;
  gap: 14px;
}

.eg-donusum__bugun,
.eg-donusum__sonra {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border-radius: var(--r-kart);
}

.eg-donusum__bugun {
  background: rgb(255 255 255 / 0.025);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.eg-donusum__sonra {
  border: 1px solid transparent;
  background:
    radial-gradient(120% 120% at 0% 0%, rgb(255 61 154 / 0.14), transparent 60%),
    linear-gradient(#0d0912, #0d0912) padding-box,
    linear-gradient(120deg, rgb(255 95 174 / 0.65), rgb(255 184 79 / 0.4) 60%, rgb(255 255 255 / 0.08)) border-box;
  box-shadow: 0 24px 50px -36px rgb(255 61 154 / 0.6);
}

.eg-donusum__etiket {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(161 161 170 / 0.85);
}

.eg-donusum__sonra .eg-donusum__etiket {
  color: var(--pembe-acik);
}

.eg-donusum p {
  margin: 0;
  text-wrap: pretty;
}

.eg-donusum__bugun p {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--metin-2);
}

.eg-donusum__sonra p {
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--metin);
}

.eg-donusum__kazanc {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 7px;
  margin-top: 4px;
  padding: 5px 11px 5px 6px;
  border-radius: 999px;
  background: rgb(255 61 154 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.3);
  font-size: 0.8125rem;
  font-weight: 600;
  color: #ffd7ea;
}

.eg-donusum__ok {
  display: grid;
  place-items: center;
  align-self: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #120c16;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.eg-donusum__ok svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #ff9fcf;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Telefonda alt alta: bugün → ok → eğitimden sonra */
@media (max-width: 759px) {
  .eg-donusum {
    gap: 18px;
  }

  .eg-donusum__satir {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .eg-donusum__bugun {
    padding-bottom: 26px;
  }

  .eg-donusum__ok {
    position: relative;
    z-index: 1;
    justify-self: center;
    margin: -18px 0;
    transform: rotate(90deg);
  }

  .eg-donusum__sonra {
    padding-top: 24px;
  }
}

.eg-elinde {
  max-width: 64rem;
  margin-top: 40px;
  padding: clamp(18px, 3vw, 28px);
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.05), rgb(255 255 255 / 0.015));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.eg-elinde__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 16px;
  margin-bottom: 18px;
}

.eg-elinde__baslik {
  margin: 0;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.eg-elinde__kapsam {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.eg-elinde__liste {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (max-width: 599px) {
  .eg-elinde__liste {
    grid-template-columns: minmax(0, 1fr);
  }
}

.eg-elinde__liste li {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 18px 18px 16px;
  border-radius: var(--r-kart);
  background: rgb(0 0 0 / 0.35);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.08);
}

.eg-elinde__no {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--altin);
}

.eg-elinde__liste h4 {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 600;
  text-wrap: balance;
}

.eg-elinde__liste p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--metin-2);
  text-wrap: pretty;
}

.eg-elinde__ders {
  margin-top: auto;
  padding-top: 6px;
  font-size: 0.75rem;
  color: rgb(245 245 247 / 0.45);
}

/* Canlı örnek: yazılan istek + beliren yanıt */
.eg-sohbet {
  position: relative;
  max-width: 54rem;
  padding: 18px;
  border-radius: var(--r-panel);
  background: linear-gradient(180deg, rgb(255 255 255 / 0.06), rgb(255 255 255 / 0.02));
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 40px 90px -50px color-mix(in srgb, var(--eg-renk) 60%, transparent);
}

.eg-sohbet__bas {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
}

.eg-sohbet__bas span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.18);
}

.eg-sohbet__bas b {
  overflow: hidden;
  max-width: 70%;
  margin-left: auto;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--metin-2);
}

.eg-mesaj {
  display: grid;
  gap: 8px;
  padding: 16px 18px;
  border-radius: 18px;
}

.eg-mesaj + .eg-mesaj {
  margin-top: 12px;
}

.eg-mesaj__kim {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--metin-3);
}

.eg-mesaj__yz-ikon .ri {
  width: 18px;
  height: 18px;
}

.eg-mesaj--sen {
  margin-left: auto;
  max-width: 44rem;
  background: rgb(255 255 255 / 0.07);
}

.eg-mesaj--yz {
  background: linear-gradient(120deg, rgb(255 61 154 / 0.1), rgb(123 47 247 / 0.08));
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.2);
}

.eg-mesaj__metin {
  font-size: 1.0625rem;
  line-height: 1.5;
}

.eg-imlec {
  display: none;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--pembe-acik);
}

.eg-sohbet.yaziyor .eg-imlec {
  display: inline-block;
  animation: imlec-yanip 0.9s steps(2) infinite;
}

@keyframes imlec-yanip {
  50% {
    opacity: 0;
  }
}

.eg-yanit {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1rem;
  line-height: 1.5;
}

/* Yanıt satırları istek yazılınca sırayla belirir (JS yoksa ya da hareket azaltıldıysa hep görünür) */
.eg-sohbet.hazir [data-satir] {
  opacity: 0;
  transform: translateY(8px);
}

.eg-sohbet.yanitliyor [data-satir] {
  opacity: 1;
  transform: none;
  transition:
    opacity 0.5s var(--yumusak) calc(var(--i) * 380ms),
    transform 0.6s var(--yumusak) calc(var(--i) * 380ms);
}

.eg-kareler {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.eg-kareler__k {
  aspect-ratio: 4 / 5;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
}

.eg-kareler__k--1 { background: linear-gradient(180deg, #2a0a4f 0%, #d4268f 55%, #ffb347 78%, #1a0b2e 79%, #0d0418 100%); }
.eg-kareler__k--2 { background: linear-gradient(180deg, #7a1580 0%, #ff6f6a 50%, #fff4e2 70%, #2a1838 71%, #0d0418 100%); }
.eg-kareler__k--3 { background: linear-gradient(180deg, #0d0418 0%, #7a1580 40%, #ff3d9a 64%, #3b1940 65%, #140b1f 100%); }
.eg-kareler__k--4 { background: linear-gradient(180deg, #2a0a4f 0%, #ff8a3d 62%, #ffc15e 74%, #2b1a3a 75%, #0b0712 100%); }

/* Codex fotoğrafı varsa renk geçişinin yerine (görsel ve video örneği) */
.eg-kareler__k--foto,
.eg-sahne__kare--foto {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.eg-akis {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: akis;
}

.eg-akis li {
  position: relative;
  display: grid;
  gap: 2px;
  padding: 12px 14px 12px 46px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}

.eg-akis li::before {
  counter-increment: akis;
  content: counter(akis);
  position: absolute;
  top: 12px;
  left: 12px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  font-size: 0.75rem;
  font-weight: 700;
}

.eg-akis li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 23px;
  bottom: -11px;
  width: 2px;
  height: 10px;
  background: rgb(255 159 207 / 0.5);
}

.eg-akis__kim {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pembe-acik);
}

.eg-diyalog {
  display: grid;
  gap: 8px;
}

.eg-balon {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 16px 16px 16px 4px;
  background: rgb(255 255 255 / 0.06);
}

.eg-balon b {
  display: block;
  margin-bottom: 2px;
  font-size: 0.75rem;
  color: var(--metin-3);
}

.eg-balon--yz {
  justify-self: end;
  border-radius: 16px 16px 4px;
  background: linear-gradient(120deg, rgb(255 61 154 / 0.16), rgb(255 138 61 / 0.1));
}

.eg-sahneler {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .eg-sahneler {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  /* 4 sahne: 2×2 (son sahne tek başına alt satırda kalmasın) */
  .eg-sahneler:has(> li:nth-child(4)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.eg-sahneler li {
  display: grid;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.05);
}

.eg-sahne__kare {
  aspect-ratio: 16 / 9;
  border-radius: 10px;
  background: linear-gradient(135deg, #2a0a4f, #d4268f 60%, #ffb347);
}

.eg-sahneler li:nth-child(2) .eg-sahne__kare { background: linear-gradient(135deg, #3b1940, #ff6f6a 55%, #ffc15e); }
.eg-sahneler li:nth-child(3) .eg-sahne__kare { background: linear-gradient(135deg, #140b1f, #7a1580 50%, #ff8a3d); }
.eg-sahneler li:nth-child(4) .eg-sahne__kare { background: linear-gradient(135deg, #2b0d3a, #ff3d9a 45%, #ffd27a); }

.eg-sahneler p {
  font-size: 0.9375rem;
}

.eg-tekrar {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  color: var(--metin);
  font: 600 0.875rem/1 var(--sans);
  cursor: pointer;
}

.eg-tekrar .ikon {
  width: 16px;
  height: 16px;
  transform: rotate(180deg) scaleY(-1);
}

.eg-ornek-sonuc {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 54rem;
  margin: 16px 0 0;
  padding: 14px 16px;
  border-radius: var(--r-kart);
  background: linear-gradient(120deg, rgb(255 61 154 / 0.1), rgb(255 138 61 / 0.05));
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.28);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--metin-2);
}

.eg-ornek-sonuc .ikon {
  flex: none;
  margin-top: 1px;
}

.eg-ornek-sonuc b {
  font-weight: 600;
  color: var(--metin);
}

.eg-ornek-not {
  margin-top: 12px;
  font-size: 0.8125rem;
  color: var(--metin-3);
}

/* Öğrenme yolu: adımlar göründükçe sırayla yanar */
.eg-adimlar {
  position: relative;
  display: grid;
  gap: 16px;
  max-width: 52rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-adimlar::before {
  content: "";
  position: absolute;
  top: 18px;
  bottom: 18px;
  left: 17px;
  width: 2px;
  background: linear-gradient(180deg, rgb(255 159 207 / 0.6), rgb(255 255 255 / 0.06));
}

.eg-adim {
  position: relative;
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.eg-adim__no {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #1a0b2e;
  box-shadow: inset 0 0 0 1.5px rgb(255 159 207 / 0.5);
  font-weight: 700;
  transition: background-color 0.5s ease, color 0.5s ease, box-shadow 0.5s ease;
}

.eg-adim.gorundu .eg-adim__no {
  background: #ff6f6a;
  color: #1a0820;
  box-shadow: 0 0 0 6px rgb(255 61 154 / 0.16), 0 0 24px rgb(255 61 154 / 0.6);
}

.eg-adim__kart {
  display: flex;
  gap: 16px;
  padding: 18px 20px;
  border-radius: var(--r-kart);
}

.eg-adim__kart h3 {
  font-size: 1.125rem;
  line-height: 1.3;
}

.eg-adim__kart p {
  margin-top: 6px;
  color: var(--metin-2);
}

/* Proje */
.eg-proje {
  display: grid;
  overflow: hidden;
  border-radius: var(--r-panel);
}

.eg-proje__gorsel img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.eg-proje__metin {
  display: grid;
  gap: 14px;
  align-content: center;
  padding: clamp(24px, 4vw, 48px);
}

.eg-proje__metin > p:not([class]) {
  color: var(--metin-2);
}

.eg-ciktilar {
  display: grid;
  gap: 10px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.eg-ciktilar li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
}

@media (min-width: 900px) {
  .eg-proje {
    grid-template-columns: 0.9fr 1.1fr;
  }

  .eg-proje__gorsel img {
    aspect-ratio: auto;
  }
}

/* Kim nasıl kullanır: sekmeler */
.eg-sekmeler__liste {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.eg-sekmeler__liste [role="tab"] {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 16px 0 10px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--metin-2);
  font: 600 0.9375rem/1 var(--sans);
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}

.eg-sekmeler__liste [role="tab"][aria-selected="true"] {
  background: rgb(255 61 154 / 0.14);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.55), 0 0 24px -10px rgb(255 61 154 / 0.8);
  color: var(--metin);
}

.eg-sekme__ikon .ri {
  width: 22px;
  height: 22px;
}

.eg-panel {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .eg-panel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.eg-panel li {
  display: grid;
  gap: 10px;
  padding: 20px;
  border-radius: var(--r-kart);
  font-size: 1.0625rem;
  font-weight: 500;
}

.eg-panel__no {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--pembe-acik);
}

@media (prefers-reduced-motion: no-preference) {
  .eg-panel-kap:not([hidden]) .eg-panel li {
    animation: detay-ac 0.5s var(--yumusak) both;
    animation-delay: calc(var(--i) * 70ms);
  }
}

/* Eren */
.eg-eren {
  display: grid;
  gap: clamp(24px, 4vw, 48px);
  align-items: center;
}

.eg-eren__gorsel {
  overflow: hidden;
  border-radius: var(--r-panel);
}

.eg-eren__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.eg-yaklasim {
  display: grid;
  gap: 16px;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
}

.eg-yaklasim li {
  display: flex;
  gap: 14px;
}

.eg-yaklasim h3 {
  font-size: 1.0625rem;
}

.eg-yaklasim p {
  margin-top: 4px;
  color: var(--metin-2);
}

.eg-formul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 700;
}

.eg-formul span {
  padding: 6px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.07);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.eg-formul i {
  font-style: normal;
  color: var(--metin-2);
}

.eg-formul em {
  font-size: 0.8125rem;
  font-style: normal;
  color: var(--pembe-acik);
}

@media (min-width: 900px) {
  .eg-eren {
    grid-template-columns: 1fr 1fr;
  }
}

/* Kapanış */
.eg-kapanis {
  position: relative;
  overflow: hidden;
  padding-block: clamp(72px, 10vw, 128px);
  text-align: center;
}

.eg-kapanis__isik {
  position: absolute;
  inset: 10% 10% -30%;
  background: radial-gradient(50% 50% at 50% 60%, rgb(255 61 154 / 0.22), rgb(255 138 61 / 0.08) 50%, transparent 72%);
  filter: blur(10px);
  pointer-events: none;
}

.eg-kapanis__ic {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.eg-kapanis h2 {
  max-width: 22ch;
  font-size: clamp(2rem, 4.4vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.04em;
}

.eg-kapanis p:not(.eg-not) {
  max-width: 38rem;
  color: var(--metin-2);
}

/* Diğer eğitimler */
.eg-diger {
  display: grid;
  gap: 14px;
  margin: clamp(22px, 3vw, 32px) 0 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .eg-diger {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.eg-diger__kart {
  overflow: hidden;
  border-radius: var(--r-kart);
}

.eg-diger__kart a {
  display: grid;
  color: inherit;
  text-decoration: none;
}

.eg-diger__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  transition: transform 0.7s var(--yumusak);
}

.eg-diger__metin {
  position: relative;
  display: grid;
  gap: 4px;
  padding: 16px 48px 18px 18px;
}

.eg-diger__etiket {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--pembe-acik);
}

.eg-diger__ad {
  font-size: 1.125rem;
  font-weight: 650;
}

.eg-diger__metin .ikon {
  position: absolute;
  top: 50%;
  right: 18px;
  width: 20px;
  height: 20px;
  transform: translateY(-50%);
  transition: transform 0.3s var(--yumusak);
}

@media (hover: hover) {
  .eg-diger__kart a:hover img {
    transform: scale(1.04);
  }

  .eg-diger__kart a:hover .ikon {
    transform: translate(4px, -50%);
  }
}

.eg-tum {
  margin-top: 22px;
}

/* Ana sayfa kartı → eğitim sayfası (kartın tamamı tıklanır) */
.modul-kart__git {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  min-height: 40px;
  margin-top: 4px;
  padding: 8px 14px 8px 16px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: var(--metin);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}

.modul-kart__baglanti {
  color: inherit;
  text-decoration: none;
}

.modul-kart__baglanti::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.modul-kart__baglanti:focus-visible {
  outline: none;
}

.modul-kart__baglanti:focus-visible::after {
  outline: 2px solid var(--pembe-acik);
  outline-offset: -2px;
}

.modul-kart__git .ikon {
  width: 16px;
  height: 16px;
  transition: transform 0.3s var(--yumusak);
}

@media (hover: hover) {
  .modul-kart:hover .modul-kart__git {
    background: rgb(255 61 154 / 0.1);
    box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.5);
  }

  .modul-kart:hover .modul-kart__git .ikon {
    transform: translateX(3px);
  }
}

@media (max-width: 639.98px) {
  .modul-kart:has(> .modul-kart__resim) .modul-kart__git {
    grid-column: 1 / -1;
    margin-top: 10px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .eg-neon {
    animation: neon-akis 6s linear 2;
  }
}

.eg-panel-kap[hidden]:not(.eg-sekmeler .eg-panel-kap) {
  display: none;
}

.eg-mesaj__metin {
  position: relative;
}

.eg-yazi {
  display: none;
}

.eg-sohbet.yazim .eg-yazi-yer {
  visibility: hidden;
}

.eg-sohbet.yazim .eg-yazi {
  position: absolute;
  inset: 0;
  display: block;
}

.eg-yazi::after {
  content: "";
  display: none;
  width: 2px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.15em;
  background: var(--pembe-acik);
}

.eg-sohbet.yaziyor .eg-yazi::after {
  display: inline-block;
  animation: imlec-yanip 0.9s steps(2) infinite;
}

/* ------------------------------------------------------------------
   Konumlandırma: yapay zekâ (AI) gri, süper zekâ (SI) GTA neonu — SI, AI'ın bir üst basamağı.
   Girişte "süper zekâya." neon tabela gibi titreşerek yanar, sonra renkler içinden akar.
   ------------------------------------------------------------------ */
.zeka-ai,
.hero__baslik > span.zeka-ai {
  background: linear-gradient(180deg, #dcdce4 0%, #8a8a96 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.zeka-si {
  background: linear-gradient(90deg, #ff3d9a 0%, #ff8a3d 8%, #ffc15e 16%, #fff0c9 25%, #ffc15e 34%, #ff8a3d 42%, #ff3d9a 50%, #ff8a3d 58%, #ffc15e 66%, #fff0c9 75%, #ffc15e 84%, #ff8a3d 92%, #ff3d9a 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgb(255 61 154 / 0.6)) drop-shadow(0 0 34px rgb(255 138 61 / 0.38));
}

.hero__baslik > .zeka-si-satir {
  padding-bottom: 0.12em;
}

.hero__formul-ai,
.eg-ai {
  color: var(--metin-3) !important;
  background: rgb(255 255 255 / 0.04) !important;
}

@media (prefers-reduced-motion: no-preference) {
  html.js .zeka-si {
    animation: neon-akis 6s linear 2;
  }

  html.js .hero .zeka-si {
    animation:
      neon-yan 1.3s linear 1.15s both,
      neon-akis 6s linear 2.45s 2;
  }

  html.js .ucretsiz:not(.hareket-aktif) .zeka-si,
  html.js .eg-giris:not(.hareket-aktif) .eg-neon {
    animation-play-state: paused;
  }

  /* Başlıktaki "süper zekâya.": ışıklanma (neon-yan) her durumda oynar, yalnız akış döngüsü durur. Yoksa giriş
     görünür sayılmadan (gizli sekme, betik gecikmesi) yazı saydam ilk karede donup görünmez kalıyordu. */
  html.js .hero:not(.hareket-aktif) .zeka-si {
    animation-play-state: running, paused;
  }
}

@keyframes neon-yan {
  0%,
  10% {
    opacity: 0;
  }

  11%,
  17% {
    opacity: 0.6;
  }

  18%,
  27% {
    opacity: 0.08;
  }

  28%,
  35% {
    opacity: 0.92;
  }

  36%,
  44% {
    opacity: 0.32;
  }

  45%,
  100% {
    opacity: 1;
  }
}

/* Açıldığı yoldan kapanır (site.js → kapaniyor) */

@keyframes pencere-ac {
  from {
    opacity: 0;
    transform: scale(0.96);
  }
}

@keyframes pencere-kapan {
  to {
    opacity: 0;
    transform: scale(0.97);
  }
}

@keyframes perde-ac {
  from {
    opacity: 0;
  }
}

@keyframes perde-kapan {
  to {
    opacity: 0;
  }
}

/* Pencere açıkken arkadaki sayfa kaymaz */

/* Taslak görünümünde sol alttaki düzenleme düğmesinin üstünde durur */

/* Küçük oynat rozeti: yüzü kapatmaz */

/* Gizle rozeti halkanın sağ üst köşesinde; dokunma alanı görünenden geniş */

@keyframes balon-don {
  to {
    transform: rotate(360deg);
  }
}

/* Topluluk: seviye sistemi */
.seviye {
  display: grid;
  gap: 22px;
  margin-top: clamp(56px, 10vw, 88px);
  padding: clamp(22px, 3.5vw, 36px);
  border-radius: var(--r-panel);
  text-align: left;
}

.seviye__metin h3 {
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.seviye__metin p:not(.ust-ifade) {
  margin-top: 10px;
  color: var(--metin-2);
}

.seviye__yol {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.seviye__yol li {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  column-gap: 12px;
  align-items: start;
}

.seviye__yol b {
  font-size: 1rem;
}

.seviye__yol span:not(.seviye__no) {
  grid-column: 2;
  font-size: 0.9375rem;
  color: var(--metin-2);
}

.seviye__no {
  grid-row: span 2;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  font-weight: 700;
}

.seviye__cubuk {
  position: relative;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
}

.seviye__cubuk span {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--gunbatimi);
  box-shadow: 0 0 18px rgb(255 61 154 / 0.7);
  transform: scaleX(0.72);
  transform-origin: left;
}

@media (prefers-reduced-motion: no-preference) {
  html.hareket-hazir .seviye:not(.gorundu) .seviye__cubuk span {
    transform: scaleX(0.04);
  }

  html.hareket-hazir .seviye .seviye__cubuk span {
    transition: transform 1.8s var(--yumusak) 0.4s;
  }
}

@media (min-width: 860px) {
  .seviye {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }

  .seviye__cubuk {
    grid-column: 1 / -1;
  }
}

/* Eğitim sayfası: kilit rozeti (ör. "Toplulukta 3. seviyede açılır") */
.eg-kilit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 10px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  background: rgb(255 193 94 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 193 94 / 0.4);
  font-size: 0.75rem;
  font-weight: 700;
  color: #ffd27a;
}

.eg-kilit .ri {
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------------
   Kurucu üye dönemi: ilk ücretli üyeler açılış fiyatıyla girer, fiyat üyelik sürdükçe sabit.
   İndirim gibi gösterilmez (üstü çizili fiyat yok); sonraki fiyat ileriye dönük yazılır.
   ------------------------------------------------------------------ */
.kurucu-serit {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 880px;
  margin: 0 auto 34px;
  padding: 16px 20px;
  border-color: rgb(255 159 207 / 0.32);
  border-radius: var(--r-panel);
}

.kurucu-serit__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--renk) 28%, transparent), rgb(255 255 255 / 0.04) 70%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0 26px -6px var(--renk);
}

.kurucu-serit__ikon .ri {
  width: 24px;
  height: 24px;
}

.kurucu-serit p {
  margin: 0;
  color: var(--metin-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.kurucu-serit b {
  margin-right: 4px;
  color: var(--metin);
  font-weight: 650;
}

.paket__kurucu {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  margin-top: 4px;
  padding: 5px 11px 5px 8px;
  border-radius: 999px;
  background: rgb(255 61 154 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.34);
  color: var(--pembe-acik);
  font-size: 0.8125rem;
  font-weight: 600;
}

.paket__kurucu .ri {
  width: 16px;
  height: 16px;
}

.paket__kurucu span {
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.paket__sonra {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--metin-2);
}

.son__paketler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px 14px;
  margin-top: 26px;
}

.son__paketler .son__karsilastir {
  margin-top: 0;
}

.son__kurucu {
  padding: 5px 12px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.34);
  color: var(--metin);
  font-size: 0.8125rem;
  font-weight: 500;
}

@media (max-width: 559.98px) {
  .kurucu-serit {
    align-items: flex-start;
    padding: 14px 16px;
  }

  .kurucu-serit__ikon {
    width: 40px;
    height: 40px;
  }
}

/* Üstü çizili fiyat yalnız "N üyeden sonra" etiketiyle: kontenjan dolunca uygulanacak gelecek fiyat */
.paket__sonraki {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 8px;
  margin-top: 8px;
  color: var(--metin-3);
  font-size: 0.875rem;
}

.paket__sonraki s {
  color: var(--metin-2);
  font-size: 1.125rem;
  font-weight: 600;
  text-decoration-color: var(--pembe-acik);
  text-decoration-thickness: 2px;
}

.paket__sonraki + .paket__fiyat {
  margin-top: 0;
}

.son__kurucu b {
  margin-right: 4px;
  font-weight: 650;
}

/* ------------------------------------------------------------------
   Ajan testi düzeltmeleri (2026-10-16)
   ------------------------------------------------------------------ */

/* Eğitim sayfası: H1'in ilk satırında eğitimin adı */
.eg-h1-ad {
  display: block;
  margin-bottom: 0.5em;
  font-size: clamp(0.9375rem, 0.85rem + 0.35vw, 1.125rem);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--eg-renk, var(--pembe-acik));
}

/* Eğitim sayfası: bu eğitimin üyelikte olduğu açıkça yazılır */
.eg-erisim,
.eg-kilit-not {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 34rem;
  margin-top: 10px;
  color: var(--metin-2);
  font-size: 0.875rem;
  line-height: 1.5;
}

.eg-erisim .ikon,
.eg-kilit-not .ri {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
}

.eg-erisim a {
  color: var(--pembe-acik);
  font-weight: 600;
  text-underline-offset: 3px;
}

/* Eğitim sayfası: öğrenme yolundan sonra ikinci çağrı */
.eg-ara-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 22px;
  margin-top: clamp(28px, 4vw, 44px);
}

/* Telefonda video örneğindeki sahne kareleri küçük kalır */
@media (max-width: 759.98px) {
  .eg-sahneler li {
    grid-template-columns: 72px minmax(0, 1fr);
    align-items: center;
  }
}

/* Telefonda SSS satırının sağı yan menünün altında kalmasın */
@media (max-width: 759.98px) {
  .sss__oge summary {
    padding-right: 58px;
  }
}

/* Ücretsiz bölüm: İlk 100 sinyali */
.ucretsiz__ilk100 {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  color: var(--metin-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.ucretsiz__ilk100 .ri {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.ucretsiz__ilk100 a,
a.son__kurucu {
  color: var(--pembe-acik);
  font-weight: 600;
  text-underline-offset: 3px;
}

a.son__kurucu {
  color: var(--metin);
  text-decoration: none;
  transition: box-shadow var(--gecis), background-color var(--gecis);
}

a.son__kurucu:hover {
  background: rgb(255 61 154 / 0.1);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.6);
}

/* Alt bilgi: eğitimler, künye ve notlar */
.alt__baslik {
  margin-bottom: 12px;
  color: var(--metin);
  font-weight: 600;
}

.alt__egitimler ul {
  display: grid;
  gap: 10px;
}

.alt__egitimler a {
  text-decoration: none;
  transition: color var(--gecis);
}

.alt__egitimler a:hover {
  color: var(--metin);
}

@media (min-width: 800px) {
  .alt__ic {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
}

.alt__notlar {
  display: grid;
  gap: 8px;
  margin-top: 28px;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--metin-3);
}

/* ==================================================================
   Premium dokunuşlar: sayfa geçişi, mıknatıslı düğmeler, eğilen kartlar, canlı çizilen fiyat,
   başlık altı ışık çizgisi. Hepsi transform/opacity; kaydırmaya bağlı iş yok; azaltılmış harekette kapalı.
   ================================================================== */

/* Sayfalar arası geçiş (aynı sitede): üst şerit yerinde kalır, içerik yumuşakça değişir; eğitim kartının
   görseli eğitim sayfasının giriş görseline akar (site.js → pageswap/pagereveal). */
@view-transition {
  navigation: auto;
}

/* Ad yalnız geçiş sırasında: kalıcı view-transition-name kapsülü kendi "backdrop root"u yapıyordu, Chrome'da cam
   arkasındaki sayfayı hiç bulanıklaştırmıyordu (içerik şeridin arkasından net görünüyordu). */
html:active-view-transition .ust {
  view-transition-name: ust-serit;
}

.eg-giris__cerceve {
  view-transition-name: egitim-gorsel;
}

::view-transition-group(egitim-gorsel) {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
}

::view-transition-old(egitim-gorsel),
::view-transition-new(egitim-gorsel) {
  height: 100%;
  object-fit: cover;
  overflow: clip;
}

::view-transition-old(root) {
  animation: 0.28s ease both gecis-cik;
}

::view-transition-new(root) {
  animation: 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both gecis-gir;
}

@keyframes gecis-cik {
  to {
    opacity: 0;
  }
}

@keyframes gecis-gir {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* Mıknatıslı ana düğmeler: imlece en fazla birkaç piksel yaklaşır, bırakınca yay gibi yerine oturur */
  .btn.miknatis {
    translate: var(--cx, 0px) var(--cy, 0px);
    transition:
      background-color var(--gecis),
      box-shadow var(--gecis),
      filter var(--gecis),
      transform 120ms cubic-bezier(0.2, 0.8, 0.2, 1),
      translate 0.5s cubic-bezier(0.2, 0.9, 0.3, 1.25);
  }

  /* Kartlar imlece göre hafifçe eğilir (en fazla 3–4°), üstünde cam ışığı gezer */
  .modul-kart:not(.modul-kart--davet):hover {
    transform: translateY(-4px) perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }

  .paket:hover,
  .eg-diger__kart:hover {
    transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  }

  /* Film afişindeki oynat düğmesi: üstüne gelince çevresinden yumuşak bir halka yayılır */
  
}

@keyframes oynat-halka {
  from {
    opacity: 0.9;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(1.6);
  }
}

/* İlk 100: 49 €'nun üstü kart görününce canlı çizilir, ardından 39 € yerine oturur */
.paket__sonraki s {
  position: relative;
  text-decoration: none;
}

.paket__sonraki s::after {
  content: "";
  position: absolute;
  top: 54%;
  right: -6%;
  left: -6%;
  height: 2px;
  border-radius: 2px;
  background: var(--gunbatimi);
  box-shadow: 0 0 10px rgb(255 61 154 / 0.7);
  transform: rotate(-8deg);
  transform-origin: left center;
}

@media (prefers-reduced-motion: no-preference) {
  html.hareket-hazir .paket .paket__sonraki s::after {
    transition: scale 0.65s cubic-bezier(0.6, 0, 0.2, 1) 0.45s;
  }

  html.hareket-hazir .paket:not(.gorundu) .paket__sonraki s::after {
    scale: 0 1;
  }

  html.hareket-hazir .paket .paket__tutar {
    display: inline-block;
    transition:
      opacity 0.5s ease 0.95s,
      scale 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.3) 0.95s;
  }

  html.hareket-hazir .paket:not(.gorundu) .paket__sonraki ~ .paket__fiyat .paket__tutar {
    opacity: 0.25;
    scale: 0.86;
  }
}

/* Bölüm başlıklarının altında ince ışık çizgisi: başlık görününce ortadan iki yana çizilir */
.bolum__bas::after {
  content: "";
  display: block;
  width: min(220px, 40%);
  height: 1px;
  margin: 22px auto 0;
  background: linear-gradient(90deg, transparent, rgb(255 61 154 / 0.9), rgb(255 179 71 / 0.9), transparent);
  box-shadow: 0 0 12px rgb(255 61 154 / 0.55);
}

@media (prefers-reduced-motion: no-preference) {
  html.hareket-hazir .bolum__bas::after {
    transition: scale 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s, opacity 0.8s ease 0.3s;
  }

  html.hareket-hazir .bolum__bas:not(.gorundu)::after {
    opacity: 0;
    scale: 0 1;
  }
}

/* Mobil QA düzeltmeleri (2026-10-16) */

/* 900–1279 px: giriş açıklaması portredeki yüzün üstüne taşmasın */
@media (min-width: 900px) and (max-width: 1279.98px) {
  .hero__aciklama {
    max-width: 30rem;
  }
}

/* Dokunmatik: küçük hedefler en az ~44 px */
@media (pointer: coarse) {
  .ust .btn--kucuk {
    min-height: 44px;
  }

  .metin-baglanti,
  .eg-izler a,
  .alt__baglantilar a,
  .alt__egitimler a {
    padding-block: 10px;
    margin-block: -10px;
  }

  

  

  
}

/* 320–379 px: öğrenme adımı kartı alt alta */
@media (max-width: 379.98px) {
  .eg-adim__kart {
    flex-direction: column;
  }
}

.bildirim {
  width: max-content;
}

/* Erişilebilirlik düzeltmeleri (2026-10-16) */
.eg-h1-ad {
  color: var(--pembe-acik); /* opak: başlık parçası en az 4,5:1 */
}

/* Mor "Kimler için" bölümünde ikincil metin daha açık */
.hedef :is(.bilgi-kart p, .profil dd, .profil__etiket) {
  color: rgb(255 255 255 / 0.85);
}

.hedef .profil__etiket {
  font-size: 0.8125rem;
}

.eg-panel-kap:focus-visible {
  outline: 2px solid var(--pembe-acik);
  outline-offset: 6px;
  border-radius: var(--r-kart);
}

/* Hareketi durdur (WCAG 2.2.2) ve kaydırma sırasında (html.kayiyor) YALNIZ sürekli süs döngüleri duraklar: neon akışı,
   prizma, süzülen ikon ve karolar, nabızlar, yavaş yakınlaşma. Kaydırırken her karede yeniden çizim isteyip ekran
   kartını yoruyorlar; parmak durunca kaldıkları yerden sürerler.
   Girişte bir kez oynayan görünme animasyonları (yazi-gel, neon-yan, ikon-gel, perde, portre…) ASLA duraklamaz:
   önceki "her şey duraklasın" kuralı onları yarıda donduruyordu; kaydırırken yazı ve kartlar yarım ya da görünmez
   kalıyor, "Hareketi durdur" seçilip sayfa yenilenince girişteki yazılar hiç görünmüyordu (Berke 19.10). */
:is(html.hareket-dur, html.kayiyor) :where(.neon, .eg-neon, .zeka-si, .hero__neon, .hero__ikon .ri, .hero__ikon .arac-logo, .cip__bacaklar rect, .cip__nabiz, .davet__ic, .karo .ri, .karo > img, .eren-kart__gorsel img, .eg-imlec),
:is(html.hareket-dur, html.kayiyor) .hero__ikon::after,
:is(html.hareket-dur, html.kayiyor) .prizma__isik,
:is(html.hareket-dur, html.kayiyor) .prizma__kenar,
:is(html.hareket-dur, html.kayiyor) .bm-made__logo::after,
:is(html.hareket-dur, html.kayiyor) .hero__karsilama::before,
:is(html.hareket-dur, html.kayiyor) .hero__formul-si::after,
:is(html.hareket-dur, html.kayiyor) .eg-sohbet.yaziyor .eg-yazi::after {
  animation-play-state: paused !important;
}

/* Girişle döngüyü aynı öğede taşıyanlar: giriş sürer, yalnız döngü duraklar */
:is(html.hareket-dur, html.kayiyor) .hero__ikon,
:is(html.hareket-dur, html.kayiyor) .hero .zeka-si,
:is(html.hareket-dur, html.kayiyor) .hero__halka {
  animation-play-state: running, paused !important;
}

.hareket-anahtari {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.06);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  color: var(--metin-2);
  font: 500 0.8125rem/1 var(--sans);
  cursor: pointer;
}

.hareket-anahtari:hover {
  color: var(--metin);
}

/* Film penceresi: Türkçe döküm */

/* Dar masaüstü, yakınlaştırma (%150–250) ve yatay telefon: giriş metni koyu perdenin üstünde, yüze binmez */
@media (min-width: 640px) and (max-width: 1099.98px), (max-height: 560px) and (orientation: landscape) {
  .hero__sahne::after {
    background:
      linear-gradient(90deg, rgb(2 2 3 / 0.95) 0%, rgb(2 2 3 / 0.88) 42%, rgb(2 2 3 / 0.35) 66%, transparent 82%),
      linear-gradient(to bottom, rgb(2 2 3) 0, rgb(2 2 3) 34px, rgb(2 2 3 / 0.55) 90px, transparent 20%, transparent 70%, var(--zemin) 100%);
  }

  .hero__aciklama,
  .hero__guven,
  .hero__not {
    max-width: min(30rem, 56vw);
  }
}

/* Kısa yatay ekranda süzülen ikonlar başlığın üstüne binmesin */
@media (max-height: 560px) and (orientation: landscape) {
  .hero__ikonlar {
    display: none;
  }
}

/* Masaüstü QA düzeltmeleri (2026-10-16) */
.eg-sekmeler {
  display: grid;
}

.eg-sekmeler > .eg-panel-kap {
  grid-row: 2;
  grid-column: 1;
}

.eg-sekmeler > .eg-panel-kap[hidden] {
  display: block;
  visibility: hidden;
}

/* Klavyeyle seçilen hedef kartı üst şeridin altında kalmasın */
.hedef__kart {
  scroll-margin-top: 120px;
}

/* Önizleme bildirimi üst katmanda */
.bildirim[popover] {
  inset: auto auto 20px 50%;
  margin: 0;
  border: 0;
  color: var(--metin);
  overflow: visible;
}

/* Üzerine gelince hafif tepki */
@media (hover: hover) {
  .menu-dugme:hover {
    background: rgb(255 255 255 / 0.12);
  }

  .metin-baglanti:hover {
    color: #fff;
    text-decoration-color: var(--pembe-acik);
  }

  .sss__oge summary:hover h3 {
    color: #fff;
  }

  .sss__oge summary:hover .sss__isaret {
    box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.7);
  }

  .eg-tekrar:hover,
  .eg-sekmeler__liste [role="tab"]:hover {
    color: var(--metin);
    background-color: rgb(255 255 255 / 0.1);
  }
}

/* Telefon: büyük cam kartlarda arka plan bulanıklığı kapalı (gözle fark yok, kaydırmada GPU yükü düşer) */
@media (pointer: coarse) {
  :is(.paket, .seviye, .kurucu-serit, .eren-kart, .egitmen-cta, .serit-bar, .eg-proje, .eg-eren).cam {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ---------------------------------------------------------------- Bölgeye göre fiyat
   Her tutar üç <span class="para" data-para="TRY|EUR|USD"> olarak basılır; <html data-para> seçer.
   Seçim <head>'deki satır içi betikte, ziyaretçinin konumundan (saat dilimi) boya öncesi yapılır. */
.para {
  display: none;
}

html[data-para="TRY"] .para[data-para="TRY"],
html[data-para="EUR"] .para[data-para="EUR"],
html[data-para="USD"] .para[data-para="USD"] {
  display: inline;
}

/* ---------------------------------------------------------------- Kimler için uygun / değil */
.uygunluk {
  display: grid;
  gap: 12px;
  margin-top: clamp(28px, 4vw, 40px);
}

@media (min-width: 760px) {
  .uygunluk {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.uygunluk__sutun {
  padding: clamp(20px, 3vw, 28px);
  border-radius: var(--r-kart);
}

.uygunluk__sutun h3 {
  margin: 0 0 14px;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}

.uygunluk__sutun ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.uygunluk__sutun li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  color: var(--metin);
  font-size: 0.9875rem;
  line-height: 1.5;
}

.uygunluk__sutun li .ikon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  color: var(--altin);
}

.uygunluk__sutun--degil li {
  color: rgb(255 255 255 / 0.74);
}

.uygunluk__sutun--degil li .ikon {
  color: var(--metin-3);
}

/* ---------------------------------------------------------------- Eren Hocaoğlu tarihçe sayfası (/eren-hocaoglu/)
   BEMACCI kurucu sayfasının dergi düzeni: solda ad + kısa yazı, sağda içinde eriyen portre; altta yıl/yer
   sütunlu zaman çizelgesi. Ekranın ortasındaki durak IntersectionObserver ile ışıklanır (kaydırma dinleyicisi yok). */
.ep-giris {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ust-y) + 28px) 0 clamp(48px, 7vw, 88px);
}

.ep-giris__isik {
  position: absolute;
  inset: -10% -10% auto 30%;
  height: 90%;
  background:
    radial-gradient(40% 50% at 72% 42%, rgb(255 61 154 / 0.22), transparent 70%),
    radial-gradient(36% 40% at 40% 10%, rgb(255 138 61 / 0.16), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.ep-giris__ic {
  position: relative;
  display: grid;
  gap: clamp(28px, 4vw, 56px);
  align-items: end;
}

@media (min-width: 900px) {
  .ep-giris__ic {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  }
}

.ep-giris h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.02;
  letter-spacing: -0.045em;
}

.ep-lead {
  margin: 10px 0 0;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.ep-giris__yazi {
  max-width: 38rem;
  margin-top: 22px;
}

.ep-giris__yazi p {
  color: var(--metin-2);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.65;
}

.ep-giris__yazi p + p {
  margin-top: 12px;
}

.ep-tema {
  max-width: 36rem;
  margin-top: 22px;
  padding-left: 16px;
  border-left: 2px solid rgb(255 61 154 / 0.6);
  color: var(--metin);
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
}

.ep-portre {
  justify-self: center;
  width: min(100%, 440px);
  margin: 0;
}

.ep-portre img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--r-panel);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgb(0 0 0 / 0.45) 86%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgb(0 0 0 / 0.45) 86%, transparent 100%);
}

.ep-portre figcaption {
  margin-top: 4px;
  color: var(--metin-3);
  font: 600 0.75rem/1.5 var(--sans);
  letter-spacing: 0.12em;
  text-align: center;
  text-transform: uppercase;
}

/* Telefonda BEMACCI gibi: tam genişlik portre, ad fotoğrafın eriyen alt kısmına biner (tasarım jürisi) */
@media (max-width: 899px) {
  .ep-portre {
    order: -1;
    justify-self: stretch;
    width: auto;
    margin: 0 calc(var(--oluk) * -1);
  }

  .ep-portre img {
    aspect-ratio: 1 / 1.08;
    object-position: 50% 18%;
    border-radius: 0;
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 58%, transparent 96%);
    mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 58%, transparent 96%);
  }

  .ep-portre figcaption {
    display: none;
  }

  .ep-giris__metin {
    position: relative;
    margin-top: -96px;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html.js .ep-portre img {
    animation: ep-portre 1.3s var(--yumusak) both;
  }

  html.js .ep-giris__metin > * {
    animation: ep-yuksel 0.9s var(--yumusak) both;
  }

  html.js .ep-giris__metin > :nth-child(2) { animation-delay: 0.08s; }
  html.js .ep-giris__metin > :nth-child(3) { animation-delay: 0.18s; }
  html.js .ep-giris__metin > :nth-child(n + 4) { animation-delay: 0.3s; }
}

@keyframes ep-portre {
  from {
    opacity: 0;
    transform: scale(1.04);
  }
}

@keyframes ep-yuksel {
  from {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
  }
}

.ep-tarihce {
  padding: clamp(56px, 8vw, 104px) 0 clamp(40px, 6vw, 72px);
}

.ep-hat {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.ep-hat::before {
  content: "";
  position: absolute;
  top: 10px;
  bottom: 10px;
  left: 21.5px;
  width: 1px;
  background: linear-gradient(180deg, rgb(255 61 154 / 0.7), rgb(255 138 61 / 0.35) 60%, rgb(255 255 255 / 0.06));
}

.ep-durak {
  position: relative;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0 18px;
  padding-bottom: clamp(32px, 4vw, 44px);
  scroll-margin-top: calc(var(--ust-y) + 24px);
}

.ep-durak__zaman {
  display: flex;
  flex-wrap: wrap;
  grid-column: 2;
  grid-row: 1;
  align-items: baseline;
  gap: 4px 12px;
  margin-bottom: 8px;
  padding-top: 10px;
}

.ep-durak__yil {
  color: var(--metin);
  font-size: 1.125rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.ep-durak__yer {
  color: var(--pembe-acik);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.ep-durak__nokta {
  position: relative;
  z-index: 1;
  display: grid;
  grid-column: 1;
  grid-row: 1 / span 2;
  place-items: center;
  align-self: start;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%), #140b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16);
  transition: transform 0.45s var(--yumusak);
}

/* Işık ayrı katmanda: yalnız saydamlık değişir (ekran kartında; kaydırırken yeniden çizim yok) */
.ep-durak__nokta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.28),
    0 0 0 4px color-mix(in srgb, var(--renk) 16%, transparent),
    0 0 28px -4px var(--renk);
  opacity: 0;
  transition: opacity 0.45s ease;
  pointer-events: none;
}

.ep-durak__nokta .ri {
  width: 24px;
  height: 24px;
}

.ep-durak.is-lit .ep-durak__nokta {
  transform: scale(1.06);
}

.ep-durak.is-lit .ep-durak__nokta::after {
  opacity: 1;
}

.ep-durak.is-lit .ep-durak__yil {
  color: var(--altin);
}

.ep-durak__ne {
  grid-column: 2;
  grid-row: 2;
}

.ep-durak__ne h3 {
  margin: 0 0 10px;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem);
  letter-spacing: -0.025em;
}

.ep-durak__ne p {
  max-width: 40rem;
  color: var(--metin-2);
  line-height: 1.65;
}

.ep-durak__ne p + p {
  margin-top: 10px;
}

.ep-foto {
  max-width: 420px;
  margin: 16px 0 0;
}

.ep-foto img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-kart);
}

@media (min-width: 760px) {
  .ep-hat::before {
    left: 199.5px;
  }

  .ep-durak {
    grid-template-columns: 160px 44px minmax(0, 1fr);
  }

  .ep-durak__zaman {
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / span 2;
    align-items: flex-end;
    gap: 4px;
    margin: 0;
    text-align: right;
  }

  .ep-durak__nokta {
    grid-column: 2;
  }

  .ep-durak__ne {
    grid-column: 3;
    grid-row: 1 / span 2;
    padding-top: 8px;
  }

  /* Uzun yer (Rotterdam · İsveç · İngiltere) 160 px sütuna sığmaz: dengeli iki satır */
  .ep-durak__yer {
    text-wrap: balance;
  }
}

/* Geniş ekranda tek satır; sütun 160 px'te kalır (min-width: 0, tek flex satırı), sağa yaslı yer solundaki boşluğa taşar */
@media (min-width: 1100px) {
  .ep-durak__zaman {
    flex-wrap: nowrap;
    min-width: 0;
  }

  .ep-durak__yer {
    white-space: nowrap;
  }
}

.ep-kaynak {
  display: flex;
  gap: 10px;
  max-width: 940px;
  margin: 8px auto 0;
  color: var(--metin-3);
  font-size: 0.875rem;
  line-height: 1.55;
}

.ep-kaynak .ikon {
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: 2px;
}

.ep-kaynak a {
  color: var(--pembe-acik);
}

.ep-anlayis {
  padding: clamp(48px, 7vw, 96px) 0;
}

.ep-anlayis__liste {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 760px) {
  .ep-anlayis__liste {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.ep-ilke {
  padding: clamp(22px, 3vw, 30px);
  border-radius: var(--r-kart);
}

.ep-ilke__ikon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 14px;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), transparent 62%), #140b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.16), 0 0 26px -10px var(--renk);
}

.ep-ilke__ikon .ri {
  width: 26px;
  height: 26px;
}

.ep-ilke h3 {
  margin: 0 0 8px;
  font-size: 1.1875rem;
  letter-spacing: -0.02em;
}

.ep-ilke p {
  color: var(--metin-2);
  line-height: 1.6;
}

.eren-kart__hikaye {
  margin-top: 14px;
}

/* Uzun TL tutarlarında (24.990 TL) çizgi rakamın üstünde kalsın */
html[data-para="TRY"] .paket__sonraki s::after {
  transform: rotate(-3deg);
}

.ep-durak__kaynak {
  margin-top: 8px;
  color: var(--metin-3);
  font-size: 0.8125rem;
}

.ep-durak__kaynak a {
  color: var(--pembe-acik);
}

@media (max-width: 639px) {
  .eren-kart__kanca {
    display: none;
  }
}

.bolum__bas .ep-atla {
  margin-top: 14px;
  font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- Kısa film bandı (girişin hemen altı)
   Oynatıcı yok: ekrana girince sessiz ve döngüde oynar (site.js). Telefonda kenardan kenara, üst ve alt kenarı
   zemine erir; masaüstünde yuvarlak sinematik çerçeve. Işık ve gölgeler durağan (kaydırırken yeniden çizim yok). */
.film-bant {
  position: relative;
  padding: 0 0 clamp(44px, 7vw, 80px);
}

.film-bant__cerceve {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000 url("assets/acilis/ilk-kare-640.webp") center / cover no-repeat;
}

.film-bant__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.film-bant__cerceve::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--zemin) 0%, transparent 16%, transparent 80%, var(--zemin) 100%);
  pointer-events: none;
}

.film-bant__ses {
  position: absolute;
  z-index: 1;
  right: max(12px, var(--oluk));
  bottom: 14px;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(10 6 16 / 0.55);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.22);
  color: var(--metin);
  cursor: pointer;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.film-bant__ses svg {
  width: 20px;
  height: 20px;
}

.film-bant__ses .film-bant__ses-dalga,
.film-bant__ses[aria-pressed="true"] .film-bant__ses-carpi {
  display: none;
}

.film-bant__ses[aria-pressed="true"] .film-bant__ses-dalga {
  display: inline;
}

.film-bant__ses[aria-pressed="true"] {
  background: rgb(255 61 154 / 0.22);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.6);
}

.film-bant__ses:focus-visible {
  outline: 2px solid var(--pembe-acik);
  outline-offset: 3px;
}

.film-bant__alt {
  max-width: 44rem;
  margin: clamp(18px, 3vw, 28px) auto 0;
  text-align: center;
}

.film-bant__slogan {
  font-size: clamp(1.375rem, 3.4vw, 2rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.03em;
}

.film-bant__ceviri {
  max-width: 36rem;
  margin: 12px auto 0;
  color: var(--metin-2);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.film-bant__ceviri span {
  display: block;
  margin-top: 4px;
  color: var(--metin-3);
  font-size: 0.8125rem;
}

@media (min-width: 760px) {
  .film-bant__cerceve {
    width: calc(100% - var(--oluk) * 2);
    max-width: 1120px;
    margin: 0 auto;
    border-radius: var(--r-panel);
    background-image: url("assets/acilis/ilk-kare-960.webp");
    box-shadow:
      inset 0 0 0 1px rgb(255 255 255 / 0.1),
      0 30px 90px -40px rgb(255 61 154 / 0.45);
  }

  .film-bant__cerceve::after {
    background: radial-gradient(120% 90% at 50% 50%, transparent 62%, rgb(2 2 3 / 0.55) 100%);
  }

  .film-bant__ses {
    right: 18px;
    bottom: 18px;
  }
}

/* ---------------------------------------------------------------- Eren görselleri: canlı soru-cevap, kamera galerisi
   Apple ilkesi: yakınlık ilişkiyi anlatır. Görsel ve açıklaması tek parça; parçalar arasında geniş nefes payı. */
.canli {
  margin: clamp(56px, 10vw, 88px) 0 0;
}

.canli__gorsel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-panel);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.canli__gorsel img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.canli__rozet {
  position: absolute;
  top: 14px;
  left: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border-radius: 999px;
  background: rgb(10 6 16 / 0.62);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.2);
  color: var(--metin);
  font-size: 0.8125rem;
  font-weight: 600;
}

.canli__nokta {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff4d6d;
  box-shadow: 0 0 10px #ff4d6d;
}

.canli__metin {
  max-width: 40rem;
  margin: 20px auto 0;
  text-align: center;
}

.canli__metin h3 {
  font-size: clamp(1.375rem, 2.6vw, 1.875rem);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.canli__metin p {
  margin-top: 10px;
  color: var(--metin-2);
}

.kamera-galeri {
  margin-top: clamp(40px, 7vw, 64px);
}

.kamera-galeri__ust {
  margin-bottom: 14px;
  color: var(--pembe-acik);
  text-align: center;
}

.kamera-galeri__liste {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.kamera-galeri__oge {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-kart);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.kamera-galeri__oge--buyuk {
  grid-column: 1 / -1;
}

.kamera-galeri__oge img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.kamera-galeri__oge span {
  position: absolute;
  bottom: 10px;
  left: 10px;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgb(10 6 16 / 0.6);
  color: var(--metin);
  font-size: 0.75rem;
  font-weight: 600;
}

@media (min-width: 900px) {
  .kamera-galeri__liste {
    grid-template-columns: 1.7fr 1fr;
    grid-template-rows: 1fr 1fr;
  }

  .kamera-galeri__oge--buyuk {
    grid-column: 1;
    grid-row: 1 / span 2;
  }

  .kamera-galeri__oge--buyuk img {
    aspect-ratio: auto;
  }
}

.ep-kamera {
  padding: clamp(48px, 7vw, 96px) 0 0;
}

.ep-kamera__izgara {
  display: grid;
  gap: 12px;
}

.ep-kamera__izgara figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-kart);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.ep-kamera__izgara img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 900px) {
  .ep-kamera__izgara {
    grid-template-columns: 0.8fr 1.2fr;
    grid-template-rows: 1fr 1fr;
  }

  .ep-kamera__dikey {
    grid-row: 1 / span 2;
  }
}

/* ---------------------------------------------------------------- Sık sorulan sorular sayfası (/sik-sorulan-sorular/) */
.sp-giris {
  position: relative;
  overflow: hidden;
  padding: calc(var(--ust-y) + 28px) 0 clamp(24px, 4vw, 40px);
}

.sp-giris h1 {
  margin: 0;
  font-size: clamp(2.5rem, 6vw, 4.25rem);
  line-height: 1.04;
  letter-spacing: -0.045em;
}

.sp-aciklama {
  max-width: 38rem;
  margin-top: 16px;
  color: var(--metin-2);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.6;
}

.sp-gruplar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
}

.sp-gruplar a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--metin);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}

.sp-gruplar a:hover {
  background: rgb(255 61 154 / 0.12);
  box-shadow: inset 0 0 0 1px rgb(255 159 207 / 0.5);
}

.sp-gruplar__ikon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 10px;
  background: #140b1f;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), 0 0 18px -8px var(--renk);
}

.sp-gruplar__ikon .ri {
  width: 18px;
  height: 18px;
}

.sp-gruplar__sayi {
  min-width: 22px;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.08);
  color: var(--metin-2);
  font-size: 0.75rem;
  text-align: center;
}

.sp-grup {
  padding-block: clamp(40px, 6vw, 64px);
}

.sp-grup + .sp-grup {
  padding-top: 0;
}

/* Ana başlıktaki anahtar kelime satırı (SEO: "Türkçe yapay zekâ eğitimi" H1'de; görünüşte küçük üst satır) */
.hero__anahtar {
  display: block;
  margin-bottom: 10px;
  color: var(--metin-2);
  font-size: clamp(0.875rem, 1.2vw, 1rem);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
}

.eren-kart__koken {
  color: var(--metin);
  font-weight: 500;
}

.eg-guncelleme {
  margin-top: 10px;
  color: var(--metin-3);
  font-size: 0.8125rem;
}

.eg-yol-sayi {
  display: block;
  margin-top: 6px;
  color: var(--metin-2);
  font-size: 0.5em;
  font-weight: 600;
  letter-spacing: 0;
}

.eg-eren__ad {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgb(255 159 207 / 0.5);
  text-underline-offset: 3px;
}

.sss__kaynak {
  margin-top: 8px;
  color: var(--metin-3);
  font-size: 0.8125rem;
}

.sss__kaynak a {
  color: var(--pembe-acik);
}

/* ---------------------------------------------------------------- Ana sayfa: 8 bölüm (Berke 19.10, pazarlama dokümanı)
   01 Hero · 02 Kazanımlar · 03 Eğitim programı (4 kategori) · 04 Eren · 05 Ücretsiz · 06 Üyelik · 07 SSS · 08 Son CTA */

/* 01 Hero: marka/eğitmen üst satırı, aranabilir H1, üç rozet, marka imzası (AI + Sen = SI) */
.hero__karsilama {
  font-size: clamp(0.75rem, 1vw, 0.8125rem);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.hero__baslik {
  font-size: clamp(2rem, 0.85rem + 4.3vw, 3.5rem);
  line-height: 1.06;
}

/* Masaüstünde "Online Yapay Zekâ Eğitimi:" tek satırda kalsın (iki satırlık başlık); sağ kenar portredeki yüze binmez */
@media (min-width: 900px) {
  .hero__icerik .hero__baslik {
    max-width: 48rem;
  }
}

.hero__rozetler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.hero__rozetler li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 9px;
  border-radius: 999px;
  background: rgb(12 4 20 / 0.42);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--metin);
  font-size: 0.875rem;
  font-weight: 600;
}

.hero__rozetler .ikon {
  width: 18px;
  height: 18px;
  padding: 3px;
  border-radius: 50%;
  background: var(--gunbatimi);
  color: #1a0820;
  stroke-width: 2.8;
}

.hero__icerik .hero__eylem {
  margin-top: 24px;
}

.hero__icerik .hero__formul {
  margin-top: 22px;
  opacity: 0.9;
}

.hero__formul-not {
  font-size: 0.8125rem;
}

@media (max-aspect-ratio: 1/1) {
  .hero__rozetler {
    justify-content: center;
  }
}

/* Bölüm üst satırı büyük harfle (doküman: "BAŞLAMAK İÇİN ÖDEME YAPMAN GEREKMİYOR") */
.ust-ifade--buyuk {
  font-size: 0.8125rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 02 Kazanımlar: dört somut sonuç, her biri ilgili eğitime gider */
.kazanim-izgara,
.kategori-izgara {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .kazanim-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .kazanim-izgara {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.kazanim-kart,
.kategori-kart {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 22px;
  transition:
    transform 0.35s var(--yumusak),
    box-shadow 0.35s ease;
}

.kart-resim {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.kazanim-kart__govde,
.kategori-kart__govde {
  display: grid;
  gap: 8px;
  padding: 18px 20px 22px;
}

.kazanim-kart__ikon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin-top: -40px;
  border-radius: 12px;
  background: rgb(14 8 22 / 0.86);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.16),
    0 8px 22px -8px color-mix(in srgb, var(--renk) 70%, transparent);
}

.kazanim-kart__ikon .ri {
  width: 24px;
  height: 24px;
}

.kazanim-kart h3,
.kategori-kart h3 {
  font-size: 1.125rem;
  letter-spacing: -0.02em;
}

.kazanim-kart p,
.kategori-kart__govde > p {
  color: var(--metin-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.kazanim-kart__baglanti {
  color: inherit;
  text-decoration: none;
}

.kazanim-kart__baglanti::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
}

.kazanim-kart:has(.kazanim-kart__baglanti:focus-visible) {
  box-shadow: 0 0 0 2px var(--renk);
}

.kazanim-kart__baglanti:focus-visible {
  outline: none;
}

/* 03 Eğitim programı: dört kategori, her birinde iki eğitim sayfası bağlantısı */
@media (min-width: 900px) {
  .kategori-izgara {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
  }

  .kategori-kart {
    display: grid;
    grid-template-columns: 42% 1fr;
  }

  .kategori-kart .kart-resim {
    height: 100%;
    aspect-ratio: auto;
  }
}

.kategori-kart__egitimler {
  display: grid;
  gap: 6px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.kategori-kart__egitimler a {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 6px 12px 6px 6px;
  border-radius: 14px;
  background: rgb(255 255 255 / 0.04);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
  color: var(--metin);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.25s ease;
}

.kategori-kart__egitimler a .ikon {
  width: 18px;
  height: 18px;
  margin-left: auto;
  color: var(--metin-3);
}

.kategori-kart__ikon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 10px;
  background: rgb(255 255 255 / 0.06);
}

.kategori-kart__ikon .ri {
  width: 20px;
  height: 20px;
}

.program__tum {
  display: flex;
  justify-content: center;
  margin-top: clamp(28px, 4vw, 40px);
}

@media (hover: hover) and (pointer: fine) {
  .kazanim-kart:hover,
  .kategori-kart:hover {
    transform: translateY(-3px);
  }

  .kategori-kart__egitimler a:hover {
    background: rgb(255 255 255 / 0.09);
  }
}

@media (prefers-reduced-motion: reduce) {
  .kazanim-kart,
  .kategori-kart {
    transition: none;
  }
}

/* 04 Eren: gerçek çekim fotoğrafı + kısa tanıtım; bölümün ilk öğesi olduğu için üst boşluk yok */
.eren-kart--yeni {
  margin-top: 0;
}

.eren-kart--yeni .eren-kart__metin h2 {
  font-size: clamp(2rem, 4.3vw, 3.375rem);
  margin-bottom: 18px;
}

.eren-kart--yeni .eren-kart__metin p + p {
  margin-top: 12px;
}

.eren-kart--yeni .eren-kart__gorsel img {
  object-position: 50% 22%;
}

@media (max-width: 899.98px) {
  .eren-kart--yeni .eren-kart__gorsel {
    aspect-ratio: 4 / 4.2;
  }
}

/* 06 Üyelik: iki paket, sade satırlar; XP ve seviyeler kısa bağlantıyla SSS'de */
@media (min-width: 900px) {
  .paketler.paketler--iki {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 860px;
    margin-inline: auto;
  }
}

.paket__ozet {
  color: var(--metin-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.paketler--iki .paket__kurucu {
  justify-self: start;
  width: max-content;
}

.uyelik__xp {
  display: flex;
  justify-content: center;
  margin-top: clamp(24px, 3vw, 32px);
  text-align: center;
}

/* 07 SSS: üst satır ve başlık */
.sss__ust {
  margin-bottom: 10px;
  text-align: center;
}

/* 08 Son çağrı: uzun başlık ufkun üstünde, metin ve düğme altında */
.son h2 {
  max-width: 19ch;
  font-size: clamp(2rem, 4.8vw, 4rem);
  line-height: 1.08;
}

.son__govde {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: clamp(64px, 9vw, 120px);
}

.son__metin {
  max-width: 34rem;
  color: var(--metin-2);
  font-size: clamp(1rem, 1.3vw, 1.125rem);
  line-height: 1.55;
}

/* Tüm eğitimler sayfası: kısa "Sana uygun eğitim hangisi?" seçici */
.hedef-kisa h2 {
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  text-align: center;
}

.hedef-kisa__secenekler {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
}

.hedef-kisa__cip {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 8px 16px 8px 8px;
  border-radius: 999px;
  background: rgb(255 255 255 / 0.05);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14);
  color: var(--metin);
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.25s ease,
    box-shadow 0.25s ease;
}

.hedef-kisa__cip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.hedef-kisa__cip:has(input:checked) {
  background: rgb(255 61 154 / 0.16);
  box-shadow: inset 0 0 0 1.5px var(--pembe-acik);
}

.hedef-kisa__cip:has(input:focus-visible) {
  outline: 2px solid var(--pembe-acik);
  outline-offset: 3px;
}

.hedef-kisa__ikon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.06);
}

.hedef-kisa__ikon .ri {
  width: 18px;
  height: 18px;
}

.hedef-kisa__sonuc {
  max-width: 720px;
  margin: 20px auto 0;
}

.hedef-kisa__oneri {
  display: none;
  gap: 14px;
  padding: 20px;
  border-radius: 22px;
}

.hedef-kisa[data-secim="ogrenmek"] [data-sonuc="ogrenmek"],
.hedef-kisa[data-secim="is"] [data-sonuc="is"],
.hedef-kisa[data-secim="girisim"] [data-sonuc="girisim"],
.hedef-kisa[data-secim="ogrenci"] [data-sonuc="ogrenci"],
.hedef-kisa[data-secim="musteri"] [data-sonuc="musteri"] {
  display: grid;
}

.hedef-kisa__davet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgb(255 255 255 / 0.08);
  color: var(--metin-2);
  font-size: 0.9375rem;
}

.egs-liste {
  padding-top: clamp(24px, 4vw, 48px);
}

/* 05 Ücretsiz başlangıç: hediye kartının yerine gerçekçi fotoğraf (dersi telefondan izleyen öğrenci) */
.ucretsiz__foto {
  overflow: hidden;
  width: min(100%, 440px);
  margin: 0 auto;
  border-radius: var(--r-panel);
  box-shadow:
    0 36px 90px -40px rgb(255 61 154 / 0.45),
    inset 0 0 0 1px rgb(255 255 255 / 0.1);
}

.ucretsiz__foto img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

@media (max-width: 899.98px) {
  .ucretsiz__foto {
    order: -1;
    width: 100%;
    max-width: 520px;
    margin-bottom: clamp(28px, 6vw, 40px);
  }

  .ucretsiz__foto img {
    aspect-ratio: 4 / 3.6;
  }
}

/* Telefonda küçük metin bağlantılarının dokunma alanı (genel test 19.10): görünüm aynı, dokunulan alan ≥ 40 px */
@media (pointer: coarse) {
  .eg-eren__ad,
  .ep-kaynak a {
    display: inline-block;
    padding-block: 10px;
    margin-block: -10px;
  }
}

/* ---------------------------------------------------------------- Telefon/dikey girişi (Berke 19.10)
   Yüz yarım kesilmesin: Eren'in dikey portresi (eren-mobil, 3:4) baş ve omuzlarla tam kadrajda, arkasında fotoğrafın
   kendi gün batımı neon halkası. Açılışta perde kalkar, portre yaklaşır, halkanın ışığı neon gibi titreyerek yanar ve
   sonra yavaşça nefes alır; dört cam ikon halkanın üstünde süzülür. Yalnız opaklık/dönüşüm; az harekette durgun.
   Halka ölçüsü fotoğraftan: merkez %49,4 / %51, yarıçap genişliğin %43'ü. Masaüstü girişine dokunmaz. */
.hero__halka {
  display: none;
}

@media (max-aspect-ratio: 1/1) {
  /* Portre 3:4; telefonda ekranın ~%56'sı (düğme ilk ekranda kalsın), tablette %70'i. Fazlası üstten %30, alttan %70 kırpılır. */
  .hero--mobil-portre .hero__sahne {
    height: clamp(300px, 56svh, 133.34vw);
  }

  .hero--mobil-portre .hero__portre img {
    top: 0;
    object-position: 50% 30%;
  }

  /* İkonlar 3:4 portrenin ekrandaki kutusuna göre (--mx/--my fotoğrafta oran): her telefon boyunda halkanın üstünde kalır, süzülürken üst şeride değmez */
  .hero--mobil-portre .hero__ikon {
    --iw: max(100cqw, 100cqh * 3 / 4);
    --ih: max(100cqh, 100cqw * 4 / 3);
    left: clamp(calc(var(--boy) / 2 + 8px), calc((100cqw - var(--iw)) * 0.5 + var(--mx) * var(--iw)), calc(100cqw - var(--boy) / 2 - 8px));
    top: max(calc(var(--boy) / 2 + 84px), calc((100cqh - var(--ih)) * 0.3 + var(--my) * var(--ih)));
  }

  .hero--mobil-portre .hero__sahne::after {
    background: linear-gradient(to bottom, rgb(2 2 3 / 0.45) 0, transparent 12%, transparent 62%, rgb(2 2 3 / 0.86) 84%, var(--zemin) 100%);
  }

  .hero--mobil-portre .hero__icerik {
    margin-top: calc(-1 * min(26vw, 150px));
  }

  /* Halkanın ışığı: sitenin gün batımı renklerinde (sol pembe → üst mercan → sağ altın) halka biçimli parıltı */
  .hero--mobil-portre .hero__halka {
    position: absolute;
    z-index: 2;
    left: 49.4%;
    /* Fotoğraftaki halka merkezi görselin %51'inde (görsel yüksekliği 133.34vw); kırpılan üst pay çıkarılır */
    top: calc(68vw - 0.3 * (133.34vw - 100%));
    display: block;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 50%;
    background: conic-gradient(from 200deg, #ff3d9a, #ff5f7e 25%, #ff8a3d 45%, #ffc15e 60%, #ff8a3d 75%, #ff3d9a);
    -webkit-mask-image: radial-gradient(closest-side, transparent 74%, rgb(0 0 0 / 0.55) 84%, rgb(0 0 0 / 0.75) 86%, rgb(0 0 0 / 0.3) 91%, transparent 98%);
    mask-image: radial-gradient(closest-side, transparent 74%, rgb(0 0 0 / 0.55) 84%, rgb(0 0 0 / 0.75) 86%, rgb(0 0 0 / 0.3) 91%, transparent 98%);
    opacity: 0.5;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }
}

@media (max-aspect-ratio: 1/1) and (prefers-reduced-motion: no-preference) {
  html.js .hero--mobil-portre .hero__halka {
    animation:
      halka-yan 1.6s linear 0.55s both,
      halka-nefes 6s ease-in-out 2.4s infinite;
  }

  html.js .hero--mobil-portre:not(.hareket-aktif) .hero__halka {
    animation-play-state: running, paused;
  }
}

/* Neon yanışı: birkaç kez titreyip tam parlaklığa çıkar, hafifçe büyüyerek yerine oturur */
@keyframes halka-yan {
  0%,
  12% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
  }

  16%,
  22% {
    opacity: 0.55;
  }

  26%,
  34% {
    opacity: 0.12;
  }

  40%,
  48% {
    opacity: 0.8;
  }

  54% {
    opacity: 0.35;
  }

  100% {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes halka-nefes {
  50% {
    opacity: 0.85;
  }
}

@media (max-aspect-ratio: 1/1) and (min-width: 600px) {
  .hero--mobil-portre .hero__sahne {
    height: min(133.34vw, 70svh);
  }
}

/* Çok dar telefonda üst satır (Süper Zeka Kulübü · Eren Hocaoğlu) tek satırda kalsın */
@media (max-width: 359.98px) {
  .hero__karsilama {
    font-size: 0.6875rem;
    letter-spacing: 0.04em;
  }
}

/* ------------------------------------------------------------------
   Giriş: "yapay zekâ yazıyor" (Berke 20.10). Yazılar kelime kelime belirir, en önde gün batımı imleci yürür:
   başlıktan önce iki kez yanıp söner (düşünüyor), açıklamanın sonunda yanıp sönerek kaybolur. Zamanlar sayfa
   üretilirken yazılır (--t, --d). Kelime görünürlükle açılır: degrade yazının (background-clip: text) maskesi
   bozulmaz, yerleşim hiç kaymaz; imleç sıfır genişlikte (satırı itmez). Döngü yok; kaydırmada duraklatılmaz.
   ------------------------------------------------------------------ */
.hero .ak::after,
.hero .zeka-ai > .ak:first-child::before {
  content: "";
  display: inline-block;
  width: max(2px, 0.055em);
  height: 0.92em;
  margin-left: 0.05em;
  margin-right: calc(-1 * (max(2px, 0.055em) + 0.05em));
  vertical-align: -0.14em;
  border-radius: 99px;
  background: linear-gradient(180deg, #ffc15e 0%, #ff8a3d 40%, #ff3d9a 100%);
  box-shadow: 0 0 8px rgb(255 61 154 / 0.8), 0 0 2px rgb(255 193 94 / 0.9);
  visibility: hidden;
}

.hero .zeka-ai > .ak:first-child::before {
  margin-left: 0;
  margin-right: calc(-1 * max(2px, 0.055em));
}

@media (prefers-reduced-motion: no-preference) {
  html.js .hero .ak {
    animation: ak-belir 1ms linear var(--t) backwards;
  }

  html.js .hero .ak::after {
    animation: ak-imlec var(--d) linear var(--t);
  }

  html.js .hero .ak--son::after {
    animation: ak-yanip 0.5s linear var(--t) 4;
  }

  html.js .hero .zeka-ai > .ak:first-child::before {
    animation: ak-yanip 0.2s linear var(--dusun) 2;
  }

  /* Formül notu imleçsiz akar (imleç açıklamanın sonunda kalır) */
  html.js .hero .hero__formul-not .ak::after {
    animation: none;
  }

  /* Kapsayıcılar artık bulanık girişle gelmez: içerikleri akar ya da tek tek belirir */
  html.js .hero__icerik > :is(.hero__karsilama, .hero__baslik, .hero__aciklama, .hero__rozetler, .hero__formul) {
    animation: none;
  }

  html.js .hero__icerik > :is(.hero__eylem, .hero__program) {
    animation: ak-cik 0.7s var(--yumusak) var(--t) both;
  }

  html.js .hero__rozetler > li,
  html.js .hero__formul > [style] {
    animation: ak-cip 0.5s var(--yumusak) var(--t) both;
  }

  /* "Öğren, Uygula, Üret." yazılınca neon tabela gibi bir kez titreyip yanar; ardından renkler akar (döngü kaydırmada durur) */
  html.js .hero .zeka-si {
    animation:
      neon-tutus 0.6s linear var(--t-neon),
      neon-akis 6s linear calc(var(--t-neon) + 1s) 2;
  }
}

@keyframes ak-belir {
  from {
    visibility: hidden;
  }
}

@keyframes ak-imlec {
  from,
  to {
    visibility: visible;
  }
}

@keyframes ak-yanip {
  0%,
  49.9% {
    visibility: visible;
  }

  50%,
  100% {
    visibility: hidden;
  }
}

@keyframes ak-cik {
  from {
    opacity: 0;
    translate: 0 12px;
  }
}

@keyframes ak-cip {
  from {
    opacity: 0;
    scale: 0.86;
  }
}

@keyframes neon-tutus {
  0%,
  100% {
    opacity: 1;
  }

  14% {
    opacity: 0.4;
  }

  26% {
    opacity: 1;
  }

  40% {
    opacity: 0.62;
  }

  54% {
    opacity: 1;
  }
}

/* Üyelik: aylık, yıllık ve birebir görüşme yan yana (Berke 21.10) */
@media (min-width: 900px) {
  .paketler.paketler--iki.paketler--uc {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    max-width: none;
  }
}

/* ---------------------------------------------------------------- Tam ekran menü (Berke 28.10)
   Hamburger, kapsülü tam ekrana açar: koyu sahne kapsülün yerinden büyür (iPhone'daki ada gibi), bağlantılar
   ikonlarıyla sırayla yükselir, kapanış aynı yoldan kapsüle döner. Geçişler kesilebilir: yarıda tekrar
   dokununca bulunduğu yerden geri döner. Kapsülün yeri yalnız dokununca ölçülür (site.js); kaydırmada iş yok.
   Sahnede bulanıklık yok (düz renk + iki ışık): telefonda ucuz. */
.tam-menu {
  --k-ust: 12px;
  --k-sag: 12px;
  --k-alt: calc(100% - 68px);
  --k-sol: 12px;
  position: fixed;
  inset: 0;
  z-index: 49;
  overflow-y: auto;
  overscroll-behavior: contain;
  background:
    radial-gradient(90% 55% at 100% 0%, rgb(255 61 154 / 0.2), transparent 65%),
    radial-gradient(80% 45% at 0% 100%, rgb(255 138 61 / 0.15), transparent 65%),
    #07050c;
  visibility: hidden;
  clip-path: inset(var(--k-ust) var(--k-sag) var(--k-alt) var(--k-sol) round 28px);
  /* Apple yayı: salınımsız (sönüm 1,0), açılışta tepki 0,42 sn, kapanışta 0,3 sn; aynı yoldan döner.
     linear() bilmeyen tarayıcı üstteki eğriyi kullanır. */
  transition:
    clip-path 0.4s cubic-bezier(0.2, 0.9, 0.1, 1),
    visibility 0s linear 0.4s;
  transition:
    clip-path 0.44s linear(0, 0.0503, 0.1605, 0.2901, 0.4174, 0.5323, 0.6307, 0.7121, 0.7779, 0.8302, 0.8711, 0.9027, 0.927, 0.9454, 0.9594, 0.9699, 0.9777, 0.9836, 0.9879, 0.9911, 0.9935, 0.9953, 0.9965, 0.9975, 0.9982, 0.9987, 1),
    visibility 0s linear 0.44s;
}

html.menu-acik .tam-menu {
  visibility: visible;
  clip-path: inset(0 round 0);
  transition:
    clip-path 0.55s cubic-bezier(0.2, 0.9, 0.1, 1),
    visibility 0s;
  transition:
    clip-path 0.62s linear(0, 0.0503, 0.1605, 0.2901, 0.4174, 0.5323, 0.6307, 0.7121, 0.7779, 0.8302, 0.8711, 0.9027, 0.927, 0.9454, 0.9594, 0.9699, 0.9777, 0.9836, 0.9879, 0.9911, 0.9935, 0.9953, 0.9965, 0.9975, 0.9982, 0.9987, 1),
    visibility 0s;
}

html.menu-acik,
html.menu-acik body {
  overflow: hidden;
}

.tam-menu__ic {
  display: flex;
  flex-direction: column;
  width: min(760px, 100%);
  min-height: 100%;
  margin-inline: auto;
  padding:
    calc(env(safe-area-inset-top) + 96px)
    max(24px, env(safe-area-inset-right))
    calc(env(safe-area-inset-bottom) + 28px)
    max(24px, env(safe-area-inset-left));
}

.tam-menu__liste {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Telefonda en uzun ad ("Neler yapabileceksin?") 360–430 px'te tek satıra sığar: son satırda tek kelime kalmaz */
.tam-menu__liste a {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 66px;
  padding: 8px 2px;
  border-bottom: 1px solid rgb(255 255 255 / 0.07);
  color: var(--metin);
  font-size: clamp(1.15rem, 0.95rem + 2.2vw, 2.25rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  transition:
    transform 0.15s cubic-bezier(0.2, 0.8, 0.2, 1),
    color 0.2s ease;
}

.tam-menu__liste a:active {
  transform: scale(0.98);
}

.tam-menu__ikon {
  display: grid;
  flex: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 13px;
  background: rgb(255 255 255 / 0.05);
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 0.1),
    0 10px 26px -12px var(--renk);
  font-size: 1.125rem;
}

.tam-menu__ad {
  min-width: 0;
}

.tam-menu__ok {
  margin-left: auto;
  padding-left: 8px;
  color: var(--metin-3);
  font-size: 1.125rem;
  font-weight: 500;
  transition:
    translate 0.25s ease,
    color 0.25s ease;
}

@media (hover: hover) {
  .tam-menu__liste a:hover {
    color: #fff;
  }

  .tam-menu__liste a:hover .tam-menu__ok {
    translate: 4px 0;
    color: var(--pembe-acik);
  }
}

.tam-menu__alt {
  display: grid;
  justify-items: center;
  gap: 18px;
  margin-top: auto;
  padding-top: 36px;
}

.tam-menu__alt .btn {
  width: 100%;
  max-width: 420px;
}

.tam-menu__giris {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  color: var(--metin-2);
  font-weight: 600;
  text-decoration: none;
}

@media (max-width: 359.98px) {
  .tam-menu__liste a {
    font-size: 1.15rem;
  }
}

@media (min-width: 600px) {
  .tam-menu__liste a {
    gap: 16px;
  }

  .tam-menu__ikon {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }
}

/* Geniş ekranda menü ortada, yazı büyük; düğme listenin hemen altında */
@media (min-width: 900px) {
  .tam-menu__ic {
    justify-content: center;
  }

  .tam-menu__liste a {
    min-height: 78px;
    font-size: 2.6rem;
  }

  .tam-menu__ikon {
    width: 52px;
    height: 52px;
    border-radius: 16px;
    font-size: 1.25rem;
  }

  .tam-menu__alt {
    margin-top: 44px;
  }
}

/* Bağlantılar sahneyle aynı yönde (aşağı doğru) sırayla yerine oturur; kapanışta hepsi birlikte hızla söner */
.tam-menu__oge {
  opacity: 0;
  translate: 0 -14px;
  transition:
    opacity 0.16s ease,
    translate 0.16s ease;
}

html.menu-acik .tam-menu__oge {
  opacity: 1;
  translate: 0 0;
  transition:
    opacity 0.42s ease calc(0.12s + var(--i) * 0.045s),
    translate 0.62s cubic-bezier(0.2, 0.9, 0.1, 1) calc(0.12s + var(--i) * 0.045s);
  transition:
    opacity 0.42s ease calc(0.12s + var(--i) * 0.045s),
    translate 0.62s linear(0, 0.0503, 0.1605, 0.2901, 0.4174, 0.5323, 0.6307, 0.7121, 0.7779, 0.8302, 0.8711, 0.9027, 0.927, 0.9454, 0.9594, 0.9699, 0.9777, 0.9836, 0.9879, 0.9911, 0.9935, 0.9953, 0.9965, 0.9975, 0.9982, 0.9987, 1) calc(0.12s + var(--i) * 0.045s);
}

/* Neredeyim: bulunduğun sayfa ya da ekrandaki bölüm kendi renginde işaretli */
.tam-menu__liste a[aria-current] {
  color: #fff;
}

.tam-menu__liste a[aria-current] .tam-menu__ikon {
  box-shadow:
    inset 0 0 0 1.5px var(--renk),
    0 0 28px -6px var(--renk);
}

.tam-menu__liste a[aria-current] .tam-menu__ok {
  color: var(--renk);
}

/* Hamburger basıldığı anda tepki verir */
.menu-dugme {
  transition: scale 0.12s ease-out;
  -webkit-tap-highlight-color: transparent;
}

.menu-dugme:active {
  scale: 0.9;
}

@media (prefers-reduced-motion: reduce) {
  .tam-menu {
    clip-path: none;
    opacity: 0;
    transition:
      opacity 0.2s ease,
      visibility 0s linear 0.2s;
  }

  html.menu-acik .tam-menu {
    clip-path: none;
    opacity: 1;
    transition:
      opacity 0.2s ease,
      visibility 0s;
  }

  .tam-menu__oge,
  html.menu-acik .tam-menu__oge {
    translate: none;
    transition: opacity 0.2s ease;
  }
}