/* Mathes Etüt — tasarım belirteçleri ve bileşenler.
   Sayfalar inline stil KULLANMAZ; buradaki sınıfları kullanır.
   Tailwind/Bootstrap/CDN yok: yığın kararı (bkz. diğer Mathes projeleri).

   Tasarım sistemi: "Cognitive Luminary" (Desktop/…/cognitive_luminary/DESIGN.md).
   ‼️ Bu dosya o belgenin DEĞERLERİNİ alır, YIĞINI ALMAZ: belge Tailwind +
   React Native öneriyor, biz el yazımı CSS'te kalıyoruz. Renk, yuvarlaklık,
   gölge ve tipografi ölçekleri birebir; bileşen isimleri Türkçe kalıyor.

   YAZI TİPİ KENDİ SUNUCUMUZDAN. Google Fonts bağlantısı çevrimdışı PWA
   duruşunu bozardı (uygulama açılıyor ama yazı tipi gelmiyor) ve her
   açılışta üçüncü tarafa istek atardı. İki değişken font, dört dosya,
   toplam 188 KB. */

/* Plus Jakarta Sans: başlıklar, düğmeler, etiketler — Inter: gövde metni.
   ‼️ `font-display: swap` ŞART: font gelene kadar sayfa GÖRÜNMEZ değil,
   yedek yazı tipiyle okunur kalır. */
@font-face {
  font-family: "Jakarta";
  src: url("/static/fonts/Jakarta-latin-ext.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  /* Türkçe ğ, ı, İ, ş bu altkümede. */
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Jakarta";
  src: url("/static/fonts/Jakarta-latin.woff2") format("woff2");
  font-weight: 200 800; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
@font-face {
  font-family: "InterVar";
  src: url("/static/fonts/Inter-latin-ext.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "InterVar";
  src: url("/static/fonts/Inter-latin.woff2") format("woff2");
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}
/* Nunito (SIL OFL 1.1, lisans: static/fonts/Nunito-OFL.txt): GÖSTERİM
   yazı tipi — sayfa başlıkları, büyük sayılar, sonuç ve puan. Yuvarlak
   uçlu, 800-900 kalınlıkta "oyun" hissi veren başlık; gövde metni Inter,
   düğme/etiket Jakarta olarak kalıyor. Değişken font, iki dosya, 73 KB. */
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/Nunito-latin-ext.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7,
                 U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF,
                 U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB,
                 U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Nunito";
  src: url("/static/fonts/Nunito-latin.woff2") format("woff2");
  font-weight: 200 1000; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                 U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F,
                 U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF,
                 U+FFFD;
}

:root {
  /* --- renk: "Cognitive Luminary" --- */
  --marka:        #4f46e5;   /* Deep Smart Indigo — ana eylem, gezinme */
  --marka-acik:   #eef2ff;   /* primary container low */
  --marka-koyu:   #3730a3;   /* basılı hâl, odak çerçevesi */
  /* ‼️ MENEKŞE YALNIZ YAPAY ZEKÂ İÇİN. Tasarım sisteminin kuralı: AI
     çıktısı (anlatım, ipucu, ispat değerlendirmesi, sesli ders) menekşe
     ile işaretlenir; müfredat verisi indigo kalır. Öğrenci "bunu makine
     mi söyledi" sorusunu renkten cevaplayabilmeli. */
  --yz:           #7c3aed;
  --yz-acik:      #f5f3ff;
  --enerji:       #f59e0b;   /* seri, XP, hedef rozeti */
  --enerji-acik:  #fef3c7;
  --vurgu:        #f59e0b;   /* kazanılan rozet madalyası */
  --basari:       #10b981;   /* mint — doğrulanan, tamamlanan */
  --basari-acik:  #ecfdf5;
  --uyari:        #d97706;
  --uyari-acik:   #fef3c7;
  --hata:         #ef4444;
  --hata-acik:    #fef2f2;

  --murekkep:     #0f172a;   /* başlık */
  --murekkep-2:   #475569;   /* gövde */
  --murekkep-3:   #64748b;   /* ikincil */
  --zemin:        #f8fafc;   /* Level 0 — bilişsel dinlenme alanı */
  --kart:         #ffffff;   /* Level 1 */
  /* ‼️ KART İÇİ TONLU YÜZEY. Her şey beyaz kartken ekranda hiç derinlik
     yoktu: başlık, metin, tablo, düğme hepsi aynı düzlemdeydi. Referans
     tasarımda kartın İÇİNDEKİ panel (ölçüm kutusu, diyagram alanı, AI
     notu) daima hafif mavi tonlu — hiyerarşi oradan geliyor. */
  --yuzey-2:      #eef4ff;
  --cizgi:        #e2e8f0;
  --cizgi-ince:   #f1f5f9;   /* kart kılcal çerçevesi */

  --dugme-yazi:   #ffffff;
  --gradyan-yazi: #ffffff;
  /* ‼️ KAHRAMAN GRADYANI — MENEKŞE DEĞİL. Bu çift eskiden hem kahraman
     kartını hem YAPAY ZEKÂ düğmesini besliyordu ve menekşede bitiyordu;
     sonuç olarak panonun en büyük yüzeyi "AI rengi"ne boyanmış oluyordu.
     AI düğmesi artık kendi belirteçlerini (`--yz`, `--marka`) doğrudan
     kullanıyor, bu çift yalnız kahramana ait ve çivit ailesinde kalıyor. */
  --gradyan-bas:  #4f46e5;
  --gradyan-son:  #3730a3;

  /* --- koç avatarı (Hipatya / Tales) — templates/_parcalar.koc_avatar ---
     Giysi beyaz antik kiton/toga (kullanıcı, 2026-09-17); menekşe
     (`--yz`, yapay zekânın rengi) yaka şeridinde ve halede kalıyor. */
  --koc-ten:        #f1c7a5;
  --koc-sac:        #3b2a22;
  --koc-sac-2:      #7b7069;   /* Tales: kırlaşmış (tuz-biber) kıvırcık saç */
  --koc-sakal:      #aea79f;   /* Tales: saçtan daha ağarmış kısa sakal */
  --koc-goz:        #1e1b4b;
  --koc-yanak:      rgba(248, 113, 113, .28);
  --koc-burun:      rgba(120, 72, 48, .45);
  --koc-agiz:       #7f1d1d;
  --koc-cizgi:      rgba(120, 104, 84, .35);   /* kumaş kıvrımı */
  --koc-giysi:      #fbf8f1;
  --koc-giysi-kenar: rgba(120, 104, 84, .30);
  --koc-hale:       rgba(124, 58, 237, .22);
  --koc-hale-dinle: rgba(16, 185, 129, .28);

  /* --- Ormanım (services/orman.py, _parcalar.agac) --- */
  --orman-govde:    #8a5a3b;
  --orman-yaprak:   #34a853;
  --orman-yaprak-2: #1e7a3c;
  --orman-kuru:     #9c8a73;
  --orman-cicek:    #f97316;   /* mercan: paletin "kazanım" rengi (pembe yasak) */
  --orman-cicek-2:  #fef3c7;
  --orman-toprak:   #ecfdf3;
  --orman-zemin:    #c8e6c9;

  /* --- yuvarlaklık: düğme 16, kart 20, kahraman 28, hap tam --- */
  --yaricap:      16px;
  --yaricap-kart: 20px;
  --yaricap-hero: 28px;

  /* --- yükseklik: 4 katmanlı atmosferik model --- */
  --golge:    0 1px 3px rgba(15,23,42,.04), 0 4px 12px rgba(15,23,42,.03);
  --golge-2:  0 8px 24px rgba(79,70,229,.08), 0 2px 6px rgba(15,23,42,.04);
  --golge-yz: 0 16px 36px rgba(124,58,237,.16), 0 4px 12px rgba(15,23,42,.06);
  /* Katmanlı yumuşak gölge: öne çıkan kartlar ve büyük eylem düğmesi. */
  --golge-3:  0 1px 2px rgba(15,23,42,.06), 0 6px 14px -4px rgba(15,23,42,.08),
              0 22px 44px -18px rgba(55,48,163,.30);

  /* --- canlı yarışma sahnesi (canli.css): gece çividi, yarışma stüdyosu.
     İki temada da koyu — projeksiyonda parlak beyaz göz yorar. */
  --sahne-bas:    #312e81;
  --sahne-son:    #1e1b4b;
  --sahne-yazi:   #ffffff;

  --yazi: "InterVar", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --yazi-baslik: "Jakarta", "InterVar", system-ui, -apple-system, sans-serif;
  --yazi-gosterim: "Nunito", "Jakarta", "InterVar", system-ui, sans-serif;

  /* Form denetimleri (açılır liste, onay kutusu, kaydırma çubuğu) işletim
     sisteminden geliyor; bu satır olmadan karanlık temada beyaz kalırlar. */
  color-scheme: light dark;
}

/* --- karanlık tema ---
   Yalnız BELİRTEÇLER yeniden tanımlanıyor; aşağıdaki hiçbir bileşen
   kuralına dokunulmuyor. Bileşenlerde sabit renk kalsaydı burada
   yakalanamazdı — o yüzden tek sabit renk (#fff) de belirtece taşındı. */
@media (prefers-color-scheme: dark) {
  :root {
    --marka:        #818cf8;
    --marka-acik:   #1e1b4b;   /* koyu zeminde "açık" = koyu tint */
    --marka-koyu:   #a5b4fc;   /* koyu zeminde "koyu" = açık ton */
    --yz:           #a78bfa;
    --yz-acik:      #251c3d;
    --enerji:       #fbbf24;
    --enerji-acik:  #3a2a06;
    --vurgu:        #fbbf24;

    --basari:       #34d399;
    --basari-acik:  #052e23;
    --uyari:        #fbbf24;
    --uyari-acik:   #3a2a06;
    --hata:         #f87171;
    --hata-acik:    #3a1414;

    --murekkep:     #e2e8f0;
    --murekkep-2:   #a5b0c0;
    --murekkep-3:   #7b8496;
    --zemin:        #0b1120;
    --kart:         #131b2e;
    --yuzey-2:      #1a2438;
    --cizgi:        #24304a;
    --cizgi-ince:   #1b2437;

    --dugme-yazi:   #0b1120;
    --gradyan-yazi: #ffffff;
    --gradyan-bas:  #4338ca;
    --gradyan-son:  #312e81;
    --koc-ten:        #e2b393;
    --koc-sac:        #2b1f19;
    --koc-sac-2:      #978b83;
    --koc-sakal:      #c2bbb4;
    --koc-goz:        #111827;
    --koc-yanak:      rgba(248, 113, 113, .22);
    --koc-burun:      rgba(90, 50, 30, .5);
    --koc-agiz:       #7f1d1d;
    --koc-cizgi:      rgba(80, 68, 54, .45);
    --koc-giysi:      #e6e0d4;
    --koc-giysi-kenar: rgba(0, 0, 0, .25);
    --koc-hale:       rgba(167, 139, 250, .30);
    --koc-hale-dinle: rgba(52, 211, 153, .28);
    --orman-govde:    #a8774f;
    --orman-yaprak:   #4ade80;
    --orman-yaprak-2: #22a35a;
    --orman-kuru:     #7c6f60;
    --orman-cicek:    #fb923c;
    --orman-cicek-2:  #fde68a;
    --orman-toprak:   #10261a;
    --orman-zemin:    #1d4630;
    --golge:    0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.35);
    --golge-2:  0 8px 24px rgba(0,0,0,.5), 0 2px 6px rgba(0,0,0,.35);
    --golge-yz: 0 16px 36px rgba(124,58,237,.25), 0 4px 12px rgba(0,0,0,.4);
    --golge-3:  0 1px 2px rgba(0,0,0,.5), 0 6px 14px -4px rgba(0,0,0,.45),
                0 22px 44px -18px rgba(0,0,0,.6);
    --sahne-bas:    #262262;
    --sahne-son:    #0b0a24;
    --sahne-yazi:   #ffffff;
  }

}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--yazi);
  font-size: 15px;
  line-height: 1.55;
  /* Inter'in rakamları sütunlarda hizalansın (net tabloları, sayaçlar). */
  font-feature-settings: "cv05" 1;
  color: var(--murekkep);
  background: var(--zemin);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--marka); }

/* --- giriş ekranı --- */
.giris-sayfa {
  min-height: 100vh;
  min-height: 100dvh;          /* mobil tarayıcı çubuğu payı */
  display: grid;
  place-items: center;
  padding: 24px 16px;
}

.giris-kart {
  width: 100%;
  max-width: 400px;
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: var(--golge-2);
  padding: 28px 24px;
}

.marka {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 4px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.marka span { color: var(--marka); }
.marka small {
  font-size: 13px; font-weight: 500; color: var(--murekkep-3);
  letter-spacing: 0;
}

.giris-aciklama { margin: 0 0 20px; color: var(--murekkep-2); font-size: 14px; }

/* --- form --- */
.alan { margin-bottom: 14px; }
.alan label {
  display: block; margin-bottom: 5px;
  font-size: 13px; font-weight: 600; color: var(--murekkep-2);
}
.alan input {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--murekkep);
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: 8px;
}
.alan input:focus {
  outline: none;
  border-color: var(--marka);
  box-shadow: 0 0 0 3px var(--marka-acik);
}

.dugme {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%;
  min-height: 52px;            /* dokunma ergonomisi: 44px'in altına inme */
  padding: 14px 20px;
  font-family: var(--yazi-baslik);
  font-size: 15px; font-weight: 700; letter-spacing: -.01em;
  color: var(--dugme-yazi); background: var(--marka);
  border: 1px solid var(--marka);
  /* Hap düğme + katmanlı yumuşak gölge: düğme sayfadan hafifçe kalkık
     durur, "basılabilir" olduğu uzaktan okunur. */
  border-radius: 999px;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--marka-koyu) 30%, transparent),
              0 8px 18px -8px color-mix(in srgb, var(--marka) 70%, transparent);
  cursor: pointer;
  transition: transform .06s ease, background .15s ease, box-shadow .15s ease;
  /* ‼️ Düğmelerin bir kısmı <a> (pano, hata sayfası, "Sözlü yoklamaya git").
     Bağlantı alt çizgisi sıfırlanmayınca hap düğmenin ortasında altı çizili
     bir yazı duruyordu — düğme değil bağlantı gibi okunuyor. Tarayıcıda
     bakılınca görüldü. */
  text-decoration: none;
}
.dugme:hover { background: var(--marka-koyu); border-color: var(--marka-koyu); }
/* Basınca hafif çökme: dokunmanın karşılık verdiğini gösterir. */
.dugme:active { transform: scale(.98); }
.dugme:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.dugme:focus-visible {
  outline: none; box-shadow: 0 0 0 4px var(--marka-acik);
}
/* ‼️ YAPAY ZEKÂ DÜĞMESİ AYRI GÖRÜNÜR: menekşe gradyan + menekşe parıltı.
   Tasarım sisteminin kuralı — makinenin ürettiği şey müfredat verisinden
   renkle ayrılır. */
.dugme-yz {
  background: linear-gradient(135deg, var(--yz), var(--marka));
  border-color: transparent; color: var(--gradyan-yazi);
  box-shadow: 0 4px 16px rgba(124,58,237,.28);
}
.dugme-yz:hover { background: linear-gradient(135deg, var(--marka),
                                              var(--yz)); }
/* ‼️ `display: inline-flex` HTML'in `hidden` özniteliğini EZİYOR: "Dersi
   bitir", "Anlatmayı bitirdim", "Soruyu tekrar oku" düğmeleri daha ders
   başlamadan ekranda duruyordu (tarayıcıda görüldü — sesli ders ekranında
   da vardı). Her yerde geçerli olsun diye tek kural. */
[hidden] { display: none !important; }

/* --- uyarı kutuları --- */
.kutu {
  padding: 13px 16px;
  border-radius: var(--yaricap);
  font-size: 14px; line-height: 1.55;
  margin-bottom: 14px;
}
.kutu-hata   { background: var(--hata-acik);   color: var(--hata);   }
.kutu-uyari  { background: var(--uyari-acik);  color: var(--uyari);  }
.kutu-basari { background: var(--basari-acik); color: var(--basari); }

/* --- uygulama kabuğu (giriş sonrası) --- */
.kabuk { display: flex; min-height: 100vh; min-height: 100dvh; }

.yan {
  width: 248px; flex: 0 0 248px;
  background: var(--kart);
  border-inline-end: 1px solid var(--cizgi-ince);
  padding: 22px 14px;
  /* Uzun sayfalarda menü ekranda kalsın (PC). */
  position: sticky; top: 0; align-self: flex-start;
  height: 100vh; height: 100dvh;
}
.yan nav { display: flex; flex-direction: column; gap: 2px; margin-top: 16px; }
.yan nav a {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 13px;
  border-radius: 14px;
  color: var(--murekkep-2);
  text-decoration: none;
  font-family: var(--yazi-baslik);
  font-size: 14px; font-weight: 600;
}
/* Simgeler `currentColor` kullanıyor: bağlantı rengi değişince simge de
   değişir, ayrı kural gerekmez. */
.menu-simge {
  width: 18px; height: 18px; flex: 0 0 auto;
  color: currentColor;
}
.yan nav a.etkin .menu-simge { color: var(--marka); }
.yan nav a:hover { background: var(--zemin); color: var(--murekkep); }
.yan nav a.etkin { background: var(--marka-acik); color: var(--marka-koyu); font-weight: 600; }

/* ‼️ MOBİL UYGULAMA AMA PC'DEN DE AÇILIYOR. Tasarım 390px telefon için
   yapıldı; geniş ekranda içeriği kenardan kenara yaymak "büyütülmüş
   telefon" hissi verir ve satırlar okunamayacak kadar uzar. Sütun
   ortalanıp sınırlanıyor — telefon düzeni bozulmadan PC'de de düzgün
   duruyor. */
.icerik { flex: 1; padding: 28px 24px 40px; min-width: 0; }
/* ‼️ GENİŞLİK SINIRI SÜTUNDA, ÇOCUKLARDA DEĞİL. Kural `.icerik > *`
   üzerindeyken `.baslik`in `margin` kısayolu ortalamayı eziyordu:
   başlık solda, kartlar ortada. Tek sarmalayıcı bunu imkânsız kılar. */
