/* =====================================================================
   SEVİYE TESPİT PENCERESİ VE BAŞLANGIÇ KARTI · yeni tasarım (7 Kasım 2026)
   - İşaretleme ve davranış değişmez: pencereyi /temalar/activeenglish/landing/grup-dersi/seviye-tespiti.js basar ve yönetir
     (soru motoru, anonim kayıt, başvuru formu, KVKK, odak ve klavye). Bu dosya yalnız görünümdür; kimlik ve sınıflar aynı.
   - Yalnız yeni tasarımlı sayfalar bu dosyayı yükler. Reklam sayfaları ve Kurumsal avantaj eski
     /temalar/activeenglish/styles/seviye-testi.css ile kalır (sahibin isteği: o sayfalara dokunulmaz).
     Betik, adresinde "seviye-testi.css" geçen bir stil bağlantısı bulursa eski dosyayı yüklemez; bu yüzden dosya adı aynı.
   - Sahibin kuralları korunur: seviye hiçbir ekranda gösterilmez (P152); soru ekranı metin, soru, dört şık ve düğmelerle
     kaydırmadan sığar (P160: 360×640, 390×664, 1366×768); dokunma hedefleri en az 44 px; hareket azaltma açıksa animasyon yok.
   - Görünüm: beyaz pencere, lacivert ana düğme, ince çerçeveli şıklar; seçilen şık lacivert, harf dairesi sarı.
   - CEFR satırında hiçbir seviye öne çıkarılmaz (sonuç ima edilmesin).
   ===================================================================== */
.ae-stm, .ae-st {
  --st-l: #0F2A5F; --st-gece: #0A1D45; --st-m: #2459D6; --st-s: #F6C344; --st-k: #D9382C;
  --st-yuzey: #F5F7FC; --st-acik: #EEF3FF; --st-cerceve: #E6EBF3; --st-cerceve-k: #CDD6E6;
  --st-metin: #18223F; --st-ikincil: #56607C; --st-soluk: #646D87;
  --st-hata: #C0392B; --st-hata-z: #FDECEA; --st-wa: #1DA851;
  --st-yazi: 'PJS', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --st-yay: cubic-bezier(.2, .8, .2, 1);
  --st-golge: 0 40px 90px -30px rgba(10, 29, 69, .55), 0 0 0 1px rgba(15, 42, 95, .06);
}
/* Sayfa stilleri pencereye sızmasın (SVG hariç); dil bilgisi geri verilir (büyük harfte ONLINE, İ değil) */
.ae-stm :where(*:not(svg, svg *)), .ae-st :where(*:not(svg, svg *)) { all: revert; box-sizing: border-box; }
.ae-stm [hidden], .ae-st [hidden] { display: none !important; }
.ae-stm [lang="tr"], .ae-st[lang="tr"], .ae-st [lang="tr"] { -webkit-locale: "tr"; }
.ae-stm [lang="en"], .ae-st [lang="en"] { -webkit-locale: "en"; }
.ae-stm [lang="de"] { -webkit-locale: "de"; } .ae-stm [lang="es"] { -webkit-locale: "es"; } .ae-stm [lang="it"] { -webkit-locale: "it"; }
.ae-stm [lang="fr"] { -webkit-locale: "fr"; } .ae-stm [lang="ru"] { -webkit-locale: "ru"; } .ae-stm [lang="zh"] { -webkit-locale: "zh"; }
.ae-stm [lang="ar"] { -webkit-locale: "ar"; } .ae-stm [lang="ko"] { -webkit-locale: "ko"; } .ae-stm [lang="ja"] { -webkit-locale: "ja"; }
.ae-stm svg, .ae-st svg { display: block; }

/* ---------- Pencere ---------- */
.ae-stm { all: revert; position: fixed; inset: 0; z-index: 99990; display: none; align-items: center; justify-content: center; padding: 24px;
  font-family: var(--st-yazi); font-size: 16px; font-weight: 500; line-height: 1.55; color: var(--st-metin); -webkit-font-smoothing: antialiased; box-sizing: border-box; text-align: left; }
