/* MTA Elektrik — includes/ux/assets/d1-tokens.css | F1 birleştirme */

/* ─── parça D1 ─── */
/* ═══════════════════════════════════════════════════════════════════════════
   MTA Tema — D1 Foundation: Design Tokens + Reset + Tipografi

   Bu dosya tüm site CSS'inin temel kaynağı.
   Sonraki D2-D7 + diğer parçalar buradaki var(--mta-*)'ları kullanır.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   CSS VARIABLES (Design Tokens)
   ─────────────────────────────────────────────────────────── */

:root {
    /* RENK — SEMANTIC */
    --mta-color-primary:        #6366f1;
    --mta-color-primary-hover:  #4f46e5;
    --mta-color-primary-light:  #e0e7ff;
    --mta-color-primary-dark:   #3730a3;

    --mta-color-success:        #16a34a;
    --mta-color-success-light:  #dcfce7;
    --mta-color-success-dark:   #166534;

    --mta-color-warn:           #f59e0b;
    --mta-color-warn-light:     #fef3c7;
    --mta-color-warn-dark:      #92400e;

    --mta-color-danger:         #dc2626;
    --mta-color-danger-light:   #fee2e2;
    --mta-color-danger-dark:    #991b1b;

    --mta-color-info:           #0ea5e9;
    --mta-color-info-light:     #e0f2fe;
    --mta-color-info-dark:      #075985;

    /* İNK (yazı) HİYERARŞİSİ */
    --mta-ink-strong:    #0f172a;
    --mta-ink-base:      #1e293b;
    --mta-ink-muted:     #475569;
    --mta-ink-soft:      #64748b;
    --mta-ink-faint:     #94a3b8;
    --mta-ink-inverse:   #ffffff;

    /* YÜZEY */
    --mta-surface-base:    #ffffff;
    --mta-surface-raised:  #f8fafc;
    --mta-surface-sunken:  #f1f5f9;
    --mta-surface-overlay: rgba(15, 23, 42, 0.6);

    --mta-border-soft:     #e2e8f0;
    --mta-border-strong:   #cbd5e1;
    --mta-border-focus:    var(--mta-color-primary);

    /* TİPOGRAFİ — FAMILY */
    --mta-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --mta-font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
    --mta-font-display: var(--mta-font-sans);

    /* TİPOGRAFİ — SIZE */
    --mta-text-xs:   0.75rem;     /* 12px */
    --mta-text-sm:   0.875rem;    /* 14px */
    --mta-text-base: 1rem;        /* 16px */
    --mta-text-lg:   1.125rem;    /* 18px */
    --mta-text-xl:   1.25rem;     /* 20px */
    --mta-text-2xl:  1.5rem;      /* 24px */
    --mta-text-3xl:  1.875rem;    /* 30px */
    --mta-text-4xl:  2.25rem;     /* 36px */
    --mta-text-5xl:  3rem;        /* 48px */

    /* TİPOGRAFİ — WEIGHT */
    --mta-weight-normal:   400;
    --mta-weight-medium:   500;
    --mta-weight-semibold: 600;
    --mta-weight-bold:     700;
    --mta-weight-black:    800;

    /* TİPOGRAFİ — LINE HEIGHT */
    --mta-leading-tight:   1.25;
    --mta-leading-snug:    1.375;
    --mta-leading-normal:  1.5;
    --mta-leading-relaxed: 1.625;
    --mta-leading-loose:   1.75;

    /* SPACING — 8px GRID */
    --mta-space-0:  0;
    --mta-space-1:  4px;
    --mta-space-2:  8px;
    --mta-space-3:  12px;
    --mta-space-4:  16px;
    --mta-space-5:  24px;
    --mta-space-6:  32px;
    --mta-space-7:  48px;
    --mta-space-8:  64px;
    --mta-space-9:  96px;
    --mta-space-10: 128px;

    /* RADIUS */
    --mta-radius-none: 0;
    --mta-radius-sm:   4px;
    --mta-radius-md:   8px;
    --mta-radius-lg:   12px;
    --mta-radius-xl:   16px;
    --mta-radius-2xl:  20px;
    --mta-radius-3xl:  24px;
    --mta-radius-pill: 999px;

    /* SHADOW */
    --mta-shadow-none: none;
    --mta-shadow-sm:   0 1px 2px rgba(0, 0, 0, 0.05);
    --mta-shadow-md:   0 4px 12px rgba(0, 0, 0, 0.07);
    --mta-shadow-lg:   0 12px 30px rgba(0, 0, 0, 0.1);
    --mta-shadow-xl:   0 24px 50px rgba(0, 0, 0, 0.15);
    --mta-shadow-2xl:  0 35px 80px rgba(0, 0, 0, 0.2);

    /* TRANSITION */
    --mta-transition-fast:  150ms cubic-bezier(0.4, 0, 0.2, 1);
    --mta-transition-base:  250ms cubic-bezier(0.4, 0, 0.2, 1);
    --mta-transition-slow:  400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* Z-INDEX HIERARCHY (Madde 4 — çakışma önleyici) */
    --mta-z-base:        0;
    --mta-z-raised:      10;
    --mta-z-sticky:      100;
    --mta-z-sticky-high: 200;
    --mta-z-dropdown:    500;
    --mta-z-overlay:     1000;
    --mta-z-modal:       1100;
    --mta-z-toast:       9999;
    --mta-z-ai-bubble:   99999;

    /* BREAKPOINTS — REFERANS (CSS'te @media kullanılır) */
    /* sm: 640px, md: 768px, lg: 1024px, xl: 1280px, 2xl: 1536px */
}

