.mekanizma {
  --demo-paper: #f7f4ed;
  --demo-ink: #1d292b;
  --demo-stage: #142328;
  color: var(--demo-ink);
  background: var(--demo-paper);
  border: 1px solid #d6cec1;
  padding: clamp(1rem, 3vw, 2rem);
  margin-block: 1rem 2rem;
}
.mekanizma h3 { margin: 0 0 .5rem; color: var(--demo-ink); }
.mekanizma__gorunum {
  background: var(--demo-stage);
  color: #fff7e8;
  margin-top: 1rem;
}
.mekanizma canvas {
  display: block;
  width: 100%;
  height: auto;
  touch-action: pan-y;
  cursor: grab;
}
.mekanizma canvas:active { cursor: grabbing; }
.mekanizma__renkler {
  display: flex;
  flex-wrap: wrap;
  gap: .45rem 1rem;
  padding: 0 1rem .8rem;
  margin: 0;
  font-size: .875rem;
  list-style: none;
}
.mekanizma__renkler li::before {
  content: '';
  display: inline-block;
  width: .65em;
  height: .65em;
  border-radius: 50%;
  background: #e5cb8e;
  margin-inline-end: .35em;
}
.mekanizma__renkler li:nth-child(2)::before { background: #f58b41; }
.mekanizma__renkler li:nth-child(3)::before { background: #64c4e7; }
.mekanizma__denetimler, .mekanizma__ornekler {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .5rem;
  margin-block: .75rem;
}
.mekanizma__secim {
  border: 1px solid #80786b;
  background: transparent;
  color: inherit;
  border-radius: .3rem;
  min-height: 44px;
  padding: .35rem .7rem;
  cursor: pointer;
}
.mekanizma__secim[aria-pressed=true] {
  border-color: #623617;
  background: #f8d6ba;
  color: #342015;
}
.mekanizma :focus-visible { outline: 3px solid #00618a; outline-offset: 2px; }
.mekanizma__anahtar { display: inline-flex; align-items: center; gap: .35rem; min-height: 44px; }
.mekanizma__anahtar input, .mekanizma__zaman { accent-color: #a44914; }
.mekanizma__zaman { width: 100%; }
.mekanizma__adimlar { padding-inline-start: 1.25rem; }
.mekanizma__adimlar button { display: none; }
.mekanizma--etkin .mekanizma__adimlar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  padding: 0;
  list-style: none;
}
.mekanizma--etkin .mekanizma__adimlar button { display: inline-block; }
.mekanizma--etkin .mekanizma__adimlar strong,
.mekanizma--etkin .mekanizma__adimlar p { display: none; }
.mekanizma__adim-not { min-height: 3em; }
.mekanizma__not, .mekanizma__ornek-not { font-size: .9rem; }
@media (max-width: 36rem) {
  .mekanizma__ornekler strong { flex-basis: 100%; }
}

.mekanizma[data-ornek=cay] .mekanizma__renkler li:first-child::before { background: #a2c078; }
.mekanizma[data-ornek=parca] .mekanizma__renkler li:first-child::before { background: #beba97; }

@media (min-width: 58rem) {
  .mekanizma__etkilesim:not([hidden]) {
    display: grid;
    grid-template-columns: minmax(0, 1.8fr) minmax(16rem, 1fr);
    align-items: start;
    column-gap: 1.5rem;
    margin-block: 1.1rem;
  }
  .mekanizma__gorunum { margin: 0; }
  .mekanizma__denetimler { margin-top: 0; }
}
.mekanizma { scroll-margin-top: 9rem; }
.mekanizma[data-ornek=misir] .mekanizma__renkler li:first-child::before { background: #f2bc4f; }
.mekanizma[data-ornek=pirinc] .mekanizma__renkler li:first-child::before { background: #ede2bb; }

.mekanizma[data-mekanizma=pm450] .mekanizma__renkler li:nth-child(2)::before { background: #64c4e7; }
.mekanizma[data-mekanizma=pm450] .mekanizma__renkler li:nth-child(3)::before { background: #f58b41; }
.mekanizma .mekanizma__teklif { border-color: #a44a18; color: #703311; }
.mekanizma .mekanizma__teklif:hover { background: #f8d6ba; color: #342015; }