/* LTLearner · yaş bandı katmanı (öğrenci tarafı) — docs/yas-gruplari/sartname.md §9
   Veli ekranları bant almaz: kök öznitelik (data-yas-bandi) yalnız öğrenci modunda konur; tüm kurallar bu özniteliğe bağlıdır.
   Belirteçler :root'ta C (güvenli orta) değerleriyle tanımlıdır; bantlar üzerine yazar. */

/* yaş bandı · belirteçler */
:root {
  --yb-govde: 17px; --yb-kucuk: 14px; --yb-satir: 1.6; --yb-harf: 0.01em;
  --yb-baslik-olcek: 1.05; --yb-baslik-harf: -0.02em; --yb-olcu: 50ch;
  --yb-hedef: 48px; --yb-hedef-ana: 64px; --yb-bosluk: 10px; --yb-ikon: 28px;
  --yb-yaricap: 16px; --yb-kart-ic: 16px;
  --yb-gecis: 250ms; --yb-odul: 1200ms;
  --yb-gz-bar: 72px; --yb-ust: 46px;
}
[data-yas-bandi="a"] { --yb-govde: 20px; --yb-kucuk: 16px; --yb-satir: 1.7; --yb-harf: 0.03em; --yb-baslik-olcek: 1.25; --yb-baslik-harf: -0.005em; --yb-olcu: 34ch; --yb-hedef: 64px; --yb-hedef-ana: 88px; --yb-bosluk: 12px; --yb-ikon: 48px; --yb-yaricap: 28px; --yb-kart-ic: 24px; --yb-gecis: 400ms; --yb-odul: 2400ms; --yb-gz-bar: 92px; --yb-ust: 76px; }
[data-yas-bandi="b"] { --yb-govde: 18px; --yb-kucuk: 15px; --yb-satir: 1.65; --yb-harf: 0.02em; --yb-baslik-olcek: 1.15; --yb-baslik-harf: -0.01em; --yb-olcu: 42ch; --yb-hedef: 56px; --yb-hedef-ana: 72px; --yb-bosluk: 10px; --yb-ikon: 36px; --yb-yaricap: 22px; --yb-kart-ic: 20px; --yb-gecis: 320ms; --yb-odul: 1800ms; --yb-gz-bar: 80px; --yb-ust: 56px; }
[data-yas-bandi="c"] { --yb-gz-bar: 72px; }
[data-yas-bandi="d"] { --yb-govde: 16px; --yb-kucuk: 14px; --yb-satir: 1.55; --yb-harf: 0; --yb-baslik-olcek: 1; --yb-baslik-harf: -0.03em; --yb-olcu: 56ch; --yb-hedef: 48px; --yb-hedef-ana: 56px; --yb-bosluk: 8px; --yb-ikon: 24px; --yb-yaricap: 14px; --yb-kart-ic: 14px; --yb-gecis: 200ms; --yb-odul: 800ms; --yb-gz-bar: 68px; }
[data-yas-bandi="e"] { --yb-govde: 16px; --yb-kucuk: 13px; --yb-satir: 1.5; --yb-harf: 0; --yb-baslik-olcek: 0.95; --yb-baslik-harf: -0.03em; --yb-olcu: 62ch; --yb-hedef: 44px; --yb-hedef-ana: 52px; --yb-bosluk: 8px; --yb-ikon: 20px; --yb-yaricap: 12px; --yb-kart-ic: 14px; --yb-gecis: 160ms; --yb-odul: 500ms; --yb-gz-bar: 64px; }
@media (prefers-reduced-motion: reduce) { :root { --yb-gecis: 0.01ms; --yb-odul: 0.01ms; } }

/* yaş bandı · tipografi */
html[data-yas-bandi] body { font-size: var(--yb-govde); line-height: var(--yb-satir); letter-spacing: var(--yb-harf); }
html[data-yas-bandi] h1 { font-size: calc(clamp(1.9rem, 6.2vw, 3rem) * var(--yb-baslik-olcek)); letter-spacing: var(--yb-baslik-harf); line-height: 1.05; }
html[data-yas-bandi] h2 { font-size: calc(clamp(1.35rem, 3.4vw, 1.9rem) * var(--yb-baslik-olcek)); letter-spacing: var(--yb-baslik-harf); line-height: 1.1; }
html[data-yas-bandi] h3 { font-size: calc(1.2rem * var(--yb-baslik-olcek)); line-height: 1.15; }
html[data-yas-bandi] h4 { line-height: 1.2; }
html[data-yas-bandi] :is(.not, .meta, .etiket, small, .cip, .kip, .veri dt, .balon .kim, .durum, .ipucu, .segment, .rol, .oneri, .mini, .sayi-rozet) { font-size: var(--yb-kucuk); }
html[data-yas-bandi] :is(.sk-no, .sk-et, .sk-izle, .sk-ince small, .adim-izi span, .anlatim .kim, .sk-sekil-bas, .gun small, .avatar-sec small, .uye-sen, .sonuc-veri small, .kod-satir, .oyun-ust .baslik small, .oyun-satir small, .rozet small, .kisayol small) { font-size: var(--yb-kucuk); }
html[data-yas-bandi] :is(.yaprak p, .bant, .bos p) { font-size: var(--yb-govde); }
html[data-yas-bandi="a"] .etiket, html[data-yas-bandi="b"] .etiket { text-transform: none; letter-spacing: 0.01em; }
html[data-yas-bandi] .gorunum { --kart-r: var(--yb-yaricap); }
html[data-yas-bandi] :is(.kart, .kisayol, .oyun-kart, .oyun-satir, .rozet, .panel, .bos, .sk-kart, .cocuk-sec) { border-radius: var(--yb-yaricap); }
html[data-yas-bandi] .balon { max-width: min(88%, var(--yb-olcu, 560px)); font-size: var(--yb-govde); }

