@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@400;500;700&display=swap');

 /* --- Luxury redesign: transfer details & vehicle cards --- */
 :root {
     --lux-bg: #ffffff;
     --lux-ink: #0f172a;
     --lux-muted: #6b7280;
     --lux-gold-start: #e5c07b;
     --lux-gold-end: #fbbf24;
     --card-radius: 12px;
 }

 /* Sayfa arkaplanı */
 html,
 body {
     background-color: #f8f8f8ff !important;
     min-height: 100%;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     font-family: 'Quicksand', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial;
     font-weight: 400
 }

 /* Opsiyonel: içerik kartlarının arkaplanı sayfa arkaplanıyla kontrastlı kalsın */
 .container,
 .checkout-page {
     background: transparent !important;
 }

 .compact-row input,
 .compact-row textarea {
     padding: 8px 18px !important;
     font-size: 13px !important;
     line-height: 1.5 !important;
 }

 /* Mobilde dikey boşluğu azaltmak için kompakt ayarlar */
 @media (max-width: 768px) {
     .compact-row {
         margin-top: -8px !important;
     }

     .compact-row .form-inner.two.mb-25 {
         margin-bottom: 16px !important;
     }

     .compact-row .form-inner2 {
         margin-bottom: 6px !important;
     }

     .compact-row .form-check {
         margin-bottom: 4px !important;
     }

     .compact-row input,
     .compact-row textarea {
         padding: 8px 18px !important;
         font-size: 14px !important;
         line-height: 1.5 !important;
     }

     .compact-row h6 {
         margin: 8px 0 !important;
         font-size: 0.98rem !important;
     }

     .compact-row label {
         font-size: 0.95rem !important;
     }
 }

 /* Stepper visuals */
 .step-circle {
     width: 38px;
     height: 38px;
     border: 2px solid rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.15rem;
     background: transparent;
     color: #fff;
     transition: all .18s ease;
 }

 .step-circle.active {
     background: linear-gradient(135deg, #02b629, #019e48);
     border-color: #02b629;
     color: #fff;
     box-shadow: 0 6px 18px rgba(2, 182, 41, 0.16);
     transform: translateY(-1px);
 }

 .stepper-label {
     font-size: 1.08rem;
     color: rgba(255, 255, 255, 0.95);
     font-weight: 500;
     transition: color .18s ease, opacity .18s ease;
 }

 .stepper-label.dim {
     color: rgba(255, 255, 255, 0.62);
     opacity: 0.9;
 }

 .stepper-label.active-label {
     color: #fff;
     font-weight: 600;
 }

 .connector {
     width: 80px;
     height: 2px;
     background: #fff;
     transition: opacity .18s ease;
 }

 .connector.strong {
     opacity: 0.85;
 }

 .connector.dim {
     opacity: 0.34;
     background: #fff;
 }

 @media (max-width: 600px) {

     .stepper-wrapper div[style*="gap:12px;"],
     .stepper-wrapper div[style*="gap:32px;"] {
         gap: 6px !important;
         align-items: center !important;
     }

     /* show only second label on mobile */
     .stepper-label-1,
     .stepper-label-3 {
         display: none !important;
     }

     .stepper-label-2 {
         display: inline-block !important;
         font-size: 0.95rem !important;
         font-weight: 700 !important;
         color: #fff !important;
     }

     /* shrink the round step circles */
     .step-circle {
         width: 28px !important;
         height: 28px !important;
         font-size: 0.95rem !important;
         line-height: 28px !important;
         border-width: 1.4px !important;
     }

     /* shorten the connecting lines between steps */
     .connector {
         width: 36px !important;
         min-width: 36px !important;
         max-width: 36px !important;
         height: 2px !important;
         opacity: 0.6 !important;
         background: #fff !important;
     }

     /* ensure labels inside compact structure scale */
     .stepper-wrapper div[style*="gap:12px;"]>div,
     .stepper-wrapper div[style*="gap:12px;"] .stepper-label {
         font-size: 0.92rem !important;
         color: #fff !important;
     }
 }

 /* required dot inside inputs (like provided image) */
 .req-wrap {
     position: relative;
 }

 .req-wrap input,
 .req-wrap textarea,
 .req-wrap select {
     padding-right: 44px;
     /* space for the dot */
 }

 .req-dot {
     position: absolute;
     right: 12px;
     top: 50%;
     transform: translateY(-50%);
     width: 7px;
     height: 7px;
     opacity: 0.50;
     border-radius: 50%;
     background: #ff0400ff;
     /* kırmızı nokta varsayılan */
     pointer-events: none;
     transition: background-color .18s ease, transform .12s ease;
 }

 .req-dot.valid {
     background: #02b629;
     /* yeşil oldu */
 }

 /* slightly smaller on very small screens */
 @media (max-width: 420px) {
     .req-dot {
         right: 11px;
         width: 7px;
         height: 7px;
     }
 }

 .kalin::placeholder,
 textarea.kalin::placeholder,
 .yolcu-adsoyad::placeholder {
     font-weight: 500 !important;
 }

 /* Make selects and their options use the same weight (selects don't have ::placeholder) */
 select,
 select.form-select,
 select.kalin,
 select.form-select option,
 select.kalin option {
     font-weight: 500 !important;
 }

 /* Ensure textarea text also appears bold when typed */
 textarea,
 textarea.kalin {
     font-weight: 500 !important;
 }

 .yolcu-row {
     margin-bottom: 10px !important;
 }

 /* Mobilde yolcu satırları arasında dikey boşluk bırak */
 @media (max-width: 768px) {
     .yolcu-row {
         margin-bottom: 13px !important;
     }

 }

 @media (max-width:768px) {
     .yolcu-adsoyad::placeholder {
         font-size: 11px !important;
     }

     .yolcu-adsoyad::-webkit-input-placeholder {
         font-size: 11px !important;
     }

     .yolcu-adsoyad::-moz-placeholder {
         font-size: 11px !important;
     }

     .yolcu-adsoyad:-ms-input-placeholder {
         font-size: 11px !important;
     }

     .yolcu-adsoyad::-ms-input-placeholder {
         font-size: 11px !important;
     }
 }

 /* Card grid like the provided image */
 .ek-hizmet-grid {
     display: flex;
     flex-wrap: wrap;
     gap: 14px;
     margin-top: 12px;
 }

 .ek-hizmet-card {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 12px;
     width: calc(50% - 7px);
     min-height: 78px;
     padding: 4px 14px 4px 14px;
     border-radius: 9px;
     border: 2px solid rgba(0, 0, 0, 0.06);
     background: #fff;
     cursor: pointer;
     transition: all .16s ease;
     position: relative;
 }

 .ek-hizmet-card:hover {
     box-shadow: 0 8px 20px rgba(2, 6, 23, 0.04);
     transform: translateY(-1px);
 }

 .ek-hizmet-card .left {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .ek-hizmet-card .icon {
     width: 42px;
     height: 42px;
     border-radius: 8px;
     display: flex;
     align-items: center;
     justify-content: center;
     background: #f7faf7;
     color: #02b629;
     font-size: 20px;
 }

 .ek-hizmet-card .title {
     font-weight: 600;
     color: #0f172a;
 }

 .ek-hizmet-card .desc {
     font-size: 12px;
     line-height: 1.50;
     /* satır yüksekliğini ayarlar */
     color: rgba(15, 23, 42, 0.6);
     width: 100%;
 }

 .ek-hizmet-card .price {
     font-weight: 700;
     font-size: 1.1rem;
     color: #0f172a;
     min-width: 48px;
     text-align: right;
     margin-top: 5px;
 }

 .ek-hizmet-card .badge-cc {
     position: absolute;
     left: 14px;
     top: 8px;
     background: #ffeef0;
     color: #d23a4a;
     padding: 4px 8px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
 }

 /* Selected state */
 .ek-hizmet-card.selected {
     border-color: #02b629;
 }

 .ek-hizmet-card .checkmark {
     width: 17px;
     height: 17px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 2px solid rgba(0, 0, 0, 0.06);
     position: absolute;
     right: 12px;
     top: 7px;
     background: #fff;
     transition: all .16s ease;
     /* unchecked (faded) state */
     opacity: 0.45;
     color: rgba(15, 23, 42, 0.45);
 }

 .ek-hizmet-card.selected .checkmark {
     background: linear-gradient(135deg, #02b629, #019e48);
     color: #fff;
     border-color: transparent;
     opacity: 1;
 }

 /* responsive */
 @media (max-width: 768px) {
     .ek-hizmet-card {
         width: 100%;
     }
 }

 /* hide real checkboxes */
 .ek-hizmet-input {
     position: absolute;
     left: -9999px;
 }

 /* Lux payment styles */
 .lux-payment-grid {
     display: flex;
     gap: 12px;
     align-items: stretch;
     flex-wrap: wrap;
 }

 .lux-payment-option {
     flex: 1 1 48%;
     min-width: 200px;
     background: linear-gradient(180deg, rgba(255, 255, 255, 0.65), rgba(255, 255, 255, 0.48));
     border-radius: 12px;
     padding: 14px;
     display: flex;
     align-items: center;
     gap: 12px;
     position: relative;
     cursor: pointer;
     transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
     border: 2px solid #efefefff;
     backdrop-filter: blur(6px) saturate(120%);
 }

 .lux-payment-option:hover {
     box-shadow: 0 10px 10px rgba(2, 6, 23, 0.06);
 }

 .lux-payment-option.selected {
     border: 1px solid rgba(212, 175, 55, 0.9);

 }

 .lux-icon {
     width: 56px;
     height: 56px;
     border-radius: 10px;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
     background: linear-gradient(135deg, rgba(2, 6, 23, 0.03), rgba(2, 6, 23, 0.01));
     box-shadow: inset 0 -6px 16px rgba(2, 6, 23, 0.02);
 }

 .lux-meta {
     flex: 1;
 }

 .lux-title {
     font-weight: 700;
     color: #081022;
     font-size: 1rem;
     margin-bottom: 4px;
 }

 .lux-desc {
     color: rgba(11, 18, 32, 0.55);
     font-size: 0.8rem;
     line-height: 1.4;
     width: 110%;
 }

 .lux-check {
     width: 20px;
     height: 20px;
     border-radius: 999px;
     display: flex;
     align-items: center;
     justify-content: center;
     right: 12px;
     top: 12px;
     background: linear-gradient(180deg, #fff, #fff0);
     border: 1px solid rgba(2, 6, 23, 0.06);
     box-shadow: 0 6px 18px rgba(2, 6, 23, 0.06);
     transition: transform .14s ease, background .14s ease, box-shadow .14s ease;
 }

 .lux-payment-option.selected .lux-check {
     background: linear-gradient(135deg, #D4AF37, #f3d68a);
     color: #081022;
     transform: scale(1.06);
     box-shadow: 0 10px 30px rgba(212, 175, 55, 0.12);
 }

 /* visually hide native radios but keep them accessible and focusable */
 .lux-payment-input {
     position: absolute;
     opacity: 0;
     width: 1px;
     height: 1px;
     margin: 0;
     padding: 0;
     border: 0;
     clip: rect(0 0 0 0);
     clip-path: inset(50%);
     overflow: hidden;
 }

 /* Fancy submit */
 .lux-submit {
     margin-top: 18px;
     width: 100%;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     padding: 14px 18px;
     border-radius: 12px;
     font-weight: 800;
     font-size: 1rem;
     color: #081022;
     background: linear-gradient(90deg, rgba(212, 175, 55, 0.98), rgba(255, 224, 134, 0.95));
     border: none;
     cursor: pointer;
     box-shadow: 0 14px 40px rgba(212, 175, 55, 0.12), inset 0 -6px 16px rgba(255, 255, 255, 0.18);
     transition: transform .12s ease, box-shadow .12s ease;
     overflow: hidden;
 }

 .lux-submit:active {
     transform: translateY(2px);
 }

 .lux-submit .label {
     display: inline-block;
     transform: translateY(-1px);
 }

 /* small note */
 .lux-note {
     margin-top: 10px;
     font-size: 0.86rem;
     color: rgba(11, 18, 32, 0.52);
 }

 @media (max-width:768px) {
     .lux-payment-grid {
         flex-direction: column;
     }
 }

 /* hafif koyulaştırma ve küçük yükselme efekti hover için */
 .lux-submit:hover {
     filter: brightness(0.92);
     transform: translateY(-1px);
     box-shadow: 0 18px 44px rgba(212, 175, 55, 0.18);
 }

 .lux-submit:active {
     transform: translateY(2px);
 }

 /* Ödeme detayı kartını sticky yapmak için */
 .sticky-card {
     position: -webkit-sticky;
     position: sticky;

     top: 100px;
     /* İhtiyaca göre ayarla (header yüksekliğine göre) */
     z-index: 20;
 }

 /* Mobilde sticky olmasını istemezsek */
 @media (max-width: 992px) {
     .sticky-card {
         position: static;
         top: auto;
     }
 }

 /* Transfer details card */
 .transfer-card-lux {
     border-radius: var(--card-radius);
     overflow: hidden;
     background: linear-gradient(180deg, #ffffff, #fcfcfd);
     border: 2px solid rgba(15, 23, 42, 0.04);
     box-shadow: 0 18px 40px rgba(11, 20, 40, 0.06);
 }

 .transfer-hero-lux {
     display: flex;
     align-items: center;
     gap: 12px;
     padding: 14px;
     background: transparent
 }

 .hero-icon {
     width: 56px;
     height: 56px;
     border-radius: 10px;
     background: linear-gradient(135deg, rgba(245, 240, 230, 0.9), rgba(255, 250, 240, 0.85));
     display: flex;
     align-items: center;
     justify-content: center;
     border: 1px solid rgba(229, 192, 123, 0.1)
 }

 .hero-text h4 {
     margin: 0;
     font-size: 1rem;
     color: var(--lux-ink);
     font-weight: 700
 }

 .hero-text .subtitle {
     font-size: 0.78rem;
     color: var(--lux-muted);
     margin-top: 4px
 }

 .gold-underline {
     height: 4px;
     width: 56px;
     border-radius: 4px;
     background: linear-gradient(90deg, var(--lux-gold-start), var(--lux-gold-end));
     margin-top: 8px
 }

 .transfer-body-lux {
     padding: 12px 16px;
     color: var(--lux-ink);

 }

 .transfer-body-lux dl {
     margin: 0
 }

 .transfer-body-lux .row-item {
     display: flex;
     flex-direction: column;
     padding: 10px 0;
     border-bottom: 1px solid rgba(15, 23, 42, 0.03)
 }

 .transfer-body-lux .row-item:last-child {
     border-bottom: none
 }

 .transfer-body-lux dt {
     font-size: 0.64rem;
     color: var(--lux-muted);
     font-weight: 700;
     text-transform: uppercase;
     letter-spacing: 0.5px;
     margin-bottom: 4px
 }

 .transfer-body-lux dd {
     font-size: 0.98rem;
     color: var(--lux-ink);
     font-weight: 700;
     margin: 0
 }

 .transfer-body-lux .muted {
     color: var(--lux-muted);
     font-weight: 600;
     font-size: 0.86rem
 }

 .res-value {
     margin-top: -3px;
     font-size: 0.85rem;
     color: var(--lux-ink);
     font-weight: 600;
     line-height: 1.45;
     white-space: normal;
     word-break: break-word;
 }

 .res-list {
     list-style: none;
     padding: 0;
     margin: 0
 }

 .res-list li {
     display: flex;
     align-items: center;
     gap: 7px;
     padding: 5px 0;
     border-bottom: 1px solid rgba(15, 23, 42, 0.03)
 }

 .res-list li:last-child {
     border-bottom: none
 }

 .res-icon {
     width: 20px;
     height: 20px;
     flex: 0 0 24px;
     color: var(--lux-muted);
     opacity: 0.95;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     vertical-align: middle;
 }

 /* Ensure SVG shapes inherit the current text color for stroke and reset unwanted fills */
 .res-icon path,
 .res-icon circle,
 .res-icon rect,
 .res-icon line,
 .res-icon polyline,
 .res-icon polygon {
     stroke: currentColor;
     fill: none;
 }

 .res-item-label {
     font-size: 0.85rem;
     flex: 1;
     color: var(--lux-muted);
     font-weight: 600
 }

 .res-item-value {
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--lux-ink)
 }

 @media (max-width: 992px) {
     .payment-summary-desktop {
         display: none !important;
     }

     .payment-summary-mobile-bar {
         display: block !important;
     }
 }

 @media (min-width: 993px) {
     .payment-summary-desktop {
         display: block !important;
     }

     .payment-summary-mobile-bar {
         display: none !important;
     }
 }

 .mobile-total-bar {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 9999;
     background: #fff;
     box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.12);
     padding: 12px 0 10px 0;
     display: flex;
     align-items: center;
     justify-content: space-between;
     border-radius: 18px 18px 0 0;
 }

 .mobile-total-menu {
     position: fixed;
     left: 0;
     right: 0;
     bottom: 0;
     z-index: 10000;
     background: transparent;
 }

 /* Stepper visuals */
 .step-circle {
     width: 38px;
     height: 38px;
     border: 2px solid rgba(255, 255, 255, 0.9);
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.15rem;
     background: transparent;
     color: #fff;
     transition: all .18s ease;
 }

 .step-circle.active {
     background: linear-gradient(135deg, #02b629, #019e48);
     border-color: #02b629;
     color: #fff;
     box-shadow: 0 6px 18px rgba(2, 182, 41, 0.16);
     transform: translateY(-1px);
 }

 .stepper-label {
     font-size: 1.08rem;
     color: rgba(255, 255, 255, 0.95);
     font-weight: 500;
     transition: color .18s ease, opacity .18s ease;
 }

 .stepper-label.dim {
     color: rgba(255, 255, 255, 0.62);
     opacity: 0.9;
 }

 .stepper-label.active-label {
     color: #fff;
     font-weight: 600;
 }

 .connector {
     width: 80px;
     height: 2px;
     background: #fff;
     transition: opacity .18s ease;
 }

 .connector.strong {
     opacity: 0.85;
 }

 .connector.dim {
     opacity: 0.34;
     background: #fff;
 }

 

 /* Satır taşmasını engelle, mobilde yazıyı küçült */
 @media (max-width: 600px) {
     .currency-info-row {
         font-size: 0.75rem !important;
         margin-top: -15px;
     }
 }

 .vehicle-list-modern {
     display: flex;
     flex-direction: column;
     gap: 24px;
     margin-bottom: 32px;
 }

 .vehicle-modern-card {
     display: flex;
     background: #fff;
     border-radius: 10px;
     box-shadow: 0 5px 12px rgba(34, 34, 34, 0.08);
     overflow: hidden;
     align-items: stretch;
     border: 2px solid #f3f3f3ff;
 }

 .vehicle-modern-img {
     width: 220px;
     min-width: 180px;
     height: 140px;
     background-size: cover;
     background-position: center;
     border-radius: 10px;
     margin: 18px 0 18px 18px;
     flex-shrink: 0;
 }

 .vehicle-modern-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     justify-content: center;
     padding: 18px 24px 18px 24px;
 }

 .vehicle-modern-row {
     display: flex;
     align-items: center;
 }

 .vehicle-modern-row-top {
     justify-content: space-between;
     margin-bottom: 8px;
     margin-top: -8px;
 }

 .vehicle-modern-title {
     font-size: 1rem;
     font-weight: 700;
     color: #222;
 }

 .vehicle-modern-icons {
     display: flex;
     gap: 15px;
     font-weight: 600;
     color: #888;
 }

 .vehicle-modern-icon {
     display: flex;
     align-items: center;
     font-size: 0.8rem;
 }

 .vehicle-modern-row-features {
     gap: 10px;
     margin-bottom: 10px;
     flex-wrap: wrap;
 }

 .vehicle-modern-feature {
     font-size: 0.75rem;
     font-weight: 500;
     color: #888;
     background: #f7f7f7;
     border-radius: 5px;
     margin-top: -5px;
     margin-bottom: -5px;
     padding: 0px 7px 0px 7px;
     display: flex;
     align-items: center;
 }

 .vehicle-modern-row-bottom.vehicle-row-fullwidth {
     width: 100%;
     margin-top: 8px;
     padding: 0;
 }

 .vehicle-modern-bottom-flex {
     display: flex;
     flex-direction: row;
     align-items: stretch;
     width: 100%;
     gap: 0;
 }

 .currency-selector {
     flex: 1 1 0;
     gap: 0;
     margin: 0;
     border-radius: 0;
     padding: 0;
 }

 .currency-option {
     border-radius: 0;
     margin: 0;
     min-width: 0;
     flex: 1 1 0;
     box-shadow: none;
     border-right: 1px solid #e5e7eb;
     height: 44px;
     min-height: 40px;
     line-height: 1.1;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
 }

 .currency-selector {
     display: flex;
     gap: 8px;
     align-items: center;
     margin: 0 18px 0 0;
 }

 .currency-option {
     position: relative;
     padding: 10px 14px 8px 14px;
     border: 2px solid #e5e7eb;
     border-radius: 7px;
     background: #fff;
     cursor: pointer;
     min-width: 70px;
     text-align: center;
     font-size: 0.92rem;
     font-weight: 700;
     transition: border 0.20s, box-shadow 0.14s;
     box-shadow: 0 2px 8px rgba(34, 34, 34, 0.06);
     margin-bottom: 0;
 }

 .currency-option.active {
     border-color: #02b629ff;
     box-shadow: 0 8px 24px rgba(16, 185, 129, 0.10);
     color: #02b629ff;
 }

 .currency-option .old-price {
     display: block;
     font-size: 0.74rem;
     color: #888;
     text-decoration: line-through;
     margin-top: 1px;
     line-height: 1.1;
 }

 .currency-option .discount-badge {
     display: none;
 }

 .currency-option.active::before {
     content: '\2713';
     position: absolute;
     top: -5px;
     left: -5px;
     width: 18px;
     height: 18px;
     background: #02b629ff;
     color: #fff;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     font-weight: 800;
     box-shadow: 0 4px 12px rgba(16, 185, 129, 0.12);
     font-size: 12px;
 }

 .vehicle-modern-reserve {
     background: #03a167ff;
     color: #fff;
     border: none;
     border-radius: 10px;
     font-size: 0.7rem;
     font-weight: 700;
     padding: 0 15px;
     height: 42px;
     box-shadow: 0 2px 8px rgba(34, 34, 34, 0.10);
     cursor: pointer;
     transition: background 0.14s, box-shadow 0.14s;
     letter-spacing: 0.01em;
     display: flex;
     align-items: center;
 }

 .vehicle-modern-reserve:hover {
     background: #025b2eff;
 }

 @media (max-width: 900px) {
     .vehicle-modern-img {
         width: 120px;
         min-width: 90px;
         height: 80px;
         margin: 10px 0 10px 10px;
     }

     .vehicle-modern-content {
         padding: 10px 8px 10px 8px;
     }

     .vehicle-modern-pricebox {
         min-width: 70px;
         min-height: 32px;
         font-size: 0.98rem;
     }

     .vehicle-modern-row-bottom.vehicle-row-fullwidth {
         flex-direction: column;
     }

     .vehicle-modern-bottom-flex {
         flex-direction: column;
     }

     .currency-selector {
         flex-direction: row;
     }

     .vehicle-modern-reserve {
         width: 100%;
         border-radius: 0 0 10px 10px;
         min-width: 0;
     }
 }

 @media (max-width: 600px) {
     .vehicle-list-modern {
         gap: 12px;
     }

     .vehicle-modern-card {
         flex-direction: column;
         align-items: stretch;
         border-radius: 12px;
         box-shadow: 0 2px 8px rgba(34, 34, 34, 0.07);
         border: 1px solid #f0f0f0;
         overflow: hidden;
         background: #fff;
     }

     .vehicle-modern-img {
         width: 100%;
         min-width: 100%;
         height: 180px;
         margin: 0;
         border-radius: 0;
         border-bottom: 1px solid #f3f3f3;
         background-size: cover;
         background-position: center;
     }

     .vehicle-modern-content {
         padding: 12px 10px 10px 10px;
         display: flex;
         flex-direction: column;
         gap: 8px;
     }

     .vehicle-modern-row-top.responsive-top {
         flex-direction: row !important;
         align-items: center !important;
         justify-content: space-between !important;
         gap: 6px !important;
         width: 100%;
         margin-top: -7px;
     }

     .responsive-top .vehicle-modern-title {
         flex: 1 1 0;
         font-size: 0.85rem;
         font-weight: 700;
         color: #23234a;
         margin-bottom: 0;
         white-space: nowrap;
         text-overflow: ellipsis;
         overflow: hidden;
         text-align: left;
         min-width: 0;
     }

     .responsive-top .vehicle-modern-icons {
         flex: 0 0 auto;
         gap: 10px;
         font-size: 0.93rem;
         color: #666;
         margin-bottom: 0;
         justify-content: flex-end;
         min-width: 0;
         text-align: right;
     }

     .responsive-top .vehicle-modern-icon {
         font-size: 0.75rem !important;
         font-weight: 500;
         gap: 2px;
         white-space: nowrap;
     }

     .responsive-top svg {
         width: 17px !important;
         height: 17px !important;
         margin-right: 1px !important;
     }

     .vehicle-modern-row-features {
         gap: 5px;
         margin-bottom: 8px;
         flex-wrap: wrap;
         font-size: 0.91rem;
     }

     .vehicle-modern-feature {
         gap: 3px;
         font-size: 0.65rem;
         color: #888;
         background: #f7f7f7;
         border-radius: 4px;
         padding: 0px 8px 0px 8px;
         margin-bottom: 0px;
         margin-top: -10px;
         display: flex;
         align-items: center;
     }

     .vehicle-modern-row-bottom.vehicle-row-fullwidth {
         flex-direction: column;
         width: 100%;
         margin-top: 0px;
         padding: 0;
     }

     .vehicle-modern-bottom-flex {
         flex-direction: column;
         width: 100%;
         gap: 0;
     }

     .currency-selector {
         flex-direction: row;
         margin: 0 0 10px 0;
         gap: 8px;
         width: 100%;
     }

     .currency-option {
         font-size: 0.85rem;
         height: 40px;
         border-radius: 5px;
         border-width: 2px;
     }

     .vehicle-modern-reserve {
         display: block !important;
         width: calc(100% + 20px) !important;
         /* parent padding 10px each side için */
         margin: 0 -10px -10px -10px !important;
         /* sağdan soldan taşma ile kenara yapıştır, alttan da -10px ile sıfır boşluk */
         opacity: 0.85 !important;
         border-radius: 0 !important;
         box-sizing: border-box !important;
         text-align: center !important;
         border: none !important;

     }
 }

 @media (max-width: 600px) {
     .hide-mobile {
         display: none !important;
     }
 }

 /* Mobilde: label-1 gizle, label-2 görünür kıl */
 @media (max-width: 767px) {
     .stepper-label-1 {
         display: none !important;
     }

     .stepper-label-2 {
         display: inline-block !important;
     }
 }

 /* Masaüstünde (>=768px) çizgiler/aralarındaki boşluğu azalt */
 @media (min-width: 768px) {

     /* override inline gap on wrapper and iç div'leri sıkıştır */
     .stepper-wrapper>div {
         gap: 12px !important;
     }

     /* ana grup arası */
     .stepper-wrapper>div>div {
         gap: 8px !important;
     }

     /* daire ile etiket arası */

     /* connector (çizgi) alanını daralt */
     .stepper-wrapper .connector {
         margin: 0 !important;
         width: 65px !important;
     }

     /* etiketler satır tutmasın, tek satırda sıkışsın */
     .stepper-label {
         white-space: nowrap;
     }

     /* step daireleri/etiketlerin dış boşluklarını kaldır (gerekirse daha da küçültülebilir) */
     .step-circle {
         margin: 0 !important;
     }
 }

 /* Gallery slider styles */
 .vehicle-gallery-slider {
     position: relative;
     width: 220px;
     min-width: 180px;
     height: 130px;
     background-size: cover;
     background-position: center;
     border-radius: 10px;
     margin: 18px 0 18px 18px;
     flex-shrink: 0;
     cursor: grab;
     touch-action: pan-y pinch-zoom;
     user-select: none;
     -webkit-user-select: none;
 }

 .vehicle-gallery-slider .vehicle-slide {
     display: block;
     width: 220px;
     height: 135px;
     object-fit: cover;
     border-radius: 12px;
 }

 .vehicle-pagination {
     position: absolute;
     bottom: 10px;
     left: 0;
     right: 0;
     display: flex;
     justify-content: center;
     gap: 8px;
     z-index: 3;
     padding: 0 10px;
 }

 .vehicle-pagination-dot {
     width: 14px;
     height: 3px;
     background: rgba(255, 255, 255, 0.5);
     transition: all 0.3s;
     cursor: pointer;
     border-radius: 1px;
 }

 .vehicle-pagination-dot.active {
     background: #fff;
     width: 20px;
 }

 .vehicle-modern-thumbs {
     display: flex;
     gap: 8px;
     margin-top: 10px
 }

 .vehicle-thumb {
     width: 56px;
     height: 38px;
     object-fit: cover;
     border-radius: 8px;
     border: 2px solid #fff;
     box-shadow: 0 6px 18px rgba(15, 23, 42, 0.08);
     cursor: pointer;
     transition: transform .15s, box-shadow .15s, border-color .15s
 }

 .vehicle-thumb:hover {
     transform: translateY(-3px);
     box-shadow: 0 12px 24px rgba(15, 23, 42, 0.12)
 }

 .vehicle-thumb.active {
     border-color: #22c55e;
     box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14) inset
 }

 .veh-slide-prev,
 .veh-slide-next {
     background: rgba(255, 255, 255, 0.95);
     border: 1px solid rgba(0, 0, 0, 0.06);
     color: #111
 }

 @media (max-width: 768px) {
     .vehicle-gallery-slider {
         width: 100%;
         min-width: 100%;
         margin: 0;
         border-radius: 0;
         border-bottom: 1px solid #f3f3f3;
         background-size: cover;
         background-position: center;
     }

     .vehicle-gallery-slider .vehicle-slide {
         display: block;
         width: 100%;
         height: 100%;
         object-fit: cover;
         border-radius: 0px;
     }
 }

 @media (max-width: 600px) {

     /* Mobil için yazı boyutlarını küçült */
     #transfer-details {
         font-size: 13px;
     }

     #transfer-details .res-item-label {
         font-size: 12px;
     }

     #transfer-details .res-item-value,
     #transfer-details .res-value {
         font-size: 13px;
     }

     #transfer-details .res-list li {
         gap: 6px;
         line-height: 20px;
     }

     /* Gerektiğinde ikon ve boşlukları da küçült */
     #transfer-details i {
         font-size: 18px !important;
     }
 }