/* ============================================================
   CCN Tur Transfer · Frontend
   Uber/Lyft tarzı premium siyah-beyaz tema
   ============================================================ */

:root {
    /* Mono palette */
    --black:        #000000;
    --ink-900:      #0a0a0a;
    --ink-800:      #18181b;
    --ink-700:      #27272a;
    --ink-600:      #3f3f46;
    --ink-500:      #6b6b6b;
    --ink-400:      #a3a3a3;
    --ink-300:      #c2c2c0;
    --ink-200:      #e7e5e4;
    --ink-100:      #f5f5f4;
    --ink-50:       #fafaf9;
    --white:        #ffffff;

    /* Semantic */
    --bg:           var(--white);
    --bg-soft:      var(--ink-50);
    --surface:      var(--white);
    --surface-2:    var(--ink-100);
    --border:       var(--ink-200);
    --text:         var(--ink-900);
    --text-soft:    var(--ink-500);
    --text-muted:   var(--ink-400);
    --primary:      var(--ink-900);
    --primary-hover: var(--ink-700);

    /* Layout */
    --container:    1200px;
    --radius-sm:    8px;
    --radius:       12px;
    --radius-lg:    20px;
    --radius-pill:  9999px;
    --shadow-sm:    0 1px 2px rgba(0, 0, 0, 0.04);
    --shadow:       0 8px 24px rgba(0, 0, 0, 0.06);
    --shadow-lg:    0 24px 48px rgba(0, 0, 0, 0.10);

    /* Type */
    --font-sans:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* === Reset === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: none; background: none; }
a { color: inherit; text-decoration: none; }
input, textarea, select { font: inherit; color: inherit; }
ul { list-style: none; }

/* === Container === */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

/* === Buttons === */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.875rem; font-weight: 500;
    border-radius: var(--radius-pill);
    transition: background .15s, color .15s, border-color .15s, transform .05s;
    border: 1px solid transparent;
    white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn svg { width: 18px; height: 18px; }

.btn-primary {
    background: var(--ink-900); color: var(--white);
}
.btn-primary:hover { background: var(--ink-700); }

.btn-secondary {
    background: var(--white); color: var(--ink-900);
    border-color: var(--border);
}
.btn-secondary:hover { background: var(--ink-100); }

.btn-ghost {
    background: transparent; color: var(--ink-700);
}
.btn-ghost:hover { background: var(--ink-100); }

.btn-lg { padding: 0.875rem 1.75rem; font-size: 0.9375rem; }
.btn-icon-only {
    width: 40px; height: 40px; padding: 0;
    border-radius: var(--radius-pill);
}

/* === Header === */
.header {
    position: sticky; top: 0; z-index: 50;
    background: var(--white);
    border-bottom: 1px solid var(--border);
    backdrop-filter: saturate(180%) blur(8px);
    -webkit-backdrop-filter: saturate(180%) blur(8px);
}
.header-inner {
    height: 72px;
    display: flex; align-items: center; gap: 2rem;
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.brand {
    display: flex; align-items: center; gap: 0.75rem;
    text-decoration: none; color: var(--ink-900);
    font-weight: 800; letter-spacing: 0.02em;
    flex-shrink: 0;
}
.brand-mark {
    width: 36px; height: 36px; border-radius: 10px;
    background: var(--ink-900); color: var(--white);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.brand-name { font-size: 1.125rem; font-weight: 800; letter-spacing: 0.04em; }

.nav {
    display: flex; align-items: center; gap: 1.75rem;
    flex: 1;
}
.nav a {
    font-size: 0.9375rem; font-weight: 500; color: var(--ink-700);
    transition: color .15s;
    padding: 0.5rem 0;
    position: relative;
}
.nav a:hover { color: var(--ink-900); }
.nav a.active { color: var(--ink-900); }
.nav a.active::after {
    content: '';
    position: absolute; left: 0; right: 0; bottom: -2px;
    height: 2px; background: var(--ink-900);
    border-radius: 2px;
}

.header-actions {
    display: flex; align-items: center; gap: 0.5rem;
    margin-left: auto;
}

.lang-pill {
    display: inline-flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    font-size: 0.8125rem; font-weight: 500;
    color: var(--ink-700);
    transition: border-color .15s, background .15s;
    position: relative;
    cursor: pointer;
    user-select: none;
}
.lang-pill:hover { background: var(--ink-50); border-color: var(--ink-300); }
.lang-pill svg { width: 14px; height: 14px; }

.lang-flag {
    display: inline-flex; align-items: center;
    font-size: 1rem;
    line-height: 1;
    /* Tutarlı emoji rendering — bazı sistemlerde bayrak için font-fallback gerek */
    font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji",
                 "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif;
    /* Renkli emoji'lere CSS filter uygulanmasın */
    filter: none;
}
.lang-code { font-weight: 700; letter-spacing: 0.02em; }
.lang-sep { color: var(--ink-300); margin: 0 0.1rem; }
.lang-currency { color: var(--ink-500); font-size: 0.75rem; }

.lang-dropdown {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 240px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    padding: 0.375rem;
    display: none;
    z-index: 60;
}
.lang-pill:hover .lang-dropdown,
.lang-pill:focus-within .lang-dropdown { display: block; }
.lang-dropdown-section { padding: 0.25rem 0; }
.lang-dropdown-title {
    padding: 0.375rem 0.625rem 0.25rem;
    font-size: 0.6875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-400);
}
.lang-dropdown-divider {
    height: 1px; background: var(--border);
    margin: 0.25rem 0.25rem;
}

.lang-option {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.5rem 0.625rem;
    border-radius: 8px;
    font-size: 0.8125rem;
    color: var(--ink-700);
    transition: background .15s, color .15s;
    text-decoration: none;
    position: relative;
}
.lang-option__flag {
    font-size: 1.125rem; line-height: 1;
    font-family: "Twemoji Mozilla", "Apple Color Emoji", "Segoe UI Emoji",
                 "Noto Color Emoji", "EmojiOne Color", "Android Emoji", sans-serif;
}
.lang-option__code {
    font-weight: 700; font-size: 0.75rem;
    letter-spacing: 0.04em; color: var(--ink-500);
    min-width: 22px;
}
.lang-option__name { flex: 1; font-weight: 500; }
.lang-option__rate {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--ink-700);
    font-variant-numeric: tabular-nums;
    background: var(--ink-100);
    padding: 0.125rem 0.4rem;
    border-radius: 999px;
    margin-left: auto;
}
.lang-option__check { color: var(--ink-900); margin-left: auto; }
.lang-option.is-active .lang-option__rate { background: rgba(255,255,255,0.2); color: var(--white); }
.lang-dropdown-rates {
    display: block;
    font-size: 0.625rem; font-weight: 500;
    text-transform: none; letter-spacing: 0;
    color: var(--ink-400);
    margin-top: 0.125rem;
}

/* === Anasayfa Slider (admin yönetimli) === */
.home-slider {
    position: relative;
    max-width: var(--container);
    margin: 3rem auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: var(--ink-100);
    box-shadow: var(--shadow);
}
.home-slider__track { position: relative; width: 100%; height: 100%; }
.home-slider__slide {
    position: absolute; inset: 0;
    opacity: 0;
    transition: opacity .8s ease;
    pointer-events: none;
}
.home-slider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}
.home-slider__slide img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.home-slider__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.65) 100%);
    display: flex; align-items: flex-end;
    padding: 2rem 2.5rem;
}
.home-slider__content {
    color: var(--white);
    max-width: 600px;
}
.home-slider__title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 0.5rem 0;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}
.home-slider__subtitle {
    font-size: 1rem;
    margin: 0 0 1.25rem 0;
    opacity: 0.92;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.home-slider__cta {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--white);
    color: var(--ink-900);
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    text-decoration: none;
    transition: gap .2s, transform .2s;
}
.home-slider__cta:hover { gap: 0.75rem; transform: translateY(-1px); }

.home-slider__dots {
    position: absolute; bottom: 1rem; left: 50%;
    transform: translateX(-50%);
    display: flex; gap: 0.5rem;
    z-index: 2;
}
.home-slider__dot {
    width: 8px; height: 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.5);
    border: 0;
    cursor: pointer;
    transition: width .2s, background .2s;
    padding: 0;
}
.home-slider__dot.is-active {
    width: 24px;
    background: var(--white);
}

@media (max-width: 768px) {
    .home-slider {
        margin: 1.5rem 1rem;
        aspect-ratio: 4 / 3;
        border-radius: var(--radius);
    }
    .home-slider__overlay { padding: 1.25rem 1.25rem; }
    .home-slider__title   { font-size: 1.5rem; }
    .home-slider__subtitle{ font-size: 0.9375rem; margin-bottom: 1rem; }
    .home-slider__cta     { padding: 0.625rem 1.25rem; font-size: 0.875rem; }
}

.lang-option:hover { background: var(--ink-100); color: var(--ink-900); }
.lang-option:hover .lang-option__code { color: var(--ink-900); }

.lang-option.is-active {
    background: var(--ink-900);
    color: var(--white);
}
.lang-option.is-active .lang-option__code,
.lang-option.is-active .lang-option__name { color: var(--white); }
.lang-option.is-active .lang-option__check { color: var(--white); }
.lang-option.is-active:hover { background: var(--ink-800); }

/* Mobil — daha kompakt, currency'i gizle */
@media (max-width: 768px) {
    .lang-pill { padding: 0.4rem 0.625rem; gap: 0.3rem; }
    .lang-sep, .lang-currency { display: none; }
    .lang-dropdown { right: -0.25rem; min-width: 180px; }
}

.login-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 1rem 0.5rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--white);
    color: var(--ink-900);
    font-size: 0.875rem; font-weight: 500;
    transition: background .15s, border-color .15s;
}
.login-btn:hover { background: var(--ink-50); }
.login-avatar {
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--ink-900); color: var(--white);
    display: grid; place-items: center;
    flex-shrink: 0;
}

/* === HERO === */
.hero {
    position: relative;
    margin: 1.5rem 1.5rem 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    min-height: 460px;
    background:
        linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.55) 100%),
        var(--ink-900);
    background-size: cover;
    background-position: center;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    padding: 4rem 1.5rem 9rem;
    color: var(--white);
}
.hero-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
}
.hero-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 100%);
}
.hero-inner {
    position: relative; z-index: 2;
    max-width: 980px; width: 100%; text-align: center;
}
.hero h1 {
    font-size: clamp(1.75rem, 5vw, 3rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--white);
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}
.hero p.lede {
    margin-top: 1rem;
    font-size: clamp(1rem, 1.5vw, 1.125rem);
    color: rgba(255, 255, 255, 0.92);
    max-width: 640px; margin-left: auto; margin-right: auto;
}

/* === Search bar === */
.search-bar {
    position: relative; z-index: 2;
    margin: -3.5rem auto 0;
    max-width: 1180px;
    background: var(--white);
    border-radius: var(--radius-lg);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.20);
    padding: 0.5rem;
    display: grid;
    /* pickup | swap | dropoff | date | return | pax | submit */
    grid-template-columns: 1.2fr auto 1.2fr 1fr 1fr 110px auto;
    align-items: center;
    gap: 0;
}
/* Hidden input'lar grid item olmasın diye explicit */
.search-bar > input[type="hidden"] { display: none !important; }
.search-field {
    display: flex; align-items: center; gap: 0.625rem;
    padding: 0.875rem 1rem;
    border-right: 1px solid var(--border);
    min-width: 0;
}
.search-field:last-of-type { border-right: none; }
.search-field svg.field-icon {
    width: 18px; height: 18px;
    color: var(--ink-500);
    flex-shrink: 0;
}
.search-field input,
.search-field button.field-input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.9375rem;
    min-width: 0;
    color: var(--ink-900);
    text-align: left;
}
.search-field input::placeholder,
.search-field .placeholder { color: var(--ink-400); }
.search-field .swap-btn {
    width: 32px; height: 32px;
    display: grid; place-items: center;
    background: var(--ink-100);
    border-radius: 50%;
    color: var(--ink-700);
    transition: background .15s;
}
.search-field .swap-btn:hover { background: var(--ink-200); }
.search-swap {
    display: grid; place-items: center;
    padding: 0 0.5rem;
}
.search-submit {
    padding: 0 1.25rem;
    background: var(--ink-900); color: var(--white);
    border-radius: var(--radius);
    height: 56px;
    min-width: 132px;
    margin: 0 0.5rem;
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    font-weight: 600; font-size: 0.9375rem;
    white-space: nowrap;
    transition: background .15s;
}
.search-submit:hover { background: var(--ink-700); }
.search-submit svg { width: 18px; height: 18px; }

/* === Section === */
.section {
    padding: 5rem 1.5rem;
}
.section-header {
    text-align: center; max-width: 720px; margin: 0 auto 3rem;
}
.section-header h2 {
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ink-900);
}
.section-header p {
    margin-top: 0.625rem;
    color: var(--ink-500);
    font-size: 1rem;
}

/* === Features grid === */
.features-grid {
    display: grid; gap: 1.5rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    max-width: var(--container); margin: 0 auto;
}
.feature-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 4/5;
    background: var(--ink-900);
    box-shadow: var(--shadow);
    transition: transform .25s, box-shadow .25s;
}
.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}
.feature-card-bg {
    position: absolute; inset: 0; z-index: 0;
    background-size: cover; background-position: center;
    opacity: 0.85;
}
.feature-card::after {
    content: '';
    position: absolute; inset: 0; z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.85) 100%);
}
.feature-card-content {
    position: relative; z-index: 2;
    padding: 1.75rem;
    height: 100%;
    display: flex; flex-direction: column; justify-content: flex-end;
    color: var(--white);
}
.feature-icon {
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    display: grid; place-items: center;
    margin-bottom: 1rem;
}
.feature-icon svg { width: 18px; height: 18px; }
.feature-card h3 {
    font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em;
    margin-bottom: 0.5rem;
}
.feature-card p {
    font-size: 0.875rem; line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}

/* === Vehicle tabs === */
.vehicles-tabs {
    display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem;
    margin-bottom: 3rem;
}
.tab-btn {
    padding: 0.625rem 1.25rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: 0.875rem; font-weight: 500;
    color: var(--ink-700);
    transition: background .15s, color .15s, border-color .15s;
}
.tab-btn:hover { background: var(--ink-50); }
.tab-btn.active {
    background: var(--ink-900); color: var(--white);
    border-color: var(--ink-900);
}

/* === Vehicle cards (ANASAYFA "Araç Sınıfları" gridine özel) ===
   ÖNEMLİ: Bu kurallar SADECE `.vehicles-grid` içindeki dikey kart sürümü içindir.
   Quote sayfasındaki yatay `.vehicle-card--quote` kartlarına cascade etmemeli;
   bu yüzden tüm kurallar `.vehicles-grid` scope'una alınmıştır. */
