/* ============================================
   BUS SEAT SELECTION - RESİMDE OLDUĞU GİBİ
   ============================================ */
.bus-seat-selection-area, .bus-seat-select-area {
  background: linear-gradient(135deg, #f5f7fa 0%, #ffffff 100%);
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  padding: 30px;
  margin: 0;
  font-family: 'Inter', 'Segoe UI', 'Arial', sans-serif;
  border: 1px solid #e5e7eb;
  overflow: visible;
  max-width: 100%;
  position: relative;
}
  opacity: 0.25;
}

/* ============================================
   BUS SEAT TABS - RESİMDEKİ GİBİ
   ============================================ */

.bus-seat-tabs {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  width: 100%;
  margin: 0 0 20px 0;
  position: relative;
  border-top: 2px solid #ddd;
}

.bus-seat-tabs::after {
  display: none;
}

/* Tab butonları - yan yana, tema uyumlu */
.bus-tab-btn {
  background: #f8f9fa;
  border: 2px solid #dee2e6;
  border-radius: 8px;
  padding: 12px 24px;
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: #6c757d;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0 4px;
}
.bus-tab-btn:last-child {
  margin-right: 0;
}

.bus-tab-btn:hover {
  background: #e9ecef;
  border-color: #d53333;
  color: #d53333;
  transform: translateY(-1px);
}

.bus-tab-btn.active {
  background: linear-gradient(135deg, #d53333 0%, #b82929 100%);
  border-color: #d53333;
  color: #fff;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(213, 51, 51, 0.3);
}

/* Aktif sekmenin alt çubuğu - yok */
.bus-tab-btn.active::after {
  display: none;
}

/* Responsive */
@media (max-width: 600px) {
  .bus-seat-tabs {
    flex-direction: row;
    gap: 8px;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  }

  .bus-tab-btn {
    flex: 1;
    padding: 10px 12px;
    font-size: 0.75rem;
    margin: 0;
    border-radius: 6px;
  }
}


/* ============================================
   BUS SEAT LEGEND (ELEGANT SOFT STYLE)
   ============================================ */

/* Resimde olduğu gibi legend */
.bus-seat-legend {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 15px;
  padding: 15px 20px;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  margin-bottom: 20px;
  border: none;
  position: relative;
}

/* Alt ışıltı yok */
.bus-seat-legend::after {
  display: none;
}

/* Her bir öğe */
.bus-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #333;
  background: transparent;
  padding: 0;
  border-radius: 0;
  box-shadow: none;
  transition: none;
}

.bus-legend-item:hover {
  transform: none;
  box-shadow: none;
}

/* Renk kareleri - resimde olduğu gibi */
.bus-legend-color {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #ddd;
  box-shadow: none;
}

/* Resimde olduğu gibi renkler */
.bus-female-legend {
  background: #e91e8c;
  border-color: #d01a7d;
}

.bus-male-legend {
  background: #64b5f6;
  border-color: #42a5f5;
}

.bus-empty-legend {
  background: #fff;
  border-color: #9e9e9e;
}

.bus-selected-legend {
  background: #81c784;
  border-color: #66bb6a;
}

/* Koltuk seçilemez */
.bus-unavailable-legend {
  background: #616161;
  border-color: #424242;
}

/* Mobil uyum */
@media (max-width: 600px) {
  .bus-seat-legend {
    gap: 14px;
    padding: 12px;
  }

  .bus-legend-item {
    font-size: 0.9rem;
    padding: 8px 12px;
    width: 45%;
  }

  .bus-legend-color {
    width: 18px;
    height: 18px;
    border-radius: 4px;
  }
}

/* Inline dropdown panel styles (when opened under a trip row) */
.inline-seat-panel { background: transparent; }
.inline-seat-panel .inline-seat-cell { padding: 12px 8px; background: transparent; }
.bus-seat-selection-area.inline, .bus-seat-select-area.inline { margin: 0; padding: 18px; border-radius: 12px; box-shadow: 0 6px 24px rgba(60,72,88,0.08); }
.inline-seat-close-wrap { display:flex; justify-content:flex-end; margin-top:12px; }
.inline-seat-close { background:#fff; border:1px solid #e6e6ee; padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:600; }
.inline-seat-close:hover { background:#f5f7ff; }

@media (max-width:768px){
  .bus-seat-select-area.inline { padding:12px; }
  .inline-seat-close-wrap{ margin-top:8px; }
}

/* ============================================
   BUS WARNING - RESİMDE OLDUĞU GİBİ
   ============================================ */

.bus-warning-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  padding: 0;
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.bus-warning-grid:hover {
  box-shadow: none;
}

/* Her bir uyarı kartı */
.bus-warning-message {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 18px 14px 46px;
  border-radius: 12px;
  font-size: 0.97rem;
  font-weight: 500;
  color: #5b5f6c;
  background: #fffef7;
  border-left: 4px solid #ffe082;
  box-shadow: 0 1px 6px rgba(255, 193, 7, 0.08);
  line-height: 1.5;
  transition: all 0.25s ease;
}

/* Hover’da hafif parlamalı etki */
.bus-warning-message:hover {
  background: #fffdf2;
  box-shadow: 0 2px 10px rgba(255, 213, 79, 0.1);
  transform: translateY(-2px);
}

/* Sol taraftaki ikon - resimde olduğu gibi */
.bus-warning-message::before {
  content: "⚠";
  position: relative;
  left: 0;
  top: 0;
  transform: none;
  font-size: 1rem;
  opacity: 1;
  color: #fff;
}

/* Renk varyasyonları - kaldır, sadece turuncu */
.bus-warning-message.info {
  background: #ff9800;
  border: none;
  box-shadow: none;
}

.bus-warning-message.info::before {
  content: "⚠";
  color: #fff;
}

.bus-warning-message.alert {
  background: #ff9800;
  border: none;
}

.bus-warning-message.alert::before {
  content: "⚠";
  color: #fff;
}

/* Mobil uyum */
@media (max-width: 600px) {
  .bus-warning-grid {
    padding: 14px 12px;
    gap: 10px;
  }

  .bus-warning-message {
    padding: 12px 14px 12px 40px;
    font-size: 0.9rem;
  }
}

/* ============================================
   SEFER LİSTESİ - RESİMDEKİ GİBİ TASARIM
   ============================================ */
.bus-trip-table-wrapper {
  overflow: visible;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  border: none;
  max-height: none;
  overflow-y: visible;
}

.bus-trip-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 12px; /* Kartlar arası boşluk */
}

/* Başlıkları gizle */
.bus-trip-table thead {
  display: none;
}

.bus-trip-table thead th {
  display: none;
}

/* Resimde olduğu gibi kolon genişlikleri */
.bus-trip-table thead th.col-time,    .bus-trip-table tbody td.col-time    { width: 15%; }
.bus-trip-table thead th.col-bus,     .bus-trip-table tbody td.col-bus     { width: 25%; }
.bus-trip-table thead th.col-features,.bus-trip-table tbody td.col-features{ width: 25%; }
.bus-trip-table thead th.col-seats,   .bus-trip-table tbody td.col-seats   { display: none; }
.bus-trip-table thead th.col-price,   .bus-trip-table tbody td.col-price   { width: 18%; text-align:right; }
.bus-trip-table thead th.col-action,  .bus-trip-table tbody td.col-action  { width: 15%; text-align:center; }

/* Resimde olduğu gibi kart tasarımı */
.bus-trip-table tbody tr {
  border: 1px solid #d4d4d4;
  transition: all .2s ease;
  cursor: pointer;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.08);
  border-radius: 0;
}

.bus-trip-table tbody tr:hover:not(.disabled) {
  background: #fff;
  transform: none;
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
}

.bus-trip-table tbody tr.disabled {
  opacity: .7;
  cursor: not-allowed;
  background: #f5f5f5;
}

.bus-trip-table tbody tr:last-child {
  border-bottom: 1px solid #d4d4d4;
}

.bus-trip-table tbody td { 
  padding: 16px 20px; 
  vertical-align: middle;
  border: none;
}

/* Resimde olduğu gibi zaman gösterimi */
.col-time {
  width: 15% !important;
}

.col-time .date-info {
  display: block;
  font-size: 12px;
  color: #999;
  margin-bottom: 4px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.3px;
}

.col-time .journey-date {
  display: inline-block;
}

.col-time .time-info {
  display: block;
  font-size: 36px; 
  font-weight: 700; 
  color: #333; 
  margin-bottom: 6px;
  line-height: 1;
}