.sutun { max-width: 880px; margin-inline: auto; }
h1, h2, h3, h4, .baslik, .bolum-baslik { font-family: var(--yazi-gosterim); }
.baslik {
  margin: 0 0 6px;
  font-size: 28px; font-weight: 900; line-height: 1.2;
  letter-spacing: -.02em;
}
.alt-baslik { margin: 0 0 20px; color: var(--murekkep-2); font-size: 14px; }
@media (min-width: 900px) {
  /* Belgedeki display-lg ölçeği: mobilde 28, geniş ekranda 36. */
  .baslik { font-size: 34px; }
}

.kart {
  background: var(--kart);
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--yaricap-kart);
  box-shadow: var(--golge);
  padding: 20px;
}
/* Yapay zekâ çıktısı taşıyan kart: buzlu menekşe zemin + menekşe çerçeve. */
.kart-yz {
  background: var(--yz-acik);
  border-color: color-mix(in srgb, var(--yz) 30%, transparent);
}

/* Geniş içerik (çizelge ızgarası) sayfayı yatay kaydırmaz, kendi içinde kayar. */
.kaydir-x { overflow-x: auto; }

@media (max-width: 720px) {
  .kabuk { flex-direction: column; }
  .yan { width: auto; flex: none; border-inline-end: none;
         border-block-end: 1px solid var(--cizgi); }
  .yan nav { flex-direction: row; overflow-x: auto; }
  .icerik { padding: 16px; }
}

/* yardımcı */
.sessiz { margin: 0; color: var(--murekkep-2); }

/* --- çizelge ızgarası --- */
.satir-form {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 16px;
}
.satir-form label { font-size: 13px; font-weight: 600; color: var(--murekkep-2); }
.satir-form select, .izgara select {
  font: inherit; padding: 6px 8px;
  border: 1px solid var(--cizgi); border-radius: 7px;
  background: var(--kart); color: var(--murekkep);
}
/* ‼️ SELECT KENDİ İÇERİĞİ KADAR GENİŞLER. Konu listesinde bazı kazanım
   metinleri 300 karaktere kadar çıkıyor; kutu hem kartı hem sayfayı taşırıp
   yatay kaydırma çubuğu çıkarıyordu.
   `min-width: 0` ŞART: esnek öğenin varsayılan `min-width: auto` değeri
   "içerik kadar" demektir ve tek başına `max-width` koymak yetmez. */
.satir-form select {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
  text-overflow: ellipsis;
}

.izgara { border-collapse: collapse; width: 100%; min-width: 640px; }
.izgara th, .izgara td {
  border: 1px solid var(--cizgi);
  padding: 6px;
  text-align: center;
  vertical-align: middle;
}
.izgara thead th {
  background: var(--zemin);
  font-size: 13px; font-weight: 600; color: var(--murekkep-2);
  white-space: nowrap;
}
.saat-sutun { background: var(--zemin); white-space: nowrap; width: 84px; }
.saat-no { font-weight: 700; font-size: 13px; }
.saat-aralik { display: block; font-size: 11px; color: var(--murekkep-3); }
.izgara td select { width: 100%; min-width: 72px; }

/* Eşleşmeyen hücre GÖRÜNÜR olmalı: sessizce boş bırakmak, çizelgeyi eksik
   ama tamam göstermek olurdu. */
.eslesmeyen { background: var(--uyari-acik); }
.ham-ad {
  display: block; margin-top: 3px;
  font-size: 11px; color: var(--uyari); font-weight: 600;
}

.dugme-satir { margin-top: 16px; }
.dugme-dar { width: auto; min-width: 160px; }
.dugme-ikincil {
  color: var(--marka); background: var(--kart); border-color: var(--marka);
  box-shadow: none;
}
.dugme-ikincil:hover { background: var(--marka-acik); border-color: var(--marka); }

.not { margin-top: 18px; font-size: 12px; line-height: 1.7; }
code {
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12px; background: var(--zemin);
  padding: 1px 5px; border-radius: 5px;
}

/* --- içe alma paneli --- */
.icealma {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  padding: 14px 18px;
  margin-bottom: 18px;
}
.icealma summary {
  cursor: pointer; font-weight: 600; color: var(--marka);
  list-style: none;
}
.icealma summary::-webkit-details-marker { display: none; }
.icealma summary::before { content: "＋ "; font-weight: 700; }
.icealma[open] summary::before { content: "− "; }
.icealma > p { margin: 12px 0 16px; font-size: 13px; }
.icealma textarea, .icealma input[type="file"] {
  width: 100%; font: inherit; padding: 9px 10px;
  border: 1px solid var(--cizgi); border-radius: 8px;
  background: var(--kart); color: var(--murekkep);
}
.icealma textarea { resize: vertical; min-height: 76px; }

/* --- haftalık program --- */
.hafta {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 12px;
  margin-top: 18px;
}
.gun-kart {
  background: var(--kart);
  border: 1px solid var(--cizgi);
  border-radius: var(--yaricap);
  box-shadow: var(--golge);
  padding: 14px;
}
.gun-kart h3 {
  margin: 0 0 10px;
  font-size: 14px; font-weight: 700; color: var(--murekkep-2);
  text-transform: uppercase; letter-spacing: .04em;
}
.gun-bos { background: var(--zemin); box-shadow: none; }

.madde-listesi { list-style: none; margin: 0; padding: 0; }
.madde-listesi li {
  padding: 9px 0;
  border-top: 1px solid var(--cizgi);
}
.madde-listesi li:first-child { border-top: none; padding-top: 0; }

.madde-bas { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.madde-saat { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 13px; }
.madde-ders { font-weight: 600; color: var(--marka-koyu); font-size: 13px; }
.madde-sure { margin-inline-start: auto; font-size: 11px; color: var(--murekkep-3); }
.madde-konu { margin-top: 3px; font-size: 12px; color: var(--murekkep); }
.madde-gerekce { margin-top: 3px; font-size: 11px; color: var(--murekkep-3); line-height: 1.45; }
.madde-cakisma { margin-top: 4px; font-size: 11px; color: var(--uyari); font-weight: 600; }
.cakisma { background: var(--uyari-acik); border-radius: 7px; padding-inline: 7px; }

/* Program maddesinin TÜRÜNÜ gösteren küçük etiket. Adı bilerek "rozet"
   değil: oyunlaştırmanın rozet kartlarıyla aynı sınıf adını taşıyorlardı
   ve rozet ızgarası eklenince bu minik etiketler sessizce kart görünümüne
   dönüştü. Aynı ada iki bileşen bağlamak bu hatayı davet ediyor. */
.tur-etiketi {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .03em; padding: 1px 6px; border-radius: 999px;
}
.tur-tekrar { background: var(--marka-acik); color: var(--marka-koyu); }
.tur-test   { background: var(--basari-acik); color: var(--basari); }
.tur-sozlu  { background: var(--uyari-acik); color: var(--uyari); }
.tur-deneme { background: var(--hata-acik); color: var(--hata); }

.gun-toplam {
  margin: 10px 0 0; padding-top: 8px;
  border-top: 1px solid var(--cizgi);
  font-size: 11px; color: var(--murekkep-3);
}

/* --- kayıt formları --- */
.giris-kart-genis { max-width: 520px; }

.alan-ikili, .alan-uclu { display: grid; gap: 12px; }
.alan-ikili { grid-template-columns: 1fr 1fr; }
.alan-uclu  { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 560px) {
  .alan-ikili, .alan-uclu { grid-template-columns: 1fr; }
}

.alan select, .alan textarea {
  width: 100%; padding: 10px 12px; font: inherit;
  color: var(--murekkep); background: var(--kart);
  border: 1px solid var(--cizgi); border-radius: 8px;
}
.alan select:focus, .alan textarea:focus {
  outline: none; border-color: var(--marka);
  box-shadow: 0 0 0 3px var(--marka-acik);
}

.istege-bagli { font-weight: 400; color: var(--murekkep-3); }
.alan-ipucu { display: block; margin-top: 4px; font-size: 12px; color: var(--murekkep-3); }
.alan-hata  { display: block; margin-top: 4px; font-size: 12px; color: var(--hata); font-weight: 600; }

.onay-satiri {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 6px 0 16px; font-size: 13px; line-height: 1.5;
  color: var(--murekkep-2);
}
.onay-satiri input { margin-top: 3px; flex: 0 0 auto; }

.alt-bag { margin: 16px 0 0; font-size: 13px; text-align: center; color: var(--murekkep-2); }

.form-kart { margin-bottom: 14px; }
/* ‼️ BÖLÜM BAŞLIĞI ARTIK BAŞLIK GİBİ GÖRÜNÜYOR. Eskiden 13 piksellik
   gri VERSAL bir etiketti; ekrandaki her kart aynı ağırlıkta duruyor ve
   hiçbir şey öne çıkmıyordu. Referans tasarımda bölüm başlığı 17-18px,
   koyu, cümle düzeninde ve BAŞINDA SİMGE var; sağ tarafında da bir
   durum hapı için yer bırakılıyor. */
.bolum-baslik {
  display: flex; align-items: center; gap: 9px;
  margin: 0 0 14px;
  font-size: 18px; font-weight: 800; line-height: 1.3;
  letter-spacing: -.01em; color: var(--murekkep);
  text-transform: none;
}
/* Başlık simgesi kendi tonlu karesinde: çıplak simge başlığın yanında
   kayboluyordu. */
.bolum-simge {
  flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marka-acik); color: var(--marka);
}
.bolum-simge svg { width: 17px; height: 17px; }
/* Yapay zekâ bölümleri menekşe: "bunu makine mi söyledi" ayrımı. */
.bolum-simge-yz { background: var(--yz-acik); color: var(--yz); }
.bolum-simge-enerji { background: var(--enerji-acik); color: var(--enerji); }
.bolum-simge-basari { background: var(--basari-acik); color: var(--basari); }
/* Başlığın sağ ucuna itilen sayaç/hap. */
.bolum-sag { margin-inline-start: auto; }
.form-not { margin: -4px 0 14px; font-size: 12px; }

/* --- çalışma sayacı --- */
/* ‼️ ÖZET KUTUSU, PANODAKİ `.olcum` İLE AYNI DİLE ÇEKİLDİ. Önce beyaz
   kart + sol renkli şeritti; pano tonlu kutular kullanırken çalışma ve
   rapor ekranları başka bir görsel dil konuşuyordu ve uygulama iki ayrı
   ürün gibi duruyordu. Sınıf adları korundu: anlamları (doğrulanmış /
   beyan / net) sınıfın kendisinde taşınıyor. */
