/*

 * GlomaxGPT — Merkezi Tema Token Sistemi v4 — AURORA EDITION

 * ============================================================

 * Aurora Design System — Modern minimal AI arayüzü

 * Dark: Gerçek siyah (#0d0d0d) + İndigo/Violet aksan

 * Light: Temiz beyaz + Yumuşak gri + İndigo aksan

 *

 * Bu dosya TÜM renk kararlarının tek kaynağıdır.

 * Diğer CSS dosyaları bu token'ları kullanır, üzerine yazmaz.

 * Yükleme sırası: Bu dosya HER ZAMAN ilk sırada olmalıdır.

 * ============================================================

 */

/* ============================================================

   DARK TEMA (varsayılan + [data-theme="dark"])

   Derin uzay siyahı, nebula moru, yıldız ışığı

   Koyu lacivert-siyah arka plan, cyan/mor aksan

============================================================ */

:root,

[data-theme="dark"] {

  /* ── Arka planlar — Aurora Dark ── */

  --bg-main:         #111111;   /* Ana arka plan — derin siyah */

  --bg-sidebar:      #1a1a1a;   /* Sidebar — koyu gri */

  --bg-surface:      #1a1a1a;   /* Kart, panel */

  --bg-elevated:     #222222;   /* Modal, dropdown */

  --bg-input:        #1e1e1e;   /* Input alanı */

  --bg-hover:        #222222;

  --bg-active:       #2a2a2a;

  /* ── Metin — Aurora Dark ── */

  --text-primary:    #f0f0f0;   /* Ana metin — kırık beyaz */

  --text-secondary:  #999999;   /* İkincil — orta gri */

  --text-muted:      #555555;   /* Soluk — koyu gri */

  --text-disabled:   #555555;

  --text-placeholder:#555555;

  /* ── İkonlar ── */

  --icon-default:    #999999;

  --icon-active:     #f0f0f0;

  --icon-muted:      #555555;

  /* ── Kenarlıklar ── */

  --border-subtle:   #2e2e2e;

  --border-default:  #2e2e2e;

  --border-strong:   #444444;

  --focus-ring:      #d4d4d4;

  /* ── Primary aksiyon ── */

  --primary-bg:      linear-gradient(135deg, #d4d4d4 0%, #f0f0f0 100%);

  --primary-bg-solid:#d4d4d4;

  --primary-text:    #111111;

  --primary-hover:   linear-gradient(135deg, #bbbbbb 0%, #dddddd 100%);

  /* ── Sidebar özel ── */

  --sidebar-hover:   #222222;

  --sidebar-active:  #2e2e2e;

  --sidebar-border:  #2e2e2e;

  /* ── Durum renkleri ── */

  --color-success:   #10b981;

  --color-error:     #ef4444;

  --color-warning:   #f59e0b;

  --color-info:      #3b82f6;

  --color-success-bg:rgba(16,185,129,0.10);

  --color-error-bg:  rgba(239,68,68,0.10);

  --color-warning-bg:rgba(245,158,11,0.10);

  --color-info-bg:   rgba(59,130,246,0.10);

  /* ── Gölgeler ── */

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.40);

  --shadow-md:       0 4px 16px rgba(0,0,0,0.50);

  --shadow-lg:       0 8px 32px rgba(0,0,0,0.60);

  --shadow-xl:       0 16px 64px rgba(0,0,0,0.70);

  /* ── Glow efektleri ── */

  --glow-blue:       0 0 20px rgba(99,102,241,0.30);

  --glow-purple:     0 0 20px rgba(139,92,246,0.30);

  --glow-cyan:       0 0 20px rgba(6,182,212,0.30);

  --glow-strong:     0 0 30px rgba(99,102,241,0.40);

  /* ── Kod blokları ── */

  --code-bg:         #1a1a1a;

  --code-header-bg:  #222222;

  --code-border:     #2e2e2e;

  --code-text:       #d4d4d4;

  /* ── Kullanıcı mesaj balonu ── */

  --user-bubble-bg:  #222222;

  --user-bubble-border: #333333;

  /* ── Glass efekti ── */

  --glass-bg:        rgba(17,17,17,0.92);

  --glass-border:    #2e2e2e;

  /* ── Accent (vurgu rengi) ── */

  --accent:          #d4d4d4;   /* Açık gri — vurgu */

  --accent-purple:   #d4d4d4;   /* Aynı gri paleti */

  --accent-soft:     rgba(212,212,212,0.10);

  --accent-grad:     linear-gradient(135deg, #d4d4d4 0%, #f0f0f0 100%);

  /* ── Tipografi ── */

  --font-sans:       'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --font-mono:       'JetBrains Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace;

  /* ═══════════════════════════════════════════════════════════

     GERİYE DÖNÜK UYUMLULUK — v1/v2/v3 token isimleri

   ═══════════════════════════════════════════════════════════ */

  --bg:              #111111;

  --bg2:             #1a1a1a;

  --main-bg:         #111111;

  --card:            #1a1a1a;

  --card2:           #222222;

  --sidebar-bg:      #1a1a1a;

  --surface:         #1a1a1a;

  --surface2:        #222222;

  --surface3:        #2a2a2a;

  --input-bg:        #1e1e1e;

  --border:          #2e2e2e;

  --border2:         #444444;

  --border-control:  #333333;

  --hover:           #222222;

  --text:            #f0f0f0;

  --text1:           #f0f0f0;

  --text2:           #999999;

  --text3:           #555555;

  --text4:           #444444;

  --text-secondary:  #999999;

  --accent-color:    #d4d4d4;

  --bg-elevated:     #222222;

  --accent2:         #d4d4d4;

  --accent-soft:     rgba(212,212,212,0.10);

  --accent-grad:     linear-gradient(135deg, #d4d4d4 0%, #f0f0f0 100%);

  --accent-rgb:      212,212,212;

  --accent2-rgb:     240,240,240;

  --code-header:     #222222;

  /* v3/v4 tokens */

  --v3-bg:            #111111;

  --v3-sidebar-bg:    #1a1a1a;

  --v3-surface:       #1a1a1a;

  --v3-surface2:      #222222;

  --v3-input-bg:      #1e1e1e;

  --v3-border:        #2e2e2e;

  --v3-text:          #f0f0f0;

  --v3-text2:         #999999;

  --v3-text3:         #555555;

  --v3-accent:        #d4d4d4;

  --v3-hover:         #222222;

  --v3-sidebar-hover: #222222;

  --v3-sidebar-active:#2e2e2e;

  --v3-user-bubble:   #222222;

  --v3-border2:       #444444;

  --v3-text4:         #444444;

  --v3-card:          #1a1a1a;

  --v3-card2:         #222222;

}

/* ============================================================

   LIGHT TEMA — [data-theme="light"]

   Beyaz & Açık Gri — Temiz minimal AI arayüzü

============================================================ */

[data-theme="light"] {

  /* ── Arka planlar — Beyaz & Açık Gri ── */

  --bg-main:         #ffffff;

  --bg-sidebar:      #f5f5f5;

  --bg-surface:      #f5f5f5;

  --bg-elevated:     #ebebeb;

  --bg-input:        #f9f9f9;

  --bg-hover:        #ebebeb;

  --bg-active:       #e0e0e0;

  /* ── Metin ── */

  --text-primary:    #1a1a1a;

  --text-secondary:  #666666;

  --text-muted:      #999999;

  --text-disabled:   #999999;

  --text-placeholder:#999999;

  /* ── İkonlar ── */

  --icon-default:    #666666;

  --icon-active:     #1a1a1a;

  --icon-muted:      #999999;

  /* ── Kenarlıklar ── */

  --border-subtle:   #e8e8e8;

  --border-default:  #e0e0e0;

  --border-strong:   #cccccc;

  --focus-ring:      #333333;

  /* ── Primary aksiyon ── */

  --primary-bg:      linear-gradient(135deg, #333333 0%, #111111 100%);

  --primary-bg-solid:#333333;

  --primary-text:    #ffffff;

  --primary-hover:   linear-gradient(135deg, #111111 0%, #000000 100%);

  /* ── Sidebar özel ── */

  --sidebar-hover:   #ebebeb;

  --sidebar-active:  #e0e0e0;

  --sidebar-border:  #e8e8e8;

  /* ── Durum renkleri ── */

  --color-success:   #059669;

  --color-error:     #dc2626;

  --color-warning:   #d97706;

  --color-info:      #2563eb;

  --color-success-bg:rgba(5,150,105,0.08);

  --color-error-bg:  rgba(220,38,38,0.08);

  --color-warning-bg:rgba(217,119,6,0.08);

  --color-info-bg:   rgba(37,99,235,0.08);

  /* ── Gölgeler ── */

  --shadow-sm:       0 1px 3px rgba(0,0,0,0.08);

  --shadow-md:       0 4px 16px rgba(0,0,0,0.10);

  --shadow-lg:       0 8px 32px rgba(0,0,0,0.12);

  --shadow-xl:       0 16px 48px rgba(0,0,0,0.14);

  /* ── Glow ── */

  --glow-blue:       0 0 20px rgba(99,102,241,0.15);

  --glow-purple:     0 0 20px rgba(139,92,246,0.15);

  --glow-cyan:       0 0 20px rgba(6,182,212,0.12);

  --glow-strong:     0 0 24px rgba(99,102,241,0.20);

  /* ── Kod blokları ── */

  --code-bg:         #f5f5f5;

  --code-header-bg:  #ebebeb;

  --code-border:     #e0e0e0;

  --code-text:       #333333;

  /* ── Kullanıcı mesaj balonu ── */

  --user-bubble-bg:  #ebebeb;

  --user-bubble-border: #e0e0e0;

  /* ── Glass efekti ── */

  --glass-bg:        rgba(255,255,255,0.92);

  --glass-border:    #e0e0e0;

  /* ── Accent ── */

  --accent:          #333333;

  --accent-purple:   #333333;

  --accent-soft:     rgba(51,51,51,0.08);

  --accent-grad:     linear-gradient(135deg, #333333 0%, #111111 100%);

  /* ═══════════════════════════════════════════════════════════

     GERİYE DÖNÜK UYUMLULUK

  ═══════════════════════════════════════════════════════════ */

  --bg:              #ffffff;

  --bg2:             #f5f5f5;

  --main-bg:         #ffffff;

  --card:            #f5f5f5;

  --card2:           #ebebeb;

  --sidebar-bg:      #f5f5f5;

  --surface:         #f5f5f5;

  --surface2:        #ebebeb;

  --surface3:        #e0e0e0;

  --input-bg:        #f9f9f9;

  --border:          #e0e0e0;

  --border2:         #cccccc;

  --border-control:  #e0e0e0;

  --hover:           #ebebeb;

  --text:            #1a1a1a;

  --text1:           #1a1a1a;

  --text2:           #666666;

  --text3:           #999999;

  --text4:           #bbbbbb;

  --text-secondary:  #666666;

  --accent-color:    #333333;

  --bg-elevated:     #ebebeb;

  --accent2:         #333333;

  --accent-soft:     rgba(51,51,51,0.08);

  --accent-grad:     linear-gradient(135deg, #333333 0%, #111111 100%);

  --accent-rgb:      51,51,51;

  --accent2-rgb:     17,17,17;

  --code-header:     #ebebeb;

  --border-subtle:   #e8e8e8;

  /* v3/v4 tokens */

  --v3-bg:            #ffffff;

  --v3-sidebar-bg:    #f5f5f5;

  --v3-surface:       #f5f5f5;

  --v3-surface2:      #ebebeb;

  --v3-input-bg:      #f9f9f9;

  --v3-border:        #e0e0e0;

  --v3-text:          #1a1a1a;

  --v3-text2:         #666666;

  --v3-text3:         #999999;

  --v3-accent:        #333333;

  --v3-hover:         #ebebeb;

  --v3-sidebar-hover: #ebebeb;

  --v3-sidebar-active:#e0e0e0;

  --v3-user-bubble:   #ebebeb;

  --v3-border2:       #cccccc;

  --v3-text4:         #bbbbbb;

  --v3-card:          #f5f5f5;

  --v3-card2:         #ebebeb;

}

/* ============================================================

   PAYLAŞILAN YAPISAL STILLER — Tema bağımsız

============================================================ */

/* Layout değişkenleri — hiçbir zaman tema ile değişmez */

:root {

  --sidebar-width:   260px;

  --sidebar-collapsed-width: 60px;

  --topbar-height:   60px;

  --input-radius:    20px;

  --msg-radius:      18px;

  --card-radius:     12px;

  --radius:          12px;

  --radius-sm:       8px;

  --radius-xs:       6px;

  --anim-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);

  --anim-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

  --anim-fast:       cubic-bezier(0.2, 0, 0, 1);

  --ease-smooth:     cubic-bezier(0.4, 0, 0.2, 1);

  --font-sans:       'DM Sans', 'Inter', ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;

  --font-mono:       'DM Mono', ui-monospace, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;

  --success-rgb:     0,229,160;

  --error-rgb:       255,77,106;

  --warning-rgb:     255,184,48;

}

/* ── Temel body stilleri ── */

html, body {

  background-color: var(--bg-main) !important;

  color:            var(--text-primary) !important;

  font-family:      var(--font-sans) !important;

  font-size:        16px;

  line-height:      1.6;

  -webkit-font-smoothing:  antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering:   optimizeLegibility;

}

/* ── Link stilleri ── */

a { color: inherit; text-decoration: none; }

a:hover { opacity: 0.85; }

a:link, a:visited { color: inherit; }

/* ── Focus halkası ── */

:focus-visible {

  outline:        2px solid var(--focus-ring);

  outline-offset: 2px;

  border-radius:  3px;

}

/* ── Tema geçiş animasyonu ── */

*, *::before, *::after {

  transition-property:      background-color, border-color, color, box-shadow;

  transition-duration:      0.15s;

  transition-timing-function: var(--anim-smooth);

}

.no-transition,

.no-transition * { transition: none !important; }

/* ── Durum renk sınıfları ── */

.status-error   { color: var(--color-error); }

.status-success { color: var(--color-success); }

.status-warning { color: var(--color-warning); }

.status-info    { color: var(--color-info); }

/* ── Ayırıcı çizgi ── */

.gx-divider {

  border:     none;

  border-top: 1px solid var(--border-subtle);

  margin:     0;

}

/* ── İkon düğmesi (temel stil) ── */

.gx-icon-btn {

  display:         inline-flex;

  align-items:     center;

  justify-content: center;

  background:      transparent;

  border:          none;

  cursor:          pointer;

  color:           var(--icon-default);

  border-radius:   6px;

  padding:         6px;

  transition:      background 0.15s, color 0.15s;

  min-width:       36px;

  min-height:      36px;

}

.gx-icon-btn:hover,

.gx-icon-btn:focus-visible {

  background: var(--bg-hover);

  color:      var(--icon-active);

}

@media (pointer: coarse) {

  .gx-icon-btn { min-width: 44px; min-height: 44px; }

}

/* ── Primary buton (temel stil) ── */

.gx-btn-primary {

  background:    var(--primary-bg-solid);

  color:         var(--primary-text);

  border:        none;

  border-radius: 8px;

  padding:       8px 16px;

  font-size:     14px;

  font-weight:   500;

  cursor:        pointer;

  transition:    opacity 0.15s, transform 0.15s, box-shadow 0.15s;

}

.gx-btn-primary:hover  {

  opacity: 0.92;

  transform: translateY(-1px);

  box-shadow: var(--glow-blue);

}

.gx-btn-primary:active { opacity: 0.75; transform: none; }

/* ── Scrollbar ── */

* {

  scrollbar-width: thin;

  scrollbar-color: var(--border-default) transparent;

}

::-webkit-scrollbar { width: 5px; height: 5px; }

::-webkit-scrollbar-track { background: transparent; }

::-webkit-scrollbar-thumb {

  background:    var(--border-default);

  border-radius: 3px;

}

::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* ── Hareket azaltma ── */

@media (prefers-reduced-motion: reduce) {

  *, *::before, *::after {

    animation-duration:  0.01ms !important;

    transition-duration: 0.01ms !important;

  }

}

/* ── prefers-color-scheme fallback (JS theme yoksa) ── */

@media (prefers-color-scheme: dark) {

  :root:not([data-theme="light"]) {

    --bg-main:         #111111;

    --bg-sidebar:      #1a1a1a;

    --bg-surface:      #1a1a1a;

    --bg-elevated:     #222222;

    --bg-input:        #1e1e1e;

    --bg-hover:        #222222;

    --bg-active:       #2a2a2a;

    --text-primary:    #f0f0f0;

    --text-secondary:  #999999;

    --text-muted:      #555555;

    --text-disabled:   #555555;

    --primary-bg:      linear-gradient(135deg, #d4d4d4 0%, #f0f0f0 100%);

    --primary-bg-solid:#d4d4d4;

    --primary-text:    #111111;

    --border-subtle:   #2e2e2e;

    --border-default:  #2e2e2e;

    --border-strong:   #444444;

    --sidebar-hover:   #222222;

    --sidebar-active:  #2e2e2e;

    --accent:          #d4d4d4;

    --accent-soft:     rgba(212,212,212,0.10);

    --bg:              #111111;

    --surface:         #1a1a1a;

    --surface2:        #222222;

    --surface3:        #2a2a2a;

    --sidebar-bg:      #1a1a1a;

    --border:          #2e2e2e;

    --border2:         #444444;

    --text:            #f0f0f0;

    --text2:           #999999;

    --text3:           #555555;

    --text4:           #444444;

    --input-bg:        #1e1e1e;

    --code-bg:         #1a1a1a;

    --code-header:     #222222;

    --v3-bg:           #111111;

    --v3-sidebar-bg:   #1a1a1a;

    --v3-surface:      #1a1a1a;

    --v3-surface2:     #222222;

    --v3-input-bg:     #1e1e1e;

    --v3-border:       #2e2e2e;

    --v3-text:         #f0f0f0;

    --v3-text2:        #999999;

    --v3-text3:        #555555;

    --v3-accent:       #d4d4d4;

    --v3-hover:        #222222;

    --v3-sidebar-hover:#222222;

    --v3-sidebar-active:#2e2e2e;

    --v3-user-bubble:  #222222;

    --v3-border2:      #444444;

    --v3-text4:        #444444;

    --v3-card:         #1a1a1a;

    --v3-card2:        #222222;

  }

}

@media (prefers-color-scheme: light) {

  :root:not([data-theme="dark"]) {

    --bg-main:         #ffffff;

    --bg-sidebar:      #f5f5f5;

    --bg-surface:      #f5f5f5;

    --bg-elevated:     #ebebeb;

    --bg-input:        #f9f9f9;

    --bg-hover:        #ebebeb;

    --bg-active:       #e0e0e0;

    --text-primary:    #1a1a1a;

    --text-secondary:  #666666;

    --text-muted:      #999999;

    --text-disabled:   #999999;

    --primary-bg:      linear-gradient(135deg, #333333 0%, #111111 100%);

    --primary-bg-solid:#333333;

    --primary-text:    #ffffff;

    --border-subtle:   #e8e8e8;

    --border-default:  #e0e0e0;

    --border-strong:   #cccccc;

    --sidebar-hover:   #ebebeb;

    --sidebar-active:  #e0e0e0;

    --accent:          #333333;

    --accent-soft:     rgba(51,51,51,0.08);

    --bg:              #ffffff;

    --surface:         #f5f5f5;

    --surface2:        #ebebeb;

    --surface3:        #e0e0e0;

    --sidebar-bg:      #f5f5f5;

    --border:          #e0e0e0;

    --border2:         #cccccc;

    --text:            #1a1a1a;

    --text2:           #666666;

    --text3:           #999999;

    --text4:           #bbbbbb;

    --input-bg:        #f9f9f9;

    --code-bg:         #f5f5f5;

    --code-header:     #ebebeb;

    --v3-bg:           #ffffff;

    --v3-sidebar-bg:   #f5f5f5;

    --v3-surface:      #f5f5f5;

    --v3-surface2:     #ebebeb;

    --v3-input-bg:     #f9f9f9;

    --v3-border:       #e0e0e0;

    --v3-text:         #1a1a1a;

    --v3-text2:        #666666;

    --v3-text3:        #999999;

    --v3-accent:       #333333;

    --v3-hover:        #ebebeb;

    --v3-sidebar-hover:#ebebeb;

    --v3-sidebar-active:#e0e0e0;

    --v3-user-bubble:  #ebebeb;

    --v3-border2:      #cccccc;

    --v3-text4:        #bbbbbb;

    --v3-card:         #f5f5f5;

    --v3-card2:        #ebebeb;

  }

}