@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --navy-900: #061a5c;
  --navy-800: #0a2472;
  --navy-700: #0f2f8f;
  --blue-600: #3a62c9;
  --blue-500: #4f7be8;
  --blue-400: #6b95ff;
  --blue-200: #b9ceff;
  --blue-100: #dfeaff;
  --ink: #0b1533;
  --muted: #7a8199;
  --line: #e3dfe0;
  --ok: #12b76a;
  --ok-soft: #e7f5e8;
  --err: #f04438;
  --mint: #b7ecd9;

  --grad-brand: linear-gradient(90deg, #0b2a7a 0%, #6b95ff 100%);
  --grad-text: linear-gradient(90deg, #0b2a7a 0%, #3a62c9 55%, #6b95ff 100%);
  --grad-btn: linear-gradient(180deg, #0a2472 0%, #3a62c9 60%, #6b95ff 100%);
  --font-body: 'Poppins', system-ui, sans-serif;
  --font-title: 'Times New Roman', Tinos, Georgia, serif;
}

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

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: 0; background: none; }
input { font-family: inherit; }
.hidden { display: none !important; }

/* Judul serif dengan gradasi */
.title-serif {
  font-family: var(--font-title);
  font-weight: 700;
  line-height: 1.1;
}
.text-grad {
  background: var(--grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Tombol */
.btn-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .55rem 1.4rem;
  border-radius: 999px;
  font-size: .95rem;
  font-weight: 400;
  color: #fff;
  background: var(--blue-600);
  border: 1px solid rgba(255, 255, 255, .55);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.btn-pill:hover { filter: brightness(1.08); transform: translateY(-1px); }

.btn-primary {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: 1.05rem 1.5rem;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 500;
  color: #fff;
  background: var(--grad-btn);
  box-shadow: 0 10px 24px rgba(15, 47, 143, .25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(15, 47, 143, .32); }
.btn-primary:disabled { opacity: .65; cursor: progress; transform: none; }

.link { color: var(--navy-700); font-weight: 500; }
.link:hover { color: var(--blue-500); text-decoration: underline; }

/* Ikon */
.icon { width: 1.1em; height: 1.1em; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* Dekorasi titik-titik (halftone) */
.dots {
  position: absolute;
  pointer-events: none;
  background-image: radial-gradient(circle, currentColor 38%, transparent 42%);
  background-size: 14px 14px;
  opacity: .35;
}