/* On Parmak bölümü — klasik çalışma ekranı görünümü */
:root{
  --op-bar:#25272b; --op-bar2:#1b1c1f; --op-line:#3a3d42; --op-text:#d9dbe0; --op-dim:#9a9ea7;
  --op-blue:#2f7fc1; --op-blue-d:#22669e; --op-bg:#e8e9eb; --op-panel:#fff; --op-border:#cfd2d6;
  --op-ink:#1f2328; --op-muted:#6b7079; --op-ok:#16884a; --op-bad:#d0312d; --op-cur:#1d8fd6;
}
*{box-sizing:border-box}
html,body{margin:0}
body.op{background:var(--op-bg);color:var(--op-ink);font:14px/1.5 "Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;min-height:100vh;display:flex;flex-direction:column}
.op a{color:inherit;text-decoration:none}
button,select,input,textarea{font:inherit;color:inherit}

/* 1. üst modül çubuğu */
.op-top{background:var(--op-bar);color:var(--op-text);display:flex;align-items:stretch;gap:0;min-height:44px;padding:0 12px;overflow-x:auto;scrollbar-width:none}
.op-top::-webkit-scrollbar{display:none}
.op-brand{display:flex;align-items:center;gap:8px;padding-right:14px;margin-right:6px;border-right:1px solid var(--op-line);font-weight:700;font-size:14px;white-space:nowrap}
.op-brand img{width:24px;height:24px;border-radius:6px}
.op-mods{display:flex;align-items:stretch}
.op-mods a{display:flex;align-items:center;padding:0 12px;font-size:13px;white-space:nowrap;color:var(--op-text)}
.op-mods a:hover{background:#30333a}
.op-mods a.on{background:var(--op-blue);color:#fff}
.op-top .op-home{margin-left:auto;display:flex;align-items:center;padding:0 4px 0 14px;font-size:12px;color:var(--op-dim);white-space:nowrap}
.op-top .op-home:hover{color:#fff}

/* 2. bölüm sekmeleri */
.op-sub{background:var(--op-bar2);display:flex;align-items:stretch;min-height:42px;padding:0 12px;border-bottom:1px solid #000;overflow-x:auto;scrollbar-width:none}
.op-sub::-webkit-scrollbar{display:none}
.op-sub .op-section{display:flex;align-items:center;padding-right:16px;color:#5fa8e6;font-weight:800;font-size:15px;letter-spacing:.02em;white-space:nowrap}
.op-sub a{display:flex;align-items:center;padding:0 13px;color:#b9bdc6;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-bottom:3px solid transparent;white-space:nowrap}
.op-sub a:hover{color:#fff}
.op-sub a.on{color:#fff;border-bottom-color:var(--op-blue)}

/* 3. yol + araç çubuğu */
.op-crumbs{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#2e3035;color:#c9ccd3;font-size:12px;padding:6px 12px}
.op-crumbs ol{display:flex;gap:6px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.op-crumbs li+li::before{content:"›";margin-right:6px;color:#7d818a}
.op-crumbs a:hover{color:#fff}
.op-crumbs .op-layout-badge{color:#e7c56a;font-weight:600;white-space:nowrap}
.op-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;background:#f6f6f7;border-bottom:1px solid var(--op-border);padding:6px 12px}
.op-toolbar label{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--op-muted)}
.op-toolbar select,.op-toolbar input[type=number]{height:30px;border:1px solid #c3c6cb;border-radius:3px;background:#fff;padding:0 6px;font-size:12px;color:var(--op-ink)}
.op-toolbar .sep{width:1px;height:22px;background:#d4d6da;margin:0 4px}
.op-toolbar .grow{flex:1}
.op-toolbar .op-check{gap:5px;color:var(--op-ink)}

/* buttons */
.op-btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;padding:0 12px;border:1px solid #b9bdc3;border-radius:3px;background:#fff;color:var(--op-ink);font-size:12.5px;font-weight:600;cursor:pointer;white-space:nowrap}
.op-btn:hover{background:#f0f1f3}
.op-btn.blue{background:var(--op-blue);border-color:var(--op-blue-d);color:#fff}
.op-btn.blue:hover{background:var(--op-blue-d)}
.op-btn.icon{width:32px;padding:0;font-size:15px}
.op-btn:disabled{opacity:.5;cursor:default}

/* 4. çalışma alanı */
.op-main{flex:1;width:min(1060px,100% - 24px);margin:18px auto 30px}
.op-intro{margin:0 0 14px}
.op-intro h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.01em}
.op-intro p{margin:4px 0 0;color:var(--op-muted);font-size:13px}
.op-box{background:var(--op-panel);border:1px solid var(--op-border);border-radius:3px}
.op-row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.op-row .left,.op-row .right{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.op-timer{min-width:66px;height:32px;display:inline-flex;align-items:center;justify-content:center;border-radius:3px;background:var(--op-blue);color:#fff;font-weight:700;font-variant-numeric:tabular-nums;font-size:15px;padding:0 10px}
.op-timer.warn{background:#c9822a}
.op-timer.done{background:#6b7079}

/* yazılacak metin (kelime modu) */
.op-words{padding:10px 14px;font-family:"Times New Roman",Times,Georgia,serif;font-size:var(--op-fs,22px);line-height:1.6;color:#2b2f35;text-align:justify;cursor:text}
.op-words .clip{position:relative;overflow:hidden;height:calc(1.6em*3)}
.op-words .track{position:relative;transition:transform .12s ease-out}
.op-words span{padding:0 2px;border-radius:2px}
.op-words span.cur{background:var(--op-cur);color:#fff}
.op-words span.cur.bad{background:var(--op-bad)}
.op-words span.ok{color:var(--op-ok)}
.op-words span.no{color:var(--op-bad)}
.op-input-wrap{display:flex;justify-content:center;margin:12px 0}
.op-input{width:min(460px,100%);height:40px;border:1px solid #b9bdc3;border-radius:2px;background:#fff;padding:0 10px;font-size:19px;outline:none;font-family:"Times New Roman",Times,Georgia,serif}
.op-input:focus{border-color:var(--op-blue);box-shadow:0 0 0 3px #2f7fc126}
.op-input:disabled{background:#f2f2f3}

/* sayaçlar */
.op-stats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border:1px solid var(--op-border);border-radius:3px;background:#fff;overflow:hidden}
.op-stats div{padding:9px 12px;border-left:1px solid #e6e7ea}
.op-stats div:first-child{border-left:0}
.op-stats b{display:block;font-size:22px;font-variant-numeric:tabular-nums;line-height:1.2}
.op-stats span{font-size:11px;color:var(--op-muted);font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.op-stats abbr{text-decoration:none;cursor:help}
.op-stats .ok b{color:var(--op-ok)} .op-stats .bad b{color:var(--op-bad)}

/* sonuç */
.op-result{margin-top:16px;padding:0}
.op-result header{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 14px;background:#f6f6f7;border-bottom:1px solid var(--op-border)}
.op-result header h2{margin:0;font-size:15px}
.op-result .body{padding:14px}
.op-big{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.op-big div{padding:12px;border:1px solid #e3e4e7;border-radius:3px;text-align:center}
.op-big b{display:block;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.op-big span{font-size:11.5px;color:var(--op-muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.op-big .main b{color:var(--op-blue)}
.op-h3{margin:18px 0 8px;font-size:13px;font-weight:800;color:#3b3f46;text-transform:uppercase;letter-spacing:.05em}
.op-note{color:var(--op-muted);font-size:12px;margin:6px 0 0}

/* klavye ısı haritası */
.op-kb{display:grid;gap:4px;justify-content:center;user-select:none}
.op-kb .r{display:flex;gap:4px;justify-content:center}
.op-kb .k{width:38px;height:38px;border:1px solid #c9ccd1;border-radius:4px;background:#f7f7f8;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;position:relative}
.op-kb .k small{position:absolute;right:3px;bottom:1px;font-size:9px;color:#fff;font-weight:700}
.op-kb .k.sp{width:240px}
.op-legend{display:flex;justify-content:center;gap:12px;margin-top:8px;font-size:11.5px;color:var(--op-muted)}
.op-legend i{display:inline-block;width:12px;height:12px;border-radius:2px;vertical-align:-2px;margin-right:4px}

/* tablolar */
.op-table{width:100%;border-collapse:collapse;font-size:12.5px;font-variant-numeric:tabular-nums}
.op-table th,.op-table td{padding:7px 9px;border-bottom:1px solid #eceef0;text-align:left;white-space:nowrap}
.op-table th{background:#f6f6f7;color:#555a63;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.op-table td.num,.op-table th.num{text-align:right}
.op-table-wrap{overflow-x:auto}
.op-chips{display:flex;flex-wrap:wrap;gap:6px}
.op-chips span{padding:3px 8px;border:1px solid #f0c6c4;background:#fdf1f0;border-radius:3px;font-size:13px}
.op-chips span s{color:var(--op-bad);text-decoration:none}
.op-chips span em{font-style:normal;color:var(--op-muted);margin-left:4px}

/* katiplik paragraf modu */
.op-exam{display:grid;gap:10px}
.op-exam.dikey{grid-template-columns:1fr 1fr}
.op-para{padding:14px 16px;font-family:"Times New Roman",Times,Georgia,serif;font-size:var(--op-fs,19px);line-height:1.65;max-height:calc(var(--op-fs,19px)*1.65*9 + 28px);overflow-y:auto;color:#2b2f35;text-align:justify}
.op-exam.dikey .op-para{max-height:none;height:calc(var(--op-fs,19px)*1.65*14 + 28px)}
.op-para span.cur{background:#fff1a8;outline:1px solid #e3cf62;border-radius:2px}
.op-para span.done{color:#9aa0a8}
.op-type{width:100%;min-height:calc(var(--op-fs,19px)*1.65*6 + 28px);resize:vertical;border:1px solid var(--op-border);border-radius:3px;padding:14px 16px;font-family:"Times New Roman",Times,Georgia,serif;font-size:var(--op-fs,19px);line-height:1.65;outline:none;background:#fff}
.op-exam.dikey .op-type{height:calc(var(--op-fs,19px)*1.65*14 + 28px)}
.op-type:focus{border-color:var(--op-blue);box-shadow:0 0 0 3px #2f7fc126}
.op-type:disabled{background:#f4f4f5}
.op-overlay{position:fixed;inset:0;background:#000a;display:flex;align-items:center;justify-content:center;z-index:50;color:#fff;font-size:120px;font-weight:800;font-variant-numeric:tabular-nums}
.op-overlay[hidden]{display:none}
.op-diff{font-family:"Times New Roman",Times,Georgia,serif;font-size:17px;line-height:1.8;padding:12px 14px;border:1px solid #e3e4e7;border-radius:3px;max-height:340px;overflow-y:auto}
.op-diff .w{color:var(--op-ok)}
.op-diff .x{color:var(--op-bad);text-decoration:line-through}
.op-diff .m{color:#b26b00;background:#fff3d6;border-radius:2px}
.op-diff .e{color:#7a3fc4;background:#f1e8ff;border-radius:2px}
.op-diff .fix{color:var(--op-ok);font-size:.85em;margin-left:2px}

.op-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.op-side{padding:12px 14px}
.op-side h2{margin:0 0 6px;font-size:14px}
.op-side p,.op-side li{color:#4f545c;font-size:12.5px;line-height:1.6}
.op-side ul{margin:0;padding-left:18px}
details.op-box>summary{padding:10px 14px;cursor:pointer;font-weight:700;font-size:13px}
details.op-box[open]>summary{border-bottom:1px solid #eceef0}
.op-form{display:grid;gap:8px;padding:12px 14px}
.op-form input,.op-form textarea{border:1px solid #c3c6cb;border-radius:3px;padding:8px 10px;font-size:13px;background:#fff}
.op-status{font-size:12.5px;color:var(--op-ok);min-height:18px}

.op-foot{background:var(--op-bar);color:var(--op-dim);font-size:12px;padding:14px 12px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.op-foot a:hover{color:#fff}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

@media (max-width:760px){
  .op-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .op-stats div:nth-child(4){border-left:0}
  .op-stats div:nth-child(n+4){border-top:1px solid #e6e7ea}
  .op-big{grid-template-columns:1fr 1fr}
  .op-exam.dikey,.op-grid2{grid-template-columns:1fr}
  .op-kb .k{width:25px;height:30px;font-size:11px}.op-kb .k.sp{width:150px}
  .op-kb .r{gap:3px}
  .op-words{font-size:min(var(--op-fs,22px),19px)}
}
@media (max-width:480px){.op-main{width:calc(100% - 16px)}.op-intro h1{font-size:19px}}
@media (max-width:560px){.op-words,.op-para{text-align:left}}
.op-legacy .op-layout-badge{display:none}