/* ============================================
   NOCTKJ HOME — PREMIUM THEME (dark glass + teal)
   ============================================ */

:root {
  --theme-primary: #2dd4bf;
  --theme-secondary: #0f766e;
  --theme-accent: #34d399;
  --theme-background: #0b1220;
  --theme-card-background: rgba(255, 255, 255, 0.045);
  --theme-text: #e2e8f0;
  --theme-text-secondary: #94a3b8;
  --theme-border: rgba(255, 255, 255, 0.09);
  --theme-border-secondary: rgba(255, 255, 255, 0.05);
  --theme-hover: rgba(45, 212, 191, 0.08);
  --theme-shadow: 0 10px 40px rgba(0, 0, 0, 0.45);
}

body {
  background:
    radial-gradient(1100px 700px at 15% -5%, rgba(45, 212, 191, 0.14), transparent 60%),
    radial-gradient(900px 600px at 95% 5%, rgba(52, 211, 153, 0.10), transparent 55%),
    radial-gradient(800px 800px at 50% 110%, rgba(15, 118, 110, 0.12), transparent 60%),
    #0b1220 !important;
  background-attachment: fixed !important;
  font-family: "Inter", "Segoe UI", system-ui, sans-serif;
}

/* Judul dashboard */
h1, .title {
  background: linear-gradient(90deg, #5eead4, #34d399, #2dd4bf);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
}

/* Kartu glassmorphism */
.group, .card {
  background: rgba(255, 255, 255, 0.045) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Kartu service */
.service {
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.service:hover {
  transform: translateY(-3px);
  border-color: rgba(45, 212, 191, 0.55) !important;
  box-shadow: 0 14px 44px rgba(45, 212, 191, 0.18), 0 6px 20px rgba(0, 0, 0, 0.4) !important;
}

/* Nama service */
.service .name, .service span {
  font-weight: 600;
}

/* Search bar */
.search-bar, input[type="text"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-radius: 12px !important;
  backdrop-filter: blur(10px);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.search-bar:focus-within, input[type="text"]:focus {
  border-color: rgba(45, 212, 191, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(45, 212, 191, 0.15);
}

/* Scrollbar premium */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: rgba(45, 212, 191, 0.25);
  border-radius: 8px;
}
::-webkit-scrollbar-thumb:hover { background: rgba(45, 212, 191, 0.45); }