.ae-stm.acik { display: flex; }
.ae-stm .ae-stm-perde { position: absolute; inset: 0; background: rgba(10, 29, 69, .5); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ae-stm .ae-stm-pencere { position: relative; display: block; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow: auto;
  background: #fff; border-radius: 28px; box-shadow: var(--st-golge); outline: none; overscroll-behavior: contain; scrollbar-width: thin; }
.ae-stm .ae-stm-pencere.genis { max-width: 720px; }
.ae-stm h2, .ae-stm h3, .ae-stm b { font-variant-numeric: lining-nums; }

/* Üst bant */
.ae-stm .ae-stm-bant { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: 12px; min-height: 68px; margin: 0; padding: 12px 14px 12px 22px;
  background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--st-cerceve); }
.ae-stm .ae-stm-bant img { display: block; width: 28px; height: auto; margin: 0; }
.ae-stm .ae-stm-kurum { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.ae-stm .ae-stm-kurum b { font-family: var(--st-yazi); font-weight: 800; font-size: 16.5px; letter-spacing: -.02em; color: var(--st-l); }
.ae-stm .ae-stm-kurum span { font-size: 13px; font-weight: 600; color: var(--st-ikincil); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ae-stm .ae-stm-sag { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.ae-stm .ae-stm-sayac { display: inline-flex; align-items: baseline; gap: 4px; padding: 6px 12px; border-radius: 999px; background: var(--st-l); color: #fff;
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-stm .ae-stm-sayac b { font-weight: 800; }
.ae-stm .ae-stm-sayac span { color: rgba(255, 255, 255, .7); font-weight: 600; }
.ae-stm .ae-stm-kapat { display: grid; place-items: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: var(--st-yuzey); color: var(--st-l); cursor: pointer;
  transition: background .25s, transform .3s var(--st-yay); }
.ae-stm .ae-stm-kapat:hover { background: var(--st-acik); transform: rotate(90deg); }
.ae-stm .ae-stm-kapat svg { width: 18px; height: 18px; }

/* İlerleme: lacivert-mavi çubuk; bitince sarı parlar */
.ae-stm .ae-stm-ilerleme { position: sticky; top: 68px; z-index: 2; display: block; height: 6px; overflow: hidden; background: #EEF2FA; }
.ae-stm .ae-stm-ilerleme i { display: block; width: 100%; height: 100%; border-radius: 0 6px 6px 0; background: linear-gradient(90deg, var(--st-m), var(--st-l));
  transform-origin: left center; transform: scaleX(0); transition: transform .35s var(--st-yay); }
.ae-stm .ae-stm-ilerleme.tam::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--st-s), #FFD978); }

/* Ekranlar */
.ae-stm .ae-stm-ekran { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 30px 34px 32px; }
.ae-stm p { margin: 0; }
.ae-stm .kas { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--st-m); }
.ae-stm .kas::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.ae-stm h2 { margin: 0; font-family: var(--st-yazi) !important; font-weight: 800; font-size: 34px; line-height: 1.08; letter-spacing: -.035em; color: var(--st-l); text-wrap: balance; }
.ae-stm .bas { display: flex; flex-direction: column; gap: 10px; }
.ae-stm .giris-metni { max-width: 52ch; font-size: 16px; color: var(--st-ikincil); }
.ae-stm .alan { display: grid; gap: 8px; }
.ae-stm .alan label { display: block; font-size: 14.5px; font-weight: 700; color: var(--st-metin); }
.ae-stm .alan label small { font-size: 13px; font-weight: 600; color: var(--st-soluk); }
.ae-stm .ae-stm-girdi { display: block; width: 100%; min-height: 54px; margin: 0; padding: 12px 16px; border: 1.5px solid var(--st-cerceve-k); border-radius: 14px;
  background: var(--st-yuzey); color: var(--st-metin); font: 600 16px/1.3 var(--st-yazi); transition: border-color .2s, box-shadow .2s, background .2s; }
.ae-stm .ae-stm-girdi::placeholder { color: var(--st-soluk); font-weight: 500; }
.ae-stm .ae-stm-girdi:hover { border-color: #B5C1D8; }
.ae-stm .ae-stm-girdi:focus { outline: none; border-color: var(--st-m); background: #fff; box-shadow: 0 0 0 4px rgba(36, 89, 214, .14); }
.ae-stm select.ae-stm-girdi, .ae-st select { appearance: none; -webkit-appearance: none; padding-right: 48px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%230F2A5F' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
/* Test bilgisi: iki küçük kutucuk (30 soru · 10–15 dakika) */
.ae-stm .test-bilgi, .ae-st .bilgi { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; font-size: 14.5px; font-weight: 600; color: var(--st-ikincil); }
.ae-stm .test-bilgi > span, .ae-st .bilgi > span { display: inline-flex; align-items: baseline; gap: 5px; padding: 7px 14px; border-radius: 999px; background: var(--st-acik); }
.ae-stm .test-bilgi b, .ae-st .bilgi b { font-weight: 800; color: var(--st-l); }
.ae-stm .kural, .ae-st .kural { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 15px; font-weight: 600; color: var(--st-metin); }
.ae-stm .kural::before, .ae-st .kural::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--st-s); box-shadow: 0 0 0 4px rgba(246, 195, 68, .22); }

/* Düğmeler */
.ae-stm .dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px;
  font: 700 16px/1.2 var(--st-yazi); letter-spacing: -.005em; text-decoration: none; text-transform: none; cursor: pointer;
  transition: background .25s, box-shadow .25s, transform .25s var(--st-yay), color .25s; }
.ae-stm .dugme:active { transform: scale(.98); }
.ae-stm .dugme-ana { background: linear-gradient(180deg, #1B3D84, var(--st-l)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 12px 26px -16px rgba(15, 42, 95, .75); }
.ae-stm .dugme-ana:hover { background: linear-gradient(180deg, #2B5BD2, #1E48B4); transform: translateY(-1px); }
.ae-stm .dugme-ana[disabled] { opacity: .7; cursor: progress; transform: none; }
.ae-stm .dugme-ikinci { background: #fff; color: var(--st-l); box-shadow: inset 0 0 0 1.5px var(--st-cerceve-k); }
.ae-stm .dugme-ikinci:hover { box-shadow: inset 0 0 0 1.5px var(--st-l); transform: translateY(-1px); }
.ae-stm .dugme-yazi { min-height: 44px; padding: 0 10px; background: none; color: var(--st-ikincil); font-weight: 700; text-decoration: underline; text-decoration-color: var(--st-cerceve-k); text-underline-offset: 4px; }
.ae-stm .dugme-yazi:hover { color: var(--st-l); text-decoration-color: currentColor; }
.ae-stm .tam { width: 100%; }
.ae-stm .dugme:focus-visible, .ae-stm .ae-stm-siklar button:focus-visible, .ae-stm a:focus-visible, .ae-stm input:focus-visible, .ae-stm .ae-stm-kapat:focus-visible,
.ae-st button:focus-visible, .ae-st select:focus-visible { outline: 3px solid var(--st-s); outline-offset: 3px; }

/* CEFR satırı: A1…C2 kesik çizgili bir rota üzerinde (seviye işaretlenmez) */
.ae-stm .cefr-blok, .ae-st .cefr-blok { display: block; container: cefr / inline-size; margin: 0; padding-top: 16px; border-top: 1px solid var(--st-cerceve); }
.ae-stm .cefr-dizi, .ae-st .cefr-dizi { display: flex; align-items: center; gap: 10px; }
.ae-stm .cefr-kutular, .ae-st .cefr-kutular { position: relative; flex: none; display: flex; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ae-stm .cefr-kutular::before, .ae-st .cefr-kutular::before { content: ""; position: absolute; left: 8px; right: 8px; top: 50%; border-top: 1.5px dashed var(--st-cerceve-k); }
.ae-stm .cefr-kutular li, .ae-st .cefr-kutular li { position: relative; display: grid; place-items: center; width: 34px; height: 34px; margin: 0; border-radius: 50%;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--st-cerceve-k); font: 800 12px/1 var(--st-yazi); color: var(--st-l); list-style: none; }
.ae-stm .cefr-kutular li::marker, .ae-st .cefr-kutular li::marker { content: none; }
.ae-stm .cefr-rozet, .ae-st .cefr-rozet { flex: none; display: block; width: 28px; height: 28px; margin-left: 2px; }
.ae-stm .cefr-rozet svg, .ae-st .cefr-rozet svg { width: 28px; height: 28px; }
.ae-stm .cefr-ad, .ae-st .cefr-ad { flex: none; font: 800 12px/1 var(--st-yazi); letter-spacing: .12em; color: var(--st-l); }
.ae-stm .cefr-aciklama, .ae-st .cefr-aciklama { display: block; margin: 8px 0 0; font: 600 12.5px/1.4 var(--st-yazi); color: var(--st-soluk); }
@container cefr (max-width: 400px) {
  .ae-stm .cefr-kutular li, .ae-st .cefr-kutular li { width: 30px; height: 30px; font-size: 11.5px; }
  .ae-stm .cefr-kutular, .ae-st .cefr-kutular { gap: 4px; }
}

/* ---------- Soru ekranı ---------- */
.ae-stm .ae-stm-soru-alan { display: flex; flex-direction: column; gap: 18px; }
.ae-stm .ae-stm-metin { position: relative; display: block; margin-top: 4px; padding: 18px 20px; border-radius: 16px; background: var(--st-yuzey); box-shadow: inset 0 0 0 1px var(--st-cerceve);
  font-size: 16.5px; line-height: 1.65; white-space: pre-line; }
.ae-stm .ae-stm-metin .kas { margin-bottom: 8px; font-size: 11.5px; color: var(--st-ikincil); }
.ae-stm .ae-stm-metin .kas::before { display: none; }
.ae-stm .ae-stm-soru { display: block; margin: 0; font-family: var(--st-yazi) !important; font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.015em; color: var(--st-l); white-space: pre-line; outline: none; }
.ae-stm .ae-stm-siklar { display: grid; gap: 10px; counter-reset: sik; }
.ae-stm .ae-stm-siklar button { counter-increment: sik; display: flex; align-items: center; gap: 14px; width: 100%; min-height: 58px; margin: 0; padding: 10px 16px 10px 12px;
  border: 0; border-radius: 16px; background: #fff; box-shadow: inset 0 0 0 1.5px var(--st-cerceve-k); color: var(--st-metin); text-align: left;
  font: 600 16px/1.35 var(--st-yazi); cursor: pointer; transition: box-shadow .2s, background .2s, color .2s, transform .25s var(--st-yay); }
.ae-stm .ae-stm-siklar button::before { content: counter(sik, upper-alpha); flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--st-yuzey); color: var(--st-l); font-size: 13.5px; font-weight: 800; transition: background .2s, color .2s; }
.ae-stm .ae-stm-siklar button:hover { box-shadow: inset 0 0 0 1.5px var(--st-m), 0 10px 22px -16px rgba(15, 42, 95, .5); transform: translateY(-1px); }
.ae-stm .ae-stm-siklar button:hover::before { background: var(--st-acik); color: var(--st-m); }
.ae-stm .ae-stm-siklar button.selected { background: var(--st-l); color: #fff; box-shadow: 0 14px 28px -16px rgba(15, 42, 95, .8); }
.ae-stm .ae-stm-siklar button.selected::before { background: var(--st-s); color: var(--st-l); }
.ae-stm .ae-stm-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 18px; border-top: 1px solid var(--st-cerceve); }
.ae-stm .ae-stm-nav .sag-dugmeler { display: flex; gap: 8px; margin-left: auto; }

/* Sıkı yerleşim (P160): metin, soru, dört şık ve düğmeler kaydırmadan sığar */
.ae-stm .ae-stm-soru-ekran.sik { gap: 12px; padding: 16px 24px 16px; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-soru-alan { gap: 12px; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-metin { margin-top: 8px; padding: 14px 16px 10px; font-size: 15.5px; line-height: 1.5; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-metin .kas { position: absolute; top: -9px; left: 12px; margin: 0; padding: 0 8px; border-radius: 6px; background: #fff; font-size: 11px; line-height: 18px; }
.ae-stm .ae-stm-soru-ekran.uzun .ae-stm-metin { white-space: normal; }
.ae-stm .ae-stm-soru-ekran.uzun .ae-stm-metin p + p { margin-top: 6px; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-soru { font-size: 17.5px; line-height: 1.35; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar { gap: 7px; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar button { min-height: 46px; padding: 6px 14px 6px 8px; gap: 12px; border-radius: 14px; font-size: 15px; line-height: 1.3; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar button::before { width: 30px; height: 30px; font-size: 12.5px; }
.ae-stm .ae-stm-soru-ekran.sik .ae-stm-nav { padding-top: 12px; }
.ae-stm .ae-stm-soru-ekran.sik .dugme { min-height: 46px; }
.ae-stm.ae-stm-sik .ae-stm-bant { min-height: 56px; padding-top: 6px; padding-bottom: 6px; }
.ae-stm.ae-stm-sik .ae-stm-ilerleme { top: 56px; }
.ae-stm.ae-stm-sik .ae-stm-bant img { width: 22px; }
.ae-stm.anim-soru .ae-stm-soru-ekran.ayni-metin .ae-stm-metin { animation: none; }

/* ---------- Bitirme onayı ve kapatma uyarısı ---------- */
.ae-stm .ae-stm-ust { position: absolute; inset: 0; z-index: 5; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(10, 29, 69, .5);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.ae-stm .ae-stm-ust-kutu { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; padding: 28px; border-radius: 24px; background: #fff; box-shadow: var(--st-golge); }
.ae-stm .ae-stm-ust-kutu h3 { margin: 0; font-family: var(--st-yazi) !important; font-weight: 800; font-size: 24px; line-height: 1.2; letter-spacing: -.025em; color: var(--st-l); }
.ae-stm .ae-stm-ust-kutu p { margin: 0; color: var(--st-ikincil); }
.ae-stm .ae-stm-ust-kutu p b { color: var(--st-l); font-weight: 800; font-variant-numeric: tabular-nums; }
.ae-stm .ae-stm-ust-kutu .yan { display: flex; gap: 10px; margin-top: 8px; }
.ae-stm .ae-stm-ust-kutu .yan .dugme { flex: 1; padding: 0 16px; }
.ae-stm .ae-stm-ust-kutu.kapat h3 { font-size: 19px; line-height: 1.4; }
.ae-stm .ae-stm-ust-kutu .dikey { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }

/* ---------- Bitiş ve form ---------- */
.ae-stm .bitis-ust { display: flex; align-items: center; gap: 16px; }
.ae-stm .bitis-isaret { flex: none; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--st-acik); }
.ae-stm .bitis-isaret svg { width: 44px; height: 44px; }
.ae-stm .bitis-isaret .halka { fill: none; stroke: var(--st-m); stroke-width: 2.5; }
.ae-stm .bitis-isaret .tik { fill: none; stroke: var(--st-l); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30; stroke-dashoffset: 0; }
.ae-stm .alanlar { display: grid; gap: 16px; }
.ae-stm .ae-stm-kvkk { display: flex; align-items: flex-start; gap: 12px; min-height: 44px; padding: 4px 0; font-size: 14.5px; line-height: 1.5; color: var(--st-metin); cursor: pointer; }
.ae-stm .ae-stm-kvkk input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--st-l); cursor: pointer; }
.ae-stm .ae-stm-kvkk a { color: var(--st-m); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ae-stm .ae-stm-kvkk.hatali input { outline: 2px solid var(--st-hata); outline-offset: 2px; }
.ae-stm .alan-hata, .ae-stm .ae-hata { display: block; margin: 0; padding: 10px 14px; border-radius: 12px; background: var(--st-hata-z); color: var(--st-hata); font: 600 14px/1.5 var(--st-yazi); }
.ae-stm .alan-hata a { color: inherit; font-weight: 800; text-decoration: underline; }
.ae-stm .ae-hata button { display: inline-block; margin: 8px 0 0; padding: 6px 12px; border: 1.5px solid var(--st-hata); border-radius: 999px; background: #fff; color: var(--st-hata); font: 700 13px/1.3 var(--st-yazi); cursor: pointer; }
.ae-stm .ae-hata br { display: block; content: ""; }
.ae-stm .ae-stm-girdi.hatali, .ae-stm .ae-hatali { border-color: var(--st-hata) !important; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12) !important; }

/* ---------- Teşekkür ---------- */
.ae-stm .ae-stm-tesekkur { align-items: flex-start; }
.ae-stm .tamam-isaret { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--st-l); color: var(--st-s); box-shadow: 0 0 0 8px var(--st-acik); }
.ae-stm .tamam-isaret svg { width: 30px; height: 30px; }
.ae-stm .iletisim { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; width: 100%; }
.ae-stm .iletisim a { display: grid; grid-template-columns: 46px 1fr; align-items: center; gap: 14px; min-height: 78px; margin: 0; padding: 14px 16px; border-radius: 18px;
  background: #fff; box-shadow: inset 0 0 0 1.5px var(--st-cerceve-k); color: var(--st-metin); text-decoration: none; transition: box-shadow .25s, transform .25s var(--st-yay); }
.ae-stm .iletisim a:hover { box-shadow: inset 0 0 0 1.5px var(--st-l), 0 14px 26px -18px rgba(15, 42, 95, .6); transform: translateY(-2px); }
.ae-stm .iletisim .ikon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--st-l); color: #fff; }
.ae-stm .iletisim a[href*="wa.me"] .ikon { background: var(--st-wa); }
.ae-stm .iletisim .ikon svg { width: 20px; height: 20px; }
.ae-stm .iletisim .ilet-metin { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ae-stm .iletisim .ilet-metin small { font-size: 13px; font-weight: 600; color: var(--st-ikincil); }
.ae-stm .iletisim .ilet-metin b { font-size: 17px; font-weight: 800; letter-spacing: -.01em; color: var(--st-l); font-variant-numeric: tabular-nums; white-space: nowrap; }
.ae-stm .ae-stm-tesekkur .dugme-yazi { align-self: center; }

/* ---------- Telefon: alttan açılan tam genişlik pencere ---------- */
@media (max-width: 600px) {
  .ae-stm { align-items: flex-end; padding: 0; }
  .ae-stm .ae-stm-pencere, .ae-stm .ae-stm-pencere.genis { max-width: none; max-height: calc(100vh - 12px); max-height: calc(100dvh - 12px); border-radius: 24px 24px 0 0; }
  .ae-stm .ae-stm-bant { min-height: 60px; padding-left: 16px; }
  .ae-stm .ae-stm-ilerleme { top: 60px; }
  .ae-stm .ae-stm-ekran { gap: 16px; padding: 22px 18px 24px; }
  .ae-stm h2 { font-size: 28px; }
  .ae-stm .giris-metni { font-size: 15px; }
  .ae-stm .ae-stm-soru { font-size: 18px; }
  .ae-stm .ae-stm-metin { padding: 14px; font-size: 16px; }
  .ae-stm .iletisim { grid-template-columns: 1fr; }
  .ae-stm .ae-stm-ust-kutu { padding: 22px; }
  .ae-stm.ae-stm-sik .ae-stm-pencere { height: 100vh; height: 100dvh; max-height: 100vh; max-height: 100dvh; border-radius: 0; }
  /* telefonda sorular tam ekran; düğmeler başparmağın ulaştığı alta yaslanır */
  .ae-stm.ae-stm-sik .ae-stm-pencere { display: flex; flex-direction: column; }
  .ae-stm.ae-stm-sik .ae-stm-soru-ekran.sik { flex: 1 0 auto; }
  .ae-stm.ae-stm-sik .ae-stm-nav { margin-top: auto; }
  .ae-stm.ae-stm-sik .ae-stm-bant { min-height: 50px; padding-left: 12px; }
  .ae-stm.ae-stm-sik .ae-stm-ilerleme { top: 50px; }
  .ae-stm .ae-stm-soru-ekran.sik { gap: 8px; padding: 10px 12px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-soru-alan { gap: 8px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar { gap: 6px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar button { min-height: 44px; padding: 5px 12px 5px 6px; gap: 10px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-siklar button::before { width: 28px; height: 28px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-metin { padding: 11px 12px 8px; font-size: 15px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-soru { font-size: 16px; }
  .ae-stm .ae-stm-soru-ekran.sik .ae-stm-nav { padding-top: 8px; }
  .ae-stm .ae-stm-soru-ekran.sik .dugme { min-height: 44px; padding: 0 18px; }
}

/* ---------- Animasyonlar (yalnız transform ve opacity) ---------- */
@keyframes st-perde { from { opacity: 0; } }
@keyframes st-acil { from { opacity: 0; transform: translateY(18px) scale(.97); } }
@keyframes st-alttan { from { transform: translateY(100%); } }
@keyframes st-soru { from { opacity: 0; transform: translateX(18px); } }
@keyframes st-sik { 0% { transform: scale(1); } 45% { transform: scale(1.18); } 100% { transform: scale(1); } }
@keyframes st-dol { from { transform: scaleX(var(--onceki, .2)); } to { transform: scaleX(1); } }
@keyframes st-halka { from { opacity: 0; transform: scale(.5) rotate(-30deg); } }
@keyframes st-tik { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes st-yukari { from { opacity: 0; transform: translateY(10px); } }
.ae-stm.anim-acilis .ae-stm-perde { animation: st-perde .25s ease-out both; }
.ae-stm.anim-acilis .ae-stm-pencere { animation: st-acil .38s var(--st-yay) both; }
.ae-stm.anim-soru .ae-stm-soru-alan > * { animation: st-soru .26s var(--st-yay) both; }
.ae-stm.anim-soru .ae-stm-siklar button { animation: st-soru .3s var(--st-yay) both; }
.ae-stm.anim-soru .ae-stm-siklar button:nth-child(2) { animation-delay: .03s; }
.ae-stm.anim-soru .ae-stm-siklar button:nth-child(3) { animation-delay: .06s; }
.ae-stm.anim-soru .ae-stm-siklar button:nth-child(4) { animation-delay: .09s; }
.ae-stm .ae-stm-siklar button.selected::before { animation: st-sik .22s ease-out; }
.ae-stm.anim-bitis .ae-stm-ilerleme i { animation: st-dol .45s cubic-bezier(.4, 0, .2, 1) both; }
.ae-stm.anim-bitis .ae-stm-ilerleme.tam::after { animation: st-perde .3s ease-out .4s both; }
.ae-stm.anim-bitis .bitis-isaret svg { animation: st-halka .4s var(--st-yay) .38s both; }
.ae-stm.anim-bitis .bitis-isaret .tik { animation: st-tik .32s ease-out .66s both; }
.ae-stm.anim-bitis .ae-stm-form .bas > p, .ae-stm.anim-bitis .ae-stm-form .alanlar, .ae-stm.anim-bitis .ae-stm-form .dugme-ana { animation: st-yukari .3s ease-out .78s both; }
.ae-stm.anim-ust .ae-stm-ust-kutu { animation: st-acil .26s var(--st-yay) both; }
@media (max-width: 600px) { .ae-stm.anim-acilis .ae-stm-pencere { animation: st-alttan .42s var(--st-yay) both; } }

/* =====================================================================
   SAYFADAKİ BAŞLANGIÇ KARTI (.ae-st): dil seçimi + "Teste başla". Betik kartı tanır (dil ön seçimi, bilgi satırı, düğme).
   ===================================================================== */
.ae-st { all: revert; position: relative; display: block; width: 100%; max-width: 440px; margin: 0; padding: 0; border-radius: 28px; background: #fff;
  box-shadow: 0 30px 60px -32px rgba(15, 42, 95, .45), 0 0 0 1px var(--st-cerceve); font-family: var(--st-yazi); font-size: 16px; font-weight: 500; line-height: 1.5;
  color: var(--st-metin); text-align: left; box-sizing: border-box; isolation: isolate; }
.ae-st .ae-st-govde { display: flex; flex-direction: column; gap: 16px; padding: 28px 28px 26px; }
.ae-st p { margin: 0; }
.ae-st .kas { display: inline-flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--st-m); }
.ae-st .kas::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; }
.ae-st .ae-st-baslik { margin: -4px 0 0; font: 800 26px/1.12 var(--st-yazi); letter-spacing: -.03em; color: var(--st-l); }
.ae-st label { display: block; margin: 0 0 8px; font-size: 14.5px; font-weight: 700; color: var(--st-metin); }
.ae-st select { display: block; width: 100%; min-height: 54px; margin: 0; padding: 12px 48px 12px 16px; border: 1.5px solid var(--st-cerceve-k); border-radius: 14px;
  background-color: var(--st-yuzey); color: var(--st-metin); font: 700 16px/1.3 var(--st-yazi); transition: border-color .2s, box-shadow .2s; }
.ae-st select:hover { border-color: #B5C1D8; }
.ae-st button.basla { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 56px; margin: 0; padding: 0 24px; border: 0; border-radius: 999px;
  background: linear-gradient(180deg, #1B3D84, var(--st-l)); color: #fff; font: 700 16.5px/1.2 var(--st-yazi); cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 14px 28px -16px rgba(15, 42, 95, .75); transition: background .25s, transform .25s var(--st-yay); }
.ae-st button.basla:hover { background: linear-gradient(180deg, #2B5BD2, #1E48B4); transform: translateY(-1px); }
.ae-st button.basla svg { width: 18px; height: 18px; transition: transform .3s var(--st-yay); }
.ae-st button.basla:hover svg { transform: translateX(4px); }
/* süs: kartın köşesinde kesik çizgili yörünge ve sarı nokta */
.ae-st::before { content: ""; position: absolute; z-index: -1; right: -26px; top: -26px; width: 120px; height: 120px; border-radius: 50%; border: 1.5px dashed rgba(36, 89, 214, .28); }
.ae-st::after { content: ""; position: absolute; right: 22px; top: -7px; width: 14px; height: 14px; border-radius: 50%; background: var(--st-s); box-shadow: 0 0 0 5px #fff; }
@media (max-width: 600px) { .ae-st { max-width: none; border-radius: 24px; } .ae-st .ae-st-govde { padding: 22px 20px 22px; } .ae-st .ae-st-baslik { font-size: 23px; } }

@media (prefers-reduced-motion: reduce) {
  .ae-stm *, .ae-stm *::before, .ae-stm *::after, .ae-st *, .ae-st *::before, .ae-st *::after { animation: none !important; transition: none !important; }
}