/* OnParmak hizalama ve ikon-only */
.onparmak-wrap{position:relative; max-width:960px; margin:1rem auto; color:inherit; font:inherit}
.onparmak-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:nowrap}
.op-selects{display:flex; gap:12px; align-items:flex-end; flex-wrap:nowrap}
.op-field{display:flex; flex-direction:column; gap:6px}
.op-label{font-size:.9rem; opacity:.7}

.onparmak-wrap{ --op-h: 44px; } /* Tema yüksekliği için tek değişken */

.op-select{min-width:240px; height:var(--op-h)}
.op-actions{ display:flex; gap:8px; align-items:flex-end}
.op-actions .op-btn{width:var(--op-h); height:var(--op-h); display:inline-flex; align-items:center; justify-content:center; border:1px solid currentColor; border-radius:10px; background:transparent; padding:0; line-height:1; position:relative}
.op-actions .op-btn i{font-size:1rem}
.op-actions .op-btn .label{display:none}
.op-actions .op-btn[title]:hover::after{
  content:attr(title); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,.85); color:#fff; font-size:12px; padding:4px 8px; border-radius:4px; white-space:nowrap; pointer-events:none
}

.onparmak-target{height:260px; overflow-y:auto; border:1px solid currentColor; border-radius:.75rem; padding:.75rem; margin-top:10px}
#op-input { display:none;  height: 75px; border:1px solid currentColor; border-radius:.75rem; padding:.75rem; margin-top:10px; background:transparent}

.onparmak-hud{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.hud-chip{display:inline-flex; gap:8px; padding:4px 10px; border:1px solid currentColor; border-radius:999px; font-size:.9rem}

/* === OnParmak: Actions moved to bottom === */
.onparmak-wrap{padding-bottom:80px;}
.onparmak-wrap .op-actions{
  position:fixed;
  right:16px;
  bottom:16px;
  margin-left:0;
  display:flex;
  gap:8px;
  align-items:center;
  z-index:1000;
}
@media (max-width: 640px){
  .onparmak-wrap .op-actions{
    left:12px;
    right:12px;
    justify-content:center;
  }
}
/* ========================================= */

/* === OnParmak: Actions inline next to selects (toolbar) === */
.onparmak-wrap{padding-bottom:0;}
.onparmak-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar .op-actions{
  position:static;
  display:flex;
  gap:8px;
  align-items:flex-end;
  margin-left:12px; /* right after selects */
}
@media (max-width: 720px){
  .onparmak-toolbar .op-actions{
    flex-basis:100%;
    margin-left:0;
    margin-top:8px; /* drop to next row neatly */
  }
}
/* ========================================================== */

/* === OnParmak: Actions moved to LEFT of toolbar === */
.onparmak-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar .op-actions{
  order:-1;           /* show before selects */
  margin-left:0;
  display:flex;
  gap:8px;
  align-items:center;
}
@media (max-width: 720px){
  .onparmak-toolbar .op-actions{
    flex-basis:auto;
    margin-bottom:8px;
  }
}
/* ==================================================== */

/* === OnParmak: Force left actions === */
.onparmak-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar > .op-actions{ margin-left:0 ; order:-1; display:flex; gap:8px; align-items:center; }
/* ===================================== */

/* === OnParmak: Actions below category row === */
.onparmak-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
}
.onparmak-toolbar .op-selects{flex:1 1 auto; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar .op-actions{
  flex-basis:100%;
  order:99;
  margin:8px 0 0 0;
  display:flex;
  gap:8px;
  align-items:center;
}
/* =========================================== */

/* === OnParmak: Actions as separate row BELOW selects === */
.onparmak-toolbar{display:flex; flex-wrap:wrap; align-items:flex-end; width:100%;}
.onparmak-toolbar > .op-selects{order:1; width:100%; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar > .op-actions{
  order:2;
  width:100%;
  margin:8px 0 0 0 ; /* kill from base */
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}
/* ======================================================= */

/* === OnParmak: FORCE actions on their own row, left-aligned === */
.onparmak-toolbar{display:flex; flex-wrap:wrap; align-items:flex-end; width:100%;}
.onparmak-toolbar > .op-selects{order:1; width:100%; display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap;}
.onparmak-toolbar > .op-actions{
  order:2;
  width:100%;
  margin-left:0 ; /* override base */
  margin-top:8px;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}
/* ============================================================= */

/* === OnParmak: Dedicated row for actions under selects === */
.onparmak-toolbar{display:flex; flex-wrap:wrap; align-items:flex-end; width:100%;}
.onparmak-toolbar .op-actions-row{width:100%; margin-top:8px; display:flex; gap:8px; align-items:center;}
.onparmak-toolbar .op-actions{margin-left:0 ;}
/* ======================================================== */

/* === OnParmak: actions bottom row (outside toolbar) === */
.op-actions-bottom{
  width:100%;
  margin:8px 0 0 0;
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-start;
}
.op-actions-bottom .op-btn{width:var(--op-h); height:var(--op-h); display:inline-flex; justify-content:center; align-items:center; border:1px solid currentColor; border-radius:10px; background:transparent; padding:0; line-height:1; position:relative}
/* ====================================================== */

.onparmak-wrap{position:relative; max-width:960px; margin:1rem auto; color:inherit; font:inherit; --op-h:44px}
.onparmak-toolbar{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap}
.op-selects{display:flex; gap:12px; align-items:flex-end; flex-wrap:wrap; width:100%}
.op-field{display:flex; flex-direction:column; gap:6px; min-width:240px; flex:1}
.op-label{font-size:.9rem; opacity:.7}
.op-select{height:var(--op-h)}

.op-actions-bottom{width:100%; margin-top:8px; display:flex; gap:8px; align-items:center; justify-content:flex-start}
.op-actions-bottom .op-btn{width:var(--op-h); height:var(--op-h); display:inline-flex; justify-content:center; align-items:center; border:1px solid currentColor; border-radius:10px; background:transparent; padding:0; line-height:1;}

.onparmak-target{height:260px; overflow-y:auto; border:1px solid currentColor; border-radius:.75rem; padding:.75rem; margin-top:10px}
#op-input { height: 75px; border:1px solid currentColor; border-radius:.75rem; padding:.75rem; margin-top:10px; background:transparent; color:inherit}

.onparmak-hud{display:flex; gap:8px; flex-wrap:wrap; margin-top:8px}
.hud-chip{display:inline-flex; gap:8px; padding:4px 10px; border:1px solid currentColor; border-radius:999px; font-size:.9rem}
/* === End Fix === */

.op-select-ph{ position:absolute; left:12px; top:50%; transform:translateY(-50%); pointer-events:none; opacity:.6; }
.op-select:not(:disabled) + .op-select-ph{ display:none; }

/* onparmak 0.9.16f: clean disabled placeholder */

#op-container select, #op-container textarea {
    width: 100% ;
}
#op-target {
  text-align: justify;
  line-height: 1.6;
  word-spacing: 0.05em;
}

:root{
  --op-accent-500:#22c55e;
  --op-accent-400:#34d399;
  --op-accent-600:#16a34a;
  --op-surface:#0f172a;
  --op-border:#334155;
}

