/*
 * Elmadil Dersler — stiller
 * Kısa kod HTML'i elmadil-dersler.php, çalışma anında eklenen öğeler assets/eld.js içindedir.
 * Görünüm Elmadil Seviye Tespit (elst.css) ile aynıdır; değişkenler --st-* yerine --eld-*.
 * Renkler temanın --kb-h-* değişkenlerine yedekli bağlanır; gece modu html[data-kb-theme="dark"].
 * .eld-sayfa ve .eld-arsiv .eld kartının dışında olabilir; .eld-klon gövdeye eklenir.
 */

/* ------------------------------------------------------------------
 * Değişkenler
 * ---------------------------------------------------------------- */

.eld,
.eld-sayfa,
.eld-arsiv,
.eld-gramer,
.eld-klon {
  --eld-marka: var(--kb-h-bg5, #5b3fe0);
  --eld-marka-hover: #4a2fcc;
  --eld-marka-yazi: var(--kb-h-bg5, #5b3fe0);
  --eld-marka-acik: #f1eeff;
  --eld-vurgu: var(--kb-h-accent, #ef802e);
  --eld-vurgu-hover: #f48f42;
  --eld-vurgu-yazi: #b4530f;
  --eld-vurgu-acik: #fff4ea;
  --eld-metin: var(--kb-h-text, #1d1846);
  --eld-soluk: var(--kb-h-text2, #5c5878);
  --eld-kagit: var(--kb-h-bg2, #f6f4ff);
  --eld-beyaz: var(--kb-h-bg1, #fff);
  --eld-cizgi: var(--kb-h-line, #e4e0f5);
  --eld-koyu: var(--kb-h-bg4, #1d1846);
  --eld-murekkep: #1d1846;
  --eld-yesil: #12805c;
  --eld-yesil-acik: #effaf5;
  --eld-kirmizi: #b42318;
  --eld-kirmizi-acik: #fdeeec;
  --eld-odak: var(--kb-h-bg5, #5b3fe0);
  --eld-golge: 0 18px 48px rgba(43, 28, 120, 0.10), 0 2px 8px rgba(43, 28, 120, 0.06);
  --eld-golge-kucuk: 0 6px 18px rgba(91, 63, 224, 0.22);
  color-scheme: light;
}

html[data-kb-theme="dark"] .eld,
html[data-kb-theme="dark"] .eld-sayfa,
html[data-kb-theme="dark"] .eld-arsiv,
html[data-kb-theme="dark"] .eld-gramer,
html[data-kb-theme="dark"] .eld-klon {
  --eld-marka: #6c55f2;
  --eld-marka-hover: #7d68ff;
  --eld-marka-yazi: #b3a6ff;
  --eld-marka-acik: rgba(108, 85, 242, 0.18);
  --eld-vurgu: #ff9a4d;
  --eld-vurgu-hover: #ffab69;
  --eld-vurgu-yazi: #ff9a4d;
  --eld-vurgu-acik: rgba(255, 154, 77, 0.14);
  --eld-metin: #efedfc;
  --eld-soluk: #b9b5d8;
  --eld-kagit: #16132f;
  --eld-beyaz: #1c1840;
  --eld-cizgi: #2f2a5c;
  --eld-koyu: #2a2463;
  --eld-yesil: #4fd39e;
  --eld-yesil-acik: rgba(79, 211, 158, 0.12);
  --eld-kirmizi: #ff8f86;
  --eld-kirmizi-acik: rgba(255, 143, 134, 0.12);
  --eld-odak: #b3a6ff;
  --eld-golge: 0 18px 48px rgba(0, 0, 0, 0.40), 0 2px 8px rgba(0, 0, 0, 0.25);
  --eld-golge-kucuk: 0 6px 18px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

/* ------------------------------------------------------------------
 * Kart ve tema/Elementor nötrleme
 * ---------------------------------------------------------------- */

.eld {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(18px, 4.5vw, 44px);
  background-color: var(--eld-beyaz);
  border: 1px solid var(--eld-cizgi);
  border-radius: 28px;
  box-shadow: var(--eld-golge);
  color: var(--eld-metin);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.eld-sayfa,
.eld-arsiv {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  color: var(--eld-metin);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.eld-sayfa {
  max-width: 780px;
  padding: 0 0 clamp(16px, 3vw, 28px);
}

.eld-arsiv {
  max-width: 1100px;
}

.eld *,
.eld *::before,
.eld *::after,
.eld-sayfa *,
.eld-sayfa *::before,
.eld-sayfa *::after,
.eld-arsiv *,
.eld-arsiv *::before,
.eld-arsiv *::after {
  box-sizing: border-box;
}

.eld [hidden],
.eld[hidden],
.eld-sayfa [hidden],
.eld-arsiv [hidden] {
  display: none !important;
}

.eld h2,
.eld h3,
.eld p,
.eld ul,
.eld ol,
.eld li,
.eld details,
.eld summary,
.eld table,
.eld-sayfa h1,
.eld-sayfa p,
.eld-sayfa ul,
.eld-sayfa li,
.eld-arsiv h2,
.eld-arsiv h3,
.eld-arsiv p,
.eld-arsiv ul,
.eld-arsiv li {
  margin: 0;
  padding: 0;
}

.eld h2,
.eld h3,
.eld-sayfa h1,
.eld-arsiv h2,
.eld-arsiv h3 {
  font-family: inherit;
  text-transform: none;
  letter-spacing: normal;
  color: inherit;
}

.eld button,
.eld input,
.eld select {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  line-height: 1.4;
  text-transform: none;
  letter-spacing: normal;
  text-shadow: none;
  box-shadow: none;
}

.eld a,
.eld-sayfa a,
.eld-arsiv a {
  box-shadow: none;
  text-transform: none;
}

.eld label {
  vertical-align: baseline;
}

/* Odak halkası: yalnız klavye ile görünür. */
.eld :focus-visible,
.eld-sayfa :focus-visible,
.eld-arsiv :focus-visible {
  outline: 3px solid var(--eld-odak);
  outline-offset: 3px;
}

.eld [tabindex="-1"]:focus:not(:focus-visible) {
  outline: none;
}

/* Ekran okuyucuya özel metin. */
.eld .eld-gizli,
.eld-sayfa .eld-gizli,
.eld-arsiv .eld-gizli {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.eld[aria-busy="true"] .eld-secenek {
  cursor: progress;
}

.eld .eld-ekran {
  min-width: 0;
}

/* ------------------------------------------------------------------
 * Düğmeler
 * ---------------------------------------------------------------- */

.eld .eld-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 56px;
  max-width: 100%;
  padding: 12px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.eld .eld-dugme:active:not(:disabled) {
  transform: translateY(1px);
}

.eld .eld-dugme-ana,
.eld .eld-dugme-ana:visited,
.eld .eld-dugme-ana:focus {
  background-color: var(--eld-marka);
  border-color: var(--eld-marka);
  color: #fff;
  box-shadow: var(--eld-golge-kucuk);
}

.eld .eld-dugme-ana:hover:not(:disabled) {
  background-color: var(--eld-marka-hover);
  border-color: var(--eld-marka-hover);
  color: #fff;
}

.eld .eld-dugme-ikincil,
.eld .eld-dugme-ikincil:visited,
.eld .eld-dugme-ikincil:focus {
  background-color: transparent;
  border-color: var(--eld-cizgi);
  color: var(--eld-metin);
}

.eld .eld-dugme-ikincil:hover:not(:disabled) {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  color: var(--eld-marka-yazi);
}

.eld .eld-dugme:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  box-shadow: none;
}

/* ------------------------------------------------------------------
 * Başlık, üst şerit, ilerleme
 * ---------------------------------------------------------------- */

.eld .eld-baslik {
  color: var(--eld-metin);
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.125rem);
  font-weight: 800;
  line-height: 1.25;
}

.eld .eld-aciklama {
  margin-top: 12px;
  color: var(--eld-soluk);
  font-size: 1.0625rem;
}

.eld .eld-ust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 12px;
}

.eld .eld-rozet-kucuk {
  display: inline-block;
  padding: 6px 14px;
  background-color: var(--eld-marka-acik);
  border-radius: 999px;
  color: var(--eld-marka-yazi);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.eld .eld-sayac {
  color: var(--eld-soluk);
  font-size: 0.95rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eld .eld-ilerleme {
  height: 10px;
  margin: 14px 0 28px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 999px;
  overflow: hidden;
}

.eld .eld-ilerleme-dolgu,
.eld-arsiv .eld-ilerleme-dolgu {
  display: block;
  width: 0;
  height: 100%;
  background-color: var(--eld-marka);
  background-image: linear-gradient(90deg, var(--eld-marka), var(--eld-vurgu));
  border-radius: 999px;
  transition: width 0.3s ease;
}

.eld .eld-soru-metin {
  margin-bottom: 24px;
  color: var(--eld-metin);
  font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2rem);
  font-weight: 800;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ------------------------------------------------------------------
 * Çoktan seçmeli
 * ---------------------------------------------------------------- */

.eld .eld-secenekler {
  display: grid;
  gap: 12px;
  min-width: 0;
}

.eld .eld-secenek,
.eld .eld-secenek:focus {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  min-height: 64px;
  padding: 12px 18px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 16px;
  color: var(--eld-metin);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.4;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.eld .eld-secenek:hover:not(:disabled) {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  color: var(--eld-metin);
}

.eld .eld-secenek.eld-secili,
.eld .eld-secenek.eld-secili:focus,
.eld .eld-secenek.is-secili,
.eld .eld-secenek[aria-checked="true"] {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  color: var(--eld-metin);
  box-shadow: 0 0 0 3px var(--eld-marka-acik), var(--eld-golge-kucuk);
}

.eld .eld-secenek-harf {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: var(--eld-kagit);
  border: 2px solid var(--eld-cizgi);
  border-radius: 50%;
  color: var(--eld-marka-yazi);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eld .eld-secenek.eld-secili .eld-secenek-harf,
.eld .eld-secenek.is-secili .eld-secenek-harf,
.eld .eld-secenek[aria-checked="true"] .eld-secenek-harf {
  background-color: var(--eld-marka);
  border-color: var(--eld-marka);
  color: #fff;
}

.eld .eld-secenek-metin {
  flex: 1 1 auto;
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Doğru / yanlış durumu: renge ek olarak işaret (✓ / ✗) ve çizgi biçimi */
.eld .eld-secenek.eld-dogru,
.eld .eld-secenek.eld-dogru:hover,
.eld .eld-secenek.eld-dogru:focus {
  background-color: var(--eld-yesil-acik);
  border-color: var(--eld-yesil);
  color: var(--eld-metin);
  box-shadow: none;
}

.eld .eld-secenek.eld-yanlis,
.eld .eld-secenek.eld-yanlis:hover,
.eld .eld-secenek.eld-yanlis:focus {
  background-color: var(--eld-kirmizi-acik);
  border-color: var(--eld-kirmizi);
  border-style: dashed;
  color: var(--eld-metin);
  box-shadow: none;
}

.eld .eld-secenek.eld-dogru::after,
.eld .eld-secenek.eld-yanlis::after {
  flex: none;
  margin-left: auto;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}

.eld .eld-secenek.eld-dogru::after {
  content: "\2713";
  content: "\2713" / "";
  color: var(--eld-yesil);
}

.eld .eld-secenek.eld-yanlis::after {
  content: "\2717";
  content: "\2717" / "";
  color: var(--eld-kirmizi);
}

.eld .eld-secenek.eld-dogru .eld-secenek-harf {
  background-color: var(--eld-yesil);
  border-color: var(--eld-yesil);
  color: var(--eld-murekkep);
}

.eld .eld-secenek.eld-yanlis .eld-secenek-harf {
  background-color: var(--eld-kirmizi);
  border-color: var(--eld-kirmizi);
  color: var(--eld-murekkep);
}

.eld .eld-secenek.eld-yanlis .eld-secenek-metin {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

/* Geri bildirim kutusu */
.eld .eld-geri-kutu {
  margin-top: 20px;
  padding: 14px 18px;
  background-color: var(--eld-kagit);
  border: 2px solid var(--eld-cizgi);
  border-left-width: 6px;
  border-radius: 16px;
  color: var(--eld-metin);
  font-size: 0.975rem;
  line-height: 1.55;
}

.eld .eld-geri-dogru {
  background-color: var(--eld-yesil-acik);
  border-color: var(--eld-yesil);
}

.eld .eld-geri-yanlis {
  background-color: var(--eld-kirmizi-acik);
  border-color: var(--eld-kirmizi);
}

.eld .eld-geri-baslik {
  display: block;
  margin-bottom: 4px;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
}

.eld .eld-geri-dogru .eld-geri-baslik {
  color: var(--eld-yesil);
}

.eld .eld-geri-yanlis .eld-geri-baslik {
  color: var(--eld-kirmizi);
}

/* ------------------------------------------------------------------
 * Kelime havuzu, yuva, eşleştirme, sıralama
 * ---------------------------------------------------------------- */

.eld .eld-kelime-havuz {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  min-width: 0;
  min-height: 68px;
  margin-top: 16px;
  padding: 14px;
  background-color: var(--eld-kagit);
  border: 2px dashed var(--eld-cizgi);
  border-radius: 20px;
}

.eld .eld-kelime,
.eld .eld-kelime:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 8px 18px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 999px;
  color: var(--eld-metin);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: grab;
  touch-action: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eld .eld-kelime:hover {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  color: var(--eld-metin);
}

.eld .eld-kelime:active {
  cursor: grabbing;
}

.eld .eld-kelime.eld-secili,
.eld .eld-kelime.eld-secili:hover,
.eld .eld-kelime.eld-secili:focus {
  background-color: var(--eld-marka);
  border-color: var(--eld-marka);
  color: #fff;
  box-shadow: var(--eld-golge-kucuk);
}

.eld .eld-kelime.is-kullanildi,
.eld .eld-kelime.is-kullanildi:hover,
.eld .eld-kelime.is-kullanildi:focus {
  background-color: var(--eld-kagit);
  border-style: dashed;
  border-color: var(--eld-cizgi);
  color: var(--eld-soluk);
  box-shadow: none;
}

.eld .eld-kelime.eld-dogru,
.eld .eld-kelime.eld-dogru:hover,
.eld .eld-kelime.eld-dogru:focus {
  background-color: var(--eld-yesil-acik);
  border-color: var(--eld-yesil);
  border-style: solid;
  color: var(--eld-yesil);
  box-shadow: none;
}

.eld .eld-kelime.eld-yanlis,
.eld .eld-kelime.eld-yanlis:hover,
.eld .eld-kelime.eld-yanlis:focus {
  background-color: var(--eld-kirmizi-acik);
  border-color: var(--eld-kirmizi);
  border-style: dashed;
  color: var(--eld-kirmizi);
  box-shadow: none;
}

.eld .eld-kelime.eld-dogru::after,
.eld .eld-kelime.eld-yanlis::after {
  margin-left: 8px;
  font-weight: 800;
}

.eld .eld-kelime.eld-dogru::after {
  content: "\2713";
  content: "\2713" / "";
}

.eld .eld-kelime.eld-yanlis::after {
  content: "\2717";
  content: "\2717" / "";
}

/* Cümledeki boşluk yuvası */
.eld .eld-yuva,
.eld .eld-yuva:focus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  margin: 0 0.15em;
  padding: 4px 12px;
  background-color: transparent;
  border: 0;
  border-bottom: 3px dashed var(--eld-vurgu);
  border-radius: 8px 8px 0 0;
  color: var(--eld-metin);
  font-size: inherit;
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: middle;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.eld .eld-yuva:not(.is-dolu) {
  min-width: 4.5em;
}

.eld .eld-yuva:hover,
.eld .eld-yuva.eld-hedef,
.eld .eld-yuva.eld-hedef:hover,
.eld .eld-yuva.eld-hedef:focus {
  background-color: var(--eld-vurgu-acik);
  border-bottom-style: solid;
  color: var(--eld-metin);
}

.eld .eld-yuva.eld-hedef,
.eld .eld-yuva.eld-hedef:hover,
.eld .eld-yuva.eld-hedef:focus {
  background-color: var(--eld-marka-acik);
  border-bottom-color: var(--eld-marka);
}

.eld .eld-yuva.is-dolu,
.eld .eld-yuva.is-dolu:hover,
.eld .eld-yuva.is-dolu:focus {
  background-color: var(--eld-marka-acik);
  border-bottom-style: solid;
  border-bottom-color: var(--eld-marka);
  color: var(--eld-metin);
}

.eld .eld-yuva.eld-dogru,
.eld .eld-yuva.eld-dogru:hover,
.eld .eld-yuva.eld-dogru:focus {
  background-color: var(--eld-yesil-acik);
  border-bottom-style: solid;
  border-bottom-color: var(--eld-yesil);
  color: var(--eld-yesil);
}

.eld .eld-yuva.eld-yanlis,
.eld .eld-yuva.eld-yanlis:hover,
.eld .eld-yuva.eld-yanlis:focus {
  background-color: var(--eld-kirmizi-acik);
  border-bottom-style: dashed;
  border-bottom-color: var(--eld-kirmizi);
  color: var(--eld-kirmizi);
}

.eld .eld-yuva.eld-dogru::after,
.eld .eld-yuva.eld-yanlis::after {
  margin-left: 8px;
  font-weight: 800;
}

.eld .eld-yuva.eld-dogru::after {
  content: "\2713";
  content: "\2713" / "";
}

.eld .eld-yuva.eld-yanlis::after {
  content: "\2717";
  content: "\2717" / "";
}

.eld .eld-yuva-etiket {
  display: inline-block;
  margin-right: 6px;
  color: var(--eld-soluk);
  font-size: 0.75em;
  font-weight: 700;
  line-height: 1.2;
}

/* Eşleştirme satırı: sol metin + yuva */
.eld .eld-esles-satir {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(9em, 45%);
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin-top: 12px;
  padding: 12px 16px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 16px;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.eld .eld-esles-satir .eld-yuva {
  width: 100%;
}

/* Sıralama kutusu */
.eld .eld-sira-satir {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  min-height: 76px;
  margin-top: 16px;
  padding: 12px 14px;
  background-color: var(--eld-beyaz);
  border: 2px dashed var(--eld-cizgi);
  border-radius: 16px;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.eld .eld-sira-satir:empty::before {
  content: "Kelimeleri buraya sırala";
  color: var(--eld-soluk);
  font-size: 1rem;
  font-weight: 600;
}

.eld .eld-sira-satir:not(:has(.eld-kelime)):not(:has(.eld-ekleme))::before {
  content: "Kelimeleri buraya sırala";
  color: var(--eld-soluk);
  font-size: 1rem;
  font-weight: 600;
}

.eld .eld-sira-satir.eld-hedef {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  border-style: solid;
}

/* Ekleme noktası */
.eld .eld-ekleme {
  display: inline-block;
  flex: none;
  width: 3px;
  height: 1.6em;
  background-color: var(--eld-marka);
  border-radius: 2px;
  animation: eld-yanip 1s steps(2, start) infinite;
}

@keyframes eld-yanip {
  to {
    visibility: hidden;
  }
}

/* Sürüklenen kopya (gövdeye eklenir) */
.eld-klon,
.eld .eld-klon {
  position: fixed !important;
  z-index: 99999;
  margin: 0 !important;
  pointer-events: none !important;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 18px;
  background-color: var(--eld-marka-acik);
  border: 2px solid var(--eld-marka);
  border-radius: 999px;
  box-shadow: 0 14px 32px rgba(43, 28, 120, 0.30), 0 2px 8px rgba(43, 28, 120, 0.20);
  color: var(--eld-metin);
  font-family: inherit;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0.96;
  -webkit-user-select: none;
  user-select: none;
}

.eld .eld-hedef,
.eld .eld-secili {
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

/* ------------------------------------------------------------------
 * Boşluk doldurma (metin kutusu), ipucu
 * ---------------------------------------------------------------- */

.eld input.eld-bosluk-girdi {
  display: inline-block;
  width: 7em;
  min-width: 4.5em;
  max-width: 100%;
  min-height: 44px;
  margin: 0 0.15em;
  padding: 2px 10px;
  background-color: var(--eld-vurgu-acik);
  border: 0;
  border-bottom: 3px solid var(--eld-vurgu);
  border-radius: 8px 8px 0 0;
  color: var(--eld-metin);
  font-family: inherit;
  font-size: max(16px, 1em);
  font-weight: 800;
  line-height: 1.3;
  text-align: center;
  vertical-align: middle;
  outline: none;
  box-shadow: none;
  transition: background-color 0.18s ease, border-color 0.18s ease;
}

.eld input.eld-bosluk-girdi:hover,
.eld input.eld-bosluk-girdi:focus {
  background-color: var(--eld-marka-acik);
  border-bottom-color: var(--eld-marka);
  box-shadow: none;
  outline: none;
}

.eld input.eld-bosluk-girdi:focus-visible {
  outline: 3px solid var(--eld-odak);
  outline-offset: 2px;
}

.eld input.eld-bosluk-girdi.eld-dogru {
  background-color: var(--eld-yesil-acik);
  border-bottom-color: var(--eld-yesil);
  color: var(--eld-yesil);
}

.eld input.eld-bosluk-girdi.eld-yanlis {
  background-color: var(--eld-kirmizi-acik);
  border-bottom-style: dashed;
  border-bottom-color: var(--eld-kirmizi);
  color: var(--eld-kirmizi);
}

.eld input.eld-bosluk-girdi::placeholder {
  color: var(--eld-soluk);
  opacity: 1;
}

.eld .eld-ipucu {
  margin-top: 16px;
  padding: 10px 14px;
  background-color: var(--eld-marka-acik);
  border-left: 4px solid var(--eld-vurgu);
  border-radius: 12px;
  color: var(--eld-metin);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------
 * Aşama yolu
 * ---------------------------------------------------------------- */

.eld .eld-yol {
  display: grid;
  gap: 0;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: eld-yol;
}

.eld .eld-yol-oge {
  position: relative;
  min-width: 0;
  min-height: 44px;
  padding: 4px 0 22px 56px;
  color: var(--eld-metin);
  font-weight: 600;
  line-height: 1.5;
  list-style: none;
  counter-increment: eld-yol;
  overflow-wrap: anywhere;
}

.eld .eld-yol-oge::before {
  content: counter(eld-yol);
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 50%;
  color: var(--eld-soluk);
  font-size: 1rem;
  font-weight: 800;
  line-height: 1;
  z-index: 1;
}

.eld .eld-yol-oge::after {
  content: "";
  position: absolute;
  top: 42px;
  bottom: 4px;
  left: 18px;
  width: 2px;
  background-color: var(--eld-cizgi);
}

.eld .eld-yol-oge:last-child {
  padding-bottom: 4px;
}

.eld .eld-yol-oge:last-child::after {
  display: none;
}

.eld .eld-yol-oge a,
.eld .eld-yol-oge a:visited {
  color: var(--eld-marka-yazi);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Kilitli: kesikli daire, soluk metin */
.eld .eld-yol-oge-kilitli {
  color: var(--eld-soluk);
  font-weight: 500;
}

.eld .eld-yol-oge-kilitli::before {
  border-style: dashed;
  color: var(--eld-soluk);
}

/* Açık: dolu marka dairesi */
.eld .eld-yol-oge-acik::before {
  background-color: var(--eld-marka);
  border-color: var(--eld-marka);
  color: #fff;
  box-shadow: 0 0 0 4px var(--eld-marka-acik);
}

/* Geçti: onay işaretli yeşil daire */
.eld .eld-yol-oge-gecti::before {
  content: "\2713";
  background-color: var(--eld-yesil-acik);
  border-color: var(--eld-yesil);
  color: var(--eld-yesil);
}

.eld .eld-yol-oge-gecti::after {
  background-color: var(--eld-yesil);
}

/* ------------------------------------------------------------------
 * Sonuç
 * ---------------------------------------------------------------- */

.eld .eld-sonuc-rozet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 116px;
  height: 116px;
  max-width: 100%;
  padding: 0 20px;
  background-color: var(--eld-marka);
  background-image: linear-gradient(135deg, var(--eld-marka), var(--eld-marka-hover));
  border-radius: 999px;
  box-shadow: 0 0 0 8px var(--eld-vurgu-acik), var(--eld-golge-kucuk);
  color: #fff;
  font-size: 2rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Kural çubuğu: etiket + yüzde + bar */
.eld .eld-kural-cubuk {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
  color: var(--eld-metin);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.4;
}

.eld .eld-kural-cubuk + .eld-kural-cubuk {
  margin-top: 14px;
}

.eld .eld-kural-cubuk > :first-child {
  min-width: 0;
  overflow-wrap: anywhere;
}

.eld .eld-kural-cubuk > :nth-child(2) {
  color: var(--eld-soluk);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.eld .eld-kural-cubuk > :nth-child(n+3):not(.eld-kural-dolgu) {
  grid-column: 1 / -1;
  display: block;
  height: 10px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 999px;
  overflow: hidden;
}

.eld .eld-kural-cubuk > .eld-kural-dolgu {
  grid-column: 1 / -1;
  height: 10px;
}

.eld .eld-kural-dolgu {
  display: block;
  width: 0;
  height: 100%;
  min-width: 0;
  background-color: var(--eld-marka);
  background-image: linear-gradient(90deg, var(--eld-marka), var(--eld-marka-hover));
  border-radius: 999px;
  transition: width 0.3s ease;
}

/* Zayıf kural: turuncu + çizgili dolgu (renge ek olarak desen) */
.eld .eld-kural-cubuk.eld-kural-zayif > :first-child {
  color: var(--eld-vurgu-yazi);
}

.eld .eld-kural-zayif .eld-kural-dolgu,
.eld .eld-kural-dolgu.eld-kural-zayif {
  background-color: var(--eld-vurgu);
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0, rgba(255, 255, 255, 0.35) 6px, transparent 6px, transparent 12px);
}

/* Yanlışlarını incele */
.eld .eld-yanlislar {
  margin-top: 24px;
  padding-bottom: 4px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 20px;
  overflow: hidden;
}

.eld .eld-yanlislar summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 56px;
  margin-bottom: 4px;
  padding: 14px 20px;
  color: var(--eld-metin);
  font-weight: 700;
  line-height: 1.4;
  list-style: none;
  cursor: pointer;
}

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

.eld .eld-yanlislar summary::after {
  content: "";
  flex: none;
  width: 10px;
  height: 10px;
  margin-left: auto;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.2s ease;
}

.eld .eld-yanlislar[open] summary::after {
  transform: translateY(3px) rotate(-135deg);
}

.eld .eld-yanlislar summary:hover {
  background-color: var(--eld-marka-acik);
}

.eld .eld-yanlislar summary:focus-visible {
  outline-offset: -3px;
}

.eld .eld-yanlislar .eld-yanlis-oge {
  margin: 0 16px 12px;
}

.eld .eld-yanlis-oge {
  min-width: 0;
  padding: 16px 18px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 16px;
  color: var(--eld-metin);
  font-size: 0.95rem;
  line-height: 1.55;
  list-style: none;
  overflow-wrap: anywhere;
}

.eld .eld-yanlis-oge > * + * {
  margin-top: 6px;
}

/* ------------------------------------------------------------------
 * Notlar, uyarılar, hata, gezinme
 * ---------------------------------------------------------------- */

.eld .eld-not {
  color: var(--eld-soluk);
  font-size: 0.9rem;
  line-height: 1.5;
}

.eld .eld-uyari {
  margin-top: 16px;
  color: var(--eld-soluk);
  font-size: 0.9rem;
  line-height: 1.5;
}

.eld .eld-hata {
  margin-top: 16px;
  padding: 12px 16px;
  background-color: var(--eld-kirmizi-acik);
  border: 1px solid var(--eld-kirmizi);
  border-radius: 14px;
  color: var(--eld-kirmizi);
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.5;
}

.eld .eld-gezinme {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 28px;
}

/* ------------------------------------------------------------------
 * Anlatım ve bloklar
 * ---------------------------------------------------------------- */

.eld .eld-anlatim {
  min-width: 0;
  color: var(--eld-metin);
  font-size: 1.0625rem;
  line-height: 1.7;
}

.eld .eld-anlatim > * + * {
  margin-top: 14px;
}

.eld .eld-anlatim h2,
.eld .eld-anlatim h3 {
  margin-top: 24px;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}

.eld .eld-anlatim ul,
.eld .eld-anlatim ol {
  padding-left: 1.4em;
}

.eld .eld-anlatim ul {
  list-style: disc;
}

.eld .eld-anlatim ol {
  list-style: decimal;
}

.eld .eld-anlatim li {
  margin-top: 6px;
  padding: 0;
  list-style: inherit;
}

.eld .eld-anlatim a,
.eld .eld-anlatim a:visited {
  color: var(--eld-marka-yazi);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Kural: mor çerçeveli vurgu kutusu */
.eld .eld-blok-kural {
  padding: 16px 20px;
  background-color: var(--eld-marka-acik);
  border: 2px solid var(--eld-marka);
  border-radius: 16px;
  color: var(--eld-metin);
  line-height: 1.6;
}

.eld .eld-blok-kural > * + * {
  margin-top: 8px;
}

/* Dikkat: turuncu kutu; yanlış satır kırmızı üstü çizili, doğru satır yeşil */
.eld .eld-blok-dikkat {
  padding: 16px 20px;
  background-color: var(--eld-vurgu-acik);
  border: 2px solid var(--eld-vurgu);
  border-radius: 16px;
  color: var(--eld-metin);
  line-height: 1.6;
}

.eld .eld-blok-dikkat > * + * {
  margin-top: 8px;
}

.eld .eld-blok-dikkat .eld-yanlis,
.eld .eld-blok-dikkat .eld-dogru {
  display: block;
  padding: 4px 10px;
  border-radius: 8px;
  font-weight: 700;
}

.eld .eld-blok-dikkat .eld-yanlis {
  background-color: var(--eld-kirmizi-acik);
  color: var(--eld-kirmizi);
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.eld .eld-blok-dikkat .eld-dogru {
  background-color: var(--eld-yesil-acik);
  color: var(--eld-yesil);
  text-decoration: none;
}

.eld .eld-blok-dikkat .eld-yanlis::before {
  content: "\2717\00a0";
  display: inline-block;
  text-decoration: none;
}

.eld .eld-blok-dikkat .eld-dogru::before {
  content: "\2713\00a0";
}

/* Örnek: İngilizce en kalın, Türkçe soluk */
.eld .eld-blok-ornek {
  padding: 12px 18px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-left: 4px solid var(--eld-marka);
  border-radius: 12px;
  color: var(--eld-metin);
  line-height: 1.55;
}

.eld .eld-blok-ornek [lang],
.eld .eld-blok-ornek strong,
.eld .eld-blok-ornek b,
.eld .eld-blok-ornek .eld-en {
  font-weight: 800;
}

.eld .eld-blok-ornek [lang] {
  display: block;
}

.eld .eld-blok-ornek [lang="tr"],
.eld .eld-blok-ornek em,
.eld .eld-blok-ornek small,
.eld .eld-blok-ornek .eld-tr {
  color: var(--eld-soluk);
  font-style: normal;
  font-weight: 500;
}

/* Tablo: yatay kaydırma kutunun içinde kalır */
.eld .eld-tablo-sar {
  max-width: 100%;
  border: 1px solid var(--eld-cizgi);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.eld .eld-tablo-sar table {
  width: 100%;
  margin: 0;
  background-color: transparent;
  border: 0;
  border-collapse: collapse;
  border-spacing: 0;
  color: var(--eld-metin);
  font-size: 0.95rem;
  line-height: 1.5;
}

.eld .eld-tablo-sar th,
.eld .eld-tablo-sar td {
  padding: 10px 14px;
  background-color: transparent;
  border: 0;
  border-bottom: 1px solid var(--eld-cizgi);
  color: var(--eld-metin);
  font-size: inherit;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.eld .eld-tablo-sar th {
  background-color: var(--eld-kagit);
  font-weight: 800;
}

.eld .eld-tablo-sar tr:last-child td {
  border-bottom: 0;
}

/* Özet kartı */
.eld .eld-ozet-kart {
  margin-top: 28px;
  padding: clamp(20px, 4vw, 32px);
  background-color: var(--eld-koyu);
  background-image: radial-gradient(circle at 100% 0, rgba(108, 85, 242, 0.45), transparent 55%);
  border: 1px solid var(--eld-cizgi);
  border-radius: 24px;
  color: #fff;
}

.eld .eld-ozet-kart h2,
.eld .eld-ozet-kart h3 {
  color: #fff;
  font-size: clamp(1.25rem, 1.1rem + 0.7vw, 1.5rem);
  font-weight: 800;
  line-height: 1.3;
}

.eld .eld-ozet-kart p,
.eld .eld-ozet-kart li {
  margin-top: 8px;
  color: rgba(255, 255, 255, 0.9);
  font-size: 1rem;
}

.eld .eld-ozet-kart a,
.eld .eld-ozet-kart a:visited {
  color: #fff;
  text-decoration: underline;
}

.eld .eld-ozet-kart :focus-visible {
  outline-color: #fff;
}

/* ------------------------------------------------------------------
 * Tekil ders üst kısmı
 * ---------------------------------------------------------------- */

.eld-sayfa .eld-seviye-rozet {
  display: inline-block;
  max-width: 100%;
  margin-bottom: 12px;
  padding: 6px 14px;
  background-color: var(--eld-marka-acik);
  border-radius: 999px;
  color: var(--eld-marka-yazi);
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.eld-sayfa .eld-sayfa-baslik {
  color: var(--eld-metin);
  font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem);
  font-weight: 800;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.eld-sayfa .eld-sayfa-alt {
  margin-top: 12px;
  color: var(--eld-soluk);
  font-size: 1.125rem;
  line-height: 1.6;
}

.eld-sayfa .eld-kazanimlar {
  display: grid;
  gap: 8px;
  margin-top: 20px;
  padding: 16px 20px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 16px;
  list-style: none;
}

.eld-sayfa .eld-kazanimlar li {
  position: relative;
  min-width: 0;
  padding-left: 28px;
  color: var(--eld-metin);
  font-size: 1rem;
  line-height: 1.5;
  list-style: none;
}

.eld-sayfa .eld-kazanimlar li::before {
  content: "\2713";
  position: absolute;
  top: 0;
  left: 0;
  color: var(--eld-yesil);
  font-weight: 800;
}

/* ------------------------------------------------------------------
 * Ders arşivi
 * ---------------------------------------------------------------- */

.eld-arsiv .eld-arsiv-seviye {
  margin: 36px 0 16px;
  color: var(--eld-metin);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
}

.eld-arsiv .eld-arsiv-seviye:first-child {
  margin-top: 0;
}

.eld-arsiv .eld-arsiv-izgara {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eld-arsiv .eld-kart,
.eld-arsiv .eld-kart:visited {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 20px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(43, 28, 120, 0.08);
  color: var(--eld-metin);
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.eld-arsiv .eld-kart:hover,
.eld-arsiv .eld-kart:focus {
  border-color: var(--eld-marka);
  box-shadow: var(--eld-golge-kucuk);
  color: var(--eld-metin);
  text-decoration: none;
  transform: translateY(-2px);
}

.eld-arsiv .eld-kart-baslik {
  color: var(--eld-metin);
  font-size: 1.125rem;
  font-weight: 800;
  line-height: 1.35;
}

.eld-arsiv .eld-kart-alt {
  color: var(--eld-soluk);
  font-size: 0.95rem;
  line-height: 1.5;
}

.eld-arsiv .eld-kart-alt-bilgi {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 12px;
  color: var(--eld-marka-yazi);
  font-size: 0.85rem;
  font-weight: 700;
  line-height: 1.4;
}

.eld-arsiv .eld-kart-ilerleme {
  height: 8px;
  margin-top: auto;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 999px;
  overflow: hidden;
}

.eld-arsiv .eld-kart.eld-kart-bitti {
  border-color: var(--eld-yesil);
}

.eld-arsiv .eld-kart-bitti .eld-kart-alt-bilgi {
  color: var(--eld-yesil);
}

.eld-arsiv .eld-arsiv-bos {
  padding: 16px 20px;
  background-color: var(--eld-kagit);
  border: 2px dashed var(--eld-cizgi);
  border-radius: 16px;
  color: var(--eld-soluk);
}

/* ------------------------------------------------------------------
 * Gramer rütbesi: [el_rutbe] kartı ve ders sonu kutusu
 * ---------------------------------------------------------------- */

.eld-arsiv.eld-rutbe {
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 780px;
  margin: 24px auto;
  padding: clamp(18px, 4vw, 32px);
  background: linear-gradient(135deg, var(--eld-marka-acik), var(--eld-vurgu-acik));
  border: 2px solid var(--eld-cizgi);
  border-radius: 24px;
}

.eld-rutbe .eld-rutbe-ust {
  display: flex;
  align-items: center;
  gap: 16px;
}

.eld-rutbe .eld-rutbe-arma {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 50%;
}

.eld-elma {
  display: inline-block;
  flex: none;
  vertical-align: middle;
}

.eld-rutbe .eld-rutbe-etiket {
  color: var(--eld-marka-yazi);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.eld-rutbe .eld-rutbe-unvan {
  margin: 0;
  color: var(--eld-metin);
  font-size: clamp(1.375rem, 1.1rem + 1.2vw, 1.875rem);
  font-weight: 800;
  line-height: 1.25;
}

.eld-rutbe .eld-rutbe-metin {
  color: var(--eld-metin);
}

.eld-rutbe .eld-rutbe-merdiven {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eld-rutbe .eld-rutbe-merdiven li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin: 0;
  padding: 8px 4px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 12px;
  color: var(--eld-soluk);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  list-style: none;
}

.eld-rutbe .eld-rutbe-merdiven .eld-rutbe-gecti {
  color: var(--eld-metin);
}

.eld-rutbe .eld-rutbe-merdiven .eld-rutbe-simdi {
  border-color: var(--eld-marka);
  box-shadow: 0 0 0 3px var(--eld-marka-acik);
  color: var(--eld-metin);
  font-weight: 800;
}

.eld-rutbe .eld-rutbe-merdiven .eld-rutbe-gelecek .eld-elma {
  opacity: 0.35;
  filter: grayscale(0.6);
}

.eld-rutbe .eld-rutbe-sepet {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  color: var(--eld-metin);
  font-weight: 700;
}

.eld-rutbe .eld-rutbe-sepet-elma {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px 4px 6px;
  background-color: var(--eld-beyaz);
  border: 1px solid var(--eld-cizgi);
  border-radius: 999px;
  font-size: 0.9rem;
}

.eld-rutbe .eld-rutbe-seviyeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eld-rutbe .eld-rutbe-seviyeler li {
  margin: 0;
  list-style: none;
}

.eld-rutbe .eld-rutbe-seviyeler a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 8px 14px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 999px;
  color: var(--eld-metin);
  font-weight: 800;
  text-decoration: none;
}

.eld-rutbe .eld-rutbe-seviyeler [aria-current] a {
  border-color: var(--eld-marka);
}

.eld-rutbe .eld-rutbe-seviyeler a span {
  color: var(--eld-soluk);
  font-weight: 700;
}

.eld-rutbe .eld-rutbe-dugmeler,
.eld-sayfa .eld-kurs-dugmeler,
.eld-gramer .eld-gramer-dugmeler {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 4px 0 0;
}

.eld-rutbe .eld-rutbe-dugme,
.eld-sayfa .eld-kurs-dugme,
.eld-gramer .eld-gramer-dugme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 12px 24px;
  background-color: var(--eld-vurgu);
  border: 2px solid var(--eld-vurgu);
  border-radius: 999px;
  color: #fff;
  font-weight: 800;
  line-height: 1.2;
  text-decoration: none;
}

.eld-rutbe .eld-rutbe-dugme:hover,
.eld-sayfa .eld-kurs-dugme:hover,
.eld-gramer .eld-gramer-dugme:hover {
  background-color: var(--eld-vurgu-hover);
  border-color: var(--eld-vurgu-hover);
  color: #fff;
}

.eld-rutbe .eld-rutbe-dugme-ikincil,
.eld-sayfa .eld-kurs-dugme-ikincil,
.eld-gramer .eld-gramer-dugme-ikincil {
  background-color: transparent;
  color: var(--eld-marka-yazi);
  border-color: var(--eld-marka);
}

.eld-rutbe .eld-rutbe-dugme-ikincil:hover,
.eld-sayfa .eld-kurs-dugme-ikincil:hover,
.eld-gramer .eld-gramer-dugme-ikincil:hover {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
  color: var(--eld-marka-yazi);
}

.eld .eld-rutbe-kutu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 20px 0;
  padding: 20px;
  background: linear-gradient(135deg, var(--eld-marka-acik), var(--eld-vurgu-acik));
  border: 2px solid var(--eld-cizgi);
  border-radius: 20px;
}

.eld .eld-rutbe-kutu-baslik {
  color: var(--eld-marka-yazi);
  font-weight: 800;
}

.eld .eld-rutbe-kutu-unvan {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.3;
}

.eld .eld-rutbe-kutu-unvan {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ------------------------------------------------------------------
 * [el_konular]: müfredat listesi
 * ---------------------------------------------------------------- */

.eld-arsiv.eld-konular {
  margin: 16px 0 8px;
}

.eld-konular .eld-konu-seviye {
  margin: 24px 0 12px;
  color: var(--eld-metin);
  font-size: 1.25rem;
  font-weight: 800;
}

.eld-konular .eld-konu-seviye:first-child {
  margin-top: 0;
}

.eld-konular .eld-konu-liste {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eld-konular .eld-konu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.eld-konular .eld-konu-ic,
.eld-konular a.eld-konu-ic:visited {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  min-height: 64px;
  padding: 12px 14px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 16px;
  color: var(--eld-metin);
  text-decoration: none;
}

.eld-konular a.eld-konu-ic {
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.eld-konular a.eld-konu-ic:hover,
.eld-konular a.eld-konu-ic:focus-visible {
  border-color: var(--eld-marka);
  box-shadow: var(--eld-golge-kucuk);
  color: var(--eld-metin);
  transform: translateY(-2px);
}

.eld-konular .eld-konu-no {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background-color: var(--eld-marka-acik);
  border-radius: 50%;
  color: var(--eld-marka-yazi);
  font-size: 0.9rem;
  font-weight: 800;
}

.eld-konular .eld-konu-metin {
  display: flex;
  flex: 1;
  flex-direction: column;
  min-width: 0;
}

.eld-konular .eld-konu-baslik {
  font-weight: 800;
  line-height: 1.35;
}

.eld-konular .eld-konu-alt {
  color: var(--eld-soluk);
  font-size: 0.9rem;
  line-height: 1.4;
}

.eld-konular .eld-konu-durum {
  flex: none;
  padding: 4px 10px;
  background-color: var(--eld-vurgu);
  border-radius: 999px;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 800;
  white-space: nowrap;
}

.eld-konular .eld-konu-yakinda .eld-konu-ic {
  background-color: var(--eld-kagit);
  border-style: dashed;
}

.eld-konular .eld-konu-yakinda .eld-konu-no {
  background-color: var(--eld-beyaz);
  color: var(--eld-soluk);
}

.eld-konular .eld-konu-yakinda .eld-konu-durum {
  background-color: transparent;
  color: var(--eld-soluk);
  font-weight: 700;
}

.eld-konular .eld-konu-bitti .eld-konu-ic {
  border-color: var(--eld-yesil);
}

.eld-konular .eld-konu-bitti .eld-konu-durum {
  background-color: var(--eld-yesil);
}

.eld .eld-rutbe-kutu .eld-gezinme {
  margin-top: 4px;
}

/* ------------------------------------------------------------------
 * Kursa yönlendirme (ders sonu) ve gramer ana sayfası bölümleri
 * ---------------------------------------------------------------- */

.eld-sayfa.eld-kurs,
.eld-gramer .eld-gramer-kurs {
  margin-top: 28px;
  padding: clamp(18px, 4vw, 28px);
  background-color: var(--eld-vurgu-acik);
  border: 2px solid var(--eld-vurgu);
  border-radius: 24px;
}

.eld-sayfa.eld-kurs p + p {
  margin-top: 8px;
}

.eld-sayfa .eld-kurs-baslik {
  color: var(--eld-metin);
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.3;
}

.eld-gramer {
  color: var(--eld-metin);
}

.eld-gramer .eld-gramer-giris {
  font-size: 1.125rem;
}

.eld-gramer .eld-gramer-icindekiler {
  margin: 24px 0;
  padding: 18px 22px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 18px;
}

.eld-gramer .eld-gramer-icindekiler ul {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.eld-gramer .eld-gramer-icindekiler li {
  margin: 0;
  list-style: none;
}

.eld-gramer .eld-gramer-icindekiler a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 14px;
  background-color: var(--eld-beyaz);
  border: 2px solid var(--eld-cizgi);
  border-radius: 999px;
  color: var(--eld-marka-yazi);
  font-weight: 800;
  text-decoration: none;
}

.eld-gramer .eld-gramer-seviye {
  margin: 40px 0;
  padding-top: 8px;
  scroll-margin-top: 90px;
}

.eld-gramer .eld-gramer-konular {
  columns: 2 260px;
  column-gap: 32px;
  margin: 12px 0 20px;
}

.eld-gramer .eld-gramer-konular li {
  break-inside: avoid;
  margin-bottom: 6px;
}

.eld-gramer .eld-gramer-tablo {
  margin: 16px 0;
  overflow-x: auto;
}

.eld-gramer .eld-gramer-tablo table {
  width: 100%;
  min-width: 520px;
  border-collapse: collapse;
}

.eld-gramer .eld-gramer-tablo th,
.eld-gramer .eld-gramer-tablo td {
  padding: 10px 12px;
  border: 1px solid var(--eld-cizgi);
  text-align: left;
  vertical-align: top;
}

.eld-gramer .eld-gramer-tablo th {
  background-color: var(--eld-marka-acik);
}

@media (max-width: 480px) {
  .eld-rutbe .eld-rutbe-merdiven {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .eld-rutbe .eld-rutbe-dugme,
  .eld-sayfa .eld-kurs-dugme,
  .eld-gramer .eld-gramer-dugme {
    width: 100%;
  }
}

/* ------------------------------------------------------------------
 * Mobil
 * ---------------------------------------------------------------- */

@media (max-width: 640px) {
  .eld .eld-dugme {
    width: 100%;
    min-width: 0;
  }

  .eld .eld-gezinme .eld-dugme {
    flex: 1 1 0;
    width: auto;
  }

  .eld .eld-esles-satir {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .eld .eld-kelime-havuz {
    padding: 10px;
  }
}

@media (max-width: 480px) {
  .eld .eld-gezinme {
    flex-direction: column-reverse;
  }

  .eld .eld-gezinme .eld-dugme {
    flex: none;
    width: 100%;
  }

  .eld .eld-secenek,
  .eld .eld-secenek:focus {
    gap: 12px;
    padding: 12px 14px;
    font-size: 1.0625rem;
  }

  .eld .eld-secenek-harf {
    width: 34px;
    height: 34px;
  }

  .eld .eld-sonuc-rozet {
    min-width: 96px;
    height: 96px;
    font-size: 1.75rem;
  }

  .eld .eld-yanlislar .eld-yanlis-oge {
    margin: 0 10px 10px;
    padding: 14px;
  }

  .eld .eld-tablo-sar th,
  .eld .eld-tablo-sar td {
    padding: 8px 10px;
  }

  .eld-sayfa .eld-kazanimlar {
    padding: 14px 16px;
  }
}

@media (max-width: 380px) {
  .eld .eld-dugme {
    padding: 12px 18px;
  }

  .eld .eld-kelime,
  .eld .eld-kelime:focus {
    padding: 8px 14px;
  }
}

/* ------------------------------------------------------------------
 * Hareket azaltma
 * ---------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .eld *,
  .eld *::before,
  .eld *::after,
  .eld-sayfa *,
  .eld-arsiv *,
  .eld-arsiv *::before,
  .eld-arsiv *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .eld .eld-dugme:active:not(:disabled) {
    transform: none;
  }

  .eld-arsiv .eld-kart:hover,
  .eld-arsiv .eld-kart:focus {
    transform: none;
  }

  .eld .eld-ekleme {
    animation: none;
  }
}
/* Kural çubuğu: üstte etiket, altta tam genişlik bar, zayıfsa altında kuralın özeti */
.eld .eld-kural-cubuk > p:first-child,
.eld .eld-kural-cubuk > .eld-ilerleme {
  grid-column: 1 / -1;
}

.eld .eld-kural-cubuk > .eld-ilerleme {
  margin: 0;
}

.eld .eld-kural-cubuk > .eld-aciklama:nth-child(n+3) {
  height: auto;
  margin-top: 2px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
  color: var(--eld-soluk);
  font-size: 0.95rem;
  font-weight: 400;
}
/* ------------------------------------------------------------------
 * Konu anlatımı (makale): alıştırmanın altında düz metin
 * ---------------------------------------------------------------- */

.eld-sayfa.eld-makale {
  margin-top: clamp(28px, 5vw, 48px);
  font-size: 1.0625rem;
  line-height: 1.75;
}

.eld-makale h2 {
  margin: 1.6em 0 0.5em;
  padding: 0;
  color: var(--eld-metin);
  font-family: inherit;
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.75rem);
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: normal;
  text-transform: none;
}

.eld-makale h2:first-child {
  margin-top: 0;
}

.eld-makale h3 {
  margin: 1.2em 0 0.3em;
  padding: 0;
  color: var(--eld-metin);
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: normal;
  text-transform: none;
}

.eld-makale p {
  margin: 0 0 0.9em;
}

.eld-makale ul.eld-makale-ornek {
  margin: 0 0 1em;
  padding: 12px 18px;
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-left: 4px solid var(--eld-marka);
  border-radius: 12px;
  list-style: none;
}

.eld-makale-ornek li {
  margin: 0;
  padding: 4px 0;
}

.eld-makale-ornek [lang="en"] {
  font-weight: 700;
}

.eld-makale-tr {
  color: var(--eld-soluk);
}

.eld-makale-kural,
.eld-makale-dikkat {
  margin: 0 0 1em;
  padding: 14px 18px;
  border-radius: 14px;
}

.eld-makale-kural {
  background-color: var(--eld-marka-acik);
  border: 2px solid var(--eld-marka);
}

.eld-makale-kural p,
.eld-makale-dikkat p:last-child {
  margin: 0;
}

.eld-makale-dikkat {
  background-color: var(--eld-vurgu-acik);
  border: 2px solid var(--eld-vurgu);
}

.eld-makale-dikkat p {
  margin: 0 0 6px;
}

.eld-makale .eld-makale-yanlis {
  color: var(--eld-kirmizi);
  font-weight: 700;
}

.eld-makale .eld-makale-dogru {
  color: var(--eld-yesil);
  font-weight: 700;
}

.eld-makale-tablo {
  margin: 0 0 1em;
  overflow-x: auto;
}

.eld-makale-tablo table {
  width: 100%;
  margin: 0;
  border-collapse: collapse;
  font-size: 1rem;
}

.eld-makale-tablo th,
.eld-makale-tablo td {
  padding: 8px 12px;
  background-color: transparent;
  border: 1px solid var(--eld-cizgi);
  color: var(--eld-metin);
  text-align: left;
}

.eld-makale-tablo th {
  background-color: var(--eld-kagit);
  font-weight: 700;
}

.eld-makale .eld-gizli {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
}
/* Aşama listesi düğmesi: ad solda, durum sağda; adlar kelime ortasından bölünmez */
.eld .eld-yol-oge {
  overflow-wrap: break-word;
}

.eld .eld-yol-oge .eld-dugme {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 6px 12px;
  width: 100%;
  min-height: 52px;
  padding: 10px 18px;
  border-radius: 18px;
  text-align: left;
}

.eld .eld-yol-oge .eld-dugme > span:first-child {
  flex: 1 1 12em;
  min-width: 0;
}

.eld .eld-yol-oge .eld-rozet-kucuk {
  flex: none;
}
/* Seviye geçişi: aynı konunun seviyeleri */
.eld-sayfa .eld-seviyeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 2px 0 8px;
}

.eld-sayfa .eld-seviyeler a,
.eld-sayfa .eld-seviyeler a:visited,
.eld-sayfa .eld-seviyeler span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--eld-cizgi);
  border-radius: 999px;
  color: var(--eld-marka-yazi);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
}

.eld-sayfa .eld-seviyeler a:hover {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
}

.eld-sayfa .eld-seviyeler span {
  background-color: var(--eld-marka);
  border-color: var(--eld-marka);
  color: #fff;
}

.eld-sayfa.eld-makale-bag {
  margin-top: 24px;
  font-weight: 700;
}

/* Klasik editörden gelen liste ve görseller */
.eld-makale > ul:not(.eld-makale-ornek),
.eld-makale > ol {
  margin: 0 0 1em;
  padding-left: 1.4em;
}

.eld-makale > ul:not(.eld-makale-ornek) li,
.eld-makale > ol li {
  margin: 0 0 0.3em;
}

.eld-makale img {
  max-width: 100%;
  height: auto;
}
/* Alıştırma alanı ile konu anlatımı ayrımı */
.eld .eld-yol-cta {
  margin-top: 20px;
}

.eld .eld-yol-cta .eld-dugme {
  width: 100%;
}

#eld-uygulama,
#konu-anlatimi {
  scroll-margin-top: 110px;
}

.eld-sayfa.eld-kazanim-alan {
  margin-top: clamp(20px, 4vw, 32px);
  padding-bottom: 0;
}

.eld-sayfa.eld-makale {
  padding: clamp(18px, 4vw, 36px);
  background-color: var(--eld-kagit);
  border: 1px solid var(--eld-cizgi);
  border-radius: 28px;
}

.eld-makale .eld-makale-etiket {
  display: inline-block;
  margin: 0 0 12px;
  padding: 6px 14px;
  background-color: var(--eld-koyu);
  border-radius: 999px;
  color: #fff;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.4;
}

.eld-makale .eld-makale-etiket + h2 {
  margin-top: 0.2em;
}

.eld-makale .eld-makale-cta {
  margin: 1.6em 0 0;
  text-align: center;
}

.eld-makale .eld-makale-cta a,
.eld-makale .eld-makale-cta a:visited {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 12px 28px;
  background-color: var(--eld-marka);
  border-radius: 999px;
  color: #fff;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
}

.eld-makale .eld-makale-cta a:hover {
  background-color: var(--eld-marka-hover);
  color: #fff;
}

.eld-makale .eld-makale-tablo table,
.eld-makale ul.eld-makale-ornek {
  background-color: var(--eld-beyaz);
}

/* Aşama çözülürken yalnız soru görünür */
.eld-kabuk.eld-calisiyor .eld-makale,
.eld-kabuk.eld-calisiyor .eld-makale-bag,
.eld-kabuk.eld-calisiyor .eld-kazanim-alan {
  display: none;
}

/* Eşleştirmede sol taraf sorunun kendisidir: okunur boyutta */
.eld .eld-esles-satir .eld-yuva-etiket {
  margin-right: 0;
  color: var(--eld-metin);
  font-size: 1.0625rem;
  line-height: 1.35;
}

/* Gramer ana sayfası ve dersler arası bağlantılar */
.eld-sayfa .eld-ic-yol {
  margin-bottom: 10px;
  font-size: 0.92rem;
  font-weight: 700;
}

.eld-sayfa .eld-ic-yol a,
.eld-sayfa .eld-ic-yol a:visited {
  color: var(--eld-marka-yazi);
  text-decoration: none;
}

.eld-sayfa .eld-ic-yol a::before {
  content: "\2190\00a0";
}

.eld-arsiv .eld-seviyeler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 8px;
}

.eld-arsiv .eld-seviyeler a,
.eld-arsiv .eld-seviyeler a:visited {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 18px;
  border: 2px solid var(--eld-cizgi);
  border-radius: 999px;
  color: var(--eld-marka-yazi);
  font-weight: 700;
  text-decoration: none;
}

.eld-arsiv .eld-seviyeler a:hover {
  background-color: var(--eld-marka-acik);
  border-color: var(--eld-marka);
}

.eld-arsiv-seviye {
  scroll-margin-top: 110px;
}

.eld-sayfa.eld-komsu {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: clamp(20px, 4vw, 32px);
}

.eld-komsu a,
.eld-komsu a:visited {
  flex: 1 1 240px;
  min-width: 0;
  padding: 14px 18px;
  background-color: var(--eld-beyaz);
  border: 1px solid var(--eld-cizgi);
  border-radius: 16px;
  color: var(--eld-metin);
  font-weight: 700;
  text-decoration: none;
}

.eld-komsu a:hover {
  border-color: var(--eld-marka);
}

.eld-komsu small {
  display: block;
  color: var(--eld-soluk);
  font-size: 0.85rem;
  font-weight: 500;
}

.eld-komsu .eld-komsu-sonra {
  text-align: right;
}

.eld-kabuk.eld-calisiyor .eld-komsu {
  display: none;
}