/* yaş bandı · dokunma hedefi (öğrenci ekranları; oyun gövdesi oyunlar.css'e aittir) */
html[data-yas-bandi] :is(.dugme, .dugme-ikincil, .dugme-hayalet, .dugme-kucuk, .kisayol, .cocuk-sec, .rol, .oneri, .mini, .segment, .secici-dugme, .tus, .bant button, .yaprak-eylem button, .oyun-ust .cik, .oyun-yok a, .sk-kart, .oyun-satir) { min-height: var(--yb-hedef); }
html[data-yas-bandi] :is(.dugme, .dugme-ikincil, .dugme-hayalet, .dugme-kucuk, .rol, .oneri, .mini, .bant button, .yaprak-eylem button, .oyun-ust .cik) { min-width: var(--yb-hedef); }
html[data-yas-bandi] .dugme.dugme { min-height: var(--yb-hedef-ana); }
html[data-yas-bandi] .dugme-hayalet { padding-block: 8px; }
html[data-yas-bandi] .mesaj-form textarea { min-height: var(--yb-hedef); font-size: var(--yb-govde); }
html[data-yas-bandi] .mesaj-form button { width: var(--yb-hedef); height: var(--yb-hedef); }
html[data-yas-bandi] .yaprak-eylem { gap: var(--yb-bosluk); }
html[data-yas-bandi="a"] .yaprak-eylem button { min-height: 64px; font-size: 1.1rem; padding-inline: 26px; }
html[data-yas-bandi="a"] .yaprak { border-radius: 28px; padding: 24px; }

/* yaş bandı · gezinti (öğrenci modu): sekme sayısı bant tablosundan gelir, burada yalnız boyut ve etiket biçimi */
html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-sekme { min-height: var(--yb-hedef); font-size: var(--yb-kucuk); }
html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-ad { max-width: 100%; }
@media (min-width: 721px) {
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-ikon { width: calc(var(--yb-ikon) * 0.8); height: calc(var(--yb-ikon) * 0.8); }
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-sahne { width: calc(var(--yb-ikon) * 0.8 + 4px); height: calc(var(--yb-ikon) * 0.8 + 2px); }
  html[data-yas-bandi="a"] .uygulama[data-gz="ogrenci"] .gz-sekme { font-size: 1.05rem; padding: 0 20px 0 14px; }
}
@media (max-width: 720px) {
  html[data-yas-bandi] { --ust-yuk: calc(var(--yb-ust) + env(safe-area-inset-top)); }
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] { --gz-bar: var(--yb-gz-bar); }
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-sekme { min-height: var(--yb-hedef); gap: 3px; font-weight: 600; letter-spacing: var(--yb-harf); }
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-ikon { width: var(--yb-ikon); height: var(--yb-ikon); }
  html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-sahne { width: calc(var(--yb-ikon) + 8px); height: calc(var(--yb-ikon) + 2px); }
  html[data-yas-bandi="d"] .uygulama[data-gz="ogrenci"] .gz-sekme, html[data-yas-bandi="e"] .uygulama[data-gz="ogrenci"] .gz-sekme { gap: 2px; }
  html[data-yas-bandi="a"] .uygulama[data-gz="ogrenci"] .gz-sekme { font-size: 1.05rem; }
  html[data-yas-bandi] .dok { min-height: var(--yb-ust); }
}
/* A: üst çubukta "Ben" avatarı; marka bağlantısı yedek yol olmasın */
.yb-ben { display: none; }
html[data-yas-bandi="a"] .yb-ben { grid-area: k; justify-self: end; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; border: 2px solid rgba(244, 217, 166, 0.55); background: var(--yuzey-2); padding: 0; }
html[data-yas-bandi="a"] .yb-ben:hover { border-color: var(--kum); }
html[data-yas-bandi="a"] .yb-ben .avatar { border: 0; --boy: 52px; }
html[data-yas-bandi="a"] .kip { display: none; }
html[data-yas-bandi="a"] .marka { pointer-events: none; }
html[data-yas-bandi="a"] .dok { padding-block: 6px; }
html[data-yas-bandi="a"] .ust-bolum { font-size: 1.15rem; }
.yb-ben-yaprak { display: grid; gap: 14px; justify-items: center; padding: 6px 0 2px; }
.yb-ses { gap: 10px; }
.yb-ses svg { width: 24px; height: 24px; }
html[data-yas-bandi="a"] .yb-ben-yaprak .avatar { --boy: 96px; }
html[data-yas-bandi="a"] .yaprak h3 { font-size: 1.7rem; text-align: center; }

