/* Plus Jakarta Sans from this server (OFL, fonts/OFL.txt): the CSP allows only same-origin styles and fonts, which blocked Google Fonts */
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Plus Jakarta Sans";font-style:normal;font-weight:400 800;font-display:swap;src:url(fonts/plus-jakarta-sans-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  --bg:#060a13;--bg2:#0b1222;--panel:rgba(17,25,42,.72);--panel2:rgba(24,34,56,.85);--line:rgba(255,255,255,.08);--line2:rgba(255,255,255,.14);
  --txt:#e9eef7;--mut:#8b9ab3;--teal:#19d3c5;--violet:#7c5cff;--coral:#ff6b6b;--amber:#ffc542;--green:#3ddc97;--blue:#3aa0ff;--pink:#ff8fd1;
  --r:18px;--shadow:0 18px 50px rgba(0,0,0,.45);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--txt);font-family:"Segoe UI Variable","Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",sans-serif;font-size:15px}
body{overflow-x:hidden}
button,input,select{font:inherit;color:inherit}
a{color:var(--teal)}
.hidden{display:none!important}
/* arka plan */
#bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:
  radial-gradient(900px 500px at 12% -10%,rgba(124,92,255,.22),transparent 60%),
  radial-gradient(800px 500px at 110% 10%,rgba(25,211,197,.16),transparent 60%),
  radial-gradient(700px 600px at 50% 120%,rgba(255,107,107,.12),transparent 60%),var(--bg)}
