/* ════════════════════════════════════════════════════════════════
   MesTech Design System — Components
   Version: 1.0.0
   DALGA 7.7.9 — DEV 1
   13 temel + 2 platform-ozgu component
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Page Header ── */

.mds-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--mds-space-xl) 0;
    gap: var(--mds-space-lg);
    flex-wrap: wrap;
}
.mds-page-title {
    display: flex; align-items: center; gap: var(--mds-space-lg);
}
.mds-page-title h1 {
    font-size: var(--mds-fs-xl);
    font-weight: var(--mds-fw-bold);
    color: var(--mds-text-primary);
    margin: 0;
}
.mds-page-title .mds-subtitle {
    font-size: var(--mds-fs-sm);
    color: var(--mds-text-secondary);
    margin: 2px 0 0 0;
}
.mds-page-actions { display: flex; gap: var(--mds-space-sm); flex-wrap: wrap; }

/* ── 2. Mock Banner ── */

.mds-mock-banner {
    display: flex; align-items: center; gap: var(--mds-space-sm);
    padding: var(--mds-space-sm) var(--mds-space-lg);
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    color: #92400e;
    border-radius: var(--mds-radius-md);
    font-size: var(--mds-fs-sm); font-weight: var(--mds-fw-medium);
    margin-bottom: var(--mds-space-lg);
}
.mds-mock-banner i { font-size: 14px; }

/* ── 3. KPI Kartlari ── */

.mds-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--mds-space-lg);
    margin-bottom: var(--mds-space-2xl);
}
.mds-kpi-card {
    background: var(--mds-bg-card);
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-lg);
    padding: var(--mds-space-xl);
    display: flex; align-items: center; gap: var(--mds-space-lg);
    transition: all var(--mds-transition);
    position: relative;
    overflow: hidden;
}
.mds-kpi-card:hover {
    box-shadow: var(--mds-shadow-md);
    transform: translateY(-1px);
}
.mds-kpi-info { flex: 1; min-width: 0; }
.mds-kpi-value {
    font-size: var(--mds-fs-xl);
    font-weight: var(--mds-fw-bold);
    color: var(--mds-text-primary);
    display: block;
    line-height: 1.2;
}
.mds-kpi-label {
    font-size: var(--mds-fs-sm);
    color: var(--mds-text-secondary);
    display: block;
    margin-top: 2px;
}
.mds-kpi-trend {
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-semibold);
    padding: 2px 8px;
    border-radius: var(--mds-radius-full);
    position: absolute; top: 12px; right: 12px;
}
.mds-kpi-trend.up { background: var(--mds-success-bg); color: var(--mds-success); }
.mds-kpi-trend.down { background: var(--mds-danger-bg); color: var(--mds-danger); }

/* ── 4. Tablo Sistemi ── */

.mds-table-wrap {
    background: var(--mds-bg-card);
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-lg);
    overflow: hidden;
}

.mds-table-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mds-space-lg);
    border-bottom: 1px solid var(--mds-border);
    gap: var(--mds-space-md);
    flex-wrap: wrap;
}

