@import url('base.css');
@import url('atolye-kabuk.css');
/* FORM-50 stage 1 (07.11.2026): the Lazer Atölyesi. A closed laser seen from above, drawn here without any maker's
   name, logo or housing shape: graphite body, amber lid, rail and head, a honeycomb bed with centimetre rulers and
   the MDF plate on it (the plate itself is drawn on the canvas, atolye.js). */
body.atolye {
  background: var(--paper);
}
.atolye-duzen {
  display: grid;
  grid-template-columns: 184px minmax(0, 1fr) 320px;
  grid-template-areas:
    'giris giris giris'
    'araclar sahne ozellikler';
  gap: 24px 28px;
  max-width: 1680px;
  margin: 0 auto;
  padding: 28px var(--gutter) 64px;
}
.atolye-giris {
  grid-area: giris;
  animation: belir 700ms var(--ease) both;
}
.atolye-ust-yazi {
  margin: 0 0 6px;
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.16em;
}
.atolye-giris h1 {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  line-height: 1.05;
}
.atolye-aciklama {
  max-width: 62ch;
  margin: 12px 0 0;
  color: var(--muted);
}

/* The left column: the tools two by two, the layers beneath (operator 07.11.2026), above the stage, so the thickness
   slider sliding out of the bar lies over the machine. Only the layers scroll, the slider must not be cut off. */
.atolye-sol {
  position: relative;
  z-index: 6;
  display: grid;
  align-content: start;
  gap: 18px;
  grid-area: araclar;
}
/* The how-to's key under the pieces (operator 08.11.2026: "als schoener button mit dem namen nasil calisir"), a card like
   the tools, its question mark in a dark round. */
.atolye-yardim {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 8px 14px 8px 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--light);
  color: var(--ink);
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 200ms var(--ease),
    border-color 200ms var(--ease);
}
.atolye-yardim:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.atolye-yardim svg {
  flex: none;
  width: 34px;
  height: 34px;
  padding: 7px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--light);
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.atolye-araclar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.atolye-araclar button {
  display: grid;
  justify-items: center;
  gap: 6px;
  min-height: 76px;
  padding: 12px 8px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--light);
  color: var(--ink);
  cursor: pointer;
  transition:
    transform 200ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    box-shadow 200ms var(--ease);
}
.atolye-araclar svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}
.atolye-araclar button span {
  font-size: 12px;
}
.atolye-araclar button:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}
.atolye-araclar button[aria-pressed='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--light);
  box-shadow: 0 12px 26px -16px rgba(34, 38, 65, 0.9);
}
/* Back and forth (operator 07.11.2026): two arrows under the tools, faint while there is no step to take, each in the
   middle of its key. Until 08.11.2026 they were pills with the arrow 12 pixels high, the tools' grid aligning it to the
   top; operator: "warum sind die vor und zuruck buttons so komische die pfeile sind nichtmal mittig". */
.atolye-gecmis {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}
.atolye-araclar .atolye-gecmis button {
  place-items: center;
  min-height: 48px;
  padding: 0;
  border-radius: 16px;
}
.atolye-gecmis svg {
  width: 22px;
  height: 22px;
  stroke-width: 2;
}
.atolye-araclar .atolye-gecmis button:disabled {
  border-color: var(--line);
  cursor: default;
  opacity: 0.35;
  transform: none;
}

/* The machine */
/* One shrinkable column: the canvas' own 1080 pixels must never widen the stage (phones). The stage keeps its own
   height (07.11.2026, operator's window): stretched to the taller settings column, the machine grew an empty bottom. */
.atolye-sahne {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-self: start;
  justify-items: center;
  gap: 14px;
  grid-area: sahne;
  min-width: 0;
}
/* The machine's cell: in the app layout what the workspace leaves after the switches and the status line under it,
   however they wrap (Codex 07.11.2026: two rows of switches in a narrow window pushed the status line out of it). The
   machine keeps its own height at the cell's top: stretched, it grew an empty bottom under the plate in a narrow, high
   window. */
