warna, backgroud & gradient

1. Format warna: hex, rgb, hsl, oklch
2. Opacity & RGBA / HSLA
3. Background: color, image, repeat, size, position
4. Linear-gradient & radial-gradient
5. Multiple backgrounds & blend-mode

/* ============================
   HARI 5: Warna & Background
   ============================ */

.hero-section {
  min-height: 100vh;
  position: relative;

  /* Multiple background layers */
  background:
    linear-gradient(135deg, rgba(59,130,246,0.85) 0%, rgba(139,92,246,0.85) 100%),
    url('hero-bg.jpg') center/cover no-repeat;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Mesh gradient modern */
.mesh-bg {
  background:
    radial-gradient(at 40% 20%, hsl(220,100%,70%) 0px, transparent 50%),
    radial-gradient(at 80% 0%, hsl(280,100%,70%) 0px, transparent 50%),
    radial-gradient(at 0% 50%, hsl(190,100%,70%) 0px, transparent 50%),
    radial-gradient(at 80% 50%, hsl(340,100%,70%) 0px, transparent 50%);
  background-color: #f0f4ff;
}

/* CSS Custom Properties untuk palet warna */
:root {
  --biru: hsl(217, 91%, 60%);
  --biru-gelap: hsl(217, 91%, 40%);
  --ungu: hsl(259, 94%, 61%);
  --hijau: hsl(142, 71%, 45%);
  --merah: hsl(0, 84%, 60%);
}

/* Glassmorphism effect */
.glass-card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 20px;
  padding: 32px;
}