.gunluk-ozet {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.ozet-kutu {
  background: var(--yuzey-2);
  border-radius: 14px;
  padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
/* Beyan ile doğrulanmış süre GÖRSEL OLARAK DA ayrı: ikisini aynı kutuda
   göstermek veliye tek bir sayı gibi okunurdu. Ayrım artık kenar
   şeridinde değil, DEĞERİN RENGİNDE — tonlu kutuda şerit görünmüyordu. */
.ozet-kutu .ozet-deger { color: var(--basari); }
.ozet-kutu-ikincil .ozet-deger { color: var(--murekkep-2); }
.ozet-kutu-net .ozet-deger { color: var(--marka); }
.ozet-kutu-hata .ozet-deger { color: var(--hata); }
.ozet-etiket {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 12px; font-weight: 600; color: var(--murekkep-2);
}
.ozet-deger {
  display: block;
  font-family: var(--yazi-gosterim);
  font-size: 24px; font-weight: 800; line-height: 1.15;
  letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.ozet-not { display: block; font-size: 11px; color: var(--murekkep-3); }

.sayac-kart { text-align: center; padding: 26px 18px; }
.sayac-konu { margin: 0 0 6px; font-size: 14px; color: var(--murekkep-2); }
.sayac-ekran {
  font-size: 56px; font-weight: 700; line-height: 1.1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.sayac-durum { margin-top: 4px; font-size: 13px; font-weight: 600; }
.sayac-durum-devam     { color: var(--basari); }
.sayac-durum-durakladi { color: var(--uyari); }
.sayac-durum-bitti     { color: var(--murekkep-2); }

.etkilesim-kutusu {
  margin: 16px auto 0; max-width: 380px;
  background: var(--uyari-acik); color: var(--uyari);
  border-radius: var(--yaricap); padding: 14px;
}
.etkilesim-kutusu p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.etkilesim-kutusu .dugme {
  background: var(--uyari); border-color: var(--uyari); color: var(--dugme-yazi);
}

.sayac-dugmeler {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
  margin-top: 18px;
}
.sayac-not { margin-top: 14px; font-size: 11px; }

.madde-secim { list-style: none; margin: 0 0 14px; padding: 0; }
.madde-secim li { border-top: 1px solid var(--cizgi); }
.madde-secim li:first-child { border-top: none; }
/* Satır SARMAZ: sarma serbest bırakılınca konu adı bir karakter uzun
   olan satırda "Başla" düğmesi alt satıra düşüyordu ve liste dar ekranda
   düzensiz görünüyordu. Konu adı yerine METİN kırpılır/sarar. */
.madde-secim form, .madde-secim .madde-satir {
  display: flex; align-items: center; gap: 10px; padding: 9px 0;
  flex-wrap: nowrap;
}
.madde-konu-satir {
  flex: 1 1 140px; min-width: 0;      /* min-content'in altına inebilsin */
  font-size: 13px; color: var(--murekkep-2);
}
.madde-secim .dugme { width: auto; min-width: 90px; padding: 7px 14px; }

/* --- test çözme --- */
.test-baslik {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.geri-sayim {
  flex: 0 0 auto;
  font-family: var(--yazi-baslik);
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--yuzey-2); border: 1px solid var(--cizgi-ince);
  border-radius: 999px; padding: 7px 16px;
}
.geri-sayim-az { color: var(--hata); border-color: var(--hata); }

.soru-listesi { list-style: none; margin: 18px 0 0; padding: 0; }
/* ‼️ KALIN ÇERÇEVE: soru kartı sayfadaki her şeyden ayrışsın. Önce
   1px gri kılcal çizgiydi; on kart alt alta dizilince nerede bir soru
   bitip ötekinin başladığı okunmuyordu. İşaretlenen kart çivide döner. */
.soru-karti {
  background: var(--kart);
  border: 2px solid color-mix(in srgb, var(--marka) 18%, var(--cizgi));
  border-radius: var(--yaricap-kart); box-shadow: var(--golge);
  padding: 18px 20px 20px; margin-bottom: 16px;
  transition: border-color .15s ease;
}
.soru-isaretli { border-color: var(--marka); }
.soru-govde {
  font-family: var(--yazi-gosterim);
  font-size: 18px; font-weight: 800; line-height: 1.5;
  color: var(--murekkep); margin-bottom: 16px;
}
.soru-no { font-weight: 700; color: var(--murekkep-2); }

.siklar { display: flex; flex-direction: column; gap: 10px; }
/* Şık kutusu bir KART: tıklama hedefi bütün satır, yükseklik 56px.
   (Tasarım sistemi: "Quiz Option Tile", 1.5px çerçeve, rounded-xl.) */
.sik {
  display: flex; align-items: center; gap: 12px;
  min-height: 58px;
  padding: 12px 16px;
  border: 2px solid var(--cizgi); border-radius: var(--yaricap);
  background: var(--kart);
  box-shadow: 0 2px 0 var(--cizgi-ince);
  cursor: pointer; font-size: 15px; font-weight: 500; line-height: 1.45;
  transition: border-color .12s ease, background .12s ease, transform .08s ease;
}
.sik:hover { border-color: var(--marka); background: var(--kart); }
label.sik:active { transform: scale(.99); }
/* ‼️ Yerli radyo düğmesi GÖRÜNMEZ ama DURUYOR: kutunun kendisi (çerçeve +
   harf rozeti) seçimi zaten gösteriyor, ikisi birden fazlalık. Kaldırmak
   yerine gizliyoruz — klavyeyle gezinme ve ekran okuyucu ona bağlı. */
.sik input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.sik:has(input:focus-visible) {
  border-color: var(--marka); box-shadow: 0 0 0 4px var(--marka-acik);
}
/* Harf, kendi yuvarlak rozetinde: şıkkı sesli söylerken de aranan şey bu. */
.sik-harf {
  flex: 0 0 auto;
  width: 32px; height: 32px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--yazi-gosterim);
  font-size: 15px; font-weight: 900;
  color: var(--murekkep-2); background: var(--yuzey-2);
}
.sik-metin { flex: 1; }
.sik-secili {
  border-color: var(--marka); background: var(--marka-acik);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--marka) 35%, transparent);
}
.sik-secili .sik-harf { background: var(--marka); color: var(--dugme-yazi); }
.sik-dogru .sik-harf  { background: var(--basari); color: var(--dugme-yazi); }
.sik-yanlis .sik-harf { background: var(--hata);   color: var(--dugme-yazi); }

/* Soru altındaki eylemler: hap biçimli, ikincil. Ana eylem şıkkı
   işaretlemek; bunlar yardımcı, o yüzden sessiz duruyorlar. */
.soru-eylem {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 14px;
}
.sik-temizle {
  padding: 8px 14px;
  font-family: var(--yazi-baslik); font-size: 13px; font-weight: 600;
  color: var(--murekkep-2); background: var(--zemin);
  border: 1px solid var(--cizgi); border-radius: 999px; cursor: pointer;
}
.sik-temizle:hover { border-color: var(--marka); color: var(--marka); }
/* İpucu bir YAPAY ZEKÂ çıktısı: menekşe ailesinde. */
.ipucu-dugme {
  cursor: pointer; font-family: var(--yazi-baslik);
  background: var(--yz-acik); color: var(--yz);
  border-color: color-mix(in srgb, var(--yz) 25%, transparent);
}
.ipucu-dugme:hover { background: var(--yz); color: var(--dugme-yazi); }
.kayit-hata { color: var(--hata); font-weight: 600; }

/* --- sonuç ---
   ‼️ `.ozet-kutu-*` kenar şeridi kuralları KALDIRILDI: kutular tonlu
   yüzeye geçince şerit görünmüyordu ve ayrım artık değerin renginde. */
/* Sonuçta kalın çerçevenin RENGİ hükmü taşır (çözme ekranıyla aynı dil).
   Yanlış bağırmasın diye tam ton değil, karışım. */
.soru-dogru  { border-color: color-mix(in srgb, var(--basari) 60%, var(--cizgi)); }
.soru-yanlis { border-color: color-mix(in srgb, var(--hata) 45%, var(--cizgi)); }
.soru-bos    { border-color: var(--cizgi); }

.sik-dogru  { background: var(--basari-acik); border-color: var(--basari); }
.sik-yanlis { background: var(--hata-acik); border-color: var(--hata); }
.sik-isaret {
  margin-inline-start: auto; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em; white-space: nowrap;
}
.sik-dogru .sik-isaret  { color: var(--basari); }
.sik-yanlis .sik-isaret { color: var(--hata); }

/* ‼️ ÇÖZÜM = YAPAY ZEKÂ ÇIKTISI → MENEKŞE. Çivitken sıradan bir
   bağlantıya benziyordu ve öğrenci onu öğretmenin yazdığı sanıyordu;
   çözümde hata olabilir, kaynağı renkten okunabilmeli. */
.cozum-kutu {
  margin-top: 12px; font-size: 13px;
  background: var(--yz-acik);
  border: 1px solid color-mix(in srgb, var(--yz) 22%, transparent);
  border-radius: 14px; padding: 11px 14px;
}
.cozum-kutu summary {
  display: flex; align-items: center; gap: 7px;
  cursor: pointer; color: var(--yz);
  font-family: var(--yazi-baslik); font-weight: 700;
}
.cozum-kutu summary svg { width: 15px; height: 15px; }
.cozum-kutu p { margin: 9px 0 0; color: var(--murekkep-2); line-height: 1.65; }

.konu-tablo { min-width: 620px; }
.konu-hucre { text-align: start; }
.islem-hucre { white-space: nowrap; }
.konu-tablo .dugme { width: auto; padding: 6px 12px; font-size: 13px; }
.havuz-bos { color: var(--murekkep-3); }
.havuz-bekleyen { display: block; font-size: 11px; color: var(--uyari); }

/* Net gelişim çizgisi — Chart.js yerine saf CSS: tek grafik için
   kütüphane yüklemek gereksiz ağırlık. */
/* ‼️ ÇUBUK GENİŞLİĞİ SINIRLI. `flex: 1 1 0` ile 4 deneme geniş ekranda
   300 pikselik bloklara dönüşüyordu; gelişim farkı görünmez oluyor,
   grafik tek bir dolu dikdörtgen gibi okunuyordu. */
.net-cizgi {
  display: flex; align-items: flex-end; justify-content: flex-start;
  gap: 14px; height: 120px; padding-top: 8px;
}
.net-sutun {
  flex: 0 1 56px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; height: 100%;
  min-width: 34px; max-width: 56px;
}
.net-dolgu {
  width: 100%; background: var(--marka); border-radius: 4px 4px 0 0;
  min-height: 3px;
}
.net-etiket { margin-top: 4px; font-size: 10px; color: var(--murekkep-3); }

/* --- veli raporu --- */
.kutu-bilgi { background: var(--marka-acik); color: var(--marka-koyu); }

.gun-cizgi {
  display: flex; align-items: flex-end; gap: 10px;
  height: 150px; padding-top: 8px;
}
.gun-sutun {
  flex: 1 1 0; display: flex; flex-direction: column; align-items: center;
  height: 100%; min-width: 30px;
}
/* ‼️ İKİ ÇUBUK YAN YANA. Üst üste yığmak görsel olarak "toplanıyor"
   anlamına gelir; bu ürünün temel kuralı ikisinin toplanmamasıdır. */
.gun-ciftli {
  flex: 1; width: 100%;
  display: flex; align-items: flex-end; justify-content: center; gap: 3px;
}
.gun-dolgu {
  width: 44%; max-width: 26px;
  background: var(--basari); border-radius: 3px 3px 0 0;
  min-height: 3px;
}
/* Beyan GÖRSEL OLARAK DA GERİ PLANDA: çizgili desen + soluk renk.
   Doğrulanmışla aynı ağırlıkta görünseydi veli ikisini karıştırırdı. */
.gun-dolgu-beyan {
  background: repeating-linear-gradient(45deg, var(--murekkep-3),
              var(--murekkep-3) 3px, transparent 3px, transparent 6px);
  border: 1px solid var(--cizgi); border-bottom: none;
  opacity: .75;
}
.gun-etiket { margin-top: 6px; font-size: 11px; color: var(--murekkep-2); }
.gun-sayi {
  font-size: 10px; color: var(--murekkep-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.gun-sayi-beyan { color: var(--murekkep-3); font-style: italic; }

.gosterge {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin: 14px 0 0; font-size: 12px; color: var(--murekkep-2);
}
.gosterge-kutu {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
  background: var(--basari);
}
.gosterge-beyan {
  background: repeating-linear-gradient(45deg, var(--murekkep-3),
              var(--murekkep-3) 3px, transparent 3px, transparent 6px);
  border: 1px solid var(--cizgi);
}
.gosterge-not { color: var(--murekkep-3); }

.net-artis { color: var(--basari); font-weight: 600; }
.net-dusus { color: var(--uyari); font-weight: 600; }

.konu-harita {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
}
.harita-baslik {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .04em; color: var(--murekkep-2);
}
.harita-liste { list-style: none; margin: 0; padding: 0; }
.harita-liste li {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 0; border-top: 1px solid var(--cizgi); font-size: 13px;
}
.harita-liste li:first-child { border-top: none; }
.harita-konu { flex: 1 1 120px; }
.harita-oran { font-weight: 700; font-variant-numeric: tabular-nums; }
.harita-dusuk  { color: var(--hata); }
.harita-yuksek { color: var(--basari); }
.harita-adet { font-size: 11px; color: var(--murekkep-3); }

/* --- sesli ders --- */
.sesli-kart { text-align: center; padding: 22px 18px; }
.sesli-kart .satir-form { justify-content: center; margin-bottom: 20px; }

.sesli-dalga {
  display: flex; align-items: flex-end; justify-content: center;
  gap: 5px; height: 56px; margin: 8px 0 14px;
}
.sesli-dalga span {
  width: 7px; height: 10px; border-radius: 4px;
  background: var(--cizgi); transition: height .15s;
}
/* Dalga yalnız AI konuşurken oynar: öğrenci "şu an kim konuşuyor" sorusunu
   ekrandan cevaplayabilmeli. */
.dalga-aktif span { background: var(--marka); animation: dalga 1s infinite ease-in-out; }
.dalga-aktif span:nth-child(2) { animation-delay: .12s; }
.dalga-aktif span:nth-child(3) { animation-delay: .24s; }
.dalga-aktif span:nth-child(4) { animation-delay: .36s; }
.dalga-aktif span:nth-child(5) { animation-delay: .48s; }
@keyframes dalga {
  0%, 100% { height: 10px; }
  50%      { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .dalga-aktif span { animation: none; height: 28px; }
}

.sesli-durum { font-size: 14px; font-weight: 600; min-height: 20px; }
.sesli-durum-dinliyor  { color: var(--basari); }
.sesli-durum-konusuyor { color: var(--marka); }
.sesli-durum-dusunuyor { color: var(--murekkep-2); }
.sesli-durum-hata      { color: var(--hata); }

.sesli-yazi {
  margin-top: 18px; max-height: 260px; overflow-y: auto;
  text-align: start; font-size: 13px; line-height: 1.6;
}
.sesli-satir {
  padding: 7px 11px; border-radius: 10px; margin-bottom: 6px;
  max-width: 85%;
}
.sesli-satir-ogrenci {
  background: var(--marka-acik); color: var(--marka-koyu);
  margin-inline-start: auto;
}
.sesli-satir-ogretmen { background: var(--zemin); }
/* ‼️ Konuşurken görünen geçici satır. Kesinleşmiş sözden AYIRT EDİLEBİLİR
   olmalı: solgun ve yanıp sönen imleçli. Aynı görünümde olsaydı öğrenci
   düzeltilen kelimelerin "silindiğini" sanırdı. */
.sesli-satir-gecici { opacity: .6; font-style: italic; }
.sesli-satir-gecici::after {
  content: "▌"; margin-inline-start: 2px;
  animation: sesli-imlec 1s steps(2) infinite;
}
@keyframes sesli-imlec { 50% { opacity: 0; } }

/* --- çipler (hata defteri süzgeci, etiketler) --- */
.cip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; text-decoration: none;
  background: var(--zemin); color: var(--murekkep-2);
  border: 1px solid var(--cizgi);
}
.cip-etkin  { background: var(--marka-acik); color: var(--marka-koyu);
              border-color: var(--marka); }
.cip-uyari  { background: var(--uyari-acik);  color: var(--uyari);  border-color: transparent; }
.cip-hata   { background: var(--hata-acik);   color: var(--hata);   border-color: transparent; }
.cip-basari { background: var(--basari-acik); color: var(--basari); border-color: transparent; }

/* --- hata defteri --- */
.hd-suzgec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.hd-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
          margin-bottom: 10px; font-size: 13px; }
/* Telafi edilen soru SİLİNMEZ, soluklaşır: "bunu düzelttim" görünür kalmalı. */
.hd-telafi { opacity: .62; }
/* ‼️ ÖĞRENCİNİN KENDİ CÜMLESİ — ne menekşe (yapay zekâ) ne çivit
   (eylem). Nötr tonlu panel + alıntı çizgisi: sayfadaki üç ses
   (öğrenci / makine / uygulama) birbirinden ayırt edilebilsin. */
.hd-ispat {
  margin-top: 12px; padding: 11px 14px;
  border-radius: 14px; background: var(--yuzey-2);
  border-inline-start: 3px solid var(--cizgi);
}
.hd-ispat h4 { margin: 0 0 4px; font-size: 12px; letter-spacing: .04em;
               text-transform: uppercase; color: var(--murekkep-3); }
.hd-ispat p { margin: 0; font-size: 14px; line-height: 1.6; }

/* --- yazılı ispat ve ipucu (çözüm ekranı) --- */
.ispat-kutu {
  margin-top: 12px; padding: 12px 14px; border-radius: var(--yaricap);
  background: var(--marka-acik); border: 1px solid var(--marka);
}
.ispat-kutu h4 { margin: 0 0 6px; font-size: 14px; color: var(--marka-koyu); }
.ispat-kutu p { margin: 0 0 10px; font-size: 13px; line-height: 1.5; }
.ispat-kutu textarea {
  width: 100%; min-height: 74px; padding: 9px 11px; font: inherit;
  font-size: 14px; border: 1px solid var(--cizgi);
  border-radius: var(--yaricap); background: var(--kart); color: var(--murekkep);
  resize: vertical;
}
.ispat-yollar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.ispat-sonuc { margin-top: 10px; font-size: 14px; line-height: 1.55; }
.ispat-tuttu   { color: var(--basari); font-weight: 600; }
.ispat-tutmadi { color: var(--uyari);  font-weight: 600; }
/* İpucu bir YAPAY ZEKÂ çıktısı: menekşe şeritle işaretleniyor
   (tasarım sistemi kuralı — makine çıktısı müfredat verisinden ayrılır). */
.ipucu-metin {
  margin-top: 10px; padding: 12px 14px; border-radius: var(--yaricap);
  background: var(--yz-acik); font-size: 14px; line-height: 1.6;
  border-inline-start: 3px solid var(--yz);
}

/* --- kök neden teşhisi --- */
.teshis-baslik { font-size: 15px; font-weight: 600; margin: 0 0 12px; }
.teshis-liste { list-style: none; margin: 0; padding: 0; }
.teshis {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 0; border-block-start: 1px solid var(--cizgi);
  font-size: 14px; line-height: 1.5;
}
.teshis:first-child { border-block-start: 0; }
.teshis div { display: flex; flex-direction: column; gap: 2px; }
.teshis-adet {
  flex: none; min-width: 30px; height: 30px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zemin); color: var(--murekkep-2);
  font-size: 13px; font-weight: 700;
}
/* Renk yalnız ETİKETİ ayırt etmek için; "kötü/iyi" demiyor. */
.teshis-acele .teshis-adet   { background: var(--uyari-acik); color: var(--uyari); }
.teshis-bilgi .teshis-adet   { background: var(--marka-acik); color: var(--marka-koyu); }
.teshis-sure_yetmedi .teshis-adet { background: var(--hata-acik); color: var(--hata); }

/* --- sesli test ve sözlü yoklama ---
   Renk YOK, yalnız belirteç: iki ekran da hem açık hem karanlık temada,
   hem de genç katmanında kendiliğinden doğru görünsün. */
.st-kart { text-align: start; }
.st-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 14px;
}
.st-sayac {
  font-size: 13px; font-weight: 700; color: var(--murekkep-3);
  font-variant-numeric: tabular-nums;
}
.st-govde { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }

.st-siklar { display: flex; flex-direction: column; gap: 8px; }
/* Şıklar TIKLANABİLİR: konuşma tanıma tutmadığında tek çıkış yolu bu. */
.st-sik {
  display: flex; align-items: flex-start; gap: 10px; width: 100%;
  padding: 11px 13px; text-align: start; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1.5;
  background: var(--kart); color: var(--murekkep);
  border: 1px solid var(--cizgi); border-radius: var(--yaricap);
}
.st-sik:hover { border-color: var(--marka); }
.st-sik-secili {
  background: var(--marka-acik); border-color: var(--marka);
  color: var(--marka-koyu); font-weight: 600;
}
.st-harf {
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zemin); color: var(--murekkep-2);
  font-size: 12px; font-weight: 700;
}
.st-duyulan { margin-top: 14px; min-height: 20px; font-style: italic; }

.yk-kart { text-align: start; padding: 0; }
.yk-soru { font-size: 16px; line-height: 1.6; margin: 0 0 14px; }
.yk-metin {
  margin: 14px 0 0; max-height: 180px; overflow-y: auto;
  font-size: 13px; line-height: 1.7;
}
.yk-sonuc {
  margin-top: 20px; padding-block-start: 18px;
  border-block-start: 1px solid var(--cizgi);
}
.yk-puan { display: flex; align-items: baseline; gap: 6px; }
.yk-puan-sayi { font-size: 40px; font-weight: 800; color: var(--marka); }
.yk-puan-birim { font-size: 14px; color: var(--murekkep-3); }
.yk-geri-bildirim { font-size: 15px; line-height: 1.6; margin: 10px 0 16px; }
.yk-liste { margin-bottom: 14px; }
.yk-liste h4 {
  margin: 0 0 6px; font-size: 12px; letter-spacing: .04em;
  text-transform: uppercase; color: var(--murekkep-3);
}
.yk-liste ul { margin: 0; padding-inline-start: 20px; font-size: 14px;
               line-height: 1.7; }
.yk-guclu li { color: var(--basari); }
.yk-eksik li { color: var(--uyari); }

/* --- mobil üst çubuk --- */
/* Geniş ekranda YOK: orada yan menü marka ve gezinmeyi zaten taşıyor. */
.ust-bar { display: none; }

/* --- mobil alt sekme çubuğu --- */
.alt-sekme { display: none; }

@media (max-width: 720px) {
  .ust-bar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    position: sticky; top: 0; z-index: 20;
    padding: 12px 16px;
    /* Level 2: yarı saydam beyaz + bulanıklık. Sayfa altında kayarken
       içerik çubuğun ardından belli belirsiz geçiyor. */
    background: color-mix(in srgb, var(--kart) 85%, transparent);
    backdrop-filter: blur(16px);
    border-block-end: 1px solid var(--cizgi-ince);
  }
  .ust-marka {
    font-family: var(--yazi-baslik);
    font-size: 17px; font-weight: 800; letter-spacing: -.02em;
    color: var(--murekkep); text-decoration: none;
  }
  .ust-marka span { color: var(--marka); }
  .ust-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--marka-acik); color: var(--marka-koyu);
    font-family: var(--yazi-baslik); font-weight: 700; font-size: 14px;
    text-decoration: none;
  }

  .alt-sekme {
    display: flex;
    position: fixed; inset-inline: 0; bottom: 0; z-index: 20;
    /* Level 2: cam yüzey — altından geçen içerik hissedilsin. */
    background: color-mix(in srgb, var(--kart) 85%, transparent);
    backdrop-filter: blur(16px);
    box-shadow: var(--golge-2);
    border-block-start: 1px solid var(--cizgi-ince);
    /* iPhone alt çubuğu içeriği yemesin. */
    padding-block-end: env(safe-area-inset-bottom, 0);
  }
  .alt-sekme a {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    gap: 2px; padding: 8px 4px;
    font-size: 11px; font-weight: 600; text-decoration: none;
    color: var(--murekkep-3);
    /* Başparmakla basılabilir hedef: 44px altına düşme. */
    min-height: 52px; justify-content: center;
  }
  .alt-sekme a.etkin { color: var(--marka); }
  .sekme-simge { width: 20px; height: 20px; color: currentColor; }

  /* Alt çubuk son satırı kapatmasın. */
  .icerik { padding-bottom: 76px; }

  /* ‼️ KÜÇÜK EKRANDA YAN MENÜ TAMAMEN GİZLİ. Önce yalnız `nav` gizleniyordu;
     sonradan geniş ekran için yan menüye `height: 100dvh` + `sticky`
     verilince telefonda yalnız marka yazısı taşıyan EKRAN BOYU boş bir
     kutu kaldı: içerik 739. pikselden başlıyor, öğrenci ilk ekranda
     boşluk görüyordu (2026-09-17, 390px iframe ile ölçüldü). Marka üst
     çubukta, gezinme alt çubukta — bu kutunun telefonda işi yok. */
  .yan { display: none; }
}

/* Klavye ile gezinenler sekmeyi görsün. */
.alt-sekme a:focus-visible {
  outline: 2px solid var(--marka); outline-offset: -2px; border-radius: 6px;
}

/* ==========================================================================
   GEZİNME — ÜÇ CİHAZ, ÜÇ DÜZEN (2026-10-04)
   ==========================================================================
   ≤720px  TELEFON: üst çubuk + 4 ana sekme + "Menü" (alttan açılan pencere)
   721–1099 TABLET: 92px simge rayı (simge + kısa ad), içerik geniş
   ≥1100   MASAÜSTÜ / yatay büyük tablet: 248px tam yan menü

   ‼️ Eski düzende telefon çubuğu 7 sekme taşıyordu ve yine de Program,
   Dersler, Çizelge, Abonelik telefondan HİÇ açılamıyordu. Tablet ise
   masaüstü düzenini alıyordu: 768px dikey tablette 248px menü ekranın
   üçte birini yiyordu. */

/* Yan menüdeki kısa ad ve "M" yalnız tablet rayında görünür. */
.menu-kisa, .marka-kisa { display: none; }

/* --- telefon: alt çubuktaki "Menü" düğmesi bağlantılarla aynı görünür --- */
.sekme-menu { display: none; }

