/* =====================================================================
   Sagird tetbiqine xas hisseler.
   Ortaq dizayn sistemi: ../assets/base.css

   Ferq: usaq ucun daha iri yazi ve toxunma sahesi, daha yumsaq ton.
   Renk sistemi eynidir - proqram bir mehsul kimi gorunmelidir.
   ===================================================================== */

/* Usaq barmagi ucun her sey bir qeder iri */
body{font-size:16px}
.wrap{max-width:600px}
.btn{min-height:48px;font-size:15.5px;border-radius:10px}
.btn.sm{min-height:38px;font-size:14px}
input{min-height:52px;font-size:17px}

/* ------------------------------------------------------------- giris */
.hero{text-align:center;padding:26px 0 10px}
.hero .mark{
  width:56px;height:56px;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;
}
.hero .mark svg{width:56px;height:56px;filter:drop-shadow(0 4px 10px rgba(43,74,203,.25))}
.hero h1{font-size:23px;letter-spacing:-.022em;margin-bottom:7px}
.hero p{color:var(--fg-2);font-size:14.5px;margin:0}

/* Giris kodu - iri, mono, aralikli */
#code{
  font-family:var(--mono);font-size:26px;font-weight:600;
  letter-spacing:.22em;text-align:center;text-transform:uppercase;
  min-height:62px;padding:0 10px;
}
#code::placeholder{letter-spacing:.12em;font-size:17px;font-weight:400}

/* --------------------------------------------------------- test karti */
.test{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:16px;background:none;border:0;
  border-bottom:1px solid var(--n-100);transition:background .12s;
}
.test:last-child{border-bottom:0}
.test:hover{background:var(--n-25)}
.test[disabled]{opacity:.55;pointer-events:none}
.test .ic{
  width:38px;height:38px;flex:0 0 38px;border-radius:10px;
  background:var(--brand-tint);color:var(--brand);
  display:flex;align-items:center;justify-content:center;
}
.test .ic svg{width:19px;height:19px;stroke-width:1.75}
.test.lock .ic{background:var(--n-100);color:var(--n-400)}
.test .g{flex:1;min-width:0}
.test .g b{display:block;font-size:15.5px;font-weight:570;letter-spacing:-.008em}
.test .g i{display:flex;gap:7px;align-items:center;flex-wrap:wrap;
  font-style:normal;font-size:13px;color:var(--fg-2);margin-top:3px}
.test .arrow{color:var(--n-300);display:flex}
.test .arrow svg{width:18px;height:18px;stroke-width:2}

/* ------------------------------------------------------- irelileyis */
.prog{display:flex;align-items:center;gap:11px;margin:0 0 18px}
.prog .bar{flex:1;height:7px;border-radius:999px;background:var(--n-150);overflow:hidden}
.prog .bar i{display:block;height:100%;border-radius:999px;background:var(--brand);
  transition:width .3s cubic-bezier(.4,0,.2,1)}
.prog .cnt{font-size:13px;color:var(--fg-2);font-variant-numeric:tabular-nums;
  white-space:nowrap;font-weight:550}

/* ------------------------------------------------------------- sual */
.q{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:22px 20px;margin:0 0 14px;position:relative}
.q .body{font-size:19px;line-height:1.45;font-weight:550;letter-spacing:-.012em;
  padding-right:44px}
.q .spk{
  position:absolute;top:16px;right:16px;
  width:36px;height:36px;border-radius:10px;border:1px solid var(--n-300);
  background:var(--surface);color:var(--n-600);
  display:flex;align-items:center;justify-content:center;
}
.q .spk:hover{background:var(--n-50)}
.q .spk.on{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand)}
.q .spk svg{width:17px;height:17px;stroke-width:1.75}

