.vc-header-logo {

    display: -webkit-flex;

    display: flex;

    -webkit-align-items: center;

    gap: 12px;

    justify-content: space-between;

    align-items: center;

}

   /* Container tombol */

   .n-columns-2 {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 15px;

    font-weight: 700;

    margin: 0 auto;

   }



   .n-columns-2 a {

    text-align: center;

    margin: 0;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);

    position: relative;

    overflow: hidden;

   }



   .login,

   .register {

    color: #ffffff;

    padding: 16px 10px;

    letter-spacing: 1px;

    font-size: 18px;

    text-transform: uppercase;

   }



   /* Efek kilau untuk kedua tombol */

   .login::after,

   .register::after {

    content: '';

    position: absolute;

    top: -50%;

    left: -50%;

    width: 200%;

    height: 200%;

    background: linear-gradient(

        135deg,

        rgba(255, 255, 255, 0) 0%,

        rgba(255, 255, 255, 0.2) 25%,

        rgba(255, 255, 255, 0) 50%

    );

    transform: translateX(-100%) translateY(-100%) rotate(45deg);

    transition: transform 0.6s ease;

    pointer-events: none;

   }



   .login:hover::after,

   .register:hover::after {

    transform: translateX(100%) translateY(100%) rotate(45deg);

   }



   /* Tombol LOGIN - Yellow Chrome Glossy Premium */

   .login,

   .login-button {

    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);

    border-radius: 12px;

    border: 2px solid rgba(255, 215, 0, 0.3);

    box-shadow: 

        0 4px 0 #003d99,

        0 8px 15px rgba(0, 0, 0, 0.3),

        inset 0 1px 2px rgba(255, 255, 255, 0.5);

    background: linear-gradient(180deg, 

        #0052cc 0%,

        #0066ff 30%,

        #0066ff 70%,

        #0052cc 100%);

    color: #fff;

    position: relative;

   }



   /* Efek highlight atas untuk efek chrome */

   .login::before {

    content: '';

    position: absolute;

    top: 2px;

    left: 5%;

    width: 90%;

    height: 30%;

    background: linear-gradient(180deg, 

        rgba(255, 255, 255, 0.6) 0%,

        rgba(255, 255, 255, 0.2) 50%,

        rgba(255, 255, 255, 0) 100%);

    border-radius: 10px 10px 0 0;

    pointer-events: none;

   }



   .login:hover {

    background: linear-gradient(180deg, 

        #66a3ff 0%,

        #0052cc 30%,

        #0073e6 70%,

        #DAA520 100%);

    border-color: rgba(255, 215, 0, 0.6);

    box-shadow: 

        0 6px 0 #b8860b,

        0 12px 20px rgba(0, 0, 0, 0.4),

        inset 0 1px 3px rgba(255, 255, 255, 0.8);

    transform: translateY(-2px);

    color: white;

   }



   .login:active {

    transform: translateY(2px);

    box-shadow: 

        0 2px 0 #b8860b,

        0 5px 12px rgba(0, 0, 0, 0.3);

   }



   /* Tombol REGISTER - Dark Chrome Premium */

   .register,

   .register-button {

    text-shadow: 2px 2px 4px rgb(0, 82, 204);

    border-radius: 12px;

    border: 2px solid rgb(192, 192, 192);

    box-shadow: 

        0 4px 0 #0052cc,

        0 8px 15px rgb(0, 82, 204),

        inset 0 1px 2px rgba(255, 255, 255, 0.3);

    background: linear-gradient(180deg, 

        #5A5A5A 0%,

        #3A3A3A 30%,

        #1A1A1A 70%,

        #0A0A0A 100%);

    color: #fff;

    position: relative;

   }



   /* Efek highlight atas untuk efek dark chrome */

   .register::before {

    content: '';

    position: absolute;

    top: 2px;

    left: 5%;

    width: 90%;

    height: 30%;

    background: linear-gradient(180deg, 

        rgba(255, 255, 255, 0.4) 0%,

        rgba(255, 255, 255, 0.1) 50%,

        rgba(255, 255, 255, 0) 100%);

    border-radius: 10px 10px 0 0;

    pointer-events: none;

   }



   .register:hover {

    background: linear-gradient(180deg, 

        #707070 0%,

        #505050 30%,

        #303030 70%,

        #202020 100%);

    border-color: rgba(255, 255, 255, 0.2);

    box-shadow: 

        0 6px 0 #0052cc,

        0 12px 20px rgba(0, 0, 0, 0.5),

        inset 0 1px 3px rgba(255, 255, 255, 0.4);

    transform: translateY(-2px);

    color: gold;

   }



   .register:active {

    transform: translateY(2px);

    box-shadow: 

        0 2px 0 #0052cc,

        0 5px 12px rgba(0, 0, 0, 0.3);

   }



   /* Efek hover untuk interaksi */

   .login:hover, .register:hover {

    opacity: 1;

    filter: brightness(1.1);

   }



   /* Efek ikon panah kecil (opsional) */

   .login span, .register span {

    display: inline-block;

    transition: transform 0.3s ease;

   }



   .login:hover span, .register:hover span {

    transform: translateX(5px);

   }



   /* Responsif untuk mobile */

   @media (max-width: 480px) {

    .n-columns-2 {

        gap: 10px;

    }

    

    .login, .register {

        padding: 14px 8px;

        font-size: 16px;

    }

   }