/* Temel stiller ve bileşenler (PROJE.md 11). Mobil öncelikli, jeton tabanlı. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--renk-zemin);
  color: var(--renk-metin);
  font-family: var(--yazi-aile);
  font-size: var(--yazi-govde);
  font-weight: 500;
  line-height: var(--satir-arasi);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p { margin: 0; }
a { color: var(--renk-vurgu); font-weight: 700; }
button, input { font: inherit; color: inherit; }
strong { font-weight: 800; }
[hidden] { display: none !important; }

:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 3px; }

.atla {
  position: absolute; left: var(--bosluk-4); top: -100px; z-index: 10;
  background: var(--renk-yuzey); padding: var(--bosluk-2) var(--bosluk-3); border-radius: var(--kose-kucuk);
}
.atla:focus { top: var(--bosluk-4); }

.gorunmez {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Yerleşim ---------- */
.sayfa {
  width: 100%;
  max-width: var(--icerik-genislik);
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  padding: max(var(--bosluk-5), env(safe-area-inset-top)) max(var(--bosluk-5), env(safe-area-inset-right))
           max(var(--bosluk-6), env(safe-area-inset-bottom)) max(var(--bosluk-5), env(safe-area-inset-left));
  display: flex;
  flex-direction: column;
  gap: var(--bosluk-5);
}
.sayfa--ortali { justify-content: center; }
.itici { flex-grow: 1; }
.yigin { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.yigin--genis { gap: var(--bosluk-5); }
.ortali { text-align: center; align-items: center; }
.dikey-orta { justify-content: center; }

/* Üst çubuk: geri + ilerleme */
.ust-cubuk { display: flex; align-items: center; gap: var(--bosluk-4); }
.geri {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: var(--dokunma-min); height: var(--dokunma-min);
  border-radius: 14px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  color: var(--renk-metin);
}
.ilerleme { flex-grow: 1; height: 12px; border-radius: var(--kose-tam); background: var(--renk-cizgi); overflow: hidden; }
.ilerleme__dolu { display: block; height: 100%; border-radius: var(--kose-tam); background: var(--renk-nane); }
.ilerleme__dolu--1 { width: 20%; } .ilerleme__dolu--2 { width: 40%; } .ilerleme__dolu--3 { width: 60%; }
.ilerleme__dolu--4 { width: 80%; } .ilerleme__dolu--5 { width: 95%; }

/* ---------- Yazı ---------- */
.baslik-1, .baslik-2 { font-family: var(--yazi-baslik-aile); font-weight: 800; line-height: 1.15; letter-spacing: -0.005em; }
.baslik-1 { font-size: var(--yazi-baslik-1); }
.baslik-2 { font-size: var(--yazi-baslik-2); }
.marka { display: inline-flex; align-items: center; gap: 10px; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem; line-height: 1.1; color: var(--renk-vurgu); text-decoration: none; }
.marka__logo { display: block; flex: 0 0 44px; width: 44px; height: 44px; }
.marka__slogan { display: block; font-size: 0.75rem; font-weight: 700; color: var(--renk-metin-soluk); }
.metin-soluk { color: var(--renk-metin-soluk); }
.metin-kucuk { font-size: var(--yazi-kucuk); }
.metin-ortali { text-align: center; }
/* Tek başına duran küçük bağlantılar da parmakla rahat basılsın (≥44 px) */
.dokunma-baglanti { display: inline-flex; align-items: center; min-height: var(--dokunma-min); align-self: flex-start; }

/* ---------- Buton ---------- */
.buton {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-3);
  min-height: var(--buton-yukseklik);
  padding: var(--bosluk-3) var(--bosluk-5);
  border: 0;
  border-radius: 18px;
  font-weight: 800; font-size: var(--yazi-buyuk);
  text-decoration: none;
  cursor: pointer;
  background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri);
  box-shadow: 0 var(--kabarti) 0 var(--renk-vurgu-koyu);
  transition: transform var(--gecis), box-shadow var(--gecis), background-color var(--gecis);
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.buton:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--renk-vurgu-koyu); }
.buton--tam { width: 100%; }
.buton--ikincil {
  background: var(--renk-yuzey); color: var(--renk-metin);
  border: 2px solid var(--renk-cizgi-koyu); box-shadow: 0 4px 0 var(--renk-cizgi-koyu);
  font-size: var(--yazi-govde); min-height: 56px;
}
.buton--ikincil:active { box-shadow: 0 1px 0 var(--renk-cizgi-koyu); }
.buton--gunes { background: var(--renk-gunes); color: var(--renk-gunes-uzeri); box-shadow: 0 var(--kabarti) 0 var(--renk-gunes-koyu); }
.buton--gunes:active { box-shadow: 0 2px 0 var(--renk-gunes-koyu); }
.buton:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }
.buton-metin {
  background: none; border: 0; padding: var(--bosluk-2); min-height: var(--dokunma-min);
  color: var(--renk-vurgu); font-weight: 800; cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Form ---------- */
.form { display: flex; flex-direction: column; gap: var(--bosluk-5); }
.alan { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.alan__etiket { font-weight: 800; font-size: var(--yazi-orta); }
.alan__girdi {
  width: 100%;
  min-height: 56px;
  padding: 0 var(--bosluk-4);
  border: 2px solid var(--renk-cizgi-koyu);
  border-radius: var(--kose);
  background: var(--renk-yuzey);
  color: var(--renk-metin);
  font-weight: 700;
  font-size: max(16px, var(--yazi-govde)); /* iOS odak yakınlaşmasını önler */
  transition: border-color var(--gecis), box-shadow var(--gecis);
}
.alan__girdi:focus { outline: none; border-color: var(--renk-vurgu); box-shadow: 0 0 0 4px var(--renk-vurgu-acik); }
.alan__girdi--buyuk { min-height: 60px; font-size: 1.25rem; border-radius: 18px; }
.alan--hata .alan__girdi { border-color: var(--renk-hata); }
.alan__hata { color: var(--renk-hata); font-size: var(--yazi-kucuk); font-weight: 700; }
.alan__ipucu { color: var(--renk-metin-soluk); font-size: var(--yazi-kucuk); }
.parola { position: relative; }
.parola .alan__girdi { padding-right: 56px; }
.parola__goster {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: var(--dokunma-min); height: var(--dokunma-min);
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: var(--kose-kucuk); background: transparent; color: var(--renk-metin-soluk); cursor: pointer;
}
.onay { display: flex; gap: var(--bosluk-3); align-items: flex-start; font-size: var(--yazi-kucuk); line-height: 1.45; cursor: pointer; }
.onay input { width: 24px; height: 24px; margin: 0; flex-shrink: 0; accent-color: var(--renk-vurgu); }
.onay--soluk { color: var(--renk-metin-soluk); }

/* Doğrulama kodu */
.kod-girdi {
  text-align: center;
  font-family: var(--yazi-baslik-aile);
  font-weight: 800;
  font-size: 2rem;
  letter-spacing: 0.4em;
  padding-left: 0.4em; /* son harf aralığını dengeler */
  min-height: 72px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Seçim kutuları (radyo) ---------- */
.secim-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-3); border: 0; margin: 0; padding: 0; min-width: 0; }
.secim-izgara--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.secim { position: relative; display: block; cursor: pointer; }
.secim input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.secim__kutu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 96px; border-radius: var(--kose-buyuk);
  background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); box-shadow: 0 4px 0 var(--renk-cizgi);
  transition: transform var(--gecis), background-color var(--gecis), border-color var(--gecis);
}
.secim__kutu--kucuk { min-height: 72px; border-radius: 20px; }
.secim__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 2.25rem; line-height: 1; }
.secim__alt { font-size: var(--yazi-orta); font-weight: 700; color: var(--renk-metin-soluk); }
.secim input:checked + .secim__kutu { background: var(--renk-vurgu-acik); border: 3px solid var(--renk-vurgu); box-shadow: 0 4px 0 var(--renk-vurgu); color: var(--renk-secili-metin); }
.secim input:checked + .secim__kutu .secim__alt { color: var(--renk-secili-metin); font-weight: 800; }
.secim input:focus-visible + .secim__kutu { outline: 3px solid var(--renk-odak); outline-offset: 3px; }
.secim:active .secim__kutu { transform: translateY(2px); }

/* Öneri çipleri */
.cipler { display: flex; flex-wrap: wrap; gap: var(--bosluk-2); }
.cip {
  min-height: var(--dokunma-min); padding: 0 var(--bosluk-4);
  border-radius: var(--kose-tam); background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  font-weight: 700; font-size: var(--yazi-orta); cursor: pointer;
}

/* ---------- Uyarı kutuları ---------- */
.uyari { display: flex; gap: var(--bosluk-3); align-items: flex-start; padding: var(--bosluk-3) var(--bosluk-4); border-radius: 18px; font-size: var(--yazi-orta); line-height: 1.45; }
.uyari svg { flex-shrink: 0; margin-top: 1px; }
.uyari--dikkat { background: var(--renk-dikkat-zemin); color: var(--renk-dikkat-metin); }
.uyari--hata { background: var(--renk-hata-zemin); color: var(--renk-hata); font-weight: 700; }
.uyari--basari { background: var(--renk-basari-zemin); color: var(--renk-basari); font-weight: 700; }
.uyari--bilgi { background: var(--renk-bilgi-zemin); }
.not-kutusu { display: flex; gap: var(--bosluk-3); align-items: center; padding: var(--bosluk-3) var(--bosluk-4); border-radius: var(--kose); background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); }
.not-kutusu svg { flex-shrink: 0; color: var(--renk-vurgu); }