.vehicles-grid {
    display: grid; gap: 1.5rem;
    /* 4'lü grid hissi: 1, 2, 3 ya da 4 araç olsa da kart boyu sabit kalsın.
       auto-fit + sabit kart genişliği → tek araçta da kart minimal görünür. */
    grid-template-columns: repeat(auto-fit, minmax(240px, 260px));
    justify-content: center;
    max-width: var(--container); margin: 0 auto;
}
.vehicles-grid .vehicle-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
    text-align: center;
    /* Tek araç olduğunda görsel devleşmesin: 4'lü gridde olduğu gibi sabit cap */
    max-width: 280px;
    width: 100%;
    margin-inline: auto;
}
.vehicles-grid .vehicle-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--ink-300);
}
.vehicles-grid .vehicle-image {
    /* Sabit, kompakt yükseklik — kaç araç olursa olsun aynı kartta aynı boy. */
    width: 100%;
    height: 130px;
    background-color: var(--ink-50);
    background-image: linear-gradient(135deg, var(--ink-100) 0%, var(--ink-50) 100%);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    display: grid; place-items: center;
    color: var(--ink-300);
    /* Inline background-image ile geliyor: contain → araç tam görünür, oran korunur */
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.vehicles-grid .vehicle-image svg { width: 48px; height: 48px; }
@media (max-width: 480px) {
    .vehicles-grid .vehicle-image { height: 120px; }
}
.vehicle-name {
    font-size: 1.125rem; font-weight: 700; letter-spacing: -0.01em;
    color: var(--ink-900);
    margin-bottom: 0.625rem;
}
.vehicle-meta {
    display: flex; justify-content: center; gap: 1rem;
    color: var(--ink-500); font-size: 0.875rem;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}
.vehicle-meta-item {
    display: inline-flex; align-items: center; gap: 0.375rem;
}
.vehicle-meta-item svg { width: 14px; height: 14px; }
.vehicle-models {
    font-size: 0.8125rem; color: var(--ink-500);
    font-style: italic;
}

/* === Footer === */
.footer {
    background: var(--ink-900); color: var(--ink-300);
    padding: 4rem 1.5rem 2rem;
    margin-top: 5rem;
}
.footer-inner {
    max-width: var(--container); margin: 0 auto;
    display: grid; gap: 2.5rem;
    grid-template-columns: 1.4fr repeat(3, 1fr);
}
.footer-brand .brand-name { color: var(--white); }
.footer-brand p {
    margin-top: 1rem;
    color: var(--ink-400); font-size: 0.875rem;
    line-height: 1.7; max-width: 320px;
}
.footer h4 {
    color: var(--white);
    font-size: 0.875rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 1.25rem;
}
.footer ul { display: flex; flex-direction: column; gap: 0.625rem; }
.footer ul a {
    font-size: 0.875rem; color: var(--ink-400);
    transition: color .15s;
}
.footer ul a:hover { color: var(--white); }
.footer-bottom {
    max-width: var(--container); margin: 3rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-700);
    display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: center;
    font-size: 0.8125rem; color: var(--ink-500);
}

/* === Responsive === */
/* Ara breakpoint: 1180px altı — pax ve submit alta düşsün */
@media (max-width: 1180px) and (min-width: 1025px) {
    .search-bar {
        grid-template-columns: 1.2fr auto 1.2fr 1fr 1fr;
    }
    .search-field--compact { grid-column: 1 / 4; max-width: none; }
    .search-submit { grid-column: 4 / 6; min-width: 0; }
}

@media (max-width: 1024px) {
    .nav { display: none; }
    .search-bar {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .search-field { border-right: none; border-bottom: 1px solid var(--border); }
    .search-field:last-of-type { border-bottom: none; }
    .search-swap { display: none; }
    .search-submit { margin: 0.5rem; height: 52px; min-width: 0; }
}

@media (max-width: 768px) {
    .container, .header-inner { padding: 0 1rem; }
    .hero { margin: 0.75rem 0.75rem 0; padding: 3rem 1.25rem 8rem; min-height: 380px; }
    .section { padding: 3.5rem 1rem; }
    .footer { padding: 3rem 1rem 1.5rem; }
    .footer-inner { grid-template-columns: 1fr; gap: 2rem; }
    .footer-bottom { flex-direction: column; text-align: center; }
}

@media (max-width: 640px) {
    .header-inner { height: 64px; gap: 1rem; }
    .brand-name { font-size: 1rem; }
    .login-btn span { display: none; }
}

/* ============================================================
   Popüler rotalar (home, search bar altı) — premium centered
   ============================================================ */
.popular-routes {
    margin: 1.5rem auto 0;
    max-width: 1180px;
    width: 100%;
    padding: 0 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-align: center;
}
.popular-routes__label {
    font-size: 0.75rem;
    color: var(--ink-400);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    font-weight: 600;
}
.popular-routes__list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem 0.625rem;
    width: 100%;
}
.popular-route-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 0.5rem 0.875rem;
    font-size: 0.8125rem;
    color: var(--ink-700);
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
    white-space: nowrap;
    line-height: 1.2;
}
.popular-route-pill:hover,
.popular-route-pill:focus-visible {
    background: var(--ink-900);
    color: var(--white);
    border-color: var(--ink-900);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
    outline: none;
}
.popular-route-pill svg { color: var(--ink-400); transition: color .18s; flex-shrink: 0; }
.popular-route-pill:hover svg,
.popular-route-pill:focus-visible svg { color: var(--white); }
.popular-route-pill__from,
.popular-route-pill__to {
    max-width: 14ch;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tablet — kart başına biraz daha hava */
@media (max-width: 1024px) {
    .popular-routes { margin-top: 1.25rem; }
    .popular-route-pill { padding: 0.5rem 0.75rem; font-size: 0.8125rem; }
}

/* Mobil — yatay scroll ile temiz akış (kayar şerit) */
@media (max-width: 640px) {
    .popular-routes { padding: 0 0.875rem; }
    .popular-routes__list {
        flex-wrap: nowrap;
        justify-content: flex-start;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding: 0.25rem 0.125rem 0.5rem;
        margin: 0 -0.875rem;
        padding-left: 0.875rem;
        padding-right: 0.875rem;
    }
    .popular-routes__list::-webkit-scrollbar { display: none; }
    .popular-routes__list { scrollbar-width: none; }
    .popular-route-pill {
        scroll-snap-align: start;
        flex-shrink: 0;
    }
    .popular-route-pill__from,
    .popular-route-pill__to {
        max-width: 12ch;
    }
}

.search-field--compact { max-width: 140px; }
@media (max-width: 1024px) { .search-field--compact { max-width: 100%; } }

/* ============================================================
   QUOTE PAGE
   ============================================================ */
.quote-summary {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 0 1rem;
    position: sticky; top: 0; z-index: 30;
    backdrop-filter: blur(12px);
}
.quote-summary .container {
    display: flex; flex-direction: column; gap: 0.875rem;
    max-width: var(--container); margin: 0 auto;
    padding: 0 1.5rem;
}
.quote-back {
    display: inline-flex; align-items: center; gap: 0.5rem;
    color: var(--ink-700); font-size: 0.875rem; font-weight: 600;
    text-decoration: none;
    width: fit-content;
    padding: 0.375rem 0;
    transition: color .15s;
}
.quote-back:hover { color: var(--ink-900); }

.quote-summary__route {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: center;
}
.quote-summary__point {
    display: flex; gap: 0.75rem; align-items: center; min-width: 0;
}
.quote-summary__point > div { min-width: 0; }
.quote-summary__pin {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ink-900);
    flex-shrink: 0;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
}
.quote-summary__pin--dest {
    background: var(--white);
    border: 3px solid var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.quote-summary__label {
    display: block; font-size: 0.6875rem; color: var(--ink-400);
    text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600;
}
.quote-summary__name {
    display: block; font-size: 0.9375rem; color: var(--ink-900);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.quote-summary__connector { color: var(--ink-300); width: 80px; height: 24px; }
.quote-summary__connector svg { width: 100%; height: 100%; }

.quote-summary__meta {
    display: flex; gap: 1.5rem; flex-wrap: wrap;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.quote-summary__meta-item {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; color: var(--ink-500);
}
.quote-summary__meta-item strong { color: var(--ink-900); font-weight: 700; }

.quote-page { padding: 1rem 0 8rem; }
.quote-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    /* Desktop: araç listesi solda (1fr) + sticky sipariş özeti sağda 360px.
       Araç kartları daha geniş alanda nefes alır. */
    grid-template-columns: 1fr 360px;
    gap: 1.75rem;
    align-items: start;
}
@media (max-width: 1024px) {
    .quote-grid { grid-template-columns: 1fr; gap: 0.75rem; padding: 0 1rem; }
    /* Mobilde harita + siyah rota strip ÖNCE, araç kartları SONRA görünsün */
    .quote-side { order: 0; }
    .quote-list { order: 1; }
}

/* Sticky sağ panel (desktop) */
@media (min-width: 1025px) {
    .quote-side {
        position: sticky;
        top: 100px;
        display: flex; flex-direction: column; gap: 1rem;
    }
    /* Desktop'ta mobile-only siyah rota strip gizli */
    .quote-side > .quote-route-strip { display: none; }
}

/* Harita boyutu — desktop sticky sağ panelde + mobil tam genişlik */
.quote-side__map .route-map {
    position: relative; top: auto;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    aspect-ratio: 16 / 11;
}
@media (max-width: 1024px) {
    .quote-side__map .route-map {
        aspect-ratio: 16 / 10;
        border-radius: var(--radius);
    }
}

/* Mobilde sipariş özeti gizli (mobilde özet bilgisi siyah rota strip + araç kartları içinde zaten var) */
@media (max-width: 1024px) {
    .quote-side .order-summary { display: none; }
}

.quote-route-strip {
    display: flex; align-items: center; gap: 0.625rem;
    background: var(--ink-900);
    color: var(--white);
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    margin-top: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.quote-route-strip__pin {
    flex-shrink: 0;
    color: var(--white);
}
.quote-route-strip__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column; gap: 0.125rem;
}
.quote-route-strip__addrs {
    font-size: 0.875rem; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--white);
}
.quote-route-strip__addrs strong { font-weight: 700; }
.quote-route-strip__addrs span { margin: 0 0.25rem; opacity: 0.6; }
.quote-route-strip__meta {
    font-size: 0.75rem; opacity: 0.7;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.quote-route-strip__edit {
    background: rgba(255,255,255,0.1);
    color: var(--white);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.quote-route-strip__edit:hover { background: rgba(255,255,255,0.2); }

/* === Sipariş Özeti paneli (desktop sticky sağ kolon) ===
   .quote-side için sticky/grid order kuralları yukarıdaki "Quote layout" bloğunda;
   bu blok yalnızca order-summary card stillerini içerir. */
.order-summary { display: flex; flex-direction: column; gap: 1rem; }
.order-summary__card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.25rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.order-summary__head {
    display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
    margin-bottom: 0.875rem;
}
.order-summary__title {
    font-size: 1rem; font-weight: 700; color: var(--ink-900);
    margin: 0;
}
.order-summary__edit {
    color: var(--ink-500);
    width: 32px; height: 32px;
    border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
}
.order-summary__edit:hover { color: var(--ink-900); background: var(--ink-100); }

.order-summary__route {
    list-style: none;
    margin: 0 0 0.875rem 0;
    padding: 0;
    display: flex; flex-direction: column; gap: 0.625rem;
}
.order-summary__route li {
    display: grid;
    grid-template-columns: 16px 1fr;
    gap: 0.625rem;
    align-items: flex-start;
}
.order-summary__pin {
    width: 10px; height: 10px;
    margin-top: 6px;
    border-radius: 999px;
}
.order-summary__pin--from { background: var(--ink-900); }
.order-summary__pin--to {
    background: transparent;
    border: 2px solid var(--ink-900);
    border-radius: 3px;
}
.order-summary__addr strong {
    display: block;
    font-size: 0.875rem; color: var(--ink-900); font-weight: 700;
    line-height: 1.3;
    margin-bottom: 0.125rem;
}
.order-summary__addr span {
    display: block;
    font-size: 0.75rem; color: var(--ink-500);
    line-height: 1.4;
}

.order-summary__meta {
    display: flex; flex-direction: column; gap: 0.5rem;
    border-top: 1px solid var(--border);
    padding-top: 0.875rem;
}
.order-summary__meta-row {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; color: var(--ink-700);
}
.order-summary__meta-row svg { color: var(--ink-400); flex-shrink: 0; }
.order-summary__meta-row strong { color: var(--ink-900); font-weight: 700; }

.order-summary__sub {
    font-size: 0.875rem; font-weight: 700; color: var(--ink-900);
    margin: 0 0 0.75rem 0;
}
.order-summary__vehicle-row {
    display: flex; align-items: center; gap: 0.75rem;
}
.order-summary__vehicle-thumb {
    width: 60px; height: 44px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink-50);
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
}
.order-summary__vehicle-thumb img { width: 100%; height: 100%; object-fit: cover; }
.order-summary__vehicle-meta { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.order-summary__vehicle-meta strong { font-size: 0.875rem; color: var(--ink-900); font-weight: 700; }
.order-summary__vehicle-caps {
    display: inline-flex; gap: 0.375rem; align-items: center;
    font-size: 0.75rem; color: var(--ink-500);
}
.order-summary__vehicle-caps svg { color: var(--ink-400); }

.order-summary__price-row,
.order-summary__price-total {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.5rem 0;
    font-size: 0.875rem;
}
.order-summary__price-row { color: var(--ink-700); }
.order-summary__price-row strong { color: var(--ink-900); font-weight: 700; }
.order-summary__price-total {
    border-top: 1px solid var(--border);
    padding-top: 0.875rem; margin-top: 0.25rem;
    font-size: 1rem;
}
.order-summary__price-total strong {
    color: #16a34a; font-weight: 800; font-size: 1.0625rem;
}

.order-summary__coupon { padding: 0.375rem 0; }
.order-summary__coupon summary {
    cursor: pointer; font-size: 0.8125rem; color: var(--ink-700);
    padding: 0.5rem 0.75rem;
    background: var(--ink-50);
    border-radius: var(--radius-pill);
    list-style: none;
    text-align: center;
}
.order-summary__coupon summary::-webkit-details-marker { display: none; }
.order-summary__coupon-input {
    width: 100%; margin-top: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 0.875rem;
}

/* .quote-side__map .route-map — kuralı yukarıdaki yeni grid bloğunda; burada artık tekrar tanımlanmıyor. */

/* === Map (premium çizgi rota) === */
.route-map {
    position: sticky; top: 132px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow);
    aspect-ratio: 4 / 3;
    isolation: isolate;
    --rm-route-from: var(--ink-900);
    --rm-route-to:   var(--ink-700);
    --rm-pin-bg:     var(--white);
    --rm-pin-stroke: var(--ink-900);
}
/* Mobilde sticky bırakırsak bottom-sheet ile çakışır — düz akışa geç. */
@media (max-width: 1024px) {
    .route-map {
        position: relative; top: auto;
        aspect-ratio: 16 / 11;
    }
}
@media (max-width: 640px) {
    .route-map {
        aspect-ratio: 4 / 3;
        border-radius: var(--radius);
    }
}
/* Gerçek Google Map konteyneri — JS başarılı olunca z-index üstte */
.route-map__live {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, var(--ink-50) 0%, var(--white) 100%);
    opacity: 0;
    transition: opacity .35s ease;
    pointer-events: none;
    z-index: 1;
}
.route-map--live .route-map__live {
    opacity: 1;
    pointer-events: auto;
}
/* SVG fallback — JS yüklenince fade out */
.route-map__fallback {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    transition: opacity .35s ease;
    z-index: 2;
}
.route-map--live .route-map__fallback {
    opacity: 0;
    pointer-events: none;
}
.route-map__inner {
    position: relative;
    width: 100%; height: 100%;
    background: linear-gradient(180deg, var(--ink-50) 0%, var(--white) 100%);
}
.route-map__grid,
.route-map__streets,
.route-map__route {
    position: absolute; inset: 0; width: 100%; height: 100%;
}
.route-map__grid { color: var(--ink-200); opacity: 0.6; }
.route-map__streets { color: var(--ink-200); opacity: 0.7; }
.route-map__route { z-index: 2; }

.route-map__path {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    animation: rmDraw 1.6s cubic-bezier(.65,.05,.36,1) 0.1s forwards;
}
@keyframes rmDraw { to { stroke-dashoffset: 0; } }

.route-map__label {
    position: absolute; z-index: 3;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.5rem 0.75rem;
    box-shadow: var(--shadow-sm);
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; font-weight: 600;
    max-width: 70%;
    animation: rmFade .35s ease 1.2s both;
}
@keyframes rmFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.route-map__label--origin { top: 8%;  left: 5%; }
.route-map__label--dest   { bottom: 8%; right: 5%; }
.route-map__label-text {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 200px;
}
.route-map__label-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--ink-900);
    flex-shrink: 0;
}
.route-map__label-dot--dest {
    background: var(--white);
    border: 2px solid var(--ink-900);
}

