/**
* Template Name: Emin
* Updated: Mar 4 2026 with Bootstrap v5.3.2
* Author: Akudewe
*/


/* ===============================
   PENGATURAN BACKGROUND
   =============================== */

/* OPSI 1: Background Gradient (AKTIF) */
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 95vh;
    display: flex;
    flex-direction: column;
    background: linear-gradient(135deg, #0f2027, #203a43, #2c5364);
}

/* OPSI 2: Background Gambar (NONAKTIFKAN GRADIENT DI ATAS LALU AKTIFKAN INI) */
/*
body {
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: url('assets/img/background.jpg') no-repeat center center fixed;
    background-size: cover;
}
*/

.btn-glass{
    padding:12px 28px;
    border-radius:12px;
    font-weight:600;
    background:rgba(255,255,255,0.2);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.3);
    color:#0d6efd;
    transition:0.25s;
}
.btn-glass:hover{
    background:#0d6efd;
    color:#fff;
}

.btn-3d-blue{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#0d6efd;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #084298;
    transition:0.1s;
}
.btn-3d-blue:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #084298;
}

.btn-3d-green{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#2fda2f;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #0c7c0c;
    transition:0.1s;
}
.btn-3d-green:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #0c7c0c;
}

.btn-3d-red{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#fd0d0d;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #9e0707;
    transition:0.1s;
}
.btn-3d-red:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #9e0707;
}

.btn-3d-purple{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#ad03b3;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #751278;
    transition:0.1s;
}
.btn-3d-purple:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #751278;
}

.btn-3d-orange{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#fd780d;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #a94f07;
    transition:0.1s;
}
.btn-3d-orange:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #a94f07;
}

.btn-3d-yellow{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#d6d82f;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #aeb022;
    transition:0.1s;
}
.btn-3d-yellow:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #aeb022;
}

.btn-3d-pink{
    padding:12px 28px;
    border:none;
    border-radius:8px;
    background:#fa7db5;
    color:#fff;
    font-weight:600;
    box-shadow:0 5px 0 #c85488;
    transition:0.1s;
}
.btn-3d-pink:active{
    transform:translateY(5px);
    box-shadow:0 0 0 #c85488;
}

.btn-outline{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #0d6efd;
    color:#0d6efd;
    font-weight:600;
    transition:0.25s;
}
.btn-outline:hover{
    background:#0d6efd;
    color:#fff;
}

.btn-outline-green{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #0dfd0d;
    color:#0dfd0d;
    font-weight:600;
    transition:0.25s;
}
.btn-outline-green:hover{
    background:#34a222;
    color:#fff;
}

.btn-outline-red{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #fd0d0d;
    color:#fff;
    font-weight:600;
    transition:0.25s;
}
.btn-outline-red:hover{
    background:#fd0d0d;
    color:#fff;
}

.btn-outline-purple{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #ad03b3;
    color:#fff;
    font-weight:600;
    transition:0.25s;
}
.btn-outline-purple:hover{
    background:#ad03b3;
    color:#fff;
}

.btn-outline-orange{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #fd780d;
    color:#fff;
    font-weight:600;
    transition:0.25s;
}
.btn-outline-purple:hover{
    background:#fd780d;
    color:#fff;
}

.btn-outline-yellow{
    padding:12px 28px;
    border-radius:8px;
    background:transparent;
    border:2px solid #f6f909;
    color:#fff;
    font-weight:600;
    transition:0.25s;
}
.btn-outline-yellow:hover{
    background:#f6f909;
    color:#fff;
}

.btn-beranda{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 22px;      /* atur tinggi-lebar tombol */
    font-size:14px;         /* atur ukuran teks */
    border-radius:8px;

    background:linear-gradient(135deg,#6c757d,#495057);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:0.25s ease;
}

.btn-beranda:hover{
    background:linear-gradient(135deg,#5c636a,#343a40);
    transform:translateY(-2px);
}


.container {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    color: #ffffff;
}

h1 {
    font-size: 36px;
    margin-bottom: 40px;
    letter-spacing: 1px;
}

.button-group {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.btn {
    padding: 18px 40px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 8px;
    text-decoration: none;
    transition: 0.3s ease;
    display: inline-block;
    min-width: 220px;
}

/* Warna bisa diubah sesuai kebutuhan */
.btn-guru {
    background-color: #00b894;
    color: #fff;
}

.btn-siswa {
    background-color: #0984e3;
    color: #fff;
}

.btn:hover {
    opacity: 0.85;
    transform: scale(1.03);
}

/* Footer */
.copyright {
    text-align: center;
    padding: 15px;
    font-size: 14px;
    background: rgba(0,0,0,0.4);
    color: #fff;
}

.copyright a {
    color: #ffd369;
    text-decoration: none;
}

@media(max-width:768px){
    .button-group{
        display:flex;
        justify-content:center;
    }
}

@media(max-width:768px){
    .btn-beranda{
        width:25%;
        justify-content:center;
    }
}