.col-time .departure-time { 
  color: #333;
  font-size: 36px;
}

.col-time .time-arrow { 
  display: none;
}

.col-time .arrival-time {
  display: none;
}

.col-time .night-trip-badge {
  font-size: 11px;
  color: #5a4fcf;
  background: #f0edff;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 4px;
  font-weight: 500;
}

/* Gece seferi bilgilendirme satırı */
.night-trip-info-row {
  background: #2c3e50;
}

.night-trip-info {
  padding: 0 !important;
}

.night-trip-warning {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px;
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  border-left: 4px solid #f39c12;
}

.night-trip-warning .night-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.night-trip-warning .night-text {
  color: white;
  flex: 1;
}

.night-trip-warning .night-text strong {
  display: block;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 6px;
  color: #f39c12;
  letter-spacing: 0.3px;
}

.night-trip-warning .night-text p {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #ecf0f1;
  font-weight: 400;
}

.col-time .duration-info { 
  font-size: 13px; 
  color: #d53333; 
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: 4px;
}

.col-time .duration-info::before {
  content: '⏱';
  font-size: 13px;
}

/* Resimde olduğu gibi otobüs logosu ve 2+1 */
.col-bus { 
  width: 25% !important;
  text-align: left;
}

.col-bus .bus-name { 
  display: flex;
  justify-self: center;
  align-items: center;
  gap: 12px;
  font-size: 18px; 
  font-weight: 700; 
  color: #333;
  position: relative;
}

.col-bus .bus-feature-text{
  display:inline-flex;
  align-items:center;
  font-size: 14px;
  font-weight: 700;
  color: var(--primary-color);
  white-space: nowrap;
}

.col-bus .bus-type-text{
  font-size: 12px;
  color: #666;
  margin-top: 2px;
}

.col-bus .bus-info-wrapper{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
}

.col-bus .bus-logo-small{
  width: 40px;
  height: 24px;
  object-fit: contain;
}

.shuttle-badge{
  font-size: 18px;
  cursor: help;
}



/* Resimde olduğu gibi özellik ikonları */
.col-features { 
  width: 25% !important;
  text-align: center;
}

.col-features .features-icons { 
  display: flex; 
  gap: 10px; 
  justify-content: center;
  align-items: center;
}

.bus-amenity-icon-only { 
  font-size: 20px; 
  cursor: help; 
  transition: all 0.2s ease; 
  display: inline-block; 
  color: #555;
}

.bus-amenity-icon-only:hover { 
  transform: scale(1.15); 
  color: #333;
}

/* Resimde koltuk sayısı yok, gizleyelim */
.col-seats { 
  display: none !important;
}

/* Resimde olduğu gibi fiyat */
.col-price { 
  text-align: right;
  width: 18% !important;
}

.price-info { 
  display: inline-flex; 
  align-items: baseline; 
  gap: 2px;
}

.price-value { 
  font-size: 32px; 
  font-weight: 700; 
  color: #333;
  line-height: 1;
}

.price-currency { 
  font-size: 16px; 
  font-weight: 500; 
  color: #333;
}

/* Resimde olduğu gibi kırmızı buton */
.col-action { 
  text-align: center;
  width: 15% !important;
}

.bus-select-btn {
  padding: 14px 24px;
  background: #dc0a0a;
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.bus-select-btn::before {
  content: '▼ ';
  font-size: 12px;
}

.bus-select-btn:hover:not(.disabled) {
  background: #c40909;
  transform: none;
  box-shadow: 0 2px 6px rgba(220, 10, 10, 0.3);
}

.bus-select-btn.disabled, .bus-select-btn:disabled { 
  background: #95a5a6; 
  cursor: not-allowed; 
  transform: none; 
  box-shadow: none; 
}

.bus-trip-table tbody tr.disabled .bus-select-btn { 
  pointer-events: none; 
  opacity: 0.6; 
}

/* Tooltip - sadece desktop */
[title]{ position:relative; }
@media (min-width:769px) {
  [title]:hover::after{
    content:attr(title); position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    background:rgba(0,0,0,.9); color:#fff; padding:6px 10px; border-radius:4px; font-size:11px; white-space:nowrap;
    z-index:1000; margin-bottom:6px; pointer-events:none;
  }
  [title]:hover::before{
    content:''; position:absolute; bottom:100%; left:50%; transform:translateX(-50%);
    border:5px solid transparent; border-top-color:rgba(0,0,0,.9); z-index:1000; pointer-events:none;
  }
}

/* ============================================
   DESKTOP KART TASARIMI
   ============================================ */
@media (min-width:769px) {
  .bus-trip-table {
    border-collapse: separate;
    border-spacing: 0 12px;
  }
  
  .bus-trip-table thead {
    display: none;
  }
  
  .bus-trip-table tbody tr.bus-trip-row {
    background: transparent;
  }
  
  .bus-trip-table tbody tr.bus-trip-row > td {
    padding: 0;
  }

  .desktop-trip-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border: 1px solid #eee;
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .desktop-trip-card:hover {
    box-shadow: 0 6px 30px rgba(0,0,0,0.12);
    transform: translateY(-2px);
  }

  .desktop-trip-card.active {
    border: 2px solid #d53333;
    box-shadow: 0 6px 30px rgba(213,51,51,0.15);
  }

  /* Üst kısım: Ana bilgiler */
  .desktop-card-main {
    display: flex;
    align-items: stretch;
  }

  /* Sol: Marka bilgisi */
  .desktop-card-left {
    background: linear-gradient(135deg, #d53333 0%, #b82b2b 100%);
    padding: 20px 24px;
    min-width: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
  }

  .desktop-brand {
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .desktop-bus-type {
    color: rgba(255,255,255,0.85);
    font-size: 12px;
  }

  /* Orta: Zaman ve rota */
  .desktop-card-center {
    flex: 1;
    padding: 16px 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .desktop-time-route {
    display: flex;
    align-items: center;
    gap: 16px;
  }

  .desktop-time-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 100px;
  }

  .desktop-time-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    font-weight: 500;
  }

  .desktop-time-value {
    font-size: 22px;
    font-weight: 700;
    color: #d53333;
  }

  .desktop-city-name {
    font-size: 12px;
    color: #333;
    font-weight: 500;
    text-align: center;
    max-width: 120px;
  }

  .desktop-route-visual {
    display: flex;
    align-items: center;
    flex: 1;
    min-width: 150px;
  }

  .desktop-dot {
    width: 12px;
    height: 12px;
    background: #d53333;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .desktop-line {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #d53333 0%, #f87171 50%, #d53333 100%);
  }

  .desktop-duration {
    padding: 6px 14px;
    background: #fef2f2;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #d53333;
    white-space: nowrap;
    flex-shrink: 0;
  }

  .desktop-date-row {
    display: flex;
    justify-content: center;
    margin-top: 8px;
  }

  .desktop-date-info {
    font-size: 13px;
    color: #666;
    text-align: center;
  }

  /* Özellikler tarihin altında */
  .desktop-amenities-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 10px;
  }

  .desktop-amenities-row .bus-amenity-icon-only {
    padding: 5px 7px;
    background: #f5f5f5;
    border: 1px solid #eee;
    border-radius: 6px;
    font-size: 15px;
  }

  /* Fiyat sağda */
  .desktop-card-price {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 28px;
    border-left: 1px solid #f0f0f0;
    min-width: 130px;
  }

  .desktop-price-value {
    font-size: 28px;
    font-weight: 800;
    color: #d53333;
  }

  .desktop-price-currency {
    font-size: 14px;
    color: #666;
    margin-left: 4px;
  }

  /* Alt kısım: Footer */
  .desktop-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: #fafafa;
    border-top: 1px solid #f0f0f0;
  }

  .desktop-footer-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
  }

  .desktop-shuttle-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    font-size: 11px;
    font-weight: 600;
    border-radius: 16px;
    border: 1px solid #fcd34d;
  }

  .desktop-footer-right {
    display: flex;
    align-items: center;
    gap: 12px;
  }

  .desktop-seats-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #d53333;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
  }

  .desktop-incele-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    background: linear-gradient(135deg, #d53333 0%, #b82b2b 100%);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    border-radius: 25px;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(213, 51, 51, 0.3);
  }

  .desktop-incele-btn:hover:not(.disabled) {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(213, 51, 51, 0.4);
  }

  .desktop-incele-btn.disabled {
    background: #ccc;
    color: #666;
    cursor: not-allowed;
    box-shadow: none;
  }

  .desktop-incele-btn.active {
    background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
    box-shadow: 0 2px 8px rgba(22, 163, 74, 0.3);
  }
}

