/* =====================================================================================
   Q-PLUS ORTAK TEMA  (İş Emri 11 — Yeni Görünüm)
   Kaynak: Q-Plus tasarım sistemi (tokens.css + README eşleme tablosu). YALNIZ GÖRÜNÜM:
   hiçbir düğme, alan, panel ya da menü öğesi bu dosyayla kaldırılmaz veya yer değiştirmez.
   Şimdilik yalnız açık tema; koyu değerler [data-bs-theme="dark"] altında hazır bekliyor.
   Yazı tipleri SUNUCUDAN verilir (Google'a bağlanılmaz): tablet çevrimdışı da aynı görünür.
   ===================================================================================== */

/* ---- 1) Tasarım değişkenleri (Ek B, birebir) ------------------------------------- */
:root {
  /* Zebra satırlar (yalnız geniş veri tabloları — bkz. static/qp-zebra.js): tek / çift / üzerine gelince */
  --qp-zebra-tek: #FFFFFF;
  --qp-zebra-cift: #F4F6F9;
  --qp-zebra-uzerine: #E6ECF5;
  --qp-surface: #F2F4F7;
  --qp-surface-raised: #FFFFFF;
  --qp-sidebar: #0C1116;
  --qp-ink: #141B22;
  --qp-ink-muted: #5B6773;
  --qp-line: #D5D9DE;
  --qp-line-strong: #8A95A1;
  --qp-brand: #2452A0;
  --qp-brand-deep: #183660;
  --qp-on-brand: #FFFFFF;
  --qp-silver: #C0C0C0;
  --qp-success: #2E7D4F;
  --qp-warning: #A8620A;
  --qp-danger: #9F2B2B;
  --qp-space-1: 4px;
  --qp-space-2: 8px;
  --qp-space-4: 16px;
  --qp-space-6: 24px;
  --qp-radius-sm: 3px;
  --qp-radius-md: 6px;
  --qp-radius-lg: 10px;
  --qp-font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --qp-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Koyu yüzeyler (sol menü + üst çubuk) için yardımcılar — tokens.css'in koyu bloğundaki değerler */
  --qp-chrome-raised: #141B22;
  --qp-chrome-line: #26303B;
  --qp-chrome-ink: #E6E9ED;
  --qp-chrome-rozet: #C23B3B;
}

/* Koyu tema (şimdilik uygulanmayacak, hazır dursun) */
[data-bs-theme="dark"] {
  --qp-zebra-tek: #141B22;
  --qp-zebra-cift: #18212A;
  --qp-zebra-uzerine: #1F2B38;
  --qp-surface: #0C1116;
  --qp-surface-raised: #141B22;
  --qp-sidebar: #080B0F;
  --qp-ink: #E6E9ED;
  --qp-ink-muted: #9AA5B1;
  --qp-line: #26303B;
  --qp-line-strong: #66737F;
  --qp-brand: #7FA3E0;
  --qp-brand-deep: #A9C1EA;
  --qp-on-brand: #0C1116;
  --qp-silver: #C0C0C0;
  --qp-success: #6CC08F;
  --qp-warning: #E0A94A;
  --qp-danger: #E88A8A;
}

/* Metin stilleri */
.qp-display { font-size: 28px; line-height: 34px; font-weight: 600; }
.qp-title { font-size: 20px; line-height: 28px; font-weight: 600; }
.qp-section { font-size: 16px; line-height: 24px; font-weight: 600; }
.qp-body { font-size: 14px; line-height: 20px; font-weight: 400; }
.qp-body-strong { font-size: 14px; line-height: 20px; font-weight: 600; }
.qp-small { font-size: 12px; line-height: 16px; font-weight: 400; }
.qp-code { font-size: 13px; line-height: 18px; font-weight: 500; font-family: var(--qp-font-mono); }

