body {
  background-color: #f4f7f6;
  font-family: "Inter", "Segoe UI", "Roboto", "Helvetica Neue", Arial,
    sans-serif;
  color: #2c3e50;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 700;
}

.btn-primary-custom {
  background-color: #3498db;
  border-color: #3498db;
  color: #ffffff;
  font-weight: 600;
  padding: 10px 25px;
  border-radius: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(52, 152, 219, 0.2);
}
.btn-primary-custom:hover,
.btn-primary-custom:focus {
  background-color: #2980b9;
  border-color: #2980b9;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(52, 152, 219, 0.3);
}
.btn-lg-custom {
  font-size: 1.2rem;
  padding: 12px 30px;
}
.btn .spinner-border {
  display: none;
}
.btn.loading .spinner-border {
  display: inline-block;
}

.card-custom {
  border: 1px solid #e9ecef;
  border-radius: 0.75rem;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: box-shadow 0.3s ease-in-out;
  background-color: #ffffff;
  overflow: hidden;
}
.card-custom:hover {
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
}
.card-custom .card-header {
  padding: 1.5rem;
}
.card-custom .card-footer {
  padding: 1.5rem;
}
.card-header,
.card-footer {
  background-color: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
}
.card-footer {
  border-top: 1px solid #e9ecef;
  border-bottom: 0;
}

.section-title {
  color: #7f8c8d;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  display: block;
}

.code-block-wrapper,
#modal-code-container {
  max-height: 20em;
  overflow-y: auto;
  background-color: #2d333b;
  color: #c9d1d9;
  padding: 1rem;
  border: 1px solid #444c56;
  border-radius: 6px;
  margin: 0;
  font-family: "SFMono-Regular", Menlo, Monaco, Consolas, "Courier New",
    monospace;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.faq-card {
  border: none;
  margin-bottom: 1rem;
  border-radius: 15px !important;
  box-shadow: 0 4px 25px rgba(0, 0, 0, 0.07);
  overflow: hidden;
  transition: all 0.3s ease;
}
.faq-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}
.faq-card .card-header {
  background-color: #ffffff;
  border: none;
  padding: 0;
}
.faq-card .card-body {
  line-height: 1.7;
  color: #34495e;
}
.faq-card .btn-link {
  width: 100%;
  text-align: left;
  padding: 1.5rem;
  font-weight: 600;
  font-size: 1.1rem;
  color: #2c3e50;
  text-decoration: none;
  position: relative;
}
.faq-card .btn-link:hover,
.faq-card .btn-link:focus {
  text-decoration: none;
  box-shadow: none;
}
.faq-card .btn-link::after {
  content: "\f078";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%) rotate(0deg);
  transition: transform 0.3s ease;
}
.faq-card .btn-link[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(-180deg);
}
.faq-icon {
  margin-right: 15px;
  color: #3498db;
  font-size: 1.2rem;
  width: 25px;
  text-align: center;
}

.main-header {
  background-color: #2c3e50;
  padding: 0.5rem 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  font-family: "Inter", sans-serif;
}
.main-header .navbar-brand {
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.5px;
  color: #ffffff !important;
}
.main-header .nav-link {
  color: #bdc3c7;
  font-weight: 600;
  padding: 0.8rem 1.2rem !important;
  border-radius: 8px;
  transition: all 0.3s ease;
  position: relative;
}
.main-header .nav-link:hover {
  color: #ffffff;
  background-color: rgba(255, 255, 255, 0.05);
}
.main-header .nav-item.active .nav-link {
  color: #ffffff;
  background-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.3);
}
.main-header .btn-outline-info {
  font-weight: 600;
  border-width: 2px;
  border-color: #3498db;
  color: #3498db;
  transition: all 0.3s ease;
}
.main-header .btn-outline-info:hover {
  background-color: #3498db;
  color: #ffffff;
  transform: translateY(-2px);
}
.main-header .dropdown-menu {
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
  background-color: #34495e;
  padding: 0.5rem 0;
}
.main-header .dropdown-item {
  font-weight: 600;
  color: #bdc3c7;
  padding: 0.75rem 1.5rem;
  transition: all 0.2s ease;
}
.main-header .dropdown-item i {
  margin-right: 10px;
  color: #95a5a6;
  transition: all 0.2s ease;
}
.main-header .dropdown-item:hover {
  background-color: #46627f;
  color: #ffffff;
}
.main-header .dropdown-item:hover i {
  color: #3498db;
}
.main-header .dropdown-divider {
  border-top: 1px solid #4a627d;
}