/* Mobil tablo düzeni - Profesyonel Kart Tasarımı */
@media (max-width:768px){
  /* Mobilde hover tooltip devre dışı - ama mobile-tooltip-active hariç */
  [title]:hover::after,
  [title]:hover::before {
    display: none !important;
  }
  
  /* Mobil tooltip aktif olduğunda göster */
  .mobile-tooltip-active::after,
  .mobile-tooltip-active::before {
    display: block !important;
  }
  
  /* Ana container taşmayı önle */
  .bus-booking-container,
  .bus-step-content,
  .bus-journey-selection {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  
  .bus-trip-table { 
    width: 100%; 
    border-collapse: collapse;
    display: block;
  }
  .bus-trip-table thead { display: none; }
  .bus-trip-table tbody { display: block; width: 100%; }

  /* Desktop kolonları gizle */
  .bus-trip-table tbody td.desktop-only { display: none !important; }
  
  /* Mobil kart göster */
  .bus-trip-table tbody td.mobile-only { 
    display: block !important; 
    width: 100%;
    padding: 0;
  }

  .bus-trip-table tbody tr.bus-trip-row {
    display: block;
    margin: 0 12px 12px 12px;
    border: none;
    background: transparent;
  }

  /* Mobil kart yapısı */
  .mobile-card {
    display: block !important;
    padding: 0;
    background: transparent;
  }

  /* Profesyonel Sefer Kartı */
  .mobile-trip-card {
    background: linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    overflow: visible;
    transition: all 0.3s ease;
    border: 1px solid #eee;
  }

  .mobile-trip-card:active {
    transform: scale(0.98);
    box-shadow: 0 2px 10px rgba(0,0,0,0.12);
  }

  /* Üst satır: Marka + Saat + Fiyat */
  .mobile-row-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    background: linear-gradient(135deg, #d53333 0%, #b82b2b 100%);
    color: white;
    border-radius: 16px 16px 0 0;
  }

  .mobile-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .mobile-brand {
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

  .mobile-bus-type {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
  }

  .mobile-center {
    flex: 1;
    text-align: center;
  }

  .mobile-time-big {
    font-size: 32px;
    font-weight: 800;
    color: white;
    line-height: 1;
    text-shadow: 0 2px 4px rgba(0,0,0,0.2);
  }

  .mobile-date-info {
    font-size: 12px;
    color: rgba(255,255,255,0.9);
    margin-top: 4px;
    font-weight: 500;
  }

  .mobile-right {
    text-align: right;
  }

  .mobile-price-big {
    font-size: 20px;
    font-weight: 800;
    color: white;
  }

  .mobile-tl {
    font-size: 12px;
    font-weight: 500;
    opacity: 0.9;
  }

  /* Orta satır: Süre + Rota */
  .mobile-row-middle {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
  }

  /* Yeni süre ve rota tasarımı */
  .mobile-time-route {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    gap: 8px;
  }

  .time-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 80px;
    flex-shrink: 0;
  }

  .time-label {
    font-size: 10px;
    color: #999;
    text-transform: uppercase;
    font-weight: 500;
  }

  .time-value {
    font-size: 14px;
    font-weight: 700;
    color: #d53333;
  }

  .city-name {
    font-size: 11px;
    color: #333;
    text-align: center;
    max-width: 100px;
    font-weight: 500;
  }

  .route-line-visual {
    display: flex;
    align-items: center;
    flex: 1;
    gap: 0;
  }

  .dot-start, .dot-end {
    width: 10px;
    height: 10px;
    background: #d53333;
    border-radius: 50%;
    flex-shrink: 0;
  }

  .line-bar {
    flex: 1;
    height: 2px;
    background: linear-gradient(90deg, #d53333 0%, #f87171 50%, #d53333 100%);
  }

  .duration-badge {
    padding: 6px 14px;
    background: #fef2f2;
    border-radius: 14px;
    font-size: 14px;
    font-weight: 700;
    color: #d53333;
    white-space: nowrap;
    flex-shrink: 0;
  }

  /* Kalan koltuk sayısı badge */
  .seats-left-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: #d53333;
    color: #fff;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    margin-left: auto;
  }

  .mobile-duration-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: #f8f8f8;
    border-radius: 20px;
    font-size: 12px;
    color: #666;
    font-weight: 500;
    white-space: nowrap;
  }

  .duration-icon {
    font-size: 12px;
  }

  .mobile-route-line {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    font-size: 13px;
    color: #333;
    overflow: hidden;
  }

  .route-from, .route-to {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .route-arrow {
    color: #fff;
    font-weight: 700;
    flex-shrink: 0;
    background: #d53333;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
  }

  /* Özellikler satırı */
  .mobile-row-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: #fff;
    align-items: center;
    overflow: visible;
  }

  /* Mobil için amenity icon stilleri */
  .mobile-row-features .bus-amenity-icon-only {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 10px;
    background: #f5f5f5;
    border-radius: 8px;
    flex-shrink: 0;
    font-size: 18px;
    position: relative;
    cursor: pointer;
  }

  /* Mobil tooltip - tıklayınca AŞAĞIDA görünsün */
  .mobile-row-features .bus-amenity-icon-only.mobile-tooltip-active::after {
    content: attr(title);
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 13px;
    white-space: nowrap;
    z-index: 99999;
    pointer-events: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  }
  .mobile-row-features .bus-amenity-icon-only.mobile-tooltip-active::before {
    content: '';
    position: absolute;
    top: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent;
    border-bottom-color: rgba(0,0,0,.95);
    z-index: 99999;
    pointer-events: none;
  }

  .mobile-row-features .bus-amenity-icon-only svg {
    width: auto;
    height: 14px;
    max-width: 50px;
  }

  .feature-item {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    background: #f5f5f5;
    border-radius: 8px;
  }

  .feature-item.green {
    background: #e8f5e9;
  }

  .feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .feature-icon svg {
    width: 22px;
    height: 22px;
  }

  /* Kart footer */
  .mobile-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #fff;
    border-top: 1px solid #f0f0f0;
  }

  .mobile-card-footer.disabled {
    background: #f5f5f5;
  }

  .footer-left {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .shuttle-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    color: #92400e;
    font-size: 12px;
    font-weight: 600;
    border-radius: 20px;
    border: 1px solid #fcd34d;
  }

  .footer-right {
    display: flex;
    align-items: center;
  }

  .tap-hint {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    background: linear-gradient(135deg, #d53333 0%, #b82b2b 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    border-radius: 25px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(213, 51, 51, 0.3);
    transition: all 0.2s ease;
  }

  .tap-hint:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(213, 51, 51, 0.2);
  }

  .mobile-card-footer.disabled .tap-hint {
    background: #ccc;
    color: #666;
    box-shadow: none;
  }
}

/* Desktop'ta mobil kart gizle */
@media (min-width:769px){
  .bus-trip-table tbody td.mobile-only { display: none !important; }
  .bus-trip-table tbody td.desktop-only { display: table-cell !important; }
}
@media (max-width:479px){
  .bus-trip-table thead th { padding:6px 3px; font-size:9px; }
  .bus-trip-table tbody td { padding:8px 3px; }
  .col-time .date-info { font-size:14px; margin-bottom:2px; }
  .col-time .time-info { font-size:12px; }
  .col-time .duration-info { font-size:15px; }
  .seats-badge { font-size:10px; padding:3px 5px; }
  .price-value { font-size:13px; }
  .bus-select-btn { font-size:9px; }
}