/* -------------------------------------------------------- variantlar */
.opt{
  display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:58px;padding:12px 15px;margin:0 0 9px;
  border:1.5px solid var(--n-300);border-radius:11px;
  background:var(--surface);color:var(--fg);
  font-size:16px;line-height:1.35;font-weight:500;
  transition:border-color .12s,background .12s;
}
.opt:hover{border-color:var(--brand);background:var(--brand-tint)}
.opt .k{
  width:28px;height:28px;flex:0 0 28px;border-radius:8px;
  background:var(--n-100);color:var(--n-600);
  display:flex;align-items:center;justify-content:center;
  font-size:13.5px;font-weight:650;
}
.opt .t{flex:1}
.opt .m{display:none;flex:0 0 20px}
.opt .m svg{width:20px;height:20px;stroke-width:2.2}

.opt.sel{border-color:var(--brand);background:var(--brand-tint);
  color:var(--brand);font-weight:560}
.opt.sel .k{background:var(--brand);color:#fff}

.opt.ok{border-color:var(--ok);background:var(--ok-tint);color:#05603a}
.opt.ok .k{background:var(--ok);color:#fff}
.opt.ok .m{display:flex;color:var(--ok)}
.opt.no{border-color:var(--err);background:var(--err-tint);color:#912018}
.opt.no .k{background:var(--err);color:#fff}
.opt.no .m{display:flex;color:var(--err)}
.opt.dim{opacity:.5}
.opts.locked .opt{pointer-events:none}

/* Cavabdan sonra izah */
.why{
  display:flex;gap:9px;align-items:flex-start;
  background:var(--n-50);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;margin:12px 0 0;font-size:14px;line-height:1.55;color:var(--n-700);
}
.why svg{width:16px;height:16px;flex:0 0 16px;margin-top:2px;stroke-width:1.75;color:var(--fg-3)}

/* ----------------------------------------------------------- netice */
.score{text-align:center;padding:8px 0 4px}
.ring{
  width:132px;height:132px;margin:0 auto 16px;position:relative;
  display:flex;align-items:center;justify-content:center;
}
.ring svg{position:absolute;inset:0;width:132px;height:132px;transform:rotate(-90deg)}
.ring .track{stroke:var(--n-150)}
.ring .fill{stroke:var(--brand);stroke-linecap:round;
  transition:stroke-dasharray .7s cubic-bezier(.4,0,.2,1)}
.ring.pass .fill{stroke:var(--ok)}
.ring .val{position:relative;font-size:32px;font-weight:680;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.ring .val s{text-decoration:none;font-size:16px;color:var(--fg-3);font-weight:550}
.score .lbl{font-size:15px;color:var(--fg-2);margin-bottom:2px}
.score .sub{font-size:13px;color:var(--fg-3)}

/* Netice: butun suallar - duz (.right) ve sehv (.wrong) eyni qatarda */
.wrong,.right{padding:14px 16px;border-bottom:1px solid var(--n-100);font-size:14.5px;line-height:1.5}
.wrong:last-child,.right:last-child{border-bottom:0}
.wrong b,.right b{display:block;font-weight:550;margin-bottom:4px}
.wrong i,.right i{font-style:normal;color:var(--fg-2);font-size:13.5px}
.qh{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.qh b{flex:1}
.qmark{flex:0 0 auto;width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;margin-top:1px}
.qmark svg{width:12px;height:12px}
.qmark.y{background:var(--ok-tint);color:var(--ok)}
.qmark.n{background:var(--err-tint);color:var(--err)}
.picked{margin:2px 0 0;font-size:13px;color:var(--fg-3)}

/* ------------------------------------------------------------ lovhe */
.lb{display:flex;align-items:center;gap:13px;padding:13px 16px;
  border-bottom:1px solid var(--n-100)}
.lb:last-child{border-bottom:0}
.lb.me{background:var(--brand-tint)}
.lb .rk{
  width:28px;height:28px;flex:0 0 28px;border-radius:999px;
  background:var(--n-100);color:var(--n-600);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:650;font-variant-numeric:tabular-nums;
}
.lb.me .rk{background:var(--brand);color:#fff}
.lb .nm{flex:1;font-size:15px;font-weight:520;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pc{font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}

@media (max-width:420px){
  .q .body{font-size:17.5px}
  #code{font-size:22px;letter-spacing:.16em}
}

#btnPrev{margin-top:9px}

/* Onceki netice - test siyahisinda */
.test .best{
  flex:0 0 auto;font-size:14px;font-weight:620;color:var(--ok);
  font-variant-numeric:tabular-nums;letter-spacing:-.015em;
}
.test.lock .best{color:var(--fg-3)}
/* Islenmis test - kilidli deyil, neticeye acilir */
.test.done .ic{background:var(--ok-tint);color:var(--ok)}
.test .ic svg{stroke-width:1.75}

/* Lovhede cehd sayi */
.lb .nm s{text-decoration:none;font-size:11.5px;color:var(--fg-3);font-weight:500}

/* Muellimin tapsirigi - sol kenarda incə nisan */
.test.asg{box-shadow:inset 3px 0 0 var(--brand)}
.test.asg.done{box-shadow:inset 3px 0 0 var(--ok)}

/* Yazılı sual: şagird cavabı yazır */
.tans{
  width:100%;min-height:52px;padding:0 16px;font-size:17px;
  border:1.5px solid var(--n-300);border-radius:var(--r-lg);
  background:var(--surface);color:var(--fg);font-family:inherit;
}
.tans:focus{outline:none;border-color:var(--brand);box-shadow:var(--ring)}

/* ------------------------------------------------- sual xeritesi
   Variantlarin altinda nomreli xanalar: cavablanan dolu, hazirki
   cerciveli.  Klikle hemin suala kecid. */
.qnav{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.qnav button{
  width:36px;height:36px;border-radius:9px;flex:0 0 36px;
  border:1px solid var(--line);background:var(--surface);
  font-size:13px;font-weight:600;color:var(--fg-2);cursor:pointer;
}
.qnav button.done{
  background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand);
}
.qnav button.cur{
  border-color:var(--brand);box-shadow:0 0 0 1px var(--brand);color:var(--brand);
}

/* xos detallar - sagird */
body{background:
  radial-gradient(52% 30% at 50% 0, rgba(43,74,203,.05), transparent 70%)
  no-repeat, var(--n-25)}
.test{transition:background .12s}
.test .arrow{transition:transform .15s,color .15s}
.test:hover .arrow{transform:translateX(3px);color:var(--brand)}
.opt{transition:border-color .12s,background .12s,transform .08s}
.opt:active{transform:scale(.985)}
.qnav button{transition:border-color .12s,background .12s,color .12s}
.qnav button:hover{border-color:var(--brand)}
.ring.pass .fill{filter:drop-shadow(0 0 6px rgba(14,147,132,.45))}
/* lovhede ilk ucluk - medal rengleri */
.lb:nth-child(1) .rk{background:linear-gradient(135deg,#f5c343,#e8a417);color:#5b3d00}
.lb:nth-child(2) .rk{background:linear-gradient(135deg,#d7dde7,#aeb8c8);color:#3c4657}
.lb:nth-child(3) .rk{background:linear-gradient(135deg,#e2a06b,#c77b3f);color:#5a3010}
.lb.me:nth-child(n+4) .rk{background:var(--brand);color:#fff}
.tans:focus{border-color:var(--brand)}

/* sual sehvi bildirisi */
.wrong .rlink{border:0;background:none;cursor:pointer;font:inherit;
  font-size:11.5px;color:var(--fg-3,#8a90a4);text-decoration:underline;
  text-underline-offset:2px;padding:0;display:block;margin-top:6px}
.wrong .rfrm{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.wrong .rfrm select{flex:1;min-width:150px}
.wrong .rok{margin-top:6px;font-size:12.5px;font-weight:560;color:var(--ok,#0e9384)}

/* salamlama basligi + kicik gostericiler */
.shero{display:flex;align-items:center;gap:12px;margin:2px 0 14px}
.shero .av{width:44px;height:44px;flex:0 0 44px;border-radius:14px;font-size:17px}
.shero b{display:block;font-size:18px;letter-spacing:-.01em}
.shero i{display:block;font-style:normal;font-size:12.5px;color:var(--fg-3);margin-top:2px}
.stiles{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px;margin:0 0 16px}
.st{border-radius:14px;padding:12px 10px;text-align:center;color:#fff;border:0}
.st b{display:block;font-size:20px;font-weight:680;line-height:1.2}
.st b svg{width:20px;height:20px}
.st span{display:block;font-size:11px;opacity:.85;margin-top:2px}
.st.a{background:linear-gradient(135deg,#2b4acb,#4a63e0)}
.st.b{background:linear-gradient(135deg,#0e9384,#18b8a6)}
.st.c{background:linear-gradient(135deg,#232a38,#3a4358);cursor:pointer;font:inherit}
.st.c:active{transform:scale(.97)}

/* en yuksek netice - stiles altinda kicik setir */
.beststat{font-size:12.5px;color:var(--fg-3);margin:-8px 0 16px}
.beststat b{color:var(--fg);font-weight:640}

/* novbeti ders - yalniz baxmaq ucun, klik olunmur */
.nlesson{margin:0 0 16px}
.nl-tag{display:block;font-size:11px;font-weight:600;letter-spacing:.03em;
  text-transform:uppercase;color:var(--fg-3);margin-bottom:4px}
.nlesson b{display:block;font-size:14.5px;font-weight:600}
.nlesson i{display:block;font-style:normal;font-size:12.5px;color:var(--fg-3);margin-top:2px}

/* son tarix yaxinlasanda qirmizi */
.test .due{color:var(--err);font-weight:600}

/* netice cipleri - faize gore reng */
.best.bh{color:var(--ok)}
.best.bm{color:var(--warn)}
.best.bl{color:var(--err)}
.ring.mid .fill{stroke:var(--warn)}
.ring.lo .fill{stroke:var(--err)}

/* neticelerim: mini qrafik + setirler */
.dyn{display:flex;align-items:flex-end;gap:6px;height:90px}
.dyn i{flex:1;max-width:34px;border-radius:6px 6px 2px 2px;min-height:5px}
.dyn .dh{background:var(--ok)}
.dyn .dm{background:var(--warn)}
.dyn .dl{background:var(--err)}
.myr{display:flex;align-items:center;gap:12px;padding:13px 16px;
  border-bottom:1px solid var(--n-100)}
.myr:last-child{border-bottom:0}
.myr .g{flex:1;min-width:0}
.myr b{display:block;font-size:14px;font-weight:560}
.myr i{display:block;font-style:normal;font-size:12px;color:var(--fg-3);margin-top:2px}
.myr .best{font-size:15px;font-weight:640}
.myr .at{flex:0 0 auto;font-size:12px;color:var(--fg-3);white-space:nowrap}

/* "sene" - yalniz bu sagirde verilmis tapsiriq */
.test .g b .solo.diag{background:var(--ok-tint);color:var(--ok);border-color:var(--ok-line)}
.test .g b .solo{display:inline-block;margin-left:7px;padding:1px 7px;
  border-radius:999px;font-size:10.5px;font-weight:620;vertical-align:1px;
  background:var(--brand-tint);color:var(--brand);border:1px solid var(--brand-line)}

/* qaralamadan qaytarilan cavablar - bir defelik bildiris */
.ok.restored{margin:0 0 14px}

/*  Ana səhifəyə qayıdış - giriş ekranında üst zolaq gizli olduğu üçün
    nişan görünmür; keçid burada ayrıca lazımdır. */
.homelink,.helplink{color:var(--fg-3);text-decoration:none;font-size:12.5px}
.homelink:hover,.helplink:hover{color:var(--brand);text-decoration:underline}

/* yigilmis bolme (movzu xeritesi - yaxsi movzular) */
details.more summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--fg-2);padding:8px 2px;list-style:none;display:flex;align-items:center;gap:8px}
details.more summary::-webkit-details-marker{display:none}
details.more summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s;flex:0 0 auto}
details.more[open] summary::before{transform:rotate(45deg)}
details.more summary .fn{font-size:11.5px;font-weight:600;background:var(--n-100);color:var(--fg-3);padding:2px 7px;border-radius:999px}

/* fenn cipleri (serbest mesq) ve "Daha N" duymesi - muellim paneli ile eyni gorunus */
.chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
.chip{min-height:30px;padding:0 11px;border:1px solid var(--n-200);background:var(--surface);
  border-radius:999px;font:inherit;font-size:12.5px;color:var(--fg-2);cursor:pointer;transition:.12s}
.chip.on{background:var(--brand-tint);border-color:var(--brand-line);color:var(--brand);font-weight:550}
.morebtn{display:block;width:100%;padding:11px 14px;border:none;border-top:1px solid var(--line);
  background:transparent;color:var(--brand);font:inherit;font-size:13px;font-weight:600;cursor:pointer;text-align:center}
.morebtn:hover{background:var(--brand-tint)}

/* yumsaq derinlik: rengli kartlar ve test setirleri */
.st{box-shadow:0 2px 4px rgba(16,24,40,.08),0 10px 22px -10px rgba(43,74,203,.45)}
@media (hover:hover){
  .test{transition:background .12s,transform .12s}
  .test:not([disabled]):hover{transform:translateY(-1px)}
}

/* «Bizə yaz» - test siyahisinin sonunda yigilmis forma */
details.fbd summary{justify-content:center;color:var(--fg-3)}
details.fbd[open] summary{color:var(--fg-2)}
.fbcard textarea{width:100%;resize:vertical;font:inherit;font-size:15px;line-height:1.5;
  padding:10px 12px;border:1px solid var(--n-200);border-radius:10px;background:var(--surface);color:var(--fg)}
.fbrow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px}
.fbn{font-size:12px;color:var(--fg-3);font-variant-numeric:tabular-nums}

/* "Emin deyilem" - cavab terzi (db/128) */
.surerow{display:flex;justify-content:flex-end;margin:6px 0 2px}
.sure{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:1px solid var(--n-200);
  border-radius:999px;background:var(--surface);font:inherit;font-size:13px;color:var(--fg-3);cursor:pointer}
.sure svg{width:14px;height:14px}
.sure.on{border-color:var(--warn-line);background:var(--warn-tint);color:#93370d;font-weight:600}

/* Sehv defteri (db/129) */
/* movzu mesqi (db/133): setir = ad + bal zolagi */
.arow{display:flex;align-items:center;gap:10px;width:100%;text-align:left;padding:11px 16px;
  border:0;border-top:1px solid var(--n-100);background:transparent;font:inherit;color:var(--fg);cursor:pointer}
.arow:hover{background:var(--n-25)}
.arow .g{flex:1;min-width:0}
.arow .g b{display:block;font-size:14px;font-weight:560}
.arow .g i{display:block;font-style:normal;font-size:12px;color:var(--fg-3);margin-top:2px}
.abar{flex:0 0 64px;height:7px;border-radius:999px;background:var(--n-150);overflow:hidden}
.abar i{display:block;height:100%;background:var(--brand);border-radius:999px}
.abar.done i{background:var(--ok)}
.asc{flex:0 0 28px;text-align:right;font-size:13px;font-weight:640;color:var(--fg-2);font-variant-numeric:tabular-nums}
.adq{padding:0 16px 8px;margin:0}
.adq.full{color:var(--warn)}
.adall{margin:4px 16px 12px}
.adall summary{font-size:13px;color:var(--brand);cursor:pointer}
.adsub{margin:10px 0 0;font-weight:600;color:var(--fg-2)}
.adall .arow{padding-left:0;padding-right:0}
.adhead{margin:0 0 10px}
.adhead b{display:block;font-size:17px;font-weight:640}
.adhead span{font-size:12.5px;color:var(--fg-3)}
.mist .mrow{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.mist .mrow b{font-size:24px;font-weight:700;color:var(--brand);font-variant-numeric:tabular-nums}
.mist .mrow b.ok2{color:var(--ok);margin-left:14px}
.mist .mrow span{font-size:13px;color:var(--fg-2)}
.opt.right{border-color:var(--ok-line);background:var(--ok-tint)}
.opt.right .k{background:var(--ok);color:#fff}
.opt.wrong{border-color:var(--err-line);background:var(--err-tint)}
.opt.wrong .k{background:var(--err);color:#fff}
.opt[disabled]{cursor:default;opacity:.9}
#mFb .ok i,#mFb .warn i{font-style:normal;display:block;margin-top:4px;opacity:.85}