:root{--g:#22262B;--t:#8A6A3F;--ta:#F3ECE0;--o:#B9925F;--k:#C2453F;--y:#2E8B57;--bg:#F7F6F1;--kart:#fff;--yazi:#22262B;--soluk:#5F6368;--cizgi:#E4DED2;--btnyazi:#fff}
@media (prefers-color-scheme:dark){:root{--bg:#17191C;--kart:#22262B;--yazi:#EFEBE3;--soluk:#A8A398;--cizgi:#3A3F45;--ta:#33302A;--t:#C9A26B;--btnyazi:#22262B}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--yazi);font-family:Carlito,Calibri,"Segoe UI",system-ui,sans-serif;font-size:17px;line-height:1.45}
header{background:var(--g);color:#fff;padding:14px 16px;position:sticky;top:0;z-index:5}
header h1{margin:0;font-size:19px;letter-spacing:.3px}
header small{color:#B9925F}
nav{display:flex;gap:6px;overflow-x:auto;padding:10px 16px;background:var(--kart);border-bottom:1px solid var(--cizgi);position:sticky;top:52px;z-index:4}
nav button{flex:0 0 auto;border:1px solid var(--cizgi);background:transparent;color:var(--yazi);padding:7px 12px;border-radius:20px;font:inherit;font-size:15px;cursor:pointer}
nav button.akt{background:var(--t);border-color:var(--t);color:var(--btnyazi)}
main{max-width:860px;margin:0 auto;padding:16px}
.kart{background:var(--kart);border:1px solid var(--cizgi);border-radius:12px;padding:16px;margin-bottom:14px}
h2{font-size:20px;margin:4px 0 12px}
h3{font-size:17px;margin:0 0 8px}
.soluk{color:var(--soluk);font-size:15px}
select,input[type=number],input[type=text]{font:inherit;padding:8px 10px;border:1px solid var(--cizgi);border-radius:8px;background:var(--kart);color:var(--yazi);max-width:100%}
.btn{display:inline-block;border:0;background:var(--t);color:var(--btnyazi);padding:10px 16px;border-radius:8px;font:inherit;font-weight:700;cursor:pointer;margin:4px 6px 4px 0}
.btn.ikincil{background:transparent;color:var(--t);border:1px solid var(--t)}
.btn.tur{background:var(--o)}
.sec{display:block;width:100%;text-align:left;border:1px solid var(--cizgi);background:var(--kart);color:var(--yazi);padding:10px 12px;border-radius:8px;margin:6px 0;font:inherit;cursor:pointer}
.sec.dogru{border-color:var(--y);background:rgba(46,158,91,.12)}
.sec.yanlis{border-color:var(--k);background:rgba(217,83,79,.12)}
.sec:disabled{cursor:default}
.aciklama{background:var(--ta);border-left:4px solid var(--t);padding:10px 12px;border-radius:6px;margin-top:10px;font-size:15.5px}
.etiket{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.5px;padding:2px 8px;border-radius:10px;background:var(--ta);color:var(--t);margin-right:6px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.bolum{cursor:pointer}
.bolum:hover{border-color:var(--t)}
.cubuk{height:8px;background:var(--cizgi);border-radius:4px;overflow:hidden;margin-top:8px}
.cubuk i{display:block;height:100%;background:var(--t)}
.flip{min-height:200px;display:flex;flex-direction:column;justify-content:center;text-align:center;cursor:pointer;user-select:none}
.flip .terim{font-size:26px;font-weight:700;color:var(--t)}
.cevap-satir{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:8px 0}
.cevap-satir label{flex:1 1 260px}
.cevap-satir input{width:160px}
.ok{color:var(--y);font-weight:700}.no{color:var(--k);font-weight:700}
.ust{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px}
.sure{font-weight:700;font-variant-numeric:tabular-nums}
footer{text-align:center;color:var(--soluk);font-size:13.5px;padding:24px 16px}
a{color:var(--t)}
header{display:flex;align-items:center;gap:12px}
header .geri{color:#B9925F;text-decoration:none;font-size:20px;line-height:1}
#serit{max-width:860px;margin:10px auto 0;padding:8px 16px;font-size:14px;color:var(--soluk);display:flex;flex-wrap:wrap;gap:4px 10px;justify-content:space-between}
#serit a{font-weight:700}
nav{scrollbar-width:thin}
@media (max-width:600px){header{position:static}nav{top:0;padding:8px 10px}nav button{padding:6px 10px;font-size:14px}header h1{font-size:17px}header small{display:block;font-size:12.5px}}
nav a.ek{flex:0 0 auto;border:1px dashed var(--t);color:var(--t);padding:7px 12px;border-radius:20px;font-size:15px;text-decoration:none;white-space:nowrap}
nav a.ek:hover{background:var(--ta)}
@media (max-width:600px){nav a.ek{padding:6px 10px;font-size:14px}}