/* A: koç ve rozet ekranlarında ayrı "Ana ekran" geri bağlantısı yok (aynı hedefe tek yol); alt sekme zaten var */
html[data-yas-bandi="a"] .koc-ust .ustbilgi > a.dugme-hayalet[href^="#/ogrenci/"]:not([href*="/soru/"]) { display: none; }

/* ---- ortak ana ekran parçaları ---- */
.yb-ana { display: grid; gap: 16px; width: 100%; max-width: 640px; margin: 0 auto; align-content: start; }
.yb-ust { display: flex; align-items: center; gap: 12px; }
.yb-metin { flex: 1; min-width: 0; }
.yb-metin p { color: var(--metin-yumusak); margin-top: 4px; max-width: var(--yb-olcu); }
.yb-metin .etiket { margin-bottom: 6px; }
.yb-bos { display: grid; gap: 6px; justify-items: center; text-align: center; padding: 28px 16px; border: 1px dashed var(--kenar-2); border-radius: var(--yb-yaricap); color: var(--soluk); }
.yb-bos b { color: var(--metin); font-family: var(--display); font-size: 1.15rem; }
.yb-serit { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--alan, var(--isik)); }
.yb-gunler { display: inline-flex; align-items: center; gap: 8px; }
.yb-gunler i { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 1.5px solid var(--kenar-3); flex: none; }
.yb-gunler i.yandi { background: var(--isik); border-color: var(--isik); box-shadow: 0 0 10px 1px rgba(91, 242, 230, 0.55); }
.yb-gunler i.bugun::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 1px dashed rgba(244, 217, 166, 0.6); }
.yb-bolum-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.yb-bolum-ust > span { color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-seffaf { margin-top: 4px; }

/* "Dinle" */
.yb-dinle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none; min-height: var(--yb-hedef); min-width: var(--yb-hedef); padding: 0 18px 0 14px; border-radius: 999px; border: 1.5px solid rgba(138, 124, 255, 0.6); background: rgba(138, 124, 255, 0.16); color: var(--metin); font: 600 calc(var(--yb-govde) - 1px)/1 var(--sans); letter-spacing: 0; }
.yb-dinle svg { width: calc(var(--yb-ikon) * 0.6); height: calc(var(--yb-ikon) * 0.6); }
.yb-dinle:hover { background: rgba(138, 124, 255, 0.26); }
.yb-dinle[aria-pressed="true"] { background: rgba(138, 124, 255, 0.36); border-color: var(--menekse); }
@media (prefers-reduced-motion: no-preference) { .yb-nabiz { animation: yb-nabiz 1.5s ease-in-out 2; } }
@keyframes yb-nabiz { 0%, 100% { box-shadow: 0 0 0 0 rgba(138, 124, 255, 0); } 50% { box-shadow: 0 0 0 8px rgba(138, 124, 255, 0.28); } }

/* açılır bölüm düğmesi */
.yb-ac { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: var(--yb-hedef); padding: 0 18px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar-2); background: var(--yuzey); color: var(--metin); font: 600 1rem/1.2 var(--sans); text-align: left; }
.yb-ac svg { width: 22px; height: 22px; flex: none; transition: transform var(--yb-gecis) var(--ease); }
.yb-ac[aria-expanded="true"] svg { transform: rotate(180deg); }
.yb-ac:hover { background: var(--yuzey-2); }
.yb-ac-alan { background: transparent; border-color: var(--kenar); }
.yb-tum { display: grid; gap: 14px; }
.yb-tum[hidden] { display: none; }
.yb-grup { display: grid; gap: var(--yb-bosluk); }
.yb-grup-ic { display: grid; gap: var(--yb-bosluk); }
.yb-grup-ad { display: flex; align-items: center; gap: 8px; color: var(--soluk); font-size: var(--yb-kucuk); margin-top: 6px; }

/* satır (tüm oyunlar listeleri) */
.yb-satir { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; min-height: var(--yb-hedef); padding: 8px 14px 8px 20px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar); background: color-mix(in srgb, var(--alan) 7%, var(--yuzey)); color: inherit; text-decoration: none; overflow: hidden; }
.yb-satir:hover { background: color-mix(in srgb, var(--alan) 12%, var(--yuzey-2)); border-color: var(--kenar-2); }
.yb-satir .yb-serit { width: 5px; }
.yb-satir-ad { display: grid; gap: 2px; min-width: 0; }
.yb-satir-ad b { font-weight: 600; }
.yb-satir-ad small { display: inline-flex; align-items: center; gap: 5px; color: var(--isik); }
.yb-satir-ad small svg, .yb-durum svg, .yb-meta svg { width: 16px; height: 16px; flex: none; }
.yb-satir-sag { color: var(--soluk); font-size: var(--yb-kucuk); white-space: nowrap; }