/* Loading / Error */
.bus-loading-state,.bus-error-state,.bus-no-trips{
  padding:40px 20px; text-align:center; background:#fff; border-radius:8px; margin:16px 0;
}
.bus-loading-spinner{
  width:48px; height:48px; border:4px solid #f3f3f3; border-top:4px solid #e74c3c;
  border-radius:50%; animation:spin 1s linear infinite; margin:0 auto 16px;
}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.bus-error-message,.bus-no-trips-message{ color:#6c757d; font-size:14px; margin-top:12px; }

/* Seat-loading (inline panel & seats grid) */
.seat-loading{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
  padding:20px;
  background:linear-gradient(180deg,#ffffff,#fbfbfe);
  border-radius:10px;
  box-shadow:0 6px 20px rgba(60,72,88,0.06);
  border:1px solid #eef0f6;
  color:#556171;
  font-weight:600;
}
.seat-loading .spinner{
  width:36px;
  height:36px;
  border:4px solid #f1f3f6;
  border-top:4px solid var(--primary-color);
  border-radius:50%;
  animation:spin 0.9s linear infinite;
}
.seat-loading .loading-text{font-size:0.98rem;color:#4b5563}


/* Scrollbar */
.bus-trip-table-wrapper::-webkit-scrollbar{ height:8px; }
.bus-trip-table-wrapper::-webkit-scrollbar-track{ background:#f1f3f5; border-radius:4px; }
.bus-trip-table-wrapper::-webkit-scrollbar-thumb{ background:#c0392b; border-radius:4px; }
.bus-trip-table-wrapper::-webkit-scrollbar-thumb:hover{ background:#e74c3c; }

/* Motion reduce */
@media (prefers-reduced-motion: reduce){
  .bus-trip-table tbody tr, .bus-select-btn, .bus-amenity-icon-only{
    transition:none !important; transform:none !important;
  }
}

/* ============================================
   GLOBAL VARS
   ============================================ */
:root{
  --primary-color: #d53333;
  --secondary-color: #6c757d;
  --border-color: #dee2e6;
  --white-color: #fff;

  --seat: 58px;
  --gap: 8px;
  --col-gap-m: 24px;
  --seat-radius: 8px;
  --seat-font: 13px;
  --glow: rgba(255,235,59,.45);
  --bd: 1px solid rgba(0,0,0,.12);
  --empty-bd: #d9d9d9;
  --male-tx: #0b4a7e;
  --female-tx: #7a1440;
}




/* ============================================
   BUS LAYOUT WRAPPERS
   ============================================ */
   BUS LAYOUT WRAPPERS
   ============================================ */


.mobile-bus{
  display:flex !important; align-items:center !important; justify-content:flex-start !important;
  gap:0; padding:0; background:transparent; border-radius:0; overflow-x:auto; -webkit-overflow-scrolling:touch; width:100%; max-width:100%;
  position: relative;
  z-index: 2;
}
.otobus-div{display:flex;align-items:center;justify-content:center;}
.otobus-div img{max-width:100px;height:auto;display:block;}

/* ============================================
   KOLTUK DÜZENİ - DESKTOP & MOBİL TAMAMEN AYRI
   ============================================ */

/* =============================================
   DESKTOP KOLTUK STİLLERİ (769px ve üzeri)
   ============================================= */
@media (min-width: 769px) {
  /* Katları yan yana tutan wrapper - scroll burda */
  .mobile-bus {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;
    max-width: 100%;
    padding-bottom: 10px;
  }
  
  /* Desktop scrollbar */
  .mobile-bus::-webkit-scrollbar {
    height: 8px;
  }
  .mobile-bus::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
  }
  .mobile-bus::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
  }
  .mobile-bus::-webkit-scrollbar-thumb:hover {
    background: #777;
  }
  
  /* Her bir kat */
  .seats-root {
    display: block;
    border: none;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    position: relative;
    flex-shrink: 0;
    min-height: 280px;
  }
  
  /* Otobüs SVG arka plan - her kat için */
  .seats-root::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 320" preserveAspectRatio="none"><rect x="20" y="20" width="1160" height="280" rx="70" ry="70" fill="none" stroke="%23000" stroke-width="8"/><path d="M45,75 C45,45 75,28 120,28" fill="none" stroke="%23000" stroke-width="8"/><path d="M45,245 C45,275 75,292 120,292" fill="none" stroke="%23000" stroke-width="8"/><g transform="translate(0,0)"><circle cx="90" cy="260" r="22" fill="none" stroke="%23000" stroke-width="5"/><circle cx="90" cy="260" r="7" fill="%23000"/><line x1="90" y1="260" x2="90" y2="242" stroke="%23000" stroke-width="4"/><line x1="90" y1="260" x2="74" y2="271" stroke="%23000" stroke-width="4"/><line x1="90" y1="260" x2="106" y2="271" stroke="%23000" stroke-width="4"/></g></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    border-radius: 12px;
    z-index: 0;
    opacity: 0.2;
  }
  
  /* Desktop scrollbar */
  .seats-root::-webkit-scrollbar {
    height: 8px;
  }
  .seats-root::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 4px;
  }
  .seats-root::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 4px;
  }
  .seats-root::-webkit-scrollbar-thumb:hover {
    background: #777;
  }
  
  /* 2. kat için direksiyon ve SVG gizle */
  .seats-root[data-floor="2"] {
    padding-left: 20px;
  }
  .seats-root[data-floor="2"]::before {
    display: none;
  }
  .seats-root[data-floor="2"]::after {
    display: none;
  }
  
  /* Kolonları tutan wrapper - yatay otobüs için dikey sıralama */
  .seats-cols {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: max-content;
    min-width: max-content;
    position: relative;
    z-index: 5;
    padding: 40px 60px 40px 140px;
  }
  
  /* Her bir kolon - koltuklar yatay sıralı */
  .seat-column {
    display: flex;
    flex-direction: row;
    position: relative;
    z-index: 5;
    gap: 5px;
    flex-shrink: 0;
  }
  
  /* Direksiyon - sol alt */
  .seats-root::before {
    display: none; /* SVG'de direksiyon var, bu gereksiz */
  }
}

/* =============================================
   MOBİL KOLTUK STİLLERİ (768px ve altı)
   ============================================= */
@media (max-width: 768px) {
  /* Mobilde koltuklar ilk halindeki ölçü (değişken üzerinden) */
  :root {
    --seat: 58px;
  }

  /* Mobilde koridor SVG'sini gösterme */
  .koltuk-spacer::before {
    display: none;
  }
  
  /* Mobilde koltuk SVG'lerini kaldır - eski basit koltuklar */
  .koltuk::before {
    display: none !important;
  }
  
  /* Eski koltuk stilleri - !important ile override */
  .koltuk {
    border-radius: 8px !important;
  }
  .koltuk-beyaz {
    background: #fff !important;
    border: 2px solid #ccc !important;
  }
  .koltuk-mavi {
    background: #90CAF9 !important;
    border: 2px solid #42A5F5 !important;
    color: #0b4a7e !important;
  }
  .koltuk-pembe {
    background: #F48FB1 !important;
    border: 2px solid #EC407A !important;
    color: #7a1440 !important;
  }
  .koltuk-yesil-erkek {
    background: #81C784 !important;
    border: 2px solid #43A047 !important;
    color: #1b5e20 !important;
  }
  .koltuk-yesil-kadin {
    background: #A5D6A7 !important;
    border: 2px solid #66BB6A !important;
    color: #1b5e20 !important;
  }
  
  /* Katları alt alta tutan wrapper */
  .mobile-bus {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
  }
  
  /* Her bir kat - scroll yok */
  .seats-root {
    display: block;
    border: none;
    border-radius: 12px;
    padding: 0;
    background: transparent;
    position: relative;
    overflow: visible;
    max-width: 100%;
    min-height: 320px;
  }
  
  /* Otobüs SVG arka plan - mobil için dikey (viewBox döndürülmüş) */
  .seats-root::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 1200" preserveAspectRatio="none"><rect x="20" y="20" width="280" height="1160" rx="70" ry="70" fill="none" stroke="%23000" stroke-width="8"/><path d="M75,45 C45,45 28,75 28,120" fill="none" stroke="%23000" stroke-width="8"/><path d="M245,45 C275,45 292,75 292,120" fill="none" stroke="%23000" stroke-width="8"/><g><circle cx="60" cy="90" r="22" fill="none" stroke="%23000" stroke-width="5"/><circle cx="60" cy="90" r="7" fill="%23000"/><line x1="60" y1="90" x2="78" y2="90" stroke="%23000" stroke-width="4"/><line x1="60" y1="90" x2="49" y2="74" stroke="%23000" stroke-width="4"/><line x1="60" y1="90" x2="49" y2="106" stroke="%23000" stroke-width="4"/></g></svg>');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    pointer-events: none;
    border-radius: 12px;
    z-index: 0;
    opacity: 0.2;
  }
  
  /* 2. kat için direksiyon gizle */
  .seats-root[data-floor="2"] {
    padding-top: 25px;
  }
  .seats-root[data-floor="2"]::before {
    display: none;
  }
  .seats-root[data-floor="2"]::after {
    display: none;
  }
  
  /* Kolonları tutan wrapper - dikey otobüs için yatay sıralama */
  .seats-cols {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
    width: 100%;
    position: relative;
    z-index: 5;
    padding: 110px 25px 70px 25px;
  }
  
  /* Her bir kolon - koltuklar dikey sıralı */
  .seat-column {
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: center;
    position: relative;
    z-index: 5;
  }
  
  /* Direksiyon - SVG'de var, gereksiz */
  .seats-root::before {
    display: none;
  }
}

