/* Totem olusturucu: dosya secici ve damali onizleme. */
.arac-panel input[type=file] {
  width: 100%; min-width: 0; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 9px;
  background: var(--bg); color: var(--text); font: inherit; font-size: 14px; cursor: pointer;
}
.arac-panel input[type=file]:hover, .arac-panel input[type=file]:focus { border-color: var(--accent); outline: none; }
.arac-panel input[type=file]::file-selector-button {
  margin-right: 12px; padding: 7px 12px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--surface2); color: var(--text); font: inherit; font-size: 13px; cursor: pointer;
}
.totem-onizleme {
  display: flex; align-items: center; justify-content: center; gap: 22px; flex-wrap: wrap;
  padding: 22px 14px; border: 1px solid var(--line); border-radius: 12px;
  background-color: var(--surface2);
  background-image: linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%),
    linear-gradient(45deg, var(--line) 25%, transparent 25%, transparent 75%, var(--line) 75%);
  background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.totem-onizleme canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
#totem-buyuk { width: 256px; height: 256px; max-width: 100%; aspect-ratio: 1; }
.totem-kucuk { display: grid; justify-items: center; gap: 8px; }
.totem-kucuk small { font-size: 12px; color: var(--text); background: var(--bg); padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); }
@media (max-width: 480px) {
  #totem-buyuk { width: 200px; height: 200px; }
}