@media (max-width: 720px) {
  .sekme-menu {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 2px;
    min-height: 52px; padding: 8px 4px;
    font: inherit; font-size: 11px; font-weight: 600;
    color: var(--murekkep-3);
    background: none; border: 0; cursor: pointer;
  }
  .sekme-menu.etkin { color: var(--marka); }
  .sekme-menu:focus-visible {
    outline: 2px solid var(--marka); outline-offset: -2px; border-radius: 6px;
  }
  /* Etkin sekmenin simgesi hap içinde: hangi ekranda olunduğu tek
     bakışta, renk körlüğünde de (yalnız renk değişimi yetmez). */
  .alt-sekme a .sekme-simge, .sekme-menu .sekme-simge {
    width: 44px; height: 26px; padding: 3px 12px; box-sizing: border-box;
    border-radius: 999px;
    transition: background-color .2s ease;
  }
  .alt-sekme a.etkin .sekme-simge, .sekme-menu.etkin .sekme-simge {
    background: var(--marka-acik);
  }
  .alt-sekme a, .sekme-menu { -webkit-tap-highlight-color: transparent; }

  /* Çentikli telefonda üst çubuk saat/kamera alanının altına itilir. */
  .ust-bar { padding-top: max(12px, env(safe-area-inset-top)); }
  /* Alt çubuk + iPhone ev çizgisi son satırı kapatmasın. */
  .icerik { padding-bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }

  /* ‼️ iOS Safari 16px'ten küçük yazılı alana odaklanınca SAYFAYI
     YAKINLAŞTIRIR ve geri uzaklaştırmaz — form doldururken ekran yana
     kayar. Telefonda bütün giriş alanları 16px. */
  input, select, textarea { font-size: 16px; }
}

/* --- telefon menü penceresi --- */
.menu-penceresi {
  /* Alttan açılan kâğıt: tam genişlik, üst köşeler yuvarlak. */
  position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 560px; margin: 0 auto;
  max-height: min(86dvh, 720px); overflow-y: auto;
  overscroll-behavior: contain;
  padding: 8px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: var(--kart); color: var(--murekkep);
  border: 0; border-radius: 28px 28px 0 0;
  box-shadow: 0 -12px 40px rgba(15, 23, 42, .18);

  /* Giriş/çıkış hareketi (bkz. modern-web-guidance: top layer). */
  transform: translateY(100%);
  transition-property: transform, display, overlay;
  transition-duration: .28s;
  transition-timing-function: cubic-bezier(.2, .8, .2, 1);
  transition-behavior: allow-discrete;
}
.menu-penceresi[open] {
  transform: translateY(0);
  @starting-style { transform: translateY(100%); }
}
.menu-penceresi::backdrop {
  background-color: rgba(15, 23, 42, 0);
  transition: display .28s allow-discrete, overlay .28s allow-discrete,
              background-color .28s ease-out;
}
.menu-penceresi[open]::backdrop {
  background-color: rgba(15, 23, 42, .42);
  @starting-style { background-color: rgba(15, 23, 42, 0); }
}
.mp-tutamak {
  width: 40px; height: 4px; margin: 4px auto 6px;
  border-radius: 999px; background: var(--cizgi);
}
.mp-ust {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 4px;
}
.mp-ust h2 { margin: 0; font-size: 20px; font-weight: 900; }
.mp-kapat {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--zemin); color: var(--murekkep-2);
  border: 0; cursor: pointer;
}
.mp-kapat svg { width: 20px; height: 20px; }
.mp-grup h3 {
  margin: 16px 0 8px; font-family: var(--yazi-baslik);
  font-size: 12px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--murekkep-3);
}
.mp-karolar {
  display: grid; gap: 8px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.mp-karo {
  display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 6px;
  min-height: 84px; padding: 10px 6px;
  text-align: center; text-decoration: none;
  font-family: var(--yazi-baslik); font-size: 13px; font-weight: 600;
  line-height: 1.25; color: var(--murekkep);
  background: var(--zemin);
  border: 1px solid var(--cizgi-ince); border-radius: 18px;
  -webkit-tap-highlight-color: transparent;
}
.mp-karo:active { transform: scale(.97); }
.mp-karo.etkin {
  background: var(--marka-acik); color: var(--marka-koyu);
  border-color: color-mix(in srgb, var(--marka) 35%, transparent);
}
.mp-simge {
  width: 40px; height: 40px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kart); color: var(--marka);
  box-shadow: var(--golge);
}
.mp-simge svg { width: 22px; height: 22px; }
.mp-cikis {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; margin-top: 18px;
  font-family: var(--yazi-baslik); font-size: 14px; font-weight: 700;
  color: var(--hata); text-decoration: none;
  border: 1px solid var(--cizgi); border-radius: 999px;
}
.mp-cikis svg { width: 18px; height: 18px; }
.mp-karo:focus-visible, .mp-cikis:focus-visible, .mp-kapat:focus-visible {
  outline: 2px solid var(--marka); outline-offset: 2px;
}

/* --- tablet: simge rayı --- */
@media (min-width: 721px) and (max-width: 1099px) {
  .yan {
    width: 92px; flex: 0 0 92px;
    padding: 16px 8px;
    overflow-y: auto; scrollbar-width: none;
  }
  .yan .marka { display: none; }
  .marka-kisa {
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin: 0 auto;
    border-radius: 14px; text-decoration: none;
    font-family: var(--yazi-gosterim); font-size: 22px; font-weight: 900;
    color: var(--dugme-yazi); background: var(--marka);
  }
  .yan nav { margin-top: 14px; gap: 4px; }
  .yan nav a {
    flex-direction: column; justify-content: center; gap: 4px;
    min-height: 60px; padding: 8px 4px;
    text-align: center; font-size: 11px; line-height: 1.15;
  }
  .yan nav a .menu-simge { width: 22px; height: 22px; }
  .menu-uzun { display: none; }
  .menu-kisa { display: block; }
  /* Çıkış rayın en altında, gezinmeden ayrı. */
  .yan nav .menu-cikis { margin-top: 10px; border-top: 1px solid var(--cizgi-ince);
                         border-radius: 0 0 14px 14px; }
  .icerik { padding: 24px 28px 40px; }
  /* Tablette parmak hedefleri telefondaki gibi büyük kalır. */
  input, select, textarea { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-penceresi { transform: none; transition-duration: .01s; }
  .menu-penceresi[open] { @starting-style { transform: none; } }
  .mp-karo:active { transform: none; }
}

/* --- sesli ders tanıtımı --- */
.tanitim-adim { list-style: none; margin: 0; padding: 0; }
.tanitim-adim li {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 0; border-top: 1px solid var(--cizgi);
  font-size: 14px; line-height: 1.6;
}
.tanitim-adim li:first-child { border-top: none; padding-top: 0; }
.adim-no {
  flex: 0 0 auto;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--marka-acik); color: var(--marka-koyu);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
}
.tanitim-not {
  margin: 14px 0 0; padding-top: 12px;
  border-top: 1px solid var(--cizgi); font-size: 12px; line-height: 1.6;
}

/* ==========================================================================
   GENÇ KATMANI — yalnız öğrenci ekranlarında (body.genc)
   ==========================================================================
   Ortaokul/lise çağındaki bir kullanıcı için tasarlandı. İki tuzaktan
   kaçınıldı: kurumsal SaaS soğukluğu ("babamın programı") ve çocuk
   arayüzü ("bana çocuk muamelesi yapıyor"). 13 yaşındaki biri kendini
   büyümüş hissetmek ister.

   Veli ekranları bu katmanı ALMAZ: rapor ciddiyetini korumalı.
   ========================================================================== */

/* ‼️ GENÇ KATMANI ARTIK MARKA RENGİNE DOKUNMUYOR ve sebebi tasarım
   sisteminin kuralı: MENEKŞE YALNIZ YAPAY ZEKÂYA AİT. Eskiden bu katman
   `--marka`yı menekşe yapıyordu; yeni sistemde bu, "bunu makine mi
   söyledi" ayrımını öğrenci ekranlarında tamamen siliyordu — ipucu,
   ispat değerlendirmesi ve sesli ders, sıradan düğmelerle aynı renge
   düşüyordu. (Karanlık tema denetiminde görüldü.)

   Katmana kalan iş: ENERJİ. Daha yuvarlak köşeler, hap düğmeler, canlı
   gradyan ve pembe vurgu — hepsi markadan bağımsız. */
body.genc {
  /* ‼️ PEMBE KALDIRILDI ve katman KÜÇÜLDÜ. Bu blok eskiden markanın
     yanında gradyan ucunu ve vurgu rengini de pembeye çeviriyordu;
     pembe tasarım sisteminde YOK (üçüncü renk kehribar/mercan) ve
     kahraman kartını oyuncak gibi gösteriyordu. Gradyan ile rozet
     madalyası artık kök belirteçlerden geliyor; katmana kalan tek renk
     serinin alev tonu. */
  --enerji:     #f97316;   /* seri alevi — mercan */
  --yaricap:      18px;    /* daha yuvarlak, daha yumuşak */
  --yaricap-kart: 24px;
  --yaricap-hero: 32px;

  /* --- eğlenceli arka plan (aşağıda `body.genc::before/::after`) ---
     ‼️ Lekeler paletin kendi üç ailesinden: çivit (marka), kehribar
     (enerji), mint (başarı). MENEKŞE YOK — o renk yapay zekâya ait. */
  /* Çizimler üç renkte, çapraz yumuşak geçişle: yan yana iki çizim
     çoğu zaman farklı renkte düşer. */
  --arka-desen-1: rgba(79, 70, 229, .17);
  --arka-desen-2: rgba(245, 158, 11, .26);
  --arka-desen-3: rgba(16, 185, 129, .22);
  --arka-leke-1: rgba(99, 102, 241, .22);
  --arka-leke-2: rgba(245, 158, 11, .20);
  --arka-leke-3: rgba(16, 185, 129, .17);
  /* İçerik sütunu arkasındaki hafif perde: desen, uzun metnin altında
     okumayı bozmasın diye kartların dışında kalan boşlukta söner. */
  --arka-perde:  rgba(248, 250, 252, .55);
  /* Sayfa simge karosunun üstündeki ışık yansıması. */
  --parlama:     rgba(255, 255, 255, .38);
}

@media (prefers-color-scheme: dark) {
  body.genc {
    /* ‼️ `body.genc` seçicisi `:root`ten GÜÇLÜ: burada yeniden
       tanımlanmayan her renk, karanlık temada AÇIK tema değerinde kalır.
       Katman markaya artık dokunmadığı için liste kısaldı — ama kuralın
       kendisi geçerli, listeye eklenen her renk buraya da yazılmalı. */
    --enerji:     #fb923c;
    --arka-desen-1: rgba(165, 180, 252, .13);
    --arka-desen-2: rgba(251, 191, 36, .11);
    --arka-desen-3: rgba(52, 211, 153, .11);
    --arka-leke-1: rgba(79, 70, 229, .24);
    --arka-leke-2: rgba(245, 158, 11, .10);
    --arka-leke-3: rgba(16, 185, 129, .10);
    --arka-perde:  rgba(11, 17, 32, .45);
    --parlama:     rgba(255, 255, 255, .22);
  }
}

/* ==========================================================================
   ARKA PLAN — defter kenarı karalamaları + yumuşak renk lekeleri
   ==========================================================================
   Kullanıcı: "biraz daha eğlenceli bir arka plan, o yaş grubuna uygun".
   Kartlar beyaz ve gölgeli kaldığı için içerik okunaklı; eğlence
   kartların ARASINDAKİ boşlukta yaşıyor.

   ‼️ `background-attachment: fixed` KULLANILMADI: iOS Safari onu yok
   sayıyor ve desen sayfayla kayıp kesiliyordu. Sabit konumlu sözde öğe
   her tarayıcıda aynı davranıyor.
   ‼️ Desen MASKE: SVG'nin rengi önemsiz, rengi `--arka-desen-*` verir —
   karanlık tema kendiliğinden uyar. SVG'yi `betikler/arka_desen_uret.py`
   üretir; elle düzenlemeyin. */
body.genc { isolation: isolate; }
body.genc::before,
body.genc::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}
body.genc::after {
  /* Lekeler — ekranın köşelerinde, içeriğin tam arkasında değil. */
  background:
    radial-gradient(38rem 30rem at 8% -6%,  var(--arka-leke-1), transparent 70%),
    radial-gradient(32rem 28rem at 104% 38%, var(--arka-leke-2), transparent 70%),
    radial-gradient(34rem 26rem at 30% 108%, var(--arka-leke-3), transparent 70%);
  animation: arka-suzul 36s ease-in-out infinite alternate;
}
body.genc::before {
  --arka-desen-resim: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='360' viewBox='0 0 360 360' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cg transform='translate(46 52) rotate(-35)'%3E%3Cpath d='M-18 6 L12 -6 L18 -4 L20 0 L-12 12 Z'/%3E%3Cpath d='M-18 6 L-24 10 L-12 12'/%3E%3Cpath d='M12 -6 L14 6'/%3E%3C/g%3E%3Cg transform='translate(214 40) rotate(12)'%3E%3Cpath d='M0 -14 L4 -4 L14 -4 L6 3 L9 13 L0 7 L-9 13 L-6 3 L-14 -4 L-4 -4 Z'/%3E%3C/g%3E%3Cg transform='translate(122 140) rotate(0)'%3E%3Cellipse rx='20' ry='7'/%3E%3Cellipse rx='20' ry='7' transform='rotate(60)'/%3E%3Cellipse rx='20' ry='7' transform='rotate(-60)'/%3E%3Ccircle r='2.4' fill='black'/%3E%3C/g%3E%3Cg transform='translate(292 132) rotate(18)'%3E%3Cpath d='M-16 14 L-16 -16 L16 14 Z'/%3E%3Cpath d='M-10 8 L-10 -2 L0 8 Z'/%3E%3Cpath d='M-16 -8 h4 M-16 0 h4 M-16 8 h3'/%3E%3C/g%3E%3Cg transform='translate(30 196) rotate(-8)'%3E%3Cpath d='M-12 -8 Q-12 -11 -8 -11 H12'/%3E%3Cpath d='M-4 -11 V10'/%3E%3Cpath d='M5 -11 V7 Q5 10 9 10'/%3E%3C/g%3E%3Cg transform='translate(206 236) rotate(0)'%3E%3Ccircle r='11'/%3E%3Cellipse rx='22' ry='6' transform='rotate(-20)'/%3E%3C/g%3E%3Cg transform='translate(70 290) rotate(6)'%3E%3Cpath d='M-9 2 A11 11 0 1 1 9 2 Q5 6 5 10 H-5 Q-5 6 -9 2 Z'/%3E%3Cpath d='M-4 14 H4 M-3 18 H3'/%3E%3C/g%3E%3Cg transform='translate(312 300) rotate(-18)'%3E%3Cpath d='M-18 0 L18 -12 L4 14 L0 3 Z'/%3E%3Cpath d='M0 3 L18 -12'/%3E%3C/g%3E%3Cg transform='translate(160 332) rotate(-6)'%3E%3Cpath d='M0 -8 Q-10 -12 -18 -9 V9 Q-10 6 0 10 Q10 6 18 9 V-9 Q10 -12 0 -8 Z'/%3E%3Cpath d='M0 -8 V10'/%3E%3C/g%3E%3Cg transform='translate(150 64) rotate(0)'%3E%3Cpath d='M-5 0 H5 M0 -5 V5'/%3E%3C/g%3E%3Cg transform='translate(262 206) rotate(0)'%3E%3Cpath d='M-4 -4 L4 4 M4 -4 L-4 4'/%3E%3C/g%3E%3Cg transform='translate(100 220) rotate(0)'%3E%3Ccircle r='3'/%3E%3C/g%3E%3Cg transform='translate(340 60) rotate(0)'%3E%3Cpath d='M-5 0 H5 M0 -5 V5'/%3E%3C/g%3E%3Cg transform='translate(22 110) rotate(0)'%3E%3Ccircle r='2.5'/%3E%3C/g%3E%3Cg transform='translate(250 350) rotate(0)'%3E%3Cpath d='M-4 -4 L4 4 M4 -4 L-4 4'/%3E%3C/g%3E%3C/svg%3E");
  z-index: -1;
  background: repeating-linear-gradient(115deg,
    var(--arka-desen-1) 0, var(--arka-desen-2) 260px,
    var(--arka-desen-3) 520px, var(--arka-desen-1) 780px);
  -webkit-mask-image: var(--arka-desen-resim);
          mask-image: var(--arka-desen-resim);
  -webkit-mask-size: 360px 360px;
          mask-size: 360px 360px;
}
/* Lekeler desenin ALTINDA kalsın: aynı z-index'te sonra gelen üstte
   çizilir, bu yüzden desen (::before) ayrıca yukarı alınıyor. */
body.genc::after { z-index: -2; }

@keyframes arka-suzul {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to   { transform: translate3d(-2%, 1.5%, 0) scale(1.06); }
}
@media (prefers-reduced-motion: reduce) {
  body.genc::after { animation: none; }
}
@media print {
  body.genc::before, body.genc::after { display: none; }
}

/* ‼️ KART DIŞI METİN DESENİN ÜSTÜNE DÜŞÜYORDU (tarayıcıda görüldü):
   sayfa başlığı ve açıklama satırları doğrudan zemine yazılıyor, program
   ekranında başlığın üstünde bir kalem çizimi duruyordu. Sütunun
   arkasındaki kenarı yumuşak perde deseni metnin altında söndürür;
   çizimler yanlarda canlı kalır. */
body.genc .sutun {
  background: var(--arka-perde);
  box-shadow: 0 0 48px 32px var(--arka-perde);
  border-radius: 48px;
}

/* Yan menü ve üst şeritler desenin üstünde yarı saydam cam: menü
   katı beyaz bir duvar gibi durunca arka plan "yarım sayfa" görünüyordu. */
body.genc .yan {
  background: var(--arka-perde);
  -webkit-backdrop-filter: blur(14px);
          backdrop-filter: blur(14px);
}

body.genc .baslik {
  font-size: 30px; font-weight: 900; letter-spacing: -.025em;
}
body.genc .dugme {
  border-radius: 999px;            /* hap düğme */
  padding: 13px 22px; font-weight: 700;
}