/* Koridor spacer */
.koltuk-spacer {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  pointer-events: none;
  user-select: none;
}

/* (Satır bazlı görünüm kullanıyorsan) */
.otobus-div.koltuklar{display:flex;flex-direction:column;gap:10px;padding:15px;background:#fff;border:2px solid #dee2e6;border-radius:12px;margin:0 10px;width:100%;overflow-x:auto;}
.koltuk-row{display:flex;flex-direction:row;gap:6px;justify-content:flex-start;align-items:flex-end;}
.koltuk-row.double-row{align-items:flex-end;}
.koltuk-row.single-row{align-items:center;}
.koltuk-column{display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:flex-start;}

/* ============================================
   KOLTUK KUTULARI
   ============================================ */
.koltuk,.koltuk-spacer{
  width:var(--seat);height:var(--seat);
  box-sizing:border-box;
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
  user-select:none;
  border-radius:var(--seat-radius);
  font-size:var(--seat-font);
  font-weight:700;
  position:relative;
  color:#333;
  margin:5px;
}
.koltuk-spacer{
  background:transparent;
  border:0;
  pointer-events:none;
  position:relative;
}
.koltuk-spacer::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 60 60"><defs><pattern id="corridor" patternUnits="userSpaceOnUse" width="10" height="10"><rect x="0" y="0" width="10" height="10" fill="%23f5f5f5"/><line x1="0" y1="5" x2="10" y2="5" stroke="%23000" stroke-width="0.5" opacity="0.3"/></pattern></defs><rect width="60" height="60" fill="url(%23corridor)"/></svg>');
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0.5;
}

/* SVG arka plan */
.koltuk::before{
  content:"";
  position:absolute;
  inset:0;
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  z-index:2;
}

.seat-number{
  position:relative;
  z-index:3;
}

/* Renk varyasyonları */
.koltuk-beyaz{
  background:transparent;
  border:none;
  cursor:pointer;
  transition:all .25s;
}
.koltuk-beyaz::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><g fill="none" stroke="%23CCCCCC" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"><rect x="60" y="30" width="130" height="100" rx="22" fill="%23FFFFFF"/><rect x="150" y="42" width="34" height="76" rx="14" fill="%23FFFFFF"/><rect x="86" y="54" width="76" height="52" rx="18" opacity="0.35" stroke-width="4"/><rect x="78" y="16" width="86" height="20" rx="10" fill="%23FFFFFF"/><rect x="78" y="124" width="86" height="20" rx="10" fill="%23FFFFFF"/><rect x="18" y="64" width="38" height="32" rx="10" fill="%23FFFFFF"/><path d="M24 80 H50" opacity="0.35" stroke-width="4"/><path d="M150 44 V116" opacity="0.35" stroke-width="4"/></g></svg>');
}
.koltuk-beyaz:hover{
  transform:scale(1.05);
  filter:brightness(.95);
}
.koltuk-mavi{
  background:transparent;
  border:none;
  cursor:not-allowed;
  opacity:.9;
  color:#0b4a7e;
}
.koltuk-mavi::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><g fill="none" stroke="%2342A5F5" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"><rect x="60" y="30" width="130" height="100" rx="22" fill="%2390CAF9"/><rect x="150" y="42" width="34" height="76" rx="14" fill="%2390CAF9"/><rect x="86" y="54" width="76" height="52" rx="18" opacity="0.35" stroke-width="4"/><rect x="78" y="16" width="86" height="20" rx="10" fill="%2390CAF9"/><rect x="78" y="124" width="86" height="20" rx="10" fill="%2390CAF9"/><rect x="18" y="64" width="38" height="32" rx="10" fill="%2390CAF9"/><path d="M24 80 H50" opacity="0.35" stroke-width="4"/><path d="M150 44 V116" opacity="0.35" stroke-width="4"/></g></svg>');
}
.koltuk-pembe{
  background:transparent;
  border:none;
  cursor:not-allowed;
  opacity:.9;
  color:#7a1440;
}
.koltuk-pembe::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><g fill="none" stroke="%23EC407A" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"><rect x="60" y="30" width="130" height="100" rx="22" fill="%23F48FB1"/><rect x="150" y="42" width="34" height="76" rx="14" fill="%23F48FB1"/><rect x="86" y="54" width="76" height="52" rx="18" opacity="0.35" stroke-width="4"/><rect x="78" y="16" width="86" height="20" rx="10" fill="%23F48FB1"/><rect x="78" y="124" width="86" height="20" rx="10" fill="%23F48FB1"/><rect x="18" y="64" width="38" height="32" rx="10" fill="%23F48FB1"/><path d="M24 80 H50" opacity="0.35" stroke-width="4"/><path d="M150 44 V116" opacity="0.35" stroke-width="4"/></g></svg>');
}

/* Seçilen koltuk - Yeşil (Erkek) */
.koltuk-yesil-erkek{
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:1;
  color:#1b5e20;
}
.koltuk-yesil-erkek::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><g fill="none" stroke="%2343A047" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"><rect x="60" y="30" width="130" height="100" rx="22" fill="%2381C784"/><rect x="150" y="42" width="34" height="76" rx="14" fill="%2381C784"/><rect x="86" y="54" width="76" height="52" rx="18" opacity="0.35" stroke-width="4"/><rect x="78" y="16" width="86" height="20" rx="10" fill="%2381C784"/><rect x="78" y="124" width="86" height="20" rx="10" fill="%2381C784"/><rect x="18" y="64" width="38" height="32" rx="10" fill="%2381C784"/><path d="M24 80 H50" opacity="0.35" stroke-width="4"/><path d="M150 44 V116" opacity="0.35" stroke-width="4"/></g></svg>');
}
.koltuk-yesil-erkek:hover{
  transform:scale(1.05);
}

/* Seçilen koltuk - Yeşil (Kadın) */
.koltuk-yesil-kadin{
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:1;
  color:#1b5e20;
}
.koltuk-yesil-kadin::before{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220 160"><g fill="none" stroke="%2366BB6A" stroke-width="5" stroke-linejoin="round" stroke-linecap="round"><rect x="60" y="30" width="130" height="100" rx="22" fill="%23A5D6A7"/><rect x="150" y="42" width="34" height="76" rx="14" fill="%23A5D6A7"/><rect x="86" y="54" width="76" height="52" rx="18" opacity="0.35" stroke-width="4"/><rect x="78" y="16" width="86" height="20" rx="10" fill="%23A5D6A7"/><rect x="78" y="124" width="86" height="20" rx="10" fill="%23A5D6A7"/><rect x="18" y="64" width="38" height="32" rx="10" fill="%23A5D6A7"/><path d="M24 80 H50" opacity="0.35" stroke-width="4"/><path d="M150 44 V116" opacity="0.35" stroke-width="4"/></g></svg>');
}
.koltuk-yesil-kadin:hover{
  transform:scale(1.05);
}

.koltuk-gri{
  cursor:default;
  opacity:.3;
  pointer-events:none;
}

/* Seçili koltuk efekti */
.koltuk.selected{
  border:3px solid #000 !important;
  box-shadow:0 0 0 3px rgba(255,235,59,.5),0 4px 12px rgba(0,0,0,.2);
  transform:scale(1.08);
  z-index:10;
  animation:seatPulse 1.5s ease-in-out infinite;
}

/* Animasyon */
@keyframes seatPulse{
  0%,100%{transform:scale(1.06);box-shadow:0 0 0 3px var(--glow),0 4px 12px rgba(0,0,0,.18);}
  50%{transform:scale(1.10);box-shadow:0 0 0 5px var(--glow),0 6px 16px rgba(0,0,0,.22);}
}

/* Koltuk iptal tooltip */
.seat-cancel-tooltip {
  background: white;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
  min-width: 200px;
}

.seat-cancel-tooltip p {
  margin: 0 0 12px 0;
  font-size: 14px;
  color: #333;
  text-align: center;
}