/* ---------- Kart ---------- */
.kart { background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); border-radius: var(--kose-buyuk); padding: var(--bosluk-5); display: flex; flex-direction: column; gap: var(--bosluk-3); }

/* ---------- Maskot ve süsler ---------- */
.maskot { width: 176px; height: 176px; }
.maskot--kucuk { width: 132px; height: 112px; }
.ikon-kutu { width: 88px; height: 88px; border-radius: 28px; background: var(--renk-vurgu-acik); color: var(--renk-vurgu); display: flex; align-items: center; justify-content: center; }
.avatar { width: 44px; height: 44px; }

/* Karşılama zemin süsleri */
.sus-alani { position: relative; overflow: hidden; }
.sus { position: absolute; border-radius: 50%; z-index: -1; pointer-events: none; }
.sus--1 { top: -60px; right: -70px; width: 220px; height: 220px; background: var(--renk-gunes); opacity: 0.35; }
.sus--2 { bottom: 150px; left: -90px; width: 200px; height: 200px; background: var(--renk-vurgu); opacity: 0.12; }

/* Kutlama ekranı */
.kutlama { background: var(--renk-vurgu); color: #FFFFFF; }
.kutlama .metin-soluk { color: #E6E0FF; }
.rozetler { display: flex; gap: var(--bosluk-3); justify-content: center; }
.rozet { display: flex; flex-direction: column; align-items: center; padding: var(--bosluk-3) 18px; border-radius: 18px; background: rgb(0 0 0 / 0.14); }
.rozet__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.625rem; line-height: 1; }
.rozet__ad { font-size: 0.8125rem; font-weight: 700; color: #E6E0FF; }

/* Profil listesi */
.profil-liste { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-4); list-style: none; margin: 0; padding: 0; }
.profil {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-2);
  padding: var(--bosluk-5) var(--bosluk-3); border-radius: var(--kose-buyuk);
  background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); box-shadow: 0 4px 0 var(--renk-cizgi);
  font-weight: 800; cursor: pointer;
}
.profil .avatar { width: 72px; height: 72px; }
.profil__sinif { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }

/* ---------- Geniş ekran (tablet, masaüstü) ----------
 * Telefon düzeni aynen korunur; sayfa ortada, gölgeli bir "cihaz kartı" olur.
 * Böylece her ekran tek bir tasarımla bakımı kolay kalır. */