/* --- kahraman kart --- */
.kahraman {
  position: relative; overflow: hidden;
  border-radius: var(--yaricap-hero); padding: 24px;
  color: var(--gradyan-yazi);
  background: linear-gradient(135deg, var(--gradyan-bas) 0%,
                                       var(--gradyan-son) 100%);
  box-shadow: 0 10px 24px -10px
              color-mix(in srgb, var(--gradyan-bas) 70%, transparent);
}
/* Arkadaki büyük daire: düz gradyanı kırar, derinlik verir. */
.kahraman::after {
  content: ""; position: absolute; inset-inline-end: -60px; top: -70px;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(255, 255, 255, .12);
}
.kahraman-ust {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; position: relative; z-index: 1;
}
.kahraman-govde {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  margin-top: 16px; position: relative; z-index: 1;
}
.kahraman-sayi {
  font-family: var(--yazi-gosterim);
  font-size: 48px; font-weight: 900; line-height: 1; letter-spacing: -.03em;
}
.kahraman-etiket {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .08em; opacity: .85;
}
.kahraman-alt { font-size: 13px; opacity: .9; margin-top: 6px; }

/* --- seri çipi --- */
.seri-cip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  font-size: 14px; font-weight: 700;
  backdrop-filter: blur(4px);
}
.seri-alev { width: 22px; height: 22px; display: block; }
/* Seri bugün işlenmediyse alev soluk: "bugün henüz çalışmadın" sinyali. */
.seri-cip.soguk { background: rgba(255, 255, 255, .10); opacity: .8; }

/* --- ilerleme halkası --- */
.halka { flex: 0 0 auto; }
.halka svg { display: block; transform: rotate(-90deg); }
.halka-iz { stroke: rgba(255, 255, 255, .25); }
.halka-dolu {
  stroke: var(--gradyan-yazi); stroke-linecap: round;
  transition: stroke-dashoffset .6s ease;
}
.halka-yazi {
  transform: rotate(90deg); transform-origin: center;
  fill: var(--gradyan-yazi); font-weight: 800; font-size: 18px;
}

/* --- seviye çubuğu --- */
.seviye {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; position: relative; z-index: 1;
}
.seviye-rozet {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .2);
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800;
}
.seviye-cubuk {
  flex: 1; height: 8px; border-radius: 999px;
  background: rgba(255, 255, 255, .22); overflow: hidden;
}
.seviye-dolgu {
  height: 100%; border-radius: 999px; background: var(--gradyan-yazi);
  transition: width .6s ease;
}
.seviye-not { font-size: 12px; opacity: .9; white-space: nowrap; }

/* --- büyük eylem düğmesi --- */
.buyuk-dugme {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  /* Bağlam satırı ("Hedefe 38 dakika") kendi satırına insin. */
  flex-wrap: wrap;
  width: 100%; padding: 18px 22px;
  font: inherit; font-family: var(--yazi-gosterim);
  font-size: 19px; font-weight: 900; letter-spacing: -.01em;
  color: var(--gradyan-yazi);
  background: linear-gradient(135deg, var(--gradyan-bas), var(--gradyan-son));
  border: none; border-radius: 28px; cursor: pointer;
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--gradyan-yazi) 22%, transparent),
              var(--golge-3);
  transition: transform .12s ease;
}
.buyuk-dugme:hover { transform: translateY(-2px); }
.buyuk-dugme:active { transform: translateY(0); }
.buyuk-dugme svg { width: 22px; height: 22px; }

/* --- rozet ızgarası --- */
.rozet-izgara {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
}
/* Izgara kartları eşit yükseklikte uzuyor ama içerik uzunlukları farklı:
   iki satıra taşan bir rozet adı ("BİNLER YOLUNDA") ilerleme çubuğunu
   aşağı itiyor ve satır boyunca çubuklar kayıyordu. Sütun düzeni +
   `margin-top: auto` çubukları kartın DİBİNE hizalar. */
.rozet {
  display: flex; flex-direction: column;
  text-align: center; padding: 12px 8px;
  border: 1px solid var(--cizgi); border-radius: 14px;
  background: var(--kart);
}
.rozet-simge {
  width: 38px; height: 38px; margin: 0 auto 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  background: var(--zemin); color: var(--murekkep-3);
}
/* ‼️ KAZANILAN ROZET KEHRİBAR, ÇİVİT DEĞİL. Belgede üçüncü renk tam
   olarak "hedef rozetleri ve XP kazanımları" için ayrılmış; çivit
   gezinme ve ana eylem rengi. Rozetler çivit olduğunda ekrandaki her
   şey aynı renkteydi ve kazanılan rozet hiç öne çıkmıyordu. */
.rozet.kazanildi { border-color: var(--vurgu); }
.rozet.kazanildi .rozet-simge {
  background: linear-gradient(135deg, var(--enerji), var(--vurgu));
  color: var(--gradyan-yazi);
}
/* Nefes payı ADIN altına yazılır: çubuğa ikinci bir üst kenar boşluğu
   vermek `margin-top: auto`yu ezer ve hizalama sessizce bozulur. */
.rozet-ad { font-size: 12px; font-weight: 700; line-height: 1.3;
            margin-block-end: 7px; }
.rozet-aciklama { font-size: 10px; color: var(--murekkep-3); margin-top: 3px; }
/* Kazanılmamış rozette ilerleme çubuğu: "az kaldı" hissi motive eder. */
.rozet-cubuk {
  height: 4px; border-radius: 999px; background: var(--cizgi);
  margin-top: auto; overflow: hidden;
}

.rozet-cubuk div { height: 100%; background: var(--marka); border-radius: 999px; }

@media (prefers-reduced-motion: reduce) {
  .halka-dolu, .seviye-dolgu, .buyuk-dugme { transition: none; }
  .buyuk-dugme:hover { transform: none; }
}

/* --- çalışma sayacı (genç) ---
   Öğrencinin en uzun baktığı ekran burası: 40 dakika boyunca açık duran
   şey beyaz bir kutu değil, panodaki kahraman kartla aynı dili konuşan
   bir sayaç olmalı. Kart yalnız GÖRÜNÜMDE değişir; sürenin nasıl
   sayıldığına dair tek satır bile değişmiyor. */
body.genc .sayac-kart {
  position: relative; overflow: hidden;
  border: none; border-radius: 22px; padding: 30px 20px;
  color: var(--gradyan-yazi);
  background: linear-gradient(135deg, var(--gradyan-bas) 0%,
                                      var(--gradyan-son) 100%);
  box-shadow: 0 10px 24px -10px
              color-mix(in srgb, var(--gradyan-bas) 70%, transparent);
}
body.genc .sayac-konu {
  color: inherit; opacity: .85;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
body.genc .sayac-ekran {
  font-size: clamp(56px, 15vw, 76px); font-weight: 800;
}
/* Durum etiketi gradyanın üstünde okunmalı ama RENGİNİ korumalı:
   "süre işlemiyor" uyarısının sarısı bilgi taşıyor. Bu yüzden yazı
   rengi değil, ARKASI değişiyor. */
body.genc .sayac-kart .sayac-durum {
  display: inline-flex; align-items: center;
  margin-top: 12px; padding: 5px 14px; border-radius: 999px;
  background: var(--kart);
}
body.genc .sayac-kart .sayac-not { color: inherit; opacity: .8; }
body.genc .sayac-kart .dugme-ikincil {
  /* Saydam düğme gradyanın üstünde silikleşiyordu: ince bir kenarlık
     "bu bir düğme" bilgisini geri veriyor. */
  background: rgba(255, 255, 255, .18);
  border-color: rgba(255, 255, 255, .45);
  color: var(--gradyan-yazi);
}
body.genc .sayac-kart .dugme-ikincil:hover {
  background: rgba(255, 255, 255, .30);
  border-color: rgba(255, 255, 255, .6);
}
/* "Devam et" birincil düğme: gradyan üstünde dolu beyaz hap. */
body.genc .sayac-kart .dugme:not(.dugme-ikincil) {
  background: var(--kart); border-color: var(--kart); color: var(--marka-koyu);
}

/* --- pano yerleşimi --- */
.kahraman-ad {
  font-family: var(--yazi-gosterim);
  font-size: 28px; font-weight: 900; letter-spacing: -.02em; line-height: 1.15;
}
.ikili-eylem .dugme { flex: 1; text-decoration: none; }
/* ‼️ `float` KALDIRILDI: bölüm başlığı artık flex ve float orada
   hizayı bozuyor. Sağ uca itme işini `.bolum-sag` yapıyor. */
.rozet-sayac {
  margin-inline-start: auto;
  font-size: 13px; font-weight: 700; color: var(--murekkep-3);
  text-transform: none; letter-spacing: 0;
}
.ogrenci-satir {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 9px 0; width: 100%;
}
.ogrenci-satir .dugme { width: auto; text-decoration: none; }

/* --- konu anlatımı ---
   Anlatım OKUNACAK kadar uzun bir metin: satır uzunluğu, satır aralığı ve
   punto burada okunabilirlik için ayrı ayarlanıyor. Uygulamanın geri kalanı
   kısa etiketlerden oluşuyor ve oradaki değerler bir sayfalık metinde
   yorucu olurdu. */
/* Konu adı bir BAŞLIK, bölüm etiketi değil: `.bolum-baslik` 13px, gri ve
   BÜYÜK HARF — uzun MEB konu adları orada bağırıyor ve okunmuyordu. */
.konu-adi { margin: 0 0 2px; font-size: 18px; font-weight: 700;
            letter-spacing: -.01em; }
.anlatim-kart { margin-top: 14px; }
.anlatim-ses { width: 100%; margin: 14px 0 4px; display: block; }
.anlatim-metin {
  margin-top: 10px; font-size: 16px; line-height: 1.75;
  color: var(--murekkep-2);
  /* ~65 karakter: göz satır sonundan başına dönerken kaybolmasın. */
  max-inline-size: 62ch;
}
.anlatim-metin p { margin: 0 0 14px; }
/* Vurgulu madde listesi. İlk kullanımı konu anlatımının hatırlatma
   maddeleri (anlatımın KENDİSİNDE madde işareti yasak — o metin kulak
   için yazılıyor); bildirim ekranındaki "ne zaman mesaj gelir" listesi de
   aynı bileşeni kullanır. Sunum sınıfıdır, tek ekrana bağlı değildir. */
.anahtar-nokta {
  margin: 12px 0 0; padding: 12px 14px 12px 30px;
  background: var(--marka-acik); border-radius: var(--yaricap);
  color: var(--marka-koyu); font-weight: 600; line-height: 1.6;
}
.anahtar-nokta li { margin: 3px 0; }

/* --- koç sesi seçimi -----------------------------------------------------
   Hap biçimli iki seçenek. Yerli radyo düğmesi burada da GİZLİ ama DURUYOR
   (bkz. .sik): seçimi hapın kendisi gösteriyor, klavye ve ekran okuyucu
   yine radyoya bağlı. */
.ses-secim-not { margin: 0 0 12px; }
.ses-secim-satir { display: flex; flex-wrap: wrap; gap: 8px; }
.ses-hap {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px;
  font-family: var(--yazi-baslik); font-size: 14px; font-weight: 600;
  color: var(--murekkep-2); background: var(--zemin);
  border: 1.5px solid var(--cizgi); border-radius: 999px; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.ses-hap:hover { border-color: var(--marka); color: var(--marka); }
.ses-hap input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.ses-hap:has(input:focus-visible) {
  border-color: var(--marka); box-shadow: 0 0 0 4px var(--marka-acik);
}
.ses-hap-secili {
  border-color: var(--marka); background: var(--marka-acik);
  color: var(--marka);
}

/* --- veri tablosu --------------------------------------------------------
   ‼️ `.izgara`DAN AYRI BİR BİLEŞEN. İkisi aynı sınıfa bağlıydı ve bu,
   projenin kendi dersini (bkz. test_ayni_sinif_adina_iki_bilesen) bir kez
   daha doğruluyordu: ÇİZELGE ızgarası hücre hücre çerçeveli olmalı —
   gözle "salı 3. saat" taranıyor. VERİ tablosu ise satır satır okunur;
   orada hücre çerçevesi gürültüdür ve deneme geçmişini bir muhasebe
   çıktısına benzetiyordu. */
.veri-tablo { width: 100%; border-collapse: collapse; }
.veri-tablo th, .veri-tablo td {
  padding: 12px 14px;
  text-align: end;
  border-block-end: 1px solid var(--cizgi-ince);
  /* Rakamlar alt alta hizalansın: sütun gözle karşılaştırılıyor. */
  font-variant-numeric: tabular-nums;
}
/* İlk sütun etikettir (tarih, ders kodu): sola yaslanır.
   ‼️ METİN SÜTUNLARI DA SOLA. Varsayılan "sağa yasla" sayı sütunları
   içindir; konu adı sağa yaslanınca ("Gerçek, mecaz ve terim anlam")
   satırlar birbirini tutmuyor ve tablo okunmaz oluyordu. Bu kural
   `.konu-hucre`den GÜÇLÜ olmalı — sınıf tek başına yazıldığında
   `.veri-tablo td` onu eziyordu (tarayıcıda görüldü). */
.veri-tablo th:first-child, .veri-tablo td:first-child,
.veri-tablo th.konu-hucre, .veri-tablo td.konu-hucre { text-align: start; }
/* İşlem sütunu: düğmeler sağ kenara hizalı, alt alta rahat dursun. */
.veri-tablo td.islem-hucre { text-align: end; }
.veri-tablo td.islem-hucre form + form { margin-block-start: 6px; }
.veri-tablo thead th {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--murekkep-3);
  border-block-end: 1px solid var(--cizgi);
  white-space: nowrap;
}
.veri-tablo tbody tr:last-child td { border-block-end: none; }
.veri-tablo tbody tr:hover { background: var(--zemin); }
/* Tablodaki bağlantı bir DEĞERDİR (net, oran): altı çizili mavi bağlantı
   gibi durması sayıyı okunaksız yapıyordu. */
.veri-tablo a { color: var(--marka); text-decoration: none; font-weight: 700; }
.veri-tablo a:hover { text-decoration: underline; }

/* ==========================================================================
   BİLEŞEN DİLİ — referans tasarımın asıl farkı buydu
   ‼️ Ekranlarımız "bir kartın içine yazılmış form" gibi duruyordu ve
   sebebi boşluk ya da renk değildi: ELİMİZDE BİLEŞEN YOKTU. Referansta
   her ekran şu beş parçadan kuruluyor — simge hapı, durum hapı, ölçüm
   kutusu, tonlu iç panel, eylem kartı. Hepsi burada.
   ========================================================================== */

/* --- simge hapı: metnin başındaki yuvarlak tonlu simge --- */
.simge-hap {
  flex: 0 0 auto;
  width: 28px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marka-acik); color: var(--marka);
}
.simge-hap svg { width: 16px; height: 16px; }
.simge-hap-yz     { background: var(--yz-acik);      color: var(--yz); }
.simge-hap-enerji { background: var(--enerji-acik);  color: var(--enerji); }
.simge-hap-basari { background: var(--basari-acik);  color: var(--basari); }
.simge-hap-hata   { background: var(--hata-acik);    color: var(--hata); }

/* --- tonlu iç panel: kartın içindeki ikinci düzlem --- */
.panel {
  background: var(--yuzey-2);
  border-radius: 14px;
  padding: 14px 16px;
}

/* --- ölçüm kutusu: simge + büyük değer + altında etiket ---
   Referansta "metrik şeridi": iki ya da dört kutu yan yana, tonlu zemin.
   Bir sayıyı düz metin olarak yazmakla kutuya koymak arasındaki fark,
   ekranın veri taşıdığının anlaşılıp anlaşılmaması. */
.olcum-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.olcum {
  background: var(--yuzey-2); border-radius: 14px; padding: 14px 16px;
  display: flex; flex-direction: column; gap: 2px;
}
.olcum-ust { display: flex; align-items: center; gap: 7px; color: var(--marka); }
.olcum-ust svg { width: 18px; height: 18px; }
.olcum-deger {
  font-family: var(--yazi-gosterim);
  font-size: 20px; font-weight: 800; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.olcum-etiket { font-size: 12px; color: var(--murekkep-2); line-height: 1.45; }
.olcum-enerji .olcum-ust { color: var(--enerji); }
.olcum-basari .olcum-ust { color: var(--basari); }
.olcum-yz     .olcum-ust { color: var(--yz); }

/* --- eylem kartı: simge karesi + başlık + açıklama + ok ---
   ‼️ BUNUN YERİNDE İKİ BOŞ HAYALET DÜĞME VARDI. 440 piksel genişliğinde,
   ortasında iki kelime; ekranın en büyük iki nesnesi hiçbir şey
   anlatmıyordu. Eylem kartı ne olduğunu da söylüyor. */
/* ‼️ İKİ SÜTUN. 230px alt sınırıyla 880px'lik sütuna ÜÇ kart sığıyordu ve
   dördüncüsü tek başına alt satırda öksüz kalıyordu. */
.eylem-izgara {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px; margin-top: 10px;
}
.eylem-kart {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  background: var(--kart);
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--yaricap-kart);
  box-shadow: var(--golge);
  color: inherit; text-decoration: none;
  transition: border-color .12s ease, transform .12s ease,
              box-shadow .12s ease;
}
.eylem-kart:hover {
  border-color: var(--marka); transform: translateY(-1px);
  box-shadow: var(--golge-2);
}
.eylem-simge {
  flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 15px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marka-acik); color: var(--marka);
}
.eylem-simge svg { width: 21px; height: 21px; }
.eylem-simge-yz { background: var(--yz-acik); color: var(--yz); }
/* ‼️ BAŞLIK VE AÇIKLAMA AYRI SATIRDA. İkisi de `span` olduğu için satır
   içinde akıyor ve "Test çöz Konu testi ya da LGS denemesi" diye tek
   cümleye dönüşüyorlardı. */
.eylem-metin { min-width: 0; display: flex; flex-direction: column; }
.eylem-ad {
  font-family: var(--yazi-gosterim);
  font-size: 16px; font-weight: 800; color: var(--murekkep);
}
.eylem-alt {
  font-size: 12px; color: var(--murekkep-2); line-height: 1.45;
  margin-top: 2px;
}
.eylem-ok {
  margin-inline-start: auto; flex: 0 0 auto;
  width: 18px; height: 18px; color: var(--murekkep-3);
}

@media (prefers-reduced-motion: reduce) {
  .eylem-kart:hover { transform: none; }
}

/* --- pano bölüm aralığı ---
   ‼️ Bölümler arasındaki nefes payı kartın kendi boşluğundan GELMEZ:
   eylem kartları kart değil, doğrudan sayfa üstünde duruyor. */
