/* Reset ve Temel Stil */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Roboto", sans-serif;
  color: #333;
  line-height: 1.6;
  overflow-x: hidden;
  background: #edf2fac0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  background: linear-gradient(
    150deg,
    rgba(41, 36, 102, 1) 0%,
    rgba(41, 36, 102, 1) 15%,
    rgba(36, 30, 90, 1) 15%,
    rgba(28, 25, 74, 1) 45%,
    rgba(32, 28, 79, 1) 45%,
    rgba(37, 30, 80, 1) 80%,
    rgba(29, 23, 69, 1) 81%
  );
}

/* Sayfa İç Genişlik */
.container {
  max-width: 900px;
  margin: 0 auto;
  padding: 1rem;
  color: #12193f;
}

/* Üst header alanı */
.survey-header {
  padding: 2rem 1.5rem;
  color: #f1f7ff;
  position: relative;

  text-align: center;
}
.survey-header h1 {
  font-size: 2rem;
  font-weight: 700;
  color: #12193f;
  margin-bottom: 1rem;
}
/* Logo - ilk adımda gösterilecek */
.survey-header .logo {
  margin: 0 auto 0 auto; /* Ortalamak ve biraz boşluk bırakmak */
  display: block;
  height: 220px;
  margin-bottom: 20px;
}

#survey-title {
  padding: 10px;
  font-size: 28px;
}

/* İlk adım için sade 'Sonraki' buton stili, arka plan yok */
.modern-next {
  background: none;
  border: none;
  color: #24317a;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  transition: color 0.3s ease;
}

.modern-next:hover {
  color: #1a2350;
}

.arrow-icon {
  margin-left: 8px;
  font-size: 20px;
  vertical-align: middle;
}

.scrollable-menu {
  height: auto;
  max-height: 200px;
  overflow-x: hidden;
}
/* Adım (Step) Alanı */
.step {
  border: 1px solid #ddd;
  width: 60%;
  margin: auto;
  background-color: #fff;
  border-radius: 6px;
  display: none; /* Varsayılan: görünmez */
  animation: fadeIn 0.5s ease-in-out;
  text-align: center; /* Kartı ortalamak için */
}
.step.active {
  display: block; /* Aktif adım görünür */
}
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Soru Kartı Tasarımı */
.question-card {
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  margin: 1rem auto 3rem auto;
  max-width: 600px;
  text-align: left;
}
.question-card p {
  font-size: 1rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

/* Cevap seçenekleri */
.options label {
  display: block;
  padding: 0.75rem 1rem;
  margin-bottom: 0.5rem;
  border: 2px solid #e0e3f8;
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.3s ease, border 0.3s ease;
  background-color: #fff;
}

.options label:hover {
  background: #e0e3f8;
  border-color: #ccc;
}

.options input[type="radio"] {
  margin-right: 0.5rem;
}

.options label.selected {
  background-color: #e0e3f8;
  border-color: #e0e3f8;
}

.question-card textarea {
  width: 100%;
  min-height: 120px;
  margin-bottom: 1rem;
  resize: vertical;
  padding: 0.75rem;
  border: 1px solid #ddd;
  border-radius: 5px;
  font-size: 1rem;
}

/* Sıralama (Drag & Drop) - STEP 26 Tasarımları */
.priority-slot-row {
  display: flex;
  align-items: center;
  margin-bottom: 0.75rem;
}

.priority-slot-row .slot-label {
  font-weight: 600;
  min-width: 20px;
  margin-right: 1rem;
}

.priority-slot {
  min-height: 34px;
  border: 2px dashed #b1b1b1;
  border-radius: 5px;
  padding: 0.25rem 0.5rem;
  list-style-type: none;
  width: 100%;
}
.priority-slot li {
  cursor: grab;
  background: #e7e7e7;
  padding: 0.5rem;
  margin-bottom: 0.25rem;
  border-radius: 5px;
  text-align: center;
}
.scramble-container {
  margin-top: 2rem;
}
.scramble-container h5 {
  font-weight: 600;
}
.scramble-list {
  list-style-type: none;
  padding: 0;
}
.scramble-list li {
  cursor: grab;
  background: #fff;
  margin-bottom: 0.1rem;
  border: 1px solid #e0e3f8;
  border-radius: 5px;
  transition: background 0.3s ease, border 0.3s ease;
  text-align: center;
}
.scramble-list li:hover {
  background: #e0e3f8;
  border-color: #ccc;
}

/* Navigation Buttons (İleri/Geri) */
.navigation {
  display: flex;
  justify-content: space-between;
  margin-top: -50px;
  padding: 0px 20px 20px 20px;
}
.navigation button {
  min-width: 120px;
}
.btn-prev {
  background-color: #47529480;
  border-color: #4d5dab;
  color: #fff;
}
.btn-prev:hover {
  background-color: #475294;
  border-color: #3a4a9c;
  color: #fff;
}
.btn-next {
  background-color: #24317a;
  border-color: #24317a;
  color: #fff;
}
.btn-next:hover {
  background-color: #1b2962;
  border-color: #1b2962;
  color: #fff;
}
.btn-success {
  background-color: #28a745;
  border-color: #28a745;
}
.btn-success:hover {
  background-color: #218838;
  border-color: #1e7e34;
}

/* İlerleme Çubuğu (Progress Bar) */
/* relative ekledik ki logo üzerinde absolute pozisyonlayabilelim */
.progress-container {
  max-width: 600px;
  margin: 0 auto 2rem auto;
  position: relative; /* logo için konumlandırma */
}
.progress {
  height: 20px;
  border-radius: 10px;
  overflow: hidden;
  background-color: #b0b1ce;
  border: 1px solid #fff;
}
.progress-bar {
  background-color: #24317a;
  text-align: center;
  color: #fff;
  font-weight: 400;
  padding-right: 20px;

}

/* Progress Bar içindeki logo */
#progressLogo {
  position: absolute;
  top: -15px; /* Logo çubuğun biraz üstünde görünsün diye */
  left: 0; /* İlk etapta solda başlasın */
  width: 50px; /* Logo boyutu */
  height: auto;
  transition: left 0.3s ease; /* Hareketi yumuşak olsun */
  z-index: 999; /* Üstte görünmesi için */
}