.mds-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--mds-fs-sm);
}
.mds-table thead { background: var(--mds-bg-hover); }
.mds-table th {
    padding: var(--mds-space-md) var(--mds-space-lg);
    text-align: left;
    font-weight: var(--mds-fw-semibold);
    color: var(--mds-text-secondary);
    font-size: var(--mds-fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    border-bottom: 1px solid var(--mds-border);
    user-select: none;
}
.mds-table th[data-sortable] {
    cursor: pointer;
    position: relative;
    padding-right: 24px;
}
.mds-table th[data-sortable]:hover { color: var(--mds-text-primary); }
.mds-table th[data-sortable]::after {
    content: '\21C5';
    position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
    font-size: 11px; opacity: 0.3;
}
.mds-table th[data-sortable].asc::after { content: '\2191'; opacity: 0.8; color: var(--platform-color); }
.mds-table th[data-sortable].desc::after { content: '\2193'; opacity: 0.8; color: var(--platform-color); }

.mds-table td {
    padding: var(--mds-space-md) var(--mds-space-lg);
    border-bottom: 1px solid var(--mds-border);
    color: var(--mds-text-primary);
    vertical-align: middle;
}
.mds-table tbody tr { transition: background var(--mds-transition); }
.mds-table tbody tr:hover { background: var(--mds-bg-hover); }
.mds-table tbody tr:last-child td { border-bottom: none; }

/* Secilebilir satirlar */
.mds-table th.select-col, .mds-table td.select-col { width: 40px; text-align: center; }
.mds-table .mds-checkbox {
    width: 16px; height: 16px;
    border-radius: 3px; border: 2px solid var(--mds-border);
    cursor: pointer; accent-color: var(--platform-color);
}

/* Toplu aksiyon bar */
.mds-bulk-bar {
    display: none; align-items: center; gap: var(--mds-space-md);
    padding: var(--mds-space-md) var(--mds-space-lg);
    background: var(--mds-info-bg);
    border-bottom: 1px solid var(--mds-border);
    font-size: var(--mds-fs-sm);
}
.mds-bulk-bar.active { display: flex; }
.mds-bulk-count { font-weight: var(--mds-fw-semibold); color: var(--mds-info); }

/* Sayfalama */
.mds-pagination {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mds-space-md) var(--mds-space-lg);
    border-top: 1px solid var(--mds-border);
    font-size: var(--mds-fs-sm);
}
.mds-pagination-info { color: var(--mds-text-secondary); }
.mds-pagination-pages { display: flex; gap: 4px; }
.mds-pagination-pages button {
    min-width: 32px; height: 32px;
    border-radius: var(--mds-radius-md);
    border: 1px solid var(--mds-border);
    background: var(--mds-bg-card);
    color: var(--mds-text-primary);
    cursor: pointer;
    font-size: var(--mds-fs-sm);
    transition: all var(--mds-transition);
}
.mds-pagination-pages button:hover { background: var(--mds-bg-hover); }
.mds-pagination-pages button.active {
    background: var(--platform-color);
    color: white;
    border-color: var(--platform-color);
}

/* Bos durum */
.mds-empty {
    text-align: center;
    padding: var(--mds-space-3xl) var(--mds-space-xl);
}
.mds-empty-icon {
    font-size: 48px; color: var(--mds-text-muted);
    margin-bottom: var(--mds-space-lg);
}
.mds-empty-title {
    font-size: var(--mds-fs-md); font-weight: var(--mds-fw-semibold);
    color: var(--mds-text-primary); margin-bottom: var(--mds-space-sm);
}
.mds-empty-desc {
    font-size: var(--mds-fs-sm); color: var(--mds-text-secondary);
}

/* Yukleniyor — skeleton satirlar */
.mds-skeleton-row {
    display: flex; gap: var(--mds-space-lg); padding: var(--mds-space-lg);
    border-bottom: 1px solid var(--mds-border);
}
.mds-skeleton-cell {
    height: 16px;
    border-radius: var(--mds-radius-sm);
    background: linear-gradient(90deg, var(--mds-bg-hover) 25%, var(--mds-border) 50%, var(--mds-bg-hover) 75%);
    background-size: 200% 100%;
    animation: mds-shimmer 1.5s infinite;
}
@keyframes mds-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── 5. Filtre Sistemi ── */

.mds-filter-bar {
    display: flex; align-items: center; gap: var(--mds-space-md);
    padding: var(--mds-space-lg);
    background: var(--mds-bg-card);
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-lg);
    margin-bottom: var(--mds-space-lg);
    flex-wrap: wrap;
}

.mds-filter-search {
    flex: 1; min-width: 200px;
    position: relative;
}
.mds-filter-search input {
    width: 100%;
    padding: 8px 12px 8px 36px;
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-md);
    font-size: var(--mds-fs-sm);
    background: var(--mds-bg-input);
    color: var(--mds-text-primary);
    transition: border-color var(--mds-transition);
}
.mds-filter-search input:focus {
    outline: none;
    border-color: var(--platform-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-color) 15%, transparent);
}
.mds-filter-search i {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--mds-text-muted); font-size: 13px;
}

.mds-filter-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-md);
    font-size: var(--mds-fs-sm);
    background: var(--mds-bg-input);
    color: var(--mds-text-primary);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    cursor: pointer;
    min-width: 140px;
}
.mds-filter-select:focus {
    outline: none;
    border-color: var(--platform-color);
}

