/* wizard.css */

/* Ana konteyner */
#my-custom-quiz-wizard {
    max-width: 600px;
    margin: 20px auto;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    padding: 20px;
    position: relative;
  }
  
  /* İlerleme çubuğu (progress bar) */
  .quiz-progress-container {
    width: 100%;
    background: #eee;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 20px;
  }
  .quiz-progress-bar {
    height: 8px;
    background: #0073aa;
    width: 0%; /* JS ile genişletilecek */
    transition: width 0.3s ease;
  }
  
  /* Soru kartı */
  .quiz-step {
    display: none; /* sadece aktif step görünecek */
    animation: fadeIn 0.3s ease forwards;
  }
  .quiz-step.active {
    display: block;
  }
  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0);   }
  }
  
  /* Soru başlığı */
  .quiz-question-title {
    font-size: 18px;
    margin-bottom: 10px;
  }
  
  /* Radyo butonları */
  .quiz-options label {
    display: inline-block;
    margin-right: 15px;
    cursor: pointer;
  }
  
  /* Geçiş butonları */
  .quiz-navigation {
    margin-top: 20px;
    text-align: right;
  }
  .quiz-navigation button {
    background: #0073aa;
    color: #fff;
    border: none;
    padding: 10px 16px;
    margin-left: 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
  }
  .quiz-navigation button:hover {
    background: #005177;
  }
  .quiz-navigation button:disabled {
    background: #ccc;
    cursor: not-allowed;
  }
  
  /* Sonuç ekranı */
  .quiz-result {
    text-align: center;
    padding: 20px;
    border: 1px solid #ddd;
    background: #f9f9f9;
    border-radius: 6px;
  }
  
  /* Soru adımları vs. responsive */
  @media (max-width: 480px){
    .quiz-options label {
      display: block;
      margin-bottom: 8px;
    }
  }
  
  .quiz-question.error {
    border: 2px solid red;
    background: #ffecec;
    border-radius: 4px;
    padding: 5px;
}

/* inline style="margin-left:10px;" varsa sıfırla (override) */
#my-custom-quiz-wizard .quiz-step label[style*="margin-left:10px"] {
    margin-left: 0 !important;
}

/* Sonra ardışık label'lara eşit boşluk ver */
#my-custom-quiz-wizard .quiz-step label + label {
    margin-left: 0px; /* istediğiniz mesafe */
}