/* Otizm Dünyası yönetim paneli ve okul paneli: "Kumsalda Maskotlar" (tasarım önerisi Yön B, 5 Ekim): uygulamanın "Kum ve
   Deniz"inin aydınlık hâli: krem zemin, kenarsız beyaz kartlar (yumuşak gölge), dolu deniz rengi seçim; maskotların renkleri
   alanların ve çocukların rengidir. Yalnız Nunito (OFL: yazitipi/OFL.txt); kalınlık hiyerarşi içindir: gövde 500, etiket 700,
   başlık 800-900. İki tema: açık (:root) ve koyu (gece yorumu: sıcak koyu lacivert zemin, krem yazı, deniz rengi vurgu).
   Tema <html data-tema="acik|koyu"> ile seçilir (tema.js; seçim localStorage "otizm-tema"); öznitelik yoksa cihaza uyar
   (prefers-color-scheme). Koyu değişkenler iki blokta aynıdır (cihaz koyu ve öznitelik yok / data-tema="koyu"); ikisi de
   yalnız ekranda geçerlidir, baskı açık kalır. Renkler yalnız değişkenlerden gelir (QR kodunun beyaz levhası dışında).
   Bir web testi (tests/web/yonetim-tema.test.js) iki koyu bloğun aynı olduğunu ve yazı/zemin çiftlerinin iki temada da
   WCAG AA'yı geçtiğini denetler (yazı en az 4.5:1; odak çizgisi, kutu kenarı ve çubuklar 3:1). */
@font-face {
  font-family: "Nunito";
  src: url("/yazitipi/Nunito-Degisken.ttf") format("truetype");
  font-weight: 200 1000;
  font-display: swap;
}

:root {
  color-scheme: light;
  --zemin: #FBF5EC;
  --kart: #FFFFFF;
  --kenar: #EFE3D1;
  --kenar-koyu: #DBC7A8;
  --metin: #2F3B54;
  --soluk: #5B667E;
  --deniz: #9FD0D6;
  --deniz-acik: #DEF0F1;
  --deniz-uzerinde: #CAE6E8;
  --deniz-orta: #296E77;
  --deniz-koyu: #1D4D54;
  --kum-acik: #FCEED5;
  --kum-yazi: #7A4A0C;
  --yesil-acik: #DEF2E4;
  --yesil-yazi: #1D6035;
  --kirmizi-acik: #FCE4DD;
  --kirmizi-kenar: #EFC1B6;
  --kirmizi: #B5453A;
  --kirmizi-koyu: #8C3228;
  --kirmizi-yazi: #792A20;
  /* Renkli zeminli düğmelerin (ana, dolu tehlikeli) ve seçili baş harflerin yazısı. */
  --dolu-yazi: #FFFFFF;
  /* Form kutuları (zemin, kenar, üstüne gelince kenar, yer tutucu) ve kart içindeki kutular (İlerleme bölümleri vb.). */
  --kutu-zemin: #FFFFFF;
  --kutu-kenar: #DBC7A8;
  --kutu-kenar-uzerinde: #C7B08A;
  --yer-tutucu: #6A7385;
  --ic-zemin: #FFFAF3;
  --ust-zemin: rgba(255, 255, 255, .92);
  --satir-uzerinde: #FDF6EC;
  --tek-sefer-zemin: #E2F2F3;
  --tehlike-zemin: #FFF5F1;
  /* Giriş sayfası ve Özet'in karşılama şeridi: zeminin iki ışığı, marka paneli (gökyüzü → deniz geçişi), logo halkası, maskot
     gölgesi, kabarcıklar (denizde köpük, kumda tepe). */
  --yalin-deniz: #DCEFF1;
  --yalin-kum: #FCEAD0;
  --marka-1: #CBEAEE;
  --marka-2: #ABDAE0;
  --marka-3: #93CDD4;
  --marka-halka: rgba(255, 255, 255, .75);
  --robot-golge: rgba(29, 77, 84, .2);
  --kabarcik: rgba(255, 255, 255, .2);
  --kabarcik-kum: rgba(244, 194, 122, .3);
  /* İlerleme çubukları (uygulamadakiyle aynı): iz, ipuçlu (--deniz), ipuçsuz (koyu), tek çubuk ve hafta (orta). */
  --cubuk-zemin: #F0E6D5;
  --cubuk-koyu: #2E7079;
  --cubuk-orta: #7FB5BC;
  --perde: rgba(47, 59, 84, .42);
  --golge: 0 1px 2px rgba(47, 59, 84, .05), 0 8px 24px rgba(47, 59, 84, .07);
  --golge-buyuk: 0 2px 6px rgba(47, 59, 84, .08), 0 24px 60px rgba(47, 59, 84, .16);
  --odak: 0 0 0 3px rgba(41, 110, 119, .28);
  --odak-cizgi: #296E77;
  /* Tema düğmesinin simgesi o anki temayı gösterir: açıkta güneş, koyuda ay. */
  --tema-gunes: block;
  --tema-ay: none;
  /* Maskotların ve alanların renkleri (renk, açık zemin, yazı): Duygular mercan, Görmek ve Bilmek deniz, Bakış ve Niyet lila,
     Sembolik Oyun güneş, Görünen ve Gerçek nane; Pamuk Kedi pembe. Yalnız alan ve çocuk kimliğinde kullanılır (data-alan,
     data-renk), süs için değil. Altın: öğretmenin serisinin kenarı (uygulamanın seri kartıyla aynı; iki temada aynı). */
  --mercan: #EE9A82;
  --mercan-acik: #FDE6DE;
  --mercan-yazi: #933822;
  --lila: #B9A2E6;
  --lila-acik: #EEE7FB;
  --lila-yazi: #563C93;
  --gunes: #F5C35C;
  --gunes-acik: #FFF1CF;
  --gunes-yazi: #6F4508;
  --pembe: #F3A9C4;
  --pembe-acik: #FCE6EF;
  --pembe-yazi: #8A2C55;
  --nane: #8FD3BC;
  --nane-acik: #DCF3EA;
  --nane-yazi: #1B5C47;
  --altin: #E2B54F;
  --yaricap: 22px;
  --yaricap-kucuk: 14px;
  --yazi-esit: "Cascadia Mono", Consolas, ui-monospace, monospace;
}

/* Koyu tema: cihaz koyuysa ve açık seçilmemişse ... */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-tema="acik"]) {
    color-scheme: dark;
    --zemin: #171B26;
    --kart: #212736;
    --kenar: #333A4C;
    --kenar-koyu: #525A6F;
    --metin: #F2EADB;
    --soluk: #BBB3A5;
    --deniz: #9CD4DA;
    --deniz-acik: #1D3D45;
    --deniz-uzerinde: #275058;
    --deniz-orta: #7AC7CF;
    --deniz-koyu: #AFE2E7;
    --kum-acik: #3C3122;
    --kum-yazi: #F3CB8E;
    --yesil-acik: #1E3A2A;
    --yesil-yazi: #A2DDB5;
    --kirmizi-acik: #452723;
    --kirmizi-kenar: #74433A;
    --kirmizi: #F29A8F;
    --kirmizi-koyu: #FFC3BA;
    --kirmizi-yazi: #F7B3A9;
    --dolu-yazi: #11151E;
    --kutu-zemin: #1A1F2C;
    --kutu-kenar: #767D91;
    --kutu-kenar-uzerinde: #9198AB;
    --yer-tutucu: #9B9587;
    --ic-zemin: #262C3C;
    --ust-zemin: rgba(33, 39, 54, .94);
    --satir-uzerinde: #293042;
    --tek-sefer-zemin: #1E3B43;
    --tehlike-zemin: #3A2524;
    --yalin-deniz: #193240;
    --yalin-kum: #2B251C;
    --marka-1: #23495A;
    --marka-2: #1D3F4D;
    --marka-3: #183642;
    --marka-halka: rgba(175, 226, 231, .3);
    --robot-golge: rgba(0, 0, 0, .38);
    --kabarcik: rgba(255, 255, 255, .06);
    --kabarcik-kum: rgba(244, 194, 122, .12);
    --cubuk-zemin: #333A4B;
    --cubuk-koyu: #4E9BA5;
    --cubuk-orta: #6DB1BA;
    --perde: rgba(6, 8, 12, .62);
    --golge: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .22);
    --golge-buyuk: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 50px rgba(0, 0, 0, .45);
    --odak: 0 0 0 3px rgba(122, 199, 207, .3);
    --odak-cizgi: #7AC7CF;
    --tema-gunes: none;
    --tema-ay: block;
    --mercan: #E9876D;
    --mercan-acik: #452821;
    --mercan-yazi: #F7B8A6;
    --lila: #A58BDB;
    --lila-acik: #312A49;
    --lila-yazi: #CFBFF3;
    --gunes: #E7B24A;
    --gunes-acik: #3D3220;
    --gunes-yazi: #F6D58E;
    --pembe: #E494B3;
    --pembe-acik: #432536;
    --pembe-yazi: #F5B9CF;
    --nane: #6FBFA5;
    --nane-acik: #1B3A31;
    --nane-yazi: #A6E2CC;
    --altin: #E2B54F;
  }
}

