login.css

@@ -1,13 +1,4 @@
 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;
@@ -15,7 +6,6 @@ body {
   display: flex;
   justify-content: center;
   align-items: center;
->>>>>>> 149dc47c4d90a64a3fe437ba26e7cf4d1cbbbf50
 }
 
 /* Background animation circles */

mainboard.css

@@ -1,125 +1,44 @@
-/* BODY */
 body {
   margin: 0;
   font-family: Arial, sans-serif;
-  background: #f7f6ff; /* warna lembut */
+  background: linear-gradient(135deg, #7b2ff7, #f107a3);
-  color: #333;
+  color: white;
-  min-height: 100vh;
-  position: relative;
-  overflow: hidden;
 }
 
-/* Animated Background Elements */
+.container { padding: 20px; max-width: 1000px; margin: auto; }
-.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 {
-  background: rgba(255,255,255,0.6);
+  display: flex; justify-content: space-between; align-items: center;
-  backdrop-filter: blur(15px);
+  padding: 15px 20px; border-radius: 20px; margin-bottom: 20px;
-  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: 55px;
+  width: 50px; height: 50px; border-radius: 50%;
-  height: 55px;
+  background: #fff; color: #000; display:flex; align-items:center; justify-content:center;
-  border-radius: 50%;
+  font-size: 20px; font-weight: bold;
-  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);
 }
 
-/* BUTTON STYLE */
+.actions button { margin-left: 10px; }
+
 .btn {
-  padding: 12px 22px;
+  padding: 10px 20px; border: none; border-radius: 10px;
-  border: none;
+  font-size: 15px; cursor: pointer;
-  border-radius: 12px;
-  cursor: pointer;
-  font-size: 15px;
-  transition: .3s;
 }
+.gold { background: gold; }
+.gray { background: #444; color: white; }
 
-.gold {
+.title { text-align: center; margin-top: 40px; margin-bottom: 40px; }
-  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;
+  display: grid; grid-template-columns: repeat(3, 1fr);
-  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
-  gap: 25px;
 }
 
 .stage-btn {
-  background: rgba(255,255,255,0.6);
+  background: white; color: black; padding: 30px; border-radius: 20px;
-  backdrop-filter: blur(10px);
+  cursor: pointer; transition: .3s; text-align: center;
-  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); }
 
-.stage-btn:hover {
+.icon { font-size: 40px; margin-bottom: 10px; display:block; }
-  transform: scale(1.07);
-  background: rgba(255,255,255,0.8);
-}
-
-/* ICON EMOJI */
-.icon {
-  font-size: 45px;
-  display: block;
-  margin-bottom: 12px;
-}