/* Bu CSS dosyası, adım adım form uygulamasının stilini belirler */
    /* Genel gövde ve font ayarları */
    body { font-family: Arial, sans-serif; background: #fff; margin: 0; padding: 0; }
    
    /* Adım başlıkları barı (üstteki kutular) */
    .steps {
      display: flex;
      justify-content: center;
      margin: 20px 0;
      flex-wrap: wrap;
      gap: 10px;
    }
    /* Her bir adım kutusu */
    .step {
      background: #0ABABA;
      color: #fff;
      padding: 15px 25px;
      margin: 0 5px;
      border-radius: 10px;
      opacity: 0.7;
      font-size: 1.3em;
      min-width: 160px;
      text-align: center;
    }
    /* Aktif adım kutusu */
    .step.active {
      background: #F19035;
      opacity: 1;
    }
    /* Ana içerik kutusu */
    .container {
      max-width: 600px;
      margin: 30px auto;
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 2px 16px #eee;
      padding: 30px;
      width: 95vw;
    }
    /* Her adımın içindeki kart/kutu */
    .card {
      background: #0ABABA;
      border-radius: 20px;
      padding: 20px;
      margin-bottom: 30px;
      width: 100%;
      box-sizing: border-box;
      color: #fff; /* Kart içindeki yazılar beyaz */
    }
    /* Kart içindeki label'lar */
    .card label {
      color: #fff;
      font-weight: 400;
      margin-bottom: 6px;
      margin-top: 18px;
      display: block;
    }
    /* Kart içindeki input ve select'ler */
    .card input, .card select {
      color: #222;
      background: #fff;
      width: 100%;
      box-sizing: border-box;
      border-radius: 8px;
      border: 1px solid #ccc;
      padding: 12px;
      margin-top: 6px;
      font-size: 1em;
      margin-bottom: 0;
      outline: none;
      display: block;
    }
    /* Adım geçiş butonları alanı */
    .actions {
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 10px;
    }
    /* Adım geçiş butonları */
    .actions button {
      padding: 12px 30px;
      border: none;
      border-radius: 8px;
      font-size: 1.1em;
      min-width: 120px;
      margin-top: 10px;
    }
    /* Önceki adım butonu */
    .actions .prev { background: #888; color: #fff; }
    /* Sonraki adım ve submit butonu */
    .actions .next { background: #F19035; color: #fff; }
    /* Gizli adım */
    .hidden { display: none; }
    /* Toplam maliyet yazısı */
    .cost {
      font-size: 2em;
      font-weight: bold;
      color: #fff;
    }
    /* Ziyaret maliyetleri yazısı */
    .visit {
      color: #fff;
      font-size: 1em;
    }
    /* Responsive (mobil) için ayarlar */
    @media (max-width: 700px) {
      /* Ana kutu mobilde daha küçük ve köşeleri yuvarlatılmış */
      .container {
        max-width: 98vw;
        padding: 10px;
        border-radius: 10px;
      }
      /* Adım başlıkları dikey dizilir */
      .steps {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
      }
      /* Adım kutuları mobilde daha küçük */
      .step {
        font-size: 1em;
        min-width: unset;
        padding: 10px 0;
        margin: 0;
        border-radius: 8px;
      }
      /* Kart kutusu mobilde daha küçük */
      .card {
        border-radius: 10px;
        padding: 10px;
      }
      /* Toplam maliyet yazısı mobilde daha küçük */
      .cost {
        font-size: 1.3em;
      }
      /* Butonlar mobilde daha küçük */
      .actions button {
        font-size: 1em;
        min-width: 90px;
        padding: 10px 10px;
      }
    }