.route-map__chip {
    position: absolute; z-index: 4;
    bottom: 1rem; left: 50%;
    transform: translateX(-50%);
    background: var(--ink-900); color: var(--white);
    border-radius: var(--radius-pill);
    padding: 0.5rem 1rem;
    font-size: 0.8125rem; font-weight: 600;
    display: inline-flex; align-items: center; gap: 0.625rem;
    box-shadow: var(--shadow-lg);
    animation: rmFade .35s ease 1.4s both;
    pointer-events: none;
}
.route-map__chip strong { font-weight: 700; }
.route-map__chip-divider {
    width: 1px; height: 12px; background: rgba(255,255,255,0.25);
}

/* === Google Places Autocomplete dropdown (.pac-container) — premium black & white === */
.pac-container {
    margin-top: 4px !important;
    border-radius: 12px !important;
    border: 1px solid var(--border) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
    background: var(--white) !important;
    overflow: hidden !important;
    z-index: 10000 !important;
}
.pac-container::after { display: none !important; } /* "powered by Google" satırını gizle (Google ToS gereği "Maps tile" varsa zaten kalır) */
.pac-item {
    padding: 10px 14px !important;
    font-size: 0.875rem !important;
    color: var(--ink-700) !important;
    border-top: 1px solid var(--ink-100) !important;
    cursor: pointer !important;
    line-height: 1.45 !important;
}
.pac-item:first-child { border-top: none !important; }
.pac-item:hover,
.pac-item-selected {
    background: var(--ink-50) !important;
}
.pac-icon, .pac-icon-marker {
    background-image: none !important;
    width: 16px !important; height: 16px !important;
    margin-top: 4px !important; margin-right: 10px !important;
    background-color: var(--ink-900) !important;
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") !important;
    mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0 1 18 0z'/><circle cx='12' cy='10' r='3'/></svg>") !important;
}
.pac-item-query {
    font-size: 0.875rem !important;
    color: var(--ink-900) !important;
    font-weight: 600 !important;
}
.pac-matched {
    font-weight: 800 !important;
    color: var(--ink-900) !important;
}

/* === Vehicle list === */
.quote-list__head { margin-bottom: 1.25rem; }
.quote-list__head h2 {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em;
    color: var(--ink-900);
}
.quote-list__sub {
    margin-top: 0.25rem;
    font-size: 0.875rem; color: var(--ink-500);
}

.vehicle-quote-list {
    display: flex; flex-direction: column; gap: 0.875rem;
}

/* === Vehicle quote card ===
   Yatay 3-bölgeli kart: [GÖRSEL 168px] [İÇERİK 1fr] — fiyat içerik bloğunun sağında
   header ile birlikte konumlanır. min-width:0 + flex-wrap ile sıkışma engellenir. */
.vehicle-card--quote {
    display: grid;
    grid-template-columns: 168px minmax(0, 1fr);
    gap: 0;
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: all .22s ease;
    cursor: pointer;
    width: 100%;
    /* Anasayfa .vehicles-grid kuralının cascade etmesini engelle */
    max-width: none;
    margin-inline: 0;
    /* Default visible; JS-driven entrance handled via .js-reveal */
}
.vehicle-card--quote * { min-width: 0; }
.js .vehicle-card--quote.js-reveal { opacity: 0; transform: translateY(8px); }
.js .vehicle-card--quote.is-revealed { opacity: 1; transform: translateY(0); }
.vehicle-card--quote:hover {
    border-color: var(--ink-700);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.vehicle-card--quote.is-selected {
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px var(--ink-900), var(--shadow);
}
.vehicle-card--quote:focus-visible {
    outline: 3px solid var(--ink-900); outline-offset: 2px;
}

.vehicle-card__media {
    background: linear-gradient(135deg, var(--ink-100) 0%, var(--ink-50) 100%);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-700);
    overflow: hidden; position: relative;
    aspect-ratio: 4 / 3;
    /* görsel container'ı her boyutta kararlı dursun */
    min-height: 96px;
    padding: 6px; /* contain'le küçük araç görselleri kenarlara değmesin */
}
.vehicle-card__media img,
.vehicle-image-wrapper img,
.vehicle-card-image img {
    /* Premium kart düzeni: görsel her zaman tam ortalı, oranı bozulmuyor */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: center center;
    margin: auto;
    display: block;
    transition: transform 0.4s ease;
}
.vehicle-card:hover .vehicle-card__media img,
.vehicle-card:focus-within .vehicle-card__media img {
    transform: scale(1.04);
}
.vehicle-card__media svg { width: 80%; }
/* Genel container yardımcıları (admin/forms ve frontend kartlarda paylaşılan) */
.vehicle-card-image,
.vehicle-image-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, var(--ink-100) 0%, var(--ink-50) 100%);
}
.vehicle-card__media-count {
    position: absolute; bottom: 0.5rem; right: 0.5rem;
    display: inline-flex; align-items: center; gap: 0.25rem;
    padding: 0.2rem 0.5rem;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.6);
    color: var(--white);
    font-size: 0.6875rem; font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(4px);
    pointer-events: none;
}
.vehicle-card__media-count svg { width: 11px; height: 11px; }

.vehicle-card__body {
    display: flex; flex-direction: column; justify-content: space-between;
    padding: 1.125rem 1.25rem;
    gap: 0.75rem;
    min-width: 0; /* grid track'in sıkışmasına izin ver; içerik kırpılsın */
}
.vehicle-card__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap; /* dar alanda fiyat alt satıra düşsün, isim taşmasın */
}
.vehicle-card__title {
    flex: 1 1 60%;
    min-width: 0;
}
.vehicle-card__name {
    font-size: 1.0625rem; font-weight: 700; color: var(--ink-900);
    letter-spacing: -0.01em;
    line-height: 1.25;
    overflow-wrap: anywhere; /* "Mercedes-Benz" gibi uzun marka kelimesi kırılabilsin */
    word-break: break-word;
}
.vehicle-card__caps {
    margin-top: 0.375rem;
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.cap-chip {
    display: inline-flex; align-items: center; gap: 0.25rem;
    font-size: 0.8125rem; color: var(--ink-500); font-weight: 500;
}
.cap-chip svg { color: var(--ink-400); }

.vehicle-card__price {
    text-align: right;
    flex: 0 0 auto;
    min-width: 96px; /* en azından "₺2.042,00" sığsın, başka satıra atlamasın */
}
.vehicle-card__price-amount {
    font-size: 1.25rem; font-weight: 800; color: var(--ink-900);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    display: block;
    line-height: 1;
}
.vehicle-card__price-tag {
    display: inline-block; margin-top: 0.375rem;
    font-size: 0.6875rem; color: var(--ink-500);
    background: var(--ink-100);
    padding: 0.125rem 0.5rem;
    border-radius: var(--radius-pill);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.vehicle-card__price-label {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.75rem;
    color: var(--ink-500);
    font-weight: 500;
}

/* Standart hizmet etiketleri (Karşılama / WiFi / 7/24 Destek) */
.vehicle-card__services {
    display: flex; flex-wrap: wrap; gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0.25rem 0 0.5rem 0;
}
.service-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: var(--ink-500); font-weight: 500;
}
.service-chip svg { color: var(--ink-400); flex-shrink: 0; }

.vehicle-card__features {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    list-style: none;
}
.feature-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    background: var(--ink-100);
    border-radius: var(--radius-pill);
    padding: 0.25rem 0.625rem;
    font-size: 0.75rem; color: var(--ink-700); font-weight: 500;
}
.feature-chip__icon { width: 12px; height: 12px; color: var(--ink-700); }
.feature-chip--more { background: var(--ink-200); color: var(--ink-600); }

.vehicle-card__foot {
    display: flex; justify-content: space-between; align-items: center;
    gap: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px dashed var(--border);
}
.vehicle-card__pays {
    display: flex; gap: 0.375rem; flex-wrap: wrap;
}
.pay-chip {
    display: inline-flex; align-items: center; gap: 0.3rem;
    font-size: 0.75rem; color: var(--ink-500); font-weight: 500;
}
.pay-chip svg { color: var(--ink-400); }
.vehicle-card__select {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.8125rem; color: var(--ink-900); font-weight: 700;
    transition: gap .18s;
}
.vehicle-card--quote:hover .vehicle-card__select { gap: 0.625rem; }

/* === Mobile responsive (320-640px) ===
   - 110px grid biraz daralsın (geniş ekranda 168px, mobilde 108px)
   - Fiyat sıkıştığında alt satıra düşebilsin (head flex-wrap)
   - Box-sizing/min-width kontrolü ile yatay taşma engellensin
   - Görsel kart içinde tam ortalanır (.vehicle-card__media kuralları üstte)
*/
@media (max-width: 640px) {
    .vehicle-card--quote {
        grid-template-columns: 108px 1fr;
        min-width: 0;
    }
    .vehicle-card--quote * { min-width: 0; }
    .vehicle-card__media {
        aspect-ratio: 1 / 1;
        min-height: 88px;
        padding: 4px;
    }
    .vehicle-card__body {
        padding: 0.75rem 0.875rem;
        gap: 0.5rem;
    }
    .vehicle-card__head {
        flex-wrap: wrap; /* fiyat sıkışırsa alt satıra düşsün */
        gap: 0.5rem;
    }
    .vehicle-card__title {
        flex: 1 1 60%;
        min-width: 0;
    }
    .vehicle-card__name {
        font-size: 0.95rem;
        line-height: 1.25;
        word-break: break-word; /* uzun marka isimleri kırılsın */
    }
    .vehicle-card__price {
        text-align: right;
        flex: 0 0 auto;
        min-width: 92px;
    }
    .vehicle-card__price-amount { font-size: 1.0625rem; }
    .vehicle-card__price-label { font-size: 0.6875rem; }
    .vehicle-card__caps,
    .vehicle-card__services {
        gap: 0.5rem 0.75rem;
        font-size: 0.7375rem;
    }
}

/* === Çok dar mobil (320-380px): fiyat alt satıra tam genişlikte düşsün === */
@media (max-width: 380px) {
    .vehicle-card--quote {
        grid-template-columns: 96px 1fr;
    }
    .vehicle-card__head { flex-direction: column; align-items: flex-start; }
    .vehicle-card__price {
        text-align: left;
        width: 100%;
        margin-top: 0.125rem;
    }
}

/* === Empty state === */
.quote-empty {
    text-align: center;
    padding: 3rem 1.5rem;
    color: var(--ink-500);
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
}
.quote-empty svg { color: var(--ink-300); margin: 0 auto 1rem; }
.quote-empty h3 { color: var(--ink-900); font-size: 1.125rem; margin-bottom: 0.375rem; }
.quote-empty p { font-size: 0.9375rem; margin-bottom: 1.25rem; }
.quote-empty__cta {
    display: inline-block; padding: 0.625rem 1.25rem;
    background: var(--ink-900); color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 0.875rem; font-weight: 600; text-decoration: none;
    transition: background .18s;
}
.quote-empty__cta:hover { background: var(--ink-700); }

/* === Bottom Sheet (Uber-style) — initial: rota özeti, selected: araç + devam ===
   Mobil-first: ekranın altına sabitlenmiş kart, safe-area destekli.
   Desktop: aynı sticky bar mantığında ama daha kompakt görünüm. */
.quote-sticky-cta {
    position: fixed; left: 0; right: 0; bottom: 0;
    /* z-index ladder: sheet 50, .pac-container 1051 */
    z-index: 50;
    pointer-events: none;
    transform: translateY(100%);
    transition: transform .28s ease;
}
/* Yalnızca araç seçilince yukarı kayar (data-state="selected") */
.quote-sticky-cta[data-state="selected"] {
    transform: translateY(0);
}
/* Desktop'ta sticky bar'a gerek yok — listenin altındaki inline buton yeterli. */
@media (min-width: 1025px) {
    .quote-sticky-cta {
        display: none !important;
    }
}

/* === Desktop "Devam Et" — araç listesinin altında inline ===
   Responsive grid: sol info (esnek, taşmaz) + sağ buton (sabit).
   Çok uzun araç adlarında satır kırılır, yatay scroll oluşmaz. */
.quote-list__continue {
    display: none;
}
@media (min-width: 1025px) {
    .quote-list__continue {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        align-items: center;
        column-gap: 1.25rem;
        row-gap: 0.75rem;
        margin-top: 1.5rem;
        padding: 1rem 1.25rem;
        background: var(--surface);
        border: 1.5px solid var(--border);
        border-radius: var(--radius-lg);
        box-shadow: 0 1px 2px rgba(0,0,0,0.04);
        opacity: 0.6;
        transition: opacity .25s ease, border-color .25s ease, transform .25s ease,
                    box-shadow .25s ease;
        max-width: 100%;
        box-sizing: border-box;
    }
    .quote-list__continue.is-active {
        opacity: 1;
        border-color: var(--ink-900);
        transform: translateY(-1px);
        box-shadow: var(--shadow);
    }
}
.quote-list__continue-info {
    display: flex; flex-direction: column; gap: 0.125rem;
    min-width: 0;
}
.quote-list__continue-name {
    font-size: 0.875rem; color: var(--ink-700); font-weight: 600;
    /* Uzun araç adlarını tek satırda kes */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
.quote-list__continue-price {
    font-size: 1.125rem; color: var(--ink-900); font-weight: 800;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
}
.quote-list__continue-btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--ink-900);
    color: var(--white);
    border: 0;
    padding: 0.875rem 1.5rem;
    border-radius: var(--radius-pill);
    font-weight: 700;
    font-size: 0.9375rem;
    cursor: pointer;
    transition: gap .2s, background .2s, transform .15s;
    flex-shrink: 0;
    white-space: nowrap;
}
.quote-list__continue-btn:hover:not(:disabled) {
    gap: 0.75rem;
    background: #000;
    transform: translateY(-1px);
}
.quote-list__continue-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.quote-list__continue-btn:focus-visible {
    outline: 3px solid var(--ink-900); outline-offset: 3px;
}