@media (max-width: 600px) {
  body{
    height: 100vh ;
  }
  .survey-header .logo {
    height: 180px;
  }
  #alert-container {
    width: 96% !important;
  }
  #survey-title {
    font-size: 22px;
  }
  #departmentDropdown {
    width: 90% !important;
  }
  #departmentDropdownMenu {
    width: 90%;
  }
  .step {
    width: 100%;
  }
  .survey-header h1 {
    font-size: 1.3rem;
  }
  .navigation {
    flex-direction: row;
    justify-content: space-between;
  }
  .navigation button {
    width: auto;
  }
}

/* Logo animasyonu: sayfa yüklendiğinde yumuşakça büyüyüp beliren logo */
.logo {
  opacity: 0;
  transform: scale(0.5);
  animation: fadeInScale 1.5s ease-in-out forwards;
}

@keyframes fadeInScale {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  60% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@media (max-width: 375px) {
  /* Konteyner: Tam genişlik, daha küçük padding */
  .container {
    width: 100%;
    padding: 0.5rem;
  }

  /* Üst header alanı: Daha küçük margin ve padding */
  .survey-header {
    margin: 2rem auto;
    padding: 1rem;
  }

  /* Soru kartları: Kart genişliğini yüzde bazlı ayarlayın */
  .question-card {
    margin: 1rem auto 3rem auto;
    max-width: 95%;
    padding: 1rem;
  }

  /* İlerleme çubuğu: Genişliği kısıtlayın */
  .progress-container {
    max-width: 95%;
  }

  /* Navigation butonları: Dikey hizalama ve tam genişlik */
  .navigation {
    flex-direction: unset;
    gap: 0.5rem;
  }
  .navigation button {
    width: 30%;
  }
}

.dropdown-toggle::after {
  float: right;
  margin-top: 10px;
}


.already-submitted-container {
  border: 1px solid #ddd;
  width: 60%;
  margin: 2rem auto;
  background-color: #fff;
  border-radius: 6px;
  text-align: center;
  padding: 2rem 1.5rem;
  animation: fadeIn 0.5s ease-in-out;
}

.already-submitted-container .logo {
  display: block;
  margin: 0 auto 20px auto;
  height: 220px;
}

.already-submitted-container p {
  font-size: 1.1rem;
  font-weight: 700;
  color: #12193f;
}










.language-selector {
  margin-bottom: 20px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #212c55;
  transition: .4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  border-radius: 50%;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: #212c55;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Optional: add a small label beside the toggle switch */
#language-label {
  color:  #000;
  margin-left: 10px;
  font-size: 16px;
}