.scbox{
    position: fixed;
    right:18px;
    top:10px;
    z-index:1;
}
.loginqu{
    position: fixed;
    right:18px;
    top:11px;
}
.scinput {
    width: 39px;
    height: 39px;
    padding: 0;
    text-align: center;

    background: linear-gradient(#ffffff, #f7f7f7) padding-box,
                linear-gradient(120deg,#0f766e,#134e4a) border-box;

    border: 3px solid transparent;
    border-radius: 50%;

    box-sizing: border-box;

    font-family: 'Lexend Deca', sans-serif;
    font-size: 15px;
    font-weight: 600;

    color: #0f172a;

    outline: none;

    transition: all .25s ease;

    box-shadow: 0 4px 12px rgba(15, 118, 110, 0.15);
}

/* hover */
.scinput:hover {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(15, 118, 110, 0.25);
}

/* focus */
.scinput:focus {
    transform: scale(1.12);
    box-shadow: 0 0 0 4px rgba(15, 118, 110, 0.15),
                0 10px 25px rgba(15, 118, 110, 0.25);
}

/* remove arrows (kalau type number) */
.scinput::-webkit-outer-spin-button,
.scinput::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.scbox:hover input{
    width: 115px;
    background: #ffffffbb;
    border-radius: 25px;
}

/* default: sembunyikan placeholder */
.scinput::placeholder {
    opacity: 0;
    transition: opacity .2s ease;
}

/* saat focus: tampilkan */
.scinput:focus::placeholder {
    opacity: 1;
}
.scbox img{
    position: absolute;
    top: 20px;
    right: 0px;
    transform: translate(-50%,-50%);
    font-size: 26px;
    color: #000000;
    transition: .2s;
}
.scbox:hover img{
    opacity: 0;
    z-index: -1;
}