#op-target,
#op-input{
  border:1px solid var(--op-border);
  border-radius:14px;
  background: rgba(255,255,255,0.02);
  box-shadow: 0 0 0 1px rgba(255,255,255,0.02) inset;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

#op-target:hover, #op-input:hover,
#op-target:focus, #op-input:focus{
  border-color: var(--op-accent-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--op-accent-500) 35%, transparent);
  background: rgba(34,197,94,0.04);
  outline: none;
}

select{
  border:1px solid var(--op-border);
  border-radius:12px;
  background: var(--op-surface);
  transition: border-color .2s ease, box-shadow .2s ease;
}
select:focus{
  border-color: var(--op-accent-400);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--op-accent-400) 30%, transparent);
  outline:none;
}

button{
  border-radius:12px;
  border:1px solid var(--op-border);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(0,0,0,0.05));
  transition: transform .08s ease, border-color .2s ease, background .2s ease;
}
button:hover{ border-color: var(--op-accent-500); }
button:active{ transform: translateY(1px) scale(0.98); }

button .fa,
button svg{ color: var(--op-accent-500); }

.badge, .chip{
  border:1px solid var(--op-border);
  border-radius:999px;
  background: rgba(255,255,255,0.04);
  padding: .35rem .7rem;
}
.badge[data-type="primary"]{
  border-color: var(--op-accent-600);
  background: color-mix(in oklab, var(--op-accent-600) 18%, transparent);
}

#op-target::-webkit-scrollbar,
#op-input::-webkit-scrollbar{ height:10px; width:10px; }
#op-target::-webkit-scrollbar-thumb,
#op-input::-webkit-scrollbar-thumb{
  background: color-mix(in oklab, var(--op-accent-500) 40%, #64748b);
  border-radius: 999px;
}

/* varsayılan mavi temayı devre dışı bırak */
  padding-right: 2.5rem;         /* ok için boşluk */
  background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%2020%2020%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%272%27%3E%0A%3Cpath%20d%3D%27M6%208l4%204%204-4%27/%3E%3C/svg%3E');
  color-scheme: dark;            /* açılır listeyi koyu yap (destekleyen tarayıcılar) */
select:hover{ border-color: var(--op-accent-500); }
select:focus{
  outline: none;
  border-color: var(--op-accent-500);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--op-accent-500) 30%, transparent);
}

/* Açılır menü arka planı (destekleyen tarayıcılar) */
select option, select optgroup{
  background: #0b1220;   /* koyu lacivert yerine tema zeminine yakın */
  color: #e5e7eb;
}

/* Windows/IE kalıntısı */
select::-ms-expand{ display:none; }

select option:hover {
  background: #4b5563 ; /* biraz daha açık gri */
  color: #f1f5f9 ;
}

select:focus {
  outline: none;
  border-color: var(--op-accent-500);
  box-shadow: 0 0 0 2px color-mix(in oklab, var(--op-accent-500) 40%, transparent);
}

select {
  background-color: #1f2937 ; /* koyu gri */
  color: #f1f5f9 ;           /* açık gri yazı */
  border: 1px solid var(--op-accent-500) ;
}

select option:checked,
select option:hover {
  background-color: #374151 ; /* nötr gri */
  color: #f1f5f9 ;
}

.op-select-hidden{ display:none ; }

.op-select-wrap{ position:relative; display:inline-block; width:100%; }
.op-select-trigger{
  width:100%;
  text-align:left;
  border:1px solid var(--op-accent-500);
  border-radius:12px;
  padding:.6rem .9rem;
  background: #1f2937; /* neutral grey */
  color: #e5e7eb;
}
.op-select-trigger:focus{
  outline:none;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--op-accent-500) 40%, transparent);
}
.op-select-wrap::after{
  content:'';
  position:absolute; right:.8rem; top:50%; width:.6rem; height:.6rem;
  border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8;
  transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
}

.op-select-panel{
  position:absolute; left:0; right:0; z-index:40;
  max-height:260px; overflow:auto;
  margin-top:.35rem;
  background:#0f172a;
  border:1px solid #334155;
  border-radius:10px;
  display:none;
}
.op-select-wrap.is-open .op-select-panel{ display:block; }

.op-select-item{
  padding:.55rem .9rem;
  cursor:pointer;
  color:#e5e7eb;
}
.op-select-item:hover,
.op-select-item.is-active{ background:#374151; }
.op-select-item.is-selected{ background:#4b5563; }

.op-select-hidden{ position:absolute ; opacity:0 ; pointer-events:none ; width:0; height:0; }

.op-select-wrap{ position:relative; display:inline-block; width:100%; }
.op-select-trigger{
  width:100%;
  text-align:left;
  border:1px solid var(--op-accent-500);
  border-radius:12px;
  padding:.6rem .9rem;
  background: #1f2937; /* koyu gri, temayla uyum */
  color: #e5e7eb;
  line-height:1.4;
}
.op-select-trigger:focus{ outline:none; box-shadow:0 0 0 2px color-mix(in oklab, var(--op-accent-500) 35%, transparent); }
.op-select-wrap::after{
  content:''; position:absolute; right:.8rem; top:50%; width:.55rem; height:.55rem;
  border-right:2px solid #94a3b8; border-bottom:2px solid #94a3b8; transform: translateY(-60%) rotate(45deg);
  pointer-events:none;
}

.op-select-panel{
  position:absolute; left:0; right:0; z-index:50;
  max-height:220px; overflow:auto;
  margin-top:.35rem;
  background:#0b1220;
  border:1px solid #334155;
  border-radius:10px;
  display:none;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
}
.op-select-wrap.is-open .op-select-panel{ display:block; }

.op-select-item{ padding:.55rem .9rem; cursor:pointer; color:#e5e7eb; }
.op-select-item:hover{ background:#1f2937; }
.op-select-item.is-selected{ background:#374151; }

.op-select{
  appearance: auto ; -webkit-appearance: auto ; -moz-appearance: auto ;
  display: block ;
  background: #ffffff ;
  color: #000000 ;
  border: 1px solid var(--op-accent-500) ;
  border-radius: 12px ;
  padding: .55rem .9rem ;
}
/* Make sure any previous custom wrapper is visually neutral */
.op-select-wrap{ all: unset; }
.op-select-hidden{ all: unset ; display: block ; visibility: visible ; opacity: 1 ; }
.op-select-panel, .op-select-trigger{ display: none ; }
select option{ background:#ffffff ; color:#000000 ; }

.onparmak-hud .hud-chip,
.onparmak-hud .chip,
.onparmak-hud .stat,
.onparmak-hud .op-hud-item {
  border-radius: 0 ;
}

#op-toggle .ico-play{display:none}
#op-toggle .ico-pause{display:inline}

#op-toggle i.fa-solid{display:inline}

#op-toggle .ico-play{ display:inline; }
#op-toggle .ico-pause{ display:none; }
#op-toggle.running .ico-play{ display:none; }
#op-toggle.running .ico-pause{ display:inline; }
/* Icon color customization (0.9.36b) */
#op-toggle .ico-play i { color: #4caf50; }
#op-toggle .ico-pause i { color: #f44336; }
#op-reset i { color: #ff9800; }
#op-full i { color: #2196f3; }
/* OnParmak 0.9.6: icon visibility via state classes */
#op-toggle .ico-play, #op-toggle .ico-pause { display: none; }
#op-toggle.is-paused .ico-play { display: inline; }
#op-toggle.running  .ico-pause { display: inline; }

/* OnParmak 0.9.8: target placeholder look */
#op-target.op-placeholder{
  color: rgba(255,255,255,.55);
  font-style: italic;
}

/* OnParmak 0.9.8: initial lock visual */
#op-toggle[disabled], #op-toggle.is-locked{
  opacity:.6;
  cursor:not-allowed;
  pointer-events:none;
}

/* OnParmak 0.9.9: input locked look */
#op-input[disabled], #op-input.is-input-locked{
  opacity:.85;
  cursor:not-allowed;
  background: rgba(255,255,255,.06);
}

/* OnParmak 0.9.10: locked selects look */
#op-cat.is-locked, #op-item.is-locked, #op-duration.is-locked{
  opacity:.75;
  cursor:not-allowed;
}

/* OnParmak 0.9.12: ensure title tooltip shows while locked */
#op-toggle.lock-tooltip-fix[disabled],
#op-toggle.lock-tooltip-fix.is-locked{
  pointer-events:auto; /* allow hover for title tooltip */
}

/* OnParmak 0.9.12: visible current word highlight */
#op-target .opw.current{
  background: rgba(255,255,255,.18);
  font-weight: 700;
  border-radius: 4px;
  padding: 0 .15em;
}

