/* =========================================
   GLOBAL LINK
   EMBER SCARLET × PREMIUM GOLD
========================================= */

a,
a.bold {
    color: #ffd84a;
    text-decoration: none;
    cursor: pointer;
    font-weight: 800;

    transition:
        color .25s ease,
        text-shadow .25s ease;
}

a:hover,
a.bold:hover {
    color: #ffd2a3;

    text-shadow:
        0 0 8px rgba(255, 118, 42, .62),
        0 0 15px rgba(255, 216, 74, .24);
}

/* =========================================
   BUTTON GROUP
========================================= */

.btn-group {
    display: flex;
    width: 100%;
    gap: 14px;
    margin-bottom: 16px;
}

/* =========================================
   BASE BUTTON
========================================= */

.btn {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;
    min-height: 50px;
    padding: 12px 18px;

    border: 1px solid rgba(255, 216, 74, .82);
    border-radius: 13px;

    color: #ffffff;
    text-align: center;
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-decoration: none;

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(255, 143, 61, .34),
            transparent 24%
        ),
        radial-gradient(
            circle at 85% 88%,
            rgba(255, 216, 74, .18),
            transparent 30%
        ),
        linear-gradient(
            135deg,
            #7c1d17 0%,
            #3c0b09 34%,
            #100404 58%,
            #241800 82%,
            #ffd84a 140%
        );

    box-shadow:
        0 5px 0 #0c0505,
        0 12px 30px rgba(0, 0, 0, .72),
        0 0 18px rgba(220, 53, 28, .30),
        0 0 26px rgba(255, 216, 74, .15),
        inset 0 2px 5px rgba(255, 255, 255, .14),
        inset 0 -6px 12px rgba(0, 0, 0, .52);

    text-shadow:
        0 2px 2px rgba(0, 0, 0, .95),
        0 0 8px rgba(247, 91, 35, .48);

    transition:
        transform .30s ease,
        color .30s ease,
        border-color .30s ease,
        box-shadow .30s ease,
        filter .30s ease;
}

/* =========================================
   LOGIN BUTTON
========================================= */

.btn-login{
    color:#000000;

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(255,208,74,.18),
            transparent 24%
        ),
        linear-gradient(
            135deg,
            #fed804 0%,
            #fed804 35%,
            #fed804 68%,
            #000000 100%
        );

    border-color:rgba(255,208,74,.82);

    text-shadow:
        0 1px 3px rgba(0,0,0,.6);

    box-shadow:
        0 5px 0 #000000,
        0 12px 30px rgba(0,0,0,.75),
        0 0 18px rgba(255,208,74,.18),
        0 0 12px rgba(165,12,24,.22),
        inset 0 2px 5px rgba(255,255,255,.08),
        inset 0 -6px 12px rgba(0,0,0,.45);
}

/* =========================================
   DAFTAR BUTTON
========================================= */

.btn-daftar{
    color:#1d1100;

    background:
        radial-gradient(
            circle at 18% 14%,
            rgba(255,255,255,.35),
            transparent 22%
        ),
        linear-gradient(
            135deg,
            #fff7c9 0%,
            #ffd84a 35%,
            #c48a08 70%,
            #6b4100 100%
        );

    border-color:rgba(255,208,74,.95);

    text-shadow:
        0 1px 0 rgba(255,255,255,.45);

    box-shadow:
        0 5px 0 #3d2500,
        0 12px 30px rgba(0,0,0,.68),
        0 0 18px rgba(255,208,74,.28),
        inset 0 2px 6px rgba(255,255,255,.30),
        inset 0 -6px 12px rgba(94,58,0,.38);
}

/* =========================================
   MOVING LIGHT EFFECT
========================================= */

.btn::before{
    content:"";
    position:absolute;
    top:-35%;
    left:-110%;

    width:52%;
    height:170%;

    background:
        linear-gradient(
            110deg,
            transparent 0%,
            rgba(255,208,74,.10) 25%,
            rgba(255,255,255,.70) 48%,
            rgba(255,208,74,.40) 68%,
            rgba(165,12,24,.15) 82%,
            transparent 100%
        );

    transform:skewX(-22deg);
    transition:left .72s ease;

    pointer-events:none;
    z-index:-1;
}

.btn:hover::before{
    left:145%;
}
.btn-login:hover{
    border-color:#ffd84a;
    box-shadow:
        0 5px 0 #000000,
        0 0 24px rgba(255,208,74,.35),
        0 0 18px rgba(165,12,24,.30),
        inset 0 2px 6px rgba(255,255,255,.10);
}

.btn-daftar:hover{
    box-shadow:
        0 5px 0 #3d2500,
        0 0 26px rgba(255,208,74,.45),
        inset 0 2px 8px rgba(255,255,255,.38);
}

/* =========================================
   GLASS OVERLAY
========================================= */

.btn::after {
    content: "";
    position: absolute;
    inset: 2px;

    border-radius: 10px;

    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, .14),
            transparent 42%,
            rgba(0, 0, 0, .12)
        );

    pointer-events: none;
    z-index: -1;
}

/* =========================================
   HOVER
========================================= */

.btn:hover {
    transform: translateY(-4px) scale(1.025);

    color: #ffffff;
    border-color: #ffd84a;

    filter: brightness(1.10);

    box-shadow:
        0 7px 0 #0c0505,
        0 18px 40px rgba(0, 0, 0, .82),
        0 0 24px rgba(238, 69, 30, .55),
        0 0 38px rgba(255, 216, 74, .30),
        inset 0 2px 7px rgba(255, 255, 255, .22),
        inset 0 -7px 14px rgba(0, 0, 0, .58);
}

.btn-daftar:hover {
    color: #160707;

    box-shadow:
        0 7px 0 #332000,
        0 18px 40px rgba(0, 0, 0, .78),
        0 0 26px rgba(255, 216, 74, .62),
        0 0 38px rgba(224, 63, 29, .24),
        inset 0 2px 7px rgba(255, 255, 255, .36),
        inset 0 -7px 14px rgba(81, 49, 0, .42);
}

/* =========================================
   ACTIVE
========================================= */

.btn:active {
    transform: translateY(2px) scale(.98);

    box-shadow:
        0 2px 0 #0c0505,
        0 0 14px rgba(230, 58, 28, .34),
        inset 0 4px 10px rgba(0, 0, 0, .56);
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {
    .btn-group {
        gap: 9px;
    }

    .btn {
        min-height: 46px;
        padding: 11px 12px;

        font-size: 12px;
        letter-spacing: .7px;
        border-radius: 11px;
    }

    .btn::after {
        border-radius: 8px;
    }
}

@media (max-width: 420px) {
    .btn-group {
        flex-direction: column;
    }

    .btn {
        width: 100%;
    }
}