/* Çiftler */
.c-tahta {
  --sutun: 4;
  display: grid; grid-template-columns: repeat(var(--sutun), 1fr); gap: 8px;
  width: min(100%, 460px); margin: 0 auto;
}
.c-kart {
  aspect-ratio: 3 / 4; padding: 0; border: 0; background: transparent; cursor: pointer;
  perspective: 600px; touch-action: manipulation; border-radius: 12px;
}
.c-ic {
  position: relative; display: block; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform 0.35s ease;
}
.c-kart--acik .c-ic { transform: rotateY(180deg); }
.c-arka, .c-on {
  position: absolute; inset: 0; border-radius: 12px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  display: grid; place-items: center;
}
.c-arka {
  background:
    radial-gradient(circle at 50% 50%, rgb(255 255 255 / 0.35) 0 14%, transparent 15%),
    repeating-linear-gradient(45deg, rgb(255 255 255 / 0.12) 0 6px, transparent 6px 12px),
    var(--k);
  box-shadow: inset 0 0 0 3px rgb(255 255 255 / 0.25), 0 3px 0 color-mix(in srgb, var(--k) 60%, #000);
}
.c-on {
  transform: rotateY(180deg); background: var(--yuzey); border: 2px solid var(--cizgi);
}
.c-on svg { width: 72%; height: 72%; }
.c-kart--eslesti .c-on { border-color: var(--basari); background: color-mix(in srgb, var(--basari) 10%, var(--yuzey)); animation: c-eslesti 0.4s ease 0.3s; }
@keyframes c-eslesti { 50% { transform: rotateY(180deg) scale(1.07); } }
.c-kart:focus-visible { outline: 3px solid var(--odak); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  .c-ic { transition: none; }
}