/* ------------------------------------------------------------------
   HB JIRA Team - login maskotu (turuncu robot)
   Kart uzerinden bakan, gercek 3D kafa donduren CSS rig.
   Yerlesim birimi: 240 x 168 px kutu, kartin ust kenarina 34px binen.
   ------------------------------------------------------------------ */

.lx-card-slot { position: relative; }
#login-screen .login-card { position: relative; z-index: 1; }

/* z-index: auto -> yigin baglami olusturmaz, katmanlar kartin onune/arkasina gecebilir */
.rbt {
    position: absolute;
    left: 50%;
    bottom: 100%;
    width: 240px;
    height: 168px;
    margin-left: -120px;
    margin-bottom: -34px;
    pointer-events: none;
    z-index: auto;

    --yaw: 0deg;
    --pitch: 0deg;
    --roll: 0deg;
    --lift: 0px;
    --sx: 1;
    --sy: 1;
    --eye-x: 0px;
    --eye-y: 0px;
    --glint-x: 0px;
    --glint-y: 0px;
    --arm-l-a: 37.8deg;
    --arm-l-b: -46.6deg;
    --arm-r-a: -37.8deg;
    --arm-r-b: 46.6deg;
    --scale: 1;
}

.rbt-back,
.rbt-front {
    position: absolute;
    inset: 0;
    perspective: 780px;
    perspective-origin: 50% 34%;
    transform: scale(var(--scale));
    transform-origin: 50% 100%;
}

.rbt-back { z-index: 0; }
.rbt-front { z-index: 2; }

.rbt-fx {
    position: absolute;
    left: -90px;
    right: -90px;
    top: -110px;
    bottom: -260px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.2s;
}

.rbt-fx.on { opacity: 1; }
.rbt-fx canvas { width: 100%; height: 100%; display: block; }

.rbt-rig {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transform: translateY(var(--lift)) scale(var(--sx), var(--sy));
    transform-origin: 50% 100%;
}

.rbt-bob {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    animation: rbtFloat 4.6s ease-in-out infinite;
}

@keyframes rbtFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4.5px); }
}

