/* =========================================================
   FINAL STYLE.CSS
   Project : Validasi Kode Voucher Game Menggunakan DFA
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');

:root{
    --bg1:#0f172a;
    --bg2:#111827;
    --bg3:#1e293b;
    --card:rgba(22,27,34,.92);
    --primary:#00e5ff;
    --success:#00ff99;
    --text:#f8fafc;
    --muted:#cbd5e1;
    --border:#334155;
}

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

html{scroll-behavior:smooth}

body{
    font-family:'Poppins',sans-serif;
    color:var(--text);
    min-height:100vh;
    background:linear-gradient(-45deg,var(--bg1),var(--bg2),var(--bg3),#0b1120);
    background-size:400% 400%;
    animation:bgMove 18s ease infinite;
}

@keyframes bgMove{
    0%{background-position:0 50%}
    50%{background-position:100% 50%}
    100%{background-position:0 50%}
}

.container{padding:40px 15px}

.card{
    max-width:1050px;
    margin:auto;
    border-radius:22px;
    padding:32px;
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(12px);
    box-shadow:0 20px 45px rgba(0,0,0,.45),0 0 25px rgba(0,229,255,.12);
    transition:.35s;
}

.card:hover{transform:translateY(-2px)}

h1{
    color:var(--primary);
    font-weight:700;
    text-shadow:0 0 15px rgba(0,229,255,.45);
}

h3,h4,h5{color:#fff}

p,.text-secondary{color:var(--muted)!important}

code{
    color:var(--success);
    font-size:1.05rem;
    font-weight:700;
}

.alert{
    border:none;
    border-radius:14px;
}

.alert-info{
    background:#123b52;
    color:#dff8ff;
}

.alert-success{
    background:#14532d;
    color:#d1fae5;
}

.alert-danger{
    background:#7f1d1d;
    color:#fecaca;
}

.form-control{
    background:#1f2937!important;
    color:#fff!important;
    border:2px solid var(--border);
    border-radius:14px;
    padding:14px 18px;
}

.form-control::placeholder{color:#94a3b8}

.form-control:focus{
    border-color:var(--primary);
    box-shadow:0 0 18px rgba(0,229,255,.3);
}

.btn-success{
    border:none;
    border-radius:14px;
    padding:14px;
    font-size:1.05rem;
    font-weight:600;
    background:linear-gradient(45deg,#00c853,#00e676);
    transition:.25s;
}

.btn-success:hover{
    transform:translateY(-2px);
    box-shadow:0 0 18px rgba(0,255,153,.4);
}

.path-box{
    margin-top:10px;
    background:#111827;
    border:1px solid #374151;
    border-radius:12px;
    padding:16px;
    color:var(--success);
    overflow-x:auto;
    white-space:nowrap;
    font-weight:600;
}

/* DFA */

.dfa-wrapper{
    margin-top:20px;
    display:flex;
    flex-direction:column;
    gap:18px;
}

.dfa-row{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:10px;
}

.transition{
    color:var(--primary);
    font-weight:700;
    min-width:48px;
    text-align:center;
}

.state{
    width:64px;
    height:64px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    background:#1e293b;
    border:3px solid #475569;
    color:#fff;
    font-weight:700;
    transition:.3s;
}

.state:hover{
    transform:scale(1.08);
}

.accept{
    border:5px double var(--success);
}

.active{
    background:var(--success);
    color:#111827;
    border-color:var(--success);
    animation:pulse .9s ease;
    box-shadow:0 0 12px var(--success),0 0 30px rgba(0,255,153,.7);
}

@keyframes pulse{
    0%{transform:scale(.7);opacity:.4}
    70%{transform:scale(1.12)}
    100%{transform:scale(1)}
}

.badge{
    padding:10px 18px;
}

::-webkit-scrollbar{width:10px;height:8px}
::-webkit-scrollbar-thumb{
    background:var(--primary);
    border-radius:20px;
}
::-webkit-scrollbar-track{
    background:#0f172a;
}

@media (max-width:992px){
    .card{padding:24px}
    .state{
        width:56px;
        height:56px;
        font-size:.9rem;
    }
}

@media (max-width:768px){
    h1{font-size:1.8rem}
    .transition{
        min-width:36px;
        font-size:.9rem;
    }
    .state{
        width:48px;
        height:48px;
        font-size:.8rem;
    }
    .path-box{
        font-size:.9rem;
    }
}

@media (max-width:480px){
    .card{padding:18px}
    .dfa-row{
        justify-content:flex-start;
    }
}
/* ======================================
   TABEL SIMULASI DFA
====================================== */

.table{

    margin-top:20px;

    border-radius:15px;

    overflow:hidden;

}

.table thead{

    background:#00bcd4;

    color:white;

}

.table tbody tr{

    transition:.25s;

}

.table tbody tr:hover{

    transform:scale(1.01);

}

.table td,
.table th{

    vertical-align:middle;

}
/* ===============================
   DASHBOARD
================================= */

.stat-card{

    background:#1e293b;

    border:1px solid rgba(255,255,255,.08);

    border-radius:16px;

    padding:20px;

    text-align:center;

    transition:.3s;

}

.stat-card:hover{

    transform:translateY(-5px);

    box-shadow:0 0 20px rgba(0,229,255,.25);

}

.stat-card h6{

    color:#cbd5e1;

    margin-bottom:10px;

}

.stat-card h2{

    font-size:34px;

    font-weight:700;

    color:#00e5ff;

}

.stat-card.success h2{

    color:#22c55e;

}

.stat-card.danger h2{

    color:#ef4444;

}

.stat-card.info h2{

    color:#38bdf8;

}