/* Seviye testi */
.st-kap { margin-top: -88px; padding-bottom: 80px; }
.st-giris, .st { max-width: 720px; margin: 0 auto; background: var(--kart); border: 1px solid var(--cizgi); border-radius: 28px; padding: 32px; box-shadow: var(--golge-buyuk); }
.st, .st-sonuc { scroll-margin-top: 96px; }
.st-giris { display: grid; gap: 18px; justify-items: center; text-align: center; padding: 34px 40px; }
.st-giris h2 { margin: -4px 0 0; font-size: 24px; color: var(--baslik); letter-spacing: -.01em; }
.st-merdiven { display: flex; align-items: flex-end; gap: 10px; height: 132px; }
.st-merdiven span { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; width: 92px; padding: 10px 6px; color: #fff;
                    border-radius: 14px 14px 6px 6px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.15); }
.st-merdiven b { font-size: 20px; line-height: 1; } .st-merdiven small { font-size: 10.5px; font-weight: 700; opacity: .9; }
.st-merdiven .s-a1 { height: 40%; background: linear-gradient(180deg, var(--mint), #0f8a5c); } .st-merdiven .s-a2 { height: 60%; background: linear-gradient(180deg, var(--mavi), #1e3a8a); }
.st-merdiven .s-b1 { height: 80%; background: linear-gradient(180deg, var(--mor), #4c1d95); } .st-merdiven .s-b2 { height: 100%; background: linear-gradient(180deg, #f59e0b, #b45309); }
.st-bilgi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; width: 100%; }
.st-bilgi div { display: grid; justify-items: center; gap: 2px; background: var(--kart2); border: 1px solid var(--cizgi); border-radius: 18px; padding: 14px; }
.st-bilgi i { font-style: normal; font-size: 22px; }
.st-bilgi b { display: block; font-size: 28px; font-weight: 800; color: var(--baslik); line-height: 1.1; } .st-bilgi span { color: var(--soluk); font-weight: 700; font-size: 13.5px; }
.st-maddeler { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; width: 100%; }
.st-maddeler li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 10px 14px; border-radius: 14px; background: var(--kart2); color: var(--metin2); font-weight: 600; }
.st-maddeler i { flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font-size: 18px; background: var(--kart); box-shadow: var(--golge); }
.st-giris .btn { min-width: 280px; }
.st-ust { display: flex; justify-content: space-between; align-items: center; font-weight: 800; color: var(--soluk); }
.st-sev { color: #fff; font-size: 13px; padding: 4px 12px; border-radius: 99px; }
.st-sev.s-a1 { background: var(--mint); } .st-sev.s-a2 { background: var(--mavi); } .st-sev.s-b1 { background: var(--mor); } .st-sev.s-b2 { background: #f59e0b; }
.st-ilerleme { height: 8px; border-radius: 8px; background: var(--cizgi); margin: 12px 0 22px; overflow: hidden; }
.st-ilerleme i { display: block; height: 100%; background: linear-gradient(90deg, var(--altin), var(--mint)); transition: width .3s; }
.st-kart { display: grid; gap: 14px; animation: st-gel .3s ease; }
@keyframes st-gel { from { opacity: 0; transform: translateX(16px); } }
.st-dinle { justify-self: start; border: 0; cursor: pointer; font: 800 15px inherit; font-family: inherit; color: var(--altin); background: var(--lac); padding: 12px 18px; border-radius: 14px; }
.st-metin { white-space: pre-wrap; background: var(--kart2); border-radius: 14px; padding: 14px 16px; color: var(--metin2); line-height: 1.6; }
.st-soru { font-size: 21px; font-weight: 800; color: var(--baslik); line-height: 1.35; }
.st-secenekler { display: grid; gap: 10px; }
.st-sec { display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; border-radius: 14px; border: 1.5px solid var(--cizgi); background: var(--kart);
          font: 600 16px inherit; font-family: inherit; color: var(--metin); cursor: pointer; transition: border-color .15s, background .15s, transform .1s; }
.st-sec:hover { border-color: var(--altin); } .st-sec:active { transform: scale(.99); }
.st-sec span { flex: none; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; background: #0b1640; color: var(--altin); }
.st-sec.secili { border-color: var(--lac3); background: #eef2ff; } .st-sec.secili span { background: var(--lac3); color: #fff; }
[data-tema="koyu"] .st-sec.secili { background: #1b2a66; }
.st-alt { display: flex; justify-content: space-between; margin-top: 22px; }

.st-sonuc { display: grid; gap: 14px; justify-items: center; text-align: center; animation: st-gel .35s ease; }
.st-rozet { font-size: 44px; font-weight: 800; color: #0b1640; background: var(--altin); padding: 10px 28px; border-radius: 22px; box-shadow: 0 10px 26px rgba(255,198,26,.4); }
.st-sonuc h2 { font-size: 30px; color: var(--baslik); } .st-sonuc > p { color: var(--metin2); max-width: 520px; }
.st-cubuklar { display: flex; gap: 18px; align-items: flex-end; height: 170px; margin: 8px 0; }
.st-cubuk { display: grid; grid-template-rows: auto 1fr auto; justify-items: center; gap: 6px; width: 56px; height: 100%; }
.st-cubuk i { width: 100%; align-self: end; border-radius: 12px 12px 4px 4px; background: var(--cizgi); }
.st-cubuk i.ok { background: linear-gradient(180deg, var(--mint), #0f8a5c); }
.st-cubuk b { color: var(--baslik); font-size: 14px; } .st-cubuk span { font-weight: 800; color: var(--soluk); }
.st-not { color: var(--soluk) !important; font-size: 13px; }
@media (max-width: 640px) { .st-giris, .st { padding: 22px 18px; border-radius: 22px; } .st-soru { font-size: 18px; } .st-giris .btn { min-width: 0; width: 100%; } }

@media (max-width: 760px) { .st-kap { margin-top: -48px; } }

@media (max-width: 640px) { .st-giris { padding: 24px 16px; gap: 14px; } .st-merdiven { height: 104px; gap: 6px; } .st-merdiven span { width: 68px; } .st-merdiven small { display: none; }
  .st-bilgi { gap: 8px; } .st-bilgi div { padding: 10px 6px; } .st-bilgi b { font-size: 22px; } .st-giris h2 { font-size: 20px; } }