#bg:before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:44px 44px;mask-image:radial-gradient(ellipse at 50% 30%,#000 30%,transparent 75%);opacity:.5}
#bg svg{position:absolute;left:0;right:0;top:62%;width:100%;height:120px;opacity:.18}
#bg path{stroke:var(--teal);stroke-width:2;fill:none;stroke-dasharray:1400;animation:ecg 6s linear infinite}
@keyframes ecg{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}}
/* yerleşim */
#app{max-width:1180px;margin:0 auto;padding:18px 16px 60px}
.top{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.logo{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;cursor:pointer;user-select:none}
.logo small{display:block;font-size:10.5px;letter-spacing:.32em;color:var(--teal);font-weight:700}
.logo b{font-size:18px}
.sp{flex:1}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;background:var(--panel);border:1px solid var(--line);font-weight:700;font-size:13.5px;white-space:nowrap}
.chip.fire{color:#ffb86b}.chip.lvl{color:var(--teal)}
.avatar{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:21px;border:2px solid var(--c,var(--teal));background:rgba(255,255,255,.04);cursor:pointer;flex:0 0 auto}
.avatar.lg{width:72px;height:72px;font-size:38px;border-width:3px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:18px;backdrop-filter:blur(10px);box-shadow:var(--shadow)}
.grid{display:grid;gap:16px}
.home{grid-template-columns:1fr 340px}
@media(max-width:900px){.home{grid-template-columns:1fr}}
h1,h2,h3{margin:0 0 8px;line-height:1.2}
h1{font-size:clamp(28px,5vw,46px);letter-spacing:-.02em}
h2{font-size:20px}h3{font-size:15px;color:var(--mut);font-weight:600;text-transform:uppercase;letter-spacing:.12em}
.mut{color:var(--mut)}.small{font-size:12.5px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 18px;border-radius:14px;border:1px solid var(--line2);background:var(--panel2);font-weight:700;cursor:pointer;transition:transform .12s,filter .15s,background .15s}
.btn:hover{filter:brightness(1.15)}.btn:active{transform:scale(.97)}
.btn.pri{background:linear-gradient(135deg,var(--teal),#12a7e0);color:#021016;border:0;box-shadow:0 10px 30px rgba(25,211,197,.28)}
.btn.vio{background:linear-gradient(135deg,var(--violet),#b36bff);color:#fff;border:0;box-shadow:0 10px 30px rgba(124,92,255,.3)}
.btn.ghost{background:transparent}
.btn.block{width:100%}
.btn.lg{padding:16px 22px;font-size:17px;border-radius:16px}
.btn:disabled{opacity:.45;cursor:not-allowed}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
/* karşılama */
.hero{min-height:calc(100vh - 120px);display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center}
@media(max-width:860px){.hero{grid-template-columns:1fr}}
.hero p.lead{font-size:18px;color:#c6d1e4;max-width:560px}
.grad{background:linear-gradient(120deg,var(--teal),var(--violet) 50%,var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.feat{display:grid;gap:10px;margin:22px 0}
.feat div{display:flex;gap:12px;align-items:flex-start}
.feat i{font-style:normal;font-size:22px;width:40px;height:40px;display:grid;place-items:center;border-radius:12px;background:var(--panel);border:1px solid var(--line);flex:0 0 auto}
.showcase{position:relative;aspect-ratio:1;width:100%;max-width:460px;margin:auto;overflow:hidden;border-radius:50%}
.showcase .ring{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(25,211,197,.25);animation:spin 18s linear infinite}
.showcase .ring:nth-child(2){inset:12%;border-color:rgba(124,92,255,.3);animation-duration:12s;animation-direction:reverse}
.showcase .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(25,211,197,.35),transparent 20%);animation:spin 4s linear infinite;mask:radial-gradient(circle,transparent 20%,#000 21%)}
.showcase img{position:absolute;inset:22%;width:56%;height:56%;object-fit:cover;border-radius:50%;filter:contrast(1.1);box-shadow:0 0 60px rgba(25,211,197,.25)}
.showcase .blip{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 0 rgba(255,107,107,.6);animation:blip 2s infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes blip{0%{box-shadow:0 0 0 0 rgba(255,107,107,.6)}100%{box-shadow:0 0 0 22px rgba(255,107,107,0)}}
/* ana üs */
.daily{position:relative;overflow:hidden;padding:24px;background:linear-gradient(135deg,rgba(25,211,197,.16),rgba(124,92,255,.14));border-color:rgba(25,211,197,.28)}
.daily:after{content:"🩺";position:absolute;right:-10px;bottom:-24px;font-size:140px;opacity:.08;transform:rotate(-14deg)}
.dailyrow{display:flex;gap:20px;align-items:center}
.ring-wrap{position:relative;width:96px;height:96px;flex:0 0 auto}
.ring-wrap b{position:absolute;inset:0;display:grid;place-items:center;font-size:20px}
.modes{grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}
.mode{position:relative;overflow:hidden;cursor:pointer;min-height:132px;display:flex;flex-direction:column;justify-content:flex-end;transition:transform .18s,border-color .18s}
.mode:hover{transform:translateY(-3px);border-color:var(--line2)}
.mode .ic{position:absolute;right:12px;top:10px;font-size:40px;filter:drop-shadow(0 8px 16px rgba(0,0,0,.4))}
.mode b{font-size:17px}.mode span{color:var(--mut);font-size:13px}
.mode:before{content:"";position:absolute;inset:0;background:radial-gradient(260px 120px at 100% 0%,var(--g,rgba(25,211,197,.18)),transparent 70%)}
.mode .tag{position:absolute;left:12px;top:12px;font-size:11px;font-weight:800;letter-spacing:.08em;padding:3px 8px;border-radius:999px;background:rgba(0,0,0,.35);color:var(--amber)}
.lb{display:grid;gap:6px}
.lbr{display:grid;grid-template-columns:30px 32px 1fr auto;gap:10px;align-items:center;padding:8px 10px;border-radius:12px;background:rgba(255,255,255,.025)}
.lbr.me{background:rgba(25,211,197,.14);border:1px solid rgba(25,211,197,.35)}
.lbr .rk{font-weight:800;color:var(--mut);text-align:center}
.lbr .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--c);font-size:16px}
.lbr .nm{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.lbr .nm small{display:block;color:var(--mut);font-weight:400;font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.lbr .v{font-weight:800;font-variant-numeric:tabular-nums}
.badges{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:8px}
.bdg{aspect-ratio:1;border-radius:14px;display:grid;place-items:center;font-size:28px;background:rgba(255,255,255,.04);border:1px solid var(--line);position:relative}
.bdg.off{filter:grayscale(1);opacity:.28}
.bdg[title]:hover{border-color:var(--amber)}
.bar{height:8px;border-radius:99px;background:rgba(255,255,255,.07);overflow:hidden}
.bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--teal),var(--violet))}
.pilot{font-size:12px;color:var(--mut);text-align:center;margin-top:26px;line-height:1.6}
/* soru ekranı */
.play{max-width:860px;margin:0 auto}
.phead{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.x{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--panel);border:1px solid var(--line);cursor:pointer;font-size:18px}
.dots{display:flex;gap:4px;flex:1}
.dots i{flex:1;height:7px;border-radius:9px;background:rgba(255,255,255,.08)}
.dots i.ok{background:var(--green)}.dots i.no{background:var(--coral)}.dots i.cur{background:var(--teal);box-shadow:0 0 12px var(--teal)}.dots i.sk{background:#556}
.combo{font-weight:900;color:var(--amber);min-width:62px;text-align:right}
.qcard{padding:24px}
.qmeta{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.pill{font-size:11.5px;font-weight:700;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.06);color:#b8c4d8}
.pill.t{background:rgba(124,92,255,.18);color:#cbbdff}.pill.r{background:rgba(58,160,255,.18);color:#a9d3ff}
.stem{font-size:clamp(17px,2.4vw,20px);line-height:1.5;margin:4px 0 18px;font-weight:600}
.opts{display:grid;gap:10px}
.opt{display:flex;gap:12px;align-items:center;text-align:left;padding:14px 16px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.03);cursor:pointer;transition:all .15s;font-size:15.5px;line-height:1.35}
.opt:hover:not(:disabled){background:rgba(255,255,255,.07);border-color:rgba(25,211,197,.45);transform:translateX(3px)}
.opt .k{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-weight:900;background:rgba(255,255,255,.07);flex:0 0 auto;font-size:13px}
.opt.sel{border-color:var(--teal);background:rgba(25,211,197,.12)}
.opt.ok{border-color:var(--green);background:rgba(61,220,151,.16)}.opt.ok .k{background:var(--green);color:#03170e}
.opt.no{border-color:var(--coral);background:rgba(255,107,107,.14)}.opt.no .k{background:var(--coral);color:#260606}
.opt:disabled{cursor:default}
.conf{display:flex;gap:8px;align-items:center;margin-top:14px;flex-wrap:wrap}
.tog{padding:8px 12px;border-radius:12px;border:1px solid var(--line2);background:transparent;cursor:pointer;font-weight:700;font-size:13px}
.tog.on{background:rgba(255,197,66,.16);border-color:var(--amber);color:var(--amber)}
.fb{margin-top:16px;padding:18px;border-radius:16px;border:1px solid var(--line2);animation:up .28s ease}
.fb.ok{background:linear-gradient(135deg,rgba(61,220,151,.14),rgba(25,211,197,.06));border-color:rgba(61,220,151,.4)}
.fb.no{background:linear-gradient(135deg,rgba(255,107,107,.14),rgba(124,92,255,.06));border-color:rgba(255,107,107,.4)}
.fb h2{display:flex;gap:10px;align-items:center}
.fb p{line-height:1.6;margin:8px 0}
.trap{display:inline-block;font-size:12px;font-weight:800;padding:4px 10px;border-radius:999px;background:rgba(255,197,66,.15);color:var(--amber);margin-top:4px}
@keyframes up{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.xpf{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);font-size:34px;font-weight:900;color:var(--amber);pointer-events:none;animation:xpf 1s ease forwards;text-shadow:0 6px 30px rgba(255,197,66,.6);z-index:50}
@keyframes xpf{0%{opacity:0;transform:translate(-50%,-30%) scale(.7)}25%{opacity:1;transform:translate(-50%,-60%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-120%) scale(1)}}
/* radyoloji */
.rad{position:relative;width:100%;max-width:560px;margin:0 auto 14px;aspect-ratio:1;border-radius:16px;overflow:hidden;background:#000;border:1px solid var(--line2);cursor:crosshair;touch-action:manipulation}
.rad img{position:absolute;inset:0;width:100%;height:100%;image-rendering:auto;user-select:none;-webkit-user-drag:none}
.rad .ov{opacity:0;transition:opacity .4s}.rad .ov.show{opacity:1}
.pin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;border:3px solid var(--amber);box-shadow:0 0 0 3px rgba(0,0,0,.5),0 0 18px var(--amber);pointer-events:none}
.pin:after{content:"";position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px;border-radius:50%;background:var(--amber)}
.pin.ok{border-color:var(--green);box-shadow:0 0 0 3px rgba(0,0,0,.5),0 0 18px var(--green)}.pin.ok:after{background:var(--green)}
.pin.no{border-color:var(--coral);box-shadow:0 0 0 3px rgba(0,0,0,.5),0 0 18px var(--coral)}.pin.no:after{background:var(--coral)}
.marker{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:3px solid #ffd84d;box-shadow:0 0 0 3px rgba(0,0,0,.55);animation:mk 1.4s infinite;pointer-events:none}
.marker:before{content:"";position:absolute;left:50%;top:-26px;width:3px;height:20px;margin-left:-1.5px;background:#ffd84d;box-shadow:0 0 0 2px rgba(0,0,0,.5)}
@keyframes mk{50%{transform:scale(1.12)}}
.radcap{position:absolute;left:10px;bottom:8px;font-size:11px;color:#cfd8e6;background:rgba(0,0,0,.55);padding:3px 8px;border-radius:8px;pointer-events:none}
.orient{position:absolute;top:8px;font-size:12px;font-weight:900;color:#ffd84d;background:rgba(0,0,0,.55);padding:2px 7px;border-radius:6px;pointer-events:none}
/* zamanlayıcı */
.timer{position:relative;width:46px;height:46px;flex:0 0 auto}
.timer b{position:absolute;inset:0;display:grid;place-items:center;font-weight:900;font-size:14px}
/* düello */
.vs{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:14px}
.side{display:flex;gap:10px;align-items:center;padding:12px;border-radius:16px;background:var(--panel);border:1px solid var(--line)}
.side.r{flex-direction:row-reverse;text-align:right}
.side .sc{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;margin-left:auto}
.side.r .sc{margin-left:0;margin-right:auto}
.side small{display:block;color:var(--mut);font-size:12px}
.vsx{font-weight:900;font-size:20px;color:var(--coral)}
.st{font-size:12px;font-weight:800;color:var(--mut)}.st.done{color:var(--green)}
.radar{width:240px;height:240px;margin:30px auto;position:relative;border-radius:50%;border:1px solid rgba(25,211,197,.3);background:radial-gradient(circle,rgba(25,211,197,.08),transparent 70%)}
.radar:before,.radar:after{content:"";position:absolute;inset:25%;border-radius:50%;border:1px solid rgba(25,211,197,.2)}
.radar:after{inset:45%}
.radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(25,211,197,.45),transparent 25%);animation:spin 2s linear infinite}
.radar .me{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:40px}
.big{font-size:clamp(40px,8vw,72px);font-weight:900;letter-spacing:-.03em}
.count{font-size:120px;font-weight:900;text-align:center;animation:pop .9s ease infinite}
@keyframes pop{0%{transform:scale(.6);opacity:0}30%{transform:scale(1.1);opacity:1}100%{transform:scale(1);opacity:.9}}
/* canlı oda */
.code{font-size:clamp(46px,10vw,96px);font-weight:900;letter-spacing:.14em;text-align:center;background:linear-gradient(120deg,var(--amber),var(--coral));-webkit-background-clip:text;background-clip:text;color:transparent}
.plist{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.plist span{padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.06);border:1px solid var(--line);font-weight:600;animation:up .3s}
.dist{display:grid;gap:8px}
.dist div{display:grid;grid-template-columns:28px 1fr 50px;gap:10px;align-items:center}
.dist .fill{height:26px;border-radius:8px;background:rgba(255,255,255,.08);position:relative;overflow:hidden}
.dist .fill i{position:absolute;inset:0 auto 0 0;background:linear-gradient(90deg,var(--violet),var(--blue));border-radius:8px;transition:width .6s}
.dist .fill.ok i{background:linear-gradient(90deg,var(--green),var(--teal))}
.podium{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end;max-width:560px;margin:20px auto}
.podium div{text-align:center;padding:14px 8px;border-radius:16px 16px 6px 6px;background:var(--panel2);border:1px solid var(--line)}
.podium .p1{min-height:190px;background:linear-gradient(180deg,rgba(255,197,66,.25),var(--panel2))}
.podium .p2{min-height:150px}.podium .p3{min-height:120px}
.podium b{display:block;font-size:34px}
input.in,select.in{width:100%;padding:13px 14px;border-radius:14px;border:1px solid var(--line2);background:rgba(255,255,255,.04);outline:none}
input.in:focus,select.in:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(25,211,197,.18)}
select.in option{background:#101828}
.pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:8px}
.pick button{aspect-ratio:1;border-radius:14px;border:2px solid transparent;background:rgba(255,255,255,.05);font-size:26px;cursor:pointer}
.pick button.on{border-color:var(--teal);background:rgba(25,211,197,.14)}
.colors{display:flex;gap:10px;flex-wrap:wrap}
.colors button{width:34px;height:34px;border-radius:50%;border:3px solid transparent;cursor:pointer}
.colors button.on{border-color:#fff}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tabs button{padding:9px 14px;border-radius:12px;border:1px solid var(--line);background:transparent;cursor:pointer;font-weight:700}
.tabs button.on{background:var(--panel2);border-color:var(--line2);color:var(--teal)}
.subjects{grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.subj{cursor:pointer;display:flex;gap:10px;align-items:center;padding:14px}
.subj i{font-style:normal;font-size:26px}
.subj small{display:block;color:var(--mut);font-size:12px}
#toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);background:var(--panel2);border:1px solid var(--line2);padding:12px 18px;border-radius:14px;font-weight:700;box-shadow:var(--shadow);z-index:60;transition:opacity .3s;max-width:calc(100vw - 32px)}
.modal{position:fixed;inset:0;background:rgba(3,6,12,.72);display:grid;place-items:center;z-index:40;padding:16px;backdrop-filter:blur(4px)}
.modal .card{width:100%;max-width:460px}
.badgepop{position:fixed;inset:0;display:grid;place-items:center;z-index:45;background:rgba(3,6,12,.6);animation:up .3s}
.badgepop .card{text-align:center;padding:30px;max-width:340px}
.badgepop .ic{font-size:80px;animation:pop .8s}
canvas#confetti{position:fixed;inset:0;pointer-events:none;z-index:55}
.kbd{font-size:11px;color:var(--mut)}
.stat3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;text-align:center}
.stat3 div{padding:12px;border-radius:14px;background:rgba(255,255,255,.04)}
.stat3 b{display:block;font-size:24px}
@media(max-width:560px){#app{padding:12px 12px 50px}.qcard{padding:16px}.top .chip.hide-s{display:none}.dailyrow{flex-direction:column;align-items:flex-start}}
/* ---- v2: dil, lobi, görevler, rapor, paylaşım ---- */
.langsw{cursor:pointer;gap:2px;padding:5px 6px}.langsw b{padding:3px 7px;border-radius:999px;font-size:12px;color:var(--mut)}.langsw b.on{background:var(--teal);color:#061018}
.chip.warn{color:var(--amber);border-color:rgba(255,197,66,.3)}
.pulse{animation:pulse 2.2s ease-in-out infinite}@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(25,211,197,.45)}50%{box-shadow:0 0 0 12px rgba(25,211,197,0)}}
.clickable{cursor:pointer;transition:transform .15s,border-color .15s}.clickable:hover{transform:translateY(-2px);border-color:var(--line2)}
.quests{display:grid;gap:10px;margin-top:8px}
.quest{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.035);border:1px solid var(--line)}
.quest.done{border-color:rgba(61,220,151,.45);background:rgba(61,220,151,.08)}.quest.done .bar i{background:var(--green)}
.qi{font-size:24px;width:34px;text-align:center;flex:0 0 auto}
.qv{text-align:right;font-weight:800;min-width:62px}.qv small{display:block;color:var(--amber);font-weight:700;font-size:11.5px}
.progmini{display:flex;align-items:center;gap:16px;margin-top:8px}
.ob3{grid-template-columns:1fr 1.6fr 1fr}@media(max-width:760px){.ob3{grid-template-columns:1fr}}
input.in:disabled{opacity:.5}
.lobby{max-width:640px}.lobbypos{display:flex;flex-direction:column;align-items:center;gap:2px}.lobbypos b{font-size:64px;line-height:1.05;background:linear-gradient(135deg,var(--teal),var(--violet));-webkit-background-clip:text;background-clip:text;color:transparent}
.disagree{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:12px;border:1px dashed rgba(255,197,66,.45);background:rgba(255,197,66,.06);font-size:13.5px}
.disagree span{flex:1;min-width:200px}
.linkbtn{background:none;border:0;color:var(--teal);cursor:pointer;font-weight:700;padding:2px 4px}.linkbtn:hover{text-decoration:underline}
.play.wide{max-width:1180px}
.rep2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.tiles{grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px;margin-top:10px}
.tile{padding:14px;border-radius:16px;background:rgba(255,255,255,.035);border:1px solid var(--line);border-left:4px solid var(--tc,var(--line2))}
.tile i{font-style:normal;font-size:22px}
.bar.thin{height:5px}
.trow{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}.trow:last-child{border:0}
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:5px;margin-top:8px}
.heat i{aspect-ratio:1;border-radius:5px;background:rgba(25,211,197,calc(.08 + var(--a) * .85));border:1px solid var(--line)}
.rec{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line)}.rec:last-child{border:0}
.st{padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;background:rgba(255,255,255,.06)}
.st-open{color:var(--amber)}.st-fixed{color:var(--green)}.st-reviewed{color:var(--blue)}.st-rejected{color:var(--mut)}
.modal.wide .card{max-width:640px}
.sharepv{width:100%;border-radius:14px;border:1px solid var(--line2);margin:8px 0}
.sharebtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}.sharebtns .btn{flex:1 1 140px;justify-content:center;text-align:center;text-decoration:none}
.btn.sx{background:#000;color:#fff}.btn.sli{background:#0a66c2;color:#fff}.btn.sfb{background:#1877f2;color:#fff}.btn.swa{background:#25d366;color:#062}.btn.stg{background:#29a9eb;color:#fff}
.chal h1{font-size:30px;margin:8px 0}
.mode{transition:transform .18s,box-shadow .18s}.mode:hover{box-shadow:0 14px 36px rgba(0,0,0,.35)}
.card.daily{background:linear-gradient(135deg,rgba(25,211,197,.14),rgba(124,92,255,.12) 60%,rgba(17,25,42,.72))}
.langgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px;margin-top:8px}
.langgrid button{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03);cursor:pointer;text-align:start}
.langgrid button.on{border-color:var(--teal);background:rgba(25,211,197,.12)}.langgrid small{color:var(--mut);font-size:11px}
.pill.mt{color:var(--amber)}
[dir=rtl] .phead,[dir=rtl] .row{direction:rtl}[dir=rtl] .opt{text-align:right}[dir=rtl] .lbr .v{text-align:left}
/* uzman inceleme masası */
.rvtabs,.rvfilter{display:flex;gap:6px;flex-wrap:wrap;margin:10px 0 12px}.tog.on{background:var(--teal);color:#04121a;border-color:var(--teal)}
.rvchip{display:inline-block;border-radius:999px;padding:2px 9px;font-size:12px;font-weight:800;background:rgba(255,197,66,.16);color:var(--amber);vertical-align:middle}.rvchip.approved{background:rgba(61,220,151,.16);color:var(--green)}.rvchip.changes{background:rgba(255,107,107,.16);color:var(--coral)}
.rvitems{display:grid;gap:6px}.rvitem{display:flex;justify-content:space-between;gap:10px;align-items:center;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px;cursor:pointer;color:inherit}
.rvitem:hover{border-color:var(--line2)}.rvitem>span:first-child{display:flex;flex-direction:column;min-width:0}.rvitem small{display:block}.rvst{text-align:right;flex-shrink:0}
.rvgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:12px;align-items:start}.rvgrid aside .card+.card{margin-top:10px}.rvbody{overflow-x:auto;font-size:14px}.rvpair{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.rvdl{display:grid;grid-template-columns:minmax(90px,max-content) minmax(0,1fr);gap:4px 12px;margin:0}.rvdl dt{font-weight:800;color:var(--teal);word-break:break-word}.rvdl dd{margin:0;word-break:break-word}.rvdl.d1,.rvdl.d2,.rvdl.d3{padding-left:8px;border-left:2px solid var(--line2)}
.rvlist{margin:0;padding-left:20px}.rvlist li{margin:3px 0}.rvact{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;align-items:center}.rvact input{flex:1;min-width:180px}.rvrow{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.rvgrid textarea,.rvact input{width:100%;background:var(--bg2);color:var(--txt);border:1px solid var(--line2);border-radius:10px;padding:8px 10px;font:inherit}
@media (max-width:900px){.rvgrid,.rvpair{grid-template-columns:1fr}}
/* 2026-09-28 · tam genişlik: geniş ekranlarda ortadaki küçük kutu yerine ekranı kullanan düzen (radyoloji görüntüsü solda büyük,
   soru ve seçenekler sağda; metin sorularında seçenekler iki sütun). Dar ekranlarda eski tek sütun düzeni aynen kalır. */
#app{max-width:none;padding:18px clamp(16px,3vw,48px) 60px}
.play{max-width:min(1100px,100%)}
.play.wide{max-width:none}
@media (min-width:1100px){
  .qcard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:28px;align-items:start}
  .qcard>*{grid-column:1/-1}
  .qcard>.opts{grid-template-columns:1fr 1fr}
  .play:has(.qcard .rad){max-width:min(1560px,100%)}
  .qcard:has(>.rad)>.stem{grid-column:2;grid-row:2}
  .qcard:has(>.rad)>.rad{grid-column:1;grid-row:2/span 3;width:min(100%,calc(100vh - 210px));max-width:none;margin:0 auto 0 0}
  .qcard:has(>.rad)>.opts,.qcard:has(>.rad)>#confirm{grid-column:2;grid-row:3;grid-template-columns:1fr}
  .qcard:has(>.rad)>.conf{grid-column:2;grid-row:4}
}
@media (min-width:1600px){.stem{font-size:22px}.opt{font-size:17px;padding:16px 18px}.qcard{padding:30px}}
/* 2026-09-28 · Portal ile tek görünüm: açık tema (İçerik Merkezi paleti, Plus Jakarta Sans) ve portal üst çubuğuna benzeyen
   beyaz, yapışkan üst çubuk + "Panele dön". Oyun renkleri (turkuaz/mor/mercan) vurgu olarak kalır; radyoloji görüntüsü koyu kalır. */
:root{
  --bg:#F4F7FB;--bg2:#FFFFFF;--panel:#FFFFFF;--panel2:#F1F5F9;--line:#E6EBF2;--line2:#D5DEEA;
  --txt:#0F172A;--mut:#64748B;--teal:#0D9488;--violet:#6D5DFC;--coral:#E5484D;--amber:#B45309;--green:#16A34A;--blue:#2563EB;--pink:#DB2777;
  --shadow:0 6px 24px rgba(15,23,42,.06);
}
html,body{font-family:'Plus Jakarta Sans','Inter',system-ui,-apple-system,'Segoe UI',sans-serif}
#bg{background:radial-gradient(900px 500px at 12% -10%,rgba(109,93,252,.08),transparent 60%),radial-gradient(800px 500px at 110% 10%,rgba(13,148,136,.07),transparent 60%),var(--bg)}
#bg:before{background-image:radial-gradient(#E3E9F2 1px,transparent 1px);background-size:22px 22px;mask-image:none;opacity:1}
#bg svg{opacity:.10}
.card{backdrop-filter:none}
.top{position:sticky;top:0;z-index:30;margin:-18px calc(-1 * clamp(16px,3vw,48px)) 18px;padding:10px clamp(16px,3vw,48px);background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);box-shadow:0 6px 24px rgba(15,23,42,.05);backdrop-filter:blur(10px)}
.top .back{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:10px;color:var(--mut);font-weight:700;text-decoration:none;font-size:14px}
.top .back:hover{background:#EEF2F7;color:var(--txt)}
.chip.fire{color:#C2410C}
.avatar,.bdg,.stat3 div,.quest,.tile,.langgrid button,.opt,.pick button{background:#F8FAFC}
.hero p.lead{color:#475569}
.lbr,.opt .k,.pill,.plist span,.st{background:#F1F5F9}
.pill{color:#475569}.pill.t{background:#EEEBFF;color:#5B4BD8}.pill.r{background:#E8F1FF;color:#1D4ED8}
.bar,.dots i,.dist .fill{background:#E2E8F0}
.dots i.sk{background:#94A3B8}
.opt:hover:not(:disabled){background:#F0FDFA}
.opt.ok .k{color:#fff}.opt.no .k{color:#fff}
.btn:hover{filter:brightness(1.03)}
.btn.pri{color:#fff;background:linear-gradient(135deg,#0D9488,#0EA5E9);box-shadow:0 10px 24px rgba(13,148,136,.22)}
.mode .tag{background:#FFF7ED;color:#B45309}
.mode .ic{filter:none}
.mode:hover{box-shadow:0 14px 30px rgba(15,23,42,.10)}
.card.daily{background:linear-gradient(135deg,#E6FFFA,#EEF2FF 60%,#FFFFFF);border-color:#B2F0E6}
input.in,select.in{background:#fff}
select.in option{background:#fff}
.colors button.on{border-color:#0F172A}
.modal,.badgepop{background:rgba(15,23,42,.45)}
.langsw b.on,.tog.on{color:#fff}
.rvgrid textarea,.rvact input{background:#fff}
.xpf{text-shadow:0 6px 20px rgba(180,83,9,.25)}

/* 2026-10-02 · oyunlaştırma: durum çipleri, sıradaki adım, ligler, rekorlar, kutlama */
.daily .status{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;position:relative;z-index:1}
.daily .status .chip{background:#fff;border-color:#E2E8F0}.daily .status .chip small{font-weight:600;color:var(--mut);margin-left:2px}
.chip.shield{color:#1D4ED8;cursor:pointer}.chip.lgchip{color:#7C3AED;cursor:pointer}.chip.pct{color:#0F766E;background:#F0FDFA!important;border-color:#CCFBF1!important}
#pctChips{display:contents}
.nextwrap{padding:0;overflow:hidden;border-color:#C7D2FE;background:linear-gradient(135deg,#EEF2FF,#F0FDFA)}.nextwrap .nextc{border-radius:0}
.nextc{display:flex;gap:14px;align-items:center;padding:16px 18px;background:linear-gradient(135deg,#EEF2FF,#F0FDFA);border-radius:16px}
.nextc .ni{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:26px;background:#fff;box-shadow:0 4px 14px rgba(15,23,42,.08);flex:none}
.nextc small{display:block;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#6D5DFC}
.nextc b{display:block;font-size:16.5px;margin:2px 0}
.nextc.skel{opacity:.6}
.lghead{display:grid;gap:4px;justify-items:start;margin-bottom:8px}.lghead.lgbig{justify-items:center;text-align:center}
.lgladder{display:flex;gap:4px;font-size:18px;align-items:center}.lgladder span{opacity:.28;filter:grayscale(1)}.lgladder span.past{opacity:.6;filter:none}
.lgladder span.on{opacity:1;filter:none;transform:scale(1.35);margin:0 6px}
.lghead.lgbig .lgladder{font-size:28px;margin-bottom:6px}
.lgstat{font-weight:700;margin:6px 0 10px;color:#334155}
.lgr.up{box-shadow:inset 3px 0 0 #16A34A}.lgr.down{box-shadow:inset 3px 0 0 #E5484D}
.lgr.up .rk{color:#16A34A}.lgr.down .rk{color:#E5484D}
.lglegend{display:flex;gap:14px;justify-content:center;margin-top:10px;font-size:12px;color:var(--mut)}
.lglegend span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.lglegend .up:before{background:#16A34A}.lglegend .down:before{background:#E5484D}
.recs{margin-top:16px;padding:12px 14px;border-radius:14px;background:#FFFBEB;border:1px solid #FDE68A;text-align:left}
.recs small{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#B45309}
.recs div{display:flex;gap:8px;flex-wrap:wrap;margin-top:6px}.recs span{background:#fff;border:1px solid #FDE68A;border-radius:999px;padding:5px 11px;font-weight:700;font-size:13.5px}
.recs .new{background:#F59E0B;color:#fff;border:0;padding:1px 7px;font-size:11px;margin-left:4px}
.cele .card{text-align:center;max-width:420px;background:linear-gradient(180deg,#FFFBEB,#fff 45%)}
.cele .burst{font-size:76px;line-height:1;animation:pop .6s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{0%{transform:scale(.2) rotate(-20deg);opacity:0}100%{transform:scale(1) rotate(0);opacity:1}}
@media(max-width:600px){.nextc{flex-wrap:wrap}.nextc .btn{width:100%}}

/* 2026-10-02 · görsel yenileme: güçlü Günlük Vizit kartı, renkli mod kartları, canlı soru başlığı, profil kapağı */
.card{border-radius:20px}
.card.daily{background:linear-gradient(125deg,#0B3B6E 0%,#1D4ED8 42%,#0D9488 100%);border:0;color:#fff;box-shadow:0 18px 40px rgba(29,78,216,.25)}
.card.daily:after{content:"🩺";opacity:.12;filter:grayscale(1) brightness(3)}
.card.daily:before{content:"";position:absolute;inset:0;background:radial-gradient(420px 220px at 85% -20%,rgba(255,255,255,.22),transparent 70%),radial-gradient(300px 200px at -5% 120%,rgba(94,234,212,.25),transparent 70%);pointer-events:none}
.card.daily h3{color:#BFDBFE}.card.daily h2{color:#fff}.card.daily .mut{color:#DBEAFE}
.card.daily .ring-wrap b{color:#fff}.card.daily .ring-wrap circle:first-child{stroke:rgba(255,255,255,.22)}
.card.daily .btn.pri{background:#fff;color:#0F3D7A;box-shadow:0 10px 26px rgba(2,6,23,.25)}
.card.daily .status .chip{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(6px)}
.card.daily .status .chip small{color:#DBEAFE}
.card.daily .status .chip.pct{background:rgba(255,255,255,.14)!important;border-color:rgba(255,255,255,.25)!important;color:#fff}
.dailyrow{position:relative;z-index:1}
/* mod kartları */
.modes{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.mode{min-height:150px;justify-content:flex-start;gap:4px;padding:18px;border-top:3px solid var(--mc,#0D9488)}
.mode:before{background:radial-gradient(240px 140px at 100% 0%,color-mix(in srgb,var(--mc,#0D9488) 12%,transparent),transparent 70%)}
.mode .ic{position:static;width:50px;height:50px;border-radius:15px;display:grid;place-items:center;font-size:26px;margin-bottom:10px;
  background:color-mix(in srgb,var(--mc,#0D9488) 13%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mc,#0D9488) 22%,transparent)}
.mode b{font-size:16.5px;position:relative}.mode span:not(.ic):not(.tag){position:relative;line-height:1.4}
.mode .tag{left:auto;right:12px;top:14px;background:color-mix(in srgb,var(--mc,#0D9488) 12%,#fff);color:var(--mc,#0D9488)}
.mode .go{position:absolute;right:16px;bottom:14px;font-style:normal;font-weight:900;color:var(--mc,#0D9488);opacity:0;transform:translateX(-6px);transition:all .18s}
.mode:hover .go,.mode:focus .go{opacity:1;transform:none}
.mode:hover{box-shadow:0 16px 34px color-mix(in srgb,var(--mc,#0D9488) 18%,transparent)}
/* soru ekranı */
.phead{background:#fff;border:1px solid var(--line);border-radius:18px;padding:10px 14px;box-shadow:var(--shadow)}
.rbar{flex:1;display:grid;gap:6px;min-width:0}
.rtitle{display:flex;justify-content:space-between;align-items:baseline;font-size:13px}.rtitle b{font-size:14px}.rtitle span{color:var(--mut);font-weight:700}
.rxp{font-weight:900;color:#B45309;background:#FFFBEB;border:1px solid #FDE68A;border-radius:999px;padding:5px 11px;font-size:13.5px;white-space:nowrap}
.rxp.bump{animation:bump .45s ease}@keyframes bump{40%{transform:scale(1.22)}}
.combo{min-width:0}.combo.on{background:#FFF7ED;color:#C2410C;border-radius:999px;padding:5px 11px;font-size:13.5px;animation:bump .45s ease}
.qcard{position:relative;overflow:hidden;border:0;box-shadow:0 14px 40px rgba(15,23,42,.08)}
.qcard:before{content:"";position:absolute;left:0;right:0;top:0;height:4px;background:linear-gradient(90deg,#0D9488,#2563EB,#6D5DFC)}
.stem{font-size:clamp(18px,2.4vw,22px);font-weight:700;color:#0F172A}
.opt{background:#fff;border:1.5px solid #E2E8F0;border-radius:16px;padding:15px 16px;box-shadow:0 1px 2px rgba(15,23,42,.04)}
.opt:hover:not(:disabled){border-color:#5EEAD4;background:#F0FDFA;transform:translateY(-1px);box-shadow:0 8px 18px rgba(13,148,136,.10)}
.opt .k{background:#EEF2FF;color:#4338CA;border-radius:10px}
.opt:hover:not(:disabled) .k{background:#0D9488;color:#fff}
.dots i{height:8px}.dots i.cur{background:linear-gradient(90deg,#0D9488,#2563EB);box-shadow:none}
/* profil kapağı ve rozetler */
.phero{display:flex;gap:20px;align-items:center;flex-wrap:wrap;padding:26px;border:0;color:#fff;
  background:linear-gradient(125deg,#3B1D8F,#1D4ED8 55%,#0D9488);box-shadow:0 18px 40px rgba(59,29,143,.22)}
.phero h2{color:#fff;font-size:26px;margin:2px 0 4px}.phero .mut{color:#E0E7FF!important}.phero .small.mut{color:#C7D2FE!important}
.phero .pkick{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#A5F3FC}
.phero .avatar{background:rgba(255,255,255,.15);border-color:#fff;box-shadow:0 0 0 6px rgba(255,255,255,.12)}
.phero .bar{background:rgba(255,255,255,.2)}.phero .bar i{background:linear-gradient(90deg,#FDE68A,#F59E0B)}
.badges{grid-template-columns:repeat(auto-fill,minmax(78px,1fr))}
.bdg{aspect-ratio:auto;padding:10px 4px 8px;display:flex;flex-direction:column;gap:4px;font-size:28px}
.bdg small{font-size:10.5px;font-weight:700;line-height:1.2;text-align:center;color:#475569}
.bdg.got{background:linear-gradient(160deg,#FFFBEB,#FEF3C7);border-color:#FCD34D;box-shadow:0 6px 14px rgba(245,158,11,.15)}
.bdg.off{filter:grayscale(1);opacity:.45}
@media(max-width:560px){.phead{flex-wrap:wrap}.rxp,.combo.on{font-size:12px;padding:4px 8px}.phero{padding:18px}}