/* Hizli filtre butonlari */
.mds-quick-filters {
    display: flex; gap: 6px; flex-wrap: wrap;
}
.mds-quick-filter {
    padding: 4px 12px;
    border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-medium);
    border: 1px solid var(--mds-border);
    background: var(--mds-bg-card);
    color: var(--mds-text-secondary);
    cursor: pointer;
    transition: all var(--mds-transition);
}
.mds-quick-filter:hover { background: var(--mds-bg-hover); }
.mds-quick-filter.active {
    background: color-mix(in srgb, var(--platform-color) 10%, transparent);
    border-color: var(--platform-color);
    color: var(--platform-color);
}

/* Filtre chip'leri (aktif filtreler) */
.mds-filter-chips {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--mds-space-md);
}
.mds-filter-chip {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px 2px 10px;
    border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs);
    background: color-mix(in srgb, var(--platform-color) 10%, transparent);
    color: var(--platform-color);
}
.mds-filter-chip-remove {
    width: 16px; height: 16px;
    border-radius: 50%; border: none;
    background: transparent; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 10px; color: var(--platform-color);
    transition: background var(--mds-transition);
}
.mds-filter-chip-remove:hover { background: color-mix(in srgb, var(--platform-color) 20%, transparent); }

/* ── 6. Badge Sistemi ── */

.mds-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-medium);
    white-space: nowrap;
    line-height: 1.4;
}

