/* General styles */
 * {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 body {
     font-family: 'Poppins', sans-serif;
     background-color: #f3f4f6;
     display: flex;
     justify-content: center;
     align-items: center;
     height: 100vh;
     background: linear-gradient(to right, #2c3e50, #223b51);
 }

 /* Container and form styling */
 .container {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
     z-index: 1;
 }

 .login-box {
     background: #fff;
     padding: 40px;
     border-radius: 15px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     width: 450px;
     text-align: center;
     position: relative;
     transition: all 0.3s ease;
 }

 .login-box:hover {
     transform: scale(1.02);
 }

 /* Logo styling */
 .logo img {
     width: 220px;
     margin-bottom: 20px;
 }

 /* Heading and subtitle styling */
 h2 {
     margin-bottom: 10px;
     font-size: 22px;
     font-weight: 600;
     color: #333;
 }

 .subtitle {
     font-size: 14px;
     color: #777;
     margin-bottom: 30px;
 }

 /* Input field styling */
 .input-group {
     position: relative;
     margin-bottom: 20px;
 }

 .input-group input {
     width: 100%;
     padding: 10px 15px;
     background: #f9f9f9;
     border: 2px solid #ddd;
     border-radius: 8px;
     outline: none;
     color: #333;
     font-size: 14px;
     transition: border-color 0.3s ease;
 }

 .input-group input:focus {
     border-color: #3498db;
 }

 .input-group label {
     position: absolute;
     top: 50%;
     left: 15px;
     transform: translateY(-50%);
     font-size: 14px;
     color: #999;
     pointer-events: none;
     transition: all 0.3s ease;
 }

 .input-group input:focus~label,
 .input-group input:not(:placeholder-shown)~label {
     top: -12px;
     left: 5px;
     font-size: 12px;
     color: #3498db;
     background: #fff;
     padding: 0 5px;
 }

 .mt-1 {
     margin-top: 35px;
 }

 /* Button styling */
 .actions {
     margin-top: 20px;
 }

 .primary-btn,
 .secondary-btn {
     width: 100%;
     padding: 12px;
     font-size: 16px;
     border-radius: 8px;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 /* MASUK button */
 .primary-btn {
     background-color: #3498db;
     color: #fff;
     border: none;
 }

 .primary-btn:hover {
     background-color: #2980b9;
 }

 /* Kembali ke Halaman Utama button */
 .secondary-btn {
     background-color: transparent;
     color: #3498db;
     border: 2px solid #3498db;
     margin-top: 10px;
     /* Adds slight separation between the buttons */
 }

 .secondary-btn:hover {
     background-color: #3498db;
     color: #fff;
 }


 .dark-background {
     --background-color: #223b51;
     --default-color: #ffffff;
     --heading-color: #ffffff;
     --surface-color: #315575;
     --contrast-color: #223b51;
 }

 /* Mengatur elemen canvas */
 .dark-background #backgroundCanvas {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     z-index: 1;
 }

 /* Konten di atas canvas */
 .dark-background .container {
     position: relative;
     z-index: 2;
 }

 /* Elemen untuk titik data */
 .dark-background .point {
     position: absolute;
     width: 6px;
     height: 6px;
     background-color: rgba(137, 139, 107, 0.8);
     border-radius: 50%;
 }

 /* Elemen untuk garis */
 .dark-background .line {
     position: absolute;
     background-color: rgba(255, 255, 255, 0.2);
 }