/* Tırtıl */
.t-alan { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 auto 14px; }
#t-tuval {
  width: 100%; height: 100%; display: block; border-radius: 14px; touch-action: none;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--k) 40%, var(--cizgi));
}
.t-katman {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 20px; text-align: center; border-radius: 14px;
  background: rgb(20 22 42 / 0.55); color: #fff; font-weight: 700; font-size: 1.15rem;
}
.t-katman[hidden] { display: none; }
.t-katman p { margin: 0; max-width: 28ch; }

.t-yonler {
  display: grid; grid-template-columns: repeat(3, 64px); grid-template-rows: repeat(3, 56px);
  gap: 6px; justify-content: center;
  grid-template-areas: ". yukari ." "sol orta sag" ". asagi .";
}
.t-yonler button {
  font: inherit; font-size: 1.3rem; border-radius: 12px; border: 1px solid var(--cizgi);
  background: var(--yuzey-2); color: var(--metin); cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.t-yonler button:active { filter: brightness(0.92); }
.t-yonler [data-yon="yukari"] { grid-area: yukari; }
.t-yonler [data-yon="asagi"] { grid-area: asagi; }
.t-yonler [data-yon="sol"] { grid-area: sol; }
.t-yonler [data-yon="sag"] { grid-area: sag; }
.t-yonler .t-duraklat { grid-area: orta; font-size: 0.95rem; }