body {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
        flex-direction: column;
    min-height: 100vh;
}

main {
    -ms-flex-positive: 1;
        flex-grow: 1;
}

.carousel-inner {
    border-radius: 15px;
    overflow: hidden;
}

.carousel-item img {
    height: 300px;
    -o-object-fit: cover;
       object-fit: cover;
}

/* Gaya untuk kategori berbentuk kotak */
.border {
    border-radius: 5px;
    transition: all 0.3s ease;
}

.border:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    -webkit-transform: scale(1.05);
            transform: scale(1.05);
}

/* Shopee-like header styles */
header {
    background: linear-gradient(to bottom, #105091, #083d66) !important;
    color: white;
    padding: 0.5rem 0;
}

.header-top {
    font-size: 0.9rem;
}

.header-top a {
    color: white;
    text-decoration: none;
    margin-right: 1rem;
}

.header-top a:hover {
    text-decoration: underline;
}

.header-logo {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}

.header-logo img {
    width: 200px;
    height: auto;
}

.header-search {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
}

.header-search input {
    border: none;
    border-radius: 3px;
    padding: 0.5rem;
    -ms-flex-positive: 1;
        flex-grow: 1;
}

.header-search button {
    background-color: white;
    color: #ff5a00;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 3px;
    margin-left: 0.5rem;
    font-weight: bold;
}

.header-search button:hover {
    background-color: #083d66;
    color: white;
}

.header-icons {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
        justify-content: center;
    /* Pusatkan secara horizontal */
    -ms-flex-align: center;
        align-items: center;
    /* Pusatkan secara vertikal */
    height: 100%;
    /* Pastikan tinggi konsisten */
}

.header-icons a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
    height: 40px;
    /* Konsisten dengan elemen lainnya */
    width: 40px;
    /* Berikan ruang simetris */
}

.header-icons a:hover {
    opacity: 0.8;
}

footer {
    background: linear-gradient(to bottom, #105091, #083d66);
    color: white;
}

footer p {
    margin: 0;
}

.auth-links {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
        align-items: center;
    -ms-flex-pack: center;
        justify-content: center;
}

.auth-links a {
    text-decoration: none;
    color: white;
    margin: 0 0.5rem;
}

.auth-links span {
    color: white;
    margin: 0 0.5rem;
    display: inline-block;
}

.auth-links a:hover {
    text-decoration: underline;
}

.custom-btn {
    color: #083d66;
    /* Warna teks awal */
    border-color: #083d66;
    /* Warna border */
    background-color: transparent;
    /* Transparan di awal */
    transition: all 0.3s ease;
    /* Animasi transisi */
}
.custom-btn:hover {
    color: #fff;
    /* Warna teks saat hover */
    background-color: #083d66;
    /* Warna latar saat hover */
    border-color: #083d66;
    /* Border tetap */
}
.carousel-caption h2,
.carousel-caption p {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    /* Shadow pada teks */
}

.carousel-caption {
    top: 10%;
    /* Posisi vertikal di tengah */
    -webkit-transform: translateY(-10%);
            transform: translateY(-10%);
    /* Menjaga teks tetap di tengah */
}