.seat-cancel-tooltip .tooltip-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.seat-cancel-tooltip button {
  padding: 8px 16px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 500;
  transition: all 0.2s;
}

.seat-cancel-tooltip .btn-cancel-yes {
  background: #dc3545;
  color: white;
}

.seat-cancel-tooltip .btn-cancel-yes:hover {
  background: #c82333;
}

.seat-cancel-tooltip .btn-cancel-no {
  background: #6c757d;
  color: white;
}

.seat-cancel-tooltip .btn-cancel-no:hover {
  background: #5a6268;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width:768px){
  .mobile-bus{padding:15px;overflow-x:auto;}
  .koltuk{width:42px;height:42px;font-size:11px;border-radius:7px;}
   .koltuk-beyaz::before,.koltuk-mavi::before,.koltuk-pembe::before,.koltuk-yesil-erkek::before,.koltuk-yesil-kadin::before {
    transform: rotate(90deg);
  }
}
@media (max-width:479px){
  .mobile-bus{padding:10px;}
  .koltuk{width:36px;height:36px;font-size:10px;border-radius:6px;}
  .koltuk-beyaz::before,.koltuk-mavi::before,.koltuk-pembe::before,.koltuk-yesil-erkek::before,.koltuk-yesil-kadin::before {
    transform: rotate(90deg);
  }
}

/* ============================================
   GÜZERGAH BİLGİLERİ - RESİMDE OLDUĞU GİBİ
   ============================================ */
.bus-trip-details-section {
  padding: 0;
  background: #fff;
  border-radius: 0;
  box-shadow: none;
  border: none;
}

