* {
  box-sizing: border-box;
}
.container {
  margin-top: 50px !important;
  margin-bottom: 40px !important;
  padding: 24px 20px !important;
  background: url('data:image/svg+xml;utf8,<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="40" height="40" fill="none"/><circle cx="20" cy="20" r="1.5" fill="%23b89b8c" fill-opacity="0.10"/><circle cx="0" cy="40" r="1.5" fill="%23b89b8c" fill-opacity="0.07"/><circle cx="40" cy="0" r="1.5" fill="%23b89b8c" fill-opacity="0.07"/></svg>')
      repeat,
    linear-gradient(135deg, #f3ede8 60%, #ede0d4 100%) !important;
  border-radius: 18px !important;
  max-width: 800px !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 15px !important;
  width: 90vw;
  max-width: 1200px;
  box-shadow: 0 6px 32px rgba(184, 155, 140, 0.1) !important;
  border: 1.5px solid #ede0d4;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(1.5px);
}

.result {
  margin-top: 20px;
  font-size: 16px;
  text-align: center;
}
.canvas-container {
  display: none; /* Başlangıçta gizli */
}
canvas {
  max-width: 100%;
  height: auto;
}
.result-section.best {
  background: #e8fbe8;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(56, 142, 60, 0.07);
  border: 1.5px solid #b6e2b6;
  margin-bottom: 18px;
  padding: 16px 12px;
  transition: background 0.2s;
}
.result-section {
  background: #fff4f4;
  border-radius: 12px;
  border: 1.5px solid #f3d1d1;
  margin-bottom: 18px;
  padding: 16px 12px;
  transition: background 0.2s;
}