/* OnParmak 0.9.16: ensure normal font for real text */
#op-target:not(.op-placeholder){ font-style: normal ; }
#op-target.op-placeholder{ font-style: italic; }

/* Stronger highlight */
#op-target .opw.current{
  background: rgba(255,255,255,.18) ;
  font-weight: 700 ;
  border-radius: 4px;
  padding: 0 .15em;
}

:root{
  --onp-highlight-bg: #ffe08a; /* vurgunun arka plan rengi */
  --onp-highlight-fg: #111;    /* vurgunun yazı rengi */
  --onp-highlight-outline: 0 0 0 2px rgba(0,0,0,.08);
}
#op-target .opw.current{
  background: var(--onp-highlight-bg) ;
  color: var(--onp-highlight-fg) ;
  box-shadow: var(--onp-highlight-outline);
  border-radius: .25rem;
  transition: background-color .15s ease, color .15s ease;
}
/* Metin alanını kaydırmaya kilitle (kullanıcı scroll yapamasın) */
#op-target{
  overscroll-behavior: contain;
  overflow: hidden ; /* manuel kaydırma yok */
  scroll-behavior: smooth;
}

/* OnParmak 0.9.48 - Results Modal */
#op-modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.45);z-index:9999}
#op-modal .op-modal-box{min-width:320px;max-width:90vw;background:#1f1f1f;color:#fff;padding:24px;border-radius:16px;box-shadow:0 10px 30px rgba(0,0,0,.5);text-align:center}
#op-modal .op-modal-actions{display:flex;gap:12px;justify-content:center;margin-top:16px}
#op-modal button{padding:10px 16px;border-radius:999px;border:0;cursor:pointer}
#op-modal #op-modal-ok{background:#444;color:#fff}

/* === OnParmak 0.9.48a Modal UI polish === */
#op-modal{ background: rgba(0,0,0,.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
#op-modal .op-modal-box{
  background: #222; color:#eaeaea; border:1px solid rgba(255,255,255,0.06);
  padding: 28px 24px; border-radius: 18px;
  animation: op-pop .18s ease-out;
}
#op-modal .op-modal-title{ font-size: 1.5rem; line-height:1.2; font-weight: 800; margin: 0 0 12px; letter-spacing:.2px; }
#op-modal .op-stat{ margin: 8px 0; font-size: 0.95rem; }
#op-modal .op-badge{
  display:inline-block; padding:4px 10px; border-radius: 999px; font-weight:700; font-size:.95rem;
  border:1px solid currentColor; vertical-align: middle;
}
#op-modal .op-badge--good{ color:#22c55e; background: rgba(34,197,94,.12); }
#op-modal .op-badge--bad{ color:#ef4444; background: rgba(239,68,68,.12); }
#op-modal .op-modal-actions{ margin-top: 18px; }
#op-modal .op-btn{
  background: linear-gradient(180deg, #4b5563, #374151);
  color:#fff; padding: 12px 18px; border-radius: 999px; border:0; cursor:pointer;
  box-shadow: 0 6px 18px rgba(0,0,0,.25);
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
}
#op-modal .op-btn:hover{ transform: translateY(-1px); box-shadow: 0 10px 22px rgba(0,0,0,.28); opacity:.95; }
#op-modal .op-btn:active{ transform: translateY(0); box-shadow: 0 4px 12px rgba(0,0,0,.25); }
#op-modal .op-btn:focus{ outline: 2px solid rgba(59,130,246,.8); outline-offset: 3px; }

@keyframes op-pop { from { opacity:0; transform: scale(.96);} to { opacity:1; transform: scale(1);} }

@media (max-width: 480px){
  #op-modal .op-modal-box{ min-width: 280px; padding: 22px 18px; }
  #op-modal .op-modal-title{ font-size: 1.35rem; }
}
@media (prefers-reduced-motion: reduce){
  #op-modal .op-modal-box{ animation: none ; }
  #op-modal .op-btn{ transition: none ; }
}

/* === OnParmak 0.9.48b Modal UI tweaks === */
/* Title: bigger + blue + separator line */
#op-modal .op-modal-title{
  color:#3b82f6; /* blue */
  font-size: 1.6rem;
  border-bottom: 1px solid rgba(255,255,255,.2);
  padding-bottom: 10px;
  margin-bottom: 14px;
}

/* Align rows perfectly regardless of digits */
#op-modal .op-stat{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
#op-modal .op-stat .op-stat-label{ display:flex; align-items:center; gap:8px; min-width: 170px; }
#op-modal .op-icon{ font-size: 1.05rem; line-height:1; }
#op-modal .op-icon--good{ color:#22c55e; }
#op-modal .op-icon--bad{ color:#ef4444; }

/* Square corners for badges and button */
#op-modal .op-badge{ border-radius: 4px; }
#op-modal .op-btn{ border-radius: 6px; }
 /* gold text */

/* Keep contrast */
@media (max-width: 480px){
  #op-modal .op-stat .op-stat-label{ min-width: 140px; }
}

/* === OnParmak 0.9.48c Modal hover/close effects === */
#op-modal .op-btn.op-btn--ok:hover{
  transform: scale(1.05);
  box-shadow: 0 0 12px rgba(255,255,255,.35);
}
#op-modal.op-modal-close-anim .op-modal-box{
  animation: op-close .2s ease-in forwards;
}
@keyframes op-close{
  from{opacity:1; transform:scale(1);}
  to{opacity:0; transform:scale(.9);}
}