.bolum-ara { margin: 22px 0; }
.pano-olcum { margin-top: 14px; }

/* --- büyük eylem düğmesi: artık altında bağlam satırı taşıyor ---
   ‼️ "Çalışmaya başla" tek başına neye başlanacağını söylemiyordu.
   Referans tasarımda birincil düğme daima ikinci bir satırla ne
   olacağını da yazıyor. */
.buyuk-dugme-alt {
  flex-basis: 100%; text-align: center;
  margin-top: 3px;
  font-family: var(--yazi); letter-spacing: 0;
  font-size: 12px; font-weight: 600; opacity: .82;
}

/* --- zorlandığın konular --- */
.zayif-liste { display: flex; flex-direction: column; gap: 13px; }
.zayif-ust {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-bottom: 6px;
}
.zayif-ad {
  font-family: var(--yazi-baslik);
  font-size: 14px; font-weight: 600; color: var(--murekkep);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.zayif-oran {
  flex: 0 0 auto;
  font-family: var(--yazi-baslik); font-size: 13px; font-weight: 700;
  color: var(--murekkep-2); font-variant-numeric: tabular-nums;
}
.zayif-cubuk {
  height: 7px; border-radius: 999px; background: var(--cizgi);
  overflow: hidden;
}
.zayif-cubuk div {
  height: 100%; border-radius: 999px; background: var(--uyari);
}
/* ‼️ %50'nin altı AYRI RENK: "biraz eksik" ile "hiç oturmamış" aynı
   turuncuyla gösterilince öğrenci hangisine önce bakacağını bilemiyor. */
.zayif-dusuk { background: var(--hata); }

/* --- test çözme şeridi ---------------------------------------------------
   ‼️ NEDEN YAPIŞKAN: on soruluk bir testte "kaçıncı sorudayım, kaç tane
   boş kaldı, ne kadar sürem var" bilgilerinin üçü de sayfanın en
   üstündeydi. Öğrenci 6. soruda bunları görmek için yukarı kaydırmak
   zorundaydı ve çoğu zaman kaydırmıyordu — süreyi kaçırmasının sebebi
   buydu. */
.test-serit {
  position: sticky; top: 0; z-index: 10;
  margin: -28px -24px 18px;      /* içerik dolgusunu tersleyip tam genişlik */
  padding: 14px 24px 12px;
  background: color-mix(in srgb, var(--zemin) 88%, transparent);
  backdrop-filter: blur(14px);
  border-block-end: 1px solid var(--cizgi-ince);
}
/* Üst satır üç sütun: ✕ | ortada set adı | süre. Süre yokken sağda boş
   yer tutucu — başlık gerçekten ortada kalsın. */
.test-serit-ust {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
}
.test-serit-metin { min-width: 0; text-align: center; }
.test-serit-bos { width: 44px; }
.test-kapat {
  width: 44px; height: 44px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--murekkep-2); background: var(--kart);
  border: 1px solid var(--cizgi-ince); box-shadow: var(--golge);
  text-decoration: none;
}
.test-kapat:hover { color: var(--marka); border-color: var(--marka); }
.test-kapat svg { width: 18px; height: 18px; }
.test-ad {
  margin: 0;
  font-size: 22px; font-weight: 900; letter-spacing: -.02em;
  line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* KALIN İLERLEME ÇUBUĞU: oluklu iz + her soru bir parça; tıklanınca o
   soruya atlar. Parçalar arası ince yarık "kaç soru" bilgisini korur. */
.ilerleme-serit {
  display: flex; gap: 3px; margin-top: 12px;
  padding: 3px; border-radius: 999px;
  background: var(--cizgi-ince);
  box-shadow: inset 0 1px 2px color-mix(in srgb, var(--murekkep) 10%, transparent);
}
.ilerleme-parca {
  flex: 1 1 0; height: 12px; border-radius: 999px;
  background: var(--cizgi); text-decoration: none;
  transition: background .2s ease;
}
.ilerleme-parca:hover { background: var(--murekkep-3); }
.ilerleme-parca.dolu {
  background: linear-gradient(180deg,
              color-mix(in srgb, var(--marka) 70%, var(--kart)), var(--marka));
}
.ilerleme-not {
  margin: 7px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 12px; font-weight: 600; color: var(--murekkep-3);
}

/* --- soru kartı başlığı --- */
.soru-ust {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.soru-rozet {
  flex: 0 0 auto;
  min-width: 30px; height: 30px; padding: 0 8px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--marka-acik); color: var(--marka-koyu);
  font-family: var(--yazi-baslik);
  font-size: 14px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.soru-durum {
  margin-inline-start: auto;
  padding: 4px 11px; border-radius: 999px;
  background: var(--basari-acik); color: var(--basari);
  font-family: var(--yazi-baslik);
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
}

@media (max-width: 720px) {
  /* Mobilde üst bar zaten yapışkan: şerit onun ALTINA oturur.
     ‼️ ÜST NEGATİF BOŞLUK DA DÜZELTİLİR: geniş ekranda `.icerik`
     dolgusu 28px, dar ekranda 16px. Yalnız yanları düzeltip üstü
     -28px bırakmak şeridi 12 piksel yukarı kaçırıyordu. */
  .test-serit {
    top: 60px;
    margin-inline: -16px; margin-block-start: -16px;
    padding-inline: 16px;
  }
  .test-ad { font-size: 18px; }
  .geri-sayim { font-size: 17px; padding: 6px 12px; }
  .test-serit-ust { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 8px; }
  .test-kapat, .test-serit-bos { width: 40px; height: 40px; }
}

/* --- test sonucu ---------------------------------------------------------
   ‼️ NET ÖNE ÇIKAR. Önce dört eşit kutu vardı (doğru/yanlış/boş/net);
   öğrenci gözünü "doğru"ya dikiyor, yanlışın neti nasıl aşağı çektiğini
   görmüyordu. Net asıl sonuç — LGS sıralaması onunla kuruluyor. */
.sonuc-kart {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.sonuc-net {
  flex: 0 0 auto;
  display: flex; flex-direction: column; align-items: center;
  min-width: 128px; padding: 16px 22px;
  border-radius: 20px; background: var(--marka-acik);
}
.sonuc-net-deger {
  font-family: var(--yazi-gosterim);
  font-size: 44px; font-weight: 800; line-height: 1;
  letter-spacing: -.03em; color: var(--marka-koyu);
  font-variant-numeric: tabular-nums;
}
.sonuc-net-etiket {
  margin-top: 5px;
  font-family: var(--yazi-baslik);
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  color: var(--marka);
}
.sonuc-sayaclar {
  flex: 1 1 240px; min-width: 0;
  display: flex; flex-wrap: wrap; gap: 10px;
}
.sonuc-sayac {
  flex: 1 1 72px;
  background: var(--yuzey-2); border-radius: 14px; padding: 11px 13px;
  display: flex; flex-direction: column; gap: 1px;
}
.sonuc-sayi {
  font-family: var(--yazi-gosterim);
  font-size: 22px; font-weight: 800; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.sonuc-etiket { font-size: 12px; color: var(--murekkep-2); }
.sonuc-dogru  .sonuc-sayi { color: var(--basari); }
.sonuc-yanlis .sonuc-sayi { color: var(--hata); }
/* Formül satırı sayaçların ALTINDA, tam genişlikte. */
.sonuc-formul {
  flex: 1 1 100%; margin: 0;
  font-size: 12px; line-height: 1.6; color: var(--murekkep-3);
}

/* Cevap kartındaki sonuç hapının iki ek hâli. */
.soru-durum-hata { background: var(--hata-acik);   color: var(--hata); }
.soru-durum-notr { background: var(--zemin);       color: var(--murekkep-3); }

/* --- hata defteri ---
   Süzgeç başlığı kartın içinde ölçüm şeridinin altına geliyor. */
.hd-suzgec-baslik { margin-top: 18px; }

/* --- konu anlatımı -------------------------------------------------------
   ‼️ ANLATIM YAPAY ZEKÂ ÇIKTISI. Beyaz kartta dururken ders kitabından
   alınmış gibi okunuyordu; anlatımda hata olabilir ve kaynağı gizlemek
   dürüst değil. Menekşe kart + rozet, sistemin "AI ubiquity" kuralı. */
.anlatim-ust {
  display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px;
}
.anlatim-ust-metin { min-width: 0; }
.anlatim-kaynak {
  margin: 3px 0 0;
  font-family: var(--yazi-baslik);
  font-size: 12px; font-weight: 600; color: var(--yz);
}
/* Menekşe kartın İÇİNDEKİ panel beyaz olmalı: menekşe üstüne menekşe
   koyunca iki düzlem birbirine karışıyor. */
.anlatim-panel { background: var(--kart); }
.anlatim-panel-baslik {
  margin: 0 0 8px;
  font-family: var(--yazi-baslik);
  font-size: 13px; font-weight: 700; color: var(--murekkep);
}

/* --- boş durum kartı ---
   ‼️ "Yukarıdan seç." diye tek satırlık gri bir cümle vardı; ekranın
   tamamı boş duruyor ve özellik bozukmuş gibi görünüyordu. */
.bos-kart { text-align: center; padding-block: 34px; }
.bos-simge { width: 46px; height: 46px; margin: 0 auto 14px; }
.bos-simge svg { width: 24px; height: 24px; }
.bos-baslik {
  margin: 0 0 6px;
  font-family: var(--yazi-baslik);
  font-size: 17px; font-weight: 700; color: var(--murekkep);
}
.bos-kart .sessiz { max-width: 460px; margin-inline: auto; line-height: 1.65; }

/* --- konuya eşlik eden görseller --- */
/* ‼️ RENK currentColor İLE GELİR. Çizimlerde sabit renk kullanılsaydı
   karanlık temada kaybolurlardı (projenin simge kuralıyla aynı gerekçe). */
.cizim-kutu {
  margin: 0 0 14px;
  padding: 12px;
  border: 1px solid var(--cizgi);
  border-radius: 10px;
  background: var(--yuzey-2);
  color: var(--murekkep);
  overflow-x: auto;
}
.konu-cizim { display: block; width: 100%; max-width: 460px; height: auto; }
.cizim-kutu figcaption { margin-top: 8px; font-size: 12px; }

.kavram-kart {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin: 8px 0 0; padding: 0; list-style: none;
}
.kavram-kart li {
  padding: 5px 10px;
  border: 1px solid var(--cizgi);
  border-radius: 999px;
  background: var(--kart);
  font-size: 13px;
  color: var(--murekkep-2);
}


/* ==========================================================================
   SAYFA BAŞLIĞI + BOŞ DURUM (şablon: templates/_parcalar.html)
   ==========================================================================
   Kullanıcı: iç sayfalara da panodaki canlılık. Her ekranın kendi rengi
   ve simgesi var; öğrenci menüye bakmadan nerede olduğunu anlıyor.
   Ton adları simge hapıyla aynı; ‼️ `yz` yalnız yapay zekâ ekranlarında. */
.sayfa-basi {
  display: flex; align-items: center; gap: 14px;
  margin: 0 0 20px;
}
.sayfa-basi-metin { min-width: 0; }
.sayfa-basi .baslik { margin: 0; overflow-wrap: anywhere; }
.sayfa-basi .alt-baslik { margin: 2px 0 0; }

.sayfa-simge {
  --ton: var(--marka); --ton-acik: var(--marka-acik);
  position: relative; flex: 0 0 auto;
  width: 44px; height: 44px; border-radius: 14px;
  display: grid; place-items: center;
  background: var(--ton-acik); color: var(--ton);
}
.sayfa-simge-yz     { --ton: var(--yz);     --ton-acik: var(--yz-acik); }
.sayfa-simge-enerji { --ton: var(--enerji); --ton-acik: var(--enerji-acik); }
.sayfa-simge-basari { --ton: var(--basari); --ton-acik: var(--basari-acik); }
.sayfa-simge-hata   { --ton: var(--hata);   --ton-acik: var(--hata-acik); }
.sayfa-simge-ana { width: 22px; height: 22px; }
/* Parıltı yalnız öğrencide; velide sade karo. */
.sayfa-parilti { display: none; }

/* Varsayılan ton `.simge-hap`in kendisi; makro ton adını her zaman
   yazdığı için marka sınıfı da tanımlı olmalı (boş kural değil, açık). */
.simge-hap-marka { background: var(--marka-acik); color: var(--marka); }

/* --- öğrenci: canlı karo --- */
body.genc .sayfa-simge {
  width: 58px; height: 58px; border-radius: 18px;
  color: var(--dugme-yazi);
  background: linear-gradient(145deg, var(--parlama), transparent 55%),
              var(--ton);
  box-shadow: 0 12px 22px -12px var(--ton);
  transform: rotate(-6deg);
  transition: transform .25s cubic-bezier(.34, 1.56, .64, 1);
}
body.genc .sayfa-basi:hover .sayfa-simge { transform: rotate(5deg) scale(1.05); }
body.genc .sayfa-simge-ana {
  width: 28px; height: 28px;
  transform: rotate(6deg);          /* simge düz dursun, karo eğik */
}
body.genc .sayfa-parilti {
  display: block; position: absolute;
  top: -9px; right: -11px;
  width: 20px; height: 20px;
  color: var(--enerji);
  animation: parilti 2.8s ease-in-out infinite;
}
@keyframes parilti {
  0%, 100% { transform: scale(.75) rotate(0deg);  opacity: .65; }
  50%      { transform: scale(1.1) rotate(25deg); opacity: 1; }
}

/* --- öğrenci: boş durum ---
   Kesik çerçeve "burası doldurulacak bir yuva" der; simgenin etrafındaki
   dönen halka ekranın ölü görünmesini engeller. */
body.genc .bos-kart:not(.bos-ic) {
  border: 2px dashed var(--cizgi);
  box-shadow: none;
}
body.genc .bos-simge {
  position: relative;
  width: 68px; height: 68px;
  margin-block-end: 22px;
}
body.genc .bos-simge svg { width: 30px; height: 30px; }
body.genc .bos-simge::after {
  content: "";
  position: absolute; inset: -9px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  opacity: .35;
  animation: bos-halka 16s linear infinite;
}
@keyframes bos-halka { to { transform: rotate(360deg); } }
.bos-ic { padding-block: 22px 8px; }

@media (max-width: 600px) {
  body.genc .sayfa-simge { width: 48px; height: 48px; border-radius: 15px; }
  body.genc .sayfa-simge-ana { width: 24px; height: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  body.genc .sayfa-parilti,
  body.genc .bos-simge::after { animation: none; }
  body.genc .sayfa-simge { transition: none; }
}


/* ==========================================================================
   KOÇ AVATARI — Hipatya / Tales
   ==========================================================================
   ‼️ `--ses` (0..1) çalınan sesin şiddeti; ses_ortak.js her karede yazar.
   Ağız ve hale ona bağlı: koç KONUŞURKEN canlanır, video yok, ek maliyet
   yok. `data-durum`: hazir | dinliyor | dusunuyor | konusuyor. */
.koc-avatar {
  --ses: 0;
  display: flex; align-items: center; gap: 14px;
  margin: 0;
}
.koc-svg {
  flex: 0 0 auto;
  width: 96px; height: 96px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 0 0 calc(3px + var(--ses) * 12px) var(--koc-hale);
  transition: box-shadow .08s linear;
}
.koc-buyuk { flex-direction: column; text-align: center; gap: 12px;
             margin-block-end: 8px; }
.koc-buyuk .koc-svg { width: 132px; height: 132px; }
.koc-orta .koc-svg  { width: 64px; height: 64px; box-shadow: none; }
.koc-kucuk .koc-svg { width: 40px; height: 40px; box-shadow: none; }

.koc-kunye strong {
  display: block;
  font-family: var(--yazi-baslik);
  font-size: 18px; font-weight: 800; color: var(--murekkep);
}
.koc-kunye span { font-size: 12px; color: var(--murekkep-3); }
.koc-kunye .koc-donem { white-space: nowrap; }
.koc-orta .koc-kunye strong, .koc-kucuk .koc-kunye strong { font-size: 15px; }

.koc-zemin { fill: var(--yz-acik); }
.koc-ten   { fill: var(--koc-ten); }
.koc-sac   { fill: var(--koc-sac); }
.koc-erkek .koc-sac { fill: var(--koc-sac-2); }
.koc-giysi {
  fill: var(--koc-giysi);
  stroke: var(--koc-giysi-kenar); stroke-width: 1.2;
}
.koc-yaka {
  fill: none; stroke: var(--yz); stroke-width: 2.6; stroke-linecap: round;
}
.koc-giysi-cizgi {
  fill: none; stroke: var(--koc-cizgi); stroke-width: 2; stroke-linecap: round;
}
.koc-simge {
  fill: none; stroke: var(--enerji); stroke-width: 2.2; stroke-linejoin: round;
}
.koc-bros  { fill: var(--enerji); stroke: none; }
.koc-toka  { fill: var(--enerji); }
.koc-defne { fill: var(--basari); }
.koc-sakal { fill: var(--koc-sakal); }
.koc-kirisik {
  fill: none; stroke: var(--koc-burun); stroke-width: 1.1; stroke-linecap: round;
}
.koc-bant  {
  fill: none; stroke: var(--enerji); stroke-width: 3; stroke-linecap: round;
}
.koc-kas   {
  fill: none; stroke: var(--koc-goz); stroke-width: 1.8; stroke-linecap: round;
}
.koc-goz   { fill: var(--koc-goz); }
.koc-yanak { fill: var(--koc-yanak); }
.koc-burun {
  fill: none; stroke: var(--koc-burun); stroke-width: 1.6; stroke-linecap: round;
}
.koc-agiz {
  fill: var(--koc-agiz);
  transform-box: fill-box; transform-origin: top center;
  transform: scaleY(calc(1 + var(--ses) * 1.8));
}
.koc-gozler {
  transform-box: fill-box; transform-origin: center;
  animation: koc-kirp 5.5s infinite;
}
@keyframes koc-kirp {
  0%, 93%, 100% { transform: scaleY(1); }
  95%           { transform: scaleY(.1); }
}
.koc-bas { transform-box: view-box; transform-origin: 60px 80px; }

.koc-avatar[data-durum="dinliyor"] .koc-svg {
  animation: koc-dinle 1.8s ease-in-out infinite;
}
@keyframes koc-dinle {
  0%, 100% { box-shadow: 0 0 0 3px  var(--koc-hale-dinle); }
  50%      { box-shadow: 0 0 0 10px var(--koc-hale-dinle); }
}
.koc-avatar[data-durum="dusunuyor"] .koc-bas {
  animation: koc-dusun 2.4s ease-in-out infinite;
}
@keyframes koc-dusun {
  0%, 100% { transform: rotate(0deg); }
  50%      { transform: rotate(-6deg); }
}

/* Koç seçimi: sesin yanında yüz ve ad. */
.ses-hap .koc-avatar { gap: 10px; }

@media (prefers-reduced-motion: reduce) {
  .koc-gozler,
  .koc-avatar[data-durum="dinliyor"] .koc-svg,
  .koc-avatar[data-durum="dusunuyor"] .koc-bas { animation: none; }
  .koc-svg { transition: none; }
}

/* Koç seçim hapı artık yüz + ad taşıyor: hap değil küçük kart. */
.ses-hap:has(.koc-avatar) {
  padding: 8px 18px 8px 8px;
  border-radius: var(--yaricap-kart);
}
.koc-secim-ad { display: flex; flex-direction: column; line-height: 1.25; }
.koc-secim-ad strong { font-size: 16px; color: var(--murekkep); }
.koc-secim-ad small  { font-size: 12px; font-weight: 500; color: var(--murekkep-3); }
.ses-hap-secili .koc-svg { box-shadow: 0 0 0 3px var(--yz); }

/* Sözlü yoklama / sesli test kartının başındaki koç. */
.yk-kart > .koc-avatar,
.st-kart > .koc-avatar { margin-block-end: 14px; }

/* Konu anlatımı: oynatıcının üstünde "Anlatan". */
.anlatan {
  display: flex; align-items: center; gap: 10px;
  margin-block-end: 8px;
  font-size: 13px; color: var(--murekkep-2);
}
.anlatan strong { color: var(--murekkep); }

/* ==========================================================================
   TELEFON İNCE AYARLARI (2026-09-17, 390px iframe ile ölçüldü)
   ========================================================================== */
@media (max-width: 560px) {
  /* ‼️ Deneme tablosunda NET — asıl sonuç — ekranın DIŞINDA kalıyordu:
     beş sütun 14px yan boşlukla 293px'e sığmıyor, tablo kendi içinde
     kayıyor ve öğrenci en önemli sayıyı görmüyordu. */
  .veri-tablo th, .veri-tablo td { padding: 10px 6px; font-size: 14px; }
  .veri-tablo thead th { font-size: 10px; letter-spacing: .03em; }

  /* Koç seçimi: iki kart alt alta düşüyordu. Yan yana, yüz üstte. */
  .ses-secim-satir { flex-wrap: nowrap; }
  .ses-hap:has(.koc-avatar) {
    flex: 1 1 0; min-width: 0;
    flex-direction: column; text-align: center;
    padding: 12px 8px;
  }
  .ses-hap:has(.koc-avatar) .koc-secim-ad { align-items: center; }
}


/* --- okul yazılıları (veli raporu) ---------------------------------------
   Puan büyük ve solda: veli önce ona bakıyor. Düşük not KIRMIZI DEĞİL
   turuncu — kırmızı "hata" demek, düşük not hata değil çalışılacak yer. */
.yazili-form { flex-wrap: wrap; margin-block: 12px 18px; }
.yazili-form input[type="number"] { width: 84px; }
.yazili-kart {
  border: 1px solid var(--cizgi-ince);
  border-radius: var(--yaricap);
  padding: 14px;
  margin-block-end: 12px;
  background: var(--yuzey-2);
}
.yazili-ust { display: flex; align-items: center; gap: 14px; }
.yazili-kimlik { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.yazili-puan {
  font-family: var(--yazi-baslik);
  font-size: 28px; font-weight: 800; color: var(--basari);
  min-width: 56px; text-align: center;
}
.yazili-dusuk { color: var(--uyari); }
.yazili-kart .harita-liste { margin-block-start: 8px; }

/* --- aralıklı tekrar (hata defteri ölçüm kutusundaki kısa yol) ---
   `.cip` bir etiket; düğme olarak kullanılınca tarayıcının düğme yazı
   tipini alıyordu. Menekşe DEĞİL: tekrar yapay zekâ çıktısı değil. */
.tekrar-dugme {
  margin-top: 6px;
  font-family: var(--yazi-baslik); cursor: pointer;
}

/* --- haftalık lig (templates/lig.html, pano "Ligim" kartı) ---------------
   ‼️ Renk kuralı: puan/sıra ENERJİ (amber) ailesinde — XP ile aynı dil.
   Kendi satırın çivitle vurgulanır (gezinme/"sen buradasın"). Menekşe YOK:
   lig yapay zekâ çıktısı değil. Tablo `ol` — sıra anlamlı, ekran okuyucu
   "1. madde" desin. Telefonda üç sütun tek satırda kalır (ad kısalır). */
.lig-secim { display: flex; flex-wrap: wrap; gap: 8px; margin-block-end: 12px; }
.lig-tablo { list-style: none; margin: 0; padding: 0; }
.lig-satir {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-block-end: 1px solid var(--cizgi-ince);
  font-variant-numeric: tabular-nums;
}
.lig-sira {
  flex: none; width: 30px; height: 30px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--yazi-baslik); font-weight: 800; font-size: 14px;
  background: var(--zemin); color: var(--murekkep-2);
}
.lig-ilk .lig-sira { background: var(--enerji-acik); color: var(--uyari); }
.lig-ad {
  flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600; color: var(--murekkep);
}
.lig-puan { font-family: var(--yazi-gosterim); font-weight: 900; color: var(--murekkep); }
.lig-birim { font-size: 12px; font-weight: 600; color: var(--murekkep-3); }
.lig-benim { background: var(--marka-acik); border-radius: var(--yaricap); }
.lig-benim .lig-ad { color: var(--marka-koyu); }
.lig-sampiyon {
  margin-block-start: 14px; padding: 12px 14px;
  border-radius: var(--yaricap); background: var(--yuzey-2);
}
.lig-sampiyon-baslik {
  font-family: var(--yazi-baslik); font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--murekkep-3); margin-block-end: 8px;
}
.lig-sampiyon-liste { display: flex; flex-wrap: wrap; gap: 8px; }
.lig-kod { font-family: var(--yazi-baslik); letter-spacing: .12em; }
.lig-uyelikler { list-style: none; margin: 0; padding: 0; }
.lig-uyelik { padding-block: 12px; border-block-end: 1px solid var(--cizgi-ince); }
.lig-uyelik:last-child { border-block-end: 0; }
.lig-uyelik-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lig-uyelik-ad { font-weight: 700; color: var(--murekkep); }
.lig-uyelik-alt { margin-block-start: 4px; font-size: 13px; }
.lig-uyari { margin-block-start: 8px; }
.lig-eylem { flex-wrap: wrap; gap: 8px; }
.lig-eylem form { margin: 0; }
.pano-lig { margin-block-start: 12px; }
/* Lig = XP dili: amber. (`.bolum-simge-enerji` burada işlemez — `.eylem-simge`
   dosyada ondan SONRA geldiği için rengini eziyor.) */
.eylem-simge-enerji { background: var(--enerji-acik); color: var(--uyari); }


/* ==========================================================================
   OYUN DİLİ (2026-09-22) — test şeridi, soru etiketi, puan çipi, pano
   ==========================================================================
   Kullanıcı Gizmo'nun görünüşünü beğendi: kalın ilerleme çubuğu, hap
   durum şeridi, soru kartında küçük durum etiketi, "+N puan" çipi, büyük
   yuvarlak başlıklar. DESENLER alındı, marka ve varlık alınmadı; renkler
   bu ürünün kuralıyla: puan/seri KEHRİBAR, "kaydedildi" YEŞİL, yapay zekâ
   MENEKŞE, gezinme ÇİVİT. Pembe yok. Can/kalp sistemi yok — kaçırılan
   soru hiçbir şeyi eksiltmez.
   3B süsler: Microsoft Fluent Emoji (MIT, static/img/fluent/LICENSE),
   96px PNG; hepsi süs, `alt=""`. */

/* --- durum şeridi (test çözme) --- */
.durum-serit {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 16px;
}
.durum-hap {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 32px; padding: 4px 12px 4px 8px; border-radius: 999px;
  font-family: var(--yazi-baslik); font-size: 13px; font-weight: 700;
  font-variant-numeric: tabular-nums; white-space: nowrap;
  background: var(--kart); color: var(--murekkep-2);
  border: 1px solid var(--cizgi-ince); box-shadow: var(--golge);
}
.durum-hap svg { width: 16px; height: 16px; }
.durum-hap img { width: 20px; height: 20px; display: block; }
.durum-hap-seri { color: var(--uyari); }
/* Bugün henüz sayaçla çalışılmadıysa alev soluk: hatırlatma, baskı değil. */
.durum-hap-seri.soguk img { opacity: .5; filter: grayscale(.6); }
.durum-hap-marka svg { color: var(--marka); }
.durum-hap-puan {
  padding-inline: 12px;
  background: var(--enerji-acik); color: var(--uyari); border-color: transparent;
}
.durum-hap-yz {
  background: var(--yz-acik); color: var(--yz); border-color: transparent;
  white-space: normal;
}
.durum-hap-kayit {
  background: var(--basari-acik); color: var(--basari);
  border-color: color-mix(in srgb, var(--basari) 30%, transparent);
}
/* Yapışkan başlığın alt kenarına asılı: kaydırılmış sayfada da görünür. */
.test-serit .durum-hap-kayit {
  position: absolute; inset-inline-end: 24px; bottom: -18px;
  box-shadow: var(--golge-2);
}

/* "Patla": çip küçükten büyüyüp yerine oturur (kaydedildi, +N puan). */
.patla { animation: patla .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes patla {
  0%   { transform: scale(.4) translateY(6px); opacity: 0; }
  70%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}

/* --- soru kartındaki durum etiketi ---
   Yalnız hesaplanabilen durum yazılır (tekrar_servisi.soru_etiketleri). */
.soru-etiket {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px 3px 6px; border-radius: 999px;
  font-family: var(--yazi-baslik); font-size: 12px; font-weight: 700;
  background: var(--marka-acik); color: var(--marka-koyu);
}
.soru-etiket img { width: 18px; height: 18px; display: block; }
.soru-etiket-tekrar { background: var(--enerji-acik); color: var(--uyari); }
.soru-etiket-foto   { background: var(--yz-acik);     color: var(--yz); }

/* --- sonuç: kutlama satırı + puan çipi --- */
.sonuc-kutlama {
  flex: 1 1 100%;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-block-end: 16px;
  border-block-end: 1px solid var(--cizgi-ince);
}
.sonuc-kutlama img { width: 56px; height: 56px; flex: 0 0 auto; }
.sonuc-kutlama-metin { flex: 1 1 180px; min-width: 0; }
.sonuc-kutlama-baslik {
  margin: 0; font-family: var(--yazi-gosterim);
  font-size: 24px; font-weight: 900; letter-spacing: -.02em; line-height: 1.2;
}
.sonuc-kutlama-metin .sessiz { font-size: 13px; }
.puan-cip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px; border-radius: 999px;
  font-family: var(--yazi-gosterim); font-size: 20px; font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: var(--gradyan-yazi);
  background: linear-gradient(135deg, var(--enerji), var(--uyari));
  box-shadow: 0 8px 18px -8px var(--enerji);
}
.puan-cip-not { flex-basis: 100%; margin: 0; font-size: 12px; }

/* --- 3B süs görselleri --- */
.eylem-simge img { width: 34px; height: 34px; display: block; }

/* --- pano: günün tekrarı öne çıkan kart --- */
.tekrar-kart {
  display: flex; align-items: flex-start; gap: 16px;
  border: 2px solid color-mix(in srgb, var(--enerji) 35%, var(--cizgi-ince));
  box-shadow: var(--golge-3);
}
.tekrar-gorsel {
  flex: 0 0 auto; width: 64px; height: 64px; padding: 8px;
  border-radius: 20px; background: var(--enerji-acik);
}
.tekrar-govde { flex: 1; min-width: 0; }
.tekrar-govde .bolum-baslik { margin-bottom: 6px; }

/* --- lig: kendi sıran özeti --- */
.lig-ozet {
  display: flex; align-items: center; gap: 16px;
  margin-block-end: 14px;
  background: linear-gradient(135deg, var(--enerji-acik), var(--kart) 70%);
  border: 2px solid color-mix(in srgb, var(--enerji) 30%, var(--cizgi-ince));
}
.lig-ozet img { width: 64px; height: 64px; flex: 0 0 auto; }
.lig-ozet-sira {
  font-family: var(--yazi-gosterim); font-size: 36px; font-weight: 900;
  line-height: 1; letter-spacing: -.02em; color: var(--uyari);
}
.lig-ozet-alt { margin: 4px 0 0; font-size: 13px; color: var(--murekkep-2); }

@media (max-width: 720px) {
  .durum-hap { font-size: 12px; min-height: 30px; padding-inline: 6px 10px; }
  .test-serit .durum-hap-kayit { inset-inline-end: 16px; }
  .soru-govde { font-size: 17px; }
  .sonuc-kutlama-baslik { font-size: 21px; }
  .tekrar-gorsel { width: 52px; height: 52px; padding: 6px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .patla { animation: none; }
  .soru-karti, .sik, .ilerleme-parca { transition: none; }
}

/* --- kaynak kitaplar (Derslerim): ana kaynak MEB'in yerine, ek kaynak
   yanında. ‼️ İKİSİ GÖRSEL OLARAK AYRI DURUR: aynı görünürlerse öğrenci
   soru bankasını ana kaynak sanıp dersin konu listesini kaybeder. Menekşe
   KULLANILMIYOR — burada yapay zekâ yok (tasarım kuralı). */
.kaynak-ders {
  padding: 12px 0 2px;
  border-top: 1px solid var(--cizgi-ince);
}
.kaynak-ders:first-of-type { border-top: 0; padding-top: 2px; }
.kaynak-ders-ad {
  margin: 0 0 10px; font-size: 15px; font-weight: 800;
  color: var(--murekkep);
}
.kaynak-alt-baslik {
  margin: 10px 0 6px; font-family: var(--yazi-baslik);
  font-size: 13px; font-weight: 700; color: var(--murekkep-2);
}
/* Ders satırının altındaki tek satırlık özet: telefonda kendi satırına iner. */
.kaynak-ozet { display: block; margin-top: 3px; font-size: 12px; }

/* --- bildirim tercihleri: öbek başlığı + kanal etiketi ---
   ‼️ ÖBEK BAŞLIĞI BİLGİ TAŞIYOR, SÜS DEĞİL: "düzenli raporlar" ve "olay
   bildirimleri" ayrımı veliye mesaj HACMİNİ gösteriyor. Hacmi görmeden
   günlük özeti açan veli ilk haftada kanalı tamamen susturuyor ve o zaman
   haftalık karne de gitmiyor.
   Menekşe KULLANILMIYOR: burada yapay zekâ yok (tasarım kuralı). */
.bildirim-obek {
  margin: 18px 0 8px; font-family: var(--yazi-baslik);
  font-size: 13px; font-weight: 700; color: var(--murekkep);
}
.bildirim-obek:first-of-type { margin-top: 10px; }
/* Hangi türün hangi kanaldan gideceği kutunun YANINDA yazıyor: kanal
   seçimi kartın altında ve veli kutuyu işaretlerken orayı görmüyor. */
.kanal-etiketi {
  margin-left: 6px; vertical-align: 2px;
  background: var(--marka-acik); color: var(--marka-koyu);
}

/* --- sınav takvimi uyarısı (pano) ---
   ‼️ Uyarı rengi (kehribar) ama HATA değil: takvim eksikken hiçbir şey
   kırılmıyor, yalnız program sınav haftasını bilmiyor. Bütün kart tek
   dokunma hedefi; çizelgedeki takvim bölümüne atlar. */
.takvim-uyari {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px; padding: 14px 16px;
  background: var(--uyari-acik); color: var(--murekkep);
  border: 1px solid color-mix(in srgb, var(--uyari) 30%, transparent);
  border-radius: var(--yaricap);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.pano-olcum + .takvim-uyari, .kahraman + .takvim-uyari { margin-top: 16px; }
.takvim-uyari-simge {
  flex: 0 0 auto; width: 40px; height: 40px; border-radius: 12px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--kart); color: var(--uyari);
}
.takvim-uyari-simge svg { width: 22px; height: 22px; }
.takvim-uyari-metin { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.takvim-uyari-metin strong {
  font-family: var(--yazi-baslik); font-size: 15px; font-weight: 700;
  color: var(--uyari);
}
.takvim-uyari-metin span { font-size: 13px; line-height: 1.45; color: var(--murekkep-2); }
.takvim-uyari-ok { flex: 0 0 auto; width: 18px; height: 18px; color: var(--uyari); }
.takvim-uyari:focus-visible { outline: 2px solid var(--uyari); outline-offset: 2px; }

/* --- ödeme özeti (templates/odeme.html) --- */
.odeme-tutar { display: flex; flex-direction: column; gap: 2px; margin-bottom: 14px; }
.odeme-tutar-sayi {
  font-family: var(--yazi-gosterim); font-size: 36px; font-weight: 900;
  letter-spacing: -.02em; color: var(--murekkep);
}
.odeme-tutar-alt { font-size: 13px; color: var(--murekkep-3); }
.odeme-kalemler { width: 100%; margin-bottom: 12px; }
.odeme-kalemler td:last-child { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odeme-toplam td { font-weight: 700; border-top: 1px solid var(--cizgi); }

/* Onay kutuları: kutunun kendisi küçük, DOKUNMA HEDEFİ bütün satır. */
.onay-satir {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0; font-size: 14px; line-height: 1.55; cursor: pointer;
  border-bottom: 1px solid var(--cizgi-ince);
}
.onay-satir input { flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
                    accent-color: var(--marka); }
.onay-satir a { color: var(--marka); }
.onay-satir + .dugme { margin-top: 16px; }

/* --- yasal metinler --- */
.yasal-kutu summary { cursor: pointer; font-family: var(--yazi-baslik); font-weight: 700; }
.yasal-kaydir { max-height: 320px; overflow-y: auto; margin-top: 10px;
                padding-inline-end: 6px; overscroll-behavior: contain; }
.yasal-metin { font-size: 14px; line-height: 1.7; color: var(--murekkep); }
.yasal-metin h1 { font-size: 26px; margin: 0 0 16px; }
.yasal-metin h2 { font-size: 18px; margin: 24px 0 8px; }
.yasal-metin table { width: 100%; border-collapse: collapse; margin: 10px 0 14px; font-size: 13px; }
.yasal-metin th, .yasal-metin td {
  text-align: start; vertical-align: top; padding: 7px 8px;
  border-bottom: 1px solid var(--cizgi);
}
.yasal-metin th { color: var(--murekkep-2); font-weight: 600; }
/* Uzun tablolar telefonda sayfayı değil kendini kaydırır. */
@media (max-width: 720px) {
  .yasal-metin table { display: block; overflow-x: auto; }
}
.yasal-sayfa { max-width: 820px; margin: 0 auto; padding: 24px 16px 60px; }
.yasal-ust { display: flex; flex-direction: column; gap: 14px; margin-bottom: 22px; }
.yasal-marka { text-decoration: none; color: var(--murekkep); }
.yasal-menu { display: flex; flex-wrap: wrap; gap: 8px; }
.yasal-menu a {
  font-size: 13px; padding: 7px 12px; border-radius: 999px; text-decoration: none;
  color: var(--murekkep-2); background: var(--kart); border: 1px solid var(--cizgi);
}
.yasal-menu a[aria-current="page"] { background: var(--marka-acik); color: var(--marka-koyu);
                                     border-color: transparent; }
.yasal-surum { margin-top: 28px; font-size: 12px; }
.yasal-baglantilar { margin-top: 24px; font-size: 13px; text-align: center; }
.yasal-baglantilar a { color: var(--murekkep-2); }

/* --- fatura türü seçimi (ödeme ekranı) --- */
/* Üç seçenek (bireysel / şirket / fatura istemiyorum) dar ekranda sarar. */
.fatura-tur { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 14px; }
.fatura-tur label {
  flex: 1 1 140px; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 8px 12px; cursor: pointer;
  border: 1px solid var(--cizgi); border-radius: var(--yaricap);
  font-family: var(--yazi-baslik); font-size: 14px; font-weight: 600;
}
.fatura-tur label:has(input:checked) {
  background: var(--marka-acik); border-color: var(--marka); color: var(--marka-koyu);
}
.fatura-tur input { accent-color: var(--marka); }

/* ==========================================================================
   YÖNETİM PANELİ (/yonetim) — geniş tablolar, sade; telefonda da okunur.
   ========================================================================== */
.yt-ust {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 10px; padding: 12px 20px; padding-top: max(12px, env(safe-area-inset-top));
  background: var(--kart); border-bottom: 1px solid var(--cizgi-ince);
  position: sticky; top: 0; z-index: 10;
}
.yt-marka { font-family: var(--yazi-baslik); font-size: 18px; font-weight: 800;
            color: var(--murekkep); text-decoration: none; }
.yt-marka span { color: var(--marka); }
.yt-menu { display: flex; flex-wrap: wrap; gap: 4px; }
.yt-menu a { padding: 9px 14px; border-radius: 999px; text-decoration: none;
             font-size: 14px; font-weight: 600; color: var(--murekkep-2); min-height: 40px;
             display: inline-flex; align-items: center; }
.yt-menu a[aria-current="page"] { background: var(--marka-acik); color: var(--marka-koyu); }
.yt-menu .yt-cikis { color: var(--hata); }
.yt-icerik { max-width: 1180px; margin: 0 auto; padding: 18px 16px 48px; }
.yt-kim { margin: 0 0 6px; font-size: 12px; }
.yt-olcum { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin-bottom: 16px; }
.yt-olcum-baglanti { text-decoration: none; color: inherit; }
.yt-iki { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.yt-alt { margin: 16px 0 6px; font-size: 13px; color: var(--murekkep-3); }
.yt-sayi { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }
.yt-cubuklar { display: flex; flex-direction: column; gap: 8px; }
.yt-cubuk-satir { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center;
                  font-size: 13px; }
.yt-cubuk { display: block; height: 10px; border-radius: 999px; background: var(--zemin);
            overflow: hidden; min-width: 80px; }
.yt-cubuk > span { display: block; height: 100%; background: var(--marka); border-radius: 999px; }
.yt-cubuk-hucre { width: 30%; }
.yt-suzgec { display: grid; gap: 10px 14px; align-items: end;
             grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
.yt-suzgec .alan { margin: 0; }
.yt-suzgec input, .yt-suzgec select {
  width: 100%; padding: 9px 10px; font: inherit; color: var(--murekkep);
  background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px;
}
.yt-suzgec-dugme { display: flex; gap: 8px; flex-wrap: wrap; }
.yt-sekmeler { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.yt-sekmeler a { padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 13px;
                 font-weight: 600; color: var(--murekkep-2); border: 1px solid var(--cizgi); }
.yt-sekmeler a[aria-current="page"] { background: var(--marka); border-color: var(--marka);
                                      color: var(--dugme-yazi); }

/* --- Türkiye haritası (yönetim özeti) ---
   SIRALI TEK TON: marka çivit ailesi, 1 (az) açık → 5 (çok) koyu; 0 = kayıt
   yok, nötr. ‼️ Koyu temada ölçek TERSİNE döner (çok = açık): koyu zeminde
   "en koyu" en görünmez olurdu. Gökkuşağı yok (bkz. dataviz kılavuzu). */
:root {
  --harita-0: #eef0f4;
  --harita-1: #e0e7ff;
  --harita-2: #c7d2fe;
  --harita-3: #a5b4fc;
  --harita-4: #6366f1;
  --harita-5: #3730a3;
  --harita-sinir: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --harita-0: #1b2437;
    --harita-1: #312e81;
    --harita-2: #3730a3;
    --harita-3: #4f46e5;
    --harita-4: #818cf8;
    --harita-5: #c7d2fe;
    --harita-sinir: #0f172a;
  }
}
.yt-harita { position: relative; }
.yt-harita-svg { display: block; width: 100%; height: auto; }
/* İl sınırı = zemin rengi ince çizgi (dolgular arası 2px boşluk kuralının haritadaki karşılığı). */
.yt-il path { stroke: var(--harita-sinir); stroke-width: 0.8; stroke-linejoin: round;
              transition: opacity .15s ease; }
.yt-s0 path, i.yt-s0 { fill: var(--harita-0); background: var(--harita-0); }
.yt-s1 path, i.yt-s1 { fill: var(--harita-1); background: var(--harita-1); }
.yt-s2 path, i.yt-s2 { fill: var(--harita-2); background: var(--harita-2); }
.yt-s3 path, i.yt-s3 { fill: var(--harita-3); background: var(--harita-3); }
.yt-s4 path, i.yt-s4 { fill: var(--harita-4); background: var(--harita-4); }
.yt-s5 path, i.yt-s5 { fill: var(--harita-5); background: var(--harita-5); }
.yt-il:hover path, .yt-il:focus-visible path, .yt-il.secili path {
  stroke: var(--murekkep); stroke-width: 1.6;
}
.yt-il:focus-visible { outline: none; }
.yt-harita-olcu { display: inline-flex; gap: 4px; flex-wrap: wrap; }
.yt-harita-olcu a { font-size: 12px; font-weight: 600; padding: 5px 10px; border-radius: 999px;
                    text-decoration: none; color: var(--murekkep-2); border: 1px solid var(--cizgi); }
.yt-harita-olcu a[aria-current="true"] { background: var(--marka-acik); color: var(--marka-koyu);
                                        border-color: transparent; }
.yt-harita-aciklama { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
                      margin-top: 10px; font-size: 12px; color: var(--murekkep-2); }
.yt-harita-aciklama span { display: inline-flex; align-items: center; gap: 6px; }
.yt-harita-aciklama i { display: inline-block; width: 18px; height: 12px; border-radius: 3px;
                        border: 1px solid var(--cizgi); }
.yt-harita-tablo { margin-top: 12px; font-size: 13px; }
.yt-harita-tablo summary { cursor: pointer; color: var(--marka); font-weight: 600; }
.yt-ipucu {
  position: absolute; z-index: 5; pointer-events: none; min-width: 150px;
  padding: 8px 10px; border-radius: 10px; font-size: 13px; line-height: 1.45;
  background: var(--kart); color: var(--murekkep);
  border: 1px solid var(--cizgi); box-shadow: var(--golge-2);
}
.yt-ipucu strong { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.yt-ipucu .yt-ipucu-il { font-weight: 700; }
.yt-ipucu .yt-ipucu-git { pointer-events: auto; display: block; margin-top: 4px; color: var(--marka); }

/* --- yönetim: talepler --- */
.yt-talep-ust { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.yt-talep-iletisim { margin: 6px 0; font-size: 14px; }
.yt-talep-iletisim a { color: var(--marka); }
.yt-talep-mesaj { white-space: pre-wrap; margin: 8px 0 12px; line-height: 1.6; }
.yt-talep-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.yt-talep-form input { flex: 1 1 240px; padding: 9px 10px; font: inherit; color: var(--murekkep);
                       background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; }
.yt-talep-form select { padding: 9px 10px; font: inherit; color: var(--murekkep);
                        background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; }

/* --- yönetim: yenileme takibi (2026-10-14) --- */
.yt-yen-pencere { margin: 0 0 14px; font-size: 14px; }
.yt-yen-pencere select { padding: 6px 8px; font: inherit; color: var(--murekkep);
                         background: var(--kart); border: 1px solid var(--cizgi); border-radius: 8px; }
.yt-yen { scroll-margin-top: 80px; }
.yt-yen-ust { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.yt-yen-kalan { font-weight: 700; font-variant-numeric: tabular-nums; }
.yt-yen-acil { color: var(--hata); }
.yt-yen-bilgi { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
                gap: 6px 18px; margin: 12px 0; font-size: 14px; }
.yt-yen-bilgi div { min-width: 0; }
.yt-yen-bilgi .yt-yen-genis { grid-column: 1 / -1; }
.yt-yen-bilgi dt { color: var(--murekkep-3); font-size: 12px; }
.yt-yen-bilgi dd { margin: 0; overflow-wrap: anywhere; }
.yt-yen-dugmeler { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }
.yt-yen-dugmeler .dugme-dar { min-width: 0; }
.yt-yen-metin { margin: 4px 0 10px; font-size: 14px; }
.yt-yen-metin summary { cursor: pointer; color: var(--marka); }
.yt-yen-metin p { margin: 8px 0 0; padding: 10px 12px; border-radius: 8px;
                  background: var(--zemin); border: 1px solid var(--cizgi); line-height: 1.6; }
.yt-yen-gecmis { list-style: none; margin: 0 0 10px; padding: 10px 0 0;
                 border-top: 1px solid var(--cizgi); font-size: 14px; }
.yt-yen-gecmis li { margin: 0 0 6px; }
.yt-yen-tarih { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--murekkep-3); }
.yt-yen-tarih input { flex: 0 0 auto; }


/* ===================== Ormanım (2026-10-09) =====================
   Her ölçülen çalışma bir ağaç; test bir çiçek. Çizimler _parcalar.agac. */
.agac-svg { display: block; width: 44px; height: 52px; }
.agac-govde  { fill: var(--orman-govde); }
.agac-yaprak { fill: var(--orman-yaprak); }
.agac-yaprak-2 { fill: var(--orman-yaprak-2); }
.agac-kuru   { fill: none; stroke: var(--orman-kuru); stroke-width: 2.8; stroke-linecap: round; }
.agac-kuru-yaprak { fill: var(--orman-kuru); }
.cicek-tac   { fill: var(--orman-cicek); }
.cicek-orta  { fill: var(--orman-cicek-2); }
.cicek-sap   { fill: none; stroke: var(--orman-yaprak-2); stroke-width: 2; stroke-linecap: round; }

.orman-alan {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px 2px;
  padding: 16px 12px 0; border-radius: var(--yaricap);
  background: linear-gradient(to bottom, var(--orman-toprak) 70%, var(--orman-zemin) 70%);
  min-height: 96px;
}
.orman-alan .agac-svg { width: 40px; height: 48px; }
.orman-alan .agac-ulu .agac-svg { width: 52px; height: 62px; }
.orman-alan .agac-fidan .agac-svg, .orman-alan .agac-kurumus .agac-svg { width: 32px; height: 38px; }
.orman-alan .cicek .agac-svg { width: 24px; height: 28px; }
.orman-bos { padding: 18px 8px 22px; margin: 0; }
.orman-ozet { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.orman-gezinti { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 12px; }
.orman-acik { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.orman-acik > div { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.orman-acik .agac-svg { width: 30px; height: 36px; }

/* Sayaç ekranında büyüyen fidan: aşamayı calisma.js yazar. */
.sayac-fidan { display: flex; flex-direction: column; align-items: center; margin: 4px 0 8px; }
.sayac-fidan .agac-svg { width: 64px; height: 76px; }
.sayac-fidan > [data-asama-cizim] { display: none; }
.sayac-fidan[data-asama="tohum"] > [data-asama-cizim="tohum"],
.sayac-fidan[data-asama="fidan"] > [data-asama-cizim="fidan"],
.sayac-fidan[data-asama="genc"]  > [data-asama-cizim="genc"],
.sayac-fidan[data-asama="ulu"]   > [data-asama-cizim="ulu"] { display: block; }
.sayac-fidan-not { font-size: 13px; color: var(--murekkep-3); margin: 2px 0 0; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .sayac-fidan > [data-asama-cizim] { animation: fidan-buyu .6s ease-out; transform-origin: 50% 100%; }
}
@keyframes fidan-buyu { from { transform: scale(.6); opacity: .3; } to { transform: scale(1); opacity: 1; } }
/* Sayaç kartı koyu gradyan: not kartın kendi (açık) yazı rengini alır. */
.sayac-kart .sayac-fidan-not { color: inherit; opacity: .85; }

/* Ayrılma nedeni (isteğe bağlı anket) — _parcalar.ayrilma_nedeni */
.ayrilma-neden { border: 1px solid var(--cizgi); border-radius: var(--yaricap); padding: 12px 14px; margin: 10px 0 14px; }
.ayrilma-neden legend { font-weight: 700; padding: 0 6px; }
.ayrilma-secenekler { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 6px 14px; margin-bottom: 10px; }
.ayrilma-secenekler label { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.ayrilma-neden textarea { width: 100%; }

/* İade ve iptaller: neden çubukları */
/* Özet sayfasının .yt-cubuk çubuğu kullanılır; satır düzeni burada ayrı. */
.yt-neden-satir { display: grid; grid-template-columns: minmax(140px, 2fr) 3fr auto; gap: 10px; align-items: center; margin: 6px 0; }
.yt-neden-ad { font-size: 14px; }
@media (max-width: 560px) { .yt-neden-satir { grid-template-columns: 1fr auto; } .yt-neden-satir .yt-cubuk { grid-column: 1 / -1; } }

/* --- yıl sonu sınıf atlama sorusu (pano, veli) — takvim-uyari kartını kullanır --- */
.sinif-soru .dugme-satir { margin-top: 8px; display: flex; gap: 8px; flex-wrap: wrap; }
.sinif-soru .takvim-uyari-metin a { color: var(--uyari); }
/* Dönem karnesi kartı: iyi haber, uyarı değil — marka rengi. */
.karne-kart {
  background: var(--marka-acik);
  border-color: color-mix(in srgb, var(--marka) 30%, transparent);
}
.karne-kart .takvim-uyari-simge, .karne-kart .takvim-uyari-metin strong,
.karne-kart .takvim-uyari-ok { color: var(--marka-koyu); }
.karne-kart:focus-visible { outline-color: var(--marka); }

/* --- LGS provası (templates/lgs_prova.html, test.html) --- */
.prova-oturumlar { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.prova-oturumlar li { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.prova-ozet { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-end; }
.prova-ozet-sayi { display: flex; flex-direction: column; gap: 2px; }
.prova-ozet-deger { font-family: var(--yazi-gosterim); font-size: 36px; font-weight: 900; color: var(--murekkep); }
.prova-ozet .form-not { flex-basis: 100%; }
.prova-ust { color: var(--basari); font-size: 12px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.prova-alt { color: var(--uyari); font-size: 12px; font-weight: 700; margin-left: 6px; white-space: nowrap; }
.prova-gecmis { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 4px; }
.prova-gecis form { margin-top: 10px; }
.prova-gecis .dugme { margin-top: 10px; }
/* LGS tarzı soruda veri tablosu (webapp/soru_metni.py) */
.soru-tablo { border-collapse: collapse; margin: 10px 0; font-family: var(--yazi-govde, inherit); font-size: 15px; font-weight: 600; }
.soru-tablo th, .soru-tablo td { border: 1px solid var(--cizgi); padding: 6px 10px; text-align: left; }
.soru-tablo th { background: var(--marka-acik); }

/* --- odak satırı + blok hedefi (Deep Work maddeleri) --- */
.odak-kart { padding: 12px 16px; }
.odak-satir { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 14px; color: var(--murekkep-2); }
.odak-satir strong { color: var(--murekkep); }
.odak-not { margin: 6px 0 0; font-size: 12px; }
.sayac-hedef { margin: 2px 0 8px; font-size: 14px; }
.hedef-sonuc { margin-top: 12px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hedef-sonuc fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; }
.hedef-sonuc legend { font-size: 14px; padding: 0; margin-bottom: 4px; width: 100%; }
.hedef-sonuc label { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; }
.hedef-ozet { margin: 10px 0 0; font-size: 14px; }
.kapanis-baslik { margin: 14px 0 6px; font-size: 14px; }
.kapanis-listesi { list-style: none; margin: 0; padding: 0; }
.kapanis-listesi li { display: flex; gap: 12px; padding: 8px 0; border-top: 1px solid var(--cizgi); }
.kapanis-listesi li:first-child { border-top: none; }
.kapanis-gun { flex: 0 0 auto; font-weight: 600; font-size: 13px; color: var(--murekkep-2); }
.kapanis-listesi dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: 13px; min-width: 0; }
.kapanis-listesi dt { color: var(--murekkep-2); }
.kapanis-listesi dd { margin: 0; overflow-wrap: anywhere; }
/* Genç temada sayaç kartı gradyan: hedef satırı kartın yazı rengini alır
   (.sessiz gri kalıp okunmuyordu). Diğer temada kart açık, dokunulmaz. */
body.genc .sayac-kart .sayac-hedef { color: inherit; }
body.genc .sayac-kart .sayac-hedef .sessiz { color: inherit; opacity: .8; }