.makine-alani {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  justify-items: center;
  width: 100%;
}
#plaka {
  max-width: 100%;
}
.makine {
  position: relative;
  width: min(100%, 880px);
  padding: 62px 30px 30px;
  border-radius: 32px;
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255, 255, 255, 0.07), transparent 60%),
    linear-gradient(160deg, #2b2e37 0%, #18191f 55%, #0f1015 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 -2px 0 rgba(0, 0, 0, 0.6),
    0 46px 90px -46px rgba(15, 16, 21, 0.85),
    0 20px 34px -26px rgba(15, 16, 21, 0.75);
  animation: belir 800ms 80ms var(--ease) both;
}
.makine-kapak {
  position: absolute;
  top: 14px;
  right: 22px;
  left: 22px;
  height: 26px;
  border-radius: 13px;
  background: linear-gradient(
    90deg,
    rgba(255, 150, 50, 0.16),
    rgba(255, 182, 96, 0.44) 50%,
    rgba(255, 150, 50, 0.16)
  );
  box-shadow:
    inset 0 0 0 1px rgba(255, 196, 128, 0.28),
    0 0 26px -6px rgba(255, 150, 50, 0.45);
  display: grid;
  place-items: center;
}
/* The machine's name on its glowing lid, lit from behind; the spacing after the last letter is given back on the left so
   the name stays in the middle. */
