/* Tek Hat — 5×5, tek çizgide bütün hücreler.
 *
 * Neon SVG filtresiyle DEĞİL, üst üste iki `polyline` ile yapılıyor:
 * kalın ve saydam olan hale, ince ve parlak olan çizgi. Filtre mobil
 * GPU'da her karede yeniden çiziliyor ve sürüklerken takılıyordu. */

.tahta.tekhat {
  --n: 5;
  --tahta-bosluk: 6px;
  --tahta-ic: 12px;
  position: relative;
  background: #14131a;
  border-color: rgba(255, 255, 255, 0.08);
}

.tekhat .hucre {
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.35);
  font-size: 0.8rem;
}

.tekhat .hucre.yolda { background: color-mix(in srgb, var(--vurgu) 22%, transparent); }

.tekhat .hucre.baslangic {
  box-shadow: inset 0 0 0 2px var(--vurgu);
  color: var(--vurgu);
}

.tekhat .hucre.bas::after {
  content: '';
  width: 34%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--vurgu);
  box-shadow: 0 0 12px var(--vurgu);
}

.yol-katman { position: absolute; inset: var(--tahta-ic); pointer-events: none; overflow: visible; }

.hale, .cizgi {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 240ms ease;
}

.hale { stroke: var(--vurgu); stroke-width: 0.5; opacity: 0.28; }
.cizgi { stroke: var(--vurgu); stroke-width: 0.18; }

.tekhat.tamam .hale { animation: nabizHale 1.1s ease-in-out 2; }
@keyframes nabizHale {
  0%, 100% { stroke-width: 0.5; opacity: 0.28; }
  50% { stroke-width: 0.86; opacity: 0.5; }
}

.tema { display: flex; gap: 10px; justify-content: center; }

.tema__dugme {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: var(--renk);
  cursor: pointer;
  box-shadow: 0 0 10px var(--renk);
  transition: transform var(--gecis-hizli), border-color var(--gecis-hizli);
}
.tema__dugme[aria-pressed='true'] { border-color: var(--murekkep); transform: scale(1.16); }