/*
|--------------------------------------------------------------------------
| HOMEPAGE SEARCH & SIDEBAR — FINAL ALIGNMENT
|--------------------------------------------------------------------------
|
| Search dan sidebar adalah dua kolom dalam row Bootstrap yang sama.
| Karena itu tidak diperlukan kalkulasi margin-top melalui JavaScript.
|
*/

.etalase-home .home-main-column,
.etalase-home .home-sidebar-column {
    align-self: flex-start !important;
}

.etalase-home .home-search-shell {
    position: relative;
    z-index: 30;
    margin-top: 0 !important;
}

.etalase-home .home-search-shell form {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.etalase-home .home-search-shell input[type="search"],
.etalase-home .home-search-shell input[type="text"] {
    width: 100%;
}

.etalase-home .home-sidebar-column {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.etalase-home .home-sidebar-stack {
    width: 100%;
    margin-top: 0 !important;
    padding-top: 0 !important;

    /*
     * Menonaktifkan offset lama yang mungkin masih tersimpan
     * dari CSS/JavaScript versi sebelumnya.
     */
    --home-sidebar-align-offset: 0px !important;

    /*
     * Jangan biarkan class reveal menggeser posisi sidebar.
     */
    opacity: 1 !important;
    transform: none !important;
}

.etalase-home .home-sidebar-stack > :first-child,
.etalase-home .home-sidebar-stack > div:first-child,
.etalase-home .home-sidebar-stack > section:first-child {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/*
 * Beberapa partial lama memiliki class Bootstrap mt-*.
 * Hilangkan hanya pada card pertama sidebar.
 */
.etalase-home .home-sidebar-stack > .mt-1:first-child,
.etalase-home .home-sidebar-stack > .mt-2:first-child,
.etalase-home .home-sidebar-stack > .mt-3:first-child,
.etalase-home .home-sidebar-stack > .mt-4:first-child,
.etalase-home .home-sidebar-stack > .my-1:first-child,
.etalase-home .home-sidebar-stack > .my-2:first-child,
.etalase-home .home-sidebar-stack > .my-3:first-child,
.etalase-home .home-sidebar-stack > .my-4:first-child {
    margin-top: 0 !important;
}

.etalase-home .home-search-shell.is-search-invalid {
    animation: home-search-shake .3s ease;
}

.etalase-home .home-search-shell.is-search-invalid input {
    border-color: #ef4444 !important;
    box-shadow:
        0 0 0 4px rgba(239, 68, 68, .1)
        !important;
}

@keyframes home-search-shake {
    0%,
    100% {
        transform: translateX(0);
    }

    33% {
        transform: translateX(-5px);
    }

    66% {
        transform: translateX(5px);
    }
}

@media (min-width: 992px) {
    .etalase-home .home-sidebar-stack {
        position: sticky;

        /*
         * Digunakan setelah halaman mulai discroll.
         * Tidak mengubah posisi awal sidebar.
         */
        top: 108px;
    }
}

@media (max-width: 991.98px) {
    .etalase-home .home-sidebar-column {
        margin-top: 16px !important;
    }

    .etalase-home .home-sidebar-stack {
        position: static;
        margin-top: 0 !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .etalase-home .home-search-shell {
        animation: none !important;
    }
}