/* ── Design System ── */
/* Marka paleti: BYC Türk logo lacivertinden (#1A355B) türetildi */
:root {
    --clr-primary: #1A355B;
    --clr-primary-light: #24466F;
    --clr-primary-dark: #122642;
    --clr-accent: #2E77C9;
    --clr-success: #27ae60;
    --clr-warning: #f39c12;
    --clr-danger: #e74c3c;
    --clr-info: #17a2b8;
    --clr-bg: #f2f4f8;
    --clr-card: #ffffff;
    --clr-muted: #64748b;
    --clr-border: #e2e6ea;
    --radius: 8px;
    --shadow-sm: 0 1px 3px rgba(26,53,91,0.08);
    --shadow-md: 0 4px 12px rgba(26,53,91,0.12);
    --transition: 0.2s ease;

    /* ── Tipografi ölçeği ──────────────────────────────────────────────
       390px'te 40 farklı font-size ölçülmüştü: aynı işi gören iki etiket
       .78rem ve .79rem gibi ayırt EDİLEMEZ ama tutarsız değerler alıyordu.
       Tek modüler ölçek; yeni kural yazarken px/rem değil bu değişkenler
       kullanılmalı. Rakamlar 16px kök üzerinden sabittir. */
    --fs-2xs: 0.75rem;    /* 12px — mikro etiket, rozet, tablo üst bilgisi */
    --fs-xs:  0.8125rem;  /* 13px — ikincil metin, yardım satırı */
    --fs-sm:  0.875rem;   /* 14px — form ve tablo gövdesi */
    --fs-md:  1rem;       /* 16px — gövde metni (mobil giriş alanı tabanı) */
    --fs-lg:  1.125rem;   /* 18px — kart başlığı */
    --fs-xl:  1.25rem;    /* 20px — bölüm başlığı */
    --fs-2xl: 1.5rem;     /* 24px — sayfa başlığı (h1) */
    --fs-3xl: 2rem;       /* 32px — boş durum ikonu, büyük KPI */

    /* ── Dokunma hedefi eşikleri ──────────────────────────────────────
       WCAG 2.2: AA "Target Size (Minimum)" 24px, AAA 44px.
       Birincil eylem AAA'yı, ikincil eylem en az 32px'i tutar. */
    --tap-primary: 44px;
    --tap-secondary: 32px;
    --tap-min: 24px;

    /* Module colors */
    --clr-customers: #8e44ad;
    --clr-products: #e67e22;
    --clr-orders: #2980b9;
    --clr-invoices: #27ae60;
    --clr-payments: #16a085;
    --clr-reports: #c0392b;
}

body {
    background-color: var(--clr-bg);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Navbar ── */
.navbar.bg-dark {
    background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 60%, var(--clr-primary-light) 100%) !important;
}

.navbar {
    box-shadow: var(--shadow-md);
}

.navbar-brand {
    font-weight: 700;
    letter-spacing: 0.5px;
}

.nav-link.active-nav {
    background: rgba(255,255,255,0.15);
    border-radius: 6px;
}

/* ── Brand Overrides (Bootstrap) ── */
.btn-primary {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--clr-primary-light) !important;
    border-color: var(--clr-primary-light) !important;
}

.btn-outline-primary {
    color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.btn-outline-primary:hover, .btn-outline-primary.active {
    background-color: var(--clr-primary) !important;
    border-color: var(--clr-primary) !important;
    color: #fff !important;
}

.bg-primary {
    background-color: var(--clr-primary) !important;
}

.text-primary {
    color: var(--clr-primary) !important;
}

.dropdown-item.active, .dropdown-item:active {
    background-color: var(--clr-primary);
}

.page-link {
    color: var(--clr-primary);
}

.page-item.active .page-link {
    background-color: var(--clr-primary);
    border-color: var(--clr-primary);
}

.order-badge {
    font-size: var(--fs-2xs);
    padding: 2px 6px;
    position: relative;
    top: -8px;
}

/* ── Breadcrumbs ── */
.breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.75rem;
    font-size: var(--fs-sm);
}

.breadcrumb-item a {
    color: var(--clr-accent);
    text-decoration: none;
}

.breadcrumb-item a:hover {
    text-decoration: underline;
}

/* ── Cards ── */
.card {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition);
}

.card:hover {
    box-shadow: var(--shadow-md);
}

.card-header {
    background: var(--clr-card);
    border-bottom: 1px solid var(--clr-border);
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.card-summary {
    border-left: 4px solid;
    transition: transform var(--transition), box-shadow var(--transition);
}

.card-summary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

.card-summary.invoiced { border-left-color: var(--clr-accent); }
.card-summary.paid { border-left-color: var(--clr-success); }
.card-summary.balance { border-left-color: var(--clr-danger); }
.card-summary.count { border-left-color: var(--clr-warning); }

.card-summary .card-title {
    font-size: var(--fs-2xs);
    color: var(--clr-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.card-summary .card-value {
    font-size: var(--fs-2xl);
    font-weight: 700;
    color: var(--clr-primary);
}

/* ── Module Headers ── */
.module-header-customers { color: var(--clr-customers); }
.module-header-products { color: var(--clr-products); }
.module-header-orders { color: var(--clr-orders); }
.module-header-invoices { color: var(--clr-invoices); }
.module-header-payments { color: var(--clr-payments); }
.module-header-reports { color: var(--clr-reports); }

.module-header-customers i { color: var(--clr-customers); }
.module-header-products i { color: var(--clr-products); }
.module-header-orders i { color: var(--clr-orders); }
.module-header-invoices i { color: var(--clr-invoices); }
.module-header-payments i { color: var(--clr-payments); }
.module-header-reports i { color: var(--clr-reports); }

/* ── Quick Actions ── */
.quick-actions .btn {
    border-radius: var(--radius);
    padding: 10px 18px;
    height: 45px;
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: transform var(--transition), box-shadow var(--transition);
}

.quick-actions .btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.quick-actions .btn i {
    font-size: var(--fs-xl);
}

/* ── Record Count Footer ── */
.table-record-count {
    padding: 8px 16px;
    font-size: var(--fs-xs);
    color: var(--clr-muted);
    border-top: 1px solid var(--clr-border);
    background: #fafbfc;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ── Tables ── */
.table th {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    color: var(--clr-muted);
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--clr-border);
    white-space: nowrap;
}

.table td {
    vertical-align: middle;
}

.table-hover tbody tr:hover {
    background-color: rgba(46, 119, 201, 0.04);
}

/* Sortable headers */
th.sortable {
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 20px !important;
}

th.sortable::after {
    content: '\2195';
    position: absolute;
    right: 6px;
    color: #ccc;
    font-size: var(--fs-2xs);
}

th.sortable.sort-asc::after {
    content: '\2191';
    color: var(--clr-accent);
}

th.sortable.sort-desc::after {
    content: '\2193';
    color: var(--clr-accent);
}

/* ── Search Box ── */
.table-search {
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    padding: 6px 12px 6px 36px;
    width: 100%;
    max-width: 300px;
    font-size: var(--fs-sm);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E") no-repeat 10px center;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.table-search:focus {
    outline: none;
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(46, 119, 201, 0.15);
}

/* ── Status Badges ── */
.status-badge {
    font-size: var(--fs-2xs);
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
    letter-spacing: 0.3px;
}

/* ── Product Select (Inline on part_no) ── */
.product-picker-wrap {
    position: relative;
}

.product-picker-wrap .item-partno {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 24px;
}

.product-picker-dropdown {
    display: none;
    position: fixed;
    z-index: 1050;
    width: 420px;
    max-height: 320px;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.product-picker-dropdown.show {
    display: block;
}

.product-picker-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr-border);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    outline: none;
}

.product-picker-search:focus {
    border-bottom-color: var(--clr-accent);
}

.product-picker-list {
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.product-picker-list li {
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--fs-xs);
    border-bottom: 1px solid #f5f5f5;
    transition: background var(--transition);
}

.product-picker-list li:hover {
    background: rgba(46, 119, 201, 0.08);
}

.product-picker-list li .pp-partno {
    font-weight: 600;
    color: var(--clr-primary);
}

.product-picker-list li .pp-name {
    color: var(--clr-muted);
    margin-left: 6px;
}

.product-picker-list li .pp-price {
    float: right;
    color: var(--clr-success);
    font-weight: 500;
}

/* ── Searchable Dropdown (Customer) ── */
.search-select-wrap {
    position: relative;
}

.search-select-input {
    cursor: pointer;
}

.search-select-dropdown {
    display: none;
    position: absolute;
    z-index: 1050;
    left: 0;
    top: 100%;
    width: 100%;
    max-height: 280px;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.search-select-dropdown.show {
    display: block;
}

.search-select-dropdown input {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr-border);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    outline: none;
}

.search-select-dropdown .ss-list {
    max-height: 220px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.search-select-dropdown .ss-list li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: var(--fs-sm);
    transition: background var(--transition);
}

.search-select-dropdown .ss-list li:hover {
    background: rgba(46, 119, 201, 0.08);
}

/* ── Flash Messages ── */
.alert {
    border: none;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border-left: 4px solid var(--clr-success);
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border-left: 4px solid var(--clr-danger);
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeeba);
    color: #856404;
    border-left: 4px solid var(--clr-warning);
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-left: 4px solid var(--clr-info);
}

/* ── Item rows ── */
.invoice-item-row .btn-remove,
.order-item-row .btn-remove,
.invoice-item-row .btn-outline-danger,
.order-item-row .btn-outline-danger {
    opacity: 0.4;
    transition: opacity var(--transition);
}

.invoice-item-row:hover .btn-remove,
.order-item-row:hover .btn-remove,
.invoice-item-row:hover .btn-outline-danger,
.order-item-row:hover .btn-outline-danger {
    opacity: 1;
}

/* ── Mobile Responsive ── */
@media (max-width: 768px) {
    .table-responsive {
        border-radius: var(--radius);
    }

    .table-responsive .table {
        min-width: 600px;
    }

    .card-summary .card-value {
        font-size: var(--fs-xl);
    }

    .quick-actions .btn {
        padding: 8px 12px;
        font-size: var(--fs-sm);
    }

    .product-picker-dropdown {
        width: 280px;
    }
}

/* ── Misc ── */
.btn {
    border-radius: 6px;
    font-weight: 500;
    white-space: nowrap;
    transition: all var(--transition);
}

.form-control, .form-select {
    border-radius: 6px;
    border-color: var(--clr-border);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.form-control:focus, .form-select:focus {
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(46, 119, 201, 0.15);
}

a {
    color: var(--clr-accent);
    text-decoration: none;
}

a:hover {
    color: #1A355B;
    text-decoration: underline;
}

.group-header td {
    font-size: var(--fs-sm);
}

/* ── Üretim Planlama (Gantt) ── */
:root {
    --gantt-label-w: 260px;
    --gantt-row-h: 38px;
    --gantt-head-h: 40px;
    --clr-production: #6c5ce7;
}

.module-header-production, .module-header-production i { color: var(--clr-production); }

.gantt-scroll {
    overflow-x: auto;
}

.gantt {
    position: relative;
    min-width: 720px;
}

.gantt-row {
    display: flex;
    align-items: stretch;
    min-height: var(--gantt-row-h);
    border-bottom: 1px solid #f1f3f5;
}

.gantt-row:hover { background: rgba(46, 119, 201, 0.04); }

.gantt-label-col {
    flex: 0 0 var(--gantt-label-w);
    width: var(--gantt-label-w);
    max-width: var(--gantt-label-w);
    padding: 6px 12px;
    border-right: 1px solid var(--clr-border);
    background: #fff;
    position: sticky;
    left: 0;
    z-index: 3;
    overflow: hidden;
}

.gantt-row:hover .gantt-label-col { background: #fafcff; }

.gantt-track-col {
    flex: 1 1 auto;
    min-width: 420px;
    position: relative;
    padding: 6px 0;
}

.gantt-head {
    display: flex;
    align-items: stretch;
    border-bottom: 2px solid var(--clr-border);
    background: #fafbfc;
    position: sticky;
    top: 0;
    z-index: 4;
}

.gantt-head-cell {
    font-size: var(--fs-2xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--clr-muted);
    font-weight: 500;
    background: #fafbfc;
}

.gantt-months { position: relative; height: 26px; }

.gantt-month {
    position: absolute;
    top: 0;
    height: 26px;
    line-height: 26px;
    border-left: 1px solid var(--clr-border);
    padding-left: 6px;
    font-size: var(--fs-2xs);
    color: var(--clr-muted);
    white-space: nowrap;
    overflow: hidden;
}

.gantt-group { background: #f8f9fb; }
.gantt-group .gantt-label-col { background: #f8f9fb; }

.gantt-track {
    position: relative;
    height: 24px;
    background: repeating-linear-gradient(
        to right,
        transparent, transparent calc(100% / 12 - 1px),
        #eef1f5 calc(100% / 12 - 1px), #eef1f5 calc(100% / 12)
    );
    border-radius: 4px;
}

.gantt-bar {
    position: absolute;
    top: 2px;
    height: 20px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 6px;
    overflow: hidden;
    cursor: default;
    transition: filter var(--transition);
    min-width: 6px;
}

.gantt-bar:hover { filter: brightness(1.1); }

.gantt-bar.state-ontime { background: #2E77C9; }
.gantt-bar.state-risk   { background: #f39c12; }
.gantt-bar.state-late   { background: #e74c3c; }
.gantt-bar.state-done   { background: #27ae60; }

.gantt-progress {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    background: rgba(255,255,255,0.28);
    border-right: 1px solid rgba(255,255,255,0.55);
}

.gantt-bar-text {
    position: relative;
    color: #fff;
    font-size: var(--fs-2xs);
    font-weight: 500;
    white-space: nowrap;
    text-shadow: 0 1px 1px rgba(0,0,0,0.25);
}

.gantt-today-layer {
    position: absolute;
    left: var(--gantt-label-w);
    right: 0;
    /* Başlık satırının tam altından başlar; rozet başlığın üstüne binmez. */
    top: var(--gantt-head-h);
    bottom: 0;
    pointer-events: none;
    z-index: 5;
}

.gantt-today {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--clr-danger);
    opacity: 0.75;
}

.gantt-today-badge {
    position: absolute;
    top: 1px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--clr-danger);
    color: #fff;
    font-size: var(--fs-2xs);
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
}

.gantt-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    font-size: var(--fs-2xs);
    color: var(--clr-muted);
}

.gantt-legend .lg-box {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    margin-right: 4px;
    vertical-align: -1px;
}

/* Sipariş referansı rozetleri */
.order-ref-badge {
    display: inline-block;
    background: #eef3fb;
    color: #1A355B;
    border: 1px solid #d6e2f2;
    border-radius: 10px;
    padding: 1px 7px;
    font-size: var(--fs-2xs);
    font-weight: 500;
    margin: 1px 2px 1px 0;
    white-space: nowrap;
}

.order-ref-badge a { color: inherit; text-decoration: none; }
.order-ref-badge a:hover { text-decoration: underline; }

@media (max-width: 768px) {
    :root { --gantt-label-w: 170px; }
    .gantt-track-col { min-width: 320px; }
}

/* Sipariş no seçici — ürün seçicisiyle aynı davranış */
.order-picker-wrap { position: relative; }

.order-picker-wrap .item-orderrefs {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%236c757d' viewBox='0 0 16 16'%3E%3Cpath d='M2 2a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v12l-3-2-3 2-3-2-3 2V2z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
    padding-right: 22px;
    font-size: var(--fs-xs);
}

.order-picker-dropdown {
    display: none;
    position: fixed;
    z-index: 1050;
    width: 340px;
    max-height: 300px;
    background: var(--clr-card);
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.order-picker-dropdown.show { display: block; }

.order-picker-search {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--clr-border);
    padding: 8px 12px;
    font-size: var(--fs-sm);
    outline: none;
}

.order-picker-search:focus { border-bottom-color: var(--clr-accent); }

.order-picker-list {
    max-height: 240px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
}

.order-picker-list li {
    padding: 6px 12px;
    cursor: pointer;
    font-size: var(--fs-xs);
    border-bottom: 1px solid #f5f5f5;
    transition: background var(--transition);
}

.order-picker-list li:hover { background: rgba(46, 119, 201, 0.08); }

/* ── Kritiklik bantları ── */
.band-strip {
    display: flex;
    width: 100%;
    height: 34px;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--clr-border);
}

/* Son segment kalan boşluğu doldursun ki şerit tam genişlikte görünsün */
.band-seg:last-child { flex: 1 1 auto; }

.band-seg {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Dar segmentte (ör. K1 = %3) metin iki yandan kırpılıp yanlış sayı okunur.
       flex-shrink:0 + içerik kadar min genişlik, metnin bütün kalmasını garanti eder;
       geniş segmentler kalanı paylaşır. */
    flex: 0 0 auto;
    min-width: max-content;
    padding: 0 8px;
    color: #fff;
    text-decoration: none;
    font-size: var(--fs-2xs);
    font-weight: 500;
    white-space: nowrap;
    transition: filter var(--transition);
}

.band-seg:hover { filter: brightness(1.12); color: #fff; text-decoration: none; }
.band-seg.band-active { box-shadow: inset 0 0 0 2px rgba(255,255,255,0.85); }
.band-seg .band-name { opacity: 0.9; }
.band-seg .band-count { font-weight: 700; }

.band-k1 { background: #c0392b; }
.band-k2 { background: #e67e22; }
.band-k3 { background: #d4ac0d; }
.band-k4 { background: #7f8c8d; }

@media (max-width: 576px) {
    .band-seg .band-name { display: none; }
}

.band-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: var(--fs-2xs);
    font-weight: 500;
    color: #fff;
}

/* Gantt: müşteri talebi / üretici vaadi işaretleri ve taahhüt boşluğu */
.gantt-marker {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-left: 2px dashed transparent;
    z-index: 3;
    pointer-events: none;
}

.gantt-marker::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -4px;
    margin-top: -3px;
    border: 3px solid transparent;
}

.gantt-marker-req { border-left-color: #8e44ad; }
.gantt-marker-req::after { border-top-color: #8e44ad; border-bottom: none; }
.gantt-marker-promise { border-left-color: #16a085; }
.gantt-marker-promise::after { border-bottom-color: #16a085; border-top: none; }

.gantt-gap {
    position: absolute;
    top: 30%;
    height: 40%;
    z-index: 1;
    border-radius: 2px;
    background: repeating-linear-gradient(
        45deg, rgba(230,126,34,0.30), rgba(230,126,34,0.30) 4px,
        transparent 4px, transparent 8px);
    pointer-events: none;
}

.gantt-dot {
    display: inline-block;
    width: 7px; height: 7px;
    border-radius: 50%;
    margin-right: 4px;
    vertical-align: middle;
}

/* ══════════════════════════════════════════════════════════════════════
   UYGULAMA İSKELETİ — üst çubuk + yan menü
   25+ ekran yatay çubuğa sığmıyor; gezinme sola alındı.
   Mevcut değişkenler kullanılır, yeni renk türetilmez.
   ══════════════════════════════════════════════════════════════════════ */

:root {
    --topbar-h: 58px;
    --sidebar-full-w: 252px;
    --sidebar-mini-w: 68px;
    --sidebar-w: var(--sidebar-full-w);
    --sidebar-bg: var(--clr-primary-dark);
    --sidebar-fg: rgba(255, 255, 255, 0.78);
    --sidebar-fg-dim: rgba(255, 255, 255, 0.45);
    --sidebar-hover: rgba(255, 255, 255, 0.08);
    --sidebar-line: rgba(255, 255, 255, 0.10);
}

/* Daraltılmış mod: tek değişken değişir, düzenin tamamı ona uyar.
   :root (0,1,0) < html.sidebar-mini (0,1,1) — bu kural kazanır. */
html.sidebar-mini {
    --sidebar-w: var(--sidebar-mini-w);
}

/* İçeriğe atla — klavye kullanıcısı 20 menü öğesini teker teker geçmesin */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    background: var(--clr-accent);
    color: #fff;
    padding: 10px 18px;
    border-radius: 0 0 var(--radius) 0;
    font-weight: 600;
}
.skip-link:focus {
    left: 0;
    color: #fff;
    text-decoration: none;
}

/* ── Üst çubuk ───────────────────────────────────────────────────────── */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--topbar-h);
    z-index: 1035;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 14px;
    background: linear-gradient(135deg, var(--clr-primary-dark) 0%, var(--clr-primary) 65%, var(--clr-primary-light) 100%);
    box-shadow: var(--shadow-md);
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.topbar-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: #fff;
    font-size: var(--fs-xl);
    cursor: pointer;
    transition: background var(--transition);
}
.topbar-icon-btn:hover { background: rgba(255, 255, 255, 0.14); }
.topbar-icon-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.topbar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #fff;
    text-decoration: none;
    padding: 2px 4px;
    border-radius: 8px;
}
.topbar-brand:hover { color: #fff; text-decoration: none; opacity: 0.9; }
.topbar-brand img { height: 30px; width: auto; display: block; }

.topbar-brand-text {
    display: none;
    flex-direction: column;
    line-height: 1.15;
}
.topbar-brand-text strong { font-size: var(--fs-md); letter-spacing: 0.3px; }
.topbar-brand-text small { font-size: var(--fs-2xs); color: rgba(255, 255, 255, 0.62); }

@media (min-width: 576px) { .topbar-brand-text { display: flex; } }

/* ── Global arama ── */
.topbar-search {
    position: relative;
    flex: 1 1 auto;
    max-width: 520px;
    margin: 0 auto;
    display: none;
}
@media (min-width: 768px) { .topbar-search { display: block; } }

/* Dar ekranda büyüteç düğmesiyle açılır */
body.search-open .topbar-search {
    display: block;
    position: absolute;
    left: 10px; right: 10px;
    top: calc(var(--topbar-h) + 6px);
    max-width: none;
    z-index: 1040;
}

.topbar-search-input {
    width: 100%;
    height: 38px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    padding: 0 74px 0 40px;
    font-size: var(--fs-sm);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
}
.topbar-search-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.topbar-search-input:focus {
    outline: none;
    background: #fff;
    color: var(--clr-primary-dark);
    border-color: var(--clr-accent);
    box-shadow: 0 0 0 3px rgba(46, 119, 201, 0.35);
}
.topbar-search-input:focus::placeholder { color: var(--clr-muted); }
.topbar-search-input::-webkit-search-cancel-button { filter: invert(1); }

.topbar-search-icon {
    position: absolute;
    left: 14px; top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.7);
    pointer-events: none;
    font-size: var(--fs-md);
}
.topbar-search-input:focus + .topbar-search-kbd { opacity: 0; }
.topbar-search:focus-within .topbar-search-icon { color: var(--clr-muted); }

.topbar-search-kbd {
    position: absolute;
    right: 10px; top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.16);
    color: rgba(255, 255, 255, 0.82);
    border-radius: 5px;
    padding: 2px 7px;
    font-size: var(--fs-2xs);
    font-family: inherit;
    letter-spacing: 0.4px;
    pointer-events: none;
    transition: opacity var(--transition);
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    margin-left: auto;
}

/* ── Dil değiştirici ── */
.lang-switch {
    display: flex;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.08);
}
.lang-switch .lang-opt {
    padding: 5px 11px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: background var(--transition), color var(--transition);
}
.lang-switch .lang-opt:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
    text-decoration: none;
}
.lang-switch .lang-opt.active {
    background: #fff;
    color: var(--clr-primary);
}

/* Oturumluk dil rozeti — kalıcı tercihten ayrıştığında görünür.
   Üst çubuk koyu zeminli; rozet aynı ailedendir ama düğme GİBİ durmaz
   (tıklanabilir sanılmasın diye kenarlık yumuşak, imleç değişmez). */
.lang-temp {
    align-items: center;
    gap: 6px;
    max-width: 34ch;
    padding: 4px 10px;
    margin-right: 4px;
    border-radius: 999px;
    border: 1px dashed rgba(255, 255, 255, 0.28);
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.82);
    font-size: var(--fs-2xs);
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Hedef vurgusu ────────────────────────────────────────────────────
   "Beni buraya götüren düğme çalıştı mı?" sorusunun görsel cevabı.
   Bir düğmenin tek işi zaten ekranda duran bir forma kaydırmaksa, kaydırma
   0 piksel olur ve tıklama sonuçsuz görünür (tedarikçi kartındaki "Parça
   ekle" düğmesi tam olarak buydu). Kısa bir halka + zemin, hedefi hareket
   ettirmeden gösterir; düzen kaymaz çünkü box-shadow yer kaplamaz. */
.form-vurgu {
    animation: form-vurgu-nabiz 1.5s ease-out 1;
}
@keyframes form-vurgu-nabiz {
    0%   { box-shadow: 0 0 0 0 rgba(46, 119, 201, 0.55); }
    35%  { box-shadow: 0 0 0 6px rgba(46, 119, 201, 0.22); }
    100% { box-shadow: 0 0 0 0 rgba(46, 119, 201, 0); }
}
@media (prefers-reduced-motion: reduce) {
    /* Hareket kapalıyken de geri bildirim KALMALI; yalnız nabız durur. */
    .form-vurgu {
        animation: none;
        box-shadow: 0 0 0 3px rgba(46, 119, 201, 0.35);
    }
}

/* ── Kullanıcı menüsü ── */
.user-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    border: 0;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    padding: 4px 10px 4px 4px;
    color: #fff;
    cursor: pointer;
    transition: background var(--transition);
}
.user-btn:hover { background: rgba(255, 255, 255, 0.18); }
.user-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.user-avatar {
    width: 30px; height: 30px;
    flex: 0 0 30px;
    border-radius: 50%;
    background: var(--clr-accent);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: var(--fs-sm);
}

.user-btn-text {
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.15;
    text-align: left;
}
.user-name { font-size: var(--fs-xs); font-weight: 600; }
.user-role { font-size: var(--fs-2xs); color: rgba(255, 255, 255, 0.62); }
.user-btn-caret { font-size: var(--fs-2xs); opacity: 0.7; }

.user-menu {
    min-width: 230px;
    border: 1px solid var(--clr-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: 0 0 6px;
}
.user-menu-head { padding: 12px 14px 10px; }
.user-menu-name { font-weight: 600; color: var(--clr-primary); }
.user-menu-sub { font-size: var(--fs-2xs); color: var(--clr-muted); margin-bottom: 6px; }
.user-menu .dropdown-item { padding: 8px 14px; font-size: var(--fs-sm); }
.user-menu .dropdown-item i { width: 18px; }

.role-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 600;
    color: #fff;
    background: var(--clr-muted);
}
.role-chip.role-superadmin { background: var(--clr-primary); }
.role-chip.role-admin      { background: var(--clr-accent); }
.role-chip.role-user       { background: var(--clr-info); }
.role-chip.role-viewer     { background: var(--clr-muted); }

/* ── Yan menü ────────────────────────────────────────────────────────── */
.sidebar {
    display: flex;
    flex-direction: column;
}

/* lg altında Bootstrap offcanvas devralır; sadece ölçü ve renk verilir */
@media (max-width: 991.98px) {
    .sidebar.offcanvas-lg {
        --bs-offcanvas-width: 272px;
        background: var(--sidebar-bg);
        color: var(--sidebar-fg);
    }
    .sidebar .offcanvas-header {
        background: var(--clr-primary);
        color: #fff;
        border-bottom: 1px solid var(--sidebar-line);
        padding: 12px 16px;
    }
    .sidebar .offcanvas-title { font-size: var(--fs-md); font-weight: 600; }
}

@media (min-width: 992px) {
    /* Bootstrap lg+ için `.offcanvas-lg { background-color: transparent !important }`
       yazar. Aynı silahla ve daha yüksek özgüllükle geri alınır. */
    .sidebar.offcanvas-lg {
        position: fixed;
        top: var(--topbar-h);
        left: 0;
        bottom: 0;
        width: var(--sidebar-w);
        z-index: 1030;
        background: var(--sidebar-bg) !important;
        border-right: 1px solid rgba(0, 0, 0, 0.2);
        transition: width var(--transition);
        overflow: hidden;
    }

    /* Bootstrap lg+'ta .offcanvas-body'yi overflow:visible / flex-grow:0
       yapar; menü kaydırılamaz hâle gelirdi. Eşit özgüllük + sonra
       yüklenme ile geri alınır. */
    .sidebar .sidebar-body {
        display: block;
        flex: 1 1 auto;
        overflow-y: auto;
        overflow-x: hidden;
        padding: 8px 10px 14px;
    }
}

.sidebar-body {
    padding: 8px 10px 14px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1 1 auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.22) transparent;
}
.sidebar-body::-webkit-scrollbar { width: 7px; }
.sidebar-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 4px;
}
.sidebar-body::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.3); }

/* ── Grup başlığı ── */
.nav-group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 10px 6px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    letter-spacing: 1.1px;
    text-transform: uppercase;
    color: var(--sidebar-fg-dim);
    white-space: nowrap;
}
.nav-group-title.nav-group-first { padding: 6px 0 0; }
.nav-group-rule {
    flex: 1 1 auto;
    height: 1px;
    background: var(--sidebar-line);
}