/* ---- A · Işık Yolu ---- */
html[data-yas-bandi="a"] .gorunum { padding-top: 10px; }
.yb-a { max-width: 560px; gap: 12px; }
.yb-a .yb-ust h1 { font-size: 1.75rem; }
.yb-a .yb-metin p { font-size: 1.15rem; margin-top: 2px; }
.yb-yol { position: relative; width: 100%; aspect-ratio: 328 / 340; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar-2); background: radial-gradient(120% 70% at 85% 0%, rgba(91, 242, 230, 0.1), transparent 62%), linear-gradient(180deg, #11264A, #0A1B35); overflow: hidden; }
.yb-yol-arka { position: absolute; inset: 0; width: 100%; height: 100%; }
.yb-dalga { stroke: rgba(91, 242, 230, 0.16); stroke-width: 2; }
.yb-iz { stroke: rgba(230, 238, 247, 0.3); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 1 12; }
.yb-iz-isik { stroke: var(--isik); stroke-width: 5; stroke-linecap: butt; filter: drop-shadow(0 0 5px rgba(91, 242, 230, 0.85)); }
.yb-ada { position: absolute; width: 38%; transform: translateX(-50%); display: grid; justify-items: center; align-content: start; gap: 3px; min-height: 96px; padding: 6px 4px 8px; border-radius: 24px; border: 1.5px solid color-mix(in srgb, var(--alan) 45%, transparent); background: color-mix(in srgb, var(--alan) 14%, rgba(11, 22, 39, 0.78)); color: var(--metin); text-decoration: none; text-align: center; }
.yb-ada[data-i="0"] { left: 27%; top: 2%; } .yb-ada[data-i="1"] { left: 73%; top: 31%; } .yb-ada[data-i="2"] { left: 27%; top: 60%; }
.yb-ada b { font: 700 1.02rem/1.12 var(--display); letter-spacing: 0; overflow-wrap: anywhere; padding-inline: 2px; }
.yb-tugla { display: block; width: 50px; }
.yb-tugla svg { width: 100%; height: auto; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.yb-ada:not(.tamam):not(.sirada) .yb-tugla svg { filter: saturate(0.75) drop-shadow(0 4px 6px rgba(0, 0, 0, 0.35)); }
.yb-ada.tamam { border-color: rgba(91, 242, 230, 0.7); background: color-mix(in srgb, var(--alan) 22%, rgba(11, 22, 39, 0.78)); box-shadow: 0 0 22px -4px color-mix(in srgb, var(--alan) 70%, transparent); }
.yb-ada.sirada { border: 2.5px solid var(--kum); background: color-mix(in srgb, var(--alan) 26%, rgba(11, 22, 39, 0.78)); box-shadow: 0 0 26px -2px rgba(244, 217, 166, 0.45); }
.yb-durum { display: inline-flex; align-items: center; gap: 5px; min-height: 26px; padding: 0 11px; border-radius: 999px; border: 1px solid var(--kenar-2); color: var(--metin-yumusak); font: 600 var(--yb-kucuk)/1 var(--sans); letter-spacing: 0; background: rgba(5, 11, 22, 0.5); }
.yb-ada.tamam .yb-durum { color: var(--isik); border-color: rgba(91, 242, 230, 0.6); }
.yb-ada.sirada .yb-durum { background: var(--kum); border-color: var(--kum); color: var(--murekkep); }
.yb-ada:hover { border-color: var(--kum); }
.yb-piril { position: absolute; width: 20%; aspect-ratio: 120 / 96; pointer-events: none; }
.yb-piril-svg { width: 100%; height: 100%; overflow: visible; }
.yb-piril[data-poz="0"] { left: 57%; top: 9%; } .yb-piril[data-poz="1"] { left: 30%; top: 39%; } .yb-piril[data-poz="2"] { left: 51%; top: 73%; } .yb-piril[data-poz="bitti"] { left: 50%; top: 72%; }
.yb-kule { position: absolute; right: 4%; bottom: 3%; width: 17%; pointer-events: none; }
.yb-kule svg { width: 100%; height: auto; }
.yb-a-alt { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.yb-a-alt .yb-gunler { gap: 7px; }
.yb-a-alt .yb-gunler i { width: 14px; height: 14px; }
.yb-a-son { display: grid; grid-template-columns: 1.1fr 1fr; gap: 10px; }
.yb-a-son > :only-child { grid-column: 1 / -1; }
.yb-buyuk { min-height: var(--yb-hedef); font-size: 1.12rem; padding-inline: 26px; }
.yb-a-son .yb-buyuk { min-height: 76px; padding-inline: 12px; font-size: 1.05rem; }
@media (prefers-reduced-motion: no-preference) {
  .yb-a .yb-piril:not([data-poz="bitti"]) { animation: yb-suz 2.4s ease-in-out infinite; }
  .yb-a .yb-piril .yb-halo { animation: yb-parla 2.4s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .yb-b .yb-piril { animation: yb-nefes 3s ease-in-out infinite; }
}
@keyframes yb-suz { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
@keyframes yb-parla { 0%, 100% { opacity: 0.55; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.08); } }
@keyframes yb-nefes { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.03) translateY(-2px); } }

/* ---- B · Fener ---- */
.yb-b { max-width: 600px; gap: 14px; }
.yb-dinle.yb-kucuk { min-height: var(--yb-hedef); padding: 0 14px 0 10px; font-size: var(--yb-kucuk); }
.yb-b-sahne { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: start; }
.yb-fener { position: relative; display: grid; justify-items: center; gap: 6px; }
.yb-kat { justify-self: center; padding: 4px 12px; border-radius: 999px; border: 1px solid rgba(244, 217, 166, 0.5); background: rgba(244, 217, 166, 0.1); color: var(--kum); font: 600 var(--yb-kucuk)/1.2 var(--sans); }
.yb-fener-gorsel svg { width: 104px; height: auto; }
.yb-b .yb-fener .yb-piril { left: auto; right: -14px; top: auto; bottom: 30px; width: 58px; }
.yb-kat-cubuk { width: 100%; height: 8px; border-radius: 999px; background: var(--yuzey-2); border: 1px solid var(--kenar); overflow: hidden; }
.yb-kat-cubuk i { display: block; height: 100%; width: var(--oran, 0%); background: linear-gradient(90deg, var(--kum-koyu), var(--kum)); border-radius: inherit; }
.yb-b-gorev h2 { margin-bottom: 10px; font-size: 1.2rem; }
.yb-b-kartlar { display: grid; gap: var(--yb-bosluk); }
.yb-b-kart { position: relative; display: grid; gap: 4px; align-content: center; min-height: var(--yb-hedef-ana); padding: 10px 14px 10px 20px; border-radius: var(--yb-yaricap); border: 1px solid color-mix(in srgb, var(--alan) 35%, var(--kenar)); background: color-mix(in srgb, var(--alan) 10%, var(--yuzey)); color: var(--metin); text-decoration: none; overflow: hidden; }
.yb-b-kart .yb-serit { width: 6px; }
.yb-b-kart b { font: 700 1.06rem/1.15 var(--display); letter-spacing: 0; }
.yb-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--metin-yumusak); font-size: var(--yb-kucuk); }
.yb-b-kart.tamam .yb-meta { color: var(--isik); }
.yb-b-kart.tamam { border-color: rgba(91, 242, 230, 0.5); }
.yb-b-kart:hover, .yb-c-kart:hover { border-color: var(--kum); }
.yb-b-alt { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.yb-rozet-gun { display: inline-flex; align-items: center; gap: 6px; color: var(--kum); font-weight: 600; font-size: var(--yb-kucuk); }
.yb-rozet-gun svg { width: 18px; height: 18px; }
.yb-sor { display: flex; align-items: center; gap: 14px; min-height: var(--yb-hedef); padding: 10px 16px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar-2); background: var(--yuzey); color: inherit; text-decoration: none; }
.yb-sor b { display: block; font-weight: 600; } .yb-sor small { display: block; color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-sor-ikon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--yuzey-2); color: var(--isik); flex: none; }
.yb-sor-ikon svg { width: 22px; height: 22px; }
.yb-sor .sayi-rozet { margin-left: auto; }
.yb-ac-genis { margin-top: 2px; }

