/* =================================
   GLOBAL RESET & FOUNDATION
================================= */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  /* Font Families */
  --font-ui: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Manrope', 'Inter', sans-serif;

  /* Font Sizes */
  --fs-xs: 0.625rem;
  --fs-sm: 0.75rem;
  --fs-md: 0.875rem;
  --fs-base: 1rem;
  --fs-lg: 1.0625rem;
  --fs-xl: 1.375rem;

  /* Line Heights */
  --lh-tight: 1.1;
  --lh-snug: 1.25;
  --lh-normal: 1.45;

  /* Font Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Letter Spacing */
  --ls-tight: -0.01em;
  --ls-normal: 0;
  --ls-wide: 0.08em;

  /* Text Colors */
  --text-main: #f8fafc;
  --text-muted: #94a3b8;

  /* Motion */
  --ease-smooth: cubic-bezier(.2, .8, .2, 1);
}

/* =================================
   GLOBAL CONTAINER SYSTEM
================================= */

.container {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-inline: 16px;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  position: relative;
  isolation: isolate;

  font-family: var(--font-ui);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--text-main);

  display: flex;
  flex-direction: column;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;

  /* fallback color kalau image gagal load */
  background-color: #0f172a;
}

/* ================================
   BACKGROUND IMAGE (SUBTLE MODE)
================================ */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;

  background: url('/assets/images/bg-modern.png') center / cover no-repeat;

  /* INI KUNCINYA */
  filter:
    brightness(0.4)

    contrast(0.9);

  transform: scale(1.05);
}

/* ================================
   SOFT DEPTH OVERLAY
================================ */

body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background:
    radial-gradient(
      circle at 50% 30%,
      rgba(30, 41, 59, 0.3),
      rgba(2, 6, 23, 0.85)
    );
}