/* Kayan Kareler */
.kk-tahta {
  --n: 3;
  position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto;
  padding: 6px; border-radius: 16px; background: color-mix(in srgb, var(--k) 22%, var(--yuzey-2));
  border: 2px solid color-mix(in srgb, var(--k) 45%, var(--cizgi));
}
.kk-kare {
  --x: 0; --y: 0;
  position: absolute; left: 6px; top: 6px;
  width: calc((100% - 12px) / var(--n)); height: calc((100% - 12px) / var(--n));
  transform: translate(calc(var(--x) * 100%), calc(var(--y) * 100%));
  transition: transform 0.12s ease;
  padding: 3px; border: 0; background: transparent; cursor: pointer; touch-action: manipulation;
  font: inherit; font-weight: 800; color: var(--metin);
  font-size: calc(min(100vw, 420px) / var(--n) * 0.32);
}
.kk-kare::before {
  content: ""; position: absolute; inset: 3px; border-radius: 10px; z-index: -1;
  background: var(--yuzey); box-shadow: 0 3px 0 color-mix(in srgb, var(--k) 40%, var(--cizgi));
}
.kk-kare { z-index: 0; isolation: isolate; }
.kk-kare--yerinde { color: var(--k); }
.kk-kare--yerinde::before { box-shadow: 0 3px 0 var(--k), inset 0 0 0 2px color-mix(in srgb, var(--k) 50%, transparent); }
.kk-kare:focus-visible { outline: 3px solid var(--odak); outline-offset: -3px; border-radius: 12px; }
.kk-tahta--bitti .kk-kare::before { background: color-mix(in srgb, var(--basari) 22%, var(--yuzey)); }