/* ... ya da koyu seçilmişse (cihaz ne olursa olsun). Değerler yukarıdaki blokla aynı. */
@media screen {
  :root[data-tema="koyu"] {
    color-scheme: dark;
    --zemin: #171B26;
    --kart: #212736;
    --kenar: #333A4C;
    --kenar-koyu: #525A6F;
    --metin: #F2EADB;
    --soluk: #BBB3A5;
    --deniz: #9CD4DA;
    --deniz-acik: #1D3D45;
    --deniz-uzerinde: #275058;
    --deniz-orta: #7AC7CF;
    --deniz-koyu: #AFE2E7;
    --kum-acik: #3C3122;
    --kum-yazi: #F3CB8E;
    --yesil-acik: #1E3A2A;
    --yesil-yazi: #A2DDB5;
    --kirmizi-acik: #452723;
    --kirmizi-kenar: #74433A;
    --kirmizi: #F29A8F;
    --kirmizi-koyu: #FFC3BA;
    --kirmizi-yazi: #F7B3A9;
    --dolu-yazi: #11151E;
    --kutu-zemin: #1A1F2C;
    --kutu-kenar: #767D91;
    --kutu-kenar-uzerinde: #9198AB;
    --yer-tutucu: #9B9587;
    --ic-zemin: #262C3C;
    --ust-zemin: rgba(33, 39, 54, .94);
    --satir-uzerinde: #293042;
    --tek-sefer-zemin: #1E3B43;
    --tehlike-zemin: #3A2524;
    --yalin-deniz: #193240;
    --yalin-kum: #2B251C;
    --marka-1: #23495A;
    --marka-2: #1D3F4D;
    --marka-3: #183642;
    --marka-halka: rgba(175, 226, 231, .3);
    --robot-golge: rgba(0, 0, 0, .38);
    --kabarcik: rgba(255, 255, 255, .06);
    --kabarcik-kum: rgba(244, 194, 122, .12);
    --cubuk-zemin: #333A4B;
    --cubuk-koyu: #4E9BA5;
    --cubuk-orta: #6DB1BA;
    --perde: rgba(6, 8, 12, .62);
    --golge: 0 1px 2px rgba(0, 0, 0, .28), 0 6px 18px rgba(0, 0, 0, .22);
    --golge-buyuk: 0 2px 6px rgba(0, 0, 0, .35), 0 20px 50px rgba(0, 0, 0, .45);
    --odak: 0 0 0 3px rgba(122, 199, 207, .3);
    --odak-cizgi: #7AC7CF;
    --tema-gunes: none;
    --tema-ay: block;
    --mercan: #E9876D;
    --mercan-acik: #452821;
    --mercan-yazi: #F7B8A6;
    --lila: #A58BDB;
    --lila-acik: #312A49;
    --lila-yazi: #CFBFF3;
    --gunes: #E7B24A;
    --gunes-acik: #3D3220;
    --gunes-yazi: #F6D58E;
    --pembe: #E494B3;
    --pembe-acik: #432536;
    --pembe-yazi: #F5B9CF;
    --nane: #6FBFA5;
    --nane-acik: #1B3A31;
    --nane-yazi: #A6E2CC;
    --altin: #E2B54F;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--zemin); color: var(--metin); font: 500 16px/1.55 "Nunito", "Segoe UI", system-ui, sans-serif; }
a { color: var(--deniz-orta); }
h1, h2 { color: var(--metin); line-height: 1.2; }
h1 { margin: 0; font-size: 32px; font-weight: 900; letter-spacing: -.02em; }
h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font-size: 18px; font-weight: 800; }
p { margin: 0; }
form { margin: 0; }
strong { font-weight: 700; }
:focus-visible { outline: 3px solid var(--odak-cizgi); outline-offset: 2px; }
/* Çapaya giden bağlantı (#iki-adim, #form, #gunluk-cevap …) hedefi yapışkan üst çubuğun altında bırakmasın. */
:root:has(.ust) { scroll-padding-top: 128px; }
/* Sayfa açılınca ilk Tab "İçeriğe geç"i gösterir (menüyü atlayıp içeriğe odaklanır); öbür zaman görünmez. */
.atla { position: absolute; top: -80px; left: 16px; z-index: 30; padding: 10px 18px; border-radius: 999px; background: var(--deniz-orta); color: var(--dolu-yazi); font-weight: 800; text-decoration: none; }
.atla:focus { top: 12px; box-shadow: var(--golge-buyuk); }
#icerik:focus { outline: none; }
.soluk { color: var(--soluk); }
.gizli { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.simge { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Üst çubuk ---------- */
/* Yapışkan üst çubuğun boyu: yapışkan yan sütunların üst payı (seri düzenleyicinin sağ sütunu). İki satırlı çubukta 118 px
   (yönetim; panelde 821-1180 px ve altı öğeli menü); okul panelinin tek satırlı çubuğunda aşağıda (1181 px ve üstü) 66 px. */
body { --ust-boyu: 118px; }
.ust { position: sticky; top: 0; z-index: 10; background: var(--ust-zemin); backdrop-filter: blur(8px); box-shadow: var(--golge); }
.ust-ic { display: flex; align-items: center; gap: 24px; max-width: 1120px; margin: 0 auto; padding: 10px 24px; }
.marka { display: flex; align-items: center; gap: 10px; color: var(--metin); font-size: 18px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.marka img { border-radius: 10px; }
.marka-etiket { padding: 2px 10px; border-radius: 999px; background: var(--kum-acik); color: var(--kum-yazi); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.menu { display: flex; flex: 1; gap: 4px; }
.menu a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; color: var(--soluk); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.menu a:hover { background: var(--zemin); color: var(--metin); }
.menu a[aria-current="page"] { background: var(--deniz-orta); color: var(--dolu-yazi); font-weight: 800; }
.menu a[aria-current="page"]:hover { background: var(--deniz-koyu); color: var(--dolu-yazi); }
.ust-kisi { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.marka-etiket.kurum { max-width: 260px; overflow: hidden; letter-spacing: 0; text-overflow: ellipsis; text-transform: none; white-space: nowrap; }
.yonetici-seridi { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding: 8px 16px; background: var(--kum-acik); color: var(--kum-yazi); font-weight: 700; }
.yonetici-seridi > span { display: inline-flex; align-items: center; gap: 8px; }
/* Yönetim üstünde, Yonetici__Sifirla (acil sıfırlama değişkeni) açıkken: değişken kalırsa her yeniden başlatmada şifre ve 2FA sıfırlanır. */
.acil-serit { background: var(--kirmizi-acik); border-bottom: 1px solid var(--kirmizi-kenar); color: var(--kirmizi-yazi); }
.acil-serit-ic { display: flex; align-items: flex-start; gap: 10px; max-width: 1120px; margin: 0 auto; padding: 10px 24px; font-weight: 700; }
.acil-serit .simge { margin-top: 2px; }

/* ---------- Tema düğmesi (tema.js; üst çubukta, giriş sayfalarında sağ üst köşede) ---------- */
/* Betik çalışmadıysa düğme gizli kalır (tema.js <html>'e .tema-betikli koyar): işe yaramayan düğme görünmesin, tema yine
   cihaza uyar. Simge o anki temayı gösterir (--tema-gunes / --tema-ay: koyu bloklar çevirir). */
.dugme.tema-dugmesi { display: none; }
.tema-betikli .dugme.tema-dugmesi { display: inline-flex; width: 42px; padding: 0; }
.tema-dugmesi .simge { width: 20px; height: 20px; }
.tema-dugmesi .tema-gunes { display: var(--tema-gunes); }
.tema-dugmesi .tema-ay { display: var(--tema-ay); }
.tema-kosesi { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; align-items: center; gap: 8px; }
.tema-kosesi .dugme.hayalet { border-color: var(--kenar); background: var(--kart); box-shadow: var(--golge); }
.tema-kosesi .dugme.hayalet:hover { background: var(--zemin); }

/* ---------- Dil düğmesi (TR / EN; Pages/Shared/_DilDugmesi.cshtml; tema düğmesinin yanında) ---------- */
/* İki bağlantı tek hapta, tema düğmesiyle aynı yükseklikte (42 px); etkin dil deniz zeminli (aria-current="true"). Betiksiz
   çalışır (bağlantı /dil/{tr|en}). Renkler yalnız değişkenlerden (iki tema). Giriş sayfalarının köşesinde kart zemini ve gölge
   (tema düğmesi gibi). */
.dil-dugmesi { display: inline-flex; flex: none; align-items: center; gap: 2px; height: 42px; padding: 3px; border: 1px solid var(--kenar-koyu); border-radius: 999px; }
.dil-dugmesi a { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 8px; border-radius: 999px; color: var(--soluk); font-size: 13px; font-weight: 800; letter-spacing: .04em; line-height: 1; text-decoration: none; transition: background .15s, color .15s; }
.dil-dugmesi a:hover { background: var(--zemin); color: var(--metin); }
.dil-dugmesi a[aria-current="true"] { background: var(--deniz-acik); color: var(--deniz-koyu); }
.tema-kosesi .dil-dugmesi { border-color: var(--kenar); background: var(--kart); box-shadow: var(--golge); }

/* ---------- Sayfa iskeleti ---------- */
/* Tek sütun en geniş çocuğuna göre büyümez (geniş bir öğe sayfayı yana taşırmaz, kendi içinde kayar). */
.icerik { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px; max-width: 1120px; margin: 0 auto; padding: 32px 24px 64px; }
.sayfa-basi { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; }
.sayfa-basi h1 { font-size: 26px; }
.sayfa-basi > div > .soluk { max-width: 640px; margin-top: 6px; }
.sayfa-basi-ad { min-width: 0; max-width: 100%; }
.sayfa-eylem { display: flex; flex-wrap: wrap; gap: 10px; }
.tasma { overflow-wrap: anywhere; }
.baslik-alt { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 10px; }
/* Öğrencinin kimlik kartı (panel Öğrenci; Yön B): pembe halkalı baş harfler (Pamuk Kedi), ad ve durum, kart zemininde. */
.ogrenci-basi { flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 18px; padding: 20px 24px; border-radius: var(--yaricap); background: var(--kart); box-shadow: var(--golge); }
.ogrenci-basi .profil-resmi.iri { width: 76px; height: 76px; font-size: 28px; background: var(--pembe-acik); color: var(--pembe-yazi); box-shadow: 0 0 0 4px var(--kart), 0 0 0 6px var(--pembe); }
.ogrenci-basi h1 { font-size: 30px; }
.ogrenci-basi .baslik-alt { margin-top: 6px; }
.geri { display: inline-flex; align-items: center; gap: 6px; justify-self: start; margin-bottom: -6px; padding: 4px 12px 4px 8px; border-radius: 999px; color: var(--soluk); font-weight: 700; text-decoration: none; }
.geri:hover { background: var(--kart); color: var(--metin); }
/* Kart kenarsız: zeminden yumuşak gölgeyle ayrılır (kenar rengi saydam; tehlike kartı kendi kenarını taşır). */
.kart { min-width: 0; padding: 24px 26px; border: 1px solid transparent; border-radius: var(--yaricap); background: var(--kart); box-shadow: var(--golge); }
.kart h2 .simge { color: var(--deniz-orta); }
/* Kart başlığı: solda başlık (simge, ad, sayaç), sağda kısa açıklama, bağlantı ya da küçük düğme (özet sayfalarında doğdu,
   bütün sayfalarda aynı). */
.kart-basi { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; min-height: 34px; margin-bottom: 18px; }
.kart-basi h2 { margin: 0; }
.kart-basi > .soluk { font-size: 14px; font-weight: 600; }
.kart-bag { color: var(--deniz-orta); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; }
.kart-bag:hover { text-decoration: underline; }
.izgara { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; gap: 20px; }
.dar-sutun { display: grid; gap: 20px; max-width: 620px; }

/* ---------- Düğmeler ---------- */
.dugme { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 9px 18px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 15px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .15s, border-color .15s, color .15s, box-shadow .15s; }
.dugme:active { transform: translateY(1px); }
/* Hiyerarşi: ana (dolu deniz) > ikincil (açık deniz) > hayalet (kenarlı) ; tehlikeli (kenarlı kırmızı) ve dolu tehlikeli
   (geri alınamaz işlem). Dolu düğmeler üstüne gelince hafifçe kalkar (gölge). */
.dugme.ana { background: var(--deniz-orta); color: var(--dolu-yazi); }
.dugme.ana:hover { background: var(--deniz-koyu); box-shadow: var(--golge); }
.dugme.ikincil { background: var(--deniz-acik); color: var(--deniz-koyu); }
.dugme.ikincil:hover { background: var(--deniz-uzerinde); }
.dugme.hayalet { border-color: var(--kenar-koyu); background: var(--kart); color: var(--soluk); }
.dugme.hayalet:hover { background: var(--zemin); color: var(--metin); }
.dugme.tehlikeli { border-color: var(--kirmizi-kenar); background: transparent; color: var(--kirmizi); }
.dugme.tehlikeli:hover { background: var(--kirmizi-acik); color: var(--kirmizi-koyu); }
.dugme.tehlikeli.dolu { border-color: transparent; background: var(--kirmizi); color: var(--dolu-yazi); }
.dugme.tehlikeli.dolu:hover { background: var(--kirmizi-koyu); color: var(--dolu-yazi); box-shadow: var(--golge); }
.dugme.kucuk { min-height: 34px; padding: 6px 12px; font-size: 14px; }
.dugme.simgeli { width: 34px; min-height: 34px; padding: 0; border-color: transparent; vertical-align: middle; }
.dugme.genis { width: 100%; }
.dugme.kopyalandi, .dugme.kopyalandi:hover { border-color: transparent; background: var(--yesil-acik); color: var(--yesil-yazi); }
.dugme.kopyalanamadi, .dugme.kopyalanamadi:hover { border-color: transparent; background: var(--kum-acik); color: var(--kum-yazi); }
/* Gönderilirken ya da kullanılamazken kapalı düğme soluk görünür, üstüne gelince değişmez. */
.dugme:disabled { opacity: .55; pointer-events: none; }

/* ---------- Form alanları ---------- */
.form { display: grid; gap: 16px; }
/* Formun düğmesi kendi genişliğinde, solda (giriş sayfalarındaki gibi tam genişlik isteyen .genis taşır). */
.form > .dugme:not(.genis) { justify-self: start; }
.alan { display: grid; gap: 6px; font-size: 14px; font-weight: 700; }
.alan em { font-style: normal; font-weight: 600; }
/* Kutunun altındaki ileti (yonetim.js: büyük dosya seçildi). */
.alan-hata { color: var(--kirmizi-yazi); font-size: 13px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 44px; padding: 10px 14px; border: 1.5px solid var(--kutu-kenar); border-radius: var(--yaricap-kucuk); background: var(--kutu-zemin); color: var(--metin); font: inherit; font-weight: 500; }
input, textarea { transition: border-color .15s, box-shadow .15s; }
input::placeholder, textarea::placeholder { color: var(--yer-tutucu); font-weight: 500; }
input:hover, textarea:hover { border-color: var(--kutu-kenar-uzerinde); }
input:focus, input:focus-visible, select:focus, select:focus-visible, textarea:focus, textarea:focus-visible { outline: none; border-color: var(--deniz-orta); box-shadow: var(--odak); }
textarea { min-height: 140px; resize: vertical; }

/* ---------- İletiler ve etiketler ---------- */
.uyari { display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-radius: var(--yaricap-kucuk); font-weight: 700; }
.uyari .simge { margin-top: 2px; }
.uyari.basari { background: var(--yesil-acik); color: var(--yesil-yazi); }
.uyari.hata { background: var(--kirmizi-acik); color: var(--kirmizi-yazi); }
.rozet { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.rozet::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
/* Normal durum (açık, onaylı) hapsız: yalnız yeşil nokta ve yazı; istisnalar (kapalı, bekliyor, hesap yok) renkli hapta öne
   çıkar. */
.rozet.acik { padding-left: 0; background: none; color: var(--yesil-yazi); }
.rozet.kapali { background: var(--kirmizi-acik); color: var(--kirmizi-yazi); }
.rozet.bitti { background: var(--kum-acik); color: var(--kum-yazi); }
.sayac { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 8px; border-radius: 999px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }

/* Bir kez gösterilen değer (davet kodu, geçici şifre) */
.tek-sefer { padding: 22px 24px; border: 2px solid var(--deniz); border-radius: var(--yaricap); background: linear-gradient(135deg, var(--tek-sefer-zemin) 0%, var(--kart) 65%); box-shadow: var(--golge); animation: belir .25s ease-out; }
.tek-sefer-ust { display: flex; align-items: center; gap: 10px; color: var(--deniz-koyu); font-weight: 800; }
.tek-sefer-deger { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; margin-top: 12px; }
.buyuk { color: var(--metin); font: 800 34px/1.15 var(--yazi-esit); letter-spacing: .1em; overflow-wrap: anywhere; user-select: all; }
.tek-sefer-not { margin-top: 12px; color: var(--soluk); font-size: 14px; }
@keyframes belir { from { opacity: 0; transform: translateY(-4px); } }

/* ---------- Arama ve tablolar ---------- */
.arama { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.arama-kutu { position: relative; display: block; flex: 1 1 260px; }
.arama-kutu .simge { position: absolute; top: 50%; left: 14px; color: var(--soluk); transform: translateY(-50%); pointer-events: none; }
.arama-kutu input { padding-left: 42px; }
/* .alan-dar (aşağıda, daha sonra) aynı özgüllükte flex-basis'i 160px yapar; ".arama" önekiyle bu kural kazanır. */
.arama .kurum-secimi { flex: 0 1 240px; }
.tablo-kap { overflow-x: auto; }
/* Tablo: büyük harfli soluk başlık satırı, ince çizgili satırlar, üstüne gelinen satır açık zeminli; sayılar sağda (.sayi),
   rakamlar eşit genişlikte (tarihler ve sayılar alt alta hizalı). Telefonda .kartlasan tablolar kart olur (aşağıda). */
.tablo { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; }
.tablo th { padding: 10px 12px; border-bottom: 1.5px solid var(--kenar); color: var(--soluk); font-size: 13px; font-weight: 800; text-align: left; white-space: nowrap; }
.tablo td { padding: 12px; border-bottom: 1px solid var(--kenar); vertical-align: middle; }
.tablo tbody tr:last-child td { border-bottom: 0; }
.tablo tbody tr:hover td { background: var(--satir-uzerinde); }
.tablo .sayi { font-variant-numeric: tabular-nums; text-align: right; }
.tablo .not { max-width: 260px; overflow: hidden; color: var(--soluk); text-overflow: ellipsis; white-space: nowrap; }
.tablo .eylem { width: 1%; text-align: right; white-space: nowrap; }
.satir-bag { color: var(--deniz-koyu); font-weight: 800; text-decoration: none; overflow-wrap: anywhere; }
.satir-bag:hover { text-decoration: underline; }
.kod { font-family: var(--yazi-esit); font-size: 14px; }
.kod-cip { display: inline-block; padding: 4px 10px; border: 1px dashed var(--kenar-koyu); border-radius: 8px; background: var(--zemin); font-family: var(--yazi-esit); font-weight: 700; letter-spacing: .08em; white-space: nowrap; vertical-align: middle; }
/* Boş durum (veri yokken): uygulamanın rehberi robot (tanıtım sayfasındaki gibi gölgeli), kalın kısa cümle, soluk açıklama
   ve varsa ilgili eylem düğmesi. Kart içindeki ikincil listelerde küçüğü: solda küçük robot, yanında yazı. */
.bos { display: grid; justify-items: center; gap: 6px; padding: 32px 16px 20px; text-align: center; }
.bos img { margin-bottom: 10px; filter: drop-shadow(0 10px 12px var(--robot-golge)); }
.bos .soluk { max-width: 52ch; }
.bos-dugmesi { margin-top: 10px; }
.bos.kucuk { grid-template-columns: auto minmax(0, 1fr); justify-items: start; align-items: center; gap: 2px 16px; padding: 4px 0; text-align: left; }
.bos.kucuk img { grid-row: 1 / span 3; align-self: center; width: 44px; height: auto; margin: 0; filter: drop-shadow(0 6px 8px var(--robot-golge)); }
.bos.kucuk .bos-dugmesi { margin-top: 8px; }
.tablo-kap + .bos.kucuk { margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--kenar); }
/* İlerleme sayfasında kayıt yokken (panel-ilerleme.js .bos koyar) yazının üstünde robot. */
.ilerleme-durum.bos { padding-top: 24px; color: var(--soluk); font-weight: 700; }
.ilerleme-durum.bos::before { content: ""; width: 72px; height: 94px; margin-bottom: 10px; background: url("/robot.svg") center / contain no-repeat; filter: drop-shadow(0 10px 12px var(--robot-golge)); }
.bos-satir { padding: 4px 0; color: var(--soluk); }

/* ---------- Aile sayfası ---------- */
/* Bilgi listesi (dl): solda ad, sağda değer. Yalnız dl'ye bağlıdır: .uyari.bilgi (bilgi kutusu) aynı sınıf adını taşır ve
   bu ızgarayı almamalı (almıştı: yazı tek satırda kalıp telefonda kutudan taşıyordu). */
dl.bilgi { display: grid; grid-template-columns: max-content 1fr; margin: 0; }
dl.bilgi dt, dl.bilgi dd { padding: 10px 0; border-bottom: 1px solid var(--kenar); }
dl.bilgi dt { padding-right: 20px; color: var(--soluk); font-weight: 700; }
dl.bilgi dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
dl.bilgi dt:last-of-type, dl.bilgi dd:last-of-type { border-bottom: 0; }
.ayar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding: 14px 0; border-bottom: 1px solid var(--kenar); }
h2 + .ayar { padding-top: 0; }
.ayar:last-child { padding-bottom: 0; border-bottom: 0; }
.ayar-yazi { display: grid; flex: 1 1 200px; gap: 2px; }
.ayar-yazi .soluk { font-size: 14px; font-weight: 600; }
.ayar-yazi .okul-engeli { color: var(--kirmizi-yazi); font-size: 14px; font-weight: 700; }
.ayar-yazi .okul-engeli a { color: inherit; }
.ayar-denetim { display: flex; flex: 1 1 240px; justify-content: flex-end; gap: 8px; }
.ayar-denetim input { flex: 1; min-width: 0; }
.ayar-genis .ayar-denetim { flex-basis: 100%; }
.tehlike { border: 1.5px solid var(--kirmizi-kenar); background: linear-gradient(180deg, var(--tehlike-zemin) 0%, var(--kart) 70%); }
.tehlike h2, .tehlike h2 .simge { color: var(--kirmizi-yazi); }
/* Katlanır tehlike kartı (panel Öğrenci "Öğrenciyi sil"): kapalıyken kesik çizgili sakin bir satır, sağda +; açınca uyarı
   ve form tehlike zemininde. */
details.tehlike.katlanir { padding: 0; border: 1.5px dashed var(--kirmizi-kenar); background: none; box-shadow: none; }
details.tehlike.katlanir[open] { background: linear-gradient(180deg, var(--tehlike-zemin) 0%, var(--kart) 70%); }
details.tehlike.katlanir > summary { display: flex; align-items: center; gap: 12px; padding: 16px 22px; cursor: pointer; list-style: none; }
details.tehlike.katlanir > summary::-webkit-details-marker { display: none; }
details.tehlike.katlanir > summary h2 { margin: 0; font-size: 16px; }
details.tehlike.katlanir > summary::after { content: "+"; margin-left: auto; color: var(--kirmizi-yazi); font-size: 22px; font-weight: 800; line-height: 1; }
details.tehlike.katlanir[open] > summary::after { content: "–"; }
details.tehlike.katlanir > :not(summary) { margin-right: 22px; margin-left: 22px; }
details.tehlike.katlanir > :last-child { margin-bottom: 20px; }
.sil-formu { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.sil-formu input { flex: 1 1 260px; width: auto; }

/* ---------- Davet ve hesap açma ---------- */
/* Listenin üstündeki ekleme formu (Öğrenciler, Kullanıcılar, Okullar) katlanır kart: başlığa basınca açılır; sağda ok. */
details.kart.ekleme > summary { display: flex; align-items: center; gap: 12px; margin: -4px 0; cursor: pointer; list-style: none; }
details.kart.ekleme > summary::-webkit-details-marker { display: none; }
details.kart.ekleme > summary h2 { margin: 0; }
details.kart.ekleme > summary::after { content: ""; flex: none; width: 10px; height: 10px; margin: 0 6px 4px auto; border: solid var(--deniz-orta); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); transition: transform .15s; }
details.kart.ekleme[open] > summary { margin-bottom: 18px; }
details.kart.ekleme[open] > summary::after { margin-bottom: -4px; transform: rotate(-135deg); }
.uret-formu { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px; }
.alan-genis { flex: 1 1 280px; }
.alan-dar { flex: 0 1 160px; }
.adimlar { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: adim; }
/* Numara solda, yazı akarak yanında: maddenin içindeki kalın sözcük (<strong>) ayrı sütuna düşmesin diye madde esnek kutu değil. */
.adimlar li { position: relative; min-height: 26px; padding: 1px 0 0 38px; counter-increment: adim; }
.adimlar li::before { content: counter(adim); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 14px; font-weight: 900; }
.adimlar + .uyari { margin-bottom: 16px; }
.roller { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; min-height: 44px; }
.secim { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; cursor: pointer; }
.secim input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--deniz-orta); }
.rozet.rol { background: var(--deniz-acik); color: var(--deniz-koyu); }
.rozet.rol::before { content: none; }
/* Görsel perspektif 2. dalga §8.3: ölçme serisinin rozeti (Seriler ve Seri); hazır seriler kartının düğmeleri solda. */
.rozet.olcme { margin-left: 6px; background: var(--kum-acik); color: var(--kum-yazi); }
.rozet.olcme::before { content: none; }
.hazir-seriler .satir-dugmeleri { justify-content: flex-start; margin-top: 12px; }
.uyari.bosluklu { margin-bottom: 16px; }
.atama-listesi { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.atama-listesi li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.rozet.yok { background: var(--zemin); color: var(--soluk); }
.kucuk-yazi { font-size: 13px; }
.etiket-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 2px 0; }
.onay-bilgisi { color: var(--soluk); font-size: 14px; }
/* Satırın birkaç işlemi alt alta (veli adına onay formu açılabilir): hücrenin kendisi tablo hücresi kalır (ızgara olunca
   satır çizgisi kayıyordu). Tek satıra sığan düğmeler için .eylem + .satir-dugmeleri. */
.tablo .islemler { min-width: 220px; }
.islemler > * + * { margin-top: 8px; }
.islemler > span { display: block; }
.adina-onay summary { color: var(--deniz-orta); font-weight: 800; cursor: pointer; list-style: none; }
.adina-onay summary::-webkit-details-marker { display: none; }
.adina-onay[open] summary { margin-bottom: 8px; }
.adina-onay form { display: flex; flex-wrap: wrap; gap: 8px; }
.adina-onay input { flex: 1 1 220px; width: auto; }
.gun-kutusu { flex: 0 0 90px; }
.kod-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 4px 0 8px; }
.ayar-alt { margin-top: 16px; }
/* Tablonun altındaki ekleme formu (Yetkili aç, Öğretmen ata) çizgiyle ayrılır. */
.ata-formu { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--kenar); }
.kart-notu { margin-top: 14px; }

/* ---------- Giriş ---------- */
body.yalin { background: radial-gradient(1100px 600px at 0% -10%, var(--yalin-deniz) 0%, transparent 60%), radial-gradient(900px 500px at 100% 110%, var(--yalin-kum) 0%, transparent 55%), var(--zemin); }
.giris-alani { display: grid; place-items: center; min-height: 100vh; min-height: 100dvh; padding: 32px 16px; }
.giris { display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 1000px; overflow: hidden; border: 0; border-radius: 34px; background: var(--kart); box-shadow: var(--golge-buyuk); }
/* Solda kumsal (Shared/_GirisMarkasi; Yön B): yukarıdan aşağı gökyüzü ve deniz (tanıtım sayfasının marka geçişi), denizin
   dalgası, altta kum; kumda Tıkır Robot ve Pamuk Kedi, gökte Yıldız Astronot süzülür, köpükler (koyuda yıldızlar). Marka
   tanıtım sayfasına bağlanır; sağda form. Deniz forma dalgalı bir kıyıyla (dolgusu kartın rengi) iner; telefonda panel
   üstte kısa bir şerittir (yalnız küçük robot ve kedi), dalga altta. Formun başında "Ana sayfa" (ya da kod adımında
   "Girişe dön") bağlantısı. */
.giris-marka { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 14px; min-height: 600px; padding: 34px 64px 0 36px; overflow: hidden; background: linear-gradient(180deg, var(--marka-1) 0%, var(--marka-2) 62%, var(--marka-3) 100%); color: var(--deniz-koyu); }
.giris-marka::before { content: ""; position: absolute; right: -10%; bottom: 66px; left: -10%; height: 90px; border-radius: 50% 50% 0 0 / 40% 40% 0 0; background: var(--deniz); opacity: .55; }
.giris-marka > :not(.kabarcik):not(.giris-dalga) { position: relative; z-index: 1; }
/* Denizin açık tonlarında --odak-cizgi silik kalır (tanıtım sayfasındaki gibi deniz rengi). */
.giris-marka :focus-visible { outline-color: var(--deniz-koyu); }
.giris-marka-ust { display: inline-flex; align-self: flex-start; align-items: center; gap: 10px; border-radius: 14px; color: var(--deniz-koyu); font-size: 18px; font-weight: 900; text-decoration: none; }
.giris-marka-ust:hover span { text-decoration: underline; text-underline-offset: 4px; }
.giris-marka-ust img { border-radius: 10px; box-shadow: 0 0 0 3px var(--marka-halka); }
/* Maskotlar süs: resimlerin alt yazısı boş (ekran okuyucu atlar). Konumları .giris önekiyle: yukarıdaki "> :not(...)"
   kuralını (göreli konum) ezer. */
.giris-robot, .giris-maskot { height: auto; filter: drop-shadow(0 12px 14px var(--robot-golge)); }
.giris .giris-marka > .giris-robot { position: absolute; z-index: 2; bottom: 52px; left: 50%; width: 150px; transform: translateX(-62%); }
.giris .giris-marka > .giris-kedi { position: absolute; z-index: 2; bottom: 40px; left: 7%; width: 112px; }
.giris .giris-marka > .giris-astronot { position: absolute; z-index: 2; top: 210px; right: 15%; width: 92px; transform: rotate(-10deg); }
.giris .giris-marka > .giris-kum { position: absolute; z-index: 1; right: -12%; bottom: -1px; left: -12%; height: 104px; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: var(--kum-acik); }
.giris-slogan { max-width: 330px; margin-top: 18px; font-size: 28px; font-weight: 900; line-height: 1.2; letter-spacing: -.01em; text-wrap: balance; }
/* Girişte gökteki küçük köpükler (koyuda yıldızlar): logo halkasının rengi (tanıtımın büyük kabarcıkları --kabarcik ile sakin kalır). */
.kabarcik { position: absolute; border-radius: 50%; background: var(--marka-halka); }
.kabarcik-1 { top: 170px; right: 42%; width: 7px; height: 7px; }
.kabarcik-2 { top: 120px; right: 9%; width: 10px; height: 10px; }
.kabarcik-3 { top: 300px; right: 46%; width: 6px; height: 6px; }
.giris-dalga { position: absolute; z-index: 1; fill: var(--kart); pointer-events: none; }
.giris-dalga-yan { top: 0; right: -1px; width: 40px; height: 100%; }
.giris-dalga-alt { display: none; bottom: -1px; left: 0; width: 100%; height: 24px; }
.giris-form { display: flex; flex-direction: column; justify-content: center; padding: 44px 52px 48px 40px; }
.giris-form > .giris-geri { align-self: flex-start; margin: 0 0 22px -8px; }
.giris-form h1 { font-size: 34px; }
.giris-form > .soluk { margin: 8px 0 24px; }
.giris-form .uyari { margin-bottom: 18px; }
.giris-not { margin-top: 22px; color: var(--soluk); font-size: 13px; text-align: center; }
.giris-cikis { margin-top: 12px; }

/* Şifre kutusu: sağında göster / gizle düğmesi (sifre-goz.js). */
.sifre-kutusu { position: relative; display: block; }
.sifre-kutusu input { padding-right: 52px; }
.sifre-goz { position: absolute; top: 50%; right: 6px; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 36px; border: 0; border-radius: 10px; background: transparent; color: var(--soluk); cursor: pointer; transform: translateY(-50%); }
.sifre-goz:hover { background: var(--zemin); color: var(--metin); }
.sifre-goz:focus-visible { outline: 2px solid var(--deniz-orta); outline-offset: 2px; }
.sifre-goz .simge { width: 20px; height: 20px; }

/* ---------- İlerleme (uygulamanın ekranlar/ilerleme.js bölümleri; renkler uygulamadakiyle aynı) ---------- */
.ilerleme-secim { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.secim-grubu { display: flex; flex-wrap: wrap; gap: 6px; }
.secim-grubu .dugme[aria-pressed="true"] { border-color: transparent; background: var(--deniz-acik); color: var(--deniz-koyu); }
.ilerleme-durum:empty { display: none; }
.ilerleme-icerik { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.ilerleme-bolum { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 18px 20px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); }
.ilerleme-bolum h3 { margin: 0; font-size: 17px; font-weight: 800; }
.bolum-ozet, .bolum-duygular, .bolum-sonraki, .bolum-haftalar, .bolum-tam { grid-column: 1 / -1; }
.bolum-aciklama, .bolum-notu, .cubuk-aciklama { margin: 0; color: var(--soluk); font-size: 14px; font-weight: 600; }
.ozet-kutulari { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ozet-kutu { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.ozet-sayi { color: var(--deniz-koyu); font-size: 30px; font-weight: 900; line-height: 1.1; }
.ozet-ad { color: var(--soluk); font-size: 14px; font-weight: 700; }
.cubuk-ornek { display: inline-block; width: 24px; height: 10px; margin-right: 6px; border-radius: 999px; vertical-align: middle; }
.cubuk-ornek.ipucusuz { margin-left: 12px; }
.duygu-satirlari { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 12px 32px; }
.duygu-satiri { display: grid; grid-template-columns: 88px 1fr; align-items: center; gap: 12px; }
.duygu-adi, .zor-adi, .sonraki-adi { font-weight: 800; }
.cubuk-cifti { display: grid; gap: 4px; }
.cubuk-satiri { display: grid; grid-template-columns: 1fr 48px 64px; align-items: center; gap: 8px; }
.cubuk { height: 12px; overflow: hidden; border-radius: 999px; background: var(--cubuk-zemin); }
.cubuk-dolgu { height: 100%; border-radius: 999px; }
.ipuclu .cubuk-dolgu, .cubuk-ornek.ipuclu { background: var(--deniz); }
.ipucusuz .cubuk-dolgu, .cubuk-ornek.ipucusuz { background: var(--cubuk-koyu); }
.toplam .cubuk-dolgu { background: var(--cubuk-orta); }
.sonraki-satirlar { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 32px; }
.sonraki-satiri { display: grid; grid-template-columns: 120px 1fr; align-items: center; gap: 12px; }
/* Görmek ve Bilmek (ekranlar/ilerleme.js): cevap satırları soldan sağa iki sütundadır ve cevap adları uzundur ("Oyuncak Ayı");
   "Türe göre" iki satır, ikinci soru tek çubuktur. */
.cevap-satirlari { grid-template-rows: none; grid-auto-flow: row; }
.cevap-satirlari .duygu-satiri { grid-template-columns: 124px 1fr; }
.ture-satirlari { display: grid; gap: 12px; }
.sonraki-satirlar.tek-satir { grid-template-columns: minmax(0, 560px); }
.cubuk-oran, .zor-oran { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.cubuk-sayi, .zor-sayi, .hafta-sayi { color: var(--soluk); font-size: 13px; font-weight: 600; white-space: nowrap; }
.karisan-listesi, .ikinci-karisan-listesi { display: grid; gap: 6px; margin: 0; padding-left: 22px; }
/* Cevap oyunlarında ikinci sorunun karıştırılanları: çubuğun altında küçük başlıklı kısa liste (en çok dört satır). */
.ikinci-karisan { display: grid; gap: 6px; }
.ikinci-karisan-baslik { margin: 0; font-size: 15px; font-weight: 800; }
.zor-listesi { display: grid; gap: 6px; }
.zor-satiri { display: grid; grid-template-columns: 1fr 80px 48px 64px; align-items: baseline; gap: 8px; }
.zor-duygu { color: var(--soluk); }
.zor-cevapli .zor-satiri { grid-template-columns: 1fr 120px 48px 64px; }
.hafta-grafigi { display: flex; align-items: flex-start; gap: 12px; overflow-x: auto; }
.hafta-sutunu { display: grid; flex: 0 1 110px; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.hafta-oran { font-weight: 800; }
.hafta-cubuk { display: flex; align-items: flex-end; width: 44px; height: 110px; overflow: hidden; border-radius: 8px; background: var(--cubuk-zemin); }
.hafta-dolgu { width: 100%; border-radius: 8px 8px 0 0; background: var(--cubuk-orta); }
.hafta-adi { font-size: 13px; }
.hafta-adi span { white-space: nowrap; }
/* Görsel perspektif 2. dalga, "Günlük yaşam anları" (D5; uygulamanın ortak/gunluk-anlar.js, "Tümü"nün sonunda, velinin kaydı varsa):
   iki küme yan yana (son sekiz hafta: hafta adı, "2 / 3", hedefi tutan hafta yeşil ve ✓; sonuçlar: toplam ve +/İ/– sayıları), altında son
   beş an (tarih, durum, soru, kod). 700 px'in altında kümeler alt alta, anın sorusu durumun altına iner. Renkler değişkenlerden. */
.bolum-gunluk-anlar { grid-column: 1 / -1; }
.gunluk-anlar-govde { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; }
.gunluk-kume { display: grid; align-content: start; gap: 6px; min-width: 0; }
.gunluk-kume-genis { grid-column: 1 / -1; }
.gunluk-kume h4 { margin: 0; font-size: 15px; font-weight: 800; }
.gunluk-haftalar, .gunluk-dagilim, .gunluk-son-anlar { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.gunluk-hafta { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px; align-items: center; gap: 8px; padding: 5px 12px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.gunluk-hafta.tuttu { background: var(--yesil-acik); color: var(--yesil-yazi); }
.gunluk-hafta-sayi, .gunluk-kod-sayi { font-weight: 800; font-variant-numeric: tabular-nums; }
.gunluk-hafta-isaret { font-weight: 900; text-align: center; }
.gunluk-toplam { margin: 0; font-weight: 800; }
.gunluk-dagilim li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.gunluk-an-satiri { display: grid; grid-template-columns: 96px minmax(0, 1fr) minmax(0, .8fr) auto; align-items: center; gap: 4px 12px; padding: 6px 12px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.gunluk-an-tarih { color: var(--soluk); font-size: 13px; font-weight: 700; white-space: nowrap; }
.gunluk-an-durum { font-weight: 800; overflow-wrap: anywhere; }
.gunluk-an-soru { color: var(--soluk); font-size: 14px; font-weight: 600; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .gunluk-anlar-govde { grid-template-columns: minmax(0, 1fr); }
  .gunluk-an-satiri { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gunluk-an-satiri .kod { grid-column: 3; grid-row: 1; }
  .gunluk-an-soru { grid-column: 2; grid-row: 2; }
}
/* Seri ilerlemesi (eğitim serisi tasarımı §10.3; uygulamanın ekranlar/ilerleme.js seriBolumu, panel-ilerleme.js data-seri): "Tümü"nün
   başında öğretmenin her serisi için bir bölüm: başlık, tur rozeti, "4 / 10 adım" ve çubuk; adımlar serinin sırasıyla birer satır (bitti
   işareti, sıra, video adları ve altında oyunu ya da karışık bloğun adayları, ilk denemede doğru, soru sayısı, son oynama). Renkler
   değişkenlerden (iki tema). 700 px'in altında sütun başlıkları kalkar, sayılar adın altındaki satıra iner. */
.bolum-seri { grid-column: 1 / -1; }
.bolum-seri h3 { overflow-wrap: anywhere; }
.seri-ozeti { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; }
.seri-tur { padding: 2px 10px; border-radius: 999px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 14px; font-weight: 800; }
.seri-sayim { font-weight: 800; font-variant-numeric: tabular-nums; }
.seri-cubugu { flex: 1 1 160px; min-width: 120px; }
.seri-cubugu .cubuk-dolgu { background: var(--cubuk-koyu); }
.seri-adimlari { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.seri-adim-basliklari, .seri-adimi { display: grid; grid-template-columns: 24px 24px minmax(0, 1fr) 48px 72px 104px; align-items: center; gap: 8px; padding: 0 12px; }
.seri-adimi { padding: 8px 12px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.seri-adim-basliklari { color: var(--soluk); font-size: 13px; font-weight: 800; }
.seri-baslik-adim { grid-column: 1 / 4; }
.seri-baslik-ilk { grid-column: 4 / 6; }
.seri-isaret { display: grid; place-items: center; width: 22px; height: 22px; border: 2px solid var(--kenar-koyu); border-radius: 50%; color: var(--deniz-koyu); font-size: 13px; font-weight: 900; line-height: 1; }
.seri-adimi.bitti .seri-isaret { border-color: var(--deniz-orta); background: var(--deniz-acik); }
.seri-adim-no { color: var(--soluk); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
.seri-adim-videolari { display: grid; gap: 2px; min-width: 0; }
.seri-adim-adi { font-weight: 800; overflow-wrap: anywhere; }
.seri-adim-alti { color: var(--soluk); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.seri-adim-oran { font-variant-numeric: tabular-nums; font-weight: 800; text-align: right; }
.seri-adim-sayi, .seri-adim-son { color: var(--soluk); font-size: 13px; font-weight: 600; white-space: nowrap; }
@media (max-width: 700px) {
  .seri-adim-basliklari { display: none; }
  .seri-adimi { grid-template-columns: 24px 24px auto auto minmax(0, 1fr); gap: 4px 8px; }
  .seri-adim-videolari { grid-column: 3 / -1; }
  .seri-adim-oran { grid-column: 3; }
  .seri-adim-son { justify-self: end; }
}
/* Görsel perspektif 1. dalga (tasarım 2026-10-08-gorsel-perspektif-1-dalga-design.md §7; uygulamanın ekranlar/ilerleme.js kazanimBolumu,
   veriFormuBolumu): "Kazanım" iki satır (ad, durum, son beş oturumun çipleri) ve "Veri formu" (oturum başlığı, önceki/sonraki düğmeleri,
   hocanın +/İ/– tablosu, lejant). Renk ve simge birlikte: "+" yeşil, "İ" kum, "–" kenarlı nötr, "·" soluk; geçen oturum yeşil ve ✓'li,
   eksik kesik kenarlı. Soluk satır ölçüte girmez; neden sütununun hücresi satırdan bağımsız, kendi ölçütüyle soluklaşır
   (.veri-formu-neden). Renkler değişkenlerden (iki tema). */
.bolum-kazanim, .bolum-veri-formu { grid-column: 1 / -1; }
.kazanim-satiri { display: grid; grid-template-columns: minmax(0, 220px) auto minmax(0, 1fr); align-items: center; gap: 6px 16px; padding: 8px 12px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.kazanim-adi { font-weight: 800; }
.kazanim-durum { justify-self: start; padding: 2px 10px; border-radius: 999px; font-size: 14px; font-weight: 800; }
.kazanim-durum.durum-kazanildi, .kazanim-cipi.cip-gecti, .kod-arti, .bakis-kazanim { background: var(--yesil-acik); color: var(--yesil-yazi); }
.kazanim-durum.durum-suruyor, .kod-ipucu { background: var(--kum-acik); color: var(--kum-yazi); }
.kazanim-durum.durum-henuz-yok, .kazanim-durum.durum-veri-yok { padding: 0; color: var(--soluk); }
.kazanim-cipleri { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; margin: 0; padding: 0; list-style: none; }
.kazanim-cipi { display: inline-flex; gap: 4px; padding: 1px 8px; border: 1px solid var(--kenar-koyu); border-radius: 999px; background: var(--kart); color: var(--metin); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kazanim-cipi.cip-gecti { border-color: var(--yesil-acik); }
.kazanim-cipi.cip-eksik { border-style: dashed; background: none; color: var(--soluk); }
.kazanim-notu { grid-column: 1 / -1; margin: 0; color: var(--soluk); font-size: 13px; font-weight: 600; }
.veri-formu-ust { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.veri-formu-oturum { margin: 0; font-weight: 800; }
.veri-formu-gezinti { display: flex; gap: 6px; }
.veri-formu-dugme { min-height: 34px; padding: 0 12px; border: 1px solid var(--kenar-koyu); border-radius: 999px; background: var(--kart); color: var(--metin); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.veri-formu-dugme:hover:not(:disabled) { background: var(--satir-uzerinde); }
.veri-formu-dugme:disabled { opacity: .5; cursor: default; }
.veri-formu-kabi { overflow-x: auto; }
.veri-formu { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.veri-formu th { padding: 0 6px; color: var(--soluk); font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center; vertical-align: bottom; }
.veri-formu td { padding: 5px 6px; background: var(--zemin); text-align: center; }
.veri-formu td:first-child { border-radius: var(--yaricap-kucuk) 0 0 var(--yaricap-kucuk); }
.veri-formu td:last-child { border-radius: 0 var(--yaricap-kucuk) var(--yaricap-kucuk) 0; }
.veri-formu .veri-formu-video { text-align: left; }
.veri-formu td.veri-formu-video { font-weight: 700; overflow-wrap: anywhere; }
.veri-formu td.veri-formu-no { width: 40px; color: var(--soluk); font-weight: 800; }
.deneme-satiri.soluk td:not(.veri-formu-neden), .veri-formu td.veri-formu-neden.soluk { opacity: .6; }
/* 2. dalga: "Ek soru" sütunundaki üretim hücresi de neden gibi kendi ölçütüyle soluklaşır (uretimSayilir). */
.deneme-satiri.soluk td.veri-formu-uretim:not(.soluk) { opacity: 1; }
.veri-formu td.veri-formu-uretim.soluk { opacity: .6; }
.kod { display: inline-grid; grid-auto-flow: column; place-items: center; min-width: 28px; height: 28px; padding: 0 5px; border-radius: 8px; font-weight: 900; line-height: 1; }
.kod-eksi { border: 1px solid var(--kenar-koyu); color: var(--metin); }
/* 2. dalga "Ek soru" sütunu (ilerleme.js ekSoruHucresi): kodun yanında ek adımın kısa adı. */
.kod-adim { margin-left: 4px; color: var(--soluk); font-size: 12px; font-weight: 800; white-space: nowrap; }
.kod-yok { color: var(--soluk); }
.kod-duzey { font-size: 10px; }
.veri-formu-lejant { margin: 0; font-size: 14px; font-weight: 700; }
.bakis-kazanim { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
/* Görsel perspektif 2. dalga (tasarım 2026-10-08-gorsel-perspektif-2-dalga-design.md §8.4; uygulamanın ekranlar/ilerleme.js
   olcmeBolumleri): "Tümü"de "Ölçme sonuçları": ölçme serisinin her uygulaması için hocanın tablosu (☑/☐/·), özet, ön ve genelleme
   varsa karşılaştırma. Beşten sonraki deneme soluk. Renkler değişkenlerden (iki tema). */
.bolum-olcme { grid-column: 1 / -1; }
.olcme-karsilastirma { margin: 0; padding: 8px 12px; border-radius: var(--yaricap-kucuk); background: var(--kum-acik); color: var(--kum-yazi); font-weight: 800; }
.olcme-uygulamasi { display: grid; gap: 6px; }
.olcme-uygulamasi h4 { margin: 0; font-size: 16px; font-weight: 800; }
.olcme-kabi { overflow-x: auto; }
.olcme-tablosu { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-variant-numeric: tabular-nums; }
.olcme-tablosu th { padding: 0 6px; color: var(--soluk); font-size: 13px; font-weight: 800; line-height: 1.25; text-align: center; vertical-align: bottom; }
.olcme-tablosu td { padding: 5px 6px; background: var(--zemin); text-align: center; }
.olcme-tablosu td:first-child { width: 40px; border-radius: var(--yaricap-kucuk) 0 0 var(--yaricap-kucuk); color: var(--soluk); font-weight: 800; }
.olcme-tablosu td:last-child { border-radius: 0 var(--yaricap-kucuk) var(--yaricap-kucuk) 0; }
.olcme-tablosu .olcme-materyal, .olcme-tablosu th:nth-child(2) { text-align: left; }
.olcme-satiri.soluk td { opacity: .6; }
.olcme-hoca { display: block; font-weight: 800; }
.olcme-video { display: block; color: var(--soluk); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.olcme-isaret { font-size: 20px; font-weight: 900; line-height: 1; }
.olcme-isaret.arti { color: var(--yesil-yazi); }
.olcme-isaret.eksi, .olcme-isaret.yok { color: var(--soluk); }
.olcme-ozeti { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.olcme-notu { margin: 0; color: var(--soluk); font-size: 13px; font-weight: 600; }
.olcme-serisi { margin: 0; color: var(--soluk); font-size: 14px; font-weight: 700; overflow-wrap: anywhere; }
@media (max-width: 700px) {
  .kazanim-satiri { grid-template-columns: minmax(0, 1fr) auto; }
  .kazanim-cipleri { grid-column: 1 / -1; justify-content: flex-start; }
}

/* ---------- Onay penceresi (yonetim.js) ---------- */
.onay { width: min(420px, calc(100vw - 32px)); padding: 24px; border: 0; border-radius: var(--yaricap); background: var(--kart); color: var(--metin); box-shadow: var(--golge-buyuk); }
.onay::backdrop { background: var(--perde); }
.onay-soru { font-size: 17px; font-weight: 800; }
.onay-dugmeler { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 22px; }
.pano-kutusu { position: fixed; top: 0; left: 0; opacity: 0; pointer-events: none; }

/* ---------- Beceriler (yönetim; tasarım 2b §4) ---------- */
.ad-formu { display: flex; flex-wrap: wrap; gap: 8px; }
.ad-formu input { flex: 1 1 170px; width: auto; min-height: 38px; }
.satir-dugmeleri { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px; }
/* Satırın düğmeleri tablo hücresinde en çok iki sırada (tek tek alt alta yığılıp satırı uzatmasın); satırda başka geniş
   alan yoksa (okulun yetkilileri) geniş ekranda tek sırada (.tek-sira). Beceriler'de başlığın ad kutusu yer kazansın diye
   iki sıra. */
.tablo .eylem .satir-dugmeleri { min-width: 250px; }
@media (min-width: 1000px) {
  .satir-dugmeleri.tek-sira { flex-wrap: nowrap; }
}

/* ---------- Değerlendirmeler (panel; tasarım 2b §3) ---------- */
/* Öğrenci sayfalarının sekmeleri (Profil · İlerleme · Değerlendirmeler · Oyunlar · Seriler; Shared/_OgrenciSekmeleri): hap
   şerit, kart zemininde ve gölgeli; açık sekme dolu deniz. */
.sekmeler { display: flex; flex-wrap: wrap; justify-self: start; gap: 4px; padding: 5px; border: 0; border-radius: 999px; background: var(--kart); box-shadow: var(--golge); }
.sekmeler a { padding: 8px 18px; border-radius: 999px; color: var(--soluk); font-weight: 800; text-decoration: none; }
.sekmeler a:hover { background: var(--zemin); color: var(--metin); }
.sekmeler a[aria-current="page"], .sekmeler a[aria-current="page"]:hover { background: var(--deniz-orta); color: var(--dolu-yazi); }
/* Telefonda sekmeler tek satırda, şerit genişliğinde (iki satıra bölünmez). Beş sekme sığmazsa şerit (sayfa değil) yana kayar:
   ince kaydırma çubuğu kaydırılabildiğini gösterir, açık sekme görünür alana getirilir (yonetim.js; her öğrenci sayfasında). */
@media (max-width: 520px) {
  .sekmeler { display: grid; grid-auto-columns: auto; grid-auto-flow: column; justify-self: stretch; overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity; overscroll-behavior-x: contain; border-radius: 20px; }
  .sekmeler a { padding: 8px 12px; font-size: 15px; text-align: center; white-space: nowrap; scroll-snap-align: center; }
}
.degisim { font-size: 18px; font-weight: 900; }
.degisim.yukari { color: var(--yesil-yazi); }
.degisim.asagi { color: var(--kirmizi-yazi); }
.degisim.ayni { color: var(--soluk); }
.degerlendirme-listesi { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.degerlendirme-kaydi { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); }
.kayit-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.kayit-puanlari { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 15px; }
.kayit-puanlari li { display: flex; flex-wrap: wrap; gap: 4px 10px; }
.kayit-notu { white-space: pre-line; overflow-wrap: anywhere; }
.kayit-islemleri { display: flex; flex-wrap: wrap; gap: 8px; }
.uyari.bilgi { background: var(--kum-acik); color: var(--kum-yazi); }
.puan-alanlari { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 14px 20px; }
.form-dugmeleri { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Oyun seçimi (panel; tasarım 2c §3) ---------- */
.oyun-agaci { display: grid; gap: 14px; }
.oyun-grubu { display: grid; gap: 10px; padding: 16px 18px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); }
.oyun-dugumu { display: grid; justify-items: start; gap: 2px; }
.oyun-dugumu.ana { font-size: 17px; }
.oyun-dugumu .dugum-adi { font-weight: 700; }
.oyun-dugumleri { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 10px 20px; margin: 0; padding: 0 0 0 28px; list-style: none; }
.secenler { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; color: var(--soluk); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.secen { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.secen .rozet { padding: 1px 8px 1px 6px; font-size: 12px; }

/* ---------- Dar ekran ---------- */
/* Üst çubuk tek satıra sığmayınca menü kendi satırına iner, sayfa yana taşmaz: yönetimin bağlantıları 1300 px'e (altı
   bağlantıyla 1540 px'e, aşağıda), panelinki 1180 px'e kadar kendi satırında. Panel 1181 px ve üstünde tek satırdır (altı
   öğeli menü hariç; aşağıda), telefonda alt sekme çubuğudur. */
@media (min-width: 821px) and (max-width: 1300px) {
  .ust-ic { flex-wrap: wrap; row-gap: 4px; }
  .menu:not([aria-label="Panel"]) { flex-basis: 100%; order: 3; margin: 0 -24px; padding: 0 24px 2px; overflow-x: auto; scrollbar-width: none; }
}
@media (min-width: 821px) and (max-width: 1180px) {
  .menu[aria-label="Panel"] { flex-basis: 100%; order: 3; margin: 0 -24px; padding: 0 24px 2px; overflow-x: auto; scrollbar-width: none; }
}

@media (max-width: 820px) {
  .ust-ic { flex-wrap: wrap; gap: 8px 12px; padding: 10px 16px; }
  .marka-etiket { display: none; }
  .menu { flex-basis: 100%; order: 3; margin: 0 -16px; padding: 2px 16px 4px; overflow-x: auto; scrollbar-width: none; }
  .menu a { padding: 8px 12px; }
  .icerik { gap: 16px; padding: 22px 16px 48px; }
  .kart { padding: 18px; }
  h1 { font-size: 26px; }
  .buyuk { font-size: 28px; }
  /* Okul paneli telefonda: üstte logo, okul adı ve küçük düğmeler tek satırda; menü ekranın altına sabit sekme çubuğu
     (simge ve yazı, hiçbir öğe gizlenmez, yana kaymaz). Üst çubuğun backdrop-filter'ı koşulsuz kalkar: sabit konumlu çocuğun
     kabı olur, çubuk ekrana değil üst çubuğa yapışırdı. Çubuğun kapladığı boy tek değişkende (--alt-cubuk; body.panel, sunucu
     yazar): sayfanın alt boşluğu, odağın kaydırma payı ve yapışkan seçim çubuğu (.blok-cubugu) ona göre. Çıkış yalnız simge
     (yazı ekran okuyucuya kalır). Yönetimin altı bağlantısı alt çubuğa sığmaz: yönetim kaydırmalı menüde kalır. */
  .ust { backdrop-filter: none; background: var(--kart); }
  body.panel { --alt-cubuk: 92px; padding-bottom: var(--alt-cubuk); }
  :root:has(> body.panel) { scroll-padding-bottom: 100px; }
  .panel-ust-ic { flex-wrap: nowrap; gap: 8px; padding: 8px 12px; }
  .panel-ust-ic .marka { flex: 1 1 auto; min-width: 0; }
  .panel-ust-ic .marka-etiket.kurum { display: block; min-width: 0; max-width: none; padding: 0; background: none; color: var(--metin); font-size: 14px; font-weight: 800; }
  .menu[aria-label="Panel"] { position: fixed; inset: auto 10px 10px 10px; z-index: 25; display: grid; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 4px; margin: 0; padding: 6px; border-radius: 22px; background: var(--kart); box-shadow: var(--golge-buyuk); overflow: visible; order: 0; flex-basis: auto; }
  .menu[aria-label="Panel"] a { flex-direction: column; justify-content: center; gap: 2px; padding: 7px 2px; border-radius: 16px; font-size: 11.5px; line-height: 1.15; text-align: center; white-space: normal; }
  .menu[aria-label="Panel"] a .simge { width: 22px; height: 22px; }
  /* Altı öğede (hem yetkili hem öğretmen) yazı küçülür; sütunlar içeriğe göre (en az en uzun sözcük: "Öğrencilerim" bölünmez,
     "Özet" az yer alır), sözcükler yalnız boşlukta alt satıra iner. Sığmazsa çubuk kendi içinde kayar, yazı komşusuna binmez. */
  body.menu-alti .menu[aria-label="Panel"] { grid-auto-columns: minmax(min-content, 1fr); gap: 2px; padding: 6px 4px; overflow-x: auto; scrollbar-width: none; }
  body.menu-alti .menu[aria-label="Panel"] a { padding: 7px 3px; font-size: 10.5px; letter-spacing: -.01em; }
  .panel-ust-ic .dil-dugmesi { height: 38px; }
  .panel-ust-ic .dil-dugmesi a { min-width: 30px; height: 30px; }
  .panel-ust-ic .dugme.tema-dugmesi, .panel-ust-ic .ust-kisi form .dugme { width: 38px; min-height: 38px; padding: 0; }
  .panel-ust-ic .ust-kisi form .dugme > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel-ust-ic .profil-baglantisi { min-height: 38px; padding: 2px; }
}

@media (max-width: 720px) {
  /* Tablolar kartlaşır: her satır bir kart; ilk hücre kartın başlığı, öbürleri solda sabit genişlikte soluk ad, yanında
     değer. Değer akan yazıdır (rozetler, birden çok öğretmen, uzun e-posta alt satıra iner; sağdan kesilmez). Ad, hücrenin
     sol boşluğuna yüzdürülür; hücre kendi kutusu olduğundan (flow-root) iki satıra inen ad da hücrenin boyuna girer. */
  .kartlasan thead { display: none; }
  .kartlasan, .kartlasan tbody, .kartlasan tr { display: block; width: 100%; }
  .kartlasan tr { padding: 12px 0; border-bottom: 1px solid var(--kenar); }
  .kartlasan tr:last-child { border-bottom: 0; }
  .tablo.kartlasan td { display: flow-root; width: auto; padding: 3px 0 3px 100px; border: 0; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .tablo.kartlasan td::before { content: attr(data-baslik); float: left; width: 88px; margin-left: -100px; color: var(--soluk); font-size: 13px; font-weight: 800; line-height: 23px; overflow-wrap: normal; }
  .tablo.kartlasan td:first-child { padding: 0 0 6px; font-size: 16px; }
  .tablo.kartlasan td:first-child::before, .tablo.kartlasan td:not([data-baslik])::before { content: none; }
  .tablo.kartlasan td:not([data-baslik]) { padding-left: 0; }
  /* İlk hücre sayıysa (Beceriler'de sıra) adıyla durur: başlık sonraki hücredir. */
  .tablo.kartlasan td.sayi:first-child { padding: 3px 0 3px 100px; font-size: 15px; }
  .tablo.kartlasan td.sayi:first-child::before { content: attr(data-baslik); }
  /* Hücrede form varsa (Beceriler'de başlığın adı) ad üstte, form tam genişlikte. */
  .tablo.kartlasan td[data-baslik]:has(> form) { padding-left: 0; }
  .tablo.kartlasan td[data-baslik]:has(> form)::before { float: none; display: block; width: auto; margin: 0 0 4px; }
  .tablo.kartlasan td.eylem { padding-top: 10px; }
  .tablo.kartlasan .satir-dugmeleri { justify-content: flex-start; }
  .kartlasan .not { max-width: none; white-space: normal; }
  .kartlasan tbody tr:hover td { background: none; }
  .ayar-denetim { flex-basis: 100%; }
  .ilerleme-icerik, .sonraki-satirlar { grid-template-columns: 1fr; }
  .duygu-satirlari { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; }
  .ozet-kutulari { grid-template-columns: 1fr 1fr; }
  .ogrenci-basi { gap: 14px; padding: 16px; }
  .ogrenci-basi .profil-resmi.iri { width: 60px; height: 60px; font-size: 22px; }
  .ogrenci-basi h1 { font-size: 26px; }
}

@media (max-width: 760px) {
  /* Telefonda deniz üstte kısa bir şerit: solda marka ve slogan, sağda küçük robot, yanında küçük kedi; dalga altta
     (deniz dalgası, kum, astronot ve köpükler gizli). */
  .giris { grid-template-columns: minmax(0, 1fr); max-width: 440px; }
  .giris-marka { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "ust robot" "slogan robot"; align-content: space-between; align-items: end; gap: 10px 14px; min-height: 0; padding: 20px 22px 36px; }
  .giris-marka::before, .giris .giris-marka > .giris-kum, .giris .giris-marka > .giris-astronot, .kabarcik { display: none; }
  .giris-marka-ust { grid-area: ust; align-self: start; }
  .giris .giris-marka > .giris-robot { position: relative; bottom: auto; left: auto; grid-area: robot; width: 72px; transform: none; }
  .giris .giris-marka > .giris-kedi { bottom: 22px; left: auto; right: 82px; width: 52px; }
  .giris-slogan { grid-area: slogan; max-width: none; margin: 0 56px 0 0; font-size: 19px; }
  .giris-dalga-yan { display: none; }
  .giris-dalga-alt { display: block; }
  .giris-form { padding: 22px 24px 30px; }
  .giris-form h1 { font-size: 28px; }
  /* Köşedeki dil ve tema düğmeleri (16 + 42 px) kısa telefonda kartın üstüne binmesin: kart onların altından başlar. */
  .giris-alani { padding-top: 74px; }
}

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

/* ---------- Profil (yönetim ve panel) ---------- */
/* Girişin kod adımı (/yonetim/giris/kod): kod eşit genişlikte, harfler ayrık okunsun. */
.kod-kutusu { font-family: var(--yazi-esit); font-size: 20px; letter-spacing: .12em; }

/* Üst çubuk: Çıkış'ın yanında küçük yuvarlak profil resmi (yoksa baş harfler) ve "Profilim" (tasarım "Profil ve 2FA" §1).
   Yönetimde .profil-bag, panelde .profil-baglantisi (kenarlıklı). */
.profil-bag { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 14px 4px 5px; border-radius: 999px; color: var(--soluk); font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.profil-bag:hover { background: var(--zemin); color: var(--metin); }
.profil-bag[aria-current="page"] { background: var(--deniz-acik); color: var(--deniz-koyu); font-weight: 800; }
.profil-baglantisi { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 4px 14px 4px 4px; border: 1px solid var(--kenar-koyu); border-radius: 999px; color: var(--soluk); font-size: 15px; font-weight: 800; text-decoration: none; white-space: nowrap; transition: background .15s, color .15s; }
.profil-baglantisi:hover { background: var(--zemin); color: var(--metin); }
.profil-baglantisi[aria-current="page"] { border-color: transparent; background: var(--deniz-acik); color: var(--deniz-koyu); }

/* Yuvarlak resim (yoksa baş harfler): ortak taban; boyut ve halka sınıfla verilir. Panel üst çubuğundaki küçük resim halkasızdır
   (bağlantının kendi kenarlığı var); yönetim üst çubuğundakinin ve profil sayfalarındakilerin halkası boyutuyla birlikte gelir. */
.profil-resmi { display: inline-grid; flex: none; place-items: center; overflow: hidden; border-radius: 50%; background: var(--deniz-acik); color: var(--deniz-koyu); font-weight: 900; letter-spacing: .02em; line-height: 1; object-fit: cover; }
.profil-bag .profil-resmi { width: 32px; height: 32px; font-size: 13px; box-shadow: 0 0 0 2px var(--kart), 0 0 0 3px var(--kenar); }
.profil-bag[aria-current="page"] .profil-resmi.harfler { background: var(--deniz-orta); color: var(--dolu-yazi); }
.profil-resmi.kucuk { width: 32px; height: 32px; font-size: 13px; }
.panel-ust-ic .profil-resmi.kucuk { background: var(--pembe-acik); color: var(--pembe-yazi); }
.profil-resmi.orta { width: 46px; height: 46px; font-size: 16px; }
.profil-resmi.buyuk { width: 72px; height: 72px; font-size: 26px; box-shadow: 0 0 0 3px var(--kart), 0 0 0 4px var(--kenar); }
.profil-resmi.iri { width: 96px; height: 96px; font-size: 34px; box-shadow: 0 0 0 2px var(--kart), 0 0 0 3px var(--kenar); }
/* Çocuğun baş harfleri maskot renklerinden birinde (data-renk 1-6, kimliğinden: ProfilGorunumu.RenkSirasi); 6 deniz. */
.profil-resmi[data-renk="1"] { background: var(--mercan-acik); color: var(--mercan-yazi); }
.profil-resmi[data-renk="2"] { background: var(--lila-acik); color: var(--lila-yazi); }
.profil-resmi[data-renk="3"] { background: var(--gunes-acik); color: var(--gunes-yazi); }
.profil-resmi[data-renk="4"] { background: var(--nane-acik); color: var(--nane-yazi); }
.profil-resmi[data-renk="5"] { background: var(--pembe-acik); color: var(--pembe-yazi); }

/* Profil sayfaları */
.profil-basi { display: flex; align-items: center; gap: 16px; min-width: 0; }
.profil-basi .soluk { margin-top: 6px; overflow-wrap: anywhere; }
.profil-resim-alani { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 20px; }
.profil-resim-formlari { display: grid; flex: 1 1 220px; gap: 12px; }
.profil-resim-formlari input[type="file"] { padding: 8px 10px; }
.profil-resim-formu { flex: 1 1 220px; }
.profil-resim-formu input[type="file"] { padding: 8px 10px; font-size: 14px; }
.profil-ayrac { margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--kenar); }

/* Profilde iki adımlı doğrulama: QR (beyaz zeminli PNG: karanlıkta da okunur; küçültülürken kareler bulanıklaşmasın), elle
   anahtar, bir kez gösterilen kurtarma kodları (yönetimde .kurtarma-listesi, panelde .kurtarma-kodlari). */
.qr-alani { display: grid; justify-items: start; gap: 10px; margin: 6px 0 4px; }
.qr { width: 200px; height: 200px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: #fff; image-rendering: pixelated; }
.qr-alani .kod-cip { max-width: 100%; white-space: normal; overflow-wrap: anywhere; user-select: all; }
.elle-anahtar { font-family: var(--yazi-esit); font-size: 14px; font-weight: 700; letter-spacing: .04em; overflow-wrap: anywhere; user-select: all; }
.kurtarma-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px 20px; margin: 14px 0 0; padding-left: 28px; color: var(--metin); font: 700 18px/1.4 var(--yazi-esit); letter-spacing: .06em; }
.kurtarma-listesi li::marker { color: var(--soluk); font-size: 14px; }
.kurtarma-listesi code { font: inherit; user-select: all; }
.kurtarma-kodlari { display: grid; grid-template-columns: repeat(2, max-content); gap: 6px 32px; margin: 14px 0 0; padding-left: 28px; color: var(--metin); font: 700 18px/1.4 var(--yazi-esit); }
.kurtarma-kodlari code { font: inherit; user-select: all; }

@media (max-width: 820px) {
  /* Dar ekranda yalnız yuvarlak resim kalır; "Profilim" ekran okuyucu için durur (bağlantının adı). */
  .profil-bag { padding: 4px; }
  .profil-bag-yazi { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .profil-baglantisi { padding: 4px; }
  .profil-baglantisi > span:last-child { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 480px) {
  .kurtarma-kodlari { grid-template-columns: max-content; }
  /* Bilgi listesi telefonda alt alta: önce soluk ad, altında değer (uzun e-posta sözcük ortasından bölünmesin). */
  dl.bilgi { grid-template-columns: minmax(0, 1fr); }
  dl.bilgi dt { padding: 10px 0 0; border-bottom: 0; font-size: 13px; }
  dl.bilgi dd { padding-top: 2px; }
}

@media (max-width: 420px) {
  /* Telefonda marka, tema düğmesi, profil ve Çıkış bir satıra sığsın: Çıkış yalnız simge kalır; "Çıkış" ekran okuyucu
     için durur (düğmenin adı). */
  .ust-kisi form .dugme { width: 42px; padding: 0; }
  .ust-kisi form .dugme > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

@media (max-width: 560px) {
  /* Dil düğmesi (TR / EN) gelince marka yazısıyla üst çubuğun sağı 560 px'in altında bir satıra sığmıyordu (sağ taraf ikinci
     satıra iniyor, yapışkan üst çubuk 117 px'ten 161 px'e uzuyordu; ölçüm 360–820 px, iki dil): telefonda markadan yalnız logo
     kalır. Uygulamanın adı ("Tıkır Robot") ekran okuyucu için durur (bağlantının adı). */
  .ust .marka-ad { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* Yönetim menüsüne "Özet" eklenince (altı bağlantı) üst çubuk 1540 px'e kadar tek satıra sığmaz (ölçüm: 1366'da sayfa 83 px
   yana kayıyordu): bu aralıkta da menü kendi satırına iner (yukarıdaki 821–1300 kuralının devamı). Panel menüsü sığdığı için
   satırında kalır (sarma yalnız sığmayanı alta indirir). */
@media (min-width: 1301px) and (max-width: 1540px) {
  .ust-ic { flex-wrap: wrap; row-gap: 4px; }
  .menu[aria-label="Admin"], .menu[aria-label="Yönetim"] { flex-basis: 100%; order: 3; margin: 0 -24px; padding: 0 24px 2px; overflow-x: auto; scrollbar-width: none; }
}

/* Okul paneli 1181 px ve üstünde tek satır (Yön B): solda logo, adın altında okul adı (en çok 220 px; çubuk dar kalırsa marka
   küçülür, okul adı üç noktayla kısalır), ortada menü (seçili öğe dolu deniz), sağda dil, tema, yalnız yuvarlak profil resmi
   ve yalnız simge Çıkış (yazıları ekran okuyucuya kalır). Taşma emniyeti: marka min-width 0. Altı öğeli menü (hem yetkili hem
   öğretmen; body.menu-alti) tek satıra sığmaz: kendi satırına iner (821-1180 px'teki gibi), çubuğun boyu 118 px. Taşma
   taraması: 1181-1440 px, iki dil, beş ve altı öğe, uzun okul adı. 821-1180 px'te menü kendi satırında (yukarıda), telefonda
   alt sekme çubuğu. */
@media (min-width: 1181px) {
  body.panel { --ust-boyu: 66px; }
  body.panel.menu-alti { --ust-boyu: 118px; }
  .panel-ust-ic { flex-wrap: nowrap; gap: 20px; max-width: 1240px; padding: 10px 28px; }
  .menu[aria-label="Panel"] { flex: 1 1 auto; justify-content: center; }
  .panel-ust-ic .marka { display: grid; grid-template-columns: auto minmax(0, auto); column-gap: 10px; align-items: center; min-width: 0; overflow: hidden; }
  .panel-ust-ic .marka img { grid-row: 1 / span 2; }
  .panel-ust-ic .marka-ad { line-height: 1.15; }
  .panel-ust-ic .marka-etiket.kurum { min-width: 0; max-width: 220px; padding: 0; background: none; color: var(--soluk); font-size: 12.5px; font-weight: 700; line-height: 1.3; }
  .panel-ust-ic .profil-baglantisi { padding: 4px; border-color: transparent; }
  .panel-ust-ic .profil-baglantisi > span:last-child, .panel-ust-ic .ust-kisi form .dugme > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .panel-ust-ic .ust-kisi form .dugme { width: 42px; padding: 0; }
  body.menu-alti .panel-ust-ic { flex-wrap: wrap; row-gap: 4px; }
  body.menu-alti .menu[aria-label="Panel"] { flex-basis: 100%; order: 3; justify-content: flex-start; margin: 0 -28px; padding: 0 28px 2px; overflow-x: auto; scrollbar-width: none; }
}

/* ---------- İlerleme: oyun kartları ve "Tümü" genel bakış (panel-ilerleme.js; uygulamanın ekranlar/ilerleme.js'i) ---------- */
/* Üstte aralık (sağda), altında seçim iki sıradır: üst sırada "Tümü" ve beş alan (menünün kökleri; altı sütun), alt sırada seçili
   alanın oyunları (dört, beş ya da altı kart, altı sütun: Görmek ve Bilmek altı oyun; zemin şeridinde). "Tümü" seçiliyken alt sıra gizlidir. Resimler uygulamanın
   menü kartlarındaki simgelerdir (/uygulama/cizim/simgeler/). Seçili kart deniz zeminli ve kenarlı; bir oyun seçiliyken alanının
   kartı yalnız kenarlıdır (asıl seçim oyundur). 900 px'in altında iki sıra da tek satır olur ve yana kayar (sonraki kartın ucu
   görünür). */
.ilerleme-secim { display: grid; gap: 12px; }
.ilerleme-secim .aralik-grubu { justify-self: end; }
.secim-grubu.alan-dugmeleri { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; }
.secim-grubu.oyun-dugmeleri { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; padding: 8px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
/* Gizli sıra ve kartlar her genişlikte gizli: 900 px'in altındaki .secim-grubu.oyun-dugmeleri { display: flex } aynı özgüllükte ve
   sonra geldiği için [hidden]'ı eziyor, "Tümü" seçiliyken boş şerit (dolgu ve zemin) görünüyordu (son inceleme K1). */
.secim-grubu[hidden], .secim-karti[hidden] { display: none !important; }
.secim-karti { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 60px; padding: 6px 12px 6px 6px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); color: var(--metin); font: inherit; font-size: 14px; font-weight: 800; line-height: 1.2; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, box-shadow .15s; }
.secim-karti img { flex: none; width: 46px; height: 46px; }
.secim-karti:hover { border-color: var(--kenar-koyu); background: var(--satir-uzerinde); }
.secim-karti[aria-pressed="true"] { border-color: var(--deniz-orta); background: var(--deniz-acik); color: var(--deniz-koyu); box-shadow: inset 0 0 0 1px var(--deniz-orta); }
.ilerleme-secim:has(.oyun-dugmeleri .secim-karti[aria-pressed="true"]) .alan-dugmeleri .secim-karti[aria-pressed="true"] { background: var(--ic-zemin); }
.secim-karti.tumu { justify-content: center; }

/* "Tümü" (genel bakış; ilerleme.js genelBakisiCiz): bütün oyunların genel özeti ve oyun kartları, menünün beş alanıyla (geniş
   ekranda beş sütun: beş oyunlu alan tek satır, sütunlar alanlar arasında hizalı); bir alan seçilince yalnız o alan. Kart, basılınca
   o oyunun ayrıntısını açan bir düğmedir: resim, ad ve durum (oynandı / bu aralıkta oynanmadı / henüz oynanmadı); soru ve ilk
   denemede doğru; oynanan sahne / menüdeki sahne (çubuk); son oynama. Seçili aralıkta oynanmamış oyunun resmi ve sayıları
   soluktur. */
.bolum-oyunlar { grid-column: 1 / -1; }
.bakis-kumesi { display: grid; gap: 8px; }
.bakis-kumesi + .bakis-kumesi { margin-top: 6px; }
.bakis-kume-adi { color: var(--soluk); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; }
.bakis-kartlari { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.bakis-karti { display: flex; flex-direction: column; gap: 10px; min-width: 0; padding: 12px 14px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--kart); color: var(--metin); font: inherit; text-align: left; }
button.bakis-karti { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.bakis-karti:hover { border-color: var(--kenar-koyu); box-shadow: var(--golge); }
button.bakis-karti:active { transform: translateY(1px); }
.bakis-ust { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 10px; min-width: 0; min-height: 62px; }
.bakis-resmi { width: 44px; height: 44px; }
.bakis-baslik { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.bakis-adi { font-size: 15px; font-weight: 800; line-height: 1.2; overflow-wrap: anywhere; }
.bakis-durum { padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 800; }
.bakis-durum.bakis-oynandi { background: var(--yesil-acik); color: var(--yesil-yazi); }
.bakis-durum.bakis-aralikta-yok { background: var(--kum-acik); color: var(--kum-yazi); }
/* "Henüz oynanmadı" olağan hâl: hapsız soluk yazı (dar kartta iki satıra inebilir). */
.bakis-durum.bakis-hic { padding: 0; background: none; color: var(--soluk); }
.bakis-sayilar { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; min-width: 0; }
.bakis-sayi-kutusu { display: grid; align-content: start; min-width: 0; padding: 6px 8px; border-radius: 8px; background: var(--zemin); }
.bakis-sayi { color: var(--deniz-koyu); font-size: 20px; font-weight: 900; line-height: 1.15; font-variant-numeric: tabular-nums; }
.bakis-sayi-adi { color: var(--soluk); font-size: 12px; font-weight: 700; line-height: 1.25; }
.bakis-sahneler { display: grid; gap: 4px; min-width: 0; }
.bakis-satiri { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 8px; font-size: 13px; }
.bakis-etiket { color: var(--soluk); font-weight: 700; }
.bakis-deger { font-weight: 800; font-variant-numeric: tabular-nums; }
.bakis-cubugu { display: block; height: 8px; }
.bakis-cubugu .cubuk-dolgu { display: block; background: var(--cubuk-koyu); }
.bakis-ayrinti { align-self: flex-end; margin-top: auto; color: var(--deniz-orta); font-size: 13px; font-weight: 800; }
.bakis-karti:not(.bakis-oynandi) .bakis-resmi { opacity: .55; }
.bakis-karti:not(.bakis-oynandi) .bakis-sayi { color: var(--soluk); }
/* Hiç oynanmamış oyun sıkışık kart: yalnız resim, ad ve "Henüz oynanmadı" (sıfırlar ve tire yazılmaz; kart yine basılır,
   ayrıntısı açılır). Kartlar satırda yukarı yaslı: sıkışık kart yanındakinin boyuna uzamaz. */
.bakis-kartlari { align-items: start; }
.bakis-karti.bakis-hic .bakis-sayilar, .bakis-karti.bakis-hic .bakis-sahneler, .bakis-karti.bakis-hic .bakis-son, .bakis-karti.bakis-hic .bakis-ayrinti { display: none; }
.bakis-karti.bakis-hic .bakis-ust { min-height: 0; }

@media (max-width: 1200px) {
  .bakis-kartlari { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .bakis-kartlari { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .secim-grubu.alan-dugmeleri, .secim-grubu.oyun-dugmeleri { display: flex; flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; overscroll-behavior-x: contain; padding-bottom: 4px; }
  .secim-karti { flex: 0 0 176px; scroll-snap-align: start; }
  .secim-karti.tumu { flex-basis: 96px; }
}
@media (max-width: 720px) {
  .ilerleme-secim .aralik-grubu { justify-self: start; }
}
@media (max-width: 560px) {
  .bakis-kartlari { grid-template-columns: minmax(0, 1fr); }
  .bakis-ust { min-height: 0; }
}

/* ---------- İz ilr-1 (3 Ekim): 2FA hatırlama kutusu ---------- */
/* Kod adımında "Bu cihazda 1 hafta sorma" (Pages/Shared/_HatirlaKutusu.cshtml): kutu, altında kutunun hizasında kısa not. */
.hatirla { display: grid; gap: 2px; }
.hatirla .secim { justify-self: start; font-size: 15px; }
.hatirla .soluk { padding-left: 28px; font-size: 13px; }

/* İz ilr-1: öğrencinin "İlerleme" kartı (Pages/Shared/_IlerlemeKarti.cshtml; panel Öğrenci, yönetim Aile). Solda grafik simgeli
   başlık, ortada kısa özet (özet sayfalarının sayı dili: deniz koyu, eşit genişlikte rakam), sağda "İlerlemeyi gör →". Bütün
   kart tıklanır: asıl bağlantının (yönetimde formun düğmesinin) görünmez katmanı kartı kaplar; düğmenin basılınca kayması bu
   katmanı küçültmesin diye kartta kapalıdır. */
.ilerleme-karti { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px 36px; padding: 20px 24px; border: 1px solid var(--kenar); border-radius: var(--yaricap); background: var(--kart); box-shadow: var(--golge); transition: border-color .15s, box-shadow .15s, transform .15s; }
.ilerleme-karti:hover { border-color: var(--deniz); box-shadow: var(--golge-buyuk); transform: translateY(-2px); }
.ilerleme-karti h2 { gap: 14px; margin: 0; font-size: 21px; }
.ilerleme-karti h2 .simge { width: 52px; height: 52px; padding: 13px; border-radius: 16px; background: var(--deniz-acik); color: var(--deniz-koyu); }
.ilerleme-ozeti { display: flex; flex-wrap: wrap; gap: 10px 40px; margin: 0; }
.ilerleme-ozeti > div { display: grid; gap: 2px; min-width: 0; }
.ilerleme-ozeti dt { color: var(--soluk); font-size: 13px; font-weight: 700; }
.ilerleme-ozeti dd { margin: 0; color: var(--deniz-koyu); font-size: 21px; font-weight: 900; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ilerleme-ozeti .birim { color: var(--soluk); font-size: 14px; font-weight: 700; }
/* Görsel perspektif satırı (yalnız Görüyor mu?, Ne Görüyor? ya da Nasıl Görüyor?'de kaydı olan öğrencide): tam genişlikte, satıra sığmazsa
   kırılır; oyunun durumu kalın (kazanıldı, art arda 2/3, —). */
.ilerleme-ozeti > .ilerleme-perspektif { flex-basis: 100%; }
.ilerleme-perspektif dd { color: var(--metin); font-size: 16px; font-weight: 700; white-space: normal; }
.ilerleme-perspektif dd b { color: var(--deniz-koyu); font-weight: 900; }
.ilerleme-karti-bag { position: static; }
.ilerleme-karti-bag::after { content: ""; position: absolute; inset: 0; border-radius: var(--yaricap); }
.ilerleme-karti-bag:active { transform: none; }
.ilerleme-karti-bag .ok { font-size: 18px; line-height: 1; transition: transform .15s; }
.ilerleme-karti:hover .ilerleme-karti-bag { background: var(--deniz-koyu); box-shadow: var(--golge); }
.ilerleme-karti:hover .ilerleme-karti-bag .ok { transform: translateX(3px); }

@media (max-width: 720px) {
  /* Telefonda alt alta: başlık, satır satır özet (solda ad, sağda sayı), tam genişlikte düğme. */
  .ilerleme-karti { grid-template-columns: minmax(0, 1fr); gap: 14px; padding: 18px; }
  .ilerleme-karti h2 { font-size: 19px; }
  .ilerleme-karti h2 .simge { width: 44px; height: 44px; padding: 11px; border-radius: 14px; }
  .ilerleme-ozeti { display: grid; gap: 0; }
  .ilerleme-ozeti > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-top: 1px solid var(--kenar); }
  .ilerleme-ozeti > div:last-child { border-bottom: 1px solid var(--kenar); }
  .ilerleme-ozeti dt { font-size: 14px; }
  .ilerleme-ozeti dd { font-size: 18px; }
  .ilerleme-karti-bag { width: 100%; }
}

/* İçerik lisansı: alan listesi (Pages/Shared/_AlanListesi.cshtml; yönetim Okul ve Aile, panel Özet). Her satırda alanın menü
   simgesi (tanitim/<alan>.svg), adı ve alt yazısı. Kutulu listede bütün satır tıklanır, işaretli satır deniz rengine döner
   (beş alanın hepsi lisanslı, Duygular dahil). Salt okunur listede sağda "Açık" ya da "Kilitli" rozeti; kilitli alanın
   simgesi soluklaşır. Renkler yalnız değişkenlerden (iki tema). */
.alan-listesi { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.alan-secimi { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 10px 14px; border: 1px solid var(--kenar); border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); cursor: pointer; transition: background .15s, border-color .15s; }
label.alan-secimi:hover { border-color: var(--kenar-koyu); background: var(--satir-uzerinde); }
.alan-secimi:has(input:checked), label.alan-secimi:has(input:checked):hover { border-color: var(--deniz-orta); background: var(--deniz-acik); }
.alan-secimi input { flex: none; width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--deniz-orta); }
.alan-secimi img { flex: none; width: 40px; height: 40px; }
.alan-yazi { display: grid; flex: 1; gap: 2px; min-width: 0; }
.alan-yazi strong { line-height: 1.25; }
.alan-yazi .soluk { font-size: 13px; font-weight: 600; }
.alan-secimi:has(input:checked) .alan-yazi strong { color: var(--deniz-koyu); }
.alan-secimi.salt { cursor: default; }
.alan-secimi.salt .rozet { flex: none; }
.alan-secimi.kilitli img { opacity: .45; filter: grayscale(1); }
/* Salt okunur listede (panel Özet, yönetim Aile) her alan kendi maskot renginde (data-alan): Duygular mercan, Görmek ve
   Bilmek deniz, Bakış ve Niyet lila, Sembolik Oyun güneş, Görünen ve Gerçek nane; simge beyaz yuvarlakta, "Açık" beyaz
   hapta. Kilitli alan renksiz kalır. Kutulu listede (seçim) seçim rengi deniz olduğu için alan renkleri yok. */
.alan-secimi.salt:not(.kilitli) { border-color: transparent; background: var(--deniz-acik); }
.alan-secimi.salt[data-alan="duygular"]:not(.kilitli) { background: var(--mercan-acik); }
.alan-secimi.salt[data-alan="bakis-ve-niyet"]:not(.kilitli) { background: var(--lila-acik); }
.alan-secimi.salt[data-alan="sembolik-oyun"]:not(.kilitli) { background: var(--gunes-acik); }
.alan-secimi.salt[data-alan="gorunen-ve-gercek"]:not(.kilitli) { background: var(--nane-acik); }
.alan-secimi.salt:not(.kilitli) img { width: 46px; height: 46px; padding: 5px; border-radius: 50%; background: var(--kart); }
.alan-secimi.salt .rozet.acik { padding-left: 8px; background: var(--kart); }
.alan-basligi { margin: 22px 0 4px; font-size: 16px; font-weight: 800; }
h2 + .alan-basligi { margin-top: 0; }
.alan-aciklamasi { margin: 0 0 14px; font-size: 14px; font-weight: 600; }
.alan-aciklamasi a { color: var(--deniz-orta); font-weight: 800; }
/* Açma formlarında alan seçimi (Okullar "Okul aç", Hesap aç, Davet kodu; "Açarken seç"): kenarsız küme, başlığı formun öteki
   alan adları gibi; yan yana alanlı formda (.uret-formu) kendi satırını kaplar. */
.alan-kumesi { min-width: 0; margin: 0; padding: 0; border: 0; }
.uret-formu .alan-kumesi { flex: 1 1 100%; }
.alan-kumesi legend { margin-bottom: 4px; padding: 0; font-size: 14px; font-weight: 700; }
.alan-kumesi .alan-aciklamasi { margin-bottom: 12px; }
/* Panel Oyunlar: okulda kilitli alanların notu (başlığın altında). Özetin içerik uyarısındaki bağlantı uyarının renginde. */
.kilitli-alanlar { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 16px; font-size: 14px; font-weight: 600; }
.kilitli-alanlar .simge { flex: none; margin-top: 2px; }
.uyari[data-icerik] a { color: inherit; }

/* ---------- Eğitim serisi (panel; tasarım "Eğitim serisi" §8) ---------- */
/* Kütüphane (Panel/Seriler), seri düzenleyicisi (Panel/Seri, panel-seri.js), çoklu atama (Panel/SeriAta), çocuğun Seriler sekmesi
   (Panel/OgrenciSerileri) ve ortak video ağacı (Shared/_VideoAgaci). Sınıf adları site tasarımı maketinin seri düzenleyicisinden
   (seri-duzen, seri-agac, agac-grup, video-satiri, gorunurluk, adim-listesi, adim, blok-*, seri-onizleme, seri-kaydet). Görünüş
   Yön B ("Kumsalda Maskotlar"): kenarsız iç kutular, alanların maskot renkleri, yuvarlak hap çubuklar. Renkler yalnız
   değişkenlerden (iki tema); altın kenar --altin (uygulamanın seri kartıyla aynı). Alanın rengi data-alan'dan, nth-child'dan değil:
   ağaçta alan satırını saran <li>'de (li[data-alan] > details > .alan-satiri), sırada adımın <li>'sinde (.adim[data-alan]; birden
   çok alanlı karışık blokta "karisik"). Betiğin gizlediği öğeler sınıflarının display'ine karşın gizli kalır. */
.seri-duzenleyici [hidden], .seri-agac-kabi [hidden], .cocuk-kapalilari [hidden] { display: none !important; }
.seri-duzenleyici { display: grid; gap: 20px; }
.seri-alanlari { display: grid; gap: 20px; min-width: 0; margin: 0; padding: 0; border: 0; }
.seri-bilgi-alanlari { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); align-items: start; gap: 14px 20px; }
.seri-bilgi-alanlari textarea { min-height: 44px; }
.seri-aciklama { margin: -6px 0 14px; }
.seri-duzen { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; gap: 20px; }
.seri-sag { display: grid; gap: 20px; min-width: 0; }

/* Video ağacı: alan → oyun → kategori → video. */
.seri-agac-kabi { display: grid; gap: 10px; }
.seri-arac { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.seri-arama { position: relative; flex: 1 1 240px; }
.seri-arama .simge { position: absolute; top: 50%; left: 12px; color: var(--soluk); transform: translateY(-50%); pointer-events: none; }
.seri-arama input { padding-left: 40px; }
.agac-sonuc { flex-basis: 100%; }
.agac-sonuc:empty { display: none; }
.seri-agac, .seri-agac ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.seri-agac details > ul, .seri-agac details > p { margin: 4px 0 6px 20px; padding-left: 12px; border-left: 2px solid var(--kenar); }
.agac-grup { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-height: 44px; padding: 6px 10px 6px 8px; border-radius: var(--yaricap-kucuk); cursor: pointer; list-style: none; }
.agac-grup::-webkit-details-marker { display: none; }
.agac-grup::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 4px 0 2px; border: solid var(--soluk); border-width: 0 2px 2px 0; transform: rotate(-45deg); transition: transform .15s; }
details[open] > .agac-grup::before { transform: rotate(45deg); }
.agac-grup:hover { background: var(--satir-uzerinde); }
.agac-ad { flex: 1 1 auto; min-width: 0; font-weight: 700; overflow-wrap: anywhere; }
.agac-sayi { color: var(--soluk); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Grubun "Hepsini kapat / aç" düğmesi özet satırının altında, sağda (summary içinde etkileşimli öğe yok). */
.agac-grup-arac { display: flex; justify-content: flex-end; margin: 0 8px 2px 20px; }
.alan-satiri { min-height: 52px; background: var(--ic-zemin); }
.alan-satiri .agac-ad { font-size: 16px; font-weight: 800; }
/* Alan satırları alanın renginde: Duygular mercan, Görmek ve Bilmek deniz, Bakış ve Niyet lila, Sembolik Oyun güneş, Görünen ve
   Gerçek nane. */
.seri-agac > li[data-alan] > details > .alan-satiri { background: var(--deniz-acik); }
.seri-agac > li[data-alan="duygular"] > details > .alan-satiri { background: var(--mercan-acik); }
.seri-agac > li[data-alan="bakis-ve-niyet"] > details > .alan-satiri { background: var(--lila-acik); }
.seri-agac > li[data-alan="sembolik-oyun"] > details > .alan-satiri { background: var(--gunes-acik); }
.seri-agac > li[data-alan="gorunen-ve-gercek"] > details > .alan-satiri { background: var(--nane-acik); }
.video-satiri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; padding: 6px 8px; border-radius: var(--yaricap-kucuk); }
.video-satiri:hover { background: var(--satir-uzerinde); }
.video-resmi { display: block; flex: none; width: 64px; height: 36px; border-radius: 6px; background: var(--ic-zemin); object-fit: cover; }
.video-ad { display: grid; flex: 1 1 160px; min-width: 0; font-weight: 700; }
.video-yol { color: var(--soluk); font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.video-notu { color: var(--kum-yazi); font-size: 12px; font-weight: 700; }
.video-satiri.kapali .video-resmi { opacity: .45; filter: grayscale(.7); }
.video-satiri.kapali .video-ad > span:first-child { color: var(--soluk); text-decoration: line-through; text-decoration-thickness: 1px; }
.adimda { padding: 2px 8px; border-radius: 999px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* Menü anahtarı (role="switch"): açıkken video menüde görünür; durum yazıyla da söylenir (renge yaslanmaz). */
.gorunurluk { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; white-space: nowrap; cursor: pointer; }
.gorunurluk input { position: relative; flex: none; width: 38px; min-width: 38px; height: 22px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: var(--soluk); cursor: pointer; appearance: none; transition: background .15s; }
.gorunurluk input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--kart); transition: transform .15s; }
.gorunurluk input:checked { background: var(--deniz-orta); }
.gorunurluk input:checked::after { transform: translateX(16px); }
.gorunurluk input:focus-visible { outline: 2px solid var(--odak-cizgi); outline-offset: 2px; }
.gorunurluk input:disabled { cursor: default; opacity: .6; }
.gorunurluk span { min-width: 3.4em; color: var(--soluk); }
.gorunurluk-acik { display: none; }
.gorunurluk:has(input:checked) .gorunurluk-acik { display: inline; color: var(--metin); }
.gorunurluk:has(input:checked) .gorunurluk-kapali { display: none; }
/* Karışık blok seçimi: yalnız seçim kipinde görünür; o sırada "Seriye ekle" gizlenir. */
.blok-secimi { display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; background: var(--deniz-acik); cursor: pointer; }
.blok-secimi input { width: 20px; height: 20px; min-height: 0; margin: 0; padding: 0; accent-color: var(--deniz-orta); cursor: pointer; }
.secim-kipi .blok-secimi { display: inline-flex; }
.secim-kipi .seriye-ekle { display: none; }
.karisik-simgesi { width: 22px; height: 22px; }
.kilitli-kutu { display: grid; gap: 6px; margin-top: 16px; padding: 14px 16px; border: 1px dashed var(--kenar-koyu); border-radius: var(--yaricap-kucuk); }
.kilitli-kutu h3 { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 15px; font-weight: 800; }
.kilitli-kutu ul { display: grid; gap: 4px; margin: 0; padding-left: 20px; font-size: 14px; }
.kilitli-kutu li { overflow-wrap: anywhere; }
.kapali-siniri { margin-top: 12px; }
/* Seçim kipinin çubuğu: ağacın altında yapışkan (uzun ağaçta da elin altında). */
.blok-cubugu { position: sticky; bottom: calc(var(--alt-cubuk, 0px) + 12px); z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 14px; padding: 10px 14px; border: 1.5px solid var(--deniz-orta); border-radius: var(--yaricap-kucuk); background: var(--kart); box-shadow: var(--golge-buyuk); }
.blok-cubugu-yazi { flex: 1 1 100%; color: var(--kirmizi-yazi); font-size: 14px; font-weight: 700; }
.blok-cubugu-yazi:empty { display: none; }

/* Serinin sırası. */
.adim-listesi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.adim { display: grid; grid-template-columns: auto 28px 64px minmax(0, 1fr) auto; align-items: center; gap: 8px 10px; min-width: 0; padding: 10px 10px 10px 6px; border: 1px solid transparent; border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); }
.adim:not(:has(.tutamac)) { grid-template-columns: 28px 64px minmax(0, 1fr) auto; padding-left: 10px; }
.adim.tutuluyor { border-color: var(--deniz-orta); box-shadow: var(--odak); }
.adim.surukleniyor { opacity: .5; }
.adim.birak-ust { box-shadow: 0 -3px 0 var(--deniz-orta); }
.adim.birak-alt { box-shadow: 0 3px 0 var(--deniz-orta); }
.dugme.tutamac { width: 28px; min-height: 34px; padding: 0; border-color: transparent; background: transparent; color: var(--soluk); cursor: grab; }
.dugme.tutamac:hover, .dugme.tutamac[aria-pressed="true"] { background: var(--deniz-acik); color: var(--deniz-koyu); }
.adim-no { display: inline-grid; flex: none; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
/* Adımın numarası alanının renginde (karışık, birden çok alanlı blok: pembe). */
.adim[data-alan="duygular"] .adim-no { background: var(--mercan-acik); color: var(--mercan-yazi); }
.adim[data-alan="bakis-ve-niyet"] .adim-no { background: var(--lila-acik); color: var(--lila-yazi); }
.adim[data-alan="sembolik-oyun"] .adim-no { background: var(--gunes-acik); color: var(--gunes-yazi); }
.adim[data-alan="gorunen-ve-gercek"] .adim-no { background: var(--nane-acik); color: var(--nane-yazi); }
.adim[data-alan="karisik"] .adim-no { background: var(--pembe-acik); color: var(--pembe-yazi); }
.adim-yazi { display: grid; justify-items: start; gap: 3px; min-width: 0; }
.adim-yazi strong { overflow-wrap: anywhere; }
.adim-yazi .rozet { padding: 1px 8px 1px 6px; font-size: 12px; }
.adim-dugmeler { display: flex; gap: 4px; }
.adim-dugmeler .dugme { width: 34px; min-height: 34px; padding: 0; }
.adim-dugmeler .dugme.tehlikeli { border-color: transparent; }
.adim-bos { padding: 14px 4px; text-align: center; }
.blok-resmi { position: relative; display: inline-grid; place-items: center; background: var(--deniz-acik); color: var(--deniz-koyu); }
.blok-adet { position: absolute; right: -6px; bottom: -6px; padding: 0 5px; border-radius: 999px; background: var(--deniz-orta); color: var(--dolu-yazi); font-size: 11px; font-weight: 800; line-height: 18px; }
.blok-resimler { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.blok-resmi-kucuk { width: 40px; height: 23px; border-radius: 4px; background: var(--ic-zemin); object-fit: cover; }
.blok-fazla { color: var(--soluk); font-size: 13px; font-weight: 700; }
/* Bloğun videoları ve adedi adımın bütün genişliğinde (numaranın altından başlar). */
.blok-alti { display: grid; grid-column: 2 / -1; gap: 6px; min-width: 0; }
.adim:not(:has(.tutamac)) > .blok-alti { grid-column: 1 / -1; }
.blok-videolari { display: flex; flex-wrap: wrap; gap: 4px; }
.blok-cipi { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--zemin); font-size: 13px; font-weight: 700; overflow-wrap: anywhere; }
.blok-cipi:not(:has(button)) { padding-right: 10px; }
.dugme.cip-cikar { width: 24px; min-height: 24px; padding: 0; border-color: transparent; background: transparent; color: var(--soluk); font-size: 16px; }
.dugme.cip-cikar:hover { background: var(--kirmizi-acik); color: var(--kirmizi-yazi); }
.blok-denetim { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.blok-sayi { display: inline-flex; align-items: center; gap: 6px; color: var(--soluk); font-size: 13px; font-weight: 700; }
.blok-sayi select { width: auto; min-height: 34px; padding: 2px 10px; }

/* Önizleme: çocuğun menü kartı (uygulamanın kalıbı: altın kenar, alt satırda ad, altta çubuk) ve seri düzeyi. */
.onizleme-sahne { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px; margin: 12px 0 18px; padding: 16px; border-radius: var(--yaricap-kucuk); background: var(--zemin); }
.seri-karti-taslak { display: grid; gap: 4px; width: 200px; padding: 8px 8px 10px; border: 3px solid var(--altin); border-radius: 18px; background: var(--kart); text-align: center; }
.seri-karti-resmi { width: 100%; height: 100px; border-radius: 10px; object-fit: cover; }
.seri-karti-resmi.taslak-blok .karisik-simgesi { width: 36px; height: 36px; }
.seri-karti-baslik { margin-top: 2px; font-weight: 800; }
.seri-karti-ad { overflow: hidden; color: var(--soluk); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.seri-karti-cubuk { height: 8px; margin-top: 4px; overflow: hidden; border-radius: 999px; background: var(--cubuk-zemin); }
.seri-duzeyi-taslak { display: flex; flex: 1 1 220px; flex-wrap: wrap; align-content: flex-start; gap: 8px; margin: 0; padding: 0; list-style: none; }
.seri-duzeyi-taslak li { display: grid; justify-items: center; gap: 2px; opacity: .55; }
.seri-duzeyi-taslak li.siradaki { opacity: 1; font-size: 12px; font-weight: 800; }
.taslak-resim { width: 64px; height: 36px; border-radius: 6px; object-fit: cover; }
.seri-duzeyi-taslak li.siradaki .taslak-resim, .seri-duzeyi-taslak li.siradaki .taslak-blok { box-shadow: 0 0 0 2px var(--kart), 0 0 0 4px var(--altin); }
.taslak-blok { display: grid; grid-auto-flow: column; place-items: center; gap: 2px; width: 64px; height: 36px; border-radius: 6px; background: var(--deniz-acik); color: var(--deniz-koyu); font-size: 12px; }
.seri-onizleme h3 { margin: 0 0 10px; font-size: 15px; }
.etki-listesi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.etki-listesi li { display: grid; grid-template-columns: minmax(0, 11em) minmax(60px, 1fr) auto; align-items: center; gap: 12px; }
.etki-ad { overflow-wrap: anywhere; }
.etki-listesi .cubuk { height: 8px; }
.etki-listesi .cubuk-dolgu { display: block; background: var(--cubuk-orta); }
.etki-sayi { color: var(--soluk); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Kaydet çubuğu: geniş ekranda yapışkan; paylaşılan seri uyarısı Kaydet'in hemen yanında. */
.seri-kaydet { position: sticky; bottom: 12px; z-index: 6; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 12px 14px 12px 22px; border: 0; border-radius: 999px; background: var(--ust-zemin); box-shadow: var(--golge-buyuk); }
.seri-kaydet p { display: flex; flex: 1 1 300px; align-items: center; gap: 8px; margin: 0; font-weight: 700; }
.seri-kaydet p .simge { color: var(--kum-yazi); }

/* Kütüphane ve çoklu atama. */
.seri-cocuklari { color: var(--soluk); font-size: 14px; overflow-wrap: anywhere; }
.cocuk-secim-listesi { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cocuk-secimi { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 10px 14px; border: 0; border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); }
.cocuk-secimi .secim { flex: 1 1 160px; }
.cocuk-secimi.kilitli .secim { cursor: default; }
.cocuk-serileri-yazisi { flex-basis: 100%; overflow-wrap: anywhere; }

/* Çocuğun Seriler sekmesi. */
.cocuk-serileri { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
/* Atanmış seri kartı: kenarsız iç kutu, solda altın şerit (öğretmenin serisi; uygulamadaki kartın rengi), gitmeyen atamada kırmızı. */
.cocuk-serisi { display: grid; gap: 10px; min-width: 0; padding: 16px 18px 16px 22px; border: 0; border-radius: var(--yaricap-kucuk); background: var(--ic-zemin); box-shadow: inset 5px 0 0 var(--altin); }
.cocuk-serisi.gitmiyor { box-shadow: inset 5px 0 0 var(--kirmizi); }
.cocuk-serisi-ust { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.seri-sira-no { display: inline-grid; flex: none; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--kum-acik); color: var(--kum-yazi); font-weight: 900; }
.cocuk-serisi-baslik { display: grid; flex: 1 1 220px; gap: 2px; min-width: 0; }
.cocuk-serisi-baslik .satir-bag { font-size: 17px; }
.seri-gitmiyor { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.seri-ilerlemesi { display: grid; grid-template-columns: auto minmax(80px, 260px); align-items: center; gap: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.seri-cubugu { width: 100%; height: 10px; overflow: hidden; border: 0; border-radius: 999px; background: var(--cubuk-zemin); color: var(--cubuk-koyu); appearance: none; }
.seri-cubugu::-webkit-progress-bar { border-radius: 999px; background: var(--cubuk-zemin); }
.seri-cubugu::-webkit-progress-value { border-radius: 999px; background: var(--cubuk-koyu); }
.seri-cubugu::-moz-progress-bar { border-radius: 999px; background: var(--cubuk-koyu); }
.adim-resimleri { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; padding: 0; list-style: none; }
.adim-resimleri .video-resmi { width: 48px; height: 27px; }
.adim-fazla { color: var(--soluk); font-size: 13px; font-weight: 800; }
.cocuk-serisi-dugmeleri { justify-content: flex-start; }
.cocuk-serisi-dugmeleri form { display: inline-flex; }
.seri-ekle { display: grid; gap: 14px; }
.gorunurluk-ozeti { margin-bottom: 8px; }
.alan-ozetleri { display: grid; gap: 4px; margin: 0 0 12px; padding-left: 20px; font-variant-numeric: tabular-nums; }
.kapali-kaynaklari summary { color: var(--deniz-orta); font-weight: 800; cursor: pointer; }
.kapali-kaynaklari ul { display: grid; margin: 10px 0 0; padding: 0; list-style: none; }
.kapali-kaynaklari li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 8px 0; border-bottom: 1px solid var(--kenar); }
.kapali-kaynaklari li:last-child { border-bottom: 0; }
.kapali-yolu { font-weight: 700; overflow-wrap: anywhere; }
.kapali-kaynaklari li.gitmiyor .kapali-yolu { color: var(--soluk); }
.kaynaklar { display: flex; flex-wrap: wrap; gap: 4px; }
.kaynak-cipi { padding: 1px 8px; border-radius: 999px; background: var(--zemin); color: var(--soluk); font-size: 12px; font-weight: 800; }
.bosluklu-yazi { margin-bottom: 14px; }

/* Dar ekran: sütunlar alt alta; telefonda önce "Seri sırası", sonra Videolar, en son Önizleme. */
@media (min-width: 981px) {
  /* Geniş ekranda sağ sütun (sıra ve önizleme) ağaç kayarken görünür kalır. */
  .seri-sag { position: sticky; top: calc(var(--ust-boyu) + 16px); max-height: calc(100vh - var(--ust-boyu) - 32px); overflow-y: auto; overscroll-behavior: contain; }
}
@media (max-width: 980px) {
  .seri-duzen { grid-template-columns: minmax(0, 1fr); }
  .seri-sag { display: contents; }
  .seri-sira { order: -1; }
  .seri-onizleme { order: 2; }
}
@media (max-width: 820px) {
  .seri-kaydet { position: static; border-radius: var(--yaricap); }
}
@media (max-width: 720px) {
  .seri-bilgi-alanlari { grid-template-columns: minmax(0, 1fr); }
  .seri-ilerlemesi { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}
@media (max-width: 560px) {
  /* Telefonda video satırı iki sırada (resim ve ad üstte, anahtar ve düğmeler alt satırda); adımda tutamaç yok (↑/↓ asıl yol).
     Öğrenci sekmelerinin telefon kuralı "Değerlendirmeler" bölümünde (.sekmeler; tek yer). */
  .video-satiri > .video-resmi { width: 56px; height: 32px; }
  .video-satiri > .video-ad { flex-basis: calc(100% - 72px); }
  /* "Seriye ekle" yalnız simge (adı aria-label'da): anahtar, adım işareti ve düğme tek satıra sığsın. */
  .video-satiri > .seriye-ekle { width: 34px; padding: 0; }
  .video-satiri > .seriye-ekle > span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .seri-agac details > ul, .seri-agac details > p { margin-left: 8px; padding-left: 8px; }
  .adim { grid-template-columns: 28px 56px minmax(0, 1fr); padding: 10px; }
  .adim > .dugme.tutamac { display: none; }
  .adim > .video-resmi { width: 56px; height: 32px; }
  .adim-dugmeler { grid-column: 1 / -1; justify-self: end; }
  .adim > .blok-alti { grid-column: 1 / -1; }
  .etki-listesi li { grid-template-columns: minmax(0, 1fr) auto; }
  .etki-listesi .cubuk { grid-column: 1 / -1; grid-row: 2; }
  .seri-karti-taslak { width: 100%; max-width: 220px; }
}