/* Durum badge'leri */
.mds-badge.success { background: var(--mds-success-bg); color: var(--mds-success); }
.mds-badge.warning { background: var(--mds-warning-bg); color: var(--mds-warning); }
.mds-badge.danger  { background: var(--mds-danger-bg); color: var(--mds-danger); }
.mds-badge.info    { background: var(--mds-info-bg); color: var(--mds-info); }
.mds-badge.neutral { background: var(--mds-bg-hover); color: var(--mds-text-secondary); }
.mds-badge.purple  { background: #f3e8ff; color: #6b21a8; }

/* Platform badge'leri */
.mds-badge.tr  { background: #fff7ed; color: #c2410c; }
.mds-badge.hb  { background: #fff7ed; color: #c2410c; }
.mds-badge.n11 { background: #fff7ed; color: #c2410c; }
.mds-badge.cs  { background: #fef2f2; color: #b91c1c; }
.mds-badge.pz  { background: #eff6ff; color: #1d4ed8; }
.mds-badge.amz { background: #fffbeb; color: #b45309; }
.mds-badge.b24 { background: #ecfeff; color: #0e7490; }
.mds-badge.oc  { background: #eff6ff; color: #1d4ed8; }

/* Durum noktasi */
.mds-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.mds-status-dot.on   { background: var(--mds-success); }
.mds-status-dot.sync { background: var(--mds-warning); animation: mds-pulse 1.5s infinite; }
.mds-status-dot.off  { background: var(--mds-danger); }
@keyframes mds-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* ── 7. Stok Gostergesi ── */

.mds-stock-bar {
    width: 100%; height: 6px;
    background: var(--mds-bg-hover);
    border-radius: var(--mds-radius-full);
    overflow: hidden;
}
.mds-stock-fill {
    height: 100%;
    border-radius: var(--mds-radius-full);
    transition: width 0.5s ease;
}
.mds-stock-fill.high { background: var(--mds-success); }
.mds-stock-fill.mid  { background: var(--mds-warning); }
.mds-stock-fill.low  { background: var(--mds-danger); animation: mds-pulse 1.5s infinite; }

/* ── 8. Modal ── */

.mds-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 1000;
    opacity: 0; visibility: hidden;
    transition: all var(--mds-transition);
}
.mds-modal-overlay.open { opacity: 1; visibility: visible; }

.mds-modal {
    background: var(--mds-bg-card);
    border-radius: var(--mds-radius-xl);
    box-shadow: var(--mds-shadow-lg);
    width: 90%; max-height: 85vh;
    display: flex; flex-direction: column;
    transform: translateY(20px) scale(0.95);
    transition: transform var(--mds-transition-slow);
}
.mds-modal-overlay.open .mds-modal { transform: translateY(0) scale(1); }

.mds-modal.sm { max-width: 400px; }
.mds-modal.md { max-width: 560px; }
.mds-modal.lg { max-width: 720px; }
.mds-modal.xl { max-width: 960px; }

.mds-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: var(--mds-space-xl);
    border-bottom: 1px solid var(--mds-border);
}
.mds-modal-title { font-size: var(--mds-fs-md); font-weight: var(--mds-fw-semibold); }
.mds-modal-close {
    width: 32px; height: 32px;
    border-radius: var(--mds-radius-md);
    border: none; background: transparent;
    cursor: pointer; display: flex; align-items: center; justify-content: center;
    color: var(--mds-text-secondary);
    transition: background var(--mds-transition);
}
.mds-modal-close:hover { background: var(--mds-bg-hover); }

.mds-modal-body { padding: var(--mds-space-xl); overflow-y: auto; flex: 1; }
.mds-modal-footer {
    display: flex; justify-content: flex-end; gap: var(--mds-space-sm);
    padding: var(--mds-space-lg) var(--mds-space-xl);
    border-top: 1px solid var(--mds-border);
}

/* ── 9. Toast Bildirimi ── */

.mds-toast-container {
    position: fixed; top: 16px; right: 16px;
    z-index: 2000;
    display: flex; flex-direction: column; gap: 8px;
}
.mds-toast {
    display: flex; align-items: center; gap: var(--mds-space-md);
    padding: var(--mds-space-md) var(--mds-space-lg);
    border-radius: var(--mds-radius-lg);
    background: var(--mds-bg-card);
    box-shadow: var(--mds-shadow-lg);
    border-left: 4px solid;
    font-size: var(--mds-fs-sm);
    min-width: 280px; max-width: 400px;
    animation: mds-toast-in 0.3s ease;
}
.mds-toast.success { border-left-color: var(--mds-success); }
.mds-toast.error   { border-left-color: var(--mds-danger); }
.mds-toast.warning { border-left-color: var(--mds-warning); }
.mds-toast.info    { border-left-color: var(--mds-info); }

.mds-toast-close {
    margin-left: auto;
    background: none; border: none; cursor: pointer;
    color: var(--mds-text-muted); padding: 4px;
}
@keyframes mds-toast-in {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* ── 10. Tab Sistemi ── */

.mds-tabs {
    border-bottom: 1px solid var(--mds-border);
    display: flex; gap: 0;
    margin-bottom: var(--mds-space-2xl);
    overflow-x: auto;
}
.mds-tab {
    display: flex; align-items: center; gap: var(--mds-space-sm);
    padding: var(--mds-space-md) var(--mds-space-xl);
    font-size: var(--mds-fs-sm); font-weight: var(--mds-fw-medium);
    color: var(--mds-text-secondary);
    border: none; background: none; cursor: pointer;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--mds-transition);
}
.mds-tab:hover { color: var(--mds-text-primary); }
.mds-tab.active {
    color: var(--platform-color);
    border-bottom-color: var(--platform-color);
}
.mds-tab i { font-size: 14px; }

.mds-tab-content { display: none; }
.mds-tab-content.active { display: block; }

/* ── 11. Timeline ── */

.mds-timeline {
    display: flex; align-items: flex-start;
    padding: var(--mds-space-lg) 0;
    overflow-x: auto;
}
.mds-timeline-step {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    min-width: 120px; flex: 1;
    text-align: center;
}
.mds-timeline-dot {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: white;
    position: relative; z-index: 1;
    margin-bottom: var(--mds-space-sm);
}
.mds-timeline-step.done .mds-timeline-dot { background: var(--mds-success); }
.mds-timeline-step.active .mds-timeline-dot {
    background: var(--platform-color);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--platform-color) 20%, transparent);
    animation: mds-pulse 2s infinite;
}
.mds-timeline-step.waiting .mds-timeline-dot {
    background: var(--mds-bg-hover);
    color: var(--mds-text-muted);
    border: 2px solid var(--mds-border);
}

.mds-timeline-label {
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-medium);
    color: var(--mds-text-primary);
}
.mds-timeline-date {
    font-size: var(--mds-fs-xs);
    color: var(--mds-text-muted);
}

/* Baglayici cizgi */
.mds-timeline-step:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 16px; left: calc(50% + 20px); right: calc(-50% + 20px);
    height: 2px;
    background: var(--mds-border);
}
.mds-timeline-step.done:not(:last-child)::after { background: var(--mds-success); }

/* ── 12. Platform Secici ── */

.mds-platform-selector {
    display: flex; gap: 6px; flex-wrap: wrap;
    margin-bottom: var(--mds-space-lg);
}
.mds-platform-btn {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 14px;
    border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-medium);
    border: 1px solid var(--mds-border);
    background: var(--mds-bg-card);
    color: var(--mds-text-secondary);
    cursor: pointer;
    transition: all var(--mds-transition);
}
.mds-platform-btn:hover { background: var(--mds-bg-hover); }
.mds-platform-btn.active {
    background: var(--platform-color);
    color: white;
    border-color: var(--platform-color);
}
.mds-platform-btn .mds-status-dot { margin-right: 2px; }

/* ── 13. Form Alanlari ── */

.mds-form-group {
    margin-bottom: var(--mds-space-xl);
}
.mds-form-label {
    display: block;
    font-size: var(--mds-fs-sm);
    font-weight: var(--mds-fw-medium);
    color: var(--mds-text-primary);
    margin-bottom: var(--mds-space-xs);
}
.mds-form-label .required { color: var(--mds-danger); margin-left: 2px; }

.mds-form-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-md);
    font-size: var(--mds-fs-sm);
    background: var(--mds-bg-input);
    color: var(--mds-text-primary);
    transition: border-color var(--mds-transition);
}
.mds-form-input:focus {
    outline: none;
    border-color: var(--platform-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--platform-color) 15%, transparent);
}
.mds-form-input::placeholder { color: var(--mds-text-muted); }

