/* =========================================================
   FiloYol · Kurumsal tema
   ========================================================= */
:root {
    --fr-navy: #0f1b2d;
    --fr-navy-2: #16263d;
    --fr-primary: #0b5cad;
    --fr-primary-dark: #084785;
    --fr-accent: #f59e0b;
    --fr-bg: #f3f5f9;
    --fr-surface: #ffffff;
    --fr-border: #dfe4ec;
    --fr-text: #1c2533;
    --fr-muted: #5b6678;
    --fr-radius: .85rem;
    --fr-shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 4px 16px rgba(15, 27, 45, .06);
    --fr-shadow-lg: 0 10px 30px rgba(15, 27, 45, .14);
    --bs-primary: #0b5cad;
    --bs-primary-rgb: 11, 92, 173;
    --bs-link-color: #0b5cad;
    --bs-link-color-rgb: 11, 92, 173;
    --bs-link-hover-color: #084785;
    --bs-body-font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --bs-body-color: #1c2533;
    --bs-secondary-color: #5b6678;
    --bs-border-radius: .6rem;
}

html { font-size: 15px; }
@media (min-width: 1400px) { html { font-size: 15.5px; } }

body {
    background: var(--fr-bg);
    color: var(--fr-text);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.app-main { flex: 1 0 auto; outline: none; }

/* ---------- Erişilebilirlik ---------- */
.skip-link {
    position: absolute; left: -9999px; top: .5rem; z-index: 2000;
    background: var(--fr-accent); color: #111; padding: .6rem 1rem; border-radius: .4rem; font-weight: 600;
}
.skip-link:focus { left: .5rem; }

:focus-visible { outline: 3px solid #f59e0b !important; outline-offset: 2px !important; box-shadow: none !important; }
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline-offset: 1px !important; }
/* Birimli alanlarda (km, ₺, L) odak çerçevesi kutunun içine çizilir; birim etiketinden kopuk görünmez */
.input-group > .form-control:focus-visible, .input-group > .form-select:focus-visible { outline-offset: -3px !important; z-index: 5; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.btn-primary {
    --bs-btn-bg: var(--fr-primary); --bs-btn-border-color: var(--fr-primary);
    --bs-btn-hover-bg: var(--fr-primary-dark); --bs-btn-hover-border-color: var(--fr-primary-dark);
    --bs-btn-active-bg: var(--fr-primary-dark); --bs-btn-active-border-color: var(--fr-primary-dark);
}
.btn-outline-primary {
    --bs-btn-color: var(--fr-primary); --bs-btn-border-color: var(--fr-primary);
    --bs-btn-hover-bg: var(--fr-primary); --bs-btn-hover-border-color: var(--fr-primary);
    --bs-btn-active-bg: var(--fr-primary-dark);
}
.btn { font-weight: 500; }
.btn .bi { margin-right: .25rem; }
.btn-icon .bi { margin-right: 0; }

/* ---------- Üst menü ---------- */
.app-header { background: var(--fr-navy); position: sticky; top: 0; z-index: 1030; box-shadow: 0 2px 10px rgba(0,0,0,.18); }
.app-header .navbar { padding-top: .45rem; padding-bottom: .45rem; }
/* Marka logosu (<brand-logo>): "Filo" yazı rengini, "Yol" --brand-accent rengini alır */
.brand-logo { display: inline-flex; align-items: center; gap: .6rem; color: #fff; --brand-accent: var(--fr-accent); line-height: 1; }
.brand-logo .brand-mark { width: 2.15rem; height: 2.15rem; flex-shrink: 0; display: block; }
.brand-logo .brand-type { display: flex; flex-direction: column; align-items: flex-start; gap: .4rem; }
.brand-logo .brand-word { height: 1.3rem; width: auto; display: block; fill: currentColor; }
.brand-logo .brand-word-accent { fill: var(--brand-accent); }
.brand-logo .brand-slogan { font-size: .8rem; font-weight: 600; letter-spacing: .02em; color: rgba(255,255,255,.75); white-space: nowrap; }
.brand-logo-light { color: var(--fr-navy); --brand-accent: #ea580c; }
.brand-logo-light .brand-slogan { color: var(--fr-muted); }
.brand-logo-lg { gap: .85rem; }
.brand-logo-lg .brand-mark { width: 3.1rem; height: 3.1rem; }
.brand-logo-lg .brand-word { height: 1.9rem; }
.app-header .navbar-brand { padding-block: .2rem; }
.app-header .nav-link { color: rgba(255,255,255,.82); border-radius: .5rem; padding-inline: .75rem !important; }
.app-header .nav-link:hover, .app-header .nav-link.active, .app-header .nav-link.show { color: #fff; background: rgba(255,255,255,.08); }
.app-header .nav-link .bi { margin-right: .3rem; }
.app-header .dropdown-menu { border-radius: .7rem; padding: .4rem; box-shadow: var(--fr-shadow-lg); }
.app-header .dropdown-item { border-radius: .45rem; padding: .5rem .75rem; }
.app-header .dropdown-item .bi { margin-right: .45rem; opacity: .85; }
.avatar {
    width: 2rem; height: 2rem; border-radius: 50%; background: var(--fr-primary); color: #fff;
    display: inline-grid; place-items: center; font-size: .8rem; font-weight: 700;
}
@media (min-width: 1200px) {
    /* Menü bağlantıları, logo ve kullanıcı alanı aynı dikey eksende */
    .app-header .offcanvas-body { align-items: center; flex-grow: 1; }
    .app-header .navbar-nav { align-items: center; }
}
@media (max-width: 1199.98px) {
    .app-header .offcanvas { background: var(--fr-navy) !important; }
    .app-header .dropdown-menu { position: static; box-shadow: none; background: transparent; border: 0; padding-left: 1.25rem; }
}

.app-footer { color: var(--fr-muted); font-size: .85rem; padding: 1rem 0; border-top: 1px solid var(--fr-border); background: var(--fr-surface); }

/* ---------- Sayfa başlığı ---------- */
.page-header { margin-bottom: 1.25rem; }
.page-header .breadcrumb { font-size: .85rem; }
.page-header .breadcrumb a { text-decoration: none; }
.page-icon {
    width: 3rem; height: 3rem; border-radius: .8rem; display: grid; place-items: center; font-size: 1.4rem;
    background: rgba(11, 92, 173, .1); color: var(--fr-primary); flex-shrink: 0;
}
@media (max-width: 575.98px) {
    .page-header .page-actions { width: 100%; }
    .page-header .page-actions .btn, .page-header .page-actions > form { flex: 1 1 auto; }
    .page-header .page-actions > form > .btn { width: 100%; }
}

/* ---------- Kartlar ---------- */
.card { border: 1px solid var(--fr-border); border-radius: var(--fr-radius); box-shadow: var(--fr-shadow); }
.card-header {
    background: transparent; border-bottom: 1px solid var(--fr-border); padding: .65rem 1.1rem;
    /* Yan yana kartlarda başlıklar, düğme olsa da olmasa da aynı yükseklikte */
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; min-height: 3.4rem;
}
.card-header h2, .card-header .h6 { margin: 0; font-size: 1rem; font-weight: 600; }
.card-body { padding: 1.1rem; }
.section-title { font-size: .78rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fr-muted); font-weight: 700; margin-bottom: .75rem; }

/* ---------- Metro karo menü ---------- */
.tile-grid {
    display: grid; gap: .9rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: 8.25rem;
    /* İki sütunda geniş karonun bıraktığı boşluk sonraki küçük karoyla dolsun */
    grid-auto-flow: row dense;
}
@media (min-width: 768px) { .tile-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 8.75rem; grid-auto-flow: row; } }
@media (min-width: 1400px) { .tile-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.tile {
    position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: space-between;
    padding: 1rem 1.1rem; border-radius: 1rem; color: #fff; text-decoration: none;
    background: var(--tile-bg, var(--fr-primary));
    box-shadow: 0 2px 6px rgba(15,27,45,.12);
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.tile::after {
    content: ""; position: absolute; inset: auto -30% -55% auto; width: 75%; aspect-ratio: 1; border-radius: 50%;
    background: rgba(255,255,255,.08); pointer-events: none;
}
.tile:hover { color: #fff; }
/* Dokunmatik ekranda dokunduktan sonra "üzerinde" görünümü takılı kalmasın */
@media (hover: hover) {
    .tile:hover { transform: translateY(-3px); box-shadow: var(--fr-shadow-lg); filter: brightness(1.06); }
    .tile:active { transform: translateY(0); }
}
.tile .tile-icon { font-size: 1.9rem; line-height: 1; }
.tile .tile-title { font-size: 1.05rem; font-weight: 600; line-height: 1.2; position: relative; z-index: 1; }
.tile .tile-meta { font-size: .82rem; opacity: .92; position: relative; z-index: 1; }
.tile .tile-count {
    position: absolute; top: .8rem; right: 1rem; font-size: 1.6rem; font-weight: 700; line-height: 1; z-index: 1;
}
.tile .tile-badge {
    position: absolute; top: .85rem; right: .9rem; background: rgba(0,0,0,.28); border-radius: 2rem;
    padding: .15rem .6rem; font-size: .75rem; font-weight: 600;
}
.tile-wide { grid-column: span 2; }
.tile-tall { grid-row: span 2; }
.tile-wide .tile-icon, .tile-tall .tile-icon { font-size: 2.4rem; }
.tile-wide .tile-title, .tile-tall .tile-title { font-size: 1.3rem; }

.tile-blue { --tile-bg: linear-gradient(135deg, #0b5cad, #1e40af); }
.tile-amber { --tile-bg: linear-gradient(135deg, #b45309, #92400e); }
.tile-teal { --tile-bg: linear-gradient(135deg, #0f766e, #115e59); }
.tile-violet { --tile-bg: linear-gradient(135deg, #6d28d9, #5b21b6); }
.tile-rose { --tile-bg: linear-gradient(135deg, #be123c, #9f1239); }
.tile-slate { --tile-bg: linear-gradient(135deg, #334155, #1e293b); }
.tile-green { --tile-bg: linear-gradient(135deg, #15803d, #166534); }
.tile-cyan { --tile-bg: linear-gradient(135deg, #0e7490, #155e75); }
.tile-orange { --tile-bg: linear-gradient(135deg, #c2410c, #9a3412); }
.tile-indigo { --tile-bg: linear-gradient(135deg, #4338ca, #3730a3); }
.tile-navy { --tile-bg: linear-gradient(135deg, #16263d, #0f1b2d); }
.tile-pink { --tile-bg: linear-gradient(135deg, #a21caf, #86198f); }

/* ---------- KPI ---------- */
/* Yazı sütunu en az 7.5rem ister; dar kartta simge üste geçer. Değer tek satırda kalır ve sütun daraldıkça
   yazı boyutu küçülür (cqi); böylece tutar kart dışına, yandaki kartın altına taşmaz. */
.kpi { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem .9rem; }
.kpi-icon { width: 2.8rem; height: 2.8rem; border-radius: .75rem; display: grid; place-items: center; font-size: 1.3rem; flex-shrink: 0; }
.kpi-text { flex: 1 1 7.5rem; min-width: 0; container-type: inline-size; }
.kpi-value { font-size: 1.45rem; font-weight: 700; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums; }
.kpi-text .kpi-value { font-size: clamp(1.05rem, 14.5cqi, 1.45rem); }
.kpi-label { font-size: .82rem; color: var(--fr-muted); }

/* ---------- Durum etiketleri ---------- */
.status {
    display: inline-flex; align-items: center; gap: .35rem; padding: .22rem .65rem; border-radius: 2rem;
    font-size: .8rem; font-weight: 600; white-space: nowrap; border: 1px solid transparent;
}
.status::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.status-success { background: #dcfce7; color: #14532d; border-color: #bbf7d0; }
.status-info { background: #dbeafe; color: #1e3a8a; border-color: #bfdbfe; }
.status-warning { background: #fef3c7; color: #78350f; border-color: #fde68a; }
.status-danger { background: #fee2e2; color: #7f1d1d; border-color: #fecaca; }
.status-muted { background: #e2e8f0; color: #334155; border-color: #cbd5e1; }
.status-violet { background: #ede9fe; color: #4c1d95; border-color: #ddd6fe; }
.status-teal { background: #ccfbf1; color: #134e4a; border-color: #99f6e4; }

/* ---------- Tablolar ---------- */
.table-card .table { margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .7rem .85rem; vertical-align: middle; }
/* Yukarıdaki genel dolgu, Bootstrap'in sıkı tablosunu (table-sm) da genişletiyordu */
.table-sm > :not(caption) > * > * { padding: .35rem .5rem; }
.table thead th { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--fr-muted); background: #f8fafc; white-space: nowrap; }
.table-hover > tbody > tr:hover > * { background: #f5f9ff; }
.row-link { cursor: pointer; }
.cell-main { font-weight: 600; }
.cell-sub { font-size: .82rem; color: var(--fr-muted); }
/* Tablodaki gizli başlıklar (ör. "İşlemler") kaydırılan kutunun dışına konumlanıp sayfayı yatayda genişletmesin */
.table-responsive { position: relative; }
.num { font-variant-numeric: tabular-nums; }

/* Geniş tablolar (raporlar): yatay kaydırılırken ilk sütun (taşıt, şoför, müşteri) görünür kalır */
@media (min-width: 768px) {
    .table-dense > :not(caption) > * > * { padding-inline: .55rem; }
    .table-dense > :not(caption) > * > :first-child { padding-left: .85rem; }
    .table-sticky > :not(caption) > tr > :first-child { position: sticky; left: 0; z-index: 2; background-color: var(--fr-surface); min-width: 9.5rem; }
    .table-sticky > thead > tr > :first-child { background-color: #f8fafc; }
    .table-sticky.table-hover > tbody > tr:hover > :first-child { background-color: #f5f9ff; }
    .table-responsive.can-scroll-left .table-sticky > :not(caption) > tr > :first-child { box-shadow: 6px 0 8px -6px rgba(15, 27, 45, .25); }
}

/* Mobilde tablo satırları kart olur: ilk hücre başlık, işlem düğmeleri başlığın sağında, diğer hücreler
   "etiket ... değer" satırları. Değer birden çok satır (alt bilgi, rozet) olabilir; etiket solda yüzer,
   değer sağa yaslanır. Tablo düzeni tamamen kapatılır ki toplam satırı veya uzun hücreler genişliği bozmasın. */
@media (max-width: 767.98px) {
    .table-stack, .table-stack > tbody, .table-stack > tfoot { display: block; width: 100%; }
    .table-stack > thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .table-stack > tbody > tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; padding: .55rem 0; border-bottom: 1px solid var(--fr-border); }
    .table-stack > tbody > tr:last-child { border-bottom: 0; }
    .table-stack > tbody > tr > * { grid-column: 1 / -1; display: flow-root; border: 0; padding: .3rem 1rem; text-align: right; overflow-wrap: anywhere; }
    .table-stack > tbody > tr > *::before {
        content: attr(data-label); float: left; max-width: 55%; margin-right: 1rem; text-align: left;
        font-weight: 600; color: var(--fr-muted); overflow-wrap: normal;
    }
    .table-stack > tbody > tr > [data-label=""]::before, .table-stack > tbody > tr > :first-child::before { content: none; }
    /* Değeri olmayan satır kartta yer kaplamasın */
    .table-stack > tbody > tr > :empty { display: none; }
    .table-stack > tbody > tr > :first-child { grid-column: 1; text-align: left; font-size: 1.02rem; padding-bottom: .45rem; }
    .table-stack > tbody > tr > .td-actions {
        grid-column: 2; grid-row: 1; display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;
        gap: .4rem; padding-left: 0; text-align: right;
    }
    .table-stack > tbody > tr > .td-actions > form { display: inline-flex; }
    .table-stack > tbody > tr > :not(:first-child) > .d-flex { justify-content: flex-end; }
    .table-stack .status { white-space: normal; }
    /* Toplam satırı */
    .table-stack > tfoot > tr {
        display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 1rem;
        padding: .5rem 0; background: #f8fafc; border-top: 2px solid var(--fr-border);
    }
    .table-stack > tfoot > tr > * { display: block; border: 0; padding: .3rem 1rem; background: transparent; box-shadow: none; text-align: left; }
    .table-stack > tfoot > tr > :empty { display: none; }
    .table-stack > tfoot > tr > [data-label] { flex: 1 1 100%; display: flow-root; text-align: right; }
    .table-stack > tfoot > tr > [data-label]::before { content: attr(data-label); float: left; margin-right: 1rem; text-align: left; font-weight: 600; color: var(--fr-muted); }
    /* Uzun listelerde "daha fazla göster" (site.js) */
    .table-stack > tbody > tr.stack-more-hidden { display: none; }
}
.stack-more { display: none; }
@media (max-width: 767.98px) {
    .stack-more { display: block; padding: .75rem 1rem 1rem; border-top: 1px solid var(--fr-border); text-align: center; }
}

/* ---------- Filtre çubuğu ---------- */
.filter-bar { background: var(--fr-surface); border: 1px solid var(--fr-border); border-radius: var(--fr-radius); padding: .85rem; margin-bottom: 1rem; box-shadow: var(--fr-shadow); }

/* ---------- Formlar ---------- */
/* block: satır içi etiketin satır yüksekliği, etiketsiz (span) başlıklı alanlarla 2-4px kayma yaratıyordu */
.form-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .3rem; }
.form-label .req { color: #b91c1c; margin-left: .15rem; }
.form-text { font-size: .8rem; }
.form-section { background: var(--fr-surface); border: 1px solid var(--fr-border); border-radius: var(--fr-radius); padding: 1.15rem; margin-bottom: 1rem; box-shadow: var(--fr-shadow); }
.form-section > h2 { font-size: 1rem; font-weight: 700; margin-bottom: 1rem; display: flex; align-items: center; gap: .5rem; }
.form-section > h2 .bi { color: var(--fr-primary); }
.field-validation-error { color: #b91c1c; font-size: .82rem; display: block; margin-top: .25rem; }
.input-validation-error { border-color: #b91c1c !important; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1rem; }
.form-actions {
    position: sticky; bottom: 0; z-index: 10; background: rgba(243,245,249,.96); backdrop-filter: blur(4px);
    padding: .8rem 0; border-top: 1px solid var(--fr-border); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end;
}
.form-check-input { width: 1.15em; height: 1.15em; }
.form-switch .form-check-input { width: 2.3em; }
/* Anahtar alanları: giriş kutusu yüksekliğinde ve etiket satırı kadar aşağıda; yan yana alanlarla aynı hizada */
.field-bool .form-check { display: flex; align-items: center; gap: .6rem; padding-left: 0; margin-bottom: 0; min-height: calc(1.5em + .75rem + 2px); }
.field-bool .form-check .form-check-input { float: none; margin: 0; flex-shrink: 0; }
@media (min-width: 768px) {
    .row > .field-bool:not(.col-12) { padding-top: 1.65rem; }
}
.ts-wrapper.form-select, .ts-wrapper.form-control { padding: 0; }
.ts-control { min-height: calc(1.5em + .75rem + 2px); }
/* Çerçeve dış kutuda; iç kutu normal seçim kutusuyla aynı yükseklikte kalsın */
.ts-wrapper.form-select .ts-control, .ts-wrapper.form-control .ts-control { min-height: calc(1.5em + .75rem); }
.ts-wrapper.single .ts-control { padding-right: 2.25rem; }
.ts-wrapper .items-placeholder, .ts-control input::placeholder { color: #6b7280 !important; }
.ts-wrapper.plugin-clear_button .clear-button { right: 2.1rem; font-size: 1.15rem; color: var(--fr-muted); }
.ts-wrapper.plugin-clear_button .clear-button:hover { color: #b91c1c; }
/* Seçim yokken temizle düğmesi görünmez; klavye ile de odaklanılamasın */
.ts-wrapper.plugin-clear_button:not(.has-items) .clear-button { display: none; }
.ts-dropdown .dropdown-input-wrap { padding: .45rem; }
.ts-dropdown .dropdown-input { border: 1px solid var(--fr-border); border-radius: .45rem; padding: .4rem .6rem; }

/* Yer tutucu metin örnek olduğu belli olsun ve alana tıklanınca kaybolsun */
.form-control::placeholder { color: #6b7280; opacity: 1; }
.form-control:focus::placeholder { color: transparent; }

/* Seçim kartları (yük cinsi, araç seçimi) */
/* Tüm kartlar aynı genişlik ve satır içinde aynı yükseklik; uzun adlar kartı büyütmez, kelime bölünmeden alt satıra iner */
.choice-grid { display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); grid-auto-rows: 1fr; }
.choice-card { position: relative; min-width: 0; }
.choice-card input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice-card label {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; text-align: center;
    height: 100%; min-height: 5.6rem; padding: .7rem .5rem; border: 2px solid var(--fr-border); border-radius: .8rem; background: var(--fr-surface);
    cursor: pointer; font-weight: 600; font-size: .88rem; line-height: 1.25; overflow-wrap: anywhere; hyphens: auto;
    transition: border-color .12s, background .12s;
}
@media (max-width: 575.98px) { .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.choice-card label .bi { font-size: 1.55rem; color: var(--fr-primary); }
.choice-card input:checked + label { border-color: var(--fr-primary); background: #eef5ff; box-shadow: inset 0 0 0 1px var(--fr-primary); }
.choice-card input:focus-visible + label { outline: 3px solid var(--fr-accent); outline-offset: 2px; }
.choice-card label:hover { border-color: #9cb8dc; }

/* ---------- Boş durum ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--fr-muted); }
.empty-state > .bi { font-size: 2.6rem; display: block; margin-bottom: .6rem; color: #94a3b8; }

/* ---------- Detay listeleri ---------- */
.dl-grid { display: grid; grid-template-columns: minmax(8rem, 40%) 1fr; gap: .45rem 1rem; margin: 0; }
.dl-grid dt { font-weight: 500; color: var(--fr-muted); font-size: .88rem; }
.dl-grid dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* ---------- Sihirbaz ---------- */
.wizard-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: step; overflow-x: auto; }
.wizard-steps li {
    flex: 1 1 0; min-width: 8rem; display: flex; align-items: center; gap: .55rem; padding: .65rem .8rem;
    border-radius: .75rem; background: var(--fr-surface); border: 1px solid var(--fr-border); color: var(--fr-muted); font-weight: 600; font-size: .9rem;
}
.wizard-steps li .num {
    width: 1.8rem; height: 1.8rem; border-radius: 50%; display: grid; place-items: center; background: #e2e8f0; color: #334155; flex-shrink: 0;
}
.wizard-steps li.active { border-color: var(--fr-primary); color: var(--fr-primary); background: #eef5ff; }
.wizard-steps li.active .num { background: var(--fr-primary); color: #fff; }
.wizard-steps li.done .num { background: #15803d; color: #fff; }
.wizard-steps li.done { color: #14532d; }

/* Durak listesi */
.stop-list { list-style: none; padding: 0; margin: 0; position: relative; }
.stop-item { position: relative; display: flex; gap: .75rem; padding: .7rem .75rem; border: 1px solid var(--fr-border); border-radius: .8rem; background: var(--fr-surface); margin-bottom: .6rem; }
.stop-marker {
    width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; color: #fff; font-weight: 700; flex-shrink: 0; margin-top: 1.6rem;
    background: var(--fr-primary);
}
.stop-item.stop-origin .stop-marker { background: #15803d; }
.stop-item.stop-final .stop-marker { background: #be123c; }
.stop-handle { cursor: grab; color: var(--fr-muted); align-self: center; padding: .25rem; }

/* Rota seçenekleri */
.route-option { border: 2px solid var(--fr-border); border-radius: .9rem; padding: .9rem; background: var(--fr-surface); cursor: pointer; height: 100%; text-align: left; width: 100%; }
.route-option:hover { border-color: #9cb8dc; }
.route-option.selected { border-color: var(--fr-primary); box-shadow: inset 0 0 0 1px var(--fr-primary); background: #f5f9ff; }
.route-option .route-swatch { width: 1rem; height: .35rem; border-radius: 1rem; display: inline-block; vertical-align: middle; margin-right: .35rem; }
.metric { display: flex; flex-direction: column; }
.metric .metric-value { font-weight: 700; font-size: 1.1rem; }
.metric .metric-label { font-size: .78rem; color: var(--fr-muted); }

.cost-card { border-radius: .9rem; padding: 1rem; border: 1px solid var(--fr-border); background: var(--fr-surface); height: 100%; }
.cost-card .cost-value { font-size: 1.6rem; font-weight: 700; color: var(--fr-primary); }

/* Araç seçimi */
.vehicle-option { border: 2px solid var(--fr-border); border-radius: .9rem; padding: .85rem; background: var(--fr-surface); display: flex; gap: .8rem; align-items: flex-start; cursor: pointer; }
.vehicle-option:has(input:checked) { border-color: var(--fr-primary); background: #f5f9ff; }
.vehicle-option input { margin-top: .3rem; }

/* ---------- Harita ---------- */
.map { height: 420px; border-radius: var(--fr-radius); border: 1px solid var(--fr-border); z-index: 0; }
.map-lg { height: calc(100vh - 220px); min-height: 420px; }
@media (max-width: 767.98px) { .map { height: 320px; } .map-lg { height: 60vh; } }
.vehicle-marker {
    background: var(--fr-primary); color: #fff; border: 2px solid #fff; border-radius: 50%; width: 34px !important; height: 34px !important;
    display: grid !important; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); font-size: 16px;
}
.vehicle-marker.moving { background: #15803d; }
.vehicle-marker.stale { background: #64748b; }
.stop-pin { background: #be123c; color: #fff; border: 2px solid #fff; border-radius: 50%; display: grid !important; place-items: center; font-weight: 700; font-size: 12px; box-shadow: 0 2px 6px rgba(0,0,0,.3); }
.stop-pin.origin { background: #15803d; }

/* ---------- Zaman çizelgesi ---------- */
.timeline { list-style: none; padding: 0; margin: 0; }
.timeline li { position: relative; padding: 0 0 1rem 1.6rem; }
.timeline li::before { content: ""; position: absolute; left: .45rem; top: .3rem; bottom: -.3rem; width: 2px; background: var(--fr-border); }
.timeline li:last-child::before { display: none; }
.timeline li::after { content: ""; position: absolute; left: .12rem; top: .25rem; width: .8rem; height: .8rem; border-radius: 50%; background: var(--fr-primary); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--fr-primary); }
.timeline li.done::after { background: #15803d; box-shadow: 0 0 0 1px #15803d; }

/* ---------- Ana sayfa sekmeleri ---------- */
.nav-tabs-modern { border-bottom: 1px solid var(--fr-border); gap: .25rem; }
.nav-tabs-modern .nav-link { border: 0; border-bottom: 3px solid transparent; color: var(--fr-muted); font-weight: 600; padding: .7rem 1rem; border-radius: 0; }
.nav-tabs-modern .nav-link.active { color: var(--fr-primary); border-bottom-color: var(--fr-primary); background: transparent; }
.nav-tabs-modern .nav-link .badge { margin-left: .3rem; }
.state-filter .btn { border-radius: 2rem; }
/* Dar ekranda sekmeler alt alta kırılmaz, tek satırda yatay kaydırılır */
@media (max-width: 767.98px) {
    .nav-tabs-modern { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; gap: 0; }
    .nav-tabs-modern::-webkit-scrollbar { display: none; }
    .nav-tabs-modern .nav-item { flex: 0 0 auto; }
    .nav-tabs-modern .nav-link { white-space: nowrap; padding: .6rem .65rem; }
}

/* Yatay kaydırılabilen şeritlerde devamı olduğunu gösteren kenar solması (site.js sınıfları ekler) */
.scroll-hint.can-scroll-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }
.scroll-hint.can-scroll-left { -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem); mask-image: linear-gradient(to right, transparent, #000 2.5rem); }
.scroll-hint.can-scroll-left.can-scroll-right {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
    mask-image: linear-gradient(to right, transparent, #000 2.5rem, #000 calc(100% - 2.5rem), transparent);
}

.progress-thin { height: .45rem; border-radius: 1rem; }

/* ---------- Giriş ekranı ---------- */
.auth-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr; }
@media (min-width: 992px) { .auth-wrap { grid-template-columns: 1.1fr 1fr; } }
.auth-hero {
    display: none; position: relative; color: #fff; padding: 3rem; overflow: hidden;
    background: radial-gradient(circle at 15% 12%, rgba(245,158,11,.14), transparent 38%), linear-gradient(140deg, #0f1b2d 10%, #0b5cad 120%);
}
@media (min-width: 992px) { .auth-hero { display: flex; flex-direction: column; justify-content: space-between; } }
.auth-hero h2 { font-size: 2.1rem; font-weight: 700; max-width: 30rem; }
.auth-slogan { font-size: 1.35rem; font-weight: 700; letter-spacing: .02em; color: rgba(255,255,255,.92); margin-bottom: .6rem; }
.auth-slogan span { color: var(--fr-accent); }
.auth-hero ul { list-style: none; padding: 0; }
.auth-hero li { margin-bottom: .6rem; display: flex; gap: .6rem; align-items: center; }
.auth-hero li .bi { color: var(--fr-accent); font-size: 1.2rem; }
.auth-form { display: grid; place-items: center; padding: 2rem 1rem; background: var(--fr-surface); }
.auth-card { width: 100%; max-width: 25rem; }

/* ---------- Mobil ve dokunmatik ekran ---------- */
/* Tablo şeridinde sol kenar sabit ilk sütunla örtüşmesin; yalnızca sağda solma */
.table-responsive.scroll-hint.can-scroll-left:not(.can-scroll-right) { -webkit-mask-image: none; mask-image: none; }
.table-responsive.scroll-hint.can-scroll-left.can-scroll-right { -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 2.5rem), transparent); }

/* iOS Safari 16 px'ten küçük yazılı alana dokununca sayfayı büyütür; dokunmatik ve dar ekranda alanlar 16 px */
@media (pointer: coarse), (max-width: 767.98px) {
    .form-control, .form-select, .input-group-text, .ts-wrapper .ts-control, .ts-wrapper .ts-control input,
    .ts-dropdown, .ts-dropdown .dropdown-input { font-size: 16px; }
}
/* Parmakla rahat dokunulsun: küçük düğmeler, seçim kutusunu temizleme (×) ve açılır menü okları en az ~34 px */
@media (pointer: coarse), (max-width: 767.98px) {
    .btn-sm { --bs-btn-padding-y: .4rem; --bs-btn-padding-x: .65rem; }
    .btn-sm.py-0 { padding-top: .3rem !important; padding-bottom: .3rem !important; }
    .btn-group > .dropdown-toggle-split { min-width: 2.5rem; }
    .ts-wrapper.plugin-clear_button .clear-button { right: 1.6rem; padding: 0 .5rem; }
    .ts-wrapper.plugin-clear_button.single .ts-control { padding-right: 3.6rem; }
}

/* Sihirbaz adımları: telefonda yalnızca etkin adımın adı yazılı, diğerleri numara */
@media (max-width: 575.98px) {
    .wizard-steps { overflow: visible; }
    .wizard-steps li { flex: 0 0 auto; min-width: 0; padding: .5rem; }
    .wizard-steps li.active { flex: 1 1 auto; }
    .wizard-steps li:not(.active) > span:not(.num) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* Teklif sihirbazı durakları: telefonda il / ilçe ve ayrıntı alanları tam genişlik */
@media (max-width: 575.98px) {
    .stop-item { gap: .55rem; padding: .65rem; }
    .stop-handle { display: none; }
    .stop-marker { margin-top: 0; width: 1.75rem; height: 1.75rem; font-size: .85rem; }
    .stop-item .row > .col-6:not(.stop-weight-wrap):not(.stop-type-wrap) { width: 100%; }
    .stop-item .d-flex.justify-content-between { flex-wrap: wrap; gap: .3rem; }
    .stop-item .stop-title { flex: 1 1 auto; }
    .stop-item .d-flex.gap-1 { margin-left: auto; }
}

/* Rapor dönem düğmeleri tek satırda kaydırılır; filtre düğmeleri telefonda eşit genişlikte */
.period-presets { display: flex; gap: .5rem; flex-wrap: wrap; }
@media (max-width: 575.98px) {
    .period-presets { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -.85rem; padding-inline: .85rem; }
    .period-presets::-webkit-scrollbar { display: none; }
    .period-presets .btn { flex: 0 0 auto; }
    .filter-actions { width: 100%; }
    .filter-actions .btn { flex: 1 1 0; }
}

/* Rapor seçim karoları telefonda yatay ve kısa */
@media (max-width: 767.98px) {
    .report-tile { min-height: 0 !important; flex-direction: row; align-items: center; justify-content: flex-start; gap: 1rem; padding: .9rem 1rem; }
    .report-tile .tile-icon { font-size: 1.7rem; }
}

/* Bildirimler dar ekranda tam genişlik (350 px'lik kutu 360 px ekranda soldan kesiliyordu) */
@media (max-width: 575.98px) {
    .toast-container { left: 0; right: 0; }
    .toast-container .toast { width: 100%; }
}

/* Komut / kod blokları dar ekranda satır kırar */
@media (max-width: 767.98px) {
    pre.wrap-xs { white-space: pre-wrap; word-break: break-all; }
}

/* ---------- Faturalar ---------- */
.inv-line { border: 1px solid var(--fr-border); border-radius: .65rem; padding: .65rem .75rem .8rem; margin-bottom: .75rem; background: #fbfcfe; }
.inv-line-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .35rem; }
.inv-line-no { font-weight: 700; font-size: .85rem; color: var(--fr-muted); }
.inv-line-grid { display: grid; gap: .55rem .65rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.inv-line-grid .form-label { font-size: .8rem; margin-bottom: .2rem; }
.inv-line-grid .f-desc, .inv-line-grid .f-price, .inv-line-grid .f-wh, .inv-line-grid .f-total { grid-column: 1 / -1; }
.inv-line-total { display: block; font-weight: 700; font-variant-numeric: tabular-nums; padding: .35rem 0; text-align: right; }
@media (min-width: 768px) {
    .inv-line-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .inv-line-grid .f-desc { grid-column: span 6; }
    .inv-line-grid .f-price { grid-column: span 2; }
    .inv-line-grid .f-wh { grid-column: span 4; }
    .inv-line-grid .f-total { grid-column: span 2; }
}
/* Açıklamalı seçenek kartları (fatura hizmet türü). Yük cinsi kartları .choice-card ile karışmasın diye ayrı ad. */
.option-cards { display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .option-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.option-card { display: flex; gap: .6rem; align-items: flex-start; height: 100%; border: 1px solid var(--fr-border); border-radius: .65rem; padding: .7rem .8rem; cursor: pointer; background: var(--fr-surface); margin: 0; }
.option-card .form-check-input { margin-top: .2rem; flex-shrink: 0; }
.option-card small { display: block; color: var(--fr-muted); font-size: .8rem; margin-top: .15rem; }
.option-card:has(input:checked) { border-color: var(--fr-primary); box-shadow: 0 0 0 2px rgba(11, 92, 173, .18); background: #f3f8fe; }
.option-card:has(input:focus-visible) { outline: 2px solid var(--fr-primary); outline-offset: 2px; }
.recipient-box { display: block; }
.tax-advice:empty { display: none; }
.invoice-summary { background: var(--fr-surface); border: 1px solid var(--fr-border); border-radius: var(--fr-radius); padding: 1.15rem; box-shadow: var(--fr-shadow); }
@media (min-width: 1200px) { .invoice-summary { position: sticky; top: 1rem; } }
.sum-list { margin: 0 0 .75rem; }
.sum-list div { display: flex; justify-content: space-between; gap: 1rem; padding: .3rem 0; border-bottom: 1px dashed var(--fr-border); }
.sum-list dt { font-weight: 500; color: var(--fr-muted); }
.sum-list dd { margin: 0; font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.sum-list .sum-vat { display: block; border: 0; padding: 0; }
.sum-list .sum-total { border-bottom: 0; border-top: 2px solid var(--fr-text); margin-top: .25rem; padding-top: .5rem; }
.sum-list .sum-total dt, .sum-list .sum-total dd { color: var(--fr-text); font-weight: 800; font-size: 1.15rem; }
.table tr.row-error > *, .table-sticky tr.row-error > :first-child { background: #fff5f5; }
.error-reason { white-space: normal; max-width: 28rem; }
.vat-figure { border: 1px solid var(--fr-border); border-radius: .65rem; padding: .8rem 1rem; height: 100%; display: flex; flex-direction: column; gap: .2rem; }
.vat-figure .vat-label { color: var(--fr-muted); font-size: .85rem; }
.vat-figure .vat-value { font-size: 1.5rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.vat-figure-total { background: #f3f8fe; border-color: rgba(11, 92, 173, .35); }
.min-w-0 { min-width: 0; }
.small-dl dt { font-weight: 500; color: var(--fr-muted); }
.small-dl dd { margin-bottom: .35rem; }

/* ---------- Yazdırma ---------- */
@media print {
    .app-header, .app-footer, .page-actions, .form-actions, .btn, .skip-link { display: none !important; }
    body { background: #fff; }
    .card { box-shadow: none; }
}