/* Dar desktop (1025–1200) — buton/info dengeli kalsın */
@media (min-width: 1025px) and (max-width: 1200px) {
    .quote-list__continue {
        padding: 0.875rem 1rem;
    }
    .quote-list__continue-btn {
        padding: 0.75rem 1.25rem;
        font-size: 0.875rem;
    }
}
.quote-sticky-cta__sheet {
    pointer-events: auto;
    max-width: var(--container);
    margin: 0 auto;
    background: var(--surface);
    border-top: 1px solid var(--border);
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -10px 32px rgba(0,0,0,0.10);
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.quote-sticky-cta__handle {
    display: none;
    background: transparent; border: 0; padding: 0;
    cursor: pointer;
    width: 100%; height: 14px;
    margin: 8px auto 0;
}
.quote-sticky-cta__handle span {
    display: block;
    width: 40px; height: 4px;
    border-radius: 999px;
    background: var(--ink-200);
    margin: 0 auto;
}
@keyframes stickyUp { to { transform: translateY(0); } }

.quote-sticky-cta__inner {
    padding: 0.875rem 1.25rem 1rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: nowrap;
}

/* Rota özet bloğu (initial state) */
.quote-sticky-cta__route {
    flex: 1 1 auto; min-width: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 0.25rem 0.625rem;
    align-items: center;
}
.quote-sticky-cta__route[hidden] { display: none; }
.quote-sticky-cta__points {
    display: contents;
}
.quote-sticky-cta__pin {
    width: 8px; height: 8px; border-radius: 999px;
    box-sizing: content-box;
}
.quote-sticky-cta__pin--from { background: var(--ink-900); border: 2px solid var(--ink-900); }
.quote-sticky-cta__pin--to {
    background: transparent;
    border: 2px solid var(--ink-900);
    border-radius: 3px;
}
.quote-sticky-cta__addr {
    font-size: 0.875rem;
    color: var(--ink-900);
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.quote-sticky-cta__addr--to { color: var(--ink-700); font-weight: 500; }
.quote-sticky-cta__meta {
    grid-column: 1 / -1;
    display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
    font-size: 0.8125rem; color: var(--ink-500);
    margin-top: 0.25rem;
}
.quote-sticky-cta__meta strong { color: var(--ink-900); font-weight: 700; }
.quote-sticky-cta__from { color: var(--ink-500); }
.quote-sticky-cta__from strong { color: var(--ink-900); margin-left: 0.25rem; }

/* Action / Buton */
.quote-sticky-cta__action {
    display: flex; align-items: center; gap: 0.875rem;
    flex-shrink: 0;
}
.quote-sticky-cta__info {
    display: flex; flex-direction: column; gap: 0.125rem; min-width: 0;
    text-align: right;
}
.quote-sticky-cta__info[hidden] { display: none; }
.quote-sticky-cta__name { font-size: 0.8125rem; color: var(--ink-500); font-weight: 500; }
.quote-sticky-cta__price { font-size: 1.125rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; }

.quote-sticky-cta__btn {
    display: inline-flex; align-items: center; gap: 0.5rem;
    background: var(--ink-900); color: var(--white);
    padding: 0.875rem 1.375rem;
    border-radius: var(--radius-pill);
    font-weight: 700; font-size: 0.9375rem;
    transition: background .18s, transform .18s;
    white-space: nowrap;
}
.quote-sticky-cta__btn:hover:not(:disabled) { background: var(--ink-700); transform: translateY(-1px); }
.quote-sticky-cta__btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* Tablet */
@media (max-width: 1024px) {
    .quote-sticky-cta__sheet { border-radius: 16px 16px 0 0; }
    .quote-sticky-cta__inner { padding: 0.875rem 1.125rem 0.875rem; }
}

/* Mobil — gerçek bottom sheet hissi */
@media (max-width: 640px) {
    .quote-sticky-cta__sheet {
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -12px 36px rgba(0,0,0,0.16);
    }
    .quote-sticky-cta__handle { display: flex; align-items: center; justify-content: center; }
    .quote-sticky-cta__inner {
        padding: 0.5rem 1rem 0.875rem;
        flex-direction: column;
        align-items: stretch;
        gap: 0.625rem;
    }
    .quote-sticky-cta__route {
        grid-template-columns: auto 1fr;
        gap: 0.25rem 0.5rem;
    }
    .quote-sticky-cta__addr { font-size: 0.875rem; }
    .quote-sticky-cta__meta { font-size: 0.75rem; gap: 0.375rem; }
    .quote-sticky-cta__action {
        justify-content: space-between;
    }
    .quote-sticky-cta__btn {
        flex: 1 1 auto;
        justify-content: center;
        padding: 0.875rem 1.125rem;
        font-size: 0.9375rem;
    }
    .quote-sticky-cta__price { font-size: 1rem; }
}

/* === Bottom-sheet expand/collapse + mini araç listesi (mobil) === */
.quote-sticky-cta__list {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.quote-sticky-cta__expand {
    display: none;
    align-items: center; justify-content: center; gap: 0.375rem;
    background: transparent;
    color: var(--ink-700);
    padding: 0.5rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border-radius: var(--radius-pill);
}
.quote-sticky-cta__expand-chev { transition: transform .2s ease; }
.quote-sticky-cta__sheet[data-collapsed="0"] .quote-sticky-cta__expand-chev { transform: rotate(180deg); }

.vehicle-mini {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1.5px solid var(--border);
    border-radius: 14px;
    background: var(--surface);
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, transform .12s ease;
}
.vehicle-mini:hover { border-color: var(--ink-300); }
.vehicle-mini:active { transform: scale(0.99); }
.vehicle-mini.is-selected {
    border-color: var(--ink-900);
    background: var(--ink-50);
    box-shadow: 0 0 0 1px var(--ink-900) inset;
}
.vehicle-mini__media {
    width: 56px; height: 42px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--ink-50);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-400);
    flex-shrink: 0;
}
.vehicle-mini__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vehicle-mini__body { display: flex; flex-direction: column; gap: 0.125rem; min-width: 0; }
.vehicle-mini__name {
    font-size: 0.875rem; font-weight: 700; color: var(--ink-900);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vehicle-mini__caps {
    display: flex; gap: 0.625rem; align-items: center;
    font-size: 0.75rem; color: var(--ink-500);
    flex-wrap: nowrap; overflow: hidden;
}
.vehicle-mini__caps span { display: inline-flex; gap: 0.25rem; align-items: center; white-space: nowrap; }
.vehicle-mini__feat { color: var(--ink-700); font-weight: 500; }
.vehicle-mini__price {
    font-size: 0.9375rem; font-weight: 800; color: var(--ink-900);
    letter-spacing: -0.01em;
    flex-shrink: 0;
}

/* Bottom-sheet altında sayfa içeriği gizli kalmasın */
@media (max-width: 1024px) {
    body:has(.quote-sticky-cta) .quote-page { padding-bottom: 9rem; }
}
@media (max-width: 640px) {
    body:has(.quote-sticky-cta) .quote-page { padding-bottom: 12rem; }

    /* Mobilde mini liste sheet içinde devreye girer */
    .quote-sticky-cta__list {
        display: flex;
        max-height: 40vh; /* expand'de daha geniş */
    }
    .quote-sticky-cta__sheet[data-collapsed="1"] .quote-sticky-cta__list {
        max-height: calc(2 * 64px + 0.5rem); /* sadece ilk 2 araç görünür */
        overflow: hidden;
    }
    .quote-sticky-cta__expand { display: inline-flex; align-self: center; }
}

/* Google Places autocomplete dropdown — sheet'in üstünde ve mobilde geniş */
.pac-container {
    z-index: 1051 !important;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    border: 1px solid var(--border);
    margin-top: 4px;
    font-family: inherit;
}

/* iOS Safari auto-zoom önleme: input font-size ≥ 16px olmalı.
   Search bar input'ları daha küçük tipografi gibi görünüyor olabilir;
   render'daki computed font-size'ı 16px'e zorla. */
@media (max-width: 640px) {
    .search-bar input[type="text"],
    .search-bar input[type="search"],
    .search-bar input[type="tel"],
    .search-bar input[type="email"],
    .search-bar input[type="number"],
    .search-bar input[type="date"],
    .search-bar input[type="datetime-local"] {
        font-size: 16px;
    }
}

/* === Reduced motion === */
@media (prefers-reduced-motion: reduce) {
    .vehicle-card--quote,
    .route-map__path,
    .route-map__label,
    .route-map__chip,
    .quote-sticky-cta {
        animation: none !important;
        transition: none !important;
    }
    .js .vehicle-card--quote.js-reveal { opacity: 1; transform: none; }
    .route-map__path { stroke-dashoffset: 0; }
}


/* ============================================================
   CHECKOUT
   ============================================================ */
.checkout-page { padding: 2rem 0 6rem; }
.checkout-grid {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 2rem;
    align-items: start;
}
@media (max-width: 1024px) { .checkout-grid { grid-template-columns: 1fr; gap: 1.25rem; } }

.checkout-summary { position: sticky; top: 132px; }
@media (max-width: 1024px) { .checkout-summary { position: static; } }

.checkout-card {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow);
}
.checkout-vehicle { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; align-items: center; }
.checkout-vehicle__media {
    aspect-ratio: 1; background: linear-gradient(135deg, var(--ink-100), var(--ink-50));
    border-radius: var(--radius); overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-700);
}
.checkout-vehicle__media img { width: 100%; height: 100%; object-fit: cover; }
.checkout-vehicle__body h2 { font-size: 1.0625rem; font-weight: 700; color: var(--ink-900); letter-spacing: -.01em; }
.checkout-vehicle__caps {
    margin-top: 0.375rem;
    display: flex; gap: 0.75rem;
    font-size: 0.8125rem; color: var(--ink-500); font-weight: 500;
}
.checkout-vehicle__caps span { display: inline-flex; align-items: center; gap: 0.3rem; }
.checkout-vehicle__caps svg { color: var(--ink-400); }

.checkout-detail {
    list-style: none;
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px dashed var(--border);
    display: flex; flex-direction: column; gap: 0.625rem;
}
.checkout-detail li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.checkout-detail__label { color: var(--ink-500); }
.checkout-detail__val { color: var(--ink-900); font-weight: 600; font-variant-numeric: tabular-nums; }

