/* ==========================================================================
   "Astroloji Öğren" — ders programı, etkileşimli ders oynatıcısı, alıştırma, test, ders notları.
   Mobil öncelikli; koyu gökyüzü teması.
   ========================================================================== */
/* Sitenin Google Lato (1.104) alt kümelerinde ğ, Ğ, ş, Ş ve İ yok; tarayıcı bu harfleri Segoe UI ile çiziyordu.
   "AB Turkce Ek", Lato 2.015'ten yalnız eksik karakterleri içeren yedek ailedir (ağırlıklar sitedeki Lato ile aynı;
   lisans: ../fonts/OFL.txt). Lato'nun hemen arkasında durur, böylece yalnız Lato'da olmayan karakterler ondan gelir. */
@font-face { font-family: 'AB Turkce Ek'; font-style: normal; font-weight: 100; font-display: swap; src: url('../fonts/ab-turkce-ek-100.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+03B4, U+03BB, U+03C6, U+2032-2033, U+2192, U+2194, U+2248, U+2260, U+2264-2265; }
@font-face { font-family: 'AB Turkce Ek'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/ab-turkce-ek-300.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+03B4, U+03BB, U+03C6, U+2032-2033, U+2192, U+2194, U+2248, U+2260, U+2264-2265; }
@font-face { font-family: 'AB Turkce Ek'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/ab-turkce-ek-400.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+03B4, U+03BB, U+03C6, U+2032-2033, U+2192, U+2194, U+2248, U+2260, U+2264-2265; }
@font-face { font-family: 'AB Turkce Ek'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/ab-turkce-ek-700.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+03B4, U+03BB, U+03C6, U+2032-2033, U+2192, U+2194, U+2248, U+2260, U+2264-2265; }
@font-face { font-family: 'AB Turkce Ek'; font-style: normal; font-weight: 900; font-display: swap; src: url('../fonts/ab-turkce-ek-900.woff2') format('woff2'); unicode-range: U+011E-011F, U+0130, U+015E-015F, U+03B4, U+03BB, U+03C6, U+2032-2033, U+2192, U+2194, U+2248, U+2260, U+2264-2265; }

/* Astro Bilge renkleri: açık yeşil (#2f8f7a), altın (#E09F3E), turkuaz; zemin sitenin koyu yeşil-turkuazı. */
:root {
    --eg-gece: #052520;
    --eg-gece-2: #093831;
    --eg-gece-3: #0f5a4f;
    --eg-altin: #e9b04f;
    --eg-altin-koyu: #e09f3e;
    --eg-altin-acik: #ffe0a3;
    --eg-turkuaz: #3fd0b0;
    --eg-yesil: #2f8f7a;
    --eg-yesil-acik: #7fe0b4;
    --eg-beyaz: #f4f1ea;
    --eg-soluk: rgba(244, 241, 234, 0.66);
    --eg-cok-soluk: rgba(244, 241, 234, 0.38);
    --eg-kart: rgba(255, 255, 255, 0.06);
    --eg-kart-2: rgba(255, 255, 255, 0.1);
    --eg-kenar: rgba(255, 255, 255, 0.13);
    --eg-dogru: #3ddc97;
    --eg-yanlis: #ff6b6b;
    --eg-ates: #e9b04f;
    --eg-toprak: #7fe0b4;
    --eg-hava: #ffe0a3;
    --eg-su: #3fd0b0;
    --eg-yazi: 'Lato', 'AB Turkce Ek', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --eg-yuvarlak: 18px;
    --eg-gutter: 16px;
    --eg-gok: radial-gradient(120% 90% at 50% 0%, #17786a 0%, #0f5a4f 30%, #093831 62%, #052520 100%);
}

/* ---------- Genel ---------- */
.eg-sayfa {
    background: var(--eg-gok);
    color: var(--eg-beyaz);
    font-family: var(--eg-yazi);
    min-height: 100vh;
    position: relative;
    overflow: hidden;
}
.eg-sayfa a { color: inherit; }
/* Sahne görselleri yazı ailesini SVG özniteliğiyle ('Lato', 'Segoe UI', …) verir; CSS kuralı özniteliği ezer ve
   Türkçe yedek aileyi araya ekler. */
svg[font-family*="Lato"], svg [font-family*="Lato"] { font-family: var(--eg-yazi); }
.eg-yildiz-tuvali {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.eg-kap {
    position: relative;
    z-index: 1;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 var(--eg-gutter);
}
.eg-dugme {
    --renk: var(--eg-altin);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    min-height: 48px;
    padding: 0.75em 1.5em;
    border-radius: 999px;
    border: 0;
    background: linear-gradient(135deg, var(--eg-altin-acik), var(--eg-altin));
    color: #241a05;
    font-weight: 800;
    font-size: 1rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 10px 30px -10px rgba(233, 176, 79, 0.65);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.eg-dugme:hover { transform: translateY(-2px); box-shadow: 0 14px 34px -10px rgba(233, 176, 79, 0.8); color: #241a05; }
.eg-dugme:active { transform: scale(0.97); }
.eg-dugme[disabled] { opacity: 0.45; cursor: not-allowed; transform: none; }
.eg-dugme--ikincil {
    background: var(--eg-kart-2);
    color: var(--eg-beyaz);
    box-shadow: inset 0 0 0 1px var(--eg-kenar);
}
.eg-dugme--ikincil:hover { color: var(--eg-beyaz); background: rgba(255, 255, 255, 0.16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3); }
.eg-dugme--turkuaz { background: linear-gradient(135deg, #7ff0d6, var(--eg-turkuaz)); color: #04261f; box-shadow: 0 10px 30px -10px rgba(63, 208, 176, 0.6); }
.eg-dugme--turkuaz:hover { color: #04261f; }
.eg-dugme--kucuk { min-height: 40px; padding: 0.5em 1.1em; font-size: 0.92rem; }
.eg-rozet {
    display: inline-flex;
    align-items: center;
    gap: 0.4em;
    padding: 0.3em 0.75em;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    background: var(--eg-kart-2);
    color: var(--eg-soluk);
    white-space: nowrap;
}
.eg-rozet--altin { background: rgba(233, 176, 79, 0.16); color: var(--eg-altin-acik); }
.eg-rozet--yesil { background: rgba(61, 220, 151, 0.15); color: var(--eg-dogru); }
.eg-rozet--kilit { background: rgba(255, 255, 255, 0.07); color: var(--eg-cok-soluk); }
.eg-glif-satir { display: inline-flex; gap: 6px; vertical-align: middle; }
.eg-glif-satir svg { width: 1.2em; height: 1.2em; }
.eg-gizli { display: none !important; }
/* Chrome'un bazı sürümlerinde kenar çizgili circle/ellipse/yuvarlatılmış rect öğelerinin çizgisi yarım yay olarak
   çiziliyor, çapraz kalın line ise dolu üçgen gibi görünüyor (Skia hızlı yolu). Çizgiye tam boy desen verilince
   doğru çiziliyor; bilerek kesikli çizilenler korunur. */
:is(.eg-oynatici, .eg-sayfa, .eg-sahne, .eg-soru) svg :is(circle, ellipse, rect, line, polyline, polygon):not([stroke-dasharray]) { stroke-dasharray: 100000; }
.eg-ust-etiket { color: var(--eg-altin); font-weight: 800; letter-spacing: 0.1em; font-size: 0.78rem; text-transform: uppercase; }
.eg-program-not { color: var(--eg-soluk); font-size: 0.92rem; margin: -6px 0 16px; line-height: 1.55; }
.eg-yukleniyor {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 6;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-radius: 99px;
    background: rgba(5, 37, 32, 0.75);
    color: var(--eg-altin-acik);
    font-weight: 700;
    font-size: 0.9rem;
}
.eg-secenek__ad { font-size: 0.85rem; color: var(--eg-soluk); font-weight: 700; }
.eg-sonuc h2 { font-size: clamp(1.4rem, 5.5vw, 2rem); font-weight: 900; margin: 6px 0 8px; color: var(--eg-beyaz); }
.eg-sonuc p { color: var(--eg-soluk); line-height: 1.6; }
.eg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Program (dizin) sayfası ---------- */
.eg-kahraman {
    padding: 28px 0 8px;
    display: grid;
    gap: 22px;
    align-items: center;
}
.eg-kahraman__cark {
    width: min(78vw, 360px);
    aspect-ratio: 1;
    margin: 0 auto;
    position: relative;
}
.eg-kahraman__cark svg { width: 100%; height: 100%; overflow: visible; }
.eg-kahraman h1 {
    font-size: clamp(2rem, 7vw, 3.4rem);
    font-weight: 900;
    line-height: 1.05;
    margin: 0 0 12px;
    letter-spacing: -0.01em;
    color: var(--eg-beyaz);
}
.eg-kahraman h1 span {
    background: linear-gradient(90deg, var(--eg-altin-acik), var(--eg-altin), var(--eg-turkuaz));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.eg-kahraman p.eg-giris { font-size: 1.08rem; color: var(--eg-soluk); line-height: 1.6; margin: 0 0 20px; max-width: 560px; }
.eg-kahraman__dugmeler { display: flex; flex-wrap: wrap; gap: 10px; }
.eg-ilerleme-ozet {
    margin-top: 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--eg-soluk);
    font-size: 0.92rem;
}
.eg-ilerleme-ozet__cubuk { flex: 1; max-width: 260px; height: 8px; border-radius: 99px; background: var(--eg-kart-2); overflow: hidden; }
.eg-ilerleme-ozet__dolu { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--eg-turkuaz), var(--eg-altin)); width: 0; transition: width 1.2s cubic-bezier(.2,.8,.2,1); }
@media (min-width: 900px) {
    .eg-kahraman { grid-template-columns: 1.1fr 0.9fr; padding: 56px 0 24px; }
    .eg-kahraman__cark { order: 2; width: 100%; max-width: 440px; }
}

.eg-nasil {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin: 26px 0 8px;
}
.eg-nasil__adim {
    background: var(--eg-kart);
    border: 1px solid var(--eg-kenar);
    border-radius: var(--eg-yuvarlak);
    padding: 14px;
    display: flex;
    gap: 10px;
    align-items: flex-start;
}
.eg-nasil__ikon {
    flex: 0 0 38px;
    height: 38px;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(233, 176, 79, 0.14);
    color: var(--eg-altin);
    font-size: 1.05rem;
}
.eg-nasil__adim b { display: block; font-size: 0.95rem; margin-bottom: 2px; }
.eg-nasil__adim small { color: var(--eg-soluk); font-size: 0.8rem; line-height: 1.4; display: block; }
@media (min-width: 900px) { .eg-nasil { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.eg-bolum-baslik { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 34px 0 14px; }
.eg-bolum-baslik h2 { font-size: clamp(1.35rem, 4.5vw, 1.9rem); font-weight: 900; margin: 0; color: var(--eg-beyaz); }
.eg-bolum-baslik span { color: var(--eg-soluk); font-size: 0.9rem; }

.eg-dersler { display: grid; gap: 14px; }
@media (min-width: 700px) { .eg-dersler { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .eg-dersler { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.eg-ders-karti {
    position: relative;
    border-radius: 22px;
    padding: 18px 18px 16px;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.03));
    border: 1px solid var(--eg-kenar);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 210px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    text-decoration: none;
    color: var(--eg-beyaz);
}
.eg-ders-karti::after {
    content: '';
    position: absolute;
    inset: auto -40% -60% auto;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(233, 176, 79, 0.18), transparent 70%);
    pointer-events: none;
}
.eg-ders-karti:hover { transform: translateY(-4px); border-color: rgba(233, 176, 79, 0.45); box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.7); color: var(--eg-beyaz); }
.eg-ders-karti--kilitli { opacity: 0.72; }
.eg-ders-karti--kilitli:hover { transform: none; border-color: var(--eg-kenar); }
.eg-ders-karti--tamam { border-color: rgba(61, 220, 151, 0.4); }
.eg-ders-karti__ust { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.eg-ders-karti__no {
    font-size: 2.6rem;
    font-weight: 900;
    line-height: 1;
    background: linear-gradient(180deg, var(--eg-altin-acik), rgba(233, 176, 79, 0.35));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.eg-ders-karti h3 { font-size: 1.18rem; font-weight: 800; margin: 0; line-height: 1.25; color: var(--eg-beyaz); }
.eg-ders-karti__kavramlar { display: flex; flex-wrap: wrap; gap: 6px; }
.eg-ders-karti__kavramlar span { font-size: 0.74rem; padding: 3px 9px; border-radius: 99px; background: rgba(255, 255, 255, 0.07); color: var(--eg-soluk); }
.eg-ders-karti__alt { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.85rem; color: var(--eg-soluk); }
.eg-ders-karti__alt .eg-dugme { min-height: 40px; padding: 0.45em 1em; font-size: 0.88rem; }

.eg-moduller { display: grid; gap: 10px; margin-bottom: 60px; }
.eg-modul {
    border-radius: var(--eg-yuvarlak);
    background: var(--eg-kart);
    border: 1px solid var(--eg-kenar);
    overflow: hidden;
}
.eg-modul summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 800;
    min-height: 56px;
}
.eg-modul summary::-webkit-details-marker { display: none; }
.eg-modul summary .eg-modul__ok { margin-left: auto; transition: transform 0.25s; color: var(--eg-soluk); }
.eg-modul[open] summary .eg-modul__ok { transform: rotate(180deg); }
.eg-modul__seviye { font-size: 0.72rem; font-weight: 700; color: var(--eg-altin); letter-spacing: 0.06em; text-transform: uppercase; }
.eg-modul ol { margin: 0; padding: 0 18px 14px 18px; list-style: none; display: grid; gap: 6px; }
.eg-modul li {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.035);
    font-size: 0.95rem;
}
.eg-modul li .eg-modul__no { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-weight: 800; font-size: 0.82rem; background: rgba(255, 255, 255, 0.07); color: var(--eg-soluk); }
.eg-modul li.eg-acik .eg-modul__no { background: rgba(233, 176, 79, 0.18); color: var(--eg-altin); }
.eg-modul li a { color: var(--eg-beyaz); text-decoration: none; font-weight: 700; }
.eg-modul li .eg-rozet { margin-left: auto; }
.eg-modul__sayac { margin-left: auto; font-size: 0.8rem; font-weight: 800; color: var(--eg-soluk); white-space: nowrap; }
.eg-modul summary .eg-modul__sayac + .eg-modul__ok { margin-left: 0; }
.eg-modul__dersler { padding: 0 18px 18px; }
@media (max-width: 480px) { .eg-modul__dersler { padding: 0 12px 12px; } }

/* ---------- Program sayfası: beyaz zemin ----------
   Yalnız /astroloji-ogren program sayfası beyaz zeminlidir; ders oynatıcısı ve ders notları koyu temada kalır.
   Koyu temanın açık renk belirteçleri (metin, kart, kenar) bu kapsamda beyaz zemindeki karşılıklarına çevrilir.
   Altın ve turkuaz zemin, kenar ve süslerde aynen kalır; beyaz üzerinde okunması gereken yazılar koyu tonlarıdır.
   Sitenin karanlık modu ([data-theme=dark] genel div/section/başlık kuralları) sayfayı koyuya boyamasın diye zemin,
   bölüm, başlık ve düğme yazı renkleri bu kapsamda yeniden sabitlenir. */
body.eg-program-govde { background: #fff; }
body.eg-program-govde .eg-sayfa {
    --eg-gok: #fff;
    --eg-beyaz: #0d2b26;
    --eg-soluk: #4d6863;
    --eg-cok-soluk: #586e68;
    --eg-kart: #f6faf9;
    --eg-kart-2: #eef5f3;
    --eg-kenar: #d9e8e3;
    --eg-altin-yazi: #9a6510;
    background-color: #fff;
}
body.eg-program-govde .eg-sayfa section { background-color: transparent !important; color: inherit !important; }
body.eg-program-govde .eg-sayfa :is(h1, h2, h3) { color: var(--eg-beyaz); }
body.eg-program-govde .eg-sayfa .eg-program-not { color: var(--eg-soluk); }
/* ".eg-sayfa a { color: inherit }" düğme yazılarını kart satırının soluk rengine çeviriyordu. */
body.eg-program-govde .eg-sayfa a.eg-dugme { color: #241a05; }
body.eg-program-govde .eg-sayfa a.eg-dugme--ikincil { color: var(--eg-beyaz); }
body.eg-program-govde .eg-sayfa a.eg-dugme--turkuaz { color: #04261f; }
body.eg-program-govde .eg-sayfa :is(a, summary):focus-visible { outline: 2px solid var(--eg-beyaz); outline-offset: 3px; }
body.eg-program-govde .eg-dugme { box-shadow: 0 8px 20px -10px rgba(196, 134, 28, 0.55); }
body.eg-program-govde .eg-dugme:hover { box-shadow: 0 12px 26px -10px rgba(196, 134, 28, 0.6); }
body.eg-program-govde .eg-dugme--turkuaz { box-shadow: 0 8px 20px -10px rgba(18, 165, 137, 0.5); }
body.eg-program-govde .eg-dugme--turkuaz:hover { box-shadow: 0 12px 26px -10px rgba(18, 165, 137, 0.55); }
body.eg-program-govde .eg-dugme--ikincil { background: #fff; box-shadow: inset 0 0 0 1.5px #a7c2ba; }
body.eg-program-govde .eg-dugme--ikincil:hover { background: var(--eg-kart); box-shadow: inset 0 0 0 1.5px rgba(233, 176, 79, 0.85); }
body.eg-program-govde .eg-rozet--altin { background: rgba(233, 176, 79, 0.16); color: #8a5a00; }
body.eg-program-govde .eg-rozet--yesil { background: rgba(61, 220, 151, 0.15); color: #166b4a; }
body.eg-program-govde .eg-rozet--kilit { background: #eef3f1; color: var(--eg-cok-soluk); }
/* Degrade durakları beyazda en az 3:1; altından yeşile geçiş iki "adım" arasındaki boşluğa düşer. */
body.eg-program-govde .eg-kahraman h1 span { white-space: nowrap; background-image: linear-gradient(90deg, #b87a12 0%, #b8801c 46%, #2f8f7a 54%, #0f9479 100%); }
body.eg-program-govde .eg-ust-etiket,
body.eg-program-govde .eg-modul__seviye { color: var(--eg-altin-yazi); }
body.eg-program-govde .eg-ilerleme-ozet__cubuk { background: #e6efec; }
body.eg-program-govde .eg-nasil__adim { background: #fff; box-shadow: 0 10px 26px -20px rgba(5, 37, 32, 0.4); }
body.eg-program-govde .eg-nasil__ikon { background: rgba(233, 176, 79, 0.16); color: #b8801c; }
body.eg-program-govde .eg-ders-karti { background: linear-gradient(160deg, #fff, #f6faf9); box-shadow: 0 14px 32px -24px rgba(5, 37, 32, 0.5); }
body.eg-program-govde .eg-ders-karti::after { display: none; }
body.eg-program-govde .eg-ders-karti:hover { border-color: rgba(233, 176, 79, 0.65); box-shadow: 0 22px 40px -24px rgba(5, 37, 32, 0.5); }
body.eg-program-govde .eg-ders-karti__no { background-image: linear-gradient(180deg, #b87a12, #8a5a00); }
/* Kilitli ders: opaklıkla soldurmak yazıları okunmaz yapıyordu; kilit düz zemin, gölgesizlik ve gri numarayla anlatılır. */
body.eg-program-govde .eg-ders-karti--kilitli { opacity: 1; background: #f8fbfa; box-shadow: none; }
body.eg-program-govde .eg-ders-karti--kilitli:hover { transform: none; border-color: var(--eg-kenar); box-shadow: none; cursor: default; }
body.eg-program-govde .eg-ders-karti--kilitli .eg-ders-karti__no { background-image: none; color: #7a8c88; }
body.eg-program-govde .eg-ders-karti--kilitli h3 { color: var(--eg-soluk); }
body.eg-program-govde .eg-ders-karti--tamam { border-color: #3d9a78; }
body.eg-program-govde .eg-ders-karti__kavramlar span { background: var(--eg-kart-2); }
body.eg-program-govde .eg-ders-karti__alt { flex-wrap: wrap; row-gap: 10px; }
body.eg-program-govde .eg-ders-karti__alt .eg-dugme { white-space: nowrap; }
body.eg-program-govde .eg-ders-karti__alt > :is(.d-flex, a.eg-dugme) { margin-left: auto; align-items: center; }
body.eg-program-govde .eg-modul { background: #fff; box-shadow: 0 10px 26px -22px rgba(5, 37, 32, 0.4); }
body.eg-program-govde .eg-modul summary:hover { background: var(--eg-kart); }
body.eg-program-govde .eg-modul summary:hover .eg-modul__ok { color: var(--eg-altin-yazi); }
body.eg-program-govde .eg-sayfa .eg-modul summary:focus-visible { outline-offset: -3px; border-radius: var(--eg-yuvarlak); }
body.eg-program-govde .eg-modul li { background: var(--eg-kart); }
body.eg-program-govde .eg-modul li a:hover { color: var(--eg-altin-yazi); text-decoration: underline; text-underline-offset: 3px; }
body.eg-program-govde .eg-modul li .eg-modul__no { background: #e9f1ef; }
body.eg-program-govde .eg-modul li.eg-acik .eg-modul__no { background: rgba(233, 176, 79, 0.2); color: #8a5a00; }
/* Sitenin uyarı kutusu beyaz zeminde kaybolmasın. */
body.eg-program-govde .astro-toast { box-shadow: 0 16px 40px rgba(5, 37, 32, 0.22), 0 0 0 1px rgba(233, 176, 79, 0.55) !important; }
@media (max-width: 480px) {
    body.eg-program-govde .eg-kahraman__dugmeler .eg-dugme { flex: 1 1 100%; }
}
@media (max-width: 420px) {
    body.eg-program-govde .eg-nasil__adim { flex-direction: column; gap: 8px; }
}

/* ---------- Ders oynatıcısı ---------- */
body.eg-ders-govde { overflow: hidden; background: var(--eg-gece); }
.eg-oynatici {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: grid;
    /* Sütun ekran genişliğine kilitli: tek satırlık (nowrap) başlık metni ızgarayı genişletmesin. */
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
    grid-template-areas: 'ust' 'cubuk' 'sahne' 'altyazi' 'kontrol';
    background: var(--eg-gok);
    color: var(--eg-beyaz);
    font-family: var(--eg-yazi);
    height: 100vh;
    height: 100dvh;
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}
.eg-ust {
    grid-area: ust;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 6px;
    position: relative;
    z-index: 5;
}
.eg-ikon-dugme {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 0;
    display: grid;
    place-items: center;
    background: var(--eg-kart-2);
    color: var(--eg-beyaz);
    font-size: 1.05rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: background 0.2s, transform 0.15s;
}
.eg-ikon-dugme:hover { background: rgba(255, 255, 255, 0.18); }
.eg-ikon-dugme:active { transform: scale(0.94); }
.eg-ikon-dugme[aria-pressed='false'] { opacity: 0.55; }
.eg-ust__baslik { min-width: 0; flex: 1; }
.eg-ust__baslik small { display: block; font-size: 0.72rem; color: var(--eg-altin); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.eg-ust__baslik b { display: block; font-size: 0.98rem; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eg-ust__sure { font-variant-numeric: tabular-nums; font-size: 0.82rem; color: var(--eg-soluk); white-space: nowrap; }

/* İlerleme çubuğu: izlenen kısım (açık) içinde geri/ileri sarılabilir; izlenmeyen kısım koyu kalır. */
.eg-cubuk {
    grid-area: cubuk;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px 8px;
    margin-top: -6px;
    position: relative;
    z-index: 5;
    cursor: pointer;
    touch-action: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}
.eg-cubuk__parca { flex: 1; position: relative; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.14); overflow: hidden; transition: height 0.15s; }
.eg-cubuk:hover .eg-cubuk__parca,
.eg-cubuk.surukleniyor .eg-cubuk__parca,
.eg-cubuk:focus-visible .eg-cubuk__parca { height: 6px; }
.eg-cubuk__izlendi { position: absolute; inset: 0 auto 0 0; width: 0; background: rgba(255, 255, 255, 0.34); border-radius: 4px; }
.eg-cubuk__dolu { position: relative; height: 100%; width: 0; background: linear-gradient(90deg, var(--eg-turkuaz), var(--eg-altin)); border-radius: 4px; }
.eg-cubuk__tutamak {
    position: absolute;
    top: 50%;
    width: 14px;
    height: 14px;
    margin: -8px 0 0 -7px;
    border-radius: 50%;
    background: var(--eg-altin-acik);
    box-shadow: 0 0 0 4px rgba(233, 176, 79, 0.25);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
}
.eg-cubuk:hover .eg-cubuk__tutamak,
.eg-cubuk.surukleniyor .eg-cubuk__tutamak,
.eg-cubuk:focus-visible .eg-cubuk__tutamak { opacity: 1; }
.eg-cubuk__ipucu {
    position: absolute;
    bottom: calc(100% + 2px);
    transform: translateX(-50%);
    padding: 2px 8px;
    border-radius: 8px;
    background: var(--eg-kart-2);
    color: var(--eg-beyaz);
    font-size: 0.75rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    pointer-events: none;
    display: none;
}
.eg-cubuk.surukleniyor .eg-cubuk__ipucu { display: block; }
.eg-devam-bilgi { color: var(--eg-altin-acik); font-weight: 700; }

.eg-sahne {
    grid-area: sahne;
    position: relative;
    min-height: 0;
    overflow: hidden;
}
.eg-sahne svg.eg-gorsel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    overflow: visible;
    z-index: 2;
}
.eg-gorsel-katman {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 18px;
}
.eg-gorsel-katman > * { pointer-events: auto; }
.eg-sahne__baslik {
    position: absolute;
    left: 14px;
    top: 6px;
    z-index: 4;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--eg-altin);
    background: rgba(5, 37, 32, 0.6);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 5px 10px;
    border-radius: 99px;
    max-width: calc(100% - 28px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Anahtar kavram çipleri altyazının üstünde durur; sahnedeki görsellerin etiketleriyle çakışmaz. */
.eg-kartlar {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
    min-height: 0;
    margin-bottom: 6px;
    pointer-events: none;
}
.eg-kartlar:empty { margin-bottom: 0; }
.eg-kart-cipi {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 99px;
    background: rgba(233, 176, 79, 0.16);
    border: 1px solid rgba(233, 176, 79, 0.45);
    color: var(--eg-altin-acik);
    font-weight: 800;
    font-size: 0.82rem;
    box-shadow: 0 8px 22px -12px rgba(233, 176, 79, 0.7);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.eg-kart-cipi::before { content: '✦'; font-size: 0.75em; color: var(--eg-altin); }

.eg-altyazi {
    grid-area: altyazi;
    min-width: 0;
    position: relative;
    z-index: 5;
    padding: 10px 16px 6px;
    min-height: 92px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.eg-altyazi__onceki { font-size: 0.85rem; color: var(--eg-cok-soluk); line-height: 1.45; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.eg-altyazi__simdi { font-size: clamp(1.02rem, 4.3vw, 1.3rem); line-height: 1.5; font-weight: 600; color: var(--eg-soluk); }
.eg-altyazi__simdi .k { transition: color 0.18s ease, text-shadow 0.18s ease; }
.eg-altyazi__simdi .k.okundu { color: var(--eg-beyaz); }
.eg-altyazi__simdi .k.simdi { color: var(--eg-altin-acik); text-shadow: 0 0 18px rgba(233, 176, 79, 0.55); }
.eg-oynatici.eg-altyazisiz .eg-altyazi { visibility: hidden; }

.eg-kontrol {
    grid-area: kontrol;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 6px 12px 12px;
    position: relative;
    z-index: 5;
}
.eg-oynat {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    border: 0;
    display: grid;
    place-items: center;
    font-size: 1.4rem;
    background: linear-gradient(135deg, var(--eg-altin-acik), var(--eg-altin));
    color: #241a05;
    box-shadow: 0 12px 30px -10px rgba(233, 176, 79, 0.75);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.eg-oynat:active { transform: scale(0.95); }
.eg-kontrol__not { position: absolute; left: 14px; bottom: 16px; font-size: 0.72rem; color: var(--eg-cok-soluk); display: none; }

@media (min-width: 992px) and (min-aspect-ratio: 4/3) {
    .eg-oynatici {
        grid-template-columns: minmax(0, 1fr) 380px;
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas: 'ust ust' 'cubuk cubuk' 'sahne altyazi' 'kontrol kontrol';
    }
    .eg-altyazi {
        justify-content: center;
        padding: 24px 28px;
        border-left: 1px solid var(--eg-kenar);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
    }
    .eg-altyazi__onceki { -webkit-line-clamp: 4; font-size: 0.95rem; margin-bottom: 14px; }
    .eg-altyazi__simdi { font-size: 1.32rem; }
    .eg-kontrol__not { display: block; }
    .eg-kartlar { margin-bottom: 14px; }
}

/* Yatay tutulan telefon: sahne solda, altyazı ve kontroller sağda */
@media (orientation: landscape) and (max-height: 540px) {
    .eg-oynatici {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
        grid-template-rows: auto auto minmax(0, 1fr) auto;
        grid-template-areas: 'ust ust' 'cubuk cubuk' 'sahne altyazi' 'sahne kontrol';
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .eg-ust { padding: 6px 10px 4px; }
    .eg-ikon-dugme { width: 40px; height: 40px; }
    .eg-altyazi { justify-content: center; padding: 6px 14px; min-height: 0; }
    .eg-altyazi__onceki { display: none; }
    .eg-altyazi__simdi { font-size: 1rem; }
    .eg-kontrol { padding: 4px 8px 8px; gap: 10px; }
    .eg-oynat { width: 54px; height: 54px; font-size: 1.2rem; }
    .eg-panel--yaprak { max-height: 100%; top: 0; border-radius: 0; }
}

/* Perde: giriş, duraklatma, hata ve geçiş ekranları */
.eg-perde {
    position: absolute;
    inset: 0;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px var(--eg-gutter);
    background: rgba(4, 30, 26, 0.76);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow-y: auto;
}
.eg-perde__kutu {
    width: 100%;
    max-width: 560px;
    text-align: center;
    margin: auto;
}
.eg-perde h2 { font-size: clamp(1.5rem, 6vw, 2.2rem); font-weight: 900; margin: 6px 0 10px; color: var(--eg-beyaz); }
.eg-perde p { color: var(--eg-soluk); line-height: 1.6; margin: 0 0 14px; }
.eg-perde .eg-ust-etiket { color: var(--eg-altin); font-weight: 800; letter-spacing: 0.1em; font-size: 0.78rem; text-transform: uppercase; }
.eg-kurallar {
    text-align: left;
    list-style: none;
    padding: 14px;
    margin: 16px 0 20px;
    border-radius: var(--eg-yuvarlak);
    background: var(--eg-kart);
    border: 1px solid var(--eg-kenar);
    display: grid;
    gap: 9px;
    font-size: 0.9rem;
    color: var(--eg-soluk);
}
.eg-kurallar li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.eg-kurallar i { color: var(--eg-altin); margin-top: 3px; width: 18px; text-align: center; }
.eg-sahne-listesi { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 4px 0 18px; }
.eg-sahne-listesi span { font-size: 0.76rem; padding: 4px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--eg-soluk); }
.eg-perde__dugmeler { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }

/* Etkileşim/alıştırma/test paneli */
.eg-panel {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    background: var(--eg-gok);
    overflow: hidden;
}
.eg-panel--yaprak {
    top: auto;
    max-height: 92%;
    border-radius: 26px 26px 0 0;
    background: linear-gradient(180deg, #0f4f45, #082f29);
    box-shadow: 0 -20px 60px -10px rgba(0, 0, 0, 0.7);
    border-top: 1px solid var(--eg-kenar);
}
.eg-panel__ust {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px 8px;
}
.eg-panel__ust .eg-ust-etiket { color: var(--eg-altin); font-weight: 800; letter-spacing: 0.08em; font-size: 0.75rem; text-transform: uppercase; }
.eg-panel__sayac { margin-left: auto; font-weight: 800; font-size: 0.9rem; color: var(--eg-soluk); font-variant-numeric: tabular-nums; }
.eg-panel__govde { flex: 1; overflow-y: auto; padding: 6px 16px 16px; -webkit-overflow-scrolling: touch; }
.eg-panel__alt {
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--eg-kenar);
    background: rgba(5, 37, 32, 0.66);
}
.eg-panel__alt .eg-dugme { flex: 1; }
.eg-noktalar { display: flex; gap: 5px; flex-wrap: wrap; padding: 0 16px 8px; }
.eg-noktalar button {
    width: 26px;
    height: 26px;
    border-radius: 8px;
    border: 0;
    font-size: 0.7rem;
    font-weight: 800;
    background: rgba(255, 255, 255, 0.07);
    color: var(--eg-cok-soluk);
    cursor: pointer;
}
.eg-noktalar button.cevapli { background: rgba(233, 176, 79, 0.2); color: var(--eg-altin-acik); }
.eg-noktalar button.simdi { box-shadow: 0 0 0 2px var(--eg-altin); color: var(--eg-beyaz); }
.eg-seri { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: var(--eg-altin); font-size: 0.9rem; }

/* Soru */
.eg-soru { max-width: 640px; margin: 0 auto; padding-top: 6px; }
.eg-soru__kok { font-size: clamp(1.08rem, 4.6vw, 1.32rem); font-weight: 800; line-height: 1.45; margin: 4px 0 16px; color: var(--eg-beyaz); }
.eg-soru__kok .eg-bosluk {
    display: inline-block;
    min-width: 84px;
    padding: 0 10px;
    margin: 0 4px;
    border-bottom: 3px dashed var(--eg-altin);
    color: var(--eg-altin-acik);
    text-align: center;
}
.eg-soru__ipucu { font-size: 0.85rem; color: var(--eg-soluk); margin: -8px 0 14px; }
.eg-secenekler { display: grid; gap: 10px; }
.eg-secenek {
    width: 100%;
    min-height: 56px;
    border-radius: 16px;
    border: 1.5px solid var(--eg-kenar);
    background: var(--eg-kart);
    color: var(--eg-beyaz);
    font-size: 1rem;
    font-weight: 700;
    text-align: left;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s, transform 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.eg-secenek:hover { border-color: rgba(233, 176, 79, 0.55); }
.eg-secenek:active { transform: scale(0.985); }
.eg-secenek__harf {
    flex: 0 0 32px;
    height: 32px;
    border-radius: 10px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--eg-soluk);
}
.eg-secenek.secili { border-color: var(--eg-altin); background: rgba(233, 176, 79, 0.12); }
.eg-secenek.secili .eg-secenek__harf { background: var(--eg-altin); color: #241a05; }
.eg-secenek.dogru { border-color: var(--eg-dogru); background: rgba(61, 220, 151, 0.14); }
.eg-secenek.dogru .eg-secenek__harf { background: var(--eg-dogru); color: #04261a; }
.eg-secenek.yanlis { border-color: var(--eg-yanlis); background: rgba(255, 107, 107, 0.13); }
.eg-secenek.yanlis .eg-secenek__harf { background: var(--eg-yanlis); color: #2a0606; }
.eg-secenek[disabled] { cursor: default; }
.eg-secenekler--sembol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.eg-secenekler--sembol .eg-secenek { flex-direction: column; justify-content: center; min-height: 120px; text-align: center; gap: 6px; }
.eg-secenekler--sembol svg { width: 64px; height: 64px; overflow: visible; }
.eg-secenekler--sembol .eg-secenek__harf { position: absolute; top: 8px; left: 8px; width: 26px; height: 26px; flex: none; }
.eg-secenekler--sembol .eg-secenek { position: relative; }
@media (min-width: 640px) { .eg-secenekler--sembol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.eg-eslestir { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 26px; position: relative; }
.eg-eslestir svg.eg-eslestir__cizgiler { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.eg-eslestir__sutun { display: grid; gap: 10px; align-content: start; }
.eg-eslestir .eg-secenek { justify-content: center; text-align: center; min-height: 52px; font-size: 0.95rem; padding: 10px; }
.eg-eslestir .eg-secenek.bagli { border-style: solid; }

.eg-sirala { display: grid; gap: 8px; list-style: none; padding: 0; margin: 0; }
.eg-sirala li {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 56px;
    padding: 8px 10px 8px 14px;
    border-radius: 16px;
    background: var(--eg-kart);
    border: 1.5px solid var(--eg-kenar);
    font-weight: 700;
}
.eg-sirala li .eg-sirala__no { flex: 0 0 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; background: rgba(233, 176, 79, 0.16); color: var(--eg-altin); font-size: 0.82rem; }
.eg-sirala li .eg-sirala__tutamac { margin-left: auto; color: var(--eg-cok-soluk); cursor: grab; padding: 8px; touch-action: none; }
.eg-sirala li .eg-sirala__ok { width: 36px; height: 36px; border-radius: 10px; border: 0; background: rgba(255, 255, 255, 0.07); color: var(--eg-beyaz); cursor: pointer; }
.eg-sirala li.dogru { border-color: var(--eg-dogru); }
.eg-sirala li.yanlis { border-color: var(--eg-yanlis); }
.eg-sirala li.surukleniyor { border-color: var(--eg-altin); box-shadow: 0 14px 30px -12px rgba(0, 0, 0, 0.7); z-index: 2; }

.eg-cark-soru { width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto; position: relative; }
.eg-cark-soru--cevir { touch-action: none; }
.eg-oynatici [hidden] { display: none !important; }
.eg-konfeti { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 40; }
.eg-panel__cik { width: 38px; height: 38px; border-radius: 12px; font-size: 0.95rem; order: 3; margin-left: 4px; }
/* Metin görsellerinde (alıntı, kavram) cümle sahnede büyük yazıldığı için altyazıda tekrarlanmaz. */
.eg-sahne[data-gorsel="alinti"] ~ .eg-altyazi .eg-altyazi__simdi,
.eg-sahne[data-gorsel="alinti"] ~ .eg-altyazi .eg-altyazi__onceki,
.eg-sahne[data-gorsel="kavram"] ~ .eg-altyazi .eg-altyazi__simdi,
.eg-sahne[data-gorsel="kavram"] ~ .eg-altyazi .eg-altyazi__onceki { display: none; }
.eg-cark-soru svg { width: 100%; height: 100%; overflow: visible; }
.eg-cark-soru .dilim { cursor: pointer; transition: fill 0.2s, opacity 0.2s; }

.eg-geri-bildirim {
    margin-top: 16px;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    gap: 12px;
    align-items: flex-start;
    font-size: 0.95rem;
    line-height: 1.5;
}
.eg-geri-bildirim--dogru { background: rgba(61, 220, 151, 0.12); border: 1px solid rgba(61, 220, 151, 0.4); }
.eg-geri-bildirim--yanlis { background: rgba(255, 107, 107, 0.1); border: 1px solid rgba(255, 107, 107, 0.4); }
.eg-geri-bildirim b { display: block; margin-bottom: 4px; }
.eg-geri-bildirim .eg-dayanak { color: var(--eg-soluk); font-style: italic; }
.eg-geri-bildirim i { font-size: 1.3rem; margin-top: 2px; }
.eg-geri-bildirim--dogru i { color: var(--eg-dogru); }
.eg-geri-bildirim--yanlis i { color: var(--eg-yanlis); }

/* Sonuç */
.eg-sonuc { text-align: center; max-width: 640px; margin: 0 auto; padding: 10px 0 20px; }
.eg-puan-halka { width: 190px; height: 190px; margin: 6px auto 8px; position: relative; }
.eg-puan-halka svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.eg-puan-halka__yazi { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; }
.eg-puan-halka__yazi b { font-size: 2.6rem; font-weight: 900; line-height: 1; display: block; }
.eg-puan-halka__yazi small { color: var(--eg-soluk); font-size: 0.85rem; }
.eg-yildizlar { font-size: 1.9rem; letter-spacing: 6px; color: rgba(255, 255, 255, 0.18); margin: 4px 0 6px; }
.eg-yildizlar .dolu { color: var(--eg-altin); text-shadow: 0 0 14px rgba(233, 176, 79, 0.6); }
.eg-inceleme { text-align: left; margin-top: 18px; display: grid; gap: 8px; }
.eg-inceleme details { border-radius: 14px; background: var(--eg-kart); border: 1px solid var(--eg-kenar); }
.eg-inceleme summary { padding: 12px 14px; cursor: pointer; display: flex; gap: 10px; align-items: center; font-weight: 700; list-style: none; }
.eg-inceleme summary::-webkit-details-marker { display: none; }
.eg-inceleme details > div { padding: 0 14px 14px; color: var(--eg-soluk); font-size: 0.92rem; line-height: 1.5; }
.eg-inceleme .ok { color: var(--eg-dogru); }
.eg-inceleme .x { color: var(--eg-yanlis); }

/* ---------- Ders notları ---------- */
.eg-notlar { max-width: 820px; margin: 0 auto; padding: 26px var(--eg-gutter) 70px; position: relative; z-index: 1; }
.eg-notlar h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); font-weight: 900; margin: 6px 0 14px; color: var(--eg-beyaz); }
.eg-notlar h2 { font-size: 1.2rem; font-weight: 800; color: var(--eg-altin-acik); margin: 28px 0 10px; display: flex; gap: 10px; align-items: center; }
.eg-notlar h2 span { flex: 0 0 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: rgba(233, 176, 79, 0.15); color: var(--eg-altin); font-size: 0.82rem; }
.eg-notlar p { color: rgba(244, 241, 234, 0.86); line-height: 1.75; font-size: 1.02rem; margin: 0 0 10px; }
.eg-notlar mark { background: rgba(233, 176, 79, 0.18); color: var(--eg-altin-acik); padding: 0 4px; border-radius: 4px; }
.eg-notlar .eg-kaynakca { margin-top: 34px; padding: 16px; border-radius: var(--eg-yuvarlak); background: var(--eg-kart); border: 1px solid var(--eg-kenar); font-size: 0.9rem; color: var(--eg-soluk); }
.eg-notlar .eg-kaynakca ul { margin: 8px 0 0; padding-left: 18px; }
.eg-notlar__ust { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
@media print {
    .eg-sayfa { background: #fff !important; color: #111 !important; }
    .eg-yildiz-tuvali, header, footer, .eg-yazdirma-gizle { display: none !important; }
    .eg-notlar p, .eg-notlar h1, .eg-notlar h2 { color: #111 !important; }
    .eg-notlar mark { background: #fff3c4; color: #111; }
    body.eg-program-govde :is(#aiAssistantContainer, #abSupport, .ab-support-launcher) { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
    .eg-ders-karti, .eg-dugme, .eg-altyazi__simdi .k, .eg-ilerleme-ozet__dolu { transition: none !important; }
}

/* görsel: liste */
/* Üstte sahne başlığı çipi (~34px) kadar boşluk: tablo başlığı çipin altına girmez. Ortalama taşmaz
   ("safe"; desteklemeyen tarayıcıda düz center, sığmayan tabloyu liste.js zaten ölçekler). */
.eg-liste-kap {
    box-sizing: border-box; width: 100%; height: 100%; padding-top: 34px;
    container-type: size; display: flex; align-items: center; align-items: safe center; justify-content: center;
}
.eg-liste {
    /* --satirEm: bir satırın em cinsinden yüksekliği (aralık dahil); --ekEm: başlık, sütun başlığı ve iç boşluklar */
    --fs: clamp(11px, calc(100cqh / (var(--n) * var(--satirEm, 2.2) + var(--ekEm, 5.4))), 22px);
    font-size: max(11px, min(var(--fs), calc(100cqw / var(--g, calc(var(--s) * 6.4)))));
    width: min(100%, max(calc(var(--s) * 9em + 6em), var(--gw, 0px)));
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.45em;
    color: var(--eg-beyaz);
    font-family: var(--eg-yazi);
    transform-origin: 50% 0;
}
/* Sık tablo (8+ satır): satır yüksekliği, iç boşluk ve aralıklar sıkışır. */
.eg-liste--sik { --satirEm: 1.72; --ekEm: 4.3; gap: 0.3em; }
.eg-liste--sik .eg-liste__tablo { row-gap: 0.1em; padding: 0.3em; }
.eg-liste--sik .eg-liste__satir { padding: 0.2em 0.7em; line-height: 1.15; }
.eg-liste--sik .eg-liste__satir--bas { padding-top: 0.1em; padding-bottom: 0.22em; }
.eg-liste--sik .eg-liste__glif { flex-basis: 1.2em; width: 1.2em; height: 1.2em; }
.eg-liste__baslik {
    display: flex; align-items: center; justify-content: center; gap: 0.6em;
    font-size: max(14px, 1.22em); font-weight: 900; letter-spacing: 0.01em; text-align: center; line-height: 1.2;
    color: var(--eg-altin-acik);
    text-shadow: 0 0 22px rgba(233, 176, 79, 0.35);
}
.eg-liste__yildiz { color: var(--eg-turkuaz); font-size: 0.6em; }
.eg-liste__tablo {
    display: grid;
    row-gap: 0.16em;
    padding: 0.4em;
    border-radius: 1em;
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.02));
    border: 1px solid rgba(127, 224, 180, 0.22);
    box-shadow: 0 18px 40px -24px rgba(0, 0, 0, 0.8);
}
.eg-liste__satir {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
    column-gap: 0.8em;
    padding: 0.36em 0.75em;
    border-radius: 0.6em;
    background: rgba(255, 255, 255, 0.045);
    border-left: 3px solid rgba(233, 176, 79, 0);
    line-height: 1.25;
}
.eg-liste__satir--bas {
    background: none;
    padding-top: 0.15em; padding-bottom: 0.3em;
    font-size: max(11px, 0.74em); font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--eg-turkuaz);
    border-bottom: 1px solid rgba(63, 208, 176, 0.25);
    border-radius: 0;
}
.eg-liste__hucre { display: flex; align-items: center; gap: 0.45em; min-width: 0; color: var(--eg-altin-acik); font-weight: 700; }
.eg-liste__hucre--ilk { color: var(--eg-beyaz); font-weight: 800; }
.eg-liste__metin { min-width: 0; }
.eg-liste__glif { flex: 0 0 1.35em; width: 1.35em; height: 1.35em; overflow: visible; }
/* liste.js: sembollü ve sembolsüz hücreleri karışık sütunda sembolsüz hücrenin görünmez sembol yuvası (metinler hizalı). */
.eg-liste__glif--bos { display: block; visibility: hidden; }
/* Geniş tablo (4+ sütun; liste.js ekler): en küçük yazı 12px, sütun başlıkları tek satır.
   Dar alanda (telefon) sütun aralığı, iç boşluk ve başlık harf aralığı daralır; uzun hücreler kelimeden kırılır.
   2–3 sütunlu tablolar bu kurallardan etkilenmez. */
.eg-liste--genis { font-size: max(12px, min(var(--fs), calc(100cqw / var(--g, calc(var(--s) * 6.4))))); }
.eg-liste--genis .eg-liste__satir--bas { font-size: max(12px, 0.74em); }
.eg-liste--genis .eg-liste__satir--bas > span { white-space: nowrap; }
/* liste.js: tek satırlık başlıklar tabloyu yatayda taşırıyorsa en uzun çok kelimeli başlıklar kelimeden kırılır. */
.eg-liste--genis .eg-liste__satir--bas > span.eg-liste__sar { white-space: normal; }
@container (max-width: 440px) {
    .eg-liste--genis .eg-liste__tablo { padding: 0.25em; }
    .eg-liste--genis .eg-liste__satir { column-gap: 0.5em; padding-left: 0.4em; padding-right: 0.4em; }
    .eg-liste--genis .eg-liste__satir--bas { letter-spacing: 0.02em; }
    .eg-liste--genis .eg-liste__hucre { gap: 0.3em; }
}
/* Dar 2–3 sütunlu tablo (liste.js ekler: telefonda yazı 13px altına inip büyütülürken ya da 11px'te bile yatay
   taşmada): sütun aralığı, iç boşluk, sembol aralığı ve başlık harf aralığı daralır; yazıya yer açılır. */
.eg-liste--dar .eg-liste__tablo { padding: 0.25em; }
.eg-liste--dar .eg-liste__satir { column-gap: 0.55em; padding-left: 0.45em; padding-right: 0.45em; }
.eg-liste--dar .eg-liste__satir--bas { letter-spacing: 0.05em; }
.eg-liste--dar .eg-liste__hucre { gap: 0.3em; }

/* görsel: kapak */
.eg-kapak {
    width: min(100%, 760px);
    display: flex; flex-direction: column; align-items: center; text-align: center;
    gap: clamp(8px, 2.2vh, 18px);
    font-family: var(--eg-yazi);
    perspective: 600px;
}
.eg-kapak__no {
    display: inline-flex; align-items: center; gap: 0.6em;
    padding: 0.4em 1.1em;
    border-radius: 99px;
    border: 1px solid rgba(233, 176, 79, 0.55);
    background: rgba(5, 37, 32, 0.55);
    color: var(--eg-altin-acik);
    font-weight: 900; font-size: clamp(0.8rem, 3.4vw, 1rem); letter-spacing: 0.22em; text-transform: uppercase;
    box-shadow: 0 0 26px -6px rgba(233, 176, 79, 0.45);
}
.eg-kapak__no-yildiz { color: var(--eg-turkuaz); font-size: 0.8em; letter-spacing: 0; }
.eg-kapak__baslik {
    margin: 0;
    font-size: clamp(30px, 9.5vw, 66px);
    font-weight: 900; line-height: 1.08; letter-spacing: -0.01em;
    color: var(--eg-altin-acik);
    text-shadow: 0 2px 0 rgba(5, 37, 32, 0.6), 0 0 34px rgba(233, 176, 79, 0.45);
    text-wrap: balance;
    max-width: 14em;
}
.eg-kapak__baslik--uzun { font-size: clamp(26px, 7.6vw, 54px); }
.eg-kapak__kelime { display: inline-block; }
.eg-kapak__kelime:nth-child(even) { color: #ffd27a; }
.eg-kapak__ayrac { width: min(64%, 300px); height: 24px; overflow: visible; }
.eg-kapak__sahne {
    font-size: clamp(17px, 5vw, 26px); font-weight: 700; line-height: 1.3;
    color: var(--eg-yesil-acik);
    letter-spacing: 0.02em;
    max-width: 22em;
    text-wrap: balance;
}

/* görsel: alinti */
.eg-alinti {
    width: min(100%, 900px);
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center;
    font-family: var(--eg-yazi);
}
.eg-alinti__tirnak {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: clamp(52px, 13vw, 92px);
    line-height: 0.62;
    height: 0.5em;
    color: var(--eg-altin);
    text-shadow: 0 0 24px rgba(233, 176, 79, 0.5);
    align-self: flex-start;
    margin-left: 4%;
}
.eg-alinti__tirnak--alt { align-self: flex-end; margin: 0.2em 4% 0 0; color: var(--eg-turkuaz); text-shadow: 0 0 24px rgba(63, 208, 176, 0.45); }
.eg-alinti__yigin { display: grid; width: 100%; padding: 0.35em 0; }
.eg-alinti__cumle, .eg-kavram__cumle {
    grid-area: 1 / 1;
    margin: 0;
    align-self: center;
    font-weight: 700;
    line-height: 1.4;
    color: rgba(244, 241, 234, 0.5);
    text-wrap: balance;
    overflow-wrap: break-word;
}
.eg-alinti__cumle .k, .eg-kavram__cumle .k { transition: color 0.18s ease, text-shadow 0.18s ease; }
.eg-alinti__cumle .k.okundu, .eg-kavram__cumle .k.okundu { color: var(--eg-beyaz); }
.eg-alinti__cumle .k.simdi, .eg-kavram__cumle .k.simdi { color: var(--eg-altin-acik); text-shadow: 0 0 18px rgba(233, 176, 79, 0.6); }

/* görsel: kavram */
.eg-kavram {
    width: min(100%, 900px);
    height: 100%;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(10px, 3vh, 26px);
    text-align: center;
    font-family: var(--eg-yazi);
}
.eg-kavram__ust { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; }
.eg-kavram__glif { width: clamp(44px, 12vw, 72px); height: clamp(44px, 12vw, 72px); overflow: visible; filter: drop-shadow(0 0 10px rgba(233, 176, 79, 0.45)); }
.eg-kavram__terim {
    font-weight: 900; line-height: 1.1; letter-spacing: 0.01em;
    color: var(--eg-altin);
    text-shadow: 0 0 30px rgba(233, 176, 79, 0.5), 0 2px 0 rgba(5, 37, 32, 0.7);
    white-space: nowrap;
}
.eg-kavram__harf { display: inline-block; }
.eg-kavram__kelime { display: inline-block; white-space: nowrap; }
.eg-kavram__cizgi { width: min(70%, 320px); height: 20px; overflow: visible; }
.eg-kavram__yigin { display: grid; width: 100%; }
.eg-kavram__cumle .k.terim { color: var(--eg-altin-acik); text-decoration: underline; text-decoration-color: rgba(233, 176, 79, 0.75); text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
.eg-kavram__cumle .k.terim.okundu { color: var(--eg-altin); }
@media (prefers-reduced-motion: reduce) {
    .eg-alinti__cumle .k, .eg-kavram__cumle .k { transition: none !important; }
}

/* Eğitim paketi sayfası ve program sayfasındaki paket durumu */
.eg-paket-durum { margin: 14px 0 0; font-size: 0.92rem; color: var(--eg-soluk); }
.eg-paket-durum i { color: var(--eg-altin); margin-right: 6px; }
.eg-paket-durum a { color: var(--eg-altin-yazi, var(--eg-altin-acik)); text-decoration: underline; text-underline-offset: 3px; }
.eg-paket { max-width: 640px; padding-top: 28px; padding-bottom: 56px; }
.eg-paket__kart {
    margin-top: 18px;
    padding: 28px 24px;
    border-radius: var(--eg-yuvarlak);
    background: var(--eg-kart);
    box-shadow: inset 0 0 0 1px var(--eg-kenar);
}
.eg-paket__kart h1 { margin: 12px 0 6px; font-size: clamp(1.7rem, 5vw, 2.3rem); font-weight: 900; }
.eg-paket__fiyat { display: flex; align-items: baseline; gap: 6px; margin: 18px 0 8px; }
.eg-paket__fiyat b { font-size: clamp(2.2rem, 8vw, 3rem); font-weight: 900; color: var(--eg-altin-yazi, var(--eg-altin-acik)); font-variant-numeric: tabular-nums; }
.eg-paket__fiyat span { color: var(--eg-soluk); font-weight: 700; }
.eg-paket__liste { margin: 14px 0 6px; }
.eg-paket__form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.eg-paket__not { margin: 16px 0 0; font-size: 0.8rem; color: var(--eg-cok-soluk); }
@media (max-width: 420px) {
    .eg-paket__kart { padding: 22px 16px; }
    .eg-paket__form .eg-dugme { width: 100%; justify-content: center; }
}