/*ini di notif atas */
.btn-notif {
    border: none;
    border-radius: 0 5px 5px 0;
    width: auto;
    transition: all .3s;
    font-size: 26px
}
.btn-primary {
    background: linear-gradient(90deg, #6a11cb, #2575fc); /* Ungu ke biru */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}
button.btn.btn-primary:hover {
  background: linear-gradient(90deg, #e03e5d, #e43b1c) !important;
  color: #fff !important;
}


.btn-primary:focus {
    background: linear-gradient(90deg, #d73a52, #d1381a);
    color: #ffffff;
}

.btn-primary:active {
    background: linear-gradient(90deg, #c0394a, #c13c18);
    color: #ffffff;
}


.btn-success {
    background: linear-gradient(90deg, #28a745, #218838); /* Hijau muda ke hijau tua */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-success:hover {
    background: linear-gradient(90deg, #45e08f, #1cc88a) !important; /* Hijau terang */
    color: #fff !important;
}

.btn-success:focus {
    background: linear-gradient(90deg, #20c997, #17a673);
    color: #ffffff;
}

.btn-success:active {
    background: linear-gradient(90deg, #198754, #157347);
    color: #ffffff;
}



.btn-info {
    background: linear-gradient(90deg, #17a2b8, #138496); /* Cyan ke biru kehijauan */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-info:hover {
    background: linear-gradient(90deg, #3bd3ec, #119ab0) !important;
    color: #fff !important;
}

.btn-info:focus {
    background: linear-gradient(90deg, #0dcaf0, #0a9abf);
    color: #ffffff;
}

.btn-info:active {
    background: linear-gradient(90deg, #0b9dbb, #087a97);
    color: #ffffff;
}


.btn-light {
    background: linear-gradient(90deg, #f8f9fa, #e9ecef); /* Putih ke abu terang */
    color: #212529;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-light:hover {
    background: linear-gradient(90deg, #dee2e6, #ced4da) !important;
    color: #212529 !important;
}

.btn-light:focus {
    background: linear-gradient(90deg, #e2e6ea, #cbd3da);
    color: #212529;
}

.btn-light:active {
    background: linear-gradient(90deg, #d6d8db, #adb5bd);
    color: #212529;
}

.btn-warning {
    background: linear-gradient(90deg, #ffc107, #e0a800); /* Kuning ke emas */
    color: #212529;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-warning:hover {
    background: linear-gradient(90deg, #ffd54f, #ffb300) !important;
    color: #212529 !important;
}

.btn-warning:focus {
    background: linear-gradient(90deg, #ffca2c, #d39e00);
    color: #212529;
}

.btn-warning:active {
    background: linear-gradient(90deg, #e0a800, #c69500);
    color: #212529;
}

.btn-dark {
    background: linear-gradient(90deg, #343a40, #23272b); /* Abu tua ke hitam */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-dark:hover {
    background: linear-gradient(90deg, #495057, #343a40) !important;
    color: #ffffff !important;
}

.btn-dark:focus {
    background: linear-gradient(90deg, #3e444a, #2b2f33);
    color: #ffffff;
}

.btn-dark:active {
    background: linear-gradient(90deg, #23272b, #1d2124);
    color: #ffffff;
}


.btn-secondary {
    background: linear-gradient(90deg, #6c757d, #5a6268); /* Abu medium ke tua */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
}

button.btn.btn-secondary:hover {
    background: linear-gradient(90deg, #868e96, #6c757d) !important;
    color: #ffffff !important;
}

.btn-secondary:focus {
    background: linear-gradient(90deg, #5c636a, #495057);
    color: #ffffff;
}

.btn-secondary:active {
    background: linear-gradient(90deg, #444b52, #343a40);
    color: #ffffff;
}


.btn-purple {
    background: linear-gradient(90deg, #8e2de2, #ff6ec4); /* Ungu ke pink */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
    border: none;
}

button.btn.btn-purple:hover {
    background: linear-gradient(90deg, #a044ff, #ff79b0) !important;
    color: #ffffff !important;
}

.btn-purple:focus {
    background: linear-gradient(90deg, #7e1fc5, #e05aaa);
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(142, 45, 226, 0.5);
}

.btn-purple:active {
    background: linear-gradient(90deg, #6a11cb, #d441a1);
    color: #ffffff;
}

.btn-teal {
    background: linear-gradient(90deg, #20c997, #17a2b8); /* Toska segar */
    color: #ffffff;
    transition: background 0.3s ease, color 0.3s ease;
    border: none;
}

button.btn.btn-teal:hover {
    background: linear-gradient(90deg, #48e5c2, #1dc8e0) !important;
    color: #ffffff !important;
}

.btn-teal:focus {
    background: linear-gradient(90deg, #1fb89e, #1698a5);
    color: #ffffff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.5);
}

.btn-teal:active {
    background: linear-gradient(90deg, #17a2b8, #138f99);
    color: #ffffff;
}

.btn-indigo {
  background: linear-gradient(90deg, #6610f2, #520dc2);
  color: #fff;
}
.btn-indigo:hover,
.btn-indigo:focus {
  background: linear-gradient(90deg, #520dc2, #3d0ca3);
  color: #fff;
}
.btn-indigo:active {
  background: linear-gradient(90deg, #3d0ca3, #2e0a8c);
  color: #fff;
}

.btn-cyan {
  background: linear-gradient(90deg, #06b6d4, #0891b2);
  color: #fff;
}
.btn-cyan:hover,
.btn-cyan:focus {
  background: linear-gradient(90deg, #0891b2, #0e7490);
  color: #fff;
}
.btn-cyan:active {
  background: linear-gradient(90deg, #0e7490, #155e75);
  color: #fff;
}

.btn-rose {
  background: linear-gradient(90deg, #f43f5e, #be123c);
  color: #fff;
}
.btn-rose:hover,
.btn-rose:focus {
  background: linear-gradient(90deg, #be123c, #9f1239);
  color: #fff;
}
.btn-rose:active {
  background: linear-gradient(90deg, #9f1239, #881337);
  color: #fff;
}

.btn-amber {
  background: linear-gradient(90deg, #f59e0b, #d97706);
  color: #fff;
}
.btn-amber:hover,
.btn-amber:focus {
  background: linear-gradient(90deg, #d97706, #b45309);
  color: #fff;
}
.btn-amber:active {
  background: linear-gradient(90deg, #b45309, #92400e);
  color: #fff;
}

.btn-lime {
  background: linear-gradient(90deg, #84cc16, #65a30d);
  color: #fff;
}
.btn-lime:hover,
.btn-lime:focus {
  background: linear-gradient(90deg, #65a30d, #4d7c0f);
  color: #fff;
}
.btn-lime:active {
  background: linear-gradient(90deg, #4d7c0f, #3f6212);
  color: #fff;
}

.btn-sky {
  background: linear-gradient(90deg, #0ea5e9, #0284c7);
  color: #fff;
}
.btn-sky:hover,
.btn-sky:focus {
  background: linear-gradient(90deg, #0284c7, #0369a1);
  color: #fff;
}
.btn-sky:active {
  background: linear-gradient(90deg, #0369a1, #075985);
  color: #fff;
}

.btn-slate {
  background: linear-gradient(90deg, #64748b, #475569);
  color: #fff;
}
.btn-slate:hover,
.btn-slate:focus {
  background: linear-gradient(90deg, #475569, #334155);
  color: #fff;
}
.btn-slate:active {
  background: linear-gradient(90deg, #334155, #1e293b);
  color: #fff;
}














/*btn primary dan danger yg udah diupdet utamanya dibagian login */


.btn-custom {
    background: linear-gradient(90deg, #6a11cb, #2575fc);
    border: none;
    border-radius: 25px;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    transition: transform .3s ease-in-out;
    color: #f8f9fa;
}
.btn-custom:hover i,
.btn-custom:focus i,
.btn-custom:active i {
    color: #ffffff; /* atau warna apa pun yang kamu mau */
}

.btn-custom:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #5f0ea1, #1d5be2); /* versi hover yang lebih pekat */
   color: #f8f9fa;
}

.btn-custom:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(106, 17, 203, 0.4); /* shadow ungu lembut */
}

.btn-custom:active {
    transform: scale(0.98);
    background: linear-gradient(90deg, #4e0b85, #1846b3); /* versi lebih gelap saat diklik */
}

.btn-danger-custom {
    background: linear-gradient(90deg, #ff416c, #ff4b2b) !important; /* gradasi pink-merah */
    border: none;
    border-radius: 25px;
    padding: 12px;
    font-size: 16px;
    width: 100%;
    color: #f8f9fa;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
    box-shadow: 0 4px 14px rgba(255, 65, 108, 0.3); /* soft shadow elegan */
}

.btn-danger-custom:hover {
    transform: scale(1.05);
    background: linear-gradient(90deg, #e7335a, #e7381f); /* warna lebih pekat */
    color: #fff;
}

.btn-danger-custom:focus {
    outline: none;
    box-shadow: 0 0 0 0.25rem rgba(255, 65, 108, 0.4); /* glow fokus */
}

.btn-danger-custom:active {
    transform: scale(0.97);
    background: linear-gradient(90deg, #cc2c50, #cc3019); /* gelap saat ditekan */
}