/* ════════════════════════════════════════════════════════════════
   MesTech Design System — Core Tokens
   Version: 1.0.0
   DALGA 7.7.9 — DEV 1
   ════════════════════════════════════════════════════════════════ */

/* ── 1. CSS Custom Properties (Token Sistemi) ── */

:root {
    /* ── Platform ── */
    --platform-color: #2855AC;
    --platform-gradient-start: #4A7BD4;
    --platform-gradient-end: #2855AC;
    --platform-shadow: rgba(40, 85, 172, 0.3);

    /* ── Tipografi ── */
    --mds-font: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
    --mds-font-mono: 'Cascadia Code', 'Fira Code', monospace;
    --mds-fs-xs: 11px;
    --mds-fs-sm: 12px;
    --mds-fs-base: 14px;
    --mds-fs-md: 16px;
    --mds-fs-lg: 20px;
    --mds-fs-xl: 24px;
    --mds-fs-2xl: 32px;
    --mds-fw-normal: 400;
    --mds-fw-medium: 500;
    --mds-fw-semibold: 600;
    --mds-fw-bold: 700;

    /* ── Renkler (Light Tema) ── */
    --mds-bg-primary: #f0f2f5;
    --mds-bg-card: #ffffff;
    --mds-bg-hover: #f8fafc;
    --mds-bg-active: #eef2ff;
    --mds-bg-input: #ffffff;

    --mds-text-primary: #1e293b;
    --mds-text-secondary: #64748b;
    --mds-text-muted: #94a3b8;
    --mds-text-inverse: #ffffff;

    --mds-border: #e2e8f0;
    --mds-border-hover: #cbd5e1;
    --mds-border-focus: var(--platform-color);

    /* ── Semantik Renkler ── */
    --mds-success: #059669;
    --mds-success-bg: #ecfdf5;
    --mds-warning: #d97706;
    --mds-warning-bg: #fffbeb;
    --mds-danger: #dc2626;
    --mds-danger-bg: #fef2f2;
    --mds-info: #2563eb;
    --mds-info-bg: #eff6ff;

    /* ── Spacing ── */
    --mds-space-xs: 4px;
    --mds-space-sm: 8px;
    --mds-space-md: 12px;
    --mds-space-lg: 16px;
    --mds-space-xl: 20px;
    --mds-space-2xl: 24px;
    --mds-space-3xl: 32px;

    /* ── Border Radius ── */
    --mds-radius-sm: 4px;
    --mds-radius-md: 8px;
    --mds-radius-lg: 12px;
    --mds-radius-xl: 16px;
    --mds-radius-full: 9999px;

    /* ── Golge ── */
    --mds-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --mds-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --mds-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

    /* ── Transition ── */
    --mds-transition: 0.2s ease;
    --mds-transition-slow: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 2. Platform Renk Override'lari ── */

[data-platform="trendyol"] {
    --platform-color: #FF6600;
    --platform-gradient-start: #ff8533;
    --platform-gradient-end: #e65c00;
    --platform-shadow: rgba(230, 92, 0, 0.3);
}
[data-platform="hepsiburada"] {
    --platform-color: #ff6000;
    --platform-gradient-start: #ff7a33;
    --platform-gradient-end: #e55a00;
    --platform-shadow: rgba(229, 90, 0, 0.3);
}
[data-platform="n11"] {
    --platform-color: #FF6600;
    --platform-gradient-start: #ff8533;
    --platform-gradient-end: #e65c00;
    --platform-shadow: rgba(230, 92, 0, 0.3);
}
[data-platform="ciceksepeti"] {
    --platform-color: #e53935;
    --platform-gradient-start: #ef5350;
    --platform-gradient-end: #c62828;
    --platform-shadow: rgba(198, 40, 40, 0.3);
}
[data-platform="pazarama"] {
    --platform-color: #0095d9;
    --platform-gradient-start: #29b6f6;
    --platform-gradient-end: #0277bd;
    --platform-shadow: rgba(2, 119, 189, 0.3);
}
[data-platform="amazon"] {
    --platform-color: #FF9900;
    --platform-gradient-start: #ffb74d;
    --platform-gradient-end: #e65100;
    --platform-shadow: rgba(230, 81, 0, 0.3);
}
[data-platform="bitrix24"] {
    --platform-color: #2FC7F7;
    --platform-gradient-start: #4dd0e1;
    --platform-gradient-end: #00838f;
    --platform-shadow: rgba(0, 131, 143, 0.3);
}
[data-platform="opencart"] {
    --platform-color: #23ACE3;
    --platform-gradient-start: #4fc3f7;
    --platform-gradient-end: #0277bd;
    --platform-shadow: rgba(2, 119, 189, 0.3);
}
[data-platform="mestech"] {
    --platform-color: #2855AC;
    --platform-gradient-start: #4A7BD4;
    --platform-gradient-end: #2855AC;
    --platform-shadow: rgba(40, 85, 172, 0.3);
}

/* ── 3. CSS Reset (Minimal — sadece .mds-page icinde) ── */

.mds-page *, .mds-page *::before, .mds-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.mds-page {
    font-family: var(--mds-font);
    font-size: var(--mds-fs-base);
    color: var(--mds-text-primary);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

/* ── 4. Tipografi Siniflari ── */

.mds-h1 { font-size: var(--mds-fs-2xl); font-weight: var(--mds-fw-bold); line-height: 1.2; }
.mds-h2 { font-size: var(--mds-fs-xl); font-weight: var(--mds-fw-semibold); line-height: 1.3; }
.mds-h3 { font-size: var(--mds-fs-lg); font-weight: var(--mds-fw-semibold); line-height: 1.4; }
.mds-body { font-size: var(--mds-fs-base); font-weight: var(--mds-fw-normal); }
.mds-small { font-size: var(--mds-fs-sm); color: var(--mds-text-secondary); }
.mds-muted { font-size: var(--mds-fs-sm); color: var(--mds-text-muted); }
.mds-mono { font-family: var(--mds-font-mono); font-size: var(--mds-fs-sm); }

/* ── 5. icon-3d Sistemi ── */

.mds-icon-3d {
    width: 48px; height: 48px;
    border-radius: var(--mds-radius-lg);
    display: flex; align-items: center; justify-content: center;
    font-size: 20px; color: white;
    position: relative; flex-shrink: 0;
    transition: transform var(--mds-transition);
}
.mds-icon-3d::before {
    content: '';
    position: absolute; inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.3) 0%, transparent 50%);
    pointer-events: none;
}
.mds-icon-3d:hover { transform: translateY(-2px); }

