/* =====================================================================
   ÜRETİM PLANLAMA — MARKA TEMASI
   Lacivert marka paleti + istasyon kimlik renkleri.
   Tüm görsel kararlar buradadır; sayfalarda inline style kullanılmaz
   (tek istisna: veriye bağlı bar/ilerleme genişlikleri).
   ===================================================================== */

:root {
    /* Marka paleti */
    --marka-950: #16224B;
    --marka-900: #1E2A5A;
    --marka-800: #2A3C86;
    --marka-700: #3450B5;
    --marka-600: #3B5FD9;
    --marka-500: #4285F4;
    --marka-300: #8FB4FB;
    --marka-200: #C3D8FD;
    --marka-100: #DCE8FE;
    --marka-50:  #F2F6FF;

    /* Yüzeyler ve metin */
    --zemin: #F4F7FC;
    --kart: #FFFFFF;
    --cizgi: #E2E8F5;
    --metin: #16224B;
    --metin-soluk: #6B7794;

    /* Geriye dönük uyumluluk (eski değişken adları) */
    --sidebar: var(--marka-950);
    --sidebar-hover: var(--marka-900);
    --vurgu: var(--marka-600);
    --vurgu-koyu: var(--marka-700);

    /* Durum renkleri — DEĞİŞMEDİ */
    --basari: #16A34A;
    --uyari: #F59E0B;
    --hata: #DC2626;

    /* İSTASYON KİMLİK RENKLERİ — DEĞİŞMEDİ (helpers.php ile eşleşir) */
    --ist-pres: #F97316;
    --ist-termik: #EF4444;
    --ist-eloksal: #0EA5E9;
    --ist-boya: #8B5CF6;
    --ist-polisaj: #EAB308;
    --ist-satinaj: #A16207;
    --ist-kromat: #14B8A6;
    --ist-bariyer: #64748B;
    --ist-mekanik: #DC2626;
    --ist-ahsap: #92400E;
    --ist-folyo: #6366F1;
    --ist-ambalaj: #22C55E;
    --ist-mop: #D946EF;
    --ist-kesim: #0891B2;

    /* Tipografi */
    --govde-font: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --baslik-font: 'Space Grotesk', 'Inter', system-ui, sans-serif;

    /* Gölgeler ve ritim */
    --golge-kart: 0 1px 2px rgba(22, 34, 75, .04), 0 4px 12px rgba(22, 34, 75, .04);
    --golge-kart-hover: 0 2px 4px rgba(22, 34, 75, .06), 0 10px 24px rgba(22, 34, 75, .08);
    --gecis: 150ms ease;
    --radius-kart: 14px;
    --radius-alan: 9px;

    /* Bootstrap eşitlemesi */
    --bs-primary: #3B5FD9;
    --bs-primary-rgb: 59, 95, 217;
    --bs-body-bg: #F4F7FC;
    --bs-body-color: #16224B;
    --bs-border-color: #E2E8F5;
    --bs-link-color: #3B5FD9;
    --bs-link-hover-color: #3450B5;
    --bs-danger-rgb: 220, 38, 38;
    --bs-success-rgb: 22, 163, 74;
    --bs-warning-rgb: 245, 158, 11;
}

