/* ============================================================
Neon Dark Theme — black canvas + emerald/green glow
------------------------------------------------------------
Mengubah tampilan light bawaan menjadi dark pekat dengan
aksen neon hijau (emerald) + efek glow & glassmorphism.
Diaktifkan lewat + file ini.
Untuk kembali ke light: hapus class "glass" dan tag .
Override pakai !important agar menang atas utility Tailwind.
Ganti --accent di :root untuk mengubah seluruh warna aksen.
============================================================ */
:root {
--accent: #34d399; /* hijau utama */
--accent-bright: #4ade80; /* hijau terang */
--accent-deep: #10b981; /* hijau pekat */
--accent-soft: #6ee7b7; /* mint lembut */
--glass-bg: rgba(16, 22, 19, 0.55);
--glass-bg-strong: rgba(9, 13, 11, 0.66);
--glass-line: rgba(52, 211, 153, 0.12);
--glass-hover: rgba(52, 211, 153, 0.08);
}
/* ---------- Kanvas + cahaya ambient ---------- */
html.glass {
background: #050706;
color-scheme: dark;
}
html.glass::before {
content: "";
position: fixed;
inset: 0;
z-index: -2;
pointer-events: none;
background:
radial-gradient(900px 600px at 8% -8%, rgba(34, 197, 94, 0.20), transparent 60%),
radial-gradient(820px 620px at 104% -2%, rgba(16, 185, 129, 0.18), transparent 55%),
radial-gradient(760px 760px at 92% 114%, rgba(45, 212, 160, 0.14), transparent 60%),
radial-gradient(700px 700px at -6% 108%, rgba(34, 197, 94, 0.12), transparent 60%),
linear-gradient(160deg, #070b09 0%, #050807 48%, #040605 100%);
}
/* sapuan neon diagonal (seperti referensi) */
html.glass::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
pointer-events: none;
mix-blend-mode: screen;
background:
linear-gradient(122deg, transparent 71%, rgba(74, 222, 128, 0.12) 75%, rgba(74, 222, 128, 0.30) 78%, rgba(74, 222, 128, 0.06) 81%, transparent 85%),
linear-gradient(122deg, transparent 12%, rgba(52, 211, 153, 0.05) 15%, rgba(52, 211, 153, 0.18) 17%, transparent 20%);
}
.glass body { background-color: transparent !important; }
.glass ::selection { background: rgba(52, 211, 153, 0.35); }
.glass ::-webkit-scrollbar-thumb { background: rgba(52, 211, 153, 0.25); }
/* ---------- Permukaan kaca (kartu, panel) ---------- */
.glass .bg-white,
.glass .bg-white\/90 {
background-color: var(--glass-bg) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
box-shadow:
0 0 0 1px var(--glass-line),
0 16px 38px -18px rgba(0, 0, 0, 0.8),
inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}
/* isian halus */
.glass .bg-slate-50 { background-color: rgba(255, 255, 255, 0.03) !important; }
.glass .bg-slate-100 { background-color: rgba(255, 255, 255, 0.06) !important; }
.glass .bg-slate-200 { background-color: rgba(255, 255, 255, 0.09) !important; }
.glass .bg-slate-400 { background-color: #64748b !important; }
/* hover permukaan */
.glass .hover\:bg-slate-50:hover,
.glass .hover\:bg-slate-50\/70:hover,
.glass .hover\:bg-slate-100:hover { background-color: var(--glass-hover) !important; }
.glass .hover\:bg-slate-700:hover { background-color: rgba(52, 211, 153, 0.14) !important; }
/* ---------- Teks ---------- */
.glass .text-slate-900 { color: #eef5f1 !important; }
.glass .text-slate-800 { color: #dfe8e3 !important; }
.glass .text-slate-700 { color: #c6d2cb !important; }
.glass .text-slate-600 { color: #aab8b0 !important; }
.glass .text-slate-500 { color: #8c9c94 !important; }
.glass .text-slate-400 { color: #76877e !important; }
.glass .text-slate-300 { color: #5b6a62 !important; }
.glass .hover\:text-slate-700:hover { color: #dfe8e3 !important; }
.glass .hover\:text-slate-600:hover { color: #c6d2cb !important; }
.glass .hover\:text-white:hover { color: #ffffff !important; }
/* teks warna → dicerahkan agar kontras di gelap */
.glass .text-emerald-600,
.glass .text-emerald-700,
.glass .text-emerald-800 { color: var(--accent) !important; }
.glass .text-amber-600,
.glass .text-amber-700,
.glass .text-amber-800 { color: #fbbf24 !important; }
.glass .text-rose-500,
.glass .text-rose-600,
.glass .text-rose-700,
.glass .text-rose-800 { color: #fb7185 !important; }
.glass .text-sky-600,
.glass .text-sky-800 { color: #38bdf8 !important; }
/* aksen lama (indigo) → dipetakan ke hijau */
.glass .text-indigo-200,
.glass .text-indigo-300,
.glass .text-indigo-400,
.glass .text-indigo-500,
.glass .text-indigo-600,
.glass .text-indigo-700 { color: var(--accent) !important; }
.glass .text-indigo-100 { color: #d1fae5 !important; }
.glass .text-indigo-200\/80 { color: rgba(110, 231, 183, 0.8) !important; }
.glass .hover\:text-indigo-600:hover,
.glass .hover\:text-indigo-700:hover { color: var(--accent-soft) !important; }
.glass .hover\:text-rose-600:hover { color: #fb7185 !important; }
/* judul halaman di top bar → neon hijau (seperti referensi) */
.glass header.sticky h1 {
color: var(--accent) !important;
text-shadow: 0 0 18px rgba(52, 211, 153, 0.45);
}
/* ---------- Chip / ubin ikon berwarna (translucent) ---------- */
.glass .bg-indigo-50 { background-color: rgba(52, 211, 153, 0.14) !important; }
.glass .bg-emerald-50 { background-color: rgba(16, 185, 129, 0.15) !important; }
.glass .bg-amber-50 { background-color: rgba(245, 158, 11, 0.15) !important; }
.glass .bg-sky-50 { background-color: rgba(56, 189, 248, 0.15) !important; }
.glass .bg-rose-50 { background-color: rgba(244, 63, 94, 0.15) !important; }
.glass .hover\:bg-indigo-50:hover { background-color: rgba(52, 211, 153, 0.20) !important; }
.glass .hover\:bg-rose-50:hover { background-color: rgba(244, 63, 94, 0.18) !important; }
/* ---------- Garis & ring netral ---------- */
.glass .border-slate-100,
.glass .border-slate-200 { border-color: var(--glass-line) !important; }
.glass .divide-slate-100 > :not([hidden]) ~ :not([hidden]),
.glass .divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--glass-line) !important; }
.glass .ring-slate-200,
.glass .ring-slate-200\/70,
.glass .ring-slate-300 { --tw-ring-color: rgba(148, 163, 184, 0.14) !important; }
.glass .ring-slate-500\/20 { --tw-ring-color: rgba(148, 163, 184, 0.20) !important; }
.glass .ring-emerald-600\/20 { --tw-ring-color: rgba(16, 185, 129, 0.35) !important; }
.glass .ring-amber-600\/20 { --tw-ring-color: rgba(245, 158, 11, 0.30) !important; }
.glass .ring-rose-600\/20 { --tw-ring-color: rgba(244, 63, 94, 0.30) !important; }
.glass .ring-sky-600\/20 { --tw-ring-color: rgba(56, 189, 248, 0.30) !important; }
.glass .ring-indigo-600\/20 { --tw-ring-color: rgba(52, 211, 153, 0.35) !important; }
.glass .ring-indigo-200 { --tw-ring-color: rgba(52, 211, 153, 0.40) !important; }
/* ---------- Kontrol form ---------- */
.glass input,
.glass select,
.glass textarea {
background-color: rgba(255, 255, 255, 0.04) !important;
color: #e7f1ec !important;
}
.glass input::placeholder,
.glass textarea::placeholder { color: #5d6c64 !important; }
.glass select option { background-color: #0a0f0c; color: #e7f1ec; }
.glass input:focus,
.glass select:focus,
.glass textarea:focus { --tw-ring-color: var(--accent) !important; }
/* ---------- Tombol aksen (hijau neon) ---------- */
.glass .bg-indigo-600 {
background-image: linear-gradient(135deg, var(--accent-deep), var(--accent)) !important;
color: #04130c !important;
box-shadow: 0 10px 26px -8px rgba(52, 211, 153, 0.6) !important;
}
.glass .bg-indigo-600.text-white { color: #04130c !important; }
.glass .hover\:bg-indigo-700:hover {
background-image: linear-gradient(135deg, #059669, var(--accent-bright)) !important;
}
.glass .ring-indigo-600 { --tw-ring-color: var(--accent) !important; }
/* tombol utilitas gelap (Filter / Cari / Sort) → glassy hijau */
.glass button.bg-slate-900,
.glass a.bg-slate-900 {
background-color: rgba(52, 211, 153, 0.14) !important;
box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.30) !important;
color: #e7f1ec !important;
}
/* warna solid (logo, avatar) → hijau */
.glass .bg-indigo-500 { background-color: var(--accent) !important; }
.glass .bg-indigo-500\/20 { background-color: rgba(52, 211, 153, 0.18) !important; }
/* gradient panel login → hijau */
.glass .bg-gradient-to-br {
background-image: linear-gradient(135deg, #065f46 0%, var(--accent-deep) 52%, #02140d 100%) !important;
}
/* ---------- Sidebar ---------- */
.glass #sidebar {
background-color: var(--glass-bg-strong) !important;
-webkit-backdrop-filter: blur(22px) saturate(140%);
backdrop-filter: blur(22px) saturate(140%);
box-shadow: 1px 0 0 rgba(52, 211, 153, 0.10) !important;
}
/* item nav aktif → pil hijau terang + teks gelap + glow */
.glass #sidebar a.bg-indigo-600 {
background-image: none !important;
background-color: var(--accent) !important;
color: #04130c !important;
box-shadow: 0 0 26px -2px rgba(52, 211, 153, 0.65) !important;
}
/* ---------- Top bar ---------- */
.glass header.sticky {
background-color: rgba(6, 10, 8, 0.55) !important;
-webkit-backdrop-filter: blur(16px) saturate(140%);
backdrop-filter: blur(16px) saturate(140%);
border: 0 !important;
border-bottom: 1px solid var(--glass-line) !important;
box-shadow: none !important;
}
/* ---------- Kartu sedikit terangkat + glow saat hover ---------- */
.glass .rounded-2xl.bg-white { transition: box-shadow .25s ease, transform .25s ease; }
.glass .rounded-2xl.bg-white:hover {
box-shadow:
0 0 0 1px rgba(52, 211, 153, 0.28),
0 24px 50px -22px rgba(16, 185, 129, 0.5),
inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}