/* Yankı */
.y-alan { position: relative; width: min(100%, 340px); aspect-ratio: 1; margin: 10px auto 6px; }
.y-cark {
  position: absolute; inset: 12%;
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
  transform: rotate(45deg);
}
.y-dugme {
  --renk: #30a46c;
  border: 0; padding: 0; cursor: pointer; touch-action: manipulation;
  background: color-mix(in srgb, var(--renk) 55%, #1d2036);
  box-shadow: inset 0 -6px 0 rgb(0 0 0 / 0.2);
  display: grid; place-items: center;
  transition: background 0.08s ease, transform 0.08s ease, box-shadow 0.08s ease;
}
.y-dugme:nth-child(1) { border-radius: 100% 12px 12px 12px; }
.y-dugme:nth-child(2) { --renk: #e5484d; border-radius: 12px 100% 12px 12px; }
.y-dugme:nth-child(3) { --renk: #3e7cf0; border-radius: 12px 12px 12px 100%; }
.y-dugme:nth-child(4) { --renk: #f5c400; border-radius: 12px 12px 100% 12px; }
.y-dugme svg { width: 34%; height: 34%; transform: rotate(-45deg); fill: rgb(255 255 255 / 0.55); }
.y-dugme--yanik {
  background: var(--renk); transform: scale(1.03);
  box-shadow: 0 0 28px 4px color-mix(in srgb, var(--renk) 70%, transparent), inset 0 -2px 0 rgb(0 0 0 / 0.15);
}
.y-dugme--yanik svg { fill: #fff; }
.y-dugme--dogrusu { animation: y-gosterge 0.5s ease 3; }
@keyframes y-gosterge { 50% { background: var(--renk); } }
.y-dugme[disabled] { cursor: default; }
.y-dugme:focus-visible { outline: 3px solid var(--odak); outline-offset: 3px; }

.y-basla {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 31%; aspect-ratio: 1; border-radius: 50%;
  border: 4px solid var(--yuzey); background: var(--k); color: #fff;
  font: inherit; font-weight: 800; font-size: 1.15rem; cursor: pointer;
  box-shadow: 0 4px 14px rgb(0 0 0 / 0.25);
}
.y-basla[hidden] { display: none; }
@media (prefers-color-scheme: dark) { .y-basla { color: #14162a; } }