p

Author: wahyu6070

assets/scss/style.scss

@@ -11,7 +11,6 @@ body {
 		justify-content: center;
 		align-items: center;
 	}
-
 	p {
 		padding-bottom: 10px;
 	}
@@ -251,3 +250,113 @@ select {
 .nav-btn {
 	background-color: #7F8CFF;
 	}
+.main-button {
+            display: inline-block;
+            background-color: #2563eb; /* blue-600 */
+            color: #ffffff; /* text-white */
+            font-weight: 700; /* font-bold */
+            padding: 0.5rem 1.5rem; /* py-2 px-6 */
+            border-radius: 0.5rem; /* rounded-lg */
+            border: none;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); /* shadow */
+            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+            cursor: pointer;
+            text-decoration: none; /* Hapus garis bawah default */
+        }
+       .main-button:hover {
+            background-color: #1d4ed8; /* hover:bg-blue-700 */
+            transform: scale(1.05); /* hover:scale-105 */
+            color: #ffffff; /* Pastikan teks tetap putih */
+            text-decoration: none;
+        }
+         .main-button:active {
+             transform: scale(0.98);
+         }
+
+        .config-button {
+            display: inline-block;
+            background-color: #16a34a; /* green-600 */
+            color: #ffffff;
+            font-weight: 700;
+            padding: 0.5rem 1.5rem;
+            border-radius: 0.5rem;
+            border: none;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+            cursor: pointer;
+            text-decoration: none;
+        }
+        .config-button:hover {
+            background-color: #15803d; /* hover:bg-green-700 */
+            transform: scale(1.05);
+            color: #ffffff;
+            text-decoration: none;
+        }
+        .config-button:active {
+             transform: scale(0.98);
+         }
+
+        .controller-button {
+            display: inline-block;
+            background-color: #9333ea; /* purple-600 */
+            color: #ffffff;
+            font-weight: 700;
+            padding: 0.5rem 1.5rem;
+            border-radius: 0.5rem;
+            border: none;
+            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+            transition: background-color 0.2s ease-in-out, transform 0.1s ease-in-out;
+            cursor: pointer;
+            text-decoration: none;
+        }
+        .controller-button:hover {
+            background-color: #7e22ce; /* hover:bg-purple-700 */
+            transform: scale(1.05);
+            color: #ffffff;
+            text-decoration: none;
+        }
+        .controller-button:active {
+             transform: scale(0.98);
+         }
+
+        /* === Tombol Ikon di Tabel (dari versi CSS Murni) === */
+        .icon-button {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            color: #ffffff; /* Warna ini mungkin tidak terlihat karena SVG punya warna sendiri */
+            transition: opacity 0.2s ease-in-out;
+            cursor: pointer;
+            padding: 0; /* Hapus padding default link/button */
+            border: none; /* Hapus border default */
+            background: none; /* Hapus background default */
+            vertical-align: middle; /* Sejajarkan dengan teks lain di sel */
+        }
+        .icon-button:hover {
+            opacity: 0.8;
+            text-decoration: none;
+        }
+        .icon-button svg {
+            width: 1.5rem; /* w-6 */
+            height: 1.5rem; /* h-6 */
+        }
+
+        /* === Accessibility (Pastikan ada jika tidak pakai kelas Bootstrap) === */
+        .visually-hidden {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border-width: 0;
+        }
+
+        /* Penyesuaian kecil untuk tabel Bootstrap */
+        .table {
+             vertical-align: middle;
+        }
+
+