.auth-wrapper {
  display: flex;
  min-height: 100vh;
  width: 100%;
  align-items: center;
}
.auth-content {
  width: 100%;
  max-width: 480px;
  padding: 40px;
}
.auth-brand {
  display: block;
  margin-bottom: -3rem;
  text-decoration: none;
}

.status-badge {
  padding: 0.5em 1em;
  border-radius: 50rem;
  font-weight: 600;
  font-size: 0.8rem;
  color: #fff;
}
.status-completed {
  background-color: #28a745;
}
.status-pending-tesla {
  background-color: #fd7e14;
}
.status-pending-user {
  background-color: #6c757d;
}
.status-expired {
  background-color: #dc3545;
}

.btn-primary-custom:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  cursor: not-allowed;
}

.pagination {
  margin-bottom: 0;
}
.page-item .page-link {
  color: #3498db;
  border-radius: 0.25rem;
  margin: 0 3px;
  border: 1px solid #dee2e6;
  transition: all 0.2s ease;
}
.page-item .page-link:hover {
  background-color: #e9ecef;
  color: #2980b9;
}
.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  background-color: #3498db;
  border-color: #3498db;
  box-shadow: 0 2px 8px rgba(52, 152, 219, 0.4);
}
.page-item.disabled .page-link {
  color: #6c757d;
  pointer-events: none;
  background-color: #fff;
  border-color: #dee2e6;
}

.announcement-bar {
  background: linear-gradient(45deg, #3a7bd5, #00d2ff);
  color: #ffffff;
  padding: 15px 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 500;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  margin-top: 1.5rem;
  border-radius: 8px;
}
.announcement-bar i {
  margin-right: 10px;
  font-size: 1.2rem;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

/* --- DÜZENLENMİŞ ARAÇ TERCİHLERİ STİLLERİ --- */
.vehicle-options-grid {
  display: grid;
  grid-template-columns: repeat(
    auto-fill,
    minmax(150px, 1fr)
  ); /* Daha küçük kartlar */
  gap: 1rem;
}

.vehicle-option-card {
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 0.75rem; /* Daha az iç boşluk */
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
}
.vehicle-option-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: #3498db;
}
.vehicle-option-card.selected {
  border-color: #3498db;
  background-color: #f0f8ff;
}
.vehicle-option-card.selected::after {
  content: "\f058";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  color: #3498db;
  font-size: 1.2rem;
}
.vehicle-option-card input[type="checkbox"] {
  display: none;
}
.vehicle-option-card img {
  max-width: 100%;
  height: 70px; /* Görsel yüksekliği küçültüldü */
  object-fit: cover;
  margin-bottom: 0.5rem;
  border-radius: 8px;
}
.vehicle-option-card .option-name {
  font-weight: 600;
  font-size: 0.9rem; /* Yazı boyutu küçültüldü */
  color: #2c3e50;
  margin: 0;
  line-height: 1.3;
}
.color-option .color-swatch-large {
  width: 50px; /* Renk kutusu küçültüldü */
  height: 50px; /* Renk kutusu küçültüldü */
  border-radius: 50%;
  margin: 10px auto;
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.vehicle-main-tabs .nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: #6c757d;
  border-width: 0 0 3px 0;
  border-color: transparent;
  padding: 0.8rem 1rem;
}
.vehicle-main-tabs .nav-link.active {
  color: #3498db;
  border-color: #3498db;
  background-color: transparent;
}
.vehicle-sub-tabs {
  margin-bottom: 1.5rem;
}
.vehicle-sub-tabs .nav-link {
  color: #34495e;
  font-weight: 500;
  padding: 0.5rem 1rem;
  border-radius: 50px;
  border: 1px solid transparent;
}
.vehicle-sub-tabs .nav-link.active {
  background-color: #3498db;
  color: #fff;
  border-color: #3498db;
}
.vehicle-sub-tabs .nav-link:not(.active):hover {
  background-color: #f1f1f1;
}
.vehicle-tab-content {
  padding-top: 1rem;
}
Kesinlikle haklısınız, gönderdiğiniz görseli inceledim ve mevcut tasarımın hem görsel olarak dağınık olduğunu hem de "Arkadan İtiş" gibi metinlerin tekrarlandığını gördüm. Amacımız, bu bölümü hem estetik olarak çok daha profesyonel bir hale getirmek hem de form gönderimindeki olası hataları gidermek.

İsteğiniz doğrultusunda, ana modelleri şık bir sekme (tab) yapısıyla sunan ve her sekmenin içinde seçenekleri temiz başlıklar altında gruplayan yepyeni bir tasarım hazırladım. Bu yapı, hem görsel karmaşayı ortadan kaldıracak hem de kullanımı çok daha keyifli hale getirecektir.

Lütfen aşağıdaki 2 adımı dikkatlice uygulayın.

Adım 1: CSS Dosyasını Temizleyip Yenileyin

Önceki tasarıma ait stilleri temizleyip yerine yeni ve daha zarif sekme yapısı için gerekli kodları ekleyelim.

public/css/global.css dosyasını açın. Dosyanın en altındaki .vehicle-options-grid ile başlayan ve araç tercihleriyle ilgili olan tüm CSS kodlarını silin ve yerine aşağıdaki yeni ve temiz kod bloğunu yapıştırın.
CSS

/* file: public/css/global.css (EN ALTINA EKLEYİN) */

/* --- YENİ ve ŞIK Profil Sayfası Araç Tercihleri Stilleri --- */

/* Ana Model Sekmeleri (Model Y, Model 3 vb.) */
.vehicle-main-tabs .nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: #6c757d;
  border-width: 0 0 3px 0;
  border-color: transparent;
  padding: 0.8rem 1rem;
  transition: all 0.2s ease-in-out;
}
.vehicle-main-tabs .nav-link.active,
.vehicle-main-tabs .nav-link:hover {
  color: #3498db;
  border-color: #3498db;
  background-color: transparent;
}

