/* =========================
   IMPORT FONT
========================= */
@import url("https://fonts.googleapis.com/css?family=DM+Sans:500,600,700&display=swap");


/* =========================
   RESET
========================= */
*{
box-sizing:border-box;
margin:0;
padding:0;
}


/* =========================
   BODY
========================= */
body{

font-family:'DM Sans',sans-serif;

min-height:100vh;

background:#ffffff;

-webkit-font-smoothing:antialiased;

transition:background .3s,color .3s;

/* ruang untuk tab bar */
padding-bottom:140px;

}

.dark body{
background:#121212;
color:#eee;
}


/* =========================
   TAB BAR
========================= */

.nav{

position:fixed;

bottom:0;
left:0;
right:0;

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

background:#ffffff;

padding:10px 0 calc(12px + env(safe-area-inset-bottom));

box-shadow:0 -6px 25px rgba(0,0,0,.06);

z-index:9999;

transition:background .3s,box-shadow .3s;

}

.dark .nav{

background:#1f1f1f;

box-shadow:0 -6px 25px rgba(0,0,0,.4);

}


/* =========================
   NAV ITEM
========================= */

.nav-item{

width:44px;
height:44px;

border-radius:50%;

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

color:#9ca3af;

text-decoration:none;

transition:
transform .28s cubic-bezier(.4,0,.2,1),
background-color .25s ease,
color .25s ease,
box-shadow .25s ease;

}


/* HOVER */

.nav-item:hover{

transform:scale(1.08);

border-radius:50px;

background:#5e5e5e1f;

}

.dark .nav-item:hover{

background:#ffffff15;

}


/* TAP */

.nav-item:active{

transform:scale(1.25);

background:rgba(0,119,255,.74);

border-radius:50px;

}


/* =========================
   ACTIVE
========================= */

.nav-item.active{

background:rgb(0,119,255);

color:#fff;

box-shadow:0 8px 18px rgba(0,119,255,.25);

}

.dark .nav-item.active{

background:#64b5f6;

color:#121212;

box-shadow:0 8px 18px rgba(100,181,246,.4);

}


.nav-item span{

transition:transform .28s cubic-bezier(.4,0,.2,1);

font-size:22px;

}

.nav-item.active span{

transform:scale(1.1);

}


/* =========================
   PROFILE AVATAR
========================= */

.nav-avatar{

width:32px;
height:32px;

border-radius:50%;

object-fit:cover;

display:block;

transition:transform .25s;

}

.nav-item.profile{

padding:0;

}


/* ACTIVE AVATAR */

.nav-item.active .nav-avatar{

outline:2px solid #0077ff;

}

.dark .nav-item.active .nav-avatar{

outline:2px solid #64b5f6;

}


/* TAP ANIMATION */

.nav-item:active .nav-avatar{

transform:scale(1.2);

}


/* =========================
   MOBILE FLOATING TAB
========================= */

@media (max-width:767px){

body{
padding-bottom:150px;
}

.nav{

bottom:15px;

left:50%;

transform:translateX(-50%);

width:90%;
max-width:360px;

border-radius:50px;

padding:10px 0 calc(12px + env(safe-area-inset-bottom));

box-shadow:0 8px 25px rgba(0,0,0,.15);

background:#ffffff;

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

}

.dark .nav{

background:#1f1f1f;

box-shadow:0 8px 25px rgba(0,0,0,.4);

}

.nav-item{

width:50px;
height:50px;

font-size:22px;

}

}


/* =========================
   DESKTOP FLOATING
========================= */

@media (min-width:768px){

.nav{

max-width:700px;

left:50%;

transform:translateX(-50%);

bottom:20px;

border-radius:50px;

padding:14px 25px;

box-shadow:0 15px 45px rgba(25,118,210,.15);

}

.dark .nav{

box-shadow:0 15px 45px rgba(100,181,246,.4);

}

body{

padding-bottom:150px;

}

.nav-item span{

font-size:22px;

}

}


/* =========================
   HIDE TAB DESKTOP BESAR
========================= */

@media (min-width:1024px){

.nav{
display:none !important;
}

}