/* Inline <style> #7 — Octagram */


a,
a.bold{
    color:#fdd017;
    text-decoration:none;
    cursor:pointer;
    font-weight:800;
}
a:hover,
a.bold:hover{
    color:#fff1a8;
}
.btn-group{
    display:flex;
    width:100%;
    gap:14px;
    margin-bottom:16px;
}
.btn{
    flex:1;
    height:48px;
    line-height:48px;
    text-align:center;
    font-weight:900;
    letter-spacing:1px;
    text-transform:uppercase;
    text-decoration:none;
    border-radius:12px;
    position:relative;
    overflow:hidden;
    display:block;
    color:#e8e8e8;
    transition:.35s ease;
    border:1px solid rgba(253,208,23,.7);
    background:linear-gradient(135deg,#fdd017 0%,#080808 50%,#fdd017 100%);
    box-shadow:0 12px 30px rgba(0,0,0,.75),0 0 20px rgba(253,208,23,.25);
}
.btn-daftar,
.btn-login{
    color:#e8e8e8;
}
.btn:hover{
    transform:translateY(-4px) scale(1.03);
    color:#ffffff;
    border-color:#fff1a8;
    box-shadow:0 18px 40px rgba(0,0,0,.85),0 0 40px rgba(253,208,23,.55);
}
.btn::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;
    width:60%;
    height:100%;
    background:linear-gradient(110deg,transparent,rgba(255,255,255,.7),transparent);
    transform:skewX(-20deg);
    transition:.7s ease;
}
.btn:hover::before{
    left:150%;
}
.btn::after{
    content:"";
    position:absolute;
    inset:2px;
    border-radius:10px;
    background:linear-gradient(145deg,rgba(255,255,255,.12),transparent 40%);
    pointer-events:none;
}