/* ---- C · Sefer Panosu ---- */
.yb-c { gap: 14px; }
.yb-c .yb-ust { gap: 10px; }
.yb-c .yb-ust h1 { font-size: 1.8rem; }
.yb-mini { position: static; width: 38px; flex: none; }
.yb-seviye { flex: none; }
.yb-hafta { display: grid; gap: 10px; padding: var(--yb-kart-ic); border-radius: var(--yb-yaricap); border: 1px solid var(--kenar); background: var(--yuzey); }
.yb-hafta-ust { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.yb-hafta-ust b { font: 700 1.05rem/1.1 var(--display); letter-spacing: -0.01em; }
.yb-hafta-ust span { color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-gunler.yb-cubuk { gap: 6px; }
.yb-hafta-alt { display: flex; justify-content: space-between; color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-c-bolum { display: grid; gap: 8px; }
.yb-c-sec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--yb-bosluk); }
.yb-c-kart { position: relative; display: flex; align-items: center; gap: 12px; min-height: var(--yb-hedef-ana); padding: 12px 14px 12px 20px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar-2); background: var(--yuzey); color: var(--metin); text-decoration: none; overflow: hidden; }
.yb-c-kart.ana { min-height: 84px; background: color-mix(in srgb, var(--alan) 8%, var(--yuzey)); }
.yb-c-ad { display: grid; gap: 3px; min-width: 0; flex: 1; }
.yb-c-ad b { font: 700 1.05rem/1.15 var(--display); letter-spacing: -0.01em; }
.yb-c-ad small { display: inline-flex; align-items: center; gap: 5px; color: var(--soluk); font-size: var(--yb-kucuk); flex-wrap: wrap; }
.yb-c-ad small svg { width: 15px; height: 15px; }
.yb-c-kart.tamam small { color: var(--isik); }
.yb-basla { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 20px; border-radius: 999px; background: var(--kum); color: var(--murekkep); font: 600 1rem/1 var(--sans); }
.yb-c-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
.yb-c-beceri { display: grid; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--kenar); background: var(--zemin-2); font-size: var(--yb-kucuk); color: var(--metin-yumusak); }
.yb-hucreler { display: flex; gap: 4px; }
.yb-hucreler i { flex: 1; height: 10px; border-radius: 3px; background: var(--yuzey-3); }
.yb-hucreler i.dolu { background: var(--alan); }