/* icon-3d renk varyantlari */
.mds-icon-3d.blue {
    background: linear-gradient(135deg, #42a5f5, #1565c0);
    box-shadow: 0 4px 12px rgba(21, 101, 192, 0.35);
}
.mds-icon-3d.green {
    background: linear-gradient(135deg, #66bb6a, #2e7d32);
    box-shadow: 0 4px 12px rgba(46, 125, 50, 0.35);
}
.mds-icon-3d.amber {
    background: linear-gradient(135deg, #ffca28, #f57f17);
    box-shadow: 0 4px 12px rgba(245, 127, 23, 0.35);
}
.mds-icon-3d.red {
    background: linear-gradient(135deg, #ef5350, #c62828);
    box-shadow: 0 4px 12px rgba(198, 40, 40, 0.35);
}
.mds-icon-3d.purple {
    background: linear-gradient(135deg, #ab47bc, #6a1b9a);
    box-shadow: 0 4px 12px rgba(106, 27, 154, 0.35);
}
.mds-icon-3d.cyan {
    background: linear-gradient(135deg, #26c6da, #00838f);
    box-shadow: 0 4px 12px rgba(0, 131, 143, 0.35);
}
.mds-icon-3d.orange {
    background: linear-gradient(135deg, #ffa726, #e65100);
    box-shadow: 0 4px 12px rgba(230, 81, 0, 0.35);
}
.mds-icon-3d.pink {
    background: linear-gradient(135deg, #ec407a, #ad1457);
    box-shadow: 0 4px 12px rgba(173, 20, 87, 0.35);
}
.mds-icon-3d.platform {
    background: linear-gradient(135deg, var(--platform-gradient-start), var(--platform-gradient-end));
    box-shadow: 0 4px 12px var(--platform-shadow);
}

/* ── 6. Buton Sistemi ── */

.mds-btn {
    display: inline-flex; align-items: center; gap: var(--mds-space-sm);
    padding: 8px 16px;
    border-radius: var(--mds-radius-md);
    font-size: var(--mds-fs-sm); font-weight: var(--mds-fw-medium);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--mds-transition);
    white-space: nowrap;
    line-height: 1.4;
}
.mds-btn i { font-size: 13px; }

.mds-btn.primary {
    background: var(--platform-color);
    color: white;
    box-shadow: 0 1px 3px var(--platform-shadow);
}
.mds-btn.primary:hover {
    filter: brightness(1.1);
    box-shadow: 0 3px 8px var(--platform-shadow);
}

.mds-btn.secondary {
    background: var(--mds-bg-card);
    color: var(--mds-text-primary);
    border-color: var(--mds-border);
}
.mds-btn.secondary:hover {
    background: var(--mds-bg-hover);
    border-color: var(--mds-border-hover);
}

.mds-btn.danger {
    background: var(--mds-danger);
    color: white;
}
.mds-btn.danger:hover { filter: brightness(1.1); }

.mds-btn.ghost {
    background: transparent;
    color: var(--mds-text-secondary);
}
.mds-btn.ghost:hover { background: var(--mds-bg-hover); }

.mds-btn.sm { padding: 4px 10px; font-size: var(--mds-fs-xs); }
.mds-btn.lg { padding: 10px 24px; font-size: var(--mds-fs-base); }

.mds-btn:disabled {
    opacity: 0.5; cursor: not-allowed; pointer-events: none;
}

.mds-btn-group { display: flex; gap: var(--mds-space-sm); flex-wrap: wrap; }