/* ───────────────────────────────────────────────────────────
   BROWSER RESET (modern, minimal)
   ─────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    text-size-adjust: 100%;
}

body.mta-themed {
    margin: 0;
    font-family: var(--mta-font-sans);
    font-size: var(--mta-text-base);
    line-height: var(--mta-leading-normal);
    color: var(--mta-ink-base);
    background: var(--mta-surface-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

body.mta-themed img,
body.mta-themed picture,
body.mta-themed video,
body.mta-themed svg,
body.mta-themed canvas {
    max-width: 100%;
    height: auto;
    display: block;
}

body.mta-themed input,
body.mta-themed button,
body.mta-themed textarea,
body.mta-themed select {
    font: inherit;
    color: inherit;
}

body.mta-themed button {
    cursor: pointer;
}

body.mta-themed a {
    color: var(--mta-color-primary);
    text-decoration: none;
    transition: color var(--mta-transition-fast);
}

body.mta-themed a:hover {
    color: var(--mta-color-primary-hover);
}

/* ───────────────────────────────────────────────────────────
   TİPOGRAFİ SİSTEMİ
   ─────────────────────────────────────────────────────────── */

body.mta-themed h1,
body.mta-themed h2,
body.mta-themed h3,
body.mta-themed h4,
body.mta-themed h5,
body.mta-themed h6 {
    margin: 0 0 var(--mta-space-4);
    font-family: var(--mta-font-display);
    font-weight: var(--mta-weight-bold);
    line-height: var(--mta-leading-tight);
    color: var(--mta-ink-strong);
}

body.mta-themed h1 { font-size: var(--mta-text-4xl); font-weight: var(--mta-weight-black); }
body.mta-themed h2 { font-size: var(--mta-text-3xl); }
body.mta-themed h3 { font-size: var(--mta-text-2xl); }
body.mta-themed h4 { font-size: var(--mta-text-xl); }
body.mta-themed h5 { font-size: var(--mta-text-lg); }
body.mta-themed h6 { font-size: var(--mta-text-base); }

body.mta-themed p {
    margin: 0 0 var(--mta-space-4);
    line-height: var(--mta-leading-relaxed);
}

body.mta-themed small {
    font-size: var(--mta-text-sm);
    color: var(--mta-ink-muted);
}

body.mta-themed code,
body.mta-themed kbd {
    font-family: var(--mta-font-mono);
    font-size: 0.9em;
    background: var(--mta-surface-sunken);
    padding: 2px 5px;
    border-radius: var(--mta-radius-sm);
    color: var(--mta-color-primary-dark);
}

body.mta-themed pre {
    font-family: var(--mta-font-mono);
    background: var(--mta-surface-sunken);
    padding: var(--mta-space-4);
    border-radius: var(--mta-radius-md);
    overflow-x: auto;
    line-height: var(--mta-leading-normal);
}

body.mta-themed strong,
body.mta-themed b {
    font-weight: var(--mta-weight-bold);
    color: var(--mta-ink-strong);
}

body.mta-themed em,
body.mta-themed i {
    font-style: italic;
}

body.mta-themed ul,
body.mta-themed ol {
    margin: 0 0 var(--mta-space-4);
    padding-left: var(--mta-space-5);
    line-height: var(--mta-leading-relaxed);
}

body.mta-themed li + li {
    margin-top: var(--mta-space-1);
}

body.mta-themed hr {
    border: 0;
    border-top: 1px solid var(--mta-border-soft);
    margin: var(--mta-space-5) 0;
}

body.mta-themed blockquote {
    margin: var(--mta-space-5) 0;
    padding: var(--mta-space-3) var(--mta-space-4);
    border-left: 4px solid var(--mta-color-primary);
    background: var(--mta-surface-sunken);
    color: var(--mta-ink-muted);
    font-style: italic;
}

/* ───────────────────────────────────────────────────────────
   FOCUS / ACCESSIBILITY
   ─────────────────────────────────────────────────────────── */

body.mta-themed :focus-visible {
    outline: 2px solid var(--mta-color-primary);
    outline-offset: 2px;
}

body.mta-themed button:focus,
body.mta-themed input:focus,
body.mta-themed select:focus,
body.mta-themed textarea:focus,
body.mta-themed a:focus {
    outline: none;
}

body.mta-themed button:focus-visible,
body.mta-themed input:focus-visible,
body.mta-themed select:focus-visible,
body.mta-themed textarea:focus-visible {
    outline: 2px solid var(--mta-color-primary);
    outline-offset: 2px;
}

/* SR-only — screen reader için gizle ama erişilebilir */
.mta-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0,0,0,0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ───────────────────────────────────────────────────────────
   ADMIN AREA UYGULAMA (sadece MTA admin sayfaları)
   ─────────────────────────────────────────────────────────── */

.mta-admin-page,
.mta-themed-admin {
    font-family: var(--mta-font-sans);
    color: var(--mta-ink-base);
}

/* ───────────────────────────────────────────────────────────
   PRINT STİL
   ─────────────────────────────────────────────────────────── */

@media print {
    body.mta-themed {
        font-size: 11pt;
        background: #ffffff;
        color: #000000;
    }
    .mta-no-print { display: none !important; }
}

/* ───────────────────────────────────────────────────────────
   PREFERS-REDUCED-MOTION (accessibility)
   ─────────────────────────────────────────────────────────── */

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