body.login-page {
    min-height: 100vh;
    background-image: url('../img/bg/mybot3.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-color: #f5f6fa;
}



/* Card transparan */
body.login-page .card {
    background-color: rgba(255, 255, 255, 0.95);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* =========================
   API KEY - CODE STYLE
========================= */
.api-key-code {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 8px;
    background: #f8f9fc;
    border: 1px solid #1cc88a;
    color: #1cc88a;
    font-family: "Courier New", monospace;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
    cursor: pointer;
}

.api-key-code i {
    font-size: 12px;
}

.api-key-code:hover {
    background: #e6f9f2;
    box-shadow: 0 0 0 3px rgba(28, 200, 138, 0.15);
}

.login-animation{
    width:100%;
    height:auto;
    margin-bottom:5px;
    margin-top:-5px;
}

.robot-login-svg{
    width:300px;
    height:auto;
}

.robot-svg{
    display:flex;
    justify-content:center;
    align-items:center;
    margin:auto;
}

/* =========================
   ROBOT ANIMATIONS
========================= */

/* Eye blinking - targeting ellipse eyes */
.eyeL, .eyeR {
    transform-origin: center;
    animation: blink 4s infinite;
}

rect, ellipse{
shape-rendering:geometricPrecision;
}

@keyframes blink {
    0%, 90%, 100% {
        transform: scaleY(1);
    }
    95% {
        transform: scaleY(0.1);
    }
}

/* animasi handsake */
.human-arm{
    transform-origin:200px 131px;
}

.robot-arm{
    transform-origin:212px 131px;
}

/* Electrik */
.spark{
opacity:0;
animation:electricBorder 1.5s linear infinite;
filter: drop-shadow(0 0 6px #00e5ff);
}

/* =========================
   GLOW BORDER LOGIN CARD
========================= */

.login-glow{
    position: relative;
    overflow: hidden;
}

/* border glow */
.login-glow::before{
    content:"";
    position:absolute;
    inset:-2px;
    border-radius:12px;
    background:linear-gradient(
        90deg,
        #00e5ff,
        #4e73df,
        #00e5ff,
        #4e73df
    );
    background-size:300% 300%;
    z-index:0;
    opacity:0;
}

/* isi card tetap di atas */
.login-glow .card-body{
    position:relative;
    z-index:1;
    background:white;
    border-radius:12px;
}

/* animasi berjalan */
@keyframes borderRun{
    0%{background-position:0% 50%;}
    50%{background-position:100% 50%;}
    100%{background-position:0% 50%;}
}

/* aktif ketika focus */
.login-glow.active::before{
    opacity:1;
    animation:borderRun 3s linear infinite;
}

/* WRAPPER GLOW */
.login-glow-wrapper{
    position: relative;
    border-radius: 14px;
    padding: 10px; 
}

.login-glow-wrapper .card{
    margin:0 !important;
}

/* ANIMATED BORDER */
.login-glow-wrapper::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:14px;
    padding:5px;

    background:
    linear-gradient(
        90deg,
        transparent 0%,
        transparent 40%,
        #00e5ff 50%,
        transparent 60%,
        transparent 100%
    );

    background-size:200% 100%;
    opacity:0;

    /* membuat hanya border yang terlihat */
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite:xor;
            mask-composite:exclude;

    animation: electricBorder 1.5s linear infinite;
}

/* animasi listrik berjalan */
@keyframes electricBorder{

    0%{
        background-position:200% 0;
    }

    100%{
        background-position:-200% 0;
    }

}

/* card tetap di atas */
.login-card{
    position:relative;
    z-index:1;
    border-radius:12px;
}

/* animasi */
@keyframes glowRun{

    0%{
        background-position:0% 50%;
    }

    50%{
        background-position:100% 50%;
    }

    100%{
        background-position:0% 50%;
    }

}

/* aktif */
.login-glow-wrapper.active::before{
    opacity:1;
    animation:glowRun 3s linear infinite;
}



/* FLOATING INPUT */

.floating-input{
    position:relative;
}

.floating-input input{
    height:50px;
}

.floating-input label{

    position:absolute;
    left:20px;
    top:50%;
    transform:translateY(-50%);

    font-size:14px;
    color:#888;

    background:#fff;
    padding:0 6px;

    pointer-events:none;

    transition:0.25s ease;
}

/* ketika focus */

.floating-input input:focus + label,
.floating-input input:not(:placeholder-shown) + label{

    top:0;
    transform:translateY(-50%);
    font-size:12px;
    color:#4e73df;

}