#op-actions-mount{position:relative;}
#op-kbd i{font-size:18px;line-height:1;}
#op-kbd-menu.onp-pop{position:absolute;top:56px;left:0;z-index:20;}
.onp-pop--menu{background:#222;border:1px solid #444;border-radius:10px;padding:6px;box-shadow:0 6px 18px rgba(0,0,0,.3);}
.onp-pop-item{display:block;width:160px;text-align:left;padding:8px 10px;background:transparent;color:#fff;border:0;border-radius:8px;cursor:pointer;}
.onp-pop-item:hover,.onp-pop-item.is-active{background:#2e7d32;}
.onp-pop-item i.fa-check{float:right;color:#4caf50;}
.hidden{display:none ;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);white-space:nowrap;}

#op-kbd .fa-keyboard{ color:#2ecc71; }
#op-kbd:hover .fa-keyboard{ filter:brightness(1.1); }

#op-kbd .fa-keyboard{ color:#2ecc71; }
#op-kbd:hover .fa-keyboard{ filter:brightness(1.1); }
#op-kbd-menu.onp-pop{ z-index:9999; }
.onp-pop--menu{ background:#222;border:1px solid #444;border-radius:10px;padding:6px;box-shadow:0 10px 24px rgba(0,0,0,.4); }
.onp-pop-item{ display:block;width:100%;text-align:left;padding:8px 10px;background:transparent;color:#fff;border:0;border-radius:8px;cursor:pointer; }
.onp-pop-item:hover,.onp-pop-item.is-active{ background:#2e7d32; }
.onp-pop-item i.fa-check{ float:right;color:#4caf50; }
.hidden{ display:none ; }

/* Time mask */
.op-time-masked #op-time{ filter: blur(6px); transition: filter .15s ease; }
/* Action buttons base + hover */
#op-actions-mount .onp-action-btn{
  border: 1px solid currentColor ;
  width: 44px; height: 44px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
}
#op-actions-mount .onp-action-btn i{ font-size:16px; line-height:1; }
#op-actions-mount button:hover,
#op-actions-mount .onp-actions button:hover,
#op-actions-mount .onp-action-btn:hover{ border-color: currentColor; }
/* Icon colors */
#op-time-toggle.onp-action-btn i{ color:#B57EDC; } /* Lavender */
#op-font.onp-action-btn i{ color:#008080; }        /* Teal */
/* Keyboard popover smaller font */
#op-kbd-menu .onp-pop-item span{ font-size:15px; }
/* Font menu background match & active */
#op-font-menu.onp-pop{
  background: #1f1f1f;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  padding: 6px;
}
#op-font-menu .onp-pop-item.is-active{ background: rgba(0,166,81,.15); }
/* Font sizes */
.onp-font-normal #op-target{}
.onp-font-medium #op-target{ font-size:19px; line-height:1.6; }
.onp-font-xlarge #op-target{ font-size:22px; line-height:1.7; }

.onp-select-label,
.select__placeholder,
.onp-select__text {
  transition: none ;
  animation: none ;
}

#op-toggle.is-locked .ico-play { display: inline ; }
#op-toggle.is-locked .ico-pause { display: none ; }
#op-toggle.lock-tooltip-fix.is-locked .ico-play { display: inline ; }
#op-toggle.lock-tooltip-fix.is-locked .ico-pause { display: none ; }

#op-kbd-menu .onp-pop-item.is-active{ background: rgba(0,166,81,.15); }

#op-kbd-menu .onp-pop-item:hover{ background: rgba(0,166,81,.15); }

#op-font-menu .onp-pop-item + .onp-pop-item,
#op-kbd-menu .onp-pop-item + .onp-pop-item {
  border-top: 1px solid rgba(255,255,255,.12);
}

#op-font-menu.onp-pop,
#op-kbd-menu.onp-pop {
  max-height: 60vh;
  overflow-y: auto;
}

#op-font-menu .onp-pop-item:hover{ background: rgba(0,166,81,.15); }

#op-toggle .ico-play, #op-toggle .ico-pause { display: none; }
#op-toggle.is-paused .ico-play { display: inline; }
#op-toggle.running .ico-pause { display: inline; }

#op-kbd-menu .onp-pop-item:hover,
#op-kbd-menu .onp-pop-item.is-active { background: rgba(0,166,81,.15); }

#onparmak-root a:focus-visible,
#onparmak-root button:focus-visible,
#onparmak-root [role="button"]:focus-visible,
#onparmak-root .onp-pop-item:focus-visible {
  outline: 2px solid #2e7d32;
  outline-offset: 2px;
}

/* 0.9.54m4: palette consistency — soft green for hover/active */
#op-kbd-menu .onp-pop-item:hover,
#op-kbd-menu .onp-pop-item.is-active,
#op-font-menu .onp-pop-item:hover,
#op-font-menu .onp-pop-item.is-active { background: rgba(0,166,81,.15); }

/* Accent alignment for icons within active rows */
#op-kbd-menu .onp-pop-item.is-active .dashicons,
#op-font-menu .onp-pop-item.is-active .dashicons { color: #2e7d32; }

/* Optional border subtlety to separate items */
#op-kbd-menu .onp-pop-item + .onp-pop-item,
#op-font-menu .onp-pop-item + .onp-pop-item { border-top: 1px solid rgba(0,0,0,.05); }

#op-kbd-menu .onp-pop-item:not(:first-child),
#op-font-menu .onp-pop-item:not(:first-child){
  border-top: 1px solid rgba(255,255,255,.08);
}

#op-kbd-menu .onp-pop-item,
#op-font-menu .onp-pop-item {
  font-size: 14px;
  line-height: 1.4;
}
#op-kbd-menu .onp-pop-item .dashicons,
#op-font-menu .onp-pop-item .dashicons {
  font-size: 16px;
}

/* --- Merged from hud-fix.css --- */
.onparmak-hud .hud-chip span{ white-space:nowrap; }
.onparmak-hud .hud-chip strong{
  display:inline-block; min-width:4ch; text-align:right;
  font-variant-numeric: tabular-nums;
  font-feature-settings:"tnum" 1, "zero" 1;
  white-space:nowrap;
}
.onparmak-hud #op-time{ min-width:5ch; } /* MM:SS */
.onparmak-hud #op-correct-words{ color:#16a34a !important; }
.onparmak-hud #op-wrong-words  { color:#dc2626 !important; }

/* 0.9.32b2: HUD square corners */
.onparmak-hud .hud-chip,
.onparmak-hud .chip,
.onparmak-hud .stat,
.onparmak-hud .op-hud-item {
  border-radius: 0 !important;
}


/* === OnParmak 0.9.64a overrides === */
#onparmak-root{
  --op-border: rgba(255,255,255,.65); /* default border contrast bumped up */
}
#onparmak-root .onparmak-target,
#onparmak-root #op-input,
#onparmak-root select{
  border-color: rgba(255,255,255,.65);
}
/* Keep focus/hover accent behavior as is; only default state is stronger */


/* === OnParmak 0.9.64b overrides === */
/* Compact input field like a single-line box under the large text area */
#onparmak-root #op-input{
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  padding: .35rem .7rem !important;
  line-height: 1.2 !important;
  resize: none !important;
  overflow-y: hidden !important;
}
/* Keep large text area */
#onparmak-root .onparmak-target{ height:260px !important; overflow-y:auto !important; }


/* === OnParmak 0.9.64c overrides === */
/* Ultra-compact input: stays single-line, no overflow */
#onparmak-root #op-input{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: .28rem .6rem !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  display: block;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
#onparmak-root #op-input *{
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
}
/* Ensure big area stays large */
#onparmak-root .onparmak-target{ height:260px !important; overflow-y:auto !important; }