/* ---- D · Atölye ---- */
.yb-d, .yb-e { gap: 18px; }
.yb-ozet { display: grid; justify-items: end; gap: 2px; text-align: right; }
.yb-ozet small { color: var(--soluk); }
.yb-ozet b { font: 600 1.5rem/1 var(--display); letter-spacing: -0.03em; color: var(--isik); }
.yb-d-liste, .yb-e-liste { display: grid; gap: var(--yb-bosluk); }
.yb-d-satir, .yb-e-satir { position: relative; display: grid; align-items: center; gap: 12px; min-height: var(--yb-hedef-ana); padding: 8px 14px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin); text-decoration: none; }
.yb-d-satir { grid-template-columns: 30px 1fr auto 24px; }
.yb-e-satir { grid-template-columns: 26px 1fr auto; min-height: var(--yb-hedef); }
.yb-d-satir:hover, .yb-e-satir:hover { border-color: var(--kenar-3); background: var(--yuzey-2); }
.yb-no { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: color-mix(in srgb, var(--alan) 26%, var(--yuzey-2)); color: var(--metin); font: 600 0.95rem/1 var(--display); }
.yb-no svg { width: 16px; height: 16px; color: var(--isik); }
.yb-d-dk { color: var(--soluk); font-size: var(--yb-kucuk); white-space: nowrap; }
.yb-git { color: var(--kum); display: grid; place-items: center; }
.yb-git svg { width: 20px; height: 20px; }
.yb-d-satir.tamam, .yb-e-satir.tamam { background: transparent; }
.yb-d-satir.tamam b, .yb-e-satir.tamam b { color: var(--soluk); font-weight: 500; }
.yb-d-kendi { display: inline-flex; align-items: center; min-height: var(--yb-hedef); margin-top: 12px; padding: 0 4px; color: var(--isik); text-decoration: none; font-weight: 600; }
.yb-d-kendi::before { content: "+"; margin-right: 8px; font-size: 1.2em; }
.yb-halkalar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yb-halka-kap { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar); background: var(--yuzey); color: var(--metin-yumusak); font-size: var(--yb-kucuk); line-height: 1.25; }
.yb-halka { width: 64px; height: 64px; flex: none; }
.yb-koc { display: flex; align-items: center; gap: 14px; min-height: var(--yb-hedef-ana); padding: 10px 16px; border-radius: var(--yb-yaricap); border: 1px solid rgba(138, 124, 255, 0.4); background: rgba(138, 124, 255, 0.1); color: var(--metin); text-decoration: none; }
.yb-koc b { display: block; font-weight: 600; } .yb-koc small { display: block; color: var(--metin-yumusak); font-size: var(--yb-kucuk); }
.yb-nokta-koc { width: 12px; height: 12px; border-radius: 50%; background: var(--menekse); box-shadow: 0 0 12px 1px rgba(138, 124, 255, 0.6); flex: none; }
.yb-d-hafta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--metin-yumusak); font-size: var(--yb-kucuk); }
.yb-d-hafta .yb-gunler { gap: 7px; }