/* ── Menü öğesi ── */
.nav-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-item-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 9px 11px;
    margin-bottom: 2px;
    border-radius: 7px;
    color: var(--sidebar-fg);
    font-size: var(--fs-sm);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
}
.nav-item-link:hover {
    background: var(--sidebar-hover);
    color: #fff;
    text-decoration: none;
}
.nav-item-link:focus-visible {
    outline: 2px solid var(--clr-accent);
    outline-offset: -2px;
    color: #fff;
}

/* Aktiflik yalnız renkle değil BİÇİMLE de kodlanır:
   sol şerit + dolgu + kalın yazı. Renk körü kullanıcı da görür. */
.nav-item-link.active {
    background: rgba(46, 119, 201, 0.26);
    color: #fff;
    font-weight: 600;
}
.nav-item-link.active::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 62%;
    border-radius: 0 3px 3px 0;
    background: var(--clr-accent);
}

.nav-item-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    flex: 0 0 22px;
}
.nav-item-icon { font-size: var(--fs-md); line-height: 1; }
.nav-item-link.active .nav-item-icon { color: #fff; }

.nav-item-text {
    flex: 1 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Rozetler ── */
.nav-badge {
    flex: 0 0 auto;
    min-width: 21px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: var(--fs-2xs);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
    background: rgba(255, 255, 255, 0.16);
    color: #fff;
}
.nav-badge.warn   { background: var(--clr-warning); color: #3d2c05; }
.nav-badge.danger { background: var(--clr-danger); color: #fff; }
.nav-badge.info   { background: var(--clr-info); color: #fff; }

/* Daraltılmış modda sayı sığmaz; ikonun köşesinde nokta olur.
   Nokta, tam metin ipucunda okunabilir kalır. */
.nav-dot {
    display: none;
    position: absolute;
    top: -2px; right: -3px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    box-shadow: 0 0 0 2px var(--sidebar-bg);
}
.nav-dot.warn   { background: var(--clr-warning); }
.nav-dot.danger { background: var(--clr-danger); }
.nav-dot.info   { background: var(--clr-info); }

/* ── Alt bilgi ── */
.sidebar-foot {
    flex: 0 0 auto;
    padding: 10px 14px;
    border-top: 1px solid var(--sidebar-line);
    font-size: var(--fs-2xs);
    color: var(--sidebar-fg-dim);
    white-space: nowrap;
    overflow: hidden;
}
.sidebar-foot-mini { display: none; font-weight: 700; letter-spacing: 1px; }

/* ── Daraltılmış mod (yalnız lg+) ── */
@media (min-width: 992px) {
    html.sidebar-mini .sidebar-body { padding-left: 8px; padding-right: 8px; }
    html.sidebar-mini .nav-item-text,
    html.sidebar-mini .nav-badge,
    html.sidebar-mini .nav-group-text,
    html.sidebar-mini .sidebar-foot-full { display: none; }

    html.sidebar-mini .nav-dot { display: block; }
    html.sidebar-mini .sidebar-foot-mini { display: inline; }

    html.sidebar-mini .nav-item-link {
        justify-content: center;
        gap: 0;
        padding: 10px 0;
    }
    html.sidebar-mini .nav-group-title { padding: 12px 4px 6px; }
    html.sidebar-mini .nav-group-rule { flex: 1 1 auto; }
    html.sidebar-mini .sidebar-foot { text-align: center; padding: 10px 4px; }
}

/* Daraltılmış menü ipucu (Bootstrap tooltip, body'ye taşınır) */
.nav-tip .tooltip-inner {
    background: var(--clr-primary-dark);
    font-size: var(--fs-xs);
    font-weight: 500;
    padding: 5px 10px;
    border-radius: 6px;
}
.nav-tip .tooltip-arrow::before { border-right-color: var(--clr-primary-dark); }

/* ── Ana içerik ──────────────────────────────────────────────────────── */
.app-main {
    padding-top: var(--topbar-h);
    min-height: 100vh;
    transition: margin-left var(--transition);
}
@media (min-width: 992px) {
    .app-main { margin-left: var(--sidebar-w); }
}

.app-container {
    padding: 20px 20px 48px;
    max-width: 1680px;
}
@media (max-width: 575.98px) {
    .app-container { padding: 14px 12px 36px; }
}

/* İçerik başına kaydırıldığında sabit üst çubuğun altında kalmasın */
#icerik { scroll-margin-top: var(--topbar-h); }

/* ── Breadcrumb ── */
.app-main .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 12px;
    font-size: var(--fs-xs);
}
.app-main .breadcrumb-item a { color: var(--clr-muted); }
.app-main .breadcrumb-item a:hover { color: var(--clr-accent); }
.app-main .breadcrumb-item.active { color: var(--clr-primary); font-weight: 600; }

/* ── Bildirimler ── */
.flash-stack { margin-bottom: 4px; }
.flash-stack .alert {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    box-shadow: var(--shadow-sm);
}
.flash-icon { flex: 0 0 auto; margin-right: 6px; margin-top: 2px; }

/* ── Yazdırma: gezinme kâğıda basılmaz ── */
@media print {
    .topbar, .sidebar, .skip-link { display: none !important; }
    .app-main { margin-left: 0 !important; padding-top: 0 !important; }
    .app-container { padding: 0; max-width: none; }
}

/* ── Hareket azaltma tercihi ── */
@media (prefers-reduced-motion: reduce) {
    .sidebar.offcanvas-lg, .app-main, .nav-item-link, .topbar-icon-btn {
        transition: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   powSCM — tedarik zinciri bileşenleri
   ═══════════════════════════════════════════════════════════════ */

/* ── Zincir şeridi: paranın nerede durduğu ── */
.chain-wrap { margin-bottom: 1rem; }
.chain-head { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.chain-head-title { font-weight:600; font-size: var(--fs-sm); color:var(--clr-primary); }
.chain-head-hint { font-size: var(--fs-2xs); color:var(--clr-muted); }
.chain-strip {
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
}
.chain-node {
  display:flex; flex-direction:column; gap:2px;
  background:var(--clr-card); border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:10px 12px; text-decoration:none;
  position:relative; transition:border-color var(--transition), box-shadow var(--transition);
}
.chain-node:hover { border-color:var(--clr-accent); box-shadow:var(--shadow-sm); text-decoration:none; }
.chain-ico { font-size: var(--fs-md); color:var(--clr-accent); line-height:1; }
.chain-label { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--clr-muted); font-weight:600; }
.chain-count { font-size: var(--fs-lg); font-weight:700; color:var(--clr-primary);
  font-variant-numeric:tabular-nums; line-height:1.2; }
.chain-unit { font-size: var(--fs-2xs); color:var(--clr-muted); font-weight:400; margin-left:3px; }
.chain-sub { font-size: var(--fs-2xs); color:var(--clr-muted); }
.chain-go { position:absolute; top:8px; right:8px; opacity:0; font-size: var(--fs-2xs);
  color:var(--clr-accent); transition:opacity var(--transition); }
.chain-node:hover .chain-go { opacity:1; }
@media (max-width:1200px){ .chain-strip { grid-template-columns:repeat(3,1fr); } }
@media (max-width:640px){ .chain-strip { grid-template-columns:repeat(2,1fr); } }

/* ── Sisteme başlarken ── */
.start-card { background:var(--clr-card); border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:16px 18px; margin-bottom:1rem; }
.start-head { display:flex; align-items:center; gap:10px; margin-bottom:4px; }
.start-title { font-weight:600; font-size: var(--fs-md); margin:0; }
.start-lead { font-size: var(--fs-sm); color:var(--clr-muted); margin:0 0 14px; }
.start-steps { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.start-step { display:flex; align-items:flex-start; gap:12px;
  padding:10px 12px; border:1px solid var(--clr-border); border-radius:var(--radius);
  background:#fbfcfe; }
.start-step.start-locked { opacity:.55; }
.start-num { flex:none; width:26px; height:26px; border-radius:50%;
  background:var(--clr-primary); color:#fff; display:grid; place-items:center;
  font-size: var(--fs-2xs); font-weight:700; }
.start-locked .start-num { background:var(--clr-muted); }
.start-body { flex:1; min-width:0; }
.start-step-title { font-weight:600; font-size: var(--fs-sm); display:block; }
.start-step-desc { font-size: var(--fs-xs); color:var(--clr-muted); display:block; margin-top:1px; }
.start-btn { flex:none; align-self:center; }
.start-badge { display:inline-block; font-size: var(--fs-2xs); font-weight:600; padding:1px 7px;
  border-radius:9px; background:var(--clr-success); color:#fff; margin-left:6px; }
.start-chip { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── KPI kartları ── */
.kpi-foot { font-size: var(--fs-2xs); color:var(--clr-muted); margin-top:6px;
  display:flex; align-items:center; gap:5px; }
.kpi-alert { color:var(--clr-danger); font-weight:600; }
.kpi-link { text-decoration:none; }
.kpi-link:hover { text-decoration:none; }

/* ── Yapılacaklar kuyruğu ── */
.todo-list { display:flex; flex-direction:column; gap:8px; }
.todo-item { display:flex; align-items:flex-start; gap:12px; padding:11px 13px;
  border:1px solid var(--clr-border); border-left-width:3px; border-radius:var(--radius);
  background:var(--clr-card); }
.todo-item.sev-high { border-left-color:var(--clr-danger); }
.todo-item.sev-mid { border-left-color:var(--clr-warning); }
.todo-item.sev-low { border-left-color:var(--clr-accent); }
.todo-ico { flex:none; font-size: var(--fs-md); line-height:1.3; }
.todo-body { flex:1; min-width:0; }
.todo-title { font-weight:600; font-size: var(--fs-sm); }
.todo-desc { font-size: var(--fs-xs); color:var(--clr-muted); margin-top:1px; }
.todo-act { flex:none; align-self:center; }

/* ── Teslim modu: rozet, etiket, seçim kartı ── */
.mode-badge, .mode-tag, .mode-chip {
  display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-2xs); font-weight:600;
  padding:2px 9px; border-radius:11px; white-space:nowrap; line-height:1.6;
}
.mode-byc, .mode-tag-byc { background:#e7f0fb; color:#14487f; border:1px solid #b9d4f0; }
.mode-musteri, .mode-tag-musteri { background:#f3ecfa; color:#6b3fa0; border:1px solid #ddc9f0; }
.mode-dot { width:8px; height:8px; border-radius:50%; display:inline-block; flex:none; }
.mode-dot.mode-byc { background:#2E77C9; border:none; }
.mode-dot.mode-musteri { background:#8e44ad; border:none; }
.mode-switch { display:flex; gap:6px; flex-wrap:wrap; }
.mode-seg { display:flex; align-items:center; gap:9px; padding:8px 13px;
  border:1px solid var(--clr-border); border-radius:var(--radius);
  background:var(--clr-card); text-decoration:none; color:inherit;
  transition:border-color var(--transition); }
.mode-seg:hover { border-color:var(--clr-accent); text-decoration:none; color:inherit; }
.mode-seg.active { border-color:var(--clr-primary); background:var(--clr-primary); color:#fff; }
.mode-seg.active .mode-seg-sub, .mode-seg.active .mode-seg-count { color:rgba(255,255,255,.8); }
.mode-seg-icon { font-size: var(--fs-md); }
.mode-seg-body { display:flex; flex-direction:column; line-height:1.25; }
.mode-seg-title { font-size: var(--fs-xs); font-weight:600; }
.mode-seg-sub { font-size: var(--fs-2xs); color:var(--clr-muted); }
.mode-seg-count { font-size: var(--fs-2xs); font-weight:700; margin-left:6px;
  font-variant-numeric:tabular-nums; }
.mode-explain { background:#f6f8fb; border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:11px 14px; font-size: var(--fs-xs); }
.mode-explain-head { font-weight:600; margin-bottom:4px; display:flex; align-items:center; gap:6px; }

/* ── Kilometre taşı ── */
.ms-mini { display:inline-flex; align-items:center; gap:3px; }
.ms-dot { width:9px; height:9px; border-radius:50%; background:var(--clr-border);
  display:inline-block; flex:none; }
.ms-dot.done { background:var(--clr-success); }
.ms-dot.next { background:var(--clr-warning); box-shadow:0 0 0 2px rgba(243,156,18,.22); }
.ms-dot.late { background:var(--clr-danger); }
.ms-count { font-size: var(--fs-2xs); color:var(--clr-muted); margin-left:4px;
  font-variant-numeric:tabular-nums; }
.ms-next { font-size: var(--fs-2xs); color:var(--clr-warning); font-weight:600; }
.ms-1 { grid-column:span 1; } .ms-2 { grid-column:span 2; } .ms-auto { margin-left:auto; }

/* ── Sevkiyat listesi satırı ── */
.ship-list { display:flex; flex-direction:column; }
.ship-row { display:flex; align-items:center; gap:14px; padding:12px 14px;
  border-bottom:1px solid var(--clr-rule, var(--clr-border)); text-decoration:none;
  color:inherit; transition:background var(--transition); }
.ship-row:last-child { border-bottom:none; }
.ship-row:hover { background:rgba(46,119,201,.04); text-decoration:none; color:inherit; }
.ship-main { flex:1; min-width:0; }
.ship-line1 { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.ship-line2 { display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  font-size: var(--fs-2xs); color:var(--clr-muted); margin-top:3px; }
.ship-no { font-weight:600; font-size: var(--fs-sm); color:var(--clr-primary); }
.ship-party { font-size: var(--fs-xs); }
.ship-meta { font-size: var(--fs-2xs); color:var(--clr-muted); }
.ship-date { font-variant-numeric:tabular-nums; font-size: var(--fs-xs); }
.ship-state { flex:none; }
.ship-ms { flex:none; display:flex; align-items:center; gap:3px; }
.ship-arrow { flex:none; color:var(--clr-muted); opacity:.5; }
.ship-row:hover .ship-arrow { opacity:1; color:var(--clr-accent); }

/* ── Parçalı sevkiyat ── */
.split-chip { display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-2xs);
  font-weight:600; padding:1px 7px; border-radius:9px;
  background:#fff4e5; color:#8a5200; border:1px solid #ffd9a8; }
.split-rail { display:flex; gap:4px; align-items:center; }
.split-count { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── Bant / durum çubuğu ── */
.band-code { font-weight:700; }
.band-open { background:var(--clr-accent); }
.band-done { background:var(--clr-success); }

/* ── Maliyet şeridi ── */
.cost-strip { display:flex; height:26px; border-radius:var(--radius); overflow:hidden;
  border:1px solid var(--clr-border); }
.cost-seg { display:flex; align-items:center; justify-content:center; color:#fff;
  font-size: var(--fs-2xs); font-weight:600; min-width:0; overflow:hidden; white-space:nowrap; }
.cost-seg-text { padding:0 6px; }
.cost-dot { width:9px; height:9px; border-radius:2px; display:inline-block; margin-right:5px; }
.cost-goods { background:#1A355B; } .cost-freight { background:#2E77C9; }
.cost-insurance { background:#16a085; } .cost-duty { background:#c0392b; }
.cost-handling { background:#e67e22; } .cost-other { background:#7f8c8d; }

/* ── Evrak listesi ── */
.doc-panel { border:1px solid var(--clr-border); border-radius:var(--radius);
  background:var(--clr-card); }
.doc-list { display:flex; flex-direction:column; }
.doc-link { display:flex; align-items:center; gap:11px; padding:9px 13px;
  border-bottom:1px solid var(--clr-border); text-decoration:none; color:inherit; }
.doc-link:last-child { border-bottom:none; }
.doc-link:hover { background:rgba(46,119,201,.04); text-decoration:none; color:inherit; }
.doc-count { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── Zamanında teslim rozeti ── */
.otd-pill { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-2xs);
  font-weight:700; padding:3px 11px; border-radius:12px;
  font-variant-numeric:tabular-nums; }
.otd-good { background:#e8f5ee; color:#17663f; }
.otd-mid  { background:#fdf3e2; color:#8a5200; }
.otd-bad  { background:#fbeaea; color:#992d2d; }
.otd-none { background:var(--clr-rule-soft, #eef1f6); color:var(--clr-muted);
  font-weight:500; font-size: var(--fs-2xs); }

/* ── Ortak: boş durum kutusu ── */
/* Boş durum: TEK kural ailesi.
   .empty-state ve .empty-panel buraya EKLENDİ — üçüncü bir kopya yazmak
   yerine mevcut .sd-empty/.sf-empty ailesiyle aynı görünümü paylaşıyorlar. */
.fq-empty, .sf-empty, .sd-empty, .src-preview,
.empty-state, .empty-panel {
  text-align:center; padding:2.4rem 1.2rem; color:var(--clr-muted);
}
.fq-empty-icon, .sf-empty-icon, .sd-empty-icon,
.empty-state-icon, .empty-panel-icon, .empty-icon {
  font-size: var(--fs-3xl); opacity:.35; display:block; margin-bottom:.6rem;
}
.fq-empty-lead, .sf-empty-text, .sd-empty-text,
.empty-state-text, .empty-panel-text { font-size: var(--fs-sm); max-width:44ch;
  margin:.35rem auto 1rem; }
.sf-empty-title, .sd-empty-title, .fq-item-empty-title,
.empty-state-title, .empty-panel-title {
  font-weight:600; color:var(--clr-primary); font-size: var(--fs-md); }
.fq-inline-empty, .sf-inline-empty, .fq-item-empty {
  text-align:center; padding:1.6rem 1rem; color:var(--clr-muted); font-size: var(--fs-sm); }
.fq-item-empty-text { font-size: var(--fs-xs); }
.fq-item-loading { text-align:center; padding:1.4rem; color:var(--clr-muted); font-size: var(--fs-xs); }

/* ── Akış/adım şeridi (form üstü) ── */
.fq-flow, .sf-flow { display:flex; align-items:center; gap:7px; flex-wrap:wrap;
  margin-bottom:1rem; font-size: var(--fs-xs); }
.fq-flow-step, .sf-flow-step { display:flex; align-items:center; gap:7px;
  padding:5px 12px; border:1px solid var(--clr-border); border-radius:20px;
  background:var(--clr-card); }
.fq-flow-step.active, .sf-flow-step.active {
  border-color:var(--clr-primary); background:var(--clr-primary); color:#fff; }
.fq-flow-n, .sf-flow-n { width:19px; height:19px; border-radius:50%;
  background:var(--clr-rule-soft, #eef1f6); color:var(--clr-primary);
  display:grid; place-items:center; font-size: var(--fs-2xs); font-weight:700; flex:none; }
.fq-flow-step.active .fq-flow-n, .sf-flow-step.active .sf-flow-n {
  background:rgba(255,255,255,.24); color:#fff; }
.fq-flow-t, .sf-flow-t { font-weight:500; }
.fq-step-chip { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── Bölüm başlığı ── */
.fq-card-head, .sf-head, .sd-head {
  display:flex; align-items:baseline; gap:11px; flex-wrap:wrap;
  padding-bottom:9px; margin-bottom:13px; border-bottom:1px solid var(--clr-border); }
.fq-card-head-note, .sf-head-note, .sd-note {
  font-size: var(--fs-xs); color:var(--clr-muted); }
/* Sayısal sütun: sağa dayalı, hizalı rakam. (Adım rozeti değil — o *-flow-n) */
.fq-num, .sf-num, .sd-num {
  text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
th.fq-num, th.sf-num, th.sd-num { text-align:right; }
.fq-sub, .sf-note, .sd-note-line { font-size: var(--fs-xs); color:var(--clr-muted); }
.fq-card-foot { border-top:1px solid var(--clr-border); padding-top:11px; margin-top:13px; }

/* ── Rehber kutusu ── */
.fq-guide { background:#f6f8fb; border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:13px 15px; }
.fq-guide-step { display:flex; gap:10px; align-items:flex-start; margin-bottom:9px; }
.fq-guide-step:last-child { margin-bottom:0; }
.fq-guide-n { width:21px; height:21px; border-radius:50%; background:var(--clr-primary);
  color:#fff; display:grid; place-items:center; font-size: var(--fs-2xs); font-weight:700; flex:none; }
.fq-guide-t { font-weight:600; font-size: var(--fs-xs); }
.fq-guide-d { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── Rozet ve etiketler ── */
.fq-badge, .fq-chip, .sf-chip, .sd-pill, .src-chip, .split-chip {
  display:inline-flex; align-items:center; gap:4px; font-size: var(--fs-2xs); font-weight:600;
  padding:2px 8px; border-radius:10px; white-space:nowrap; }
.fq-badge.st-requested { background:#fdf3e2; color:#8a5200; border:1px solid #f5d9a8; }
.fq-badge.st-quoted    { background:#e7f0fb; color:#14487f; border:1px solid #b9d4f0; }
.fq-badge.st-won       { background:#e8f5ee; color:#17663f; border:1px solid #a9dcc2; }
.fq-badge.st-lost      { background:#f3ecfa; color:#6b3fa0; border:1px solid #ddc9f0; }
.fq-badge.st-cancelled { background:#f1f2f4; color:#5f6672; border:1px solid #dde0e5; }
.fq-chip { background:var(--clr-rule-soft, #eef1f6); color:var(--clr-primary); }
.sf-chip-muted { background:transparent; color:var(--clr-muted); border:1px solid var(--clr-border); }
.fq-wait { color:var(--clr-warning); font-weight:600; font-size: var(--fs-2xs); }
.fq-unit { font-size: var(--fs-2xs); color:var(--clr-muted); }
.fq-part { font-family:var(--mono, ui-monospace, Menlo, monospace); font-size: var(--fs-2xs); }
.fq-link { text-decoration:none; font-weight:600; }
.fq-link-soft { text-decoration:none; color:var(--clr-muted); }
.fq-value-muted { color:var(--clr-muted); font-size: var(--fs-xs); }
.fq-readonly { background:#fafbfc; }
.fq-readonly-tag { font-size: var(--fs-2xs); color:var(--clr-muted); font-style:italic; }
.fq-req, .sf-req, .sd-req-note { color:var(--clr-danger); font-weight:600; }

/* ── Filtre çubuğu ── */
.fq-filters { display:flex; gap:6px; flex-wrap:wrap; }
.fq-filter { display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border:1px solid var(--clr-border); border-radius:18px; font-size: var(--fs-xs);
  text-decoration:none; color:var(--clr-ink, inherit); background:var(--clr-card); }
.fq-filter:hover { border-color:var(--clr-accent); text-decoration:none; }
.fq-filter.active { background:var(--clr-primary); border-color:var(--clr-primary); color:#fff; }
.fq-filter-n { font-weight:700; font-variant-numeric:tabular-nums; }

/* ── Yapışkan alt çubuk (form özeti) ── */
.fq-sticky-bar, .sf-sticky, .src-actionbar {
  position:sticky; bottom:0; z-index:15;
  background:var(--clr-card); border-top:1px solid var(--clr-border);
  padding:11px 15px; margin:1rem -1px -1px;
  box-shadow:0 -3px 12px rgba(26,53,91,.07);
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.src-actionbar-inner { display:flex; align-items:center; gap:14px; flex-wrap:wrap; width:100%; }
.fq-sticky-sum, .sf-sum { font-size: var(--fs-sm); }
.sf-sum-rest { color:var(--clr-muted); font-size: var(--fs-xs); }
.fq-col-pick { width:38px; } .fq-col-qty, .sf-col-qty { width:150px; }

/* ── Sevkiyat formu: mod seçim kartları ── */
.sf-mode-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:12px; margin-bottom:1rem; }
.sf-mode-card { position:relative; display:block; border:2px solid var(--clr-border);
  border-radius:10px; padding:14px 16px; cursor:pointer; background:var(--clr-card);
  transition:border-color var(--transition), box-shadow var(--transition); }
.sf-mode-card:hover { border-color:var(--clr-accent); }
.sf-mode-input { position:absolute; opacity:0; pointer-events:none; }
.sf-mode-input:checked + .sf-mode-card,
.sf-mode-card.selected { border-color:var(--clr-primary); box-shadow:0 0 0 3px rgba(26,53,91,.09); }
.sf-mode-top { display:flex; align-items:center; gap:10px; margin-bottom:6px; }
.sf-mode-ico { font-size: var(--fs-xl); color:var(--clr-primary); }
.sf-mode-title { font-weight:600; font-size: var(--fs-md); }
.sf-mode-mark { margin-left:auto; color:var(--clr-primary); font-size: var(--fs-lg); opacity:0; }
.sf-mode-input:checked + .sf-mode-card .sf-mode-mark,
.sf-mode-card.selected .sf-mode-mark { opacity:1; }
.sf-mode-desc { font-size: var(--fs-xs); color:var(--clr-muted); margin-bottom:8px; }
.sf-mode-facts { list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:3px; }
.sf-mode-facts li { font-size: var(--fs-2xs); color:var(--clr-muted);
  display:flex; align-items:flex-start; gap:6px; }
.sf-mode-facts li::before { content:"•"; color:var(--clr-accent); flex:none; }

/* ── Taşıma şekli kartları ── */
.sf-tm-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:9px; }
.sf-tm-card { position:relative; display:block; border:2px solid var(--clr-border);
  border-radius:var(--radius); padding:10px 12px; cursor:pointer;
  background:var(--clr-card); text-align:center; }
.sf-tm-card:hover { border-color:var(--clr-accent); }
.sf-tm-input { position:absolute; opacity:0; pointer-events:none; }
.sf-tm-input:checked + .sf-tm-card,
.sf-tm-card.selected { border-color:var(--clr-primary); background:#f3f7fc; }
.sf-tm-t { font-weight:600; font-size: var(--fs-sm); display:block; }
.sf-tm-sub { font-size: var(--fs-2xs); color:var(--clr-muted); display:block; margin-top:2px; }

/* ── Konteyner doluluk ── */
.sf-fill { background:#f6f8fb; border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:11px 13px; }
.sf-fill-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:10px; margin-bottom:6px; font-size: var(--fs-xs); }
.sf-fill-val { font-weight:700; font-variant-numeric:tabular-nums; }
.sf-fill-track { height:9px; background:var(--clr-border); border-radius:5px; overflow:hidden; }
.sf-fill-bar { height:100%; background:var(--clr-accent); border-radius:5px;
  transition:width .25s ease; }
.sf-fill-bar.over { background:var(--clr-danger); }
.sf-fill-bar.lcl { background:var(--clr-warning); }
.sf-fill-note { font-size: var(--fs-2xs); color:var(--clr-muted); margin-top:5px; }
.sf-remain { font-size: var(--fs-2xs); color:var(--clr-muted); }
.sf-remain.over { color:var(--clr-danger); font-weight:600; }

/* ── Sevkiyat detayı: kilometre taşı rayı ── */
.sd-rail { display:flex; flex-direction:column; gap:0; }
.sd-step { display:flex; gap:13px; padding:11px 0; position:relative; }
.sd-step:not(:last-child)::before {
  content:""; position:absolute; left:13px; top:34px; bottom:-11px;
  width:2px; background:var(--clr-border); }
.sd-step.done:not(:last-child)::before { background:var(--clr-success); }
.sd-dot { flex:none; width:28px; height:28px; border-radius:50%; z-index:1;
  display:grid; place-items:center; font-size: var(--fs-2xs); font-weight:700;
  background:var(--clr-card); border:2px solid var(--clr-border); color:var(--clr-muted); }
.sd-step.done .sd-dot { background:var(--clr-success); border-color:var(--clr-success); color:#fff; }
.sd-step.next .sd-dot { border-color:var(--clr-warning); color:var(--clr-warning);
  box-shadow:0 0 0 3px rgba(243,156,18,.16); }
.sd-step.late .sd-dot { background:var(--clr-danger); border-color:var(--clr-danger); color:#fff; }
.sd-step-t { font-weight:600; font-size: var(--fs-sm); }
.sd-step-d { font-size: var(--fs-2xs); color:var(--clr-muted); font-variant-numeric:tabular-nums; }
.sd-step-btn { margin-left:auto; align-self:center; flex:none; }
.sd-form { background:#f6f8fb; border:1px solid var(--clr-border);
  border-radius:var(--radius); padding:12px 14px; margin-top:9px; }
.sd-reason { color:var(--clr-danger); font-size: var(--fs-2xs); font-weight:600; }
.sd-today { color:var(--clr-danger); font-weight:700; }
/* h1 olarak işaretlendi (sayfanın tek başlığı); ölçü burada sabitlenir ki
   tarayıcının varsayılan 2rem h1 boyutu üst şeridi bozmasın. */
.sd-no { font-family:var(--mono, ui-monospace, Menlo, monospace); font-weight:600;
  font-size: var(--fs-md); margin:0; display:inline-block; letter-spacing:0; }
.sd-tags { display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.sd-tmode { font-size: var(--fs-xs); color:var(--clr-muted); }
.sd-route { font-size: var(--fs-sm); display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.sd-silent { background:#fdf3e2; color:#8a5200; border:1px solid #f5d9a8;
  border-radius:var(--radius); padding:7px 12px; font-size: var(--fs-xs); font-weight:600;
  display:inline-flex; align-items:center; gap:7px; }
.sd-facts { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:11px; }
.sd-fact { display:flex; flex-direction:column; gap:1px; }
.sd-fact-l { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--clr-muted); font-weight:600; }
.sd-fact-v { font-size: var(--fs-sm); font-weight:500; }
.sd-kpi { display:flex; flex-direction:column; gap:2px; padding:10px 12px;
  background:#f6f8fb; border-radius:var(--radius); }
.sd-kpi-lbl { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--clr-muted); font-weight:600; }
.sd-kpi-val { font-size: var(--fs-md); font-weight:700; color:var(--clr-primary);
  font-variant-numeric:tabular-nums; }
.sd-prog-track { height:7px; background:var(--clr-border); border-radius:4px; overflow:hidden; }
.sd-prog-bar { height:100%; background:var(--clr-success); border-radius:4px; }
.sd-doc { display:flex; align-items:center; gap:11px; padding:9px 0;
  border-bottom:1px solid var(--clr-border); }
.sd-doc:last-child { border-bottom:none; }
.sd-doc-ico { flex:none; font-size: var(--fs-xl); color:var(--clr-danger); }
.sd-doc-main { flex:1; min-width:0; }
.sd-doc-name { font-weight:500; font-size: var(--fs-sm); }
.sd-doc-sub { font-size: var(--fs-2xs); color:var(--clr-muted); }
.sd-doc-type { font-size: var(--fs-2xs); color:var(--clr-muted); }

/* ── Kaynak masası ── */
.src-card { border:1px solid var(--clr-border); border-radius:var(--radius);
  background:var(--clr-card); margin-bottom:11px; overflow:hidden; }
.src-card.selected { border-color:var(--clr-primary); box-shadow:0 0 0 2px rgba(26,53,91,.07); }
.src-head { display:flex; align-items:flex-start; gap:12px; padding:12px 14px; }
.src-check { flex:none; padding-top:2px; }
.src-check-icon { font-size: var(--fs-md); }
.src-part { flex:1; min-width:0; }
.src-partno { font-family:var(--mono, ui-monospace, Menlo, monospace);
  font-size: var(--fs-xs); color:var(--clr-muted); }
.src-desc { font-weight:600; font-size: var(--fs-sm); }
.src-nums { display:flex; gap:18px; flex-wrap:wrap; }
.src-num-lbl { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--clr-muted); font-weight:600; display:block; }
.src-num-val { font-size: var(--fs-md); font-weight:700; font-variant-numeric:tabular-nums; }
.src-qty { font-variant-numeric:tabular-nums; }
.src-state { flex:none; }
.src-band { height:3px; }
.src-band-done { background:var(--clr-success); }
.src-band-open { background:var(--clr-warning); }
.src-body { padding:0 14px 12px; }
.src-sup-row { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
/* Tablo satırına düşerse tablo düzenini bozar — tr'de flex UYGULANMAZ */
tr.src-sup-row { display: table-row; }
.src-sup-name { font-weight:600; font-size: var(--fs-sm); }
.src-sup-chips { display:flex; gap:6px; flex-wrap:wrap; }
.src-chip-cheap { background:#e8f5ee; color:#17663f; }
.src-chip-star  { background:#fdf3e2; color:#8a5200; }
.src-chip-risk  { background:#fbeaea; color:#992d2d; }
.src-compare-btn { flex:none; }
.src-compare-panel { border:1px solid var(--clr-border); border-radius:var(--radius);
  background:#fafbfc; padding:11px 13px; margin-top:9px; }
.src-compare-note { font-size: var(--fs-2xs); color:var(--clr-muted); margin-bottom:7px; }
.src-sup-table { width:100%; font-size: var(--fs-xs); }
.src-sup-table th { font-size: var(--fs-2xs); text-transform:uppercase; letter-spacing:.04em;
  color:var(--clr-muted); font-weight:600; padding:4px 8px 4px 0; }
.src-sup-table td { padding:5px 8px 5px 0; border-top:1px solid var(--clr-border); }
.src-chosen { display:flex; align-items:center; gap:7px; font-size: var(--fs-sm); }
.src-chosen-name { font-weight:600; }
.src-fields { display:flex; gap:11px; flex-wrap:wrap; align-items:flex-end; }
.src-field { display:flex; flex-direction:column; gap:2px; }
.src-field-grow { flex:1; min-width:150px; }
.src-field-auto { width:auto; }
.src-field-lbl { font-size: var(--fs-2xs); color:var(--clr-muted); font-weight:600; }
.src-field-hint { font-size: var(--fs-2xs); color:var(--clr-muted); }
.src-promise { font-variant-numeric:tabular-nums; }
.src-moq-warn { color:var(--clr-warning); font-size: var(--fs-2xs); font-weight:600; }
.src-otd-meta { font-size: var(--fs-2xs); color:var(--clr-muted); }
.src-alert { background:#fdf3e2; border:1px solid #f5d9a8; color:#8a5200;
  border-radius:var(--radius); padding:9px 13px; font-size: var(--fs-xs); }
.src-muted-body { opacity:.6; }
.src-controls { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.src-sel { font-weight:600; font-variant-numeric:tabular-nums; }
.src-preview-arrow { color:var(--clr-muted); }
.src-preview-sep { color:var(--clr-border); }

/* ── Bacak (parçalı sevkiyat) ── */
.leg-card { border:2px solid var(--clr-border); border-radius:10px;
  padding:14px 16px; margin-bottom:12px; background:var(--clr-card); }
.leg-head { display:flex; align-items:center; gap:11px; margin-bottom:11px;
  padding-bottom:9px; border-bottom:1px solid var(--clr-border); }
.leg-num { width:25px; height:25px; border-radius:50%; background:var(--clr-primary);
  color:#fff; display:grid; place-items:center; font-size: var(--fs-2xs); font-weight:700; flex:none; }
.leg-title { font-weight:600; font-size: var(--fs-sm); }
.leg-total { margin-left:auto; font-size: var(--fs-xs); color:var(--clr-muted);
  font-variant-numeric:tabular-nums; }
.leg-remove { flex:none; }

/* ── Mobil ── */
@media (max-width:768px){
  .sd-facts { grid-template-columns:1fr 1fr; }
  .ship-row { flex-wrap:wrap; gap:8px; }
  .ship-state, .ship-ms { order:3; }
  .fq-sticky-bar, .sf-sticky, .src-actionbar { flex-direction:column; align-items:stretch; }
  .start-step { flex-wrap:wrap; }
  .start-btn { width:100%; margin-top:6px; }
}

.chain-link { display:contents; text-decoration:none; color:inherit; }

/* ── Tablo taşma düzeltmesi ──────────────────────────────────────────
   Eski kural `.table-responsive > .table { min-width: max-content }` +
   th/td'ye toptan nowrap idi. Derdi haklıydı: Bootstrap'ın width:100%
   kuralı çok sütunlu tabloda sütunları eziyor, başlıklar üst üste
   biniyordu. Ama çare ölçüsüzdü — tabloyu HER ZAMAN içeriği kadar
   genişlettiği için kısa içerikli listeler de şişiyor ve DURUM / TUTAR
   gibi tam da bakılan sağ sütunlar ekran dışına düşüyordu
   (/suppliers 6819px, /scorecards 3200px; kapsayıcı ~980px).

   Ezilmeyi asıl önleyen kural bu değil, yukarıdaki
   `.table th { white-space: nowrap }` (bkz. "── Tables ──" bloğu):
   başlık sarmadığı için tablonun min-content tabanı başlıkların
   toplamıdır ve tarayıcı otomatik düzende tabloyu bu tabanın altına
   ASLA indiremez. Yani üst üste binme min-width olmadan da imkânsız.

   Yeni davranış: tablo kapsayıcıya sığar. Başlıklar gerçekten sığmıyorsa
   tablo yalnız o kadar taşar ve .table-responsive yalnız o kadar kaydırır
   — yani yatay kaydırma sütun sayısına göre kendiliğinden ölçeklenir,
   ayrı bir "geniş tablo" sınıfı işaretlemeye gerek kalmaz. */
.table-responsive > .table { min-width: 0; }
/* Başlık: sarmaz — hem min-content tabanını kurar hem sıralama okunun
   (th.sortable::after) metnin üstüne binmesini engeller. */
.table-responsive > .table th { white-space: nowrap; }
/* Hücre metni sarabilir; sütunlar kapsayıcı içinde payı paylaşır. */
.table-responsive > .table td { white-space: normal; }

/* Sarmaması gereken atomik değerler. Bölünürlerse yanlış okunurlar:
   "$16,400.00" iki satıra inince tutar, "2026-08-06" tarih olmaktan çıkar. */
.table-responsive > .table td.num,
.table-responsive > .table td.text-end,
.table-responsive > .table td.text-nowrap,
.table-responsive > .table td .badge,
.table-responsive > .table td .otd-pill,
.table-responsive > .table td .btn { white-space: nowrap; }

/* Açık işaret: bu sütun uzun metin taşıyor — 160px taban ver ve yukarıdaki
   atomik-nowrap istisnalarını geri al (ör. `td.text-end.wrap`). */
.table-responsive > .table td.wrap,
.table-responsive > .table th.wrap { white-space: normal; min-width: 160px; }

/* Yatay taşma önleme.
   NOT: html'e overflow-x:hidden VERİLMEZ — CSS kuralı gereği bir eksen
   'visible' değilse diğeri 'auto'ya döner ve dikey kaydırma bozulur.
   Doğru çözüm: taşmanın kaynağını kısıtlamak. */
.app-main { min-width: 0; overflow-x: clip; }
.app-main .container-fluid, .app-main .row { min-width: 0; }
.app-main .col, .app-main [class^="col-"], .app-main [class*=" col-"] { min-width: 0; }

/* Sayfa başlığı anlamsal olarak h1; görsel ağırlığı h4 ölçeğinde kalır.
   Ekran okuyucu ve klavye gezinmesi için her sayfada tek h1 bulunmalı. */
.app-main h1[class*="module-header"],
.app-main h1.dash-title,
.app-main h1[class*="-title"] {
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
}

/* ══════════════════════════════════════════════════════════════════
   SCM bileşenleri — bilgi kaybı üreten tanımsız sınıflar
   ══════════════════════════════════════════════════════════════════
   Bu blok kozmetik değil: teslim modu çipi boyanmadığı için sistemin
   merkezî kavramı olan byc/musteri ayrımı listede görsel olarak YOKTU,
   ilerleme çubukları yükseklik/arka plan tanımsız olduğu için hiç
   çizilmiyordu ve üç ayrı önem seviyesi (tone-*) aynı görünüyordu.
   ────────────────────────────────────────────────────────────────── */

/* ── 1. Çip ailesi ── */
.filter-chip, .code-chip, .term-chip, .tmode-chip, .due-chip,
.state-chip, .basis-chip, .docs-chip, .q-chip {
    display: inline-flex; align-items: center; gap: .32em;
    padding: .16em .6em; border-radius: 999px;
    font-size: var(--fs-2xs); font-weight: 600; line-height: 1.5;
    white-space: nowrap; border: 1px solid transparent;
}

/* Parça/belge numarası gibi makine değerleri — okunabilirlik için tek aralıklı */
.code-chip {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: var(--fs-2xs); font-weight: 500;
    background: #eef2f7; color: var(--clr-primary-dark); border-color: #dbe3ec;
}

/* Incoterm / ödeme vadesi gibi sözleşme terimleri */
.term-chip { background: #f3eefb; color: #5b2d90; border-color: #e4d8f5; }

/* TESLİM MODU — sistemin merkezî kavramı, listede ilk bakışta ayrılmalı */
.tmode-chip { background: #eef2f7; color: var(--clr-primary); border-color: #dbe3ec; }
.tmode-chip.byc { background: #e7f0fb; color: #12508f; border-color: #cfe0f5; }
.tmode-chip.musteri { background: #fdf0e4; color: #8a4b00; border-color: #f7ddc2; }

/* Vade durumu: üç seviye GERÇEKTEN farklı görünmeli */
.due-chip { background: #eef2f7; color: var(--clr-muted); border-color: #dde3ea; }
.due-chip.due-ok, .due-ok { background: #e6f6ed; color: #14663a; border-color: #c8e9d7; }
.due-chip.due-soon, .due-soon { background: #fdf3d9; color: #7a5600; border-color: #f2e0aa; }
.due-chip.due-late, .due-late { background: #fdeaea; color: #96231a; border-color: #f6cfcc; }
/* Kapanmış gecikme: olan olmuş, müdahale edilecek bir şey yok. Kırmızı
   değil nötr — sayfadaki kırmızı yalnız BUGÜN aksiyon isteyen işi göstersin. */
.due-chip.due-late-closed, .due-late-closed { background: #eceef1; color: #4a5560; border-color: #d7dbe0; }

.state-chip { background: #eef2f7; color: var(--clr-primary); border-color: #dbe3ec; }
.filter-chip {
    background: var(--clr-card); color: var(--clr-primary);
    border-color: var(--clr-border); cursor: pointer;
    text-decoration: none; transition: var(--transition);
}
.filter-chip:hover { background: #eef2f7; border-color: #c9d4e2; color: var(--clr-primary-dark); }
.filter-chip.active { background: var(--clr-primary); color: #fff; border-color: var(--clr-primary); }
.filter-chips { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.filter-chips-label { font-size: var(--fs-2xs); color: var(--clr-muted); font-weight: 600; margin-right: .2rem; }
.preview-chips { display: flex; flex-wrap: wrap; gap: .35rem; }

/* Dağıtım tabanı: 'ağırlığa göre' mi 'değere göre' mi — maliyet ekranında
   bu ayrım okunmazsa yerleşik maliyetin nasıl çıktığı anlaşılmaz. */
.basis-chip { background: #e7f0fb; color: #12508f; border-color: #cfe0f5; }
.basis-chip.fallback { background: #fdf3d9; color: #7a5600; border-color: #f2e0aa; }
.docs-chip { background: #eef2f7; color: var(--clr-muted); border-color: #dde3ea; }
.q-chip { background: #eef2f7; color: var(--clr-primary); border-color: #dbe3ec; }

/* ── 2. İlerleme çubukları ──
   Yükseklik ve arka plan tanımsız olduğu için bu çubuklar HİÇ çizilmiyordu. */
.spo-prog, .side-prog, .alloc-bar {
    background: #e4e9f0; border-radius: 999px; overflow: hidden;
    height: 6px; width: 100%; min-width: 60px;
}
.spo-prog-bar, .side-prog-bar {
    display: block; height: 100%; border-radius: 999px;
    background: var(--clr-accent); transition: width var(--transition);
}
.spo-prog-bar.full, .side-prog-bar.full { background: var(--clr-success); }
.spo-prog-bar.late, .side-prog-bar.late { background: var(--clr-danger); }
.spo-prog-txt { font-size: var(--fs-2xs); color: var(--clr-muted); font-weight: 600; white-space: nowrap; }
.alloc-bar > span { display: block; height: 100%; background: var(--clr-accent); border-radius: 999px; }

/* ── 3. Sayfa başlığı ──
   flex düzeni yoktu; başlık ile düğmeler masaüstünde alt alta yığılıyordu. */
.page-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: .75rem; margin-bottom: 1rem;
}
.page-head-title { display: flex; align-items: center; gap: .5rem; margin: 0; min-width: 0; }
.page-head-title > i { flex: none; }
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
@media (max-width: 575.98px) {
    .page-head-actions { width: 100%; margin-left: 0; }
}

/* Form alt eylem çubuğu */
.form-actionbar { border-top: 1px solid var(--clr-border); margin-top: 1rem; padding-top: .9rem; }
.form-actionbar-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .5rem;
}
.form-actionbar-note { font-size: var(--fs-2xs); color: var(--clr-muted); margin-right: auto; }

/* ── 4. Tablo hücresi ve tıklanır satır ── */
.cell-main { font-weight: 600; color: var(--clr-primary); display: block; }
.cell-sub { font-size: var(--fs-2xs); color: var(--clr-muted); display: block; margin-top: .1rem; }
.row-link { cursor: pointer; transition: background var(--transition); }
.row-link:hover { background: #eef2f7; }
.row-link-caret { color: var(--clr-muted); opacity: .5; transition: var(--transition); }
.row-link:hover .row-link-caret { opacity: 1; transform: translateX(2px); }

/* 'Sessiz sevkiyat' uyarısı düz metin olarak gözden kaçıyordu */
.silent-flag {
    display: inline-flex; align-items: center; gap: .3em;
    padding: .14em .55em; border-radius: 999px;
    font-size: var(--fs-2xs); font-weight: 600;
    background: #fdf3d9; color: #7a5600; border: 1px solid #f2e0aa;
}
tr.silent, .silent > td { background: #fffdf5; }

/* ── 5. Pano eylem kuyruğu (act-*) ── */
.act-queue { display: flex; flex-direction: column; }
.act-header {
    display: flex; align-items: center; gap: .5rem;
    padding: .6rem .9rem; border-bottom: 1px solid var(--clr-border);
}
.act-title { font-weight: 600; font-size: var(--fs-sm); color: var(--clr-primary); margin: 0; }
.act-ico { flex: none; opacity: .85; }
.act-count {
    margin-left: auto; font-size: var(--fs-2xs); font-weight: 700;
    background: var(--clr-primary); color: #fff;
    border-radius: 999px; padding: .1em .55em; min-width: 1.6em; text-align: center;
}
.act-count-ok { background: var(--clr-success); }
.act-body { padding: .3rem 0; }
.act-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .45rem .9rem; border-bottom: 1px solid #f1f4f8;
    text-decoration: none; color: inherit; transition: background var(--transition);
}
.act-row:last-child { border-bottom: 0; }
.act-row:hover { background: #eef2f7; }
.act-ref { font-weight: 600; font-size: var(--fs-xs); color: var(--clr-primary); white-space: nowrap; }
.act-desc { font-size: var(--fs-2xs); color: var(--clr-muted); min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.act-btn { margin-left: auto; flex: none; }
.act-more { display: block; text-align: center; padding: .5rem; font-size: var(--fs-2xs); font-weight: 600; }
.act-empty, .empty-mini { text-align: center; padding: 1.4rem 1rem; color: var(--clr-muted); }
.act-empty-title, .empty-mini-title { font-weight: 600; font-size: var(--fs-sm); color: var(--clr-primary); }
.act-empty-desc, .empty-mini-desc { font-size: var(--fs-2xs); margin-top: .2rem; }

/* Üç önem seviyesi AYNI görünüyordu — sol şerit rengiyle ayrıştır */
.tone-warn { border-left: 3px solid var(--clr-warning); }
.tone-info { border-left: 3px solid var(--clr-info); }
.tone-danger { border-left: 3px solid var(--clr-danger); }
.tone-warn .act-ico { color: #8a5200; }
.tone-info .act-ico { color: #0f6674; }
.tone-danger .act-ico { color: var(--clr-danger); }

/* ── 6. SCM modül başlıkları ── */
:root {
    --clr-suppliers: #7d3c98;
    --clr-supply: #1e8449;
    --clr-logistics: #1f6fb2;
    --clr-shipments: #0e7c86;
}
.module-header-suppliers, .module-header-suppliers i { color: var(--clr-suppliers); }
.module-header-supply, .module-header-supply i { color: var(--clr-supply); }
.module-header-logistics, .module-header-logistics i { color: var(--clr-logistics); }
.module-header-shipments, .module-header-shipments i { color: var(--clr-shipments); }

/* ══════════════════════════════════════════════════════════════════
   Erişilebilirlik — kontrast düzeltmeleri
   ══════════════════════════════════════════════════════════════════
   Bootstrap'ın .text-warning tonu (#ffc107) beyaz zeminde 1.48:1 ölçüldü;
   WCAG AA gövde metni için 4.5:1 ister. Tam olarak 'kalan gün' ve
   'gecikme payı' gibi DİKKAT ÇEKMESİ gereken metinler okunmuyordu.
   ────────────────────────────────────────────────────────────────── */
.app-main .text-warning { color: #8a5200 !important; }

/* Beyaz metin taşıyan rozetlerin zeminini koyulaştır (hepsi >= 4.5:1) */
.band-k3 { background: #8a6d00; }
.band-k2 { background: #a34e00; }
.fqd-tag.sel { background: #1c7a45; }
.role-chip.role-user { background: #0f6674; }

/* Klavye odağı her yerde görünür olmalı */
.app-main a:focus-visible, .app-main button:focus-visible,
.app-main [tabindex]:focus-visible, .row-link:focus-visible {
    outline: 2px solid var(--clr-accent); outline-offset: 2px; border-radius: 3px;
}

/* İçeriğe atlama hedefi odaklandığında halka çizmesin (fare kullanıcısı için gürültü) */
.app-main:focus { outline: none; }

/* ── Kilometre taşı düzenleme formu taşması ──
   .sd-step bir flex satırı; içindeki collapse formu satır akışına girip
   komşu kartın üstüne taşıyordu. Tam genişlik + kendi satırı. */
.sd-step { flex-wrap: wrap; }
.sd-step > .collapse,
.sd-step > .collapsing,
.sd-step .sd-form { flex: 0 0 100%; width: 100%; max-width: 100%; box-sizing: border-box; }
.sd-form { margin-left: 41px; }
@media (max-width: 576px) { .sd-form { margin-left: 0; } }

/* ── Anlam taşıyan renkler ──
   Bu sınıflar ekranda ayırt edici olmak zorunda: "Kazanıldı" ile
   "Müşteri Taşıyor", "Hava" ile "Deniz" aynı renkte olamaz. */
.q-won   { background:#e8f5ee; color:#17663f; border:1px solid #a9dcc2; }
.q-lost  { background:#f3ecfa; color:#6b3fa0; border:1px solid #ddc9f0; }
.q-requested { background:#fdf3e2; color:#8a5200; border:1px solid #f5d9a8; }
.q-quoted    { background:#e7f0fb; color:#14487f; border:1px solid #b9d4f0; }
.q-cancelled { background:#f1f2f4; color:#5f6672; border:1px solid #dde0e5; }

.tmode-chip { display:inline-flex; align-items:center; gap:5px; font-size: var(--fs-2xs);
  font-weight:600; padding:2px 9px; border-radius:11px; white-space:nowrap; }
.tm-air  { background:#eef2fd; color:#33409e; border:1px solid #c4cdf4; }
.tm-sea  { background:#e6f4f6; color:#0f5c66; border:1px solid #b3dde3; }
.tm-road { background:#f4f1e8; color:#6b5b2e; border:1px solid #ded5bd; }

/* Renk tek başına anlam taşımasın — her rozette ikon da bulunur (şablonda),
   bu kural yalnız renk kimliğini sabitler. */

/* ══════════════════════════════════════════════════════════════════════
   UX DENETİMİ — KAPATILAN KALEMLER (uyg1_css)
   Bu blok style.css'in SONUNDA durur: aşağıdaki kuralların bir kısmı
   şablonların kendi <style> bloklarını (link'ten SONRA geldikleri için
   eşit özgüllükte kazanan kuralları) geçersiz kılmak zorunda; bunu
   !important ile değil, bir seviye daha yüksek özgüllükle yapar.
   ══════════════════════════════════════════════════════════════════════ */

/* ══════ 1. DOKUNMA HEDEFLERİ ══════════════════════════════════════════
   Ölçüm (390px): 486 etkileşimli öğenin 439'u 44px altında, 277'si 32px
   altında, 12'si 24px (WCAG 2.2 AA eşiği) altındaydı.
   KURAL: bu bölümün tamamı mobil media query içinde kalır. Masaüstünde
   tablo yoğunluğu bilinçli bir tercihtir ve DEĞİŞMEZ.
   İstisna: satır içi metin bağlantıları (WCAG "inline exception"). */
@media (max-width: 767.98px) {

    /* ── 1a. Onay kutusu / radyo düğmesi ──
       Ölçülen en kötüler: .basis-input 13px, .form-check-input 16px.
       Bunlar dokunulacak kadar büyük olmadıkları için kullanıcı etikete
       nişan almak zorunda kalıyordu. */
    .app-main input[type="radio"],
    .app-main input[type="checkbox"],
    .app-main .form-check-input {
        min-width: var(--tap-min);
        min-height: var(--tap-min);
        accent-color: var(--clr-primary);
    }
    /* Görsel olarak gizlenip etiketi hedef olarak kullanan desenler
       (kart seçiciler) bu kuralın DIŞINDA — yoksa gizli kutu yer kaplar. */
    .sf-mode-input, .sf-tm-input, .basis-input, .fqd-pick,
    .app-main input.d-none, .app-main .visually-hidden {
        min-width: 0; min-height: 0;
    }
    /* Etiket de hedefin parçası: kutu WCAG AA tabanı olan 24px'te kalır,
       etiket 32px'e çıkarak birlikte rahat bir hedef oluştururlar. */
    .app-main .form-check-label {
        min-height: var(--tap-secondary);
        display: inline-flex; align-items: center;
        padding-block: .25rem;
    }
    .app-main .form-check { min-height: var(--tap-secondary); }

    /* ── 1b. Düğmeler ──
       .btn-sm mobilde 31px ölçüldü; 44px'e çıkar. .btn-sm'in KÜÇÜKLÜĞÜ
       masaüstünde tablo satırını sıkı tutmak içindi — mobilde tablo zaten
       yatay kayıyor, o yüzden burada bir şey kaybedilmiyor. */
    .app-main .btn,
    .app-main .btn-sm,
    .app-main .btn-group > .btn {
        min-height: var(--tap-primary);
        padding-block: .6rem;
        display: inline-flex; align-items: center; justify-content: center;
        gap: .35rem;
    }
    /* Yalnız ikon taşıyan düğmeler 32px GENİŞLİKTE kalıyordu (yükseklik 44,
       genişlik 32 → hedef ölçüsü dar kenardan hesaplanır). Kare 44px. */
    .app-main .btn { min-width: var(--tap-primary); }
    .btn-close, .btn-close.btn-close-white {
        min-width: var(--tap-primary); min-height: var(--tap-primary);
        background-position: center; background-size: 1em;
    }

    /* ── 1c. Form alanları ──
       Ayrıca 16px taban: iOS Safari 16px'in altındaki alana odaklanınca
       sayfayı otomatik yakınlaştırır ve düzen kayar. */
    .app-main .form-control,
    .app-main .form-select,
    .app-main .form-control-sm,
    .app-main .form-select-sm,
    .app-main .table-search,
    .app-main .product-picker-search,
    .app-main .search-select-dropdown input {
        min-height: var(--tap-primary);
        font-size: var(--fs-md);
        padding-block: .5rem;
    }
    .app-main textarea.form-control { min-height: calc(var(--tap-primary) * 1.6); }

    /* ── 1d. Sıralanabilir tablo başlığı ──
       28–36px ölçüldü. Tıklanabilir olduğu için en az ikincil eşiği tutmalı. */
    .app-main th.sortable {
        min-height: var(--tap-primary);
        padding-block: .8rem !important;
    }

    /* ── 1e. Üst çubuk ve yan menü ──
       .nav-item-link 379 kez 39px olarak ölçüldü — tek başına en büyük kalem. */
    .nav-item-link, .side-link, .side-main, .sidebar-footer a {
        min-height: var(--tap-primary);
        display: flex; align-items: center;
    }
    .side-main { flex-direction: column; align-items: flex-start; justify-content: center; }
    .topbar-icon-btn, .user-btn, .lang-btn, .topbar-brand {
        min-height: var(--tap-primary);
        min-width: var(--tap-primary);
        display: inline-flex; align-items: center; justify-content: center;
    }
    .topbar-brand { justify-content: flex-start; }

    /* ── 1f. Çip biçimli filtreler ──
       .filter-chip 24px, .fq-filter 31px ölçüldü. Bunlar ikincil eylem:
       32px eşiği yeterli, 44px filtre şeridini üç satıra çıkarırdı. */
    .filter-chip, .fq-filter, .mode-seg, .facet {
        min-height: var(--tap-secondary);
        padding-block: .35rem;
    }

    /* ── 1g. Kritiklik bandı segmentleri ──
       Yükseklik 32px'ti. GENİŞLİK bilinçli olarak orantısaldır (veriyi
       kodlar) ve DEĞİŞTİRİLMEZ; yalnız yükseklik büyütülür. */
    .band-seg { min-height: var(--tap-primary); }

    /* ── 1h. Tablo hücresindeki ana bağlantı ──
       .cell-main 24px yüksekliğindeydi. Görünmez ::after kaplaması yerine
       gerçek yükseklik verilir: kaplama, aynı hücredeki .cell-sub veya
       komşu düğmenin üstüne binip onları tıklanamaz hâle getirebilirdi. */
    .cell-main {
        min-height: var(--tap-primary);
        display: flex; flex-direction: column; justify-content: center;
    }
}

/* ══════ 2. YAPIŞKAN EYLEM ÇUBUĞU ÖRTÜŞMESİ ═══════════════════════════
   .sf-sticky / .fq-sticky-bar / .src-actionbar `position:sticky; bottom:0`
   ve formun SON çocuğu. Form ekrandan uzun olduğu sürece çubuk görüntü
   alanının altına çakılı kalır ve altındaki içeriği örter (390px'te
   101.6px ölçüldü). Çubuğun kendisi akışta olduğu için kapsayıcıya
   çubuk yüksekliği kadar alt boşluk vermek, her içeriğin çubuğun
   ALTINDAN çıkarılabilmesini sağlar.

   Ölçüm: çubuk yüksekliği 390px'te 109px, 1280px'te 64px.
   Şablonlar bunun için `.has-sticky-actions` kancasını forma koyuyor
   (shipment_form.html:218, freight_quote_form.html:55). Kanca olan yerde
   onu kullanırız; /sourcing'deki .src-actionbar'ın kancası olmadığı için
   :has() ile yedeklenir.

   NOT (dzl1): buradaki yorum bloğu vaktiyle ilk satırda erkenden
   KAPANIYORDU; kalan altı satır CSS'e ham metin olarak düşüyor ve ayrıştırıcı
   hatalı kuralı atarken hemen altındaki `:root { --sticky-bar-h: 72px }`
   bildirimini de yutuyordu. Sonuç: masaüstünde --sticky-bar-h TANIMSIZDI
   (tarayıcıdan okundu: boş dize), `calc(var(--sticky-bar-h) + 20px)`
   geçersiz olduğu için formların kaydırma payı hiç uygulanmıyordu.
   Mobilde çalışıyordu çünkü 116px'lik değer ayrı bir @media bloğunda. */
:root { --sticky-bar-h: 72px; }
@media (max-width: 767.98px) { :root { --sticky-bar-h: 116px; } }

/* Odaklanan alan çubuğun ALTINDA kalmasın. Görsel boşluk değil KAYDIRMA
   payı verilir; böylece masaüstünde formun altında beyaz şerit oluşmaz. */
.has-sticky-actions :is(input:not([type="hidden"]), select, textarea,
                        .card, fieldset, .leg-card, [tabindex]),
.app-main:has(.src-actionbar) :is(input:not([type="hidden"]), select, textarea, .card) {
    scroll-margin-bottom: calc(var(--sticky-bar-h) + 20px);
}
/* Belge kaydırma kabı <html>; scrollIntoView / #anchor için pay. */
html:has(.has-sticky-actions),
html:has(.sf-sticky, .fq-sticky-bar, .src-actionbar) {
    scroll-padding-bottom: calc(var(--sticky-bar-h) + 20px);
}
/* Son kart çubuğa yapışmasın */
@media (max-width: 767.98px) {
    .has-sticky-actions > .card:last-of-type { margin-bottom: .75rem; }
}
/* :has() yoksa (eski tarayıcı) hiçbir şey örtülü kalmasın diye kaba pay */
@supports not selector(:has(*)) {
    html { scroll-padding-bottom: calc(var(--sticky-bar-h) + 20px); }
    .has-sticky-actions { padding-bottom: var(--sticky-bar-h); }
}

/* ══════ 3. KONTRAST DÜZELTMELERİ ═════════════════════════════════════
   Tarayıcıdan gerçek color/background-color çiftleri okunup oran
   hesaplandı; AA eşiği metin için 4.5:1. Ölçülen değerler yorumda.
   Tonlar marka ailesinden (lacivert #1A355B / aksan #2E77C9) çıkmıyor. */

/* 2.87:1 — beyaz metin #27ae60 üzerinde. Şablonun kendi <style>'ı
   style.css'ten sonra geldiği için eski düzeltme eziliyordu; özgüllük
   bir seviye artırıldı. */
.app-main .fqd-tag.sel { background: #1c7a45; }

/* 3.33:1 — #7b8794 açık zeminde. */
.app-main .fqd-badge.muted { color: #4f5a68; }

/* 3.48:1 — beyaz metin #7f8c8d üzerinde (kritiklik bandı "diğer"). */
.band-k4 { background: #5d6768; }

/* 3.82:1 — beyaz metin #e74c3c üzerinde (Gantt "bugün" rozeti). */
.gantt-today-badge { background: #b5342a; }

/* 3.89:1 ve 4.39:1 — kehribar metin açık kehribar zeminde. */
.app-main .fqd-badge.warn { color: #8a5200; }
.app-main .status-badge.st-risk { color: #8a5200; }

/* 4.23:1 (.docs-chip) ve 4.32:1 (.filter-chips-label): ikisi de
   --clr-muted'ın (#64748b) RENKLİ zemin üzerindeki değeridir. Tek tek
   yamamak yerine değişkenin kendisi koyulaştırıldı; aynı aile, beyazda
   5.8:1, #eef2f7 üzerinde 5.2:1. */
:root { --clr-muted: #5b6675; }

/* ══════ 4. BOŞ DURUM BİLEŞENİ ════════════════════════════════════════
   Şablon tarafını başka bir ajan yazıyor. Burada yalnız sınıf ailesi
   hazır edilir; kanonik işaretleme suppliers.html'deki desendir:
     .empty-state > i.empty-state-icon
                  > .empty-state-title
                  > p.empty-state-text
                  > .empty-state-actions > .btn
   .empty-state / -icon / -title / -text zaten vardı; eksik olan
   dikey ritim, eylem alanı ve tablo içi (compact) varyantı eklendi. */
.empty-state, .empty-panel {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: .1rem;
    min-height: 180px;
}
.empty-state-icon, .empty-panel-icon, .empty-icon, .empty-ico {
    font-size: var(--fs-3xl); line-height: 1;
    color: var(--clr-primary); opacity: .28;
    margin-bottom: .55rem;
}
.empty-state-title, .empty-panel-title, .empty-title {
    font-size: var(--fs-md); font-weight: 600;
    color: var(--clr-primary); margin: 0;
}
.empty-state-text, .empty-panel-text, .empty-text, .empty-desc, .empty-lead {
    font-size: var(--fs-sm); color: var(--clr-muted);
    max-width: 46ch; margin: .35rem auto 0; line-height: 1.5;
}
/* Birincil eylem: boş durumun tek işi kullanıcıyı bir sonraki adıma
   göndermek. Buton her zaman metinden sonra ve nefes payıyla gelir. */
.empty-state-actions, .empty-panel-actions {
    display: flex; flex-wrap: wrap; gap: .5rem;
    justify-content: center; margin-top: 1.1rem;
}
.empty-state > .btn, .empty-panel > .btn { margin-top: 1.1rem; }
.empty-state-hint, .empty-panel-hint {
    font-size: var(--fs-2xs); color: var(--clr-muted);
    margin-top: .75rem;
}
/* Tablo gövdesinin içine düşen boş durum: dikey ritim yarıya iner,
   yoksa tek satırlık bir <td> ekranın yarısını yer. */
.empty-state.compact, .empty-panel.compact {
    min-height: 0; padding: 1.4rem 1rem;
}
.empty-state.compact .empty-state-icon { font-size: var(--fs-xl); margin-bottom: .35rem; }
.empty-state.compact .empty-state-title { font-size: var(--fs-sm); }
.empty-state.compact .empty-state-text { font-size: var(--fs-xs); }
.empty-state.compact > .btn, .empty-state.compact .empty-state-actions { margin-top: .7rem; }

/* ══════ 5. TANIMSIZ SINIFLAR ═════════════════════════════════════════
   Şablonlarda kullanılıp hiçbir yerde (ne style.css'te ne de şablonun
   kendi <style> bloğunda) karşılığı olmayan sınıflar tarandı: 106 ad.
   Aşağıdakiler EKRANDA görünen ve stilsiz kaldığı için bilgi kaybı
   üreten olanlardır. Her birinin şablondaki elemanı ve bağlamı okundu.
   Yalnız JS kancası olanlar (görsel karşılığı olmaması DOĞRU olanlar)
   raporda listelendi, buraya yazılmadı.
   ────────────────────────────────────────────────────────────────────
   UYARI: bir sınıfa stil vermeden önce şablonda HANGİ elemana takıldığı
   okunmalıdır. Örn. .fq-num/.sd-num geçmişte "adım rozeti" sanılıp
   24px yuvarlağa çevrildi, oysa SAYISAL TABLO SÜTUNUYDU ve 4 sütun
   çöktü. Ayrıca <tr> üzerine display:flex VERİLMEZ. */

/* ── 5a. Maliyet ekranı: dağıtım anahtarı seçici (costing.html:221) ──
   <input type="radio" class="basis-input"> + <label class="basis-opt">
   çiftiydi; ikisi de stilsizdi, yani radyo 13x13px yerel kutu olarak
   çiziliyordu. Projede zaten var olan desen (.sf-mode-input/.sf-mode-card)
   uygulandı: kutu görsel olarak gizlenir, ETİKET hedef olur. */
.basis-form { margin: 0; }
.basis-group { display: flex; flex-wrap: wrap; gap: .4rem; }
.basis-input { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.basis-opt {
    display: inline-flex; align-items: center; gap: .4rem;
    min-height: var(--tap-primary);          /* dokunma hedefi burada */
    padding: .4rem .8rem; margin: 0;
    border: 1px solid var(--clr-border); border-radius: 999px;
    background: var(--clr-card); color: var(--clr-primary);
    font-size: var(--fs-xs); font-weight: 600;
    cursor: pointer; transition: border-color var(--transition), background var(--transition);
}
.basis-opt:hover { border-color: var(--clr-accent); background: #f4f8fd; }
.basis-input:checked + .basis-opt {
    background: var(--clr-primary); border-color: var(--clr-primary); color: #fff;
}
/* Kutu gizlendiği için odak halkası ETİKETE taşınmalı, yoksa klavye
   kullanıcısı seçimin nerede olduğunu göremez. */
.basis-input:focus-visible + .basis-opt {
    outline: 2px solid var(--clr-accent); outline-offset: 2px;
}
.basis-default-tag {
    font-size: var(--fs-2xs); font-weight: 500;
    opacity: .7; padding-left: .25rem;
}
.basis-input:checked + .basis-opt .basis-default-tag { opacity: .85; }

/* ── 5b. Maliyet ekranı: sevkiyat seçme listesi (costing.html:75) ── */
.picker-list { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
.picker-item {
    display: block; padding: .6rem .75rem;
    border-bottom: 1px solid var(--clr-border);
    text-decoration: none; color: inherit;
    transition: background var(--transition);
}
.picker-item:last-child { border-bottom: none; }
.picker-item:hover { background: rgba(46,119,201,.05); text-decoration: none; color: inherit; }
.picker-item.active { background: #eef3fb; box-shadow: inset 3px 0 0 var(--clr-primary); }
.picker-item-top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.picker-item-no { font-weight: 600; color: var(--clr-primary); }
.picker-item-amount { font-weight: 600; font-variant-numeric: tabular-nums; }
.picker-item-sub { font-size: var(--fs-2xs); color: var(--clr-muted); margin-top: .1rem; }

/* ── 5c. Maliyet ekranı: marj kutuları ve yerleşik birim sütunu ──
   .margin-cell bir <div> ızgara hücresi (costing.html:489).
   .landed-unit-col hem <th> hem <td> üzerinde: ekranın ÇIKTI sütunu. */
.margin-cell {
    display: flex; flex-direction: column; gap: .15rem;
    padding: .65rem .8rem; background: #f6f8fb; border-radius: var(--radius);
    height: 100%;
}
.margin-label {
    font-size: var(--fs-2xs); text-transform: uppercase; letter-spacing: .04em;
    color: var(--clr-muted); font-weight: 600;
}
.margin-value { font-size: var(--fs-lg); font-weight: 700; font-variant-numeric: tabular-nums; }
.landed-unit-col { background: #f6f9fd; }
td.landed-unit-col { font-weight: 600; }

/* ── 5d. Pano: yan liste (dashboard.html:520) ── */
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-start; gap: .75rem; margin-bottom: 1rem; }
.dash-sub { font-size: var(--fs-xs); color: var(--clr-muted); }
.dash-date { font-variant-numeric: tabular-nums; }
.dash-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-left: auto; align-items: center; }
.side-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.side-row {
    display: flex; align-items: center; gap: .6rem;
    padding: .5rem .9rem; border-bottom: 1px solid #f1f4f8;
}
.side-row:last-child { border-bottom: none; }
.side-main { display: flex; flex-direction: column; min-width: 0; flex: 1; text-decoration: none; color: inherit; }
.side-main:hover { text-decoration: none; }
.side-main:hover .side-ref { text-decoration: underline; }
.side-ref { font-weight: 600; font-size: var(--fs-xs); color: var(--clr-primary); }
.side-desc { font-size: var(--fs-2xs); color: var(--clr-muted);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-meta { display: flex; align-items: center; gap: .35rem; margin-left: auto; flex: none; }
.side-date { font-size: var(--fs-2xs); color: var(--clr-muted); font-variant-numeric: tabular-nums; }
.side-day { font-size: var(--fs-2xs); font-weight: 700; font-variant-numeric: tabular-nums;
    color: var(--clr-muted); }
/* "2 gün kaldı" — kalan süre kritikleştiğinde renk TEK başına değil,
   kalınlıkla birlikte değişir. */
.side-day.is-soon { color: #96231a; }
.side-pill {
    display: inline-block; font-size: var(--fs-2xs); font-weight: 700;
    background: var(--clr-primary); color: #fff;
    border-radius: 999px; padding: .05em .5em; margin-left: .35rem;
}
.side-link { font-size: var(--fs-xs); font-weight: 600; padding: .5rem .9rem; display: inline-block; }
/* Zincir düğümü yetki nedeniyle tıklanamıyorsa bunu GÖSTER */
.chain-node.is-locked { opacity: .55; cursor: default; }
.chain-node.is-locked:hover { border-color: var(--clr-border); box-shadow: none; }
/* Chart.js tuvali ölçülü bir ebeveyn ister; yoksa yükseklik her çizimde büyür. */
.chart-box { position: relative; height: 260px; }

/* ── 5e. Sevkiyat listesi: tarih sütunu ve yüz (facet) kartları ── */
.date-lbl { display: block; font-size: var(--fs-2xs); text-transform: uppercase;
    letter-spacing: .04em; color: var(--clr-muted); font-weight: 600; }
.date-val { font-variant-numeric: tabular-nums; font-size: var(--fs-sm); }
.date-sub { display: block; font-size: var(--fs-2xs); }
/* <button class="card card-summary ... facet"> — buton varsayılanları
   kartın metnini ortalıyordu. */
.facet {
    text-align: left; width: 100%; border: none; cursor: pointer;
    background: var(--clr-card); font: inherit; color: inherit;
}
.facet[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--clr-primary), var(--shadow-md); }
.facet-ico { color: var(--clr-muted); opacity: .55; font-size: var(--fs-2xs); }
.facet[aria-pressed="true"] .facet-ico { color: var(--clr-accent); opacity: 1; }
.mini-tag {
    display: inline-flex; align-items: center; gap: .25em;
    font-size: var(--fs-2xs); font-weight: 600; padding: .05em .5em;
    border-radius: 999px; background: #eef2f7; color: var(--clr-muted);
    border: 1px solid #dde3ea;
}
.mini-tag.danger { background: #fdeaea; color: #96231a; border-color: #f6cfcc; }
.tmode-text { font-size: var(--fs-2xs); color: var(--clr-muted); }
/* Teslimi müşteri üstlenmiş sevkiyat listede ayırt edilmeliydi */
.ship-row.row-musteri { box-shadow: inset 3px 0 0 #8e44ad; }
/* Parçalı sevkiyat grubu rengi (grp % 4). Renk TEK başına anlam taşımaz,
   yanında her zaman "#n" metni bulunur. */
.split-c1 { --split-hue: #2E77C9; } .split-c2 { --split-hue: #16a085; }
.split-c3 { --split-hue: #8e44ad; } .split-c4 { --split-hue: #d35400; }
.split-chip.split-c1, .split-chip.split-c2,
.split-chip.split-c3, .split-chip.split-c4 {
    background: color-mix(in srgb, var(--split-hue) 12%, #fff);
    /* %78 karışım 4.44:1 ölçüldü (AA eşiği 4.5) — %68'e indirildi. */
    color: color-mix(in srgb, var(--split-hue) 68%, #000);
    border-color: color-mix(in srgb, var(--split-hue) 32%, #fff);
}
.split-rail::before {
    content: ""; display: block; width: 3px; height: 100%; min-height: 14px;
    border-radius: 2px; background: var(--split-hue, var(--clr-border));
}

/* ── 5f. Tedarikçi siparişleri: açık talep kartı ── */
.demand-card { border-left: 3px solid var(--clr-warning); }
.demand-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem; }
.demand-title { font-weight: 600; font-size: var(--fs-sm); color: var(--clr-primary);
    display: inline-flex; align-items: center; gap: .35rem; }
.demand-sub { font-size: var(--fs-2xs); color: var(--clr-muted); flex-basis: 100%; }
.demand-table th { font-size: var(--fs-2xs); }
.demand-row.row-late > td { background: #fff8f7; }
.demand-late-icon { font-size: var(--fs-2xs); }
.spo-table td { vertical-align: middle; }
/* Şablon .is-full/.is-part yazıyor, CSS .full/.late bekliyordu:
   %100 tamamlanmış tedarik siparişinin çubuğu YEŞİLE DÖNMÜYORDU. */
.spo-prog-bar.is-full, .side-prog-bar.is-full { background: var(--clr-success); }
.spo-prog-bar.is-part, .side-prog-bar.is-part { background: var(--clr-warning); }

/* ── 5g. Gümrük: giriş satırı ve elle girilen tutarlar ── */
.entry-row > td { vertical-align: middle; }
.entry-row-docs > td { background: #fafbfc; border-top: none; padding-top: 0; }
.manual-money { border-top: 1px solid var(--clr-border); padding-top: .8rem; }
.manual-money-head { font-weight: 600; font-size: var(--fs-sm); color: var(--clr-primary);
    margin-bottom: .5rem; display: flex; align-items: center; gap: .35rem; }

/* ── 5h. Tedarikçi formu: yardım kutusu ve canlı önizleme ── */
.hint-card { background: #f6f8fb; border: 1px solid var(--clr-border); }
.hint-list { margin: 0; padding-left: 1.1rem; font-size: var(--fs-xs);
    color: var(--clr-muted); display: flex; flex-direction: column; gap: .3rem; }
.preview-card { border: 1px dashed var(--clr-border); background: #fbfcfe; }
.preview-name { font-weight: 600; font-size: var(--fs-md); color: var(--clr-primary); }
.preview-line { font-size: var(--fs-xs); color: var(--clr-muted);
    display: flex; align-items: center; gap: .4rem; }
/* Kısa kod / ülke kodu: makine değeri, tek aralıklı ve büyük harf */
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    text-transform: uppercase; letter-spacing: .06em; }
.req { color: var(--clr-danger); font-weight: 700; margin-left: .15rem; }
/* Büyük anahtar: 44px dokunma hedefini kendi başına tutar */
.switch-lg .form-check-input { width: 2.6em; height: 1.4em; margin-top: .1em; }
.switch-lg .form-check-label { font-weight: 600; padding-left: .3rem; }

/* ── 5i. Tablo yardımcıları (suppliers / supplier_detail / spo) ── */
/* "Son sütun içeriğine daralsın" hilesi. width:1% YAZMAYIN: yüzde kısıtı
   otomatik tablo düzeninde tabloyu şişirebiliyor — vaktiyle buradaki %1,
   o günkü `min-width: max-content` kuralıyla birleşince 68px'lik eylem
   sütunu /suppliers tablosunu 6819px'e çıkarmıştı (7 ekran yatay kaydırma).
   width:1px aynı işi görür; otomatik tablo düzeni hücreyi zaten min-content
   genişliğine açar, yüzde kısıtı doğmaz. */
.th-actions { width: 1px; white-space: nowrap; }
/* Pasif tedarikçi satırı listede sönük dursun ama okunur kalsın */
.row-muted > td { opacity: .62; }
.row-muted:hover > td { opacity: 1; }
/* .code-chip'in yumuşak varyantı (ülke kodu gibi ikincil değerler) */
.code-chip.soft { background: transparent; color: var(--clr-muted); border-color: var(--clr-border); }

/* ── 5j. Kaynak masası ── */
.src-num { display: flex; flex-direction: column; gap: .1rem; }
/* <tr> — tablo düzenini bozmamak için SADECE zemin verilir, flex verilmez */
tr.src-sup-risk > td { background: #fff8f7; }
.src-sup { min-width: 0; }

/* ── 5k. Navlun teklifi detayı: şablonun <style>'ında eksik kalanlar ── */
.fqd-leg-label { font-size: var(--fs-2xs); text-transform: uppercase;
    letter-spacing: .04em; color: var(--clr-muted); font-weight: 600; }

/* ── 5l. Gövde kabuğu ── */
.app-shell { min-height: 100vh; }

/* ══════ 6. SAYI SARMASI ══════════════════════════════════════════════
   1280px'te maliyet ekranındaki KPI kartı "$16,400.00" değerini rakam
   ORTASINDAN bölüyordu ("$16,400.0" / "0"): 119px kutuya 134px metin.
   Para değeri asla sarmaz; dar sütunda ölçek bir basamak iner. */
.card-summary .card-value, .margin-value, .sd-kpi-val, .src-num-val, .chain-count {
    font-variant-numeric: tabular-nums;
}
/* Sarmayı kapatmak tek başına yetmiyor: yan menü açıkken 4'lü KPI sütunu
   daralıyor ve sayı bu kez kutudan TAŞIYOR. Bu yüzden nowrap yalnızca
   sığdığı genişlikte açılır, ölçek de bir basamak iner.
   Ara değer uydurulmaz; hep --fs-* adımları kullanılır. */
@media (min-width: 1250px) {
    .card-summary .card-value, .margin-value, .sd-kpi-val { white-space: nowrap; }
}
@media (min-width: 1250px) and (max-width: 1499.98px) {
    .card-summary .card-value { font-size: var(--fs-xl); }
}
/* 1250px altında 4 kart 100px'in altına iniyor: "$16,400.00" hiçbir okunur
   punto ile sığmıyor. Kalıcı çözüm ızgarayı 2'liye düşürmek — bu bir
   col-* sınıfı değişikliği, yani ŞABLON işi (bkz. rapor). Burada yalnız
   punto indirilerek sarma en aza çekilir. */
@media (min-width: 992px) and (max-width: 1249.98px) {
    .card-summary .card-value { font-size: var(--fs-md); }
    .margin-value { font-size: var(--fs-md); }
}

/* ══════ 7. GİRİŞ EKRANI — BU DOSYADAN DÜZELTİLEMEZ ═══════════════════
   /login mobilde 5 alanı da 38px ölçüldü (44px eşiğinin altında) ve iOS
   16px altı alanda odakta otomatik yakınlaştırma yapar. AMA login.html
   base.html'i genişletmiyor ve static/style.css'i HİÇ yüklemiyor
   (yalnız CDN Bootstrap + kendi <style> bloğu). Buraya yazılacak her
   kural ölü koddur; düzeltme şablon tarafında yapılmalı.
   Bkz. belgeler/rapor/uyg1_css.md — "devredilenler". */

/* ══════ 8. DAR EKRANDA TABLO → KART ══════════════════════════════════
   Şablon ajanı (uyg2) veri girişi tablolarına `.tbl-cards` sözleşmesini
   ekledi ve karşılığını bu dosyadan bekliyor. Kullanım şablonlardan
   OKUNARAK doğrulandı: order_form.html:15/47/119/142, order_detail.html:89,
   shipment_form.html:366, freight_quote_form.html:141 + JS'te
   tbl-cards-pick / tbl-cards-head hücreleri üretiliyor.

   Neden gerekli: veri girişi tablosu 390px ekranda sütun sayısı yüzünden
   sığmıyor (eskiden `min-width:max-content` ile ~2100px'ti; o kural
   düzeltildikten sonra bile başlıkların min-content tabanı ekranı aşıyor)
   ve kullanıcı formu yatay kaydırarak dolduruyordu. Bu blok tabloyu
   dar ekranda karta çeviriyor — asıl mobil çözüm budur.

   Sözleşme:
     <div class="table-responsive tbl-cards-wrap">
       <table class="table tbl-cards">
         <thead><tr><th scope="col">Parça No</th>…</tr></thead>
         <tbody><tr>
           <td class="tbl-cards-head" data-label="Parça No">…  ← kart başlığı
           <td data-label="Adet">…
           <td class="tbl-cards-act" data-label="">…            ← eylem hücresi

   NOT: seçiciler `.table-responsive > .table.tbl-cards` ile başlar; kısa
   `.tbl-cards td` yazılsaydı yukarıdaki min-width/white-space kurallarını
   özgüllükte YENEMEZDİ.
   NOT 2: tr/td'ye `display:block` YALNIZ bu media query içinde ve yalnız
   .tbl-cards altında verilir. Genel tablolarda satır düzenini bozar. */
@media (max-width: 767.98px) {

  .tbl-cards-wrap { overflow-x: visible; }

  .table-responsive > .table.tbl-cards { min-width: 0; width: 100%; margin-bottom: 0; }

  /* Başlık satırı görsel olarak gizlenir, ekran okuyucuda KALIR — tablo
     semantiği korunsun ve ::before etiketleri çift okunmasın diye. */
  .table-responsive > .table.tbl-cards > thead {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
  }

  .table-responsive > .table.tbl-cards > tbody { display: block; padding: .55rem; }
  .table-responsive > .table.tbl-cards > tbody > tr {
    display: block; background: var(--clr-card);
    border: 1px solid var(--clr-border); border-radius: var(--radius);
    padding: .6rem .75rem; margin-bottom: .6rem;
  }
  .table-responsive > .table.tbl-cards > tbody > tr:last-child { margin-bottom: 0; }

  /* Hücre: solda etiket, sağda değer */
  .table-responsive > .table.tbl-cards > tbody > tr > td {
    display: grid; grid-template-columns: minmax(6.5rem, 40%) 1fr;
    align-items: center; gap: .55rem; width: auto; padding: .3rem 0;
    border: 0; white-space: normal; text-align: left;
  }
  .table-responsive > .table.tbl-cards > tbody > tr > td::before {
    content: attr(data-label);
    font-size: var(--fs-2xs); font-weight: 600; line-height: 1.25;
    color: var(--clr-muted);
  }

  /* Kart başlığı: tam genişlik, altı çizgili */
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-head {
    display: block; padding: 0 0 .5rem; margin-bottom: .4rem;
    border-bottom: 1px solid var(--clr-border); font-weight: 600;
  }
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-head::before {
    display: block; margin-bottom: .25rem;
  }

  /* Eylem hücresi: etiketsiz, sağa dayalı, üstten ayrılmış */
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-act {
    display: flex; justify-content: flex-end; gap: .5rem;
    padding: .55rem 0 0; margin-top: .4rem; border-top: 1px solid var(--clr-border);
  }

  /* Etiketi boş hücre etiket sütunu açmasın */
  .table-responsive > .table.tbl-cards > tbody > tr > td[data-label=""] { display: block; }
  .table-responsive > .table.tbl-cards > tbody > tr > td[data-label=""]::before,
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-act::before { content: none; }

  /* Seçim kutusu hücresi kartın en üstünde. Bu kural [data-label=""]
     kuralından SONRA gelmeli — aynı özgüllük, kaynak sırası karar verir. */
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-pick {
    display: flex; align-items: center; gap: .5rem; padding: 0 0 .45rem;
  }
  .table-responsive > .table.tbl-cards > tbody > tr > td.tbl-cards-pick::before { content: none; }

  /* Kart içinde sayısal sütun sağa yaslanmaz — etiketin yanında dursun */
  .table-responsive > .table.tbl-cards > tbody > tr > td.sf-num,
  .table-responsive > .table.tbl-cards > tbody > tr > td.fq-num,
  .table-responsive > .table.tbl-cards > tbody > tr > td.text-end { text-align: left; }

  .table-responsive > .table.tbl-cards > tbody > tr > td .form-control,
  .table-responsive > .table.tbl-cards > tbody > tr > td .form-select,
  .table-responsive > .table.tbl-cards > tbody > tr > td .sf-qty-wrap { width: 100%; min-width: 0; }

  /* tfoot (genel toplam): kart yığınının altında tek şerit */
  .table-responsive > .table.tbl-cards > tfoot { display: block; border-top: 1px solid var(--clr-border); }
  .table-responsive > .table.tbl-cards > tfoot > tr {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: .75rem; padding: .75rem .95rem;
  }
  .table-responsive > .table.tbl-cards > tfoot > tr > td {
    display: block; border: 0; padding: 0; white-space: normal; text-align: left;
  }
  .table-responsive > .table.tbl-cards > tfoot > tr > td.tbl-cards-void { display: none; }
}

/* ══════ 9. KALAN KÜÇÜK TANIMSIZLAR ═══════════════════════════════════ */

/* Kalem satırı sayısal alanları (order_form / invoice_form).
   Bunlar <input type=number> — sağa dayalı ve hizalı rakam. */
.item-qty, .item-price, .item-tax, .item-leadtime { text-align: right; font-variant-numeric: tabular-nums; }
.item-total { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* freight_quotes.html:183 — bekleme süresi 14 günü geçti. .fq-wait zaten
   kehribar; "kritik" bir seviye YUKARI çıkmalı, yoksa iki durum aynı görünür. */
.fq-wait.crit { color: #96231a; font-weight: 700; }

/* dashboard.html:319 — kâr marjı özet kartının sol şeridi. Diğer
   .card-summary türevleriyle (invoiced/paid/balance/count) aynı ailede. */
.card-summary.margin { border-left-color: var(--clr-payments); }

/* freight_quote_form.html:399 — girilen adet kalan miktara SESSİZCE
   kırpılıyor ve sınıf 700ms sonra kaldırılıyor. Stil olmadığı için
   kullanıcı yazdığı sayının değiştirildiğini hiç görmüyordu. */
.was-clamped {
    animation: clamp-flash .7s ease;
    border-color: var(--clr-warning) !important;
}
@keyframes clamp-flash {
    0%, 60% { background: #fdf3d9; }
    100%    { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
    .was-clamped { animation: none; background: #fdf3d9; }
}

/* sourcing.html:541 — seçim tamamlanınca eylem çubuğu "hazır" duruma
   geçiyor (buton da enable oluyor). Durum değişimi görünür olmalı. */
.src-preview.is-ready { color: var(--clr-primary); font-weight: 600; }
.src-actionbar.is-active { border-top-color: var(--clr-primary); background: #f6f9fd; }

/* ══════════════════════════════════════════════════════════════════════════
   DÜZELTME TURU 2 (dzl1_css) — üç bağımsız UX/UI testinin ölçtüğü kusurlar
   ══════════════════════════════════════════════════════════════════════════
   Bu blok dosyanın SONUNDA durur: kuralların bir kısmı şablonların kendi
   <style> bloklarını (base.html'de style.css'ten SONRA yüklendikleri için
   eşit özgüllükte kazanan kuralları) geçersiz kılmak zorunda. Bunu
   !important ile değil `.app-main` ön ekiyle — bir seviye daha yüksek
   özgüllükle — yapar. İstisna: Bootstrap'ın kendisi !important kullandığı
   yerlerde (.bg-*, .text-*) aynı silahla karşılık verilir.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════ 10. BELİRTEÇLER (token) ═══════════════════════════════════════════
   Üç yeni katman:
   1) --fs-display-*  : tipografi ölçeğinin eksik üst basamakları.
   2) --clr-*-ink     : METİN için koyulaştırılmış marka tonları. Marka
                        rengi (dolgu/kenarlık/odak halkası) DEĞİŞMEZ, yalnız
                        aynı renk metin olarak kullanıldığında ink sürümü
                        devreye girer. Böylece palet korunur, AA tutar.
   3) --sem-*         : rozetlerin anlam paleti. Kural: BİR RENK BİR ANLAM.
   ────────────────────────────────────────────────────────────────────── */
:root {
    /* ── Tipografi: eksik basamaklar ──
       10 şablonun <style> bloğunda 111 ham bildirim ölçüldü; ham değerlerin
       tamamı aşağıdaki basamaklara oturuyor. 2.2rem ve 1.7rem'in karşılığı
       yoktu, eklendi. 0.68–0.72rem (10.9–11.5px) için BİLEREK basamak
       AÇILMADI: okunabilirlik tabanı --fs-2xs'tir (12px), o değerler yukarı
       yuvarlanır. Eşleme tablosu: /tmp/dzl1_sozlesme.md */
    --fs-display-sm: 1.75rem;   /* 28px — büyük sayı/başlık (ham 1.7rem)   */
    --fs-display-md: 2.25rem;   /* 36px — kahraman KPI    (ham 2.2rem)     */

    /* ── Kontrol kenarlığı ──
       Ölçüm: --clr-border (#e2e6ea) form alanında 1.14:1 (açık zemin) /
       1.25:1 (beyaz). WCAG 1.4.11 "UI bileşeni" eşiği 3:1. --clr-border
       AYNEN KALIR (kart ayracı, tablo çizgisi gibi DEKORATİF hatlar için
       doğru ton); etkileşimli kontroller aşağıdaki koyu tona geçer.
       #78859a: beyazda 3.74:1, sayfa zemininde (#f2f4f8) 3.40:1. */
    --clr-control-border: #78859a;
    --clr-control-border-soft: #99a4b3;   /* pasif/salt-okunur alan */

    /* ── Metin tonları (aynı ailenin koyu sürümleri) ── */
    --clr-accent-ink:  #215a9c;  /* #2E77C9'un metin sürümü: 6.34:1        */
    --clr-warning-ink: #8a5200;  /* kehribar metin: 5.80:1 — "uyarı" korunur */
    --clr-success-ink: #146c43;
    --clr-danger-ink:  #b02a37;

    /* ── Anlam paleti — BİR RENK BİR ANLAM ──
       mavi   = açık / işlemde / karar bekliyor
       kehribar = bekliyor / riskli / kısmi
       kırmızı = gecikme / olumsuz sonuç
       yeşil  = OLUMLU sonuç (yalnız bu; "kapandı" için kullanılmaz)
       gri    = kapandı / iptal / veri yok  (nötr)
       mor    = KARŞI TARAF (müşteri) üstlendi
       lacivert = BİZ (BYC) üstlendik
       Taşıma modu ayrı bir eksendir: çivit / turkuaz / toprak. */
    --sem-open-bg:#e7f0fb;  --sem-open-ink:#14487f;  --sem-open-line:#bcd4ef;
    --sem-wait-bg:#fdf3e2;  --sem-wait-ink:#8a5200;  --sem-wait-line:#f0d5a6;
    --sem-late-bg:#fdeaea;  --sem-late-ink:#96231a;  --sem-late-line:#f3c9c5;
    --sem-ok-bg:#e6f6ed;    --sem-ok-ink:#14663a;    --sem-ok-line:#bfe3d0;
    --sem-done-bg:#eef1f6;  --sem-done-ink:#42536b;  --sem-done-line:#d3dae4;
    --sem-byc-bg:#e8eef7;   --sem-byc-ink:#1A355B;   --sem-byc-line:#1A355B;
    --sem-cust-bg:#f4edfa;  --sem-cust-ink:#6b3fa0;  --sem-cust-line:#8e44ad;
    --sem-air-bg:#eceafb;   --sem-air-ink:#3a3795;   --sem-air-line:#c8c3f0;
    --sem-sea-bg:#e2f2f4;   --sem-sea-ink:#0f5c66;   --sem-sea-line:#b6dde2;
    --sem-road-bg:#f3f0e6;  --sem-road-ink:#5f5124;  --sem-road-line:#ded5bd;

    /* ── Rozet geometrisi (tek temel) ──
       Ölçüm: 381 örnekte 14 yükseklik, 10 punto, 9 radius. Tek temel. */
    --bdg-h: 22px;
    --bdg-fs: var(--fs-2xs);
    --bdg-fw: 600;
    --bdg-radius: 999px;
    --bdg-pad-x: .55rem;

    /* ── Modül başlığı renkleri: 24px başlıkta 3:1 tutmayan üç ton ──
       Ölçüm (sayfa zemini #f2f4f8 üzerinde):
         --clr-products #e67e22 = 2.59:1  →  #b35c0e = 4.28:1
         --clr-invoices #27ae60 = 2.61:1  →  #1c7a45 = 4.87:1
         --clr-payments #16a085 = 2.98:1  →  #0f7d6a = 4.58:1
       Diğer altı modül tonu ölçüldü ve 3:1'i zaten tutuyor, DOKUNULMADI. */
    --clr-products: #b35c0e;
    --clr-invoices: #1c7a45;
    --clr-payments: #0f7d6a;

    /* ── Durum renkleri: hem metin hem beyaz-metin-taşıyan dolgu olarak
       kullanıldıkları için ikisini birden tutan tonlara çekildi. ──
         #27ae60 → beyaz metin 2.87:1 ;  #1c7a45 → 5.36:1
         #e74c3c → beyaz metin 3.82:1 ;  #c0392b → 5.44:1
         #17a2b8 → beyaz metin 3.04:1 ;  #0f6674 → 6.61:1
       --clr-warning DEĞİŞMEZ: yalnız grafik (çubuk, nokta, sol şerit) olarak
       kullanılır ve üzerindeki koyu metin (#3d2c05) zaten 6.14:1. Kehribarın
       METİN sürümü --clr-warning-ink'tir. */
    --clr-success: #1c7a45;
    --clr-danger:  #c0392b;
    --clr-info:    #0f6674;
}

/* ══════ 11. KONTRAST — ölçülen eşik altı çiftler ══════════════════════════
   Yöntem: tarayıcıdan gerçek color/background-color çiftleri okundu, alfa
   birleştirildi, oran hesaplandı. Metin eşiği 4.5:1 (>=24px veya >=18.66px
   kalın metinde 3:1), UI bileşeni 3:1. Ölçülen değer her kuralın yanında. */

/* ── 11a. Kontrol kenarlıkları (1.14–1.25:1 → >=3:1) ──
   7 arama kutusu, tüm form alanları, filtre select'leri ve TIKLANABİLİR
   çipler. Dekoratif ayraçlar (--clr-border) bilinçli olarak dışarıda. */
.app-main .form-control,
.app-main .form-select,
.app-main .table-search,
.app-main .form-check-input,
.app-main .input-group-text,
.app-main .product-picker-search,
.app-main .order-picker-search,
.app-main .search-select-dropdown input,
.app-main .filter-chip,
.app-main .fq-filter,
.app-main .basis-opt,
.app-main .mode-seg,
.app-main .sf-mode-card,
.app-main .sf-tm-card {
    border-color: var(--clr-control-border);
}
/* Yalnız DEVRE DIŞI kontrol yumuşak kenarlık alabilir — WCAG 1.4.11 devre
   dışı bileşenleri muaf tutar. `[readonly]` muaf DEĞİLDİR (hâlâ odaklanılır,
   içeriği seçilir): ölçümde 2.53:1 çıkmıştı, tam güce alındı. */
.app-main .form-control:disabled,
.app-main .form-select:disabled {
    border-color: var(--clr-control-border-soft);
}
/* Odak halkası marka aksanında kalır — kenarlık koyulaştı diye odak
   göstergesi kaybolmasın. */
.app-main .form-control:focus,
.app-main .form-select:focus,
.app-main .table-search:focus { border-color: var(--clr-accent); }

/* ── 11b. Bootstrap "outline" düğmeleri ──
   .btn-outline-warning = 1.48:1 ölçüldü ve /orders/2'de onay kipini açan
   "Onayı Geri Al" düğmesi tam olarak bu. Kehribar #FFC107 beyaz üstünde
   okunmaz; "uyarı" anlamını koruyan koyu kehribara (#8a5200, 5.80:1)
   çekildi. .btn-outline-info (#0dcaf0) 1.78:1 → #0f6674 (6.01:1). */
.app-main .btn-outline-warning {
    color: var(--clr-warning-ink);
    border-color: #a86a00;          /* kenarlık 3.85:1 */
}
.app-main .btn-outline-warning:hover,
.app-main .btn-outline-warning:focus,
.app-main .btn-outline-warning:active,
.app-main .btn-outline-warning.active {
    background-color: var(--clr-warning-ink);
    border-color: var(--clr-warning-ink);
    color: #fff;
}
.app-main .btn-outline-info { color: #0f6674; border-color: #128293; }
.app-main .btn-outline-info:hover,
.app-main .btn-outline-info:focus,
.app-main .btn-outline-info:active,
.app-main .btn-outline-info.active {
    background-color: #0f6674; border-color: #0f6674; color: #fff;
}
/* 4.26:1 — #6c757d açık zeminde. */
.app-main .btn-outline-secondary { color: var(--clr-muted); border-color: #8a94a2; }
.app-main .btn-outline-secondary:hover,
.app-main .btn-outline-secondary:focus,
.app-main .btn-outline-secondary:active {
    background-color: var(--clr-muted); border-color: var(--clr-muted); color: #fff;
}
/* 4.38:1 — .btn-outline-danger beyazımsı zeminde. */
.app-main .btn-outline-danger { color: var(--clr-danger-ink); border-color: #c9525d; }

/* ── 11c. Bootstrap yardımcı sınıfları (kendileri !important kullanıyor) ── */
.app-main .text-success { color: var(--clr-success-ink) !important; }  /* 4.26 → 5.9 */
.app-main .text-danger  { color: var(--clr-danger-ink)  !important; }  /* 4.38 → 6.4 */
.app-main .text-info    { color: #0f6674 !important; }
/* .badge.bg-warning beyaz metinle 1.63:1 ölçüldü; .text-dark eklenmiş
   örnekler de var. İkisini birden kapatan tek çözüm: kehribarı ZEMİN
   olmaktan çıkarıp projenin zaten kullandığı açık-kehribar/koyu-kehribar
   çiftine getirmek (5.82:1). */
.app-main .badge.bg-warning,
.app-main .badge.bg-warning.text-dark {
    background-color: var(--sem-wait-bg) !important;
    color: var(--sem-wait-ink) !important;
    border-color: var(--sem-wait-line);
}
.app-main .badge.bg-success-subtle { color: #0f5132 !important; }      /* 3.49 → 5.6 */

/* ── 11d. Marka aksanı metin olarak (4.15:1) ──
   Bağlantı metni --clr-accent-ink'e geçer; dolgu/kenarlık/odak halkası
   marka tonunda (#2E77C9) KALIR. */
a { color: var(--clr-accent-ink); }
.app-main .nav-link { color: var(--clr-accent-ink); }                  /* 4.09 → 6.3 */
.app-main .nav-tabs .nav-link.active { color: var(--clr-primary); }

/* ── 11e. Kehribar METİN kullanımları (1.99–3.9:1) ── */
.app-main .ms-next,
.app-main .fq-wait,
.app-main .src-moq-warn,
.app-main .sd-step.next .sd-dot,
.app-main .fqd-badge.warn,
.app-main .status-badge.st-risk { color: var(--clr-warning-ink); }

/* ── 11f. Yeşil METİN kullanımları (2.58–2.87:1) ── */
.app-main .sf-mode-mark,
.app-main .pp-price,
.app-main .u-state.on,
.app-main .act-badge.create { color: var(--clr-success-ink); }
/* shipment_detail.html <style>'ındaki çıplak `span.on` (2.87:1) */
.app-main .sd-rail .on, .app-main .sd-step .on { color: var(--clr-success-ink); }

/* ── 11g. Kırmızı METİN kullanımları (3.36–3.82:1) ── */
.app-main .req, .app-main .fq-req, .app-main .sf-req,
.app-main .fqd-req, .app-main .sd-req-note,
.app-main .role-card-warn, .app-main .act-badge.delete,
.app-main .u-state.off { color: var(--clr-danger-ink); }

/* ── 11h. Gantt çubuğu metni (beyaz, 2.19–3.82:1) ──
   Çubuk renkleri veriyi kodluyor; ton korunur, koyuluk AA'ya çekilir. */
.gantt-bar.state-risk { background: #9a5b00; }   /* beyaz metin 5.46:1 */
.gantt-bar.state-late { background: #b5342a; }   /* beyaz metin 6.02:1 */
.gantt-bar.state-done { background: #1c7a45; }   /* beyaz metin 5.36:1 */

/* ══════ 12. KAYDIRILAN TABLODA KİMLİK SÜTUNU ═════════════════════════════
   Ölçüm (390px): 37 tablonun 31'i yatay kayıyor, hiçbirinde yapışkan sütun
   yok. Yıkıcı eylemler en sağda duruyor — /suppliers "Sil" 805px, /payments
   665px, /supplier-orders 766px, /forecast 892px, /production 1161px,
   /freight-quotes 1207px sağda. Kullanıcı oraya kaydırdığında satırın KİM
   olduğunu gösteren ilk sütun ekrandan çıkmış oluyor: kimi sildiğini
   görmeden siliyor.

   SÖZLEŞME (şablon ajanı bunu ekler — bkz. /tmp/dzl1_sozlesme.md):
     <div class="table-responsive">
       <table class="table tbl-sticky-id"> ...
   Sınıf TABLONUN kendisine gelir, sarmalayıcıya değil. İlk sütun kimlik
   sütunu OLMALI (ad / belge no / parça no). Kimlik sütunu ilk sırada
   değilse sınıf EKLENMEZ — yanlış sütunu dondurmak bilgi kaybıdır.

   Neden körlemesine `.table-responsive > table`e verilmiyor: bazı
   tablolarda ilk hücre onay kutusu ya da ikon (kimlik değil), bazılarında
   ilk sütun ekranın yarısını kaplayacak kadar geniş — dondurulunca geri
   kalanı okunmaz hâle gelirdi.

   NOT: `.tbl-cards` (dar ekranda karta dönüşen veri girişi tabloları) bu
   ailenin DIŞINDA; orada tablo zaten kaymıyor. §13'te açıkça iptal edilir. */

.app-main .table-responsive > .table.tbl-sticky-id > thead > tr > th:first-child,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr > th:first-child,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr > td:first-child,
.app-main .table-responsive > .table.tbl-sticky-id > tfoot > tr > td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    /* OPAK olmak zorunda: şeffaf kalırsa altından kayan sütunlar geçer.
       Satır durumunu boyayan kurallar (.silent, .row-late …) bu değişkeni
       değiştirerek rengi devralır — böylece özgüllük savaşı olmaz. */
    background-color: var(--tbl-sticky-bg, var(--clr-card));
    border-right: 1px solid var(--clr-border);
}
/* Başlık hücresi hem sola hem (ileride) üste yapışabilir; gövde
   hücrelerinin ÜSTÜNDE kalmalı. */
.app-main .table-responsive > .table.tbl-sticky-id > thead > tr > th:first-child { z-index: 3; }

/* Kaydırma gölgesi: "bu sütun donduruldu, sağda daha var" işareti.
   ::after DEĞİL ::before kullanılır — th.sortable::after sıralama okunu
   çiziyor, onu ezmemek gerekiyor.
   Görünürlüğü --tbl-shadow'a bağlı: kaydırma İLERLEDİKÇE açılır. Tablo hiç
   kaymıyorsa (ya da tarayıcı kaydırma zaman çizelgesini desteklemiyorsa)
   değer 0 kalır ve gölge çizilmez — yoksa kaymayan tabloda "sağda daha var"
   diye YANLIŞ ipucu vermiş olurduk. Sütun sınırı yine 1px ayraçla belli. */
@property --tbl-shadow {
    syntax: "<number>";
    inherits: true;
    initial-value: 0;
}
.app-main .table-responsive > .table.tbl-sticky-id > thead > tr > th:first-child::before,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr > td:first-child::before,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr > th:first-child::before,
.app-main .table-responsive > .table.tbl-sticky-id > tfoot > tr > td:first-child::before {
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 12px;
    transform: translateX(100%);
    background: linear-gradient(to right, rgba(26, 53, 91, .18), rgba(26, 53, 91, 0));
    opacity: var(--tbl-shadow, 0);
    pointer-events: none;
}

/* Satır durumu → yapışkan hücrenin zemini. Bu kurallar OLMASA yapışkan
   hücre satırın uyarı rengini yutardı. */
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.silent,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.row-silent { --tbl-sticky-bg: #fffdf5; }
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.row-late,
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.src-sup-risk { --tbl-sticky-bg: #fff8f7; }
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.entry-row-docs { --tbl-sticky-bg: #fafbfc; }
.app-main .table-responsive > .table.tbl-sticky-id > tbody > tr.group-header { --tbl-sticky-bg: #f4f6f9; }
/* Bootstrap vurgu/hover'ı hücreye `box-shadow: inset` ile bindiriyor;
   zemini ezmediği için üstte kalır ve hover yapışkan sütunda da görünür. */

/* ══════ 12b. KAYDIRILABİLİRLİK İPUCU ═════════════════════════════════════
   İki ayrı ipucu, çünkü tek başına ikisi de yetmiyor:
   (a) macOS'ta kaydırma çubuğu "overlay" olduğu için tablo durunca GÖRÜNMEZ
       — kullanıcı kaydırılabildiğini bilmiyor. Klasik (yer kaplayan) çubuğa
       zorlanır ve markaya uygun boyanır.
   (b) Sağ kenarda solan gradyan; içeriğin kesildiğini gösterir. */
.app-main .table-responsive {
    scrollbar-width: thin;
    scrollbar-color: #8a94a2 #e8ecf2;
    /* Mutlak konumlu torunlar (ör. Bootstrap .visually-hidden) kapsayıcı
       blok bulamayınca belgeye tutunup yatay taşma üretiyordu: 1024px'te
       /suppliers detayında ölçülen 1028px'lik taşmanın kaynağı buydu.
       Kaydırıcı konumlandırılınca torun burada kalır ve kırpılır. */
    position: relative;
}
.app-main .table-responsive::-webkit-scrollbar { height: 10px; }
.app-main .table-responsive::-webkit-scrollbar-track {
    background: #e8ecf2; border-radius: 999px;
}
.app-main .table-responsive::-webkit-scrollbar-thumb {
    background: #8a94a2; border-radius: 999px; border: 2px solid #e8ecf2;
}
.app-main .table-responsive::-webkit-scrollbar-thumb:hover { background: #5b6675; }

/* Sağ kenar gradyanı. Kaydırma ilerlemesine bağlanır: kaydırılacak yer
   kalmayınca (ve tablo hiç kaymıyorsa) kendiliğinden kapanır — yani yanlış
   ipucu vermez. Desteklenmeyen tarayıcıda hiçbir şey olmaz. */
@property --tbl-fade {
    syntax: "<number>";
    inherits: false;
    initial-value: 1;
}
@supports (animation-timeline: scroll(self inline)) {
    .app-main .table-responsive {
        --tbl-fade: 1;                       /* 1 = gradyan yok */
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 34px),
                            rgb(0 0 0 / calc(.28 + .72 * var(--tbl-fade))));
                mask-image: linear-gradient(to right, #000 calc(100% - 34px),
                            rgb(0 0 0 / calc(.28 + .72 * var(--tbl-fade))));
        animation: tbl-scroll-fade linear;
        animation-timeline: scroll(self inline);
    }
    /* Tek zaman çizelgesi iki değeri birden sürer:
       --tbl-fade   0 → 1 : sağ kenar gradyanı SÖNER (sona gelindi)
       --tbl-shadow 0 → 1 : yapışkan sütun gölgesi AÇILIR (kaydırılıyor) */
    @keyframes tbl-scroll-fade {
        from { --tbl-fade: 0; --tbl-shadow: 0; }
        to   { --tbl-fade: 1; --tbl-shadow: 1; }
    }
}
@media (prefers-reduced-motion: reduce) {
    .app-main .table-responsive { animation: none; }
}

/* ══════ 12c. AÇILIR SEÇİCİ vs. KAYDIRMA İPUCU ═══════════════════════════
   KÖK NEDEN — fatura formunda parça seçicisinin kırpılması:
   Yukarıdaki ipucu `.table-responsive`e bir `mask-image` veriyor. Maskelenen
   bir eleman, kendi alt ağacını BOYAMA sırasında kırpar — ve bu kırpma
   `position: fixed` torunları da kapsar. Seçici kutusu `position: fixed`,
   `z-index: 1050` olmasına rağmen tablonun alt kenarında kesiliyordu.

   Ölçüm (1280×900, /invoices/new): açılır kutu 509→809 px, `.table-responsive`
   ise 432→611 px; yani 300 px'lik listenin yalnız 102 px'i (≈%34) boyanıyor,
   ikinci sonuç ortasından kesiliyordu. Kaydet/İptal 627 px'te, listenin tam
   üstünde duruyordu.

   Deneyle ayrıştırıldı:
     mask-image: none        → kırpma BİTİYOR   (elementFromPoint kutunun
                               alt ucunda listeyi buluyor)
     overflow: visible       → kırpma SÜRÜYOR   (yani suçlu overflow değil)
   Bu yüzden çözüm `z-index` ya da `overflow` değil, MASKE.

   Maske tamamen kaldırılmıyor: seçici AÇIKKEN kapanır, kapanınca ipucu geri
   gelir. Böylece iki özellik de yaşar. */
.app-main .table-responsive:has(.product-picker-dropdown.show),
.app-main .table-responsive:has(.order-picker-dropdown.show),
.app-main .table-responsive:has(.search-select-dropdown.show) {
    -webkit-mask-image: none;
            mask-image: none;
}

/* Kalem bölümünün çerçevesi.
   (a) KALICI: seçici barındıran tablonun altına biraz pay — kutu satırın
       hemen altında açıldığı için tablo kenarına yapışık durmasın.
   (b) SEÇİCİ AÇIKKEN: listenin boyu kadar yer ayrılır; kart uzar, Kaydet ve
       İptal aşağı iner ve liste onların ÜSTÜNE binmez. Pay tablonun ALTINA
       eklendiği için giriş alanı yerinden oynamaz — açılan kutu kaymaz. */
.app-main .table-responsive:has(.product-picker-wrap),
.app-main .table-responsive:has(.order-picker-wrap) {
    --pick-reserve: 320px;
    padding-bottom: 14px;
    transition: padding-bottom .12s ease-out;
}
.app-main .table-responsive:has(.product-picker-dropdown.show),
.app-main .table-responsive:has(.order-picker-dropdown.show) {
    padding-bottom: var(--pick-reserve, 320px);
}
@media (prefers-reduced-motion: reduce) {
    .app-main .table-responsive:has(.product-picker-wrap),
    .app-main .table-responsive:has(.order-picker-wrap) { transition: none; }
}

/* Dar ekran: 320 px'lik pay 844 px yüksekliğinde ekranın üçte birini yer.
   Kutu zaten JS ile ekrana sığacak kadar kısaltılıyor (base.html), ayrılan
   pay da onunla aynı ölçüde küçülür. */
@media (max-width: 768px) {
    .app-main .table-responsive:has(.product-picker-wrap),
    .app-main .table-responsive:has(.order-picker-wrap) { --pick-reserve: 210px; }
}

/* Liste okunabilirliği: satırlar 33 px; 320 px'lik kutuda arama satırından
   sonra ilk 7-8 sonuç TAM görünür, gerisi kutunun İÇİNDE kaydırılır.
   max-height JS tarafından ekrana göre daraltılabilir; buradaki değerler
   üst sınırdır. */
.app-main .product-picker-dropdown { max-height: 320px; }
.app-main .product-picker-list { max-height: calc(320px - 40px); }
.app-main .order-picker-dropdown { max-height: 300px; }
.app-main .order-picker-list { max-height: calc(300px - 40px); }

/* ══════ 12c. SAYISAL HÜCRE ══════════════════════════════════════════════
   Ölçüm: 21 para/miktar sütunu sola hizalı ve orantısız rakamla çiziliyor;
   sütun boyunca basamaklar hizalanmadığı için tutarlar göz kararı
   karşılaştırılamıyor. `.num` ZATEN projede var (suppliers.html vb.) ama
   yalnız nowrap tanımlıydı — hiza ve tabular-nums eklendi.
   Şablon ajanı eksik sütunlara `.num`ı ekleyecek; liste sözleşmede. */
.app-main td.num, .app-main th.num,
.app-main .table td.num, .app-main .table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
/* Zaten sağa yaslanmış sütunlar da hizalı rakam kullansın. */
.app-main .table td.text-end, .app-main .table th.text-end {
    font-variant-numeric: tabular-nums;
}
/* Sağa yaslı başlıkta sıralama oku metnin üstüne binmesin */
.app-main th.num.sortable, .app-main th.text-end.sortable { padding-right: 22px !important; }

/* ══════ 13. ROZET SİSTEMİ ════════════════════════════════════════════════
   Ölçüm: 381 rozet örneğinde 41 arka plan rengi, 9 border-radius,
   14 yükseklik, 10 punto. 23 vakada AYNI METİN farklı renkte ("Zamanında"
   5 ayrı renk, "Riskli" 5, "Açık"/"Kazanıldı"/"BYC Lojistiği"/"Hava Yolu"
   3'er). Sebep: her ekran kendi rozet ailesini yazmış (.status-badge,
   .state-chip, .fq-badge, .fqd-badge, .q-chip, .sd-pill, .mode-*, .tmode-*)
   ve hiçbiri ortak bir kaynağa bağlı değil.

   Çözüm iki katmanlı:
   13a) TEK GEOMETRİ — bütün aileler aynı yükseklik/punto/radius/dolgu/
        ağırlığı paylaşır. Ailelerin ADLARI korunur (şablonlar zaten onları
        yazıyor); yalnız görünüş tek kaynaktan gelir.
   13b) ANLAM EŞLEMESİ — aynı anlamı taşıyan farklı adlar AYNI --sem-*
        belirtecine bağlanır. Kural: bir renk bir anlam.

   Punto neden --fs-2xs (12px) ve neden `rem`: Bootstrap'ın `.badge`i
   `font-size: .75em` yazıyor; `<small>`/`.small` içine düşen rozet
   0.875 × 0.75 = 10.5px'e çöküyordu. /scorecards'ta ölçülen 9–10.5px'lik
   okunmaz rozetlerin sebebi buydu. Mutlak `rem` bileşik küçülmeyi keser. */

/* ── 13a. Tek geometri ── */
.app-main .badge,
.app-main .status-badge, .app-main .state-chip,
.app-main .fq-badge, .app-main .fqd-badge, .app-main .fqd-tag,
.app-main .q-chip, .app-main .fq-chip, .app-main .sf-chip,
.app-main .sf-chip-muted, .app-main .fq-step-chip,
.app-main .mode-badge, .app-main .mode-tag, .app-main .mode-chip,
.app-main .tmode-chip, .app-main .otd-pill, .app-main .sd-pill,
.app-main .band-pill, .app-main .mini-tag, .app-main .split-chip,
.app-main .code-chip, .app-main .term-chip, .app-main .due-chip,
.app-main .docs-chip, .app-main .basis-chip, .app-main .src-chip,
.app-main .act-badge, .app-main .act-count, .app-main .u-state,
.app-main .role-chip, .app-main .order-ref-badge, .app-main .silent-flag,
.app-main .ent-chip, .app-main .field-chip, .app-main .side-pill,
.app-main .start-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3em;
    min-height: var(--bdg-h);
    padding: 0 var(--bdg-pad-x);
    border-radius: var(--bdg-radius);
    border: 1px solid transparent;
    font-size: var(--bdg-fs);
    font-weight: var(--bdg-fw);
    line-height: 1.35;
    letter-spacing: 0;
    white-space: nowrap;
    vertical-align: middle;
    text-decoration: none;
}
/* Makine değeri (parça no, ülke kodu, belge no) tek aralıklı KALIR —
   geometri ortak, karakter ailesi ayrı: okunurluk için gerekli. */
.app-main .code-chip, .app-main .fq-part {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-weight: 500;
}
/* Tablo hücresinde rozet dikey ortada dursun (inline-flex taban çizgisi) */
.app-main .table td > .badge, .app-main .table td > .status-badge { vertical-align: middle; }

/* ── 13b. Anlam eşlemesi ──
   Yardımcı: bir aileye tek satırda üç değer bağlanır. */

/* (1) SİPARİŞ / İŞ DURUMU — .status-badge.st-* ve .state-chip.state-*
   İkisi aynı dört durumu anlatıyordu, iki ayrı palette. Birleştirildi. */
.app-main .status-badge.st-ontime, .app-main .state-chip.state-ontime,
.app-main .sd-pill.ok, .app-main .src-chip-cheap {
    background: var(--sem-ok-bg); color: var(--sem-ok-ink); border-color: var(--sem-ok-line);
}
.app-main .status-badge.st-risk, .app-main .state-chip.state-risk,
.app-main .fqd-badge.warn, .app-main .src-chip-star, .app-main .silent-flag,
.app-main .split-chip {
    background: var(--sem-wait-bg); color: var(--sem-wait-ink); border-color: var(--sem-wait-line);
}
.app-main .status-badge.st-late, .app-main .state-chip.state-late,
.app-main .sd-pill.late, .app-main .fqd-badge.danger, .app-main .src-chip-risk,
.app-main .mini-tag.danger, .app-main .fqd-tag.exp {
    background: var(--sem-late-bg); color: var(--sem-late-ink); border-color: var(--sem-late-line);
}
/* "Tamamlandı" NÖTR bir kapanıştır, olumlu bir sonuç değil: yeşil DEĞİL
   gri. Yeşil yalnız (2)'deki olumlu sonuçlarda kullanılır. */
.app-main .status-badge.st-done, .app-main .state-chip.state-done,
.app-main .fqd-badge.neutral, .app-main .fqd-badge.muted,
.app-main .docs-chip, .app-main .mini-tag, .app-main .code-chip,
.app-main .fq-chip, .app-main .sf-chip, .app-main .sf-chip-muted,
.app-main .fq-step-chip, .app-main .ent-chip, .app-main .field-chip,
.app-main .due-chip, .app-main .state-chip {
    background: var(--sem-done-bg); color: var(--sem-done-ink); border-color: var(--sem-done-line);
}
.app-main .code-chip.soft {
    background: transparent; color: var(--clr-muted); border-color: var(--clr-control-border-soft);
}

/* (2) TEKLİF DURUMU — .q-chip.q-* (dashboard, `q-{{ q.status }}` ile
   DİNAMİK üretiliyor: dashboard.html:609) ve .fq-badge.st-* / .fqd-badge.*
   ────────────────────────────────────────────────────────────────────
   UYARI/KARAR: `.q-won .q-lost .q-requested .q-quoted .q-cancelled`
   sınıfları düz metin aramasıyla şablonlarda BULUNAMIYOR ve "ölü kod"
   sanıldı. ÖLÜ DEĞİLLER — dashboard.html sınıf adını
   `class="q-chip q-{{ q.status }}"` diye BİRLEŞTİREREK üretiyor; canlı
   sayfada ölçüldüler (q-chip.q-won "Kazanıldı", q-chip.q-lost
   "Müşteri Taşıyor"). Bu yüzden SİLİNMEDİ, aileye bağlandı. */
.app-main .q-chip.q-requested, .app-main .fq-badge.st-requested {
    background: var(--sem-wait-bg); color: var(--sem-wait-ink); border-color: var(--sem-wait-line);
}
.app-main .q-chip.q-quoted, .app-main .fq-badge.st-quoted,
.app-main .fqd-badge.info {
    background: var(--sem-open-bg); color: var(--sem-open-ink); border-color: var(--sem-open-line);
}
.app-main .q-chip.q-won, .app-main .fq-badge.st-won,
.app-main .fqd-badge.ok, .app-main .fqd-tag.cheap {
    background: var(--sem-ok-bg); color: var(--sem-ok-ink); border-color: var(--sem-ok-line);
}
/* 'lost' bu iş alanında "kaybedilen ihale" değil, "teslimi MÜŞTERİ üstlendi"
   demek (çeviri: fq_status_lost → "Müşteri Taşıyor"). O yüzden kırmızı
   değil, karşı tarafı gösteren MOR ailesine bağlanır — teslim modu
   "müşteri" ile aynı renk, çünkü aynı şeyi söylüyorlar. */
.app-main .q-chip.q-lost, .app-main .fq-badge.st-lost, .app-main .fq-badge.neutral {
    background: var(--sem-cust-bg); color: var(--sem-cust-ink); border-color: var(--sem-cust-line);
}
.app-main .q-chip.q-cancelled, .app-main .fq-badge.st-cancelled {
    background: var(--sem-done-bg); color: var(--sem-done-ink); border-color: var(--sem-done-line);
}

/* (3) TESLİM MODU — byc / musteri
   Ölçümde "BYC Lojistiği" 3, "Müşteri" 3 ayrı renkteydi; biri (sarı)
   uyarı anlamı yüklüyordu, oysa teslim modu NÖTR bir sınıflandırma.
   Renk + KENARLIK BİÇİMİ birlikte kodlar (düz = biz, kesikli = karşı taraf)
   ki renk körü kullanıcı da ayırabilsin. */
.app-main .mode-badge.byc, .app-main .mode-tag-byc, .app-main .mode-chip.mode-byc,
.app-main .tmode-chip.byc {
    background: var(--sem-byc-bg); color: var(--sem-byc-ink);
    border: 1px solid var(--sem-byc-line);
}
.app-main .mode-badge.musteri, .app-main .mode-tag-musteri,
.app-main .mode-chip.mode-musteri, .app-main .tmode-chip.musteri {
    background: var(--sem-cust-bg); color: var(--sem-cust-ink);
    border: 1px dashed var(--sem-cust-line);
}
/* Sarı "Müşteri" rozeti: Bootstrap yardımcısı olduğu için !important şart. */
.app-main .mode-badge.musteri.badge.bg-warning {
    background-color: var(--sem-cust-bg) !important; color: var(--sem-cust-ink) !important;
}
.app-main .mode-badge.byc.badge.bg-primary {
    background-color: var(--sem-byc-bg) !important; color: var(--sem-byc-ink) !important;
}
.app-main .mode-dot.mode-byc { background: var(--sem-byc-ink); }
.app-main .mode-dot.mode-musteri { background: var(--sem-cust-ink); }

/* (4) TAŞIMA MODU — hava / deniz / kara. Teslim modundan AYRI bir eksen;
   kendi üç tonu var ve başka hiçbir yerde kullanılmaz. */
.app-main .tmode-chip.tm-air, .app-main .fqd-tag.fast {
    background: var(--sem-air-bg); color: var(--sem-air-ink); border-color: var(--sem-air-line);
}
.app-main .tmode-chip.tm-sea {
    background: var(--sem-sea-bg); color: var(--sem-sea-ink); border-color: var(--sem-sea-line);
}
.app-main .tmode-chip.tm-road {
    background: var(--sem-road-bg); color: var(--sem-road-ink); border-color: var(--sem-road-line);
}

/* (5) KANIT SEVİYESİ (A/B/C) — karne ölçütünün ne kadar veriye dayandığı.
   Not/kalite DEĞİL güven seviyesidir; o yüzden yeşil–kehribar–kırmızıyla
   YARIŞMAZ, lacivert yoğunluk rampasıyla kodlanır.
   Şablon sözleşmesi: <span class="ev-chip ev-a|ev-b|ev-c"> */
.app-main .ev-chip {
    background: var(--sem-done-bg); color: var(--sem-done-ink); border-color: var(--sem-done-line);
}
.app-main .ev-chip.ev-a { background: #1A355B; color: #fff; border-color: #1A355B; }
.app-main .ev-chip.ev-b { background: #d3ddeb; color: #1A355B; border-color: #b6c6dc; }
.app-main .ev-chip.ev-c { background: #eef1f6; color: #42536b; border-color: #d3dae4; }

/* (6) KARNE NOTU — .otd-pill.otd-good/mid/bad + "Yetersiz veri" (nötr).
   Nota bir kalite yargısıdır: olumlu/orta/olumsuz üçlüsü doğru eşleme. */
.app-main .otd-pill.otd-good {
    background: var(--sem-ok-bg); color: var(--sem-ok-ink); border-color: var(--sem-ok-line);
}
.app-main .otd-pill.otd-mid {
    background: var(--sem-wait-bg); color: var(--sem-wait-ink); border-color: var(--sem-wait-line);
}
.app-main .otd-pill.otd-bad {
    background: var(--sem-late-bg); color: var(--sem-late-ink); border-color: var(--sem-late-line);
}
.app-main .otd-pill.otd-none {
    background: var(--sem-done-bg); color: var(--sem-done-ink); border-color: var(--sem-done-line);
}

/* (7) KRİTİKLİK BANDI K1–K4 — kendi sıralı rampası (koyu kırmızı → gri).
   Ayrı bir eksen; yukarıdaki durum renklerine bağlanmaz, çünkü K2 "uyarı"
   değil "ikinci en kritik" demek. Tonlar §3'te AA'ya çekilmişti. */
.app-main .band-pill.band-k1 { background: #a4291c; color: #fff; border-color: #a4291c; }
.app-main .band-pill.band-k2 { background: #a34e00; color: #fff; border-color: #a34e00; }
.app-main .band-pill.band-k3 { background: #8a6d00; color: #fff; border-color: #8a6d00; }
.app-main .band-pill.band-k4 { background: #5d6768; color: #fff; border-color: #5d6768; }

/* Bootstrap'ın ham renk yardımcıları: rozet olarak kullanıldıklarında
   anlam paletine çekilir. Şablon ajanı bunları anlamlı sınıflarla
   değiştirdikçe bu kurallar kendiliğinden devre dışı kalır. */
.app-main .badge.bg-secondary {
    background-color: var(--sem-done-bg) !important; color: var(--sem-done-ink) !important;
    border-color: var(--sem-done-line);
}
.app-main .badge.bg-light.text-muted {
    background-color: var(--sem-done-bg) !important; color: var(--sem-done-ink) !important;
    border-color: var(--sem-done-line);
}
.app-main .badge.bg-success {
    background-color: var(--sem-ok-bg) !important; color: var(--sem-ok-ink) !important;
    border-color: var(--sem-ok-line);
}
.app-main .badge.bg-danger {
    background-color: var(--sem-late-bg) !important; color: var(--sem-late-ink) !important;
    border-color: var(--sem-late-line);
}
.app-main .badge.bg-info, .app-main .badge.bg-info.text-dark {
    background-color: var(--sem-open-bg) !important; color: var(--sem-open-ink) !important;
    border-color: var(--sem-open-line);
}
.app-main .badge.bg-primary {
    background-color: var(--sem-open-bg) !important; color: var(--sem-open-ink) !important;
    border-color: var(--sem-open-line);
}
/* Denetim izi eylem rozetleri: aynı anlam ailesine oturur. */
.app-main .act-badge.create, .app-main .act-badge.approve, .app-main .u-state.on {
    background: var(--sem-ok-bg); color: var(--sem-ok-ink); border-color: var(--sem-ok-line);
}
.app-main .act-badge.update {
    background: var(--sem-open-bg); color: var(--sem-open-ink); border-color: var(--sem-open-line);
}
.app-main .act-badge.delete, .app-main .u-state.off {
    background: var(--sem-late-bg); color: var(--sem-late-ink); border-color: var(--sem-late-line);
}
.app-main .act-badge.unapprove {
    background: var(--sem-wait-bg); color: var(--sem-wait-ink); border-color: var(--sem-wait-line);
}
/* Seçilmiş navlun seçeneği: dolu yeşil (beyaz metin 5.36:1) */
.app-main .fqd-tag.sel { background: var(--clr-success); color: #fff; border-color: var(--clr-success); }

/* ══════ 14. SAYFA BAŞLIĞI VE ALT BAŞLIK ══════════════════════════════════ */

/* Ölçüm: /scorecards ve /scorecard_detail başlıkları 40px/500 çıkıyordu —
   diğer 33 ekranda 24px/600. Sebep: §"Sayfa başlığı" seçicisi yalnız
   sınıflı h1'i yakalıyor, çıplak <h1> tarayıcının 2rem varsayılanında
   kalıyordu. Seçici :where() ile çıplak h1'i de kapsayacak biçimde
   genişletildi. :where() özgüllüğü SIFIRLAR; böylece kural
     - Bootstrap'ın h1/.h4 varsayılanlarını geçer (style.css sonra yüklenir),
     - ama .sd-no / .fqd-no gibi BİLEREK farklı ölçülendirilmiş başlıkları
       (şablon <style>'ında, sınıfla) ezmez.
   Şablon ajanı sınıfı da ekliyor; iki yol da aynı sonucu verir. */
.app-main :where(h1) {
    font-size: var(--fs-2xl);
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1.25;
}

/* `.page-sub` HİÇ TANIMLI DEĞİLDİ: /suppliers, /scorecards, /forecast ve 6
   ekranda daha alt başlık, gövde metniyle aynı 16px ve aynı renkte, h1'in
   YANINA yapışıyordu (.page-head-title bir flex satırı). Kendi satırına
   iner, bir basamak küçülür ve ikincil renge geçer. */
.app-main .page-head-title { flex-wrap: wrap; }
.app-main .page-sub {
    flex: 1 0 100%;
    margin: .15rem 0 0;
    font-size: var(--fs-sm);
    font-weight: 400;
    line-height: 1.45;
    color: var(--clr-muted);
    max-width: 78ch;
}
/* .text-muted eklenmiş sürümlerde Bootstrap !important ile rengi alıyor;
   ölçü ve konum bizde kalır, renk zaten AA'yı tutuyor (5.5:1). */

/* ══════ 15. DOKUNMA HEDEFLERİ (mobil) ═══════════════════════════════════
   Ölçüm (390px, satır içi metin bağlantıları hariç): 44px altı 25 kontrol.
   En büyük kalemler: /scorecards'ın 8 adet 32px `.filter-chip`i, /suppliers'
   3 çipi, /freight-quotes'un 5 `.fq-filter`ı ve sekme düğmeleri (42.2px).
   Bir önceki turda çipler 32px'lik İKİNCİL eşiğe çekilmişti; ölçüm bunun
   yetmediğini gösterdi — çipler tek başına 11 kalem ediyor. Birincil eşiğe
   (44px) çıkarıldı.
   KURAL değişmedi: bu bölümün tamamı mobil sorgunun içindedir. Masaüstü
   yoğunluğu bilinçli bir tercihtir ve DEĞİŞMEZ. */
@media (max-width: 767.98px) {
    /* 32px → 44px. Çip şeridi bir satır daha uzayabilir; kaydırılabilir bir
       filtre şeridinde bu, yanlış çipe basmaktan ucuzdur. */
    .app-main .filter-chip,
    .app-main .fq-filter,
    .app-main .mode-seg,
    .app-main .facet,
    .app-main .basis-opt {
        min-height: var(--tap-primary);
        padding-block: .5rem;
    }
    /* Sekmeler 42.2px ölçüldü — 2px eksik kalıyordu. */
    .app-main .nav-tabs .nav-link,
    .app-main .nav-pills .nav-link {
        min-height: var(--tap-primary);
        display: inline-flex; align-items: center;
    }
    /* <summary> (ör. /freight-quotes/1 "Kararı değiştir") 21px ölçüldü. */
    .app-main summary { min-height: var(--tap-primary); display: flex; align-items: center; }
    /* Onay kutusu 24px'te KALIR (WCAG 2.2 AA tabanı) ama etiketiyle birlikte
       44px'lik bir hedef oluşturur — 44px'lik bir onay kutusu formu bozardı. */
    .app-main .form-check { min-height: var(--tap-primary); display: flex; align-items: center; }
    .app-main .form-check-label { min-height: var(--tap-primary); }
}

/* ── 15b. Satır içi bağlantılar: kırıntı ve yardımcı bağlantılar ──
   Ölçüm: 22 kırıntı bağlantısı 16px, /orders/2'deki `a.small` "Gantt
   Şeması" 17px — WCAG 2.2'nin 24px tabanının altında. Bunlar satır içi
   metin bağlantısı sayıldığı için istisnaya giriyorlar, ama hedef yine de
   küçük. GÖRSEL ölçü değişmeden tıklama alanı büyütülür: dikey dolgu
   eklenir, aynı miktar negatif dış boşlukla geri alınır — satır yüksekliği
   ve hizalama olduğu gibi kalır.
   Masaüstünde de geçerli: fare hedefi de bundan kazanıyor ve düzen
   değişmediği için yoğunluk bozulmuyor. */
.app-main .breadcrumb-item a,
.app-main a.small,
.app-main .cell-sub a {
    display: inline-block;
    position: relative;
    padding-block: .45rem;      /* 16px metin → ~30px hedef */
    margin-block: -.45rem;
}

/* ══════ 16. TABLO KART MODUYLA ÇAKIŞMA ══════════════════════════════════
   `.tbl-cards` dar ekranda tabloyu karta çeviriyor: satırlar blok oluyor,
   hücreler ızgaraya dönüyor ve td::before `data-label`ı yazıyor. Yapışkan
   sütun orada hem anlamsız (yatay kaydırma yok) hem zararlı: ::before
   çakışır, sticky hücre kartın üstüne biner. Açıkça iptal edilir. */
@media (max-width: 767.98px) {
    .app-main .table-responsive > .table.tbl-cards.tbl-sticky-id > thead > tr > th:first-child,
    .app-main .table-responsive > .table.tbl-cards.tbl-sticky-id > tbody > tr > td:first-child,
    .app-main .table-responsive > .table.tbl-cards.tbl-sticky-id > tbody > tr > th:first-child,
    .app-main .table-responsive > .table.tbl-cards.tbl-sticky-id > tfoot > tr > td:first-child {
        position: static;
        background-color: transparent;
        border-right: 0;
    }
    .app-main .table-responsive > .table.tbl-cards.tbl-sticky-id > tbody > tr > td:first-child::before {
        content: attr(data-label);
        position: static; width: auto; transform: none; background: none;
    }
    .app-main .tbl-cards-wrap { mask-image: none; -webkit-mask-image: none; animation: none; }
}

/* ══════ 17. SON ROTUŞLAR ═════════════════════════════════════════════════ */

/* Yan menü grup başlıkları ve alt bilgi: rgba(255,255,255,.45) lacivert
   zeminde (#122642) 4.21:1 ölçüldü — 12px metin için eşik 4.5:1.
   .62 opaklık 6.65:1 veriyor; "sönük başlık" hiyerarşisi korunur. */
:root { --sidebar-fg-dim: rgba(255, 255, 255, 0.62); }

/* Sekme kenarlığı (#dee2e6) sayfa zemininde 1.18:1 ölçüldü. Sekme
   ETKİLEŞİMLİ bir bileşen; sınırı görünmeli. Etkin sekmenin altı, altındaki
   panele bağlanmak için beyaz kalır — bu bilinçli. */
.app-main .nav-tabs { border-bottom-color: var(--clr-control-border); }
.app-main .nav-tabs .nav-link.active {
    border-color: var(--clr-control-border) var(--clr-control-border) var(--clr-card);
}
.app-main .nav-tabs .nav-link:hover { border-color: var(--clr-control-border); }

/* ══ SİPARİŞ METRO ŞERİDİ — duraklar ve tren konumu ══
   Geçilen durak soluk (yeşil onay), aktif durak parlak ve nefes alır,
   gelecektekiler normal. Renk tek başına taşımaz: geçilende ✓ ikonu,
   aktifte aria-current + kalın yazı var. */
.sip-metro {
    display: flex; align-items: flex-start; flex-wrap: nowrap;
    overflow-x: auto; gap: 0; padding: .75rem 1rem;
    background: var(--bs-body-bg, #fff);
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: .5rem;
}
.sip-metro-durak {
    display: flex; flex-direction: column; align-items: center;
    gap: .3rem; min-width: 68px; flex: 0 0 auto;
}
.sip-metro-nokta {
    width: 22px; height: 22px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .8rem; border: 2px solid #adb5bd; background: #fff;
    color: #fff; box-sizing: border-box;
}
.sip-metro-ad { font-size: .72rem; color: var(--bs-secondary-color, #6c757d); white-space: nowrap; }
.sip-metro-ray {
    flex: 1 1 24px; height: 3px; margin-top: 10px; min-width: 16px;
    background: #dee2e6; border-radius: 2px;
}
/* geçilen: soluk yeşil, ✓ */
.sip-metro-durak.is-gecti .sip-metro-nokta { background: #a3cfbb; border-color: #a3cfbb; }
.sip-metro-durak.is-gecti .sip-metro-ad { opacity: .55; }
.sip-metro-ray.is-gecti { background: #a3cfbb; }
/* aktif: parlak, nefes alan halka (metro tabelasındaki yanıp sönen durak) */
.sip-metro-durak.is-aktif .sip-metro-nokta {
    background: var(--bs-primary, #0d6efd); border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 0 0 4px rgba(13,110,253,.25);
    animation: sipMetroNefes 1.6s ease-in-out infinite;
}
.sip-metro-durak.is-aktif .sip-metro-ad {
    color: var(--bs-primary, #0d6efd); font-weight: 600; opacity: 1;
}
/* gelecek: normal (boş nokta, gri yazı) */
.sip-metro-durak.is-bekliyor .sip-metro-nokta { background: #fff; }
@keyframes sipMetroNefes {
    0%, 100% { box-shadow: 0 0 0 4px rgba(13,110,253,.25); }
    50%      { box-shadow: 0 0 0 7px rgba(13,110,253,.12); }
}
@media (prefers-reduced-motion: reduce) {
    .sip-metro-durak.is-aktif .sip-metro-nokta { animation: none; }
}

/* Zincir şeridinin başlığı — fatura/sevkiyat gibi siparişin DIŞINDAKİ
   ekranlarda "bu şerit hangi siparişin?" sorusunu cevaplar. Sipariş
   detayında çizilmez; orada zaten sayfanın kendisi o sipariştir. */
.sip-zincir-basi { font-size: .875rem; margin-bottom: .35rem; display: flex;
                   align-items: center; gap: .35rem; }
.sip-zincir-basi a { font-weight: 600; text-decoration: none; }
.sip-zincir-basi a:hover { text-decoration: underline; }

/* ══ GECİKME SEBEBİ LİSTESİ ══════════════════════════════════════════════
   Üretici kartı ve karne kırılımı, girilmiş gecikme gerekçelerini aynı
   biçimde listeler. Madde imi yok: liste bir sıralama değil, okunacak
   kısa bir anlatı. (Bootstrap'ın .list-unstyled'ı yerine yerel sınıf —
   araclar/css_denetle.py yalnız bu dosyayı ve şablon içi <style>'ları
   tanıyor; iki ekranın aynı kuralı iki kez yazması da gereksizdi.) */
.reason-list { list-style: none; padding: 0; margin: 0; }
.reason-list > li + li { border-top: 1px solid var(--clr-border, #e5e9ee);
                         padding-top: .5rem; }