/* =========================================================
   MAWARTOTO FIXED FOOTER - PREMIUM RED BLACK
   DENGAN SEKAT ANTAR MENU
========================================================= */

.MAWARTOTO-fixed-footer{
    display:flex;
    justify-content:space-around;
    align-items:stretch;
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:9999;

    height:78px;
    padding:6px 8px 8px;

    background:#120000 !important;
    border-top:4px solid #ff0000 !important;

    box-shadow:
        0 -4px 0 #000,
        0 -8px 20px rgba(0,0,0,.65) !important;

    font-family:"Ubuntu",sans-serif;
}

/* =========================================================
   ITEM MENU
========================================================= */

.MAWARTOTO-fixed-footer a{
    flex:1;
    max-width:120px;
    min-width:0;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;

    position:relative;
    overflow:visible;

    min-height:60px;
    padding:8px 6px !important;

    text-decoration:none !important;
    text-align:center;

    background:transparent !important;
    color:#fff !important;

    border:0 !important;
    border-radius:0 !important;

    font-size:11px;
    font-weight:900 !important;
    line-height:1.15 !important;

    text-transform:uppercase !important;
    letter-spacing:.4px;

    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:break-word;

    transition:.15s ease;
}

/* =========================================================
   SEKAT ANTAR MENU
========================================================= */

.MAWARTOTO-fixed-footer a:not(:last-child)::after{
    content:"";
    position:absolute;

    top:10px;
    right:0;

    width:2px;
    height:calc(100% - 20px);

    background:
    linear-gradient(
        180deg,
        transparent,
        #ff0000 20%,
        #ff5c5c 50%,
        #ff0000 80%,
        transparent
    );

    box-shadow:
        1px 0 0 #000,
        -1px 0 0 #000;

    opacity:.9;
}

/* =========================================================
   GARIS AKTIF ATAS
========================================================= */

.MAWARTOTO-fixed-footer a::before{
    content:"";
    position:absolute;

    top:-6px;
    left:50%;

    transform:translateX(-50%);

    width:0;
    height:4px;

    background:#fff;

    transition:.15s ease;

    box-shadow:0 0 0 2px #000;
}

/* =========================================================
   ICON
========================================================= */

.MAWARTOTO-fixed-footer a img{
    width:22px;
    height:22px;
    margin:0 0 2px;

    object-fit:contain;

    transition:.15s ease;
    filter:none !important;
}

/* =========================================================
   HOVER MENU
========================================================= */

.MAWARTOTO-fixed-footer a:hover{
    color:#ffd400 !important;
    transform:translateY(-2px);
}

.MAWARTOTO-fixed-footer a:hover::before{
    width:72%;
}

.MAWARTOTO-fixed-footer a:hover img{
    transform:scale(1.08);
}

/* =========================================================
   TOMBOL TENGAH
========================================================= */

.MAWARTOTO-fixed-footer .tada{
    background:
    linear-gradient(
        180deg,
        #ff1717 0%,
        #a40000 100%
    ) !important;

    color:#fff !important;

    border:4px solid #000 !important;
    border-radius:0 !important;

    min-height:68px;
    margin-top:-18px;

    padding:8px 10px !important;

    box-shadow:
        4px 4px 0 #000,
        0 0 0 1px #2a2a2a !important;

    overflow:visible;

    animation:mawartotoPulse 2.4s infinite;
    z-index:5;
}

/* hilangkan sekat pada tombol tengah */
.MAWARTOTO-fixed-footer .tada::after{
    content:none !important;
}

/* garis atas tombol tengah */
.MAWARTOTO-fixed-footer .tada::before{
    content:"";
    position:absolute;

    top:-6px;
    left:50%;

    transform:translateX(-50%);

    width:78%;
    height:4px;

    background:#fff;

    box-shadow:0 0 0 2px #000;
}

/* icon tengah */
.MAWARTOTO-fixed-footer .tada img{
    width:24px;
    height:24px;

    margin-bottom:2px;

    filter:none !important;

    position:relative;
    z-index:1;
}

/* hover tengah */
.MAWARTOTO-fixed-footer .tada:hover{
    background:
    linear-gradient(
        180deg,
        #ff2a2a 0%,
        #c40000 100%
    ) !important;

    color:#fff !important;

    transform:translate(-2px,-2px);

    box-shadow:
        6px 6px 0 #000,
        0 0 0 1px #2a2a2a !important;
}

.MAWARTOTO-fixed-footer .tada:hover img{
    transform:scale(1.08);
}

/* =========================================================
   PULSE
========================================================= */

@keyframes mawartotoPulse{

    0%{
        box-shadow:
            4px 4px 0 #000,
            0 0 0 1px #2a2a2a;
    }

    50%{
        box-shadow:
            4px 4px 0 #000,
            0 0 0 1px #2a2a2a,
            0 0 0 4px rgba(255,225,0,.16);
    }

    100%{
        box-shadow:
            4px 4px 0 #000,
            0 0 0 1px #2a2a2a;
    }
}

/* =========================================================
   ANTI TEKS TERPOTONG
========================================================= */

.MAWARTOTO-fixed-footer a,
.MAWARTOTO-fixed-footer a span,
.MAWARTOTO-fixed-footer .tada,
.MAWARTOTO-fixed-footer .tada span{
    overflow:visible !important;
    text-overflow:unset !important;
    white-space:normal !important;
    line-height:1.15 !important;
}

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

@media (max-width:600px){

    .MAWARTOTO-fixed-footer{
        height:74px;
        padding:5px 6px 7px;
    }

    .MAWARTOTO-fixed-footer a{
        font-size:10px;
        min-height:56px;
        padding:7px 4px !important;
        max-width:90px;
    }

    .MAWARTOTO-fixed-footer a img{
        width:20px;
        height:20px;
    }

    .MAWARTOTO-fixed-footer .tada{
        min-height:64px;
        margin-top:-16px;
        padding:8px 8px !important;
    }

    .MAWARTOTO-fixed-footer .tada img{
        width:22px;
        height:22px;
    }

    .MAWARTOTO-fixed-footer a:not(:last-child)::after{
        height:calc(100% - 16px);
        top:8px;
    }
}