/* ---- E · Odak ---- */
.yb-basla-e { min-height: var(--yb-hedef-ana); padding: 0 24px; }
.yb-hazir { display: inline-flex; align-items: center; gap: 6px; color: var(--isik); font-weight: 600; }
.yb-hazir svg { width: 18px; height: 18px; }
.yb-kutu { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--kenar-3); color: var(--murekkep); flex: none; }
.yb-kutu.dolu { background: var(--isik); border-color: var(--isik); }
.yb-kutu svg { width: 14px; height: 14px; }
.yb-e-harita { display: grid; gap: 4px; }
.yb-e-beceri { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) auto; grid-template-areas: "ad cubuk yuzde" "son son son"; align-items: center; gap: 2px 12px; padding: 10px 0; border-top: 1px solid var(--kenar); }
.yb-e-ad { grid-area: ad; font-weight: 500; }
.yb-e-cubuk { grid-area: cubuk; height: 8px; border-radius: 99px; background: var(--yuzey-2); overflow: hidden; }
.yb-e-cubuk i { display: block; height: 100%; width: var(--oran); background: var(--alan); border-radius: inherit; }
.yb-e-beceri b { grid-area: yuzde; font: 600 1rem/1 var(--display); letter-spacing: -0.02em; }
.yb-e-beceri small { grid-area: son; color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-ayr { display: grid; gap: 14px; }
.yb-ayr[hidden] { display: none; }
.yb-basarim { display: grid; }
.yb-basarim-satir { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 12px; min-height: var(--yb-hedef); padding: 8px 0; border-top: 1px solid var(--kenar); }
.yb-basarim-satir small { display: block; color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-basarim-satir:not(.var) b { color: var(--soluk); font-weight: 500; }

/* ---- tüm oyunlar sayfası ---- */
.yb-geri { justify-self: start; margin-left: -12px; }
.yb-ev { display: inline-flex; align-items: center; gap: 10px; justify-self: start; min-height: 64px; padding: 0 22px 0 16px; border-radius: 999px; border: 1.5px solid var(--kenar-3); color: var(--metin); text-decoration: none; font: 600 1.15rem/1 var(--sans); }
.yb-ev svg { width: 30px; height: 30px; }
.yb-harita { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yb-kutu-oyun { position: relative; display: grid; justify-items: center; align-content: center; gap: 4px; min-height: 120px; padding: 12px 8px; border-radius: var(--yb-yaricap); border: 1.5px solid color-mix(in srgb, var(--alan, var(--menekse)) 45%, transparent); background: color-mix(in srgb, var(--alan, var(--menekse)) 14%, var(--yuzey)); color: var(--metin); text-decoration: none; text-align: center; }
.yb-kutu-oyun b { font: 700 1.05rem/1.15 var(--display); letter-spacing: 0; overflow-wrap: anywhere; }
.yb-kutu-oyun .yb-tugla { width: 56px; }
.yb-kutu-oyun.tamam { border-color: rgba(91, 242, 230, 0.7); }
.yb-kutu-oyun.tamam .yb-durum { color: var(--isik); border-color: rgba(91, 242, 230, 0.6); }
.yb-kutu-sor .yb-tugla { width: 44px; height: 44px; color: var(--isik); }
.yb-chips { display: flex; flex-wrap: wrap; gap: var(--yb-bosluk); }
.yb-chips .secici-dugme[data-yb-alan]:not([data-yb-alan=""]) { border-color: color-mix(in srgb, var(--alan) 55%, var(--kenar-2)); }
.yb-liste { display: grid; gap: var(--yb-bosluk); }
.yb-liste .yb-satir[hidden] { display: none; }
.yb-ara { position: relative; display: block; }
.yb-ara svg { position: absolute; left: 14px; top: 50%; width: 20px; height: 20px; transform: translateY(-50%); color: var(--soluk); pointer-events: none; }
.yb-ara input { width: 100%; min-height: var(--yb-hedef); padding: 0 16px 0 44px; border-radius: var(--yb-yaricap); border: 1px solid var(--kenar-2); background: var(--yuzey); color: var(--metin); font: 400 var(--yb-govde)/1.2 var(--sans); }
.yb-ara input:focus { outline: none; border-color: var(--isik); box-shadow: 0 0 0 3px rgba(91, 242, 230, 0.18); }
.yb-oyunlar.yb-a { gap: 14px; }

/* ---- rozetler: albüm (A/B) · ustalık işaretleri (D) ---- */
.yb-sayfa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.yb-b .yb-sayfa, .yb-album.yb-b .yb-sayfa { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.yb-cikartma { display: grid; justify-items: center; align-content: center; gap: 8px; min-height: 120px; padding: 14px 8px; border-radius: var(--yb-yaricap); border: 1.5px solid color-mix(in srgb, var(--k) 55%, transparent); background: color-mix(in srgb, var(--k) 14%, var(--yuzey)); text-align: center; }
.yb-cikartma b { font: 700 1.02rem/1.15 var(--display); letter-spacing: 0; }
.yb-cikartma small { color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-madalya { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE8B8, var(--kum-koyu) 60%, #B98F45); color: var(--murekkep); box-shadow: 0 6px 18px -8px rgba(244, 217, 166, 0.7); }
.yb-madalya svg { width: 28px; height: 28px; }
.yb-cikartma.bos { border-style: dashed; border-color: var(--kenar-2); background: transparent; }
.yb-cikartma.bos .yb-madalya { background: var(--zemin-2); color: var(--soluk); box-shadow: inset 0 0 0 1px var(--kenar-2); opacity: 0.7; }
.yb-cikartma.bos b { color: var(--soluk); }
.yb-isaretler { display: grid; gap: var(--yb-bosluk); }
.yb-isaret { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--yb-yaricap); border: 1px dashed var(--kenar-2); }
.yb-isaret.var { border-style: solid; border-color: var(--kenar); background: var(--yuzey); }
.yb-isaret .yb-madalya { width: 40px; height: 40px; }
.yb-isaret .yb-madalya svg { width: 20px; height: 20px; }
.yb-isaret:not(.var) .yb-madalya { background: var(--zemin-2); color: var(--soluk); box-shadow: inset 0 0 0 1px var(--kenar-2); }
.yb-isaret:not(.var) b { color: var(--soluk); font-weight: 500; }
.yb-isaret small { display: block; color: var(--soluk); font-size: var(--yb-kucuk); }
.yb-isaret .yb-durum { background: transparent; }

@media (min-width: 721px) {
  .yb-a { max-width: 520px; }
  .yb-a .yb-yol { width: min(100%, calc((100dvh - 300px) * 0.96)); margin-inline: auto; }
  html[data-yas-bandi="a"] .gorunum { padding-top: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .yb-nabiz, .yb-piril, .yb-piril .yb-halo { animation: none !important; }
}

/* ---- sonuç ekranı: bant dili ---- */
.sonuc[data-bant] .sonuc-veri { display: none; }
.sonuc[data-bant="a"] .xp-sayac, .sonuc[data-bant="e"] .xp-sayac { display: none; }
.sonuc[data-bant="d"] .kule-sahne, .sonuc[data-bant="e"] .kule-sahne { display: none; }
.sonuc[data-bant="b"] .xp-sayac b { font-size: 2.6rem; }
.sonuc[data-bant="d"] .xp-sayac b { font-size: 1.8rem; color: var(--metin); }
.sonuc[data-bant] .xp-sayac span { text-transform: none; letter-spacing: 0; font-size: var(--yb-kucuk); }
.sonuc[data-bant="a"] .sonuc h1, .sonuc[data-bant="a"] h1 { font-size: 2.1rem; }
.sonuc[data-bant] .eylemler { width: 100%; max-width: 440px; flex-direction: column; align-items: stretch; margin-inline: auto; }
.sonuc[data-bant="a"] .eylemler .dugme { min-height: 88px; font-size: 1.2rem; }
.sonuc[data-bant="a"] .eylemler .dugme-ikincil { min-height: 64px; font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
  .sonuc[data-bant] .kule-tugla.yeni { animation-duration: calc(var(--yb-odul) - 250ms); animation-delay: 200ms; }
  .sonuc[data-bant] .kule-sahne.yerlesti::before { animation-duration: 600ms; animation-delay: calc(var(--yb-odul) - 700ms); }
}
.sonuc[data-bant="a"] { gap: 14px; padding-top: 10px; padding-bottom: 24px; }
.sonuc[data-bant="a"] .kule-sahne { height: 200px; }
@media (max-width: 720px) {
  html[data-yas-bandi="a"] .uygulama[data-gz]:not([data-gz=""]) .gorunum:not(:has(> .sonuc)) { padding-bottom: calc(var(--alt-yuk) + 6px); }
}

/* koç: rol çipleri ve öneriler arası boşluk bant belirtecinden; A'da rol seçici yok (tek "Koç") */
html[data-yas-bandi] .roller, html[data-yas-bandi] .oneriler { gap: var(--yb-bosluk); }
html[data-yas-bandi] .konusma { padding-bottom: 24px; }
html[data-yas-bandi] .koc-bos { max-width: var(--yb-olcu); }
html[data-yas-bandi="a"] .roller { display: none; }
html[data-yas-bandi] .oneri { padding-inline: 16px; }
html[data-yas-bandi] .mesaj-form { gap: var(--yb-bosluk); }
html[data-yas-bandi] .koc-bos { padding-bottom: 36px; }
html[data-yas-bandi="b"] .koc-bos, html[data-yas-bandi="a"] .koc-bos { padding-top: 4px; gap: 8px; }
html[data-yas-bandi="b"] .konusma, html[data-yas-bandi="a"] .konusma { padding-top: 10px; }
html[data-yas-bandi="a"] .koc-ust, html[data-yas-bandi="b"] .koc-ust { padding-top: 6px; padding-bottom: 8px; gap: 8px; }

/* soru çalışma ve listeler: bant boşluğu */
html[data-yas-bandi] :is(.soru-satirlar, .set-kartlar, .calisma, .calisma-eylem, .cocuklar) { gap: var(--yb-bosluk); }
html[data-yas-bandi] .calisma-bolum { border-radius: var(--yb-yaricap); padding: var(--yb-kart-ic); }
html[data-yas-bandi] .veri dd a { display: inline-flex; align-items: center; min-height: var(--yb-hedef); }
html[data-yas-bandi] .segmentler { gap: var(--yb-bosluk); }

/* A: tuğlanın altındaki ışık halesi (ada zemini) */
.yb-pad { position: absolute; left: 50%; top: 30px; width: 78px; height: 24px; margin-left: -39px; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--alan) 50%, transparent), transparent); pointer-events: none; }
.yb-ada.tamam .yb-pad { background: radial-gradient(closest-side, color-mix(in srgb, var(--alan) 80%, transparent), transparent); }
.yb-ada > :not(.yb-pad) { position: relative; }
html[data-yas-bandi="a"] .yaprak-eylem { justify-content: center; }

/* menü — A: "Ben" avatarı etiketli; bantlara göre şerit ölçüleri */
html[data-yas-bandi="a"] .yb-ben { width: auto; height: auto; min-width: 64px; min-height: 64px; border-radius: 24px; padding: 4px 10px 3px; gap: 0; grid-auto-flow: row; }
html[data-yas-bandi="a"] .yb-ben .avatar { --boy: 44px; }
.yb-ben-ad { font: 750 0.78rem/1.1 var(--sans); color: var(--kum); letter-spacing: 0.02em; }
html[data-yas-bandi="a"] .nb-ad { font-size: clamp(1.5rem, 6vw, 1.9rem); }
html[data-yas-bandi="b"] .nb-ad { font-size: clamp(1.3rem, 5vw, 1.6rem); }
html[data-yas-bandi="a"] .nb-geri { min-height: 64px; min-width: 64px; font-size: 1.1rem; }
html[data-yas-bandi="b"] .nb-geri { min-height: 56px; font-size: 1.02rem; }
html[data-yas-bandi="a"] .nb-yardim { min-height: 64px; font-size: 1.02rem; }
html[data-yas-bandi="b"] .nb-yardim { min-height: 56px; }
html[data-yas-bandi="d"] .nb-ad, html[data-yas-bandi="e"] .nb-ad { font-size: clamp(1.1rem, 4vw, 1.3rem); }
html[data-yas-bandi="e"] .nb-geri, html[data-yas-bandi="e"] .nb-yardim { min-height: 44px; }
html[data-yas-bandi="d"] .nb-yardim, html[data-yas-bandi="e"] .nb-yardim { background: transparent; border-color: var(--kenar-2); color: var(--metin-yumusak); font-weight: 500; }
html[data-yas-bandi] .uygulama[data-gz="ogrenci"] .gz-sekme { font-size: max(var(--yb-kucuk, 14px), 0.8rem); }