:root{--ink:#20264f;--mut:#5b6385;--bg:#f2f4f9;--line:#dfe3ee;--acc:#0e7c86;--tile:#ffe29a;--tile2:#d7b25a;--red:#d6455d;--grn:#2e9e5b;--disp:"Bricolage Grotesque",system-ui,sans-serif}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.6 system-ui,"Segoe UI",Roboto,sans-serif}
a{color:var(--acc)}.w{max-width:1040px;margin:0 auto;padding:0 10px}
header.top{background:var(--ink)}header .w{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
header nav{display:flex;gap:10px;flex-wrap:wrap;}header nav a{color:#cfd6ff;text-decoration:none}header nav a:hover{color:#fff}
.logo{font:800 21px var(--disp);padding:10px 0px;color:#fff!important;display:flex;gap:8px;align-items:center;text-decoration:none}
.t{position:relative;display:inline-grid;place-items:center;width:1.4em;height:1.4em;margin:2px;background:var(--tile);border-bottom:3px solid var(--tile2);border-radius:5px;font:800 1em var(--disp);color:var(--ink);font-style:normal}
.t.j{background:#ffd0d8;border-color:var(--red);color:#8c1c30}.t.b{background:#c6eed7;border-color:var(--grn);color:#146236}
.hero{background:var(--ink);color:#fff;padding:14px 0 54px}.hero.small{padding:30px 0 36px}
.hero h1{font:800 clamp(28px,5vw,48px)/1.1 var(--disp);margin:14px 0 24px;max-width:760px}
.spell .t{font-size:30px}.hero.small h1{margin:0 0 10px}
.finder{display:grid;grid-template-columns:1.2fr 1fr auto;gap:10px;max-width:900px}
.finder.row{grid-template-columns:2fr 1fr 1fr auto;max-width:none}
input,select{font:inherit;padding:13px 14px;border:2px solid transparent;border-radius:8px;background:#fff;color:var(--ink);min-width:0}
.card input,.card select{border-color:var(--line)}
input:focus,select:focus,button:focus-visible{outline:3px solid var(--tile);outline-offset:1px}
button{font:700 16px var(--disp);padding:13px 22px;border:0;border-bottom:3px solid var(--tile2);border-radius:8px;background:var(--tile);color:var(--ink);cursor:pointer}
button:hover{background:#ffd978}
.hint{color:#aab3e6;font-size:14px;margin:12px 0 0}.w>.hint{color:var(--mut)}
.card{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;margin:22px 0}
h1.pt{font:800 clamp(26px,4vw,38px)/1.15 var(--disp);margin:10px 0 6px}
h2{font:700 21px var(--disp);margin:0 0 12px}h2 small{font:400 14px system-ui;color:var(--mut);margin-left:8px}
.crumb{margin:10px 0 0;font-size:14px;color:var(--mut)}.lead{color:var(--mut);margin:0}
.chips a{display:inline-block;margin:3px 2px;padding:3px 11px;border:1px solid var(--line);border-radius:6px;background:#f8f9fc;color:var(--ink);text-decoration:none;font-size:15px}
.chips a:hover{background:var(--tile);border-color:var(--tile2)}
.chart{margin:0}.chart figcaption{color:var(--mut);font-size:14px;margin-bottom:10px}
.bars{display:flex;gap:6px;align-items:flex-end;min-height:200px;overflow-x:auto;padding-bottom:4px}
.bar{flex:1;min-width:24px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.bar i{display:block;width:100%;background:var(--acc);border-radius:4px 4px 0 0}.bar:hover i{background:var(--ink)}
.bar em{font:600 11px system-ui;font-style:normal;color:var(--mut);margin-bottom:3px}.bar span{font-size:12px;margin-top:4px;white-space:nowrap}
.res{display:flex;flex-wrap:wrap;gap:6px 14px}.word{text-decoration:none;font-size:14px;white-space:nowrap}.word:hover .t{transform:translateY(-2px)}
.mean li{margin:6px 0}.pager a{margin-right:14px}
.mean i, .mean u {display:block;}
footer{margin-top:40px;background:#e8ebf4;padding:20px 0;color:var(--mut);font-size:14px}footer p{margin:4px 0}
@media(max-width:720px){.finder,.finder.row{grid-template-columns:1fr}.bars{gap:3px}}
@media(prefers-reduced-motion:no-preference){.t{transition:transform .12s}}
.t sub{position:absolute;right:3px;bottom:1px;font:700 .38em system-ui;line-height:1;color:inherit;opacity:.75}
.chips sup{margin-left:3px;font-size:10px;font-weight:700;color:var(--acc)}
.pts{margin-left:5px;padding:0 6px;border-radius:9px;background:var(--ink);color:#fff;font:700 11px system-ui;vertical-align:middle}
.mean small{color:var(--mut)}.score{display:inline-block;padding:2px 12px;border-radius:14px;background:var(--tile);border-bottom:2px solid var(--tile2);font-weight:700}
#sonuc{scroll-margin-top:16px;min-height:1px}#sonuc[aria-busy=true]{opacity:.45;transition:opacity .15s}
.sum{margin:22px 0 0;font-size:17px}
button:disabled{opacity:.7;cursor:progress}
.fab{position:fixed;top:calc(12px + env(safe-area-inset-top,0px));left:50%;transform:translateX(-50%);z-index:50;padding:10px 20px;box-shadow:0 4px 16px rgba(32,38,79,.35);border-radius:22px}
.fab[hidden]{display:none}
/* ---- ekran görüntüsünden hamle ---- */
.ek-sub{margin:6px 0 10px;color:#dfe3f5;max-width:640px}
.ek-drop{color:var(--ink);position:relative;display:flex;align-items:center;justify-content:center;min-height:210px;padding:22px;border:2px dashed var(--acc);border-radius:10px;background:#fff;text-align:center;cursor:pointer;transition:background .15s,border-color .15s,transform .15s;outline:none}
.ek-drop:hover,.ek-drop.over,.ek-drop:focus-visible{background:#eef9fa;border-style:solid}
.ek-drop.over{transform:scale(1.01)}
.ek-drop.on{cursor:progress;border-style:solid}
.ek-idle{display:flex;flex-direction:column;align-items:center;gap:6px}
.ek-idle[hidden],.ek-busy[hidden]{display:none}
.ek-ic{width:56px;height:56px;color:var(--acc)}
.ek-idle b{font-size:19px}.ek-idle span{color:var(--mut);font-size:14px}
.ek-pick{margin-top:10px;padding:10px 24px;border-radius:24px;background:var(--ink);color:#fff;text-decoration:none;font-weight:700}
.ek-busy{display:flex;align-items:center;gap:10px;text-align:left}
.ek-busy img{width:110px;height:110px;object-fit:cover;border-radius:12px;border:1px solid var(--line);filter:saturate(.8)}
.ek-busy b{display:block;font-size:10px}.ek-busy span{color:var(--mut);font-size:14px}
.ek-spin{width:30px;height:30px;margin-bottom:8px;border:4px solid var(--line);border-top-color:var(--acc);border-radius:50%;animation:ekspin .8s linear infinite}
@keyframes ekspin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.ek-spin{animation-duration:2.4s}}
.ek-or{margin-top:4px}.ek-hero .hint{color:#c9cfe8}.ek-hero .hint a{color:#7fe0e8}
.ek-err{margin:10px 0 0;padding:12px 16px;border-radius:12px;background:#fdecec;border:1px solid #e9a8a8;color:#8a1f1f}
.ek-err[hidden]{display:none}
.ek-sum{margin-top:20px}.ek-sum p{margin:0}
.ek-best{font-size:10px}.ek-best b{margin:0 10px 0 4px;font-size:22px;letter-spacing:.5px}
.ek-cols{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 22px;align-items:start}
.ek-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 14px}
.ek-head h2{margin:0}.ek-head small{font-weight:400;color:var(--mut);font-size:13px}
.ek-sel{font-size:13px;color:var(--mut)}.ek-sel select{margin-left:4px;padding:4px 6px;border:1px solid var(--line);border-radius:8px;font:inherit;color:var(--ink);background:#fff}
.ek-board{display:grid;gap:2px;margin:12px 0;padding:3px;background:#cfd5e6;border-radius:8px;container-type:inline-size}
.ek-board .c{position:relative;aspect-ratio:1/1;width:100%;height:auto;align-self:start;margin:0;min-width:0;padding:0;border:0;border-radius:3px;background:#f4f6fb;color:var(--ink);font:700 clamp(8px,3.4cqw,17px)/1 system-ui;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ek-board .c small{font:700 clamp(6px,1.9cqw,10px)/1 system-ui;opacity:.75}
.ek-board .c.p1{background:#bfe3f2}.ek-board .c.p2{background:#4fa8d6;color:#fff}.ek-board .c.p3{background:#f6c3c3}.ek-board .c.p4{background:#e0605f;color:#fff}
.ek-board .c.tl,.ek-board .c.t{background:var(--tile);box-shadow:inset 0 -2px 0 var(--tile2)}
.ek-board .c.bl{background:#f3e7c4}
.ek-board .c.inw{background:#ffd36b}
.ek-board .c.nw{background:var(--acc);color:#fff;box-shadow:inset 0 -2px 0 #095a62;animation:ekpop .25s ease-out}
.ek-board .c.nw.jk{background:#b8453d;box-shadow:inset 0 -2px 0 #7e2823}
.ek-board .c .pts{position:absolute;right:1px;bottom:0;margin:0;padding:0;background:none;color:inherit;opacity:.7;font:700 clamp(5px,1.6cqw,9px)/1 system-ui}
.ek-board .c.sel{outline:3px solid var(--ink);outline-offset:-1px;z-index:1}
.ek-board .c:focus-visible{outline:3px solid var(--acc);z-index:1}
@keyframes ekpop{from{transform:scale(.6)}to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.ek-board .c.nw{animation:none}}
.ek-lg{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12px;color:var(--mut)}
.ek-lg i{display:inline-block;width:12px;height:12px;margin-right:5px;border-radius:3px;vertical-align:-2px;background:#f4f6fb;border:1px solid #cfd5e6}
.ek-lg i.p1{background:#bfe3f2}.ek-lg i.p2{background:#4fa8d6}.ek-lg i.p3{background:#f6c3c3}.ek-lg i.p4{background:#e0605f}.ek-lg i.nw{background:var(--acc)}
.ek-edit{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:12px}
.ek-edit input[type=text]{width:56px;padding:7px;border:1px solid var(--line);border-radius:8px;font:700 10px system-ui;text-align:center;text-transform:uppercase}
.ek-edit button{padding:8px 16px}
.ek-edit [hidden]{display:none}
.ek-chk{font-size:14px;display:inline-flex;align-items:center;gap:6px}
.ek-chk input[type=number]{width:70px;padding:5px;border:1px solid var(--line);border-radius:8px;font:inherit}
.ek-help{color:var(--mut);font-size:13px}
.ek-rack{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0;min-height:44px}
.ek-rack .t{width:42px;height:42px;font-size:21px;margin:0;display:inline-flex;align-items:center;justify-content:center}
.ek-rack .t.used{opacity:.25;transform:scale(.9)}
.ek-rackrow{display:flex;flex-wrap:wrap;gap:8px}
.ek-rin{flex:1 1 150px;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:10px;font:700 17px system-ui;letter-spacing:2px;text-transform:uppercase}
.ek-rackrow button{padding:10px 10px}
.ek-more summary{cursor:pointer;color:var(--mut);font-size:13px;margin-top:10px}
.ek-more textarea{width:100%;height:160px;margin-top:8px;font:12px monospace}.ek-more img{max-width:100%;margin-top:8px}
.ek-list{max-height:460px;overflow:auto;margin:10px 0;border:1px solid var(--line);border-radius:10px}
.ek-list table{width:100%;border-collapse:collapse;font-size:14px}
.ek-list th{position:sticky;top:0;background:#e8ebf4;text-align:left;padding:7px 10px;font-size:12px;color:var(--mut)}
.ek-list td{padding:8px 10px;border-top:1px solid var(--line)}
.ek-list .r,.ek-list .sc{text-align:right}.ek-list .sc{font-weight:700}
.ek-list .wd{font-weight:700;letter-spacing:.5px}.ek-list .wh{color:var(--mut);font-size:12px}
.ek-list tr.m{cursor:pointer}.ek-list tr.m:hover td{background:#f2f5fb}.ek-list tr.m.on td{background:var(--tile)}
.ek-list tr.m:focus-visible{outline:2px solid var(--acc);outline-offset:-2px}
.ek-tag{margin-left:6px;padding:1px 6px;border-radius:8px;background:var(--acc);color:#fff;font:600 10px system-ui;vertical-align:middle}
.ek-det p{margin:4px 0}.ek-dh b{font-size:20px;margin-right:10px}
.ek-again{text-align:center;margin:22px 0}
.ek-how{margin-top:26px}
.ek-steps{list-style:none;counter-reset:s;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ek-steps li{counter-increment:s;padding:14px;border-radius:12px;background:#f4f6fb}
.ek-steps li:before{content:counter(s);display:inline-flex;width:28px;height:28px;margin-bottom:6px;border-radius:50%;background:var(--acc);color:#fff;align-items:center;justify-content:center;font-weight:700}
.ek-steps b{display:block;margin-bottom:4px}.ek-steps span{font-size:14px;color:var(--mut)}
.ek-faq{border-top:1px solid var(--line);padding:10px 0}.ek-faq summary{cursor:pointer;font-weight:600}.ek-faq p{margin:8px 0 0;color:var(--mut)}
@media(max-width:860px){.ek-cols{grid-template-columns:1fr}.ek-steps{grid-template-columns:1fr}}
@media(max-width:520px){.ek-busy{flex-direction:column;text-align:center}.ek-drop{min-height:180px;padding:16px}}
/* ---- ana sayfa: iki yol ---- */
.hp-two{display:grid;grid-template-columns:1fr 1fr;gap:10px;align-items:stretch;margin-top:6px}
.hp-box{position:relative;display:flex;flex-direction:column;padding:20px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);color:#fff;text-decoration:none}
.hp-box h2{margin:0 0 12px;font-size:20px;color:#fff}
.hp-box .finder{margin:0}
.hp-box p{margin:0 0 12px;color:#dfe3f5;font-size:15px}
.hp-box .hint{color:#c9cfe8;margin:10px 0 0}
.hp-shot{background:var(--tile);color:var(--ink);border-color:var(--tile2);transition:transform .15s,box-shadow .15s}
.hp-shot:hover,.hp-shot:focus-visible{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.hp-shot h2{color:var(--ink)}.hp-shot p{color:#3b3f63}
.hp-new{position:absolute;top:14px;right:14px;padding:2px 10px;border-radius:12px;background:var(--acc);color:#fff;font:700 12px system-ui;letter-spacing:.5px}
.hp-mini{display:flex;gap:4px;margin:2px 0 14px}
.hp-mini i{display:inline-flex;width:30px;height:30px;align-items:center;justify-content:center;border-radius:5px;background:#fff;border-bottom:3px solid var(--tile2);font:800 15px var(--disp);font-style:normal;color:var(--ink)}
.hp-mini i.k3{background:#e0605f;color:#fff;font-size:10px;border-color:#a93c3b}.hp-mini i.h2{background:#bfe3f2;font-size:10px;border-color:#8fc3d8}
.hp-go{margin-top:auto;align-self:flex-start;padding:10px 22px;border-radius:24px;background:var(--ink);color:#fff;font-weight:700}
.hp-promo{border-left:5px solid var(--acc)}
.hp-feat{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hp-feat li{padding:14px;border-radius:12px;background:#f4f6fb}.hp-feat b{display:block;margin-bottom:4px}.hp-feat span{font-size:14px;color:var(--mut)}
.btn{display:inline-block;padding:12px 26px;border-radius:24px;background:var(--tile);border-bottom:3px solid var(--tile2);color:var(--ink);font-weight:800;text-decoration:none}
@media(max-width:860px){.hp-two{grid-template-columns:1fr}.hp-feat{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.hp-feat{grid-template-columns:1fr}}
.hp-box .finder{grid-template-columns:1fr}
.hp-shot .ek-drop{min-height:130px;padding:14px;margin-top:auto}
.hp-shot .ek-ic{width:38px;height:38px}.hp-shot .ek-idle b{font-size:16px}
.hp-shot .ek-busy img{width:70px;height:70px}
button.btn{border:0;border-bottom:3px solid var(--tile2);cursor:pointer;font-family:inherit;font-size:inherit}
.ek-board .c.t{display:flex;width:100%;height:auto;margin:0;border-bottom:0;font-size:clamp(8px,3.4cqw,17px);transform:none}