/* ------------------------------------------------ Temel */
body {
    font-family: var(--govde-font);
    background-color: var(--zemin);
    color: var(--metin);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.marka, .sayi, .stat-deger, .sayfa-baslik, .anahtar-baslik {
    font-family: var(--baslik-font);
}

.sayi, .stat-deger { font-variant-numeric: tabular-nums; }

a { color: var(--marka-600); text-decoration: none; }
a:hover { color: var(--marka-700); text-decoration: underline; }

hr { border-color: var(--cizgi); opacity: 1; }

/* ------------------------------------------------ Sidebar */
.sidebar-koyu,
.offcanvas-koyu {
    background: linear-gradient(180deg, var(--marka-950) 0%, var(--marka-900) 100%);
}
.sidebar-koyu { min-height: 100vh; }

.marka-alani {
    display: flex;
    align-items: center;
    gap: .65rem;
    padding: 1.05rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .09);
    text-decoration: none;
}
.marka-alani:hover { text-decoration: none; }
.marka-logo {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background-color: var(--marka-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    box-shadow: 0 2px 8px rgba(66, 133, 244, .35);
}
.marka {
    color: #fff;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: .01em;
    line-height: 1.15;
}
.marka-alt {
    display: block;
    font-family: var(--govde-font);
    font-size: .68rem;
    font-weight: 400;
    color: var(--marka-300);
    letter-spacing: .04em;
}

.menu-grup {
    padding: 1.1rem 1rem .35rem;
    font-size: .63rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: rgba(143, 180, 251, .65);
}

.sidebar-koyu .nav-link,
.offcanvas-koyu .nav-link {
    display: flex;
    align-items: center;
    gap: .7rem;
    margin: .12rem .6rem;
    padding: .6rem .75rem;
    border-radius: 10px;
    color: #C4CFE6;
    font-size: .9rem;
    font-weight: 500;
    transition: background-color var(--gecis), color var(--gecis);
}
.sidebar-koyu .nav-link:hover,
.offcanvas-koyu .nav-link:hover {
    background-color: rgba(255, 255, 255, .08);
    color: #fff;
    text-decoration: none;
}
.sidebar-koyu .nav-link.active,
.offcanvas-koyu .nav-link.active {
    background-color: var(--marka-600);
    color: #fff;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16),
                0 2px 8px rgba(59, 95, 217, .35);
}
.sidebar-koyu .nav-link .bi,
.offcanvas-koyu .nav-link .bi { font-size: 1rem; width: 1.15rem; text-align: center; }

.offcanvas-koyu .offcanvas-header { border-bottom: 1px solid rgba(255, 255, 255, .09); }

/* ------------------------------------------------ Üst bar */
.ustbar {
    background-color: var(--kart);
    border-bottom: 1px solid var(--cizgi);
    min-height: 64px;
    z-index: 1020;
}
.sayfa-baslik {
    font-size: 20px;
    font-weight: 600;
    color: var(--metin);
    margin: 0;
}
.kullanici-kutu { display: flex; align-items: center; gap: .55rem; }
.avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: var(--marka-100);
    color: var(--marka-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--baslik-font);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: .02em;
}
.kullanici-adi {
    font-size: .875rem;
    font-weight: 500;
    color: var(--metin);
    line-height: 1.2;
}
.cikis-btn {
    width: 34px;
    height: 34px;
    border-radius: var(--radius-alan);
    border: 1px solid var(--cizgi);
    background-color: var(--kart);
    color: var(--metin-soluk);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all var(--gecis);
}
.cikis-btn:hover {
    background-color: #FEF2F2;
    border-color: #FCA5A5;
    color: var(--hata);
    text-decoration: none;
}

/* ------------------------------------------------ Yerleşim ritmi */
.icerik { min-height: calc(100vh - 64px - 56px); padding-top: 24px; padding-bottom: 24px; }
.icerik > * + * { margin-top: 24px; }
.icerik > .row + .row,
.icerik > .card + .card { margin-top: 24px; }
.alt-bilgi {
    color: var(--metin-soluk);
    border-top: 1px solid var(--cizgi);
    font-size: .8rem;
    background-color: var(--kart);
}

/* ------------------------------------------------ Kartlar */
.card {
    border: 1px solid var(--cizgi);
    border-radius: var(--radius-kart);
    background-color: var(--kart);
    box-shadow: var(--golge-kart);
    transition: box-shadow var(--gecis), transform var(--gecis);
}
.card-body { padding: 20px; }
.card-header {
    background-color: transparent;
    border-bottom: 1px solid var(--cizgi);
    border-radius: var(--radius-kart) var(--radius-kart) 0 0 !important;
    padding: 14px 20px;
    font-weight: 600;
    font-size: .95rem;
    color: var(--metin);
}
.card-header .bi { color: var(--marka-500); }
.card-footer {
    background-color: transparent;
    border-top: 1px solid var(--cizgi);
    padding: 14px 20px;
}

