/* =========================================
   KERJAKULO UI ENGINE
   Premium Enterprise Theme System
========================================= */

:root{

  /* =========================================
     COLOR SYSTEM
  ========================================= */

  --primary: #ff951f;
  --primary-hover: #ffad4d;
  --primary-soft: rgba(255,149,31,0.12);

  --success: #22c55e;
  --danger: #ef4444;
  --warning: #f59e0b;
  --info: #3b82f6;

  --bg-main: #050505;
  --bg-soft: #0b0b0b;
  --bg-card: #111111;
  --bg-card-hover: #171717;

  --border: #262626;
  --border-soft: #1a1a1a;

  --text: #ffffff;
  --text-soft: #b3b3b3;
  --text-muted: #6b7280;

  /* =========================================
     SHADOW SYSTEM
  ========================================= */

  --shadow-sm:
    0 2px 8px rgba(0,0,0,0.25);

  --shadow-md:
    0 6px 24px rgba(0,0,0,0.35);

  --shadow-lg:
    0 12px 40px rgba(0,0,0,0.45);

  --glow-primary:
    0 0 0 1px rgba(255,149,31,0.15),
    0 0 18px rgba(255,149,31,0.08);

  /* =========================================
     RADIUS SYSTEM
  ========================================= */

  --radius-xs: 8px;
  --radius-sm: 12px;
  --radius-md: 16px;
  --radius-lg: 22px;
  --radius-xl: 28px;

  /* =========================================
     SPACING SYSTEM
  ========================================= */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 14px;
  --space-lg: 20px;
  --space-xl: 28px;
  --space-2xl: 40px;

  /* =========================================
     TYPOGRAPHY
  ========================================= */

  --font-main:
    Inter,
    "Segoe UI",
    sans-serif;

  --font-mono:
    "JetBrains Mono",
    monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-md: 15px;
  --text-lg: 18px;
  --text-xl: 24px;
  --text-2xl: 34px;

  /* =========================================
     ANIMATION
  ========================================= */

  --transition-fast: 0.18s ease;
  --transition-normal: 0.28s ease;
  --transition-slow: 0.4s ease;

}


/* =========================================
   GLOBAL RESET
========================================= */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;

  background:

  radial-gradient(
    circle at top right,
    rgba(255,149,21,.08),
    transparent 30%
  ),

  radial-gradient(
    circle at bottom left,
    rgba(255,149,21,.05),
    transparent 30%
  ),

  #050505;

  color:var(--text-primary);

  font-family:var(--font-main);

  min-height:100vh;

  overflow-x:hidden;
}


/* =========================================
   TYPOGRAPHY
========================================= */

h1,h2,h3,h4,h5,h6{
  font-weight:600;
  letter-spacing:-0.02em;
}

p{
  color:var(--text-soft);
  line-height:1.6;
}

small{
  color:var(--text-muted);
}


/* =========================================
   LINKS
========================================= */

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


/* =========================================
   INPUT RESET
========================================= */

input,
button,
textarea,
select{
  font-family:inherit;
  outline:none;
  border:none;
}


/* =========================================
   SCROLLBAR
========================================= */

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-track{
  background:var(--bg-soft);
}

::-webkit-scrollbar-thumb{
  background:rgba(255,149,31,0.25);
  border-radius:999px;
}

::-webkit-scrollbar-thumb:hover{
  background:rgba(255,149,31,0.45);
}


/* =========================================
   SELECTION
========================================= */

::selection{
  background:rgba(255,149,31,0.25);
  color:#fff;
}


/* =========================================
   BASE APP LAYOUT
========================================= */

.app{
  width:100%;
  min-height:100vh;
  padding:
    var(--space-lg);
}

.container{
  width:100%;
  max-width:1300px;
  margin:auto;
}

.section{
  margin-bottom:var(--space-xl);
}


/* =========================================
   GLASS EFFECT
========================================= */

.glass{
  background:rgba(255,255,255,0.03);
  backdrop-filter:blur(18px);
}


/* =========================================
   STATUS COLORS
========================================= */

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

.text-danger{
  color:var(--danger);
}

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

.text-primary{
  color:var(--primary);
}


/* =========================================
   HOVER EFFECT
========================================= */

.hover-lift{
  transition:var(--transition-normal);
}

.hover-lift:hover{
  transform:translateY(-2px);
}