/* ---------- govde ---------- */
.rbt-neck {
    position: absolute;
    left: 50%;
    top: 62px;
    width: 30px;
    height: 20px;
    margin-left: -15px;
    border-radius: 8px;
    background: linear-gradient(180deg, #2A2F3C, #171A24);
    box-shadow: inset 0 -3px 6px rgba(0, 0, 0, 0.6), inset 0 2px 3px rgba(255, 255, 255, 0.09);
}

.rbt-torso {
    position: absolute;
    left: 50%;
    top: 72px;
    width: 104px;
    height: 96px;
    margin-left: -52px;
    border-radius: 34px 34px 20px 20px / 40px 40px 20px 20px;
    background:
        radial-gradient(ellipse 70% 46% at 30% 12%, rgba(255, 214, 176, 0.5), transparent 62%),
        linear-gradient(158deg, #FF9C4F 0%, #FF7A22 34%, #E75300 72%, #B23C00 100%);
    box-shadow:
        inset -10px -6px 18px rgba(120, 40, 0, 0.55),
        inset 6px 4px 14px rgba(255, 220, 190, 0.28),
        0 16px 34px rgba(0, 0, 0, 0.5);
}

.rbt-chest {
    position: absolute;
    left: 50%;
    top: 96px;
    width: 52px;
    height: 40px;
    margin-left: -26px;
    border-radius: 16px;
    background: linear-gradient(165deg, #14171F, #05060A);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.85), 0 1px 0 rgba(255, 190, 150, 0.22);
}

.rbt-core {
    position: absolute;
    left: 50%;
    top: 110px;
    width: 15px;
    height: 15px;
    margin-left: -7.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #FFF3E6, #FFB169 42%, #FF6000 74%);
    box-shadow: 0 0 14px rgba(255, 96, 0, 0.95), 0 0 30px rgba(255, 96, 0, 0.45);
    animation: rbtCore 2.7s ease-in-out infinite;
}

@keyframes rbtCore {
    0%, 100% { opacity: 0.75; transform: scale(0.94); }
    50% { opacity: 1; transform: scale(1.06); }
}

/* ---------- kafa (gercek 3D kutu) ---------- */
.rbt-head-anchor {
    position: absolute;
    left: 50%;
    top: 39px;
    width: 0;
    height: 0;
    transform-style: preserve-3d;
}

.rbt-head {
    position: absolute;
    left: -42px;
    top: -37px;
    width: 84px;
    height: 74px;
    transform-style: preserve-3d;
    transform: rotateY(var(--yaw)) rotateX(var(--pitch)) rotateZ(var(--roll));
}

.rbt-face {
    position: absolute;
    left: 50%;
    top: 50%;
    backface-visibility: hidden;
}

.rbt-f-front {
    width: 84px;
    height: 74px;
    margin: -37px 0 0 -42px;
    border-radius: 22px;
    transform: translateZ(27px);
    background:
        radial-gradient(ellipse 62% 40% at 28% 14%, rgba(255, 226, 198, 0.62), transparent 60%),
        linear-gradient(158deg, #FFA85F 0%, #FF8531 30%, #F26200 68%, #C64700 100%);
    box-shadow:
        inset -6px -6px 14px rgba(120, 40, 0, 0.45),
        inset 3px 3px 8px rgba(255, 226, 200, 0.3);
}

.rbt-f-left,
.rbt-f-right {
    width: 54px;
    height: 74px;
    margin: -37px 0 0 -27px;
    border-radius: 18px;
}

.rbt-f-left {
    transform: rotateY(-90deg) translateZ(42px);
    background: linear-gradient(180deg, #FF9145 0%, #DE5A00 58%, #A83E00 100%);
}

.rbt-f-right {
    transform: rotateY(90deg) translateZ(42px);
    background: linear-gradient(180deg, #E97314 0%, #BC4900 58%, #8C3200 100%);
}

.rbt-f-top,
.rbt-f-bottom {
    width: 84px;
    height: 54px;
    margin: -27px 0 0 -42px;
    border-radius: 20px;
}

.rbt-f-top {
    transform: rotateX(90deg) translateZ(37px);
    background: linear-gradient(180deg, #FFD3A6 0%, #FFA25A 55%, #FF7A22 100%);
}

.rbt-f-bottom {
    transform: rotateX(-90deg) translateZ(37px);
    background: linear-gradient(180deg, #7E2C00, #4E1B00);
}

/* yan kulaklik podlari */
.rbt-pod {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 22px;
    height: 22px;
    margin: -11px 0 0 -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 36%, #3A4152, #10131B 70%);
    box-shadow: 0 0 0 3px rgba(255, 130, 50, 0.55), inset 0 -2px 4px rgba(0, 0, 0, 0.8);
}

.rbt-pod::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 7px;
    height: 7px;
    margin: -3.5px 0 0 -3.5px;
    border-radius: 50%;
    background: #FF7A22;
    box-shadow: 0 0 8px rgba(255, 122, 34, 0.9);
}

/* anten */
.rbt-antenna {
    position: absolute;
    left: 50%;
    top: -20px;
    width: 3px;
    height: 22px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: linear-gradient(180deg, #C9D2E0, #6C7686);
    transform-origin: 50% 100%;
    animation: rbtAntenna 3.4s ease-in-out infinite;
}

.rbt-antenna::after {
    content: '';
    position: absolute;
    left: 50%;
    top: -7px;
    width: 11px;
    height: 11px;
    margin-left: -5.5px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #FFF0DF, #FF9A45 45%, #FF5A00 80%);
    box-shadow: 0 0 12px rgba(255, 106, 0, 0.95);
    animation: rbtBlip 1.9s ease-in-out infinite;
}

@keyframes rbtAntenna {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(5deg); }
}

@keyframes rbtBlip {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ---------- yuz ---------- */
.rbt-visor {
    position: absolute;
    left: 10px;
    top: 16px;
    width: 64px;
    height: 36px;
    border-radius: 18px;
    transform: translateZ(2px);
    background: linear-gradient(165deg, #171B26 0%, #080A11 58%, #04050A 100%);
    box-shadow:
        inset 0 3px 7px rgba(0, 0, 0, 0.95),
        inset 0 -1px 0 rgba(255, 170, 120, 0.18),
        0 0 0 1.5px rgba(190, 92, 20, 0.5);
    overflow: hidden;
}

/* cam parlamasi */
.rbt-visor::after {
    content: '';
    position: absolute;
    left: -14px;
    top: -22px;
    width: 44px;
    height: 60px;
    transform: rotate(24deg);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.17), rgba(255, 255, 255, 0));
    pointer-events: none;
}

.rbt-eye {
    position: absolute;
    top: 11px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle at 38% 34%, #FFFFFF 0%, #BEE9FF 30%, #4FB6F5 62%, #0F6FB8 100%);
    box-shadow: 0 0 10px rgba(120, 205, 255, 0.9), 0 0 20px rgba(80, 180, 255, 0.4);
    transform: translate(var(--eye-x), var(--eye-y));
    transition: background 0.25s, box-shadow 0.25s, height 0.16s, border-radius 0.16s, top 0.16s;
}

.rbt-eye-l { left: 12px; }
.rbt-eye-r { left: 38px; }

.rbt-glint {
    position: absolute;
    left: 3px;
    top: 2.5px;
    width: 4.5px;
    height: 4.5px;
    border-radius: 50%;
    background: #FFFFFF;
    opacity: 0.95;
    transform: translate(var(--glint-x), var(--glint-y));
}

.rbt-lid {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 25px;
    background: linear-gradient(180deg, #1A1F2B 0%, #0A0D14 100%);
    transform-origin: 50% 0;
    transform: scaleY(0);
    animation: rbtBlink 6.4s linear infinite;
}

@keyframes rbtBlink {
    0%, 10.6%, 12.2%, 55%, 56.4%, 100% { transform: scaleY(0); }
    11.2%, 55.7% { transform: scaleY(1); }
}

.rbt-mouth {
    position: absolute;
    left: 50%;
    top: 27px;
    width: 22px;
    height: 4px;
    margin-left: -11px;
    border-radius: 3px;
    background: linear-gradient(90deg, rgba(255, 150, 70, 0.35), #FF7A22 30%, #FF7A22 70%, rgba(255, 150, 70, 0.35));
    box-shadow: 0 0 9px rgba(255, 122, 34, 0.75);
    transition: all 0.22s ease;
}

/* ---------- kollar (on katman, IK ile surulur) ---------- */
.rbt-arm {
    position: absolute;
    width: 15px;
    height: 40px;
    margin-left: -7.5px;
    top: 84px;
    border-radius: 8px;
    transform-origin: 50% 4px;
    background: linear-gradient(100deg, #FFA054, #F06400 62%, #B94100);
    box-shadow: inset -2px 0 4px rgba(110, 36, 0, 0.6), inset 2px 0 3px rgba(255, 216, 186, 0.3);
}

.rbt-arm-l { left: 80px; transform: rotate(var(--arm-l-a)); }
.rbt-arm-r { left: 160px; transform: rotate(var(--arm-r-a)); }

/* omuz kuresi */
.rbt-arm::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -8px;
    width: 22px;
    height: 22px;
    margin-left: -11px;
    border-radius: 50%;
    background: radial-gradient(circle at 36% 32%, #FFC08A, #FF7F2B 46%, #C24700 100%);
    box-shadow: inset -2px -2px 5px rgba(110, 36, 0, 0.55);
}

.rbt-forearm {
    position: absolute;
    left: 50%;
    top: 34px;
    width: 13px;
    height: 38px;
    margin-left: -6.5px;
    border-radius: 7px;
    transform-origin: 50% 4px;
    background: linear-gradient(100deg, #FF9B4C, #E85C00 62%, #A83A00);
    box-shadow: inset -2px 0 4px rgba(110, 36, 0, 0.6);
}

.rbt-arm-l .rbt-forearm { transform: rotate(var(--arm-l-b)); }
.rbt-arm-r .rbt-forearm { transform: rotate(var(--arm-r-b)); }

.rbt-hand {
    position: absolute;
    left: 50%;
    top: 26px;
    width: 21px;
    height: 19px;
    margin-left: -10.5px;
    border-radius: 10px 10px 9px 9px;
    background:
        radial-gradient(ellipse 60% 40% at 34% 24%, rgba(255, 232, 210, 0.55), transparent 60%),
        linear-gradient(150deg, #FFB374, #FF7A22 50%, #C24700);
    box-shadow: inset -2px -2px 5px rgba(110, 36, 0, 0.55), 0 3px 8px rgba(0, 0, 0, 0.4);
}

/* parmak ayrimi */
.rbt-hand::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 6px;
    width: 1.5px;
    height: 11px;
    margin-left: -0.75px;
    border-radius: 1px;
    background: rgba(120, 44, 0, 0.5);
}

/* ---------- durumlar ---------- */
/* utangac: parmak arasindan bakis, gozler kisilir */
.rbt.is-shy .rbt-eye {
    height: 5px;
    top: 16px;
    border-radius: 4px;
}

/* mutlu: gozler ters V, agiz genis */
.rbt.is-happy .rbt-eye {
    height: 7px;
    top: 12px;
    border-radius: 8px 8px 0 0;
    background: linear-gradient(180deg, #FFFFFF, #7FD4FF);
    box-shadow: 0 0 14px rgba(140, 215, 255, 0.95);
}

.rbt.is-happy .rbt-glint { opacity: 0; }

.rbt.is-happy .rbt-mouth {
    width: 26px;
    height: 12px;
    margin-left: -13px;
    top: 23px;
    border-radius: 3px 3px 12px 12px;
    background: linear-gradient(180deg, #FF9A45, #FF5A00);
    box-shadow: 0 0 14px rgba(255, 122, 34, 0.9);
}

/* hatali kod: kirmizi gozler, asagi kivrik agiz */
.rbt.is-sad .rbt-eye {
    background: radial-gradient(circle at 38% 34%, #FFFFFF 0%, #FFC9C9 26%, #FF5B5B 60%, #B41414 100%);
    box-shadow: 0 0 12px rgba(255, 80, 80, 0.95), 0 0 22px rgba(255, 40, 40, 0.45);
}

.rbt.is-sad .rbt-mouth {
    width: 20px;
    height: 9px;
    margin-left: -10px;
    top: 28px;
    border-radius: 9px 9px 2px 2px;
    background: linear-gradient(180deg, #FF5B5B, #B41414);
    box-shadow: 0 0 10px rgba(255, 70, 70, 0.8);
}

.rbt.is-sad .rbt-core,
.rbt.is-sad .rbt-antenna::after {
    background: radial-gradient(circle at 36% 32%, #FFE3E3, #FF6B6B 45%, #C81E1E 82%);
    box-shadow: 0 0 12px rgba(255, 60, 60, 0.9);
}

/* giris ekrani gorunur degilken bos yere calismasin */
.rbt[hidden] { display: none; }

@media (max-height: 880px) { .rbt { --scale: 0.86; } }
@media (max-height: 800px) { .rbt { --scale: 0.74; } }
@media (max-height: 730px) { .rbt { display: none; } }

@media (prefers-reduced-motion: reduce) {
    .rbt { display: none; }
}