/* === OnParmak 0.9.64d overrides === */
/* Compact single-line input, no overflow */
#op-input{
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: .25rem .55rem !important;
  line-height: 1.2 !important;
  font-size: 14px !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: clip !important;
  resize: none !important;
  display: block !important;
}
#op-input::placeholder{ white-space:nowrap; text-overflow:ellipsis; }
/* Keep big reading area */
.onparmak-target{ height:260px !important; overflow-y:auto !important; }


/* === OnParmak 0.9.64e overrides === */
/* Input box: centered, short, no overflow; font-size inherit so placeholder küçülmez */
#op-input{
  height: 32px !important;
  min-height: 32px !important;
  max-height: 32px !important;
  padding: .25rem .55rem !important;
  line-height: 1.3 !important;
  font-size: inherit !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  resize: none !important;
  display: block !important;
  max-width: 520px !important; /* banner genişliği kadar */
  margin: 10px auto 0 !important; /* ortalı */
}

/* Reading area: keep programmatic scrolling but reduce accidental manual scroll */
.onparmak-target{
  height:260px !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
}

/* Optional: prevent focus outline and wheel scrolling inside target when input active */
.onparmak-target:focus{ outline: none !important; }


/* === OnParmak 0.9.64f overrides === */
/* Input: compact, shorter width, slightly taller line */
#op-input{
  height: 34px !important;
  min-height: 34px !important;
  max-height: 34px !important;
  padding: .25rem .5rem !important;
  line-height: 1.4 !important;
  font-size: inherit !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  resize: none !important;
  display: block !important;
  max-width: 460px !important; /* biraz daha kısa */
  margin: 10px auto 0 !important; /* ortalı */
}

/* Remove scrollbar from reading area */
.onparmak-target{
  height:260px !important;
  overflow: hidden !important; /* gizlendi */
}


/* === OnParmak 0.9.64f overrides === */
/* Hide scrollbar visuals in reading area but keep programmatic scroll */
.onparmak-target{
  height:260px !important;
  overflow-y: auto !important;
  -ms-overflow-style: none !important;  /* IE/Edge */
  scrollbar-width: none !important;     /* Firefox */
}
.onparmak-target::-webkit-scrollbar{ width:0 !important; height:0 !important; } /* WebKit */

/* Input: slightly taller line, a bit shorter width */
#op-input{
  height: 36px !important;
  min-height: 36px !important;
  max-height: 36px !important;
  line-height: 1.35 !important;
  max-width: 460px !important;  /* shortened */
  margin: 10px auto 0 !important;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  resize: none !important;
}


/* === OnParmak 0.9.64g overrides === */
/* Relaxed input area: more breathing room top/bottom */
#op-input{
  height: 38px !important;
  min-height: 38px !important;
  max-height: 38px !important;
  line-height: 1.4 !important;
  padding: .4rem .8rem !important;
  margin: 16px auto 12px !important;  /* more space top and bottom */
  max-width: 460px !important;
  border-radius: 10px !important;
}


/* === OnParmak 0.9.64g overrides === */
/* Breathing room: add space below target and around input */
.onparmak-target{
  margin-bottom: 14px !important;
}
#op-input{
  margin-top: 14px !important;
  margin-bottom: 10px !important;
  max-width: 460px !important; /* keep previous width */
  height: 36px !important;
  line-height: 1.35 !important;
}


/* === OnParmak 0.9.64h overrides === */
#op-input{
  max-width: 380px !important; /* info yazısı kadar */
  height: 44px !important;     /* daha yüksek */
  min-height: 44px !important;
  line-height: 1.4 !important;
  margin-top: 14px !important;
  margin-bottom: 14px !important; /* HUD ile eşit boşluk */
  padding: .4rem .7rem !important;
  font-size: inherit !important;
  text-align: center !important;
}
.onparmak-target{
  margin-bottom: 14px !important;
}


/* === OnParmak 0.9.64h overrides === */
/* Input: banner-length, slightly taller, equal vertical spacing */
#op-input{
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 1.45 !important;
  font-size: inherit !important;
  padding: .35rem .8rem !important;
  width: auto !important;
  max-width: 520px !important;   /* banner kadar */
  min-width: 420px !important;   /* çok dar görünmesin */
  margin: 14px auto 14px !important; /* üst ve alt boşluk eşit */
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  resize: none !important;
  display: block !important;
}


/* === OnParmak 0.9.64i overrides === */
/* Lock typing input font-size so font menu doesn't touch it */
#op-input{
  font-size: 16px !important; /* sabit */
}
.onp-font-normal #op-input,
.onp-font-medium #op-input,
.onp-font-xlarge #op-input{
  font-size: 16px !important;
}
#op-input::placeholder{ font-size: 16px !important; }


/* === OnParmak 0.9.64j overrides === */
/* More breathing room inside reading area */
.onparmak-target{
  padding: 1rem !important;
}

/* === OnParmak 0.9.65a: Welcome/Target stage === */
.op-stage{position:relative;margin:16px 0;}
.op-stage-pane{display:none;border:1px solid rgba(255,255,255,.08);border-radius:12px;}
.op-stage-pane.is-visible{display:block;}
#op-welcome{padding:18px;background:rgba(255,255,255,.03)}

#op-welcome{ white-space: normal; }

#op-welcome p{ margin: 0 0 .5rem; }

/* 0.9.65y - Gizleme sınıfı eklendi */
.op-hidden { display: none !important; }

/* 0.9.65y - Welcome aşamasında yazma alanını gizle */
.onparmak-welcome #op-input { display: none !important; }

/* 0.9.65y3 - Input görünürlüğü */
#op-welcome#op-target
/* OnParmak 0.9.66h: input visibility via CSS */
#op-welcome.is-visible ~ #op-input { display:none !important; }
#op-target.is-visible  ~ #op-input { display:block !important; }


/* OnParmak 0.9.66i: body-class driven input visibility */
.op-welcome-visible #op-input { display: none !important; }
.op-target-visible  #op-input { display: block !important; }



/* OnParmak 0.9.67k: Hide placeholder on user intent */
#op-input:focus::placeholder,
#op-input:hover::placeholder,
#op-input:active::placeholder,
#op-input[disabled]::placeholder { opacity: 0 !important; }
#op-input:focus::-webkit-input-placeholder,
#op-input:hover::-webkit-input-placeholder,
#op-input:active::-webkit-input-placeholder,
#op-input[disabled]::-webkit-input-placeholder { opacity: 0 !important; }
#op-input:focus::-moz-placeholder,
#op-input:hover::-moz-placeholder,
#op-input:active::-moz-placeholder,
#op-input[disabled]::-moz-placeholder { opacity: 0 !important; }
#op-input:focus:-ms-input-placeholder,
#op-input:hover:-ms-input-placeholder,
#op-input:active:-ms-input-placeholder,
#op-input[disabled]:-ms-input-placeholder { opacity: 0 !important; }
#op-input:focus::-ms-input-placeholder,
#op-input:hover::-ms-input-placeholder,
#op-input:active::-ms-input-placeholder,
#op-input[disabled]::-ms-input-placeholder { opacity: 0 !important; }


/* === OnParmak 0.9.68i: HUD responsive + tipografi + ikon boyutu 18px === */

/* Grid ve boşluklar */
.onparmak-hud{
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 6px;
}