.bus-trip-details-section h3 {
  font-size: 13px;
  font-weight: 700;
  color: #555;
  margin: 0;
  padding: 14px 16px;
  border-bottom: 2px solid #e0e0e0;
  border-top: 2px solid #ddd;
  background: #fff;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.trip-info-compact {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* ============================================
   TRIP INFO TAB STYLES (MODERN & MINIMAL)
   ============================================ */
.trip-info-modern {
  padding: 20px;
}

/* Ana Güzergah Gösterimi */
.trip-main-info {
  background: white;
  border-radius: 14px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
  margin-bottom: 20px;
}

.trip-route {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
  position: relative;
}

.route-point {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-radius: 12px;
  background: #f8f9fa;
  min-width: 180px;
}

.route-point.start {
  background: linear-gradient(135deg, #d5f4e6 0%, #f0fdf4 100%);
  border: 2px solid #27ae60;
}

.route-point.end {
  background: linear-gradient(135deg, #fadbd8 0%, #fef2f2 100%);
  border: 2px solid #e74c3c;
}

.route-icon {
  font-size: 24px;
  line-height: 1;
}

.route-details {
  flex: 1;
}

.route-name {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2c3e50;
  margin-bottom: 4px;
  line-height: 1.2;
}

.route-time {
  font-size: 1.1rem;
  font-weight: 800;
  font-family: 'Courier New', monospace;
  color: #e74c3c;
}

.route-line {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 16px;
}

.route-line::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #27ae60 0%, #95a5a6 50%, #e74c3c 100%);
  border-radius: 2px;
}

.route-duration {
  background: #2c3e50;
  color: white;
  padding: 8px 16px;
  border-radius: 20px;
  font-weight: 700;
  font-size: 0.9rem;
  z-index: 1;
  position: relative;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* Meta Bilgiler */
.trip-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.meta-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px;
  background: #f8f9fa;
  border-radius: 10px;
  transition: all 0.3s;
}

.meta-item:hover {
  background: #e9ecef;
  transform: translateY(-2px);
}

.meta-icon {
  font-size: 24px;
  margin-bottom: 6px;
}

.meta-label {
  font-size: 0.75rem;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
  margin-bottom: 4px;
}

.meta-value {
  font-size: 0.95rem;
  font-weight: 700;
  color: #2c3e50;
}

/* Duraklar Bölümü */
.trip-stops-section {
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}

.stops-header {
  padding-bottom: 14px;
  border-bottom: 2px solid #e9ecef;
  margin-bottom: 16px;
}

.stops-title {
  font-size: 1rem;
  font-weight: 700;
  color: #2c3e50;
}

.stops-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: none;
  overflow-y: visible;
}

.stop-item-compact {
  display: grid;
  grid-template-columns: 40px 1fr 80px;
  align-items: center;
  padding: 10px 14px;
  background: #f8f9fa;
  border-radius: 8px;
  transition: all 0.2s;
  gap: 12px;
}

.stop-item-compact:hover {
  background: #e9ecef;
  transform: translateX(4px);
}

.stop-item-compact:first-child {
  background: linear-gradient(90deg, #d5f4e6 0%, #f8f9fa 100%);
  border-left: 3px solid #27ae60;
}

.stop-item-compact:last-child {
  background: linear-gradient(90deg, #fadbd8 0%, #f8f9fa 100%);
  border-left: 3px solid #e74c3c;
}

.stop-order {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: white;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 700;
  color: #6c757d;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.stop-item-compact .stop-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2c3e50;
  text-decoration: none;
  transition: all 0.2s;
}

.stop-item-compact .stop-name:hover {
  color: #e74c3c;
  text-decoration: underline;
}

.stop-item-compact .stop-time {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6c757d;
  font-family: 'Courier New', monospace;
  text-align: right;
}

/* Scrollbar */
.stops-list::-webkit-scrollbar {
  width: 6px;
}

.stops-list::-webkit-scrollbar-track {
  background: #f1f3f5;
  border-radius: 3px;
}

.stops-list::-webkit-scrollbar-thumb {
  background: #c0392b;
  border-radius: 3px;
}

/* Responsive Trip Info */
@media (max-width: 768px) {
  .trip-info-modern {
    padding: 12px;
  }

  .trip-main-info {
    padding: 16px;
  }

  .trip-route {
    flex-direction: column;
    gap: 12px;
  }

  .route-point {
    width: 100%;
    min-width: unset;
  }

  .route-line {
    width: 100%;
    height: 50px;
    padding: 12px 0;
  }

  .route-line::before {
    width: 3px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(180deg, #27ae60 0%, #95a5a6 50%, #e74c3c 100%);
  }

  .trip-meta {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .meta-item {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
  }

  .meta-icon {
    margin-bottom: 0;
  }

  .meta-label,
  .meta-value {
    text-align: left;
  }

  .trip-stops-section {
    padding: 14px;
  }

  .stops-list {
    max-height: none;
  }

  .stop-item-compact {
    grid-template-columns: 32px 1fr 70px;
    padding: 8px 12px;
  }
}

.trip-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  color: #495057;
  font-size: 0.9rem;
  font-weight: 500;
  border-radius: 8px;
  margin-bottom: 16px;
  border: 1px solid #dee2e6;
}

.trip-bus-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #6c757d;
}

.trip-duration-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: system-ui, -apple-system, sans-serif;
  color: #6c757d;
}

.stops-table {
  padding: 0;
  background: #fff;
  border-radius: 0;
  overflow: visible;
  border: none;
  margin: 0;
}

.stops-table table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.stops-table thead {
  background: #fafafa;
  border-bottom: 2px solid #e0e0e0;
}

.stops-table thead th {
  padding: 10px 12px;
  text-align: left;
  font-size: 0.65rem;
  font-weight: 700;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: none;
  background: #fafafa;
  white-space: nowrap;
}

.stops-table tbody tr {
  border-bottom: 1px solid #e8e8e8;
  transition: background 0.1s ease;
  background: #fff;
}

.stops-table tbody tr:hover {
  background: #f9f9f9;
  transform: none;
}

.stops-table tbody tr:last-child {
  border-bottom: none;
}

.stops-table tbody td {
  padding: 11px 12px;
  font-size: 0.85rem;
  color: #333;
  vertical-align: middle;
  white-space: nowrap;
}

.stops-table .stop-name {
  font-weight: 500;
  color: #333;
  font-size: 0.85rem;
}

.stops-table .stop-time {
  color: #666;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 500;
  text-align: left;
  font-size: 0.85rem;
}

.stops-table .first-stop td {
  background: linear-gradient(90deg, #d5f4e6 0%, #ffffff 100%);
  font-weight: 600;
}

.stops-table .first-stop .stop-name {
  color: #27ae60;
}

.stops-table .last-stop td {
  background: linear-gradient(90deg, #fadbd8 0%, #ffffff 100%);
  font-weight: 600;
}

.stops-table .last-stop .stop-name {
  color: #e74c3c;
}

.no-stops {
  text-align: center;
  padding: 30px;
  color: #95a5a6;
  font-size: 0.95rem;
}

/* Responsive */
@media (max-width: 768px) {
  .trip-header-row {
    font-size: 0.85rem;
    padding: 12px 14px;
  }

  .stops-table thead th {
    padding: 8px 12px;
    font-size: 0.75rem;
  }

  .stops-table tbody td {
    padding: 10px 12px;
    font-size: 0.85rem;
  }
}

/* ============================================
   LEGACY CONTAINERS
   ============================================ */
.bus-seat-layout,.bus-seat-layout-horizontal{
  background:#f8f9fa;padding:60px 30px 30px;border-radius:20px;max-width:900px;margin:0 auto;
}
.bus-door{width:48px;height:48px;}
@media (max-width:768px){
  .bus-seat-layout,.bus-seat-layout-horizontal{
    padding:50px 15px 20px;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;border-radius:15px;
  }
  .bus-driver{top:12px;left:12px;}
  .driver-icon{font-size:24px;}
  .steering-wheel{width:40px;height:40px;}
  .bus-seats-rows{gap:6px;}
  .bus-seat-row,.seat-row{gap:6px;}
  .bus-seat{width:40px;height:40px;font-size:11px;border-radius:10px;}
  .bus-door{width:40px;height:40px;font-size:20px;border-radius:10px;}
  .seat-spacer{width:18px;height:40px;}
}
@media (max-width:479px){
  .bus-seat-layout,.bus-seat-layout-horizontal{padding:45px 10px 15px;}
  
  /* Mobilde dikey düzen */
  .bus-seat-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  /* Mobile bus container */
  .mobile-bus {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    width: 100%;
  }
  
 
  
  /* Otobus body */
  .otobus-div, .seats-root {
    width: 310px;
  }
  
  /* Koltuk kolonları dikey */
  .seats-cols {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
    justify-content: center;
    width: 100%;
  }
  
  /* Her kolon yukarıdan aşağı */
  .seat-column {
    display: flex !important;
    flex-direction: column !important;
    gap: 5px !important;
  }
  
  /* Direksiyon en üstte sola yaslanacak */
  .bus-driver {
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    align-self: flex-start;
    margin-bottom: 15px;
    margin-left: 10px;
  }
  
  /* Koltuk sıralarını dikey yap */
  .bus-seats-rows {
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
  }
  
  /* Her sıra yatay kalacak ama tüm sıralar yukarıdan aşağı */
  .bus-seat-row, .seat-row {
    display: flex;
    flex-direction: row;
    gap: 5px;
    justify-content: center;
  }
  
  .bus-seat, .koltuk-card {
    width: 36px !important;
    height: 36px !important;
    font-size: 10px !important;
    border-radius: 8px !important;
  }
  
  .koltuk-spacer {
    width: 36px !important;
    height: 36px !important;
  }
  
  .bus-door{width:36px;height:36px;font-size:18px;}
  .seat-spacer{width:16px;height:36px;}
  .steering-wheel{width:35px;height:35px;}
  .driver-icon{font-size:20px;}
}


/* ============================================
   GENDER MODAL
   ============================================ */
.bus-gender-modal{
  display:none;position:fixed;z-index:1000;left:0;top:0;width:100%;height:100%;background:rgba(0,0,0,.6);justify-content:center;align-items:center;backdrop-filter:blur(5px);
}
.bus-gender-modal .modal-content{
  background:var(--white-color);padding:40px;border-radius:16px;text-align:center;width:90%;max-width:450px;box-shadow:0 10px 30px rgba(0,0,0,.1);position:relative;
}
.bus-gender-modal .modal-close-btn{
  position:absolute;top:15px;right:15px;background:transparent;border:none;font-size:32px;color:#999;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s;line-height:1;
}
.bus-gender-modal .modal-close-btn:hover{background:#f0f0f0;color:#333;}
.bus-gender-modal .modal-title{font-size:1.8rem;font-weight:700;margin-bottom:10px;}
.bus-gender-modal .modal-subtitle{color:var(--secondary-color);margin-bottom:30px;}
.bus-gender-options{display:flex;justify-content:center;gap:20px;}
.bus-gender-option{display:flex;flex-direction:column;align-items:center;gap:15px;padding:30px;border:2px solid var(--border-color);border-radius:12px;cursor:pointer;transition:all .2s;width:150px;position:relative;}
.bus-gender-option:hover{border-color:var(--primary-color);background:#f8f9fa;}
.bus-gender-option svg{width:60px;height:60px;color:var(--primary-color);}
.bus-gender-option span{font-weight:600;}

/* Kadın ikonu için */
.bus-gender-option[data-gender="female"]::before {
    content: '';
    width: 80px;
    height: 80px;
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23e91e8c" height="800px" width="800px" version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><g><g><path d="M256,0C114.837,0,0,114.837,0,256s114.837,256,256,256s256-114.837,256-256S397.163,0,256,0z M389.931,448.427l-54.485-18.176l-4.352-17.387c52.928-9.003,80.235-24.896,81.429-25.6c3.029-1.771,4.907-4.992,5.163-8.491c0.256-3.499-1.323-6.955-4.053-9.131c-0.363-0.277-36.16-29.931-36.16-132.587c0-87.296-20.523-131.563-61.035-131.563h-5.717c-14.464-13.973-25.451-20.16-54.72-20.16c-38.059,0-121.472,38.208-121.472,151.701c0,102.656-35.797,132.309-36.032,132.501c-2.837,2.133-4.437,5.525-4.267,9.067c0.192,3.563,2.112,6.763,5.163,8.597c1.195,0.725,28.224,16.683,81.493,25.685l-4.331,17.344l-54.485,18.176C61.269,405.973,21.333,335.616,21.333,256c0-129.387,105.28-234.667,234.667-234.667S490.667,126.613,490.667,256C490.667,335.616,450.731,405.973,389.931,448.427z"/></g></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.bus-gender-option[data-gender="female"] svg {
    display: none;
}

/* Erkek ikonu için */
.bus-gender-option[data-gender="male"]::before {
    content: '';
    width: 80px;
    height: 80px;
    background-image: url('data:image/svg+xml;utf8,<svg width="800px" height="800px" viewBox="0 0 21 21" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd" stroke="%2364b5f6" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" transform="translate(2 2)"><circle cx="8.5" cy="8.5" r="8"/><path d="m14.5 13.5c-.6615287-2.2735217-3.1995581-3.0251263-6-3.0251263-2.72749327 0-5.27073171.8688092-6 3.0251263"/><path d="m8.5 2.5c1.6568542 0 3 1.34314575 3 3v2c0 1.65685425-1.3431458 3-3 3-1.65685425 0-3-1.34314575-3-3v-2c0-1.65685425 1.34314575-3 3-3z"/></g></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    display: block;
}

.bus-gender-option[data-gender="male"] svg {
    display: none;
}

/* ============================================
   SON KİLİT (her şeyi ezer)
   ============================================ */
/* Desktop (>=769): grid açık, columns kapalı */


.gender-modal-loader {
                position: absolute;
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                background: rgba(255,255,255,0.95);
    display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                gap: 16px;
                z-index: 10;
                border-radius: 16px;
            }

            .gender-modal-loader .spinner {
                width: 50px;
                height: 50px;
                border: 5px solid #f3f3f3;
                border-top: 5px solid #d53333;
                border-radius: 50%;
                animation: spin 0.8s linear infinite;
            }

            .gender-modal-loader p {
                color: #333;
                font-size: 15px;
                font-weight: 500;
                margin: 0;
                text-align: center;
            }

            @keyframes slideInRight {
                from {
                    transform: translateX(100%);
                    opacity: 0;
                }
                to {
                    transform: translateX(0);
                    opacity: 1;
                }
            }

      @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
      }

/* ============================================
   OVERRIDE: RESİMDE OLDUĞU GİBİ TURUNCU UYARI
   ============================================ */
.bus-warning-message {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 20px !important;
  border-radius: 0 !important;
  font-size: 0.9rem !important;
  font-weight: 500 !important;
  color: #fff !important;
  background: #ff9800 !important;
  border: none !important;
  border-left: none !important;
  box-shadow: none !important;
  line-height: 1.4 !important;
  text-align: center !important;
}

.bus-warning-message:hover {
  background: #ff9800 !important;
  box-shadow: none !important;
  transform: none !important;
}

.bus-warning-message::before {
  content: "⚠" !important;
  position: relative !important;
  left: 0 !important;
  top: 0 !important;
  transform: none !important;
  font-size: 1rem !important;
  opacity: 1 !important;
  color: #fff !important;
}

/* ============================================
   SEFER BİLGİLERİ - MİNİMALİST KOMPAKT TASARIM
   ============================================ */
/* Sefer bilgileri tab içeriği */
.bus-tab-content[data-tab-content="trip-info"] {
  padding: 0 !important;
  margin: 0 !important;
  max-height: none !important;
  overflow-y: visible !important;
}

/* Güzergah başlığı - çok küçük */
.bus-trip-details-section h3,
h3:contains("GÜZERGAH BİLGİLERİ") {
  font-size: 11px !important;
  font-weight: 700 !important;
  color: #666 !important;
  margin: 0 !important;
  padding: 8px 12px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  border-top: none !important;
  background: #fafafa !important;
  text-transform: uppercase !important;
  letter-spacing: 0.8px !important;
}

/* Durak tablosu - kompakt */
.stops-table {
  width: 100% !important;
  border: none !important;
  margin: 0 !important;
  background: #fff !important;
}

.stops-table table {
  width: 100% !important;
  border-collapse: collapse !important;
}

/* Tablo başlıkları - daha küçük */
.stops-table thead {
  background: #f5f5f5 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 10 !important;
}

.stops-table thead th {
  padding: 6px 10px !important;
  text-align: left !important;
  font-size: 0.65rem !important;
  font-weight: 600 !important;
  color: #888 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  background: #f5f5f5 !important;
  border-bottom: 1px solid #e0e0e0 !important;
}

/* Tablo satırları - çok kompakt */
.stops-table tbody tr {
  border-bottom: 1px solid #f0f0f0 !important;
  background: #fff !important;
  transition: background 0.1s ease !important;
}

.stops-table tbody tr:hover {
  background: #fafafa !important;
}

.stops-table tbody tr:last-child {
  border-bottom: none !important;
}

.stops-table tbody td {
  padding: 7px 10px !important;
  font-size: 0.8rem !important;
  color: #444 !important;
  line-height: 1.3 !important;
}

/* Durak bilgileri - minimal */
.stops-table .stop-name {
  font-weight: 500 !important;
  color: #333 !important;
  font-size: 0.8rem !important;
}

.stops-table .stop-time {
  color: #777 !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
}

/* İlk ve son durak vurgularını hafiflet */
.stops-table .first-stop td {
  background: rgba(76, 175, 80, 0.08) !important;
  font-weight: 500 !important;
}

.stops-table .first-stop .stop-name {
  color: #4caf50 !important;
  font-weight: 600 !important;
}

.stops-table .last-stop td {
  background: rgba(244, 67, 54, 0.08) !important;
  font-weight: 500 !important;
}

.stops-table .last-stop .stop-name {
  color: #f44336 !important;
  font-weight: 600 !important;
}

/* Scrollbar stili - kompakt */
.bus-tab-content[data-tab-content="trip-info"]::-webkit-scrollbar {
  width: 6px !important;
}

.bus-tab-content[data-tab-content="trip-info"]::-webkit-scrollbar-track {
  background: #f5f5f5 !important;
}

.bus-tab-content[data-tab-content="trip-info"]::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 3px !important;
}

.bus-tab-content[data-tab-content="trip-info"]::-webkit-scrollbar-thumb:hover {
  background: #999 !important;
}

/* Mobil Responsive Düzeltmeler */
@media (max-width: 768px) {
  .bus-booking-wrapper {
    padding: 10px 0;
  }
  
  .bus-header-nav {
    flex-wrap: nowrap;
    padding: 15px 10px;
    gap: 5px;
    overflow-x: auto;
    justify-content: flex-start;
  }
  
  .bus-nav-item {
    flex: 0 0 auto;
    min-width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }
  
  .bus-nav-text {
    font-size: 10px;
    white-space: nowrap;
    display: block !important;
  }
  
  .bus-nav-number {
    width: 28px;
    height: 28px;
    font-size: 13px;
    margin-right: 0;
  }
  
  .bus-nav-connector {
    flex: 0 0 15px;
    margin: 0 2px;
    align-self: center;
    margin-top: -20px;
  }
  
  .bus-trip-header-card {
    flex-direction: column;
    gap: 10px;
    padding: 15px;
  }
  
  .bus-route {
    font-size: 16px;
  }
  
  .bus-change-route-btn {
    width: 100%;
  }
  
  .bus-route-change-form {
    padding: 20px 15px;
  }
  
  /* Konum simgelerini küçült */
  .bus-route-change-form .mobile-label-icon,
  .bus-route-change-form svg,
  .route-change-stations svg {
    width: 10px !important;
    height: 10px !important;
    max-width: 10px !important;
    max-height: 10px !important;
  }
  
  .bus-route-change-form .form-row {
    flex-direction: column;
    gap: 15px;
  }
  
  .bus-route-change-form .form-group {
    width: 100%;
    max-width: 100%;
  }
  
  .bus-date-selection {
    padding: 10px 5px;
    gap: 5px;
  }
  
  .bus-date-items {
    gap: 5px;
    padding: 0 5px;
  }
  
  .bus-date-item {
    min-width: 80px;
    padding: 10px 8px;
  }
  
  .bus-date-day {
    font-size: 11px;
  }
  
  .bus-date-full {
    font-size: 13px;
  }
  
  .bus-trip-table {
    gap: 10px;
  }
  
  .bus-trip-card {
    flex-direction: column;
    padding: 15px;
  }
  
  .bus-trip-left,
  .bus-trip-center,
  .bus-trip-right {
    width: 100%;
    max-width: 100%;
    border-right: none;
    padding: 10px 0;
  }
  
  .bus-trip-left {
    border-bottom: 1px solid #eee;
  }
  
  .bus-trip-center {
    border-bottom: 1px solid #eee;
  }
}

/* Geri butonu uyarı modalı */
.back-warning-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.back-warning-modal {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
}

@keyframes slideUp {
  from { transform: translateY(20px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

.back-warning-header {
  padding: 24px 24px 16px;
  border-bottom: 1px solid #eee;
}

.back-warning-header h3 {
  margin: 0;
  font-size: 20px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.back-warning-body {
  padding: 24px;
}

.back-warning-body p {
  margin: 0 0 12px 0;
  font-size: 15px;
  color: #555;
  line-height: 1.5;
}

.back-warning-body p:last-child {
  margin-bottom: 0;
  font-weight: 500;
  color: #333;
}

.back-warning-footer {
  padding: 16px 24px 24px;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}

.back-warning-footer button {
  padding: 10px 24px;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-back-cancel {
  background: #f0f0f0;
  color: #333;
}

.btn-back-cancel:hover {
  background: #e0e0e0;
}

.btn-back-confirm {
  background: #dc3545;
  color: white;
}

.btn-back-confirm:hover {
  background: #c82333;
}

@media (max-width: 600px) {
  .back-warning-modal {
    width: 95%;
  }
  
  .back-warning-header,
  .back-warning-body,
  .back-warning-footer {
    padding: 16px;
  }
  
  .back-warning-footer {
    flex-direction: column-reverse;
  }
  
  .back-warning-footer button {
    width: 100%;
  }
}
  
  .bus-trip-time-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  
  .bus-trip-time-col {
    width: 100%;
  }
  
  .bus-trip-details-row {
    flex-direction: column;
    gap: 10px;
  }
  
  .bus-trip-details-row > div {
    width: 100%;
  }
  
  .bus-select-seat-btn {
    width: 100%;
    padding: 12px 20px;
  }
}

@media (max-width: 479px) {
  .bus-nav-item {
    min-width: 70px;
  }
  
  .bus-nav-text {
    font-size: 10px;
  }
  
  .bus-nav-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }
  
  .bus-trip-card {
    padding: 12px;
  }
  
  .bus-date-item {
    min-width: 70px;
    padding: 8px 6px;
  }
}

/* Mobile Bottom Navigation için padding */
@media (max-width: 768px) {
  .bus-booking-wrapper {
    padding-bottom: 110px !important;
  }
  
  .journey-container {
    padding-bottom: 110px !important;
  }
  
  .seats-selection-container {
    padding-bottom: 110px !important;
  }
}