.vehicle-tab-content {
  padding-top: 1.5rem;
}

/* Kategori Başlıkları (Donanım, Dış Renk vb.) */
.vehicle-category-title {
  color: #7f8c8d;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid #e9ecef;
}
.vehicle-category-title:first-child {
  margin-top: 0;
}

/* Seçenek Kartları (Kompakt ve Şık Tasarım) */
.vehicle-options-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
}

.vehicle-option-card {
  border: 2px solid #e9ecef;
  border-radius: 12px;
  padding: 0.75rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
.vehicle-option-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  border-color: #bdc3c7;
}
.vehicle-option-card.selected {
  border-color: #3498db;
  background-color: #f0f8ff;
}
.vehicle-option-card.selected::after {
  content: "\f058"; /* FontAwesome check-circle ikonu */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 8px;
  right: 8px;
  color: #3498db;
  font-size: 1.25rem;
}
.vehicle-option-card input[type="checkbox"] {
  display: none;
}
.vehicle-option-card img {
  width: 100%;
  height: 60px;
  object-fit: contain;
  margin-bottom: 0.75rem;
  border-radius: 8px;
}
.vehicle-option-card .option-name {
  font-weight: 600;
  font-size: 0.85rem;
  color: #34495e;
  margin: 0;
  line-height: 1.3;
}
.color-option .color-swatch-large {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 0.75rem auto;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Koyu navbar içindeki açılır menü linklerinin rengini açık yapar */
.main-header .dropdown-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.85) !important; /* Açık ve okunaklı renk */
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Linklerin üzerine gelinceki stili ayarlar */
.main-header .dropdown-menu .dropdown-item:hover,
.main-header .dropdown-menu .dropdown-item:focus {
  color: #ffffff !important; /* Daha parlak beyaz */
  background-color: rgba(255, 255, 255, 0.1); /* Hafif aydınlanma */
}

/* Ayracı da açık renkli bir çizgi yapıyoruz */
.main-header .dropdown-menu .dropdown-divider {
  border-top: 1px solid rgba(255, 255, 255, 0.15);
}