/* Kutu temel stili + ikon alanı */
.onparmak-hud > *{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;                   /* dokunmatik hedef */
  box-sizing: border-box;
  padding: 10px 16px 10px 38px;       /* 18px ikon için alan */
}

/* Pseudo ikon — 18px (renkler önceki sürümde tanımlı) */
.onparmak-hud > *::before{
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  pointer-events: none;
  opacity: .95;
}

/* Tipografi: etiket küçük/gri; değer belirgin */
.onparmak-hud{ font-size: clamp(12px, 1.2vw, 14px); color: #9ca3af; }
.onparmak-hud [id^="op-"]{
  margin-left: auto;
  font-weight: 700;
  font-size: clamp(14px, 1.4vw, 18px);
  color: #e5e7eb;
}

/* Kırılımlar: 6→4→3→2→1 */
@media (max-width: 1024px){
  .onparmak-hud{ grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 768px){
  .onparmak-hud{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 560px){
  .onparmak-hud{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px;
  }
  .onparmak-hud > *{
    padding: 8px 12px 8px 34px;     /* ikon 16px’e düşünce sola 34px yeterli */
  }
  .onparmak-hud > *::before{
    width: 16px;
    height: 16px;
  }
}
@media (max-width: 360px){
  .onparmak-hud{ grid-template-columns: 1fr; }
}

/* === OnParmak 0.9.68j: HUD ikon background-image (nth-child) === */
/* 1: WPM (turuncu) */
.onparmak-hud > *:nth-child(1)::before{
  background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23f59e0b%27%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011.732V7a1%201%200%200%200-2%200v6.732a2%202%200%201%200%202%200z%27%2F%3E%3C%2Fsvg%3E");
}
/* 2: Doğruluk (mavi) */
.onparmak-hud > *:nth-child(2)::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%233b82f6' d='M12 2l7 3v6c0 5-3.5 9-7 11-3.5-2-7-6-7-11V5l7-3zm-1 12l-3-3 1.4-1.4L11 11.2l3.6-3.6L16 9l-5 5z'/%3E%3C/svg%3E");
}
/* 3: Karakter (mor) */
.onparmak-hud > *:nth-child(3)::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%238b5cf6' d='M4 19l4.5-12h3L16 19h-2.5l-.9-2.6H7.4L6.5 19H4zm4-4h3.2L9.6 9.9 8 15zM18 7h2v10h-2V7z'/%3E%3C/svg%3E");
}
/* 4: Doğru kelime (yeşil check) */
.onparmak-hud > *:nth-child(4)::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2319c37d' d='M9 16.2L4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E");
}
/* 5: Yanlış kelime (kırmızı çarpı) */
.onparmak-hud > *:nth-child(5)::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ef4444' d='M18.3 5.7L12 12l6.3 6.3-1.4 1.4L10.6 13.4 4.3 19.7 2.9 18.3 9.2 12 2.9 5.7 4.3 4.3 10.6 10.6 16.9 4.3z'/%3E%3C/svg%3E");
}
/* 6: Süre (sarı saat) */
.onparmak-hud > *:nth-child(6)::before{
  background-image: url(\"data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20fill%3D%27%23fbbf24%27%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010h5v-2h-4V7h-2v5z%27%2F%3E%3C%2Fsvg%3E");
}

/* === OnParmak 0.9.68k: Doğru/Yanlış sağ padding düzeltmesi === */
.onparmak-hud > *:nth-child(4),
.onparmak-hud > *:nth-child(5){
  padding-right: 20px;
}
@media (max-width: 560px){
  .onparmak-hud > *:nth-child(4),
  .onparmak-hud > *:nth-child(5){
    padding-right: 16px;
  }
}

/* === OnParmak 0.9.68l: Simetrik değer boşluğu === */
/* 0.9.68k'da verilen ek sağ padding'i geri al (varsayılanlara dön) */
.onparmak-hud > *:nth-child(4),
.onparmak-hud > *:nth-child(5){
  padding-right: 16px !important; /* geniş ekranda varsayılan */
}
@media (max-width: 560px){
  .onparmak-hud > *:nth-child(4),
  .onparmak-hud > *:nth-child(5){
    padding-right: 12px !important; /* mobil varsayılan */
  }
}

/* Tüm değer span'larına küçük bir iç boşluk ver (simetrik görünüm) */
.onparmak-hud [id^="op-"]{ padding-right: 4px; }
@media (max-width: 560px){
  .onparmak-hud [id^="op-"]{ padding-right: 2px; }
}

/* === OnParmak 0.9.68m: Doğru/Yanlış değerlerini biraz sola al === */
.onparmak-hud #op-correct-words,
.onparmak-hud #op-wrong-words{
  padding-right: 8px;   /* genel 4px'in üzerinde — biraz daha sola */
}
@media (max-width: 560px){
  .onparmak-hud #op-correct-words,
  .onparmak-hud #op-wrong-words{
    padding-right: 6px;
  }
}

/* OnParmak HUD kutuları - yuvarlak köşe (yüksek özgüllük) */
.onparmak .onparmak-hud > div,
.onparmak .onparmak-hud .hud-item,
.onparmak .onparmak-hud .chip,
.onparmak .onparmak-hud .op-chip {
    border-radius: 8px !important;
    overflow: hidden;
}

/* OnParmak HUD - net yuvarlak köşe */
.onparmak-hud .chip,
#op-wpm, #op-acc, #op-chars, #op-correct-words, #op-wrong-words, #op-time {
    border-radius: 10px !important;
    overflow: hidden;
    background-clip: padding-box;
}
.onparmak-hud .chip::before,
.onparmak-hud .chip::after {
    border-radius: inherit;
}