.mds-form-input.error { border-color: var(--mds-danger); }
.mds-form-error {
    font-size: var(--mds-fs-xs);
    color: var(--mds-danger);
    margin-top: var(--mds-space-xs);
}

textarea.mds-form-input { resize: vertical; min-height: 80px; }

/* Toggle switch */
.mds-toggle {
    width: 44px; height: 24px;
    background: var(--mds-border);
    border-radius: 12px;
    position: relative;
    cursor: pointer;
    transition: background var(--mds-transition);
    border: none;
}
.mds-toggle::after {
    content: '';
    width: 18px; height: 18px;
    border-radius: 50%;
    background: white;
    position: absolute; top: 3px; left: 3px;
    transition: transform var(--mds-transition);
    box-shadow: var(--mds-shadow-sm);
}
.mds-toggle.active { background: var(--platform-color); }
.mds-toggle.active::after { transform: translateX(20px); }

/* ── 14. Aksiyon Menu (Satir duzeyinde) ── */

.mds-action-menu { position: relative; }
.mds-action-trigger {
    width: 32px; height: 32px;
    border-radius: var(--mds-radius-md);
    border: none; background: transparent;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    color: var(--mds-text-secondary);
    transition: background var(--mds-transition);
}
.mds-action-trigger:hover { background: var(--mds-bg-hover); }

.mds-action-dropdown {
    position: absolute; right: 0; top: 100%;
    min-width: 180px;
    background: var(--mds-bg-card);
    border: 1px solid var(--mds-border);
    border-radius: var(--mds-radius-lg);
    box-shadow: var(--mds-shadow-lg);
    z-index: 100;
    padding: 4px 0;
    display: none;
}
.mds-action-dropdown.open { display: block; }

.mds-action-item {
    display: flex; align-items: center; gap: var(--mds-space-sm);
    padding: 8px 14px;
    font-size: var(--mds-fs-sm);
    color: var(--mds-text-primary);
    cursor: pointer;
    transition: background var(--mds-transition);
    border: none; background: none; width: 100%; text-align: left;
}
.mds-action-item:hover { background: var(--mds-bg-hover); }
.mds-action-item.danger { color: var(--mds-danger); }
.mds-action-item i { width: 16px; text-align: center; font-size: 13px; }

.mds-action-divider {
    height: 1px; background: var(--mds-border);
    margin: 4px 0;
}