.checkout-total {
    margin-top: 1.25rem; padding-top: 1.25rem;
    border-top: 1px solid var(--border);
    display: flex; justify-content: space-between; align-items: baseline;
}
.checkout-total__label { font-size: 0.875rem; color: var(--ink-500); }
.checkout-total__amount {
    font-size: 1.875rem; font-weight: 800; color: var(--ink-900);
    letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.checkout-total__amount small { font-size: 1rem; font-weight: 700; margin-left: 0.25rem; }
.checkout-total__note {
    margin-top: 0.5rem; font-size: 0.75rem; color: var(--ink-500);
    text-align: right;
}

/* === Form === */
.checkout-form-wrap { display: flex; flex-direction: column; gap: 1rem; }
.checkout-flash {
    padding: 1rem 1.25rem; border-radius: var(--radius);
    font-size: 0.875rem;
}
.checkout-flash--warning { background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412; }
.checkout-flash--error { background: #fee2e2; border: 1px solid #fecaca; color: #991b1b; }
.checkout-flash ul { margin-top: 0.375rem; padding-left: 1.25rem; list-style: disc; }

/* === Booking disabled notice (BOOKINGS_ENABLED=false) === */
.booking-notice {
    display: flex; align-items: flex-start; gap: 0.875rem;
    padding: 1rem 1.25rem;
    border-radius: var(--radius-lg);
    background: #fffbea;
    border: 1px solid #fde68a;
    color: #78350f;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.booking-notice svg { flex-shrink: 0; margin-top: 2px; color: #b45309; }
.booking-notice strong { display: block; font-weight: 700; font-size: 0.9375rem; margin-bottom: 0.25rem; }
.booking-notice p { margin: 0; font-size: 0.875rem; line-height: 1.5; }
.booking-notice--error {
    background: #fef2f2;
    border-color: #fecaca;
    color: #991b1b;
}
.booking-notice--error svg { color: #dc2626; }
.booking-notice--test {
    background: #ecfeff;
    border-color: #a5f3fc;
    color: #155e75;
}
.booking-notice--test svg { color: #0891b2; }

/* === CAPTCHA (simple math) === */
.checkout-captcha { margin-top: 0.5rem; }
.checkout-captcha__row {
    display: flex; align-items: center; gap: 0.875rem;
    padding: 0.75rem 1rem;
    background: var(--ink-50);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}
.checkout-captcha__q {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1rem; font-weight: 700; color: var(--ink-900);
    letter-spacing: 0.04em;
    user-select: none;
    padding: 0.375rem 0.75rem;
    background: var(--surface);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
}
.checkout-captcha__input {
    flex: 0 0 6rem;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    font-size: 1rem; font-weight: 600; text-align: center;
}
.checkout-captcha__help { display: block; margin-top: 0.5rem; font-size: 0.8125rem; color: var(--ink-500); }
.checkout-captcha__err  { display: block; margin-top: 0.375rem; font-size: 0.8125rem; color: #dc2626; }
.checkout-submit:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    background: var(--ink-700);
}
.checkout-submit:disabled:hover { background: var(--ink-700); }

.checkout-form {
    display: flex; flex-direction: column; gap: 1rem;
}
.checkout-fs {
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    padding: 1.5rem;
}
.checkout-fs legend {
    padding: 0 0.5rem;
    font-size: 0.75rem; font-weight: 700; color: var(--ink-500);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-left: -0.5rem;
}
.checkout-row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem;
    margin-bottom: 0.875rem;
}
.checkout-row:last-child { margin-bottom: 0; }
@media (max-width: 640px) { .checkout-row { grid-template-columns: 1fr; } }

.checkout-field { display: flex; flex-direction: column; gap: 0.375rem; }
.checkout-field > span {
    font-size: 0.8125rem; font-weight: 600; color: var(--ink-700);
}
.checkout-field > span em { color: #dc2626; font-style: normal; }
.checkout-field input:not(.dt-pair__input):not([type="hidden"]),
.checkout-field textarea {
    width: 100%;
    padding: 0.75rem 0.875rem;
    background: var(--bg-soft);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    font: inherit;
    color: var(--ink-900);
    transition: border-color .15s, background .15s, box-shadow .15s;
}
.checkout-field input:not(.dt-pair__input):focus,
.checkout-field textarea:focus {
    outline: none;
    background: var(--surface);
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.05);
}
.checkout-field textarea { resize: vertical; min-height: 76px; }

/* === Pay options === */
.pay-options {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem;
}
@media (max-width: 640px) { .pay-options { grid-template-columns: 1fr; } }

.pay-option { position: relative; cursor: pointer; }
.pay-option input { position: absolute; opacity: 0; pointer-events: none; }
.pay-option__inner {
    display: grid; grid-template-columns: 40px 1fr; gap: 0.875rem;
    padding: 1rem;
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    transition: border-color .15s, box-shadow .15s, background .15s;
}
.pay-option:hover .pay-option__inner { border-color: var(--ink-700); }
.pay-option input:checked + .pay-option__inner {
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px var(--ink-900);
}
.pay-option__icon {
    width: 40px; height: 40px;
    border-radius: 10px;
    background: var(--ink-100);
    display: flex; align-items: center; justify-content: center;
    color: var(--ink-900);
}
.pay-option__body strong { display: block; font-size: 0.9375rem; color: var(--ink-900); }
.pay-option__body small {
    display: block; margin-top: 0.25rem;
    font-size: 0.8125rem; color: var(--ink-500); line-height: 1.5;
}

.pay-bank-info {
    margin-top: 1rem;
    padding: 1rem 1.125rem;
    background: var(--ink-50);
    border-radius: var(--radius);
    border: 1px dashed var(--border);
    font-size: 0.875rem; color: var(--ink-700);
}
.pay-bank-info[hidden] { display: none; }
.pay-bank-info strong { display: block; margin-bottom: 0.5rem; color: var(--ink-900); }
.pay-bank-info ol { padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.25rem; }

.checkout-empty-pay {
    padding: 1rem; background: #fef3c7; border-radius: var(--radius);
    color: #92400e; font-size: 0.875rem;
}

.checkout-terms {
    display: flex; gap: 0.625rem; align-items: flex-start;
    font-size: 0.8125rem; color: var(--ink-700); padding: 0.25rem;
}
.checkout-terms input { margin-top: 0.2rem; flex-shrink: 0; transform: scale(1.1); accent-color: var(--ink-900); }
.checkout-terms a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 2px; }

.checkout-submit {
    width: 100%;
    background: var(--ink-900); color: var(--white);
    padding: 1.125rem 1.5rem;
    border-radius: var(--radius-pill);
    font-size: 1rem; font-weight: 700;
    display: flex; align-items: center; justify-content: space-between;
    transition: background .18s, transform .18s, opacity .18s;
}
.checkout-submit:hover:not(:disabled) { background: var(--ink-700); transform: translateY(-1px); }
.checkout-submit:disabled { opacity: 0.7; cursor: progress; }
.checkout-submit.is-loading::after {
    content: ''; width: 16px; height: 16px;
    border-radius: 50%; margin-left: 0.5rem;
    border: 2px solid rgba(255,255,255,0.3); border-top-color: white;
    animation: cspin 0.8s linear infinite;
}
@keyframes cspin { to { transform: rotate(360deg); } }
.checkout-submit__price {
    background: rgba(255,255,255,0.14);
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-pill);
    font-size: 0.9375rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   SUCCESS PAGE
   ============================================================ */
.booking-success { padding: 3rem 1.5rem 6rem; background: var(--bg-soft); min-height: calc(100vh - 200px); }
.booking-success__inner { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; }

.booking-success__hero {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: var(--shadow);
}
.success-icon {
    width: 72px; height: 72px; border-radius: 50%;
    margin: 0 auto 1.25rem;
    display: flex; align-items: center; justify-content: center;
    color: var(--white);
    animation: successPop 0.5s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes successPop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.success-icon--ok      { background: linear-gradient(135deg, #10b981, #059669); }
.success-icon--pending { background: linear-gradient(135deg, var(--ink-700), var(--ink-900)); }
.booking-success__hero h1 { font-size: 1.75rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; }
.success-sub { margin-top: 0.5rem; color: var(--ink-500); font-size: 0.9375rem; }

.success-code {
    display: inline-flex; align-items: center; gap: 0.875rem;
    margin-top: 1.5rem;
    padding: 0.875rem 1.25rem;
    background: var(--bg-soft);
    border: 1.5px dashed var(--border);
    border-radius: var(--radius-lg);
}
.success-code__label { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; color: var(--ink-500); }
.success-code__value { font-family: ui-monospace, 'SF Mono', monospace; font-size: 1.125rem; font-weight: 700; color: var(--ink-900); letter-spacing: 0.05em; }
.success-code__copy {
    display: inline-flex; align-items: center; gap: 0.375rem;
    padding: 0.375rem 0.75rem;
    background: var(--ink-900); color: var(--white);
    border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 600;
    transition: background .15s;
}
.success-code__copy:hover { background: var(--ink-700); }

.success-bank {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.success-bank header {
    display: flex; align-items: center; gap: 0.625rem;
    margin-bottom: 1rem;
}
.success-bank header h2 { font-size: 1.0625rem; font-weight: 700; color: var(--ink-900); }
.success-bank__pre {
    background: var(--bg-soft);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.875rem;
    color: var(--ink-900);
    white-space: pre-wrap;
    word-break: break-word;
    margin-bottom: 1rem;
}
.success-bank__note {
    font-size: 0.8125rem; color: var(--ink-700);
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: var(--radius);
    padding: 0.75rem 1rem;
}
.success-bank__note code { background: #fde68a; padding: 0.125rem 0.375rem; border-radius: 4px; font-family: ui-monospace, 'SF Mono', monospace; }
.success-bank__amount {
    margin-top: 1rem;
    display: flex; justify-content: space-between; align-items: baseline;
    padding-top: 1rem; border-top: 1px dashed var(--border);
}
.success-bank__amount span { font-size: 0.875rem; color: var(--ink-500); }
.success-bank__amount strong { font-size: 1.5rem; font-weight: 800; color: var(--ink-900); letter-spacing: -0.02em; }

.success-trip,
.success-customer {
    background: var(--surface);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    box-shadow: var(--shadow-sm);
}
.success-trip h2,
.success-customer h3 {
    font-size: 1.0625rem; font-weight: 700; color: var(--ink-900);
    margin-bottom: 1rem;
}
.success-trip__route {
    display: grid; grid-template-columns: auto 24px auto; gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}
@media (max-width: 640px) {
    .success-trip__route { grid-template-columns: 1fr; }
    .success-trip__line { display: none; }
}
.success-trip__point { display: flex; gap: 0.75rem; align-items: flex-start; }
.success-trip__pin {
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--ink-900); flex-shrink: 0;
    margin-top: 0.5rem;
    box-shadow: 0 0 0 4px rgba(0,0,0,0.06);
}
.success-trip__pin--dest { background: var(--white); border: 3px solid var(--ink-900); }
.success-trip__point small {
    font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-400); font-weight: 600;
}
.success-trip__point strong { display: block; margin: 0.125rem 0; color: var(--ink-900); font-size: 0.9375rem; }
.success-trip__point em { font-style: normal; font-size: 0.8125rem; color: var(--ink-500); }
.success-trip__line {
    height: 2px; background: var(--border);
    background-image: linear-gradient(90deg, var(--border) 50%, transparent 50%);
    background-size: 8px 2px; background-repeat: repeat-x;
}

.success-trip__meta {
    list-style: none;
    border-top: 1px dashed var(--border);
    padding-top: 1rem;
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.875rem 1.5rem;
}
@media (max-width: 640px) { .success-trip__meta { grid-template-columns: 1fr; } }
.success-trip__meta li { display: flex; justify-content: space-between; gap: 1rem; font-size: 0.875rem; }
.success-trip__meta span { color: var(--ink-500); }
.success-trip__meta strong { color: var(--ink-900); font-weight: 600; text-align: right; }

.success-status {
    display: inline-block;
    padding: 0.125rem 0.625rem;
    border-radius: var(--radius-pill);
    font-size: 0.75rem; font-weight: 700;
    background: var(--ink-100); color: var(--ink-700);
}
.success-status--confirmed { background: #d1fae5; color: #047857; }
.success-status--pending   { background: #fef3c7; color: #92400e; }
.success-status--cancelled { background: #fee2e2; color: #991b1b; }

.success-customer ul { list-style: none; display: flex; flex-direction: column; gap: 0.375rem; font-size: 0.875rem; color: var(--ink-700); }
.success-customer__notes {
    margin-top: 0.875rem; padding: 0.75rem 1rem;
    background: var(--bg-soft); border-radius: var(--radius);
    font-size: 0.875rem; color: var(--ink-700); line-height: 1.5;
}

.success-actions {
    display: flex; gap: 0.75rem; flex-wrap: wrap;
    margin-top: 0.5rem;
}
.success-actions__primary {
    flex: 1; min-width: 200px;
    background: var(--ink-900); color: var(--white);
    padding: 1rem 1.25rem; border-radius: var(--radius-pill);
    text-align: center; font-weight: 700; text-decoration: none;
    transition: background .15s, transform .15s;
}
.success-actions__primary:hover { background: var(--ink-700); transform: translateY(-1px); }
.success-actions__secondary {
    flex: 1; min-width: 200px;
    background: var(--surface); color: var(--ink-900);
    border: 1.5px solid var(--border);
    padding: 1rem 1.25rem; border-radius: var(--radius-pill);
    font-weight: 700;
    transition: border-color .15s;
}
.success-actions__secondary:hover { border-color: var(--ink-900); }

@media print {
    .success-actions, .header, .footer { display: none !important; }
    .booking-success { background: white; padding: 0; }
    .booking-success__hero,
    .success-bank,
    .success-trip,
    .success-customer { box-shadow: none; border-color: #ccc; break-inside: avoid; }
}

/* ─────────────────────── POPULAR ROUTES ─────────────────────── */
.section--popular-routes { padding-top: 3rem; }
.popular-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    max-width: 1200px;
    margin: 0 auto;            /* tam orta hizalama */
    padding: 0 1rem;
}
.popular-route-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    text-decoration: none;
    color: var(--ink-900);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    display: flex; flex-direction: column;
}
.popular-route-card:hover,
.popular-route-card:focus-visible {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--ink-300);
}
.popular-route-card__media {
    position: relative;
    aspect-ratio: 16 / 9;
    background: linear-gradient(135deg, var(--ink-100) 0%, var(--ink-50) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.popular-route-card__media img,
.popular-route-card__route { width: 100%; height: 100%; object-fit: cover; display: block; }
.popular-route-card__placeholder {
    color: var(--ink-400);
}
.popular-route-card__price {
    position: absolute; bottom: 0.625rem; right: 0.625rem;
    background: rgba(255,255,255,0.96);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 0.375rem 0.625rem;
    text-align: right;
    line-height: 1.1;
    box-shadow: var(--shadow-sm);
}
.popular-route-card__price small {
    display: block;
    font-size: 0.625rem;
    color: var(--ink-500);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.popular-route-card__price strong {
    font-size: 0.95rem;
    color: var(--ink-900);
}
.popular-route-card__body {
    padding: 1rem 1.125rem 1.25rem;
    display: flex; flex-direction: column; gap: 0.5rem;
}
.popular-route-card__title {
    font-size: 1rem; font-weight: 700;
    color: var(--ink-900); line-height: 1.3;
    margin: 0;
}
.popular-route-card__route-text {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8125rem; color: var(--ink-500);
    line-height: 1.3;
}
.popular-route-card__route-text svg { color: var(--ink-300); flex-shrink: 0; }
.popular-route-card__from,
.popular-route-card__to {
    flex: 1 1 0; min-width: 0;
    text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
}
.popular-route-card__desc {
    font-size: 0.8125rem; color: var(--ink-500);
    line-height: 1.45; margin: 0.125rem 0 0;
}

/* Mobile: tek kolon, ortalı */
@media (max-width: 640px) {
    .popular-routes-grid {
        grid-template-columns: 1fr;
        max-width: 480px;
    }
    .popular-route-card__media { aspect-ratio: 16 / 8; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HEADER MENÜ SAYFALARI — Rezervasyonlarım / Acenteler / Filomuz /
   Havalimanları / Yardım Merkezi
   Tasarım dili: temiz beyaz zemin, geniş boşluk, yuvarlak köşe, premium UX
   ═══════════════════════════════════════════════════════════════════════ */

.page-container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 1.5rem;
}
@media (max-width: 640px) {
    .page-container { padding: 0 1rem; }
}

/* ── Page hero (paylaşılan banner) ──────────────────────────────────── */
.page-hero {
    position: relative;
    background: linear-gradient(180deg, var(--ink-50) 0%, var(--white) 100%);
    border-bottom: 1px solid var(--border);
    padding: 4rem 1.5rem 3rem;
    text-align: center;
    isolation: isolate;
}
/* Bg image variant — admin "Görsel Yönetimi → Sayfa Görselleri"'nden yüklenen görsel.
   --page-hero-bg değişkeni page-hero.blade.php tarafından inline style ile set edilir. */
.page-hero--has-bg { color: var(--white); }
.page-hero--has-bg .page-hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--page-hero-bg) center/cover no-repeat;
}
.page-hero--has-bg .page-hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0.75) 100%);
}
.page-hero--has-bg .page-hero__title { color: var(--white); }
.page-hero--has-bg .page-hero__lede  { color: rgba(255, 255, 255, 0.92); }
.page-hero--has-bg .page-hero__eyebrow {
    background: rgba(255, 255, 255, 0.12);
    color: var(--white);
    border-color: rgba(255, 255, 255, 0.25);
    backdrop-filter: blur(4px);
}
.page-hero__inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}
.page-hero__eyebrow {
    display: inline-block;
    font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.18em; text-transform: uppercase;
    color: var(--ink-500);
    background: var(--white);
    border: 1px solid var(--border);
    padding: 0.4rem 0.9rem;
    border-radius: var(--radius-pill);
    margin-bottom: 1rem;
}
.page-hero__title {
    font-size: clamp(1.875rem, 3.5vw, 2.75rem);
    font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.025em;
    line-height: 1.1;
    margin: 0 0 0.875rem;
}
.page-hero__lede {
    font-size: 1.0625rem; line-height: 1.6;
    color: var(--ink-500);
    margin: 0 auto;
    max-width: 600px;
}
@media (max-width: 640px) {
    .page-hero { padding: 2.5rem 1rem 2rem; }
    .page-hero__lede { font-size: 0.9375rem; }
}

/* ── Page section (her sayfanın ana içerik bloğu) ───────────────────── */
.page-section {
    padding: 3rem 0 5rem;
}
@media (max-width: 640px) {
    .page-section { padding: 2rem 0 4rem; }
}

/* ── Empty state ────────────────────────────────────────────────────── */
.empty-state {
    text-align: center;
    padding: 3rem 1.5rem;
    background: var(--surface);
    border: 1px dashed var(--border);
    border-radius: var(--radius-lg);
    color: var(--ink-500);
}
.empty-state h3 { color: var(--ink-900); margin-bottom: 0.5rem; }

/* ── Info card (açıklama kutusu) ────────────────────────────────────── */
.info-card {
    display: flex; gap: 1rem; align-items: flex-start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.25rem 1.5rem;
    margin-top: 2rem;
}
.info-card--centered {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}
.info-card__icon {
    flex-shrink: 0;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ink-50);
    color: var(--ink-700);
    display: grid; place-items: center;
}
.info-card h4 {
    font-size: 0.9375rem; font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 0.25rem;
}
.info-card p {
    font-size: 0.875rem; line-height: 1.55;
    color: var(--ink-500);
    margin: 0;
}

/* ── Badges (status etiketleri) ─────────────────────────────────────── */
.badge {
    display: inline-flex; align-items: center;
    padding: 0.3rem 0.7rem;
    font-size: 0.75rem; font-weight: 700;
    border-radius: var(--radius-pill);
    letter-spacing: 0.02em;
}
.badge--green  { background: #ecfdf5; color: #047857; }
.badge--amber  { background: #fffbeb; color: #b45309; }
.badge--red    { background: #fef2f2; color: #b91c1c; }
.badge--gray   { background: var(--ink-100); color: var(--ink-700); }

/* ─────────────────────────────────────────────────────────────────────
   1) REZERVASYONLARIM — Lookup form & sonuç kartı
   ───────────────────────────────────────────────────────────────────── */
.lookup-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    max-width: 760px;
    margin: 0 auto;
}
@media (max-width: 640px) {
    .lookup-card { padding: 1.5rem 1.25rem; }
}
.lookup-form { display: flex; flex-direction: column; gap: 1.25rem; }
.lookup-form__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}
@media (max-width: 640px) {
    .lookup-form__row { grid-template-columns: 1fr; }
}
.lookup-form__field {
    display: flex; flex-direction: column; gap: 0.4rem;
}
.lookup-form__label {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--ink-700);
}
.lookup-form__input {
    width: 100%;
    padding: 0.75rem 0.875rem;
    font-size: 0.9375rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink-900);
    transition: border-color .15s, box-shadow .15s;
}
.lookup-form__input:focus {
    outline: none;
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.lookup-form__error {
    color: #b91c1c; font-size: 0.75rem;
}
.lookup-form__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--ink-900); color: var(--white);
    border: none;
    padding: 0.875rem 1.5rem;
    font-size: 0.9375rem; font-weight: 700;
    border-radius: var(--radius);
    cursor: pointer;
    transition: background .15s, transform .12s;
    align-self: flex-start;
}
.lookup-form__submit:hover { background: var(--ink-700); transform: translateY(-1px); }
@media (max-width: 640px) {
    .lookup-form__submit { width: 100%; align-self: stretch; }
}

.lookup-result {
    margin-top: 2rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    max-width: 760px;
    margin-left: auto; margin-right: auto;
}
.lookup-result--empty {
    text-align: center;
    color: var(--ink-500);
}
.lookup-result--empty svg { color: var(--ink-300); margin: 0 auto 0.75rem; }
.lookup-result--empty h3 { color: var(--ink-900); margin: 0 0 0.5rem; }
.lookup-result__head {
    display: flex; justify-content: space-between; align-items: flex-start;
    flex-wrap: wrap; gap: 1rem;
    padding-bottom: 1.25rem;
    border-bottom: 1px solid var(--border);
    margin-bottom: 1.5rem;
}
.lookup-result__eyebrow {
    display: block;
    font-size: 0.75rem; font-weight: 600;
    color: var(--ink-500);
    text-transform: uppercase; letter-spacing: 0.08em;
    margin-bottom: 0.375rem;
}
.lookup-result__code {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 1.5rem; font-weight: 800;
    color: var(--ink-900); letter-spacing: 0.02em;
    margin: 0;
}
.lookup-result__badges {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.lookup-result__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.25rem 2rem;
    margin: 0 0 1.5rem;
}
.lookup-result__grid dt {
    font-size: 0.75rem; color: var(--ink-500);
    text-transform: uppercase; letter-spacing: 0.06em;
    margin-bottom: 0.25rem;
}
.lookup-result__grid dd {
    font-size: 0.9375rem; font-weight: 600;
    color: var(--ink-900);
    margin: 0;
}
.lookup-result__foot { padding-top: 1.25rem; border-top: 1px solid var(--border); }
.btn-ghost {
    display: inline-flex; align-items: center; gap: 0.5rem;
    padding: 0.625rem 1rem;
    font-size: 0.875rem; font-weight: 600;
    color: var(--ink-700);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--ink-700); background: var(--ink-50); }

/* ─────────────────────────────────────────────────────────────────────
   2) ACENTELER — Avantaj kartları + başvuru formu
   ───────────────────────────────────────────────────────────────────── */
.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1.25rem;
    margin-bottom: 3.5rem;
}
.feature-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.feature-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--ink-300);
}
.feature-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ink-900);
    color: var(--white);
    display: grid; place-items: center;
    margin-bottom: 1rem;
}
.feature-card__title {
    font-size: 1.0625rem; font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 0.5rem;
    line-height: 1.3;
}
.feature-card__desc {
    font-size: 0.875rem; line-height: 1.6;
    color: var(--ink-500);
    margin: 0;
}

