/* Noktaları Birleştir — 5×5, merkezde haç engel. */

.tahta.baglanti {
  --n: 5;
  --tahta-bosluk: 6px;
  --tahta-ic: 10px;
  position: relative;                    /* SVG yol katmanı için */
}

/* Yol katmanı hücrelerin ÜSTÜNDE ama tıklamayı yutmuyor. Hücrelerin
   altında olsaydı dolgulu hücrelerin arkasında kaybolurdu. */
.yol-katman {
  position: absolute;
  inset: var(--tahta-ic);
  pointer-events: none;
  overflow: visible;
}

.yol-cizgi {
  fill: none;
  stroke: var(--vurgu);
  stroke-width: 0.22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
}

.baglanti .hucre {
  position: relative;
  background: var(--krem-koyu);
  font-size: clamp(0.9rem, 4.4vw, 1.3rem);
  color: var(--sonuk);
}

.baglanti .hucre[data-engel='1'] {
  background: var(--murekkep);
  color: var(--beyaz);
  cursor: not-allowed;
  font-size: clamp(1.3rem, 6vw, 1.9rem);
}

/* Numaralı nokta: dolu daire. Yol üstündeyken vurgu rengine dönüyor. */
.baglanti .hucre[data-no] {
  background: var(--beyaz);
  color: var(--komur);
  box-shadow: inset 0 0 0 2px var(--cizgi-koyu);
}

.baglanti .hucre.yolda { background: var(--vurgu-yumusak); }

.baglanti .hucre.yolda[data-no] {
  background: var(--vurgu);
  color: var(--beyaz);
  box-shadow: inset 0 0 0 2px var(--vurgu);
}

.baglanti .hucre.bas { box-shadow: inset 0 0 0 3px var(--vurgu); }

.baglanti.tamam .yol-cizgi { animation: akis 900ms ease-out; }

@keyframes akis {
  from { stroke-width: 0.4; opacity: 0.4; }
  to { stroke-width: 0.22; opacity: 0.9; }
}