/* ─── Import ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* ─── CSS Değişkenleri ────────────────────────────────────────────────────── */
:root {
  /* Renkler */
  --c-bg:           #F5F6FA;
  --c-surface:      #FFFFFF;
  --c-border:       #E2E5EF;
  --c-border-dark:  #C8CDD9;

  --c-sidebar:      #0D1B2A;
  --c-sidebar-2:    #162333;
  --c-sidebar-text: #94A3B8;
  --c-sidebar-act:  #1E9FFF;

  --c-text:         #1A2035;
  --c-text-2:       #4A5568;
  --c-text-muted:   #94A3B8;

  --c-accent:       #1E9FFF;
  --c-accent-dark:  #0A7FD9;
  --c-success:      #16A34A;
  --c-danger:       #DC2626;
  --c-warning:      #CA8A04;

  /* Tipografi */
  --font-body:  'IBM Plex Sans', system-ui, sans-serif;
  --font-mono:  'IBM Plex Mono', monospace;

  /* Spacing & Radius */
  --radius-sm:  4px;
  --radius:     8px;
  --radius-lg:  12px;

  /* Shadow */
  --shadow-sm:  0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
  --shadow:     0 4px 12px rgba(0,0,0,.08);
  --shadow-lg:  0 12px 32px rgba(0,0,0,.12);
}

/* ─── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}

body {
  font-family: var(--font-body);
  background:  var(--c-bg);
  color:        var(--c-text);
  line-height:  1.6;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; font-family: inherit; }
input, select, textarea { font-family: inherit; }

/* ─── Tipografi ──────────────────────────────────────────────────────────── */
h1 { font-size: 1.5rem;  font-weight: 600; letter-spacing: -.02em; }
h2 { font-size: 1.25rem; font-weight: 600; }
h3 { font-size: 1.1rem;  font-weight: 600; }
h4 { font-size: 1rem;    font-weight: 600; }
h5 { font-size: .9rem;   font-weight: 600; }

small { font-size: .8rem; }
.muted { color: var(--c-text-muted); }
.mono  { font-family: var(--font-mono); }

/* ─── Spinner ────────────────────────────────────────────────────────────── */
.spinner {
  display:        inline-block;
  width:          16px;
  height:         16px;
  border:         2px solid var(--c-border);
  border-top-color: var(--c-accent);
  border-radius:  50%;
  animation:      spin .7s linear infinite;
  vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ─── Scrollbar ──────────────────────────────────────────────────────────── */
::-webkit-scrollbar        { width: 6px; height: 6px; }
::-webkit-scrollbar-track  { background: transparent; }
::-webkit-scrollbar-thumb  { background: var(--c-border-dark); border-radius: 99px; }