.apply-grid {
    display: grid;
    grid-template-columns: 1fr 1.4fr;
    gap: 2.5rem;
    align-items: start;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 2.5rem;
}
@media (max-width: 1024px) {
    .apply-grid { grid-template-columns: 1fr; gap: 2rem; padding: 1.75rem; }
}
.apply-grid__intro h2 {
    font-size: 1.5rem; font-weight: 800;
    color: var(--ink-900);
    margin: 0 0 0.625rem;
    letter-spacing: -0.015em;
}
.apply-grid__intro > p {
    font-size: 0.9375rem; line-height: 1.6;
    color: var(--ink-500);
    margin: 0 0 1.25rem;
}
.apply-grid__perks {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 0.625rem;
}
.apply-grid__perks li {
    display: flex; align-items: center; gap: 0.625rem;
    font-size: 0.875rem; font-weight: 500;
    color: var(--ink-700);
}
.apply-grid__perks svg { color: #047857; flex-shrink: 0; }

.apply-form { display: flex; flex-direction: column; gap: 1rem; }
.apply-form__row {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;
}
@media (max-width: 640px) {
    .apply-form__row { grid-template-columns: 1fr; }
}
.apply-form__field {
    display: flex; flex-direction: column; gap: 0.375rem;
}
.apply-form__field span {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--ink-700);
}
.apply-form__field input,
.apply-form__field textarea {
    width: 100%;
    padding: 0.7rem 0.875rem;
    font-size: 0.9375rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    color: var(--ink-900);
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
.apply-form__field textarea { resize: vertical; min-height: 100px; }
.apply-form__field input:focus,
.apply-form__field textarea:focus {
    outline: none;
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.apply-form__error { color: #b91c1c; font-size: 0.75rem; margin-top: 0.125rem; }
.apply-form__submit {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    background: var(--ink-900); color: var(--white);
    border: none;
    padding: 0.875rem 1.75rem;
    font-size: 0.9375rem; font-weight: 700;
    border-radius: var(--radius);
    cursor: pointer;
    align-self: flex-start;
    transition: background .15s, transform .12s, gap .18s;
}
.apply-form__submit:hover { background: var(--ink-700); transform: translateY(-1px); gap: 0.75rem; }
@media (max-width: 640px) {
    .apply-form__submit { width: 100%; align-self: stretch; }
}

.apply-success {
    text-align: center;
    padding: 2.5rem 1.5rem;
}
.apply-success svg { color: #047857; margin: 0 auto 1rem; }
.apply-success h3 { font-size: 1.25rem; color: var(--ink-900); margin: 0 0 0.5rem; }
.apply-success p { color: var(--ink-500); font-size: 0.9375rem; margin: 0; }

/* ─────────────────────────────────────────────────────────────────────
   3) FİLOMUZ — Premium fleet grid (dikey kart)
   ───────────────────────────────────────────────────────────────────── */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.fleet-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex; flex-direction: column;
    transition: transform .22s, box-shadow .22s, border-color .22s;
}
.fleet-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: var(--ink-300);
}
.fleet-card__media {
    aspect-ratio: 16 / 11;
    background: linear-gradient(135deg, var(--ink-100) 0%, var(--ink-50) 100%);
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    padding: 1rem;
    color: var(--ink-700);
}
.fleet-card__media img {
    max-width: 100%; max-height: 100%;
    width: auto; height: auto;
    object-fit: contain;
    object-position: center center;
    margin: auto;
    display: block;
}
.fleet-card__media svg { width: 80%; }
.fleet-card__body {
    padding: 1.25rem 1.375rem 1.5rem;
    display: flex; flex-direction: column; gap: 0.875rem;
    flex: 1;
}
.fleet-card__name {
    font-size: 1.125rem; font-weight: 800;
    color: var(--ink-900);
    letter-spacing: -0.015em;
    margin: 0;
    line-height: 1.25;
}
.fleet-card__caps {
    display: flex; gap: 1rem; flex-wrap: wrap;
    list-style: none; padding: 0; margin: 0;
    color: var(--ink-500);
    font-size: 0.875rem; font-weight: 500;
}
.fleet-card__caps li {
    display: inline-flex; align-items: center; gap: 0.375rem;
}
.fleet-card__caps svg { color: var(--ink-400); }
.fleet-card__desc {
    font-size: 0.875rem; line-height: 1.55;
    color: var(--ink-500);
    margin: 0;
}
.fleet-card__features {
    display: flex; flex-wrap: wrap; gap: 0.375rem;
    list-style: none; padding: 0; margin: 0;
}
.fleet-card__features li {
    background: var(--ink-100);
    color: var(--ink-700);
    font-size: 0.75rem; font-weight: 600;
    padding: 0.25rem 0.625rem;
    border-radius: var(--radius-pill);
}
.fleet-card__features-more { background: var(--ink-200) !important; color: var(--ink-600) !important; }
.fleet-card__cta {
    margin-top: auto;
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--ink-900); font-weight: 700;
    font-size: 0.875rem;
    transition: gap .18s;
    padding-top: 0.25rem;
}
.fleet-card__cta:hover { gap: 0.6rem; }
.fleet-card__cta svg { color: var(--ink-700); }

/* ─────────────────────────────────────────────────────────────────────
   4) HAVALİMANLARI — Airport cards
   ───────────────────────────────────────────────────────────────────── */
.airport-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
    margin-bottom: 2.5rem;
}
.airport-card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex; flex-direction: column;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.airport-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: var(--ink-300);
}
.airport-card__head {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 1rem;
}
.airport-card__iata {
    font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.8125rem; font-weight: 800;
    color: var(--ink-900);
    background: var(--ink-100);
    padding: 0.3rem 0.625rem;
    border-radius: var(--radius-pill);
    letter-spacing: 0.04em;
}
.airport-card__icon {
    color: var(--ink-700);
    width: 36px; height: 36px;
    display: grid; place-items: center;
    background: var(--ink-50);
    border-radius: 10px;
}
.airport-card__name {
    font-size: 1.0625rem; font-weight: 700;
    color: var(--ink-900);
    margin: 0 0 0.25rem;
    line-height: 1.3;
}
.airport-card__city {
    font-size: 0.8125rem; font-weight: 600;
    color: var(--ink-500);
    margin: 0 0 0.875rem;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.airport-card__desc {
    font-size: 0.875rem; line-height: 1.55;
    color: var(--ink-500);
    margin: 0 0 1.25rem;
    flex: 1;
}
.airport-card__cta {
    display: inline-flex; align-items: center; gap: 0.4rem;
    color: var(--ink-900); font-weight: 700;
    font-size: 0.875rem;
    margin-top: auto;
    transition: gap .18s;
}
.airport-card__cta:hover { gap: 0.6rem; }

/* ─────────────────────────────────────────────────────────────────────
   5) YARDIM MERKEZİ — Search + FAQ accordion + contact cards
   ───────────────────────────────────────────────────────────────────── */
.help-search {
    display: flex; align-items: center; gap: 0.625rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0.75rem 1.125rem;
    margin: 0 auto 2.5rem;
    max-width: 720px;
    transition: border-color .15s, box-shadow .15s;
}
.help-search:focus-within {
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0,0,0,0.06);
}
.help-search > svg { color: var(--ink-400); flex-shrink: 0; }
.help-search__input {
    flex: 1;
    border: none; background: transparent;
    font-size: 1rem; color: var(--ink-900);
    outline: none;
}
.help-search__input::placeholder { color: var(--ink-400); }
.help-search__clear {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    color: var(--ink-500);
    border-radius: 50%;
    transition: background .15s, color .15s;
}
.help-search__clear:hover { background: var(--ink-100); color: var(--ink-900); }

.faq-categories {
    display: flex; flex-direction: column;
    gap: 2rem;
    max-width: 880px;
    margin: 0 auto 2.5rem;
}
.faq-category {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    overflow: hidden;
}
.faq-category__head {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--border);
    background: var(--ink-50);
}
.faq-category__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--ink-900);
    color: var(--white);
    display: grid; place-items: center;
}
.faq-category__title {
    font-size: 1.0625rem; font-weight: 800;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -0.01em;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
    border-bottom: 1px solid var(--border);
}
.faq-item:last-child { border-bottom: none; }
.faq-item__q {
    list-style: none;
    cursor: pointer;
    padding: 1.125rem 1.5rem;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem;
    font-size: 0.9375rem; font-weight: 600;
    color: var(--ink-900);
    transition: background .15s;
}
.faq-item__q::-webkit-details-marker { display: none; }
.faq-item__q:hover { background: var(--ink-50); }
.faq-item__chev {
    color: var(--ink-500);
    transition: transform .18s;
    flex-shrink: 0;
}
.faq-item[open] .faq-item__chev { transform: rotate(180deg); }
.faq-item__a {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.9375rem; line-height: 1.65;
    color: var(--ink-500);
}
.faq-item__a p { margin: 0; }

/* Contact cards */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 880px;
    margin: 0 auto;
}
.contact-card {
    display: flex; align-items: center; gap: 0.875rem;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 1.125rem 1.375rem;
    transition: transform .2s, box-shadow .2s, border-color .2s;
}
.contact-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: var(--ink-300);
}
.contact-card__icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--ink-50);
    color: var(--ink-700);
    display: grid; place-items: center;
    flex-shrink: 0;
}
.contact-card--whatsapp .contact-card__icon { background: #ecfdf5; color: #047857; }
.contact-card strong {
    display: block;
    font-size: 0.9375rem; font-weight: 700;
    color: var(--ink-900);
}
.contact-card small {
    display: block;
    font-size: 0.8125rem;
    color: var(--ink-500);
}

/* ═══════════════════════════════════════════════════════════════════════
   FLATPICKR — CCN Tur premium siyah/beyaz tema
   Native HTML5 picker yerine Flatpickr kullanıyoruz; tüm cihazlarda
   (desktop/mobile) aynı elit görünüm.
   .flatpickr-ccn class'ı JS tarafında calendar container'a ekleniyor.
   ═══════════════════════════════════════════════════════════════════════ */

.flatpickr-calendar.flatpickr-ccn {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    padding: 0.5rem;
    width: 320px;
}
.flatpickr-calendar.flatpickr-ccn::before,
.flatpickr-calendar.flatpickr-ccn::after { display: none; } /* ufak ok kaldır */

/* Ay/Yıl başlığı */
.flatpickr-ccn .flatpickr-months {
    padding: 0.5rem 0.25rem 0.75rem;
    align-items: center;
}
.flatpickr-ccn .flatpickr-month {
    color: var(--ink-900);
    fill: var(--ink-900);
    height: 36px;
    border-radius: var(--radius-sm);
}
.flatpickr-ccn .flatpickr-current-month {
    font-size: 0.95rem;
    font-weight: 700;
    padding: 0;
    color: var(--ink-900);
    display: flex;
    align-items: center;
    justify-content: center;
    height: 36px;
}
.flatpickr-ccn .flatpickr-current-month .cur-month,
.flatpickr-ccn .flatpickr-current-month .cur-year {
    color: var(--ink-900);
    font-weight: 700;
}
.flatpickr-ccn .flatpickr-current-month input.cur-year {
    background: transparent;
    border: none;
    padding: 0 0.25rem;
    font-weight: 700;
}
.flatpickr-ccn .flatpickr-monthDropdown-months {
    background: var(--white);
    color: var(--ink-900);
    appearance: none;
    -webkit-appearance: none;
    border: none;
    font-weight: 700;
    padding: 0 0.25rem;
    border-radius: var(--radius-sm);
}
.flatpickr-ccn .flatpickr-monthDropdown-months:hover {
    background: var(--ink-100);
}
.flatpickr-ccn .flatpickr-monthDropdown-month {
    background: var(--white);
    color: var(--ink-900);
}

/* Önceki/Sonraki ok butonları */
.flatpickr-ccn .flatpickr-prev-month,
.flatpickr-ccn .flatpickr-next-month {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--ink-700);
    fill: var(--ink-700);
    transition: background .15s, color .15s;
    padding: 6px;
    top: 8px;
}
.flatpickr-ccn .flatpickr-prev-month:hover,
.flatpickr-ccn .flatpickr-next-month:hover {
    background: var(--ink-100);
    color: var(--ink-900);
    fill: var(--ink-900);
}
.flatpickr-ccn .flatpickr-prev-month svg,
.flatpickr-ccn .flatpickr-next-month svg {
    width: 14px;
    height: 14px;
}

/* Hafta günü kısaltmaları */
.flatpickr-ccn .flatpickr-weekdays {
    background: transparent;
    height: 32px;
    margin-top: 0.25rem;
}
.flatpickr-ccn .flatpickr-weekdaycontainer {
    gap: 0;
}
.flatpickr-ccn span.flatpickr-weekday {
    color: var(--ink-500);
    font-weight: 700;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: transparent;
}

