/* ═══════════════════════════════════════════════════════════════════════
   ELEK ÇİZGİSİ görünümü (M3 · Bölüm 3, 11 Ağu 2026)

   Ayrı dosya + uzun ömürlü önbellek: adres sonundaki ?v=… damgası yayında
   otomatik basılır (bağlantı taranarak bulunur — elle liste yok).

   Renk kimliği: elek ALTIN ailesindendir (mühür/kitaplık akrabası); işlenmemiş
   taneler nazar mavisinin soluk tonunda durur, ayrışınca altına döner.
   Kırmızı-yeşil kodlama ASLA — yanlış bir kusur değil, ayrıştırılacak tanedir.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Denemelerim listesi ─────────────────────────────────────────────── */
.ek-satir {
    display: flex; align-items: center; gap: 10px; width: 100%;
    padding: 12px; margin-bottom: 9px; border-radius: 14px; cursor: pointer;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    color: #e2e8f0; font-family: inherit; text-align: left;
}
.ek-satir:hover { background: rgba(255, 255, 255, 0.06); }
.ek-satir-ic { min-width: 0; flex: 1; }
.ek-satir-ic b { display: block; font-size: 0.9em; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ek-satir-ic small { display: block; margin-top: 3px; font-size: 0.74em; color: #64748b; }
.ek-satir-net { flex: 0 0 auto; text-align: right; font-weight: 700; color: #e8d5a8; font-variant-numeric: tabular-nums; }
.ek-satir-net small { display: block; font-size: 0.56em; font-weight: 400; color: #64748b; letter-spacing: 0.5px; }
/* Listede de aynı düzen: yüzde solda ve gri, net sağda ve altın. */
.ek-satir-yuzde { flex: 0 0 auto; text-align: right; font-size: 0.9em; font-weight: 600; color: #94a3b8; font-variant-numeric: tabular-nums; }
.ek-satir-yuzde small { display: block; font-size: 0.62em; font-weight: 400; color: #64748b; letter-spacing: 0.5px; }
.ek-satir .ok { flex: 0 0 auto; color: #64748b; }

/* ── Katlanır bölüm (24 Ağu) ─────────────────────────────────────────────
   Tarayıcının kendi <details> öğesi: klavye ve ekran okuyucu desteği hazır
   gelir, açık/kapalı durumunu tutmak gerekmez.
   Başlıktaki SAYI şart — kapalı bölüm ne barındırdığını söylemeli. */
.ek-kat { margin-bottom: 11px; }
.ek-kat > summary {
    display: flex; align-items: center; gap: 8px; padding: 10px 12px;
    border-radius: 12px; cursor: pointer; list-style: none;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ek-kat > summary::-webkit-details-marker { display: none; }
.ek-kat > summary:hover { background: rgba(255, 255, 255, 0.05); }
.ek-kat > summary .kb { flex: 1; min-width: 0; font-size: 0.82em; color: #cbd5e1; }
.ek-kat > summary .ks {
    flex: 0 0 auto; padding: 1px 8px; border-radius: 8px; font-size: 0.72em; font-weight: 700;
    background: rgba(255, 255, 255, 0.07); color: #94a3b8; font-variant-numeric: tabular-nums;
}
.ek-kat > summary .ko { flex: 0 0 auto; font-style: normal; color: #64748b; transition: transform 0.18s ease; }
.ek-kat[open] > summary .ko { transform: rotate(180deg); }
.ek-kat[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.ek-kat-ic { padding: 10px 2px 2px; }
@media (prefers-reduced-motion: reduce) { .ek-kat > summary .ko { transition: none; } }

/* ── Deneme aileleri (23 Ağu) ────────────────────────────────────────────
   Çatı ailenin adını ve gidişatını söyler; satırlar çatının altında durur.
   Çatı TIKLANMAZ — aile bir kapı değil, bir başlık. (Tıklanır yapmak "aile
   karnesi" diye olmayan bir ekran vaat ederdi.) */
.ek-grup { margin-bottom: 14px; }
.ek-grup > summary { list-style: none; cursor: pointer; }
.ek-grup > summary::-webkit-details-marker { display: none; }
.ek-grup-bas {
    display: flex; align-items: center; gap: 10px; padding: 4px; border-radius: 12px;
}
.ek-grup > summary:hover .ad b { color: #f0e2bd; }

/* ⚠️ ÇATIDA İKİ HEDEF VAR: çatının kendisi açar/kapatır, bu düğme AİLE
   EKRANINI açar. Ayrı ve dokunulabilir bir alan olması şart — iki iş aynı
   dokunuşa binemez. */
.ek-aile-kapi {
    flex: 0 0 auto; display: grid; place-items: center; cursor: pointer;
    width: 28px; height: 28px; border-radius: 9px; font-size: 1.05em; line-height: 1;
    background: rgba(212, 175, 106, 0.09); border: 1px solid rgba(212, 175, 106, 0.28);
    color: #e8d5a8;
}
.ek-aile-kapi:hover, .ek-aile-kapi:focus-visible {
    background: rgba(212, 175, 106, 0.17); outline: none;
}
.ek-grup-bas .ad { min-width: 0; flex: 1; }
.ek-grup-bas .ad b { display: block; font-size: 0.92em; font-weight: 700; color: #e8d5a8; }
.ek-grup-bas .ad small { display: block; margin-top: 2px; font-size: 0.72em; color: #64748b; }
.ek-mini { flex: 0 0 auto; width: 70px; height: 26px; display: block; }

/* Ailenin içi hafifçe içeri çekiliyor: satırlar çatıya AİT görünsün. */
.ek-grup-ic { padding-left: 10px; border-left: 1px solid rgba(212, 175, 106, 0.16); }
.ek-grup-ic .ek-satir:last-child { margin-bottom: 0; }

.ek-bos {
    padding: 14px; margin-bottom: 9px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.14);
    color: #94a3b8; font-size: 0.85em; line-height: 1.55; text-align: center;
}

/* ── Elek töreni KALDIRILDI (23 Ağu, 7. sürüm kararı) ────────────────────
   Karnenin başında dağınık noktalar 1,5 saniyede bir çizginin altına
   hizalanıyordu ("32 tane elekten geçti"). Tören güzeldi ama karnenin
   ilk sözü oydu: öğrenci netini görmeden önce yanlışlarının sayısını
   görüyordu. Karne artık doğrudan netle açılıyor.
   .ek-elek / .ek-duzlem / .ek-nokta / .ek-soz kuralları buradan silindi. */

/* ── Net + ders satırları ────────────────────────────────────────────── */
.ek-net { text-align: center; margin: 4px 0 10px; }
.ek-net b { font-size: 2em; color: #e8d5a8; font-variant-numeric: tabular-nums; }
.ek-net span { display: block; font-size: 0.62em; color: #64748b; letter-spacing: 0.6px; }
/* Yüzde netin SESSİZ İKİZİ: küçük ve gri, altında. Altın rengi netin —
   yüzde bir kaynak değil, okuma kolaylığı (deneme boyları eşit değil). */
.ek-net .ek-oran { margin-top: 5px; font-size: 0.72em; color: #64748b; font-variant-numeric: tabular-nums; }
.ek-net .ek-oran b { font-size: 1em; font-weight: 700; color: #94a3b8; }

.ek-kart {
    padding: 4px 12px; margin-bottom: 11px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
/* ⚠️ 5 EYL: satıra ± ve çubuk eklenince eski düz flex kırıldı — ders adı
   iki satıra sarıyor, yüzde adın ARKASINDA kalıyordu (canlı ekran provasında
   görüldü). Artık sarabilen bir satır: dört hane üstte, çubuk altta tam
   genişlikte. Ad sarmaz, sığmazsa üç noktayla kesilir. */
.ek-ders {
    display: flex; flex-wrap: wrap; align-items: center; gap: 4px 9px; padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.86em;
}
.ek-ders:last-child { border-bottom: none; }
.ek-ders .da {
    min-width: 0; flex: 1 1 40%; color: #e2e8f0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "geçen: 19,75" artık dersin ALTINDA duruyor: satırın sağ ucu netin ve
   yüzdenin oldu, kıyas sola çekildi. Kıyas hâlâ yorumsuz — ok yok, renk yok. */
.ek-ders .df { display: block; margin-top: 2px; font-size: 0.78em; color: #64748b; font-variant-numeric: tabular-nums; }
.ek-ders .dy { flex: 0 0 auto; font-size: 0.86em; color: #64748b; font-variant-numeric: tabular-nums; }
.ek-ders .dn { flex: 0 0 auto; min-width: 46px; text-align: right; font-weight: 700; color: #e8d5a8; font-variant-numeric: tabular-nums; }

/* ── Aileler + çipler ────────────────────────────────────────────────── */
.ek-bolum {
    margin: 14px 0 7px; font-size: 0.68em; color: #64748b;
    letter-spacing: 0.5px; text-transform: uppercase;
}
.ek-aile { padding: 8px 0; }
.ek-aile .ab { display: flex; justify-content: space-between; font-size: 0.8em; margin-bottom: 5px; }
.ek-aile .ab b { color: #e2e8f0; font-weight: 600; }
.ek-aile .ab span { color: #94a3b8; font-variant-numeric: tabular-nums; }
.ek-aile .ac { height: 7px; border-radius: 4px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.ek-aile .ac i { display: block; height: 100%; border-radius: 4px; background: #d4af6a; }

.ek-cipler { margin-bottom: 4px; }
.ek-cip {
    display: inline-flex; align-items: center; gap: 5px; margin: 0 5px 6px 0;
    padding: 4px 9px; border-radius: 9px; font-size: 0.74em;
    background: rgba(74, 127, 181, 0.12); border: 1px solid rgba(74, 127, 181, 0.35);
    color: #bcd9f5;
}
.ek-cip b { color: #dcebfa; font-weight: 700; }

.ek-not {
    margin-bottom: 11px; padding: 9px 11px; border-radius: 12px;
    font-size: 0.78em; line-height: 1.5; color: #cbb488;
    background: rgba(212, 175, 106, 0.06); border: 1px solid rgba(212, 175, 106, 0.2);
}

/* ── Konu taneleri ───────────────────────────────────────────────────── */
.ek-konu {
    display: flex; gap: 9px; align-items: flex-start; padding: 9px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.ek-konu:last-child { border-bottom: none; }
.ek-konu .kt {
    flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; margin-top: 5px;
    background: #d4af6a; box-shadow: 0 0 6px rgba(212, 175, 106, 0.4);
}
.ek-konu .ki { min-width: 0; flex: 1; }
.ek-konu .ka { font-size: 0.86em; font-weight: 600; color: #e2e8f0; }
.ek-konu .kd { margin-top: 1px; font-size: 0.7em; color: #64748b; }
.ek-konu .kc { margin-top: 6px; }

/* İşlenmeyi bekleyen kayıt: noktası BİLEREK soluk mavi — henüz işlenmemiş.
   Kırmızı bir uyarı DEĞİL. */
.ek-konu.bekleyen .kt { background: rgba(74, 127, 181, 0.55); box-shadow: none; }

/* ── Analiz bekleyen KAYIT satırı (7. sürüm) ─────────────────────────────
   Noktanın yerini sayı aldı: o kayıtta kaç yanlış+boş var, yani "kaç soruya
   dönebilirsin". Sayı SUÇLAMA DEĞİL, ölçü — bu yüzden kırmızı değil, kayıt
   hangi ailedeyse o rengin halkası. */
.ek-konu .sy {
    flex: 0 0 auto; display: grid; place-items: center; margin-top: 1px;
    width: 30px; height: 30px; border-radius: 50%;
    font-size: 0.76em; font-weight: 700; font-style: normal;
    font-variant-numeric: tabular-nums;
    border: 1.5px solid rgba(74, 127, 181, 0.5); color: #bcd9f5;
}
/* Analiz edilmiş kayıt altına döner (elek dilinin devamı) ve söner: iş
   listesinin başında değil, sonunda durur. */
.ek-konu.bitti { opacity: 0.62; }
.ek-konu.bitti .sy { border-color: rgba(212, 175, 106, 0.45); color: #cbb488; }
.ek-konu.bitti .kd b { color: #cbb488; font-weight: 600; }
.ek-dug.incele.sonuk { background: transparent; border-color: rgba(212, 175, 106, 0.22); color: #a89263; }

/* "N kayıt daha": listeyi KESMEZ, katlar. Kaç kayıt beklediği ve en eskisinin
   tarihi satırın üstünde yazar — yani gizlenen bir şey yok, ertelenen var. */
.ek-daha {
    display: flex; align-items: center; gap: 8px; width: 100%;
    padding: 11px 0 4px; cursor: pointer; text-align: left;
    background: none; border: none; border-top: 1px solid rgba(255, 255, 255, 0.06);
    color: #94a3b8; font-family: inherit; font-size: 0.82em;
}
.ek-daha span { font-weight: 600; }
.ek-daha small { flex: 1; font-size: 0.82em; color: #64748b; }
.ek-daha i { font-style: normal; color: #64748b; }

/* ── Ders sekmeleri (bekleyen taneler odası) ─────────────────────────────
   Tek uzun liste "ne kadar borcum varmış" duygusu veriyordu (canlıda bir
   öğrencide 21 konu birden). Sekmeler listeyi bir dersin yüküne indirir —
   hiçbir tane kaybolmaz, yalnız bir seferde biri görünür. Seçili sekme MAVİ
   ailesinde: bunlar henüz işlenmemiş taneler, altın incelemeyle hak edilir. */
.ek-sekme {
    display: flex; gap: 7px; margin-bottom: 10px; padding-bottom: 3px;
    overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.ek-sekme::-webkit-scrollbar { display: none; }
.ek-sekme .es {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; border-radius: 11px; cursor: pointer; white-space: nowrap;
    font-family: inherit; font-size: 0.78em; font-weight: 600;
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.1);
    color: #94a3b8;
}
.ek-sekme .es b {
    padding: 1px 6px; border-radius: 7px; font-size: 0.88em; font-weight: 700;
    background: rgba(255, 255, 255, 0.07); color: #cbd5e1;
}
.ek-sekme .es.secili {
    background: rgba(74, 127, 181, 0.16); border-color: rgba(74, 127, 181, 0.5); color: #dcebfa;
}
.ek-sekme .es.secili b { background: rgba(74, 127, 181, 0.3); color: #eaf4ff; }

/* Satır düğmeleri: "↻ çalış" nazar mavisi (yeni emek), "incele" altın
   (ayrıştırma işi). Üçüncü bir renk YOK. */
.ek-dug {
    flex: 0 0 auto; align-self: center; width: auto;
    padding: 7px 12px; border-radius: 10px; cursor: pointer;
    font-family: inherit; font-size: 0.76em; font-weight: 700; white-space: nowrap;
}
.ek-dug.calis  { background: rgba(0, 242, 254, 0.10); border: 1px solid rgba(0, 242, 254, 0.35); color: #a5e8f2; }
.ek-dug.incele { background: rgba(212, 175, 106, 0.10); border: 1px solid rgba(212, 175, 106, 0.40); color: #e8d5a8; }

/* ── Çizgin (eski adı "gel-git") ──────────────────────────────────────
   Ad 23 Ağu'da değişti: "gel-git" uygulamada zaten örüntü/duygu ekranının
   adı, iki yerde durması ikisini de bulanıklaştırıyordu. Sınıf adları
   (.ek-gelgit) BİLEREK aynı kaldı — ad değişikliği görünen yüzdedir,
   sınıf adını değiştirmek başka ekranları riske atar. */
.ek-gelgit {
    padding: 10px 8px 6px; margin-bottom: 11px; border-radius: 14px;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ek-gelgit svg { width: 100%; height: 96px; display: block; }
.ek-gelgit .gy {
    display: flex; justify-content: space-between; padding: 2px 6px 4px;
    font-size: 0.64em; color: #64748b;
}

/* ── Profildeki kapılar (hesap ekranı — kitaplık kapısının kardeşleri) ──
   İKİ KAPI: karne ALTIN (ayrışmış, anlatılmış bilgi), bekleyen taneler
   MAVİ (henüz işlenmemiş). Renk farkı adres farkıdır — öğrenci hangisine
   bastığını okumadan da bilir. */
#hs-elek, #hs-taneler {
    display: flex; align-items: center; gap: 11px; width: 100%;
    padding: 12px; margin-bottom: 14px; border-radius: 14px; cursor: pointer;
    font-family: inherit; text-align: left;
}
#hs-elek {
    background: rgba(212, 175, 106, 0.07); border: 1px solid rgba(212, 175, 106, 0.25);
    color: #e8d5a8;
}
#hs-taneler {
    background: rgba(74, 127, 181, 0.08); border: 1px solid rgba(74, 127, 181, 0.3);
    color: #dcebfa;
}
#hs-elek .ad, #hs-taneler .ad { flex: 1; font-size: 0.95em; font-weight: 600; }
#hs-elek .ad small, #hs-taneler .ad small {
    display: block; margin-top: 3px; font-size: 0.75em; font-weight: 400; color: #94a3b8;
}
#hs-elek .ok, #hs-taneler .ok { color: #64748b; }

/* ── Ders ekranı (7. sürüm · Ekran 2) ─────────────────────────────────── */

/* Karnedeki ders satırı artık bir KAPI: ok işareti ve dokunma geri bildirimi
   var. Renk DEĞİŞMİYOR — kapı olması satırı vurgulamaz, yalnız tıklanır
   yapar (kıyas hâlâ yorumsuz). */
.ek-ders.kapi { cursor: pointer; margin: 0 -6px; padding-left: 6px; padding-right: 6px; border-radius: 10px; }
.ek-ders.kapi:hover, .ek-ders.kapi:focus-visible { background: rgba(255, 255, 255, 0.045); outline: none; }
.ek-ders .ok { flex: 0 0 auto; color: #475569; font-size: 0.9em; }

/* İKİ TİP YAN YANA: aynı çizgiye girmeyen iki ölçü. Genel altın ailesinden
   (deneme), lokal nazar mavisi (branş). Boş kutu "—" ve "henüz yok" der;
   sıfır YAZMAZ — sıfır bir sonuçtur, yokluk değil. */
.ek-tipler { display: flex; gap: 9px; margin-bottom: 11px; }
.ek-tip {
    flex: 1; min-width: 0; padding: 11px 12px; border-radius: 14px; text-align: center;
    background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08);
}
.ek-tip .et { font-size: 0.68em; color: #64748b; letter-spacing: 0.4px; }
.ek-tip b { display: block; margin: 5px 0 2px; font-size: 1.5em; font-variant-numeric: tabular-nums; }
.ek-tip small { font-size: 0.68em; color: #64748b; }
.ek-tipler .ek-tip:first-child b { color: #e8d5a8; }
.ek-tipler:not(.ucler) .ek-tip:last-child b { color: #bcd9f5; }
/* Aile ekranındaki üçlü: üçü de aynı ölçünün parçası, üçü de altın. */
.ek-tipler.ucler .ek-tip b { color: #e8d5a8; }
/* Veri yoksa kutu susar: "—" bir değer değil, bir yokluk işaretidir. */
.ek-tipler .ek-tip.bos b { color: #475569; font-size: 1.2em; }

/* Konu satırındaki İŞARET kutusu. Etiket bilerek yazılı: işaret ≠ tane
   (exam_errors'ta konu başına soru sayısı YOK — "3 tane" doğrulanamaz). */
.ek-konu .sy.iki {
    width: 38px; height: 38px; border-radius: 11px; display: flex;
    flex-direction: column; align-items: center; justify-content: center; gap: 0;
    border-color: rgba(212, 175, 106, 0.4); color: #e8d5a8;
}
.ek-konu .sy.iki b { font-size: 1.05em; font-weight: 700; line-height: 1.1; }
.ek-konu .sy.iki small { font-size: 0.5em; letter-spacing: 0.3px; color: #8d7c58; }

/* Kaynak çipi: konunun hangi denemeden geldiği. Çip ailesi mavi (işlenmemiş
   veri); kaynak çipi altın çünkü o BİLGİ, bekleyen bir iş değil. */
.ek-cip.kaynak {
    background: rgba(212, 175, 106, 0.1); border-color: rgba(212, 175, 106, 0.32); color: #cbb488;
}
.ek-cip.kaynak b { color: #e8d5a8; }

/* ── ANALİZ KAPISI (25 Ağu) ───────────────────────────────────────────────
   Deneme Karnen'in içinden analiz sayfasına açılan tek kapı. Altın çerçeve:
   bu bir AYAR değil, bir iş — kitaplık ve elek kapılarıyla aynı aile. */
.ek-analiz-kapi {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 6px; padding: 13px 14px; border-radius: 14px;
    text-decoration: none; cursor: pointer;
    background: rgba(212, 175, 106, 0.07);
    border: 1px solid rgba(212, 175, 106, 0.28);
}
.ek-analiz-kapi:hover { background: rgba(212, 175, 106, 0.12); }
.ek-ak-yz { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ek-ak-yz b { font-size: 0.9em; font-weight: 700; color: #e8d5a8; }
.ek-ak-yz i { font-size: 0.75em; font-style: normal; line-height: 1.45; color: #96a5b8; }
.ek-ak-ok { flex: none; font-size: 1.2em; color: #8a7442; }

/* ── NETLERİ GİRİLMEMİŞ DENEME SATIRI (3 Eylül 2026) ─────────────────────
   Satır bir KAPIDIR (analiz ekranına), o yüzden diğer satırlarla aynı
   gövdede durur; ayrımı sağdaki çağrı yapar. Kırmızı/uyarı rengi YOK:
   eksiklik bir suç değil, yapılacak bir iş. */
.ek-satir-bos { text-decoration: none; }
.ek-satir-gir {
    flex: 0 0 auto; padding: 5px 11px; border-radius: 999px;
    font-size: 0.72em; font-weight: 700; letter-spacing: 0.02em;
    color: var(--ek-altin-yazi, #e7d3a8);
    background: rgba(212, 175, 106, 0.12);
    border: 1px solid rgba(212, 175, 106, 0.3);
}

/* ── SATIR BAŞLIĞI: AD + KAYNAK (4 Eyl 2026, kullanıcı kararı) ────────────
   "Deneme adı yazsın, yanında seçili kaynak desin." Ad kimliği taşır ve
   YERİ DARALDIĞINDA ÜÇ NOKTAYA DÜŞEN odur; kaynak etiketi kısa olduğu için
   kırpılmaz (flex: 0 0 auto). Kaynak yoksa etiket hiç çizilmez. */
.ek-satir-ust { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ek-satir-ust b { flex: 0 1 auto; }
.ek-satir-kaynak {
    flex: 0 0 auto; font-style: normal; font-size: 0.72em; color: #94a3b8;
    padding: 1px 6px; border-radius: 999px; background: rgba(148, 163, 184, 0.12);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}

/* ═══════════════════ AYNA (5 Eylül 2026) ═══════════════════════════════
   Karnenin girişi bir rapor değil AYNA: bekleyenler · aile kartları · ders
   kavşakları. Renk kimliği değişmedi — altın ailesi, kırmızı YOK. Yeşil
   yalnız "net" ölçüsünde, mavi yalnız "lokal"de: ikisi de kronometrenin
   kendi paletinden (--ss-var / --ss-dinlenme akrabası).
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bekleyenler şeridi ── borç dili yok, sayı yok, kırmızı yok */
.ek-bekle {
    border: 1px solid rgba(212, 175, 106, 0.35); background: rgba(212, 175, 106, 0.06);
    border-radius: 16px; padding: 12px 13px; margin-bottom: 12px;
}
.ek-bekle-bas { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ek-bekle-bas b { font-size: 0.92em; font-weight: 600; color: #e8d5a8; }
.ek-bekle-bas small { font-size: 0.74em; color: #94a3b8; }
.ek-bek {
    display: flex; align-items: center; gap: 8px; padding: 9px 0 0;
    color: #e2e8f0; text-decoration: none;
}
.ek-bek-ad { flex: 1; min-width: 0; font-size: 0.86em; }
.ek-bek-ad small { display: block; margin-top: 2px; font-size: 0.8em; color: #64748b; }
.ek-bek-gir {
    flex: none; border: 1px solid rgba(212, 175, 106, 0.7); color: #e8d5a8;
    border-radius: 999px; padding: 5px 11px; font-size: 0.78em; font-weight: 500;
}
/* Eskiler aya katlanır — SİLİNMEZ. Kapalı hâli de ne barındırdığını söyler. */
.ek-ay > summary {
    list-style: none; cursor: pointer; padding: 8px 0 0;
    font-size: 0.78em; color: #64748b;
}
.ek-ay > summary::-webkit-details-marker { display: none; }
.ek-ay > summary::after { content: ' ›'; }
.ek-ay[open] > summary::after { content: ' ˅'; }

/* ── Süzgeç: Denemelerin · Derslerin ──
   İki bölüm alt alta uzamıyor; öğrenci hangisine bakacağını seçiyor. */
.ek-suzgec {
    display: flex; background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 999px;
    padding: 3px; margin: 12px 0 10px;
}
.ek-suzgec span {
    flex: 1; text-align: center; padding: 8px 0; border-radius: 999px;
    font-size: 0.86em; color: #94a3b8; cursor: pointer;
}
.ek-suzgec span.secili { background: rgba(212, 175, 106, 0.16); color: #e8d5a8; font-weight: 600; }

/* ── Pencere çipleri: son 5 · son 10 · tümü ──
   TEK PENCERE, HER ÖLÇÜ. Çip yalnız veri yetiyorsa çizilir (sunucu karar
   verir) — ölü düğme yok. */
.ek-pencere { display: flex; gap: 5px; margin: 0 0 10px; }
.ek-pencere span {
    border: 1px solid rgba(255, 255, 255, 0.12); color: #64748b;
    border-radius: 999px; padding: 4px 11px; font-size: 0.74em; cursor: pointer;
}
.ek-pencere span.secili { border-color: rgba(212, 175, 106, 0.6); color: #e8d5a8; }

/* ── Ders çipleri: SATIRA SIĞMAZSA ALT SATIRA SARAR (kullanıcı kararı) ──
   Yatay kaydırma listenin sonundaki dersi gizliyordu. */
.ek-cipler { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.ek-cipler span {
    border: 1px solid rgba(255, 255, 255, 0.12); color: #94a3b8;
    border-radius: 999px; padding: 4px 11px; font-size: 0.78em; cursor: pointer;
}
.ek-cipler span.secili { border-color: rgba(143, 180, 217, 0.7); color: #8FB4D9; }

/* ── Aile kartı: ad · cümle · mini çizgi · son/en yüksek ── */
.ek-aile-kart {
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 13px 14px; margin-bottom: 10px; cursor: pointer;
}
.ek-aile-kart:hover { background: rgba(255, 255, 255, 0.06); }
.ek-ak-bas { display: flex; align-items: center; gap: 10px; }
.ek-ak-bas .ad { flex: 1; min-width: 0; }
.ek-ak-bas .ad b { display: block; font-size: 0.98em; font-weight: 600; }
.ek-ak-bas .ad small { display: block; margin-top: 2px; font-size: 0.78em; color: #94a3b8; }
.ek-ak-bas .ok { color: #64748b; }
.ek-ak-cumle { margin: 9px 0 6px; font-size: 0.9em; line-height: 1.45; color: #e2e8f0; }
.ek-ak-cumle b { color: #7FC79A; font-weight: 600; }
.ek-ak-alt { display: flex; align-items: center; gap: 10px; }
.ek-ak-alt .sayilar {
    flex: 1; font-size: 0.78em; color: #94a3b8; font-variant-numeric: tabular-nums;
}
.ek-ak-alt .sayilar b { color: #e8d5a8; font-weight: 600; }

/* ── Ders kavşağı satırı: ailedeki payı · lokali · emek çubuğu ── */
.ek-ders-kart {
    display: grid; grid-template-columns: 1fr auto auto 14px; gap: 6px 12px;
    align-items: center; background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 16px;
    padding: 12px 14px; margin-bottom: 9px; cursor: pointer;
}
.ek-ders-kart:hover { background: rgba(255, 255, 255, 0.06); }
.ek-ders-kart .ad { min-width: 0; }
.ek-ders-kart .ad b { display: block; font-size: 0.9em; font-weight: 500; }
.ek-ders-kart .ad small { display: block; margin-top: 2px; font-size: 0.76em; color: #64748b; }
.ek-ders-kart .olcu {
    text-align: right; font-variant-numeric: tabular-nums;
    font-size: 0.92em; font-weight: 600;
}
.ek-ders-kart .olcu small {
    display: block; font-size: 0.62em; font-weight: 400; color: #64748b; letter-spacing: 0.5px;
}
.ek-ders-kart .olcu.genel { color: #7FC79A; }
.ek-ders-kart .olcu.lokal { color: #8FB4D9; }
.ek-ders-kart .ok { color: #64748b; }
.ek-ders-kart .emek { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.ek-ders-kart .emek .yol {
    display: block; height: 3px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.08); position: relative;
}
.ek-ders-kart .emek .yol b {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #d4af6a;
}
.ek-ders-kart .emek small { font-size: 0.72em; color: #8a7442; font-variant-numeric: tabular-nums; }

/* ── Ayna cümlesi: kıyas ve referansı ── */
.ek-ayna { margin: 10px 0 4px; font-size: 0.95em; line-height: 1.5; color: #e2e8f0; }
.ek-ayna b { color: #7FC79A; font-weight: 600; }
.ek-ayna small { display: block; margin-top: 3px; font-size: 0.78em; color: #64748b; }

/* ── Kavşak cümlesi ── */
.ek-kavsak { margin-top: 10px; font-size: 0.9em; line-height: 1.45; color: #e2e8f0; }
.ek-kavsak b { color: #7FC79A; font-weight: 600; }
.ek-kavsak small { display: block; margin-top: 4px; font-size: 0.8em; color: #64748b; }

/* ── Emek · net: iki gerçek yan yana (kestirim DEĞİL) ── */
.ek-emek .es {
    display: grid; grid-template-columns: 42px 1fr 44px; align-items: center;
    gap: 8px; font-size: 0.78em; color: #94a3b8; margin: 6px 0;
}
.ek-emek .yol {
    display: block; height: 5px; border-radius: 3px;
    background: rgba(255, 255, 255, 0.07); position: relative;
}
.ek-emek .yol b { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; }
.ek-emek .yol b.altin { background: #d4af6a; }
.ek-emek .yol b.yesil { background: #7FC79A; }
.ek-emek .dg { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.ek-emek .dg.altin { color: #e8d5a8; }
.ek-emek .dg.yesil { color: #7FC79A; }
.ek-emek .ec { margin-top: 8px; font-size: 0.9em; line-height: 1.45; color: #e2e8f0; }
.ek-emek .ec b { color: #e8d5a8; font-weight: 600; }
.ek-emek .eg { margin-top: 4px; font-size: 0.78em; color: #64748b; line-height: 1.5; }

/* ── Ders satırında ± ve çubuk ──
   Yeşil çubuk BU deneme, ince altın çizgi PENCERE ORTALAMASI: çubuk çizgiyi
   geçtiyse yükselmiş. Kırmızı YOK — düşüş gri, suçlama değil bilgi. */
.ek-ders .dfark {
    flex: none; text-align: right; min-width: 40px;
    font-size: 0.82em; font-variant-numeric: tabular-nums;
}
.ek-ders .dfark.art { color: #7FC79A; }
.ek-ders .dfark.eks { color: #94a3b8; }
.ek-ders .dcubuk {
    flex-basis: 100%; height: 3px; border-radius: 2px; margin-top: 4px;
    background: rgba(255, 255, 255, 0.07); position: relative;
}
.ek-ders .dcubuk i {
    position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: #7FC79A;
}
.ek-ders .dcubuk em { position: absolute; top: -3px; width: 2px; height: 9px; background: #d4af6a; }

/* ── Zorluk çipi ve çizgi lejantı ── */
.ek-zor {
    display: inline-block; border: 1px solid rgba(255, 255, 255, 0.16); color: #94a3b8;
    border-radius: 999px; padding: 1px 8px; font-size: 0.74em; margin-left: 6px;
    vertical-align: middle;
}
.ek-zor.agir { border-color: rgba(212, 175, 106, 0.5); color: #e8d5a8; }
.ek-gelgit .gl { margin-top: 4px; font-size: 0.72em; color: #64748b; }
.ek-gelgit .gl i {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    border: 2px solid rgba(212, 175, 106, 0.75); vertical-align: middle; margin-right: 5px;
}

/* ── "✎ adını yaz" — zorunlu değil, ama kapı hep durur ── */
.ek-kalem {
    margin-left: 8px; border: 1px solid rgba(255, 255, 255, 0.14); background: none;
    color: #64748b; border-radius: 999px; padding: 2px 9px; font-size: 0.62em;
    font-family: inherit; cursor: pointer; vertical-align: middle;
}
.ek-kalem:hover { color: #e8d5a8; border-color: rgba(212, 175, 106, 0.5); }

/* Sade not satırı: pencere etiketi ve "son · en yüksek" burada durur. */
.ek-not.sade { color: #64748b; font-size: 0.78em; margin: 6px 2px 12px; background: none; border: 0; padding: 0; }

/* ═══════════════════ MAKETE BİREBİR (5 Eylül 2026, 2. tur) ═════════════
   Kullanıcı: "tasarım renkleri böyle değil, bölümler kurgusu birebir
   yapılmamış." Maket: lacivert degrade zemin, her bölüm kendi kartında,
   çipler kartın İÇİNDE, katlanır yerine düz başlık.
   ═══════════════════════════════════════════════════════════════════════ */

/* Zemin: maketin lacivert degradesi — karne odası kendi rengini taşır. */
#elek-overlay { background: linear-gradient(160deg, #0f172a 0%, #1e1b4b 100%); }
#elek-overlay .od-title { color: #e2e8f0; font-size: 1.05em; letter-spacing: 0; text-transform: none; font-weight: 600; }
#elek-overlay .od-sub { color: #94a3b8; font-size: 0.8em; }
#elek-overlay .ek-bolum { color: #8a7442; font-size: 0.72em; letter-spacing: 1.2px; text-transform: uppercase; margin: 16px 2px 8px; }
#elek-overlay .ek-kart {
    background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px; padding: 13px 14px; margin-bottom: 10px;
}
#elek-overlay .ek-bos {
    background: rgba(255, 255, 255, 0.03); border: 1px dashed rgba(255, 255, 255, 0.1);
    border-radius: 16px; color: #94a3b8;
}

/* Özet kartı: net büyük, altında tek satır, sonra cümle. */
.ek-ozet .ek-net { margin: 4px 0 8px; }
.ek-ozet .ek-net b { font-size: 2.3em; font-weight: 700; letter-spacing: -1px; }
.ek-ozet .ek-net span { font-size: 0.82em; color: #94a3b8; letter-spacing: 0; margin-top: 2px; }
.ek-ozet .ek-ayna { margin: 6px 0 2px; }
.ek-ozet .ek-pencere { margin-bottom: 8px; }
.ek-not.sade.ic { margin: 8px 0 0; }
.ek-iki .ek-tipler { margin-bottom: 0; }
.ek-iki .ek-kavsak { margin-top: 12px; }

/* Bekleyenler: KAPALI AÇILIR — girişte yalnız başlık satırı durur. */
details.ek-bekle { padding: 0; }
details.ek-bekle > summary.ek-bekle-bas {
    list-style: none; cursor: pointer; padding: 12px 13px; align-items: center;
}
details.ek-bekle > summary::-webkit-details-marker { display: none; }
details.ek-bekle > summary .ko { flex: none; font-style: normal; color: #8a7442; margin-left: 8px; transition: transform 0.18s ease; }
details.ek-bekle[open] > summary .ko { transform: rotate(180deg); }
.ek-bekle-ic { padding: 0 13px 12px; }
.ek-bek-ad small.yer { color: #94a3b8; font-size: 0.82em; margin-top: 3px; }

/* Ad yerinde yazılır: başlık satırı kutuya döner, Kaydet ile yerinde değişir. */
.ek-ad-satiri { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ek-ad-satiri .ek-satir-kaynak { font-weight: 400; color: #94a3b8; font-size: 0.85em; }
.ek-ad-giris {
    flex: 1 1 160px; min-width: 0; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(212, 175, 106, 0.6); border-radius: 10px; color: #e2e8f0;
    padding: 6px 10px; font: inherit; font-size: 0.92em; outline: none;
}
.ek-kalem { flex: none; }
.ek-kalem.dolu { background: #d4af6a; color: #1e1b4b; border-color: #d4af6a; font-weight: 600; }
.ek-kalem.dolu:hover { color: #1e1b4b; }
.ek-kalem[disabled] { opacity: 0.5; }

/* Çizgi lejantı: mavi nokta = lokal (ders ekranında iki tip aynı çizgide). */
.ek-gelgit .gl .lm {
    display: inline-block; width: 8px; height: 8px; border-radius: 50%;
    background: #8FB4D9; vertical-align: middle; margin-right: 5px;
}