.makine-kapak span {
  --aralik: 0.32em;
  padding-left: var(--aralik);
  color: rgba(255, 236, 214, 0.92);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--aralik);
  text-shadow: 0 0 10px rgba(255, 160, 70, 0.6);
  white-space: nowrap;
}
.makine-ray {
  position: absolute;
  z-index: 3;
  top: 50px;
  right: 30px;
  left: 30px;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(#3b3e49, #212329);
  pointer-events: none;
}
/* The laser head stands over the pointer along its rail (atolye.js, headOver): `--kafa` is the share of the rail it is at,
   its middle kept half its width from either end, so it stays on the rail when the window changes size (Codex 08.11.2026:
   kept in pixels, it stood beside a narrower rail). Until 08.11.2026 it swung from side to side on its own (operator: "soll
   der kopf dann nicht den mauszeiger verfolgen links rechts"). */
.makine-kafa {
  --yari: 18px;
  position: absolute;
  top: -8px;
  left: clamp(var(--yari), calc(var(--kafa, 0.5) * 100%), calc(100% - var(--yari)));
  width: calc(2 * var(--yari));
  height: 22px;
  border-radius: 7px;
  background: linear-gradient(#4b4f5c, #2b2e36);
  box-shadow: 0 8px 14px -8px #000;
  translate: -50% 0;
  transition: left 220ms var(--ease);
}
.makine-kafa::after {
  position: absolute;
  bottom: -3px;
  left: 50%;
  width: 6px;
  height: 6px;
  margin-left: -3px;
  border-radius: 50%;
  background: #ff8a3d;
  box-shadow: 0 0 12px 4px rgba(255, 138, 61, 0.6);
  content: '';
}
.makine-yatak {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 14px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='41.57'%3E%3Cpath d='M0 6.93 12 0l12 6.93v13.86L12 27.71 0 20.79zM12 27.71v13.86' fill='none' stroke='%238d97ad' stroke-opacity='.22' stroke-width='1.2'/%3E%3C/svg%3E"),
    radial-gradient(90% 90% at 50% 40%, #191b22, #0b0c10);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    inset 0 18px 40px -20px rgba(0, 0, 0, 0.9);
}
.makine-yatak .canvas-container {
  position: relative;
  z-index: 1;
}
/* The chosen drawing's width and height in mm, small labels outside its white box (atolye.js, showSelection). */
.olcu {
  position: absolute;
  z-index: 2;
  padding: 3px 9px;
  border-radius: 999px;
  background: #527fa8;
  color: #fff;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
  white-space: nowrap;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.6);
  pointer-events: none;
  transform: translate(-50%, -50%);
}
/* The plate starts 40 of 1080 scene pixels in (atolye.js), the rulers sit in that rim. */
.cetvel {
  position: absolute;
  z-index: 0;
  display: flex;
  justify-content: space-between;
  color: rgba(236, 228, 214, 0.6);
  font-size: 10px;
  pointer-events: none;
}
.cetvel-ust {
  top: 0;
  right: 3.7037%;
  left: 3.7037%;
  height: 3.7037%;
  align-items: flex-start;
  background:
    repeating-linear-gradient(90deg, rgba(236, 228, 214, 0.5) 0 1px, transparent 1px calc(100% / 6))
      bottom / 100% 9px no-repeat,
    repeating-linear-gradient(
        90deg,
        rgba(236, 228, 214, 0.25) 0 1px,
        transparent 1px calc(100% / 30)
      )
      bottom / 100% 5px no-repeat;
}
.cetvel-sol {
  top: 3.7037%;
  bottom: 3.7037%;
  left: 0;
  width: 3.7037%;
  flex-direction: column;
  align-items: flex-start;
  background:
    repeating-linear-gradient(
        180deg,
        rgba(236, 228, 214, 0.5) 0 1px,
        transparent 1px calc(100% / 6)
      )
      right / 9px 100% no-repeat,
    repeating-linear-gradient(
        180deg,
        rgba(236, 228, 214, 0.25) 0 1px,
        transparent 1px calc(100% / 30)
      )
      right / 5px 100% no-repeat;
}
.cetvel span {
  padding: 1px 3px;
  line-height: 1;
}
/* Grid and snapping (operator 07.11.2026): switches right under the machine; the picture's swap of light and dark is
   one of the same kind. */
.plaka-ayarlari {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
}
.plaka-ayarlari button,
.gorsel-ayarlari [role='switch'] {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 8px 16px 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 180ms var(--ease);
}
.plaka-ayarlari button:hover,
.gorsel-ayarlari [role='switch']:hover {
  border-color: var(--accent);
}
.gorsel-ayarlari [role='switch'] {
  justify-self: start;
}
.atolye-durum {
  min-height: 1.4em;
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.atolye-durum.hata {
  color: #b3261e;
}

/* Settings */
/* One shrinkable column (07.11.2026): an automatic one grew to the longest card text and pushed past the 320 pixels. */
.atolye-ozellikler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 14px;
  grid-area: ozellikler;
}
.ozellik {
  padding: 16px 18px 18px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--light);
  animation: belir 700ms var(--ease) both;
}
.ozellik:nth-child(2) {
  animation-delay: 60ms;
}
.ozellik:nth-child(3) {
  animation-delay: 120ms;
}
.ozellik:nth-child(4) {
  animation-delay: 180ms;
}
.ozellik:nth-child(5) {
  animation-delay: 240ms;
}
.ozellik h2 {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* The material (operator 08.11.2026: "ein schoenes dropdown … mit auswahl und bild"): a button with the chosen face and a
   list of its own that opens over the cards below, each face with a small piece of it, a heart burnt in (atolye.js,
   materialPicture). Its card lies above the later ones, which keep the stacking of their fade-in. */
.ozellik--malzeme {
  z-index: 2;
}
.malzeme-secici {
  position: relative;
}
.malzeme-dugmesi,
.malzeme-listesi [role='option'] {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 18px;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 10px 12px;
  border-radius: 16px;
  color: var(--ink);
  text-align: left;
  white-space: normal;
  cursor: pointer;
}
.malzeme-dugmesi {
  border: 1.5px solid var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(82, 127, 168, 0.14);
}
.malzeme-resmi {
  width: 44px;
  height: 44px;
}
.malzeme-adi {
  display: grid;
  gap: 2px;
  min-width: 0;
}
.malzeme-adi strong {
  font-weight: 600;
}
.malzeme-adi span {
  color: var(--muted);
  font-size: 13px;
}
.malzeme-oku,
.malzeme-isareti {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}
.malzeme-oku {
  transition: transform 220ms var(--ease);
}
.malzeme-dugmesi[aria-expanded='true'] .malzeme-oku {
  transform: rotate(180deg);
}
.malzeme-listesi {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  left: 0;
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(18, 24, 38, 0.16);
  list-style: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px) scale(0.98);
  transform-origin: top center;
  transition:
    opacity 160ms var(--ease),
    transform 220ms var(--ease),
    visibility 0s linear 220ms;
}
.malzeme-dugmesi[aria-expanded='true'] + .malzeme-listesi {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 160ms var(--ease),
    transform 220ms var(--ease),
    visibility 0s;
}
.malzeme-listesi [role='option'] {
  transition: background 160ms var(--ease);
}
.malzeme-listesi [role='option']:hover,
.malzeme-listesi [role='option']:focus-visible {
  outline: none;
  background: rgba(82, 127, 168, 0.1);
}
.malzeme-isareti {
  color: var(--accent);
  opacity: 0;
}
[aria-selected='true'] > .malzeme-isareti {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .malzeme-oku,
  .malzeme-listesi,
  .malzeme-dugmesi[aria-expanded='true'] + .malzeme-listesi {
    transition: none;
  }
}
/* What the laser does (operator 07.11.2026): three cards, each with a small piece of board showing the line. */
.islemler {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
}
/* A card holds a sentence: it wraps, unlike the site's other buttons (base.css). */
.islemler button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  white-space: normal;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.islemler button:hover {
  border-color: var(--accent);
}
.islemler button[aria-checked='true'] {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(82, 127, 168, 0.14);
}
.islemler strong {
  display: block;
  font-weight: 600;
}
.islemler button span:last-child {
  color: var(--muted);
  font-size: 13px;
}
.islem-ornegi {
  position: relative;
  flex: none;
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 10px;
  background: var(--plaka);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}
.islem-ornegi::after {
  position: absolute;
  top: 50%;
  right: 7px;
  left: 7px;
  content: '';
  transform: rotate(-32deg);
}
/* The operations' colours on the plate (atolye.js, COLORS): Gravür the burn on the chosen face, Çizim a blue, Kesim a red
   line. */
.islem-ornegi--gravur::after {
  height: 8px;
  margin-top: -4px;
  border-radius: 4px;
  background: var(--gravur);
}
.islem-ornegi--cizim::after {
  height: 2px;
  background: #1f63d6;
}
.islem-ornegi--kesim::after {
  height: 2px;
  background: #d6342c;
}
/* Pictures (operator 07.11.2026): two upload buttons; for a chosen picture, the logo and photo cards with a preview of
   how each burns, the contrast and the switch that swaps light and dark. */
.gorsel-ekle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gorsel-ayarlari {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 4px;
}
.gorsel-modlari {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gorsel-modlari button,
.gorsel-sekilleri button {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: transparent;
  color: var(--ink);
  white-space: normal;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    box-shadow 180ms var(--ease);
}
.gorsel-modlari button:hover,
.gorsel-sekilleri button:hover {
  border-color: var(--accent);
}
.gorsel-modlari button[aria-checked='true'],
.gorsel-sekilleri button[aria-checked='true'] {
  border-color: var(--accent);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(82, 127, 168, 0.14);
}
.gorsel-modlari button:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.gorsel-modlari canvas {
  width: 100%;
  max-width: 96px;
  aspect-ratio: 1;
  border-radius: 10px;
}
.gorsel-modlari span {
  color: var(--muted);
  font-size: 12px;
  text-align: center;
}
.gorsel-modlari strong {
  display: block;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
}
.atolye-sol-alt {
  display: grid;
  align-content: start;
  gap: 22px;
}
.atolye-katmanlar h2,
.atolye-parcalar h2 {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
/* One shrinkable column, the names wrapping: the longest no longer widened the list past its column. */
.katman-listesi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.katman-listesi button {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: 12px;
  background: transparent;
  color: var(--ink);
  font-size: 13px;
  text-align: left;
  white-space: normal;
  cursor: pointer;
  transition:
    background 180ms var(--ease),
    border-color 180ms var(--ease);
}
.katman-listesi button:hover {
  background: var(--light);
}
.katman-listesi button[aria-pressed='true'] {
  border-color: var(--accent);
  background: #fff;
}
.katman-listesi .alt button {
  padding-left: 26px;
  color: var(--muted);
  font-size: 12px;
}
/* FORM-50 stage 1n (08.11.2026): each piece a cut frees as it leaves the laser, a row like a layer's, its picture
   beside its name and size, so a whole row fits the 97 pixels the list keeps in a window 560 pixels high. */
.parca-listesi {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 6px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}
.parca-listesi button {
  display: grid;
  grid-template-columns: 64px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-content: center;
  column-gap: 10px;
  width: 100%;
  padding: 6px 10px 6px 6px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--light);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
  transition:
    border-color 180ms var(--ease),
    transform 180ms var(--ease);
}
.parca-listesi button:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.parca-resmi {
  display: grid;
  place-items: center;
  grid-row: span 2;
  width: 64px;
  height: 64px;
}
.parca-resmi + span {
  align-self: end;
}
.parca-resmi canvas,
.parca-buyuk canvas {
  max-width: 100%;
  max-height: 100%;
}
.parca-olcusu {
  align-self: start;
  color: var(--muted);
  font-size: 12px;
}
.nasil {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(15, 16, 21, 0.7);
}
.nasil::backdrop {
  background: rgba(9, 11, 13, 0.7);
}
/* The title and Kapat stay at the top while the window scrolls (operator 08.11.2026: "einen kapat button haben um es zu
   schliesen"; the button had scrolled away with the text). Sticky holds to the window's content edge, so the bar reaches
   up over the 24 pixels of its padding. */
.nasil-ust {
  display: flex;
  position: sticky;
  z-index: 1;
  top: -24px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: -24px -24px 0;
  padding: 24px 24px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.nasil h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}
.nasil h3 {
  margin: 24px 0 12px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.nasil-ust button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  cursor: pointer;
}
.nasil-giris {
  margin: 12px 0 0;
  color: var(--muted);
  line-height: 1.55;
}
.nasil-islemler {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nasil-ornekler {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nasil-islemler li {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--light);
}
.nasil-islemler canvas {
  width: 100%;
  height: auto;
  border-radius: 12px;
  background: #1b1d24;
}
.nasil-islemler p,
.nasil-adimlar li {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}
.nasil-islemler strong,
.nasil-adimlar strong {
  color: var(--ink);
  font-weight: 600;
}
.nasil-not {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 12px;
}
.nasil-adimlar {
  display: grid;
  gap: 10px;
  margin: 0;
  padding-left: 22px;
}
.parca-onizleme {
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0 40px 80px -40px rgba(15, 16, 21, 0.7);
}
.parca-onizleme::backdrop {
  background: rgba(9, 11, 13, 0.7);
}
.parca-onizleme-ust {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 16px;
}
.parca-onizleme h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}
.parca-onizleme-ust p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}
.parca-onizleme button {
  min-height: 44px;
  padding: 10px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  cursor: pointer;
}
.parca-buyuk {
  display: grid;
  place-items: center;
  height: min(480px, calc(100dvh - 200px));
  margin: 16px 0 12px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 40%, #fbfaf7, #e4e1da);
}
.parca-onizleme .ipucu {
  margin: 0;
}
.katman-isareti {
  flex: none;
  width: 10px;
  height: 10px;
  border-radius: 3px;
}
.kenar-alani {
  display: grid;
  gap: 8px;
  padding: 8px;
  margin: 0 -8px;
  border-radius: 14px;
  color: var(--muted);
  font-size: 13px;
  transition: box-shadow 180ms var(--ease);
}
.kenar-alani.secili {
  box-shadow: 0 0 0 2px var(--accent);
}
.arka-plan-alani {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.arka-plan-alani .vazgec {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-size: 12px;
  cursor: pointer;
}
.sekil-alani {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.gorsel-sekilleri {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
}
.gorsel-sekilleri button {
  gap: 4px;
  padding: 6px 4px;
  border-radius: 12px;
}
.gorsel-sekilleri canvas {
  width: 100%;
  max-width: 64px;
  aspect-ratio: 1;
  border-radius: 8px;
}
.gorsel-sekilleri span {
  color: var(--ink);
  font-size: 11px;
  text-align: center;
}
.kontrast-alani {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
}
.kontrast-alani input {
  width: 100%;
  accent-color: var(--ink);
}
.cipler {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cipler button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition:
    background 180ms var(--ease),
    color 180ms var(--ease),
    border-color 180ms var(--ease);
}
.cipler button:hover {
  border-color: var(--accent);
}
.cipler button[aria-checked='true'] {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--light);
}
.yazi-alani {
  display: grid;
  gap: 6px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}
.yazi-alani input {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
}
.yazi-alani input:focus {
  border-color: var(--accent);
  outline: 3px solid rgba(82, 127, 168, 0.2);
}
.yazi-tipleri {
  margin-bottom: 14px;
}
.yazi-tipleri button {
  font-size: 15px;
}
.atolye-dugme {
  width: 100%;
  min-height: 46px;
  border: 0;
  border-radius: 14px;
  background: var(--ink);
  color: var(--light);
  cursor: pointer;
  transition: transform 180ms var(--ease);
}
.atolye-dugme:hover {
  transform: translateY(-1px);
}
.atolye-dugme.ikincil {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
}
.atolye-dugme:disabled {
  cursor: not-allowed;
  opacity: 0.45;
  transform: none;
}
.sayac {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 14px;
}
.ipucu {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
/* Whether the chosen drawing is closed (operator 07.11.2026): green when it is, red with the two ways to close it when
   it is not. */
.sekil-durumu {
  margin: 0 0 12px;
  padding: 12px 14px;
  border: 1px solid rgba(47, 133, 90, 0.35);
  border-radius: 14px;
  background: rgba(47, 133, 90, 0.08);
  color: #23613f;
  font-size: 14px;
  animation: belir 320ms var(--ease) both;
}
.sekil-durumu.acik {
  border-color: rgba(214, 69, 65, 0.35);
  background: rgba(214, 69, 65, 0.07);
  color: #9b2c2a;
}
.sekil-durumu p {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.sekil-durumu p::before {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  content: '';
}
.sekil-secenekleri {
  display: grid;
  gap: 8px;
  margin-top: 12px;
}

@keyframes belir {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}
@media (prefers-reduced-motion: reduce) {
  .atolye-giris,
  .makine,
  .ozellik,
  .sekil-durumu {
    animation: none;
  }
  .makine-kafa {
    transition: none;
  }
}

/* Operator 07.11.2026: "warum scroolt die linke und rechte seite der seite unterschiedlich", then "Wie bei Canva", and on
   a first try that still let the page move: "du hast ja alles zusammen scroolen gemacht anstatt canva es scroolt alles".
   As in Canva the page itself stands still on a computer: the header and the workspace fill the window, the plate whole
   in sight in a cell of what the switches and the status line under it leave (container units), only the layers on the
   left and the settings on the right scroll within themselves when longer. The heading stays for screen readers, the
   footer is not shown. Below 560 px of height the tools leave the layers no room (Codex 08.11.2026), and on a phone, the
   page scrolls as one instead. */
@media (min-width: 981px) and (min-height: 560px) {
  body.atolye {
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .atolye-ust {
    flex: none;
  }
  .atolye-duzen {
    flex: 1;
    box-sizing: border-box;
    width: 100%;
    min-height: 0;
    grid-template-rows: minmax(0, 1fr);
    grid-template-areas: 'araclar sahne ozellikler';
    padding: 20px var(--gutter);
  }
  .atolye-giris {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  body.atolye > .form-footer {
    display: none;
  }
  .atolye-sol {
    grid-template-rows: auto minmax(0, 1fr);
    min-height: 0;
  }
  .atolye-sol-alt,
  .atolye-ozellikler {
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: var(--line) transparent;
    scrollbar-width: thin;
  }
  .atolye-ozellikler {
    padding-right: 4px;
  }
  .atolye-sahne {
    align-self: stretch;
    grid-template-rows: minmax(0, 1fr) auto auto;
    min-height: 0;
  }
  .makine-alani {
    container-type: size;
    min-height: 0;
  }
  /* As wide as its cell, and as high: the frame adds 32 px to the height (62 above, 30 below, 60 across). */
  .makine {
    width: min(100cqw, 880px, 100cqh - 32px);
  }
}
/* Phone and narrow tablet: the plate first, the tools as a bar along the bottom. */
@media (max-width: 980px) {
  .atolye-duzen {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: 'giris' 'sahne' 'araclar' 'ozellikler';
    padding-bottom: 120px;
  }
  /* The tools become the bar at the bottom, the layers and pieces stay below the plate, scrolling when many. */
  .atolye-sol {
    position: static;
  }
  /* On a phone the how-to's key floats left above the tool bar, as back and forth do at its right; 96 px clear the bar. */
  .atolye-yardim {
    position: fixed;
    z-index: 20;
    bottom: 96px;
    left: 12px;
    width: auto;
    min-height: 56px;
    padding: 6px 16px 6px 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(248, 247, 243, 0.92);
    box-shadow: 0 18px 40px -20px rgba(34, 38, 65, 0.6);
    backdrop-filter: blur(10px);
  }
  .atolye-yardim:hover {
    transform: none;
  }
  .atolye-sol-alt {
    max-height: 50vh;
    overflow-y: auto;
  }
  .parca-listesi {
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  }
  .nasil-islemler {
    grid-template-columns: minmax(0, 1fr);
  }
  /* Opened, the material list comes into view above the tool bar at the bottom and the back and forth floating over it
     (atolye.js, openMaterials; Codex 08.11.2026: 120 pixels left the lower option under them). */
  .malzeme-listesi {
    scroll-margin-bottom: 180px;
  }
  .atolye-araclar {
    display: flex;
    position: fixed;
    z-index: 20;
    top: auto;
    right: 12px;
    bottom: 12px;
    left: 12px;
    flex-direction: row;
    justify-content: space-between;
    padding: 8px;
    border-radius: 22px;
    background: rgba(248, 247, 243, 0.92);
    box-shadow: 0 18px 40px -20px rgba(34, 38, 65, 0.6);
    backdrop-filter: blur(10px);
  }
  .atolye-araclar button {
    flex: 1;
    min-height: 60px;
    padding: 8px 4px;
  }
  /* Back and forth float above the bar's right end; the pen's slider, rising above the pen, lies over them. */
  .atolye-gecmis {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    grid-template-columns: 48px 48px;
    gap: 6px;
    padding: 6px;
    border: 0;
    border-radius: 999px;
    background: rgba(248, 247, 243, 0.92);
    box-shadow: 0 18px 40px -20px rgba(34, 38, 65, 0.6);
    backdrop-filter: blur(10px);
  }
  .atolye-araclar .atolye-gecmis button {
    min-height: 44px;
    border-radius: 999px;
  }
  .makine {
    padding: 44px 12px 12px;
    border-radius: 24px;
  }
  .makine-kapak {
    top: 10px;
    right: 14px;
    left: 14px;
    height: 20px;
  }
  .makine-kapak span {
    --aralik: 0.24em;
    font-size: 9px;
  }
  .makine-ray {
    top: 34px;
    right: 12px;
    left: 12px;
  }
  /* A smaller head keeps the ruler's numbers free. */
  .makine-kafa {
    --yari: 13px;
    top: -5px;
    height: 14px;
  }
  .cetvel {
    font-size: 8px;
  }
}
/* The pen's thickness (operator 07.11.2026): a slider of four steps beside the pen. It fades in once the pointer has
   rested 0.2 s on the pen and fades out as soon as it is on neither; a bridge over the gap keeps it while the pointer
   crosses. Keyboard focus shows it too, and on touch screens a tap on the pen. The wedge shows thin to thick, the
   thumb moves from step to step. */
.arac-kalem {
  position: relative;
  display: grid;
}
.kalinlik-paneli {
  position: absolute;
  z-index: 5;
  top: 0;
  left: calc(100% + 12px);
  display: grid;
  gap: 10px;
  width: 224px;
  padding: 14px 16px 12px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: var(--light);
  box-shadow: 0 20px 44px -24px rgba(34, 38, 65, 0.6);
  opacity: 0;
  visibility: hidden;
  /* Codex 07.11.2026: while fading out it stayed visible for 0.22 s and took clicks meant for the plate below. Hidden,
     it takes none at once; only the shown state does. */
  pointer-events: none;
  transform: translateX(-8px);
  transition:
    opacity 180ms var(--ease),
    transform 220ms var(--ease),
    visibility 0s linear 220ms;
}
.kalinlik-paneli::before {
  position: absolute;
  top: 0;
  bottom: 0;
  left: -14px;
  width: 14px;
  content: '';
}
.arac-kalem:hover .kalinlik-paneli,
.arac-kalem:has(:focus-visible) .kalinlik-paneli {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition:
    opacity 220ms var(--ease) 200ms,
    transform 260ms var(--ease) 200ms,
    visibility 0s linear 200ms;
}
@media (hover: none) {
  .arac-kalem:focus-within .kalinlik-paneli {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
  }
}
.kalinlik-adi {
  color: var(--ink);
  font-size: 14px;
}
.kaydirici {
  --adim: 0.3333;
  position: relative;
  height: 30px;
  cursor: pointer;
  touch-action: none;
}
/* Scored and cut lines have no thickness: the slider rests. */
.kaydirici[aria-disabled='true'] {
  opacity: 0.35;
  pointer-events: none;
}
.kaydirici:focus-visible {
  border-radius: 8px;
  outline: 3px solid rgba(82, 127, 168, 0.35);
  outline-offset: 4px;
}
.kaydirici-iz {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: 14px;
  margin-top: -7px;
  background: var(--ink);
  clip-path: polygon(0 43%, 100% 0, 100% 100%, 0 57%);
  opacity: 0.2;
}
.kaydirici-tutamak {
  position: absolute;
  top: 50%;
  left: calc(var(--adim) * (100% - 24px));
  width: 24px;
  height: 24px;
  margin-top: -12px;
  border-radius: 50%;
  background: var(--ink);
  box-shadow:
    0 0 0 4px var(--light),
    0 6px 14px rgba(34, 38, 65, 0.35);
  transition: left 240ms var(--ease);
}
.kaydirici-uclar {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-size: 12px;
}
@media (prefers-reduced-motion: reduce) {
  .kalinlik-paneli,
  .kaydirici-tutamak {
    transition: none;
  }
}
/* On a phone the pen sits in the bottom bar: the slider rises above it. */
@media (max-width: 980px) {
  .arac-kalem {
    flex: 1;
  }
  .kalinlik-paneli {
    top: auto;
    bottom: calc(100% + 18px);
    left: 0;
    transform: translateY(8px);
  }
  .kalinlik-paneli::before {
    top: auto;
    bottom: -20px;
    left: 0;
    width: 100%;
    height: 20px;
  }
}