/* SENYUMTOTO CSS 01 - dipisahkan dari index.html */
/* KUNCI overflow agar tidak meluber ke kanan */
   .preview,
   .m-product-preview__glider,
   .glide,
   .glide__track {
    overflow: hidden !important;
    max-width: 100% !important;
   }

   /* Biarkan Glide bekerja normal */
   .glide__slides {
    display: flex !important;
    /* jaga-jaga */
    margin: 0 !important;
    /* rollback kalau sebelumnya sempat dipasang: */
    contain: none !important;
   }

   /* Pastikan gambar terlihat dan tidak “ngecil 0” */
   .glide__slide img,
   .m-product-preview__glider-img img,
   .preview .jsProductMainImage {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
   }

   /* Anti scroll horizontal */
   html,
   body {
    overflow-x: hidden !important;
   }

.vc-header-logo{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
}

/*==============================
GRID BUTTON
==============================*/

.n-columns-2{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:15px;
    margin:0 auto;
    font-weight:700;
}

.n-columns-2 a{
    position:relative;
    overflow:hidden;
    text-align:center;
    text-decoration:none;
}

/*==============================
TEXT BUTTON
==============================*/

.login,
.register{
    display:block;
    padding:16px 10px;
    font-size:18px;
    font-weight:900;
    text-transform:uppercase;
    letter-spacing:1px;
    color:#fff;
    border-radius:14px;
    transition:
        filter .25s ease,
        box-shadow .25s ease;
}

/*==============================
EFEK AWAN
==============================*/

.login::after,
.register::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:0;

    background:
        radial-gradient(circle at 20% 35%,rgba(255,255,255,.8) 0 10%,transparent 12%),
        radial-gradient(circle at 28% 42%,rgba(255,255,255,.65) 0 9%,transparent 11%),
        radial-gradient(circle at 37% 35%,rgba(255,255,255,.8) 0 10%,transparent 12%),
        radial-gradient(circle at 68% 30%,rgba(255,255,255,.6) 0 8%,transparent 10%),
        radial-gradient(circle at 76% 38%,rgba(255,255,255,.7) 0 10%,transparent 12%);

    opacity:.12;
    pointer-events:none;
}

/*==============================
LOGIN - MERAH DARAH
==============================*/

.login,
.login-button{
    background:
        linear-gradient(
            180deg,
            #ff6b6b 0%,
            #e00000 20%,
            #b40000 48%,
            #770000 75%,
            #3a0000 100%
        );

    border:2px solid #ff3b3b;

    color:#ffffff;

    text-shadow:
        0 2px 2px #000,
        0 0 6px rgba(255,0,0,.55);

    box-shadow:
        0 6px 0 #350000,
        0 12px 22px rgba(110,0,0,.5),
        inset 0 2px 2px rgba(255,255,255,.35),
        inset 0 -8px 14px rgba(30,0,0,.65);

    animation:darahShake 2.8s ease-in-out infinite;
}

/* highlight atas */

.login::before{
    content:"";
    position:absolute;
    top:4px;
    left:6%;
    width:88%;
    height:30%;
    z-index:1;

    border-radius:15px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.55),
            rgba(255,255,255,.08),
            transparent
        );

    pointer-events:none;
}

/*==============================
REGISTER - MERAH DARAH TERANG
==============================*/

.register,
.register-button{
    background:
        linear-gradient(
            180deg,
            #ff8a8a 0%,
            #f01a1a 20%,
            #c00000 48%,
            #850000 75%,
            #450000 100%
        );

    border:2px solid #ff5a5a;

    color:#ffffff;

    text-shadow:
        0 2px 2px #000,
        0 0 6px rgba(255,0,0,.45);

    box-shadow:
        0 6px 0 #400000,
        0 12px 22px rgba(120,0,0,.48),
        inset 0 2px 2px rgba(255,255,255,.4),
        inset 0 -8px 14px rgba(40,0,0,.6);

    animation:darahShakeAlt 3.1s ease-in-out infinite;
}

.register::before{
    content:"";
    position:absolute;
    top:4px;
    left:6%;
    width:88%;
    height:30%;
    z-index:1;

    border-radius:15px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.58),
            rgba(255,255,255,.1),
            transparent
        );

    pointer-events:none;
}

/*==============================
TEKS DI ATAS EFEK
==============================*/

.login span,
.register span{
    position:relative;
    z-index:3;
    display:inline-block;
}

/*==============================
ANIMASI GETAR
==============================*/

@keyframes darahShake{
    0%,88%,100%{
        transform:translate(0,0) rotate(0deg);
    }

    90%{
        transform:translate(-2px,0) rotate(-.5deg);
    }

    92%{
        transform:translate(2px,0) rotate(.5deg);
    }

    94%{
        transform:translate(-2px,0) rotate(-.5deg);
    }

    96%{
        transform:translate(2px,0) rotate(.5deg);
    }

    98%{
        transform:translate(-1px,0);
    }
}

@keyframes darahShakeAlt{
    0%,84%,100%{
        transform:translate(0,0) rotate(0deg);
    }

    86%{
        transform:translate(2px,0) rotate(.5deg);
    }

    89%{
        transform:translate(-2px,0) rotate(-.5deg);
    }

    92%{
        transform:translate(2px,0) rotate(.5deg);
    }

    95%{
        transform:translate(-2px,0) rotate(-.5deg);
    }

    98%{
        transform:translate(1px,0);
    }
}

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

.login:hover,
.register:hover{
    filter:brightness(1.18);

    box-shadow:
        0 7px 0 #350000,
        0 16px 30px rgba(180,0,0,.6),
        0 0 22px rgba(255,0,0,.45),
        inset 0 2px 2px rgba(255,255,255,.4);
}

.login:active,
.register:active{
    transform:translateY(4px);

    box-shadow:
        0 2px 0 #350000,
        0 5px 10px rgba(0,0,0,.45);
}

/*==============================
RESPONSIVE
==============================*/

@media(max-width:480px){

    .n-columns-2{
        gap:10px;
    }

    .login,
    .register{
        font-size:16px;
        padding:14px 8px;
        border-radius:11px;
    }
}

@media(prefers-reduced-motion:reduce){
    .login,
    .register{
        animation:none;
    }
}