/* ── 15. Platform-Ozgu Component'ler ── */

/* CicekSepeti shelf-life */
.mds-shelf-life {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px;
    border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs);
    font-weight: var(--mds-fw-medium);
}
.mds-shelf-life.fresh     { background: #ecfdf5; color: #059669; }
.mds-shelf-life.warning   { background: #fffbeb; color: #d97706; }
.mds-shelf-life.critical  { background: #fef2f2; color: #dc2626; animation: mds-pulse 1.5s infinite; }
.mds-shelf-life.dried     { background: #f5f5f4; color: #78716c; }
.mds-shelf-life.unlimited { background: #eff6ff; color: #2563eb; }

.mds-cold-chain {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--mds-fs-xs);
    color: #0284c7;
}
.mds-cold-chain i { animation: mds-blink 2s infinite; }
@keyframes mds-blink { 50% { opacity: 0.3; } }

/* Bitrix24 Pipeline Bar */
.mds-pipeline-bar {
    display: flex; height: 52px;
    border-radius: var(--mds-radius-lg);
    overflow: hidden;
    margin-bottom: var(--mds-space-2xl);
    box-shadow: var(--mds-shadow-sm);
}
.mds-pipeline-stage {
    display: flex; flex-direction: column; justify-content: center;
    padding: 6px 14px; color: white;
    font-size: var(--mds-fs-sm); font-weight: var(--mds-fw-medium);
    position: relative; min-width: 80px;
    transition: flex-grow 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mds-pipeline-stage:hover { filter: brightness(1.1); }
.mds-pipeline-stage .stage-count { font-size: 18px; font-weight: var(--mds-fw-bold); }
.mds-pipeline-stage .stage-amount { font-size: var(--mds-fs-xs); opacity: 0.85; }

.mds-pipeline-stage.new       { background: linear-gradient(135deg, #60a5fa, #3b82f6); }
.mds-pipeline-stage.contact   { background: linear-gradient(135deg, #a78bfa, #7c3aed); }
.mds-pipeline-stage.negotiate { background: linear-gradient(135deg, #fbbf24, #d97706); }
.mds-pipeline-stage.proposal  { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.mds-pipeline-stage.won       { background: linear-gradient(135deg, #34d399, #059669); }

/* N11 SOAP ozel */
.mds-soap-status {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: var(--mds-fs-xs);
}
.mds-soap-status.up   { color: var(--mds-success); }
.mds-soap-status.down { color: var(--mds-danger); }

/* Amazon FBA/MFN */
.mds-fulfillment-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: var(--mds-radius-full);
    font-size: var(--mds-fs-xs); font-weight: var(--mds-fw-semibold);
}
.mds-fulfillment-badge.fba { background: #fff7ed; color: #c2410c; }
.mds-fulfillment-badge.mfn { background: #eff6ff; color: #1d4ed8; }

/* ── 14. 3-State: Loading / Empty / Error ── */

.mds-state-loading,
.mds-state-empty,
.mds-state-error {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; padding: var(--mds-space-2xl) var(--mds-space-lg);
    text-align: center; min-height: 200px;
}
.mds-state-loading { color: var(--mds-text-secondary); }
.mds-state-empty   { color: var(--mds-text-muted); }
.mds-state-error   { color: var(--mds-danger, #ef4444); }

.mds-state-icon {
    font-size: 2.5rem; margin-bottom: var(--mds-space-md); opacity: 0.6;
}
.mds-state-title {
    font-size: var(--mds-fs-lg); font-weight: var(--mds-fw-semibold);
    margin-bottom: var(--mds-space-xs);
}
.mds-state-desc {
    font-size: var(--mds-fs-sm); color: var(--mds-text-secondary);
    max-width: 400px;
}
.mds-state-action {
    margin-top: var(--mds-space-md);
}

/* Loading spinner animation */
.mds-spinner {
    width: 32px; height: 32px; border: 3px solid var(--mds-border);
    border-top-color: var(--platform-color, var(--mds-primary, #2563eb));
    border-radius: 50%; animation: mds-spin 0.8s linear infinite;
}
@keyframes mds-spin { to { transform: rotate(360deg); } }