/* =====================================
   JALU PROJECT - LOGO HEADER
   ===================================== */

.brand.jalu-brand-img {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    text-decoration: none;
}

.brand.jalu-brand-img img {
    display: block;
    width: 178px;
    height: 72px;
    object-fit: contain;
}

/* Logo sidebar Admin */
.admin-brand.jalu-brand-img {
    display: block;
    width: 185px;
    max-width: 100%;
    margin: 0 0 32px 8px;
}

.admin-brand.jalu-brand-img img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 96px;
    object-fit: contain;
}

/* =====================================
   ANIMASI LOGO 3D BERANDA
   ===================================== */

.jalu-logo-stage {
    position: relative;
    z-index: 2;

    width: min(410px, 94%);
    min-height: 255px;

    display: flex;
    align-items: center;
    justify-content: center;

    perspective: 950px;
}

/* Gerakan melayang dan berputar 3D */
.jalu-logo-orbit {
    width: 100%;
    transform-style: preserve-3d;

    animation: jaluLogoFloat 6.5s
        ease-in-out infinite;
}

/* Tampilan logo */
.jalu-logo-3d {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;

    transform-style: preserve-3d;
    backface-visibility: hidden;

    transform:
        rotateX(var(--tilt-x, 0deg))
        rotateY(var(--tilt-y, 0deg))
        translateZ(24px);

    transition:
        transform 240ms ease-out,
        filter 260ms ease-out;

    filter:
        drop-shadow(0 12px 18px rgba(0,0,0,.65))
        drop-shadow(0 0 19px rgba(228,176,31,.32));
}

/* Efek ketika mouse diarahkan */
.jalu-logo-stage:hover .jalu-logo-3d {
    filter:
        drop-shadow(0 14px 22px rgba(0,0,0,.65))
        drop-shadow(0 0 28px rgba(244,190,36,.56));
}

/* Animasi melayang otomatis */
@keyframes jaluLogoFloat {
    0%, 100% {
        transform:
            translateY(0)
            rotateX(6deg)
            rotateY(-10deg);
    }

    50% {
        transform:
            translateY(-16px)
            rotateX(-5deg)
            rotateY(10deg);
    }
}

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

@media (max-width: 760px) {
    .brand.jalu-brand-img img {
        width: 150px;
        height: 63px;
    }

    .jalu-logo-stage {
        width: min(320px, 90%);
        min-height: 210px;
    }
}

@media (max-width: 440px) {
    .jalu-logo-stage {
        width: min(265px, 92%);
        min-height: 170px;
    }
}

/* Menghormati preferensi kurangi gerakan */
@media (prefers-reduced-motion: reduce) {
    .jalu-logo-orbit {
        animation: none !important;
    }

    .jalu-logo-3d {
        transform: none !important;
        transition: none !important;
    }
}