/* OnParmak HUD - yuvarlak köşe garantili */
.onparmak-hud > *,
.onparmak-hud [id^="op-"],
.onparmak-hud .chip,
.onparmak-hud .op-chip {
    border-radius: 10px !important;
    overflow: hidden;
    background-clip: padding-box;
    -webkit-mask-image: radial-gradient(#000 0 0);
    clip-path: inset(0 round 10px);
}
.onparmak-hud > *::before,
.onparmak-hud > *::after,
.onparmak-hud .chip::before,
.onparmak-hud .chip::after {
    border-radius: inherit !important;
}
.onparmak-hud [id^="op-"] *:not(svg),
.onparmak-hud > * *:not(svg) {
    border-radius: inherit !important;
    background-clip: padding-box;
}

/* OnParmak duraklatma mesajı ortalama */
.onparmak-pause-msg {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
}

/* OnParmak pause bubble centering fallback */
#onp-info-bubble{ text-align:center !important; }


/* OnParmak HUD ::before safe defaults */
.onparmak-hud > *::before{
  content:'';
  display:inline-block;
  width:18px;
  height:18px;
  background-repeat:no-repeat;
  background-size:contain;
  background-position:center;
  -webkit-mask-image:none !important;
  clip-path:none !important;
}



/* === OnParmak 0.9.68aa: HUD icon definitive override (order-last) === */
.onparmak-hud > *:nth-child(1)::before{ background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23f59e0b%22%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011.732V7a1%201%200%200%200-2%200v6.732a2%202%200%201%200%202%200z%22%2F%3E%3C%2Fsvg%3E'); }
.onparmak-hud > *:nth-child(6)::before{ background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20fill%3D%22%23fbbf24%22%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010h5v-2h-4V7h-2v5z%22%2F%3E%3C%2Fsvg%3E'); }



/* === OnParmak 0.9.68ab: HUD icons via CSS mask (definitive) === */
.onparmak-hud > *:nth-child(1)::before{
  background:none !important;
  background-image:none !important;
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011.732V7a1%201%200%200%200-2%200v6.732a2%202%200%201%200%202%200z%27%2F%3E%3C%2Fsvg%3E') center / contain no-repeat !important;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2011.732V7a1%201%200%200%200-2%200v6.732a2%202%200%201%200%202%200z%27%2F%3E%3C%2Fsvg%3E') center / contain no-repeat !important;
  background-color:#f59e0b !important;
}
.onparmak-hud > *:nth-child(6)::before{
  background:none !important;
  background-image:none !important;
  -webkit-mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010h5v-2h-4V7h-2v5z%27%2F%3E%3C%2Fsvg%3E') center / contain no-repeat !important;
          mask: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%3E%3Cpath%20d%3D%27M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm1%2010h5v-2h-4V7h-2v5z%27%2F%3E%3C%2Fsvg%3E') center / contain no-repeat !important;
  background-color:#fbbf24 !important;
}



/* === OnParmak 0.9.68ac: HUD stroke icons fix (final) === */
.onparmak-hud > *::before{
  -webkit-mask:none !important;
          mask:none !important;
}
.onparmak-hud > *:nth-child(1)::before{
  background:none !important;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23f59e0b%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%3Cpath%20d%3D%27M3%2013a9%209%200%201%201%2018%200%27%2F%3E%0A%3Cpath%20d%3D%27M12%2012l4-4%27%2F%3E%0A%3Cpath%20d%3D%27M6%2019a9%209%200%200%201%2012%200%27%2F%3E%0A%3C%2Fsvg%3E') !important;
}
.onparmak-hud > *:nth-child(6)::before{
  background:none !important;
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fbbf24%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%0A%3Cpath%20d%3D%27M12%207v6h5%27%2F%3E%0A%3C%2Fsvg%3E') !important;
}



/* === OnParmak 0.9.68ad: HUD colors adjusted === */
.onparmak-hud > *:nth-child(1)::before{
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23f97316%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%3Cpath%20d%3D%27M3%2013a9%209%200%201%201%2018%200%27%2F%3E%0A%3Cpath%20d%3D%27M12%2012l4-4%27%2F%3E%0A%3Cpath%20d%3D%27M6%2019a9%209%200%200%201%2012%200%27%2F%3E%0A%3C%2Fsvg%3E') !important;
}
.onparmak-hud > *:nth-child(6)::before{
  background-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23fbbf24%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%0A%3Ccircle%20cx%3D%2712%27%20cy%3D%2712%27%20r%3D%279%27%2F%3E%0A%3Cpath%20d%3D%27M12%207v6h5%27%2F%3E%0A%3C%2Fsvg%3E') !important;
}



/* === OnParmak 0.9.69a: Settings button & panel, HUD visibility === */
#op-actions-mount { position: relative; }
.op-btn.op-btn-ghost { background: transparent; border: 1px solid currentColor; border-radius:.6rem; padding:.35rem .5rem; }
.op-btn.op-btn-ghost:hover { border-color: rgba(255,255,255,.25); }
.onp-ico { display:block; fill: currentColor; }

.op-settings-menu[hidden]{ display:none !important; }
.op-settings-menu{
  position:absolute; top: 2.6rem; right: 0;
  min-width: 240px;
  background: #1d1f22; color: #e6e6e6;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: .7rem; box-shadow: 0 10px 30px rgba(0,0,0,.35);
  z-index: 999;
}
.op-settings-header{ display:flex; align-items:center; justify-content:space-between; padding:.55rem .75rem; border-bottom:1px solid rgba(255,255,255,.08); }
.op-settings-close{ background:transparent; border:0; color:#bcc2c9; font-size:1.1rem; cursor:pointer; }
.op-settings-body{ padding:.75rem; }
.onp-switch{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; }
.onp-switch input[type="checkbox"]{ width:1.05rem; height:1.05rem; accent-color:#42d392; }

/* HUD hide helper (if JS sets hidden attr) */
.onparmak-hud[hidden]{ display:none !important; }


/* === OnParmak 0.9.69a fix: settings button right aligned === */
.onparmak-toolbar{ position:relative; }
#op-settings-btn { border:1px solid currentColor; }
#op-settings-btn { border:1px solid currentColor; }
#op-settings-btn:hover{ border-color:rgba(255,255,255,.7); }


/* === OnParmak 0.9.69b: solid gear icon, white color === */
#op-settings-btn { border:1px solid currentColor; }
#op-settings-btn:hover{ border-color: rgba(255,255,255,.8); }
#op-settings-btn .onp-ico{ width:20px; height:20px; }



/* 0.9.69d: definitive border visibility fixes */
#op-actions-mount .onp-action-btn { border: 1px solid currentColor !important; }
#op-actions-mount .onp-action-btn:hover { border-color: currentColor !important; }
.op-btn.op-btn-ghost { border: 1px solid currentColor !important; }
.op-btn.op-btn-ghost:hover { border-color: currentColor !important; }
#op-settings-btn { border:1px solid currentColor; }


/* 0.9.69f ensure override */


/* === 0.9.69f: Hoş geldiniz paneli border (tema uyumlu) === */
.onparmak-welcome {
  border: 2px solid #000;  /* açık tema: siyah */
  border-radius: 12px;
  padding: 1.25rem;
  background-clip: padding-box;
}
/* koyu tema için: sitenin karanlık kök sınıfı body.dark ise */
body.dark .onparmak-welcome {
  border-color: #666;
}

/* 0.9.69f: Dark theme fallback via prefers-color-scheme */
@media (prefers-color-scheme: dark) {
  .onparmak-welcome { border-color: #666; }
}


/* === OnParmak • HUD Açık Tema Netlik (0.9.69g2) === */
body:not(.body-style-dark) .onparmak-hud :is(.hud-chip,.chip),
body:not(.body-style-dark) .onparmak-hud > *{
  border: 1px solid #1F2937 !important;
  border-radius: 10px;
}

body:not(.body-style-dark) .onparmak-hud span{
  color: #475569 !important; /* Slate-600 */
  font-weight: 400 !important;
}
body:not(.body-style-dark) .onparmak-hud :is(#op-wpm,#op-acc,#op-chars,#op-time){
  color: #334155 !important; /* Slate-700 */
  font-weight: 700 !important;
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1,"lnum" 1;
}
/* Doğru (yeşil) ve Yanlış (kırmızı) kelimeler renkleri korunur */
body:not(.body-style-dark) .onparmak-hud :is(svg,i){
  opacity: .9;
}

/* OnParmak 0.9.69g4 — HUD icon opacity (applies to light & dark) */
.hud-chip .op-icon {
  opacity: var(--onp-icon-opacity, 0.55);
  transition: opacity .2s ease;
}


/* === OnParmak: Popover BG -> Toast stili (0.9.69g6) === */
#op-kbd-menu.onp-pop,
#op-font-menu.onp-pop,
.onp-pop.onp-pop--menu {
  background: rgba(31,31,31,.85) !important;
  border: 1px solid var(--onp-border, rgba(255,255,255,.2)) !important;
  -webkit-backdrop-filter: saturate(120%) blur(0px);
  backdrop-filter: saturate(120%) blur(0px);
}


/* === OnParmak: Settings popover BG -> Toast stili (0.9.69g8) === */
#op-settings-menu.onp-pop,
.op-settings-menu.onp-pop,
#op-settings-menu {
  background: rgba(31,31,31,.85) !important;
  border: 1px solid var(--onp-border, rgba(255,255,255,.2)) !important;
  -webkit-backdrop-filter: saturate(120%) blur(0px);
  backdrop-filter: saturate(120%) blur(0px);
}

/* OnParmak 0.9.69h2: Settings menu polish */
#op-settings-menu, .op-settings-menu{ padding:12px 14px; border-radius:14px; }
#op-settings-menu label, .op-settings-menu label{
  display:grid; grid-template-columns:18px 1fr; align-items:center; gap:10px;
  margin:6px 0; font-size:14px; line-height:1.35; font-weight:600;
}
#op-settings-menu input[type="checkbox"], .op-settings-menu input[type="checkbox"]{ width:18px; height:18px; accent-color:#42d392; }

/* === OnParmak: Settings icon FX (0.9.69h3) === */
@keyframes onpSpin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes onpPulse { 0% { transform: scale(1); } 50% { transform: scale(1.18); } 100% { transform: scale(1); } }
#op-settings-btn:hover .onp-ico {
  animation: onpSpin 1s linear infinite;
  filter: drop-shadow(0 0 4px rgba(0,255,136,.8));
  will-change: transform, filter;
}
#op-settings-btn.is-clicking .onp-ico { animation: onpPulse .35s ease-out; }
#op-settings-btn:focus-visible .onp-ico { filter: drop-shadow(0 0 3px rgba(0,255,136,.7)); }
@media (prefers-reduced-motion: reduce){
  #op-settings-btn:hover .onp-ico,
  #op-settings-btn.is-clicking .onp-ico { animation: none !important; }
  #op-settings-btn .onp-ico { filter: none !important; }
}

/* === OnParmak: Settings Menu Polish (0.9.69h4) === */
.op-settings-menu{
  transform: translate(0, 10px);
  will-change: transform, opacity, filter;
  backdrop-filter: saturate(120%) blur(6px);
  -webkit-backdrop-filter: saturate(120%) blur(6px);
  box-shadow: 0 14px 40px rgba(0,0,0,.45);
}
.op-settings-menu::before{
  content: "";
  position: absolute;
  top: -6px;
  right: 18px;
  width: 12px; height: 12px;
  background: inherit;
  border: inherit;
  border-left: none;
  border-bottom: none;
  transform: rotate(45deg);
  box-shadow: -2px -2px 0 rgba(0,0,0,0.08);
  border-radius: 2px;
}
@keyframes onpMenuPop {
  0%   { opacity: 0; transform: translate(0,16px) scale(.985); filter: brightness(.98); }
  100% { opacity: 1; transform: translate(0,10px) scale(1);     filter: none; }
}
.op-settings-menu.onp-anim-in { animation: onpMenuPop .18s ease-out; }
.op-settings-menu .onp-switch,
.op-settings-menu label,
.op-settings-menu .op-item{
  position: relative;
  transition: transform .12s ease, background-color .12s ease, color .12s ease;
  border-radius: .45rem;
}
.op-settings-menu .onp-switch:hover,
.op-settings-menu label:hover,
.op-settings-menu .op-item:hover{
  background-color: rgba(255,255,255, .06);
  transform: translateX(2px);
}
.op-settings-menu input[type="checkbox"]:focus-visible + span,
.op-settings-menu input[type="checkbox"]:focus-visible ~ span{
  outline: 2px solid rgba(0,255,136,.6);
  outline-offset: 2px;
  border-radius: .35rem;
}
@media (prefers-reduced-motion: reduce){
  .op-settings-menu{ transform: none !important; }
  .op-settings-menu.onp-anim-in{ animation: none !important; }
  .op-settings-menu::before{ display: none; }
}
/* === OnParmak: Settings icon stop spin when open/click (0.9.69h4) === */
#op-settings-btn.no-spin:hover .onp-ico,
#op-settings-btn[aria-expanded="true"] .onp-ico{
  animation: none !important;
  filter: none !important;
}

/* === OnParmak: Toolbar Icon Hover FX (0.9.69h5) — settings excluded === */
.op-actions button:not(#op-settings-btn),
#op-actions-mount button:not(#op-settings-btn) {
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s ease, background-color .14s ease;
  position: relative;
  overflow: hidden;
}
.op-actions button:not(#op-settings-btn) i, .op-actions button:not(#op-settings-btn) svg,
#op-actions-mount button:not(#op-settings-btn) i, #op-actions-mount button:not(#op-settings-btn) svg {
  transition: transform .14s ease, filter .14s ease, opacity .14s ease;
  will-change: transform, filter;
}
.op-actions button:not(#op-settings-btn):hover,
#op-actions-mount button:not(#op-settings-btn):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.12);
  background-color: rgba(255,255,255,.03);
}
.op-actions button:not(#op-settings-btn):hover i, .op-actions button:not(#op-settings-btn):hover svg,
#op-actions-mount button:not(#op-settings-btn):hover i, #op-actions-mount button:not(#op-settings-btn):hover svg {
  transform: scale(1.06);
  filter: drop-shadow(0 0 6px currentColor) brightness(1.05);
}
.op-actions button:not(#op-settings-btn):active,
#op-actions-mount button:not(#op-settings-btn):active {
  transform: translateY(0) scale(.985);
  box-shadow: 0 2px 8px rgba(0,0,0,.2), inset 0 0 0 1px rgba(255,255,255,.1);
}
.op-actions button:not(#op-settings-btn)::after,
#op-actions-mount button:not(#op-settings-btn)::after{
  content:"";
  position:absolute; inset:-30% -30%;
  background: radial-gradient(120px 120px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.08), transparent 60%);
  opacity:0; transform: scale(1.2);
  transition: opacity .14s ease, transform .2s ease;
  pointer-events:none;
}
.op-actions button:not(#op-settings-btn):hover::after,
#op-actions-mount button:not(#op-settings-btn):hover::after{
  opacity:1; transform: scale(1);
}
.op-actions button:not(#op-settings-btn):focus-visible,
#op-actions-mount button:not(#op-settings-btn):focus-visible{
  outline: 2px solid rgba(0,255,136,.6);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce){
  .op-actions button:not(#op-settings-btn), #op-actions-mount button:not(#op-settings-btn) { transition: none !important; }
  .op-actions button:not(#op-settings-btn) i, .op-actions button:not(#op-settings-btn) svg,
  #op-actions-mount button:not(#op-settings-btn) i, #op-actions-mount button:not(#op-settings-btn) svg { transition: none !important; }
  .op-actions button:not(#op-settings-btn)::after, #op-actions-mount button:not(#op-settings-btn)::after { display:none !important; }
}

body:not(.body-style-dark) #op-settings-btn {
  border:1px solid rgba(31,41,55,0.9);
  color: rgba(31,41,55,1);
}

/* Ayarlar butonunu sağa sabitle */
#op-settings-btn { margin-left:auto; order:999; }