/* ============================================================
   KafeHasap Design Tokens — Dark Theme
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap');

:root {
    /* ── Arka Plan ── */
    --bg-primary:    hsl(222, 47%, 8%);
    --bg-secondary:  hsl(222, 40%, 12%);
    --bg-tertiary:   hsl(222, 35%, 16%);
    --bg-surface:    hsl(222, 30%, 20%);

    /* ── Metin ── */
    --text-primary:   hsl(210, 40%, 96%);
    --text-secondary: hsl(215, 20%, 65%);
    --text-muted:     hsl(215, 15%, 45%);

    /* ── Accent — Turuncu ── */
    --accent:         hsl(25, 100%, 50%);
    --accent-hover:   hsl(25, 100%, 58%);
    --accent-glow:    hsla(25, 100%, 50%, 0.3);
    --accent-subtle:  hsla(25, 100%, 50%, 0.1);

    /* ── Durum ── */
    --status-active:  hsl(142, 71%, 45%);
    --status-warning: hsl(38, 92%, 50%);
    --status-danger:  hsl(0, 84%, 60%);
    --status-idle:    hsl(215, 20%, 45%);
    --status-offline: hsl(0, 0%, 38%);

    /* ── Sınır & Gölge ── */
    --border:         hsla(215, 25%, 40%, 0.25);
    --border-hover:   hsla(215, 25%, 55%, 0.35);
    --shadow-sm:      0 2px 8px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 16px rgba(0,0,0,0.4);
    --shadow-lg:      0 8px 32px rgba(0,0,0,0.5);
    --shadow-glow:    0 0 20px var(--accent-glow);

    /* ── Radius ── */
    --radius-sm:  6px;
    --radius-md:  10px;
    --radius-lg:  16px;
    --radius-xl:  24px;
    --radius-full: 9999px;

    /* ── Tipografi ── */
    --font-sans:  'Inter', system-ui, sans-serif;
    --font-mono:  'JetBrains Mono', 'Fira Code', monospace;
    --text-xs:    0.75rem;
    --text-sm:    0.875rem;
    --text-base:  1rem;
    --text-lg:    1.125rem;
    --text-xl:    1.25rem;
    --text-2xl:   1.5rem;
    --text-3xl:   2rem;

    /* ── Transition ── */
    --ease:       cubic-bezier(0.4, 0, 0.2, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --dur-fast:   150ms;
    --dur-normal: 250ms;
    --dur-slow:   400ms;
}

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--bg-primary);
    color: var(--text-primary);
    font-size: var(--text-base);
    line-height: 1.6;
    min-height: 100vh;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { color: var(--accent-hover); }

img { max-width: 100%; display: block; }

/* =========================================================
   Scrollbar
   ========================================================= */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-primary); }
::-webkit-scrollbar-thumb { background: var(--bg-surface); border-radius: var(--radius-full); }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* =========================================================
   Typography Utilities
   ========================================================= */
.text-xs     { font-size: var(--text-xs); }
.text-sm     { font-size: var(--text-sm); }
.text-lg     { font-size: var(--text-lg); }
.text-xl     { font-size: var(--text-xl); }
.text-2xl    { font-size: var(--text-2xl); }
.text-mono   { font-family: var(--font-mono); }
.text-muted  { color: var(--text-muted); }
.text-secondary { color: var(--text-secondary); }
.text-accent { color: var(--accent); }
.font-semibold { font-weight: 600; }
.font-bold   { font-weight: 700; }

/* =========================================================
   Keyframe Animations
   ========================================================= */
@keyframes pulseActive {
    0%, 100% { box-shadow: 0 0 0 0 hsla(142, 71%, 45%, 0); }
    50%       { box-shadow: 0 0 0 8px hsla(142, 71%, 45%, 0.15); }
}
@keyframes pulseWarning {
    0%, 100% { box-shadow: 0 0 0 0 hsla(38, 92%, 50%, 0); }
    50%       { box-shadow: 0 0 0 8px hsla(38, 92%, 50%, 0.2); }
}
@keyframes blinkDanger {
    0%, 100% { border-color: var(--status-danger); }
    50%       { border-color: transparent; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
@keyframes livePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%       { opacity: 0.5; transform: scale(0.8); }
}