mengubah css mainboard

login.css

@@ -1,4 +1,13 @@
 body {
+<<<<<<< HEAD
+    font-family: Arial, sans-serif;
+    background: #1e90ff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+=======
   font-family: Poppins, Arial, sans-serif;
   background: linear-gradient(135deg, #d9a7ff, #fbc2eb, #a1c4fd);
   min-height: 100vh;
@@ -6,6 +15,7 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
+>>>>>>> 149dc47c4d90a64a3fe437ba26e7cf4d1cbbbf50
 }
 
 /* Background animation circles */

mainboard.css

@@ -1,44 +1,125 @@
+/* BODY */
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  background: linear-gradient(135deg, #7b2ff7, #f107a3);
-  color: white;
+  background: #f7f6ff; /* warna lembut */
+  color: #333;
+  min-height: 100vh;
+  position: relative;
+  overflow: hidden;
 }
 
-.container { padding: 20px; max-width: 1000px; margin: auto; }
+/* Animated Background Elements */
+.bg-circle {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(60px);
+  animation: float 6s infinite ease-in-out;
+}
 
+.circle-one { top: 20%; left: 10%; width: 200px; height: 200px; background: rgba(255,255,255,0.15); }
+.circle-two { bottom: 15%; right: 10%; width: 280px; height: 280px; background: rgba(255,192,203,0.25); animation-delay: 1s; }
+.circle-three { top: 50%; left: 50%; width: 200px; height: 200px; background: rgba(200,120,255,0.25); animation-delay: 2s; }
+
+@keyframes float {
+  0%, 100% { transform: translateY(0); }
+  50% { transform: translateY(-20px); }
+}
+
+/* MAIN CONTAINER */
+.container {
+  padding: 20px;
+  max-width: 1100px;
+  margin: auto;
+  position: relative;
+  z-index: 10;
+}
+
+/* HEADER CARD */
 .header {
-  display: flex; justify-content: space-between; align-items: center;
-  padding: 15px 20px; border-radius: 20px; margin-bottom: 20px;
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(15px);
+  box-shadow: 0 10px 40px rgba(0,0,0,0.1);
+  border-radius: 20px;
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 30px;
 }
 
 .user-info { display: flex; align-items: center; gap: 15px; }
+
 .user-icon {
-  width: 50px; height: 50px; border-radius: 50%;
-  background: #fff; color: #000; display:flex; align-items:center; justify-content:center;
-  font-size: 20px; font-weight: bold;
+  width: 55px;
+  height: 55px;
+  border-radius: 50%;
+  background: linear-gradient(45deg, purple, hotpink);
+  color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 22px;
+  font-weight: bold;
+  box-shadow: 0 5px 20px rgba(0,0,0,0.2);
 }
 
-.actions button { margin-left: 10px; }
-
+/* BUTTON STYLE */
 .btn {
-  padding: 10px 20px; border: none; border-radius: 10px;
-  font-size: 15px; cursor: pointer;
+  padding: 12px 22px;
+  border: none;
+  border-radius: 12px;
+  cursor: pointer;
+  font-size: 15px;
+  transition: .3s;
 }
-.gold { background: gold; }
-.gray { background: #444; color: white; }
 
-.title { text-align: center; margin-top: 40px; margin-bottom: 40px; }
+.gold {
+  background: linear-gradient(to right, gold, orange);
+  color: white;
+}
+.gold:hover { transform: scale(1.05); }
 
+.gray {
+  background: #444;
+  color: white;
+}
+.gray:hover { background: #222; transform: scale(1.05); }
+
+/* TITLE */
+.title { text-align: center; margin: 40px 0; }
+.title h1 {
+  background: -webkit-linear-gradient(purple, hotpink);
+  -webkit-background-clip: text;
+  color: transparent;
+  font-size: 42px;
+}
+
+/* STAGE CARDS */
 .stage-grid {
-  display: grid; grid-template-columns: repeat(3, 1fr);
-  gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 25px;
 }
 
 .stage-btn {
-  background: white; color: black; padding: 30px; border-radius: 20px;
-  cursor: pointer; transition: .3s; text-align: center;
+  background: rgba(255,255,255,0.6);
+  backdrop-filter: blur(10px);
+  padding: 35px;
+  border-radius: 25px;
+  text-align: center;
+  cursor: pointer;
+  transition: .3s;
+  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
 }
-.stage-btn:hover { transform: scale(1.05); }
 
-.icon { font-size: 40px; margin-bottom: 10px; display:block; }
+.stage-btn:hover {
+  transform: scale(1.07);
+  background: rgba(255,255,255,0.8);
+}
+
+/* ICON EMOJI */
+.icon {
+  font-size: 45px;
+  display: block;
+  margin-bottom: 12px;
+}