/* Font */
@font-face {
    font-family: 'Meticula';
    src: url('../assets/fonts/Meticula-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Konfigurasi Font */
body {
    font-family: 'Meticula', sans-serif;
}

/* Rotasi */
.rotate-effect {
    transition: transform 0.6s ease;
}

.rotate-effect:hover {
    transform: rotate(90deg);
}

/* Slide */
#slider-image {
    transition: opacity 0.5s ease, transform 0.5s ease;
    opacity: 1;
}

#slider-image.fade {
    opacity: 0;
}

/* Scroll Judul */
#scroll-text {
    transition: transform 0.6 s ease-out;
}

/* Zoom In Ikon */
.icon-zoom {
    transition: transform 0.1s ease;
}

.zoom-effect {
    transform: scale(1.2);
}

/* Button Primary (Hijau >> Krem) */
.btn-sajian-primary .button-layer-primary {
    background-color: #F3EEDC;
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

.btn-sajian-primary:hover .button-layer-primary {
    transform: translateX(0%);
}

.btn-sajian-primary:hover {
    color: #253b2f;
}

/* Button Secondary (Hijau >> Putih) */
.btn-sajian-secondary .button-layer-secondary {
    background-color: #fff;
    transform: translateX(100%);
    transition: transform 0.6s ease;
}

.btn-sajian-secondary:hover .button-layer-secondary {
    transform: translateX(0%);
}

.btn-sajian-secondary:hover {
    color: #253b2f;
}

/* Button Reverse (Krem >> Hijau) */
.btn-sajian-reverse .button-layer-primary {
    background-color: #253b2f;
    transform: translateX(-100%);
    transition: transform 0.6s ease;
}

.btn-sajian-reverse:hover .button-layer-primary {
    transform: translateX(0%);
}

.btn-sajian-reverse:hover {
    color: #D2E0D9;
}

/* Button Up (Hijau >> Putih) */
.btn-sajian-up .button-layer-up {
    background-color: #fff;
    transform: translateY(100%);
    transition: transform 0.5s ease;
}

.btn-sajian-up:hover .button-layer-up {
    transform: translateY(0%);
}

.btn-sajian-up:hover {
    color: #253b2f;
}

/* Efek Zoom In & Zoom Out */
.zoom-in {
    animation: zoomIn 0.3s ease forwards;
}

.zoom-out {
    animation: zoomOut 0.6s ease forwards;
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes zoomOut {
    from {
        transform: scale(1);
        opacity: 1;
    }

    to {
        transform: scale(0.8);
        opacity: 0;
    }
}

/* Transisi Detail Keranjang */
#cartDrawer {
    transition: transform 0.4s ease;
}

/* Tombol Detail Keranjang  */
#toggleUpDrawer {
    transition: top 0.4s ease;
}

/* Transisi Keranjang */
#cartBar {
    transform: translateY(100%);
    transition: transform 0.6s ease;
    pointer-events: none;
}

#cartBar.show {
    transform: translateY(0%);
    pointer-events: auto;
}