/* Gün hücreleri */
.flatpickr-ccn .flatpickr-days {
    width: 100%;
    padding: 0.25rem 0;
}
.flatpickr-ccn .dayContainer {
    width: 100%;
    min-width: 0;
    max-width: none;
    padding: 0;
}
.flatpickr-ccn .flatpickr-day {
    color: var(--ink-900);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    max-width: none;
    height: 38px;
    line-height: 36px;
    margin: 1px;
    transition: background .12s, color .12s, border-color .12s;
}
.flatpickr-ccn .flatpickr-day:hover,
.flatpickr-ccn .flatpickr-day:focus {
    background: var(--ink-100);
    border-color: var(--ink-100);
    color: var(--ink-900);
}
/* Bugün — sadece border ile vurgu (siyah ince border) */
.flatpickr-ccn .flatpickr-day.today {
    background: transparent;
    border-color: var(--ink-300);
    color: var(--ink-900);
    font-weight: 700;
}
.flatpickr-ccn .flatpickr-day.today:hover {
    background: var(--ink-100);
    border-color: var(--ink-700);
}
/* Seçili gün — tam siyah dolgu, beyaz text */
.flatpickr-ccn .flatpickr-day.selected,
.flatpickr-ccn .flatpickr-day.selected:hover,
.flatpickr-ccn .flatpickr-day.selected:focus,
.flatpickr-ccn .flatpickr-day.startRange,
.flatpickr-ccn .flatpickr-day.endRange,
.flatpickr-ccn .flatpickr-day.startRange:hover,
.flatpickr-ccn .flatpickr-day.endRange:hover {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--white);
    font-weight: 700;
}
.flatpickr-ccn .flatpickr-day.inRange {
    background: var(--ink-100);
    border-color: var(--ink-100);
    color: var(--ink-900);
    box-shadow: none;
}
/* Pasif/önceki ay/devre dışı günler */
.flatpickr-ccn .flatpickr-day.prevMonthDay,
.flatpickr-ccn .flatpickr-day.nextMonthDay {
    color: var(--ink-300);
    font-weight: 400;
}
.flatpickr-ccn .flatpickr-day.flatpickr-disabled,
.flatpickr-ccn .flatpickr-day.flatpickr-disabled:hover {
    color: var(--ink-300);
    background: transparent;
    border-color: transparent;
    cursor: not-allowed;
    text-decoration: line-through;
}

/* Saat picker (datetime modunda alt kısım) */
.flatpickr-ccn .flatpickr-time {
    border-top: 1px solid var(--border);
    background: transparent;
    height: 48px;
    margin-top: 0.25rem;
    padding-top: 0.25rem;
}
.flatpickr-ccn .flatpickr-time input {
    background: transparent;
    color: var(--ink-900);
    font-weight: 700;
    font-size: 1.125rem;
    border-radius: var(--radius-sm);
    transition: background .12s;
}
.flatpickr-ccn .flatpickr-time input:hover,
.flatpickr-ccn .flatpickr-time input:focus {
    background: var(--ink-100);
}
.flatpickr-ccn .flatpickr-time .flatpickr-time-separator,
.flatpickr-ccn .flatpickr-time .flatpickr-am-pm {
    color: var(--ink-700);
    font-weight: 700;
}
.flatpickr-ccn .flatpickr-time .numInputWrapper {
    height: 36px;
}
.flatpickr-ccn .flatpickr-time .numInputWrapper:hover { background: transparent; }
.flatpickr-ccn .flatpickr-time .numInputWrapper span.arrowUp,
.flatpickr-ccn .flatpickr-time .numInputWrapper span.arrowDown {
    border: none;
    opacity: 0.6;
    width: 14px;
}
.flatpickr-ccn .flatpickr-time .numInputWrapper span.arrowUp::after { border-bottom-color: var(--ink-700); }
.flatpickr-ccn .flatpickr-time .numInputWrapper span.arrowDown::after { border-top-color: var(--ink-700); }
.flatpickr-ccn .flatpickr-time .numInputWrapper:hover span.arrowUp,
.flatpickr-ccn .flatpickr-time .numInputWrapper:hover span.arrowDown {
    opacity: 1;
}

/* Time-only modu için kompakt görünüm */
.flatpickr-ccn.noCalendar .flatpickr-time {
    border-top: none;
    height: 56px;
    padding-top: 0.5rem;
}

/* Mobil — bottom-sheet vari, ekrana sığsın */
@media (max-width: 640px) {
    .flatpickr-calendar.flatpickr-ccn {
        width: calc(100vw - 24px) !important;
        max-width: 360px;
        font-size: 0.95rem;
    }
    .flatpickr-ccn .flatpickr-day {
        height: 42px;
        line-height: 40px;
    }
    .flatpickr-ccn .flatpickr-time input {
        font-size: 1.25rem;
    }
}

/* Native datetime-local input'unun browser ikonunu gizle (Flatpickr kendi ikonunu kullanıyor) */
.search-field input[data-datetime]::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}
/* Aktif input — güvenlik için, eski 'onfocus type-toggle' kalıntılarını engelle */
input[data-datetime][readonly]:not([disabled]) {
    background: var(--white);
    cursor: pointer;
}

/* Time-only modu için kompakt kalsın */
.flatpickr-calendar.flatpickr-ccn--time-only {
    width: 200px !important;
    min-width: 200px;
}
@media (max-width: 640px) {
    .flatpickr-calendar.flatpickr-ccn--time-only {
        width: 220px !important;
        max-width: 220px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   COMPOSITE DATE + TIME PICKER (.dt-pair)
   Tek kart içinde tarih ve saat ayrı; aralarında ayırıcı çizgi.
   --inline  : hero/search-bar içinde compact (default flex row)
   --block   : checkout/form içinde büyük kart (mobilde alt alta)
   ═══════════════════════════════════════════════════════════════════════ */

.dt-pair {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
}
.dt-pair__row {
    display: flex;
    align-items: stretch;
}
.dt-pair__field {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 1 0;
    min-width: 0;
    cursor: pointer;
    transition: background .12s;
}
.dt-pair__field:hover { background: var(--ink-50); }
.dt-pair__field:focus-within {
    background: var(--ink-50);
}
.dt-pair__icon {
    color: var(--ink-500);
    flex-shrink: 0;
    width: 18px; height: 18px;
    display: grid; place-items: center;
}
.dt-pair__body {
    flex: 1; min-width: 0;
    display: flex; flex-direction: column;
    justify-content: center;
}
.dt-pair__label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ink-500);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.dt-pair__input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--ink-900);
    padding: 0;
    width: 100%;
    min-width: 0;
    cursor: pointer;
    text-overflow: ellipsis;
}
.dt-pair__input::placeholder { color: var(--ink-400); font-weight: 400; }
.dt-pair__sep {
    align-self: stretch;
    width: 1px;
    background: var(--border);
    flex-shrink: 0;
}
.dt-pair.is-date-set .dt-pair__field--date .dt-pair__input,
.dt-pair.is-time-set .dt-pair__field--time .dt-pair__input {
    color: var(--ink-900);
    font-weight: 600;
}
.dt-pair__error {
    position: absolute;
    bottom: -1.25rem;
    left: 0;
    color: #b91c1c;
    font-size: 0.75rem;
    font-weight: 500;
}
.dt-pair--error {
    box-shadow: 0 0 0 1.5px #fca5a5;
    border-radius: var(--radius);
}

/* ── INLINE varyant (hero search-bar) ────────────────────────────────────
 * search-field grid hücresine yerleşir; padding/border parent'tan miras alır.
 * Tarih solda, ince dikey ayırıcı, saat sağda — tek satır.
 * ──────────────────────────────────────────────────────────────────────── */
.search-field .dt-pair--inline {
    width: 100%;
    background: transparent;
}
.dt-pair--inline .dt-pair__field {
    padding: 0;
    gap: 0.5rem;
}
.dt-pair--inline .dt-pair__field--date {
    flex: 1 1 60%;
}
.dt-pair--inline .dt-pair__field--time {
    flex: 0 1 80px;
    padding-left: 0.625rem;
}
.dt-pair--inline .dt-pair__sep {
    margin: 4px 0;
}
.dt-pair--inline .dt-pair__icon {
    width: 16px; height: 16px;
}
.dt-pair--inline .dt-pair__field--time .dt-pair__icon { display: none; } /* yer dar; ayırıcı zaten ayırıyor */
.dt-pair--inline .dt-pair__input { font-size: 0.9375rem; }

/* ── BLOCK varyant (checkout, form içinde büyük kart) ──────────────────── */
.dt-pair--block {
    border: 1.5px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s, box-shadow .15s;
}
.dt-pair--block:focus-within {
    border-color: var(--ink-900);
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.06);
}
.dt-pair--block .dt-pair__field {
    padding: 0.875rem 1rem;
    min-height: 64px;
}
.dt-pair--block .dt-pair__field--date { flex: 1.4 1 0; }
.dt-pair--block .dt-pair__field--time { flex: 1 1 0; }

/* Block — mobilde alt alta + horizontal ayırıcı */
@media (max-width: 640px) {
    .dt-pair--block .dt-pair__row {
        flex-direction: column;
    }
    .dt-pair--block .dt-pair__sep {
        width: 100%;
        height: 1px;
        align-self: stretch;
    }
    .dt-pair--block .dt-pair__field {
        padding: 0.875rem 1rem;
        min-height: 60px;
    }
}

/* Inline mobilde (hero) — aynı satırda kalsın ama daha sıkı */
@media (max-width: 640px) {
    .dt-pair--inline .dt-pair__field--time {
        flex: 0 1 70px;
    }
    .dt-pair--inline .dt-pair__input {
        font-size: 0.875rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   SLOT PANEL — saat seçimi (Bugün/Yarın pills + Gece/Sabah/Öğle/Akşam grupları)
   ═══════════════════════════════════════════════════════════════════════ */

/* Saat butonu (artık <button>) — varsayılan reset */
button.dt-pair__field--time {
    border: none;
    background: transparent;
    text-align: left;
    font: inherit;
    color: inherit;
}
button.dt-pair__field--time:focus { outline: none; }

/* Saat alanı içindeki "display" span'i — input gibi görünsün ama tıklanabilir */
.dt-pair__input--time {
    display: block;
    width: 100%;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ink-400);
    font-weight: 400;
}
.dt-pair__input--time.is-set {
    color: var(--ink-900);
    font-weight: 600;
}
.dt-pair--inline .dt-pair__input--time { font-size: 0.9375rem; }
.dt-pair--block  .dt-pair__input--time { font-size: 0.9375rem; }

/* ── Quick day pills ───────────────────────────────────────────────────── */
.dt-pair__quick {
    display: flex;
    gap: 0.5rem;
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: thin;
}
.dt-pair__quick::-webkit-scrollbar { height: 4px; }
.dt-pair__quick::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

.dt-quick {
    flex: 0 0 auto;
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.125rem;
    padding: 0.4375rem 0.75rem;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color .12s, background .12s, color .12s, transform .08s;
    font: inherit;
    color: var(--ink-900);
    line-height: 1;
}
.dt-quick:hover {
    border-color: var(--ink-900);
    background: var(--ink-50);
}
.dt-quick:active { transform: scale(0.97); }
.dt-quick.is-active {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--white);
}
.dt-quick__label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}
.dt-quick__sub {
    font-size: 0.6875rem;
    font-weight: 500;
    opacity: 0.75;
}

/* Inline varyantta quick area daha küçük */
.dt-pair--inline .dt-pair__quick {
    padding: 0.375rem 0.5rem 0.5rem;
    border-bottom: none;
}
.dt-pair--inline .dt-quick {
    padding: 0.3125rem 0.625rem;
}

/* ── Slot panel ────────────────────────────────────────────────────────── */
.dt-slot-panel {
    border-top: 1px solid var(--border);
    background: var(--white);
    max-height: 360px;
    overflow-y: auto;
    scrollbar-width: thin;
}
.dt-slot-panel::-webkit-scrollbar { width: 6px; }
.dt-slot-panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
.dt-slot-panel[hidden] { display: none; }

/* Inline (hero) varyantta panel — overlay olarak konumlanır */
.dt-pair--inline .dt-slot-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: -8px;
    right: -8px;
    z-index: 60;
    border: 1.5px solid var(--ink-900);
    border-radius: var(--radius);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
    max-height: 380px;
}

.dt-slot-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6875rem 0.875rem;
    border-bottom: 1px solid var(--border);
    background: var(--ink-50);
    position: sticky;
    top: 0;
    z-index: 1;
}
.dt-slot-panel__title {
    font-size: 0.8125rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ink-900);
}
.dt-slot-panel__close {
    border: none;
    background: transparent;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-500);
    transition: background .12s, color .12s;
}
.dt-slot-panel__close:hover { background: var(--ink-100, #efefef); color: var(--ink-900); }

.dt-slot-panel__body {
    padding: 0.5rem 0.875rem 0.75rem;
}
.dt-slot-panel__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 1.5rem 1rem;
    text-align: center;
    color: var(--ink-500);
}
.dt-slot-panel__empty p { margin: 0; font-size: 0.875rem; line-height: 1.4; }

.dt-slot-group {
    padding: 0.625rem 0;
    border-bottom: 1px solid var(--border);
}
.dt-slot-group:last-child { border-bottom: none; }
.dt-slot-group__title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink-500);
    margin-bottom: 0.5rem;
}
.dt-slot-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 0.375rem;
}

.dt-slot {
    border: 1.5px solid var(--border);
    background: var(--white);
    border-radius: 8px;
    padding: 0.5rem 0;
    font: inherit;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, background .12s, color .12s, transform .08s;
}
.dt-slot:hover {
    border-color: var(--ink-900);
    background: var(--ink-50);
}
.dt-slot:active { transform: scale(0.96); }
.dt-slot.is-selected {
    background: var(--ink-900);
    border-color: var(--ink-900);
    color: var(--white);
}
.dt-slot.is-disabled,
.dt-slot[disabled] {
    opacity: 0.35;
    pointer-events: none;
    cursor: not-allowed;
}

/* Saat butonu açıkken vurgu */
.dt-pair--panel-open .dt-pair__field--time {
    background: var(--ink-50);
}

/* Mobil kompaktlaştırma */
@media (max-width: 640px) {
    .dt-pair--inline .dt-slot-panel {
        left: 0;
        right: 0;
        max-height: 340px;
    }
    .dt-slot-group__items {
        grid-template-columns: repeat(auto-fill, minmax(58px, 1fr));
        gap: 0.3125rem;
    }
    .dt-slot {
        padding: 0.4375rem 0;
        font-size: 0.75rem;
    }
    .dt-pair__quick { padding: 0.5rem 0.625rem; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WHEEL TIME PICKER MODAL (Uber-style mobile saat seçici)
   ═══════════════════════════════════════════════════════════════════════ */

.wtp-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.18);
    display: flex;
    align-items: stretch;
    justify-content: center;
    opacity: 0;
    transition: opacity .18s ease;
}
.wtp-modal[hidden] { display: none; }
.wtp-modal.is-open { opacity: 1; }

.wtp-modal__sheet {
    position: relative;
    width: 100%;
    max-width: 480px;
    background: var(--white);
    display: flex;
    flex-direction: column;
    transform: translateY(8px);
    transition: transform .22s cubic-bezier(.32,.72,0,1);
    box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.12);
    /* iOS safe area */
    padding-bottom: env(safe-area-inset-bottom, 0);
}
.wtp-modal.is-open .wtp-modal__sheet { transform: translateY(0); }

/* Header */
.wtp-modal__head {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    padding: 1rem 1rem 0.75rem;
}
.wtp-back {
    width: 38px;
    height: 38px;
    border: none;
    background: transparent;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
    color: var(--ink-900);
    transition: background .12s;
}
.wtp-back:hover { background: var(--ink-50); }
.wtp-modal__title {
    font-size: 1.625rem;
    font-weight: 800;
    color: var(--ink-900);
    margin: 0;
    letter-spacing: -0.01em;
}

/* Subtitle — pickup/return contextine göre etiket */
.wtp-subtitle {
    margin: 0.25rem 1.25rem 0.25rem;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-500);
    letter-spacing: 0.01em;
}