@media (min-width: 768px) {
  body {
    display: grid;
    place-items: center;
    padding: var(--bosluk-6) var(--bosluk-4);
    background: var(--renk-sahne);
    overflow-x: hidden;
  }
  body::before, body::after {
    content: ''; position: fixed; z-index: -1; border-radius: 50%; pointer-events: none;
  }
  body::before { width: 460px; height: 460px; top: -160px; right: -120px; background: var(--renk-gunes); opacity: 0.35; }
  body::after { width: 400px; height: 400px; bottom: -160px; left: -120px; background: var(--renk-vurgu); opacity: 0.12; }
  .sayfa {
    min-height: min(780px, calc(100dvh - 64px));
    max-width: 520px;
    padding: var(--bosluk-7) var(--bosluk-7) var(--bosluk-6);
    background: var(--renk-zemin);
    border: 2px solid var(--renk-cizgi);
    border-radius: 36px;
    box-shadow: 0 30px 80px rgb(31 26 61 / 0.10);
  }
  .kutlama { background: var(--renk-vurgu-koyu); }
  .kutlama::before { opacity: 0.25; }
  .kutlama::after { background: #FFFFFF; opacity: 0.08; }
  .kutlama .sayfa { background: var(--renk-vurgu); border-color: transparent; }
}

@media (hover: hover) {
  .buton:not(.buton--ikincil):not(.buton--gunes):hover { background: var(--renk-vurgu-koyu); }
  .buton--ikincil:hover, .cip:hover, .profil:hover { border-color: var(--renk-vurgu); }
  .secim:hover .secim__kutu { border-color: var(--renk-vurgu); }
}

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

/* ================= Test çözme (PROJE.md 6, K42) ================= */
.kalin { font-weight: 800; }
.baslik-3 { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: var(--yazi-baslik-3); line-height: 1.2; }
.soluk-baglanti { color: var(--renk-metin-soluk); font-weight: 700; }
.yigin--sik { gap: var(--bosluk-1); }
.ilerleme__dolu--0y { width: 0; } .ilerleme__dolu--10y { width: 10%; } .ilerleme__dolu--20y { width: 20%; }
.ilerleme__dolu--30y { width: 30%; } .ilerleme__dolu--40y { width: 40%; } .ilerleme__dolu--50y { width: 50%; }
.ilerleme__dolu--60y { width: 60%; } .ilerleme__dolu--70y { width: 70%; } .ilerleme__dolu--80y { width: 80%; }
.ilerleme__dolu--90y { width: 90%; } .ilerleme__dolu--100y { width: 100%; }

.yildiz { fill: var(--renk-cizgi-koyu); flex-shrink: 0; }
.yildiz--dolu { fill: var(--renk-gunes); }
.yildizlar { display: inline-flex; gap: 2px; flex-shrink: 0; }

/* Harita üst bilgi */
.ust-bilgi { display: flex; align-items: center; gap: var(--bosluk-3); }
.ust-bilgi__avatar { display: flex; width: 52px; height: 52px; flex-shrink: 0; border-radius: 16px; overflow: hidden; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
.ust-bilgi__avatar svg { width: 100%; height: 100%; }
.ust-bilgi__ad { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ust-bilgi__isim { font-weight: 800; font-size: var(--yazi-buyuk); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.puan-hap, .sayac-hap {
  display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0;
  padding: 8px 12px; border-radius: var(--kose-tam);
  background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  font-weight: 800; font-variant-numeric: tabular-nums;
}
.sayac-hap svg { color: var(--renk-vurgu); }
.sayac-hap--az { background: var(--renk-hata-zemin); border-color: var(--renk-hata); color: var(--renk-hata); }
.sayac-hap--az svg { color: var(--renk-hata); }
.seviye-kart { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.seviye-kart__ust { display: flex; justify-content: space-between; font-weight: 800; }
.seviye-kart .ilerleme { flex-grow: 0; }
.seviye-kart .ilerleme__dolu { background: var(--renk-gunes); }

/* Test listesi */
.test-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.test-kart {
  display: flex; align-items: center; gap: var(--bosluk-3);
  min-height: 72px; padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  box-shadow: 0 4px 0 var(--renk-cizgi); color: var(--renk-metin); text-decoration: none;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
a.test-kart:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--renk-cizgi); }
.test-kart--kilitli { background: transparent; box-shadow: none; border-style: dashed; color: var(--renk-metin-soluk); }
.test-kart__ikon {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 48px; height: 48px; border-radius: 15px;
  background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri);
  font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem;
}
.test-kart__ikon--tamam { background: var(--renk-nane); color: #fff; }
.test-kart__ikon--kilit { background: var(--renk-cizgi); color: var(--renk-metin-soluk); }
.test-kart__metin { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.test-kart__ad { font-weight: 800; font-size: var(--yazi-buyuk); }
.test-kart__alt { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.etiket-yeni { flex-shrink: 0; padding: 4px 10px; border-radius: var(--kose-tam); background: var(--renk-gunes); color: var(--renk-gunes-uzeri); font-weight: 800; font-size: var(--yazi-kucuk); }

/* Başla */
.buyuk-ikon {
  display: flex; align-items: center; justify-content: center;
  width: 112px; height: 112px; border-radius: 34px;
  background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); box-shadow: 0 6px 0 var(--renk-vurgu-koyu);
  font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 3.5rem;
}
.bilgi-kutular { display: flex; gap: var(--bosluk-3); justify-content: center; flex-wrap: wrap; }
.bilgi-kutu {
  display: flex; flex-direction: column; align-items: center; min-width: 76px;
  padding: var(--bosluk-3) var(--bosluk-4); border-radius: 18px;
  background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
}
.bilgi-kutu__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.bilgi-kutu__ad { font-size: var(--yazi-kucuk); font-weight: 800; color: var(--renk-metin-soluk); }
.bilgi-kutu--basari { background: var(--renk-basari-zemin); border-color: transparent; }
.bilgi-kutu--basari > span { color: var(--renk-basari); }
.bilgi-kutu--hata { background: var(--renk-hata-zemin); border-color: transparent; }
.bilgi-kutu--hata > span { color: var(--renk-hata); }
.bilgi-kutu--bos { background: var(--renk-yuzey-2); border-color: transparent; }
.uyari--bilgi { text-align: left; }
.uyari > svg { flex-shrink: 0; }

/* Soru */
.soru-form { display: flex; flex-direction: column; gap: var(--bosluk-5); }
.soru-ust { display: flex; justify-content: space-between; align-items: center; gap: var(--bosluk-3); }
.soru-no { font-weight: 800; color: var(--renk-vurgu); }
.soru-metni { font-family: var(--yazi-baslik-aile); font-weight: 700; font-size: 1.5rem; line-height: 1.3; margin: 0 0 var(--bosluk-5); padding: 0; overflow-wrap: anywhere; }
.sik-grup { border: 0; margin: 0; padding: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.sik-grup > .soru-metni { float: left; width: 100%; }
.sik-grup > .soru-metni + * { clear: both; }
.sik-kart { position: relative; display: block; cursor: pointer; }
.sik-kart input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sik-kart__kutu {
  display: flex; align-items: center; gap: 14px; min-height: 64px; padding: 10px 16px;
  border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  box-shadow: 0 4px 0 var(--renk-cizgi); font-weight: 800; font-size: 1.25rem;
  transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.sik-kart__harf {
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 40px; height: 40px; border-radius: 12px; background: var(--renk-yuzey-2); color: var(--renk-metin-soluk); font-size: 1.0625rem; font-weight: 800;
}
.sik-kart__metin { overflow-wrap: anywhere; }
.sik-kart input:checked + .sik-kart__kutu { background: var(--renk-vurgu-acik); border: 3px solid var(--renk-vurgu); box-shadow: 0 4px 0 var(--renk-vurgu); color: var(--renk-secili-metin); }
.sik-kart input:checked + .sik-kart__kutu .sik-kart__harf { background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); }
.sik-kart input:focus-visible + .sik-kart__kutu { outline: 3px solid var(--renk-odak); outline-offset: 3px; }
.sik-kart:active .sik-kart__kutu { transform: translateY(2px); }
.alt-butonlar { display: flex; gap: var(--bosluk-3); }
.alt-butonlar .buton { flex-grow: 1; }
.buton--kare { flex-grow: 0 !important; width: 60px; padding: 0; flex-shrink: 0; }
.buton:disabled { opacity: .45; cursor: not-allowed; }

/* Bitir onayı (alt panel) */
.alt-panel-sahne { flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-end; }
.alt-panel { display: flex; flex-direction: column; gap: var(--bosluk-5); padding: var(--bosluk-6) var(--bosluk-5) var(--bosluk-6); border-radius: 28px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
.alt-panel__tutamak { align-self: center; width: 44px; height: 5px; border-radius: var(--kose-tam); background: var(--renk-cizgi); }
.ozet-izgara { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-3); }
.ozet { display: flex; flex-direction: column; padding: 14px; border-radius: 18px; }
.ozet__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.ozet__ad { font-weight: 700; font-size: var(--yazi-kucuk); }
.ozet--basari { background: var(--renk-basari-zemin); color: var(--renk-basari); }
.ozet--dikkat { background: var(--renk-dikkat-zemin); color: var(--renk-dikkat-metin); }

/* Sonuç */
.halka { position: relative; width: 180px; height: 180px; }
.halka svg { display: block; }
.halka__iz, .halka__dolu { fill: none; stroke-width: 18; }
.halka__iz { stroke: var(--renk-cizgi); }
.halka__dolu { stroke: var(--renk-nane); stroke-linecap: round; }
.halka__yazi { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.halka__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 3rem; line-height: 1; }
.halka__ad { font-size: var(--yazi-kucuk); font-weight: 800; color: var(--renk-metin-soluk); }
.kazanc-hap {
  display: inline-flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: var(--kose-tam);
  background: var(--renk-gunes); color: var(--renk-gunes-uzeri); box-shadow: 0 4px 0 var(--renk-gunes-koyu);
  font-weight: 800; font-size: var(--yazi-buyuk);
}
.kazanc-hap .yildiz { fill: #fff; width: 22px; height: 22px; }

/* İnceleme */
.no-izgara { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 5px; }
.no {
  display: flex; align-items: center; justify-content: center; min-height: 34px; border-radius: 9px;
  font-weight: 800; font-size: var(--yazi-kucuk); text-decoration: none;
}
.no--dogru { background: var(--renk-nane); color: #fff; }
.no--yanlis { background: var(--renk-mercan); color: #1F1A3D; }
.no--bos { background: var(--renk-cizgi); color: var(--renk-metin-soluk); }
.no--secili { outline: 3px solid var(--renk-metin); outline-offset: 2px; }
.inceleme-siklar { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.inceleme-sik {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 14px; border-radius: 18px;
  background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); font-weight: 800; font-size: 1.125rem;
}
.inceleme-sik__metin { flex-grow: 1; overflow-wrap: anywhere; }
.inceleme-sik__not { font-size: var(--yazi-kucuk); flex-shrink: 0; }
.inceleme-sik--dogru { background: var(--renk-basari-zemin); border: 3px solid var(--renk-basari); }
.inceleme-sik--dogru .sik-kart__harf { background: var(--renk-basari); color: #fff; }
.inceleme-sik--dogru .inceleme-sik__not { color: var(--renk-basari); }
.inceleme-sik--yanlis { background: var(--renk-hata-zemin); border: 3px solid var(--renk-hata); }
.inceleme-sik--yanlis .sik-kart__harf { background: var(--renk-hata); color: #fff; }
.inceleme-sik--yanlis .inceleme-sik__not { color: var(--renk-hata); }
.cozum-kutu { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 18px; background: var(--renk-vurgu-acik); line-height: 1.45; }
.cozum-kutu > .kalin { color: var(--renk-secili-metin); }
.alan__girdi--cok { min-height: 120px; padding: var(--bosluk-3) var(--bosluk-4); resize: vertical; font: inherit; font-weight: 700; }

@media (hover: hover) {
  a.test-kart:hover { border-color: var(--renk-vurgu); }
  .sik-kart:hover .sik-kart__kutu { border-color: var(--renk-vurgu); }
}
@media (prefers-reduced-motion: reduce) {
  .test-kart, .sik-kart__kutu { transition: none; }
}

/* Görünüm seçici (K43) */
.tema-secici { display: flex; align-items: center; justify-content: center; gap: var(--bosluk-3); flex-wrap: wrap; }
.tema-secici__baslik { font-weight: 800; font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); }
.tema-secici__grup { display: inline-flex; padding: 4px; gap: 4px; border-radius: var(--kose-tam); background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
.tema-secici__secenek {
  min-height: 40px; padding: 0 16px; border: 0; border-radius: var(--kose-tam);
  background: transparent; color: var(--renk-metin-soluk); font: inherit; font-weight: 800; font-size: var(--yazi-kucuk); cursor: pointer;
}
.tema-secici__secenek[aria-pressed="true"] { background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); }

/* Sorudaki boş kutu "□" (K44): yazı tipinden bağımsız, metin boyunda çizilir */
.bos-kutu {
  display: inline-block; width: 0.8em; height: 0.95em; margin: 0 0.12em;
  vertical-align: -0.12em; border: 0.11em solid currentColor; border-radius: 0.14em;
  background: var(--renk-yuzey);
}

/* ================= Rozetler ve konu sınavı (K45) ================= */
.rozet-gorsel { display: block; width: 100%; height: auto; }
.rozet-gorsel--kilitli { filter: grayscale(1); opacity: 0.35; }

/* Raf (Testlerim) */
.raf { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.raf__ust { display: flex; justify-content: space-between; align-items: baseline; }
.raf__ust h2 { font-size: var(--yazi-buyuk); margin: 0; }
.raf__tumu { font-weight: 800; font-size: var(--yazi-kucuk); color: var(--renk-vurgu); text-decoration: none; }
.raf__serit {
  display: flex; gap: 6px; align-items: flex-end; justify-content: space-between; overflow-x: auto; scrollbar-width: none;
  padding: var(--bosluk-3); border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  text-decoration: none;
}
.raf__serit::-webkit-scrollbar { display: none; }
.raf__oge { flex: 1 1 0; min-width: 32px; max-width: 44px; }
.raf__oge--buyuk { max-width: 56px; min-width: 42px; flex-grow: 1.3; }
.raf__sayac { margin-left: auto; }

/* Sınav kartı */
.sinav-kart {
  display: flex; align-items: center; gap: var(--bosluk-3); min-height: 80px; padding: var(--bosluk-3) var(--bosluk-4);
  border-radius: 20px; background: var(--renk-dikkat-zemin); border: 2px solid var(--renk-gunes);
  box-shadow: 0 4px 0 var(--renk-gunes-koyu); color: var(--renk-metin); text-decoration: none;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
a.sinav-kart:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--renk-gunes-koyu); }
.sinav-kart--kilitli { background: transparent; border: 2px dashed var(--renk-cizgi-koyu); box-shadow: none; color: var(--renk-metin-soluk); }
.sinav-kart--gecti { background: var(--renk-basari-zemin); border-color: var(--renk-nane); box-shadow: 0 4px 0 var(--renk-nane-koyu); }
.sinav-kart__gorsel { flex: 0 0 48px; }
/* Premium ek test (K56): yalnızca premium çocuğa görünür */
.test-kart--ek:not(.test-kart--kilitli) { border-color: var(--renk-vurgu-acik); }
.test-kart--premium-kilit { border-color: var(--renk-vurgu-acik); color: var(--renk-metin); }
.test-kart--premium-kilit .test-kart__ikon--kilit { background: var(--renk-vurgu-acik); color: var(--renk-vurgu); }
.etiket-premium {
  display: inline-block; margin: 2px 4px 2px 0; padding: 1px 8px; border-radius: var(--kose-tam);
  background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); font-weight: 800; font-size: 0.75rem;
}
.sinav-kart .etiket-yeni { background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); }

/* Teste başla: sınav rozeti */
.basla-rozet { width: 120px; }

/* Rozet kutlaması */
.kutlama-rozet { width: 176px; animation: rozet-gel 900ms cubic-bezier(0.2, 0.9, 0.3, 1.25) both; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.25)); }
.kutlama-ust { font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: var(--yazi-kucuk); color: var(--renk-gunes); }
.kutlama-ek { display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4); border-radius: 18px; background: rgb(255 255 255 / 0.12); font-weight: 700; text-align: left; }
.kutlama-ek__gorsel { flex: 0 0 44px; }
.buton-metin--acik { color: #FFFFFF; align-self: center; }
@keyframes rozet-gel {
  0% { transform: scale(0.2) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.12) rotate(6deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.konfeti { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.konfeti__parca {
  position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 3px;
  animation: konfeti-dus 3.2s linear infinite;
}
.konfeti__parca:nth-child(3n)   { background: var(--renk-gunes); }
.konfeti__parca:nth-child(3n+1) { background: #7FE3CE; }
.konfeti__parca:nth-child(3n+2) { background: #FF9C8F; width: 8px; height: 8px; border-radius: 50%; }
.konfeti__parca--1 { left: 4%; animation-delay: 0s; }    .konfeti__parca--2 { left: 12%; animation-delay: 1.1s; }
.konfeti__parca--3 { left: 19%; animation-delay: .4s; }  .konfeti__parca--4 { left: 27%; animation-delay: 2s; }
.konfeti__parca--5 { left: 34%; animation-delay: .8s; }  .konfeti__parca--6 { left: 42%; animation-delay: 2.6s; }
.konfeti__parca--7 { left: 50%; animation-delay: .2s; }  .konfeti__parca--8 { left: 57%; animation-delay: 1.5s; }
.konfeti__parca--9 { left: 64%; animation-delay: 2.9s; } .konfeti__parca--10 { left: 71%; animation-delay: .6s; }
.konfeti__parca--11 { left: 78%; animation-delay: 1.8s; } .konfeti__parca--12 { left: 85%; animation-delay: 1s; }
.konfeti__parca--13 { left: 91%; animation-delay: 2.3s; } .konfeti__parca--14 { left: 97%; animation-delay: .3s; }
@keyframes konfeti-dus {
  0% { transform: translateY(0) rotate(0); opacity: 1; }
  100% { transform: translateY(110vh) rotate(540deg); opacity: 0.7; }
}
.kutlama .sayfa > * { position: relative; z-index: 1; }

/* Rozetlerim */
.rozet-kart {
  display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-1); text-align: center;
  padding: var(--bosluk-4) var(--bosluk-3); border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
}
.rozet-kart--buyuk { flex-direction: row; text-align: left; gap: var(--bosluk-4); background: var(--renk-dikkat-zemin); border-color: var(--renk-gunes); }
.rozet-kart--buyuk .rozet-kart__gorsel { flex: 0 0 96px; }
.rozet-kart--buyuk.rozet-kart--kilitli { background: var(--renk-yuzey); border-color: var(--renk-cizgi); }
.rozet-kart__gorsel { width: 72px; }
.rozet-kart__ad { font-weight: 800; }
.rozet-kart__durum { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.rozet-kart--kilitli .rozet-kart__ad { color: var(--renk-metin-soluk); }
.rozet-kart .metin-kucuk { margin: 0; }
.rozet-izgara { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bosluk-3); }
@media (min-width: 420px) { .rozet-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

@media (prefers-reduced-motion: reduce) {
  .kutlama-rozet { animation: none; }
  .konfeti { display: none; }
  .sinav-kart { transition: none; }
}

/* ================= Ana ekran, ders ve konu ekranları (K46) ================= */
/* Ders renkleri: simge kutusu zemin + beyaz simge */
.ders--mor    { background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); }
.ders--nane   { background: var(--renk-nane); color: #FFFFFF; }
.ders--mercan { background: var(--renk-mercan); color: #1F1A3D; }
.ders--gunes  { background: var(--renk-gunes); color: var(--renk-gunes-uzeri); }
.ders--mavi   { background: #3B82F6; color: #FFFFFF; }

.ozet-kart { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.sayac-izgara { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bosluk-2); margin: 0; }
.sayac {
  display: flex; flex-direction: column-reverse; align-items: center; justify-content: flex-end; gap: 2px;
  padding: var(--bosluk-3) var(--bosluk-1); border-radius: 16px; background: var(--renk-yuzey-2); text-align: center;
}
.sayac__sayi { margin: 0; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.5rem; line-height: 1; }
.sayac__ad { font-size: 0.75rem; font-weight: 800; color: var(--renk-metin-soluk); line-height: 1.2; }
.ilerleme--gunes .ilerleme__dolu, .ozet-kart .ilerleme .ilerleme__dolu { background: var(--renk-gunes); }
.ozet-kart .ilerleme, .ders-ozet .ilerleme { flex-grow: 0; }
.ilerleme--ince { display: block; height: 8px; flex-grow: 0; margin-top: 4px; }

/* Devam et */
.devam-kart {
  display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-4);
  border-radius: 22px; background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri);
  box-shadow: 0 5px 0 var(--renk-vurgu-koyu); text-decoration: none;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
.devam-kart:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--renk-vurgu-koyu); }
.devam-kart__ikon { display: flex; align-items: center; justify-content: center; flex: 0 0 52px; height: 52px; border-radius: 16px; box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.35); }
.devam-kart__metin { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.devam-kart__ust { font-size: var(--yazi-kucuk); font-weight: 800; color: var(--renk-gunes); }
.devam-kart__ad { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.devam-kart__alt { font-size: var(--yazi-kucuk); font-weight: 700; opacity: 0.85; }
.devam-kart__ok { flex-shrink: 0; }

/* Ders kartları */
.ders-listesi, .konu-listesi { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.ders-kart, .konu-kart {
  display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4); min-height: 84px;
  border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); box-shadow: 0 4px 0 var(--renk-cizgi);
  color: var(--renk-metin); text-decoration: none; transition: transform var(--gecis), box-shadow var(--gecis), border-color var(--gecis);
}
.ders-kart:active, .konu-kart:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--renk-cizgi); }
.ders-kart__ikon { display: flex; align-items: center; justify-content: center; flex: 0 0 56px; height: 56px; border-radius: 18px; }
.ders-kart__metin, .konu-kart__metin { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.ders-kart__ad { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.25rem; line-height: 1.2; }
.ders-kart__alt, .konu-kart__alt { display: inline-flex; align-items: center; gap: 3px; flex-wrap: wrap; font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.ders-kart__alt .yildiz, .konu-kart__alt .yildiz { width: 14px; height: 14px; }
.ders-kart__ok { flex-shrink: 0; color: var(--renk-metin-soluk); }

/* Ders ekranı */
.ders-baslik__ikon { display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; border-radius: 14px; }
.ders-baslik__ikon svg { width: 24px; height: 24px; }
.ders-baslik__ad { margin: 0; }
.ders-ozet { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.konu-kart__no {
  display: flex; align-items: center; justify-content: center; flex: 0 0 48px; height: 48px; border-radius: 50%;
  font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem;
}
.konu-kart__ad { font-weight: 800; font-size: var(--yazi-buyuk); line-height: 1.25; }
.konu-kart__rozet { flex: 0 0 40px; }
.konu-kart--bitti { border-color: var(--renk-nane); }

@media (hover: hover) {
  .ders-kart:hover, .konu-kart:hover { border-color: var(--renk-vurgu); }
}
@media (prefers-reduced-motion: reduce) {
  .devam-kart, .ders-kart, .konu-kart { transition: none; }
}

/* ================= Günlük alışkanlık: seri, hedef, Günün 5 sorusu (K50) ================= */
.alev { width: 40px; height: 50px; flex-shrink: 0; }
.alev__dis { fill: #FF8A1F; }
.alev__ic { fill: #FFD84D; }
.alev--sonuk .alev__dis { fill: var(--renk-cizgi-koyu); }
.alev--sonuk .alev__ic { fill: var(--renk-cizgi); }
@media (prefers-reduced-motion: no-preference) {
  .bugun-kart .alev:not(.alev--sonuk) { animation: alev-titre 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
}
@keyframes alev-titre { 0%, 100% { transform: scale(1) rotate(0); } 50% { transform: scale(1.06, 0.97) rotate(-2deg); } }

.bugun-kart { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.bugun-kart__ust { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); }
.seri { display: flex; align-items: center; gap: var(--bosluk-3); min-width: 0; }
.seri__metin { display: flex; flex-direction: column; min-width: 0; }
.seri__sayi { margin: 0; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem; line-height: 1.15; }
.seri__alt { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }

.hedef-halka { position: relative; display: flex; flex-direction: column; align-items: center; flex-shrink: 0; width: 76px; }
.hedef-halka svg { width: 56px; height: 56px; }
.hedef-halka__iz, .hedef-halka__dolu { fill: none; stroke-width: 5; }
.hedef-halka__iz { stroke: var(--renk-cizgi); }
.hedef-halka__dolu { stroke: var(--renk-vurgu); stroke-linecap: round; }
.hedef-halka--tamam .hedef-halka__dolu { stroke: var(--renk-nane); }
.hedef-halka__yazi { position: absolute; top: 0; height: 56px; display: grid; place-items: center; font-weight: 800; font-size: 0.9375rem; }
.hedef-halka__ad { font-size: 0.6875rem; font-weight: 800; color: var(--renk-metin-soluk); text-align: center; line-height: 1.2; }

.hafta { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.hafta__gun { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.hafta__ad { font-size: 0.6875rem; font-weight: 800; color: var(--renk-metin-soluk); }
.hafta__nokta { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--renk-yuzey-2); border: 2px solid var(--renk-cizgi); }
.hafta__nokta svg { width: 16px; height: 16px; fill: none; stroke: #FFFFFF; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.hafta__gun--dolu .hafta__nokta { background: #FF8A1F; border-color: #E26F00; }
.hafta__gun--bugun .hafta__ad { color: var(--renk-vurgu); }
.hafta__gun--bugun:not(.hafta__gun--dolu) .hafta__nokta { border-color: var(--renk-vurgu); border-style: dashed; }
.hafta__gun--gelecek .hafta__nokta { opacity: 0.45; }

.gunun5 {
  display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4); margin: 0;
  border-radius: 20px; background: var(--renk-dikkat-zemin); border: 2px solid var(--renk-gunes);
  color: var(--renk-metin); text-decoration: none;
}
.gunun5__ikon {
  display: grid; place-items: center; flex: 0 0 48px; height: 48px; border-radius: 15px;
  background: var(--renk-gunes); color: var(--renk-gunes-uzeri); font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.5rem;
}
.gunun5__ikon svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.gunun5__metin { display: flex; flex-direction: column; flex-grow: 1; min-width: 0; }
.gunun5__ad { font-weight: 800; font-size: var(--yazi-buyuk); }
.gunun5__alt { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.gunun5__buton { min-height: 44px; padding: 0 var(--bosluk-4); font-size: var(--yazi-orta); flex-shrink: 0; }
.gunun5--bitti { background: var(--renk-basari-zemin); border-color: var(--renk-nane); }
.gunun5--bitti .gunun5__ikon { background: var(--renk-nane); color: #FFFFFF; }

.seri-bandi {
  display: flex; align-items: center; justify-content: center; gap: var(--bosluk-2); padding: var(--bosluk-2) var(--bosluk-4);
  border-radius: var(--kose-tam); background: var(--renk-dikkat-zemin); color: var(--renk-dikkat-metin); font-weight: 700; font-size: var(--yazi-orta);
}
.seri-bandi .alev { width: 22px; height: 28px; }

/* Veli alanı */
.veli-baglanti { display: inline-flex; align-items: center; justify-content: center; gap: var(--bosluk-2); align-self: center; min-height: var(--dokunma-min); font-weight: 800; color: var(--renk-metin-soluk); text-decoration: none; }
.kilit-ikon { display: grid; place-items: center; width: 60px; height: 60px; border-radius: 18px; background: var(--renk-vurgu-acik); color: var(--renk-vurgu); }
.veli-cocuk { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.veli-cocuk__ust { display: flex; align-items: center; gap: var(--bosluk-3); }
.veli-cocuk h2 { margin: 0; font-size: var(--yazi-buyuk); }
.veli-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-2); margin: 0; }
.veli-ozet > div { padding: var(--bosluk-3); border-radius: 14px; background: var(--renk-yuzey-2); text-align: center; }
.veli-ozet dt { font-size: 0.75rem; font-weight: 800; color: var(--renk-metin-soluk); }
.veli-ozet dd { margin: 0; font-weight: 800; }
.hedef-form fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-2); }
.hedef-form legend { margin-bottom: var(--bosluk-2); }
.hedef-form .tema-secici__grup { align-self: flex-start; }
.hedef-form .tema-secici__secenek { white-space: nowrap; padding: 0 14px; }

/* ================= Masaüstü uygulama yerleşimi (K52) =================
 * Telefonda ve tablette (<1024px) hiçbir şey değişmez: .kabuk görünmez bir sarmalayıcıdır,
 * menü ve yan panel gizlidir. Masaüstünde üç sütun: sol menü · içerik · günlük durum paneli. */
.yan-menu, .yan-panel, .sadece-masaustu { display: none; }
.kabuk { display: contents; }

@media (min-width: 1024px) {
  body.uygulama { display: block; place-items: normal; padding: 0; background: var(--renk-zemin); }
  body.uygulama::before, body.uygulama::after { display: none; }
  .uygulama .sadece-mobil { display: none; }
  .uygulama .sadece-masaustu { display: block; }

  .kabuk {
    display: grid; grid-template-columns: 96px minmax(0, 1fr) 320px; column-gap: var(--bosluk-6);
    max-width: 1200px; min-height: 100vh; min-height: 100dvh; margin: 0 auto; padding-right: var(--bosluk-5);
  }
  .uygulama .kabuk__orta {
    width: 100%; max-width: 660px; min-height: 0; justify-self: center;
    padding: var(--bosluk-6) 0 var(--bosluk-7);
    background: none; border: 0; border-radius: 0; box-shadow: none;
  }

  /* Sol menü (dar: yalnızca simgeler; ≥1280: simge + yazı) */
  .yan-menu {
    display: flex; flex-direction: column; gap: var(--bosluk-2);
    position: sticky; top: 0; height: 100vh; height: 100dvh;
    padding: var(--bosluk-5) var(--bosluk-3); border-right: 2px solid var(--renk-cizgi);
    overflow-y: auto; scrollbar-width: none; overscroll-behavior: contain;   /* kısa ekranda menü kayar */
  }
  .yan-menu::-webkit-scrollbar { display: none; }
  .yan-menu__liste { list-style: none; margin: var(--bosluk-4) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-2); }
  .yan-menu__marka { display: flex; align-items: center; justify-content: center; gap: var(--bosluk-3); text-decoration: none; padding: var(--bosluk-2); }
  .yan-menu__logo { display: block; flex: 0 0 52px; width: 52px; height: 52px; }
  .yan-menu__marka .yan-menu__yazi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem; line-height: 1.1; color: var(--renk-vurgu); }
  .yan-menu__slogan { display: block; font-size: 0.75rem; font-weight: 700; color: var(--renk-metin-soluk); }
  .yan-menu__oge {
    display: flex; align-items: center; justify-content: center; gap: var(--bosluk-3);
    padding: var(--bosluk-2); border-radius: 16px; border: 2px solid transparent;
    color: var(--renk-metin); text-decoration: none; font-weight: 800; font-size: 1.0625rem;
    transition: background var(--gecis), border-color var(--gecis);
  }
  .yan-menu__oge--aktif { background: var(--renk-vurgu-acik); border-color: var(--renk-vurgu); color: var(--renk-secili-metin); }
  .yan-menu__ikon {
    display: flex; align-items: center; justify-content: center; flex: 0 0 44px; height: 44px; border-radius: 14px;
  }
  .yan-menu__ikon svg { width: 26px; height: 26px; }
  .yan-menu__ikon--ana, .yan-menu__ikon--rozet { background: var(--renk-vurgu-acik); color: var(--renk-vurgu); }
  .yan-menu__oge--aktif .yan-menu__ikon--ana, .yan-menu__oge--aktif .yan-menu__ikon--rozet { background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); }
  .yan-menu__ikon--ana svg, .yan-menu__ikon--rozet svg { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .yan-menu__profil { margin-top: auto; }
  .yan-menu__avatar { display: flex; flex: 0 0 44px; height: 44px; border-radius: 14px; overflow: hidden; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
  .yan-menu__avatar svg { width: 100%; height: 100%; }
  .yan-menu__yazi {   /* dar menüde yazılar ekran okuyucuya kalır */
    position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
  }

  /* Sağ panel */
  .yan-panel {
    display: flex; flex-direction: column; gap: var(--bosluk-4);
    position: sticky; top: 0; align-self: start; max-height: 100vh; max-height: 100dvh; overflow-y: auto;
    scrollbar-width: none; overscroll-behavior: contain; /* kaydırma çubuğu gizli, tekerlekle kayar */
    padding: var(--bosluk-6) 0;
  }
  .yan-panel::-webkit-scrollbar { display: none; }
  .yan-panel__profil { display: flex; align-items: center; gap: var(--bosluk-3); }
  .yan-panel__seviye { gap: var(--bosluk-2); }
  .yan-panel__seviye .ilerleme { flex-grow: 0; }

  .yan-panel .raf__serit { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; align-items: end; overflow: visible; }
  .yan-panel .raf__oge, .yan-panel .raf__oge--buyuk { min-width: 0; max-width: none; }

  /* İçerik: ders kartları iki sütun */
  .uygulama .ders-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uygulama .ders-listesi > li { display: flex; min-width: 0; }
  .uygulama .ders-kart { flex-grow: 1; min-width: 0; }
  .uygulama .rozet-izgara { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Soru ve inceleme ekranları masaüstünde: daha geniş kart, kısa şıklar 2 × 2 (K52) */
@media (min-width: 1024px) {
  .sayfa--genis { max-width: 760px; min-height: min(760px, calc(100dvh - 48px)); padding: var(--bosluk-6) var(--bosluk-7); }
  body:has(.sayfa--genis) { padding-top: var(--bosluk-5); padding-bottom: var(--bosluk-5); }
  .sik-grup--kisa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sik-grup--kisa > .soru-metni { float: none; grid-column: 1 / -1; }
}

@media (min-width: 1280px) {
  .kabuk { grid-template-columns: 240px minmax(0, 1fr) 330px; column-gap: 40px; max-width: 1400px; }
  .uygulama .kabuk__orta { max-width: 720px; }
  /* Geniş içerik sütununda konu ve test listeleri de iki sütun: daha az kaydırma */
  .uygulama .konu-listesi, .uygulama .test-listesi { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uygulama .konu-listesi > li, .uygulama .test-listesi > li { display: flex; min-width: 0; }
  .uygulama .konu-kart, .uygulama .test-kart { flex-grow: 1; min-width: 0; }
  .uygulama .rozet-izgara { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .yan-menu { padding: var(--bosluk-5) var(--bosluk-4); }
  .yan-menu__marka, .yan-menu__oge { justify-content: flex-start; }
  .yan-menu__yazi { position: static; width: auto; height: auto; margin: 0; overflow: visible; clip: auto; }
}

@media (min-width: 1024px) and (hover: hover) {
  .yan-menu__oge:hover { background: var(--renk-yuzey); border-color: var(--renk-cizgi); }
  .yan-menu__oge--aktif:hover { background: var(--renk-vurgu-acik); border-color: var(--renk-vurgu); }
}

/* ================= Ustalık görevi / Büyük Final ve altın rozet (K55) ================= */
.bonus-kart {
  display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4); min-height: 84px;
  border-radius: 20px; text-decoration: none; color: #3A2A00;
  background: linear-gradient(135deg, #FFE9A8, #FFC53D); border: 2px solid #E0A516; box-shadow: 0 4px 0 #B7791F;
  transition: transform var(--gecis), box-shadow var(--gecis);
}
a.bonus-kart:active { transform: translateY(3px); box-shadow: 0 1px 0 #B7791F; }
.bonus-kart .test-kart__alt { color: #5A4200; }
.bonus-kart--kilitli { background: transparent; border: 2px dashed var(--renk-cizgi-koyu); box-shadow: none; color: var(--renk-metin-soluk); }
.bonus-kart--kilitli .test-kart__alt { color: var(--renk-metin-soluk); }
.bonus-kart--gecti { background: linear-gradient(135deg, #FFF4D1, #FFE08A); }
.bonus-kart__gorsel { flex: 0 0 52px; }
.bonus-kart__etiket { flex-shrink: 0; padding: 4px 10px; border-radius: var(--kose-tam); background: #3A2A00; color: #FFD65C; font-weight: 800; font-size: var(--yazi-kucuk); }
.rozet-kart--altin { border-color: #E0A516; box-shadow: 0 4px 0 #B7791F; background: linear-gradient(160deg, var(--renk-yuzey) 60%, #FFF1C4); }
.rozet-kart__altin { color: #9A6A00; font-weight: 800; }
@media (prefers-reduced-motion: no-preference) {
  .rozet-gorsel--altin { animation: altin-parilti 3s ease-in-out infinite; }
}
@keyframes altin-parilti { 0%, 100% { filter: drop-shadow(0 0 0 rgb(255 197 61 / 0)); } 50% { filter: drop-shadow(0 0 6px rgb(255 197 61 / 0.7)); } }
.veli-rozet { display: flex; flex-direction: column; gap: var(--bosluk-2); padding-top: var(--bosluk-3); border-top: 2px solid var(--renk-cizgi); }
.veli-rozet__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-2); }
.veli-rozet__liste li { display: flex; align-items: center; gap: var(--bosluk-3); }
.veli-rozet__gorsel { flex: 0 0 40px; }
.veli-rozet__metin { display: flex; flex-direction: column; line-height: 1.3; }
.veli-rozet__metin span { font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); font-weight: 700; }
.veli-bildirim { display: flex; align-items: center; gap: var(--bosluk-3); justify-content: space-between; }
.veli-bildirim > span { display: flex; flex-direction: column; gap: 2px; }
.veli-bildirim .buton { min-height: 44px; padding: 0 18px; font-size: var(--yazi-orta); }
.veli-baslik, .veli-rozet h3 { font-size: var(--yazi-buyuk); }

/* ================= Kazanım karnesi (K56) ================= */
.veli-karne-bag { display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-3) var(--bosluk-4); border-radius: 18px; background: var(--renk-vurgu-acik); color: var(--renk-secili-metin); text-decoration: none; }
.veli-karne-bag > span { display: flex; flex-direction: column; flex-grow: 1; }
.veli-karne-bag span span { font-size: var(--yazi-kucuk); font-weight: 700; opacity: 0.85; }
.karne-ozet { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--bosluk-2); margin: 0; }
.karne-ozet__oge { display: flex; flex-direction: column-reverse; align-items: center; padding: var(--bosluk-3); border-radius: 16px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
.karne-ozet__oge dd { margin: 0; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.75rem; line-height: 1; }
.karne-ozet__oge dt { font-size: var(--yazi-kucuk); font-weight: 800; color: var(--renk-metin-soluk); }
.karne-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.karne-satir { display: flex; flex-direction: column; gap: 6px; padding: var(--bosluk-4); border-radius: 18px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); border-left-width: 8px; }
.karne-satir__ust { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--bosluk-2); }
.karne-satir__ad { font-weight: 800; line-height: 1.3; }
.karne-satir__alt { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.karne-etiket { flex-shrink: 0; padding: 2px 10px; border-radius: var(--kose-tam); font-size: 0.8125rem; font-weight: 800; background: var(--renk-yuzey-2); }
.karne-cubuk { display: block; height: 8px; border-radius: var(--kose-tam); background: var(--renk-yuzey-2); overflow: hidden; }
.karne-cubuk__dolu { display: block; height: 100%; border-radius: inherit; background: var(--renk-metin-soluk); }
.karne--guclu { border-left-color: var(--renk-nane); } .karne--guclu .karne-etiket { background: var(--renk-basari-zemin); color: var(--renk-basari); } .karne--guclu .karne-cubuk__dolu { background: var(--renk-nane); }
.karne--gelisiyor { border-left-color: var(--renk-gunes); } .karne--gelisiyor .karne-etiket { background: var(--renk-dikkat-zemin); color: var(--renk-dikkat-metin); } .karne--gelisiyor .karne-cubuk__dolu { background: var(--renk-gunes); }
.karne--zorlaniyor { border-left-color: var(--renk-mercan); } .karne--zorlaniyor .karne-etiket { background: var(--renk-hata-zemin); color: var(--renk-hata); } .karne--zorlaniyor .karne-cubuk__dolu { background: var(--renk-mercan); }
.karne--az { border-left-color: var(--renk-cizgi-koyu); }
.karne-ozet__oge.karne--guclu dd { color: var(--renk-basari); } .karne-ozet__oge.karne--zorlaniyor dd { color: var(--renk-hata); } .karne-ozet__oge.karne--gelisiyor dd { color: var(--renk-dikkat-metin); }
.karne-cubuk__dolu--0 { width: 2%; } .karne-cubuk__dolu--10 { width: 10%; } .karne-cubuk__dolu--20 { width: 20%; } .karne-cubuk__dolu--30 { width: 30%; } .karne-cubuk__dolu--40 { width: 40%; } .karne-cubuk__dolu--50 { width: 50%; }
.karne-cubuk__dolu--60 { width: 60%; } .karne-cubuk__dolu--70 { width: 70%; } .karne-cubuk__dolu--80 { width: 80%; } .karne-cubuk__dolu--90 { width: 90%; } .karne-cubuk__dolu--100 { width: 100%; }
.karne-oneri { margin-top: 4px; padding: var(--bosluk-3); border-radius: 14px; background: var(--renk-yuzey-2); font-size: var(--yazi-kucuk); line-height: 1.5; }
.karne-oneri__premium { font-weight: 800; color: var(--renk-vurgu); }
.karne-premium { display: flex; flex-direction: column; gap: var(--bosluk-2); align-items: flex-start; padding: var(--bosluk-5); border-radius: 22px; background: linear-gradient(135deg, var(--renk-vurgu-acik), var(--renk-dikkat-zemin)); border: 2px solid var(--renk-gunes); }
.karne-premium h2 { font-size: var(--yazi-buyuk); }

/* Veli alanı: Premium (K58) */
.premium-ust { display: flex; flex-direction: column; gap: var(--bosluk-2); align-items: flex-start; padding: var(--bosluk-5); border-radius: 24px; background: linear-gradient(135deg, var(--renk-vurgu-acik), var(--renk-dikkat-zemin)); border: 2px solid var(--renk-gunes); }
.premium-ust h2, .premium-ust p { margin: 0; }
.premium-cocuk, .premium-durum { display: flex; flex-direction: column; gap: var(--bosluk-2); }
.premium-cocuk p { margin: 0; }
.premium-durum--aktif { border-color: var(--renk-nane); }
.premium-sayi { font-family: var(--yazi-baslik-aile); font-size: 1.5rem; color: var(--renk-vurgu); }
.premium-liste, .premium-yakinda { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-3); }
.premium-liste li { display: flex; gap: var(--bosluk-3); align-items: flex-start; }
.premium-liste li > span:last-child { display: flex; flex-direction: column; }
.premium-liste__ikon { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--renk-nane); color: #fff; }
.premium-yakinda { gap: var(--bosluk-1); color: var(--renk-metin-soluk); font-size: var(--yazi-kucuk); }
.premium-yakinda li::before { content: "· "; }
.premium-al { display: flex; flex-direction: column; gap: var(--bosluk-3); border-color: var(--renk-gunes); }
.premium-iptal { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.premium-iptal__ac > summary { cursor: pointer; font-weight: 700; color: var(--renk-metin-soluk); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; display: flex; align-items: center; }
.premium-iptal__ac > summary:hover { color: var(--renk-metin); }
.premium-iptal__ac[open] > summary { margin-bottom: var(--bosluk-2); }
.premium-iptal__ac .form { display: flex; flex-direction: column; gap: var(--bosluk-3); }
.premium-iptal__ac fieldset { margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--bosluk-2); }
.premium-al h2, .premium-al p { margin: 0; }
.premium-fiyat { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.75rem; }
.veli-premium-bant { display: flex; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-4); border-radius: 20px; background: linear-gradient(135deg, var(--renk-vurgu-acik), var(--renk-dikkat-zemin)); border: 2px solid var(--renk-gunes); color: var(--renk-metin); text-decoration: none; }
.veli-premium-bant > span:nth-child(2) { display: flex; flex-direction: column; flex-grow: 1; }
.veli-premium-bant > span:nth-child(2) span { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.veli-premium-bant--aktif { background: var(--renk-yuzey); border-color: var(--renk-nane); }

/* ---------- Mola oyunları (K61) ---------- */
/* Sonuç ekranındaki teklif kartı */
.mola-kart {
  display: grid; grid-template-columns: auto 1fr; gap: var(--bosluk-3) var(--bosluk-4); align-items: center;
  padding: var(--bosluk-4) var(--bosluk-5); border-radius: var(--kose-buyuk);
  background: linear-gradient(135deg, var(--renk-dikkat-zemin), var(--renk-vurgu-acik)); border: 2px solid var(--renk-gunes);
}
.mola-kart__ikon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--renk-gunes); color: var(--renk-gunes-uzeri); }
.mola-kart__metin { display: flex; flex-direction: column; gap: 2px; }
.mola-kart__baslik { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }
.mola-kart__butonlar { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); }
.mola-kart__butonlar form { display: flex; }
.mola-kart__butonlar .buton { white-space: nowrap; padding-inline: var(--bosluk-3); }

/* Oyun ekranı */
.mola-oyun { display: flex; flex-direction: column; gap: var(--bosluk-4); }
.mola-oyun__ad { flex: 1; text-align: center; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.375rem; }
.mola-oyun__yonerge { text-align: center; color: var(--renk-metin-soluk); font-weight: 600; }
.mola-oyun__alan { width: 100%; max-width: 520px; margin: 0 auto; }
.mola-oyun__alan--bitti { opacity: 0.6; pointer-events: none; }
.mola-oyun__durum { text-align: center; min-height: 1.5em; font-weight: 700; }
.mola-oyun__butonlar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-3); max-width: 520px; width: 100%; margin: 0 auto; }

/* Yol Bulmaca ızgarası (SVG; renkler temaya uyar) */
.yb { display: block; width: 100%; height: auto; touch-action: none; user-select: none; -webkit-user-select: none; border-radius: 24px; cursor: pointer; }
.yb:focus-visible { outline: 3px solid var(--renk-odak); outline-offset: 4px; }
.yb__kare { fill: var(--renk-yuzey); stroke: var(--renk-cizgi); stroke-width: 3; transition: fill 0.12s ease; }
.yb__kare--dolu { fill: var(--renk-vurgu-acik); stroke: var(--renk-vurgu-acik); }
.yb__yol { fill: none; stroke: var(--renk-vurgu); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.yb__uc { fill: var(--renk-vurgu-uzeri); stroke: var(--renk-vurgu); stroke-width: 6; }
.yb__nokta circle { fill: var(--renk-metin); transition: fill 0.12s ease; }
.yb__nokta text { fill: var(--renk-zemin); font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 36px; pointer-events: none; }
.yb__nokta--gecildi circle { fill: var(--renk-vurgu-koyu); }
.yb__nokta--gecildi text { fill: var(--renk-vurgu-uzeri); }
.yb--tamam .yb__yol { stroke: var(--renk-basari); }
.yb--tamam .yb__kare--dolu { fill: var(--renk-basari-zemin); stroke: var(--renk-basari-zemin); }
.yb--tamam .yb__nokta--gecildi circle { fill: var(--renk-basari); }
.yb--tamam .yb__uc { stroke: var(--renk-basari); }

/* Sonuç: kutlama */
.mola-sonuc__gorsel { position: relative; width: 168px; height: 168px; display: grid; place-items: center; }
.mola-sonuc__avatar { display: flex; width: 128px; height: 128px; }
.mola-sonuc__avatar .avatar { width: 100%; height: 100%; }
.mola-sonuc--bitti .mola-sonuc__avatar { animation: mola-zipla 0.9s ease-out both; }
.mola-sonuc__parilti { position: absolute; width: 18px; height: 18px; border-radius: 50%; background: var(--renk-gunes); animation: mola-parilti 1.4s ease-out both; }
.mola-sonuc__parilti--1 { top: 6px; left: 14px; }
.mola-sonuc__parilti--2 { top: 18px; right: 4px; width: 12px; height: 12px; background: var(--renk-mercan); animation-delay: 0.15s; }
.mola-sonuc__parilti--3 { bottom: 14px; left: 2px; width: 12px; height: 12px; background: var(--renk-nane); animation-delay: 0.3s; }
.mola-sonuc__parilti--4 { bottom: 4px; right: 20px; background: var(--renk-vurgu); animation-delay: 0.45s; }
@keyframes mola-zipla { 0% { transform: scale(0.6) translateY(12px); } 55% { transform: scale(1.08) translateY(-8px); } 100% { transform: none; } }
@keyframes mola-parilti { 0% { transform: scale(0); opacity: 0; } 40% { transform: scale(1.3); opacity: 1; } 100% { transform: scale(1); opacity: 0.85; } }
@media (prefers-reduced-motion: reduce) {
  .mola-sonuc--bitti .mola-sonuc__avatar, .mola-sonuc__parilti { animation: none; }
  .yb__kare, .yb__nokta circle { transition: none; }
}

/* ---------- Büyük Deneme Sınavı (K62) ---------- */
.deneme-kart {
  display: flex; flex-direction: column; gap: 6px; padding: var(--bosluk-4) var(--bosluk-5);
  border-radius: var(--kose-buyuk); background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  color: var(--renk-metin); text-decoration: none; box-shadow: 0 4px 0 var(--renk-cizgi);
}
.deneme-kart__etiket { display: inline-flex; align-items: center; gap: 6px; font-size: var(--yazi-kucuk); font-weight: 800; color: var(--renk-vurgu); text-transform: uppercase; letter-spacing: 0.04em; }
.deneme-kart__baslik { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.1875rem; line-height: 1.2; }
.deneme-kart__alt { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.deneme-kart__not { font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); line-height: 1.4; }
.deneme-kart__sayac { display: flex; align-items: baseline; gap: 8px; font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 1.5rem; color: var(--renk-metin); font-variant-numeric: tabular-nums; }
.deneme-kart__sayac-ad { font-family: var(--yazi-aile); font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); }
.deneme-kart__buton { display: inline-flex; align-items: center; justify-content: space-between; margin-top: 4px; padding: 10px 14px; border-radius: 14px; background: var(--renk-gunes); color: var(--renk-gunes-uzeri); font-weight: 800; box-shadow: 0 3px 0 var(--renk-gunes-koyu); }
.deneme-kart--kilitli { background: linear-gradient(135deg, var(--renk-vurgu-acik), var(--renk-yuzey) 70%); border-color: var(--renk-vurgu-acik); }
.deneme-kart--acik { background: linear-gradient(135deg, var(--renk-vurgu), var(--renk-vurgu-koyu)); border-color: var(--renk-vurgu-koyu); color: var(--renk-vurgu-uzeri); box-shadow: 0 4px 0 var(--renk-vurgu-koyu); }
.deneme-kart--acik .deneme-kart__etiket { color: var(--renk-gunes); }
.deneme-kart--acik .deneme-kart__sayac, .deneme-kart--acik .deneme-kart__sayac-ad { color: var(--renk-vurgu-uzeri); }
.deneme-kart--sonuc { border-color: var(--renk-gunes); background: linear-gradient(135deg, var(--renk-dikkat-zemin), var(--renk-yuzey) 70%); }
.deneme-kart--soluk { opacity: 0.85; }
.deneme-kart .etiket-premium { margin-right: 4px; }

/* Bekleme odası */
.deneme-oda__etiket { flex: 1; text-align: center; font-weight: 800; color: var(--renk-metin-soluk); font-size: var(--yazi-kucuk); text-transform: uppercase; letter-spacing: 0.04em; margin-right: 44px; }
.deneme-oda { text-align: center; }
.deneme-oda__durum { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: var(--renk-basari-zemin); color: var(--renk-basari); font-weight: 800; }
.deneme-oda__nokta { width: 10px; height: 10px; border-radius: 50%; background: var(--renk-basari); animation: deneme-nabiz 1.6s ease-in-out infinite; }
.deneme-oda__sayac { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: var(--bosluk-5) var(--bosluk-6); border-radius: 28px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); min-width: 240px; }
.deneme-oda__sayac--buyuk { background: var(--renk-vurgu); border-color: var(--renk-vurgu-koyu); color: var(--renk-vurgu-uzeri); box-shadow: 0 6px 0 var(--renk-vurgu-koyu); }
.deneme-oda__sayac-ad { font-weight: 700; font-size: var(--yazi-kucuk); opacity: 0.85; }
.deneme-oda__sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 3.5rem; line-height: 1; font-variant-numeric: tabular-nums; }
.deneme-oda__sayi--uzun { font-size: 2rem; }
.deneme-oda__hazirlik { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: 100%; text-align: left; }
.deneme-oda__hazirlik li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); font-weight: 700; }
.deneme-oda__ikon { display: grid; place-items: center; flex: 0 0 42px; height: 42px; border-radius: 14px; background: var(--renk-bilgi-zemin); color: var(--renk-vurgu); }
.deneme-oda__bilgi { display: grid; grid-template-columns: auto auto 1fr; gap: 10px; width: 100%; margin: 0; }
.deneme-oda__bilgi div { padding: 10px 12px; border-radius: 16px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); text-align: left; }
.deneme-oda__bilgi dt { font-size: 0.75rem; font-weight: 700; color: var(--renk-metin-soluk); }
.deneme-oda__bilgi dd { margin: 0; font-weight: 800; font-size: var(--yazi-kucuk); }
.deneme-oda__avatar { display: flex; width: 104px; height: 104px; }
.deneme-oda__avatar .avatar { width: 100%; height: 100%; }
.genislik-tam { width: 100%; }
.ortali-metin { text-align: center; }
@keyframes deneme-nabiz { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(0.8); } }
@media (prefers-reduced-motion: reduce) { .deneme-oda__nokta { animation: none; } }

/* Sonuç raporu */
.deneme-rapor__ozet { display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-3); text-align: center; }
.deneme-rapor__net { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 150px; height: 150px; border-radius: 50%; background: var(--renk-vurgu); color: var(--renk-vurgu-uzeri); box-shadow: 0 6px 0 var(--renk-vurgu-koyu); }
.deneme-rapor__net-sayi { font-family: var(--yazi-baslik-aile); font-weight: 800; font-size: 3rem; line-height: 1; }
.deneme-rapor__net-ad { font-weight: 800; opacity: 0.85; }
.deneme-rapor__dilim { font-size: 1.125rem; }
.deneme-rapor__dilim strong { color: var(--renk-vurgu); }
.deneme-ders { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deneme-ders__satir { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: 20px; background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi); }
.deneme-ders__ust, .deneme-ders__sayilar { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.deneme-ders__sayilar { font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); font-weight: 700; }
.deneme-ders__sayilar strong { color: var(--renk-metin); }
.deneme-ders__etiket { padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; }
.deneme-ders__satir--guclu .deneme-ders__etiket { background: var(--renk-basari-zemin); color: var(--renk-basari); }
.deneme-ders__satir--gelisiyor .deneme-ders__etiket { background: var(--renk-dikkat-zemin); color: var(--renk-dikkat-metin); }
.deneme-ders__satir--zorlaniyor .deneme-ders__etiket { background: var(--renk-hata-zemin); color: var(--renk-hata); }
.deneme-zayif { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.deneme-zayif li { display: flex; flex-direction: column; gap: 2px; padding-bottom: 10px; border-bottom: 1px solid var(--renk-cizgi); font-weight: 700; }
.deneme-zayif li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Veli alanı: deneme geçmişi (K62) */
.veli-deneme { display: flex; flex-direction: column; gap: var(--bosluk-2); padding-top: var(--bosluk-3); border-top: 2px solid var(--renk-cizgi); }
.veli-deneme__liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--bosluk-2); }
.veli-deneme__liste li, .veli-deneme__liste li > a { display: flex; align-items: center; justify-content: space-between; gap: var(--bosluk-3); }
.veli-deneme__liste li > a { flex: 1; padding: 10px 12px; margin: -10px -12px; border-radius: 14px; color: inherit; text-decoration: none; }
.veli-deneme__liste li > a:hover { background: var(--renk-vurgu-acik); }
.veli-deneme__liste li span:first-child { display: flex; flex-direction: column; }
.veli-deneme__liste li span:first-child span { font-size: var(--yazi-kucuk); color: var(--renk-metin-soluk); font-weight: 600; }
.veli-deneme__net { display: flex; flex-direction: column; align-items: flex-end; font-weight: 800; color: var(--renk-vurgu); white-space: nowrap; }
.veli-deneme__net small { font-size: 0.75rem; color: var(--renk-metin-soluk); }
.veli-deneme__durum { font-size: var(--yazi-kucuk); font-weight: 700; color: var(--renk-metin-soluk); white-space: nowrap; }

/* ---------- Çerez onayı (K68, K19): yalnızca analitik kimliği girilmişse ve giriş yapmamış ziyaretçide ---------- */
.cerez-kutu {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; gap: var(--bosluk-3); padding: var(--bosluk-4) var(--bosluk-5);
  border-radius: var(--kose-buyuk); background: var(--renk-yuzey); border: 2px solid var(--renk-cizgi);
  box-shadow: 0 18px 40px rgb(31 26 61 / 0.18); color: var(--renk-metin);
}
.cerez-kutu[hidden] { display: none; }
.cerez-kutu__metin { margin: 0; font-size: var(--yazi-kucuk); line-height: 1.5; }
.cerez-kutu__metin strong { display: block; margin-bottom: 2px; font-family: var(--yazi-baslik-aile); font-size: 1rem; }
.cerez-kutu__dugmeler { display: grid; grid-template-columns: 1fr 1fr; gap: var(--bosluk-2); }
.cerez-tercih { margin-left: 10px; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- Günlük test hakkı doldu (K70) ---------- */
.hak-bitti { display: flex; flex-direction: column; align-items: center; gap: var(--bosluk-3); padding: var(--bosluk-6) var(--bosluk-4); text-align: center; }
.hak-bitti__maskot { position: relative; width: 150px; }
.hak-bitti__maskot .maskot { display: block; width: 100%; height: auto; animation: hak-zipla 1.6s ease-in-out infinite; }
.hak-bitti__yildiz { position: absolute; width: 26px; height: 26px; fill: var(--renk-gunes); animation: hak-parla 1.8s ease-in-out infinite; }
.hak-bitti__yildiz--1 { top: 4px; left: -18px; }
.hak-bitti__yildiz--2 { top: -8px; right: -10px; width: 20px; height: 20px; animation-delay: 0.4s; }
.hak-bitti__yildiz--3 { bottom: 34px; right: -26px; width: 18px; height: 18px; animation-delay: 0.8s; }
.hak-bitti__metin { margin: 0; max-width: 34ch; color: var(--renk-metin-soluk); font-size: var(--yazi-buyuk); line-height: 1.5; }
.hak-bitti__buton { max-width: 360px; margin-top: var(--bosluk-3); }
@keyframes hak-zipla { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@keyframes hak-parla { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .hak-bitti__maskot .maskot, .hak-bitti__yildiz { animation: none; } }

/* ---------- Premium hesap simgesi: avatarın köşesinde taç (K70) ---------- */
.avatar-kap { position: relative; display: inline-flex; flex-shrink: 0; }
.avatar-tac {
  position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, #FFD65C, #FFB020); border: 2px solid var(--renk-yuzey); box-shadow: 0 2px 6px rgb(255 176 32 / 0.45);
}
.avatar-tac svg { width: 14px; height: 14px; fill: #6B4300; }
.premium-isaret { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; margin-top: 2px; padding: 1px 8px; border-radius: var(--kose-tam);
  background: linear-gradient(135deg, #FFD65C, #FFB020); color: #4A2E00; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.02em; }
.premium-isaret svg { width: 12px; height: 12px; fill: currentColor; }

.tema-secici__secenek--premium { display: inline-flex; align-items: center; gap: 6px; opacity: 0.75; cursor: not-allowed; }
.tema-secici__secenek--premium .etiket-premium { font-size: 0.6875rem; }