/* Panel başlığı (havuz / günün planı) */
.panel-baslik {
    background: linear-gradient(180deg, var(--marka-900), var(--marka-950)) !important;
    color: #fff;
    font-family: var(--baslik-font);
    border-bottom: 0 !important;
}
.panel-baslik .bi { color: var(--marka-300); }
.panel-ara { max-width: 220px; }
.panel-baslik .panel-ara {
    background-color: rgba(255, 255, 255, .1);
    border-color: rgba(255, 255, 255, .2);
    color: #fff;
}
.panel-baslik .panel-ara::placeholder { color: var(--marka-300); }
.panel-baslik .panel-ara:focus {
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
    border-color: var(--marka-300);
    box-shadow: none;
}

/* ------------------------------------------------ İstatistik kartları */
.stat-kart { height: 100%; }
.stat-kart:hover { transform: translateY(-1px); box-shadow: var(--golge-kart-hover); }
.stat-cip {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: .85rem;
}
.cip-marka  { background-color: var(--marka-100); color: var(--marka-700); }
.cip-basari { background-color: rgba(22, 163, 74, .12); color: #15803D; }
.cip-uyari  { background-color: rgba(245, 158, 11, .14); color: #B45309; }
.cip-notr   { background-color: #EEF1F7; color: var(--metin-soluk); }
.cip-hata   { background-color: rgba(220, 38, 38, .12); color: #B91C1C; }

.stat-deger {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -.01em;
}
.stat-deger-kucuk { font-size: 22px; font-weight: 700; font-family: var(--baslik-font); font-variant-numeric: tabular-nums; }
.stat-etiket {
    font-size: .72rem;
    font-weight: 600;
    color: var(--metin-soluk);
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-top: .3rem;
}
.stat-ikon { font-size: 1.4rem; opacity: .9; }

/* ------------------------------------------------ Butonlar */
.btn {
    border-radius: var(--radius-alan);
    font-weight: 500;
    font-size: .875rem;
    padding: .45rem .9rem;
    transition: all var(--gecis);
}
.btn-sm { padding: .3rem .7rem; font-size: .8rem; }

.btn-primary {
    --bs-btn-bg: var(--marka-600);
    --bs-btn-border-color: var(--marka-600);
    --bs-btn-hover-bg: var(--marka-700);
    --bs-btn-hover-border-color: var(--marka-700);
    --bs-btn-active-bg: var(--marka-800);
    --bs-btn-active-border-color: var(--marka-800);
    --bs-btn-disabled-bg: var(--marka-300);
    --bs-btn-disabled-border-color: var(--marka-300);
    box-shadow: 0 1px 2px rgba(22, 34, 75, .08);
}
.btn-primary:hover { box-shadow: 0 3px 10px rgba(59, 95, 217, .3); }

.btn-outline-primary {
    --bs-btn-color: var(--marka-700);
    --bs-btn-border-color: var(--marka-200);
    --bs-btn-bg: var(--kart);
    --bs-btn-hover-bg: var(--marka-50);
    --bs-btn-hover-border-color: var(--marka-300);
    --bs-btn-hover-color: var(--marka-700);
    --bs-btn-active-bg: var(--marka-100);
    --bs-btn-active-color: var(--marka-800);
    --bs-btn-active-border-color: var(--marka-300);
}

/* İkincil: beyaz zemin + çizgi kenarlık */
.btn-outline-secondary {
    --bs-btn-color: var(--metin);
    --bs-btn-bg: var(--kart);
    --bs-btn-border-color: var(--cizgi);
    --bs-btn-hover-bg: var(--marka-50);
    --bs-btn-hover-border-color: var(--marka-200);
    --bs-btn-hover-color: var(--metin);
    --bs-btn-active-bg: var(--marka-100);
    --bs-btn-active-color: var(--metin);
    --bs-btn-active-border-color: var(--marka-200);
}
.btn-outline-dark {
    --bs-btn-color: var(--metin);
    --bs-btn-bg: var(--kart);
    --bs-btn-border-color: var(--cizgi);
    --bs-btn-hover-bg: var(--marka-950);
    --bs-btn-hover-border-color: var(--marka-950);
}

/* Tehlikeli: outline, hover'da dolu */
.btn-danger,
.btn-outline-danger {
    --bs-btn-color: var(--hata);
    --bs-btn-bg: var(--kart);
    --bs-btn-border-color: #F5C2C2;
    --bs-btn-hover-bg: var(--hata);
    --bs-btn-hover-border-color: var(--hata);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #B91C1C;
    --bs-btn-active-border-color: #B91C1C;
    --bs-btn-active-color: #fff;
}
.btn-outline-success {
    --bs-btn-color: #15803D;
    --bs-btn-bg: var(--kart);
    --bs-btn-border-color: #BBE5C8;
    --bs-btn-hover-bg: var(--basari);
    --bs-btn-hover-border-color: var(--basari);
    --bs-btn-hover-color: #fff;
}

/* ------------------------------------------------ Tablolar */
.table {
    --bs-table-hover-bg: var(--marka-50);
    --bs-table-striped-bg: transparent;
    margin-bottom: 0;
    color: var(--metin);
}
.table > :not(caption) > * > * {
    border-color: #EDF1F9;
    padding-top: 12px;
    padding-bottom: 12px;
    background-color: transparent;
}
.table-sm > :not(caption) > * > * { padding-top: 8px; padding-bottom: 8px; }

.table thead th,
.table .table-light th {
    background-color: var(--marka-50);
    color: var(--metin-soluk);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    border-bottom: 1px solid var(--cizgi);
}
.table tfoot th, .table tfoot td {
    background-color: var(--marka-50);
    border-top: 2px solid var(--marka-200);
}
.table-responsive { border-radius: 0 0 var(--radius-kart) var(--radius-kart); }

/* İlk kolon vurgusu + bağlantılar */
.siparis-link {
    color: var(--marka-700);
    font-weight: 600;
    text-decoration: none;
}
.siparis-link:hover { color: var(--marka-800); text-decoration: underline; }

/* Boş durum (tüm tablolarda tutarlı) */
.bos-durum {
    text-align: center;
    padding: 40px 20px;
    color: var(--metin-soluk);
}
.bos-durum .bos-ikon {
    font-size: 2.4rem;
    color: var(--marka-200);
    display: block;
    margin-bottom: .6rem;
}
.bos-durum .bos-baslik {
    font-family: var(--baslik-font);
    font-weight: 600;
    font-size: 1rem;
    color: var(--metin);
    margin-bottom: .2rem;
}
.bos-durum .bos-aciklama { font-size: .85rem; margin-bottom: 0; }
.bos-durum .btn { margin-top: 1rem; }
.buyuk-ikon { font-size: 3.4rem; }

/* ------------------------------------------------ Rozetler */
.badge {
    border-radius: 999px;
    font-weight: 600;
    font-size: .72rem;
    padding: .38em .75em;
    letter-spacing: .01em;
}
.badge.text-bg-success   { background-color: rgba(22, 163, 74, .12) !important;  color: #15803D !important; }
.badge.text-bg-warning   { background-color: rgba(245, 158, 11, .15) !important; color: #B45309 !important; }
.badge.text-bg-danger    { background-color: rgba(220, 38, 38, .12) !important;  color: #B91C1C !important; }
.badge.text-bg-dark      { background-color: rgba(22, 34, 75, .1) !important;    color: var(--metin) !important; }
.badge.text-bg-secondary { background-color: #EDF1F9 !important;                 color: #4A5678 !important; }
.badge.text-bg-info      { background-color: rgba(14, 165, 233, .13) !important; color: #0369A1 !important; }
.badge.text-bg-primary   { background-color: var(--marka-100) !important;        color: var(--marka-700) !important; }
.badge.text-bg-light     { background-color: var(--marka-50) !important;         color: #4A5678 !important; border: 1px solid var(--cizgi) !important; }

.rozet-rol-admin         { background-color: rgba(220, 38, 38, .12);  color: #B91C1C; }
.rozet-rol-yukleyici     { background-color: rgba(245, 158, 11, .15); color: #B45309; }
.rozet-rol-planlamaci    { background-color: var(--marka-100);        color: var(--marka-700); }
.rozet-rol-goruntuleyici { background-color: #EDF1F9;                 color: #4A5678; }

/* İstasyon rozeti */
.ist-rozet {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .28em .7em .28em .5em;
    border-radius: 999px;
    font-size: .76rem;
    font-weight: 600;
    line-height: 1.4;
    background-color: color-mix(in srgb, var(--ist, var(--ist-bariyer)) 12%, #fff);
    color: color-mix(in srgb, var(--ist, var(--ist-bariyer)) 72%, var(--metin));
    white-space: nowrap;
}
.ist-rozet::before {
    content: "";
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--ist, var(--ist-bariyer));
}

.ist-pres    { --ist: var(--ist-pres); }
.ist-termik  { --ist: var(--ist-termik); }
.ist-eloksal { --ist: var(--ist-eloksal); }
.ist-boya    { --ist: var(--ist-boya); }
.ist-polisaj { --ist: var(--ist-polisaj); }
.ist-satinaj { --ist: var(--ist-satinaj); }
.ist-kromat  { --ist: var(--ist-kromat); }
.ist-bariyer { --ist: var(--ist-bariyer); }
.ist-mekanik { --ist: var(--ist-mekanik); }
.ist-ahsap   { --ist: var(--ist-ahsap); }
.ist-folyo   { --ist: var(--ist-folyo); }
.ist-ambalaj { --ist: var(--ist-ambalaj); }
.ist-mop     { --ist: var(--ist-mop); }
.ist-kesim   { --ist: var(--ist-kesim); }

/* ------------------------------------------------ Formlar */
.form-label {
    font-size: .78rem;
    font-weight: 600;
    color: var(--metin);
    margin-bottom: .35rem;
}
.form-control, .form-select {
    border-color: var(--cizgi);
    border-radius: var(--radius-alan);
    color: var(--metin);
    font-size: .875rem;
    padding: .45rem .7rem;
    transition: border-color var(--gecis), box-shadow var(--gecis);
}
.form-control-sm, .form-select-sm { font-size: .82rem; padding: .32rem .6rem; }
.form-control:focus, .form-select:focus {
    border-color: var(--marka-500);
    box-shadow: 0 0 0 3px var(--marka-100);
}
.form-control::placeholder { color: #9AA5BF; }
.form-check-input { border-color: #C7D0E3; }
.form-check-input:checked { background-color: var(--marka-600); border-color: var(--marka-600); }
.form-check-input:focus { border-color: var(--marka-500); box-shadow: 0 0 0 3px var(--marka-100); }
.form-text { color: var(--metin-soluk); font-size: .78rem; }
.input-group-text {
    border-color: var(--cizgi);
    background-color: var(--marka-50);
    color: var(--metin-soluk);
    border-radius: var(--radius-alan);
}

/* Filtre çubuğu */
.filtre-kart .card-body { padding: 16px 20px; }
.filtre-aksiyon { display: flex; gap: .5rem; justify-content: flex-end; align-items: center; flex-wrap: wrap; }
.ara-kutu { max-width: 260px; }
/* Kart başlığındaki filtre seçicileri: metin + ok sığsın */
.filtre-secim { min-width: 168px; width: auto; }

/* ------------------------------------------------ Diğer bileşenler */
.modal-content { border: 0; border-radius: 16px; box-shadow: 0 20px 60px rgba(22, 34, 75, .2); }
.modal-header { border-bottom-color: var(--cizgi); padding: 16px 20px; }
.modal-body { padding: 20px; }
.modal-footer { border-top-color: var(--cizgi); padding: 14px 20px; }

.alert { border: 1px solid transparent; border-radius: 12px; font-size: .9rem; padding: 14px 16px; }
.alert-success { background-color: #ECFDF3; border-color: #C7EDD5; color: #14532D; }
.alert-danger  { background-color: #FEF2F2; border-color: #FBD5D5; color: #7F1D1D; }
.alert-warning { background-color: #FFFBEB; border-color: #FDE9BC; color: #7C4A03; }
.alert-info    { background-color: var(--marka-50); border-color: var(--marka-100); color: var(--marka-800); }
.alert-secondary { background-color: #F4F6FA; border-color: var(--cizgi); color: #46506E; }
.alert-light   { background-color: var(--marka-50); border-color: var(--cizgi); color: var(--metin); }

.progress { background-color: #E6EBF5; border-radius: 999px; }
.progress-bar { background-color: var(--marka-600); }
.progress-bar.bg-success { background-color: var(--basari) !important; }
.progress-ince { height: 6px; }
.progress-orta { height: 10px; }

.list-group-item { border-color: var(--cizgi); padding: 12px 20px; }
.list-group-item-action:hover { background-color: var(--marka-50); }

.text-muted { color: var(--metin-soluk) !important; }
.text-primary { color: var(--marka-600) !important; }
code { color: var(--marka-700); background-color: var(--marka-50); padding: .1em .35em; border-radius: 5px; }

/* ------------------------------------------------ Login */
.login-sayfa {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background-color: var(--marka-950);   /* düz zemin — degrade kullanılmaz */
}
.login-kart { border: 0; box-shadow: 0 24px 60px rgba(10, 18, 45, .35); }
.login-logo {
    width: 52px;
    height: 52px;
    /* .mb-3 ile birlikte blok gibi ortalanır */
    border-radius: 15px;
    background-color: var(--marka-500);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: 0 6px 18px rgba(66, 133, 244, .4);
}
.login-marka { font-family: var(--baslik-font); font-weight: 700; letter-spacing: .01em; }
.login-alt { color: var(--marka-300); }

/* ------------------------------------------------ Dashboard: istasyon yükü */
.yuk-liste { display: flex; flex-direction: column; gap: 2px; }
.yuk-satir {
    display: block;                 /* her istasyon KENDİ satırında */
    padding: 10px 12px;
    margin: 0 -12px;
    border-radius: 10px;
    text-decoration: none;
    color: var(--metin);
    transition: background-color var(--gecis);
}
.yuk-satir:hover { background-color: var(--marka-50); color: var(--metin); text-decoration: none; }
.yuk-ust {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: 7px;
}
.yuk-ad {
    font-size: .875rem;
    font-weight: 600;
    color: var(--metin);
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}
.yuk-ad::before {
    content: "";
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 3px;
    background-color: var(--ist, var(--ist-bariyer));
}
.yuk-sayilar { white-space: nowrap; font-family: var(--baslik-font); font-variant-numeric: tabular-nums; }
.yuk-kalan { font-size: .9rem; font-weight: 700; color: var(--metin); }
.yuk-plan { font-size: .78rem; color: var(--metin-soluk); font-weight: 500; margin-left: .2rem; }
.yuk-bar-alan {
    display: block;
    width: 100%;
    height: 8px;
    background-color: #E6EBF5;
    border-radius: 999px;
    overflow: hidden;
}
.yuk-bar {
    display: block;
    height: 100%;
    min-width: 3px;
    border-radius: 999px;
    background-color: var(--ist, var(--ist-bariyer));
    transition: width var(--gecis);
}
.yuk-bar.bitti { background-color: #BFE9CD; }
.yuk-tamam { color: var(--basari); font-weight: 700; font-size: .85rem; }

/* ------------------------------------------------ Plan tablosu */
.plan-kaydirici {
    overflow: auto;
    max-height: calc(100vh - 300px);
    border-radius: 0 0 var(--radius-kart) var(--radius-kart);
}
.plan-tablo { border-collapse: separate; border-spacing: 0; white-space: nowrap; }
.plan-tablo thead th {
    position: sticky;
    top: 0;
    z-index: 3;
    box-shadow: 0 1px 3px rgba(22, 34, 75, .08);
}
.plan-tablo tfoot th {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background-color: var(--marka-50);
    border-top: 2px solid var(--marka-200);
}
.plan-tablo .sabit-1,
.plan-tablo .sabit-2 {
    position: sticky;
    z-index: 2;
    background-color: var(--kart);
}
.plan-tablo .sabit-1 { left: 0; min-width: 118px; max-width: 118px; overflow: hidden; }
.plan-tablo .sabit-2 { left: 118px; min-width: 58px; }
.plan-tablo .sabit-1 .siparis-link { display: block; font-size: .86rem; line-height: 1.25; }

/* Sipariş numarasının altındaki gün / plansız etiketi */
.satir-etiket {
    display: inline-block;
    margin-top: 2px;
    padding: .1em .45em;
    border-radius: 5px;
    background-color: var(--marka-50);
    border: 1px solid var(--cizgi);
    color: var(--metin-soluk);
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}
.satir-etiket.etiket-plansiz {
    background-color: rgba(245, 158, 11, .13);
    border-color: rgba(245, 158, 11, .3);
    color: #B45309;
}
.plan-tablo thead .sabit-1,
.plan-tablo thead .sabit-2,
.plan-tablo tfoot .sabit-1,
.plan-tablo tfoot .sabit-2 { z-index: 4; background-color: var(--marka-50); }
.plan-tablo tbody tr:hover .sabit-1,
.plan-tablo tbody tr:hover .sabit-2 { background-color: var(--marka-50); }

/* İstasyon renk şeridi (kolon başlıkları) */
.ist-serit { border-top: 4px solid var(--ist, var(--cizgi)) !important; }
.kolon-genis { min-width: 160px; }
.kolon-onay { width: 30px; }
.kolon-sira { width: 92px; }

/* Hücreler */
.hucre-yok { background-color: #F7F9FC; }
.hucre-rota {
    position: relative;
    background-color: color-mix(in srgb, var(--ist, var(--ist-bariyer)) 9%, #fff);
    text-align: right;
    min-width: 96px;
    padding-top: 18px !important;   /* sıra rozetine yer bırakır */
    padding-bottom: 8px !important;
}
.hucre-kalan {
    font-family: var(--baslik-font);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: .88rem;
    line-height: 1.1;
}
.hucre-alt {
    font-size: 10px;
    color: #98A3BC;
    font-variant-numeric: tabular-nums;
    margin-top: 1px;
}
.hucre-sira {
    position: absolute;
    top: 4px;
    left: 5px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    font-size: .58rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    color: #fff;
    background-color: var(--ist, var(--ist-bariyer));
}
.hucre-tamam .hucre-kalan { color: var(--basari); }
.hucre-plan-cizili { text-decoration: line-through; }
.sap-bekleniyor {
    background-color: #F4F6FA;
    color: var(--metin-soluk);
    text-align: center;
    font-size: .78rem;
    font-style: italic;
    letter-spacing: .03em;
}

/* İstasyon filtre pilleri */
.ist-filtre { cursor: pointer; margin: 0; }
.ist-filtre input { position: absolute; opacity: 0; pointer-events: none; }
.ist-filtre .ist-rozet {
    background-color: var(--kart);
    color: var(--metin-soluk);
    border: 1px solid var(--cizgi);
    transition: all var(--gecis);
}
.ist-filtre .ist-rozet::before { background-color: var(--ist, var(--ist-bariyer)); opacity: .45; }
.ist-filtre:hover .ist-rozet { border-color: var(--ist, var(--marka-300)); color: var(--metin); }
.ist-filtre input:checked + .ist-rozet {
    background-color: var(--ist, var(--ist-bariyer));
    border-color: var(--ist, var(--ist-bariyer));
    color: #fff;
    box-shadow: 0 2px 6px rgba(22, 34, 75, .16);
}
.ist-filtre input:checked + .ist-rozet::before { background-color: #fff; opacity: 1; }
.ist-filtre input:focus-visible + .ist-rozet { box-shadow: 0 0 0 3px var(--marka-100); }

/* Not hücresi */
.not-hucre { min-width: 140px; max-width: 220px; white-space: normal; }
.not-hucre[data-duzen="1"] { cursor: pointer; }
.not-hucre[data-duzen="1"]:hover { background-color: var(--marka-50); }
.not-girdi { min-width: 130px; }
.toplam-kg {
    font-family: var(--baslik-font);
    font-size: 1.05rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    color: var(--metin) !important;
}

/* Kaydırmalı paneller */
.panel-kaydir { max-height: 480px; overflow-y: auto; }
.thead-sabit { position: sticky; top: 0; z-index: 1; }

/* ------------------------------------------------ Sipariş detay */
.rota-adimlar { display: flex; align-items: center; gap: .45rem; overflow-x: auto; padding: .25rem 0 .5rem; }
.rota-adim {
    flex: 0 0 auto;
    min-width: 132px;
    text-align: center;
    padding: .7rem .55rem .6rem;
    border-radius: 12px;
    border: 1px solid var(--cizgi);
    background-color: color-mix(in srgb, var(--ist, var(--ist-bariyer)) 7%, #fff);
}
.rota-adim.soluk { opacity: .55; }
.rota-adim.tamam { border-color: #A7DFBB; }
.rota-adim .adim-kg {
    font-family: var(--baslik-font);
    font-variant-numeric: tabular-nums;
    font-size: .85rem;
    font-weight: 700;
    margin-top: .4rem;
}
.rota-adim .adim-yuzde { font-size: .7rem; }
.rota-adim .mini-progress {
    height: 4px;
    border-radius: 999px;
    background-color: #E6EBF5;
    margin-top: .4rem;
    overflow: hidden;
}
.rota-adim .mini-progress > div { height: 100%; border-radius: 999px; background-color: var(--ist, var(--ist-bariyer)); }
.rota-adim.tamam .mini-progress > div { background-color: var(--basari); }
.rota-adim-ok { flex: 0 0 auto; color: var(--marka-200); }

.anahtar-baslik {
    font-variant-numeric: tabular-nums;
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: .01em;
}
.bilgi-listesi dt {
    font-size: .7rem;
    font-weight: 600;
    color: var(--metin-soluk);
    text-transform: uppercase;
    letter-spacing: .05em;
}
.bilgi-listesi dd { margin-bottom: .6rem; font-size: .9rem; }

/* ------------------------------------------------ Raporlar */
/* Sekme çubuğu: masaüstünde sarar, mobilde yatay kaydırılır */
.rapor-sekme-sarici {
    display: flex;
    align-items: center;
    gap: .3rem;
    flex-wrap: wrap;
    min-width: 0;
}
.sekme-grup-etiket {
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--marka-300);
    padding: 0 .35rem 0 .5rem;
    white-space: nowrap;
}
.sekme-grup-etiket:first-child { padding-left: 0; }
.sekme-pill {
    color: var(--metin-soluk);
    font-size: .82rem;
    font-weight: 600;
    padding: .38rem .75rem;
    border-radius: var(--radius-alan);
    white-space: nowrap;
    text-decoration: none;
    transition: all var(--gecis);
}
.sekme-pill:hover {
    background-color: var(--marka-50);
    color: var(--marka-700);
    text-decoration: none;
}
.sekme-pill.active {
    background-color: var(--marka-600);
    color: #fff;
    box-shadow: 0 2px 8px rgba(59, 95, 217, .28);
}
@media (max-width: 991.98px) {
    .rapor-sekme-sarici {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: thin;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }
}

/* Sekme içi bölüm başlığı (iki tablolu raporlar) */
.bolum-baslik {
    font-family: var(--baslik-font);
    font-size: .95rem;
    font-weight: 600;
    color: var(--metin);
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--marka-100);
    margin-bottom: .75rem;
}
.rapor-baslik {
    font-family: var(--baslik-font);
    font-size: 1.05rem;
    font-weight: 600;
    margin: 0;
}
.grafik-kutu { position: relative; height: 320px; }
.grafik-kutu.grafik-uzun { height: 420px; }
@media (max-width: 767.98px) {
    .grafik-kutu { height: 260px; }
    .grafik-kutu.grafik-uzun { height: 380px; }
}

/* ------------------------------------------------ Sistem sayfası */
.kontrol-satir {
    display: flex;
    align-items: flex-start;
    gap: .7rem;
    padding: .65rem 0;
    border-bottom: 1px solid var(--cizgi);
}
.kontrol-satir:last-child { border-bottom: 0; }
.kontrol-ikon { flex: 0 0 1.2rem; font-size: 1rem; line-height: 1.4; }
.kontrol-ad { flex: 0 0 220px; font-weight: 600; font-size: .85rem; }
.kontrol-deger { flex: 1 1 auto; font-size: .82rem; color: var(--metin-soluk); }

/* ------------------------------------------------ Mobil */
@media (max-width: 991.98px) {
    .icerik { padding-top: 16px; }
    .sayfa-baslik { font-size: 17px; }
    .stat-deger { font-size: 26px; }
    .plan-kaydirici { max-height: none; }
}

/* ------------------------------------------------ Hareket azaltma */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}