/* Wheel — 3 kolonlu picker */
.wtp-wheel {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    align-items: stretch;
    margin: 0.75rem 0 0.5rem;
    height: 308px; /* 7 satır × 44px */
    overflow: hidden;
}
.wtp-wheel__highlight {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 44px;
    transform: translateY(-50%);
    background: var(--ink-50);
    border-radius: 12px;
    margin: 0 0.625rem;
    pointer-events: none;
    z-index: 0;
}
.wtp-col {
    position: relative;
    z-index: 1;
    overflow-y: auto;
    height: 100%;
    scroll-snap-type: y mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    /* hide scrollbars */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* fade mask top/bottom */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.wtp-col::-webkit-scrollbar { display: none; }
.wtp-col.is-hidden { display: none; }
.wtp-col--minute.is-hidden + * { } /* placeholder */

/* Return modu: gün kolonunu gizle, hour+minute eşit iki kolon olsun.
   Tarih kullanıcı tarafından ayrı flatpickr alanında seçildiği için modal'da
   gösterilmez; seçili dönüş tarihi `.wtp-date-info` içinde gösterilir. */
.wtp-modal--return .wtp-col--day,
.wtp-modal--no-day .wtp-col--day {
    display: none !important;
}
.wtp-modal--return .wtp-wheel,
.wtp-modal--no-day .wtp-wheel {
    grid-template-columns: 1fr 1fr;
}

/* Dönüş tarihi bilgi satırı (sadece return modunda görünür) */
.wtp-date-info {
    margin: 0.25rem 1.25rem 0;
    padding: 0.625rem 0.875rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-700, #1f2937);
    background: var(--ink-50, #f3f4f6);
    border: 1px solid var(--ink-100, #e5e7eb);
    border-radius: 12px;
    text-align: center;
    letter-spacing: 0.005em;
}
.wtp-col__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.wtp-col__item {
    height: 44px;
    line-height: 44px;
    text-align: center;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--ink-900);
    scroll-snap-align: center;
    cursor: pointer;
    transition: opacity .12s ease, transform .12s ease;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
.wtp-col__item.is-selected {
    font-weight: 700;
}
.wtp-col--day .wtp-col__item {
    font-size: 0.9375rem;
}
.wtp-col--hour .wtp-col__item,
.wtp-col--minute .wtp-col__item {
    font-variant-numeric: tabular-nums;
    font-size: 1.25rem;
}

/* Wheel picker dakika kolonu daima 5dk aralıkla görünür — grid hep 3 kolon */

/* Info */
.wtp-info {
    text-align: center;
    padding: 1rem 1.25rem 0.5rem;
}
.wtp-info__line {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--ink-900);
}
.wtp-info__line--time {
    font-size: 1rem;
}
.wtp-info__line--arrival {
    margin-top: 0.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ink-700, #4b4b4b);
}
.wtp-info__line--duration {
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--ink-500);
}

/* Foot — sticky CTA */
.wtp-modal__spacer { flex: 1; }
.wtp-modal__foot {
    padding: 0.875rem 1rem 1rem;
    border-top: 1px solid var(--border);
}
.wtp-fineprint {
    font-size: 0.75rem;
    line-height: 1.5;
    color: var(--ink-500);
    margin: 0 0 0.75rem;
    text-align: center;
}
.wtp-cta {
    width: 100%;
    border: none;
    background: var(--ink-900);
    color: var(--white);
    border-radius: 14px;
    padding: 1rem 1.25rem;
    font: inherit;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    transition: transform .08s, opacity .15s;
    -webkit-tap-highlight-color: transparent;
}
.wtp-cta:hover  { opacity: 0.92; }
.wtp-cta:active { transform: scale(0.98); }

/* ── Mobil: full-screen ─────────────────────────────────────────────── */
@media (max-width: 640px) {
    .wtp-modal { background: var(--white); }
    .wtp-modal__sheet {
        max-width: none;
        min-height: 100vh;
        min-height: 100dvh;
        box-shadow: none;
    }
    .wtp-modal__title { font-size: 1.5rem; }
    .wtp-wheel { height: 280px; }
    .wtp-modal__foot {
        padding: 0.75rem 1rem 1.25rem;
    }
}

/* ── Desktop: ortalanmış kart ──────────────────────────────────────── */
@media (min-width: 641px) {
    .wtp-modal {
        align-items: center;
        padding: 1.5rem;
    }
    .wtp-modal__sheet {
        max-width: 460px;
        max-height: 92vh;
        border-radius: 18px;
        overflow: hidden;
    }
}

/* ──────────────────────────────────────────────────────────────────────
 * Stops Editor — quote sayfasında ara durak ekleme/silme
 * ────────────────────────────────────────────────────────────────────── */
.stops-editor {
    margin-top: 1rem;
    padding: 1rem 1.25rem 1.125rem;
    background: var(--white, #fff);
    border: 1px solid var(--border, #ececec);
    border-radius: 14px;
}
.stops-editor__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.stops-editor__title {
    margin: 0;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ink-900);
}
.stops-editor__count {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ink-500);
    font-variant-numeric: tabular-nums;
}
.stops-editor__list {
    list-style: none;
    margin: 0 0 0.625rem;
    padding: 0;
    display: grid;
    gap: 0.5rem;
}
.stops-editor__item {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.625rem 0.75rem;
    background: var(--ink-50, #f7f7f7);
    border-radius: 10px;
    font-size: 0.875rem;
}
.stops-editor__pin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--white);
    flex-shrink: 0;
}
.stops-editor__addr {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    color: var(--ink-900);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.stops-editor__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--ink-500);
    border-radius: 50%;
    cursor: pointer;
    transition: background .12s, color .12s;
}
.stops-editor__remove:hover {
    background: rgba(0,0,0,0.06);
    color: var(--ink-900);
}
.stops-editor__add {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    border: 1.5px dashed var(--border, #d9d9d9);
    background: transparent;
    border-radius: 10px;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ink-900);
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.stops-editor__add:hover:not(:disabled) {
    border-color: var(--ink-900);
    background: var(--ink-50, #f7f7f7);
}
.stops-editor__add:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.stops-editor__add-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ink-900);
    color: var(--white);
}
.stops-editor__input-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0;
}
.stops-editor__input-label {
    flex: 1;
    min-width: 0;
}
.stops-editor__input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border: 1.5px solid var(--ink-900);
    border-radius: 10px;
    font: inherit;
    font-size: 0.9375rem;
    color: var(--ink-900);
    background: var(--white);
    outline: none;
    transition: box-shadow .12s;
}
.stops-editor__input:focus {
    box-shadow: 0 0 0 3px rgba(0,0,0,0.08);
}
.stops-editor__cancel {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 50%;
    font-size: 1.25rem;
    line-height: 1;
    color: var(--ink-500);
    cursor: pointer;
    flex-shrink: 0;
}
.stops-editor__cancel:hover { background: rgba(0,0,0,0.06); color: var(--ink-900); }
.stops-editor__busy {
    margin: 0.625rem 0 0;
    font-size: 0.8125rem;
    color: var(--ink-500);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.stops-editor__spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ccn-spin .8s linear infinite;
}
@keyframes ccn-spin { to { transform: rotate(360deg); } }
.visually-hidden {
    position: absolute;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    overflow: hidden;
    white-space: nowrap;
    width: 1px;
    height: 1px;
}

/* Mobil: stops-editor desktop sticky aside içinde gizli, mobil bottom sheet sonrasında görünür */
@media (max-width: 1024px) {
    .stops-editor {
        margin: 0.875rem 1rem 1rem;
        padding: 0.875rem 1rem;
    }
    .stops-editor__input {
        font-size: 16px; /* iOS auto-zoom önleme */
    }
}

/* ────────────────────────────────────────────────────────────
 * Blog list + CMS article (Pages frontend render)
 * ──────────────────────────────────────────────────────────── */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.5rem;
}
.blog-card {
    background: var(--white);
    border: 1px solid var(--ink-100);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
    display: flex;
    flex-direction: column;
}
.blog-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(10, 10, 10, 0.06);
    border-color: var(--ink-200);
}
.blog-card__link { color: inherit; text-decoration: none; display: flex; flex-direction: column; height: 100%; }
.blog-card__media {
    aspect-ratio: 16 / 10;
    background: var(--ink-50);
    overflow: hidden;
}
.blog-card__media img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform 220ms ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }
.blog-card__placeholder {
    width: 100%; height: 100%;
    background: linear-gradient(135deg, #f3f4f6, #e5e7eb);
}
.blog-card__body { padding: 1.1rem 1.1rem 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; flex: 1; }
.blog-card__category {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--ink-500); font-weight: 600;
}
.blog-card__title {
    font-size: 1.05rem; font-weight: 700; line-height: 1.35; color: var(--ink-900);
    margin: 0;
}
.blog-card__excerpt {
    font-size: 0.875rem; color: var(--ink-500); line-height: 1.5;
    margin: 0;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.blog-card__meta {
    margin-top: auto;
    font-size: 0.78rem; color: var(--ink-400);
}

.page-pagination { margin-top: 2.5rem; display: flex; justify-content: center; }

.cms-empty {
    text-align: center; padding: 3rem 1rem;
    color: var(--ink-500); font-size: 0.95rem;
}

/* CMS article (Page render + Blog show) */
.cms-breadcrumb {
    display: flex; align-items: center; gap: 0.5rem;
    font-size: 0.8rem; color: var(--ink-400); margin-bottom: 1.5rem;
}
.cms-breadcrumb a { color: var(--ink-500); text-decoration: none; }
.cms-breadcrumb a:hover { color: var(--ink-900); }
.cms-breadcrumb span[aria-current] { color: var(--ink-900); font-weight: 500; }

.cms-article {
    max-width: 760px;
    margin: 0 auto;
}
.cms-article__header { margin-bottom: 1.5rem; }
.cms-article__category {
    display: inline-block;
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em;
    color: var(--ink-500); font-weight: 600;
    margin-bottom: 0.5rem;
}
.cms-article__title {
    font-size: clamp(1.6rem, 3.5vw, 2.4rem);
    font-weight: 800; line-height: 1.2; color: var(--ink-900);
    margin: 0 0 0.75rem;
}
.cms-article__meta { font-size: 0.85rem; color: var(--ink-500); display: flex; gap: 0.5rem; align-items: center; }
.cms-article__hero {
    margin: 1.5rem 0;
    border-radius: 16px; overflow: hidden;
    background: var(--ink-50);
}
.cms-article__hero img { width: 100%; height: auto; display: block; }
.cms-article__body {
    font-size: 1rem; line-height: 1.75; color: var(--ink-700);
}
.cms-article__body h2,
.cms-article__body h3 {
    color: var(--ink-900); margin-top: 1.75rem; margin-bottom: 0.75rem; line-height: 1.3;
}
.cms-article__body h2 { font-size: 1.4rem; font-weight: 700; }
.cms-article__body h3 { font-size: 1.15rem; font-weight: 700; }
.cms-article__body p { margin: 0 0 1rem; }
.cms-article__body ul,
.cms-article__body ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.cms-article__body li { margin-bottom: 0.4rem; }
.cms-article__body a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.cms-article__body a:hover { color: #000; }
.cms-article__body img { max-width: 100%; height: auto; border-radius: 12px; margin: 1rem 0; }
.cms-article__body blockquote {
    border-left: 3px solid var(--ink-900);
    padding: 0.5rem 1rem; margin: 1.25rem 0;
    color: var(--ink-700); font-style: italic;
    background: var(--ink-50); border-radius: 0 8px 8px 0;
}

.cms-article__tags { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cms-tag {
    display: inline-block;
    padding: 0.35rem 0.7rem;
    background: var(--ink-50); color: var(--ink-700);
    border-radius: 999px; font-size: 0.75rem; font-weight: 500;
}

.cms-related {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--ink-100);
}
.cms-related__title {
    font-size: 1.15rem; font-weight: 700; color: var(--ink-900);
    margin: 0 0 1.25rem;
}
.blog-grid--related { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

@media (max-width: 640px) {
    .blog-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * Quote/Checkout/Success — Ara durak (stops) görünümleri
 * ============================================================ */

/* Quote summary hero — stops pin */
.quote-summary__pin--stop {
    background: var(--ink-700);
    color: #fff;
    width: 18px; height: 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 10px; font-weight: 700;
    flex-shrink: 0;
}
.quote-summary__point--stop strong {
    font-weight: 500; opacity: 0.92;
}
.quote-summary__connector--stop svg line { stroke: var(--ink-400, #999); }

/* Order summary panel (desktop sticky) — stops list */
.order-summary__route-stop {
    position: relative;
}
.order-summary__pin--stop {
    background: var(--ink-700, #4a4a4a);
    color: #fff;
    border-radius: 999px;
    width: 16px; height: 16px;
    display: inline-flex;
    align-items: center; justify-content: center;
    font-size: 9px; font-weight: 700;
    flex-shrink: 0;
}
.order-summary__stop-label {
    color: var(--ink-500, #888);
    font-size: 0.72rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 2px;
    display: block;
}

/* Checkout — sectioned summary */
.checkout-summary__title {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 1.25rem;
    color: var(--ink-900);
}
.checkout-section {
    border-top: 1px solid var(--ink-100, #eee);
    padding-top: 1rem;
    margin-top: 1rem;
}
.checkout-section:first-of-type {
    border-top: 0;
    padding-top: 0;
    margin-top: 0;
}
.checkout-section__title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--ink-500, #6b6b6b);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0 0 0.75rem;
}

/* Checkout — route timeline with stops */
.checkout-route {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.checkout-route li {
    position: relative;
    padding: 0.5rem 0 0.5rem 2rem;
    display: flex;
    align-items: flex-start;
    gap: 0;
}
.checkout-route li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 28px;
    bottom: -8px;
    width: 1px;
    background: var(--ink-200, #ddd);
}
.checkout-route__pin {
    position: absolute;
    left: 0;
    top: 10px;
    width: 18px; height: 18px;
    border-radius: 4px;
    background: var(--ink-900);
    display: inline-flex;
    align-items: center; justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    flex-shrink: 0;
}
.checkout-route__pin--from {
    border-radius: 999px;
}
.checkout-route__pin--stop {
    background: var(--ink-600, #5a5a5a);
    border-radius: 999px;
    width: 18px; height: 18px;
}
.checkout-route__pin--to {
    border-radius: 4px;
}
.checkout-route div small {
    display: block;
    color: var(--ink-500, #6b6b6b);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
    margin-bottom: 2px;
}
.checkout-route div strong {
    display: block;
    color: var(--ink-900);
    font-size: 0.92rem;
    font-weight: 500;
    line-height: 1.3;
}
.checkout-route__stop strong {
    font-weight: 400;
    opacity: 0.92;
}

/* Checkout — note preview */
.checkout-note-preview {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--ink-50, #fafaf9);
    border-radius: 12px;
    color: var(--ink-700);
    font-size: 0.88rem;
    line-height: 1.5;
    white-space: pre-line;
    border-left: 3px solid var(--ink-300, #d4d4d4);
}

/* Success page — stops timeline */
.success-trip__point--stop strong {
    font-weight: 500;
    opacity: 0.95;
}
.success-trip__pin--stop {
    background: var(--ink-700, #5a5a5a) !important;
    color: #fff;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center; justify-content: center;
    font-size: 10px;
    font-weight: 700;
    width: 18px; height: 18px;
}
.success-trip__meta--payment {
    margin-top: 0.5rem;
    border-top: 1px dashed var(--ink-200, #ddd);
    padding-top: 0.75rem;
}
.success-customer__notes-block {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--ink-100, #eee);
}
.success-customer__notes-block h4 {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--ink-700);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0 0 0.5rem;
}
.success-customer__notes {
    margin: 0;
    padding: 0.75rem 1rem;
    background: var(--ink-50, #fafaf9);
    border-radius: 10px;
    color: var(--ink-700);
    font-size: 0.9rem;
    white-space: pre-line;
    border-left: 3px solid var(--ink-300, #d4d4d4);
}