/* ---- 2) Yazı tipleri: IBM Plex Sans / Mono, sunucudan ------------------------------- */
/* latin-ext, Türkçe karakterleri (ğ ş İ ı) taşır; tarayıcı yalnız gereken dosyayı indirir */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(vendor/fonts/ibm-plex-sans-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:400;src:url(vendor/fonts/ibm-plex-sans-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(vendor/fonts/ibm-plex-sans-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:500;src:url(vendor/fonts/ibm-plex-sans-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(vendor/fonts/ibm-plex-sans-latin-ext-600-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-display:swap;font-weight:600;src:url(vendor/fonts/ibm-plex-sans-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(vendor/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:400;src:url(vendor/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(vendor/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2');unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20CF,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-display:swap;font-weight:500;src:url(vendor/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

/* ---- 3) Bootstrap 5 eşlemesi (README uygulama notu tablosu) ------------------------- */
:root, [data-bs-theme="light"] {
  --bs-font-sans-serif: var(--qp-font-sans);
  --bs-font-monospace: var(--qp-font-mono);
  --bs-body-font-family: var(--qp-font-sans);
  --bs-body-font-size: .875rem;          /* 14px */
  --bs-body-line-height: 1.43;           /* 20px */
  --bs-body-bg: var(--qp-surface);        --bs-body-bg-rgb: 242, 244, 247;
  --bs-body-color: var(--qp-ink);         --bs-body-color-rgb: 20, 27, 34;
  --bs-emphasis-color: var(--qp-ink);     --bs-emphasis-color-rgb: 20, 27, 34;
  --bs-heading-color: var(--qp-ink);
  --bs-secondary-color: var(--qp-ink-muted);  --bs-secondary-color-rgb: 91, 103, 115;
  --bs-secondary-bg: var(--qp-surface);
  --bs-tertiary-color: var(--qp-ink-muted);
  --bs-tertiary-bg: var(--qp-surface);
  --bs-border-color: var(--qp-line);
  --bs-border-color-translucent: var(--qp-line);
  --bs-border-radius: 6px; --bs-border-radius-sm: 3px; --bs-border-radius-lg: 10px;
  --bs-border-radius-xl: 10px; --bs-border-radius-xxl: 10px;
  --bs-code-color: var(--qp-ink);
  --bs-highlight-bg: #F8EFE2;

  --bs-primary: #2452A0;   --bs-primary-rgb: 36, 82, 160;
  --bs-secondary: #5B6773; --bs-secondary-rgb: 91, 103, 115;
  --bs-success: #2E7D4F;   --bs-success-rgb: 46, 125, 79;
  --bs-info: #2452A0;      --bs-info-rgb: 36, 82, 160;
  --bs-warning: #A8620A;   --bs-warning-rgb: 168, 98, 10;
  --bs-danger: #9F2B2B;    --bs-danger-rgb: 159, 43, 43;
  --bs-light: #F2F4F7;     --bs-light-rgb: 242, 244, 247;
  --bs-dark: #141B22;      --bs-dark-rgb: 20, 27, 34;

  /* Açık tonlu zemin/kenar/yazı (uyarı kutusu, tablo satırı vurgusu vb.) */
  --bs-primary-bg-subtle: #E7EDF6;   --bs-primary-border-subtle: #B9C9E4;   --bs-primary-text-emphasis: #183660;
  --bs-info-bg-subtle: #E7EDF6;      --bs-info-border-subtle: #B9C9E4;      --bs-info-text-emphasis: #183660;
  --bs-success-bg-subtle: #E8F2EC;   --bs-success-border-subtle: #B5D5C1;   --bs-success-text-emphasis: #1F5636;
  --bs-warning-bg-subtle: #F8EFE2;   --bs-warning-border-subtle: #E6CDA4;   --bs-warning-text-emphasis: #7A4707;
  --bs-danger-bg-subtle: #F4E7E7;    --bs-danger-border-subtle: #DDB9B9;    --bs-danger-text-emphasis: #6F1E1E;
  --bs-secondary-bg-subtle: #EBEDF0; --bs-secondary-border-subtle: #D5D9DE; --bs-secondary-text-emphasis: #3E4852;
  --bs-light-bg-subtle: #F2F4F7;     --bs-dark-bg-subtle: #D5D9DE;

  --bs-link-color: #2452A0;        --bs-link-color-rgb: 36, 82, 160;
  --bs-link-hover-color: #183660;  --bs-link-hover-color-rgb: 24, 54, 96;
  --bs-focus-ring-color: rgba(36, 82, 160, .25);
}

body { font-family: var(--qp-font-sans); font-size: 14px; line-height: 20px; color: var(--qp-ink); background-color: var(--qp-surface); font-variant-numeric: normal; }
h1, .h1 { font-size: 28px; line-height: 34px; font-weight: 600; }
h2, .h2 { font-size: 22px; line-height: 30px; font-weight: 600; }
h3, .h3 { font-size: 20px; line-height: 28px; font-weight: 600; }
h4, .h4 { font-size: 20px; line-height: 28px; font-weight: 600; }
h5, .h5 { font-size: 18px; line-height: 26px; font-weight: 600; }
h6, .h6 { font-size: 16px; line-height: 24px; font-weight: 600; }
strong, b, .fw-bold { font-weight: 600; }
.fs-6 { font-size: 1rem !important; }
code, kbd, pre, samp { font-family: var(--qp-font-mono); color: var(--qp-ink); }
code { font-size: 13px; }
/* Kayıt / parça / PO / lot / seri numaraları */
.qp-mono, .kayit-no { font-family: var(--qp-font-mono); font-size: 13px; font-weight: 500; }
table td, table th, .qp-tabular { font-variant-numeric: tabular-nums; }
a { color: var(--qp-brand); }
a:hover { color: var(--qp-brand-deep); }
.text-muted { color: var(--qp-ink-muted) !important; }
.border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--qp-line) !important; }
.bg-light { background-color: var(--qp-surface) !important; }
/* Kart / tablo / form zemini: surface üzerinde bir kat yukarıda; gölge yok, ince çizgi var */
.card { --bs-card-bg: var(--qp-surface-raised); --bs-card-border-color: var(--qp-line); --bs-card-border-radius: 6px;
        --bs-card-inner-border-radius: 5px; --bs-card-cap-bg: var(--qp-surface-raised); box-shadow: none; }
.card-header { border-bottom-color: var(--qp-line); font-weight: 600; }
.card-footer { border-top-color: var(--qp-line); background: var(--qp-surface-raised); }
.list-group { --bs-list-group-bg: var(--qp-surface-raised); --bs-list-group-border-color: var(--qp-line); --bs-list-group-active-bg: var(--qp-brand); --bs-list-group-active-border-color: var(--qp-brand); }
.dropdown-menu { --bs-dropdown-bg: var(--qp-surface-raised); --bs-dropdown-border-color: var(--qp-line); --bs-dropdown-border-radius: 6px;
                 --bs-dropdown-link-active-bg: var(--qp-brand); --bs-dropdown-link-hover-bg: var(--qp-surface); }
.modal-content { --bs-modal-bg: var(--qp-surface-raised); --bs-modal-border-color: var(--qp-line); --bs-modal-border-radius: 10px;
                 --bs-modal-inner-border-radius: 9px; box-shadow: 0 12px 32px rgba(12, 17, 22, .22); }
.modal-header, .modal-footer { border-color: var(--qp-line); }
.popover, .tooltip { --bs-popover-bg: var(--qp-surface-raised); --bs-popover-border-color: var(--qp-line); }
.offcanvas { --bs-offcanvas-bg: var(--qp-surface-raised); }
.progress { --bs-progress-bg: #E4E7EB; --bs-progress-bar-bg: var(--qp-brand); --bs-progress-border-radius: 3px; }
.pagination { --bs-pagination-color: var(--qp-brand); --bs-pagination-active-bg: var(--qp-brand); --bs-pagination-active-border-color: var(--qp-brand);
              --bs-pagination-border-color: var(--qp-line); --bs-pagination-hover-bg: var(--qp-surface); }

/* Tablo: satır 36–40px, satırlar `line` ile ayrılır, sütun başlığı small/600/muted. ZEBRA yalnız geniş veri tablolarında (aşağıda, .qp-z-*) */
.table { --bs-table-bg: var(--qp-surface-raised); --bs-table-color: var(--qp-ink); --bs-table-border-color: var(--qp-line);
         --bs-table-striped-bg: transparent; --bs-table-striped-color: var(--qp-ink);
         --bs-table-hover-bg: var(--qp-surface); --bs-table-hover-color: var(--qp-ink); --bs-table-active-bg: var(--qp-surface); }
.table > thead > tr > th, .table > :not(caption) > tr > th.qp-baslik { font-size: 12px; font-weight: 600; color: var(--qp-ink-muted); }
.table-light { --bs-table-bg: var(--qp-surface-raised); --bs-table-color: var(--qp-ink-muted); --bs-table-border-color: var(--qp-line); }
.table-light th { font-weight: 600; }
.table-dark { --bs-table-bg: var(--qp-sidebar); --bs-table-border-color: var(--qp-chrome-line); }
.table-primary { --bs-table-bg: var(--bs-primary-bg-subtle); --bs-table-border-color: var(--bs-primary-border-subtle); }
.table-success { --bs-table-bg: var(--bs-success-bg-subtle); --bs-table-border-color: var(--bs-success-border-subtle); }
.table-warning { --bs-table-bg: var(--bs-warning-bg-subtle); --bs-table-border-color: var(--bs-warning-border-subtle); }
.table-danger  { --bs-table-bg: var(--bs-danger-bg-subtle);  --bs-table-border-color: var(--bs-danger-border-subtle); }
.table-info    { --bs-table-bg: var(--bs-info-bg-subtle);    --bs-table-border-color: var(--bs-info-border-subtle); }
.table-secondary { --bs-table-bg: var(--bs-secondary-bg-subtle); }

/* Form alanları: zemin surface-raised, kenar line-strong (kontrolün sınırı görünür olmalı) */
.form-control, .form-select, .input-group-text {
  background-color: var(--qp-surface-raised); color: var(--qp-ink); border-color: var(--qp-line-strong); border-radius: 6px; }
.form-control::placeholder { color: var(--qp-ink-muted); opacity: .8; }
.form-control:disabled, .form-select:disabled, .form-control[readonly] { background-color: var(--qp-surface); }
.form-control:focus, .form-select:focus { border-color: var(--qp-brand); box-shadow: 0 0 0 .2rem rgba(36, 82, 160, .2); background-color: var(--qp-surface-raised); color: var(--qp-ink); }
.input-group-text { color: var(--qp-ink-muted); }
.form-check-input { border-color: var(--qp-line-strong); background-color: var(--qp-surface-raised); }
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate { background-color: var(--qp-brand); border-color: var(--qp-brand); }
.form-check-input:focus { border-color: var(--qp-brand); box-shadow: 0 0 0 .2rem rgba(36, 82, 160, .2); }
.form-label { font-weight: 500; }
.form-text { color: var(--qp-ink-muted); }
.form-range::-webkit-slider-thumb { background-color: var(--qp-brand); }
.form-range::-moz-range-thumb { background-color: var(--qp-brand); }

/* Sekmeler: seçili sekmenin altında brand çizgi */
.nav-tabs { --bs-nav-tabs-border-color: var(--qp-line); border-bottom: 1px solid var(--qp-line); gap: 4px; }
.nav-tabs .nav-link { border: 0; border-bottom: 2px solid transparent; border-radius: 0; color: var(--qp-ink-muted); background: transparent; font-weight: 500; }
.nav-tabs .nav-link:hover { color: var(--qp-ink); border-bottom-color: var(--qp-line-strong); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--qp-ink); background: transparent; border-bottom-color: var(--qp-brand); font-weight: 600; }
.nav-pills { --bs-nav-pills-link-active-bg: var(--qp-brand); }

/* Uyarı kutuları: beyaz zemin, durum renginde ince kenar; yazı ink, vurgu durum renginde */
.alert { --bs-alert-bg: var(--qp-surface-raised); --bs-alert-color: var(--qp-ink); --bs-alert-border-color: var(--qp-line-strong); border-radius: 6px; }
.alert-warning { --bs-alert-border-color: var(--qp-warning); }
.alert-danger { --bs-alert-border-color: var(--qp-danger); }
.alert-success { --bs-alert-border-color: var(--qp-success); }
.alert-info, .alert-primary { --bs-alert-border-color: var(--qp-brand); }
.alert-secondary, .alert-light { --bs-alert-border-color: var(--qp-line-strong); }
.alert-warning strong, .alert-warning .bi:first-child { color: var(--qp-warning); }
.alert-danger strong, .alert-danger .bi:first-child { color: var(--qp-danger); }
.alert-success strong, .alert-success .bi:first-child { color: var(--qp-success); }
.alert-info strong, .alert-primary strong, .alert-info .bi:first-child, .alert-primary .bi:first-child { color: var(--qp-brand); }
.alert-link { color: var(--qp-brand); font-weight: 600; }

/* ---- 4) Düğmeler --------------------------------------------------------------------
   Bir ekranda YALNIZ asıl işlem (Kaydet, Yeni Sipariş…) brand dolgulu; diğerleri beyaz zemin +
   line-strong kenar. Tam yuvarlak (hap) düğme yok. Üzerine gelince/basılınca brand-deep. */
.btn { --bs-btn-border-radius: 6px; --bs-btn-font-weight: 500; font-weight: 500; }
.btn.rounded-pill, .btn-group > .btn.rounded-pill { border-radius: 6px !important; }
.btn-primary {
  --bs-btn-color: var(--qp-on-brand); --bs-btn-bg: var(--qp-brand); --bs-btn-border-color: var(--qp-brand);
  --bs-btn-hover-color: var(--qp-on-brand); --bs-btn-hover-bg: var(--qp-brand-deep); --bs-btn-hover-border-color: var(--qp-brand-deep);
  --bs-btn-focus-shadow-rgb: 36, 82, 160;
  --bs-btn-active-color: var(--qp-on-brand); --bs-btn-active-bg: var(--qp-brand-deep); --bs-btn-active-border-color: var(--qp-brand-deep);
  --bs-btn-disabled-color: var(--qp-on-brand); --bs-btn-disabled-bg: var(--qp-brand); --bs-btn-disabled-border-color: var(--qp-brand);
}
/* Asıl işlem dışındakiler: beyaz + line-strong kenar */
.btn-secondary, .btn-light, .btn-success, .btn-info, .btn-warning, .btn-dark,
.btn-outline-secondary, .btn-outline-dark, .btn-outline-success, .btn-outline-info, .btn-outline-warning, .btn-outline-light {
  --bs-btn-color: var(--qp-ink); --bs-btn-bg: var(--qp-surface-raised); --bs-btn-border-color: var(--qp-line-strong);
  --bs-btn-hover-color: var(--qp-ink); --bs-btn-hover-bg: var(--qp-surface); --bs-btn-hover-border-color: var(--qp-ink-muted);
  --bs-btn-focus-shadow-rgb: 138, 149, 161;
  --bs-btn-active-color: var(--qp-ink); --bs-btn-active-bg: var(--qp-surface); --bs-btn-active-border-color: var(--qp-ink-muted);
  --bs-btn-disabled-color: var(--qp-ink-muted); --bs-btn-disabled-bg: var(--qp-surface-raised); --bs-btn-disabled-border-color: var(--qp-line);
}
/* Yıkıcı işlem (Sil, Reddet): beyaz zemin, yazı danger — kaldırılmaz, yalnız sadeleşir */
.btn-danger, .btn-outline-danger {
  --bs-btn-color: var(--qp-danger); --bs-btn-bg: var(--qp-surface-raised); --bs-btn-border-color: var(--qp-line-strong);
  --bs-btn-hover-color: var(--qp-danger); --bs-btn-hover-bg: var(--bs-danger-bg-subtle); --bs-btn-hover-border-color: var(--qp-danger);
  --bs-btn-focus-shadow-rgb: 159, 43, 43;
  --bs-btn-active-color: var(--qp-danger); --bs-btn-active-bg: var(--bs-danger-bg-subtle); --bs-btn-active-border-color: var(--qp-danger);
  --bs-btn-disabled-color: var(--qp-ink-muted); --bs-btn-disabled-bg: var(--qp-surface-raised); --bs-btn-disabled-border-color: var(--qp-line);
}
.btn-outline-primary {
  --bs-btn-color: var(--qp-brand); --bs-btn-bg: var(--qp-surface-raised); --bs-btn-border-color: var(--qp-brand);
  --bs-btn-hover-color: var(--qp-on-brand); --bs-btn-hover-bg: var(--qp-brand-deep); --bs-btn-hover-border-color: var(--qp-brand-deep);
  --bs-btn-focus-shadow-rgb: 36, 82, 160;
  --bs-btn-active-color: var(--qp-on-brand); --bs-btn-active-bg: var(--qp-brand-deep); --bs-btn-active-border-color: var(--qp-brand-deep);
  --bs-btn-disabled-color: var(--qp-ink-muted); --bs-btn-disabled-bg: var(--qp-surface-raised); --bs-btn-disabled-border-color: var(--qp-line);
}
.btn-link { --bs-btn-color: var(--qp-brand); --bs-btn-hover-color: var(--qp-brand-deep); --bs-btn-active-color: var(--qp-brand-deep); }
/* Tablo satırındaki eylem düğmeleri "asıl işlem" değildir: satır başına bir dolu düğme olmasın */
.table .btn-primary, .list-group .btn-primary {
  --bs-btn-color: var(--qp-brand); --bs-btn-bg: var(--qp-surface-raised); --bs-btn-border-color: var(--qp-brand);
}
.table .btn-primary:hover, .list-group .btn-primary:hover { color: var(--qp-on-brand); }
.btn-close:focus { box-shadow: 0 0 0 .2rem rgba(36, 82, 160, .25); }

/* ---- 5) Durum etiketleri: beyaz zemin, durum renginde yazı ve ince kenar ---------------
   Yazı hiçbir yerde kaldırılmaz; renk tek başına anlam taşımaz. Köşe 3px (hap yok). */
.badge { --qp-rozet: var(--qp-ink-muted); background-color: var(--qp-surface-raised) !important; color: var(--qp-rozet) !important;
         border: 1px solid var(--qp-rozet); border-radius: 3px !important; font-weight: 600; font-size: 12px; line-height: 1.35; padding: .2em .55em; }
.badge.bg-primary, .badge.text-bg-primary, .badge.bg-info, .badge.text-bg-info { --qp-rozet: var(--qp-brand); }
.badge.bg-success, .badge.text-bg-success { --qp-rozet: var(--qp-success); }
.badge.bg-warning, .badge.text-bg-warning, .badge.bg-turuncu, .badge.text-bg-turuncu { --qp-rozet: var(--qp-warning); }
.badge.bg-danger, .badge.text-bg-danger { --qp-rozet: var(--qp-danger); }
.badge.bg-mor, .badge.text-bg-mor { --qp-rozet: var(--qp-brand-deep); }
.badge.bg-secondary, .badge.text-bg-secondary { --qp-rozet: var(--qp-ink-muted); }
.badge.bg-dark, .badge.text-bg-dark { --qp-rozet: var(--qp-ink); }
.badge.bg-light, .badge.text-bg-light { --qp-rozet: var(--qp-ink); border-color: var(--qp-line); }
.badge.qp-rozet-pasif { --qp-rozet: var(--qp-danger); }      /* İ-H93: "pasif kullanıcı" etiketi kırmızı çerçeve + kırmızı yazı */
.badge.rounded-pill { border-radius: 3px !important; }
/* Sipariş durum şeması (eski mor / turuncu sınıfları artık marka renklerine bağlı) */
.bg-mor { background-color: var(--qp-brand-deep) !important; color: var(--qp-on-brand) !important; }
.bg-turuncu { background-color: var(--qp-warning) !important; color: var(--qp-on-brand) !important; }
.text-bg-mor { background-color: var(--qp-brand-deep) !important; color: var(--qp-on-brand) !important; }
/* Sayaç balonu (bildirim sayısı gibi): dolu kalır — sayı, durum etiketi değildir */
.qp-sayac-rozet { background-color: var(--qp-chrome-rozet) !important; color: #fff !important; border: 0 !important;
                  border-radius: 9px !important; min-width: 18px; padding: 0 5px; font-size: 11px; line-height: 18px; }

/* Renkli metin yardımcıları belirlenen tona bağlı */
.text-primary { color: var(--qp-brand) !important; }
.text-success { color: var(--qp-success) !important; }
.text-warning { color: var(--qp-warning) !important; }
.text-danger { color: var(--qp-danger) !important; }
.text-info { color: var(--qp-brand) !important; }
.text-dark { color: var(--qp-ink) !important; }

/* İkonlar 16px, metin rengiyle aynı */
.bi { vertical-align: -.125em; }
.qp-ikon-durum-ok { color: var(--qp-success); }
.qp-ikon-durum-uyari { color: var(--qp-warning); }
.qp-ikon-durum-hata { color: var(--qp-danger); }

/* Odak halkası her yerde brand */
:focus-visible { outline-color: var(--qp-brand); }

/* =====================================================================================
   6) İŞ EMRİ 18 — ORTAK EKRAN BİLEŞENLERİ
   Makrolar: app/templates/_bilesenler.html · davranış: app/templates/_bilesen_betik.html
   Kullanım notu: TASARIM_BILESENLERI.md. Oturum D/E/F yeni bileşen YAZMAZ, bunları kullanır.
   Renk anlamı her yerde aynı: kırmızı = gecikmiş/eksik/hata · turuncu = risk/bekliyor ·
   yeşil = tamamlandı/sağlıklı · gri = nötr bilgi (kalan gün gibi). Yalnız sorun renklenir.
   ===================================================================================== */

/* --- Sayfa üstü: başlık + işlemler, altında tek paragraf açıklama ------------------- */
.qp-sayfa { display: flex; flex-direction: column; gap: 16px; }
.qp-sayfa-ust { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.qp-sayfa-baslik { margin: 0; font-size: 26px; line-height: 32px; font-weight: 600; }
.qp-sayfa-islemler { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.qp-sayfa-islemler .btn, .qp-arac-cubugu .btn { height: 36px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 14px; padding: 0 12px; }
.qp-satir-islemler .btn { font-size: 13px; }
.qp-aciklama { margin: 0; font-size: 13px; line-height: 19px; color: var(--qp-ink-muted); }

/* --- Süzgeç + arama satırı ------------------------------------------------------------ */
.qp-arac-cubugu { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.qp-arac-sag { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-left: auto; }
/* 1400px ve üstünde (1280 tablet eski sarma davranışında kalır: orada yatay taşıyordu) arama + Süzgeçler/Sırala süzgeç düğmeleriyle AYNI satırda, SAĞDA durur; düğmeler sığmazsa
   kendi sütununda ikinci satıra sarar (eskiden arama kutusu düğmelerin altına düşüyor ya da üstüne biniyordu) */
@media (min-width: 1400px) {
  .qp-arac-cubugu { flex-wrap: nowrap; align-items: flex-start; }
  .qp-arac-cubugu > .qp-suzgec { flex: 1 1 0; min-width: 0; flex-wrap: wrap; }
  .qp-arac-sag { flex: 0 0 auto; flex-wrap: nowrap; }
}
/* Sayılı durum süzgeci olan çubuk (onaylı tasarım 20.10.2026, Teklifler A ile aynı düzen) — HER genişlikte:
   1. satır: durum sekmeleri (sığmazsa alt satıra sarar; kaydırma/ok yok) · 2. satır: solda GENİŞ arama, sağda Süzgeçler / Sırala.
   ≤ 700 px: arama tam genişlik, düğmeler altında sağa yaslı. Süzgeci olmayan çubuklar yukarıdaki eski düzende kalır.
   Sayfaya özel kurallar (aynı ya da daha yüksek öncelikli, sayfada sonra gelen) bunları ezebilir. */
.qp-arac-cubugu:has(> .qp-suzgec) { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.qp-arac-cubugu:has(> .qp-suzgec) > .qp-suzgec { flex: 0 0 auto; flex-wrap: wrap; min-width: 0; }
.qp-arac-cubugu:has(> .qp-suzgec) > .qp-arac-sag { flex: 0 0 auto; flex-wrap: nowrap; justify-content: flex-end; margin-left: 0; min-width: 0; }
.qp-arac-cubugu:has(> .qp-suzgec) > .qp-arac-sag > .qp-arama { flex: 1 1 auto; min-width: 160px; margin-right: auto; order: -1; }   /* arama her zaman solda */
@media (max-width: 700px) {
  .qp-arac-cubugu:has(> .qp-suzgec) > .qp-arac-sag { flex-wrap: wrap; }
  .qp-arac-cubugu:has(> .qp-suzgec) > .qp-arac-sag > .qp-arama { flex: 1 1 100%; min-width: 0; }
}

/* --- Sayılı durum süzgeci (operatör ekranındaki gibi) --------------------------------- */
.qp-suzgec { display: flex; gap: 8px; flex-wrap: wrap; }
.qp-suzgec-dugme { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px;
  border: 1px solid var(--qp-line-strong); border-radius: 6px; background: var(--qp-surface-raised); color: var(--qp-ink);
  font-size: 14px; font-weight: 400; text-decoration: none; white-space: nowrap; }
.qp-suzgec-dugme:hover { color: var(--qp-ink); background: var(--qp-surface); border-color: var(--qp-ink-muted); }
.qp-suzgec-dugme.secili, .qp-suzgec-dugme[aria-current="true"] { background: var(--qp-brand); border-color: var(--qp-brand); color: var(--qp-on-brand); font-weight: 600; }
.qp-suzgec-nokta { width: 8px; height: 8px; border-radius: 4px; flex-shrink: 0; background: var(--qp-ink-muted); }
.qp-suzgec-sayi { color: var(--qp-ink-muted); font-variant-numeric: tabular-nums; }
.qp-suzgec-dugme.secili .qp-suzgec-sayi { color: inherit; opacity: .85; }
.qp-suzgec-dugme.secili .qp-suzgec-nokta { display: none; }

/* --- Anlık arama kutusu (İş Emri 16) ------------------------------------------------- */
.qp-arama { display: flex; align-items: center; gap: 8px; width: 300px; max-width: 100%; height: 36px; padding: 0 4px 0 10px;
  border: 1px solid var(--qp-line-strong); border-radius: 6px; background: var(--qp-surface-raised); color: var(--qp-ink-muted); margin: 0; }
.qp-arama:focus-within { border-color: var(--qp-brand); box-shadow: 0 0 0 .2rem rgba(36, 82, 160, .2); }
.qp-arama input { flex-grow: 1; min-width: 0; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: var(--qp-ink); padding: 0; }
.qp-arama input::-webkit-search-cancel-button { display: none; }
.qp-arama-sayac { font-size: 12px; color: var(--qp-ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.qp-arama-sayac.bos { color: var(--qp-danger); font-weight: 600; }
.qp-arama-temizle { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--qp-ink-muted); padding: 0; cursor: pointer; }
.qp-arama-temizle:hover { background: var(--qp-surface); color: var(--qp-ink); }
.qp-arama-bos-mesaj { padding: 16px; text-align: center; color: var(--qp-ink-muted); background: var(--qp-surface-raised);
  border: 1px dashed var(--qp-line-strong); border-radius: 6px; }
.qe-sayfa-arama.qp-arama { margin-bottom: 8px; }
mark.qp-vurgu { background: #F8EFE2; color: inherit; padding: 0; border-radius: 2px; box-shadow: 0 0 0 1px #E6CDA4; }
/* Tablet: X en az 44px dokunma alanı */
@media (pointer: coarse) { .qp-arama { height: 44px; } .qp-arama-temizle { width: 44px; height: 44px; } }

/* --- Durum / risk etiketleri, kalan gün ------------------------------------------------ */
.qp-etiket { --qp-etiket-renk: var(--qp-ink-muted); display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px;
  border: 1px solid var(--qp-etiket-renk); border-radius: 3px; background: var(--qp-surface-raised); color: var(--qp-etiket-renk);
  font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap; vertical-align: middle; }
.qp-etiket-nokta { width: 7px; height: 7px; border-radius: 4px; background: var(--qp-etiket-renk); flex-shrink: 0; }
.qp-etiket--basari { --qp-etiket-renk: var(--qp-success); }
.qp-etiket--uyari { --qp-etiket-renk: var(--qp-warning); }
.qp-etiket--hata { --qp-etiket-renk: var(--qp-danger); }
.qp-etiket--marka { --qp-etiket-renk: var(--qp-brand); }
.qp-etiket--marka-koyu { --qp-etiket-renk: var(--qp-brand-deep); }
.qp-etiket--notr { --qp-etiket-renk: var(--qp-ink-muted); }
.qp-etiketler { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- İlerleme çubuğu -------------------------------------------------------------------- */
.qp-ilerleme { display: block; width: min(220px, 100%); height: 6px; border-radius: 3px; background: var(--qp-line); overflow: hidden; }
.qp-ilerleme > span { display: block; height: 100%; background: var(--qp-brand); }
.qp-ilerleme.tamam > span { background: var(--qp-success); }

/* --- Aşama göstergesi (ör. satınalma: Beklemede → Sipariş verildi → Yolda → Teslim alındı) --- */
.qp-asama { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.qp-asama-nokta { width: 10px; height: 10px; border-radius: 5px; background: var(--qp-line); flex-shrink: 0; }
.qp-asama-nokta.gecti { background: var(--qp-brand); }
.qp-asama-nokta.tamam { background: var(--qp-success); }
.qp-asama-cizgi { width: 18px; height: 2px; background: var(--qp-line); flex-shrink: 0; }
.qp-asama-cizgi.gecti { background: var(--qp-brand); }
.qp-asama-metin { margin-left: 8px; font-size: 13px; color: var(--qp-ink-muted); }

/* --- Sıradaki adım: satırda da DOLU brand (tablo içindeki btn-primary sadeleştirmesinden muaf) --- */
.btn.qp-sonraki, .table .btn.qp-sonraki, .list-group .btn.qp-sonraki {
  --bs-btn-color: var(--qp-on-brand); --bs-btn-bg: var(--qp-brand); --bs-btn-border-color: var(--qp-brand);
  --bs-btn-hover-color: var(--qp-on-brand); --bs-btn-hover-bg: var(--qp-brand-deep); --bs-btn-hover-border-color: var(--qp-brand-deep);
  --bs-btn-active-color: var(--qp-on-brand); --bs-btn-active-bg: var(--qp-brand-deep); --bs-btn-active-border-color: var(--qp-brand-deep);
  font-weight: 600; white-space: nowrap; }
/* Teklifler: sayfada TEK birincil (dolgulu) düğme kalır ("Yeni Teklif"); satırdaki sıradaki adımlar çerçeveli */
.qp-cerceveli-adim .btn.qp-sonraki, .qp-cerceveli-adim .table .btn.qp-sonraki {
  --bs-btn-color: var(--qp-brand); --bs-btn-bg: transparent; --bs-btn-border-color: var(--qp-brand);
  --bs-btn-hover-color: var(--qp-on-brand); --bs-btn-hover-bg: var(--qp-brand); --bs-btn-hover-border-color: var(--qp-brand);
  --bs-btn-active-color: var(--qp-on-brand); --bs-btn-active-bg: var(--qp-brand-deep); --bs-btn-active-border-color: var(--qp-brand-deep); }

/* --- "⋯" satır menüsü ------------------------------------------------------------------ */
.qp-more-dugme { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0;
  border: 1px solid var(--qp-line); border-radius: 6px; background: var(--qp-surface-raised); color: var(--qp-ink); }
.qp-more-dugme:hover, .qp-more-dugme[aria-expanded="true"] { border-color: var(--qp-line-strong); background: var(--qp-surface); }
.qe-more .dropdown-menu { font-size: 14px; min-width: 200px; }
.qe-more .dropdown-item { display: flex; align-items: center; gap: 8px; }
.qe-more form { margin: 0; }
@media (pointer: coarse) { .qp-more-dugme { width: 44px; height: 44px; } }

/* --- Satır (kart) listeleri ve satıra tıklayınca açma -------------------------------------- */
.qp-liste { display: flex; flex-direction: column; gap: 8px; }
.qp-satir-kart { background: var(--qp-surface-raised); border: 1px solid var(--qp-line); border-radius: 6px; }
.qp-satir-islemler { display: flex; gap: 6px; justify-content: flex-end; align-items: center; flex-wrap: nowrap; }
.qp-satir-islemler .btn-sm, .qp-satir-islemler > a.btn, .qp-satir-islemler > form .btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
[data-qp-ac] { cursor: pointer; }
[data-qp-ac]:hover { background-color: #F7F8FA; }
tr[data-qp-ac]:hover > td { background-color: #F7F8FA; }
.qp-alt-baslik { font-size: 12px; color: var(--qp-ink-muted); }
.qp-no { font-family: var(--qp-font-mono); font-weight: 500; white-space: nowrap; }
.qp-ok { transition: transform .15s ease; }
[aria-expanded="true"] > .qp-ok, [aria-expanded="true"] .qp-ok { transform: rotate(90deg); }
.qp-ac-kapa { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 4px; background: transparent; color: var(--qp-ink-muted); }
.qp-ac-kapa:hover { background: var(--qp-surface); color: var(--qp-ink); }
@media (pointer: coarse) { .qp-ac-kapa { width: 44px; height: 44px; } }
.qp-ic-tablo { width: 100%; border-collapse: collapse; border: 1px solid var(--qp-line); }
.qp-ic-tablo th { text-align: left; padding: 8px 10px; font-size: 12px; font-weight: 600; color: var(--qp-ink-muted); border-bottom: 1px solid var(--qp-line); white-space: nowrap; background: var(--qp-surface-raised); }
.qp-ic-tablo td { padding: 0 10px; height: 44px; font-size: 14px; border-bottom: 1px solid var(--qp-line); white-space: nowrap; background: var(--qp-surface-raised); }
.qp-ic-tablo .sag { text-align: right; font-variant-numeric: tabular-nums; }

/* --- Uyarı şeridi (sayfanın üstünde, eksik çoksa) ----------------------------------------- */
.qp-uyari-seridi { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--qp-surface-raised);
  border: 1px solid var(--qp-danger); border-radius: 6px; font-size: 14px; flex-wrap: wrap; }
.qp-uyari-seridi > .bi { color: var(--qp-danger); font-size: 18px; }
.qp-uyari-seridi strong { color: var(--qp-danger); }
.qp-uyari-seridi.uyari { border-color: var(--qp-warning); }
.qp-uyari-seridi.uyari > .bi, .qp-uyari-seridi.uyari strong { color: var(--qp-warning); }
.qp-uyari-seridi-metin { flex: 1 1 320px; }
.qp-uyari-seridi .btn, .qp-kutu .btn-sm { font-size: 13px; }
.qp-uyari-seridi .btn { font-size: 14px; height: 36px; display: inline-flex; align-items: center; }

/* --- Kutu (Ana Sayfa iş kutuları vb.) -------------------------------------------------------- */
.qp-kutu { background: var(--qp-surface-raised); border: 1px solid var(--qp-line); border-radius: 6px; min-width: 0; }
.qp-kutu-baslik { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--qp-line); }
.qp-kutu-baslik h2 { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.qp-kutu-baslik a { font-size: 13px; text-decoration: none; }
.qp-kutu-satir { display: flex; align-items: center; gap: 10px; padding: 10px 16px; min-width: 0; }
.qp-kutu-satir + .qp-kutu-satir { border-top: 1px solid var(--qp-line); }
.qp-kutu-bos { padding: 14px 16px; font-size: 13px; color: var(--qp-ink-muted); }
.qp-tasma { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* --- Üst çubuk: kullanıcı menüsü (İş Emri 18-C) ------------------------------------------ */
.qp-kullanici-dugme { display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 8px 0 4px; border: 1px solid var(--qp-chrome-line);
  border-radius: 6px; background: var(--qp-chrome-raised); font: inherit; cursor: pointer; color: var(--qp-chrome-ink); }
.qp-kullanici-dugme:hover, .qp-kullanici-dugme[aria-expanded="true"] { border-color: var(--qp-line-strong); }
.qp-avatar { width: 34px; height: 34px; border-radius: 17px; background: var(--qp-brand); color: var(--qp-on-brand); display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.qp-kullanici-ad { display: flex; flex-direction: column; align-items: flex-start; text-align: left; min-width: 0; }
.qp-kullanici-ad > span:first-child { font-size: 14px; font-weight: 600; color: #fff; line-height: 18px; white-space: nowrap; }
.qp-kullanici-ad > span:last-child { font-size: 12px; color: var(--qp-silver); line-height: 16px; white-space: nowrap; }
.qp-kullanici-menu { width: 260px; padding: 6px; border-radius: 10px !important; box-shadow: 0 12px 32px rgba(12,17,22,0.18); }
.qp-kullanici-menu .qp-menu-kim { padding: 10px 12px; border-bottom: 1px solid var(--qp-line); margin-bottom: 4px; }
.qp-kullanici-menu .qp-menu-kim strong { display: block; font-size: 14px; }
.qp-kullanici-menu .qp-menu-kim span { font-size: 12px; color: var(--qp-ink-muted); }
.qp-kullanici-menu .dropdown-item { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; border-radius: 6px; font-size: 14px; color: var(--qp-ink); }
.qp-kullanici-menu .dropdown-item:active { background: var(--qp-surface); color: var(--qp-ink); }
.qp-kullanici-menu .qp-menu-cikis { border-top: 1px solid var(--qp-line); margin-top: 4px; padding-top: 4px; }
.qp-kullanici-menu .qp-menu-cikis .dropdown-item { color: var(--qp-danger); }
.qp-kullanici-menu form { margin: 0; }
.qp-zil { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; color: var(--qp-chrome-ink); text-decoration: none; }
.qp-zil:hover { color: #fff; }
.qp-zil .qp-sayac-rozet { position: absolute; top: 2px; right: -2px; }
/* Dosya yükleme göstergesi (İş Emri 12, Oturum C): betiği zilin hemen yanına ekler — koyu üst çubukta okunur olsun */
.qe-topbar #qpYkGosterge { height: 36px; display: inline-flex; align-items: center; gap: 6px; padding: 0 10px;
  color: var(--qp-chrome-ink); background: var(--qp-chrome-raised); border: 1px solid var(--qp-chrome-line); border-radius: 6px; font-size: 13px; }
.qe-topbar #qpYkGosterge[hidden] { display: none !important; }

/* --- Ana Sayfa: karşılama şeridi + sayaç şeridi ------------------------------------------ */
.qp-karsilama-serit { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; padding: 0 20px; background: var(--qp-brand-deep); border-radius: 6px; color: #fff; }
.qp-sayac-seridi { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); background: var(--qp-surface-raised);
  border: 1px solid var(--qp-line); border-radius: 6px; }
.qp-sayac-seridi > a { display: flex; flex-direction: column; gap: 2px; padding: 12px; text-decoration: none; color: var(--qp-ink); min-width: 0; }
.qp-sayac-seridi > a + a { border-left: 1px solid var(--qp-line); }
.qp-sayac-seridi > a:hover { background: var(--qp-surface); }
.qp-sayac-deger { font-size: 24px; line-height: 28px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--qp-ink); }
.qp-sayac-deger.bos { color: var(--qp-ink-muted); }
/* 0 olan sayaç her durumda soluk: .qe-kpi-num (base.html) rengi ink olarak tanımlıyor ve daha sonra yükleniyor */
.qp-sayac-seridi .qp-sayac-deger.bos, .qp-sayac-seridi .qe-kpi-num.bos { color: var(--qp-ink-muted); }
/* Üst sayaç şeridi: etiket TEK SATIR (uzun hâli title ile üzerine gelince görünür) */
.qp-sayac-tek-satir .qp-sayac-etiket { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qp-sayac-tek-satir > a { padding-left: 10px; padding-right: 8px; }
.qp-sayac-etiket { font-size: 12px; line-height: 15px; color: var(--qp-ink-muted); }
@media (max-width: 1399.98px) {
  .qp-sayac-seridi { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .qp-sayac-seridi > a:nth-child(6n+1) { border-left: 0; }
  .qp-sayac-seridi > a:nth-child(n+7) { border-top: 1px solid var(--qp-line); }
}
@media (max-width: 575.98px) {
  .qp-sayac-seridi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .qp-sayac-seridi > a { border-left: 0 !important; border-top: 1px solid var(--qp-line); }
}
.qp-is-kutulari { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 1199.98px) { .qp-is-kutulari { grid-template-columns: 1fr 1fr; } .qp-is-kutulari > :first-child { grid-column: 1 / -1; } }
@media (max-width: 767.98px) { .qp-is-kutulari { grid-template-columns: 1fr; } }
.qp-tezgahlar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px 16px; }
.qp-tezgah { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 36px; padding: 0 10px; border: 1px solid var(--qp-line);
  border-radius: 6px; text-decoration: none; color: var(--qp-ink); min-width: 0; }
.qp-tezgah:hover { border-color: var(--qp-line-strong); color: var(--qp-ink); }
.qp-tezgah-durum { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--qp-ink-muted); white-space: nowrap; }
.qp-dikkat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qp-dikkat > div { display: flex; gap: 10px; align-items: center; padding: 12px 16px; border-top: 1px solid var(--qp-line); }
.qp-dikkat > div:nth-child(-n+2) { border-top: 0; }
.qp-dikkat > div:nth-child(odd) { border-right: 1px solid var(--qp-line); }
@media (max-width: 767.98px) { .qp-dikkat { grid-template-columns: 1fr; } .qp-dikkat > div { border-right: 0 !important; border-top: 1px solid var(--qp-line) !important; } .qp-dikkat > div:first-child { border-top: 0 !important; } }
.qp-hizli { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.qp-hizli .btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }

/* --- Açılır pencere (popover, İş Emri 20-B) --------------------------------------------------
   Panel position:fixed; yeri betikte ekrana SIĞDIRILARAK hesaplanır (sayfa hiçbir durumda yana kaymaz). */
.qp-pencere-kok { display: inline-block; }
.qp-pencere { position: fixed; top: 0; left: 0; z-index: 1060; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto;
  background: var(--qp-surface-raised); border: 1px solid var(--qp-line); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(12,17,22,0.18); text-align: left; white-space: normal; color: var(--qp-ink); }
.qp-pencere[hidden] { display: none !important; }
.qp-pencere-baslik { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--qp-line); font-size: 14px; }
.qp-pencere-x { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border: 0; border-radius: 4px; background: transparent; color: var(--qp-ink-muted); }
.qp-pencere-x:hover { background: var(--qp-surface); color: var(--qp-ink); }
.qp-pencere-govde { padding: 12px; font-size: 14px; }
.qp-pencere-alt { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--qp-line); }
.qp-pencere.qp-alt-sayfa { left: 0 !important; right: 0; top: auto !important; bottom: 0; width: 100% !important; max-width: 100%;
  max-height: 80vh; border-radius: 10px 10px 0 0; }
@media (pointer: coarse) { .qp-pencere-x { width: 44px; height: 44px; } }

/* --- Kimlik şeridi (detay/form ekranlarının üstü, 18-B madde 11) -------------------------------- */
.qp-kimlik-seridi { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 14px 16px;
  background: var(--qp-surface-raised); border: 1px solid var(--qp-line); border-radius: 6px; }
.qp-kimlik-sol { display: flex; flex-direction: column; min-width: 0; }
.qp-kimlik-no { font-family: var(--qp-font-mono); font-size: 18px; font-weight: 500; white-space: nowrap; }
.qp-kimlik-sag { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* --- Sabit işlem çubuğu (İş Emri 21) + anında kaydedilen bölüm notu ---------------------------- */
.qp-islem-cubugu { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; padding: 10px 16px; margin-bottom: 16px; background: var(--qp-surface-raised); border: 1px solid var(--qp-line);
  border-radius: 6px; box-shadow: 0 4px 12px rgba(12,17,22,0.06); }
.qp-islem-cubugu .btn { height: 32px; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.qp-kaydedilmemis { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--qp-warning); white-space: nowrap;
  --qp-etiket-renk: var(--qp-warning); }
.qp-kaydedilmemis[hidden] { display: none !important; }
/* Envanter formları (kalem düzenle, bağlı kayıt): "Kaydedilmemiş değişiklik var" göstergesi (qp-degisiklik-uyarisi.js) 768 px ve üstünde formun 18 px üstüne
   taşar; .row g-* kenar boşluğu (-16 / -8 px) yüzünden ilk satır etiketlerine biniyordu. Form üstünde göstergeye yer ayrılır (767 px altında gösterge akışta, ek yer gerekmez). */
@media (min-width: 768px) { form.qp-rozet-yer { padding-top: 28px; } }
@media (max-width: 991.98px) { .qp-islem-cubugu { top: var(--qp-ust-cubuk-yuksekligi, 104px); } }
/* UI denetimi 05.11.2026 (teklif kalemi 1.5 / sevkiyat 3.4): Kaydet / Vazgeç arası 16 px; formun altında YAPIŞKAN Kaydet çubuğu (sayfa kaydırılsa da altta görünür; sol menüye dokunmaz). */
.qp-islem-cubugu [data-qp-vazgec] { margin-right: 8px; }
.qp-alt-yapiskan { position: sticky; bottom: 0; z-index: 19; display: flex; align-items: center; justify-content: flex-start; gap: 16px; flex-wrap: wrap;
  margin: 16px 0 0; padding: 10px 16px; background: var(--qp-surface-raised); border: 1px solid var(--qp-line); border-radius: 6px; box-shadow: 0 -4px 12px rgba(12,17,22,0.08); }
.qp-alt-yapiskan .btn { min-height: 40px; min-width: 96px; }
@media print { .qp-alt-yapiskan { display: none !important; } }
/* UI denetimi 06.11.2026 (karar 5): masaüstünde (>= 992 px) tek Kaydet üst başlıkta; alttaki yapışkan çubuk yalnız dar / dokunmatik ekranda kalır */
@media (min-width: 992px) { .qp-alt-yapiskan { display: none !important; } }
.qp-aninda-notu { font-size: 12px; font-weight: 400; color: var(--qp-ink-muted); white-space: nowrap; }
.qp-aninda-bekle { opacity: .6; pointer-events: none; transition: opacity .15s; }
.qp-cikis-pencere .modal-footer { gap: 8px; }

@media print {
  .qp-arama, .qp-suzgec, .qe-more, .qp-satir-islemler .btn, .qp-pencere, .qp-islem-cubugu .btn, .qp-kaydedilmemis { display: none !important; }
  .qp-islem-cubugu { position: static; box-shadow: none; }
}

@media print {
  /* Kâğıda dökülen ekranlar sadeleşir: koyu zemin ve filigran çıkmaz */
  body { background: #fff !important; }
}

/* Adres sonundaki #bölüm'e kaydırınca sabit işlem çubuğunun altında kalmasın (İş Emri 25/2) */
.collapse[id], .card[id], section[id], .qp-kutu[id], [data-qp-aninda][id] { scroll-margin-top: 112px; }
/* Çapa (#bolum) hedefi sabit işlem çubuğunun (masaüstü 62 px) ve telefonda sabit üst çubuğun (104 px) ALTINDA kalmasın: hedef bir <div class="qp-kutu"> olduğunda
   (Firma dosyası #urun-gruplari, #yeten-raporu) eski kural eşleşmiyor, başlık çubuğun arkasında kalıyor ve sayfa "kaymamış" gibi görünüyordu.
   Pay (16.10.2026 ölçümü): masaüstü 62 px çubuk + 50 px; telefonda üst çubuk 104 + işlem çubuğu 62 (ikisi birlikte sabit) + 16 + 24 px güvenlik. */
@media (max-width: 991.98px) { .collapse[id], .card[id], section[id], .qp-kutu[id], [data-qp-aninda][id] { scroll-margin-top: calc(var(--qp-ust-cubuk-yuksekligi, 104px) + 102px); } }
.qe-more .qp-pencere-kok { display: block; }   /* ⋯ menüsündeki pencere düğmesi menü satırı gibi tam genişlikte */

/* ---- Zebra satırlar (İş Emri: geniş veri tabloları) ---------------------------------------------------
   Sınıfları static/qp-zebra.js ekler: yalnız listelenen veri ekranlarında ve görünen satır sayısı >= 5 iken. Sınıf yoksa mevcut ince ayırıcı çizgi
   ve üzerine gelince renklenme AYNEN kalır (Ana Sayfa, bildirimler, Görevlerim, menüler, kartlar, kısa listeler). */
.table > tbody > tr.qp-z-tek  { --bs-table-bg: var(--qp-zebra-tek);  --bs-table-hover-bg: var(--qp-zebra-uzerine); --bs-table-accent-bg: var(--qp-zebra-tek); }
.table > tbody > tr.qp-z-cift { --bs-table-bg: var(--qp-zebra-cift); --bs-table-hover-bg: var(--qp-zebra-uzerine); --bs-table-accent-bg: var(--qp-zebra-cift); }
.table > tbody > tr.qp-z-tek:hover > *, .table > tbody > tr.qp-z-cift:hover > * { --bs-table-bg-state: var(--qp-zebra-uzerine); background-color: var(--qp-zebra-uzerine); }
[data-qp-kayit].qp-z-tek:not(tr)  { background-color: var(--qp-zebra-tek); }
[data-qp-kayit].qp-z-cift:not(tr) { background-color: var(--qp-zebra-cift); }
[data-qp-kayit].qp-z-tek:not(tr):hover, [data-qp-kayit].qp-z-cift:not(tr):hover { background-color: var(--qp-zebra-uzerine); }
/* Sipariş kalem tabloları (.qp-ic-tablo) hücre zeminini kendisi verir: zebra hücreye uygulanır */
.qp-ic-tablo > tbody > tr.qp-z-tek > td  { background: var(--qp-zebra-tek); }
.qp-ic-tablo > tbody > tr.qp-z-cift > td { background: var(--qp-zebra-cift); }
.qp-ic-tablo > tbody > tr.qp-z-tek:hover > td, .qp-ic-tablo > tbody > tr.qp-z-cift:hover > td { background: var(--qp-zebra-uzerine); }
@media print { .qp-z-tek, .qp-z-cift, .table > tbody > tr.qp-z-tek > *, .table > tbody > tr.qp-z-cift > *, .qp-ic-tablo > tbody > tr.qp-z-tek > td, .qp-ic-tablo > tbody > tr.qp-z-cift > td { background: transparent !important; --bs-table-bg: transparent; } }

/* İ-H53 Tedarikçi teklifi okuma: satır içi stil yerine ortak sınıflar (dar ekranda sayfa değil kapsayıcı kayar, sayfada yatay kaydırma olmaz) */
.qp-tto-kaydir { overflow-x: auto; max-width: 100%; }
.qp-tto-sec-sutun { width: 2rem; }
.qp-tto-tarih { width: 8.5rem; max-width: 100%; }
.qp-tto-liste { max-height: 11rem; overflow: auto; }
.qp-tto-birak { min-height: 9rem; cursor: pointer; border-style: dashed !important; }

/* UI denetimi 06.11.2026 (karar 7): ORTAK FORM HİZALAMA — aynı satırdaki form kutuları aynı hizada. Etiket TEK satır (nowrap); uzun açıklama etiketin içine yazılmaz: "?" yardımına (qy_alan_yardim), title'a ya da kutu altı nnotuna gider.
   Etiket kırpılmaz (overflow görünür kalır: "?" açılır kutusu etiketin içinden açılır); sığmayan etiket ölçüm betiğinde bulgu olur: testler/form_hizalama_olcum.py (aynı satırdaki kutuların dikey farkı > 2 px ya da kesilen etiket). */
.qe-content form .row > [class*="col-"] > label.form-label,
.qe-content form .row > [class*="col-"] > .form-label { display: block; max-width: 100%; white-space: nowrap; }
.qe-content .row > [class*="col-"] > label.form-label .badge,
.qe-content .row > [class*="col-"] > label.form-label .qp-etiket { line-height: 1; padding-top: .2em; padding-bottom: .2em; margin-top: -2px; margin-bottom: -2px; vertical-align: baseline; }
.qe-content .row > [class*="col-"] > label.form-label > .text-muted { font-size: 12px; font-weight: 400; }
.qe-content label.form-label .kv-yardim-dugme { margin-top: -6px; margin-bottom: -6px; }
.qe-content .row > [class*="col-"] > label.form-label:not(.small) { height: 24px; }   /* "?" düğmesi ve rozet satır kutusunu büyütmez: tek satır = sabit yükseklik */